/* ==========================================================================
   ATELIER STRUCTURES — Architectural Interiors & Construction
   Design system: minimal monochrome (black / white / concrete grey)
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Monochrome palette */
  --ink:        #0a0a0a;
  --ink-90:     #141414;
  --ink-70:     #2e2e2e;
  --ink-50:     #6b6b6b;
  --ink-30:     #a8a8a8;
  --ink-15:     #d8d5d1;
  --concrete:   #f4f2ef;
  --paper:      #fbfaf8;
  --white:      #ffffff;

  --line:       rgba(10, 10, 10, 0.12);
  --line-light: rgba(255, 255, 255, 0.18);

  /* Type — an editorial pair: a light serif for display, a humanist sans for
     running text. Latin and CJK are listed as siblings so the browser picks the
     face that actually has the glyph, instead of silently falling back to the
     system UI font (which is what made the old build look like a dashboard). */
  --font-display:    "Cormorant Garamond", "Noto Serif SC", "Songti SC", serif;
  --font-body:       "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:       "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale */
  --step--1: clamp(0.72rem, 0.68rem + 0.18vw, 0.82rem);
  --step-0:  clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem);
  --step-1:  clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2rem, 1.4rem + 2.8vw, 4rem);
  --step-4:  clamp(2.6rem, 1.4rem + 5.6vw, 7rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 5rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);
  --maxw: 1560px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--ink); color: var(--paper); }

/* ---------- 3. Layout helpers ---------- */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

/* ---------- 4. Type utilities ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  flex: none;
}

.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-4);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.display strong { font-weight: 600; }

.h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h2 strong { font-weight: 600; }

.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-70);
  font-weight: 300;
  max-width: 58ch;
}

.mono-num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-50);
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1.9rem;
  border: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn svg { transition: transform 0.4s var(--ease); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:hover svg { transform: translateX(4px); }

.btn--light { border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn--light:hover { background: var(--white); color: var(--ink); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.35s var(--ease), gap 0.35s var(--ease);
}
.link-arrow:hover { border-color: var(--ink); gap: 0.95rem; }

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.4rem;
  transition: background 0.5s var(--ease), padding 0.5s var(--ease),
              border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(251, 250, 248, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: 0.9rem;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-mark {
  width: 22px; height: 22px;
  border: 1.5px solid currentColor;
  display: grid;
  place-items: center;
  flex: none;
}
.brand-mark::after {
  content: "";
  width: 7px; height: 7px;
  background: currentColor;
}

.nav-links {
  display: flex;
  gap: clamp(1.1rem, 2.4vw, 2.6rem);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav-links a {
  position: relative;
  padding-block: 0.2rem;
  color: var(--ink-70);
  transition: color 0.3s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.7rem 1.3rem;
  border: 1px solid var(--ink);
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
  white-space: nowrap;
}
.nav-cta:hover { background: var(--ink); color: var(--paper); }

/* Header over the hero: bright sky behind, so force a legible light state */
body.on-hero .site-header { color: var(--white); }
body.on-hero .site-header .nav-links a { color: rgba(255,255,255,0.8); }
body.on-hero .site-header .nav-links a::after { background: var(--white); }
body.on-hero .site-header .nav-links a:hover { color: var(--white); }
body.on-hero .nav-cta {
  border-color: rgba(255,255,255,0.6);
  color: var(--white);
  background: rgba(10,10,10,0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.on-hero .nav-cta:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
body.on-hero .nav-toggle { border-color: rgba(255,255,255,0.42); }
body.on-hero .nav-toggle span,
body.on-hero .nav-toggle span::before,
body.on-hero .nav-toggle span::after { background: var(--white); }
body.on-hero .brand-mark { border-color: rgba(255,255,255,0.92); }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border: 1px solid var(--line);
}
.nav-toggle span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: transform 0.35s var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform 0.35s var(--ease), top 0.35s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
body.menu-open .nav-toggle span { background: transparent; }
body.menu-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-toggle span::after  { top: 0; transform: rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(2.5rem, 6vh, 5rem);
  padding-top: 8rem;
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: grayscale(1) contrast(1.05) brightness(0.82);
  transform: scale(1.08);
  animation: heroPan 26s var(--ease-out) forwards;
}
@keyframes heroPan {
  to { transform: scale(1); }
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,8,8,0.72) 0%, rgba(8,8,8,0.18) 38%, rgba(8,8,8,0.10) 55%, rgba(8,8,8,0.86) 100%);
}

