:root{
  --paper:#FAF4E9; --cream:#F3ECDD; --card:#FFFEF9;
  --ink:#121410; --ink-soft:rgba(18,20,16,.72);
  --green:#71A15E; --acid:#A3F14F; --green-pale:#E4EED9;
  --blush:#F5E5EA; --pinklabel:#F0D8DE;
  --flame:#C45628; --flame2:#F18B4F;
  --line:rgba(18,20,16,.16);
  --disp:'Anton',Impact,sans-serif; --script:'Yellowtail',cursive; --sans:'Jost',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}.track{animation:none}.strip{overflow-x:auto}}

/* nav: crisp white bar, green CTA */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:12px 4vw;background:rgba(253,251,246,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .badge img{height:56px;width:auto}
.nav .links{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);font-size:14px;letter-spacing:.04em;font-weight:500}
.nav .links a:not(.cta){transition:color .3s}
.nav .links a:not(.cta):hover{color:var(--green)}
.nav .cta{background:var(--green);color:#FFFEF9;font-weight:600;padding:11px 20px;border-radius:999px;white-space:nowrap;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.nav .cta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* hero: giant type interleaved with the cut-out drink, poster maximalism */
.hero{position:relative;min-height:90svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--paper)}
.hero .wm{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;z-index:0;pointer-events:none;overflow:hidden}
.hero .wm span{font-family:var(--disp);text-transform:uppercase;line-height:.84;letter-spacing:.02em;color:var(--paper);
  text-shadow:-2px -2px 2px rgba(31,46,23,.10), 2px 3px 3px rgba(255,255,255,.9), 0 0 1px rgba(31,46,23,.05)}
.hero .wm .w1{font-size:clamp(120px,27vw,400px)}
.hero .wm .w2{font-size:clamp(100px,22.5vw,335px)}
.hero .inner{position:relative;z-index:1;width:100%;max-width:1100px;margin:0 auto;padding:14svh 5vw 6svh;text-align:center}
.hero .chips{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.hero .chip{background:var(--card);border:2px solid var(--ink);font-family:var(--sans);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;padding:8px 15px;border-radius:999px;box-shadow:3px 3px 0 var(--ink)}
.hero .chip:nth-child(1){transform:rotate(-3deg);background:var(--pinklabel)}
.hero .chip:nth-child(2){transform:rotate(2deg)}
.hero .chip:nth-child(3){transform:rotate(-1.5deg);background:var(--acid)}
.hero h1{font-family:var(--disp);font-weight:400;text-transform:uppercase;color:var(--ink);line-height:.92;margin:0}
.hero h1 .l1{display:block;font-size:clamp(54px,8.4vw,124px);letter-spacing:.015em;position:relative;z-index:1}
.hero h1 .l2{display:block;font-family:var(--script);font-size:clamp(64px,10vw,150px);text-transform:none;letter-spacing:0;color:var(--green);position:relative;z-index:3;margin-top:.02em;line-height:1.05}
.hero .drinkwrap{display:flex;justify-content:center;align-items:flex-start;height:86px;position:relative;z-index:2}
.hero img.drink{position:relative;top:-40px;transform:rotate(-4deg);width:clamp(280px,26vw,360px);height:clamp(140px,13vw,180px);object-fit:cover;object-position:center 40%;border-radius:999px;border:3px solid var(--ink);box-shadow:9px 9px 0 var(--ink);align-self:flex-start;max-width:none}
.hero .stamp{position:absolute;right:max(4vw,calc(50% - 470px));top:34svh;z-index:4;background:var(--pinklabel);border:2px solid var(--ink);color:var(--ink);font-family:var(--disp);text-transform:uppercase;font-size:15px;letter-spacing:.05em;padding:13px 18px;border-radius:999px;transform:rotate(9deg);box-shadow:4px 4px 0 var(--ink)}
.hero p.lede{margin:26px auto 0;max-width:560px;font-size:17.5px;color:var(--ink-soft)}
.hero .row{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.kicker{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:16px}
.hero h1{font-family:var(--disp);font-weight:400;font-size:clamp(52px,6.6vw,104px);line-height:.96;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--green)}
.hero p.lede{margin-top:18px;font-size:17.5px;color:var(--ink-soft)}
.hero .row{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#FFFEF9;font-weight:600;font-size:15px;padding:15px 28px;border-radius:999px;border:2px solid var(--ink);cursor:pointer;font-family:var(--sans);box-shadow:5px 5px 0 var(--ink);transition:transform .2s,box-shadow .2s,background .3s}
.btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn.ghost:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}

/* marquee ribbon */
.ribbon{background:var(--ink);color:var(--paper);overflow:hidden;padding:16px 0;border-bottom:1px solid rgba(250,244,233,.14)}
.ribbon .rtrack span:nth-child(even){color:var(--acid)}
.ribbon .rtrack{display:flex;gap:0;white-space:nowrap;animation:marquee 48s linear infinite;width:max-content;flex:0 0 auto}
.ribbon span{font-family:var(--disp);font-size:17px;letter-spacing:.14em;text-transform:uppercase;padding:0 18px}

/* page hero (interior) */
/* Taller on desktop, 14 Sep. At 52svh the banner was 1440x468, and James's portrait phone
   photos lost 82% of the frame to the crop. Mobile was already fine: at phone width 52svh is
   nearly square, so only about a third is lost. This raises the desktop height only. */
.phero{position:relative;min-height:52svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--cream)}
@media (min-width:900px){ .phero{min-height:78svh} }
.phero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,51,24,.16),transparent 45%,rgba(253,251,246,.9) 92%,var(--paper))}
.phero .inner{position:relative;z-index:2;max-width:1240px;margin:0 auto;width:100%;padding:16svh 5vw 5svh}
.phero h1{font-family:var(--disp);font-weight:400;font-size:clamp(38px,5.4vw,74px);line-height:1;color:var(--paper);text-transform:uppercase;letter-spacing:.01em;text-shadow:4px 4px 0 rgba(35,51,24,.55)}
.phero .kicker{background:rgba(253,251,246,.94);display:inline-block;padding:8px 16px;border-radius:999px;border:1px solid var(--line);margin-bottom:12px}

