@import "fonts.css";

/* =======================================================
   SCOPE: All styles are scoped to .lp
   ======================================================= */

/* -----------------------
   CSS CUSTOM PROPERTIES
   ----------------------- */
.lp {
  --global-width: 1268px;

  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;
  --font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;

  --color-primary-text: #333;
  --color-secondary-text: #757575;
  --color-white: #fff;
  --color-lighter-gray: #f6f6f6;
  --color-light-gray: #e6e6e6;
  --color-mid-gray: #ccc;
  --color-dark-gray: #444;
  --color-darker-gray: #15171a;
  --color-black: #000;

  /* Note: variables cannot carry !important; apply it on properties if needed */
  --ghost-accent-color: #004158;
  --accent-hover-color: #0082a9;
  --accent-complementary: #cb6f2a;

  --service-card-background: #fcf6ed;

  /* Component sizing helpers */
  --hero-media-max: clamp(600px, 70vw, 980px);

  /* Case-study title measure */
  --case-title-measure-desktop: 44ch;
  --case-title-measure-tablet: 40ch;
  --case-title-measure-phone: 36ch;

  --hero-svg-scale: 0.9; 
}

/* -----------------------
   BASE / RESET
   ----------------------- */
.lp {
  font-family: inherit;                /* ← follow theme font */
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-primary-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }

.lp button,
.lp input,
.lp select,
.lp textarea { font: inherit; }

.lp img { height: auto; display: block; }

.lp a { color: var(--color-darker-gray); text-decoration: none; }
.lp a:not(.kg-btn):not(.kg-product-card-button):hover { opacity: 1; } /* keep local hover override */

.lp blockquote,
.lp dd,
.lp dl,
.lp figure,
.lp h1,
.lp h2,
.lp h3,
.lp h4,
.lp p { margin: 0; }

.lp h1, .lp h2, .lp h3, .lp h4, .lp h5, .lp h6 {
  line-height: 1.15;
  color: var(--color-darker-gray);
  letter-spacing: -0.02em;
  font-weight: inherit;                /* ← let theme control */
 }

.lp h1 { font-size: 4rem; }
.lp h2 { font-size: 2.8rem; }
.lp h3 { font-size: 2.4rem; }
.lp h4 { font-size: 2.2rem; }
.lp h5 { font-size: 2rem; }
.lp h6 { font-size: 1.8rem; }

.lp hr {
  width: 100%;
  height: 1px;
  background-color: var(--color-light-gray);
  border: 0;
}

.lp blockquote:not([class]) {
  padding-left: 2rem;
  border-left: 4px solid var(--ghost-accent-color);
}

.lp figcaption {
  margin-top: 1.6rem;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--color-secondary-text);
  text-align: center;
}

.lp pre {
  padding: 1.6rem 2.4rem;
  overflow-x: auto;
  line-height: 1.5;
  white-space: pre;
  background-color: var(--color-lighter-gray);
}
.lp code { font-family: var(--font-mono); font-size: 15px; }
.lp :not(pre) > code {
  padding: 0.4rem;
  color: var(--ghost-accent-color);
  background-color: var(--color-lighter-gray);
  border-radius: 3px;
}

.lp iframe { display: block; width: 100%; overflow: hidden; border: 0; }

/* =======================================================
   COMPONENTS
   ======================================================= */

/* ============================
   HERO
   ============================ */
.lp .hero {
  display: flex;
  flex-direction: column;
  align-items: center;           /* base = centered; overridden per variant */
  justify-content: center;
  max-width: var(--global-width);
  min-height: 40rem;
  overflow: hidden;
  padding: 0 1rem;
  margin: 0 auto 4rem;
}

/* --- layout variants --- */
.lp .hero[data-style="image-on-side"] {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  padding: 4rem 1rem;
}

.lp .hero[data-style="image-full-bg"] {
  position: relative;
  margin: 0 0 4rem;
  max-width: none;
}

/* NEW: left-align the “image-below” variant */
.lp .hero[data-style="image-below"] .hero__content { align-items: flex-start; }
.lp .hero[data-style="image-below"] .hero__description { text-align: left; }
.lp .hero[data-style="image-below"] .hero__links { align-self: flex-start; }

/* --- media --- */
.lp .hero__media {
  border-radius: 5px;
  width: 100%;
  max-width: var(--hero-media-max);
  margin: 1rem auto 0;
  overflow: hidden;
  height: 100%;
  top: 0;
  left: 0;
}

.lp .hero__media a { display: block; }

.lp .hero[data-style="image-below"] .hero__media { border-radius: 30px; margin-top: 1rem; }
.lp .hero[data-style="image-full-bg"] .hero__media { position: absolute; border-radius: 0; max-width: none; }

.lp .hero__figure { position: relative; margin: 0; }
.lp .hero__img {
  object-fit: contain; 
  width: calc(100% * var(--hero-svg-scale));
  height: auto;
  aspect-ratio: auto;
  margin-inline: auto;  
}
.lp .hero[data-style="image-full-bg"] .hero__img { filter: brightness(0.75); }
.lp .hero[data-style="image-below"] .hero__img { aspect-ratio: auto; }