.hero-inner { width: 100%; }

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: clamp(2rem, 7vh, 5rem);
  flex-wrap: wrap;
}
.hero-tag {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.hero-tag::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--white);
  border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.hero-stats {
  display: flex;
  gap: clamp(1.6rem, 4vw, 3.5rem);
}
.hero-stat { text-align: right; }
.hero-stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero-stat small {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2.6rem, 6.6vw, 6.6rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  max-width: 16ch;
  text-wrap: balance;
}
.hero-title em {
  font-style: normal;
  font-weight: 600;
}

.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.22);
  flex-wrap: wrap;
}
.hero-desc {
  max-width: 44ch;
  color: rgba(255,255,255,0.78);
  font-weight: 300;
  font-size: var(--step-0);
}
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

.scroll-hint {
  position: absolute;
  right: var(--gutter);
  bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.scroll-hint::after {
  content: "";
  width: 1px; height: 42px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), transparent);
  animation: scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  45%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------- 8. Marquee strip ---------- */
.ticker {
  background: var(--ink);
  color: var(--paper);
  padding-block: 0.95rem;
  overflow: hidden;
  border-block: 1px solid var(--ink);
}
.ticker-track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}
.ticker-item {
  display: flex;
  align-items: center;
  gap: 3rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(251,250,248,0.75);
}
.ticker-item::after {
  content: "◆";
  font-size: 0.6em;
  color: rgba(251,250,248,0.35);
}

/* ---------- 9. Intro / manifesto ---------- */
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.intro-num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink-50);
  letter-spacing: 0.14em;
  margin-bottom: 1.4rem;
}
.intro-body p + p { margin-top: 1.1rem; }
.intro-body p { color: var(--ink-70); font-weight: 300; }
.intro-body .pull {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.8rem;
  text-wrap: balance;
}

/* ---------- 10. Stats band ---------- */
.stats-band {
  border-block: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-cell {
  padding: clamp(1.6rem, 3.6vw, 3rem) clamp(1rem, 2.4vw, 2.2rem);
  border-right: 1px solid var(--line);
  position: relative;
}
.stat-cell:last-child { border-right: none; }
.stat-cell b {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.stat-cell b sup { font-size: 0.42em; vertical-align: super; font-weight: 400; }
.stat-cell span {
  display: block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* ---------- 11. Section head ---------- */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}
/* ch units are measured against this element's own (small) font-size, which
   collapses the column to ~280px while the CJK .h2 inside is 62px — so size
   the column against the headline itself, not a character count. */
.sec-head-main { flex: 1 1 22rem; max-width: clamp(20rem, 42vw, 34rem); }
.sec-head .h2 { margin-top: 1.2rem; }
.sec-head-aside {
  max-width: 38ch;
  color: var(--ink-70);
  font-weight: 300;
  padding-bottom: 0.35rem;
}

/* ---------- 12. Projects grid ---------- */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.4rem);
}
.project {
  position: relative;
  grid-column: span 6;
  overflow: hidden;
  background: var(--ink-15);
  display: block;
}
.project--wide { grid-column: span 12; }
.project--tall { grid-column: span 6; }

.project-media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.project--wide .project-media { aspect-ratio: 21 / 9; }
.project img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.02);
  transition: transform 1.1s var(--ease-out), filter 0.8s var(--ease);
}
.project:hover img {
  transform: scale(1.045);
  filter: grayscale(0.55) contrast(1.05);
}
.project-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(6,6,6,0.78) 100%);
  opacity: 0.9;
  transition: opacity 0.6s var(--ease);
}
.project:hover .project-media::after { opacity: 1; }

