/* Enate Consulting, round 2: Blocks, Bright colourway, Violet (purple on peach, mint highlights).
   Chosen from round 1 direction C (Measured).
   Structure after ronnsquare.fr (a consultancy: square corners, a strict grid, a set of geometric building blocks),
   colour after beteropenbaarbestuur.nl. Token names (--blue, --lilac, --butter) are kept from round 1: violet, peach and mint here. */

/* ---- fonts: self-hosted. Two faces: Sentient for headings, Cabinet Grotesk for everything else ---- */
@font-face { font-family: "Cabinet Grotesk"; src: url("fonts/cabinet-grotesk-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("fonts/cabinet-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("fonts/cabinet-grotesk-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
/* Sentient (7 Oct): variable 200–700, Fontshare (ITF Free Font Licence) */
@font-face { font-family: "Sentient"; src: url("fonts/sentient-variable.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #FDF6EC;
  --ink: #1B0F3B;
  --ink-2: color-mix(in srgb, var(--ink) 74%, transparent);
  --blue: #4A3A9C;           /* the primary colour: dusky indigo, calmed from #5A2DE0 on 7 Oct (token name kept from round 1) */
  --lilac: #FFD8C2;
  --lilac-2: #FFEBDD;
  --butter: #B8F2D8;
  --line: color-mix(in srgb, var(--ink) 16%, transparent);
  --pad: clamp(1.25rem, 6vw, 6.5rem);
  --section: clamp(6.5rem, 12vw, 12.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --back: cubic-bezier(.34, 1.56, .64, 1);
  --sans: "Cabinet Grotesk", system-ui, sans-serif;
  /* roles the colourways swap: heading face and weights, small-text face, corners */
  --f-head: var(--sans); --f-title: "Sentient", Georgia, serif; --w-title: 500; --w-head: 800; --w-h3: 700;
  --f-text: var(--sans); /* Cabinet has no 400 here, so body text sets in 500 */
  --r-card: 0px; --r-btn: 999rem; /* pill buttons (7 Oct) */
  /* ---- type scale: every text size on the page comes from here ----
     headings (h1, h2): Sentient 500 · smaller headings, figures: Cabinet Grotesk 800/700 · text, interface + labels: Cabinet Grotesk 500/700.
     Fluid steps run from a 390px phone to ~1680px; fixed steps never scale. */
  --fs-display: clamp(3.25rem, 7.2vw, 7.625rem);  /* h1, the hero only */
  --fs-xxl:     clamp(3rem, 6.2vw, 6.5rem);  /* stat figures, the closing CTA heading */
  --fs-xl:      clamp(2.5rem, 4.9vw, 5rem);   /* h2, section headings */
  --fs-l:       clamp(1.75rem, 2.9vw, 2.875rem);   /* testimonial, person names, footer wordmark */
  --fs-m:       clamp(1.5rem, 2.3vw, 2.25rem);   /* statements, workstream titles */
  --fs-s:       clamp(1.3125rem, 1.9vw, 1.875rem);   /* h3, card titles, questions */
  --fs-xs:      clamp(1.1875rem, 1.55vw, 1.5rem);  /* ledes, intro paragraphs */
  --fs-body:    1.1875rem;                       /* running text */
  --fs-small:   1.0625rem;                       /* secondary text: card copy, bios, step copy, stat labels */
  --fs-ui:      1.0625rem;                       /* buttons, links, captions, footer links */
  --fs-ui-sm:   0.9375rem;                       /* small buttons, nav, footer note */
  --fs-label:   0.875rem;                       /* counters, tags, the strip, legal line */
  --lh-head: 1.12; --lh-statement: 1.26; --lh-lede: 1.44; --lh-text: 1.55; --lh-small: 1.5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
html { scroll-padding-top: 5.625rem; } /* section links land below the sticky nav */
body { font-family: var(--f-text); font-size: var(--fs-body); line-height: var(--lh-text); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; fill: currentColor; }
::selection { background: var(--butter); color: var(--ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.bg-ink :focus-visible, .cta :focus-visible { outline-color: var(--butter); }
[id] { scroll-margin-top: 6.25rem; }
h1, h2, h3, .statement, .quote p, .lede { text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { max-width: 90rem; margin: 0 auto; padding-inline: var(--pad); }
.nowrap { white-space: nowrap; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.skip { position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: 0.75rem 1.125rem; background: var(--ink); color: var(--paper); font: 700 1rem var(--sans); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* ---- grounds ---- */
.bg-lilac { background: var(--lilac); }
.bg-lilac-2 { background: var(--lilac-2); }
.bg-ink { background: var(--ink); color: var(--paper); }

/* ---- type ---- */
.wordmark, .btn, .text-link, .nav-links, .q-topic, .footer-cols, .footer-bottom, .disc, .quote figcaption { font-family: var(--sans); }
.h1, .h2, .h3, .stat-n { font-family: var(--f-head); }
.lede, .statement, .statement-sm, .q, .quote p { font-family: var(--f-text); }
.h1 { font-family: var(--f-title); font-weight: var(--w-title); font-size: var(--fs-display); line-height: .94; letter-spacing: -.04em; color: var(--ink); }
.h2 { font-family: var(--f-title); font-weight: var(--w-title); font-size: var(--fs-xl); line-height: 1; letter-spacing: -.032em; color: var(--ink); }
.bg-ink .h2 { color: inherit; }
.h3 { font-weight: var(--w-h3); font-size: var(--fs-s); line-height: var(--lh-head); letter-spacing: -.012em; }
.lede { font-size: var(--fs-xs); line-height: var(--lh-lede); }
.statement { font-size: var(--fs-m); line-height: var(--lh-statement); letter-spacing: -.01em; }
.statement-sm { font-size: var(--fs-xs); line-height: var(--lh-lede); }
.body { font-size: var(--fs-body); line-height: var(--lh-text); max-width: 44ch; color: var(--ink-2); }
.bg-ink .body { color: color-mix(in srgb, var(--paper) 78%, transparent); }
.body-lg { font-size: var(--fs-xs); max-width: 46ch; }
.show-sm { display: none; } /* the nav button's phone label; shown on small screens below */

/* highlighter: kept for one heading only, "on the house" (7 Oct); the mint wipes in behind the words once the heading has landed */
mark {
  color: var(--ink); background: linear-gradient(var(--butter), var(--butter)) no-repeat 0 58% / 100% 84%;
  padding: 0 .07em; margin: 0 -.03em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.1s var(--ease) .3s;
}
.motion [data-split]:not(.is-lit) mark { background-size: 0% 84%; }
@media (min-width: 47.5625em) { mark { white-space: nowrap; } }

/* ---- buttons: square-cornered, Enate blue ---- */
/* ---- buttons (7 Oct): the label in a pill, the arrow in a circle beside it. The gooey SVG filter (#goo, in Base) melts the two
   together where they meet; on hover the circle slides right and the join stretches like liquid. Keyboard focus drops the filter, so the focus ring isn't melted away. ---- */
.btn {
  --bg: var(--blue); --fg: #fff; --h: 3.625rem; --gap: 1px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; height: var(--h); padding-left: 1.625rem;
  color: var(--fg); font-weight: 700; font-size: var(--fs-ui); white-space: nowrap; filter: url(#goo);
}
.btn::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(var(--h) + var(--gap)) 0 0; border-radius: var(--r-btn); background: var(--bg); }
.btn .arr { position: relative; left: 0; box-sizing: border-box; flex: none; width: var(--h); height: var(--h); margin-left: calc(1.375rem + var(--gap)); padding: calc((var(--h) - 0.875rem) / 2); border-radius: 50%; background: var(--bg); transition: left .4s var(--ease); }
.btn:hover .arr { left: 11px; } /* the least that fully frees the circle: at 9–10px the liquid join still pulls it out of round. `left`, not `translate`: Safari runs translate on the GPU, where the SVG filter can't follow, and hitches when it hands back */
.btn:focus-visible { filter: none; }
.btn:not(:has(.arr)) { padding-right: 1.625rem; }
.btn:not(:has(.arr))::before { right: 0; }
.text-link .arr { width: 0.875rem; height: 0.875rem; flex: none; transition: translate .4s var(--ease); }
.text-link:hover .arr { translate: 4px 0; }
.btn-sm { --h: 2.875rem; padding-left: 1.125rem; font-size: var(--fs-ui-sm); }
.btn-sm .arr { margin-left: calc(1rem + var(--gap)); }
.btn-butter { --bg: var(--butter); --fg: var(--ink); }
/* a plain pill, the arrow inside it (the header button) */
.btn-pill { filter: none; padding-right: 1.125rem; }
.btn-pill::before { right: 0; }
.btn-pill .arr { width: 0.875rem; height: 0.875rem; padding: 0; margin-left: 0.625rem; background: none; transition: translate .4s var(--ease); }
.btn-pill:hover .arr { translate: 4px 0; }
.text-link { display: inline-flex; align-items: center; gap: 0.625rem; font-weight: 700; font-size: var(--fs-ui); padding-bottom: 0.25rem; box-shadow: inset 0 -2px 0 currentColor; }

/* ---- top strip + nav ---- */
/* the header (7 Oct): clear with no stroke at the top; cream once scrolled; hides as you scroll down and returns when you scroll up (main.js) */
.nav { position: sticky; top: 0; z-index: 50; transition: translate .45s var(--ease); }
.nav.is-hidden { translate: 0 -100%; }
.nav-in { position: relative; height: 4.875rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-inline: calc(var(--pad) + 0.5rem); }
/* the bar is one frosted pill: logo, links and button inside it; the page shows through, blurred */
.nav-in::before { content: ""; position: absolute; z-index: -1; inset: 0.5rem var(--pad); border-radius: 999rem; background: color-mix(in srgb, var(--paper) 60%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--line); }
/* the header logo pill sits inset like the button on the right: same height, same 8px gap to the frosted pill (13 Oct) */
/* the wordmark (12 Oct): James's SVG, sized by height; ink and indigo on light grounds, cream and peach on ink */
.wordmark { --wm-accent: var(--blue); display: block; color: var(--ink); }
.bg-ink .wordmark { --wm-accent: var(--lilac); color: var(--paper); }
/* the footer logo (13 Oct): the filled pill in mint, as logo-reverse-mint: ink mark and "enate", indigo "consulting" */
.bg-ink .wordmark-lg { --logo-fill: var(--butter); --logo-line: none; --wm-accent: var(--blue); color: var(--ink); }
/* the header logo (13 Oct, trial): the outlined pill, as tall as the header button */
.logo-mark { display: none; }
.logo-svg { display: block; overflow: visible; /* the outline overhangs the viewBox by half its stroke */ height: 2.875rem; width: auto; max-width: 100%; aspect-ratio: 359.20 / 60; }
.nav-links { display: flex; align-items: center; gap: 2px; font-weight: 500; font-size: var(--fs-ui-sm); }
.nav-links a { display: block; padding: 0.5625rem 1rem; border-radius: 999rem; transition: background-color .3s, color .3s; }
.nav-links a:hover { background: var(--lilac-2); } /* the text stays ink; only the pill shows (12 Oct) */

/* ---- hero ---- */
.hero { padding: clamp(3rem, 6vw, 6.5rem) 0 clamp(5rem, 9vw, 9.375rem); overflow: clip; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.hero .h1 { font-size: clamp(3rem, 6.8vw, 6.125rem); }
.hero .h1 > span { display: block; white-space: nowrap; } /* always "A new / approach to / consulting." */
.hero-copy .lede { margin-top: clamp(1.5rem, 2.4vw, 2.25rem); max-width: 34ch; }
.hero-copy .lede + .lede { margin-top: 1em; } /* the second paragraph, a line below the first */
.hero-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: clamp(1.75rem, 3vw, 2.75rem); }
.hero-media { position: relative; isolation: isolate; }
/* the hero picture: nine tiles, some filled, some carrying a shape */
.blk { position: absolute; height: auto; aspect-ratio: 1; }
/* ---- sections ---- */
.sec { padding-block: var(--section); }
.sec-head { max-width: 61.25rem; }
.sec-head .body { max-width: 60ch; }

/* approach */
.motion .statement .w { opacity: .5; /* 3.4:1 unlit, over the 3:1 large-text minimum */ transition: opacity .4s var(--ease); }
.motion .statement .w.lit { opacity: 1; }

/* questions */
.q-topic { display: flex; align-items: center; gap: 0.625rem; font-weight: 700; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }

/* diagnose */
.diagnose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: stretch; } /* 50/50; the graphic stretches to the text's height */

/* team: a framed photo with one building block on its corner; the initial shows until the photo is added */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 5vw, 6rem) clamp(2rem, 4vw, 5rem); margin-top: clamp(3.5rem, 6vw, 6.5rem); }
.person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.25rem, 2.4vw, 2.5rem); align-items: end; }
.person-photo { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-card); background: var(--lilac); }
.person-photo::before { content: attr(data-initial); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-head); font-weight: var(--w-head); font-size: clamp(4.5rem, 8vw, 8rem); color: var(--blue); }
.person-photo img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-card); }
.person-name { font-size: var(--fs-l); color: var(--blue); }
.person .q-topic { margin-top: 0.625rem; }
.person .q-topic::before { content: none; } /* no square before the job title */
.person-bio { margin-top: 0.875rem; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); max-width: 34ch; }
.person-tags { margin-top: 1rem; }
.person-li { position: absolute; right: 0.875rem; bottom: 0.875rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--butter); color: var(--ink); transition: transform 0.2s var(--back); } /* a 44px mint disc, like the book-a-call circle */
.person-li svg { width: 1.25rem; height: 1.25rem; }
.person-li:hover { transform: scale(1.08); }
.person-li:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* results */
.results-head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(3.5rem, 6vw, 6rem); border-top: 2px solid var(--ink); }
.stats li + li { border-left: 1px solid var(--line); }
.stat { position: relative; display: grid; align-content: start; gap: 1rem; height: 100%; padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1rem, 2vw, 2rem) 0.5rem; }
.stats li:first-child .stat { padding-left: 0; }
.stat-n { font-weight: var(--w-head); font-size: var(--fs-xxl); line-height: .9; letter-spacing: -.045em; color: var(--blue); }
.stat-l { font-size: var(--fs-small); line-height: 1.4; max-width: 20ch; }
.stat .arr { position: absolute; top: clamp(1.5rem, 2.4vw, 2.25rem); right: clamp(0.75rem, 1.4vw, 1.5rem); width: 1rem; height: 1rem; color: var(--blue); transition: translate .4s var(--ease); }
.stat:hover .arr { translate: 3px -3px; }
.stat:hover .stat-l { text-decoration: underline; text-underline-offset: 0.25rem; }

