/* css styles */

/*-- css:defaults PPMori--*/
body {
  font-family: 'PPMori', sans-serif; 
  font-size: 18px;
  line-height: 1.5; /* controls vertical space between lines of text, so it affects how “tight” or “airy” paragraphs feel */
}

/* 'Roboto' 'Open Sans' 'Lato' 'Merriweather' 'Verdana' 'Poppins' */ 

@media (max-width: 768px) {
  body {
    font-size: 15px; /* controls font in mobile/tablet view*/
  }
}



/* ADDING DARK ORANGE ACCENT TO TEXT */
:root {
  --accent-word: #E95420;
}

.accent-word {
  color: var(--accent-word);
}



/*MAIN PICTURE*/


/* giving main picture a bit of a shadow */
.hero-photo {
  border-radius: 9999px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* making testimonial pictures squared with rounded edges*/
.testimonial-photo {
  border-radius: 14px;          /* rounded square */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}



/*CONTACT FORM AND SUBMIT BUTTON*/


/* a bit of CSS to make the CONTACT FORM look like a modern “minimal” form */
form {
  max-width: 640px;
}

label {
  display: block;
  margin: 0 0 16px 0;
  font-weight: 600;
}

input, textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 2px solid #cfcfcf;
  border-radius: 10px;
  font: inherit;
}





/* CTA BUTTONS*/


/* Shared CTA behaviour */
.cta-btn,
.home-cta-btn {
  text-decoration: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform-origin: center;
}

/* Site-wide CTA button */
.cta-btn {
  display: inline-block;
  padding: 12px 18px;
  background: #E8E8E8;
  color: black !important;
  border: 1px solid rgba(0, 0, 0, 0.18);
  line-height: 1;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 14px rgba(0, 0, 0, 0.16);
}

/* Homepage CTA buttons, default style for Services and Case Studies */
.home-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 22px 38px;
  font-size: 1.16rem;
  line-height: 1.25;
  background: transparent;
  color: black !important;
  border: 3px solid #E95420;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 14px rgba(0, 0, 0, 0.16);
}

/* Featured homepage CTA button, Book a call */
.home-cta-btn.home-cta-btn-primary {
  background: #2C3E50;
  color: #E8E8E8 !important;
  border: 1px solid rgba(44, 62, 80, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 8px 18px rgba(0, 0, 0, 0.22);
}

/* Hover, keyboard focus, and tap states */
.cta-btn:hover,
.home-cta-btn:hover,
.cta-btn:focus-visible,
.home-cta-btn:focus-visible {
  text-decoration: none;
  transform: scale(1.045);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 10px 18px rgba(0, 0, 0, 0.18);
}

.cta-btn:active,
.home-cta-btn:active {
  transform: scale(1.02);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 5px 12px rgba(0, 0, 0, 0.16);
}



/* ADDITIONAL BUTTONS FOR HOME PAGE */

.home-cta-row {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  column-gap: 3rem;
  row-gap: 2rem;
  margin: 2.5rem 0 3.25rem 0;
}

/* Neutralise paragraph wrappers Quarto may insert */
.home-cta-row p {
  margin: 0 !important;
  display: contents;
}

.home-cta-row > * {
  margin: 0 !important;
}

/* Mobile: stack vertically with clear spacing */
@media (max-width: 576px) {
  .home-cta-row {
    grid-template-columns: 1fr;
    justify-content: stretch;
    row-gap: 1.25rem;
    margin: 2rem 0 2.75rem 0;
  }

  .home-cta-btn {
    display: flex;
    width: 100%;
    min-height: 72px;
    padding: 20px 24px;
    font-size: 1.1rem;
    line-height: 1.25;
  }
}


/* Small CTA variants using homepage palettes (service + case study pages) */

.cta-btn.cta-btn-outline-accent { /* small button, homepage-outline palette */
  background: transparent;
  color: black !important;
  border: 2px solid #E95420;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 6px 14px rgba(0, 0, 0, 0.16);
}

.cta-btn.cta-btn-primary-slate { /* small button, homepage-primary palette */
  background: #2C3E50;
  color: #E8E8E8 !important;
  border: 1px solid rgba(44, 62, 80, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.10) inset,
    0 8px 18px rgba(0, 0, 0, 0.22);
}



/* Small CTA row (for .cta-btn variants) */
.cta-row {
  display: flex;                  /* row on desktop */
  justify-content: flex-start;    /* left aligned */
  align-items: center;
  gap: 3rem;                      /* more horizontal spacing on desktop */
  flex-wrap: nowrap;              /* keep on one line on desktop */
  margin: 1.75rem 0 2.25rem 0;    /* more vertical breathing room on desktop */
}

/* Neutralise paragraph wrappers Quarto may insert */
.cta-row p { margin: 0 !important; }

/* Mobile: force vertical stacking, left aligned */
@media (max-width: 576px) {
  .cta-row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 1.5rem !important; }
  .cta-row > * { width: auto !important; }
  .cta-row p { display: block !important; }
}


