/* =============================================================
   Anushikha Dwivedi — Personal Brand
   Design system v3 · "Ivory & Champagne"

   Surfaces  warm ivory paper, sand, deep plum ink
   Metallic  champagne gold — buttons, numerals, rules, on-dark accents
   Voice     deep rose — eyebrows, italic display words, links, focus

   Type      Playfair Display (display) · Inter (text)
   ============================================================= */

/* =============================================================
   1. TOKENS
   ============================================================= */
:root {
  /* ---- surfaces ---- */
  --paper:      #FDFBF7;   /* warm ivory */
  --paper-2:    #F6F1E8;   /* sand */
  --paper-3:    #EADFCF;   /* deeper sand */
  --white:      #FFFFFF;

  /* ---- ink ---- */
  --ink:        #241019;   /* deep plum-black */
  --ink-soft:   #574350;
  --muted:      #8B7A82;
  --plum:       #241019;
  --plum-2:     #381B29;

  /* ---- champagne · the metallic ---- */
  --champ:      #C9A227;
  --champ-lite: #E4C86C;   /* on dark */
  --champ-deep: #9A7A22;   /* graphics & large numerals on light */
  --champ-soft: #EFE3C0;

  /* ---- rose · the voice ---- */
  --rose:       #B4285C;
  --rose-2:     #D15482;
  --rose-deep:  #8E1D48;   /* small text on light */
  --rose-soft:  #F2CFDC;

  /* ---- legacy aliases — older markup keeps working ---- */
  --navy:       var(--plum);
  --navy-2:     var(--plum-2);
  --navy-line:  rgba(255,255,255,0.14);
  --gold:       var(--rose-deep);   /* accent that must read as text on light */
  --gold-2:     var(--champ-lite);  /* accent on dark */
  --gold-soft:  var(--rose-soft);

  /* ---- lines & shadow ---- */
  --line:       rgba(36,16,25,0.13);
  --line-soft:  rgba(36,16,25,0.07);
  --shadow-sm:  0 2px 12px rgba(36,16,25,0.05);
  --shadow-md:  0 20px 48px -22px rgba(36,16,25,0.24);
  --shadow-lg:  0 44px 96px -44px rgba(36,16,25,0.40);

  /* ---- type ---- */
  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- space & shape ---- */
  --container: 1180px;
  --gutter:    clamp(20px, 5vw, 48px);
  --sec-y:     clamp(54px, 6.6vw, 104px);
  --r-sm:  10px;
  --radius: 16px;
  --radius-lg: 24px;
  --r-xl:  34px;

  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---- scrims for text on photography ---- */
  --scrim-l:    linear-gradient(90deg, rgba(24,8,15,.92) 0%, rgba(24,8,15,.64) 42%, rgba(24,8,15,.08) 78%, transparent 100%);
  --scrim-r:    linear-gradient(270deg, rgba(24,8,15,.92) 0%, rgba(24,8,15,.64) 42%, rgba(24,8,15,.08) 78%, transparent 100%);
  --scrim-b:    linear-gradient(to top, rgba(20,6,12,.94) 0%, rgba(20,6,12,.58) 38%, rgba(20,6,12,.05) 72%, transparent 100%);
  --scrim-full: linear-gradient(180deg, rgba(20,6,12,.70) 0%, rgba(20,6,12,.56) 35%, rgba(20,6,12,.86) 100%);
  --scrim-tile: linear-gradient(to top, rgba(20,6,12,.94) 0%, rgba(20,6,12,.55) 42%, rgba(20,6,12,.06) 80%, transparent 100%);
}

/* =============================================================
   2. RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* overflow-x clip on BOTH html and body: a stray transform must never be able
   to widen the initial containing block, because the fixed header is sized
   from it and would then push its own contents off-screen on phones. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--rose-soft); color: var(--ink); }

/* =============================================================
   3. LAYOUT HELPERS
   ============================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section   { padding-block: var(--sec-y); }
.narrow    { max-width: 740px; }
.bleed     { width: 100%; }
.divider   { height: 1px; background: var(--line-soft); }
.bg-alt    { background: var(--paper-2); }
.center-btn { text-align: center; margin-top: clamp(28px,3.6vw,44px); }

/* =============================================================
   4. TYPOGRAPHY
   ============================================================= */
h1, h2, h3, h4 {
  font-family: var(--f-display); font-weight: 500;
  line-height: 1.08; letter-spacing: -0.018em;
  margin: 0; color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 5.8vw, 4.4rem); line-height: 1.03; }
h2 { font-size: clamp(1.95rem, 3.9vw, 3.05rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; }
p  { margin: 0 0 1.1em; color: var(--ink-soft); }
strong { color: var(--ink); font-weight: 600; }
.lead { font-size: clamp(1.06rem, 1.5vw, 1.24rem); color: var(--ink-soft); line-height: 1.6; }

.eyebrow {
  font-family: var(--f-text);
  font-size: .76rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--rose-deep); margin: 0 0 1rem;
  display: inline-flex; align-items: center; gap: .7rem;
}
.eyebrow::before { content:""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.eyebrow.center { justify-content: center; }
.eyebrow.on-dark { color: var(--champ-lite); }

.serif-accent { font-family: var(--f-display); font-style: italic; font-weight: 500; color: var(--rose); }

.section-head { max-width: 660px; margin-bottom: clamp(28px, 3.6vw, 50px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-bottom: 0; margin-top: 1rem; }

/* headings carry no bottom margin by default (layouts set their own), so
   prose blocks need it back or the first paragraph touches the headline */
.split-copy h1, .split-copy h2, .split-copy h3,
.hero-fb .hero-copy h1,
.cta-band h2, .cta-photo h2,
.narrow h1, .narrow h2, .narrow h3 { margin-bottom: 1.05rem; }

/* the roles line she leads with on her own site */
.roles {
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--rose-deep);
  margin: 1.1rem 0 0; line-height: 1.5;
}

.breadcrumb { font-size:.82rem; color: var(--muted); margin-bottom:1.1rem; display:flex; gap:.5rem; align-items:center; }
.breadcrumb a:hover { color: var(--rose); }

/* =============================================================
   5. BUTTONS & LINKS
   ============================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.75rem; border-radius: 999px;
  font-size: .94rem; font-weight: 550; letter-spacing: .005em;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn.lg  { padding: 1.05rem 2.05rem; font-size: 1rem; }

/* champagne — the primary call to action, everywhere */
.btn.gold {
  background: linear-gradient(145deg, #F0DA9A 0%, #DDBE5A 26%, var(--champ) 62%, #A9871B 100%);
  color: var(--ink);
  border-color: rgba(36,16,25,.12);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 26px -14px rgba(154,122,34,.9);
}
.btn.gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 20px 38px -16px rgba(154,122,34,.9);
}

/* plum — compact authority, used in the header */
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--plum-2); transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(36,16,25,.7); }

