/* ============================================================
     TOKENS — warm ivory ground, soft-white cards, sage accent,
     warm-taupe secondary, charcoal type.
     ============================================================ */
  :root {
    color-scheme: light;          /* ivory in every viewer theme — no dark variant */
    /* Brand palette as specified. Sage and taupe are 1.9:1 and 2.1:1 on ivory,
       so they carry fills, washes and rules; --clay-deep is the darkened sage
       that carries accent TYPE, and charcoal is what sits on a sage fill. */
    --paper:    #F8F5F2;   /* Background — warm ivory */
    --card:     #FFFFFF;   /* Cards — soft white     */
    --clay:     #A8B8A5;   /* Accent — sage green    */
    --taupe:    #B7A79A;   /* Secondary — warm taupe */
    --ink:      #3C3C3C;   /* Text — charcoal        */
    --clay-deep:#4F6349;   /* sage, darkened for type (6.0:1) */
    --on-clay:  #3C3C3C;   /* charcoal on a sage fill (5.3:1) */
    --paper-2:  #F2EEEA;   /* taupe-tinted section ground */
    --tide:     #EBE5E0;   /* taupe-tinted band           */
    --tide-2:   #DED5CC;   /* deeper tint for the washes  */
    --on-tide:  #3C3C3C;
    --rule:     #E6DFD9;   /* taupe hairline, for dividers */
    --field:    #CFC5BC;   /* stronger taupe line, for input outlines */
    --ink-2:    #6A6259;   /* charcoal warmed, secondary copy (5.6:1) */
    --ink-3:    #9A8F86;   /* muted meta */
    --sun:      #B7A79A;   /* taupe, second stop in accent gradients */
    --scrim-1:  rgba(48,45,42,0.38);
    --scrim-2:  rgba(48,45,42,0.05);
    --shadow-sm: 0 1px 2px rgba(60,60,60,0.05), 0 6px 18px -10px rgba(60,60,60,0.20);
    --shadow-md: 0 2px 4px rgba(60,60,60,0.06), 0 22px 44px -22px rgba(60,60,60,0.30);
    --display: "Bodoni 72", "Didot", "Playfair Display", "Times New Roman", Georgia, serif;
    --body: "Avenir Next", "Avenir", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --maxw: 1240px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* No dark palette. A viewer browsing in dark mode still gets the ivory
     design — this brand is the warm paper, so both theme hooks are pinned
     to the same tokens rather than inverted. */
  :root[data-theme="dark"], :root[data-theme="light"] {
    color-scheme: light;          /* ivory in every viewer theme — no dark variant */
    /* Brand palette as specified. Sage and taupe are 1.9:1 and 2.1:1 on ivory,
       so they carry fills, washes and rules; --clay-deep is the darkened sage
       that carries accent TYPE, and charcoal is what sits on a sage fill. */
    --paper:    #F8F5F2;   /* Background — warm ivory */
    --card:     #FFFFFF;   /* Cards — soft white     */
    --clay:     #A8B8A5;   /* Accent — sage green    */
    --taupe:    #B7A79A;   /* Secondary — warm taupe */
    --ink:      #3C3C3C;   /* Text — charcoal        */
    --clay-deep:#4F6349;   /* sage, darkened for type (6.0:1) */
    --on-clay:  #3C3C3C;   /* charcoal on a sage fill (5.3:1) */
    --paper-2:  #F2EEEA;   /* taupe-tinted section ground */
    --tide:     #EBE5E0;   /* taupe-tinted band           */
    --tide-2:   #DED5CC;   /* deeper tint for the washes  */
    --on-tide:  #3C3C3C;
    --rule:     #E6DFD9;   /* taupe hairline, for dividers */
    --field:    #CFC5BC;   /* stronger taupe line, for input outlines */
    --ink-2:    #6A6259;   /* charcoal warmed, secondary copy (5.6:1) */
    --ink-3:    #9A8F86;   /* muted meta */
    --sun:      #B7A79A;   /* taupe, second stop in accent gradients */
    --scrim-1:  rgba(48,45,42,0.38);
    --scrim-2:  rgba(48,45,42,0.05);
    --shadow-sm: 0 1px 2px rgba(60,60,60,0.05), 0 6px 18px -10px rgba(60,60,60,0.20);
    --shadow-md: 0 2px 4px rgba(60,60,60,0.06), 0 22px 44px -22px rgba(60,60,60,0.30);
  }

  /* ============================================================ BASE */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--paper); color: var(--ink); color-scheme: light;
    font-family: var(--body); font-size: 16.5px; line-height: 1.7;
    -webkit-font-smoothing: antialiased; overflow-x: hidden;
  }
  h1, h2, h3 {
    font-family: var(--display); font-weight: 500; letter-spacing: 0.005em;
    text-wrap: balance; margin: 0; line-height: 1.1;
  }
  img { max-width: 100%; display: block; }
  a { color: var(--clay-deep); }
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--clay-deep); outline-offset: 3px; border-radius: 2px;
  }
  ::selection { background: var(--clay); color: var(--on-clay); }

  .label {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--clay-deep); margin: 0 0 0.9rem; display: block;
  }
  .label-rule { display: inline-flex; align-items: center; gap: 0.7rem; }
  .label-rule::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.6; }

  /* ============================================================ BUTTONS */
  .btn {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    background: var(--ink); color: var(--paper); text-decoration: none;
    font-family: var(--body); font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    padding: 1.05rem 2.1rem; border: none; border-radius: 999px; cursor: pointer;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.25s ease,
                letter-spacing 0.35s var(--ease);
  }
  .btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.28) 50%, transparent 62%);
    transform: translateX(-120%);
  }
  /* Hover: lift, warm sage glow, and the tracking opens a hair — the type
     settling back on :active is what sells the press. */
  .btn:hover {
    background: var(--clay-deep); transform: translateY(-2px); letter-spacing: 0.19em;
    box-shadow: var(--shadow-md), 0 16px 34px -18px color-mix(in srgb, var(--clay-deep) 85%, transparent);
  }
  .btn:active { transform: translateY(0) scale(0.97); letter-spacing: 0.16em; }
  .btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
  .btn-ghost:hover { background: var(--ink); color: var(--paper); }
  .btn-light { background: var(--clay); color: var(--on-clay); }
  .btn-light:hover { background: var(--ink); color: var(--paper); }
  /* Click ripple, spawned from the point of contact by the delegated
     handler at the bottom of the script. Negative z-index keeps it over
     the fill but under the label, same trick as the shimmer sweep. */
  .btn .ripple {
    position: absolute; z-index: -1; border-radius: 999px; pointer-events: none;
    transform: translate(-50%, -50%) scale(0); opacity: 0.85;
    background: radial-gradient(circle, rgba(255,255,255,0.5), rgba(255,255,255,0) 68%);
    animation: ripple 0.62s var(--ease) forwards;
  }
  @keyframes ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
  @media (prefers-reduced-motion: no-preference) {
    .btn:hover::after { animation: shimmer 0.9s var(--ease) forwards; }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn:hover { transform: none; letter-spacing: 0.16em; }
    .btn:active { transform: none; }
  }
  @keyframes shimmer { to { transform: translateX(120%); } }

  /* ============================================================ SKIP LINK */
  .skip-link {
    position: absolute; top: -3rem; left: 0.75rem; z-index: 200;
    background: var(--ink); color: var(--paper);
    padding: 0.6rem 1.1rem; border-radius: 0 0 0.5rem 0.5rem;
    font-size: 0.85rem; text-decoration: none; transition: top 0.15s ease;
  }
  .skip-link:focus { top: 0; }

  /* ============================================================ SCROLL PROGRESS */
  .progress {
    position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 90;
    background: linear-gradient(90deg, var(--clay-deep), var(--clay) 55%, var(--taupe));
    transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  }

  /* ============================================================ HEADER */
  header {
    position: sticky; top: 0; z-index: 60;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  }
  header.stuck { border-bottom-color: var(--rule); box-shadow: 0 10px 30px -24px rgba(46,36,28,0.3); }
  .nav { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 1.05rem; padding: 0.85rem 1.4rem; }
  .brand { text-decoration: none; color: var(--ink); line-height: 1; }
  /* Ana's wordmark: ANA in Didone caps, knocked out by the tracked sub-line.
     Drawn as SVG with a mask so the cut-through is transparent — it sits on
     paper, on the dark footer, and over photography without a matched fill. */
  .logo { display: block; width: 8.8rem; color: var(--ink); }
  .logo svg { display: block; width: 100%; height: auto; overflow: visible; }
  .logo .ana-txt { font-family: var(--display); font-weight: 400; }
  .logo .sub-txt { font-family: var(--body); font-weight: 700; }
  .logo-dark { color: var(--on-tide); }

  nav.links { margin-left: auto; display: flex; gap: 0.85rem; align-items: center; flex-wrap: wrap; }
  nav.links a {
    position: relative; text-decoration: none; color: var(--ink-2);
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.35rem 0; transition: color 0.2s ease;
  }
  nav.links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--clay); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 0.35s var(--ease);
  }
  nav.links a:hover { color: var(--ink); }
  nav.links a:hover::after, nav.links a.active::after { transform: scaleX(1); }
  nav.links a.active { color: var(--ink); }
  /* grouping rules: sessions | information | account */
  nav.links .nav-sep { flex: none; width: 1px; height: 0.95rem; background: var(--rule); }

  nav.links a.nav-book {
    background: var(--clay); color: var(--on-clay); padding: 0.62rem 1.1rem;
    border-radius: 999px;              /* pill, to match the language buttons */
    transition: color 0.25s ease, transform 0.3s var(--ease);
  }
  nav.links a.nav-book::after { display: none; }
  /* charcoal on deep sage is only 1.7:1 — the flooded state takes paper */
  nav.links a.nav-book:hover { color: var(--paper); transform: translateY(-2px); }

  /* ---------------------------------------------------------------
     Language buttons. The FILLED button shows the language you are
     currently reading (the status); the outline button is the switch
     to the other one. aria-current="page" still reports the true
     state for assistive tech.
     --------------------------------------------------------------- */
  .lang-toggle { display: flex; align-items: center; gap: 0.4rem; }
  .lang-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 2.1rem; padding: 0 0.8rem; border-radius: 999px; cursor: pointer;
    white-space: nowrap; font-family: var(--body); font-size: 0.63rem;
    font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    /* neutral at rest: the sage fill belongs to Book a Call, which is the
       one thing in this bar we actually want clicked. This is a preference
       control, so the switch button reads as a quiet outline and only
       warms up on hover. */
    background: transparent; border: 1px solid var(--field); color: var(--ink);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease,
                transform 0.42s linear(0.0000, 0.0300, 0.1022, 0.1965, 0.2992, 0.4013, 0.4974, 0.5845, 0.6612, 0.7273, 0.7831, 0.8295, 0.8676, 0.8983, 0.9230, 0.9424, 0.9576, 0.9693, 0.9782, 0.9849, 0.9898, 0.9935, 0.9961, 0.9979, 0.9991);
  }
  .lang-btn:hover { border-color: var(--clay-deep); color: var(--paper); transform: translateY(-1px); }
  .lang-btn:active { transform: translateY(0); }
  /* the language currently in use is filled solid, so it reads at a glance */
  .lang-btn.on {
    background: var(--clay-deep); color: var(--paper);
    border-color: var(--clay-deep);
    cursor: default;
  }
  .lang-btn.on:hover {
    background: var(--clay-deep); color: var(--paper);
    border-color: var(--clay-deep); transform: none;
  }
  @media (prefers-reduced-motion: reduce) { .lang-btn { transition: none; } }

  /* ============================================================ PILL FLOOD
     The filter chips, the header CTA and the language buttons share one
     hover: colour floods out from the exact point the cursor crossed the
     edge, so the fill feels like it's chasing the pointer. Origin is fixed
     on pointerover (not pointermove) or the circle would slide around
     mid-animation. Same pointer-tracked idiom the quote cards already use.
     The active filter chip is deliberately left out — it's already the
     selected state, and flooding it would leave pale type on sage. */
  .chip, nav.links a.nav-book, .lang-btn {
    position: relative; overflow: hidden; isolation: isolate;
  }
  .chip::before, nav.links a.nav-book::before, .lang-btn::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--flood, var(--clay-deep));
    clip-path: circle(0% at var(--mx, 50%) var(--my, 50%));
    transition: clip-path 0.55s var(--ease);
  }
  .chip { --flood: var(--clay); }
  nav.links a.nav-book, .lang-btn { --flood: var(--clay-deep); }

  .chip:not([aria-pressed="true"]):hover::before,
  nav.links a.nav-book:hover::before,
  .lang-btn:not(.on):hover::before {
    clip-path: circle(150% at var(--mx, 50%) var(--my, 50%));
  }
  /* charcoal on flooded sage — 5.3:1 */
  .chip:not([aria-pressed="true"]):hover { color: var(--on-clay); box-shadow: inset 0 0 0 1px var(--clay); }

  @media (prefers-reduced-motion: reduce) {
    .chip::before, nav.links a.nav-book::before, .lang-btn::before { transition: none; }
  }

  .nav-toggle {
    display: none; order: 3; flex: none; margin-left: 0.9rem;
    width: 2.6rem; height: 2.6rem; padding: 0; place-items: center;
    background: transparent; box-shadow: inset 0 0 0 1px var(--rule); border: none;
    border-radius: 999px; color: var(--ink); cursor: pointer;
  }
  .nav-toggle .bars { display: block; width: 1.05rem; height: 1.5px; background: currentColor; position: relative; }
  .nav-toggle .bars::before, .nav-toggle .bars::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  }
  .nav-toggle .bars::before { top: -6px; }
  .nav-toggle .bars::after { top: 6px; }
  header.open .nav-toggle .bars { background: transparent; }
  header.open .nav-toggle .bars::before { top: 0; transform: rotate(45deg); }
  header.open .nav-toggle .bars::after { top: 0; transform: rotate(-45deg); }
  @media (prefers-reduced-motion: no-preference) {
    .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { transition: top 0.2s ease, transform 0.2s ease, background 0.2s ease; }
  }
  @media (max-width: 1180px) { nav.links { gap: 0.6rem; } nav.links a { font-size: 0.66rem; letter-spacing: 0.08em; } .logo { width: 8rem; } }
  @media (max-width: 1100px) {
    .nav { flex-wrap: wrap; gap: 0; padding: 0.7rem 1.3rem; }
    .logo .ana { font-size: 1.7rem; }
    .nav-toggle { display: grid; }
    .lang-toggle { order: 2; margin-left: auto; }
    nav.links {
      order: 4; flex-basis: 100%; width: 100%; display: none;
      flex-direction: column; align-items: stretch; gap: 0;
      margin: 0.7rem 0 0; padding-bottom: 0.3rem; border-top: 1px solid var(--rule);
    }
    header.open nav.links { display: flex; }
    nav.links a { font-size: 0.82rem; padding: 1rem 0.15rem; border-bottom: 1px solid var(--rule); }
    nav.links a::after { display: none; }
    nav.links .nav-sep { display: none; }
    nav.links a.active { color: var(--clay-deep); }
    nav.links a.nav-book { margin: 1rem 0 0.4rem; padding: 1.05rem 1.2rem; text-align: center; border-bottom: none; justify-content: center; }
  }

  /* ============================================================ LAYOUT */
  main { display: block; }
  section.page { display: none; }
  section.page.visible { display: block; }
  .container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }
  .narrow { max-width: 740px; margin: 0 auto; padding: 0 1.5rem; }
  .band { padding: clamp(4rem, 9vw, 6.5rem) 0; }
  .band.tint { background: var(--paper-2); }
  .band-head { max-width: 660px; margin: 0 auto clamp(2.4rem, 5vw, 3.4rem); padding: 0 1.5rem; text-align: center; }
  .band-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 0.75rem; }
  .band-head p { color: var(--ink-2); margin: 0; }

  /* ============================================================ REVEAL */
  .reveal { opacity: 0; transform: translateY(26px); }
  .reveal.in { opacity: 1; transform: none; transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .reveal.d1.in { transition-delay: 0.09s; }
  .reveal.d2.in { transition-delay: 0.18s; }
  .reveal.d3.in { transition-delay: 0.27s; }
  .reveal.d4.in { transition-delay: 0.36s; }
  /* cards keep their own snappier hover timing once revealed */
  .tile.reveal.in, .tier.reveal.in, .quote.reveal.in {
    transition: opacity 0.9s var(--ease), transform 0.5s var(--ease), box-shadow 0.45s var(--ease);
  }
  @media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
  }

  /* ============================================================ HERO */
  .hero { position: relative; min-height: min(92vh, 860px); display: grid; align-items: end; overflow: hidden; }
  .hero-media { position: absolute; inset: 0; z-index: 0; background: var(--paper-2); }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 26%; }
  @media (prefers-reduced-motion: no-preference) {
    .hero-media img { animation: kenburns 26s var(--ease) forwards; }
  }
  @keyframes kenburns {
    from { transform: scale(1.14) translate3d(1.2%, 1.4%, 0); }
    to   { transform: scale(1.0) translate3d(0, 0, 0); }
  }
  .hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(to top, var(--scrim-1) 0%, rgba(32,24,18,0.16) 42%, var(--scrim-2) 74%),
      radial-gradient(120% 70% at 15% 100%, rgba(62,48,38,0.28), transparent 70%);
  }
  .hero-inner {
    position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto;
    padding: 5rem 1.5rem clamp(4.6rem, 8vw, 6.2rem);
  }
  /* the eyebrow sits over the bright window side of the hero frame — shadow keeps it legible */
  .hero-inner .label { color: #EFE0CD; text-shadow: 0 1px 14px rgba(0,0,0,0.7); }
  .hero h1 {
    color: #FAF6F0; font-size: clamp(2.15rem, 5.1vw, 4.3rem); line-height: 1.05;
    max-width: 21ch; margin-bottom: 1.3rem;
    text-shadow: 0 2px 26px rgba(0,0,0,0.5);
  }
  .hero .lede {
    color: rgba(250,246,240,0.9); font-size: clamp(1rem, 1.5vw, 1.16rem);
    max-width: 46ch; margin: 0 0 2rem; text-shadow: 0 1px 14px rgba(0,0,0,0.55);
  }
  .hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: center; }
  .hero-cta .btn-ghost { color: #FAF6F0; box-shadow: inset 0 0 0 1px rgba(250,246,240,0.55); background: rgba(255,255,255,0.06); backdrop-filter: blur(6px); }
  .hero-cta .btn-ghost:hover { background: #FAF6F0; color: var(--ink); }
  .hero-trust {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    margin: 1.8rem 0 0; font-size: 0.86rem; color: rgba(250,246,240,0.86);
  }
  .hero-trust .stars { color: #EFE0CD; letter-spacing: 0.18em; font-size: 0.95rem; }
  .hero-trust a { color: #FAF6F0; }
  .scroll-cue {
    position: absolute; z-index: 2; bottom: 1.3rem; left: 50%; transform: translateX(-50%);
    display: grid; place-items: center; gap: 0.45rem;
    font-family: var(--body); font-size: 0.6rem; letter-spacing: 0.26em; text-transform: uppercase;
    color: rgba(250,246,240,0.72); background: none; border: none; cursor: pointer; padding: 0.4rem;
  }
  .scroll-cue:hover { color: #fff; }
  .scroll-cue span.line { display: block; width: 1px; height: 2.2rem; background: linear-gradient(rgba(250,246,240,0.8), transparent); }
  @media (prefers-reduced-motion: no-preference) {
    .scroll-cue span.line { animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
  }
  @keyframes cue { 0%,100% { transform: scaleY(0.35); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }
  @media (max-width: 760px) {
    .hero { min-height: min(88vh, 760px); }
    .hero-inner { padding: 3.5rem 1.5rem 3rem; }
    .scroll-cue { display: none; }
    /* narrow screens put type over more of the frame — deepen the scrim */
    .hero-scrim { background: linear-gradient(to top, rgba(30,22,16,0.66) 0%, rgba(30,22,16,0.44) 45%, rgba(30,22,16,0.14) 80%, rgba(30,22,16,0.04) 100%); }
    .hero-cta .btn { width: 100%; }
  }

  /* intro sequence */
  @media (prefers-reduced-motion: no-preference) {
    .rise { opacity: 0; transform: translateY(22px); animation: rise 1s var(--ease) forwards; }
    .rise.s1 { animation-delay: 0.15s; }
    .rise.s2 { animation-delay: 0.32s; }
    .rise.s3 { animation-delay: 0.48s; }
    .rise.s4 { animation-delay: 0.64s; }
    .rise.s5 { animation-delay: 0.8s; }
  }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* ============================================================ PROOF STRIP */
  .proof { background: var(--tide); color: var(--on-tide); }
  .proof-inner {
    max-width: var(--maxw); margin: 0 auto; padding: 2rem 1.5rem;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
    text-align: center;
  }
  .proof-item { position: relative; }
  .proof-item + .proof-item::before {
    content: ""; position: absolute; left: -0.7rem; top: 12%; bottom: 12%;
    width: 1px; background: color-mix(in srgb, var(--on-tide) 16%, transparent);
  }
  .proof-item .n {
    font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem);
    display: block; color: var(--on-tide); font-variant-numeric: tabular-nums; line-height: 1.2;
  }
  .proof-item .t { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in srgb, var(--on-tide) 66%, transparent); }
  @media (max-width: 720px) {
    .proof-inner { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
    .proof-item:nth-child(odd) + .proof-item::before { left: -0.5rem; }
    .proof-item:nth-child(3)::before { display: none; }
  }

  /* ============================================================ BENTO SESSIONS */
  .bento { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(224px, auto); }
  .tile {
    position: relative; overflow: hidden; text-decoration: none; color: #fff;
    background: var(--paper-2); display: block; isolation: isolate;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  }
  .tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1.1s var(--ease), filter 0.5s ease; }
  .tile:hover img { transform: scale(1.06); }
  .tile::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(28,20,14,0.78) 0%, rgba(28,20,14,0.5) 34%, rgba(28,20,14,0.2) 66%, rgba(28,20,14,0.02) 100%);
    transition: opacity 0.4s ease;
  }
  .tile:hover::after { opacity: 0.94; }
  .tile-body { position: relative; z-index: 2; padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 224px; }
  .tile-body h3 { font-size: 1.5rem; color: #fff; margin-bottom: 0.3rem; text-shadow: 0 1px 14px rgba(0,0,0,0.45); }
  .tile-body p { font-size: 0.9rem; color: rgba(255,255,255,0.82); margin: 0 0 0.7rem; max-width: 34ch; }
  .tile-body .go {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: #DCC6AC; display: inline-block; transition: transform 0.4s var(--ease);
  }
  .tile:hover .tile-body .go { transform: translateX(6px); }
  .tile-lg { grid-column: span 2; grid-row: span 2; }
  .tile-lg .tile-body { min-height: 448px; }
  .tile-lg .tile-body h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
  .tile-lg .tile-body p { font-size: 0.98rem; max-width: 38ch; }
  .tile-wide { grid-column: span 2; }
  .tile-tall { grid-row: span 2; }
  .tile-tall .tile-body { min-height: 448px; }
  .tile-pin {
    position: absolute; z-index: 2; top: 1rem; left: 1.1rem;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    background: rgba(252,247,240,0.94); color: var(--ink); padding: 0.32rem 0.7rem; border-radius: 999px;
  }
  @media (max-width: 900px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .tile-lg { grid-column: span 2; grid-row: span 1; }
    .tile-lg .tile-body { min-height: 300px; }
    .tile-wide { grid-column: span 2; }
  }
  @media (max-width: 560px) {
    .bento { grid-template-columns: 1fr; }
    .tile-lg, .tile-wide { grid-column: span 1; }
    .tile-tall { grid-row: span 1; }
    .tile-tall .tile-body { min-height: 400px; }
  }

  /* ============================================================ MARQUEE */
  .marquee { overflow: hidden; padding: 0.5rem 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .marquee-track { display: flex; gap: 0.8rem; width: max-content; }
  @media (prefers-reduced-motion: no-preference) {
    .marquee-track { animation: slide 48s linear infinite; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
  }
  @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } }
  @keyframes slide { to { transform: translateX(-50%); } }
  .marquee figure { margin: 0; width: clamp(180px, 22vw, 260px); aspect-ratio: 3/4; overflow: hidden; background: var(--paper-2); flex: none; }
  .marquee img { width: 100%; height: 100%; object-fit: cover; }

  /* ============================================================ PROCESS */
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2.2rem 1.6rem; counter-reset: st; }
  .step { counter-increment: st; position: relative; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
  .step::before {
    content: counter(st, decimal-leading-zero); position: absolute; top: -0.05rem; left: 0;
    font-family: var(--display); font-size: 0.95rem; color: var(--clay-deep);
    background: var(--paper-2); padding-right: 0.7rem; transform: translateY(-50%);
    font-variant-numeric: tabular-nums;
  }
  .step b { display: block; font-size: 1rem; margin-bottom: 0.3rem; }
  .step p { font-size: 0.9rem; color: var(--ink-2); margin: 0; }

  /* ============================================================ QUOTES (spotlight) */
  .quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.2rem; }
  .quote {
    position: relative; overflow: hidden; background: var(--card); padding: 1.9rem 1.7rem 1.5rem;
    box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow 0.4s ease, transform 0.4s var(--ease);
  }
  .quote::before {
    content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--clay) 16%, transparent), transparent 70%);
  }
  .quote:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clay) 45%, var(--rule)), var(--shadow-sm); }
  .quote:hover::before { opacity: 1; }
  .quote > * { position: relative; }
  .quote .mark { font-family: var(--display); font-size: 3rem; line-height: 0.4; color: var(--clay-deep); display: block; margin: 0.5rem 0 1.1rem; }
  .quote p { font-size: 0.97rem; margin: 0 0 1rem; }
  .quote .who { font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2); }
  .sample-tag {
    position: absolute; top: 0.8rem; right: 0.9rem; font-size: 0.58rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--rule);
    padding: 0.12rem 0.5rem; border-radius: 999px;
  }

  /* ============================================================ REVIEWS CAROUSEL
     Six real reviews, revolving like the marquee but at reading pace.
     Auto-advance pauses on hover/focus; arrows and dots always work;
     reduced-motion viewers get manual-only. */
  .qcar { position: relative; }
  .qcar-view { overflow: hidden; }
  .qcar-track { display: flex; gap: 1.2rem; }
  @media (prefers-reduced-motion: no-preference) { .qcar-track { transition: transform 0.7s var(--ease); } }
  .qcar-track .quote { flex: 0 0 calc((100% - 2.4rem) / 3); min-width: 0; }
  @media (max-width: 960px) { .qcar-track .quote { flex-basis: calc((100% - 1.2rem) / 2); } }
  @media (max-width: 640px) { .qcar-track .quote { flex-basis: 100%; } }
  .qcar-nav { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 1.7rem; }
  .qcar-btn {
    width: 2.6rem; height: 2.6rem; border-radius: 999px; border: none; cursor: pointer;
    background: transparent; box-shadow: inset 0 0 0 1px var(--field); color: var(--ink);
    font-size: 1rem; line-height: 1; display: grid; place-items: center;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.3s var(--ease);
  }
  .qcar-btn:hover { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); transform: translateY(-2px); }
  .qcar-btn:active { transform: none; }
  .qcar-dots { display: flex; gap: 0.45rem; }
  .qcar-dot {
    width: 0.5rem; height: 0.5rem; border-radius: 999px; border: none; padding: 0; cursor: pointer;
    background: var(--tide-2); transition: background 0.25s ease, transform 0.25s ease;
  }
  .qcar-dot.on { background: var(--clay-deep); transform: scale(1.3); }

  /* ============================================================ GALLERY + FILTER + LIGHTBOX */
  .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0 auto 1.8rem; padding: 0 1.5rem; }
  .chip {
    font-family: var(--body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-2); background: transparent; cursor: pointer;
    border: none; box-shadow: inset 0 0 0 1px var(--rule); border-radius: 999px;
    padding: 0.55rem 1.1rem; transition: all 0.25s ease;
  }
  .chip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--clay-deep); }
  .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }

  .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.7rem; }
  .gallery figure { margin: 0; aspect-ratio: 3/4; overflow: hidden; background: var(--paper-2); position: relative; }
  .gallery figure.hide { display: none; }
  .gallery button.shot {
    display: block; width: 100%; height: 100%; padding: 0; border: none; background: none;
    cursor: zoom-in; overflow: hidden;
  }
  .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), filter 0.4s ease; }
  .gallery button.shot:hover img { transform: scale(1.05); }
  .gallery figure::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: linear-gradient(to top, rgba(30,22,16,0.24), transparent 55%);
    transition: opacity 0.4s ease;
  }
  .gallery figure:hover::after { opacity: 1; }
  .gallery figure.tall { grid-row: span 2; aspect-ratio: 3/8; }
  @media (max-width: 640px) { .gallery figure.tall { grid-row: span 1; aspect-ratio: 3/4; } }

  .lightbox {
    position: fixed; inset: 0; z-index: 100; display: none;
    background: rgba(22,16,11,0.94); backdrop-filter: blur(8px);
    place-items: center; padding: 3.5rem 1rem 4.5rem;
  }
  .lightbox.on { display: grid; }
  .lightbox img { max-width: min(94vw, 1100px); max-height: 80vh; object-fit: contain; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9); }
  .lb-cap {
    position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
    max-width: 60ch; text-align: center; color: rgba(250,246,240,0.78);
    font-size: 0.82rem; padding: 0 1rem;
  }
  .lb-btn {
    position: absolute; background: rgba(255,255,255,0.1); border: none; color: #fff;
    width: 3rem; height: 3rem; border-radius: 999px; cursor: pointer; display: grid; place-items: center;
    font-size: 1.3rem; line-height: 1; transition: background 0.2s ease;
  }
  .lb-btn:hover { background: rgba(255,255,255,0.24); }
  .lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
  .lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }
  .lb-close { top: 1rem; right: 1rem; }

  /* ============================================================ SPLIT */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.6rem); align-items: center; }
  .split .ph { aspect-ratio: 4/5; overflow: hidden; background: var(--paper-2); position: relative; }
  .split .ph img { width: 100%; height: 100%; object-fit: cover; }
  .split h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); margin-bottom: 1rem; }
  .split p { color: var(--ink-2); }
  .sig { font-family: var(--display); font-size: 1.9rem; color: var(--clay-deep); margin: 1.2rem 0 0; }
  @media (max-width: 800px) { .split { grid-template-columns: 1fr; gap: 1.8rem; } }

  /* ============================================================ ABOUT (story) */
  .ab-hook {
    font-size: clamp(1.05rem, 1.7vw, 1.22rem); line-height: 1.75;
    color: var(--ink); margin: 0;
  }
  .ab-hook-a {
    margin-top: 1.5rem; font-family: var(--display); font-style: italic;
    font-size: clamp(1.25rem, 2.3vw, 1.6rem); line-height: 1.4; color: var(--clay-deep);
  }
  .ab-h { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 1.1rem; }
  .ab-facts {
    list-style: none; margin: 3rem 0 0; padding: 1.5rem 0 0;
    border-top: 1px solid var(--rule);
    display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem;
    font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-2);
  }
  .ab-facts li { position: relative; padding-left: 1rem; }
  .ab-facts li::before {
    content: ""; position: absolute; left: 0; top: 0.62em;
    width: 4px; height: 4px; border-radius: 50%; background: var(--clay);
  }
  .ab-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
  .ab-list li {
    padding: 0.85rem 0 0.85rem 1.7rem; position: relative;
    border-bottom: 1px solid var(--rule); color: var(--ink-2);
  }
  .ab-list li:last-child { border-bottom: none; }
  .ab-list li::before {
    content: ""; position: absolute; left: 0.15rem; top: 1.42rem;
    width: 0.52rem; height: 0.29rem;
    border-left: 1.5px solid var(--clay-deep); border-bottom: 1.5px solid var(--clay-deep);
    transform: rotate(-45deg);
  }
  .ab-pull {
    font-family: var(--display); font-size: clamp(1.35rem, 2.8vw, 1.95rem);
    line-height: 1.35; color: var(--ink); margin: 0 0 1.6rem;
    padding-left: 1.4rem; border-left: 2px solid var(--clay);
  }
  .ab-pull-last { margin-bottom: 2rem; }

  .ab-split { align-items: start; gap: clamp(1.8rem, 4vw, 3rem); }
  .ab-fam { margin: 0; position: sticky; top: 6.5rem; }
  .ab-fam img { width: 100%; height: auto; display: block; }
  .ab-fam figcaption {
    margin-top: 0.85rem; font-size: 0.78rem; line-height: 1.6; color: var(--ink-3);
  }
  @media (max-width: 800px) { .ab-fam { position: static; } }

  /* Draft placeholders from the copy deck. Deliberately loud — they are
     meant to be impossible to miss and easy to search for before launch. */
  mark.todo {
    background: #FBEFD6; color: #6B4A12; padding: 0.05em 0.4em;
    border-bottom: 1px dashed #C89A3C; border-radius: 2px;
    font-size: 0.88em; font-weight: 600; letter-spacing: 0.02em;
  }

  /* ============================================================ FAQ */
  details.faq { border-bottom: 1px solid var(--rule); }
  details.faq summary {
    cursor: pointer; list-style: none; font-weight: 600; font-size: 1rem;
    padding: 1.15rem 2.2rem 1.15rem 0.1rem; position: relative; transition: color 0.2s ease;
  }
  details.faq summary:hover { color: var(--clay-deep); }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary::after {
    content: ""; position: absolute; right: 0.5rem; top: 50%; width: 0.62rem; height: 0.62rem;
    border-right: 1.5px solid var(--clay-deep); border-bottom: 1.5px solid var(--clay-deep);
    transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease);
  }
  details.faq[open] summary::after { transform: translateY(-20%) rotate(225deg); }
  details.faq .a { padding: 0 0.1rem 1.3rem; color: var(--ink-2); font-size: 0.95rem; max-width: 68ch; }
  /* the reassurance line that closes the FAQ list */
  /* FAQ page: the categories are accordions too, so the page opens as a
     short list of topics rather than forty questions at once. The shared
     name="" makes them mutually exclusive where the browser supports it —
     elsewhere they simply all open independently. */
  details.faq-cat {
    background: var(--card); box-shadow: inset 0 0 0 1px var(--rule);
    margin-bottom: 0.7rem;
  }
  details.faq-cat > summary {
    cursor: pointer; list-style: none; position: relative;
    display: flex; align-items: center; gap: 0.7rem;
    padding: 1.15rem 3.1rem 1.15rem 1.35rem;
    font-family: var(--body); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
    transition: background 0.25s ease, color 0.25s ease;
  }
  details.faq-cat > summary::-webkit-details-marker { display: none; }
  details.faq-cat > summary:hover { background: var(--paper-2); color: var(--clay-deep); }
  details.faq-cat[open] > summary { background: var(--paper-2); box-shadow: inset 0 -1px 0 var(--rule); }
  details.faq-cat > summary::after {
    content: ""; position: absolute; right: 1.45rem; top: 50%;
    width: 0.6rem; height: 0.6rem;
    border-right: 1.6px solid var(--clay-deep); border-bottom: 1.6px solid var(--clay-deep);
    transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease);
  }
  details.faq-cat[open] > summary::after { transform: translateY(-20%) rotate(225deg); }
  .faq-cat-n {
    margin-left: auto; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em;
    color: var(--ink-3); font-variant-numeric: tabular-nums;
  }
  .faq-cat-body { padding: 0.35rem 1.35rem 0.75rem; }
  .faq-cat-body details.faq:last-of-type { border-bottom: none; }
  @media (prefers-reduced-motion: no-preference) {
    details.faq-cat[open] > .faq-cat-body { animation: unfold 0.4s var(--ease); }
  }
  .faq-more { text-align: center; margin: 1.9rem 0 0; }
  .faq-more a {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    text-decoration: none; border-bottom: 1px solid var(--clay); padding-bottom: 0.3rem;
    transition: border-color 0.25s ease, color 0.25s ease;
  }
  .faq-more a:hover { color: var(--ink); border-bottom-color: var(--ink); }

  .faq-still {
    margin: 1.8rem 0 0; padding: 1.15rem 1.35rem; text-align: center;
    background: var(--paper-2); border: 1px solid var(--rule);
    font-size: 0.95rem; color: var(--ink-2);
  }
  .faq-still b { color: var(--ink); }
  @media (prefers-reduced-motion: no-preference) {
    details.faq[open] .a { animation: unfold 0.4s var(--ease); }
  }
  @keyframes unfold { from { opacity: 0; transform: translateY(-6px); } }

  /* ============================================================ PRICING
     Four collection cards. Each one is a padded body that grows, with a
     tinted terms strip welded flush to the card's bottom edge — so the
     body carries the padding, not the card, and the strip can run
     edge to edge. Cards stretch to equal height and the CTA is pushed
     down by margin-top:auto so the buttons line up across the row
     regardless of how many features each tier lists. */
  .tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; align-items: stretch; }
  .tier {
    position: relative; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule);
    padding: 0; display: flex; flex-direction: column; overflow: hidden;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }
  /* Essential carries a single-column terms strip, so its footer is shorter
     than the rest and its whole card would otherwise sit out of step.
     Subgrid hands every card the same two row tracks — one for the body,
     one for the strip — so the buttons and strips line up across the row.
     Without subgrid support the flex column above still stacks correctly,
     it just isn't row-aligned. */
  @supports (grid-template-rows: subgrid) {
    .tiers { grid-auto-rows: auto; }
    .tier { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
    .tier-body { display: flex; flex-direction: column; }
  }
  .tier.feat { box-shadow: inset 0 0 0 2px var(--ink); background: var(--card); }
  /* the card under the pointer takes the outline */
  .tier:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-md); }
  /* ...and Signature hands it over while a sibling is hovered, so exactly
     one card is ever outlined. :has() lets the grid see which child is hot. */
  .tiers:has(.tier:hover) .tier.feat:not(:hover) { box-shadow: inset 0 0 0 1px var(--rule); }

  .tier-body { padding: 2.6rem 1.6rem 1.6rem; display: flex; flex-direction: column; flex: 1; text-align: center; }
  .tier.feat .tier-body { padding-top: 3.1rem; }

  /* the badge is welded to the card's top edge, not floated above it */
  .tier-badge {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--paper); font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    padding: 0.5rem 1.5rem; border-radius: 0 0 0.5rem 0.5rem; white-space: nowrap; z-index: 2;
  }
  .tier .tn { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
  .tier .tn::after {
    content: ""; display: block; width: 2.6rem; height: 1px;
    background: var(--rule); margin: 0.85rem auto 0;
  }
  .tier .tdesc {
    font-family: var(--display); font-style: italic; font-size: 0.97rem; line-height: 1.45;
    color: var(--ink-2); margin: 1.1rem 0 0; min-height: 2.9em;
  }
  .tier .price {
    font-family: var(--display); font-size: 3rem; line-height: 1;
    margin: 1.5rem 0 1.7rem; font-variant-numeric: tabular-nums;
  }
  .tier ul {
    list-style: none; margin: 0 0 1.8rem; padding: 1.6rem 0 0;
    border-top: 1px solid var(--rule);
    font-size: 0.88rem; color: var(--ink-2); text-align: left;
  }
  .tier li { padding: 0.4rem 0 0.4rem 1.7rem; position: relative; }
  .tier li::before {
    content: ""; position: absolute; left: 0.15rem; top: 0.92rem; width: 0.52rem; height: 0.29rem;
    border-left: 1.5px solid var(--clay-deep); border-bottom: 1.5px solid var(--clay-deep); transform: rotate(-45deg);
  }
  .tier .btn { margin-top: auto; width: 100%; }

  /* terms strip: retainer on the left, pay-in-full on the right, split by OR */
  .tier-foot {
    background: var(--paper-2); border-top: 1px solid var(--rule);
    padding: 1.15rem 1.2rem; display: grid; gap: 0.9rem;
    grid-template-columns: 1fr auto 1fr; align-items: start;
    font-size: 0.72rem; line-height: 1.5; color: var(--ink-2);
  }
  /* Essential has no pay-in-full offer, so its strip is one column and
     shorter than the shared row track — centre it rather than leaving it
     hanging at the top. */
  .tier-foot.solo { grid-template-columns: 1fr; align-content: center; }
  .tier-foot .tf-i { display: flex; gap: 0.5rem; align-items: flex-start; }
  /* the pay-in-full half is a link through to the payment page */
  .tier-foot a.tf-pay {
    color: inherit; text-decoration: none; margin: -0.4rem -0.5rem; padding: 0.4rem 0.5rem;
    border-radius: 3px; transition: background 0.25s ease, color 0.25s ease;
  }
  .tier-foot a.tf-pay b { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
  .tier-foot a.tf-pay:hover { background: color-mix(in srgb, var(--clay) 34%, transparent); color: var(--ink); }
  .tier-foot a.tf-pay:hover svg { color: var(--clay-deep); }
  .tier-foot svg { width: 0.95rem; height: 0.95rem; flex: none; margin-top: 0.12rem; color: var(--ink-2); }
  .tier-foot b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 0.3rem; }
  .tier-foot .tf-or {
    align-self: stretch; display: grid; place-items: center; position: relative;
    font-size: 0.6rem; letter-spacing: 0.14em; color: var(--ink-3);
  }
  .tier-foot .tf-or::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--rule);
  }
  .tier-foot .tf-or span { background: var(--paper-2); padding: 0.25rem 0; position: relative; }
  .tier-foot p { margin: 0.45rem 0 0; }

  /* payment-options bar under the row */
  .pay-bar {
    margin-top: 1.1rem; background: var(--paper-2); border: 1px solid var(--rule);
    padding: 1.3rem 1.6rem; display: flex; align-items: center; justify-content: center;
    gap: 1.5rem; flex-wrap: wrap; text-align: center;
  }
  .pay-bar .pb-t {
    display: inline-flex; align-items: center; gap: 0.65rem;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
  }
  .pay-bar .pb-t svg { width: 1.15rem; height: 1.15rem; color: var(--clay-deep); }
  .pay-bar .pb-d { width: 1px; align-self: stretch; background: var(--rule); }
  .pay-bar p { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
  .pay-bar a {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
  }
  .pay-bar a:hover { text-decoration: underline; }

  /* travel tick on the booking page: a plain checkbox row that reveals a
     tiny contact form on check, so answering "yes" costs one click, not a
     detour to another page. */
  .travel-check {
    margin-top: 1.1rem; background: var(--paper-2); border: 1px solid var(--rule);
    border-radius: 0.9rem; padding: 1.3rem 1.6rem; max-width: 640px; margin-left: auto; margin-right: auto;
  }
  .tc-row { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }
  .tc-row input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; accent-color: var(--clay-deep); flex: none; }
  .tc-copy { font-size: 0.92rem; color: var(--ink-2); line-height: 1.5; }
  .tc-copy b { color: var(--ink); }
  .travel-form { display: grid; gap: 0.65rem; margin-top: 1rem; }
  .travel-form[hidden] { display: none; }
  .travel-form .mg-field { max-width: none; }
  .travel-form .btn { width: fit-content; justify-self: start; }
  .travel-form .mg-error { max-width: none; }

  @media (max-width: 1080px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) {
    .tiers { grid-template-columns: 1fr; }
    .tier .tdesc { min-height: 0; }
    .tier-foot { grid-template-columns: 1fr; }
    .tier-foot .tf-or { display: none; }
    .pay-bar .pb-d { display: none; }
  }

  /* ============================================================ FORM */
  .form { display: grid; gap: 1.1rem; }
  .form label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 0.4rem; }
  .form input, .form select, .form textarea {
    width: 100%; background: var(--card); border: none; box-shadow: inset 0 0 0 1px var(--field);
    border-radius: 0.9rem;   /* soft, so the fields sit with the pill buttons */
    padding: 0.95rem 1.15rem; font-family: inherit; font-size: 0.95rem; color: var(--ink);
    transition: box-shadow 0.25s ease;
  }
  .form select { border-radius: 0.9rem; }
  .form input:hover, .form select:hover, .form textarea:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
  .form input:focus, .form select:focus, .form textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--clay-deep); }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }
  .promise { font-size: 0.85rem; color: var(--ink-2); }

  /* ============================================================ PAGE HERO (inner pages) */
  .page-hero { position: relative; padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem clamp(2.5rem, 5vw, 3.5rem); text-align: center; overflow: hidden; }
  .page-hero::before {
    content: ""; position: absolute; inset: -40% -10% auto -10%; height: 120%; z-index: 0; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 40%, color-mix(in srgb, var(--clay) 13%, transparent), transparent 70%);
  }
  .page-hero > * { position: relative; z-index: 1; }
  .page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); margin-bottom: 0.9rem; }
  .page-hero .lede { color: var(--ink-2); max-width: 56ch; margin: 0 auto; }

  /* ============================================================ AURORA CTA */
  .magnet { position: relative; overflow: hidden; background: var(--tide); color: var(--on-tide); }
  .magnet::before, .magnet::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: 0.55;
  }
  .magnet::before { width: 46rem; height: 26rem; left: -12rem; top: -10rem; background: var(--taupe); }
  .magnet::after { width: 38rem; height: 24rem; right: -10rem; bottom: -12rem; background: var(--clay); opacity: 0.34; }
  @media (prefers-reduced-motion: no-preference) {
    .magnet::before { animation: drift 22s ease-in-out infinite alternate; }
    .magnet::after { animation: drift 28s ease-in-out infinite alternate-reverse; }
  }
  @keyframes drift { to { transform: translate3d(9%, 14%, 0) scale(1.15); } }
  .magnet .inner { position: relative; z-index: 1; max-width: 1060px; margin: 0 auto; padding: clamp(3.5rem, 8vw, 5.5rem) 1.5rem; }
  .magnet .label { color: var(--clay-deep); }
  .magnet h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--on-tide); margin-bottom: 0.8rem; }
  .magnet p { color: color-mix(in srgb, var(--on-tide) 78%, transparent); margin: 0 0 1.6rem; }

  /* The guide gets shown, not just described: a tilted three-card stack with
     the cover photo on top, the palette it teaches floating beside it. */
  .mg-grid { display: grid; grid-template-columns: 0.8fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .mg-cover { position: relative; width: min(300px, 78vw); aspect-ratio: 4 / 5; margin: 0 auto; }
  .mg-card {
    position: absolute; inset: 0; margin: 0; border-radius: 1.1rem; overflow: hidden;
    transition: transform 0.75s var(--ease), box-shadow 0.75s var(--ease);
  }
  .mg-card-back {
    background: linear-gradient(150deg, var(--taupe), color-mix(in srgb, var(--taupe) 55%, var(--paper)));
    transform: rotate(-8deg) translate(-7%, 2%); box-shadow: var(--shadow-sm);
  }
  .mg-card-mid {
    background: linear-gradient(150deg, var(--clay), color-mix(in srgb, var(--clay) 50%, var(--paper)));
    transform: rotate(-4deg) translate(-3%, 1%); box-shadow: var(--shadow-sm);
  }
  .mg-card-front { background: var(--card); box-shadow: var(--shadow-md); transform: rotate(2deg); }
  .mg-card-front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
  .mg-card-front::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(40,37,34,0.04) 0%, rgba(40,37,34,0.18) 45%, rgba(40,37,34,0.68) 100%);
  }
  .mg-card-front figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.2rem 1.25rem 1.35rem; color: #FAF6F0; text-align: left; }
  .mg-kicker { display: block; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250,246,240,0.82); margin-bottom: 0.45rem; }
  .mg-cover-title { display: block; font-family: var(--display); font-size: 1.75rem; line-height: 1.05; }
  /* Fanning the stack on hover is the whole payoff — it reads as a real
     stack of pages you could pick up. */
  .mg-cover:hover .mg-card-back { transform: rotate(-13deg) translate(-13%, 3%); }
  .mg-cover:hover .mg-card-mid  { transform: rotate(-7deg) translate(-7%, 1.5%); }
  .mg-cover:hover .mg-card-front { transform: rotate(1deg) translateY(-7px); box-shadow: 0 34px 64px -28px rgba(60,60,60,0.55); }
  .mg-cover:hover .mg-card-front img { transform: scale(1.07); }

  .mg-swatches {
    position: absolute; right: -0.85rem; bottom: 14%; z-index: 3; margin: 0; padding: 0.5rem; list-style: none;
    display: grid; gap: 0.42rem; border-radius: 999px;
    background: color-mix(in srgb, var(--card) 90%, transparent); backdrop-filter: blur(6px);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--rule) 80%, transparent);
  }
  .mg-swatches li {
    width: 1.1rem; height: 1.1rem; border-radius: 999px; background: var(--sw);
    box-shadow: inset 0 0 0 1px rgba(60,60,60,0.12);
  }
  @media (prefers-reduced-motion: no-preference) {
    .mg-swatches li { animation: bob 3.4s ease-in-out infinite; }
    .mg-swatches li:nth-child(2) { animation-delay: 0.25s; }
    .mg-swatches li:nth-child(3) { animation-delay: 0.5s; }
    .mg-swatches li:nth-child(4) { animation-delay: 0.75s; }
    .mg-swatches li:nth-child(5) { animation-delay: 1s; }
  }
  @keyframes bob { 50% { transform: translateX(-3px) scale(1.08); } }
  .mg-pages {
    position: absolute; left: -0.5rem; top: -0.8rem; z-index: 3;
    padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--ink); color: var(--paper);
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    box-shadow: var(--shadow-sm); transform: rotate(-3deg);
  }

  .mg-points { list-style: none; margin: 0 0 1.7rem; padding: 0; display: grid; gap: 0.65rem; }
  .mg-points li {
    display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem;
    color: color-mix(in srgb, var(--on-tide) 80%, transparent);
  }
  .mg-points svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.2rem; fill: none; stroke: var(--clay-deep); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

  /* One pill holds the field and the button — the whole thing lifts and
     rings sage on focus, so the form reads as a single object. */
  .magnet form { margin: 0; }
  .mg-hb { margin-top: 0.4rem; }
  .mg-hb iframe, .bk-hb iframe { width: 100%; height: 850px; border: 0; border-radius: 1rem; background: #fff; box-shadow: var(--shadow-sm); }
  .mg-field {
    display: flex; align-items: center; gap: 0.55rem; max-width: 450px;
    padding: 0.4rem 0.4rem 0.4rem 1.15rem; border-radius: 999px; background: var(--card);
    box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm);
    transition: box-shadow 0.3s ease, transform 0.3s var(--ease);
  }
  .mg-field:focus-within {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 2px var(--clay-deep), 0 18px 36px -22px color-mix(in srgb, var(--clay-deep) 75%, transparent);
  }
  .mg-field .env { width: 1.05rem; height: 1.05rem; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.6; transition: stroke 0.3s ease; }
  .mg-field:focus-within .env { stroke: var(--clay-deep); }
  .magnet input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0.85rem 0; font-family: inherit; font-size: 0.95rem; color: var(--ink); }
  .magnet input:focus { outline: none; }
  .mg-fine { display: flex; align-items: center; gap: 0.45rem; margin: 0.95rem 0 0; font-size: 0.78rem; color: color-mix(in srgb, var(--on-tide) 62%, transparent); }
  .mg-fine svg { width: 0.85rem; height: 0.85rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; }
  /* Shown when the subscribe call fails — a lead magnet that silently drops
     the address is worse than one that admits it. */
  .mg-error {
    max-width: 450px; margin: 0.75rem 0 0; padding: 0.65rem 1.05rem; border-radius: 0.9rem;
    font-size: 0.85rem; color: var(--on-tide);
    background: color-mix(in srgb, var(--clay-deep) 26%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clay-deep) 55%, transparent);
  }
  .mg-error[hidden] { display: none; }

  /* The thank-you the submit handler swaps in. */
  .mg-done {
    display: inline-flex; align-items: center; gap: 0.55rem; margin: 0;
    padding: 0.9rem 1.5rem; border-radius: 999px; font-size: 0.95rem;
    background: color-mix(in srgb, var(--clay) 45%, var(--card)); color: var(--ink);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--clay-deep) 35%, transparent);
  }

  @media (max-width: 880px) {
    .mg-grid { grid-template-columns: 1fr; gap: 2.8rem; }
    .mg-copy { text-align: center; }
    .mg-points { justify-items: center; }
    .mg-points li { text-align: left; max-width: 38ch; }
    .mg-field { margin: 0 auto; }
    .mg-fine { justify-content: center; }
  }
  @media (max-width: 420px) {
    .mg-field { padding-left: 0.85rem; gap: 0.35rem; }
    .mg-field .sparkle-inner { padding: 0.85rem 1rem; letter-spacing: 0.1em; }
  }

  /* ============================================================ HOLIDAY MINIS
     The one dark band on an otherwise ivory site — it interrupts the scroll
     on purpose, and it is the only place scarcity is stated.
     SEASONAL CONTENT: the four weekend dates and the data-booked /
     data-total on .xmas-meter are placeholders. Update them (or pull the
     band) each year — stale dates are worse than no band at all. */
  .xmas { position: relative; background: #262B25; color: #F2EBE0; overflow: hidden; }
  .xmas::before {
    content: ""; position: absolute; width: 34rem; height: 22rem; right: 18%; top: -8rem;
    background: #C08B4E; opacity: 0.22; filter: blur(90px); border-radius: 50%; pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .xmas::before { animation: drift 24s ease-in-out infinite alternate; }
  }
  /* full-bleed on purpose: the photo runs to the viewport edge so the band
     breaks the container rhythm the ivory sections keep */
  .xmas-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); }
  .xmas-ph { position: relative; overflow: hidden; min-height: 26rem; }
  .xmas-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 34% 50%; }
  /* feather the photo into the panel so the two halves read as one band */
  .xmas-ph::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(38,43,37,0.4) 0%, rgba(38,43,37,0) 34%, rgba(38,43,37,0.9) 88%, #262B25 100%);
  }
  .xmas-tag {
    position: absolute; z-index: 2; left: clamp(1.1rem, 3vw, 2.4rem); top: 2.2rem; transform: rotate(-3deg);
    padding: 0.45rem 1.1rem 0.45rem 1.3rem; background: #B4674E; color: #FFF6EA;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
    box-shadow: 0 14px 26px -14px rgba(0,0,0,0.8);
  }
  .xmas-body { max-width: 40rem; padding: clamp(2.8rem, 6vw, 4.4rem) clamp(1.5rem, 4vw, 3.4rem); align-self: center; }
  /* the site's own eyebrow (.label.label-rule), recoloured for the dark band */
  .xmas .xmas-now { color: #F0A98F; margin-bottom: 1.1rem; }
  .xmas h2 { color: #FCF7EF; font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 0.7rem; }
  .xmas h2 em { font-style: italic; color: #EADCC6; }
  .xmas .lede { color: rgba(242,235,224,0.78); margin: 0; max-width: 46ch; }

  .xmas-dates { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; margin: 1.6rem 0 1.5rem; padding: 0; }
  .xmas-date {
    display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 1.15rem;
    border-radius: 1rem; text-decoration: none; color: #F2EBE0;
    background: rgba(242,235,224,0.06); box-shadow: inset 0 0 0 1px rgba(242,235,224,0.16);
    transition: transform 0.35s var(--ease), background 0.3s ease, box-shadow 0.3s ease;
  }
  .xmas-date:hover, .xmas-date:focus-visible {
    transform: translateY(-3px); background: rgba(242,235,224,0.13);
    box-shadow: inset 0 0 0 1px rgba(234,220,198,0.55), 0 16px 30px -20px rgba(0,0,0,0.9);
  }
  .xmas-date .d { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(242,235,224,0.62); }
  .xmas-date .s { font-size: 0.9rem; font-weight: 600; }
  .xmas-date .s.low { color: #F0A98F; }
  .xmas-date.out { opacity: 0.42; pointer-events: none; }
  .xmas-date.out .s { text-decoration: line-through; }
  /* weekdays aren't a released date, just an open door — dashed, not solid */
  .xmas-date.ask { background: transparent; box-shadow: none; outline: 1px dashed rgba(242,235,224,0.3); outline-offset: -1px; }

  .xmas-meter { max-width: 27rem; margin-bottom: 1.6rem; }
  .xmas-meter .bar { height: 0.5rem; border-radius: 999px; background: rgba(242,235,224,0.14); overflow: hidden; }
  .xmas-meter .fill {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, #8FA68C, #EADCC6);
    transition: width 1.6s var(--ease);
  }
  .xmas-meter .cap {
    display: flex; justify-content: space-between; gap: 1rem; margin: 0.55rem 0 0;
    font-size: 0.74rem; color: rgba(242,235,224,0.68);
  }
  .xmas-meter .cap b { color: #F0A98F; font-weight: 700; }

  .xmas-facts {
    display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; list-style: none; margin: 0 0 1.8rem; padding: 0;
    font-size: 0.8rem; color: rgba(242,235,224,0.7);
  }
  .xmas-facts li { display: flex; align-items: center; gap: 0.9rem; }
  .xmas-facts li + li::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: rgba(242,235,224,0.4); }

  /* sample strip: real frames from last season, so "10 edited images"
     is a picture, not a claim. Horizontal scroll on small screens. */
  .xmas-peek { margin: 0 0 1.8rem; }
  .xmas-peek-cap {
    margin: 0 0 0.7rem; font-size: 0.74rem; letter-spacing: 0.06em;
    color: rgba(242,235,224,0.68);
  }
  .xmas-peek-strip {
    display: flex; gap: 0.55rem; overflow-x: auto; padding-bottom: 0.45rem;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .xmas-peek-strip img {
    flex: none; width: 5.6rem; height: 7rem; object-fit: cover; border-radius: 0.55rem;
    box-shadow: inset 0 0 0 1px rgba(242,235,224,0.16), 0 10px 22px -14px rgba(0,0,0,0.8);
    transition: transform 0.35s var(--ease);
  }
  .xmas-peek-strip img:hover { transform: translateY(-3px) scale(1.04); }
  @media (prefers-reduced-motion: reduce) { .xmas-peek-strip img:hover { transform: none; } }

  .xmas-pkgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin: 0 0 1.8rem; }
  .xmas-pkg {
    text-align: center;
    display: block; padding: 1rem 1.1rem 1.15rem; border-radius: 1rem; text-decoration: none; color: #F2EBE0;
    background: rgba(242,235,224,0.06); box-shadow: inset 0 0 0 1px rgba(242,235,224,0.16);
    transition: transform 0.35s var(--ease), background 0.3s ease, box-shadow 0.3s ease;
  }
  .xmas-pkg:hover, .xmas-pkg:focus-visible {
    transform: translateY(-3px); background: rgba(242,235,224,0.13);
    box-shadow: inset 0 0 0 1px rgba(234,220,198,0.55), 0 16px 30px -20px rgba(0,0,0,0.9);
  }
  .xmas-pkg .xp-n { font-family: var(--display); font-size: 1.3rem; color: #FCF7EF; display: block; line-height: 1.1; }
  .xmas-pkg .xp-p { font-family: var(--display); font-size: 1.05rem; color: #EADCC6; display: block; margin: 0.15rem 0 0.55rem; }
  .xmas-pkg ul { list-style: none; margin: 0; padding: 0; font-size: 0.78rem; color: rgba(242,235,224,0.78); }
  .xmas-pkg li { padding: 0.2rem 0; border-top: 1px solid rgba(242,235,224,0.12); }
  /* Candle carries the full gallery, so it sits in ivory on the dark band.
     Both cards share the flag's top space side by side so the names line up. */
  .xmas-pkg { position: relative; }
  .xmas-pkg .xp-flag {
    position: absolute; top: 0.95rem; left: 0; right: 0;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
  }
  .xmas-pkg.is-featured { padding-top: 2.3rem; background: #F2EBE0; color: #262B25; box-shadow: none; }
  .xmas-pkg.is-featured:hover, .xmas-pkg.is-featured:focus-visible { background: #FCF7EF; box-shadow: 0 18px 32px -18px rgba(0,0,0,0.9); }
  .xmas-pkg.is-featured .xp-flag { color: #9A5440; }
  .xmas-pkg.is-featured .xp-n { color: #262B25; }
  .xmas-pkg.is-featured .xp-p { color: #5E5446; }
  .xmas-pkg.is-featured ul { color: rgba(38,43,37,0.78); }
  .xmas-pkg.is-featured li { border-top-color: rgba(38,43,37,0.14); }
  @media (min-width: 701px) { .xmas-pkg { padding-top: 2.3rem; } }
  @media (max-width: 700px) { .xmas-pkgs { grid-template-columns: 1fr; } }
  .xmas-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; }
  .xmas .btn-ghost { color: #F2EBE0; box-shadow: inset 0 0 0 1px rgba(242,235,224,0.42); }
  .xmas .btn-ghost:hover { background: #F2EBE0; color: #262B25; }
  .xmas-pkgs-wrap { margin-top: 1.4rem; }
  .xmas-pkgs-wrap[hidden] { display: none; }
  .xmas-pkgs-wrap .xmas-pkgs { margin-bottom: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .xmas-pkgs-wrap:not([hidden]) .xmas-pkg { animation: rise 0.6s var(--ease) backwards; }
    .xmas-pkgs-wrap:not([hidden]) .xmas-pkg:nth-child(2) { animation-delay: 0.08s; }
    .xmas-pkgs-wrap:not([hidden]) .xmas-pkg:nth-child(3) { animation-delay: 0.16s; }
  }
  .xmas-note { margin: 1.2rem 0 0; font-size: 0.78rem; color: rgba(242,235,224,0.64); }
  @media (max-width: 900px) {
    .xmas-grid { grid-template-columns: minmax(0, 1fr); }
    .xmas-ph { min-height: 15rem; }
    .xmas-ph::after { background: linear-gradient(180deg, rgba(38,43,37,0.25) 0%, rgba(38,43,37,0) 40%, rgba(38,43,37,0.9) 100%); }
    .xmas-tag { top: auto; bottom: 1.4rem; }
  }
  @media (max-width: 560px) { .xmas-cta .btn { width: 100%; } }

  /* ============================================================ STICKY MOBILE BAR */
  .book-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none;
    background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(14px);
    border-top: 1px solid var(--rule); padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
    gap: 0.6rem; align-items: center;
    transform: translateY(110%); transition: transform 0.45s var(--ease);
  }
  .book-bar.up { transform: none; }
  .book-bar .bb-copy { flex: 1; min-width: 0; line-height: 1.3; }
  .book-bar .bb-copy b { display: block; font-size: 0.86rem; }
  .book-bar .bb-copy span { font-size: 0.72rem; color: var(--ink-2); }
  .book-bar .btn { padding: 0.85rem 1.3rem; font-size: 0.72rem; flex: none; }
  @media (max-width: 860px) { .book-bar { display: flex; } body { padding-bottom: 4.6rem; } }

  /* ============================================================ GUIDE POPUP
     The style-guide capture, offered once after ~15s on the site — the
     guidePopup() controller near the end of the script block decides when.
     Same class-toggle pattern as the lightbox: .on shows. The backdrop sits
     above the sticky book bar (70), so the card never collides with it; on
     short screens the card scrolls internally. */
  .mg-pop {
    position: fixed; inset: 0; z-index: 110; display: none; place-items: center;
    padding: 1.2rem; background: rgba(60,52,44,0.45);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .mg-pop.on { display: grid; }
  .mg-pop-card {
    position: relative; width: min(92vw, 480px); max-height: calc(100dvh - 3rem);
    overflow: auto; padding: 2.3rem 2rem 1.9rem; border-radius: 1.4rem;
    background: var(--paper); box-shadow: var(--shadow-md);
  }
  @media (prefers-reduced-motion: no-preference) {
    .mg-pop.on .mg-pop-card { animation: pop-in 0.45s var(--ease) both; }
  }
  @keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
  .mg-pop-x {
    position: absolute; top: 0.85rem; right: 0.85rem; width: 2.2rem; height: 2.2rem;
    border: none; border-radius: 999px; cursor: pointer; display: grid; place-items: center;
    background: transparent; color: var(--ink-2); font-size: 1rem; line-height: 1;
  }
  .mg-pop-x:hover { background: var(--tide); color: var(--ink); }
  .mg-pop-card h3 { font-size: clamp(1.35rem, 4vw, 1.7rem); margin: 0.2rem 0 0.55rem; }
  .mg-pop-card > p { color: var(--ink-2); margin: 0 0 1.3rem; }
  .mg-pop .mg-field { max-width: none; }
  /* The pill input is styled under `.magnet input` for the inline form;
     the popup needs its own copy of those two rules. */
  .mg-pop input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0.85rem 0; font-family: inherit; font-size: 0.95rem; color: var(--ink); }
  .mg-pop input:focus { outline: none; }
  .mg-pop .mg-fine { color: var(--ink-3); }
  @media (max-width: 420px) {
    .mg-pop-card { padding: 2rem 1.3rem 1.5rem; }
  }

  /* ============================================================ CONSULT CALL */
  /* Reassurance chips under the call hero — sets expectations before
     anyone commits to a slot (length, medium, language, no sales script). */
  .call-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
  .call-facts li {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 999px;
    padding: 0.5rem 1rem; background: var(--card);
  }

  /* Scheduler card */
  .sched {
    max-width: 780px; margin: 0 auto; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm);
    padding: clamp(1.6rem, 4vw, 2.6rem);
  }
  .sched-step { margin-bottom: 2rem; }
  .sched-step:last-of-type { margin-bottom: 0; }
  .sched-step > h3 {
    font-family: var(--body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink); margin: 0 0 0.9rem;
    display: flex; align-items: baseline; gap: 0.6rem;
  }
  .sched-step > h3 em {
    font-family: var(--display); font-style: normal; font-size: 0.85rem; color: var(--clay-deep);
    font-variant-numeric: tabular-nums;
  }

  /* Day strip — scrolls sideways on narrow screens rather than wrapping raggedly */
  .day-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.5rem; scroll-snap-type: x mandatory; }
  .day-strip::-webkit-scrollbar { height: 4px; }
  .day-strip::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 999px; }
  .day {
    flex: none; scroll-snap-align: start; cursor: pointer; font: inherit; text-align: center;
    background: transparent; border: none; box-shadow: inset 0 0 0 1px var(--field);
    padding: 0.7rem 0.95rem; min-width: 4.6rem; color: var(--ink-2);
    transition: box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.3s var(--ease);
  }
  .day .dow { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
  .day .dnum { display: block; font-family: var(--display); font-size: 1.35rem; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; }
  .day .dmon { display: block; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .day:hover { box-shadow: inset 0 0 0 1px var(--clay-deep); transform: translateY(-2px); }
  .day[aria-pressed="true"] { background: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); color: color-mix(in srgb, var(--on-clay) 85%, transparent); }
  .day[aria-pressed="true"] .dnum { color: var(--on-clay); }
  .day[aria-pressed="true"] .dmon { color: color-mix(in srgb, var(--on-clay) 66%, transparent); }

  /* Time slots */
  .slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.4rem, 1fr)); gap: 0.5rem; }
  .slot {
    cursor: pointer; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink);
    background: transparent; border: none; box-shadow: inset 0 0 0 1px var(--field);
    padding: 0.85rem 0.6rem; font-variant-numeric: tabular-nums;
    transition: box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.3s var(--ease);
  }
  .slot:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--clay-deep); transform: translateY(-2px); }
  .slot[aria-pressed="true"] { background: var(--clay); box-shadow: inset 0 0 0 1px var(--clay); color: var(--on-clay); }
  .slot:disabled { color: var(--ink-3); cursor: not-allowed; text-decoration: line-through; opacity: 0.6; }
  .slot-note { font-size: 0.8rem; color: var(--ink-3); margin: 0.8rem 0 0; }

  /* Steps 2 and 3 stay dimmed until the previous choice is made — 0.78 is
     enough to read as "not yet your turn" while keeping the labels legible.
     Anything under ~0.75 pushed charcoal below 4.5:1 on ivory. */
  .sched-step.locked { opacity: 0.78; pointer-events: none; }
  .sched-step { transition: opacity 0.4s var(--ease); }

  .sched-summary {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    background: var(--paper-2); padding: 0.9rem 1.1rem; margin-bottom: 1.4rem; font-size: 0.92rem;
  }
  .sched-summary[hidden] { display: none; } /* display:flex would otherwise beat the hidden attribute */
  .sched-summary b { font-weight: 600; }
  .sched-summary .chg { margin-left: auto; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; background: none; border: none; cursor: pointer; color: var(--clay-deep); font-family: var(--body); font-weight: 700; }
  .sched-summary .chg:hover { text-decoration: underline; }

  /* Confirmation state */
  .sched-done { text-align: center; padding: 1rem 0 0.4rem; }
  .sched-done .tick {
    width: 3.4rem; height: 3.4rem; margin: 0 auto 1.2rem; border-radius: 999px;
    background: var(--clay); color: var(--on-clay); display: grid; place-items: center; font-size: 1.5rem;
  }
  .sched-done h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }
  .sched-done .when { font-family: var(--display); font-size: 1.2rem; color: var(--clay-deep); margin: 0 0 0.4rem; }
  .sched-done p { color: var(--ink-2); margin: 0 auto; max-width: 44ch; font-size: 0.94rem; }

  /* ============================================================ CLIENT ACCESS */
  /* The sign-in panel is a handoff, not a login form: galleries live on
     Pixieset, so we never take a password on this domain. */
  .signin {
    position: relative; overflow: hidden; max-width: 620px; margin: 0 auto;
    background: var(--tide); color: var(--on-tide); text-align: center;
    padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.5rem, 4vw, 2.8rem);
  }
  .signin::after {
    content: ""; position: absolute; width: 26rem; height: 18rem; right: -8rem; bottom: -9rem;
    background: var(--clay); opacity: 0.34; filter: blur(70px); border-radius: 50%; pointer-events: none;
  }
  .signin > * { position: relative; z-index: 1; }
  .signin .lock {
    width: 3rem; height: 3rem; margin: 0 auto 1.2rem; border-radius: 999px;
    display: grid; place-items: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-tide) 28%, transparent);
  }
  .signin .lock svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--clay-deep); stroke-width: 1.6; }
  .signin h2 { color: var(--on-tide); font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.7rem; }
  .signin p { color: color-mix(in srgb, var(--on-tide) 78%, transparent); margin: 0 auto 1.8rem; max-width: 42ch; font-size: 0.96rem; }
  /* View My Gallery — the primary action on this panel, so hovering it
     lights up rather than inverting to charcoal the way .btn-light did. */
  .signin .btn-light {
    width: 100%; max-width: 22rem; position: relative; overflow: hidden;
    background: linear-gradient(100deg, var(--clay), color-mix(in srgb, var(--clay) 70%, var(--taupe)));
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background 0.3s ease-out;
  }
  .signin .btn-light::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 55%, transparent), transparent);
    transform: translateX(-100%);
    transition: transform 0.7s ease-out;
  }
  .signin .btn-light:hover::before, .signin .btn-light:focus-visible::before { transform: translateX(100%); }
  .signin .btn-light:hover, .signin .btn-light:focus-visible {
    background: linear-gradient(100deg, var(--clay-deep), var(--clay));
    color: var(--paper);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 18px 38px -14px color-mix(in srgb, var(--clay-deep) 62%, transparent),
                inset 0 0 0 1px color-mix(in srgb, var(--paper) 35%, transparent);
  }
  .signin .btn-light:active { transform: translateY(0) scale(0.99); }
  @media (prefers-reduced-motion: reduce) {
    .signin .btn-light, .signin .btn-light::before { transition: none; }
    .signin .btn-light:hover { transform: none; }
  }
  .signin .host {
    display: block; margin-top: 1.2rem; font-size: 0.74rem; letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--on-tide) 62%, transparent);
  }
  .signin .host a { color: color-mix(in srgb, var(--on-tide) 72%, transparent); }

  /* What's inside the gallery */
  .perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
  .perk {
    background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); padding: 1.9rem 1.6rem;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }
  .perk:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-md); }
  .perk .pico {
    width: 2.6rem; height: 2.6rem; margin-bottom: 1.1rem; border-radius: 999px;
    display: grid; place-items: center; background: color-mix(in srgb, var(--clay) 14%, transparent);
  }
  .perk .pico svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--clay-deep); stroke-width: 1.6; }
  .perk h3 { font-size: 1.25rem; margin-bottom: 0.45rem; }
  .perk p { font-size: 0.92rem; color: var(--ink-2); margin: 0; }

  /* Nav client-login link — quieter than the booking button, still findable */
  nav.links a.nav-client { display: inline-flex; align-items: center; gap: 0.42rem; }
  nav.links a.nav-client svg { width: 0.82rem; height: 0.82rem; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; }

  /* ============================================================ PAYMENTS */
  /* Card details are never entered on this site. Every button posts to
     /api/checkout, which creates a Stripe Checkout Session server-side and
     redirects to Stripe's own hosted page; prints hand off to the Pixieset
     gallery. Amounts live in api/_lib/catalog.js, never in this markup, so
     nothing here can be edited into a cheaper price. Keeps Ana out of PCI
     scope entirely. */
  .pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; align-items: stretch; }
  .pay-card {
    position: relative; display: flex; flex-direction: column; background: var(--card);
    box-shadow: inset 0 0 0 1px var(--rule); padding: 2rem 1.7rem 1.7rem;
    transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  }
  .pay-card.feat { box-shadow: inset 0 0 0 2px var(--clay-deep); }
  /* the card under the pointer takes the outline */
  .pay-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--clay-deep), var(--shadow-md); }
  /* ...and the retainer card hands it over while a sibling is hovered, so
     exactly one card is ever outlined. */
  .pay-grid:has(.pay-card:hover) .pay-card.feat:not(:hover) { box-shadow: inset 0 0 0 1px var(--rule); }

  /* Only one CTA carries the fill at a time. The featured card's button is
     filled by default; the moment the pointer is on a sibling's button it
     steps back to ghost, so the hovered button is the single highlight.
     Keyed to button hover, not card hover — moving over the card body
     transfers the outline, moving onto a CTA transfers the fill. */
  .tiers:has(.tier:not(.feat) .btn:hover) .tier.feat .btn,
  .pay-grid:has(.pay-card:not(.feat) .btn:hover) .pay-card.feat .btn {
    background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);
  }
  .pay-card .pn { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 0.55rem; }
  .pay-card .pamt { font-family: var(--display); font-size: 2.3rem; line-height: 1.1; margin-bottom: 0.15rem; font-variant-numeric: tabular-nums; }
  .pay-card .pamt small { font-family: var(--body); font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0.02em; }
  .pay-card p { font-size: 0.9rem; color: var(--ink-2); margin: 0.7rem 0 1.6rem; }
  .pay-card .btn { margin-top: auto; width: 100%; }

  .pay-pending code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; color: var(--clay-deep); }

  .pay-trust {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.4rem 2rem;
    max-width: 900px; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; padding: 0 1.5rem;
  }
  .pay-trust > div { display: flex; gap: 0.8rem; align-items: flex-start; } /* direct children only — the inner div must stay a block */
  .pay-trust svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.28rem; fill: none; stroke: var(--clay-deep); stroke-width: 1.7; }
  .pay-trust b { display: block; font-size: 0.92rem; margin-bottom: 0.15rem; }
  .pay-trust span { font-size: 0.85rem; color: var(--ink-2); }
  .pay-methods {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem;
    max-width: 620px; margin: 2rem auto 0; padding: 0 1.5rem; list-style: none;
  }
  .pay-methods li {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); border-radius: 999px; padding: 0.42rem 0.85rem;
  }

  /* --- fields inside a payment card (balance amount + reference) --- */
  .pay-fields { gap: 0.85rem; margin: 0.2rem 0 1.4rem; }
  .pay-fields label { font-size: 0.64rem; letter-spacing: 0.13em; margin-bottom: 0.32rem; }
  .pay-fields input { padding: 0.75rem 0.95rem; font-size: 0.92rem; }
  /* the currency mark sits inside the field, so the number lines up with it */
  .amt-field { position: relative; }
  .amt-field > span {
    position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%);
    color: var(--ink-3); font-size: 0.92rem; pointer-events: none;
  }
  .amt-field input { padding-left: 1.85rem; font-variant-numeric: tabular-nums; }

  /* --- pay-in-full strip, same shell as the payment-options bar --- */
  .pay-full { flex-wrap: wrap; }
  .pay-full .pf-pick { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-left: auto; }
  .pay-full select {
    background: var(--card); border: none; box-shadow: inset 0 0 0 1px var(--field);
    border-radius: 999px; padding: 0.72rem 1.1rem; font-family: inherit; font-size: 0.9rem;
    color: var(--ink); transition: box-shadow 0.25s ease; max-width: 100%;
  }
  .pay-full select:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
  .pay-full select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--clay-deep); }
  .pay-full .btn { padding-top: 0.7rem; padding-bottom: 0.7rem; }
  @media (max-width: 720px) {
    .pay-full .pf-pick { margin-left: 0; width: 100%; }
    .pay-full select, .pay-full .pf-pick .btn { width: 100%; }
  }

  /* a button waiting on Stripe shouldn't invite a second click */
  .btn[disabled] { opacity: 0.55; pointer-events: none; }

  /* --- status line shared by every payment button --- */
  .pay-msg {
    max-width: 52ch; margin: 1.4rem auto 0; padding: 0.85rem 1.1rem; border-radius: 0.9rem;
    font-size: 0.9rem; text-align: center; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-2);
  }
  .pay-msg.err { box-shadow: inset 0 0 0 1px var(--clay-deep); color: var(--ink); }

  /* --- receipt panel on the thank-you page --- */
  .pay-receipt {
    max-width: 30rem; margin: 0 auto; background: var(--card); padding: 2rem 1.8rem;
    box-shadow: inset 0 0 0 1px var(--rule);
  }
  .pay-receipt .pr-state { font-size: 0.92rem; color: var(--ink-2); margin: 0; text-align: center; }
  .pay-receipt dl { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem 1.2rem; margin: 0; }
  /* an explicit display beats the UA's [hidden] rule, so restate it — without
     this the empty receipt shows before the payment is confirmed */
  .pay-receipt dl[hidden] { display: none; }
  .pay-receipt dt {
    font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2);
    align-self: center;
  }
  .pay-receipt dd { margin: 0; font-size: 0.98rem; text-align: right; word-break: break-word; }
  .pay-receipt dd.amt { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }

  /* ============================================================ RESERVE */
  /* Short cinematic banner — the same language as the home hero, cropped
     tighter so the form stays close to the fold. */
  .bk-hero { position: relative; overflow: hidden; display: grid; align-items: end; min-height: min(58vh, 520px); }
  .bk-hero-media { position: absolute; inset: 0; z-index: 0; background: var(--paper-2); }
  .bk-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 34%; }
  @media (prefers-reduced-motion: no-preference) { .bk-hero-media img { animation: kenburns 26s var(--ease) forwards; } }
  .bk-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
      linear-gradient(to top, rgba(22,22,20,0.84) 0%, rgba(22,22,20,0.42) 46%, rgba(22,22,20,0.1) 82%),
      /* the type column falls over the bright window side — hold it down */
      linear-gradient(to right, rgba(30,22,16,0.62) 0%, rgba(22,22,20,0.3) 38%, transparent 68%),
      radial-gradient(110% 70% at 12% 100%, rgba(62,48,38,0.32), transparent 72%);
  }
  .bk-hero-inner {
    position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto;
    padding: 4rem 1.5rem clamp(2.6rem, 5vw, 3.6rem);
  }
  .bk-hero-inner .label { color: #EFE0CD; text-shadow: 0 1px 14px rgba(0,0,0,0.65); }
  .bk-hero-inner h1 { color: #FAF6F0; font-size: clamp(2.2rem, 5vw, 3.9rem); max-width: 14ch; margin-bottom: 1rem; text-shadow: 0 2px 26px rgba(0,0,0,0.4); }
  .bk-hero-inner .lede { color: rgba(250,246,240,0.9); max-width: 48ch; margin: 0; text-shadow: 0 1px 14px rgba(0,0,0,0.42); }
  .bk-avail {
    display: inline-flex; align-items: center; gap: 0.6rem; margin: 1.6rem 0 0;
    background: rgba(255,255,255,0.1); backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgba(250,246,240,0.28); border-radius: 999px;
    padding: 0.55rem 1.1rem; color: #FAF6F0;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  }
  .bk-avail .dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #9DBFA4; flex: none; }
  @media (prefers-reduced-motion: no-preference) { .bk-avail .dot { animation: pulse 2.4s ease-in-out infinite; } }
  @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(157,191,164,0.6); } 60% { box-shadow: 0 0 0 0.42rem rgba(157,191,164,0); } }

  /* Form left, reassurance right */
  .bk-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
  @media (max-width: 940px) { .bk-split { grid-template-columns: 1fr; } }
  .bk-formcard { background: var(--card); box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-sm); padding: clamp(1.6rem, 4vw, 2.8rem); }
  .bk-formcard > h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin-bottom: 0.4rem; }
  .bk-formcard > .sub { color: var(--ink-2); font-size: 0.94rem; margin: 0 0 1.9rem; }

  /* Session picker — image tiles instead of a dropdown */
  .pick-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2); display: block; margin-bottom: 0.7rem; }
  .pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin-bottom: 1.5rem; }
  @media (max-width: 560px) { .pick { grid-template-columns: repeat(2, 1fr); } }
  .pick-tile {
    position: relative; overflow: hidden; cursor: pointer; border: none; padding: 0;
    background: var(--paper-2); aspect-ratio: 4/3; display: block; font: inherit;
    box-shadow: inset 0 0 0 1px var(--rule);
    transition: box-shadow 0.25s ease, transform 0.35s var(--ease);
  }
  .pick-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease), filter 0.35s ease; filter: saturate(0.9); }
  .pick-tile::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20,20,18,0.86) 0%, rgba(20,20,18,0.4) 52%, rgba(20,20,18,0.06) 100%);
    transition: opacity 0.3s ease;
  }
  .pick-tile span {
    position: absolute; z-index: 2; left: 0.7rem; right: 0.7rem; bottom: 0.6rem;
    color: #fff; font-size: 0.76rem; font-weight: 600; line-height: 1.25;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
  }
  .pick-tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--clay-deep); }
  .pick-tile:hover img { transform: scale(1.06); }
  .pick-tile[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--clay-deep), var(--shadow-sm); }
  .pick-tile[aria-pressed="true"] img { filter: saturate(1.05); }
  .pick-tile[aria-pressed="true"]::after { opacity: 0.72; }
  .pick-tile .tick {
    position: absolute; z-index: 3; top: 0.5rem; right: 0.5rem; width: 1.35rem; height: 1.35rem;
    border-radius: 999px; background: var(--clay); color: var(--on-clay); display: none;
    align-items: center; justify-content: center; font-size: 0.72rem; line-height: 1;
  }
  .pick-tile[aria-pressed="true"] .tick { display: flex; }

  /* Sticky reassurance column */
  .bk-aside { position: sticky; top: 5.5rem; display: grid; gap: 1.1rem; }
  @media (max-width: 940px) { .bk-aside { position: static; } }
  .bk-photo { margin: 0; aspect-ratio: 4/5; overflow: hidden; background: var(--paper-2); }
  .bk-photo img { width: 100%; height: 100%; object-fit: cover; }
  .bk-quote { margin: 0; background: var(--tide); color: var(--on-tide); padding: 1.6rem 1.5rem 1.4rem; }
  .bk-quote .mark { font-family: var(--display); font-size: 2.6rem; line-height: 0.4; color: var(--clay-deep); display: block; margin: 0.6rem 0 1rem; }
  .bk-quote p { margin: 0 0 0.9rem; font-size: 0.95rem; color: color-mix(in srgb, var(--on-tide) 92%, transparent); }
  .bk-quote .who { font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: color-mix(in srgb, var(--on-tide) 58%, transparent); }
  .bk-next { margin: 0; padding: 1.5rem 1.5rem 1.3rem; list-style: none; background: var(--paper-2); counter-reset: bn; }
  .bk-next b { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1rem; }
  .bk-next li { counter-increment: bn; position: relative; padding: 0 0 0.85rem 2.1rem; font-size: 0.9rem; color: var(--ink-2); }
  .bk-next li:last-child { padding-bottom: 0; }
  .bk-next li::before {
    content: counter(bn); position: absolute; left: 0; top: 0.05rem;
    width: 1.45rem; height: 1.45rem; border-radius: 999px; display: grid; place-items: center;
    background: var(--clay); color: var(--on-clay); font-family: var(--body); font-size: 0.7rem; font-weight: 700;
  }
  .bk-next li em { font-style: normal; color: var(--ink); font-weight: 600; }

  /* ---------------------------------------------------------------
     Sparkle submit button — the button-8 component ported to plain
     CSS/canvas. Its gradient is sage -> taupe rather than the
     original blue/purple so it belongs to this brand; the sparkle
     pulse, the hover scale and the star burst all behave as they do
     in the React version. tsparticles is replaced by a small canvas
     emitter (4-sided stars, 20 max, 5 per 0.5s) that only runs while
     the pointer is over the button.
     --------------------------------------------------------------- */
  .sparkle-btn {
    position: relative; display: inline-block; padding: 4px; border: none;
    border-radius: 999px; cursor: pointer; font-family: inherit;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--clay) 32%, transparent),
      color-mix(in srgb, var(--clay-deep) 32%, transparent) 40%,
      color-mix(in srgb, var(--taupe) 32%, transparent));
    transition: transform 0.42s linear(0.0000, 0.0300, 0.1022, 0.1965, 0.2992, 0.4013, 0.4974, 0.5845, 0.6612, 0.7273, 0.7831, 0.8295, 0.8676, 0.8983, 0.9230, 0.9424, 0.9576, 0.9693, 0.9782, 0.9849, 0.9898, 0.9935, 0.9961, 0.9979, 0.9991);
  }
  .sparkle-btn:hover { transform: scale(1.06); }
  .sparkle-btn:active { transform: scale(1.02); }
  .sparkle-inner {
    position: relative; z-index: 1;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    border-radius: 999px; padding: 0.85rem 1.6rem;
    background: linear-gradient(90deg, var(--clay), var(--clay-deep) 45%, var(--taupe));
    color: var(--on-clay);
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  }
  .sparkle-btn .sp {
    position: absolute; fill: var(--paper); pointer-events: none;
    animation: sparkle 2s ease-in-out infinite;
  }
  .sparkle-btn .sp-main { position: relative; width: 1.15rem; height: 1.15rem; transform: translateY(-1px); flex: none; }
  .sparkle-btn .sp-a { bottom: 0.6rem; left: 0.85rem; width: 0.5rem; height: 0.5rem; rotate: 12deg;  animation-delay: 1s; }
  .sparkle-btn .sp-b { top: 0.6rem;    left: 1.25rem; width: 0.3rem; height: 0.3rem; rotate: -12deg; animation-delay: 1.5s; animation-duration: 2.5s; }
  .sparkle-btn .sp-c { top: 0.75rem;   left: 0.7rem;  width: 0.4rem; height: 0.4rem; animation-delay: 0.5s; animation-duration: 2.5s; }
  @keyframes sparkle {
    0%, 100% { opacity: 0.75; transform: scale(0.9); }
    50%      { opacity: 1;    transform: scale(1); }
  }
  .sparkle-btn .sp-main { animation-name: sparkle-main; }
  @keyframes sparkle-main {
    0%, 100% { opacity: 0.75; transform: translateY(-1px) scale(0.9); }
    50%      { opacity: 1;    transform: translateY(-1px) scale(1); }
  }
  .sparkle-canvas {
    position: absolute; inset: -1rem; z-index: 0; width: calc(100% + 2rem); height: calc(100% + 2rem);
    pointer-events: none; opacity: 0; transition: opacity 0.35s ease;
  }
  .sparkle-btn:hover .sparkle-canvas, .sparkle-btn:focus-visible .sparkle-canvas { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .sparkle-btn, .sparkle-btn .sp { transition: none; animation: none; }
    .sparkle-canvas { display: none; }
  }

  /* Confetti fires when the guide is claimed. It lives on <body>, not in the
     form — the submit handler replaces the form's innerHTML with the thank-you
     message, which would take any canvas inside it down mid-burst.
     Top of the fixed-layer ladder: header 60 / to-top 65 / book bar 70 /
     progress 90 / lightbox 100 / guide popup 110 / confetti 120 — the burst
     must outrank the popup, because subscribing *inside* the popup fires it. */
  .confetti-canvas {
    position: fixed; inset: 0; z-index: 120;
    width: 100%; height: 100%; pointer-events: none;
  }

  /* ============================================================ LEGAL PROSE
     The privacy page: one readable column of plain paragraphs. */
  .legal { max-width: 68ch; margin: 0 auto; padding: 0 1.5rem clamp(3rem, 6vw, 5rem); }
  .legal h2 { font-size: 1.22rem; margin: 2.2rem 0 0.55rem; }
  .legal p, .legal li { color: var(--ink-2); font-size: 0.95rem; line-height: 1.7; }
  .legal p { margin: 0 0 0.4rem; }
  .legal ul { margin: 0.3rem 0 0.6rem; padding-left: 1.15rem; display: grid; gap: 0.5rem; }
  .legal b { color: var(--ink); }
  .legal a { color: var(--clay-deep); }

  /* ============================================================ TO TOP */
  .to-top {
    position: fixed; right: 1.1rem; bottom: 1.2rem; z-index: 65;
    width: 2.9rem; height: 2.9rem; border-radius: 999px; border: none; cursor: pointer;
    background: var(--ink); color: var(--paper); display: grid; place-items: center;
    box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
    transform: translateY(12px) scale(0.9); transition: all 0.4s var(--ease);
  }
  .to-top.on { opacity: 1; pointer-events: auto; transform: none; }
  .to-top:hover { background: var(--clay-deep); }
  @media (max-width: 860px) { .to-top { bottom: 5.4rem; } }

  /* ============================================================ FOOTER */
  footer { background: var(--tide); color: color-mix(in srgb, var(--on-tide) 72%, transparent); font-size: 0.88rem; }
  .foot { max-width: var(--maxw); margin: 0 auto; padding: clamp(3rem, 6vw, 4rem) 1.5rem 2.5rem; display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 2.5rem; }
  .foot h3 { color: var(--on-tide); font-size: 1.2rem; margin-bottom: 0.7rem; }
  .foot a { color: color-mix(in srgb, var(--on-tide) 72%, transparent); text-decoration: none; transition: color 0.2s ease; }
  .foot a:hover { color: var(--clay-deep); text-decoration: underline; }
  .foot ul { list-style: none; margin: 0; padding: 0; }
  .foot li { margin-bottom: 0.45rem; }
  .foot .label { color: color-mix(in srgb, var(--on-tide) 42%, transparent); }
  .social { list-style: none; margin: 0; padding: 0; }
  .social li { margin-bottom: 0.6rem; }
  .social a { display: flex; align-items: center; gap: 0.65rem; font-size: 0.82rem; }
  .social a:hover { text-decoration: none; color: var(--net, var(--clay-deep)); }
  /* ---------------------------------------------------------------
     shiny-button (FancyButton) ported to CSS. Each network sets --net
     and the variant maths follow the original: border at 20% rest /
     50% hover, a tinted gradient wash on hover, a coloured drop
     shadow, scale(1.1) rotate(2deg) in and scale(0.95) rotate(0) on
     press, plus the sweep that travels -100% -> 100% over 700ms.
     The tint only appears on hover, so at rest the footer stays calm.
     --------------------------------------------------------------- */
  .social a[data-net="instagram"] { --net: #C13584; }
  .social a[data-net="facebook"]  { --net: #1877F2; }
  .social a[data-net="tiktok"]    { --net: #3C3C3C; }
  .social .ico {
    flex: none; width: 2.35rem; height: 2.35rem; display: grid; place-items: center;
    position: relative; overflow: hidden; border-radius: 50%;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    background: linear-gradient(to top right,
      color-mix(in srgb, var(--card) 60%, transparent),
      color-mix(in srgb, var(--paper-2) 40%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--net, var(--ink)) 20%, transparent),
                0 2px 6px -2px color-mix(in srgb, var(--ink) 12%, transparent);
    color: var(--ink-2);
    transition: background 0.3s ease-out, box-shadow 0.3s ease-out,
                color 0.3s ease-out, transform 0.3s ease-out;
  }
  .social .ico::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent,
      color-mix(in srgb, var(--net, var(--ink)) 22%, transparent), transparent);
    transform: translateX(-100%);
    transition: transform 0.7s ease-out;
  }
  .social a:hover .ico::before, .social a:focus-visible .ico::before { transform: translateX(100%); }
  .social a:hover .ico, .social a:focus-visible .ico {
    transform: scale(1.1) rotate(2deg);
    color: var(--net, var(--clay-deep));
    background: linear-gradient(to top right,
      color-mix(in srgb, var(--net, var(--ink)) 12%, transparent),
      color-mix(in srgb, var(--paper-2) 40%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--net, var(--ink)) 50%, transparent),
                0 14px 30px -10px color-mix(in srgb, var(--net, var(--ink)) 32%, transparent);
  }
  .social a:active .ico { transform: scale(0.95) rotate(0deg); }
  .social .ico svg { width: 1rem; height: 1rem; fill: currentColor; display: block; position: relative; z-index: 1; }
  /* Icon-only: the anchor's aria-label already carries the accessible name,
     so the visible handle text (which shows the Facebook page's legacy
     "fazdecontafotografiausa" handle, inconsistent with the site's branding)
     is hidden rather than displayed per-network. */
  .social .hd { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .social .ico, .social .ico::before { transition: none; }
    .social a:hover .ico, .social a:focus-visible .ico { transform: none; }
  }
  .demo-note { border-top: 1px solid color-mix(in srgb, var(--on-tide) 14%, transparent); }
  .demo-note p { max-width: var(--maxw); margin: 0 auto; padding: 1.2rem 1.5rem; font-size: 0.74rem; color: color-mix(in srgb, var(--on-tide) 42%, transparent); }
  @media (max-width: 1020px) { .foot { grid-template-columns: 1fr 1fr; gap: 2rem; } }
  @media (max-width: 780px) { .foot { grid-template-columns: 1fr; gap: 1.8rem; } }

  /* ============================================================
     POST-SPLIT ADDITIONS — the language toggle is now a pair of
     links, and EN pages can offer their PT twin in a small banner.
     ============================================================ */
  a.lang-btn { text-decoration: none; display: inline-flex; align-items: center; }

  .lang-suggest {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 95;
    display: flex; align-items: center; gap: 0.9rem;
    background: var(--card); color: var(--ink);
    border: 1px solid var(--rule); border-radius: 999px;
    padding: 0.55rem 0.7rem 0.55rem 1.2rem;
    box-shadow: 0 12px 34px rgba(60, 60, 60, 0.18);
    font-size: 0.95rem; max-width: min(94vw, 30rem);
  }
  .lang-suggest .btn { padding: 0.45rem 1rem; font-size: 0.88rem; }
  .lang-suggest button {
    border: 0; background: none; color: var(--ink-2); font-size: 1rem;
    cursor: pointer; padding: 0.3rem 0.45rem; line-height: 1;
  }
  .lang-suggest button:hover { color: var(--ink); }
  @media (max-width: 860px) {
    /* sit above the mobile book-bar */
    .lang-suggest { bottom: calc(5rem + env(safe-area-inset-bottom)); }
  }