/* ============================================================
   CHOICES v2 · "Wings on the wall"   (canon: DESIGN.md)
   Page ground is logo black. The blue-violet family sampled from the
   logo is the one accent; the garments carry every other colour.
   HEADER + DRAWER rules are carried over from v1 unchanged.
============================================================ */
:root{
  --ink:#0B0B0C; --bone:#F2EFE9; --stone:#B9B3A6; --graphite:#1A1A1C;
  --crown:#E8B023;
  --line:rgba(242,239,233,.16); --line-2:rgba(242,239,233,.08);
  --font-mark:"Pirata One",serif;
  --font-ui:"Archivo",system-ui,sans-serif;
  --font-verse:"Cormorant Garamond",Georgia,serif;
  --font-tag:"Sedgwick Ave Display","Permanent Marker",cursive;
  --maxw:1440px; --ease:cubic-bezier(.16,1,.3,1);
  --black:#000; --wall:#050507; --wing:#EBEBEB; --paper:#ECE9E2;
  --royal:#5885E7; --royal-deep:#4464B2; --violet:#584EB2; --ice:#86B8D7; --spark:#EADB7C;
  --tag-grad:linear-gradient(100deg,#9CC6E4 0%,#5885E7 36%,#584EB2 72%,#7057D2 100%);
  /* ---- spacing scale (SP-SCALE). Fixed micro steps, fluid macro steps.
     Each macro step is exact at 390px and at 1440px; between them it is linear.
     sp-1 4  sp-2 8  sp-3 12            fixed: hairline / tight pair / control gap
     sp-4 18>28   caption gap, label to field
     sp-5 28>40   step inside a block (title to meta, CTA margin)
     sp-6 40>60   block to block, card grid row gap
     sp-7 56>88   SECTION Y standard, heading to content
     sp-8 76>124  SECTION Y feature (wall bands, scripture, drop list) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px;
  --sp-4:clamp(18px,.9524vw + 14.29px,28px);
  --sp-5:clamp(28px,1.143vw + 23.54px,40px);
  --sp-6:clamp(40px,1.905vw + 32.57px,60px);
  --sp-7:clamp(56px,3.048vw + 44.11px,88px);
  --sp-8:clamp(76px,4.571vw + 58.17px,124px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{font-family:var(--font-ui);background:var(--black);color:var(--bone);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px 160px}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
a,button,input{-webkit-tap-highlight-color:transparent}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,3.5vw,48px)}
.sec{padding:var(--sp-7) 0}
main{display:block;overflow-x:clip}
.sr{position:absolute!important;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:-80px;z-index:2000;background:var(--wing);color:#000;padding:10px 14px;font-size:13px;font-weight:700}
.skip:focus{top:12px}

/* ---------- HEADER + DRAWER (v1, client-approved: do not restyle) ---------- */
.hdr{position:sticky;top:0;z-index:1000;background:rgba(11,11,12,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
.nav{display:flex;align-items:center;height:64px;gap:28px}
.brand{font-family:var(--font-mark);font-size:27px;color:var(--bone);line-height:1;padding-top:2px}
.nav-links{display:flex;gap:26px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-left:8px}
.nav-links a{color:var(--stone);padding:4px 0;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--bone)}
.nav-r{margin-left:auto;display:flex;align-items:center;gap:18px}
.bag{position:relative;background:none;border:0;color:var(--bone);display:inline-flex;padding:6px}
.bag svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.burger{display:none}
.drawer{display:none}
.scrim{display:none}
.drawer-social{display:none}
.socials{display:flex;gap:12px}
.socials a{width:38px;height:38px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--stone);transition:color .2s,border-color .2s}
.socials a:hover{color:var(--bone);border-color:var(--bone)}
.socials svg{width:16px;height:16px;fill:currentColor}
.nav-r .socials{gap:6px;margin-right:4px}
.nav-r .socials a{width:30px;height:30px;border:0;color:var(--stone)}
.nav-r .socials a:hover{color:var(--bone)}
.nav-r .socials svg{width:15px;height:15px}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:1500;background:var(--graphite);border:1px solid var(--line);color:var(--bone);font-size:13px;letter-spacing:.04em;padding:13px 22px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- type + buttons ---------- */
.eb{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.eb::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--spark);flex:none}
.hd{font-weight:800;font-variation-settings:"wdth" 112;text-transform:uppercase;letter-spacing:.03em;line-height:1.02}
h2.hd{font-size:clamp(22px,2.6vw,34px)}
.meta{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.verse{font-family:var(--font-verse);font-style:italic;font-weight:500;font-size:clamp(2rem,6vw,4.5rem);line-height:1.08}
.cite{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ice)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:17px 32px;border:1px solid var(--bone);background:transparent;color:var(--bone);transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease);border-radius:0;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:hover{background:var(--bone);color:var(--ink)}
.btn-solid{background:var(--bone);color:var(--ink)}
.btn-solid:hover{background:transparent;color:var(--bone)}
.btn-ghost{background:rgba(0,0,0,.4);border-color:rgba(242,239,233,.55)}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.tlink{position:relative;display:inline-flex;align-items:center;gap:8px;width:max-content;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);border-bottom:1px solid var(--line);padding-bottom:5px;transition:border-color .25s,color .25s}
.tlink:hover{border-color:var(--ice);color:var(--ice)}
.tlink svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ---------- the wall kit ---------- */
.wall{position:relative;isolation:isolate}
.wall-bg{position:absolute;inset:0;z-index:-1;background:#000 url(assets/wall/wall-band.webp) center/cover no-repeat;opacity:.62;pointer-events:none}
.wall-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,#000 100%)}

/* tag heading: heavy kicker + sprayed tag word over a spray stroke */
.tag-h{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.3em;line-height:1;isolation:isolate}
.tag-h::before{content:"";position:absolute;z-index:-1;left:-4%;right:-10%;top:34%;height:74%;background:var(--royal);opacity:.24;-webkit-mask:url(assets/wall/spray-stroke.webp) center/100% 100% no-repeat;mask:url(assets/wall/spray-stroke.webp) center/100% 100% no-repeat;transform:rotate(-2.5deg);pointer-events:none}
.tag-k{font-weight:900;font-variation-settings:"wdth" 112;text-transform:uppercase;font-size:clamp(18px,2vw,30px);letter-spacing:.01em;line-height:1;color:var(--wing)}
.tag-w{font-family:var(--font-tag);font-weight:400;font-size:clamp(48px,6.4vw,100px);line-height:1;letter-spacing:0;background:var(--tag-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.08em .12em .44em .02em;margin:-.08em 0 -.44em}
.js .tag-h.rv .tag-w{-webkit-mask:linear-gradient(90deg,#000 44%,transparent 56%) 100% 0/260% 100% no-repeat;mask:linear-gradient(90deg,#000 44%,transparent 56%) 100% 0/260% 100% no-repeat;transition:-webkit-mask-position .95s cubic-bezier(.65,0,.35,1) .15s,mask-position .95s cubic-bezier(.65,0,.35,1) .15s}
.js .tag-h.rv.in .tag-w{-webkit-mask-position:0 0;mask-position:0 0}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap;margin-bottom:var(--sp-7)}
.sec-aside{display:grid;justify-items:start;gap:var(--sp-3);max-width:36ch}
.sec-aside p{font-size:15px;line-height:1.6;color:var(--stone)}

/* paste-up: wheatpaste poster with tape, flat mockup multiplied into the paper */
.wall-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6) var(--sp-4)}
.paste{position:relative;display:block;outline-offset:10px}
.wall-grid .paste:nth-child(3n+2){margin-top:clamp(0px,3.1vw,44px);--d:.09s}
.wall-grid .paste:nth-child(3n){--d:.18s}
.paste-sheet{position:relative;aspect-ratio:1/1.06;background:var(--paper) url(assets/wall/paper.webp) center/cover;transform:rotate(var(--rot,0deg));transition:transform .6s var(--ease),box-shadow .6s var(--ease);box-shadow:0 22px 44px -16px rgba(0,0,0,.95),0 4px 12px rgba(0,0,0,.55)}
.paste-sheet::before,.paste-sheet::after,.poster-sheet::before,.poster-sheet::after{content:"";position:absolute;z-index:3;top:-13px;width:30%;height:28px;background:rgba(232,230,224,.68);box-shadow:0 1px 3px rgba(0,0,0,.3);clip-path:polygon(3% 8%,97% 0,100% 34%,96% 64%,99% 100%,2% 92%,0 60%,4% 30%);pointer-events:none}
/* PT-02: the overhang is a % of the sheet while the page gutter is fixed, so a full-inner-width
   sheet always hung past the viewport and the torn end was sliced flat. Keep the 5%, but never
   let the tape come closer than 10px to the page edge. */
.paste-sheet::before,.poster-sheet::before{left:max(calc(10px - clamp(18px,3.5vw,48px)),-5%);transform:rotate(-9deg)}
.paste-sheet::after,.poster-sheet::after{right:max(calc(10px - clamp(18px,3.5vw,48px)),-5%);transform:rotate(8deg)}
.paste-sheet img{position:absolute;left:5%;top:5%;width:90%;height:90%;object-fit:contain;mix-blend-mode:multiply;transition:opacity .4s ease}
.paste-sheet .back{opacity:0}
.paste:hover .paste-sheet,.paste:focus-visible .paste-sheet{transform:rotate(0deg) translateY(-8px);box-shadow:0 34px 60px -18px #000,0 6px 16px rgba(0,0,0,.6)}
.paste:hover .back,.paste.flip .back,.paste:focus-visible .back{opacity:1}
.paste:hover .front,.paste.flip .front,.paste:focus-visible .front{opacity:0}
.paste-cap{display:grid;gap:var(--sp-1);margin-top:var(--sp-4);padding-left:2px}
.pc-name{font-size:13px;font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;color:var(--wing);text-wrap:pretty}
.pc-credit{font-size:11px;letter-spacing:.13em;text-transform:uppercase;line-height:1.5;color:var(--stone)}
.pc-credit b{color:var(--ice);font-weight:700}

/* sticker */
.sticker{display:block;width:clamp(66px,6.2vw,92px);aspect-ratio:1;overflow:hidden;background:#fff;border:3px solid var(--wing);border-radius:12px;box-shadow:0 10px 22px rgba(0,0,0,.6);transform:rotate(var(--rot,0deg));transition:transform .4s var(--ease)}
.sticker img{width:100%;height:100%;object-fit:contain;padding:5%}
.sticker:hover,.sticker:focus-visible{transform:rotate(0deg) scale(1.08)}

/* ---------- HERO: the wings logo, layered ---------- */
.hero-w{position:relative;isolation:isolate;min-height:calc(100svh - 64px);display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}
.hw-wall{position:absolute;inset:-16px;z-index:-2;translate:calc(var(--px,0) * -10px) calc(var(--py,0) * -6px);transition:opacity 1.4s ease,translate 1s var(--ease)}
.hw-wall img{width:100%;height:100%;object-fit:cover}
.hw-wall::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 44% 50% at 50% 43%,rgba(0,0,0,.55),rgba(0,0,0,0) 72%),linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 64%,#000 100%)}
.hw-mist{position:absolute;z-index:-1;left:50%;top:40%;width:min(80vmin,820px);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,rgba(88,133,231,.16),rgba(88,78,178,.07) 50%,rgba(0,0,0,0));pointer-events:none}
.hw-inner{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(24px,4.5vh,52px) clamp(18px,3.5vw,48px) clamp(34px,6vh,68px)}
.hw-logo{position:relative;width:min(94vw,calc(min(57svh,580px) * 1.1503));aspect-ratio:888/772}
.hw-l{position:absolute;display:block}
.hw-l img{display:block;width:100%;height:auto;max-width:none}
.hw-wl{left:18.919%;top:4.456%;width:31.982%;z-index:1;transform-origin:88% 92%;translate:calc(var(--px,0) * 7px) calc(var(--py,0) * 5px)}
.hw-wr{left:50.901%;top:6.373%;width:33.514%;z-index:1;transform-origin:12% 92%;translate:calc(var(--px,0) * 7px) calc(var(--py,0) * 5px)}
.hw-mono{left:43.198%;top:9.585%;width:17.387%;z-index:2;translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 8px)}
.hw-word{left:9.234%;top:74.508%;width:79.144%;z-index:2;translate:calc(var(--px,0) * 4px) calc(var(--py,0) * 2px)}
.hw-wl,.hw-wr{transition:transform 1.7s var(--ease),opacity 1.1s ease,translate .9s var(--ease)}
.hw-wl{transition-delay:.2s,.2s,0s}
.hw-wr{transition-delay:.32s,.32s,0s}
.hw-wl img{transform-origin:88% 92%}
.hw-wr img{transform-origin:12% 92%}
.hw-mono{transition:transform 1.3s var(--ease) .08s,opacity 1s ease .08s,translate .9s var(--ease) 0s}
.hw-mono::before{content:"";position:absolute;left:50%;top:58%;width:230%;aspect-ratio:1;translate:-50% -50%;z-index:-1;background:radial-gradient(closest-side,rgba(88,133,231,.34),rgba(88,78,178,.12) 55%,rgba(0,0,0,0));opacity:.9;transition:opacity 1.6s ease .9s;pointer-events:none}
.hw-glint{position:absolute;left:82.5%;top:28.1%;width:42%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,rgba(255,253,238,.95),rgba(234,219,124,.45) 30%,rgba(234,219,124,0));mix-blend-mode:screen;opacity:0;pointer-events:none}
.hw-word{-webkit-mask:linear-gradient(90deg,#000 44%,transparent 56%) 0 0/260% 100% no-repeat;mask:linear-gradient(90deg,#000 44%,transparent 56%) 0 0/260% 100% no-repeat;transition:-webkit-mask-position 1.1s cubic-bezier(.65,0,.35,1) .75s,mask-position 1.1s cubic-bezier(.65,0,.35,1) .75s,translate .9s var(--ease) 0s}

/* tagline, set live so it reflows: heavy YOUR + sprayed tag word, like the logo */
.hw-tag{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.2em .55em;margin-top:clamp(12px,2.2vh,24px);font-size:clamp(19px,2.1vw,32px);line-height:1;color:var(--wing)}
.t-seg{display:inline-flex;align-items:baseline;gap:.3em;white-space:nowrap}
.hw-tag b{font-weight:900;font-variation-settings:"wdth" 108;text-transform:uppercase;letter-spacing:.01em;transition:opacity .6s ease}
.hw-tag .tw{font-family:var(--font-tag);font-weight:400;font-size:1.36em;line-height:.9;letter-spacing:0;background:var(--tag-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.06em .1em .44em .02em;margin:-.06em 0 -.44em;-webkit-mask:linear-gradient(90deg,#000 44%,transparent 56%) 0 0/260% 100% no-repeat;mask:linear-gradient(90deg,#000 44%,transparent 56%) 0 0/260% 100% no-repeat;transition:-webkit-mask-position .8s cubic-bezier(.65,0,.35,1),mask-position .8s cubic-bezier(.65,0,.35,1)}
.t-bar{align-self:center;width:3px;height:1.2em;background:var(--wing);transition:opacity .5s ease}
.hw-tag>:nth-child(1) b{transition-delay:1.15s}.hw-tag>:nth-child(1) .tw{transition-delay:1.25s}
.hw-tag>:nth-child(2){transition-delay:1.45s}
.hw-tag>:nth-child(3) b{transition-delay:1.5s}.hw-tag>:nth-child(3) .tw{transition-delay:1.6s}
.hw-tag>:nth-child(4){transition-delay:1.8s}
.hw-tag>:nth-child(5) b{transition-delay:1.85s}.hw-tag>:nth-child(5) .tw{transition-delay:1.95s}
.hw-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(20px,3.4vh,36px);transition:opacity .8s ease 2.05s,transform .9s var(--ease) 2.05s}

/* entrance: hidden states only exist while html.hj is set and html.hero-live is not */
.hj:not(.hero-live) .hw-wall{opacity:0}
.hj:not(.hero-live) .hw-wl{opacity:0;transform:rotate(-18deg) translateY(30px)}
.hj:not(.hero-live) .hw-wr{opacity:0;transform:rotate(18deg) translateY(30px)}
.hj:not(.hero-live) .hw-mono{opacity:0;transform:translateY(-24px) scale(.94)}
.hj:not(.hero-live) .hw-mono::before{opacity:0}
.hj:not(.hero-live) .hw-word,.hj:not(.hero-live) .hw-tag .tw{-webkit-mask-position:100% 0;mask-position:100% 0}
.hj:not(.hero-live) .hw-tag b,.hj:not(.hero-live) .t-bar{opacity:0}
.hj:not(.hero-live) .hw-cta{opacity:0;transform:translateY(16px)}
@keyframes wingL{from{rotate:0deg}to{rotate:-1.6deg}}
@keyframes wingR{from{rotate:0deg}to{rotate:1.6deg}}
@keyframes glow{from{opacity:.9}to{opacity:.5}}
@keyframes glint{0%,62%,100%{opacity:0;transform:scale(.5)}72%{opacity:.95;transform:scale(1.05)}84%{opacity:.25;transform:scale(.8)}}
.hero-live .hw-wl img{animation:wingL 6.5s ease-in-out 2.3s infinite alternate}
.hero-live .hw-wr img{animation:wingR 6.5s ease-in-out 2.3s infinite alternate}
.hero-live .hw-mono::before{animation:glow 5s ease-in-out 2.6s infinite alternate}
.hero-live .hw-glint{animation:glint 3.8s ease-in-out 2.4s infinite}

/* ---------- TAPE ---------- */
.tapes{position:relative;height:clamp(118px,13vw,176px);overflow:hidden;background:#000;margin-top:-1px}
.tape{position:absolute;left:-8vw;right:-8vw;top:50%;overflow:hidden;white-space:nowrap}
.tape-a{z-index:2;background:var(--wing);color:#08080a;transform:translateY(-50%) rotate(-2.4deg);box-shadow:0 14px 30px rgba(0,0,0,.75)}
.tape-b{z-index:1;background:var(--royal-deep);color:rgba(240,240,240,.92);transform:translateY(-50%) rotate(1.8deg)}
.tape::after{content:"";position:absolute;inset:0;background:url(assets/wall/paper.webp) center/520px auto;mix-blend-mode:multiply;opacity:.5;pointer-events:none}
.tape-track{display:flex;align-items:center;width:max-content;font-size:clamp(14px,1.45vw,21px);animation:tapeL 48s linear infinite}
.tape-track>*{flex:none;margin-right:24px}
.tape-track span{padding:12px 0 11px;font-weight:900;font-variation-settings:"wdth" 112;text-transform:uppercase;letter-spacing:.05em;line-height:1}
.tape-track i{font-style:normal;font-size:.9em;color:var(--royal)}
.tape-b .tape-track{animation-name:tapeR;animation-duration:64s}
.tape-b .tape-track i{color:var(--spark)}
@keyframes tapeL{to{transform:translateX(-50%)}}
@keyframes tapeR{from{transform:translateX(-50%)}to{transform:none}}
.tapes:hover .tape-track{animation-play-state:paused}

/* ---------- YOUR JOURNEY / POWER / CHOICES ---------- */
.yours{padding:var(--sp-8) 0}
.yours-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-7) var(--sp-5);align-items:start}
.yp{position:relative;display:block}
.yp:nth-child(2){margin-top:clamp(40px,7vw,120px)}
.yp:nth-child(3){margin-top:clamp(14px,2.6vw,40px)}
.yp-img{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--wall)}
.yp-img img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(.9) brightness(.9);transition:transform 1.2s var(--ease),filter .6s ease}
.yp-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.8) 100%);pointer-events:none}
.yp:hover .yp-img img{transform:scale(1.045);filter:contrast(1.08) saturate(1) brightness(.98)}
.yp .tag-h{position:relative;z-index:2;margin-top:calc(clamp(52px,5.8vw,96px) * -.58);padding-left:clamp(10px,1.2vw,18px)}
.yp .tag-w{font-size:clamp(52px,5.8vw,96px)}
.yp .tag-k{font-size:clamp(15px,1.4vw,21px)}
.yp .tag-h::before{opacity:.32}
.yp-line{margin-top:var(--sp-3);padding-left:clamp(10px,1.2vw,18px);max-width:32ch;font-size:15.5px;line-height:1.55;color:var(--bone)}
.yp-link{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);padding-left:clamp(10px,1.2vw,18px);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);transition:color .25s}
.yp-link svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.yp:hover .yp-link{color:var(--ice)}
.yp:hover .yp-link svg{transform:translateX(4px)}