.project-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(1rem, 2.4vw, 1.9rem);
  color: var(--white);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  z-index: 2;
}
.project-meta h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.project-meta .loc {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 0.45rem;
}
.project-index {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 0.28rem 0.5rem;
  flex: none;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.project:hover .project-index {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

/* ---------- 13. Services ---------- */
.services { background: var(--ink); color: var(--paper); }
.services .eyebrow { color: rgba(251,250,248,0.55); }
.services .h2 { color: var(--white); }
.services .sec-head-aside { color: rgba(251,250,248,0.62); }

.svc-list { border-top: 1px solid var(--line-light); }
.svc {
  border-bottom: 1px solid var(--line-light);
  position: relative;
}
.svc-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.1fr) 3rem;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.4rem);
  cursor: pointer;
  transition: padding-inline 0.5s var(--ease);
}
.svc:hover .svc-row { padding-inline: clamp(0.4rem, 1.4vw, 1.2rem); }
.svc-idx {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: rgba(251,250,248,0.4);
  letter-spacing: 0.1em;
  transition: color 0.4s var(--ease);
}
.svc:hover .svc-idx { color: var(--white); }
.svc-name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.02rem + 0.85vw, 1.9rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  transition: transform 0.5s var(--ease-out);
  text-wrap: balance;
}
.svc:hover .svc-name { transform: translateX(4px); }
.svc-desc {
  color: rgba(251,250,248,0.58);
  font-weight: 300;
  font-size: var(--step-0);
  max-width: 42ch;
}
.svc-plus {
  width: 2.4rem; height: 2.4rem;
  border: 1px solid rgba(251,250,248,0.24);
  display: grid;
  place-items: center;
  justify-self: end;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              transform 0.5s var(--ease-out);
}
.svc-plus svg { width: 12px; height: 12px; }
.svc:hover .svc-plus {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
  transform: rotate(90deg);
}

/* Hover preview image following cursor */
.svc-preview {
  position: fixed;
  top: 0; left: 0;
  width: 300px; height: 210px;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease-out);
  overflow: hidden;
  will-change: transform;
}
.svc-preview.is-on { opacity: 1; transform: scale(1); }
.svc-preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

/* ---------- 14. Testimonial ---------- */
.quote-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.quote-figure {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-15);
}
.quote-figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
.quote-figure figcaption {
  position: absolute;
  left: 0; bottom: 0;
  right: 0;
  padding: 1.2rem 1.4rem;
  background: linear-gradient(0deg, rgba(6,6,6,0.9), transparent);
  color: var(--white);
}
.quote-figure figcaption b { display: block; font-weight: 500; letter-spacing: -0.01em; }
.quote-figure figcaption span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}

.quote-mark {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 0.7;
  color: var(--ink-15);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
blockquote.quote-text {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.28;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.quote-text strong { font-weight: 600; }
.quote-attr {
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.quote-attr::before {
  content: "";
  width: 2rem; height: 1px;
  background: var(--ink-30);
}

.quote-nav {
  display: flex;
  gap: 0.6rem;
  margin-top: 2.2rem;
}
.quote-dot {
  width: 2.6rem; height: 2px;
  background: var(--ink-15);
  position: relative;
  overflow: hidden;
}
.quote-dot.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: left;
  animation: dotFill 6s linear forwards;
}
@keyframes dotFill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- 15. Clients / logos ---------- */
.clients-strip {
  border-block: 1px solid var(--line);
  background: var(--concrete);
}
.clients-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.client-logo {
  padding: clamp(1.6rem, 3vw, 2.6rem) 1rem;
  border-right: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-30);
  transition: color 0.4s var(--ease), background 0.4s var(--ease);
  text-align: center;
  line-height: 1.3;
}
.client-logo:last-child { border-right: none; }
.client-logo:hover { color: var(--ink); background: var(--paper); }

/* ---------- 16. Process ---------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.step {
  padding: clamp(1.6rem, 3.2vw, 2.6rem) clamp(1rem, 2.2vw, 2rem)
           clamp(2rem, 4vw, 3rem) 0;
  border-right: 1px solid var(--line);
  position: relative;
}
.step:last-child { border-right: none; }
.step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 2px;
  background: var(--ink);
  transition: width 0.7s var(--ease-out);
}
.step:hover::before { width: 100%; }
.step-num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--ink-30);
}
.step h3 {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
}
.step p {
  margin-top: 0.7rem;
  color: var(--ink-50);
  font-size: var(--step-0);
  font-weight: 300;
  max-width: 30ch;
}

/* ---------- 17. Wide image break ---------- */
.wide-break {
  position: relative;
  height: clamp(340px, 56vh, 620px);
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  display: grid;
  place-items: center;
  text-align: center;
}
.wide-break img {
  position: absolute;
  inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.62);
  transform: scale(1.12);
  transition: transform 1.4s var(--ease-out);
}
.wide-break.is-visible img { transform: scale(1); }
.wide-break::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(6,6,6,0.34);
}
.wide-break .h2 { max-width: 22ch; }
.wide-break p {
  max-width: 46ch;
  margin: 1.4rem auto 0;
  color: rgba(255,255,255,0.74);
  font-weight: 300;
}

