/* =====================================================
   ELITE GREEN ARC PROPERTIES - Homepage
   Design: "Architectural Ink" - dark-dominant canvas,
   copper accent, hard geometry, oversized numerals.
   Pure HTML / CSS / vanilla JS (no React, no build step)
   ===================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* dark canvas */
  --ink:         #0A2C21;
  --ink-2:       #0E3A2B;
  --ink-3:       #15493A;

  /* light canvas */
  --paper:       #EFEDE7;
  --paper-2:     #E3E0D7;

  /* type colour */
  --on-dark:     #F0EEE8;
  --on-dark-mut: #9BB0A5;
  --on-light:    #14201A;
  --on-light-mut:#5C5952;

  /* accent - brand gold (from the logo) */
  --cu:          #B8862E;
  --cu-hi:       #D9A855;
  --cu-lo:       #8A6220;

  --line-d:      rgba(240,238,232,.15);
  --line-l:      rgba(20,32,26,.16);

  --wa:          #25d366;

  /* type */
  --display: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --accent:  "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .8s;

  --pad: clamp(20px, 5vw, 72px);
  --radius: 0;                  /* hard edges are the point */
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--on-light);
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.02; }
p{ margin:0 0 1.1em; }
address{ font-style:normal; }
::selection{ background:var(--cu); color:#fff; }

:focus-visible{ outline:2px solid var(--cu); outline-offset:3px; }

/* ---------- 3. HELPERS ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.wrap{ width:100%; max-width:1320px; margin-inline:auto; padding-inline:var(--pad); }
.display{ font-family:var(--display); font-weight:800; letter-spacing:-.01em; }

.gold-text{
  background-image:linear-gradient(180deg, var(--cu-hi) 0%, var(--cu) 52%, var(--cu-lo) 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* eyebrow - a filled copper square, not a hairline */
.kicker{
  display:flex; align-items:center; gap:13px;
  font-family:var(--body); font-size:10px; font-weight:600;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--cu); margin:0 0 26px;
}
.kicker span{ width:9px; height:9px; background:currentColor; display:block; flex:none; }
.kicker.light{ color:var(--cu-hi); }

.sec__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.1rem, 5vw, 4.4rem);
  line-height:1.06; letter-spacing:-.015em;
  color:var(--on-light);
  margin:0 0 22px;
}
.sec__title em{
  font-family:var(--accent); font-style:italic; font-weight:400;
  letter-spacing:-.01em; color:var(--cu);
}
.sec__title.light{ color:var(--on-dark); }
.sec__title.light em{ color:var(--cu-hi); }

.sec__sub{
  max-width:60ch; color:var(--on-light-mut);
  font-size:clamp(.95rem, 1.1vw, 1.05rem);
}
.folio .sec__sub,
.standard .sec__sub{ color:var(--on-dark-mut); }

/* ---------- 4. BUTTONS ---------- */
.btn{
  --btn-pad: 16px 32px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--btn-pad);
  font-family:var(--body); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:background-color .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease);
}
.btn em{ font-style:normal; transition:transform .35s var(--ease); }
.btn:hover em{ transform:translate(3px,-3px); }
.btn--sm{ --btn-pad: 12px 22px; font-size:10px; }
.btn--full{ width:100%; }

.btn--gold{ color:#fff; background:var(--cu); }
.btn--gold:hover{ background:var(--cu-lo); }

.btn--outline{ color:var(--on-light); border-color:var(--line-l); background:transparent; }
.btn--outline:hover{ border-color:var(--cu); color:var(--cu); }

.btn--ghost{ color:#fff; border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); }
.btn--ghost:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.btn--ghostdark{ color:var(--on-dark); border-color:var(--line-d); }
.btn--ghostdark:hover{ border-color:var(--cu); color:var(--cu-hi); }

/* ---------- 5. PRELOADER ---------- */
/* White curtain, dark logo, spinning gold ring. The wordmark is 3.12:1, so the
   ring is sized to hold it at a legible width rather than shrinking the logo to
   fit a small circle. Ring colours are keyed to white, not the old dark ground. */
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:#fff;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ text-align:center; }
.preloader__mark{
  position:relative; display:grid; place-items:center;
  width:min(220px, 60vw); aspect-ratio:1; margin:0 auto;
  border:1px solid rgba(8,50,31,.10); border-radius:50%;
}
/* one ring only - the gold arc rides the same circle as the faint track */
.preloader__mark::before{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:2px solid transparent; border-top-color:var(--cu); border-right-color:var(--cu-hi);
  animation:loaderSpin 1.15s linear infinite;
}
.preloader__mark img{
  position:relative; z-index:1;
  display:block; width:min(152px, 40vw); height:auto;
  animation:logoBreathe 1.8s var(--ease) infinite;
}
@keyframes loaderSpin{ to{ transform:rotate(360deg); } }
@keyframes logoBreathe{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.62; transform:scale(.96); } }

/* ---------- 6. NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  background:#fff;
  border-bottom:1px solid var(--line-l);
  transition:transform .5s var(--ease), box-shadow .45s var(--ease);
}
.nav__inner{
  max-width:1440px; margin-inline:auto;
  padding:28px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:padding .45s var(--ease);
}
/* Already white at rest, so sticking only adds lift off the content below. */
.nav.is-stuck{
  box-shadow:0 10px 30px rgba(20,32,26,.09);
}
.nav.is-stuck .nav__inner{ padding-block:18px; }
.nav.is-hidden{ transform:translateY(-100%); }

.nav__brand{ display:flex; align-items:center; gap:13px; flex:none; }
.nav__logo{ height:46px; width:auto; display:block; transition:height .4s var(--ease); }
.nav.is-stuck .nav__logo{ height:38px; }

.nav__menu{ display:flex; align-items:center; gap:2px; }
.nav__link{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px;
  font-size:13px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--on-light-mut);
  transition:color .3s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:16px; right:16px; bottom:2px; height:2px;
  background:var(--cu); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after{ transform:scaleX(1); }
.nav__link:hover,
.nav__link.is-active{ color:var(--on-light); }

/* "Projects" is a group label in the menu, not a destination - it must not
   read as clickable, so no pointer, no hover colour and no underline. */
.nav__link--static{ cursor:default; }
.nav__link--static::after{ display:none; }
.nav__link--static:hover{ color:var(--on-light-mut); }
.nav__link--static:focus-visible{ outline:2px solid var(--cu); outline-offset:2px; }
.nav__dropdown{ position:relative; }
.nav__caret{ font-size:14px; line-height:1; transition:transform .3s var(--ease); }
.nav__submenu{
  position:absolute; top:calc(100% + 8px); left:50%; min-width:190px;
  padding:8px; background:#fff; border:1px solid var(--line-l);
  box-shadow:0 18px 40px rgba(20,32,26,.14); opacity:0; visibility:hidden;
  transform:translate(-50%,10px); transition:opacity .25s, visibility .25s, transform .25s var(--ease);
}
.nav__submenu::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.nav__submenu a{
  display:block; padding:11px 14px; color:var(--on-light-mut);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  transition:color .25s, background-color .25s;
}
.nav__submenu a:hover,
.nav__submenu a:focus-visible,
.nav__submenu a[aria-current="page"]{ color:var(--on-light); background:rgba(184,134,46,.14); }
.nav__dropdown:hover .nav__submenu,
.nav__dropdown:focus-within .nav__submenu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.nav__dropdown:hover .nav__caret,
.nav__dropdown:focus-within .nav__caret{ transform:rotate(180deg); }

.nav__right{ display:flex; align-items:center; gap:14px; flex:none; }

.burger{ display:none; width:26px; height:16px; position:relative; }
.burger span{
  position:absolute; left:0; width:100%; height:2px; background:var(--on-light);
  transition:transform .4s var(--ease), opacity .3s var(--ease), background-color .4s var(--ease);
}
.burger span:nth-child(1){ top:0; }
.burger span:nth-child(2){ top:7px; }
.burger span:nth-child(3){ top:14px; }
.burger.is-open span{ background:var(--on-light); }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 7. DRAWER ---------- */
.drawer{
  position:fixed; inset:0; z-index:880;
  background:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:40px;
  padding:110px var(--pad) 48px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
}
.drawer.is-open{ clip-path:inset(0 0 0 0); }
.drawer__nav{ display:flex; flex-direction:column; }
.drawer__nav a,
.drawer__nav .drawer__label{
  display:flex; align-items:baseline; gap:18px;
  padding:16px 0; border-bottom:1px solid var(--line-l);
  font-family:var(--display); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(1.7rem,7vw,2.4rem);
  color:var(--on-light);
  opacity:0; transform:translateY(20px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
.drawer.is-open .drawer__nav a,
.drawer.is-open .drawer__nav .drawer__label{ opacity:1; transform:none; }
.drawer__nav a:hover{ color:var(--cu); }
.drawer__nav .drawer__label{ color:var(--on-light-mut); cursor:default; }
.drawer__nav a i,
.drawer__nav .drawer__label i{
  font-style:normal; font-family:var(--body); font-size:10px; font-weight:600;
  letter-spacing:.2em; color:var(--cu);
}
.drawer__subnav{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px 0 4px 28px; }
.drawer__nav .drawer__subnav a{
  padding:8px 0; border:0; font-family:var(--body); font-size:.72rem;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--cu-lo);
}
.drawer__nav .drawer__subnav a[aria-current="page"]{ color:var(--on-light); }
.drawer__foot{ display:flex; flex-direction:column; gap:20px; }
.drawer__foot p{ margin:0; font-size:14px; letter-spacing:.04em; color:var(--on-light-mut); }
.drawer__foot span{ color:var(--cu); }

/* ---------- 8. HERO SLIDER ---------- */
.hero{
  /* autoplay duration - JS reads this value, keep it in whole seconds */
  --hero-dur: 7s;
  --hero-tabs: 112px;

  position:relative; min-height:100svh; width:100%;
  overflow:hidden; background:var(--ink);
  isolation:isolate;
}

.hero__stage{ position:absolute; inset:0; }
.hslide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition:opacity 1.05s var(--ease), visibility 0s linear 1.05s;
}
.hslide.is-active{
  opacity:1; visibility:visible; z-index:1;
  transition:opacity 1.05s var(--ease), visibility 0s;
}

.hslide__media{ position:absolute; inset:-8% 0; will-change:transform; }
.hslide__media img{
  width:100%; height:100%; display:block; object-fit:cover;
  transform:scale(1.12);
  filter:saturate(.88) contrast(1.04);
}
.hslide.is-active .hslide__media img{ animation:heroZoom 9s var(--ease) forwards; }
@keyframes heroZoom{ from{ transform:scale(1.12); } to{ transform:scale(1); } }

.hslide__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,11,12,.394) 0%, rgba(11,11,12,.135) 30%, rgba(11,11,12,.394) 68%, rgba(11,11,12,.534) 100%),
    linear-gradient(90deg, rgba(11,11,12,.439) 0%, rgba(11,11,12,.191) 46%, rgba(11,11,12,0) 76%);
}

.hslide__content{
  position:absolute; z-index:2; left:0; right:0;
  bottom:calc(var(--hero-tabs) + clamp(30px,5vh,64px));
  width:100%; max-width:1320px; margin-inline:auto;
  padding-inline:var(--pad);
}

.hslide__content > *{
  opacity:0; transform:translateY(30px);
  transition:opacity .85s var(--ease) var(--d,0s), transform .85s var(--ease) var(--d,0s);
}
.hslide.is-active .hslide__content > *{ opacity:1; transform:none; }
.hslide__content .hero__eyebrow{ --d:.22s; }
.hslide__content .hero__title{   --d:.34s; }
.hslide__content .hero__tag{     --d:.46s; }
.hslide__content .hero__cta{     --d:.58s; }

.hero__eyebrow{
  display:flex; align-items:center; gap:13px;
  font-size:10px; font-weight:600; letter-spacing:.32em; text-transform:uppercase;
  color:var(--cu-hi); margin:0 0 22px;
}
.hero__eyebrow span{ width:9px; height:9px; background:currentColor; flex:none; }
.hero__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.6rem, 7vw, 6.2rem);
  line-height:.95; letter-spacing:-.02em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 20px;
}
.hero__title--compact{
  font-size:clamp(1.3rem, 3.5vw, 3.1rem);
}
.hero__tag{
  font-size:clamp(.8rem,1.15vw,1rem); font-weight:400;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.82); margin:0 0 36px;
}
/* a slide with no tag line: keep the buttons off the title */
.hero__title + .hero__cta{ margin-top:16px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; }

