/* ============================================================
   VAGAMON HEIGHTS · V4 "Mist & Moss"
   Design system. Green-forward, editorial, high-contrast type.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600&family=Inter:wght@300;400;500&family=Instrument+Serif:ital@0;1&display=swap');

/* ---------- 1. TOKENS ---------- */
:root{
  /* greens, dark → light */
  --forest:#0B2318;
  --moss:#123524;
  --green:#1E5637;
  --green-mid:#2D6A4F;
  --fern:#4A7259;
  --sage:#9BB1A0;       /* light sage - use on DARK backgrounds only */
  --label:#59705F;      /* tiny mono labels on LIGHT backgrounds */
  --mute:#7A8C7C;       /* muted line of the two-tone display headline */
  --haze:#C9D6CB;
  --mist:#E7EDE6;
  --paper:#F4F6F1;
  --cream:#FBFBF8;
  --white:#fff;

  --brass:#6B5435;      /* brass for TEXT on light backgrounds */
  --brass-deco:#A98C55; /* brass for borders/fills only, never text */
  --brass-lt:#DCC49B;   /* gold on dark/photo. Lightened to clear AA over imagery. */

  --ink:#101310;
  --ink-70:rgba(16,19,16,.70);
  --ink-45:rgba(16,19,16,.60);
  --ink-16:rgba(16,19,16,.16);
  --ink-08:rgba(16,19,16,.08);

  --disp:'Inter Tight',-apple-system,BlinkMacSystemFont,Helvetica,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,Helvetica,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;

  --gut:clamp(1.25rem,4vw,3.5rem);
  --max:82.5rem;          /* 1320px */
  --sect:clamp(5rem,11vw,10.5rem);

  --r-s:6px;
  --r-m:14px;
  --r-l:22px;
  --r-xl:32px;

  --sh-1:0 1px 2px rgba(11,35,24,.05), 0 6px 16px -8px rgba(11,35,24,.10);
  --sh-2:0 2px 6px rgba(11,35,24,.05), 0 18px 40px -20px rgba(11,35,24,.20);
  --sh-3:0 4px 12px rgba(11,35,24,.06), 0 40px 80px -32px rgba(11,35,24,.32);

  /* leaf texture: alpha is baked into the PNGs (peak 6.7% light / 4.3% dark)
     so it cannot be turned up accidentally by a blend mode later */
  --leaf-l:url('../img/leaf-light.png');
  --leaf-d:url('../img/leaf-dark.png');
  --leaf-size:640px;

  --e:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.65,0,.35,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);
  font-size:1rem;
  line-height:1.62;
  color:var(--ink);
  background:var(--leaf-l) repeat 0 0/var(--leaf-size) var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"ss01","cv05";
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--green);color:#fff}
:focus-visible{outline:2px solid var(--green-mid);outline-offset:3px;border-radius:3px}

