/* ==========================================================================
   Advanced PT: site stylesheet
   Colours, type and spacing live in :root. Change a token and the whole
   site follows. Hover styles are grouped under (hover: hover) so they never
   stick on touch screens.
   ========================================================================== */

/* Clash Grotesk (headings) and Satoshi (text) by Indian Type Foundry, Fontshare free licence */
@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/clash-grotesk-var.woff2") format("woff2");
  font-weight: 200 700;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-var.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
/* Antonio by Vernon Adams, SIL Open Font License: closest match to the APT logo lettering */
@font-face {
  font-family: "Antonio";
  src: url("../fonts/antonio-var.woff2") format("woff2");
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* colour */
  --bg: #f3f3f0;           /* concrete white */
  --bg-2: #e8e8e4;         /* darker concrete band */
  --surface: #fafaf8;      /* cards, inputs */
  --ink: #15171a;          /* text and dark sections */
  --ink-2: #202327;
  --ink-3: #2c3035;
  --muted: #565b62;
  --line: rgba(21, 23, 26, 0.12);
  --line-strong: rgba(21, 23, 26, 0.24);
  --amber: #fbae1f;        /* sampled from the APT logo */
  --amber-hover: #ffbd45;
  --on-dark: #ededea;
  --on-dark-muted: #a6abb2;
  --line-dark: rgba(255, 255, 255, 0.12);

  /* type */
  --f-sans: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-display: "Clash Grotesk", "Satoshi", system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-display: clamp(2.5rem, 1.55rem + 3.6vw, 4.6rem);
  --fs-h1: clamp(2.35rem, 1.6rem + 2.9vw, 4.1rem);
  --fs-h2: clamp(1.95rem, 1.45rem + 1.9vw, 3.1rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.5vw, 1.55rem);
  --fs-lead: clamp(1.08rem, 1.01rem + 0.3vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* layout */
  --wrap: 1340px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 9vw, 136px);
  --header-h: 72px;
  --r: 2px;                /* one radius for everything: buttons, cards, inputs, images */

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  font-weight: 430;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--amber); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.section--dark :focus-visible, .site-footer :focus-visible { outline-color: var(--amber); }
a, button, [role="button"], summary, label { touch-action: manipulation; }
.btn, .chip, .nav-link, summary { -webkit-user-select: none; user-select: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -64px; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; font-weight: 600;
  border-radius: var(--r);
  transition: top 0.2s var(--ease-out);
}
.skip:focus { top: 12px; }

.i { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* ---------- typography ---------- */
.display, .h1, .h2, .h3, h1, h2, h3,
.stat__num, .why__num, .pcard__title, .pcard__value, .proj-nav__title, .hero-card dd,
.intro__tag strong, .ticker__group li, .mobile-menu nav > ul > li > a, .footer-word {
  font-family: var(--f-display);
}
.display, .h1, .h2, .h3, h1, h2, h3 {
  font-weight: 560;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.025em; }
.h1 { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.025em; }
.h2 { font-size: var(--fs-h2); line-height: 1.04; }
.h3 { font-size: var(--fs-h3); line-height: 1.18; letter-spacing: -0.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 58ch; text-wrap: pretty; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); }
.label {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: 450;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.stat__num {
  font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem); line-height: 1; font-weight: 600;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.stat__num small { font-size: 0.5em; margin-left: 2px; color: var(--muted); font-weight: 560; }
.prose { max-width: 66ch; }
.prose p + p { margin-top: 1em; }
.prose p { text-wrap: pretty; }
.section--dark .lead, .section--dark .muted, .section--dark .label { color: var(--on-dark-muted); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }
.section--alt { background: var(--bg-2); }
.section--dark { background: var(--ink); color: var(--on-dark); }
/* two plain sections in a row share one gap instead of doubling it */
.section:not(.section--alt):not(.section--dark) + .section:not(.section--alt):not(.section--dark) { padding-top: 0; }
.stack-s > * + * { margin-top: 12px; }
.stack-m > * + * { margin-top: 20px; }
.stack-l > * + * { margin-top: 32px; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 40px; }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .lead { margin-top: 16px; }
.head-row {
  display: flex; align-items: end; justify-content: space-between; gap: 24px 48px;
  flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 56px);
}
.head-row .h2 { max-width: 18ch; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px;
  border-radius: var(--r);
  font-size: 0.98rem; font-weight: 580; letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn .i { transition: transform 200ms var(--ease-out); }
.btn--primary { background: var(--amber); color: var(--ink); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn--ghost-light { border: 1px solid rgba(255, 255, 255, 0.32); color: var(--on-dark); }
.btn--sm { min-height: 42px; padding: 0 16px; font-size: 0.92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.01em;
  padding: 5px 9px; border: 1px solid var(--line-strong); border-radius: var(--r); color: var(--ink);
}

.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 580;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size 260ms var(--ease-out);
}
.link .i { transition: transform 220ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--amber-hover); }
  .btn--dark:hover { background: var(--ink-3); }
  .btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
  .btn--ghost-light:hover { background: #fff; border-color: #fff; color: var(--ink); }
  .btn:hover .i { transform: translateX(3px); }
  .link:hover { background-size: 0 1px; background-position: 100% 100%; }
  .link:hover .i { transform: translate(2px, -2px); }
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  /* a near-solid fill instead of a backdrop blur: a blur behind a fixed bar is
     recalculated on every scroll frame and is the most common cause of scroll lag */
  background: rgba(243, 243, 240, 0.97);
  border-bottom: 1px solid transparent;
  transition: border-color 240ms ease;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: block; flex: none; margin-right: auto; padding: 6px 0; }
.brand img { height: 26px; width: auto; }
.nav { display: none; }
.nav > ul { display: flex; align-items: center; gap: 4px; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px;
  font-size: 0.95rem; font-weight: 540;
  border-radius: var(--r);
  transition: background-color 180ms ease;
}
.nav-link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px;
  background: var(--amber);
  transform: scaleX(0); transform-origin: left;
  transition: transform 260ms var(--ease-out);
}
.nav-link[aria-current="page"]::after, .nav-item.is-current > .nav-link::after { transform: scaleX(1); }
.nav-link .i { width: 0.85em; height: 0.85em; transition: transform 200ms var(--ease-out); }
.nav-item { position: relative; }
.nav-item.is-open > .nav-link .i { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 10px); left: -12px;
  width: 360px; padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 24px 48px -16px rgba(21, 23, 26, 0.18), 0 2px 6px rgba(21, 23, 26, 0.05);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px) scale(0.98); transform-origin: top left;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms;
}
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item.is-open .dropdown {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s;
}
.dropdown a {
  display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; align-items: center;
  padding: 12px; border-radius: var(--r);
  transition: background-color 160ms ease;
}
.dropdown a .i { grid-row: span 2; width: 40px; height: 40px; padding: 9px; background: var(--bg-2); border-radius: var(--r); }
.dropdown strong { font-weight: 600; font-size: 0.95rem; }
.dropdown span { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
.dropdown .dropdown__all { display: flex; justify-content: space-between; margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0; font-weight: 580; font-size: 0.9rem; }
.dropdown .dropdown__all .i { width: 1em; height: 1em; padding: 0; background: none; grid-row: auto; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-phone {
  display: none; align-items: center; gap: 8px;
  font-size: 0.95rem; font-weight: 560; padding: 0 8px; height: 42px;
}
.header-actions .btn { display: none; }
.menu-toggle {
  position: relative; width: 44px; height: 44px; margin-right: -8px;
  display: grid; place-items: center; border-radius: var(--r);
}
.menu-toggle span {
  position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ink);
  transition: transform 260ms var(--ease-out), opacity 200ms ease;
}
.menu-toggle span:nth-child(1) { transform: translateY(-4px); }
.menu-toggle span:nth-child(2) { transform: translateY(4px); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

@media (min-width: 560px) {
  .header-actions .btn { display: inline-flex; }
}
@media (min-width: 1080px) {
  .nav { display: block; }
  .menu-toggle { display: none; }
  .header-inner { gap: 20px; }
  .brand { margin-right: auto; }
}
@media (min-width: 1240px) {
  .header-phone { display: inline-flex; }
  .brand img { height: 28px; }
}
@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { background: rgba(21, 23, 26, 0.05); }
  .dropdown a:hover { background: var(--bg); }
  .header-phone:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* mobile menu */
.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49;
  background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 32px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s linear 260ms;
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), visibility 0s;
}
.mobile-menu nav > ul > li { border-bottom: 1px solid var(--line); }
.mobile-menu nav > ul > li > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  font-size: clamp(1.6rem, 6vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em;
}
.mobile-menu nav > ul > li > a[aria-current="page"] { color: var(--muted); }
.mobile-menu .sub { padding: 0 0 16px; display: grid; gap: 4px; }
.mobile-menu .sub a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--muted); font-weight: 520; }
.mobile-menu__foot { display: grid; gap: 10px; margin-top: auto; font-size: var(--fs-small); }
.mobile-menu__foot a:not(.btn) { display: inline-flex; align-items: center; gap: 10px; font-weight: 560; }
.mobile-menu__foot .btn { margin-top: 10px; }
.mobile-menu__foot address { font-style: normal; color: var(--muted); }
@media (min-width: 1080px) { .mobile-menu { display: none; } }
html.menu-open { overflow: hidden; }

