/* SYNTAX — contact page. Requires tokens.css + base.css.
   Display sizes scale with --type-vw (tokens.css): held at the 1440 composition on wider screens, line breaks included. */

/* ======================================================================
   00 · HERO — pinned. A lens resolves the process everyone dreads; scrolling
   settles it into a grid around the headline.
   ====================================================================== */
.c-hero { position: relative; height: calc(100svh + 78svh); background: var(--void); border-bottom: 1px solid var(--line); }
.c-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.c-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.6s var(--ease-out) .2s; pointer-events: none; }
.c-field.on { opacity: 1; }
.c-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(180deg, rgba(5,5,6,.78) 0%, rgba(5,5,6,0) 18%, rgba(5,5,6,0) 60%, rgba(5,5,6,.8) 100%),
  radial-gradient(90% 70% at 0% 100%, rgba(5,5,6,.66) 0%, rgba(5,5,6,0) 70%); }
/* the kicker sits on the headline and the settled code rests on the kicker. The field never takes the pointer (the hero
   listens for it), so the headline and lede stay selectable text */
.c-meta { position: relative; z-index: 2; padding-top: calc(var(--nav-h) + 24px); margin-bottom: clamp(22px, 3.3vh, 34px); display: flex; justify-content: space-between; gap: 24px; }
.c-hero-inner { position: relative; z-index: 2; padding-bottom: clamp(78px, 12vh, 124px); }
.c-hero h1 { font-size: clamp(46px, calc(8.1 * var(--type-vw, 1vw)), 134px); line-height: .92; letter-spacing: -.042em; max-width: 14ch; }
.c-hero h1 em, .c-next h2 em, .c-d-head h2 em { padding-right: .08em; }
/* site.js splits [data-split] headings into line blocks, which adds ~.05em per line. Reserve it up front so nothing moves when the script runs. */
.c-hero h1[data-split]:not([data-reveal-lines]), .c-next h2[data-split]:not([data-reveal-lines]), .c-d-head h2[data-split]:not([data-reveal-lines]) { padding-bottom: .105em; }
.c-foot { margin-top: clamp(28px, 4.4vh, 48px); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px 48px; flex-wrap: wrap; }
.c-foot .lede { max-width: 47ch; }
.c-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.c-hero.is-resolved .c-ctas .btn-primary { animation: c-ring 1.9s var(--ease-out) 1; }
@keyframes c-ring { 0% { box-shadow: 0 0 0 0 rgba(250,179,31,.55); } 100% { box-shadow: 0 0 0 22px rgba(250,179,31,0); } }
.c-hud { position: absolute; z-index: 3; left: 0; right: 0; margin: 0 auto; bottom: 26px; display: flex; justify-content: space-between; gap: 20px; pointer-events: none; }
.c-hud .mono { font-size: 10.5px; color: var(--bone-3); }
.c-hud [data-lens-hud] b { color: var(--bone-2); font-weight: 450; font-variant-numeric: tabular-nums; }
.c-prog { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 1px; background: var(--signal); opacity: .75; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
@media (max-width: 760px) {
  .c-meta { margin-bottom: 18px; }
  .c-hero { height: calc(100svh + 62svh); }
  .c-foot { flex-direction: column; align-items: flex-start; gap: 24px; }
  .c-hero h1 { max-width: none; }
  .c-hint { display: none; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .c-hero-inner { padding-bottom: 62px; }
  .c-hero h1 { font-size: clamp(40px, 12vw, 46px); }
  .c-foot { margin-top: 20px; gap: 18px; }
  .c-foot .lede { font-size: 16px; line-height: 1.42; }
  .c-hud { bottom: 20px; }
}
/* very short viewports: no pin (the stage would be taller than the screen) */
@media (max-height: 600px) {
  .c-hero { height: auto; }
  .c-stage { position: relative; height: auto; min-height: 100svh; }
}
/* phones held sideways: the headline and lede fill the screen and there is no free ground for the field, so the lens
   and its fragments stand down (the page script stops drawing while the field is hidden) */
@media (orientation: landscape) and (max-height: 500px) {
  .c-field, .c-hud, .c-prog { display: none; }
}

/* ======================================================================
   01 · DESCRIBE IT — straight to the input
   ====================================================================== */
.c-sketch { position: relative; padding: clamp(52px, 6vw, 96px) 0 clamp(56px, 6vw, 96px); }
.c-sk-k { margin-bottom: 20px; }
.sketch-frame { border: 1px solid var(--line); }
.sketch-frame > .stage, .sketch-frame > canvas { position: relative; }
/* The example sheet is shown, as on the homepage, on a drawing board of fixed height: the demo cycles sentences whose drawings
   differ by ~200px. The module settles on its tallest example after one cycle; the board starts at that height (measured per
   container width) and centres each drawing in it, so nothing below the board moves while the demo runs. */
.sketch-frame.ss { --board: 690px; }
@container ss (max-width: 1250px) { .sketch-frame.ss .ss-root { --board: 708px; } }
@container ss (max-width: 1100px) { .sketch-frame.ss .ss-root { --board: 690px; } }
/* tablets: the drawing would need ~1400px of page here, so at rest the sheet stays folded and appears when the visitor submits */
@container ss (max-width: 999px) { .sketch-frame.ss .ss-root:is([data-state="example"], [data-state="idle"]) .ss-sheet { display: none; } }
.sketch-frame.ss .ss-root:is([data-state="example"], [data-state="idle"]) .ss-stage[data-layout="h"] .ss-cols { min-height: var(--board); align-items: center; }
.sketch-frame.ss .ss-root:is([data-state="example"], [data-state="idle"]) .ss-stage[data-layout="h"] .ss-col { position: relative; }
.sketch-frame.ss .ss-root:is([data-state="example"], [data-state="idle"]) .ss-stage[data-layout="h"] .ss-ovf { position: absolute; left: 0; right: 0; top: 100%; }
/* the send / sketch-again buttons only exist once a sketch is done: no invisible row of reserved space under the note before that */
.sketch-frame.ss .ss-root:not([data-state="done"]):not([data-state="thin"]) .ss-ab, .sketch-frame.ss .ss-root.no-send .ss-ab { display: none; }
/* wide frames: the brief on the left, the ways in on the right — no empty half under the field */
@container ss (min-width: 800px) {
  .sketch-frame.ss .ss-form { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); grid-template-areas: "lab st" "field st" "field ind" "rec ind" "cta cta"; grid-template-rows: auto auto 1fr auto auto; column-gap: clamp(32px, 4cqw, 60px); row-gap: 16px; align-items: start; }
  .sketch-frame.ss .ss-form > label.ss-label { grid-area: lab; }
  .sketch-frame.ss .ss-form > .ss-field { grid-area: field; align-self: stretch; display: flex; flex-direction: column; }
  .sketch-frame.ss .ss-form > .ss-field > .ss-fw { flex: 1; }
  .sketch-frame.ss .ss-form > .ss-rec { grid-area: rec; }
  .sketch-frame.ss .ss-form > .c-starters { grid-area: st; }
  .sketch-frame.ss .ss-form > .ss-chipwrap:not(.c-starters) { grid-area: ind; padding-top: 10px; }
  .sketch-frame.ss .ss-form > .ss-cta { grid-area: cta; padding-top: 8px; }
  .sketch-frame.ss .c-starters .ss-chips { flex-direction: column; align-items: flex-start; }
}
/* layout-shift guard: reserve the mounted frame's height until the module mounts, then let it size to its content (no dead space).
   Measured per breakpoint; the sheet shows from a 1000px-wide frame (viewport ~1087px). */
.c-sketch .sketch-frame:not(.is-mounted) { min-height: 1676px; }
@media (max-width: 1340px) { .c-sketch .sketch-frame:not(.is-mounted) { min-height: 1716px; } }
@media (max-width: 1174px) { .c-sketch .sketch-frame:not(.is-mounted) { min-height: 1895px; } }
@media (max-width: 1086px) { .c-sketch .sketch-frame:not(.is-mounted) { min-height: 546px; } }
@media (max-width: 935px)  { .c-sketch .sketch-frame:not(.is-mounted) { min-height: 541px; } }
@media (max-width: 869px)  { .c-sketch .sketch-frame:not(.is-mounted) { min-height: 652px; } }
@media (max-width: 760px)  { .c-sketch .sketch-frame:not(.is-mounted) { min-height: 694px; } }
@media (max-width: 600px)  { .c-sketch .sketch-frame:not(.is-mounted) { min-height: 784px; } }
@media (max-width: 440px)  { .c-sketch .sketch-frame:not(.is-mounted) { min-height: 806px; } }
/* phones: the recognised-terms line wraps as the demo types; hold two lines so the frame does not twitch */
@container ss (max-width: 560px) { .sketch-frame.ss .ss-rec { min-height: 54px; align-content: flex-start; } }
.c-fallback { position: absolute; inset: 0; z-index: 1; display: grid; place-content: start center; justify-items: center; gap: 22px; padding: clamp(120px, 14vw, 200px) var(--gutter) 0; text-align: center; pointer-events: none; }
.c-fallback p { color: var(--bone-3); }
.c-fallback .display { font-size: clamp(26px, calc(3.2 * var(--type-vw, 1vw)), 46px); color: var(--bone-2); max-width: 20ch; line-height: 1.05; }
.c-fallback .caret { display: inline-block; width: 2px; height: .9em; margin-left: 4px; vertical-align: -.08em; background: var(--signal); animation: c-caret 1s steps(1) infinite; }
.c-fallback a { pointer-events: auto; }
.sketch-frame.is-mounted > .c-fallback { display: none; }
@keyframes c-caret { 50% { opacity: 0; } }
/* focus on the brief is the module's own: the field's border turns gold and the four corner brackets lock on */
.sketch-frame .c-starters .ss-label span { color: var(--bone-3); }
.sketch-frame .c-starters .ss-chip { max-width: 100%; text-align: left; }
/* small phones: the longest starter still fits on one line at the 11.5px phone size */
@media (max-width: 380px) { .sketch-frame .c-starters .ss-chip { padding-inline: 12px; letter-spacing: .04em; } }

/* ======================================================================
   02 + 03 · THE FLOW — one gold spine, first step to the @
   ====================================================================== */
.c-flow { position: relative; border-top: 1px solid var(--line); }
.c-spine { position: absolute; z-index: 0; left: 50%; top: 0; width: 1px; height: 0; transform: translateX(-.5px); background: var(--line-2); pointer-events: none; }
.c-spine::before { content: ""; position: absolute; left: -4px; bottom: -4px; width: 9px; height: 9px; background: var(--void); border: 1px solid var(--line-3); transform: rotate(45deg); transition: background .6s var(--ease-out), border-color .6s var(--ease-out); }
.c-flow.lit .c-spine::before { background: var(--signal); border-color: var(--signal); }
.c-spine > i { position: absolute; inset: 0; background: var(--signal); transform-origin: 50% 0; transform: scaleY(0); }
.c-next { position: relative; z-index: 1; padding: clamp(56px, 8.4vw, 124px) 0 0; }
.c-next-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: 24px; align-items: end; }
.c-next-head .k { grid-column: 1 / -1; }
.c-next-head h2 { grid-column: 1 / span 8; }
.c-next-head .mono { grid-column: 9 / span 4; justify-self: end; text-align: right; white-space: nowrap; color: var(--bone-3); }
@media (max-width: 900px) { .c-next-head h2, .c-next-head .mono { grid-column: 1 / -1; justify-self: start; text-align: left; white-space: normal; } }

