/* ============================================================
   BALMAK REALTORS — Defining Luxury Living
   Design system. Dark-first; the brand's native world.
   Palette is client-mandated and exact. Do not substitute.
   ============================================================ */

:root{
  /* Brand ink — velvety dark teal, velvety burgundy, matte pastel blue.
     Verified contrast: pastel blue on teal 7.4:1, cream on burgundy 10.6:1,
     burgundy on cream 10.6:1. Every pairing below clears WCAG AA for body. */
  --teal-900:#0E3532;      /* velvety dark teal — dominant ground */
  --teal-800:#123F3B;      /* raised surfaces */
  --teal-600:#17514C;      /* glass panel tint */
  --burgundy:#5E2434;      /* velvety burgundy — primary action, bands */
  --burgundy-hi:#7E3348;   /* burgundy highlight / hover */
  --burgundy-deep:#3E1723; /* deepest burgundy — alternating section band */
  --blue:#AFC4D4;          /* matte pastel blue — accent text on dark */
  --blue-hi:#CBDAE5;       /* pastel blue highlight */
  --white:#FFFFFF;
  --cream:#F7F4EF;         /* light ground / body text on dark */
  --charcoal:#121212;
  --graphite:#2A2A2A;

  /* Semantic — dark world (default) */
  --ground:var(--teal-900);
  --ground-alt:var(--burgundy-deep);
  --text:var(--cream);
  --text-dim:rgba(247,244,239,.74);
  --text-faint:rgba(247,244,239,.54);
  --accent-text:var(--blue);
  --accent-strong:var(--blue-hi);
  --rule:rgba(175,196,212,.26);
  --rule-soft:rgba(175,196,212,.14);
  --logo-accent:var(--blue);

  /* Glass recipes */
  --glass-fill:rgba(23,81,76,.36);
  --glass-fill-raised:rgba(23,81,76,.50);
  --glass-border:rgba(175,196,212,.26);
  --glass-border-hot:rgba(203,218,229,.46);
  --glass-shadow:0 24px 60px -28px rgba(0,0,0,.66);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.12);
  --blur-panel:22px; --blur-card:16px; --blur-nav:28px; --glass-sat:135%;

  /* Type. Weights lifted a full step across the board — the previous 300s
     read as faint on real screens, especially light-on-dark. */
  --font-display:"Cormorant Garamond","Times New Roman",serif;
  --font-ui:"Jost","Futura","Century Gothic",system-ui,-apple-system,sans-serif;
  --w-body:400;
  --w-label:500;
  --w-display:500;
  --track-label:.22em;
  --track-mark:.30em;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-micro:190ms; --dur-panel:420ms; --dur-reveal:760ms;

  --r-card:5px; --r-panel:6px; --r-pill:999px;
  --shell:1280px;
}

/* Light world. Matte pastel blue is far too pale to carry text on cream
   (1.5:1), so on light grounds the accent role passes to velvety burgundy
   at 10.6:1. Pastel blue stays decorative — rules, edges, glass borders. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ground:var(--cream);
    --ground-alt:#EDE6E4;
    --text:var(--charcoal);
    --text-dim:rgba(18,18,18,.74);
    --text-faint:rgba(18,18,18,.54);
    --accent-text:var(--burgundy);
    --accent-strong:var(--burgundy);
    --logo-accent:var(--burgundy);
    --rule:rgba(94,36,52,.22);
    --rule-soft:rgba(94,36,52,.12);
    --glass-fill:rgba(255,255,255,.74);
    --glass-fill-raised:rgba(255,255,255,.93);
    --glass-border:rgba(94,36,52,.18);
    --glass-border-hot:rgba(94,36,52,.38);
    --glass-shadow:0 22px 50px -32px rgba(14,53,50,.30);
    --glass-inner:inset 0 1px 0 rgba(255,255,255,.7);
  }
}
:root[data-theme="light"]{
  --ground:var(--cream); --ground-alt:#EDE6E4;
  --text:var(--charcoal); --text-dim:rgba(18,18,18,.74); --text-faint:rgba(18,18,18,.54);
  --accent-text:var(--burgundy); --accent-strong:var(--burgundy); --logo-accent:var(--burgundy);
  --rule:rgba(94,36,52,.22); --rule-soft:rgba(94,36,52,.12);
  --glass-fill:rgba(255,255,255,.74); --glass-fill-raised:rgba(255,255,255,.93);
  --glass-border:rgba(94,36,52,.18); --glass-border-hot:rgba(94,36,52,.38);
  --glass-shadow:0 22px 50px -32px rgba(14,53,50,.30);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.7);
}

/* ---------------------------------------------------------- base ---- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip rather than hidden: `hidden` on body propagates to the
   viewport and makes it a scroll container, which then sizes position:fixed
   elements to the SCROLLED width, not the visible one. That is what silently
   drags a fixed header wider than the phone it is on. `clip` does neither. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--ground);color:var(--text);
  font-family:var(--font-ui);font-weight:var(--w-body);font-size:16.5px;line-height:1.75;
  letter-spacing:.003em;
  /* grayscale smoothing keeps light-on-dark from thinning out on Mac */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:clip;max-width:100%;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--w-display);margin:0;
  text-wrap:balance;letter-spacing:-.012em}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.shell{max-width:var(--shell);margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:var(--teal-800);color:var(--cream);padding:12px 18px;border-radius:3px}

.eyebrow{
  font-size:11px;letter-spacing:var(--track-mark);text-transform:uppercase;
  color:var(--accent-text);font-weight:var(--w-label);margin:0;
}
.lede{font-size:17.5px;color:var(--text-dim);line-height:1.7;max-width:52ch;font-weight:var(--w-body)}

