/* ==========================================================================
   AGASTYA — corporate identity system
   Restraint over decoration. A contained grid, a short type scale, generous
   white space, one accent. Nothing runs edge to edge; every line of text has
   a measure. Light surfaces lead; the dark band is used sparingly, for weight.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Warm, light and calm. Paper is a warm white, never stark; the surround
     is a soft beige so the page reads as a sheet laid on a desk. */
  --paper:     #FDFBF7;
  --paper-2:   #F7F2E9;
  --paper-3:   #EFE8DA;
  --surround:  #E8E0D2;
  --ink:       #1A1D22;
  --ink-2:     #4A4E57;
  --ink-3:     #83817C;

  --navy:      #23262B;
  --navy-2:    #2E3238;

  --accent:    #9A7B45;
  --accent-2:  #C0A06A;

  /* Dusk. Every Agastya render is shot at last light, so the cool pastels in
     this site are sampled from those skies rather than invented: lavender,
     slate, dusty rose, sage. They are held far down in saturation so they read
     as light falling into a warm room, not as decoration. */
  --dusk-1:    #DCD8E4;
  --dusk-2:    #CDD6DE;
  --dusk-3:    #E7DBD9;
  --dusk-4:    #D9DDD7;
  --line:      #E4DCCC;
  --line-2:    #CFC3AC;

  /* The page sits inside a frame — content never touches the screen edge. */
  --frame:     0px;                     /* page runs edge to edge */
  --radius:    0px;

  --bg:        var(--paper);
  --fg:        var(--ink);
  --fg-soft:   var(--ink-2);
  --fg-faint:  var(--ink-3);
  --rule:      var(--line);
  --rule-2:    var(--line-2);
  --field:     #FFFDF9;

  /* Typography follows the corporate-template model: one geometric-humanist
     face for headings at tight tracking, a neutral grotesque for body, and
     the same face at small size + wide tracking for eyebrow labels. */
  --display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --data:    "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;

  /* A short, corporate scale. The top end is deliberately modest. */
  --step--2: 0.75rem;
  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  clamp(1.08rem, 1.03rem + 0.22vw, 1.22rem);
  --step-2:  clamp(1.32rem, 1.2rem + 0.5vw, 1.65rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --step-4:  clamp(2.15rem, 1.75rem + 1.8vw, 3.4rem);
  --step-5:  clamp(2.6rem, 2rem + 2.6vw, 4.4rem);

  /* The content gutter — this is the margin that matters. Content never
     comes closer than this to the edge of the screen. */
  --gutter:  clamp(1.5rem, 7vw, 7.5rem);
  --section: clamp(3.5rem, 6vw, 6.5rem);
  --measure: 66ch;
  --head-measure: 20ch;
  --maxw:    1300px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.tone-navy {
  --bg: var(--navy); --fg: #F6F2EA;
  --fg-soft: rgba(246,242,234,0.72); --fg-faint: rgba(246,242,234,0.5);
  --rule: rgba(246,242,234,0.16); --rule-2: rgba(246,242,234,0.3);
  --accent: var(--accent-2); --field: rgba(246,242,234,0.05);
}
.tone-stone {
  --bg: var(--paper-2); --fg: var(--ink);
  --fg-soft: var(--ink-2); --fg-faint: var(--ink-3);
  --rule: var(--line); --rule-2: var(--line-2);
  --accent: #7A5D2C; --field: #FFFFFF;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: var(--step-0); line-height: 1.68;
  -webkit-font-smoothing: antialiased; overflow-x: clip; max-width: 100%;
}
/* The sheet. Everything editorial lives inside it, inset from the screen. */
main { display: block; background: var(--paper); }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--navy); color: #fff; }
[id] { scroll-margin-top: 108px; }

/* ---------- 3. Type ------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 600; line-height: 1.18;
  margin: 0; letter-spacing: -0.03em;
  /* A heading never runs the full width of the page. */
  max-width: var(--head-measure);
  text-wrap: balance;
}
.d1 { font-size: var(--step-5); font-weight: 700; line-height: 1.08; letter-spacing: -0.038em; }
.d2 { font-size: var(--step-4); font-weight: 700; line-height: 1.12; letter-spacing: -0.035em; }
.d3 { font-size: var(--step-3); font-weight: 700; line-height: 1.16; letter-spacing: -0.032em; }
.d4 { font-size: var(--step-2); font-weight: 600; }
.d5 { font-size: var(--step-1); font-weight: 600; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent); }

.lede { font-size: var(--step-1); line-height: 1.62; color: var(--fg-soft); max-width: 52ch; }
p { margin: 0 0 1em; max-width: var(--measure); color: var(--fg-soft); }
p:last-child { margin-bottom: 0; }
p strong { color: var(--fg); font-weight: 600; }

/* Signature label: a short rule, then small letterspaced caps. Sits above
   every section headline, exactly as the reference does it. */
.eyebrow {
  font-family: var(--display); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 0.9rem; display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--accent); flex: none;
}
.mono { font-family: var(--data); font-variation-settings: "wdth" 87; }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- 4. Layout ---------------------------------------------------- */
.wrap { width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto; }
.section { background: var(--bg); color: var(--fg); padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

.split {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 4vw, 4.5rem); align-items: start;
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: 1rem; }

.sec-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); max-width: 58ch; }
.sec-head p { margin-top: 0.9rem; }

/* Decoration retired — old markup stays harmless */
.meridian::before, .lines-svg, .pj-hero-lines, .contour { display: none !important; }
.ticked::before, .ticked::after { display: none; }
.preload { display: none !important; }
.cursor, .cursor-dot { display: none !important; }

/* ---------- 5. Nav ------------------------------------------------------- */
.nav {
  position: fixed; z-index: 100; top: 0; left: 0; right: 0;
  background: rgba(253,251,247,0.88); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.35s var(--ease), background 0.35s;
}
.nav.is-condensed {
  background: rgba(253,251,247,0.96);
  box-shadow: 0 10px 30px -14px rgba(26,29,34,0.24);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; }
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); }
.brand svg { width: 26px; height: auto; flex: none; }
.brand b { font-family: var(--display); font-weight: 500; font-size: 0.98rem; text-transform: uppercase; letter-spacing: 0.2em; padding-left: 0.2em; }
.nav-links { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.1rem); }
.nav-links a { font-size: var(--step--1); font-weight: 500; color: var(--ink-2); position: relative; padding-block: 0.35rem; transition: color 0.2s; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-call {
  font-family: var(--data); font-size: var(--step--2);
  color: #fff !important; background: var(--navy);
  padding: 0.6rem 1.05rem !important; border-radius: 3px; transition: background 0.25s;
}
.nav-call::after { display: none !important; }
.nav-call:hover { background: var(--accent); }
@media (max-width: 920px) { .nav-links { display: none; } }

.burger { display: none; width: 26px; height: 14px; position: relative; }
.burger span { position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.25s; }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { bottom: 0; }
.burger.is-open span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { bottom: 6.5px; transform: rotate(-45deg); }
@media (max-width: 920px) { .burger { display: block; } }

.drawer {
  position: fixed; inset: 0; z-index: 99; background: var(--paper);
  padding: 6rem var(--gutter) 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  transform: translateY(-100%); transition: transform 0.4s var(--ease); overflow-y: auto;
}
.drawer.is-open { transform: none; }
.drawer nav { display: grid; }
.drawer nav a {
  font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--ink);
  padding-block: 1rem; border-bottom: 1px solid var(--line);
  opacity: 1; transform: none; animation: none;
}
.drawer-foot { color: var(--fg-faint); font-family: var(--data); font-size: var(--step--2); display: grid; gap: 0.35rem; padding-top: 2rem; }
.drawer-foot a { color: var(--accent); }

/* ---------- 6. Hero ------------------------------------------------------ */
.hero {
  background: var(--navy); color: #F2F1EE;
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  position: relative; overflow: hidden; min-height: 0; display: block;
}
.hero-sky, .scroll-cue { display: none; }
.hero-in { position: relative; z-index: 1; }
.hero h1 { font-size: var(--step-5); font-weight: 300; color: #fff; max-width: 17ch; }
.hero h1 .w { display: inline; overflow: visible; }
.hero h1 .w i { display: inline; transform: none; animation: none; }
.hero-sub {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem clamp(2rem, 5vw, 5rem); align-items: end;
  margin-top: 2rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(242,241,238,0.18);
  opacity: 1; transform: none; animation: none;
}
.hero-sub p { max-width: 54ch; color: rgba(242,241,238,0.74); margin: 0; }
.hero-coords { font-family: var(--data); font-size: var(--step--2); color: rgba(242,241,238,0.5); display: grid; gap: 0.3rem; text-align: right; }
.hero-coords b { color: var(--accent-2); font-weight: 500; }
@media (max-width: 760px) { .hero-sub { grid-template-columns: 1fr; } .hero-coords { text-align: left; } }

/* ---------- 7. Locality strip (was the marquee) --------------------------- */
.marquee { background: var(--paper-2); border-bottom: 1px solid var(--line); overflow: hidden; }
.marquee-track {
  display: flex; flex-wrap: wrap; width: auto; animation: none;
  justify-content: center; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter);
}
.marquee-track span:nth-child(n + 7) { display: none; }
.marquee-track span {
  font-family: var(--data); font-size: var(--step--2);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  padding: 1rem clamp(0.8rem, 2vw, 1.6rem);
  display: flex; align-items: center; white-space: nowrap;
}
.marquee-track span::after { display: none; }

/* ---------- 8. Ledger / stats -------------------------------------------- */
.ledger { border-top: 1px solid var(--rule); }
.ledger-row {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding-block: clamp(1.25rem, 2.5vw, 1.9rem);
  border-bottom: 1px solid var(--rule); align-items: start;
}
.ledger-row > .mono { color: var(--fg-faint); font-size: var(--step--2); padding-top: 0.4em; }
.ledger-row h3 { font-size: var(--step-1); font-weight: 500; max-width: 22ch; }
.ledger-row p { font-size: var(--step--1); }
.ledger-row p a { color: var(--fg); border-bottom: 1px solid var(--rule-2); transition: color .2s, border-color .2s; }
.ledger-row p a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 760px) {
  .ledger-row { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .ledger-row p { grid-column: 2; }
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border: 1px solid var(--rule); }
.stat { padding: clamp(1.25rem, 2.5vw, 1.85rem); border-left: 1px solid var(--rule); }
.stat:first-child { border-left: 0; }
.stat b { display: block; font-family: var(--display); font-weight: 300; font-size: var(--step-3); line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.stat > span { display: block; margin-top: 0.5rem; font-family: var(--data); font-size: var(--step--2); text-transform: uppercase; color: var(--fg-faint); }

/* ---------- 9. Buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--step--1); font-weight: 500;
  padding: 0.78rem 1.35rem; border: 1px solid var(--rule-2);
  border-radius: 3px; color: var(--fg); background: transparent;
  transition: background 0.22s var(--ease), color 0.22s, border-color 0.22s;
}
.btn i { font-style: normal; }
.btn::before { display: none; }
.btn:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.btn--solid { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- 10. Projects ------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.filter {
  font-size: var(--step--1); font-weight: 500; padding: 0.55rem 1.05rem;
  border: 1px solid var(--rule); border-radius: 3px; color: var(--fg-soft);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.filter:hover { color: var(--fg); border-color: var(--rule-2); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

.grid-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(1.5rem, 2.5vw, 2.25rem); }

/* Corporate card: image, then a clean block beneath. No text over photography. */
.card {
  display: flex; flex-direction: column; text-align: left; width: 100%;
  border: 1px solid var(--rule); background: var(--paper);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease);
}
.card:hover { border-color: var(--rule-2); box-shadow: 0 6px 24px rgba(20,24,31,0.07); transform: translateY(-2px); }
.card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-3); border-bottom: 1px solid var(--rule); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.card:hover .card-media img { transform: scale(1.03); }
.card-media::after { display: none; }
.card-tag {
  position: absolute; z-index: 2; top: 0.75rem; left: 0.75rem;
  font-family: var(--data); font-size: var(--step--2); text-transform: uppercase;
  background: rgba(255,255,255,0.94); border: 1px solid var(--line);
  color: var(--ink); padding: 0.3rem 0.6rem; border-radius: 3px;
  display: flex; align-items: center; gap: 0.4rem;
}
.card-tag i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.card-tag--live i { background: #2E7D4F; }
.card-plate { position: static; padding: 1.15rem 1.25rem 0; }
.card-plate h3 { font-size: var(--step-2); font-weight: 500; color: var(--ink); max-width: none; }
.card-plate p { margin: 0.35rem 0 0; font-size: var(--step--1); color: var(--fg-faint); }
.card-meta {
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  margin: 1.1rem 1.25rem 1.15rem; padding-top: 0.9rem; border-top: 1px solid var(--rule);
  font-family: var(--data); font-size: var(--step--2); text-transform: uppercase; color: var(--fg-faint);
}
.card-meta em { font-style: normal; color: var(--accent); }
.card.is-out { display: none; }

.sheet {
  position: fixed; inset: 0; z-index: 150; background: rgba(20,24,31,0.55);
  opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s;
  overflow-y: auto; padding: clamp(1rem, 4vw, 3rem) var(--gutter);
  display: grid; align-items: start; justify-items: center;
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet-panel { width: min(100%, 900px); background: var(--paper); border: 1px solid var(--line); position: relative; transform: none; }
.sheet-close {
  position: absolute; z-index: 3; top: 0.85rem; right: 0.85rem;
  width: 36px; height: 36px; border-radius: 3px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.92);
  display: grid; place-items: center; color: var(--ink);
  transition: background 0.25s, color 0.25s;
}
.sheet-close:hover { background: var(--navy); color: #fff; }
.sheet-hero { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-3); border-bottom: 1px solid var(--line); }
.sheet-hero img { width: 100%; height: 100%; object-fit: cover; }
.sheet-hero::after { display: none; }
.sheet-title { position: static; padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 0; }
.sheet-title h2 { font-size: var(--step-3); font-weight: 400; }
.sheet-title p { margin: 0.4rem 0 0; font-size: var(--step--1); color: var(--fg-faint); }
.sheet-body { padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: clamp(1.25rem, 2.5vw, 1.85rem); }
.sheet-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border: 1px solid var(--rule); }
.sheet-fact { padding: 1rem 1.1rem; border-left: 1px solid var(--rule); }
.sheet-fact:first-child { border-left: 0; }
.sheet-fact dt { font-family: var(--data); font-size: var(--step--2); text-transform: uppercase; color: var(--fg-faint); margin: 0 0 0.4rem; }
.sheet-fact dd { margin: 0; font-size: var(--step--1); color: var(--fg); }
.sheet-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem); }
.sheet-cols h4 { font-size: var(--step--1); margin-bottom: 0.8rem; color: var(--fg); font-weight: 600; }
.tick { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.tick li { font-size: var(--step--1); color: var(--fg-soft); padding-left: 1rem; position: relative; }
.tick li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 5px; height: 1px; background: var(--accent); }
.sheet-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); }

