:root {
  --navy: oklch(17% .055 260);
  --navy-2: oklch(23% .09 260);
  --blue: oklch(47% .2 262);
  --blue-bright: oklch(58% .2 256);
  --white: oklch(98% .008 255);
  --mist: oklch(94% .018 255);
  --orange: oklch(68% .19 43);
  --orange-dark: oklch(56% .18 39);
  --orange-pale: oklch(88% .11 67);
  --ink-soft: oklch(40% .04 260);
  --line: oklch(17% .055 260 / .17);
  --line-light: oklch(98% .008 255 / .2);
  --display: "Hanken Grotesk", "Avenir Next", sans-serif;
  --body: "Sora", "Avenir Next", sans-serif;
  --shell: min(1420px, calc(100vw - 72px));
  --pad: max(36px, calc((100vw - 1420px) / 2));
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--white); color: var(--navy); font-family: var(--body); font-size: 16px; line-height: 1.6; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button { color: inherit; }
::selection { background: var(--orange); color: var(--navy); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 10000; top: .8rem; left: .8rem; padding: .8rem 1rem; background: var(--white); color: var(--navy); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.scroll-line { position: fixed; z-index: 5000; inset: 0 0 auto; height: 3px; background: var(--orange); transform: scaleX(0); transform-origin: left; }

.site-header { position: absolute; z-index: 1000; top: 0; left: 50%; width: var(--shell); min-height: 6.5rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; transform: translateX(-50%); color: var(--navy); }
.site-header.is-fixed { position: fixed; width: 100%; min-height: 4.8rem; padding-inline: var(--pad); background: oklch(98% .008 255 / .93); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); animation: header-in .5s var(--ease) both; }
@keyframes header-in { from { transform: translate(-50%, -110%); } to { transform: translate(-50%, 0); } }
.brand { width: max-content; min-width: 44px; min-height: 44px; display: grid; align-content: center; font-family: var(--display); font-size: 1.28rem; font-weight: 700; letter-spacing: -.055em; line-height: .75; text-decoration: none; }
.brand span:last-child { position: relative; }
.brand i { position: absolute; top: .05em; right: -.5em; width: .3em; aspect-ratio: 1; border-radius: 50%; background: var(--orange); }
.primary-nav { display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 3.4rem); }
.primary-nav a, .header-action { min-height: 44px; display: inline-flex; align-items: center; font-size: clamp(.76rem, .72rem + .1vw, .82rem); font-weight: 600; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.primary-nav a { position: relative; }
.primary-nav a::after { content: ""; position: absolute; inset: auto 0 -.55rem; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.primary-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-action { position: relative; justify-self: end; display: flex; align-items: center; gap: .65rem; padding-block: .65rem; }
.header-action::after { content: ""; position: absolute; right: 0; bottom: .35rem; left: 0; height: 1px; background: currentColor; transform: scaleX(.18); transform-origin: right; transition: transform .4s var(--ease); }
.header-action span { color: var(--orange); transition: transform .4s var(--ease); }
.header-action:hover::after { transform: scaleX(1); transform-origin: left; }
.header-action:hover span { transform: translate3d(3px, -3px, 0); }
.menu-button { display: none; border: 0; background: none; }

.eyebrow, .section-label { margin: 0; color: var(--blue); font-size: clamp(.82rem, .72rem + .16vw, .94rem); font-weight: 700; letter-spacing: .105em; line-height: 1.35; text-transform: uppercase; }
.hero { --hero-light: 0; position: relative; min-height: 190svh; background: var(--white); }
.hero-sticky { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: hidden; padding: 8rem var(--pad) 1.5rem; perspective: 1800px; perspective-origin: 60% 45%; }
.hero-copy { --hero-copy-color: var(--navy); --hero-copy-soft: var(--ink-soft); --hero-button-bg: var(--navy); --hero-button-color: var(--white); --copy-halo: transparent; position: relative; z-index: 3; width: min(49rem, 48vw); max-width: 49rem; height: 100%; display: grid; align-content: center; transform-style: preserve-3d; transform-origin: 28% 45%; will-change: transform; }
.hero h1 { margin: 0 0 2rem; color: var(--hero-copy-color); font-family: var(--display); font-size: clamp(4.2rem, 7.25vw, 8.7rem); font-weight: 500; letter-spacing: -.045em; line-height: .81; transform-style: preserve-3d; paint-order: stroke fill; -webkit-text-stroke: 1.5px var(--copy-halo); text-shadow: 0 0 18px var(--copy-halo); }
.hero h1 span { display: block; overflow: hidden; padding-right: .08em; transform-origin: left center; will-change: transform, color; }
.hero h1 em { color: var(--blue); font-style: normal; }
.hero-forward-line { transform-origin: left center; will-change: transform, color, opacity; }
.hero-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.7rem; max-width: 38rem; margin-left: clamp(0rem, 7vw, 7rem); transform-origin: left center; will-change: transform; }
.hero-intro > p { max-width: 57ch; margin: 0; color: var(--hero-copy-soft); font-size: clamp(.92rem, 1vw, 1.05rem); text-shadow: 0 0 8px var(--copy-halo); }
.actions { display: flex; flex-wrap: wrap; gap: 1.1rem 1.8rem; align-items: center; }
.button { min-height: 3.5rem; display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; padding: .8rem .85rem .8rem 1.25rem; border: 0; text-decoration: none; cursor: pointer; font-size: .72rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
.button b { display: grid; place-items: center; color: var(--orange); font-size: 1rem; font-weight: 400; transition: transform .4s var(--ease); }
.button-primary { background: var(--hero-button-bg); color: var(--hero-button-color); }
.button-primary b { color: var(--orange); }
.button:hover b { transform: translate3d(3px, -3px, 0); }
.text-link { display: inline-flex; gap: .8rem; align-items: center; padding: .8rem 0; color: var(--hero-copy-color); font-size: .72rem; font-weight: 600; letter-spacing: .055em; text-decoration-thickness: 1px; text-underline-offset: .45rem; text-transform: uppercase; }
.text-link b { color: var(--orange-dark); font-size: 1rem; }

.home-preview { --home-header-color: var(--white); }
.home-preview .site-header:not(.is-fixed) { color: var(--home-header-color); }
.home-preview .site-header:not(.is-fixed) .header-action span { color: var(--orange); }
.home-preview .hero-copy { --hero-copy-color: transparent; --hero-copy-soft: var(--white); --hero-button-bg: var(--white); --hero-button-color: var(--navy); }
.home-preview .hero h1 { color: var(--white); -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0 transparent; text-shadow: none; }
.home-preview .hero h1 em { color: inherit; font-style: normal; }
.home-preview .text-link { color: var(--hero-copy-color); }
.hero-tone { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: var(--white); pointer-events: none; }
.hero-tone i { position: absolute; display: block; inset: 0; }
.hero-tone i:first-child { opacity: calc(1 - var(--hero-light)); background: radial-gradient(circle at 100% 0%, oklch(47% .19 258 / .72), transparent 32%), var(--navy); }
.hero-tone i:last-child { display: none; }

.proof-rail { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; align-items: center; padding: 1.55rem var(--pad); border-block: 1px solid var(--line); }
.proof-rail p { margin: 0; font-family: var(--display); font-size: 1rem; font-weight: 500; }
.proof-rail ul { display: flex; justify-content: flex-end; gap: clamp(1rem, 3vw, 3.8rem); margin: 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.section-shell { width: var(--shell); margin-inline: auto; }
.premise { display: grid; grid-template-columns: .28fr 1.2fr .38fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; padding-block: clamp(7rem, 12vw, 13rem); }
.premise h2 { max-width: 18ch; margin: -.15em 0 0; font-family: var(--display); font-size: clamp(3.2rem, 6vw, 7rem); font-weight: 500; letter-spacing: -.045em; line-height: .92; }
.premise-note { align-self: end; max-width: 30ch; margin: 0; color: var(--ink-soft); font-size: .92rem; }

.outcomes { min-height: 100svh; display: grid; grid-template-columns: minmax(24rem, .78fr) minmax(0, 1.22fr); background: var(--navy); color: var(--white); }
.outcomes-copy { align-self: center; padding: clamp(5rem, 8vw, 9rem) clamp(2rem, 6vw, 7rem) clamp(5rem, 8vw, 9rem) var(--pad); }
.outcomes .section-label { color: var(--orange); }
.outcomes h2 { margin: 1.4rem 0 clamp(3rem, 6vw, 6rem); font-family: var(--display); font-size: clamp(3.4rem, 5.7vw, 6.8rem); font-weight: 500; letter-spacing: -.045em; line-height: .87; }
.outcome-tabs { display: grid; }
.outcome-tabs button { display: grid; grid-template-columns: 2.3rem 1fr; gap: .25rem 1rem; min-height: 6.6rem; padding: 1.35rem 0; border: 0; border-top: 1px solid var(--line-light); background: transparent; color: oklch(98% .008 255 / .52); text-align: left; cursor: pointer; transition: color .3s, padding-left .4s var(--ease); }
.outcome-tabs button:last-child { border-bottom: 1px solid var(--line-light); }
.outcome-tabs button[aria-selected="true"] { padding-left: 1rem; color: var(--white); }
.outcome-tabs button span { grid-row: 1 / span 2; padding-top: .15rem; color: var(--orange-pale); font-size: .7rem; letter-spacing: .08em; }
.outcome-tabs b { font-family: var(--display); font-size: clamp(1.7rem, 2.4vw, 2.7rem); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.outcome-tabs small { font-size: .75rem; }
.outcome-visual { position: relative; min-height: 100svh; overflow: hidden; background: var(--blue); }
.outcome-frame { position: absolute; inset: 0; opacity: 0; transform: scale(1.025); transition: opacity .65s var(--ease), transform 1.2s var(--ease); }
.outcome-frame.is-active { opacity: 1; transform: none; }
.outcome-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); }
.outcome-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, oklch(12% .05 260 / .88)); }
.outcome-frame > div { position: absolute; z-index: 2; right: clamp(1.5rem, 4vw, 4rem); bottom: clamp(1.5rem, 4vw, 4rem); left: clamp(1.5rem, 4vw, 4rem); display: flex; justify-content: space-between; gap: 2rem; align-items: end; }
.outcome-frame span { color: var(--orange-pale); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.outcome-frame strong { max-width: 10ch; font-family: var(--display); font-size: clamp(2rem, 4vw, 5rem); font-weight: 500; letter-spacing: -.045em; line-height: .9; text-align: right; }

.studies { padding-block: clamp(7rem, 11vw, 12rem); }
.section-intro { display: grid; grid-template-columns: .3fr 1fr .45fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; margin-bottom: clamp(5rem, 8vw, 8rem); }
.section-intro h2 { max-width: 14ch; margin: -.15em 0 0; font-family: var(--display); font-size: clamp(3.2rem, 5.7vw, 6.6rem); font-weight: 500; letter-spacing: -.045em; line-height: .9; }
.section-intro > p:last-child { align-self: end; max-width: 36ch; margin: 0; color: var(--ink-soft); }
.study-list { display: grid; gap: clamp(6rem, 12vw, 13rem); }
.study { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr); gap: clamp(2rem, 5vw, 6rem); align-items: end; }
.study-two { grid-template-columns: minmax(18rem, .55fr) minmax(0, 1.45fr); }
.study-two .study-media { grid-column: 2; }
.study-two .study-meta { grid-column: 1; grid-row: 1; }
.study-three { width: 82%; }
.study-media { position: relative; display: block; overflow: hidden; aspect-ratio: 1.5; background: var(--navy); }
.study-two .study-media { aspect-ratio: 1.25; }
.study-three .study-media { aspect-ratio: 1.75; }
.study-media::after { content: ""; position: absolute; inset: 0; background: oklch(17% .055 260 / .08); transition: background-color .5s; }
.study-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transition: transform 1.1s var(--ease), filter .6s; }
.study-media span { position: absolute; z-index: 2; right: 1.3rem; bottom: 1.3rem; padding: .7rem .9rem; background: var(--white); color: var(--navy); font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; transform: translateY(5rem); transition: transform .5s var(--ease); }
.study-media:hover img { transform: scale(1.035); filter: saturate(.95); }
.study-media:hover span { transform: none; }
.study-media:hover::after { background: transparent; }
.study-meta { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.study-meta p { margin: 0 0 1.3rem; color: var(--orange-dark); font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.study-meta h3 { margin: 0 0 .8rem; font-family: var(--display); font-size: clamp(2.2rem, 3.4vw, 4rem); font-weight: 500; letter-spacing: -.045em; line-height: .95; }
.study-meta > span { display: block; max-width: 37ch; color: var(--ink-soft); font-size: .83rem; }

.engagement { padding-block: clamp(7rem, 11vw, 12rem); background: var(--mist); }
.engagement-head { display: grid; grid-template-columns: .3fr 1fr .45fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.engagement-head h2 { max-width: 12ch; margin: -.15em 0 0; font-family: var(--display); font-size: clamp(3.3rem, 6vw, 7rem); font-weight: 500; letter-spacing: -.045em; line-height: .87; }
.engagement-head > p:last-child { align-self: end; max-width: 35ch; margin: 0; color: var(--ink-soft); }
.capabilities { margin-top: clamp(5rem, 9vw, 9rem); }
.capabilities ol { margin: 0; padding: 0; list-style: none; }
.capabilities li { display: grid; grid-template-columns: 4rem minmax(14rem, .55fr) 1fr; gap: 2rem; align-items: start; padding: 1.8rem 0; border-top: 1px solid var(--line); }
.capabilities li:last-child { border-bottom: 1px solid var(--line); }
.capabilities li > span { padding-top: .25rem; color: var(--blue); font-size: .7rem; font-weight: 600; letter-spacing: .08em; }
.capabilities h3 { margin: 0; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.capabilities p { max-width: 57ch; margin: .1rem 0 0; color: var(--ink-soft); }

.deliverables { display: grid; grid-template-columns: .8fr 1fr; gap: clamp(4rem, 9vw, 10rem); padding-block: clamp(7rem, 11vw, 12rem); }
.deliverables h2 { max-width: 12ch; margin: 1.3rem 0 0; font-family: var(--display); font-size: clamp(3.2rem, 5.7vw, 6.4rem); font-weight: 500; letter-spacing: -.045em; line-height: .9; }
.deliverables ul { align-self: end; margin: 0; padding: 0; list-style: none; }
.deliverables li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.35rem 0; border-top: 1px solid var(--line); font-family: var(--display); font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 500; letter-spacing: -.025em; }
.deliverables li:last-child { border-bottom: 1px solid var(--line); }
.deliverables li span { padding-top: .35rem; color: var(--orange-dark); font-family: var(--body); font-size: .7rem; letter-spacing: .08em; }

.process { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; background: var(--navy); color: var(--white); }
.process-image { position: sticky; top: 0; height: 100svh; margin: 0; overflow: hidden; }
.process-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 65%, oklch(17% .055 260 / .42)); }
.process-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.62) contrast(1.08); transform: scale(1.07); will-change: transform; }
.process-copy { padding: clamp(6rem, 9vw, 10rem) var(--pad) clamp(6rem, 9vw, 10rem) clamp(3rem, 7vw, 8rem); }
.process .section-label { color: var(--orange); }
.process h2 { max-width: 12ch; margin: 1.3rem 0 clamp(4rem, 8vw, 8rem); font-family: var(--display); font-size: clamp(3.3rem, 5.7vw, 6.8rem); font-weight: 500; letter-spacing: -.045em; line-height: .89; }
.process ol { margin: 0; padding: 0; list-style: none; }
.process li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 2rem 0; border-top: 1px solid var(--line-light); }
.process li:last-child { border-bottom: 1px solid var(--line-light); }
.process li > span { color: var(--orange-pale); font-size: .7rem; font-weight: 600; letter-spacing: .08em; }
.process h3 { margin: -.4rem 0 .45rem; font-family: var(--display); font-size: clamp(1.8rem, 2.8vw, 3rem); font-weight: 500; letter-spacing: -.04em; }
.process li p { max-width: 48ch; margin: 0; color: oklch(90% .02 255); font-size: .85rem; }

