/* ---------- Tokens ---------- */
:root{
  --ink:#0A0A0B;
  --ink-raised:#141416;
  --bone:#EDE6DC;
  --champagne:#B8A88F;
  --muted:#8A8A8E;
  --line:#2A2A2D;

  --bone-2:#C9C2B8;            /* body copy inside sections; ~11:1 on --ink */
  --champagne-hi:#CDBFA6;      /* hover state for the primary button */
  --display:"Cormorant Garamond","Times New Roman",serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --max:1040px;
  --gutter:20px;
  --header-h:64px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
@media (max-width:639px){html{scroll-padding-top:calc(var(--header-h) + 56px)}} /* the nav sits on a second row */
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--body);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
@media (min-width:720px){body{font-size:1.0625rem}}
svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:600}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}

:focus-visible{outline:3px solid var(--champagne);outline-offset:3px}
:focus:not(:focus-visible){outline:none}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.skip{position:absolute;left:var(--gutter);top:-100px;z-index:20;padding:10px 14px;background:var(--bone);color:var(--ink);font-weight:500;text-decoration:none;border-radius:2px}
.skip:focus{top:12px}

/* Display type: the logo lockup and section headings, nothing else. */
.display{font-family:var(--display);font-weight:300;text-transform:uppercase;letter-spacing:.18em;line-height:1.1}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 22px;border-radius:2px;
  border:1px solid var(--champagne);background:transparent;color:var(--bone);
  font-family:var(--body);font-weight:500;font-size:.9375rem;line-height:1;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
@media (hover:hover){.btn:not(:disabled):hover{background:rgba(184,168,143,.12)}}
.btn-primary{background:var(--champagne);color:var(--ink)}
@media (hover:hover){.btn-primary:not(:disabled):hover{background:var(--champagne-hi);border-color:var(--champagne-hi)}}
.btn-primary:not(:disabled):active{background:#A8987F;border-color:#A8987F}
.btn:disabled{opacity:.5;cursor:default}
.btn-sm{min-height:44px;padding:0 16px;font-size:.875rem}
[data-config="phone"]{white-space:nowrap}
.text-link{color:var(--champagne);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
@media (hover:hover){.text-link:hover{color:var(--bone)}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease),border-color .3s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(10,10,11,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
/* Logo, links, Book on one row; on phones the links drop to a second row so they're never hidden behind a menu. */
.site-header .wrap{
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"logo nav book";
  align-items:center;column-gap:28px;min-height:var(--header-h);
}
.lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone)}
.site-header .lockup{grid-area:logo}
.lockup .logo{display:block;height:46px;width:auto}
@media (min-width:640px){.lockup .logo{height:52px}}
.site-nav{grid-area:nav;justify-self:end}
.site-nav ul{list-style:none;display:flex;align-items:center;gap:26px}
.header-book{grid-area:book}
.nav-link{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-weight:500;font-size:.9375rem;text-decoration:none;transition:color .2s var(--ease)}
.nav-link[aria-current="page"]{color:var(--bone)}
@media (hover:hover){.nav-link:hover{color:var(--bone)}}
@media (max-width:639px){
  .site-header .wrap{grid-template-columns:1fr auto;grid-template-areas:"logo book" "nav nav";column-gap:12px;min-height:0;padding-top:8px}
  .site-nav{justify-self:stretch;margin-inline:-10px}
  .site-nav ul{justify-content:space-between;gap:0}
  .nav-link{min-height:40px;padding-inline:10px;font-size:.875rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(36px,6vw,56px) 0 0;text-align:center}
.hero .wrap{position:relative;z-index:1}
.hero-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.hero h1{font-weight:500;font-size:clamp(1.9rem,8.2vw,5.25rem);letter-spacing:.16em;text-indent:.16em}
.subhead{font-size:clamp(1.0625rem,2.1vw,1.25rem);color:var(--bone-2);max-width:46ch;margin:18px auto 26px;text-wrap:balance}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;align-items:center}
.hero-actions .text-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}