/* testimonial */
.quote { max-width: 67.5rem; margin: 0 auto; display: grid; justify-items: center; text-align: center; gap: clamp(1.75rem, 3vw, 2.75rem); }
.quote-mark { width: clamp(4rem, 6vw, 5.75rem); color: var(--blue); }
.quote p { font-size: var(--fs-l); line-height: var(--lh-statement); letter-spacing: -.012em; }
.quote figcaption { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; font-family: var(--sans); font-size: var(--fs-ui); }
.quote figcaption b { font-weight: 700; }
.quote figcaption span { color: var(--ink-2); }
.quote figcaption span::before { content: "·"; margin-right: 0.75rem; }

/* cta */
.cta-section { padding-bottom: var(--section); }
.cta { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-card); background: var(--ink); color: var(--paper); padding: clamp(2.5rem, 6vw, 6rem); display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.cta .h2 { color: var(--paper); font-size: var(--fs-xxl); max-width: 9ch; }
.cta-body { display: grid; gap: 1rem; justify-items: start; }
.cta-body .h3 { color: var(--lilac); }
.cta-body p { font-size: var(--fs-body); color: color-mix(in srgb, var(--paper) 82%, transparent); max-width: 30ch; }
.cta-body .btn { margin-top: 0.75rem; }
.cta-circle { z-index: -1; width: clamp(11.25rem, 19vw, 18.75rem); right: calc(clamp(11.25rem, 19vw, 18.75rem) * -.32); bottom: calc(clamp(11.25rem, 19vw, 18.75rem) * -.38); color: var(--butter); }
.cta-quarter { z-index: -1; width: clamp(4rem, 6vw, 6rem); right: clamp(2.5rem, 6vw, 6rem); top: 0; color: var(--blue); rotate: 90deg; }