/* film grain: adds tactility, keeps flat colour from looking cheap */
body::after{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.035;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-wide{max-width:96rem}
.sect{padding-block:var(--sect);position:relative}
.sect-t{padding-top:var(--sect)}
.sect-b{padding-bottom:var(--sect)}
.bg-paper{background:var(--leaf-l) repeat 0 0/var(--leaf-size) var(--paper)}
.bg-mist{background:var(--mist)}   /* mist is the darkest light surface;
   texture on top of it pushed the small mono labels under AA, and a flat
   band between textured cream sections reads better anyway */
.bg-cream{background:var(--leaf-l) repeat 0 0/var(--leaf-size) var(--cream)}
.bg-forest{background:var(--leaf-d) repeat 0 0/var(--leaf-size) var(--forest);color:var(--haze)}
.bg-moss{background:var(--leaf-d) repeat 0 0/var(--leaf-size) var(--moss);color:var(--haze)}

.grid{display:grid;gap:clamp(1rem,2.2vw,2rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ---------- 4. TYPOGRAPHY ---------- */

/* meta label, e.g. [ 01 · the estate ] */
.meta{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fern);
  display:inline-flex;align-items:center;gap:.55em;
}
.meta::before{content:'[';opacity:.5}
.meta::after{content:']';opacity:.5}
.meta-plain::before,.meta-plain::after{content:none}
.on-dark .meta,.bg-forest .meta,.bg-moss .meta{color:var(--sage)}

/* the signature: two-tone stacked display headline */
.disp{
  font-family:var(--disp);
  font-weight:500;
  /* 30px @390 -> 62px @1280 -> 86px @1920, capped 96px */
  font-size:clamp(1.875rem,0.98rem + 3.66vw,6rem);
  line-height:.94;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.disp span{display:block}
.disp .mute{color:var(--mute)}
.disp .solid{color:var(--green)}
.on-dark .disp .mute,.bg-forest .disp .mute,.bg-moss .disp .mute{color:rgba(201,214,203,.28)}
.on-dark .disp .solid,.bg-forest .disp .solid,.bg-moss .disp .solid{color:var(--cream)}

.disp-xl{font-size:clamp(2.25rem,1.15rem + 4.4vw,7rem)}
.disp-s{font-size:clamp(1.625rem,1.11rem + 2.09vw,3.75rem);line-height:1.02}
.disp-xs{font-size:clamp(1.5rem,2.8vw,2.25rem);line-height:1.1;letter-spacing:-.03em;font-weight:500;font-family:var(--disp)}

h1,h2,h3,h4{font-family:var(--disp);font-weight:500;letter-spacing:-.025em;line-height:1.12}
h3{font-size:clamp(1.125rem,1.6vw,1.375rem)}
h4{font-size:1rem}

.lede{
  font-size:clamp(1.0625rem,1.5vw,1.3125rem);
  line-height:1.55;color:var(--ink-70);max-width:46ch;font-weight:300;
}
.on-dark .lede,.bg-forest .lede,.bg-moss .lede{color:rgba(201,214,203,.78)}
.body-lg{font-size:1.0625rem;line-height:1.7;color:var(--ink-70);font-weight:300}
.small{font-size:.8125rem;line-height:1.55;color:var(--ink-45)}
.on-dark .small,.bg-forest .small,.bg-moss .small{color:rgba(201,214,203,.68)}

/* serif accents: residence names, pull quotes */
.serif{font-family:var(--serif);font-weight:400;letter-spacing:0}
.serif-it{font-family:var(--serif);font-style:italic;font-weight:400}
.quote{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.25rem,0.85rem + 1.55vw,2.375rem);
  line-height:1.28;letter-spacing:-.01em;color:var(--moss);text-wrap:balance;
}
.on-dark .quote,.bg-forest .quote,.bg-moss .quote{color:var(--cream)}

.price{font-family:var(--disp);font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}

/* rule with a dot, a small editorial detail */
.rule{height:1px;background:var(--ink-16);position:relative;margin-block:1.5rem}
.rule::after{content:'';position:absolute;left:0;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.on-dark .rule,.bg-forest .rule,.bg-moss .rule{background:rgba(201,214,203,.18)}
.on-dark .rule::after,.bg-forest .rule::after,.bg-moss .rule::after{background:var(--brass-lt)}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  padding:.9375rem 1.5rem;border-radius:999px;
  font-family:var(--disp);font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  transition:transform .45s var(--e),background .3s,color .3s,box-shadow .45s var(--e);
  will-change:transform;white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-arw{
  width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  transition:transform .45s var(--e);
}
.btn:hover .btn-arw{transform:translateX(3px)}
.btn-arw svg{width:.6875rem;height:.6875rem}

.btn-p{background:var(--green);color:#fff;box-shadow:0 2px 4px rgba(11,35,24,.14)}
.btn-p .btn-arw{background:rgba(255,255,255,.18)}
.btn-p:hover{background:var(--moss);box-shadow:0 10px 26px -8px rgba(18,53,36,.5)}

.btn-d{background:var(--ink);color:#fff}
.btn-d .btn-arw{background:rgba(255,255,255,.18)}
.btn-d:hover{background:var(--forest)}

.btn-l{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.btn-l .btn-arw{background:var(--green);color:#fff}
.btn-l:hover{box-shadow:var(--sh-2)}

.btn-o{border:1px solid var(--ink-16);color:var(--ink)}
.btn-o:hover{border-color:var(--green);color:var(--green)}
.on-dark .btn-o,.bg-forest .btn-o,.bg-moss .btn-o{border-color:rgba(201,214,203,.28);color:var(--cream)}
.on-dark .btn-o:hover,.bg-forest .btn-o:hover,.bg-moss .btn-o:hover{border-color:var(--brass-lt);color:var(--brass-lt)}

.btn-glass{
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
}
.btn-glass .btn-arw{background:rgba(255,255,255,.22)}
.btn-glass:hover{background:rgba(255,255,255,.22)}

.btn-sm{padding:.625rem 1.125rem;font-size:.8125rem}

/* text link with animated underline */
.tlink{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--disp);font-size:.9375rem;font-weight:500;color:var(--green);
  position:relative;padding-bottom:2px;
}
.tlink::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e);
}
.tlink:hover::after{transform:scaleX(1)}
.tlink svg{width:.75rem;height:.75rem;transition:transform .45s var(--e)}
.tlink:hover svg{transform:translateX(4px)}
.on-dark .tlink,.bg-forest .tlink,.bg-moss .tlink{color:var(--brass-lt)}

/* chip */
.chip{
  display:inline-flex;align-items:center;gap:.45em;
  padding:.3125rem .625rem;border-radius:999px;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--mist);color:var(--green);
}
.chip-g{background:var(--green);color:#fff}
.chip-b{background:rgba(148,118,74,.13);color:var(--brass)}
.chip-glass{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chip-tbc{background:rgba(148,118,74,.12);color:var(--brass);border:1px dashed rgba(148,118,74,.55)}

/* ---------- 6. MIST (thematic signature) ---------- */
.mist-l{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.mist-l i{
  position:absolute;display:block;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 68%);
  filter:blur(28px);
  animation:drift 32s var(--e-io) infinite alternate;
}
.mist-l i:nth-child(1){width:70%;height:38%;left:-12%;bottom:8%;opacity:.5}
.mist-l i:nth-child(2){width:58%;height:30%;right:-10%;bottom:24%;opacity:.36;animation-duration:44s;animation-delay:-8s}
.mist-l i:nth-child(3){width:82%;height:26%;left:6%;bottom:-4%;opacity:.42;animation-duration:38s;animation-delay:-18s}
@keyframes drift{
  from{transform:translate3d(-4%,0,0) scale(1)}
  to{transform:translate3d(7%,-9%,0) scale(1.16)}
}

/* contour divider, a hill-estate motif */
.contour{display:block;width:100%;height:auto;color:var(--haze);opacity:.85}
.contour path{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.on-dark .contour,.bg-forest .contour,.bg-moss .contour{color:rgba(201,214,203,.2)}

/* ---------- 7. NAV ---------- */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:900;
  padding-block:1rem;
  transition:background .5s var(--e),box-shadow .5s var(--e),padding .5s var(--e);
}
.nav-in{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem)}
.nav.solid{
  background:rgba(251,251,248,.86);
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 1px 0 var(--ink-08);padding-block:.6875rem;
}
.nav-mark{display:flex;align-items:center;gap:.6875rem;margin-right:auto;min-width:0}
.nav-logo{
  height:3.75rem;width:auto;flex:0 0 auto;
  transition:height .5s var(--e),filter .4s;
  filter:drop-shadow(0 2px 10px rgba(11,35,24,.40));
}
.nav.solid .nav-logo{height:3.25rem;filter:drop-shadow(0 1px 3px rgba(11,35,24,.10))}
.nav-menu{display:flex;align-items:center;gap:clamp(.75rem,1.8vw,1.75rem)}
.nav-menu a{
  font-family:var(--disp);font-size:.875rem;font-weight:400;color:rgba(255,255,255,.86);
  position:relative;padding-block:.25rem;transition:color .35s;
}
.nav-menu a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e);
}
.nav-menu a:hover::after,.nav-menu a[aria-current]::after{transform:scaleX(1)}
.nav-menu a:hover{color:#fff}
.nav-menu a[aria-current]{color:#fff}
.nav.solid .nav-menu a{color:var(--ink-70)}
.nav.solid .nav-menu a:hover,.nav.solid .nav-menu a[aria-current]{color:var(--green)}
.nav-cta{display:flex;align-items:center;gap:.625rem}
.nav-prog{position:absolute;left:0;bottom:0;height:1.5px;background:var(--green);width:0;transition:width .1s linear}
.burger{width:2.5rem;height:2.5rem;display:none;place-items:center;border-radius:50%;flex:0 0 auto}
.burger span{display:block;width:1.0625rem;height:1.25px;background:#fff;transition:transform .4s var(--e),opacity .3s,background .4s}
.burger span+span{margin-top:4px}
.nav.solid .burger span{background:var(--ink)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.25px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:890;background:var(--forest);color:var(--haze);
  display:flex;flex-direction:column;justify-content:center;gap:.25rem;
  padding:5rem var(--gut) 2.5rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--e);
}
.drawer.open{clip-path:inset(0 0 0 0)}
.drawer a{
  font-family:var(--disp);font-size:clamp(1.75rem,7vw,2.75rem);font-weight:400;
  letter-spacing:-.035em;color:var(--haze);padding-block:.375rem;
  display:flex;align-items:baseline;gap:.75rem;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e),color .3s;
}
.drawer.open a{opacity:1;transform:none}
.drawer a i{font-family:var(--mono);font-size:.625rem;font-style:normal;color:var(--sage);letter-spacing:.1em}
.drawer a:hover,.drawer a[aria-current]{color:#fff}
.drawer-ft{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.625rem}
body.locked{overflow:hidden}

/* ---------- 8. HERO ---------- */
.hero{position:relative;min-height:min(94svh,58rem);display:flex;flex-direction:column;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(11,35,24,.58) 0%,rgba(11,35,24,.22) 24%,rgba(11,35,24,.50) 58%,rgba(11,35,24,.88) 100%),
    linear-gradient(100deg,rgba(11,35,24,.74) 0%,rgba(11,35,24,.44) 42%,rgba(11,35,24,.04) 76%),
    radial-gradient(120% 80% at 20% 40%,rgba(30,86,55,.22) 0%,rgba(11,35,24,0) 62%);
}
.hero-body{position:relative;z-index:3;flex:1;display:flex;align-items:flex-end;padding-bottom:clamp(6rem,3rem + 5.5vw,9.5rem)}
.hero-body .wrap{width:100%}
.hero h1{
  font-family:var(--disp);font-weight:500;color:#fff;
  /* 34px @390 -> 72px @1280 -> 100px @1920, capped 112px */
  font-size:clamp(2.125rem,1.075rem + 4.31vw,7rem);line-height:.94;letter-spacing:-.05em;
  max-width:20ch;
}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--brass-lt)}
.hero-sub{margin-top:1.5rem;max-width:44ch;color:rgba(255,255,255,.84);font-size:clamp(1rem,1.35vw,1.1875rem);font-weight:300;line-height:1.56}
.hero-acts{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero-cue{
  position:absolute;right:var(--gut);bottom:clamp(9rem,6rem + 5.5vw,12.5rem);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.hero-cue i{display:block;width:1px;height:3.5rem;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0));animation:cue 2.6s var(--e-io) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* floating glass stat cards straddling the hero edge */
.stat-row{position:relative;z-index:5;margin-top:calc(-1 * clamp(4rem,2rem + 4vw,6.5rem))}
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1vw,1rem)}
.stat-c{
  background:rgba(11,35,24,.46);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-radius:var(--r-m);padding:clamp(1rem,1.8vw,1.625rem);
  color:#fff;transition:transform .6s var(--e),background .4s;
}
.stat-c:hover{transform:translateY(-5px);background:rgba(11,35,24,.58)}
.stat-n{font-family:var(--disp);font-weight:500;font-size:clamp(1.625rem,3.4vw,2.75rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat-n sub{font-size:.4em;vertical-align:baseline;font-weight:400;opacity:.75;margin-left:.15em;letter-spacing:0}
.stat-l{margin-top:.5rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.stat-l span{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66);line-height:1.4}
.stat-l svg{width:.875rem;height:.875rem;color:rgba(255,255,255,.5);flex:0 0 auto}

/* page banner (inner pages) */
.banner{position:relative;min-height:min(66svh,34rem);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.banner-media{position:absolute;inset:0;z-index:0}
.banner-media img{width:100%;height:100%;object-fit:cover}
.banner-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,35,24,.62) 0%,rgba(11,35,24,.30) 38%,rgba(11,35,24,.86) 100%),linear-gradient(100deg,rgba(11,35,24,.66) 0%,rgba(11,35,24,.34) 46%,rgba(11,35,24,.02) 80%)}
.banner-body{position:relative;z-index:3;width:100%;padding-bottom:clamp(2.5rem,5vw,4.5rem);padding-top:9rem}
.banner h1{color:#fff;font-size:clamp(1.875rem,1.21rem + 2.75vw,4.75rem);line-height:.98;letter-spacing:-.045em;max-width:22ch;margin-top:1rem}
.banner .lede{color:rgba(255,255,255,.8);margin-top:1.125rem}

/* breadcrumb */
.crumb{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.crumb a:hover{color:#fff}
.crumb i{font-style:normal;opacity:.45}

/* ---------- 9. MARQUEE ---------- */
.marq{overflow:hidden;border-block:1px solid var(--ink-08);padding-block:1.125rem;background:var(--cream)}
.marq-t{display:flex;width:max-content;gap:0;will-change:transform;
  animation:marq var(--marq-dur,40s) linear infinite}
.marq-t>span{
  display:flex;align-items:center;gap:1.75rem;padding-right:1.75rem;flex:0 0 auto;
}
/* one dot after every item, so the rhythm is identical inside a group and
   across the seam between groups */
.marq-t>span>span{
  display:inline-flex;align-items:center;flex:0 0 auto;
  font-family:var(--disp);font-size:.9375rem;font-weight:400;letter-spacing:-.005em;
  color:var(--fern);white-space:nowrap;
}
.marq-t>span>span::after{
  content:'';width:4px;height:4px;border-radius:50%;background:var(--brass-deco);
  margin-left:1.75rem;flex:0 0 auto;
}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(var(--marq-shift,-50%))}}
.marq:hover .marq-t{animation-play-state:paused}

/* ---------- 10. SECTION HEADS ---------- */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.shead-l{max-width:62rem}
.shead .meta{margin-bottom:1.125rem}
.shead-num{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--label);text-transform:uppercase}
.on-dark .shead-num,.bg-forest .shead-num,.bg-moss .shead-num{color:var(--sage)}