/* ---------- 11. Feature band --------------------------------------------- */
.feature { background: var(--navy); color: #F2F1EE; }
.feature .lede, .feature p { color: rgba(242,241,238,0.74); }
.feature h2 { color: #fff; }
.feature .eyebrow { color: var(--accent-2); }
.feature-bg { position: absolute; inset: 0; z-index: 0; }
.feature-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.14; }
.feature-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 30%, rgba(16,26,43,0.72) 100%); }
.feature .wrap { position: relative; z-index: 1; }
.feature .btn { border-color: rgba(242,241,238,0.34); color: #F2F1EE; }
.feature .btn:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* ---------- 12. Forms ---------------------------------------------------- */
.register { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .register { grid-template-columns: 1fr; } }

.steps { display: grid; position: relative; }
.steps::before { content: ""; position: absolute; left: 10px; top: 14px; bottom: 14px; width: 1px; background: var(--rule); }
.steps i.progress { position: absolute; left: 10px; top: 14px; width: 1px; background: var(--accent); height: 0; transition: height 0.4s var(--ease); }
.step-mark { display: flex; gap: 0.9rem; align-items: flex-start; padding-block: 0.65rem; position: relative; z-index: 1; }
.step-mark b {
  width: 21px; height: 21px; flex: none; border-radius: 50%;
  border: 1px solid var(--rule-2); background: var(--bg);
  display: grid; place-items: center; font-family: var(--data);
  font-size: 0.58rem; color: var(--fg-faint);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.step-mark span { font-size: var(--step--1); color: var(--fg-faint); transition: color 0.3s; }
.step-mark.is-active b { border-color: var(--accent); color: var(--accent); }
.step-mark.is-active span { color: var(--fg); font-weight: 500; }
.step-mark.is-done b { background: var(--accent); border-color: var(--accent); color: #fff; }

.panel { display: none; }
.panel.is-active { display: grid; gap: 1.4rem; }
.panel-head h3 { font-size: var(--step-2); font-weight: 500; margin-bottom: 0.4rem; }
.panel-head p { font-size: var(--step--1); margin: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips.is-bad span { border-color: #B3261E; }
.chips.is-bad::after { content: "Pick one to carry on."; flex-basis: 100%; font-size: var(--step--2); color: #B3261E; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: block; font-size: var(--step--1); font-weight: 500;
  padding: 0.62rem 1.05rem; border: 1px solid var(--rule);
  border-radius: 3px; color: var(--fg-soft);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.chip input:hover + span { border-color: var(--rule-2); color: var(--fg); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem 1.15rem; }
.field { position: relative; }
.field--wide { grid-column: 1 / -1; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--field);
  border: 1px solid var(--rule); border-radius: 3px;
  padding: 1.45rem 0.85rem 0.55rem; font-size: var(--step-0);
  transition: border-color 0.2s, background 0.2s;
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--accent); background: #fff; }
.field label {
  position: absolute; left: 0.85rem; top: 0.95rem;
  font-size: var(--step--1); color: var(--fg-faint);
  pointer-events: none; transform-origin: left top;
  transition: transform 0.2s var(--ease), color 0.2s;
}
.field input:focus + label, .field textarea:focus + label, .field select:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label { transform: translateY(-0.62rem) scale(0.8); color: var(--accent); }
.field--select label { transform: translateY(-0.62rem) scale(0.8); }
.field--select::after {
  content: ""; position: absolute; right: 0.95rem; top: 1.6rem;
  width: 6px; height: 6px; border-right: 1.5px solid var(--fg-faint);
  border-bottom: 1.5px solid var(--fg-faint); transform: rotate(45deg); pointer-events: none;
}
.field .hint { display: block; margin-top: 0.35rem; font-size: var(--step--2); color: var(--fg-faint); }
.field .err { display: none; margin-top: 0.35rem; font-size: var(--step--2); color: #B3261E; }
.field.is-bad input, .field.is-bad textarea, .field.is-bad select { border-color: #B3261E; }
.field.is-bad .err { display: block; }
.field.is-bad .hint { display: none; }
.count { position: absolute; right: 0; bottom: 100%; font-family: var(--data); font-size: var(--step--2); color: var(--fg-faint); padding-bottom: 0.3rem; }

.form-nav { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.done { display: none; padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.done.is-active { display: block; }
.done svg { margin-bottom: 1.1rem; }
.done circle, .done path { stroke: var(--accent); fill: none; stroke-width: 1.5; stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.done h3 { font-size: var(--step-2); font-weight: 500; margin-bottom: 0.6rem; }

/* ---------- 13. Rows / map ----------------------------------------------- */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.75rem clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(0.9rem, 2vw, 1.3rem);
  border-bottom: 1px solid var(--rule); align-items: baseline;
}
.row dt { font-family: var(--data); font-size: var(--step--2); text-transform: uppercase; color: var(--fg-faint); margin: 0; }
.row dd { margin: 0; color: var(--fg); font-size: var(--step--1); }
.row dd a { border-bottom: 1px solid var(--rule-2); transition: color 0.2s, border-color 0.2s; }
.row dd a:hover { color: var(--accent); border-color: var(--accent); }
.map { border: 1px solid var(--rule); aspect-ratio: 16 / 10; background: var(--paper-3); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.9) contrast(0.95); }

/* ---------- 14. Footer --------------------------------------------------- */
.foot { background: var(--navy); color: #F6F2EA; padding-block: clamp(3rem, 5.5vw, 4.75rem) 1.75rem; }
/* auto-fit with a 140px minimum was packing three and four columns into a
   phone, which crushed the brand column to 12-20px. Explicit counts instead. */
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(140px, 1fr)); gap: clamp(1.75rem, 3.5vw, 3.5rem); }
.foot-mark { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.foot-mark svg { width: 28px; }
.foot-mark b { font-family: var(--display); font-weight: 500; font-size: 1.02rem; text-transform: uppercase; letter-spacing: 0.2em; padding-left: 0.2em; }
.foot p { color: rgba(242,241,238,0.6); }
.foot h4 { font-family: var(--data); font-weight: 500; font-size: var(--step--2); text-transform: uppercase; color: var(--accent-2); margin-bottom: 0.9rem; max-width: none; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.foot ul a, .foot ul li { font-size: var(--step--1); color: rgba(242,241,238,0.62); transition: color 0.2s; }
.foot ul a:hover { color: #fff; }
.foot-legal {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem;
  border-top: 1px solid rgba(242,241,238,0.16);
  display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
  font-family: var(--data); font-size: var(--step--2); color: rgba(242,241,238,0.42);
}

/* ---------- 15. Reveal --------------------------------------------------- */
.rv { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.06s; }
.rv-d2 { transition-delay: 0.12s; }
.rv-d3 { transition-delay: 0.18s; }

.page-head { padding-top: clamp(7.5rem, 12vw, 10rem); padding-bottom: clamp(2rem, 4vw, 3rem); background: var(--paper-2); border-bottom: 1px solid var(--line); }
.page-head h1 { max-width: 16ch; }

/* ==========================================================================
   16. Project page
   ========================================================================== */
.pj-hero {
  background: var(--navy); color: #F2F1EE;
  padding-top: clamp(7.5rem, 12vw, 10rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  min-height: 0; display: block; position: relative; overflow: hidden;
}
.pj-hero-atmos { position: absolute; inset: 0; z-index: 0; }
.pj-hero-atmos img { width: 100%; height: 100%; object-fit: cover; filter: blur(60px); transform: scale(1.3); opacity: 0.22; }
.pj-hero-atmos::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 25%, rgba(16,26,43,0.8) 100%); }
.pj-hero-in {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center;
}
.pj-eyebrow { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.1rem; }
.pj-eyebrow span {
  font-family: var(--data); font-size: var(--step--2); text-transform: uppercase;
  border: 1px solid rgba(242,241,238,0.28); border-radius: 3px;
  padding: 0.32rem 0.7rem; color: rgba(242,241,238,0.75);
}
.pj-eyebrow span.is-live { color: var(--accent-2); border-color: rgba(176,138,72,0.5); }
.pj-hero h1 { font-size: var(--step-5); font-weight: 300; color: #fff; max-width: 14ch; }
.pj-hero .pj-line { margin-top: 0.9rem; font-size: var(--step-1); color: var(--accent-2); max-width: 34ch; }
.pj-hero-loc { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(242,241,238,0.18); font-size: var(--step--1); color: rgba(242,241,238,0.7); max-width: 40ch; }
.pj-hero-cta { margin-top: 1.6rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pj-hero-cta .btn { border-color: rgba(242,241,238,0.34); color: #F2F1EE; }
.pj-hero-cta .btn:hover { background: #fff; border-color: #fff; color: var(--navy); }
.pj-hero-cta .btn--solid { background: var(--accent-2); border-color: var(--accent-2); color: var(--navy); }
.pj-hero-cta .btn--solid:hover { background: #fff; border-color: #fff; }

.pj-elevation { margin: 0; }
.pj-elevation-frame { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 0; }
.pj-elevation-frame img { width: 100%; height: 100%; object-fit: contain; }
.pj-elevation figcaption { margin-top: 0.7rem; font-family: var(--data); font-size: var(--step--2); color: rgba(242,241,238,0.45); text-align: center; text-transform: uppercase; }
@media (max-width: 880px) {
  .pj-hero-in { grid-template-columns: 1fr; }
  .pj-elevation { order: -1; max-width: 400px; margin-inline: auto; }
}

.secnav { position: sticky; top: 68px; z-index: 90; background: var(--paper); border-bottom: 1px solid var(--line); }
.secnav-in { display: flex; align-items: center; gap: 1.5rem; height: 54px; }
.secnav-name { font-family: var(--display); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); flex: none; }
.secnav-links { display: flex; gap: clamp(0.9rem, 2vw, 1.8rem); margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.secnav-links::-webkit-scrollbar { display: none; }
.secnav-links a {
  font-size: var(--step--1); color: var(--ink-3); white-space: nowrap;
  padding-block: 0.3rem; border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.secnav-links a:hover { color: var(--ink); }
.secnav-links a.is-here { color: var(--ink); border-bottom-color: var(--accent); }
.secnav-cta { flex: none; padding: 0.5rem 0.95rem !important; }
@media (max-width: 900px) { .secnav-cta, .secnav-name { display: none; } .secnav-links { margin-left: 0; } }

.pstats-band { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.pstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.pstat { padding: clamp(1.3rem, 2.5vw, 2rem) 1rem; text-align: left; border-left: 1px solid var(--line); }
.pstat:first-child { border-left: 0; padding-left: 0; }
.pstat b { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pstat span { display: block; margin-top: 0.55rem; font-family: var(--data); font-size: var(--step--2); text-transform: uppercase; color: var(--ink-3); }

.pj-overview { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
@media (max-width: 860px) { .pj-overview { grid-template-columns: 1fr; } }
.pj-facts { border-top: 1px solid var(--rule); margin: 0; }
.pj-facts div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1rem; padding-block: 0.85rem; border-bottom: 1px solid var(--rule); align-items: baseline; }
.pj-facts dt { font-family: var(--data); font-size: var(--step--2); text-transform: uppercase; color: var(--fg-faint); margin: 0; }
.pj-facts dd { margin: 0; font-size: var(--step--1); color: var(--fg); }

.plan-wrap { margin-bottom: clamp(2rem, 4vw, 3rem); }
.plan-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.plan-tab {
  font-size: var(--step--1); font-weight: 500; padding: 0.55rem 1.05rem;
  border: 1px solid var(--rule); border-radius: 3px; color: var(--fg-soft);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.plan-tab:hover { color: var(--fg); border-color: var(--rule-2); }
.plan-tab.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.plan-stage { position: relative; background: #fff; border: 1px solid var(--line); padding: clamp(1rem, 2.5vw, 2rem); }
.plan-stage--dark { background: var(--navy-2); border-color: var(--navy-2); }
.plan-stage--dark .plan-fig figcaption { border-top-color: rgba(242,241,238,0.18); color: rgba(242,241,238,0.55); }
.plan-fig { display: none; margin: 0; }
.plan-fig.is-on { display: block; }
.plan-fig img { width: 100%; height: auto; cursor: zoom-in; }
.plan-fig figcaption { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line); font-family: var(--data); font-size: var(--step--2); color: var(--ink-3); }
.plan-stage::after {
  content: "Tap to enlarge"; position: absolute; top: 0.8rem; right: 0.8rem;
  font-family: var(--data); font-size: var(--step--2);
  background: var(--navy); color: #fff; padding: 0.28rem 0.55rem; border-radius: 3px; pointer-events: none;
}

.lb { position: fixed; inset: 0; z-index: 160; background: rgba(20,24,31,0.94); display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.5rem); opacity: 0; visibility: hidden; transition: opacity 0.28s var(--ease), visibility 0.28s; }
.lb.is-open { opacity: 1; visibility: visible; }
.lb img { max-width: 100%; max-height: 92vh; object-fit: contain; background: #fff; }
.lb-close { position: absolute; top: 1.1rem; right: 1.1rem; width: 40px; height: 40px; border-radius: 3px; border: 1px solid rgba(242,241,238,0.3); color: #F2F1EE; display: grid; place-items: center; background: rgba(20,24,31,0.6); transition: background 0.25s, color 0.25s; }
.lb-close:hover { background: #fff; color: var(--ink); }

.dims { overflow-x: auto; }
.dimtable { width: 100%; border-collapse: collapse; min-width: 460px; }
.dimtable caption { text-align: left; padding-bottom: 0.9rem; font-family: var(--data); font-size: var(--step--2); text-transform: uppercase; color: var(--fg-faint); }
.dimtable th, .dimtable td { text-align: left; padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--rule); }
.dimtable thead th { font-family: var(--data); font-weight: 400; font-size: var(--step--2); text-transform: uppercase; color: var(--fg-faint); border-bottom-color: var(--rule-2); max-width: none; }
.dimtable tbody th { font-weight: 500; color: var(--fg); font-size: var(--step--1); max-width: none; }
.dimtable td { color: var(--fg-soft); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.dimtable td.ft { color: var(--fg-faint); }
.dimtable tbody tr:hover { background: var(--paper-2); }

.grps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.grp h3 {
  font-size: var(--step--2); font-family: var(--data); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint);
  margin-bottom: 0.9rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); max-width: none;
}

.loc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: start; }
@media (max-width: 860px) { .loc-grid { grid-template-columns: 1fr; } }
.prox { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.prox li { display: grid; grid-template-columns: minmax(88px, 0.45fr) 1fr; gap: 1rem; padding-block: 0.85rem; border-bottom: 1px solid var(--rule); align-items: baseline; font-size: var(--step--1); }
.prox .pk { font-family: var(--data); font-size: var(--step--2); text-transform: uppercase; color: var(--fg-faint); }
.prox .pv { color: var(--fg-soft); }

.enq-sec { background: var(--paper-2); }
.enq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(1.75rem, 4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .enq-grid { grid-template-columns: 1fr; } }
.enq-inline { border: 1px solid var(--line); padding: clamp(1.35rem, 3vw, 2.25rem); background: var(--paper); }
.enq-step { font-family: var(--data); font-size: var(--step--2); text-transform: uppercase; color: var(--fg-faint); margin: 0 0 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule); }
.enq-step:not(:first-of-type) { margin-top: 1.75rem; }
.enq-foot { margin-top: 1.6rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; justify-content: space-between; }
.enq-note { font-size: var(--step--2); color: var(--fg-faint); }

.pj-pager { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); }
.pj-pager a { padding: clamp(1.2rem, 2.5vw, 1.85rem); display: grid; gap: 0.35rem; transition: background 0.2s; border-left: 1px solid var(--rule); }
.pj-pager a:first-child { border-left: 0; }
.pj-pager a:hover { background: var(--paper); }
.pj-pager .dir { font-family: var(--data); font-size: var(--step--2); text-transform: uppercase; color: var(--fg-faint); }
.pj-pager .nm { font-family: var(--display); font-weight: 400; font-size: var(--step-2); color: var(--fg); }
.pj-pager .sub { font-size: var(--step--2); color: var(--fg-faint); text-transform: uppercase; font-family: var(--data); }
.pj-pager a.next { text-align: right; }

/* ==========================================================================
   17. WhatsApp + concierge
   ========================================================================== */
.dock { position: fixed; z-index: 120; right: clamp(1rem, 2.5vw, 1.6rem); bottom: clamp(1rem, 2.5vw, 1.6rem); display: grid; gap: 0.6rem; justify-items: end; }
.dock-btn, .dock-bot {
  width: 50px; height: 50px; border-radius: 4px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  box-shadow: 0 4px 16px rgba(20,24,31,0.12);
  transition: transform 0.2s var(--ease), background 0.2s; position: relative;
}
.dock-btn:hover, .dock-bot:hover { transform: translateY(-2px); }
.dock-btn svg, .dock-bot svg { width: 22px; height: 22px; }
.dock-wa { background: #1FA855; border-color: #1FA855; color: #fff; }
.dock-wa:hover { background: #17994c; }
.dock-bot { background: var(--navy); border-color: var(--navy); color: #fff; }
.dock-bot.is-open { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.dock-ping { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2); border: 2px solid var(--navy); }
.dock-bot.is-open .dock-ping { display: none; }

.bot {
  position: fixed; z-index: 121;
  right: clamp(1rem, 2.5vw, 1.6rem);
  bottom: calc(clamp(1rem, 2.5vw, 1.6rem) + 58px);
  width: min(348px, calc(100vw - 2rem));
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 4px;
  overflow: hidden; box-shadow: 0 16px 44px rgba(20,24,31,0.18);
  transform: translateY(10px); transform-origin: bottom right;
  opacity: 0; visibility: hidden;
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s;
}
.bot.is-open { opacity: 1; visibility: visible; transform: none; }
.bot-head { padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 0.7rem; background: var(--paper-2); }
.bot-head .avatar { width: 30px; height: 30px; border-radius: 3px; background: var(--navy); display: grid; place-items: center; color: #fff; flex: none; }
.bot-head .avatar svg { width: 17px; }
.bot-head b { font-family: var(--display); font-weight: 500; font-size: 0.94rem; display: block; }
.bot-head small { font-family: var(--data); font-size: var(--step--2); color: var(--ink-3); display: flex; align-items: center; gap: 0.3rem; }
.bot-head small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2E7D4F; }
.bot-log { padding: 1.05rem; display: grid; gap: 0.6rem; max-height: min(44vh, 320px); overflow-y: auto; }
.bot-msg { max-width: 86%; padding: 0.62rem 0.85rem; border-radius: 4px; font-size: var(--step--1); line-height: 1.5; }
.bot-msg.them { background: var(--paper-2); border: 1px solid var(--line); color: var(--ink); justify-self: start; }
.bot-msg.me { background: var(--navy); color: #fff; justify-self: end; }
.bot-quick { padding: 0 1.05rem 1.05rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bot-quick button {
  font-size: var(--step--2); font-weight: 500; padding: 0.5rem 0.8rem;
  border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink);
  transition: background 0.2s, color 0.2s;
}
.bot-quick button:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.bot-quick a.wa { font-size: var(--step--2); font-weight: 500; padding: 0.5rem 0.8rem; border-radius: 3px; background: #1FA855; color: #fff; display: inline-flex; align-items: center; gap: 0.35rem; }
.bot-typing { justify-self: start; display: flex; gap: 4px; padding: 0.7rem 0.85rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; }
.bot-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: blink 1.2s infinite; }
.bot-typing i:nth-child(2) { animation-delay: 0.2s; }
.bot-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

@media print { .dock, .bot, .nav, .secnav { display: none; } }

/* ---------- 18. Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .bot-typing i { animation: none; opacity: 0.6; }
}

/* ==========================================================================
   19. Corporate template components
   Layout patterns adapted from the corporate-business reference: a two-column
   hero with a floating credential card, service cards with a numeral, an
   animated counter band, an FAQ accordion and a full-width CTA band.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.chero { background: var(--paper); padding-top: clamp(7rem, 11vw, 9.5rem); padding-bottom: 0; position: relative; overflow: hidden; }
.chero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .chero-in { grid-template-columns: 1fr; } }
.chero h1 { max-width: 15ch; color: var(--ink); }
.chero-lead { margin-top: 1.4rem; max-width: 46ch; font-size: var(--step-1); color: var(--ink-2); }
.chero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.chero-media { position: relative; }
.chero-media-frame { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; border-radius: 4px; background: var(--paper-3); }
.chero-media-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Floating credential card — the reference's "30K happy customers" device */
.chero-badge {
  position: absolute; left: -1.5rem; bottom: 1.75rem; z-index: 2;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; padding: 1.1rem 1.3rem;
  box-shadow: 0 12px 34px rgba(20,24,31,0.1);
  display: grid; gap: 0.25rem; min-width: 190px;
}
.chero-badge b { font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1; color: var(--ink); letter-spacing: -0.03em; }
.chero-badge > span { font-size: var(--step--2); color: var(--ink-3); line-height: 1.45; }
@media (max-width: 900px) { .chero-badge { left: 0.9rem; bottom: 0.9rem; } }

/* Scroll cue */
.chero-scroll {
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-block: 1.1rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.chero-scroll i { display: block; width: 1px; height: 14px; background: var(--line-2); }

/* ---- Locality / credential strip ---------------------------------------- */
.cstrip { background: var(--paper-2); border-block: 1px solid var(--line); padding-block: 1.1rem; }
.cstrip-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem clamp(1rem, 3vw, 2.6rem); }
.cstrip-in span {
  font-family: var(--display); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
.cstrip-in span.lead { color: var(--ink); }

/* ---- Section header (eyebrow + headline, optionally with side text) ------ */
.chead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 3.5rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.chead--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.chead--center .eyebrow { justify-content: center; }
.chead--center h2 { max-width: 22ch; }
.chead--solo { grid-template-columns: 1fr; }
@media (max-width: 820px) { .chead { grid-template-columns: 1fr; align-items: start; } }
.chead p { margin: 0; }

/* ---- Service / capability cards ----------------------------------------- */
.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.ccard {
  border: 1px solid var(--line); border-radius: 4px; background: var(--paper);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  display: flex; flex-direction: column; gap: 0.85rem;
  position: relative; overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.ccard::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.ccard:hover { border-color: var(--line-2); box-shadow: 0 10px 30px rgba(20,24,31,0.08); transform: translateY(-3px); }
.ccard:hover::after { transform: scaleX(1); }
.ccard-num {
  font-family: var(--display); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.1em; color: var(--accent);
}
.ccard h3 { font-size: var(--step-2); font-weight: 600; max-width: 18ch; }
.ccard p { font-size: var(--step--1); margin: 0; }
.ccard-more {
  margin-top: auto; padding-top: 0.5rem;
  font-family: var(--display); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.ccard-more i { font-style: normal; color: var(--accent); transition: transform 0.25s var(--ease); }
.ccard:hover .ccard-more i { transform: translateX(4px); }

/* ---- Counter band -------------------------------------------------------- */
.cband { background: var(--navy); color: #F2F1EE; padding-block: clamp(2.5rem, 5vw, 4rem); }
.cband-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(1.5rem, 3vw, 2rem); }
.cband-item { text-align: center; border-left: 1px solid rgba(242,241,238,0.16); padding-inline: 1rem; }
.cband-item:first-child { border-left: 0; }
.cband-item b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1;
  color: #fff; letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.cband-item b em { font-style: normal; color: var(--accent-2); }
.cband-item > span { display: block; margin-top: 0.7rem; font-size: var(--step--1); color: rgba(242,241,238,0.66); }

/* ---- Split feature (image + copy) ---------------------------------------- */
.csplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (max-width: 880px) { .csplit { grid-template-columns: 1fr; } }
.csplit-media { position: relative; aspect-ratio: 4 / 3.2; overflow: hidden; border-radius: 4px; background: var(--paper-3); }
.csplit-media img { width: 100%; height: 100%; object-fit: cover; }
.csplit-badge {
  position: absolute; right: -1.25rem; top: 1.5rem; z-index: 2;
  background: var(--navy); color: #fff; border-radius: 4px;
  padding: 1rem 1.2rem; text-align: center; min-width: 128px;
  box-shadow: 0 12px 30px rgba(20,24,31,0.16);
}
.csplit-badge b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.9rem; line-height: 1; letter-spacing: -0.03em; }
.csplit-badge > span { display: block; margin-top: 0.4rem; font-size: var(--step--2); color: rgba(242,241,238,0.68); }
@media (max-width: 880px) { .csplit-badge { right: 0.9rem; } }
.cchecks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.cchecks li { display: grid; grid-template-columns: 20px 1fr; gap: 0.75rem; align-items: start; font-size: var(--step--1); color: var(--ink-2); }
.cchecks li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); margin-top: 0.22em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
}

/* ---- FAQ accordion ------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; display: flex; align-items: center;
  justify-content: space-between; gap: 1.25rem;
  padding-block: clamp(1.05rem, 2vw, 1.4rem);
  font-family: var(--display); font-size: var(--step-1); font-weight: 600;
  letter-spacing: -0.02em; color: var(--ink); transition: color 0.2s;
}
.faq-q:hover { color: var(--accent); }
.faq-q i {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); display: grid; place-items: center;
  position: relative; transition: background 0.25s, border-color 0.25s;
}
.faq-q i::before, .faq-q i::after {
  content: ""; position: absolute; background: var(--ink);
  transition: transform 0.3s var(--ease), background 0.25s;
}
.faq-q i::before { width: 11px; height: 1.5px; }
.faq-q i::after { width: 1.5px; height: 11px; }
.faq-item.is-open .faq-q i { background: var(--accent); border-color: var(--accent); }
.faq-item.is-open .faq-q i::before, .faq-item.is-open .faq-q i::after { background: #fff; }
.faq-item.is-open .faq-q i::after { transform: scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { font-size: var(--step--1); padding-bottom: 1.3rem; max-width: 70ch; }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band { position: relative; background: var(--navy); overflow: hidden; }
.cta-band-bg { position: absolute; inset: 0; z-index: 0; }
.cta-band-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.16; }
.cta-band-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy) 20%, rgba(16,26,43,0.7) 100%); }
.cta-band .wrap { position: relative; z-index: 1; }
.cta-band-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.75rem; padding-block: clamp(2.5rem, 5vw, 4rem); }
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-band p { color: rgba(242,241,238,0.7); margin-top: 0.9rem; max-width: 44ch; }
.cta-band .btn { border-color: rgba(242,241,238,0.34); color: #F2F1EE; }
.cta-band .btn:hover { background: #fff; border-color: #fff; color: var(--navy); }
.cta-band .btn--solid { background: var(--accent-2); border-color: var(--accent-2); color: var(--navy); }
.cta-band .btn--solid:hover { background: #fff; border-color: #fff; }

/* ==========================================================================
   20. Homepage-11 flow
   The reference's eleventh layout: a centred hero over a soft colour bloom
   with a trust stack, stacked two-line eyebrows, image-led numbered service
   cards, numbered project cards with a category tag, and a word marquee in
   the footer.
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------- */
.bhero {
  position: relative; overflow: hidden; background: var(--paper);
  padding-top: clamp(7.5rem, 12vw, 10rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
/* The soft bloom behind the hero — the reference uses a blurred PNG; a
   gradient does the same job with no extra request. */
.bhero::before {
  content: ""; position: absolute; z-index: 0;
  top: -18%; left: 50%; transform: translateX(-50%);
  width: min(1100px, 120%); aspect-ratio: 1;
  background: radial-gradient(circle at 50% 45%, rgba(176,138,72,0.17), rgba(176,138,72,0.05) 42%, transparent 68%);
  pointer-events: none;
}
.bhero .wrap { position: relative; z-index: 1; }
.bhero .eyebrow { justify-content: center; }
.bhero h1 { max-width: 17ch; margin-inline: auto; }
.bhero-lead { margin: 1.3rem auto 0; max-width: 46ch; font-size: var(--step-1); color: var(--ink-2); }
.bhero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }

/* Trust stack — the reference's client avatars, here as locality initials */
.bstack { margin-top: 2.25rem; display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; }
.bstack-faces { display: flex; }
.bstack-faces span {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--paper); background: var(--navy); color: #fff;
  display: grid; place-items: center; margin-left: -12px;
  font-family: var(--display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}
.bstack-faces span:first-child { margin-left: 0; }
.bstack-faces span.more { background: var(--accent); }
.bstack p { margin: 0; font-size: var(--step--1); color: var(--ink-2); text-align: left; max-width: 24ch; }
.bstack p b { color: var(--ink); font-weight: 600; }

.bhero-media {
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  border-radius: 6px; overflow: hidden;
  aspect-ratio: 21 / 9; background: var(--paper-3);
  box-shadow: 0 24px 60px rgba(20,24,31,0.14);
}
.bhero-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .bhero-media { aspect-ratio: 4 / 3; } }

/* ---- Stacked two-line eyebrow (the reference's signature on this layout) -- */
.eyebrow--stack {
  display: block; max-width: 7ch; line-height: 1.25;
  letter-spacing: 0.12em; margin-bottom: 1.1rem;
}
.eyebrow--stack::before { display: block; margin-bottom: 0.55rem; }

/* ---- Feature trio with Read More ---------------------------------------- */
.bfeat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.bfeat-item {
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  border: 1px solid var(--line); border-radius: 5px; background: var(--paper);
  display: flex; flex-direction: column; gap: 0.8rem;
  transition: background 0.28s var(--ease), border-color 0.28s, transform 0.28s var(--ease);
}
.bfeat-item:hover { background: var(--navy); border-color: var(--navy); transform: translateY(-4px); }
.bfeat-icon {
  width: 46px; height: 46px; border-radius: 5px; display: grid; place-items: center;
  background: var(--paper-2); color: var(--accent); margin-bottom: 0.35rem;
  transition: background 0.28s, color 0.28s;
}
.bfeat-icon svg { width: 22px; height: 22px; }
.bfeat-item:hover .bfeat-icon { background: rgba(242,241,238,0.12); color: var(--accent-2); }
.bfeat-item h3 { font-size: var(--step-2); font-weight: 600; max-width: 18ch; transition: color 0.28s; }
.bfeat-item p { font-size: var(--step--1); margin: 0; transition: color 0.28s; }
.bfeat-more {
  margin-top: auto; padding-top: 0.6rem;
  font-family: var(--display); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.45rem; transition: color 0.28s;
}
.bfeat-more i { font-style: normal; color: var(--accent); transition: transform 0.25s var(--ease), color 0.28s; }
.bfeat-item:hover h3, .bfeat-item:hover .bfeat-more { color: #fff; }
.bfeat-item:hover p { color: rgba(242,241,238,0.72); }
.bfeat-item:hover .bfeat-more i { color: var(--accent-2); transform: translateX(4px); }

/* ---- About block with inline counters ------------------------------------ */
.babout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (max-width: 880px) { .babout { grid-template-columns: 1fr; } }
.babout-media { position: relative; aspect-ratio: 4 / 3.6; border-radius: 5px; overflow: hidden; background: var(--paper-3); }
.babout-media img { width: 100%; height: 100%; object-fit: cover; }
.babout-nums { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.75rem); margin: 1.75rem 0; }
.bnum { border-left: 2px solid var(--accent); padding-left: 1.1rem; }
.bnum b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem); line-height: 1;
  color: var(--ink); letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.bnum b em { font-style: normal; color: var(--accent); }
.bnum > span { display: block; margin-top: 0.5rem; font-size: var(--step--1); color: var(--ink-3); }

/* ---- Image-led numbered service cards ------------------------------------ */
.bserv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(1rem, 2vw, 1.75rem); }
.bserv-card {
  border: 1px solid var(--line); border-radius: 5px; overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column;
  transition: border-color 0.25s, box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.bserv-card:hover { border-color: var(--line-2); box-shadow: 0 14px 36px rgba(20,24,31,0.1); transform: translateY(-3px); }
.bserv-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-3); position: relative; }
.bserv-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.bserv-card:hover .bserv-media img { transform: scale(1.05); }
.bserv-body { padding: clamp(1.25rem, 2.2vw, 1.75rem); display: grid; gap: 0.65rem; }
.bserv-num {
  font-family: var(--display); font-size: var(--step--1); font-weight: 700;
  color: var(--accent); letter-spacing: 0.04em;
}
.bserv-body h3 { font-size: var(--step-2); font-weight: 600; max-width: 20ch; }
.bserv-body p { font-size: var(--step--1); margin: 0; }
.bserv-arrow {
  margin-top: 0.35rem; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-2); display: grid; place-items: center;
  color: var(--ink); transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.bserv-card:hover .bserv-arrow { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Numbered project cards with category tag ---------------------------- */
.bproj { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.bproj-card { position: relative; border-radius: 5px; overflow: hidden; display: block; background: var(--navy); aspect-ratio: 3 / 3.6; }
.bproj-card img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: transform 0.7s var(--ease), opacity 0.4s; }
.bproj-card:hover img { transform: scale(1.06); opacity: 1; }
.bproj-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,26,43,0.12) 30%, rgba(16,26,43,0.88) 100%);
}
.bproj-num {
  position: absolute; z-index: 2; top: 1rem; left: 1.1rem;
  font-family: var(--display); font-weight: 700; font-size: var(--step--1);
  color: rgba(255,255,255,0.85); letter-spacing: 0.04em;
}
.bproj-body { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; }
.bproj-tag {
  display: inline-block; font-family: var(--display); font-size: var(--step--2);
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(255,255,255,0.16); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.24); color: #fff;
  padding: 0.28rem 0.6rem; border-radius: 3px; margin-bottom: 0.7rem;
}
.bproj-body h3 { font-size: var(--step-2); font-weight: 600; color: #fff; max-width: 16ch; }
.bproj-body p { font-size: var(--step--2); color: rgba(255,255,255,0.75); margin: 0.35rem 0 0; }
.bproj-go {
  position: absolute; z-index: 2; top: 0.9rem; right: 0.9rem;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.26);
  display: grid; place-items: center; color: #fff;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.25s;
}
.bproj-card:hover .bproj-go { opacity: 1; transform: none; background: var(--accent); border-color: var(--accent); }

/* ---- Commitment cards (the reference's testimonial slot) ------------------ */
.bquotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.bquote {
  border: 1px solid var(--line); border-radius: 5px; background: var(--paper);
  padding: clamp(1.5rem, 2.5vw, 2rem); display: grid; gap: 1rem;
}
.bquote-mark { font-family: var(--display); font-size: 2.6rem; font-weight: 700; line-height: 0.7; color: var(--accent); }
.bquote p { font-size: var(--step--1); margin: 0; }
.bquote-by { display: flex; align-items: center; gap: 0.75rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.bquote-by b { font-family: var(--display); font-size: var(--step--1); font-weight: 600; color: var(--ink); display: block; }
.bquote-by span { font-size: var(--step--2); color: var(--ink-3); }

/* ---- FAQ + form split ----------------------------------------------------- */
.bfaq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .bfaq { grid-template-columns: 1fr; } }
.bfaq-call {
  margin-top: 1.5rem; padding: 1.1rem 1.3rem; border-radius: 5px;
  background: var(--paper); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 0.9rem;
}
.bfaq-call i {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--accent); color: #fff; display: grid; place-items: center;
}
.bfaq-call i svg { width: 19px; height: 19px; }
.bfaq-call span { display: block; font-size: var(--step--2); color: var(--ink-3); }
.bfaq-call a { font-family: var(--display); font-weight: 700; font-size: var(--step-1); color: var(--ink); letter-spacing: -0.02em; }
.bfaq-call a:hover { color: var(--accent); }

/* ---- Footer word marquee -------------------------------------------------- */
.bmarquee { border-top: 1px solid rgba(242,241,238,0.16); margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2.25rem); overflow: hidden; }
.bmarquee-track { display: flex; width: max-content; gap: 0; animation: bslide 34s linear infinite; }
.bmarquee:hover .bmarquee-track { animation-play-state: paused; }
@keyframes bslide { to { transform: translateX(-50%); } }
.bmarquee-track span {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem);
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -0.03em;
  color: rgba(242,241,238,0.5); white-space: nowrap;
}
.bmarquee-track span::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent-2); flex: none;
}
@media (prefers-reduced-motion: reduce) { .bmarquee-track { animation: none; } }

/* ==========================================================================
   21. Project page — professional rebuild
   The elevation is now CUT to 4:5 and filled edge to edge, not letterboxed.
   A sticky rail carries the facts and the enquiry CTA down the page.
   ========================================================================== */

/* ---- Masthead ------------------------------------------------------------ */
.pj-hero { padding-top: clamp(7rem, 11vw, 9rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.pj-hero-in { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; }

/* The elevation: a true 4:5 window, image cropped to fill it. */
.pj-elevation-frame {
  aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden;
  display: block; padding: 0; background: var(--navy-2);
  box-shadow: 0 30px 70px rgba(0,0,0,0.42);
}
.pj-elevation-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: none; }
.pj-elevation figcaption {
  margin-top: 0.85rem; display: flex; align-items: center; justify-content: center;
  gap: 0.5rem; letter-spacing: 0.14em;
}
.pj-elevation figcaption::before { content: ""; width: 18px; height: 1px; background: rgba(242,241,238,0.35); }

/* Breadcrumb */
.pj-crumb {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 1.5rem; font-size: var(--step--2); color: rgba(242,241,238,0.5);
}
.pj-crumb a { color: rgba(242,241,238,0.72); transition: color 0.2s; }
.pj-crumb a:hover { color: var(--accent-2); }
.pj-crumb span { opacity: 0.4; }

/* Key figures inside the masthead */
.pj-keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 1px; margin-top: 1.9rem; background: rgba(242,241,238,0.16); border: 1px solid rgba(242,241,238,0.16); border-radius: 5px; overflow: hidden; }
.pj-key { background: var(--navy); padding: 0.95rem 1rem; }
.pj-key b { display: block; font-family: var(--display); font-weight: 700; font-size: var(--step-2); color: #fff; letter-spacing: -0.03em; line-height: 1.1; }
.pj-key > span { display: block; margin-top: 0.3rem; font-size: var(--step--2); color: rgba(242,241,238,0.55); }

/* ---- Body: content + sticky rail ---------------------------------------- */
.pj-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 1040px) { .pj-layout { grid-template-columns: 1fr; } }
.pj-main { min-width: 0; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }

.pj-rail { position: sticky; top: 130px; display: grid; gap: 1rem; }
@media (max-width: 1040px) { .pj-rail { position: static; } }
.rail-card { border: 1px solid var(--line); border-radius: 6px; background: var(--paper); overflow: hidden; }
.rail-card-head { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.rail-card-head h3 { font-size: var(--step--1); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); max-width: none; }
.rail-list { padding: 0.35rem 1.25rem 1.1rem; margin: 0; }
.rail-list div { display: grid; gap: 0.15rem; padding-block: 0.75rem; border-bottom: 1px solid var(--line); }
.rail-list div:last-child { border-bottom: 0; }
.rail-list dt { font-size: var(--step--2); color: var(--ink-3); margin: 0; }
.rail-list dd { margin: 0; font-size: var(--step--1); font-weight: 500; color: var(--ink); }
.rail-list dd.mono { font-family: var(--display); letter-spacing: 0.01em; }
.rail-cta { padding: 1.25rem; display: grid; gap: 0.55rem; background: var(--navy); }
.rail-cta p { color: rgba(242,241,238,0.66); font-size: var(--step--2); margin: 0 0 0.35rem; }
.rail-cta .btn { justify-content: center; width: 100%; }
.rail-cta .btn--solid { background: var(--accent-2); border-color: var(--accent-2); color: var(--navy); }
.rail-cta .btn--solid:hover { background: #fff; border-color: #fff; }
.rail-cta .btn:not(.btn--solid) { border-color: rgba(242,241,238,0.32); color: #F2F1EE; }
.rail-cta .btn:not(.btn--solid):hover { background: #fff; border-color: #fff; color: var(--navy); }

/* ---- Section blocks inside the main column ------------------------------ */
.pj-block > .eyebrow { margin-bottom: 0.75rem; }
.pj-block > h2 { margin-bottom: 1.1rem; }
.pj-lede { font-size: var(--step-1); color: var(--ink-2); max-width: 60ch; }

/* Highlights */
.pj-highs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin-top: 1.75rem; }
.pj-high { background: var(--paper); padding: 1.3rem 1.4rem; display: grid; gap: 0.45rem; }
.pj-high i { width: 32px; height: 32px; border-radius: 4px; background: var(--paper-2); color: var(--accent); display: grid; place-items: center; }
.pj-high i svg { width: 17px; height: 17px; }
.pj-high b { font-family: var(--display); font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.pj-high span { font-size: var(--step--2); color: var(--ink-3); line-height: 1.5; }

/* Amenity / spec groups as cards */
.grps { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.grp { background: var(--paper); padding: clamp(1.25rem, 2.2vw, 1.75rem); }
.grp h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 1rem; color: var(--ink); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.09em; }

/* Dimension table polish */
.dimtable { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; border-collapse: separate; border-spacing: 0; }
.dimtable thead th { background: var(--paper-2); padding-left: 1rem; }
.dimtable th, .dimtable td { padding-left: 1rem; }
.dimtable tbody tr:last-child th, .dimtable tbody tr:last-child td { border-bottom: 0; }

/* Plan stage polish */
.plan-stage { border-radius: 10px; }
.plan-tab { border-radius: 4px; }

/* Cards carry the same 4:5 crop as the project mastheads */
.card-media { aspect-ratio: 4 / 5; }
.bproj-card { aspect-ratio: 4 / 5; }
.sheet-hero { aspect-ratio: 4 / 5; max-height: 62vh; }

/* ==========================================================================
   22. Background linework & depth
   A quiet architectural grid sits behind the light sections — vertical
   hairlines on the column rhythm, a soft warm bloom for depth, and a fine
   diagonal hatch on the beige panels. Never louder than the type.
   ========================================================================== */
.section, .bhero, .phead { position: relative; }
.section > .wrap, .bhero > .wrap, .phead > .wrap { position: relative; z-index: 2; }

/* Vertical column hairlines */
.ruled::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  opacity: 0.55;
}
@media (max-width: 760px) { .ruled::before { background-size: 50% 100%; } }

/* Fine diagonal hatch, for the beige panels */
.hatched::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px 11px);
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 50%, #000 30%, transparent 78%);
  mask-image: radial-gradient(90% 70% at 50% 50%, #000 30%, transparent 78%);
}

/* Warm bloom — depth without noise */
.bloomed::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(760px, 78%); aspect-ratio: 1; right: -12%; top: -22%;
  background: radial-gradient(circle, rgba(192,160,106,0.2), rgba(192,160,106,0.06) 45%, transparent 70%);
}
.bloomed--left::after { right: auto; left: -14%; top: auto; bottom: -24%; }

/* ==========================================================================
   23. Page header with light background image
   ========================================================================== */
.phead {
  padding-top: clamp(8rem, 13vw, 11rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.phead-bg { position: absolute; inset: 0; z-index: 0; }
.phead-bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55; filter: saturate(0.62) brightness(1.06);
  transform: scale(1.08);
}
/* Layered wash gives the header depth without darkening the page */
.phead-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(253,251,247,0.72) 0%, rgba(253,251,247,0.3) 50%, rgba(253,251,247,0.88) 100%),
    linear-gradient(90deg, rgba(253,251,247,0.94) 4%, rgba(253,251,247,0.62) 42%, rgba(253,251,247,0.24) 100%);
}
/* Hairline rules over the header give it architectural depth */
.phead-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: linear-gradient(90deg, rgba(26,29,34,0.07) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.phead-in { position: relative; z-index: 2; }
.phead .eyebrow { margin-bottom: 1rem; }
.phead h1 { max-width: 15ch; }
.phead-lead { margin-top: 1.2rem; max-width: 52ch; font-size: var(--step-1); color: var(--ink-2); }
.phead-crumb {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 1.4rem; font-size: var(--step--2); color: var(--ink-3);
}
.phead-crumb a { color: var(--ink-2); transition: color 0.2s; }
.phead-crumb a:hover { color: var(--accent); }
.phead-crumb span { opacity: 0.45; }

/* ==========================================================================
   24. Section separation
   Each band is visibly its own plate: a hairline rule, a tone change, and a
   generous gap. No two sections ever merge into one another.
   ========================================================================== */
.section + .section { border-top: 1px solid var(--line); }
.section.tone-stone { background: var(--paper-2); }
.section.tone-stone + .section, .section + .section.tone-stone { border-top: 0; }

/* A plate: an inset panel that lifts a section off the sheet */
.plate {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  box-shadow: 0 1px 2px rgba(26,29,34,0.03), 0 24px 44px -34px rgba(26,29,34,0.4);
}
.plate--beige { background: var(--paper-2); }

/* ==========================================================================
   25. Depth & motion
   ========================================================================== */
.card, .ccard, .bfeat-item, .bserv-card, .bquote, .rail-card, .enq-inline, .grps, .pj-highs, .dimtable, .plan-stage {
  box-shadow: 0 1px 2px rgba(26,29,34,0.03), 0 16px 34px -28px rgba(26,29,34,0.45);
}
.card:hover, .bserv-card:hover { box-shadow: 0 4px 10px rgba(26,29,34,0.05), 0 28px 52px -30px rgba(26,29,34,0.5); }

/* Header images drift very slightly as you scroll — depth, not parallax theatre */
[data-depth] { will-change: transform; }

/* Staggered reveal */
.rv { transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rv-d1 { transition-delay: 0.09s; }
.rv-d2 { transition-delay: 0.18s; }
.rv-d3 { transition-delay: 0.27s; }

/* Line-draw reveal for section rules */
.section > .wrap > .chead { position: relative; }

@media (prefers-reduced-motion: reduce) {
  [data-depth] { transform: none !important; }
}

/* ---- Project masthead: warm and lit, matched to the beige system --------- */
.pj-hero { background: var(--navy); }
.pj-hero-atmos img { opacity: 0.26; filter: saturate(0.7) brightness(1.05); }
.pj-hero-atmos::after {
  background:
    linear-gradient(90deg, var(--navy) 24%, rgba(35,38,43,0.72) 70%, rgba(35,38,43,0.55) 100%),
    radial-gradient(70% 90% at 78% 40%, rgba(192,160,106,0.16), transparent 70%);
}
.pj-elevation-frame { box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(246,242,234,0.1); }

/* ---- Section rhythm on project pages ------------------------------------- */
.pj-main > .pj-block + .pj-block { padding-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line); }
.pj-block { scroll-margin-top: 130px; }

/* ---- Page-header separation ---------------------------------------------- */
.phead + .section, .phead + .section--tight { border-top: 0; }

/* ---- Softer, warmer form + card surfaces --------------------------------- */
.field input, .field textarea, .field select { border-radius: 4px; }
.btn { border-radius: 4px; }
.card, .ccard, .bfeat-item, .bserv-card, .bquote, .rail-card, .enq-inline, .plate { border-radius: 8px; }
.card-media, .bserv-media { border-radius: 0; }

/* Beige panels get the hatch, white ones the rule — never both */
.hatched.ruled::before { background-image: repeating-linear-gradient(-45deg, var(--line) 0 1px, transparent 1px 11px); }

/* ==========================================================================
   26. Motion system
   One vocabulary, used everywhere: things arrive from below with a soft blur
   lift, images uncover behind a wipe, rules draw themselves, and headings
   rise line by line. Every one of them respects reduced-motion.
   ========================================================================== */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

/* Base reveal — now with a blur lift for depth */
.rv {
  opacity: 0; transform: translateY(26px);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out);
}
.rv.is-in { opacity: 1; transform: none; filter: none; }
.rv-d1 { transition-delay: 0.1s; }
.rv-d2 { transition-delay: 0.2s; }
.rv-d3 { transition-delay: 0.3s; }

/* Image uncover — a wipe that pulls back off the picture */
.uncover { position: relative; overflow: hidden; }
.uncover > img { transform: scale(1.14); transition: transform 1.5s var(--ease-out); }
.uncover::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: var(--paper); transform-origin: right;
  transition: transform 1.1s var(--ease-out);
}
.uncover.is-in > img { transform: scale(1); }
.uncover.is-in::after { transform: scaleX(0); }

/* Rules that draw themselves in */
.drawline { position: relative; }
.drawline::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-out) 0.15s;
}
.drawline.is-in::after { transform: scaleX(1); }

/* Headings rise a line at a time */
.riser span { display: block; overflow: hidden; }
.riser span > i {
  display: block; font-style: inherit; transform: translateY(105%);
  transition: transform 0.95s var(--ease-out);
}
.riser.is-in span:nth-child(1) > i { transition-delay: 0.02s; }
.riser.is-in span:nth-child(2) > i { transition-delay: 0.11s; }
.riser.is-in span:nth-child(3) > i { transition-delay: 0.2s; }
.riser.is-in span:nth-child(4) > i { transition-delay: 0.29s; }
.riser.is-in span > i { transform: none; }

/* Counting numerals settle rather than snap */
.cband-item b, .bnum b, .pj-key b, .chero-badge b { transition: opacity 0.5s var(--ease-out); }

/* Cards lift with a real light source */
.card, .ccard, .bfeat-item, .bserv-card, .bproj-card, .bquote {
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out),
              border-color 0.35s, background 0.35s;
}
.card:hover, .bserv-card:hover, .bquote:hover { transform: translateY(-6px); }
.bproj-card:hover { transform: translateY(-6px); }
.bproj-card { transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out); }

/* Buttons get a quiet sheen */
.btn { position: relative; overflow: hidden; }
.btn > * { position: relative; z-index: 1; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.8s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

/* Nav underline sweeps */
.nav-links a::after { transition: transform 0.45s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; filter: none; }
  .uncover::after { display: none; }
  .uncover > img { transform: none; }
  .drawline::after { transform: scaleX(1); }
  .riser span > i { transform: none; }
  .btn::after { display: none; }
}

/* ==========================================================================
   27. Section rhythm — every band clearly its own
   ========================================================================== */
.section { padding-block: clamp(4.5rem, 8vw, 9rem); }
.section--tight { padding-block: clamp(3rem, 5vw, 5rem); }

/* Numbered section index, sits with the eyebrow */
.sec-index {
  display: flex; align-items: baseline; gap: 0.9rem;
  margin-bottom: 0.9rem;
}
.sec-index b {
  font-family: var(--display); font-size: var(--step--2); font-weight: 700;
  color: var(--accent); letter-spacing: 0.1em;
}
.sec-index i {
  flex: 1; height: 1px; background: var(--line); font-style: normal;
  max-width: 120px;
}

/* A hairline top rule that reads as a seam between plates */
/* the seam between consecutive light sections, drawn without claiming
   ::before — the geometry layer needs it */
.section + .section > .wrap { position: relative; }
.section + .section > .wrap::before {
  content: ""; position: absolute; top: calc(-1 * var(--section)); left: 0; right: 0;
  height: 1px; background: var(--line); pointer-events: none;
}
.section + .section { border-top: 0; }
.section.tone-stone + .section > .wrap::before,
.section + .section.tone-stone > .wrap::before,
.phead + .section > .wrap::before,
.band-dark + .section > .wrap::before,
.band-warm + .section > .wrap::before { display: none; }

/* ==========================================================================
   28. Uncropped presentation
   Nothing is ever cut. Every render is shown whole, standing on a designed
   plinth — a warm gradient ground, a soft cast shadow and a faint reflection —
   so a contained image reads as staged rather than letterboxed.
   ========================================================================== */
.plinth {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 85% at 50% 8%, rgba(192,160,106,0.16), transparent 62%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 100%);
}
.plinth::before {   /* horizon line the object stands on */
  content: ""; position: absolute; left: 8%; right: 8%; bottom: 15%;
  height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.plinth::after {    /* contact shadow under the object */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 13.4%;
  height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(26,29,34,0.2), transparent 70%);
  filter: blur(7px);
}
.plinth > img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center 42%;
  padding: 8% 9% 16%;
}

/* Cards: whole render on the plinth */
.card-media { aspect-ratio: 4 / 5; }
.card-media img { object-fit: contain; }
.card .card-media { background:
  radial-gradient(120% 85% at 50% 10%, rgba(192,160,106,0.14), transparent 60%),
  linear-gradient(180deg, var(--paper-2), var(--paper-3)); }
.card .card-media img { padding: 7% 8% 12%; }

/* Home project tiles */
.bproj-card { background:
  linear-gradient(180deg, var(--navy-2), var(--navy)); }
.bproj-card img { object-fit: contain; opacity: 1; padding: 8% 8% 24%; }
.bproj-card::after { background: linear-gradient(180deg, transparent 42%, rgba(35,38,43,0.86) 88%); }

/* Service cards */
.bserv-media { aspect-ratio: 4 / 3.2; }
.bserv-media img { object-fit: contain; padding: 6% 7% 9%; }
.bserv-card .bserv-media { background:
  radial-gradient(120% 90% at 50% 12%, rgba(192,160,106,0.13), transparent 62%),
  linear-gradient(180deg, var(--paper-2), var(--paper-3)); }

/* Quick sheet */
.sheet-hero { aspect-ratio: 4 / 3.4; max-height: none; }
.sheet-hero img { object-fit: contain; padding: 5% 6% 8%; }

/* Project masthead elevation — whole, floating, lit */
.pj-elevation-frame {
  aspect-ratio: 4 / 4.6; border-radius: 12px; overflow: visible;
  background: none; box-shadow: none;
}
.pj-elevation-frame::before {
  content: ""; position: absolute; inset: -6% -4% 6%;
  background: radial-gradient(58% 52% at 50% 42%, rgba(192,160,106,0.26), transparent 68%);
  filter: blur(24px); z-index: 0;
}
.pj-elevation-frame::after {
  content: ""; position: absolute; left: 16%; right: 16%; bottom: 4%;
  height: 34px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.5), transparent 70%);
  filter: blur(11px); z-index: 0;
}
.pj-elevation-frame img {
  position: relative; z-index: 1;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.45));
}