/* --------------------------------------------------------- header ---- */
/* The menu bar is velvety burgundy in both themes and over photography — one
   appearance everywhere, and cream on burgundy is 10.6:1, so the navigation
   stays legible whatever the hero image happens to be doing behind it. */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:80;
  background:linear-gradient(180deg,rgba(94,36,52,.90),rgba(62,23,35,.86));
  backdrop-filter:blur(var(--blur-nav)) saturate(140%);
  -webkit-backdrop-filter:blur(var(--blur-nav)) saturate(140%);
  border-bottom:1px solid rgba(203,218,229,.14);
  transition:background var(--dur-panel) var(--ease),border-color var(--dur-panel) var(--ease);
}
.hdr.stuck{
  background:linear-gradient(180deg,var(--burgundy),var(--burgundy-deep));
  border-bottom-color:rgba(203,218,229,.20);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.6);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr{background:var(--burgundy)}
}
.hdr-in{display:flex;align-items:center;gap:28px;padding:14px 40px;max-width:var(--shell);margin:0 auto;
  transition:padding var(--dur-panel) var(--ease)}
.hdr.stuck .hdr-in{padding-top:9px;padding-bottom:9px}
/* ---- The mark, in glass -------------------------------------------------
   The original silver mark, un-matted off its navy card, floated on a
   frosted pane. The sheen is a slow diagonal highlight sweeping the glass,
   not the artwork, so the logo itself is never distorted. */
.brand{
  width:128px;flex:none;position:relative;display:block;
  padding:10px 14px;border-radius:14px;
  /* The pane carries its own deep-teal tint rather than borrowing the page,
     so the silver mark reads identically on the dark theme, the light theme
     and over photography. One logo, one appearance, everywhere. */
  /* Recessed into the burgundy bar rather than sitting on it as a teal tile:
     same colour family, a shade deeper, so the silver mark still reads. */
  background:
    linear-gradient(135deg,rgba(255,255,255,.14),rgba(203,218,229,.04) 46%,rgba(255,255,255,.02)),
    linear-gradient(160deg,rgba(62,23,35,.72),rgba(38,14,22,.86));
  border:1px solid rgba(203,218,229,.24);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  overflow:hidden;isolation:isolate;
  transition:width var(--dur-panel) var(--ease),padding var(--dur-panel) var(--ease),
             border-color var(--dur-panel) var(--ease),transform var(--dur-panel) var(--ease),
             box-shadow var(--dur-panel) var(--ease);
  animation:markIn 900ms var(--ease-out) both;
}
/* Compact state swaps the stacked lockup for the crest: a wordmark scaled to
   fit a compressed bar is unreadable, and an unreadable wordmark is worse
   than none. */
.hdr.stuck .brand{width:52px;padding:7px 9px;border-radius:11px}
.brand img{
  width:100%;height:auto;position:relative;z-index:2;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.42));
  animation:markFloat 7s ease-in-out infinite;
}
.brand .crest{display:none}
.hdr.stuck .brand .full{display:none}
.hdr.stuck .brand .crest{display:block}
/* the travelling sheen */
.brand::before{
  content:"";position:absolute;z-index:3;top:-60%;left:-70%;width:44%;height:220%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42) 46%,rgba(255,255,255,.62) 52%,transparent);
  transform:rotate(14deg);
  animation:markSheen 6.5s ease-in-out infinite;
  pointer-events:none;
}
/* a soft refraction bloom under the glass */
.brand::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 22% 18%,rgba(203,218,229,.22),transparent 62%);
}
.brand:hover{transform:translateY(-2px);border-color:rgba(203,218,229,.48);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.3)}

@keyframes markIn{
  from{opacity:0;transform:translateY(-9px) scale(.965);filter:blur(5px)}
  to  {opacity:1;transform:none;filter:blur(0)}
}
@keyframes markFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-2.5px)}
}
@keyframes markSheen{
  0%,62%{left:-70%}
  100%  {left:135%}
}
/* The footer mark sits on deep teal already, so it drops the pane entirely. */
.ftr .brand{
  background:none;border:0;box-shadow:none;padding:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;animation:none;
}
.ftr .brand::before,.ftr .brand::after{display:none}
.ftr .brand img{animation:none}

@media (prefers-reduced-motion:reduce){
  .brand,.brand img{animation:none}
  .brand::before{display:none}
}

/* Logo colour is themed, never hardcoded. The header rides over photography
   at the top of the page and over a solid themed ground once stuck. */
/* A CSS `fill` beats an inline fill="none" presentation attribute, so the
   stroked shapes must be told to stay unfilled explicitly or the monogram
   floods solid. Only the REALTORS text takes a fill. */
.lg-ink{fill:currentColor}
.lg-accent{stroke:var(--logo-accent)}
path.lg-accent,g.lg-accent{fill:none}
text.lg-accent{fill:var(--logo-accent);stroke:none}

/* Only pages that actually carry a hero photograph put the header over an
   image. Elsewhere the header starts on the themed ground, where matte
   pastel blue would be 1.5:1 on cream. */
/* The bar is burgundy on every page now, hero or not, so the mark takes its
   dark-ground colours throughout rather than switching on scroll. */
.hdr .lg-ink{fill:var(--cream)}
.hdr .lg-accent{stroke:var(--blue)}
.hdr text.lg-accent{fill:var(--blue)}

/* The footer ground is always deep teal regardless of theme. */
.ftr .lg-ink{fill:var(--cream)}
.ftr .lg-accent{stroke:var(--blue)}
.ftr text.lg-accent{fill:var(--blue)}