.c-steps { position: relative; margin-top: clamp(24px, 3.2vw, 52px); }
.c-step { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(56px, 8vw, 132px); align-items: center; padding: clamp(24px, 2.9vw, 46px) 0; }
.c-step:nth-child(even) .s-copy { order: 2; }
.c-step .node { position: absolute; left: 50%; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: var(--void); border: 1px solid var(--line-3); transition: border-color .6s var(--ease-out), background .6s var(--ease-out), transform .8s var(--ease-out); }
.c-step .node::after { content: ""; position: absolute; inset: 3px; background: var(--signal); transform: scale(0); transition: transform .6s var(--ease-out); }
.c-step.on .node { border-color: var(--signal); transform: rotate(45deg); }
.c-step.on .node::after { transform: scale(1); }
.s-copy { position: relative; }
.s-num { display: block; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--display-opsz); font-size: clamp(72px, calc(9.4 * var(--type-vw, 1vw)), 148px); line-height: .8; letter-spacing: -.06em; color: var(--bone-3); font-feature-settings: "tnum"; transition: color .9s var(--ease-out); margin-left: -.04em; }
.c-step.on .s-num { color: var(--bone); }
.s-when { margin-top: clamp(16px, 1.8vw, 26px); }
.s-when.sig { color: var(--signal); }
.s-title { margin-top: 14px; font-size: clamp(30px, calc(3.3 * var(--type-vw, 1vw)), 52px); line-height: 1.02; letter-spacing: -.03em; max-width: 15ch; font-weight: 300; }
.s-title em { padding-right: .06em; }
.s-body { margin-top: 14px; max-width: 38ch; font-size: clamp(16px, 1.15vw, 18.5px); color: var(--bone-2); }
.s-vis { aspect-ratio: 16 / 9.7; border: 1px solid var(--line); width: 100%; }
@media (max-width: 900px) {
  .c-spine { left: calc(var(--gutter) + 6px); }
  .c-spine::after { content: ""; position: absolute; left: 0; bottom: 0; width: 22px; height: 1px; background: var(--signal); opacity: 0; transition: opacity .6s var(--ease-out); }
  .c-flow.lit .c-spine::after { opacity: 1; }
  .c-step { grid-template-columns: 1fr; row-gap: 22px; padding: 30px 0 30px 36px; align-items: start; }
  .c-step:nth-child(even) .s-copy { order: 0; }
  .c-step .node { left: 6px; top: 50px; }
  .s-num { font-size: clamp(64px, 19vw, 104px); }
  .s-title { max-width: 18ch; }
  .s-vis { aspect-ratio: 16 / 10; }
}