/* ==========================================================================
   29. The Stage — interactive project showcase
   A dark theatre. Hovering a name in the index lifts that project onto the
   stage: the render crossfades in whole, the numeral counts across, the
   metadata slides, and the whole image answers to the pointer.
   ========================================================================== */
.stage {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1D2025 0%, #23262B 46%, #2B2E34 100%);
  color: #F6F2EA;
  padding-block: clamp(3.5rem, 7vw, 7rem);
}
.stage::before {   /* drifting warm key light */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 70%; aspect-ratio: 1; right: -8%; top: -26%;
  background: radial-gradient(circle, rgba(192,160,106,0.3), rgba(192,160,106,0.07) 42%, transparent 68%);
  animation: keylight 16s ease-in-out infinite alternate;
}
@keyframes keylight { to { transform: translate3d(-7%, 9%, 0) scale(1.12); } }
.stage::after {    /* fine architectural grid */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(246,242,234,0.05) 1px, transparent 1px),
    linear-gradient(rgba(246,242,234,0.05) 1px, transparent 1px);
  background-size: 84px 84px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 45%, #000, transparent 76%);
  mask-image: radial-gradient(80% 70% at 50% 45%, #000, transparent 76%);
}
.stage .wrap { position: relative; z-index: 2; }
.stage .eyebrow { color: var(--accent-2); }
.stage h2 { color: #fff; }

.stage-grid {
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
@media (max-width: 940px) { .stage-grid { grid-template-columns: 1fr; } }

/* --- The index --- */
.stage-list { list-style: none; margin: 0; padding: 0; }
.stage-row {
  position: relative; display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 1rem; align-items: center;
  padding-block: clamp(0.85rem, 1.8vw, 1.25rem);
  border-top: 1px solid rgba(246,242,234,0.14);
  cursor: pointer; isolation: isolate;
}
.stage-row:last-child { border-bottom: 1px solid rgba(246,242,234,0.14); }
.stage-row::before {   /* the wash that fills behind the active row */
  content: ""; position: absolute; z-index: -1;
  inset: 0 -1.1rem; border-radius: 8px;
  background: rgba(246,242,234,0.07);
  transform: scaleX(0.965); opacity: 0;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.stage-row.is-on::before { opacity: 1; transform: none; }
.stage-num {
  font-family: var(--display); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.1em; color: rgba(246,242,234,0.42);
  transition: color 0.35s var(--ease-out);
}
.stage-row.is-on .stage-num { color: var(--accent-2); }
.stage-name {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem); letter-spacing: -0.03em;
  color: rgba(246,242,234,0.62); line-height: 1.2;
  transition: color 0.35s var(--ease-out), transform 0.5s var(--ease-out);
}
.stage-row.is-on .stage-name { color: #fff; transform: translateX(6px); }
.stage-meta {
  font-size: var(--step--2); color: rgba(246,242,234,0.4);
  text-align: right; white-space: nowrap;
  transition: color 0.35s var(--ease-out);
}
.stage-row.is-on .stage-meta { color: var(--accent-2); }
@media (max-width: 560px) { .stage-meta { display: none; } .stage-row { grid-template-columns: 2.5rem 1fr; } }

/* --- The stage itself --- */
.stage-view {
  position: relative;
  /* Every project render is 4:5. Matching the frame to the artwork means the
     contain fit fills it exactly, so there is no grey band down either side. */
  aspect-ratio: 4 / 5;
  perspective: 1400px;
}
.stage-plate {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out);
}
.stage-shot {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(26px) scale(0.965);
  transition: opacity 0.75s var(--ease-out), transform 0.95s var(--ease-out);
  pointer-events: none;
}
.stage-shot.is-on { opacity: 1; transform: none; }
.stage-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
}
/* The renders are portrait and the frame is wider, so contain leaves a band on
   each side. A soft dusk wash fills that space so it reads as atmosphere behind
   the building rather than as a grey gutter. */
.stage-view::before,
.stage-view::after { z-index: 1; }
.stage-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.stage-glow::before {
  content: ""; position: absolute; inset: -20% -10%;
  background:
    radial-gradient(46% 52% at 30% 26%, rgba(220,216,228,0.16), transparent 70%),
    radial-gradient(44% 50% at 74% 34%, rgba(205,214,222,0.14), transparent 70%),
    radial-gradient(50% 44% at 52% 84%, rgba(231,219,217,0.12), transparent 72%);
  filter: blur(30px);
}
/* Ground the object: horizon + cast shadow */
.stage-view::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(246,242,234,0.14);
}
.stage-view::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(10,12,15,0.34), transparent 26%);
}

