/* ==========================================================================
   Auckland Land Surveys: design system
   Concept: "The Datum". The site borrows the language of a survey plan:
   hairline grids, station pegs, title blocks, scale bars and contour lines.
   Colour: drafting-paper neutrals, deep ink, and the brand gold used as a
   precise accent (rules, pegs, primary actions) rather than a fill colour.
   Type: Archivo (variable width) for everything, set slightly expanded for
   headings to echo the logo's wide lettering; IBM Plex Mono for annotations.
   ========================================================================== */

:root {
  --paper: #F2EFE7;
  --stone: #E7E2D6;
  --white: #FBFAF6;
  --ink: #111518;
  --ink-2: #1A2024;
  --text: #111518;
  --text-2: #2B3135;
  --muted: #50565A;
  --line: rgba(17, 21, 24, .14);
  --line-strong: rgba(17, 21, 24, .9);
  --gold: #DBAE33;
  --gold-hover: #E8BF4B;
  --brass: #7A5C0A;          /* gold for text/marks on light backgrounds (AA) */
  --danger: #B3261E;

  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  --pad: clamp(20px, 4.4vw, 72px);
  --max: 1440px;
  --sec: clamp(80px, 9vw, 152px);
  --header-h: 84px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ── Reset & base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.sec--ink :focus-visible, .site-footer :focus-visible { outline-color: var(--gold); }
::selection { background: var(--gold); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }
.i { width: 1.15em; height: 1.15em; flex: none; }
.mono { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }

/* ── Type scale ───────────────────────────────────────────────────────── */
.display {
  font-size: clamp(3rem, 1.2rem + 5.4vw, 6.75rem);
  font-stretch: 116%; font-weight: 600; letter-spacing: -.045em; line-height: .94;
  margin: 0 0 .35em;
}
.display em {
  font-style: normal; display: inline;
  background: linear-gradient(var(--gold), var(--gold)) 0 92% / 100% .085em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.h1 { font-size: clamp(2.4rem, 1.45rem + 3.3vw, 4.5rem); font-stretch: 112%; letter-spacing: -.038em; line-height: 1; }
.h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem); font-stretch: 110%; letter-spacing: -.032em; line-height: 1.04; }
.h3 { font-size: clamp(1.25rem, 1.08rem + .55vw, 1.55rem); font-stretch: 106%; letter-spacing: -.018em; line-height: 1.18; }
.h4 { font-size: 1.125rem; font-stretch: 104%; letter-spacing: -.01em; line-height: 1.25; }
.lead { font-size: clamp(1.125rem, 1.02rem + .42vw, 1.35rem); line-height: 1.5; color: var(--text-2); max-width: 40em; }
.sec--ink .lead, .site-footer .lead { color: rgba(242, 239, 231, .82); }

.label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
  font-family: var(--mono); font-size: .75rem; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.label b { color: var(--text); font-weight: 500; margin-right: 12px; }
.label .peg { color: var(--brass); }
.sec--ink .label, .label--inv { color: rgba(242, 239, 231, .66); }
.sec--ink .label b { color: var(--paper); }
.sec--ink .label .peg, .label--inv .peg { color: var(--gold); }
.peg { width: 14px; height: 14px; flex: none; }