/* category tabs */
.hero__tabs{
  position:absolute; z-index:4; left:0; right:0; bottom:0;
  width:100%; max-width:1320px; margin-inline:auto;
  padding-inline:var(--pad);
  display:grid; grid-template-columns:repeat(3,1fr);
}
.htab{
  position:relative;
  border-top:1px solid rgba(255,255,255,.18);
  margin:0; padding:22px 20px 28px 0;
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--body); text-align:left; cursor:pointer;
  color:rgba(255,255,255,.55);
  transition:color .4s var(--ease);
}
.htab:hover{ color:#fff; }
.htab:focus-visible{ outline:1px solid var(--cu); outline-offset:3px; color:#fff; }
.htab.is-active{ color:#fff; }
.htab__no{
  font-family:var(--display); font-size:11px; font-weight:700;
  letter-spacing:.24em; color:var(--cu); transition:color .4s var(--ease);
}
.htab.is-active .htab__no{ color:var(--cu-hi); }
.htab__name{
  font-family:var(--display); font-weight:600;
  font-size:clamp(.85rem,1.2vw,1.05rem); line-height:1.2; letter-spacing:-.01em;
  text-transform:uppercase;
}
.htab__bar{
  position:absolute; top:-1px; left:0; width:0; height:2px;
  background:var(--cu);
}
.htab.is-active .htab__bar{ animation:htabFill var(--hero-dur) linear forwards; }
.hero.is-paused .htab.is-active .htab__bar{ animation-play-state:paused; }
@keyframes htabFill{ from{ width:0; } to{ width:100%; } }

.hero__scroll{
  position:absolute; z-index:4; right:var(--pad);
  bottom:calc(var(--hero-tabs) + 26px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:9px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.hero__scroll i{ width:1px; height:52px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; }
.hero__scroll i::after{
  content:""; position:absolute; inset:0; background:var(--cu);
  animation:scrollLine 2.1s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)} }

/* ---------- 8b. PAGE HEADER (inner pages) ---------- */
.phead{
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
  min-height:46vh;
  padding:clamp(130px,17vh,200px) 0 clamp(44px,6vh,72px);
  background:var(--ink);
}
.phead__media{ position:absolute; inset:0; }
.phead__media img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.82) contrast(1.05);
  transform:scale(1.06);
}
.phead--elite-aura .phead__media picture{ display:block; width:100%; height:100%; }
.phead--elite-aura .phead__media img{
  object-position:center center; filter:saturate(.9) contrast(1.04); transform:scale(1.02);
}
.phead__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,44,33,.84) 0%, rgba(10,44,33,.5) 46%, rgba(10,44,33,.92) 100%),
    linear-gradient(90deg, rgba(10,44,33,.82) 0%, rgba(10,44,33,.36) 56%, rgba(10,44,33,0) 86%);
}
.phead__inner{ position:relative; z-index:2; }
.phead .kicker{ margin-bottom:20px; }
.phead__title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.1rem,6vw,4.4rem); line-height:1;
  letter-spacing:-.02em; text-transform:uppercase;
  color:#fff; margin:0 0 20px;
}
.crumb{
  display:flex; align-items:center; gap:11px;
  font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.crumb a{ color:var(--cu-hi); transition:color .3s var(--ease); }
.crumb a:hover{ color:#fff; }
.crumb i{ font-style:normal; opacity:.45; }

/* ---------- 9. ABOUT ---------- */
.about{ padding:clamp(78px,10vw,140px) 0 0; background:var(--paper); }
.about > .wrap > .kicker{
  gap:16px;
  font-size:clamp(1rem,1.4vw,1.25rem);
  letter-spacing:.22em;
  margin-bottom:clamp(24px,3vw,38px);
}
.about > .wrap > .kicker span{ width:13px; height:13px; }
.about__head{
  font-family:var(--display); font-weight:800;
  max-width:920px;
  font-size:clamp(.825rem,1.4vw,1.375rem);
  line-height:1.45; letter-spacing:-.02em;
  margin:0 0 clamp(22px,2.5vw,32px); color:var(--on-light);
}
.about__head .w{
  display:inline-block;
  opacity:0; transform:translateY(70%) rotate(2deg);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.about__head.is-in .w{ opacity:1; transform:none; }
.about__head .em{
  font-family:var(--accent); font-style:italic; font-weight:400;
  letter-spacing:-.01em; color:var(--cu);
}

.about__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px);
  align-items:start;
}
.about__copy p{ color:var(--on-light-mut); font-size:clamp(.95rem,1.05vw,1.03rem); }
/* opening statement of the About copy - sits above the body text, below the headline */
.about__copy .about__lead{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.02rem,1.35vw,1.26rem); line-height:1.45; letter-spacing:-.01em;
  color:var(--on-light); margin:0 0 18px;
}
.about__copy .btn{ margin-top:16px; }

.about__fig{
  position:relative; margin:0; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:4/3;
}
.about__fig img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); }
.about__fig figcaption{
  position:absolute; left:24px; bottom:24px; z-index:2;
  display:flex; flex-direction:column; line-height:1;
  color:#fff;
}
.about__fig figcaption b{ font-size:10px; font-weight:600; letter-spacing:.3em; }
.about__fig figcaption i{
  font-style:normal; font-family:var(--display); font-weight:800;
  font-size:36px; letter-spacing:-.01em; text-transform:uppercase;
  color:var(--cu-hi); margin-top:8px;
}
.about__fig::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(11,11,12,.72) 100%);
}

/* stats - inverted band, oversized numerals */
.stats{ margin-top:clamp(64px,8vw,110px); background:var(--ink); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:clamp(26px,3.2vw,42px) 24px; position:relative; text-align:center; }
.stat + .stat::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line-d);
}
.stat b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(1.9rem,3.5vw,3.2rem); line-height:.9; letter-spacing:-.02em;
  color:var(--on-dark);
}
.stat b em{ font-style:normal; color:var(--cu); }
.stat p{
  margin:11px 0 0; font-size:9px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--on-dark-mut);
}

/* ---------- 10. VERTICALS ---------- */
.verticals{ padding:clamp(80px,11vw,150px) 0; background:var(--paper-2); }
.verticals .sec__title{
  max-width:920px;
  font-size:clamp(1.65rem,2.8vw,2.75rem);
  line-height:1.1;
  letter-spacing:-.02em;
}
.vgrid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:clamp(44px,5vw,68px);
  background:var(--line-l);          /* the gap becomes a hairline grid */
  border:1px solid var(--line-l);
}
/* two-up variant: the cards split the row instead of sitting in the first
   half of a four-column track, and the media runs wider to suit it */
.vgrid--duo{ grid-template-columns:repeat(2,1fr); }
.vgrid--duo .vcard__img{ aspect-ratio:16/10; }
.vcard{
  background:var(--paper);
  display:flex; flex-direction:column;
  transition:background-color .5s var(--ease);
}
.vcard:hover{ background:var(--ink); }
.vcard__img{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.vcard__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
  filter:saturate(.85) contrast(1.03);
}
.vcard:hover .vcard__img img{ transform:scale(1.06); filter:saturate(1.02); }
.vcard__body{ padding:clamp(24px,2.8vw,36px); flex:1; display:flex; flex-direction:column; }
.vcard__no{
  font-family:var(--display); font-size:clamp(2rem,3vw,2.8rem); font-weight:800;
  line-height:1; letter-spacing:-.02em; color:var(--cu);
  margin-bottom:14px;
}
.vcard h3{
  font-family:var(--display); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(1.3rem,1.9vw,1.7rem);
  margin:0 0 6px; color:var(--on-light);
  transition:color .5s var(--ease);
}
.vcard__role{
  font-size:10px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--cu); margin:0 0 18px;
}
.vcard__txt{
  color:var(--on-light-mut); font-size:.94rem; flex:1;
  transition:color .5s var(--ease);
}
.vcard__link{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--cu); padding-bottom:5px; border-bottom:1px solid currentColor;
  transition:gap .35s var(--ease);
}
.vcard__link em{ font-style:normal; }
.vcard__link:hover{ gap:16px; }
/* inverted card on hover */
.vcard:hover h3{ color:var(--on-dark); }
.vcard:hover .vcard__txt{ color:var(--on-dark-mut); }
.vcard:hover .vcard__link{ color:var(--cu-hi); }
.verticals__cta{
  display:flex;
  justify-content:center;
  margin-top:clamp(30px,4vw,48px);
}

/* ---------- 10B. WHAT WE BUILD ---------- */
.whatbuild{
  padding:clamp(60px,8vw,96px) 0;
  background:var(--paper);
}
.whatbuild__grid{
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(36px,5vw,64px);
  align-items:stretch;
}
.whatbuild__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  padding-block:clamp(8px,1.4vw,18px);
}
.whatbuild .kicker{ margin-bottom:14px; }
.whatbuild .sec__title{
  font-size:clamp(1.8rem,3.2vw,3.15rem);
  line-height:1.08;
  margin-bottom:16px;
}
.whatbuild__media{
  position:relative;
  margin:0;
  min-height:560px;
  height:100%;
  overflow:hidden;
}
.whatbuild__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.whatbuild__media:hover img{ transform:scale(1.035); }
.whatbuild__media::after{
  content:"";
  position:absolute;
  inset:48% 0 0;
  background:linear-gradient(transparent,rgba(10,44,33,.82));
}
.whatbuild__media figcaption{
  position:absolute;
  z-index:1;
  left:clamp(24px,3vw,42px);
  right:clamp(24px,3vw,42px);
  bottom:clamp(24px,3vw,38px);
  color:var(--on-dark);
  text-transform:uppercase;
}
.whatbuild__media figcaption span{
  display:block;
  font-size:10px;
  letter-spacing:.24em;
  color:var(--cu-hi);
  margin-bottom:5px;
}
.whatbuild__media figcaption b{ font-size:clamp(1.2rem,2vw,1.7rem); letter-spacing:.02em; }
.whatbuild__intro{ max-width:620px; color:var(--on-light-mut); font-size:.9rem; line-height:1.65; }
.whatbuild__pillars{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:clamp(22px,3vw,32px) 0;
  border-top:1px solid var(--line-l);
  border-left:1px solid var(--line-l);
}
.whatbuild__item{
  display:flex;
  gap:14px;
  padding:clamp(16px,1.8vw,22px);
  border-right:1px solid var(--line-l);
  border-bottom:1px solid var(--line-l);
}
.whatbuild__item > span{ color:var(--cu); font-weight:700; font-size:.72rem; }
.whatbuild__item h3{ font-size:.92rem; margin-bottom:6px; color:var(--on-light); }
.whatbuild__item p{ margin:0; color:var(--on-light-mut); font-size:.78rem; line-height:1.55; }
.whatbuild .btn{ --btn-pad:12px 20px; font-size:9px; }

/* Alternating variant, used on the What We Do page so consecutive detail
   sections don't read as one long column. Flip only applies where the grid is
   actually two columns - below 980px it stacks, and media must stay on top. */
.whatbuild--flip{ background:var(--paper-2); }
@media (min-width:981px){
  .whatbuild--flip .whatbuild__grid{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); }
  .whatbuild--flip .whatbuild__media{ order:2; }
  .whatbuild--flip .whatbuild__content{ order:1; }
}
/* Clear the fixed header when jumping to a section anchor. */
.whatbuild[id]{ scroll-margin-top:112px; }