/* ---------- 18. FAQ ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.45rem;
  text-align: left;
  font-size: var(--step-1);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
  transition: color 0.3s var(--ease);
}
.faq-q:hover { color: var(--ink-70); }
.faq-icon {
  flex: none;
  width: 1.5rem; height: 1.5rem;
  display: grid;
  place-items: center;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform 0.4s var(--ease);
}
.faq-icon::before { width: 12px; height: 1.5px; }
.faq-icon::after  { width: 1.5px; height: 12px; }
.faq-item.is-open .faq-icon::after { transform: scaleY(0); }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease-out);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p {
  padding-bottom: 1.6rem;
  max-width: 62ch;
  color: var(--ink-50);
  font-weight: 300;
}

/* ---------- 19. Contact ---------- */
.contact { background: var(--concrete); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
}
.contact-list { margin-top: 2.4rem; border-top: 1px solid var(--line); }
.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.contact-item dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-50);
  flex: none;
}
.contact-item dd {
  margin: 0;
  text-align: right;
  font-weight: 400;
  transition: color 0.3s var(--ease);
}
.contact-item a:hover { color: var(--ink-50); }

.form { display: grid; gap: 1rem; }
.field { position: relative; }
.field label {
  position: absolute;
  top: 1.05rem; left: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-30);
  pointer-events: none;
  transition: transform 0.3s var(--ease), font-size 0.3s var(--ease),
              color 0.3s var(--ease);
}
.field input, .field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--ink-15);
  background: transparent;
  padding: 1rem 0 0.85rem;
  font: inherit;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.35s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-1.55rem) scale(0.82);
  transform-origin: left;
  color: var(--ink-50);
}
.field input::placeholder, .field textarea::placeholder { color: transparent; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-30);
  margin-top: 0.4rem;
  line-height: 1.6;
}
.form-ok {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--ink);
  padding: 0.8rem 1rem;
  border: 1px solid var(--ink);
  display: none;
}
.form-ok.is-on { display: block; }

/* ---------- 19b. Contact — locator map ----------
   Sits in the right column, stacked under the enquiry form: two equal columns
   (form | map), map pinned to a 280–320px window so the section never grows
   past what the form needs. The iframe is grayscaled to match the rest of the
   site's imagery, and is only mounted by assets/js/map.js — the .map-loader
   below is what is in the HTML, at exactly the same height. */
.contact-col { min-width: 0; }

.contact-map-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 2px;
}

.map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.9rem;
}
.map-eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.map-num { color: var(--ink-30); }

