/* ─────────────────────────────────────────────────────────────
   Indigo Dreams — shared chrome
   Tokens, base type, marquee, masthead, full-bleed plate, footer.
   Loaded by every page; each page keeps its own sections inline.
   ───────────────────────────────────────────────────────────── */

:root{
  /* Palette drawn from the Indigo Dreams logo — deep navy ground + gold foil.
     The accent tokens are still named --blue* (used across the site); they
     now carry gold so the whole page re-themes from here. */
  --ink:#0d1626;
  --ink-2:#131f33;
  --navy:#20264a;          /* the logo's navy — chips, badges */
  --cream:#f6f1e6;         /* warm ivory, sits with gold */
  --slate:#1b2436;
  --gold:#c6a25c;
  --gold-hi:#e3c583;
  --gold-deep:#8a6a34;
  --blue:#c6a25c;          /* primary accent → gold */
  --blue-hi:#e3c583;       /* hover/highlight → light gold */
  --select:#8a6a34;        /* selection + CTA-hover ground → deep gold */
  /* The same colours as bare channels, for every translucent rule, scrim and
     hairline: rgba(var(--cream-rgb),.16). A site with its own theme
     (brand.config.mjs `theme`, see themeCss() in lib/brand.ts) re-points these
     and the whole design follows, instead of keeping navy scrims under it. */
  --cream-rgb:248,244,236;
  --ink-rgb:13,22,38;
  --slate-rgb:27,36,54;
  --gold-rgb:198,162,92;
  --deep-rgb:6,11,20;
  --deep-2-rgb:9,15,27;
  --deep-3-rgb:11,17,29;
  --gutter:clamp(20px,4vw,40px);
  /* One container width for the whole site. Every key section is capped
     here and centred, so their outer edges line up with each other at any
     window width — and, just as importantly, at any browser zoom, where a
     zoomed-out viewport is simply a very wide one. */
  --wrap:1320px;
  --serif:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  /* `clip` is preferred (it doesn't turn body into a scroll container,
     which would break the sticky masthead), but it needs Chrome 90+ /
     Safari 16+. Older engines ignore it and fall back to `hidden`. */
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--blue-hi)}
::selection{background:var(--select);color:var(--cream)}
img,video{display:block;max-width:100%}

:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--cream);color:var(--slate);
  padding:12px 20px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ── shared type ─────────────────────────────────────── */
.eyebrow{
  margin:0;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
}
.display{
  font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  border-bottom:1px solid rgba(var(--cream-rgb),.16);padding-bottom:20px;
}
.section-head h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(30px,4vw,54px)}
.note{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--blue)}

/* ── keyframes ───────────────────────────────────────── */
@keyframes hh-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hh-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes hh-fade{from{opacity:0}to{opacity:1}}
/* Ken Burns family — site.js picks one per image, with a random
   duration and delay, so no two frames drift in step. */
@keyframes hh-kb{from{transform:scale(1) translateY(0)}to{transform:scale(1.11) translateY(-2%)}}
@keyframes hh-kb-out{from{transform:scale(1.12) translateY(-2%)}to{transform:scale(1) translateY(0)}}
@keyframes hh-kb-l{from{transform:scale(1.06) translateX(2.5%)}to{transform:scale(1.14) translateX(-2.5%)}}
@keyframes hh-kb-r{from{transform:scale(1.14) translateX(-2.5%)}to{transform:scale(1.06) translateX(2.5%)}}
@keyframes hh-kb-in-l{from{transform:scale(1) translate(1.5%,1.5%)}to{transform:scale(1.13) translate(-1.5%,-1.5%)}}
/* camera flash */
@keyframes hh-flash{0%{opacity:0}8%{opacity:.92}22%{opacity:.5}100%{opacity:0}}
/* the film strip runs on this */
@keyframes hh-film{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes hh-drift{0%{transform:translateY(0)}50%{transform:translateY(-9px)}100%{transform:translateY(0)}}

[data-kb]{animation:hh-kb 18s ease-in-out infinite alternate}

/* flash overlay injected by HH.flash() */
.flash{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--cream);opacity:0;mix-blend-mode:screen;
}

.reveal{opacity:0}
.reveal.is-in{animation:hh-rise 1.05s cubic-bezier(.16,1,.3,1) both}

