/* The home page, loaded after site.css on / only (home/index).

   The hero is a scroll story, one step for each door (home/_story,
   home/story.js). The sculpture lands the page; as the first step starts its
   three tiers come apart and it fades, and a line drawing for each door
   (home/_sheet) carries the story, in the door's hue: amber apps, cyan
   consultancy, coral industrial AI, violet data.

   Motion is opt-in twice: story.js adds .motion to <html> only when the
   visitor has not asked for reduced motion, and every entrance below keys off
   that class or its own media query. Without JavaScript the page is complete
   and static. */

@property --lb { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --la { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --lf { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --spread { syntax: "<number>"; inherits: true; initial-value: 1; }

:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-settle: cubic-bezier(.16, 1, .3, 1); }
html:has(.story) { scroll-behavior: smooth; }
[data-offer="small-business"] { --tone: var(--neon-amber); }
[data-offer="consultancy"] { --tone: var(--neon-cyan); }
[data-offer="industrial-ai"] { --tone: #ff9478; }
[data-offer="data"] { --tone: var(--neon-violet); }

/* The drafting table the page sits on: a dot grid, lit where the pointer is. */
.atmosphere { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, #ecd8bf30 1px, transparent 1.5px); background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(circle 520px at var(--mx, 72%) var(--my, 42%), #000, #0008 40%, transparent 78%);
  mask-image: radial-gradient(circle 520px at var(--mx, 72%) var(--my, 42%), #000, #0008 40%, transparent 78%); }
.atmosphere::after { content: ""; position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------------ Story */

main > section.story { border-top: 0; padding: 0; position: relative; display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); column-gap: clamp(24px, 3vw, 56px); }
.story-intro, .story-step { grid-column: 1; min-width: 0; }
.story-intro { grid-row: 1; }
#story-small-business { grid-row: 2; }
#story-consultancy { grid-row: 3; }
#story-industrial-ai { grid-row: 4; }
#story-data { grid-row: 5; }
.story-stage-wrap { grid-column: 2; grid-row: 1 / 6; min-width: 0; position: relative; }

.story-intro { min-height: calc(100vh - 94px); min-height: calc(100svh - 94px); display: flex; flex-direction: column; justify-content: center; padding: 24px 0 88px; }
.story-intro .eyebrow { color: #b7aca1; letter-spacing: .14em; }
.story-intro h1 { font-size: clamp(64px, 7.3vw, 120px); line-height: .95; font-weight: 450; letter-spacing: -.066em; margin-top: 6px; }
.story-intro h1 .line { display: block; overflow: hidden; padding: 0 .06em .07em 0; margin-bottom: -.07em; }
.story-intro h1 .line > span { display: inline-block; }
.story-intro .fit { position: relative; color: #f0d6b5; text-shadow: 0 0 60px #e9c29430; }
/* A dimension line under "made to fit.": the drafting table's measure. */
.story-intro .fit::after { content: ""; position: absolute; left: .02em; right: .38em; bottom: -.02em; height: 9px;
  border: solid #e9c29466; border-width: 0 1px; background: linear-gradient(#e9c29466, #e9c29466) 0 50% / 100% 1px no-repeat; }
.story-lede { margin: 30px 0 0; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.6; color: var(--soft); max-width: 420px; }
.story-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 34px; }
.story-link { font-size: 14px; color: #ccc6bf; display: inline-flex; gap: 12px; padding: 12px 0; }
.story-link:hover { color: var(--ink); }
.story-link span { transition: transform .3s var(--ease-out); }
.story-link:hover span { transform: translateY(3px); }
.story-step .story-link { font-size: 15px; color: color-mix(in srgb, var(--tone) 70%, #fff); border-bottom: 1px dashed color-mix(in srgb, var(--tone) 50%, transparent); padding: 4px 0; }
.story-step .story-link:hover span { transform: translate(3px, -3px); }
.story-cue { display: flex; align-items: center; gap: 16px; margin: 64px 0 0; font-size: 12px; color: #a59c94; letter-spacing: .01em; }
.story-cue span { position: relative; width: 1px; height: 42px; background: #b39c7738; overflow: hidden; }
.story-cue span::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: linear-gradient(transparent, #f0d6b5); animation: cue-fall 2.4s var(--ease-out) infinite; }

.story-step { display: flex; align-items: center; min-height: 92vh; min-height: 92svh; padding: 60px 0; }
.story-step > div { max-width: 540px; }
.story-label { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font: 500 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; color: var(--tone, var(--accent)); }
.story-label i { width: 22px; height: 1px; background: currentColor; box-shadow: 0 0 10px currentColor; }
.story-step h2 { font-size: clamp(36px, 3.7vw, 58px); line-height: 1.03; letter-spacing: -.048em; font-weight: 450; }
.story-step h2 em { display: block; color: color-mix(in srgb, var(--tone, var(--accent)) 55%, #fff); }
.story-step p:not(.story-label) { font-size: 17px; line-height: 1.7; color: var(--soft); margin: 24px 0 0; max-width: 480px; }
.story.is-live :is(.story-intro, .story-step) > * { transition: opacity .6s ease; }
.story.is-live .story-step > div { opacity: .22; }
.story.is-live[data-step="1"] #story-small-business > div, .story.is-live[data-step="2"] #story-consultancy > div,
.story.is-live[data-step="3"] #story-industrial-ai > div, .story.is-live[data-step="4"] #story-data > div { opacity: 1; }

/* The stage. The model is square; tiers are full-size slices of one image. */
.story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; padding: 24px 0 30px; }
.model { --lb: 0%; --la: 0%; --lf: 0%; --spread: 1; position: relative; width: min(100%, calc(100vh - 210px), 780px); width: min(100%, calc(100svh - 210px), 780px); aspect-ratio: 1;
  transform: scale(var(--spread)); transition: --lb 1.2s var(--ease-settle), --la 1.2s var(--ease-settle), --lf 1.2s var(--ease-settle), --spread 1.2s var(--ease-settle), opacity .7s ease, filter .7s ease; }
/* Past the intro the tiers come apart as the sculpture fades, and the sheet takes over. */
.story:not([data-step="0"]) .model { --lb: -10%; --la: 0%; --lf: 6%; --spread: .86; opacity: 0; filter: blur(6px); }

/* Only as wide as the model (its glow fades out well inside), so it never
   reaches past a narrow screen's edge. */
.model-halo { position: absolute; inset: -8% 0; pointer-events: none;
  background: radial-gradient(ellipse 48.7% 36% at 50% 56%, #e9c29417, transparent 70%), radial-gradient(ellipse 34.8% 8% at 50% 94%, #00000080, transparent 70%); }

.tier { position: absolute; inset: 0; pointer-events: none; }
.tier[data-tier="business"] { transform: translate3d(0, var(--lb), 0); }
.tier[data-tier="app"] { transform: translate3d(0, var(--la), 0); }
.tier[data-tier="foundation"] { transform: translate3d(0, var(--lf), 0); }
.tier-body { position: absolute; inset: 0; }
/* The artwork's background is cut to transparency in the WebP itself, so the
   page shows through around the object and between the tiers. */
.tier-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; clip-path: var(--cut); }
/* The cuts follow each tier's lower edge, measured on the 1254px artwork. The
   upper slice overlaps the one below by a hair so no seam shows at rest. */
.tier[data-tier="business"] { --cut: polygon(0 0, 100% 0, 100% 25.9%, 89.8% 25.9%, 49.2% 43.15%, 10.05% 25.75%, 0 25.75%); }
.tier[data-tier="app"] { --cut: polygon(0 25.52%, 10.05% 25.52%, 49.2% 42.9%, 89.8% 25.68%, 100% 25.68%, 100% 45.4%, 92.98% 45.4%, 49.44% 65.95%, 7.66% 46.5%, 0 46.5%); }
.tier[data-tier="foundation"] { --cut: polygon(0 46.25%, 7.66% 46.25%, 49.44% 65.71%, 92.98% 45.14%, 100% 45.14%, 100% 100%, 0 100%); }

/* Lit nodes breathe in place. */
.node { position: absolute; left: calc(var(--x) / 1254 * 100%); top: calc(var(--y) / 1254 * 100%); width: 2.4%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #f2feff 0 14%, #7deaff99 32%, #4df3ff00 70%); opacity: 0; mix-blend-mode: screen; }

/* The light that joins the tiers; it stretches as they separate. */
.model-beam { position: absolute; left: 48.95%; width: 3px; margin-left: -1.5px; top: calc(24.6% + var(--lb)); height: calc(45.6% - var(--lb) + var(--lf)); overflow: hidden; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(#7feaff00, #7feaff66 12%, #7feaff55 88%, #7feaff00); filter: drop-shadow(0 0 6px #4df3ff); opacity: .55; transition: opacity .8s; }
.model-beam i { position: absolute; inset: 0; background: linear-gradient(#fff0 0 40%, #f2feff 50%, #fff0 60% 100%); }
.story:not([data-step="0"]) .model-beam { opacity: 1; }

/* The rail: which door you are reading about, and a way to jump. */
.story-rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; width: min(660px, 92%); position: relative; z-index: 1; }
.story-rail > div:first-child { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid #c7b19b29; align-self: end; }
.story-rail a { position: relative; font-size: 13px; color: #8f8c95; padding: 16px 4px 4px; min-height: 44px; transition: color .4s; }
.story-rail a span { font: 9px ui-monospace, Menlo, monospace; margin-right: 8px; color: var(--tone); }
.story-rail a::before { content: ""; position: absolute; top: -1px; left: 0; right: 18px; height: 1px; background: var(--tone); box-shadow: 0 0 12px var(--tone); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-settle); }
.story-rail a:hover { color: var(--ink); }
/* Step by step, for anyone who would rather tap than scroll. Shown by story.js. */
.story-turn { display: flex; gap: 6px; align-self: end; }
.story-turn[hidden] { display: none; }
.story-turn button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #c7b19b3d; background: #0d0d12cc; color: var(--ink); font-size: 15px; cursor: pointer; transition: border-color .3s, background .3s, opacity .3s; }
.story-turn button:hover:not(:disabled) { border-color: var(--accent); background: #1a1720; }
.story-turn button:disabled { opacity: .3; cursor: default; }
.story[data-focus="small-business"] .story-rail [data-offer="small-business"], .story[data-focus="consultancy"] .story-rail [data-offer="consultancy"],
.story[data-focus="industrial-ai"] .story-rail [data-offer="industrial-ai"], .story[data-focus="data"] .story-rail [data-offer="data"] { color: var(--ink); }
.story[data-focus="small-business"] .story-rail [data-offer="small-business"]::before, .story[data-focus="consultancy"] .story-rail [data-offer="consultancy"]::before,
.story[data-focus="industrial-ai"] .story-rail [data-offer="industrial-ai"]::before, .story[data-focus="data"] .story-rail [data-offer="data"]::before { transform: none; }

/* ------------------------------------------------------------------ Sheet */

/* The sculpture and the sheet share one cell. Without JavaScript data-step
   stays 0, so the sculpture alone shows. */
.stage-art { display: grid; place-items: center; width: 100%; min-height: 0; }
.stage-art > * { grid-area: 1 / 1; }

/* The sheet (home/_sheet): four line drawings laid out two by two. Each step
   scales its drawing up from its own corner to fill the sheet; the others
   fade. Labels appear once a drawing is forward. */
.sheet { position: relative; width: min(100%, calc(100vh - 210px), 720px); width: min(100%, calc(100svh - 210px), 720px); aspect-ratio: 1; transition: opacity .6s ease .35s; }
.story[data-step="0"] .sheet { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
.sheet-panel { position: absolute; width: 50%; height: 50%; padding: 1.2%; transition: transform 1.1s var(--ease-settle), opacity .6s ease; }
.sheet-panel:nth-child(1) { left: 0; top: 0; transform-origin: 0 0; }
.sheet-panel:nth-child(2) { right: 0; top: 0; transform-origin: 100% 0; }
.sheet-panel:nth-child(3) { left: 0; bottom: 0; transform-origin: 0 100%; }
.sheet-panel:nth-child(4) { right: 0; bottom: 0; transform-origin: 100% 100%; }
.sheet-frame { position: relative; height: 100%; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--neon) 16%, #25232e);
  background: radial-gradient(ellipse 70% 60% at 50% 55%, color-mix(in srgb, var(--neon) 9%, transparent), transparent 75%), linear-gradient(180deg, #121219e6, #0c0c11e6);
  box-shadow: 0 1px 0 #ffffff0d inset, 0 30px 60px -30px #000; }
.sheet svg { position: absolute; inset: 8% 6% 4%; width: 88%; height: 88%; color: var(--neon); overflow: visible; }

.sheet-panel { opacity: 0; transform: scale(.94); }
.story[data-focus="small-business"] .sheet-panel[data-offer="small-business"], .story[data-focus="consultancy"] .sheet-panel[data-offer="consultancy"],
.story[data-focus="industrial-ai"] .sheet-panel[data-offer="industrial-ai"], .story[data-focus="data"] .sheet-panel[data-offer="data"] { opacity: 1; transform: scale(2); z-index: 1; }

/* The drawing kit: one stroke weight, the door's hue, a dark fill. */
.sheet svg * { vector-effect: non-scaling-stroke; }
.d-faint { stroke: currentColor; stroke-opacity: .16; stroke-dasharray: 2 6; }
.d-line path { stroke: currentColor; stroke-opacity: .5; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.d-line .d-dash { stroke-dasharray: 5 6; }
.d-station :is(rect, circle, ellipse, path) { stroke: currentColor; stroke-opacity: .7; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.d-station :is(rect, circle) { fill: color-mix(in srgb, currentColor 7%, #111116); }
.d-core :is(path, ellipse) { stroke: currentColor; stroke-width: 1.6; fill: color-mix(in srgb, currentColor 12%, #111116); filter: drop-shadow(0 0 10px color-mix(in srgb, currentColor 55%, transparent)); }
.d-core path:last-child { fill: none; }
.d-node circle { fill: color-mix(in srgb, currentColor 12%, #111116); stroke: currentColor; stroke-width: 1.6; filter: drop-shadow(0 0 12px color-mix(in srgb, currentColor 60%, transparent)); }
.d-node path { fill: currentColor; }
.d-signal { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30 150; }
.d-check circle { fill: color-mix(in srgb, currentColor 22%, #111116); stroke: currentColor; stroke-width: 1.4; }
.d-check path { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d-dot { fill: #fff; filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 2px currentColor); }
.d-rows path { stroke: currentColor; stroke-opacity: .45; stroke-width: 5; stroke-linecap: round; }
.d-block { fill: currentColor; opacity: 0; }
.d-rings circle { stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 4 4; fill: color-mix(in srgb, currentColor 6%, transparent); }
.d-notes > path { stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 3 3; }
.d-notes rect { fill: #081a1fe8; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 4 3; }
.sheet text { font: 500 9px ui-monospace, Menlo, monospace; letter-spacing: .08em; fill: color-mix(in srgb, currentColor 30%, #fff); }
.sheet .d-strong { font-size: 10.5px; fill: color-mix(in srgb, currentColor 60%, #fff); }
.d-labels, .d-notes, .d-rings { opacity: 0; transition: opacity .6s ease; }
.story[data-focus="small-business"] [data-offer="small-business"] :is(.d-labels, .d-notes, .d-rings),
.story[data-focus="consultancy"] [data-offer="consultancy"] :is(.d-labels, .d-notes, .d-rings),
.story[data-focus="industrial-ai"] [data-offer="industrial-ai"] :is(.d-labels, .d-notes, .d-rings),
.story[data-focus="data"] [data-offer="data"] :is(.d-labels, .d-notes, .d-rings) { opacity: 1; transition-delay: .6s; }
/* Box names stay put on the consultancy drawing; its notes are what arrives. */
.sheet .d-labels.d-in { opacity: 1; }

.motion .d-signal { animation: d-signal 2.6s linear infinite; }
.motion .d-node { transform-box: fill-box; transform-origin: center; animation: ai-think 2.6s ease-in-out infinite; }
.motion .d-block { animation: d-carry 2.4s var(--ease-out) infinite; animation-delay: var(--d); }
.motion .d-fill { stroke-dasharray: 92; animation: d-fill 7.2s ease-out infinite; animation-delay: calc(var(--r) * .4s); }
.motion .d-rings circle { transform-box: fill-box; transform-origin: center; animation: ring-turn 16s linear infinite; }
@keyframes d-signal { from { stroke-dashoffset: 180; } to { stroke-dashoffset: 0; } }
@keyframes d-carry { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(62px); } }
@keyframes d-fill { 0% { stroke-dashoffset: 92; } 30%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 92; } }

/* ------------------------------------------------------------------ Motion */

.motion .story-intro .eyebrow { animation: rise-in 1s var(--ease-out) .05s backwards; }
.motion .story-intro h1 .line > span { animation: line-up 1.15s var(--ease-settle) .15s backwards; }
.motion .story-intro h1 .line + .line > span { animation-delay: .27s; }
.motion .story-intro .fit::after { animation: measure 1.1s var(--ease-settle) 1.15s backwards; transform-origin: left; }
.motion .story-lede { animation: rise-in 1s var(--ease-out) .45s backwards; }
.motion .story-intro .story-actions { animation: rise-in 1s var(--ease-out) .58s backwards; }
.motion .story-cue { animation: rise-in 1s var(--ease-out) .9s backwards; }
.motion .story-rail { animation: rise-in 1s var(--ease-out) 1.6s backwards; }
/* The model assembles once: foundation, then the app, then the business settles on top. */
.motion .tier-body { animation: tier-in 1.5s var(--ease-settle) backwards; }
.motion .tier[data-tier="foundation"] .tier-body { --from: 14%; animation-delay: .1s; }
.motion .tier[data-tier="app"] .tier-body { --from: 22%; animation-delay: .32s; }
.motion .tier[data-tier="business"] .tier-body { --from: -26%; animation-delay: .55s; }
.motion .model-halo { animation: halo-seat 2.4s ease-out 1.25s backwards; }
.motion .node { animation: node-breathe 3.8s ease-in-out infinite; animation-delay: calc(1.8s + var(--n) * .47s); }
.motion .model-beam i { animation: beam-run 2.6s cubic-bezier(.45, 0, .55, 1) 1.9s infinite backwards; }

/* In-page reveals. Elements already on screen at load are .is-seen and skip it. */
.motion [data-reveal]:not(.is-in):not(.is-seen) { opacity: 0; }
.motion [data-reveal].is-in { animation: rise-in 1.05s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 110ms); }

@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
@keyframes line-up { from { transform: translate3d(0, 105%, 0); } }
@keyframes measure { from { transform: scaleX(0); opacity: 0; } }
@keyframes tier-in { from { opacity: 0; transform: translate3d(0, var(--from), 0); } 40% { opacity: 1; } }
@keyframes halo-seat { 0% { opacity: 1; filter: none; } 18% { opacity: 1; filter: brightness(2.6); } 100% { opacity: 1; filter: none; } }
@keyframes node-breathe { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: .95; transform: scale(1.35); } }
@keyframes beam-run { from { transform: translateY(-60%); } to { transform: translateY(60%); } }
@keyframes cue-fall { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
@keyframes ring-turn { to { rotate: 360deg; } }

/* ---------------------------------------------------------------- Practices */

main > section.portals { border-top: 0; padding: 120px 0 90px; }
.story + section.portals { margin-top: 0; }
/* The ?hero=threads comparison: keep the doors tucked into its fade, as before. */
.neon-hero + section.portals { padding-top: 0; }
.portals .section-heading { margin-bottom: 44px; }
.portals .section-heading h2, .how-head h2 { font-size: clamp(36px, 3.7vw, 58px); line-height: 1.03; letter-spacing: -.048em; }
.portals .section-heading h2 em, .how-head h2 em { display: block; }
.portals .section-heading > p { font-size: 15px; }

/* Four doors. The one you point at opens wider and lets its light out. */
.portal-grid { display: flex; gap: 16px; container-type: inline-size; }
.portal-grid > li { flex: 1 1 0; min-width: 0; transition: flex-grow .9s var(--ease-settle); }
/* At least this tall, and taller when a door's copy needs it: the row's
   doors stretch to match, so every Enter sits on the same line. */
.portal { height: 100%; min-height: 600px; padding: 0; border-radius: 28px; isolation: isolate;
  background: linear-gradient(180deg, #121219, #0c0c11 70%); border: 1px solid color-mix(in srgb, var(--neon) 20%, #25232e);
  box-shadow: 0 1px 0 #ffffff0d inset, 0 40px 80px -30px #000; transition: border-color .6s, box-shadow .6s; }
.portal:hover, .portal:focus-visible { transform: none; border-color: color-mix(in srgb, var(--neon) 55%, #25232e); box-shadow: 0 1px 0 #ffffff14 inset, 0 40px 90px -30px color-mix(in srgb, var(--neon) 35%, #000); }
.portal::before { opacity: 0; }
.portal:hover::before, .portal:focus-visible::before { opacity: .7; }
.portal-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; transition: opacity .8s, transform 1.2s var(--ease-settle); transform-origin: 50% 100%;
  background: radial-gradient(ellipse 80% 42% at 50% 104%, color-mix(in srgb, var(--neon) 34%, transparent), transparent 72%),
    radial-gradient(ellipse 55% 38% at 50% 32%, color-mix(in srgb, var(--neon) 13%, transparent), transparent 72%),
    repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 44px); }
.portal:hover .portal-light, .portal:focus-visible .portal-light { opacity: 1; transform: scaleY(1.08); }
.portal-visual { flex: 1 1 auto; height: auto; min-height: 200px; margin: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.portal-visual > * { transform: scale(1.16); transition: transform 1s var(--ease-settle); }
.portal:hover .portal-visual > *, .portal:focus-visible .portal-visual > * { transform: scale(1.3); }
.portal-visual .mini-pipe { width: min(80%, 290px); }

/* Industrial AI: a machine's signal reaches an AI node, which hands a person a
   suggestion to check. */
.mini-ai { width: 88%; max-width: 330px; height: 150px; color: var(--neon); overflow: visible; }
.mini-ai :is(rect, circle) { fill: color-mix(in srgb, var(--neon) 9%, #111116); stroke: currentColor; stroke-opacity: .5; stroke-width: 1.5; }
.mini-ai path { stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.mini-ai .ai-signal { stroke-dasharray: 26 90; animation: ai-signal 2.6s linear infinite; }
.mini-ai .ai-link { stroke-opacity: .6; }
.mini-ai .ai-node { transform-origin: 165px 75px; animation: ai-think 2.6s ease-in-out infinite; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--neon) 60%, transparent)); }
.mini-ai .ai-node circle { stroke-opacity: 1; }
.mini-ai .ai-node path { fill: currentColor; stroke: none; }
.mini-ai .ai-check { fill: color-mix(in srgb, var(--neon) 22%, transparent); stroke-opacity: .9; }
.mini-ai .ai-tick { stroke-dasharray: 14; animation: ai-tick 2.6s ease-out infinite; }
@keyframes ai-signal { from { stroke-dashoffset: 116; } to { stroke-dashoffset: 0; } }
@keyframes ai-think { 0%, 40%, 100% { transform: scale(1); } 55% { transform: scale(1.12); } }
@keyframes ai-tick { 0%, 55% { stroke-dashoffset: 14; } 75%, 100% { stroke-dashoffset: 0; } }
.portal-copy { position: relative; width: min(100%, 420px); padding: 0 32px 30px; }
.portal-kicker { margin-bottom: 14px; }
.portal h3 { font-size: 30px; line-height: 1.08; letter-spacing: -.035em; }
.portal-line { font-size: 14.5px; margin: 14px 0 20px; }
.portal-enter { display: inline-flex; margin-top: 4px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--neon) 25%, transparent); width: 100%; justify-content: space-between; }

@media (min-width: 1181px) {
  .portal-grid > li:first-child { flex-grow: 1.55; }
  .portal-grid:has(> li:is(:hover, :focus-within)) > li { flex-grow: 1; }
  .portal-grid:has(> li:is(:hover, :focus-within)) > li:is(:hover, :focus-within) { flex-grow: 1.55; }
  /* The copy keeps a closed door's width, so nothing reflows as a door opens. */
  .portal-copy { width: calc((100cqw - 48px) / 4.55); padding: 0 26px 28px; }
  .portal h3 { font-size: 26px; }
}

/* ------------------------------------------------------------ Why boutique */

main > section.how { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; padding: 110px 0 100px; }
.how-head { position: sticky; top: 48px; align-self: start; }
.how-head p:not(.eyebrow) { font-size: 16px; line-height: 1.7; color: var(--soft); max-width: 440px; margin: 24px 0 0; }
.how-head p:last-child { margin-top: 30px; }
.how-grid { display: block; list-style: none; }
.how-grid li { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 42px 0 44px; border: 0; border-radius: 0; background: none; border-top: 1px solid var(--line); }
.how-grid li:last-child { border-bottom: 1px solid var(--line); }
.how-grid li::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, var(--accent), #ecd8bf00 70%); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease-settle) .2s; }
.how-grid li.is-in::before, .how-grid li.is-seen::before, html:not(.motion) .how-grid li::before { transform: none; }
.how-grid span { font: 300 64px/.9 'DM Sans', sans-serif; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px #ecd8bf73; text-shadow: none; }
.how-grid h3 { font-size: 26px; font-weight: 500; letter-spacing: -.03em; margin: 4px 0 12px; }
.how-grid p { font-size: 15.5px; line-height: 1.75; color: var(--soft); max-width: 520px; }

/* -------------------------------------------------------------- FAQ, finale */

main > section.faq { padding: 100px 0; }
.faq h2 { font-size: clamp(36px, 3.7vw, 58px); letter-spacing: -.048em; }
.faq summary { transition: color .3s; }
.faq summary:hover { color: var(--accent); }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease-settle), content-visibility .45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { .faq { interpolate-size: allow-keywords; } }

main > section.cta { position: relative; padding: 140px 0 130px; isolation: isolate; }
main > section.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 70% at 28% 55%, #ecd8bf12, transparent 70%), radial-gradient(ellipse 36% 60% at 84% 60%, #4df3ff0a, transparent 70%); }
.cta h2 { font-size: clamp(44px, 5.2vw, 82px); line-height: 1.02; letter-spacing: -.055em; }
.cta .button-primary { border-radius: 16px; transition: transform .35s var(--ease-out), background .3s, box-shadow .35s; }
.cta .button-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 50px #dfb68c2e; }

/* ------------------------------------------------------------- Breakpoints */

@media (max-width: 1180px) {
  .portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal { min-height: 540px; }
  .portal-copy { padding: 0 24px 26px; }
  .portal h3 { font-size: 25px; }
  /* Numbers above the names, so the rail keeps room for the step buttons. */
  .story-rail a span { display: block; margin: 0 0 4px; }
}

@media (max-width: 900px) {
  main > section.story { grid-template-columns: minmax(0, 1fr); }
  .story-intro { min-height: 0; padding: 40px 0 34px; }
  .story-cue { display: none; }
  .story-stage-wrap { grid-column: 1; grid-row: 2 / 6; z-index: 2; pointer-events: none; }
  /* Full-bleed and nearly opaque: the step text scrolls up underneath it. */
  .story-stage { height: 48vh; height: 48svh; margin: 0 calc(-1 * var(--site-gutter)); padding: 6px var(--site-gutter) 14px; pointer-events: auto;
    background: linear-gradient(var(--bg) 90%, #0d0d1200); overflow-x: clip; }
  :is(.model, .sheet) { width: min(100%, calc(48vh - 74px)); width: min(100%, calc(48svh - 74px)); }
  /* Text sits at the foot of each step, in the half of the screen below the model. */
  .story-step { position: relative; z-index: 1; min-height: 74vh; min-height: 74svh; align-items: flex-end; padding: 0 0 6svh; }
  /* The first step starts where the model sticks, so its text begins below
     the model rather than scrolling up underneath it. */
  #story-small-business { min-height: 0; padding-top: calc(48vh + 16px); padding-top: calc(48svh + 16px); }
  .story-step > div { max-width: none; }
  /* Only the current step is ever readable below the model, so none dims. */
  .story.is-live .story-step > div { opacity: 1; }
  .story-step h2 { font-size: clamp(30px, 8vw, 40px); }
  .story-step p:not(.story-label) { font-size: 16px; margin-top: 16px; }
  .story-label { margin-bottom: 16px; }
  .story-rail a { font-size: 12px; }

  main > section.portals { padding: 80px 0 60px; }
  .portal-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .portal { height: auto; }
  .portal-visual { flex: none; height: 210px; min-height: 0; }
  .portal-copy { width: 100%; padding: 0 22px 24px; }

  main > section.how { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 70px 0; }
  .how-head { position: static; }
  .how-grid li { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 30px 0; }
  .how-grid span { font-size: 44px; }
  .how-grid h3 { font-size: 22px; }

  main > section.faq { padding: 70px 0; }
  main > section.cta { padding: 80px 0; }
}

@media (max-width: 520px) {
  .story-intro h1 { font-size: clamp(52px, 15vw, 64px); }
  .story-lede { font-size: 16px; margin-top: 20px; }
  .story-actions { margin-top: 26px; }
  .story-rail { width: 100%; }
  .story-rail { grid-template-columns: minmax(0, 1fr); }
  /* No room beside the rail: the buttons sit over the model's empty lower corner. */
  .story-turn { position: absolute; right: 0; bottom: calc(100% + 10px); }
  .story-turn button { width: 36px; height: 36px; font-size: 14px; }
}

/* Short phones: the longest steps only clear the model with tighter spacing. */
@media (max-width: 900px) and (max-height: 720px) {
  .story-step { padding-bottom: 3svh; }
  .story-step p:not(.story-label) { margin-top: 12px; }
  .story-label { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.story) { scroll-behavior: auto; }
  .sheet-panel { transition: opacity .3s ease !important; }
  .d-dot { display: none; }
  .model, .story-rail a::before, .portal-grid > li, .portal-light, .portal-visual > *, .how-grid li::before, .faq details::details-content { transition: none !important; }
  .story-cue span::after, .portal::before, .mini-ai *, .portal-visual > *, .mini-journey i, .pipe-col.out i, .pipe-flow b { animation: none !important; }
}