/* ── Buttons & links ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 1.5px solid transparent; border-radius: 2px;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; font-stretch: 106%; letter-spacing: -.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn .i { transition: transform .25s var(--ease); }
.btn:hover .i:last-child { transform: translateX(3px); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-hover); }
.btn--ghost { border-color: rgba(17, 21, 24, .28); color: var(--text); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(17, 21, 24, .04); }
.sec--ink .btn--ghost { border-color: rgba(242, 239, 231, .3); color: var(--paper); }
.sec--ink .btn--ghost:hover { border-color: var(--paper); background: rgba(242, 239, 231, .06); }
.btn--lg { min-height: 58px; padding: 0 26px; font-size: 1.0625rem; }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px;
  font-weight: 600; font-stretch: 104%; text-decoration: none;
  border-bottom: 1.5px solid var(--gold);
}
.link-arrow .i { transition: transform .25s var(--ease); }
.link-arrow:hover .i:last-child { transform: translateX(3px); }

/* ── Header ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 239, 231, .94); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .25s;
}
.site-header.is-scrolled, .site-header.is-open { border-bottom-color: var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { flex: none; display: block; }
.brand img { width: 168px; height: auto; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px;
  background: none; border: 0; font-size: .97rem; font-weight: 500; font-stretch: 104%; text-decoration: none; color: var(--text);
}
.nav__link::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__link:hover::after, .nav__link[aria-current]::after, .nav__link.is-active::after, .nav__link[aria-expanded="true"]::after { transform: scaleX(1); }
.i--chev { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.nav__link[aria-expanded="true"] .i--chev { transform: rotate(180deg); }
.site-header__actions { display: flex; align-items: center; gap: 18px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-stretch: 104%; text-decoration: none; white-space: nowrap; }
.header-phone .i { color: var(--brass); }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: 0 30px 60px -30px rgba(17, 21, 24, .28);
}
.mega__inner { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 40px; padding-block: 36px 44px; }
.mega__title { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.mega__group a { display: block; padding: 11px 0 12px; border-top: 1px solid var(--line); text-decoration: none; }
.mega__group a span { display: block; font-weight: 600; font-stretch: 105%; transition: color .2s; }
.mega__group a small { display: block; font-size: .875rem; color: var(--muted); }
.mega__group a:hover span, .mega__group a[aria-current] span { color: var(--brass); }
.mega__aside { padding: 22px 24px 26px; background: var(--stone); align-self: start; }
.mega__aside p { font-size: .95rem; color: var(--text-2); }
.mega__aside .link-arrow { margin-top: 12px; margin-right: 18px; }

.menu-toggle { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px; background: none; border: 0; font-weight: 600; font-stretch: 104%; }
.menu-toggle__lines { position: relative; width: 22px; height: 12px; }
.menu-toggle__lines::before, .menu-toggle__lines::after { content: ''; position: absolute; left: 0; right: 0; height: 1.6px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-toggle__lines::before { top: 0; }
.menu-toggle__lines::after { top: 10px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { top: 5px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines::after { top: 5px; transform: rotate(-45deg); }

.mobile-nav {
  position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain; background: var(--paper); border-top: 1px solid var(--line);
  padding-block: 8px 40px;
}
.mobile-nav__title { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 24px 0 4px; }
.mobile-nav li a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 1.2rem; font-weight: 600; font-stretch: 106%; text-decoration: none; }
.mobile-nav li a[aria-current] { color: var(--brass); }
.mobile-nav__contact { display: grid; gap: 10px; margin-top: 32px; }
.mobile-nav__contact p { font-size: .95rem; color: var(--muted); margin-top: 6px; }

@media (max-width: 1239px) { .header-phone span { display: none; } .header-phone .i { width: 22px; height: 22px; } }
@media (max-width: 1099px) {
  :root { --header-h: 72px; }
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header__actions { margin-left: auto; gap: 8px; }
  .header-phone { width: 44px; height: 44px; justify-content: center; }
  .brand img { width: 150px; }
}
@media (max-width: 599px) { .header-cta { display: none; } .brand img { width: 138px; } }
body.nav-open { overflow: hidden; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { padding-top: clamp(24px, 4vw, 56px); }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.hero__text { grid-column: 1 / 8; padding-block: 24px 48px; position: relative; z-index: 1; }
.hero__lead { max-width: 34em; }
.hero__media { grid-column: 8 / -1; position: relative; height: min(76vh, 720px); min-height: 520px; margin-right: calc(-1 * var(--pad)); overflow: hidden; background: var(--stone); }
.hero__media picture, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.reticle { position: absolute; left: 60%; top: 35%; width: 140px; height: 140px; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 0 1px rgba(17, 21, 24, .8)); }
.reticle__ring { position: absolute; inset: 22px; border: 2px solid var(--gold); border-radius: 50%; box-shadow: 0 0 0 1px rgba(17, 21, 24, .55), inset 0 0 0 1px rgba(17, 21, 24, .55); animation: reticle-in 1.2s .3s var(--ease) both; }
.reticle__h, .reticle__v { position: absolute; background: var(--gold); }
.reticle__h { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; -webkit-mask: linear-gradient(90deg, #000 0 30%, transparent 30% 70%, #000 70%); mask: linear-gradient(90deg, #000 0 30%, transparent 30% 70%, #000 70%); animation: reticle-line 1s .2s var(--ease) both; }
.reticle__v { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; -webkit-mask: linear-gradient(#000 0 30%, transparent 30% 70%, #000 70%); mask: linear-gradient(#000 0 30%, transparent 30% 70%, #000 70%); animation: reticle-line 1s .2s var(--ease) both; }
@keyframes reticle-in { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }
@keyframes reticle-line { from { opacity: 0; } to { opacity: 1; } }
.hero__coords {
  position: absolute; left: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 14px 20px;
  background: rgba(17, 21, 24, .86); color: var(--paper); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
}
.hero__place { color: rgba(242, 239, 231, .66); }
.hero__base { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); margin-top: 0; }
.hero__base li { display: flex; align-items: flex-start; gap: 10px; padding: 18px 18px 18px 0; font-size: .9375rem; line-height: 1.35; color: var(--muted); }
.hero__base li + li { padding-left: 18px; border-left: 1px solid var(--line); }
.hero__base .peg { color: var(--brass); margin-top: 3px; }
.hero__base b { display: block; color: var(--text); font-weight: 600; font-stretch: 106%; }

.scalebar { display: inline-flex; flex-direction: column; gap: 6px; width: 260px; margin-top: 18px; }
.scalebar__bar { display: grid; grid-template-columns: repeat(5, 1fr); height: 7px; border: 1px solid currentColor; }
.scalebar__bar i:nth-child(odd) { background: currentColor; }
.scalebar__nums { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .625rem; letter-spacing: .04em; }
.scalebar__nums span:last-child { margin-right: -24px; }
.hero .scalebar { float: right; color: var(--muted); }

@media (max-width: 1099px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__text { grid-column: 1; padding-block: 8px 40px; }
  .hero__media { grid-column: 1; height: auto; min-height: 0; aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--pad)); }
  .reticle { left: 60%; top: 33%; width: 96px; height: 96px; }
  .hero__base { grid-template-columns: 1fr 1fr; border-top: 0; }
  .hero__base li, .hero__base li + li { padding: 16px 12px 16px 0; border-left: 0; border-top: 1px solid var(--line); }
  .hero__base li:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--line); }
  .hero .scalebar { display: none; }
}
@media (max-width: 599px) {
  .display { letter-spacing: -.04em; }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .hero__coords { font-size: .65rem; padding: 10px 14px; gap: 2px 12px; }
  .hero__place { display: none; }
}
/* ── Section scaffolding ─────────────────────────────────────────────── */
.sec--stone { background: var(--stone); }
.sec--ink { background: var(--ink); color: var(--paper); }
.contours { position: relative; isolation: isolate; }
.contours::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('/assets/img/contours.svg') right -10% center / auto 140% no-repeat; opacity: .5;
}
.blk { padding-block: calc(var(--sec) * .75); }
.blk + .blk:not([class*="sec--"]):not(.blk--figure):not(.blk--gallery):not(.blk--related) { border-top: 1px solid var(--line); }
.blk[class*="sec--"] { padding-block: var(--sec); }
.blk__head { max-width: 860px; margin-bottom: clamp(36px, 4vw, 56px); }
.blk__intro { margin-top: 18px; color: var(--muted); max-width: 44em; }
.sec--ink .blk__intro { color: rgba(242, 239, 231, .7); }
.prose p { max-width: 64ch; }
.prose--inv { color: rgba(242, 239, 231, .86); }

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.split__head { grid-column: 1 / 6; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
.split__body { grid-column: 7 / -1; padding-top: 34px; }
.split__body > .prose, .split__body > p:first-child { font-size: 1.0625rem; }
.ticks { display: grid; gap: 0; margin-top: 8px; }
.ticks li { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.ticks li:last-child { border-bottom: 1px solid var(--line); }
.ticks .peg { color: var(--brass); margin-top: 5px; }

/* ── Intro / about ────────────────────────────────────────────────────── */
.intro { padding-block: var(--sec) calc(var(--sec) * .7); }
.intro__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-bottom: clamp(48px, 6vw, 88px); }
.intro__head { grid-column: 1 / 7; }
.intro__body { grid-column: 8 / -1; padding-top: 38px; }
.intro__body .lead { color: var(--text); margin-bottom: 1em; }
.sheet-index { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
.sheet-index a {
  position: relative; display: grid; align-content: start; gap: 8px; height: 100%; padding: 26px 56px 34px 0; text-decoration: none;
  transition: background-color .25s var(--ease);
}
.sheet-index li + li a { padding-left: 28px; border-left: 1px solid var(--line); }
.sheet-index__no { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; color: var(--brass); }
.sheet-index__t { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); font-weight: 600; font-stretch: 112%; letter-spacing: -.03em; line-height: 1.05; }
.sheet-index__d { color: var(--muted); max-width: 30ch; }
.sheet-index .i { position: absolute; right: 24px; top: 26px; width: 22px; height: 22px; color: var(--brass); transition: transform .3s var(--ease); }
.sheet-index a:hover .i { transform: translate(3px, -3px); }
.sheet-index a:hover .sheet-index__t { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .15em; }

/* ── Services schedule ────────────────────────────────────────────────── */
.schedule-sec { padding-block: calc(var(--sec) * .7) var(--sec); }
.schedule-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.schedule-head { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
.schedule__panel { position: relative; margin-top: 36px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.schedule__img { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
.schedule__img.is-on { opacity: 1; }
.schedule__img picture, .schedule__img img { width: 100%; height: 100%; object-fit: cover; }
.schedule { grid-column: 6 / -1; border-bottom: 1px solid var(--line); counter-reset: s; }
.schedule__row a {
  position: relative; display: grid; grid-template-columns: 52px minmax(0, 1.05fr) minmax(0, 1fr) 28px; gap: 20px; align-items: baseline;
  padding: 24px 0 25px; border-top: 1px solid var(--line); text-decoration: none;
}
.schedule__no { font-family: var(--mono); font-size: .78rem; color: var(--brass); }
.schedule__name { font-size: clamp(1.25rem, 1.05rem + .6vw, 1.625rem); font-weight: 600; font-stretch: 108%; letter-spacing: -.02em; line-height: 1.15; transition: transform .35s var(--ease); }
.schedule__desc { font-size: .9375rem; color: var(--muted); line-height: 1.45; }
.schedule__go { align-self: center; color: var(--muted); transition: transform .35s var(--ease), color .2s; }
.schedule__go .i { width: 22px; height: 22px; }
.schedule__row a::before { content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--gold); transition: width .45s var(--ease); }
.schedule__row a:hover::before, .schedule__row a:focus-visible::before { width: 100%; }
.schedule__row a:hover .schedule__name { transform: translateX(6px); }
.schedule__row a:hover .schedule__go { color: var(--text); transform: translateX(4px); }

/* ── Field to plan ────────────────────────────────────────────────────── */
.field { padding-block: var(--sec); }
.field__head { max-width: 900px; margin-bottom: clamp(40px, 5vw, 72px); }
.field__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.field figure picture { overflow: hidden; background: var(--paper); }
.field figure img { width: 100%; height: 100%; object-fit: cover; }
.field figcaption, .gallery figcaption { display: flex; gap: 10px; margin-top: 12px; font-size: .875rem; color: var(--muted); }
.field figcaption .mono, .gallery figcaption .mono { color: var(--text); font-size: .7rem; padding-top: 2px; }
.field__a { grid-column: 1 / 6; grid-row: 1 / 3; }
.field__a picture { aspect-ratio: 4 / 5; }
.field__b { grid-column: 6 / 10; margin-top: 72px; }
.field__b picture { aspect-ratio: 1; background: #fff; padding: 14px; border: 1px solid var(--line); }
.field__b img { object-fit: contain; }
.field__c { grid-column: 10 / -1; margin-top: 0; }
.field__c picture { aspect-ratio: 3 / 4; }
.field__text { grid-column: 6 / -1; grid-row: 2; padding-top: 8px; }
.field__text > p { font-size: 1.125rem; max-width: 46em; color: var(--text-2); }
.deliverables { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 28px; border-top: 1px solid var(--line-strong); }
.deliverables li { padding: 16px 14px 0 0; }
.deliverables li + li { padding-left: 14px; border-left: 1px solid var(--line); }
.deliverables b { display: block; font-size: 1.125rem; font-weight: 600; font-stretch: 108%; letter-spacing: -.01em; }
.deliverables span { display: block; font-size: .875rem; color: var(--muted); line-height: 1.4; margin-top: 4px; }

/* ── Audiences (tabs) ─────────────────────────────────────────────────── */
.aud { padding-block: var(--sec); }
.aud__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.aud__head { grid-column: 1 / 5; }
.aud__ui { grid-column: 6 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 48px; padding-top: 34px; }
.aud__tabs { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.aud__tab {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 0 15px 26px; text-align: left;
  background: none; border: 0; border-top: 1px solid var(--line); font-size: 1.0625rem; font-weight: 500; font-stretch: 104%; color: var(--muted);
  transition: color .2s;
}
.aud__tab::before { content: ''; position: absolute; left: 2px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 1.5px solid currentColor; border-radius: 50%; opacity: .45; transition: all .25s var(--ease); }
.aud__tab:hover { color: var(--text); }
.aud__tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
.aud__tab[aria-selected="true"]::before { opacity: 1; border-color: var(--brass); background: radial-gradient(circle, var(--brass) 0 2px, transparent 2.5px); }
.aud__panel { padding-top: 6px; }
.aud__panel:focus-visible { outline-offset: 8px; }
.aud__need { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; font-stretch: 110%; letter-spacing: -.025em; line-height: 1.12; margin-bottom: .55em; }
.aud__text { color: var(--text-2); max-width: 40em; }
.aud__links { margin-top: 26px; border-top: 1px solid var(--line-strong); }
.aud__links a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-stretch: 104%; text-decoration: none; }
.aud__links a .i { color: var(--brass); transition: transform .25s var(--ease); }
.aud__links a:hover .i { transform: translateX(4px); }
.aud__links a:hover span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }

/* ── Guide prices ─────────────────────────────────────────────────────── */
.prices { padding-block: var(--sec); }
.prices__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.prices__list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(242, 239, 231, .5); }
.prices__list a { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 28px 48px 36px 0; text-decoration: none; }
.prices__list li + li a { padding-left: 28px; border-left: 1px solid rgba(242, 239, 231, .16); }
.prices__k { font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 239, 231, .66); }
.prices__v { font-size: clamp(1.9rem, 1.2rem + 1.7vw, 2.7rem); white-space: nowrap; font-weight: 600; font-stretch: 110%; letter-spacing: -.035em; line-height: 1; transition: color .25s; }
.prices__u { color: rgba(242, 239, 231, .7); font-size: .9375rem; }
.prices__go { position: absolute; right: 20px; top: 28px; color: var(--gold); transition: transform .3s var(--ease); }
.prices__list a:hover .prices__v { color: var(--gold); }
.prices__list a:hover .prices__go { transform: translateX(4px); }
.prices__note { margin-top: 32px; color: rgba(242, 239, 231, .66); font-size: .9375rem; }

/* ── Approach ─────────────────────────────────────────────────────────── */
.approach { padding-block: var(--sec); }
.approach__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.approach__media { grid-column: 1 / 5; position: sticky; top: calc(var(--header-h) + 32px); }
.approach__media picture { aspect-ratio: 4 / 5; overflow: hidden; }
.approach__media img { width: 100%; height: 100%; object-fit: cover; }
.approach__media figcaption { display: flex; gap: 10px; margin-top: 12px; font-size: .875rem; color: var(--muted); }
.approach__media figcaption .mono { color: var(--text); font-size: .7rem; padding-top: 2px; }
.approach__body { grid-column: 6 / -1; }
.approach__body .h2 { max-width: 16ch; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: clamp(36px, 4vw, 56px); }
.principles li { padding: 22px 0 28px; border-top: 1px solid var(--line); }
.principles__no { display: block; font-family: var(--mono); font-size: .75rem; color: var(--brass); margin-bottom: 10px; }
.principles h3 { margin-bottom: 8px; }
.principles p { color: var(--muted); font-size: 1rem; }
.approach__note { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--muted); font-size: .9375rem; }
.approach__note .peg { color: var(--brass); }

