/* ============================================================
   Yoga 18ème brand stylesheet
   Palette, type and components per the Master Brand Kit.
   Native document scroll, light-first, warm + earthy.
   ============================================================ */

/* Self-hosted. These were an @import from fonts.googleapis.com,
   which sent every visitor's IP to Google on first paint, before
   any consent. Served from this origin now: no third party, no
   transfer to disclose, and one less round trip. */
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-400-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-400-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-500-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-500-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-600-italic-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-600-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-500-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;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-600-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;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/jost-300-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/jost-300-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;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jost-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/jost-400-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;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jost-500-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/jost-500-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;
}
/* latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/jost-600-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/jost-600-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;
}

:root {
  /* Brand colours */
  --chai:      #F5EFE6;
  --sandstone: #E8DCC8;
  --clay:      #A85A3F;
  --clay-dark: #8f4731;
  --sage:      #5F6F5C;
  --forest:    #173A2B;
  --sage-dark: #4c5a49;
  --turmeric:  #D9A441;
  --indigo:    #2E3A56;
  --indigo-2:  #26304a;
  --ink:       #2B2622;
  --linen:     #FBF8F3;

  --ink-70: rgba(43, 38, 34, 0.70);
  --ink-55: rgba(43, 38, 34, 0.55);
  --line:   rgba(43, 38, 34, 0.14);

  /* Type */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 16px;
  --radius-sm: 12px;
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --shadow: 0 18px 50px -24px rgba(43, 38, 34, 0.35);
  --shadow-sm: 0 8px 24px -14px rgba(43, 38, 34, 0.4);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--chai);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--clay); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--clay-dark); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: 0.002em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.7rem); }
h2 em, h1 em, h3 em { font-style: italic; color: var(--clay); }

p { margin: 0 0 1.1em; max-width: 64ch; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 10vw, 128px); }
.section--tight { padding-block: clamp(48px, 7vw, 88px); }
.bg-chai { background: var(--chai); }
.bg-sand { background: var(--sandstone); }
.bg-linen { background: var(--linen); }
.center { text-align: center; }
.center p { margin-inline: auto; }

.kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--clay);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 1.1rem;
}
.kicker.on-dark { color: var(--turmeric); }

