/* ============================================================
   ROOK -- draft site. Committed dark ("monitor black") palette:
   this is a mockup of a video company's site, graded like the work.
   ============================================================ */
:root{
  --ground:#050607;
  --ground-2:#0B0D0F;
  --surface:#111417;
  --surface-2:#181C20;
  --line:#25292E;
  --line-soft:#1B1F23;
  --ink:#F3F1EC;
  --ink-2:#BDB8AE;
  --ink-3:#8E8C86;
  --amber:#F3F1EC;
  --amber-2:#FFFFFF;
  --amber-deep:#BDB8AE;
  --on-amber:#0A0B0C;
  --teal:#BDB8AE;
  --clay:#8E8C86;
  --clay-txt:#BDB8AE;
  --accent:var(--amber);

  --f-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-title:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-body:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Montserrat","Helvetica Neue",Arial,sans-serif;

  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
  --s6:3rem; --s7:4.5rem; --s8:7rem;
  --wrap:1200px; --read:64ch;
  --nav-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--nav-h) + 1.5rem)}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.02em;line-height:1.04}
h1{font-size:clamp(2.6rem,6.6vw,5.4rem);font-weight:800;font-stretch:100%;letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.6vw,3rem);font-weight:700;font-stretch:100%;letter-spacing:-.03em}
h3{font-size:clamp(1.3rem,2vw,1.65rem);font-weight:600;font-stretch:100%;letter-spacing:-.015em}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--ink-2);max-width:var(--read);line-height:1.6}
.body-txt{color:var(--ink-2);max-width:var(--read)}
.tag{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);
}
.tag--amber{color:var(--amber)}
.tag--teal{color:var(--teal)}
.tag--clay{color:var(--clay-txt)}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
.wrap--wide{max-width:1420px}
section{padding-block:var(--s7)}
.stack{display:flex;flex-direction:column}
.g2{display:grid;gap:var(--s5)}
@media(min-width:1020px){.g2{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.g3{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:720px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1020px){.g3{grid-template-columns:repeat(3,1fr)}}

/* section head with a hairline rule - the rule carries the line colour */
.shead{display:flex;flex-direction:column;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--line);margin-bottom:var(--s5)}
.shead--amber{border-top-color:color-mix(in srgb,var(--amber) 55%,var(--line))}
.shead--teal{border-top-color:color-mix(in srgb,var(--teal) 55%,var(--line))}
.shead--clay{border-top-color:color-mix(in srgb,var(--clay) 55%,var(--line))}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:#0B0F13;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft);
}
.nav-in{max-width:1420px;margin-inline:auto;height:100%;padding-inline:clamp(1.1rem,4vw,2.5rem);
  display:flex;align-items:center;gap:var(--s4)}
.logo{font-family:var(--f-display);font-weight:800;font-stretch:100%;font-size:1.22rem;
  letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;gap:.5rem}
.logo span{color:var(--amber)}
.nav-links{display:none;margin-left:auto;align-items:center;gap:var(--s4)}
@media(min-width:980px){.nav-links{display:flex}}
.nav-links a{
  font-size:.86rem;font-weight:500;text-decoration:none;color:var(--ink-2);
  padding-block:.4rem;border-bottom:1px solid transparent;transition:color .18s,border-color .18s;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink);border-bottom-color:var(--amber)}
.nav-drop{position:relative}
.nav-drop>button{
  font:inherit;font-size:.86rem;font-weight:500;color:var(--ink-2);background:none;border:0;
  cursor:pointer;padding:.4rem 0;display:flex;align-items:center;gap:.35rem;font-family:var(--f-body);
}
.nav-drop>button:hover{color:var(--ink)}
.nav-drop>button svg{width:9px;height:9px;transition:transform .2s}
.nav-drop[data-open="1"]>button svg{transform:rotate(180deg)}
.nav-drop.on>button{color:var(--ink);box-shadow:inset 0 -1px 0 var(--amber)}
.nav-menu{
  position:absolute;top:calc(100% + 12px);left:-14px;min-width:250px;background:var(--surface);
  border:1px solid var(--line);border-radius:3px;padding:.4rem;display:none;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
}
.nav-drop[data-open="1"] .nav-menu{display:block}
.nav-menu a{display:block;padding:.6rem .7rem;border:0;border-radius:2px;text-decoration:none;color:var(--ink-2)}
.nav-menu a:hover{background:var(--surface-2);color:var(--ink)}
.nav-menu .nm-t{font-weight:600;color:var(--ink);font-size:.88rem}
.nav-menu .nm-d{font-size:.75rem;color:var(--ink-3);line-height:1.4}
.nav-cta{margin-left:auto}
@media(min-width:980px){.nav-cta{margin-left:0}}
.burger{margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);
  border-radius:2px;padding:.45rem .6rem;cursor:pointer;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em}
@media(min-width:980px){.burger{display:none}}
.mobile-menu{display:none;border-bottom:1px solid var(--line);background:var(--ground-2);position:sticky;top:var(--nav-h);z-index:59}
.mobile-menu[data-open="1"]{display:block}
.mobile-menu a{display:block;padding:.85rem clamp(1.1rem,4vw,2.5rem);text-decoration:none;
  color:var(--ink-2);border-bottom:1px solid var(--line-soft);font-size:.95rem}
.mobile-menu a.sub{padding-left:calc(clamp(1.1rem,4vw,2.5rem) + 1.1rem);font-size:.88rem;color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-body);font-size:.88rem;font-weight:600;letter-spacing:.01em;
  padding:.78rem 1.35rem;border-radius:2px;text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:background .18s,border-color .18s,color .18s,transform .18s;white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--pri{background:var(--amber);color:#160B02;border-color:var(--amber)}
.btn--pri:hover{background:var(--amber-2);border-color:var(--amber-2)}
.btn--teal{background:var(--teal);color:#04161C;border-color:var(--teal)}
.btn--teal:hover{filter:brightness(1.1)}
.btn--clay{background:var(--clay);color:#1B0705;border-color:var(--clay)}
.btn--clay:hover{filter:brightness(1.1)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink-3);background:var(--surface)}
.btn--sm{padding:.55rem 1rem;font-size:.8rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* a portfolio piece = frame + caption */
.piece{display:block;text-decoration:none;color:inherit}
.piece .frame{transition:border-color .2s,transform .2s}
a.piece:hover .frame{border-color:color-mix(in srgb,var(--amber) 60%,var(--line))}
/* a slot that goes nowhere shouldn't light up like a button */
div.piece .play{opacity:.6}
.piece-cap{display:flex;justify-content:space-between;gap:var(--s2);margin-top:.7rem;align-items:baseline}
.piece-name{font-weight:600;font-size:.95rem;line-height:1.3}
.piece-meta{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2)}
.card--link{text-decoration:none;color:inherit;transition:border-color .2s,background .2s,transform .2s}
.card--link:hover{border-color:color-mix(in srgb,var(--amber) 55%,var(--line));background:var(--surface-2);transform:translateY(-2px)}
.card h3{margin-bottom:.15rem}
.card p{color:var(--ink-2);font-size:.95rem}
.card-foot{margin-top:auto;padding-top:var(--s3);font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);display:flex;align-items:center;gap:.4rem}

/* door cards on the home page carry their line's colour */
.door{position:relative;overflow:hidden}
.door::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--amber)}
.door--teal::before{background:var(--teal)}
.door--clay::before{background:var(--clay)}
.door--teal:hover{border-color:color-mix(in srgb,var(--teal) 55%,var(--line))}
.door--teal .card-foot{color:var(--teal)}
.door--clay:hover{border-color:color-mix(in srgb,var(--clay) 55%,var(--line))}
.door--clay .card-foot{color:var(--clay)}

/* ---------- price table ---------- */
.ptable{width:100%;border-collapse:collapse;font-size:.94rem}
.ptable th,.ptable td{text-align:left;padding:.85rem .9rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
.ptable thead th{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);border-bottom-color:var(--line);font-weight:500}
.ptable td:last-child,.ptable th:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ptable .p-name{font-weight:600;color:var(--ink)}
.ptable .p-sub{display:block;color:var(--ink-3);font-size:.83rem;font-weight:400;margin-top:.15rem;line-height:1.45}
.ptable .p-price{font-family:var(--f-display);font-weight:700;font-size:1.05rem;font-stretch:100%}
.tscroll{overflow-x:auto}
.ptable tbody tr:hover{background:color-mix(in srgb,var(--surface) 60%,transparent)}