/* ---------- WHAT IT STANDS FOR (letters are the real wordmark glyphs) ---------- */
.acro{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);counter-reset:ac;--lh:clamp(84px,9.6vw,150px)}
.acro li{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--sp-4);padding:var(--sp-6) 6px var(--sp-5);counter-increment:ac;transition:background .35s ease}
.acro li+li{border-left:1px solid var(--line-2)}
.acro li::before{content:counter(ac,decimal-leading-zero);position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--stone);transition:color .3s}
.acro .lt{display:block;height:var(--lh)}
.acro .lt img{height:100%;width:auto;max-width:none;transition:filter .4s ease,transform .5s var(--ease)}
.acro .wd{font-size:clamp(11px,.95vw,13.5px);font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:.1em;text-transform:uppercase;text-align:center;line-height:1.3;color:var(--wing);transition:color .3s}
.acro li:hover{background:linear-gradient(180deg,rgba(88,133,231,0),rgba(88,133,231,.09))}
.acro li:hover .lt img{filter:drop-shadow(0 0 16px rgba(88,133,231,.75));transform:translateY(-4px)}
.acro li:hover .wd{color:var(--ice)}
.acro li:hover::before{color:var(--spark)}
.js .acro.rv{opacity:1;transform:none}
.js .acro.rv li{opacity:0;transform:translateY(14px);transition:opacity .5s ease-out var(--d,0s),transform .6s var(--ease) var(--d,0s),background .35s ease}
.js .acro.rv.in li{opacity:1;transform:none}
.acro li:nth-child(2){--d:.06s}.acro li:nth-child(3){--d:.12s}.acro li:nth-child(4){--d:.18s}.acro li:nth-child(5){--d:.24s}.acro li:nth-child(6){--d:.3s}.acro li:nth-child(7){--d:.36s}