/* Caption under the stage */
.stage-cap {
  position: absolute; left: 0; right: 0; bottom: -2.6rem; z-index: 3;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-size: var(--step--2); color: rgba(246,242,234,0.5);
}
.stage-cap b { font-family: var(--display); font-weight: 600; color: var(--accent-2); letter-spacing: 0.06em; }
.stage-foot { margin-top: clamp(3rem, 5vw, 4rem); display: flex; flex-wrap: wrap; gap: 0.7rem; }
.stage .btn { border-color: rgba(246,242,234,0.32); color: #F6F2EA; }
.stage .btn:hover { background: #fff; border-color: #fff; color: var(--navy); }
.stage .btn--solid { background: var(--accent-2); border-color: var(--accent-2); color: #23262B; }
.stage .btn--solid:hover { background: #fff; border-color: #fff; }

/* Progress bar that shows which of the six you are on */
.stage-bar { margin-top: 1.5rem; height: 2px; background: rgba(246,242,234,0.14); position: relative; overflow: hidden; }
.stage-bar i { position: absolute; top: 0; left: 0; height: 100%; width: 16.6666%; background: var(--accent-2); transition: transform 0.55s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .stage::before { animation: none; }
  .stage-plate { transform: none !important; }
  .stage-shot { transition: opacity 0.2s linear; transform: none; }
}

/* ==========================================================================
   30. Cinematic hero
   Layered depth: type in front, two renders set at different distances behind
   it, a warm bloom, a fine grid, and a live index strip along the base.
   ========================================================================== */
.khero {
  position: relative; overflow: hidden;
  min-height: min(94svh, 900px); display: flex; flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(8rem, 14vw, 12rem);
  padding-bottom: 0;
  background: linear-gradient(175deg, var(--paper) 0%, var(--paper-2) 62%, var(--paper-3) 100%);
}
.khero-grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(26,29,34,0.05) 1px, transparent 1px),
    linear-gradient(rgba(26,29,34,0.05) 1px, transparent 1px);
  background-size: calc(100% / 8) 96px;
  -webkit-mask-image: radial-gradient(78% 78% at 50% 42%, #000 20%, transparent 78%);
  mask-image: radial-gradient(78% 78% at 50% 42%, #000 20%, transparent 78%);
}
.khero-bloom {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(880px, 82%); aspect-ratio: 1; right: -6%; top: -20%;
  background: radial-gradient(circle, rgba(192,160,106,0.3), rgba(192,160,106,0.08) 44%, transparent 70%);
  animation: kbloom 20s ease-in-out infinite alternate;
}
@keyframes kbloom { to { transform: translate3d(-6%, 7%, 0) scale(1.14); } }

.khero-in { position: relative; z-index: 3; }
.khero h1 { max-width: 15ch; }
.khero-lead { margin-top: 1.5rem; max-width: 44ch; font-size: var(--step-1); color: var(--ink-2); }
.khero-cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* The two layered renders */
.khero-stack { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.khero-shot { position: absolute; }
.khero-shot img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.khero-shot--back {
  right: 3%; bottom: 0; width: min(40%, 520px); height: 74%;
  opacity: 0.4; filter: saturate(0.55) blur(1.5px);
}
.khero-shot--front {
  right: 20%; bottom: 0; width: min(34%, 440px); height: 86%;
  filter: drop-shadow(0 40px 50px rgba(26,29,34,0.28));
}
@media (max-width: 1080px) {
  .khero-shot--back { right: -4%; width: 46%; opacity: 0.24; }
  .khero-shot--front { right: 6%; width: 40%; opacity: 0.5; }
}
@media (max-width: 760px) {
  .khero { min-height: 0; padding-bottom: 0; }
  .khero-shot--back { display: none; }
  .khero-shot--front { position: relative; right: auto; width: 100%; height: auto; aspect-ratio: 4/3.4; margin-top: 2rem; opacity: 1; }
  .khero-stack { position: relative; inset: auto; }
}

/* Index strip along the base of the hero */
.khero-strip {
  position: relative; z-index: 3; margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
}
.khero-strip-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kstat { padding: clamp(1.1rem, 2.2vw, 1.7rem) 0; padding-right: 1.5rem; border-left: 1px solid var(--line); padding-left: clamp(1rem, 2vw, 1.6rem); }
.kstat:first-child { border-left: 0; padding-left: 0; }
.kstat b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1;
  color: var(--ink); letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
}
.kstat b em { font-style: normal; color: var(--accent); }
.kstat > span { display: block; margin-top: 0.5rem; font-size: var(--step--2); color: var(--ink-3); line-height: 1.45; }

/* ==========================================================================
   31. Premium components used across every page
   ========================================================================== */

/* --- Alternating feature rows --- */
.frow { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.frow + .frow { margin-top: clamp(3rem, 6vw, 6rem); }
.frow:nth-child(even) .frow-media { order: 2; }
@media (max-width: 860px) { .frow { grid-template-columns: 1fr; } .frow:nth-child(even) .frow-media { order: 0; } }
.frow-media { position: relative; aspect-ratio: 4/3.4; border-radius: 10px; overflow: hidden; }
.frow-tag {
  position: absolute; z-index: 2; left: 1rem; top: 1rem;
  font-family: var(--display); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(253,251,247,0.92); border: 1px solid var(--line);
  color: var(--ink); padding: 0.3rem 0.65rem; border-radius: 4px;
}

/* --- Process timeline with a line that fills as you scroll --- */
.tline { position: relative; padding-left: clamp(2.5rem, 5vw, 4rem); }
.tline::before {
  content: ""; position: absolute; left: clamp(0.9rem, 1.8vw, 1.4rem); top: 0.6rem; bottom: 0.6rem;
  width: 2px; background: var(--line);
}
.tline-fill {
  position: absolute; left: clamp(0.9rem, 1.8vw, 1.4rem); top: 0.6rem;
  width: 2px; background: var(--accent); height: 0;
  transition: height 0.25s linear;
}
.tstep { position: relative; padding-block: clamp(1.1rem, 2.2vw, 1.7rem); }
.tstep::before {
  content: ""; position: absolute;
  left: calc(clamp(0.9rem, 1.8vw, 1.4rem) - clamp(2.5rem, 5vw, 4rem) - 5px);
  top: calc(clamp(1.1rem, 2.2vw, 1.7rem) + 0.55rem);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--line-2);
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.tstep.is-in::before { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.tstep h3 { font-size: var(--step-2); font-weight: 600; margin-bottom: 0.55rem; }
.tstep .tnum { display: block; font-family: var(--display); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 0.5rem; }
.tstep p { font-size: var(--step--1); }

/* --- Large pull quote band --- */
.pull {
  position: relative; overflow: hidden;
  background: var(--navy); color: #F6F2EA;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
.pull::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 60%; aspect-ratio: 1; left: -10%; bottom: -30%;
  background: radial-gradient(circle, rgba(192,160,106,0.22), transparent 66%);
}
.pull .wrap { position: relative; z-index: 1; }
.pull-mark { font-family: var(--display); font-size: clamp(3rem,7vw,5.5rem); font-weight: 700; line-height: 0.6; color: var(--accent-2); display: block; margin-bottom: 1rem; }
.pull blockquote {
  margin: 0; font-family: var(--display); font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.32;
  letter-spacing: -0.03em; color: #fff; max-width: 22ch;
}
.pull cite { display: block; margin-top: 1.75rem; font-style: normal; font-size: var(--step--2); color: rgba(246,242,234,0.55); letter-spacing: 0.08em; text-transform: uppercase; }

/* --- Numbered principle grid --- */
.prin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,250px),1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.prin-item { background: var(--paper); padding: clamp(1.5rem,2.8vw,2.2rem); display: grid; gap: 0.7rem; align-content: start; transition: background 0.35s var(--ease-out); }
.prin-item:hover { background: var(--paper-2); }
.prin-item b.n { font-family: var(--display); font-size: clamp(2rem,4vw,3rem); font-weight: 200; line-height: 1; color: var(--accent); letter-spacing: -0.04em; }
.prin-item h3 { font-size: var(--step-1); font-weight: 600; }
.prin-item p { font-size: var(--step--1); margin: 0; }

/* --- Contact info tiles --- */
.itiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap: clamp(0.9rem,2vw,1.4rem); }
.itile { border: 1px solid var(--line); border-radius: 10px; padding: clamp(1.3rem,2.4vw,1.8rem); background: var(--paper); display: grid; gap: 0.5rem; align-content: start; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.itile:hover { transform: translateY(-4px); }
.itile i { width: 40px; height: 40px; border-radius: 8px; background: var(--paper-2); color: var(--accent); display: grid; place-items: center; }
.itile i svg { width: 19px; height: 19px; }
.itile b { font-family: var(--display); font-size: var(--step--1); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.itile a, .itile span.v { font-family: var(--display); font-size: var(--step-1); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.itile a:hover { color: var(--accent); }
.itile p { font-size: var(--step--2); margin: 0; }


/* ==========================================================================
   33. Stage — slider controls & alignment
   ========================================================================== */
.stage-head {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 1.5rem; align-items: end;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid rgba(246,242,234,0.14);
}
@media (max-width: 700px) { .stage-head { grid-template-columns: 1fr; } }

.stage-ctl { display: flex; align-items: center; gap: 0.8rem; }
.stage-btn {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(246,242,234,0.28); color: #F6F2EA;
  display: grid; place-items: center; flex: none;
  transition: background 0.3s var(--ease-out), color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.stage-btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: #23262B; transform: scale(1.06); }
.stage-btn svg { width: 17px; height: 17px; }
.stage-count {
  font-family: var(--display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.1em; color: rgba(246,242,234,0.6); min-width: 68px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.stage-count b { color: #fff; }

/* Rows align on a fixed rhythm so the index reads as a table, not a list */
.stage-row { grid-template-columns: 3.25rem minmax(0,1fr) 11rem; }
@media (max-width: 700px) { .stage-row { grid-template-columns: 2.75rem minmax(0,1fr); } }
.stage-meta { text-align: right; overflow: hidden; text-overflow: ellipsis; }

/* Autoplay progress inside the active row */
.stage-row::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--accent-2); transform: scaleX(0); transform-origin: left;
  opacity: 0;
}
.stage-row.is-on::after { opacity: 1; }
.stage-row.is-on.is-timing::after { transform: scaleX(1); transition: transform 3.6s linear; }
@media (prefers-reduced-motion: reduce) { .stage-row::after { display: none; } }

/* ==========================================================================
   34. Hero slider — every project, in the masthead
   The header is now the portfolio. One project at a time: the render rises in
   behind the type, the name and configuration change with it, and a numbered
   rail down the right lets you jump. Everything crossfades; nothing jumps.
   ========================================================================== */
.hs {
  position: relative; overflow: hidden;
  min-height: min(88svh, 800px);
  display: flex; flex-direction: column; justify-content: flex-start;
  /* clears the 68px nav with breathing room, and no more */
  padding-top: clamp(6rem, 7.5vw, 7.5rem);
  background: linear-gradient(172deg, var(--paper) 0%, var(--paper-2) 58%, var(--paper-3) 100%);
}
/* the base strip is pinned to the bottom; the type block stays up top */
.hs-strip { margin-top: auto; }
.hs-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hs-bg::before {   /* architectural grid */
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(26,29,34,0.045) 1px, transparent 1px),
    linear-gradient(rgba(26,29,34,0.045) 1px, transparent 1px);
  background-size: calc(100% / 8) 104px;
  -webkit-mask-image: radial-gradient(84% 84% at 46% 44%, #000 18%, transparent 80%);
  mask-image: radial-gradient(84% 84% at 46% 44%, #000 18%, transparent 80%);
}
.hs-bloom {
  position: absolute; z-index: 0; pointer-events: none;
  width: min(920px, 84%); aspect-ratio: 1; right: -8%; top: -22%;
  background: radial-gradient(circle, rgba(192,160,106,0.32), rgba(192,160,106,0.08) 44%, transparent 70%);
  animation: hsbloom 22s ease-in-out infinite alternate;
}
@keyframes hsbloom { to { transform: translate3d(-5%, 8%, 0) scale(1.16); } }

/* --- The renders --- */
.hs-stack {
  position: absolute; z-index: 1; pointer-events: none;
  right: clamp(1rem, 7vw, 8rem); bottom: 128px;
  width: min(40%, 520px); height: 68%;
}
.hs-shot {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(40px) scale(0.94);
  transition: opacity 1s var(--ease-out), transform 1.25s var(--ease-out);
}
.hs-shot.is-on { opacity: 1; transform: none; }
.hs-shot img {
  width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 42px 54px rgba(26,29,34,0.3));
}
/* the object stands on something */
.hs-stack::before {
  content: ""; position: absolute; left: -6%; right: -6%; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.hs-stack::after {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -14px;
  height: 30px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(26,29,34,0.24), transparent 70%);
  filter: blur(10px);
}
@media (max-width: 1080px) { .hs-stack { width: 44%; right: 2%; opacity: 0.5; } }
@media (max-width: 820px)  { .hs-stack { display: none; } }

/* --- Type --- */
.hs-in { position: relative; z-index: 3; }
.hs-kicker { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.hs-kicker .tag {
  font-family: var(--display); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 4px;
  padding: 0.3rem 0.65rem; color: var(--accent);
}
.hs-kicker .loc { font-size: var(--step--2); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }

.hs-title { position: relative; min-height: 1em; }
.hs-name {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 5.4rem); line-height: 1.02;
  letter-spacing: -0.042em; color: var(--ink); margin: 0; max-width: 14ch;
}
.hs-line { margin-top: 1.1rem; max-width: 40ch; font-size: var(--step-1); color: var(--ink-2); }
.hs-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* text swaps softly with each slide */
.hs-swap { display: block; transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.hs.is-swapping .hs-swap { opacity: 0; transform: translateY(12px); }

/* --- Numbered rail --- */
.hs-rail {
  position: absolute; z-index: 4; right: clamp(1rem, 3vw, 2.5rem); top: 50%;
  transform: translateY(-40%); display: grid; gap: 0.15rem;
}
.hs-dot {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem;
  padding: 0.42rem 0; color: var(--ink-3);
  font-family: var(--display); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.1em; transition: color 0.3s var(--ease-out);
}
.hs-dot i { display: block; width: 22px; height: 2px; background: var(--line-2); transition: width 0.45s var(--ease-out), background 0.3s; }
.hs-dot:hover { color: var(--ink); }
.hs-dot.is-on { color: var(--accent); }
.hs-dot.is-on i { width: 46px; background: var(--accent); }
@media (max-width: 900px) { .hs-rail { display: none; } }

/* --- Base strip: controls + counters --- */
.hs-strip { position: relative; z-index: 3; padding-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--line); }
.hs-strip-in { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: stretch; }
@media (max-width: 820px) { .hs-strip-in { grid-template-columns: 1fr; } }
.hs-ctl { display: flex; align-items: center; gap: 0.7rem; padding-block: clamp(1rem, 2vw, 1.5rem); padding-right: clamp(1rem,2.5vw,2rem); border-right: 1px solid var(--line); }
@media (max-width: 820px) { .hs-ctl { border-right: 0; border-bottom: 1px solid var(--line); } }
.hs-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1px solid var(--line-2); color: var(--ink);
  display: grid; place-items: center;
  transition: background 0.3s var(--ease-out), color 0.3s, border-color 0.3s, transform 0.3s var(--ease-out);
}
.hs-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); transform: scale(1.06); }
.hs-btn svg { width: 16px; height: 16px; }
.hs-num {
  font-family: var(--display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: 0.1em; color: var(--ink-3); min-width: 66px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.hs-num b { color: var(--ink); }
.hs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.hs-stat { padding: clamp(1rem, 2vw, 1.5rem) 0; padding-left: clamp(1rem,2.4vw,2rem); border-left: 1px solid var(--line); }
.hs-stat:first-child { border-left: 0; }
.hs-stat b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem,2.4vw,1.85rem); line-height: 1; color: var(--ink); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.hs-stat b em { font-style: normal; color: var(--accent); }
.hs-stat > span { display: block; margin-top: 0.45rem; font-size: var(--step--2); color: var(--ink-3); line-height: 1.4; }

/* autoplay progress along the top of the strip */
.hs-prog { position: absolute; top: -1px; left: 0; height: 2px; background: var(--accent); width: 0; }
.hs.is-timing .hs-prog { width: 100%; transition: width 5s linear; }

@media (prefers-reduced-motion: reduce) {
  .hs-bloom { animation: none; }
  .hs-shot { transition: opacity 0.25s linear; transform: none; }
  .hs-prog { display: none; }
}

/* Eyebrow stacking was wrapping to three ragged lines — let it breathe */
.eyebrow--stack { max-width: none; display: inline-flex; }
.eyebrow--stack::before { display: block; margin-bottom: 0; }

/* ==========================================================================
   32. Container guard
   .wrap is redeclared last so that no component rule — present or future —
   can override the page gutter. Content must never touch the screen edge.
   ========================================================================== */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
  padding-inline: 0;
}



/* ==========================================================================
   35. Geometry — frames match the artwork
   Every render is a portrait plate. Any frame that holds one whole is set to
   4:5 so the image fills its box instead of floating in a wide letterbox.
   ========================================================================== */
.bserv-media   { aspect-ratio: 4 / 5; }
.babout-media  { aspect-ratio: 4 / 5; }
.frow-media    { aspect-ratio: 4 / 5; }
.sheet-hero    { aspect-ratio: 4 / 5; }
.chero-media-frame { aspect-ratio: 4 / 5; }

/* The about render is shown whole on a plinth, not cropped */
.babout-media {
  background:
    radial-gradient(120% 88% at 50% 10%, rgba(192,160,106,0.16), transparent 62%),
    linear-gradient(180deg, var(--paper-2), var(--paper-3));
}
.babout-media img { object-fit: contain; padding: 6% 7% 11%; }
.babout-media::before {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 12%;
  height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.babout-media::after {
  content: ""; position: absolute; left: 24%; right: 24%; bottom: 10.4%;
  height: 24px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(26,29,34,0.18), transparent 70%);
  filter: blur(7px);
}
.frow-media img { object-fit: contain; }

/* ==========================================================================
   36. Interaction upgrades
   Pointer-tracked 3D tilt on cards, a light that follows the cursor across
   them, staggered grid entrances and magnetic buttons.
   ========================================================================== */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  position: relative;
}
[data-tilt] > * { transform: translateZ(0.01px); }

/* Cursor-following sheen inside cards */
[data-tilt]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
              rgba(192,160,106,0.16), transparent 62%);
  opacity: 0; transition: opacity 0.4s var(--ease-out); pointer-events: none;
}
[data-tilt]:hover::before { opacity: 1; }

/* Grid stagger — children come in one after another */
.stagger > * { opacity: 0; transform: translateY(24px); }
.stagger.is-in > * {
  opacity: 1; transform: none;
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.stagger.is-in > *:nth-child(1) { transition-delay: 0.04s; }
.stagger.is-in > *:nth-child(2) { transition-delay: 0.14s; }
.stagger.is-in > *:nth-child(3) { transition-delay: 0.24s; }
.stagger.is-in > *:nth-child(4) { transition-delay: 0.34s; }
.stagger.is-in > *:nth-child(5) { transition-delay: 0.44s; }
.stagger.is-in > *:nth-child(6) { transition-delay: 0.54s; }

/* Magnetic buttons */
[data-magnet] { transition: transform 0.4s var(--ease-out); }

/* A hairline that scales in under every section heading */
.chead .eyebrow, .sec-head .eyebrow { position: relative; }

@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; }
  [data-tilt]::before { display: none; }
  .stagger > * { opacity: 1; transform: none; }
  [data-magnet] { transform: none !important; }
}

/* ==========================================================================
   37. One grid for the whole site
   Every two-column band was inventing its own columns, so the right-hand rail
   landed at 734, 742 and 749 in different sections. They now all share a
   12-column grid with one gutter: left rail spans 1–5, right rail 7–12, so
   the second column starts at exactly the same x on every page.
   ========================================================================== */
.chead,
.babout,
.bfaq,
.csplit,
.loc-grid,
.enq-grid,
.stage-grid,
.pj-overview,
.split,
.register {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2.25rem);
  row-gap: clamp(1.75rem, 3.5vw, 3rem);
}
.chead > *:first-child,
.babout > *:first-child,
.bfaq > *:first-child,
.csplit > *:first-child,
.loc-grid > *:first-child,
.enq-grid > *:first-child,
.stage-grid > *:first-child,
.pj-overview > *:first-child,
.split > *:first-child,
.register > *:first-child { grid-column: 1 / span 5; }

.chead > *:last-child,
.babout > *:last-child,
.bfaq > *:last-child,
.csplit > *:last-child,
.loc-grid > *:last-child,
.enq-grid > *:last-child,
.stage-grid > *:last-child,
.pj-overview > *:last-child,
.split > *:last-child,
.register > *:last-child { grid-column: 7 / span 6; }

/* Wider right rail where the content is a form or a long list */
.enq-grid > *:first-child, .register > *:first-child { grid-column: 1 / span 4; }
.enq-grid > *:last-child,  .register > *:last-child  { grid-column: 6 / span 7; }
/* The stage index needs room for three columns of its own */
.stage-grid > *:first-child { grid-column: 1 / span 6; }
.stage-grid > *:last-child  { grid-column: 7 / span 6; }

@media (max-width: 900px) {
  .chead, .babout, .bfaq, .csplit, .loc-grid, .enq-grid,
  .stage-grid, .pj-overview, .split, .register { grid-template-columns: 1fr; }
  .chead > *, .babout > *, .bfaq > *, .csplit > *, .loc-grid > *, .enq-grid > *,
  .stage-grid > *, .pj-overview > *, .split > *, .register > * { grid-column: 1 / -1 !important; }
}

/* ==========================================================================
   38. Data table — the register at a glance
   ========================================================================== */
.reg { width: 100%; border-collapse: separate; border-spacing: 0; }
.reg-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.reg th, .reg td { text-align: left; padding: 0.95rem 1.15rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.reg thead th {
  font-family: var(--display); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
  background: var(--paper-2); border-bottom-color: var(--line-2); max-width: none;
  position: sticky; top: 0; z-index: 1;
}
.reg tbody tr { transition: background 0.25s var(--ease-out); }
.reg tbody tr:hover { background: var(--paper-2); }
.reg tbody tr:last-child td { border-bottom: 0; }
.reg .nm { font-family: var(--display); font-weight: 600; font-size: var(--step-0); color: var(--ink); letter-spacing: -0.02em; }
.reg .nm a:hover { color: var(--accent); }
.reg .sub { display: block; font-size: var(--step--2); color: var(--ink-3); font-family: var(--body); font-weight: 400; letter-spacing: 0; margin-top: 0.15rem; white-space: normal; }
.reg td.num { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: var(--step--1); }
.reg .pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--display); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line-2); border-radius: 100px; padding: 0.22rem 0.6rem; color: var(--ink-2);
}
.reg .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.reg .pill.live::before { background: #2E7D4F; }
.reg .pill.soon { color: var(--ink-3); }
.reg .pill.soon::before { background: var(--line-2); }
.reg .rera { font-family: var(--display); font-size: var(--step--2); color: var(--ink-3); letter-spacing: 0.04em; }
.reg .go { color: var(--accent); font-weight: 700; }

/* Locality index */
.locs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,180px),1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.loc-cell { background: var(--paper); padding: clamp(1.1rem,2.2vw,1.6rem); display: grid; gap: 0.3rem; transition: background 0.3s var(--ease-out); }
.loc-cell:hover { background: var(--paper-2); }
.loc-cell b { font-family: var(--display); font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 200; line-height: 1; color: var(--accent); letter-spacing: -0.04em; }
.loc-cell > span.n { font-family: var(--display); font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.loc-cell > span.d { font-size: var(--step--2); color: var(--ink-3); }

/* ==========================================================================
   39. The Index — replaces the data table
   Same information, editorial treatment: no boxes, no cell borders. Hairlines
   only, a large project name, a thumbnail that grows on hover, and the facts
   set as small caps on a strict column rhythm.
   ========================================================================== */
.idx { border-top: 1px solid var(--line); }
.idx-row {
  position: relative; display: grid;
  /* the Notable column was removed with the dimensions, so six columns now */
  grid-template-columns: 3rem 88px minmax(0, 2fr) minmax(0, 1.25fr) minmax(0, 1fr) 8.5rem;
  gap: clamp(0.9rem, 1.8vw, 1.8rem); align-items: center;
  padding-block: clamp(1.1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--line);
  isolation: isolate; transition: color 0.4s var(--ease-out);
}
.idx-row::before {   /* the warm wash that fills behind a row on hover */
  content: ""; position: absolute; z-index: -1;
  inset: 0 calc(-1 * clamp(0.8rem, 1.6vw, 1.4rem));
  border-radius: 8px; background: var(--paper-2);
  opacity: 0; transform: scaleX(0.98);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.idx-row:hover::before { opacity: 1; transform: none; }

.idx-n {
  font-family: var(--display); font-size: var(--step--2); font-weight: 700;
  letter-spacing: 0.1em; color: var(--ink-3); transition: color 0.35s var(--ease-out);
}
.idx-row:hover .idx-n { color: var(--accent); }

.idx-thumb {
  width: 88px; aspect-ratio: 4/5; border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, var(--paper-2), var(--paper-3));
  position: relative;
}
.idx-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8% 8% 14%; transition: transform 0.6s var(--ease-out); }
.idx-row:hover .idx-thumb img { transform: scale(1.08); }
.idx-thumb.is-empty::after {
  content: ""; position: absolute; inset: 26% 30%;
  border: 1px solid var(--line-2); border-bottom-width: 2px;
}