/* sections */
.wrap{max-width:1240px;margin:0 auto;padding:0 5vw}
section.pad{padding-block:84px}
h2.sec{font-family:var(--disp);font-weight:400;font-size:clamp(30px,4vw,54px);line-height:1.04;margin-bottom:16px;color:var(--ink);text-transform:uppercase;letter-spacing:.01em}
h2.sec em{font-family:var(--script);font-style:normal;text-transform:none;color:var(--green);font-size:1.12em;letter-spacing:0}
p.sub{color:var(--ink-soft);max-width:620px;font-size:17px}

/* marquee */
.strip{display:flex;overflow:hidden;padding:10px 0}
.strip.tilt{transform:rotate(-2deg) scale(1.04)}
.track{display:flex;gap:18px;padding-right:18px;flex:0 0 auto;animation:marquee 55s linear infinite}
@keyframes marquee{to{transform:translateX(-50%)}}
.strip:hover .track{animation-play-state:paused}
.track img{height:250px;width:auto;object-fit:cover;border-radius:14px;border:2px solid rgba(31,46,23,.85);box-shadow:5px 5px 0 rgba(31,46,23,.18)}
.track .f:nth-child(even) img{height:215px;margin-top:32px}

/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.card{background:var(--card);border:2px solid var(--ink);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:7px 7px 0 var(--ink);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.grid3 .card:nth-child(1){background:var(--card)}
.grid3 .card:nth-child(2){background:var(--blush)}
.grid3 .card:nth-child(3){background:var(--card)}
.card:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 var(--ink)}
.card img{height:230px;width:100%;object-fit:cover;border-bottom:2px solid var(--ink)}
.card .body{padding:24px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-family:var(--disp);font-weight:400;font-size:22px;color:var(--ink);text-transform:uppercase;letter-spacing:.02em}
.card p{color:var(--ink-soft);font-size:15px;flex:1}
.card .link{color:var(--green);font-weight:600;font-size:14px;letter-spacing:.04em}
.card:hover .link{color:var(--copper)}

