:root{
  --ink:#11172A;--ink-2:#171F36;--ink-3:#1F2946;
  --gold:#F7C948;--gold-2:#E3B233;--gold-soft:rgba(247,201,72,.16);
  --cream:#F4F1E8;--muted:#9AA3B8;--line:rgba(244,241,232,.14);
  --display:'League Spartan',system-ui,sans-serif;--sans:'DM Sans',system-ui,sans-serif;--hand:'Patrick Hand','Bradley Hand',cursive;
  --wrap:1180px;--gutter:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--gold)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.98;margin:0;letter-spacing:-.02em;color:#fff}
h2{font-size:clamp(36px,5.6vw,72px)}
h3{font-size:clamp(22px,2.3vw,28px);letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
header,main,footer{position:relative;z-index:1}
.progress{position:fixed;left:0;top:0;right:0;height:3px;z-index:30;background:transparent}
.progress span{display:block;height:100%;width:0;background:var(--gold)}
.kicker{font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--gold);margin-bottom:22px}
.hand{font-family:var(--hand);font-size:1.25em;color:var(--gold)}
.hand-lg{font-family:var(--hand);font-size:clamp(22px,2.4vw,30px);color:var(--gold);transform:rotate(-2deg);display:inline-block}

/* header */
header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px var(--gutter);position:sticky;top:0;z-index:20;background:rgba(17,23,42,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.01em}
.brand img{width:46px;height:46px;transition:transform .5s cubic-bezier(.2,1.4,.4,1)}
.brand:hover img{transform:rotate(180deg)}
nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);font-weight:700;font-size:15px}
nav a{text-decoration:none;color:var(--cream);position:relative;padding:6px 0}
nav a:not(.cta)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:right .3s}
nav a:not(.cta):hover::after{right:0}
.cta,.btn{display:inline-block;background:var(--gold);color:var(--ink);text-decoration:none;padding:14px 26px;border-radius:999px;font-weight:800;font-size:16px;border:0;cursor:pointer;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s;box-shadow:0 10px 30px -12px rgba(247,201,72,.6);will-change:transform;animation:heroGlow 3.2s ease-in-out infinite}
.cta::after,.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:rgba(255,255,255,.45);transform:skewX(-20deg);transition:left .6s}
.cta:hover::after,.btn:hover::after{left:120%}
.cta:hover,.btn:hover{box-shadow:0 16px 36px -12px rgba(247,201,72,.8)}
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:8px;cursor:pointer}
.burger span{display:block;height:3px;background:var(--gold);margin:8px 0;border-radius:2px}

/* hero */
.hero{max-width:var(--wrap);margin:0 auto;padding:clamp(60px,10vh,130px) var(--gutter) clamp(50px,8vh,90px);position:relative}
h1{font-size:clamp(50px,9.6vw,132px);max-width:11ch}
h1 .l1,h1 .l2{display:inline-block}
h1 .l2{color:var(--gold)}
h1 .ch{display:inline-block;will-change:transform,opacity}
h1 .w{display:inline-block;white-space:nowrap}
/* sized and set on the baseline to match the "o" it stands in for (measured ~0.53em in League Spartan
   Black at this weight), not the wider placeholder that used to leave a visible gap on both sides */
.coin{display:inline-block;width:.56em;height:.56em;vertical-align:-.02em;position:relative;cursor:pointer;touch-action:manipulation}
.coin canvas{position:absolute;inset:-30%;width:160%;height:160%}
.lede{font-size:clamp(18px,1.6vw,22px);max-width:58ch;margin:30px 0 32px;color:var(--cream)}
.gold-em{color:var(--gold);font-weight:800}
.hand-mark{background:none;color:inherit;position:relative;white-space:nowrap}
.hand-mark::before{content:"";position:absolute;left:-.1em;right:-.1em;top:.5em;bottom:-.05em;background:var(--gold);opacity:.55;z-index:-1;transform:scaleX(var(--mark,1));transform-origin:left center;transition:transform .9s cubic-bezier(.2,.9,.3,1);border-radius:3px 6px 4px 5px}
.hero-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero-actions .btn{animation:heroGlow 3.2s ease-in-out infinite}
@keyframes heroGlow{0%,100%{box-shadow:0 14px 38px -10px rgba(247,201,72,.75)}50%{box-shadow:0 20px 56px -8px rgba(247,201,72,1)}}
/* hero-lemon: real whole lemons, sized and scattered into whatever dead space actually exists in
   that hero (checked against real screenshots, not guessed) - each one tappable, each spins fast
   on tap and eases back to its own idle bob. Desktop only; mobile has no spare width for them. */