/* Heavier and slightly larger than the rest of the interface: the menu is the
   one place on the page a reader scans rather than reads. Cream on burgundy
   is 10.6:1, so it holds on every page and over any hero image. */
.nav{display:flex;gap:28px;margin-left:6px}
.nav a{
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(247,244,239,.88);
  padding:8px 0;white-space:nowrap;border-bottom:1.5px solid transparent;
  transition:color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease);
}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"]{
  color:var(--cream);border-bottom-color:var(--blue-hi);
}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:12px}

.burger{display:none;background:transparent;border:1px solid rgba(203,218,229,.42);
  border-radius:3px;padding:11px 13px;cursor:pointer;line-height:0}
.burger span{display:block;width:16px;height:1.5px;background:var(--cream);margin:3.5px 0;
  transition:transform var(--dur-micro) var(--ease),opacity var(--dur-micro) var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

.mobnav{display:none}
@media (max-width:1040px){
  .mobnav{
    display:block;position:fixed;inset:0;z-index:79;background:var(--ground);
    padding:104px 28px 40px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--dur-panel) var(--ease),transform var(--dur-panel) var(--ease),visibility var(--dur-panel);
  }
  .mobnav.open{opacity:1;visibility:visible;transform:none}
  .mobnav a{display:block;font-family:var(--font-display);font-size:30px;padding:13px 0;
    border-bottom:1px solid var(--rule-soft);color:var(--text)}
  .mobnav .sub{font-size:11px;letter-spacing:var(--track-label);text-transform:uppercase;
    font-family:var(--font-ui);color:var(--accent-text);margin:26px 0 8px}
}

/* -------------------------------------------------------- buttons ---- */
.b{
  display:inline-block;font-family:var(--font-ui);font-size:11.5px;font-weight:var(--w-label);
  letter-spacing:.17em;text-transform:uppercase;cursor:pointer;text-align:center;
  padding:15px 28px;border-radius:3px;border:1px solid transparent;
  transition:transform var(--dur-micro) var(--ease),background var(--dur-micro) var(--ease),
             border-color var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease);
}
/* Velvety burgundy carries cream at 10.6:1 in both themes, so the primary
   action needs no light/dark variant at all. */
.b-pri{
  background:linear-gradient(135deg,var(--burgundy-hi),var(--burgundy) 56%,var(--burgundy-deep));
  color:var(--cream);font-weight:600;box-shadow:0 12px 28px -14px rgba(94,36,52,.8);
}
.b-pri:hover{background:linear-gradient(135deg,#8E3B53,var(--burgundy-hi) 56%,var(--burgundy));
  transform:translateY(-1px);box-shadow:0 18px 38px -14px rgba(126,51,72,.85)}
.b-sec{
  background:var(--glass-fill);border-color:var(--glass-border-hot);color:var(--text);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.b-sec:hover{border-color:var(--accent-strong);background:var(--glass-fill-raised);transform:translateY(-1px)}
.b-ghost{background:transparent;color:var(--accent-text);padding:14px 2px;border-radius:0;
  border-bottom:1px solid var(--rule)}
.b-ghost:hover{border-bottom-color:var(--accent-strong)}

/* ----------------------------------------------------------- hero ---- */
.hero{--hero-band:max(300px,46svh);
  position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:150px 0 96px}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;
  animation:drift 26s var(--ease) infinite alternate}
@keyframes drift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.4%,-1.6%,0)}}
/* Text sits bottom-left, so the scrim is weighted left and down. The
   horizontal pass is what actually buys the headline its contrast; the
   vertical pass seats the header and the fold. */
.hero-scrim{position:absolute;inset:0;z-index:1;
  /* Not a screen any more — the plate carries legibility. This is only a
     short fade at the very bottom so the photograph does not collide with
     the filter panel that follows it. Measured at 0.18 it is below the
     threshold where it reads as dimming. */
  background:linear-gradient(180deg,transparent 78%,rgba(9,26,25,.18) 100%);
}

/* ---- the plate the hero copy sits on ----
   Frosted in CREAM, not in ink. A dark plate on this photograph reads as a
   slab and hides the room; a light one sits with the marble and the ceiling
   and barely registers as an object, so the salon still reads bright. It also
   inverts the type: charcoal on frost measures 10:1 at worst, where cream on
   the bare photograph measured 1.01:1. */
.hero-plate,.film-plate{
  max-width:600px;padding:36px 38px 30px;
  border-radius:var(--r-card);
  border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(152deg,rgba(250,248,244,.80) 0%,rgba(243,238,231,.72) 100%);
  backdrop-filter:blur(22px) saturate(115%);
  -webkit-backdrop-filter:blur(22px) saturate(115%);
  box-shadow:0 30px 70px -44px rgba(38,20,26,.55);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .hero-plate,.film-plate{background:linear-gradient(152deg,rgba(250,248,244,.95) 0%,rgba(243,238,231,.93) 100%)}
}
/* The copy inverts to ink on the frost. These carry the .hero prefix because
   the generic cream-on-photo rules are declared further down the file and
   would otherwise win on source order at equal specificity. */