/* footer */
.footer { padding: clamp(4.5rem, 8vw, 7.5rem) 0 2rem; }
.footer-top { display: flex; justify-content: space-between; align-items: start; gap: 3rem; flex-wrap: wrap; }
.wordmark-lg .logo-svg { height: clamp(2.7rem, 3.96vw, 3.6rem); }
.footer-note { margin-top: 0.75rem; font-family: var(--sans); font-size: var(--fs-ui-sm); color: color-mix(in srgb, var(--paper) 72%, transparent); }
.footer-note a { color: var(--paper); text-decoration: underline; text-underline-offset: .2em; }
.footer-cols { display: flex; gap: clamp(2.5rem, 6vw, 6.5rem); flex-wrap: wrap; font-weight: 500; font-size: var(--fs-ui); }
.footer-cols ul { display: grid; gap: 0.75rem; align-content: start; } /* a short column keeps its spacing instead of stretching to the tallest */
.footer-cols a:hover, .footer-note a:hover { color: var(--butter); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; margin-top: clamp(3.5rem, 6vw, 6rem); padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent); font-weight: 500; font-size: var(--fs-label); color: color-mix(in srgb, var(--paper) 66%, transparent); }
.footer-bottom p:last-child { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; } /* the legal links: when they wrap, rows stay apart */
.footer-bottom a, .cookie-settings { padding-block: 0.3125rem; } /* 24px+ tap targets (WCAG 2.5.8) */
.footer-bottom a:hover { color: var(--paper); }
/* reopens HubSpot's cookie banner; shown only where the tracking loads (html.hs) */
.cookie-settings { display: none; padding-inline: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.hs .cookie-settings { display: inline; }
.cookie-settings:hover { color: var(--paper); }

/* the book-a-call card: a short video with rounded corners and the butter disc on its corner; slides in after the hero */
.disc-card {
  position: fixed; z-index: 60; right: clamp(0.875rem, 1.8vw, 1.75rem); bottom: clamp(0.875rem, 1.8vw, 1.75rem); width: 8.5rem;
  transition: opacity .4s, translate .5s var(--ease), visibility .4s;
}
.js .disc-card:not(.is-on) { opacity: 0; translate: 0 24px; visibility: hidden; }
.disc-video { display: block; overflow: hidden; border-radius: 1rem; background: var(--lilac); box-shadow: 0 12px 32px rgba(12, 12, 54, .18); }
.disc-video video { display: block; width: 100%; height: auto; aspect-ratio: 360 / 484; object-fit: cover; }
.disc {
  position: absolute; z-index: 1; left: -2.75rem; bottom: -1.5rem; width: 6.5rem; height: 6.5rem; border-radius: 50%;
  display: grid; place-items: center; text-align: center; padding: 1.375rem; background: var(--butter); color: var(--blue);
  font-weight: 800; font-size: 1.1875rem; line-height: 1; letter-spacing: -.015em; box-shadow: 0 12px 32px rgba(12, 12, 54, .18);
  transition: scale .5s var(--back), rotate .5s var(--back);
}
.disc:hover { scale: 1.07; rotate: -10deg; }
.disc-pause { position: absolute; top: 0.5rem; right: 0.5rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--ink) 65%, transparent); color: #fff; }
.disc-pause svg { width: 0.75rem; height: 0.75rem; }
.disc-pause .i-play, .disc-pause.is-paused .i-pause { display: none; }
.disc-pause.is-paused .i-play { display: block; }

/* ---- motion cloak: only while JS is starting up; the 3s failsafe drops it ---- */
.js:not(.settled) [data-reveal], .js:not(.settled) [data-split] { opacity: 0; }
/* hero headlines rise line by line in CSS from the first paint, not waiting for GSAP (13 Oct: the wait made the
   headline the slow largest paint on phones). Each line is a clip (outer span) around the line that rises (inner span). */