/* ---------- 10C. WHY CHOOSE US ---------- */
.whyus{
  padding:clamp(68px,9vw,112px) 0;
  background:var(--paper-2);
}
.whyus__head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  align-items:end;
  gap:clamp(32px,6vw,84px);
  margin-bottom:clamp(36px,5vw,58px);
}
.whyus__head .sec__title{
  max-width:680px;
  font-size:clamp(1.65rem,2.8vw,2.75rem);
  line-height:1.1;
  letter-spacing:-.02em;
  margin-bottom:0;
}
.whyus__intro{
  max-width:54ch;
  margin:0 0 6px;
  color:var(--on-light-mut);
  font-size:.92rem;
}
.whyus__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line-l);
  border:1px solid var(--line-l);
}
.whyus__card{
  position:relative;
  min-height:260px;
  padding:clamp(24px,2.6vw,34px);
  background:var(--paper);
  transition:background-color .4s var(--ease), transform .4s var(--ease);
}
.whyus__card:hover{ z-index:1; background:#f8f5ee; transform:translateY(-4px); }
.whyus__card > span{
  position:absolute;
  top:22px;
  right:24px;
  color:rgba(20,32,26,.18);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
}
.whyus__card svg{
  width:34px;
  height:34px;
  margin-bottom:clamp(34px,4vw,54px);
  fill:none;
  stroke:var(--cu);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.whyus__card h3{ margin-bottom:11px; font-size:1.04rem; line-height:1.35; color:var(--on-light); }
.whyus__card p{ max-width:34ch; margin:0; color:var(--on-light-mut); font-size:.82rem; line-height:1.65; }

/* ---------- 10D. HOW WE DELIVER ---------- */
.delivery{
  padding:clamp(68px,9vw,112px) 0;
  background:var(--ink-2);
  color:var(--on-dark);
}
.delivery__head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:clamp(32px,6vw,88px);
  align-items:end;
  margin-bottom:clamp(36px,5vw,58px);
}
.delivery__head .sec__title{
  font-size:clamp(1.9rem,3.4vw,3.25rem);
  margin-bottom:0;
}
.delivery__intro{
  max-width:52ch;
  margin:0 0 6px;
  color:var(--on-dark-mut);
  font-size:.92rem;
}
.delivery__steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);
  position:relative;
}
.delivery__steps::before{
  content:"";
  position:absolute;
  z-index:0;
  top:58px;
  left:9%;
  right:9%;
  height:1px;
  background:linear-gradient(90deg,var(--cu),rgba(217,168,85,.28));
}
.delivery__step{
  position:relative;
  z-index:1;
  min-height:315px;
  padding:clamp(24px,2.4vw,32px);
  padding-top:108px;
  background:var(--paper);
  color:var(--on-light);
  border-top:3px solid var(--cu);
  box-shadow:0 16px 42px rgba(0,0,0,.14);
  transition:background-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.delivery__step:hover{ background:#f7f4ed; transform:translateY(-7px); box-shadow:0 24px 54px rgba(0,0,0,.22); }
.delivery__no{
  position:absolute;
  top:18px;
  right:22px;
  color:rgba(20,32,26,.16);
  font-family:var(--display);
  font-size:2.35rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
}
.delivery__icon{
  position:absolute;
  top:30px;
  left:clamp(24px,2.4vw,32px);
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  background:var(--ink-2);
  border:4px solid var(--paper);
  box-shadow:0 0 0 1px var(--cu);
  border-radius:50%;
}
.delivery__icon svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:var(--cu-hi);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.delivery__label{
  margin:0 0 10px;
  color:var(--cu-lo);
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.delivery__step h3{ margin-bottom:12px; color:var(--on-light); font-size:1.08rem; line-height:1.35; }
.delivery__step > p:last-child{ margin:0; color:var(--on-light-mut); font-size:.82rem; line-height:1.65; }

/* ---------- 11. SIGNATURE PORTFOLIO ---------- */
.folio{
  padding:clamp(80px,11vw,140px) 0;
  background:#fff; color:var(--on-light);
  position:relative; overflow:hidden;
}
/* centred call to action under the portfolio slider */
.folio__foot{
  position:relative; z-index:2;
  margin-top:clamp(34px,4vw,54px);
  text-align:center;
}
.folio__head{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:clamp(34px,4vw,56px);
  padding-bottom:24px; border-bottom:1px solid var(--line-l);
}
.folio__head .kicker{ margin:0; color:var(--cu); }
.folio__nav{ display:flex; align-items:center; gap:14px; }
.folio__arrow{
  width:46px; height:46px; border:1px solid var(--line-l);
  color:var(--on-light); display:grid; place-items:center; font-size:15px;
  transition:background-color .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
}
.folio__arrow:hover{ background:var(--cu); color:#fff; border-color:var(--cu); }
.folio__count{
  font-family:var(--display); font-size:12px; font-weight:600;
  letter-spacing:.2em; color:var(--on-light-mut);
}
.folio__count b{ color:var(--cu); font-weight:800; }
.folio__count i{ font-style:normal; opacity:.5; }

.folio__stage{ position:relative; z-index:2; }
.slide{
  display:none;
  grid-template-columns:1.25fr .75fr; gap:clamp(28px,4vw,60px);
  align-items:center;
  max-width:1320px; margin-inline:auto; padding-inline:var(--pad);
}
.slide.is-active{ display:grid; animation:slideIn .8s var(--ease) both; }
@keyframes slideIn{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:none;} }

.slide__img{ overflow:hidden; border-radius:var(--radius); aspect-ratio:16/9; }
.slide__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease); filter:saturate(.9);
}
.slide:hover .slide__img img{ transform:scale(1.04); }

.slide__loc{
  font-size:10px; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color:var(--cu); margin:0 0 16px;
}
.slide__body h3{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.6vw,3.2rem); line-height:.98;
  color:var(--on-light); margin:0 0 16px;
}
.slide__meta{
  font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-light-mut); margin:0 0 20px;
}
.slide__meta span{ color:var(--cu); margin-inline:10px; }
.slide__txt{ color:var(--on-light-mut); font-size:.96rem; margin-bottom:30px; }
.slide__cta{ display:flex; flex-wrap:wrap; gap:12px; }
.folio .btn--ghostdark{ color:var(--on-light); border-color:var(--line-l); }
.folio .btn--ghostdark:hover{ color:var(--cu-lo); border-color:var(--cu); }

.brochure-strip{ padding:clamp(58px,7vw,88px) 0; background:var(--paper-2); }
.brochure-strip__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:36px; padding-block:clamp(26px,4vw,48px);
  border-top:1px solid var(--line-l); border-bottom:1px solid var(--line-l);
}
.brochure-strip .kicker{ margin-bottom:14px; }
.brochure-strip h2{
  margin:0 0 12px; max-width:760px; color:var(--on-light);
  font-family:var(--display); font-size:clamp(1.65rem,3.2vw,2.8rem); line-height:1.08;
}
.brochure-strip p:last-child{ max-width:720px; margin:0; color:var(--on-light-mut); }
.brochure-strip .btn{ flex:none; }

@media (max-width:700px){
  .brochure-strip__inner{ align-items:flex-start; flex-direction:column; }
}

/* ---------- LEGAL PAGES ---------- */
.phead--legal .phead__media img{ filter:saturate(.55) brightness(.72); }
.legal-page{ padding:clamp(72px,10vw,128px) 0; background:var(--paper); }
.legal-page__grid{ display:grid; grid-template-columns:minmax(190px,280px) minmax(0,820px); gap:clamp(48px,8vw,120px); align-items:start; }
.legal-page__aside{ position:sticky; top:110px; padding-top:8px; }
.legal-page__aside > p:nth-child(2){ margin:0 0 24px; color:var(--on-light-mut); font-size:.82rem; }
.legal-page__content{ min-width:0; }
.legal-page__intro{ margin:0 0 54px; color:var(--on-light); font-size:clamp(1.08rem,1.7vw,1.35rem); line-height:1.75; }
.legal-page__content > section{ display:grid; grid-template-columns:46px 1fr; gap:22px; padding:34px 0; border-top:1px solid var(--line-l); }
.legal-page__content > section > span{ color:var(--cu-lo); font-size:.7rem; font-weight:700; letter-spacing:.18em; }
.legal-page__content h2{ margin:0 0 14px; color:var(--on-light); font-family:var(--display); font-size:clamp(1.2rem,2vw,1.65rem); line-height:1.25; }
.legal-page__content p{ color:var(--on-light-mut); font-size:.94rem; line-height:1.8; }
.legal-page__content p:last-child{ margin-bottom:0; }
.legal-page__content a{ color:var(--cu-lo); text-decoration:underline; text-underline-offset:3px; }
.foot__top--legal{ grid-template-columns:2fr 1fr 1fr; }
@media (max-width:800px){
  .legal-page__grid{ grid-template-columns:1fr; gap:42px; }
  .legal-page__aside{ position:static; }
  .foot__top--legal{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .legal-page__content > section{ grid-template-columns:34px 1fr; gap:12px; }
  .foot__top--legal{ grid-template-columns:1fr; }
}

/* ---------- 12. GALLERY ---------- */
.gallery{ padding:clamp(80px,11vw,140px) 0; background:var(--ink-2); }
.gallery .sec__title{ color:var(--on-dark); }
.gallery .sec__title em{ color:var(--cu-hi); }
.gallery .sec__sub{ color:var(--on-dark-mut); }
.ggrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:210px;
  gap:12px;
  margin-top:clamp(44px,5vw,68px);
}
.gitem{
  position:relative; margin:0; overflow:hidden; border-radius:var(--radius);
  grid-row:span 1; cursor:zoom-in;
}
.gitem:focus-visible{ outline:2px solid var(--cu-hi); outline-offset:4px; }
.gitem--tall{ grid-row:span 2; }
.gitem--wide{ grid-column:span 2; }
/* Gallery page only: a pair of wide project hero banners. Own modifier so the
   3-column .ggrid on the home page is untouched. Fixed 210px rows are replaced
   by an aspect ratio - these sources are ~2.2-3:1 and would crop hard. */
