/* Seventh Avenue Media · Direction D: "Avenue Renovation"
   C's dusk street is the world; A's inspection, strip-out and quote slip happen on it. */

:root{
  --night:#1c0b19;
  --plum:#2a0f24;
  --plum-2:#3d1532;
  --dusk:#8c2f4b;
  --ember:#ec6a3c;
  --sodium:#ffb547;
  --sodium-2:#ffc86f;
  --cream:#f8e9cf;
  --cream-dim:#e7d3b4;
  --bottle:#17402f;
  --bottle-2:#24624a;
  --brick:#6d2c24;
  --asphalt:#140d11;
  --ink:#24101d;

  --f-display:"Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-sign:"Bungee", "Arial Black", sans-serif;
  --f-slab:"Alfa Slab One", Georgia, serif;
  --f-body:"Familjen Grotesk", system-ui, sans-serif;

  --header-h:76px;
  --pave:clamp(170px, 24svh, 232px);
  --pad:clamp(20px, 5vw, 72px);
  --sec:clamp(80px, 11vw, 160px);
}
@media (max-width: 899px){ :root{ --header-h:62px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--night); color:var(--cream);
  font:400 17px/1.55 var(--f-body);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,video,svg{ display:block; max-width:100%; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:inherit; }
p{ margin:0; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }

.sr-only{ 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:fixed; left:12px; top:-80px; z-index:200; background:var(--sodium); color:var(--ink); padding:12px 18px; font-weight:700; border-radius:4px; text-decoration:none; }
.skip:focus{ top:12px; }

:focus-visible{ outline:3px solid var(--sodium); outline-offset:3px; border-radius:2px; }

/* ---------- Buttons: enamel plates, not pills ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:54px; padding:14px 26px;
  background:var(--sodium); color:var(--ink);
  font:700 18px/1 var(--f-body); letter-spacing:.01em; text-decoration:none;
  border:0; border-radius:3px; cursor:pointer;
  box-shadow:0 4px 0 #9a5414, inset 0 0 0 2px rgba(36,16,29,.12), inset 0 0 0 5px var(--sodium), inset 0 0 0 6px rgba(36,16,29,.28);
  transition:transform .12s ease, box-shadow .12s ease, background-color .2s;
}
.btn:hover{ background:var(--sodium-2); box-shadow:0 4px 0 #9a5414, inset 0 0 0 2px rgba(36,16,29,.12), inset 0 0 0 5px var(--sodium-2), inset 0 0 0 6px rgba(36,16,29,.28); }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #9a5414, inset 0 0 0 6px rgba(36,16,29,.2); }
.btn-sm{ min-height:46px; padding:10px 18px; font-size:16px; }

/* ---------- Header ---------- */
.top{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--header-h);
  display:flex; align-items:center; gap:clamp(12px, 2vw, 32px);
  padding:0 var(--pad);
  background:linear-gradient(180deg, rgba(28,11,25,.72), rgba(28,11,25,0));
  transition:background-color .3s, box-shadow .3s;
}
.top.scrolled{ background:#1f0c1c; box-shadow:0 1px 0 rgba(255,181,71,.25); }
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; min-height:44px; }
.brand-plate{
  display:inline-flex; align-items:center; padding:7px 12px 6px;
  background:var(--bottle-2); color:#fff; border-radius:5px;
  box-shadow:inset 0 0 0 2px var(--bottle-2), inset 0 0 0 4px #f4efe2, 0 2px 0 rgba(0,0,0,.35);
  font:400 15px/1 var(--f-sign); letter-spacing:.02em; white-space:nowrap;
}
.brand-media{ font:800 19px/1 var(--f-display); text-transform:uppercase; letter-spacing:.08em; color:var(--cream); }
.nav{ display:flex; gap:clamp(14px, 1.8vw, 28px); margin-left:auto; }
.nav a{ text-decoration:none; font-weight:600; font-size:16px; padding:10px 2px; background:linear-gradient(var(--sodium),var(--sodium)) 0 100%/0 2px no-repeat; transition:background-size .25s; }
.nav a:hover{ background-size:100% 2px; }
.top-call{ font-weight:700; text-decoration:none; white-space:nowrap; padding:10px 0; }
.geo-switch{ font-size:14px; color:var(--cream-dim); }
.geo-switch a{ color:var(--sodium); text-underline-offset:3px; }
.geo-switch-top{ position:absolute; right:var(--pad); top:calc(100% + 4px); font-size:13px; transition:opacity .3s; }
.top.scrolled .geo-switch-top{ opacity:0; pointer-events:none; }
@media (max-width: 1099px){ .nav{ display:none; } .top-call{ margin-left:auto; } }
@media (max-width: 899px){
  .top-call{ display:none; }
  .top .btn-sm{ margin-left:auto; min-height:44px; padding:8px 14px; font-size:15px; }
  .brand-plate{ font-size:13px; padding:6px 10px 5px; }
  .brand-media{ font-size:16px; }
  .geo-switch-top{ left:var(--pad); right:auto; font-size:12.5px; }
}
@media (max-width: 360px){ .brand-media{ display:none; } }
.sm-only{ display:none; }
@media (max-width: 899px){ .lg-only{ display:none; } .sm-only{ display:inline; } }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:max(640px, 100svh); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate; }
.hero-film{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-video{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; transform-origin:50% 70%; }
.geo-za .hero-video{ object-position:62% 55%; }
.hero-shade{ position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(28,11,25,.78) 0%, rgba(28,11,25,.35) 45%, rgba(28,11,25,0) 70%),
    linear-gradient(180deg, rgba(28,11,25,.4) 0%, rgba(28,11,25,0) 26%, rgba(28,11,25,.15) 58%, rgba(28,11,25,.95) 100%);
}
.hero-copy{ width:100%; padding:calc(var(--header-h) + 60px) var(--pad) clamp(96px, 13vh, 150px); max-width:1240px; }
.hero h1{ font-family:var(--f-display); text-transform:uppercase; line-height:.86; letter-spacing:-.005em; }
.h1-a{ display:block; font-weight:900; font-size:clamp(50px, 8.2vw, 132px); color:var(--cream); max-width:10.5em; text-wrap:balance; text-shadow:0 2px 30px rgba(28,11,25,.45); }
.h1-b{ display:block; margin-top:.18em; font-weight:800; font-size:clamp(46px, 7.4vw, 118px); }
.neon{
  color:#fff0f6;
  text-shadow:0 0 2px #fff, 0 0 8px #ff8cba, 0 0 22px #ff3f86, 0 0 46px rgba(255,63,134,.65);
  animation:neon-on 2.4s steps(1) .5s both;
}
@keyframes neon-on{
  0%{ color:#6e4a5c; text-shadow:none; }
  12%{ color:#fff0f6; text-shadow:0 0 2px #fff, 0 0 8px #ff8cba, 0 0 22px #ff3f86, 0 0 46px rgba(255,63,134,.65); }
  16%{ color:#6e4a5c; text-shadow:none; }
  26%{ color:#fff0f6; text-shadow:0 0 2px #fff, 0 0 8px #ff8cba, 0 0 22px #ff3f86; }
  30%{ color:#6e4a5c; text-shadow:none; }
  44%,100%{ color:#fff0f6; text-shadow:0 0 2px #fff, 0 0 8px #ff8cba, 0 0 22px #ff3f86, 0 0 46px rgba(255,63,134,.65); }
}
.hero-sub{ max-width:40em; margin-top:28px; font-size:clamp(17px, 1.35vw, 20px); color:#f3e2c8; text-shadow:0 1px 14px rgba(28,11,25,.8); }
.hero-act{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:32px; }
.hero-call{ font-weight:600; text-underline-offset:4px; text-decoration-color:rgba(255,181,71,.7); padding:10px 0; }
.walk-cue{
  position:absolute; right:var(--pad); bottom:clamp(30px, 5vh, 56px);
  display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 18px 10px 20px;
  background:var(--bottle-2); color:#fff; text-decoration:none;
  font:400 15px/1 var(--f-sign); text-transform:uppercase;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  padding-right:34px; box-shadow:inset 0 0 0 3px #f4efe2;
}
.walk-cue svg{ width:34px; height:14px; }
@media (max-width: 899px){
  .hero-copy{ padding-bottom:120px; }
  .walk-cue{ left:var(--pad); right:auto; bottom:36px; }
  .hero-shade{ background:linear-gradient(180deg, rgba(28,11,25,.55) 0%, rgba(28,11,25,.05) 22%, rgba(28,11,25,.5) 48%, rgba(28,11,25,.96) 78%); }
}

/* =========================================================
   THE AVENUE
   Default = static (no JS / reduced motion). html.walk = horizontal walk.
   ========================================================= */
.avenue{ position:relative; isolation:isolate; background:var(--plum); }
.av-pin{ position:relative; }
.av-sky{ position:absolute; inset:0; z-index:-3; overflow:hidden;
  background:linear-gradient(180deg, #250c26 0%, #4f1a3c 26%, #93334c 50%, #e06a40 70%, #ffae5c 84%, #ffcf86 100%);
}
.geo-za .av-sky{ background:linear-gradient(180deg, #2a0c2c 0%, #5a1c46 26%, #a03a5a 50%, #e2705a 70%, #ffab7a 84%, #ffd0a0 100%); }
.sky-night{ position:absolute; inset:0; background:linear-gradient(180deg, #12060f 0%, #2a0d26 55%, rgba(60,18,44,.0) 100%); opacity:0; }
.sun{ position:absolute; left:58%; bottom:calc(var(--pave) + 8svh); width:clamp(120px, 14vw, 220px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, #fff2c8 0 38%, #ffd27a 52%, rgba(255,170,80,.0) 71%); opacity:.9; }
.stars{ position:absolute; inset:0 0 40% 0; opacity:0;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 8%, #ffe9d0 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 44% 22%, #fff 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 63% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 26%, #ffeccc 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 90% 9%, #fff 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 6% 34%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 53% 36%, #fff 50%, transparent 51%);
}
.av-far{ display:none; }
.av-near{ display:none; }

/* static layout */
.av-track{ position:relative; display:grid; gap:clamp(56px, 7vw, 96px) clamp(28px, 4vw, 56px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 500px), 1fr));
  padding:calc(var(--sec) * .8) var(--pad) var(--sec); max-width:1320px; margin:0 auto; }
.av-intro, .av-outro{ grid-column:1 / -1; }
.lamp{ display:none; }

.av-intro{ display:flex; gap:clamp(20px, 3vw, 48px); align-items:flex-end; }
.street-sign{ flex:none; display:flex; flex-direction:column; align-items:center; }
.ss-plate{ display:flex; flex-direction:column; align-items:center; padding:12px 18px 10px; background:var(--bottle-2); color:#fff; border-radius:7px;
  box-shadow:inset 0 0 0 3px var(--bottle-2), inset 0 0 0 6px #f4efe2, 0 6px 18px rgba(0,0,0,.35);
  font:400 clamp(20px, 2vw, 30px)/1.02 var(--f-sign); text-transform:uppercase; }
.ss-plate span+span{ font-size:.62em; letter-spacing:.14em; margin-top:4px; }
.ss-pole{ width:12px; height:clamp(120px, 22svh, 260px); background:linear-gradient(90deg, #2b2a2c, #6c6a6a 45%, #222 100%); }
.av-intro-copy{ max-width:560px; padding-bottom:14px; }
.av-intro h2{ font:900 clamp(44px, 5.2vw, 84px)/.9 var(--f-display); text-transform:uppercase; color:var(--cream); text-wrap:balance; }
.av-intro-copy p{ margin-top:18px; font-size:clamp(17px, 1.3vw, 19px); color:#f3dfc2; }
.av-intro-loss{ font-weight:600; color:#fff!important; }
.av-intro-hint{ font-weight:700; color:var(--sodium)!important; }
.hint-walk{ display:none; }
.walk .hint-walk{ display:inline; } .walk .hint-still{ display:none; }

.av-outro{ max-width:620px; }
html:not(.walk) .outro-big, html:not(.walk) .av-outro p+p{ color:var(--ink); }
html:not(.walk) .av-outro p+p{ font-weight:600; }
.outro-big{ font:900 clamp(40px, 4.8vw, 76px)/.9 var(--f-display); text-transform:uppercase; color:var(--cream); }
.av-outro p+p{ margin-top:16px; font-size:18px; color:#f3dfc2; }
.arrow-sign{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; min-height:50px; padding:10px 22px; background:var(--ember); color:#1d0a14; text-decoration:none; font:400 15px/1 var(--f-sign); text-transform:uppercase; border-radius:4px; box-shadow:inset 0 0 0 3px #1d0a14; }
.arrow-sign svg{ width:20px; height:20px; }

/* ---------- Shop (shared) ---------- */
.shop{ position:relative; container-type:inline-size; --wall:#3a4b55; --trim:#e8dcc2; --aw1:#c7472f; --aw2:#efe0c0; --gable:none; --fh:13cqw; --ah:7cqw; --rh:6cqw; }
.bldg{ position:relative; display:flex; flex-direction:column; background-color:var(--wall);
  background-image:linear-gradient(180deg, rgba(255,150,90,.16) 0%, rgba(255,150,90,0) 38%, rgba(18,6,16,.38) 100%), var(--tex, none);
  box-shadow:inset 10px 0 0 rgba(0,0,0,.12), inset -10px 0 0 rgba(255,255,255,.04), 0 -2px 0 rgba(0,0,0,.25);
  border-top:2.4cqw solid color-mix(in srgb, var(--wall) 70%, #000);
}
.bldg::before{ content:""; position:absolute; bottom:calc(100% + 2.4cqw); left:var(--gl, 22%); right:var(--gr, 22%); height:var(--gh, 0); background:color-mix(in srgb, var(--wall) 82%, #000); clip-path:var(--gable); border-radius:var(--gradius, 0); }
.upper{ flex:1 1 auto; min-height:24cqw; display:flex; justify-content:space-evenly; align-items:center; padding:3cqw 6cqw; overflow:hidden; }
.uw{ width:14cqw; height:18cqw; max-height:100%; flex:none; border:1.6cqw solid var(--trim); background:linear-gradient(160deg, #1e1a2a, #0d0a12); box-shadow:inset 0 0 0 .6cqw rgba(0,0,0,.4); position:relative; }
.uw::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1cqw; background:var(--trim); }
.uw.lit{ background:radial-gradient(ellipse at 50% 70%, #ffdc9a, #f39c4a 65%, #b95a2a); box-shadow:0 0 6cqw rgba(255,170,80,.35); }
.fascia{ flex:none; height:var(--fh); margin:0 3.5cqw; display:grid; place-items:center; position:relative; z-index:2; }
.fascia span{ display:grid; place-items:center; width:100%; height:100%; text-align:center; white-space:nowrap; padding:0 3cqw; }

/* sign styles */
.sign-enamel span{ background:#1d4c86; color:#fff; font:400 5.4cqw/1 var(--f-sign); border-radius:1.4cqw;
  box-shadow:inset 0 0 0 .7cqw #1d4c86, inset 0 0 0 1.3cqw #f6f1e6, 0 1cqw 1.6cqw rgba(0,0,0,.35);
  background-image:radial-gradient(circle at 3.2cqw 50%, #c9c3b6 .55cqw, transparent .65cqw), radial-gradient(circle at calc(100% - 3.2cqw) 50%, #c9c3b6 .55cqw, transparent .65cqw);
  text-transform:uppercase; padding:0 6cqw; }
.sign-enamel-amber span{ background-color:var(--sodium); color:#1b0e15; box-shadow:inset 0 0 0 .7cqw var(--sodium), inset 0 0 0 1.3cqw #1b0e15, 0 1cqw 1.6cqw rgba(0,0,0,.35); }
.sign-gilt span{ background:#0f0c0d; box-shadow:inset 0 0 0 .5cqw #3a2b1c, 0 1cqw 1.6cqw rgba(0,0,0,.4); }
.sign-gilt span{ font:400 5.1cqw/1 var(--f-slab); letter-spacing:.01em; color:#e9c46a;
  background-image:linear-gradient(180deg, #fff1b8 0%, #e9c15d 40%, #a8742a 62%, #f3d27a 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(.25cqw .3cqw 0 #3b1f0c); }
.sign-gilt{ background:#0f0c0d; box-shadow:inset 0 0 0 .5cqw #3a2b1c, 0 1cqw 1.6cqw rgba(0,0,0,.4); }
.sign-painted span{ background:#2a0d14; color:#f1dfbf; font:400 5.6cqw/1 var(--f-slab); text-shadow:.35cqw .35cqw 0 #8c5a2c; box-shadow:inset 0 0 0 .6cqw #b78b52; }
.sign-shade span{ color:#f6d33c; font:400 7.6cqw/1 "Bungee Shade", var(--f-sign); text-transform:uppercase;
  background:repeating-linear-gradient(90deg, #6f7479 0 1.6cqw, #4d5156 1.6cqw 3.2cqw); box-shadow:inset 0 -1cqw 0 rgba(0,0,0,.3); }
.sign-wood span{ color:#f4e6c6; font:900 7.4cqw/1 var(--f-display); text-transform:uppercase; letter-spacing:.06em; text-shadow:0 -.3cqw 0 rgba(0,0,0,.55);
  background:repeating-linear-gradient(180deg, #6b4524 0 3.6cqw, #5a391d 3.6cqw 3.9cqw), #6b4524; border-radius:.8cqw; box-shadow:0 1cqw 1.6cqw rgba(0,0,0,.35); }
.sign-neon span{ background:#120c12; border-radius:1cqw; box-shadow:inset 0 0 0 .4cqw #2d2229; font:800 8.4cqw/1 var(--f-display); text-transform:uppercase; letter-spacing:.08em;
  color:#5d5560; transition:color .2s, text-shadow .2s; }
.awning{ flex:none; height:var(--ah); margin:0 1.5cqw; position:relative; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0) 40%, rgba(255,255,255,.08)), repeating-linear-gradient(90deg, var(--aw1) 0 4.5cqw, var(--aw2) 4.5cqw 9cqw);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 2cqw) no-repeat, radial-gradient(circle 2.25cqw at 50% 0, #000 98%, transparent) bottom/4.5cqw 2cqw repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 2cqw) no-repeat, radial-gradient(circle 2.25cqw at 50% 0, #000 98%, transparent) bottom/4.5cqw 2cqw repeat-x;
  filter:drop-shadow(0 1.4cqw 1cqw rgba(0,0,0,.4));
}
.front{ flex:none; display:flex; gap:3cqw; padding:2.5cqw 5cqw 0; position:relative; align-items:stretch; }
.win{ position:relative; flex:1 1 auto; aspect-ratio:16/10; border:2cqw solid var(--trim); background:#0b0709; container-type:inline-size; overflow:hidden;
  box-shadow:inset 0 0 0 .5cqw rgba(0,0,0,.35), 0 0 0 .6cqw color-mix(in srgb, var(--trim) 60%, #000); }
.door{ flex:none; width:19cqw; background:color-mix(in srgb, var(--trim) 55%, #1a0e14); position:relative; margin-bottom:calc(-1 * var(--rh));
  box-shadow:inset 0 0 0 1.4cqw color-mix(in srgb, var(--trim) 80%, #000), inset 0 0 0 1.8cqw rgba(0,0,0,.3); }
.door::before{ content:""; position:absolute; left:3cqw; right:3cqw; top:3cqw; height:38%; background:linear-gradient(160deg, #3a2a35, #140c12); box-shadow:inset 0 0 0 .6cqw rgba(0,0,0,.4); transition:background .6s; }
.knob{ position:absolute; right:3cqw; top:60%; width:2.2cqw; height:2.2cqw; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ffe7a6, #a87a2a); }
.door-roll{ background:repeating-linear-gradient(180deg, #7b8087 0 2.2cqw, #5a5e64 2.2cqw 2.6cqw); box-shadow:inset 0 0 0 1cqw #3b3e43; }
.door-roll::before{ display:none; }
.riser{ flex:none; height:var(--rh); margin:0 5cqw 0; width:calc(100% - 10cqw - 22cqw); background:linear-gradient(180deg, color-mix(in srgb, var(--trim) 70%, #000), color-mix(in srgb, var(--trim) 40%, #000)); box-shadow:inset 0 .6cqw 0 rgba(255,255,255,.12); }
.s-kova .riser, .s-elec .riser{ width:calc(100% - 10cqw); }

/* screens inside the window (sized by the window: cqw = % of window width) */
.screen{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.screen-new{ z-index:1; clip-path:inset(0 0 100% 0); transition:clip-path 1.25s cubic-bezier(.75,0,.2,1) .35s; }
.glass{ position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.13) 0 14%, rgba(255,255,255,0) 14% 36%, rgba(255,255,255,.06) 36% 41%, rgba(255,255,255,0) 41%),
             linear-gradient(180deg, rgba(255,160,90,.10), rgba(0,0,0,0) 40%); }
.win::after{ content:""; position:absolute; inset:0; z-index:3; background:rgba(14,5,13,.6); transition:opacity .5s; pointer-events:none; }
.pool{ position:absolute; z-index:-1; left:0; right:0; top:100%; height:calc(var(--pave) * .75); opacity:0; transition:opacity .8s .3s;
  background:radial-gradient(ellipse 60% 70% at 45% 0%, rgba(255,186,110,.5), rgba(255,140,70,.14) 55%, transparent 75%); pointer-events:none; }

/* LIT state: .is-lit (walk mode), or always in static mode */
.shop.is-lit .win::after, html:not(.walk) .shop .win::after{ opacity:0; }
.shop.is-lit .screen-new, html:not(.walk) .shop .screen-new{ clip-path:inset(0); }
.shop.is-lit .pool{ opacity:1; }
.shop.is-lit .door::before, html:not(.walk) .shop .door::before{ background:radial-gradient(ellipse at 50% 80%, #ffd894, #e88a3e 70%); }
.shop.is-lit .sign-neon span, html:not(.walk) .sign-neon span{ color:#e9fbff; text-shadow:0 0 1px #fff, 0 0 1.4cqw #6fdcff, 0 0 3.6cqw #1fb2ff, 0 0 7cqw rgba(31,178,255,.55); }
.shop.is-lit .sign-neon-warm span, html:not(.walk) .sign-neon-warm span{ color:#fff1d8; text-shadow:0 0 1px #fff, 0 0 1.4cqw #ffc36f, 0 0 3.6cqw #ff8a2a, 0 0 7cqw rgba(255,138,42,.55); }
.shop.relighting .win{ animation:flick .8s steps(1) both; }
.shop.relighting .sign-neon span{ animation:flick-sign .8s steps(1) both; }
@keyframes flick{ 0%{filter:brightness(1.6)} 12%{filter:brightness(.5)} 24%{filter:brightness(1.4)} 34%{filter:brightness(.7)} 50%,100%{filter:none} }
@keyframes flick-sign{ 0%,20%,44%{opacity:.35} 10%,30%,100%{opacity:1} }

/* ---------- A-frame chalk board ---------- */
.board{ position:relative; margin-top:18px; padding:16px 18px 18px; background:#1d2321; color:#eef0e6;
  border:7px solid #6b4a2b; border-radius:3px; box-shadow:0 10px 22px rgba(0,0,0,.4), inset 0 0 30px rgba(255,255,255,.04);
  background-image:radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 60%); display:grid; }
.board::before, .board::after{ content:""; position:absolute; bottom:-22px; width:7px; height:22px; background:#5a3d22; }
.board::before{ left:12%; transform:skewX(12deg); } .board::after{ right:12%; transform:skewX(-12deg); }
.b-tag{ font-size:13px; font-weight:700; color:var(--sodium); letter-spacing:.02em; }
.board h3{ margin-top:4px; font:800 25px/1 var(--f-display); text-transform:uppercase; letter-spacing:.02em; color:#fff; }
.b-old, .b-new{ margin-top:8px; font-size:15px; line-height:1.42; }
.b-old{ color:#d7d9cf; }
.b-new{ color:#fff; }
.b-new a{ color:var(--sodium); font-weight:700; text-underline-offset:3px; }
.board-real{ background-color:#122a20; border-color:#a07a3c; }

/* static (no walk): show the old screen as a small "before" inset */
html:not(.walk) .shop .screen-old{ z-index:5; transform:translate(5%, -6%) scale(.38); transform-origin:0 100%; box-shadow:0 0 0 6px #fff, 0 20px 40px rgba(0,0,0,.6); }
html:not(.walk) .shop .win:has(.screen-old)::before{ content:"Before"; position:absolute; z-index:6; left:calc(5% - 2px); bottom:calc(6% + 38% + 2px); background:#fff; color:#111; font:700 11px/1 var(--f-body); padding:4px 6px; }
html:not(.walk) .b-old::before{ content:"Before: "; font-weight:700; }
html:not(.walk) .b-new:not(.b-always)::before{ content:"Now: "; font-weight:700; color:var(--sodium); }
html:not(.walk) .shop{ padding-bottom:0; }
html:not(.walk) .s-plumb .bldg, html:not(.walk) .s-elec .bldg{ margin-top:0; }
html:not(.walk) .bldg::before{ display:none; }

/* ---------- Per-shop looks ---------- */
.s-plumb{ --wall:#2c5260; --trim:#efe2c6; --aw1:#1d4c86; --aw2:#efe2c6; --h:.86; --gh:7cqw; --gable:polygon(0 100%, 0 45%, 18% 45%, 18% 0, 82% 0, 82% 45%, 100% 45%, 100% 100%); }
.s-ed{ --wall:#6b2c25; --trim:#151012; --aw1:#151012; --aw2:#2c2224; --ah:0px; --h:.96;
  --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.28' stroke-width='1.4'%3E%3Cpath d='M0 .7h48M0 12.7h48M12 .7v12M36 12.7v12'/%3E%3C/g%3E%3C/svg%3E"); }
.s-ed .awning{ display:none; }
.s-elec{ --wall:#36333d; --trim:#1d1b22; --ah:0px; --h:.8; }
.s-elec .awning{ display:none; }
.s-babalon{ --wall:#74283a; --trim:#d9b57c; --aw1:#2a0d14; --aw2:#d9b57c; --h:.92; --gh:8cqw; --gable:polygon(0 100%, 50% 0, 100% 100%); --gl:24%; --gr:24%; }
.s-mech{ --wall:#4f544e; --trim:#b33b27; --aw1:#b33b27; --aw2:#e8dcc4; --ah:0px; --h:.74;
  --tex:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2cqw, rgba(0,0,0,.12) 2cqw 4cqw); }
.s-mech .awning{ display:none; }
.s-pigeon{ --wall:#9b6f37; --trim:#1d3a2e; --aw1:#1d3a2e; --aw2:#e6d2a8; --h:.88; --gh:6cqw; --gable:polygon(0 100%, 10% 0, 90% 0, 100% 100%); --gl:14%; --gr:14%; }
.s-land{ --wall:#3f5a3b; --trim:#eadcb8; --aw1:#2f4a2c; --aw2:#eadcb8; --h:.82; }
.s-kova{ --wall:#263739; --trim:#f0b13a; --ah:0px; --h:.94; --gh:8cqw; --gable:polygon(0 100%, 0 0, 100% 0, 100% 100%); --gl:8%; --gr:58%; }
.s-kova .awning{ display:none; }

/* South Africa: Victorian cast-iron verandas instead of canvas awnings, curved gables */
.geo-za .awning{ --ah:8cqw; display:block; height:8cqw;
  background:
    radial-gradient(circle at 50% 100%, transparent 1.3cqw, #e9e1cf 1.4cqw 1.9cqw, transparent 2cqw) 0 100%/4cqw 3.2cqw repeat-x,
    repeating-linear-gradient(90deg, #e9e1cf 0 .45cqw, transparent .45cqw 2cqw) 0 100%/100% 3.2cqw no-repeat,
    linear-gradient(180deg, #9aa0a4, #6b7176) 0 0/100% 4.6cqw no-repeat;
  background-repeat:repeat-x, no-repeat, no-repeat;
  -webkit-mask:none; mask:none; margin:0 -1.5cqw; }
.geo-za .front::before, .geo-za .front::after{ content:""; position:absolute; z-index:5; top:-1cqw; bottom:calc(-1 * var(--rh) - 1px); width:1.5cqw; background:linear-gradient(90deg, #cfc6b3, #f2ecdf 50%, #b9af9b); }
.geo-za .front::before{ left:.5cqw; } .geo-za .front::after{ right:.5cqw; }
.geo-za .s-plumb{ --gh:9cqw; --gable:polygon(0 100%, 0 60%, 12% 60%, 50% 0, 88% 60%, 100% 60%, 100% 100%); --gl:26%; --gr:26%; }
.geo-za .s-pigeon{ --gh:8cqw; --gable:polygon(0 100%, 50% 0, 100% 100%); --gl:20%; --gr:20%; }

/* ---------- Mock websites (CSS, illustrative only). Units: cqw of the window ---------- */
.screen > *{ font-size:3cqw; }
.o-chrome{ height:7cqw; display:flex; align-items:center; gap:2cqw; padding:0 2.5cqw; background:#dcdcdc; border-bottom:.4cqw solid #999; color:#444; font:3cqw/1 Arial, sans-serif; }
.o-chrome b{ color:#c21d1d; font-weight:700; }
.o-plumb{ height:calc(100% - 7cqw); background:#c0c0c0; font-family:"Times New Roman", Times, serif; color:#000; }
.op-head{ background:linear-gradient(180deg, #2a46c8, #0b1e78); color:#ff0; font:700 5.4cqw/1 "Times New Roman", serif; padding:2.4cqw 3cqw; text-shadow:.4cqw .4cqw 0 #000; }
.op-cols{ display:grid; grid-template-columns:24cqw 1fr; gap:2.5cqw; padding:2.5cqw; }
.op-cols ul{ background:#0b1e78; padding:2cqw; }
.op-cols li{ color:#9fc2ff; text-decoration:underline; font-size:3cqw; line-height:1.6; }
.op-cols p{ font-size:3.1cqw; line-height:1.25; }
.op-img{ display:inline-block; margin:2cqw 0; padding:2cqw 3cqw; background:#d01b1b; color:#fff; font:900 3.6cqw/1 Impact, "Arial Black", sans-serif; transform:rotate(-3deg); box-shadow:.6cqw .6cqw 0 #000; border:.5cqw outset #ff7b7b; }
.op-small{ font-size:2.3cqw!important; color:#333; }
.o-elec{ height:calc(100% - 7cqw); background:#000; color:#7cff4f; font:3.2cqw/1.3 "Courier New", monospace; padding:5cqw; display:flex; flex-direction:column; gap:3cqw; align-items:flex-start; }
.oe-bar{ display:block; width:70%; height:3cqw; border:.4cqw solid #7cff4f; } .oe-bar i{ display:block; width:37%; height:100%; background:#7cff4f; }
.oe-plugin{ width:80%; padding:4cqw; background:#3a3a3a; color:#cfcfcf; font:2.8cqw/1.3 Arial, sans-serif; border:.4cqw dashed #777; }
.oe-skip{ color:#ff4fd8; text-decoration:underline; }
.o-mech{ height:calc(100% - 7cqw); background:#fff; color:#111; font:3cqw/1.3 "Times New Roman", serif; padding:0 0 3cqw; }
.om-stripe{ background:repeating-linear-gradient(-45deg, #ffd400 0 3cqw, #111 3cqw 6cqw); color:#fff; font:900 5.6cqw/1 Impact, "Arial Black", sans-serif; text-align:center; padding:3cqw 0; text-shadow:0 0 .8cqw #000, .4cqw .4cqw 0 #000; letter-spacing:.06em; margin-bottom:3cqw; }
.o-mech p{ padding:0 4cqw; margin-top:1.6cqw; }
.om-count span{ background:#000; color:#ff2b2b; font-family:"Courier New", monospace; padding:0 1cqw; letter-spacing:.2em; }
.o-land{ height:100%; background:#f4f4f4; color:#555; font:3cqw/1.3 Arial, sans-serif; position:relative; }
.ol-ad{ background:#1e88e5; color:#fff; font-size:2.6cqw; padding:1.8cqw 3cqw; }
.ol-title{ font-size:5.6cqw; color:#888; padding:3cqw 4cqw 2cqw; }
.ol-ph{ margin:0 4cqw; height:24cqw; background:#d6d6d6; position:relative; }
.ol-ph span{ position:absolute; left:50%; top:50%; width:12cqw; height:8cqw; transform:translate(-50%,-50%); background:#b5b5b5; clip-path:polygon(0 100%, 35% 30%, 55% 65%, 72% 45%, 100% 100%); }
.o-land p{ padding:2cqw 4cqw; color:#999; }
.ol-cookie{ position:absolute; left:0; right:0; bottom:0; background:#222; color:#eee; padding:3cqw 4cqw; font-size:2.8cqw; display:flex; justify-content:space-between; }
.ol-cookie b{ background:#1e88e5; color:#fff; padding:.6cqw 2cqw; }

.m-nav{ height:9cqw; display:flex; align-items:center; gap:4cqw; padding:0 4cqw; background:#fff; color:#12232a; font:600 2.9cqw/1 var(--f-body); }
.m-nav b{ font-weight:700; font-size:3.3cqw; margin-right:auto; }
.m-nav i{ font-style:normal; background:#ffb547; color:#1b1b1b; padding:1.6cqw 2.6cqw; font-weight:700; border-radius:.6cqw; }
.m-dark{ background:#0d0d0d; color:#eee; } .m-dark i{ background:#ffd23a; }
.m-hero{ height:calc(100% - 9cqw); display:grid; grid-template-columns:1.4fr 1fr; align-items:center; padding:0 5cqw; gap:3cqw; overflow:hidden; }
.m-hero strong{ display:block; font-weight:700; }
.m-hero em{ display:inline-block; margin:4cqw 2cqw 0 0; padding:2.2cqw 3.4cqw; font:700 3cqw/1 var(--f-body); font-style:normal; border-radius:.8cqw; }
.mp-plumb{ background:#0f5d69; color:#fbf3e4; } .mp-plumb strong{ font:700 8.2cqw/.98 var(--f-body); letter-spacing:-.02em; }
.mp-plumb em{ background:#ffb547; color:#14262b; } .mp-plumb em.ghost{ background:transparent; color:#fbf3e4; box-shadow:inset 0 0 0 .5cqw #fbf3e4; }
.pipe{ justify-self:center; width:26cqw; aspect-ratio:1; border-radius:50%; border:5cqw solid #ffb547; box-shadow:0 0 0 2.4cqw #0f5d69, 0 0 0 3.2cqw rgba(255,255,255,.25); }
.mp-elec{ background:#141414; color:#fff; } .mp-elec strong{ font:400 6.6cqw/1.02 var(--f-sign); color:#ffd23a; }
.mp-elec em{ background:#ffd23a; color:#111; }
.bolt{ justify-self:center; width:20cqw; height:34cqw; background:#ffd23a; clip-path:polygon(60% 0, 10% 56%, 44% 56%, 30% 100%, 90% 38%, 54% 38%); filter:drop-shadow(0 0 3cqw rgba(255,210,58,.5)); }
.mp-mech{ background:#efe5d1; color:#2b1712; } .mp-mech strong{ font:400 6.8cqw/1.02 var(--f-slab); color:#b33b27; }
.mp-mech em{ background:#b33b27; color:#fff; }
.gear{ justify-self:center; width:26cqw; aspect-ratio:1; border-radius:50%; border:3.4cqw dashed #2b1712; box-shadow:inset 0 0 0 4cqw #efe5d1, inset 0 0 0 8cqw #b33b27; }
.mp-land{ background:#2d5a39; color:#eef3da; } .mp-land strong{ font:900 9.4cqw/.9 var(--f-display); text-transform:uppercase; }
.mp-land em{ background:#eef3da; color:#2d5a39; }
.leaf{ justify-self:center; width:26cqw; aspect-ratio:1; background:linear-gradient(135deg, #a7d36b, #4f8f3a); border-radius:0 100% 0 100%; transform:rotate(-8deg); box-shadow:inset -2cqw -2cqw 0 rgba(0,0,0,.15); }

/* =========================================================
   WALK MODE (html.walk) — horizontal, pinned, parallax street
   ========================================================= */
.walk .av-pin{ height:100svh; overflow:hidden; }
.walk .av-track{ position:absolute; left:0; bottom:0; height:100%; display:flex; align-items:flex-end; gap:0; max-width:none; margin:0;
  padding:0 8vw calc(var(--pave)) clamp(20px, 6vw, 96px); width:max-content; will-change:transform; }
.walk .av-track::before{ content:""; position:absolute; z-index:-1; left:-50vw; right:-50vw; bottom:0; height:var(--pave);
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0 72%, #7c6c64 72% 74.5%, #3d3135 74.5% 76%, #191015 76% 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 138px, rgba(0,0,0,.28) 138px 140px),
    linear-gradient(180deg, #5a4044 0%, #3e2b30 72%, #191015 72%);
}
.walk .av-track::after{ content:""; position:absolute; z-index:-1; left:-50vw; right:-50vw; bottom:calc(var(--pave) * .1); height:4px;
  background:repeating-linear-gradient(90deg, #d8a23b 0 70px, transparent 70px 150px); opacity:.75; }
.walk .av-intro{ flex:none; width:clamp(320px, 46vw, 680px); align-self:stretch; align-items:flex-end; padding-top:calc(var(--header-h) + 40px); margin-right:clamp(20px, 5vw, 90px); }
.walk .street-sign{ align-self:flex-end; margin-bottom:calc(var(--pave) * -.55); }
.walk .ss-pole{ height:clamp(160px, 34svh, 340px); }
.walk .av-intro-copy{ align-self:center; padding-bottom:0; }
.walk .shop{ flex:none; width:var(--shop-w); margin:0 clamp(14px, 2.4vw, 40px); }
.walk .shop{ --shop-w:clamp(360px, 33vw, 520px); }
.walk .bldg{ height:min(calc((100svh - var(--header-h) - var(--pave) - 30px) * var(--h, .86)), 132cqw); }
.walk .upper{ min-height:0; }
.walk .board{ position:absolute; top:calc(100% + 14px); left:4%; width:min(92%, 360px); margin:0; z-index:3; }
.walk .b-old, .walk .b-new{ grid-area:1/1; transition:opacity .4s; }
.walk .board{ grid-template-rows:auto auto 1fr; }
.walk .board .b-tag{ grid-row:1; } .walk .board h3{ grid-row:2; } .walk .b-old, .walk .b-new{ grid-row:3; grid-column:1; }
.walk .b-new{ opacity:0; }
.walk .shop.is-lit .b-new{ opacity:1; } .walk .shop.is-lit .b-old{ opacity:0; }
.walk .b-always{ opacity:1; }
.walk .lamp{ display:block; flex:none; position:relative; width:40px; align-self:flex-end; height:calc((100svh - var(--header-h) - var(--pave)) * .78); margin-bottom:calc(var(--pave) * -.64); z-index:6; }
.lamp-pole{ position:absolute; left:50%; bottom:0; top:22px; width:9px; transform:translateX(-50%); background:linear-gradient(90deg, #120a0e, #3e3236 50%, #0d080b); }
.lamp-pole::after{ content:""; position:absolute; left:50%; bottom:0; width:26px; height:34px; transform:translateX(-50%); background:linear-gradient(90deg, #120a0e, #3e3236 50%, #0d080b); clip-path:polygon(25% 0, 75% 0, 100% 100%, 0 100%); }
.lamp-head{ position:absolute; left:50%; top:0; width:34px; height:30px; transform:translateX(-50%); background:#1a1014; clip-path:polygon(10% 0, 90% 0, 100% 30%, 80% 100%, 20% 100%, 0 30%); }
.lamp-head::after{ content:""; position:absolute; inset:7px 9px 4px; background:#5a4a3c; transition:background .4s, box-shadow .4s; }
.lamp-cone{ position:absolute; left:50%; top:26px; width:420px; height:calc(100% + 20px); transform:translateX(-50%); pointer-events:none; opacity:0; transition:opacity .6s;
  background:radial-gradient(ellipse 30% 60% at 50% 0, rgba(255,200,120,.38), rgba(255,170,90,.08) 60%, transparent 75%); mix-blend-mode:screen; }
.avenue.lamps-on .lamp-head::after{ background:#ffe0a0; box-shadow:0 0 18px 6px rgba(255,200,120,.75); }
.avenue.lamps-on .lamp-cone{ opacity:1; }
.walk .av-outro{ flex:none; width:clamp(320px, 40vw, 620px); align-self:center; padding:var(--header-h) 0 0 clamp(20px, 4vw, 60px); margin-bottom:auto; margin-top:auto; }

.walk .av-far{ display:block; position:absolute; left:0; z-index:-2; will-change:transform; pointer-events:none; }
.walk .av-far-1{ bottom:calc(var(--pave) - 4px); height:44svh; width:300vw; }
.walk .av-far-1 svg{ width:100%; height:100%; }
.sil{ display:none; } .geo-us .sil-us, .geo-za .sil-za{ display:block; }
.walk .av-far-2{ bottom:calc(var(--pave) - 4px); height:clamp(160px, 30svh, 300px); width:300vw; background-repeat:repeat-x; background-position:0 100%; background-size:auto 100%; opacity:.95; }
.geo-us .av-far-2{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='300' viewBox='0 0 1200 300'%3E%3Cg fill='%232a0d22'%3E%3Crect x='0' y='220' width='170' height='80'/%3E%3Crect x='160' y='196' width='120' height='104'/%3E%3Crect x='300' y='232' width='220' height='68'/%3E%3Crect x='540' y='206' width='150' height='94'/%3E%3Crect x='700' y='238' width='240' height='62'/%3E%3Crect x='960' y='212' width='130' height='88'/%3E%3Crect x='1090' y='230' width='110' height='70'/%3E%3C/g%3E%3Cg fill='none' stroke='%232a0d22' stroke-linecap='round'%3E%3Cpath d='M250 300 C 256 220 246 140 262 46' stroke-width='9'/%3E%3Cpath d='M262 46c-30-6-62 4-86 26M262 46c-20-22-52-30-80-22M262 46c8-28 34-44 64-44M262 46c32-8 66 0 88 22M262 46c26 6 50 26 58 54M262 46c-16 14-30 40-30 66' stroke-width='7'/%3E%3Cpath d='M820 300 C 812 200 830 130 818 70' stroke-width='8'/%3E%3Cpath d='M818 70c-28-4-56 8-76 28M818 70c-16-22-44-30-70-22M818 70c8-26 32-40 58-40M818 70c30-6 60 2 80 22M818 70c22 8 42 26 48 50' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E"); }
.geo-za .av-far-2{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='300' viewBox='0 0 1200 300'%3E%3Cg fill='%232a0d22'%3E%3Cpath d='M0 300V226l60-30 60 30v74z'/%3E%3Cpath d='M120 300V210h40c0-24 30-24 30 0h40v90z'/%3E%3Crect x='240' y='236' width='200' height='64'/%3E%3Cpath d='M440 300V200l70-40 70 40v100z'/%3E%3Crect x='600' y='228' width='180' height='72'/%3E%3Cpath d='M790 300V214h30c0-30 50-30 50 0h30v86z'/%3E%3Crect x='920' y='240' width='280' height='60'/%3E%3Cellipse cx='1040' cy='170' rx='90' ry='30'/%3E%3Crect x='1034' y='170' width='12' height='80'/%3E%3Cellipse cx='340' cy='176' rx='70' ry='24'/%3E%3Crect x='335' y='176' width='10' height='70'/%3E%3C/g%3E%3C/svg%3E"); }

@media (max-width: 899px){
  .walk .shop{ --shop-w:82vw; margin:0 5vw; }
  .walk .av-intro{ width:88vw; flex-direction:column-reverse; align-items:flex-start; justify-content:flex-end; padding-top:calc(var(--header-h) + 20px); }
  .walk .street-sign{ display:none; }
  .walk .av-intro-copy{ align-self:flex-start; }
  .walk .av-intro h2{ font-size:44px; }
  .walk .av-intro-copy p{ font-size:16px; margin-top:12px; }
  .walk .av-outro{ width:84vw; }
  .walk .board{ width:92%; padding:12px 14px 14px; }
  .board h3{ font-size:22px; }
  .b-old, .b-new{ font-size:14px; }
  .walk .lamp-cone{ width:280px; }
}

/* =========================================================
   ED'S SHOP ON THE AVENUE: under scaffolding
   ========================================================= */
.scaff{ position:absolute; z-index:7; left:-2.5cqw; right:-2.5cqw; top:-4cqw; bottom:0; width:calc(100% + 5cqw); height:calc(100% + 4cqw); pointer-events:none; overflow:visible; }
.scaff-tube line{ stroke:#a9b0b5; stroke-width:5; vector-effect:non-scaling-stroke; }
.scaff-brace line{ stroke:#868d92; stroke-width:3; vector-effect:non-scaling-stroke; }
.scaff-board rect{ fill:#8a5a2b; }
.reno-plate{ position:absolute; z-index:8; left:50%; top:3cqw; transform:translateX(-50%) rotate(-2.5deg); white-space:nowrap;
  padding:1.6cqw 3cqw 1.3cqw; background:var(--sodium); color:var(--ink); border-radius:1cqw; font:400 4.2cqw/1 var(--f-sign); text-transform:uppercase;
  box-shadow:inset 0 0 0 .6cqw var(--sodium), inset 0 0 0 1.1cqw var(--ink), 0 1.2cqw 2cqw rgba(0,0,0,.45); }
.shop.s-ed .win::after, html:not(.walk) .shop.s-ed .win::after{ opacity:.42; }
html:not(.walk) .s-ed .screen-old{ transform:none; box-shadow:none; }
html:not(.walk) .s-ed .win::before{ content:none!important; }

/* =========================================================
   THE INSPECTION NOTICE, taped to a dark shop window
   ========================================================= */
.inspect{ position:relative; overflow:hidden; padding:var(--sec) var(--pad); background-color:var(--night);
  background-image:radial-gradient(ellipse 50% 40% at 12% 0%, rgba(255,181,71,.16), transparent 70%), linear-gradient(180deg, #170915 0%, var(--night) 40%, #24101f 100%); }
.inspect-wrap{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); grid-template-areas:"copy shop" "notice notice"; gap:clamp(36px, 5vw, 80px); align-items:start; }
.inspect-copy{ grid-area:copy; padding-top:clamp(0px, 3vw, 40px); }
.inspect h2{ font:900 clamp(44px, 5.4vw, 88px)/.9 var(--f-display); text-transform:uppercase; color:var(--cream); text-wrap:balance; }
.inspect-copy p{ margin-top:20px; font-size:clamp(17px, 1.3vw, 20px); color:#f1dcc1; max-width:32em; }
.inspect-copy .inspect-kicker{ margin-top:26px; font:800 clamp(22px, 2vw, 30px)/1.05 var(--f-display); text-transform:uppercase; color:var(--sodium); max-width:20em; }

.dark-shop{ grid-area:shop; margin:0; position:relative; padding:clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px) 0; background:#2b2a31;
  background-image:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.35)), repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 3px, transparent 3px 26px);
  box-shadow:inset 10px 0 0 rgba(0,0,0,.2), 0 30px 60px rgba(0,0,0,.45); }
.ds-fascia{ height:clamp(44px, 5vw, 70px); margin-bottom:clamp(10px, 1.2vw, 16px); display:grid; place-items:center; background:#1a1a1f; box-shadow:inset 0 0 0 3px #3b3a42; }
.ds-fascia span{ font:400 clamp(18px, 2.4vw, 34px)/1 var(--f-sign); text-transform:uppercase; color:#4c4952; letter-spacing:.04em; text-shadow:0 1px 0 rgba(255,255,255,.06); }
.ds-win{ position:relative; border:clamp(8px, 1vw, 14px) solid #5c5a62; background:#0b0709; box-shadow:inset 0 0 0 3px rgba(0,0,0,.4); }
.ds-dim{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(14,5,13,.55), rgba(14,5,13,.35)); pointer-events:none; }
.ds-win .glass{ z-index:3; }
.dark-shop figcaption{ padding:12px 2px 14px; font-size:14.5px; color:#d9c2a4; }
.ds-tag{ font-weight:700; color:var(--sodium); }

/* the dated site itself (illustrative) */
.oldsite-page{ background:#fffff0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23fffde8'/%3E%3Crect width='4' height='4' fill='%23f6f1cf'/%3E%3C/svg%3E"); color:#000; font:13px/1.35 "Times New Roman", Times, serif; min-height:380px; display:flex; flex-direction:column; }
.oldsite-bar{ display:flex; align-items:center; gap:6px; background:linear-gradient(#e7e7e7, #bdbdbd); padding:7px 10px; border-bottom:1px solid #888; font:12px/1 Arial, sans-serif; color:#333; overflow:hidden; white-space:nowrap; }
.oldsite-bar i{ width:11px; height:11px; border-radius:50%; background:#8f8f8f; flex:none; }
.oldsite-bar span{ min-width:0; margin-left:6px; background:#fff; border:1px inset #999; padding:4px 6px; flex:1; overflow:hidden; text-overflow:ellipsis; }
.os-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; background:#003399; color:#ff0; padding:10px 12px; }
.os-logo{ font:bold 22px/1 "Comic Sans MS", "Chalkboard SE", "Trebuchet MS", sans-serif; text-shadow:2px 2px #000; }
.os-phone{ font:bold 12px/1 Impact, "Arial Black", sans-serif; background:linear-gradient(#ffef5a, #e3a000); color:#900; padding:6px 8px; border:2px outset #ffd; letter-spacing:.05em; filter:blur(.3px); white-space:nowrap; }
.os-marq{ background:#900; color:#fff; font:bold 12px/1 Arial, sans-serif; padding:5px 0; overflow:hidden; white-space:nowrap; }
.os-marq span{ display:inline-block; padding-left:100%; animation:marq 16s linear infinite; }
@keyframes marq{ to{ transform:translateX(-100%); } }
.os-nav{ display:flex; flex-wrap:wrap; gap:4px; padding:6px; background:#ccc; border-bottom:2px solid #999; }
.os-nav span{ background:linear-gradient(#f5f5f5, #c4c4c4); border:2px outset #eee; padding:3px 8px; font:12px Verdana, sans-serif; color:#00e; }
.os-body{ display:grid; grid-template-columns:42% 1fr; gap:12px; padding:12px; flex:1; }
.os-img{ background:#ddd; border:3px ridge #bbb; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:160px; font:11px Verdana, sans-serif; color:#666; }
.os-spin{ width:26px; height:26px; border:4px solid #bbb; border-top-color:#666; border-radius:50%; animation:spin 1.4s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.os-h{ font:bold 20px/1.1 "Times New Roman", serif; color:#c00; margin-bottom:6px; text-decoration:underline; }
.os-txt p{ margin-bottom:6px; }
.os-link{ color:#00e; text-decoration:underline; }
.os-form{ font:11px/1.6 "Courier New", monospace; background:#eee; border:1px dashed #999; padding:6px; }
.os-form span{ display:inline-block; margin-top:4px; border:2px outset #ddd; background:#ddd; padding:1px 8px; }
.os-foot{ background:#003399; color:#ccc; font:10px Verdana, sans-serif; padding:6px 10px; text-align:center; }
.snag-pin{ position:absolute; z-index:2; left:var(--x); top:var(--y); width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:var(--sodium); color:var(--ink); font:400 15px/34px var(--f-sign); text-align:center; box-shadow:0 0 0 3px var(--ink), 0 0 0 5px var(--sodium), 0 6px 14px rgba(0,0,0,.5); }

/* the notice: yellow, hazard-striped, taped on */
.notice{ grid-area:notice; position:relative; z-index:2; justify-self:end; width:min(100%, 1040px); margin-top:clamp(-150px, -9vw, -40px);
  padding:clamp(22px, 2.6vw, 38px) clamp(18px, 2.6vw, 40px) clamp(22px, 2.4vw, 34px); background:#f7c64f; color:var(--ink);
  background-image:linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.05)); transform:rotate(-.8deg);
  box-shadow:0 2px 0 rgba(0,0,0,.08), 0 26px 50px rgba(0,0,0,.5); }
.notice::before{ content:""; position:absolute; left:0; right:0; top:0; height:12px; background:repeating-linear-gradient(-45deg, var(--ink) 0 10px, transparent 10px 20px); }
.tape{ position:absolute; top:-14px; width:96px; height:30px; background:rgba(240,228,200,.72); box-shadow:0 1px 2px rgba(0,0,0,.2); z-index:3; }
.tape-l{ left:6%; transform:rotate(-5deg); } .tape-r{ right:6%; transform:rotate(4deg); }
.notice-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px; padding:10px 0 16px; border-bottom:3px solid var(--ink); }
.notice-h{ font:400 clamp(26px, 3vw, 44px)/1 var(--f-sign); text-transform:uppercase; }
.notice-sub{ font-size:16px; font-weight:600; }
.snags{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 34px; }
.snags li{ display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start; padding:16px 0; border-bottom:1.5px dashed rgba(36,16,29,.35); line-height:1.42; font-size:16px; }
.snags b{ display:block; font-weight:700; }
.snag-ref{ width:32px; height:32px; border-radius:50%; border:2.5px solid var(--ink); font:400 14px/27px var(--f-sign); text-align:center; }
.notice-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 30px; margin-top:22px; }
.notice-foot p{ font-weight:600; font-size:17px; max-width:34em; }
.notice .btn{ background:var(--ink); color:var(--cream); box-shadow:0 4px 0 #000, inset 0 0 0 2px rgba(255,255,255,.08), inset 0 0 0 5px var(--ink), inset 0 0 0 6px rgba(248,233,207,.4); }
.notice .btn:hover{ background:#3a1a2f; box-shadow:0 4px 0 #000, inset 0 0 0 5px #3a1a2f, inset 0 0 0 6px rgba(248,233,207,.5); }
@media (max-width: 1099px){
  .inspect-wrap{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"copy" "shop" "notice"; }
  .snags{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .notice{ margin-top:-60px; width:calc(100% - 12px); }
}
@media (max-width: 640px){
  .snags{ grid-template-columns:1fr; }
  .oldsite-page{ min-height:300px; font-size:12px; }
  .os-logo{ font-size:16px; } .os-phone{ font-size:10px; padding:5px 6px; }
  .os-body{ grid-template-columns:38% 1fr; gap:8px; padding:8px; }
  .os-img{ min-height:120px; }
  .os-form{ display:none; }
  .snag-pin{ width:28px; height:28px; margin:-14px 0 0 -14px; font-size:13px; line-height:28px; }
  .notice{ margin-top:-36px; width:calc(100% - 8px); justify-self:center; transform:rotate(-.6deg); }
  .notice .btn{ width:100%; }
  .tape{ width:72px; height:26px; }
}

/* =========================================================
   ED'S RENOVATION: the strip-out, staged in his shopfront
   ========================================================= */
.reno{ position:relative; background-color:#4a1d1a;
  background-image:linear-gradient(180deg, rgba(28,11,25,.82), rgba(28,11,25,.45) 30%, rgba(28,11,25,.6) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cg stroke='%23140708' stroke-width='3'%3E%3Crect x='0' y='0' width='60' height='30' fill='%235e2620'/%3E%3Crect x='60' y='0' width='60' height='30' fill='%236b2c24'/%3E%3Crect x='-30' y='30' width='60' height='30' fill='%23662a22'/%3E%3Crect x='30' y='30' width='60' height='30' fill='%23582420'/%3E%3Crect x='90' y='30' width='60' height='30' fill='%236e2e26'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto, 120px 60px; }
.reno-pin{ padding:var(--sec) var(--pad) 0; }
.reno-grid{ max-width:1320px; margin:0 auto; }
.reno h2{ font:900 clamp(44px, 6vw, 96px)/.9 var(--f-display); text-transform:uppercase; color:var(--cream); text-wrap:balance; }
.reno-lede{ margin-top:20px; font-size:clamp(17px, 1.3vw, 20px); color:#f1dcc1; max-width:32em; }
.stages{ display:grid; gap:22px; margin-top:28px; }
.stage{ color:#f1dcc1; font-size:17px; line-height:1.5; max-width:40em; }
.stage-h{ font:400 clamp(20px, 1.8vw, 26px)/1 var(--f-sign); text-transform:uppercase; color:var(--sodium); margin-bottom:8px; }
.stage-bar{ display:none; }
.reno-shop{ display:none; }

/* static before / after (reduced motion or no script) */
.reno-static{ max-width:1320px; margin:0 auto; padding:48px var(--pad) 0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, 3vw, 44px); }
.reno-static figure{ margin:0; }
.reno-static .rs-win{ border:clamp(8px, 1vw, 14px) solid #151012; box-shadow:0 0 0 3px #3a2b1c, 0 24px 50px rgba(0,0,0,.5); }
.reno-static img{ width:100%; height:auto; }
.reno-static figcaption{ margin-top:14px; font-size:16px; color:#f1dcc1; }
.reno-static figcaption b{ color:var(--sodium); }
@media (max-width: 760px){ .reno-static{ grid-template-columns:1fr; } }

/* pinned strip-out (motion allowed) */
.motion-ok .reno-static{ display:none; }
.motion-ok .reno-pin{ height:100vh; height:100svh; overflow:hidden; padding:calc(var(--header-h) + 10px) var(--pad) 16px; }
.motion-ok .reno-grid{ height:100%; display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 8fr); gap:clamp(36px, 4vw, 64px); align-items:center; }
.motion-ok .stages{ gap:0; }
.motion-ok .stage{ grid-area:1/1; opacity:0; transform:translateY(10px); transition:opacity .35s, transform .35s; }
.motion-ok .stage.is-on{ opacity:1; transform:none; }
.motion-ok .stage-bar{ position:relative; display:grid; grid-template-columns:repeat(3, 1fr); margin-top:22px; padding-top:10px; border-top:3px solid rgba(248,233,207,.25); font-size:14px; font-weight:700; color:#e7d3b4; }
.stage-bar-fill{ position:absolute; top:-3px; left:0; width:100%; height:3px; background:var(--sodium); transform:scaleX(0); transform-origin:0 50%; }
.motion-ok .reno-shop{ display:block; }
.reno-shop{ position:relative; container-type:inline-size; width:100%; max-width:min(100%, calc((100svh - var(--header-h) - 70px) / .8)); justify-self:center;
  padding:3cqw 3.4cqw 0; background:#151012; box-shadow:inset 0 0 0 .5cqw #2c2224, 0 3cqw 6cqw rgba(0,0,0,.5); --fh:10cqw; }
.reno-shop .fascia{ margin:0; }
.reno-shop .sign-gilt span{ font-size:5cqw; }
.rs-win{ position:relative; overflow:hidden; }
.reno-shop .rs-win{ margin-top:2.6cqw; border:1.8cqw solid #0b0809; box-shadow:0 0 0 .5cqw #3a2b1c, inset 0 0 0 .4cqw rgba(0,0,0,.4); }
.rs-win .glass{ z-index:6; }
.rs-sill{ height:3.2cqw; margin:0 -3.4cqw; background:linear-gradient(180deg, #8b7f74, #5c534c); box-shadow:inset 0 .5cqw 0 rgba(255,255,255,.12); }
.rs-scaff{ position:absolute; z-index:7; left:-3cqw; top:-3cqw; width:calc(100% + 6cqw); height:calc(100% + 5cqw); pointer-events:none; overflow:visible; }
.reno-shop .pool{ height:16cqw; }
.reno.is-done .reno-shop .pool{ opacity:1; }

.sf-screen{ position:relative; aspect-ratio:1200/750; overflow:hidden; background:var(--bottle); perspective:1400px; }
.sf-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sf-before{ opacity:0; z-index:0; }
.sf-blueprint{ position:absolute; inset:0; z-index:1; background-color:var(--bottle);
  background-image:linear-gradient(rgba(248,233,207,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(248,233,207,.16) 1px, transparent 1px), linear-gradient(rgba(248,233,207,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(248,233,207,.06) 1px, transparent 1px);
  background-size:10% 16%, 10% 16%, 2% 3.2%, 2% 3.2%; }
.sf-after{ z-index:2; }
.tiles{ position:absolute; inset:0; z-index:3; display:grid; transform-style:preserve-3d; }
.tile{ background-repeat:no-repeat; backface-visibility:hidden; will-change:transform; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25); }
.scaffold{ position:absolute; inset:0; width:100%; height:100%; }
.scaffold line{ stroke:var(--cream); stroke-width:4; vector-effect:non-scaling-stroke; }
.sc-std line{ stroke-width:3; } .sc-led line{ stroke-width:2.5; } .sc-brace line{ stroke:rgba(248,233,207,.7); stroke-width:2; }
.sc-board rect{ fill:var(--sodium); }
.bp-dim{ position:absolute; color:var(--cream); font-size:clamp(10px, 1vw, 13px); font-weight:700; }
.bp-dim span{ background:var(--bottle); padding:0 6px; position:relative; z-index:1; }
.bp-dim-x{ left:4%; right:4%; top:5%; height:14px; display:flex; justify-content:center; align-items:center; border-left:1px solid var(--cream); border-right:1px solid var(--cream); }
.bp-dim-x::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--cream); }
.bp-dim-y{ top:12%; bottom:6%; left:2%; width:14px; display:flex; align-items:center; justify-content:center; border-top:1px solid var(--cream); border-bottom:1px solid var(--cream); }
.bp-dim-y::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--cream); }
.bp-dim-y span{ writing-mode:vertical-rl; transform:rotate(180deg); padding:6px 0; }
.stamp{ position:absolute; z-index:4; right:5%; bottom:8%; padding:.18em .42em .12em; font:900 clamp(20px, 5cqw, 46px)/1 "Big Shoulders Stencil Display", var(--f-display); text-transform:uppercase; letter-spacing:.04em;
  color:var(--sodium); border:4px solid var(--sodium); background:rgba(28,11,25,.82); transform:rotate(-8deg); opacity:0; }

@media (max-width: 899px){
  .motion-ok .reno-grid{ grid-template-columns:1fr; grid-template-rows:auto auto; align-content:center; gap:22px; }
  .motion-ok .reno h2{ font-size:clamp(36px, 10vw, 54px); }
  .motion-ok .reno-lede{ display:none; }
  .motion-ok .stages{ margin-top:14px; }
  .motion-ok .stage{ font-size:15.5px; line-height:1.45; }
  .motion-ok .stage-h{ font-size:19px; margin-bottom:6px; }
  .motion-ok .stage-bar{ margin-top:14px; font-size:13px; }
  .reno-shop{ max-width:100%; }
  .stamp{ border-width:3px; }
}
@media (max-width: 899px) and (min-height: 760px){ .motion-ok .reno-lede{ display:block; font-size:16px; margin-top:12px; } }
@media (min-width: 900px) and (max-height: 760px){ .motion-ok .reno h2{ font-size:clamp(40px, 4.6vw, 72px); } .motion-ok .reno-lede{ font-size:16px; } }

/* Ed's review, painted on the brick */
.reno-wall{ max-width:1320px; margin:0 auto; padding:clamp(56px, 7vw, 110px) var(--pad) var(--sec); }
.wall-quote{ margin:0; display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(28px, 4vw, 72px); align-items:end; }
.wq-big{ font:800 clamp(40px, 5vw, 84px)/.94 var(--f-display); text-transform:uppercase; color:#fbe6c0; text-shadow:0 3px 0 rgba(0,0,0,.35); text-wrap:balance; }
.wq-full{ font-size:18px; line-height:1.6; color:#f3dcc0; }
.wall-quote footer{ margin-top:20px; font-weight:700; color:var(--sodium); display:flex; align-items:center; gap:12px; }
.wall-quote footer::before{ content:""; width:34px; height:3px; background:var(--sodium); }
.wq-link a{ display:inline-block; margin-top:8px; padding:10px 0; font-weight:700; color:var(--cream); text-underline-offset:4px; text-decoration-color:var(--sodium); }
@media (max-width: 899px){ .wall-quote{ grid-template-columns:1fr; } }

/* =========================================================
   WHAT YOU GET: tags hung in a lit window
   ========================================================= */
.get{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); background:var(--plum); min-height:80svh; }
.get-photo{ position:relative; overflow:hidden; }
.get-photo img{ width:100%; height:100%; object-fit:cover; object-position:60% 50%; }
.get-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(42,15,36,0) 60%, var(--plum) 100%); }
.get-copy{ padding:var(--sec) var(--pad); }
.get h2{ font:900 clamp(42px, 5vw, 84px)/.9 var(--f-display); text-transform:uppercase; color:var(--cream); max-width:12em; text-wrap:balance; }
.get-lede{ margin-top:18px; font-size:clamp(17px, 1.3vw, 20px); color:#f1dcc1; max-width:34em; }
.tags{ margin-top:clamp(36px, 4vw, 56px); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:34px 26px; max-width:820px; }
.tags li{ position:relative; padding:18px 20px 18px 50px; background:#ecd6a4; color:#2a1620; font-size:15.5px; line-height:1.4;
  clip-path:polygon(22px 0, 100% 0, 100% 100%, 22px 100%, 0 50%); transform:rotate(var(--r, -1deg)); transform-origin:22px 50%;
  background-image:radial-gradient(circle at 26px 50%, var(--plum) 5px, #b48f4c 6px 8px, transparent 9px), linear-gradient(180deg, rgba(255,255,255,.25), rgba(0,0,0,.05));
  box-shadow:0 8px 0 rgba(0,0,0,.0); transition:transform .4s cubic-bezier(.3,1.6,.5,1); }
.tags li:nth-child(2n){ --r:1.2deg; } .tags li:nth-child(3n){ --r:-1.8deg; } .tags li:nth-child(5n){ --r:.6deg; }
.tags li:hover{ transform:rotate(0deg); }
.tags b{ display:block; font:800 21px/1.05 var(--f-display); text-transform:uppercase; letter-spacing:.02em; color:#1d0b16; margin-bottom:4px; }
@media (max-width: 899px){
  .get{ grid-template-columns:1fr; }
  .get-photo{ height:62svh; } .get-photo::after{ background:linear-gradient(180deg, rgba(42,15,36,0) 55%, var(--plum) 100%); }
  .get-copy{ padding-top:24px; }
  .tags{ grid-template-columns:1fr; gap:18px; }
}

/* =========================================================
   THE QUOTE: pick off the chalkboards, the slip in the studio window fills in
   ========================================================= */
.prices{ overflow:hidden; padding:var(--sec) var(--pad); background-color:#1a4433;
  background-image:linear-gradient(180deg, rgba(28,11,25,.5), rgba(28,11,25,0) 22%, rgba(0,0,0,.25)),
    linear-gradient(90deg, rgba(0,0,0,.22) 2px, transparent 2px), linear-gradient(180deg, rgba(0,0,0,.22) 2px, transparent 2px),
    linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.05));
  background-size:auto, 64px 32px, 64px 32px, 64px 32px; }
.prices-wrap{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); grid-template-areas:"head head" "picker slip"; gap:clamp(36px, 4vw, 64px) clamp(40px, 5vw, 88px); align-items:start; }
.prices-head{ grid-area:head; max-width:900px; }
.prices h2{ font:900 clamp(44px, 5.4vw, 88px)/.9 var(--f-display); text-transform:uppercase; color:var(--cream); text-wrap:balance; }
.prices-head p{ margin-top:20px; font-size:clamp(17px, 1.3vw, 20px); color:#e6efe3; max-width:34em; }

.picker{ grid-area:picker; display:grid; gap:clamp(34px, 3vw, 48px); }
.pk-board{ margin:0; min-width:0; position:relative; padding:clamp(16px, 2vw, 26px) clamp(14px, 2vw, 26px) clamp(10px, 1.4vw, 18px); background:#1d2321; color:#eef0e6;
  border:8px solid #6b4a2b; border-radius:3px; box-shadow:0 14px 30px rgba(0,0,0,.4), inset 0 0 40px rgba(255,255,255,.04);
  background-image:radial-gradient(ellipse at 30% 10%, rgba(255,255,255,.06), transparent 60%); }
.pk-legend{ float:left; width:100%; padding:0 0 12px; margin-bottom:4px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; border-bottom:2px solid rgba(238,240,230,.4);
  font:900 clamp(26px, 2.4vw, 36px)/1 var(--f-display); text-transform:uppercase; letter-spacing:.06em; color:#fff; }
.pk-legend span{ font:600 15px/1.2 var(--f-body); text-transform:none; letter-spacing:0; color:#cfd3c6; }
.pk-legend + *{ clear:both; }
.opt{ position:relative; display:grid; grid-template-columns:34px minmax(0, 1fr) auto; grid-template-areas:"box name price" "box meta meta"; gap:4px 14px; align-items:baseline;
  padding:16px 12px; margin:0 -12px; border-bottom:1.5px dashed rgba(238,240,230,.2); cursor:pointer; border-radius:3px; transition:background-color .2s; }
.opt:last-child{ border-bottom:0; }
.opt:hover{ background:rgba(255,255,255,.05); }
.opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.box{ grid-area:box; align-self:start; width:28px; height:28px; margin-top:2px; position:relative; border:3px solid #eef0e6; border-radius:3px; }
.opt-name{ grid-area:name; font:800 clamp(23px, 2vw, 30px)/1.05 var(--f-display); text-transform:uppercase; letter-spacing:.05em; color:#fff; }
.opt-price{ grid-area:price; font:800 clamp(24px, 2.1vw, 32px)/1.05 var(--f-display); letter-spacing:.04em; white-space:nowrap; color:#fff; }
.opt-meta{ grid-area:meta; font-size:15px; line-height:1.45; color:#d4d8cc; }
.opt:has(input:checked){ background:rgba(255,181,71,.13); }
.opt:has(input:checked) .box{ background:var(--sodium); border-color:var(--sodium); }
.opt:has(input:checked) .box::after{ content:""; position:absolute; left:7px; top:1px; width:8px; height:15px; border:solid var(--ink); border-width:0 3.5px 3.5px 0; transform:rotate(45deg); }
.opt:has(input:checked) .opt-price{ color:var(--sodium); }
.opt:has(input:focus-visible){ outline:3px solid var(--sodium); outline-offset:2px; }

.slip-col{ grid-area:slip; display:grid; gap:24px; align-content:start; }
.qwin{ position:relative; padding:clamp(54px, 5vw, 70px) clamp(16px, 2.4vw, 34px) clamp(26px, 3vw, 40px); border:clamp(10px, 1.2vw, 16px) solid var(--bottle-2);
  background:radial-gradient(ellipse 80% 60% at 50% 30%, #5a2a2a 0%, #2a1220 55%, #160a14 100%);
  box-shadow:inset 0 0 0 4px #f4efe2, inset 0 0 0 7px rgba(0,0,0,.4), 0 0 0 3px #0e2a1f, 0 30px 60px rgba(0,0,0,.5); }
.qwin::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.10) 0 12%, rgba(255,255,255,0) 12% 34%, rgba(255,255,255,.05) 34% 39%, rgba(255,255,255,0) 39%); }
.qwin-gilt{ position:absolute; left:0; right:0; top:clamp(14px, 1.6vw, 22px); text-align:center; font:400 clamp(17px, 1.9vw, 26px)/1 var(--f-slab);
  background-image:linear-gradient(180deg, #fff1b8 0%, #e9c15d 40%, #a8742a 62%, #f3d27a 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(1px 2px 0 #3b1f0c); }
.slip{ position:relative; z-index:2; background:#fbf4e6; color:var(--ink); padding:30px 24px 26px; transform:rotate(-1deg);
  background-image:repeating-linear-gradient(180deg, transparent 0 31px, rgba(36,16,29,.06) 31px 32px);
  box-shadow:0 2px 0 rgba(0,0,0,.08), 0 22px 40px rgba(0,0,0,.5); }
.slip .tape{ top:-13px; width:84px; height:28px; }
.slip-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:14px; border-bottom:3px solid var(--ink); }
.slip-h{ font:900 clamp(40px, 4.4vw, 58px)/.85 var(--f-display); text-transform:uppercase; }
.slip-from{ margin-top:6px; font-size:14px; font-weight:600; color:#5a3a4b; }
.slip-date{ font-size:14px; text-align:right; color:#5a3a4b; white-space:nowrap; }
.slip-date span{ display:block; font-weight:700; color:var(--ink); }
.slip-lines{ width:100%; border-collapse:collapse; margin-top:4px; }
.slip-lines thead th{ padding:10px 0 6px; border-bottom:1px solid rgba(36,16,29,.3); font-size:13px; font-weight:700; text-align:left; color:#5a3a4b; }
.slip-lines thead th:last-child{ text-align:right; }
.slip-lines td{ padding:12px 0; border-bottom:1.5px dashed rgba(36,16,29,.3); vertical-align:top; }
.slip-lines td:first-child{ padding-right:14px; }
.slip-lines td b{ display:block; font-weight:700; font-size:16px; }
.slip-lines td span{ display:block; font-size:14px; line-height:1.4; color:#5a3a4b; }
.slip-lines td:last-child{ text-align:right; white-space:nowrap; font:800 22px/1.1 var(--f-display); letter-spacing:.03em; }
.slip-lines td:last-child span{ display:inline; font:inherit; color:inherit; }
.slip-lines small{ margin-left:2px; font:600 13px var(--f-body); }
.slip-pay{ margin-top:16px; padding:14px 16px; display:grid; gap:8px; background:var(--plum); color:var(--cream); }
.slip-pay div{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.slip-pay dt{ font-weight:600; font-size:15.5px; }
.slip-pay dd{ font:800 28px/1 var(--f-display); letter-spacing:.03em; color:var(--sodium); }
.slip-sign{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:92px; }
.sl{ display:block; height:1.5px; background:var(--ink); }
.sl-n{ display:block; margin-top:6px; font-size:13px; color:#5a3a4b; }
.slip-stamp{ position:absolute; right:20px; bottom:86px; padding:.16em .42em .1em; font:900 clamp(24px, 2.6vw, 34px)/1 "Big Shoulders Stencil Display", var(--f-display); text-transform:uppercase; letter-spacing:.05em;
  color:#b8351f; border:3px solid #b8351f; border-radius:3px; transform:rotate(-9deg); opacity:.9; pointer-events:none; mix-blend-mode:multiply; }

.trust{ display:grid; gap:10px; }
.trust li{ display:flex; align-items:center; gap:12px; font-weight:700; font-size:17px; }
.trust li::before{ content:""; flex:none; width:18px; height:10px; border-left:3px solid var(--sodium); border-bottom:3px solid var(--sodium); transform:rotate(-45deg) translateY(-3px); }
.prices-ed{ padding-left:18px; border-left:3px solid var(--sodium); font-size:17px; color:#fff; }
.prices-ed span{ display:block; margin-top:6px; font-size:14px; font-weight:700; color:var(--sodium); }
.slip-col > .btn{ justify-self:start; }
@media (min-width: 1100px){ .slip-col{ position:sticky; top:calc(var(--header-h) + 24px); } }
@media (max-width: 1099px){
  .prices-wrap{ grid-template-columns:minmax(0, 1fr); grid-template-areas:"head" "picker" "slip"; }
  .slip-col{ max-width:620px; }
}
@media (max-width: 640px){
  .pk-board{ border-width:6px; }
  .opt{ grid-template-columns:30px minmax(0, 1fr) auto; gap:4px 12px; padding:14px 10px; margin:0 -10px; }
  .box{ width:26px; height:26px; }
  .opt:has(input:checked) .box::after{ left:6px; width:8px; height:14px; }
  .qwin{ padding:50px 12px 22px; }
  .slip{ padding:26px 16px 22px; transform:rotate(-.6deg); }
  .slip-lines td:last-child{ font-size:20px; }
  .slip-pay{ padding:12px; }
  .slip-pay dd{ font-size:24px; }
  .slip-sign{ gap:14px; margin-top:84px; }
  .slip-stamp{ right:12px; bottom:80px; }
  .slip-col > .btn{ justify-self:stretch; }
}


/* =========================================================
   HOW IT WORKS: a fingerpost
   ========================================================= */
.how{ padding:var(--sec) var(--pad); background:linear-gradient(180deg, #2a0f24 0%, #5a1d3a 55%, #9a3a45 100%); overflow:hidden; }
.how-wrap{ max-width:1200px; margin:0 auto; }
.how h2{ font:900 clamp(44px, 5.4vw, 88px)/.9 var(--f-display); text-transform:uppercase; color:var(--cream); max-width:11em; text-wrap:balance; }
.post{ position:relative; margin-top:clamp(40px, 5vw, 70px); padding-left:34px; }
.post-pole{ position:absolute; left:10px; top:-30px; bottom:-140px; width:18px; background:linear-gradient(90deg, #120a0e, #4b3c40 45%, #0f080c); border-radius:9px 9px 0 0; }
.arms{ display:grid; gap:22px; counter-reset:none; }
.arm{ position:relative; max-width:640px; padding:22px 70px 24px 30px; color:#fff;
  clip-path:polygon(0 0, calc(100% - 46px) 0, 100% 50%, calc(100% - 46px) 100%, 0 100%);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.9); }
.arm::before{ content:""; position:absolute; inset:5px; clip-path:polygon(0 0, calc(100% - 44px) 0, 100% 50%, calc(100% - 44px) 100%, 0 100%); border:0; box-shadow:inset 0 0 0 2px rgba(255,255,255,.55); pointer-events:none; }
.arm-1{ background:var(--bottle-2); }
.arm-2{ background:#b8432e; margin-left:clamp(0px, 6vw, 90px); }
.arm-3{ background:var(--sodium); color:var(--ink); margin-left:clamp(0px, 12vw, 180px); box-shadow:inset 0 0 0 4px rgba(36,16,29,.85); }
.arm-3::before{ box-shadow:inset 0 0 0 2px rgba(36,16,29,.4); }
.arm h3{ font:400 clamp(22px, 2vw, 30px)/1 var(--f-sign); text-transform:uppercase; }
.arm p{ margin-top:10px; font-size:16.5px; line-height:1.5; max-width:34em; }
@media (max-width: 640px){ .arm{ padding:18px 58px 20px 20px; } .post{ padding-left:26px; } .post-pole{ left:6px; } }

/* =========================================================
   THE STUDIO DOOR (final CTA)
   ========================================================= */
.door-sec{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); background:var(--night); }
.door-photo{ position:relative; min-height:100%; overflow:hidden; }
.door-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.plaque{ position:absolute; left:50%; bottom:9%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 20px 11px; white-space:nowrap;
  background:linear-gradient(135deg, #f7dc93, #c4933a 45%, #f2d080 60%, #9a6c24); color:#2c1a07; border-radius:3px; box-shadow:0 6px 18px rgba(0,0,0,.6), inset 0 0 0 2px rgba(60,35,5,.5);
  font:400 clamp(13px, 1.2vw, 16px)/1 var(--f-sign); text-transform:uppercase; }
.plaque span{ font:700 12px/1 var(--f-body); letter-spacing:.2em; }
.door-copy{ padding:var(--sec) var(--pad); max-width:900px; }
.door-sec h2{ font:900 clamp(52px, 7vw, 116px)/.86 var(--f-display); text-transform:uppercase; color:var(--cream); text-wrap:balance; }
.door-lede{ margin-top:24px; font-size:clamp(18px, 1.4vw, 21px); color:#f1dcc1; max-width:32em; }
.sig{ display:block; margin-top:10px; font-weight:700; color:var(--sodium); font-size:16px; }
.audit{ margin-top:34px; max-width:640px; }
.audit label{ display:block; font-weight:700; font-size:16px; margin-bottom:10px; }
.audit-row{ display:flex; gap:12px; flex-wrap:wrap; }
.audit input{ flex:1 1 260px; min-height:56px; padding:0 18px; font:500 18px var(--f-body); color:var(--ink); background:#fff4e3; border:0; border-radius:3px; box-shadow:inset 0 0 0 2px #c9a46a; }
.audit input:focus-visible{ outline:3px solid var(--sodium); outline-offset:2px; }
.audit-help{ margin-top:10px; font-size:14.5px; color:#d9c2a4; }
.audit-help.ok{ color:#c9f0c0; font-weight:700; }
.contact{ margin-top:38px; max-width:640px; border-top:2px solid rgba(248,233,207,.18); }
.contact li a{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 0; min-height:60px; text-decoration:none; border-bottom:2px solid rgba(248,233,207,.18); transition:padding .25s, color .2s; }
.contact li a:hover{ padding-left:10px; color:var(--sodium); }
.c-k{ font:800 clamp(22px, 2vw, 30px)/1 var(--f-display); text-transform:uppercase; letter-spacing:.03em; }
.c-v{ font-size:16px; font-weight:600; color:#e8d2b2; word-break:break-word; }
.geo-us .c-wa{ display:none; }
.postcards{ margin-top:44px; }
.pc-cap{ font-size:15.5px; color:#d9c2a4; max-width:36em; }
.pc-row{ display:flex; gap:clamp(10px, 2vw, 22px); margin-top:20px; }
.pc{ width:clamp(92px, 11vw, 150px); height:auto; aspect-ratio:3/4; object-fit:cover; border:6px solid #f4ead6; box-shadow:0 12px 26px rgba(0,0,0,.5); transform:rotate(var(--r)); }
.pc-1{ --r:-4deg; } .pc-2{ --r:2.5deg; margin-top:14px; } .pc-3{ --r:-1.5deg; }
@media (max-width: 899px){
  .door-sec{ grid-template-columns:1fr; }
  .door-photo{ height:58svh; }
  .door-copy{ padding-top:56px; }
}

/* ---------- Footer: kerb + asphalt ---------- */
.foot{ background:var(--asphalt); color:#e9d8bd; }
.foot-kerb{ height:22px; background:linear-gradient(180deg, #8b7f74 0 60%, #5c534c 60% 100%); box-shadow:inset 0 4px 0 #f2c230; }
.geo-za .foot-kerb{ box-shadow:inset 0 4px 0 #e33b2c; }
.foot-in{ max-width:1320px; margin:0 auto; padding:56px var(--pad) 40px; display:grid; grid-template-columns:1.4fr 1fr; gap:28px 40px; align-items:start; }
.foot-brand{ display:flex; gap:18px; align-items:center; }
.brand-plate-lg{ font-size:18px; padding:10px 14px 9px; }
.foot-brand p{ font-size:15.5px; line-height:1.5; }
.foot-links{ display:grid; gap:4px; justify-items:start; }
.foot-links a{ display:inline-block; padding:10px 0; font-weight:600; text-underline-offset:3px; }
.foot .geo-switch{ grid-column:1 / -1; font-size:15px; }
.foot .geo-switch a{ display:inline-block; padding:10px 0; }
.copy{ grid-column:1 / -1; font-size:14px; color:#b8a68c; }
@media (max-width: 720px){ .foot-in{ grid-template-columns:1fr; } .foot-brand{ flex-direction:column; align-items:flex-start; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none!important; transition:none!important; }
  .os-marq span{ padding-left:0; }
}