.rise > span { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.rise > span > span { display: inline-block; animation: rise 1.2s var(--ease) both; }
.rise > span:nth-child(2) > span { animation-delay: .08s; }
.rise > span:nth-child(3) > span { animation-delay: .16s; }
@keyframes rise { from { translate: 0 115%; } }
/* the rest of the hero copy rises and fades in the same way, staggered by --i (GSAP's [data-reveal], minus the wait) */
.rise-in { animation: rise-in 1.2s var(--ease) both; animation-delay: calc(var(--i, 0) * .08s); }
@keyframes rise-in { from { opacity: 0; translate: 0 2.5rem; } }
/* hero photo-block pieces drop into place one after another (was GSAP, power3.out); `scale`/`rotate`, not `transform`,
   so the mouse push (GSAP x/y) and the pieces' spacing (`translate`) still apply. A mask that hasn't loaded hides its photo, so no bare rectangles */
[data-blk] { animation: drop 1s cubic-bezier(.215, .61, .355, 1) both; animation-delay: calc(.2s + var(--k, 0) * .08s); }
@keyframes drop { from { opacity: 0; scale: .2; rotate: -90deg; } }
@media (prefers-reduced-motion: reduce) { .rise > span > span, .rise-in, [data-blk] { animation: none; } }
.w-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w-in { display: inline-block; }

/* ---- responsive ---- */
/* photos: plain cards, like the team photos */
.photo { overflow: hidden; border-radius: var(--r-card); background: var(--lilac); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 68.75em) {
  .nav-links { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { width: 100%; max-width: 32.5rem; margin: 1.5rem auto 0; } /* stacked: centred; an explicit width, or the auto margins shrink it to nothing (its pieces size from its width) */
  .diagnose-grid, .cta { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats li:nth-child(3) { border-left: 0; }
  .stats li:nth-child(3) .stat { padding-left: 0; }
  .stats li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .stat { padding-bottom: 2rem; }
  }
@media (max-width: 47.5em) {
  .people, .person { grid-template-columns: 1fr; }
  .person-photo { max-width: 20rem; }
  .hide-sm { display: none; }
  .show-sm { display: inline; }
  .nav-in { height: 4.125rem; }
  .nav-in::before { inset-block: 0.3125rem; }
  .challenges, .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stats li + li { border-left: 0; border-top: 1px solid var(--line); }
  .stats li .stat { padding-left: 0; }
  .disc-card { display: none; }
  .cta-circle { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js [data-reveal], .js [data-split], .js [data-blk] { opacity: 1 !important; }
}

/* ---- insights (articles): a starting point, to be designed properly ---- */
.post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21.25rem), 1fr)); gap: clamp(1.75rem, 3vw, 3rem); }
.post-card { display: grid; gap: 0.75rem; }
.post-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 0.5rem; }
.post-card:hover .h3 { color: var(--blue); }
.post-meta { font-family: var(--sans); font-weight: 700; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.post-excerpt { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.post-wrap { max-width: 56.25rem; display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
.post-back { justify-self: start; margin-bottom: clamp(1rem, 2vw, 2rem); }
.post-lede { max-width: 40ch; }
.post-cover { margin-block: clamp(1rem, 2vw, 2rem); }
.post-cover img { width: 100%; height: auto; }
.prose { font-family: var(--f-text); font-size: var(--fs-body); line-height: var(--lh-text); max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--f-head); font-weight: var(--w-head); font-size: var(--fs-m); line-height: var(--lh-head); letter-spacing: -.02em; color: var(--blue); margin-top: 1.8em; }
.prose h3 { font-family: var(--f-head); font-weight: var(--w-h3); font-size: var(--fs-s); line-height: var(--lh-head); margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose blockquote { border-left: 4px solid var(--butter); padding-left: 1em; font-size: var(--fs-xs); line-height: var(--lh-lede); }
.prose a { color: var(--blue); text-decoration: underline; text-underline-offset: .15em; }
.prose figure img { width: 100%; height: auto; }
/* legal pages: the privacy notice's data-processing table; stacks into labelled cards on phones */
.legal { max-width: none; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-small); }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .8em; border-bottom: 1px solid var(--line); }
.legal th { font-family: var(--f-head); font-weight: var(--w-h3); }
.legal td ul { padding-left: 1.1em; }
.legal #cookies { scroll-margin-top: 7.5rem; }
@media (max-width: 43.75em) {
  .legal thead { display: none; }
  .legal tr, .legal td { display: block; }
  .legal tr { border-top: 2px solid var(--ink); padding-block: .4em; }
  .legal td { border: 0; padding: .4em 0; }
  .legal td::before { content: attr(data-label); display: block; font-family: var(--f-head); font-weight: var(--w-h3); }
}
.prose figcaption { font-family: var(--sans); font-size: var(--fs-label); color: var(--ink-2); margin-top: 0.5rem; }

/* ---- contact: email, then Katie's HubSpot calendar in a popup ---- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.contact-main { padding-bottom: 0; } /* the call section below brings its own top padding */
.contact-lede { max-width: 46ch; margin-top: clamp(1.25rem, 2vw, 2rem); color: var(--ink-2); }
.contact-grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 6rem); align-items: start; }
.contact-head, .contact-clarity { grid-column: 1; }
.contact-card { grid-column: 2; grid-row: 1 / span 2; } /* spans the hero text and the clarity list, so it stays in view down both */
.clarity { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 3vw, 2.75rem); margin-top: clamp(1.5rem, 2.4vw, 2.25rem); }
.clarity li { display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.clarity li p:last-child { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.clarity-foot { margin-top: clamp(1.5rem, 2.4vw, 2.25rem); font-family: var(--sans); font-weight: 700; font-size: var(--fs-ui); }
.contact-card { position: sticky; top: 6.875rem; display: grid; gap: 1rem; background: var(--ink); color: var(--paper); padding: clamp(2rem, 4vw, 3.5rem); border-radius: var(--r-card); }
.contact-card .h2 { color: var(--paper); font-size: var(--fs-l); }
.contact-card :focus-visible { outline-color: var(--butter); }
.book-form { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 0.5rem; }
.book-form input { flex: 1 1 13.75rem; min-height: 3.5rem; padding: 0 1.125rem; border: 0; border-radius: var(--r-btn); background: var(--paper); color: var(--ink); font: 500 var(--fs-ui) var(--sans); }
.book-form button:disabled { opacity: .6; cursor: progress; }
/* marketing opt-in switch, between the email and the button so it's met before submitting; off track 55% paper keeps 3:1 on ink */
.consent { flex-basis: 100%; display: flex; gap: 0.75rem; align-items: flex-start; margin-block: 0.25rem; cursor: pointer; font-family: var(--sans); font-size: var(--fs-label); line-height: var(--lh-small); color: color-mix(in srgb, var(--paper) 85%, transparent); }
.consent input { appearance: none; flex: none; position: relative; width: 2.75rem; height: 1.5rem; min-height: 0; margin: 0; padding: 0; border-radius: 999px; background: color-mix(in srgb, var(--paper) 55%, var(--ink)); cursor: pointer; transition: background-color .2s; }
.consent input::before { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--paper); transition: transform .2s var(--ease); }
.consent input:checked { background: var(--butter); }
.consent input:checked::before { background: var(--ink); transform: translateX(1.25rem); }
@media (prefers-reduced-motion: reduce) { .consent input, .consent input::before { transition: none; } }
.book-msg { font-family: var(--sans); font-size: var(--fs-ui); color: var(--butter); }
.book-msg:empty { display: none; }
.book-msg a, .book-privacy a { text-decoration: underline; text-underline-offset: .15em; }
.book-privacy { font-family: var(--sans); font-size: var(--fs-label); line-height: var(--lh-small); color: color-mix(in srgb, var(--paper) 70%, transparent); }
.call-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 1.8vw, 1.75rem); margin-top: clamp(3rem, 5vw, 5rem); }
.call-list li { display: grid; gap: 0.75rem; align-content: start; padding: clamp(1.75rem, 2.8vw, 2.75rem); background: var(--lilac-2); border-radius: var(--r-card); }
.call-list .h3 { color: var(--blue); }
.call-list p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.cal { width: min(62.5rem, 100% - 2rem); height: min(48.75rem, 100dvh - 2rem); margin: auto; padding: 0; border: 0; border-radius: var(--r-card); background: #101114; overflow: hidden; } /* matches the dark HubSpot calendar */
.cal::backdrop { background: color-mix(in srgb, var(--ink) 70%, transparent); }
.cal iframe { display: block; width: 100%; height: 100%; border: 0; }
.cal-close { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 1; width: 2.75rem; height: 2.75rem; border: 0; background: var(--ink); color: var(--paper); font: 700 1.625rem/1 var(--sans); cursor: pointer; }
@media (max-width: 68.75em) { .contact-grid { grid-template-columns: 1fr; } .contact-head, .contact-clarity, .contact-card { grid-column: 1; grid-row: auto; } .contact-card { position: static; } } /* heading, then the form, then the clarity list */
@media (max-width: 47.5em) { .clarity, .call-list { grid-template-columns: 1fr; } }

/* ================================================================
   Site map pages (6 Oct): nav, page heroes and the new sections.
   Built from the Notion drafts; layouts are suggestions to review.
   ================================================================ */

/* the dark grounds: highlighted words switch to ink so they read on the mint */
.sec-link { margin-top: clamp(2.5rem, 4vw, 4rem); }
/* the closing card needs its own space after a coloured section or a strip */
.sec[class*="bg-"] + .cta-section { padding-top: var(--section); }
.sec-intro { margin-top: clamp(1.5rem, 2.4vw, 2.25rem); }
.label { font-family: var(--sans); font-weight: 700; font-size: var(--fs-ui); color: var(--blue); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; font-family: var(--sans); font-weight: 700; font-size: var(--fs-label); }
/* tags: each problem has its own colour and block shape (Figma "markers-tags-highlight"); other topics are mint with a square */
.tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; background: var(--butter); color: var(--ink); }
.tag::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--blue); }
.tag[data-tag="process-debt"] { background: var(--lilac); }
.tag[data-tag="process-debt"]::before, .tag[data-tag="ai-at-scale"]::before { border-radius: 50%; }
.tag[data-tag="team-readiness"] { background: var(--blue); color: #fff; }
.tag[data-tag="team-readiness"]::before { background: var(--butter); border-radius: 0.25rem 0.25rem 0 0; }
.tag[data-tag="tech-stack"] { background: var(--ink); color: #fff; }
.tag[data-tag="tech-stack"]::before { background: var(--lilac); border-top-right-radius: 100%; }
.tag[data-tag="client-data"] { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.tag[data-tag="client-data"]::before { height: 0.25rem; border-radius: 0.25rem 0.25rem 0 0; }
.tag[data-tag="ai-at-scale"] { background: none; padding-inline: 2px; }
/* numbered markers: the number in a block shape { display: inline-grid; place-items: center; flex: none; width: 3rem; height: 3rem; font-family: var(--f-head); font-weight: 800; font-size: 1rem; color: #fff; background: var(--blue); }
.tags a:hover { color: var(--blue); }

/* ---- nav: Problems has a dropdown; phones and tablets get a disclosure menu ---- */
.nav-item { position: relative; }
.nav-item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1rem; } /* bridges the gap to the dropdown */
.nav-links a[aria-current] { background: var(--lilac-2); }
.nav-menu {
  position: absolute; top: calc(100% + 0.875rem); left: -0.3125rem; min-width: 16.875rem; padding: 0.5rem; border-radius: 1.375rem; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 40px rgba(27, 15, 59, .12);
  opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .25s, translate .35s var(--ease), visibility .25s;
}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { opacity: 1; visibility: visible; translate: none; }
.nav-menu a { display: block; padding: 0.625rem 0.875rem; }
.nav-menu a:hover { background: var(--lilac-2); }
.nav-menu li:first-child a { color: var(--blue); font-weight: 700; }
.menu { display: none; }
.menu summary { list-style: none; display: grid; gap: 0.375rem; place-content: center; width: 2.875rem; height: 2.875rem; border-radius: 999rem; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { width: 1.25rem; height: 2px; background: var(--ink); transition: rotate .3s, translate .3s; }
.menu[open] summary span:first-child { translate: 0 4px; rotate: 45deg; }
.menu[open] summary span:last-child { translate: 0 -4px; rotate: -45deg; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - 7.5rem); overflow: auto; background: var(--paper); box-shadow: 0 1px 0 var(--line), 0 24px 40px rgba(27, 15, 59, .12); padding: 1rem var(--pad) 2rem; font-family: var(--sans); }
.menu-panel > ul > li { border-bottom: 1px solid var(--line); }
.menu-panel > ul > li > a { display: block; padding: 1rem 0; font-weight: 800; font-size: var(--fs-s); letter-spacing: -.01em; }
.menu-panel > ul > li > a[aria-current] { color: var(--blue); }
.menu-panel ul ul { padding: 0 0 1rem 1rem; display: grid; gap: 0.25rem; font-weight: 500; font-size: var(--fs-ui); }
.menu-panel ul ul a { display: block; padding: 0.375rem 0; }

/* ---- page heroes ---- */
.page-hero { padding: clamp(3rem, 6vw, 6.5rem) 0 clamp(3.5rem, 6vw, 6rem); }
.page-hero .h1 { font-size: clamp(2.75rem, 4.8vw, 5rem); }
.page-hero-side { display: grid; gap: 2.25rem; justify-items: start; }
.page-hero-side .lede { color: var(--ink-2); }

/* ---- home: problem cards, the diagnostic first in mint ---- */

/* ---- results: five stats ---- */
.impact-stats { padding-bottom: clamp(1rem, 2vw, 2rem); }

/* ---- impact and case studies ---- */
.featured-case { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 6rem); align-items: end; padding: clamp(2rem, 5vw, 5rem); }
.featured-case .h2 { color: var(--paper); font-size: var(--fs-l); max-width: 22ch; margin-bottom: 1.75rem; }
.featured-case .text-link { color: var(--butter); }
.featured-n { display: grid; gap: 0.5rem; font-family: var(--sans); font-size: var(--fs-small); color: color-mix(in srgb, var(--paper) 76%, transparent); }
.featured-n span { font-family: var(--f-head); font-weight: var(--w-head); font-size: clamp(4rem, 9vw, 9.375rem); line-height: .8; letter-spacing: -.055em; color: var(--butter); }
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21.25rem), 1fr)); gap: clamp(1rem, 1.8vw, 1.75rem); margin-top: clamp(3.5rem, 6vw, 6rem); }
.case-grid-2 { grid-template-columns: 1fr 1fr; }
.case-card { position: relative; display: flex; flex-direction: column; gap: 1rem; height: 100%; min-height: 18.75rem; padding: clamp(1.75rem, 2.8vw, 2.5rem); background: var(--paper); transition: background-color .3s; }
.case-card:hover { background: var(--butter); }
.case-card .q-topic { padding-right: 1.75rem; }
.case-card .h3 { max-width: 24ch; }
.case-card .tags { margin-top: auto; }
.case-card > .arr { position: absolute; top: clamp(1.5rem, 2.2vw, 2.125rem); right: clamp(1.5rem, 2.2vw, 2.125rem); width: 1rem; height: 1rem; color: var(--blue); }
.case-hero .post-back { margin-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.case-title { max-width: 22ch; }
.case-lede { max-width: 50ch; margin-top: 1.5rem; color: var(--ink-2); }
.case-hero .tags { margin-top: 1.75rem; }
.case-results .stats { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.case-results .stat-n { font-size: clamp(2.25rem, 4vw, 4rem); }
.case-quote { margin-top: clamp(3.5rem, 6vw, 6rem); }
.case-quote figcaption b { font-weight: 700; }
.story-row { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(1.25rem, 4vw, 5rem); padding-block: clamp(2rem, 3vw, 3rem); border-top: 1px solid var(--line); }
.story-label { color: var(--blue); position: sticky; top: 6.875rem; align-self: start; }
.case-quote-end .quote p, .case-quote-end blockquote p { font-size: var(--fs-m); }
.case-quote-end blockquote p { line-height: var(--lh-statement); letter-spacing: -.01em; }
.case-quote-end figcaption { margin-top: 1.25rem; font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink-2); }

/* ---- insights ---- */
.insights-featured { padding-bottom: clamp(1.5rem, 3vw, 3rem); }
.post-card-body { display: grid; gap: 0.75rem; align-content: start; }
.post-card-big { grid-template-columns: 7fr 5fr; gap: clamp(1.75rem, 4vw, 4.5rem); align-items: center; }
.post-card-big img { margin: 0; }
.post-card-big .h2 { font-size: var(--fs-l); }
.post-card-big:hover .h2 { color: var(--blue); }
.post-card-big .text-link { justify-self: start; margin-top: 0.5rem; color: var(--blue); }
.sec .post-list { margin-top: clamp(2.5rem, 4vw, 4rem); }
.loop-in { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.loop-form > p { flex-basis: 100%; }
.loop .book-form input { box-shadow: inset 0 0 0 1px var(--ink); }
.loop .book-msg { color: var(--blue); }
.loop .book-privacy { color: var(--ink-2); }

/* ---- the readiness check ---- */
.quiz-sec { min-height: calc(100dvh - 4.875rem); }
.quiz { max-width: 55rem; }
.quiz-screen { display: grid; gap: 1.5rem; justify-items: start; }
.quiz fieldset { display: block; justify-items: normal; border: 0; min-width: 0; } /* normal: block layout now honours justify-items, which would shrink the bar to nothing */
.quiz .h1 { font-size: clamp(2.75rem, 5.4vw, 5.5rem); }
.quiz-lede { max-width: 44ch; color: var(--ink-2); }
.quiz-bar { height: 0.25rem; margin-top: 0.875rem; background: color-mix(in srgb, var(--blue) 16%, transparent); }
.quiz-bar span { display: block; width: var(--w); height: 100%; background: var(--blue); transition: width .5s var(--ease); }
.quiz-q { float: left; width: 100%; margin: clamp(1.75rem, 3vw, 2.75rem) 0 clamp(1.5rem, 2.4vw, 2.25rem); font-size: var(--fs-l); }
.quiz-answers { clear: both; display: grid; gap: 0.625rem; }
.quiz-answer { display: flex; align-items: center; gap: 1rem; padding: 1.125rem 1.375rem; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; font-family: var(--sans); font-weight: 500; font-size: var(--fs-ui); line-height: 1.35; transition: background-color .2s, box-shadow .2s; }
.quiz-answer:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.quiz-answer:has(input:checked) { background: var(--butter); box-shadow: inset 0 0 0 2px var(--blue); }
.quiz-answer:has(:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.quiz-answer input { flex: none; width: 1.25rem; height: 1.25rem; accent-color: var(--blue); }
.quiz-answer input:focus-visible { outline: none; }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; }
.quiz-result [data-area] { display: grid; gap: 1.25rem; justify-items: start; }
.quiz-also { font-family: var(--sans); font-weight: 700; font-size: var(--fs-ui); }
.quiz-also a { color: var(--blue); box-shadow: inset 0 -2px 0 currentColor; }
.quiz-again { margin-top: 0.5rem; }

@media (max-width: 68.75em) {
  .nav-links { display: none; }
  .menu { display: block; }
  .featured-case, .post-card-big, .loop-in, .story-row { grid-template-columns: 1fr; }
  .story-label { position: static; }
}
@media (max-width: 47.5em) {
  .case-grid-2, .case-results .stats { grid-template-columns: 1fr; }
  .nav-in { gap: 0.625rem; }
  .nav-in .btn-sm { margin-left: auto; padding: 0 0.875rem; }
  .nav-in .btn-sm .arr { display: none; }
  .nav-in .btn-sm::before { right: 0; }
  .nav-in .logo-svg { display: none; } /* phones: just the mark in its circle, the size of the menu button (13 Oct) */
  .nav-in .logo-mark { display: block; width: 2.875rem; height: 2.875rem; overflow: visible; }
  .case-results .stats li + li { border-left: 0; border-top: 1px solid var(--line); }
}

/* ================================================================
   Figma direction (6 Oct): icons, photo blocks, infographics.
   File "Untitled" (hBn2sEacPQGlZokfzInmAG): Colour icons, Photo blocks, Infographics.
   ================================================================ */

/* ---- photo blocks: each photo is masked to its block shape; the coloured blocks sit around it ---- */
.pblock { position: relative; width: 100%; container-type: inline-size; } /* cqw: the hero pieces' spacing scales with the block */
/* the mask sits on the photo, not on .pblock-photo: the hero moves .pblock-photo with the mouse, and Safari re-renders a mask badly on an element that's being transformed (12 Oct) */
.pblock-photo { position: absolute; }
.pblock-photo img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask: var(--mask) 0 0 / 100% 100% no-repeat; mask: var(--mask) 0 0 / 100% 100% no-repeat; }
.pblock-shape { position: absolute; }

/* ---- home: the first hour on ink, with the timeline ---- */
.timeline { --p: 1; position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 4vw, 4rem); margin-top: clamp(4.5rem, 8vw, 8rem); }
.timeline::after { content: ""; position: absolute; z-index: -1; top: calc(3.75rem - 1px); left: 0; right: 0; height: 2px; background: var(--blue); transform: scaleX(var(--p)); transform-origin: 0 50%; } /* no faint track under it: it showed through the faded icons */
.tl-when { display: block; height: 1.5rem; margin-bottom: 0.75rem; font-family: var(--sans); font-weight: 700; font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 70%, transparent); }
/* each step's shape; with motion they pop in ahead of the line (main.js) */
.tl-mark { width: 3rem; height: 3rem; }
.tl-circle, .tl-arch { color: var(--butter); }
.tl-square, .tl-quarter { color: var(--lilac); }
.timeline .h3 { margin-top: 1.375rem; }
.timeline p { margin-top: 0.625rem; font-size: var(--fs-small); line-height: var(--lh-small); color: color-mix(in srgb, var(--paper) 76%, transparent); max-width: 30ch; }