/* split */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.split .im{border-radius:160px 160px 18px 18px;overflow:hidden;border:2px solid var(--ink);box-shadow:9px 9px 0 var(--ink)}
.split .im img{width:100%;height:520px;object-fit:cover}
/* Broadened off .split on 11 Sep. The tick styling only applied inside a split, so every
   ticks list on a service page rendered as plain browser bullets. Same look, now anywhere. */
ul.ticks{margin-top:18px;list-style:none;display:grid;gap:10px}
ul.ticks li{padding-left:26px;position:relative;color:var(--ink-soft)}
ul.ticks li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:7px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.tile{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:20px 20px 18px;box-shadow:5px 5px 0 var(--ink);transition:transform .3s,box-shadow .3s;display:flex;align-items:center;gap:16px}
/* A photo per service, so the tile shows what it is before anyone clicks. */
.tile .t-in{min-width:0}
.tile img{flex:none;width:92px;height:92px;object-fit:cover;object-position:center 32%;border:2px solid var(--ink);border-radius:10px;order:2}
@media(min-width:900px){.tile img{width:118px;height:118px}}
.tile:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink);background:var(--blush)}
.tile h3{font-family:var(--disp);font-weight:400;font-size:19px;margin-bottom:6px;color:var(--ink);text-transform:uppercase;letter-spacing:.02em}
.tile p{color:var(--ink-soft);font-size:14px;margin-bottom:10px}
.tile .link{color:var(--green);font-weight:600;font-size:13.5px}

/* greenbach band: green + pink, like the bottles */
.gb{background:var(--pinklabel)}
.gb .split .im img{height:440px}

/* CTA band */
.ctaband{text-align:center;padding:96px 5vw;background:var(--blush)}
.ctaband h2{font-family:var(--disp);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1.02;color:var(--ink);text-transform:uppercase}
.ctaband h2 em{font-family:var(--script);font-style:normal;text-transform:none;color:var(--green);font-size:1.15em}
.ctaband p{margin:16px auto 30px;color:var(--ink-soft);max-width:480px}

/* prose */
.prose{max-width:720px}
.prose p{margin-bottom:18px;color:var(--ink-soft);font-size:17px}
.prose p strong{color:var(--ink)}

/* form */
form.enq{max-width:640px;display:grid;gap:16px;margin-top:36px}
.enq label{font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--ink-soft)}
.enq input,.enq textarea{width:100%;margin-top:7px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--ink);font-family:var(--sans);font-size:16px}
.enq input:focus,.enq textarea:focus{outline:none;border-color:var(--green)}
.enq .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* footer */
footer{border-top:1.5px solid var(--line);padding:64px 5vw 34px;background:var(--cream)}
footer .cols{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:start}
footer .badge img{height:92px;width:auto;margin-bottom:14px}
/* Media reel on the service pages. The gallery page went on 10 Sep: seagey's call was
   that every option should carry its own clips and photos instead, so each service
   page gets a horizontal reel of the real nights that match it. Portrait cards by
   default; .wide for landscape group shots so nobody's head gets cropped. */