/* --- content --- */
.lp .hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;           /* base = centered; see variant overrides above */
  width: 100%;
  z-index: 1;
}
.lp .hero[data-style="image-below"] .hero__content { max-width: 80rem; margin: 2rem 0; }
.lp .hero[data-style="image-on-side"] .hero__content { align-items: flex-start; }
.lp .hero[data-style="image-full-bg"] .hero__content { max-width: 60rem; }

/* --- title --- */
.lp .hero__title {
  /* follow theme font; text is left by design */
  font-family: inherit;
  font-weight: 400;
  text-align: left;
  margin-bottom: 1.25rem;
  font-size: calc(1.6rem + 3vmin);
  letter-spacing: 0;
}
/* force 3 lines: each span becomes a block line */
.lp .hero__title .hero__line { display: block; }

.lp .hero[data-style="image-below"] .hero__title { margin-top: 0rem; }
.lp .hero[data-style="image-full-bg"] .hero__title { margin-top: 0; color: #fff; }
.lp .hero[data-style="image-on-side"] .hero__title { text-align: left; }

/* --- description --- */
.lp .hero__description {
  font-family: var(--font-sans);
  font-size: calc(2.2rem + 1vmin);
  margin-bottom: 5.75rem;
  text-align: center;            /* base = centered; “image-below” overrides to left */
  width: 100%;
  color: var(--color-secondary-text);
}
.lp .hero[data-style="image-full-bg"] .hero__description { color: #fff; }
.lp .hero[data-style="image-on-side"] .hero__description { text-align: left; }

/* --- CTAs --- */
.lp .hero__links {
  display: flex;
  align-self: center;            /* base = centered; “image-below” overrides to left */
  margin-bottom: 2rem;
}
.lp .hero[data-style="image-on-side"] .hero__links { align-self: flex-start; }

.lp .hero__links .button {
  font-size: 1.6rem;
  padding: 0.75rem 2rem;
  font-weight: 700;
  border-radius: 30px;
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.lp .button-primary { color: #fff; background-color: var(--ghost-accent-color); margin-right: 1.5rem; }
.lp .button-primary:hover { background-color: var(--accent-hover-color); }
.lp .button-secondary { border: 2px solid var(--ghost-accent-color); color: var(--ghost-accent-color); }
.lp .button-secondary:hover {
  color: #fff; background-color: var(--accent-complementary); border-color: var(--accent-complementary);
}

/* Full-bleed hairline ABOVE the SVG, with space BELOW the line */
/* allow the line to extend beyond the constrained container */
.lp .hero[data-style="image-below"] { 
  overflow: visible;
}


/* Full-bleed hairline ABOVE the SVG, with space BELOW the line */
.lp .hero[data-style="image-below"] .hero__media {
  position: relative;
  overflow: visible;        /* don't clip the pseudo-element */
  border-radius: 30px;
  margin-top: 0;            /* was: 1 (no unit); keep 0 so space is below the line */
  padding-top: 5.75rem;     /* space between line and SVG */
}

.lp .hero[data-style="image-below"] .hero__media::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%); /* sit just above the box */
  width: 100vw;                     /* full bleed */
  height: 1px;                      /* thin hairline */
  background: var(--color-light-gray, #e6e6e6);
  pointer-events: none;
}

@supports (width: 100svw) {
  .lp .hero[data-style="image-below"] .hero__media::before { width: 100svw; }
}


/* Smaller screens: slightly tighter spacing */
@media (max-width: 680px) {
  .lp .hero[data-style="image-below"] .hero__media { padding-top: 1.25rem; }
}



/* -----------------------
   BRANDS (standalone section)
   ----------------------- */
.lp .brands {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  margin: 0 auto 4rem;
  max-width: var(--global-width);
  align-items: center;
  justify-content: center;
}
.lp .brands li {
  list-style: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 60px;
}
.lp .brands li img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* Bigger logos only in the Clients full-bleed band */
.clients .brands li {
  width: 160px;
  height: 80px;
}

@media (min-width: 681px) {
  .clients .brands li { width: 190px; height: 95px; }
}

@media (min-width: 1200px) {
  .clients .brands li { width: 220px; height: 110px; }
}

/* Optional: a touch more spacing between bigger logos */
.clients .brands { gap: 1.25rem; }  /* or 2rem if you prefer */

/* Clients row: single line on desktop, auto-fit logos */
@media (min-width: 992px) {
  .clients .brands {
    flex-wrap: nowrap;              /* keep one row */
    justify-content: space-between; /* distribute evenly */
    gap: 1.25rem;                   /* tweak as you like */
  }
  .clients .brands li {
    /* Let items share space instead of using fixed widths */
    flex: 1 1 0;
    width: auto;                    /* override earlier width */
    height: clamp(70px, 7vw, 110px);/* scale by height; images stay contained */
  }
}

/* Below desktop, allow wrap so it doesn't get squished */
@media (max-width: 991px) {
  .clients .brands {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .clients .brands li {
    flex: 0 1 auto;
    width: 140px;                   /* reasonable mobile target */
    height: 70px;
  }
}



/* -----------------------
   CLIENTS — full-bleed thin rules
   ----------------------- */
.clients.gh-outer {
  background: none;
  border-top: 1.5px solid var(--color-light-gray, #e6e6e6);   /* fallback added */
  border-bottom: 1.5px solid var(--color-light-gray, #e6e6e6);
  margin: 3rem 0;                                             /* space before/after the band */
}
.clients.gh-outer .gh-inner {
  padding: 2rem 0;                                            /* space inside the lines */
}
.clients .section-title.center { margin-top: 0; margin-bottom: 1rem; }
.clients .brands { margin: 0; /* override generic margin to keep spacing controlled here */ }



/* -----------------------
   CASE STUDY
   ----------------------- */
.lp .case-study-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: var(--global-width);
  padding: 1rem 1rem 4rem;
  margin: 0 auto;
  text-align: center;
}

.lp .case-study__title {
  font-family: var(--font-sans);
  font-size: calc(1.4rem + 1.5vmin);
  line-height: 1.3;
  color: var(--color-primary-text);
  margin-bottom: 2.5rem;
  inline-size: var(--case-title-measure-desktop);
  max-width: none;
  margin-inline: auto;
  text-wrap: balance;
  white-space: normal;
}

.lp .case-study__links { display: flex; align-self: center; }
.lp .case-study__links .button {
  font-family: var(--font-sans);
  font-size: 1.6rem;
  padding: 0.75rem 2rem;
  font-weight: 700;
  border-radius: 30px;
  display: block;
  white-space: nowrap;
}

/* -----------------------
   SERVICES (Sectors)
   ----------------------- */
.lp .services {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); /* collapse empty columns */
  padding: 0 1rem;
  margin: 0 auto 4rem;
  max-width: var(--global-width);
}

.lp .services li {
  list-style: none;
  padding: 1.25rem 1.75rem;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  background-color: var(--service-card-background);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp .services li:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.lp .services li:nth-child(1) { border-left: 4px solid var(--ghost-accent-color); }
.lp .services li:nth-child(2) { border-left: 4px solid var(--accent-hover-color); }
.lp .services li:nth-child(3) { border-left: 4px solid var(--accent-complementary); }

/* Services icon wrapper (SVG via <img>) */
.lp .services__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: clamp(2.30rem, 1.30rem + 2vw, 3.5rem);
  height: clamp(2.30rem, 1.30rem + 2vw, 3.5rem);
  margin-bottom: 0.5rem;
}
.lp .services__icon img{
  display:block;
  width:100%;
  height:100%;
}


.lp .services__title {
  /* Mobile first; desktop values requested: 2.7rem */
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  opacity: 0.75;
  text-align: center;
  color: var(--color-darker-gray);
}

.lp .services__description {
  /* Mobile first; desktop values requested: 1.55rem */
  font-size: 1.15rem;
  line-height: 1.6;
  opacity: 0.9;
  padding-left: 1.5rem;
  list-style-type: disc;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  color: var(--color-primary-text);
}
.lp .services__description li {
  margin-bottom: 0.75rem;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  border-radius: 0 !important;
  list-style: disc;
  position: relative;
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
}

/* Optional color-block style */
.lp .services.bg-color li { position: relative; border: none; }

/* -----------------------
   FAQ
   ----------------------- */
.lp .faq { max-width: 660px; margin: 0 auto 4rem; padding: 0 1rem; }

/* Simple style */
.lp .faq[data-style="simple"] details.accordion {
  border-bottom: 2px solid #ebebeb;
  position: relative;
  padding: 1rem 0;
}
.lp .faq[data-style="simple"] details.accordion summary {
  list-style: none;
  font-size: 1.1rem;
  font-weight: 700;
  opacity: 0.75;
}
.lp .faq[data-style="simple"] details.accordion summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  font-weight: 700;
}
.lp .faq[data-style="simple"] details.accordion[open] summary::after { content: "-"; }

/* -----------------------
   FAQ (Detailed style) — OVERLAP FIX
   ----------------------- */

/* Hide default marker */
.lp details.accordion summary::marker { display: none; }

/* The card container */
.lp .faq[data-style="detailed"] details.accordion {
  margin-bottom: 1rem;
  border-radius: 5px;
  /* remove the big left padding from the container */
  padding: 1rem;                   /* was: 1rem 1rem 1rem 2.75/3.5rem */
  position: relative;
  border-left: 5px solid #222;
  overflow: hidden;
  background-color: #fcf6ed;
}

/* The clickable question line */
.lp .faq[data-style="detailed"] details.accordion summary {
  display: block;                  /* ensure padding applies as expected */
  list-style: none;
  position: relative;              /* anchor for ::before */
  cursor: pointer;

  font-weight: 500;
  line-height: 1.3;
  font-size: 1.35rem;              /* mobile */
  /* give the text a dedicated gutter for the icon */
  padding-left: 2.25rem;           /* <- key: text won’t collide with icon */
}

/* The + / − icon */
.lp .faq[data-style="detailed"] details.accordion summary::before {
  content: "+";
  position: absolute;
  left: 0.5rem;                    /* sit inside the gutter */
  top: 50%;
  transform: translateY(-50%);     /* stay vertically centered */
  color: #000;
  line-height: 1;
  font-weight: normal;
  font-size: 1.6rem;               /* mobile */
}

/* Rotate to a × when open (while keeping vertical centering) */
.lp .faq[data-style="detailed"] details.accordion[open] summary::before {
  transform: translateY(-50%) rotate(45deg);
}

/* Body text (unchanged, keep yours if you already customized) */
.lp .faq details.accordion p {
  font-size: 1.2rem;               /* mobile */
  line-height: 1.65;
  margin: 1rem 0;
  font-family: var(--font-sans);
}

/* Optional: a touch more room on desktop */
@media (min-width: 992px) {
  .lp .faq[data-style="detailed"] details.accordion summary {
    padding-left: 2.5rem;
    font-size: 1.85rem;
  }
  .lp .faq[data-style="detailed"] details.accordion summary::before {
    left: 0.6rem;
    font-size: 2.1rem;
  }
}


/* First three items color accents */
.lp .faq[data-style="detailed"] details.accordion:nth-child(1) { border-left-color: #004158; }
.lp .faq[data-style="detailed"] details.accordion:nth-child(2) { border-left-color: #0082a9; }
.lp .faq[data-style="detailed"] details.accordion:nth-child(3) { border-left-color: #cb6f2a; }
.lp .faq[data-style="detailed"] details.accordion:nth-child(1) summary::before { color: #004158; }
.lp .faq[data-style="detailed"] details.accordion:nth-child(2) summary::before { color: #0082a9; }
.lp .faq[data-style="detailed"] details.accordion:nth-child(3) summary::before { color: #cb6f2a; }

/* FAQ body text */
.lp .faq details.accordion p {
  font-size: 1.2rem;           /* mobile */
  line-height: 1.65;
  margin: 1rem 0;
  font-family: var(--font-sans);
}

/* FAQ section heading (the .section-title right before .faq) */
.lp h2.section-title.center:has(+ .faq) {
  font-size: 2rem;             /* mobile */
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 3rem;
}

/* -----------------------
   SECTION TITLES
   ----------------------- */
.lp .section-title {
  --color-accent: #4d4d4d;
  font-size: calc(0.6vw + 1.4rem);
  font-weight: 400;
  line-height: 1.2;
  padding: 0 1rem;
  margin: 2rem auto;
  opacity: 0.75;
  max-width: var(--global-width);
  color: var(--color-accent);
}
.lp .section-title.center { text-align: center; }

/* Make "Sectors we serve" match "We have worked with" */
.lp h2.section-title:has(+ .services) {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  line-height: 1.2;
  margin-top: 5rem;
  margin-bottom: 3rem;
  text-align: center;
}

/* Make "We have worked with" match "Sectors we serve" */
.clients .section-title.center {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  line-height: 1.2;
}

/* Make survey-comparison H2s match the big section headers */
.lp .survey-comparison h2 {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
  line-height: 1.2;
  margin: 2rem auto 3rem;   /* same vertical rhythm */
  padding: 0 1rem;
  max-width: var(--global-width);
  text-align: center;
  --color-accent: #4d4d4d;
  letter-spacing: -0.02em;
  font-weight: inherit;
}

/* Only the first section-title inside .survey-comparison gets the line */
.lp .survey-comparison > h2.section-title {
  position: relative;
  padding-top: 0;                 /* default: no extra space */
}

.lp .survey-comparison > h2.section-title:first-of-type {
  padding-top: 1.5rem;            /* space between line and the H2 text */
}

.lp .survey-comparison > h2.section-title:first-of-type::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;                   /* or 100svw to avoid scrollbar width */
  height: 1px;
  background: var(--color-light-gray, #e6e6e6);
  pointer-events: none;
}

/* ensure bleed isn’t clipped */
.lp .survey-comparison { overflow: visible; }

/* "The Bottom Line" — DM Sans bold, slightly smaller */
.lp .survey-comparison h2:last-of-type {
  font-family: var(--font-sans ) !important;      /* DM Sans */
  font-weight: 700 !important;                   /* bold */
  color: var(--color-black) !important;     /* or #000 */
  opacity: .75 !important;                    /* undo .section-title’s 0.75 */
  font-size: clamp(1.8rem, 1.2rem + 1.2vw, 2.4rem);
  line-height: 1.2;
  text-align: center;
  margin: 2rem auto 3rem;             /* matches your section title rhythm */
}

.lp .bottom-line-title { font-family: var(--font-sans); font-weight:700; font-size: clamp(2rem,1.4rem + 1.8vw,2.8rem); }

/* Put space BETWEEN the hairline and the heading text (not above the line) */
.lp .survey-comparison > h2.section-title:first-of-type {
  position: relative;        /* anchor for ::before */
  margin-top: 0 !important;  /* don't push the line down */
  padding-top: 5rem;         /* <<< gap you want under the line */
}

/* Keep the hairline glued to the very top of the H2 */
.lp .survey-comparison > h2.section-title:first-of-type::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;                    /* sit on the H2 top edge */
  transform: translateX(-50%); /* remove the old -50% Y */
  width: 100vw;
  height: 1px;
  background: var(--color-light-gray, #e6e6e6);
  pointer-events: none;
}


/* -----------------------
   COMPARISON TABLE 
   ----------------------- */

/* Larger intro copy in the survey comparison block */
.lp .survey-comparison > p {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.65rem);
  line-height: 1.65;
  margin: 1rem 0 2rem; /* space below before the table */
}

/* Bigger text in the comparison table */
.lp .survey-comparison .comparison-table {
  /* tweak the max to taste */
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.35rem);
}

.lp .survey-comparison .comparison-table th,
.lp .survey-comparison .comparison-table td {
  font-size: 1em;        /* inherit from wrapper for easy scaling */
  line-height: 1.45;
}

/* Override the earlier fixed 18px on center columns */
.lp .survey-comparison .comparison-table td:nth-child(2),
.lp .survey-comparison .comparison-table td:nth-child(3) {
  font-size: 1em !important; /* or 1.1em if you want these slightly larger */
}

/* Optional: make headers a touch larger than body */
.lp .survey-comparison .comparison-table th {
  font-size: 1.1em;
}

/* Exact weights in the comparison table */
.lp .survey-comparison .comparison-table th,
.lp .survey-comparison .comparison-table th strong,
.lp .survey-comparison .comparison-table th b {
  font-weight: 500 !important;   /* headers */
}

.lp .survey-comparison .comparison-table td,
.lp .survey-comparison .comparison-table td strong,
.lp .survey-comparison .comparison-table td b {
  font-weight: 400 !important;   /* body cells */
}

/* Bigger lightbulb emoji in the survey comparison intro */
.lp .survey-comparison .hint-emoji {
  font-size: 1.8em;         /* tweak size here */
  line-height: 0.9;         /* keeps it from feeling too tall */
  vertical-align: -0.1em;   /* nudges it down to align with text */
  margin-right: 0.35rem;    /* spacing before “Here’s …” */
  display: inline-block;    /* makes vertical-align behave consistently */
}

/* Turn large check marks green (The bottom line recommendation boxes) */
/* Recommendation box heading ✓ — clean version */
.lp {
  --rec-check-size: 4.0rem;   /* ← change this to resize the check */
  --rec-check-gap: 1.0rem;    /* space between check and text */
}

.lp .survey-comparison .rec-box h3 {
  /* put the check in its own column so it lines up with multi-line text */
  display: grid;
  grid-template-columns: auto 1fr;      /* [✓] [heading text…] */
  align-items: start;                   /* or 'center' if you prefer */
  column-gap: var(--rec-check-gap);
  padding-left: 0;                      /* kill any old padding approach */
  position: static;                     /* no need for relative */
}

.lp .survey-comparison .rec-box h3::before {
  content: "\2714\FE0E";               /* ✔ with text presentation */
  font-size: var(--rec-check-size) !important;  /* ← uses the variable */
  line-height: 1;
  color: #66bb6a;
  font-weight: 400;
  font-family: system-ui, "Segoe UI Symbol", Arial, sans-serif;
  position: static !important;          /* override any earlier absolute rules */
}

/* Recommendation box list text → DM Sans + larger */
.lp .survey-comparison .rec-box ul,
.lp .survey-comparison .rec-box li {
  font-family: var(--font-sans) !important;                     /* DM Sans */
  font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.5rem) !important;
  line-height: 1.6;
  color: var(--color-primary-text);
  font-weight: 400;
}

/* Keep the green checks sized with the new text */
.lp .survey-comparison .rec-box ul li::before {
  font-size: 1.15em;            /* scales with the text */
  top: 0.1em;                   /* slight baseline nudge */
  font-family: var(--font-sans), "Segoe UI Symbol", "Apple Color Emoji";
}

/* Put the full-bleed line at the *bottom* of the comparison section */
.lp .survey-comparison{
  position: relative;
  padding-bottom: 5rem;   
}

.lp .survey-comparison::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100vw;
  height:1px;
  background:var(--color-light-gray, #e6e6e6);
  pointer-events:none;
}

@supports (width:100svw){
  .lp .survey-comparison::after{ width:100svw; }
}

/* Optional: different gap on small screens */
@media (max-width: 680px){
  .lp .survey-comparison{ padding-bottom: 1.25rem; }
}

/* Optional: scale up a touch on wide screens */
@media (min-width: 992px) {
  .lp .survey-comparison .rec-box h3::before { font-size: 2.6em; }
}

/* -----------------------
   LANDING-PAGE NAV (optional)
   ----------------------- */
.lp .lp-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.5rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  padding: 0;
}
.lp .lp-links li { list-style: none; }
.lp .lp-links a { font-size: 1.2rem; font-weight: 500; opacity: 0.8; }
.lp .lp-links a:hover { text-decoration: underline; }

/* -----------------------
   Contact-call to action (CTA)
      ----------------------- */

/* Contact us - call to action */

.lp .contact {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 0 1rem;
  justify-content: center;
  align-items: center;
  max-width: calc(var(--global-width) - 2rem);
  border-radius: 0.5vw;
  background-color: #000;
  min-height: 25rem;
  position: relative;
  margin-top: 8rem !important;          /* beat theme overrides */
  border-top: 1px solid transparent;    /* prevents top-margin collapse */
  margin-bottom: 0rem;
}

.lp .contact__descr {
  font-size: 4.5rem;
  text-align: center;
  max-width: 70rem;
  color: #fff;
  margin-bottom: 3rem;
}

.lp .contact__btn {
  color: var(--ghost-accent-color);
  background-color: #fff;
  font-family: var(--font-sans) !important; /* 'DM Sans', ... */
  font-size: 1.75rem;
  padding: 0.75rem 2rem;
  font-weight: 700;
  border-radius: 30px;
  display: block;
}

/* Match hero primary button hover */
.lp .contact .contact__btn:hover,
.lp .contact .contact__btn:focus-visible {
  background-color: var(--accent-hover-color) !important; /* same as .button-primary:hover */
  color: #fff !important;                                 /* keep text white */
}

/* On mobile browsers, svw avoids scrollbar width quirks */
@supports (width: 100svw) {
  .lp .contact::before { width: 100svw; }
}



/* -----------------------
   FOOTER (optional inside .lp)
   ----------------------- */
.lp .footer { margin-top: 2rem; }
.lp .footer-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: var(--global-width);
  margin: 0 auto;
  padding: 2rem 1rem;
}
.lp .footer__brand { margin-bottom: 0; }
.lp .footer__title { font-size: 2rem; font-weight: 600; opacity: 0.9; }
.lp .footer__logo { height: 60px; max-width: 200px; object-fit: contain; }
.lp .footer__social { display: flex; gap: 1.5rem; margin-top: 1rem; }
.lp .footer__social a { display: block; opacity: 0.7; }
.lp .footer_copy { text-align: center; font-size: 0.9rem; padding-top: 1.5rem; font-family: var(--font-sans); }

/* -----------------------
   BACKGROUND GRADIENT HELPERS
   ----------------------- */
.lp .bg-color-blue { background-image: linear-gradient(135deg, var(--ghost-accent-color), var(--accent-hover-color)); }
.lp .bg-color-orange { background-image: linear-gradient(#ff9966, #ff5e62); }
.lp .bg-color-water { background-image: linear-gradient(#74ebd5, #acb6e5); }
.lp .bg-color-broken { background-image: linear-gradient(#d9a7c7, #fffcdc); }
.lp .bg-color-orange-light { background-image: linear-gradient(#ffccb3, #ffafb1); }
.lp .bg-color-water-light { background-image: linear-gradient(#bcf4eb, #d5dcf2); }
.lp .bg-color-broken-light { background-image: linear-gradient(#eed7e4, #fdfaed); }

/* -----------------------
   UTILITIES
   ----------------------- */
.lp .posts__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 2rem;
  padding: 0 1rem;
  max-width: var(--global-width);
  margin: 0 auto 4rem;
}
.lp .grid-2 { grid-template-columns: repeat(auto-fit, minmax(60vmin, 1fr)); }

/* -----------------------
   TRANSITIONS
   ----------------------- */
.lp .button-primary,
.lp .button-secondary,
.lp .contact__btn { transition: all 0.3s ease; }

/* =======================================================
   MEDIA QUERIES
   ======================================================= */
@media (max-width: 680px) {
  .lp .hero__title { font-size: calc(1.4rem + 3vmin); }
  .lp .hero[data-style="image-below"] .hero__content { margin: 1.5rem 0; }
}

@media (max-width: 1199px) {
  .lp .case-study__title { inline-size: var(--case-title-measure-tablet); }
}
@media (max-width: 680px) {
  .lp .case-study__title { inline-size: var(--case-title-measure-phone); }
}

/* Services desktop sizes requested */
@media (min-width: 992px) {
  .lp .services__title { font-size: 2.7rem; }
  .lp .services__description { font-size: 1.55rem; }
}

/* FAQ heading desktop & tablet */
@media (min-width: 992px) {
  .lp h2.section-title.center:has(+ .faq) { font-size: 3.2rem; }
}
@media (min-width: 681px) and (max-width: 991px) {
  .lp h2.section-title.center:has(+ .faq) { font-size: 2.6rem; }
}

/* FAQ detailed sizes responsive */
@media (min-width: 681px) and (max-width: 991px) {
  .lp .faq[data-style="detailed"] details.accordion summary { font-size: 1.6rem; }
  .lp .faq[data-style="detailed"] details.accordion summary::before { font-size: 1.9rem; }
  .lp .faq details.accordion p { font-size: 1.3rem; }
}
@media (min-width: 992px) {
  .lp .faq[data-style="detailed"] details.accordion summary { font-size: 1.85rem; }
  .lp .faq[data-style="detailed"] details.accordion summary::before { font-size: 2.1rem; }
  .lp .faq details.accordion p { font-size: 1.45rem; }
}

/* ===== Home (LP) mobile & tablet fixes ===== */

/* Phones ≤680px */
@media (max-width: 680px) {
  .lp .hero { padding: 0 16px; margin: 0 auto 32px; }
  .lp .hero__title { font-size: clamp(2.2rem, 6.2vw, 3rem); margin-bottom: 8px; }
  .lp .hero__description { font-size: 1.6rem; margin-bottom: 20px; }
  .lp .hero__links { flex-direction: column; gap: 12px; width: 100%; }
  .lp .hero__links .button { width: 100%; text-align: center; padding: 12px 16px; border-radius: 14px; }
  .lp .button-primary { margin-right: 0; } /* don’t keep desktop gap when stacked */

  .lp .hero[data-style="image-below"] .hero__media { padding-top: 16px; border-radius: 16px; }
  .lp .hero__img { width: 100%; height: auto; object-fit: contain; }

  /* Clients logos */
  .clients .brands { gap: 12px; }
  .clients .brands li { width: clamp(96px, 32vw, 140px); height: clamp(48px, 10vw, 70px); }

  /* Services grid */
  .lp .services { grid-template-columns: 1fr; gap: 16px; }
  .lp .services li { padding: 16px 18px; }
  .lp .services__title { margin-bottom: 10px; }
  .lp .services__description { font-size: 1.05rem; padding-left: 1.25rem; }

  /* Case study */
  .lp .case-study-section { padding-bottom: 24px; }
  .lp .case-study__title { font-size: clamp(1.4rem, 1.1rem + 2.2vw, 1.8rem); margin-bottom: 16px; inline-size: auto; }
  .lp .case-study__links .button { width: 100%; text-align: center; }

  /* Contact CTA */
  .lp .contact { min-height: 16rem; margin-top: 48px !important; padding: 24px 16px; border-radius: 16px; }
  .lp .contact__descr { font-size: clamp(1.8rem, 1.3rem + 3vw, 2.4rem); margin-bottom: 16px; }
  .lp .contact__btn { width: 100%; font-size: 1.4rem; padding: 12px 16px; }

  /* Section titles */
  .lp .section-title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem); margin: 24px auto; }
}

/* Tablets 681–1024px */
@media (min-width:681px) and (max-width:1024px){
  .lp .hero { margin-bottom: 48px; }
  .lp .hero__title { font-size: clamp(3rem, 2rem + 2vw, 3.6rem); }
  .lp .hero__description { font-size: 1.8rem; margin-bottom: 28px; max-width: 60ch; }
  .lp .hero__links { gap: 16px; }
}

/* Safe-area friendly bottom padding for full-bleed bands */
.lp .clients.gh-outer .gh-inner,
.lp .survey-comparison,
.lp .contact {
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}

/* =========================================
   HOMEPAGE — MOBILE FIRST IMPROVEMENTS
   ========================================= */
@media (max-width: 680px) {

  /* 1) Bigger main headline */
  .lp .hero__title {
    font-size: clamp(2.4rem, 1.2rem + 6vw, 3.6rem);
    line-height: 1.1;
  }

  /* 2) Bigger "Sectors we serve" bullets */
  .lp .services__description { font-size: 1.5rem; }
  .lp .services__description li { margin-bottom: 1rem; }

  /* 3) Bigger body text in “When to use a Lumaris survey”
        (lives inside the survey-comparison block) */
  .lp .survey-comparison p,
  .lp .survey-comparison li {
    font-size: 1.25rem;
    line-height: 1.7;
  }

  /* 4) Center the “Get in contact” text + center the button itself */
  .lp .contact__btn {
    display: inline-flex;           /* centers content inside */
    align-items: center;
    justify-content: center;
    text-align: center;
    align-self: center;             /* centers the button in the container */
    min-width: 14rem;               /* optional: nicer width */
  }

  /* 5) Make the “Transform uncertainty into clarity” box taller */
  .lp .contact {
    min-height: 34rem;              /* was 25rem */
    padding: 2.5rem 1.25rem;
  }

  /* 6) Increase hero image size */
  .lp { --hero-svg-scale: 1.18; }   /* scale the SVG/image a bit more */
  .lp .hero__img {
    width: calc(100% * var(--hero-svg-scale));
    max-width: none;
  }
  .lp .hero[data-style="image-below"] .hero__media { padding-top: 2rem; }

  /* 7) Fix clients logo overlap — use a tidy 2-column grid on phones */
  .clients .brands {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .clients .brands li {
    width: 100%;
    height: clamp(64px, 20vw, 96px);   /* consistent logo box height */
  }
  .clients .brands li img {
    width: auto;
    height: 100%;
    object-fit: contain;
  }

  /* Mobile: larger intro paragraphs in "When to use a Lumaris survey" */
  .lp .survey-comparison > p {
    font-size: 1.45rem !important;
    line-height: 1.7;
  }

/* Bigger hero subhead on the homepage */
  .lp .hero__description {
    font-size: 2.1rem;   /* tweak to taste */
    line-height: 1.4;
  }

/* Bigger, fluid headline in the contact CTA */

  .lp .contact__descr { font-size: 3.6rem; line-height: 1.15; }

  /* ---------- Mobile: bump the case-study line under the hero image ---------- */
  .lp .case-study__title {
    font-size: clamp(1.6rem, 1.25rem + 2.2vw, 2rem);
    line-height: 1.35;
  }

}



/* =========================
   TABLET POLISH (optional)
   ========================= */
@media (min-width: 681px) and (max-width: 991px) {
  .lp .hero__title { font-size: clamp(3rem, 1.4rem + 4vw, 4.2rem); }
  .lp .services__description { font-size: 1.4rem; }
  .lp .survey-comparison p,
  .lp .survey-comparison li { font-size: 1.3rem; }
  .lp { --hero-svg-scale: 1.08; }
  .clients .brands {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .clients .brands li { height: clamp(70px, 10vw, 110px); }
  .lp .contact { min-height: 32rem; }
}

/* ---- Mobile fix: center hero image & prevent overflow ---- */
@media (max-width: 680px) {
  /* Don’t let the full-bleed hairline or media cause horizontal scroll */
  .lp .hero[data-style="image-below"] { overflow-x: hidden; }

  /* Keep the hairline inside the container on phones */
  .lp .hero[data-style="image-below"] .hero__media::before {
    width: 100%;                /* was 100vw */
    left: 50%;
    transform: translateX(-50%);
  }

  /* Make the media box behave like a normal centered block */
  .lp .hero[data-style="image-below"] .hero__media {
    max-width: 100%;
    width: 100%;
    margin-inline: auto;
    overflow: hidden;           /* belt & suspenders */
    padding-top: 1.25rem;       /* keep your spacing */
  }

  /* The SVG/image itself: block-level, full width, centered */
  .lp .hero__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;        /* harmless for SVG/IMG */
  }

  /* If you kept the scale variable earlier, neutralize it on phones */
  .lp { --hero-svg-scale: 1; }
}

/* If supported, prefer 'clip' so vertical overflow is unaffected */
@supports (overflow: clip) {
  @media (max-width: 680px) {
    .lp .hero[data-style="image-below"] { overflow-x: clip; }
  }
}

/* ---------- Mobile: hero image should not crop or overflow ---------- */
@media (max-width: 680px) {
  /* Keep the section from causing any sideways scroll */
  .lp .hero[data-style="image-below"] { overflow-x: hidden; }

  /* Let the media box show its top fully and add breathing room */
  .lp .hero[data-style="image-below"] .hero__media {
    overflow: visible;          /* was hidden; could clip the top edge */
    padding-top: 2rem;          /* space so the very top isn’t clipped */
    max-width: 100%;
    width: 100%;
    margin-inline: auto;
  }

  /* Make the hairline sit on the top edge (no vertical shift) */
  .lp .hero[data-style="image-below"] .hero__media::before {
    width: 100%;                /* not 100vw */
    left: 50%;
    top: 0;                     /* exactly on the top border of the box */
    transform: translateX(-50%);
  }

  /* The image itself: centered block, no overflow */
  .lp .hero__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
  }
}

/* Mobile: make the SVG (with text) larger so it reads clearly */
@media (max-width: 680px) {
  /* 1.20–1.35 is a good range; tweak to taste */
  .lp { --hero-svg-scale: 1.28; }

  /* Prevent sideways scroll while allowing the image to extend */
  .lp .hero[data-style="image-below"] { overflow-x: hidden; }
  .lp .hero[data-style="image-below"] .hero__media {
    overflow: visible;
    padding-top: 2rem;      /* keeps the very top from feeling clipped */
  }

  /* Enlarge + keep centered without cropping important bits */
  .lp .hero__img {
    width: calc(100% * var(--hero-svg-scale)) !important;
    max-width: none;
    height: auto;
    display: block;
    margin-left: calc((100% - 100% * var(--hero-svg-scale)) / 2);
    margin-right: calc((100% - 100% * var(--hero-svg-scale)) / 2);
    object-fit: contain;    /* keeps full SVG visible */
  }
}


/* =========================================
   TABLET TWEAKS — iPad portrait & landscape
   (covers 681–1199px, incl. iPad mini @1024)
   ========================================= */
@media (min-width: 681px) and (max-width: 1199px) {

  /* Larger main headline */
  .lp .hero__title {
    font-size: clamp(2.6rem, 1.2rem + 4.5vw, 5rem);
    letter-spacing: -0.01em;
  }

  /* Smaller hero buttons */
  .lp .hero__links .button {
    font-size: 1.35rem;
    padding: 0.6rem 1.2rem;
    border-radius: 24px;
  }

  /* Bigger text under the hero image (“Learn how Youthprise…”) */
  .lp .case-study__title {
    font-size: clamp(1.8rem, 1rem + 1.2vw, 2.4rem);
    max-width: 60rem;
  }

  /* Clients logos: prevent overlap on tablet */
  .clients .brands {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem;
  }
  .clients .brands li {
    width: auto;
    height: clamp(70px, 9vw, 110px);
  }
  .clients .brands li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Survey-comparison intro/body text larger (paragraph above table) */
  .lp .survey-comparison > p {
    font-size: clamp(1.4rem, 1rem + 1vw, 1.9rem) !important;
    line-height: 1.65;
  }

  /* Bottom “Get in contact” button a bit smaller */
  .lp .contact__btn {
    font-size: 1.4rem;
    padding: 0.6rem 1.4rem;
    border-radius: 26px;
  }

  /* Tablet: keep hero image at or below 100% (no zoom) */
  .lp { --hero-svg-scale: 1; }              /* reset any mobile bump */
  .lp .hero__img {
    width: 100%;                            /* ensure no over-scale */
    max-width: 100%;
    transform: none;                        /* just in case */
  }

  /* Bigger hero subhead on the homepage */
  .lp .hero__description {
    font-size: 2.3rem;   /* tweak to taste */
    line-height: 2.0;
  }

}

/* TABLET (iPad mini etc): 681–1199px — NO hero over-scaling */
@media (min-width: 681px) and (max-width: 1199px) {
  .lp { --hero-svg-scale: 1 !important; }  /* kill phone zoom */
  .lp .hero__img {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin-inline: auto;                   /* keep centered */
    display: block;
  }
}

/* Hide mobile-only elements by default */
.lp .only-mobile { display: none; }

/* Mobile-only: swap Contact → Subscribe in hero */
.lp .hero__links .btn-subscribe-mobile { display: none; }

@media (max-width: 767px) {
  .lp .hero__links .btn-contact { display: none; }
  .lp .hero__links .btn-subscribe-mobile { display: inline-block; }
}