/* ---- stat cards (Figma stat-margin-43m, stat-processing-80pct, stat-email-70pct, stat-efficiency-15pct) ---- */
/* the five results as a bento (9 Oct): two rows of four columns, the margin and agents cards wide, the processing card tall
   (its bars sit at the bottom); two columns on tablets, one on phones. The cards always come in this order (home and Results) */
.scards { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(clamp(17rem, 23vw, 21rem), auto); grid-template-areas: "a a b c" "d d b e"; gap: clamp(1rem, 1.6vw, 1.5rem); margin-top: clamp(3.5rem, 6vw, 6.5rem); }
.scards > :nth-child(1) { grid-area: a; } .scards > :nth-child(2) { grid-area: b; } .scards > :nth-child(3) { grid-area: c; }
.scards > :nth-child(4) { grid-area: d; } .scards > :nth-child(5) { grid-area: e; }
.scards .scard { min-height: 0; }
.scards > :nth-child(1) .scard-viz { width: 55%; margin-left: auto; } /* wide: the quarters sit bottom-right, not across the whole card */
.scards > :nth-child(4) .arches { grid-template-columns: repeat(12, 1fr); } /* wide: the twelve in one row */
@media (max-width: 68.75em) { .scards { grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b c" "d e"; } .scards > :nth-child(4) .arches { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 47.5em) { .scards { grid-template-columns: 1fr; grid-template-areas: none; } .scards > * { grid-area: auto !important; } .scards > :nth-child(1) .scard-viz { width: auto; } }
.scard { --pad: clamp(1.375rem, 2vw, 1.875rem); container-type: inline-size; position: relative; display: flex; flex-direction: column; height: 100%; min-height: clamp(22.5rem, 29vw, 27.5rem); padding: var(--pad); overflow: hidden; background: var(--lilac-2); transition: translate .4s var(--ease); }
.scard:hover { translate: 0 -4px; }
.scard-label { padding-right: 1.5rem; font-family: var(--sans); font-weight: 700; font-size: var(--fs-ui-sm); }
.scard-n { margin-top: 0.875rem; font-family: var(--f-head); font-weight: 800; font-size: min(clamp(2.5rem, 3.4vw, 3.625rem), 22cqi); /* cqi: narrow cards shrink it, so "countries" doesn't split */ line-height: .92; letter-spacing: -.04em; }
.scard-l { margin-top: 0.625rem; font-size: var(--fs-small); line-height: var(--lh-small); max-width: 18ch; }
.scard-viz { display: block; margin-top: auto; padding-top: 1.5rem; }
.scard > .arr { position: absolute; top: var(--pad); right: var(--pad); width: 0.875rem; height: 0.875rem; transition: translate .4s var(--ease); }
.scard:hover > .arr { translate: 3px -3px; }
.scard-tech-stack { background: var(--blue); color: #fff; }
.scard-tech-stack .scard-viz { display: flex; align-items: flex-end; margin: auto calc(var(--pad) * -1) calc(var(--pad) * -1); }
.scard-tech-stack svg { height: auto; aspect-ratio: 1; }
.q-peach { width: 24%; color: var(--lilac); } .q-mint { width: 32%; color: var(--butter); } .q-paper { width: 44%; color: var(--paper); }
.scard-process-debt { background: var(--ink); color: var(--paper); }
.scard-process-debt .scard-viz { display: grid; gap: 0.375rem; }
.bar-label { font-family: var(--sans); font-weight: 700; font-size: 0.75rem; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 70%, transparent); }
.bar { height: 1rem; border-radius: 0 999rem 999rem 0; margin-bottom: 0.5rem; }
.bar-before { background: var(--lilac); }
.bar-after { width: 20%; background: var(--butter); }
.scard-team-readiness { background: var(--lilac); }
.dots { display: grid; grid-template-columns: repeat(19, 1fr); gap: 3px; }
.dots i { aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--blue); }
.dots i.on { background: var(--blue); }
.scard-ai-at-scale { background: var(--butter); }
.arches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.375rem; color: var(--blue); }
.arches svg { width: 100%; height: auto; aspect-ratio: 1; }
.merge { display: flex; align-items: center; gap: 0.75rem; }
.four { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; width: 34%; }
.four i { aspect-ratio: 1; background: var(--ink); }
.merge .chev { flex: none; width: 0.75rem; height: 1.5rem; color: var(--blue); }
.one { flex: 1; aspect-ratio: 1; max-width: 44%; background: var(--blue); }
/* hover (9 Oct): each chart plays a short move as the card lifts; they also build themselves as they scroll in (main.js) */
@media (prefers-reduced-motion: no-preference) {
  .scard-tech-stack:hover svg { animation: sc-bob .6s var(--ease) both; }
  .scard-tech-stack:hover .q-mint { animation-delay: .08s; } .scard-tech-stack:hover .q-paper { animation-delay: .16s; }
  .scard-process-debt:hover .bar { transform-origin: left; animation: sc-grow .7s var(--ease) both; }
  .scard-process-debt:hover .bar-after { animation-delay: .25s; }
  .scard-team-readiness:hover .dots i { animation: sc-pop .45s var(--ease) both; animation-delay: calc(var(--i) * 5ms); }
  .scard-ai-at-scale:hover .arches svg { animation: sc-bob .5s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
  .scard-client-data:hover .four { animation: sc-merge .7s var(--ease) both; }
  .scard-client-data:hover .one { animation: sc-pop .6s var(--back) .25s both; }
}
@keyframes sc-bob { 50% { translate: 0 -0.5rem; } }
@keyframes sc-grow { from { scale: 0 1; } }
@keyframes sc-pop { 50% { scale: 1.25; } }
@keyframes sc-merge { 50% { translate: 0.75rem 0; scale: .9; } }
/* the Figma "big-number-callout": ink card, a violet quarter and a mint dot in the corner */
/* the ten-years graphic (9 Oct): fills its half of the 50/50 grid, top to bottom; the figure sits bottom-left, the arc and dot top-right.
   With motion the arc sweeps out of the corner, the dot drops in, the 10 counts up and "yrs" rises (main.js), then the dot floats */
.callout { container-type: inline-size; position: relative; overflow: hidden; display: grid; align-content: end; height: 100%; min-height: 26rem; padding: clamp(1.5rem, 3vw, 2.75rem); background: var(--ink); color: var(--paper); }
.callout-arc { position: absolute; top: 0; right: 0; width: 46%; aspect-ratio: 1; background: var(--blue); border-bottom-left-radius: 100%; }
.callout-dot { position: absolute; top: 7%; right: 6%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--butter); }
.callout-n { position: relative; font-family: var(--f-head); font-weight: 800; font-size: min(13rem, 28cqw); line-height: .8; letter-spacing: -.05em; white-space: nowrap; } /* sized to the box, so it never pushes it wider */
.callout-yrs { display: inline-block; color: var(--butter); }
@media (prefers-reduced-motion: no-preference) { .callout-dot { animation: callout-float 6s ease-in-out infinite; } }
@keyframes callout-float { 50% { translate: -0.5rem 0.75rem; } }
@media (max-width: 68.75em) { .callout { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; } } /* stacked: a fixed shape, wide on tablets... */
@media (max-width: 47.5em) { .callout { aspect-ratio: 6 / 5; } } /* ...squarer on phones */

