@import url("../assets/fonts/fonts.css");

/* ==========================================================================
   GAMI GROUP — "The Monograph"
   HTML5 · CSS3 · vanilla JS · Motion (motion.dev). Static / Cloudflare Pages.
   Order: tokens → reset → base → layout → components → sections → utilities → a11y
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* Ink & paper — warm neutrals */
  --ink: #1a1a17;
  --ink-soft: #45443e;
  --ink-mute: #6f6c63;
  --paper: #f3f0e9;
  --paper-raised: #faf8f3;
  --paper-sunken: #ece8de;
  --line: #d8d3c7;
  --line-strong: #bdb7a8;

  /* Accent — GAMI green */
  --green: #1e3d33;
  --green-hi: #2c5646;
  --green-deep: #163028;
  --on-green: #f3f0e9;

  /* Brass — hairline detail only */
  --brass: #96774b;
  --brass-soft: #b9a17e;

  /* Ink sections */
  --ink-bg: #15150f;
  --ink-bg-raised: #201f16;
  --on-ink: #eeebe0;
  --on-ink-mute: #a6a292;
  --line-ink: #38372b;

  /* Functional */
  --danger: #a83a2b;
  --danger-on-ink: #e4897e;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "DM Sans", -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.83rem, 0.80rem + 0.14vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.40rem + 1.65vw, 2.75rem);
  --step-4:  clamp(2.07rem, 1.55rem + 2.60vw, 3.75rem);
  --step-5:  clamp(2.75rem, 1.60rem + 5.60vw, 6.25rem);
  --lead:    clamp(1.13rem, 1.05rem + 0.40vw, 1.38rem);

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.25rem;
  --space-2xl: 4.5rem;
  --space-3xl: clamp(3rem, 2.1rem + 3vw, 4.75rem);
  --space-4xl: clamp(4.5rem, 3rem + 5vw, 7rem);

  /* Layout */
  --container: 1440px;
  --measure: 66ch;
  --gutter: clamp(20px, 6vw, 120px);
  --nav-h: 80px;
  --nav-h-condensed: 64px;

  /* Z-index */
  --z-raised: 10;
  --z-nav: 100;
  --z-sticky-cta: 200;
  --z-modal: 1000;
  --z-toast: 1100;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 0.14s;
  --dur-hover: 0.25s;

  color-scheme: light;
}

/* ------------------------------------------------------------------ RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h-condensed) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
ul[role="list"] { list-style: none; padding: 0; }

/* ------------------------------------------------------------------ BASE TYPE */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--step-4); font-weight: 340; line-height: 1.08; }
h2 { font-size: var(--step-3); font-weight: 380; }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; }
p { max-width: var(--measure); }

/* line-reveal pattern — used on every hero headline */
h1 .line, h2 .line { display: block; overflow: hidden; }
h1 .line > span, h2 .line > span { display: block; }

::selection { background: var(--green); color: var(--on-green); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ------------------------------------------------------------------ LAYOUT */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); }
.bleed { margin-inline: calc(50% - 50vw); width: 100vw; }

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }
/* tighten the seam between two thematically-linked sections */
.section--seam-top { padding-top: var(--space-xl); }
.section--seam-bottom { padding-bottom: var(--space-lg); }
.section--ink { background: var(--ink-bg); color: var(--on-ink); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--on-ink); }

/* Section opener: left index + heading, right intro (asymmetric editorial) */
.opener { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); align-items: end; }
.opener__head { grid-column: 1 / 8; }
.opener__intro { grid-column: 8 / 13; align-self: end; }
.opener__intro p { color: var(--ink-soft); font-size: var(--lead); }
.section--ink .opener__intro p { color: var(--on-ink-mute); }
.opener + * { margin-top: var(--space-lg); }
@media (max-width: 900px) {
  .opener { gap: var(--space-md); }
  .opener__head, .opener__intro { grid-column: 1 / -1; }
  .opener__intro { align-self: start; }
  .opener + * { margin-top: var(--space-lg); }
}