/* Tabs — same micro-typography as .nav-cta, same 1px rules as .quote-dot */
.map-tabs {
  display: flex;
  gap: 0.4rem;
  min-width: 0;
}
.map-tab {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-50);
  background: transparent;
  border: 1px solid var(--ink-15);
  padding: 0.5rem 0.7rem;
  min-height: 34px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease);
}
.map-tab::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.28rem;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.map-tab:hover { color: var(--ink); border-color: var(--ink-30); }
.map-tab[aria-selected="true"] {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--paper);
}
.map-tab[aria-selected="true"]::after { transform: scaleX(1); }
.map-tab:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 2px;
}

/* Frame window: fixed height band, never taller */
.map-stage {
  position: relative;
  height: clamp(240px, 27vw, 300px);
  min-height: 240px;
  overflow: hidden;
  background: var(--ink-15);
  border: 1px solid var(--ink-15);
  isolation: isolate;
}
.map-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  /* the whole site's photography is monochrome — the map joins it */
  filter: grayscale(1) contrast(1.05) brightness(1.02);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  position: relative;
  z-index: 1;
}
.map-stage.is-ready .map-frame,
.contact-map-col.is-ready .map-frame { opacity: 1; }

/* placeholder / loading state — a static block in exactly the iframe's box,
   so nothing reflows when the frame arrives */
.map-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1rem;
  text-align: center;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--concrete);
  background-blend-mode: normal;
  transition: opacity 0.4s var(--ease-out);
  z-index: 2;
}
.map-loader-mark {
  width: 0.55rem; height: 0.55rem;
  background: var(--ink);
  transform: rotate(45deg);
}
.map-loader-text {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--ink-50);
}
.contact-map-col.is-ready .map-loader,
.contact-map-col.is-failed .map-loader { opacity: 0; visibility: hidden; }

/* thin status strip while a provider's frame is still painting */
.map-status {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0.5rem 0.8rem;
  background: rgba(251,250,248,0.92);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* unreachable provider: words, not a grey void */
.map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.2rem 1.3rem;
  background: var(--paper);
}
.map-fallback-title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.map-fallback-body {
  margin: 0;
  max-width: 40ch;
  font-size: var(--step--1);
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-50);
}
.map-fallback-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin-top: 0.2rem;
}

.map-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem 1.2rem;
  flex-wrap: wrap;
  padding-top: 0.85rem;
}
.map-addr {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0;
  min-width: 0;
  font-size: var(--step--1);
  font-weight: 300;
  color: var(--ink-50);
}
.map-pin {
  flex: none;
  width: 0.4rem; height: 0.4rem;
  border: 1px solid var(--ink-50);
  transform: rotate(45deg) translateY(-1px);
}
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 24px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink-15);
  padding-bottom: 2px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.map-link:hover { border-bottom-color: var(--ink); }
.map-fallback .map-link { color: var(--ink); }
.map-link:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }


/* ---------- 20. Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(251,250,248,0.72);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(251,250,248,0.12);
}
.footer-brand .brand { color: var(--white); }
.footer-brand p {
  margin-top: 1.2rem;
  max-width: 34ch;
  font-weight: 300;
  font-size: var(--step-0);
  color: rgba(251,250,248,0.55);
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(251,250,248,0.42);
  margin-bottom: 1.2rem;
  font-weight: 400;
}
.footer-col li + li { margin-top: 0.6rem; }
.footer-col a {
  font-size: var(--step-0);
  transition: color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.footer-col a:hover { color: var(--white); padding-left: 4px; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251,250,248,0.4);
  flex-wrap: wrap;
}

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s var(--ease);
}
.to-top:hover { color: var(--white); }

/* ---------- 21. Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }

@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;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-media img { transform: none; }
}

/* ---------- 22. Responsive ---------- */
@media (max-width: 1080px) {
  .intro-grid { grid-template-columns: 1fr; gap: 2rem; }
  .quote-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .quote-figure { aspect-ratio: 16 / 10; max-height: 420px; }
  .faq-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--line); }
  .step:nth-child(odd) { border-right: 1px solid var(--line); }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .stat-cell:nth-child(2) { border-right: none; }
  .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .svc-row { grid-template-columns: 3rem minmax(0,1fr) 2.6rem; }
  .svc-desc { display: none; }
  .svc-preview { display: none; }
}

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .nav-cta { display: none; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: var(--paper);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 6rem var(--gutter) 3rem;
    gap: 1.6rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
    letter-spacing: -0.02em;
    text-transform: none;
    transform: translateY(-100%);
    transition: transform 0.6s var(--ease-out);
    z-index: 99;
  }
  body.menu-open .nav-links { transform: none; }
  body.menu-open { overflow: hidden; }
  .nav-links a::after { display: none; }
  .nav-links a { color: var(--ink); }

  .hero { min-height: 100svh; padding-top: 7rem; }
  .hero-stats { display: none; }
  .scroll-hint { display: none; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 1.6rem; }

  .project, .project--tall { grid-column: span 12; }
  .project--wide .project-media { aspect-ratio: 16 / 10; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .contact-item { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .contact-item dd { text-align: left; }
}

@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
  .step:nth-child(odd) { border-right: none; }
  .stats-band { grid-template-columns: 1fr; }
  .stat-cell { border-right: none; border-bottom: 1px solid var(--line); }
  .hero-title { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .svc-row { grid-template-columns: 2.4rem minmax(0,1fr) 2.2rem; gap: 0.9rem; }
  .svc-name { font-size: var(--step-1); }
}

/* ═════════════════════════════════════════════════════════════════════
   23. Mobile / responsive hardening (appended — owns no earlier rules)
   Fixes found by CDP audit at 390 / 768 / 1440 px.
   ═════════════════════════════════════════════════════════════════════ */

/* ---- FIX 1 (blocker): closed off-canvas menu leaked over page content ----
   `.nav-links` is position:fixed; inset:0 on <=860px. When closed it was only
   moved with translateY(-100%), so its box (full viewport height) sat one
   screen above the document. Scrolling 570–640px brought one or two nav links
   — styled white, opacity .8 via `body.on-hero` — to rest on top of the page
   content, and elementFromPoint() hit the nav panel instead of the real
   element underneath. Translation alone cannot remove a translated box from
   hit-testing, so also disable it while shut. */
@media (max-width: 860px) {
  .nav-links {
    visibility: hidden;
    pointer-events: none;
  }
  body.menu-open .nav-links {
    visibility: visible;
    pointer-events: auto;
  }
}

/* ---- FIX 2: header text invisible while the menu is open ----
   The header is transparent (only a hairline border), and at the top of the
   page `body.on-hero` paints brand + toggle white while the open menu panel
   behind them is `--paper` (#fbfaf8): wordmark, menu icon and the whole nav
   list were white-on-near-white (measured rgb(251,250,248) background,
   rgba(255,255,255,0.8) links — effectively unreadable). With the menu open,
   give the header the panel colour and flip its contents back to ink. */
@media (max-width: 860px) {
  body.menu-open .site-header { color: var(--ink); }
  body.menu-open .site-header .brand,
  body.menu-open .site-header .nav-links a { color: var(--ink); }
  body.menu-open .nav-toggle { border-color: var(--line); }
  body.menu-open .nav-toggle span,
  body.menu-open .nav-toggle span::before,
  body.menu-open .nav-toggle span::after { background: var(--ink); }
  body.menu-open .brand-mark { border-color: currentColor; }

  /* The open panel was `inset: 0`, i.e. it also covered the header's own band
     (0–90px). Two separate consequences: the header (wordmark + close button)
     stopped being painted there — the screenshot band was one flat colour — and
     elementsFromPoint() returned the panel instead of the button, so there was
     no visible or tappable way to close the menu from the top of the screen.
     Start the panel below the header instead of fighting the compositor. */
  body.menu-open .nav-links {
    top: 5.5rem;
    padding-top: 2.5rem;
  }

  /* Tapping a link closes the menu mid smooth-scroll; keep the page locked
     for the duration so the target section is not scrolled under a fixed
     panel that is still sliding out. */
  body.menu-open { overscroll-behavior: contain; }
}

/* ---- FIX 3: carousel dot controls were 42x2 px (2 px tall) ----
   Visually unchanged bars, but with a >=44px transparent hit area. */
@media (pointer: coarse) {
  .quote-dot { position: relative; }
  .quote-dot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* ---- FIX 4: inputs < 16px trigger iOS auto-zoom on focus ----
   Public inputs report 14.86px at 390px; 16px is the threshold below which
   Mobile Safari zooms the viewport on focus. */
@media (max-width: 860px) {
  .form input,
  .form textarea,
  .form select { font-size: 16px; }
}

/* ---- FIX 5: < 380px polish (iPhone SE 1st/2nd gen, small Android) ---- */
@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .hero-title { font-size: clamp(1.85rem, 10.4vw, 2.6rem); }
  .brand { font-size: 0.85rem; letter-spacing: 0.1em; gap: 0.5rem; }
  .brand-mark { width: 18px; height: 18px; }
  .svc-row { grid-template-columns: 2rem minmax(0,1fr) 2rem; gap: 0.75rem; }
  .stat-cell b { font-size: var(--step-3); }
}

/* ---- FIX 6: landscape phones (height-constrained) ----
   A 100svh hero squeezes the CTA block to nothing; swap to content height. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; padding-block: 6.5rem 3rem; }
  .nav-links { font-size: var(--step-1); gap: 1rem; padding: 5rem var(--gutter) 2rem; }
}

/* ---- FIX 7: anchor targets hidden under the sticky header ----
   Nav/CTA jumps land with the section heading clipped by the fixed header. */
@media (max-width: 860px) {
  html { scroll-padding-top: 5.5rem; }
}

/* ==========================================================================
   9. Typography — editorial serif, bilingual
   The first build set everything in one grotesque. Latin looked serviceable
   and every Chinese glyph fell through to the OS default, so headings read as
   a dashboard rather than a studio. This block retunes the display sizes for a
   light serif, and gives Chinese its own metrics: wider tracking (negative
   tracking was designed for Latin only and shreds CJK), a slightly heavier
   weight, and more leading.
   ========================================================================== */

/* ---- 9.1 Display faces ----
   Cormorant Garamond is very light at 300 and has a small x-height; Chinese
   set in Noto Serif SC needs a touch more weight and leading to sit at the
   same optical density. */
.display {
  font-weight: 300;
  letter-spacing: -0.018em;
  line-height: 1.0;
}
.h2 {
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.08;
}
.h3 {
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.28;
}

/* ---- 9.2 Hero headline ----
   Two explicit lines instead of a hard <br>, so the language pack controls the
   break. The emphasis sits on a different word in each language, which is why
   the markup uses <em> rather than a bold <strong>. */
.hero-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5.6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.014em;
  max-width: none;
  text-wrap: balance;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
}
.hero-line { display: block; }