/* ---- visual 1 · input ---- */
.v-input .vi { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(40px, 4.4vw, 58px) clamp(20px, 3vw, 44px) clamp(22px, 2.6vw, 36px); }
.vi-field { position: relative; border: 1px solid var(--line-3); padding: 16px 18px 20px; background: rgba(236,232,225,.02); }
.vi-field .mono { display: block; margin-bottom: 10px; font-size: 10px; }
/* the field is sized by the whole sentence (an invisible copy in the same grid cell), so it never shows a tall empty box
   or grows while the sentence is typed */
.vi-text { display: grid; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--display-opsz); font-size: clamp(19px, calc(2 * var(--type-vw, 1vw)), 31px); line-height: 1.16; letter-spacing: -.022em; color: var(--bone); transition: opacity .5s var(--ease-out); }
.vi-text::before { content: attr(data-text); grid-area: 1 / 1; visibility: hidden; padding-right: 4px; }
.vi-line { grid-area: 1 / 1; }
.v-input.wipe .vi-text { opacity: 0; }
.vi-caret { display: inline-block; width: 2px; height: .92em; margin-left: 2px; vertical-align: -.1em; background: var(--signal); animation: c-caret 1s steps(1) infinite; }
.vi-text mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .16em; text-decoration-skip-ink: none; text-decoration-color: transparent; transition: text-decoration-color .6s var(--ease-out); }
.vi-text mark.m-a.on { text-decoration-color: var(--b-cyan); }
.vi-text mark.m-b.on { text-decoration-color: var(--b-teal); }
.vi-text mark.m-c.on { text-decoration-color: var(--b-red); }
.vi-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.vi-tags li { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); display: inline-flex; gap: 8px; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-2); white-space: nowrap; }
.vi-tags li b { font-weight: 500; color: var(--c); }
.vi-tags li.on { opacity: 1; transform: none; }
@media (max-width: 620px) {
  .s-vis.v-input { aspect-ratio: auto; min-height: 380px; }
  .v-input .vi { position: relative; inset: auto; min-height: 380px; padding-top: 56px; padding-bottom: 30px; }
  .vi-tags li { font-size: 9.5px; height: 26px; padding: 0 8px; }
  .s-vis .hud { letter-spacing: .08em; }
  .s-vis .hud-r { display: none; }
}