/* home: header sits over the hero video, then turns solid once the hero has scrolled past */
.brand .brand__light { display: none; }
.site-header--overlay {
  position: fixed; left: 0; right: 0;
  background: transparent;
  color: #fff;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.site-header--overlay .dropdown { color: var(--ink); }
.site-header--overlay:not(.is-solid) .brand__dark { display: none; }
.site-header--overlay:not(.is-solid) .brand__light { display: block; }
.site-header--overlay:not(.is-solid) .menu-toggle span { background: #fff; }
.site-header--overlay.is-solid {
  background: rgba(243, 243, 240, 0.97); color: var(--ink); border-bottom-color: var(--line);
}
html.menu-open .site-header--overlay { background: var(--bg); color: var(--ink); border-bottom-color: var(--line); }
html.menu-open .site-header--overlay .brand__dark { display: block; }
html.menu-open .site-header--overlay .brand__light { display: none; }
html.menu-open .site-header--overlay .menu-toggle span { background: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .site-header--overlay:not(.is-solid) .nav-link:hover { background: rgba(255, 255, 255, 0.12); }
}

/* ---------- home hero: full-bleed photo ---------- */
.hero-full {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  background: #0f1113; color: #fff;
}
.hero-full__media, .banner__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-full__media img, .banner__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-full__media img { object-position: 12% 50%; transform-origin: 62% 60%; }
@media (max-aspect-ratio: 4/5) { .hero-full__media img { object-position: 50% 50%; transform-origin: 50% 70%; } }
.hero-full__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 15, 17, 0.88) 0%, rgba(13, 15, 17, 0.6) 38%, rgba(13, 15, 17, 0.12) 72%, rgba(13, 15, 17, 0.28) 100%),
    linear-gradient(180deg, rgba(13, 15, 17, 0.6) 0%, rgba(13, 15, 17, 0) 24%, rgba(13, 15, 17, 0) 58%, rgba(13, 15, 17, 0.82) 100%);
}
.hero-full__inner {
  display: grid; gap: 36px; align-items: end;
  padding-top: calc(var(--header-h) + clamp(40px, 8vh, 96px));
  padding-bottom: clamp(104px, 15vh, 156px);
}
.hero-full__copy { display: grid; gap: 24px; justify-items: start; max-width: 880px; }
.hero-full .lead { color: rgba(255, 255, 255, 0.84); max-width: 50ch; }
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-mono); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
}
.kicker::before { content: ""; width: 32px; height: 2px; background: var(--amber); flex: none; transform-origin: left; }
.hero-full .kicker, .section--dark .kicker, .banner .kicker, .xhero .kicker, .cta-full .kicker { color: var(--amber); }
.hero-title {
  font-size: clamp(2.9rem, 1rem + 5.4vw, 6.2rem); line-height: 0.92;
  font-weight: 600; letter-spacing: -0.018em;
  text-transform: uppercase; text-wrap: balance;
}
.hero-title .hl { color: var(--amber); }
.btn--glass {
  border: 1px solid rgba(255, 255, 255, 0.42); color: #fff; background: rgba(13, 15, 17, 0.28);
}

.hero-card {
  width: 100%; padding: 4px 22px;
  background: rgba(19, 21, 24, 0.74); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.hero-card dl { display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-card dl > div { padding: 16px 0; display: grid; gap: 6px; align-content: start; }
.hero-card dl > div + div { border-left: 1px solid rgba(255, 255, 255, 0.12); padding-left: 16px; }
.hero-card dt { order: 2; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.68); line-height: 1.35; }
.hero-card dd { font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.8rem); line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hero-card dd span:not(.n) { color: var(--amber); }
.hero-card dd.dd-text { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); letter-spacing: 0.01em; padding-top: 0.2em; }
@media (prefers-reduced-transparency: reduce) {
  .hero-card, .btn--glass { background: rgba(19, 21, 24, 0.92); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (min-width: 1100px) {
  .hero-full__inner { grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; }
  .hero-card { padding: 6px 26px; }
  .hero-card dl { grid-template-columns: 1fr; }
  .hero-card dl > div { padding: 20px 0; gap: 8px; }
  .hero-card dl > div + div { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
  .hero-card dt { order: 0; font-size: 0.72rem; }
}
@media (max-width: 599px) {
  .hero-full__inner { padding-top: calc(var(--header-h) + 20px); padding-bottom: 84px; gap: 26px; }
  .hero-full__copy { gap: 16px; }
  .hero-full .kicker { font-size: 0.64rem; letter-spacing: 0.1em; }
  .hero-full .kicker::before { width: 18px; }
  .hero-card { padding: 0 12px; }
  .hero-card dl > div { padding: 12px 0; gap: 4px; }
  .hero-card dl > div + div { padding-left: 12px; }
  .hero-card dt { font-size: 0.56rem; letter-spacing: 0.04em; }
  .hero-card dd.dd-text { font-size: 0.8rem; letter-spacing: 0; white-space: nowrap; }
  .hero-title { font-size: clamp(2.45rem, 1rem + 6vw, 2.9rem); }
  .hero-full .lead { font-size: 1.02rem; }
}

/* ---------- inner page banner: photo header the nav sits over ---------- */
.banner {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #0f1113;
  min-height: clamp(460px, 72svh, 760px); display: flex; flex-direction: column; justify-content: flex-end;
}
.banner__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 15, 17, 0.84) 0%, rgba(13, 15, 17, 0.5) 52%, rgba(13, 15, 17, 0.18) 100%),
    linear-gradient(180deg, rgba(13, 15, 17, 0.6) 0%, rgba(13, 15, 17, 0) 30%, rgba(13, 15, 17, 0.7) 100%);
}
.banner__inner { display: grid; gap: 22px; justify-items: start; padding-top: calc(var(--header-h) + 56px); padding-bottom: clamp(48px, 7vw, 92px); }
.banner .crumbs { margin-bottom: 4px; color: rgba(255, 255, 255, 0.66); }
.banner .crumbs a { color: #fff; }
.banner h1 { font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.6rem); line-height: 0.98; max-width: 15ch; }
.banner .lead { color: rgba(255, 255, 255, 0.84); max-width: 56ch; }
.banner .lead strong { color: #fff; }
.banner__grid { display: grid; gap: 22px 64px; align-items: end; width: 100%; }
@media (min-width: 960px) { .banner__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } .banner__grid > :last-child { padding-bottom: 8px; } }
/* shorter header for pages where the content should come up quickly (contact) */
.banner--compact { min-height: clamp(360px, 50svh, 520px); }
.banner--compact .banner__inner { gap: 18px; padding-top: calc(var(--header-h) + 36px); padding-bottom: clamp(36px, 4.5vw, 60px); }
.banner--compact h1 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); }

@media (prefers-reduced-motion: no-preference) {
  /* the photo settles in on load, then drifts slower than the page as you scroll */
  .hero-full__media img, .banner__media img { animation: settle 2600ms var(--ease-out) both; }
  @supports (animation-timeline: scroll()) {
    .hero-full__media, .banner__media { animation: drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes settle { from { transform: scale(1.14); } to { transform: scale(1.03); } }
@keyframes drift { to { transform: translateY(16vh); } }

/* slab section along the foot of the hero: the amber tendon draws in, then a glint runs along it */
.hero-tendon { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(64px, 8vw, 104px); pointer-events: none; will-change: transform; contain: paint; }
.hero-tendon svg { width: 100%; height: 100%; }
.hero-tendon .slab { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.2; fill: none; }
.hero-tendon .col { stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.2; }
.hero-tendon .cable { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; }
.hero-tendon .glint { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0.018 0.982; stroke-dashoffset: 0.018; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-tendon .cable { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: tendon-draw 1800ms var(--ease-out) 500ms forwards; }
  .hero-tendon .glint { animation: tendon-glint 7s linear 2600ms infinite; }
}
@keyframes tendon-draw { to { stroke-dashoffset: 0; } }
@keyframes tendon-glint { 0% { stroke-dashoffset: 0.018; opacity: 0.9; } 100% { stroke-dashoffset: -1; opacity: 0.9; } }

/* ---------- capability ticker (the page's one marquee) ---------- */
.ticker { background: var(--ink); color: #fff; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ticker__track { display: flex; width: max-content; }
.ticker__group { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.ticker__group li {
  display: inline-flex; align-items: center; gap: 28px; padding: 20px 0 20px 28px;
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem); font-weight: 620; letter-spacing: 0.02em;
  text-transform: uppercase; white-space: nowrap;
}
.ticker__group li::after { content: "/"; color: var(--amber); font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .ticker__track { animation: marquee 46s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { width: auto; }
  .ticker__group { flex-wrap: wrap; padding-inline: var(--gutter); }
  .ticker__group[aria-hidden="true"] { display: none; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- who we are ---------- */
.intro { display: grid; gap: 56px; align-items: center; }
.intro__media { position: relative; padding-bottom: 14%; }
.intro__main { width: 80%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r); background: var(--bg-2); }
.intro__sub {
  position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 3 / 4;
  overflow: hidden; border-radius: var(--r); background: var(--bg-2);
  border: 6px solid var(--bg); box-sizing: content-box;
}
.intro__main img, .intro__sub img { width: 100%; height: 100%; object-fit: cover; }
.intro__tag {
  position: absolute; left: 16px; top: 16px;
  display: grid; gap: 4px; padding: 16px 20px 18px;
  background: var(--amber); color: var(--ink); border-radius: var(--r);
  box-shadow: 0 24px 40px -24px rgba(21, 23, 26, 0.5);
}
.intro__tag strong { font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem); line-height: 1; font-weight: 720; }
.intro__tag > span { font-size: 0.8rem; font-weight: 580; line-height: 1.3; max-width: 13ch; }
.intro__text { display: grid; gap: 24px; justify-items: start; }
.intro__text .h2 { max-width: 13ch; }
.values-inline { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.values-inline li { display: inline-flex; align-items: center; gap: 8px; font-weight: 560; font-size: var(--fs-small); }
.values-inline .i { width: 20px; height: 20px; }
@media (min-width: 960px) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(56px, 7vw, 112px); }
  .intro__tag { left: -20px; top: 32px; }
}

/* ---------- services: expanding photo panels ---------- */
.xpanels { display: grid; gap: 14px; }
.xpanel {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r);
  min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(22px, 2.4vw, 34px); background: var(--ink); color: #fff;
}
.xpanel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1000ms var(--ease-out); }
.xpanel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13, 15, 17, 0.08) 20%, rgba(13, 15, 17, 0.5) 55%, rgba(13, 15, 17, 0.9) 100%); }
.xpanel__icon {
  position: absolute; top: clamp(22px, 2.4vw, 34px); left: clamp(22px, 2.4vw, 34px);
  width: 50px; height: 50px; padding: 12px; border-radius: 50%;
  background: rgba(13, 15, 17, 0.38); border: 1px solid rgba(255, 255, 255, 0.24);
}
.xpanel__icon .i { width: 100%; height: 100%; }
.xpanel h3 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.4rem); line-height: 1.04; }
.xpanel h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.xpanel__more { display: grid; grid-template-rows: 1fr; }
.xpanel__more > div { overflow: hidden; display: grid; gap: 14px; align-content: start; padding-top: 12px; }
.xpanel p { color: rgba(255, 255, 255, 0.86); max-width: 44ch; }
.xpanel .tag { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.xpanel__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--amber); }
.xpanel__go .i { transition: transform 240ms var(--ease-out); }
@media (min-width: 960px) {
  .xpanels { display: flex; height: clamp(480px, 66vh, 640px); }
  .xpanel { flex: 1 1 0; min-width: 0; min-height: 0; transition: flex-grow 560ms var(--ease-in-out); }
  .xpanel.is-open { flex-grow: 2.4; }
  .xpanel:not(.is-open) h3 { font-size: clamp(1.4rem, 1.1rem + 0.8vw, 1.9rem); }
  .xpanel__more { grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease-in-out); }
  .xpanel__more > div { opacity: 0; transition: opacity 260ms ease; min-width: 340px; }
  .xpanel.is-open .xpanel__more { grid-template-rows: 1fr; }
  .xpanel.is-open .xpanel__more > div { opacity: 1; transition: opacity 360ms ease 200ms; }
}
@media (hover: hover) and (pointer: fine) {
  .xpanel:hover > img { transform: scale(1.04); }
  .xpanel:hover .xpanel__go .i { transform: translateX(4px); }
}