.index {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  margin-bottom: var(--space-md);
}
.section--ink .index { color: var(--on-ink-mute); }
.index::before { content: ""; display: inline-block; width: 2rem; height: 1px; background: var(--brass); vertical-align: middle; margin-right: 0.75rem; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.section--ink .eyebrow { color: var(--on-ink-mute); }

.lead { font-size: var(--lead); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.section--ink .rule { border-color: var(--line-ink); }

/* ------------------------------------------------------------------ BUTTONS */
.btn {
  --btn-bg: var(--green);
  --btn-fg: var(--on-green);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.85em 1.6em;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out),
    border-color var(--dur-hover) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--green-hi); border-color: var(--green-hi); }
.btn:active { transform: scale(0.98); }
.btn .btn__arrow { transition: transform var(--dur-hover) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.btn--on-dark { --btn-fg: var(--on-ink); --btn-bg: transparent; border-color: var(--on-ink-mute); }
.btn--on-dark:hover { background: var(--on-ink); border-color: var(--on-ink); color: var(--ink-bg); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--green);
  border-color: transparent;
  padding-inline: 0;
  min-height: auto;
}
.btn--ghost:hover { background: transparent; border-color: transparent; color: var(--green-hi); }

.link-underline {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500;
  letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none;
  color: var(--ink);
  background-image: linear-gradient(var(--green), var(--green));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-hover) var(--ease-out);
  padding-bottom: 2px;
}
.link-underline:hover { background-size: 100% 1px; color: var(--green); }
.section--ink .link-underline { color: var(--on-ink); background-image: linear-gradient(var(--brass-soft), var(--brass-soft)); }

/* ------------------------------------------------------------------ SKIP LINK */
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: var(--z-toast);
  padding: 0.6em 1em; background: var(--green); color: var(--on-green);
  text-decoration: none; border-radius: 2px;
  transition: top var(--dur-hover) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ------------------------------------------------------------------ NAV */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: height var(--dur-hover) var(--ease-inout), background var(--dur-hover) var(--ease-inout),
    border-color var(--dur-hover) var(--ease-inout);
  border-bottom: 1px solid transparent;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--space-md); }
.nav__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.nav__logo img {
  height: 34px; width: auto; display: block;
  transition: height var(--dur-hover) var(--ease-inout), filter var(--dur-hover) var(--ease-inout);
}
/* transparent-over-hero: white knockout so the mark reads on architectural imagery */
.nav.is-condensed .nav__logo img { height: 30px; filter: none; }
.nav__menu { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); list-style: none; }
.nav__link {
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none; color: var(--on-ink); padding: 0.5em 0;
  position: relative; transition: color var(--dur-hover) var(--ease-inout);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--brass); transition: width var(--dur-hover) var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current="true"]::after { width: 100%; }
.nav__link[aria-current="true"] { font-weight: 700; }
.nav__cta { flex-shrink: 0; }
.nav__toggle { display: none; }

/* condensed state (added by JS past scroll threshold) */
.nav.is-condensed {
  height: var(--nav-h-condensed);
  background: var(--paper);
  border-bottom-color: var(--line);
}
.nav.is-condensed .nav__logo,
.nav.is-condensed .nav__link { color: var(--ink); }
.nav.is-condensed .nav__cta.btn--on-dark { --btn-fg: var(--on-green); --btn-bg: var(--green); border-color: var(--green); }
.nav.is-condensed .nav__cta.btn--on-dark:hover { background: var(--green-hi); border-color: var(--green-hi); }

/* mobile */
@media (max-width: 1023px) {
  .nav__menu, .nav__cta { display: none; }
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; color: var(--on-ink);
    transition: color var(--dur-hover) var(--ease-inout);
  }
  .nav.is-condensed .nav__toggle { color: var(--ink); }

  .nav-panel {
    position: fixed; inset: 0; z-index: calc(var(--z-nav) + 1);
    background: var(--paper); color: var(--ink);
    display: flex; flex-direction: column;
    padding: calc(var(--nav-h) + var(--space-md)) var(--gutter) calc(var(--space-lg) + env(safe-area-inset-bottom));
    transform: translateY(-100%);
    transition: transform 0.45s var(--ease-inout);
    overflow-y: auto;
  }
  .nav-panel.is-open { transform: translateY(0); }
  .nav-panel__close {
    position: absolute; top: 16px; right: var(--gutter);
    width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink);
  }
  .nav-panel__logo { position: absolute; top: 20px; left: var(--gutter); display: inline-flex; }
  .nav-panel__logo img { height: 30px; width: auto; }
  .nav-panel__primary { list-style: none; display: flex; flex-direction: column; gap: 0.15em; margin-top: auto; }
  .nav-panel__primary a {
    font-family: var(--font-display); font-size: var(--step-3); font-weight: 360;
    text-decoration: none; color: var(--ink); padding: 0.15em 0; display: block;
  }
  .nav-panel__secondary { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em 1.25rem; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--line); }
  .nav-panel__secondary a { font-size: var(--step--1); text-decoration: none; color: var(--ink-soft); letter-spacing: 0.04em; text-transform: uppercase; }
  .nav-panel__cta { margin-top: var(--space-lg); }
  .nav-panel__cta .btn { width: 100%; justify-content: center; }
}
@media (min-width: 1024px) { .nav-panel { display: none; } }