.hero .hero-plate .eyebrow{color:var(--burgundy)}
.hero .hero-plate h1{color:var(--burgundy-deep)}
.hero .hero-plate h1 em{color:var(--burgundy);font-style:italic}
.hero .hero-plate .lede{color:var(--graphite)}
.hero .hero-plate .trust{border-top-color:rgba(62,23,35,.22)}
.hero .hero-plate .trust .k{color:var(--burgundy)}
.hero .hero-plate .trust .v{color:var(--graphite)}
/* b-sec is drawn for dark grounds; on the frost it needs ink */
.hero .hero-plate .b-sec{
  color:var(--burgundy-deep);border-color:rgba(62,23,35,.40);background:rgba(255,255,255,.30);
}
.hero .hero-plate .b-sec:hover,.hero .hero-plate .b-sec:focus-visible{
  border-color:var(--burgundy);background:rgba(255,255,255,.62);color:var(--burgundy-deep);
}
@media (max-width:880px){
  .hero-plate,.film-plate{padding:26px 22px 22px;max-width:none}
  /* On a phone the copy is taller than the screen, so an overlay hero hides
     the room almost completely — the opposite of the point. Give the
     photograph its own band and let the plate sit under it, overlapping just
     enough to stay one composition. No overlay on mobile at all. */
  .hero{min-height:0;display:block;padding:0 0 30px;align-items:stretch}
  .hero-media{position:relative;inset:auto;width:100%;height:var(--hero-band);
    overflow:hidden}
  .hero-media img{animation:none}          /* drift crops the band badly */
  .hero-scrim{display:none}
  .hero-in{margin-top:-38px;padding:0 16px}
  .hero-credit{top:calc(var(--hero-band) - 46px);bottom:auto;right:16px}
}
.hero-in{position:relative;z-index:2;width:100%;color:var(--cream)}
.hero h1{font-size:clamp(38px,6.2vw,82px);line-height:1.03;max-width:15ch;margin-top:20px;color:var(--cream)}
.hero h1 em{font-style:italic;color:var(--blue-hi)}
.hero .lede{margin-top:22px;color:rgba(247,244,239,.78)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
/* Only the credit line still sits out on the bare photograph, so it is the
   one element that keeps a shadow. */
.hero .trust{margin-top:32px}
.hero .trust div{padding:20px 22px 0 0}

/* hero rotating credit line */
/* sits over the bright half of the frame now, so it carries its own shadow */
.hero-credit{
  position:absolute;right:40px;bottom:36px;z-index:2;text-align:right;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,244,239,.92);
  /* a shadow cannot save 10px type on a white marble floor — measured 1.12:1
     against the bare photograph — so it takes a small ground of its own */
  background:rgba(9,26,25,.52);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:8px 14px;border-radius:14px;border:1px solid rgba(203,218,229,.16);
}
.hero-credit b{display:block;font-weight:400;color:var(--blue-hi);letter-spacing:.2em;margin-bottom:3px}

/* --------------------------------------------------------- trust ---- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0;
  border-top:1px solid var(--rule);margin-top:70px}
.trust div{padding:26px 24px 0 0}
.trust .k{font-family:var(--font-display);font-size:34px;line-height:1;color:var(--accent-strong)}
.trust .v{font-size:10px;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--text-faint);margin-top:9px}

/* ------------------------------------------------------- sections ---- */
.sec{padding:104px 0}
.sec-alt{background:var(--ground-alt)}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  margin-bottom:44px;flex-wrap:wrap}
.sec-h h1,.sec-h h2{font-size:clamp(29px,3.8vw,46px);line-height:1.1;margin-top:12px;max-width:19ch}
.sec-h .more{font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--accent-text);
  border-bottom:1px solid var(--rule);padding-bottom:5px;white-space:nowrap;
  transition:border-color var(--dur-micro) var(--ease)}
.sec-h .more:hover{border-bottom-color:var(--accent-strong)}

/* --------------------------------------------------- filter panel ---- */
.filter-wrap{position:relative;z-index:20;margin-top:-92px}
.filter{
  background:var(--glass-fill-raised);
  backdrop-filter:blur(var(--blur-panel)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--blur-panel)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border-hot);border-radius:var(--r-panel);
  box-shadow:var(--glass-shadow),var(--glass-inner);
  padding:24px 26px 26px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .filter{background:color-mix(in srgb,var(--teal-800) 92%,var(--charcoal))}
  :root[data-theme="light"] .filter,
  .filter{background:var(--glass-fill-raised)}
}
.chips{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:18px;
  border-bottom:1px solid var(--rule-soft)}
.chip{
  font-size:10.5px;font-weight:var(--w-body);letter-spacing:.17em;text-transform:uppercase;cursor:pointer;
  background:transparent;border:1px solid var(--glass-border);color:var(--text-dim);
  padding:10px 19px;border-radius:var(--r-pill);
  transition:all 240ms var(--ease);
}
.chip:hover{color:var(--text);border-color:var(--glass-border-hot)}
.chip[aria-pressed="true"]{background:rgba(175,196,212,.20);border-color:var(--blue);color:var(--text);font-weight:400}
:root[data-theme="light"] .chip[aria-pressed="true"],
.chip[aria-pressed="true"]{color:var(--text)}

.fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:end}
.fld label{display:block;font-size:9.5px;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--accent-text);margin-bottom:8px}
.fld select{
  width:100%;font-family:inherit;font-size:14.5px;font-weight:var(--w-body);color:var(--text);
  background:transparent;border:0;border-bottom:1px solid var(--glass-border);
  padding:9px 0;letter-spacing:.02em;cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease);
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 9px) calc(50% + 1px),calc(100% - 4px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.fld select:hover,.fld select:focus{border-bottom-color:var(--accent-strong);outline:none}
.fld select option{background:var(--teal-900);color:var(--cream)}
:root[data-theme="light"] .fld select option{background:#fff;color:var(--charcoal)}
.filter-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:20px;flex-wrap:wrap}
.count{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.count b{color:var(--accent-strong);font-weight:400;font-size:14px}
.reset{background:none;border:0;cursor:pointer;font-size:10px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid transparent;padding:2px 0}
.reset:hover{color:var(--text);border-bottom-color:var(--rule)}

/* ------------------------------------------------- currency strip ---- */
.fx{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:100%}
.fx-lab{font-size:9.5px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-faint)}
/* Nine currencies will not fit one row on a phone. Wrapping is allowed, and
   the joined-pill look is rebuilt per row so a wrap never looks like a bug. */
.fx-set{display:flex;flex-wrap:wrap;gap:1px;border:1px solid var(--glass-border);
  border-radius:var(--r-pill);overflow:hidden;max-width:100%}
.fx-set button{
  font-size:10px;letter-spacing:.1em;cursor:pointer;background:transparent;border:0;
  color:var(--text-faint);padding:8px 11px;min-height:34px;flex:1 0 auto;
  transition:all var(--dur-micro) var(--ease);
}
.fx-set button:hover{color:var(--text)}
.fx-set button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--blue-hi),var(--blue));color:var(--teal-900);font-weight:600;
}
.fx-note{font-size:10.5px;color:var(--text-faint);line-height:1.6;margin-top:10px;max-width:64ch}

/* ---------------------------------------------------------- cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-card);background:var(--glass-fill);
  backdrop-filter:blur(var(--blur-card)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--blur-card)) saturate(var(--glass-sat));
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow),var(--glass-inner);
  transition:transform var(--dur-panel) var(--ease),border-color var(--dur-panel) var(--ease),
             box-shadow var(--dur-panel) var(--ease);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card{background:color-mix(in srgb,var(--teal-800) 90%,var(--charcoal))}
  :root[data-theme="light"] .card{background:#fff}
}
.card:hover,.card:focus-within{
  transform:translateY(-5px);border-color:var(--glass-border-hot);
  box-shadow:0 36px 78px -32px rgba(0,0,0,.72);
}
.card.hide{display:none}
.shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--teal-800)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out)}
.card:hover .shot img{transform:scale(1.045)}
/* Stand-in panel for a development whose imagery we do not yet hold. */
.noimg{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:24px;
  background:linear-gradient(155deg,var(--teal-600),var(--teal-900) 62%,var(--burgundy-deep));
}
.noimg img{width:52px;height:auto;opacity:.92;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.noimg span{font-family:var(--font-display);font-size:25px;color:var(--cream);line-height:1.15}
.noimg em{font-style:normal;font-size:9.5px;letter-spacing:var(--track-label);
  text-transform:uppercase;color:rgba(247,244,239,.62)}
.phero .noimg{min-height:70svh}
.phero .noimg img{width:86px}
.phero .noimg span{font-size:40px}

.tag{
  position:absolute;left:14px;top:14px;font-size:8.5px;letter-spacing:.19em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-pill);background:rgba(14,53,50,.80);color:var(--blue-hi);
  border:1px solid rgba(203,218,229,.36);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.tour-tag{left:auto;right:14px;background:rgba(18,18,18,.72);display:inline-flex;align-items:center;gap:6px}
.tour-tag svg{width:9px;height:9px;fill:var(--blue-hi)}
.card-body{padding:21px 21px 23px;display:flex;flex-direction:column;flex:1}
.card .loc{font-size:9px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-text)}
.card h3{font-size:24px;line-height:1.18;margin-top:7px;font-weight:400}
.card .blurb{font-size:13.5px;color:var(--text-dim);line-height:1.66;margin-top:10px}
.price{font-size:19px;color:var(--accent-strong);margin-top:14px;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;transition:opacity 130ms var(--ease)}
.price small{font-size:11px;color:var(--text-faint);letter-spacing:.06em}
.price.swap{opacity:0}
.facts{display:flex;gap:15px;margin-top:14px;padding-top:14px;border-top:1px solid var(--rule-soft);
  font-size:10.5px;color:var(--text-faint);letter-spacing:.05em;flex-wrap:wrap}
.card-acts{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.card-acts .b{font-size:9.5px;padding:12px 16px;letter-spacing:.15em}
.stretch::after{content:"";position:absolute;inset:0}

.empty{
  grid-column:1/-1;text-align:center;padding:64px 20px;border:1px dashed var(--rule);
  border-radius:var(--r-panel);
}
.empty h3{font-size:26px}
.empty p{color:var(--text-dim);margin-top:10px;font-size:14.5px}

/* --------------------------------------------------- standard trio -- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:0}
.pillar{padding:32px 32px 32px 0;border-top:1px solid var(--rule)}
.pillar .n{font-size:9.5px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-text)}
.pillar h3{font-size:27px;margin-top:13px;line-height:1.2}
.pillar p{margin-top:12px;font-size:14.5px;color:var(--text-dim);line-height:1.72}

/* ------------------------------------------------------ split art --- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split h1,.split h2{font-size:clamp(28px,3.5vw,44px);line-height:1.12;margin-top:12px}
.split p{margin-top:18px;color:var(--text-dim)}
.split-art{border-radius:var(--r-panel);overflow:hidden;border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow)}
.split-art img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}

/* ------------------------------------------------- property detail -- */
.phero{position:relative;min-height:70svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:160px 0 60px}
.phero .hero-media img{animation:none;transform:scale(1.02)}
.phero h1{font-size:clamp(34px,5.4vw,68px);line-height:1.04;color:var(--cream);margin-top:16px}
.phero .sub{color:rgba(247,244,239,.76);margin-top:16px;max-width:56ch;font-size:16.5px}

.pmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;
  border-top:1px solid var(--rule);margin-top:40px}
