/* The Stable Company site, index.html styles, carried onto the design board. Light theme only; hero height pinned for artboards. */

/* Layout: a sky hero with three planes, then one 1120px column of serif sections on cream; the process is a printed kit sheet; The Fold gets an ink band. Camp-guide details: double-ruled frames, serif italic captions, paper grain. */
:root{
  --surface:#fcf9f2; --paper:#f4efe5; --ink:#212020; --soft:#4a4845; --muted:#6b675f; --rule:#ddd6c8;
  --sky:#4587c2; --sky-deep:#1f4d77; --cream:#fcf9f2; --paper-light:#e7d6b4; --paper-mid:#cdb38a; --burgundy:#84433e;
  --band:#212020; --band-ink:#fcf9f2; --band-soft:#cfc8bb; --band-rule:#3d3b38;
  --grain-blend:multiply; --grain-op:.07; --panel:#f4efe5; --tile:#fcf9f2; --panel-shadow:0 1px 2px rgba(60,40,20,.05), 0 24px 48px -28px rgba(60,40,20,.28); --show-light:block; --show-dark:none;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Albert Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono:'Source Code Pro', ui-monospace, Menlo, monospace;
  --wrap:1120px; --gutter:48px; --section:clamp(88px, 10vw, 150px);
  --ease-settle:cubic-bezier(.22,.61,.36,1); --ease-drift:cubic-bezier(.45,0,.55,1);
  --dur-quick:300ms; --dur-settle:600ms; --dur-moment:1350ms; --dur-draw:2400ms; --rise:8px;
}
@media (prefers-color-scheme: dark) and (max-width: 0px){ :root:not([data-theme="light"]){
  --surface:#1d1c1b; --paper:#262524; --ink:#fcf9f2; --soft:#d6cfc2; --muted:#a8a196; --rule:#3a3835;
  --sky-deep:#9cc3e6; --band:#2b2a29; --band-rule:#45423e;
  --grain-blend:screen; --grain-op:.05; --panel:#181716; --tile:#181716; --panel-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 28px 56px -26px rgba(0,0,0,.7); --show-light:none; --show-dark:block; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --surface:#1d1c1b; --paper:#262524; --ink:#fcf9f2; --soft:#d6cfc2; --muted:#a8a196; --rule:#3a3835;
  --sky-deep:#9cc3e6; --band:#2b2a29; --band-rule:#45423e;
  --grain-blend:screen; --grain-op:.05; --panel:#181716; --tile:#181716; --panel-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 28px 56px -26px rgba(0,0,0,.7); --show-light:none; --show-dark:block; color-scheme:dark;
}
@media (max-width:1000px){ :root{ --gutter:32px; } }
@media (max-width:640px){ :root{ --gutter:20px; } }

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{margin:0; background:var(--surface); color:var(--ink); font:400 17px/1.6 var(--serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:60; opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .38 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%; height:auto; display:block}
a{color:var(--sky-deep); text-underline-offset:3px; text-decoration-thickness:1px}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--sky); outline-offset:3px; border-radius:4px}
.wrap{max-width:calc(var(--wrap) + var(--gutter)*2); margin:0 auto; padding-inline:var(--gutter)}
.light-only{display:var(--show-light)} .dark-only{display:var(--show-dark)}
h1,h2,h3{font-family:var(--serif); font-weight:400; margin:0; text-wrap:balance}
h2{font-size:clamp(38px, 5vw, 56px); line-height:1.04; letter-spacing:-.02em; max-width:15em}
h3{font-size:24px; line-height:1.25; letter-spacing:-.01em}
p{margin:0}
.lede{font-size:21px; line-height:1.55; color:var(--soft); max-width:32em}
.prose{display:grid; gap:1.05em; max-width:34em}
.prose p{font-size:19px; line-height:1.62}
.label{font:500 12.5px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.note{font-family:var(--sans); font-size:14px; line-height:1.45; color:var(--muted)}

/* buttons */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; padding:15px 30px; border-radius:999px; border:0; background:var(--ink); color:var(--surface); font:400 16px/1 var(--sans); cursor:pointer; text-decoration:none; white-space:nowrap}
.btn .lbl{display:inline-block; transition:transform var(--dur-quick) var(--ease-settle)}
.btn .arr{position:absolute; right:16px; top:50%; margin-top:-7px; width:14px; height:14px; opacity:0; transform:translateX(-6px); transition:opacity var(--dur-quick) var(--ease-settle), transform var(--dur-quick) var(--ease-settle)}
.btn:hover .lbl,.btn:focus-visible .lbl{transform:translateX(-8px)}
.btn:hover .arr,.btn:focus-visible .arr{opacity:1; transform:none}
.btn.small{padding:11px 22px; font-size:14px}
.btn.small .arr{right:10px; width:12px; height:12px; margin-top:-6px}
.btn.cream{background:var(--cream); color:#212020}
.btn.line{background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(252,249,242,.7)}
.btn.line:hover{box-shadow:inset 0 0 0 1px var(--cream)}
.btn.always .lbl{transform:none} .btn.always{gap:12px; padding-right:26px}
.btn.always .arr{position:static; margin:0; opacity:1; transform:none}
.btn.always:hover .arr{transform:translateX(4px)}

/* nav */
.bar{position:fixed; top:0; left:0; right:0; z-index:40; padding-top:env(safe-area-inset-top, 0px); color:var(--cream); transition:background var(--dur-settle) var(--ease-settle), color var(--dur-settle) var(--ease-settle), box-shadow var(--dur-settle) var(--ease-settle)}
.bar .wrap{display:flex; align-items:center; gap:32px; min-height:72px}
.bar .logo{flex:none; display:block; position:relative; height:38px; width:162px}
.bar .logo img{position:absolute; inset:0; height:38px; width:auto; transition:opacity var(--dur-settle) var(--ease-settle)}
.bar .logo .on-light{opacity:0}
.bar nav{display:flex; align-items:center; gap:28px; margin-left:auto}
.bar nav a.lk{font:400 15px/1 var(--sans); color:inherit; opacity:.86; text-decoration:none; padding-block:8px; transition:opacity var(--dur-quick) var(--ease-settle)}
.bar nav a.lk:hover{opacity:1}
.bar .btn{background:var(--cream); color:#212020}
.bar.solid{background:var(--surface); color:var(--ink); box-shadow:0 1px 0 var(--rule)}
.bar.solid .logo .on-sky{opacity:0}
.bar.solid .logo .on-light{opacity:1}
.bar.solid .btn{background:var(--ink); color:var(--surface)}
.menu-btn{display:none; margin-left:auto; background:none; border:0; padding:10px 0; font:400 15px/1 var(--sans); color:inherit; cursor:pointer}
@media (max-width:820px){
  .bar nav{display:none}
  .menu-btn{display:block}
  .bar.open{background:var(--surface); color:var(--ink); box-shadow:0 1px 0 var(--rule)}
  .bar.open .logo .on-sky{opacity:0} .bar.open .logo .on-light{opacity:1}
  .bar.open nav{display:grid; position:absolute; top:100%; left:0; right:0; gap:0; padding:8px var(--gutter) 24px; background:var(--surface); box-shadow:0 1px 0 var(--rule)}
  .bar.open nav a.lk{font-size:22px; font-family:var(--serif); padding-block:14px; border-bottom:1px solid var(--rule); opacity:1}
  .bar.open nav .btn{margin-top:20px; justify-self:start; background:var(--ink); color:var(--surface)}
}
@media (max-width:820px){ .bar.solid .logo .on-light{opacity:1} }
/* the light lockup becomes the cream one in dark mode */
.bar .logo .on-light.dark-swap{display:var(--show-dark)} .bar .logo .on-light.light-swap{display:var(--show-light)}

/* hero */
.hero{position:relative; overflow:hidden; background:var(--sky); color:var(--cream); isolation:isolate}
.hero .sky{position:absolute; inset:-2%; width:104%; height:104%; max-width:none; object-fit:cover; object-position:50% 20%; z-index:-2; animation:skyIn 4.2s var(--ease-settle) both}
.hero::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(31,77,119,.28), rgba(31,77,119,0) 38%, rgba(31,77,119,0) 70%, rgba(31,77,119,.18))}
@keyframes skyIn{from{transform:scale(1.05)}}
.hero .wrap{position:relative; min-height:clamp(600px, var(--hero-vh, 774px), 880px); display:grid; align-content:center; padding-block:calc(120px + env(safe-area-inset-top, 0px)) 96px}
.hero h1{font-size:clamp(60px, 9.4vw, 136px); line-height:.96; letter-spacing:-.03em; max-width:7.5em; text-shadow:0 1px 30px rgba(31,77,119,.3)}
.hero .sub{margin-top:26px; font:400 clamp(21px, 2.2vw, 27px)/1.35 var(--sans); letter-spacing:-.005em; text-shadow:0 1px 18px rgba(31,77,119,.45)}
.hero .sub{max-width:20em}
.hero .go{margin-top:40px}
.hero .in{animation:rise 1.65s var(--ease-settle) both}
.hero .sub.in{animation-delay:0.525s} .hero .go.in{animation-delay:0.9s}
.hero .go .btn.always .arr{transition-duration:330ms}
.hero .go .btn.always:hover .arr{transform:translateX(4.4px)}
.hero .go.in{animation-name:riseGo}
@keyframes riseGo{from{opacity:0; transform:translateY(8.8px)}}
@keyframes rise{from{opacity:0; transform:translateY(var(--rise))}}
.planes{position:absolute; inset:0; z-index:-1; pointer-events:none}
.pl{position:absolute; filter:drop-shadow(0 22px 26px rgba(31,77,119,.28))}
.pl .arrive{animation:arrive 3.3s var(--ease-settle) both}
.pl img{width:100%}
.pl.a{right:5%; top:44%; width:min(36vw, 500px)}
.pl.b{right:34%; top:16%; width:min(12vw, 160px); opacity:.94; filter:drop-shadow(0 10px 14px rgba(31,77,119,.22)) blur(.3px)}
.pl.c{right:9%; top:11%; width:min(7vw, 96px); opacity:.9; filter:drop-shadow(0 6px 10px rgba(31,77,119,.2)) blur(.6px)}
.pl.a .arrive{animation-delay:0.3s} .pl.b .arrive{animation-delay:0.75s} .pl.c .arrive{animation-delay:1.125s}
@keyframes arrive{from{opacity:0; transform:translate(-26px, 22px)}}
.drift{animation:drift 13.5s var(--ease-drift) infinite alternate}
.pl.b .drift{animation-duration:16.5s; animation-delay:-4.5s}
.pl.c .drift{animation-duration:15s; animation-delay:-9s}
@keyframes drift{to{transform:translate3d(4.4px,-6.6px,0)}}
@media (max-width:820px){
  .hero .wrap{min-height:0; align-content:start; padding-block:calc(128px + env(safe-area-inset-top, 0px)) 0}
  .planes{position:relative; inset:auto; height:clamp(260px, 72vw, 420px); margin-top:24px}
  .pl.a{right:2%; top:28%; width:min(64vw, 380px)}
  .pl.b{right:auto; left:6%; top:8%; width:min(20vw, 110px)}
  .pl.c{right:12%; top:0; width:min(12vw, 64px)}
  .drift{animation:none}
}