/* mobile sticky utility bar */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky-cta);
  display: none; gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-out);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 56px; background: var(--paper); color: var(--ink);
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none;
}
.sticky-cta a.sticky-cta__primary { background: var(--green); color: var(--on-green); }
@media (max-width: 1023px) { .sticky-cta { display: flex; } }

/* ------------------------------------------------------------------ HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  background: var(--ink-bg);
  color: var(--on-ink);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(21,21,15,0.92) 0%, rgba(21,21,15,0.7) 38%, rgba(21,21,15,0.15) 100%);
}
.hero__inner { position: relative; z-index: 1; width: 100%; padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-2xl); }
.hero__index { color: var(--on-ink-mute); }
.hero__title {
  font-family: var(--font-display); font-weight: 320;
  font-size: var(--step-5); line-height: 1.02; letter-spacing: -0.025em;
  color: var(--on-ink); max-width: 15ch; margin-top: var(--space-md);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__sub { margin-top: var(--space-lg); max-width: 46ch; color: var(--on-ink); font-size: var(--lead); }
.hero__stats {
  margin-top: var(--space-md); display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em;
  color: var(--on-ink-mute); text-transform: uppercase; max-width: none;
}
.hero__stats span { white-space: nowrap; }
.hero__stats span + span::before { content: "·"; margin-right: 1.25rem; margin-left: 0; color: var(--brass); }
@media (max-width: 600px) {
  .hero__stats { flex-direction: column; gap: 4px; }
  .hero__stats span + span::before { content: none; }
}
.hero__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__scroll {
  position: absolute; left: var(--gutter); bottom: var(--space-lg); z-index: 1;
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-ink-mute);
}
.hero__scroll::after { content: ""; width: 2.5rem; height: 1px; background: var(--on-ink-mute); }

@media (max-width: 767px) {
  .hero__media::after { background: linear-gradient(180deg, rgba(21,21,15,0.62) 0%, rgba(21,21,15,0.5) 30%, rgba(21,21,15,0.72) 62%, rgba(21,21,15,0.94) 100%); }
  .hero__inner { padding-top: calc(var(--nav-h) + var(--space-lg)); }
  .hero__stats { color: var(--on-ink); }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero__scroll { display: none; }
}

/* ------------------------------------------------------------------ STORY */
.story__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-xl); align-items: center; }
.story__col p { max-width: 52ch; }
.story__col p + p { margin-top: var(--space-md); }
.story__col .lead { margin-top: var(--space-md); }
.story__figure { margin: 0; }
.story__figure img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; border: 1px solid var(--line); }
.story__figure figcaption { font-size: var(--step--1); color: var(--ink-mute); margin-top: var(--space-2xs); }

.pullquote {
  padding-left: var(--space-md);
  border-left: 2px solid var(--green);
  font-family: var(--font-display);
  font-weight: 380;
  font-size: var(--step-3);
  font-style: italic;
  line-height: 1.28;
  color: var(--ink);
  max-width: none;
}
.pullquote cite { display: block; font-family: var(--font-sans); font-style: normal; font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin-top: var(--space-sm); }
.pullquote--band { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--line); max-width: 46ch; }

@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .story__figure { max-width: 420px; }
}