.frame { position: relative; }
.frame__peg { position: absolute; z-index: 1; color: var(--brass); width: 18px; height: 18px; }
.frame__peg .peg { width: 18px; height: 18px; }
.frame__peg--tl { left: -9px; top: -9px; }
.frame__peg--br { right: -9px; bottom: -9px; }
.approach__media .frame__peg--br { bottom: 26px; }

/* ── Process: traverse & rail ─────────────────────────────────────────── */
.traverse { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0 24px; }
.traverse::before {
  content: ''; position: absolute; left: 7px; right: 0; top: 7px; height: 0;
  border-top: 1.5px dashed rgba(17, 21, 24, .45);
}
.traverse li { position: relative; padding-right: 8px; }
.step__no { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .75rem; color: var(--muted); }
.step__no .peg { width: 16px; height: 16px; color: var(--brass); background: var(--stone); border-radius: 50%; }
.step__no b { font-weight: 500; }
.step__title { font-size: 1.125rem; font-weight: 600; font-stretch: 105%; letter-spacing: -.01em; line-height: 1.25; margin: 20px 0 8px; }
.traverse p, .rail p { color: var(--muted); font-size: .975rem; line-height: 1.55; }
.rail { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 24px; }
.rail li { padding-top: 18px; border-top: 2px solid var(--ink); }
.rail .step__no .peg { background: none; }
.rail .step__title { margin-top: 14px; }
/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 1.125rem; font-weight: 600; font-stretch: 104%; letter-spacing: -.01em; line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .i { margin-top: 3px; color: var(--brass); transition: transform .3s var(--ease); }
.faq__item[open] summary .i { transform: rotate(45deg); }
.faq__item summary:hover span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .2em; }
.faq__a { padding: 0 48px 24px 0; color: var(--text-2); }
.faq__a p { max-width: 62ch; }

/* ── Service hero & title block ───────────────────────────────────────── */
.phero { padding-top: clamp(20px, 3vw, 40px); }
.phero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.phero__text { grid-column: 1 / 7; padding-bottom: clamp(32px, 4vw, 56px); }
.phero__title { font-size: clamp(2.3rem, 1.35rem + 3.1vw, 4.25rem); font-stretch: 112%; letter-spacing: -.04em; line-height: 1; margin-bottom: .45em; }
.phero__media { grid-column: 8 / -1; aspect-ratio: 4 / 5; max-height: 660px; width: 100%; background: var(--stone); }
.phero__media picture, .phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero--plan .phero__media { background: #fff; border: 1px solid var(--line); padding: 18px; aspect-ratio: 1; }
.phero--plan .phero__media img { object-fit: contain; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 28px; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.crumbs li + li::before { content: '/'; margin: 0 10px; opacity: .5; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titleblock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(32px, 4vw, 56px) 0 0; border: 1px solid var(--line-strong); background: var(--white); }
.titleblock > div { padding: 16px 20px 20px; }
.titleblock > div + div { border-left: 1px solid var(--line); }
.titleblock dt { display: flex; gap: 10px; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.titleblock dt span { color: var(--brass); }
.titleblock dd { margin: 8px 0 0; font-weight: 500; font-size: .98rem; line-height: 1.4; }

/* ── Content blocks ───────────────────────────────────────────────────── */
.legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--line-strong); }
.legend li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.legend__code { flex: none; width: 38px; font-family: var(--mono); font-size: .75rem; color: var(--brass); padding-top: 3px; }

.plate { background: #fff; border: 1px solid var(--line); padding: clamp(12px, 2vw, 28px); }
.plate__img img { width: 100%; max-height: min(78vh, 680px); object-fit: contain; margin-inline: auto; }
.plate figcaption { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9375rem; }
.plate figcaption .mono { color: var(--brass); padding-top: 2px; }
.blk--figure { padding-top: 0; }

.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid rgba(242, 239, 231, .3); }
.specs li { padding: 18px 16px 0 0; }
.specs li + li { padding-left: 16px; border-left: 1px solid rgba(242, 239, 231, .16); }
.specs b { display: block; font-size: 2rem; font-weight: 600; font-stretch: 112%; color: var(--gold); letter-spacing: -.03em; line-height: 1; }
.specs span { display: block; margin-top: 8px; font-size: .9rem; color: rgba(242, 239, 231, .7); }

.price { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; padding-block: 40px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.blk--price { border-top: 0 !important; padding-block: calc(var(--sec) * .5); }
.price__head { grid-column: 1 / 4; }
.price__figure { grid-column: 4 / 9; }
.price__num { display: block; white-space: nowrap; font-size: clamp(2.1rem, 1.2rem + 2.4vw, 3.6rem); font-weight: 600; font-stretch: 114%; letter-spacing: -.045em; line-height: .95; }
.price__unit { display: block; margin-top: 10px; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); }
.price__text { grid-column: 9 / -1; color: var(--text-2); }
.price__note { color: var(--muted); font-size: .9375rem; }
.price__text .link-arrow { margin-top: 8px; }

.types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.types--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.type { padding: 24px 0 36px; border-top: 1px solid var(--line-strong); }
.type__tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin-bottom: 14px; }
.type .h3 { margin-bottom: 12px; }
.type p { color: var(--text-2); max-width: 52ch; }
.type .link-arrow { margin-top: 18px; }

.callout { max-width: 1000px; padding: 8px 0 8px clamp(24px, 4vw, 56px); border-left: 4px solid var(--gold); }
.callout__title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); font-stretch: 110%; letter-spacing: -.03em; line-height: 1.08; margin-bottom: .6em; }
.callout p:not(.label) { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); color: var(--text-2); max-width: 60ch; }