/* ---------- 11. CARDS / LAYERED CLUSTERS ---------- */
.card{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-1);overflow:hidden;transition:box-shadow .6s var(--e),transform .6s var(--e)}
.card:hover{box-shadow:var(--sh-2)}
.card-pad{padding:clamp(1.25rem,2vw,1.875rem)}
.card-g{background:var(--green);color:#fff}
.card-f{background:var(--forest);color:var(--haze)}

.fig{position:relative;overflow:hidden;border-radius:var(--r-l);background:var(--mist)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--e)}
.fig:hover img{transform:scale(1.045)}
.fig-cap{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(1rem,1.8vw,1.5rem);
  background:linear-gradient(180deg,rgba(11,35,24,0) 0%,rgba(11,35,24,.82) 100%);color:#fff;
}
.fig-cap h3{color:#fff}
.ar-4-5{aspect-ratio:4/5}
.ar-3-4{aspect-ratio:3/4}
.ar-1-1{aspect-ratio:1/1}
.ar-4-3{aspect-ratio:4/3}
.ar-3-2{aspect-ratio:3/2}
.ar-16-9{aspect-ratio:16/9}
.ar-21-9{aspect-ratio:21/9}

/* overlapping cluster (reference: layered cards) */
.cluster{position:relative}
.cluster .lay-a{width:74%;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-2)}
.cluster .lay-b{
  position:absolute;right:0;bottom:-8%;width:46%;
  border-radius:var(--r-m);overflow:hidden;box-shadow:var(--sh-3);
  border:5px solid var(--cream);
}
.cluster .lay-tag{
  position:absolute;left:4%;bottom:-4%;
  background:#fff;border-radius:var(--r-m);box-shadow:var(--sh-2);
  padding:.875rem 1.125rem;max-width:15rem;
}