/* ------------------------------------------------------------------ VALUES */
.values { list-style: none; padding: 0; counter-reset: v; border-top: 1px solid var(--line); }
.values li {
  counter-increment: v;
  display: grid; grid-template-columns: 4rem 1fr; gap: var(--space-md);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.values li::before {
  content: counter(v, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--brass);
}
.values h3 { font-size: var(--step-2); }
.values p { color: var(--ink-soft); margin-top: var(--space-2xs); }
.values__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg) var(--space-md); }
.values__grid > .values { grid-column: 1 / 8; }
.values__aside { grid-column: 8 / 13; align-self: start; position: sticky; top: calc(var(--nav-h) + var(--space-md)); }
.values__aside .pullquote { grid-column: auto; margin-top: 0; }
.values__aside-note { margin: var(--space-lg) 0; color: var(--ink-soft); font-size: var(--step--1); }
@media (max-width: 900px) {
  .values__grid > .values { grid-column: 1 / -1; }
  .values__aside { grid-column: 1 / -1; position: static; margin-top: var(--space-xl); }
  .values li { grid-template-columns: 3rem 1fr; }
}

/* ------------------------------------------------------------------ PROJECT CARDS + RAIL */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(300px, 30vw, 440px);
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: var(--gutter);
  padding-bottom: var(--space-md);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }

/* contained rail — first card aligns with the section's left gutter, three cards
   fill the content width so it lines up with the sections above and below */
.rail--contained {
  padding-inline: 0;
  margin-top: var(--space-lg);
  grid-auto-columns: calc((100% - var(--space-md) * 2) / 3.28);
}
@media (max-width: 1023px) { .rail, .rail--contained { grid-auto-columns: 58vw; } }
@media (max-width: 640px) { .rail, .rail--contained { grid-auto-columns: 80vw; } }

.rail-nav { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-md); }
.rail-nav__progress { flex: 1; height: 1px; background: var(--line); position: relative; }
.rail-nav__progress span { position: absolute; left: 0; top: 0; height: 1px; background: var(--brass); width: 20%; transition: width 0.2s linear, left 0.2s linear; }
.rail-nav__btns { display: flex; gap: var(--space-3xs); }
.rail-nav button {
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
  transition: border-color var(--dur-hover), background var(--dur-hover);
}
.rail-nav button:hover { border-color: var(--ink); }
.rail-nav button[disabled] { opacity: 0.35; pointer-events: none; }

.card {
  display: flex; flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color var(--dur-hover) var(--ease-out);
  position: relative;
}
.card:hover { border-color: var(--line-strong); }
.card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-sunken); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.035); }
/* badged source art carries a burnt-in ribbon (top-left) + RERA QR (top-right);
   crop it out of the 4:5 frame by scaling and biasing toward the building */
.card--badged .card__media img { transform: scale(1.34); transform-origin: 50% 64%; }
.card--badged:hover .card__media img { transform: scale(1.38); transform-origin: 50% 64%; }
.card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-2xs); flex: 1; }
.card__status {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap;
}
.card__tick { width: 8px; height: 8px; border: 1px solid var(--brass); border-radius: 1px; flex-shrink: 0; }
.card__tick--ongoing { background: var(--brass); }
.card__tick--completed { background: var(--green); border-color: var(--green); }
.card__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; }
.card__name a { color: var(--ink); text-decoration: none; }
.card__name a::after { content: ""; position: absolute; inset: 0; } /* stretched link */
.card__loc { color: var(--ink-soft); font-size: var(--step--1); }
.card__spec { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); line-height: 1.4; }
.card__spec span { display: block; }
.card__brass { height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); margin-block: var(--space-2xs); }
.card:hover .card__brass { transform: scaleX(1); }
.card__actions { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-2xs); flex-wrap: wrap; }
.card__actions .link-underline { white-space: nowrap; }
.card__enquire {
  position: relative; z-index: 1; /* above stretched link */
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green); padding: 0.4em 0; white-space: nowrap;
}
.card__enquire:hover { color: var(--green-hi); }

/* ------------------------------------------------------------------ DISCOVERY — editorial index */
.discovery__chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.chip {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.55em 1em; min-height: 40px;
  border: 1px solid var(--line); border-radius: 2px;
  font-size: var(--step--1); letter-spacing: 0.03em; color: var(--ink-soft);
  text-decoration: none; background: transparent;
  transition: border-color var(--dur-hover), color var(--dur-hover), background var(--dur-hover);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip__count { font-family: var(--font-mono); font-size: 0.8em; color: var(--ink-mute); }
.chip[aria-pressed="true"] .chip__count { color: var(--paper); opacity: 0.7; }

.discovery__count {
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute);
  letter-spacing: 0.02em; text-transform: lowercase; margin-bottom: var(--space-lg);
}
.discovery__empty { padding: var(--space-xl) 0; color: var(--ink-mute); }
.discovery__empty[hidden] { display: none; }