/*NAVBAR BEHAVIOUR TEXT HIGHLIGHTS ONLY WHEN HOVERED ON  */

/* Normal + selected look the same */
.navbar-nav .nav-link,
.navbar-nav .nav-link.active,
.navbar-nav .show > .nav-link {
  color: #E8E8E8 !important;
  background-color: transparent !important;
}

/* Highlight only on hover/focus */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #EF7F58 !important; /* #E95420 true United theme colour highlights */
  background-color: transparent !important;
}



/*PAGE BANNER*/

/* Make the banner taller so more of the image is visible */
#title-block-header .quarto-title-banner {
  min-height: 170px;        /* increase until it feels right */
  padding-top: 3rem;
  padding-bottom: 2rem;


/* Keep it filling the area, but tweak crop */
  /*background-size: cover*/     /* 100% auto;  fit width, show more height */
  background-position: center 50%; /* move up/down: 0% = top, 50% = centre */
}


/*PAGE FOOTER*/


/* Quarto footer: force a single, consistent black banner */
footer.footer,
footer#quarto-footer,
#quarto-footer {
  background-color: #000 !important; /* black #212529*/
}

/* Kill/override inner theme backgrounds that sit on top of the footer */
footer.footer > *,
footer#quarto-footer > *,
#quarto-footer > *,
#quarto-footer .container,
#quarto-footer .container-fluid,
#quarto-footer .nav-footer,
#quarto-footer .nav-footer-left,
#quarto-footer .nav-footer-center,
#quarto-footer .nav-footer-right {
  background-color: transparent !important;
}

/* Footer: force bright white text across all themes */
footer.footer,
footer#quarto-footer,
#quarto-footer,
footer.footer *,
footer#quarto-footer *,
#quarto-footer * {
  color: #fff !important;
}


/* Mobile footer layout: stacked + readable spacing */
@media (max-width: 576px) {

  /* Stack the 3 footer areas */
  #quarto-footer .nav-footer,
  footer.footer .nav-footer,
  footer#quarto-footer .nav-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;                 /* we will control spacing via margins */
  }

  /* Shared styling for each area */
  #quarto-footer .nav-footer-left,
  #quarto-footer .nav-footer-center,
  #quarto-footer .nav-footer-right,
  footer.footer .nav-footer-left,
  footer.footer .nav-footer-center,
  footer.footer .nav-footer-right,
  footer#quarto-footer .nav-footer-left,
  footer#quarto-footer .nav-footer-center,
  footer#quarto-footer .nav-footer-right {
    width: 100%;
    text-align: center !important;
    line-height: 1.35 !important;
    padding: 0 !important;
  }

  /* Order: left, centre, right */
  #quarto-footer .nav-footer-left,
  footer.footer .nav-footer-left,
  footer#quarto-footer .nav-footer-left { order: 1; }

  #quarto-footer .nav-footer-center,
  footer.footer .nav-footer-center,
  footer#quarto-footer .nav-footer-center { order: 2; }

  #quarto-footer .nav-footer-right,
  footer.footer .nav-footer-right,
  footer#quarto-footer .nav-footer-right { order: 3; }

  /* Add space BETWEEN the three chunks (this is the key bit) */
  #quarto-footer .nav-footer-center,
  footer.footer .nav-footer-center,
  footer#quarto-footer .nav-footer-center {
    margin-top: 0.55rem !important;
  }

  #quarto-footer .nav-footer-right,
  footer.footer .nav-footer-right,
  footer#quarto-footer .nav-footer-right {
    margin-top: 0.55rem !important;
  }

  /* Remove only paragraph margins if they exist (don’t flatten everything else) */
  #quarto-footer .nav-footer p,
  footer.footer .nav-footer p,
  footer#quarto-footer .nav-footer p {
    margin: 0 !important;
  }

  /* Keep the logo from adding weird extra spacing */
  #quarto-footer img,
  footer.footer img,
  footer#quarto-footer img {
    margin: 0 !important;
    vertical-align: middle;
  }
}





/* TOP NAVBAR: black ribbon + taller, but let theme handle hover/active */
.navbar,
.navbar.navbar-dark,
.navbar.navbar-light {
  padding-top: 0.95rem !important;      /* taller ribbon */
  padding-bottom: 0.95rem !important;   /* taller ribbon */
}






/*STYLYING CUSTOM MMM AND OPTIMISATION SECTIONS*/