/* Italic serif is unavailable in Noto Serif SC's loaded set — a synthesised
   oblique on Chinese looks like a slanted smear, so emphasise with weight. */
:lang(zh) .hero-title em,
:lang(zh) .display em,
:lang(zh) .h2 em {
  font-style: normal;
  font-weight: 500;
}

/* ---- 9.3 Chinese tuning ----
   Applied via :lang(), which i18n.js keeps in sync on <html>. Latin inside a
   Chinese heading inherits the narrower tracking above; these rules only need
   to widen the Chinese runs. */
:lang(zh) .display,
:lang(zh) .hero-title,
:lang(zh) .h2 {
  letter-spacing: 0.02em;
  line-height: 1.24;
  font-weight: 400;
}
:lang(zh) .display strong,
:lang(zh) .h2 strong,
:lang(zh) .hero-title strong {
  font-weight: 600;
}
:lang(zh) .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.45;
}
/* Chinese body copy: sans, a hair larger, with generous leading to stop the
   dense glyph grid from turning into a grey block. */
:lang(zh) body,
:lang(zh) .lede,
:lang(zh) .hero-desc,
:lang(zh) .intro-body p,
:lang(zh) .svc-desc,
:lang(zh) .step p,
:lang(zh) .faq-a p,
:lang(zh) .sec-head-aside {
  line-height: 1.85;
  letter-spacing: 0.012em;
}
:lang(zh) .lede { font-weight: 300; }