.index-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.index-row { border-bottom: 1px solid var(--line); }
.index-row[hidden] { display: none; }

.index-row__link {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.5fr) minmax(0, 0.95fr) minmax(0, 1.15fr) max-content 1.25rem;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md) 0;
  text-decoration: none; color: var(--ink);
  position: relative;
  transition: padding-left var(--dur-hover) var(--ease-out);
}
.index-row__link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--brass); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-hover) var(--ease-out);
}
.index-row__link:hover, .index-row__link:focus-visible { padding-left: var(--space-sm); }
.index-row__link:hover::before, .index-row__link:focus-visible::before { transform: scaleY(1); }

.index-row__num { font-family: var(--font-mono); font-size: var(--step--1); color: var(--brass); align-self: baseline; }
.index-row__name { font-family: var(--font-display); font-size: var(--step-2); font-weight: 400; line-height: 1.1; transition: color var(--dur-hover); }
.index-row__link:hover .index-row__name, .index-row__link:focus-visible .index-row__name { color: var(--green); }
.index-row__loc { color: var(--ink-soft); font-size: var(--step--1); }
.index-row__config { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); line-height: 1.35; }
.index-row__status {
  display: inline-flex; align-items: baseline; gap: 0.5em; white-space: nowrap;
  font-size: var(--step--1); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute);
}
.index-row__tick { width: 7px; height: 7px; border: 1px solid var(--brass); border-radius: 1px; flex-shrink: 0; transform: translateY(1px); }
.index-row__tick--ongoing { background: var(--brass); }
.index-row__tick--completed { background: var(--green); border-color: var(--green); }
.index-row__go { color: var(--ink-mute); opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-hover), transform var(--dur-hover); justify-self: end; }
.index-row__link:hover .index-row__go, .index-row__link:focus-visible .index-row__go { opacity: 1; transform: translateX(0); }

/* floating hover/focus thumbnail */
.index-peek {
  position: fixed; left: 0; top: 0; z-index: var(--z-raised);
  width: clamp(200px, 20vw, 300px); aspect-ratio: 4 / 3;
  margin: 0; border: 1px solid var(--line-strong); background: var(--paper-sunken);
  overflow: hidden; pointer-events: none; opacity: 0;
  will-change: transform, opacity, left, top;
}
.index-peek img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px), (pointer: coarse) { .index-peek { display: none; } }

@media (max-width: 1023px) {
  .index-row__link {
    grid-template-columns: 2.5rem 1fr auto;
    grid-template-areas: "num name status" "num loc config";
    row-gap: var(--space-3xs); column-gap: var(--space-sm);
    padding: var(--space-sm) 0;
  }
  .index-row__num { grid-area: num; }
  .index-row__name { grid-area: name; font-size: var(--step-1); }
  .index-row__loc { grid-area: loc; }
  .index-row__config { grid-area: config; text-align: right; }
  .index-row__status { grid-area: status; justify-self: end; letter-spacing: 0.04em; }
  .index-row__go { display: none; }
}
@media (max-width: 480px) {
  .index-row__link {
    grid-template-columns: 2rem 1fr;
    grid-template-areas: "num name" ". loc" ". status" ". config";
  }
  .index-row__status { justify-self: start; }
  .index-row__config { text-align: left; }
}

/* ------------------------------------------------------------------ MILESTONES */
.milestones { border-block: 1px solid var(--line-ink); }
.milestones__tagline { font-family: var(--font-display); font-size: var(--step-3); font-weight: 360; color: var(--on-ink); max-width: 22ch; margin-bottom: var(--space-xl); }
.milestones__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.milestones__item { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-left: 1px solid var(--line-ink); padding-left: var(--space-md); position: relative; }
.milestones__item::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 1.5rem; background: var(--brass); }
.milestones__value { font-family: var(--font-mono); font-size: var(--step-4); font-weight: 500; color: var(--on-ink); font-feature-settings: "tnum" 1; line-height: 1; }
.milestones__label { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-mute); margin-top: var(--space-sm); }
@media (max-width: 900px) { .milestones__grid { grid-template-columns: repeat(3, 1fr); } .milestones__item:nth-child(-n+3) { border-bottom: 1px solid var(--line-ink); } }
@media (max-width: 560px) { .milestones__grid { grid-template-columns: repeat(2, 1fr); } .milestones__value { font-size: var(--step-3); } }

