@charset "UTF-8";
body.unit-growth{
  --insight:var(--growth);
  --insight-rgb:232,91,158;
}

body.unit-innovation{
  --insight:var(--innovation);
  --insight-rgb:34,182,230;
}

body.unit-learn{
  --insight:var(--learn);
  --insight-rgb:242,131,63;
}

.hero-breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:18px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
}

.hero-breadcrumbs a{
  color:var(--text);
  transition:color .15s ease;
}

.hero-breadcrumbs a:hover{
  color:var(--n0);
}

.sidebar-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text);
}

.sidebar-back:hover{
  color:var(--n0);
}

/* ── Service hero image ───────────────────────────────────────────────────────
   The hero render for each service puts its subject in the right 45% of the
   frame and keeps the left 55% dark, so the image is anchored right and a
   left-to-right scrim protects the headline column. base.css's .hero-overlay
   fades bottom-to-top (it was built for the bottom-left article and case
   heroes); the service hero replaces that direction here instead of editing the
   shared rule. The same dark scrim serves both themes — see the light-theme
   note below for why light mode must not get a light one.
   ─────────────────────────────────────────────────────────────────────────── */
.service-hero .hero-image img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
}

/* Stops follow the composition the renders were made to: the left 55% is empty
   and carries the headline, 55-60% is the fall-off band, and the subject core
   sits between 60% and 92%. So the scrim stays dense to ~50% and is effectively
   gone by ~84%, otherwise it flattens the subject it is meant to sit beside. */
.service-hero .hero-overlay{
  background:
    linear-gradient(90deg,rgba(7,10,17,.96) 0%,rgba(7,10,17,.9) 32%,rgba(7,10,17,.72) 48%,rgba(7,10,17,.34) 60%,rgba(7,10,17,.1) 72%,rgba(7,10,17,0) 84%),
    linear-gradient(to top,rgba(7,10,17,.42) 0%,rgba(7,10,17,.1) 32%,rgba(7,10,17,0) 100%);
}

/* Light theme deliberately keeps the dark scrim above. theme.css paints the
   Growth/Innovation hero headline white (#f8fafc) in light mode because these
   heroes have always been a dark band, so a light scrim here would put white
   type on a white ground. single-page.css also lays a near-opaque white card
   behind #hero .hero-inner, which would hide both the subject and that white
   headline — clear it for the service hero only. The #hero id is what lets this
   outrank that rule. */
html[data-theme="light"] #hero.service-hero .hero-inner{
  background:none;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* Under 720px the hero is portrait and `cover` shows only a narrow strip, so
   pull the subject in from the right edge and darken the scrim more evenly —
   the copy sits directly over the image at this width. */
@media(max-width:720px){
  .service-hero .hero-image img{
    object-position:70% center;
  }

  .service-hero .hero-overlay{
    background:
      linear-gradient(90deg,rgba(7,10,17,.84) 0%,rgba(7,10,17,.66) 55%,rgba(7,10,17,.5) 100%),
      linear-gradient(to top,rgba(7,10,17,.5) 0%,rgba(7,10,17,.24) 50%,rgba(7,10,17,.14) 100%);
  }

  html[data-theme="light"] #hero.service-hero .hero-inner{
    background:none;
  }
}

.service-problem-grid,
.service-compare-grid,
.service-chip-grid,
.service-outcomes,
.service-fit-grid,
.service-case-grid,
.service-resource-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.service-problem,
.service-compare-card,
.service-chip,
.service-outcome,
.service-fit{
  position:relative;
  overflow:hidden;
  background:var(--graph);
  border:1px solid var(--b1);
  border-radius:10px;
  padding:18px 18px 20px;
  color:var(--text);
  line-height:1.65;
}

.service-compare-card{
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,var(--graph) 100%);
}

.service-compare-card h3{
  margin:0 0 10px;
}

.service-compare-card p{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--mid);
}

.service-problem::before,
.service-fit::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,var(--insight) 0%,rgba(var(--insight-rgb),0) 100%);
}