/* ── sticky masthead ─────────────────────────────────── */
.masthead{position:sticky;top:0;z-index:60}
.bar{
  position:relative;
  background:var(--cream);color:var(--slate);
  /* One row at every width now (REQ-001/003). It used to wrap, because five
     uppercase letter-spaced labels need ~1030px beside the wordmark — so on a
     phone the labels took a second line, "Contact" a third, and the header ate
     a third of the screen before the hero began. Between 900 and 1030 the row
     tightens; below 900 the labels go behind .burger. */
  /* Brand then destinations, both on the leading edge — the row is read left
     to right rather than split to the two ends. `justify-content:flex-start`
     with a start margin on the nav rather than `space-between`, so the gap
     between the wordmark and the first label is a decision and not whatever
     the window happens to leave over. */
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:16px;
  padding:22px var(--gutter);
  border-bottom:1px solid rgba(var(--slate-rgb),.12);
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand__mark{width:clamp(34px,4.4vw,46px);height:auto;flex:0 0 auto;display:block;border-radius:8px}
.wordmark{display:flex;flex-direction:column;gap:3px;min-width:0}
.wordmark__name{font-family:var(--serif);font-weight:500;color:var(--slate);font-size:clamp(21px,4.2vw,36px);letter-spacing:.14em;line-height:1;white-space:nowrap}
.wordmark__tag{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);opacity:.72;white-space:nowrap}
/* min-width:0 lets the nav shrink below its content (flex items default to
   min-width:auto and would otherwise push the page wider). */
.bar nav{
  display:flex;gap:34px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  /* The indent is deliberately small (BUG-2026-001). It was clamp(26,4.5vw,68)
     when the destinations moved off the far edge and next to the wordmark, and
     on a wide screen 68px on top of the row's own 16px gap left the labels
     adrift — attached to nothing, halfway to a right-aligned menu that is no
     longer there. About 32px in total instead, so they read as part of the
     brand block rather than as something the window pushed across. */
  min-width:0;margin-inline-start:clamp(12px,1.2vw,20px);
}
.bar nav a{white-space:nowrap}
.bar nav a{padding-bottom:3px;border-bottom:1px solid transparent;transition:border-color .35s ease,color .35s ease}
.bar nav a[aria-current]{border-bottom-color:var(--gold)}

/* ── the menu button ─────────────────────────────────────────
   Three rules that become a cross when the panel is open. Drawn rather than
   shipped as an icon: it is two transforms, and an SVG here would be a request
   on the critical path for 40x40 of chrome. */
.burger{
  display:none;flex:0 0 auto;
  width:42px;height:42px;padding:0;cursor:pointer;
  background:none;border:1px solid rgba(var(--slate-rgb),.2);border-radius:3px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  transition:border-color .3s ease,background .3s ease;
}
.burger:hover{border-color:rgba(var(--slate-rgb),.45);background:rgba(var(--slate-rgb),.04)}
.burger span{
  display:block;width:19px;height:1.5px;background:var(--slate);
  transition:transform .32s cubic-bezier(.2,.8,.3,1),opacity .2s ease;
}
.burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── full-bleed plate ────────────────────────────────── */
.plate{position:relative;height:88vh;min-height:520px;overflow:hidden}
.plate img,.plate video{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.plate figcaption{
  position:absolute;bottom:26px;left:var(--gutter);right:var(--gutter);margin:0;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  background:rgba(var(--ink-rgb),.62);padding:9px 14px;
}

/* ── footer ──────────────────────────────────────────── */
.foot{
  background:var(--cream);color:var(--slate);
  border-top:1px solid rgba(var(--slate-rgb),.14);
  padding:clamp(24px,3vw,34px) var(--gutter);
  display:flex;flex-direction:column;gap:clamp(14px,2vw,20px);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
}
.foot__row{
  display:flex;flex-wrap:wrap;gap:14px clamp(20px,3vw,40px);
  align-items:center;justify-content:space-between;
}
.foot__row--fine{border-top:1px solid rgba(var(--slate-rgb),.12);padding-top:clamp(14px,2vw,20px)}
.foot__links{display:flex;flex-wrap:wrap;gap:10px clamp(18px,2.6vw,30px)}
.foot__links a{opacity:.82;transition:opacity .35s ease}
.foot__links a:hover{opacity:1}
.foot__social{display:flex;gap:12px}
.foot__social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(var(--slate-rgb),.22);opacity:.78;
  transition:opacity .35s ease,border-color .35s ease,background .35s ease;
}
.foot__social a:hover{opacity:1;border-color:var(--gold);background:rgba(var(--gold-rgb),.12)}
.foot__place{opacity:.65}

/* On a phone the two rows used to wrap into six or seven ragged lines, which
   is the "visually fragmented" ending REQ-006 describes. Each row becomes a
   deliberate stack instead — links centred on one or two lines, the social
   icons and the language menu on their own centred line — and the type comes
   down a step so four destinations fit across a 360px screen. */