/* ---------- client logo wall (home) ---------- */
.clients.clients--compact li { aspect-ratio: 2 / 1; padding: 14px; }
.clients.clients--compact img { width: auto; max-height: 42px; }
@media (min-width: 1080px) { .clients.clients--compact { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* ---------- inner page hero ---------- */
.page-hero { padding-block: clamp(32px, 5vw, 72px) clamp(40px, 5vw, 64px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; font-size: var(--fs-small); color: var(--muted); }
.crumbs a { font-weight: 540; color: var(--ink); }
.crumbs .i { width: 12px; height: 12px; opacity: 0.6; }
.page-hero__grid { display: grid; gap: 24px 64px; align-items: end; }
.page-hero__grid .lead { max-width: 52ch; }
@media (min-width: 900px) {
  .page-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .page-hero__grid > :last-child { padding-bottom: 6px; }
}
.page-hero__aside { display: grid; gap: 20px; justify-items: start; }


/* service-page split hero */
.split-hero { display: grid; gap: 32px; align-items: center; }
.split-hero__media { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; background: var(--bg-2); }
.split-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .split-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 88px); }
  .split-hero__media { aspect-ratio: 4 / 4.4; }
}

/* ---------- project cards ---------- */
.pcard { position: relative; display: grid; gap: 14px; align-content: start; }
.pcard__media { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; background: var(--bg-2); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.pcard__body { display: grid; gap: 4px; }
.pcard__title { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; display: flex; justify-content: space-between; gap: 12px; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard__title .i { width: 20px; height: 20px; flex: none; margin-top: 2px; opacity: 0; transform: translate(-4px, 4px); transition: opacity 200ms ease, transform 260ms var(--ease-out); }
.pcard__loc { color: var(--muted); font-size: var(--fs-small); }
.pcard__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pcard__meta .tag { font-size: 0.74rem; padding: 3px 8px; }
.pcard--lg .pcard__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
.pcard--lg { grid-template-rows: 1fr auto; }
.pcard--lg .pcard__title { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 2rem); }
@media (hover: hover) and (pointer: fine) {
  .pcard:hover .pcard__media img { transform: scale(1.04); }
  .pcard:hover .pcard__title .i { opacity: 1; transform: none; }
}
.pcard:focus-within .pcard__title .i { opacity: 1; transform: none; }

.featured { display: grid; gap: 32px 20px; }
@media (min-width: 720px) {
  .featured { grid-template-columns: 1fr 1fr; }
  .featured .pcard--lg { grid-column: 1 / -1; }
  .featured .pcard--lg .pcard__media { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (min-width: 1080px) {
  .featured { grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: auto auto; }
  .featured .pcard--lg { grid-column: 1; grid-row: 1 / span 2; }
  .featured .pcard--lg .pcard__media { aspect-ratio: auto; }
}

.pgrid { display: grid; gap: 40px 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pgrid { grid-template-columns: repeat(3, 1fr); } }

/* skeletons while project data loads */
.skeleton .pcard__media, .skeleton .sk-line {
  background: linear-gradient(90deg, var(--bg-2) 0%, #f0f0ec 50%, var(--bg-2) 100%) 0 0 / 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .skeleton .pcard__media, .skeleton .sk-line { animation: shimmer 1.4s ease-in-out infinite; }
}
.sk-line { height: 14px; border-radius: var(--r); width: 70%; }
.sk-line--short { width: 40%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- dark feature: why PT teaser ---------- */
.why { display: grid; gap: 56px; align-items: center; }
.why__num {
  font-size: clamp(5rem, 3.4rem + 7vw, 10rem); line-height: 0.86; font-weight: 640;
  letter-spacing: -0.04em; color: var(--amber);
}
.why__num small { font-size: 0.42em; letter-spacing: -0.02em; margin-left: 4px; }
.why__copy { display: grid; gap: 20px; justify-items: start; }
.why__copy .h2 { max-width: 14ch; }
.why__copy .lead { color: var(--on-dark-muted); }
.slab-compare { display: grid; gap: 28px; }
.slab-compare figure { display: grid; gap: 12px; }
.slab-compare figcaption { display: flex; justify-content: space-between; gap: 16px; font-size: var(--fs-small); color: var(--on-dark-muted); }
.slab-compare figcaption strong { color: var(--on-dark); font-weight: 580; }
.slab-compare svg { width: 100%; height: auto; overflow: visible; }
.slab-compare .slab { fill: #3a3f45; }
.slab-compare .slab--pt { fill: #4a5057; }
.slab-compare .reo { stroke: #7b8189; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.slab-compare .tendon { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; }
.slab-compare .col { fill: #2a2e33; }
.slab-compare .dim { stroke: var(--on-dark-muted); stroke-width: 1; }
.slab-compare .note { font-size: var(--fs-xs); color: var(--on-dark-muted); }
.mini-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.mini-benefits li { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--on-dark-muted); }
.mini-benefits strong { color: var(--on-dark); font-weight: 580; display: flex; align-items: center; gap: 8px; }
.mini-benefits .i { color: var(--amber); width: 20px; height: 20px; }
@media (min-width: 960px) {
  .why { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(56px, 7vw, 120px); }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--amber); color: var(--ink); position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(72px, 8vw, 112px) clamp(150px, 14vw, 210px);
}
.cta-band__inner { display: grid; gap: 40px; align-items: center; position: relative; }
.cta-band__copy { display: grid; gap: 18px; justify-items: start; }
.cta-band .kicker::before { background: var(--ink); }
.cta-band .h2 { max-width: 17ch; font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.8rem); line-height: 1; }
.cta-band__copy > p:not(.kicker) { max-width: 50ch; font-size: var(--fs-lead); }
.cta-band .btn-row { margin-top: 8px; }
.cta-band .btn--ghost { border-color: rgba(21, 23, 26, 0.4); }
/* dot grid that fades out from behind the badge */
.cta-band__dots {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(21, 23, 26, 0.2) 1px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 50% 85% at 84% 38%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 85% at 84% 38%, #000 0%, transparent 72%);
}
/* slab section along the foot: the tendon draws in once.
   Its own layer: the cable is drawn by animating the stroke, which repaints every frame, and
   without one that repaint spread to the whole page (the main cause of scroll stutter) */
.cta-band__tendon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(96px, 10vw, 150px); z-index: -1; pointer-events: none; will-change: transform; contain: paint; }
.cta-band__tendon .slab, .cta-band__tendon .col { fill: none; stroke: rgba(21, 23, 26, 0.24); stroke-width: 1.2; }
.cta-band__tendon .cable { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.cta-band__tendon .glint { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0.018 0.982; stroke-dashoffset: 0.018; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reveal-all) .cta-band__tendon .cable { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  html.js .cta-band__tendon.is-in .cable { animation: tendon-draw 1600ms var(--ease-out) 150ms forwards; }
}
/* turning badge */
.cta-badge {
  position: relative; display: grid; place-items: center; justify-self: end;
  width: clamp(170px, 15vw, 224px); aspect-ratio: 1; border-radius: 50%; color: var(--ink); margin-right: clamp(0px, 3vw, 48px);
}
.cta-badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cta-badge__ring text { font-family: var(--f-mono); font-size: 14.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; fill: currentColor; }
.cta-badge__core {
  display: grid; place-items: center; width: 50%; aspect-ratio: 1; border-radius: 50%;
  background: var(--ink); color: var(--amber); box-shadow: 0 18px 40px -18px rgba(21, 23, 26, 0.6);
  transition: transform 500ms var(--ease-out);
}
.cta-badge__core .i { width: 34%; height: 34%; transition: transform 500ms var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { .cta-badge__ring { animation: spin 24s linear infinite; } }
@media (hover: hover) and (pointer: fine) {
  .cta-badge:hover .cta-badge__core { transform: scale(1.08); }
  .cta-badge:hover .cta-badge__core .i { transform: rotate(45deg); }
}
@media (max-width: 699px) { .cta-badge { display: none; } }
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: 1fr auto; gap: 64px; }
}

/* CTA with a photo (home) */
.cta-photo { display: grid; background: var(--amber); color: var(--ink); }
.cta-photo__body { display: grid; gap: 20px; justify-items: start; align-content: center; padding: clamp(56px, 8vw, 112px) var(--gutter); }
.cta-photo__body .h2 { max-width: 15ch; }
.cta-photo__body p { max-width: 46ch; font-size: var(--fs-lead); }
.cta-photo__body .btn--ghost { border-color: rgba(21, 23, 26, 0.4); }
.cta-photo__img { position: relative; min-height: 300px; overflow: hidden; }
.cta-photo__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .cta-photo { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .cta-photo__body { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); padding-right: clamp(40px, 5vw, 80px); }
  .cta-photo__img { min-height: 520px; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark-muted); padding-top: clamp(56px, 7vw, 96px); font-size: var(--fs-small); }
.footer-grid { display: grid; gap: 40px; padding-bottom: 48px; }
.footer-brand img { height: 30px; width: auto; margin-bottom: 20px; }
.footer-brand p { max-width: 36ch; }
.site-footer h2 { font-size: var(--fs-xs); font-family: var(--f-mono); font-weight: 450; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark); margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--on-dark); transition: color 160ms ease; }
.footer-contact li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.footer-contact .i { margin-top: 3px; color: var(--amber); }
.footer-contact address { font-style: normal; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line-dark); font-size: var(--fs-xs);
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1080px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } .footer-brand { grid-column: auto; } }
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: var(--amber); }
}