/* Light shade custom sections for MMM and optimisation pages*/
.custom-mmm-optim-light-section {
  background-color: #E8E8E8;
  padding: 35px 20px 20px 15px; /* top right bottom left */
  color: #000000;
  border-radius: 1.2rem;
  border: 1.5px solid #ffffff;

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

/* Testimonials band: full-width pale grey background */
.custom-mmm-optim-light-band {
  background-color: #CEDDD9;          /* pale grey */
  padding: 32px 16px;                 /* side padding so grey shows on mobile too */
}

/* White frame that hugs the testimonials */
.custom-mmm-optim-light-frame {
  background: #ffffff;
  border-radius: 0.5rem;
  padding: 22px 22px;
  max-width: 1100px;
  margin: 0 auto;
}








/*CREATING VARIOUS "HOW I WORK" SECTION FORMATTING OF INDEX PAGE */


/* Light Shade custom section for index page "how I work"*/
.custom-shaded-light {
  background-color: #d7e6f5;            /* #d1d9ce Darker green-grey */
  padding: 0;                           /* card itself has no padding now - top right bottom left */
  color: #000000;                       /* Contrast text */
  border-radius: 0.6rem !important;     /* rounded card corners */

  border: 1.5px solid #ffffff;           /* subtle light border to define the card edge - alternative colour rgba(255,255,255,0.8)*/
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);  /* subtle card shadow */
}


/* Title strip default (desktop/tablet) */
.card-title-strip {
  display: block;                      /* makes the strip a block so margin auto can centre it */
  width: calc(100% - 24px);            /* fills the card width but leaves ~12px gap each side */
  max-width: 360px;                    /* caps it so it doesn't become too wide on big screens */
  margin: 16px auto 0 auto;            /* adds space above and centres horizontally on larger screens */

  padding: 6px 14px;                   /* controls pill height (top/bottom) and side breathing room (left/right) */
  border-radius: 12px;                 /* rounded corners for the pill shape */
  
  background: #1f4fbf;                 /* pill background colour */
  color: #ffffff;                      /* pill text colour */

   /*border: 0.4px solid #173b8f;           indigo border (slightly darker than the pill background) */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* subtle shadow on the pill */

  font-weight: 300;                    /* makes the title text bold */
  font-size: 1.20rem;                  /* title size (relative to your global body size) */
  
  line-height: 1.15;                   /* keeps multi-line titles compact */
  text-align: center;                  /* centres the title text horizontally */

  white-space: normal;                 /* allows wrapping on desktop/tablet */
}

/* removes default paragraph margins that push text off-centre */
.card-title-strip > p {
  margin: 0;                           
}


/* Card body spacing */
.custom-shaded-light .card-body-text {
  font-size: 0.95rem;                   /* body text size inside the cards */
  line-height: 1.5;                     /* keep it readable */
  padding: 24px 28px 28px 28px;          /* top right bottom left */
}

/* removes the default paragraph bottom margin */
.custom-shaded-light .card-body-text > p:last-child {
  margin-bottom: 0;
}



/* Mobile: stretch strip, keep title on one line */
@media (max-width: 768px) {            /* applies only on screens up to 768px wide */
  .card-title-strip {
    width: calc(100% - 24px);          /* stretches nearly full width but leaves ~12px gap each side */
    max-width: none;                   /* disables the 320px cap so it can expand fully */
    margin: 16px auto 0 auto;          /* keeps top spacing and stays centred */
    
    padding: 10px 14px;                /* increases pill thickness on mobile (top/bottom, left/right) */
    line-height: 1.2;                  /* adds a touch more vertical breathing room */
    
    font-size: 1.1rem;                 /* mobile title size */
    
    white-space: nowrap;               /* prevents the title from wrapping onto a second line */
    overflow: hidden;                  /* hides any text that overflows the pill width */
    text-overflow: ellipsis;           /* shows “…” when text is clipped, instead of hard cutting */
  }

  .custom-shaded-light .card-body-text {
    font-size: 0.9rem;                 /* slightly smaller on mobile */
    padding: 14px 30px 18px 30px;      /* slightly tighter on mobile (top right bottom left) */
  }
}



/* THEME VARIANT: Orange palette for a single "How I work" card */
.custom-shaded-light.theme-orange {
  background-color: #FBE3D2;            /* pale orange/peach card background */
}

.custom-shaded-light.theme-orange .card-title-strip {
  background: #D56713;                  /* orange pill background */
  color: #ffffff;                       /* pill text colour */
}


/* THEME VARIANT: Green palette for a single "How I work" card */
.custom-shaded-light.theme-green {
  background-color: #CEDDD9;            /* pale green card background */
}

.custom-shaded-light.theme-green .card-title-strip {
  background: #207136;                  /* deep green pill background */
  color: #ffffff;                       /* pill text colour */
}




/*OTHER PICTURES*/

/* shadow wrapper for charts */
.framed-chart {
  display: inline-block;                  /* makes the shadow wrap tightly */
  border-radius: 0.4rem;                  /* rounded corners on the wrapper */
  overflow: hidden;                       /* clips the image to the rounded corners */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);  /* subtle lift */
}