/* ---------- tier cards (retainers) ---------- */
.tiers{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:880px){.tiers{grid-template-columns:repeat(3,1fr)}}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2)}
.tier--feature{border-color:var(--amber);background:linear-gradient(180deg,color-mix(in srgb,var(--amber) 9%,var(--surface)),var(--surface))}
.tier-price{font-family:var(--f-display);font-size:2.3rem;font-weight:800;font-stretch:100%;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tier-price small{font-family:var(--f-body);font-size:.85rem;font-weight:500;color:var(--ink-3);letter-spacing:0}
.tier ul{margin:0;padding-left:1.05rem;color:var(--ink-2);font-size:.9rem;display:flex;flex-direction:column;gap:.35rem}
.tier li::marker{color:var(--ink-3)}

/* ---------- accordion ("click-down") ---------- */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line-soft)}
.acc summary{
  list-style:none;cursor:pointer;padding:1.15rem 0;display:flex;align-items:center;gap:var(--s3);
  font-family:var(--f-display);font-weight:600;font-size:clamp(1rem,1.5vw,1.18rem);font-stretch:100%;
  letter-spacing:-.01em;transition:color .18s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--amber)}
.acc summary .acc-n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink-3);
  min-width:3.2rem;font-weight:400}
.acc summary .acc-ic{margin-left:auto;position:relative;width:13px;height:13px;flex:none}
.acc summary .acc-ic::before,.acc summary .acc-ic::after{
  content:"";position:absolute;background:var(--ink-3);transition:transform .22s,background .18s}
.acc summary .acc-ic::before{left:0;top:6px;width:13px;height:1px}
.acc summary .acc-ic::after{left:6px;top:0;width:1px;height:13px}
.acc details[open] summary .acc-ic::after{transform:scaleY(0)}
.acc details[open] summary{color:var(--amber)}
.acc details[open] summary .acc-ic::before{background:var(--amber)}
.acc-body{padding:0 0 1.4rem calc(3.2rem + var(--s3));color:var(--ink-2);font-size:.96rem;
  display:flex;flex-direction:column;gap:var(--s2);max-width:78ch}
.acc-body ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.4rem}
@media(max-width:640px){.acc-body{padding-left:0}}

/* ---------- steps (a real sequence, so numbers earn their place) ---------- */
.steps{display:grid;gap:var(--s4);grid-template-columns:1fr;counter-reset:st}
@media(min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{display:flex;flex-direction:column;gap:.5rem;padding-top:var(--s3);border-top:1px solid var(--line)}
.step-n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;color:var(--ink-3)}
.step h4{font-family:var(--f-display);font-size:1.02rem;font-weight:600;font-stretch:100%}
.step p{font-size:.9rem;color:var(--ink-3);line-height:1.55}

/* ---------- proof band ---------- */
.proof{border-block:1px solid var(--line-soft);background:var(--ground-2)}
.proof-in{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:center;padding-block:var(--s4)}
.proof-name{font-family:var(--f-display);font-weight:600;font-stretch:100%;font-size:.98rem;color:var(--ink-3);
  transition:color .2s}
.proof-in:hover .proof-name{color:color-mix(in srgb,var(--ink-3) 55%,var(--ground))}
.proof-in:hover .proof-name:hover{color:var(--ink)}
.proof-name:hover{color:var(--ink)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:clamp(1.6rem,4vw,3rem);display:flex;flex-direction:column;gap:var(--s3)}
.cta-band h2{max-width:20ch}
.cta-band .lede{max-width:52ch}

/* ---------- notes / flags for the humans reviewing this draft ---------- */
.note{border-left:2px solid var(--clay);background:color-mix(in srgb,var(--clay) 8%,var(--surface));
  padding:var(--s3) var(--s4);border-radius:0 3px 3px 0;font-size:.9rem;color:var(--ink-2);
  display:flex;flex-direction:column;gap:.4rem}
.note b{color:var(--ink);font-weight:600}
body:not([data-notes="1"]) .note{display:none}
p.note{display:block}
p.note .note-tag{display:block;margin-bottom:.35rem}
.note-tag{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--clay-txt)}

/* ---------- form ---------- */
.form{display:flex;flex-direction:column;gap:var(--s4);max-width:720px}
.fq{display:flex;flex-direction:column;gap:.5rem}
.fq label,.fq-legend{font-weight:600;font-size:.95rem;display:flex;gap:.6rem;align-items:baseline}
.fq .qn{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;color:var(--ink-3);flex:none}
.fq .qh{font-size:.83rem;color:var(--ink-3);padding-left:calc(1.6rem + .6rem);margin-top:-.25rem;line-height:1.5}
.fq input,.fq textarea,.fq select{
  font-family:var(--f-body);font-size:.95rem;color:var(--ink);background:var(--ground-2);
  border:1px solid var(--line);border-radius:2px;padding:.7rem .85rem;width:100%;
}
.fq textarea{min-height:88px;resize:vertical}
.fq input::placeholder,.fq textarea::placeholder{color:#6E7D89}
.fq input:focus,.fq textarea:focus,.fq select:focus{border-color:var(--amber)}
.fq input:focus-visible,.fq textarea:focus-visible,.fq select:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-size:.85rem;padding:.45rem .85rem;border:1px solid var(--line);border-radius:2px;
  background:var(--ground-2);color:var(--ink-2);cursor:pointer;transition:.18s;font-family:var(--f-body)}
.chip:hover{border-color:var(--ink-3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#160B02;font-weight:600}
.fieldset-h{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);padding-top:var(--s3);border-top:1px solid var(--line)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);background:var(--ground-2);padding-block:var(--s6) var(--s5);margin-top:var(--s6)}
.foot-grid{display:grid;gap:var(--s5);grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot h4{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;margin-bottom:var(--s2)}
.foot a{display:block;text-decoration:none;color:var(--ink-2);font-size:.9rem;padding-block:.28rem}
.foot a:hover{color:var(--amber)}
.foot-bot{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}

/* ---------- page switching ---------- */
.page{display:block;animation:fade .32s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.reels{display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.reels{grid-template-columns:repeat(4,1fr)}}
@media(max-width:420px){.reels{grid-template-columns:1fr;max-width:300px}}
.split{display:grid;gap:var(--s5);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:var(--s6)}}
.split--wide{grid-template-columns:1fr}
@media(min-width:900px){.split--wide{grid-template-columns:1.15fr .85fr}}
.kv{display:flex;flex-direction:column;gap:var(--s2)}
.kv-row{display:flex;justify-content:space-between;gap:var(--s3);padding-block:.6rem;
  border-bottom:1px solid var(--line-soft);font-size:.93rem}
.kv-row dt{color:var(--ink-3)}
.kv-row dd{margin:0;font-weight:600;text-align:right}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--s5)}

/* the sports comparison is the one place the page grid breaks on purpose */
.versus{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:900px){.versus{grid-template-columns:1fr 1fr}}
.versus-half{padding:clamp(1.5rem,4vw,3.25rem) clamp(1.1rem,4vw,3rem);display:flex;flex-direction:column;gap:var(--s3)}
@media(min-width:900px){.versus-half + .versus-half{border-left:1px solid var(--line)}}
@media(max-width:899px){.versus-half + .versus-half{border-top:1px solid var(--line)}}
.versus-half h3{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;font-stretch:100%}
.versus-half .frame{max-width:100%}
.versus-half .kicker{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay-txt)}
.versus-half p{color:var(--ink-2);font-size:.97rem;max-width:46ch}
.versus-for{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line-soft);
  font-size:.9rem;color:var(--ink-3)}
.versus-for b{color:var(--ink);font-weight:600}


