/* MAIN PAGE ONLY: headings */

/* Opening hero title (#) */
main.content h1 {
  font-size: 3.0rem;                                  /* bigger hero title */
  line-height: 1.08;
  margin-bottom: 2.35rem;                                 /* scales nicely desktop to mobile */
   
}

/* H1 Mobile sizing */
@media (max-width: 768px) {
  main.content h1 { 
    font-size: 2.30rem; 
  }
}






/* MAIN PAGE ONLY: section titles (##) */
main.content h2,
main.content h2.anchored {
  font-size: 2.75rem;                                  /* scales nicely desktop to mobile */
  font-weight: 600;                                   /* lower value for ligher look */
  letter-spacing: 0.025em;                           /* slightly tighter, feels more designed */
  line-height: 1.15;

  margin-top: 0.6rem;                                 /* bigger separation from previous section */
  margin-bottom: 2.4rem;                              /* clean gap before content */

  border-bottom: none !important;                     /* kills the underline */
  padding-bottom: 0 !important;
}

/* Mobile: a touch less vertical whitespace */
@media (max-width: 768px) {
  main.content h2,
  main.content h2.anchored {
    font-size: 1.75rem; 
    margin-top: 2.0rem;
    margin-bottom: 0.85rem;
    
  }
}

/* H2 inside frames: mobile-only spacing fix (keeps title off the cards, closer to top) */
@media (max-width: 768px) {
  .services-frame h2, .services-frame h2.anchored,
  .testimonials-frame h2, .testimonials-frame h2.anchored,
  .clients-frame h2, .clients-frame h2.anchored {
    margin-top: 0.2rem !important; /* closer to top of frame */
    margin-bottom: 1.4rem !important; /* more space to cards/content below */
  }
}



/* Subsection titles h3 (or ###) */
main.content h3, 
main.content h3.anchored {
  font-size: 1.25rem;
  font-weight: 600;                                   /* keep subsections consistent */
  line-height: 1.2;
}

/* H3 Mobile sizing */
@media (max-width: 768px) {
  main.content h3,
  main.content h3.anchored {
    font-size: 1.15rem; /* subsection title size on mobile */
  }
}

/* H3 inside service cards: control spacing to the text below (no <br> needed) */
.custom-services-orange-card h3,
.custom-services-orange-card h3.anchored { 
  margin-bottom: 1.0rem !important; 
} /* force visible space under card titles */

@media (max-width: 768px) {
  .custom-services-orange-card h3,
  .custom-services-orange-card h3.anchored { 
    margin-bottom: 1.1rem !important; 
    
  } /* force visible space on mobile too */
}


/* CLIENT LOGOS*/

/* consistent logo height */
.client-logo { 
  height: 44px; 
  width: 140px; 
  object-fit: contain; 
  display: inline-block; 
  margin: 14px 0;
} 

/* larger on desktop */
@media (min-width: 992px) {
  .client-logo { 
    height: 56px; 
    width: 170px; 
  } 
}

/* Per-logo boost for files with lots of transparent padding */
img.client-logo[src*="univsense_transparent"] { transform: scale(1.45); transform-origin: center; } 
img.client-logo[src*="moo_transparent"] { transform: scale(2.0); transform-origin: center; }
img.client-logo[src*="morethan_transparent"] { transform: scale(1.30); transform-origin: center; } 
img.client-logo[src*="sony_transparent"] { transform: scale(1.45); transform-origin: center; } 
img.client-logo[src*="po_ferries_transparent"] { transform: scale(1.45); transform-origin: center; }  
img.client-logo[src*="ageas_transparent"] { transform: scale(1.65); transform-origin: center; } 
img.client-logo[src*="monster_transparent"] { transform: scale(1.75); transform-origin: center; } 




/*STYLYING VARIOUS CUSTOM SECTIONS FOR MAIN PAGE*/

/* NO LONGER IN USE - Dark custom services sections on index page */
.custom-services-shaded-section {
  background-color: #000000; /**/
  padding: 15px 35px 15px 35px; /* top right bottom left */
  color: #ffffff; /* text colour*/
  border-radius: 0.8rem !important;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);  /* subtle card shadow */
}

/* NO LONGER IN USE - Clear custom services sections on index page */
.custom-services-clear-section {
  background-color: #E8E8E8;
  padding: 15px 35px 15px 35px; /* top right bottom left */
  color: #000000;
  border-radius: 0.8rem !important;
  border: 1.5px solid #ffffff;

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);  /* subtle card shadow */
}


/* CARDS */ 

/* testimonial card */
.testimonial-card { 
  background: #ffffff; 
  border-radius: 0.8rem; 
  padding: 42px 12px 12px 12px;             /* top right bottom left */
  border: 1.8px solid #D9D9D9;             /* #BEBEBE pale pale grey #D3D3D3 pale pale pale grey #D9D9D9 paler than pape pale grey */
} 