/* ---------- services hub bento ---------- */
.bento { display: grid; gap: 16px; }
.tile {
  position: relative; overflow: hidden; border-radius: var(--r);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  min-height: 340px; padding: clamp(24px, 3vw, 40px);
  background: var(--surface); border: 1px solid var(--line);
  isolation: isolate;
}
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 900ms var(--ease-out); }
.tile--photo { color: #fff; border: 0; }
.tile--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 23, 26, 0.12) 0%, rgba(21, 23, 26, 0.38) 40%, rgba(21, 23, 26, 0.86) 100%); }
.tile--photo p { color: rgba(255, 255, 255, 0.82); }
.tile--concrete { background: var(--bg-2); border: 0; }
.tile :is(h2, h3) { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem); line-height: 1.05; }
.tile :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.tile__icon .i { width: 100%; height: 100%; }
.tile p { max-width: 44ch; }
.tile .tags { margin-top: 4px; }
.tile--photo .tag { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.tile__icon { position: absolute; top: clamp(24px, 3vw, 40px); left: clamp(24px, 3vw, 40px); width: 52px; height: 52px; padding: 12px; border-radius: var(--r); background: var(--bg); }
.tile__go { position: absolute; top: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid currentColor; opacity: 0.8; transition: transform 260ms var(--ease-out), background-color 200ms ease; }
.tile__go .i { width: 18px; height: 18px; }
@media (min-width: 900px) {
  .bento { grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(2, minmax(300px, auto)); }
  .bento .tile:first-child { grid-row: span 2; min-height: 640px; }
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover > img { transform: scale(1.04); }
  .tile:hover .tile__go { transform: rotate(-45deg); }
}

/* ---------- sectors ---------- */
.sectors { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.sector { display: grid; gap: 14px; padding: 24px 20px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); font-weight: 580; }
.sector .i { width: 32px; height: 32px; }
@media (min-width: 720px) { .sectors { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .sectors { grid-template-columns: repeat(6, 1fr); } .sector { padding: 28px 24px 32px; } }
.sector { position: relative; isolation: isolate; overflow: hidden; transition: color 360ms ease; }
.sector::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 520ms var(--ease-out); }
.sector .i { transition: transform 420ms var(--ease-out), color 360ms ease; }
@media (hover: hover) and (pointer: fine) {
  .sector:hover { color: #fff; }
  .sector:hover::before { transform: scaleY(1); }
  .sector:hover .i { color: var(--amber); transform: translateY(-4px); }
}
@media (prefers-reduced-motion: no-preference) {
  /* each tile grows out of an amber dot into its square, one after another.
     The reveal uses clip-path and `translate`, so hover can keep `transform`. */
  html.js:not(.reveal-all) .sectors[data-reveal="morph"] { opacity: 1; transform: none; }
  html.js:not(.reveal-all) .sectors[data-reveal="morph"] .sector {
    clip-path: inset(34% 38% round 999px); background-color: var(--amber);
    transition: clip-path 1000ms var(--ease-in-out) calc(var(--n, 0) * 90ms),
      background-color 700ms ease calc(var(--n, 0) * 90ms + 380ms), color 360ms ease;
  }
  html.js .sectors[data-reveal="morph"].is-in .sector { clip-path: inset(0 0 round 0); background-color: transparent; }
  html.js:not(.reveal-all) .sectors[data-reveal="morph"] .sector > * {
    opacity: 0; translate: 0 16px;
    transition: opacity 500ms ease calc(var(--n, 0) * 90ms + 520ms), translate 800ms var(--ease-out) calc(var(--n, 0) * 90ms + 520ms),
      transform 420ms var(--ease-out), color 360ms ease;
  }
  html.js .sectors[data-reveal="morph"].is-in .sector > * { opacity: 1; translate: 0 0; }
}

/* ---------- service detail: included items, applications ---------- */
.included { display: grid; gap: 16px; }
.inc {
  display: grid; gap: 14px; align-content: start;
  padding: clamp(24px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
}
.inc .i { width: 36px; height: 36px; }
.inc h3 { font-size: 1.4rem; }
.inc p { color: var(--muted); }
.inc ul { padding-left: 0; list-style: none; display: grid; gap: 8px; font-size: var(--fs-small); border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.inc li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.inc li .i { width: 16px; height: 16px; margin-top: 4px; }
@media (min-width: 800px) {
  .included { grid-template-columns: repeat(2, 1fr); }
  .included--3 { grid-template-columns: 1.2fr 1fr; }
  .included--3 .inc:first-child { grid-row: span 2; }
}
@media (min-width: 1080px) {
  .included--3 { grid-template-columns: repeat(3, 1fr); }
  .included--3 .inc:first-child { grid-row: auto; }
}

/* a numbered vertical list beside a tall photo (where we use PT, when to call us) */
.uses { display: grid; gap: 48px; align-items: center; }
.uses__body { display: grid; gap: 18px; align-content: start; }
.uses__list { counter-reset: use; margin-top: 14px; border-top: 1px solid var(--line-strong); }
.uses__list li {
  counter-increment: use; position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 15px 4px; border-bottom: 1px solid var(--line-strong);
  font-family: var(--f-display); font-size: clamp(1.08rem, 0.98rem + 0.45vw, 1.38rem); font-weight: 560; letter-spacing: -0.01em; line-height: 1.25;
}
.uses__list li::after { content: counter(use, decimal-leading-zero); font-family: var(--f-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; color: var(--muted); }
.uses__list li::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--amber);
  transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease-out);
}
.uses__list .i {
  width: 44px; height: 44px; padding: 11px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, transform 500ms var(--ease-out), opacity 400ms ease;
}
.uses__media { position: relative; margin: 0; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; background: var(--bg-2); }
@media (min-width: 960px) { .uses__media { aspect-ratio: 4 / 5; } }
.uses__media img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reveal-all) .uses__list li[data-reveal]:not(.is-in) .i { transform: scale(0.85); opacity: 0; }
  .uses__list li[data-reveal] .i { transition-delay: 0ms, 0ms, 0ms, calc(var(--d, 0ms) + 120ms), calc(var(--d, 0ms) + 120ms); }
}
@media (hover: hover) and (pointer: fine) {
  .uses__list li:hover::before { transform: scaleX(1); }
  .uses__list li:hover .i { background: var(--ink); color: var(--amber); border-color: var(--ink); }
}
@media (min-width: 960px) {
  .uses { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(56px, 7vw, 112px); }
  .uses--flip { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
  .uses--flip .uses__media { order: -1; }
}

/* callout used on scanning and remedial pages */
.callout {
  display: grid; gap: 16px; padding: clamp(24px, 3vw, 40px);
  border-left: 3px solid var(--amber); background: var(--surface);
}
.callout p { color: var(--muted); max-width: 60ch; }
.callout strong { color: var(--ink); }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; gap: 32px; }
@media (min-width: 960px) { .faq-wrap { grid-template-columns: 0.75fr 1.25fr; gap: 80px; } .faq-wrap .section-head { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; } }
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font-size: 1.12rem; font-weight: 580;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 20px; height: 20px; transition: transform 240ms var(--ease-out); }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq .faq__a { padding: 0 48px 24px 0; color: var(--muted); max-width: 66ch; }
.faq .faq__a p + p { margin-top: 0.8em; }
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq__a { animation: faq-in 260ms var(--ease-out); }
}
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- why PT page: load balance demo ---------- */
.demo { display: grid; gap: 32px; }
.demo__panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 40px); display: grid; gap: 24px; }
.demo__panel > svg { width: 100%; height: auto; overflow: visible; }
.demo .d-slab { fill: #c9c9c3; stroke: #8f9399; stroke-width: 1; }
.demo .d-col { fill: #a3a6aa; }
.demo .d-ground { stroke: var(--line-strong); stroke-width: 1; }
.demo .d-tendon { fill: none; stroke: var(--amber); stroke-width: 3.5; stroke-linecap: round; }
.demo .d-tendon--slack { stroke-dasharray: 8 7; }
.demo .d-load { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.demo .d-up { stroke: #d48a00; stroke-width: 2; fill: none; }
.demo .d-anchor { fill: var(--ink); }
.demo .d-text { font-family: var(--f-mono); font-size: 17px; fill: var(--muted); }
.demo__controls { display: grid; gap: 16px; }
.demo__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.demo__readout { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--fs-small); color: var(--muted); }
.demo__readout b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.range { width: 100%; appearance: none; -webkit-appearance: none; height: 32px; background: transparent; cursor: pointer; touch-action: pan-y; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--amber) var(--p, 0%), var(--bg-2) var(--p, 0%)); }
.range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--bg-2); }
.range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--amber); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--ink); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); transition: transform 140ms var(--ease-out); }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--ink); }
.demo__note { font-size: var(--fs-xs); color: var(--muted); }
@media (min-width: 1080px) { .demo { grid-template-columns: 0.7fr 1.3fr; gap: 64px; align-items: center; } }

/* benefits bento */
.benefits { display: grid; gap: 16px; }
.benefit {
  display: grid; gap: 12px; align-content: end;
  min-height: 220px; padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  position: relative; overflow: hidden; isolation: isolate;
}
.benefit .i { width: 34px; height: 34px; }
.benefit h3 { font-size: 1.35rem; }
.benefit p { color: var(--muted); font-size: var(--fs-small); max-width: 42ch; }
.benefit--big { background: var(--ink); color: var(--on-dark); border: 0; }
.benefit--big .why__num { font-size: clamp(4rem, 3rem + 4vw, 7rem); color: var(--amber); max-width: none; }
.benefit--big p { color: var(--on-dark-muted); font-size: var(--fs-body); }
.benefit--photo { color: #fff; border: 0; min-height: 280px; }
.benefit--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.benefit--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21, 23, 26, 0.05) 20%, rgba(21, 23, 26, 0.85)); }
.benefit--photo p { color: rgba(255, 255, 255, 0.85); }
.benefit--amber { background: var(--amber); border: 0; }
@media (max-width: 719px) { .benefit { min-height: 0; } .benefit--photo { min-height: 260px; } }
.benefit--amber p { color: rgba(21, 23, 26, 0.78); }
@media (min-width: 720px) { .benefits { grid-template-columns: repeat(2, 1fr); } .benefit--big, .benefit--photo { grid-column: 1 / -1; } }
@media (min-width: 1080px) {
  .benefits { grid-template-columns: repeat(4, 1fr); }
  .benefit--big { grid-column: span 2; grid-row: span 2; }
  .benefit--photo { grid-column: span 2; }
}