/* =====================================================================
   THE NEW SKIN — after the reference: full-bleed footage, one accent,
   serif titles over the work, the wordmark as the biggest thing on the page.
   ===================================================================== */
body{font-size:17px}
h1{font-stretch:100%}
.wrap--wide{max-width:1520px}

/* ---------- loader: a beat of amber with the mark, then the footage ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--amber);display:grid;place-items:center;
  transition:opacity .6s ease,visibility 0s linear .6s}
.loader img{width:clamp(72px,9vw,120px);height:auto;filter:invert(1);opacity:.9;
  animation:markin .9s cubic-bezier(.2,.7,.2,1) both}
.loader.off{opacity:0;visibility:hidden}
@keyframes markin{from{transform:scale(.86);opacity:0}to{transform:none;opacity:.9}}
@media(prefers-reduced-motion:reduce){.loader{display:none}}

/* ---------- nav: sits on the footage, two words, becomes a bar on scroll ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--nav-h);background:transparent;
  border-bottom:1px solid transparent;-webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background .3s,border-color .3s}
.nav.solid{background:color-mix(in srgb,var(--ground) 86%,transparent);border-bottom-color:var(--line-soft);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav-in{max-width:none;padding-inline:clamp(1.1rem,3.4vw,2.6rem)}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:clamp(22px,2.2vw,30px);width:auto;display:block}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.2rem)}
.nav-link{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:.5rem 0;opacity:.85;transition:opacity .2s}
.nav-link:hover{opacity:1}
.menu-btn{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:none;border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);
  padding:.55rem .9rem;border-radius:2px;cursor:pointer;transition:border-color .2s,background .2s}
.menu-btn:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
.nav-links,.burger,.mobile-menu,.nav-cta,.nav-drop{display:none!important}

/* full-screen menu */
.menu{position:fixed;inset:0;z-index:95;background:var(--ground);display:none;flex-direction:column;
  padding:calc(var(--nav-h) + 2rem) clamp(1.1rem,3.4vw,2.6rem) 2rem;overflow:auto}
.menu[data-open="1"]{display:flex}
.menu-grid{display:grid;gap:var(--s5);grid-template-columns:1fr;flex:1}
@media(min-width:900px){.menu-grid{grid-template-columns:1.4fr 1fr;align-items:end}}
.menu-main{display:flex;flex-direction:column;gap:.15rem}
.menu-main a{font-family:var(--f-display);font-weight:800;font-stretch:100%;letter-spacing:-.035em;
  font-size:clamp(2.4rem,7.5vw,6.2rem);line-height:.98;color:var(--ink);text-decoration:none;
  padding:.1em 0;border-bottom:1px solid var(--line-soft);display:flex;align-items:baseline;gap:.6rem;
  transition:color .2s,padding-left .25s}
.menu-main a:hover{color:var(--amber);padding-left:.25em}
.menu-main a small{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;color:var(--ink-3);
  font-weight:400;text-transform:uppercase}
.menu-side{display:flex;flex-direction:column;gap:var(--s3)}
.menu-side a{font-family:var(--f-display);font-weight:600;font-stretch:100%;font-size:clamp(1.1rem,1.8vw,1.5rem);
  color:var(--ink-2);text-decoration:none;transition:color .2s}
.menu-side a:hover{color:var(--ink)}
.menu-side .tag{margin-bottom:.2rem}
.menu-close{position:absolute;top:calc((var(--nav-h) - 36px)/2);right:clamp(1.1rem,3.4vw,2.6rem)}
.menu-foot{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);padding-top:var(--s5);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.menu-foot a{color:var(--ink-2);text-decoration:none}
.menu-foot a:hover{color:var(--amber)}

/* ---------- hero: the footage, the wordmark, the line ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:hidden;
  border-bottom:0;isolation:isolate}
.hero--sub{min-height:min(86svh,820px)}
.hero--slim{min-height:min(62svh,520px)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,var(--ground) 0%,color-mix(in srgb,var(--ground) 55%,transparent) 30%,
  color-mix(in srgb,var(--ground) 18%,transparent) 60%,color-mix(in srgb,var(--ground) 45%,transparent) 100%)}
.hero-center{position:relative;z-index:2;display:grid;place-items:center;padding:calc(var(--nav-h) + 2rem) clamp(1.1rem,3.4vw,2.6rem) 2rem;text-align:center}
.hero-wordmark{width:min(78vw,980px);height:auto;filter:drop-shadow(0 8px 40px rgba(0,0,0,.55))}
.hero-tag{font-family:var(--f-mono);font-size:clamp(.72rem,1.1vw,.9rem);letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink);opacity:.92;margin-top:clamp(1rem,2.4vw,1.8rem)}
.hero-tag b{color:var(--amber);font-weight:500}
.hero-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s4);padding:0 clamp(1.1rem,3.4vw,2.6rem) clamp(1.2rem,3vw,2.2rem);flex-wrap:wrap}
.hero-foot .lede{max-width:44ch;font-size:clamp(1rem,1.35vw,1.15rem);color:var(--ink)}
.hero-cue{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:.7rem;text-decoration:none}
.hero-cue i{display:block;width:1px;height:38px;background:var(--ink-2);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4}50%{transform:none;opacity:1}}
/* sub-page heroes keep the footage but the type does the talking */
.hero--sub .hero-center,.hero--slim .hero-center{place-items:end start;text-align:left}
.hero--sub .hero-center h1,.hero--slim .hero-center h1{max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.hero-eyebrow{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.hero-copy{display:flex;flex-direction:column;gap:var(--s3);max-width:60ch}
.hero-copy .lede{color:var(--ink)}
.hero-copy .btn-row{margin-top:var(--s2)}

/* ---------- chapters: one project, one screen, title in serif over the frame ---------- */
.chapters{display:flex;flex-direction:column}
.chapter{position:relative;display:block;min-height:min(92svh,860px);text-decoration:none;color:var(--ink);
  overflow:hidden;isolation:isolate;border-top:1px solid var(--line-soft)}
.chapter-media{position:absolute;inset:0;z-index:0;background:var(--ground-2)}
.chapter-media img,.chapter-media video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.chapter:hover .chapter-media img,.chapter:hover .chapter-media video{transform:scale(1.03)}
.chapter-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,color-mix(in srgb,var(--ground) 78%,transparent),transparent 45%,color-mix(in srgb,var(--ground) 30%,transparent))}
/* until the real still lands, the slate: mark, very quiet */
.chapter-media.slate{background:
  radial-gradient(60% 60% at 50% 45%,#141719,var(--ground-2) 100%)}
.chapter-media.slate::before{content:"";position:absolute;inset:0;
  background:url(/media/rook-wordmark-white.png) center 46%/min(42vw,420px) no-repeat;opacity:.06}
.chapter-ui{position:relative;z-index:2;min-height:inherit;display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(1.2rem,3vw,2.4rem) clamp(1.1rem,3.4vw,2.6rem)}
.chapter-top{display:flex;justify-content:space-between;gap:var(--s3);font-family:var(--f-mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.chapter-n{color:var(--amber)}
.chapter-title{align-self:center;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.chapter-title .client{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.chapter-title h2{font-family:var(--f-title);font-weight:400;font-style:normal;letter-spacing:-.01em;
  font-size:clamp(3rem,9.5vw,8.4rem);line-height:.92;color:var(--ink);font-stretch:100%;
  text-shadow:0 2px 40px rgba(0,0,0,.55);max-width:12ch}
.chapter-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.chapter-bot p{max-width:52ch;color:var(--ink-2);font-size:.95rem}
.chapter-bot .go{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:.6rem;border-bottom:1px solid var(--amber);padding-bottom:.25rem}

/* ---------- band: the accent as a field, used for the three doors and the close ---------- */
.band{background:var(--amber);color:var(--on-amber);padding-block:clamp(3rem,7vw,6rem)}
.band .tag{color:color-mix(in srgb,var(--on-amber) 70%,var(--amber))}
.band h2{color:var(--on-amber)}
.band .lede,.band p{color:color-mix(in srgb,var(--on-amber) 82%,var(--amber))}
.doors{display:flex;flex-direction:column;border-top:1px solid color-mix(in srgb,var(--on-amber) 22%,transparent)}
.door-row{display:grid;grid-template-columns:1fr;gap:.4rem var(--s5);align-items:baseline;text-decoration:none;color:inherit;
  padding:clamp(1.1rem,2.4vw,1.8rem) 0;border-bottom:1px solid color-mix(in srgb,var(--on-amber) 22%,transparent);
  transition:padding-left .25s}
@media(min-width:900px){.door-row{grid-template-columns:auto 1fr auto}}
.door-row:hover{padding-left:.6rem}
.door-row .who{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--on-amber) 70%,var(--amber));min-width:11ch}
.door-row .what{font-family:var(--f-display);font-weight:800;font-stretch:100%;letter-spacing:-.03em;
  font-size:clamp(1.9rem,5vw,4.2rem);line-height:1;color:var(--on-amber)}
.door-row .how{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-amber);white-space:nowrap}
.band .btn--pri{background:var(--on-amber);color:var(--amber-2);border-color:var(--on-amber)}
.band .btn--pri:hover{background:#000;color:#fff}
.band .btn--ghost{color:var(--on-amber);border-color:color-mix(in srgb,var(--on-amber) 40%,transparent)}
.band .btn--ghost:hover{border-color:var(--on-amber);background:color-mix(in srgb,var(--on-amber) 8%,transparent)}

/* ---------- footer: the wordmark at full width, on the accent ---------- */
.foot{background:var(--amber);color:var(--on-amber);border-top:0;margin-top:0;padding:clamp(3rem,6vw,5rem) 0 1.4rem}
.foot h4{color:color-mix(in srgb,var(--on-amber) 70%,var(--amber))}
.foot a{color:var(--on-amber)}
.foot a:hover{color:#000;text-decoration:underline}
.foot .body-txt{color:color-mix(in srgb,var(--on-amber) 82%,var(--amber))}
.foot-mark{display:block;width:100%;height:auto;filter:invert(1) brightness(.08);margin:clamp(1.5rem,4vw,3rem) 0 1.2rem;
  opacity:.98}
.foot-bot{border-top-color:color-mix(in srgb,var(--on-amber) 22%,transparent);color:color-mix(in srgb,var(--on-amber) 75%,var(--amber))}
.foot .note{display:none}
.foot .logo{display:none}

/* ---------- the old slot, now a quiet slate instead of a blurred gradient ---------- */
.frame{position:relative;overflow:hidden;background:var(--ground-2);border:1px solid var(--line-soft);border-radius:2px;isolation:isolate}
.frame::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 60% at 50% 45%,#141719,var(--ground-2) 100%)}
.frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url(/media/rook-wordmark-white.png) center 46%/46% no-repeat;opacity:.05}
.frame--16{aspect-ratio:16/9}.frame--9{aspect-ratio:9/16}.frame--4{aspect-ratio:4/5}
.frame>img,.frame>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.frame-ui{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(.7rem,1.6vw,1.1rem)}
.frame-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2)}
.frame-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s2)}
.frame-lab{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  background:rgba(0,0,0,.35);padding:.28rem .5rem;border-radius:2px;line-height:1.3}
.frame-title{font-family:var(--f-title);font-style:normal;font-weight:400;font-size:clamp(1.15rem,1.9vw,1.6rem);color:var(--ink);line-height:1.1}
.frame-client{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-top:.25rem}
.play{position:absolute;inset:0;margin:auto;width:clamp(44px,5vw,60px);height:clamp(44px,5vw,60px);z-index:3;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ink) 45%,transparent);background:rgba(5,6,7,.45);display:grid;place-items:center;
  transition:background .2s,transform .2s,border-color .2s}