/* two realms */
.realm{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:clamp(22rem,42vw,32rem);display:flex;align-items:flex-end;isolation:isolate}
.realm img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.6s var(--e)}
.realm:hover img{transform:scale(1.05)}
.realm::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,35,24,.1) 0%,rgba(11,35,24,.55) 55%,rgba(11,35,24,.9) 100%)}
.realm-b{position:relative;z-index:2;padding:clamp(1.5rem,3vw,2.5rem);color:#fff;width:100%}
.realm-b h3{color:#fff;font-size:clamp(1.5rem,2.6vw,2.125rem);letter-spacing:-.03em;margin-block:.75rem .625rem}
.realm-b p{color:rgba(255,255,255,.78);font-size:.9375rem;font-weight:300;line-height:1.6;max-width:38ch}
.realm-list{margin-top:1.25rem;display:flex;flex-wrap:wrap;gap:.4375rem}

/* ---------- 12. RESIDENCE EDITORIAL LIST + cursor preview ---------- */
.rlist{border-top:1px solid var(--ink-16)}
.rrow{
  display:grid;grid-template-columns:2.5rem minmax(0,1fr) minmax(0,1fr) auto auto;
  align-items:center;gap:clamp(.75rem,2vw,2rem);
  padding-block:clamp(1.125rem,2.4vw,1.875rem);
  border-bottom:1px solid var(--ink-16);
  position:relative;transition:padding-left .6s var(--e);
}
.rrow::before{
  content:'';position:absolute;left:0;top:0;height:100%;width:0;background:var(--mist);z-index:-1;
  transition:width .7s var(--e);
}
@media (hover:hover){
  .rrow:hover{padding-left:1.25rem}
  .rrow:hover::before{width:100%}
}
.rrow-n{font-family:var(--mono);font-size:.6875rem;color:var(--label);letter-spacing:.1em}
.rrow-name{font-family:var(--disp);font-size:clamp(1.1875rem,2.5vw,1.875rem);font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.rrow:hover .rrow-name{color:var(--green)}
.rrow-name b{display:block;font-family:var(--mono);font-size:.625rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--fern);margin-top:.4375rem}
.rrow-spec{font-size:.8125rem;color:var(--ink-45);line-height:1.5}
.rrow-price{font-family:var(--disp);font-size:clamp(1rem,1.7vw,1.375rem);font-weight:500;letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.rrow-price small{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--label);font-weight:400;margin-top:.25rem}
.rrow-go{width:2.375rem;height:2.375rem;border-radius:50%;border:1px solid var(--ink-16);display:grid;place-items:center;transition:background .4s,border-color .4s,color .4s,transform .5s var(--e);flex:0 0 auto}
.rrow-go svg{width:.8125rem;height:.8125rem}
.rrow:hover .rrow-go{background:var(--green);border-color:var(--green);color:#fff;transform:rotate(-45deg)}
.rrow-thumb{display:none}

.peek{
  position:fixed;top:0;left:0;z-index:800;width:19rem;height:13rem;
  border-radius:var(--r-m);overflow:hidden;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.9);
  transition:opacity .4s var(--e),transform .5s var(--e);
  box-shadow:var(--sh-3);
}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.peek img{width:100%;height:100%;object-fit:cover;opacity:0;position:absolute;inset:0;transition:opacity .4s}
.peek img.act{opacity:1}

/* ---------- 13. EXPERIENCE / DAY TIMELINE ---------- */
.xcard{position:relative;border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:var(--sh-1);display:flex;flex-direction:column;transition:box-shadow .6s var(--e),transform .6s var(--e)}
.xcard:hover{box-shadow:var(--sh-2);transform:translateY(-4px)}
.xcard-m{position:relative;overflow:hidden}
.xcard-m img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.3s var(--e)}
.xcard:hover .xcard-m img{transform:scale(1.05)}
.xcard-n{position:absolute;top:.875rem;left:.875rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;color:#fff;background:rgba(11,35,24,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:.3125rem .5rem;border-radius:4px}
.xcard-free{position:absolute;top:.875rem;right:.875rem}
.xcard-b{padding:clamp(1.125rem,1.8vw,1.5rem);flex:1;display:flex;flex-direction:column;gap:.625rem}
.xcard-b h3{letter-spacing:-.025em}
.xcard-b p{font-size:.875rem;color:var(--ink-70);font-weight:300;line-height:1.62}

/* day timeline */
.day{display:grid;gap:clamp(.625rem,1.4vw,1.125rem)}
.dtile{position:relative;border-radius:var(--r-m);overflow:hidden;min-height:clamp(11rem,18vw,15rem);display:flex;align-items:flex-end;isolation:isolate}
.dtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.4s var(--e)}
.dtile:hover img{transform:scale(1.06)}
.dtile::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,35,24,.06) 30%,rgba(11,35,24,.82) 100%)}
.dtile-b{position:relative;z-index:2;padding:clamp(.875rem,1.6vw,1.25rem);color:#fff}
.dtile-t{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt);display:block;margin-bottom:.4375rem}
.dtile-b h3{color:#fff;font-size:clamp(.9375rem,1.4vw,1.125rem);letter-spacing:-.02em;line-height:1.2}

/* ---------- 14. TARIFF ---------- */
.tw{background:#fff;border-radius:var(--r-l);box-shadow:var(--sh-1);overflow:hidden}
.trow-h{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,2fr) auto;gap:1rem;padding:1rem clamp(1.125rem,2vw,1.75rem);background:var(--forest);color:var(--haze)}
.trow-h span{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase}
.trow-h span:last-child{text-align:right}
.trow{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,2fr) auto;gap:1rem;
  padding:clamp(.9375rem,1.6vw,1.25rem) clamp(1.125rem,2vw,1.75rem);
  border-bottom:1px solid var(--ink-08);align-items:center;transition:background .4s;
}
.trow:last-child{border-bottom:0}
.trow:hover{background:var(--paper)}
.trow-name{font-family:var(--disp);font-size:1rem;font-weight:500;letter-spacing:-.02em}
.trow-cfg{font-size:.8125rem;color:var(--ink-45);line-height:1.5}
.trow-rate{text-align:right;font-family:var(--disp);font-size:1.125rem;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.trow-rate small{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;color:var(--label);text-transform:uppercase;font-weight:400;margin-top:.1875rem}

/* estimator */
.est{background:var(--forest);color:var(--haze);border-radius:var(--r-l);padding:clamp(1.5rem,3vw,2.5rem);overflow:hidden;position:relative}
.est-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}
.est-out{
  margin-top:1.75rem;padding-top:1.75rem;border-top:1px solid rgba(201,214,203,.16);
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.est-total{font-family:var(--disp);font-weight:500;font-size:clamp(2.25rem,6vw,4rem);line-height:1;letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums}
.est-note{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);margin-top:.625rem}
.seg{display:flex;gap:.25rem;background:rgba(201,214,203,.09);padding:.25rem;border-radius:999px}
.seg button{
  flex:1;padding:.625rem .875rem;border-radius:999px;
  font-family:var(--disp);font-size:.8125rem;font-weight:500;color:rgba(201,214,203,.7);
  transition:background .35s,color .35s;white-space:nowrap;
}
.seg button[aria-pressed="true"]{background:var(--green);color:#fff}
.stepper{display:flex;align-items:center;gap:.75rem}
.stepper button{
  width:2.375rem;height:2.375rem;border-radius:50%;border:1px solid rgba(201,214,203,.22);
  display:grid;place-items:center;color:var(--haze);transition:background .35s,border-color .35s;
}
.stepper button:hover{background:rgba(201,214,203,.12);border-color:rgba(201,214,203,.4)}
.stepper output{font-family:var(--disp);font-size:1.375rem;font-weight:500;min-width:2.5rem;text-align:center;color:#fff;font-variant-numeric:tabular-nums}

/* inclusions */
.inc{display:grid;gap:.75rem}
.inc li{display:flex;gap:.875rem;align-items:flex-start;padding-block:.625rem;border-bottom:1px solid var(--ink-08)}
.inc li:last-child{border-bottom:0}
.inc svg{width:1rem;height:1rem;color:var(--green);flex:0 0 auto;margin-top:.25rem}
.inc b{font-family:var(--disp);font-weight:500;font-size:.9375rem;display:block}
.inc span{font-size:.8125rem;color:var(--ink-45)}
.on-dark .inc li,.bg-forest .inc li,.bg-moss .inc li{border-color:rgba(201,214,203,.14)}
.on-dark .inc svg,.bg-forest .inc svg,.bg-moss .inc svg{color:var(--brass-lt)}
.on-dark .inc span,.bg-forest .inc span,.bg-moss .inc span{color:rgba(201,214,203,.68)}

/* ---------- 15. SPEC LIST (residence detail) ---------- */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1px;background:var(--ink-08);border-radius:var(--r-m);overflow:hidden}
.spec div{background:var(--cream);padding:1.125rem}
.spec dt{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label);margin-bottom:.4375rem}
.spec dd{font-family:var(--disp);font-size:1.0625rem;font-weight:500;letter-spacing:-.02em}