/* comparison */
.compare { display: grid; gap: 16px; }
.compare__col { padding: clamp(24px, 3vw, 40px); border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); display: grid; gap: 18px; align-content: start; }
.compare__col--pt { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.compare__col h3 { font-size: 1.5rem; }
.compare__col ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.compare__col li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; }
.compare__col li .i { margin-top: 3px; }
.compare__col--pt li .i { color: var(--amber); }
.compare__col:not(.compare__col--pt) li { color: var(--muted); }
@media (min-width: 800px) { .compare { grid-template-columns: 1fr 1fr; } }

/* ---------- about ---------- */
/* about: the mission, beside a full-height photo */
.mission { display: grid; overflow: hidden; }
.mission__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-2); }
.mission__media img { width: 100%; height: 100%; object-fit: cover; }
.mission__body { display: grid; gap: 24px; align-content: center; justify-items: start; padding: clamp(56px, 8vw, 120px) var(--gutter); }
.mission__title { font-size: clamp(2.3rem, 1.4rem + 3vw, 4.2rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 13ch; color: #fff; }
.mission__text { font-size: var(--fs-lead); line-height: 1.6; color: var(--on-dark-muted); max-width: 52ch; }
.mission__pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 560px; margin-top: 12px; border-top: 1px solid var(--line-dark); }
.mission__pillars li { display: grid; gap: 8px; padding: 20px 14px 0 0; font-family: var(--f-display); font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); font-weight: 600; color: #fff; }
.mission__pillars li + li { padding-left: 18px; border-left: 1px solid var(--line-dark); }
.mission__pillars span { font-family: var(--f-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; color: var(--amber); }
@media (min-width: 960px) {
  .mission { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(90svh, 840px); }
  .mission__media { aspect-ratio: auto; height: 100%; }
  .mission__body { padding-left: clamp(48px, 6vw, 112px); padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); }
}

.values { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line-strong); }
.value { display: grid; grid-template-columns: 44px 1fr; gap: 6px 18px; padding: 26px 0; border-bottom: 1px solid var(--line-strong); }
.value .i { grid-row: span 2; width: 36px; height: 36px; }
.value h3 { font-size: 1.25rem; }
.value p { color: var(--muted); font-size: var(--fs-small); max-width: 40ch; }
@media (min-width: 720px) {
  .values { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
}
@media (min-width: 1080px) {
  .values { grid-template-columns: repeat(3, 1fr); }
}

.clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.clients li { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.clients img { max-width: 80%; height: auto; opacity: 0.78; transition: opacity 240ms ease; }
@media (min-width: 640px) { .clients { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) { .clients li:hover img { opacity: 1; } }

.story { display: grid; gap: 40px; align-items: start; }
.story__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; }
.story__stats div { background: var(--bg); padding: 24px; display: grid; gap: 6px; }
.story__stats .stat__num { font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem); }
.story__stats p { color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 960px) { .story { grid-template-columns: 1.1fr 0.9fr; gap: 96px; } }

/* ---------- projects page: filters ---------- */
.filters { display: grid; gap: 22px; align-content: start; margin-bottom: clamp(40px, 5vw, 64px); }
.filter-group { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.filter-group[hidden] { display: none; }
.filter-group legend, .filter-group > .label { padding: 0; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font-size: 0.92rem; font-weight: 560; background: var(--surface);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 140ms var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip .count { font-family: var(--f-mono); font-size: 0.75rem; opacity: 0.6; }
@media (hover: hover) and (pointer: fine) { .chip:hover:not([aria-pressed="true"]) { border-color: var(--ink); } }

.search { position: relative; }
.search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.search input { padding-left: 42px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; margin-bottom: 28px; border-block: 1px solid var(--line); }
.result-count { font-size: var(--fs-small); color: var(--muted); }
.result-count b { color: var(--ink); }
.select-wrap { position: relative; display: inline-flex; align-items: center; }
.select-wrap select { appearance: none; -webkit-appearance: none; min-height: 42px; padding: 0 40px 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); font-size: 16px; font-weight: 540; cursor: pointer; }
.select-wrap .i { position: absolute; right: 12px; width: 14px; height: 14px; pointer-events: none; }
/* one row on wide screens: state, project type, search. The State filter is hidden while every
   project is in one state, and project type and search then share the row. */
@media (min-width: 860px) {
  .filters { grid-template-columns: auto minmax(0, 1fr); gap: 28px clamp(32px, 4vw, 56px); }
  .filters .filter-group:last-child { grid-column: 1 / -1; max-width: 420px; }
  .filters:has(> [hidden]) { grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); }
  .filters:has(> [hidden]) .filter-group:last-child { grid-column: auto; max-width: none; }
}
@media (min-width: 1100px) {
  .filters { grid-template-columns: auto minmax(0, 1fr) minmax(240px, 300px); }
  .filters .filter-group:last-child { grid-column: auto; max-width: none; }
  .filters:has(> [hidden]) { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); }
}

.empty {
  display: grid; justify-items: center; text-align: center; gap: 14px;
  padding: clamp(48px, 7vw, 96px) 24px;
  border: 1px dashed var(--line-strong); border-radius: var(--r);
}
.empty .i { width: 40px; height: 40px; color: var(--muted); }
.empty h3 { font-size: 1.4rem; }
.empty p { color: var(--muted); max-width: 44ch; }

/* ---------- project detail: photo and facts side by side, photo stays in view ---------- */
.proj { padding-block: clamp(24px, 3vw, 40px) clamp(56px, 7vw, 96px); }
.proj .crumbs { margin-bottom: clamp(20px, 2.5vw, 32px); }
.proj-layout { display: grid; gap: 32px; align-items: start; }
.proj-media { position: relative; overflow: hidden; border-radius: var(--r); background: var(--bg-2); min-height: 240px; }
.proj-media img { width: 100%; height: auto; max-height: calc(100svh - var(--header-h) - 56px); object-fit: cover; }
.proj-media.is-lowres { display: grid; place-items: center; padding: clamp(20px, 4vw, 48px); min-height: 360px; }
.proj-media.is-lowres img { width: auto; max-width: 100%; border-radius: var(--r); box-shadow: 0 30px 60px -30px rgba(21, 23, 26, 0.35); }
.proj-info { display: grid; gap: 26px; align-content: start; }
.proj-info h1 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem); max-width: 14ch; }
.proj-loc { display: inline-flex; align-items: flex-start; gap: 8px; font-size: var(--fs-lead); color: var(--muted); margin-top: 12px; }
.proj-loc .i { margin-top: 0.25em; }
.spec { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line-strong); }
.spec div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line-strong); display: grid; gap: 4px; }
.spec dt { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--muted); }
.spec dd { font-weight: 600; font-size: 1.05rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; }
.facts div { background: var(--surface); padding: 18px; display: grid; gap: 6px; align-content: start; }
.facts .stat__num { font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.6rem); }
/* four tiles sit as a tidy 2 x 2 rather than three and a gap */
.facts:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts .is-pt { background: var(--amber); }
.facts .is-pt .label { color: rgba(21, 23, 26, 0.72); }
/* the written brief sits under the photo */
.proj-brief { display: grid; gap: 18px; margin-top: clamp(28px, 3.5vw, 44px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line-strong); }
.proj-brief__title { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2rem); }
.proj-brief .prose > p { max-width: 66ch; }
/* the builder's logo under the brief: small, the same ink as the client logos */
.proj-builder { display: grid; gap: 12px; justify-items: start; margin: 4px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
.proj-builder img { height: 48px; width: auto; max-width: 190px; object-fit: contain; object-position: left center; }
@media (max-width: 959px) {
  /* phones: photo, then name and facts, then the brief */
  .proj-visual { display: contents; }
  .proj-info { order: 1; }
  .proj-brief { order: 2; margin-top: 8px; }
}
@media (min-width: 960px) {
  .proj-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 72px); }
  .proj-media img { max-height: calc(100svh - var(--header-h) - 150px); }
}
@media (min-width: 960px) and (min-height: 760px) {
  /* the name, value and facts stay in view while reading the brief (when they fit the screen) */
  .proj-info { position: sticky; top: calc(var(--header-h) + 24px); }
}

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 40px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }

/* previous / next project: stacked on phones, side by side (mirrored) from 800px */
.proj-nav { display: grid; border-top: 1px solid var(--line-strong); }
.proj-nav__item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; padding-block: 24px; }
.proj-nav__item + .proj-nav__item { border-top: 1px solid var(--line); }
.proj-nav__img { display: block; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; background: var(--bg-2); }
.proj-nav__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.proj-nav__text { display: grid; gap: 8px; min-width: 0; }
.proj-nav__title { font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem); font-weight: 620; letter-spacing: -0.025em; line-height: 1.08; display: flex; align-items: center; gap: 12px; }
.proj-nav__title .i { flex: none; width: 0.8em; height: 0.8em; transition: transform 260ms var(--ease-out); }
.proj-nav__loc { color: var(--muted); }
@media (min-width: 800px) {
  .proj-nav { grid-template-columns: 1fr 1fr; }
  .proj-nav__item { grid-template-columns: 184px minmax(0, 1fr); gap: 24px; padding-block: 32px; }
  .proj-nav__item--prev { padding-right: clamp(20px, 3vw, 40px); }
  .proj-nav__item + .proj-nav__item { border-top: 0; border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 40px); }
  .proj-nav__item--next { grid-template-columns: minmax(0, 1fr) 184px; text-align: right; }
  .proj-nav__item--next .proj-nav__img { order: 2; }
  .proj-nav__item--next .proj-nav__title { justify-content: flex-end; }
}
@media (hover: hover) and (pointer: fine) {
  .proj-nav__item:hover .proj-nav__img img { transform: scale(1.04); }
  .proj-nav__item--prev:hover .proj-nav__title .i { transform: translateX(-6px); }
  .proj-nav__item--next:hover .proj-nav__title .i { transform: translateX(6px); }
}

