/* Seventh Avenue Media · Direction C: "Seventh Avenue"
   A walk down a street of small businesses at dusk. Every shop window is a website. */

: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; } }

/* ---------- 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; }
.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; }
.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: before / after + wall quote
   ========================================================= */
.ed{ position:relative; padding:var(--sec) var(--pad); background-color:#4a1d1a;
  background-image:linear-gradient(180deg, rgba(28,11,25,.78), rgba(28,11,25,.35) 30%, rgba(28,11,25,.55) 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; }
.ed-wrap{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(36px, 5vw, 80px) clamp(36px, 5vw, 90px); align-items:start; }
.ed-head{ grid-column:1 / -1; max-width:900px; }
.ed h2{ font:900 clamp(44px, 6vw, 96px)/.9 var(--f-display); text-transform:uppercase; color:var(--cream); text-wrap:balance; }
.ed h2 span{ color:var(--sodium); }
.ed-head p{ margin-top:20px; font-size:clamp(17px, 1.3vw, 20px); max-width:38em; color:#f1dcc1; }
.ba{ margin:0; }
.ba-frame{ position:relative; padding:clamp(10px, 1.4vw, 18px); background:var(--bottle); box-shadow:inset 0 0 0 4px #0e2a1f, inset 0 0 0 7px #2f6e54, 0 26px 60px rgba(0,0,0,.55); border-radius:2px; }
.ba-frame:has(.ba-range:focus-visible){ outline:3px solid var(--sodium); outline-offset:5px; }
.ba-stage{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#000; }
.ba-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.ba-before{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--pos)) 0 0); }
.ba-before img{ filter:saturate(.85) brightness(.92); }
.ba-blind{ position:absolute; top:0; bottom:0; left:var(--pos); width:0; }
.ba-blind::before{ content:""; position:absolute; top:0; bottom:0; left:-5px; width:10px; background:linear-gradient(90deg, #0e2a1f, #3d8a69 50%, #0e2a1f); box-shadow:0 0 18px rgba(0,0,0,.6); }
.ba-pull{ position:absolute; left:50%; top:50%; width:52px; height:52px; transform:translate(-50%, -50%); border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffe7a8, #c18a2e 60%, #7a5216); box-shadow:0 4px 12px rgba(0,0,0,.5), inset 0 0 0 12px rgba(0,0,0,.0); }
.ba-pull::before, .ba-pull::after{ content:""; position:absolute; top:50%; width:0; height:0; border:7px solid transparent; transform:translateY(-50%); }
.ba-pull::before{ left:7px; border-right-color:#3a2408; } .ba-pull::after{ right:7px; border-left-color:#3a2408; }
.ba-lab{ position:absolute; top:14px; padding:7px 11px; font:700 14px/1 var(--f-body); background:#111; color:#fff; z-index:2; }
.ba-lab-b{ left:14px; } .ba-lab-a{ right:14px; background:var(--sodium); color:var(--ink); }
.ba-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; -webkit-appearance:none; appearance:none; }
.ba figcaption{ margin-top:16px; font-size:15px; color:#e8cfb2; }
.ba figcaption::before{ content:""; display:inline-block; width:22px; height:2px; background:var(--sodium); vertical-align:middle; margin-right:10px; }
.wall-quote{ margin:0; padding-top:clamp(0px, 2vw, 30px); }
.wq-big{ font:800 clamp(34px, 3.6vw, 58px)/.98 var(--f-display); text-transform:uppercase; color:#fbe6c0; text-shadow:0 2px 0 rgba(0,0,0,.35); text-wrap:balance; }
.wq-full{ margin-top:24px; 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); }
@media (max-width: 899px){ .ed-wrap{ grid-template-columns:1fr; } .ba-pull{ width:46px; height:46px; } }

/* =========================================================
   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; }
}

/* =========================================================
   PRICES: felt letter boards on a bottle-green tiled wall
   ========================================================= */
.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, 5fr) minmax(0, 7fr); gap:clamp(40px, 6vw, 100px); align-items:center; }
.prices h2{ font:900 clamp(44px, 5.4vw, 88px)/.9 var(--f-display); text-transform:uppercase; color:var(--cream); text-wrap:balance; }
.prices-copy > p{ margin-top:20px; font-size:clamp(17px, 1.3vw, 19px); color:#e6efe3; max-width:30em; }
.trust{ margin-top:26px; 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{ margin:28px 0 30px; padding-left:18px; border-left:3px solid var(--sodium); font-size:17px; color:#fff; max-width:30em; }
.prices-ed span{ display:block; margin-top:6px; font-size:14px; font-weight:700; color:var(--sodium); }
.boards{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(20px, 3vw, 44px); align-items:start; }
.lboard{ position:relative; margin-top:40px; padding:clamp(18px, 2vw, 28px) clamp(16px, 1.8vw, 26px) clamp(20px, 2vw, 28px);
  background:repeating-linear-gradient(180deg, #161515 0 7px, #0b0b0b 7px 9px); color:#f4f3ee;
  border:14px solid #7a5530; border-image:linear-gradient(135deg, #9a6d3c, #6a4322 40%, #8d6133 70%, #5a391c) 1;
  box-shadow:0 30px 50px rgba(0,0,0,.5); transform:rotate(-1.2deg); transform-origin:50% -40px; }
.lboard-2{ transform:rotate(1.4deg); margin-top:90px; }
.lboard::before{ content:""; position:absolute; left:50%; top:-54px; width:60%; height:42px; transform:translateX(-50%); border:2px solid #c9b48a; border-bottom:0; clip-path:polygon(50% 0, 100% 100%, 0 100%); background:transparent; }
.lboard::after{ content:""; position:absolute; left:50%; top:-60px; width:12px; height:12px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(circle at 35% 35%, #ffe7a8, #8a6420); }
.lb-title{ font:800 clamp(26px, 2.4vw, 36px)/1 var(--f-display); text-transform:uppercase; letter-spacing:.1em; padding-bottom:14px; margin-bottom:8px; border-bottom:2px solid rgba(255,255,255,.35); }
.lb-title small{ display:block; margin-top:6px; font-size:.5em; letter-spacing:.16em; opacity:.85; }
.lboard dl > div{ display:grid; grid-template-columns:1fr auto; align-items:baseline; padding:12px 0; }
.lboard dt{ display:flex; align-items:baseline; font:700 clamp(21px, 1.9vw, 28px)/1 var(--f-display); text-transform:uppercase; letter-spacing:.08em; }
.lboard dt::after{ content:""; flex:1; margin:0 10px; border-bottom:3px dotted rgba(255,255,255,.35); transform:translateY(-4px); }
.lboard dd[data-price]{ font:800 clamp(24px, 2.3vw, 34px)/1 var(--f-display); letter-spacing:.06em; color:#fff; }
.lb-sub{ grid-column:1 / -1; margin-top:6px; font:600 clamp(14px, 1.1vw, 17px)/1.2 var(--f-display); text-transform:uppercase; letter-spacing:.12em; color:#d9d7cf; }
.lb-foot{ margin-top:12px; padding-top:12px; border-top:2px solid rgba(255,255,255,.25); font:700 15px/1.3 var(--f-display); text-transform:uppercase; letter-spacing:.12em; color:#e9e7df; }
@media (max-width: 1099px){ .prices-wrap{ grid-template-columns:1fr; } }
@media (max-width: 640px){ .boards{ grid-template-columns:1fr; gap:10px; } .lboard-2{ margin-top:70px; } .lboard{ transform:rotate(-.8deg); } .lboard-2{ transform:rotate(.9deg); } }

/* =========================================================
   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; }
}