/* Orange services card */
.custom-services-orange-card {
  <span class=".svc-disc-orange"></span>;
  background-color: #FBE3D2;            /* pale orange/peach card background */
  padding: 15px 25px 15px 25px;         /* top right bottom left  12px 24px 12px 24px; */
  color: #000000;
  border-radius: 0.8rem !important;
  border: 1.8px solid #F6D8C6;          /* #D56713 rich burnt orange */
  
  max-width: 300px; 
  margin-left: auto; 
  margin-right: auto;                  /* make cards narrower and centre within their grid column */
  
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);  /* subtle card shadow */
}

/* stop service cards being artificially narrow on mobile */
@media (max-width: 768px) {
  .custom-services-orange-card { max-width: 100%; }
}


/* orange circle + centres its contents */
.svc-disc-orange { 
  width: 58px; 
  height: 58px; 
  background: #F5A770; 
  border-radius: 9999px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin: 15px 0 40px 0; 
  overflow: hidden; 
} /* circle + centre + clip */

/* icon size inside the circle */  
.svc-icon-orange { 
  width: 28px !important; 
  height: 28px !important; 
  max-width: 28px !important; 
  max-height: 28px !important; 
  display: block; 
  object-fit: contain; 
} 

/* force icon size */  
.svc-disc-green > 
  img.svc-icon-green { 
  width: 28px !important; 
  height: 28px !important; 
  max-width: 28px !important; 
  max-height: 28px !important; 
  object-fit: contain; 
  display: block; 
} 
  

/* MAIN PAGE - SEVERAL PERSONALISATIONS*/

/* BANDS */

/* Services band: full-width sage green background */
.services-band {
  background-color: #AABCB6;          /* sage green */
  padding: 32px 16px;                 /* add left/right padding so green shows at the sides on mobile */
}

/* Optional: a bit more breathing room on larger screens */
@media (max-width: 768px) {
  .services-band {
    padding: 18px 16px;                /* slightly wider gutters on desktop */
  }
}


/* Testimonials band: full-width pale grey background */
.testimonials-band {                  /*   */
  background-color: #2C3E50;          /* #E8E8E8 pale grey #959595 mid grey #2C3E50 banner colour */
  padding: 32px 16px;                 /* side padding so grey shows on mobile too */
}

@media (max-width: 768px) {
  .testimonials-band {
    padding: 18px 16px;                  /* slightly wider gutters on desktop */
  }
}


/* Clients band: keeps the same outer gutters as other sections, but stays transparent */
.clients-band {
  background-color: transparent;      /* keep page background */
  padding: 32px 16px;                 /* same as services/testimonials bands */
}

@media (max-width: 768px) {
  .clients-band {
   padding: 18px 16px;                 /* match the desktop gutters used elsewhere */ /* slightly wider gutters on desktop */
  }
}


/* FRAMES */


/* White frame that hugs the cards */
.services-frame {
  background: #ffffff;
  border-radius: 1rem;
  padding: 32px 35px;                 /* (top/bottom, left/right) */
  max-width: 1100px;                  /* stops it going too wide on large screens */
  margin: 0 auto;                     /* centres the frame */
}

@media (max-width: 768px) {
  .services-frame {
    padding: 18px 18px;           /* slightly tighter on mobile */
  }
}

/* Clients frame: same sizing as the other white frames */
.clients-frame {
  background: #ffffff; /*#EBEBEB*/
  border-radius: 1rem;
  padding: 22px 32px;             /* top/bottom, left/right */
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .clients-frame {
    padding: 18px 18px;           /* slightly tighter on mobile */
  }
}


/* White frame that hugs the testimonials */
.testimonials-frame {
  background: #E8E8E8;
  border-radius: 1rem;
  padding: 42px 45px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .testimonials-frame {
    padding: 18px 18px;           /* slightly tighter on mobile */
  }
}





/* ADDING QUOTATION MARKS TO TESTIMONIALS' FIRST SENTENCE AND MAKE CREDITS A TAD SMALLER */

 /* opening quote */
.testimonial-text p:first-child em::before { 
  content: "“"; 
  font-size: 2.3em; 
  line-height: 0; 
  vertical-align: -0.35em; 
  margin-right: 0.08em; 
}

/* closing quote */
.testimonial-text p:first-child em::after { 
  content: "”"; 
  font-size: 2.2em; 
  line-height: 0; 
  vertical-align: -0.35em; 
  margin-left: 0.08em; 
} 

/* first line text a smidge larger */
.testimonial-text p:first-child { font-size: 1.10em; } 

/* make the attribution line slightly smaller */
.testimonial-text p:last-child { font-size: 0.88em; } 

/* extra breathing room for text only */
@media (max-width: 768px) {
  .testimonial-text { 
    padding-left: 12px; 
    padding-right: 12px; } 
}




/* Homepage only: logo next to the visible banner title */
.quarto-title-block .quarto-title-banner .title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.quarto-title-block .quarto-title-banner .title::before {
  content: "";
  display: block;
  width: 1.1em;
  height: 1.1em;
  background-image: url("logo/dml_logo_3_orange_bars_v2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex: 0 0 auto;
  transform: translateY(-0.02em);
}

@media (max-width: 767.98px) {
  .quarto-title-block .quarto-title-banner .title::before {
    transform: translateY(-0.04em);
  }
}