:root{
  --ink:#07070a;
  --ink-2:#0e0f14;
  --paper:#f3efe8;
  --muted:#9c968c;
  --amber:#e2913f;
  --amber-hi:#f6b96a;
  --line:rgba(243,239,232,.14);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:clamp(20px,5vw,72px);
}

*{box-sizing:border-box}
html{scroll-behavior:auto}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* ---------- loader ---------- */
#loader{
  position:fixed;inset:0;z-index:90;background:var(--ink);
  display:grid;place-items:center;transition:opacity .7s ease,visibility .7s;
}
#loader.done{opacity:0;visibility:hidden}
.loader-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.loader-mark{font-family:var(--serif);font-size:35px;letter-spacing:.02em;color:var(--paper)}
.loader-track{width:min(57vw,325px);height:1px;background:rgba(243,239,232,.16);overflow:hidden}
.loader-bar{height:100%;width:0;background:var(--amber);transition:width .25s ease}
.loader-pct{font-size:14px;letter-spacing:.28em;color:var(--muted)}

/* ---------- film stage ---------- */
.stage{position:fixed;inset:0;z-index:0;background:#050508}
#film,#film2,#filmFallback{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 42%;
}
#film[hidden],#film2[hidden],#filmFallback[hidden]{display:none}
#film2{opacity:0}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%,transparent 30%,rgba(4,4,7,.55) 78%,rgba(4,4,7,.9) 100%),
    linear-gradient(to bottom,rgba(4,4,7,.72) 0%,rgba(4,4,7,.12) 26%,rgba(4,4,7,.12) 62%,rgba(4,4,7,.86) 100%);
}
.grain{
  position:absolute;inset:-50%;pointer-events:none;opacity:.16;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.5'/></svg>");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}100%{transform:translate(0,0)}}

/* ---------- header ---------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);
  mix-blend-mode:normal;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{font-family:var(--serif);font-size:22px;letter-spacing:.01em}
.brand-name{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);opacity:.82;display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1}
.brand-name em{font-style:normal;color:var(--muted)}
.call{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  backdrop-filter:blur(6px);background:rgba(8,8,12,.28);
  transition:border-color .3s,background .3s;
}
.call:hover{border-color:var(--amber);background:rgba(226,145,63,.1)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(226,145,63,.55);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(226,145,63,0)}100%{box-shadow:0 0 0 0 rgba(226,145,63,0)}}

/* ---------- overlay panels ---------- */
.overlay{position:fixed;inset:0;z-index:20;pointer-events:none}
.panel{
  position:absolute;inset:0;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr);
  opacity:0;visibility:hidden;
  /* deliberately NO will-change: it creates a backdrop root, which stops the glass
     cards below from sampling the film behind them */
}
.panel .wrap{
  width:100%;min-width:0;padding:96px var(--gut) 72px;
  position:relative;top:26px;
  transition:top .9s cubic-bezier(.2,.7,.2,1);
}
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 50%,rgba(5,5,9,.62),transparent 72%);
}
/* Side-weighted scrims follow the copy: 2 and 5 are left-aligned, 3 and 6 right. */
.panel[data-panel="2"]::before,.panel[data-panel="5"]::before,
.panel[data-panel="3"]::before,.panel[data-panel="6"]::before{
  background:linear-gradient(to right,rgba(5,5,9,.8) 0%,rgba(5,5,9,.3) 55%,transparent 85%);
}
.panel[data-panel="3"]::before,.panel[data-panel="6"]::before{transform:scaleX(-1)}
.panel[data-panel="4"]::before{
  background:radial-gradient(62% 68% at 50% 52%,rgba(5,5,9,.82),rgba(5,5,9,.2) 78%,transparent 100%);
}
/* Final section: no vignette — just a gradient rising from the bottom, so the driveway
   and the van stay open and lit. */
.panel[data-panel="7"]::before{
  background:linear-gradient(to top,rgba(5,5,9,.88) 0%,rgba(5,5,9,.55) 26%,rgba(5,5,9,.18) 52%,transparent 76%);
  transform:none;
}
.panel > .wrap{position:relative}
.panel.on{visibility:visible}
.panel.on .wrap{top:0}
.wrap.align-center{max-width:840px;margin:0 auto;text-align:center}
.wrap.align-left{max-width:1400px;margin:0 auto}
.wrap.align-right{max-width:1400px;margin:0 auto}
.wrap.align-right > *{max-width:560px;margin-left:auto}