/* ---------- SCRIPTURE WALL ---------- */
.sw-sec{padding:var(--sp-8) 0}
.sw-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));row-gap:var(--sp-8)}
.sw{margin:0}
.sw-1{grid-column:1 / span 8}
.sw-2{grid-column:5 / span 8;text-align:right}
.sw blockquote p{font-family:var(--font-verse);font-style:italic;font-weight:500;font-size:clamp(44px,6.6vw,104px);line-height:.98;letter-spacing:-.012em;color:var(--wing)}
.sw figcaption{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);margin-top:var(--sp-5)}
.sw-2 figcaption{justify-content:flex-end}
.sw-cite{position:relative;isolation:isolate;padding:8px 16px;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.sw-cite::before{content:"";position:absolute;inset:-12px -22px;z-index:-1;background:var(--violet);-webkit-mask:url(assets/wall/spray-stroke.webp) center/100% 100% no-repeat;mask:url(assets/wall/spray-stroke.webp) center/100% 100% no-repeat}
.sw-on{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}

/* ---------- FOLLOW (mural) ---------- */
.follow{position:relative;background:#000}
.follow-img{position:relative;margin:0;height:clamp(540px,86vh,900px);overflow:hidden}
.follow-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.follow-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 58%,rgba(0,0,0,.84) 86%,#000 100%);pointer-events:none}
.follow-in{position:absolute;left:0;right:0;bottom:var(--sp-6);display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.follow-handle{margin-top:var(--sp-3);font-size:clamp(17px,1.7vw,24px);font-weight:800;font-variation-settings:"wdth" 108;letter-spacing:.03em;color:var(--wing)}
.follow-handle span{display:block;margin-top:6px;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.follow-btns{display:flex;gap:var(--sp-3);flex-wrap:wrap}

/* ---------- NEVER MISS A DROP (poster) ---------- */
.list{padding:var(--sp-7) 0}
.poster{max-width:780px;margin:0 auto}
.poster-sheet{position:relative;background:var(--paper) url(assets/wall/paper.webp) center/cover;color:#0b0b0c;padding:var(--sp-6) var(--sp-5) var(--sp-5);transform:rotate(var(--rot,-1deg));box-shadow:0 36px 70px -24px #000,0 6px 16px rgba(0,0,0,.6)}
.poster-sheet::before,.poster-sheet::after{width:22%}
.poster-k{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#3a3a40}
.poster-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--violet)}
.poster-h{margin-top:var(--sp-3);font-weight:900;font-variation-settings:"wdth" 118;text-transform:uppercase;font-size:clamp(46px,7.4vw,104px);line-height:.86;letter-spacing:-.02em;color:#0b0b0c}
.poster-h .tw{display:block;width:max-content;font-family:var(--font-tag);font-weight:400;text-transform:none;letter-spacing:0;font-size:1.02em;line-height:1;background:linear-gradient(100deg,#4464B2 0%,#584EB2 55%,#6B4FC9 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.04em .1em .44em .02em;margin-bottom:-.32em}
.poster-sub{margin-top:var(--sp-3);font-size:16px;line-height:1.55;color:#26262b}
.poster .dl-form{margin-top:var(--sp-5);max-width:none;border:2px solid #0b0b0c;background:rgba(255,255,255,.35)}
.poster .dl-form input{color:#0b0b0c;font-size:16px}
.poster .dl-form input::placeholder{color:#5f5f66}
.poster .dl-form .btn{background:#0b0b0c;color:var(--wing);border:0}
.poster .dl-form .btn:hover{background:var(--violet);color:#fff;transform:none}
.poster .dl-note{color:#46464c}
.poster .dl-done{color:#0b0b0c}

/* ---------- forms ---------- */
.dl-form{display:flex;border:1px solid var(--line);max-width:520px;transition:border-color .25s}
.dl-form:focus-within{border-color:var(--ice)}
.dl-form input{flex:1;min-width:0;background:transparent;border:0;color:var(--bone);font:400 15px var(--font-ui);padding:15px 18px}
.dl-form input::placeholder{color:var(--stone)}
.dl-form input:focus{outline:none}
.dl-form input:focus-visible{outline:2px solid var(--ice);outline-offset:-2px}
.poster .dl-form:focus-within{border-color:var(--violet)}
.poster .dl-form input:focus-visible{outline-color:var(--violet)}
.dl-form .btn{border:0;border-left:1px solid var(--line)}
.dl-note{margin-top:var(--sp-3);font-size:12px;color:var(--stone)}
/* toast: sized to its message, never squeezed into half the viewport */
.toast{width:max-content;max-width:calc(100vw - 32px);text-align:center}

/* ---------- page head (inner pages): one primitive for every inner page ---------- */
h1.tag-h{font-size:1.5em}
.page-head{position:relative;isolation:isolate;display:flex;align-items:flex-end;min-height:clamp(300px,34vw,430px);padding:var(--sp-8) 0 var(--sp-6)}
.page-head>.wrap{width:100%}
.page-head .wall-bg{opacity:.78}
.page-head .tag-h{width:fit-content;max-width:100%}
.ph-line{margin-top:var(--sp-3);max-width:56ch;font-size:clamp(15px,1.3vw,18px);line-height:1.6;color:var(--stone)}
.page-head .ph-line{margin-top:var(--sp-5)}

/* ---------- footer ---------- */
.foot{position:relative;overflow:hidden;border-top:1px solid var(--line-2);padding:var(--sp-7) 0 var(--sp-5);background:#000}
.foot-top{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr 1fr 1.15fr;gap:var(--sp-5);margin-bottom:var(--sp-6)}
.foot-mark{width:clamp(170px,15vw,230px);height:auto}
.foot-tag{margin-top:var(--sp-4);font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.foot h3{margin-bottom:var(--sp-3);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.foot-links{display:grid;gap:var(--sp-3);font-size:13.5px;letter-spacing:.04em}
.foot-links a{width:max-content;color:var(--bone);opacity:.82;transition:opacity .2s,color .2s}
.foot-links a:hover{opacity:1;color:var(--ice)}
.foot-mini .dl-form input{padding:12px 14px;font-size:14px}
.foot-mini .dl-form .btn{padding:12px 18px;font-size:11px}
.foot-mini .socials{margin-top:var(--sp-4)}
.foot-mini .socials a{width:40px;height:40px}
.foot-bot{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--line-2);padding-top:var(--sp-4);font-size:11.5px;letter-spacing:.08em;color:var(--stone)}
main:has(>.stage)+.foot{padding-top:var(--sp-5)}
.foot-ghost{position:absolute;left:50%;bottom:max(-7vw,-96px);transform:translateX(-50%);z-index:0;font-family:var(--font-mark);font-size:clamp(130px,23vw,330px);line-height:1;color:rgba(242,239,233,.035);white-space:nowrap;pointer-events:none;user-select:none}

/* ---------- reveals: armed by JS only; site.js failsafe forces .in ---------- */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .5s ease-out,transform .5s ease-out}
.js .rv.in{opacity:1;transform:none}
.js .paste.rv{transition:opacity .6s ease-out var(--d,0s),transform .6s ease-out var(--d,0s)}
.js .paste.rv:not(.in) .paste-sheet{transform:rotate(calc(var(--rot,0deg) + 4deg)) translateY(10px)}

/* ============================================================
   RESPONSIVE: end of file so overrides cascade after base rules
============================================================ */
@media (max-width:1024px){
  .wall-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall-grid .paste:nth-child(3n+2){margin-top:0;--d:0s}
  .wall-grid .paste:nth-child(3n){--d:0s}
  .wall-grid .paste:nth-child(2n){margin-top:var(--sp-5);--d:.09s}
  .acro{--lh:clamp(64px,9.4vw,98px)}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:820px){
  /* header + drawer (v1, unchanged) */
  .nav{display:grid;grid-template-columns:44px 1fr 44px;grid-auto-flow:dense;height:60px;gap:8px}
  .nav-links{display:none}
  .burger{display:flex;grid-column:1;grid-row:1;width:40px;height:40px;border-radius:50%;background:rgba(242,239,233,.1);border:0;align-items:center;justify-content:center}
  .burger span,.burger span::before,.burger span::after{content:"";display:block;width:16px;height:1.6px;background:var(--bone);position:relative;border-radius:2px}
  .burger span::before{position:absolute;top:-5px}.burger span::after{position:absolute;top:5px}
  .brand{grid-column:2;grid-row:1;justify-self:center;font-size:25px}
  .nav-r{grid-column:3;grid-row:1;justify-self:end;margin-left:0}
  .nav-r .socials{display:none}
  .drawer{display:block;position:fixed;inset:0 0 auto 0;z-index:1200;background:var(--ink);border-bottom:1px solid var(--line);padding:68px 22px 30px;transform:translateY(-103%);transition:transform .5s var(--ease);max-height:100dvh;overflow-y:auto;background-image:radial-gradient(rgba(232,176,35,.05) 1px,transparent 1.5px);background-size:22px 22px}
  .drawer.open{transform:none}
  .drawer-eb{font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--crown);padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid rgba(232,176,35,.28)}
  .drawer a.dn{display:flex;align-items:center;gap:14px;font-variation-settings:"wdth" 112;font-weight:700;font-size:26px;text-transform:uppercase;letter-spacing:.03em;padding:14px 0;border-bottom:1px solid var(--line-2)}
  .drawer a.dn i{font-style:normal;font-size:11px;font-weight:600;color:var(--crown);letter-spacing:.1em}
  .drawer a.dn::after{content:"";margin-left:auto;width:8px;height:8px;border-top:1.6px solid var(--stone);border-right:1.6px solid var(--stone);transform:rotate(45deg)}
  .drawer .btn{width:100%;margin-top:18px}
  .drawer-foot{margin-top:22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--stone);display:flex;justify-content:space-between;gap:14px}
  .drawer-x{position:absolute;top:12px;right:14px;width:42px;height:42px;background:rgba(242,239,233,.08);border:1px solid var(--line-2);color:var(--bone);font-size:20px}
  .scrim{display:block;position:fixed;inset:0;z-index:1100;background:rgba(11,11,12,.6);opacity:0;visibility:hidden;transition:.35s}
  .scrim.open{opacity:1;visibility:visible}
  .drawer-social{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
  .drawer-social a{display:flex;align-items:center;justify-content:center;gap:9px;height:46px;border:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
  .drawer-social svg{width:16px;height:16px;fill:currentColor}

  /* hero */
  .hero-w{min-height:calc(100svh - 60px)}
  .hw-inner{padding:26px 18px 34px}
  /* SP-01 short phones: bound the logo by height too, so tagline + both CTAs stay above the fold */
  .hw-logo{width:min(105vw,480px,calc((100svh - 318px) * 1.1503))}
  .hw-tag{flex-direction:column;gap:4px;margin-top:14px;font-size:clamp(24px,7.4vw,34px)}
  .t-bar{display:none}
  .hw-cta{width:100%;max-width:460px;gap:10px;margin-top:24px}
  .hw-cta .btn{flex:1 1 140px;padding:15px 12px;font-size:12px;letter-spacing:.12em}

  .tapes{height:118px}
  .sec-head{flex-direction:column;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-6)}
  .yours-grid{grid-template-columns:1fr;gap:var(--sp-7)}
  .yp{width:88%}
  /* PT-04: the caption measure was frozen at 32ch under a photo that grows to 671px, stranding "up." */
  .yp-line{max-width:46ch;text-wrap:pretty}
  .yp:nth-child(2){margin:0 0 0 auto}
  .yp:nth-child(3){margin-top:0}
  .acro{grid-template-columns:1fr;border-bottom:0;--lh:60px}
  .acro li{flex-direction:row;justify-content:flex-start;gap:var(--sp-4);padding:var(--sp-3) 4px var(--sp-3) 44px;border-bottom:1px solid var(--line-2)}
  .acro li+li{border-left:0}
  .acro li::before{top:50%;left:6px;transform:translateY(-50%)}
  .acro .lt{width:74px;display:flex;justify-content:center}
  .acro .wd{font-size:17px;text-align:left}
  .sw-1,.sw-2{grid-column:1 / -1}
  .sw-2{text-align:left}
  .sw-2 figcaption{justify-content:flex-start}
  .follow-img{height:auto;aspect-ratio:4/5}
  .follow-in{position:relative;bottom:auto;margin-top:-96px;padding-bottom:var(--sp-7);flex-direction:column;align-items:stretch}
  .follow-btns .btn{flex:1 1 140px}
  .page-head{min-height:0;padding:var(--sp-6) 0 var(--sp-5)}
}
@media (max-width:560px){
  .paste-sheet::before,.paste-sheet::after{top:-9px;height:20px}
  .pc-name{font-size:11px;letter-spacing:.06em}
  .pc-credit{font-size:9.5px;letter-spacing:.1em}
  .dl-form{flex-direction:column;border:0;gap:10px}
  .dl-form input{border:1px solid var(--line);padding:14px 16px;font-size:16px}
  .dl-form .btn{border:1px solid var(--bone);width:100%}
  .poster .dl-form{border:0;background:none}
  .poster .dl-form input{border:2px solid #0b0b0c;background:rgba(255,255,255,.35)}
  .poster .dl-form .btn{border:0}
  .foot-top{grid-template-columns:1fr}
  /* footer list: 16px stops iOS zoom-on-focus, and both controls clear 44px */
  .foot-mini .dl-form input{font-size:16px;padding:13px 14px}
  .foot-mini .dl-form .btn{padding:15px 18px}
}
@media (max-width:400px){
  /* page-head tag holds one line down to 360 */
  .page-head .tag-w{font-size:clamp(40px,12.4vw,48px)}
}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .acro.rv li{opacity:1;transform:none;transition:none}
  .js .paste.rv:not(.in) .paste-sheet{transform:rotate(var(--rot,0deg))}
  .js .tag-h.rv .tag-w{-webkit-mask:none;mask:none}
  .tape-track,.hw-glint,.hw-mono::before,.hw-wl img,.hw-wr img{animation:none!important}
  .paste-sheet,.yp-img img,.acro .lt img{transition:none}
}

/* ---------- consistency pass: numerals never in Sedgwick; white garments cut out, not multiplied ---------- */
.tag-n{font-weight:900;font-variation-settings:"wdth" 112;font-size:clamp(48px,6.4vw,100px);line-height:.9;letter-spacing:-.03em;background:var(--tag-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding:.04em .04em .06em 0}
.paste-sheet img.cut{mix-blend-mode:normal;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18)) drop-shadow(0 1px 2px rgba(0,0,0,.14))}

/* RI-04 bag hit area to 45px, appearance unchanged (v1 header block above stays untouched) */
.bag::after{content:"";position:absolute;inset:-7px}

/* SP-12 same treatment for the brand: tap the logo to go home was a 27px target */
.brand{position:relative}
.brand::after{content:"";position:absolute;inset:-9px -8px}

/* RI-02 landscape phones: bound the hero by height as well as width.
   MP-01: modern phones are 844-932 wide in landscape, so gate on height + orientation, not width. */
@media (max-height:520px) and (orientation:landscape){
  .hw-logo{width:min(34vw,230px)}
  .hw-tag{flex-direction:row;gap:.16em .42em;margin-top:8px;font-size:clamp(13px,1.9vw,17px)}
  .t-bar{display:block;width:2px}
  .hw-inner{padding:10px 18px 14px}
  .hw-cta{width:auto;max-width:none;margin-top:10px;gap:8px}
  .hw-cta .btn{flex:0 0 auto;padding:10px 14px;font-size:10.5px}
}

/* BV-03 white garments need a ground and a shadow on the small chips too */
.g-thumb.is-cut{background:var(--paper)}
.g-thumb img.cut{filter:drop-shadow(0 3px 5px rgba(0,0,0,.3))}

/* SP-02 short phones: the six nav rows fill a 568px drawer and push the drop CTA and
   both socials below the fold. Reclaim vertical space only (no restyle of the frozen
   v1 drawer: type, colour, borders and layout are untouched). */
@media (max-width:820px) and (max-height:680px){
  .drawer{padding-top:56px;padding-bottom:8px}
  .drawer a.dn{padding:5px 0}
  .drawer .btn{margin-top:12px;padding-top:13px;padding-bottom:13px}
  .drawer-social{margin-top:10px}
  .drawer-social a{height:42px}
  .drawer-foot{margin-top:10px}
}

/* ---------- touch targets: same treatment the bag already gets, type and colour untouched ---------- */
@media (max-width:1024px),(hover:none){
  /* SP-09 / PT-11 footer nav was a 22px text strip on a 32px pitch */
  .foot-links{gap:0}
  .foot-links a{display:flex;align-items:center;min-height:44px;padding-right:10px}
  /* SP-10 the secondary CTA was 26px tall; the box grows, the rule stays 5px under the label */
  .tlink{border-bottom:0;padding-top:12px;padding-bottom:12px;min-height:44px}
  .tlink::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;background:var(--line);transition:background .25s}
  .tlink:hover::after,.tlink:focus-visible::after{background:var(--ice)}
}

/* wrap polish: stop single words dropping to their own line on phones */
p,.ph-line,.pdp-desc,.poster-sub,.spec-s,.pw-line,.yp-line,.dl-note,.faq-a p,.sw-on{text-wrap:pretty}

/* header brand: the real CHOICES wordmark from the logo file, not typeset */
.brand{display:inline-flex;align-items:center;padding-top:0}
.brand img{display:block;height:30px;width:auto;max-width:none}
@media (max-width:820px){.brand img{height:26px}}
@media (max-width:360px){.brand img{height:23px}}

/* A2 phone hero: bigger lockup, tighter type, balanced buttons (client pick 2026-09-19) */
@media (max-width:820px){
  .hw-inner{padding:14px 16px 24px}
  .hw-tag{margin-top:2px;gap:0;font-size:clamp(21px,6.1vw,28px);line-height:1.04}
  .hw-tag .tw{font-size:1.34em}
  .hw-cta{width:100%;max-width:none;gap:10px;margin-top:20px}
  .hw-cta .btn{flex:1 1 0;padding:16px 8px;font-size:11.5px;letter-spacing:.09em}
  .hw-mist{top:42%;width:min(98vmin,920px);background:radial-gradient(closest-side,rgba(88,133,231,.32),rgba(88,78,178,.14) 44%,rgba(0,0,0,0))}
}