.compare { display: grid; grid-template-columns: 1fr 1fr; }
.compare__col { padding: clamp(24px, 3vw, 40px); }
.compare__col:first-child { background: var(--stone); }
.compare__col--yes { background: var(--ink); color: var(--paper); }
.compare__col .h3 { margin-bottom: 20px; }
.compare__col li { padding: 12px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.compare__col li::before { content: '-'; margin-right: 12px; color: var(--muted); }
.compare__col--yes li { display: flex; gap: 12px; border-top-color: rgba(242, 239, 231, .16); color: var(--paper); }
.compare__col--yes li::before { content: none; }
.compare__col--yes .peg { color: var(--gold); margin-top: 5px; }

.feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 64px; align-items: end; }
.feature .lead { margin-bottom: 28px; }

.stat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.stat__fig { grid-column: 1 / 7; }
.stat__num { font-size: clamp(4.5rem, 2rem + 9vw, 10rem); font-weight: 600; font-stretch: 118%; letter-spacing: -.055em; line-height: .86; margin: 0 0 18px; }
.stat__cap { color: var(--muted); max-width: 36ch; }
.stat__body { grid-column: 8 / -1; }
.zonebar { display: flex; margin-top: 28px; height: 52px; border: 1px solid var(--line-strong); }
.zonebar span { width: var(--w); display: flex; align-items: center; padding: 0 14px; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; white-space: nowrap; overflow: hidden; }
.zonebar span:nth-child(1) { background: var(--ink); color: var(--paper); }
.zonebar span:nth-child(2) { background: var(--stone); }
.zonebar span:nth-child(3) { background: var(--gold); padding: 0; }
.zonebar b { font-weight: 500; margin-right: 6px; }

.spec-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line-strong); }
.spec-table th, .spec-table td { text-align: left; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table thead th { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 400; padding-block: 14px; }
.spec-table tbody th { font-weight: 600; font-stretch: 104%; }
.spec-table td { font-family: var(--mono); font-size: .9rem; color: var(--brass); white-space: nowrap; }

.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.gallery__item picture { overflow: hidden; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item--0 { grid-column: 1 / 8; }
.gallery__item--0 picture { aspect-ratio: 4 / 3; }
.gallery__item--1 { grid-column: 9 / -1; margin-top: 96px; }
.gallery__item--1 picture { aspect-ratio: 4 / 5; }
.blk--gallery { padding-top: 0; }

.disciplines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.discipline { border-top: 1px solid var(--line-strong); padding-top: 20px; }
.discipline__no { font-family: var(--mono); font-size: .75rem; color: var(--brass); margin-bottom: 10px; }
.discipline .h3 { margin-bottom: 16px; }
.discipline li { padding: 10px 0; border-top: 1px solid var(--line); font-size: .975rem; color: var(--text-2); }

.related__head { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 22px; }
.related__head .label { margin: 0; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.related a { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 48px 30px 0; border-top: 1px solid var(--line-strong); text-decoration: none; }
.related__k { color: var(--muted); font-size: .95rem; line-height: 1.45; }
.related__t { font-size: 1.375rem; font-weight: 600; font-stretch: 108%; letter-spacing: -.02em; }
.related .i { position: absolute; right: 4px; top: 24px; width: 22px; height: 22px; color: var(--brass); transition: transform .3s var(--ease); }
.related a:hover .i { transform: translate(3px, -3px); }
.related a:hover .related__t { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.blk--related { border-top: 1px solid var(--line); }

/* ── Quote section & form ─────────────────────────────────────────────── */
.quote { padding-block: var(--sec); }
.quote__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.quote__intro { grid-column: 1 / 6; }
.quote__intro .h2 { margin-bottom: .45em; }
.quote__form { grid-column: 7 / -1; }
.quote__contact { margin-top: 40px; border-top: 1px solid rgba(242, 239, 231, .3); }
.quote__contact li > * { display: flex; align-items: center; gap: 16px; padding: 16px 0; margin: 0; border-bottom: 1px solid rgba(242, 239, 231, .14); text-decoration: none; }
.quote__contact .i { color: var(--gold); width: 22px; height: 22px; }
.quote__contact small { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 239, 231, .6); }
.quote__contact span { font-size: 1.2rem; font-weight: 600; font-stretch: 106%; overflow-wrap: anywhere; }
.quote__contact a:hover span { color: var(--gold); }

.enquiry {
  --f-bg: #fff; --f-line: rgba(17, 21, 24, .22); --f-text: var(--text); --f-label: var(--text-2); --f-note: var(--muted);
}
.sec--ink .enquiry { --f-bg: rgba(242, 239, 231, .05); --f-line: rgba(242, 239, 231, .24); --f-text: var(--paper); --f-label: rgba(242, 239, 231, .86); --f-note: rgba(242, 239, 231, .64); }
.enquiry__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.fld { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fld--wide { grid-column: 1 / -1; }
.fld--hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
.fld label { font-size: .875rem; font-weight: 500; color: var(--f-label); }
.fld label span { color: var(--brass); }
.sec--ink .fld label span { color: var(--gold); }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--f-line); border-radius: 2px;
  background: var(--f-bg); color: var(--f-text); font: inherit; font-size: 1rem; line-height: 1.4;
  transition: border-color .2s, box-shadow .2s;
}
.fld textarea { padding: 14px 16px; resize: vertical; min-height: 120px; }
.fld input::placeholder, .fld textarea::placeholder { color: var(--f-note); opacity: .8; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(219, 174, 51, .3); }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; color: var(--f-label); }
.sec--ink .select option { color: var(--text); }
.fld.is-invalid input, .fld.is-invalid select, .fld.is-invalid textarea { border-color: #E5735B; }
.fld__error { font-size: .85rem; color: #B3261E; }
.sec--ink .fld__error { color: #F2A08E; }
.enquiry__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.enquiry__note { flex: 1 1 260px; font-size: .875rem; color: var(--f-note); margin: 0; }
.enquiry__note a { color: inherit; }
.enquiry__status:not(:empty) { margin-top: 20px; padding: 16px 18px; border-left: 3px solid var(--gold); background: rgba(219, 174, 51, .12); font-size: .95rem; }
.enquiry__status a { font-weight: 600; }
.enquiry.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--paper); padding-top: clamp(64px, 8vw, 120px); border-top: 1px solid rgba(242, 239, 231, .12); }
.footer-cta { padding-bottom: clamp(48px, 6vw, 88px); border-bottom: 1px solid rgba(242, 239, 231, .16); }
.footer-cta__line { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 5rem); font-weight: 600; font-stretch: 114%; letter-spacing: -.045em; line-height: .98; max-width: 14ch; margin-bottom: .55em; }
.footer-cta__contact { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.footer-cta__contact > * { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem); font-weight: 600; font-stretch: 106%; text-decoration: none; }
.footer-cta__contact .i { color: var(--gold); }
.footer-cta__contact a:hover span { color: var(--gold); }
.footer-cta__contact p { color: rgba(242, 239, 231, .7); font-weight: 500; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px 32px; padding-block: 56px; }
.footer-brand img { width: 168px; margin-bottom: 20px; }
.footer-brand p { color: rgba(242, 239, 231, .66); font-size: .95rem; max-width: 30ch; }
.footer-social { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: rgba(242, 239, 231, .8); font-size: .9rem; text-decoration: none; }
.footer-social:hover { color: var(--gold); }
.footer-col__title { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 239, 231, .55); margin-bottom: 14px; }
.footer-col li { padding: 5px 0; }
.footer-col a { color: rgba(242, 239, 231, .88); text-decoration: none; font-size: .95rem; }
.footer-col a:hover { color: var(--gold); }
.footer-base { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; padding-block: 28px 36px; border-top: 1px solid rgba(242, 239, 231, .16); font-size: .85rem; color: rgba(242, 239, 231, .6); }
.footer-base p { margin: 0; }
.footer-base .scalebar { margin: 0; color: rgba(242, 239, 231, .5); width: 220px; }
.footer-base__links { display: flex; gap: 24px; }
.footer-base a { text-decoration: none; }
.footer-base a:hover { color: var(--gold); }

/* ── Page heads, hub, contact ─────────────────────────────────────────── */
.page-head { padding-block: clamp(40px, 6vw, 96px) clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--line); }
.page-head__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; }
.page-head__grid > div { grid-column: 1 / 8; }
.page-head__grid > .lead { grid-column: 8 / -1; margin: 0; }
.page-head--legal .h1 { max-width: 18ch; }