.eyebrow{
  margin:0 0 22px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--amber);
}
h1,h2,h3,h4{
  font-family:var(--serif);font-weight:400;line-height:.98;margin:0 0 24px;
  letter-spacing:-.015em;
}
h1{font-size:clamp(46px,8.4vw,116px)}
h2,h3{font-size:clamp(38px,5.6vw,82px)}
h4{font-size:clamp(34px,4.6vw,66px)}
h1 em,h2 em,h3 em,h4 em{font-style:italic;color:var(--amber-hi)}
.lede{
  margin:0 0 34px;font-size:clamp(15px,1.25vw,18px);line-height:1.65;
  color:rgba(243,239,232,.74);max-width:52ch;
}
.wrap.align-center .lede{margin-left:auto;margin-right:auto}

.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;pointer-events:auto}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 30px;border-radius:999px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid transparent;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,color .3s,border-color .3s;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--amber);color:#141008;font-weight:500}
.btn-primary:hover{background:var(--amber-hi)}
.btn-ghost{border-color:var(--line);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper)}
.btn-wide{width:100%;padding:17px 30px}

.scroll-hint{
  margin-top:56px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px;
}
.scroll-hint span{width:1px;height:46px;background:linear-gradient(var(--amber),transparent);animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.25;transform:scaleY(.5);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* services list */
.svc{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;
  gap:4px;max-width:1186px;
  /* one frosted panel; the cells sit inside it and the 4px gaps read as dividers */
  background:rgba(2,2,2,.07);
  -webkit-backdrop-filter:blur(76px);
  backdrop-filter:blur(76px);
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 12px 60px rgba(5,5,6,.66);
}
.svc li{
  padding:32px 24px;display:flex;flex-direction:column;gap:9px;
  background:rgba(243,239,232,.035);
  transition:background .35s;
}
.svc li:hover{background:rgba(226,145,63,.12)}
@media (min-width:640px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.svc{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc.four{grid-template-columns:repeat(4,minmax(0,1fr))}}
.svc strong{font-weight:500;font-size:14px;letter-spacing:.02em}
.svc span{font-size:13px;line-height:1.6;color:rgba(243,239,232,.6)}

/* stats */
.stats{display:flex;gap:44px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px}
.stats div{display:flex;flex-direction:column;gap:6px}
.stats b{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,46px);color:var(--paper);line-height:1}
.stats span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* form */
.book{pointer-events:auto;max-width:620px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row .field{flex:1 1 200px}
.field{display:flex;flex-direction:column;gap:7px}
.field span{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  background:rgba(9,9,13,.55);border:1px solid var(--line);border-radius:10px;
  padding:14px 15px;color:var(--paper);font:inherit;font-size:15px;
  backdrop-filter:blur(6px);transition:border-color .3s,background .3s;
  width:100%;
}
.field textarea{resize:vertical;min-height:88px;line-height:1.5}
/* native select chrome is unstyleable, so draw our own chevron */
.field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:40px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3efe8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.field select option{background:#0e0f14;color:var(--paper)}
.field select:invalid,.field select option[value=""]{color:rgba(243,239,232,.28)}
.field input::placeholder,.field textarea::placeholder{color:rgba(243,239,232,.28)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--amber);background-color:rgba(226,145,63,.07);
}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#c4623c}
.fine{margin:2px 0 0;font-size:12px;color:var(--muted);text-align:center}
.fine.ok{color:var(--amber-hi)}
.foot{
  margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:7px;
  border-top:1px solid var(--line);padding-top:20px;
  font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;
  text-align:center;
}

/* dots */
.dots{
  position:fixed;right:calc(var(--gut) - 14px);top:50%;transform:translateY(-50%);
  z-index:40;display:flex;flex-direction:column;gap:6px;
}
.dots button{
  background:none;border:0;padding:10px 12px;cursor:pointer;display:block;
}
.dots i{display:block;width:22px;height:1px;background:rgba(243,239,232,.3);transition:background .35s,width .35s}
.dots button.active i{background:var(--amber);width:34px}

.spacer{position:relative;z-index:1}

/* ---------- desktop scrims, -30% alpha ----------
   Mobile was already right, so this is scoped above the 820px breakpoint only.
   Every alpha below is the base value x0.7. */
@media (min-width:821px){
  .vignette{background:
    radial-gradient(120% 90% at 50% 45%,transparent 30%,rgba(4,4,7,.385) 78%,rgba(4,4,7,.63) 100%),
    linear-gradient(to bottom,rgba(4,4,7,.50) 0%,rgba(4,4,7,.08) 26%,rgba(4,4,7,.08) 62%,rgba(4,4,7,.60) 100%);}
  .panel::before{
    background:radial-gradient(70% 60% at 50% 50%,rgba(5,5,9,.43),transparent 72%);
  }
  .panel[data-panel="2"]::before,.panel[data-panel="5"]::before,
  .panel[data-panel="3"]::before,.panel[data-panel="6"]::before{
    background:linear-gradient(to right,rgba(5,5,9,.56) 0%,rgba(5,5,9,.21) 55%,transparent 85%);
  }
  .panel[data-panel="4"]::before{
    background:radial-gradient(62% 68% at 50% 52%,rgba(5,5,9,.57),rgba(5,5,9,.14) 78%,transparent 100%);
  }
  .panel[data-panel="7"]::before{
    background:linear-gradient(to top,rgba(5,5,9,.62) 0%,rgba(5,5,9,.39) 26%,rgba(5,5,9,.13) 52%,transparent 76%);
  }
}

/* ---------- reduced motion / no-js fallback ---------- */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .scroll-hint span{animation:none}
  .dot{animation:none}
}

@media (max-width:820px){
  .brand-name{display:none}
  .dots{right:6px}
  .wrap.align-right{justify-content:flex-start}
  .stats{gap:26px}
  .panel .wrap{padding:110px var(--gut) 96px}
  .vignette{background:
    radial-gradient(140% 80% at 50% 45%,transparent 12%,rgba(4,4,7,.7) 70%,rgba(4,4,7,.95) 100%),
    linear-gradient(to bottom,rgba(4,4,7,.8) 0%,rgba(4,4,7,.4) 40%,rgba(4,4,7,.92) 100%);}
}

/* ---------- tighter type-setting where the viewport is short or narrow ---------- */
@media (min-width:900px){
  .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px}
}
@media (max-width:640px){
  .panel .wrap{padding:96px var(--gut) 84px}
  .svc li{padding:18px 16px;gap:4px}
  .svc strong{font-size:13px}
  .svc span{font-size:12px;line-height:1.45}
  .lede{font-size:15px;line-height:1.55;margin-bottom:26px}
  h1,h2,h3,h4{margin-bottom:18px}
  .eyebrow{margin-bottom:14px}
  .stats{gap:18px 28px;padding-top:18px}
  .row{gap:10px}
  .book{gap:11px}
  .field input{padding:12px 14px;font-size:16px}
  .foot{margin-top:26px;gap:6px}
  .scroll-hint{margin-top:34px}
  .scroll-hint span{height:34px}
}
@media (max-height:720px) and (min-width:641px){
  .panel .wrap{padding:88px var(--gut) 64px}
  .svc li{padding:18px 20px 20px}
}
@media (max-width:640px){ .dots{display:none} }