.lead { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.6; color: var(--ink-70); font-weight: 300; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sans); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px;
  padding: 15px 30px; border-radius: 100px; border: 1.5px solid transparent;
  cursor: pointer; transition: all .3s var(--ease); white-space: nowrap;
}
.btn--primary { background: var(--clay); color: var(--linen); }
.btn--primary:hover { background: var(--clay-dark); color: var(--linen); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--linen); }
.btn--ghost-light { background: transparent; color: var(--linen); border-color: rgba(251,248,243,.6); }
.btn--ghost-light:hover { background: var(--linen); color: var(--ink); }
.btn--sage { background: var(--sage); color: var(--linen); }
.btn--sage:hover { background: var(--sage-dark); color: var(--linen); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--block { width: 100%; justify-content: center; }

/* ---------- header / nav ---------- */
.site-header {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 100;
  background: transparent; border: 0;
  transition: transform .4s var(--ease);
}
/* slide up out of view on scroll down, back on scroll up */
.site-header.hidden { transform: translateY(calc(-100% - 24px)); }
/* a thin, floating glass island with a border on all sides */
.site-header .nav {
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
  height: 66px;
  padding: 0 14px 0 12px;
  gap: 20px;
  background: rgba(251, 248, 243, 0.88);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(43, 38, 34, 0.16);
  border-radius: 999px;
  box-shadow: 0 16px 38px -24px rgba(43, 38, 34, .55);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
/* more transparent once scrolled */
.site-header.scrolled .nav {
  background: rgba(251, 248, 243, 0.82);
  box-shadow: 0 14px 30px -22px rgba(43, 38, 34, .5);
}
/* thin-bar sizing */
.site-header .brand__mark { height: 50px; width: 50px; }
.site-header .brand__name { font-size: 1.6rem; }
.brand__text { display: flex; flex-direction: column; gap: 4px; }
.brand__tag { font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--clay-dark, #8F4731); white-space: nowrap; line-height: 1; }
.site-header .nav-links { gap: 20px; }
.site-header .nav-links a { font-size: 12px; letter-spacing: .07em; }
.site-header .nav-cta { gap: 10px; }
.site-header .nav-cta .btn { padding: 9px 20px; font-size: 12px; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand .mark { width: 64px; height: 64px; flex: none; }
.brand .wordmark { font-variant-numeric: lining-nums; font-family: var(--serif); font-size: 1.45rem; font-weight: 500; line-height: 1.05; letter-spacing: .01em; white-space: nowrap; }
.brand .wordmark small { display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-55); margin-top: 3px; font-weight: 500; }
.brand__mark { height: 56px; width: 56px; flex: none; }
.brand__name { font-variant-numeric: lining-nums; font-family: var(--serif); font-size: 1.55rem; font-weight: 600; line-height: .95; letter-spacing: .01em; color: #173A2B; white-space: nowrap; }

.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); position: relative; padding-block: 4px; white-space: nowrap;
}
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px; background: var(--clay); transition: width .3s var(--ease); }
.nav-links a:hover::after { width: 100%; }
.nav-cta { display: flex; align-items: center; gap: 14px; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 42px; height: 42px; color: var(--ink); }
.nav-toggle svg { width: 26px; height: 26px; }

/* mobile drawer
   Sized to fit the screen it is actually on. Eight links at 2rem with 12px of
   padding came to 824px of content in an 812px viewport, with overflow visible
   rather than scrollable, so the "Book a private session" button was cut off
   the bottom and nothing could reach it. That is on the tallest phone the
   emulator offers; a real one gives 60 to 100px of that back to the browser's
   own chrome, and an iPhone SE is 667px tall, which cut the button and the
   last two links off entirely.

   Three things fix it together, and the third is the one that matters:
     1. dvh, so the height follows the viewport as mobile browser chrome
        shows and hides, rather than assuming the full screen.
     2. the type and padding scale with available height, so on a tall phone
        it still reads as the generous menu it was designed to be, and on a
        short one it simply tightens instead of overflowing.
     3. overflow-y:auto, so whatever is left over is always reachable. A menu
        may be tight; it may never be unreachable.
   None of this touches the desktop nav, which is a different element. */
/* Stacking order on a phone, highest last. Written down because getting it
   wrong is invisible on a desktop and breaks the site on a phone:

     60   was the drawer. WRONG, and this was the reported bug: the drawer
          opened UNDER the consent bar (90) and the chat launcher (80), so on
          a 375px screen five of the nine menu items -- Pricing, Journal,
          About, Contact and the Book CTA -- were covered and did nothing
          when tapped. The drawer looked perfect in a screenshot; only a
          hit test at the centre of each item showed it.
     80   chat launcher
     85   chat panel
     95   the drawer. It is opaque and covers the viewport, so while it is
          open it owns the screen and everything above hides behind it.
    100   site header, which holds the control that closes the drawer and
          therefore has to stay on top of it.

   An overlay added later must pick a number in this list, not above 100. */
.mobile-nav {
  position: fixed; inset: 0; z-index: 95; background: var(--chai);
  display: flex; flex-direction: column;
  height: 100vh;            /* fallback for browsers without dvh */
  height: 100dvh;
  padding: 28px var(--gutter);
  /* clear of the notch and the home indicator */
  padding-top: max(28px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;   /* a swipe past the end does not move the page */
  transform: translateX(100%); transition: transform .4s var(--ease); visibility: hidden;
}
.mobile-nav.open { transform: translateX(0); visibility: visible; }
.mobile-nav .m-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: clamp(14px, 4vh, 40px);
  flex: none;
}
.mobile-nav a {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 3.4vh, 2rem);
  color: var(--ink);
  padding: clamp(5px, 1vh, 12px) 0;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.mobile-nav .btn { margin-top: clamp(14px, 3vh, 28px); flex: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end; color: var(--linen); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,38,34,.28) 0%, rgba(43,38,34,.12) 40%, rgba(43,38,34,.72) 100%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(48px, 8vw, 92px); }