.ggrid--pair{ grid-template-columns:1fr 1fr; grid-auto-rows:auto; }
.ggrid--pair .gitem{ grid-row:auto; aspect-ratio:2/1; }
@media (max-width:760px){
  .ggrid--pair{ grid-template-columns:1fr; }
  .ggrid--pair .gitem{ aspect-ratio:16/9; }
}
.gitem img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease), filter .6s var(--ease);
  filter:saturate(.8) contrast(1.05);
}
.gitem:hover img{ transform:scale(1.05); filter:saturate(1.02); }
.gitem::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(11,11,12,.86) 100%);
  opacity:.9; transition:opacity .5s var(--ease);
}
.gitem:hover::after{ opacity:1; }
.gitem figcaption{
  position:absolute; z-index:2; left:22px; right:22px; bottom:20px;
  display:flex; align-items:baseline; gap:14px; color:#fff;
  transform:translateY(6px); opacity:.9;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.gitem:hover figcaption{ transform:none; opacity:1; }
.gitem figcaption b{
  font-family:var(--display); font-size:13px; font-weight:800;
  letter-spacing:.1em; color:var(--cu-hi);
}
.gitem figcaption span{ font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }

.lightbox{
  position:fixed; inset:0; z-index:10000; display:grid; place-items:center;
  padding:clamp(54px,7vw,92px); background:rgba(3,13,10,.94);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__figure{
  width:min(1180px,100%); height:min(78vh,780px); margin:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.lightbox__image{
  width:100%; height:calc(100% - 38px); object-fit:contain;
  filter:none; transform:none; box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.lightbox__caption{
  min-height:22px; color:var(--on-dark); font-size:12px; font-weight:500;
  letter-spacing:.14em; text-align:center; text-transform:uppercase;
}
.lightbox__close,
.lightbox__arrow{
  position:absolute; z-index:2; display:grid; place-items:center;
  border:1px solid rgba(240,238,232,.3); color:#fff;
  transition:background-color .25s, border-color .25s, color .25s;
}
.lightbox__close:hover,
.lightbox__arrow:hover{ background:var(--cu); border-color:var(--cu); }
.lightbox__close{ top:22px; right:24px; width:46px; height:46px; font-size:28px; line-height:1; }
.lightbox__arrow{ top:50%; width:48px; height:64px; transform:translateY(-50%); font-size:20px; }
.lightbox__arrow--prev{ left:22px; }
.lightbox__arrow--next{ right:22px; }

@media (max-width:700px){
  .lightbox{ padding:70px 16px 88px; }
  .lightbox__figure{ height:72vh; }
  .lightbox__arrow{ top:auto; bottom:20px; width:52px; height:46px; transform:none; }
  .lightbox__arrow--prev{ left:calc(50% - 60px); }
  .lightbox__arrow--next{ right:calc(50% - 60px); }
}

/* ---------- 13. SUSTAINABILITY ---------- */
.sustain{ padding:clamp(80px,11vw,140px) 0; background:var(--paper-2); overflow:hidden; }

/* Sits on the same 1320 grid as .wrap so both edges line up with the meters
   below and every other section. The panel still rides over the image via its
   negative margin-left - that overlap is internal and does not affect the edges. */
.sustain__top{
  display:grid; grid-template-columns:1.08fr .92fr;
  align-items:stretch;
  max-width:1320px; margin-inline:auto;
  padding-inline:var(--pad);
}
/* Stretch, not centre: the copy panel is far taller than a 16/11 box, which
   left grey bands above and below the photo. The floor guards a short panel. */
.sustain__fig{
  position:relative; margin:0; overflow:hidden;
  min-height:clamp(300px, 38vw, 480px);
}
.sustain__fig img{ width:100%; height:100%; object-fit:cover; transform:scale(1.1); }
.sustain__tag{
  position:absolute; left:0; bottom:0; z-index:2;
  padding:15px 24px;
  background:var(--cu); color:#fff;
  font-size:10px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
}
.sustain__panel{
  position:relative; z-index:2;
  margin-left:clamp(-96px,-5vw,-32px);
  background:var(--paper);
  padding:clamp(30px,3.4vw,52px);
  border-top:3px solid var(--cu);
}
/* The panel copy column is only ~515px, not the full page width the shared
   .sec__title scale assumes. Sized so the longer of the two authored lines
   ("Considered for the Planet.") still fits on one line. */
.sustain__panel .sec__title{ margin-bottom:18px; font-size:clamp(1.5rem, 2.5vw, 2.25rem); }
.sustain__txt{
  color:var(--on-light-mut); font-size:clamp(.94rem,1.02vw,1rem);
  margin-bottom:28px;
}

/* metrics rail - hairline grid, same language as the verticals cards */
.meters{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:clamp(52px,6vw,88px);
  background:var(--line-l);
  border:1px solid var(--line-l);
}
.meter{ background:var(--paper); padding:clamp(26px,3vw,42px); }
.meter b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem,4.2vw,3.4rem); line-height:1;
  letter-spacing:-.02em; color:var(--on-light);
}
.meter b em{ font-style:normal; font-size:.45em; color:var(--cu); margin-left:3px; }
.meter p{
  margin:14px 0 18px; font-size:10px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--on-light-mut);
}
.meter .bar{
  display:block; height:4px; width:100%;
  background:rgba(20,32,26,.12); position:relative; overflow:hidden;
}
.meter .bar::after{
  content:""; position:absolute; inset:0 auto 0 0; width:0;
  background:var(--cu);
  transition:width 1.6s var(--ease);
}
.meter.is-in .bar::after{ width:var(--v); }

/* ---------- 13b. PROJECT DETAIL PAGE ---------- */

/* --- editorial project overview --- */
.project-overview{
  position:relative; overflow:hidden;
  padding:clamp(78px,10vw,132px) 0;
  background:#f7f6f1;
}
.project-overview__head{ max-width:820px; margin:0 auto clamp(48px,7vw,86px); text-align:center; }
.project-overview__head p{
  margin:0 0 14px; color:var(--on-light);
  font-size:clamp(.9rem,1.3vw,1.08rem); letter-spacing:.02em;
}
.project-overview__head h2{
  color:var(--cu); font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.35rem,4.4vw,4rem); font-weight:400; line-height:1.05;
}
.project-overview__grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:clamp(44px,7vw,104px); align-items:center;
}
.project-overview__media{
  position:relative; isolation:isolate; margin:0; aspect-ratio:1.18/1;
}
.project-overview__media::before{
  content:""; position:absolute; z-index:-1;
  width:88%; aspect-ratio:1; left:-10%; top:-12%;
  border:1px solid rgba(184,134,46,.32); border-radius:50%;
}
.project-overview__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 58%;
  box-shadow:0 24px 70px rgba(10,44,33,.14);
}
.project-overview__content{ min-width:0; }
.project-overview__content > p{
  margin:0 0 18px; color:var(--on-light-mut);
  font-size:clamp(.9rem,1.05vw,1rem); line-height:1.85;
}
.project-overview__details{
  display:grid; grid-template-columns:1fr 1fr;
  margin:30px 0 0; border-top:1px solid var(--line-l); border-left:1px solid var(--line-l);
}
.project-overview__details > div{
  min-width:0; padding:16px 18px;
  border-right:1px solid var(--line-l); border-bottom:1px solid var(--line-l);
}
.project-overview__details dt{
  margin-bottom:5px; color:var(--cu-lo);
  font-size:8.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}
.project-overview__details dd{
  margin:0; color:var(--on-light); font-family:var(--display);
  font-size:.84rem; font-weight:600; line-height:1.45; overflow-wrap:anywhere;
}
.project-overview__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.project-overview__actions .btn{ border-radius:999px; }
.project-overview__actions .btn span{ margin-left:5px; font-size:1.15em; }

/* --- overview: copy left, key facts right --- */
.pjintro{ padding:clamp(78px,10vw,132px) 0; background:var(--paper); }
.pjintro__grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px);
  align-items:start;
}
.pjintro__copy p{ color:var(--on-light-mut); font-size:clamp(.95rem,1.05vw,1.03rem); }

.facts{ border-top:1px solid var(--line-l); }
.fact{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--line-l);
}
.fact dt{
  font-size:9.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-light-mut); min-width:112px;
}
.fact dd{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:clamp(.95rem,1.2vw,1.1rem); color:var(--on-light);
}
.fact dd em{ font-style:normal; color:var(--cu); }

/* --- unit plans --- */
.units{ padding:clamp(78px,10vw,132px) 0; background:var(--paper-2); }
.floor-plan-visual{
  width:min(100%,940px); margin:clamp(38px,5vw,62px) auto 0;
  background:var(--paper); border:1px solid var(--line-l);
  box-shadow:0 22px 60px rgba(10,44,33,.1);
}
.floor-plan-visual > a{ position:relative; display:block; overflow:hidden; background:#fff; }
.floor-plan-visual img{
  width:100%; height:auto; display:block;
  transition:transform .7s var(--ease),filter .4s var(--ease);
}
.floor-plan-visual > a:hover img{ transform:scale(1.012); filter:saturate(1.04); }
.floor-plan-visual__action{
  position:absolute; right:16px; bottom:16px;
  padding:12px 16px; color:#fff; background:rgba(10,44,33,.92);
  border:1px solid rgba(255,255,255,.28);
  font-size:9px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.floor-plan-visual figcaption{
  padding:15px 18px; color:var(--on-light-mut);
  font-size:10px; font-weight:600; letter-spacing:.08em; text-align:center; text-transform:uppercase;
}
.ugrid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  margin-top:clamp(40px,5vw,64px);
  background:var(--line-l); border:1px solid var(--line-l);
}
.unit{ background:var(--paper); padding:clamp(26px,3.2vw,44px); }
.unit__no{
  font-family:var(--display); font-size:10px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--cu);
}
.unit__size{
  display:flex; align-items:baseline; gap:10px; margin:10px 0 4px;
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; color:var(--on-light);
}
.unit__size em{ font-style:normal; font-size:.4em; color:var(--cu); }
.unit__type{
  font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--on-light-mut); margin:0 0 22px;
}
.rooms{ margin:0; border-top:1px solid var(--line-l); }
.rooms div{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; border-bottom:1px solid var(--line-l);
}
.rooms dt{ font-size:.88rem; color:var(--on-light-mut); }
.rooms dd{
  margin:0; font-family:var(--display); font-weight:600;
  font-size:.88rem; color:var(--on-light); white-space:nowrap;
}

/* --- specifications (on ink) --- */
.specs{ padding:clamp(78px,10vw,132px) 0; background:var(--ink); color:var(--on-dark); }
.specs .sec__title{ color:var(--on-dark); }
.specs .sec__title em{ color:var(--cu-hi); }
.specs .sec__sub{ color:var(--on-dark-mut); }
.sgrid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  margin-top:clamp(40px,5vw,64px);
  background:var(--line-d); border:1px solid var(--line-d);
}
.spec{ background:var(--ink); padding:clamp(22px,2.6vw,32px); }
.spec h4{
  font-family:var(--display); font-weight:700; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cu-hi);
  margin:0 0 12px;
}
.spec p{ margin:0; font-size:.9rem; color:var(--on-dark-mut); line-height:1.7; }

/* --- amenities --- */
.amens{ padding:clamp(78px,10vw,132px) 0; background:var(--paper); }
.agrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:clamp(40px,5vw,64px);
  background:var(--line-l); border:1px solid var(--line-l);
}
.amen{
  background:var(--paper); padding:clamp(26px,3vw,40px);
  display:flex; flex-direction:column; gap:12px;
}
.amen b{
  font-family:var(--display); font-size:1.6rem; font-weight:800;
  line-height:1; letter-spacing:-.02em; color:var(--cu);
}
.amen span{
  font-family:var(--display); font-weight:600;
  font-size:clamp(.95rem,1.2vw,1.08rem); letter-spacing:-.01em;
  color:var(--on-light); line-height:1.3;
}

/* --- location advantage --- */
.locadv{ padding:clamp(78px,10vw,132px) 0; background:var(--paper-2); }
.lgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px);
  margin-top:clamp(40px,5vw,64px);
}
.loc h4{
  font-family:var(--display); font-size:10px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; color:var(--cu);
  margin:0 0 16px; padding-bottom:12px; border-bottom:1px solid var(--line-l);
}
.loc li{
  font-size:.9rem; color:var(--on-light-mut);
  padding:7px 0; border-bottom:1px solid var(--line-l);
}
.loc li:last-child{ border-bottom:0; }

/* --- portfolio slider with a single project: hide the pager --- */
.folio__nav.is-hidden{ display:none; }

/* ---------- 14. THE ELITE GREEN ARC STANDARD ---------- */
/* Authored as a two-line couplet and held on one line each above the phone
   breakpoint (nowrap below). .standard clips overflow, so the size has to keep
   the longer line inside the column or it would be cut off, not wrapped. */