@media (max-width:720px){
  .foot{
    padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
    gap:14px;font-size:10px;letter-spacing:.13em;text-align:center;
  }
  .foot__row{justify-content:center;gap:12px 18px}
  .foot__row--fine{padding-top:13px;gap:11px 18px}
  .foot__links{justify-content:center;gap:8px 16px}
  .foot__mark{order:3;width:100%;opacity:.65}
  .foot__social{order:2;gap:10px}
  .foot__social a,.foot__icon{width:34px;height:34px}
  .foot__place{width:100%;order:3}
}

/* ── the closing invitation ───────────────────────────────────
   BUG-002: this lived in home.css, so only the pages that loaded home.css
   could draw it — and one of them (Looks/Shoot/Cast & Crew) drew `.bk`
   instead while Contact, the legal pages and the crew pages drew nothing at
   all. It is shared chrome now, beside the masthead and the footer, which is
   what site.css is for: a page cannot render the invitation without its
   styles, because it cannot render at all without this file. */
/* ── the closing invitation ──────────────────────────── */
/* The last cream band on the page, and the one that carried the most: the
   photograph on the right had a cream scrim fading into it, and the CTA was a
   dark button on light. Both are inverted — an ink scrim, and the gold-outline
   button the invitation on every other page already uses. */
.st{position:relative;background:var(--ink);overflow:hidden}
.st__bg{
  position:absolute;inset-inline-end:0;top:0;bottom:0;width:52%;
  object-fit:cover;object-position:50% 44%;
}
/* The scrim over the photograph.
   It hangs off .st rather than .st__in::before, because .st__in is capped at
   --wrap and centred: its 52% is 52% of 1320, offset from the image's 52% of
   the full-bleed section, so the scrim missed the outer edge of the very
   thing it is covering.
   The ramp also changed. On cream this only had to fade a light panel into a
   light photograph, and the column's dark text stayed readable wherever it
   landed. On navy the column's text is light, so it needs real ground the
   whole way across: near-opaque from the inner edge out to 60%, and only then
   opening up so the photograph is still a photograph on the far side. */
.st::after{
  content:'';position:absolute;inset-inline-end:0;top:0;bottom:0;width:52%;
  z-index:1;pointer-events:none;
  background:linear-gradient(to left,rgba(var(--ink-rgb),.5),rgba(var(--ink-rgb),.97) 60%);
}
/* `to inline-start` was here before, which is not valid gradient syntax —
   logical keywords were never adopted for linear-gradient — so the whole
   declaration was dropped and the scrim never painted at all. Physical now,
   with an RTL mirror, since Hebrew puts the photograph on the other side. */
[dir=rtl] .st::after{
  background:linear-gradient(to right,rgba(var(--ink-rgb),.5),rgba(var(--ink-rgb),.97) 60%);
}
.st__in{
  position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:clamp(48px,7vw,96px) var(--gutter);
  border-top:1px solid rgba(var(--cream-rgb),.16);
  display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:center;
}
.st__text .eyebrow{color:var(--blue);margin-bottom:clamp(14px,2vw,20px)}
.st__text h2{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.4vw,58px);line-height:1.06;letter-spacing:-.01em;text-wrap:balance;
}
.st__lines{list-style:none;margin:0 0 clamp(20px,3vw,28px);padding:0;font-size:15px;line-height:1.8;font-weight:300;opacity:.84}
.st__btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:17px 36px;background:none;color:var(--gold);border:1px solid var(--gold);
  font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .4s ease,color .4s ease,border-color .4s ease;
}
.st__btn i{font-style:normal;font-size:12px;opacity:.7}
.st__btn:hover{background:var(--gold);border-color:var(--gold);color:var(--slate)}
/* The one per-page variation: The Shoot credits its photographer here. */
.st__by{margin:clamp(12px,1.8vw,16px) 0 0;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--blue);opacity:.9}
.st__note{margin:clamp(16px,2.4vw,22px) 0 0;font-size:12px;letter-spacing:.06em;opacity:.66}
.st__note a{border-bottom:1px solid rgba(var(--cream-rgb),.38)}
@media (max-width:860px){
  .st__bg{position:relative;width:100%;height:min(34vh,240px);display:block}
  .st::after{display:none}
  .st__in{grid-template-columns:1fr}
}
/* REQ-006: the end of the page was a photograph, then a heading, then three
   lines, then a button, then a note — five full-width slabs with a big gap
   between each, which is the "fragmented" ending the report describes. One
   compact group instead: the three steps run across in a single row divided by
   hairlines, and
   the supporting line, the button and the credit close up under them. The site
   footer follows as its own lighter band, which it already was. */