.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); transform: translateY(-3px); }
.btn.on-dark { background: var(--champ); color: var(--ink); }
.btn.ghost.on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn.ghost.on-dark:hover { border-color: #fff; background: rgba(255,255,255,.07); }

.text-link {
  display:inline-flex; align-items:center; gap:.5rem; position:relative;
  color: var(--ink); font-weight:550; font-size:.95rem;
}
.text-link svg { width:16px; height:16px; transition: transform .3s var(--ease); }
.text-link::after {
  content:""; position:absolute; left:0; bottom:-5px; width:100%; height:1px;
  background: var(--rose); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.text-link:hover::after { transform: scaleX(1); }
.text-link:hover svg { transform: translateX(4px); }
.text-link.on-dark { color:#fff; }
.text-link.on-dark::after { background: var(--champ-lite); }

/* =============================================================
   6. HEADER / NAV
   ============================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  width: 100%; max-width: 100%;
  padding-block: 17px;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), box-shadow .4s var(--ease),
              padding .4s var(--ease), border-color .4s var(--ease);
}
.site-header.scrolled {
  background: rgba(253,251,247,0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--shadow-sm);
  padding-block: 11px;
  border-bottom-color: var(--line-soft);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; min-width: 0; }

.brand { display:flex; flex-direction:column; line-height:1; min-width:0; flex: 0 1 auto; }
.brand .name {
  font-family: var(--f-display); font-size: 1.32rem; font-weight: 600; letter-spacing: -.015em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand .tag {
  font-size: .56rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--rose-deep); margin-top: 5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.nav-links { display: flex; align-items: center; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: .92rem; font-weight: 450; color: var(--ink-soft); position: relative; padding-block: 4px; transition: color .25s; }
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background: var(--rose); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

.nav-cta { display:flex; align-items:center; gap: .9rem; flex: 0 0 auto; }

/* header over a full-bleed photo hero — light variant until scrolled */
.site-header.on-photo:not(.scrolled) .brand .name { color:#fff; }
.site-header.on-photo:not(.scrolled) .brand .tag { color: rgba(255,255,255,.72); }
.site-header.on-photo:not(.scrolled) .nav-links a { color: rgba(255,255,255,.84); }
.site-header.on-photo:not(.scrolled) .nav-links a:hover,
.site-header.on-photo:not(.scrolled) .nav-links a.active { color:#fff; }
.site-header.on-photo:not(.scrolled) .nav-links a::after { background:#fff; }
.site-header.on-photo:not(.scrolled) .nav-toggle span { background:#fff; }
.site-header.on-photo:not(.scrolled) .btn.primary {
  background: rgba(255,255,255,.15); color:#fff; border-color: rgba(255,255,255,.32);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.site-header.on-photo:not(.scrolled) .btn.primary:hover { background: rgba(255,255,255,.26); }

.nav-toggle {
  display:none; width: 42px; height:42px; border:none; background:none;
  flex-direction: column; justify-content:center; align-items:flex-end; gap:5px; padding:0; flex-shrink:0;
}
.nav-toggle span { display:block; height:2px; background: var(--ink); border-radius:2px; transition: transform .35s var(--ease), width .35s var(--ease), opacity .25s; }
.nav-toggle span:nth-child(1){ width:23px; }
.nav-toggle span:nth-child(2){ width:17px; }
.nav-toggle span:nth-child(3){ width:23px; }
body.menu-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); width:23px; }
body.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
body.menu-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); width:23px; }
body.menu-open { overflow: hidden; }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; width:100%;
  background: var(--paper);
  padding: 110px var(--gutter) 36px;
  display: flex; flex-direction: column;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .5s var(--ease), opacity .4s var(--ease), visibility .5s;
}
body.menu-open .mobile-menu { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu a.m-link {
  font-family: var(--f-display); font-size: clamp(1.8rem, 7.4vw, 2.4rem); color: var(--ink);
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  opacity:0;
}
/* the open state — not the animation — is what makes the links visible, so a
   dropped or disabled animation can never leave the menu blank */
body.menu-open .mobile-menu a.m-link {
  opacity:1; animation: mLink .5s var(--ease) backwards;
}
.mobile-menu a.m-link span { font-family: var(--f-text); font-size: .78rem; color: var(--champ-deep); letter-spacing:.1em; }
@keyframes mLink { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { body.menu-open .mobile-menu a.m-link { animation:none; } }
.mobile-menu .m-foot { margin-top: auto; display:flex; gap: .8rem; flex-wrap: wrap; padding-top: 28px; }
.mobile-menu .m-foot .btn { flex: 1 1 auto; }

/* =============================================================
   7. HERO — split (home)
   ============================================================= */
.hero-split {
  position: relative; overflow: hidden; background: var(--paper);
  padding-top: clamp(112px, 13vw, 164px);
  padding-bottom: clamp(50px, 6.6vw, 92px);
}
.hero-split::before {          /* warm champagne wash behind the portrait */
  content:""; position:absolute; top:-24%; right:-14%; width:62vw; height:62vw;
  max-width:820px; max-height:820px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,162,39,.16), rgba(201,162,39,0) 66%);
  pointer-events:none; z-index:0;
}
.hero-split::after {           /* faint rose counterweight, bottom-left */
  content:""; position:absolute; bottom:-30%; left:-18%; width:52vw; height:52vw;
  max-width:640px; max-height:640px; border-radius:50%;
  background: radial-gradient(circle, rgba(180,40,92,.09), rgba(180,40,92,0) 66%);
  pointer-events:none; z-index:0;
}
.hero-split > .container { position: relative; z-index: 1; }
.hs-grid { display:grid; grid-template-columns: 1.04fr .96fr; gap: clamp(30px,5vw,76px); align-items:center; }

.hs-copy { max-width: 620px; }
.hs-copy h1 { font-size: clamp(2.3rem, 4.5vw, 3.85rem); line-height: 1.04; margin-bottom: 1.15rem; }
.hs-copy .lead { max-width: 45ch; margin-bottom: 0; }
.hs-copy .hero-actions { margin-top: clamp(26px,3.4vw,38px); }

/* availability chip */
.hero-chip {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.42rem .95rem .42rem .75rem; margin-bottom:1.15rem;
  border:1px solid var(--champ-soft); border-radius:999px;
  background: rgba(201,162,39,.09);
  font-size:.74rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color: var(--champ-deep);
}
.hero-chip i {
  width:7px; height:7px; border-radius:50%; background: var(--champ); flex-shrink:0;
  box-shadow: 0 0 0 3px rgba(201,162,39,.22);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-chip i { animation: pulseDot 2.4s ease-in-out infinite; }
  @keyframes pulseDot {
    0%,100% { box-shadow: 0 0 0 3px rgba(201,162,39,.22); }
    50%     { box-shadow: 0 0 0 6px rgba(201,162,39,.05); }
  }
}

.hero-actions { display:flex; flex-wrap:wrap; gap: .9rem; }

.hs-creds {
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.5rem;
  margin-top: clamp(28px,3.4vw,42px); padding-top: clamp(18px,2.2vw,26px);
  border-top: 1px solid var(--line);
}
.hs-creds span {
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color: var(--muted);
}
.hs-creds span::before { content:""; width:5px; height:5px; border-radius:50%; background: var(--champ); flex-shrink:0; }

/* portrait */
.hs-portrait { position:relative; justify-self:center; width:100%; max-width:420px; }
.hs-frame {
  position:relative; z-index:2; aspect-ratio: 467/550;
  border-radius: 240px 240px var(--radius-lg) var(--radius-lg);
  overflow:hidden; box-shadow: var(--shadow-lg); background: var(--paper-3);
}
.hs-frame img { width:100%; height:100%; object-fit:cover; object-position: center top; }
.hs-ring {
  position:absolute; inset:-15px -15px 22px -15px; z-index:1;
  border:1px solid var(--champ); opacity:.5;
  border-radius: 250px 250px var(--radius-lg) var(--radius-lg);
}
.hs-disc {
  position:absolute; z-index:0; left:-9%; bottom:-6%; width:52%; aspect-ratio:1;
  border-radius:50%; background: var(--paper-3);
}

/* line-mask reveal for the headline */
.line-mask  { display:block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; }
.line-inner { display:block; transform: translateY(112%); transition: transform 1s var(--ease); }
.line-inner.in { transform: none; }

/* =============================================================
   8. HERO — full-bleed photo (interior pages)
   ============================================================= */
.hero-fb {
  position: relative; width:100%; height:100svh; min-height:600px; max-height:960px;
  overflow:hidden; display:flex; isolation:isolate;
}
.hero-fb .hero-bg { position:absolute; inset:0; z-index:0; }
.hero-fb .hero-bg img {
  width:100%; height:100%; object-fit:cover; object-position: center 22%;
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform:scale(1); } to { transform:scale(1.08); } }
.hero-fb .hero-scrim { position:absolute; inset:0; z-index:1; }
.hero-fb .hero-scrim.right  { background: var(--scrim-r); }
.hero-fb .hero-scrim.left   { background: var(--scrim-l); }
.hero-fb .hero-scrim.bottom { background: var(--scrim-b); }
.hero-fb .hero-content {
  position:relative; z-index:2; width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(96px,13vw,150px) var(--gutter) clamp(104px,12vw,144px);
}
.hero-fb .hero-inner { width:100%; max-width: var(--container); margin-inline:auto; }
.hero-fb .hero-copy { max-width: 640px; }
.hero-fb .hero-copy.align-right { margin-left:auto; }
.hero-fb h1 { color:#fff; font-size: clamp(2.6rem, 6.6vw, 5rem); line-height:1; }
.hero-fb .lead { color: rgba(255,255,255,.86); }
.hero-fb.short { height:62svh; min-height:420px; max-height:620px; }

/* =============================================================
   9. LOGO MARQUEE
   ============================================================= */
.logos { background: var(--plum); color:#fff; padding-block: clamp(20px,2.2vw,26px); }
.logos .kicker {
  text-align:center; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color: rgba(255,255,255,.5); margin-bottom: .9rem;
}
.marquee {
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track { display:flex; align-items:center; gap: clamp(22px,3.2vw,42px); width:max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track .m-item {
  display:flex; align-items:center; color: rgba(255,255,255,.9);
  font-family: var(--f-display); font-weight:500; font-size: clamp(1rem,1.5vw,1.3rem);
  white-space:nowrap;
}
.marquee-track .m-sep { width:5px; height:5px; border-radius:50%; background: var(--champ); flex-shrink:0; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
}

/* =============================================================
   10. ROOMS — what she's booked for (home)
   ============================================================= */
.rooms {
  display:grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(210px, auto);
  gap: clamp(10px, 1.2vw, 16px);
}
.room {
  position:relative; overflow:hidden; display:block;
  border-radius: var(--radius); background: var(--plum-2);
  isolation:isolate;
}
.room.feature { grid-row: span 2; }
.room img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position: center 24%;
  transition: transform 1s var(--ease);
}
/* flat wash + bottom gradient: titles stay legible over busy event photos */
.room::after {
  content:""; position:absolute; inset:0; z-index:1;
  background-image: var(--scrim-tile);
  background-color: rgba(20,6,12,.22);
  transition: background-color .5s var(--ease);
}
.room:hover::after { background-color: rgba(20,6,12,.34); }
.room:hover img { transform: scale(1.06); }
.room-body {
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: clamp(18px,1.9vw,26px);
  color:#fff;
}
.room-num {
  display:block;
  font-family: var(--f-display); font-style:italic; color: var(--champ-lite);
  font-size:.95rem; letter-spacing:.02em; margin-bottom:.35rem;
}
.room-body h3 { color:#fff; font-size: clamp(1.08rem, 1.7vw, 1.4rem); line-height:1.2; margin:0; letter-spacing:-.01em; }
.room-meta {
  display:block; margin:.5rem 0 0; font-size:.8rem; line-height:1.45;
  color: rgba(255,255,255,.72);
}
.room.feature .room-body h3 { font-size: clamp(1.35rem, 2.3vw, 1.85rem); }
.room.feature .room-meta { font-size:.88rem; max-width: 32ch; }
.room-go {
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.85rem;
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--champ-lite); opacity:0; transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.room-go svg { width:15px; height:15px; }
.room:hover .room-go, .room:focus-visible .room-go { opacity:1; transform:none; }

/* =============================================================
   11. PROOF BAND — stats + testimonial (dark)
   ============================================================= */
.proof { background: var(--plum); color:#fff; position:relative; overflow:hidden; }
.proof::before {
  content:""; position:absolute; top:-42%; left:50%; transform:translateX(-50%);
  width:74vw; height:74vw; max-width:860px; max-height:860px;
  background: radial-gradient(circle, rgba(201,162,39,.14), transparent 62%); pointer-events:none;
}
.proof .container { position:relative; z-index:1; }
.proof h2 { color:#fff; }
.proof .lead { color: rgba(255,255,255,.7); }

/* stats */
.stats-grid { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(20px,3vw,40px); }
.stat { text-align:center; padding: 6px 4px; }
.stat .num { font-family: var(--f-display); font-size: clamp(2.4rem,5vw,3.5rem); color: var(--ink); line-height:1; }
.stat .num .u { color: var(--champ-deep); }
.stat .lbl { font-size:.78rem; letter-spacing:.07em; color: var(--muted); margin-top:.65rem; text-transform:uppercase; line-height:1.35; }
.proof .stat .num { color:#fff; }
.proof .stat .num .u { color: var(--champ-lite); }
.proof .stat .lbl { color: rgba(255,255,255,.56); }

.proof-rule { height:1px; background: rgba(255,255,255,.14); margin-block: clamp(34px,4.4vw,58px); }

/* =============================================================
   12. TESTIMONIAL SLIDER
   ============================================================= */
.tsection { background: var(--paper-2); }
.quote-stage { position:relative; max-width:840px; margin-inline:auto; min-height: 232px; }
/* the outgoing slide leaves quickly so two quotes never sit legibly on top
   of each other mid-crossfade */
.quote-slide {
  position:absolute; inset:0; text-align:center; opacity:0; transform: translateY(12px);
  transition: opacity .25s var(--ease), transform .25s var(--ease); pointer-events:none;
}
.quote-slide.active {
  opacity:1; transform:none; pointer-events:auto; position:relative;
  transition: opacity .55s var(--ease) .18s, transform .55s var(--ease) .18s;
}
.quote-slide blockquote {
  font-family: var(--f-display); font-style:italic; font-weight:500;
  font-size: clamp(1.28rem, 2.4vw, 1.85rem); line-height:1.44; color: var(--ink); margin: 0 0 1.5rem;
}
.quote-person { display:flex; flex-direction:column; align-items:center; gap:.65rem; }
.quote-person img { width:58px; height:58px; border-radius:50%; object-fit:cover; border:2px solid var(--champ-soft); }
.quote-person .n { font-weight:600; font-size:.94rem; }
.quote-person .r { font-size:.8rem; color: var(--muted); }
.quote-dots { display:flex; justify-content:center; gap:.55rem; margin-top:1.4rem; }
.quote-dots button {
  width:8px; height:8px; border-radius:50%; border:none; background: var(--line); padding:0;
  transition: background .3s, transform .3s, width .3s;
}
.quote-dots button.active { background: var(--rose); width:22px; border-radius:999px; }

/* on the dark proof band */
.proof .quote-slide blockquote { color:#fff; }
.proof .quote-person .n { color:#fff; }
.proof .quote-person .r { color: rgba(255,255,255,.55); }
.proof .quote-person img { border-color: rgba(228,200,108,.5); }
.proof .quote-dots button { background: rgba(255,255,255,.24); }
.proof .quote-dots button.active { background: var(--champ-lite); }

/* =============================================================
   13. SPLIT / FEATURE
   ============================================================= */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,72px); align-items:center; }
.split.reverse .split-media { order:2; }
/* isolate so the champagne accent frame (z-index:-1) paints inside this
   element instead of disappearing behind the section background */
.split-media { position:relative; isolation:isolate; }
.media-frame { border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md); aspect-ratio: 4/5; background: var(--paper-3); }
.media-frame img { width:100%; height:100%; object-fit:cover; object-position: center top; }
.media-accent { position:absolute; inset: 18px -18px -18px 18px; border:1px solid var(--champ); border-radius: var(--radius-lg); z-index:-1; opacity:.55; }

.feature-list { list-style:none; padding:0; margin: 1.6rem 0 0; display:grid; gap:.95rem; }
.feature-list li { display:flex; gap:.8rem; align-items:flex-start; font-size:.97rem; color: var(--ink-soft); }
.feature-list li svg { width:21px; height:21px; color: var(--champ-deep); flex-shrink:0; margin-top:2px; }

/* =============================================================
   14. PILLAR PANELS (services page)
   ============================================================= */
.pillar { position:relative; display:grid; grid-template-columns: 1fr 1fr; min-height: 520px; background: var(--paper); }
.pillar.alt { background: var(--paper-2); }
.pillar-media { position:relative; overflow:hidden; order:1; }
.pillar-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.01); transition: transform 1.4s var(--ease); }
.pillar:hover .pillar-media img { transform: scale(1.05); }
.pillar-copy { order:2; display:flex; flex-direction:column; justify-content:center; padding: clamp(36px,4.4vw,74px); }
.pillar.reverse .pillar-media { order:2; }
.pillar.reverse .pillar-copy { order:1; }
.pillar-copy h2 { font-size: clamp(1.85rem, 3.1vw, 2.6rem); margin-bottom:1.05rem; }
.pillar-copy .lead { max-width: 46ch; }
.pillar-copy .feature-list { margin-top:1.5rem; }

.pillar-num {
  display:flex; align-items:center; gap:.7rem;
  font-family: var(--f-text); font-size:.74rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color: var(--rose-deep);
  margin-bottom:.9rem;
}
.pillar-num i {
  font-family: var(--f-display); font-style:italic; font-size:1.5rem;
  letter-spacing:0; text-transform:none; color: var(--champ-deep); line-height:1;
}
.pillar-num::after { content:""; flex:1; height:1px; max-width:56px; background: var(--champ-soft); }

/* =============================================================
   15. GALLERY
   ============================================================= */
.gallery { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(10px,1.5vw,18px); }
.gallery figure { position:relative; margin:0; overflow:hidden; border-radius: var(--radius); aspect-ratio: 1/1; background: var(--paper-3); }
.gallery img { width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.gallery figcaption {
  position:absolute; inset:auto 0 0 0; padding: 1.8rem .95rem .85rem;
  background: linear-gradient(to top, rgba(20,6,12,.88), transparent);
  color:#fff; font-size:.8rem; font-weight:500;
  opacity:0; transform: translateY(8px); transition: opacity .4s, transform .4s;
}
.gallery figure:hover figcaption { opacity:1; transform:none; }
.gallery.editorial { grid-template-columns: repeat(4,1fr); grid-auto-rows: clamp(140px,14.5vw,186px); grid-auto-flow: dense; }
.gallery.editorial figure { aspect-ratio: auto; }
.gallery.editorial figure.tall { grid-row: span 2; }
.gallery.editorial figure.big  { grid-column: span 2; grid-row: span 2; }
.swipe-hint { display:none; }

/* =============================================================
   16. CTA BANDS
   ============================================================= */
.cta-band { position:relative; background: var(--plum); color:#fff; overflow:hidden; }
.cta-band::before {
  content:""; position:absolute; top:-30%; left:-10%; width:52vw; height:52vw; max-width:620px; max-height:620px;
  background: radial-gradient(circle, rgba(201,162,39,.2), transparent 60%);
}
.cta-band .container { position:relative; z-index:2; text-align:center; }
.cta-band h2 { color:#fff; }
.cta-band h2 .serif-accent { color: var(--champ-lite); }
.cta-band p { color: rgba(255,255,255,.72); max-width:560px; margin-inline:auto; }

.cta-photo { position:relative; overflow:hidden; color:#fff; }
.cta-photo .cta-bg { position:absolute; inset:0; z-index:0; }
.cta-photo .cta-bg img { width:100%; height:100%; object-fit:cover; object-position: center 28%; }
.cta-photo .cta-scrim { position:absolute; inset:0; z-index:1; background: var(--scrim-full); }
.cta-photo .container { position:relative; z-index:2; }
.cta-photo h2 { color:#fff; }
.cta-photo .serif-accent { color: var(--champ-lite); }

.cta-actions { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

/* =============================================================
   17. PAGE HERO (interior)
   ============================================================= */
.page-hero { position:relative; padding-top: clamp(136px,15vw,196px); padding-bottom: clamp(40px,6vw,72px); overflow:hidden; }
.page-hero::before {
  content:""; position:absolute; top:-8%; right:-8%; width:44vw; height:44vw; max-width:540px; max-height:540px;
  background: radial-gradient(circle, rgba(201,162,39,.15), transparent 62%); z-index:0; pointer-events:none;
}
.page-hero .container { position:relative; z-index:2; }

/* pills */
.pill-row { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.4rem; }
.pill { font-size:.8rem; padding:.48rem .95rem; border-radius:999px; background: var(--white); border:1px solid var(--line-soft); color: var(--ink-soft); }
.pill.gold { background: rgba(201,162,39,.12); border-color: var(--champ-soft); color: var(--champ-deep); font-weight:600; }

/* =============================================================
   18. CARDS — courses
   ============================================================= */
.grid { display:grid; gap: clamp(18px,2.4vw,30px); }
.grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.grid.cols-3 { grid-template-columns: repeat(3,1fr); }
.grid.cols-4 { grid-template-columns: repeat(4,1fr); }

.course-card {
  background: var(--white); border:1px solid var(--line-soft); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow-sm); display:flex; flex-direction:column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.course-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--champ-soft); }
.course-media { position:relative; aspect-ratio: 16/10; overflow:hidden; background: var(--plum-2); }
.course-media img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.course-card:hover .course-media img { transform: scale(1.05); }
.course-media.icon-media { display:grid; place-items:center; background: linear-gradient(150deg, var(--plum-2), var(--plum)); }
.course-media.icon-media svg { width:50px; height:50px; color: var(--champ-lite); }
.course-tag {
  position:absolute; top:12px; left:12px; background: rgba(20,6,12,.74);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); color:#fff;
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; padding:.34rem .68rem; border-radius:999px;
}
.course-body { padding: 1.25rem 1.35rem 1.45rem; display:flex; flex-direction:column; flex:1; }
.course-body h3 { font-size:1.18rem; margin-bottom:.45rem; }
.course-body p { font-size:.9rem; color: var(--muted); margin-bottom:1rem; }
.course-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding-top:.95rem; border-top:1px solid var(--line-soft); }
.price { font-family: var(--f-display); font-size:1.12rem; color: var(--ink); }
.price small { font-size:.7rem; color: var(--muted); font-family: var(--f-text); }

/* reviews */
.review-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px,1.8vw,22px); }
.review {
  margin:0; padding: clamp(20px,2.4vw,28px);
  background: var(--white); border:1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap:.8rem;
}
.review .stars { color: var(--champ); font-size:.95rem; letter-spacing:.18em; line-height:1; }
.review blockquote { margin:0; font-size:1rem; line-height:1.6; color: var(--ink-soft); }
.review figcaption { font-size:.85rem; font-weight:600; color: var(--ink); margin-top:auto; }
.review figcaption::before { content:"— "; color: var(--muted); font-weight:400; }

/* =============================================================
   19. VALUES / PROCESS / TIMELINE
   ============================================================= */
.value-row { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px,4vw,48px); }
.value-row .value { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.value-row .value .v-num { font-family: var(--f-display); font-style:italic; font-size:1.3rem; color: var(--champ-deep); display:block; margin-bottom:.85rem; }
.value-row .value h3 { margin-bottom:.55rem; }
.value-row .value p { font-size:.94rem; color: var(--muted); margin:0; }

.process-row { display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px,4vw,48px); position:relative; }
.process-row::before {
  content:""; position:absolute; top:22px; left:calc(100%/6); right:calc(100%/6); height:1px;
  background: repeating-linear-gradient(90deg, var(--champ-soft) 0 8px, transparent 8px 16px);
}
.process-step { position:relative; text-align:center; }
.process-step .p-num {
  width:44px; height:44px; margin:0 auto 1.15rem; border-radius:50%; background: var(--paper);
  border:1px solid var(--champ-soft); display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-style:italic; color: var(--champ-deep); font-size:1.1rem; position:relative; z-index:1;
}
.process-step h3 { margin-bottom:.45rem; font-size:1.12rem; }
.process-step p { font-size:.92rem; color: var(--muted); max-width:280px; margin:0 auto; }

/* about-page career timeline */
.tl-row { padding-block: 1.1rem; border-bottom: 1px solid var(--line-soft); }
.tl-row.tl-last { border-bottom: none; }
.tl-desc { margin: .3rem 0 0; font-size: .92rem; }

/* contact aside / timeline rows */
.contact-info { display:grid; gap:1.3rem; }
.info-item { display:flex; gap:1rem; align-items:flex-start; }
.info-item .ic { width:46px; height:46px; border-radius:13px; background: var(--paper-2); display:grid; place-items:center; color: var(--champ-deep); flex-shrink:0; }
.info-item .ic svg { width:22px; height:22px; }
.info-item .t { font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); margin-bottom:.15rem; }
.info-item .v { font-size:1.01rem; color: var(--ink); font-weight:550; }
.info-item a.v:hover { color: var(--rose); }

/* =============================================================
   20. JOURNEY (about page)
   ============================================================= */
.journey { position:relative; background: var(--plum); color:#fff; overflow:hidden; padding-block: clamp(48px,5.6vw,86px); }
.journey::before {
  content:""; position:absolute; z-index:0; top:-38%; right:-14%; width:60vw; height:60vw;
  max-width:700px; max-height:700px; border-radius:50%;
  background: radial-gradient(circle, rgba(201,162,39,.2), transparent 64%); pointer-events:none;
}
.journey .container { position:relative; z-index:1; }
.j-grid { display:grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(28px,4vw,64px); align-items:center; }

.j-media { position:relative; padding-bottom: 54px; padding-right: 34px; }
.j-shot { position:relative; margin:0; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); }
.j-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.j-shot figcaption {
  position:absolute; left:0; bottom:0; right:0; padding:.8rem .95rem .75rem;
  background: linear-gradient(to top, rgba(16,4,10,.92), transparent);
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color: var(--champ-lite);
}
.j-then { aspect-ratio: 534/470; }
.j-then img { object-position: center 40%; }
.j-now {
  position:absolute; right:0; bottom:0; width:52%; aspect-ratio: 1/1;
  border:5px solid var(--plum); border-radius: calc(var(--radius-lg) - 4px);
}
.j-now img { object-position: center 22%; }

.j-copy .eyebrow { color: var(--champ-lite); margin-bottom:1rem; }
.j-quote {
  font-family: var(--f-display); font-style:italic; font-weight:500; color:#fff;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem); line-height:1.34; margin:0 0 clamp(22px,2.6vw,32px);
  max-width: 24ch;
}
.j-quote em { font-style:italic; color: var(--champ-lite); }

.j-rail { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.j-rail li { position:relative; padding: 0 0 1.05rem 1.75rem; }
.j-rail li:last-child { padding-bottom:0; }
.j-rail li::before { content:""; position:absolute; left:0; top:.42rem; width:9px; height:9px; border-radius:50%; background: var(--champ-lite); box-shadow: 0 0 0 4px rgba(228,200,108,.16); }
.j-rail li::after  { content:""; position:absolute; left:4px; top:1.05rem; bottom:-.1rem; width:1px; background: rgba(255,255,255,.2); }
.j-rail li:last-child::after { display:none; }
.j-rail b { display:block; font-family: var(--f-text); font-size:.93rem; font-weight:600; color:#fff; }
.j-rail span { display:block; font-size:.85rem; line-height:1.5; color: rgba(255,255,255,.62); margin-top:.15rem; }

/* =============================================================
   21. FAQ
   ============================================================= */
.faq { display:grid; gap:0; border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary {
  list-style:none; cursor:pointer; position:relative;
  padding: 1.1rem 2.6rem 1.1rem 0;
  font-family: var(--f-display); font-size: clamp(1.05rem,1.9vw,1.25rem);
  color: var(--ink); line-height:1.35; transition: color .25s;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color: var(--rose); }
.faq-item summary::after, .faq-item summary::before {
  content:""; position:absolute; right:6px; top:50%; background: var(--champ-deep);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq-item summary::before { width:15px; height:1.5px; margin-top:-.75px; }
.faq-item summary::after  { width:1.5px; height:15px; margin-top:-7.5px; margin-right:6.75px; }
.faq-item[open] summary::after { transform: rotate(90deg); opacity:0; }
.faq-item p { margin: 0 0 1.25rem; font-size:.97rem; line-height:1.65; color: var(--ink-soft); max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] p { animation: faqIn .35s var(--ease); }
  @keyframes faqIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }
}

/* =============================================================
   22. FORMS
   ============================================================= */
.form-wrap { background: var(--white); border:1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(24px,3.4vw,44px); box-shadow: var(--shadow-md); }
.field { margin-bottom:1.25rem; }
.field label { display:block; font-size:.8rem; font-weight:600; letter-spacing:.03em; color: var(--ink); margin-bottom:.45rem; }
.field label .req { color: var(--rose); }
.field input, .field select, .field textarea {
  width:100%; padding:.88rem 1.05rem; font-family: var(--f-text); font-size:1rem; color: var(--ink);
  background: var(--paper); border:1px solid var(--line); border-radius: 12px;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color: var(--champ); background:#fff; box-shadow: 0 0 0 4px rgba(201,162,39,.15);
}
.field textarea { resize: vertical; min-height:130px; }
.field .helper { font-size:.78rem; color: var(--muted); margin-top:.4rem; }
.form-note { font-size:.8rem; color: var(--muted); margin-top:.4rem; }
.field-row { display:grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

.captcha-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.captcha-q {
  display:inline-flex; align-items:center; min-height:48px; padding:0 1rem;
  background: var(--paper-2); border:1px dashed var(--champ-soft); border-radius:12px;
  font-family: var(--f-display); font-size:1.15rem; color: var(--ink);
  letter-spacing:.06em; user-select:none; white-space:nowrap;
}
.captcha-refresh {
  width:40px; height:40px; flex-shrink:0; border:1px solid var(--line); border-radius:10px;
  background: var(--white); color: var(--muted); display:grid; place-items:center;
  transition: color .25s, border-color .25s;
}
.captcha-refresh svg { width:17px; height:17px; transition: transform .35s var(--ease); }
.captcha-refresh:hover { color: var(--champ-deep); border-color: var(--champ-soft); }
.captcha-refresh:active svg { transform: rotate(-180deg); }
.captcha-row input { flex:1 1 130px; width:auto; min-width:110px; }
.captcha-field.invalid input { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(180,40,92,.12); }
.captcha-error { color: var(--rose); font-weight:500; }
.form-success {
  display:none; align-items:center; gap:.7rem; padding:1rem 1.2rem;
  background: rgba(201,162,39,.12); border:1px solid var(--champ-soft); border-radius:12px;
  color: var(--ink); font-size:.94rem; margin-bottom:1.4rem;
}
.form-success.show { display:flex; }
.form-success svg { width:22px; height:22px; color: var(--champ-deep); flex-shrink:0; }

/* =============================================================
   23. FOOTER
   ============================================================= */
.site-footer { background: var(--plum-2); color: rgba(255,255,255,.75); padding-block: clamp(50px,6vw,80px) 30px; }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(28px,4vw,52px); }
.site-footer .brand .name { color:#fff; }
.site-footer .brand .tag { color: var(--champ-lite); }
.site-footer p { color: rgba(255,255,255,.6); font-size:.9rem; }
.footer-col h4 { font-family: var(--f-text); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color: rgba(255,255,255,.48); margin-bottom:1.05rem; font-weight:600; }
.footer-col ul { list-style:none; padding:0; margin:0; display:grid; gap:.65rem; }
.footer-col a { font-size:.9rem; color: rgba(255,255,255,.72); transition: color .25s; }
.footer-col a:hover { color: var(--champ-lite); }
.social-row { display:flex; gap:.65rem; margin-top:1.15rem; }
.social-row a { width:40px; height:40px; border-radius:50%; border:1px solid var(--navy-line); display:grid; place-items:center; color:#fff; transition: background .3s, border-color .3s, transform .3s, color .3s; }
.social-row a svg { width:18px; height:18px; }
.social-row a:hover { background: var(--champ); border-color: var(--champ); color: var(--ink); transform: translateY(-3px); }
.footer-bottom {
  border-top:1px solid var(--navy-line); margin-top: clamp(34px,5vw,54px); padding-top:22px;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.8rem; color: rgba(255,255,255,.5);
}

/* whatsapp float */
.wa-float {
  position:fixed; right:20px; bottom:20px; z-index:80; width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow: 0 12px 30px -8px rgba(37,211,102,.55); transition: transform .3s var(--ease);
}
.wa-float:hover { transform: scale(1.07) translateY(-2px); }
.wa-float svg { width:29px; height:29px; color:#fff; }

/* =============================================================
   24. MOTION
   Reveals are vertical only. A horizontal translate on a full-width
   block pushes the document wider than the viewport, which on phones
   widens the fixed header and shoves the nav CTA off-screen.
   ============================================================= */
[data-reveal] { opacity:0; transform: translate3d(0,24px,0); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal="fade"]  { transform:none; }
[data-reveal="left"]  { transform: translate3d(0,24px,0); }
[data-reveal="right"] { transform: translate3d(0,24px,0); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal].in { opacity:1; transform:none; }
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1 !important; transform:none !important; transition:none; }
  .course-media img, .gallery img, .room img { transition:none; }
  .hero-fb .hero-bg img { animation:none; }
  .line-inner { transition:none; transform:none; }
  .quote-slide { transition:none; }
}

/* anchor jumps shouldn't land under the fixed header */
[id] { scroll-margin-top: 86px; }

/* =============================================================
   25. RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid.cols-4 { grid-template-columns: repeat(2,1fr); }
  .nav-links { gap: 1.4rem; }
}

/* ---- tablet & below: nav collapses ---- */
@media (max-width: 900px) {
  .nav-links { display:none; }
  .nav-toggle { display:flex; }
  .nav { gap:.7rem; }
  .site-header { padding-block: 12px; }
  .site-header.scrolled { padding-block: 10px; }
  .nav-cta { gap:.45rem; }
  .nav-cta .btn.primary { padding:.6rem 1rem; font-size:.8rem; }
  .nav-cta .btn .lbl-full { display:none; }
  .nav-cta .btn .lbl-short { display:inline; }
  .brand .name { font-size:1.1rem; }
  .brand .tag { font-size:.48rem; letter-spacing:.18em; }

  /* hero */
  .hero-split { padding-top: 84px; padding-bottom: clamp(34px,6vw,52px); }
  .hs-grid { grid-template-columns: 1fr; gap: 22px; }
  .hs-portrait { order:-1; max-width: 190px; }
  .hs-frame { border-radius: 130px 130px 18px 18px; }
  .hs-ring { inset:-10px -10px 15px -10px; border-radius: 138px 138px 18px 18px; }
  .hs-copy { max-width:100%; text-align:center; }
  .hero-chip { margin-bottom:.9rem; font-size:.68rem; padding:.36rem .8rem .36rem .62rem; }
  .hs-copy .eyebrow { justify-content:center; margin-bottom:.7rem; font-size:.68rem; }
  .hs-copy h1 { font-size: clamp(2.05rem, 8.2vw, 2.7rem); margin-bottom:.7rem; }
  .hs-copy .lead { font-size:1.01rem; line-height:1.5; margin-inline:auto; max-width:34ch; }
  .hs-copy .hero-actions { margin-top: 20px; flex-direction:column; align-items:center; gap:.8rem; }
  .hs-copy .hero-actions .btn.gold { width:auto; }
  /* the secondary action becomes a quiet link so the proof strip clears the fold */
  .hs-copy .hero-actions .btn.ghost {
    background:none; border:none; padding:0; font-size:.9rem; font-weight:550;
    color: var(--ink-soft); text-decoration:underline; text-underline-offset:5px;
    text-decoration-color: var(--champ);
  }
  .hs-copy .hero-actions .btn.ghost:hover { transform:none; }
  .hs-creds { margin-top:20px; padding-top:16px; justify-content:center; gap:.45rem 1rem; }
  .hs-creds span { font-size:.64rem; letter-spacing:.07em; }

  .hero-fb { height:auto; min-height:100svh; }
  .hero-fb.short { height:auto; min-height:58svh; max-height:none; }
  .hero-fb .hero-content { justify-content:flex-end; padding-top:112px; padding-bottom: 60px; }
  .hero-fb .hero-copy, .hero-fb .hero-copy.align-right { margin-inline:0; max-width:100%; }
  .hero-fb .hero-scrim.right, .hero-fb .hero-scrim.left { background: var(--scrim-b); }

  /* structure */
  .split { grid-template-columns: 1fr; gap: 26px; }
  .split.reverse .split-media { order:0; }
  .split-media { max-width: 268px; margin-inline: auto; width:100%; }
  .media-frame { aspect-ratio: 1/1; }
  .media-accent { inset: 12px -12px -12px 12px; }

  .stats-grid { grid-template-columns: repeat(2,1fr); gap: 26px 18px; }
  .stat .num { font-size: clamp(2.1rem,9vw,2.7rem); }
  .stat .lbl { font-size:.68rem; margin-top:.4rem; letter-spacing:.05em; }

  .grid.cols-3 { grid-template-columns: repeat(2,1fr); }

  .pillar { grid-template-columns: 1fr; min-height:0; }
  .pillar-media, .pillar.reverse .pillar-media { order:1; aspect-ratio: 16/11; position:relative; }
  .pillar-media img { position:absolute; transform:none !important; transition:none; }
  .pillar-copy, .pillar.reverse .pillar-copy { order:2; padding: 30px var(--gutter) 36px; }
  .pillar-copy h2 { font-size: clamp(1.55rem,5.6vw,2rem); margin-bottom:.65rem; }
  .pillar-copy .lead { font-size:1rem; line-height:1.55; }
  .pillar-copy .feature-list { margin-top:1.1rem; gap:.7rem; }
  .pillar-copy .feature-list li { font-size:.92rem; }
  .pillar-cta { margin-top:1.4rem !important; }

  .value-row { grid-template-columns: 1fr; gap:26px; }
  .process-row { grid-template-columns: 1fr; gap:34px; }
  .process-row::before { display:none; }

  .page-hero { padding-top: 92px; padding-bottom: clamp(28px,5vw,44px); }
  .page-hero h1 { font-size: clamp(2.05rem,8vw,2.7rem) !important; }
  .page-hero .lead { font-size:1.01rem; }
  .pill-row { gap:.4rem; margin-top:1.1rem; }
  .pill { font-size:.73rem; padding:.36rem .75rem; }

  .quote-stage { min-height: 258px; }
  .tsection .section-head { margin-bottom: 20px; }
  .cta-actions { margin-top:1.5rem; }

  .site-footer { padding-block: 44px 24px; }
  .footer-grid { gap: 28px; }
  .footer-bottom { margin-top:26px; padding-top:18px; }
  .logos { padding-block: 18px; }
  .logos .kicker { margin-bottom:.7rem; font-size:.6rem; }
  .marquee-track .m-item { font-size:1.05rem; }
  .marquee-track { gap: 22px; }

  .j-grid { grid-template-columns: 1fr; gap: 24px; }

  /* then/now pair on phones: two equal columns, and the caption sits BELOW
     each photo. Previously .j-then kept its 534/470 aspect-ratio while the
     grid row stretched, so it computed a width wider than its own column and
     slid underneath .j-now — and the overlay captions were wider than the
     137px frames they sat in, so the text clipped mid-word. */
  .j-media {
    padding: 0; display:grid; grid-template-columns: 1fr 1fr;
    gap: 10px; align-items:start;
  }
  .j-shot,
  .j-then,
  .j-now {
    position:relative; min-width:0; width:auto;
    right:auto; bottom:auto; border:none;
    aspect-ratio:auto; overflow:visible; box-shadow:none; border-radius:0;
  }
  .j-shot img {
    width:100%; height:auto; aspect-ratio: 3/4; object-fit:cover;
    border-radius: var(--radius); box-shadow: var(--shadow-md);
  }
  .j-shot figcaption {
    position:static; background:none; padding:.6rem 0 0;
    font-size:.62rem; letter-spacing:.1em; line-height:1.35;
    color: var(--champ-lite); overflow-wrap:anywhere;
  }
  .j-quote { font-size: clamp(1.28rem,5.6vw,1.6rem); max-width:100%; margin-bottom:20px; }
  .j-rail li { padding-bottom:.85rem; }

  [id] { scroll-margin-top: 70px; }
}

/* ---- phones ---- */
@media (max-width: 700px) {
  .rooms { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(176px, auto); gap:8px; }
  .room.feature { grid-column: 1 / -1; grid-row: auto; min-height: 230px; }
  .room-body { padding: 14px 13px; }
  .room-go { opacity:1; transform:none; font-size:.7rem; margin-top:.6rem; }
  .room:not(.feature) .room-go { display:none; }
  .room:not(.feature) .room-num { font-size:.78rem; margin-bottom:.15rem; }
  .room:not(.feature) .room-body h3 { font-size:1rem; letter-spacing:-.005em; }
  .room:not(.feature) .room-meta { font-size:.71rem; line-height:1.35; margin-top:.32rem; }

  /* gallery becomes a swipeable strip instead of five stacked rows */
  .gallery.editorial {
    display:flex; gap:10px; overflow-x:auto; scroll-snap-type: x mandatory;
    padding-bottom:12px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch; scrollbar-width:none;
  }
  .gallery.editorial::-webkit-scrollbar { display:none; }
  .gallery.editorial figure,
  .gallery.editorial figure.tall,
  .gallery.editorial figure.big { flex: 0 0 68vw; aspect-ratio: 4/5; scroll-snap-align:center; }
  .gallery.editorial figcaption { opacity:1; transform:none; }
  .swipe-hint { display:block; text-align:center; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); margin:.7rem 0 0; }

  .review-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap:0; }
}

@media (max-width: 560px) {
  body { font-size:16px; }
  .grid.cols-2, .grid.cols-4 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2,1fr); }
  .hero-actions .btn, .cta-actions .btn { flex:1 1 auto; }
  .footer-bottom { flex-direction:column; gap:.4rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col:first-child { grid-column: 1 / -1; }

  /* twelve courses stacked one-per-screen was an endless scroll;
     two-up keeps the catalogue scannable in a couple of flicks */
  .grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .course-body { padding: .85rem .9rem 1rem; }
  .course-body h3 { font-size: .98rem; line-height:1.2; }
  .course-body p {
    font-size: .79rem; line-height:1.45; margin-bottom:.75rem;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  }
  .course-foot { padding-top:.65rem; flex-direction:column; align-items:stretch; gap:.5rem; }
  .price { font-size:.98rem; }
  .course-foot .btn { padding:.58rem 1rem; font-size:.8rem; }
  .course-tag { font-size:.58rem; padding:.26rem .52rem; }
  .course-media.icon-media svg { width:36px; height:36px; }
}

/* ---- small phones ---- */
@media (max-width: 400px) {
  .brand .name { font-size:1rem; }
  .site-header .brand .tag { display:none; }   /* header only — the footer has room */
  .nav-cta .btn.primary { padding:.55rem .85rem; font-size:.76rem; }
  .hs-portrait { max-width: 164px; }
  .hs-copy h1 { font-size: 1.92rem; }
  .wa-float { width:52px; height:52px; right:16px; bottom:16px; }
  .wa-float svg { width:26px; height:26px; }
}

/* the header CTA swaps to a short label on narrow screens */
.btn .lbl-short { display:none; }

/* =============================================================
   26. MOBILE-FIRST DENSITY PASS
   Phones are the primary surface for this site, so the phone
   layout sets its own rhythm here rather than inheriting a
   scaled-down desktop one.
   ============================================================= */
@media (max-width: 700px) {
  :root { --sec-y: 44px; }
  .section-head { margin-bottom: 22px; }
  .feature-list { gap: .75rem; margin-top: 1.25rem; }
  .feature-list li { font-size: .92rem; }
  .feature-list li svg { width: 19px; height: 19px; }

  /* ---- Footer ----
     It rendered 842px tall — more than a full phone screen, on all five
     pages. The descriptive paragraph repeats the brand tagline directly
     above it, so it becomes desktop-only, and "Get in touch" goes full
     width because contact details are the point of a footer on a phone. */
  .site-footer { padding-block: 36px 20px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .footer-col:first-child { grid-column: 1 / -1; }
  .footer-col:first-child > p { display: none; }
  .social-row { margin-top: 1rem; gap: .55rem; }
  .social-row a { width: 38px; height: 38px; }
  .footer-col h4 { margin-bottom: .7rem; font-size: .68rem; letter-spacing: .14em; }
  .footer-col ul { gap: .1rem; }
  /* list links only — .brand is also an <a> here and must stay a flex column */
  .footer-col ul a { font-size: .87rem; display: block; padding-block: .32rem; } /* ~40px tap target */
  .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col:last-child ul { display: flex; flex-wrap: wrap; gap: 0 1.3rem; }
  .footer-bottom { margin-top: 20px; padding-top: 14px; font-size: .72rem; gap: .3rem; }

  /* ---- Interior page heroes ---- */
  .page-hero { padding-top: 86px; padding-bottom: 26px; }
  .split-media { max-width: 236px; }
  .roles { font-size: .97rem; margin-top: .9rem; }

  /* ---- About: career timeline ---- */
  .tl-row { padding-block: .8rem; }
  .info-item { gap: .85rem; }
  .info-item .ic { width: 40px; height: 40px; border-radius: 11px; }
  .info-item .ic svg { width: 19px; height: 19px; }
  .info-item .v { font-size: .96rem; }
  .tl-desc { font-size: .85rem; line-height: 1.5; }

  /* ---- About: values ---- */
  .value-row { gap: 20px; }
  .value-row .value { padding-top: 1.1rem; }
  .value-row .value .v-num { margin-bottom: .5rem; }
  .value-row .value p { font-size: .9rem; }

  /* ---- Services: the five pillars are the page, so compress them
          rather than remove any ---- */
  .pillar-media, .pillar.reverse .pillar-media { aspect-ratio: 16/10; }
  .pillar-copy, .pillar.reverse .pillar-copy { padding: 24px var(--gutter) 30px; }
  .pillar-num { margin-bottom: .7rem; }
  .pillar-copy h2 { font-size: clamp(1.45rem, 5.2vw, 1.8rem); margin-bottom: .55rem; }
  .pillar-copy .lead { font-size: .96rem; line-height: 1.5; }
  .pillar-copy .feature-list { margin-top: .95rem; gap: .6rem; }
  .pillar-copy .feature-list li { font-size: .88rem; }
  .pillar-cta { margin-top: 1.15rem !important; }

  /* ---- Services: booking process ---- */
  .process-row { gap: 26px; }
  .process-step .p-num { margin-bottom: .8rem; width: 40px; height: 40px; }
  .process-step p { font-size: .89rem; }

  /* ---- Courses ---- */
  .course-body p { -webkit-line-clamp: 2; }
  .review { padding: 16px; gap: .55rem; }
  .review blockquote { font-size: .93rem; line-height: 1.55; }
  .faq-item summary { padding: .9rem 2.4rem .9rem 0; }
  .faq-item p { margin-bottom: 1rem; font-size: .91rem; }

  /* ---- Contact ---- */
  .form-wrap { padding: 20px 18px 24px; }
  .field { margin-bottom: 1.05rem; }
  .contact-info { gap: 1.05rem; }
}