.service-problem{
  font-size:13px;
  background:linear-gradient(180deg,rgba(var(--insight-rgb),.08) 0%,rgba(21,28,42,.96) 24%,var(--graph) 100%);
}

.service-chip,
.service-fit{
  font-size:13px;
}

.service-outcome{
  font-family:var(--display);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--n0);
}

.service-fit{
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,var(--graph) 100%);
}

.service-stat-list{
  display:grid;
  gap:12px;
}

.service-stat{
  position:relative;
  padding:0 0 0 18px;
  font-size:14px;
  line-height:1.8;
  color:var(--text);
}

.service-stat::before{
  content:"";
  position:absolute;
  top:.72em;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--insight);
  box-shadow:0 0 0 6px rgba(var(--insight-rgb),.12);
}

.service-related-block{
  border-top:1px solid var(--b1);
  padding:40px 0 0;
  margin-top:12px;
}

.service-case-card,
.service-resource-card{
  display:grid;
  gap:10px;
  background:var(--graph);
  border:1px solid var(--b1);
  border-radius:12px;
  padding:20px;
  transition:border-color .18s,transform .18s;
}

.service-case-card:hover,
.service-resource-card:hover{
  border-color:var(--b2);
  transform:translateY(-2px);
}

.service-case-tagline,
.service-resource-type{
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--insight);
}

.service-case-title,
.service-resource-title{
  font-family:var(--display);
  font-size:17px;
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.2;
  color:var(--n0);
}

.service-case-copy{
  font-size:14px;
  line-height:1.7;
  color:var(--mid);
}

.service-case-link,
.service-resource-link{
  font-size:11px;
  font-weight:600;
  color:var(--text);
}

html[data-theme="light"] .hero-breadcrumbs a,
html[data-theme="light"] .sidebar-back{
  color:var(--mid);
}

html[data-theme="light"] .hero-breadcrumbs a:hover,
html[data-theme="light"] .sidebar-back:hover{
  color:var(--n0);
}

@media(max-width:720px){
  .service-problem-grid,
  .service-compare-grid,
  .service-chip-grid,
  .service-outcomes,
  .service-fit-grid,
  .service-case-grid,
  .service-resource-grid{
    grid-template-columns:1fr;
  }
}

/* ── FAQ section ─────────────────────────────────────────────────────────── */
.service-faqs{
  padding:80px 24px;
  background:var(--surface);
  border-top:1px solid var(--border);
}

.service-faqs-inner{
  max-width:800px;
  margin:0 auto;
}

.service-faqs-h{
  font-size:clamp(20px,2.5vw,26px);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--n0);
  margin-bottom:40px;
}

.faq-list{
  margin:0;
  padding:0;
}

.faq-item{
  border-bottom:1px solid var(--border);
}

.faq-item:first-child{
  border-top:1px solid var(--border);
}

.faq-q{
  font-size:14px;
  font-weight:600;
  color:var(--n0);
  line-height:1.5;
  padding:20px 40px 20px 0;
  margin:0;
  cursor:pointer;
  position:relative;
  list-style:none;
  user-select:none;
  transition:color .2s ease;
}

.faq-q::-webkit-details-marker{
  display:none;
}

.faq-q::after{
  content:'';
  position:absolute;
  right:2px;
  top:22px;
  width:16px;
  height:16px;
  background-color:var(--mid);
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E");
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  transition:transform .2s ease, background-color .2s ease;
}

.faq-item[open] .faq-q{
  color:var(--insight, var(--n0));
}

.faq-item[open] .faq-q::after{
  transform:rotate(45deg);
  background-color:var(--insight, var(--n0));
}

.faq-a{
  font-size:13px;
  line-height:1.8;
  color:var(--mid);
  margin:0;
  padding:0 0 20px;
}

@media(max-width:720px){
  .service-faqs{
    padding:56px 20px;
  }
}

/* Proof wall — client logos on the Industries pages, each tile a link to that case study.
   A case with no logo on file falls back to its name set in type, so the grid never has a
   hole in it and never blocks on a missing asset. */
