/* ═══════════════════════════════════════════════════
YOUDOLESS — Matthew DeMuro
Aesthetic: warm paper. Quiet, premium, plain-spoken type.
Antique gold as the one accent. One dark moment (the CTA).
Type: Inter Tight for headlines, Inter for reading, DM Mono
for small labels. Nothing decorative — it just has to read.
═══════════════════════════════════════════════════ */
:root{
/* paper */
--paper:#FBFAF8;
--paper-2:#F4F2ED;
--paper-3:#EDEAE3;
--line:#E2DED5;
--line-2:#CBC6BA;
/* ink */
--ink:#141412;
--ink-2:#4C4C46; /* secondary text — 8.9:1 on paper */
--ink-3:#6B6B63; /* tertiary text — 5.3:1 on paper */
/* gold: TEXT vs FILL are different values on purpose.
--gold is far too light to read on paper; only --gold-ink passes AA. */
--gold-ink:#8A6218; /* text-safe — 5.4:1 on paper */
--gold:#D9A441; /* fills, borders, decoration only */
--gold-mid:#B8860B; /* large display type — 3.2:1, AA large */
--gold-deep:#6E4E12; /* hard shadows, darkest foil stop */
--gold-wash:rgba(217,164,65,.13);
--sig:#0F6B4F; /* deep green, small badges only — 6.4:1 */
--err:#B3382B;
--f-disp:"Inter Tight","Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
--f-body:"Inter",-apple-system,"Helvetica Neue",Arial,sans-serif;
--f-mono:"DM Mono",ui-monospace,SFMono-Regular,monospace;
--f-logo:"Anton","Archivo Black","Inter Tight",Impact,sans-serif;
--hard:6px 6px 0 var(--ink);
--hard-gold:6px 6px 0 var(--gold-deep);
--lift:0 18px 40px -22px rgba(20,20,18,.35);
--out:cubic-bezier(.22,1,.36,1);
--bounce:cubic-bezier(.34,1.56,.64,1);
--pad:clamp(1.2rem,5vw,5rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x lives on , NOT . On body it makes body its own scroll container,
which leaves window.scrollY pinned at 0 and silently kills the progress bar, the nav
state and every scroll-driven reveal. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
background:var(--paper);color:var(--ink);
font-family:var(--f-body);font-size:clamp(1rem,.95rem+.25vw,1.08rem);line-height:1.62;
min-height:100vh;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px}
/* ── gold type ──
Antique gold on paper. The body of every gradient sits at --gold-ink or darker
(5.4:1); only a narrow specular band is light, and it's always moving, so the
glyphs never read as low-contrast even mid-sweep.
.foil — section words. Static by default; they take ONE shine pass as they
fade in, which is the moment the eye is already on them.
.metal — the hero word. Same material, but polled continuously. */
/* THE TEXT IS ITS OWN BACKGROUND. Because these are `-webkit-text-fill-color:transparent`,
any moment the gradient isn't covering the glyphs, the words vanish outright — which is
exactly what happened when this animated background-position past 100% with no-repeat.
Two rules keep that from ever recurring:
• background-repeat stays REPEAT, so an out-of-range position still paints something.
• every keyframe position stays inside 0%–100%. The image is wider than the box, so
any value in that range covers it completely. */
.foil,.metal{
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
background-repeat:repeat;
}
.foil{
background-image:linear-gradient(100deg,
var(--gold-deep) 0%,var(--gold-ink) 22%,var(--gold-mid) 44%,
var(--gold-ink) 68%,var(--gold-deep) 100%);
background-size:260% 100%;background-position:55% 0;
}
/* one pass of the highlight as the line arrives */
.reveal.in .foil,.foil.shine{animation:foilOnce 1.5s var(--out) .12s both}
@keyframes foilOnce{from{background-position:100% 0}to{background-position:0% 0}}
/* Brushed metal, not chrome. A white glint is impossible here: on paper the lightest
value that still clears large-text AA is --gold-mid at 3.12:1 — a true specular
(#F3E3B4) measures 1.22:1 and would make a third of the word unreadable mid-sweep.
So the metal comes from ALTERNATING bands between --gold-deep (7.29:1) and
--gold-mid, which reads as polished surface and never drops below the floor. */
.metal{
background-image:linear-gradient(100deg,
var(--gold-deep) 0%, var(--gold-ink) 9%, var(--gold-mid) 17%,
var(--gold-ink) 26%, var(--gold-deep) 34%,var(--gold-ink) 42%,
var(--gold-mid) 50%, var(--gold-ink) 58%,var(--gold-deep) 66%,
var(--gold-ink) 74%, var(--gold-mid) 83%,var(--gold-ink) 91%,
var(--gold-deep) 100%);
background-size:280% 100%;background-position:50% 0;
/* `alternate` sweeps back and forth between two positions that BOTH fully cover the
glyphs — a one-way loop would need to jump back to the start, and any position
outside 0–100% is what made the words disappear. */
animation:metalSweep 7s ease-in-out infinite alternate;
}
@keyframes metalSweep{from{background-position:0% 0}to{background-position:100% 0}}
/* ── texture & chrome ── */
.grain{
position:fixed;inset:-150%;z-index:9000;pointer-events:none;opacity:.032;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
0%,100%{transform:translate(0,0)}16%{transform:translate(-3%,2%)}33%{transform:translate(2%,-3%)}
50%{transform:translate(-2%,-2%)}66%{transform:translate(3%,1%)}83%{transform:translate(-1%,3%)}
}
.scrollprog{position:fixed;top:0;left:0;right:0;height:3px;z-index:8000;background:rgba(20,20,18,.06)}
.scrollprog i{display:block;height:100%;width:0;
background:linear-gradient(90deg,var(--gold-deep),var(--gold-ink) 55%,var(--gold-mid))}
/* custom cursor — a plain ink dot. No blend mode: on paper, difference
blending turns gold into an electric blue that reads as a bug. */
.cursor{
position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
width:14px;height:14px;border-radius:50%;background:var(--ink);
display:grid;place-items:center;
transform:translate(-50%,-50%);opacity:0;
transition:width .3s var(--bounce),height .3s var(--bounce),background .3s,opacity .3s;
}
.cursor span{font-family:var(--f-mono);font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink);opacity:0;transition:opacity .2s;font-weight:500}
.cursor.live{opacity:1}
.cursor.big{width:76px;height:76px;background:var(--gold)}
.cursor.big span{opacity:1}
@media (hover:none),(max-width:900px){.cursor{display:none}}
/* ── preloader ── */
.preload{position:fixed;inset:0;z-index:9999;background:var(--paper);display:grid;place-items:center;
transition:opacity .6s var(--out),visibility .6s}
/* Only JS can dismiss it, so without JS it must never appear. */
html:not(.js) .preload{display:none}
.is-loaded .preload{opacity:0;visibility:hidden}
.preload__word{display:flex;gap:.01em;font-family:var(--f-logo);font-weight:400;
font-size:clamp(2.4rem,10vw,6rem);line-height:.9;letter-spacing:.004em}
.preload__word span{display:inline-block;opacity:0;transform:translateY(120%);
animation:letterIn .6s var(--bounce) forwards;color:var(--ink)}
.preload__word .l6,.preload__word .l7,
.preload__word .l8,.preload__word .l9{color:var(--gold-ink)}
.preload__word .l1{animation-delay:.02s}.preload__word .l2{animation-delay:.07s}
.preload__word .l3{animation-delay:.12s}.preload__word .l4{animation-delay:.17s}
.preload__word .l5{animation-delay:.22s}.preload__word .l6{animation-delay:.27s}
.preload__word .l7{animation-delay:.32s}.preload__word .l8{animation-delay:.37s}
.preload__word .l9{animation-delay:.42s}
@keyframes letterIn{to{opacity:1;transform:none}}
.preload__bar{width:min(240px,50vw);height:2px;background:var(--line);margin:26px auto 0;overflow:hidden}
.preload__bar i{display:block;height:100%;width:0;background:var(--gold-ink);animation:barFill 1s var(--out) .3s forwards}
@keyframes barFill{to{width:100%}}
/* ── nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;align-items:center;gap:1.4rem;
padding:1.15rem var(--pad);transition:background .4s,border-color .4s,padding .4s;
border-bottom:1px solid transparent}
.nav.stuck{background:rgba(251,250,248,.86);backdrop-filter:blur(14px);border-color:var(--line);padding:.8rem var(--pad)}
.brand{display:flex;align-items:center;gap:.5rem}
/* The wordmark. Live text rather than an image file: crisp at any size, weighs nothing,
selectable, and the gold stays bound to the palette token instead of being baked into
a PNG. Swap in an ![]()
here if an exact asset is ever needed. */
/* The wordmark is now assets/logo.svg — real Anton outlines baked into paths, so it
needs no webfont, never reflows, and stays sharp at any size. width/height carry the
intrinsic ratio so it reserves space before load instead of shifting the nav. */
.brand__mark{height:1.15rem;width:auto;max-width:none;display:block}
.foot .brand__mark{height:1.05rem}
.brand em,.brand__mark em{font-style:normal;color:var(--gold)}
.brand__dot{width:8px;height:8px;background:var(--sig);border-radius:50%;display:block;
animation:pip 2.4s var(--out) infinite}
@keyframes pip{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.62);opacity:.45}}
.nav__links{display:flex;gap:1.7rem;margin-left:auto}
.nav__links a{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3);position:relative;padding:.3rem 0;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--gold-ink);
transition:width .3s var(--out)}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
/* ── the ink button (nav CTA + card CTA share it) ──
Ink wipes up from the bottom, the label crosses to paper, the arrow steps out.
The wipe is a ::before transform, not a background-color transition, so it
animates on the compositor and stays smooth on a phone. */
.btn--ink,.nav__cta{
position:relative;overflow:hidden;isolation:isolate;
font-family:var(--f-mono);font-weight:500;font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
border:1.5px solid var(--ink);color:var(--ink);background:transparent;
padding:.68rem 1.15rem;display:inline-flex;align-items:center;gap:.55rem;
transition:transform .28s var(--out),box-shadow .28s var(--out),color .28s var(--out)}
.btn--ink::before,.nav__cta::before{content:"";position:absolute;inset:0;z-index:-1;
background:var(--ink);transform:translateY(100%);transition:transform .42s var(--out)}
.btn--ink>*,.nav__cta>*{position:relative}
.btn--ink:hover,.nav__cta:hover,
.btn--ink:focus-visible,.nav__cta:focus-visible{color:var(--paper);box-shadow:6px 6px 0 var(--gold)}
.btn--ink:hover::before,.nav__cta:hover::before,
.btn--ink:focus-visible::before,.nav__cta:focus-visible::before{transform:translateY(0)}
.btn--ink:active,.nav__cta:active{box-shadow:2px 2px 0 var(--gold)}
.btn--ink .btn__ar,.nav__cta .btn__ar{font-style:normal;transition:transform .3s var(--out)}
.btn--ink:hover .btn__ar,.nav__cta:hover .btn__ar{transform:translateX(4px)}
@media(max-width:820px){.nav__links{display:none}.nav__cta{margin-left:auto}}
/* ── hero ── */
.hero{min-height:100svh;display:grid;place-items:center;position:relative;padding:7rem var(--pad) 4.5rem;overflow:hidden}
.hero__bg{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(130px)}
.orb.o1{width:560px;height:560px;background:var(--gold);opacity:.16;top:-160px;left:-140px;
animation:float1 20s var(--out) infinite alternate}
.orb.o2{width:440px;height:440px;background:#C9B79A;opacity:.2;bottom:-180px;right:-140px;
animation:float2 24s var(--out) infinite alternate}
@keyframes float1{to{transform:translate(120px,80px) scale(1.2)}}
@keyframes float2{to{transform:translate(-100px,-70px) scale(1.15)}}
.hero__in{position:relative;z-index:2;width:100%;max-width:1180px}
.hero__h1{font-family:var(--f-disp);font-weight:800;line-height:.88;letter-spacing:-.038em;
/* scales to the SHORTER of width/height so the CTA stays above the fold on laptops */
/* sized for the LONGEST line ("SAME OUTPUT."), not for height — two wide lines
overflow at the scale three short ones were happy at */
font-size:clamp(2.5rem,min(10.4vw,15vh),8.4rem);text-transform:uppercase}
.hero__h1 .line{display:block;overflow:hidden}
.hero__h1 .w{display:inline-block;transform:translateY(105%);animation:wordUp .9s var(--out) forwards}
.hero__h1 .line:nth-child(1) .w{animation-delay:.9s}
.hero__h1 .line:nth-child(2) .w{animation-delay:1s}
.hero__h1 .line:nth-child(3) .w{animation-delay:1.1s}
@keyframes wordUp{to{transform:none}}
.hero__sub{max-width:48ch;color:var(--ink-2);font-size:clamp(1.02rem,1.5vw,1.2rem);margin-top:1.9rem}
.hero__cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.4rem}
.hero__stats{display:flex;gap:2.8rem;flex-wrap:wrap;margin-top:3.2rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.hero__stats b{font-family:var(--f-disp);font-weight:800;font-size:2.1rem;color:var(--gold-ink);
display:block;line-height:1;letter-spacing:-.03em}
.hero__stats span{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.hero__scroll{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);
font-family:var(--f-mono);font-size:.64rem;letter-spacing:.26em;color:var(--ink-3);
display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hero__scroll span{width:1px;height:38px;background:linear-gradient(var(--gold-ink),transparent);animation:scr 2s var(--out) infinite}
@keyframes scr{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--f-mono);font-weight:500;
font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;padding:1.05rem 1.9rem;
border:1.5px solid transparent;transition:transform .25s var(--out),box-shadow .25s var(--out),background .25s,color .25s}
.btn--gold{background:var(--gold);color:var(--ink);box-shadow:var(--hard-gold)}
.btn--gold:hover{box-shadow:10px 10px 0 var(--gold-deep)}
.btn--gold:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--gold-deep)}
.btn--ghost{border-color:var(--line-2);color:var(--ink);background:rgba(255,255,255,.6)}
.btn--ghost:hover{border-color:var(--ink);box-shadow:6px 6px 0 rgba(20,20,18,.16)}
.btn--lg{font-size:.88rem;padding:1.25rem 2.4rem}
.btn__ar{transition:transform .3s var(--out)}
.btn:hover .btn__ar{transform:translateX(5px)}
/* ── marquee ── */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
background:var(--paper-2);overflow:hidden;padding:.95rem 0}
.marquee__track{display:flex;gap:2.6rem;width:max-content;animation:mq 36s linear infinite}
.marquee__track span{font-family:var(--f-disp);font-weight:600;font-size:1.25rem;letter-spacing:-.03em;
color:var(--ink-2);white-space:nowrap;display:flex;align-items:center;gap:2.6rem}
.marquee__track span::after{content:"◆";color:var(--gold);font-size:.62rem}
@keyframes mq{to{transform:translateX(-50%)}}
/* ── sections ── */
.sec{padding:clamp(3.4rem,6vw,5.6rem) var(--pad);position:relative}
.sec--alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* The head opens with a rule so each section has a visible starting line, and closes
tighter against its own content than the gap between sections — otherwise the header
floats equidistant between two sections and reads as belonging to neither. */
.sec__head{max-width:1180px;margin:0 auto 2.6rem;padding-top:1.9rem;border-top:1px solid var(--line)}
.kick{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-ink);display:inline-flex;align-items:center;gap:.65rem;margin-bottom:.9rem}
.kick::before{content:"";width:24px;height:2px;background:var(--gold);flex:0 0 auto;border-radius:1px}
h2{font-family:var(--f-disp);font-weight:800;font-size:clamp(2.1rem,5.4vw,4rem);line-height:1.02;
letter-spacing:-.026em;max-width:18ch}
.sec__lead{color:var(--ink-2);max-width:50ch;margin-top:1.1rem;font-size:1.04rem}
/* reveal */
/* Gated on .js (set by an inline script in ). If main.js fails to parse or never
loads, nothing is hidden and the page still reads — the alternative is a blank site. */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--out),transform .8s var(--out)}
.reveal.in{opacity:1;transform:none}
/* ── work grid ── */
.workgrid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.1rem}
.wcard{position:relative;background:#fff;border:1px solid var(--line);padding:1.9rem 1.7rem 1.7rem;
overflow:hidden;transition:transform .35s var(--out),border-color .35s,box-shadow .35s var(--out)}
/* The lift is paired with a scale that grows the box by MORE than the translate shifts
it, so the right and bottom edges never retreat past the pointer. Without the scale
this oscillates: hover → lift → edge leaves the cursor → un-hover → drop → re-hover. */
.wcard:hover{transform:translate(-3px,-3px) scale(1.03);border-color:var(--gold);box-shadow:9px 9px 0 var(--gold-deep)}
.wcard__n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--gold-ink)}
.wcard h3{font-family:var(--f-disp);font-weight:700;font-size:1.4rem;letter-spacing:-.018em;
margin:.7rem 0 .55rem;line-height:1.12}
.wcard p{color:var(--ink-2);font-size:.94rem}
.wcard__viz{aspect-ratio:320/128;margin-top:1.3rem;background:var(--paper-2);border:1px solid var(--line);
position:relative;overflow:hidden}
.wcard__tag{margin-top:1.1rem;display:inline-block;font-family:var(--f-mono);font-size:.65rem;
letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--sig);padding:.32rem .6rem}
.wcard__soon{background:var(--gold-wash);color:var(--gold-ink);border:1px solid var(--gold)}
/* inline-block badge + inline-flex button share a line otherwise */
.wcard__soon{display:block;width:fit-content;margin-bottom:.2rem}
/* ── card 06: solid polished gold ──
The one card asking for the visitor's project is a gold bar, not a white card with
gold trim.
THE SWEEP MUST SIT UNDER THE TYPE. A white veil lightens the glyph exactly as much as
the ground, so both converge on white and contrast collapses — the title measured
13.05:1 clean and 1.70:1 with the sweep composited over it. This is the same rule
already documented for .step__free; card 06 originally inverted it. Decorative layers
are z-index 1, the content face is 2. */
.wcard--feature{
border-color:var(--gold-deep);
background:
/* NO stop darker than #C08E24. The dark bands, not the bright ones, are what
break dark type on gold — at #A8781A the blurb measured 3.53:1. */
linear-gradient(148deg,
#C08E24 0%, #D9A441 12%, #F2D284 26%, #DDA94E 38%,
#C6912A 50%, #EBC66C 64%, #D3A03A 76%, #F4D68E 88%, #C89626 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(110,78,18,.5),
0 10px 26px -14px rgba(110,78,18,.9);
}
/* slow polish drift, so the metal never looks like a flat swatch */
.wcard--feature{background-size:150% 150%;animation:goldDrift 12s ease-in-out infinite alternate}
@keyframes goldDrift{from{background-position:0% 0%}to{background-position:100% 100%}}
/* bright specular that crosses the whole bar */
.wcard--feature::after{
content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:34%;pointer-events:none;z-index:1;
background:linear-gradient(102deg,transparent 20%,rgba(255,255,255,.72) 50%,transparent 80%);
transform:translateX(-220%) rotate(6deg);
animation:featSheen 5.2s var(--out) infinite;
}
@keyframes featSheen{0%,58%{transform:translateX(-220%) rotate(6deg)}
100%{transform:translateX(360%) rotate(6deg)}}
/* engraved inner edge */
.wcard--feature::before{
content:"";position:absolute;inset:6px;pointer-events:none;z-index:1;border-radius:2px;
border:1px solid rgba(255,255,255,.42);
box-shadow:inset 0 0 0 1px rgba(110,78,18,.28);
animation:featRing 3.6s var(--out) infinite;
}
@keyframes featRing{0%,100%{opacity:.35}50%{opacity:.85}}
/* everything on the bar goes dark — verified against the LIGHTEST gradient stop */
/* content rides above the sweep and the engraved ring */
.wcard--feature .wcard__face{position:relative;z-index:2}
.wcard--feature .wcard__n{color:#2A2208}
.wcard--feature h3{color:var(--ink)}
.wcard--feature p{color:#2A2417}
.wcard--feature .wcard__viz{background:rgba(20,20,18,.13);border-color:rgba(110,78,18,.45)}
.wcard--feature .vz-slot{stroke:rgba(20,20,18,.5)}
.wcard--feature .vz-plus{fill:var(--ink)}
.wcard--feature .wcard__soon{background:rgba(20,20,18,.88);color:#F2D98F;border-color:transparent}
.wcard--feature .btn--ink{border-color:var(--ink);color:var(--ink)}
.wcard--feature .btn--ink::before{background:var(--ink)}
.wcard--feature .btn--ink:hover{color:#F0CE7C;box-shadow:6px 6px 0 rgba(110,78,18,.85)}
.wcard--feature:hover{border-color:var(--ink);box-shadow:
inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(110,78,18,.5),
9px 9px 0 var(--gold-deep)}
@media(prefers-reduced-motion:reduce){
.wcard--feature{animation:none}
.wcard--feature::before{opacity:.6;animation:none}
.wcard--feature::after{display:none}
}
/* ── "what that's worth" ──
The panel is absolutely positioned over the card, so opening it causes ZERO layout
shift — the grid never reflows and the cards beside it never jump. */
.wcard{position:relative}
/* the entire card flips, so the whole surface has to read as clickable */
.wcard.has-worth,.wcard--feature{cursor:pointer;-webkit-tap-highlight-color:transparent}
.wcard.has-worth:focus-within{outline:3px solid var(--gold-ink);outline-offset:3px}
.wcard__face{transition:opacity .3s var(--out),transform .42s var(--out)}
.wcard.open .wcard__face{opacity:0;transform:translateY(-14px);pointer-events:none}
.wcard__more{margin-top:1.1rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--gold-ink);display:inline-flex;align-items:center;gap:.45rem;
border-bottom:1px solid transparent;transition:border-color .25s,gap .25s var(--out)}
.wcard__more .btn__ar{font-style:normal;transition:transform .3s var(--out)}
.wcard:hover .wcard__more{border-color:var(--gold)}
.wcard:hover .wcard__more .btn__ar{transform:translateX(4px)}
.wcard__more--cta{margin-top:1.1rem}
.worth{position:absolute;inset:0;background:#fff;padding:1.5rem 1.5rem 1.4rem;
display:flex;flex-direction:column;align-items:flex-start;
opacity:0;transform:translateY(18px);transition:opacity .34s var(--out),transform .46s var(--out)}
.wcard.open .worth{opacity:1;transform:none}
.worth[hidden]{display:none}
.worth>*{opacity:0;transform:translateY(10px)}
.wcard.open .worth>*{animation:worthIn .5s var(--out) forwards}
.wcard.open .worth>*:nth-child(2){animation-delay:.05s}
.wcard.open .worth>*:nth-child(3){animation-delay:.10s}
.wcard.open .worth>*:nth-child(4){animation-delay:.16s}
.wcard.open .worth>*:nth-child(5){animation-delay:.22s}
.wcard.open .worth>*:nth-child(6){animation-delay:.27s}
.wcard.open .worth>*:nth-child(7){animation-delay:.32s}
@keyframes worthIn{to{opacity:1;transform:none}}
.worth__back{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--ink-3);transition:color .25s}
.worth__back:hover{color:var(--ink)}
.worth__k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-ink);margin-top:.8rem}
.worth__hrs{margin-top:.8rem;font-size:.92rem;line-height:1.5;color:var(--ink-2);max-width:34ch}
.worth__hrs b{color:var(--ink);font-weight:600;white-space:nowrap}
.worth__yr{margin-top:.85rem}
.worth__big{font-family:var(--f-disp);font-weight:800;font-size:clamp(2.2rem,5vw,2.9rem);line-height:1;
letter-spacing:-.045em;color:var(--gold-ink);display:block;font-variant-numeric:tabular-nums}
.worth__yr span{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-3);display:block;margin-top:.4rem}
.worth__pay{margin-top:.85rem;font-size:.92rem;line-height:1.5;color:var(--ink-2);max-width:36ch}
.worth__pay b{color:var(--ink);font-weight:600}
.worth__cta{margin-top:auto;width:100%;justify-content:center}
/* ═══════════ CARD SCENES ═══════════
One 320×128 stage per card, one 6s loop, one visual language:
1px strokes, grey = what already exists, gold = the part I add.
Two invariants, both load-bearing:
• Every animated element's BASE style is its finished frame. Under
prefers-reduced-motion all animation is killed, so the resting state
has to be a complete picture, not an empty box.
• Every animation carries fill-mode `both`, so a staggered element shows
its 0% frame during its delay instead of flashing the finished frame
first and snapping back.
Loops stay paused until vizPass() marks the card on screen. */
.vz{display:block;width:100%;height:100%}
/* Specificity matters here: every scene rule below uses the `animation` SHORTHAND,
which resets animation-play-state to `running`. A plain `.vz *` gate ties on
specificity and loses on order, so the gate has to outweigh it. */
.wcard__viz:not(.viz-on) .vz *{animation-play-state:paused}
/* shared marks */
.vz-card,.vz-tile{fill:#fff;stroke:var(--line-2);stroke-width:1}
.vz-out{stroke:var(--gold);stroke-width:1.3}
.vz-bar{fill:#D7D3C9}
.vz-cell{fill:#DFDBD1}
.vz-chip{fill:var(--line-2)}
.vz-rule,.vz-fill,.vz-gold{fill:var(--gold)}
.vz-wire{stroke:var(--line-2);stroke-width:1.4;fill:none}
.vz-wire--soft{stroke:var(--line)}
.vz-dash{stroke-dasharray:4 5}
.vz-pkt{fill:var(--gold-ink)}
.vz-fill,.vz-row{transform-box:fill-box;transform-origin:left center}
/* 01 listing — the packet crosses, then the record fills field by field */
@keyframes vzPkt{0%,4%{transform:translateX(0);opacity:0}9%{opacity:1}
24%{transform:translateX(30px);opacity:1}28%,100%{transform:translateX(30px);opacity:0}}
@keyframes vzFill{0%,26%{transform:scaleX(0)}44%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.vz-pkt{opacity:0;animation:vzPkt 6s cubic-bezier(.5,0,.5,1) infinite both}
.r1{animation:vzFill 6s var(--out) infinite both}
.r2{animation:vzFill 6s var(--out) .11s infinite both}
.r3{animation:vzFill 6s var(--out) .22s infinite both}
.r4{animation:vzFill 6s var(--out) .33s infinite both}
/* 02 report — the sources stay; what they emit lands in the page, then it's signed off */
.vz-chipfly{fill:var(--gold);transform-box:fill-box;transform-origin:center}
@keyframes vzChip1{0%,3%{transform:translate(0,0);opacity:0}8%{opacity:1}
30%{transform:translate(96px,38px);opacity:1}34%,100%{transform:translate(96px,38px);opacity:0}}
@keyframes vzChip2{0%,9%{transform:translate(0,0);opacity:0}14%{opacity:1}
36%{transform:translate(96px,-2px);opacity:1}40%,100%{transform:translate(96px,-2px);opacity:0}}
@keyframes vzChip3{0%,15%{transform:translate(0,0);opacity:0}20%{opacity:1}
42%{transform:translate(96px,-42px);opacity:1}46%,100%{transform:translate(96px,-42px);opacity:0}}
.c1{opacity:0;animation:vzChip1 6s cubic-bezier(.45,0,.35,1) infinite both}
.c2{opacity:0;animation:vzChip2 6s cubic-bezier(.45,0,.35,1) infinite both}
.c3{opacity:0;animation:vzChip3 6s cubic-bezier(.45,0,.35,1) infinite both}
.d1{animation:vzFill 6s var(--out) .04s infinite both}
.d2{animation:vzFill 6s var(--out) .16s infinite both}
.d3{animation:vzFill 6s var(--out) .28s infinite both}
.d4{animation:vzFill 6s var(--out) .40s infinite both}
.vz-seal circle{fill:var(--gold)}
.vz-seal .vz-tick{stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes vzSeal{0%,52%{transform:scale(0);opacity:0}64%,92%{transform:scale(1);opacity:1}
100%{transform:scale(0);opacity:0}}
.vz-seal{transform-box:fill-box;transform-origin:center;animation:vzSeal 6s var(--bounce) infinite both}
/* 03 reconcile — both lists stay put; the links get drawn and the mismatch is called out */
.vz-row{fill:#fff;stroke:var(--line-2);stroke-width:1}
.vz-link{stroke:var(--gold);stroke-width:1.6;fill:none;stroke-dasharray:148;stroke-dashoffset:0}
.vz-link--bad{stroke:var(--err);stroke-dasharray:5 5}
.vz-node circle{fill:var(--gold);stroke:#fff;stroke-width:1.5}
.vz-node .vz-tick{stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.vz-node--bad circle{fill:var(--err)}
.vz-bang{fill:#fff}
@keyframes vzDraw{0%,6%{stroke-dashoffset:148}34%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:148}}
@keyframes vzNode{0%,32%{transform:scale(0);opacity:0}46%,92%{transform:scale(1);opacity:1}
100%{transform:scale(0);opacity:0}}
.vz-node{transform-box:fill-box;transform-origin:center}
.k1{animation:vzDraw 6s var(--out) infinite both}
.k2{animation:vzDraw 6s var(--out) .12s infinite both}
.k3{animation:vzDraw 6s var(--out) .24s infinite both}
.k4{animation:vzDraw 6s var(--out) .36s infinite both}
.n1{animation:vzNode 6s var(--bounce) infinite both}
.n2{animation:vzNode 6s var(--bounce) .12s infinite both}
.n3{animation:vzNode 6s var(--bounce) .24s infinite both}
.n4{animation:vzNode 6s var(--bounce) .36s infinite both}
/* 04 bridge — three tools that were never built to talk, on a schedule */
.vz-env,.vz-box{fill:#fff;stroke:var(--line-2);stroke-width:1}
.vz-flap{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes vzHop{0%,8%{transform:translateX(0);opacity:0}14%{opacity:1}
40%{transform:translateX(60px);opacity:1}46%,100%{transform:translateX(60px);opacity:0}}
.p1{opacity:0;animation:vzHop 6s cubic-bezier(.5,0,.5,1) infinite both}
.p2{opacity:0;animation:vzHop 6s cubic-bezier(.5,0,.5,1) 1.1s infinite both}
/* a stepping tick-pill reads as "recurring" far better than a 10px clock face */
.vz-sched rect{fill:#fff;stroke:var(--line-2);stroke-width:1}
.vz-sched circle{fill:var(--line-2)}
@keyframes vzTick{0%,20%{fill:var(--gold);r:3.4}26%,100%{fill:var(--line-2);r:2.6}}
.vz-sched .t1{animation:vzTick 6s steps(1,end) infinite both}
.vz-sched .t2{animation:vzTick 6s steps(1,end) 1.5s infinite both}
.vz-sched .t3{animation:vzTick 6s steps(1,end) 3s infinite both}
.vz-sched .t4{animation:vzTick 6s steps(1,end) 4.5s infinite both}
/* 05 tool — one field, one button, one answer */
.vz-input{fill:#fff;stroke:var(--line-2);stroke-width:1}
.vz-dotlet{fill:var(--line-2)}
.vz-btn rect{fill:var(--gold)}
.vz-cursor{fill:var(--ink);stroke:#fff;stroke-width:1}
@keyframes vzType{0%,12%{transform:scaleX(0)}30%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.vz-type{animation:vzType 6s steps(14,end) infinite both}
@keyframes vzCur{0%{transform:translate(150px,124px)}
12%,26%{transform:translate(108px,60px)}
40%,46%{transform:translate(232px,60px)}
60%,90%{transform:translate(250px,74px)}
100%{transform:translate(150px,124px)}}
.vz-cursor{transform-box:view-box;transform-origin:0 0;animation:vzCur 6s var(--out) infinite both}
@keyframes vzPress{0%,42%{transform:scale(1)}47%{transform:scale(.93)}54%,100%{transform:scale(1)}}
.vz-btn{transform-box:fill-box;transform-origin:center;animation:vzPress 6s var(--out) infinite both}
.vz-resrow{fill:var(--gold-wash);stroke:var(--gold);stroke-width:1}
.vz-res .vz-tick{stroke:var(--gold-ink);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes vzRes{0%,48%{transform:translateY(10px);opacity:0}62%,90%{transform:translateY(0);opacity:1}
100%{transform:translateY(10px);opacity:0}}
.vz-res{transform-box:fill-box;transform-origin:center;animation:vzRes 6s var(--out) infinite both}
/* 06 open — an empty slot, drawn as one */
.vz-slot{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:8 7}
@keyframes vzAnts{to{stroke-dashoffset:-30}}
.vz-slot{animation:vzAnts 3s linear infinite both}
.vz-plus{fill:var(--gold);transform-box:fill-box;transform-origin:center}
@keyframes vzPlus{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.vz-plus{animation:vzPlus 3.4s var(--out) infinite both}
/* ── proof band ──
Sits under the work grid as the one piece of real evidence on the page. Deliberately
plain: a claim about a real business shouldn't need decoration to be believed. */
.proof{max-width:1180px;margin:3.2rem auto 0;padding:1.9rem 2rem;
background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--gold)}
.proof__k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-ink);display:block}
.proof__line{margin-top:.7rem;font-size:1.08rem;color:var(--ink-2);max-width:62ch}
.proof__line b{color:var(--ink);font-weight:600}
.proof__fig{display:flex;align-items:baseline;gap:.85rem;margin-top:1.1rem;flex-wrap:wrap}
.proof__fig b{font-family:var(--f-disp);font-weight:800;font-size:clamp(2rem,4.5vw,2.7rem);
letter-spacing:-.04em;color:var(--gold-ink);line-height:1;font-variant-numeric:tabular-nums}
.proof__fig span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.07em;
text-transform:uppercase;color:var(--ink-3)}
@media(max-width:600px){.proof{padding:1.5rem 1.3rem}}
/* ── steps ── */
.steps{max-width:1180px;margin:0 auto;list-style:none;position:relative}
.steps::before{content:"";position:absolute;left:29px;top:40px;bottom:40px;width:1px;
background:linear-gradient(var(--gold),transparent)}
@media(max-width:640px){.steps::before{display:none}}
.step{display:flex;gap:1.6rem;padding:1.5rem 0;align-items:flex-start}
.step__n{width:58px;height:58px;flex-shrink:0;border:1px solid var(--line-2);background:var(--paper);
display:grid;place-items:center;font-family:var(--f-disp);font-weight:800;font-size:1.05rem;
letter-spacing:-.02em;color:var(--gold-ink);position:relative;z-index:1;transition:all .35s var(--out)}
/* .is-active is the touch equivalent of :hover — set by stepPass() as each number
passes through the upper-middle of the screen, since a phone has no hover state
and these would otherwise sit inert the whole way down. */
.step:hover .step__n,
.step.is-active .step__n{border-color:var(--gold);transform:rotate(-5deg) scale(1.06);box-shadow:4px 4px 0 var(--gold-deep)}
.step h3{font-family:var(--f-disp);font-weight:700;font-size:1.25rem;
letter-spacing:-.018em;margin-bottom:.4rem}
.step p{color:var(--ink-2);font-size:.97rem;max-width:60ch}
/* ── the FREE badge ──
A pill with depth, a live pip, and a highlight that crosses every few seconds.
The sweep sits at z-index 1 and the label at 2 so the shine passes UNDER the
letters: run it over the top and white-on-green briefly drops to ~2.9:1. */
.step__free{
position:relative;isolation:isolate;overflow:hidden;
display:inline-flex;align-items:center;gap:.34rem;
font-family:var(--f-mono);font-weight:500;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
color:#fff;padding:.32rem .62rem .32rem .5rem;margin-left:.55rem;vertical-align:3px;border-radius:100px;
background:linear-gradient(140deg,#15855F,var(--sig) 52%,#0A5540);
box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 10px -4px rgba(15,107,79,.85);
transition:transform .32s var(--bounce),box-shadow .32s var(--out);
}
.step__free i{position:relative;z-index:2;font-style:normal}
.step__free::before{ /* live pip */
content:"";width:5px;height:5px;border-radius:50%;flex:0 0 auto;z-index:2;
background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);
animation:freePip 2.6s var(--out) infinite;
}
@keyframes freePip{
0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55);opacity:1}
50%{box-shadow:0 0 0 4px rgba(255,255,255,0);opacity:.55}
}
.step__free::after{ /* highlight sweep, behind the label */
content:"";position:absolute;top:0;bottom:0;left:0;width:42%;z-index:1;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
transform:translateX(-240%);
animation:freeShine 5s var(--out) infinite;
}
@keyframes freeShine{0%,64%{transform:translateX(-240%)}100%{transform:translateX(330%)}}
/* the badge lifts with its step — safe to move, it isn't the hover target */
.step:hover .step__free,.step.is-active .step__free{
transform:translateY(-1px) scale(1.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 6px 14px -5px rgba(15,107,79,.95)}
@media(prefers-reduced-motion:reduce){.step__free::after{display:none}}
/* ── me ── */
.me{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:center}
@media(max-width:900px){.me{grid-template-columns:1fr}}
.me__txt{padding-top:1.9rem;border-top:1px solid var(--line)}
.me__txt p{color:var(--ink-2);margin-top:1.1rem;max-width:52ch}
.me__facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
border:1px solid var(--line);margin-top:2.2rem}
.me__facts div{background:var(--paper);padding:1.1rem 1.2rem}
.me__facts b{font-family:var(--f-disp);font-weight:700;font-size:1.02rem;display:block;letter-spacing:-.015em}
.me__facts span{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
/* tilt card — the one place the ink shows up in this section */
.card3d{aspect-ratio:1.6/1;background:linear-gradient(150deg,#1D1D1A,var(--ink));
border:1px solid var(--gold-deep);padding:1.7rem;display:flex;flex-direction:column;justify-content:space-between;
position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .25s var(--out);
box-shadow:var(--hard-gold)}
.card3d__sheen{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 35%,rgba(245,217,139,.18) 48%,transparent 60%);
transform:translateX(-100%);transition:transform .7s var(--out)}
.card3d:hover .card3d__sheen{transform:translateX(100%)}
.card3d__k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.22em;color:var(--gold)}
.card3d__n{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.35rem,3.2vw,1.9rem);
letter-spacing:-.028em;line-height:1;color:var(--paper)}
.card3d__r{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
color:#A9A69E;margin-top:-.6rem}
.card3d__m{font-family:var(--f-mono);font-size:.76rem;color:var(--paper);border-bottom:1px solid var(--gold);align-self:flex-start}
/* ── FAQ ──
Native gives an exclusive accordion — opening one closes the
rest — with zero JS, so it still works if main.js ever fails. The marker is a gold
plus drawn in a pseudo-element that turns into a × when open. */
.faqs{max-width:860px;margin:0 auto}
.faq{border-top:1px solid var(--line-2)}
.faq:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{
list-style:none;cursor:pointer;position:relative;
padding:1.15rem 3rem 1.15rem 0;
font-family:var(--f-disp);font-weight:600;font-size:1.12rem;letter-spacing:-.015em;
transition:color .25s var(--out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-ink)}
.faq summary::after{
content:"";position:absolute;right:.35rem;top:50%;width:14px;height:14px;
transform:translateY(-50%);
background:
linear-gradient(var(--gold-ink),var(--gold-ink)) center/14px 2px no-repeat,
linear-gradient(var(--gold-ink),var(--gold-ink)) center/2px 14px no-repeat;
transition:transform .35s var(--out)}
.faq[open] summary{color:var(--gold-ink)}
.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq__a{padding:0 3rem 1.3rem 0;color:var(--ink-2);max-width:64ch}
.faq[open] .faq__a{animation:faqIn .4s var(--out)}
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.faq[open] .faq__a{animation:none}}
/* ── cta — the single dark moment ── */
.cta{padding:clamp(5rem,11vw,9rem) var(--pad);text-align:center;color:var(--paper);
background:radial-gradient(760px circle at 50% 0%,rgba(217,164,65,.16),transparent 62%),var(--ink)}
.cta__in{max-width:900px;margin:0 auto}
.cta h2{margin:0 auto;max-width:15ch}
.cta p{color:#C6C3BB;margin-top:1.2rem;max-width:46ch;margin-inline:auto}
.cta .btn{margin-top:2.2rem}
/* on ink, the foil can use its bright values again */
.cta .foil{background:linear-gradient(100deg,#8A6218,#D9A441 24%,#F5D98B 44%,#D9A441 64%,#8A6218);
background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* ── footer ── */
.foot{border-top:1px solid var(--line);padding:2.2rem var(--pad);display:flex;gap:1.4rem;
align-items:center;justify-content:space-between;flex-wrap:wrap;
font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3)}
.foot a{color:var(--ink-2)}
.foot a:hover{color:var(--gold-ink)}
/* ═══════════════ START A PROJECT ═══════════════ */
.start{position:fixed;inset:0;z-index:9600;background:var(--paper);display:flex;flex-direction:column;
opacity:0;transform:scale(1.02);transition:opacity .4s var(--out),transform .4s var(--out)}
.start.open{opacity:1;transform:none}
.start[hidden]{display:none}
.start__top{display:flex;align-items:center;gap:1.2rem;padding:1.1rem var(--pad);border-bottom:1px solid var(--line)}
/* ── step tracker ──
Was a row of dots that rendered as stretched gold ellipses: they were flex children
with the default align-items:stretch, so each 7px circle grew to the bar's full height.
Rebuilt as a segmented rail — a filling segment reads as progress far better than a
dot that merely changes colour, and it gives the eye something to travel along. */
.track{display:flex;align-items:center;gap:.8rem;margin-left:auto}
.track__n{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-3);
display:flex;align-items:baseline;gap:1px}
.track__n b{font-family:var(--f-disp);font-weight:800;font-size:1.05rem;color:var(--ink);
letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:inline-block}
.track__n b.roll{animation:trackRoll .42s var(--out)}
@keyframes trackRoll{0%{transform:translateY(-70%);opacity:0}60%{opacity:1}100%{transform:none}}
.track__rail{display:flex;align-items:center;gap:4px}
.seg{width:22px;height:5px;padding:0;border:0;border-radius:3px;background:var(--line);
overflow:hidden;position:relative;
transition:transform .38s var(--bounce),background .3s var(--out)}
.seg>i{display:block;height:100%;width:100%;border-radius:3px;background:var(--gold);
transform:scaleX(0);transform-origin:left center;transition:transform .52s var(--out)}
.seg.is-done>i{transform:scaleX(1)}
.seg.is-now{transform:scaleY(1.9)}
.seg.is-now>i{transform:scaleX(1);
background:linear-gradient(90deg,var(--gold-deep),var(--gold) 45%,var(--gold-deep));
background-size:220% 100%;animation:segShine 2s linear infinite}
@keyframes segShine{to{background-position:-220% 0}}
.seg:not(:disabled){cursor:pointer}
.seg:not(:disabled):hover{transform:scaleY(2.2)}
.seg:disabled{cursor:default}
.seg.just{animation:segPop .45s var(--bounce)}
@keyframes segPop{40%{transform:scaleY(2.6)}100%{transform:scaleY(1)}}
/* the rail is decoration on a phone; the count is the part that has to survive */
@media(max-width:600px){.track__rail{display:none}}
.start__x{width:40px;height:40px;border:1px solid var(--line-2);font-size:.9rem;transition:all .25s}
.start__x:hover{border-color:var(--ink);transform:rotate(90deg)}
.start__bar{height:2px;background:var(--line)}
.start__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-deep),var(--gold-ink) 55%,var(--gold-mid));
transition:width .5s var(--out)}
.start__body{flex:1;overflow-y:auto;overflow-x:hidden;padding:clamp(2rem,6vw,4.5rem) var(--pad) 0}
.q{max-width:820px;margin:0 auto}
.q__k{font-family:var(--f-mono);font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-ink);display:block;margin-bottom:1rem}
.q h2{font-size:clamp(1.8rem,4.6vw,3rem);max-width:20ch;letter-spacing:-.026em}
.q__help{color:var(--ink-2);margin-top:.9rem;max-width:54ch}
.q__help b{color:var(--ink);font-weight:600}
.opts{display:grid;gap:.7rem;margin-top:2rem}
.opts.two{grid-template-columns:1fr 1fr}
.opts.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:700px){.opts.two,.opts.three{grid-template-columns:1fr}}
.opt{position:relative;display:block;background:#fff;border:1px solid var(--line);
padding:1.1rem 3rem 1.1rem 1.2rem;cursor:pointer;overflow:hidden;
transition:transform .25s var(--out),border-color .25s,box-shadow .25s var(--out),background .25s}
.opt:hover{border-color:var(--line-2);box-shadow:5px 5px 0 var(--paper-3)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt .t{font-family:var(--f-disp);font-weight:600;font-size:1.02rem;display:block;letter-spacing:-.015em}
.opt .d{font-size:.85rem;color:var(--ink-3);margin-top:.2rem;display:block}
.opt.sel{border-color:var(--gold);background:var(--gold-wash);box-shadow:5px 5px 0 var(--gold-deep)}
.opt.sel .t{color:var(--gold-ink)}
.opt__tick{position:absolute;top:50%;right:1.1rem;transform:translateY(-50%);width:22px;height:22px;
border:1.5px solid var(--line-2);border-radius:50%;transition:all .3s var(--bounce);background:#fff}
.opt.sel .opt__tick{background:var(--gold);border-color:var(--gold)}
.opt__tick svg{width:22px;height:22px;stroke:var(--ink);stroke-width:3;fill:none;
stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .3s .07s var(--out)}
.opt.sel .opt__tick svg{stroke-dashoffset:0}
.rip{position:absolute;border-radius:50%;background:var(--gold);opacity:.2;
transform:translate(-50%,-50%) scale(0);pointer-events:none}
.rip.go{animation:rip .6s var(--out) forwards}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.6rem}
.chip{position:relative;border:1px solid var(--line);background:#fff;padding:.62rem 1rem;
font-family:var(--f-mono);font-size:.77rem;cursor:pointer;transition:all .25s var(--bounce)}
.chip:hover{border-color:var(--line-2);background:var(--paper-2)}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip.sel{border-color:var(--gold);color:var(--gold-ink);background:var(--gold-wash)}
.qbox{margin-top:1.8rem}
.qlab{font-family:var(--f-disp);font-weight:600;font-size:1.02rem;display:block;margin-bottom:.3rem;letter-spacing:-.015em}
.qhint{font-size:.86rem;color:var(--ink-3);margin-bottom:.7rem;line-height:1.5}
textarea,.tin{width:100%;background:#fff;border:1px solid var(--line-2);color:var(--ink);
padding:.95rem 1.05rem;font-family:var(--f-body);font-size:1rem;line-height:1.55;
transition:border-color .25s,box-shadow .25s;resize:vertical}
textarea::placeholder,.tin::placeholder{color:#9A968C}
textarea:focus,.tin:focus{outline:none;border-color:var(--gold);box-shadow:4px 4px 0 var(--gold-deep)}
/* Deliberately short. The box is a cue about how much to write — a tall empty field
reads as "essay required" and people bounce. Two lines says "a sentence or two",
and autogrow() in main.js expands it for anyone who has more to say. */
textarea{min-height:62px}
textarea.tall{min-height:82px}
.ex{margin-top:.6rem;font-size:.84rem}
.ex summary{cursor:pointer;color:var(--gold-ink);font-family:var(--f-mono);font-size:.73rem;
letter-spacing:.09em;text-transform:uppercase;list-style:none}
.ex summary::-webkit-details-marker{display:none}
.ex summary::before{content:"+ "}
.ex[open] summary::before{content:"– "}
.ex p{margin-top:.6rem;padding:.9rem 1rem;background:var(--paper-2);border-left:2px solid var(--gold);
color:var(--ink-2);line-height:1.6}
.fb{font-family:var(--f-mono);font-size:.72rem;margin-top:.5rem;height:1rem;color:var(--ink-3);transition:color .3s}
.fb.good{color:var(--sig)}
.impact{margin-top:1.6rem;border:1px solid var(--gold);background:var(--gold-wash);
padding:1.3rem 1.5rem;display:none;position:relative;overflow:hidden;box-shadow:var(--hard-gold)}
.impact.on{display:block;animation:popIn .5s var(--bounce)}
@keyframes popIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.impact::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:sheen 2.4s var(--out) .3s}
@keyframes sheen{to{left:130%}}
.impact .n{font-family:var(--f-disp);font-weight:800;font-size:clamp(2.5rem,6.6vw,3.8rem);line-height:1;
letter-spacing:-.035em;color:var(--gold-ink)}
.impact .l{font-family:var(--f-mono);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-2);margin-top:.5rem}
/* ── the docked button bar ──
A gradient that fades to transparent let question text scroll through the buttons.
This is a solid bar instead: ::before paints an opaque backdrop that bleeds past the
panel's padding to both edges, so it reads as a piece of chrome rather than buttons
floating over the copy.
When the panel is scrolled to the end, `.at-end` dissolves the bar — at that point the
buttons have reached their natural place in the flow and no longer need to be docked. */
.qnav{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
position:sticky;bottom:0;z-index:5;margin-top:2rem;padding:1.05rem 0 1.7rem;isolation:isolate}
.qnav::before{
content:"";position:absolute;top:0;bottom:0;left:-50vw;right:-50vw;z-index:-1;
background:var(--paper);border-top:1px solid var(--line);
box-shadow:0 -10px 22px -18px rgba(20,20,18,.5);
transition:opacity .32s var(--out);
}
.start__body.at-end .qnav::before{opacity:0}
/* Next stays out of the way until the screen is answerable, then rises into place. */
[data-next]{opacity:0;transform:translateY(12px);pointer-events:none;
transition:opacity .34s var(--out),transform .34s var(--out)}
[data-next].ready{opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:reduce){[data-next]{transform:none}}
.err{color:var(--err);font-family:var(--f-mono);font-size:.79rem;margin-top:.9rem;display:none}
.err.on{display:block;animation:shake .4s var(--out)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.brief{border:1px solid var(--line);background:#fff;padding:1.8rem;margin-top:1.6rem}
.brow{opacity:0;animation:popIn .5s var(--out) forwards}
.brief h4{font-family:var(--f-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold-ink);margin:1.5rem 0 .4rem;display:flex;gap:.7rem;align-items:center}
.brow:first-child h4{margin-top:0}
.brief p{white-space:pre-wrap;color:var(--ink-2);font-size:.96rem}
.edit{font-family:var(--f-mono);font-size:.65rem;color:var(--sig);text-transform:uppercase;letter-spacing:.09em}
.edit:hover{text-decoration:underline}
.done{text-align:center;max-width:640px;margin:0 auto;padding-top:2rem}
.done__seal{width:92px;height:92px;margin:0 auto 1.6rem;border-radius:50%;
background:linear-gradient(140deg,#F5D98B,var(--gold) 45%,var(--gold-deep));
display:grid;place-items:center;font-size:2.3rem;color:var(--ink);
box-shadow:0 14px 36px -12px rgba(138,98,24,.55);animation:seal .8s var(--bounce)}
@keyframes seal{0%{transform:scale(0) rotate(-40deg);opacity:0}60%{transform:scale(1.14) rotate(6deg)}100%{transform:none;opacity:1}}
.done h2{margin:0 auto}
.done p{color:var(--ink-2);margin-top:1rem}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reveal{opacity:1!important;transform:none!important}
.hero__h1 .w{transform:none!important}
.preload{display:none!important}
}