/* ---- visual 2 · call: the tags become a graph ---- */
.v-call .vc { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 46px clamp(20px, 3vw, 40px) 30px; gap: 12px; }
.vc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.vc-time { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--display-opsz); font-size: clamp(38px, calc(4.4 * var(--type-vw, 1vw)), 64px); line-height: .9; letter-spacing: -.05em; display: flex; align-items: baseline; gap: .22em; }
.vc-time small { font-size: .26em; letter-spacing: -.01em; color: var(--bone-3); }
.vc-key { display: flex; gap: 16px; font-size: 9.5px; }
.vc-key span { display: inline-flex; align-items: center; gap: 8px; }
.vc-key span::before { content: ""; width: 16px; height: 9px; border: 1px solid var(--bone-2); }
.vc-key .b::before { border-style: dashed; border-color: var(--bone-3); }
.vc-meter { height: 1px; background: var(--line-2); position: relative; flex: none; }
.vc-meter i { position: absolute; inset: 0; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); }
.vc-graph { position: relative; flex: 1; min-height: 0; margin-top: 6px; transition: opacity .8s var(--ease-out); }
.vc-graph.fade { opacity: 0; }
.vc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vc-svg path { fill: none; stroke: var(--line-3); stroke-width: 1; stroke-dasharray: var(--L, 300); stroke-dashoffset: var(--L, 300); transition: stroke-dashoffset 1.1s var(--ease-out), stroke .8s; }
.vc-svg path.on { stroke-dashoffset: 0; stroke: rgba(236,232,225,.38); }
.g-n { position: absolute; z-index: 1; transform: translate(-50%, -50%) scale(.94); padding: 6px 10px 7px; border: 1px solid var(--line-3); background: var(--ink-0); opacity: 0; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); white-space: nowrap; }
.g-n.src { border-style: solid; border-color: var(--c); }
.g-n.call { border-style: dashed; }
.g-n.on { opacity: 1; transform: translate(-50%, -50%); }
.g-n .mono { font-size: 9.5px; letter-spacing: .1em; color: var(--bone); display: flex; flex-direction: column; gap: 3px; line-height: 1.1; }
.g-n .mono b { font-weight: 450; color: var(--c); font-size: 8px; letter-spacing: .16em; }
@media (max-width: 620px) {
  .s-vis.v-call { aspect-ratio: auto; min-height: 380px; }
  .v-call .vc { position: relative; inset: auto; min-height: 380px; padding-top: 52px; }
  .vc-key { display: none; }
  .g-n { padding: 5px 8px 6px; }
  .g-n .mono { font-size: 8.5px; letter-spacing: .06em; }
  .g-n .mono b { font-size: 7.5px; }
}