.proof-wall{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.proof-wall__item{margin:0}
.proof-wall__link{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-height:104px;padding:18px 14px;text-align:center;text-decoration:none;
  border:1px solid var(--b1);border-radius:14px;background:rgba(255,255,255,.03);
  transition:border-color .15s,background .15s,transform .15s}
.proof-wall__link:hover{border-color:var(--unit,var(--n0));background:rgba(255,255,255,.06);
  transform:translateY(-2px)}
/* Render every logo as a flat white silhouette. The set is mixed — measured on
   2026-09-22, six of the sixteen client logos are dark-on-transparent and two (GIMOS,
   Barrigas) are pure black, so they would be invisible on this tile. brightness(0) flattens
   any colour to black and invert(1) lifts it to white, which keeps the mark's shape and
   transparency and guarantees contrast whatever a client's file contains. Brand colour is
   traded for legibility on purpose; a wall of half-invisible logos is worse than a
   monochrome one. */
.proof-wall__logo{max-width:118px;max-height:38px;width:auto;height:auto;object-fit:contain;
  display:block;filter:grayscale(1) brightness(0) invert(1);opacity:.72;transition:opacity .15s}
.proof-wall__link:hover .proof-wall__logo{opacity:1}
.proof-wall__name{font-family:var(--display);font-size:15px;line-height:1.25;color:var(--text)}
.proof-wall__meta{font-size:11px;line-height:1.3;color:var(--dim)}
@media (prefers-reduced-motion:reduce){
  .proof-wall__link,.proof-wall__logo{transition:none}
  .proof-wall__link:hover{transform:none}
}

/* ── Industry sectors, with sourced figures ──────────────────────────────────
   Jon asked for "backed stats", so the source is part of the component, not a
   footnote: every figure shows who published it and when. A vendor benchmark
   gets a visibly different treatment from a central-bank or peer-reviewed
   figure, because presenting them identically would be the actual dishonesty. */
.ind-sectors{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:18px;
  margin:20px 0 8px;
}
.ind-sector{
  background:linear-gradient(180deg,rgba(255,255,255,.04) 0%,var(--graph) 100%);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:22px 22px 18px;
}
.ind-sector__name{
  margin:0 0 8px;
  font-size:17px;
  letter-spacing:-.02em;
}
.ind-sector__blurb{
  margin:0 0 16px;
  font-size:13px;
  line-height:1.7;
  color:var(--mid);
}
.ind-stats{ list-style:none; margin:0; padding:0; display:grid; gap:14px }
.ind-stat{
  display:grid;
  gap:3px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.07);
}
.ind-stat:first-child{ border-top:0; padding-top:0 }
.ind-stat__value{
  font-family:var(--display);
  font-size:clamp(20px,2.4vw,26px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.1;
  color:var(--n0);
}
.ind-stat__label{ font-size:13px; line-height:1.6; color:var(--text) }
.ind-stat__note{
  font-size:12px;
  line-height:1.65;
  color:var(--mid);
  font-style:italic;
  padding-left:10px;
  border-left:2px solid rgba(168,227,45,.35);
}
.ind-stat__src{ font-size:11px; line-height:1.5; color:var(--mid); font-style:normal }
.ind-stat__src a{ color:var(--mid); text-decoration:underline; text-underline-offset:2px }
.ind-stat__src a:hover{ color:var(--n0) }
/* Primary sources earn the accent; vendor benchmarks are dimmed and labelled. */
.ind-stat__src--primary a{ color:var(--text) }
.ind-stat__src--vendor{ opacity:.78 }
.ind-stat__tier{ display:block; color:var(--mid) }
.ind-gap{
  margin:18px 0 4px;
  padding:16px 18px;
  border:1px dashed rgba(255,255,255,.16);
  border-radius:14px;
  background:rgba(255,255,255,.02);
}
.ind-gap__line{ margin:0; font-size:12.5px; line-height:1.75; color:var(--mid) }
.ind-gap__line strong{ color:var(--text) }
@media (max-width:640px){
  .ind-sectors{ grid-template-columns:1fr }
  .ind-sector{ padding:18px 16px 16px }
}