/* ---- page heroes with a photo block ---- */

/* ---- impact, contact, readiness check ---- */
.impact-banner { margin-bottom: clamp(1rem, 2vw, 2rem); }
.impact-stats .scards { margin-top: 0; }
.clarity img, .call-list img { width: 2.5rem; height: 2.5rem; }
.call-list img { width: 3rem; height: 3rem; margin-bottom: 0.5rem; }
.quiz-icon { width: 4.5rem; height: 4.5rem; }

@media (max-width: 68.75em) {
  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline::after { display: none; }
}
@media (max-width: 47.5em) {
  .timeline { grid-template-columns: 1fr; }
}
.case-client { margin-top: clamp(1.25rem, 2vw, 1.75rem); font-family: var(--sans); font-weight: 500; font-size: var(--fs-ui); color: var(--ink-2); }

/* page heroes: headline, then the line and button underneath; a photo block, when there is one, sits beside them */
.page-hero-copy { max-width: 57.5rem; }
.page-hero-side { margin-top: clamp(1.75rem, 2.8vw, 2.5rem); }
.page-hero-side .lede { max-width: 48ch; }
.page-hero-media { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2.5rem, 6vw, 6.875rem); align-items: center; }
.page-hero-block { max-width: 32.5rem; justify-self: end; }
@media (max-width: 68.75em) {
  .page-hero-media { grid-template-columns: 1fr; }
  .page-hero-block { justify-self: start; max-width: 27.5rem; }
}

/* ================================================================
   Home refresh (7 Oct), from the final Notion copy.
   ================================================================ */

/* the destination (8 Oct), a scroll story after savor.it, toned down and linear. Without the story (phones, short screens,
   reduced motion, no JS) it's a grid of icon stops. With it (.is-live, main.js) the stage pins full-screen: the heading stays on the
   left; on the right a journey (15 Oct): the five icon stops travel up as you scroll (--p, in stops), each arriving in the middle
   (--d, its distance from there). Each stop brings its own stretch of line from the one before, drawn ahead of it as it rises
   (anticipation), then the stop fades in and pops (--on); stops passed dim and shrink a little so the current one leads (staging)
   and fade out towards the top. No standing line, no step numbers (15 Oct) */
.story-head { max-width: 40rem; }
.story-intro { margin-top: 1.5rem; font-size: var(--fs-xs); line-height: var(--lh-lede); color: var(--ink-2); }
.story-stops { margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; grid-template-columns: 1fr; gap: 2.5rem 1.5rem; }
/* never one stop alone on the last row: one column, then 3 + 2, then all five in a row (not 4 + 1 or 2 + 2 + 1) */
@media (min-width: 40em) { .story-stops { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 75em) { .story-stops { grid-template-columns: repeat(5, 1fr); } }
.story-icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--paper); }
.story-icon img { width: 2.25rem; height: 2.25rem; }
.story-stops p { margin-top: 1rem; font-family: var(--f-head); font-weight: var(--w-h3); font-size: var(--fs-xs); line-height: var(--lh-head); letter-spacing: -.012em; }