.hero-lemons{display:none;pointer-events:none}
.hero-lemon{position:absolute;pointer-events:auto;cursor:pointer}
.hero-lemon canvas{position:absolute;inset:-25%;width:150%;height:150%}
@media(min-width:1024px){
  .hero-lemons{display:block;position:absolute;inset:0;z-index:0}
  .hero .hero-lemons .hero-lemon[data-size="1"]{right:27%;top:5%;width:60px;height:60px}
  .hero .hero-lemons .hero-lemon[data-size="2"]{right:20%;top:38%;width:118px;height:118px}
  .hero .hero-lemons .hero-lemon[data-size="3"]{right:4%;top:62%;width:56px;height:56px}
}
@media(min-width:1024px){
  .page-hero .hero-lemons .hero-lemon[data-size="1"]{right:12%;top:12%;width:96px;height:96px}
  .page-hero .hero-lemons .hero-lemon[data-size="2"]{right:2%;top:52%;width:60px;height:60px}
  .work-hero .hero-lemons .hero-lemon[data-size="3"]{right:26%;top:66%;width:46px;height:46px;display:block}
  /* the services page-hero is a lot taller than the others (it holds the whole tree+basket
     picker), so the generic two-lemon spread leaves the lower half of it empty - spread more
     lemons down the full height instead of just adding decoration to the part that was already
     covered. */
  .page-hero .svc-hero-lemons .hero-lemon[data-size="1"]{right:16%;top:8%;width:80px;height:80px}
  .page-hero .svc-hero-lemons .hero-lemon[data-size="2"]{right:4%;top:30%;width:110px;height:110px}
  .page-hero .svc-hero-lemons .hero-lemon[data-size="3"]{right:20%;top:58%;width:56px;height:56px;display:block}
  .page-hero .svc-hero-lemons .hero-lemon[data-size="4"]{right:6%;top:80%;width:70px;height:70px;display:block}
}
.one-partner-lemons .hero-lemon{display:block}
@media(prefers-reduced-motion:reduce){.hero-actions .btn{animation:none}}
.tel{text-decoration:none;color:#fff;font-family:var(--display);font-weight:800;font-size:clamp(22px,2.2vw,28px);display:inline-flex;flex-direction:column;line-height:1.1}
.tel .hand{font-size:18px;font-family:var(--hand);font-weight:400}
.sticky{position:absolute;right:var(--gutter);top:clamp(40px,10vh,120px);width:210px;margin:0;padding:22px 20px 18px;background:#FFE86B;color:#2b2408;font-family:var(--hand);font-size:23px;line-height:1.15;transform:rotate(6deg);box-shadow:0 18px 30px -14px rgba(0,0,0,.6);cursor:grab;user-select:none;will-change:transform}
.sticky span{display:block}
.sticky small{display:block;font-size:16px;margin-top:8px;opacity:.75}
.sticky::before{content:"";position:absolute;left:50%;top:-10px;width:70px;height:22px;margin-left:-35px;background:rgba(255,255,255,.45);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.1)}

/* offer */
.offer{padding-top:clamp(60px,9vh,120px);padding-bottom:clamp(40px,5vh,56px);position:relative}
.offer h2{max-width:14ch;margin-bottom:clamp(30px,5vh,56px)}
.deal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,50px);border-top:1px solid var(--line);padding-top:28px}
.num{position:relative}
/* the circle used to be positioned with a % offset off ".num" (a grid column that is a different
   width at every breakpoint - a third of the row on desktop, the full row on phone), so at mobile
   it drifted off the left edge of the screen while the number stayed put; the font also scaled on
   its own clamp (9vw) independent of the circle's (12vw), so "$50" ran past the circle's right edge
   on every desktop width. Both now live inside one badge box they share, sized once. */