.idx-name {
  font-family: var(--display); font-weight: 600; font-size: var(--step-2);
  letter-spacing: -0.028em; color: var(--ink); line-height: 1.2;
  transition: transform 0.45s var(--ease-out);
}
.idx-row:hover .idx-name { transform: translateX(5px); }
.idx-addr { display: block; margin-top: 0.25rem; font-size: var(--step--2); color: var(--ink-3); font-family: var(--body); font-weight: 400; letter-spacing: 0; line-height: 1.45; }

.idx-lab {
  display: block; font-family: var(--display); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 0.3rem;
}
.idx-val { font-size: var(--step--1); color: var(--ink-2); line-height: 1.45; }
.idx-val.mono { font-family: var(--display); letter-spacing: 0.02em; font-size: var(--step--2); }

.idx-state { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.idx-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2E7D4F; }
.idx-state.soon { color: var(--ink-3); }
.idx-state.soon::before { background: var(--line-2); }

.idx-go {
  justify-self: end; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.idx-row:hover .idx-go { opacity: 1; transform: none; }
.idx-go i { font-style: normal; color: var(--accent); }
.idx-go.is-off { opacity: 1; transform: none; color: var(--ink-3); }

/* Progressive collapse — the least critical columns drop first */
@media (max-width: 1180px) {
  .idx-row { grid-template-columns: 2.5rem 76px minmax(0,2fr) minmax(0,1.1fr) 7rem; }
  .idx-col--rera { display: none; }
}
@media (max-width: 940px) {
  .idx-row { grid-template-columns: 2.25rem 68px minmax(0,2fr) 6.5rem; }
  .idx-col--cfg { display: none; }
}
@media (max-width: 720px) {
  .idx-row { grid-template-columns: 60px minmax(0,1fr) auto; gap: 1rem; align-items: start; }
  .idx-col--n, .idx-col--loc { display: none; }
  .idx-go { align-self: center; }
  .idx-state { font-size: 0.62rem; }
}

/* Footnote under the index */
.idx-note { margin-top: 1.1rem; font-size: var(--step--2); color: var(--ink-3); max-width: 62ch; }

/* ==========================================================================
   40. Section-by-section refinement
   Boxes give way to hairlines and space. Where a card is kept, it loses its
   heavy border and earns its separation from rhythm instead.
   ========================================================================== */

/* --- Feature trio: open columns divided by hairlines, not boxed cards ---- */
.bfeat { gap: 0; border-top: 1px solid var(--line); }
.bfeat-item {
  border: 0; border-radius: 0; background: transparent;
  border-left: 1px solid var(--line);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 2.4vw, 2.25rem);
  gap: 0.9rem;
}
.bfeat-item:first-child { border-left: 0; padding-left: 0; }
.bfeat-item:hover { background: var(--paper-2); transform: none; }
.bfeat-item:hover h3, .bfeat-item:hover .bfeat-more { color: var(--ink); }
.bfeat-item:hover p { color: var(--ink-2); }
.bfeat-item:hover .bfeat-icon { background: var(--paper); color: var(--accent); }
.bfeat-item:hover .bfeat-more i { color: var(--accent); }
.bfeat-icon { width: 40px; height: 40px; border-radius: 6px; background: var(--paper-2); }
.bfeat-icon svg { width: 19px; height: 19px; }
/* a hairline that draws under the heading on hover */
.bfeat-item h3 { position: relative; padding-bottom: 0.85rem; }
.bfeat-item h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 46px;
  background: var(--accent); transform-origin: left; transform: scaleX(0.45);
  transition: transform 0.55s var(--ease-out);
}
.bfeat-item:hover h3::after { transform: scaleX(1); }
@media (max-width: 820px) {
  .bfeat-item { border-left: 0; border-top: 1px solid var(--line); padding-inline: 0; }
  .bfeat-item:first-child { border-top: 0; }
}

/* --- Solutions: lighter cards, the number as a hairline plate ------------ */
.bserv-card { border-color: var(--line); border-radius: 10px; box-shadow: none; }
.bserv-card:hover { box-shadow: 0 18px 44px -26px rgba(26,29,34,0.45); }
.bserv-body { padding-top: clamp(1.1rem, 2vw, 1.5rem); position: relative; }
.bserv-num {
  position: absolute; top: calc(-1 * clamp(1.1rem, 2vw, 1.5rem)); left: 0;
  transform: translateY(-50%);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 100px; padding: 0.3rem 0.75rem;
  font-size: 0.7rem; letter-spacing: 0.12em;
}
.bserv-media { border-bottom: 1px solid var(--line); }
.bserv-arrow { width: 34px; height: 34px; }

/* --- Commitments: quiet plates with a bronze rule ------------------------ */
.bquote { border: 0; border-top: 2px solid var(--accent); border-radius: 0; background: transparent; padding: clamp(1.5rem,2.6vw,2rem) 0 0; box-shadow: none; }
.bquote:hover { transform: none; background: transparent; }
.bquote-mark { font-size: 2rem; margin-bottom: -0.35rem; }
.bquote-by { border-top: 1px solid var(--line); }
.bquotes { gap: clamp(1.5rem, 3vw, 2.75rem); }

/* --- Locality cells: hairline grid, no fill ------------------------------ */
.locs { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; gap: 0; }
.loc-cell { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-inline: clamp(1rem,2vw,1.5rem); }
.loc-cell:first-child { border-left: 0; padding-left: 0; }
.loc-cell:hover { background: var(--paper-2); }

/* --- Principles: hairline grid to match --------------------------------- */
.prin { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; gap: 0; }
.prin-item { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prin-item:first-child { border-left: 0; padding-left: 0; }

/* --- Info tiles: same language ------------------------------------------ */
.itile { border: 0; border-top: 2px solid var(--accent); border-radius: 0; padding: 1.3rem 0 0; }
.itile:hover { transform: none; }
.itile i { width: 34px; height: 34px; border-radius: 6px; }

/* --- FAQ: bigger targets, bronze marker --------------------------------- */
.faq-q { padding-block: clamp(1.15rem, 2.2vw, 1.6rem); }
.faq-item.is-open .faq-q { color: var(--accent); }

/* --- Section headings get a rule that draws in --------------------------- */
.chead > *:first-child { position: relative; }
.sec-index i { transform-origin: left; transform: scaleX(0); transition: transform 0.9s var(--ease-out) 0.1s; }
.rv.is-in .sec-index i, .is-in .sec-index i { transform: scaleX(1); }

/* ==========================================================================
   41. Project page — detail sections
   Flat and editorial. No tilt, no parallax plates: the depth comes from
   rhythm, hairlines and restraint.
   ========================================================================== */

/* --- Proximity, by category ---------------------------------------------- */
.px { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 0; border-top: 1px solid var(--line); }
.px-cat {
  padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1rem, 1.8vw, 1.5rem);
  border-bottom: 1px solid var(--line); border-left: 1px solid var(--line);
  transition: background 0.35s var(--ease-out);
}
.px-cat:hover { background: var(--paper-2); }
.px-cat:first-child { border-left: 0; padding-left: 0; }
.px-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }
.px-head i { width: 30px; height: 30px; border-radius: 6px; background: var(--paper-2); color: var(--accent); display: grid; place-items: center; flex: none; }
.px-head i svg { width: 15px; height: 15px; }
.px-head b { font-family: var(--display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.px-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.px-list li { position: relative; padding-left: 0.9rem; font-size: var(--step--1); color: var(--ink-2); line-height: 1.5; }
.px-list li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 4px; height: 1px; background: var(--accent); }
@media (max-width: 560px) { .px-cat { border-left: 0; padding-left: 0; } }

/* --- Location layout: map beside the categories --------------------------- */
.loc-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.75rem, 3vw, 3rem); align-items: start; }
@media (max-width: 940px) { .loc-split { grid-template-columns: 1fr; } }
.loc-card { border-top: 2px solid var(--accent); padding-top: 1.25rem; }
.loc-card .map { border-radius: 8px; }
.loc-addr { margin-top: 1.1rem; display: grid; gap: 0.55rem; }
.loc-addr div { display: grid; grid-template-columns: 90px 1fr; gap: 0.75rem; align-items: baseline; padding-bottom: 0.55rem; border-bottom: 1px solid var(--line); }
/* 0.68rem is 10.9px, below the 11.5px floor this site holds for body-adjacent
   type on a phone. Uses the token so it scales with the rest. */
.loc-addr dt { font-family: var(--display); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.loc-addr dd { margin: 0; font-size: var(--step--1); color: var(--ink); }

/* --- Room schedule (replaces the plan viewer) ----------------------------- */
.sched { border-top: 1px solid var(--line); }
.sched-row {
  display: grid; grid-template-columns: 2.5rem minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap: clamp(0.8rem, 1.6vw, 1.5rem); align-items: baseline;
  padding-block: clamp(0.85rem, 1.6vw, 1.15rem);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease-out);
}
.sched-row:hover { background: var(--paper-2); }
.sched-row .n { font-family: var(--display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-3); }
.sched-row .rm { font-family: var(--display); font-weight: 600; font-size: var(--step-0); color: var(--ink); letter-spacing: -0.02em; }
.sched-row .m, .sched-row .f { font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.sched-row .m { color: var(--ink-2); }
.sched-row .f { color: var(--accent); font-family: var(--display); font-weight: 600; }
.sched-head { border-bottom: 1px solid var(--line-2); padding-bottom: 0.7rem; }
.sched-head span { font-family: var(--display); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 640px) {
  .sched-row { grid-template-columns: minmax(0,1fr) auto; }
  .sched-row .n, .sched-row .m { display: none; }
}

/* --- Redevelopment process strip on the project page ---------------------- */
.rdv { background: var(--paper-2); border-radius: 10px; padding: clamp(1.5rem, 3vw, 2.5rem); }
.rdv-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,150px),1fr)); gap: 0; margin-top: 1.5rem; counter-reset: rs; }
.rdv-step { position: relative; padding: 0 clamp(0.9rem,1.6vw,1.3rem); border-left: 1px solid var(--line); }
.rdv-step:first-child { border-left: 0; padding-left: 0; }
.rdv-step b {
  display: block; font-family: var(--display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.13em; color: var(--accent); margin-bottom: 0.5rem;
}
.rdv-step span { display: block; font-family: var(--display); font-weight: 600; font-size: var(--step--1); color: var(--ink); line-height: 1.35; margin-bottom: 0.35rem; }
.rdv-step p { font-size: var(--step--2); margin: 0; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 640px) { .rdv-step { border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; margin-top: 1rem; } .rdv-step:first-child { border-top: 0; margin-top: 0; } }

/* Project pages stay flat — no tilt, no plate parallax */
.pj-main [data-tilt] { transform: none !important; }
.pj-main [data-tilt]::before { display: none; }

/* ==========================================================================
   42. Solid bands — the page stops being all paper
   Alternating filled sections give the project page weight: a dark
   specification band, a warm solid process band, and a dark related-projects
   slider. Light sections carry the reading; solid ones carry the impact.
   ========================================================================== */

/* --- Dark band --- */
.band-dark {
  background: var(--navy); color: #F6F2EA;
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
  position: relative; overflow: hidden;
}
.band-dark::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 62%; aspect-ratio: 1; right: -10%; top: -32%;
  background: radial-gradient(circle, rgba(192,160,106,0.2), transparent 66%);
}
.band-dark::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(246,242,234,0.05) 1px, transparent 1px),
    linear-gradient(rgba(246,242,234,0.05) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(78% 76% at 50% 46%, #000, transparent 78%);
  mask-image: radial-gradient(78% 76% at 50% 46%, #000, transparent 78%);
}
.band-dark .wrap { position: relative; z-index: 1; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .eyebrow { color: var(--accent-2); }
.band-dark p { color: rgba(246,242,234,0.72); }
.band-dark .grps { background: rgba(246,242,234,0.16); border-color: rgba(246,242,234,0.16); }
.band-dark .grp { background: transparent; }
.band-dark .grp h3 { color: var(--accent-2); border-bottom-color: rgba(246,242,234,0.16); }
.band-dark .tick li { color: rgba(246,242,234,0.72); }
.band-dark .tick li::before { background: var(--accent-2); }
.band-dark .btn { border-color: rgba(246,242,234,0.32); color: #F6F2EA; }
.band-dark .btn:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* --- Warm solid band --- */
.band-warm {
  background: var(--paper-3); color: var(--ink);
  padding-block: clamp(3.5rem, 6.5vw, 6rem);
  position: relative; overflow: hidden;
}
.band-warm::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, rgba(26,29,34,0.045) 0 1px, transparent 1px 13px);
  -webkit-mask-image: radial-gradient(88% 76% at 50% 50%, #000 30%, transparent 80%);
  mask-image: radial-gradient(88% 76% at 50% 50%, #000 30%, transparent 80%);
}
.band-warm .wrap { position: relative; z-index: 1; }

/* Process strip sits directly on the warm band now */
.band-warm .rdv { background: transparent; padding: 0; }
.band-warm .rdv-step { border-left-color: var(--line-2); }
.band-warm .rdv-steps { margin-top: 1.75rem; }

/* --- Figures ribbon inside a dark band ------------------------------------ */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.fig { padding: clamp(1.1rem,2vw,1.6rem) clamp(1rem,2vw,1.6rem); border-left: 1px solid rgba(246,242,234,0.16); }
.fig:first-child { border-left: 0; padding-left: 0; }
.fig b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem,3.4vw,2.6rem); line-height: 1; color: #fff; letter-spacing: -0.035em; }
.fig > span { display: block; margin-top: 0.55rem; font-size: var(--step--2); color: rgba(246,242,234,0.6); line-height: 1.4; }

/* ==========================================================================
   43. Related-projects slider
   ========================================================================== */
.rel { position: relative; }
.rel-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem; align-items: end; margin-bottom: clamp(1.5rem,3vw,2.25rem); }
@media (max-width: 700px) { .rel-head { grid-template-columns: 1fr; } }
.rel-ctl { display: flex; gap: 0.6rem; }
.rel-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  border: 1px solid rgba(246,242,234,0.28); color: #F6F2EA;
  display: grid; place-items: center;
  transition: background 0.3s var(--ease-out), color 0.3s, border-color 0.3s, opacity 0.3s;
}
.rel-btn:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--navy); }
.rel-btn[disabled] { opacity: 0.32; pointer-events: none; }
.rel-btn svg { width: 16px; height: 16px; }