@media (max-width:620px){
  .st__in{padding:clamp(24px,5.4vw,34px) var(--gutter);gap:16px}
  .st__text h2{font-size:clamp(27px,7.6vw,38px)}
  .st__text .eyebrow{margin-bottom:11px}
  /* The three steps between hairlines rather than in a tall stack. Whether
     they run across is a question of room, not of breakpoint: all three plus
     their dividers need about 440px, so below that they stay one per line —
     just tight, with the enclosing rules doing the structuring the big gaps
     used to. Wrapping the flex row instead would drop a dangling divider onto
     the front of the second line. */
  .st__lines{
    margin:0 0 18px;padding:12px 0;
    border-top:1px solid rgba(var(--cream-rgb),.18);
    border-bottom:1px solid rgba(var(--cream-rgb),.18);
    font-size:12.5px;line-height:1.75;
  }
  .st__btn{width:100%;justify-content:center;padding:15px 22px}
  .st__note{margin-top:13px;font-size:11.5px}
}
@media (min-width:481px) and (max-width:620px){
  .st__lines{
    display:flex;flex-wrap:nowrap;align-items:center;
    gap:0;line-height:1.4;
  }
  .st__lines li{white-space:nowrap}
  .st__lines li + li::before{
    content:'';display:inline-block;width:1px;height:11px;
    margin-inline:10px;vertical-align:middle;
    background:rgba(var(--cream-rgb),.3);
  }
}

/* ── responsive ──────────────────────────────────────── */
/* The band where the row still fits, but only just: the labels close up and
   the wordmark stops growing, so nothing wraps and no button is needed yet. */
@media (max-width:1030px){
  .bar{padding:18px var(--gutter)}
  .bar nav{gap:20px;font-size:10.5px;letter-spacing:.16em}
}
/* Below this the labels fold behind the button and the bar is one compact row:
   mark, wordmark, button. Nothing is removed — the <nav> is still in the
   markup, so no-JS and crawlers keep all five destinations. */
@media (max-width:900px){
  .bar{gap:12px;padding:11px var(--gutter)}
  .brand{gap:10px}
  .brand__mark{width:36px;border-radius:7px}
  .wordmark{gap:2px}
  .wordmark__name{font-size:clamp(19px,5.6vw,25px);letter-spacing:.11em}
  .wordmark__tag{font-size:8.5px;letter-spacing:.19em}
  /* The button sits on the trailing edge, the brand on the leading one — the
     row reads INDIGO DREAMS … [☰], which is where the menu was before the header
     was rebuilt and where a thumb expects it. It follows the brand in the
     markup, so it needs no `order`; the auto margin on .brand is what pushes
     it to the far end. Logical rather than physical sides: under Hebrew the
     flex axis reverses and the button lands on the left, which is the
     trailing edge there. */
  .bar{justify-content:flex-start}
  .burger{display:flex}
  .brand{margin-inline-end:auto}
  .bar nav{
    position:absolute;top:100%;inset-inline:0;z-index:2;
    margin-inline-start:0;
    flex-direction:column;gap:0;
    background:var(--cream);
    border-bottom:1px solid rgba(var(--slate-rgb),.14);
    box-shadow:0 22px 44px rgba(var(--ink-rgb),.16);
    font-size:12px;letter-spacing:.2em;
    /* Shut by default and folded away rather than display:none, so opening it
       is an animation and the links stay in the accessibility tree for the
       no-JS case below. */
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .34s cubic-bezier(.2,.8,.3,1),visibility .34s linear;
  }
  .bar nav.is-open{max-height:70vh;visibility:visible;overflow-y:auto}
  .bar nav a{
    padding:15px var(--gutter);border-bottom:0;
    border-top:1px solid rgba(var(--slate-rgb),.1);
  }
  .bar nav a:first-child{border-top:0}
  .bar nav a[aria-current]{color:var(--gold-deep);border-bottom-color:transparent}
  .bar nav a[aria-current]::before{
    content:'';display:inline-block;width:14px;height:1px;
    margin-inline-end:9px;vertical-align:middle;background:var(--gold);
  }
}
/* No script, no toggle — so the panel could never be opened and must not be
   the thing hiding the site's navigation. Asked in CSS rather than through a
   `no-js` class an inline script removes: that class is on an element React
   also owns, and this needs no script to be correct in the first place. The
   fallback is simply the wrapped row this header used to be. */