.pmeta div{padding:22px 22px 0 0}
.pmeta .k{font-size:9.5px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-text)}
.pmeta .v{font-family:var(--font-display);font-size:25px;margin-top:8px;line-height:1.22}

.prose{max-width:70ch}
.prose h3{font-size:27px;margin-top:38px}
.prose h3:first-child{margin-top:0}
.prose p{margin-top:14px;color:var(--text-dim);font-size:15.5px;line-height:1.8}
.prose strong{color:var(--text);font-weight:400}

.units{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:20px;margin-top:8px}
.unit{
  padding:24px 22px;border-radius:var(--r-card);border:1px solid var(--glass-border);
  background:var(--glass-fill);
  backdrop-filter:blur(var(--blur-card));-webkit-backdrop-filter:blur(var(--blur-card));
  transition:border-color var(--dur-panel) var(--ease),transform var(--dur-panel) var(--ease);
}
.unit:hover{border-color:var(--glass-border-hot);transform:translateY(-3px)}
.unit .t{font-size:9.5px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-text)}
.unit h4{font-size:23px;margin-top:10px;font-weight:400;line-height:1.24}
.unit .sz{font-family:var(--font-display);font-size:30px;color:var(--accent-strong);margin-top:12px;line-height:1}
.unit ul{margin:14px 0 0;padding:0;list-style:none}
.unit li{font-size:13px;color:var(--text-dim);padding:5px 0 5px 15px;position:relative;line-height:1.6}
.unit li::before{content:"";position:absolute;left:0;top:13px;width:5px;height:1px;background:var(--blue)}
.unit .up{font-size:12.5px;color:var(--text-faint);margin-top:14px;padding-top:12px;
  border-top:1px solid var(--rule-soft);font-variant-numeric:tabular-nums}

.amen{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:2px;
  border:1px solid var(--rule-soft);border-radius:var(--r-panel);overflow:hidden}
.amen span{padding:17px 18px;font-size:13px;color:var(--text-dim);background:var(--glass-fill);
  letter-spacing:.02em}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px}
.gal figure{margin:0;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--glass-border);
  background:var(--teal-800)}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 900ms var(--ease-out)}
.gal figure:hover img{transform:scale(1.04)}
.gal .wide{grid-column:span 2}
@media (max-width:700px){.gal .wide{grid-column:span 1}}

/* ------------------------------------------------------- journal ---- */
.jrn{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:26px}
.jrn article{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-card);background:var(--glass-fill);
  backdrop-filter:blur(var(--blur-card));-webkit-backdrop-filter:blur(var(--blur-card));
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
  transition:transform var(--dur-panel) var(--ease),border-color var(--dur-panel) var(--ease);
}
.jrn article:hover,.jrn article:focus-within{transform:translateY(-4px);border-color:var(--glass-border-hot)}
.jrn .shot{aspect-ratio:16/9}
.jrn .in{padding:20px 21px 23px;display:flex;flex-direction:column;flex:1}
.jrn .kicker{display:flex;gap:11px;align-items:baseline;font-size:9.5px;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-text)}
.jrn .kicker span{color:var(--text-faint)}
.jrn h3{font-size:22px;line-height:1.22;margin-top:9px;font-weight:400}
.jrn p{font-size:14px;color:var(--text-dim);margin-top:9px;line-height:1.62}

/* the article itself */
.art{padding:150px 0 0}
.art-head{max-width:74ch;margin:0 auto}
.art-head .kicker{display:flex;gap:12px;align-items:baseline;font-size:10px;
  letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-text)}
.art-head .kicker span{color:var(--text-faint)}
.art-head h1{font-size:clamp(31px,4.6vw,52px);line-height:1.08;margin-top:16px}
.art-head .stand{margin-top:18px;font-size:19px;line-height:1.56;color:var(--text-dim)}
.art-head .by{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule-soft);
  font-size:12px;letter-spacing:.06em;color:var(--text-faint)}
.art-art{margin:40px auto 0;max-width:1000px;border-radius:var(--r-panel);overflow:hidden;
  border:1px solid var(--glass-border)}
.art-art img{width:100%;aspect-ratio:16/8;object-fit:cover}
.art-art figcaption{padding:11px 16px;font-size:11.5px;color:var(--text-faint);
  background:var(--glass-fill);letter-spacing:.02em}
.art-body{max-width:68ch;margin:44px auto 0}
.art-body p{font-size:17px;line-height:1.78;color:var(--text-dim)}
.art-body p + p{margin-top:19px}
.art-body h3{font-size:25px;margin-top:40px;line-height:1.24}
.art-body h3 + p{margin-top:13px}
.art-body strong{color:var(--text);font-weight:var(--w-label)}
.art-body a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--rule)}
.art-body a:hover{text-decoration-color:currentColor}
.pull{margin:34px 0;padding:4px 0 4px 24px;border-left:2px solid var(--accent-text)}
.pull p{font-family:var(--font-display);font-size:25px;line-height:1.32;color:var(--text)}
.art-src{max-width:68ch;margin:44px auto 0;padding:22px 24px;border-radius:var(--r-panel);
  background:var(--glass-fill);border:1px solid var(--glass-border)}
.art-src .t{font-size:9.5px;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--accent-text)}
.art-src ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.art-src li{font-size:13.5px;color:var(--text-dim);line-height:1.55}
.art-src a{color:var(--accent-text)}
.art-src .note{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule-soft);
  font-size:12.5px;color:var(--text-faint);line-height:1.6}
@media (max-width:880px){
  .art{padding-top:112px}
  .art-body p{font-size:16px}
  .pull p{font-size:21px}
}