.hub-group { padding-block: clamp(48px, 6vw, 88px); }
.hub-group + .hub-group { border-top: 1px solid var(--line); }
.hub-group__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.hub-group__head { grid-column: 1 / 4; }
.hub-list { grid-column: 4 / -1; border-top: 1px solid var(--line-strong); }
.hub-item { display: grid; grid-template-columns: 180px minmax(0, 1fr) 32px; gap: 28px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.hub-item__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.hub-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.hub-item:hover .hub-item__img img { transform: scale(1.04); }
.hub-item__t { display: block; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); font-weight: 600; font-stretch: 110%; letter-spacing: -.025em; line-height: 1.1; }
.hub-item__s { display: block; margin-top: 6px; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.hub-item__d { display: block; margin-top: 10px; color: var(--muted); font-size: .975rem; max-width: 62ch; }
.hub-item__go { color: var(--brass); transition: transform .3s var(--ease); }
.hub-item:hover .hub-item__go { transform: translateX(4px); }
.hub-item:hover .hub-item__t { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .15em; }

.contact { padding-block: clamp(32px, 4vw, 56px) var(--sec); }
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.contact__info { grid-column: 1 / 6; }
.contact__info .h1 { margin-bottom: .4em; }
.contact__methods { margin-top: 36px; border-top: 1px solid var(--line-strong); }
.contact__methods li > * { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px 40px 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.contact__methods small { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact__methods span { font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); font-weight: 600; font-stretch: 106%; overflow-wrap: anywhere; }
.contact__methods .i { position: absolute; right: 4px; top: 50%; margin-top: -11px; width: 22px; height: 22px; color: var(--brass); }
.contact__methods a:hover span { color: var(--brass); }
.contact__tips { margin-top: 36px; }
.contact__tips .mono { color: var(--muted); margin-bottom: 8px; }
.contact__form { grid-column: 7 / -1; background: var(--white); border: 1px solid var(--line); padding: clamp(24px, 3.5vw, 48px); }

/* ── Blog ─────────────────────────────────────────────────────────────── */
.bloglead { padding-block: clamp(40px, 5vw, 72px) 24px; }
.bloglead__card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; text-decoration: none; }
.bloglead__img { grid-column: 1 / 8; aspect-ratio: 16 / 10; overflow: hidden; background: var(--stone); }
.bloglead__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.bloglead__card:hover img { transform: scale(1.03); }
.bloglead__text { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; color: var(--text-2); }
.bloglead__text .mono { color: var(--brass); }
.bloglead__text .h2 { color: var(--text); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem); }
.bloglist { padding-block: 32px var(--sec); }
.bloglist ul { border-top: 1px solid var(--line-strong); }
.bloglist a { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.bloglist__date { font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; color: var(--muted); }
.bloglist__t { font-size: clamp(1.15rem, 1rem + .45vw, 1.4rem); font-weight: 600; font-stretch: 106%; letter-spacing: -.015em; line-height: 1.25; }
.bloglist__meta { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--muted); white-space: nowrap; }
.bloglist__meta .i { color: var(--brass); transition: transform .25s var(--ease); }
.bloglist a:hover .bloglist__t { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .18em; }
.bloglist a:hover .i { transform: translateX(4px); }

.guides { padding-block: var(--sec); border-top: 1px solid var(--line); }
.guides__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(32px, 4vw, 48px); }
.guides__head > :first-child { flex: 1 1 auto; }
.guides__head .label { margin-bottom: 18px; }
.guides__head .h2 { margin: 0; }
.guides--more .guides__head .label { margin: 0; }
.guides__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.guides__list a { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 22px 0 8px; border-top: 1px solid var(--line-strong); text-decoration: none; }
.guides__date { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--brass); }
.guides__t { font-size: 1.3rem; font-weight: 600; font-stretch: 106%; letter-spacing: -.018em; line-height: 1.22; }
.guides__x { color: var(--muted); font-size: .95rem; }
.guides__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-weight: 600; font-size: .95rem; }
.guides__go .i { color: var(--brass); transition: transform .25s var(--ease); }
.guides__list a:hover .guides__t { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .18em; }
.guides__list a:hover .guides__go .i { transform: translateX(4px); }

.post__head { padding-top: clamp(24px, 4vw, 56px); }
.post__head .h1 { max-width: 22ch; font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.9rem); }
.post__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 24px 0 36px; font-family: var(--mono); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.post__meta span + span::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); margin-right: 22px; vertical-align: middle; }
.post__img { aspect-ratio: 21 / 9; overflow: hidden; background: var(--stone); }
.post__img img { width: 100%; height: 100%; object-fit: cover; }
.post__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-block: clamp(40px, 5vw, 80px) var(--sec); }
.post__body { grid-column: 1 / 8; font-size: 1.125rem; line-height: 1.7; }
.post__aside { grid-column: 9 / -1; }
.aside-card { position: sticky; top: calc(var(--header-h) + 32px); padding: 28px; background: var(--stone); }
.aside-card .h3 { margin-bottom: 10px; }
.aside-card > p:not(.label) { color: var(--text-2); font-size: .975rem; }
.aside-card hr { border: 0; border-top: 1px solid var(--line); margin: 26px 0 18px; }
.aside-card__small { font-weight: 600; margin-bottom: 12px !important; }
.aside-card .btn + .btn { margin-top: 10px; }

.prose h2 { font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem); font-stretch: 108%; letter-spacing: -.025em; line-height: 1.15; margin: 1.8em 0 .55em; }
.prose h3 { font-size: 1.3rem; font-stretch: 105%; letter-spacing: -.015em; line-height: 1.25; margin: 1.6em 0 .5em; }
.prose h4 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding: 0; }
.prose ul li, .prose ol li { position: relative; padding-left: 28px; margin-bottom: .55em; max-width: 64ch; }
.prose ul li::before { content: ''; position: absolute; left: 2px; top: .68em; width: 9px; height: 9px; border: 1.5px solid var(--brass); border-radius: 50%; }
.prose ol { counter-reset: li; }
.prose ol li { counter-increment: li; }
.prose ol li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: .2em; font-family: var(--mono); font-size: .75rem; color: var(--brass); }
.prose a { text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; }
.prose a:hover { color: var(--brass); }
.prose blockquote { margin: 1.5em 0; padding-left: 24px; border-left: 3px solid var(--gold); color: var(--text-2); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal { padding-block: clamp(40px, 5vw, 72px) var(--sec); }
.legal__body { max-width: 780px; }

.notfound { padding-block: clamp(80px, 12vw, 180px); }
.notfound__links { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 32px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .schedule-head { position: static; grid-column: 1 / -1; }
  .schedule__panel { display: none; }
  .schedule { grid-column: 1 / -1; }
  .aud__head { grid-column: 1 / -1; }
  .aud__ui { grid-column: 1 / -1; padding-top: 0; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .traverse { grid-template-columns: 1fr 1fr 1fr; gap: 40px 24px; }
  .traverse::before { display: none; }
  .rail { grid-template-columns: 1fr 1fr; }
  .legend { grid-template-columns: 1fr 1fr; }
  .deliverables { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .deliverables li:nth-child(4) { padding-left: 0; border-left: 0; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .titleblock > div:nth-child(3) { border-left: 0; }
  .titleblock > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 899px) {
  :root { --sec: clamp(64px, 12vw, 96px); }
  .split, .intro__grid, .schedule-wrap, .field__grid, .aud__grid, .approach__grid, .quote__grid, .phero__grid, .price, .stat,
  .gallery, .page-head__grid, .hub-group__grid, .contact__grid, .bloglead__card, .post__grid { grid-template-columns: minmax(0, 1fr); }
  .split > *, .intro__grid > *, .schedule-wrap > *, .field__grid > *, .aud__grid > *, .approach__grid > *, .quote__grid > *, .phero__grid > *,
  .price > *, .stat > *, .gallery > *, .page-head__grid > *, .hub-group__grid > *, .contact__grid > *, .bloglead__card > *, .post__grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .split__head, .approach__media, .aside-card { position: static; }
  .split__body { padding-top: 4px; }
  .intro__body { padding-top: 0; }
  .sheet-index { grid-template-columns: 1fr; }
  .sheet-index li + li a { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .schedule__row a { grid-template-columns: 40px minmax(0, 1fr) 24px; gap: 4px 12px; padding: 20px 0; }
  .schedule__desc { grid-column: 2; grid-row: 2; }
  .schedule__go { grid-column: 3; grid-row: 1 / 3; }
  .field__b, .gallery__item--1 { margin-top: 0; }
  .field__a picture { aspect-ratio: 4 / 3.4; }
  .field__c picture { aspect-ratio: 16 / 10; }
  .aud__ui { grid-template-columns: minmax(0, 1fr); }
  .aud__tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: 0 calc(-1 * var(--pad)) 28px; padding-inline: var(--pad); }
  .aud__tabs::-webkit-scrollbar { display: none; }
  .aud__tab { flex: none; width: auto; padding: 14px 18px 14px 0; border-top: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
  .aud__tab::before { display: none; }
  .aud__tab[aria-selected="true"] { border-bottom-color: var(--gold); }
  .prices__list { grid-template-columns: 1fr; }
  .prices__list li + li a { padding-left: 0; border-left: 0; border-top: 1px solid rgba(242, 239, 231, .16); }
  .approach__media { max-width: 420px; }
  .principles { grid-template-columns: 1fr; }
  .phero__media { aspect-ratio: 4 / 3; max-height: none; margin-inline: calc(-1 * var(--pad)); width: auto; }
  .phero--plan .phero__media { margin-inline: 0; aspect-ratio: 4 / 3; }
  .phero__text { padding-bottom: 32px; }
  .types, .types--3, .disciplines, .related, .guides__list, .compare, .feature { grid-template-columns: 1fr; }
  .feature { gap: 8px; }
  .gallery__item--1 picture { aspect-ratio: 4 / 3; }
  .hub-item { grid-template-columns: 96px minmax(0, 1fr) 24px; gap: 16px; align-items: start; }
  .hub-item__d { display: none; }
  .contact__form { margin-top: 16px; }
  .bloglist a { grid-template-columns: 1fr auto; gap: 6px 16px; }
  .bloglist__date { grid-column: 1 / -1; }
  .post__img { aspect-ratio: 16 / 10; margin-inline: calc(-1 * var(--pad)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-base { flex-direction: column; align-items: flex-start; }
  .titleblock { margin-top: 24px; }
}
@media (max-width: 599px) {
  .traverse { grid-template-columns: 1fr; gap: 0; }
  .traverse::before { display: block; left: 7px; top: 8px; bottom: 8px; right: auto; height: auto; border-top: 0; border-left: 1.5px dashed rgba(17, 21, 24, .45); }
  .traverse li { padding: 0 0 28px 36px; }
  .traverse .step__no { position: relative; margin-left: -36px; }
  .traverse .step__title { margin-top: -22px; margin-left: 52px; }
  .traverse li > p { margin-left: 52px; }
  .rail, .legend, .titleblock { grid-template-columns: 1fr; }
  .titleblock > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .deliverables { grid-template-columns: 1fr 1fr; }
  .deliverables li, .deliverables li + li { padding: 14px 10px 0 0; border-left: 0; }
  .deliverables li:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .enquiry__grid { grid-template-columns: 1fr; }
  .enquiry__foot .btn { width: 100%; }
  .specs { grid-template-columns: 1fr; }
  .specs li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(242, 239, 231, .16); margin-top: 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-col li { padding: 7px 0; }
  .spec-table td { white-space: normal; }
  .zonebar span:nth-child(2) b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .site-header, .site-footer, .quote, .hero__media, .aside-card { display: none !important; }
  body { background: #fff; }
}
.site-footer--compact { padding-top: 0; }
.footer-contact { margin-top: 18px; display: grid; gap: 8px; font-size: .95rem; }
.footer-contact li, .footer-contact a { display: inline-flex; align-items: center; gap: 10px; color: rgba(242, 239, 231, .88); text-decoration: none; }
.footer-contact .i { color: var(--gold); }
.footer-contact a:hover { color: var(--gold); }.prose .ticks li, .prose .ticks li { padding-left: 0; max-width: none; margin: 0; }
.prose .ticks li::before { content: none; }@media (max-width: 899px) { .phero--lowres .phero__media { margin-inline: 0; max-width: 480px; aspect-ratio: 3 / 4; } }
/* Field to plan: aligned composition (v2) */
.field__grid { grid-template-rows: auto 1fr; gap: 28px 24px; }
.field__a { grid-column: 1 / 7; grid-row: 1 / 3; }
.field__a picture { aspect-ratio: 4 / 5; }
.field__b { grid-column: 7 / 10; grid-row: 1; margin-top: 0; }
.field__c { grid-column: 10 / -1; grid-row: 1; margin-top: 0; }
.field__b picture, .field__c picture { aspect-ratio: 1; }
.field__b picture { padding: 10px; }
.field__text { grid-column: 7 / -1; grid-row: 2; align-self: end; padding-top: 0; }
.field__text > p { font-size: 1.0625rem; }
.deliverables { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
.deliverables li:nth-child(4) { padding-left: 0; border-left: 0; }
.field figcaption .mono, .gallery figcaption .mono, .approach__media figcaption .mono { white-space: nowrap; }
@media (max-width: 899px) {
  .field__grid { grid-template-rows: none; }
  .field__a picture { aspect-ratio: 4 / 3.4; }
  .field__b, .field__c { grid-column: auto !important; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .field__grid { grid-template-columns: 1fr 1fr; }
  .field__a, .field__text { grid-column: 1 / -1 !important; }
  .field__b { grid-column: 1 / 2 !important; }
  .field__c { grid-column: 2 / 3 !important; }
}
/* Field to plan: v3: no frame on the plan, left photo stretches to the right column (no dead space) */
.field__b picture { padding: 0; border: 0; background: #fff; }
.field__b img { object-fit: cover; object-position: 50% 40%; }
.field__text { align-self: start; }
@media (min-width: 900px) {
  .field__a { display: flex; flex-direction: column; align-self: stretch; }
  .field__a picture { flex: 1 1 auto; aspect-ratio: auto; min-height: 520px; }
}@media (min-width: 900px) {
  .field__a picture { position: relative; }
  .field__a picture img { position: absolute; inset: 0; }
}
/* Gallery v2: equal-height, top-aligned pair */
.blk--gallery { padding-top: calc(var(--sec) * .75); }
.gallery { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.gallery__item--0, .gallery__item--1 { grid-column: auto; margin-top: 0; }
.gallery__item--0 picture, .gallery__item--1 picture { aspect-ratio: auto; height: clamp(300px, 36vw, 540px); }
@media (max-width: 899px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery__item--0 picture, .gallery__item--1 picture { height: auto; aspect-ratio: 4 / 3; }
}
/* Approach: photo aligned to the section label, not sticky */
.approach__media { position: static; top: auto; }
/* Hero underline: drawn left to right on load. "slice" treats the wrapped lines as one
   continuous strip, so the line finishes under "where you" before continuing under "stand." */
.display em {
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
  background-size: 100% .085em;
  animation: datum-draw 1.4s .35s cubic-bezier(.65, 0, .35, 1) both;
}
@keyframes datum-draw {
  from { background-size: 0% .085em; }
  to { background-size: 100% .085em; }
}
@media (prefers-reduced-motion: reduce) {
  .display em { animation: none; }
}
/* Hero headline: fixed three-line break on desktop; natural wrapping below */
@media (max-width: 1099px) { .br-desk { display: none; } }
@media (min-width: 1100px) { .hero .display { white-space: nowrap; } }
/* ==========================================================================
   Motion layer: surveying reticle cursor, hero entrance, scroll reveals,
   image hover and control polish. Everything degrades to the static design:
   no JS = no cursor and no hidden content; reduced motion = no movement.
   ========================================================================== */

/* ── Reticle cursor (enabled by JS only for fine pointers) ─────────────── */
/* The native cursor stays visible; the reticle follows it as a companion. */

.reticle-cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.reticle-cursor.is-visible { opacity: 1; }
.reticle-cursor__cross, .reticle-cursor__ring { position: absolute; left: 0; top: 0; will-change: transform; }
.reticle-cursor svg { display: block; overflow: visible; }
.reticle-cursor__ring svg { transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.reticle-cursor .rc-halo { fill: none; stroke: rgba(17, 21, 24, .26); stroke-width: 1.9; stroke-linecap: round; }
.reticle-cursor circle { vector-effect: non-scaling-stroke; }
.reticle-cursor .rc-line { fill: none; stroke: #DBAE33; stroke-width: .9; stroke-linecap: round; transition: stroke .2s ease, opacity .2s ease; opacity: .92; }
.reticle-cursor.is-hover .reticle-cursor__ring svg { transform: scale(1.4); }
.reticle-cursor.is-hover .rc-line { opacity: 1; stroke: #E8BF4B; }
.reticle-cursor.is-down .reticle-cursor__ring svg { transform: scale(.82); }
.reticle-cursor.is-hover.is-down .reticle-cursor__ring svg { transform: scale(1.15); }

/* ── Hero entrance (pure CSS; content is visible if animations don't run) ─ */
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.hero__text > .label, .hero__text > .display, .hero__text > .hero__lead, .hero__text > .btn-row,
.phero__text > .crumbs, .phero__text > .label, .phero__text > .phero__title, .phero__text > .lead, .phero__text > .btn-row {
  animation: rise-in .9s cubic-bezier(.2, .7, .2, 1) both;
}
.hero__text > .label, .phero__text > .crumbs { animation-delay: .05s; }
.hero__text > .display, .phero__text > .label { animation-delay: .13s; }
.hero__text > .hero__lead, .phero__text > .phero__title { animation-delay: .24s; }
.hero__text > .btn-row, .phero__text > .lead { animation-delay: .34s; }
.phero__text > .btn-row { animation-delay: .42s; }
.hero__media, .phero__media { animation: fade-in 1.1s .1s ease both; }
.display em { animation-delay: .75s; }  /* underline draws once the headline has arrived */

/* ── Scroll reveals (JS adds .reveal only to elements below the fold) ──── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── Image hover: barely-there zoom on photographs (never plans/diagrams) ─ */
@media (hover: hover) and (pointer: fine) {
  .field__a img, .field__c img, .gallery__item img, .approach__media img, .phero:not(.phero--plan) .phero__media img {
    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
  }
  .field__a:hover img, .field__c:hover img, .gallery__item:hover img, .approach__media:hover img,
  .phero:not(.phero--plan) .phero__media:hover img { transform: scale(1.025); }
}
.phero__media { overflow: hidden; }

/* ── Buttons & navigation polish ───────────────────────────────────────── */
.btn { transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
  .btn--gold:hover { box-shadow: 0 6px 18px -10px rgba(122, 92, 10, .55); }
}
.btn:active { transform: translateY(0); box-shadow: none; transition-duration: .08s; }
.nav__link { transition: color .2s var(--ease); }
.mega__group a span, .mobile-nav li a, .footer-col a, .footer-contact a { transition: color .2s var(--ease), transform .3s var(--ease); }
.mega__group a span { display: block; }
.mega__group a:hover span { transform: translateX(3px); }
.header-phone span { transition: color .2s var(--ease); }
.header-phone:hover span { color: var(--brass); }
.link-arrow { transition: border-color .25s var(--ease), color .25s var(--ease); }
.link-arrow:hover { border-bottom-color: var(--text); }
.sec--ink .link-arrow:hover, .site-footer .link-arrow:hover { border-bottom-color: var(--paper); }

/* ── Reduced motion: keep the static design exactly ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__text > *, .phero__text > *, .hero__media, .phero__media { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .mega__group a:hover span { transform: none; }
  .reticle-cursor__ring svg { transition: none; }
}
/* Fix: the global `svg { max-width: 100% }` reset collapsed the cursor graphics to 0px wide */
.reticle-cursor__cross, .reticle-cursor__ring { width: 60px; height: 60px; }
.reticle-cursor svg { max-width: none; width: 60px; height: 60px; }
/* Contact: breadcrumb + label sit above both columns so the title and form share a top line */
.contact__top .label { margin-bottom: 28px; }
/* ── Mobile: vertical scrolling only ─────────────────────────────────────
   Nothing should be wider than the screen; these rules fix the two items that
   were (header on ≤380px phones, guide prices on ≤420px) and add a safety net. */
html { overflow-x: hidden; overscroll-behavior-x: none; }
@supports (overflow: clip) { html { overflow-x: clip; } }
@media (max-width: 380px) {
  .site-header__inner { gap: 12px; }
  .site-header__actions { gap: 2px; }
  .menu-toggle { padding: 0 6px; min-width: 44px; justify-content: center; }
  .menu-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 420px) {
  .prices__v { white-space: normal; font-size: 1.75rem; }
  .price__num { white-space: normal; }
}
/* Header is permanently dark. Solid ink fallback where backdrop-filter is unsupported. */
.site-header.on-dark { background: var(--ink); border-bottom-color: rgba(242, 239, 231, .1); }
.site-header.on-dark :is(.nav__link, .header-phone, .menu-toggle) { color: var(--paper); }
.site-header.on-dark .header-phone .i { color: var(--gold); }
.site-header.on-dark .brand__std { opacity: 0; }
.site-header.on-dark .brand__inv { opacity: 1; }
.site-header.on-dark .header-phone:hover span { color: var(--gold); }

/* Header glass: translucent paper with a frosted blur, a fine light top edge and a hairline base.
   Falls back to the original near-solid header where backdrop-filter is unsupported. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: linear-gradient(180deg, rgba(246, 244, 238, .84), rgba(242, 239, 231, .72));
    backdrop-filter: saturate(1.6) blur(18px);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    border-bottom-color: rgba(17, 21, 24, .07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
    transition: border-color .25s, box-shadow .3s, background-color .25s;
  }
  .site-header.is-scrolled {
    border-bottom-color: rgba(17, 21, 24, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 30px -22px rgba(17, 21, 24, .35);
  }
  /* Solid while a menu panel is open, so header and panel read as one surface */

}
/* Header glass, adaptive: light glass over paper and photos, dark glass with the
   reversed logo over ink sections so the logo always stays legible. */
.brand { position: relative; }
.brand__inv { position: absolute; left: 0; top: 0; opacity: 0; }
.brand img { transition: opacity .3s var(--ease); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(242, 239, 231, .86);
    transition: border-color .25s, box-shadow .3s, background-color .3s;
  }
  .site-header.on-dark {
    background: rgba(17, 21, 24, .86);
    border-bottom-color: rgba(242, 239, 231, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 30px -22px rgba(0, 0, 0, .6);
  }
  .site-header.on-dark :is(.nav__link, .header-phone, .menu-toggle) { color: var(--paper); }
  .site-header.on-dark .header-phone .i { color: var(--gold); }
  .site-header.on-dark .brand__std { opacity: 0; }
  .site-header.on-dark .brand__inv { opacity: 1; }
  .site-header.on-dark :is(.nav__link, .header-phone span, .menu-toggle) { transition: color .3s var(--ease); }
}
/* Mobile sticky actions: slides up once the page's own CTAs have scrolled away.
   Hidden on desktop, near the quote form/footer, and while the mobile menu is open. */
.mobile-cta { display: none; }
@media (max-width: 899px) {
  .mobile-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px;
    padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background: rgba(17, 21, 24, .9);
    border-top: 1px solid rgba(242, 239, 231, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 -10px 30px -22px rgba(0, 0, 0, .6);
    transform: translateY(110%); visibility: hidden;
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .4s;
  }
  .mobile-cta.is-visible { transform: none; visibility: visible; transition: transform .4s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
  .mobile-cta .btn { min-height: 48px; padding: 0 14px; font-size: .95rem; }
  .mobile-cta .btn--ghost { color: var(--paper); border-color: rgba(242, 239, 231, .3); }
  .mobile-cta .btn--ghost .i { color: var(--gold); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-cta { background: rgba(17, 21, 24, .86); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta, .mobile-cta.is-visible { transition: visibility 0s; }
}
/* Reticle: single crisp 1px gold line, no halo */
.reticle-cursor .rc-halo { display: none; }
.reticle-cursor .rc-line { stroke: #CFA02A; stroke-width: 1; opacity: 1; stroke-linecap: butt; }
.reticle-cursor path.rc-line { shape-rendering: crispEdges; }
.reticle-cursor circle.rc-line { shape-rendering: geometricPrecision; }
.reticle-cursor.is-hover .rc-line { stroke: #DBAE33; }
/* Footer address wraps neatly under its pin */
.footer-contact li, .footer-contact a { align-items: flex-start; }
.footer-contact .i { margin-top: 2px; }
.footer-contact span { max-width: 26ch; }
.quote__contact span { overflow-wrap: normal; }
/* ── Client reviews ──────────────────────────────────────────────────── */
.reviews { padding-block: var(--sec); border-top: 1px solid var(--line); }
.reviews__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.reviews__head { grid-column: 1 / 5; align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
.reviews__score { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line-strong); }
.reviews__rating { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.reviews__rating b { font-size: clamp(3rem, 2rem + 3vw, 4.5rem); font-weight: 600; font-stretch: 114%; letter-spacing: -.045em; line-height: 1; }
.reviews__count { color: var(--muted); margin-bottom: 18px; }
.reviews__body { grid-column: 6 / -1; }
.stars { display: inline-flex; gap: 3px; color: var(--gold); }
.star { width: 16px; height: 16px; fill: currentColor; }
.reviews__rating .star { width: 20px; height: 20px; }
.review blockquote { margin: 0; }
.review--featured { padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line-strong); }
.review--featured blockquote p { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.9rem); font-weight: 500; font-stretch: 104%; letter-spacing: -.02em; line-height: 1.35; color: var(--text); max-width: 34em; }
.review--featured blockquote p::before { content: '“'; color: var(--gold); }
.review--featured blockquote p::after { content: '”'; color: var(--gold); }
.review--featured figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; color: var(--muted); font-size: .95rem; }
.review--featured figcaption b { color: var(--text); margin-right: 8px; }
.reviews__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.reviews__list .review { padding: 26px 0 30px; border-bottom: 1px solid var(--line); }
.reviews__list .review figure { margin: 0; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.reviews__list blockquote p { color: var(--text-2); font-size: 1rem; line-height: 1.6; }
.review__who { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: .9rem; color: var(--muted); }
.review__who b { color: var(--text); font-weight: 600; }
@media (max-width: 899px) {
  .reviews__grid { grid-template-columns: minmax(0, 1fr); }
  .reviews__head, .reviews__body { grid-column: 1 / -1; position: static; }
  .reviews__list { grid-template-columns: minmax(0, 1fr); }
  .reviews__score { margin-bottom: 36px; }
}.stars { position: relative; display: inline-flex; gap: 0; color: inherit; }
.stars__base, .stars__fill { display: inline-flex; gap: 3px; white-space: nowrap; }
.stars__base { color: rgba(17, 21, 24, .14); }
.stars__fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--gold); }
.star { flex: none; }
/* Guides: tables scroll sideways inside themselves on small screens */
.prose table { display: block; overflow-x: auto; max-width: 100%; }
.prose thead th { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--line-strong); }
.prose td:first-child { font-weight: 600; }
.prose td:nth-child(2) { white-space: nowrap; color: var(--brass); font-weight: 600; }
.prose strong { font-weight: 600; color: var(--text); }.prose table { display: table; width: 100%; }
@media (max-width: 599px) { .prose table { display: block; width: auto; } }
/* Reviews: one list. Desktop keeps the featured + two-column layout; phones get a swipe carousel. */
.reviews__list .review--featured { grid-column: 1 / -1; padding: 0 0 clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line-strong); }
.reviews__list .review--featured figure { gap: 0; }
.reviews__list:focus-visible { outline-offset: 6px; }
.reviews__nav { display: none; }
@media (max-width: 899px) {
  .reviews__list {
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad)); padding: 2px var(--pad) 4px;
    cursor: grab; -webkit-user-select: none; user-select: none;
  }
  .reviews__list::-webkit-scrollbar { display: none; }
  .reviews__list.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
  .reviews__list .review, .reviews__list .review--featured {
    flex: 0 0 86%; scroll-snap-align: start; scroll-snap-stop: always;
    padding: 22px 20px 24px; background: var(--white); border: 1px solid var(--line); border-top: 2px solid var(--gold);
  }
  .reviews__list .review--featured blockquote p { font-size: 1.05rem; font-weight: 400; line-height: 1.6; color: var(--text-2); letter-spacing: 0; }
  .reviews__list .review--featured figcaption { flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 16px; }
  .reviews__list .review--featured figcaption .stars { order: -1; margin-bottom: 8px; }
  .reviews__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
  .reviews__btn {
    display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    background: transparent; border: 1px solid rgba(17, 21, 24, .28); border-radius: 2px; color: var(--text);
    transition: background-color .2s var(--ease), border-color .2s var(--ease), opacity .2s;
  }
  .reviews__btn:hover { border-color: var(--ink); background: rgba(17, 21, 24, .04); }
  .reviews__btn:disabled { opacity: .3; cursor: default; }
  .reviews__btn .i { width: 20px; height: 20px; }
  .reviews__pos { margin: 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--muted); }
}
/* Reviews v3: a carousel at every screen size (client prefers all five-star reviews, no rating). */
.reviews__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 18px; color: var(--muted); }
.reviews__rating .star { width: 18px; height: 18px; }
.reviews__list {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 0 6px;
  cursor: grab; -webkit-user-select: none; user-select: none;
}
.reviews__list::-webkit-scrollbar { display: none; }
.reviews__list.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.reviews__list .review {
  flex: 0 0 calc((100% - 16px) / 2.15); scroll-snap-align: start; scroll-snap-stop: always;
  grid-column: auto; padding: 24px 22px 26px; background: var(--white);
  border: 1px solid var(--line); border-top: 2px solid var(--gold); border-bottom: 1px solid var(--line);
}
.reviews__list .review figure { display: flex; flex-direction: column; gap: 14px; height: 100%; margin: 0; }
.reviews__list blockquote p { font-size: 1rem; line-height: 1.6; color: var(--text-2); }
.reviews__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; max-width: 260px; }
.reviews__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  background: transparent; border: 1px solid rgba(17, 21, 24, .28); border-radius: 2px; color: var(--text);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), opacity .2s;
}
.reviews__btn:hover:not(:disabled) { border-color: var(--ink); background: rgba(17, 21, 24, .04); }
.reviews__btn:disabled { opacity: .3; cursor: default; }
.reviews__btn .i { width: 20px; height: 20px; }
.reviews__pos { margin: 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--muted); }
@media (max-width: 899px) {
  .reviews__list { gap: 14px; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad); }
  .reviews__list .review { flex-basis: 86%; padding: 22px 20px 24px; }
  .reviews__nav { max-width: none; }
}
/* Cards size to their own review; the name follows the text instead of sinking to the bottom */
.reviews__list { align-items: flex-start; }
.reviews__list .review figure { height: auto; }
.reviews__list .review__who { margin-top: 4px; }.reviews__nav { margin: 0 0 18px; }
@media (min-width: 900px) { .reviews__nav { margin-left: auto; } .reviews__body { display: flex; flex-direction: column; } }
/* Reviews v4: heading row on top, carousel running the full page width beneath */
.reviews__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.reviews__intro .h2 { margin-bottom: 18px; }
.reviews__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; color: var(--muted); }
.reviews__rating .link-arrow { color: var(--text); }
.reviews__top .reviews__nav { margin: 0; max-width: none; gap: 14px; }
.reviews__list {
  margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); scroll-padding-inline: var(--pad);
  align-items: stretch;
}
.reviews__list .review { flex: 0 0 calc((100% - 3 * 16px) / 3.3); }
.reviews__list .review figure { height: 100%; }
.reviews__list .review__who { margin-top: auto; padding-top: 4px; }
@media (max-width: 1099px) { .reviews__list .review { flex-basis: calc((100% - 16px) / 2.2); } }
@media (max-width: 899px) {
  .reviews__top { align-items: stretch; }
  .reviews__top .reviews__nav { width: 100%; justify-content: space-between; }
  .reviews__list .review { flex-basis: 86%; }
}
/* Reviews v5: the row bleeds to the real edges of the window. The inner padding keeps the
   first card aligned with the heading (and the last with the right edge of the content),
   so scrolled cards slide off the screen edge rather than being cut inside the page. */
.reviews__list,
.reviews__list:is(*) {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  scroll-padding-inline: calc(50vw - 50%);
}
/* Reviews v5b: one gutter value = distance from the window edge to the content column.
   --page-w is the window width without the scrollbar (set in main.js; 100vw fallback). */
.reviews__list,
.reviews__list:is(*) {
  --half: calc(var(--page-w, 100vw) / 2);
  --gutter: calc(var(--half) - min(var(--half), calc(var(--max) / 2)) + var(--pad));
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
/* Reviews v6: a balanced full-width band. Heading, arrows and cards share the same small
   gutter from the window edge on both sides, so wide screens have no lopsided empty margin. */
.reviews > .wrap { max-width: none; }
.reviews__list,
.reviews__list:is(*) { --gutter: var(--pad); }
@media (min-width: 1100px) {
  .reviews__list .review { flex-basis: min(400px, calc((100% - 3 * 16px) / 3.3)); }
}
/* Reviews v7: heading row back in the page's content column (in line with every other
   section); the card row still spans the full window with an even margin on both sides. */
.reviews > .wrap { max-width: var(--max); }
.reviews__list,
.reviews__list:is(*) {
  --outer: calc(var(--half) - min(var(--half), calc(var(--max) / 2)) + var(--pad));
  margin-inline: calc(-1 * var(--outer));
  padding-inline: var(--pad);
  scroll-padding-inline: var(--pad);
}
/* Reviews v8 (phones): controls below the cards; the gap between cards equals the page margin
   so the previous card ends exactly at the screen edge; cards fill more of the width. */
@media (max-width: 899px) {
  .reviews [data-carousel] { display: flex; flex-direction: column; }
  .reviews__top { display: contents; }
  .reviews__intro { order: 1; margin-bottom: 28px; }
  .reviews__list, .reviews__list:is(*) { order: 2; gap: var(--pad); }
  .reviews__list .review { flex-basis: 90%; }
  .reviews__top .reviews__nav { order: 3; margin-top: 20px; width: 100%; justify-content: space-between; }
}@media (max-width: 899px) { .reviews__list .review { flex-basis: 93%; } }
/* ── Thank-you page ─────────────────────────────────────────────────── */
.thanks { padding-block: clamp(40px, 6vw, 96px) var(--sec); }
.thanks__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; margin-bottom: clamp(56px, 7vw, 104px); }
.thanks__main { grid-column: 1 / 8; }
.thanks__main .h1 { margin-bottom: .4em; max-width: 16ch; }
.thanks__aside { grid-column: 9 / -1; padding: 26px 28px; background: var(--stone); border-top: 2px solid var(--gold); }
.thanks__aside .mono { color: var(--brass); margin-bottom: 10px; }
.thanks__aside p { color: var(--text-2); font-size: .975rem; }
.thanks__aside a { overflow-wrap: anywhere; }
.thanks__hours { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); }
.thanks__hours .i { color: var(--brass); }
.thanks__next { margin-bottom: 28px; }
.thanks .rail .step__title { font-size: 1.125rem; }
@media (max-width: 899px) {
  .thanks__grid { grid-template-columns: minmax(0, 1fr); }
  .thanks__main, .thanks__aside { grid-column: 1 / -1; }
  .thanks .btn-row .btn { flex: 1 1 100%; }
}
/* Page heads: line the intro text's last line up with the headline's baseline */
.page-head__grid { align-items: end; align-items: last baseline; }
.page-head__grid > .lead { padding-bottom: 0; }
@media (max-width: 899px) { .page-head__grid { align-items: start; } }