@media (max-width:900px) and (scripting: none){
  .bar{flex-wrap:wrap}
  .burger{display:none}
  .bar nav{
    position:static;max-height:none;visibility:visible;overflow:visible;
    flex-direction:row;flex-wrap:wrap;gap:10px 20px;width:100%;margin-inline-start:0;
    background:none;box-shadow:none;border-bottom:0;
    font-size:10.5px;letter-spacing:.16em;padding-bottom:2px;
  }
  .bar nav a{padding:0;border-top:0}
  .bar nav a[aria-current]{border-bottom-color:var(--gold)}
  .bar nav a[aria-current]::before{content:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{opacity:1}
}

/* ── language switcher ───────────────────────────────── */
.langsw{position:relative;display:inline-flex}
.langsw__btn{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid rgba(var(--slate-rgb),.22);border-radius:2px;
  color:var(--slate);font:inherit;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding:5px 10px;cursor:pointer;
}
.langsw__btn:hover{border-color:var(--slate)}
.langsw__globe{font-size:13px;line-height:1}
/* In the footer the menu must open upward, and it must never inherit the
   footer's list styling — it renders as a <ul>. */
.langsw--up .langsw__menu{top:auto;bottom:calc(100% + 8px)}
.foot .langsw__menu li{margin:0;padding:0;list-style:none}
.langsw__menu{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:120;
  list-style:none;
  margin:0;padding:6px;list-style:none;
  background:var(--cream);border:1px solid rgba(var(--slate-rgb),.18);
  box-shadow:0 18px 44px rgba(var(--ink-rgb),.22);
  max-height:min(62vh,420px);overflow-y:auto;min-width:210px;
}
.langsw__item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:none;border:0;cursor:pointer;color:var(--slate);
  font:inherit;font-size:13px;letter-spacing:.04em;text-align:start;
  padding:8px 10px;
}
.langsw__item:hover{background:rgba(var(--slate-rgb),.07)}
.langsw__item.is-on{font-weight:500}
.langsw__item.is-on i{color:var(--blue)}
.langsw__item i{font-style:normal;font-size:10px;letter-spacing:.16em;opacity:.5}

/* ── RTL (Hebrew) ────────────────────────────────────── */
/* The layout is built from flexbox + logical padding, so direction alone does
   most of the work; these are the places that hard-coded a physical side. */
[dir="rtl"] .plate figcaption{left:var(--gutter);right:var(--gutter)}
[dir="rtl"] .langsw__menu{inset-inline-end:auto;inset-inline-start:0}
/* The menu panel is pinned with inset-inline so it mirrors on its own; the
   current-page rule is drawn with a physical margin, so it needs the flip. */
[dir="rtl"] .bar nav a[aria-current]::before{margin-inline-end:0;margin-inline-start:9px}

/* ── the booking form ────────────────────────────────── */
/* Every "book" CTA opens this rather than handing the visitor to Telegram:
   the message is posted to the server, which sends it on to the maison's
   group. The trigger inherits whichever button class the page gives it. */
.foot__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:none;color:inherit;padding:0;
  border:1px solid rgba(var(--slate-rgb),.22);opacity:.78;
  transition:opacity .35s ease,border-color .35s ease,background .35s ease;
}
.foot__icon:hover{opacity:1;border-color:var(--gold);background:rgba(var(--gold-rgb),.12)}