/* ---- visual 3 · prototype: someone approves a task, the numbers move ---- */
.v-proto .vp { position: absolute; inset: 0; padding: 44px clamp(16px, 2.4vw, 32px) 26px; }
.vp-win { position: relative; height: 100%; border: 1px solid var(--line-2); background: var(--ink-1); overflow: hidden; display: flex; flex-direction: column; }
.vp-bar { height: 24px; flex: none; display: flex; align-items: center; gap: 5px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.vp-bar i { width: 6px; height: 6px; border-radius: 50%; background: var(--bone-4); }
.vp-bar .mono { margin-left: 8px; font-size: 9px; color: var(--bone-3); }
.vp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 18% 1fr; transition: padding-right .8s var(--ease-out); }
.v-proto.picked .vp-body { padding-right: 40%; }
.vp-side { border-right: 1px solid var(--line); padding: 12px 10px; display: flex; flex-direction: column; gap: 10px; }
.vp-side b { display: block; font-weight: 450; font-size: clamp(7.5px, calc(.7 * var(--type-vw, 1vw)), 9px); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-3); opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i) * 90ms); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-side b.on { color: var(--bone); }
.vp-main { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; overflow: hidden; }
.vp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.vp-kpis > div { border: 1px solid var(--line-2); padding: 7px 9px; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), border-color .6s var(--ease-out); transition-delay: calc(var(--i) * 110ms + 250ms); }
.vp-kpis .mono { display: block; font-size: 8px; letter-spacing: .12em; white-space: nowrap; }
.vp-kpis em { position: relative; display: block; margin-top: 3px; height: 1.05em; font-family: var(--f-display); font-style: normal; font-weight: 300; font-size: clamp(16px, calc(1.7 * var(--type-vw, 1vw)), 24px); line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; overflow: hidden; }
.vp-kpis em span { display: block; transition: transform .7s var(--ease-out), opacity .5s var(--ease-out); }
.vp-kpis em .n2 { position: absolute; left: 0; top: 0; transform: translateY(70%); opacity: 0; }
.v-proto.approved .vp-kpis em .n1 { transform: translateY(-70%); opacity: 0; }
.v-proto.approved .vp-kpis em .n2 { transform: none; opacity: 1; }
.v-proto.approved .vp-kpis .k-ok { border-color: var(--signal); }
.v-proto.approved .vp-kpis .k-ok em { color: var(--signal); }
.vp-table { flex: 1; min-height: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.vp-row { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) 26px auto; align-items: center; gap: 10px; height: 31px; padding: 0 6px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-out), background .4s, transform .5s var(--ease-out); transition-delay: calc(var(--i) * 90ms + 450ms); }
.vp-row .nm { font-size: clamp(10.5px, .95vw, 12px); color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.005em; }
.vp-row .ow { font-size: 8px; letter-spacing: .1em; color: var(--bone-3); text-align: center; }
.vp-chip { position: relative; display: inline-block; min-width: 56px; padding: 0 7px; text-align: center; height: 16px; line-height: 15px; border: 1px solid var(--line-3); font-family: var(--f-mono); font-size: 7.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-2); white-space: nowrap; transition: border-color .4s, color .4s; }
.vp-chip .s2 { display: none; }
.vp-row.pick.done .vp-chip { border-color: var(--signal); color: var(--signal); }
.vp-row.pick.done .vp-chip .s1 { display: none; } .vp-row.pick.done .vp-chip .s2 { display: inline; }
.v-proto.built .vp-side b, .v-proto.built .vp-kpis > div, .v-proto.built .vp-row { opacity: 1; transform: none; }
.v-proto.picked .vp-row.pick { background: rgba(236,232,225,.07); transition-delay: 0s; }
.vp-detail { position: absolute; right: 0; top: 24px; bottom: 0; width: 40%; background: var(--ink-2); border-left: 1px solid var(--line-3); padding: 14px 14px 14px; display: flex; flex-direction: column; gap: 10px; transform: translateX(104%); transition: transform .8s var(--ease-out); }
.v-proto.picked .vp-detail { transform: none; }
.vd-copy { display: flex; flex-direction: column; gap: 9px; }
.vp-detail .mono { font-size: 8.5px; color: var(--bone-3); }
.vd-t { font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--display-opsz); font-size: clamp(17px, calc(1.7 * var(--type-vw, 1vw)), 24px); line-height: 1; letter-spacing: -.03em; color: var(--bone); }
.vp-detail .ln { display: block; height: 5px; background: var(--bone-4); }
.vp-detail .ln:nth-of-type(1) { width: 86%; } .vp-detail .ln:nth-of-type(2) { width: 64%; } .vp-detail .ln:nth-of-type(3) { width: 74%; }
.vp-approve { margin-top: auto; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line-3); color: var(--bone); transition: background .4s var(--ease-out), color .4s, border-color .4s, transform .25s var(--ease-out); }
.v-proto.press .vp-approve { transform: scale(.95); }
.v-proto.approved .vp-approve { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.vp-cursor { position: absolute; z-index: 5; left: 0; top: 0; width: 16px; height: 16px; transform: translate(var(--cx, 72%), var(--cy, 90%)); transition: transform 1.1s var(--ease-in-out), opacity .5s; opacity: 0; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.v-proto.built .vp-cursor { opacity: 1; }
@media (max-width: 620px) {
  .s-vis.v-proto { aspect-ratio: auto; min-height: 372px; }
  .v-proto .vp { position: relative; inset: auto; min-height: 372px; padding: 50px 14px 22px; }
  .vp-win { height: 304px; }
  .vp-side { display: none; }
  .vp-body, .v-proto.picked .vp-body { grid-template-columns: 1fr; padding-right: 0; }
  .vp-main { padding: 10px 10px 0; }
  .vp-row { height: 34px; grid-template-columns: minmax(0, 1fr) 26px auto; }
  .vp-row:nth-child(n+7) { display: none; }
  .vp-row .nm { font-size: 12px; }
  .vp-kpis em { font-size: 20px; }
  .vp-detail { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 76px; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 14px; border-left: 0; border-top: 1px solid var(--line-3); transform: translateY(104%); }
  .v-proto.picked .vp-main { padding-bottom: 78px; }
  .vp-main { transition: padding-bottom .8s var(--ease-out); }
  .vp-detail .ln, .vp-detail .mono { display: none; }
  .vd-t { font-size: 22px; }
  .vp-approve { margin-top: 0; padding: 0 18px; height: 34px; font-size: 9.5px; }
}

/* ---- visual 4 · fork: prototype + notes feed the decision ---- */
.v-fork .vf { position: absolute; inset: 0; }
.vf-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vf-svg path { fill: none; stroke: var(--line-3); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .6s var(--ease-out); }
.vf-svg path.hot.e1, .vf-svg path.hot.e2 { stroke: rgba(236,232,225,.7); }
.vf-svg path.hot.a { stroke: var(--signal); }
.vf-svg path.hot.b { stroke: var(--bone); }
.vf-art { position: absolute; left: 5%; width: 25%; padding: 8px 9px 9px; border: 1px solid var(--line-3); background: var(--ink-1); }
.vf-art.a1 { top: 13%; height: 31%; } .vf-art.a2 { top: 56%; height: 31%; }
.vf-art .mono { display: block; font-size: 8px; letter-spacing: .14em; color: var(--bone-3); margin-bottom: 8px; white-space: nowrap; }
.vf-art .mini { position: relative; height: calc(100% - 20px); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 4px; padding: 5px 5px 0; }
.vf-art .mini i { display: block; height: 4px; background: var(--bone-4); }
.vf-art .mini i:nth-child(1) { width: 70%; } .vf-art .mini i:nth-child(2) { width: 90%; } .vf-art .mini i:nth-child(3) { width: 55%; }
.vf-art .mini b { position: absolute; right: 5px; bottom: 5px; width: 18px; height: 6px; background: var(--signal); }
.vf-art .doc { display: flex; flex-direction: column; gap: 5px; padding-top: 1px; }
.vf-art .doc i { display: block; height: 4px; background: var(--bone-4); }
.vf-art .doc i:nth-child(1) { width: 92%; } .vf-art .doc i:nth-child(2) { width: 78%; } .vf-art .doc i:nth-child(3) { width: 86%; } .vf-art .doc i:nth-child(4) { width: 48%; }
.vf-n { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1px solid var(--line-3); background: var(--void); transition: background .4s var(--ease-out), border-color .4s; }
.vf-n.gate { left: 49%; top: 50%; transform: rotate(45deg); }
.vf-n.gate.lit { border-color: var(--signal); background: var(--signal); }
.vf-n.end { border-radius: 50%; }
.vf-n.end.a { left: 84%; top: 32%; border-color: var(--signal); }
.vf-n.end.a::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--signal); }
.vf-n.end.b { left: 84%; top: 68%; border-color: var(--bone-2); }
.vf-dot { position: absolute; z-index: 2; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 4px rgba(236,232,225,.12); left: 30%; top: 28.5%; opacity: 0; }
.vf-dot.gold { background: var(--signal); box-shadow: 0 0 0 4px rgba(250,179,31,.2); }
.vf-l { position: absolute; z-index: 1; padding: 2px 6px; background: var(--ink-0); font-family: var(--f-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); white-space: nowrap; }
.vf-l.gate { left: 49%; top: 50%; transform: translate(-50%, 24px); }
.vf-t { position: absolute; right: 13%; text-align: right; transition: opacity .6s var(--ease-out); opacity: .55; }
.vf-t strong { display: block; font-family: var(--f-display); font-weight: 300; font-size: clamp(20px, calc(2.1 * var(--type-vw, 1vw)), 32px); line-height: 1; letter-spacing: -.03em; color: var(--bone); }
.vf-t strong em { padding-right: .05em; }
.vf-t span { display: block; margin-top: 7px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-3); }
.vf-t.a { bottom: calc(68% + 16px); } .vf-t.b { top: calc(68% + 16px); }
.vf-t.a strong { color: var(--signal); }
.v-fork.end-a .vf-t.a, .v-fork.end-b .vf-t.b { opacity: 1; }
@media (max-width: 620px) {
  .s-vis.v-fork { aspect-ratio: 1 / 1.08; }
  .vf-l { font-size: 8.5px; letter-spacing: .1em; }
  .vf-t { right: 8%; }
  .vf-t span { font-size: 8.5px; letter-spacing: .08em; margin-top: 5px; }
  .vf-t strong { font-size: 20px; }
  .vf-art { left: 4%; width: 28%; padding: 6px; }
  .vf-art .mono { font-size: 7px; letter-spacing: .1em; margin-bottom: 5px; }
}

