/* additions.css — homepage content update (Oct 2026).
   Loaded AFTER the live css/styles.css, which stays byte-for-byte unchanged.
   Every value here reuses the live tokens and scales (--sans, --micro, --muted, --pad,
   --ease, .stat hairlines, .process__d, .amenities__t), so new blocks read as native.
   When this is ported into the repo, these rules move into styles.css as-is. */

/* Header and footer rules ("Talk to us" pill, footer legal line) live in styles.css,
   because the header and footer are shared by every page and not every page loads this file. */

/* ── hero: the title is now a wrapper (h1 + lede + CTA) so main.js fades all three together ── */
.hero__h{ margin:0; font:inherit; letter-spacing:inherit; line-height:inherit }
.hero__title .hero__lede{ max-width:min(86vw,54ch) }
.hero__title{ max-width:min(calc(100vw - 2 * var(--pad)), 1100px) }

/* ── shared section head for the new light blocks ─────────────────────── */
.xhead{ margin-bottom:clamp(28px,3vw,48px) }
.xhead__k{ margin:0 0 clamp(10px,1.6vh,18px); font-family:var(--sans); font-weight:400;
  font-size:var(--micro); letter-spacing:.09em; text-transform:uppercase; color:var(--muted) }
.xhead__t{ margin:0; max-width:22ch; font-family:var(--sans); font-weight:400;
  font-size:clamp(28px,3.6vw,52px); line-height:1.12; letter-spacing:-.02em }   /* = .amenities__t */
.xhead__d{ margin:clamp(12px,1.2vw,20px) 0 0; max-width:60ch; font-family:var(--sans);
  font-size:clamp(15px,1.25vw,19px); line-height:1.5; color:var(--muted) }      /* = .process__d */
.xnote{ margin:clamp(14px,1.4vw,22px) 0 0; font-size:max(11px,.8vw); line-height:1.5; color:var(--muted) }

/* ── proof band (uses the live .stats / .stat / .stat__n / .stat__l) ───── */
.stats--proof{ padding-top:0 }
/* live .stat__l is #9a9a9a, 2.8:1 on white; --muted (#767676) is 4.5:1, the AA floor for small text */
.stats .stat__l, .tenure .stat__l{ color:var(--muted) }