.bf{
  position:fixed;inset:0;z-index:130;
  display:flex;align-items:center;justify-content:center;padding:clamp(14px,3vw,36px);
  background:rgba(var(--deep-rgb),.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:hh-fade .26s ease both;
}
.bf__card{
  position:relative;width:min(96vw,560px);max-height:92vh;overflow-y:auto;
  background:var(--ink-2);color:var(--cream);
  border:1px solid rgba(var(--gold-rgb),.34);border-radius:8px;
  padding:clamp(24px,4vw,40px);
  box-shadow:0 50px 130px rgba(0,0,0,.66);
  /* BUG-004 — the dialog is rendered where its trigger is, not portalled to
     the body, so it inherits whatever the surrounding section sets. Three
     properties have to be taken back: the footer is uppercase and
     letter-spaced, and since the mobile footer became centred (REQ-006) it was
     centring this form too — so the same booking form read left-aligned from
     "Book your session" and centred from the footer's Telegram icon. Reset
     rather than made specific: any future section that styles its text would
     otherwise leak in here the same way. */
  text-transform:none;letter-spacing:normal;text-align:start;
}
.bf__card .eyebrow{color:var(--blue);margin-bottom:10px}
.bf__lede{margin:0 0 clamp(18px,2.6vw,26px);font-size:14px;line-height:1.65;font-weight:300;opacity:.78;text-wrap:pretty}
.bf__close{
  position:absolute;top:12px;inset-inline-end:12px;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(var(--cream-rgb),.28);background:none;color:var(--cream);
  font-size:13px;transition:background .35s ease,color .35s ease;
}
.bf__close:hover{background:var(--cream);color:var(--slate)}
.bf__row{display:flex;flex-wrap:wrap;gap:12px}
.bf__row .bf__field{flex:1 1 200px}
.bf__field{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.bf__field span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.bf__field input,.bf__field textarea{
  width:100%;padding:13px 15px;
  background:rgba(var(--ink-rgb),.6);color:var(--cream);
  border:1px solid rgba(var(--cream-rgb),.2);border-radius:4px;
  font-family:var(--sans);font-size:14px;line-height:1.5;
  transition:border-color .35s ease;
}
.bf__field textarea{resize:vertical;min-height:104px}
.bf__field input::placeholder,.bf__field textarea::placeholder{color:rgba(var(--cream-rgb),.38)}
.bf__field input:focus,.bf__field textarea:focus{outline:none;border-color:var(--gold)}
/* the booking variant's date and "dates are flexible" (see EnquiryForm) */
.bf__field input[type=date]{color-scheme:dark;min-height:48px}
.bf__row .bf__check{flex:1 1 200px}
.bf__check{display:flex;align-items:center;gap:11px;align-self:flex-end;min-height:48px;margin-bottom:12px;font-size:14px;line-height:1.4;cursor:pointer}
.bf__check input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--gold);cursor:pointer}
.bf__foot{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:6px}
.bf__send{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  padding:15px 32px;border:1px solid var(--gold);border-radius:4px;
  background:var(--gold);color:var(--slate);font-family:var(--sans);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .35s ease,color .35s ease;
}
.bf__send i{font-style:normal;font-size:12px;opacity:.75}
.bf__send:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.bf__send[disabled]{opacity:.55;cursor:default}
.bf__status{font-size:13px;line-height:1.5;opacity:.8;flex:1 1 180px}
.bf__status.is-ok{color:var(--gold-hi);opacity:1}
.bf__status.is-err{color:#e6a2ae;opacity:1}

/* the Turnstile widget, in both the booking dialog and the contact form */
.ts{min-height:65px;margin:2px 0 4px}
.ts iframe{max-width:100%}

/* Scroll-lock for any overlay (book dialog, lightboxes). site.css loads on
   every page; this used to live only in home.css, so the lock was dead on
   credits/contact/crew/privacy/cookies/terms. */
body.is-locked{overflow:hidden}

/* ── ZoomStrip: the shared photo lightbox ────────────────────
   Lives here rather than in looks.css because more than one page opens it
   now — the Looks rows, and the four detail crops in the making band, which
   the homepage and the Looks page both carry. A page that loaded only
   home.css used to get the markup with none of these rules. */
.lkz{
  position:relative;display:block;min-width:0;overflow:hidden;
  padding:0;border:0;background:none;color:inherit;cursor:zoom-in;
}
.lkz img{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.lkz__hint{
  position:absolute;inset-inline-end:10px;bottom:10px;z-index:2;
  width:26px;height:26px;display:grid;place-items:center;
  border:1px solid rgba(var(--cream-rgb),.4);border-radius:50%;
  color:var(--cream);font-size:15px;line-height:1;opacity:0;
  background:rgba(var(--ink-rgb),.45);transition:opacity .35s ease;pointer-events:none;
}
@media (hover:hover){
  .lkz:hover img{transform:scale(1.04)}
  .lkz:hover .lkz__hint,.lkz:focus-visible .lkz__hint{opacity:1}
}
/* nothing hovers on a touch screen, so the affordance has to be standing */
@media (hover:none){.lkz__hint{opacity:.7}}

/* ── ZoomStrip in carousel mode (REC-005) ────────────────────
   --zs-per tiles visible, sized so exactly that many fill the rail, and one
   snap point per tile. An arrow press scrolls a whole screenful, which is
   therefore a whole set of --zs-per. Native overflow rather than transforms:
   a trackpad swipe, a touch drag and a keyboard user tabbing to a tile off
   the end all keep working for free. */
.zs{position:relative}
.zs__rail{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--zs-per,4) - 1) * var(--zs-gap,3px)) / var(--zs-per,4));
  gap:var(--zs-gap,3px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
.zs__rail::-webkit-scrollbar{display:none}
.zs__rail > *{scroll-snap-align:start}
.zs__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(var(--cream-rgb),.3);border-radius:50%;
  background:rgba(var(--ink-rgb),.72);color:var(--cream);
  font-size:15px;line-height:1;cursor:pointer;
  transition:background .3s ease,opacity .3s ease;
}
.zs__nav i{font-style:normal}
/* the glyph points at the near edge of the screen, which swaps under RTL */
[dir=rtl] .zs__nav i{transform:scaleX(-1)}
.zs__nav:hover{background:rgba(var(--ink-rgb),.95)}
.zs__nav[disabled]{opacity:.22;cursor:default}
.zs__nav--prev{inset-inline-start:7px}
.zs__nav--next{inset-inline-end:7px}
@media (max-width:560px){.zs__nav{width:32px;height:32px;font-size:13px}}