.story.is-live { padding: 0; }
.is-live .story-stage { position: relative; max-width: none; padding: 0; height: 100vh; height: 100svh; overflow: hidden; }
.is-live .story-head { position: absolute; left: max(var(--pad), (100% - 90rem) / 2 + var(--pad)); /* lines up with .wrap's content edge on wide screens */ top: 50%; translate: 0 -50%; max-width: 34rem; }
.is-live .story-intro { font-size: var(--fs-body); }
.is-live .story-stops { --p: 0; --gap: min(11rem, 19svh); --x: 3rem; position: absolute; left: calc(54% - var(--x)); right: 0; top: 0; bottom: 0; margin: 0; display: block;
  -webkit-mask-image: linear-gradient(transparent 4%, #000 30%); mask-image: linear-gradient(transparent 4%, #000 30%); } /* the trail fades out at the top; the box starts --x left of the line so the mask doesn't cut the icons in half */
.is-live .story-stops li { --on: 0; --d: calc(var(--k) - var(--p)); position: absolute; left: var(--x); top: 50%; translate: 0 calc(var(--d) * var(--gap)); }
.is-live .story-stops li::before { content: ""; position: absolute; left: -1px; bottom: 0; width: 2px; height: var(--gap); background: var(--blue); transform-origin: top; scale: 1 clamp(0, 1 - var(--d), 1); opacity: clamp(.4, 1.3 + var(--d) * .6, 1); } /* the stretch from the stop before, drawn down as this one rises */
.is-live .story-stops li:first-child::before { content: none; }
.is-live .story-icon { position: absolute; z-index: 1; left: 0; top: 0; translate: -50% -50%;
  scale: calc((.78 + var(--on) * .22) * clamp(.86, 1.07 + var(--d) * .14, 1));              /* pops on arrival; a size smaller once half a step past */
  opacity: min(clamp(0, 1 - var(--d) * 2.5, 1), clamp(.4, 1.3 + var(--d) * .6, 1)); }       /* in over the last 40% of its rise; dims once half a step past */
.is-live .story-stops p { position: absolute; left: 3rem; top: 0; translate: 0 -50%; width: max-content; max-width: 20ch; margin: 0; font-size: var(--fs-s); }

/* problems: one row per question; the row fills peach on hover */
.qrows { margin-top: clamp(3.5rem, 6vw, 6.5rem); border-top: 2px solid var(--ink); }
.qrow { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(max-content, 4fr) 8fr 1.25rem; gap: 0.625rem clamp(1.25rem, 2.6vw, 2.75rem); align-items: center; padding: clamp(1.75rem, 2.8vw, 2.75rem) 0; border-bottom: 1px solid var(--line); }
.qrow::before { content: ""; position: absolute; z-index: -1; inset: -1px calc(var(--pad) * -.4); background: var(--lilac-2); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease); }
.qrow:hover::before { transform: none; }
.qrow-name { display: flex; align-items: center; gap: 0.875rem; white-space: nowrap; grid-row: 1 / span 2; } /* the name sits beside the question and its answer, on one line */
.qrow-q { grid-column: 2; grid-row: 1; }
.qrow-a { grid-column: 2; grid-row: 2; max-width: 52ch; } /* the answer sits under the question */
.qrow > .arr { grid-column: 3; grid-row: 1 / span 2; }
/* hierarchy (9 Oct): the problem's name leads, at the size the question had; the question and our answer support it, smaller */
.qrow-name img { width: 3rem; height: 3rem; flex: none; }
.qrow-name .h3 { font-size: var(--fs-m); }
.qrow-q { font-family: var(--f-text); font-size: var(--fs-body); font-weight: 500; line-height: var(--lh-small); }
.qrow-a { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.qrow > .arr { width: 1rem; height: 1rem; color: var(--blue); transition: translate .4s var(--ease); }
.qrow:hover > .arr { translate: 4px 0; }

.timeline-3 { grid-template-columns: repeat(3, 1fr); }
.timeline-3 p { max-width: 36ch; }

/* the team in one row, photo above the words; topics stay on the Why page */
.people-4 { grid-template-columns: repeat(4, 1fr); gap: clamp(2rem, 3vw, 3rem) clamp(1.25rem, 2vw, 2rem); }
.people-4 .person { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 1.25rem; } /* align-content: a shorter bio doesn't spread its rows to match the taller card beside it */
.people-4 .person-name { font-size: var(--fs-m); }
.people-4 .person-tags { display: none; }

@media (max-width: 68.75em) {
  .qrow { grid-template-columns: 1fr 1.25rem; gap: 0.75rem 1.25rem; }
  .qrow-name { grid-column: 1; grid-row: 1; white-space: normal; }
  .qrow > .arr { grid-column: 2; grid-row: 1; }
  .qrow-q, .qrow-a { grid-column: 1 / -1; grid-row: auto; }
  .people-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 47.5em) {
  .people-4 { grid-template-columns: 1fr; }
}

/* ---- reflow and text spacing (WCAG 1.4.10, 1.4.12), 7 Oct ---- */
@media (max-width: 68.75em) { .timeline-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 47.5em) {
  .timeline-3 { grid-template-columns: 1fr; }
  .hero .h1 > span { white-space: normal; } /* the set lines may wrap on very small screens or with wider text spacing */
  .nav-in .wordmark { min-width: 0; flex: 0 1 auto; } /* the logo shrinks rather than pushing the menu off screen */
  .nav-in .btn-sm, .nav-in .menu { flex: none; }
}
.scard-n, .stat-n, .featured-n span { overflow-wrap: break-word; }
.cta .h2 { overflow-wrap: break-word; }
@media (max-width: 47.5em) {
  .btn { max-width: 100%; height: auto; min-height: var(--h); white-space: normal; } /* long labels wrap instead of running off a small screen */
  .cta { padding: 1.75rem; }
  .cta .h2 { font-size: clamp(2.5rem, 6.2vw, 6.5rem); }
}

/* ================================================================
   How we help and What's included? (7 Oct), from the Notion drafts.
   ================================================================ */
.page-note { font-family: var(--sans); font-weight: 500; font-size: var(--fs-ui-sm); color: var(--ink-2); }
.hero-copy .page-note { margin-top: 2.25rem; } /* the home hero isn't a grid: match the 36px gap the other heroes get */
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 0.75rem; }
.cta-actions .text-link { color: var(--paper); }

/* how we help: one row per problem, the proof as an indigo card that links to the case study */
/* the rows share one grid (subgrid), so the three columns line up from row to row */
.helps { display: grid; grid-template-columns: minmax(0, 4fr) 6fr minmax(15rem, 3fr); column-gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(3.5rem, 6vw, 6.5rem); border-top: 2px solid var(--ink); }
.help { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 1.25rem; align-items: start; padding-block: clamp(2rem, 3vw, 3rem); border-bottom: 1px solid var(--line); }
/* as on home: the problem's name leads, the client's question supports it */
.help-name { font-family: var(--f-head); font-weight: var(--w-head); font-size: var(--fs-m); line-height: var(--lh-head); letter-spacing: -.012em; text-wrap: balance; }
.help-q { font-size: var(--fs-body); font-weight: 500; line-height: var(--lh-small); }
.help-what { margin-top: 0.75rem; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); max-width: 56ch; }
.help-what b { font-weight: 700; color: var(--ink); }
/* each proof card wears its problem's colour from the home results bento, and lifts on hover like those cards */
.help-proof { display: grid; gap: 0.5rem; align-content: start; padding: clamp(1.25rem, 2vw, 1.75rem); background: var(--blue); color: #fff; transition: translate .4s var(--ease); }
.help-proof:hover { translate: 0 -4px; }
.help-proof .arr { transition: translate .4s var(--ease); }
.help-proof:hover .arr { translate: 3px 0; }
.help-proof .label { color: var(--butter); }
.help-proof[data-tone="process-debt"] { background: var(--ink); color: var(--paper); }
.help-proof[data-tone="team-readiness"] { background: var(--lilac); color: var(--ink); }
.help-proof[data-tone="ai-at-scale"] { background: var(--butter); color: var(--ink); }
.help-proof[data-tone="client-data"] { background: var(--paper); color: var(--ink); } /* the bento's pale peach would vanish into this section, so cream */
.help-proof:is([data-tone="team-readiness"], [data-tone="ai-at-scale"], [data-tone="client-data"]) .label { color: var(--blue); }
.help-proof-text { font-family: var(--f-head); font-weight: 800; font-size: var(--fs-s); line-height: var(--lh-head); letter-spacing: -.012em; }
.help-proof .text-link { justify-self: start; margin-top: 0.5rem; font-size: var(--fs-ui-sm); }
.start-here-in { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.start-here .body-lg { max-width: 52ch; color: var(--ink-2); }
.start-here .hero-actions { margin-top: clamp(1.5rem, 2.4vw, 2.25rem); }
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: clamp(1rem, 1.8vw, 1.75rem); margin-top: clamp(3rem, 5vw, 5rem); }
.reasons li { display: grid; gap: 0.875rem; align-content: start; padding: clamp(1.75rem, 2.8vw, 2.75rem); background: var(--paper); }
.reasons img { width: 2.5rem; height: 2.5rem; }
.reasons p { max-width: 48ch; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }

/* what's included: each step has its name on the left (it stays in view while you read) and the detail on the right */
.stage-in { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.stage-head { position: sticky; top: 7rem; display: grid; gap: 0.625rem; justify-items: start; }
.stage-meta { padding: 0.375rem 0.875rem; border-radius: 999rem; background: var(--butter); color: var(--ink); font-family: var(--sans); font-weight: 700; font-size: var(--fs-ui-sm); }
.stage-body { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); }
.stage-body > .body-lg { max-width: 56ch; color: var(--ink-2); }
.stage-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 1.8vw, 1.75rem); }
.stage-pair > div, .stage-get { display: grid; gap: 0.625rem; align-content: start; padding: clamp(1.5rem, 2.4vw, 2.25rem); background: var(--lilac-2); color: var(--ink); }
.stage-pair p, .stage-get p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.stage-pair > .stage-get, .stage-get { background: var(--ink); color: var(--paper); }
.stage-get .h3 { color: var(--butter); }
.stage-get p { color: color-mix(in srgb, var(--paper) 82%, transparent); }
.bg-ink .stage-get { background: var(--butter); color: var(--ink); } /* on a dark section the dark card would vanish */
.bg-ink .stage-get .h3 { color: inherit; }
.bg-ink .stage-get p { color: var(--ink-2); }
.areas-6 { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.areas-6 li { display: grid; gap: 0.625rem; align-content: start; padding: clamp(1.25rem, 2vw, 1.75rem); background: var(--paper); }
.areas-6 img { width: 2.5rem; height: 2.5rem; margin-bottom: 0.25rem; }
.areas-6 p { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.delivery li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1.25rem; align-items: start; padding-block: 1.25rem; border-bottom: 1px solid var(--line); }
.delivery img { width: 2.5rem; height: 2.5rem; }
.delivery p { margin-top: 0.25rem; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.stage-close { font-family: var(--f-head); font-weight: var(--w-h3); font-size: var(--fs-s); line-height: var(--lh-head); }
/* questions: native disclosure, so it works with a keyboard and a screen reader without script */
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.25rem; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--sans); font-weight: 500; font-size: 1.75rem; line-height: 1; color: var(--blue); transition: rotate .3s var(--ease); }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { max-width: 60ch; padding-bottom: 1.5rem; color: var(--ink-2); }
.faq details .text-link { margin-left: 0.25rem; color: var(--blue); }
@media (max-width: 68.75em) {
  .helps, .help, .start-here-in, .stage-in { grid-template-columns: 1fr; }
  .stage-head { position: static; }
  .areas-6 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 47.5em) { .reasons, .stage-pair, .areas-6 { grid-template-columns: 1fr; } .reasons, .areas-6 { grid-auto-rows: auto; } } /* stacked, each card keeps its own height */