/* ---------- contact ---------- */
.contact { display: grid; gap: 40px; align-items: start; }
@media (min-width: 1000px) { .contact { grid-template-columns: 1.25fr 0.75fr; gap: 64px; } }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3.5vw, 48px); }
.form { display: grid; gap: 20px; }
.form-row { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font-size: var(--fs-small); font-weight: 580; }
.field label .opt { font-weight: 450; color: var(--muted); }
.field .hint { font-size: var(--fs-xs); color: var(--muted); }
.input, .field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font-size: 16px; line-height: 1.4;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.field .select-wrap { display: flex; }
.field .select-wrap select { width: 100%; min-height: 50px; font-weight: 450; background: #fff; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(21, 23, 26, 0.12);
}
.field input::placeholder, .field textarea::placeholder { color: #767b82; }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: #b3261e; }
.field .error { display: none; align-items: center; gap: 6px; font-size: var(--fs-xs); color: #b3261e; font-weight: 560; }
.field.has-error .error { display: flex; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 4px; }
.form__foot p { font-size: var(--fs-xs); color: var(--muted); max-width: 40ch; }
.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
.btn .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; display: none; }
.btn[aria-busy="true"] .spinner { display: block; animation: spin 700ms linear infinite; }
.btn[aria-busy="true"] .i { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-status { display: none; gap: 12px; padding: 20px; border-radius: var(--r); grid-template-columns: 24px 1fr; }
.form-status.is-visible { display: grid; }
.form-status .i { width: 24px; height: 24px; }
.form-status--ok { background: #e6f2e9; color: #1d4d2c; }
.form-status--err { background: #f9e7e5; color: #7d1d17; }
.form-status h3 { font-size: 1.05rem; letter-spacing: 0; }
.form-status p { font-size: var(--fs-small); }
.form-status a { text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }

.contact-aside { display: grid; gap: 16px; }
.contact-card { background: var(--ink); color: var(--on-dark); border-radius: var(--r); padding: clamp(24px, 3vw, 36px); display: grid; gap: 4px; }
.contact-card h2 { font-size: 1.4rem; margin-bottom: 12px; }
.contact-line { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-dark); }
.contact-line .i { color: var(--amber); margin-top: 3px; }
.contact-line .label { color: var(--on-dark-muted); display: block; }
.contact-line a, .contact-line address { font-weight: 580; font-style: normal; font-size: 1.05rem; }
.copy-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); color: var(--on-dark-muted); }
.copy-btn .i { width: 14px; height: 14px; color: inherit; margin: 0; }
.checklist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; }
.checklist h2 { font-size: 1.15rem; }
.checklist ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: var(--fs-small); color: var(--muted); }
.checklist li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.checklist .i { margin-top: 3px; color: var(--ink); }
/* office: a dark address card beside a large, full-colour map */
.office { padding-top: 0; }
.office__grid { display: grid; gap: 16px; }
.office__card {
  display: grid; gap: 16px; align-content: center; justify-items: start;
  padding: clamp(28px, 3.5vw, 48px); border-radius: var(--r); background: var(--ink); color: var(--on-dark);
}
.office__card .kicker { color: var(--amber); }
.office__card h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.office__card address { font-style: normal; font-size: 1.1rem; font-weight: 560; line-height: 1.5; }
.office__note { color: var(--on-dark-muted); font-size: var(--fs-small); max-width: 34ch; }
.office__card .btn { margin-top: 6px; }
.office__map { position: relative; overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); background: var(--bg-2); height: clamp(380px, 58vh, 560px); }
.office__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 900px) { .office__grid { grid-template-columns: minmax(310px, 0.42fr) minmax(0, 1fr); } }
@media (hover: hover) and (pointer: fine) { .copy-btn:hover { color: var(--on-dark); } }

.quick-contact { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
@media (min-width: 1000px) { .quick-contact { display: none; } }

/* ---------- 404 ---------- */
.notfound { min-height: calc(100svh - var(--header-h) - 120px); display: grid; align-content: center; gap: 24px; justify-items: start; padding-block: 64px; }
.notfound .label { font-size: 1rem; }

/* ---------- reveal on scroll ----------
   Content is only hidden when JS is running (html.js) and motion is allowed.
   main.js adds .is-in as items enter the viewport. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.reveal-all) [data-reveal] {
    opacity: 0; transform: translateY(16px);
    transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  html.js:not(.reveal-all) [data-reveal="fade"] { transform: none; }
  html.js:not(.reveal-all) [data-reveal="img"] { transform: scale(1.03); transition-duration: 900ms, 1400ms; }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }

  [data-hero] { animation: rise 900ms var(--ease-out) both; animation-delay: var(--d, 0ms); }
  [data-hero="fade"] { animation-name: fade-in; animation-duration: 1200ms; }
}
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes fade-in { from { opacity: 0; } }

/* ==========================================================================
   Polish: value badges, logo wall, scroll progress, footer wordmark, motion
   ========================================================================== */

/* project value badge on the card photo */
.pcard__value {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  padding: 7px 11px 6px; border-radius: var(--r);
  background: var(--amber); color: var(--ink);
  font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: 0.005em;
  box-shadow: 0 8px 20px -10px rgba(21, 23, 26, 0.45);
}
.pcard--lg .pcard__value { font-size: 1.2rem; padding: 9px 13px 8px; left: 16px; top: 16px; }

/* builders and developers: two rows sliding in opposite directions */
.logo-marquee {
  display: grid; gap: 14px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-row { display: flex; width: max-content; }
.logo-row__group { display: flex; gap: 14px; padding-right: 14px; }
.logo-tile {
  flex: none; width: clamp(150px, 15vw, 196px); height: clamp(80px, 7.4vw, 96px);
  display: grid; place-items: center; padding: 16px 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: border-color 240ms ease, transform 300ms var(--ease-out);
}
.logo-tile img { width: auto; height: auto; max-width: 100%; max-height: 42px; opacity: 0.78; transition: opacity 240ms ease; }
@media (prefers-reduced-motion: no-preference) {
  .logo-row { animation: marquee 56s linear infinite; }
  .logo-row--reverse { animation-direction: reverse; animation-duration: 62s; }
  .logo-marquee:hover .logo-row { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-row { width: auto; }
  .logo-row__group { flex-wrap: wrap; }
  .logo-row__group[aria-hidden="true"] { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .logo-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); }
  .logo-tile:hover img { opacity: 1; }
}

/* thin amber reading-progress line under the header */
.progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--amber); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: progress linear both; animation-timeline: scroll(root); }
  }
}
@keyframes progress { to { transform: scaleX(1); } }

/* oversized wordmark closing the footer */
.footer-word {
  display: flex; justify-content: space-between; overflow: hidden; white-space: nowrap;
  padding: 0 var(--gutter) 0.06em; margin-top: clamp(8px, 2vw, 24px);
  font-family: "Antonio", var(--f-display); font-size: 14vw; line-height: 1; font-weight: 600; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2);
  user-select: none; pointer-events: none;
}
.footer-word span { display: block; }
.footer-word .gap { width: 0.32em; }

/* why post-tensioning: give the stacked text room */
.why__copy { gap: 22px; }
.why__num { margin-bottom: 6px; }
.slab-compare .note { margin: 4px 0 0; line-height: 1.5; }
ul.mini-benefits { margin-top: 36px; padding-top: 32px; row-gap: 26px; }
.mini-benefits li { line-height: 1.5; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* headings rise word by word as they enter (main.js wraps the words) */
  .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .split .wi { display: inline-block; transform: translateY(108%); transition: transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 30ms + var(--d, 0ms)); }
  .split.is-in .wi { transform: none; }
  html.js [data-reveal].split { opacity: 1; transform: none; }

  /* photos open like a curtain and settle. The clip sits on the image, not the observed
     frame: a fully clipped frame never counts as "in view", so it would never open. */
  html.js:not(.reveal-all) [data-reveal="clip"] { opacity: 1; transform: none; }
  html.js:not(.reveal-all) [data-reveal="clip"] > img {
    clip-path: inset(0 0 100% 0); transform: scale(1.06);
    transition: clip-path 900ms var(--ease-out), transform 1200ms var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  html.js [data-reveal="clip"].is-in > img { clip-path: inset(0 0 0 0); transform: none; }

  /* section labels draw their amber rule */
  html.js .kicker[data-reveal]::before { transform: scaleX(0); transition: transform 800ms var(--ease-out) 200ms; }
  html.js .kicker[data-reveal].is-in::before { transform: none; }

  /* footer wordmark: the letters rise into place one after another */
  html.js:not(.reveal-all) .footer-word[data-reveal] { opacity: 1; transform: none; }
  html.js:not(.reveal-all) .footer-word[data-reveal] span { transform: translateY(105%); transition: transform 1200ms var(--ease-out) calc(var(--i, 0) * 55ms); }
  html.js .footer-word[data-reveal].is-in span { transform: none; }
}

/* ==========================================================================
   Scroll experience: smooth scroll, home page sections, building comparison
   Initial (pre-animation) states only apply under html.motion, which the head
   script sets when motion is allowed; without it every section shows its
   finished layout.
   ========================================================================== */

/* decorative loops pause while they are off screen (main.js adds .is-paused) */
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* smooth scrolling (Lenis) */
html.lenis, html.lenis body { height: auto; }
/* Lenis does the smoothing, so the browser's own smooth scrolling must stay off the whole time
   Lenis runs (this Lenis version only marks itself "lenis-smooth" mid-scroll; anything that moved
   the page in between got a second, browser-made glide on top) */
