/* ════════════════════════════════════════════════════════════════════
     HEEBO, SELF-HOSTED
     Served from /assets/fonts/ rather than Google Fonts, for two reasons.
     Privacy: every page view used to hand the visitor's IP address to
     Google, which the privacy policy would otherwise have to disclose.
     Security: with no third-party stylesheet, the Content-Security-Policy
     can say `style-src 'self'; font-src 'self'` and mean it.
     One variable font per script (weights 100–900 in a single file), with
     Google's own unicode-range split, so a Hebrew page downloads only the
     Hebrew and basic-Latin files. Licence: assets/fonts/OFL.txt.
     ════════════════════════════════════════════════════════════════════ */
  @font-face {
    font-family: 'Heebo'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/assets/fonts/heebo-hebrew.woff2') format('woff2');
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
  }
  @font-face {
    font-family: 'Heebo'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/assets/fonts/heebo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Heebo'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/assets/fonts/heebo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* ════════════════════════════════════════════════════════════════════
     RESET
     The site previously loaded the Tailwind CDN purely for ~10 cosmetic
     utility classes, but was silently depending on Tailwind's Preflight for
     its reset - box-sizing alone applied to 116 elements. Dropping the CDN
     without this would reflow the entire page. This is the subset of
     Tailwind v3 Preflight the markup actually relies on.
     ════════════════════════════════════════════════════════════════════ */
  *, ::before, ::after {
    box-sizing: border-box;
    border-width: 0; border-style: solid; border-color: #e5e7eb;
  }

  html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    tab-size: 4;
    font-family: 'Heebo', system-ui, sans-serif;
  }
  body { margin: 0; line-height: inherit; }

  hr { height: 0; color: inherit; border-top-width: 1px; }

  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
  p, figure, blockquote, dl, dd, pre { margin: 0; }
  ol, ul, menu { list-style: none; margin: 0; padding: 0; }

  a { color: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
  sup { top: -0.5em; }
  sub { bottom: -0.25em; }

  table { text-indent: 0; border-color: inherit; border-collapse: collapse; }

  button, input, optgroup, select, textarea {
    font-family: inherit; font-size: 100%; font-weight: inherit;
    line-height: inherit; color: inherit; margin: 0; padding: 0;
  }
  button, select { text-transform: none; }
  button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button; background-color: transparent; background-image: none;
  }
  :-moz-focusring { outline: auto; }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; }
  [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; }
  ::-webkit-search-decoration { -webkit-appearance: none; }
  ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
  input::placeholder, textarea::placeholder { opacity: 1; color: #9ca3af; }
  button, [role="button"] { cursor: pointer; }
  :disabled { cursor: default; }

  img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }

  summary { display: list-item; }
  fieldset { margin: 0; padding: 0; }
  legend { padding: 0; }

  :root {
    --mocha:    #8C5A36;
    --mocha-deep:#6E4528;
    /* The palette pink, not a new one: #E8B4B8 is the blush this stylesheet
       already draws the home page blossoms and the booking glow with, and
       the pink chip on the brand board (#D1B0AB) is the same colour
       printed. An earlier pass invented a deeper brick rose so that pink
       could also be TEXT; that was the wrong fix. Blush is a light colour —
       1.9:1 on ivory — so here it is a FILL and dark text sits on it:
       --ink on --rose measures 7.8:1.

       Brown was carrying every accent on the site. It is now split. Fills,
       badges and selected states — primary buttons, the chosen date and
       slot, the current step, active chips — are blush with an ink label.
       The accents that used to be brown TEXT — prices, headline accents,
       list markers — are the sage family, which is readable on every
       ground here. Brown keeps the nav, borders and shadows.

       --rose-deep is the same blush darkened for hover, nothing else. */
    --rose:      #E8B4B8;
    --rose-deep: #D99CA1;
    --blush:     #E8B4B8;
    --sage:     #98A07A;
    --sage-deep:#788065;
    /* Deepened sage — same 73deg hue, dropped to 30% lightness so ivory text
       clears AA on it. The booking section's ground; --sage-deep is far too
       light to carry ivory (3.46:1). */
    --olive:    #505738;
    --ivory:    #F1EADF;
    --ink:      #2B2B2B;
    --neutral:  #E7DED2;
    --cream:    #FBF7F1;
  }

  /* ════════════════════════════════════════════════════════════════════
     TOKEN LAYER — additive.
     The ~900 rules below predate this block and still use literal values;
     they are deliberately left alone. Only code written from here on
     consumes these tokens, so new components match the existing design by
     construction instead of by copy-paste.
     Shadow values are lifted verbatim from .exp-card and .booking-widget.
     ════════════════════════════════════════════════════════════════════ */
  :root {
    /* --sage #98A07A fails WCAG AA as text on every light surface here:
       2.30:1 on --ivory, 2.06:1 on --neutral, 2.11:1 on --mocha. One
       replacement can't serve all of them, because on the dark --olive
       panel the text has to get LIGHTER, not darker. Both keep sage's
       exact hue (73deg) and saturation.
         --sage-text     light surfaces  4.79:1 on --neutral, 5.34:1 on --ivory
         --sage-on-olive the booking panel 5.18:1 on --olive
       On the dark footer --sage already measures 5.15:1 and is left alone.
       --sage itself remains the fill/decoration colour everywhere. */
    --sage-text:     #5C6246;
    --sage-on-olive: #D3D7C6;

    --radius-card:  24px;
    --radius-pill:  999px;
    --radius-field: 12px;

    --shadow-card:  0 24px 50px -32px rgba(140,90,54,0.30), 0 4px 12px -6px rgba(140,90,54,0.12);
    --shadow-card-hi: 0 36px 64px -32px rgba(140,90,54,0.40), 0 8px 18px -8px rgba(140,90,54,0.18);
    --shadow-float: 0 50px 100px -50px rgba(0,0,0,0.65), 0 20px 40px -20px rgba(0,0,0,0.28);

    --header-h:     104px;
    --header-h-sm:  76px;
    --space-section: 110px;

    /* WCAG 2.1 SC 1.4.11 wants 3:1 for a focus indicator. Translucent sage
       measured 2.06-2.77:1 on every light surface here and failed. --ink
       measures 10.64:1 on --neutral and 13.27:1 on --cream. Dark surfaces
       flip the ring to --ivory, below. */
    --focus-ring:   0 0 0 3px var(--ink);
    --error:        #A8452F;
    --error-soft:   rgba(168,69,47,0.08);
    --ok:           #5C7A4A;
  }

  /* Screen-reader-only. Genuinely missing from the original stylesheet. */
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  /* Skip to content — WCAG 2.4.1. Off-screen rather than display:none, so it
     stays in the tab order and is the first stop on every page; it drops into
     view the moment it takes focus.

     Logical properties, not left/right: the site is RTL and inset-inline-start
     puts it under the start of the nav in both directions. It rides above the
     fixed header, which is why the z-index is stated rather than inherited. */
  .skip-link {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 200;
    transform: translateY(-120%);
    padding: 12px 22px;
    background: var(--ink);
    color: var(--ivory);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-end-end-radius: 12px;
    box-shadow: var(--shadow-float);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .skip-link:focus-visible {
    transform: translateY(0);
    /* The ring is --ink everywhere else; on an --ink ground it has to flip. */
    outline: 2px solid var(--ivory);
    outline-offset: -6px;
  }
  @media (prefers-reduced-motion: reduce) {
    .skip-link { transition: none; }
  }

  /* Anchor targets must clear the fixed header. */
  html { scroll-padding-top: calc(var(--header-h) + 16px); }
  @media (max-width: 860px) {
    html { scroll-padding-top: calc(var(--header-h-sm) + 16px); }
  }

  /* Global focus ring. :where() keeps specificity at 0, so the two existing
     per-component rules (.btn-primary, .btn-mocha) still win.

     --sage was the original ring colour and fails SC 1.4.11 everywhere it is
     actually used: 2.30:1 on --ivory, 2.06:1 on --neutral, 2.57:1 on --cream.
     It only ever passed on the dark footer. --ink clears 10:1 on all three
     light grounds; the two dark surfaces flip it to --ivory below. Outline
     rather than box-shadow, because an outline is not clipped by an
     overflow:hidden ancestor and a shadow is. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* Dark grounds: --ink would vanish. --ivory measures 11.85:1 on the
     footer. The booking section used to be here too, on olive; it is
     white now and takes the default ink ring like every other light
     surface. */
  :where(footer) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-color: var(--ivory);
  }

  /* Replaces the handful of Tailwind utilities the hero social strip used,
     so the CDN script can be dropped. */
  .hs-item { display: inline-flex; align-items: center; gap: 8px; }
  .hs-star { width: 14px; height: 14px; }
  .hs-live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--ivory);
    box-shadow: 0 0 0 4px rgba(241,234,223,0.18);
  }

  html, body { background: var(--ivory); color: var(--ink); }
  body {
    font-family: 'Heebo', system-ui, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .display-he   { font-family: 'Heebo', sans-serif; font-weight: 700; letter-spacing: -0.015em; }
  .display-en   { font-family: 'Heebo', sans-serif; font-weight: 500; letter-spacing: -0.02em; }
  .body-he      { font-family: 'Heebo', sans-serif; }
  .eyebrow      {
    font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 12px;
    letter-spacing: 0.22em; text-transform: uppercase;
  }
  /* Colour variants that used to be inline style="" attributes. The strict
     Content-Security-Policy (style-src 'self') ignores inline styles, so
     every one of them had to become a class to keep rendering. */
  .eyebrow--sage  { color: var(--sage-text); }
  /* mocha on the neutral ground measures 4.35:1 — under the 4.5:1 floor, and
     an eyebrow is 12px, so it gets no large-text exemption. mocha-deep reads
     6.20:1 against the same ground. Same swap as the header links. */
  .eyebrow--mocha { color: var(--mocha-deep); }

  .container-narrow { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
  @media (min-width: 768px) { .container-narrow { padding-inline: 48px; } }

  body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0.04; mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  body > * { position: relative; z-index: 1; }

  /* HEADER — full-width, thick, centered logo, 2 nav items each side */
  .bloom-header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    height: 104px;
    background: rgba(241,234,223,0.92);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    border-bottom: 1px solid rgba(140,90,54,0.10);
    box-shadow: 0 10px 30px -22px rgba(110,72,40,0.22);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 56px;
    gap: 30px;
    transition: background-color .35s, box-shadow .35s;
  }
  .bloom-header.scrolled {
    background: rgba(241,234,223,0.96);
    box-shadow: 0 14px 40px -22px rgba(110,72,40,0.30);
  }

  .nav-side { list-style: none; display: flex; align-items: center; gap: 44px; margin: 0; padding: 0; }
  .nav-side-right { justify-content: flex-end; }   /* in RTL: pushes items toward center (left side of right cell) */
  .nav-side-left  { justify-content: flex-start; } /* in RTL: pushes items toward center (right side of left cell) */

  .nav-side a {
    position: relative; display: inline-block; padding: 8px 2px;
    font-family: 'Heebo', sans-serif;
    font-size: 15px; font-weight: 700;
    /* mocha measured 4.31:1 on the scrolled header — under 4.5:1. mocha-deep
       takes it to 6.15:1. Hover moves to olive rather than staying mocha-deep,
       so the hover state is still a colour change and not the underline alone. */
    color: var(--mocha-deep);
    letter-spacing: 0.04em;
    transition: color .25s;
  }
  .nav-side a::after {
    content: ''; position: absolute; bottom: 2px; right: 0; left: 0;
    height: 1.5px; background: var(--mocha-deep);
    transform: scaleX(0); transform-origin: center;
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
  }
  .nav-side a:hover { color: var(--olive); }
  .nav-side a:hover::after { transform: scaleX(1); }

  .header-logo { display: block; line-height: 0; }
  .header-logo img {
    height: 70px; width: auto; display: block;
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .header-logo:hover img { transform: scale(1.03); }

  /* Mobile: hide side nav, show hamburger; logo stays centered */
  .header-mobile-toggle { display: none; background: none; border: 0; padding: 8px; color: var(--ink); cursor: pointer; }
  @media (max-width: 860px) {
    .bloom-header {
      height: 76px;
      grid-template-columns: auto 1fr auto;
      padding: 0 20px;
      gap: 12px;
    }
    .nav-side { display: none; }
    .header-mobile-toggle { display: inline-flex; }
    .header-logo img { height: 44px; }
    .header-logo { justify-self: center; }
  }

  /* BUTTONS */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 32px;
    border-radius: 999px;
    font-family: 'Heebo', sans-serif;
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.04em;
    transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, background-color .25s, color .25s, border-color .25s;
    will-change: transform;
  }
  .btn-primary {
    background: var(--ivory); color: var(--ink);
    border: 1px solid rgba(43,43,43,0.08);
    box-shadow: 0 16px 36px -18px rgba(0,0,0,0.5), 0 2px 6px -2px rgba(0,0,0,0.25);
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -20px rgba(0,0,0,0.55), 0 4px 10px -3px rgba(0,0,0,0.3); }
  .btn-primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  /* Still .btn-mocha in 22 pages of markup; the fill is --rose now (see the
     token note above — the palette blush, with an ink label). Renaming
     day — the name is the only thing here that is still brown. */
  .btn-mocha {
    background: var(--rose); color: var(--ink);
    border: 1px solid var(--rose);
    box-shadow: 0 14px 30px -16px rgba(110,72,40,0.55), 0 2px 6px -3px rgba(110,72,40,0.25);
  }
  .btn-mocha:hover { transform: translateY(-2px); background: var(--rose-deep); border-color: var(--rose-deep); }
  .btn-mocha:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

  .btn-ghost {
    background: transparent; color: var(--ink);
    border: 1px solid rgba(43,43,43,0.18);
  }
  .btn-ghost:hover { background: var(--neutral); border-color: rgba(140,90,54,0.30); color: var(--mocha); }

  /* REVEAL */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
  .reveal.in { opacity: 1; transform: translateY(0); }
  .reveal-d1 { transition-delay: .08s; }
  .reveal-d2 { transition-delay: .18s; }
  .reveal-d3 { transition-delay: .28s; }
  .reveal-d4 { transition-delay: .38s; }
  @media (prefers-reduced-motion: reduce) {
    .reveal { transition: none; opacity: 1; transform: none; }
  }

  /* HERO */
  .hero {
    position: relative; isolation: isolate;
    min-height: 92vh;
    overflow: hidden;
    color: var(--ivory);
  }
  .hero-bg { position: absolute; inset: 0; z-index: 0; }
  .hero-slide {
    position: absolute; inset: 0; margin: 0;
    opacity: 0;
    animation: heroFade 18s infinite cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
  }
  .hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.88) contrast(0.96) brightness(0.92); }
  .hero-slide-1 { animation-delay: 0s; }
  .hero-slide-2 { animation-delay: 6s; }
  .hero-slide-3 { animation-delay: 12s; }
  @keyframes heroFade {
    0%   { opacity: 0; transform: scale(1.06); }
    3%   { opacity: 1; transform: scale(1.03); }
    33%  { opacity: 1; transform: scale(1.00); }
    37%  { opacity: 0; transform: scale(1.00); }
    100% { opacity: 0; transform: scale(1.00); }
  }
  .hero-overlay {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(43,32,22,0.55) 0%, rgba(43,32,22,0.30) 40%, rgba(43,32,22,0.65) 100%),
      radial-gradient(65% 55% at 50% 50%, rgba(43,32,22,0) 0%, rgba(43,32,22,0.42) 100%);
  }
  .hero-grain {
    position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.16; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  .hero-content {
    position: relative; z-index: 3;
    min-height: 92vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 180px 24px 150px;
  }
  .hero-brandmark {
    display: inline-flex; flex-direction: column; align-items: center; gap: 18px;
    margin-bottom: 32px;
    position: relative;
    isolation: isolate;
  }
  /* Soft dark scrim under the logo — the wordmark is ivory line art, so it needs
     the photo pushed back rather than a light panel behind it */
  .hero-brandmark::before {
    content: ''; position: absolute; z-index: -2;
    inset: -34% -14%;
    background: radial-gradient(ellipse 58% 58% at center, rgba(29,22,16,0.52) 0%, rgba(29,22,16,0.28) 55%, transparent 78%);
    filter: blur(22px);
    pointer-events: none;
  }
  .hero-brandmark .spot-glow {
    position: absolute; z-index: -3;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 160%; height: 190%;
    background: radial-gradient(ellipse 60% 60% at center, rgba(29,22,16,0.34) 0%, rgba(29,22,16,0.14) 52%, transparent 76%);
    filter: blur(38px);
    pointer-events: none;
  }
  .hero-brandmark img {
    height: 200px; width: auto;
    filter: drop-shadow(0 10px 26px rgba(0,0,0,0.45));
  }
  @media (max-width: 1100px) { .hero-brandmark img { height: 172px; } }
  @media (max-width: 900px)  { .hero-brandmark img { height: 146px; } }
  @media (max-width: 640px)  { .hero-brandmark img { height: 106px; } }
  .hero-brandmark::after {
    content: ''; display: block; width: 110px; height: 1px;
    background: rgba(241,234,223,0.55);
  }
  .hero-eyebrow {
    color: var(--ivory);
    margin-bottom: 22px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  }
  .hero-title {
    font-family: 'Heebo', sans-serif;
    font-weight: 800; color: var(--ivory);
    font-size: clamp(56px, 9vw, 132px);
    line-height: 0.92; letter-spacing: -0.025em;
    margin: 0 auto; max-width: 14ch;
    text-shadow: 0 4px 32px rgba(0,0,0,0.28);
  }
  .hero-title .accent {
    display: block;
    font-family: 'Heebo', sans-serif; font-weight: 500;
    color: var(--ivory);
    font-size: 0.72em; letter-spacing: -0.045em;
    margin-top: -0.05em; opacity: 0.96;
  }
  .hero-quote {
    font-family: 'Heebo', sans-serif; font-weight: 500;
    color: rgba(241,234,223,0.92);
    font-size: clamp(15px, 1.2vw, 18px);
    margin: 34px auto 0; max-width: 42ch; line-height: 1.55;
  }
  .hero-cta-row {
    display: inline-flex; flex-direction: column; align-items: center; gap: 14px;
    margin-top: 38px;
  }
  .hero-cta-secondary {
    color: rgba(241,234,223,0.78);
    font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 500;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(241,234,223,0.4);
    padding-bottom: 2px;
    transition: color .2s, border-color .2s;
  }
  .hero-cta-secondary:hover { color: var(--ivory); border-color: var(--ivory); }
  .hero-social {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 14px 28px; margin-top: 44px;
    color: rgba(241,234,223,0.88);
    font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 500;
  }
  .hero-social .hs-divider { width: 1px; height: 22px; background: rgba(241,234,223,0.3); }
  .hero-social .hs-stars { display: inline-flex; gap: 2px; color: #E8C76A; }
  .hero-ph {
    position: absolute; z-index: 4; top: 110px; left: 28px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border-radius: 999px;
    background: rgba(43,32,22,0.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(241,234,223,0.18);
    color: rgba(241,234,223,0.78);
    font-family: 'Heebo', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em;
  }
  .hero-dots {
    position: absolute; z-index: 4;
    bottom: 110px; right: 28px;
    display: flex; gap: 7px;
  }
  .hero-dot {
    width: 28px; height: 3px; border-radius: 3px;
    background: rgba(241,234,223,0.30); position: relative; overflow: hidden;
  }
  .hero-dot::after {
    content: ''; position: absolute; inset: 0;
    background: var(--ivory);
    transform: scaleX(0); transform-origin: left;
    animation: dotFill 18s infinite linear;
  }
  .hero-dot-1::after { animation-delay: 0s; }
  .hero-dot-2::after { animation-delay: 6s; }
  .hero-dot-3::after { animation-delay: 12s; }
  @keyframes dotFill {
    0%   { transform: scaleX(0); }
    33%  { transform: scaleX(1); }
    34%  { transform: scaleX(1); opacity: 0.55; }
    100% { transform: scaleX(1); opacity: 0.55; }
  }

  /* Sage band, ink figures (owner, 6.10.2026: "lighter"). Olive with ivory
     read as heavy; sage with ivory measured 2.29:1, so the figures turn to
     ink instead — 5.2:1 on sage, clear of the 4.5:1 IS 5568 asks for. */
  .hero-band {
    position: relative; z-index: 3;
    background: var(--sage); color: var(--ink);
    padding: 26px 24px;
    border-top: 1px solid rgba(43,43,43,0.08);
  }
  .hero-band-inner {
    max-width: 1200px; margin-inline: auto;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 14px 44px;
    font-family: 'Heebo', sans-serif; font-weight: 500; font-size: 14px;
  }
  .hero-band-stat strong {
    font-family: 'Heebo', sans-serif; font-weight: 600;
    font-size: 24px; letter-spacing: -0.02em; margin-left: 8px; color: var(--ink);
  }
  .hero-band-stat sup { font-size: 11px; vertical-align: super; margin-right: 2px; opacity: 0.85; }
  .hero-band .hb-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(43,43,43,0.4); }

  /* WELCOME */
  .welcome { padding: 120px 0 110px; background: var(--ivory); position: relative; overflow: hidden; }
  .welcome-grid { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center; }
  @media (min-width: 900px) { .welcome-grid { grid-template-columns: 5fr 6fr; gap: 100px; } }
  .welcome-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
  .welcome-illus {
    position: relative; aspect-ratio: 4/5;
    background: var(--cream);
    border-radius: 24px; overflow: hidden;
    border: 1px solid var(--neutral);
    box-shadow: 0 30px 60px -36px rgba(140,90,54,0.35), 0 8px 18px -10px rgba(140,90,54,0.15);
  }
  .welcome-illus svg { width: 100%; height: 100%; display: block; }
  .welcome-illus .ph-tag {
    position: absolute; top: 16px; right: 16px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(6px);
    padding: 6px 11px; border-radius: 999px;
    font-family: 'Heebo', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
    color: var(--sage-text);
  }
  .welcome h2 {
    font-family: 'Heebo', sans-serif; font-weight: 800;
    color: var(--ink);
    font-size: clamp(40px, 5.5vw, 78px);
    line-height: 0.98; letter-spacing: -0.025em;
    margin-top: 16px;
  }
  .welcome h2 .accent {
    display: inline-block; font-family: 'Heebo', sans-serif; font-weight: 500;
    color: var(--sage-text);
    font-size: 0.78em; letter-spacing: -0.04em;
    margin-right: 10px;
  }
  .welcome p {
    font-family: 'Heebo', sans-serif; color: var(--ink);
    font-size: 17px; line-height: 1.75;
    margin-top: 24px; max-width: 50ch;
  }
  .welcome .signoff {
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: 28px;
    font-family: 'Heebo', sans-serif; font-weight: 500;
    color: var(--sage-text); font-size: 17px;
  }
  .welcome .signoff::before {
    content: ''; width: 32px; height: 1px; background: var(--rose); display: inline-block;
  }

  /* EXPERIENCE */
  .exp { padding: 120px 0 110px; background: var(--neutral); position: relative; }
  .exp-head { text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: 70px; }
  .exp-head .eyebrow { color: var(--sage-text); }
  .exp-head h2 {
    font-family: 'Heebo', sans-serif; font-weight: 800;
    color: var(--ink);
    font-size: clamp(36px, 4.8vw, 64px);
    line-height: 1.0; letter-spacing: -0.025em;
    margin-top: 18px;
  }
  .exp-head h2 .accent {
    font-family: 'Heebo', sans-serif; font-weight: 500;
    color: var(--sage-text);
    font-size: 0.75em;
    margin-right: 8px;
  }
  .exp-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .exp-grid { grid-template-columns: repeat(3, 1fr); } }

  .exp-card {
    background: var(--ivory);
    border-radius: 24px; overflow: hidden;
    border: 1px solid rgba(140,90,54,0.10);
    box-shadow: 0 24px 50px -32px rgba(140,90,54,0.30), 0 4px 12px -6px rgba(140,90,54,0.12);
    display: flex; flex-direction: column;
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
  }
  .exp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 36px 64px -32px rgba(140,90,54,0.40), 0 8px 18px -8px rgba(140,90,54,0.18);
  }
  .exp-card-img { aspect-ratio: 4/3; position: relative; background: var(--neutral); }
  .exp-card-img img,
  .exp-card-img video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .exp-card-img .ph {
    position: absolute; bottom: 14px; right: 14px;
    background: rgba(241,234,223,0.92);
    padding: 6px 11px; border-radius: 999px;
    font-family: 'Heebo', sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--sage-text);
  }
  .exp-card-body { padding: 30px 28px 32px; }
  .exp-card-num {
    font-family: 'Heebo', sans-serif; font-weight: 500;
    color: var(--sage-text); font-size: 14px; letter-spacing: 0.08em;
  }
  .exp-card h3,
  .exp-card h2 {
    font-family: 'Heebo', sans-serif; font-weight: 700;
    color: var(--ink); font-size: 28px; line-height: 1.15;
    letter-spacing: -0.015em;
    margin-top: 10px;
  }
  .exp-card p {
    font-family: 'Heebo', sans-serif; color: var(--ink);
    font-size: 15px; line-height: 1.7; margin-top: 14px; opacity: 0.82;
  }
  .exp-card .more {
    margin-top: 22px;
    font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600;
    color: var(--mocha); letter-spacing: 0.04em;
    display: inline-flex; align-items: center; gap: 6px;
    border-bottom: 1px solid rgba(140,90,54,0.25);
    padding-bottom: 2px; transition: border-color .2s;
  }
  .exp-card .more:hover { border-color: var(--mocha); }

  /* BOOKING — Calendly-style event booking widget */
  /* Plain white — the one flat white band on a page of ivory and cream, so
     the single thing this section asks for stands away from everything
     around it. The two radial glows that used to sit here were pale washes
     tuned to be visible against olive; on white they are invisible at best
     and grubby at worst, so they are gone rather than re-tuned. */
  .booking {
    background: #FFFFFF;
    padding: 110px 0 110px;
    color: var(--ink);
    position: relative; overflow: hidden;
  }
  .booking-head {
    text-align: center; max-width: 720px; margin-inline: auto; margin-bottom: 56px;
    position: relative; z-index: 2;
  }
  .booking-head .eyebrow { color: var(--sage-text); }
  .booking-head h2 {
    font-family: 'Heebo', sans-serif; font-weight: 800;
    color: var(--ink);
    font-size: clamp(36px, 4.8vw, 64px);
    line-height: 1.0; letter-spacing: -0.025em;
    margin-top: 16px;
  }
  .booking-head h2 .accent {
    font-family: 'Heebo', sans-serif; font-weight: 500;
    color: var(--sage-text); font-size: 0.78em; margin-right: 8px;
  }
  .booking-head .subhead {
    font-family: 'Heebo', sans-serif;
    font-size: 16px; line-height: 1.7;
    color: rgba(43,43,43,0.78);
    margin-top: 18px;
  }

  .booking-widget {
    position: relative; z-index: 2;
    background: var(--ivory);
    border-radius: 24px; overflow: hidden;
    box-shadow:
      0 50px 100px -50px rgba(0,0,0,0.65),
      0 20px 40px -20px rgba(0,0,0,0.28),
      inset 0 0 0 1px rgba(80,87,56,0.10);
    display: grid; grid-template-columns: 1fr;
    color: var(--ink);
  }
  @media (min-width: 980px) {
    .booking-widget { grid-template-columns: 360px 1fr; }
  }

  /* Left: event card */
  .booking-event {
    padding: 36px 32px 32px;
    background: var(--cream);
    border-bottom: 1px solid var(--neutral);
    display: flex; flex-direction: column;
  }
  @media (min-width: 980px) {
    .booking-event { border-bottom: 0; border-left: 1px solid var(--neutral); }
  }
  .event-host { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
  .avatars { display: flex; }
  .avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 15px;
    color: var(--ivory);
    border: 2px solid var(--cream);
    box-shadow: 0 2px 6px -2px rgba(0,0,0,0.18);
  }
  .avatar.a1 { background: var(--mocha); }
  .event-host-name {
    font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 14px;
    color: var(--ink);
  }
  .event-host-role {
    font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 10.5px;
    color: var(--sage-text); letter-spacing: 0.14em; text-transform: uppercase;
    margin-top: 3px;
  }
  .event-title {
    font-family: 'Heebo', sans-serif; font-weight: 800;
    color: var(--ink);
    font-size: 28px; line-height: 1.15; letter-spacing: -0.02em;
  }
  .event-meta { margin-top: 20px; display: flex; flex-direction: column; gap: 11px; }
  .meta-row {
    display: flex; align-items: center; gap: 11px;
    font-family: 'Heebo', sans-serif; font-size: 13.5px; font-weight: 500;
    color: var(--ink);
  }
  .meta-row svg { color: var(--sage-text); flex-shrink: 0; }
  .event-desc {
    margin-top: 20px;
    font-family: 'Heebo', sans-serif; font-size: 13.5px; line-height: 1.7;
    color: rgba(43,43,43,0.78);
  }
  .event-includes {
    margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px;
  }
  .pill-tag {
    background: var(--ivory);
    color: var(--sage-text);
    padding: 5px 12px; border-radius: 999px;
    font-family: 'Heebo', sans-serif; font-size: 11.5px; font-weight: 600;
    border: 1px solid rgba(140,90,54,0.20);
    letter-spacing: 0.04em;
  }

  /* Right: calendar + slots */
  .booking-cal { padding: 32px; display: flex; flex-direction: column; gap: 22px; }
  .cal-head {
    display: flex; align-items: center; justify-content: space-between;
  }
  .cal-nav {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--neutral); border: 0;
    color: var(--mocha);
    font-size: 18px; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s, transform .2s;
  }
  .cal-nav:hover { background: var(--rose); color: var(--ink); transform: scale(1.05); }
  .cal-month {
    font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 16px;
    color: var(--ink); letter-spacing: 0.02em;
  }

  .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .cal-day-name {
    font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 11px;
    color: var(--sage-text); letter-spacing: 0.1em; text-align: center;
    padding-bottom: 10px;
    text-transform: uppercase;
  }
  .cal-date {
    font-family: 'Heebo', sans-serif; font-weight: 500; font-size: 13.5px;
    color: var(--ink);
    text-align: center;
    padding: 10px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s, color .2s;
    user-select: none; position: relative;
  }
  .cal-date:not(.past):not(.full):not(.empty):not(.selected):hover {
    background: var(--neutral); color: var(--sage-text);
  }
  .cal-date.empty { cursor: default; pointer-events: none; }
  .cal-date.past { color: rgba(43,43,43,0.22); cursor: not-allowed; pointer-events: none; }
  .cal-date.full { color: rgba(43,43,43,0.32); cursor: not-allowed; pointer-events: none; }
  .cal-date.full::before {
    content: ''; position: absolute; top: 50%; left: 20%; right: 20%;
    border-top: 1px solid rgba(43,43,43,0.32);
    transform: rotate(-12deg);
  }
  .cal-date.today { font-weight: 700; }
  .cal-date.today::after {
    content: ''; position: absolute; bottom: 4px; left: 50%;
    transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: var(--sage);
  }
  .cal-date.selected {
    background: var(--rose); color: var(--ink); font-weight: 700;
    box-shadow: 0 4px 10px -3px rgba(140,90,54,0.45);
  }
  .cal-date.selected::after { background: var(--ivory); }

  /* Slots */
  .cal-slots {
    padding-top: 18px;
    border-top: 1px solid var(--neutral);
  }
  .slots-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 14px;
  }
  .slots-head strong {
    font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 15px;
    color: var(--ink);
  }
  .slots-head span {
    font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 10.5px;
    color: var(--sage-text); letter-spacing: 0.12em; text-transform: uppercase;
  }
  .slots-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
  }
  .slot {
    background: var(--ivory);
    border: 1px solid var(--neutral);
    border-radius: 10px;
    padding: 11px 8px;
    font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 14px;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s, transform .2s;
  }
  .slot:not(.selected):hover { border-color: var(--rose); color: var(--sage-text); transform: translateY(-1px); }
  .slot.selected {
    background: var(--rose); color: var(--ink); border-color: var(--rose);
    box-shadow: 0 6px 14px -6px rgba(140,90,54,0.5);
  }

  .confirm-btn {
    margin-top: 6px;
    background: var(--ink); color: var(--ivory);
    padding: 16px 24px; border-radius: 12px; border: 0;
    font-family: 'Heebo', sans-serif; font-weight: 700; font-size: 14.5px;
    letter-spacing: 0.04em; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    transition: background .2s, transform .25s, box-shadow .25s;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,0.5);
  }
  .confirm-btn:hover {
    background: var(--rose); color: var(--ink); transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(140,90,54,0.55);
  }

  /* .80, not .55: at 11.5px this is normal-size text and needs 4.5:1.
     .55 measured 3.15:1 on --olive (and 2.60:1 on the old brown). .80 = 4.76:1. */
  .booking-foot {
    margin-top: 28px;
    text-align: center;
    position: relative; z-index: 2;
    color: rgba(43,43,43,0.66);
    font-family: 'Heebo', sans-serif; font-size: 11.5px; letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .booking-foot .powered {
    display: inline-flex; align-items: center; gap: 8px;
  }
  .booking-foot .powered::before {
    content: ''; width: 26px; height: 1px; background: rgba(140,90,54,0.28);
  }
  .booking-foot .powered::after {
    content: ''; width: 26px; height: 1px; background: rgba(140,90,54,0.28);
  }

  /* SUBSCRIBE + FOLLOW */
  .sub { padding: 110px 0 110px; background: var(--ivory); position: relative; }
  .sub-grid { display: grid; gap: 60px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 900px) { .sub-grid { grid-template-columns: 1.1fr 1fr; gap: 90px; } }
  /* Just the Instagram card since the newsletter form was removed: one
     centred column instead of a two-column grid with an empty half. */
  .sub-grid--single { justify-items: center; }
  @media (min-width: 900px) { .sub-grid--single { grid-template-columns: minmax(0, 560px); justify-content: center; } }
  .sub-grid--single .sub-side { width: 100%; }
  .sub p { font-family: 'Heebo', sans-serif; color: var(--ink); opacity: 0.82; font-size: 16px; line-height: 1.7; margin-top: 18px; max-width: 44ch; }
  .sub-side {
    background: var(--cream);
    border-radius: 28px; padding: 44px 38px;
    border: 1px solid var(--neutral);
    position: relative; overflow: hidden;
    box-shadow: 0 28px 56px -32px rgba(140,90,54,0.30);
  }
  /* Olive, not sage: ivory on sage is 2.29:1 — the same pair the hero band
     failed on, and the worst kind of failure because it is a BUTTON, where
     the label is the whole affordance. Ivory on olive reads 6.36:1. */
  .sub-side .follow-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--olive); color: var(--ivory);
    padding: 13px 26px; border-radius: 999px;
    font-family: 'Heebo', sans-serif; font-weight: 600; font-size: 14px;
    border: 1px solid var(--olive);
    transition: background .25s, transform .25s;
  }
  /* A darkened olive rather than sage-deep, which measured 3.46:1 against
     ivory and failed on its own — and against an olive rest state it would
     have made the button LIGHTER on hover, which reads as the control
     switching off. 8.07:1. No token for it: the palette has one olive. */
  .sub-side .follow-btn:hover { background: #42472E; border-color: #42472E; transform: translateY(-1px); }
  /* Formerly inline styles on the card's decoration, body, title and copy. */
  .sub-side-deco { position: absolute; top: -30px; left: -30px; width: 200px; opacity: 0.4; }
  .sub-side-body { position: relative; }
  .sub-side .sub-side-title { font-size: 32px; line-height: 1.05; margin-top: 12px; color: var(--ink); }
  .sub-side .sub-side-title .display-en { color: var(--sage-text); font-size: 0.85em; }
  /* (0-2-0), to beat `.sub p` (0-1-1) the way the inline style did. */
  .sub-side .sub-side-text {
    font-family: 'Heebo', sans-serif; color: var(--ink); opacity: 0.78;
    font-size: 14px; line-height: 1.6; margin-top: 14px; max-width: 32ch;
  }
  .sub-side .follow-btn { margin-top: 22px; }
  .sub-social { margin-top: 24px; display: flex; gap: 12px; }
  .sub-social a {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ivory); color: var(--mocha);
    border: 1px solid var(--neutral);
    transition: color .2s, border-color .2s, transform .25s;
  }
  .sub-social a:hover { color: var(--sage-deep); border-color: var(--sage); transform: translateY(-2px); }

  /* VISIT */
  .visit { padding: 120px 0 110px; background: var(--neutral); position: relative; color: var(--ink); }
  .visit-grid { display: grid; gap: 48px; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .visit-grid { grid-template-columns: 1fr 1.2fr; gap: 80px; } }
  .visit h2 {
    font-family: 'Heebo', sans-serif; font-weight: 800;
    color: var(--ink);
    font-size: clamp(40px, 5.5vw, 78px);
    line-height: 0.98; letter-spacing: -0.025em;
  }
  .visit h2 .accent {
    font-family: 'Heebo', sans-serif; font-weight: 500;
    color: var(--sage-text);
    font-size: 0.72em; display: block; margin-top: 2px;
  }
  .visit-info { margin-top: 32px; }
  .visit-row {
    display: flex; gap: 18px; padding: 18px 0;
    border-top: 1px solid rgba(140,90,54,0.16);
    align-items: flex-start;
  }
  .visit-row:last-child { border-bottom: 1px solid rgba(140,90,54,0.16); }
  .visit-row .vi-label {
    font-family: 'Heebo', sans-serif; font-weight: 600;
    color: var(--sage-text); font-size: 12px; min-width: 80px;
    letter-spacing: 0.18em; text-transform: uppercase;
  }
  .visit-row .vi-value {
    font-family: 'Heebo', sans-serif; color: var(--ink);
    font-size: 16px; line-height: 1.6; font-weight: 500;
    flex: 1;
  }
  .visit-row .vi-value small {
    display: block; opacity: 0.65; font-weight: 400; font-size: 13px; margin-top: 4px;
  }
  .visit-map {
    aspect-ratio: 4/3;
    border-radius: 28px;
    background: var(--cream);
    border: 1px solid rgba(140,90,54,0.18);
    box-shadow: 0 30px 60px -36px rgba(140,90,54,0.35);
    position: relative; overflow: hidden;
  }
  .visit-map .map-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(0deg, rgba(140,90,54,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(140,90,54,0.06) 1px, transparent 1px);
    background-size: 32px 32px; opacity: 0.7;
  }
  .visit-map .map-pin {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
  }
  .visit-map .map-pin-dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--rose);
    border: 4px solid var(--ivory);
    box-shadow: 0 0 0 4px rgba(140,90,54,0.18), 0 8px 16px -6px rgba(140,90,54,0.4);
    position: relative;
  }
  .visit-map .map-pin-dot::before {
    content: ''; position: absolute; inset: -10px; border-radius: 50%;
    border: 1px solid rgba(140,90,54,0.18);
    animation: pinPulse 2.5s infinite ease-out;
  }
  @keyframes pinPulse { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } }
  .visit-map .map-pin-label {
    background: var(--ivory); color: var(--ink);
    padding: 7px 14px; border-radius: 999px;
    font-family: 'Heebo', sans-serif; font-size: 12px; font-weight: 600;
    box-shadow: 0 6px 14px -8px rgba(140,90,54,0.4);
    border: 1px solid var(--neutral);
  }
  .visit-cta-row { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }

  /* FOOTER */
  footer { background: var(--ink); color: var(--ivory); padding: 60px 0 36px; }
  .foot-grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 800px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; } }
  .foot-brand { max-width: 320px; }
  .foot-brand img { height: 52px; width: auto; margin-bottom: 18px; }
  .foot-brand p { font-family: 'Heebo', sans-serif; color: rgba(241,234,223,0.6); font-size: 13px; line-height: 1.7; }
  .foot-col h2,
  .foot-col .foot-col-title {
    font-family: 'Heebo', sans-serif; font-weight: 700;
    color: var(--sage); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: 14px;
  }
  .foot-col ul { display: flex; flex-direction: column; gap: 9px; }
  .foot-col li a {
    font-family: 'Heebo', sans-serif; color: rgba(241,234,223,0.75);
    font-size: 14px; transition: color .2s;
  }
  .foot-col li a:hover { color: var(--ivory); }
  .foot-bottom {
    margin-top: 56px; padding-top: 24px;
    border-top: 1px solid rgba(241,234,223,0.10);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
    font-family: 'Heebo', sans-serif; font-size: 12px; color: rgba(241,234,223,0.6);
  }

  .branch-deco { position: absolute; pointer-events: none; opacity: 0.45; }
  .branch-deco--welcome { top: 40px; right: -30px; width: 280px; }

  @media (prefers-reduced-motion: reduce) {
    .hero-slide, .hero-dot::after, .map-pin-dot::before { animation: none; }
    .hero-slide-1 { opacity: 1; }
  }

  html { scroll-behavior: smooth; }

    /* WhatsApp — a floating button on every page (owner, 6.10.2026). Sage
     fill with an ink glyph, the pairing the hero band uses (5.2:1), so it
     reads as Bloom rather than as WhatsApp's own green. Bottom-left: in RTL
     that is the trailing corner, away from where the eye starts a line. */
  .wa-float {
    position: fixed; z-index: 60;
    inset-inline-end: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--sage); color: var(--ink);
    border: 1px solid rgba(43,43,43,0.08);
    box-shadow: 0 18px 34px -16px rgba(80,87,56,0.55), 0 4px 10px -4px rgba(80,87,56,0.30);
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
  }
  .wa-float:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -16px rgba(80,87,56,0.6), 0 6px 14px -4px rgba(80,87,56,0.32); }
  .wa-float:active { transform: translateY(0) scale(.95); }
  .wa-float:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  /* Clear the demo banner while it exists (pages.css reserves 44px / 72px). */
  body:has(.demo-banner) .wa-float { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  @media (max-width: 520px) {
    .wa-float { width: 50px; height: 50px; inset-inline-end: 16px; bottom: 16px; }
    body:has(.demo-banner) .wa-float { bottom: 88px; }
  }
  @media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }