/* GAMEPLAN Fantasy Football · homepage styles */

@font-face{font-family:"Oswald";src:url(../fonts/oswald-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Oswald";src:url(../fonts/oswald-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Alfa Slab One";src:url(../fonts/alfa-slab-one-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(../fonts/source-serif-4-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(../fonts/source-serif-4-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(../fonts/source-serif-4-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(../fonts/source-serif-4-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../fonts/source-sans-3-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../fonts/source-sans-3-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../fonts/source-sans-3-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --green-950:#0c1713;
  --green-900:#11211a;
  --green-800:#172c22;
  --green-700:#1f3b2d;
  --green-600:#2b4d3b;
  --cream:#f1e7d0;
  --paper:#e9dcbf;
  --paper-dark:#dccca8;
  --ink:#1e1a15;
  --ink-soft:#4a4036;
  --rust:#9b3e1e;
  --rust-dark:#7f3117;
  --orange:#dc6a35;
  --gold:#c9a24a;
  --gold-soft:#b8995a;
  --brown:#3a2a1e;
  --rule:rgba(30,26,21,.18);

  --f-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --f-logo:"Alfa Slab One",Rockwell,Georgia,serif;
  --f-serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-sans:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1200px;
  --gutter:clamp(16px,4vw,48px);
  --grain: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 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24V9l22 4 31-6 27 5 19-3 34 6 25-7 30 4 18-2 36 5 23-6 29 3 33-4 21 6 28-5 35 4 17-3 32 5 26-6 24 4 37-3 20 5 31-6 22 4 34-2 27 5 19-6 33 4 26-3 30 5 21-4 35 3 24-5 28 6 32-4 18 3 36-5 23 4 29-3 31 6 22-5 34 3 20-2 27 5 33-6 25 4 30-3 19 5 36-4 22 3V24z' fill='%23000'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--green-900);color:var(--ink);font-family:var(--f-sans);font-size:1.0625rem;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;margin:0}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--cream);color:var(--ink);padding:10px 14px;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Texture helpers */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.18;mix-blend-mode:multiply;pointer-events:none;z-index:-1}
.on-dark.grain::after{mix-blend-mode:overlay;opacity:.22}
.torn-top{position:relative}
.torn-top::before{content:"";position:absolute;left:0;right:0;top:-23px;height:24px;background:inherit;-webkit-mask:var(--torn) center/100% 100% no-repeat;mask:var(--torn) center/100% 100% no-repeat;z-index:2}

/* Buttons */
.btn{background:transparent;display:inline-flex;align-items:center;justify-content:center;gap:.6em;font-family:var(--f-display);font-weight:500;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:.85em 1.35em;border:2px solid transparent;border-radius:2px;line-height:1.1;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn .arrow{transition:transform .15s}
.btn:hover .arrow{transform:translateX(3px)}
.btn-primary{background:var(--rust);color:var(--cream);border-color:var(--rust);box-shadow:0 2px 0 var(--rust-dark)}
.btn-primary:hover{background:var(--rust-dark);border-color:var(--rust-dark)}
.btn-ghost-light{color:var(--cream);border-color:rgba(241,231,208,.65)}
.btn-ghost-light:hover{background:var(--cream);color:var(--green-900)}
.btn-ghost-dark{color:var(--ink);border-color:var(--ink)}
.btn-ghost-dark:hover{background:var(--ink);color:var(--cream)}
.btn-sm{font-size:.85rem;padding:.7em 1.05em}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:3px solid var(--green-800)}
.site-header .wrap{display:flex;align-items:center;gap:24px;min-height:72px;max-width:1320px}
.logo{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--green-800);line-height:1;flex-shrink:0}
.logo-word{font-family:var(--f-logo);font-size:1.9rem;letter-spacing:.02em}
.logo-sub{display:flex;align-items:center;gap:6px;font-family:var(--f-sans);font-weight:700;font-size:.62rem;letter-spacing:.34em;margin-top:3px;color:var(--ink)}
.logo-sub::before,.logo-sub::after{content:"";width:12px;height:1.5px;background:var(--ink)}
.nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.nav-links{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav-links a{text-transform:uppercase;font-family:var(--f-display);font-weight:500;font-size:.88rem;letter-spacing:.07em;text-decoration:none;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover{border-bottom-color:var(--rust)}
.nav-ctas{display:flex;gap:10px}
.nav-toggle{display:none;margin-left:auto;background:none;border:2px solid var(--ink);border-radius:2px;width:44px;height:44px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:transform .2s}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0}
.nav-toggle .bars::before{top:-6px}.nav-toggle .bars::after{top:6px}
.nav-open .nav-toggle .bars{background:transparent}
.nav-open .nav-toggle .bars::before{transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle .bars::after{transform:translateY(-6px) rotate(-45deg)}

/* HERO */
.hero{position:relative;background:
  radial-gradient(120% 90% at 78% 40%,#1c2a23 0%,transparent 60%),
  radial-gradient(80% 70% at 10% 100%,#0a130f 0%,transparent 70%),
  var(--green-950);color:var(--cream);overflow:hidden}
.hero-inner{position:relative;max-width:1440px;margin:0 auto;min-height:clamp(600px,46vw,720px);display:flex;align-items:center}
.hero-copy{position:relative;z-index:3;width:min(48%,660px);padding:56px 0 64px var(--gutter);margin-left:max(0px,calc((100% - 1440px)/2))}
.eyebrow{text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:500;font-size:.85rem;letter-spacing:.22em;color:var(--gold);margin-bottom:18px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--gold)}
.hero h1{font-size:clamp(2.5rem,4.1vw,3.9rem);line-height:.98;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.hero h1 .l{display:block}
.hero h1 .accent{color:var(--orange);display:block}
.hero-sub{font-family:var(--f-serif);font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.35;margin:22px 0 14px;color:var(--cream)}
.hero-sub strong{font-weight:600}
.hero-para{color:rgba(241,231,208,.82);font-size:1.02rem;max-width:34em}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 30px}
.proof{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:0;padding:18px 0 0;border-top:1px solid rgba(201,162,74,.3)}
.proof li{text-transform:uppercase;display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:500;font-size:.8rem;letter-spacing:.1em;line-height:1.15;color:rgba(241,231,208,.9)}
.proof svg{width:26px;height:26px;flex-shrink:0;color:var(--gold)}

.hero-art{position:absolute;z-index:1;right:0;top:50%;transform:translateY(-50%);width:min(66%,1000px);aspect-ratio:1430/855;container-type:inline-size;margin:0}
.hero-art img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(180deg,transparent 0%,#000 18%,#000 80%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%),linear-gradient(180deg,transparent 0%,#000 18%,#000 80%,transparent 100%);
  mask-composite:intersect}
.hero-art::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.hero-quote{position:absolute;z-index:2;left:39%;top:27%;width:37%;margin:0;font-family:var(--f-serif);font-weight:600;font-size:2.95cqw;line-height:1.14;text-shadow:0 2px 14px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.9)}
.hero-quote p{margin:0}
.hero-quote .q1{color:var(--cream)}
.hero-quote .q2{color:var(--orange);margin-top:.7em;padding-left:.9em}
.hero-quote cite{position:absolute;left:-9999px}

/* Section scaffolding */
.section{padding:clamp(64px,8vw,104px) 0}
.paper{background:var(--paper);color:var(--ink)}
.cream{background:var(--cream);color:var(--ink)}
.dark{background:var(--green-800);color:var(--cream)}
.darker{background:var(--green-900);color:var(--cream)}
.kicker{font-family:var(--f-display);font-weight:500;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rust);margin:0 0 12px}
.dark .kicker,.darker .kicker{color:var(--gold)}
.section-title{font-size:clamp(2rem,3.8vw,3.1rem);margin-bottom:18px}
.lede{font-family:var(--f-serif);font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.5;max-width:40em}
.dark .lede,.darker .lede{color:rgba(241,231,208,.9)}
.rule-title{display:flex;align-items:center;gap:22px;justify-content:center;text-align:center}
.rule-title::before,.rule-title::after{content:"";flex:1;max-width:160px;height:2px;background:currentColor;opacity:.4}

/* 1. Difference */
.diff-head{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:end;margin-bottom:44px}
.diff-head .lede{margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{position:relative;background:var(--cream);border:1.5px solid rgba(58,42,30,.35);padding:26px 24px 24px;box-shadow:0 1px 0 rgba(0,0,0,.05),4px 5px 0 rgba(58,42,30,.12)}
.card::before{content:"";position:absolute;inset:6px;border:1px solid rgba(58,42,30,.18);pointer-events:none}
.card-tag{display:inline-block;font-family:var(--f-display);font-weight:500;font-size:.72rem;letter-spacing:.18em;color:var(--cream);background:var(--green-700);padding:3px 9px;margin-bottom:14px}
.card h3{font-size:1.5rem;margin-bottom:10px;color:var(--green-800)}
.card p{margin:0;color:var(--ink-soft);font-size:1rem}
.card-random{background:var(--green-800);border-color:var(--green-800);color:var(--cream)}
.card-random::before{border-color:rgba(201,162,74,.35)}
.card-random h3{color:var(--orange)}
.card-random p{color:rgba(241,231,208,.85)}
.card-random .card-tag{background:var(--rust)}

/* 2. How it works */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{position:relative;border:1.5px solid rgba(201,162,74,.45);background:rgba(10,19,15,.35);padding:28px 22px 26px}
.step-num{font-family:var(--f-display);font-weight:700;font-size:3.2rem;line-height:1;color:var(--orange)}
.step svg{position:absolute;top:26px;right:22px;width:34px;height:34px;color:var(--gold)}
.step h3{font-size:1.45rem;margin:14px 0 4px}
.step .tagline{font-family:var(--f-display);font-weight:500;font-size:.78rem;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;margin-bottom:12px}
.step p:last-child{margin:0;color:rgba(241,231,208,.82);font-size:.98rem}

/* 3. Path to Victory */
.ptv{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.rules{list-style:none;margin:26px 0 30px;padding:0;border-top:1px solid var(--rule)}
.rules li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule)}
.rules svg{width:22px;height:22px;margin-top:3px;color:var(--rust)}
.rules strong{font-weight:700;color:var(--green-800)}
.tape{position:relative}
.tape-lock{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:500;letter-spacing:.12em;font-size:.82rem;text-transform:uppercase;background:var(--green-800);color:var(--cream);padding:10px 16px;border:1.5px solid var(--green-800)}
.tape-lock svg{width:18px;height:18px;color:var(--gold)}
.tape-lock span:last-child{margin-left:auto;color:var(--gold)}
.tape-cols{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--green-800);border-top:0;background:var(--cream)}
.tape-col{padding:20px 18px 22px}
.tape-col+.tape-col{border-left:1.5px dashed rgba(31,59,45,.45);background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(155,62,30,.04) 10px 20px)}
.tape-col h3{font-size:1.05rem;letter-spacing:.12em;margin-bottom:14px;color:var(--rust)}
.tape-col dl{margin:0}
.tape-col dt{font-family:var(--f-display);font-weight:500;font-size:.7rem;letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase}
.tape-col dd{margin:0 0 12px;font-family:var(--f-serif);font-weight:600;font-size:1.05rem;color:var(--ink)}
.score{display:flex;align-items:baseline;gap:8px;font-family:var(--f-display);font-weight:700;font-size:2rem;color:var(--green-800);margin-top:6px;padding-top:12px;border-top:1px solid var(--rule)}
.score small{font-size:.8rem;font-weight:500;letter-spacing:.1em;color:var(--ink-soft)}
.score .q{color:var(--rust)}
.tape-note{font-family:var(--f-serif);font-style:italic;font-size:.98rem;color:var(--ink-soft);margin:14px 0 0}

/* 4. War Room */
.war{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,72px);align-items:center}
.war-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.war-list li{padding-left:22px;position:relative;color:rgba(241,231,208,.88)}
.war-list li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;background:var(--orange);transform:rotate(45deg)}
.war-list strong{color:var(--cream)}
.thread{background:var(--cream);color:var(--ink);border:1.5px solid rgba(201,162,74,.5);box-shadow:8px 9px 0 rgba(0,0,0,.25);padding:0;max-width:520px;margin-left:auto;width:100%}
.thread-head{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1.5px solid var(--rule);font-family:var(--f-display);font-weight:500;letter-spacing:.12em;font-size:.82rem;text-transform:uppercase}
.thread-head span:last-child{color:var(--rust)}
.msgs{list-style:none;margin:0;padding:18px;display:grid;gap:14px}
.msg{max-width:84%;padding:11px 14px 8px;border-radius:3px;font-size:.98rem;line-height:1.4}
.msg .who{display:block;font-family:var(--f-display);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px;opacity:.75}
.msg time{display:block;text-align:right;font-size:.72rem;opacity:.6;margin-top:4px}
.msg.a{background:#d9e2c9}
.msg.b{background:#efc6ae;justify-self:end}
.msg.c{background:#d5dbd8}
.thread-foot{padding:10px 18px 14px;font-size:.8rem;color:var(--ink-soft);font-style:italic;font-family:var(--f-serif);border-top:1px solid var(--rule)}

/* 5. Prototype */
.proto-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px}
.frame{margin:0;background:var(--green-950);border:1.5px solid var(--brown);box-shadow:6px 7px 0 rgba(58,42,30,.2)}
.frame-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#2a211a}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:#6b5a48}
.frame-bar b{margin-left:10px;font-family:var(--f-display);font-weight:500;font-size:.72rem;letter-spacing:.14em;color:#cdbd9e;text-transform:uppercase}
.frame-body{padding:20px;color:var(--cream);min-height:330px}
.frame figcaption{background:var(--cream);color:var(--ink-soft);font-size:.9rem;padding:12px 16px;border-top:1.5px solid var(--brown)}
.frame figcaption strong{color:var(--ink);font-family:var(--f-display);font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-right:6px}
.ui-title{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--f-display);font-weight:700;letter-spacing:.06em;font-size:1.2rem;text-transform:uppercase;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid rgba(201,162,74,.35)}
.ui-title small{font-weight:500;font-size:.72rem;letter-spacing:.14em;color:var(--gold)}
.ui-row{display:grid;grid-template-columns:140px 1fr;gap:12px;align-items:center;padding:7px 0;border-bottom:1px dashed rgba(241,231,208,.12);font-size:.92rem}
.ui-row>span:first-child{font-family:var(--f-display);font-weight:500;font-size:.72rem;letter-spacing:.14em;color:rgba(241,231,208,.65);text-transform:uppercase}
.ui-sel{display:flex;justify-content:space-between;background:#1d2e26;border:1px solid rgba(241,231,208,.2);padding:5px 10px;border-radius:2px}
.ui-sel::after{content:"▾";color:var(--gold)}
.ui-pills{display:flex;flex-wrap:wrap;gap:6px}
.ui-pills span{font-family:var(--f-display);font-weight:500;font-size:.72rem;letter-spacing:.1em;padding:3px 9px;border:1px solid rgba(241,231,208,.3);border-radius:2px}
.ui-pills .on{background:var(--cream);color:var(--green-900);border-color:var(--cream)}
.ui-scores{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;background:var(--cream);color:var(--ink);padding:12px;margin-bottom:12px}
.ui-scores b{display:block;font-family:var(--f-display);font-size:2rem;line-height:1}
.ui-scores small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.ui-scores em{font-style:normal;font-family:var(--f-display);color:var(--rust);letter-spacing:.1em}
.ui-btn{display:inline-block;margin-top:14px;font-family:var(--f-display);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;background:var(--rust);color:var(--cream);padding:7px 12px}

/* 6. Why */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.why-item{padding:26px 22px 28px}
.why-item+.why-item{border-left:1px solid var(--rule)}
.why-item h3{font-size:1.35rem;margin-bottom:10px;color:var(--green-800)}
.why-item p{margin:0;color:var(--ink-soft);font-size:1rem}
.why-mark{font-family:var(--f-display);font-weight:700;color:var(--rust);font-size:.85rem;letter-spacing:.14em;display:block;margin-bottom:10px}
.respect{max-width:44em;margin:38px auto 0;text-align:center;font-family:var(--f-serif);font-style:italic;font-size:1.15rem;color:var(--ink-soft)}

/* 7. Founding Coaches */
.founding{position:relative;overflow:hidden;padding:0}
.founding-inner{display:grid;grid-template-columns:1fr 1fr;min-height:600px}
.founding-art{position:relative;margin:0}
.founding-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:42% 62%;
  -webkit-mask-image:linear-gradient(90deg,#000 60%,transparent 100%);mask-image:linear-gradient(90deg,#000 60%,transparent 100%)}
.founding-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(12,23,19,.85) 100%);pointer-events:none}
.founding-art figcaption{z-index:2;position:absolute;left:var(--gutter);bottom:36px;right:20%;font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1;color:var(--cream);text-shadow:0 2px 14px rgba(0,0,0,.8)}
.founding-art figcaption span{display:block;font-family:var(--f-serif);font-weight:400;font-size:1.05rem;text-transform:none;line-height:1.4;margin-top:12px;color:rgba(241,231,208,.9)}
.founding-copy{padding:clamp(56px,7vw,96px) var(--gutter) clamp(56px,7vw,96px) clamp(24px,3vw,40px);max-width:640px}
.vision{border-left:3px solid var(--orange);padding:4px 0 4px 18px;margin:22px 0 30px;font-family:var(--f-serif);font-size:1.08rem;color:rgba(241,231,208,.9)}
.contact{background:var(--cream);color:var(--ink);padding:26px 26px 24px;border:1.5px solid var(--gold);box-shadow:8px 9px 0 rgba(0,0,0,.28)}
.contact .kicker{color:var(--rust);margin-bottom:8px}
.contact-name{font-family:var(--f-display);font-weight:700;font-size:1.9rem;text-transform:uppercase;line-height:1;color:var(--green-800)}
.contact-role{font-family:var(--f-serif);font-style:italic;margin:6px 0 12px;color:var(--ink-soft)}
.contact-email{display:inline-block;font-weight:600;font-size:1.1rem;color:var(--rust);text-decoration:none;border-bottom:1.5px solid currentColor;word-break:break-all}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.copy-status{display:block;min-height:1.4em;font-size:.88rem;color:var(--green-700);margin-top:8px}

/* Footer */
.site-footer{background:var(--green-950);color:rgba(241,231,208,.7);padding:40px 0;font-size:.92rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.site-footer .logo{color:var(--cream);align-items:flex-start}
.site-footer .logo-sub{color:rgba(241,231,208,.7)}
.site-footer .logo-sub::before,.site-footer .logo-sub::after{background:rgba(241,231,208,.7)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;list-style:none;margin:0;padding:0}
.foot-links a{text-decoration:none;font-family:var(--f-display);font-weight:500;letter-spacing:.08em;font-size:.82rem;text-transform:uppercase}
.foot-links a:hover{color:var(--cream)}
.foot-tag{width:100%;margin:0;font-family:var(--f-serif);font-style:italic;font-size:.95rem}


/* ================= v2 revisions ================= */
:root{--logo-green:#0d3526;--logo-red:#d4342f;--logo-gold:#e8b23a}
.site-header{background:var(--logo-green);border-bottom:3px solid var(--logo-gold);box-shadow:0 3px 0 var(--logo-red)}
.site-header .wrap{min-height:78px}
.brand{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;flex-shrink:0;line-height:1}
.brand img{height:42px;width:auto}
.brand-tag{font-family:var(--f-display);font-weight:500;font-size:.69rem;letter-spacing:.075em;text-transform:uppercase;color:var(--logo-gold);margin:4px 0 0 18px;white-space:nowrap}
.nav-links a{color:var(--cream)}
.nav-links a:hover{border-bottom-color:var(--logo-gold)}
.nav-toggle{border-color:var(--cream)}
.nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{background:var(--cream)}
.nav-open .nav-toggle .bars{background:transparent}
.btn-ghost-header{color:var(--cream);border-color:rgba(241,231,208,.7)}
.btn-ghost-header:hover{background:var(--cream);color:var(--logo-green)}

.cards{grid-template-columns:repeat(4,1fr);gap:18px}
.card{padding:24px 20px 22px}
.card h3{font-size:1.32rem}
.card p{font-size:.97rem}
.opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
.opts span{font-family:var(--f-display);font-weight:500;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border:1px solid rgba(58,42,30,.35);color:var(--green-800);background:rgba(255,255,255,.35)}
.card-random .opts span{color:var(--cream);border-color:rgba(241,231,208,.35);background:transparent}
.foundation{margin:34px auto 0;max-width:46em;text-align:center;font-family:var(--f-serif);font-size:1.12rem;color:var(--ink-soft)}
.foundation strong{color:var(--green-800)}

.locked{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--green-800);border-top:0;background:#e3d7bb}
.locked div{padding:9px 16px;font-size:.88rem;display:flex;gap:8px;align-items:center;border-top:1px solid rgba(31,59,45,.2)}
.locked div:nth-child(odd){border-right:1px solid rgba(31,59,45,.2)}
.locked svg{width:14px;height:14px;color:var(--rust);flex-shrink:0}
.never{margin:22px 0 28px;padding:16px 18px;border:1.5px dashed var(--rust);background:rgba(155,62,30,.05)}
.never h3{font-size:1rem;letter-spacing:.12em;color:var(--rust);margin-bottom:8px}
.never p{margin:0;font-size:.98rem;color:var(--ink-soft)}

.planned{display:inline-block;font-family:var(--f-display);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-900);background:var(--gold);padding:3px 9px;margin-left:10px;vertical-align:middle}

/* Screens: real prototype + concept */
.tier{margin-top:46px}
.tier-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;padding-bottom:12px;margin-bottom:22px;border-bottom:2px solid var(--ink)}
.tier-head h3{font-size:1.55rem;color:var(--green-800)}
.tier-head p{margin:0;color:var(--ink-soft);font-size:.98rem;flex:1 1 320px}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-weight:500;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border:1.5px solid currentColor}
.badge-real{color:var(--green-700);background:rgba(31,59,45,.08)}
.badge-real::before{content:"";width:8px;height:8px;border-radius:50%;background:#3f8a5c}
.badge-concept{color:var(--rust);background:rgba(155,62,30,.06);border-style:dashed}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.shot{margin:0;background:var(--cream);border:1.5px solid var(--brown);box-shadow:5px 6px 0 rgba(58,42,30,.18);display:flex;flex-direction:column}
.shot-btn{display:block;width:100%;padding:0;border:0;background:#cfc2a3;cursor:zoom-in;position:relative;aspect-ratio:1440/850;overflow:hidden}
.shot-btn img{width:100%;height:100%;object-fit:contain;background:#cfc2a3}
.shot-btn .zoom{position:absolute;right:8px;bottom:8px;font-family:var(--f-display);font-weight:500;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(17,33,26,.88);color:var(--cream);padding:4px 8px}
.shot figcaption{padding:14px 16px 16px;border-top:1.5px solid var(--brown);font-size:.94rem;color:var(--ink-soft);flex:1}
.shot figcaption strong{display:block;font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.shots-note{margin:16px 0 0;font-size:.9rem;font-style:italic;font-family:var(--f-serif);color:var(--ink-soft)}
.tier-concept .proto-grid{margin-top:0}
.frame.concept{position:relative;border-style:dashed}
.frame.concept::after{content:"Concept";position:absolute;top:-12px;right:14px;font-family:var(--f-display);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream);background:var(--rust);padding:4px 10px;transform:rotate(2deg)}
.frame-body{min-height:0}

/* Lightbox */
.lightbox{padding:0;border:0;background:transparent;max-width:min(96vw,1500px);max-height:94vh;width:100%}
.lightbox::backdrop{background:rgba(8,14,11,.88)}
.lightbox figure{margin:0;background:var(--cream);border:2px solid var(--gold)}
.lightbox img{width:100%;height:auto;max-height:calc(94vh - 70px);object-fit:contain;background:#cfc2a3}
.lightbox figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;font-size:.92rem;color:var(--ink-soft)}
.lightbox .close{font-family:var(--f-display);font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:var(--green-800);color:var(--cream);border:0;padding:8px 14px;cursor:pointer;flex-shrink:0}

/* Commitment */
.commit{margin:46px auto 0;max-width:760px;text-align:center}
.commit-line{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;color:var(--green-800);margin:0 0 8px}
.commit-sub{font-family:var(--f-serif);font-style:italic;color:var(--ink-soft);margin:0 0 30px}
.jfk{margin:0 auto;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.jfk p{font-family:var(--f-serif);font-style:italic;font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.45;margin:0 0 8px;color:var(--ink)}
.jfk cite{font-style:normal;font-family:var(--f-display);font-weight:500;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.founder-msg{font-family:var(--f-serif);font-weight:600;font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.35;color:var(--rust);margin:22px 0 0}

.pilot{border:1.5px solid rgba(201,162,74,.5);background:rgba(10,19,15,.35);padding:16px 18px;margin:20px 0 0;font-size:.98rem;color:rgba(241,231,208,.88)}
.pilot strong{color:var(--gold);font-family:var(--f-display);font-weight:500;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px;font-size:.85rem}
.partner{margin:16px 0 0;font-size:.92rem;color:var(--ink-soft)}
.partner a{color:var(--rust);font-weight:600}

.foot-logo img{width:260px;height:auto;display:block}
.site-footer{background:var(--logo-green);border-top:3px solid var(--logo-gold)}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav-links{gap:16px}
  .nav-links a{font-size:.8rem}
  .nav-ctas .btn{font-size:.76rem;padding:.65em .8em}
}
@media (max-width:1060px){
  .nav-toggle{display:inline-flex}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--cream);border-bottom:3px solid var(--green-800);padding:8px var(--gutter) 20px;display:none}
  .nav-open .nav{display:flex}
  .nav-links{flex-direction:column;gap:0}
  .nav-links a{display:block;padding:13px 0;font-size:1rem;border-bottom:1px solid var(--rule)}
  .nav-ctas{flex-direction:column;margin-top:16px}
  .nav-ctas .btn{font-size:.92rem;padding:.9em 1em}


  .diff-head{grid-template-columns:1fr;gap:12px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .ptv,.war{grid-template-columns:1fr}
  .thread{margin:0 auto}
  .why{grid-template-columns:repeat(2,1fr)}
  .why-item:nth-child(3){border-left:0}
  .why-item:nth-child(n+3){border-top:1px solid var(--rule)}
  .founding-inner{grid-template-columns:1fr}
  .founding-art{min-height:420px}
  .founding-art img{-webkit-mask-image:linear-gradient(180deg,#000 65%,transparent 100%);mask-image:linear-gradient(180deg,#000 65%,transparent 100%)}
  .founding-copy{max-width:720px;padding-left:var(--gutter);margin-top:-20px}
}
@media (max-width:1180px) and (min-width:901px){
  .hero-copy{width:46%}
  .hero-art{width:64%;right:-6%}
}
@media (max-width:900px){
  .hero-inner{flex-direction:column;align-items:stretch;min-height:0}
  .hero-copy{width:100%;max-width:720px;padding:48px var(--gutter) 8px;margin:0}
  .hero-art{position:relative;transform:none;top:auto;right:auto;width:100%;margin-top:-10px}
  .hero-art img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 90%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .hero-quote{font-size:2.9cqw}
}
@media (max-width:760px){
  .proto-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:1rem}
  .logo-word{font-size:1.55rem}
  .hero-copy{padding-top:36px}
  .hero h1{font-size:clamp(2.35rem,11vw,3rem)}
  .hero-ctas .btn{flex:1 1 100%}
  .proof{gap:12px 20px}
  /* On phones the quote sits across the lower band of the artwork, still inside the composition */
  .hero-art{aspect-ratio:auto;padding-bottom:0;margin-top:0}
  .hero-art img{height:auto;aspect-ratio:1430/855;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 70%,transparent 100%)}
  .hero-quote{position:relative;left:auto;top:auto;width:auto;margin:-11% var(--gutter) 0;padding-bottom:44px;font-size:1.3rem}
  .cards,.steps,.why{grid-template-columns:1fr}
  .why-item+.why-item{border-left:0;border-top:1px solid var(--rule)}
  .tape-cols{grid-template-columns:1fr}
  .tape-col+.tape-col{border-left:0;border-top:1.5px dashed rgba(31,59,45,.45)}
  .ui-row{grid-template-columns:1fr;gap:4px}
  .contact-actions .btn{flex:1 1 100%}
  .rule-title::before,.rule-title::after{max-width:40px}
}

@media (max-width:1240px){ .brand-tag{display:none} }
@media (max-width:1060px){
  .nav{background:var(--logo-green);border-bottom:3px solid var(--logo-gold)}
  .nav-links a{border-bottom-color:rgba(241,231,208,.15)}
  .brand-tag{display:block}
  .cards{grid-template-columns:repeat(2,1fr)}
  .shots{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .brand img{height:34px}
  .brand-tag{font-size:.6rem;margin-left:14px}
  .cards,.shots{grid-template-columns:1fr}
  .locked{grid-template-columns:1fr}
  .locked div:nth-child(odd){border-right:0}
  .lightbox figcaption{flex-direction:column;align-items:flex-start}
}