/* ------------------------------------------------------------------ TESTIMONIALS */
.testi { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg) var(--space-md); align-items: start; }
.testi__stage { grid-column: 1 / 9; position: relative; min-height: 7.5em; }
.testi__item { position: absolute; inset: 0; opacity: 0; transition: opacity 0.28s var(--ease-out); pointer-events: none; }
.testi__item.is-active { opacity: 1; position: relative; pointer-events: auto; }
.testi blockquote { font-family: var(--font-display); font-weight: 380; font-style: italic; font-size: var(--step-3); line-height: 1.3; color: var(--ink); max-width: none; }
.testi blockquote p { max-width: none; }
.testi__aside { grid-column: 10 / 13; align-self: start; border-top: 1px solid var(--line); padding-top: var(--space-sm); }
.testi__author { font-weight: 500; }
.testi__project { font-size: var(--step--1); color: var(--ink-mute); font-family: var(--font-mono); margin-top: var(--space-3xs); }
.testi__controls { display: flex; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); }
.testi__count { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-mute); }
.testi__controls button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.testi__controls button:hover { border-color: var(--ink); }
@media (max-width: 900px) {
  .testi__stage { grid-column: 1 / -1; }
  .testi__aside { grid-column: 1 / -1; }
  .testi blockquote { font-size: var(--step-2); }
}

/* ------------------------------------------------------------------ AV / VIDEO */
.av { position: relative; min-height: 52vh; display: grid; align-items: end; overflow: hidden; background: var(--ink-bg); }
.av__poster { position: absolute; inset: 0; z-index: 0; }
.av__poster img { width: 100%; height: 100%; object-fit: cover; }
.av__poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,21,15,0.4), rgba(21,21,15,0.85)); }
.av__inner { position: relative; z-index: 1; padding-block: var(--space-xl); width: 100%; }
.av__play {
  display: inline-flex; align-items: center; gap: 0.9em;
  color: var(--on-ink); font-family: var(--font-sans); font-size: var(--step-1); font-weight: 500;
}
.av__play .av__disc { width: 68px; height: 68px; border: 1px solid var(--on-ink-mute); border-radius: 50%; display: inline-grid; place-items: center; transition: background var(--dur-hover), border-color var(--dur-hover); }
.av__play:hover .av__disc { background: var(--green); border-color: var(--green); }
.av__thumbs { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); flex-wrap: wrap; }
.av__thumb { font-size: var(--step--1); color: var(--on-ink-mute); text-decoration: none; border: 1px solid var(--line-ink); padding: 0.5em 1em; border-radius: 2px; }
.av__thumb:hover { color: var(--on-ink); border-color: var(--on-ink-mute); }
.av__frame { position: absolute; inset: 0; z-index: 2; background: #000; }
.av__frame iframe { width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------------------ INSIGHTS */
.insights__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-lg) var(--space-md); }
.insights__featured { grid-column: 1 / 8; }
.insights__featured img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; border: 1px solid var(--line); }
.insights__meta { font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); margin: var(--space-md) 0 var(--space-2xs); }
.insights__featured h3 { font-size: var(--step-2); }
.insights__featured a { color: var(--ink); text-decoration: none; }
.insights__featured p { color: var(--ink-soft); margin-top: var(--space-2xs); }
.insights__list { grid-column: 9 / 13; list-style: none; padding: 0; border-top: 1px solid var(--line); }
.insights__list li { border-bottom: 1px solid var(--line); padding: var(--space-md) 0; }
.insights__list a { color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: var(--step-1); display: block; }
.insights__list a:hover { color: var(--green); }
.insights__list .insights__meta { margin: var(--space-2xs) 0 0; }
@media (max-width: 900px) {
  .insights__featured, .insights__list { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ FINAL CTA */
.final-cta { text-align: left; }
.final-cta__title { font-family: var(--font-display); font-weight: 320; font-size: var(--step-5); line-height: 1.03; color: var(--on-ink); max-width: 14ch; }
.final-cta__sub { color: var(--on-ink-mute); margin-top: var(--space-md); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em; }
.final-cta__actions { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ------------------------------------------------------------------ FOOTER */
.footer { background: var(--ink-bg); color: var(--on-ink); padding-block: var(--space-2xl) var(--space-lg); }
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-lg) var(--space-md); }
.footer__brand-name { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-ink); }
.footer__logo { width: 156px; height: auto; filter: brightness(0) invert(1); opacity: 0.92; }
.footer__brand p { color: var(--on-ink-mute); margin: var(--space-sm) 0 var(--space-md); max-width: 26ch; }
.footer h2 { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-ink-mute); margin-bottom: var(--space-sm); }
.footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer a { color: var(--on-ink); text-decoration: none; font-size: var(--step--1); }
.footer a:hover { color: var(--brass-soft); }
.footer__address { border-top: 1px solid var(--line-ink); margin-top: var(--space-xl); padding-top: var(--space-md); color: var(--on-ink-mute); font-size: var(--step--1); max-width: 60ch; }
.footer__legal { border-top: 1px solid var(--line-ink); margin-top: var(--space-md); padding-top: var(--space-md); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); color: var(--on-ink-mute); font-size: var(--step--1); }
.footer__legal a { color: var(--on-ink-mute); }
.footer__legal nav { display: flex; gap: var(--space-md); flex-wrap: wrap; }
@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__top { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ MODAL / ENQUIRY FORM */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: start center; padding: var(--space-md); overflow-y: auto; }
.modal[hidden] { display: none; }
@media (min-height: 780px) { .modal { place-items: center; } }
.modal__scrim { position: absolute; inset: 0; background: rgba(21,21,15,0.55); opacity: 0; transition: opacity 0.26s var(--ease-out); }
.modal.is-open .modal__scrim { opacity: 1; }
.modal__dialog {
  position: relative; z-index: 1;
  width: min(480px, 100%);
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  padding: var(--space-lg);
  margin-block: var(--space-md);
  opacity: 0; transform: translateY(8px) scale(0.97);
  transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out);
}
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: inline-grid; place-items: center; color: var(--ink); }
.modal__title { font-size: var(--step-2); }
.modal__intro { color: var(--ink-soft); font-size: var(--step--1); margin-top: var(--space-2xs); margin-bottom: var(--space-md); }