/* ---- Results (9 Oct), from the Notion copy: the featured story's three parts and its quote, the story filters, the quotes ---- */
.impact-head { margin-block: clamp(3rem, 5vw, 5rem) clamp(2.5rem, 4vw, 4rem); }
.featured-case .label { color: var(--butter); margin-bottom: 1rem; }
.featured-story { display: grid; gap: 1.5rem; margin-bottom: 2rem; max-width: 60ch; }
.featured-story dt { font-family: var(--sans); font-weight: 700; font-size: var(--fs-ui); color: var(--butter); margin-bottom: 0.375rem; }
.featured-story dd { color: color-mix(in srgb, var(--paper) 85%, transparent); line-height: var(--lh-lede); }
.featured-quote { grid-column: 1 / -1; padding-top: clamp(2rem, 4vw, 3.5rem); border-top: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); }
.featured-quote p { font-size: var(--fs-m); line-height: var(--lh-statement); letter-spacing: -.01em; max-width: 40ch; }
.featured-quote figcaption { margin-top: 1.25rem; font-family: var(--sans); font-size: var(--fs-ui); color: color-mix(in srgb, var(--paper) 78%, transparent); }
.featured-quote b { color: var(--paper); }
.case-filters { margin-top: clamp(2rem, 3vw, 2.75rem); }
.case-filters + .sr-only + .case-grid { margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
.case-filters button { font: inherit; border: 0; cursor: pointer; }
.case-filters [aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.case-card .text-link { align-self: flex-start; color: var(--blue); }
.case-card .tags { margin-top: auto; }
div.case-card:hover { background: var(--paper); } /* no full story yet, so no hover */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 4vw, 4rem); }
.quotes p { font-size: var(--fs-s); line-height: var(--lh-statement); letter-spacing: -.01em; }
.quotes figcaption { margin-top: 1rem; font-family: var(--sans); font-weight: 700; font-size: var(--fs-ui); color: var(--ink-2); }

/* ---- HubSpot cookie banner + settings modal, in the site's look (13 Oct). HubSpot sets these variables inline on
   #hs-banner-parent from its own style settings, so !important is what lets ours win. Accept and Decline get equal weight (ICO). */
#hs-banner-parent {
  --hs-banner-font-family: "Cabinet Grotesk", system-ui, sans-serif !important;
  --hs-banner-font-size: 1rem !important;
  --hs-banner-color: var(--ink) !important;
  --hs-banner-text-color: var(--paper) !important;
  --hs-banner-settings-text-color: var(--butter) !important;
  --hs-banner-accent: var(--butter) !important;
  --hs-banner-width: 40rem !important;
  --hs-banner-inset: auto auto 1.5rem 1.5rem !important; /* bottom left, clear of the header (HubSpot's default here was top centre) */
  --hs-banner-padding: 1.75rem !important;
  --hs-banner-corners: var(--r-card) !important;
  --hs-banner-button-corners: var(--r-btn) !important;
  --hs-banner-accept-color: var(--butter) !important; --hs-banner-accept-text-color: var(--ink) !important; --hs-banner-accept-border-color: var(--butter) !important;
  --hs-banner-decline-color: var(--paper) !important; --hs-banner-decline-text-color: var(--ink) !important; --hs-banner-decline-border-color: var(--paper) !important;
  --hs-banner-modal-color: var(--paper) !important;
  --hs-banner-modal-text-color: var(--ink) !important;
  --hs-banner-modal-font-size: 1rem !important;
  --hs-banner-modal-corners: var(--r-card) !important;
  --hs-banner-modal-cateogry-color: var(--lilac-2) !important; /* sic: HubSpot's spelling */
  --hs-banner-modal-category-text-color: var(--ink) !important;
  --hs-banner-modal-category-corners: var(--r-card) !important;
  --hs-banner-modal-toggle-on-color: var(--blue) !important;
  --hs-banner-modal-toggle-off-color: color-mix(in srgb, var(--ink) 40%, transparent) !important;
  --hs-banner-modal-button-corners: var(--r-btn) !important;
  --hs-banner-modal-accept-color: var(--ink) !important; --hs-banner-modal-accept-text-color: var(--paper) !important; --hs-banner-modal-accept-border-color: var(--ink) !important;
  --hs-banner-modal-decline-color: transparent !important; --hs-banner-modal-decline-text-color: var(--ink) !important; --hs-banner-modal-decline-border-color: var(--ink) !important;
  --hs-banner-modal-save-color: transparent !important; --hs-banner-modal-save-text-color: var(--ink) !important; --hs-banner-modal-save-border-color: var(--ink) !important;
}
#hs-banner-parent button { font-weight: 700 !important; }
/* Accept / Decline a size down from HubSpot's default (15 Oct, James: too big); still well over the 24px target minimum */
#hs-eu-confirmation-button, #hs-eu-decline-button { font-size: .875rem !important; line-height: 1.2 !important; padding: .625rem 1.25rem !important; min-height: 0 !important; }
/* Cookies settings, Accept and Decline on one row, as on www.enate.io; phones keep HubSpot's wrap */
@media (min-width: 45em) {
  #hs-eu-cookie-confirmation #hs-eu-confirmation-button-group { flex-wrap: nowrap; align-items: center; gap: 1.25rem; }
  #hs-eu-cookie-confirmation #hs-eu-opt-in-buttons { flex-wrap: nowrap; }
}
#hs-eu-policy-wording a { color: var(--butter) !important; text-decoration: underline !important; text-underline-offset: .2em; white-space: nowrap; }
#hs-banner-parent :focus-visible:not([tabindex="-1"]) { outline: 2px solid var(--butter) !important; outline-offset: 3px !important; }
#hs-modal :focus-visible { outline-color: var(--blue) !important; }