/* The pull quote and the blockquote are display voice, not running text. */
:lang(zh) .pull,
:lang(zh) .quote-text {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: 0.015em;
}

/* ---- 9.4 Remaining Latin display spots ---- */
.svc-name {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.006em;
  line-height: 1.2;
}
:lang(zh) .svc-name { font-weight: 500; letter-spacing: 0.01em; line-height: 1.4; }

.stat-cell b,
.hero-stat b {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.project-meta h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

.brand {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.12em;
  font-size: 1rem;
}

/* Uppercase mono micro-copy needs air; Inter/JetBrains at 300 reads thinner
   than IBM Plex Mono did, so nudge the tracking up a hair. */
.eyebrow,
.svc-idx,
.stat-cell span,
.nav-links,
.nav-cta,
.ticker-item {
  letter-spacing: 0.14em;
}

/* ---- 9.5 Language switch ---- */
.lang-toggle {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.42rem 0.72rem;
  margin-left: auto;
  border: 1px solid var(--line);
  color: var(--ink-70);
  background: transparent;
  cursor: pointer;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease),
              background 0.3s var(--ease);
  flex: none;
}
.lang-toggle:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.lang-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* The CTA previously sat flush right; now the switch takes that slot. */
.nav-cta { margin-left: 0; }

body.on-hero .lang-toggle {
  color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(10, 10, 10, 0.2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.on-hero .lang-toggle:hover {
  color: var(--ink);
  background: var(--white);
  border-color: var(--white);
}
/* On the light mobile panel the header flips to ink — override the hero state. */
body.menu-open .lang-toggle {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 860px) {
  .lang-toggle { padding: 0.4rem 0.6rem; font-size: 0.7rem; }
}

/* ═════════════════════════════════════════════════════════════════════
   24. Contact map — width behaviour
   >1080px : the right column becomes form | map side by side (3fr / 2fr),
             the map stacked full-width under the form above that.
   <=560px : the two provider tabs take the full row and grow to a
             44px touch target.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 1081px) {
  /* right column: inline-size container, so the map can decide whether it
     has room to sit beside the form or above it */
  .contact-form-col {
    container-type: inline-size;
    container-name: cform;
  }
  /* stacked right column (<=1080px): the map follows the form in the DOM,
     so it simply drops below it with the section's own spacing */
  .contact-form-col .form { order: 0; }
  .contact-form-col > * { min-width: 0; }
}

@container cform (min-width: 780px) {
  .contact-form-col {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    grid-template-rows: auto;
    column-gap: clamp(1.6rem, 3vw, 2.8rem);
    align-items: start;
  }
  .contact-form-col .form { grid-column: 1; grid-row: 1; }
  .contact-form-col .contact-map-col {
    grid-column: 2;
    grid-row: 1;
    order: 0;
    margin-top: -0.2rem;
  }
}

@media (max-width: 860px) {
  .contact-form-col .contact-map-col { margin-top: 2.4rem; }
  .map-head {
    flex-wrap: nowrap;
    gap: 0.8rem;
    justify-content: flex-start;
  }
  .map-tabs { margin-left: auto; flex-wrap: nowrap; }
  .map-tab { min-height: 36px; padding: 0.5rem 0.6rem; }
  .map-tab::after { left: 0.6rem; right: 0.6rem; }
}

@media (max-width: 560px) {
  .map-head { gap: 0.6rem; }
  .map-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  /* 44px tall touch target on phones */
  .map-tab {
    min-height: 44px;
    padding: 0.5rem 0.4rem;
    font-size: 0.64rem;
    letter-spacing: 0.06em;
    justify-content: center;
    text-align: center;
  }
  .map-tab::after { left: 0.4rem; right: 0.4rem; }
  .map-stage { height: 230px; min-height: 230px; }
  .map-foot { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .map-link { min-height: 32px; }
}