.mediareel{padding:0 0 84px}
.mediareel .wrap{padding-bottom:20px}
.mreel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 5vw 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mreel::-webkit-scrollbar{display:none}
.mreel figure{flex:0 0 clamp(200px,22vw,300px);aspect-ratio:9/16;margin:0;position:relative;scroll-snap-align:start;
  border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:#0A0806;box-shadow:5px 5px 0 var(--ink);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1)}
.mreel figure.wide{flex-basis:clamp(280px,34vw,440px);aspect-ratio:4/3}
.mreel figure:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.mreel video,.mreel img{width:100%;height:100%;object-fit:cover;display:block}
.mreel figure.wide img{object-position:50% 35%}
.mreel .hint{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}

/* Instagram on the home page. Instagram's own profile embed in a plain iframe: his
   header and last six posts, no token, no widget, and it updates when he posts. */
.ig{max-width:900px;margin:32px auto 0;border:2px solid var(--ink);border-radius:18px;overflow:hidden;box-shadow:6px 6px 0 var(--ink);background:#fff}
.ig iframe{display:block;width:100%;height:clamp(560px,82vw,780px);border:0}

/* Footer column labels. They were h4s under an h2, which skipped a level on every page
   and put "Explore" into the document outline as if it were a section. They label link
   lists, so they are not headings at all now. Same look. */
footer .flabel{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 14px;font-weight:600}
footer a.fl{display:block;margin-bottom:9px;font-size:15px;color:var(--ink);opacity:.85;transition:color .3s}
footer a.fl:hover{color:var(--green)}
footer .base{max-width:1240px;margin:44px auto 0;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-soft)}

/* waves */
.wave{display:block;width:100%;line-height:0}
.wave svg{display:block;width:100%;height:clamp(40px,6vw,84px)}

@media (max-width: 920px){
  .nav{padding:10px 4vw}
  .nav .badge img{height:46px}
  .nav .links{gap:12px;font-size:12.5px}
  .nav .links a.hidemob{display:none}
  .grid3,.tiles{grid-template-columns:1fr}
  .split,.split.rev{grid-template-columns:1fr;gap:28px}
  .split .im img{height:340px}
  .track img{height:180px}
  .track .f:nth-child(even) img{height:158px;margin-top:22px}
  .enq .two{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr;gap:28px}
  .hero{min-height:auto}
  .hero .inner{padding-top:15svh;padding-bottom:9svh}
  .hero .wm span{text-shadow:-1px -1px 1px rgba(31,46,23,.09), 1px 2px 2px rgba(255,255,255,.85)}
  .hero .drinkwrap{height:auto;justify-content:center;padding:10px 0 6px}
  .hero img.drink{position:static;top:0;width:min(260px,74vw);height:124px;box-shadow:6px 6px 0 var(--ink)}
  .hero .stamp{position:static;display:inline-block;margin-top:14px;transform:rotate(-2deg);font-size:12px;padding:9px 14px}
  .hero .chips{gap:8px}
  .hero .chip{font-size:10.5px;padding:6px 11px}
}


/* ============================================================================
   HERO, three clips. 90svh as asked: svh not vh, because on iOS vh is the tallest
   the viewport ever gets, so a 90vh hero is actually taller than the visible screen
   once the browser chrome is showing.
   ============================================================================ */
.tri{position:relative;height:95svh;min-height:520px;background:#0A0806;overflow:hidden;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;isolation:isolate}
.tri .col{position:relative;overflow:hidden;background:#0A0806}
.tri video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tri .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 14px 18px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#FFFCF5;opacity:.9}
.tri .cap b{display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(14px,1.4vw,19px);letter-spacing:.03em;margin-bottom:2px}
.tri .tri-meta{position:absolute;z-index:4;left:0;right:0;bottom:0;display:none;
  justify-content:space-between;padding:0 5vw 20px;color:rgba(255,252,245,.8);
  font-size:10px;letter-spacing:.22em;text-transform:uppercase}

/* The mark and its entrance: staged, the block name lands then the script signs itself
   underneath a beat later. Both start low and blurred so they resolve rather than appear. */
.tri .mark{position:absolute;z-index:4;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;color:#FFFCF5;pointer-events:none;margin:0}
.tri .mark span,.tri .mark em{display:block;opacity:0;transform:translateY(26px);filter:blur(9px)}
.tri .mark span{font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(40px,10vw,152px);line-height:.86;text-shadow:0 4px 44px rgba(8,6,5,.8)}
.tri .mark em{font-family:var(--script);font-style:normal;color:var(--acid);
  font-size:clamp(44px,10.6vw,162px);line-height:.9;margin-top:-.1em;
  text-shadow:0 4px 44px rgba(8,6,5,.65)}
/* The first screen on the site had nothing to tap. The button sits under the wordmark
   and arrives after it, with the same easing but no blur. */
.tri .hero-cta{position:absolute;z-index:4;left:0;right:0;bottom:clamp(56px,11svh,120px);
  display:flex;justify-content:center;opacity:0;transform:translateY(18px);
  animation:ctaIn .9s cubic-bezier(.16,1,.3,1) 1.15s forwards}
@keyframes ctaIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .tri .hero-cta{animation:none;opacity:1;transform:none} }
.tri .mark.in span{animation:markIn 1.05s cubic-bezier(.16,1,.3,1) .25s forwards}
.tri .mark.in em{animation:markIn 1.15s cubic-bezier(.16,1,.3,1) .62s forwards}
@keyframes markIn{
  from{opacity:0;transform:translateY(26px);filter:blur(9px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@media (prefers-reduced-motion: reduce){
  .tri .mark span,.tri .mark em{opacity:1;transform:none;filter:none;animation:none}
}
@media(max-width:760px){
  .tri{height:90svh;display:block;gap:0}
  .tri .col{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
  .tri .col.show{opacity:1}
  .tri .cap{display:none}
  .tri .tri-meta{display:flex}
  .tri .mark span{font-size:clamp(48px,15vw,90px)}
  .tri .mark em{font-size:clamp(52px,16vw,98px)}
}

/* ============================================================================
   HEADER: fully transparent over the hero, comes in on movement.
   The paper background, the blur and the rule are all deferred to .stuck, so over a dark
   video hero there is nothing but the logo and the links. The logo and link colour flip to
   cream while it is transparent, or the ink versions would vanish into the footage.
   ============================================================================ */
.nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
.nav:not(.stuck){color:#FFFCF5}
.nav:not(.stuck) .links a:not(.cta){color:#FFFCF5}
.nav:not(.stuck) .badge img{filter:brightness(0) invert(1)}
.nav.stuck{background:rgba(253,251,246,.92);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line)}


/* Video cards. Deliberately identical to the photo cards already on the page: same 14px
   radius, same 2px ink border, same 4px offset shadow, same hover lift. The footage is the
   only new thing, the design is not. */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
@media(min-width:900px){ .vgrid{grid-template-columns:repeat(4,1fr)} }
.vcard{margin:0;position:relative;border:2px solid var(--ink);border-radius:14px;
  overflow:hidden;background:var(--card);box-shadow:4px 4px 0 var(--ink);
  transition:transform .2s,box-shadow .2s}
.vcard:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.vcard video{display:block;width:100%;aspect-ratio:9/13;object-fit:cover;background:#0A0806}
.vcard figcaption{position:absolute;left:10px;bottom:10px;
  background:var(--acid);color:var(--ink);border:2px solid var(--ink);border-radius:999px;
  padding:5px 12px;font-family:var(--disp);font-weight:400;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase}


/* The first wave overlaps the hero, so the beige curves UP into the video instead of the
   footage ending on a hard horizontal edge. Negative margin equal to its own height, and a
   z-index above the hero's stacking context so it paints on top of the film.
   Only the wave moves. The hero keeps its 90svh and nothing below it shifts. */
.tri + .wave{position:relative;z-index:5;margin-top:clamp(-84px,-6vw,-40px);
  /* transparent, so the video shows through above the curve. With the inline paper
     background left on, pulling this up simply covered the footage in beige and drew the
     curve onto that, which is the opposite of the effect. */
  background:transparent !important}
.tri + .wave svg{display:block;width:100%;height:clamp(40px,6vw,84px)}
/* -1px so the section below slides under the SVG's antialiased bottom row, which otherwise
   reads as a hairline straight through the curve even though both are #F5E5EA. */
.tri + .wave{margin-bottom:-1px}


/* More footage on a phone. 96svh, so the video owns nearly the whole first screen and only a
   sliver of the pink shows under the curve. Desktop keeps the 90% that was signed off. */
/* same height both ways, so only the top of the pink curve shows under the film */
@media(max-width:760px){ .tri{height:95svh} }


/* One pink block: the pitch and the rotating photos share it, so it reads as a single
   section rather than two bands that happen to be the same colour. */
.pinkblock{background:var(--blush);padding:clamp(52px,7vw,96px) 0 clamp(44px,5vw,64px);
  overflow:hidden}
.pitch{max-width:min(880px,92vw);margin:0 auto clamp(40px,5vw,64px);text-align:center;
  padding:0 var(--gut,22px)}
.pitch-k{font-family:var(--sans);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  opacity:.55;margin-bottom:16px}
.pitch-h{font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,5.4vw,68px);line-height:1.02;letter-spacing:.005em;color:var(--ink)}
.pitch-h em{font-family:var(--script);font-style:normal;text-transform:none;
  color:var(--green);font-size:1.12em;line-height:.9}
.pitch-p{max-width:60ch;margin:clamp(18px,2.2vw,26px) auto 0;font-size:clamp(16px,1.5vw,18.5px);
  line-height:1.6;opacity:.82}
.pitch-cta{margin-top:clamp(24px,3vw,34px)}


/* A chapter panel can hold a clip instead of a photo. Same arched panel, same 2px ink border,
   same offset shadow, same height as the photo version: only the media inside it changes. */
.split .im video{display:block;width:100%;height:520px;object-fit:cover;background:#0A0806}
@media (max-width:920px){ .split .im video{height:340px} }

/* The enquiry form's on screen answer. It lives on /contact and on the about page now, so it
   moved out of a page level style block into here. Rounded and bordered like every other
   surface on the site rather than a bare rule. */
.enq-msg{margin-top:16px;padding:12px 14px;font-size:15px;line-height:1.45;display:none;
  border:2px solid currentColor;border-radius:12px}
.enq-msg.on{display:block}
.enq-msg.ok{color:#2F6B45;background:rgba(47,107,69,.07)}
.enq-msg.bad{color:#9E2A2A;background:rgba(158,42,42,.07)}

/* .link was only ever declared inside .card and .tile. The chapter text columns use the same
   treatment for their read-on links, so it gets a base rule with the same values. The scoped
   card and tile rules are more specific and still win. */
.link{color:var(--green);font-weight:600;font-size:14px;letter-spacing:.04em}

/* "Most popular" sticker for full takeover cards, same sticker language as the hero stamp */
.pop{position:absolute;top:10px;left:10px;z-index:3;background:var(--acid);border:2px solid var(--ink);color:var(--ink);
  font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:12px;letter-spacing:.06em;
  padding:6px 12px;border-radius:999px;transform:rotate(-4deg);box-shadow:3px 3px 0 var(--ink)}
.card{position:relative}
.pop-inline{display:inline-block;position:static;transform:rotate(-2deg);margin-left:10px;vertical-align:middle}

/* Centred hero for the What we do page: the options are visible before any scrolling */
.phero.centered{align-items:center;min-height:64svh}
@media (min-width:900px){ .phero.centered{min-height:86svh} }
.phero.centered .inner{text-align:center;padding:14svh 5vw 6svh}
.phero.centered .sub{color:rgba(253,251,246,.95);max-width:56ch;margin:14px auto 0;font-size:clamp(15.5px,1.4vw,18px);text-shadow:0 2px 18px rgba(35,51,24,.6)}
.jump{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:22px}
.jump a{background:rgba(253,251,246,.94);border:2px solid var(--ink);border-radius:999px;padding:9px 16px;
  font-size:14px;font-weight:600;color:var(--ink);box-shadow:2px 2px 0 var(--ink);transition:transform .18s,background .18s}
.jump a:hover{transform:translate(-1px,-1px);background:var(--acid)}
html{scroll-padding-top:90px}
.phero.centered::after{background:linear-gradient(180deg,rgba(35,51,24,.5),rgba(35,51,24,.28) 55%,rgba(253,251,246,.9) 92%,var(--paper))}

/* mobile hamburger menu (nav.js). Desktop keeps the inline links row. */
.burger{display:none}
html.noscroll{overflow:hidden}
@media(min-width:921px){.mnav{display:none !important}}
@media(max-width:920px){
  /* On a phone the whole links block used to hide, taking Build your party with it,
     so the first screen of every page had nothing to tap but the burger. Keep the
     block, hide only the text links: the CTA stays visible beside the burger. */
  .nav .links{display:flex;gap:10px}
  .nav .links a:not(.cta){display:none}
  .nav .cta{padding:9px 14px;font-size:12px;box-shadow:3px 3px 0 var(--ink)}
  .nav .burger{display:inline-flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;
    width:46px;height:42px;background:var(--card);border:2px solid var(--ink);border-radius:12px;
    cursor:pointer;padding:0;box-shadow:3px 3px 0 var(--ink)}
  .burger span{display:block;width:20px;height:2.5px;background:var(--ink);border-radius:2px;
    transition:transform .25s,opacity .2s}
  .burger.x span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .nav.menu-open{z-index:90;background:var(--paper)}
  .mnav{position:fixed;inset:0;z-index:85;background:var(--paper);display:none;flex-direction:column;
    padding:110px 7vw 34px}
  .mnav.open{display:flex}
  .mnav a{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:31px;
    letter-spacing:.01em;color:var(--ink);padding:16px 0;border-bottom:1px solid var(--line)}
  .mnav a.cta{margin-top:auto;border:2px solid var(--ink);border-radius:999px;background:var(--green);
    color:#FFFEF9;text-align:center;font-family:var(--sans);font-weight:600;font-size:17px;
    padding:18px;box-shadow:5px 5px 0 var(--ink)}
}

/* ------------------------------------------------------------------ */
/* Photo framing. object-fit:cover crops from the centre by default, and on
   these photos the subject is not in the centre, so heads were being sliced
   off. Jimmy raised it as his number one complaint on 7 Sep 2026.

   Values derived from macOS Vision face + upper-body detection on each
   source file, then scored against the real rendered box at 1440px and
   390px. Two rules do the work: a person is either fully in frame or fully
   out of it (a headless torso at the edge reads as the same mistake), and a
   head rendering under ~26px is texture rather than a face, so a bystander
   behind a cocktail never gets to re-crop the photo away from its subject.

   Regenerate rather than nudge by hand: method is in BUILD-BRIEF-2026-09-10.md.
   WARNING when regenerating: the solver only emits rules for slots that are
   CURRENTLY cutting someone, and these rules are why most of them no longer are.
   Merge its output into this block, never replace the block with it. */
img[src="/img/boat-girls.jpg"]{object-position:50% 33%}
/* The sign is the subject of the signage page and it sits in the top eighth of a
   tall photo, so a centre crop showed only the underside of the bar. No face to
   solve for here, so this one is set by eye. */
img[src="/img/bourbon-bar-sign.jpg"]{object-position:50% 2%}
img[src="/img/champagne-tray.jpg"]{object-position:50% 0%}
img[src="/img/client/5-card.jpg"]{object-position:0% 50%}
img[src="/img/client/img_3316-card.jpg"]{object-position:50% 0%}
img[src="/img/cliff-bar.jpg"]{object-position:50% 38%}
img[src="/img/dj-crowd.jpg"]{object-position:50% 78%}
img[src="/img/espresso-serve.jpg"]{object-position:65% 0%}
img[src="/img/garden-party.jpg"]{object-position:50% 0%}
img[src="/img/golf-day-crew.jpg"]{object-position:50% 27%}
img[src="/img/greenbach-crate.jpg"]{object-position:50% 6%}
img[src="/img/hero-pour.jpg"]{object-position:50% 0%}
img[src="/img/home-bar.jpg"]{object-position:50% 21%}
img[src="/img/jimmy-robbie.jpg"]{object-position:63% 12%}
img[src="/img/shots-lawn.jpg"]{object-position:50% 0%}
img[src="/img/wharf-bar.jpg"]{object-position:50% 11%}

/* Subjects too far apart to fit both crops. On a phone the frame shows about
   half the width of a landscape photo, so two people at opposite edges
   cannot both survive: the phone shows one of them whole. */
@media(max-width:920px){
  img[src="/img/boat-girls.jpg"]{object-position:50% 26%}
  img[src="/img/champagne-tray.jpg"]{object-position:100% 50%}
  img[src="/img/dj-crowd.jpg"]{object-position:50% 100%}
  img[src="/img/espresso-serve.jpg"]{object-position:58% 0%}
  img[src="/img/golf-day-crew.jpg"]{object-position:65% 50%}
  img[src="/img/greenbach-crate.jpg"]{object-position:0% 50%}
  img[src="/img/home-bar.jpg"]{object-position:50% 0%}
  /* the in-page use is wide enough for both men; only the hero has to pick one */
  img[src="/img/jimmy-robbie.jpg"]{object-position:58% 50%}
  /* Was pinned to /img/jimmy-robbie.jpg, which no longer exists: the split gave each page
     its own copy. Framing is handled per photo now, see the position rules at the end. */
  .phero img[src^="/img/jimmy-robbie"]{object-position:100% 50%}
  img[src="/img/wharf-bar.jpg"]{object-position:0% 21%}
}