/* Hero art: a car under the eclipse, drawn as an inline SVG in index.html (its ids and classes all start ecl-). */
/* .ecl is the art's size (2:1, like its viewBox). On short laptop screens it shrinks so the whole car stays above the fold. */
.ecl{
  position:relative;left:50%;transform:translateX(-50%);aspect-ratio:2;margin-top:clamp(36px,3vw,44px);pointer-events:none;
  width:min(100vw + 40px,860px,max(480px,(100vh - 470px)*2.05));
  width:min(100vw + 40px,860px,max(480px,(100svh - 470px)*2.05));
}
.ecl-art{width:100%;height:auto;max-width:none;overflow:visible}
/* The tag line sits on the floor, its top 8.5% of the art's height (4.25% of its width) above the bottom. It stays in
   the flow, so if it wraps (narrow phone, large text) the hero grows to fit it instead of clipping the second line. */
.ecl-tag{
  margin:-4.25% 0 0;text-align:center;
  font:500 clamp(.6875rem,1vw,.8125rem)/1 var(--body);letter-spacing:.46em;text-indent:.46em;text-transform:uppercase;color:var(--champagne);
}
.ecl-dot{color:var(--muted)}
/* Below 1024px the screen can be narrower than the ring, so the eclipse fades out at the art's sides. The dark disc fades
   with its rim (both sit in .ecl-edge), so on short screens, where the art is narrower than the screen, no rimless hump is left. */