.technology-bridge { display: grid; grid-template-columns: .45fr 1fr auto; gap: 3rem; align-items: center; padding: 2.2rem var(--pad); border-bottom: 1px solid var(--line); background: var(--mist); }
.technology-bridge p { margin: 0; color: var(--blue); font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.technology-bridge div { display: grid; gap: .25rem; }
.technology-bridge strong { font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.8rem); font-weight: 500; letter-spacing: -.03em; }
.technology-bridge span { color: var(--ink-soft); font-size: .75rem; }
.technology-bridge a { min-height: 44px; display: inline-flex; align-items: center; font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-underline-offset: .4rem; text-transform: uppercase; }

.review { min-height: 100svh; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(4rem, 9vw, 10rem); align-content: center; padding: clamp(7rem, 11vw, 12rem) var(--pad) 2.2rem; background: var(--blue); color: var(--white); }
.review .section-label { color: var(--orange-pale); }
.review-copy h2 { max-width: 11ch; margin: 1.4rem 0 1.8rem; font-family: var(--display); font-size: clamp(3.7rem, 6.8vw, 8rem); font-weight: 500; letter-spacing: -.045em; line-height: .84; }
.review-copy > p:not(.section-label) { max-width: 48ch; margin: 0; color: oklch(94% .018 255); }
.review-direct { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.review-direct a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: .4rem; }
.review-form { align-self: center; display: grid; gap: 1.4rem; padding: clamp(1.8rem, 4vw, 4rem); background: var(--white); color: var(--navy); }
.review-form label { display: grid; gap: .55rem; }
.review-form label > span { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.review-form input, .review-form textarea { width: 100%; min-height: 3.2rem; padding: .8rem 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--navy); resize: vertical; }
.review-form input::placeholder, .review-form textarea::placeholder { color: oklch(55% .03 260); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.button-orange { justify-self: start; margin-top: .5rem; background: var(--orange); color: var(--navy); }
.button-orange b { color: var(--navy); }
.review-form small { color: var(--ink-soft); font-size: .75rem; }
.site-footer { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto auto; gap: 2rem; align-items: end; margin-top: clamp(5rem, 10vw, 10rem); padding-top: 1.5rem; border-top: 1px solid oklch(98% .008 255 / .35); font-size: .72rem; }
.site-footer > a:not(.brand) { min-height: 44px; display: inline-flex; align-items: center; }
.brand-light { color: var(--white); }

.preview-edit-toggle { position: fixed; z-index: 3000; right: 1rem; bottom: 1rem; min-width: 4.5rem; min-height: 2.8rem; border: 1px solid var(--white); border-radius: 999px; background: var(--navy); color: var(--white); cursor: pointer; font-size: .6rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.preview-editor { position: fixed; z-index: 4000; inset: 0 0 0 auto; width: min(31rem, 95vw); display: none; overflow-y: auto; padding: 2rem; background: var(--white); color: var(--navy); box-shadow: -8px 0 0 var(--orange); }
.preview-editor.is-open { display: block; animation: editor-in .5s var(--ease) both; }
@keyframes editor-in { from { opacity: 0; transform: translateX(100%); } }
.preview-editor-head { display: flex; justify-content: space-between; gap: 1rem; }
.preview-editor h2 { margin: .5rem 0 1.5rem; font-family: var(--display); font-size: 2.7rem; font-weight: 500; letter-spacing: -.05em; line-height: .9; }
.preview-editor-head button, .preview-editor-actions button { min-height: 2.8rem; padding: .6rem .9rem; border: 1px solid var(--navy); background: transparent; cursor: pointer; }
.preview-editor label { display: grid; gap: .4rem; margin-top: 1.1rem; font-size: .64rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.preview-editor input, .preview-editor textarea { width: 100%; padding: .85rem; border: 1px solid var(--line); background: var(--mist); color: var(--navy); resize: vertical; }
.preview-editor-actions { display: flex; gap: .8rem; margin-top: 1.5rem; }
.preview-editor-actions button:first-child { background: var(--blue); color: var(--white); }

[data-reveal] { opacity: 1; transform: none; }
.has-motion [data-reveal] { opacity: 0; transform: translateY(28px); }
.has-motion [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity .75s var(--ease), transform .85s var(--ease); }

@media (min-width: 781px) and (max-height: 800px) {
  .hero h1 { margin-bottom: 1.4rem; font-size: clamp(3.8rem, 6vw, 5.6rem); }
  .hero-intro { gap: 1rem; }
  .hero-intro > p { font-size: .88rem; }
}

@media (max-width: 1120px) {
  :root { --shell: calc(100vw - 40px); --pad: 20px; }
  .site-header { grid-template-columns: 1fr auto; }
  .primary-nav { position: fixed; z-index: -1; inset: 0; min-height: 100svh; flex-direction: column; justify-content: center; align-items: flex-start; gap: .7rem; padding: 6rem 2rem 2rem; background: var(--navy); color: var(--white); opacity: 0; visibility: hidden; transform: translateY(-2rem); transition: opacity .3s, transform .45s var(--ease), visibility .3s; }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .primary-nav a { font-family: var(--display); font-size: clamp(2.6rem, 8vw, 5.5rem); font-weight: 500; letter-spacing: -.05em; text-transform: none; }
  .header-action { display: none; }
  .menu-button { z-index: 2; justify-self: end; min-width: 3rem; min-height: 3rem; display: flex; align-items: center; gap: .7rem; padding: .7rem; cursor: pointer; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  .menu-button i, .menu-button i::after { width: 1.2rem; height: 2px; display: block; background: currentColor; transition: transform .3s; }
  .menu-button i { position: relative; }
  .menu-button i::after { content: ""; position: absolute; top: .36rem; }
  .menu-button[aria-expanded="true"] { color: var(--white); }
  .menu-button[aria-expanded="true"] i { transform: rotate(45deg); }
  .menu-button[aria-expanded="true"] i::after { top: 0; transform: rotate(-90deg); }
  .hero-sticky { padding-top: 8rem; }
  .hero-copy { width: min(45rem, 56vw); }
  .hero h1 { font-size: clamp(3.8rem, 7.7vw, 6rem); }
  .hero-intro { margin-left: 0; }
  .proof-rail { grid-template-columns: 1fr; gap: 1rem; }
  .proof-rail ul { justify-content: flex-start; flex-wrap: wrap; }
  .premise, .section-intro, .engagement-head { grid-template-columns: .25fr 1fr; }
  .premise-note, .section-intro > p:last-child, .engagement-head > p:last-child { grid-column: 2; }
  .study-three { width: 100%; }
  .process-copy { padding-inline: 3rem 20px; }
  .technology-bridge { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 780px) {
  .site-header { min-height: 5.5rem; }
  .site-header.is-fixed { min-height: 4.4rem; }
  .hero { min-height: 148svh; }
  .hero-sticky {
    position: sticky;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
    padding: 5.75rem var(--pad) calc(var(--mobile-dock-height, 4.15rem) + var(--mobile-dock-bottom, .625rem) + 1.35rem);
    perspective-origin: 50% 48%;
  }
  .hero-copy { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; min-height: 0; }
  .hero h1 { margin-bottom: 1.45rem; font-size: clamp(3.6rem, 16vw, 6.4rem); line-height: .83; }
  .hero-intro { gap: 1.4rem; }
  .hero-intro .actions { position: relative; z-index: 2; min-width: 0; }
  .scroll-cue { top: auto; right: var(--pad); bottom: calc(var(--mobile-dock-height, 4.15rem) + var(--mobile-dock-bottom, .625rem) + 1rem); }
  .proof-rail { padding-block: 1.3rem; }
  .proof-rail ul { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem 1rem; }
  .premise { grid-template-columns: 1fr; gap: 2rem; padding-block: 7rem; }
  .premise h2 { margin-top: 0; font-size: clamp(3.2rem, 14vw, 5rem); }
  .premise-note { grid-column: auto; }
  .outcomes { min-height: auto; grid-template-columns: 1fr; }
  .outcomes-copy { padding: 6rem 20px 3rem; }
  .outcomes h2 { margin-bottom: 3rem; font-size: clamp(3.2rem, 14vw, 5.2rem); }
  .outcome-visual { min-height: 74svh; }
  .outcome-frame > div { display: grid; }
  .outcome-frame strong { text-align: left; }
  .section-intro, .engagement-head { grid-template-columns: 1fr; gap: 2rem; }
  .section-intro h2, .engagement-head h2 { margin-top: 0; font-size: clamp(3.2rem, 14vw, 5.2rem); }
  .section-intro > p:last-child, .engagement-head > p:last-child { grid-column: auto; }
  .study-list { gap: 6rem; }
  .study, .study-two { grid-template-columns: 1fr; gap: 1.5rem; }
  .study-two .study-media, .study-two .study-meta { grid-column: auto; grid-row: auto; }
  .study-media, .study-two .study-media, .study-three .study-media { aspect-ratio: .85; }
  .study-media img { object-position: center; }
  .study-media span { transform: none; }
  .capabilities li { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
  .capabilities p { grid-column: 2; }
  .deliverables { grid-template-columns: 1fr; gap: 4rem; }
  .deliverables h2 { font-size: clamp(3.2rem, 14vw, 5.2rem); }
  .process { grid-template-columns: 1fr; }
  .process-image { position: relative; height: 72svh; }
  .process-copy { padding: 6rem 20px; }
  .process h2 { font-size: clamp(3.2rem, 14vw, 5.2rem); }
  .review { grid-template-columns: 1fr; padding-top: 7rem; }
  .review-copy h2 { font-size: clamp(3.5rem, 15vw, 6rem); }
  .review-form { padding: 1.4rem; }
  .site-footer { grid-template-columns: 1fr 1fr; align-items: start; }
}

@media (max-width: 440px) {
  :root { --shell: calc(100vw - 28px); --pad: 14px; }
  .hero-sticky { padding-top: 5.4rem; }
  .hero h1 { font-size: clamp(3.3rem, 15.8vw, 4.3rem); }
  .actions { align-items: stretch; }
  .button-primary { width: 100%; }
  .hero-intro { gap:1rem; }
  .hero-intro > p { font-size:.86rem; line-height:1.55; }
  .hero-intro .actions { gap:.5rem; }
  .hero-intro .text-link { min-height: 2.75rem; padding-block: .55rem; }
  .hero-intro .text-link b,.hero-intro .button b { display:none; }
  .scroll-cue span { display: none; }
  .proof-rail ul { grid-template-columns: 1fr; }
  .outcome-tabs button { min-height: 6.2rem; }
  .outcome-frame strong { font-size: 2.3rem; }
  .capabilities li { grid-template-columns: 2rem 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .review-form .button { width: 100%; }
  .site-footer { grid-template-columns: 1fr; gap: .7rem; }
}

/* Short phones need their own vertical composition so the conversion actions
   never disappear behind the persistent bottom navigation. */
@media (max-width: 780px) and (max-height: 740px) {
  .hero-sticky {
    padding-top: 4.8rem;
    padding-bottom: calc(var(--mobile-dock-height, 4.15rem) + var(--mobile-dock-bottom, .35rem) + .8rem);
  }
  .hero h1 { margin-bottom: .9rem; font-size: clamp(2.75rem, 13.5vw, 3.65rem); line-height: .84; }
  .hero-intro { gap: .55rem; }
  .hero-intro > p { font-size: .78rem; line-height: 1.42; }
  .hero-intro .actions { gap: .25rem; }
  .hero-intro .button { min-height: 3rem; padding-block: .62rem; }
  .hero-intro .text-link { min-height: 2.45rem; padding-block: .4rem; }
}

@media (max-width: 360px) and (max-height: 620px) {
  .hero-sticky { padding-top: 4.35rem; }
  .hero h1 { font-size: clamp(2.45rem, 12.8vw, 3rem); }
  .hero-intro > p { font-size: .73rem; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .has-motion [data-reveal] { opacity: 1; transform: none; }
  .hero { min-height: 100svh; --hero-light: 1; }
  .hero-copy { opacity: 1 !important; filter: none !important; transform: none !important; }
  .home-preview .hero h1 { color: var(--navy); -webkit-text-fill-color: var(--navy); -webkit-text-stroke: 0 transparent; }
  .home-preview .hero h1 span:nth-child(2), .home-preview .hero h1 em { color: var(--blue); -webkit-text-fill-color: var(--blue); }
  .home-preview .hero-copy { --hero-copy-color: var(--navy); --hero-copy-soft: var(--ink-soft); --hero-button-bg: var(--navy); --hero-button-color: var(--white); }
  .process-image img { transform: none !important; }
}

/* Match the internal-page floating header only after the home hero. */
.site-header.is-fixed { top: .75rem; width: min(1180px, calc(100vw - 2rem)); min-height: 4.35rem; padding-inline: 1.35rem; border: 1px solid rgba(255,255,255,.68); border-radius: 999px; background: rgba(247,249,252,.88); box-shadow: 0 14px 40px rgba(5,20,46,.08); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.site-header.is-fixed .brand { font-size: 1.18rem; line-height: .76; letter-spacing: -.055em; }
.site-header.is-fixed .primary-nav { justify-self: center; gap: clamp(1.1rem,2.5vw,2.8rem); }
.site-header.is-fixed .primary-nav a, .site-header.is-fixed .header-action { min-height: 44px; font-size: clamp(.76rem, .72rem + .1vw, .82rem); font-weight: 700; }
@media (min-width:1121px) { .site-header.is-fixed { grid-template-columns: auto 1fr auto; } }
@media (max-width:1120px) { .site-header.is-fixed { top: .5rem; width: calc(100vw - 1rem); padding-inline: 1rem; } }

/* Restrained liquid-glass material for the scrolled navigation island. */
.site-header.is-fixed {
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(255,255,255,.82);
  background:
    radial-gradient(circle at 14% -55%, rgba(255,255,255,.95), transparent 44%),
    radial-gradient(circle at 82% 160%, rgba(93,149,255,.24), transparent 48%),
    linear-gradient(118deg, rgba(255,255,255,.72), rgba(231,240,255,.46) 48%, rgba(255,255,255,.62));
  box-shadow: 0 18px 55px rgba(5,20,46,.12), inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(97,130,186,.12);
  backdrop-filter: blur(28px) saturate(185%);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
}
.site-header.is-fixed::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(255,255,255,.58), transparent 28%, rgba(151,190,255,.12) 62%, rgba(255,255,255,.4));
  pointer-events: none;
}
.site-header.is-fixed > * { z-index: 1; }

/* Compact, lower-opacity glass island after the hero. */
@media (min-width: 761px) {
  .site-header.is-fixed {
    top: .55rem;
    width: min(1040px, calc(100vw - 1.5rem));
    min-height: 3.75rem;
    padding-inline: 1rem;
    border-color: rgba(255,255,255,.68);
    background:
      radial-gradient(circle at 13% -70%, rgba(255,255,255,.72), transparent 42%),
      radial-gradient(circle at 82% 165%, rgba(92,145,244,.16), transparent 48%),
      linear-gradient(118deg, rgba(255,255,255,.46), rgba(226,237,255,.28) 52%, rgba(255,255,255,.4));
    box-shadow: 0 12px 36px rgba(5,20,46,.08), inset 0 1px 0 rgba(255,255,255,.82), inset 0 -1px 0 rgba(97,130,186,.08);
    backdrop-filter: blur(30px) saturate(170%);
    -webkit-backdrop-filter: blur(30px) saturate(170%);
  }
  .site-header.is-fixed::before { background: linear-gradient(105deg, rgba(255,255,255,.36), transparent 30%, rgba(151,190,255,.08) 68%, rgba(255,255,255,.24)); }
  .site-header.is-fixed .brand { font-size: 1.05rem; }
  .site-header.is-fixed .primary-nav { gap: clamp(.8rem,2vw,2rem); }
  .site-header.is-fixed .primary-nav a,
  .site-header.is-fixed .header-action { font-size: clamp(.7rem,.68rem + .08vw,.76rem); }
}