/* ---------------------------------------------------- film band ----- */
/* A silent, caption-free cut of the Golden Hill film. Muted + playsinline +
   poster so it behaves on iOS and degrades to a still where autoplay is
   refused or motion is unwanted. */
.film{position:relative;overflow:hidden;background:var(--charcoal)}
.film-media{position:relative;aspect-ratio:12/5;min-height:340px}
.film-media video,.film-media img{width:100%;height:100%;object-fit:cover;display:block}
.film-scrim{position:absolute;inset:0;
  /* The film is the point of this section, so it is not dimmed at all. The
     copy carries its own plate; sampling the clip showed the copy column
     running to 0.94 luminance on bright frames, where cream measured 1.14:1
     and would have needed a 0.56 overlay to be legible. */
  background:none;
}
.film-copy{position:absolute;inset:0;display:flex;align-items:center}
.film-copy .in{max-width:var(--shell);margin:0 auto;padding:0 40px;width:100%;color:var(--cream)}
.film-copy h2{font-size:clamp(28px,4vw,50px);line-height:1.06;max-width:15ch;margin-top:14px}
.film-copy p{margin-top:16px;max-width:44ch;font-size:16px}
/* ink on the frost, same inversion as the hero */
.film .film-plate .eyebrow{color:var(--burgundy)}
.film .film-plate h2{color:var(--burgundy-deep)}
.film .film-plate p{color:var(--graphite)}
.film .film-plate .b-sec{
  color:var(--burgundy-deep);border-color:rgba(62,23,35,.40);background:rgba(255,255,255,.30);
}
.film .film-plate .b-sec:hover,.film .film-plate .b-sec:focus-visible{
  border-color:var(--burgundy);background:rgba(255,255,255,.62);color:var(--burgundy-deep);
}
.film-cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:26px}
/* sits out on the bare footage, so it carries its own ground rather than a
   shadow that a white frame would swallow */
.film-note{position:absolute;right:40px;bottom:22px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(247,244,239,.92);
  background:rgba(9,26,25,.52);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:6px 12px;border-radius:999px;border:1px solid rgba(203,218,229,.16)}
@media (max-width:880px){
  .film-media{aspect-ratio:4/5;min-height:0}
  .film-scrim{background:none}
  .film-copy{align-items:flex-end;padding-bottom:34px}
  .film-copy .in{padding:0 22px}
  .film-note{display:none}
}

/* ------------------------------------------------- testimonials ----- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.quote{
  padding:28px 26px;border-radius:var(--r-card);border:1px solid var(--glass-border);
  background:var(--glass-fill);
  backdrop-filter:blur(var(--blur-card));-webkit-backdrop-filter:blur(var(--blur-card));
  display:flex;flex-direction:column;
  transition:border-color var(--dur-panel) var(--ease),transform var(--dur-panel) var(--ease);
}
.quote:hover{border-color:var(--glass-border-hot);transform:translateY(-3px)}
.quote .mark{font-family:var(--font-display);font-size:44px;line-height:.7;color:var(--accent-text);
  opacity:.6}
.quote blockquote{margin:14px 0 0;font-size:14.8px;line-height:1.72;color:var(--text-dim)}
.quote figcaption{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-soft)}
.quote .who{font-size:14px;color:var(--text);font-weight:var(--w-label)}
.quote .role{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-top:5px}

/* --------------------------------------------------- scheduling ----- */
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:8px}
.slot{
  padding:26px 24px;border-radius:var(--r-card);border:1px solid var(--glass-border);
  background:var(--glass-fill);
  backdrop-filter:blur(var(--blur-card));-webkit-backdrop-filter:blur(var(--blur-card));
  display:flex;flex-direction:column;
  transition:border-color var(--dur-panel) var(--ease),transform var(--dur-panel) var(--ease)}
.slot:hover{border-color:var(--glass-border-hot);transform:translateY(-3px)}
.slot .n{font-size:9.5px;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent-text)}
.slot h3{font-size:24px;margin-top:11px;line-height:1.2}
.slot p{font-size:13.5px;color:var(--text-dim);margin-top:10px;line-height:1.66;flex:1}
.slot .b{margin-top:18px;align-self:flex-start}

/* --------------------------------------------------------- footer --- */
.ftr{background:var(--teal-900);color:var(--cream);padding:72px 0 40px;border-top:1px solid rgba(175,196,212,.24)}
.ftr-in{display:flex;gap:48px;justify-content:space-between;flex-wrap:wrap}
.ftr .brand{width:196px}
.ftr-cols{display:flex;gap:56px;flex-wrap:wrap}
.ftr-col h4{font-size:9.5px;letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;font-family:var(--font-ui);font-weight:400}
.ftr-col a,.ftr-col p{display:block;font-size:13.5px;color:rgba(247,244,239,.66);padding:4px 0;
  transition:color var(--dur-micro) var(--ease)}
.ftr-col a:hover{color:var(--cream)}
.ftr-btm{margin-top:50px;padding-top:22px;border-top:1px solid rgba(175,196,212,.16);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:11px;color:rgba(247,244,239,.42);letter-spacing:.06em}
.socials{display:flex;gap:14px;margin-top:16px}
.socials a{width:34px;height:34px;border:1px solid rgba(175,196,212,.30);border-radius:50%;
  display:grid;place-items:center;transition:all var(--dur-micro) var(--ease)}
.socials a:hover{border-color:var(--blue-hi);transform:translateY(-2px)}
.socials svg{width:15px;height:15px;fill:var(--blue-hi)}