/* ── the lightbox: fitted first, then magnified where you point ── */
.lz{
  position:fixed;inset:0;z-index:120;
  background:rgba(var(--deep-2-rgb),.96);
  display:flex;align-items:center;justify-content:center;
  animation:hh-fade .3s ease both;
}
.lz__stage{
  width:min(94vw,1400px);height:88vh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  cursor:zoom-in;touch-action:none;
}
.lz__stage.is-zoomed{cursor:grab}
.lz__stage.is-zoomed:active{cursor:grabbing}
.lz__stage img{
  max-width:100%;max-height:100%;user-select:none;-webkit-user-drag:none;
  transition:transform .18s ease-out;will-change:transform;
}
.lz__close{
  position:absolute;top:18px;right:20px;z-index:2;
  padding:10px 13px;border:0;background:none;color:var(--cream);
  font-size:19px;cursor:pointer;opacity:.8;
}
.lz__close:hover{opacity:1}
.lz__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  padding:14px 16px;border:1px solid rgba(var(--cream-rgb),.25);border-radius:50%;
  background:rgba(var(--ink-rgb),.5);color:var(--cream);font-size:17px;cursor:pointer;
  transition:background .3s ease;
}
.lz__nav:hover{background:rgba(var(--ink-rgb),.9)}
.lz__nav--prev{left:clamp(8px,2vw,28px)}
.lz__nav--next{right:clamp(8px,2vw,28px)}
.lz__bar{
  position:absolute;left:0;right:0;bottom:14px;margin:0;
  display:flex;justify-content:center;gap:18px;
  font-size:12px;letter-spacing:.18em;color:var(--cream);opacity:.7;
}
@media (max-width:700px){
  .lz__nav{padding:11px 13px}
  .lz__stage{width:100vw;height:84vh}
}

/* ── cookie consent ──────────────────────────────────────────
   Sits at the foot of the window, over everything, until a choice is made.
   Accept and Decline are given the same visual weight on purpose: a decline
   styled as the lesser option is a dark pattern, and in the EU it is also the
   thing that makes the consent invalid. */
.cc{position:fixed;inset-inline:0;bottom:0;z-index:900;background:rgba(var(--deep-3-rgb),.97);
    border-top:1px solid rgba(var(--gold-rgb),.35);backdrop-filter:blur(8px);
    padding:20px 22px;animation:cc-in .34s cubic-bezier(.2,.8,.3,1) both}
@keyframes cc-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cc__in{max-width:940px;margin:0 auto;color:var(--cream)}
.cc h2{font-family:'Bodoni Moda',Georgia,serif;font-weight:400;font-size:20px;margin:0 0 7px;color:var(--cream)}
.cc p{margin:0;font-size:13.5px;line-height:1.62;opacity:.82;max-width:74ch}
.cc a{color:var(--gold-hi)}
.cc__opts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.cc__opts li{display:grid;gap:2px}
.cc__opts label{display:flex;gap:9px;align-items:center;font-size:13px;cursor:pointer}
.cc__opts input{accent-color:var(--gold);width:15px;height:15px}
.cc__opts input:disabled{opacity:.5;cursor:default}
.cc__opts b{font-weight:500}
.cc__opts span{font-size:12px;opacity:.6;padding-inline-start:24px;line-height:1.5}
.cc__act{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px}
.cc__btn{flex:0 1 200px;background:none;border:1px solid rgba(var(--cream-rgb),.42);color:var(--cream);
         padding:11px 22px;font:inherit;font-size:13px;cursor:pointer;border-radius:3px;transition:border-color .15s,background .15s}