.rel-track {
  display: flex; gap: clamp(0.9rem, 1.8vw, 1.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.rel-track::-webkit-scrollbar { display: none; }
.rel-card {
  flex: 0 0 clamp(230px, 25vw, 300px); scroll-snap-align: start;
  border: 1px solid rgba(246,242,234,0.16); border-radius: 10px;
  overflow: hidden; background: rgba(246,242,234,0.04);
  transition: border-color 0.35s var(--ease-out), background 0.35s, transform 0.45s var(--ease-out);
}
.rel-card:hover { border-color: rgba(192,160,106,0.5); background: rgba(246,242,234,0.07); transform: translateY(-5px); }
.rel-media { aspect-ratio: 4/5; background: linear-gradient(180deg, rgba(246,242,234,0.07), transparent); position: relative; }
.rel-media img { width: 100%; height: 100%; object-fit: contain; padding: 8% 8% 13%; transition: transform 0.7s var(--ease-out); }
.rel-card:hover .rel-media img { transform: scale(1.06); }
.rel-media.is-empty::after { content: ""; position: absolute; inset: 30% 34%; border: 1px solid rgba(246,242,234,0.26); border-bottom-width: 2px; }
.rel-body { padding: 1.1rem 1.2rem 1.3rem; border-top: 1px solid rgba(246,242,234,0.14); }
.rel-tag { font-family: var(--display); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent-2); }
.rel-body h3 { font-size: var(--step-1); font-weight: 600; color: #fff; margin: 0.4rem 0 0.3rem; max-width: none; }
.rel-body p { font-size: var(--step--2); color: rgba(246,242,234,0.6); margin: 0; }
.rel-prog { margin-top: 1.25rem; height: 2px; background: rgba(246,242,234,0.16); position: relative; overflow: hidden; }
.rel-prog i { position: absolute; top: 0; left: 0; height: 100%; background: var(--accent-2); width: 20%; transition: transform 0.3s var(--ease-out), width 0.3s; }

/* ==========================================================================
   44. Hero refinement
   The render was running into the base strip and the rail crowded it. The
   plate now sits clear of both, and the type block holds a tighter column.
   ========================================================================== */
.hs { min-height: min(84svh, 760px); padding-bottom: 0; }
.hs-in { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hs-stack {
  right: clamp(5rem, 12vw, 13rem);
  bottom: clamp(8rem, 13vw, 11rem);
  width: min(34%, 440px); height: auto; aspect-ratio: 4 / 4.4;
}
.hs-stack::after { bottom: -16px; }
.hs-name { max-width: 9ch; font-size: clamp(2.3rem, 5vw, 4.1rem); }
.hs-line { max-width: 30ch; }

/* rail sits outside the plate, not on top of it */
.hs-rail { right: clamp(1rem, 2.2vw, 2rem); top: 46%; transform: translateY(-50%); }
.hs-dot { padding: 0.5rem 0; }
@media (max-width: 1180px) { .hs-stack { right: 3.5rem; width: 36%; } }
@media (max-width: 1080px) { .hs-stack { opacity: 0.42; right: 1rem; } }

/* the "+" suffix was wrapping under the numeral */
.hs-stat b, .kstat b, .cband-item b, .fig b { white-space: nowrap; }
.hs-stat b em, .cband-item b em, .fig b em { font-size: 0.62em; vertical-align: 0.16em; margin-left: 0.06em; }

/* ==========================================================================
   45. Navigation — refined
   ========================================================================== */
.nav-in { height: 74px; }
.nav-links { gap: clamp(1.3rem, 2.4vw, 2.4rem); }
.nav-links a {
  font-family: var(--display); font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.055em; text-transform: uppercase;
  color: var(--ink-2); padding-block: 0.5rem;
}
.nav-links a::after { height: 1px; bottom: 0.1rem; background: var(--accent); }
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-call {
  font-family: var(--display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.06em; border-radius: 4px;
  padding: 0.7rem 1.15rem !important;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.nav-call::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2); flex: none;
}
.brand b { letter-spacing: 0.24em; font-size: 1rem; }
.brand svg { width: 28px; transition: transform 0.5s var(--ease-out); }
.brand:hover svg { transform: translateY(-2px); }

/* Drawer refined */
.drawer nav a {
  display: flex; align-items: baseline; gap: 1rem;
  font-size: 1.55rem; font-weight: 500; letter-spacing: -0.025em;
  transition: color 0.3s var(--ease-out), padding-left 0.4s var(--ease-out);
}
.drawer nav a::before {
  content: counter(dn, decimal-leading-zero); counter-increment: dn;
  font-family: var(--display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--accent); flex: none;
}
.drawer nav { counter-reset: dn; }
.drawer nav a:hover { color: var(--accent); padding-left: 0.5rem; }

/* ==========================================================================
   46. Group icons on the project detail lists
   ========================================================================== */
.grp h3 { display: flex; align-items: center; gap: 0.6rem; }
.grp h3 i {
  width: 28px; height: 28px; border-radius: 6px; flex: none;
  background: var(--paper-2); color: var(--accent);
  display: grid; place-items: center;
}
.band-dark .grp h3 i { background: rgba(246,242,234,0.1); color: var(--accent-2); }
.grp h3 i svg { width: 15px; height: 15px; }

/* About page: light figure ribbon, locality grid, publish/withhold lists */
.figs-light { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); border-top: 1px solid var(--line); margin-top: clamp(2rem,4vw,3rem); }
.fl { padding: clamp(1.1rem,2vw,1.6rem) clamp(1rem,2vw,1.5rem); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fl:first-child { border-left: 0; padding-left: 0; }
.fl b { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(1.5rem,2.8vw,2.1rem); line-height: 1; color: var(--ink); letter-spacing: -0.03em; }
.fl > span { display: block; margin-top: 0.5rem; font-size: var(--step--2); color: var(--ink-3); line-height: 1.45; }

.wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,230px),1fr)); gap: 0; border-top: 1px solid rgba(246,242,234,0.16); }
.wcell { padding: clamp(1.2rem,2.2vw,1.7rem) clamp(1rem,2vw,1.5rem); border-left: 1px solid rgba(246,242,234,0.16); border-bottom: 1px solid rgba(246,242,234,0.16); }
.wcell:first-child { border-left: 0; padding-left: 0; }
.wcell b { display: block; font-family: var(--display); font-weight: 600; font-size: var(--step-1); color: #fff; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.wcell > span { font-size: var(--step--1); color: rgba(246,242,234,0.68); line-height: 1.55; }
.wcell a { color: var(--accent-2); border-bottom: 1px solid rgba(192,160,106,0.4); }
.wcell a:hover { color: #fff; border-color: #fff; }

.pubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,270px),1fr)); gap: clamp(1.5rem,3vw,2.5rem); }
.pub { border-top: 2px solid var(--accent); padding-top: 1.2rem; }
.pub.is-no { border-top-color: var(--line-2); }
.pub b { display: block; font-family: var(--display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.pub.is-no .tick li::before { background: var(--line-2); }

/* ==========================================================================
   47. Hero — a defined stage, not a wash
   The header was a pale gradient that dissolved into the page. It is now a
   solid deep band with its own edge, the render sits inboard beside the name
   rather than across the page from it, and the light is directional.
   ========================================================================== */
.hs {
  background:
    /* the floor, folded in — no second layer, no seam */
    linear-gradient(180deg, rgba(16,18,21,0) 46%, rgba(13,15,18,0.5) 100%),
    radial-gradient(122% 104% at 74% 26%, #363A42 0%, #2B2F36 34%, #22262C 66%, #191C21 100%);
  color: #F6F2EA;
  border-bottom: 1px solid rgba(246,242,234,0.14);
  min-height: min(86svh, 790px);
}
/* directional key light from behind the render */
.hs-bloom {
  right: 16%; top: -12%; width: min(720px, 62%);
  background: radial-gradient(circle, rgba(192,160,106,0.4), rgba(192,160,106,0.1) 42%, transparent 68%);
}
.hs-bg::before {
  background-image:
    linear-gradient(90deg, rgba(246,242,234,0.055) 1px, transparent 1px),
    linear-gradient(rgba(246,242,234,0.055) 1px, transparent 1px);
  background-size: calc(100% / 8) 98px;
}
/* The floor was a second ::after competing with the geometry layer for the
   same pseudo-element, which anchored it to the top and left a hard seam
   across the hero. It is now part of the single background gradient below. */

/* Type on the dark ground */
.hs .eyebrow { color: var(--accent-2); }
.hs-name { color: #fff; }
.hs-line { color: rgba(246,242,234,0.74); }
.hs-kicker .tag { color: var(--accent-2); border-color: rgba(192,160,106,0.45); }
.hs-kicker .loc { color: rgba(246,242,234,0.55); }
.hs .btn { border-color: rgba(246,242,234,0.32); color: #F6F2EA; }
.hs .btn:hover { background: #fff; border-color: #fff; color: #1A1D22; }
.hs .btn--solid { background: var(--accent-2); border-color: var(--accent-2); color: #1A1D22; }
.hs .btn--solid:hover { background: #fff; border-color: #fff; }

/* --- Layout: the render comes inboard, beside the name ------------------- */
.hs-in {
  display: grid;
  /* the copy column is sized to the text, so the render sits right beside the
     name instead of across a gulf of empty ground */
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1.25rem);
  align-items: center;
  padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.hs-copy { grid-column: 1; }
.hs-stack {
  position: relative; inset: auto; grid-column: 2;
  right: auto; bottom: auto; width: 100%; height: auto;
  aspect-ratio: 4 / 4; pointer-events: none;
  justify-self: start;
}
.hs-shot img { filter: drop-shadow(0 40px 52px rgba(0,0,0,0.6)); }
.hs-stack::before { left: -4%; right: -4%; bottom: 2%; background: linear-gradient(90deg, transparent, rgba(246,242,234,0.26), transparent); }
.hs-stack::after { left: 16%; right: 16%; bottom: -12px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.62), transparent 70%); }
@media (max-width: 900px) {
  .hs-in { grid-template-columns: 1fr; }
  .hs-stack { max-width: 340px; margin-inline: auto; opacity: 1; }
}

/* Rail and strip on the dark ground */
.hs-rail { right: clamp(0.75rem, 1.6vw, 1.5rem); }
.hs-dot { color: rgba(246,242,234,0.45); }
.hs-dot i { background: rgba(246,242,234,0.3); }
.hs-dot:hover { color: #fff; }
.hs-dot.is-on { color: var(--accent-2); }
.hs-dot.is-on i { background: var(--accent-2); }
@media (max-width: 1240px) { .hs-rail { display: none; } }

.hs-strip { border-top: 1px solid rgba(246,242,234,0.16); }
.hs-ctl { border-right-color: rgba(246,242,234,0.16); }
.hs-btn { border-color: rgba(246,242,234,0.3); color: #F6F2EA; }
.hs-btn:hover { background: #fff; border-color: #fff; color: #1A1D22; }
.hs-num { color: rgba(246,242,234,0.55); }
.hs-num b { color: #fff; }
.hs-stat { border-left-color: rgba(246,242,234,0.16); }
.hs-stat b { color: #fff; }
.hs-stat b em { color: var(--accent-2); }
.hs-stat > span { color: rgba(246,242,234,0.55); }
.hs-prog { background: var(--accent-2); }

/* ==========================================================================
   48. Forms — defined, elevated, deliberate
   ========================================================================== */
.enq-inline, .register-panel {
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26,29,34,0.04), 0 26px 54px -34px rgba(26,29,34,0.5);
}
.enq-inline form, .register-panel form { padding: clamp(1.5rem, 3vw, 2.4rem); }
/* a titled header bar so the form reads as an instrument, not a stray block */
.form-head {
  padding: 1.1rem clamp(1.5rem, 3vw, 2.4rem);
  background: var(--navy); color: #F6F2EA;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.form-head b {
  font-family: var(--display); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.form-head span {
  font-size: var(--step--2); color: rgba(246,242,234,0.6);
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.form-head span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2E7D4F; }

/* Step markers become numbered bars */
.enq-step {
  display: flex; align-items: center; gap: 0.7rem;
  font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ink);
  border-bottom: 0; padding-bottom: 0; margin-bottom: 1.1rem;
}
.enq-step::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); color: #fff; flex: none;
}
.enq-step { counter-increment: fstep; }
form { counter-reset: fstep; }
.enq-step::before {
  content: counter(fstep);
  display: grid; place-items: center;
  font-family: var(--display); font-size: 0.62rem; font-weight: 700;
}
.enq-step::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.enq-step:not(:first-of-type) { margin-top: 2rem; }

/* Fields: taller, clearer, with a focus ring */
.field input, .field textarea, .field select {
  background: var(--paper-2); border-color: var(--line-2);
  padding: 1.55rem 0.95rem 0.6rem; border-radius: 6px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  background: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(154,123,69,0.14);
}
.field label { left: 0.95rem; }
.field--select::after { right: 1.05rem; }

/* Chips read as real choices */
.chip span { padding: 0.72rem 1.15rem; border-color: var(--line-2); background: var(--paper-2); }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Footer bar sits on a tinted plinth */
.enq-foot {
  margin: clamp(1.5rem,3vw,2.2rem) calc(-1 * clamp(1.5rem, 3vw, 2.4rem)) calc(-1 * clamp(1.5rem, 3vw, 2.4rem));
  padding: 1.2rem clamp(1.5rem, 3vw, 2.4rem);
  background: var(--paper-2); border-top: 1px solid var(--line);
}

/* Three-step register form on contact gets the same treatment */
.register > *:last-child { align-self: start; }
.steps { padding-top: 0.25rem; }

/* The building hugs the left of its frame so it reads as adjacent to the
   name rather than marooned on the far side of the band. */
.hs-shot img { object-position: left bottom; }
.hs-stack::before { left: 0; right: 22%; }
.hs-stack::after { left: 4%; right: 40%; }

/* ==========================================================================
   49. Brand mark — the real logo
   ========================================================================== */
.brand { gap: 0; }
.brand img { width: clamp(132px, 12vw, 168px); height: auto; display: block; }
.brand svg, .brand b { display: none; }
.foot-mark img { width: 168px; height: auto; }
.foot-mark svg, .foot-mark b { display: none; }
.drawer .brand img { width: 140px; }

/* ==========================================================================
   50. Page headers — grey, quiet, classy
   The header image now reads as a grey ghost behind the type rather than a
   colour photograph competing with it.
   ========================================================================== */
.phead { background: var(--paper-2); }
.phead-bg img {
  opacity: 0.34;
  filter: grayscale(1) contrast(0.9) brightness(1.08);
  transform: scale(1.08);
}
.phead-bg::after {
  background:
    linear-gradient(180deg, rgba(247,242,233,0.82) 0%, rgba(247,242,233,0.5) 46%, rgba(247,242,233,0.9) 100%),
    linear-gradient(90deg, rgba(247,242,233,0.94) 2%, rgba(247,242,233,0.62) 44%, rgba(247,242,233,0.34) 100%);
}
.phead-bg::before { background-image: linear-gradient(90deg, rgba(26,29,34,0.06) 1px, transparent 1px); }

/* ==========================================================================
   51. Project masthead — the project's own render as a grey ghost
   ========================================================================== */
.pj-hero-atmos img {
  opacity: 0.2;
  filter: grayscale(0.86) contrast(0.95) brightness(0.95) blur(1px);
  transform: scale(1.12);
}
.pj-hero-atmos::after {
  background:
    linear-gradient(90deg, var(--navy) 18%, rgba(35,38,43,0.82) 62%, rgba(35,38,43,0.5) 100%),
    radial-gradient(72% 92% at 76% 42%, rgba(192,160,106,0.18), transparent 70%);
}

/* ==========================================================================
   52. About page components
   ========================================================================== */
.vm { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,290px),1fr)); gap: clamp(1.5rem,3vw,2.5rem); }
.vm-card { border-top: 2px solid var(--accent); padding-top: 1.25rem; }
.vm-card b { display: block; font-family: var(--display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.9rem; }
.vm-card p { font-size: var(--step--1); }

.clients { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: clamp(1.75rem,3vw,2.5rem); }
.clients span {
  font-family: var(--display); font-size: var(--step--1); font-weight: 600;
  letter-spacing: 0.02em; color: rgba(246,242,234,0.82);
  border: 1px solid rgba(246,242,234,0.2); border-radius: 100px;
  padding: 0.55rem 1.05rem; transition: background 0.3s var(--ease-out), border-color 0.3s, color 0.3s;
}
.clients span:hover { background: rgba(246,242,234,0.1); border-color: var(--accent-2); color: #fff; }

.why { border-top: 1px solid var(--line); }
.why-row {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1rem,2.5vw,2.5rem); align-items: baseline;
  padding-block: clamp(0.9rem,1.8vw,1.25rem); border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease-out);
}
.why-row:not(.why-head):hover { background: var(--paper-2); }
.why-row span:first-child { font-family: var(--display); font-weight: 600; font-size: var(--step-0); color: var(--ink); letter-spacing: -0.02em; }
.why-row span:last-child { font-size: var(--step--1); color: var(--ink-2); }
.why-head { border-bottom-color: var(--line-2); }
.why-head span { font-family: var(--display) !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3) !important; }
@media (max-width: 620px) { .why-row { grid-template-columns: 1fr; gap: 0.35rem; } .why-head { display: none; } }

.ups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,200px),1fr)); gap: 0; border-top: 1px solid var(--line); }
.up { padding: clamp(1.15rem,2.2vw,1.6rem) clamp(1rem,2vw,1.5rem); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.3s var(--ease-out); }
.up:first-child { border-left: 0; padding-left: 0; }
.up:hover { background: var(--paper); }
.up b { display: block; font-family: var(--display); font-weight: 600; font-size: var(--step-1); color: var(--ink); letter-spacing: -0.025em; margin-bottom: 0.45rem; }
.up > span { font-size: var(--step--2); color: var(--ink-3); line-height: 1.5; }

/* ==========================================================================
   53. Amenities & specification — enhanced
   Each group is a plate with a lettered icon, a count, and items that reveal
   a hairline on hover. Denser to read, easier to scan.
   ========================================================================== */
.grps { gap: 1px; }
.grp { position: relative; padding: clamp(1.4rem,2.4vw,1.9rem); transition: background 0.35s var(--ease-out); }
.grp:hover { background: var(--paper-2); }
.band-dark .grp:hover { background: rgba(246,242,234,0.05); }
.grp h3 {
  display: flex; align-items: center; gap: 0.65rem;
  padding-bottom: 0.85rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.72rem; letter-spacing: 0.12em;
}
.grp h3 i { width: 30px; height: 30px; border-radius: 7px; }
.grp h3 em {
  margin-left: auto; font-style: normal; font-family: var(--display);
  font-size: 0.68rem; font-weight: 700; color: var(--accent);
  background: var(--paper-2); border-radius: 100px; padding: 0.2rem 0.55rem;
}
.band-dark .grp h3 em { background: rgba(246,242,234,0.1); color: var(--accent-2); }
.grp .tick { gap: 0; }
.grp .tick li {
  padding: 0.5rem 0 0.5rem 1.05rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease-out), color 0.3s;
}
.grp .tick li:hover { border-bottom-color: var(--rule); color: var(--fg); }
.grp .tick li::before { top: 1.15em; }

/* ==========================================================================
   54. Form highlight — the panel announces itself
   ========================================================================== */