.hero h1 { color: var(--linen); max-width: 16ch; margin-bottom: .35em; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero h1 em { color: #f0c877; }
.hero .hero__sub { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 300; max-width: 42ch; color: rgba(251,248,243,.92); margin-bottom: 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__scroll { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1; color: rgba(251,248,243,.8); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero__scroll span { width: 1px; height: 34px; background: rgba(251,248,243,.6); animation: scrolldot 2s var(--ease) infinite; }
@keyframes scrolldot { 0%,100%{opacity:.3; transform:scaleY(.6);} 50%{opacity:1; transform:scaleY(1);} }

/* ---------- homepage cinematic hero (client spec) ---------- */
.yoga-hero {
  position: relative; width: 100%;
  min-height: 100vh; min-height: 100svh; /* full screen, adapts to the viewport */
  overflow: hidden; isolation: isolate;
  background: #191817; color: #fff; font-family: var(--sans);
}
.yoga-hero__background {
  position: absolute; inset: 0; z-index: -3;
  background-image: url("../img/hero-canal-lg.webp");
  background-size: cover; background-position: center 82%; background-repeat: no-repeat;
  filter: grayscale(100%);
}
.yoga-hero__overlay {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(90deg, rgba(15,15,14,.92) 0%, rgba(15,15,14,.82) 25%, rgba(15,15,14,.55) 43%, rgba(15,15,14,.12) 68%, rgba(15,15,14,.08) 100%),
    linear-gradient(0deg, rgba(15,15,14,.30) 0%, transparent 30%, rgba(15,15,14,.08) 100%);
}
.yoga-hero__content {
  position: absolute; top: 50%; left: clamp(32px, 7.5vw, 155px);
  transform: translateY(-50%); width: min(660px, 54%); z-index: 2;
}
.yoga-hero__content h1 {
  margin: 0 0 22px; font-family: var(--serif);
  font-size: clamp(54px, 4.7vw, 92px); font-weight: 500; line-height: 1.04; letter-spacing: -1.5px; color: #fff;
}
.yoga-hero__content h1 em { color: #e6b76e; font-weight: 500; font-style: italic; }
.yoga-hero__description {
  max-width: 500px; margin: 0 0 34px;
  color: rgba(255,255,255,.94); font-size: clamp(16px, 1.22vw, 21px); font-weight: 300; line-height: 1.65;
}
.yoga-hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.yoga-btn {
  min-height: 58px; padding: 0 32px;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  border: 1.5px solid transparent; border-radius: 999px;
  font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.yoga-btn:hover { transform: translateY(-2px); }
.yoga-btn--primary { background: var(--clay); color: #fff; }
.yoga-btn--primary:hover { background: var(--clay-dark); color: #fff; box-shadow: var(--shadow-sm); }
.yoga-btn--primary span { font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.yoga-btn--outline { background: rgba(20,20,20,.12); border-color: rgba(255,255,255,.82); color: #fff; }
.yoga-btn--outline:hover { background: #fff; color: #222; border-color: #fff; }
.yoga-hero__scroll {
  position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: rgba(255,255,255,.9); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-decoration: none;
}
.yoga-hero__scroll-line { display: block; width: 1px; height: 46px; background: rgba(255,255,255,.7); animation: scrolldot 2s var(--ease) infinite; transform-origin: top; }

@media (max-width: 1024px) {
  .yoga-hero { max-height: none; }
  .yoga-hero__content { left: 6%; width: 64%; }
  .yoga-hero__content h1 { font-size: clamp(44px, 6.6vw, 72px); letter-spacing: -1px; }
  .yoga-hero__description { font-size: 18px; }
}
@media (max-width: 600px) {
  .yoga-hero { aspect-ratio: auto; height: auto; min-height: 100svh; max-height: none; }
  .yoga-hero__background { background-position: 62% 72%; }
  .yoga-hero__overlay {
    background: linear-gradient(180deg, rgba(15,15,14,.86) 0%, rgba(15,15,14,.6) 30%, rgba(15,15,14,.2) 56%, rgba(15,15,14,.5) 100%);
  }
  .yoga-hero__content {
    position: relative; top: 0; left: 0; transform: none; width: 100%;
    padding: 104px 25px 0;
  }
  .yoga-hero__content h1 { font-size: clamp(32px, 9.5vw, 54px); max-width: 100%; letter-spacing: -.5px; overflow-wrap: break-word; }
  .yoga-hero__description { font-size: 16px; max-width: 420px; }
  .yoga-hero__actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .yoga-hero__scroll { display: none; }
}

/* ---------- arch frame ---------- */
.arch { border-radius: 50% 50% var(--radius) var(--radius) / 32% 32% var(--radius) var(--radius); overflow: hidden; position: relative; box-shadow: var(--shadow); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch--full { border-radius: 999px 999px var(--radius) var(--radius) / 48% 48% 3% 3%; }

/* ---------- split (welcome / feature) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split--media-right { direction: ltr; }
.split__media { position: relative; }
.split__media .tag-note { position: absolute; bottom: 18px; left: -18px; background: var(--linen); color: var(--ink); padding: 14px 20px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); font-family: var(--serif); font-size: 1.15rem; line-height: 1.2; max-width: 210px; }
.split__media .tag-note b { color: var(--clay); font-family: var(--sans); font-weight: 600; font-size: .95rem; display: block; }
.signature { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--clay); margin-top: .4rem; }

/* ---------- offerings grid ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card {
  background: var(--linen); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 4/3; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
/* illustration panels (no photo): show the whole illustration on a matching ground */
.card__media--illus { background: #F1EADD; aspect-ratio: 19 / 10; }
.card__media--illus img { object-fit: contain; }
.card:hover .card__media--illus img { transform: scale(1.03); }
.card__body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.card__tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--sage); margin-bottom: 10px; }
.card h3 { margin-bottom: .35em; }
.card p { font-size: 15.5px; color: var(--ink-70); margin-bottom: 1.2em; }
.card .card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card .price { font-family: var(--serif); font-size: 1.4rem; color: var(--ink); }
.card .price small { font-family: var(--sans); font-size: .8rem; color: var(--ink-55); }
.card .arrow { color: var(--clay); font-size: 18px; transition: transform .3s var(--ease); }
.card a.card__link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.card a.card__link:hover .arrow { transform: translateX(4px); }
.card--accent { border-top: 3px solid var(--clay); }
.card--sage { border-top: 3px solid var(--sage); }
.card--indigo { border-top: 3px solid var(--indigo); }

/* ---------- schedule table ---------- */
.schedule { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.sched-block h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; }
.sched-list { list-style: none; margin: 0; padding: 0; }
.sched-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 15px 2px; border-bottom: 1px solid var(--line); }
.sched-list li:last-child { border-bottom: 0; }
.sched-list .day { font-weight: 500; letter-spacing: .02em; }
.sched-list .time { font-family: var(--serif); font-size: 1.25rem; color: var(--clay); }
.sched-note { font-size: 14px; color: var(--ink-55); margin-top: 14px; }

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.pillar { text-align: center; padding: 8px; }
.pillar .ic { width: 52px; height: 52px; margin: 0 auto 16px; color: var(--clay); }
.pillar h3 { font-size: 1.35rem; margin-bottom: .3em; }
.pillar p { font-size: 14.5px; color: var(--ink-70); margin-inline: auto; }

/* ---------- retreat feature (sage) ---------- */
.feature-sage { background: var(--sage); color: var(--linen); }
.feature-sage h2, .feature-sage h3 { color: var(--linen); }
.feature-sage h2 em { color: #e7d3a6; }
.feature-sage p { color: rgba(251,248,243,.88); }
.feature-indigo { background: var(--indigo); color: var(--linen); }
.feature-indigo h2, .feature-indigo h3 { color: var(--linen); }
.feature-indigo h2 em { color: var(--turmeric); }
.feature-indigo p { color: rgba(251,248,243,.82); }

/* cards sitting inside a coloured feature section keep dark, legible text */
.feature-sage .card h3, .feature-indigo .card h3 { color: var(--ink); }
.feature-sage .card p, .feature-indigo .card p { color: var(--ink-70); }

.stat-row { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 56px); margin-top: 28px; }
.stat b { font-family: var(--serif); font-size: 2.4rem; display: block; line-height: 1; }
.stat span { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }

/* ---------- gallery strip ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-sm); }
.gallery .g-tall { grid-row: span 1; }

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.price-card { background: var(--linen); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; display: flex; flex-direction: column; }
.price-card.is-featured { background: var(--ink); color: var(--linen); border-color: var(--ink); }
.price-card.is-featured h3, .price-card.is-featured .amt { color: var(--linen); }
.price-card.is-featured p { color: rgba(251,248,243,.78); }
.price-card .amt { font-family: var(--serif); font-size: 2.6rem; line-height: 1; margin: 6px 0 4px; }
.price-card .amt small { font-family: var(--sans); font-size: .9rem; color: var(--ink-55); }
.price-card.is-featured .amt small { color: rgba(251,248,243,.7); }
.price-card ul { list-style: none; margin: 18px 0 26px; padding: 0; }
.price-card li { padding: 8px 0; font-size: 15px; display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid var(--line); }
.price-card.is-featured li { border-top-color: rgba(251,248,243,.14); }
.price-card .btn { margin-top: auto; }

.price-grid.cols-2 { grid-template-columns: 1fr 1fr; max-width: 900px; margin-inline: auto; }
.pass-list { list-style: none; margin: 6px 0 24px; padding: 0; }
.pass-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.pass-list li:first-child { border-top: 0; }
.pass-list b { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; color: var(--clay); }
.price-card.is-featured .pass-list li { border-top-color: rgba(251,248,243,.14); }
.price-card.is-featured .pass-list b { color: var(--turmeric); }

/* ---------- newsletter ---------- */
.newsletter { background: var(--sandstone); border-radius: var(--radius); padding: clamp(36px, 6vw, 68px); text-align: center; position: relative; overflow: hidden; }
.newsletter .nl-form { display: flex; gap: 12px; max-width: 480px; margin: 22px auto 0; }
.newsletter input { flex: 1; }

/* ---------- forms ---------- */
input, select, textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--linen); border: 1.5px solid var(--line); border-radius: 100px;
  padding: 14px 20px; width: 100%; transition: border-color .25s var(--ease);
}
textarea { border-radius: var(--radius-sm); resize: vertical; min-height: 120px; }
select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232B2622' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; padding-right: 44px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--clay); }
label { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--ink-70); display: block; margin-bottom: 7px; }
.field { margin-bottom: 18px; text-align: left; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* supper club form: comfortable vertical rhythm between rows */
[data-form="supper"] { display: grid; gap: 16px; max-width: 480px; margin-inline: auto; }
[data-form="supper"] .field-row { gap: 16px; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
.contact-info dl { margin: 0; }
.contact-info dt { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--sage); margin-top: 22px; font-weight: 500; }
.contact-info dd { margin: 4px 0 0; font-family: var(--serif); font-size: 1.3rem; }
.contact-info dd a { color: var(--ink); }
.contact-info dd a:hover { color: var(--clay); }

/* ---------- footer ---------- */
.site-footer { background: var(--indigo); color: rgba(251,248,243,.78); padding-block: clamp(56px, 8vw, 88px) 36px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
.site-footer .brand .wordmark, .site-footer .brand { color: var(--linen); }
.site-footer .brand .mark { color: var(--turmeric); }
.site-footer .brand .wordmark small { color: rgba(251,248,243,.6); }
.site-footer h4 { color: var(--linen); font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; margin-bottom: 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 11px; }
.site-footer a { color: rgba(251,248,243,.78); font-size: 15px; }
.site-footer a:hover { color: var(--turmeric); }
.footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(251,248,243,.14); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: rgba(251,248,243,.55); }
.paris-clock { display: inline-flex; align-items: center; gap: 8px; }
.paris-clock .lamp { width: 7px; height: 7px; border-radius: 50%; background: var(--turmeric); box-shadow: 0 0 10px var(--turmeric); }

/* ---------- bandhani texture ---------- */
.bandhani { position: relative; }
.bandhani::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, rgba(168,90,63,.10) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
}
.bandhani > * { position: relative; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }

/* ---------- utility ---------- */
.mt-0 { margin-top: 0; }
.muted { color: var(--ink-55); }
.pill-note { display: inline-block; background: rgba(217,164,65,.16); color: var(--clay-dark); font-size: 12px; font-weight: 500; letter-spacing: .04em; padding: 6px 14px; border-radius: 100px; }
.divider-dot { text-align: center; color: var(--turmeric); letter-spacing: 1em; margin: 0; }

/* ---------- page hero (interior pages) ---------- */
.page-hero { padding-block: clamp(48px, 7vw, 88px) clamp(32px, 5vw, 56px); text-align: center; }
.page-hero .lead { max-width: 56ch; margin-inline: auto; }
.breadcrumbs { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 18px; }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(43,38,34,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal.open { display: flex; animation: fade .3s var(--ease); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal__card { background: var(--chai); border-radius: var(--radius); width: min(520px, 100%); max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow); animation: pop .35s var(--ease); }
@keyframes pop { from { transform: translateY(16px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__head { padding: 28px 30px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal__head .kicker { margin-bottom: .4rem; }
.modal__head h3 { margin: 0; }
.modal__body { padding: 20px 30px 30px; }
.modal__close { background: none; border: 0; cursor: pointer; color: var(--ink-70); width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; transition: background .2s; }
.modal__close:hover { background: var(--sandstone); color: var(--ink); }
.modal__close svg { width: 20px; height: 20px; }
.modal-done { display: none; text-align: center; padding: 10px 0 8px; }
.modal-done .tick { width: 56px; height: 56px; margin: 0 auto 16px; color: var(--sage); }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .nav-cta .btn--ghost { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-cta .btn--ghost { display: none; }
  /* 44px is the smallest reliable thumb target, and this was 42. Scoped to
     960 and below, which is touch territory; the 1180 breakpoint above is a
     narrow laptop with a pointer and keeps the desktop sizing. */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center;
                width: 44px; height: 44px; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .cards, .price-grid { grid-template-columns: 1fr 1fr; }
  .price-grid.cols-2 { grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .contact-grid, .schedule { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .cards, .price-grid, .price-grid.cols-2, .pillars, .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .newsletter .nl-form { flex-direction: column; }
  .split__media .tag-note { left: 0; }
  .hero { min-height: 82vh; }
  .nav { height: 66px; }
  .nav-cta .btn--primary { display: none; }
  .brand .wordmark { font-size: 1.15rem; white-space: nowrap; }
  .brand .mark { width: 52px; height: 52px; }
  .brand__mark { height: 46px; width: 46px; }
  .site-header .brand__name { font-size: 1.35rem; }
  .brand__tag { font-size: 8.5px; letter-spacing: .2em; }
  .brand__name { font-size: 1.25rem; }
  .hero__scroll { display: none; }
  .hero h1 { font-size: 2.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- consent notice ----------
   Fixed to the bottom, never covering the whole screen, and legible on the
   smallest phone. The two decision buttons are deliberately identical: under
   the EU, UK and Canadian regimes refusing has to be as easy as accepting,
   and a reject styled as a faint link is the commonest way a banner fails. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--linen); border-top: 1px solid var(--line);
  box-shadow: 0 -10px 40px rgba(43,38,34,.14);
  padding: 18px var(--gutter);
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
}
.consent__inner { max-width: 880px; margin-inline: auto; }
.consent h2 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 6px; }
.consent p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-70); }
.consent__gpc {
  background: var(--chai); border-radius: 10px; padding: 9px 12px;
  font-size: 13.5px; color: var(--ink);
}
.consent__cats { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 10px; }
.consent__cats label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consent__cats input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.consent__cats b { font-weight: 600; font-size: 14.5px; }
.consent__cats em { font-style: normal; color: var(--ink-55); font-size: 12.5px; }
.consent__cats small { display: block; color: var(--ink-70); font-size: 13px; line-height: 1.5; margin-top: 2px; }
.consent__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.consent__actions .btn { min-height: 44px; }
/* the reject button: same size and weight, different ground, so neither reads
   as the "real" one */
.consent__reject { background: var(--ink); border-color: var(--ink); }
.consent__link {
  background: none; border: 0; padding: 8px 2px; min-height: 44px;
  color: var(--clay); text-decoration: underline; cursor: pointer;
  font: inherit; font-size: 14px;
}
.consent__foot { font-size: 12.5px; color: var(--ink-55); margin: 12px 0 0; }
.consent__foot select {
  font: inherit; font-size: 12.5px; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--linen);
}
/* the US shape is a notice, not a wall */
.consent--notice { box-shadow: 0 -6px 24px rgba(43,38,34,.10); }
@media (max-width: 560px) {
  .consent__actions .btn { flex: 1 1 100%; }
}
.foot-privacy {
  background: none; border: 0; padding: 6px 0; min-height: 44px;
  color: rgba(251,248,243,.72); text-decoration: underline; cursor: pointer;
  font: inherit; font-size: 13px;
}
.foot-privacy:hover { color: var(--linen); }

/* ---------- Yoga Buddy ---------- */
.buddy-launch {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--clay); color: var(--linen);
  box-shadow: 0 10px 30px rgba(43,38,34,.28);
  display: grid; place-items: center;
  margin-bottom: env(safe-area-inset-bottom); margin-right: env(safe-area-inset-right);
}
.buddy-launch svg { width: 26px; height: 26px; }
.buddy {
  position: fixed; right: 20px; bottom: 20px; z-index: 85;
  width: min(380px, calc(100vw - 32px));
  max-height: min(70dvh, 620px);
  display: flex; flex-direction: column;
  background: var(--linen); border: 1px solid var(--line);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(43,38,34,.26);
  margin-bottom: env(safe-area-inset-bottom); margin-right: env(safe-area-inset-right);
}
.buddy__top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 14px; background: var(--indigo); color: var(--linen); flex: none;
}
.buddy__top b { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; }
.buddy__state {
  display: block; font-size: 11.5px; letter-spacing: .04em;
  color: rgba(251,248,243,.66);
}
/* a dot only when someone is actually there */
.buddy__state.is-live::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #6FBF8B; margin-right: 6px; vertical-align: 1px;
}
.buddy__x {
  background: none; border: 0; color: rgba(251,248,243,.8); cursor: pointer;
  width: 44px; height: 44px; display: grid; place-items: center;
}
.buddy__x svg { width: 19px; height: 19px; }
.buddy__log { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px; }
.buddy__msg {
  margin: 0 0 10px; padding: 10px 13px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.55; max-width: 92%;
}
.buddy__msg--buddy, .buddy__msg--operator {
  background: var(--chai); color: var(--ink); border-bottom-left-radius: 5px;
}
.buddy__msg--operator b { color: var(--clay); }
.buddy__msg--visitor {
  background: var(--sage); color: var(--linen);
  margin-left: auto; border-bottom-right-radius: 5px;
}
.buddy__chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px 10px; flex: none; }
.buddy__chips button {
  background: var(--linen); border: 1px solid var(--line); border-radius: 100px;
  padding: 8px 13px; font: inherit; font-size: 12.5px; cursor: pointer; color: var(--ink);
}
.buddy__chips button:hover { border-color: var(--clay); color: var(--clay); }
.buddy__handoff { background: var(--chai); border-radius: 14px; padding: 12px; margin-bottom: 10px; }
.buddy__handoff label { display: block; font-size: 13px; margin-bottom: 7px; color: var(--ink-70); }
.buddy__handoff input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; font-size: 14px; margin-bottom: 9px; min-height: 44px;
}
.buddy__handoff .btn { width: 100%; min-height: 44px; }
.buddy__warn {
  margin: 9px 0 0; font-size: 12.5px; line-height: 1.5; color: #8a2f21;
  background: #fdf1ee; border: 1px solid #f0cdc4; border-radius: 10px; padding: 8px 10px;
}
.buddy__ask { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--line); flex: none; }
.buddy__ask input {
  flex: 1; min-width: 0; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 100px; font: inherit; font-size: 14.5px; min-height: 44px;
}
.buddy__ask button {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  background: var(--clay); color: var(--linen); cursor: pointer;
  display: grid; place-items: center;
}
.buddy__ask button:disabled { opacity: .45; cursor: default; }
.buddy__ask button svg { width: 19px; height: 19px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 480px) {
  .buddy { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 78dvh; }
}

/* ---- the menu on a phone held sideways (v2.7) ----
   844x390 is an ordinary landscape phone, and the drawer needed 533px for a
   390px screen: Contact and the Book button sat below the fold. It scrolled,
   so nothing was unreachable, but scrolling a nine-item menu while 844px of
   width goes unused is a layout that has not been looked at rather than one
   that has.

   Short and wide gets two columns. Keyed on height and orientation, not on a
   device name: a tablet in a split-screen pane is the same shape and deserves
   the same treatment, and no user-agent string would have told us either. */
@media (max-width: 1180px) and (max-height: 560px) and (orientation: landscape) {
  .mobile-nav {
    display: grid; grid-template-columns: 1fr 1fr;
    align-content: start; column-gap: 28px;
    padding: 16px 20px 20px;
  }
  .mobile-nav .m-top { grid-column: 1 / -1; margin-bottom: 4px; }
  .mobile-nav a { padding: 11px 0; font-size: 1.35rem; }
  .mobile-nav .btn { grid-column: 1 / -1; margin-top: 10px; }
}

/* The chat bubble waits for the privacy answer.
   Both are fixed to the bottom of the screen, the banner spans the full
   width and the bubble sits bottom-right, so the bubble was half under the
   banner and could not be tapped. Rather than fight for the corner, it waits:
   the banner is the one thing in front of a first-time visitor, and the
   bubble comes back the moment they answer, because the banner unmounts.
   Keyed on the sibling order set in App.jsx, where the banner is rendered
   immediately before the widget. */
.consent ~ .buddy-launch { display: none; }