/* prev/next */
.pn{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--ink-08)}
.pn a{background:var(--cream);padding:clamp(1.5rem,3vw,2.5rem);transition:background .4s}
.pn a:hover{background:var(--mist)}
.pn a:last-child{text-align:right}
.pn i{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);font-style:normal;display:block;margin-bottom:.625rem}
.pn strong{font-family:var(--disp);font-size:clamp(1.125rem,2.2vw,1.625rem);font-weight:500;letter-spacing:-.03em}

/* ---------- 16. GALLERY ---------- */
.gtabs{display:flex;flex-wrap:wrap;gap:.4375rem}
.gtab{
  padding:.5625rem 1rem;border-radius:999px;border:1px solid var(--ink-16);
  font-family:var(--disp);font-size:.8125rem;font-weight:500;color:var(--ink-70);
  transition:background .35s,color .35s,border-color .35s;
}
.gtab[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.gtab:hover{border-color:var(--green);color:var(--green)}
.gtab[aria-pressed="true"]:hover{color:#fff}
.mason{columns:3;column-gap:clamp(.625rem,1.4vw,1.125rem)}
.mason figure{break-inside:avoid;margin-bottom:clamp(.625rem,1.4vw,1.125rem);border-radius:var(--r-m);overflow:hidden;position:relative;cursor:zoom-in;background:var(--mist)}
.mason img{width:100%;height:auto;transition:transform 1.2s var(--e),filter .5s}
.mason figure:hover img{transform:scale(1.04)}
.mason figcaption{
  position:absolute;inset:auto 0 0 0;padding:1rem;color:#fff;font-size:.8125rem;
  background:linear-gradient(180deg,rgba(11,35,24,0),rgba(11,35,24,.8));
  opacity:0;transform:translateY(6px);transition:opacity .45s var(--e),transform .45s var(--e);
}
.mason figure:hover figcaption{opacity:1;transform:none}
.mason figure.hide{display:none}

.lbox{
  position:fixed;inset:0;z-index:950;background:rgba(11,35,24,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .5s var(--e),visibility .5s;
}
.lbox.open{opacity:1;visibility:visible}
.lbox img{max-width:100%;max-height:82svh;border-radius:var(--r-m);box-shadow:var(--sh-3)}
.lbox-cap{margin-top:1rem;text-align:center;color:rgba(201,214,203,.8);font-size:.875rem}
.lbox-x,.lbox-p,.lbox-n{
  position:absolute;width:2.875rem;height:2.875rem;border-radius:50%;
  border:1px solid rgba(201,214,203,.24);color:var(--haze);display:grid;place-items:center;
  transition:background .35s,border-color .35s;
}
.lbox-x:hover,.lbox-p:hover,.lbox-n:hover{background:rgba(201,214,203,.14);border-color:rgba(201,214,203,.5)}
.lbox-x{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lbox-p{left:clamp(1rem,3vw,2rem);top:50%;transform:translateY(-50%)}
.lbox-n{right:clamp(1rem,3vw,2rem);top:50%;transform:translateY(-50%)}
.lbox svg{width:1rem;height:1rem}

/* ---------- 17. TESTIMONIALS ---------- */
.tst{background:#fff;border-radius:var(--r-l);padding:clamp(1.5rem,2.6vw,2.25rem);box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:1.25rem;height:100%}
.tst blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.0625rem,1.7vw,1.3125rem);line-height:1.42;color:var(--moss);flex:1}
.tst-who{display:flex;align-items:center;gap:.75rem}
.tst-av{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--mist);color:var(--green);display:grid;place-items:center;font-family:var(--disp);font-size:.75rem;font-weight:500;flex:0 0 auto}
.tst-who b{font-family:var(--disp);font-size:.875rem;font-weight:500;display:block;letter-spacing:-.01em}
.tst-who span{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label)}

/* ---------- 18. FORMS ---------- */
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fern)}
.on-dark .field label,.bg-forest .field label,.bg-moss .field label{color:var(--sage)}
.field input,.field select,.field textarea{
  width:100%;padding:.875rem 1rem;border-radius:var(--r-s);
  border:1px solid var(--ink-16);background:#fff;font-size:.9375rem;
  transition:border-color .35s,box-shadow .35s;
}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(30,86,55,.1);
}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea,
.bg-forest .field input,.bg-forest .field select,.bg-forest .field textarea{
  background:rgba(201,214,203,.07);border-color:rgba(201,214,203,.2);color:var(--cream);
}
.on-dark .field input:focus,.bg-forest .field input:focus{border-color:var(--brass-lt);box-shadow:0 0 0 3px rgba(169,140,85,.16)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234F7A62' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:.6875rem;padding-right:2.25rem}
.form-note{font-size:.75rem;color:var(--ink-45)}
.fspan-2{grid-column:span 2}

/* contact rail */
.crail{display:grid;gap:1.5rem}
.citem{display:flex;gap:1rem;align-items:flex-start;padding-bottom:1.5rem;border-bottom:1px solid var(--ink-08)}
.citem:last-child{border-bottom:0;padding-bottom:0}
.citem-ic{width:2.375rem;height:2.375rem;border-radius:50%;background:var(--mist);color:var(--green);display:grid;place-items:center;flex:0 0 auto}
.citem-ic svg{width:.9375rem;height:.9375rem}
.citem dt{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);margin-bottom:.4375rem}
.citem dd{font-family:var(--disp);font-size:1.0625rem;font-weight:500;letter-spacing:-.02em;line-height:1.45}
.citem dd a:hover{color:var(--green)}
.citem dd span{display:block;font-family:var(--body);font-size:.8125rem;font-weight:300;color:var(--ink-45);letter-spacing:0;margin-top:.25rem}

