/* ════════════════════════════════════════════════════════════════════════
   SUBPAGES.CSS — everything the 15 content subpages need on top of
   styles.css. docs/10-SUBPAGES-CONTENT.md, docs/11-SUBPAGES-PLAN.md

   Loaded only by the 15 subpage <head>s, after styles.css — never by
   index.html. Moved out of styles.css into its own file so the homepage's
   stylesheet stops growing every time a subpage gets a new component, and
   so this file can keep growing on its own without ever touching a single
   rule the homepage depends on. Everything in here is either scoped to a
   class that exists only on subpage markup, or gated behind body.subpage.
   Component CSS for an individual page's signature moment (the slider, the
   spine, the hub…) lives in its own clearly-headed block further down.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- header ink, before it sticks ----
   The homepage always opens over the dark film, so .site-header hard-codes
   cream ink until .is-stuck (see the rule near the top of the header block).
   Subpages open on a flat hero instead — there is no film to be cream over —
   so here the pre-stuck ink follows whichever light/dark theme class
   initNavTheme() already puts on the header, the same way the stuck state
   does two rules up. */
body.subpage .site-header:not(.is-stuck).hdr-on-light { --hdr-ink: var(--uk-umber); --hdr-mark-dark: 1; }
body.subpage .site-header:not(.is-stuck).hdr-on-dark  { --hdr-ink: var(--text-on-dark); --hdr-mark-dark: 0; }

/* ---- per-page accent ----
   Fourteen subpages all pulling their one accent from --uk-ochre reads as
   one page repeated fourteen times, not fourteen pages — and the logo
   itself carries four distinct hues (ochre, terracotta, brown, clay), not
   one. Every accent-bearing rule below (buttons, active states, drawn
   lines, numbering) reads --pg-accent / --pg-accent-text / --pg-accent-on-fill
   instead of a hardcoded colour; a body class is what actually assigns the
   hue per page (see each page's <body> tag). Ochre stays the default so a
   page that adds no class keeps behaving exactly as before. */
body.subpage {
  --pg-accent:         var(--uk-ochre);
  --pg-accent-text:    var(--ochre-on-light);
  --pg-accent-text-dark: var(--ochre-on-dark);
  --pg-accent-on-fill: #2A1A06;
}
body.accent-terracotta {
  --pg-accent:         var(--uk-terracotta);
  --pg-accent-text:    var(--terracotta-on-light);
  --pg-accent-text-dark: var(--terracotta-on-dark);
  --pg-accent-on-fill: var(--text-on-dark);
}
body.accent-brown {
  --pg-accent:         var(--uk-brown);
  --pg-accent-text:    var(--uk-brown);
  --pg-accent-text-dark: var(--text-on-dark);
  --pg-accent-on-fill: var(--text-on-dark);
}
body.accent-clay {
  --pg-accent:         var(--uk-clay);
  --pg-accent-text:    var(--clay-on-light);
  --pg-accent-text-dark: var(--clay-on-dark);
  --pg-accent-on-fill: #2A1A06;
}

/* ---- generic mechanisms, reused across pages ----
   Two small building blocks the per-page component passes below all draw
   on: a word-by-word reveal for headings (js/subpages.js's
   initHeroTextReveal wraps each word in these spans, then GSAP animates the
   inner one) and a cursor-attraction wrapper for CTA buttons (initMagneticButton,
   same file). Neither is page-specific, so both live here once instead of
   being redefined per page. */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; }
.split-word > span { display: inline-block; will-change: transform; }
.reduced-motion .split-word > span { transform: none !important; opacity: 1 !important; }

[data-magnetic] { display: inline-flex; will-change: transform; }

/* ---- page hero ----
   Every subpage opens here instead of the homepage's video. One screen at
   most, no Ken Burns, no autoplay — the spectacle stays on the homepage and
   these pages get straight to the point. */
.pg-hero {
  padding-top: calc(var(--pad-section) * .8 + 92px);
  padding-bottom: calc(var(--pad-section) * .8);
}
.pg-hero--bone { background: var(--uk-bone); }
.pg-hero--sand { background: var(--uk-sandstone); }
.pg-hero--dark { background: var(--uk-umber); color: var(--text-on-dark); }
.pg-hero--dark .eyebrow { color: var(--clay-on-dark); }
.pg-hero--dark .eyebrow::before { background: var(--clay-on-dark); }

.pg-hero h1 { max-width: 21ch; margin: 0 0 1.25rem; }
.pg-hero .lead { max-width: 60ch; color: var(--text-secondary); }
.pg-hero--dark .lead { color: var(--text-on-dark); opacity: .82; }
.pg-hero .eyebrow { margin-bottom: 1.1rem; }

.pg-hero-inner { display: grid; gap: var(--gap-lg); }
.pg-hero-media {
  margin-top: var(--gap-lg);
}
.pg-hero-media img { aspect-ratio: 16 / 9; object-fit: cover; }
.pg-hero-media--tall img { aspect-ratio: 4 / 5; }
.pg-hero-media--wide img { aspect-ratio: 21 / 9; }

@media (min-width: 900px) {
  .pg-hero-inner { grid-template-columns: 1.2fr 1fr; align-items: center; gap: var(--gap-xl); }
  .pg-hero-media { margin-top: 0; }
}

/* ---- breadcrumb ----
   Mono, small, quiet — the drawing-sheet titleblock reference the eyebrow
   rule already establishes, reused here for wayfinding instead of labelling. */
.pg-crumb {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .01em;
  color: var(--uk-clay);
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin: 0 0 1.75rem;
}
.pg-crumb a { position: relative; color: inherit; text-decoration: none; }
.pg-crumb a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.pg-crumb a:hover, .pg-crumb a:focus-visible { color: var(--uk-brown); }
.pg-crumb a:hover::after, .pg-crumb a:focus-visible::after { transform: scaleX(1); }
.pg-crumb span[aria-hidden] { opacity: .55; }
.pg-crumb .is-current { color: var(--uk-brown); }
.pg-hero--dark .pg-crumb { color: var(--clay-on-dark); }
.pg-hero--dark .pg-crumb a:hover { color: var(--text-on-dark); }
.pg-hero--dark .pg-crumb .is-current { color: var(--text-on-dark); }

/* ---- generic subpage section rhythm ---- */
.pg-section { padding-block: var(--pad-section); background: var(--uk-bone); }
.pg-section--sand { background: var(--uk-sandstone); }
.pg-section--dark { background: var(--uk-umber); color: var(--text-on-dark); }
.pg-section--dark .eyebrow { color: var(--clay-on-dark); }
.pg-section--dark .eyebrow::before { background: var(--clay-on-dark); }
.pg-section h2 { max-width: 26ch; }
.pg-section .lead { max-width: 62ch; color: var(--text-secondary); }
.pg-section--dark .lead { color: var(--text-on-dark); opacity: .82; }

.pg-head { margin-bottom: var(--gap-xl); }
.pg-head .eyebrow { margin-bottom: 1rem; }

/* ---- numbered scope-of-services list ----
   Reused across Design, Construction & Execution, Renovations and Master
   Planning wherever the source content is a flat "Scope of Services" list —
   set as drawing-sheet references, not bullets, so it reads like the
   annotation column on a real spec sheet rather than a marketing checklist. */
.pg-scope { border-top: 1px solid var(--border); max-width: 46rem; }
.pg-scope li {
  position: relative;
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  padding-block: .9rem;
  padding-right: 2rem;
  border-bottom: 1px solid var(--border);
}
.pg-scope .n {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--uk-clay);
  flex: none;
  width: 2.4ch;
}
.pg-scope p { margin: 0; }
/* Injected once per <li> by js/subpages.js's initScopeChecklist — a plain
   spec list otherwise never confirms anything got read. Scales in on
   hover/focus so working down the list feels like ticking it off. */
.scope-tick {
  position: absolute;
  right: 0; top: 50%;
  width: 18px; height: 18px;
  color: var(--pg-accent);
  transform: translateY(-50%) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.pg-scope li:hover .scope-tick, .pg-scope li:focus-within .scope-tick { transform: translateY(-50%) scale(1); }
.reduced-motion .scope-tick { transition: none; }

/* ---- closing CTA band ----
   The one dark band most subpages get (see 11-SUBPAGES-PLAN.md §3: never
   more than one Umber band per subpage besides its hero, if the hero itself
   is light). Deliberately calmer than the homepage's Section 13 — no
   background photograph, no oversized display type — because this page has
   already made its case; the CTA only needs to be findable. */
.pg-cta {
  background: var(--uk-umber);
  color: var(--text-on-dark);
  padding-block: var(--pad-section);
  text-align: center;
}
.pg-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.pg-cta h2 { max-width: 24ch; color: var(--uk-bone); }
.pg-cta p { max-width: 50ch; opacity: .82; }
.pg-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* ---- cross-link footer ----
   "Explore the other three" — appears near the bottom of each of the four
   service pages so a visitor who lands on one service can move sideways
   without going back through the header dropdown. Not a repeat of the
   homepage's service grid: three rows, not four cards, no imagery. */
.pg-crosslinks {
  border-top: 1px solid var(--border);
  margin-top: var(--gap-xl);
  padding-top: var(--gap-lg);
  display: grid;
  gap: 0;
}
.pg-crosslinks a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--border);
  color: var(--uk-brown);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 300;
  transition: color var(--dur-fast) ease, padding-left var(--dur-fast) var(--ease-out);
}
.pg-crosslinks a:hover, .pg-crosslinks a:focus-visible {
  color: var(--pg-accent-text);
  padding-left: .5rem;
}
.pg-crosslinks .arrow {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .01em;
  color: var(--uk-clay);
  flex: none;
}

@media (min-width: 768px) {
  .pg-hero { padding-top: calc(var(--pad-section) + 96px); }
}

/* ---- services.html — dense row list + cursor-tracking preview ----
   Deliberately not a card grid: the homepage already owns the 2x2 service
   card grid (01-DESIGN-SYSTEM.md §Section 3), so this page is a plain list
   of rows and the imagery only appears as a floating preview that follows
   the pointer — desktop only, see 11-SUBPAGES-PLAN.md §4.

   This is the site's directory: every row is a door to a deeper page, so
   the row itself carries three layered tells that a door is opening —
   an oversized watermark numeral driving in behind the text (echoing the
   "four disciplines" framing without adding a fifth graphic element), a
   discipline icon that steps in from the left, and a diagonal arrow-lift —
   plus the floating preview now sits desaturated until you commit to a
   row, so colour itself becomes the "yes, this one" signal. */
.svc-rows { border-top: 1px solid var(--border); }
.svc-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 1.75rem;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text-primary);
  overflow: hidden;
  transition: padding-left var(--dur-fast) var(--ease-out);
}
.svc-row:hover, .svc-row:focus-visible { padding-left: .75rem; }
.svc-row::before {
  content: attr(data-num);
  position: absolute;
  right: .5rem;
  top: 50%;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(4rem, 9vw, 7.5rem);
  line-height: 1;
  color: var(--pg-accent);
  opacity: 0;
  transform: translateY(-50%) translateX(16px);
  pointer-events: none;
  z-index: 0;
  transition: opacity .45s var(--ease-out), transform .5s var(--ease-out);
}
.svc-row:hover::before, .svc-row:focus-visible::before { opacity: .14; transform: translateY(-50%) translateX(0); }
.svc-row-num {
  position: relative;
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--uk-clay);
  flex: none;
  width: 3ch;
}
.svc-row-icon {
  position: relative;
  align-self: center;
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--pg-accent);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.svc-row-icon svg { display: block; width: 100%; height: 100%; }
.svc-row:hover .svc-row-icon, .svc-row:focus-visible .svc-row-icon { opacity: 1; transform: translateX(0); }
.svc-row-name {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  flex: none;
  width: 11rem;
}
.svc-row-desc {
  position: relative;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  flex: 1 1 auto;
  max-width: 46ch;
}
.svc-row-arrow {
  position: relative;
  font-family: var(--font-mono);
  color: var(--pg-accent-text);
  flex: none;
  margin-left: auto;
  transition: transform var(--dur-fast) var(--ease-out);
}
.svc-row:hover .svc-row-arrow, .svc-row:focus-visible .svc-row-arrow { transform: translate(5px, -3px); }

.svc-preview {
  position: fixed;
  top: 0; left: 0;
  width: 260px;
  aspect-ratio: 16 / 10;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .2s ease, transform .2s var(--ease-out);
  z-index: 40;
  border: 1px solid var(--uk-brown);
  background: var(--uk-bone);
  padding: 6px;
  will-change: transform, opacity;
}
.svc-preview img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-img);
  filter: grayscale(1) contrast(1.03);
  transition: filter .6s ease;
}
.svc-preview.is-active { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.svc-preview.is-active img { filter: grayscale(0) contrast(1); }
.reduced-motion .svc-preview img { filter: none; }

@media (max-width: 699px) {
  .svc-row { flex-wrap: wrap; gap: .35rem 1.25rem; }
  .svc-row-icon { display: none; } /* the icon-step is a hover tell; touch has no hover to tell */
  .svc-row::before { display: none; }
  .svc-row-name { width: auto; }
  .svc-row-desc { order: 3; max-width: none; }
  .svc-row-arrow { margin-left: 0; }
}
@media (max-width: 899px) {
  .svc-preview { display: none; } /* the floating preview is a desktop-hover idea; it has no touch equivalent worth faking */
}

/* ---- design.html — drawing-sheet topic grid ----
   Corner brackets echo a drawing sheet's crop marks; the reference code
   reads like a sheet number rather than a marketing step. The drafting-sheet
   idea now goes further than a static border: a faint blueprint grid sits
   behind the four tiles, each tile's crop marks extend outward and its
   discipline icon steps in on hover, a bottom rule draws in under the
   reference code, and the four tiles stagger into place on scroll — the
   corner-bracket motif carried into actual behaviour instead of decoration
   that never moves once painted. */
.dsn-topics {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: var(--gap-xl);
  position: relative;
}
.dsn-topics::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .35;
}
.dsn-topic {
  background: var(--uk-bone);
  padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), background .35s ease;
}
.dsn-topic.is-in { opacity: 1; transform: translateY(0); }
.reduced-motion .dsn-topic { opacity: 1; transform: none; }
.dsn-topic:hover, .dsn-topic:focus-within { background: color-mix(in srgb, var(--pg-accent) 6%, var(--uk-bone)); }
.dsn-topic::before, .dsn-topic::after { content: ""; position: absolute; width: 14px; height: 14px; transition: width .3s var(--ease-out), height .3s var(--ease-out); }
.dsn-topic::before { top: 8px; left: 8px; border-top: 1px solid var(--uk-clay); border-left: 1px solid var(--uk-clay); }
.dsn-topic::after { bottom: 8px; right: 8px; border-bottom: 1px solid var(--uk-clay); border-right: 1px solid var(--uk-clay); }
.dsn-topic:hover::before, .dsn-topic:focus-within::before,
.dsn-topic:hover::after, .dsn-topic:focus-within::after { width: 22px; height: 22px; border-color: var(--pg-accent); }
.dsn-topic-head { display: flex; align-items: center; gap: .85rem; margin-bottom: .85rem; }
.dsn-topic-ref {
  display: block;
  position: relative;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--uk-clay);
  padding-bottom: .5rem;
}
.dsn-topic-ref::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--pg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.dsn-topic:hover .dsn-topic-ref::after, .dsn-topic:focus-within .dsn-topic-ref::after { transform: scaleX(1); }
.dsn-topic-icon {
  flex: none;
  width: 30px; height: 30px;
  color: var(--pg-accent);
  opacity: 0;
  transform: scale(.6) rotate(-8deg);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.dsn-topic-icon svg { display: block; width: 100%; height: 100%; }
.dsn-topic:hover .dsn-topic-icon, .dsn-topic:focus-within .dsn-topic-icon { opacity: 1; transform: scale(1) rotate(0deg); }
.dsn-topic h3 { margin: 0 0 .6rem; font-weight: 400; }
.dsn-topic p { margin: 0; color: var(--text-secondary); max-width: 48ch; font-size: var(--fs-small); }

@media (min-width: 800px) {
  .dsn-topics { grid-template-columns: repeat(2, 1fr); }
}

/* ---- design.html — "more than a concept" line diagram ----
   A rough concept sketch resolving into a precise drafted line, drawn by
   scroll — the one visual translation on the page of what the section's
   copy is actually claiming, using the site's existing stroke-dashoffset
   draw technique (same reasoning as .spine-draw/.hub-line-draw: the offset
   lives only on the element, never in a stylesheet rule). */
.concept-diagram { margin: var(--gap-lg) 0 var(--gap-xl); max-width: 32rem; }
.concept-diagram svg { width: 100%; height: auto; display: block; }
.concept-diagram .concept-base { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.concept-diagram .concept-draw { stroke: var(--pg-accent); stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.reduced-motion .concept-diagram .concept-draw { stroke-dashoffset: 0 !important; }
.concept-diagram-label {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  fill: var(--uk-clay);
}

/* ---- construction-execution.html — programme strip ----
   The 17 scope items regrouped into 4 phase bands and drawn as one
   horizontal strip that fills in sequence as the page scrolls — reads as
   sequencing/time, which is the one thing this page has to communicate that
   no homepage section does (11-SUBPAGES-PLAN.md §4). Regrouping is a display
   choice only; the verbatim scope list still exists elsewhere on the page
   in source order. */
.gantt { margin-top: var(--gap-xl); }
.gantt-track {
  display: flex;
  gap: 3px;
  height: 10px;
  border-radius: 2px;
  overflow: hidden;
}
.gantt-seg { width: var(--w); position: relative; background: var(--border); cursor: default; }
.gantt-fill { position: absolute; inset: 0; width: 0%; background: var(--pg-accent); }
/* Hovering a bar surfaces which phase it is — the strip had no way to say
   that on its own until now, just four unlabelled coloured widths. */
.gantt-seg::after {
  content: attr(data-phase);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.894rem;
  letter-spacing: 0;
  color: var(--uk-bone);
  background: var(--uk-umber);
  padding: .3rem .6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s var(--ease-out);
  z-index: 5;
}
.gantt-seg:hover::after, .gantt-seg:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.gantt-phases { display: grid; gap: var(--gap-lg); margin-top: var(--gap-lg); }
.gantt-phase { opacity: .45; transition: opacity .4s ease; border-top: 1px solid var(--border); padding-top: 1rem; }
.gantt-phase.is-active { opacity: 1; }
.gantt-phase .n { font-family: var(--font-mono); font-size: .8125rem; color: var(--uk-clay); }
.gantt-phase h3 { margin: .35rem 0 .75rem; font-weight: 400; }
.gantt-phase ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; font-size: var(--fs-small); color: var(--text-secondary); }
.gantt-phase li { position: relative; padding-left: 0; transition: padding-left var(--dur-fast) var(--ease-out), color var(--dur-fast) ease; }
.gantt-phase li::before {
  content: "";
  position: absolute;
  left: -.9rem; top: .55em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--pg-accent);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
}
.gantt-phase li:hover { padding-left: .35rem; color: var(--text-primary); }
.gantt-phase li:hover::before { opacity: 1; }

.reduced-motion .gantt-fill { width: 100% !important; }
.reduced-motion .gantt-phase { opacity: 1 !important; }

@media (min-width: 900px) {
  .gantt-phases { grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
}

/* ---- construction-execution.html — trade marquee ----
   "Coordinated Execution" had no visual of its own — just a paragraph
   claiming multiple trades move in lockstep. A continuously scrolling strip
   of the trades themselves, pausing under the pointer, is the closest
   thing to showing coordination-in-motion without duplicating the
   homepage's vendor-collapse diagram (that one resolves chaos into a point;
   this one never shows chaos at all, just a steady, orderly procession —
   11-SUBPAGES-PLAN.md §4's non-repetition rule, applied to a section, not
   only a whole page). */
.trade-marquee {
  margin-top: var(--gap-xl);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.trade-marquee-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  animation: uk-marquee 26s linear infinite;
}
.trade-marquee:hover .trade-marquee-track,
.trade-marquee:focus-within .trade-marquee-track { animation-play-state: paused; }
.trade-marquee-track span {
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: 0;
  color: var(--uk-clay);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.trade-marquee-track span::before { content: "/"; color: var(--pg-accent); }
@keyframes uk-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reduced-motion .trade-marquee-track { animation: none; }
.reduced-motion .trade-marquee { overflow-x: auto; }

/* ---- construction-execution.html — quality checkpoint strip ----
   "Quality Through the Process" was the other text-only section: a claim
   ("inspection remains part of the construction process") with nothing
   showing the checkpoints themselves. Six nodes on a connecting line, drawn
   in on scroll, each ticking as it becomes active — same drawing technique
   as .spine-draw/.concept-draw, horizontal instead of vertical, six nodes
   not seven so it reads as its own thing next to process.html's spine. */
.checkpoint-strip { margin: var(--gap-lg) 0 var(--gap-xl); position: relative; }
.checkpoint-strip svg { width: 100%; height: auto; display: block; }
.checkpoint-line { fill: none; stroke: var(--border-strong); stroke-width: 1.5; }
.checkpoint-draw { stroke: var(--pg-accent); stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.reduced-motion .checkpoint-draw { stroke-dashoffset: 0 !important; }
.checkpoint-node { fill: var(--uk-bone); stroke: var(--uk-brown); stroke-width: 1.25; opacity: 0; transform-origin: center; }
.checkpoint-node.is-in { opacity: 1; }
.reduced-motion .checkpoint-node { opacity: 1 !important; }
.checkpoint-tick { stroke: var(--pg-accent); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 10; stroke-dashoffset: 10; transition: stroke-dashoffset .4s var(--ease-out); }
.checkpoint-node.is-in .checkpoint-tick { stroke-dashoffset: 0; }
.reduced-motion .checkpoint-tick { stroke-dashoffset: 0 !important; transition: none; }
.checkpoint-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .03em;
  fill: var(--uk-brown);
  text-anchor: middle;
}

/* ---- renovations.html — draggable before/after ----
   User-driven reveal, opposite interaction model from the homepage's
   scroll-scrubbed, autoplaying wipe (11-SUBPAGES-PLAN.md §4): the visitor
   drags, the page does not decide the pace for them. */
.ba-slider {
  position: relative;
  max-width: 860px;
  aspect-ratio: 4 / 3;
  margin-top: var(--gap-xl);
  overflow: hidden;
  border: 1px solid var(--uk-brown);
  background: var(--uk-bone); /* shows through cleanly if ren-before/after are still awaiting generation */
  touch-action: pan-y;
}
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--pg-accent);
  transform: translateX(-1px);
  cursor: ew-resize;
}
.ba-handle-grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--pg-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pg-accent-on-fill);
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .02em;
}
/* Nothing on first paint says "this drags" except a cursor style nobody
   sees until they're already hovering it. A quiet pulse ring (stopped for
   good on first pointerdown/keydown — see initBaInvite in subpages.js) and
   a one-time nudge of the divider itself (initBaIntroSweep) are the
   invitation instead. */
.ba-handle-grip::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--pg-accent);
  opacity: 0;
  pointer-events: none;
}
.ba-slider.is-inviting .ba-handle-grip::before { animation: uk-invite-pulse 1.8s ease-out infinite; }
@keyframes uk-invite-pulse {
  0%   { opacity: .55; transform: scale(.85); }
  100% { opacity: 0;   transform: scale(1.45); }
}
.reduced-motion .ba-slider.is-inviting .ba-handle-grip::before { animation: none; opacity: 0; }
.ba-tag {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0;
  background: var(--pg-accent);
  color: var(--pg-accent-on-fill);
  padding: .3rem .6rem;
}
.ba-caption {
  position: absolute;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0;
  background: rgba(63, 36, 34, .74);
  color: var(--text-on-dark);
  padding: .35rem .6rem;
}
.ba-caption--before { left: 12px; }
.ba-caption--after { right: 12px; }
.ba-hint {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--uk-clay);
  margin-top: .9rem;
}