.enq-inline, .register-panel {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(154,123,69,0.12),
    0 1px 2px rgba(26,29,34,0.04),
    0 30px 60px -34px rgba(26,29,34,0.55);
  position: relative;
}
/* a bronze rule across the very top of the panel */
.enq-inline::before, .register-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  z-index: 2;
}
.form-head { background: linear-gradient(90deg, var(--navy), #2E3238); }
.form-head b { color: #fff; }

/* the section the form sits in gets a tint so the panel reads as raised */
/* The enquiry plate uses a padding shorthand, which was overriding the
   sibling rule's padding-top and collapsing the gap to zero. Its separation
   comes from margin instead. */
.pj-block#enquire {
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-top: clamp(2.75rem, 5.5vw, 5rem);
  background: var(--paper-2); border-radius: 12px; border-top: 0 !important;
}
.pj-main > .pj-block#enquire { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.pj-block#enquire .eyebrow { margin-top: 0; }

/* FAQ inside the project column */
.pj-block .faq { border-top: 1px solid var(--line); }

/* ==========================================================================
   55. Page headers — defined, and keyed per page
   The grey-on-cream header dissolved into the body. Each header is now a deep
   toned band with its own hue, the image held as a lit ghost behind the type,
   a bronze bloom and a hairline grid. Distinct from the white body, and each
   page distinct from the next.
   ========================================================================== */
.phead {
  --ph: #202A33;                       /* default: slate */
  background: var(--ph);
  color: #F6F2EA;
  border-bottom: 0;
  padding-top: clamp(8.5rem, 13vw, 11rem);
  padding-bottom: clamp(3.5rem, 6.5vw, 5.5rem);
}
.phead--projects { --ph: #1F2A34; }    /* slate blue */
.phead--about    { --ph: #2A2318; }    /* bronze brown */
.phead--redev    { --ph: #1E2724; }    /* deep forest */
.phead--contact  { --ph: #26212A; }    /* charcoal plum */

/* the render sits lit behind the type, not bleached out */
.phead-bg img {
  opacity: 0.32;
  filter: grayscale(0.72) contrast(1.06) brightness(0.82);
  transform: scale(1.1);
}
.phead-bg::after {
  background:
    linear-gradient(90deg, var(--ph) 12%, color-mix(in srgb, var(--ph) 72%, transparent) 58%, color-mix(in srgb, var(--ph) 42%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--ph) 62%, transparent) 0%, transparent 40%, color-mix(in srgb, var(--ph) 78%, transparent) 100%);
}
/* warm key light, so the band has a light source like the rest of the site */
.phead-bg::before {
  background-image:
    radial-gradient(58% 76% at 78% 34%, rgba(192,160,106,0.24), transparent 68%),
    linear-gradient(90deg, rgba(246,242,234,0.055) 1px, transparent 1px);
  background-size: auto, calc(100% / 8) 100%;
  -webkit-mask-image: none; mask-image: none;
}

/* type inverts onto the band */
.phead h1 { color: #fff; }
.phead .eyebrow { color: var(--accent-2); }
.phead-lead { color: rgba(246,242,234,0.76); }
.phead-crumb { color: rgba(246,242,234,0.5); }
.phead-crumb a { color: rgba(246,242,234,0.74); }
.phead-crumb a:hover { color: var(--accent-2); }
.phead-crumb span { color: rgba(246,242,234,0.32); }

/* a hairline seam and a bronze tick where the band meets the page */
.phead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 22%, transparent 62%);
}
.phead + .section, .phead + .section--tight { border-top: 0; }

/* a quiet metadata strip along the base of the header */
.phead-meta {
  position: relative; z-index: 2;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid rgba(246,242,234,0.16);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
}
.phead-meta div { padding: 0 clamp(1rem,2vw,1.6rem); border-left: 1px solid rgba(246,242,234,0.16); }
.phead-meta div:first-child { border-left: 0; padding-left: 0; }
.phead-meta b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1; color: #fff;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.phead-meta b em { font-style: normal; color: var(--accent-2); font-size: 0.66em; vertical-align: 0.16em; }
.phead-meta > div > span { display: block; margin-top: 0.45rem; font-size: var(--step--2); color: rgba(246,242,234,0.55); line-height: 1.4; }

/* ==========================================================================
   56. Breathing room under every header
   The first band after a page header always gets clear air — no content
   should ever start hard against the seam.
   ========================================================================== */
.phead + .section,
.phead + .section--tight,
.pj-hero + .secnav + .section { padding-top: clamp(2.75rem, 5vw, 4.5rem) !important; }

/* ==========================================================================
   57. Reading progress
   A hairline of bronze across the very top of the page, tracking how far you
   have read. Quiet, but it makes the whole site feel alive.
   ========================================================================== */
.rprog {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 130;
  width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  pointer-events: none;
}

/* ==========================================================================
   58. Filtered grid — cards animate between states
   Clicking a filter used to snap. Cards now fade and lift out, the grid
   reflows, and the survivors glide to their new positions.
   ========================================================================== */
.card { transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out),
                    border-color 0.35s, opacity 0.35s var(--ease-out); }
.card.is-going { opacity: 0; transform: scale(0.94) translateY(10px); }
.card.is-out { display: none; }
.card.is-coming { opacity: 0; transform: scale(0.96) translateY(14px); }
.grid-projects { position: relative; }

/* the filter itself gets a moving pill behind the active option */
.filters { position: relative; isolation: isolate; }
.filter { position: relative; z-index: 1; background: transparent; }
.filter[aria-pressed="true"] { background: transparent; border-color: transparent; color: #fff; }
.filters-pill {
  position: absolute; z-index: 0; top: 0; left: 0; height: 100%;
  background: var(--navy); border-radius: 4px;
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out);
  pointer-events: none;
}

/* ==========================================================================
   59. Spotlight on dark bands
   The cursor carries a warm light across the dark sections.
   ========================================================================== */
.band-dark, .stage, .pull, .hs { --sx: 50%; --sy: 40%; }
.band-dark .wrap, .stage .wrap, .pull .wrap { position: relative; z-index: 2; }
.band-dark::after, .stage::after {
  background-image:
    radial-gradient(420px circle at var(--sx) var(--sy), rgba(192,160,106,0.13), transparent 62%),
    linear-gradient(90deg, rgba(246,242,234,0.05) 1px, transparent 1px),
    linear-gradient(rgba(246,242,234,0.05) 1px, transparent 1px);
  background-size: auto, 96px 96px, 96px 96px;
  transition: background-position 0.2s linear;
}

@media (prefers-reduced-motion: reduce) {
  .rprog { display: none; }
  .card.is-going, .card.is-coming { opacity: 1; transform: none; }
  .filters-pill { transition: none; }
}

/* ==========================================================================
   60. Credentials plate — replaces the stray elevation on the home About
   A composed panel rather than a photograph: the mark, the years, and the
   facts that actually belong to the company.
   ========================================================================== */
.creds {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #2A2318 0%, #221C13 52%, #1B160F 100%);
  color: #F6F2EA; border-radius: 12px;
  aspect-ratio: 4 / 5;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.creds::before {   /* warm bloom */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 84%; aspect-ratio: 1; right: -18%; top: -16%;
  background: radial-gradient(circle, rgba(192,160,106,0.34), transparent 66%);
}
.creds::after {    /* chevron field, echoing the logo */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, rgba(246,242,234,0.05) 0 1px, transparent 1px 14px);
  -webkit-mask-image: radial-gradient(88% 74% at 50% 62%, #000 20%, transparent 82%);
  mask-image: radial-gradient(88% 74% at 50% 62%, #000 20%, transparent 82%);
}
.creds > * { position: relative; z-index: 1; }
.creds-mark { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.creds-mark img { width: 132px; height: auto; }
.creds-mark span {
  font-family: var(--display); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2);
  border: 1px solid rgba(192,160,106,0.4); border-radius: 100px; padding: 0.3rem 0.7rem;
}
.creds-years { text-align: left; }
.creds-years b {
  display: block; font-family: var(--display); font-weight: 200;
  font-size: clamp(4.5rem, 11vw, 7.5rem); line-height: 0.86;
  letter-spacing: -0.06em; color: #fff;
}
.creds-years b em { font-style: normal; font-size: 0.34em; vertical-align: 0.9em; color: var(--accent-2); font-weight: 400; }
.creds-years > span {
  display: block; margin-top: 0.5rem;
  font-family: var(--display); font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 2vw, 1.35rem); color: rgba(246,242,234,0.72); letter-spacing: -0.01em;
}
.creds-list { display: grid; gap: 0; border-top: 1px solid rgba(246,242,234,0.18); }
.creds-list div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: 0.62rem; border-bottom: 1px solid rgba(246,242,234,0.12);
}
.creds-list div:last-child { border-bottom: 0; }
.creds-list dt { font-size: var(--step--2); color: rgba(246,242,234,0.6); margin: 0; }
.creds-list dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--step--1); color: #fff; white-space: nowrap; }
.creds-list dd em { font-style: normal; color: var(--accent-2); }

/* ==========================================================================
   61. Figures — one elegant treatment, everywhere
   Numerals were plain text. Every statistic on the site now sits under a rule
   that draws in, sets its suffix in raised bronze, and lifts on hover.
   ========================================================================== */
.hs-stat, .cband-item, .fig, .fl, .bnum, .pj-key, .phead-meta div, .loc-cell, .up {
  position: relative;
}

/* the numeral itself */
.hs-stat b, .cband-item b, .fig b, .fl b, .bnum b, .pj-key b, .phead-meta b, .loc-cell b {
  font-feature-settings: "tnum"; font-variant-numeric: tabular-nums lining-nums;
  transition: transform 0.5s var(--ease-out), color 0.4s var(--ease-out);
}
.hs-stat:hover b, .cband-item:hover b, .fig:hover b, .fl:hover b,
.pj-key:hover b, .loc-cell:hover b { transform: translateY(-3px); }

/* raised bronze suffix */
.hs-stat b em, .cband-item b em, .fig b em, .fl b em, .bnum b em,
.pj-key b em, .phead-meta b em {
  font-style: normal; color: var(--accent);
  font-size: 0.56em; vertical-align: 0.42em; margin-left: 0.08em; font-weight: 600;
}
.cband-item b em, .fig b em, .phead-meta b em { color: var(--accent-2); }

/* a bronze tick under the label, drawn on hover */
.hs-stat span, .cband-item span, .fig span, .fl span, .pj-key span, .phead-meta > div > span { position: relative; }
.hs-stat > span::after, .cband-item > span::after, .fig > span::after,
.fl > span::after, .pj-key > span::after {
  content: ""; position: absolute; left: 0; bottom: -0.5rem;
  width: 16px; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.hs-stat:hover > span::after, .cband-item:hover > span::after, .fig:hover > span::after,
.fl:hover > span::after, .pj-key:hover > span::after { transform: scaleX(1); }

/* light-ground figures get a touch more presence */
.fl b, .bnum b { font-weight: 200; letter-spacing: -0.045em; }
.fl b { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

@media (prefers-reduced-motion: reduce) {
}

/* ==========================================================================
   62. Mobile — legibility and reach
   Audit found type down to 10px and tap targets as small as 14px. Nothing
   below 12px, nothing tappable below 44px.
   ========================================================================== */
@media (max-width: 820px) {
  :root {
    --step--2: 0.78rem;     /* was 0.75 */
    --step--1: 0.9rem;      /* was 0.875 */
    --step-0:  1rem;
  }

  /* small caps labels stay readable */
  .idx-lab, .idx-state, .idx-go, .rel-tag, .enq-step, .grp h3,
  .px-head b, .sched-head span, .creds-mark span, .form-head b,
  .pj-eyebrow span, .card-tag, .bproj-tag { font-size: 0.76rem !important; letter-spacing: 0.1em; }
  .loc-cell > span.d, .up > span, .wcell > span, .fl > span,
  .fig > span, .hs-stat > span, .cband-item > span { font-size: 0.8rem; }

  /* every tappable thing reaches 44px */
  .nav-in { height: 62px; }
  .brand { min-height: 44px; display: flex; align-items: center; }
  .brand img { width: 138px; }
  .burger { width: 34px; height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
  .burger span { position: static; }
  .burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .burger.is-open span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }
  .foot ul a, .foot-legal a, .drawer-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .bfeat-more, .ccard-more, .idx-go, .rel-tag { min-height: 44px; display: inline-flex; align-items: center; }
  .btn { padding: 0.9rem 1.4rem; }
  .filter, .plan-tab, .chip span { padding: 0.8rem 1.15rem; }
  .faq-q { padding-block: 1.1rem; min-height: 56px; }
  .hs-dot, .stage-row, .idx-row { min-height: 52px; }

  /* the marquee is decorative — stop it stealing scroll on touch */
  .bmarquee { pointer-events: none; }

  /* dark bands breathe less on a small screen */
  .band-dark, .band-warm, .pull, .stage { padding-block: clamp(2.5rem, 8vw, 3.5rem); }
  .section { padding-block: clamp(2.75rem, 9vw, 4rem); }

  /* the credentials plate is portrait-heavy — let it shrink */
  .creds { aspect-ratio: auto; gap: 1.75rem; padding: 1.5rem; }
  .creds-years b { font-size: clamp(3.5rem, 18vw, 5rem); }

  /* figures go two-up rather than four-across */
  .hs-stats, .cband-grid, .figs, .figs-light, .phead-meta, .pstats {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .hs-stat, .kstat, .fl, .fig, .phead-meta div, .pstat {
    border-left: 0; padding-left: 0; padding-right: 1rem;
  }
  .hs-stat:nth-child(n+3), .fl:nth-child(n+3), .fig:nth-child(n+3),
  .phead-meta div:nth-child(n+3) { padding-top: 1.1rem; }
}

@media (max-width: 480px) {
  .hs-stats, .cband-grid, .figs, .figs-light, .phead-meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .idx-row { grid-template-columns: 56px minmax(0,1fr); row-gap: 0.5rem; }
  .idx-end { grid-column: 2; }
  .rel-card { flex-basis: 78vw; }
}

/* ==========================================================================
   63. Touch dynamism
   Hover effects do nothing on a phone. On touch, sections lift in as they
   arrive and the active card holds a highlight while pressed.
   ========================================================================== */
@media (hover: none) {
  .card:active, .bserv-card:active, .bquote:active,
  .idx-row:active, .rel-card:active, .stage-row:active {
    transform: scale(0.985);
    transition: transform 0.12s ease-out;
  }
  .idx-row:active::before { opacity: 1; transform: none; }
  .btn:active { transform: scale(0.97); }
}

/* Remaining touch targets and the one 11px label the audit still flagged */
@media (max-width: 820px) {
  .phead-crumb a, .pj-crumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .phead-crumb, .pj-crumb { margin-bottom: 0.6rem; }
  .itile a { min-height: 44px; display: inline-flex; align-items: center; }
  .why-head span { font-size: 0.76rem !important; }
  .rows dd a, .loc-addr dd a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 820px) {
  /* section nav items and the footer phone link were the last two under 44px */
  .secnav-links a { padding-block: 0.85rem; min-height: 46px; display: inline-flex; align-items: center; }
  .secnav-in { height: auto; min-height: 54px; }
  .foot ul li a, .foot ul li { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 820px) {
  /* the drawer footer phone link — the last target under 44px */
  .drawer-foot a, .drawer-foot span { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 820px) {
  /* the FAQ call-box phone link */
  .bfaq-call a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ==========================================================================
   64. Geometric linework
   A drawn ground beneath every section, built from the brand's own double
   chevron plus the column rhythm the layout already uses. Everything sits at
   4–7% opacity: felt rather than seen, and never competing with the type.
   ========================================================================== */
.geo { position: relative; overflow: hidden; }
.geo > .wrap, .geo > .pj-layout { position: relative; z-index: 2; }
.geo--cols::before,
.geo--diag::before,
.geo--rows::before,
.geo--chev::after,
.geo--arc::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ---- 1. Column rhythm: the same eight columns the grid uses -------------- */
.geo--cols::before {
  background-image: linear-gradient(90deg, var(--geo, rgba(26,29,34,0.06)) 1px, transparent 1px);
  background-size: calc(100% / 8) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

/* ---- 2. Chevron field: the brand mark, repeated as line art -------------- */
.geo--chev::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='84' viewBox='0 0 120 84'%3E%3Cg fill='none' stroke='%231A1D22' stroke-width='1.1' stroke-opacity='0.5'%3E%3Cpath d='M6 34 L34 14 L62 34'/%3E%3Cpath d='M6 48 L34 28 L62 48'/%3E%3Cpath d='M66 76 L94 56 L122 76'/%3E%3Cpath d='M66 90 L94 70 L122 90'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 84px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(76% 68% at 50% 46%, #000 8%, transparent 76%);
  mask-image: radial-gradient(76% 68% at 50% 46%, #000 8%, transparent 76%);
}

/* ---- 3. Concentric arcs: the star returning, drawn as orbit -------------- */
.geo--arc::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='680' viewBox='0 0 680 680'%3E%3Cg fill='none' stroke='%239A7B45' stroke-width='1'%3E%3Ccircle cx='680' cy='96' r='150'/%3E%3Ccircle cx='680' cy='96' r='236'/%3E%3Ccircle cx='680' cy='96' r='330'/%3E%3Ccircle cx='680' cy='96' r='438'/%3E%3Ccircle cx='680' cy='96' r='556'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right -120px top -110px;
  background-size: 680px 680px;
  opacity: 0.5;
}

/* ---- 4. Fine diagonal weave --------------------------------------------- */
.geo--diag::before {
  background-image: repeating-linear-gradient(-45deg,
    var(--geo, rgba(26,29,34,0.05)) 0 1px, transparent 1px 15px);
  -webkit-mask-image: radial-gradient(92% 78% at 50% 50%, #000 24%, transparent 82%);
  mask-image: radial-gradient(92% 78% at 50% 50%, #000 24%, transparent 82%);
}

/* ---- 5. Baseline rules: a horizontal register --------------------------- */
.geo--rows::before {
  background-image: linear-gradient(var(--geo, rgba(26,29,34,0.05)) 1px, transparent 1px);
  background-size: 100% 104px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* ---- 6. Corner registration marks --------------------------------------- */
.geo--marks .wrap::before,
.geo--marks .wrap::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border: 1px solid var(--geo-mark, rgba(154,123,69,0.34));
}
.geo--marks .wrap { position: relative; }
.geo--marks .wrap::before { top: -14px; left: -14px; border-right: 0; border-bottom: 0; }
.geo--marks .wrap::after { bottom: -14px; right: -14px; border-left: 0; border-top: 0; }

/* ---- Dark grounds get a warm-white line instead of ink ------------------ */
.band-dark, .stage, .pull, .hs, .pj-hero, .phead, .cband, .foot {
  --geo: rgba(246,242,234,0.055);
  --geo-mark: rgba(192,160,106,0.4);
}
.band-dark.geo--chev::after, .stage.geo--chev::after, .pull.geo--chev::after,
.hs.geo--chev::after, .cband.geo--chev::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='84' viewBox='0 0 120 84'%3E%3Cg fill='none' stroke='%23F6F2EA' stroke-width='1.1' stroke-opacity='0.5'%3E%3Cpath d='M6 34 L34 14 L62 34'/%3E%3Cpath d='M6 48 L34 28 L62 48'/%3E%3Cpath d='M66 76 L94 56 L122 76'/%3E%3Cpath d='M66 90 L94 70 L122 90'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.42;
}
.band-dark.geo--arc::after, .stage.geo--arc::after, .pull.geo--arc::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='680' height='680' viewBox='0 0 680 680'%3E%3Cg fill='none' stroke='%23C0A06A' stroke-width='1'%3E%3Ccircle cx='680' cy='96' r='150'/%3E%3Ccircle cx='680' cy='96' r='236'/%3E%3Ccircle cx='680' cy='96' r='330'/%3E%3Ccircle cx='680' cy='96' r='438'/%3E%3Ccircle cx='680' cy='96' r='556'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.34;
}

/* A very slow drift keeps the ground alive without drawing the eye */
@media (prefers-reduced-motion: no-preference) {
  .geo--chev::after { animation: geoDrift 70s linear infinite; }
  @keyframes geoDrift { to { background-position: 120px 84px; } }
}

/* the old one-off decorations defer to the system */
.ruled::before, .hatched::before { display: none; }

/* ==========================================================================
   65. Glass
   Fluted and frosted glass, treated as the architectural material it is —
   ribbed channels that refract what sits behind them, a lit top edge, and a
   soft inner glow. Used on panels that should feel like objects: the sticky
   rail, the credentials plate, the forms, the concierge, the stat strips.
   ========================================================================== */

/* ---- Frosted base -------------------------------------------------------- */
.glass {
  position: relative; isolation: isolate;
  background: rgba(253, 251, 247, 0.62);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(26,29,34,0.05),
    0 1px 2px rgba(26,29,34,0.04),
    0 24px 48px -30px rgba(26,29,34,0.45);
}
/* a lit edge running along the top, as light catches a real pane */
.glass::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
}

/* ---- Fluted: vertical ribbed channels ------------------------------------ */
.glass--fluted { position: relative; isolation: isolate; overflow: hidden; }
.glass--fluted > * { position: relative; z-index: 2; }
.glass--fluted::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.34) 0px,
    rgba(255,255,255,0.10) 3px,
    rgba(26,29,34,0.045) 7px,
    rgba(255,255,255,0.10) 11px,
    rgba(255,255,255,0.34) 14px);
  mix-blend-mode: soft-light;
  border-radius: inherit;
}
/* the flutes catch a brighter highlight where the key light falls */
.glass--fluted::before {
  left: 0; right: 0; height: 100%;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent) top / 100% 1px no-repeat,
    radial-gradient(120% 60% at 78% 0%, rgba(255,255,255,0.4), transparent 62%);
}
.glass > * { position: relative; z-index: 2; }

/* ---- Dark glass, for the navy and bronze grounds ------------------------- */
.glass--dark {
  /* self-sufficient: works with or without the .glass base class */
  position: relative; isolation: isolate;
  background: rgba(246, 242, 234, 0.07);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(246, 242, 234, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(246,242,234,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 26px 52px -30px rgba(0,0,0,0.7);
}
.glass--dark::before {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246,242,234,0.6), transparent);
}
.glass--dark > * { position: relative; z-index: 2; }
.glass--dark.glass--fluted::before {
  background:
    linear-gradient(90deg, transparent, rgba(246,242,234,0.55), transparent) top / 100% 1px no-repeat,
    radial-gradient(120% 60% at 76% 0%, rgba(192,160,106,0.3), transparent 64%);
}
/* On a near-black ground an overlay blend does nothing, so dark flutes are
   painted directly — a lit rib, a shadowed valley, repeated. */
.glass--dark.glass--fluted::after {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(246,242,234,0.13) 0px,
    rgba(246,242,234,0.05) 2px,
    rgba(0,0,0,0.22) 7px,
    rgba(246,242,234,0.05) 12px,
    rgba(246,242,234,0.13) 14px);
  mix-blend-mode: normal;
  opacity: 0.9;
}

/* ---- Where the glass is used -------------------------------------------- */

/* the sticky project rail becomes a pane of fluted glass */
.rail-card { border-radius: 12px; overflow: hidden; }
.rail-card-head { background: rgba(247,242,233,0.5); border-bottom-color: rgba(26,29,34,0.08); }

/* forms */
.enq-inline, .register-panel { border-radius: 14px; }

/* the concierge and the dock buttons */
.bot { background: rgba(253,251,247,0.86); backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); }
.bot-head { background: rgba(247,242,233,0.62); }
.dock-btn, .dock-bot { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* the hero base strip reads as a glass sill under the type */
.hs-strip {
  border-radius: 12px 12px 0 0;
  padding-inline: clamp(1rem, 2.4vw, 2rem);
  margin-bottom: 0;
}

/* project key figures sit behind glass */
.pj-keys { border-radius: 10px; overflow: hidden; }

/* the FAQ call box */
.bfaq-call { border-radius: 10px; }

/* stage rows glaze as they become active */
.stage-row::before {
  background: rgba(246,242,234,0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(246,242,234,0.14);
}

/* ---- No backdrop-filter? fall back to solid, never transparent ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(253,251,247,0.96); }
  .glass--dark { background: rgba(35,38,43,0.94); }
  .bot { background: var(--paper); }
}

/* Blur is expensive on low-end phones — keep the look, drop the cost */
@media (max-width: 820px) {
  .glass { backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); }
  .glass--fluted::after { opacity: 0.7; }
}


/* ==========================================================================
   66. Fluting removed
   The ribbed treatment read as texture noise rather than glass. Panels keep a
   clean frosted ground and a lit edge; nothing else.
   ========================================================================== */
.glass--fluted::after { display: none !important; }
.glass--fluted::before {
  left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent) !important;
}
.glass--dark.glass--fluted::before {
  background: linear-gradient(90deg, transparent, rgba(192,160,106,0.55), transparent) !important;
}

/* The chevron field read as a triangle pattern — retired. */
.geo--chev::after { display: none !important; }
.geo--chev { --geo-off: 1; }

/* ==========================================================================
   67. The Statement — a full-bleed years band
   One decisive gesture instead of a card: the numeral set enormous as an
   outline that bleeds off the frame, the copy laid over it, and the client
   roster running underneath as a live ticker.
   ========================================================================== */
.stmt {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #14171C 0%, #1B1F25 42%, #23272E 100%);
  color: #F6F2EA;
  padding-block: clamp(4rem, 8vw, 7.5rem) 0;
}
.stmt::before {   /* the key light */
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 74%; aspect-ratio: 1; right: -14%; top: -34%;
  background: radial-gradient(circle, rgba(192,160,106,0.34), rgba(192,160,106,0.06) 44%, transparent 70%);
}
.stmt .wrap { position: relative; z-index: 2; }

/* --- the giant outlined numeral --- */
.stmt-num {
  position: absolute; z-index: 1; pointer-events: none; user-select: none;
  right: -2%; top: 46%; transform: translateY(-50%);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(11rem, 30vw, 26rem); line-height: 0.76;
  letter-spacing: -0.06em;
  /* Solid and very light, so it reads as a watermark pressed into the band.
     The outlined version fought the type around it and looked like line art. */
  color: rgba(255,255,255,0.045);
  -webkit-text-stroke: 0;
  text-stroke: 0;
  white-space: nowrap;
}
.stmt-num em {
  font-style: normal;
  font-size: 0.34em; vertical-align: 0.9em;
  color: rgba(192,160,106,0.14);
}
@media (max-width: 900px) {
  .stmt-num { right: -6%; top: 8%; transform: none; font-size: 34vw; }
}

/* --- the statement itself --- */
.stmt-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
@media (max-width: 900px) { .stmt-grid { grid-template-columns: 1fr; } }
.stmt h2 {
  font-size: clamp(2rem, 4.6vw, 3.6rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.06; color: #fff; max-width: 15ch;
}
.stmt h2 em { font-style: normal; color: var(--accent-2); }
.stmt-lead { margin-top: 1.4rem; max-width: 46ch; color: rgba(246,242,234,0.72); font-size: var(--step-1); }
.stmt-cta { margin-top: 2rem; display: flex; gap: 0.7rem; flex-wrap: wrap; }
.stmt .btn { border-color: rgba(246,242,234,0.32); color: #F6F2EA; }
.stmt .btn:hover { background: #fff; border-color: #fff; color: #14171C; }
.stmt .btn--solid { background: var(--accent-2); border-color: var(--accent-2); color: #14171C; }
.stmt .btn--solid:hover { background: #fff; border-color: #fff; }

/* --- the four credentials, as a rule-separated column --- */
.stmt-facts { display: grid; gap: 0; border-top: 1px solid rgba(246,242,234,0.18); }
.stmt-fact {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: baseline;
  padding-block: clamp(0.85rem, 1.6vw, 1.15rem);
  border-bottom: 1px solid rgba(246,242,234,0.14);
  transition: padding-left 0.45s var(--ease-out), background 0.45s var(--ease-out);
}
.stmt-fact:hover { padding-left: 0.6rem; background: rgba(246,242,234,0.04); }
.stmt-fact b {
  font-family: var(--display); font-weight: 700; font-size: var(--step-1);
  color: var(--accent-2); letter-spacing: -0.02em; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.stmt-fact span { font-size: var(--step--1); color: rgba(246,242,234,0.7); line-height: 1.45; }

/* --- the client ticker along the base --- */
.stmt-ticker {
  position: relative; z-index: 2;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(246,242,234,0.18);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stmt-ticker-track { display: flex; width: max-content; animation: stmtRun 46s linear infinite; }
.stmt-ticker:hover .stmt-ticker-track { animation-play-state: paused; }
@keyframes stmtRun { to { transform: translateX(-50%); } }
.stmt-ticker-track span {
  display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 2.75rem);
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(0.75rem, 1.5vw, 1.4rem);
  font-family: var(--display); font-weight: 600;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem); letter-spacing: -0.01em;
  color: rgba(246,242,234,0.5); white-space: nowrap;
  transition: color 0.3s var(--ease-out);
}
.stmt-ticker-track span:hover { color: #fff; }
.stmt-ticker-track span::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-2); flex: none; opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) { .stmt-ticker-track { animation: none; } }

/* ==========================================================================
   68. Scroll-pinned showcase
   A different way of presenting the register: the render pins to the viewport
   while the project panels scroll past it. Six projects, six screens, one
   continuous move. The image never re-enters — it changes underneath you.
   ========================================================================== */
.pin { position: relative; background: linear-gradient(150deg, #15181D 0%, #1C2027 46%, #24282F 100%); color: #F6F2EA; }
.pin::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(246,242,234,0.05) 1px, transparent 1px),
    linear-gradient(rgba(246,242,234,0.05) 1px, transparent 1px);
  background-size: calc(100% / 8) 108px;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 46%, #000, transparent 80%);
  mask-image: radial-gradient(80% 70% at 50% 46%, #000, transparent 80%);
}

.pin-head { position: relative; z-index: 3; padding-top: clamp(3.5rem, 7vw, 6.5rem); padding-bottom: clamp(1rem, 2vw, 2rem); }
.pin-head .eyebrow { color: var(--accent-2); }
.pin-head h2 { color: #fff; }

.pin-stage { position: relative; z-index: 2; }
.pin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 900px) { .pin-grid { grid-template-columns: 1fr; } }

/* the pinned side */
.pin-media {
  position: sticky; top: 96px;
  /* A 4:5 box, matching the renders exactly, so the image fills it with no
     letterbox and no crop. Height leads; width follows from the ratio. */
  height: min(74svh, 620px);
  aspect-ratio: 4 / 5;
  width: auto; max-width: 100%;
  margin-inline: auto;
  display: grid; place-items: stretch;
  overflow: hidden;
}
@media (max-width: 900px) {
  /* relative, not static: .pin-shot is absolutely positioned, so a static
     parent would hand it a much larger containing block and the render would
     be blown up and cropped. */
  .pin-media { position: relative; height: auto; width: 100%; aspect-ratio: 4/5; margin-bottom: 1.5rem; }
}
.pin-shot { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.75s var(--ease-out); }
@media (max-width: 900px) { .pin-shot { position: absolute; } }
.pin-shot.is-on { opacity: 1; }
.pin-shot img {
  /* width and height are both explicit: a percentage height on an item inside a
     content-sized grid track resolves to auto, which let the render size itself
     from its intrinsic dimensions and overflow the frame. */
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  transform: scale(1.04); transition: transform 1.1s var(--ease-out);
}
.pin-shot.is-on img { transform: scale(1); }
/* the ground the object stands on */
.pin-media::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(246,242,234,0.14);
  background: linear-gradient(to top, rgba(10,12,15,0.3), transparent 24%);
}

/* the scrolling side */
.pin-panels { display: grid; }
.pin-panel {
  min-height: min(74svh, 620px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid rgba(246,242,234,0.14);
  opacity: 0.34; transition: opacity 0.6s var(--ease-out);
}
.pin-panel:first-child { border-top: 0; }
.pin-panel.is-on { opacity: 1; }
@media (max-width: 900px) { .pin-panel { min-height: 0; opacity: 1; } }

.pin-n {
  font-family: var(--display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; color: var(--accent-2); margin-bottom: 0.9rem;
  display: flex; align-items: center; gap: 0.75rem;
}
.pin-n::after { content: ""; flex: 1; height: 1px; background: rgba(246,242,234,0.2); max-width: 90px; }
.pin-panel h3 {
  font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.038em;
  color: #fff; line-height: 1.05; max-width: 12ch;
}
.pin-tag {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1rem;
  font-family: var(--display); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246,242,234,0.62);
}
.pin-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }
.pin-panel p { margin-top: 1rem; color: rgba(246,242,234,0.72); font-size: var(--step--1); max-width: 44ch; }
.pin-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; margin-top: 1.6rem; border-top: 1px solid rgba(246,242,234,0.16); }
.pin-facts div { padding: 0.9rem clamp(0.75rem,1.5vw,1.2rem) 0; border-left: 1px solid rgba(246,242,234,0.14); }
.pin-facts div:first-child { border-left: 0; padding-left: 0; }
.pin-facts b { display: block; font-family: var(--display); font-weight: 700; font-size: var(--step-1); color: #fff; letter-spacing: -0.02em; white-space: nowrap; }
.pin-facts span { display: block; margin-top: 0.35rem; font-size: 0.72rem; color: rgba(246,242,234,0.5); }
.pin-go { margin-top: 1.6rem; }
.pin .btn { border-color: rgba(246,242,234,0.32); color: #F6F2EA; }
.pin .btn:hover { background: #fff; border-color: #fff; color: #15181D; }
.pin .btn--solid { background: var(--accent-2); border-color: var(--accent-2); color: #15181D; }
.pin .btn--solid:hover { background: #fff; border-color: #fff; }

/* a progress rail down the left of the pinned media */
.pin-rail { position: absolute; left: -1.75rem; top: 12%; bottom: 12%; width: 2px; background: rgba(246,242,234,0.16); }
.pin-rail i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--accent-2); transition: height 0.25s linear; }
@media (max-width: 1100px) { .pin-rail { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .pin-shot { transition: none; }
  .pin-shot img { transform: none; }
  .pin-panel { opacity: 1; }
}

@media (max-width: 820px) {
  /* pinned showcase labels stay legible */
  .pin-tag, .pin-n { font-size: 0.76rem !important; }
  .pin-facts span { font-size: 0.76rem; }
  .pin-facts div { padding-top: 0.8rem; }
  /* was position: static, which took the containing block away from the
     absolutely-positioned .pin-shot and stretched the render to the height of
     the whole section. It must stay a positioned ancestor. */
  .pin-media { position: relative; }
}

/* ==========================================================================
   69. Dark grounds must redefine the token set
   Several dark bands set explicit colours but never redefined --fg, --rule and
   friends. Any component using those tokens inside them resolved to the root
   ink value — near-black on a near-black ground. The hovered amenity item was
   the visible symptom; this fixes the whole class.
   ========================================================================== */
.band-dark,
.stage,
.pull,
.stmt,
.pin,
.hs,
.pj-hero,
.phead,
.cband,
.foot,
.creds {
  --bg:        transparent;
  --fg:        #FFFFFF;
  --fg-soft:   rgba(246, 242, 234, 0.74);
  --fg-faint:  rgba(246, 242, 234, 0.5);
  --rule:      rgba(246, 242, 234, 0.16);
  --rule-2:    rgba(246, 242, 234, 0.3);
  --accent:    var(--accent-2);
  --field:     rgba(246, 242, 234, 0.06);
  --line:      rgba(246, 242, 234, 0.16);
  --line-2:    rgba(246, 242, 234, 0.28);
  --ink:       #FFFFFF;
  --ink-2:     rgba(246, 242, 234, 0.74);
  --ink-3:     rgba(246, 242, 234, 0.5);
  --paper:     rgba(246, 242, 234, 0.05);
  --paper-2:   rgba(246, 242, 234, 0.08);
  --paper-3:   rgba(246, 242, 234, 0.12);
}

/* the amenity rows now brighten on hover instead of vanishing */
.band-dark .grp .tick li:hover { color: #fff; border-bottom-color: rgba(246,242,234,0.28); }
.band-dark .grp:hover { background: rgba(246, 242, 234, 0.055); }

/* forms and glass panels sitting on dark grounds keep their own light surface */
.band-dark .enq-inline, .band-dark .register-panel,
.pin .enq-inline, .stmt .enq-inline {
  --fg: var(--ink); --ink: #1A1D22;
  --ink-2: #4A4E57; --ink-3: #83817C;
  --line: #E4DCCC; --line-2: #CFC3AC;
  --paper: #FDFBF7; --paper-2: #F7F2E9;
  --rule: #E4DCCC; --rule-2: #CFC3AC;
  --accent: #9A7B45;
  color: var(--ink);
}


/* ==========================================================================
   70. Component glows move into the background
   Several sections painted a radial glow into ::before while the geometry
   layer also claimed it, so both were mis-sized — the hero showed a hard seam
   across its whole width. Glows are now background layers on the element
   itself, which nothing can fight over.
   ========================================================================== */
.band-dark::before,
.stage::before,
.pull::before,
.stmt::before,
.pin::before { content: none !important; }

.band-dark {
  background-image:
    radial-gradient(58% 74% at 88% -12%, rgba(192,160,106,0.2), transparent 66%);
  background-color: var(--navy);
}
.stage {
  background-image:
    radial-gradient(52% 68% at 92% -18%, rgba(192,160,106,0.28), transparent 66%),
    linear-gradient(160deg, #1D2025 0%, #23262B 46%, #2B2E34 100%);
}
.pull {
  background-image:
    radial-gradient(46% 78% at 4% 116%, rgba(192,160,106,0.22), transparent 64%);
  background-color: var(--navy);
}
.stmt {
  background-image:
    radial-gradient(56% 74% at 92% -20%, rgba(192,160,106,0.3), transparent 68%),
    linear-gradient(150deg, #14171C 0%, #1B1F25 42%, #23272E 100%);
}
.pin {
  background-image:
    radial-gradient(48% 66% at 90% -14%, rgba(192,160,106,0.18), transparent 66%),
    linear-gradient(150deg, #15181D 0%, #1C2027 46%, #24282F 100%);
}


/* ==========================================================================
   71. The masthead — immersive full-bleed slider
   The home page opens on people, not on a project. Six photographs crossfade
   with a slow drift; each carries one line. The nav sits transparent over the
   top slide and only takes its paper background once the hero is scrolled past.
   ========================================================================== */
.mast {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: clamp(6rem, 9vw, 9rem);
  padding-bottom: clamp(1.4rem, 3vw, 2.4rem);
  background: #121418;
}
.mast-stage { position: absolute; inset: 0; z-index: 0; }
.mast-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 1.5s var(--ease), visibility 0s linear 1.5s;
}
.mast-slide.is-on { opacity: 1; visibility: visible; transition: opacity 1.5s var(--ease), visibility 0s; }
.mast-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  transform: scale(1.06);
}
/* the drift only runs on the slide that is showing */
.mast-slide.is-on img { animation: mastDrift 11s linear forwards; }
@keyframes mastDrift { from { transform: scale(1.06); } to { transform: scale(1.13); } }

/* legibility scrim — dark at the foot and along the left, clear through the middle */
.mast-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10,12,15,0.86) 0%, rgba(10,12,15,0.46) 34%, rgba(10,12,15,0.04) 58%, rgba(10,12,15,0.30) 100%),
    linear-gradient(to right, rgba(10,12,15,0.55) 0%, rgba(10,12,15,0.12) 44%, transparent 72%);
}

/* ---- the caption that belongs to the photograph ---- */
.mast-cap {
  position: absolute; z-index: 2; left: 0; right: 0;
  bottom: clamp(9rem, 17vh, 13rem);
  width: min(100% - var(--gutter) * 2, var(--maxw)); margin-inline: auto;
}
.mast-kicker {
  font-family: var(--data); font-size: var(--step--2); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.24em; color: var(--accent-2);
  margin: 0 0 0.85rem;
}
.mast-line {
  font-family: var(--display); font-weight: 600; color: #fff;
  font-size: clamp(1.75rem, 4.4vw, 3.9rem); line-height: 1.06;
  letter-spacing: -0.02em; max-width: 17ch; margin: 0;
  text-wrap: balance; text-shadow: 0 2px 40px rgba(0,0,0,0.4);
}
/* caption animates in with its slide */
.mast-slide .mast-kicker,
.mast-slide .mast-line { opacity: 0; transform: translateY(20px); }
.mast-slide.is-on .mast-kicker { animation: mastUp 0.9s var(--ease-out) 0.35s forwards; }
.mast-slide.is-on .mast-line   { animation: mastUp 1s var(--ease-out) 0.5s forwards; }
@keyframes mastUp { to { opacity: 1; transform: none; } }

/* ---- the fixed block: brand, one line, the two actions ---- */
/* Nothing sits over the top of the frame — the wordmark is in the nav and the
   only words on the photograph are its own caption. The h1 stays for structure
   but is not painted. */
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- controls ---- */
.mast-bar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.22);
}
.mast-dots { display: flex; align-items: center; gap: 0.55rem; }
.mast-dot {
  width: 44px; height: 30px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
}
.mast-dot i {
  display: block; width: 100%; height: 2px; background: rgba(255,255,255,0.3);
  transition: background 0.3s, height 0.3s;
}
.mast-dot:hover i { background: rgba(255,255,255,0.65); }
.mast-dot.is-on i { background: var(--accent-2); height: 3px; }

.mast-nav { display: flex; align-items: center; gap: 0.5rem; }
.mast-arrow, .mast-play {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.3); border-radius: 50%;
  background: rgba(255,255,255,0.05); color: #fff; cursor: pointer;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.mast-arrow svg, .mast-play svg { width: 17px; height: 17px; }
.mast-arrow:hover, .mast-play:hover { background: rgba(255,255,255,0.16); border-color: #fff; }
.mast-arrow:active { transform: scale(0.94); }
.mast-count {
  font-family: var(--data); font-size: var(--step--2); color: rgba(255,255,255,0.72);
  letter-spacing: 0.08em; min-width: 3.6em; text-align: center;
}
.mast-count b { color: #fff; font-weight: 600; }
.mast-count i { font-style: normal; margin: 0 0.3em; color: rgba(255,255,255,0.4); }
.mast-play .ico-play { display: none; }
.mast-play[aria-pressed="true"] .ico-play { display: block; }
.mast-play[aria-pressed="true"] .ico-pause { display: none; }

.mast-prog { flex: 1 0 100%; height: 2px; background: rgba(255,255,255,0.16); overflow: hidden; }
.mast-prog i { display: block; height: 100%; width: 0; background: var(--accent-2); }

.mast-cue {
  position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(8rem, 14vh, 11rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  font-family: var(--data); font-size: var(--step--2);
  text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.62);
  writing-mode: vertical-rl;
}
.mast-cue i { display: block; width: 1px; height: clamp(30px, 5vw, 52px); background: rgba(255,255,255,0.3); position: relative; overflow: hidden; }
.mast-cue i::after { content: ""; position: absolute; left: 0; top: -60%; width: 100%; height: 60%; background: var(--accent-2); animation: mastCue 2.2s var(--ease) infinite; }
@keyframes mastCue { to { top: 100%; } }

/* ---- the nav rides over the hero on the home page ---- */
body[data-page="index.html"] .nav {
  background: linear-gradient(to bottom, rgba(10,12,15,0.5), transparent);
  backdrop-filter: none; border-bottom-color: transparent;
}
body[data-page="index.html"] .nav .nav-links a { color: rgba(255,255,255,0.82); }
body[data-page="index.html"] .nav .nav-links a:hover,
body[data-page="index.html"] .nav .nav-links a[aria-current="page"] { color: #fff; }
body[data-page="index.html"] .nav .burger span { background: #fff; }
body[data-page="index.html"] .nav .brand img { filter: brightness(0) invert(1); }
/* once scrolled past the hero it becomes the normal paper bar again */
body[data-page="index.html"] .nav.is-condensed {
  background: rgba(253,251,247,0.96); backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
}
body[data-page="index.html"] .nav.is-condensed .nav-links a { color: var(--ink-2); }
body[data-page="index.html"] .nav.is-condensed .nav-links a:hover,
body[data-page="index.html"] .nav.is-condensed .nav-links a[aria-current="page"] { color: var(--ink); }
body[data-page="index.html"] .nav.is-condensed .burger span { background: var(--ink); }
body[data-page="index.html"] .nav.is-condensed .brand img { filter: none; }

/* Matches the nav: the moment the burger appears, the hero takes the narrow
   layout too. The scroll cue goes, because below this it collides with the
   slider controls, and the controls clear the chat/WhatsApp dock. */
@media (max-width: 920px) {
  /* a shorter hero means a landscape frame is cropped less severely in portrait */
  .mast { min-height: 84svh; }
  .mast-slide img { object-position: center 38%; }
  .mast-cap { bottom: clamp(10.5rem, 24vh, 15rem); }
  .mast-line { max-width: 15ch; }
  .mast-cue { display: none; }
  .mast-bar { gap: 0.9rem; }
  .mast-dot { width: 34px; height: 44px; }   /* 44px tap target, hairline stays 2px */
  .mast-nav { margin-left: auto; padding-right: 4.6rem; }
  .mast-play { display: none; }
}
@media (max-width: 560px) {
  .mast-dots { flex: 1 1 auto; }
  .mast-dot { width: 100%; max-width: 40px; height: 44px; }
  .mast-bar { padding-bottom: 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mast-slide.is-on img { animation: none; transform: scale(1.02); }
  .mast-slide.is-on .mast-kicker,
  .mast-slide.is-on .mast-line { animation: none; opacity: 1; transform: none; }
  .mast-cue i::after { animation: none; }
  .mast-prog i { transition: none; }
}

/* ==========================================================================
   72. Outlook — what a project looks out on
   Added to the register and the project cards so location reads before spec.
   ========================================================================== */
.idx-out {
  display: block; margin-top: 0.4rem;
  font-family: var(--data); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.02em; color: var(--accent); line-height: 1.4;
}
.card-out {
  margin: 0.5rem 0 0 !important;
  font-family: var(--data); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.02em; color: var(--accent) !important; line-height: 1.4;
}


/* ==========================================================================
   73. Container guard, restated — must remain the last rule in this file
   ========================================================================== */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
  padding-inline: 0;
}


/* ==========================================================================
   74. Projects whose drawings have not arrived yet
   Gurusparsh and Abhyuday are on the site by name while their brochures and
   renders are prepared. The marker says so plainly rather than implying the
   page is broken.
   ========================================================================== */
.card-soon {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 0.4rem 0.7rem;
  font-family: var(--data); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.02em; color: var(--ink-2);
  background: rgba(253,251,247,0.92); border: 1px solid var(--line);
  border-radius: 999px; backdrop-filter: blur(6px);
}

/* rows for projects still in preparation read a shade quieter */
.idx-row--soon .idx-name { color: var(--ink-2); }
.idx-row--soon .idx-thumb img { opacity: 0.75; }

/* ==========================================================================
   76. Dusk atmosphere
   A slow, very low-opacity gradient field that drifts behind a section. It is
   the one piece of colour in the system beyond the bronze, and it is kept
   under 0.5 opacity so the paper still leads. Applied with .has-dusk.
   ========================================================================== */
.has-dusk { position: relative; isolation: isolate; }
.has-dusk > .dusk {
  position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none;
  opacity: 0.42; filter: blur(70px) saturate(1.05);
  mask-image: radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 30%, transparent 78%);
}
.has-dusk > .dusk i {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
}
.has-dusk > .dusk i:nth-child(1) {
  width: 46%; height: 62%; left: -4%; top: -8%;
  background: radial-gradient(circle, var(--dusk-1), transparent 68%);
  animation: duskA 26s var(--ease) infinite alternate;
}
.has-dusk > .dusk i:nth-child(2) {
  width: 52%; height: 58%; right: -6%; top: 6%;
  background: radial-gradient(circle, var(--dusk-2), transparent 68%);
  animation: duskB 32s var(--ease) infinite alternate;
}
.has-dusk > .dusk i:nth-child(3) {
  width: 44%; height: 54%; left: 24%; bottom: -12%;
  background: radial-gradient(circle, var(--dusk-3), transparent 70%);
  animation: duskC 29s var(--ease) infinite alternate;
}
.has-dusk > .dusk i:nth-child(4) {
  width: 36%; height: 46%; right: 18%; bottom: -6%;
  background: radial-gradient(circle, var(--dusk-4), transparent 70%);
  animation: duskD 35s var(--ease) infinite alternate;
}
@keyframes duskA { to { transform: translate3d(14%, 10%, 0) scale(1.16); } }
@keyframes duskB { to { transform: translate3d(-12%, 14%, 0) scale(1.1); } }
@keyframes duskC { to { transform: translate3d(10%, -12%, 0) scale(1.2); } }
@keyframes duskD { to { transform: translate3d(-14%, -8%, 0) scale(1.12); } }

/* on the dark band the same field is warmer and much fainter */
.band-dark.has-dusk > .dusk { opacity: 0.2; filter: blur(90px) saturate(0.9); }

/* ==========================================================================
   77. Depth on the project cards
   The card is a real plane in space: the plate lifts further than the image,
   a pastel sheen tracks the cursor, and the frame casts a longer shadow as it
   rises. Pointer devices only.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .card {
    transform-style: flat;
    backface-visibility: hidden;
    transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
    will-change: transform;
  }
  .card::after {          /* the sheen that follows the cursor */
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    opacity: 0; transition: opacity 0.45s var(--ease-out);
    background: radial-gradient(38% 42% at var(--mx, 50%) var(--my, 50%),
                rgba(255,255,255,0.5), rgba(220,216,228,0.16) 42%, transparent 72%);
  }
  .card:hover::after { opacity: 1; }
  .card:hover {
    box-shadow: 0 34px 70px -30px rgba(26,29,34,0.4), 0 3px 12px -6px rgba(26,29,34,0.16);
  }
  .card .card-media img { transition: transform 0.75s var(--ease-out); }
  .card:hover .card-media img { transform: scale(1.055) translateZ(0); }
  /* Type is deliberately NOT pushed along Z. Transforming text in 3D makes the
     browser rasterise it at its pre-transform size and it comes back soft; the
     depth reads from the rotation, the sheen and the shadow instead. */
  .card .card-plate,
  .card .card-meta { transform: none; }
}

/* ==========================================================================
   78. Parallax on project imagery
   Set by script as a scroll-linked custom property, so the render drifts
   inside its frame instead of sitting flat.
   ========================================================================== */
[data-para] { overflow: hidden; }
/* Scale is kept to the minimum the drift needs. These are architectural
   elevations — cropping 14% off a building to make room for a parallax would
   cost more than the effect is worth. */
/* Only ever applied to a cover-fitted image that has spare bleed to give.
   A contain-fitted image already sits inside its box: scaling it crops the
   building, and a translate fights whatever reveal transform the element
   already owns. Both showcase frames are contain-fitted, so neither takes
   parallax at all — see parallax() in agastya.js. */
[data-para] > img { transform: translate3d(0, var(--pary, 0px), 0) scale(1.055); will-change: transform; }

/* ==========================================================================
   79. Reveal, refined
   Rising elements now resolve out of a slight blur, which reads as focus
   pulling rather than as a slide.
   ========================================================================== */
.rv { filter: blur(6px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out), filter 0.9s var(--ease-out); }
.rv.is-in { filter: blur(0); }
.riser span i { transition: transform 0.95s var(--ease-out), opacity 0.95s var(--ease-out); }

/* ==========================================================================
   80. Reading progress
   A hairline across the foot of the nav.
   ========================================================================== */
.nav-prog {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transition: width 0.12s linear; z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .has-dusk > .dusk i { animation: none; }
  .rv { filter: none; }
  [data-para] > img { transform: none; }
}

/* ==========================================================================
   81. Responsive harmonisation
   The nav collapses to a burger at 920px, but several page layouts were still
   two-column until 880 or 860. That left a band where the page looked like a
   phone at the top and a desktop underneath. Every page-level split now
   collapses on the same line as the nav.
   ========================================================================== */
@media (max-width: 920px) {
  .pj-hero-in { grid-template-columns: 1fr; }
  .pj-elevation { order: -1; max-width: 420px; margin-inline: auto; }
  .stmt-grid,
  .split,
  .stage-grid,
  .chead,
  .bfaq,
  .rel-head,
  .stage-head { grid-template-columns: 1fr !important; }
  .stage-head { gap: 1rem; }
  .rel-head { gap: 0.75rem; }
}

/* the footer steps down in two stages rather than packing columns */
@media (max-width: 860px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.75rem; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr; gap: 1.9rem; }
  .foot-grid > :first-child { grid-column: auto; }
}

/* ==========================================================================
   75. Container guard, restated — must remain the last rule in this file
   ========================================================================== */
.wrap {
  width: min(100% - var(--gutter) * 2, var(--maxw));
  margin-inline: auto;
  padding-inline: 0;
}