/* sections */
section{padding-block:var(--section); border-top:1px solid var(--rule)}
section.paper{background:var(--paper); border-top:0}
.hero + section{border-top:0}
.head{display:grid; gap:24px; margin-bottom:64px}
.rows{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.rows > li{display:grid; grid-template-columns:minmax(0, 15em) minmax(0, 1fr); gap:28px; padding-block:22px; border-bottom:1px solid var(--rule); align-items:baseline}
.rows .t{font-size:24px; line-height:1.25; letter-spacing:-.01em}
.rows .d{font-size:18px; line-height:1.55; color:var(--soft); max-width:34em}
@media (max-width:680px){ .rows > li{grid-template-columns:minmax(0,1fr); gap:6px} }

/* department */
.dept{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:72px; align-items:start}
@media (max-width:900px){ .dept{grid-template-columns:minmax(0,1fr); gap:48px} }
.dept .pull{font-size:clamp(26px, 2.6vw, 32px); line-height:1.3; letter-spacing:-.01em; max-width:16em; margin-top:40px; padding-top:28px; border-top:1px solid var(--rule)}
.seat-head{display:flex; justify-content:space-between; gap:16px; padding-bottom:12px; flex-wrap:wrap}

/* kit sheet */
.sheet{background:#f4efe5; color:#212020; border-radius:2px; position:relative; padding:clamp(32px, 4.4vw, 68px) clamp(22px, 4.4vw, 68px) clamp(30px, 3.6vw, 52px); box-shadow:0 1px 0 rgba(0,0,0,.04), 0 30px 60px -40px rgba(60,40,20,.35)}
.sheet::before{content:""; position:absolute; inset:clamp(10px, 1.4vw, 22px); border:2px solid #212020; pointer-events:none}
.sheet .label{color:#6b675f}
.sheet-top{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:36px; position:relative}
.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(18px, 2.4vw, 36px); position:relative}
@media (max-width:920px){ .steps{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:480px){ .steps{grid-template-columns:minmax(0,1fr)} }
.step{display:grid; gap:14px; align-content:start}
.step .top{display:flex; align-items:center; gap:12px}
.step .num{width:40px; height:40px; border-radius:50%; border:2px solid #212020; display:grid; place-items:center; font:400 19px/1 var(--sans)}
.step .art{background:#fcf9f2; box-shadow:inset 0 0 0 1px #ddd6c8; border-radius:2px}
.step .art svg{display:block; width:100%; height:auto}
.step h3{font-size:22px}
.step .cap{font-size:17px; line-height:1.4; font-style:italic; color:#212020}
.step .what{font-family:var(--sans); font-size:14.5px; line-height:1.5; color:#4a4845}
.step .fa{stroke-dasharray:var(--len) var(--len); stroke-dashoffset:0}
.sheet.armed .fa{stroke-dashoffset:var(--len)}
.sheet.armed .fa + path{opacity:0}
.sheet.draw .fa{transition:stroke-dashoffset 1200ms cubic-bezier(.33,1,.68,1); transition-delay:calc(var(--i) * 165ms)}
.sheet.draw .fa + path{transition:opacity 450ms var(--ease-settle); transition-delay:calc(var(--i) * 165ms + 825ms)}
.step:hover .fa{animation:redraw 1.8s var(--ease-settle)}
@keyframes redraw{from{stroke-dashoffset:var(--len)}}
.step .lift{transition:transform var(--dur-moment) var(--ease-settle)}
.step:hover .lift{transform:translate(6px,-8px)}
.key{display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:40px; position:relative}
.key > span{display:inline-flex; align-items:center; gap:10px}

/* beliefs */
.beats{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.beats li{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:32px; padding-block:30px; border-bottom:1px solid var(--rule); align-items:baseline}
.beats .a{font-size:clamp(26px, 3vw, 36px); line-height:1.15; letter-spacing:-.015em}
.beats .b{font-size:19px; line-height:1.5; color:var(--soft)}
@media (max-width:720px){ .beats li{grid-template-columns:minmax(0,1fr); gap:10px} }


/* beliefs reveal: the rule draws, then each line settles in, statement before answer */
#beliefs .beats{border-top:0; position:relative}
#beliefs .beats::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--ink); transform-origin:left center}
#beliefs .beats li{border-bottom:0; position:relative}
#beliefs .beats li::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--rule); transform-origin:left center}
#beliefs.rv-armed h2{opacity:0; transform:translateY(6px)}
#beliefs.rv-armed .beats::before,#beliefs.rv-armed .beats li::after{transform:scaleX(0)}
#beliefs.rv-armed .beats .a,#beliefs.rv-armed .beats .b{opacity:0; transform:translateY(6px)}
#beliefs{--rv-ease:cubic-bezier(.33,1,.68,1)}
#beliefs.rv-go h2{transition:opacity 900ms var(--rv-ease), transform 1125ms var(--rv-ease)}
#beliefs.rv-go .beats::before{transition:transform 1350ms var(--rv-ease) 120ms}
#beliefs.rv-go .beats .a{transition:opacity 900ms var(--rv-ease), transform 1125ms var(--rv-ease); transition-delay:calc(225ms + var(--i) * 180ms)}
#beliefs.rv-go .beats .b{transition:opacity 900ms var(--rv-ease), transform 1125ms var(--rv-ease); transition-delay:calc(345ms + var(--i) * 180ms)}
#beliefs.rv-go .beats li::after{transition:transform 1200ms var(--rv-ease); transition-delay:calc(375ms + var(--i) * 180ms)}
@media (prefers-reduced-motion: reduce){ #beliefs.rv-armed .beats::before,#beliefs.rv-armed .beats li::after{transform:none} #beliefs.rv-armed .beats .a,#beliefs.rv-armed .beats .b,#beliefs.rv-armed h2{transform:none} }
/* the fold band */
.fold-band{background:var(--band); color:var(--band-ink); border-top:0; position:relative; overflow:hidden}
.fold-band .grid{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:72px; align-items:center}
@media (max-width:900px){ .fold-band .grid{grid-template-columns:minmax(0,1fr); gap:48px} .plan{justify-self:start} }
.fold-band h2{font-size:clamp(64px, 9vw, 120px); line-height:.95; letter-spacing:-.03em}
.fold-band .sub{font:400 clamp(20px, 2vw, 24px)/1.4 var(--sans); margin-top:22px}
.fold-band .prose{margin-top:36px}
.fold-band .prose p{color:var(--band-soft)}
.fold-band .btn{margin-top:40px}
.fold-band .label{color:var(--band-soft)}
.plan{background:#f4efe5; color:#212020; position:relative; padding:clamp(26px, 3vw, 40px) clamp(22px, 3vw, 36px) clamp(24px, 2.6vw, 32px); border-radius:6px; box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -28px rgba(0,0,0,.75), 0 8px 18px -10px rgba(0,0,0,.4); width:100%; max-width:425px; justify-self:end}

.plan-top{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; position:relative}
.plan .label{color:#6b675f}
.plan svg{display:block; width:100%; height:auto; position:relative}
.plan svg text{font:500 10.5px var(--mono); letter-spacing:.08em; fill:#212020}
.plan .ptr{animation:march 12s linear infinite}
@keyframes march{to{stroke-dashoffset:-44}}
.keys{list-style:none; margin:clamp(56px, 7vw, 88px) 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px; border-top:1px solid var(--band-rule); padding-top:28px}
@media (max-width:900px){ .keys{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:520px){ .keys{grid-template-columns:minmax(0,1fr); gap:24px} }
.keys li{display:grid; gap:10px; align-content:start}
.keys .k{width:28px; height:28px; border-radius:50%; border:1.5px solid var(--band-ink); display:grid; place-items:center; font:400 13px/1 var(--sans)}
.keys b{font-weight:400; font-size:21px; line-height:1.25; letter-spacing:-.01em}
.keys span:not(.k){font:400 15px/1.5 var(--sans); color:var(--band-soft)}


/* interactive plan */
.plan svg .num{font-family:var(--sans); letter-spacing:0; font-size:11px}
.plan .pk{cursor:pointer; transition:opacity 750ms var(--ease-settle)}
.plan .core{transition:opacity 750ms var(--ease-settle)}
.fold-band[data-active] .plan .pk:not(.on){opacity:.28}
.fold-band[data-active] .plan .core{opacity:.6}
.plan .pk.on circle[r="10"]{fill:#212020} .plan .pk.on .num{fill:#f4efe5}
.plan .leaf{transform-box:fill-box; transition:transform 1350ms var(--ease-settle)}
.plan .leaf.l{transform-origin:0% 100%} .plan .leaf.r{transform-origin:100% 100%}
.plan [data-k="2"].on .leaf.l{transform:rotate(-52deg)} .plan [data-k="2"].on .leaf.r{transform:rotate(52deg)}
.plan .walker{transition:transform 1800ms var(--ease-settle)}
.plan [data-k="2"].on .walker{transform:translateY(-6px)}
.plan .shackle{transition:transform 900ms var(--ease-settle)}
.plan [data-k="3"].on .shackle{transform:translateY(1.6px)}
.plan .entry{stroke-dasharray:5 5; stroke-dashoffset:0}
.plan [data-k="4"].on .entry{animation:write 2.4s var(--ease-settle)}
@keyframes write{from{stroke-dashoffset:5}}
.plan [data-k="1"] > path:first-of-type{transition:stroke-width 750ms var(--ease-settle)}
.plan [data-k="1"].on > path:first-of-type{stroke-width:3.2}
.plan .ptr{animation-play-state:paused}
.plan [data-k="3"].on .ptr,.fold-band:not([data-active]) .plan .ptr{animation-play-state:running}
.keys li{cursor:pointer; transition:opacity 750ms var(--ease-settle); outline-offset:6px}
.fold-band[data-active] .keys li:not(.on){opacity:.42}
.keys li .k{transition:background 600ms var(--ease-settle), color 600ms var(--ease-settle)}
.keys li.on .k{background:var(--band-ink); color:var(--band)}
@media (prefers-reduced-motion: reduce){ .plan .leaf,.plan .walker,.plan .shackle{transition:none} .plan [data-k="2"].on .leaf.l,.plan [data-k="2"].on .leaf.r,.plan [data-k="2"].on .walker{transform:none} .plan [data-k="4"].on .entry{animation:none} }

/* 4 = on record: red, glowing like a recording light */
.keys li[data-k="4"].on .k{background:#d7372e; border-color:#d7372e; color:#fcf9f2; animation:rec 4.5s ease-in-out infinite}
.plan [data-k="4"].on circle[r="10"]{fill:#d7372e; stroke:#d7372e}
.plan [data-k="4"].on circle[r="10"]{filter:drop-shadow(0 0 4px rgba(215,55,46,.8))}
@keyframes rec{0%,100%{box-shadow:0 0 0 0 rgba(215,55,46,0), 0 0 6px 1px rgba(215,55,46,.45)} 50%{box-shadow:0 0 0 4px rgba(215,55,46,.18), 0 0 16px 4px rgba(215,55,46,.7)}}
@media (prefers-reduced-motion: reduce){ .keys li[data-k="4"].on .k{animation:none; box-shadow:0 0 12px 3px rgba(215,55,46,.6)} }

/* team tiles */
.tiles{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px}
.tiles li{background:var(--tile); box-shadow:var(--panel-shadow); border-radius:6px; padding:26px 24px 28px; display:grid; gap:6px; align-content:start}
.tiles .nm{font-size:24px; line-height:1.2; letter-spacing:-.01em}
.tiles .rl{font:400 14px/1.4 var(--sans); color:var(--muted)}
.tiles p{margin-top:14px; font-size:16px; line-height:1.55; color:var(--soft)}

/* fit strip */
.fitline{margin-top:32px; font:400 18px/1.45 var(--sans); color:var(--soft)}
/* proof placeholder */
.slots{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
@media (max-width:900px){ .slots{grid-template-columns:minmax(0,1fr)} }
.slot{margin:0; border:1.5px dashed var(--muted); border-radius:6px; padding:26px 24px; display:grid; gap:14px; align-content:start; opacity:.85}
.slot blockquote{margin:0; font-size:22px; line-height:1.35; letter-spacing:-.01em; color:var(--muted)}
.slot figcaption{font:400 14px/1.4 var(--sans); color:var(--muted)}

/* accountability chart */
.org svg{display:block; width:100%; height:auto; margin-top:18px; overflow:visible}
.org .o-line,.org .o-new{stroke:var(--muted)}
.org .o-box rect{fill:var(--panel); stroke:var(--ink)}
.org .o-txt text{font:400 14px var(--sans); fill:var(--ink)}
.org .o-ai-h{font:400 17px var(--serif); fill:#212020}
.org .o-role text{font:400 12.5px var(--sans); fill:#4a4845}
.org .o-new{stroke-dashoffset:0}
.org.armed .o-new{stroke-dasharray:96 96; stroke-dashoffset:96}
.org.armed .o-ai{opacity:0; transform:translateY(8px)}
.org.go .o-new{transition:stroke-dashoffset 975ms cubic-bezier(.33,1,.68,1) 120ms}
.org.go .o-ai{transition:opacity 900ms cubic-bezier(.33,1,.68,1) 570ms, transform 1050ms cubic-bezier(.33,1,.68,1) 570ms}
.org.done .o-new{stroke-dasharray:5 5}
/* blueprint */
.start{display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); gap:72px; align-items:start}
@media (max-width:900px){ .start{grid-template-columns:minmax(0,1fr); gap:40px} }
.ticket{background:var(--panel); box-shadow:var(--panel-shadow); border-radius:6px}
.ticket .in{padding:clamp(28px, 3.4vw, 44px); display:grid; gap:18px}
.ticket .price{font-size:clamp(52px, 6vw, 72px); line-height:1; letter-spacing:-.025em; font-variant-numeric:tabular-nums}
.ticket ul{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.ticket li{padding-block:12px; border-bottom:1px solid var(--rule); font-size:17px; line-height:1.45}
.ticket .row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* manifesto */
.manifesto{display:grid; gap:30px; max-width:20em; font-size:clamp(25px, 2.8vw, 34px); line-height:1.32; letter-spacing:-.01em}
.manifesto .sign{font:400 21px/1.4 var(--sans); letter-spacing:0; display:flex; align-items:center; gap:18px; margin-top:6px}
.manifesto .sign::after{content:""; flex:1; height:1px; background:var(--ink); opacity:.35; max-width:160px}

/* team */
.team .rows .t small{display:block; font:400 14px/1.4 var(--sans); color:var(--muted); letter-spacing:0; margin-top:4px}

/* closing */
.close{position:relative; overflow:hidden; color:var(--cream); background:var(--sky); border-top:0; isolation:isolate}
.close > img.bg{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 70%; z-index:-1}
.close .wrap{display:grid; gap:28px; justify-items:start; position:relative}
.close h2{font-size:clamp(44px, 6vw, 80px); line-height:1; letter-spacing:-.025em; max-width:10em; text-shadow:0 1px 26px rgba(31,77,119,.35)}
.close .sub{font:400 21px/1.45 var(--sans); max-width:26em; text-shadow:0 1px 16px rgba(31,77,119,.45)}
.close .row{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:8px}
.close .note{color:var(--cream); opacity:.9}
.close .mini{position:absolute; right:8%; bottom:18%; width:min(18vw, 220px); filter:drop-shadow(0 16px 20px rgba(31,77,119,.28))}
@media (max-width:760px){ .close .mini{position:relative; right:auto; bottom:auto; width:120px; justify-self:end; margin-top:12px} }

/* footer */
footer{padding-block:56px 72px; border-top:1px solid var(--rule)}
footer .wrap{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 48px; align-items:end}
@media (max-width:720px){ footer .wrap{grid-template-columns:minmax(0,1fr)} }
footer .brand{display:grid; gap:18px}
footer .brand img{height:38px; width:auto}
footer .links{display:flex; flex-wrap:wrap; gap:10px 24px; font-family:var(--sans); font-size:14px}
footer .links a{color:var(--ink); text-decoration:none} footer .links a:hover{text-decoration:underline}
.mail{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:14px; color:var(--soft)}
.mail span{user-select:all}
.mail button{background:none; border:0; padding:4px 10px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--rule); font:400 12.5px/1 var(--sans); color:var(--muted); cursor:pointer}
.mail button:hover{color:var(--ink)}

/* settle-in for content that starts off screen */
.armed-up{opacity:0; transform:translateY(var(--rise))}
.up{transition:opacity 750ms cubic-bezier(.33,1,.68,1), transform 900ms cubic-bezier(.33,1,.68,1); transition-delay:calc(var(--i, 0) * 75ms)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .plan .ptr{animation:none !important}
  .hero .sky,.hero .in,.pl .arrive,.drift{animation:none !important}
  .sheet.armed .fa{stroke-dashoffset:0} .sheet.armed .fa + path{opacity:1}
  .step:hover .fa{animation:none} .step:hover .lift{transform:none}
  .armed-up{transform:none}
  .btn .lbl,.btn .arr{transition-property:opacity}
  .btn:hover .lbl,.btn:focus-visible .lbl{transform:none}
}

/* buttons, softened: the label stays put, the arrow is always there and just leans in; a faint wash of the text colour rises on hover */
:root{--ease-soft:cubic-bezier(.33,1,.68,1)}
.btn{gap:10px; padding:15px 24px 15px 28px; isolation:isolate; transition:transform 675ms var(--ease-soft), box-shadow 1050ms var(--ease-soft)}
.btn.small{gap:8px; padding:11px 16px 11px 20px}
.btn::before{content:""; position:absolute; inset:0; border-radius:inherit; background:currentColor; opacity:0; z-index:-1; pointer-events:none; transition:opacity 1050ms var(--ease-soft)}
.btn:hover::before,.btn:focus-visible::before{opacity:.07}
.btn .lbl,.btn:hover .lbl,.btn:focus-visible .lbl,.btn.always .lbl{transform:none; transition:none}
.btn .arr,.btn.always .arr,.btn.small .arr{position:static; margin:0; width:13px; height:13px; opacity:.5; transform:none; transition:opacity 1050ms var(--ease-soft), transform 1350ms var(--ease-soft)}
.btn:hover .arr,.btn:focus-visible .arr,.btn.always:hover .arr,.hero .go .btn.always:hover .arr{opacity:1; transform:translateX(3px)}
.btn:active{transform:scale(.985); transition-duration:225ms}
.btn.line:hover{box-shadow:inset 0 0 0 1px rgba(252,249,242,.95)}
@media (prefers-reduced-motion: reduce){ .btn:hover .arr,.btn:focus-visible .arr,.btn.always:hover .arr{transform:none} .btn:active{transform:none} }

/* mobile pass (all pages) */
@media (max-width:640px){
  .btn{white-space:normal; text-align:left; line-height:1.25}
  h2{font-size:clamp(34px, 9.4vw, 44px)}
  .lede{font-size:19px}
  .prose p{font-size:18px}
  .close h2{font-size:clamp(40px, 11vw, 52px)}
  .close .sub{font-size:19px}
  footer .links{gap:10px 20px}
}
@media (max-width:820px){
  .planes{height:clamp(240px, 64vw, 380px); margin-top:8px}
  .pl.a{top:6%; right:4%; width:min(60vw, 340px)}
}
@media (max-width:600px){
  .steps{grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 14px}
  .step{gap:10px}
  .step .num{width:30px; height:30px; font-size:15px}
  .step h3{font-size:18px; line-height:1.2}
  .step .what{font-size:13.5px}
  .sheet{padding:30px 20px 26px}
  .sheet-top{margin-bottom:22px}
  .org .o-txt text{font-size:17px}
  .org .o-ai-h{font-size:19px}
  .org .o-role text{font-size:14.5px}
  .plan svg text{font-size:12px !important}
  .plan svg g[style] text{font-size:11px !important}
  .plan svg .num{font-size:12px !important}
  .plan svg .core text{font-size:9.5px !important}
  .keys b{font-size:19px}
  .beats .a{font-size:26px}
  .beats .b{font-size:17px}
  .ticket .price{font-size:52px}
  .slot blockquote{font-size:20px}
}
@media (max-width:380px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .step .art{max-width:220px}
}

/* copy email: the plane leaves the logo, lights the address, and flies off */
footer .brand img.flying{-webkit-mask-image:linear-gradient(90deg, transparent 0 31%, #000 31%); mask-image:linear-gradient(90deg, transparent 0 31%, #000 31%)}
#mail{transition:filter 900ms ease}
#mail.glow{background:linear-gradient(90deg, #b98f6e, #c99a8a, #a88fae, #8ea3b8, #97a888, #c2a479, #b98f6e); background-size:400% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:mailglow 2.7s cubic-bezier(.45,0,.55,1) forwards; filter:drop-shadow(0 0 8px rgba(201,154,138,.45))}
@keyframes mailglow{from{background-position:0% 50%} to{background-position:100% 50%}}

@media (max-width:640px){ :root{ --hero-vh:726px; } }