/* ---------- 19. FAQ / accordion ---------- */
.acc{border-top:1px solid var(--ink-16)}
.acc details{border-bottom:1px solid var(--ink-16)}
.acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:clamp(1rem,2vw,1.375rem);cursor:pointer;list-style:none;
  font-family:var(--disp);font-size:clamp(1rem,1.6vw,1.1875rem);font-weight:500;letter-spacing:-.02em;
  transition:color .35s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--green)}
.acc summary i{
  width:1.625rem;height:1.625rem;border-radius:50%;border:1px solid var(--ink-16);
  display:grid;place-items:center;flex:0 0 auto;font-style:normal;
  transition:transform .5s var(--e),background .35s,color .35s;
}
.acc summary i::before{content:'+';font-family:var(--body);font-size:.875rem;line-height:1}
.acc details[open] summary i{transform:rotate(135deg);background:var(--green);border-color:var(--green);color:#fff}
.acc-b{padding-bottom:1.5rem;max-width:62ch}
.acc-b p+p{margin-top:.875rem}

/* ---------- 20. CTA BAND + FOOTER ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--forest);color:var(--haze);isolation:isolate}
.cta-band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.28}
.cta-band::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(11,35,24,.94) 0%,rgba(11,35,24,.72) 55%,rgba(18,53,36,.6) 100%)}
.cta-in{position:relative;z-index:2;padding-block:clamp(4rem,9vw,7.5rem)}

.ft{background:var(--leaf-d) repeat 0 0/var(--leaf-size) var(--forest);color:var(--haze);position:relative;overflow:hidden}
.ft-top{
  display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.85fr));
  gap:clamp(1.75rem,4vw,3.5rem);padding-block:clamp(3rem,6vw,5rem);
  border-bottom:1px solid rgba(201,214,203,.14);
}
.ft h4{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);font-weight:400;margin-bottom:1.125rem}
.ft-links{display:grid;gap:.6875rem}
.ft-links a{font-size:.9375rem;color:rgba(201,214,203,.76);transition:color .3s,transform .4s var(--e);display:inline-block}
.ft-links a:hover{color:#fff;transform:translateX(3px)}
.ft-mark{display:flex;align-items:center;gap:.875rem;margin-bottom:1.25rem}
.ft-logo{height:6rem;width:auto;flex:0 0 auto}
.drawer-logo{height:4.25rem;width:auto;margin-bottom:1.75rem;align-self:flex-start}
.ft-bot{
  padding-block:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(201,214,203,.66);
}
.ft-bot a:hover{color:var(--brass-lt)}
.ft-word{
  font-family:var(--disp);font-weight:500;letter-spacing:-.05em;line-height:.86;
  font-size:clamp(1.75rem,7.4vw,7rem);color:rgba(201,214,203,.07);
  padding-bottom:clamp(.5rem,2vw,1.5rem);user-select:none;white-space:nowrap;
}

/* ---------- 21. UTILITIES ---------- */
.mt-s{margin-top:.75rem}.mt-m{margin-top:1.5rem}.mt-l{margin-top:2.5rem}.mt-xl{margin-top:clamp(3rem,6vw,5rem)}
.mb-m{margin-bottom:1.5rem}.mb-l{margin-bottom:2.5rem}.mb-xl{margin-bottom:clamp(3rem,6vw,5rem)}
.row{display:flex;gap:.75rem;flex-wrap:wrap}
.row-c{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.center{text-align:center}
.center .lede{margin-inline:auto}
.mxw-s{max-width:34rem}.mxw-m{max-width:44rem}.mxw-l{max-width:56rem}
.sticky{position:sticky;top:6.5rem}

/* ---------- 22. REVEAL ---------- */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--e),transform .9s var(--e)}
[data-rv].in{opacity:1;transform:none}
[data-rv-d="1"]{transition-delay:.08s}
[data-rv-d="2"]{transition-delay:.16s}
[data-rv-d="3"]{transition-delay:.24s}
[data-rv-d="4"]{transition-delay:.32s}
[data-rv-d="5"]{transition-delay:.4s}