/* ======================================================================
   03 · DETAILS — the spine lands on the @
   ====================================================================== */
.c-details { position: relative; z-index: 1; padding: clamp(36px, 4.4vw, 68px) 0 clamp(36px, 3.4vw, 56px); }
.c-d-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(56px, 8vw, 132px); row-gap: 22px; }
.c-d-head .k { grid-column: 1 / -1; }
.c-d-head h2 { grid-column: 1; font-size: clamp(36px, calc(4.2 * var(--type-vw, 1vw)), 68px); }
.c-mail-wrap { margin-top: clamp(24px, 3vw, 44px); }
.c-mail { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: baseline; width: 100%; font-family: var(--f-display); font-weight: 300; font-variation-settings: var(--display-opsz); font-size: clamp(34px, calc(11.4 * var(--type-vw, 1vw)), 176px); line-height: 1; letter-spacing: -.05em; white-space: nowrap; padding-bottom: .06em; background: linear-gradient(var(--signal), var(--signal)) 50% 100% / 0 2px no-repeat; transition: background-size 1s var(--ease-out); }
.c-mail .m-l { justify-self: end; } .c-mail .m-r { justify-self: start; }
.c-mail .at { display: inline-block; font-style: italic; padding: 0 .02em; }
.c-mail span span, .c-mail .at { display: inline-block; transition: color .55s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i) * 26ms); }
.c-mail .m-l, .c-mail .m-r { display: inline-flex; }
.c-mail:hover, .c-mail:focus-visible { background-size: 100% 2px; }
.c-mail:hover span span, .c-mail:hover .at, .c-mail:focus-visible span span, .c-mail:focus-visible .at { color: var(--signal); transform: translateY(-.045em); }
/* the spine arrives: the @ ignites, the address follows outward */
.c-flow.lit .c-mail .at { color: var(--signal); }
.c-mail.ignite span span, .c-mail.ignite .at { color: var(--signal); transition-delay: calc(max(var(--i) - 7, 7 - var(--i)) * 55ms); }
.c-mail-row { display: flex; align-items: center; justify-content: center; gap: 16px 28px; flex-wrap: wrap; margin-top: clamp(20px, 2.4vw, 32px); }
.c-copy { min-width: 164px; justify-content: center; }
.c-copy .ok { display: none; color: var(--signal); }
.c-copy.copied .ok { display: inline; } .c-copy.copied .no { display: none; }
.c-facts { margin: clamp(40px, 5vw, 72px) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.c-facts > div { padding: 24px 28px 0 0; }
.c-facts > div + div { padding-left: 28px; border-left: 1px solid var(--line); }
.c-facts dt { color: var(--bone-3); }
.c-facts dd { margin: 14px 0 0; font-style: normal; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.4; color: var(--bone); letter-spacing: -.01em; }
.c-facts dd .mono { display: block; margin-top: 12px; }
.c-facts dd .c-fp { display: table; color: var(--bone-2); transition: color .3s, background-size .5s var(--ease-out); }
.c-facts dd .c-fp:hover, .c-facts dd .c-fp:focus-visible { color: var(--bone); }
.c-facts address { font-style: normal; }
@media (max-width: 900px) {
  .c-d-head, .c-mail-wrap { padding-left: 36px; }
  .c-d-head { grid-template-columns: 1fr; }
  .c-mail { grid-template-columns: auto auto auto; justify-content: start; }
  .c-mail .m-l { justify-self: start; }
  .c-mail-row { justify-content: flex-start; padding-left: 36px; }
  .c-facts { grid-template-columns: 1fr; }
  .c-facts > div, .c-facts > div + div { padding: 22px 0 22px; border-left: 0; border-bottom: 1px solid var(--line); }
}


@media (prefers-reduced-motion: reduce) {
  .c-hero { height: auto; }
  .c-stage { position: relative; height: auto; min-height: max(100svh, 640px); }
  .c-field { transition: none; }
  .c-prog { display: none; }
  .c-hero.is-resolved .c-ctas .btn-primary { animation: none; }
  .c-fallback .caret, .vi-caret { animation: none; }
  .c-mail.ignite span span, .c-mail.ignite .at { transition-delay: 0s; }
}