.standard .sec__title{
  font-size:clamp(1.7rem, 3.4vw, 3.1rem);
  text-wrap:pretty;
}
@media (min-width:780px){
  .standard .sec__title span,
  .standard .sec__title em{ white-space:nowrap; }
}
.standard{
  padding:clamp(80px,11vw,140px) 0;
  background:var(--ink); color:var(--on-dark);
  overflow:hidden;
}
.marquee{
  margin-top:clamp(44px,5vw,68px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track{
  display:flex; gap:1px; width:max-content;
  animation:scrollX 46s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes scrollX{ to{ transform:translateX(-50%); } }

.scard{
  flex:none; width:min(330px, 78vw);
  padding:34px 30px;
  border:1px solid var(--line-d);
  background:var(--ink);
  transition:background-color .45s var(--ease), border-color .45s var(--ease);
}
.scard:hover{ background:var(--ink-3); border-color:var(--cu); }
.scard span{
  font-family:var(--display); font-size:2rem; font-weight:800;
  line-height:1; letter-spacing:-.02em; color:var(--cu);
  display:block; margin-bottom:16px;
}
.scard h4{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:1.15rem; text-transform:uppercase;
  margin:0 0 12px; color:var(--on-dark);
}
.scard p{ margin:0; font-size:.88rem; color:var(--on-dark-mut); line-height:1.7; }

/* ---------- CLIENT REVIEWS ---------- */
.reviews{ padding:clamp(68px,8vw,108px) 0; background:#fff; }
.reviews__head{ text-align:center; margin-bottom:clamp(34px,5vw,54px); }
.reviews__head .kicker{ justify-content:center; margin-bottom:14px; }
.reviews__head h2{ margin:0; color:var(--ink); font-family:Georgia,serif; font-size:clamp(2rem,3.6vw,3.25rem); font-weight:500; }
.reviews__dots{ display:flex; justify-content:center; align-items:center; gap:6px; margin-top:25px; }
.reviews__dots i{ width:5px; height:5px; border-radius:50%; background:var(--cu); }
.reviews__dots b{ width:38px; height:4px; border-radius:10px; background:var(--cu); }
.reviews__layout{ display:grid; grid-template-columns:280px minmax(0,1fr); gap:28px; align-items:stretch; }
.reviews__summary{ display:grid; grid-template-columns:58px 1fr; gap:14px; align-content:center; padding:22px 12px; }
.review-avatar{ display:grid; place-items:center; flex:none; width:54px; height:54px; border-radius:50%; background:var(--ink); color:#fff; font-weight:700; box-shadow:0 2px 7px rgba(10,44,33,.18); }
.review-avatar--brand{ background:var(--cu); font-size:.85rem; letter-spacing:.08em; }
.reviews__summary h3,.review-card h3{ margin:0; color:#252525; font-size:.86rem; line-height:1.35; }
.reviews__summary p{ margin:5px 0 0; color:#666; font-size:.72rem; }
.reviews__rating strong{ color:#f58220; font-size:1.4rem; }
.reviews__rating span,.review-card__stars{ color:#f58220; letter-spacing:2px; }
.reviews__powered b{ color:#4285f4; font-size:1rem; }
.reviews__button{ grid-column:1 / -1; justify-self:center; margin-top:8px; padding:10px 20px; border-radius:25px; background:#1677f2; color:#fff; font-size:.72rem; font-weight:600; box-shadow:0 3px 8px rgba(22,119,242,.28); }
.reviews__button span{ display:inline-grid; place-items:center; width:19px; height:19px; margin-left:4px; border-radius:50%; background:#fff; color:#4285f4; font-weight:800; }
.reviews__rail-wrap{ position:relative; min-width:0; }
.reviews__rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(250px,1fr); grid-template-rows:1fr; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.reviews__rail::-webkit-scrollbar{ display:none; }
.review-card{ min-height:280px; padding:22px 20px; background:#f7f7f7; scroll-snap-align:start; }
.review-card header{ display:flex; align-items:center; gap:12px; }
.review-card header > div:nth-child(2){ min-width:0; flex:1; }
.review-card header p{ margin:5px 0 0; color:#777; font-size:.7rem; }
.review-card header > b{ color:#4285f4; font-size:1rem; }
.review-card .review-avatar{ width:48px; height:48px; background:#5b2fb5; }
.review-card__stars{ margin:20px 0 12px; font-size:1.15rem; }
.review-card__text{ margin:0; color:#292929; font-size:.88rem; line-height:1.75; }
.reviews__arrow{ position:absolute; z-index:2; top:50%; width:38px; height:46px; transform:translateY(-50%); color:#777; background:rgba(255,255,255,.94); font-size:2rem; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.reviews__arrow--prev{ left:-18px; }
.reviews__arrow--next{ right:-18px; }
.reviews__arrow:hover{ color:var(--cu); }
@media (max-width:900px){
  .reviews__layout{ grid-template-columns:1fr; }
  .reviews__summary{ width:min(100%,420px); margin-inline:auto; }
  .reviews__rail{ grid-auto-columns:minmax(270px,72vw); }
  .reviews__arrow--prev{ left:-8px; }
  .reviews__arrow--next{ right:-8px; }
}
@media (max-width:560px){
  .reviews__rail{ grid-auto-columns:88%; }
  .review-card{ min-height:250px; }
}

/* ---------- 15. CTA / FORM ---------- */
.cta{ padding:clamp(80px,11vw,140px) 0; background:var(--paper-2); }
.cta__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px);
  align-items:start;
}
/* The copy column is ~580px, far narrower than the shared .sec__title scale,
   so the first authored line rewrapped into two. Size it to the column and
   hold each line together while the section is two columns. */
.cta .sec__title{
  font-size:clamp(1.45rem, 2.7vw, 2.1rem);
}
@media (min-width:981px){
  .cta .sec__title span,
  .cta .sec__title em{ white-space:nowrap; }
}
.cta__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
/* Contact block: label, link and address share one 13px baseline so the three
   lines read as a set. Only the value inside each line is emphasised. */
.cta__phone,
.cta__addr{
  font-size:13px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-light-mut);
}
.cta__phone{ margin:28px 0 0; letter-spacing:.18em; }
.cta__phone a{
  color:var(--cu); font-weight:700; border-bottom:2px solid var(--cu);
  font-size:1.35em; letter-spacing:.1em;
}
/* An email is ~33 characters - at the phone number's size, in caps, it overruns
   the column. Keep it as written and only slightly raised. */
.cta__phone a[href^="mailto:"]{
  font-size:1.1em; letter-spacing:.02em; text-transform:none;
}
.cta__addr{
  display:block; margin:16px 0 0; font-style:normal; line-height:1.9;
}

/* dark form panel against the light section */
.form{
  background:var(--ink);
  position:relative; border-radius:var(--radius); padding:clamp(26px,3.2vw,42px);
}
.form__trap{
  position:absolute !important; left:-10000px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:block; margin-bottom:18px; }
.field span{
  display:block; font-size:9.5px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:9px;
}
.field input,
.field select,
.field textarea{
  width:100%; padding:14px 16px;
  font-family:var(--body); font-size:14px; color:var(--on-dark);
  background:var(--ink-3);
  border:1px solid var(--line-d); border-radius:11px;
  transition:border-color .3s var(--ease);
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{ color:#6B6862; }
.field select option{ background:var(--ink-3); color:var(--on-dark); }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-color:var(--cu); }
.field.is-error input,
.field.is-error select,
.field.is-error textarea{ border-color:#E0553A; }
.form__note{
  margin:14px 0 0; font-size:12px; letter-spacing:.04em; min-height:18px;
  color:var(--cu-hi);
}
.form__note.is-bad{ color:#E0553A; }
.form button[type="submit"]:disabled{ cursor:wait; opacity:.68; }
.form button[type="submit"].is-sending{ pointer-events:none; }

/* Site-wide enquiry popup */
.enquiry-modal{
  position:fixed; inset:0; z-index:12000;
  display:grid; place-items:center; padding:20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.enquiry-modal.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.enquiry-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(3,17,13,.88);
  backdrop-filter:blur(7px);
}
.enquiry-modal__panel{
  position:relative; z-index:1;
  width:min(540px,100%); max-height:calc(100svh - 40px); overflow:auto;
  padding:clamp(24px,2.8vw,34px);
  background:var(--ink); color:var(--on-dark);
  border:1px solid var(--line-d);
  /* scoped rounding - the global --radius is 0 by design, so it is set here
     rather than on the token, which would round every card on the site */
  border-radius:20px;
  box-shadow:0 28px 90px rgba(0,0,0,.44);
  opacity:0; transform:translateY(24px) scale(.985);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  overscroll-behavior:contain;
  /* still scrollable on short screens - just without the visible track */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.enquiry-modal__panel::-webkit-scrollbar{ width:0; height:0; display:none; }
.enquiry-modal.is-open .enquiry-modal__panel{ opacity:1; transform:none; }
.enquiry-modal__close{
  position:absolute; top:12px; right:12px; z-index:2;
  width:36px; height:36px; display:grid; place-items:center;
  padding:0; border:1px solid var(--line-d); border-radius:50%; background:transparent;
  color:var(--on-dark); font-family:Arial,sans-serif; font-size:27px; line-height:1;
  cursor:pointer; transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.enquiry-modal__close:hover,
.enquiry-modal__close:focus-visible{ color:var(--ink); background:var(--cu-hi); border-color:var(--cu-hi); outline:none; }
.enquiry-modal__head{ padding-right:46px; margin-bottom:16px; }
.enquiry-modal__head .kicker{ margin-bottom:12px; color:var(--cu-hi); }
.enquiry-modal__head h2{
  max-width:420px; margin:0 0 8px;
  color:var(--on-dark); font-family:var(--display);
  font-size:clamp(1.3rem,2.2vw,1.75rem); line-height:1.15;
}
.enquiry-modal__head > p:last-child{
  max-width:430px; margin:0; color:var(--on-dark-mut); font-size:.8rem; line-height:1.6;
}
.form--popup{ padding:0; background:transparent; }
.form--popup .field{ margin-bottom:9px; }
.form--popup textarea{ min-height:56px; }
/* forms are the one place that departs from the global square-edge --radius;
   the rule lives on .field / .form .btn so every form matches the popup */
.form .btn{ border-radius:11px; }

@media (max-width:600px){
  .enquiry-modal{ padding:10px; align-items:end; }
  .enquiry-modal__panel{ width:100%; max-height:calc(100svh - 20px); padding:27px 18px 22px; border-radius:16px; }
  .enquiry-modal__close{ top:12px; right:12px; width:38px; height:38px; }
  .enquiry-modal__head{ padding-right:42px; margin-bottom:22px; }
  .enquiry-modal__head .kicker{ margin-bottom:14px; font-size:8.5px; }
  .enquiry-modal__head h2{ font-size:1.3rem; }
  .form--popup .form__row{ grid-template-columns:1fr; gap:0; }
}

/* ---------- 16. FOOTER ---------- */
.foot{
  background:#fff; color:var(--on-light);
  padding:clamp(64px,8vw,100px) 0 0;
  border-top:1px solid var(--line-l);
}
.foot__top{
  display:grid;
  grid-template-columns:1.5fr 1.2fr .9fr .9fr 1fr;
  gap:clamp(24px,3vw,44px);
  padding-bottom:clamp(44px,5vw,68px);
}
.foot__logo{ height:54px; width:auto; display:block; margin-bottom:22px; }
.foot__brand h3{
  font-family:var(--display); font-size:15px; font-weight:800;
  letter-spacing:.13em; line-height:1.3;
}
.foot__brand h3 sup{ font-size:.5em; }
/* Was a 33-character label in tracked-out 9px caps. Now a full sentence, so it
   is set as body copy - caps at .28em tracking would run to ~5 dense lines in
   this 273px column and read as a wall of spaced capitals. */
.foot__tagline{
  margin:10px 0 24px;
  font-size:.8rem; font-weight:400; line-height:1.75;
  letter-spacing:.01em; text-transform:none;
  color:var(--on-light-mut);
}
.foot__social{ display:flex; gap:8px; }
.foot__social a{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line-l);
  transition:background-color .35s var(--ease), border-color .35s var(--ease);
}
.foot__social svg{ width:16px; height:16px; fill:var(--on-light); transition:fill .35s var(--ease); }
.foot__social a:hover{ background:var(--cu); border-color:var(--cu); }
.foot__social a:hover svg{ fill:#fff; }

.foot__col h4{
  font-family:var(--display); font-size:10px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--on-light); margin:0 0 22px;
}
.foot__col h4.mt{ margin-top:30px; }
.foot__col li{ margin-bottom:12px; font-size:13.5px; }
.foot__col a{ color:var(--on-light-mut); transition:color .3s var(--ease); }
/* --cu-lo, not --cu: the brighter gold only reaches 3.2:1 on white. */
.foot__col a:hover{ color:var(--cu-lo); }
.foot__reach span{
  display:block; font-size:9px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--on-light); margin-bottom:4px;
}
.foot__reach address{ font-size:13px; line-height:1.75; color:var(--on-light-mut); }

.mapcard{
  position:relative; display:block; height:132px; overflow:hidden;
  border:1px solid var(--line-l);
  background:
    linear-gradient(rgba(20,32,26,.07) 1px, transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg, rgba(20,32,26,.07) 1px, transparent 1px) 0 0/26px 26px,
    var(--paper);
  transition:border-color .4s var(--ease);
}
.mapcard:hover{ border-color:var(--cu); }
.mapcard__pin{
  position:absolute; left:50%; top:50%; width:10px; height:10px;
  margin:-5px 0 0 -5px; background:var(--cu);
  box-shadow:0 0 0 0 rgba(196,99,42,.6);
  animation:ping 2.2s var(--ease) infinite;
}
@keyframes ping{ to{ box-shadow:0 0 0 26px rgba(196,99,42,0); } }
.mapcard__hint{
  position:absolute; left:0; right:0; bottom:10px; text-align:center;
  font-size:9px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--on-light-mut);
}
.foot__maplink{
  display:inline-block; margin-top:16px; font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--on-light);
}

.foot__bar{
  border-top:1px solid var(--line-l);
  padding:24px 0 32px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.foot__bar p{ margin:0; font-size:11.5px; letter-spacing:.04em; color:var(--on-light-mut); }
.foot__bar em{ font-style:normal; color:var(--on-light); }
.foot__legal{ display:flex; flex-wrap:wrap; gap:22px; }
.foot__legal a{ font-size:11.5px; color:var(--on-light-mut); transition:color .3s var(--ease); }
.foot__legal a:hover{ color:var(--cu-lo); }

/* ---------- 17. FLOATING ---------- */
.call-float{
  position:fixed;
  left:max(20px,env(safe-area-inset-left));
  bottom:max(20px,env(safe-area-inset-bottom));
  z-index:820;
  min-width:126px; height:52px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:0 19px 0 15px;
  color:#fff; background:var(--ink);
  border:1px solid var(--cu); border-radius:999px;
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  transition:transform .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.call-float svg{ width:22px; height:22px; fill:var(--cu-hi); flex:none; }
.call-float span{
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.call-float:hover,
.call-float:focus-visible{
  color:#fff; background:var(--ink-3); transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.3); outline:none;
}

.wa{
  position:fixed; right:20px; bottom:20px; z-index:820;
  width:52px; height:52px;
  display:grid; place-items:center;
  background:var(--wa);
  border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wa svg{ width:27px; height:27px; fill:#fff; }
.wa:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 12px 30px rgba(0,0,0,.28); }

.totop{
  position:fixed; right:20px; bottom:84px; z-index:820;
  width:46px; height:46px;
  display:grid; place-items:center; font-size:16px;
  color:#fff; background:var(--cu);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--cu-lo); }

/* ---------- 18. SCROLL REVEAL ---------- */
.reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.10s; }
.reveal[data-delay="2"]{ transition-delay:.20s; }
.reveal[data-delay="3"]{ transition-delay:.30s; }
.reveal[data-delay="4"]{ transition-delay:.40s; }

/* ---------- 19. RESPONSIVE ---------- */
@media (max-width:1100px){
  .foot__top{ grid-template-columns:1fr 1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
  .vgrid{ grid-template-columns:repeat(2,1fr); }
}
/* Nav collapses earlier than the rest of the layout: seven items at 13px need
   ~1205px before they crowd the logo and Enquire button. */
@media (max-width:1210px){
  .nav__menu{ display:none; }
  .burger{ display:block; }
}
@media (max-width:980px){
  .about__grid,
  .sustain__top,
  .cta__grid,
  .slide.is-active{ grid-template-columns:1fr; }
  .whatbuild__grid{ grid-template-columns:1fr; }
  .whatbuild__media{ min-height:0; height:auto; aspect-ratio:16/10; }
  .whatbuild__content{ padding-block:0; }
  .whyus__head{ grid-template-columns:1fr; align-items:start; }
  .whyus__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .delivery__head{ grid-template-columns:1fr; align-items:start; }
  .delivery__steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .delivery__steps::before{ display:none; }
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .stat + .stat::before{ display:none; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line-d); }
  .stat:nth-child(even)::after{
    content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:var(--line-d);
  }
  .about__fig{ aspect-ratio:16/10; }
  .sustain__fig{ aspect-ratio:16/10; min-height:0; }
  .sustain__top{ padding-inline:0; }
  .sustain__panel{ margin-left:0; padding-inline:var(--pad); border-top-width:2px; }
  .slide__img{ order:-1; }
}
@media (max-width:640px){
  .floor-plan-visual{ margin-top:32px; }
  .floor-plan-visual__action{ right:10px; bottom:10px; padding:10px 12px; font-size:8px; }
  .floor-plan-visual figcaption{ padding:12px; font-size:8px; line-height:1.6; }
  .call-float{
    left:max(16px,env(safe-area-inset-left));
    bottom:max(16px,env(safe-area-inset-bottom));
    min-width:0; width:52px; padding:0; border-radius:50%;
  }
  .call-float span{ display:none; }
  .vgrid{ grid-template-columns:1fr; }
  .whatbuild__pillars{ grid-template-columns:1fr; }
  .whyus__grid{ grid-template-columns:1fr; }
  .whyus__card{ min-height:0; }
  .delivery__steps{ grid-template-columns:1fr; }
  .delivery__step{ min-height:0; }
  .ggrid{ grid-template-columns:1fr 1fr; grid-auto-rows:160px; }
  .gitem--wide{ grid-column:span 2; }
  .gitem--tall{ grid-row:span 2; }
  .form__row{ grid-template-columns:1fr; }
  .meters{ grid-template-columns:1fr; }
  .foot__top{ grid-template-columns:1fr 1fr; }
  .foot__bar{ flex-direction:column; align-items:flex-start; }
  .btn{ --btn-pad:14px 24px; font-size:10px; }
  .nav__logo{ height:34px; }
  .nav.is-stuck .nav__logo{ height:30px; }
  .foot__logo{ height:46px; }
}
@media (max-width:420px){
  .foot__top{ grid-template-columns:1fr; }
  .stats__grid{ grid-template-columns:1fr; }
  .stat::before,
  .stat::after{ display:none !important; }
  .stat + .stat{ border-top:1px solid var(--line-d); }
}

/* hero slider - three tabs in one row, scroll cue steps aside */
@media (max-width:900px){
  .hero__tabs{ column-gap:18px; }
  .hero__scroll{ display:none; }
}
@media (max-width:640px){
  .hero{ --hero-tabs:108px; }
  .htab{ padding:15px 12px 19px 0; gap:5px; }
  .htab__name{ font-size:.85rem; }
}

/* ---------- BLOG & ARTICLES ---------- */
.phead--blog .phead__media img{ filter:saturate(.72) brightness(.72); }
.phead--blog .phead__title{
  max-width:900px; font-size:clamp(2rem,4.8vw,3.7rem); line-height:1.05;
  overflow-wrap:anywhere; text-wrap:balance;
}
.blog-index{ padding:clamp(76px,10vw,132px) 0; background:var(--paper); }
.blog-index__head{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(32px,7vw,100px); align-items:end; margin-bottom:clamp(44px,6vw,74px); }
/* The heading column is ~672px, not the full page width the shared .sec__title
   scale assumes, so "Make property decisions" was rewrapping into three lines. */
.blog-index__head .sec__title{ font-size:clamp(1.7rem, 3.1vw, 2.8rem); }
.blog-index__head .sec__sub{ margin:0 0 8px; }
.blog-feature{ display:grid; grid-template-columns:1.2fr .8fr; min-height:520px; background:var(--ink); color:var(--on-dark); }
.blog-feature__media{ min-height:420px; overflow:hidden; }
.blog-feature__media img,.blog-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease),filter .5s; }
.blog-feature:hover .blog-feature__media img,.blog-card:hover .blog-card__media img{ transform:scale(1.035); filter:saturate(1.05); }
.blog-feature__body{ display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,5vw,72px); }
.blog-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 20px; color:var(--on-dark-mut); font-size:.64rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.blog-meta span{ color:var(--cu-hi); }
.blog-meta i{ width:18px; height:1px; background:currentColor; opacity:.45; }
.blog-feature h2{ margin:0 0 22px; font-family:var(--display); font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; }
.blog-feature h2 a{ transition:color .3s; }
.blog-feature h2 a:hover{ color:var(--cu-hi); }
.blog-feature__body > p:not(.blog-meta){ color:var(--on-dark-mut); font-size:.94rem; }
.blog-read{ display:inline-flex; align-items:center; gap:12px; width:max-content; margin-top:16px; color:var(--cu-hi); font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.blog-read span{ transition:transform .3s var(--ease); }
.blog-read:hover span{ transform:translateX(6px); }
.blog-index__latest{ margin-top:clamp(72px,10vw,128px); }
.blog-index__latest > .kicker{ margin-bottom:28px; }
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card{ display:flex; flex-direction:column; min-width:0; border:1px solid var(--line-l); background:#f5f3ed; }
.blog-card__media{ display:block; aspect-ratio:4/3; overflow:hidden; }
.blog-card__body{ display:flex; flex:1; flex-direction:column; padding:26px; }
.blog-card .blog-meta{ color:var(--on-light-mut); margin-bottom:14px; }
.blog-card .blog-meta span{ color:var(--cu-lo); }
.blog-card h3{ margin:0 0 15px; font-family:var(--display); font-size:clamp(1.15rem,1.8vw,1.45rem); line-height:1.25; }
.blog-card h3 a{ transition:color .25s; }
.blog-card h3 a:hover{ color:var(--cu-lo); }
.blog-card__body > p:not(.blog-meta){ color:var(--on-light-mut); font-size:.82rem; line-height:1.7; }
.blog-card .blog-read{ margin-top:auto; padding-top:16px; color:var(--cu-lo); }
.blog-cta{ padding:clamp(66px,8vw,96px) 0; background:var(--ink-2); color:var(--on-dark); }
.blog-cta__inner{ display:flex; align-items:center; justify-content:space-between; gap:48px; }
.blog-cta h2{ margin:0 0 12px; font-family:var(--display); font-size:clamp(1.8rem,3.4vw,3rem); }
.blog-cta p:last-child{ max-width:680px; margin:0; color:var(--on-dark-mut); }
.blog-cta .btn{ flex:none; }

.article-page{ background:var(--paper); }
.article-hero{ padding:clamp(150px,18vw,230px) 0 clamp(62px,8vw,100px); background:var(--ink); color:var(--on-dark); }
.article-hero__inner{ max-width:1050px; }
.article-crumb{ margin-bottom:clamp(38px,6vw,70px); }
.article-hero .blog-meta{ margin-bottom:22px; }
.article-hero h1{
  max-width:980px; font-family:var(--display);
  font-size:clamp(2.15rem,4.7vw,4.25rem); line-height:1.04; letter-spacing:-.025em;
  overflow-wrap:anywhere; text-wrap:balance;
}
.article-hero__lead{ max-width:830px; margin:30px 0 0; color:var(--on-dark-mut); font-size:clamp(1rem,1.6vw,1.22rem); line-height:1.75; }
.article-cover{ position:relative; z-index:2; margin-top:-34px; }
.article-cover img{ width:100%; height:min(62vw,680px); object-fit:cover; }
.article-layout{ display:grid; grid-template-columns:220px minmax(0,780px); gap:clamp(44px,8vw,120px); justify-content:center; padding-top:clamp(68px,9vw,116px); padding-bottom:clamp(80px,11vw,148px); }
.article-aside{ position:sticky; top:110px; align-self:start; padding-top:8px; border-top:2px solid var(--cu); }
.article-aside span{ display:block; margin:18px 0 9px; color:var(--cu-lo); font-size:.65rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.article-aside p{ color:var(--on-light-mut); font-size:.75rem; }
.article-aside a{ color:var(--on-light); font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.article-content > section{ display:grid; grid-template-columns:38px 1fr; column-gap:18px; padding:0 0 52px; }
.article-content > section > span{ grid-row:1 / span 3; padding-top:8px; color:var(--cu-lo); font-size:.64rem; font-weight:700; letter-spacing:.15em; }
.article-content h2{ margin:0 0 18px; font-family:var(--display); font-size:clamp(1.45rem,2.7vw,2.15rem); line-height:1.2; }
.article-content p{ color:var(--on-light-mut); font-size:.98rem; line-height:1.85; }
.article-content p:last-child{ margin-bottom:0; }
.article-source,.article-note{ margin-top:12px; padding:25px 28px; border-left:3px solid var(--cu); background:var(--paper-2); }
.article-source strong,.article-note strong{ display:block; margin-bottom:8px; color:var(--on-light); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; }
.article-source a{ color:var(--cu-lo); font-size:.85rem; text-decoration:underline; text-underline-offset:3px; }
.article-note p{ font-size:.82rem; }
.related-posts{ padding:clamp(72px,9vw,118px) 0; background:var(--ink-2); color:var(--on-dark); }
.related-posts__head{ display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:34px; }
.related-posts__head .kicker{ margin:0; }
.related-posts__head > a{ color:var(--cu-hi); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.related-posts__grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-d); }
.related-posts__grid > a{ min-height:220px; padding:30px; border-right:1px solid var(--line-d); transition:background-color .3s; }
.related-posts__grid > a:last-child{ border-right:0; }
.related-posts__grid > a:hover{ background:rgba(255,255,255,.04); }
.related-posts__grid span{ color:var(--cu-hi); font-size:.62rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.related-posts__grid h3{ margin:24px 0; font-family:var(--display); font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.3; }
.related-posts__grid i{ color:var(--on-dark-mut); font-style:normal; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; }

@media (max-width:900px){
  .blog-index__head,.blog-feature{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .blog-card:last-child{ grid-column:1 / -1; }
  .blog-feature__media{ min-height:380px; }
  .article-layout{ grid-template-columns:1fr; }
  .article-aside{ position:static; }
}
@media (max-width:680px){
  .blog-grid,.related-posts__grid{ grid-template-columns:1fr; }
  .blog-card:last-child{ grid-column:auto; }
  .blog-feature__media{ min-height:280px; }
  .blog-cta__inner{ align-items:flex-start; flex-direction:column; }
  .article-content > section{ grid-template-columns:28px 1fr; gap:10px; }
  .related-posts__grid > a{ border-right:0; border-bottom:1px solid var(--line-d); }
  .related-posts__grid > a:last-child{ border-bottom:0; }
  .article-hero h1{ font-size:clamp(1.9rem,9vw,2.8rem); line-height:1.08; }
}

/* ---------- SUSTAINABILITY PAGE ---------- */
.phead--sustainability .phead__media img{ filter:saturate(.8) brightness(.72); }
.sustain-intro{ padding:clamp(76px,10vw,132px) 0; background:var(--paper); }
.sustain-intro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(42px,9vw,130px); align-items:start; }
.sustain-intro__copy{ padding-top:46px; }
.sustain-intro__copy p{ color:var(--on-light-mut); font-size:clamp(.95rem,1.3vw,1.08rem); line-height:1.85; }
.sustain-pillars{ padding:clamp(78px,10vw,134px) 0; background:var(--ink); color:var(--on-dark); }
.sustain-pillars__head{ max-width:820px; margin-bottom:clamp(44px,6vw,72px); }
.sustain-pillars .sec__title{ color:var(--on-dark); }
.sustain-pillars .sec__title em{ color:var(--cu-hi); }
.sustain-pillars__grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-d); border-left:1px solid var(--line-d); }
.sustain-pillar{ min-height:280px; padding:34px; border-right:1px solid var(--line-d); border-bottom:1px solid var(--line-d); }
.sustain-pillar > span{ color:var(--cu-hi); font-size:.65rem; font-weight:700; letter-spacing:.18em; }
.sustain-pillar h3{ margin:62px 0 16px; font-family:var(--display); font-size:clamp(1.15rem,2vw,1.55rem); }
.sustain-pillar p{ margin:0; color:var(--on-dark-mut); font-size:.82rem; line-height:1.75; }
.sustain-story,.sustain-cycle{ padding:clamp(78px,11vw,146px) 0; background:var(--paper); }
.sustain-story__grid,.sustain-cycle__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(42px,8vw,118px); align-items:center; }
.sustain-story__media{ position:relative; margin:0; min-height:620px; overflow:hidden; }
.sustain-story__media img,.sustain-cycle__media img{ width:100%; height:100%; object-fit:cover; }
.sustain-story__media figcaption{ position:absolute; left:0; bottom:0; padding:14px 20px; background:var(--ink); color:var(--on-dark-mut); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; }
.sustain-story__content > p:not(.kicker),.sustain-cycle__content > p:not(.kicker){ color:var(--on-light-mut); font-size:.94rem; line-height:1.8; }
.sustain-checks{ margin-top:30px; border-top:1px solid var(--line-l); }
.sustain-checks li{ position:relative; padding:15px 0 15px 26px; border-bottom:1px solid var(--line-l); color:var(--on-light); font-size:.78rem; }
.sustain-checks li::before{ content:""; position:absolute; left:1px; top:24px; width:8px; height:2px; background:var(--cu); }
.sustain-cycle{ background:var(--paper-2); }
.sustain-cycle__grid{ grid-template-columns:.95fr 1.05fr; }
.sustain-cycle__media{ order:2; height:620px; margin:0; overflow:hidden; }
.sustain-cycle__steps{ display:grid; grid-template-columns:1fr 1fr; margin-top:30px; border-top:1px solid var(--line-l); border-left:1px solid var(--line-l); }
.sustain-cycle__steps div{ min-height:125px; padding:20px; border-right:1px solid var(--line-l); border-bottom:1px solid var(--line-l); }
.sustain-cycle__steps b{ display:block; margin-bottom:9px; color:var(--cu-lo); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
.sustain-cycle__steps span{ color:var(--on-light-mut); font-size:.75rem; line-height:1.55; }
.sustain-reference{ padding:clamp(68px,8vw,102px) 0; background:var(--ink-2); color:var(--on-dark); }
.sustain-reference__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(42px,8vw,110px); align-items:center; }
.sustain-reference h2{ margin:0 0 15px; font-family:var(--display); font-size:clamp(1.7rem,3.4vw,3rem); line-height:1.1; }
.sustain-reference p:last-child{ max-width:720px; margin:0; color:var(--on-dark-mut); }
.sustain-reference__links{ border-top:1px solid var(--line-d); }
.sustain-reference__links a{ display:block; padding:20px 0; border-bottom:1px solid var(--line-d); color:var(--on-dark); font-size:.82rem; font-weight:600; transition:color .25s,padding-left .25s; }
.sustain-reference__links a:hover{ padding-left:8px; color:var(--cu-hi); }
.sustain-reference__links span{ display:block; margin-bottom:5px; color:var(--cu-hi); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; }
.sustain-quote{ align-self:center; padding:clamp(28px,4vw,48px); border-left:3px solid var(--cu); background:rgba(255,255,255,.04); }
.sustain-quote > span{ color:var(--cu-hi); font-family:Georgia,serif; font-size:4rem; line-height:.7; }
.sustain-quote p{ margin:18px 0 0; color:var(--on-light); font-family:var(--display); font-size:clamp(1.2rem,2.4vw,1.8rem); line-height:1.45; }

@media (max-width:900px){
  .sustain-intro__grid,.sustain-story__grid,.sustain-cycle__grid,.sustain-reference__inner{ grid-template-columns:1fr; }
  .sustain-intro__copy{ padding-top:0; }
  .sustain-pillars__grid{ grid-template-columns:1fr 1fr; }
  .sustain-story__media,.sustain-cycle__media{ height:auto; min-height:0; aspect-ratio:16/10; }
  .sustain-cycle__media{ order:0; }
}
@media (max-width:600px){
  .sustain-pillars__grid,.sustain-cycle__steps{ grid-template-columns:1fr; }
  .sustain-pillar{ min-height:230px; }
  .sustain-pillar h3{ margin-top:42px; }
}

/* ---------- CHANNEL PARTNER PAGE ---------- */
.phead--partner .phead__media img{ filter:saturate(.7) brightness(.7); }
.partner-intro{ padding:clamp(76px,10vw,132px) 0; background:var(--paper); }
.partner-intro__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(42px,9vw,130px); align-items:start; }
.partner-intro__copy{ padding-top:44px; }
.partner-intro__copy p{ color:var(--on-light-mut); font-size:clamp(.95rem,1.3vw,1.08rem); line-height:1.85; }
.partner-benefits{ padding:clamp(78px,10vw,132px) 0; background:var(--ink); color:var(--on-dark); }
.partner-benefits__head{ max-width:820px; margin-bottom:clamp(42px,6vw,70px); }
.partner-benefits .sec__title{ color:var(--on-dark); }
.partner-benefits .sec__title em{ color:var(--cu-hi); }
.partner-benefits__grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-d); border-left:1px solid var(--line-d); }
.partner-benefit{ min-height:320px; padding:30px; border-right:1px solid var(--line-d); border-bottom:1px solid var(--line-d); }
.partner-benefit > span{ color:var(--cu-hi); font-size:.65rem; font-weight:700; letter-spacing:.18em; }
.partner-benefit h3{ margin:72px 0 16px; font-family:var(--display); font-size:clamp(1.08rem,1.7vw,1.4rem); line-height:1.3; }
.partner-benefit p{ margin:0; color:var(--on-dark-mut); font-size:.78rem; line-height:1.7; }
.partner-process{ padding:clamp(80px,10vw,132px) 0; background:var(--paper); }
.partner-process__grid{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  gap:clamp(38px,6vw,88px); align-items:start;
}
.partner-process__media{ width:100%; height:auto; aspect-ratio:4/3; margin:0; overflow:hidden; }
.partner-process__media img{ width:100%; height:100%; object-fit:cover; }
.partner-process__content{ min-width:0; }
.partner-process__content .kicker{ margin-bottom:18px; }
.partner-process__content .sec__title{
  max-width:640px; margin-bottom:0;
  font-size:clamp(2rem,3.4vw,3.5rem); line-height:1.08;
}
.partner-steps{ margin-top:28px; border-top:1px solid var(--line-l); }
.partner-steps li{ display:grid; grid-template-columns:42px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line-l); }
.partner-steps li > span{ padding-top:4px; color:var(--cu-lo); font-size:.65rem; font-weight:700; letter-spacing:.15em; }
.partner-steps b{ display:block; margin-bottom:5px; color:var(--on-light); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.partner-steps p{ margin:0; color:var(--on-light-mut); font-size:.78rem; line-height:1.6; }
.partner-profile{ padding:clamp(66px,8vw,98px) 0; background:var(--paper-2); }
.partner-profile__inner{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(42px,9vw,130px); align-items:center; }
.partner-profile h2{ margin:0; font-family:var(--display); font-size:clamp(1.7rem,3.5vw,3rem); line-height:1.12; }
.partner-profile ul{ border-top:1px solid var(--line-l); }
.partner-profile li{ position:relative; padding:16px 0 16px 28px; border-bottom:1px solid var(--line-l); color:var(--on-light-mut); font-size:.82rem; }
.partner-profile li::before{ content:""; position:absolute; left:2px; top:24px; width:9px; height:2px; background:var(--cu); }
.partner-apply .form{ align-self:start; }

@media (max-width:1000px){
  .partner-benefits__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .partner-process__grid{ grid-template-columns:1fr; }
  .partner-process__media{ aspect-ratio:16/10; }
  .partner-process__content .sec__title{ max-width:620px; }
}
@media (max-width:800px){
  .partner-intro__grid,.partner-profile__inner{ grid-template-columns:1fr; }
  .partner-intro__copy{ padding-top:0; }
}
@media (max-width:560px){
  .partner-benefits__grid{ grid-template-columns:1fr; }
  .partner-benefit{ min-height:250px; }
  .partner-benefit h3{ margin-top:48px; }
}

/* ---------- 20. MOTION PREFERENCES ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,
  .about__head .w{ opacity:1 !important; transform:none !important; }
  .marquee__track{ animation:none; }

  /* hero slider: no ken burns, no autoplay clock, copy always visible */
  .hslide.is-active .hslide__media img{ animation:none !important; transform:none; }
  .hslide__content > *{ opacity:1 !important; transform:none !important; }
  .htab.is-active .htab__bar{ animation:none !important; width:100%; }
  .hero__scroll i::after{ animation:none; }
}

/* project detail page — responsive */
@media (max-width:980px){
  .project-overview__grid{ grid-template-columns:1fr; }
  .project-overview__media{ width:min(100%,760px); margin-inline:auto; }
  .project-overview__content{ width:min(100%,760px); margin-inline:auto; }
  .pjintro__grid,
  .ugrid,
  .sgrid{ grid-template-columns:1fr; }
  .agrid,
  .lgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .project-overview__head{ margin-bottom:42px; }
  .project-overview__head h2{ font-size:2.35rem; }
  .project-overview__media{ aspect-ratio:1/1; }
  .project-overview__details{ grid-template-columns:1fr; }
  .project-overview__actions{ flex-direction:column; }
  .project-overview__actions .btn{ width:100%; }
  .agrid,
  .lgrid{ grid-template-columns:1fr; }
}

/* ---------- ELITE BROOKVALE PROJECT PAGE ---------- */
.phead--brookvale{
  min-height:82svh;
  padding-bottom:clamp(50px,7vh,82px);
}
.phead--brookvale .phead__media img{
  object-position:center 46%;
  filter:saturate(.9) contrast(1.03);
  transform:scale(1.015);
}
.phead--brookvale .phead__scrim{
  background:
    linear-gradient(180deg,rgba(5,22,16,.62) 0%,rgba(5,22,16,.2) 35%,rgba(5,22,16,.9) 100%),
    linear-gradient(90deg,rgba(5,22,16,.88) 0%,rgba(5,22,16,.62) 36%,rgba(5,22,16,.05) 78%);
}
.phead--brookvale .phead__inner{ max-width:1320px; }
.phead--brookvale .phead__title{
  max-width:820px;
  font-size:clamp(3rem,7vw,6rem);
  text-wrap:balance;
}
.brookvale-hero__lead{
  max-width:680px;
  margin:24px 0 0;
  color:rgba(255,255,255,.82);
  font-size:clamp(.95rem,1.35vw,1.15rem);
  line-height:1.75;
}
.brookvale-hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:25px;
}
.brookvale-hero__badges span{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(10,44,33,.34);
  color:#fff;
  font-size:9px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  backdrop-filter:blur(7px);
}
.brookvale-hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.phead--brookvale .crumb{ margin-top:28px; }

.project-jump{
  position:sticky;
  top:70px;
  z-index:720;
  border-bottom:1px solid var(--line-l);
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 30px rgba(20,32,26,.07);
  backdrop-filter:blur(12px);
}
.project-jump__inner{
  display:flex;
  align-items:center;
  /* Centre the tabs when they fit. Below ~1024px the strip is wider than the
     column and has to scroll - plain "center" would push the first tab past the
     start edge where it can never be scrolled back to, so "safe" reverts to
     start-alignment exactly in that case. */
  justify-content:center;
  justify-content:safe center;
  overflow-x:auto;
  scrollbar-width:none;
}
.project-jump__inner::-webkit-scrollbar{ display:none; }
.project-jump a{
  position:relative;
  flex:none;
  padding:18px 20px;
  color:var(--on-light-mut);
  font-size:9px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:color .25s;
}
.project-jump a::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:2px;
  background:var(--cu);
  transform:scaleX(0);
  transition:transform .3s var(--ease);
}
.project-jump a:hover{ color:var(--cu-lo); }
.project-jump a:hover::after{ transform:scaleX(1); }

.project-overview--brookvale .project-overview__media{ aspect-ratio:1.36/1; }
.project-overview--brookvale .project-overview__media img{ object-position:center; }
.project-overview--brookvale .project-overview__details dd{ font-size:.78rem; }

/* Sai Siri Heritage runs a wider aerial render and an eight-row detail table */
.project-overview--heritage .project-overview__media{ aspect-ratio:1.31/1; }
.project-overview--heritage .project-overview__media img{ object-position:center; }
.project-overview--heritage .project-overview__details dd{ font-size:.78rem; }

.brookvale-highlights,
.brookvale-gallery{
  padding:clamp(82px,10vw,138px) 0;
  background:var(--ink);
  color:var(--on-dark);
}
.brookvale-section-head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.7fr);
  gap:clamp(36px,8vw,118px);
  align-items:end;
  margin-bottom:clamp(44px,6vw,76px);
}
/* These headings sit in a ~648px (section head) or ~565px (location) column,
   far narrower than the page-wide .sec__title scale they inherit, so the first
   authored line was rewrapping into three. Sized to the column instead. */
.brookvale-section-head .sec__title,
.brookvale-location__content .sec__title{
  font-size:clamp(1.75rem, 3.2vw, 2.9rem);
}
.brookvale-section-head .kicker{ margin-bottom:22px; }
.brookvale-section-head .sec__title{ margin-bottom:0; }
.brookvale-section-head > .sec__sub{ margin:0 0 8px; color:var(--on-dark-mut); }
.brookvale-section-head--light > .sec__sub{ color:var(--on-light-mut); }
.brookvale-highlights__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-d);
  border-left:1px solid var(--line-d);
}
.brookvale-highlight{
  min-height:315px;
  padding:30px;
  border-right:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d);
}
.brookvale-highlight b{
  color:var(--cu-hi);
  font-size:.65rem;
  letter-spacing:.2em;
}
.brookvale-highlight h3{
  margin:76px 0 18px;
  color:var(--on-dark);
  font-family:var(--display);
  font-size:clamp(1.12rem,1.8vw,1.48rem);
  line-height:1.22;
}
.brookvale-highlight p{
  margin:0;
  color:var(--on-dark-mut);
  font-size:.8rem;
  line-height:1.75;
}

.brookvale-amenities,
.brookvale-plans,
.brookvale-location,
.brookvale-credentials{
  padding:clamp(82px,10vw,138px) 0;
}
.brookvale-amenities{ background:var(--paper); }
.brookvale-amenities__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-l);
  border-left:1px solid var(--line-l);
}
.brookvale-amenity{
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:23px;
  border-right:1px solid var(--line-l);
  border-bottom:1px solid var(--line-l);
  transition:background-color .3s,color .3s;
}
.brookvale-amenity:hover{ background:var(--ink); color:var(--on-dark); }
.brookvale-amenity span{
  color:var(--cu-lo);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.16em;
}
.brookvale-amenity strong{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.45;
}

.brookvale-plans{ background:var(--paper-2); }
.brookvale-master-plan{
  width:min(100%,920px);
  aspect-ratio:1.095/1;
  margin:0 auto clamp(34px,5vw,58px);
  border:1px solid var(--line-l);
  box-shadow:0 22px 58px rgba(10,44,33,.11);
}
.brookvale-master-plan img,
.brookvale-plan-card img{ object-fit:contain; background:#fff; filter:none; }
.brookvale-plans__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.brookvale-plan-card{
  aspect-ratio:1.1/1;
  border:1px solid var(--line-l);
  background:#fff;
}
.brookvale-master-plan::after,
.brookvale-plan-card::after{
  background:linear-gradient(180deg,transparent 65%,rgba(5,22,16,.9) 100%);
}

.brookvale-gallery{ background:var(--ink-2); }
.brookvale-gallery__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:auto;
  gap:14px;
}
.brookvale-gallery__grid .gitem{ aspect-ratio:4/3; }
.brookvale-gallery__grid .gitem--wide{ aspect-ratio:2.15/1; }
.brookvale-gallery__grid .gitem img{ object-position:center; }

.brookvale-location{ background:var(--paper); }
.brookvale-location__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
  gap:clamp(42px,7vw,100px);
  align-items:center;
}
.brookvale-location__map{
  aspect-ratio:1.45/1;
  background:#111;
  box-shadow:0 24px 65px rgba(10,44,33,.14);
}
.brookvale-location__map img{ object-fit:contain; filter:none; }
.brookvale-connectivity{
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:32px;
  border-top:1px solid var(--line-l);
  border-left:1px solid var(--line-l);
}
.brookvale-connectivity > div{
  padding:20px;
  border-right:1px solid var(--line-l);
  border-bottom:1px solid var(--line-l);
}
.brookvale-connectivity h3{
  margin:0 0 10px;
  color:var(--cu-lo);
  font-size:.65rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.brookvale-connectivity p{
  margin:0;
  color:var(--on-light-mut);
  font-size:.75rem;
  line-height:1.75;
}
/* No forced height: the boxes hold 1-2 lines and need ~115-140px, so a 245px
   floor left 100px+ of dead space under every one. Grid rows still equalise
   the pair in each row, which is what keeps the edges lined up. */
.brookvale-specs .spec{ display:flex; flex-direction:column; }

.brookvale-credentials{ background:var(--paper-2); }
.brookvale-credentials__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(42px,8vw,120px);
  align-items:start;
}
.brookvale-credentials h2{
  /* longest line here is "A clearly identified project." on the Brookvale page,
     which needs ~16em - sized so both pages keep their two authored lines. */
  font-size:clamp(1.35rem, 2vw, 1.8rem);
  line-height:1.25;
}
.brookvale-credentials__details{
  padding:clamp(28px,4vw,48px);
  border-top:3px solid var(--cu);
  background:#fff;
  box-shadow:0 18px 55px rgba(10,44,33,.08);
}
.brookvale-credentials__details > span{
  display:block;
  margin-bottom:10px;
  color:var(--cu-lo);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.brookvale-credentials__details strong{
  display:block;
  overflow-wrap:anywhere;
  font-family:var(--display);
  font-size:clamp(1rem,1.8vw,1.35rem);
  line-height:1.4;
}
.brookvale-credentials__details p{
  margin:20px 0 26px;
  color:var(--on-light-mut);
  font-size:.78rem;
  line-height:1.75;
}
.brookvale-credentials__details > div{ display:flex; flex-wrap:wrap; gap:12px; }

@media (max-width:1080px){
  .brookvale-highlights__grid,
  .brookvale-amenities__grid{ grid-template-columns:repeat(2,1fr); }
  .brookvale-location__grid{ grid-template-columns:1fr; }
  .brookvale-location__map{ width:min(100%,860px); margin-inline:auto; }
  .brookvale-location__content{ width:min(100%,860px); margin-inline:auto; }
}
@media (max-width:820px){
  .phead--brookvale{ min-height:760px; }
  .phead--brookvale .phead__media img{ object-position:62% center; }
  .project-jump{ top:62px; }
  .project-jump__inner{ margin-inline:0; padding-inline:8px; }
  .project-jump a{ padding:15px 13px; }
  .brookvale-section-head,
  .brookvale-credentials__grid{ grid-template-columns:1fr; }
  .brookvale-section-head{ align-items:start; gap:22px; }
  .brookvale-section-head > .sec__sub{ max-width:650px; }
  .brookvale-plans__grid{ grid-template-columns:1fr; }
  .brookvale-plan-card{ width:min(100%,760px); margin-inline:auto; }
  .brookvale-gallery__grid{ grid-template-columns:1fr; }
  .brookvale-gallery__grid .gitem--wide{ grid-column:auto; aspect-ratio:16/9; }
  .brookvale-gallery__grid .gitem{ aspect-ratio:16/10; }
}
@media (max-width:640px){
  .phead--brookvale{ min-height:700px; padding-bottom:40px; }
  .phead--brookvale .phead__title{ font-size:clamp(2.65rem,13vw,4rem); }
  .brookvale-hero__actions{ flex-direction:column; align-items:stretch; }
  .brookvale-hero__actions .btn{ width:100%; }
  .phead--brookvale .crumb{ display:none; }
  .project-overview--brookvale .project-overview__media{ aspect-ratio:1.12/1; }
  .project-overview--heritage .project-overview__media{ aspect-ratio:1.12/1; }
  .brookvale-highlights__grid,
  .brookvale-amenities__grid,
  .brookvale-connectivity{ grid-template-columns:1fr; }
  .brookvale-highlight{ min-height:235px; }
  .brookvale-highlight h3{ margin-top:44px; }
  .brookvale-amenity{ min-height:118px; }
  .brookvale-master-plan,
  .brookvale-plan-card{ aspect-ratio:1/1.05; }
  .brookvale-location__map{ aspect-ratio:1.25/1; }
  .brookvale-credentials__details > div{ flex-direction:column; }
  .brookvale-credentials__details .btn{ width:100%; }
}

/* ---------- ELITE AURA PROJECT PAGE ---------- */
.phead--aura-detail .phead__media picture{
  display:block;
  width:100%;
  height:100%;
}
.phead--aura-detail .phead__media img{
  object-position:center center;
  filter:saturate(.88) contrast(1.04);
  transform:scale(1.02);
}
.phead--aura-detail .phead__scrim{
  background:
    linear-gradient(180deg,rgba(5,22,16,.62) 0%,rgba(5,22,16,.2) 35%,rgba(5,22,16,.9) 100%),
    linear-gradient(90deg,rgba(5,22,16,.9) 0%,rgba(5,22,16,.64) 38%,rgba(5,22,16,.06) 80%);
}
.project-overview--aura .project-overview__media{ aspect-ratio:.84/1; }
.project-overview--aura .project-overview__media img{ object-position:center; }
.aura-amenities .brookvale-amenities__grid{ grid-template-columns:repeat(3,1fr); }
.aura-master-plan{
  width:min(100%,760px);
  aspect-ratio:.7/1;
}
.aura-plan-card{ aspect-ratio:1.16/1; }
.aura-home-types{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px;
}
.aura-home{
  padding:clamp(25px,3vw,38px);
  border:1px solid var(--line-l);
  background:var(--paper);
}
.aura-home > span{
  display:block;
  margin-bottom:12px;
  color:var(--cu-lo);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.aura-home h3{
  margin:0 0 16px;
  font-family:var(--display);
  font-size:clamp(1.15rem,2vw,1.55rem);
}
.aura-home p{
  margin:0;
  color:var(--on-light-mut);
  font-size:.78rem;
  line-height:1.8;
}
.aura-gallery__grid .gitem:not(.gitem--wide) img{ object-position:center 36%; }
.aura-gallery__grid .gitem:nth-child(2) img{ object-position:center 42%; }
.aura-location__map{ aspect-ratio:1.22/1; background:#eaf3f8; }

@media (max-width:820px){
  .phead--aura-detail .phead__media img{ object-position:center 42%; }
  .aura-home-types{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .project-overview--aura .project-overview__media{ aspect-ratio:.84/1; }
  .aura-amenities .brookvale-amenities__grid{ grid-template-columns:1fr; }
  .aura-master-plan{ aspect-ratio:.7/1; }
  .aura-plan-card{ aspect-ratio:1/1; }
  .aura-location__map{ aspect-ratio:1.1/1; }
}