html.lenis { scroll-behavior: auto !important; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* the header tucks away while reading down and returns on the way up */
.site-header, .site-header--overlay { transition: transform 460ms var(--ease-out), background-color 300ms ease, border-color 300ms ease, color 300ms ease; }
.site-header.is-hidden { transform: translateY(-101%); }

/* paragraphs in a text block share one size and colour */
.prose > p, .prose > .lead { font-size: 1.1rem; line-height: 1.65; color: #33373d; max-width: 62ch; }
.section--dark .prose > p, .section--dark .prose > .lead { color: var(--on-dark-muted); }

/* ---------- home: hero frame that opens to full screen ---------- */
.xhero {
  --p: 1;
  position: relative; isolation: isolate; overflow: hidden;
  height: 100svh; min-height: 600px; display: flex; flex-direction: column;
  background: #0d0f11; color: #fff;
}
/* the frame opens like a window: four dark shutters slide away from the photo. Sliding solid
   panels is pure GPU work, so it never redraws the large photo underneath. */
.xhero__frame {
  --fx: 31%; --fy: 26%;
  position: absolute; inset: 0; z-index: -2; overflow: hidden;
}
.xhero__frame picture { display: block; width: 100%; height: 100%; will-change: transform; }
.xhero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 32% 50%; transform-origin: 55% 60%; will-change: transform; }
.xhero__shutter { position: absolute; background: #0d0f11; will-change: transform; display: none; }
.motion .xhero__shutter { display: block; }
.xhero__shutter--t { left: 0; right: 0; top: 0; height: calc(var(--fy) + 1px); }
.xhero__shutter--b { left: 0; right: 0; bottom: 0; height: calc(var(--fy) + 1px); }
.xhero__shutter--l { top: 0; bottom: 0; left: 0; width: calc(var(--fx) + 1px); }
.xhero__shutter--r { top: 0; bottom: 0; right: 0; width: calc(var(--fx) + 1px); }
@media (max-aspect-ratio: 4/5) { .xhero__frame img { object-position: 50% 50%; } .xhero__frame { --fy: 22%; --fx: 9%; } }
.xhero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(13, 15, 17, 0.38), rgba(13, 15, 17, 0.72)),
    linear-gradient(180deg, rgba(13, 15, 17, 0.5) 0%, rgba(13, 15, 17, 0) 28%, rgba(13, 15, 17, 0) 62%, rgba(13, 15, 17, 0.88) 100%);
}
.xhero__inner {
  flex: 1; display: grid; align-content: center; justify-items: center; text-align: center; gap: 26px;
  padding-top: calc(var(--header-h) + 16px); padding-bottom: 132px;
}
.xhero__title {
  font-size: clamp(3rem, 0.5rem + 7.4vw, 8.6rem); line-height: 0.88; font-weight: 600;
  letter-spacing: -0.035em; text-transform: uppercase; text-wrap: balance;
}
.xhero__line { display: block; }
.xhero__title em { font-style: normal; color: var(--amber); }
.xhero__more { display: grid; gap: 24px; justify-items: center; }
.xhero__lead { max-width: 46ch; font-size: clamp(0.98rem, 0.93rem + 0.22vw, 1.1rem); line-height: 1.6; color: rgba(255, 255, 255, 0.84); }
@media (max-width: 699px) {
  .xhero__kicker { font-size: 0.62rem; letter-spacing: 0.1em; }
  .xhero__kicker::before { display: none; }
  .xhero__inner { padding-bottom: 110px; gap: 20px; }
}
.motion .xhero__frame picture { opacity: 0; }
/* fixed raster scale for the parts the scroll animates, so the big headline isn't re-drawn
   at every new size as it shrinks */
.motion .xhero__title, .motion .xhero__kicker, .motion .xhero__more, .motion .xhero__shade { will-change: transform, opacity; }
.motion .xhero__more { opacity: 0; }
.motion .xhero__shade { opacity: 0.35; }

/* ---------- home: the same framed photo, opened slab by slab ----------
   The photo is two layers (sky, and the buildings with a see-through sky) so the buildings can
   rise and lift on their own. The frame is eight dark slabs, each a left and a right half; the
   middle four leave the window open. motion.js builds the slabs and plays them. */
.xhero--slabs .xhero__inner { padding-bottom: clamp(40px, 7vh, 72px); }
.shero__layer { position: absolute; inset: 0; }
.shero__layer picture { position: absolute; inset: 0; }
/* keeps the sunset gap between the two towers in the middle of the window on most screen shapes */
.xhero--slabs .xhero__frame img { object-position: 34% 100%; transform-origin: 50% 50%; }
/* dark ground below the buildings, so they can rise into place without a gap underneath */
.shero__towers::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40%; background: #0d0c0e; }
@media (max-aspect-ratio: 4/5) { .xhero--slabs .xhero__frame img { object-position: 50% 100%; } }
.shero__slabs { position: absolute; inset: 0; }
.shero__slab { position: absolute; left: 0; right: 0; height: calc(12.5% + 1px); }
.shero__slab > i { position: absolute; top: 0; bottom: 0; width: calc(50% + 1px); will-change: transform; }
.shero__slab > i:last-child { right: 0; }
.shero__slab--win > i { width: calc(var(--fx) + 1px); }
/* each slab face reaches from its inner edge out past the screen edge, so a half that slides in to
   close the window never uncovers the photo behind it at the side */
.shero__slab b { position: absolute; top: 0; bottom: 0; width: calc(50vw + 2px); background: #0d0f11; }
.shero__slab > i:first-child b { right: 0; }
.shero__slab > i:last-child b { left: 0; }
.motion .xhero--slabs .xhero__shade { opacity: 0.7; }
/* upright phones show open sky behind the small label, so the shade starts darker */
@media (max-width: 699px) { .motion .xhero--slabs .xhero__shade { opacity: 0.88; } }
.motion [data-shero-fade] { opacity: 0; }
/* only the two photo layers get their own GPU layer; the images inside them never move */
.xhero--slabs .xhero__frame img { will-change: auto; }

/* ---------- home: hero with the sky and the buildings as two layers at different depths ---------- */
.dhero {
  position: relative; isolation: isolate; overflow: hidden;
  height: 100svh; min-height: 620px; display: flex; flex-direction: column; justify-content: flex-end;
  background: #0d0c0e; color: #fff;
}
.dhero__scene { position: absolute; inset: 0; z-index: -2; }
/* both layers share one box, a little wider than the screen so the pointer drift never shows an edge */
.dhero__layer { position: absolute; top: 0; bottom: 0; left: -2%; right: -2%; }
.dhero__layer picture { position: absolute; inset: 0; display: block; }
.dhero__layer img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 100%; }
/* dark ground below the buildings, so they can rise into place without a gap underneath */
.dhero__towers::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40%; background: #0d0c0e; }
@media (max-aspect-ratio: 4/5) { .dhero__layer img { object-position: 50% 100%; } }
.dhero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(13, 12, 14, 0.55) 0%, rgba(13, 12, 14, 0) 22%),
    radial-gradient(ellipse 80% 78% at 0% 100%, rgba(13, 12, 14, 0.88) 0%, rgba(13, 12, 14, 0.6) 42%, rgba(13, 12, 14, 0) 100%);
}
.dhero__inner {
  display: grid; justify-items: start;
  padding-top: calc(var(--header-h) + 24px); padding-bottom: clamp(40px, 8vh, 88px);
}
.dhero .kicker { color: var(--amber); margin-bottom: clamp(16px, 2.4vh, 26px); }
.dhero__title {
  font-size: clamp(3rem, 0.8rem + 5.7vw, 7.2rem); line-height: 0.9; font-weight: 600;
  letter-spacing: -0.035em; text-transform: uppercase;
}
.dhero__break { display: block; }
.dhero__title em { font-style: normal; color: var(--amber); }
/* a tendon stressed between two anchors */
.dhero__tendon { display: flex; align-items: center; width: min(100%, 34rem); height: 12px; margin: clamp(24px, 3.6vh, 36px) 0 clamp(18px, 2.6vh, 26px); }
.dhero__tendon i { width: 10px; height: 10px; flex: none; background: var(--amber); }
.dhero__tendon b { flex: 1; height: 2px; background: var(--amber); transform-origin: 0 50%; }
.dhero__lead {
  max-width: 44ch; margin-bottom: clamp(22px, 3.4vh, 32px);
  font-size: clamp(1rem, 0.94rem + 0.25vw, 1.14rem); line-height: 1.6; color: rgba(255, 255, 255, 0.86);
}
@media (max-width: 699px) {
  .dhero .kicker { font-size: 0.62rem; letter-spacing: 0.1em; }
  .dhero .kicker::before { display: none; }
  /* upright phones show more open sky behind the words, so the shade reaches higher */
  .dhero__shade {
    background: linear-gradient(180deg, rgba(13, 12, 14, 0.5) 0%, rgba(13, 12, 14, 0) 16%, rgba(13, 12, 14, 0) 28%, rgba(13, 12, 14, 0.74) 50%, rgba(13, 12, 14, 0.9) 100%);
  }
}
/* starting states for the load-in (motion.js plays them) */
.motion .dhero__sky, .motion .dhero__towers, .motion [data-dhero-fade], .motion .dhero__tendon > * { opacity: 0; }
.motion .dhero__layer, .motion .dhero__sky, .motion .dhero__towers { will-change: transform; }