/* ----------------------------------------------------- whatsapp cta -- */
.float{
  position:fixed;right:24px;bottom:24px;z-index:90;display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;border-radius:var(--r-pill);cursor:pointer;font-family:var(--font-ui);
  background:rgba(14,53,50,.86);border:1px solid rgba(175,196,212,.30);color:var(--cream);
  backdrop-filter:blur(30px) saturate(125%);-webkit-backdrop-filter:blur(30px) saturate(125%);
  box-shadow:0 20px 50px -22px rgba(0,0,0,.82);
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  transition:border-color var(--dur-micro) var(--ease),transform var(--dur-micro) var(--ease);
}
.float:hover{border-color:var(--blue-hi);transform:translateY(-2px)}
.float svg{width:16px;height:16px;fill:var(--blue-hi);flex:none}

/* --------------------------------------------------------- forms ----- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form .full{grid-column:1/-1}
.form label{display:block;font-size:9.5px;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}
.form input,.form select,.form textarea{
  width:100%;font-family:inherit;font-size:15px;font-weight:var(--w-body);color:var(--text);
  background:transparent;border:0;border-bottom:1px solid var(--glass-border);
  padding:10px 0;transition:border-color var(--dur-micro) var(--ease);
}
.form textarea{resize:vertical;min-height:104px}
.form input:focus,.form select:focus,.form textarea:focus{border-bottom-color:var(--accent-strong);outline:none}
.form select option{background:var(--teal-900);color:var(--cream)}
:root[data-theme="light"] .form select option{background:#fff;color:var(--charcoal)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--text-dim);line-height:1.6}
.consent input{width:auto;margin-top:4px;accent-color:var(--blue)}
.err{color:#E08A6E;font-size:11.5px;margin-top:6px;min-height:15px;letter-spacing:.02em}
:root[data-theme="light"] .err{color:#A8452A}
.sent{padding:24px;border:1px solid var(--glass-border-hot);border-radius:var(--r-panel);
  background:var(--glass-fill);margin-top:8px}
.sent h3{font-size:24px}
.sent p{color:var(--text-dim);margin-top:9px;font-size:14.5px}

/* ---------------------------------------------------------- reveal ---
   Scoped to .js so the page is fully readable when scripting is off,
   blocked, or simply slow to arrive. Never hide content behind JS. */
.js .rv{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .hero-media img{animation:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* ------------------------------------------------- touch & overflow --- */
/* Belt and braces: the two fixed layers are pinned to the visible width so a
   stray wide child can never stretch them off the side of a phone. */
.hdr,.mobnav{width:100%;max-width:100vw}

/* 44px is the floor for anything a thumb has to hit. Applied by pointer type
   rather than width, so a touch laptop gets it too. */
@media (pointer:coarse),(max-width:880px){
  .chip{min-height:44px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
  .fld select{min-height:44px}
  .fx-set button{min-height:44px;padding-left:14px;padding-right:14px}
  .burger{min-width:44px;min-height:44px}
  .reset{min-height:44px;padding:0 4px}
  .sec-h .more{display:inline-flex;align-items:center;min-height:44px}
  .ftr-col a{padding:9px 0}
  .socials a{width:44px;height:44px}
  .card-acts .b,.b{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .form input,.form select,.form textarea{min-height:44px}
  .consent input{width:22px;height:22px}
}

/* ------------------------------------------------------ responsive --- */
@media (max-width:1180px){
  .nav{gap:18px}
  .fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1040px){
  .nav{display:none}
  .burger{display:block}
  .split{grid-template-columns:1fr;gap:34px}
  .filter-wrap{margin-top:-64px}
}
@media (max-width:880px){
  body{font-size:16px}
  .shell,.hdr-in{padding-left:22px;padding-right:22px}
  .hero{min-height:88svh;padding-bottom:76px}
  .hero-credit{display:none}
  .sec{padding:72px 0}
  .pillar{padding-right:0}
  .form{grid-template-columns:1fr}
  .float{right:14px;bottom:14px;padding:13px 17px}
  .ftr-cols{gap:32px}
  .trust{margin-top:48px}
  .cards{grid-template-columns:1fr;gap:20px}
}
@media (max-width:420px){
  .fields{grid-template-columns:1fr}
  .hdr-in{gap:14px}
  .brand{width:142px}
  .float span{display:none}
  .float{padding:14px}
}

/* ---------------------------------------------- feature band ---------- */
/* A companion long-form page, on its own ground so it reads as a different
   kind of thing from the booking CTA above it rather than a third button. */
.feature-band{
  padding:38px 0;
  background:linear-gradient(180deg,var(--burgundy),var(--burgundy-deep));
  border-top:1px solid rgba(203,218,229,.16);
  border-bottom:1px solid rgba(203,218,229,.16);
}
.feature-band__in{
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
}
.feature-band .eyebrow{color:var(--blue-hi)}
.feature-band h2{
  font-size:clamp(23px,3vw,32px);color:var(--cream);margin-top:8px;
  max-width:20ch;
}
.feature-band__note{
  margin-top:10px;max-width:56ch;font-size:15px;
  color:rgba(247,244,239,.82);
}
/* cream on burgundy is 10.6:1, so the secondary button takes cream ink here
   rather than the page's accent, which is tuned for the teal ground */
.feature-band .b-sec{
  flex:none;color:var(--cream);
  border-color:rgba(203,218,229,.44);
  background:rgba(255,255,255,.08);
}
.feature-band .b-sec:hover,.feature-band .b-sec:focus-visible{
  background:rgba(255,255,255,.18);border-color:var(--blue-hi);color:var(--cream);
}
@media (max-width:760px){
  .feature-band__in{flex-direction:column;align-items:flex-start;gap:20px}
  .feature-band .b-sec{width:100%;text-align:center}
}