@media (max-width:1023px){.ecl-edge{mask:url(#ecl-edges)}}
/* Phones: the car fits inside the page gutters, and the ring and its glow get heavier so they hold up small. */
@media (max-width:639px){
  .ecl{width:calc((100vw - 40px)*1.118)}
  .ecl-rim{stroke-width:2.2}
  .ecl-g1{stroke-width:31;stroke-opacity:.42}
  .ecl-g2{stroke-width:5.6;stroke-opacity:.49}
  .ecl-cres{stroke:url(#ecl-ring);stroke-width:1.2}
  .ecl-decal{display:none}
  .ecl-tag{font-size:.75rem;letter-spacing:.28em;text-indent:.28em}
}
/* Phones: the wing mirror would read as a blob, so it goes. */
@media (max-width:599px){.ecl-mirror{display:none}}
/* The eclipse rises once from behind the horizon, then the glint twinkles slowly. Reduced motion stops both (see Motion). */
.ecl-rise{animation:ecl-rise 2.2s var(--ease) both}
@keyframes ecl-rise{from{transform:translateY(48px);opacity:0}}
.ecl-glint{animation:ecl-twinkle 7s 2.2s ease-in-out infinite}
@keyframes ecl-twinkle{50%{opacity:.55}}

/* ---------- Sections ---------- */
.section{padding:clamp(56px,10vw,104px) 0;border-top:1px solid var(--line)}
.hero + .section{border-top:0;padding-top:clamp(24px,5vw,48px)}
.section-head{margin-bottom:clamp(24px,4vw,40px)}
.section h2{font-size:clamp(1.5rem,3.4vw,2.125rem)}
.lede{color:var(--bone-2);max-width:58ch;margin:14px 0 0}
.note{color:var(--muted);font-size:.9375rem;max-width:64ch;margin:18px 0 0}

/* Questions: native details/summary. */
.qa{border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 0;font-weight:500;font-size:1.0625rem;
  color:var(--bone-2);transition:color .2s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";flex:none;width:12px;height:12px;
  background:
    linear-gradient(var(--champagne),var(--champagne)) center/12px 1px no-repeat,
    linear-gradient(var(--champagne),var(--champagne)) center/1px 12px no-repeat;
  transition:transform .25s var(--ease);
}
.qa[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){.qa summary:hover{color:var(--bone)}}
.qa-body{padding:0 0 20px;max-width:64ch;color:var(--bone-2)}
.qa-body p:last-child{margin-bottom:0}

/* Booking */
.book-grid{display:grid;gap:44px}
@media (min-width:860px){
  .book-grid{grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:start}
  .contact{position:sticky;top:calc(var(--header-h) + 24px)}
}
.form-grid{display:grid;gap:18px}
@media (min-width:560px){
  .form-grid{grid-template-columns:1fr 1fr;column-gap:20px}
  .field-full{grid-column:1 / -1}
}
.field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:6px}
.field .opt{color:var(--muted);font-weight:400}
.control{
  display:block;width:100%;min-height:46px;padding:10px 12px;
  background:var(--ink-raised);border:1px solid #66666B;border-radius:3px;
  color:var(--bone);font-family:var(--body);font-size:1rem;line-height:1.4;
  transition:border-color .2s var(--ease);
}
.control::placeholder{color:var(--muted);opacity:1}
@media (hover:hover){.control:hover{border-color:var(--muted)}}
.control:focus-visible{outline:3px solid var(--champagne);outline-offset:2px;border-color:var(--champagne)}
.control[aria-invalid="true"]{border-color:var(--champagne)}
select.control{
  -webkit-appearance:none;appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23B8A88F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
select.control option{background:var(--ink-raised);color:var(--bone)}
textarea.control{min-height:128px;resize:vertical}
.error{display:none;margin:6px 0 0;font-size:.875rem;color:var(--champagne)}
.error.is-visible{display:block}
.form-actions{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.form-status{margin:16px 0 0;color:var(--bone-2);min-height:1.6em}
.fine{color:var(--muted);font-size:.875rem;margin:14px 0 0}

.contact h2,.contact h3{font-size:1.0625rem;font-weight:600;margin-bottom:12px}
.book-page .step-title{font-size:1.125rem}
.contact .qa{margin-top:18px}
.contact p{color:var(--bone-2)}
.quote-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 18px}
.contact-list{list-style:none;border-top:1px solid var(--line)}
.contact-list li{border-bottom:1px solid var(--line)}
.contact-list a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 0;text-decoration:none}
@media (hover:hover){.contact-list a:hover .v{color:var(--champagne)}}
.contact-list .k{color:var(--muted);font-size:.875rem;flex:none}
.contact-list .v{font-weight:500;text-align:right;word-break:break-word;transition:color .2s var(--ease)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:40px 0 56px;color:var(--muted);font-size:.9375rem}
.site-footer .wrap{display:grid;gap:14px}
.site-footer .lockup{margin-bottom:6px;justify-self:start}
.site-footer .lockup .logo{height:72px}
.site-footer p{margin:0}
.site-footer .legal{color:var(--bone)}
.social{list-style:none;display:flex;gap:10px;margin:0 0 4px;padding:0}
.social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;color:var(--bone-2);transition:color .2s var(--ease),border-color .2s var(--ease)}
@media (hover:hover){.social a[href]:hover{color:var(--champagne);border-color:var(--champagne)}}
.social a.is-soon{opacity:.4;cursor:default}

/* Booking stepper */
.book-progress{list-style:none;display:flex;gap:6px;margin:0 0 22px;padding:0;counter-reset:bp}
.book-progress li{flex:1;font-size:.8125rem;font-weight:500;color:var(--muted);padding:8px 0 0;border-top:2px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.book-progress li::before{counter-increment:bp;content:counter(bp) ". "}
.book-progress li[aria-current="step"]{color:var(--bone);font-weight:600;border-top:4px solid var(--champagne);padding-top:6px}
.book-progress li.done{color:var(--bone-2);border-top-color:var(--champagne)}
.book-progress li.done::before{content:"\2713  ";content:"\2713  " / "Done: "}
.book-step[hidden]{display:none}
.step-title{font-size:1.125rem;font-weight:600;margin:0 0 14px}
.step-title:focus{outline:none}
.film-choice{border:0;padding:0;margin:0;min-width:0}
.film-choice legend{font-size:.875rem;font-weight:500;margin-bottom:6px;padding:0}
.film-cards{display:grid;gap:8px}
.film-card{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid #66666B;border-radius:3px;background:var(--ink-raised);cursor:pointer;font-size:1rem;font-weight:400}
.film-card input{margin:5px 0 0;accent-color:var(--champagne);flex:none}
.film-card:has(input:checked){border-color:var(--champagne)}
.film-card:has(input:focus-visible){outline:3px solid var(--champagne);outline-offset:2px}
.film-name{font-weight:600;display:block}
.film-meta{color:var(--muted);font-size:.875rem}
.calendar-box{background:var(--ink-raised);border:1px solid var(--line);border-radius:6px;padding:16px;margin:8px 0 12px}
.summary-list{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.summary-list dt{color:var(--muted);font-size:.875rem}
.summary-list dd{margin:0}
.testmode{color:#D9A66B;font-size:.875rem;border:1px dashed #D9A66B;padding:8px 12px;border-radius:3px}
.done-box{border:1px solid var(--champagne);border-radius:6px;padding:16px;background:var(--ink-raised)}
/* What happens next, once booked: three short numbered steps (the same list is on the /pay page; see booking.css). */
.next-title{font-size:1rem;font-weight:600;margin:18px 0 6px}
.next-steps{list-style:none;counter-reset:next;margin:0 0 14px;padding:0}
.next-steps li{display:grid;grid-template-columns:24px 1fr;column-gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.next-steps li:first-child{border-top:0}
.next-steps li::before{counter-increment:next;content:counter(next);color:var(--champagne);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Our work ---------- */
.work-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
@media (min-width:760px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 20px}}
.work-grid[data-count="1"]{grid-template-columns:minmax(0,760px)}
.work-grid[data-count="2"],.work-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.work-item figure{margin:0}
.work-item img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:var(--ink-raised);border:1px solid var(--line)}
.work-item figcaption{margin-top:10px;color:var(--bone-2);font-size:.875rem;line-height:1.45}
/* Before the first photos: a pane of "glass" with a note and the Instagram link. */
.work-empty{
  border:1px solid var(--line);border-radius:6px;text-align:center;
  padding:clamp(36px,7vw,64px) clamp(20px,4vw,40px);
  background:
    linear-gradient(112deg,transparent 0 34%,rgba(255,255,255,.04) 34% 41%,transparent 41% 45%,rgba(255,255,255,.025) 45% 47%,transparent 47%),
    linear-gradient(180deg,rgba(122,136,168,.12),rgba(217,198,170,.05)),
    var(--ink-raised);
}
.work-empty-title{font-size:1.1875rem;font-weight:600;color:var(--bone);margin:0 0 8px}
.work-empty p:not(.work-empty-title){color:var(--bone-2);max-width:42ch;margin:0 auto 22px}

/* ---------- Films ---------- */
/* Each card opens with a strip of tinted "glass": the film's colour at 35% over a dusk sky. */
.ft-swatch,.fd-swatch{
  position:relative;
  background:
    linear-gradient(112deg,transparent 0 30%,rgba(255,255,255,.07) 30% 38%,transparent 38% 42%,rgba(255,255,255,.05) 42% 44%,transparent 44%),
    linear-gradient(var(--film,rgba(6,6,8,.6)),var(--film,rgba(6,6,8,.6))),
    linear-gradient(180deg,#7A88A8,#B7AFB0 58%,#D9C6AA);
}
.ft-swatch span,.fd-swatch span{position:absolute;left:16px;bottom:10px;font-size:.75rem;font-weight:500;color:var(--bone);opacity:.9}
.ft-grid{list-style:none;display:grid;gap:16px}
@media (min-width:860px){.ft-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.ft{
  position:relative;display:flex;flex-direction:column;
  background:var(--ink-raised);border:1px solid var(--line);border-radius:6px;padding-bottom:20px;
  transition:border-color .2s var(--ease);
}
.ft .ft-swatch{height:48px;border-radius:5px 5px 0 0}
@media (min-width:860px){.ft .ft-swatch{height:64px}}
.ft-main{padding:18px 20px 18px}
.ft-name{font-size:1.25rem;font-weight:600;line-height:1.25}
.ft-type{margin:3px 0 0;color:var(--champagne);font-size:.875rem;font-weight:500}
.ft-desc{margin:12px 0 0;color:var(--bone-2);font-size:.9375rem;line-height:1.55}
/* The numbers sit at the same height on every card, however long the description above them runs. */
.ft-spec{margin:auto 20px 0;padding-top:14px;border-top:1px solid var(--line)}
.ft-spec~.ft-foot{margin-top:0}
.ft-at{margin:0 0 6px;color:var(--muted);font-size:.8125rem}
.ft-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0}
.ft-stats div{display:flex;flex-direction:column-reverse}
.ft-stats dd{margin:0;font-size:2rem;font-weight:500;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--bone)}
.ft-stats dt{margin-top:2px;color:var(--bone-2);font-size:.8125rem}
.ft-points{list-style:none;margin:14px 20px 0;padding:0;color:var(--bone-2);font-size:.875rem;line-height:1.5}
.ft-points li+li{margin-top:2px}
.ft-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:auto 20px 0;padding-top:20px}
.ft-price{margin:0;font-size:1.125rem;font-weight:500;white-space:nowrap}
.ft-from{color:var(--muted);font-size:.875rem;font-weight:400}
.ft-more{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 16px;border:1px solid var(--champagne);border-radius:2px;background:transparent;
  color:var(--bone);font:500 .875rem/1 var(--body);cursor:pointer;
  transition:background-color .2s var(--ease);
}
.ft-more::before{
  content:"";width:10px;height:10px;flex:none;
  background:linear-gradient(var(--champagne),var(--champagne)) center/10px 1px no-repeat,linear-gradient(var(--champagne),var(--champagne)) center/1px 10px no-repeat;
}
/* The whole card is the button's click area. */
.ft-more::after{content:"";position:absolute;inset:0;border-radius:6px}
.ft-ask{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:44px}
@media (hover:hover){
  .ft:hover{border-color:#4D4943}
  .ft:hover .ft-more{background:rgba(184,168,143,.12)}
}
@supports selector(:has(*)){
  .ft:has(.ft-more:focus-visible){outline:3px solid var(--champagne);outline-offset:3px}
  .ft-more:focus-visible{outline:none}
}
/* Special-order films: a slimmer card under the three. */
.ft-specials{list-style:none;margin-top:16px}
.ft.ft-special{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:16px;align-items:center;padding:16px}
.ft-special .ft-swatch{width:64px;height:64px;border-radius:4px;grid-row:1 / span 2;align-self:start}
.ft-special .ft-swatch span{display:none}
.ft-special .ft-main{padding:0}
.ft-special .ft-name{font-size:1.0625rem}
.ft-special .ft-desc{margin-top:6px}
.ft-special .ft-foot{grid-column:2;justify-content:flex-start;gap:8px 20px;flex-wrap:wrap;margin:6px 0 0;padding:0}
@media (min-width:760px){
  .ft.ft-special{grid-template-columns:88px minmax(0,1fr) auto;column-gap:22px;padding:18px 20px}
  .ft-special .ft-swatch{width:88px;height:60px;grid-row:auto;align-self:center}
  .ft-special .ft-foot{grid-column:3;margin:0}
}

/* ---------- Film details panel (a modal <dialog>) ---------- */
html.is-locked{overflow:hidden}
.film-dialog{
  width:min(720px,calc(100% - 24px));max-width:none;
  max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
  margin:auto;padding:0;overflow:hidden;
  background:var(--ink-raised);color:var(--bone);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.65);
}
.film-dialog::backdrop{background:rgba(4,4,5,.76);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.film-dialog[open]{animation:fd-in .24s var(--ease)}
@keyframes fd-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.film-dialog.is-fallback{position:fixed;inset:12px;z-index:50;display:block}
.fd-scroll{max-height:calc(100vh - 26px);max-height:calc(100dvh - 26px);overflow-y:auto;overscroll-behavior:contain}
.fd-head{
  position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:18px 20px 14px;background:var(--ink-raised);border-bottom:1px solid var(--line);
}
.fd-type{margin:0 0 2px;color:var(--champagne);font-size:.8125rem;font-weight:500}
.fd-title{font-size:1.5rem;font-weight:600;line-height:1.2}
.fd-title:focus{outline:none}
.fd-close{
  -webkit-appearance:none;appearance:none;flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:-4px -6px 0 0;border:1px solid var(--line);border-radius:50%;
  background:transparent;color:var(--bone-2);cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease);
}
@media (hover:hover){.fd-close:hover{color:var(--bone);border-color:var(--champagne)}}
.fd-body{padding:20px 20px 24px}
@media (min-width:640px){.fd-head{padding:22px 28px 16px}.fd-body{padding:24px 28px 28px}}
.fd-swatch{height:76px;border-radius:4px}
.fd-details{margin:18px 0 0;color:var(--bone-2);max-width:62ch}
.fd-table{margin-top:24px;overflow-x:auto}
.spec-table{width:100%;min-width:300px;border-collapse:collapse;font-size:.875rem;font-variant-numeric:tabular-nums}
.spec-table caption{caption-side:top;text-align:left;padding-bottom:10px;color:var(--bone);font-weight:600;font-size:.9375rem}
.spec-table th,.spec-table td{padding:9px 8px;text-align:right;border-bottom:1px solid var(--line)}
.spec-table thead th{color:var(--muted);font-size:.8125rem;font-weight:500;line-height:1.3;vertical-align:bottom}
.spec-table th:first-child{text-align:left}
.spec-table tbody th{color:var(--bone);font-weight:600}
.spec-table td{color:var(--bone-2)}
.spec-table tr.is-card th,.spec-table tr.is-card td{background:rgba(184,168,143,.1);color:var(--bone)}
.spec-table .th-short{display:none}
@media (max-width:479px){
  .spec-table th,.spec-table td{padding:8px 5px}
  .spec-table .th-long{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .spec-table .th-short{display:inline}
}
.fd-fine{margin:12px 0 0;color:var(--muted);font-size:.8125rem;line-height:1.5}
.fd-facts{display:grid;margin:22px 0 0;border-top:1px solid var(--line)}
.fd-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.fd-facts dt{color:var(--muted)}
.fd-facts dd{margin:0;text-align:right}
@media (min-width:640px){.fd-facts{grid-template-columns:1fr 1fr;column-gap:28px}}
.fd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---------- Pricing table ---------- */
.price-scroll{position:relative;max-width:820px;overflow-x:auto}
.price-table{width:100%;min-width:300px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.price-table th,.price-table td{padding:16px 0 16px 10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
.price-table thead th,.price-table thead td{padding-top:0;padding-bottom:12px;vertical-align:bottom;color:var(--bone);font-size:.875rem;font-weight:600;line-height:1.3}
.price-table tbody th{padding-left:0;text-align:left;font-weight:500;line-height:1.35}
.price-table tbody td{font-size:1.0625rem;font-weight:500}
.pt-note{display:block;margin-top:2px;color:var(--muted);font-size:.8125rem;font-weight:400}
.pt-ask{color:var(--champagne);font-size:.875rem;font-weight:500;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px}
@media (hover:hover){.pt-ask:hover{color:var(--bone)}}
@media (min-width:640px){
  .price-table tbody th{width:40%}
  .price-table th,.price-table td{padding-left:20px}
}
@media (max-width:479px){
  .price-table thead th{font-size:.8125rem}
  .price-table tbody td{font-size:.9375rem}
}

/* ---------- FAQ page (/faq) ---------- */
.faq-page .section{border-top:0}
.faq-page .section-head h1{font-size:clamp(1.5rem,3.4vw,2.125rem)}
.faq-list{max-width:780px}
.faq-more{max-width:780px;margin-top:clamp(36px,6vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.faq-more p{margin:0;color:var(--bone-2);flex:1 1 260px}

/* Motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Booking page (/book) ---------- */
.book-page .section{border-top:0}
.book-page .section-head h1{font-size:clamp(1.5rem,3.4vw,2.125rem)}
.book-cta-action{margin-top:8px}