/* ensure the image behaves nicely inside the wrapper */
.framed-chart img {
  display: block;                         /* removes inline gaps */
  width: 100%;
  height: auto;
}




/* CTA: dark slate blue-grey framed panel on white background */
.cta-slate {
  background-color: #18181A;     /* #3B4A55 slate blue-grey #18181A very dark charcoal #E95420 strong orange*/
  border-radius: 1rem;
  padding: 32px 42px;           /* top/bottom, left/right */
  color: #ffffff;               /* readable on dark background */
}

@media (max-width: 768px) {
  .cta-slate {
    padding: 24px 32px;         /* slightly tighter on mobile */
  }
}

/* Optional: keep links readable on the dark panel */
.cta-slate a {
  color: #ffffff; 
}




/* COMPONENT: Process step card (service pages) */

/* reusable card */
.process-step-card { 
  background-color: transparent; /* transparent background */
  padding: 15px 25px 15px 25px;  /* top right bottom left */
  color: #000000; 
  border-radius: 0.8rem; 
  border: 3px solid #B0DCFC; /* blue border */
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10); 
  font-size: 1.05rem;
} 

@media (max-width: 768px) {

  .process-step-card {
    font-size: 0.85rem; /* mobile size */
  }

  .process-step-card > .grid {
    margin-left: 0 !important; /* stop grid gutters cancelling spacing */
    margin-right: 0 !important; /* stop grid gutters cancelling spacing */
  }

  .process-step-card .g-col-12.g-col-md-10 {
    padding-left: 0px !important; /* real breathing room for text */
    padding-right: 14px !important; /* real breathing room for text */
  }

}


/* reusable disc */
.process-step-disc { 
  width: 58px; 
  height: 58px; 
  background: #538ED5; /* blue circle */
  border-radius: 9999px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin: 12px 0 14px 0; 
  overflow: hidden; 
} 


/* allow cards to fill the full row */
.how-work-steps .process-step-card { 
  max-width: none; width: 100%; 
  margin: 12px 0 0px 0;
} 


@media (max-width: 768px) {
  .process-step-card h3,
  .process-step-card h3.anchored { 
    margin-top: 0 !important; 
    margin-bottom: 1rem;
  }
}

/* less indent + nice spacing above list */
.process-step-card ul { 
  padding-left: 1.05rem; 
  margin-top: 0.2rem; 
  margin-bottom: 0;
} 

/* optional: airy but not too spaced */
.process-step-card li {  margin-bottom: 0.15rem; } 

/* removes paragraph margins inside list items */
.process-step-card li p { margin: 0; }

/* VARIANT: Green step (apply to the 2nd card only) */
.process-step-card.process-step-green { border-color: #D8EC9C; } /* green border */
.process-step-card.process-step-green .process-step-disc { background: #9DBB59; } /* green disc */

/* VARIANT: Orange step (apply to the 3rd card only) */
.process-step-card.process-step-orange { border-color: #FCD864; } /* orange border */
.process-step-card.process-step-orange .process-step-disc { background: #F68E38; } /* orange disc */

/* VARIANT: Indigo/Purple step (apply to the 4th card only) */
.process-step-card.process-step-purple { border-color: #D4A0DC; } /* purple border */
.process-step-card.process-step-purple .process-step-disc { background: #8064A2; } /* purple disc */


/* creating a frame to house the how I work flows */
.custom-how-i-work-frame {
  background-color: transparent; /*#CEDDD9*/
  padding: 35px 25px 20px 25px; /* top right bottom left */
  color: #000000;
  border-radius: 1.2rem;
  border: 1.5px solid #ffffff;
}



/* HOW I WORK (desktop): stack disc above text inside each card, equalise card heights, tighten disc-to-title gap */
@media (min-width: 768px) {

  /* Stack the inner grid columns on desktop (disc above text) */
  .process-step-card .g-col-md-2,
  .process-step-card .g-col-md-10 {
    grid-column: 1 / -1; /* both span full width */
  }

  /* Tighten the gap between the disc and the title on desktop */
  .process-step-disc {
    margin: 12px 0 2px 0; /* minimal space under the disc */
  }

  /* Remove left/right padding we added for the text column when it was beside the disc */
  .process-step-card .g-col-12.g-col-md-10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* THIS is the main fix: kill the big default top margin on the H3 */
  .process-step-card h3,
  .process-step-card h3.anchored {
    margin-top: 0.2rem !important;   /* brings title up under the disc */
    margin-bottom: 0.85rem;          /* keep separation to bullets */
  }

  /* Equal card heights within the outer grid */
  .custom-how-i-work-frame .grid .process-step-card {
    height: 100%;              /* stretch to match tallest in the row */
    display: flex;             /* allow content to flow nicely */
    flex-direction: column;
  }

}