/* ---------- brand mark & opening hours ---------- */
img.brand-mark{height:45px;width:auto;display:block}
img.loader-mark{height:108px;width:auto;opacity:.92}
.hours{
  margin:34px auto 0;padding:22px 0 0;max-width:620px;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.hours div{display:flex;flex-direction:column;gap:5px;text-align:center}
.hours dt{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.hours dd{margin:0;font-family:var(--serif);font-size:clamp(17px,1.7vw,22px);color:var(--paper)}
.foot a{color:inherit;border-bottom:1px solid transparent;transition:border-color .3s}
.foot a:hover{border-color:var(--amber)}
@media (max-width:640px){
  img.brand-mark{height:35.5px}
  img.loader-mark{height:80px}
  .hours{margin-top:22px;padding-top:16px;gap:10px}
  .hours dd{font-size:15px}
}

/* hero body: larger, and heavier than the other sections — Light strokes at this
   size wash out against the moving film even though the contrast ratio passes */
.panel[data-panel="1"] .lede{
  font-size:20px;
  font-weight:400;
  color:rgba(243,239,232,.94);
}
@media (max-width:640px){ .panel[data-panel="1"] .lede{font-size:16px} }

/* "High quality parts from" needs 613px on one line; the default right column is 560 */
.panel[data-panel="3"] .wrap.align-right > *{max-width:660px}

/* ---------- 05 Gallery: horizontal scroller driven by vertical scroll ---------- */
.panel[data-panel="5"] .wrap{padding-bottom:24px}
.panel[data-panel="5"]{align-content:center}

.gal-nav{display:flex;gap:12px;margin-top:30px;pointer-events:auto}
.gal-btn{
  width:42px;height:42px;border-radius:50%;
  background:rgba(9,9,13,.35);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .3s,background .3s,transform .3s cubic-bezier(.2,.7,.2,1);
}
.gal-btn svg{width:18px;height:18px;fill:none;stroke:var(--paper);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.gal-btn:hover{border-color:var(--amber);background:rgba(226,145,63,.14);transform:translateY(-2px)}
.gal-btn[disabled]{opacity:.35;cursor:default;transform:none;border-color:var(--line);background:rgba(9,9,13,.35)}

/* the viewport bleeds to the right edge; the track is moved by transform, not scrollbars */
/* The first card must start exactly where the headline does. The copy sits in a
   max-width:1400px centred wrap, so above 1400px it gains a centring offset — mirror
   that here, or the track drifts left of the text on wide screens. */
.gal-viewport{
  overflow:hidden;width:100%;
  padding-left:calc(max(0px, (100% - 1400px) / 2) + var(--gut));
}
.gal-track{
  list-style:none;margin:0;padding:0;
  display:flex;gap:9px;
  will-change:transform;
}
.shot{
  position:relative;flex:0 0 322px;height:384px;
  border-radius:0;overflow:hidden;
  background:rgba(7,7,10,.5);
}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(4,4,7,.92) 0%,rgba(4,4,7,.55) 26%,transparent 58%);
}
.shot-cap{
  position:absolute;left:22px;right:22px;bottom:20px;z-index:1;
  display:flex;flex-direction:column;gap:6px;
}
.shot-cap strong{font-weight:500;font-size:14px;letter-spacing:.02em;color:var(--paper)}
.shot-cap span{font-size:13px;line-height:1.5;color:rgba(243,239,232,.7)}

@media (max-width:640px){
  .shot{flex:0 0 240px;height:305px;border-radius:0}
  .shot-cap{left:16px;right:16px;bottom:14px}
  .gal-nav{margin-top:20px}
}

/* ---------- 06 Testimonials ---------- */
.quotes{display:grid;margin-top:34px;max-width:482px;pointer-events:auto}  /* hoverable so auto-advance can pause */
.quote{
  grid-area:1/1;                 /* stack them so the block never jumps height */
  margin:0;position:relative;padding:6px 34px 0 0;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(var(--from,40px));
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
/* inherit, not visible: `visible` would override the panel's own hidden state */
.quote.is-on{opacity:1;visibility:inherit;transform:translateX(0)}
/* the outgoing quote keeps rendering while it slides away */
.quote.is-out{opacity:0;visibility:inherit;transform:translateX(var(--to,-40px))}
.quote blockquote{
  margin:0;position:relative;
  font-size:18px;font-weight:300;line-height:1.6;
  color:rgba(243,239,232,.86);
}
/* decorative marks, matching the Figma: open above-left, close below-right */
.quote blockquote::before,
.quote blockquote::after{
  font-family:var(--serif);font-size:56px;line-height:0;
  color:var(--amber);opacity:.55;position:absolute;
}
.quote blockquote::before{content:"\201C";left:-30px;top:16px}
.quote blockquote::after{content:"\201D";right:-30px;bottom:-2px}
.quote figcaption{
  margin-top:18px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber);
}
@media (max-width:640px){
  .quotes{margin-top:24px}
  .quote{padding-right:22px}
  .quote blockquote{font-size:16px}
  .quote blockquote::before{font-size:42px;left:-18px;top:12px}
  .quote blockquote::after{font-size:42px;right:-18px}
}

/* ---------- gallery: clickable shots ---------- */
.shot-open{
  display:block;width:100%;height:100%;padding:0;border:0;background:none;
  cursor:zoom-in;pointer-events:auto;color:inherit;text-align:left;
  position:relative;
}
.shot-open img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.shot-open:hover img{transform:scale(1.04)}
.shot-open:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:120;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:clamp(16px,4vw,56px);
  background:rgba(4,4,7,.90);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  cursor:zoom-out;
  opacity:0;transition:opacity .3s ease;
}
.lb.is-open{opacity:1}
/* an author `display` beats the UA stylesheet's [hidden]{display:none}, so without this
   the overlay stays laid out and swallows every click on the page */