/* ---------- home: who we are (headline, then a photo band that widens to the edges) ---------- */
.intro__tag strong { display: flex; align-items: baseline; }
.who { padding-block: var(--section); overflow: clip; }
.who__head { display: grid; gap: 28px 64px; align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.who__title { display: grid; gap: 20px; justify-items: start; }
.who__title .h2 { font-size: clamp(2.5rem, 1.3rem + 3.8vw, 4.9rem); line-height: 0.96; letter-spacing: -0.032em; max-width: 12ch; }
.who__copy { display: grid; gap: 24px; justify-items: start; }
@media (min-width: 960px) { .who__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
/* widens to the screen edges with transforms (band scaled in, contents scaled back out) */
.who__band {
  position: relative; margin: 0; overflow: hidden; background: var(--ink);
  height: clamp(300px, 50vw, 700px);
  transform-origin: 50% 50%; will-change: transform;
}
.who__band-media { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; }
/* their counter-scale changes every frame while the band widens; as layers that costs nothing */
.motion .who__band-media, .motion .who__overlay, .motion .who__band img { will-change: transform; }
/* everything else the scroll moves gets its own GPU layer too, so moving it never repaints it
   (without one, the service cards and their photos were redrawn on every frame as they rose in) */
.motion .xpanel { will-change: transform, opacity; }
.motion .xpanel > img, .motion [data-parallax] { will-change: transform; }
.who__band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
.who__band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(20deg, rgba(13, 15, 17, 0.45) 0%, rgba(13, 15, 17, 0) 42%); }
.who__overlay { position: absolute; left: 0; right: 0; bottom: clamp(20px, 3vw, 44px); z-index: 1; display: flex; transform-origin: 50% 50%; }
.who__tag {
  display: grid; gap: 4px; padding: 16px 22px 18px; border-radius: var(--r);
  background: var(--amber); color: var(--ink); box-shadow: 0 24px 48px -24px rgba(13, 15, 17, 0.7);
}
.who__tag strong { display: flex; align-items: baseline; font-family: var(--f-display); font-size: clamp(2.4rem, 1.9rem + 1.6vw, 3.4rem); line-height: 1; font-weight: 700; }
.who__tag > span { font-size: 0.8rem; font-weight: 580; line-height: 1.3; max-width: 14ch; }
.who__values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; margin-top: clamp(36px, 4.5vw, 64px); }
.who__values li { display: grid; gap: 8px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.who__values .i { width: 28px; height: 28px; margin-bottom: 4px; }
.who__values strong { font-family: var(--f-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -0.01em; }
.who__values span { color: var(--muted); font-size: var(--fs-small); line-height: 1.5; max-width: 30ch; }
@media (min-width: 900px) { .who__values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: no-preference) {
  .who__values li .i { transition: transform 500ms var(--ease-out), opacity 400ms ease; transition-delay: calc(var(--d, 0ms) + 120ms); }
  html.js:not(.reveal-all) .who__values li[data-reveal]:not(.is-in) .i { transform: scale(0.85); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  /* the 50+ badge and the quote badge settle in (no overshoot) */
  html.js:not(.reveal-all) [data-reveal="pop"] {
    transform: none; scale: 0.9; opacity: 0;
    transition: opacity 500ms ease, scale 700ms var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  html.js [data-reveal="pop"].is-in { scale: 1; opacity: 1; }
  /* GSAP moves these with transform; keep CSS transitions off that property */
  html.js:not(.reveal-all) [data-drift][data-reveal] { transition-property: opacity, scale; }
  .values-inline li .i { transition: transform 500ms var(--ease-out), opacity 400ms ease; transition-delay: calc(var(--d, 0ms) + 120ms); }
  html.js:not(.reveal-all) .values-inline li[data-reveal]:not(.is-in) .i { transform: scale(0.85); opacity: 0; }
}

/* ---------- home: three service cards; hovering one opens it ---------- */
.svc { position: relative; background: var(--bg-2); }
.svc__pin { padding-block: var(--section); }
.svc__head { align-items: end; }
.svc__aside { display: flex; align-items: center; gap: 28px; }
.xpanel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #0d0f11; opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
.xpanel__num { position: absolute; top: clamp(30px, 3vw, 44px); right: clamp(22px, 2.4vw, 34px); font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.7); }
@media (min-width: 960px) {
  .xpanel:not(.is-open)::after { opacity: 0.34; }
  /* the photo keeps an open card's width while the cards change size, so it is only cropped and
     never resized (resizing it redrew the whole photo on every frame of the change) */
  .xpanel > img {
    left: 50%; right: auto; width: max(100%, min(56vw, 800px)); max-width: none; margin-left: calc(max(100%, min(56vw, 800px)) / -2);
    transform: scale(1.1); transition: transform 1400ms var(--ease-out);
  }
  .xpanel.is-open > img { transform: scale(1); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 960px) {
  .xpanel.is-open:hover > img { transform: scale(1.03); }
}

/* ---------- home: projects that travel sideways as you scroll ---------- */
.hscroll { position: relative; overflow: clip; background: var(--bg); }
.hscroll__pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 3.5vw, 44px); padding-block: var(--section); }
.hscroll__head { margin-bottom: 0; }
.hscroll__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hscroll__viewport::-webkit-scrollbar { display: none; }
.hscroll__track {
  display: flex; gap: clamp(14px, 1.6vw, 22px); width: max-content;
  padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}
.hcard { flex: none; width: min(78vw, 360px); scroll-snap-align: center; }
.hcard .pcard__media { aspect-ratio: 4 / 5; }
.hcard--end {
  display: grid; align-content: space-between; padding: clamp(22px, 2.4vw, 32px);
  aspect-ratio: 4 / 5; border-radius: var(--r); background: var(--ink); color: #fff; position: relative;
}
.hcard--end strong { font-family: var(--f-display); font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.hcard--end a::after { content: ""; position: absolute; inset: 0; }
.hcard--end .i { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--amber); color: var(--ink); transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .hcard--end:hover .i { transform: rotate(-45deg); } }
@media (min-width: 900px) {
  .motion .hscroll__pin { padding-block: clamp(48px, 6vh, 88px); min-height: 100svh; align-content: center; }
  .hcard { width: clamp(240px, min(28vw, calc((100svh - 400px) * 0.8)), 460px); }
  .hcard--end { width: clamp(240px, min(28vw, calc((100svh - 400px) * 0.8)), 460px); }
  .motion .hscroll__viewport { overflow: hidden; scroll-snap-type: none; }
  .motion .hscroll__track { will-change: transform; }
}

/* ---------- home: same building, less concrete (scroll-driven) ---------- */
.why2 { position: relative; background: var(--ink); color: var(--on-dark); }
.why2__pin { min-height: 100svh; display: flex; align-items: center; padding-block: clamp(72px, 9vw, 120px); }
.why2__grid { display: grid; gap: 44px; align-items: center; width: 100%; }
.why2__copy { display: grid; gap: 20px; justify-items: start; }
.why2__copy .h2 { max-width: 13ch; }
.why2__steps { display: grid; gap: 16px; margin: 10px 0 14px; }
.why2__steps li { display: grid; gap: 4px; padding: 2px 0 2px 18px; border-left: 2px solid rgba(255, 255, 255, 0.16); transition: opacity 500ms ease, border-color 500ms ease; }
.why2__steps strong { font-family: var(--f-display); font-weight: 600; font-size: 1.3rem; color: #fff; letter-spacing: -0.01em; }
.why2__steps span { color: var(--on-dark-muted); font-size: var(--fs-small); max-width: 42ch; }
.why2__steps li.is-on { border-left-color: var(--amber); }
.motion .why2__steps li:not(.is-on) { opacity: 0.36; }
@media (min-width: 960px) { .why2__grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(48px, 6vw, 96px); } }

/* building section drawing, shared by the home page and the Why PT page */
.bldg {
  --b-slab: #444a51; --b-col: #2e3237; --b-ground: rgba(255, 255, 255, 0.28); --b-reo: #8d939a; --b-ghost: rgba(255, 255, 255, 0.4); --b-text: var(--on-dark-muted);
  position: relative; display: grid; gap: 12px; margin: 0;
}
.bldg--light { --b-slab: #c9c9c3; --b-col: #a5a8ac; --b-ground: var(--line-strong); --b-reo: #6f747b; --b-ghost: rgba(21, 23, 26, 0.45); --b-text: var(--muted); }
.bldg__svg { width: 100%; height: auto; overflow: visible; }
.bldg .b-slab { fill: var(--b-slab); }
.bldg .b-col { fill: var(--b-col); }
.bldg .b-ground { stroke: var(--b-ground); stroke-width: 1.5; }
.bldg .b-reo { stroke: var(--b-reo); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; fill: none; }
.bldg .b-tendon { stroke: var(--amber); stroke-width: 2.4; fill: none; stroke-linecap: round; }
.bldg .b-ghost { stroke: var(--b-ghost); stroke-width: 1.2; stroke-dasharray: 6 6; fill: none; }
.bldg .b-dim { stroke: var(--b-ghost); stroke-width: 1; fill: none; }
.bldg .b-text { fill: var(--b-text); font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; }
.bldg__labels { position: absolute; left: 0; top: 0; }
.bldg__tag {
  display: inline-block; padding: 6px 10px; border-radius: var(--r);
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid currentColor; color: var(--b-text); transition: color 300ms ease, background-color 300ms ease;
}
.bldg__tag.is-pt { color: var(--ink); background: var(--amber); border-color: var(--amber); }
.bldg__note { font-size: var(--fs-xs); color: var(--b-text); }

.bldg__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 8px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.seg__btn { min-height: 42px; padding: 0 18px; border-radius: var(--r); font-weight: 600; font-size: 0.95rem; color: var(--muted); transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 140ms var(--ease-out); }
.seg__btn:active { transform: scale(0.97); }
.seg__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(21, 23, 26, 0.12), 0 4px 12px -6px rgba(21, 23, 26, 0.25); }
.seg__btn[data-bldg-set="1"][aria-pressed="true"] { background: var(--amber); color: var(--ink); }
.bldg__facts { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.bldg__facts li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-small); }
.bldg__facts .i { width: 18px; height: 18px; color: var(--amber); }
.bldg__facts [data-fact] { transition: opacity 260ms ease; }
.bldg__facts li:not(.is-on) { color: var(--muted); }
.bldg__facts li:not(.is-on) .i { color: var(--muted); opacity: 0.4; }
.bldg--light .bldg__svg { max-width: 920px; margin-inline: auto; }
.bldg--light { padding: clamp(20px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }

/* ---------- home: closing call to action on a full photo ---------- */
.cta-full { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: #0d0f11; min-height: clamp(520px, 80svh, 820px); display: flex; align-items: center; }
.cta-full__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.cta-full__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-full::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(13, 15, 17, 0.86) 0%, rgba(13, 15, 17, 0.55) 55%, rgba(13, 15, 17, 0.3) 100%); }
.cta-full__inner { display: grid; gap: 24px; justify-items: start; padding-block: clamp(80px, 10vw, 140px); }
.cta-full__title { font-size: clamp(2.8rem, 1rem + 5.6vw, 6.6rem); line-height: 0.94; letter-spacing: -0.035em; font-weight: 600; max-width: 12ch; }
.cta-full p { max-width: 46ch; font-size: var(--fs-lead); color: rgba(255, 255, 255, 0.86); }


/* ---------- Why PT page: benefits grid in proportion ---------- */
@media (min-width: 1080px) {
  .benefits { grid-template-columns: repeat(3, 1fr); }
  .benefit--big { grid-column: span 2; grid-row: auto; }
  .benefit--photo { grid-column: auto; }
}
.benefit--big { align-content: start; gap: 10px; min-height: 0; }
.benefit--big .why__num { font-size: clamp(3.6rem, 2.6rem + 3vw, 5.6rem); line-height: 0.9; margin-bottom: 6px; }
.benefit--big h3 { font-size: 1.5rem; }
.benefit--big p:not(.why__num) { max-width: 52ch; }
/* the big card shows a post-tensioned deck, with its draped ducts, fading in from the right */
.benefit--big-photo { min-height: clamp(300px, 26vw, 380px); }
.benefit__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 64%; }
.benefit--big-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0%, rgba(21, 23, 26, 0.9) 30%, rgba(21, 23, 26, 0.38) 64%, rgba(21, 23, 26, 0.12) 100%);
}
/* stacked on phones the words cover most of the card, so the shade sits under them instead */
@media (max-width: 719px) {
  .benefit--big-photo { min-height: 380px; align-content: end; }
  .benefit__bg { object-position: 66% 60%; }
  .benefit--big-photo::before { background: linear-gradient(180deg, rgba(21, 23, 26, 0.15) 0%, rgba(21, 23, 26, 0.6) 40%, rgba(21, 23, 26, 0.94) 78%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  .site-header, .mobile-menu, .cta-band, .site-footer { display: none !important; }
  body { background: #fff; }
}