.cc__btn:hover{border-color:var(--gold);background:rgba(var(--gold-rgb),.1)}
.cc__link{background:none;border:0;color:var(--cream);font:inherit;font-size:13px;text-decoration:underline;
          text-underline-offset:3px;cursor:pointer;padding:11px 0;margin-inline-end:auto}
.cc__link:hover{color:var(--gold-hi)}
.foot__consent{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;text-decoration:none;opacity:.75}
.foot__consent:hover{opacity:1;text-decoration:underline}
@media (max-width:620px){
  .cc{padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .cc__act{flex-direction:column;align-items:stretch}
  .cc__link{margin:0;text-align:center}
  .cc__btn{flex:1 1 auto}
}

/* ── search ──────────────────────────────────────────────
   The masthead control (SiteSearch.tsx), its overlay and the /search page.
   Every colour is a token, so a site's theme carries it. On a desktop the
   button sits on the trailing edge of the bar; below 900px it is the
   magnifier alone, just ahead of the menu button. */
.ss-btn{
  order:5;margin-inline-start:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 14px;border:1px solid rgba(var(--slate-rgb),.22);border-radius:999px;
  color:var(--slate);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;transition:border-color .3s ease,background .3s ease,color .3s ease;
}
.ss-btn:hover{color:var(--slate);border-color:var(--gold);background:rgba(var(--gold-rgb),.1)}
.ss-btn svg{flex:0 0 auto}
@media (max-width:900px){
  .ss-btn{order:0;margin-inline-start:0;width:42px;height:42px;padding:0;justify-content:center;border-radius:3px}
  .ss-btn__word{display:none}
}
.ss{
  position:fixed;inset:0;z-index:950;
  background:rgba(var(--deep-rgb),.82);backdrop-filter:blur(6px);
  display:flex;justify-content:center;align-items:flex-start;
  padding:clamp(56px,11vh,120px) var(--gutter) 24px;
  animation:hh-rise .28s cubic-bezier(.16,1,.3,1) both;
}
.ss__panel{
  width:min(720px,100%);max-height:calc(100vh - clamp(80px,14vh,150px));
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink-2);color:var(--cream);
  border:1px solid rgba(var(--gold-rgb),.34);border-radius:8px;
  box-shadow:0 50px 130px rgba(0,0,0,.55);
}
.ss__bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(var(--cream-rgb),.14);color:var(--gold)}
.ss__input{
  flex:1 1 auto;min-width:0;background:none;border:0;outline:none;
  color:var(--cream);font:inherit;font-family:var(--serif);font-size:clamp(19px,2.6vw,24px);padding:6px 0;
}
.ss__input::placeholder{color:rgba(var(--cream-rgb),.4)}
.ss__input::-webkit-search-cancel-button{display:none}
.ss__close{
  flex:0 0 auto;background:none;border:1px solid rgba(var(--cream-rgb),.28);border-radius:4px;
  color:var(--cream);font:inherit;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 9px;cursor:pointer;opacity:.75;
}
.ss__close:hover{opacity:1;border-color:var(--gold)}
.ss__out{overflow-y:auto;padding:6px 0 12px}
.ss__none{margin:0;padding:18px;font-size:14px;opacity:.65}
.ss__group{padding:10px 0 2px}
.ss__label{margin:0;padding:4px 18px 6px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.ss__list{list-style:none;margin:0;padding:0}
.ss__hit{display:block;padding:10px 18px;border-inline-start:2px solid transparent;transition:background .2s ease}
.ss__hit b{display:block;font-weight:400;font-size:15px;line-height:1.35}
.ss__hit span{display:block;margin-top:3px;font-size:12.5px;line-height:1.55;opacity:.62}
.ss__hit:hover,.ss__hit:focus-visible,.ss__hit.is-first{background:rgba(var(--gold-rgb),.1);border-inline-start-color:var(--gold);color:var(--cream)}
.ssp{max-width:820px;margin:0 auto;padding:clamp(48px,8vw,110px) var(--gutter)}
.ssp__form{display:flex;gap:10px;margin:14px 0 28px}
.ssp__input{
  flex:1 1 auto;min-width:0;background:var(--ink-2);color:var(--cream);
  border:1px solid rgba(var(--cream-rgb),.22);border-radius:4px;padding:13px 15px;font:inherit;font-size:16px;
}
.ssp__go{
  flex:0 0 auto;background:var(--gold);color:var(--slate);border:0;border-radius:4px;
  padding:0 20px;font:inherit;font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
}
.ssp .ss__label,.ssp .ss__hit{padding-inline:0}
.ssp .ss__hit{padding-inline-start:12px}