/* ── experience: tenure-led ───────────────────────────────────────────── */
.tenure{ background:var(--paper); padding:clamp(70px,7vw,120px) var(--pad);
  border-top:1px solid #e6e6e6 }
.tenure__body{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,96px); align-items:start }
.tenure__lead{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(20px,2.4vw,48px) }
.tenure__big{ grid-column:1 / -1 }
.tenure__big .stat__n{ font-size:clamp(56px,6.4vw,124px) }
.tenure__split{ margin:0; padding-top:clamp(14px,1.35vw,28px); border-top:1px solid var(--ink) }
.tbar{ display:flex; gap:3px; height:clamp(44px,4.4vw,72px); margin:10px 0 14px }
.tbar > span{ flex:0 0 calc(var(--w) - 2px) }
.tbar > span:nth-child(1){ background:var(--ink) }
/* each segment clears 3:1 against white (WCAG 1.4.11); #c9c9c9 was 1.7:1 */
.tbar > span:nth-child(2){ background:#555 }
.tbar > span:nth-child(3){ background:#8a8a8a }
.tbar__legend{ display:flex; gap:3px }
.tbar__legend > div{ flex:0 0 calc(var(--w) - 2px); min-width:0; padding-right:10px }
.tbar__legend .stat__n{ font-size:clamp(22px,2.2vw,40px) }
.tbar__legend .stat__l{ margin-top:.35em }
@media (max-width:820px){
  .tenure__body{ grid-template-columns:1fr }
}

/* ── team happiness index (inside the dark people section) ────────────── */
.happy{ margin-top:clamp(56px,6vw,96px); padding-top:clamp(24px,2.4vw,36px); border-top:1px solid #262626 }
.happy__t{ margin:0 0 clamp(20px,2vw,32px); font-family:var(--sans); font-weight:400;
  font-size:clamp(22px,2vw,34px); letter-spacing:-.02em; color:var(--ink-i) }
.happy__cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:12px }
.hcard{ display:flex; flex-direction:column; gap:10px; padding:clamp(20px,2vw,30px);
  background:#141414; border:1px solid #262626; border-radius:14px; color:var(--ink-i); text-decoration:none;
  transition:background-color .3s var(--ease), border-color .3s var(--ease) }
.hcard:hover, .hcard:focus-visible{ background:#1c1c1c; border-color:#3a3a3a }
.hcard__src{ font-size:var(--micro); letter-spacing:.09em; text-transform:uppercase; color:#8a8a8a }
.hcard__score{ display:flex; align-items:center; gap:14px }
.hcard__score b{ font-weight:400; font-size:clamp(40px,3.6vw,64px); letter-spacing:-.035em; line-height:1 }
.hcard__stars{ position:relative; display:inline-block; font-size:clamp(18px,1.6vw,26px); letter-spacing:2px; line-height:1 }
.hcard__stars::before{ content:"★★★★★"; color:#3a3a3a }
.hcard__stars::after{ content:"★★★★★"; position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap;
  width:calc(var(--r) / 5 * 100%); color:#F9AB00 }
.hcard__l{ font-size:clamp(15px,1.25vw,19px); color:#d4d4d4 }
.hcard__m{ font-size:max(12px,.82vw); color:#8a8a8a }
.hcard__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ── how we start: "working with your team" row + CTA, after the pinned steps ── */
.wwt{ padding:clamp(40px,4vw,72px) var(--pad) clamp(70px,7vw,120px) }
.wwt__grid{ display:grid; grid-template-columns:repeat(4,1fr); column-gap:clamp(20px,2.4vw,48px) }
@media (max-width:1100px){ .wwt__grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:560px){ .wwt__grid{ grid-template-columns:1fr } }
.wwt__i{ padding:clamp(14px,1.35vw,28px) 0; border-top:1px solid #e6e6e6 }
.wwt__t{ margin:0; font-family:var(--sans); font-weight:400; font-size:clamp(18px,1.5vw,26px); line-height:1.2; letter-spacing:-.015em; text-wrap:balance }
.wwt__d{ margin:.6em 0 0; max-width:34ch; font-size:clamp(14px,1.05vw,17px); line-height:1.5; color:var(--muted) }

/* ── experience: the team behind the 2025 results ── */
.tenure__acct{ margin-top:clamp(36px,4vw,64px); padding-top:clamp(14px,1.35vw,28px); border-top:1px solid #e6e6e6 }
.tenure__acct-row{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:clamp(18px,2.4vw,44px) }
.tenure__acct-row .stat__n{ font-size:clamp(44px,4.6vw,88px) }
.tenure__acct-t{ margin:0; max-width:56ch; font-size:clamp(16px,1.4vw,22px); line-height:1.45 }

/* ── people: the line that links happiness back to tenure ── */
.ppl__d{ margin:clamp(12px,1.2vw,20px) 0 0; max-width:52ch; font-family:var(--sans);
  font-size:clamp(15px,1.25vw,19px); line-height:1.5; color:#a3a3a3 }

/* ── service cards: a one-line description under each name ──
   .fold__name is a flex row in the live CSS; a column puts the line under the title. */
.fold__name{ flex-direction:column; gap:clamp(6px,.6vw,10px) }
.fold__d{ margin:0; max-width:44ch; font-family:var(--sans); font-weight:400;
  font-size:clamp(14px,1.05vw,17px); line-height:1.45; color:#a3a3a3; transition:color .25s ease }
.fold__card:hover .fold__d, .fold__card:focus-visible .fold__d{ color:#d4d4d4 }

/* ── opening paragraph: typing through several copies (js/additions.js) ──
   All copies share one grid cell as invisible ghosts, so the block is always
   as tall as its longest copy and nothing below it moves while it types. */
.typing__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.typing__stack{ display:grid }
.typing__stack > *{ grid-area:1 / 1 }
.typing__ghost{ visibility:hidden }
.typing__caret{ display:inline-block; width:.055em; height:.92em; margin-left:.08em; vertical-align:-.1em;
  background:currentColor; animation:typing-blink 1.05s steps(1) infinite }
.typing.is-typing .typing__caret{ animation:none }
@keyframes typing-blink{ 50%{ opacity:0 } }

/* ── leaders: what each decision-maker gets (between services and How We Start) ──
   Same hairline-and-type language as the stats and the "working with your team" row. */
.lead{ background:var(--paper); color:var(--ink); padding:clamp(70px,7vw,120px) var(--pad) clamp(20px,2vw,40px) }
.lead__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,48px) }
@media (max-width:1100px){ .lead__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .lead__grid{ grid-template-columns:1fr } }
.lead__i{ display:flex; flex-direction:column; padding:clamp(16px,1.5vw,30px) 0 clamp(24px,2.4vw,44px); border-top:1px solid #e6e6e6 }
.lead__k{ margin:0 0 .9em; font-size:var(--micro); letter-spacing:.09em; text-transform:uppercase; color:var(--muted) }
.lead__t{ margin:0; max-width:24ch; font-family:var(--sans); font-weight:400; font-size:clamp(20px,1.7vw,28px); line-height:1.2; letter-spacing:-.015em; text-wrap:balance }
.lead__d{ margin:.8em 0 0; max-width:40ch; font-size:clamp(14px,1.05vw,17px); line-height:1.5; color:var(--muted) }
.lead__p{ margin:auto 0 0; padding-top:1.1em; font-size:clamp(13px,.95vw,15px); line-height:1.4; color:var(--ink) }
.lead__p::before{ content:""; display:block; width:24px; height:1px; margin-bottom:.8em; background:var(--ink) }

/* ── ROI calculator (js/roi.js) ──
   A dark section between the leadership cards and TAP, in the same palette as the
   people and amenities blocks: #141414 panels, #262626 hairlines, white type. */
.roi{ background:var(--void); color:var(--ink-i); padding:clamp(70px,7vw,120px) var(--pad) }
.roi__wrap{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(32px,5vw,96px); align-items:start }
@media (max-width:980px){ .roi__wrap{ grid-template-columns:1fr } }
.roi__intro{ position:sticky; top:clamp(90px,10vh,120px) }
@media (max-width:980px){ .roi__intro{ position:static } }
.roi__k{ margin:0 0 clamp(10px,1.6vh,18px); font-size:var(--micro); letter-spacing:.09em; text-transform:uppercase; color:#8a8a8a }
.roi__t{ margin:0; font-family:var(--sans); font-weight:400; font-size:clamp(28px,3.4vw,52px); line-height:1.1; letter-spacing:-.02em; text-wrap:balance }
.roi__sup{ font-size:.45em; vertical-align:super; line-height:0 }
.roi__sup a{ color:inherit; text-decoration:none }
.roi__d{ margin:clamp(14px,1.4vw,22px) 0 0; max-width:46ch; font-size:clamp(15px,1.25vw,19px); line-height:1.5; color:#a3a3a3 }
.roi__method{ margin-top:clamp(22px,2.4vw,36px); max-width:52ch; border-top:1px solid #262626; padding-top:14px; font-size:clamp(13px,.95vw,15px); line-height:1.55; color:#a3a3a3 }
.roi__method summary{ cursor:pointer; color:var(--ink-i) }
.roi__method ol{ margin:12px 0 0; padding-left:1.2em }
.roi__method li + li{ margin-top:6px }
.roi__method strong{ font-weight:500; color:#d4d4d4 }
.roi__src{ margin:12px 0 0; font-size:12px; color:#8a8a8a }
.roi__src a{ color:inherit }

.roi__panel{ background:#141414; border:1px solid #262626; border-radius:14px; padding:clamp(20px,2.4vw,40px) }
.roi__fs{ margin:0; padding:0; border:0; min-width:0 }
.roi__fs + .roi__fs{ margin-top:clamp(22px,2.2vw,34px); padding-top:clamp(18px,1.8vw,28px); border-top:1px solid #262626 }
.roi__lg{ display:flex; align-items:center; gap:10px; margin-bottom:16px; padding:0; font-size:clamp(16px,1.3vw,20px); color:var(--ink-i) }
.roi__n{ display:inline-grid; place-items:center; width:24px; height:24px; border:1px solid #3a3a3a; border-radius:50%; font-size:12px; color:#a3a3a3 }
.roi__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.roi__row + .roi__row, .roi__row + .roi__f{ margin-top:14px }
@media (max-width:560px){ .roi__row{ grid-template-columns:1fr } }
.roi__f{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.roi__l{ font-size:13px; color:#a3a3a3 }
.roi__l em{ font-style:normal; color:#6e6e6e }
.roi__f input, .roi__f select{ width:100%; min-width:0; height:46px; padding:0 12px; background:#0b0b0b; color:var(--ink-i);
  border:1px solid #333; border-radius:8px; font:inherit; font-size:16px; -webkit-appearance:none; appearance:none }
.roi__f select{ background-image:linear-gradient(45deg,transparent 50%,#a3a3a3 50%),linear-gradient(135deg,#a3a3a3 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px }
.roi__f input:focus, .roi__f select:focus{ outline:2px solid var(--ink-i); outline-offset:1px; border-color:transparent }
.roi__f [aria-invalid="true"]{ border-color:#e5484d }
.roi__in{ position:relative; display:block }
.roi__cur{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#8a8a8a; font-size:15px; pointer-events:none }
.roi__in input{ padding-left:44px }
.roi__checks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
@media (max-width:560px){ .roi__checks{ grid-template-columns:1fr } }
.roi__chk{ position:relative; display:flex; align-items:center; gap:10px; min-height:46px; padding:10px 12px; border:1px solid #333; border-radius:8px; cursor:pointer; font-size:15px; color:#d4d4d4;
  transition:border-color .2s var(--ease), background-color .2s var(--ease) }
.roi__chk input{ width:18px; height:18px; margin:0; accent-color:#ffffff; flex:0 0 auto }
.roi__chk:has(input:checked){ border-color:var(--ink-i); background:#1c1c1c; color:var(--ink-i) }
.roi__chk--opt{ margin-top:12px; border:0; padding:4px 0; min-height:0; font-size:14px; color:#a3a3a3 }
.roi__chk--opt:has(input:checked){ background:none }
.roi__note{ margin:14px 0 0; font-size:13px; line-height:1.5; color:#8a8a8a }
.roi__note a{ color:#d4d4d4 }
.roi__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.roi__err{ margin:18px 0 0; font-size:14px; color:#ff8f93 }
.roi__go, .roi__again{ display:inline-flex; align-items:center; justify-content:center; margin-top:22px;
  padding:calc(16px + var(--pill-shim)) 32px calc(16px - var(--pill-shim)); border-radius:999px;
  background:var(--ink-i); border:1px solid var(--ink-i); color:var(--ink); font:inherit; font-weight:500; font-size:clamp(15px,1.15vw,18px); line-height:1; cursor:pointer; text-decoration:none;
  transition:background-color .3s var(--ease), color .3s var(--ease) }
.roi__go:hover, .roi__go:focus-visible, .roi__again:hover, .roi__again:focus-visible{ background:transparent; color:var(--ink-i) }
.roi__again--ghost{ background:transparent; color:var(--ink-i); border-color:#3a3a3a; margin-left:10px }

/* result */
.roi__res:focus{ outline:none }
.roi__rk{ margin:0; font-size:var(--micro); letter-spacing:.09em; text-transform:uppercase; color:#8a8a8a }
.roi__big{ display:block; margin:10px 0 0; font-size:clamp(44px,5.4vw,96px); line-height:1; letter-spacing:-.035em }
.roi__pct{ margin:10px 0 0; font-size:clamp(17px,1.5vw,24px); line-height:1.35; color:#d4d4d4; max-width:34ch }
.roi__tbl{ width:100%; margin-top:clamp(20px,2vw,32px); border-collapse:collapse; font-size:14px }
.roi__tbl th, .roi__tbl td{ padding:10px 8px 10px 0; border-top:1px solid #262626; text-align:right; font-weight:400; white-space:nowrap }
.roi__tbl th:first-child, .roi__tbl td:first-child{ text-align:left; white-space:normal }
.roi__tbl thead th{ color:#8a8a8a; font-size:12px; letter-spacing:.04em }
.roi__tbl tfoot td{ color:var(--ink-i); font-weight:500; border-top-color:#3a3a3a }
.roi__tbl td{ color:#d4d4d4 }
.roi__fine{ margin:16px 0 0; font-size:12px; line-height:1.5; color:#8a8a8a }
@media (max-width:560px){ .roi__tbl .roi__hide-s{ display:none } }
.roi__opt{ display:flex; flex-direction:column; gap:8px }
.roi__fte{ display:none; align-items:center; justify-content:space-between; gap:10px; padding:0 2px; font-size:13px; color:#a3a3a3 }
.roi__fte em{ font-style:normal; color:#6e6e6e }
.roi__opt:has(.roi__chk input:checked) .roi__fte{ display:flex }
.roi__fte input{ width:120px; height:38px; padding:0 10px; background:#0b0b0b; color:var(--ink-i); border:1px solid #333; border-radius:8px; font:inherit; font-size:15px }
.roi__fte input:focus{ outline:2px solid var(--ink-i); outline-offset:1px; border-color:transparent }
.roi__fte input[aria-invalid="true"]{ border-color:#e5484d }
.roi__sm{ display:block; margin-top:2px; font-size:12px; color:#8a8a8a }
/* legends sit on a fieldset's top border by default; float them into the flow */
.roi__lg{ float:left; width:100% }
.roi__lg + *{ clear:both }
.roi__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px }
.roi__acts .roi__again{ margin:0 }

/* ═══ Mobile and responsive pass (16 Oct 2026) ═══ */
@media (max-width:820px){
  /* pinned sections: shorter scroll on phones (both run on scroll progress, so the steps just come faster) */
  .process__scroll{ height:280svh }
  .value{ height:300vh }
  /* body copy no smaller than 15px; inputs at 16px so iOS doesn't zoom on focus */
  .lead__d, .wwt__d{ font-size:15px }
  .roi__fte input{ font-size:16px }
}
@media (max-width:640px){
  /* leaders: a swipeable row with the next card peeking in, instead of five stacked cards */
  .lead__grid{ display:flex; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--pad)); padding:0 var(--pad) 6px; scroll-padding:0 var(--pad); scrollbar-width:none }
  .lead__grid::-webkit-scrollbar{ display:none }
  .lead__grid:focus-visible{ outline:2px solid var(--ink); outline-offset:4px }
  .lead__i{ flex:0 0 84%; scroll-snap-align:start; padding-bottom:20px }
  .lead{ padding-bottom:clamp(40px,10vw,64px) }
}
/* hero legibility: a soft scrim behind the title block, full width. It lives on the title
   itself, so it fades out with the title when main.js fades the title on scroll. */
.hero__title::before{ content:""; position:absolute; z-index:-1; pointer-events:none;
  left:calc(-1 * var(--pad)); width:100vw; top:-40%; bottom:-64px;
  background:linear-gradient(to top, rgba(0,0,0,.5) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%) }
@media (max-width:820px){
  .hero__title::before{ top:-45%; bottom:-56px;
    background:linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 55%, rgba(0,0,0,0) 100%) }
}
.lead__hint{ display:none }
@media (max-width:640px){
  .lead__hint{ display:block; margin:-8px 0 14px; font-size:13px; color:var(--muted) }
}
@media (max-width:820px){
  /* How We Start: on phones main.js moves the heading INTO the pinned frame, where it sat under
     the fixed 64px header bar. Clear the bar; the picture (flex-shrink, min 26svh) gives way on short screens. */
  .process__pin{ padding-top:calc(64px + env(safe-area-inset-top)) }
}
/* short phones (iPhone SE 1st gen, landscape): let the pinned How We Start frame fit */
@media (max-width:820px) and (max-height:640px){
  .process__media{ min-height:16svh }
  .process__d{ font-size:13px; line-height:1.4 }
  .process__t{ font-size:26px }
  .process__row{ gap:14px }
}
@media (max-width:820px) and (max-height:480px){
  /* phone in landscape: no room for the picture, so the names and copy carry the step */
  .process__media{ display:none }
  .process__d{ display:none }
}

/* ═══════════ services hub + service pages (Oct 2026) ═══════════ */
/* results band on dark, straight after the dark statement */
.stats--dark{ background:var(--void); color:var(--ink-i); padding-top:clamp(10px,1vw,20px) }
.stats--dark .stat{ border-top-color:#262626 }
.stats--dark .stat__l{ color:#a3a3a3 }
.stats--dark .xhead__k, .stats--dark .xnote{ color:#8a8a8a }
.stats--dark .xhead__t{ color:var(--ink-i) }
.stats--hub{ padding-top:clamp(70px,7vw,120px) }

/* how it runs + how we start */
.srun{ background:var(--paper); color:var(--ink); padding:clamp(70px,7vw,120px) var(--pad) clamp(60px,6vw,100px) }
.srun .wwt__grid{ margin-bottom:clamp(56px,6vw,100px) }
.srun--hub{ padding-top:clamp(30px,3vw,60px) }
.steps__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(20px,2.4vw,48px) }
@media (max-width:1100px){ .steps__list{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .steps__list{ grid-template-columns:1fr } }
.steps__i{ padding:clamp(14px,1.35vw,28px) 0; border-top:1px solid var(--ink) }
.steps__n{ display:block; font-size:var(--micro); letter-spacing:.09em; color:var(--muted) }
.steps__t{ margin:.6em 0 0; font-family:var(--sans); font-weight:400; font-size:clamp(18px,1.5vw,26px); line-height:1.2; letter-spacing:-.015em }
.steps__d{ margin:.6em 0 0; max-width:34ch; font-size:clamp(14px,1.05vw,17px); line-height:1.5; color:var(--muted) }
.steps__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2vw,28px); margin-top:clamp(28px,3vw,44px) }
.steps__acts .statement__cta{ margin-top:0 }
.steps__link{ font-size:clamp(15px,1.15vw,18px); color:var(--ink); text-decoration:underline; text-underline-offset:.3em; text-decoration-thickness:1px }
.steps__link:hover, .steps__link:focus-visible{ opacity:.65 }

/* buyer questions */
.faq{ background:var(--paper); color:var(--ink); padding:0 var(--pad) clamp(70px,7vw,120px) }
.faq__list{ max-width:980px; border-bottom:1px solid #e6e6e6 }
.faq__i{ border-top:1px solid #e6e6e6 }
.faq__q{ position:relative; list-style:none; cursor:pointer; padding:clamp(16px,1.5vw,24px) 48px clamp(16px,1.5vw,24px) 0;
  font-family:var(--sans); font-size:clamp(17px,1.4vw,22px); line-height:1.35; letter-spacing:-.01em }
.faq__q::-webkit-details-marker{ display:none }
.faq__q::after{ content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; margin-top:-9px;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); transition:transform .3s var(--ease) }
.faq__i[open] .faq__q::after{ transform:rotate(-135deg); margin-top:-3px }
.faq__q:focus-visible{ outline:2px solid var(--ink); outline-offset:4px }
.faq__a{ margin:0; padding:0 48px clamp(18px,1.6vw,26px) 0; max-width:68ch; font-size:clamp(15px,1.15vw,18px); line-height:1.55; color:var(--muted) }

/* related services / also available: the folder drawer with two rows */
.fold--related{ padding-bottom:0 }
.fold--related .fold__name h3{ font-size:clamp(22px,2.2vw,36px) }

/* hub carousel: each service's own 2025 figure */
.svc__p{ margin:.9em 0 0; font-size:clamp(13px,.95vw,15px); line-height:1.45; color:rgba(255,255,255,.7) }
/* a service page calculator with a single area: one full-width row */
.roi__checks--one{ grid-template-columns:1fr }
.roi__checks--one .roi__chk{ pointer-events:none }

/* ── tools our teams work in: monochrome logo grid (hairline cells) ── */
.tools{ --tools-bg:var(--paper); background:var(--paper); color:var(--ink); padding:clamp(70px,7vw,120px) var(--pad) }
.tools--dark{ --tools-bg:var(--void); background:var(--void); color:var(--ink-i) }
.tools--dark .xhead__k, .tools--dark .xnote{ color:#8a8a8a }
.tools--dark .xhead__d{ color:#a3a3a3 }
.tools__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px; background:#e6e6e6; border:1px solid #e6e6e6 }
.tools--dark .tools__grid{ background:#262626; border-color:#262626 }
.tools__i{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:112px; padding:18px 12px;
  background:var(--tools-bg); color:#4a4a4a; text-align:center; transition:color .3s var(--ease) }
.tools--dark .tools__i{ color:#bdbdbd }
.tools__i:hover{ color:var(--ink) }
.tools--dark .tools__i:hover{ color:#fff }
.tools__logo{ display:block; height:28px; width:auto; max-width:132px }
.tools__i--word .tools__logo{ height:22px }
.tools__n{ font-size:13px; line-height:1.2; color:#767676 }
.tools--dark .tools__n{ color:#8a8a8a }
.tools__n--sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
@media (max-width:560px){ .tools__grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } .tools__i{ min-height:96px } }
/* inside "How It Runs" on service pages */
.tools--inline{ padding:0; margin:0 0 clamp(56px,6vw,100px); background:none }
.tools__h{ margin:0 0 clamp(14px,1.4vw,22px); font-family:var(--sans); font-weight:400; font-size:clamp(18px,1.5vw,26px); letter-spacing:-.015em }

/* review cards: the platform's own mark */
.hcard__src{ display:inline-flex; align-items:center; gap:8px }
.hcard__logo{ display:block; width:auto; height:16px; flex:0 0 auto }
.hcard__logo--gd{ color:#0CAA41 }
/* categorised logo wall (homepage + hub): label on the left, compact tiles on the right */
.tools__cats{ border-bottom:1px solid #e6e6e6 }
.tools--dark .tools__cats{ border-bottom-color:#262626 }
.tools__cat{ display:grid; grid-template-columns:minmax(150px,1.1fr) minmax(0,6fr); gap:clamp(16px,2vw,32px); align-items:start;
  padding:clamp(14px,1.4vw,22px) 0; border-top:1px solid #e6e6e6 }
.tools--dark .tools__cat{ border-top-color:#262626 }
.tools__ck{ margin:6px 0 0; font-size:var(--micro); letter-spacing:.09em; text-transform:uppercase; color:#767676 }
.tools--dark .tools__ck{ color:#8a8a8a }
.tools__cat .tools__grid{ grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); background:none; border:0; gap:6px }
.tools__cat .tools__i{ min-height:84px; padding:12px 8px; gap:9px; border-radius:10px }
.tools__cat .tools__logo{ height:24px }
.tools__cat .tools__i--word .tools__logo{ height:18px }
.tools--dark .tools__cat .tools__i{ background:#0d0d0d }
.tools--dark .tools__cat .tools__i:hover{ background:#161616 }
@media (max-width:820px){ .tools__cat{ grid-template-columns:1fr; gap:10px } }
@media (max-width:560px){ .tools__cat .tools__grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } .tools__cat .tools__i{ min-height:76px } .tools__n{ font-size:11.5px } }
/* compact chips for the categorised wall (82+ logos would otherwise run to 2,000px) */
.tools__cat .tools__grid{ display:flex; flex-wrap:wrap; gap:8px; background:none; border:0 }
.tools__cat .tools__i{ flex-direction:row; min-height:0; gap:8px; padding:8px 14px 8px 11px; border:1px solid #e6e6e6; border-radius:999px; background:var(--tools-bg) }
.tools--dark .tools__cat .tools__i{ border-color:#2b2b2b; background:var(--void) }
.tools--dark .tools__cat .tools__i:hover{ background:#141414; border-color:#3a3a3a }
.tools__cat .tools__logo{ height:18px; max-width:96px }
.tools__cat .tools__i--word{ padding:9px 14px }
.tools__cat .tools__i--word .tools__logo{ height:14px }
.tools__cat .tools__n{ font-size:13.5px; white-space:nowrap }
.tools--dark .tools__cat .tools__n{ color:#bdbdbd }
.tools__ck{ margin-top:9px }
@media (max-width:560px){ .tools__cat .tools__grid{ display:flex } .tools__cat .tools__i{ min-height:0 } .tools__cat .tools__n{ font-size:12.5px } }
/* the rest of the tools fold away behind one button (no JS: <details>) */
.tools__more > summary{ list-style:none }
.tools__more > summary::-webkit-details-marker{ display:none }
.tools__btn{ display:inline-flex; align-items:center; gap:10px; margin:clamp(18px,1.8vw,26px) 0; padding:12px 22px; border-radius:999px;
  border:1px solid currentColor; cursor:pointer; font-size:15px; line-height:1; user-select:none; transition:background-color .3s var(--ease), color .3s var(--ease) }
.tools--dark .tools__btn{ color:var(--ink-i) }
.tools__btn:hover, .tools__btn:focus-visible{ background:var(--ink-i); color:var(--ink) }
.tools__btn::after{ content:""; width:8px; height:8px; margin-top:-4px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); transition:transform .3s var(--ease) }
.tools__more[open] > .tools__btn::after{ transform:rotate(-135deg); margin-top:4px }
.tools__btn-c{ display:none }
.tools__more[open] > .tools__btn .tools__btn-o{ display:none }
.tools__more[open] > .tools__btn .tools__btn-c{ display:inline }
.tools__more[open] > .tools__btn{ order:2 }
.tools__more[open]{ display:flex; flex-direction:column }
.tools__more[open] > .tools__btn{ align-self:flex-start }

/* e-commerce: links to each service's own 2025 results (no borrowed figures) */
.plinks{ padding-bottom:clamp(60px,6vw,100px) }
.plinks__row{ display:flex; flex-wrap:wrap; gap:10px }
.plinks__a{ display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border:1px solid #3a3a3a; border-radius:999px; color:var(--ink-i);
  text-decoration:none; font-size:clamp(15px,1.15vw,18px); transition:background-color .3s var(--ease), border-color .3s var(--ease) }
.plinks__a::after{ content:"→" }
.plinks__a:hover, .plinks__a:focus-visible{ background:#1c1c1c; border-color:#6e6e6e }
/* a brand that only publishes a coloured PNG (TriFact365): shown as a monochrome wordmark */
.tools__logo--img{ width:auto; height:20px; max-width:120px; filter:grayscale(1) brightness(.35) contrast(1.4) }
.tools--dark .tools__logo--img{ filter:grayscale(1) brightness(0) invert(.78) }
.tools__cat .tools__logo--img{ height:15px }

/* ── Mobile pass 2 (16 Oct 2026): service pages, calculators, logos ── */
@media (max-width:820px){
  .xnote{ font-size:12px }
  /* 16px stops iOS zooming into the field; 44px is the minimum comfortable tap height */
  .roi__fte input{ height:44px; font-size:16px; width:112px }
  .fold__all{ display:inline-flex; align-items:center; min-height:44px }
  .process__n{ min-height:44px; align-items:center }
  /* service-page tool tiles: three across instead of two, so How It Runs stays short */
  .tools--inline .tools__grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .tools--inline .tools__i{ min-height:80px; padding:12px 6px; gap:8px }
  .tools--inline .tools__logo{ height:22px }
  .tools--inline .tools__i--word .tools__logo{ height:16px }
  .tools--inline .tools__n{ font-size:12px }
  .srun .wwt__grid{ margin-bottom:48px }
  .tools--inline{ margin-bottom:48px }
}