.play::after{content:"";width:0;height:0;margin-left:3px;border-left:12px solid var(--ink);border-top:7px solid transparent;border-bottom:7px solid transparent}
div.piece .play{opacity:.55}
a.piece:hover .play{background:var(--amber);border-color:var(--amber);transform:scale(1.06)}
a.piece:hover .play::after{border-left-color:var(--on-amber)}
.rec{display:inline-flex;align-items:center;gap:.4rem}
.rec i{width:7px;height:7px;border-radius:50%;background:var(--clay);animation:blink 2.2s ease-in-out infinite}
@keyframes blink{0%,45%{opacity:1}55%,100%{opacity:.25}}

/* ---------- section heads: serif for the big lines, grotesk keeps the bones ---------- */
.shead h2{font-family:var(--f-title);font-style:normal;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(2.4rem,5vw,4.2rem);line-height:.98}
.cta-band{background:var(--surface);border-color:var(--line)}
.cta-band h2{font-family:var(--f-title);font-style:normal;font-weight:400;font-size:clamp(2.2rem,4.6vw,3.8rem);letter-spacing:-.01em;line-height:1}
.tier-price{font-family:var(--f-display)}
.proof{background:var(--ground)}
.proof-name{font-family:var(--f-title);font-style:normal;font-weight:400;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--ink-3)}
.about-figure{position:relative;overflow:hidden;border-radius:2px;border:1px solid var(--line-soft)}
.about-figure img{display:block;width:100%;height:auto}
.about-figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:1rem 1.2rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  background:linear-gradient(to top,rgba(5,6,7,.85),transparent)}
.notes-toggle{font:inherit;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:0;color:inherit;cursor:pointer;opacity:.7;padding:0}
.notes-toggle:hover{opacity:1;text-decoration:underline}
@media(max-width:640px){.chapter{min-height:min(80svh,640px)}.chapter-title h2{font-size:clamp(2.6rem,13vw,4.2rem)}}


/* ---------- OG hero: wordmark, MAKE YOUR MOVE, the lines right under it ---------- */
.hero--og .hero-center{place-items:center;text-align:center;padding-top:calc(var(--nav-h) + 1rem)}
.hero-move{font-family:var(--f-display);font-weight:800;font-stretch:100%;letter-spacing:-.025em;line-height:.95;
  font-size:clamp(2.6rem,8.6vw,7.4rem);color:var(--ink);text-shadow:0 4px 40px rgba(0,0,0,.6);margin:clamp(.6rem,2vw,1.4rem) 0 0}
.hero-move b{color:var(--amber)}
.hero-lines{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem clamp(1rem,2.6vw,2.2rem);
  margin-top:clamp(1rem,2.4vw,1.8rem);padding:0;list-style:none}
.hero-lines a{font-family:var(--f-display);font-weight:600;font-stretch:100%;font-size:clamp(1rem,1.5vw,1.25rem);
  letter-spacing:.01em;color:var(--ink);text-decoration:none;padding:.45rem .2rem;border-bottom:1px solid transparent;
  text-shadow:0 2px 18px rgba(0,0,0,.7);transition:border-color .2s,color .2s}
