/* ============================================================
   booking2.css — guided "Start your Academy" booking flow
   1. Greet   — full-viewport welcome, fades away as you scroll
   2. Choice  — scroll-scrubbed split + 3D-flip reveal of the two
                option cards (free preview / meeting), clickable
   3. Form    — shared .book-hero styles live in styles.css

   Scroll engine ported from D:\Cursor\redomedia (journey.css):
   CSS scroll-driven animations (view-timeline + animation-range)
   over a 280vh runway with a sticky 100vh stage. No JS scrub.
   Base custom-prop values = final revealed state, so browsers
   without animation-timeline render the finished layout
   statically (the @supports block also removes the runway).
   Everything scoped under .greet / .choice / .ch-*.
   ============================================================ */

/* ---------- animated custom properties ---------- */
@property --ch-zoom { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --ch-tx   { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ch-tx2  { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ch-ty   { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ch-rz   { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --ch-ry   { syntax: '<angle>';  inherits: false; initial-value: 0deg; }

/* ============ STAGE BACKDROP — layered theatre atmosphere ============
   Three .stage components: data-scope="top" (in .greet), "bottom" (in
   .ch-pin) and "span" (a sticky full-viewport stage inside .stage-span,
   the wrapper around BOTH dark sections). Each layer is gated by an
   on-<layer> class ON ITS OWN STAGE, so the two sections can carry
   different looks. body.bg-unified switches to the single continuous
   span stage (no restart at the section boundary). All layers animate
   transform/opacity only (compositor-cheap), no filters. */
.stage-span{ position:relative; background:#1a0c0a; }   /* the maroon lives on the wrapper now */
.greet, .choice { background:transparent; }

.stage{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.stage > span{ display:none; }

/* unified stage: a full-height absolute rail carries a sticky 100vh stage, so
   the backdrop rides the viewport for the whole greet+choice scroll and is
   constrained EXACTLY to the wrapper. (Never use a negative margin-bottom on
   the sticky element itself for this — negative margins EXPAND the sticky
   constraint rect, letting the stage stick 100vh past the wrapper over the
   FAQ, which is exactly the bug that pattern caused.) */
.stage-rail{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.stage--span{ position:sticky; inset:auto; top:0; height:100vh; display:none; }
body.bg-unified .stage--span{ display:block; }
body.bg-unified .stage[data-scope="top"],
body.bg-unified .stage[data-scope="bottom"]{ display:none; }

/* belt and braces: everything after the wrapper paints above any backdrop */
.faq, .explore{ position:relative; z-index:1; }

/* — shader: vanilla WebGL ports of the ReactBits backgrounds (base layer,
     canvases injected by js/booking2-shaders.js; CSS layers can sit on top) — */
.stage.on-shader .stage-shader{ display:block; position:absolute; inset:0; }
.stage-shader canvas{ position:absolute; inset:0; width:100%; height:100%; }

/* — velvet: barely-there fabric tonal variation + a curtain-dark vignette.
     Turbulence notes (hard-won): filter region MUST be x/y 0, 100%×100% or
     stitchTiles can't tile seamlessly (visible patch seams); baseFrequency is
     (x,y) — fast-x/slow-y gives TALL streaks like hanging fabric; alpha is
     forced opaque + RGB compressed to mid-gray so the overlay blend only
     gently modulates the maroon underneath instead of painting gray over it — */
.stage.on-velvet .stage-velvet{
  display:block; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045 0.006' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='0.5' intercept='0.25'/%3E%3CfeFuncG type='linear' slope='0.5' intercept='0.25'/%3E%3CfeFuncB type='linear' slope='0.5' intercept='0.25'/%3E%3CfeFuncA type='linear' slope='0' intercept='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='480' height='480' filter='url(%23v)'/%3E%3C/svg%3E");
  background-size:480px 480px;
  mix-blend-mode:overlay; opacity:.45;
}
.stage.on-velvet .stage-velvet::after{           /* vignette: light falls off like curtain folds */
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(10,4,3,.5) 100%);
}

/* — spotlight: a warm glow that breathes on a slow stage rhythm — */
.stage.on-glow .stage-glow{
  display:block; position:absolute; left:50%; top:46%;
  width:min(1150px,130vw); aspect-ratio:1.55;
  translate:-50% -50%;
  background:radial-gradient(closest-side, rgba(217,132,84,.16), rgba(173,26,26,.11) 46%, transparent 72%);
  animation:glow-breathe 26s ease-in-out infinite;
}
@keyframes glow-breathe{
  0%,100%{ opacity:.7;  transform:scale(1)    translate(0,0); }
  46%    { opacity:1;   transform:scale(1.14) translate(1.5%,-2%); }
  72%    { opacity:.85; transform:scale(1.06) translate(-1%,1%); }
}

/* — haze: soft atmospheric pools drifting at two speeds, like smoke in a light rig — */
.stage.on-haze .stage-haze{ display:block; position:absolute; inset:0; }
.stage.on-haze .stage-haze::before,
.stage.on-haze .stage-haze::after{
  content:""; position:absolute; inset:-22%;
  background:
    radial-gradient(42% 30% at 30% 62%, rgba(240,205,170,.07), transparent 70%),
    radial-gradient(52% 36% at 70% 38%, rgba(222,160,128,.065), transparent 72%),
    radial-gradient(36% 26% at 52% 78%, rgba(255,228,196,.055), transparent 70%);
  animation:haze-a 52s ease-in-out infinite alternate;
}
.stage.on-haze .stage-haze::after{
  transform:rotate(9deg);
  background:
    radial-gradient(46% 30% at 62% 66%, rgba(238,196,158,.06), transparent 72%),
    radial-gradient(38% 26% at 26% 36%, rgba(250,220,190,.055), transparent 70%);
  animation:haze-b 74s ease-in-out infinite alternate;
}
@keyframes haze-a{ from{ transform:translate3d(-3%,1.5%,0); } to{ transform:translate3d(3%,-2%,0); } }
@keyframes haze-b{ from{ transform:rotate(9deg) translate3d(2.5%,-1%,0); } to{ transform:rotate(9deg) translate3d(-2.5%,2%,0); } }

/* — dust: sparse warm motes caught in the beam (spans spawned by JS,
     randomized size/position/drift so nothing reads geometric) — */
.stage.on-dust .stage-dust{ display:block; position:absolute; inset:0; }
.stage-dust i{
  position:absolute; border-radius:50%;
  background:#f7e9d2; box-shadow:0 0 6px 1px rgba(247,233,210,.45);
  opacity:0;
  animation:dust-drift var(--dur,28s) linear var(--delay,0s) infinite;
}
@keyframes dust-drift{
  0%  { opacity:0; transform:translate3d(0,0,0); }
  10% { opacity:var(--o,.5); }
  80% { opacity:calc(var(--o,.5)*.55); }
  100%{ opacity:0; transform:translate3d(var(--dx,20px), var(--dy,-90px), 0); }
}

/* — grain: fine film grain, jumping in discrete steps like real stock — */
.stage.on-grain .stage-grain{
  display:block; position:absolute; inset:-12%;
  background:url('../assets/img/noise.png') left top / 176px auto repeat;
  mix-blend-mode:overlay; opacity:.14;
  animation:grain-jitter 1.3s steps(1) infinite;
}
@keyframes grain-jitter{
  0%   { transform:translate(0,0); }
  12.5%{ transform:translate(-1.6%,1.1%); }
  25%  { transform:translate(1.2%,-0.8%); }
  37.5%{ transform:translate(-0.7%,-1.4%); }
  50%  { transform:translate(1.5%,0.6%); }
  62.5%{ transform:translate(-1.1%,-0.4%); }
  75%  { transform:translate(0.8%,1.3%); }
  87.5%{ transform:translate(-1.4%,0.3%); }
  100% { transform:translate(0,0); }
}

/* — dots: the old redomedia grid, kept only so it can be compared — */
.stage.on-dots .stage-dots{
  display:block; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f6efe5' d='M0 0h2v2H0z'%3E%3C/path%3E%3C/svg%3E");
  background-size:24px 24px;
  opacity:.05;
}

/* ============ 1. GREET ============ */
.greet {
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  overflow:clip;
  view-timeline:--greet block;
}
/* content drifts up + fades as the visitor scrolls on (scrubbed, reversible) */
.greet-inner {
  position:relative; z-index:1; text-align:center; padding:0 24px;
  animation:greet-out auto linear both;
  animation-timeline:--greet;
  animation-range:exit 0% exit 65%;
}
@keyframes greet-out {
  from { opacity:1; translate:0 0;     scale:1; }
  to   { opacity:0; translate:0 -70px; scale:.96; }
}
/* load-in lives on the children so it can't fight the scrub above */
.greet-eyebrow {
  margin:0 0 22px; font-family:var(--font-sans); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(246,239,229,.55);
  animation:greet-in .9s cubic-bezier(.22,.61,.36,1) .15s both;
}
.greet-title {
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(52px,9.5vw,116px); line-height:.98; letter-spacing:-.01em;
  color:var(--c-cream); text-shadow:0 0 26px rgba(246,239,229,.22);
  animation:greet-in 1s cubic-bezier(.22,.61,.36,1) .3s both;
}
.greet-title em { font-style:italic; }
.greet-sub {
  margin:26px auto 0; max-width:430px; font-family:var(--font-sans);
  font-size:16px; line-height:1.5; color:rgba(246,239,229,.66);
  animation:greet-in 1s cubic-bezier(.22,.61,.36,1) .45s both;
}
@keyframes greet-in { from{opacity:0; translate:0 26px;} to{opacity:1; translate:0 0;} }

.greet-cue {
  position:absolute; left:50%; bottom:30px; translate:-50% 0; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  animation:greet-cue-out auto linear both;
  animation-timeline:--greet;
  animation-range:exit 0% exit 25%;
}
@keyframes greet-cue-out { from{opacity:1;} to{opacity:0;} }
.greet-cue__label {
  font-family:var(--font-sans); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(246,239,229,.5);
}
.greet-cue__line {
  width:1px; height:44px; position:relative; overflow:hidden;
  background:rgba(246,239,229,.15);
}
.greet-cue__line::after {
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--c-cream);
  animation:cue-drop 1.8s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cue-drop { 0%{top:-100%;} 55%{top:0;} 100%{top:100%;} }

/* ============ 2. CHOICE — scroll split + flip ============ */
.choice {
  position:relative;
  height:280vh;                       /* scroll runway that drives the scrub */
  view-timeline:--choice block;
}
.ch-pin {
  position:sticky; top:0; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:64px; padding:96px 48px 40px;   /* gap sized so the 1.18-scaled strip (≈42px overhang) never crowds the heading */
  overflow:clip; z-index:1;           /* crops the 1.18-scaled strip like the original */
}
.ch-heading {
  position:relative; z-index:1;       /* above the .stage backdrop layers */
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:clamp(34px,4.6vw,54px); line-height:1; letter-spacing:-.01em;
  color:var(--c-cream); text-shadow:0 0 18px rgba(246,239,229,.25);
  text-align:center; white-space:nowrap;
  animation:ch-heading auto linear both;
  animation-timeline:--choice;
  animation-range:entry 26% contain 30%;
}
.ch-heading em { font-style:italic; }
@keyframes ch-heading { from{opacity:0; translate:0 30px;} to{opacity:1; translate:0 0;} }

/* fixed design-space box, zoom-stepped down on smaller screens */
.ch-fit { flex:none; width:1066px; height:464px; position:relative; z-index:1; }
.ch-frame {
  width:100%; height:100%; position:relative;
  transform:scale(var(--ch-zoom));
  will-change:transform;
  animation:ch-zoom auto linear both;
  animation-timeline:--choice;
  animation-range:entry 0% contain 30%;
}
@keyframes ch-zoom { from{--ch-zoom:1.18;} to{--ch-zoom:1;} }

/* ---------- the two option cards ---------- */
.ch-card {
  position:absolute; top:0; bottom:0; width:517px;
  display:block; text-decoration:none; color:inherit; cursor:pointer;
  transform:translate3d(calc(var(--ch-tx) + var(--ch-tx2)), var(--ch-ty), 0) rotate(var(--ch-rz));
  animation-duration:auto,auto;
  animation-fill-mode:both,both;
  animation-timeline:--choice,--choice;
  animation-timing-function:cubic-bezier(.33,.22,.23,.98),cubic-bezier(.16,.3,.27,.99);
  animation-range:entry 88% contain 16%, contain 22% contain 48%;
}
/* base custom-prop values = final revealed state (static fallback) */
.ch-card--a { left:16px;  z-index:4; --ch-tx:-16px; --ch-tx2:14px;  --ch-ty:22px; --ch-rz:-4deg;
  animation-name:ch-split-a,ch-fan-a; }
.ch-card--b { left:533px; z-index:5; --ch-tx:16px;  --ch-tx2:-14px; --ch-ty:14px; --ch-rz:3deg;
  animation-name:ch-split-b,ch-fan-b; }
@keyframes ch-split-a { from{--ch-tx:0px;} to{--ch-tx:-16px;} }
@keyframes ch-split-b { from{--ch-tx:0px;} to{--ch-tx:16px;} }
@keyframes ch-fan-a { from{--ch-tx2:0px; --ch-ty:0px; --ch-rz:0deg;} to{--ch-tx2:14px;  --ch-ty:22px; --ch-rz:-4deg;} }
@keyframes ch-fan-b { from{--ch-tx2:0px; --ch-ty:0px; --ch-rz:0deg;} to{--ch-tx2:-14px; --ch-ty:14px; --ch-rz:3deg;} }

/* ---------- faces (3D flip) ---------- */
.ch-face {
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  will-change:transform;
}

/* front = slice of the shared theatre image (same image the form section sits on) */
.ch-front {
  --ch-ry:-180deg;                    /* base = final (flipped away) */
  transform:perspective(1300px) rotateY(var(--ch-ry));
  overflow:hidden; border-radius:14px; z-index:1;
  animation-duration:auto,auto; animation-fill-mode:both,both;
  animation-timeline:--choice,--choice;
  animation-timing-function:cubic-bezier(.33,.22,.23,.98),cubic-bezier(.16,.3,.27,.99);
  animation-range:entry 88% contain 16%, contain 22% contain 48%;
}
.ch-card--a .ch-front { animation-name:ch-radius-a,ch-flip-front; }
.ch-card--b .ch-front { animation-name:ch-radius-b,ch-flip-front; }
@keyframes ch-radius-a { from{border-radius:14px 0 0 14px;} to{border-radius:14px;} }
@keyframes ch-radius-b { from{border-radius:0 14px 14px 0;} to{border-radius:14px;} }
@keyframes ch-flip-front { from{--ch-ry:0deg;} to{--ch-ry:-180deg;} }

.ch-strip {
  position:absolute; top:0; width:1034px; height:100%; max-width:none;
  object-fit:cover; object-position:center 30%;
  display:block; filter:saturate(1.1) brightness(.94);
  pointer-events:none; user-select:none;
}
.ch-card--a .ch-strip { left:0; }
.ch-card--b .ch-strip { left:-517px; }

/* back = the revealed, clickable option */
.ch-back {
  --ch-ry:0deg;                       /* base = final (facing viewer) */
  transform:perspective(1300px) rotateY(var(--ch-ry));
  opacity:1;
  display:flex; flex-direction:column; justify-content:space-between; align-items:stretch;
  gap:18px; padding:26px 30px 28px;
  border-radius:14px;
  transition:translate .35s ease, box-shadow .35s ease;
  animation:ch-flip-back auto cubic-bezier(.16,.3,.27,.99) both;
  animation-timeline:--choice;
  animation-range:contain 22% contain 48%;
}
@keyframes ch-flip-back { from{--ch-ry:180deg; opacity:0;} to{--ch-ry:0deg; opacity:1;} }

.ch-card--a .ch-back {
  background:linear-gradient(168deg,#d0402e 0%,var(--c-red) 38%,#3f0907 100%);
  color:var(--c-cream);
  box-shadow:0 24px 65px rgba(0,0,0,.55), inset 0 2px 2px rgba(255,255,255,.28);
}
.ch-card--b .ch-back {
  background:linear-gradient(180deg,var(--c-offwhite) 0%,#eee2d0 100%);
  color:var(--c-maroon);
  box-shadow:0 24px 65px rgba(0,0,0,.45), inset 0 2px 2px rgba(255,255,255,.85);
}
.ch-card:hover .ch-back { translate:0 -8px; }
.ch-card--a:hover .ch-back { box-shadow:0 34px 80px rgba(0,0,0,.6),  inset 0 2px 2px rgba(255,255,255,.28); }
.ch-card--b:hover .ch-back { box-shadow:0 34px 80px rgba(0,0,0,.5),  inset 0 2px 2px rgba(255,255,255,.85); }

/* ---------- card content ---------- */
.ch-back__top { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:28px; }

/* corner mark — FINAL: placard (quiet numeral — receding hairline — caption).
   Caption is upright + generously tracked (italic read poorly at this size);
   on the red card both ends get explicit near-cream + a soft dark shadow so
   contrast holds on the light end of the gradient. The hairline is the
   quietest element on the row — the word carries the weight. */
.mk--placard{ display:flex; flex:1; align-items:center; gap:14px; }
.mk-numeral{ font-family:var(--font-display); font-size:19px; line-height:1; letter-spacing:.08em; }
.mk-rule{ flex:1; height:1px; background:currentColor; opacity:.13; }
.mk-caption{
  font-family:var(--font-sans); font-size:10.5px; font-weight:600; line-height:1;
  text-transform:uppercase; letter-spacing:.26em; margin-right:-.26em; white-space:nowrap;
}
.ch-card--a .mk-numeral, .ch-card--a .mk-caption{
  color:#fbf3e8; text-shadow:0 1px 10px rgba(63,9,7,.4);
}
.ch-card--b .mk-numeral{ color:var(--c-maroon); opacity:.9; }
.ch-card--b .mk-caption{ color:rgba(72,18,14,.82); }

.ch-title {
  margin:0; max-width:300px;
  font-family:var(--font-display); font-weight:500;
  font-size:36px; line-height:1.02; letter-spacing:-.01em;
}
.ch-desc { margin:12px 0 0; max-width:340px; font-family:var(--font-sans); font-size:15px; line-height:1.45; opacity:.78; }
.ch-card--b .ch-desc { color:var(--c-taupe); opacity:1; }

.ch-cta {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-sans); font-size:14px; font-weight:600; letter-spacing:.02em;
}
.ch-cta__circle {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
}
.ch-card--a .ch-cta__circle { background:rgba(255,255,255,.16); color:#fff; }
.ch-card--b .ch-cta__circle { background:var(--c-red); color:#fff; }
.ch-cta__circle svg { width:14px; height:14px; transition:transform .3s ease; }
.ch-card:hover .ch-cta__circle svg { transform:rotate(45deg); }

/* grain overlay on the revealed faces */
.ch-noise {
  position:absolute; inset:0; border-radius:inherit;
  background:url('../assets/img/noise.png') left top / 128px auto repeat;
  mix-blend-mode:overlay; pointer-events:none;
}
.ch-card--a .ch-noise { opacity:.25; }
.ch-card--b .ch-noise { opacity:.12; }

.ch-hint {
  position:relative; z-index:1;
  margin:0; font-family:var(--font-sans); font-size:13px; letter-spacing:.04em;
  color:rgba(246,239,229,.5); text-align:center;
  animation:ch-hint auto linear both;
  animation-timeline:--choice;
  animation-range:contain 48% contain 60%;
}
@keyframes ch-hint { from{opacity:0; translate:0 12px;} to{opacity:1; translate:0 0;} }

/* ============ 3. FORM — subtle step progress ============ */
/* hidden until the visitor picks a path; then it expands into the card and
   the segments paint left-to-right (styled after the LMS registrieren stepper:
   slim numberless segments + a small letterspaced caption) */
.book-steps{
  max-width:320px; margin:0 auto; overflow:hidden;
  max-height:0; opacity:0; translate:0 -6px; margin-bottom:0;
  transition:max-height .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease,
             translate .55s ease, margin-bottom .55s ease;
}
.book-steps.is-on{ max-height:64px; opacity:1; translate:0 0; margin-bottom:22px; }
.book-steps__bar{ display:flex; align-items:center; gap:6px; }
.bs-seg{
  appearance:none; border:0; padding:0; flex:1; height:4px; border-radius:100px;
  background:rgba(72,18,14,.12); overflow:hidden; cursor:default;
}
.bs-seg .bs-fill{
  display:block; height:100%; width:0; border-radius:inherit;
  background:linear-gradient(90deg,#c93a2f,var(--c-red));
  transition:width .55s cubic-bezier(.22,.61,.36,1);
}
.bs-seg.is-done .bs-fill, .bs-seg.is-current .bs-fill{ width:100%; }
.bs-seg.is-back{ cursor:pointer; }
.bs-seg.is-back:hover .bs-fill{ filter:brightness(1.18); }
.book-steps__label{
  margin:10px 0 0; text-align:center;
  font-family:var(--font-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(130,98,91,.75);
}

/* ============ FORM PANELS — editorial two-step enquiry ============
   Styled to the standard of the option cards: a serif question per panel,
   underline fields with placard-style letterspaced labels, and the same
   circle-arrow CTA language. Panel 1 asks only for the visitor's work;
   panel 2 takes name / email / craft and submits. */
.book-form{ position:relative; }
.fstep{ display:flex; flex-direction:column; min-height:300px;
  animation:fstep-in .5s cubic-bezier(.22,.61,.36,1); }
.book-form[data-fstep="1"] .fstep--2{ display:none; }
.book-form[data-fstep="2"] .fstep--1{ display:none; }
@keyframes fstep-in{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }

.fs-q{ margin:22px 0 30px; font-family:var(--font-display); font-weight:500;
  font-size:clamp(23px,3.4vw,29px); line-height:1.12; letter-spacing:-.01em; color:var(--c-maroon); }
.fs-q em{ font-style:italic; color:var(--c-red); }

.ef-field{ display:block; }
.ef-grid{ display:flex; flex-direction:column; gap:24px; }
.ef-label{ display:flex; align-items:baseline; gap:8px;
  font-family:var(--font-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--c-taupe); }
.ef-opt{ font-weight:500; letter-spacing:.14em; text-transform:none; opacity:.75; }
.ef-field input, .ef-select select{
  width:100%; appearance:none; -webkit-appearance:none; border:0; border-radius:0;
  background:transparent; border-bottom:1px solid var(--c-line);
  padding:12px 2px 13px; margin-top:2px;
  font-family:var(--font-sans); font-size:19px; color:var(--c-maroon);
  transition:border-color .25s ease;
}
.ef-field input::placeholder{ color:rgba(130,98,91,.5); }
.ef-field input:focus, .ef-select select:focus{ outline:0; border-bottom-color:var(--c-red); }
.ef-select{ position:relative; display:block; }
.ef-select select{ padding-right:36px; cursor:pointer; }
.ef-select select:invalid{ color:rgba(130,98,91,.5); }   /* the placeholder option reads like one */
/* native dropdown items: force a solid near-black so they don't inherit the
   muted :invalid colour above and read washed-out; keep the placeholder muted */
.ef-select select option{ color:#1a1210; }
.ef-select select option[disabled]{ color:rgba(130,98,91,.7); }
.ef-chevron{ position:absolute; right:4px; bottom:16px; width:18px; height:18px;
  color:var(--c-taupe); pointer-events:none; }
.ef-chevron svg{ width:100%; height:100%; display:block; }

.fs-nav{ margin-top:auto; padding-top:36px; display:flex; align-items:center; gap:16px; }
.fs-continue{
  appearance:none; border:0; background:transparent; cursor:pointer; padding:4px 0;
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-sans); font-size:15px; font-weight:600; color:var(--c-maroon);
}
.fs-continue__circle{ display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; background:var(--c-red); color:#fff;
  transition:background-color .25s ease; }
.fs-continue__circle svg{ width:15px; height:15px; transition:transform .3s ease; }
.fs-continue:hover .fs-continue__circle{ background:var(--c-maroon); }
.fs-continue:hover .fs-continue__circle svg{ transform:translateX(3px); }
.fs-enter{ font-family:var(--font-sans); font-size:12px; color:var(--c-taupe); opacity:.7; }

.fstep--2 .bf-check{ margin-top:28px; }
.fs-nav--end{ flex-direction:column; align-items:stretch; gap:4px; padding-top:28px; }
.fs-back{
  appearance:none; border:0; background:transparent; cursor:pointer; align-self:center;
  font-family:var(--font-sans); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--c-taupe); padding:10px 12px; transition:color .2s ease;
}
.fs-back:hover{ color:var(--c-maroon); }

@media (max-width:560px){
  .fstep{ min-height:340px; }
  .fs-enter{ display:none; }
}

/* ============ 4. FORM AS OVERLAY ============ */
/* the form exists ONLY as an overlay now — no in-flow copy below the cards.
   Picking a card (or the nav "Enquire") fades it in as a fixed layer; the
   visitor stays exactly where they are. */
.book-hero{ display:none; }
.book-hero.is-overlay{ display:block; }
.book-hero.is-overlay{
  position:fixed; inset:0; z-index:300;            /* over nav (100) + menu (160) */
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column;             /* centre the card in the layer (was top-aligned) */
  padding:clamp(48px,8vh,96px) 0;                  /* symmetric breathing room; margins do the centring */
  opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
.book-hero.is-overlay .book-hero__bg{ position:fixed; inset:0; }   /* bg holds still while the layer scrolls */
.book-hero.is-overlay::after{                       /* deepen the theatre backdrop so it reads as a layer */
  content:""; position:fixed; inset:0; z-index:0;
  background:rgba(26,12,10,.45);
}
.book-hero.is-overlay .book-card{
  position:relative; z-index:1;
  width:100%; margin:auto;                         /* auto margins centre it vertically; collapses to 0 (scrollable) when taller than the layer */
  translate:0 28px;
  transition:translate .55s cubic-bezier(.22,.61,.36,1);
}
.book-hero.is-overlay.is-open{ opacity:1; pointer-events:auto; }
.book-hero.is-overlay.is-open .book-card{ translate:0 0; }
html.form-overlay-lock, html.form-overlay-lock body{ overflow:hidden; }

/* close pill — only rendered while the form is an overlay */
.book-close{
  display:none; position:absolute; top:14px; right:14px; z-index:2;
  align-items:center; justify-content:center;
  appearance:none; border:0; cursor:pointer;
  width:38px; height:38px; border-radius:50%;
  background:rgba(72,18,14,.08); color:var(--c-maroon);
  transition:background .25s ease, transform .25s ease;
}
.book-hero.is-overlay .book-close{ display:inline-flex; }
.book-close:hover{ background:rgba(72,18,14,.16); transform:rotate(90deg); }
.book-close svg{ width:16px; height:16px; }

/* ---------- responsive ---------- */
/* fixed 1066px design space, stage stepped down (same steps as the prototype) */
@media (max-width:1229px){ .ch-fit{ zoom:.88; } }
@media (max-width:1049px){ .ch-fit{ zoom:.76; } }
@media (max-width:929px) { .ch-fit{ zoom:.68; } }
@media (max-height:760px) and (min-width:810px){
  .ch-fit{ zoom:.72; }
  .ch-pin{ gap:48px; padding-top:84px; }
}

/* phone: no pin, no flip — cards stack fully revealed and tappable */
@media (max-width:809px){
  .choice{ height:auto; }
  .ch-pin{ position:static; min-height:0; padding:88px 22px 64px; gap:36px; overflow:visible; }
  .ch-heading{ font-size:32px; white-space:normal; animation:none; }
  .ch-fit{ zoom:1; width:100%; max-width:400px; height:auto; }
  .ch-frame{ transform:none; animation:none; }
  .ch-card,.ch-front,.ch-back{ animation:none; }
  .ch-card{ position:relative; inset:auto; left:auto; width:100%; height:auto; transform:none; margin-bottom:18px; }
  .ch-front{ display:none; }
  .ch-back{ position:relative; inset:auto; min-height:320px; transform:none; }
  .ch-hint{ animation:none; }
}

/* no scroll-driven animation support → drop the runway, show final state.
   NOTE: deliberately NOT gated on prefers-reduced-motion — Windows machines
   frequently report it without the user ever opting in (same stance as
   main.js takes for Lenis), and it made the split+flip look "missing". */
@supports not (animation-timeline: view()) {
  .choice{ height:auto; }
  .ch-pin{ position:static; }
}