.num-badge{position:relative;display:inline-flex;align-items:center;justify-content:center;width:clamp(96px,12vw,180px);height:clamp(96px,12vw,180px);margin-bottom:8px}
.num-badge .circ{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.num-badge .circ path{fill:none;stroke:var(--gold);stroke-width:3;opacity:.4;stroke-linecap:round;stroke-dasharray:560;stroke-dashoffset:560;transition:stroke-dashoffset 1.15s cubic-bezier(.2,.8,.3,1)}
.num.in .num-badge .circ path{stroke-dashoffset:0}
.num .big{font-family:var(--display);font-weight:900;font-size:clamp(40px,5.6vw,76px);line-height:.9;color:var(--gold);display:flex;align-items:flex-start;gap:2px}
.num .big sup{font-size:.35em;margin-top:.25em}
.num .lbl{display:block;font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);margin:10px 0 8px}
.num p{margin:0;color:var(--muted)}
.incl{list-style:none;padding:0;margin:clamp(30px,5vh,56px) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px 30px}
.incl li{padding:12px 0 12px 46px;position:relative;border-bottom:1px solid var(--line);opacity:0;transform:translateY(18px) scale(.94);transition:opacity .6s ease,transform .7s cubic-bezier(.2,1.5,.3,1)}
.incl.in li{opacity:1;transform:none}
.incl.in li:nth-child(1){transition-delay:.02s}.incl.in li:nth-child(2){transition-delay:.1s}.incl.in li:nth-child(3){transition-delay:.18s}
.incl.in li:nth-child(4){transition-delay:.26s}.incl.in li:nth-child(5){transition-delay:.34s}.incl.in li:nth-child(6){transition-delay:.42s}
.incl li .ic-badge{position:absolute;left:0;top:6px;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(247,201,72,.32),rgba(247,201,72,.1) 70%);box-shadow:0 0 0 1px rgba(247,201,72,.25) inset}
.incl.in li .ic-badge{animation:iconBadgePulse 3.4s ease-in-out infinite}
.incl.in li:nth-child(2) .ic-badge{animation-delay:.4s}.incl.in li:nth-child(3) .ic-badge{animation-delay:.8s}
.incl.in li:nth-child(4) .ic-badge{animation-delay:1.2s}.incl.in li:nth-child(5) .ic-badge{animation-delay:1.6s}.incl.in li:nth-child(6) .ic-badge{animation-delay:2s}
@keyframes iconBadgePulse{0%,100%{box-shadow:0 0 0 1px rgba(247,201,72,.25) inset,0 0 0 0 rgba(247,201,72,0)}50%{box-shadow:0 0 0 1px rgba(247,201,72,.4) inset,0 0 14px 2px rgba(247,201,72,.35)}}
.incl li .ic{position:absolute;left:6px;top:12px;width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.incl li .ic .dot{fill:var(--gold);stroke:none}
@media(prefers-reduced-motion:reduce){.incl.in li .ic-badge{animation:none}}
.fine{margin-top:24px;color:var(--muted);max-width:70ch}
.fine strong{color:var(--gold)}

/* work: the fan of browser cards */
.work{padding:clamp(40px,7vh,90px) 0 clamp(40px,5vh,56px);overflow:hidden}
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.work-head h2{max-width:14ch}
.fan{position:relative;height:clamp(380px,46vw,620px);max-width:1200px;margin:0 auto}
.card{position:absolute;left:50%;top:50%;width:clamp(230px,30vw,400px);background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 30px 50px -22px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3);transform-origin:50% 120%;text-decoration:none;color:var(--ink);will-change:transform;cursor:grab;user-select:none;-webkit-user-drag:none}
.on-phone{display:none}
.card img{width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;object-position:50% 0;pointer-events:none}  /* height:auto or the width/height attributes beat aspect-ratio and object-fit crops the middle of each site */
.card .chrome{display:flex;align-items:center;gap:5px;padding:8px 10px;background:#ECEEF3;font-size:12px;color:#556}
.card .chrome i{width:9px;height:9px;border-radius:50%;background:#d6d9e0}
.card .chrome i:nth-child(1){background:#ff5f57}.card .chrome i:nth-child(2){background:#febc2e}.card .chrome i:nth-child(3){background:#28c840}
.card .chrome em{font-style:normal;margin-left:8px;background:#fff;border-radius:6px;padding:2px 10px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .tag{display:block;padding:10px 12px;font-weight:700;font-size:14px;background:#fff}
.card.lift{z-index:9;box-shadow:0 50px 70px -24px rgba(0,0,0,.8)}

/* how */
.how{padding:clamp(60px,9vh,120px) 0;background:var(--ink-2)}
.how h2{max-width:14ch}
.typed{font-family:var(--hand);font-size:clamp(24px,3vw,38px);color:var(--gold);margin:18px 0 clamp(30px,5vh,56px);min-height:1.4em}
.caret{display:inline-block;width:.08em;height:1em;background:var(--gold);vertical-align:-.15em;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.steps li{border-top:2px solid var(--gold);padding-top:22px;position:relative}
.steps .n{font-family:var(--display);font-weight:900;font-size:64px;line-height:1;color:var(--gold);display:block;margin-bottom:8px}
.steps h3{margin-bottom:10px}
.steps p{margin:0;color:var(--muted)}

/* about: the portrait bleeds off the frame */
.about{display:grid;grid-template-columns:minmax(300px,44%) 1fr;gap:clamp(30px,5vw,80px);align-items:center;max-width:var(--wrap);margin:0 auto;padding:clamp(40px,7vh,100px) var(--gutter)}
.portrait{margin:0;position:relative;height:clamp(460px,60vw,760px);overflow:visible}
.portrait img{position:absolute;left:-6%;bottom:-30px;width:112%;height:114%;object-fit:cover;object-position:50% 35%;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);will-change:transform}
.about-copy h2{margin-bottom:22px}
.about-copy p{color:var(--cream)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:28px 0;border-top:1px solid var(--line);padding-top:20px}
.stats b{font-family:var(--display);font-weight:900;font-size:clamp(40px,4.5vw,64px);line-height:1;color:var(--gold);display:block}
.stats span:not(b span){font-size:14px;color:var(--muted);display:block;margin-top:6px}
.dt{color:var(--muted)}
.dt a{white-space:nowrap}

/* kind words: sticky notes on a moving strip */
.words{padding:clamp(60px,9vh,110px) 0 clamp(40px,6vh,80px);overflow:hidden}
.words h2{margin-bottom:24px}
.strip{overflow:hidden;padding:30px 0 40px}
.track{display:flex;gap:28px;padding-right:28px;width:max-content;animation:slide var(--dur,60s) linear infinite}
.strip:hover .track,.strip.held .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.note{margin:0;width:min(330px,78vw);flex:none;background:#FFE86B;color:#2b2408;padding:26px 24px 22px;font-family:var(--hand);font-size:21px;line-height:1.2;transform:rotate(var(--r,-2deg));box-shadow:0 18px 30px -14px rgba(0,0,0,.6);position:relative;transition:transform .35s}
.note:nth-child(even){background:#FFD54F;--r:2deg}
.note:nth-child(3n){background:#F9E79F}
.note:hover{transform:rotate(0) scale(1.04)}
.note::before{content:"";position:absolute;left:50%;top:-10px;width:70px;height:22px;margin-left:-35px;background:rgba(255,255,255,.45);transform:rotate(-3deg)}
.note blockquote{margin:0 0 12px;quotes:none}
.note figcaption{font-family:var(--sans);font-size:13px;font-weight:700;opacity:.7}

/* contact over the dark map */
.contact{position:relative;padding:clamp(70px,10vh,130px) 0;overflow:hidden;background:#0d1224}
.map{position:absolute;inset:0;overflow:hidden}
.map img{position:absolute;left:50%;top:50%;width:max(1400px,120vw);height:auto;transform:translate(-50%,-50%);opacity:.9;will-change:transform}
.map::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 30% 50%,rgba(13,18,36,.2),rgba(13,18,36,.9))}
.pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3}
.car{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.see-more{text-align:center;margin-top:clamp(6px,1.2vh,16px)}
.pin span{display:block;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(247,201,72,.35);position:relative}
.pin span::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(3.2);opacity:0}}
/* the car's own route ends at this same pin, so the label needs its own halo to stay legible
   even with the gold car parked right beside it, not just contrast against the map */
.pin b{position:absolute;left:22px;top:-6px;font-family:var(--hand);font-size:20px;color:var(--gold);white-space:nowrap;text-shadow:0 0 8px #0d1224,0 0 8px #0d1224,0 2px 5px #0d1224;z-index:4}
.contact-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:start}
.big-tel a{font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,72px);color:#fff;text-decoration:none;letter-spacing:-.02em;line-height:1}
.lines{color:var(--muted)}
form{background:rgba(23,31,54,.85);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,3vw,32px);backdrop-filter:blur(6px)}
form label{display:block;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
form input,form select,form textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;color:#fff;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(17,23,42,.8);transition:border-color .2s}
form input:focus,form select:focus,form textarea:focus{outline:0;border-color:var(--gold)}
form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F7C948' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
form select option{color:#111}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.form-note{margin:14px 0 0;font-weight:700;color:var(--gold);min-height:1.4em}

/* footer */
footer{padding:clamp(40px,6vh,70px) var(--gutter);display:flex;gap:24px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line)}
footer p{margin:0}
footer .credit{margin-left:auto;font-size:13px;color:var(--muted)}
footer .press-link{margin-left:12px;font-size:13px}
footer .press-link a{color:var(--muted)}
@media(max-width:640px){footer .press-link{margin-left:0}}

/* ---------- dividers: a lemon rolls between every section, leaving a wedge trail ---------- */
.divider{position:relative;height:clamp(58px,7vw,90px);overflow:hidden;z-index:1}
.divider canvas{display:block;width:100%;height:100%}

/* ---------- the music control: fixed bottom-right, honest about what it does ---------- */
.music-toggle{position:fixed;right:16px;bottom:16px;z-index:45;display:inline-flex;align-items:center;gap:8px;min-height:44px;background:rgba(23,31,54,.88);color:var(--cream);border:1px solid var(--line);border-radius:999px;padding:12px 16px 12px 12px;font:600 13px var(--sans);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 14px 30px -16px rgba(0,0,0,.65);transition:background .25s,border-color .25s,color .25s,opacity .4s}
.music-toggle:hover,.music-toggle[aria-pressed=true]{background:rgba(247,201,72,.16);border-color:var(--gold);color:var(--gold)}
.music-toggle.scrolling{opacity:.32}
.music-toggle:hover.scrolling{opacity:1}
.music-ic{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.music-bars{display:none;align-items:flex-end;gap:2px;height:12px;flex:none}
.music-toggle.playing .music-bars{display:inline-flex}
.music-bars i{width:2.5px;background:currentColor;border-radius:1px;animation:mbar 1s ease-in-out infinite}
.music-bars i:nth-child(1){height:5px;animation-delay:-.6s}.music-bars i:nth-child(2){height:10px;animation-delay:-.3s}.music-bars i:nth-child(3){height:7px}
@keyframes mbar{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@media (max-width:760px){.music-toggle{right:12px;bottom:12px;padding:12px 14px 12px 12px;font-size:12px}.music-txt{display:none}}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.track{animation:none}.strip{overflow-x:auto;scroll-snap-type:x mandatory}.note{scroll-snap-align:center}.car{display:none}.pin span::after{animation:none}.caret{animation:none}.music-bars i{animation:none}}
@media (max-width:980px){
  .deal,.incl,.steps,.stats{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  /* the photo bled left but stopped 37px short on the right: width:112% was clamped by max-width:100%.
     On a phone make it a true full-bleed instead - edge to edge, no sideways scroll. */
  .portrait{height:clamp(380px,90vw,560px);margin-left:calc(var(--gutter)*-1);margin-right:calc(var(--gutter)*-1)}
  .portrait img{left:0;width:100%;max-width:none}
  .contact-grid{grid-template-columns:1fr}
  .sticky{position:static;transform:rotate(-3deg);margin:34px 0 0;width:200px}
}
@media (max-width:760px){
  /* the nav dropdown used to be only as tall as its own links, so the hero content underneath
     showed through below it (two gold CTAs stacked, looked like a duplicate button) - it is now a
     full-screen opaque panel and the brand/burger stay above it so the menu can still be closed */
  .brand,.burger{position:relative;z-index:2}
  nav{display:none;position:fixed;top:0;left:0;right:0;height:100vh;z-index:1;background:var(--ink);flex-direction:column;align-items:flex-start;justify-content:center;padding:96px var(--gutter) 28px;gap:18px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  header.open nav{display:flex}
  html.nav-open,html.nav-open body{overflow:hidden}
  .burger{display:block}
  .brand span{display:none}
  .two{grid-template-columns:1fr;gap:0}
  /* the fan overlapped the heading and ran off both edges on a phone: make it a swipeable row */
  .work{scroll-margin-top:88px}
  .work-head{margin-bottom:18px}
  .fan{height:auto;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:6px var(--gutter) 16px;scrollbar-width:none}
  .fan::-webkit-scrollbar{display:none}
  .on-wide{display:none}.on-phone{display:inline}
  .card{position:static;flex:0 0 auto;width:min(78vw,300px);scroll-snap-align:center;transform:none!important;cursor:pointer}
  .note{width:min(270px,74vw);font-size:18px}
  .track{gap:18px;padding-right:18px}
  footer .credit{margin-left:0}
  .map img{width:1400px}
}

/* ---------- the lemonade stand ---------- */
.lemonade{padding:clamp(60px,9vh,120px) 0 clamp(40px,6vh,80px);position:relative;overflow:hidden}
.lemon-head h2{font-size:clamp(34px,4.8vw,64px);max-width:16ch}
.lemon-head h2 .w{display:inline-block;white-space:nowrap}
.lemon-sub{color:var(--muted);margin:18px 0 0;font-size:18px}
.stand{position:relative;margin-top:28px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(120% 90% at 50% 100%,rgba(247,201,72,.10),transparent 60%),var(--ink-2);overflow:hidden}
#stand{display:block;width:100%;height:clamp(300px,40vw,540px);touch-action:none;cursor:default}
/* the whole game area: a long press must never select it or raise the iOS callout */
.stand,.stand *{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.stand-ui{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;pointer-events:none}
.tally{font-family:var(--hand);font-size:20px;color:var(--gold)}
.tally b{font-family:var(--display);font-weight:900;font-size:26px;color:#fff;display:inline-block;min-width:1.2em}
.sound{pointer-events:auto;margin-left:auto;background:transparent;color:var(--cream);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font:600 14px var(--sans);cursor:pointer;transition:background .25s,border-color .25s}
.sound:hover,.sound[aria-pressed=true]{background:rgba(247,201,72,.12);border-color:var(--gold);color:var(--gold)}
.lemon-foot{margin:26px 0 0;max-width:56ch;font-size:18px;opacity:0;transform:translateY(20px);transition:opacity .7s,transform .8s cubic-bezier(.2,1.4,.35,1)}
.lemon-cta{margin:20px 0 0;opacity:0;transform:translateY(20px);transition:opacity .7s .1s,transform .8s .1s cubic-bezier(.2,1.4,.35,1)}
.lemon-cta .btn{padding:13px 24px;font-size:16px}
.lemonade.poured .lemon-foot,.lemonade.poured .lemon-cta{opacity:1;transform:none}
@media (max-width:760px){
  #stand{height:clamp(280px,74vw,400px)}
  .stand-ui{position:static;flex-direction:column;align-items:flex-start;padding:18px 16px 20px;gap:18px;border-top:1px solid var(--line)}
  .tally{font-size:17px}.tally b{font-size:22px}
  .sound{margin-left:0;padding:10px 16px;font-size:14px}
  .lemon-foot{margin-top:24px}
  .lemon-cta{margin-top:20px}
  .lemon-cta .btn{display:block;width:100%;text-align:center}
}

/* ---------- click a card, the site opens full length and scrolls ---------- */
.card{cursor:pointer}
.shot{position:fixed;inset:0;z-index:60;background:rgba(6,10,20,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:clamp(10px,3vw,40px)}
.shot.on{display:flex}
.shot-win{width:min(900px,100%);max-height:100%;display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)}
.shot-bar{flex:none;display:flex;align-items:center;gap:6px;padding:9px 12px;background:#ECEEF3;color:#11172A;font-size:13px;font-weight:700}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:#d6d9e0;flex:none}
.shot-bar i:nth-child(1){background:#ff5f57}.shot-bar i:nth-child(2){background:#febc2e}.shot-bar i:nth-child(3){background:#28c840}
.shot-bar b{margin-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shot-close{margin-left:auto;flex:none;width:30px;height:30px;border:0;border-radius:50%;background:#fff;color:#11172A;font-size:20px;line-height:1;cursor:pointer}
.shot-close:hover{background:#11172A;color:#fff}
.shot-body{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:#fff;overscroll-behavior:contain}
.shot-body img{display:block;width:100%;height:auto}
html.shot-open,html.shot-open body{overflow:hidden}
@media (max-width:760px){.shot{padding:0}.shot-win{border-radius:0;height:100%}}