.lb[hidden]{display:none}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.lb-fig img{
  cursor:default;
  max-width:100%;max-height:78vh;object-fit:contain;
  border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.lb-fig figcaption{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  text-align:center;
}
.lb-close{
  position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);
  width:44px;height:44px;border-radius:50%;
  background:rgba(9,9,13,.5);border:1px solid var(--line);color:var(--paper);
  font-size:26px;line-height:1;cursor:pointer;
  transition:border-color .3s,background .3s;
}
.lb-close:hover{border-color:var(--amber);background:rgba(226,145,63,.14)}
.lb-arrow{
  width:48px;height:48px;border-radius:50%;flex:0 0 auto;
  background:rgba(9,9,13,.5);border:1px solid var(--line);
  display:grid;place-items:center;cursor:pointer;
  transition:border-color .3s,background .3s;
}
.lb-arrow svg{width:20px;height:20px;fill:none;stroke:var(--paper);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lb-arrow:hover{border-color:var(--amber);background:rgba(226,145,63,.14)}
.lb-close:focus-visible,.lb-arrow:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (max-width:640px){
  .lb{grid-template-columns:1fr;gap:16px}
  .lb-arrow{position:absolute;bottom:22px}
  .lb-prev{left:24px} .lb-next{right:24px}
  .lb-fig img{max-height:66vh}
}

/* ---------- final section: content slides aside for the booking form ---------- */
.flip{display:grid;pointer-events:auto}
.flip-face{
  grid-area:1/1;                       /* stacked, so the section height never jumps */
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.flip-main{opacity:1;transform:translateX(0)}
.flip-form{opacity:0;transform:translateX(40px);visibility:hidden;pointer-events:none}

.flip.is-form .flip-main{opacity:0;transform:translateX(-40px);visibility:hidden;pointer-events:none}
.flip.is-form .flip-form{opacity:1;transform:translateX(0);visibility:inherit;pointer-events:auto}

.flip-back{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 auto 26px;padding:9px 18px 9px 12px;
  background:rgba(9,9,13,.4);border:1px solid var(--line);border-radius:999px;
  color:var(--paper);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:border-color .3s,background .3s,transform .3s cubic-bezier(.2,.7,.2,1);
}
.flip-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.flip-back:hover{border-color:var(--amber);background:rgba(226,145,63,.12);transform:translateX(-3px)}
.flip-back:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.flip-title{margin-bottom:30px}

/* ---------- header actions: phone + book ---------- */
.head-actions{display:flex;align-items:center;gap:10px}
.call-book{
  font-family:inherit;cursor:pointer;
  background:var(--amber);border-color:var(--amber);color:#141008;font-weight:500;
}
.call-book:hover{background:var(--amber-hi);border-color:var(--amber-hi)}
.call-book[aria-expanded="true"]{background:transparent;border-color:var(--line);color:var(--paper)}

/* ---------- booking drop-down ----------
   Sits BELOW the header in the stack (z-index 35 vs 40) so the header stays visible
   and the Book button remains the toggle. */
.drop{
  position:fixed;inset:0;z-index:35;
  display:grid;align-content:center;justify-items:center;
  padding:104px var(--gut) 48px;
  overflow-y:auto;                      /* the form can outgrow a short viewport */
  background:rgba(7,7,10,.96);
  -webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
  transform:translateY(-100%);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
  visibility:hidden;
}
.drop.is-open{transform:translateY(0);visibility:visible}
.drop-inner{width:100%;max-width:620px;text-align:center}
.drop-title{
  font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,42px);
  line-height:1.02;letter-spacing:-.015em;margin:0 0 26px;
}
.drop-title em{font-style:italic;color:var(--amber-hi)}
.drop .book{text-align:left}
@media (max-width:640px){
  .drop{padding:92px var(--gut) 32px;align-content:start}
  .head-actions{gap:8px}
  .call-book{padding:9px 14px}
}

/* testimonials sit 20px higher; the entrance still travels the same 26px,
   so the lift rides on top of the existing top-based animation */
.panel[data-panel="6"] .wrap{top:6px}
.panel[data-panel="6"].on .wrap{top:-20px}

/* ---------- gallery on touch layouts ----------
   Swipe the strip directly instead of driving it from vertical scroll, and let a
   vertical swipe carry straight past the section. */
@media (max-width:820px){
  .gal-viewport{
    overflow-x:auto;
    pointer-events:auto;                 /* needs to receive the drag */
    scroll-snap-type:x proximity;        /* proximity, not mandatory: a flick can still coast */
    /* without this the snap aligns cards to the raw edge and eats the gutter, so the
       first card no longer lines up with the heading */
    scroll-padding-left:calc(max(0px, (100% - 1400px) / 2) + var(--gut));
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;       /* stop a sideways flick triggering back-navigation */
    scrollbar-width:none;
  }
  .gal-viewport::-webkit-scrollbar{display:none}
  .gal-track{transform:none !important}  /* the scroller owns the position now */
  .shot{scroll-snap-align:start}
  /* trailing space so the final card can reach the left edge */
  .gal-track::after{content:"";flex:0 0 var(--gut);height:1px}
}

/* ═══ MOBILE: keep full-bleed, stop smothering the film ════════════════════
   The phone crop is fine compositionally — the subject is centred and reads
   well. What made it look dark was the scrim stack: the film measured 64/255
   raw in that exact region but rendered at 19.7. Dial the overlays right back
   and hold text legibility with local shadows instead of dimming everything. */
@media (max-width:820px){
  .vignette{
    background:
      radial-gradient(150% 75% at 50% 42%, transparent 30%, rgba(4,4,7,.30) 78%, rgba(4,4,7,.55) 100%),
      linear-gradient(to bottom, rgba(4,4,7,.55) 0%, transparent 18%),
      linear-gradient(to top, rgba(4,4,7,.72) 0%, transparent 34%);
  }
  .grain{opacity:.10}

  /* a tight pool behind the copy rather than a blanket over the whole frame */
  .panel::before{
    background:radial-gradient(72% 42% at 50% 52%, rgba(5,5,9,.62), rgba(5,5,9,.22) 62%, transparent 88%) !important;
    transform:none !important;
  }

  /* the exploded engine is the brightest backdrop on the site; its headline needs a
     deeper pool than the rest (measured 3.23:1 against the others' 5.7-10.6) */
  .panel[data-panel="2"]::before{
    background:radial-gradient(84% 48% at 50% 44%, rgba(5,5,9,.80), rgba(5,5,9,.34) 60%, transparent 88%) !important;
  }

  /* local contrast so the type holds up without darkening the image behind it */
  .panel h1,.panel h2,.panel h3,.panel h4{text-shadow:0 2px 18px rgba(4,4,7,.85), 0 1px 3px rgba(4,4,7,.7)}
  .panel .lede,.panel .eyebrow,.shot-cap,.quote blockquote,.quote figcaption,
  .stats b,.stats span,.hours dt,.hours dd,.foot{text-shadow:0 1px 10px rgba(4,4,7,.9)}
}

/* ═══ MOBILE: final section ═══════════════════════════════════════════════ */
@media (max-width:820px){
  /* The in-place form is stacked in the same grid cell as the arrive content, so even
     hidden it drove the wrap to 1034px — taller than the screen, which pinned the
     content to the top. Hidden outright here; "Book a visit" opens the full-screen
     panel instead, which can scroll. */
  .flip-form{display:none}

  /* sit the block a little lower in the screen rather than hard against the header */
  .panel[data-panel="7"] .wrap{padding-top:calc(96px + 12vh)}
}