/* ---------- 23. RESPONSIVE ---------- */
@media (max-width:1080px){
  .nav-menu,.nav-cta .btn:not(.nav-book){display:none}
  .burger{display:grid}
  .ft-top{grid-template-columns:repeat(2,1fr)}
  .mason{columns:2}
  .cluster .lay-a{width:100%}
  .cluster .lay-b{width:52%;bottom:-12%}
  .sticky{position:static}
}
@media (max-width:860px){
  .g-3,.g-4,.g-2{grid-template-columns:1fr}
  .stat-cards{grid-template-columns:repeat(2,1fr)}
  .est-grid{grid-template-columns:1fr}
  .fspan-2{grid-column:span 1}
  .rrow{grid-template-columns:minmax(0,1fr) auto;gap:.875rem 1rem;align-items:start}
  .rrow-n{display:none}
  .rrow-spec{grid-column:1/-1;order:3}
  .rrow-price{order:2;text-align:right}
  .rrow-go{display:none}
  .rrow-thumb{display:block;grid-column:1/-1;order:4;border-radius:var(--r-m);overflow:hidden;aspect-ratio:16/9;margin-top:.5rem}
  .rrow-thumb img{width:100%;height:100%;object-fit:cover}
  .trow,.trow-h{grid-template-columns:minmax(0,1fr) auto}
  .trow-cfg{grid-column:1/-1;order:3}
  .pn{grid-template-columns:1fr}
  .pn a:last-child{text-align:left}
  .hero-cue{display:none}
  .spec{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .stat-cards{grid-template-columns:1fr 1fr;gap:.5rem}
  .stat-row{margin-top:-3rem}
  .mason{columns:1}
  .lbox-p,.lbox-n{top:auto;bottom:1rem;transform:none}
  .lbox-p{left:calc(50% - 3.5rem)}
  .lbox-n{right:calc(50% - 3.5rem)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-rv]{opacity:1;transform:none}
  .peek{display:none}
}
@media print{
  .nav,.drawer,.peek,.lbox,.cta-band,.hero-cue,.marq{display:none!important}
  body::after{display:none}
}


/* ============================================================
   24. SECTION SPACING SAFETY NET
   A .sect-t only has top padding. If the next block introduces a
   different background, its content would butt straight into the
   colour change. Give it bottom padding in exactly those cases.
   ============================================================ */
.sect-t:has(+ .bg-mist),
.sect-t:has(+ .bg-paper),
.sect-t:has(+ .bg-forest),
.sect-t:has(+ .bg-moss),
.sect-t:has(+ .cta-band),
.sect-t:has(+ .ft),
.sect:has(+ .cta-band),
.sect-b:has(+ .cta-band){padding-bottom:var(--sect)}
/* fallback for engines without :has() */
@supports not selector(:has(*)){
  .sect-t{padding-bottom:var(--sect)}
}

/* ============================================================
   25. MOBILE HARDENING
   ============================================================ */

/* iOS zooms the whole page when a focused input is under 16px.
   Force 16px on every text control so the client's phone demo
   never jumps. */
.field input,.field select,.field textarea{font-size:1rem}

/* Comfortable touch targets on any touch device */
@media (pointer:coarse){
  .btn{padding:1rem 1.5rem}
  .btn-sm{padding:.8125rem 1.25rem}
  .gtab{padding:.75rem 1.125rem}
  .stepper button{width:2.75rem;height:2.75rem}
  .seg button{padding:.8125rem 1rem}
  .acc summary{padding-block:1.125rem}
  .nav-menu a{padding-block:.5rem}
  .ft-links a{padding-block:.1875rem}
  .trow,.rrow{min-height:3rem}
}

/* Long unbroken strings (emails, phone numbers) must never push
   a layout sideways on a narrow screen. */
.citem dd,.ft-links a,.rrow-spec,.trow-cfg,.acc-b{overflow-wrap:anywhere}

@media (max-width:1080px){
  /* the drawer must scroll if the phone is short */
  .drawer{overflow-y:auto;justify-content:flex-start;padding-top:6rem}
  .drawer-logo{height:3.5rem}
}

@media (max-width:860px){
  /* rate table header had 3 labels in a 2-column grid, so "Rate"
     wrapped onto its own row and misaligned. Hide it; each row is
     self-describing on mobile. */
  .trow-h{display:none}
  .trow{grid-template-columns:minmax(0,1fr) auto;row-gap:.375rem}
  .est-out{flex-direction:column;align-items:flex-start}
  .est-out .btn{width:100%;justify-content:center}
  .stepper{flex-wrap:wrap}
  .stepper .small{flex:1 0 100%}
  /* layered cluster overlapped its own caption card on small screens */
  .cluster .lay-b{display:none}
  .cluster .lay-tag{position:static;max-width:none;margin-top:1rem;box-shadow:var(--sh-1)}
  .banner-body{padding-top:7.5rem}
}

@media (max-width:640px){
  /* display type: drop the mobile floor so long headlines don't
     wrap to five lines inside a 320-360px column */
  .xp-num{font-size:clamp(2.25rem,11vw,3rem)}
  .hero-body{padding-bottom:clamp(6.5rem,22vw,9rem)}
  .hero-acts .btn{flex:1 1 100%;justify-content:center}
  .row .btn,.hero-acts .btn,.mt-l .btn{flex:1 1 auto}
  .est-total{font-size:clamp(2rem,11vw,2.75rem)}
  .ft-top{grid-template-columns:1fr;gap:2rem}
  .ft-word{font-size:clamp(1.5rem,9vw,3rem)}
  .marq-t>span{gap:1.25rem;padding-right:1.25rem}
  .marq-t>span>span{font-size:.875rem}
  .marq-t>span>span::after{margin-left:1.25rem}
}

@media (max-width:480px){
  /* the nav had logo + wordmark + button + burger competing for
     ~340px. Drop the wordmark; the badge carries the brand. */
  .nav-logo{height:3.25rem}
  .nav.solid .nav-logo{height:2.875rem}
  .nav-book{padding:.75rem 1rem;font-size:.8125rem}
  .stat-cards{grid-template-columns:1fr}
  .stat-c{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.875rem 1rem}
  .stat-l{margin-top:0}
  .stat-l span{text-align:right}
  .stat-l br{display:none}
  .crumb{font-size:.5625rem}
}

@media (max-width:380px){
  .nav-book span.btn-arw{display:none}
  .chip{font-size:.5625rem;padding:.25rem .5rem}
}


/* ============================================================
   26. TEXT-OVER-PHOTO LEGIBILITY
   Scrims handle the general case, but a photo can always have a
   bright patch exactly where a line of text lands. A soft shadow
   guarantees the floor.
   ============================================================ */
.hero h1,.hero-sub,.hero .meta,.hero-cue,
.banner h1,.banner .lede,.banner .meta,.banner .crumb,
.strip-b h3,.strip-b .meta,
.dtile-b h3,.dtile-t,
.realm-b h3,.realm-b p,
.fig-cap h3,.fig-cap .meta,
.mason figcaption{
  text-shadow:0 1px 2px rgba(11,35,24,.42), 0 2px 20px rgba(11,35,24,.32);
}
.hero h1 em{text-shadow:0 1px 3px rgba(11,35,24,.55), 0 2px 22px rgba(11,35,24,.38)}
/* glass chips over photos need a touch more separation too */
.chip-glass{background:rgba(11,35,24,.34);border-color:rgba(255,255,255,.28)}


/* ============================================================
   27. FILM BAND
   Poster + play button. Click plays the full film with sound,
   because a 104-second film with a soundtrack deserves to be
   watched deliberately, not used as muted wallpaper.
   ============================================================ */
.film{position:relative;overflow:hidden;isolation:isolate;
  background:var(--leaf-d) repeat 0 0/var(--leaf-size) var(--forest);color:var(--haze)}
.film-inner{position:relative;border-radius:var(--r-xl);overflow:hidden;isolation:isolate}
.film-media{position:relative;aspect-ratio:16/9;background:var(--forest);color:var(--haze)}
.film-media img,.film-media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.film-media video{opacity:0;transition:opacity .7s var(--e);z-index:2}
.film.playing .film-media video{opacity:1}
.film-media::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,35,24,.34) 0%,rgba(11,35,24,.12) 42%,rgba(11,35,24,.80) 100%);
  transition:opacity .7s var(--e);
}
.film.playing .film-media::after{opacity:0}
.film-body{
  position:absolute;inset:auto 0 0 0;z-index:4;
  padding:clamp(1.25rem,3vw,2.75rem);color:#fff;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  transition:opacity .6s var(--e),transform .6s var(--e);
}
.film.playing .film-body{opacity:0;transform:translateY(10px);pointer-events:none}
.film-body h2{color:#fff;font-size:clamp(1.375rem,3.4vw,2.75rem);letter-spacing:-.04em;line-height:1.04;margin-top:.75rem;max-width:24ch}
.film-body p{color:rgba(255,255,255,.82);font-size:.9375rem;font-weight:300;margin-top:.75rem;max-width:44ch}

.film-play{
  position:absolute;inset:0;z-index:5;display:grid;place-items:center;
  background:none;cursor:pointer;transition:opacity .5s var(--e);
}
.film.playing .film-play{opacity:0;pointer-events:none}
.film-play span{
  width:clamp(4rem,8vw,5.75rem);height:clamp(4rem,8vw,5.75rem);border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
  transition:transform .55s var(--e),background .4s;
}
.film-play:hover span{transform:scale(1.08);background:rgba(255,255,255,.26)}
.film-play svg{width:clamp(1.125rem,2vw,1.5rem);height:auto;color:#fff;margin-left:.15em}
.film-play::after{
  content:attr(data-label);position:absolute;
  bottom:calc(50% - clamp(4rem,8vw,5.75rem));left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.78);white-space:nowrap;
}
/* pulse ring, purely decorative */
.film-play span::before{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  animation:filmPulse 3.2s var(--e-io) infinite;
}
@keyframes filmPulse{
  0%{transform:scale(.92);opacity:.85}
  70%{transform:scale(1.18);opacity:0}
  100%{transform:scale(1.18);opacity:0}
}
.film-close{
  position:absolute;top:clamp(.75rem,2vw,1.25rem);right:clamp(.75rem,2vw,1.25rem);z-index:6;
  width:2.5rem;height:2.5rem;border-radius:50%;display:none;place-items:center;
  background:rgba(11,35,24,.55);border:1px solid rgba(255,255,255,.3);color:#fff;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.film.playing .film-close{display:grid}
.film-close svg{width:.875rem;height:.875rem}
.film-note{margin-top:.875rem;color:rgba(201,214,203,.72)}
@media (max-width:640px){
  .film-body{position:static;padding:1.25rem 0 0;color:var(--haze)}
  .film-body h2{color:var(--cream)}
  .film.playing .film-body{opacity:1;transform:none;pointer-events:auto}
  .film-play::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .film-play span::before{animation:none}
}


/* ============================================================
   28. FOOTER TEXT WEIGHT
   Address, strapline and "Landline" were reading as dim green on
   dark green. The footer is the last thing on every page and the
   address has to be readable, so lift it close to white.
   ============================================================ */
.ft .small{color:rgba(233,240,233,.92)}
.ft .small a{color:#fff}
.ft .small a:hover{color:var(--brass-lt)}
.ft-links a{color:rgba(233,240,233,.88)}
.ft h4{color:var(--brass-lt)}

/* the credit line is uppercase mono at 66% haze; the heart stays pure white
   so it reads as a mark rather than another glyph */
.ft-heart{
  width:.8125rem;height:.8125rem;display:inline-block;vertical-align:-.12em;
  color:#fff;margin-inline:.1em;
}

/* texture scale tracks the viewport, so it reads the same weight on a phone
   as on a desktop rather than becoming a coarse wallpaper */
@media (max-width:860px){ :root{ --leaf-size:440px } }
@media (max-width:480px){ :root{ --leaf-size:320px } }
/* respect a preference for reduced visual noise */
@media (prefers-contrast:more){
  .bg-paper,.bg-cream,.bg-forest,.bg-moss,.film,.ft,body{background-image:none}
}