.hero-lines a:hover{border-bottom-color:var(--ink)}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);margin-top:clamp(1.4rem,3vw,2.2rem)}
.btn--lg{padding:1rem 1.7rem;font-size:1rem}
.btn--white{background:var(--ink);color:#0A0B0C;border-color:var(--ink)}
.btn--white:hover{background:#fff;border-color:#fff}
.btn--outline{background:rgba(5,6,7,.35);color:var(--ink);border-color:color-mix(in srgb,var(--ink) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.btn--outline:hover{border-color:var(--ink);background:rgba(5,6,7,.55)}

/* ---------- book-now chooser ---------- */
.chooser{position:fixed;inset:0;z-index:96;background:rgba(5,6,7,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:none;align-items:center;justify-content:center;padding:1rem}
.chooser[data-open="1"]{display:flex}
.chooser-card{background:var(--ground-2);border:1px solid var(--line);border-radius:4px;max-width:820px;width:100%;padding:clamp(1.4rem,3vw,2.4rem);position:relative}
.chooser-card h2{font-family:var(--f-title);font-style:normal;font-weight:400;font-size:clamp(1.9rem,4vw,3rem);line-height:1;margin-bottom:.4rem}
.chooser-card .lede{font-size:1rem;margin-bottom:var(--s4)}
.chooser-grid{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:720px){.chooser-grid{grid-template-columns:repeat(3,1fr)}}
.choice{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:3px;
  background:var(--surface);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s,background .2s}
.choice:hover{border-color:var(--ink-3);background:var(--surface-2);transform:translateY(-2px)}
.choice .tag{margin-bottom:.1rem}
.choice b{font-family:var(--f-display);font-weight:700;font-stretch:100%;font-size:1.15rem;color:var(--ink)}
.choice span{font-size:.88rem;color:var(--ink-2)}
.choice em{font-family:var(--f-mono);font-style:normal;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-top:.3rem}
.chooser-close{position:absolute;top:1rem;right:1rem}
.chooser-card h2,.chooser-card .lede{padding-right:6.5rem}
@media(max-width:560px){.chooser-close{position:static;margin:0 0 .8rem auto;display:block}.chooser-card h2,.chooser-card .lede{padding-right:0}}

/* ---------- package rows: the old real-estate pattern, one product per row, Book now on it ---------- */
.packs{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.pack{display:grid;grid-template-columns:1fr;gap:var(--s3) var(--s5);padding:clamp(1.2rem,2.6vw,2rem) 0;border-bottom:1px solid var(--line-soft);align-items:center}
@media(min-width:900px){.pack{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto}}
.pack-name{font-family:var(--f-display);font-weight:700;font-stretch:100%;letter-spacing:-.02em;font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.05;color:var(--ink)}
.pack-price{font-family:var(--f-display);font-weight:800;font-stretch:100%;font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.pack-price small{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-left:.5rem}
.pack-inc{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .9rem;color:var(--ink-2);font-size:.92rem}
.pack-inc li::before{content:"·";color:var(--amber);margin-right:.45rem}
.pack-act{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
@media(min-width:900px){.pack-act{align-items:flex-end}}
.pack-act .ex{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.pack-act .ex:hover{color:var(--ink);border-bottom-color:var(--ink)}
.pack-head{display:flex;flex-direction:column;gap:.35rem}
.pack--feature{background:linear-gradient(90deg,color-mix(in srgb,var(--amber) 9%,transparent),transparent 60%);padding-left:1rem;margin-left:-1rem;border-left:2px solid var(--amber)}
.examples{display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.examples{grid-template-columns:repeat(4,1fr)}}

/* OG package pattern: name + Book now on one line, inclusions under, examples strip under that */
.pack{grid-template-columns:1fr;gap:var(--s3)}
@media(min-width:900px){.pack{grid-template-columns:minmax(0,1fr) auto;align-items:start}}
.pack-head{gap:.5rem}
.pack-title{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.pack-title .btn{padding:.5rem 1rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.btn--book{background:var(--ink);color:#0A0B0C;border-color:var(--ink);position:relative}
.btn--book::before{content:"";position:absolute;left:-9px;top:50%;transform:translateY(-50%);border-right:9px solid var(--ink);border-top:9px solid transparent;border-bottom:9px solid transparent}
.btn--book:hover{background:#fff;border-color:#fff}
.btn--book:hover::before{border-right-color:#fff}
.pack-price{text-align:left}
@media(min-width:900px){.pack-price{text-align:right}}
.pack-inc{flex-direction:column;gap:.25rem}
.pack-inc li::before{content:"•";color:var(--ink-3);margin-right:.55rem}
.pack-ex{grid-column:1/-1;display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr);margin-top:.4rem}
@media(min-width:760px){.pack-ex{grid-template-columns:repeat(4,1fr)}}
.pack-ex .frame{aspect-ratio:3/2}
.pack-ex .frame--9{aspect-ratio:9/16}
.pack-ex .frame::after{background-size:34%}
.pack-act{display:none}
.svc-title{font-family:var(--f-display);font-weight:800;font-stretch:100%;letter-spacing:-.02em;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1;text-transform:uppercase;text-align:center;margin:0 0 var(--s5)}
.svc-title span{font-weight:400;font-stretch:100%;color:var(--ink-2)}
.hero-move b{color:var(--ink)}

/* showreel */
.reel-frame{border-color:var(--line)}
.reel-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:#000}
.reel-frame:has(video) .frame-ui{pointer-events:none}
.reel-frame:has(video) .frame-bot{display:none}

/* black & white: the accent is white, the field is white, ink on it is black */
.band,.foot{background:var(--ink);color:#0A0B0C}
.band .tag,.foot h4,.foot-bot{color:#5A5955}
.band h2,.band .lede,.band p,.foot a,.foot .body-txt{color:#0A0B0C}
.band .btn--pri{background:#0A0B0C;color:#F3F1EC;border-color:#0A0B0C}
.band .btn--pri:hover{background:#000}
.band .btn--ghost{color:#0A0B0C;border-color:rgba(10,11,12,.4)}
.band .btn--ghost:hover{border-color:#0A0B0C;background:rgba(10,11,12,.06)}
.foot-mark{filter:invert(1) brightness(.06)}
.foot-bot{border-top-color:rgba(10,11,12,.18)}
.btn--pri{background:var(--ink);color:#0A0B0C;border-color:var(--ink)}
.btn--pri:hover{background:#fff;border-color:#fff}
.hero-move b{color:var(--ink)}
.hero-move{font-size:clamp(2.2rem,6.4vw,5.4rem)}
.hero-center{text-align:center}
.hero-center > div{display:flex;flex-direction:column;align-items:center}
.hero-wordmark{margin-inline:auto}
.pack--feature{border-left-color:var(--ink);background:linear-gradient(90deg,rgba(243,241,236,.06),transparent 60%)}
.pack-inc li::before{color:var(--ink-3)}
.tier--feature{border-color:var(--ink);background:var(--surface)}
.chip[aria-pressed="true"]{background:var(--ink);color:#0A0B0C;border-color:var(--ink)}
.loader{background:#0A0B0C}
.loader img{filter:none;opacity:.95}
.rec i{background:#F3F1EC}

/* real clips: poster shows; hover/tap plays; a play glyph until it does */
.frame .clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;background:#000}
.frame:has(.clip) .play{z-index:4}
.frame:has(.clip.playing) .play{opacity:0}
.frame:has(.clip)::after{display:none}


/* ── Montserrat only (Q, 2026-09-02): Black headlines · Regular sub-heads · Light body ── */
body{font-weight:300}
h1,h2,h3,h4,.hero-move,.svc-title,.pack-name,.menu-main a,.logo,.tier-price,.pack-price,.chapter-title,.ptable .p-price{font-family:var(--f-display);font-weight:900;font-style:normal;letter-spacing:-.01em}
h3,h4,.step h4,.acc summary{font-weight:700}
.lede,.tag,.hero-lines a,.menu-side a,.nav-link,.menu-btn,.btn,.note-tag,.piece-meta,.frame-title,.proof-name,.fieldset-h,.foot h4,.step-n,.acc-n,.chapter-top,.hero-tag,.hero-cue,.pack-what,.pack-price small,.tier-price small{font-weight:400;font-style:normal}
p,li,.body-txt,.acc-body,.frame-client,.pack-inc,input,textarea,select{font-weight:300}
.svc-title span{font-weight:400}
strong,b{font-weight:700}
/* package rows: price sits with "what you get", sub-head bigger, real bullets */
@media(min-width:900px){.pack{grid-template-columns:1fr}}
.pack-head{gap:.55rem;max-width:62ch}
.pack-head .tag{font-size:clamp(1rem,1.4vw,1.15rem);letter-spacing:0;text-transform:none;color:var(--ink);font-weight:400;line-height:1.4}
.pack-head .pack-price{text-align:left;font-size:clamp(1.5rem,2.4vw,2rem);margin:.1rem 0 .15rem}
.pack-what{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:.35rem}
.pack-inc{list-style:disc;padding-left:1.25em;gap:.3rem;font-size:1rem;color:var(--ink-2)}
.pack-inc li::before{content:none;margin:0}
.pack-inc li{padding-left:.15em}
.pack-inc li::marker{color:var(--ink-3)}
/* hero logos (old landing page order): rook logo → Make Your Move logo → lines → buttons */
.hero-logo{width:min(34vw,210px);height:auto;display:block;margin:0 auto var(--s3);filter:drop-shadow(0 8px 40px rgba(0,0,0,.55))}
.hero-mym{width:min(84vw,760px);height:auto;display:block;margin:0 auto var(--s3);filter:drop-shadow(0 8px 40px rgba(0,0,0,.55))}
.brand img{height:34px;width:auto}
.foot-mark{filter:none}
/* Q 2026-09-02 — headline weight wins over the old serif-title rules */
.shead h2,.cta-band h2,.chapter-title h2,.chooser-card h2,.hero-copy h1,.hero h1,h1,h2{font-family:var(--f-display);font-weight:900;font-style:normal;letter-spacing:-.02em}
.svc-title span{font-weight:400}
.hero-lines{row-gap:.55rem;line-height:1.3}
.hero-lines a{font-weight:400}

/* Aiden 2026-09-02: one logo, centred at the top; MAKE YOUR MOVE alone in the hero; content sub-links under Content */
.nav-in{position:relative}
.brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.brand img{height:clamp(30px,3.2vw,44px);width:auto}
@media(max-width:640px){.brand img{height:30px}}
.hero--og .hero-center{padding-top:calc(var(--nav-h) + 2rem)}
.hero-mym{margin-bottom:var(--s4)}
.menu-sub{display:flex;flex-direction:column;gap:.1rem;padding:.1rem 0 .5rem 1.25rem;border-left:1px solid var(--line)}
.menu-sub a{font-size:clamp(1rem,1.6vw,1.35rem)!important;font-weight:500!important;letter-spacing:0!important;color:var(--ink-2)}
.menu-sub a small{font-size:.62rem}
@media(min-width:900px){.menu-grid{align-items:start}}
.about-figure img{aspect-ratio:auto;width:100%;height:auto;object-fit:cover}
@media(max-width:640px){.nav-link{display:none}.nav-right{gap:.6rem}}
.menu-main a:focus:not(:focus-visible){outline:none}

/* Aiden 2026-09-02: side column (Content by what it's for + Book) pinned bottom-right */
@media(min-width:900px){.menu-grid{align-items:end}.menu-side{align-self:end;align-items:flex-end;text-align:right;margin-left:auto}}
@media(min-width:900px){.menu-main a{font-size:clamp(1.8rem,4.4vw,3.9rem);line-height:1;padding:.45rem 0}.menu-main a small{font-size:.6rem}}
.menu-main a:focus{outline:none}
/* Aiden 2026-09-02: lines tight under MAKE YOUR MOVE, spanning its width like rookdm.com */
.hero-mym{margin-bottom:.35rem}
.hero-lines{width:min(84vw,760px);margin:0 auto;justify-content:space-between;gap:.3rem .6rem;padding:0}
@media(max-width:640px){.hero-lines{justify-content:center;gap:.35rem 1rem}}
.hero-actions{margin-top:var(--s4)}
.hero-move{line-height:0;font-size:0}
.hero-mym{margin-bottom:.9rem}
.hero-lines a{font-size:clamp(.95rem,1.2vw,1.1rem);white-space:nowrap}
@media(min-width:900px){.hero-lines{gap:.3rem .4rem}}

/* About: the crew */
.team-grid{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);grid-template-columns:1fr}
@media(min-width:640px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.team-grid{grid-template-columns:repeat(3,1fr)}}
.team-card{background:var(--ground);padding:clamp(1.2rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.5rem}
.team-role{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);font-weight:400}
.team-card h3{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:900;letter-spacing:-.02em;margin:0}
.team-card p{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.55}
/* /prep — what to expect */
.prep-callout{border:1px solid var(--ink);padding:clamp(1.2rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.5rem}
.prep-callout h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.prep-list{margin:.4rem 0 0;padding-left:1.3em;display:flex;flex-direction:column;gap:.45rem;font-size:1.05rem;color:var(--ink)}
.prep-list li::marker{color:var(--ink-3)}
.prep-table td,.prep-table th{padding:.75rem .6rem;vertical-align:top;border-bottom:1px solid var(--line-soft);text-align:left}
.prep-table td:first-child{white-space:nowrap;width:9rem}
.ptable-wrap{overflow-x:auto}
#p-prep h2{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:.6rem}
.prep-table td:last-child,.prep-table th:last-child{text-align:left}
@media(min-width:900px){.doors3{grid-template-columns:repeat(3,1fr)}}
.door .u{text-decoration:underline}

/* ============================================================
   2026-09-06 — Aiden's edit round.
   Caps on headings and the footer, prices that read as prices,
   an Instagram-style cover + lightbox player, and ROOK FILMS.
   ============================================================ */

/* --- 1. ALL CAPS on every heading and on the footer ---------------------- */
h1,h2,h3{text-transform:uppercase}
.foot h4,.foot a,.foot-bot,.foot .notes-toggle{text-transform:uppercase}
.foot a{letter-spacing:.06em;font-size:.82rem}
.foot-bot{letter-spacing:.1em}
.menu-main a{text-transform:uppercase}
/* body copy stays sentence case even when it sits inside a heading block */
.lede,.body-txt,p,li,dd,.frame-title,.pack-inc,.acc-body{text-transform:none}

/* --- 7. prices read as prices, not as body copy ------------------------- */
.pack-price{
  font-weight:300;                     /* Montserrat Light — the opposite of the headline */
  font-size:clamp(1.6rem,2.9vw,2.5rem);
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  text-transform:none;
}
.pack-price small{font-weight:400;letter-spacing:.14em;opacity:.85}
.p-price{font-weight:300;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.price-note{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;margin-top:.35rem;display:block}
@media(min-width:900px){.pack-price+.price-note,.price-note{text-align:inherit}}

/* MOST POPULAR — one badge, on the monthly tier. No scarcity, no countdown. */
.pack-badge{display:inline-block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;background:var(--ink);color:#0A0B0C;
  padding:.28rem .6rem;border-radius:2px;align-self:flex-start}

/* --- 5. cover picture + lightbox player --------------------------------- */
/* the inline clip never plays in the grid any more — the poster is the cover */
.frame video.clip{display:none!important}
.frame[data-video]{cursor:pointer}
.frame[data-video] .frame-ui{pointer-events:none}
.frame[data-video]::after{display:none}
.frame[data-video] .play{opacity:.85;transition:transform .18s,background .18s,border-color .18s}
.frame[data-video]:hover .play,.frame[data-video]:focus-visible .play{background:var(--ink);border-color:var(--ink);transform:scale(1.08)}
.frame[data-video]:hover .play::after,.frame[data-video]:focus-visible .play::after{border-left-color:#0A0B0C}
.frame[data-video]:hover img{transform:scale(1.03)}
.frame[data-video] img{transition:transform .4s ease}
.frame[data-video]:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.lb{position:fixed;inset:0;z-index:120;background:rgba(3,4,5,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:clamp(.6rem,3vw,2rem)}
.lb[data-open="1"]{display:flex}
.lb-inner{display:flex;flex-direction:column;gap:.7rem;max-width:min(100%,1200px);width:100%;align-items:center}
.lb video{max-width:100%;max-height:78vh;width:auto;background:#000;border:1px solid var(--line);border-radius:2px;display:block}
.lb-cap{display:flex;flex-direction:column;gap:.2rem;text-align:center}
.lb-title{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1rem,2vw,1.3rem);color:var(--ink)}
.lb-client{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lb-close{position:absolute;top:clamp(.7rem,2vw,1.4rem);right:clamp(.7rem,2vw,1.4rem);z-index:2}
.lb-hint{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* --- 4. the breakdown block --------------------------------------------- */
.breakdown{display:grid;gap:var(--s4);grid-template-columns:1fr;align-items:center}
@media(min-width:820px){.breakdown{grid-template-columns:minmax(0,340px) minmax(0,1fr)}}
.breakdown .frame{max-width:340px;width:100%}
.breakdown-copy{display:flex;flex-direction:column;gap:.7rem}
.frame--placeholder{display:flex;align-items:center;justify-content:center;background:var(--surface);
  border:1px dashed var(--line)}
.frame--placeholder .ph-txt{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1.2rem;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.7}

/* --- 9. ROOK FILMS ------------------------------------------------------ */
.film-strip{display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.film-strip{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.film-strip--6{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1100px){.film-strip--4{grid-template-columns:repeat(4,1fr)}}
.strip-empty{border:1px dashed var(--line);background:var(--surface);padding:clamp(1.6rem,4vw,3rem);
  display:flex;flex-direction:column;gap:.4rem;align-items:center;text-align:center}
.strip-empty .tag{color:var(--ink-3)}

/* --- 10/11. menu: main list only (side column deleted), locations line ---- */
.menu-grid{grid-template-columns:1fr!important}
.menu-foot{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}

/* --- 5b. cover captions: name over client, and a scrim so both are readable ---
   .frame-title / .frame-client were inline spans, so a title that wrapped to two
   lines ran straight through the client name underneath it. Blocks fix the flow;
   the clamp stops a long reel name eating the tile. */
.frame-title,.frame-client{display:block}
.frame-bot>div{min-width:0;max-width:100%}
.frame-title{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-shadow:0 1px 12px rgba(0,0,0,.75)}
.frame-client{text-shadow:0 1px 10px rgba(0,0,0,.8)}
.frame[data-video] .frame-ui::before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:58%;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(3,4,5,.88),rgba(3,4,5,.38) 45%,transparent)}

/* --- 10b. hero lines: seven doors now, so give the row room ---------------- */
.hero-lines{width:min(92vw,900px);justify-content:center;column-gap:clamp(.6rem,1.6vw,1.4rem)}
@media(min-width:900px){.hero-lines{column-gap:clamp(.8rem,1.4vw,1.4rem)}}
/* With the side column gone the main list IS the menu. On a phone the sub-line
   reads better stacked under the name than wrapped beside it — the link is a
   flex row, so stack the row rather than the <small>. */
@media(max-width:900px){
  .menu-main a{flex-direction:column;align-items:flex-start;gap:.15rem}
  .menu-main a small{margin-bottom:.15rem}
}
/* Aiden 2026-09-06: sub-page heroes read left, like the content under them (the B&W batch had re-centred them) */
.hero--sub .hero-center,.hero--slim .hero-center{text-align:left;place-items:end start;justify-items:start}
.hero--sub .hero-copy,.hero--slim .hero-copy{align-items:flex-start;margin:0}
.hero--sub .btn-row,.hero--slim .btn-row{justify-content:flex-start}
.shead,.cta-band{text-align:left}
.cta-band .btn-row{justify-content:flex-start}
/* photos in the lightbox */
.lb .lb-img{display:none;max-width:min(96vw,1400px);max-height:78vh;width:auto;height:auto;object-fit:contain;margin:0 auto}
.lb[data-mode="img"] .lb-img{display:block}
.lb[data-mode="img"] video{display:none}
.lb[data-mode="img"] .lb-hint{visibility:hidden}
.frame--photo{cursor:zoom-in}
/* never crop a face: headshots and portraits show the whole picture */
.frame--head img,.frame--portrait img{object-fit:contain;background:#000}

/* ============================================================
   2026-09-08 — design pass (Aiden's ask, frontend-design skill).
   Palette, Montserrat-only and caps headings are locked by Q and Aiden;
   this pass fixes scale, rhythm and the phone, and gives the order
   form a right-hand column. Nothing here touches Payhip or products.
   ============================================================ */

/* 1. Sub-page headlines: five lines of 90px caps is a wall. Cap the size,
      cap the measure, let the video breathe. */
.hero--sub h1,.hero--slim h1,.hero-copy h1{
  font-size:clamp(2.1rem,4.4vw,4rem);line-height:1;max-width:14ch;letter-spacing:-.025em}
.hero--sub .lede,.hero--slim .lede{font-size:clamp(1rem,1.3vw,1.15rem);max-width:46ch}
.hero--sub .hero-center{padding-bottom:clamp(2rem,5vw,3.5rem)}

/* 2. Eyebrow labels: keep them (they carry the line), quieter. */
.tag{letter-spacing:.12em;font-size:.66rem}
.pack-what{letter-spacing:.12em}

/* 3. Phone: the hero's inner blocks were 5px wider than the screen. */
.hero-center,.hero-foot{max-width:100%;box-sizing:border-box}
.hero-lines{max-width:100%}
@media(max-width:640px){
  .hero-mym{width:min(88vw,760px)}
  .hero-lines a{font-size:.92rem;padding:.35rem .1rem}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:.35rem}
  .hero-cue{display:none}
}

/* 4. Inputs: 16px stops iOS zooming on focus; a taller box is easier to tap. */
input,textarea,select{font-size:1rem;min-height:2.9rem;padding:.7rem .85rem}
textarea{min-height:7rem}

/* 5. Package rows: a firmer rule above each product, the price sits closer
      to the name, the strip gets a little air. */
.packs{border-top:0}
.pack{border-top:1px solid var(--line);border-bottom:0;padding:clamp(1.6rem,3vw,2.4rem) 0}
.pack--feature{border-top-color:var(--ink)}
.pack-title{gap:.5rem 1rem}
.pack-head .pack-price{margin:.05rem 0 .1rem}
.pack-ex{margin-top:.9rem}

/* 6. Section rhythm: one consistent gap, not seven inline overrides fighting. */
section{padding-block:clamp(3rem,7vw,5.5rem)}
.shead{margin-bottom:var(--s4)}

/* 7. Buttons: same height everywhere, no 9px arrow nub on Book now. */
.btn{min-height:2.9rem;display:inline-flex;align-items:center;justify-content:center}
.btn--book::before{display:none}
.pack-title .btn{padding:.55rem 1rem}

/* ============================================================
   2026-09-08 — website edit batch 2 (Aiden's fourteen).
   Everything below is from that list. Nothing above this line moved.
   ============================================================ */

/* --- 11. Footer logo -----------------------------------------------------
   It was a full-bleed wordmark band across the whole footer. Aiden: "far too
   big — same size as the top logo." So it's the same mark, at the nav's exact
   clamp, at the top of the first column. .foot-mark is kept as a rule (nothing
   is deleted) but no longer has an element to style. */
.foot-brand{display:inline-block;text-decoration:none;margin-bottom:var(--s3)}
.foot-brand img{height:clamp(22px,2.2vw,30px);width:auto;display:block}
.foot-mark{display:none}

/* --- 8. Animations -------------------------------------------------------
   Tasteful, short, and all of it dies under prefers-reduced-motion (the global
   rule at the top of this file kills every animation and transition; the
   explicit block at the bottom of this section covers the rest). */

/* buttons: the lift already existed with no transition to get there */
.btn{transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.btn:active{transform:translateY(0);box-shadow:none}

/* accordions: the body slides in. Where the browser can interpolate to auto
   (Chrome 129+) the whole panel animates its height instead of just its body. */
.acc-body{animation:accIn .28s ease}
@keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acc summary{transition:color .18s ease}
.acc summary .acc-ic::before,.acc summary .acc-ic::after{transition:transform .22s ease,background .22s ease}
@supports selector(::details-content){
  .acc{interpolate-size:allow-keywords}
  .acc details::details-content{
    block-size:0;overflow:clip;opacity:0;
    transition:block-size .3s ease,opacity .25s ease,content-visibility .3s allow-discrete;
    transition-behavior:allow-discrete}
  .acc details[open]::details-content{block-size:auto;opacity:1}
  .acc-body{animation:none}
}

/* lightbox: fade the ground, pop the frame */
.lb[data-open="1"]{animation:lbIn .2s ease}
.lb[data-open="1"] .lb-inner{animation:lbPop .28s cubic-bezier(.2,.85,.3,1)}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
@keyframes lbPop{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:none}}

/* menu overlay: the ground fades, then the doors arrive one after another */
.menu[data-open="1"]{animation:lbIn .22s ease}
.menu[data-open="1"] .menu-main a{animation:menuItem .34s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes menuItem{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.menu[data-open="1"] .menu-main a:nth-child(1){animation-delay:.03s}
.menu[data-open="1"] .menu-main a:nth-child(2){animation-delay:.06s}
.menu[data-open="1"] .menu-main a:nth-child(3){animation-delay:.09s}
.menu[data-open="1"] .menu-main a:nth-child(4){animation-delay:.12s}
.menu[data-open="1"] .menu-main a:nth-child(5){animation-delay:.15s}
.menu[data-open="1"] .menu-main a:nth-child(6){animation-delay:.18s}
.menu[data-open="1"] .menu-main a:nth-child(7){animation-delay:.21s}
.menu[data-open="1"] .menu-main a:nth-child(8){animation-delay:.24s}
.menu-main a{transition:color .18s ease,padding-left .25s cubic-bezier(.2,.8,.3,1)}

/* --- 2. The app block (real estate) --------------------------------------
   "Book easy on the mobile app — download now." A slow float on the phone, a
   slow breath on the ring behind it. No countdown, no urgency — it's a link to
   an app store. */
.appblock{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);
  border-radius:3px;padding:clamp(1.6rem,4vw,3rem);display:grid;gap:var(--s5);grid-template-columns:1fr;align-items:center}
@media(min-width:820px){.appblock{grid-template-columns:minmax(0,1fr) minmax(0,320px)}}
.appblock::before{content:"";position:absolute;right:-12%;top:-40%;width:52%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ink) 12%,transparent),transparent);
  animation:appBreathe 7s ease-in-out infinite;pointer-events:none}
.appblock-copy{display:flex;flex-direction:column;gap:.7rem;position:relative;z-index:1}
.appblock h2{font-family:var(--f-title);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.8rem,4vw,3rem);line-height:1}
.appblock .btn-row{margin-top:.4rem}
.appblock .store{display:inline-flex;align-items:center;gap:.55rem}
.appblock .store svg{width:18px;height:18px;flex:none}
.appblock-art{position:relative;z-index:1;display:grid;place-items:center}
.appphone{width:min(170px,52vw);aspect-ratio:9/19;border-radius:22px;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--surface-2),var(--ground-2));
  box-shadow:0 24px 60px rgba(0,0,0,.45);display:grid;place-items:center;
  animation:appFloat 5.5s ease-in-out infinite}
.appphone::before{content:"";width:38%;height:5px;border-radius:99px;background:var(--line);
  position:absolute;top:12px}
.appphone img{width:52%;height:auto;opacity:.9}
@keyframes appFloat{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
@keyframes appBreathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}

/* --- 6. The content-session photo gallery --------------------------------
   "Photos you can use for stories, graphics, posts — anything." A strip of the
   real edited photos, and a button that opens them in the lightbox with
   prev/next and a swipe on a phone. */
.gallery{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.gallery{grid-template-columns:repeat(4,1fr)}}
.gallery .frame{cursor:zoom-in}
.gallery .frame img{transition:transform .4s ease}
.gallery .frame:hover img{transform:scale(1.04)}
.gallery-more{display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:2px;aspect-ratio:4/5;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);text-decoration:none;transition:border-color .2s,color .2s}
.gallery-more:hover{border-color:var(--ink-3);color:var(--ink)}

/* lightbox gallery arrows: only shown when the box is in gallery mode */
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;
  border-radius:50%;border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);
  background:rgba(5,6,7,.55);color:var(--ink);display:none;place-items:center;cursor:pointer;
  font-size:1.2rem;line-height:1;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.lb-nav:hover{background:var(--ink);color:#0A0B0C;border-color:var(--ink);transform:translateY(-50%) scale(1.06)}
.lb-prev{left:clamp(.5rem,2vw,1.6rem)}
.lb-next{right:clamp(.5rem,2vw,1.6rem)}
.lb[data-gallery="1"] .lb-nav{display:grid}
.lb-count{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lb:not([data-gallery="1"]) .lb-count{display:none}
.lb[data-gallery="1"] .lb-hint{visibility:visible}

/* --- 10. About: the crew column reads centred ----------------------------
   Aiden: "it looks off." The hero stays left like every other sub-page; the
   body and the crew grid centre under it. */
.about-body{max-width:72ch;margin-inline:auto;text-align:center;align-items:center}
.about-body .lede,.about-body .body-txt{max-width:64ch;margin-inline:auto}
.about-body .about-figure{margin-inline:auto}
#p-about .shead{text-align:center;align-items:center}
#p-about .team-grid{justify-items:center;text-align:center}
#p-about .team-card{align-items:center}
#p-about .cta-band{text-align:center;align-items:center}
#p-about .cta-band h2,#p-about .cta-band .lede{margin-inline:auto}
#p-about .cta-band .btn-row{justify-content:center}

/* --- 12/13/14. small helpers --------------------------------------------- */
/* a row hidden behind a flag rather than deleted (real estate affiliate package) */
.pack[hidden],.is-hidden{display:none!important}
/* [hidden] LOSES to any class that sets display — .card is display:flex, so every
   "thanks, that's with us" confirmation card on the site was rendering under its own
   form instead of waiting for the submit. Found on /join 2026-09-08; it was hitting
   /start and /portal/contact too. */
[hidden]{display:none!important}
/* the "SEE THE VIDEOS ↓" jump button and its friends */
.jump-cue{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase}
/* website examples strip */
.sitegrid{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:760px){.sitegrid{grid-template-columns:repeat(3,1fr)}}
.sitegrid .frame{aspect-ratio:16/10}
.sitegrid .frame img{object-fit:cover;object-position:top center}

/* --- 8b. reduced motion: say it out loud rather than relying on the global -- */
@media (prefers-reduced-motion:reduce){
  .appphone,.appblock::before{animation:none}
  .menu[data-open="1"] .menu-main a{animation:none}
  .lb[data-open="1"],.lb[data-open="1"] .lb-inner{animation:none}
  .acc-body{animation:none}
  .btn:hover{transform:none;box-shadow:none}
  .gallery .frame:hover img{transform:none}
}

/* ── Nav cart chip (THE ROOK STORE) ────────────────────────────────────
   Lives here, not in rook-store.css, because the nav is on every page. It is
   hidden until /api/store/cart says the visitor actually has something in it. */
.nav-cart{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:2px;
  padding:.42rem .7rem;white-space:nowrap;line-height:1}
.nav-cart:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}

/* --- 2026-09-09 (Aiden): the menu carries two Digital doors now, so every row has
   to fit without scrolling. "Make the text a little bit smaller so they all fit."
   Same type, same ratios, same borders — only the scale moves. Sized so the whole
   list plus .menu-foot clears a 1280x720 laptop and a 375x812 phone.
   Desktop was clamp(1.8rem,4.4vw,3.9rem)/.45rem; phone was clamp(2.4rem,7.5vw,6.2rem)/.1em. */
.menu-main a{font-size:clamp(1.7rem,6.4vw,2.6rem);padding:.12em 0}
@media(min-width:900px){
  .menu-main a{font-size:clamp(1.35rem,2.9vw,2.5rem);line-height:1;padding:.28rem 0}
  .menu-main a small{font-size:.62rem}
}
/* The foot is the thing that falls off the bottom first — tighten its own padding
   rather than letting the list eat it. */
.menu-foot{padding-top:var(--s3);gap:var(--s2) var(--s4)}

/* Stagger delays only went to 8. Two more doors, two more steps — same .03s beat. */
.menu[data-open="1"] .menu-main a:nth-child(9){animation-delay:.27s}
.menu[data-open="1"] .menu-main a:nth-child(10){animation-delay:.30s}
.menu[data-open="1"] .menu-main a:nth-child(11){animation-delay:.33s}
/* Second heading inside the Digital column — a thin divider so the two lists read
   as two, without adding a fifth column that would wrap the footer grid. */
.foot h4.foot-h2{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}

/* portfolio: section headings on the Everything view */
.cat-head{grid-column:1/-1;margin:var(--s4) 0 .2rem;padding-top:var(--s3);border-top:1px solid var(--line);font-family:var(--f-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.3rem,2.6vw,1.9rem)}
.cat-head:first-child{margin-top:0;border-top:0;padding-top:0}
.cat-head small{display:block;font-family:var(--f-body,inherit);font-weight:300;text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink-3);margin-top:.25rem}