/* ---- renovations.html — "Movement. Light. Storage…" reveal words ----
   Seven words the source content deliberately sets in large display type
   (docs/10-SUBPAGES-CONTENT.md §4) were, until now, just large type —
   correct restraint for the homepage's equivalent moments, wrong for a
   page that's supposed to have real interaction on every element. Each
   word gets a one-line elaboration on hover/focus instead of turning the
   type itself into another animation — the boldness stays exactly the
   size the content called for, only the words themselves become doors. */
.reveal-word {
  position: relative;
  cursor: default;
  border-bottom: 1px dotted var(--border-strong);
  transition: color .25s ease, border-color .25s ease;
}
.reveal-word:hover, .reveal-word:focus-visible { color: var(--pg-accent-text); border-color: var(--pg-accent); }
.reveal-word::after {
  content: attr(data-detail);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(6px);
  width: max-content;
  max-width: 15rem;
  white-space: normal;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .6875rem;
  letter-spacing: .02em;
  line-height: 1.4;
  text-transform: none;
  color: var(--uk-bone);
  background: var(--uk-umber);
  padding: .55rem .8rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s var(--ease-out);
  z-index: 6;
}
.reveal-word:hover::after, .reveal-word:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- master-planning.html — layer-toggle site plan ----
   Explorable, not scroll-scrubbed (11-SUBPAGES-PLAN.md §4): the page is
   about layers of a plan, not progression through time, so a plain class
   toggle is the honest mechanism rather than dressing it up with scroll. */
.layer-plan { margin-top: var(--gap-xl); }
.layer-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: var(--gap-md);
}
.layer-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: 0;
  padding: .55rem 1rem;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--uk-brown);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.layer-chip:hover { transform: translateY(-2px); }
.layer-chip-icon { width: 15px; height: 15px; flex: none; }
.layer-chip-icon svg { display: block; width: 100%; height: 100%; }
.layer-chip.is-active {
  background: var(--pg-accent);
  border-color: var(--pg-accent);
  color: var(--pg-accent-on-fill);
  transform: translateY(-2px);
}
.reduced-motion .layer-chip:hover, .reduced-motion .layer-chip.is-active { transform: none; }
.layer-stage {
  position: relative;
  max-width: 760px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--uk-brown);
  background: var(--uk-bone);
  padding: 10px;
}
.layer-stage svg { width: 100%; height: 100%; display: block; }
.layer-svg-group { opacity: 0; transition: opacity .35s ease; }
.layer-svg-group.is-visible { opacity: 1; }
.reduced-motion .layer-svg-group { transition: none; }

.mp-boundary { fill: none; stroke: var(--uk-brown); stroke-width: 1.5; }
.mp-corner { fill: none; stroke: var(--uk-clay); stroke-width: 1; }
.mp-contour { fill: none; stroke: var(--uk-clay); stroke-width: 1; opacity: .7; }
.mp-tree { fill: var(--uk-clay); opacity: .6; }
.mp-road { fill: none; stroke: var(--uk-brown); stroke-width: 3; stroke-linecap: round; }
.mp-road-minor { fill: none; stroke: var(--uk-brown); stroke-width: 1.25; stroke-dasharray: 3 4; opacity: .8; }
.mp-open { fill: var(--uk-clay); opacity: .28; }
.mp-open-dot { fill: var(--uk-clay); opacity: .55; }
.mp-block {
  fill: var(--uk-brown); opacity: .16; stroke: var(--uk-brown); stroke-width: .75;
  cursor: pointer;
  transition: opacity .25s ease, stroke-width .25s ease, fill .25s ease;
}
.mp-block--tall { opacity: .32; }
.mp-block:hover, .mp-block:focus-visible { opacity: .55; stroke-width: 1.5; fill: var(--pg-accent); }
.mp-phase { fill: var(--uk-ochre); opacity: .16; stroke: var(--uk-ochre); stroke-width: 1; }
.mp-phase--2 { fill: var(--uk-terracotta); stroke: var(--uk-terracotta); }
.mp-phase--3 { fill: var(--uk-clay); stroke: var(--uk-clay); }
.mp-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .04em;
  fill: var(--uk-brown);
}

/* ---- why-urbankriti.html — quiet two-column pillar list ----
   Deliberately no signature *moment* (11-SUBPAGES-PLAN.md §4): the
   homepage's Section 5 compresses these same six pillars into a 3x2 grid,
   so this page still isn't a diagram or a scroll-scrubbed sequence — but
   "no signature moment" was read too literally the first time round as
   "no interaction at all." An icon, a growing left-border accent and a
   stagger entrance are all per-element, not a page-level device, so the
   distinction still holds. */
.pillars {
  display: grid;
  gap: var(--gap-lg) var(--gap-xl);
  margin-top: var(--gap-xl);
}
.pillar {
  position: relative;
  border-top: 1px solid var(--border);
  padding: 1.25rem 0 0 1.1rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.pillar.is-in { opacity: 1; transform: translateY(0); }
.reduced-motion .pillar { opacity: 1; transform: none; }
.pillar::before {
  content: "";
  position: absolute;
  left: 0; top: 1.25rem; bottom: 0;
  width: 2px;
  background: var(--pg-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .4s var(--ease-out);
}
.pillar:hover::before, .pillar:focus-within::before { transform: scaleY(1); }
.pillar-head { display: flex; align-items: center; gap: .85rem; margin-bottom: .6rem; }
.pillar .n { font-family: var(--font-mono); font-size: .8125rem; color: var(--uk-clay); transition: color .3s ease; }
.pillar:hover .n, .pillar:focus-within .n { color: var(--pg-accent-text); }
.pillar-icon {
  width: 26px; height: 26px; flex: none;
  color: var(--pg-accent);
  opacity: 0;
  transform: translateX(-6px) scale(.8);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.pillar-icon svg { display: block; width: 100%; height: 100%; }
.pillar:hover .pillar-icon, .pillar:focus-within .pillar-icon { opacity: 1; transform: translateX(0) scale(1); }
.pillar h3 { margin: 0 0 .5rem; font-weight: 400; }
.pillar p { margin: 0; color: var(--text-secondary); max-width: 42ch; font-size: var(--fs-small); }

@media (min-width: 800px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}

/* ---- process.html — the scroll-drawn spine ----
   Inverse of the homepage's sticky method rail (11-SUBPAGES-PLAN.md §4): the
   line moves and draws itself while the seven steps sit in ordinary document
   flow, rather than a fixed rail with steps scrolling past it. A thread
   through the steps, not a progress bar beside them. */
.spine-wrap { position: relative; margin-top: var(--gap-xl); }
.spine-line {
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
}
.spine-line svg { width: 2px; height: 100%; display: block; overflow: visible; }
.spine-line path { fill: none; stroke: var(--border-strong); stroke-width: 2; }
/* stroke-dashoffset is deliberately NOT set here: a CSS declaration would
   outrank the SVG attribute GSAP animates (a stylesheet rule beats a
   presentation attribute regardless of specificity), which would freeze the
   draw-in permanently at its starting offset. The starting value instead
   lives on the element itself, in the markup. */
.spine-line .spine-draw { stroke: var(--pg-accent); stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.reduced-motion .spine-line .spine-draw { stroke-dashoffset: 0 !important; }

.spine-steps { list-style: none; margin: 0; padding: 0; }
.spine-step {
  position: relative;
  padding: 0 0 var(--gap-xl) 3rem;
}
.spine-step:last-child { padding-bottom: 0; }
.spine-step-node {
  position: absolute;
  left: 0; top: 2px;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid var(--uk-clay);
  background: var(--uk-bone);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--uk-clay);
  transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s var(--ease-out);
}
/* Number and icon occupy the same space, one fading out as the other fades
   in when a step becomes active — the node marks its stage two ways
   instead of just switching colour. */
.spine-step-num, .spine-step-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .3s ease, transform .3s ease;
}
.spine-step-icon { opacity: 0; transform: scale(.5); color: var(--pg-accent); }
.spine-step-icon svg { width: 13px; height: 13px; }
.spine-step.is-active .spine-step-node { border-color: var(--pg-accent); color: var(--pg-accent); background: var(--uk-bone); transform: scale(1.1); }
.spine-step.is-active .spine-step-num { opacity: 0; transform: scale(.5); }
.spine-step.is-active .spine-step-icon { opacity: 1; transform: scale(1); }
.reduced-motion .spine-step.is-active .spine-step-node { transform: none; }
.spine-step h3 { margin: 0 0 .3rem; font-weight: 400; }
.spine-step .step-tag { display: block; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; color: var(--uk-clay); font-style: normal; margin-bottom: .35rem; }
.spine-step p:last-child { margin: 0; color: var(--text-secondary); max-width: 52ch; }

/* ---- quality-standards.html — phase tabs ----
   Four phase groups instead of the homepage's one flat eleven-item
   horizontal scroller — the structure this page adds that the homepage has
   no room for (11-SUBPAGES-PLAN.md §4). */
.qtabs-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  border-bottom: 1px solid var(--border);
  margin-top: var(--gap-xl);
  padding-bottom: 0;
}
.qtab {
  position: relative;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .03em;
  padding: .85rem 1.1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color var(--dur-fast) ease;
}
.qtab.is-active { color: var(--uk-brown); }
/* A single shared bar slides between tabs (see initQtabsIndicator in
   subpages.js, which positions it against whichever button is active) —
   the four tabs' own border-bottom stays transparent so it never doubles
   up with the sliding bar underneath it. */
.qtabs-indicator {
  position: absolute;
  bottom: -1px; left: 0;
  height: 2px;
  background: var(--pg-accent);
  width: 0;
  transform: translateX(0);
  transition: transform .35s var(--ease-out), width .35s var(--ease-out);
}
.reduced-motion .qtabs-indicator { transition: none; }
.qtab-panels { margin-top: var(--gap-lg); }
.qtab-panel { display: none; }
.qtab-panel.is-active { display: block; }
.qtab-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.qtab-panel li {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.qtab-panel.is-active li { opacity: 1; transform: translateY(0); }
.reduced-motion .qtab-panel li { opacity: 1; transform: none; transition: none; }
/* Stagger the reveal instead of every row landing at once — six is the
   most any panel holds, so six covers every case with room to spare. */
.qtab-panel.is-active li:nth-child(1) { transition-delay: .04s; }
.qtab-panel.is-active li:nth-child(2) { transition-delay: .11s; }
.qtab-panel.is-active li:nth-child(3) { transition-delay: .18s; }
.qtab-panel.is-active li:nth-child(4) { transition-delay: .25s; }
.qtab-panel.is-active li:nth-child(5) { transition-delay: .32s; }
.qtab-panel.is-active li:nth-child(6) { transition-delay: .39s; }
.qtab-check {
  flex: none;
  width: 20px; height: 20px;
  margin-top: .15rem;
}
.qtab-check path {
  fill: none;
  stroke: var(--pg-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .5s var(--ease-out);
  transition-delay: inherit;
}
.qtab-panel.is-active .qtab-check path { stroke-dashoffset: 0; }
.reduced-motion .qtab-check path { stroke-dashoffset: 0 !important; transition: none; }
.qtab-item-body h3 { margin: 0 0 .25rem; font-weight: 400; font-size: var(--fs-body); }
.qtab-item-body p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); max-width: 48ch; }
.qtab-photo {
  width: 84px;
  flex: none;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--uk-brown);
}
.qtab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.qtab-panel li:hover .qtab-photo img, .qtab-panel li:focus-within .qtab-photo img { transform: scale(1.12); }

@media (min-width: 700px) {
  .qtab-panel li { align-items: center; }
}

/* ---- project-management.html — the radiating hub ----
   Opposite of the homepage's vendor-collapse diagram, which resolves chaos
   into one point. This one never shows chaos — it is one steady centre
   radiating outward to eight coordination functions, because Project
   Management's whole point is that disorder never happens on Urbankriti's
   watch (11-SUBPAGES-PLAN.md §4). */
.hub-wrap { margin-top: var(--gap-xl); position: relative; }
.hub-wrap svg { width: 100%; height: auto; display: block; }
.hub-line {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
}
/* Same reasoning as .spine-draw above: no stroke-dashoffset here, or it
   would permanently outrank the attribute GSAP animates. */
.hub-line-draw {
  stroke: var(--uk-clay);
  stroke-dasharray: 1;
  transition: stroke .3s ease, stroke-width .3s ease;
}
.reduced-motion .hub-line-draw { stroke-dashoffset: 0 !important; }
.hub-centre-circle { fill: var(--uk-umber); }
.hub-centre-text { font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em; fill: var(--uk-bone); text-anchor: middle; }
.hub-node-circle {
  fill: var(--uk-bone); stroke: var(--uk-brown); stroke-width: 1.25; opacity: 0; transform-origin: center;
  transition: fill .3s ease, stroke .3s ease, transform .3s var(--ease-out);
}
.reduced-motion .hub-node-circle { opacity: 1 !important; }
.hub-node-label { font-family: var(--font-mono); font-size: 8.5px; fill: var(--uk-brown); transition: fill .3s ease; }
/* Cross-link between the list and the diagram — see initHubCrossLink in
   subpages.js. Hovering or focusing a function card highlights its
   matching spoke and node so the two halves of the page read as one
   thing instead of a diagram and a list that happen to share numbers. */
g[data-hub-node].is-linked .hub-node-circle { fill: var(--pg-accent); stroke: var(--pg-accent); transform: scale(1.12); }
g[data-hub-node].is-linked .hub-node-label { fill: var(--pg-accent-on-fill); }
.hub-line-draw.is-linked { stroke: var(--pg-accent); stroke-width: 2; }
.hub-functions {
  list-style: none;
  margin: var(--gap-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap-md) var(--gap-lg);
}
.hub-functions li {
  position: relative;
  border-top: 1px solid var(--border);
  padding: .9rem 0 .9rem 0;
  cursor: default;
  transition: padding-left .3s var(--ease-out);
}
.hub-functions li::before {
  content: "";
  position: absolute;
  left: -1px; top: 0; bottom: 0;
  width: 2px;
  background: var(--pg-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s var(--ease-out);
}
.hub-functions li:hover, .hub-functions li:focus-visible { padding-left: .8rem; }
.hub-functions li:hover::before, .hub-functions li:focus-visible::before { transform: scaleY(1); }
.hub-functions .n { font-family: var(--font-mono); font-size: .8125rem; color: var(--uk-clay); display: block; margin-bottom: .4rem; transition: color .3s ease; }
.hub-functions li:hover .n, .hub-functions li:focus-visible .n { color: var(--pg-accent-text); }
.hub-functions h3 { margin: 0 0 .35rem; font-weight: 400; font-size: var(--fs-body); }
.hub-functions p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); }
@media (min-width: 800px) { .hub-functions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .hub-functions { grid-template-columns: repeat(4, 1fr); } }

/* ---- faq.html — numbered accordion ----
   13 rows landed as functional but flat: a plus/minus toggle, no feedback
   anywhere else on the row. Progressive underline on hover, a spring
   overshoot on the toggle instead of a plain ease, and each row now
   fades/lifts in as IT crosses into view (not a single stagger delayed
   from page load, which would leave row 13 waiting over a second for a
   delay nobody would ever see play out before scrolling to it). */
.accordion {
  border-top: 1px solid var(--border);
  margin-top: var(--gap-xl);
}
.accordion-item {
  border-bottom: 1px solid var(--border);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.accordion-item.is-in { opacity: 1; transform: translateY(0); }
.reduced-motion .accordion-item { opacity: 1; transform: none; }
.accordion-q {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  text-align: left;
  background: none;
  border: none;
  padding: 1.4rem 0;
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 400;
}
.accordion-q::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--pg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.accordion-q:hover::after, .accordion-q:focus-visible::after { transform: scaleX(1); }
.accordion-q .n { font-family: var(--font-mono); font-size: .8125rem; font-weight: 400; color: var(--uk-clay); flex: none; transition: color .3s ease; }
.accordion-q:hover .n, .accordion-item[data-open="true"] .n { color: var(--pg-accent-text); }
.accordion-q .q-text { flex: 1 1 auto; }
.accordion-toggle { flex: none; width: 20px; height: 20px; position: relative; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.accordion-item[data-open="false"] .accordion-q:hover .accordion-toggle { transform: rotate(90deg); }
.accordion-toggle::before, .accordion-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--uk-brown);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .3s ease;
}
.accordion-toggle::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.accordion-toggle::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.accordion-item[data-open="true"] .accordion-toggle::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.accordion-item[data-open="true"] .accordion-toggle::before { background: var(--pg-accent); }
.accordion-a { overflow: hidden; height: 0; transition: height .35s var(--ease-out); }
.accordion-a-inner { padding: 0 0 1.6rem; max-width: 62ch; color: var(--text-secondary); }
.reduced-motion .accordion-a { transition: none; }
.reduced-motion .accordion-toggle { transition: none; }

/* ---- projects.html — case-study framework + filterable grid ----
   The homepage's Section 9 stops at a card; this page adds the six-part
   case-study structure the source document specifies, shown once as the
   methodology rather than invented per project — the real narratives are
   [CLIENT] per 10-SUBPAGES-CONTENT.md §6, and an honest framework beats a
   fabricated write-up (11-SUBPAGES-PLAN.md §4, §8). */
.case-frame {
  display: grid;
  gap: var(--gap-lg) var(--gap-xl);
  margin-top: var(--gap-xl);
  border-top: 1px solid var(--border);
  padding-top: var(--gap-lg);
}
.case-frame li {
  position: relative;
  list-style: none;
  padding-top: .9rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.case-frame li.is-in { opacity: 1; transform: translateY(0); }
.reduced-motion .case-frame li { opacity: 1; transform: none; }
.case-frame li::before {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 2px;
  background: var(--pg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.case-frame li:hover::before, .case-frame li:focus-within::before { transform: scaleX(1); }
.case-frame .n { font-family: var(--font-mono); font-size: .8125rem; color: var(--uk-clay); display: block; margin-bottom: .5rem; }
.case-frame h3 { margin: 0 0 .3rem; font-weight: 400; font-size: var(--fs-body); }
.case-frame p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); font-style: italic; }
@media (min-width: 800px) { .case-frame { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .case-frame { grid-template-columns: repeat(6, 1fr); } }

.proj-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: var(--gap-xl) 0 var(--gap-lg); }
.proj-grid {
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
}
.proj-card { display: none; }
.proj-card.is-shown { display: block; animation: uk-proj-in .5s var(--ease-out); }
.reduced-motion .proj-card.is-shown { animation: none; }
@keyframes uk-proj-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.proj-card .frame { margin-bottom: 1rem; overflow: hidden; transition: transform .35s var(--ease-out), box-shadow .35s ease; }
.proj-card:hover .frame, .proj-card:focus-within .frame { transform: translateY(-4px); box-shadow: 0 14px 28px -18px rgba(63, 36, 34, .45); }
.proj-card img {
  aspect-ratio: 4/3; object-fit: cover;
  filter: grayscale(.85) contrast(1.02);
  transition: filter .5s ease, transform .5s var(--ease-out);
}
.proj-card:hover img, .proj-card:focus-within img { filter: grayscale(0) contrast(1); transform: scale(1.06); }
.reduced-motion .proj-card img { filter: none; }
.proj-cat { font-family: var(--font-mono); font-size: .8125rem; color: var(--pg-accent-text); margin: 0 0 .35rem; }
.proj-card h3 { margin: 0 0 .25rem; font-weight: 400; }
.proj-loc { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); }

@media (min-width: 700px) {
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .proj-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- about.html — values grid + team pills ----
   The one place a colour-invert hover is allowed on the whole site — every
   other hover rule in 01-DESIGN-SYSTEM.md §6 is transform-and-border only.
   About is the one page allowed a warmer, more personal register
   (11-SUBPAGES-PLAN.md §4). */
.values-grid {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: var(--gap-xl);
}
.value-tile {
  background: var(--uk-bone);
  padding: 2rem clamp(1.25rem, 3vw, 2.5rem);
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.value-tile .n { font-family: var(--font-mono); font-size: .8125rem; color: var(--uk-clay); display: block; margin-bottom: .75rem; transition: color var(--dur-base) ease; }
.value-tile h3 { margin: 0 0 .5rem; font-weight: 400; }
.value-tile p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); max-width: 36ch; transition: color var(--dur-base) ease; }
.value-tile:hover, .value-tile:focus-within {
  background: var(--uk-umber);
  color: var(--text-on-dark);
}
.value-tile:hover p, .value-tile:focus-within p { color: var(--text-on-dark); opacity: .82; }
.value-tile:hover .n, .value-tile:focus-within .n { color: var(--clay-on-dark); }

@media (min-width: 700px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }

.team-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: var(--gap-lg) 0 0;
  padding: 0;
  list-style: none;
}
/* Eight department names with nothing behind them until now — each pill
   reveals a one-line description below it on hover/focus, so the team
   section has something to say about what each group actually does. */
.team-pills li {
  position: relative;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .03em;
  border: 1px solid var(--border-strong);
  padding: .5rem .9rem;
  color: var(--uk-brown);
  cursor: default;
  transition: border-color .25s ease, background .25s ease;
}
.team-pills li:hover, .team-pills li:focus-within { border-color: var(--pg-accent); background: color-mix(in srgb, var(--pg-accent) 6%, var(--uk-bone)); }
.team-pills li::after {
  content: attr(data-detail);
  position: absolute;
  left: 0; top: calc(100% + 8px);
  width: max-content;
  max-width: 16rem;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--uk-bone);
  background: var(--uk-umber);
  padding: .55rem .8rem;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s var(--ease-out);
  z-index: 6;
}
.team-pills li:hover::after, .team-pills li:focus-within::after { opacity: 1; transform: translateY(0); }

/* "Meet Our Team ↓" — a plain in-page anchor otherwise indistinguishable
   from any other ghost button; the arrow bouncing toward what it points at
   is the one-line difference between a link and an invitation. */
.team-jump-arrow { display: inline-block; transition: transform .3s var(--ease-out); }
.team-jump:hover .team-jump-arrow, .team-jump:focus-visible .team-jump-arrow { animation: uk-jump-bounce 1s ease-in-out infinite; }
@keyframes uk-jump-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.reduced-motion .team-jump:hover .team-jump-arrow { animation: none; }

/* ---- contact.html / start-your-project.html — shared form ----
   Fields worked, but nothing on the form ever reacted to what you were
   doing — a static label, a static border, an :invalid state that would
   have shown red on every empty required field from the moment the page
   loaded. The label now leans toward the accent colour while its field
   has focus, the field itself gets a soft focus glow instead of just a
   colour-swapped border, and validation only ever shows once a field has
   actually been left (see initContactFormFeedback in subpages.js) — never
   before anyone has had a chance to type anything. */
.pg-form { display: grid; gap: 1.25rem; max-width: 640px; }
.pg-field { display: grid; gap: .4rem; }
.pg-field label {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0;
  color: var(--uk-clay);
  transition: color .25s ease;
}
.pg-field:focus-within label { color: var(--pg-accent-text); }
.pg-field input, .pg-field select, .pg-field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--uk-bone);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: .75rem .9rem;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.pg-field input:focus, .pg-field select:focus, .pg-field textarea:focus {
  outline: none;
  border-color: var(--pg-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-accent) 22%, transparent);
}
.pg-field textarea { resize: vertical; min-height: 110px; }
.pg-field input[type="file"]::file-selector-button {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0;
  color: var(--pg-accent-on-fill);
  background: var(--pg-accent);
  border: none;
  border-radius: var(--radius);
  padding: .5rem .9rem;
  margin-right: .75rem;
  cursor: pointer;
  transition: filter .2s ease;
}
.pg-field input[type="file"]::file-selector-button:hover { filter: brightness(1.08); }
/* Only ever applied after a field has been left (blur), and only to
   fields the browser considers required-but-empty or malformed — never on
   first paint. */
.pg-field.is-touched input:invalid,
.pg-field.is-touched select:invalid,
.pg-field.is-touched textarea:invalid {
  border-color: var(--uk-terracotta);
}
.pg-field.is-touched input:invalid:focus,
.pg-field.is-touched select:invalid:focus,
.pg-field.is-touched textarea:invalid:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uk-terracotta) 22%, transparent);
}
/* :has() rather than a sibling element every field would otherwise need
   just to hold this message — one rule covers all of them. */
.pg-field.is-touched:has(:invalid)::after {
  content: "Please check this field";
  font-family: var(--font-mono);
  font-size: .6875rem;
  color: var(--uk-terracotta);
}
.pg-radio-group { display: flex; flex-wrap: wrap; gap: .6rem; }
.pg-radio-group label {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  padding: .5rem .8rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.pg-radio-group label:has(:checked) { border-color: var(--pg-accent); background: color-mix(in srgb, var(--pg-accent) 8%, var(--uk-bone)); }
.pg-radio-group input { accent-color: var(--pg-accent); }
.pg-form-row { display: grid; gap: 1.25rem; }
.pg-form-note {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--uk-clay);
}

@media (min-width: 600px) {
  .pg-form-row--2 { grid-template-columns: 1fr 1fr; }
}

/* ---- start-your-project.html — horizontal stepper ----
   Shares a technique family with Process's spine (a path drawn by scroll)
   but horizontal, four nodes not seven, and it ends in a live form rather
   than a closing line — variations on a theme, not a copy
   (11-SUBPAGES-PLAN.md §4). */
.stepper-h { margin-top: var(--gap-xl); }
.stepper-h-track { height: 2px; margin: 0 0 2.5rem; }
.stepper-h-track svg { width: 100%; height: 2px; display: block; overflow: visible; }
.stepper-h-track path { fill: none; stroke: var(--border-strong); stroke-width: 2; }
/* stroke-dashoffset intentionally not set here either — same reasoning as
   .spine-draw and .hub-line-draw above. */
.stepper-h-track .stepper-draw { stroke: var(--pg-accent); }
.stepper-h-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-lg); }
/* The scroll-driven .is-active state (main.js's initStepperH) stays exactly
   as it was — this only adds that each step is ALSO a real jump-to-that-
   part-of-the-form control, on top of being a passive progress read-out.
   See initStepperJump in subpages.js. */
.stepper-h-item {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  opacity: .5;
  cursor: pointer;
  transition: opacity .35s ease, transform .25s var(--ease-out), border-color .25s ease;
}
.stepper-h-item:hover, .stepper-h-item:focus-visible { transform: translateY(-3px); border-color: var(--pg-accent); }
.stepper-h-item.is-active { opacity: 1; }
.stepper-h-node { font-family: var(--font-mono); font-size: .8125rem; color: var(--uk-clay); display: block; margin-bottom: .5rem; transition: color .35s ease; }
.stepper-h-item.is-active .stepper-h-node, .stepper-h-item:hover .stepper-h-node, .stepper-h-item:focus-visible .stepper-h-node { color: var(--pg-accent-text); }
.stepper-h-item h3 { margin: 0 0 .35rem; font-weight: 400; font-size: var(--fs-body); }
.stepper-h-item p { margin: 0; color: var(--text-secondary); font-size: var(--fs-small); }
.reduced-motion .stepper-h-item { opacity: 1 !important; }
.reduced-motion .stepper-h-item:hover, .reduced-motion .stepper-h-item:focus-visible { transform: none; }

@media (min-width: 900px) {
  .stepper-h-list { grid-template-columns: repeat(4, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════════
   INNER PAGES V2 — CONTENT-LED SPATIAL IDENTITIES
   A shared architectural grammar (Manrope, drawing rules, material colour,
   honest imagery) with a different spatial metaphor on every page.
   ════════════════════════════════════════════════════════════════════════ */

body.subpage[data-page] {
  --pg-ink: var(--uk-umber);
  --pg-paper: var(--uk-bone);
  background: var(--pg-paper);
}

body.subpage[data-page] main { overflow: clip; }

.uk-page-progress {
  position: fixed;
  z-index: 1001;
  inset: 0 0 auto;
  height: 2px;
  pointer-events: none;
}

.uk-page-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--pg-accent);
  transform: scaleX(var(--page-progress, 0));
  transform-origin: left;
}

.pg-hero {
  --hero-x: 0;
  --hero-y: 0;
  isolation: isolate;
  position: relative;
  min-height: min(900px, 92svh);
  display: grid;
  align-items: center;
  padding-block: clamp(8rem, 13vw, 11rem) clamp(4.5rem, 8vw, 7.5rem);
  background: var(--pg-paper);
  overflow: hidden;
}

.pg-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: .46;
  background-image:
    linear-gradient(90deg, transparent calc(100% - 1px), color-mix(in srgb, var(--uk-brown) 16%, transparent) 0),
    linear-gradient(transparent calc(100% - 1px), color-mix(in srgb, var(--uk-brown) 12%, transparent) 0);
  background-size: clamp(44px, 6vw, 88px) clamp(44px, 6vw, 88px);
  -webkit-mask-image: linear-gradient(100deg, #000, transparent 72%);
  mask-image: linear-gradient(100deg, #000, transparent 72%);
}

.pg-hero > .container,
.pg-hero-inner { position: relative; z-index: 2; }

.pg-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.65rem, 5.6vw, 6.7rem);
  line-height: .94;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.pg-hero .lead {
  max-width: 57ch;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.65;
}

.pg-hero .lead + .lead { margin-top: .7rem; }

.pg-hero-media {
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--uk-sandstone);
  box-shadow: 0 34px 90px -48px rgba(63, 36, 34, .65);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px));
  transform: translate3d(calc(var(--hero-x) * -8px), calc(var(--hero-y) * -8px), 0);
  transition: transform .7s var(--ease-out);
}

.pg-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(250, 247, 242, .26);
  background: linear-gradient(135deg, rgba(250,247,242,.1), transparent 35%, rgba(63,36,34,.18));
}

.pg-hero-media img { width: 100%; height: 100%; min-height: 360px; }

.uk-page-id {
  position: absolute;
  z-index: 3;
  right: max(1.2rem, calc((100vw - var(--container)) / 2));
  bottom: 1.35rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  color: var(--uk-clay);
  font-family: var(--font-mono);
  font-size: 0.884rem;
  letter-spacing: 0;
}

.uk-page-id span { color: var(--pg-accent-text); }
.uk-page-id i { display: block; width: clamp(2rem, 5vw, 5rem); height: 1px; background: currentColor; opacity: .55; }
.uk-page-id b { font: inherit; }

.pg-section { position: relative; }
.pg-section > .container { position: relative; z-index: 1; }

.pg-section:nth-of-type(even)::before {
  content: "";
  position: absolute;
  top: clamp(2rem, 6vw, 6rem);
  right: 0;
  width: clamp(70px, 12vw, 180px);
  height: 1px;
  background: var(--pg-accent);
  opacity: .55;
}

.pg-head { display: grid; gap: .7rem; }
.pg-head h2 { font-size: clamp(2rem, 4.3vw, 4.8rem); line-height: 1; letter-spacing: -.012em; text-wrap: balance; }
.pg-head .eyebrow { margin-bottom: 0; }

.uk-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .9s var(--ease-out); }
.uk-reveal.uk-inview, .reduced-motion .uk-reveal { opacity: 1; transform: none; }

.pg-cta {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 25%, rgba(200,129,28,.15), transparent 26rem),
    var(--uk-umber);
}

.pg-cta::before {
  content: "";
  position: absolute;
  inset: 1.2rem;
  border: 1px solid rgba(250,247,242,.12);
  border-radius: 999px 0 999px 0;
  pointer-events: none;
}

/* Heroes with generated spatial artwork */
body[data-page="construction"] .pg-hero,
body[data-page="why"] .pg-hero,
body[data-page="process"] .pg-hero,
body[data-page="project-management"] .pg-hero,
body[data-page="start"] .pg-hero {
  color: var(--uk-bone);
  background: var(--uk-umber);
}

body[data-page="construction"] .pg-hero::before,
body[data-page="why"] .pg-hero::before,
body[data-page="process"] .pg-hero::before,
body[data-page="project-management"] .pg-hero::before,
body[data-page="start"] .pg-hero::before { opacity: .18; }

body[data-page="construction"] .pg-hero .lead,
body[data-page="why"] .pg-hero .lead,
body[data-page="process"] .pg-hero .lead,
body[data-page="project-management"] .pg-hero .lead,
body[data-page="start"] .pg-hero .lead { color: rgba(250,247,242,.78); }

body[data-page="construction"] .pg-hero h1,
body[data-page="why"] .pg-hero h1,
body[data-page="process"] .pg-hero h1,
body[data-page="project-management"] .pg-hero h1,
body[data-page="start"] .pg-hero h1,
body[data-page="construction"] .pg-hero strong,
body[data-page="why"] .pg-hero strong,
body[data-page="process"] .pg-hero strong,
body[data-page="project-management"] .pg-hero strong,
body[data-page="start"] .pg-hero strong { color: var(--uk-bone); }

body[data-page="construction"] .pg-hero .eyebrow,
body[data-page="why"] .pg-hero .eyebrow,
body[data-page="process"] .pg-hero .eyebrow,
body[data-page="project-management"] .pg-hero .eyebrow,
body[data-page="start"] .pg-hero .eyebrow { color: var(--ochre-on-dark); }

body[data-page="construction"] .pg-hero .pg-crumb,
body[data-page="why"] .pg-hero .pg-crumb,
body[data-page="process"] .pg-hero .pg-crumb,
body[data-page="project-management"] .pg-hero .pg-crumb,
body[data-page="start"] .pg-hero .pg-crumb { color: var(--clay-on-dark); }

body[data-page="construction"] .pg-hero .pg-crumb .is-current,
body[data-page="why"] .pg-hero .pg-crumb .is-current,
body[data-page="process"] .pg-hero .pg-crumb .is-current,
body[data-page="project-management"] .pg-hero .pg-crumb .is-current,
body[data-page="start"] .pg-hero .pg-crumb .is-current { color: var(--uk-bone); }

body[data-page="construction"] .site-header:not(.is-stuck),
body[data-page="why"] .site-header:not(.is-stuck),
body[data-page="process"] .site-header:not(.is-stuck),
body[data-page="project-management"] .site-header:not(.is-stuck),
body[data-page="start"] .site-header:not(.is-stuck) { --hdr-ink: var(--text-on-dark); --hdr-mark-dark: 0; }

/* 01 — Services: one continuous working surface */
body[data-page="services"] { --pg-accent: var(--uk-ochre); }
body[data-page="services"] .pg-hero { background: #eadfce; }
body[data-page="services"] .pg-hero-media { clip-path: none; }
body[data-page="services"] .pg-hero-media img { aspect-ratio: 21/9; }
body[data-page="services"] .svc-rows { perspective: 1100px; }
body[data-page="services"] .svc-row {
  min-height: 9rem;
  padding-inline: clamp(.4rem, 2vw, 1.5rem);
  transform-origin: center top;
  background: var(--uk-bone);
  transition: transform .45s var(--ease-out), background .3s ease, padding .3s ease;
}
body[data-page="services"] .svc-row:nth-child(even) { background: color-mix(in srgb, var(--uk-sandstone) 38%, var(--uk-bone)); }
body[data-page="services"] .svc-row:hover { transform: rotateX(-2deg) translateZ(12px); background: #fffdf8; }

/* 02 — Design: exploded model over a drawing sheet */
body[data-page="design"] { --pg-accent: var(--uk-terracotta); }
body[data-page="design"] .pg-hero { background: #f2ece1; }
body[data-page="design"] .pg-hero::after {
  content: "A  /  E  /  I";
  position: absolute;
  left: max(1.2rem, calc((100vw - var(--container)) / 2));
  bottom: 1.25rem;
  font: .66rem var(--font-mono);
  letter-spacing: .45em;
  color: var(--uk-terracotta);
}
body[data-page="design"] .dsn-topics { box-shadow: 16px 16px 0 color-mix(in srgb, var(--uk-terracotta) 12%, transparent); }
body[data-page="design"] .dsn-topic { background: rgba(250,247,242,.72); backdrop-filter: blur(7px); }
body[data-page="design"] .pg-scope { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border); }
body[data-page="design"] .pg-scope li { padding-inline: 1.2rem; }

/* 03 — Construction: a live programme, not a brochure */
body[data-page="construction"] { --pg-accent: var(--uk-ochre); }
body[data-page="construction"] .pg-hero-media img { filter: saturate(.72) contrast(1.04); }
body[data-page="construction"] .gantt {
  padding: clamp(1rem, 3vw, 2.5rem);
  background: var(--uk-umber);
  color: var(--uk-bone);
  box-shadow: 18px 18px 0 var(--uk-sandstone);
}
body[data-page="construction"] .gantt-track { background: rgba(250,247,242,.16); }
body[data-page="construction"] .gantt-phase { border-color: rgba(250,247,242,.2); }
body[data-page="construction"] .gantt-phase ul { color: rgba(250,247,242,.64); }
body[data-page="construction"] .gantt-phase li:hover { color: var(--uk-bone); }
body[data-page="construction"] .trade-marquee { transform: rotate(-1.2deg) scale(1.02); }

/* 04 — Renovations: a material cut through time */
body[data-page="renovations"] { --pg-accent: var(--uk-terracotta); }
body[data-page="renovations"] .pg-hero { background: linear-gradient(90deg, #ded1bf 0 48%, #f7f0e7 48%); }
body[data-page="renovations"] .pg-hero::after {
  content: "EXISTING  /  INTERVENTION  /  RENEWED";
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font: .66rem var(--font-mono); letter-spacing: .16em; color: var(--uk-terracotta);
}
body[data-page="renovations"] .ba-slider { box-shadow: 24px 24px 0 color-mix(in srgb, var(--uk-terracotta) 15%, transparent); }
body[data-page="renovations"] .reveal-word { border-radius: 999px; padding: .35rem .7rem; background: rgba(250,247,242,.72); }

/* 05 — Master planning: stacked land systems */
body[data-page="master-planning"] { --pg-accent: var(--uk-brown); }
body[data-page="master-planning"] .pg-hero { background: #e5dccd; }
body[data-page="master-planning"] .layer-stage {
  background: #f6f0e7;
  box-shadow: 0 34px 70px -50px var(--uk-umber);
  transform: perspective(1000px) rotateX(2deg);
}
body[data-page="master-planning"] .layer-chip { border-radius: 0; border-left-width: 4px; }

/* 06 — Projects: an editorial project ledger */
body[data-page="projects"] { --pg-accent: var(--uk-terracotta); }
body[data-page="projects"] .pg-hero { min-height: 80svh; background: #f4efe7; }
body[data-page="projects"] .case-frame { gap: 1px; background: var(--border); border: 1px solid var(--border); }
body[data-page="projects"] .case-frame li { background: var(--uk-bone); border: 0; min-height: 12rem; }
body[data-page="projects"] .proj-grid { gap: clamp(1.5rem, 4vw, 4rem) clamp(1rem, 2.5vw, 2.5rem); }
body[data-page="projects"] .proj-card:nth-child(even) { margin-top: clamp(0rem, 7vw, 7rem); }
body[data-page="projects"] .proj-card img { aspect-ratio: 4/5; }

/* 07 — Why Urbankriti: six materials, one doorway */
body[data-page="why"] { --pg-accent: var(--uk-clay); }
body[data-page="why"] .pg-hero-media { border-radius: 48% 48% 0 0; clip-path: none; }
body[data-page="why"] .pg-hero-media img { aspect-ratio: 4/5; }
body[data-page="why"] .pillars { gap: 0; border-top: 1px solid var(--border); }
body[data-page="why"] .pillar { min-height: 15rem; padding: 2rem; border: 1px solid var(--border); border-top: 0; background: var(--uk-bone); }
body[data-page="why"] .pillar:nth-child(3n + 2) { background: color-mix(in srgb, var(--uk-sandstone) 46%, var(--uk-bone)); }

/* 08 — Process: seven thresholds down one spatial corridor */
body[data-page="process"] { --pg-accent: var(--uk-ochre); }
body[data-page="process"] .spine-wrap { max-width: 62rem; margin-inline: auto; }
body[data-page="process"] .spine-step { min-height: 16rem; padding-left: clamp(5rem, 12vw, 12rem); }
body[data-page="process"] .spine-step::after {
  content: ""; position: absolute; left: clamp(3.9rem, 9vw, 9rem); top: 1rem;
  width: clamp(2rem, 6vw, 6rem); height: clamp(5rem, 10vw, 9rem);
  border: 1px solid color-mix(in srgb, var(--uk-clay) 54%, transparent); border-bottom: 0;
  border-radius: 999px 999px 0 0; opacity: .55; pointer-events: none;
}
body[data-page="process"] .spine-step.is-active::after { border-color: var(--pg-accent); opacity: 1; box-shadow: inset 0 0 36px rgba(200,129,28,.08); }

/* 09 — Quality: inspection lightbox and evidence register */
body[data-page="quality"] { --pg-accent: var(--uk-ochre); }
body[data-page="quality"] .pg-hero { min-height: 72svh; background: #f7f4ed; }
body[data-page="quality"] .pg-hero-media { transform: rotate(-1deg); box-shadow: 24px 24px 0 var(--uk-sandstone); }
body[data-page="quality"] .qtabs { border: 1px solid var(--border); background: #fffdf9; padding: clamp(1rem, 3vw, 2.5rem); }
body[data-page="quality"] .qtab-panel li { grid-template-columns: auto 1fr minmax(90px, 18%); gap: 1rem; }
body[data-page="quality"] .qtab-photo { aspect-ratio: 4/3; }

/* 10 — Project management: the coordination table */
body[data-page="project-management"] { --pg-accent: var(--uk-ochre); }
body[data-page="project-management"] .hub-wrap {
  padding: clamp(1rem, 3vw, 3rem);
  background: radial-gradient(circle, #f8f0e1, #e1d0b5);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--border), 0 25px 50px -40px var(--uk-umber);
}
body[data-page="project-management"] .hub-functions { gap: 1px; background: var(--border); }
body[data-page="project-management"] .hub-functions li { background: var(--uk-bone); min-height: 11rem; padding: 1.25rem; }

/* 11 — FAQ: a searchable project decision index */
body[data-page="faq"] { --pg-accent: var(--uk-brown); }
body[data-page="faq"] .pg-hero { min-height: 66svh; padding-bottom: 4rem; }
.faq-tools { max-width: 52rem; margin: 0 auto clamp(2rem, 5vw, 4.5rem); }
.faq-tools label { display: block; margin-bottom: .65rem; font: 0.9rem var(--font-mono); letter-spacing: 0; color: var(--uk-clay); }
.faq-search-wrap { position: relative; }
.faq-search-wrap input {
  width: 100%; border: 0; border-bottom: 2px solid var(--uk-brown); border-radius: 0;
  padding: .85rem 3rem .85rem 0; background: transparent; color: var(--uk-umber);
  font: 400 clamp(1.15rem, 2.3vw, 1.8rem)/1.3 var(--font-display);
}
.faq-search-wrap input:focus { outline: none; border-color: var(--pg-accent); }
.faq-search-wrap span { position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); font-size: 2rem; color: var(--uk-clay); }
.faq-result { min-height: 1.4em; margin: .6rem 0 0; color: var(--uk-clay); font: .75rem var(--font-mono); }
body[data-page="faq"] .accordion { max-width: 62rem; margin-inline: auto; }
body[data-page="faq"] .accordion-item { border: 1px solid var(--border); border-bottom: 0; padding-inline: clamp(1rem, 2vw, 1.7rem); background: var(--uk-bone); }
body[data-page="faq"] .accordion-item:last-child { border-bottom: 1px solid var(--border); }

/* 12 — About: a field practice assembled from material values */
body[data-page="about"] { --pg-accent: var(--uk-terracotta); }
body[data-page="about"] .pg-hero { min-height: 76svh; background: #eadfce; }
body[data-page="about"] .values-grid { gap: 0; border: 1px solid var(--border); }
body[data-page="about"] .value-tile { min-height: 15rem; padding: 1.4rem; border: 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
body[data-page="about"] .value-tile:nth-child(1) { background: #e6d4b9; }
body[data-page="about"] .value-tile:nth-child(2) { background: #f1e7d8; }
body[data-page="about"] .value-tile:nth-child(3) { background: #d9c0a4; }
body[data-page="about"] .value-tile:nth-child(4) { background: #ead7c6; }
body[data-page="about"] .value-tile:nth-child(5) { background: #e0c8b2; }
body[data-page="about"] .value-tile:nth-child(6) { background: #f5eee4; }
body[data-page="about"] #team .frame { clip-path: polygon(0 0, 93% 0, 100% 18%, 100% 100%, 7% 100%, 0 82%); }

/* 13 — Insights: a warm editorial wall */
body[data-page="insights"] { --pg-accent: var(--uk-terracotta); }
body[data-page="insights"] .pg-hero { min-height: 70svh; background: #f4efe7; }
body[data-page="insights"] .ins-card { padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
body[data-page="insights"] .ins-card--lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, .7fr); column-gap: clamp(1rem, 4vw, 4rem); align-items: end; }
body[data-page="insights"] .ins-card--lead .frame { grid-row: 1 / span 5; }
body[data-page="insights"] .ins-card--lead .ins-cat { align-self: end; }

/* 14 — Contact: an open conversation desk */
body[data-page="contact"] { --pg-accent: var(--uk-brown); }

/* 15 — Start: four calm decisions, one guided brief */
body[data-page="start"] { --pg-accent: var(--uk-ochre); }
body[data-page="start"] .stepper-h-list { gap: 1px; background: rgba(63,36,34,.16); }
body[data-page="start"] .stepper-h-item { min-height: 11rem; padding: 1.2rem; background: var(--uk-bone); border: 0; }
body[data-page="start"] .stepper-h-item.is-active { background: var(--uk-sandstone); }
body[data-page="start"] .pg-form { padding: clamp(1rem, 4vw, 3.5rem); background: #fffdf8; border: 1px solid var(--border); box-shadow: 20px 20px 0 rgba(176,133,96,.14); }

/* Code-native hero signatures for pages that do not need photography */
.uk-signature { position: absolute; z-index: 0; right: -3vw; top: 50%; width: min(44vw, 620px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; opacity: .88; }
.uk-signature span { position: absolute; display: block; border: 1px solid color-mix(in srgb, var(--uk-clay) 58%, transparent); }
.uk-signature--projects span { inset: calc(var(--i, 0) * 6%); transform: rotate(calc(var(--i, 0) * 5deg)); }
.uk-signature--projects span:nth-child(1) { --i: 1; } .uk-signature--projects span:nth-child(2) { --i: 2; } .uk-signature--projects span:nth-child(3) { --i: 3; } .uk-signature--projects span:nth-child(4) { --i: 4; } .uk-signature--projects span:nth-child(5) { --i: 5; } .uk-signature--projects span:nth-child(6) { --i: 6; }
.uk-signature--faq span { inset: calc(var(--i, 0) * 7%); border-radius: 50% 50% 0 0; border-bottom: 0; }
.uk-signature--faq span:nth-child(1) { --i: 1; } .uk-signature--faq span:nth-child(2) { --i: 2; } .uk-signature--faq span:nth-child(3) { --i: 3; } .uk-signature--faq span:nth-child(4) { --i: 4; } .uk-signature--faq span:nth-child(5) { --i: 5; } .uk-signature--faq span:nth-child(6) { --i: 6; }
.uk-signature--about span { width: 34%; height: 34%; background: color-mix(in srgb, var(--uk-terracotta) 12%, transparent); }
.uk-signature--about span:nth-child(1) { left: 0; top: 0; }
.uk-signature--about span:nth-child(2) { left: 33%; top: 0; background-color: rgba(126,50,57,.15); }
.uk-signature--about span:nth-child(3) { left: 66%; top: 0; background-color: rgba(176,133,96,.17); }
.uk-signature--about span:nth-child(4) { left: 0; top: 34%; background-color: rgba(200,129,28,.12); }
.uk-signature--about span:nth-child(5) { left: 33%; top: 34%; background-color: rgba(92,58,33,.12); }
.uk-signature--about span:nth-child(6) { left: 66%; top: 34%; background-color: rgba(126,50,57,.1); }
.uk-signature--insights span { width: 42%; height: 58%; transform: rotate(calc((var(--i) - 3) * 5deg)); transform-origin: bottom; left: calc(var(--i) * 7%); bottom: 12%; background: rgba(250,247,242,.45); }
.uk-signature--insights span:nth-child(1) { --i: 1; } .uk-signature--insights span:nth-child(2) { --i: 2; } .uk-signature--insights span:nth-child(3) { --i: 3; } .uk-signature--insights span:nth-child(4) { --i: 4; } .uk-signature--insights span:nth-child(5) { --i: 5; } .uk-signature--insights span:nth-child(6) { --i: 6; }

@media (min-width: 900px) {
  .pg-hero-inner { grid-template-columns: minmax(0, .92fr) minmax(28rem, 1.08fr); gap: clamp(2.5rem, 5vw, 7rem); }
  .pg-hero-media img { min-height: 540px; }

  body[data-page="services"] .pg-hero-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  body[data-page="services"] .pg-hero-inner > :first-child { grid-column: 1 / 7; z-index: 2; padding-block: 2rem; }
  body[data-page="services"] .pg-hero-media { grid-column: 5 / 13; grid-row: 1; align-self: stretch; opacity: .92; }
  body[data-page="services"] .pg-hero-media::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, #eadfce 0, rgba(234,223,206,.9) 18%, transparent 55%); }

  body[data-page="renovations"] .pg-hero-inner,
  body[data-page="construction"] .pg-hero-inner,
  body[data-page="start"] .pg-hero-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  body[data-page="renovations"] .pg-hero-inner > :first-child,
  body[data-page="construction"] .pg-hero-inner > :first-child,
  body[data-page="start"] .pg-hero-inner > :first-child { grid-column: 1 / 7; z-index: 2; padding: 2rem 0; }
  body[data-page="renovations"] .pg-hero-media,
  body[data-page="construction"] .pg-hero-media,
  body[data-page="start"] .pg-hero-media { grid-column: 6 / 13; grid-row: 1; }

  body[data-page="why"] .pg-hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(24rem, .75fr); }
  body[data-page="why"] .pg-hero-media { max-height: 720px; }
}

@media (max-width: 899px) {
  .pg-hero { min-height: auto; }
  .pg-hero h1 { font-size: clamp(2.7rem, 11vw, 5rem); }
  .pg-hero-media img { min-height: 280px; }
  .uk-signature { width: 65vw; opacity: .25; }
  body[data-page="design"] .pg-scope { grid-template-columns: 1fr; }
  body[data-page="insights"] .ins-card--lead { display: block; }
  body[data-page="projects"] .proj-card:nth-child(even) { margin-top: 0; }
}

@media (max-width: 599px) {
  .uk-page-id { right: 1rem; }
  .uk-page-id b, .uk-page-id i { display: none; }
  .pg-hero::before { background-size: 44px 44px; }
  .pg-hero-media { clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
  body[data-page="renovations"] .pg-hero::after { display: none; }
  body[data-page="quality"] .qtab-panel li { grid-template-columns: auto 1fr; }
  body[data-page="quality"] .qtab-photo { grid-column: 2; width: 100%; max-width: 180px; }
  body[data-page="process"] .spine-step::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-hero-media, .svc-row { transform: none !important; transition: none !important; }
}

/* ======================================================================
   INNER PAGES V3 — APPROVED COMPOSITION SYSTEM
   The homepage does not load this file. These rules deliberately scope
   every override to body.subpage[data-page] so the approved homepage is
   physically isolated from the redesign.
   ====================================================================== */

body.subpage[data-page] {
  --v3-gutter: clamp(1.25rem, 5vw, 5rem);
  --v3-section: clamp(4.75rem, 9vw, 8.5rem);
  --v3-rule: color-mix(in srgb, var(--uk-brown) 18%, transparent);
  --v3-muted: color-mix(in srgb, var(--uk-umber) 72%, var(--uk-bone));
}

body.subpage[data-page] main { overflow: clip; }

body.subpage[data-page] .pg-hero {
  min-height: clamp(680px, 88svh, 920px);
  padding-block: clamp(7.75rem, 11vw, 10rem) clamp(4rem, 7vw, 6.5rem);
  align-items: center;
}

body.subpage[data-page] .pg-hero::before {
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  background: none;
}

body.subpage[data-page] .pg-hero-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

body.subpage[data-page] .pg-hero-inner > :first-child {
  grid-column: 1 / 6;
  grid-row: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}

body.subpage[data-page] .pg-hero-media {
  grid-column: 6 / 13;
  grid-row: 1;
  min-width: 0;
  clip-path: none;
  transform: none;
  transition: none;
  box-shadow: none;
}

body.subpage[data-page] .pg-hero-media::after { box-shadow: inset 0 0 0 1px rgba(250,247,242,.2); }
body.subpage[data-page] .pg-hero-media img { min-height: 0; object-fit: cover; }

body.subpage[data-page] .pg-hero h1 {
  max-width: 13ch;
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
  font-size: clamp(2.75rem, 5.2vw, 5.9rem);
  line-height: .98;
  letter-spacing: -.012em;
  text-wrap: balance;
}

body.subpage[data-page] .pg-hero .lead {
  max-width: 52ch;
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.62;
}

body.subpage[data-page] .pg-hero .lead + .lead { margin-top: .8rem; }
body.subpage[data-page] .pg-crumb { flex-wrap: wrap; line-height: 1.45; }

body.subpage[data-page] .pg-section { padding-block: var(--v3-section); }
body.subpage[data-page] .pg-section:nth-of-type(even)::before { display: none; }

body.subpage[data-page] .pg-head {
  max-width: 68rem;
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

body.subpage[data-page] .pg-head h2 {
  max-width: 22ch;
  font-size: clamp(2rem, 4vw, 4.35rem);
  line-height: 1.04;
  letter-spacing: -.012em;
}

body.subpage[data-page] .pg-head .lead { max-width: 58ch; }

body.subpage[data-page] .uk-page-id {
  right: var(--v3-gutter);
  bottom: 1.25rem;
}

body.subpage[data-page] .pg-cta::before {
  inset: clamp(1rem, 2.5vw, 2rem);
  border-radius: 0;
  border-color: rgba(250,247,242,.13);
}

/* 01 — Services / the architect's project table */
body.subpage[data-page="services"] .pg-hero {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--uk-bone) 96%, transparent) 0 39%, transparent 58%),
    var(--uk-sandstone);
}

body.subpage[data-page="services"] .pg-hero::before {
  inset: auto 4vw 7% 40%;
  border: 1px solid color-mix(in srgb, var(--uk-brown) 24%, transparent);
  background:
    linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--uk-brown) 12%, transparent) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, color-mix(in srgb, var(--uk-brown) 12%, transparent) 50%, transparent 50.2%);
}

body.subpage[data-page="services"] .pg-hero-inner > :first-child { grid-column: 1 / 7; padding-block: 2rem; }
body.subpage[data-page="services"] .pg-hero-media { grid-column: 5 / 13; align-self: stretch; }
body.subpage[data-page="services"] .pg-hero-media img { height: 100%; min-height: 560px; aspect-ratio: auto; filter: saturate(.82) contrast(1.04); }
body.subpage[data-page="services"] .pg-hero-media::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, var(--uk-sandstone), color-mix(in srgb, var(--uk-sandstone) 82%, transparent) 18%, transparent 52%);
}

body.subpage[data-page="services"] .svc-preview { display: none; }
body.subpage[data-page="services"] .svc-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--v3-rule);
  background: var(--v3-rule);
  perspective: none;
}
body.subpage[data-page="services"] .svc-row,
body.subpage[data-page="services"] .svc-row:nth-child(even) {
  min-height: clamp(15rem, 23vw, 22rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-content: space-between;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 0;
  background: var(--uk-bone);
  transform: none;
}
body.subpage[data-page="services"] .svc-row:nth-child(2) { background: color-mix(in srgb, var(--uk-clay) 22%, var(--uk-bone)); }
body.subpage[data-page="services"] .svc-row:nth-child(3) { background: color-mix(in srgb, var(--uk-terracotta) 8%, var(--uk-bone)); }
body.subpage[data-page="services"] .svc-row:nth-child(4) { background: color-mix(in srgb, var(--uk-sandstone) 64%, var(--uk-bone)); }
body.subpage[data-page="services"] .svc-row:hover,
body.subpage[data-page="services"] .svc-row:focus-visible { transform: none; background: #fffdf8; padding-left: clamp(1.25rem, 3vw, 2.5rem); }
body.subpage[data-page="services"] .svc-row:hover .svc-row-arrow,
body.subpage[data-page="services"] .svc-row:focus-visible .svc-row-arrow { transform: translateY(-3px); }
body.subpage[data-page="services"] .svc-row-desc { grid-column: 2 / 4; max-width: 34ch; align-self: end; }

/* 02 — Design / exploded drawing set */
body.subpage[data-page="design"] .pg-hero { background: var(--uk-sandstone); }
body.subpage[data-page="design"] .pg-hero::before {
  inset: 0 0 0 47%;
  background:
    repeating-linear-gradient(0deg, transparent 0 43px, color-mix(in srgb, var(--uk-terracotta) 10%, transparent) 44px),
    repeating-linear-gradient(90deg, transparent 0 43px, color-mix(in srgb, var(--uk-terracotta) 10%, transparent) 44px),
    color-mix(in srgb, var(--uk-bone) 42%, transparent);
}
body.subpage[data-page="design"] .pg-hero-inner > :first-child { grid-column: 1 / 5; }
body.subpage[data-page="design"] .pg-hero-media { grid-column: 5 / 13; padding: clamp(.75rem, 1.5vw, 1.4rem); border: 1px solid var(--uk-brown); background: rgba(250,247,242,.72); }
body.subpage[data-page="design"] .pg-hero-media img { aspect-ratio: 16/11; filter: saturate(.72); }
body.subpage[data-page="design"] .dsn-topics { box-shadow: none; border: 1px solid var(--v3-rule); }
body.subpage[data-page="design"] .dsn-topic { min-height: 18rem; background: var(--uk-bone); backdrop-filter: none; }
body.subpage[data-page="design"] .dsn-topic:nth-child(2),
body.subpage[data-page="design"] .dsn-topic:nth-child(3) { background: color-mix(in srgb, var(--uk-sandstone) 48%, var(--uk-bone)); }
body.subpage[data-page="design"] .pg-scope { column-gap: 0; }
body.subpage[data-page="design"] .pg-scope li:nth-child(odd) { border-right: 1px solid var(--v3-rule); }

/* 03 — Construction / cutaway programme */
body.subpage[data-page="construction"] .pg-hero { background: var(--uk-umber); }
body.subpage[data-page="construction"] .pg-hero::before {
  inset: 8% 0 0 44%;
  background:
    linear-gradient(90deg, rgba(250,247,242,.08) 1px, transparent 1px) 0 0 / 17% 100%,
    linear-gradient(rgba(250,247,242,.08) 1px, transparent 1px) 0 0 / 100% 22%;
}
body.subpage[data-page="construction"] .pg-hero-inner > :first-child { grid-column: 8 / 13; grid-row: 1; }
body.subpage[data-page="construction"] .pg-hero-media { grid-column: 1 / 8; grid-row: 1; border-left: 1px solid rgba(250,247,242,.2); border-bottom: 1px solid rgba(250,247,242,.2); }
body.subpage[data-page="construction"] .pg-hero-media img { height: min(66svh, 650px); aspect-ratio: 4/5; filter: saturate(.58) contrast(1.08); }
body.subpage[data-page="construction"] .gantt { box-shadow: 18px 18px 0 color-mix(in srgb, var(--uk-ochre) 12%, var(--uk-sandstone)); }
body.subpage[data-page="construction"] .trade-marquee { transform: none; border-block-color: color-mix(in srgb, var(--uk-ochre) 46%, transparent); }

/* 04 — Renovations / diagnostic survey */
body.subpage[data-page="renovations"] .pg-hero { background: var(--uk-clay); }
body.subpage[data-page="renovations"] .pg-hero::before {
  inset: 0 57% 0 0;
  background: color-mix(in srgb, var(--uk-umber) 86%, transparent);
}
body.subpage[data-page="renovations"] .pg-hero-inner > :first-child { grid-column: 1 / 6; padding: clamp(1.5rem, 3vw, 3rem); color: var(--uk-bone); }
body.subpage[data-page="renovations"] .pg-hero h1 { color: var(--uk-bone); }
body.subpage[data-page="renovations"] .pg-hero .lead { color: rgba(250,247,242,.78); }
body.subpage[data-page="renovations"] .pg-hero .eyebrow,
body.subpage[data-page="renovations"] .pg-hero .pg-crumb { color: var(--clay-on-dark); }
body.subpage[data-page="renovations"] .pg-hero .pg-crumb .is-current { color: var(--uk-bone); }
body.subpage[data-page="renovations"] .pg-hero-media { grid-column: 5 / 13; height: min(68svh, 660px); }
body.subpage[data-page="renovations"] .pg-hero-media img { height: 100%; aspect-ratio: auto; filter: saturate(.72); }
body.subpage[data-page="renovations"] .pg-hero-media::after { background: linear-gradient(90deg, rgba(63,36,34,.38), transparent 34%); }
body.subpage[data-page="renovations"] .ba-slider { box-shadow: 20px 20px 0 color-mix(in srgb, var(--uk-terracotta) 16%, transparent); }
body.subpage[data-page="renovations"] .ba-handle-grip { width: 66px; height: 66px; border-radius: 50%; background: var(--uk-bone); }
body.subpage[data-page="renovations"] .reveal-word { border-radius: 0; background: transparent; padding: .2rem .1rem; }

/* 05 — Master planning / living terrain */
body.subpage[data-page="master-planning"] .pg-hero { background: var(--uk-bone); }
body.subpage[data-page="master-planning"] .pg-hero::before {
  inset: -20% -5% -20% 48%;
  opacity: .7;
  background: repeating-radial-gradient(ellipse at 70% 48%, transparent 0 34px, color-mix(in srgb, var(--uk-brown) 16%, transparent) 35px 36px);
  transform: rotate(-9deg);
}
body.subpage[data-page="master-planning"] .pg-hero-inner > :first-child { grid-column: 1 / 6; align-self: start; padding-top: 4rem; }
body.subpage[data-page="master-planning"] .pg-hero-media { grid-column: 6 / 13; transform: perspective(1100px) rotateX(4deg) rotateZ(-1.2deg); border: 1px solid var(--v3-rule); background: var(--uk-sandstone); }
body.subpage[data-page="master-planning"] .pg-hero-media img { min-height: 540px; }
body.subpage[data-page="master-planning"] .layer-plan { display: grid; grid-template-columns: minmax(13rem, .34fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
body.subpage[data-page="master-planning"] .layer-chips { display: grid; align-content: start; }
body.subpage[data-page="master-planning"] .layer-chip { width: 100%; justify-content: flex-start; padding-block: 1rem; border-width: 0 0 1px 4px; }
body.subpage[data-page="master-planning"] .layer-stage { margin: 0; transform: perspective(1000px) rotateX(2deg); }

/* 06 — Projects / curated exhibition */
body.subpage[data-page="projects"] .pg-hero { min-height: 78svh; background: var(--uk-bone); }
body.subpage[data-page="projects"] .pg-hero > .container { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
body.subpage[data-page="projects"] .pg-hero > .container > * { grid-column: 1 / 7; }
body.subpage[data-page="projects"] .uk-signature { right: 2vw; width: min(48vw, 680px); }
body.subpage[data-page="projects"] .uk-signature--projects span { background: var(--uk-sandstone); border-color: var(--uk-brown); box-shadow: 0 18px 50px -34px var(--uk-umber); }
body.subpage[data-page="projects"] .uk-signature--projects span:nth-child(1) { background: url("/assets/img/s9-1.webp") center / cover; }
body.subpage[data-page="projects"] .uk-signature--projects span:nth-child(2) { background: url("/assets/img/s9-2.webp") center / cover; }
body.subpage[data-page="projects"] .uk-signature--projects span:nth-child(3) { background: url("/assets/img/s9-3.webp") center / cover; }
body.subpage[data-page="projects"] .uk-signature--projects span:nth-child(4) { background: url("/assets/img/s9-4.webp") center / cover; }
body.subpage[data-page="projects"] .uk-signature--projects span:nth-child(5) { background: url("/assets/img/s9-5.webp") center / cover; }
body.subpage[data-page="projects"] .uk-signature--projects span:nth-child(6) { background: color-mix(in srgb, var(--uk-terracotta) 18%, var(--uk-sandstone)); }
body.subpage[data-page="projects"] .case-frame { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
body.subpage[data-page="projects"] .case-frame li { min-height: 14rem; padding: 1.5rem; border-right: 1px solid var(--v3-rule); }
body.subpage[data-page="projects"] .proj-filters .layer-chip { min-height: 44px; }
body.subpage[data-page="projects"] .proj-grid { display: block; }
body.subpage[data-page="projects"] .proj-card.is-shown {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(14rem, .45fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: end;
  margin: 0 0 clamp(3rem, 8vw, 8rem);
}
body.subpage[data-page="projects"] .proj-card:nth-child(even) { margin-top: 0; }
body.subpage[data-page="projects"] .proj-card .frame { grid-row: 1 / span 3; margin: 0; }
body.subpage[data-page="projects"] .proj-card img { aspect-ratio: 16/10; filter: none; }
body.subpage[data-page="projects"] .proj-card:nth-child(even) .frame { grid-column: 2; }
body.subpage[data-page="projects"] .proj-card:nth-child(even) > :not(.frame) { grid-column: 1; }

/* 07 — Why / evidence dossier */
body.subpage[data-page="why"] .pg-hero { background: var(--uk-sandstone); color: var(--uk-umber); }
body.subpage[data-page="why"] .pg-hero::before { inset: 8% 3% 6% 52%; border: 1px solid color-mix(in srgb, var(--uk-brown) 30%, transparent); background: rgba(250,247,242,.26); transform: rotate(1.4deg); }
body.subpage[data-page="why"] .pg-hero h1,
body.subpage[data-page="why"] .pg-hero strong { color: var(--uk-umber); }
body.subpage[data-page="why"] .pg-hero .lead { color: var(--v3-muted); }
body.subpage[data-page="why"] .pg-hero .eyebrow,
body.subpage[data-page="why"] .pg-hero .pg-crumb { color: var(--uk-clay); }
body.subpage[data-page="why"] .pg-hero .pg-crumb .is-current { color: var(--uk-brown); }
body.subpage[data-page="why"] .pg-hero-inner > :first-child { grid-column: 1 / 7; }
body.subpage[data-page="why"] .pg-hero-media { grid-column: 8 / 13; max-height: 680px; border-radius: 0; padding: 1rem; background: var(--uk-bone); border: 1px solid var(--uk-brown); transform: rotate(-1.2deg); }
body.subpage[data-page="why"] .pg-hero-media img { aspect-ratio: 4/5; }
body.subpage[data-page="why"] .pillars { display: block; border-top: 1px solid var(--v3-rule); }
body.subpage[data-page="why"] .pillar,
body.subpage[data-page="why"] .pillar:nth-child(3n + 2) {
  min-height: 0;
  display: grid;
  grid-template-columns: 4rem minmax(12rem, .55fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.75rem) 0;
  border: 0;
  border-bottom: 1px solid var(--v3-rule);
  background: transparent;
}
body.subpage[data-page="why"] .pillar-head { display: contents; }
body.subpage[data-page="why"] .pillar-icon { display: none; }
body.subpage[data-page="why"] .pillar h3 { margin: 0; }

/* 08 — Process / project passport */
body.subpage[data-page="process"] .pg-hero { background: var(--uk-umber); }
body.subpage[data-page="process"] .pg-hero::before {
  inset: 10% 4% 7% 49%;
  border: 1px solid rgba(250,247,242,.18);
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(250,247,242,.18) 50%, transparent 50.2%),
    linear-gradient(145deg, rgba(200,129,28,.12), transparent 50%);
}
body.subpage[data-page="process"] .pg-hero-media { border: 1px solid rgba(250,247,242,.18); padding: 1rem; background: rgba(250,247,242,.05); }
body.subpage[data-page="process"] .pg-hero-media img { aspect-ratio: 16/11; filter: sepia(.12) saturate(.72); }
body.subpage[data-page="process"] .spine-wrap { max-width: 72rem; }
body.subpage[data-page="process"] .spine-line { display: none; }
body.subpage[data-page="process"] .spine-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--v3-rule); background: var(--uk-sandstone); }
body.subpage[data-page="process"] .spine-step {
  min-height: 20rem;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 0;
  background: var(--uk-bone);
  box-shadow: inset -1px -1px 0 var(--v3-rule);
}
body.subpage[data-page="process"] .spine-step:nth-child(4n + 2),
body.subpage[data-page="process"] .spine-step:nth-child(4n + 3) { background: color-mix(in srgb, var(--uk-sandstone) 42%, var(--uk-bone)); }
body.subpage[data-page="process"] .spine-step::after { inset: auto 1.5rem 1.5rem auto; width: 4.5rem; height: 4.5rem; border: 1px solid var(--uk-clay); border-radius: 50%; opacity: .32; }
body.subpage[data-page="process"] .spine-step.is-active::after { border-color: var(--uk-ochre); box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--uk-ochre) 10%, transparent); }
body.subpage[data-page="process"] .spine-step-node { position: static; margin-bottom: 3rem; }

/* 09 — Quality / construction microscope */
body.subpage[data-page="quality"] .pg-hero { min-height: 76svh; background: var(--uk-umber); color: var(--uk-bone); }
body.subpage[data-page="quality"] .pg-hero::before { inset: 0 0 0 64%; background: color-mix(in srgb, var(--uk-terracotta) 10%, transparent); }
body.subpage[data-page="quality"] .pg-hero-inner > :first-child { grid-column: 8 / 13; grid-row: 1; }
body.subpage[data-page="quality"] .pg-hero-media { grid-column: 1 / 8; grid-row: 1; transform: none; box-shadow: none; }
body.subpage[data-page="quality"] .pg-hero-media img { height: min(62svh, 600px); aspect-ratio: 16/10; filter: contrast(1.08) saturate(.58); }
body.subpage[data-page="quality"] .pg-hero h1 { color: var(--uk-bone); }
body.subpage[data-page="quality"] .pg-hero .lead { color: rgba(250,247,242,.75); }
body.subpage[data-page="quality"] .pg-hero .eyebrow,
body.subpage[data-page="quality"] .pg-hero .pg-crumb { color: var(--clay-on-dark); }
body.subpage[data-page="quality"] .pg-hero .pg-crumb .is-current { color: var(--uk-bone); }
body.subpage[data-page="quality"] .qtabs { padding: 0; border: 0; background: transparent; }
body.subpage[data-page="quality"] .qtabs-list { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--v3-rule); }
body.subpage[data-page="quality"] .qtab { min-height: 5.5rem; padding: 1rem; border-right: 1px solid var(--v3-rule); text-align: left; }
body.subpage[data-page="quality"] .qtabs-indicator { display: none; }
body.subpage[data-page="quality"] .qtab.is-active { background: var(--uk-umber); color: var(--uk-bone); }
body.subpage[data-page="quality"] .qtab-panel li { grid-template-columns: 3.25rem minmax(0, 1fr) minmax(180px, 30%); min-height: 10rem; }
body.subpage[data-page="quality"] .qtab-photo { aspect-ratio: 16/9; }

/* 10 — Project management / coordination console */
body.subpage[data-page="project-management"] .pg-hero { background: var(--uk-umber); }
body.subpage[data-page="project-management"] .pg-hero::before {
  inset: 12% 4% 8% 47%;
  border: 1px solid rgba(250,247,242,.14);
  background:
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(250,247,242,.08) 55px),
    linear-gradient(90deg, rgba(200,129,28,.1), transparent 32%);
}
body.subpage[data-page="project-management"] .pg-hero-inner > :first-child { grid-column: 7 / 13; grid-row: 1; }
body.subpage[data-page="project-management"] .pg-hero-media { grid-column: 1 / 7; grid-row: 1; border: 1px solid rgba(250,247,242,.16); }
body.subpage[data-page="project-management"] .pg-hero-media img { aspect-ratio: 1; filter: saturate(.55) contrast(1.06); }
body.subpage[data-page="project-management"] .hub-wrap { display: none; }
body.subpage[data-page="project-management"] .hub-functions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 0;
  padding: 1px;
  background: var(--uk-umber);
}
body.subpage[data-page="project-management"] .hub-functions li {
  min-height: 14rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--uk-bone);
  border: 0;
}
body.subpage[data-page="project-management"] .hub-functions li::after {
  content: "INPUT  /  DECISION  /  OUTPUT";
  display: block;
  margin-top: 1.5rem;
  color: var(--uk-clay);
  font: .65rem var(--font-mono);
  letter-spacing: .08em;
}

/* 11 — FAQ / decision path */
body.subpage[data-page="faq"] .pg-hero { min-height: 70svh; background: var(--uk-bone); }
body.subpage[data-page="faq"] .pg-hero > .container { max-width: 62rem; margin-inline: var(--v3-gutter) auto; }
body.subpage[data-page="faq"] .uk-signature { right: 4vw; width: min(44vw, 630px); opacity: .55; }
body.subpage[data-page="faq"] .uk-signature--faq span { border-color: color-mix(in srgb, var(--uk-terracotta) 42%, transparent); border-radius: 50% 50% 0 0; }
.faq-topic-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; max-width: 72rem; margin: 0 auto clamp(2rem, 5vw, 4.5rem); background: var(--v3-rule); border: 1px solid var(--v3-rule); }
.faq-topic-nav button { min-height: 5.5rem; padding: .85rem; border: 0; background: var(--uk-bone); color: var(--uk-brown); font: .72rem/1.35 var(--font-mono); cursor: pointer; }
.faq-topic-nav button[aria-pressed="true"] { background: var(--uk-terracotta); color: var(--uk-bone); }
body.subpage[data-page="faq"] .faq-tools { max-width: 72rem; }
body.subpage[data-page="faq"] .accordion { max-width: 72rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--v3-rule); border: 0; }
body.subpage[data-page="faq"] .accordion-item,
body.subpage[data-page="faq"] .accordion-item:last-child { border: 0; padding-inline: 1.25rem; background: var(--uk-bone); }
body.subpage[data-page="faq"] .accordion-q { min-height: 8.5rem; align-items: flex-start; font-size: clamp(1.1rem, 1.8vw, 1.42rem); }
body.subpage[data-page="faq"] .accordion-item[data-open="true"] { grid-column: 1 / -1; background: var(--uk-sandstone); }

/* 12 — About / studio almanac */
body.subpage[data-page="about"] .pg-hero { min-height: 78svh; background: var(--uk-sandstone); }
body.subpage[data-page="about"] .pg-hero > .container { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2vw, 2rem); }
body.subpage[data-page="about"] .pg-hero > .container > * { grid-column: 1 / 7; }
body.subpage[data-page="about"] .uk-signature { right: 3vw; width: min(43vw, 610px); display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
body.subpage[data-page="about"] .uk-signature--about span { position: relative; inset: auto !important; width: auto; height: auto; aspect-ratio: 4/5; border: 1px solid var(--uk-brown); }
body.subpage[data-page="about"] .uk-signature--about span:nth-child(even) { transform: translateY(2rem); }
body.subpage[data-page="about"] .uk-signature--about span:nth-child(1) { background: url("/assets/img/s10-team.webp") center / cover; }
body.subpage[data-page="about"] .uk-signature--about span:nth-child(2) { background: url("/assets/img/s2-about.webp") center / cover; }
body.subpage[data-page="about"] .uk-signature--about span:nth-child(3) { background: url("/assets/img/s2-about-detail.webp") center / cover; }
body.subpage[data-page="about"] .uk-signature--about span:nth-child(4) { background: url("/assets/img/s3-design.webp") center / cover; }
body.subpage[data-page="about"] .uk-signature--about span:nth-child(5) { background: url("/assets/img/s3-construction.webp") center / cover; }
body.subpage[data-page="about"] .uk-signature--about span:nth-child(6) { background: url("/assets/img/s3-planning.webp") center / cover; }
body.subpage[data-page="about"] .values-grid { display: block; border-top: 1px solid var(--v3-rule); }
body.subpage[data-page="about"] .value-tile,
body.subpage[data-page="about"] .value-tile:nth-child(n) {
  min-height: 0;
  display: grid;
  grid-template-columns: 4rem minmax(12rem, .45fr) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
  border: 0;
  border-bottom: 1px solid var(--v3-rule);
  background: transparent;
  color: var(--uk-umber);
}
body.subpage[data-page="about"] .value-tile:hover,
body.subpage[data-page="about"] .value-tile:focus-within { background: transparent; color: var(--uk-umber); }
body.subpage[data-page="about"] .value-tile:hover p,
body.subpage[data-page="about"] .value-tile:focus-within p { color: var(--text-secondary); opacity: 1; }

/* 13 — Insights / reading room */
body.subpage[data-page="insights"] .pg-hero { min-height: 76svh; background: var(--uk-umber); color: var(--uk-bone); }
body.subpage[data-page="insights"] .pg-hero > .container { max-width: 64rem; margin-inline: var(--v3-gutter) auto; }
body.subpage[data-page="insights"] .pg-hero h1 { color: var(--uk-bone); }
body.subpage[data-page="insights"] .pg-hero .lead { color: rgba(250,247,242,.74); }
body.subpage[data-page="insights"] .pg-hero .eyebrow,
body.subpage[data-page="insights"] .pg-hero .pg-crumb { color: var(--clay-on-dark); }
body.subpage[data-page="insights"] .pg-hero .pg-crumb .is-current { color: var(--uk-bone); }
body.subpage[data-page="insights"] .uk-signature { right: 1vw; opacity: .72; }
body.subpage[data-page="insights"] .uk-signature--insights span { border-color: rgba(250,247,242,.28); background: color-mix(in srgb, var(--uk-sandstone) 72%, var(--uk-umber)); }
body.subpage[data-page="insights"] .ins-chips { max-width: 46rem; }
body.subpage[data-page="insights"] .ins-chips .layer-chip { color: var(--uk-bone); border-color: rgba(250,247,242,.26); background: transparent; }
body.subpage[data-page="insights"] .ins-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); }
body.subpage[data-page="insights"] .ins-card--lead { grid-column: 1 / -1; }
body.subpage[data-page="insights"] .ins-card:not(.ins-card--lead) { grid-column: span 6; }
body.subpage[data-page="insights"] .ins-card { border-bottom: 0; }
body.subpage[data-page="insights"] .ins-card:not(.ins-card--lead) .frame { aspect-ratio: 16/9; }

/* ── About / Insights / Contact — client hero photography ──────────────
   These three heroes shipped with no media, so the reskin laid each one out
   as a single text column and subpages.shared.js dropped an abstract
   .uk-signature into the space on the right. That injector already skips a
   hero containing a .pg-hero-media, so supplying a real image retires the
   signature on its own. What it cannot do is place the image: About's own
   `> *` rule sends every child to 1 / 7, and Insights and Contact cap their
   container at 64rem — both correct for one column, both wrong now there
   are two. Same 1 / 7 + 8 / 13 rhythm the other media heroes use.

   Both halves are written against the reskin's own 900px hero breakpoint
   rather than left to the cascade, because these three pages each carry an
   unconditional single-column rule of their own that outranks the shared
   stacking rules — About's 12-column `.pg-hero > .container` in particular
   would otherwise keep the image beside the headline on a phone. */
@media (min-width: 900px) {
  body.subpage[data-page="about"] .pg-hero > .container.pg-hero-inner > .pg-hero-media { grid-column: 8 / 13; }

  body.subpage[data-page="insights"] .pg-hero > .container.pg-hero-inner { max-width: none; margin-inline: auto; }
  body.subpage[data-page="insights"] .pg-hero-inner > :first-child { grid-column: 1 / 7; }
  body.subpage[data-page="insights"] .pg-hero-media { grid-column: 8 / 13; }
}

@media (max-width: 899px) {
  body.subpage[data-page="about"] .pg-hero > .container.pg-hero-inner { grid-template-columns: 1fr; }
  body.subpage[data-page="about"] .pg-hero > .container.pg-hero-inner > *,
  body.subpage[data-page="insights"] .pg-hero-inner > * { grid-column: 1 / -1; }
}

/* Insights' hero is umber, so its frame reads as a window cut into the dark
   rather than a card laid on the light. */
body.subpage[data-page="insights"] .pg-hero-media::after { box-shadow: inset 0 0 0 1px rgba(250,247,242,.22); }

/* 15 — Start / project brief composer */
body.subpage[data-page="start"] .pg-hero { background: var(--uk-sandstone); color: var(--uk-umber); }
body.subpage[data-page="start"] .pg-hero::before {
  inset: 7% 3% 6% 51%;
  background:
    linear-gradient(var(--uk-brown), var(--uk-brown)) 10% 14% / 44% 1px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 54px, color-mix(in srgb, var(--uk-brown) 15%, transparent) 55px),
    var(--uk-bone);
  border: 1px solid var(--uk-brown);
  transform: rotate(1.2deg);
}
body.subpage[data-page="start"] .pg-hero h1,
body.subpage[data-page="start"] .pg-hero strong { color: var(--uk-umber); }
body.subpage[data-page="start"] .pg-hero .lead { color: var(--v3-muted); }
body.subpage[data-page="start"] .pg-hero .eyebrow,
body.subpage[data-page="start"] .pg-hero .pg-crumb { color: var(--uk-clay); }
body.subpage[data-page="start"] .pg-hero .pg-crumb .is-current { color: var(--uk-brown); }
body.subpage[data-page="start"] .pg-hero-inner > :first-child { grid-column: 1 / 6; }
body.subpage[data-page="start"] .pg-hero-media { grid-column: 7 / 13; padding: 1rem; border: 1px solid var(--uk-brown); background: var(--uk-bone); transform: rotate(-1deg); }
body.subpage[data-page="start"] .pg-hero-media img { aspect-ratio: 4/3; }
body.subpage[data-page="start"] .stepper-h-track { display: none; }
body.subpage[data-page="start"] .stepper-h-list { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--v3-rule); }
body.subpage[data-page="start"] .stepper-h-item { min-height: 15rem; display: flex; flex-direction: column; justify-content: space-between; }
body.subpage[data-page="start"] .pg-form { max-width: 72rem; box-shadow: 18px 18px 0 color-mix(in srgb, var(--uk-clay) 14%, transparent); }

body.subpage[data-page="construction"] .site-header:not(.is-stuck),
body.subpage[data-page="renovations"] .site-header:not(.is-stuck),
body.subpage[data-page="process"] .site-header:not(.is-stuck),
body.subpage[data-page="quality"] .site-header:not(.is-stuck),
body.subpage[data-page="project-management"] .site-header:not(.is-stuck) { --hdr-ink: var(--text-on-dark); --hdr-mark-dark: 0; }

/* Insights used to open on an umber hero, which is why it sat in the list
   above. Its hero is now the cream editorial hero (see the EDITORIAL HERO
   block at the foot of this file), so cream header ink over it was cream on
   cream. The page's own [data-nav-theme] regions drive the ink now, the way
   they do on every other light-hero page. */

body.subpage[data-page="why"] .site-header:not(.is-stuck),
body.subpage[data-page="start"] .site-header:not(.is-stuck) { --hdr-ink: var(--uk-umber); --hdr-mark-dark: 1; }

/* Controlled responsive reflow: content remains in normal document order. */
@media (max-width: 1099px) {
  body.subpage[data-page] .pg-hero { min-height: auto; }
  body.subpage[data-page] .pg-hero-inner > :first-child { grid-column: 1 / 7; }
  body.subpage[data-page] .pg-hero-media { grid-column: 7 / 13; }
  body.subpage[data-page="construction"] .pg-hero-inner > :first-child,
  body.subpage[data-page="quality"] .pg-hero-inner > :first-child,
  body.subpage[data-page="project-management"] .pg-hero-inner > :first-child { grid-column: 7 / 13; }
  body.subpage[data-page="construction"] .pg-hero-media,
  body.subpage[data-page="quality"] .pg-hero-media,
  body.subpage[data-page="project-management"] .pg-hero-media { grid-column: 1 / 7; }
  body.subpage[data-page="projects"] .case-frame { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  body.subpage[data-page] .pg-hero { padding-top: 7.5rem; }
  body.subpage[data-page] .pg-hero-inner { display: grid; grid-template-columns: 1fr; }
  body.subpage[data-page] .pg-hero-inner > :first-child,
  body.subpage[data-page] .pg-hero-media,
  body.subpage[data-page="construction"] .pg-hero-inner > :first-child,
  body.subpage[data-page="construction"] .pg-hero-media,
  body.subpage[data-page="quality"] .pg-hero-inner > :first-child,
  body.subpage[data-page="quality"] .pg-hero-media,
  body.subpage[data-page="project-management"] .pg-hero-inner > :first-child,
  body.subpage[data-page="project-management"] .pg-hero-media { grid-column: 1; grid-row: auto; }
  body.subpage[data-page] .pg-hero h1 { max-width: 15ch; font-size: clamp(2.55rem, 10vw, 4.8rem); }
  body.subpage[data-page] .pg-hero-media img { width: 100%; height: auto; min-height: 0; aspect-ratio: 16/10; }
  body.subpage[data-page="services"] .pg-hero-inner > :first-child,
  body.subpage[data-page="renovations"] .pg-hero-inner > :first-child { grid-column: 1; padding: 0; }
  body.subpage[data-page="services"] .pg-hero-media,
  body.subpage[data-page="renovations"] .pg-hero-media { grid-column: 1; height: auto; }
  body.subpage[data-page="services"] .pg-hero-media img,
  body.subpage[data-page="renovations"] .pg-hero-media img { min-height: 0; height: auto; }
  body.subpage[data-page="renovations"] .pg-hero::before { inset: 0; background: var(--uk-umber); }
  body.subpage[data-page="master-planning"] .layer-plan { grid-template-columns: 1fr; }
  body.subpage[data-page="master-planning"] .layer-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.subpage[data-page="projects"] .uk-signature,
  body.subpage[data-page="faq"] .uk-signature,
  body.subpage[data-page="about"] .uk-signature,
  body.subpage[data-page="insights"] .uk-signature { opacity: .14; right: -20vw; }
  body.subpage[data-page="projects"] .pg-hero > .container,
  body.subpage[data-page="about"] .pg-hero > .container { display: block; }
  body.subpage[data-page="process"] .spine-steps { grid-template-columns: 1fr; }
  body.subpage[data-page="quality"] .qtabs-list { grid-template-columns: repeat(2, 1fr); }
  body.subpage[data-page="project-management"] .hub-functions { grid-template-columns: 1fr; }
  body.subpage[data-page="faq"] .accordion { grid-template-columns: 1fr; }
  .faq-topic-nav { grid-template-columns: repeat(2, 1fr); }
  body.subpage[data-page="about"] .value-tile,
  body.subpage[data-page="why"] .pillar { grid-template-columns: 3rem 1fr; }
  body.subpage[data-page="about"] .value-tile p,
  body.subpage[data-page="why"] .pillar p { grid-column: 2; }
  body.subpage[data-page="insights"] .ins-grid { display: block; }
  body.subpage[data-page="insights"] .ins-card { margin-bottom: 3rem; }
  body.subpage[data-page="start"] .stepper-h-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  body.subpage[data-page] .pg-hero { padding-block: 11rem 4.5rem; }
  body.subpage[data-page] .pg-crumb { display: none; }
  body.subpage[data-page] .pg-hero .lead { font-size: 1rem; }
  body.subpage[data-page="services"] .svc-rows { grid-template-columns: 1fr; }
  body.subpage[data-page="services"] .svc-row { min-height: 13rem; }
  body.subpage[data-page="design"] .pg-scope li:nth-child(odd) { border-right: 0; }
  body.subpage[data-page="construction"] .pg-hero-media img,
  body.subpage[data-page="quality"] .pg-hero-media img { height: auto; }
  body.subpage[data-page="master-planning"] .layer-chips { grid-template-columns: 1fr; }
  body.subpage[data-page="projects"] .case-frame { grid-template-columns: 1fr; }
  body.subpage[data-page="projects"] .proj-card.is-shown { display: block; }
  body.subpage[data-page="projects"] .proj-card .frame { margin-bottom: 1rem; }
  body.subpage[data-page="why"] .pillar,
  body.subpage[data-page="about"] .value-tile { grid-template-columns: 2.5rem 1fr; gap: .75rem; }
  body.subpage[data-page="quality"] .qtabs-list { grid-template-columns: 1fr; }
  body.subpage[data-page="quality"] .qtab { min-height: 3.5rem; border-right: 0; border-bottom: 1px solid var(--v3-rule); }
  body.subpage[data-page="quality"] .qtab-panel li { grid-template-columns: 2.5rem 1fr; }
  body.subpage[data-page="quality"] .qtab-photo { grid-column: 1 / -1; width: 100%; max-width: none; }
  .faq-topic-nav { grid-template-columns: 1fr; }
  .faq-topic-nav button { min-height: 3.5rem; text-align: left; }
  body.subpage[data-page="start"] .stepper-h-list { grid-template-columns: 1fr; }
  body.subpage[data-page="start"] .stepper-h-item { min-height: 10rem; }
}

@media (prefers-reduced-motion: reduce) {
  body.subpage[data-page] .pg-hero-media,
  body.subpage[data-page] .uk-signature,
  body.subpage[data-page] .uk-signature span { transform: none !important; transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   EDITORIAL HERO — ported from 21st.dev
     hero-05  https://21st.dev/@felipemenezes098/components/hero-05
     hero-07  https://21st.dev/@felipemenezes098/components/hero-07

   The two components are the same hero with the media on opposite sides of
   the copy: hero-05 runs copy → full-bleed band, hero-07 runs full-bleed
   band → copy. Both share one grid, so they share one block here rather
   than one per page; --uk-eh-order is what flips them.

   Structure carried over verbatim from the source:
     section  .bg-background relative isolate w-full overflow-hidden
     copy     grid max-w-7xl grid-cols-1 px-6 lg:grid-cols-12, gap-10
     tagline  lg:col-span-4 lg:col-start-1   (hero-05 items-end / hero-07 items-start)
     header   lg:col-span-6 lg:col-start-7, gap-6 sm:gap-8
     media    aspect-[2/1] sm:aspect-[9/4], object-cover, edge mask
   Padding is the components' `standard` variant, converted to the site's
   own --pad-section rhythm so these heroes sit in the same vertical metre
   as every other section rather than importing Tailwind's scale.

   Deliberately NOT carrying .pg-hero: subpages.shared.js's initV2Identity
   rewrites [data-nav-theme] on any .pg-hero it finds (forcing Insights to
   'dark', which would put cream header ink on a cream hero) and injects a
   .uk-signature abstract graphic into heroes without a .pg-hero-media. Both
   are wrong for this family, so these three pages author their own nav
   theme and carry their own real photograph instead.
   ════════════════════════════════════════════════════════════════════════ */
.uk-eh {
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  background: var(--uk-bone);
  display: flex;
  flex-direction: column;
}
/* hero-05: copy first, band below. hero-07: band first, copy below. */
.uk-eh--05 .uk-eh-media { order: 2; }
.uk-eh--05 .uk-eh-copy   { order: 1; padding-top: calc(var(--pad-section) * .62 + var(--hdr-safe)); padding-bottom: calc(var(--pad-section) * .34); }
.uk-eh--07 .uk-eh-media { order: 1; }
.uk-eh--07 .uk-eh-copy   { order: 2; padding-block: calc(var(--pad-section) * .48); }

.uk-eh-copy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-page);
}

/* the component's left tagline — max-w-xs, muted, tight tracking */
.uk-eh-tagline {
  max-width: 24rem;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 1.65;
  letter-spacing: -.005em;
  margin: 0;
}
.uk-eh--05 .uk-eh-tagline { align-self: end; }
.uk-eh--07 .uk-eh-tagline { align-self: start; }

.uk-eh-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-md); }
.uk-eh-head h1 {
  margin: 0;
  max-width: 18ch;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h1, clamp(2.1rem, min(5.2vw, 6.4vh), 3.9rem));
  line-height: 1.08;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--text-primary);
}
.uk-eh-lead { margin: 0; max-width: 46ch; color: var(--text-secondary); font-size: var(--fs-lead); line-height: 1.6; }
.uk-eh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }

/* the component's media block: full-bleed, cover-cropped, masked at the
   edge that meets the copy (mask-t on hero-05, mask-b on hero-07). */
.uk-eh-media { position: relative; width: 100%; overflow: hidden; }
.uk-eh-media img {
  width: 100%;
  /* height:auto is load-bearing, not tidiness: every image on these pages
     carries width/height attributes (correctly — they reserve the space),
     and the height attribute maps to a presentational height that beats
     aspect-ratio, since aspect-ratio only drives a dimension the box has
     left auto. Without this the band renders at the image's intrinsic
     height instead of 2/1. */
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: 50% 50%;
  outline: 1px solid rgba(92, 58, 33, .12);
  outline-offset: -1px;
}
.uk-eh--05 .uk-eh-media {
  -webkit-mask-image: linear-gradient(to top, #000 80%, rgba(0,0,0,.35) 95%, transparent 100%);
          mask-image: linear-gradient(to top, #000 80%, rgba(0,0,0,.35) 95%, transparent 100%);
}
.uk-eh--07 .uk-eh-media {
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, rgba(0,0,0,.35) 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 80%, rgba(0,0,0,.35) 95%, transparent 100%);
}
/* The component's own `bg-background/15 mix-blend-overlay` scrim. On
   hero-07 it does a second job the component never needed: the fixed
   header sits over the photograph there, so the top of the band is
   graded down far enough for cream header ink to stay legible over any
   image the client supplies. */
.uk-eh-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: color-mix(in srgb, var(--uk-bone) 15%, transparent);
  mix-blend-mode: overlay;
}
.uk-eh--07 .uk-eh-media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--hdr-safe) + 9rem);
  z-index: 2;
  pointer-events: none;
  /* Deepened in the atmosphere refinement: at .58 over a short band the
     cream nav ink still fought the About facade (jaali, bright ceiling
     grid). Now held near .8 across the whole header band, then released. */
  background: linear-gradient(to bottom, rgba(45, 26, 24, .82), rgba(45, 26, 24, .7) 45%, rgba(45, 26, 24, .28) 78%, rgba(45, 26, 24, 0));
}

@media (min-width: 640px) {
  .uk-eh-media img { aspect-ratio: 9 / 4; }
}

@media (min-width: 1024px) {
  .uk-eh-copy { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-lg); }
  .uk-eh-tagline-col { grid-column: 1 / span 4; display: flex; }
  .uk-eh--05 .uk-eh-tagline-col { align-items: flex-end; }
  .uk-eh--07 .uk-eh-tagline-col { align-items: flex-start; }
  .uk-eh-head { grid-column: 7 / span 6; gap: var(--gap-md); }
}

/* Entrance: the components' staggered blur-up, at the site's own weight.
   Static in the DOM first, so with JS off or reduced motion on, the hero
   is simply already there. */
@media (prefers-reduced-motion: no-preference) {
  .uk-eh-copy > *, .uk-eh-media { animation: uk-eh-rise .5s var(--ease-out) both; }
  .uk-eh-copy > *:nth-child(2) { animation-delay: .1s; }
  .uk-eh--05 .uk-eh-media { animation-delay: .18s; }
}
@keyframes uk-eh-rise {
  from { opacity: 0; transform: translateY(12px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT / INSIGHTS / CONTACT — page styles, held HERE rather than in each
   page's own stylesheet.

   WHY THEY MOVED (this is the fix for "plain text rows" and "huge image
   blocks under the header"): src/shared/scripts/router.js does a
   client-side navigation between these pages by fetching the target and
   swapping <main>'s innerHTML. It never touches <head>, so the target
   page's own <link rel="stylesheet"> is NEVER loaded. Landing on /about/
   directly looked right; reaching it from /projects/ rendered the page
   with global.css + this file only — which is precisely the reported
   failure:

     • Insights  the index's cursor-preview images lost `position: fixed`
                 and stacked full-width under the header, and its rows fell
                 back to unstyled text. (That index has since been replaced
                 by the .ins-notes grid; the failure it caused is why these
                 styles live here.)
     • About     .uk-spine-stack lost its `display: none` / sticky frame,
                 so four more full-size images stacked below the hero.
     • Contact   the details column's photograph lost its aspect crop and
                 the 1:2 corridor rendered at full column width.

   router.js is out of scope to change, and it is loaded on every one of
   these pages, so the only correct place for styles these pages cannot
   render without is a stylesheet that is always present. Each page's own
   .css file is now a stub pointing here.
   ════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   ABOUT
   ─────────────────────────────────────────────────────────────────────── */

/* about-main.webp is near square (1500×1425) and the hero-07 band is 9/4,
   so a centred crop would take the sky and the kerb and drop the building.
   Pulled down to sit the two lit floors in the band. */
.uk-eh--about .uk-eh-media img { object-position: 50% 56%; }

/* ---- studio statement ---- */
.ab-statement { display: grid; gap: var(--gap-md); max-width: 68rem; }
.ab-statement h2 { max-width: 20ch; }
.ab-statement-body { display: grid; gap: 1rem; max-width: 62ch; }

.ab-aims {
  display: grid;
  gap: var(--gap-md);
  margin-top: var(--gap-md);
  padding-top: var(--gap-md);
  border-top: 1px solid var(--border);
}
.ab-aims dt {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: 0;
  color: var(--pg-accent-text);
  margin-bottom: .5rem;
}
.ab-aims dd { margin: 0; max-width: 46ch; color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.65; }

@media (min-width: 800px) {
  .ab-aims { grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }
}

/* ════════════════════════════════════════════════════════════════════════
   SCROLL 01 — ported from 21st.dev/@felipemenezes098/components/scroll-01

   The component is two layouts behind one media query:

   • below md   — a plain stack: each step renders heading, copy, then its
                  own image (`h-72 w-full rounded-2xl object-cover`).
   • md and up  — `grid md:grid-cols-2 gap-10`. Left is `sticky top-20
                  max-h-[70vh] rounded-2xl overflow-hidden` with every image
                  absolutely stacked inside it, only the active one at
                  opacity 1 (150ms linear cross-fade). Right is `py-[35vh]`
                  with `space-y-[30vh]` between steps; each step is scrubbed
                  by its own scroll progress over the offset
                  ["start 90%", "end 15%"] — y from 20px to -20px and
                  opacity through [0, 0.3, 0.7, 1] → [0, .7, 1, 0] (the
                  first step starting at 1, not 0) — and claims the sticky
                  image while its progress sits between .4 and .6.

   Everything above is reproduced; the scrub and the active-step handoff
   are computed in about.js. Only the skin is ours: square corners instead
   of rounded-2xl, and the site's left-aligned type instead of the
   component's centred text, so the steps sit in the same column rhythm as
   the rest of the page.
   ════════════════════════════════════════════════════════════════════════ */

/* The section was flat --uk-sandstone edge to edge, which read as one dead
   beige slab between two cream ones. Same palette, but graded: it arrives
   out of the cream above it, holds sandstone through the middle where the
   steps are, and settles back toward cream before the CTA. */
.uk-spine-section.pg-section--sand {
  background:
    linear-gradient(
      180deg,
      var(--uk-bone) 0,
      color-mix(in srgb, var(--uk-sandstone) 55%, var(--uk-bone)) 10%,
      var(--uk-sandstone) 38%,
      var(--uk-sandstone) 76%,
      color-mix(in srgb, var(--uk-sandstone) 45%, var(--uk-bone)) 100%
    );
}

.uk-spine { display: grid; gap: var(--gap-xl); }

/* --- the component's below-md stack --- */
.uk-spine-stack { display: none; }
.uk-spine-track { display: grid; gap: var(--gap-xl); }
.uk-spine-step { display: grid; gap: .75rem; justify-items: start; }
.uk-spine-n {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .16em;
  color: var(--pg-accent-text);
}
.uk-spine-step h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h3);
  letter-spacing: -.01em;
  color: var(--text-primary);
}
.uk-spine-step p { margin: 0; max-width: 48ch; color: var(--text-secondary); font-size: var(--fs-small); line-height: 1.7; }
.uk-spine-inline {
  width: 100%;
  height: 18rem;                      /* the component's h-72 */
  object-fit: cover;
  margin-top: .5rem;
  border: 1px solid var(--border);
}

@media (min-width: 900px) {
  /* --- the component's md:grid-cols-2 layout --- */
  .uk-spine {
    position: relative;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
    align-items: start;
  }
  /* A single hairline down the gutter. The two halves were floating side
     by side with nothing holding them to each other; this is the same
     thin walnut rule the rest of the family uses, doing the joining. */
  .uk-spine::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: linear-gradient(
      180deg,
      transparent 0,
      var(--border) 12%,
      var(--border) 88%,
      transparent 100%
    );
    pointer-events: none;
  }

  .uk-spine-stack {
    display: block;
    position: sticky;
    top: calc(var(--hdr-safe) + 2rem);   /* the component's sticky top-20 */
    height: 70vh;                        /* max-h-[70vh] */
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--uk-bone);
    /* lifts the frame off the sandstone instead of sitting flush in it */
    box-shadow: 0 26px 60px -34px rgba(63, 36, 34, .5);
  }
  .uk-spine-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .15s linear;     /* duration .15 ease linear */
    will-change: opacity;
  }
  .uk-spine-img.is-active { opacity: 1; }

  .uk-spine-inline { display: none; }

  .uk-spine-track { padding-block: 35vh; gap: 30vh; }
  .uk-spine-step { will-change: opacity, transform; }
}

/* The scrub is a transform and an opacity applied from script. With
   reduced motion the steps simply stay put and fully legible, and the
   sticky image still swaps — the component's own no-animation state. */
@media (prefers-reduced-motion: reduce) {
  .uk-spine-step { opacity: 1 !important; transform: none !important; }
}

/* ---- About's closing CTA ----
   Was the shared .pg-cta: a full-width Umber band, centred, sitting
   directly on top of the Umber footer — two dark slabs in a row, and the
   same block every Services page ends on. This is About's own: it stays
   on the page's cream, is set on the same left column as everything above
   it, and is separated from the footer by a single copper rule rather
   than by a change of ground. */
.ab-cta { background: var(--uk-bone); padding-block: var(--v3-section); }
.ab-cta-inner {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  max-width: 46rem;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
}
/* the short copper tick that starts the rule */
.ab-cta-inner::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: clamp(3rem, 8vw, 5.5rem);
  height: 2px;
  background: var(--pg-accent);
}
.ab-cta h2 {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--text-primary);
  text-wrap: balance;
}
.ab-cta-note { margin: 0; max-width: 52ch; color: var(--text-secondary); font-size: var(--fs-lead); line-height: 1.6; }
.ab-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-top: .6rem;
}

/* ───────────────────────────────────────────────────────────────────────
   INSIGHTS
   ─────────────────────────────────────────────────────────────────────── */

/* insights-main.webp is a tall interior (1400×2087) and the hero-07 band is
   9/4, so only about a fifth of the picture's height survives the crop. The
   upper third is pale marble panelling, which at band height reads as an
   empty cream strip — the band is dropped to the lit floor of the room
   instead: sconces, curtain, seating and the stone floor, which is the part
   of the photograph that carries the room.

   That floor is also the brightest part of the picture, and hero-07 puts the
   header over the band, so the component's ink-protection scrim is deepened
   here — cream nav ink has to clear white marble, not dusk brick the way it
   does on About. */
.uk-eh--insights .uk-eh-media img { object-position: 50% 86%; }
.uk-eh--insights .uk-eh-media::before {
  height: calc(var(--hdr-safe) + 9rem);
  background: linear-gradient(to bottom, rgba(45, 26, 24, .82), rgba(45, 26, 24, .7) 45%, rgba(45, 26, 24, .28) 78%, rgba(45, 26, 24, 0));
}

/* ---- last-resort mobile guard for this family ----
   Nothing on these three pages may push the document sideways on a phone. */
@media (max-width: 640px) {
  body.subpage[data-page="about"],
  body.subpage[data-page="insights"] { overflow-x: hidden; }
}

/* ---- About's hero band under the floating header ----
   hero-07 puts the photograph first, so the fixed header sits over it.
   The component's 2/1 mobile band is ~195px tall on a 390px phone and
   --hdr-safe is 92px, which left the header covering nearly half the
   image — the building read as trapped behind the nav. Given a real
   height on small screens instead, so there is picture below the header
   rather than a letterbox strip. The ::before ink-protection scrim is
   deepened to match. */
@media (max-width: 639px) {
  .uk-eh--about .uk-eh-media img {
    aspect-ratio: auto;
    height: clamp(19rem, 58vh, 28rem);
  }
  .uk-eh--07 .uk-eh-media::before { height: calc(var(--hdr-safe) + 3rem); }
}

/* ======================================================================
   ABOUT / INSIGHTS / CONTACT — PAGE COMPOSITION
   Held in this always-loaded file, not in each page's own stylesheet: see
   the note above the ABOUT section — router.js swaps <main> and never
   loads a target page's <link>, so anything these pages cannot render
   without has to live somewhere that is always present.

   Scope: only these three pages' own components. Header, footer, the
   shared .pg-* systems, Services, Projects and the homepage are untouched.
   ====================================================================== */

/* ───────────────────────────────────────────────────────────────────────
   INSIGHTS — hero
   The page opens on the same component About does (hero-07: media band
   first, twelve-column copy below), because it is About's sibling and the
   two should read as one family rather than two templates. Everything
   below is what Insights adds to that shared component, not a second copy
   of it.
   ─────────────────────────────────────────────────────────────────────── */

/* The tagline slot on hero-07 sits in the copy grid's first four columns.
   On Insights it holds the subject index instead of a paragraph, so the
   left column does navigational work. Buttons, because router.js
   intercepts in-page <a href="#…"> on a routed subpage; the site's own
   [data-stepper-jump] handler does the scroll and the focus move. */
.ins-subjects {
  display: grid;
  width: 100%;
  max-width: 26rem;
  border-top: 1px solid var(--border);
}
.ins-subjects button {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: baseline;
  gap: .4rem;
  width: 100%;
  margin: 0;
  padding: .8rem 0;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-primary);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: color .3s var(--ease-out), padding-left .35s var(--ease-out);
}
.ins-subjects button i {
  font-style: normal;
  color: var(--uk-clay);
  transition: color .3s var(--ease-out);
}
/* the copper rule that closes over the row on hover — the same growing
   underline the note titles use, so the two halves of the page agree */
.ins-subjects button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--pg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.ins-subjects button:hover,
.ins-subjects button:focus-visible { color: var(--pg-accent-text); padding-left: .5rem; }
.ins-subjects button:hover i,
.ins-subjects button:focus-visible i { color: var(--pg-accent-text); }
.ins-subjects button:hover::after,
.ins-subjects button:focus-visible::after { transform: scaleX(1); }
.ins-subjects button:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 3px; }

/* Below the component's own 1024px split the copy grid is a single
   column, which would put the index above the headline. The headline
   leads on every width. */
@media (max-width: 1023px) {
  .uk-eh--insights .uk-eh-head { order: 1; }
  .uk-eh--insights .uk-eh-tagline-col { order: 2; }
  .ins-subjects { max-width: 34rem; }
}

/* Same treatment About's band gets on a phone, and for the same reason:
   the component's 2/1 mobile band is barely taller than the header, so it
   is given a real height instead of a letterbox strip. */
@media (max-width: 639px) {
  .uk-eh--insights .uk-eh-media img {
    aspect-ratio: auto;
    height: clamp(18rem, 54vh, 26rem);
  }
  /* --hdr-safe is the compact header; at the top of the page the mark and
     the wordmark stack to about 144px, and on a phone the crop puts pale
     marble behind them. The scrim is carried past the wordmark's foot. */
  .uk-eh--insights .uk-eh-media::before {
    height: calc(var(--hdr-safe) + 6rem);
    background: linear-gradient(to bottom, rgba(45, 26, 24, .78), rgba(45, 26, 24, .46) 62%, rgba(45, 26, 24, 0));
  }
}

/* ───────────────────────────────────────────────────────────────────────
   INSIGHTS — the notes
   Condition Grid (21st.dev/@uilayout.contact/components/conditiongrid):
   a twelve-column run whose cards take alternating spans — 12, then 7/5,
   then 5/7 — rather than one repeated width. Card mechanics from
   reveal-on-hover (21st.dev/@youcefbnm/components/reveal-on-hover): an
   overflow-hidden frame whose media scales while the panel answers.
   Both are reproduced in CSS; nothing here needs a script.
   ─────────────────────────────────────────────────────────────────────── */
body.subpage[data-page="insights"] .ins-notes-section {
  border-top: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--uk-sandstone) 44%, var(--uk-bone)) 0, var(--uk-bone) 9rem);
}

.ins-notes-head {
  display: grid;
  gap: 1rem;
  max-width: 64rem;
  margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}
.ins-notes-head h2 {
  margin: 0;
  max-width: 20ch;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.ins-notes-head p {
  margin: 0;
  max-width: 52ch;
  color: var(--text-secondary);
  font-size: var(--fs-lead);
  line-height: 1.65;
}

.ins-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ins-note {
  position: relative;
  display: grid;
  align-content: start;
  min-width: 0;
  background: var(--uk-bone);
  border: 1px solid var(--border);
  scroll-margin-top: calc(var(--hdr-safe) + 1.5rem);
  transition:
    border-color .35s var(--ease-out),
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
}

.ins-note-media {
  overflow: hidden;                 /* clips the zoom to the frame */
  background: var(--uk-sandstone);  /* holds the space if a file is missing */
}
.ins-note-media img {
  display: block;
  width: 100%;
  height: auto;                     /* see the note on .uk-eh-media img */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.ins-note-body {
  display: grid;
  align-content: start;
  gap: .6rem;
  min-width: 0;
  padding: clamp(1.15rem, 2.4vw, 1.85rem);
}
.ins-note-n {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--uk-clay);
  transition: color .3s var(--ease-out);
}
.ins-note h3 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.015em;
}
.ins-note h3 span { position: relative; display: inline-block; }
.ins-note h3 span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.22em;
  height: 1px;
  background: var(--pg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.ins-note p {
  margin: 0;
  max-width: 48ch;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 1.65;
}

/* One active state, three ways in: pointer, keyboard focus inside the
   card, and arrival from the hero's subject index (which moves focus to
   the note). Nothing is hidden until then — the sentence is in the
   document at rest. */
.ins-note:hover,
.ins-note:focus-within,
.ins-note:target {
  border-color: var(--pg-accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -22px rgba(63, 36, 34, .55);
}
.ins-note:hover .ins-note-media img,
.ins-note:focus-within .ins-note-media img,
.ins-note:target .ins-note-media img { transform: scale(1.045); }
.ins-note:hover h3 span::after,
.ins-note:focus-within h3 span::after,
.ins-note:target h3 span::after { transform: scaleX(1); }
.ins-note:hover .ins-note-n,
.ins-note:focus-within .ins-note-n,
.ins-note:target .ins-note-n { color: var(--pg-accent-text); }

/* Home + Insights pass: the alternating 12 / 7 / 5 spans are gone. With
   filtering, a note can drop out of any row, and a span pattern built for a
   fixed order would leave holes. One even grid reflows cleanly instead. */
@media (min-width: 620px) {
  .ins-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 1100px) {
  .ins-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ins-note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
  margin: 0;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.884rem;
  font-weight: 500;
  letter-spacing: 0;
}
.ins-note .ins-note-meta { font-size: .68rem; line-height: 1.4; max-width: none; }

/* ---- Filter chips ----
   Radios, visually hidden but still focusable, each followed by its label.
   The checked chip fills; keyboard focus draws on the label. */
.ins-filters {
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem);
  padding: 0;
  border: 0;
  min-width: 0;
}
.ins-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.ins-filter-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ins-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: .45rem 1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--uk-bone);
  color: var(--text-primary);
  font-size: var(--fs-small);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.ins-filter-chip:hover { border-color: var(--pg-accent); }
.ins-filter-input:checked + .ins-filter-chip {
  background: var(--uk-brown);
  border-color: var(--uk-brown);
  color: var(--uk-bone);
}
.ins-filter-input:focus-visible + .ins-filter-chip {
  outline: 2px solid var(--pg-accent);
  outline-offset: 3px;
}

.ins-board:has(#ins-f-building:checked)   .ins-note:not([data-topics~="building"]),
.ins-board:has(#ins-f-renovation:checked) .ins-note:not([data-topics~="renovation"]),
.ins-board:has(#ins-f-budget:checked)     .ins-note:not([data-topics~="budget"]),
.ins-board:has(#ins-f-design:checked)     .ins-note:not([data-topics~="design"]),
.ins-board:has(#ins-f-site:checked)       .ins-note:not([data-topics~="site"]) { display: none; }

/* ---- The note itself ----
   A native <details>: the summary line is the "View note" control and the
   checklist opens in place. Works with no script, through the router, and
   with the keyboard for free. */
.ins-note-more { margin-top: .35rem; border-top: 1px solid var(--border); }
.ins-note-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding-top: .6rem;
  color: var(--pg-accent-text);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.ins-note-more summary::-webkit-details-marker { display: none; }
.ins-note-more summary::after {
  content: "+";
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .3s var(--ease-out);
}
.ins-note-more[open] summary::after { transform: rotate(45deg); }
.ins-note-more summary:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 3px; }

.ins-note-list {
  display: grid;
  gap: .55rem;
  margin: .5rem 0 1.1rem;
  padding: 0;
  list-style: none;
}
.ins-note-list li {
  position: relative;
  padding-left: 1.25rem;
  color: var(--text-primary);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.ins-note-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .6rem;
  height: 1px;
  background: var(--pg-accent);
}
.ins-note-link { font-size: var(--fs-small); }

@media (prefers-reduced-motion: reduce) {
  .ins-note,
  .ins-note-media img { transition: none; }
  .ins-note:hover,
  .ins-note:focus-within,
  .ins-note:target { transform: none; }
  .ins-note:hover .ins-note-media img,
  .ins-note:focus-within .ins-note-media img,
  .ins-note:target .ins-note-media img { transform: none; }
}

/* ---- Card refinements (combined pass) ----
   Seventeen notes, one per card. Every card is the same shape at rest: a
   16:10 crop, then the body, with "View note" pinned to the foot so rows
   line up whatever the title length. Each image carries its own
   object-position inline, set against a contact sheet so the subject of
   every photograph sits inside the crop. Filters are single-subject now:
   each note belongs to one of the five. */
.ins-notes { align-items: stretch; }
.ins-note { grid-template-rows: auto 1fr; }
.ins-note-body { grid-template-rows: auto auto auto 1fr; }
.ins-note-body > p:not(.ins-note-meta) { min-height: 3.3em; }
.ins-note-more { align-self: end; }
.ins-note-media img { aspect-ratio: 16 / 10; height: auto; object-fit: cover; }
.ins-filter-chip small { margin-left: .45rem; color: inherit; opacity: .6; font-size: .72em; letter-spacing: .04em; }

/* The hero's subject index: each row is a <label> for its filter chip, so
   choosing a subject in the hero filters the board (no script), and
   data-stepper-jump then brings the board into view. */
.ins-subjects label {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .4rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  transition: color .3s var(--ease-out), padding-left .35s var(--ease-out);
}
.ins-subjects label i { font-style: normal; color: var(--uk-clay); }
.ins-subjects label small { color: var(--text-secondary); font-size: .62rem; letter-spacing: .08em; }
.ins-subjects label:hover { color: var(--pg-accent-text); padding-left: .5rem; }

/* A shorter band than About's: this page's work is below it. */
@media (min-width: 1024px) {
  .uk-eh--insights .uk-eh-media img { aspect-ratio: 3 / 1; object-position: 50% 78%; }
}

/* ---- Insights closing note ----
   Cream, not the shared dark .pg-cta band. This section sits directly on
   the Umber footer and About made the same call for the same reason. */
body.subpage[data-page="insights"] .ins-cta {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--uk-sandstone) 40%, var(--uk-bone));
}
.ins-cta-inner {
  position: relative;
  display: grid;
  gap: 1rem;
  max-width: 62rem;
  padding-top: 1.75rem;
}
.ins-cta-inner::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: clamp(3.5rem, 8vw, 6rem);
  height: 2px;
  background: var(--pg-accent);
}
.ins-cta h2 {
  margin: 0;
  max-width: 20ch;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.ins-cta-note { margin: 0; max-width: 52ch; color: var(--text-secondary); font-size: var(--fs-lead); line-height: 1.6; }
.ins-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: .6rem; }

/* ───────────────────────────────────────────────────────────────────────
   ABOUT — the studio statement
   The hero above and the spine below are both image-led and both stay
   exactly as they are. This is the page's one text-only stretch, so it
   earns its structure typographically: a sticky rail holding the single
   idea, the statement set against its own lead, the disciplines as an
   index strip, the continuity sentence ruled off, and Vision / Mission as
   two panels.

   The marker behind "not the client's burden", and the sweep behind a
   discipline on hover, are the Text Highlighter mechanic
   (21st.dev/@danielpetho/components/text-highlighter): a repeated
   linear-gradient with box-decoration-break: clone, sized 0% → 100%
   across the text so it clones onto every line the phrase wraps to. The
   component animates that with Motion; here the statement's marker is
   simply painted and the discipline's is a CSS transition, so this
   section needs no script at all.
   ─────────────────────────────────────────────────────────────────────── */
body.subpage[data-page="about"] .ab-principle-section {
  background:
    linear-gradient(180deg, var(--uk-bone), color-mix(in srgb, var(--uk-sandstone) 34%, var(--uk-bone)) 100%);
}

body.subpage[data-page="about"] .ab-principle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--border);
}

body.subpage[data-page="about"] .ab-principle-rail {
  padding-block: clamp(1.4rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--border);
}
body.subpage[data-page="about"] .ab-principle-rail > p {
  margin: 0;
  max-width: 26ch;
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 1.6;
}

body.subpage[data-page="about"] .ab-principle-main {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  min-width: 0;
  padding-top: clamp(2rem, 4vw, 3.25rem);
}

body.subpage[data-page="about"] .ab-statement {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
  max-width: none;
}

/* Sized against the column it actually gets, not the viewport: the
   statement sits in the wide half of a two-up inside the 9-of-12 main
   column, so a viewport-scaled display size wrapped it into five ragged
   lines with "is our" alone on one of them. */
body.subpage[data-page="about"] .ab-statement h2 {
  margin: 0;
  max-width: 18ch;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}

/* the marker itself: a copper wash sitting on the baseline of the phrase */
.ab-mark {
  background-image:
    linear-gradient(color-mix(in srgb, var(--pg-accent) 30%, transparent),
                    color-mix(in srgb, var(--pg-accent) 30%, transparent));
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: 100% .26em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

body.subpage[data-page="about"] .ab-statement .lead {
  margin: 0;
  max-width: 48ch;
  align-self: end;
}

/* ---- the five disciplines, as an index strip ---- */
body.subpage[data-page="about"] .ab-disciplines {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}
body.subpage[data-page="about"] .ab-disciplines li {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: baseline;
  gap: .45rem;
  padding-block: .8rem;
  border-bottom: 1px solid var(--border);
}
body.subpage[data-page="about"] .ab-disciplines li::before {
  content: "";
  position: absolute;
  inset: auto auto -1px 0;
  width: 100%;
  height: 1px;
  background: var(--pg-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease-out);
}
body.subpage[data-page="about"] .ab-disciplines i {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--uk-clay);
  transition: color .3s var(--ease-out);
}
body.subpage[data-page="about"] .ab-disciplines span {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-primary);
  background-image:
    linear-gradient(color-mix(in srgb, var(--pg-accent) 26%, transparent),
                    color-mix(in srgb, var(--pg-accent) 26%, transparent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% .48em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  transition: background-size .45s var(--ease-out);
}
@media (hover: hover) {
  body.subpage[data-page="about"] .ab-disciplines li:hover span { background-size: 100% .48em; }
  body.subpage[data-page="about"] .ab-disciplines li:hover i { color: var(--pg-accent-text); }
  body.subpage[data-page="about"] .ab-disciplines li:hover::before { transform: scaleX(1); }
}

/* ---- the continuity sentence ---- */
body.subpage[data-page="about"] .ab-continuity {
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 2px solid var(--pg-accent);
}
body.subpage[data-page="about"] .ab-continuity p {
  margin: 0;
  max-width: 58ch;
  color: var(--text-primary);
  font-size: var(--fs-lead);
  line-height: 1.62;
}

/* ---- Vision / Mission ---- */
body.subpage[data-page="about"] .ab-aims {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  padding: 1px;
  border: 0;
  background: var(--border);
}
body.subpage[data-page="about"] .ab-aims > div {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: color-mix(in srgb, var(--uk-bone) 88%, var(--uk-sandstone));
  transition: background .35s var(--ease-out);
}
body.subpage[data-page="about"] .ab-aims > div::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 3.5rem;
  height: 2px;
  background: var(--pg-accent);
  transition: width .5s var(--ease-out);
}
body.subpage[data-page="about"] .ab-aims dt { margin-bottom: .75rem; }
body.subpage[data-page="about"] .ab-aims dd { max-width: 48ch; }
@media (hover: hover) {
  body.subpage[data-page="about"] .ab-aims > div:hover { background: var(--uk-bone); }
  body.subpage[data-page="about"] .ab-aims > div:hover::before { width: 100%; }
}

@media (min-width: 600px) {
  body.subpage[data-page="about"] .ab-aims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* From here the disciplines stop being a list and become a five-column
   index band — ordinal over name, hairline between each. */
@media (min-width: 760px) {
  body.subpage[data-page="about"] .ab-disciplines {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
  }
  body.subpage[data-page="about"] .ab-disciplines li {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: .6rem;
    padding: 1.05rem .9rem 1.15rem;
    border-bottom: 0;
    border-left: 1px solid var(--border);
  }
  body.subpage[data-page="about"] .ab-disciplines li:first-child { border-left: 0; padding-left: 0; }
  body.subpage[data-page="about"] .ab-disciplines li::before { inset: -1px auto auto 0; }
}

@media (min-width: 900px) {
  body.subpage[data-page="about"] .ab-principle {
    grid-template-columns: minmax(11rem, 3fr) minmax(0, 9fr);
  }
  body.subpage[data-page="about"] .ab-principle-rail {
    padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 3rem) 0 0;
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }
  body.subpage[data-page="about"] .ab-principle-rail > p {
    position: sticky;
    top: calc(var(--hdr-safe) + 1.5rem);
  }
  body.subpage[data-page="about"] .ab-principle-main {
    padding: clamp(2.5rem, 5vw, 4.25rem) 0 0 clamp(2rem, 5vw, 4.5rem);
  }
  body.subpage[data-page="about"] .ab-statement {
    grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .9fr);
    align-items: end;
  }
}

/* ---- last-resort mobile guard for this family ----
   Nothing on these three pages may push the document sideways at 390px. */
@media (max-width: 640px) {
  body.subpage[data-page="about"],
  body.subpage[data-page="insights"] { overflow-x: hidden; }
}

/* ════════════════════════════════════════════════════════════════════════
   ABOUT — studio profile (about-rescue pass)

   Sections, in order: hero · founders · team · principles. The "Why
   UrbanKriti" block that follows the principles (merged 2026-10-01) keeps
   its own wk- styles in /pages/about/about.css.

   ONE GRID. Every section lays out on .abx-grid: twelve columns from
   1000px up, with two anchor lines, column 1 and column 7. Copy starts on
   column 1; the photograph, the portrait cards or the second text block
   start on column 7. That is what keeps the left edges and the image
   edges in line from the hero down to the principles.

   Every class carries the abx- prefix so nothing here can meet the older
   .ab-* rules further up (still in the file, no longer referenced).
   Lives in this always-loaded stylesheet for the router reason given in
   the ABOUT / INSIGHTS / CONTACT note above.

   Portraits come from very different cameras and settings, so every frame
   holds them to one crop and one warm monochrome, at a size the weaker
   files can carry. Colour returns on hover, on keyboard focus, or when
   about.js picks out a team group. There is deliberately no enlarged
   profile view.
   ════════════════════════════════════════════════════════════════════════ */
body.subpage[data-page="about"] {
  --abx-ease: var(--ease-out);
  --abx-mono: grayscale(1) sepia(.28) contrast(.95) brightness(1.03);
  --abx-accent: var(--ochre-on-light);
  --abx-rule: var(--border-strong);
  --abx-gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* ---- the grid ---- */
.abx-grid { display: grid; gap: clamp(2.5rem, 7vw, 3.5rem); }
@media (min-width: 1000px) {
  .abx-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--abx-gap); }
}

/* ---- shared type ---- */
.abx-statement h2,
.abx-founders h2,
.abx-team h2,
.abx-principles h2 {
  margin: 1rem 0 0;
  max-width: calc(18ch * var(--k-measure));
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(clamp(2rem, 3.4vw, 3.15rem) * var(--k-display));
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--text-primary);
  text-wrap: balance;
}
.abx-lead {
  margin: 1.25rem 0 0;
  max-width: 44ch;
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ---- entry reveal (added only by about.js, never with reduced motion) ---- */
.abx-pre {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--abx-ease), transform .9s var(--abx-ease);
}
.abx-pre.is-in { opacity: 1; transform: none; }

/* ---- portrait card: founders and team share it ---- */
.abx-card {
  display: block;
  position: relative;
  min-width: 0;
  outline: none;
  transition: transform .5s var(--abx-ease), opacity .45s var(--abx-ease);
}
.abx-card:focus-visible { outline: 2px solid var(--uk-ochre); outline-offset: 5px; }
.abx-frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: color-mix(in srgb, var(--uk-sandstone) 70%, var(--uk-taupe));
}
.abx-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: var(--abx-mono);
  transition: filter .6s var(--abx-ease), transform .9s var(--abx-ease);
}
.abx-card-name {
  display: block;
  margin-top: .85rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--text-primary);
}
.abx-card-role {
  display: block;
  margin-top: .25rem;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
/* the ::after rule under the portrait grows in copper with the colour */
.abx-card .abx-frame { position: relative; }
.abx-card .abx-frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--uk-ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--abx-ease);
}
/* .is-centre: touch screens' stand-in for hover — about.js sets it while a
   card crosses the middle of the screen (hover: none only) */
.abx-card:hover,
.abx-card:focus-visible,
.abx-card.is-lit,
.abx-card.is-centre { transform: translateY(-4px); }
.abx-card:hover .abx-frame img,
.abx-card:focus-visible .abx-frame img,
.abx-card.is-lit .abx-frame img,
.abx-card.is-centre .abx-frame img { filter: saturate(.9) sepia(.06); transform: scale(1.03); }
/* a soft warm light that follows the pointer across a portrait (about.js
   sets --mx / --my; pointer screens only, so touch never sees it) */
.abx-card .abx-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgb(255 244 228 / .34), transparent 58%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity .45s var(--abx-ease);
  pointer-events: none;
}
.abx-card .abx-frame::after { z-index: 2; }
@media (hover: hover) {
  .abx-card:hover .abx-frame::before { opacity: 1; }
}
.abx-card:hover .abx-frame::after,
.abx-card:focus-visible .abx-frame::after,
.abx-card.is-lit .abx-frame::after,
.abx-card.is-centre .abx-frame::after { transform: scaleX(1); }

/* ════ 1 · HERO — portfolio cover ════
   The photograph runs edge to edge and is the first screen; the copy sits
   on a title block at its foot, the way a drawing sheet stands on one. One
   bone strip flush with the photograph's lower edge (nothing steps up into
   the picture), ruled into two cells on the page grid: the headline cell
   (columns 1–6) and the brief (columns 7–12), centred in the row's height,
   with the cell rule on the column 7 line. A copper tick sits on the seam
   at column 1, where the title block starts.

   The crop is set by the roof, not by a percentage: on desktop the image
   is as wide as the screen, so its roof line sits at 29.35vw below the
   image top (30.9% of a 1500 × 1425 frame). Offsetting the image by
   --abx-roof minus that puts the roof just under the header at every
   width, the sky takes the nav, and the building runs down to the strip.
   max(…, 100%) stops the offset before the image could lift off the strip.

   Nav theme: the photograph carries data-nav-theme="dark" (cream header ink,
   helped by a short soft shade at the very top); the strip carries "light". */
.abx-hero {
  --abx-roof: clamp(6.25rem, 14svh, 8.5rem);
  --abx-cell: rgb(92 58 33 / .16);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--uk-bone);
}
.abx-hero-photo {
  position: relative;
  flex: none;
  margin: 0;
  height: clamp(21rem, 58svh, 34rem);
  overflow: hidden;
  background: var(--uk-sandstone);
}
.abx-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transform: scale(1.02);
}
/* only the strip the header sits on: enough for cream ink, not a veil */
.abx-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--hdr-h) + 1.5rem);
  background: linear-gradient(180deg, rgb(31 20 16 / .34), rgb(31 20 16 / .1) 55%, transparent);
  pointer-events: none;
}
/* the title strip, flush with the photograph */
.abx-hero-strip {
  position: relative;
  z-index: 2;
  flex: none;
  background: var(--uk-bone);
  border-bottom: 1px solid var(--abx-cell);
}
.abx-hero-sheet { display: grid; padding-bottom: 1.6rem; }
.abx-hero-title { position: relative; padding-top: 1.6rem; }
/* round 6: no copper tick above the title; the headline stands alone */
.abx-hero .abx-hero-title::before { content: none; }
/* a copper tick on the seam, where the title block starts */
.abx-hero-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  height: 3px;
  background: var(--uk-ochre);
  transform-origin: left;
}
.abx-hero h1 {
  margin: 0;
  max-width: 19ch;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(clamp(2.5rem, 3.8vw, 3.8rem) * var(--k-display));
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--text-primary);
  text-wrap: balance;
}
.abx-hero-brief { padding-top: 1rem; }
.abx-hero-lead {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(.97rem, 1.05vw, 1.04rem);
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .abx-hero-photo { height: clamp(26rem, 60svh, 38rem); }
  .abx-hero-sheet { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--abx-gap); }
  .abx-hero-title { grid-column: 1 / -1; }
  .abx-hero-brief { grid-column: 1 / span 10; }
}

/* Desktop: the hero is exactly one screen, so nothing of the next section
   is cut off at the fold; the photograph takes whatever the strip leaves. */
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  /* Taller cream strip (client, 2026-10-02): the extra padding is added to
     the hero's height, so the photograph keeps exactly its previous size and
     the strip simply extends further down the page. */
  .abx-hero {
    --abx-cell-pad-base: clamp(1.1rem, 2.6svh, 1.6rem);
    --abx-cell-pad: clamp(3.4rem, 8.5svh, 5.5rem);
    height: calc(clamp(36rem, 100svh, 60rem) + 2 * (var(--abx-cell-pad) - var(--abx-cell-pad-base)));
  }
  .abx-hero-photo { flex: 1 1 auto; height: auto; min-height: 0; }
  .abx-hero-photo img { object-position: 50% max(calc(var(--abx-roof) - 29.35vw), 100%); }
  .abx-hero-sheet { padding-bottom: 0; }
  .abx-hero-title {
    grid-column: 1 / span 6;
    grid-row: 1;
    padding: var(--abx-cell-pad) 2rem var(--abx-cell-pad) 0;
  }
  .abx-hero h1 { font-size: calc(clamp(2.8rem, min(4vw, 7.2svh), 3.5rem) * var(--k-display)); }
  /* the brief sits in the middle of its cell, level with the headline */
  .abx-hero-brief {
    position: relative;
    display: flex;
    align-items: center;
    grid-column: 7 / -1;
    grid-row: 1;
    padding: var(--abx-cell-pad) 0;
  }
  /* the title block's cell rule, on the column 7 line */
  .abx-hero-brief::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-.5 * var(--abx-gap));
    width: 1px;
    background: var(--abx-cell);
  }
}

/* Short landscape phones: the same one-screen cover as desktop. The
   stacked phone layout made the photograph taller than the screen there,
   so the title strip started below the fold. Photograph above, the
   two-cell strip below, both inside 100svh; type scaled to the height. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 640px) and (max-width: 999px) {
  .abx-hero { --abx-cell-pad: .85rem; height: max(19rem, 100svh); }
  .abx-hero-photo { flex: 1 1 auto; height: auto; min-height: 0; }
  .abx-hero-photo img { object-position: 50% max(calc(var(--abx-roof) - 29.35vw), 100%); }
  .abx-hero-sheet { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--abx-gap); padding-bottom: 0; }
  .abx-hero-title { grid-column: 1 / span 6; grid-row: 1; padding: var(--abx-cell-pad) 1.5rem var(--abx-cell-pad) 0; }
  .abx-hero h1 { font-size: calc(clamp(1.8rem, 8.4svh, 2.4rem) * var(--k-display)); }
  .abx-hero-brief { position: relative; display: flex; align-items: center; grid-column: 7 / -1; grid-row: 1; padding: var(--abx-cell-pad) 0; }
  .abx-hero-lead { font-size: .88rem; line-height: 1.5; }
  .abx-hero-brief::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-.5 * var(--abx-gap));
    width: 1px;
    background: var(--abx-cell);
  }
}

/* load sequence (classes added by about.js; never with reduced motion):
   the photograph settles in, the strip rises into place, its cells follow
   in a short stagger and the copper tick draws along the seam last. The
   strip's movement is small (12px) so the seam never shows a gap. */
.abx-hero.is-pre .abx-hero-photo img { opacity: 0; transform: scale(1.06); }
.abx-hero.is-pre .abx-hero-strip { opacity: 0; transform: translateY(12px); }
.abx-hero.is-pre [data-abx-hero-line] { opacity: 0; transform: translateY(10px); }
.abx-hero.is-pre .abx-hero-title::before { transform: scaleX(0); }
.abx-hero.is-ready .abx-hero-photo img { opacity: 1; transform: scale(1.02); transition: opacity 1.1s ease, transform 2.6s var(--abx-ease); }
.abx-hero.is-ready .abx-hero-strip { opacity: 1; transform: none; transition: opacity .6s ease .3s, transform .9s var(--abx-ease) .3s; }
.abx-hero.is-ready [data-abx-hero-line] { opacity: 1; transform: none; transition: opacity .8s var(--abx-ease), transform 1s var(--abx-ease); }
.abx-hero.is-ready [data-abx-hero-line]:nth-child(1) { transition-delay: .5s; }
.abx-hero.is-ready [data-abx-hero-line]:nth-child(2) { transition-delay: .62s; }
.abx-hero.is-ready .abx-hero-title::before { transform: none; transition: transform .9s var(--abx-ease) 1s; }
/* then a very slow drift, on translate so it never fights the settle */
@media (prefers-reduced-motion: no-preference) {
  .abx-hero-photo img { animation: abx-drift 36s ease-in-out 3.2s infinite alternate; }
}
@keyframes abx-drift { to { translate: -.6% -.8%; } }

/* ════ 2 · FOUNDERS — an editorial feature on walnut ════
   A dark band, so the founders read as a feature and not as the first rows
   of the team board below. Left (columns 1–4): label, headline and note at
   the top, a ruled caption at the foot, so the column holds the full height
   of the portraits instead of floating beside them. Right (columns 5–12):
   two large portraits in warm monochrome, the second stepped down by
   --abx-step. Each caption is a number, a hairline that turns copper, the
   name and the role. Hover or focus: colour returns, a soft light sweeps
   once across the frame and the card lifts 6px. No click-through. */
.abx-founders {
  --abx-accent: var(--ochre-on-dark);
  --abx-step: clamp(2.5rem, 4.5vw, 4rem);
  position: relative;
  padding-block: clamp(4rem, 7.5vw, 6.25rem);
  background:
    radial-gradient(ellipse 55% 75% at 78% 45%, rgb(122 78 44 / .22), transparent 70%),
    rgb(49 32 29);
  color: var(--text-on-dark);
}
.abx-founders-copy { min-width: 0; display: flex; flex-direction: column; }
.abx-founders h2 { max-width: 12ch; font-size: calc(clamp(2.8rem, 4.8vw, 4.5rem) * var(--k-display)); line-height: 1.05; letter-spacing: -.025em; color: var(--text-on-dark); }
.abx-founders .abx-lead { max-width: 36ch; color: rgb(239 231 218 / .74); }
/* the pull-line at the foot of the copy column, on a ruled edge */
.abx-founders-note {
  position: relative;
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  max-width: 22ch;
  font-family: var(--font-display);
  font-style: normal;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: 0;
  color: rgb(239 231 218 / .86);
  border-top: 1px solid var(--border-on-dark);
  text-wrap: balance;
}
.abx-founders-note::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 2px;
  background: var(--uk-ochre);
}

.abx-founder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}
.abx-card--founder { display: grid; grid-template-areas: "frame" "n" "name" "role"; }
.abx-card--founder:nth-child(2) { margin-top: var(--abx-step); }
.abx-card--founder .abx-frame {
  grid-area: frame;
  aspect-ratio: 4 / 5;
  background: rgb(92 58 33 / .5);
  box-shadow: 0 40px 60px -40px rgb(0 0 0 / .7);
}
.abx-card--founder .abx-frame img { filter: grayscale(1) sepia(.3) contrast(1.02) brightness(.96); }
/* the hairline below carries the copper here, so no rule under the frame */
.abx-card--founder .abx-frame::after { content: none; }
/* the number, on a hairline that turns copper with the card */
.abx-founder-n {
  grid-area: n;
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: 1.1rem;
  height: 1px;
  color: var(--abx-accent);
}
.abx-founder-n::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--uk-ochre) 50%, var(--border-on-dark) 50%) 100% 0 / 200% 100% no-repeat;
  transition: background-position .8s var(--abx-ease);
}
.abx-card--founder .abx-card-name {
  grid-area: name;
  margin-top: .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.005em;
  color: var(--text-on-dark);
}
.abx-card--founder .abx-card-role {
  grid-area: role;
  margin-top: .45rem;
  font-family: var(--font-mono);
  font-size: 0.832rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  color: rgb(239 231 218 / .6);
}
/* the light sweep: a soft band of warm light that crosses the frame once */
.abx-card--founder .abx-frame::before {
  inset: 0 auto 0 0;
  width: 60%;
  background: linear-gradient(100deg, transparent, rgb(255 240 220 / .2) 45%, rgb(255 240 220 / .08) 60%, transparent);
  mix-blend-mode: normal;
  opacity: 0;
  transform: translateX(-110%);
  transition: transform 1.1s var(--abx-ease), opacity .3s ease;
}
.abx-card--founder:hover,
.abx-card--founder:focus-visible,
.abx-card--founder.is-centre { transform: translateY(-6px); }
.abx-card--founder:hover .abx-frame img,
.abx-card--founder:focus-visible .abx-frame img,
.abx-card--founder.is-centre .abx-frame img { filter: saturate(.92) sepia(.06); transform: scale(1.025); }
.abx-card--founder:hover .abx-frame::before,
.abx-card--founder:focus-visible .abx-frame::before,
.abx-card--founder.is-centre .abx-frame::before { opacity: 1; transform: translateX(185%); }
.abx-card--founder:hover .abx-founder-n::after,
.abx-card--founder:focus-visible .abx-founder-n::after,
.abx-card--founder.is-centre .abx-founder-n::after { background-position: 0 0; }
.abx-card--founder:focus-visible { outline-color: var(--uk-ochre); outline-offset: 8px; }

@media (max-width: 599px) {
  .abx-founders { --abx-step: 2.5rem; }
  .abx-founder-list { margin-top: .5rem; }
  .abx-card--founder .abx-card-name { font-size: 1.2rem; }
  .abx-card--founder .abx-card-role { font-size: .78rem; letter-spacing: 0; }
  .abx-founder-n { margin-top: .85rem; }
}
/* Tablets: the pull-line moves beside the note, so the copy fills the
   width the portraits below it take */
@media (min-width: 700px) and (max-width: 999px) {
  .abx-founders-copy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--abx-gap); align-items: end; }
  .abx-founders-note { margin: 0 0 .35rem; }
}
/* Desktop: copy on columns 1–4, portraits on 5–12. The copy column
   stretches to the list's height; its pull-line drops to the foot and
   ends on the same line as the second portrait's caption. */
@media (min-width: 1000px) {
  .abx-founders .abx-grid { align-items: stretch; }
  .abx-founders-copy { grid-column: 1 / span 4; }
  .abx-founders-note { margin-top: auto; }
  .abx-founders-head { padding-bottom: 2.5rem; }
  .abx-founder-list { grid-column: 5 / -1; }
}

/* ════ 3 · TEAM ════ */
.abx-team { padding-block: var(--pad-section); }
.abx-team-side { min-width: 0; }
.abx-groups { list-style: none; margin: clamp(2rem, 4vw, 2.75rem) 0 0; padding: 0; border-top: 1px solid var(--abx-rule); max-width: 26rem; }
.abx-groups li { border-bottom: 1px solid var(--border); }
.abx-group {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .95rem 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding .45s var(--abx-ease), color .3s;
}
.abx-group span { font-size: 1rem; }
.abx-group i { font-style: normal; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0; color: var(--abx-accent); }
.abx-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .6rem;
  height: 1px;
  background: var(--uk-ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--abx-ease);
}
.abx-group:hover,
.abx-group.is-lit { padding-left: 1rem; color: var(--terracotta-on-light); }
.abx-group:hover::before,
.abx-group.is-lit::before { transform: scaleX(1); }
.abx-group[aria-pressed="true"] span { font-weight: 600; }
.abx-group:focus-visible { outline: 2px solid var(--uk-ochre); outline-offset: 3px; }

.abx-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem .75rem;
}
.abx-board.has-focus .abx-card:not(.is-lit) { opacity: .38; }
.abx-board .abx-card-name { font-size: .88rem; }
.abx-board .abx-card-role { font-size: .76rem; }
@media (min-width: 600px) {
  .abx-board { gap: 2rem 1.25rem; }
  .abx-board .abx-card-name { font-size: .95rem; }
  .abx-board .abx-card-role { font-size: .82rem; }
}
@media (min-width: 1000px) {
  .abx-team .abx-grid { align-items: start; }
  .abx-team-side { grid-column: 1 / span 5; position: sticky; top: calc(var(--hdr-safe) + 2rem); }
  .abx-board { grid-column: 7 / span 6; }
}

/* ════ 4 · PRINCIPLES ════ */
.abx-principles { padding-block: 0 var(--pad-section); }
.abx-principles-head { padding-top: var(--pad-section); margin-bottom: clamp(2.25rem, 5vw, 3.25rem); border-top: 1px solid var(--border); }
.abx-principles h2 { max-width: 20ch; }
.abx-principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--abx-rule);
}
.abx-principle {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "n mark" "title title" "line line";
  align-items: start;
  align-content: start;
  padding: 1.75rem 0 2rem;
  border-bottom: 1px solid var(--border);
}
.abx-p-n { display: none; }
.abx-p-mark { grid-area: mark; justify-self: end; width: 2.75rem; height: 2.75rem; fill: none; stroke: var(--uk-brown); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.abx-p-mark path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.abx-pre .abx-p-mark path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--abx-ease) .25s; }
.abx-pre.is-in .abx-p-mark path { stroke-dashoffset: 0; }
.abx-pre.is-in .abx-p-mark path:nth-child(2) { transition-delay: .45s; }
.abx-pre.is-in .abx-p-mark path:nth-child(3) { transition-delay: .65s; }
.abx-principle h3 {
  grid-area: title;
  margin: 1.5rem 0 0;
  --k-display: .74; /* narrow column: keeps each principle on one line */
  font-size: calc(clamp(1.5rem, 2vw, 1.85rem) * var(--k-display));
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--text-primary);
  text-wrap: balance;
}
.abx-principle p { grid-area: line; margin: .6rem 0 0; max-width: 30ch; font-size: var(--fs-small); line-height: 1.6; color: var(--text-secondary); }
/* a copper rule grows across the top of a column on hover */
.abx-principle::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--uk-ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--abx-ease);
}
.abx-principle:hover::before,
.abx-principle.is-centre::before { transform: scaleX(1); }
@media (min-width: 768px) {
  .abx-principle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .abx-principle { padding: 2rem 1.75rem 2.25rem; }
  .abx-principle:nth-child(odd) { border-right: 1px solid var(--border); padding-left: 0; }
}
@media (min-width: 1100px) {
  .abx-principle-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .abx-principle { padding: 2.25rem 1.75rem 0; border-bottom: 0; }
  .abx-principle:nth-child(odd) { border-right: 0; padding-left: 1.75rem; }
  .abx-principle + .abx-principle { border-left: 1px solid var(--border); }
  .abx-principle:first-child { padding-left: 0; }
  .abx-principle:last-child { padding-right: 0; }
}

/* ---- phones ---- */
@media (max-width: 480px) {
  .abx-principle { padding: 1.35rem 0 1.5rem; }
  .abx-principle h3 { margin-top: .9rem; }
  .abx-p-mark { width: 2.25rem; height: 2.25rem; }
}

/* ---- reduced motion: everything static; the colour change stays (it is
   a state change, not movement) ---- */
@media (prefers-reduced-motion: reduce) {
  .abx-pre { opacity: 1 !important; transform: none !important; transition: none !important; }
  .abx-pre .abx-p-mark path { stroke-dashoffset: 0 !important; transition: none !important; }
  .abx-card,
  .abx-frame img,
  .abx-card .abx-frame::after,
  .abx-group,
  .abx-group::before,
  .abx-principle::before { transition: filter .2s linear, opacity .2s linear !important; transform: none !important; }
  .abx-card .abx-frame::after { display: none; }
  .abx-group:hover,
  .abx-group.is-lit { padding-left: 0; }
  .abx-hero-photo img { animation: none !important; transition: none !important; }
  /* hero: photograph, strip, cells and seam tick simply present */
  .abx-hero-photo img { opacity: 1 !important; transform: none !important; }
  .abx-hero-strip,
  .abx-hero-title::before,
  .abx-hero [data-abx-hero-line] { opacity: 1 !important; transform: none !important; transition: none !important; }
  /* founders: colour and the copper hairline still change; no sweep, no lift */
  .abx-card--founder .abx-frame::before { display: none; }
  .abx-founder-n::after { transition: none !important; }
}
.reduced-motion .abx-pre { opacity: 1; transform: none; transition: none; }
.reduced-motion .abx-pre .abx-p-mark path { stroke-dashoffset: 0; transition: none; }


/* ════════════════════════════════════════════════════════════════════════
   CONTACT (client format, 2026-10-01)

   Lives in this always-loaded file for the router reason given in the
   ABOUT / INSIGHTS / CONTACT note above: router.js swaps <main> and never
   loads /pages/contact/contact.css.

   1 · BAND   a short walnut band that only covers the space behind the
              floating header (data-nav-theme="dark": cream ink). Along its
              foot a ground line with sheet ticks and two low street
              elevations at the edges draw themselves in on load. Pure CSS,
              so it also plays after a router swap; static with reduced
              motion.
   2 · CARD   the client's short form, lifted a little onto the band: name
              and phone, project and service (styled native selects with a
              drawn chevron), location, and one "Send on WhatsApp" button.
              Light responses only: the focus line draws in, the icon turns
              copper, a tick appears when a required field is right, the
              fields settle in once on load.

   Without JS every field works and the native validation runs.
   ════════════════════════════════════════════════════════════════════════ */
body.subpage[data-page="contact"] {
  --cts-field: color-mix(in srgb, var(--uk-sandstone) 18%, var(--uk-bone));
  --cts-copper: var(--ochre-on-light);
  --cts-line: var(--acc-1);
  --cts-err: var(--uk-terracotta);
  --cts-ease: var(--ease-out);
}

/* ---- 1 · the band ---- */
.cts-top {
  position: relative;
  height: calc(var(--hdr-h) + 2.75rem);
  overflow: hidden;
  color: color-mix(in srgb, var(--text-on-dark) 30%, transparent);
  background:
    radial-gradient(70% 140% at 0% 0%, rgb(200 129 28 / .08), transparent 60%),
    var(--uk-umber);
}
.cts-top-draw {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 120px;
}
/* Phones (mobile pass, 2026-10-01): the 1440 sheet, sliced to the band's
   height, showed only its empty middle on a phone, so the two streets never
   drew. Under 768px the 720 sheet takes over at the full width, its ground
   line landing on the card's top edge (the card overlaps the band by
   1.75rem there), so both streets stand on the card. */
.cts-top-draw--m { display: none; }
@media (max-width: 767px) {
  .cts-top-draw { display: none; }
  .cts-top-draw.cts-top-draw--m {
    display: block;
    bottom: calc(1.75rem - 100vw / 90);   /* y=112 of 120, at width/720 scale */
    height: auto;
    aspect-ratio: 720 / 120;
  }
}
.cts-draw--ticks { color: color-mix(in srgb, var(--uk-ochre) 70%, transparent); stroke: currentColor; }
.cts-draw--left,
.cts-draw--right { stroke: color-mix(in srgb, var(--text-on-dark) 40%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .cts-draw[pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: cts-draw 1.6s var(--cts-ease) forwards;
  }
  .cts-draw--ground { animation-duration: 1.2s; }
  .cts-draw--left   { animation-delay: .45s; animation-duration: 2.2s; }
  .cts-draw--right  { animation-delay: .6s; animation-duration: 2.2s; }
  .cts-draw--ticks  { opacity: 0; animation: cts-fade .8s ease .9s forwards; }
}
@keyframes cts-draw { to { stroke-dashoffset: 0; } }
@keyframes cts-fade { to { opacity: 1; } }

/* ---- 2 · the card ---- */
.cts {
  position: relative;
  z-index: 1;
  display: flow-root;            /* the card's negative margin must not collapse through */
  padding: 0 16px var(--pad-section);
  background: var(--uk-bone);
}
.cts-card {
  position: relative;
  max-width: 46rem;
  margin: -1.75rem auto 0;
  padding: 1.9rem 1.25rem 1.6rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--uk-white) 60%, var(--uk-bone));
  box-shadow:
    0 40px 80px -56px rgb(31 20 16 / .55),
    0 12px 26px -20px rgb(31 20 16 / .28),
    0 0 0 1px rgb(92 58 33 / .07);
}
/* round 6: no copper tick on the card; the heading opens it on its own */
.cts-card::before {
  content: none;
  position: absolute;
  top: 0;
  left: 1.25rem;
  width: 3.5rem;
  height: 3px;
  background: var(--uk-ochre);
}
.cts-card h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(clamp(2.6rem, 1.8rem + 2.8vw, 3.8rem) * var(--k-display));
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--text-primary);
}

/* the ?service= note contact.js adds under the heading */
.contact-context {
  display: grid;
  gap: .3rem;
  justify-items: start;
  margin: 1rem 0 0;
  padding: .55rem .9rem;
  border-left: 2px solid var(--cts-line);
  background: color-mix(in srgb, var(--uk-sandstone) 45%, transparent);
}
.contact-context-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin: 0; }
.contact-context-row span { color: var(--text-secondary); font-size: .78rem; font-weight: 500; }
.contact-context-row b { color: var(--uk-umber); font-size: .92rem; font-weight: 600; }

body.subpage[data-page="contact"] .cts-form.pg-form {
  display: block;
  max-width: none;
  margin-top: 1.6rem;
}
body.subpage[data-page="contact"] .cts-form.pg-form[hidden] { display: none; }
.cts-grid { display: grid; gap: 1.25rem; }
/* The email address opens only when "Email" is the chosen way to be contacted. */
.cts-field[hidden] { display: none; }
.cts-field--reveal:not([hidden]) { animation: cts-reveal .4s ease both; }
@keyframes cts-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cts-field--reveal:not([hidden]) { animation: none; } }

.cts-field { display: grid; align-content: start; gap: .5rem; min-width: 0; }
.cts-field > label {
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
}
.cts-field em { font-style: normal; font-weight: 400; color: var(--text-secondary); }
.cts-field em::before { content: "\2009/\2009"; color: var(--border-strong); }

/* a field: icon inside, focus line drawing in along the foot */
.cts-control { position: relative; display: block; }
.cts-ico {
  position: absolute;
  top: 50%;
  left: .95rem;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  color: var(--text-secondary);
  pointer-events: none;
  transition: color .3s ease, transform .35s var(--cts-ease);
}
.cts-control input,
.cts-control select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 3.25rem;
  margin: 0;
  padding: .8rem 2.6rem .8rem 2.85rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--cts-field);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  outline: none;
  box-shadow: none;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.cts-control select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.cts-field:not(.is-filled) select { color: var(--text-secondary); }
.cts-control select option { color: var(--text-primary); }
.cts-chev {
  position: absolute;
  top: 50%;
  right: .9rem;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  color: var(--text-secondary);
  pointer-events: none;
  transition: color .3s ease, transform .35s var(--cts-ease);
}
.cts-control input:hover,
.cts-control select:hover { border-color: color-mix(in srgb, var(--uk-brown) 55%, transparent); }
.cts-control input:focus,
.cts-control select:focus { border-color: color-mix(in srgb, var(--uk-ochre) 55%, var(--uk-brown)); background: var(--uk-white); }
.cts-line {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 2px;
  background: var(--cts-line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--cts-ease);
  pointer-events: none;
}
.cts-control:focus-within .cts-line { transform: scaleX(1); }
.cts-control:focus-within .cts-ico,
.cts-field.is-filled .cts-ico,
.cts-control:focus-within .cts-chev { color: var(--cts-copper); }
.cts-control:focus-within .cts-ico { transform: scale(1.08); }
.cts-control:focus-within .cts-chev { transform: translateY(2px); }
/* the tick when a required field is right */
.cts-ok {
  position: absolute;
  top: 50%;
  right: .9rem;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  color: var(--cts-copper);
  stroke-width: 2;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .25s ease, transform .4s var(--cts-ease);
  pointer-events: none;
}
.cts-field.is-valid .cts-ok { opacity: 1; transform: none; }

.cts-msg { display: block; font-size: .8125rem; font-weight: 500; line-height: 1.4; color: var(--cts-err); }
.cts-msg:empty { display: none; }
.cts-field.is-invalid .cts-control input { border-color: var(--cts-err); }
.cts-field.is-invalid .cts-line { background: var(--cts-err); }
.cts-field.is-invalid .cts-ico { color: var(--cts-err); }

.cts-submit { display: grid; gap: .8rem; margin-top: 1.9rem; }
.cts-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3.35rem;
  padding: .9rem 1.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  color: var(--uk-bone);
  background: var(--uk-umber);
  border: 1px solid var(--uk-umber);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .3s var(--cts-ease), box-shadow .3s var(--cts-ease);
}
.cts-wa { width: 20px; height: 20px; color: var(--ochre-on-dark); transition: transform .35s var(--cts-ease); }
@media (hover: hover) {
  .cts-btn:hover { background: var(--uk-brown); border-color: var(--uk-brown); transform: translateY(-1px); box-shadow: 0 14px 26px -16px rgb(63 36 34 / .8); }
  .cts-btn:hover .cts-wa { transform: rotate(-8deg) scale(1.06); }
}
.cts-btn:active { transform: translateY(1px); }
.cts-btn:focus-visible { outline-offset: 4px; }
.cts-btn--quiet { color: var(--uk-brown); background: transparent; border-color: var(--border-strong); }
@media (hover: hover) {
  .cts-btn--quiet:hover { color: var(--uk-umber); background: rgb(92 58 33 / .05); border-color: var(--uk-brown); box-shadow: none; }
}

/* The primary action (mobile pass, 2026-10-01: the owner read the umber
   "Send on WhatsApp" pill as disabled). Now the footer's "Start your project"
   treatment (.ftr-cta in global.css): filled ochre, dark ink (#2A1A06 on
   #C8811C, 5.5:1), a darker disc carrying the arrow, a lift and an ochre
   glow on hover, a press-in on tap. A hairline of deeper ochre gives the
   fill an edge on the pale card. */
.cts-btn--primary {
  gap: .9rem;
  min-width: 11rem;
  padding: 6px 6px 6px 1.6rem;
  color: #2A1A06;
  background: var(--uk-ochre);
  border-color: color-mix(in srgb, var(--uk-ochre) 75%, #2A1A06);
  box-shadow: 0 10px 22px -14px rgb(200 129 28 / .9);
  -webkit-tap-highlight-color: transparent;
}
.cts-btn--primary > span:first-child { flex: 1 1 auto; text-align: left; }
.cts-btn-disc {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgb(42 26 6 / .14);
  transition: background-color .3s var(--cts-ease), color .3s var(--cts-ease);
}
.cts-btn-disc svg { width: 18px; height: 18px; transition: transform .35s var(--cts-ease); }
.cts-btn--primary .cts-wa { color: currentColor; }
.cts-btn--primary:has(.cts-wa) { padding: .9rem 1.6rem; }
@media (hover: hover) {
  .cts-btn--primary:hover {
    background: color-mix(in srgb, var(--uk-ochre) 92%, #fff);
    border-color: color-mix(in srgb, var(--uk-ochre) 75%, #2A1A06);
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -14px rgb(200 129 28 / .95);
  }
  .cts-btn--primary:hover .cts-btn-disc { background: #2A1A06; color: var(--uk-ochre); }
  .cts-btn--primary:hover .cts-btn-disc svg { transform: translateX(2px); }
}
.cts-btn--primary:active {
  transform: translateY(1px) scale(.985);
  background: color-mix(in srgb, var(--uk-ochre) 88%, #2A1A06);
  box-shadow: 0 6px 14px -10px rgb(200 129 28 / .9);
}
.cts-btn--primary:active .cts-btn-disc { background: #2A1A06; color: var(--uk-ochre); }

/* Submit, refined (owner: "improve the font of submit and the design"):
   a taller pill, a heavier label, a warm ochre-to-copper fill with a soft
   top highlight, a dark disc carrying the ochre arrow, and on hover a sheen
   that sweeps once across while the arrow slides. Reduced motion: no sheen,
   no slide (see the reduced-motion block below). */
.cts-btn--primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 12.5rem;
  min-height: 3.75rem;
  padding: 7px 7px 7px 1.9rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .015em;
  color: #2A1A06;
  background: linear-gradient(180deg, color-mix(in srgb, var(--uk-ochre) 88%, #fff) 0%, var(--uk-ochre) 55%, color-mix(in srgb, var(--uk-ochre) 86%, #6B3A10) 100%);
  border-color: color-mix(in srgb, var(--uk-ochre) 70%, #2A1A06);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 12px 26px -14px rgb(200 129 28 / .95);
}
.cts-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  z-index: -1;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .38), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.cts-btn--primary .cts-btn-disc {
  width: 2.9rem;
  height: 2.9rem;
  color: var(--uk-ochre);
  background: #2A1A06;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
}
.cts-btn--primary .cts-btn-disc svg { width: 19px; height: 19px; stroke-width: 1.8; }
@media (hover: hover) {
  .cts-btn--primary:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--uk-ochre) 80%, #fff) 0%, color-mix(in srgb, var(--uk-ochre) 94%, #fff) 55%, var(--uk-ochre) 100%);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 18px 34px -14px rgb(200 129 28 / 1);
  }
  .cts-btn--primary:hover::after { animation: cts-sheen .9s var(--cts-ease) both; }
  .cts-btn--primary:hover .cts-btn-disc { background: #2A1A06; color: #F3C46E; }
  .cts-btn--primary:hover .cts-btn-disc svg { transform: translateX(3px); }
}
.cts-btn--primary:focus-visible { outline: 2px solid var(--uk-umber); outline-offset: 4px; }
/* Owner: smaller label, button centred in the card (the helper line beside
   it was removed). */
.cts-submit { display: flex; justify-content: center; }
.cts-btn--primary { min-width: 11rem; min-height: 3.25rem; padding: 6px 6px 6px 1.6rem; font-size: .9375rem; }
.cts-btn--primary .cts-btn-disc { width: 2.5rem; height: 2.5rem; }
.cts-btn--primary .cts-btn-disc svg { width: 17px; height: 17px; }
@keyframes cts-sheen { from { left: -40%; } to { left: 120%; } }
@media (prefers-reduced-motion: reduce) {
  .cts-btn--primary:hover::after { animation: none; }
  .cts-btn--primary:hover .cts-btn-disc svg { transform: none; }
}
/* Phones: the button spans the card, so it can't be missed under the last field. */
@media (max-width: 599px) {
  .cts-submit .cts-btn--primary { width: 100%; }
  .cts-done-actions { display: grid; justify-self: stretch; }
}

/* ---- sent: the call fallback ---- */
.cts-call {
  display: grid;
  gap: .7rem;
  justify-self: stretch;
  margin-top: .9rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border);
}
.cts-call-title { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--text-primary); }
.cts-call-list { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.cts-call-btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.1rem;
  padding: .3rem 1.2rem .3rem .35rem;
  border: 1px solid color-mix(in srgb, var(--uk-ochre) 55%, var(--border-strong));
  border-radius: 999px;
  background: color-mix(in srgb, var(--uk-ochre) 7%, var(--uk-white));
  color: var(--uk-umber);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .25s ease, border-color .25s ease, transform .3s var(--cts-ease);
}
.cts-call-ico {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  background: var(--uk-ochre);
  color: #2A1A06;
}
.cts-call-ico svg { width: 17px; height: 17px; }
@media (hover: hover) {
  .cts-call-btn:hover { border-color: var(--uk-ochre); background: color-mix(in srgb, var(--uk-ochre) 14%, var(--uk-white)); transform: translateY(-1px); }
}
.cts-call-btn:active { transform: translateY(1px); background: color-mix(in srgb, var(--uk-ochre) 18%, var(--uk-white)); }
.cts-call-btn:focus-visible { outline-offset: 3px; }
@media (max-width: 599px) {
  .cts-call-list > li { flex: 1 1 100%; }
  .cts-call-btn { width: 100%; }
}

/* ---- sent ---- */
.cts-done { display: grid; justify-items: start; gap: .9rem; margin-top: 1.6rem; outline: none; }
.cts-done[hidden] { display: none; }
.cts-done h2 {
  margin: .3rem 0 0;
  font-weight: 300;
  font-size: calc(clamp(1.8rem, 1.3rem + 2vw, 2.6rem) * var(--k-display));
  line-height: 1.08;
  letter-spacing: -.02em;
}
.cts-done p { margin: 0; color: var(--text-secondary); }
.cts-done-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.cts-done-mark { width: 3.5rem; height: 3.5rem; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cts-done-mark circle { stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 139; stroke-dashoffset: 0; }
.cts-done-mark path { stroke: var(--cts-line); stroke-width: 2.6; stroke-dasharray: 34; stroke-dashoffset: 0; }
.cts-done.is-in .cts-done-mark circle { animation: cts-draw-circle .9s var(--cts-ease) both; }
.cts-done.is-in .cts-done-mark path { animation: cts-draw-tick .55s var(--cts-ease) .55s both; }
.cts-done.is-in > :not(svg) { animation: cts-rise-in .6s var(--cts-ease) .25s both; }
@keyframes cts-draw-circle { from { stroke-dashoffset: 139; } to { stroke-dashoffset: 0; } }
@keyframes cts-draw-tick   { from { stroke-dashoffset: 34; } to { stroke-dashoffset: 0; } }
@keyframes cts-rise-in     { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- load: the card and its fields settle in once (CSS, so a router
   swap plays it too; the end state is the resting state) ---- */
@media (prefers-reduced-motion: no-preference) {
  .cts-card { animation: cts-rise-in .8s var(--cts-ease) .1s both; }
  .cts-grid > .cts-field,
  .cts-submit { animation: cts-rise-in .7s var(--cts-ease) both; }
  .cts-grid > .cts-field:nth-child(1) { animation-delay: .3s; }
  .cts-grid > .cts-field:nth-child(2) { animation-delay: .36s; }
  .cts-grid > .cts-field:nth-child(3) { animation-delay: .42s; }
  .cts-grid > .cts-field:nth-child(4) { animation-delay: .48s; }
  .cts-grid > .cts-field:nth-child(5) { animation-delay: .54s; }
  .cts-grid > .cts-field:nth-child(6) { animation-delay: .6s; }
  .cts-submit { animation-delay: .6s; }
}

@media (min-width: 600px) {
  .cts-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.25rem; }
  .cts-field--wide { grid-column: 1 / -1; }
  .cts-submit { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 1.5rem; }
}
@media (min-width: 768px) {
  .cts { padding-inline: var(--pad-page); }
  .cts-card { margin-top: -2.25rem; padding: clamp(2.5rem, 4.5vw, 3.25rem); }
  .cts-card::before { left: clamp(2.5rem, 4.5vw, 3.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  .cts-line,
  .cts-ico,
  .cts-chev,
  .cts-ok,
  .cts-btn,
  .cts-wa,
  .cts-btn-disc,
  .cts-btn-disc svg,
  .cts-call-btn { transition: none; }
  .cts-btn:hover,
  .cts-btn:active,
  .cts-btn:hover .cts-wa,
  .cts-btn:hover .cts-btn-disc svg,
  .cts-call-btn:hover,
  .cts-call-btn:active,
  .cts-control:focus-within .cts-ico,
  .cts-control:focus-within .cts-chev { transform: none; }
  .cts-done.is-in .cts-done-mark circle,
  .cts-done.is-in .cts-done-mark path,
  .cts-done.is-in > :not(svg) { animation: none; }
}

/* "Join our team" (client, 2026-10-09): the Submit pill, opening an email to
   the studio. Under the team board on About and under the form on Contact. */
.join-team {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.join-team-text { margin: 0; color: var(--uk-brown); }
.join-team--contact { margin-inline: auto; padding-inline: 16px; }