.field { margin-bottom: var(--space-sm); }
.field label { display: block; font-size: var(--step--1); font-weight: 500; letter-spacing: 0.02em; color: var(--ink-soft); margin-bottom: var(--space-3xs); }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.55em 0.2em; background: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  transition: border-color var(--dur-hover);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--brass); border-bottom-width: 2px; }
.field textarea { resize: vertical; min-height: 3em; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-bottom-color: var(--danger); }
.field__error { display: block; color: var(--danger); font-size: var(--step--1); margin-top: var(--space-3xs); }
.field__error:empty { display: none; }
.field--check { display: flex; gap: var(--space-2xs); align-items: flex-start; }
.field--check input { width: auto; margin-top: 0.35em; }
.field--check label { margin: 0; }

.form__summary { border: 1px solid var(--danger); padding: var(--space-sm); margin-bottom: var(--space-md); color: var(--danger); font-size: var(--step--1); }
.form__summary[hidden] { display: none; }
.form__summary a { color: var(--danger); }
.form__actions { display: flex; gap: var(--space-sm); align-items: center; margin-top: var(--space-md); }
.form__actions .btn { width: 100%; justify-content: center; }
.form__note { font-size: 0.8rem; color: var(--ink-mute); margin-top: var(--space-sm); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__success { text-align: center; padding: var(--space-lg) 0; }
.form__success[hidden] { display: none; }
.form__success h3 { font-size: var(--step-2); }
.form__success p { color: var(--ink-soft); margin: var(--space-2xs) auto 0; }

/* ------------------------------------------------------------------ REVEAL (motion) */
[data-reveal] { opacity: 0; }
[data-reveal].is-in { opacity: 1; }
.no-js [data-reveal], .reduce-motion [data-reveal] { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ UTILITIES */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.text-mono { font-family: var(--font-mono); }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .card:hover .card__media img { transform: none; }
}

/* ------------------------------------------------------------------ PRINT */
@media print {
  .nav, .sticky-cta, .modal, .hero__scroll, .rail-nav { display: none !important; }
  body { color: #000; background: #fff; }
  * { box-shadow: none !important; }
}