/* Website scaffold base.css, SCAFFOLD_VERSION 1.
   Nothing below the tokens block names a colour or a font. Paste PRD section 7.2 over the
   block between the markers. The lint reads --ink/--paper and --cta-ink/--cta-bg for contrast. */

/* Fonts: Archivo, SIL Open Font License, self-hosted so nothing depends on a third-party account
   after handover. Semi-expanded cuts for display (they echo the wide wordmark), normal width for body.
   Latin subset only. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-stretch: normal; font-display: swap; src: url("../fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-stretch: normal; font-display: swap; src: url("../fonts/archivo-500.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-stretch: semi-expanded; font-display: swap; src: url("../fonts/archivo-semiexp-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-stretch: semi-expanded; font-display: swap; src: url("../fonts/archivo-semiexp-700.woff2") format("woff2"); }

/* TOKENS:START */
:root {
  --ink:            #131b2b;
  --paper:          #ffffff;
  --brand:          #131b2b;
  --brand-2:        #1f2a40;
  --accent:         #d4d4cf;
  --muted:          #5a6070;
  --line:           #d4d4cf;
  --cta-bg:         #ffffff;
  --cta-ink:        #131b2b;
  --font-display:   "Archivo", sans-serif;
  --font-body:      "Archivo", sans-serif;
  --tracking-display: -15;
}
/* TOKENS:END */

:root {
  /* type scale: clamp(min, fluid, max) */
  --text-display: clamp(2.25rem, 1.2rem + 4.2vw, 5rem);
  --text-h2:      clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
  --text-h3:      clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  --text-lead:    clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --leading-tight: 1.05;
  --leading-body: 1.55;

  /* spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --max: 1280px;
  --max-narrow: 720px;
  --radius: 0;
  --header-h: 72px;
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-2)); }

/* type */
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: calc(var(--tracking-display) * 0.001em);
  line-height: var(--leading-tight);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--text-display); max-width: 18ch; }
h2 { font-size: var(--text-h2); max-width: 22ch; margin-bottom: var(--space-3); }
h3 { font-size: var(--text-h3); margin-bottom: var(--space-2); }
.lead { font-size: var(--text-lead); color: var(--muted); max-width: 56ch; margin-bottom: var(--space-3); }
p + p { margin-top: var(--space-2); }

/* layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap-narrow { max-width: var(--max-narrow); }
.section { padding-block: var(--space-5); }
.skip {
  position: absolute; left: var(--space-2); top: -100px;
  padding: var(--space-1) var(--space-2);
  background: var(--ink); color: var(--paper); z-index: 100;
}
.skip:focus { top: var(--space-2); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--space-3);
  background: var(--cta-bg); color: var(--cta-ink);
  font-weight: 600; border-radius: var(--radius);
  border: 1px solid var(--cta-bg);
}
.btn:hover { text-decoration: none; opacity: 0.92; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--header-h); padding-inline: var(--gutter);
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.site-logo img { height: 32px; width: auto; }
.site-nav { display: flex; align-items: center; }
.site-nav-list { display: flex; align-items: center; gap: var(--space-3); }
.site-nav-list a { min-height: 44px; display: inline-flex; align-items: center; }
.site-nav-toggle { display: none; min-height: 44px; min-width: 44px; padding: 0 var(--space-2); }

@media (max-width: 899px) {
  .site-nav-toggle { display: inline-flex; align-items: center; }
  .site-nav-list {
    display: none; position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: var(--space-2) var(--gutter) var(--space-3);
  }
  .site-nav-list.is-open { display: flex; }
  .site-nav-list li { border-top: 1px solid var(--line); }
  .site-nav-list li:first-child { border-top: 0; }
  .site-nav-cta { padding-top: var(--space-2); }
  .site-nav-cta .btn { width: 100%; }
}

/* hero. No aspect-ratio here: it fights max-height and clips the statement on short viewports
   (design-corrections, 2026-09-10). Height is min-height plus content. */
.hero {
  position: relative; isolation: isolate;
  min-height: min(88svh, 900px);
  display: grid; align-items: end;
  color: var(--paper); background: var(--ink);
}
.hero-poster, .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
}
.hero-video { display: none; }
.js .hero-video.is-ready { display: block; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0) 55%);
}
.hero-inner { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; padding-block: var(--space-5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* inner page head */
.page-head { padding-block: var(--space-5) var(--space-4); border-bottom: 1px solid var(--line); }
.page-kicker { font-size: var(--text-small); color: var(--muted); margin-bottom: var(--space-2); }

/* figures */
.figure { margin-top: var(--space-4); }
.figure img { width: 100%; }
.figure figcaption { font-size: var(--text-small); color: var(--muted); margin-top: var(--space-1); }

/* form */
.section-form { background: var(--paper); border-block: 1px solid var(--line); }
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: var(--space-1); }
.field label { font-weight: 600; }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); border-radius: var(--radius);
  min-height: 44px; padding: 0.6rem 0.8rem; width: 100%;
}
.field textarea { min-height: 120px; resize: vertical; }
.help { font-size: var(--text-small); color: var(--muted); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-success { padding: var(--space-2); border: 1px solid var(--ink); }

/* contacts */
.contacts { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* footer */
.site-footer { padding-block: var(--space-5); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--text-small); }
.footer-inner { display: grid; gap: var(--space-2); }
.footer-name { color: var(--ink); font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* motion */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-video { display: none !important; }
}

/* 390 */
@media (max-width: 480px) {
  :root { --header-h: 60px; }
  .site-logo img { height: 26px; }
  .section { padding-block: var(--space-4); }
  .hero { min-height: min(78svh, 700px); }
  .hero-actions .btn { width: 100%; }
}

/* ============================================================================
   Newhouse Construction. Everything below reads the tokens; nothing names a colour.
   Surfaces alternate navy (--brand), stone (--accent) and white (--paper).
   ============================================================================ */

:root {
  --text-display: clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem);
  --leading-tight: 1.02;
  --max: 1240px;
}
body { font-weight: 400; }
h1, h2, h3 { font-weight: 700; font-stretch: semi-expanded; }
.btn, .site-nav-toggle, .site-nav-phone a, .step h3, .about-sign, .contact-lines a, .areas p { font-stretch: semi-expanded; }
h2 { font-size: var(--text-h2); max-width: 20ch; margin-bottom: var(--space-4); }
h3 { font-weight: 600; }
.lead { color: inherit; opacity: 0.86; }

/* surfaces */
.on-brand { background: var(--brand); color: var(--paper); }
.on-brand .lead, .on-brand .fine { color: var(--accent); opacity: 1; }
.on-stone { background: var(--accent); color: var(--ink); }
.on-stone .fine { color: var(--muted); }
.fine { font-size: var(--text-small); color: var(--muted); }

/* buttons: the token pair is white-on-navy. On a light surface the button flips. */
.btn { font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; padding: 0 var(--space-3); min-height: 48px; gap: 0.5rem; }
.btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }

/* header */
.site-header { background: var(--brand); color: var(--paper); border-bottom: 1px solid transparent; transition: border-color 0.3s ease; }
.site-header.is-scrolled { border-bottom-color: var(--brand-2); }
.site-logo img { height: 40px; }
.site-nav-list { gap: var(--space-2); }
.site-nav-list > li > a { padding-inline: 0.6rem; font-size: 0.95rem; }
.site-nav-list a:hover { text-decoration: none; opacity: 0.8; }
.site-nav-cta a.btn:hover { opacity: 0.92; }
.site-nav-phone a { font-family: var(--font-display); font-weight: 500; }
.site-nav-toggle { color: var(--paper); font-family: var(--font-display); font-weight: 500; }
@media (max-width: 899px) {
  .site-nav-list { background: var(--brand); border-bottom: 1px solid var(--brand-2); }
  .site-nav-list li { border-top: 1px solid var(--brand-2); }
  .site-nav-list > li > a { padding-inline: 0; }
}

/* hero: statement left, the slat wall cut into a half-hexagon bleeding off the right edge. The cut
   follows the roof pitch of the NH mark. */
.hero { background: var(--brand); color: var(--paper); min-height: calc(100svh - var(--header-h)); align-items: center; overflow: hidden; }
.hero::after { display: none; }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-5); align-items: center; padding-block: var(--space-6); }
.hero h1 { max-width: 12ch; }
.hero .lead { max-width: 42ch; margin-top: var(--space-3); }
.hero-actions { margin-top: var(--space-4); }
.hero-licence { margin-top: var(--space-3); }
.hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 48%; z-index: 0; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 32% 50%; clip-path: polygon(0 50%, 26% 0, 100% 0, 100% 100%, 26% 100%); }
.hero-mark { position: absolute; z-index: 0; width: 44%; right: 44%; bottom: -12%; opacity: 0.14; pointer-events: none; }
.hero-mark path { stroke: var(--accent); stroke-width: 1.5; }

/* one page-load moment: the hero fades up, the mark draws in. Reduced motion shows end states. */
.js .hero-copy > * { opacity: 0; transform: translateY(14px); animation: rise 0.7s ease forwards; }
.js .hero-copy > *:nth-child(2) { animation-delay: 0.08s; }
.js .hero-copy > *:nth-child(3) { animation-delay: 0.16s; }
.js .hero-copy > *:nth-child(4) { animation-delay: 0.24s; }
.js .hero-media { opacity: 0; animation: rise 0.9s ease 0.15s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.js .draw path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s ease; }
.js .draw.is-in path { stroke-dashoffset: 0; }
.js .hero-mark path { transition-delay: 0.3s; }

/* about: the company first, then the person who runs it */
.about-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); align-items: start; }
.about-inner h2 { margin-bottom: 0; }
.about-copy p { max-width: 58ch; }
.about-copy p + p { margin-top: var(--space-3); }
.about-person { grid-column: 1 / -1; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-4); align-items: center; margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--ink); }
.about-person img { width: 100%; height: auto; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.about-person h3 { font-size: var(--text-lead); margin-bottom: var(--space-1); }
.about-person p { max-width: 50ch; }
.about-person .fine { margin-top: var(--space-1); }

/* services: rows with a hairline between, a line drawing beside each */
.services-list { border-top: 1px solid var(--line); }
.service { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr); gap: var(--space-4); align-items: center; padding-block: var(--space-4); border-bottom: 1px solid var(--line); }
.service h3 { margin-bottom: var(--space-1); }
.service p { max-width: 52ch; }
.service svg { width: 100%; max-width: 260px; height: auto; display: block; }
.service svg path, .service svg polyline, .service svg line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.service svg .faint { opacity: 0.35; }
.service svg .dash { stroke-dasharray: 4 4; }

/* how we work: one sequence, so it is numbered. The numeral matches the title size. Icons share the drawings' stroke. */
.step-icon { width: 40px; height: 40px; display: block; margin-bottom: var(--space-2); }
.step-icon * { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
ol.steps { list-style: none; padding-left: 0; margin: 0; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); border-top: 1px solid var(--brand-2); padding-top: var(--space-4); }
.step h3 { display: flex; gap: 0.6rem; align-items: baseline; font-size: var(--text-lead); font-weight: 700; margin-bottom: var(--space-1); }
.step h3 span { color: var(--accent); font-weight: 500; }
.step p { color: var(--accent); }

/* work grid */
.work-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4); align-items: end; margin-bottom: var(--space-4); }
.work-head h2 { margin-bottom: 0; }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.work-grid figure { margin: 0; }
.work-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; height: auto; background: var(--accent); }
.work-grid figcaption { font-size: var(--text-small); color: var(--muted); margin-top: var(--space-1); }

/* areas strip */
.areas { padding-block: var(--space-4); }
.areas p { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lead); max-width: 40ch; }

/* contact */
.contact-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-5); align-items: start; }
.contact-lines { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.contact-lines a { font-family: var(--font-display); font-weight: 500; font-size: var(--text-lead); display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.contact-lines a:hover { text-decoration: underline; }
.contact-fine { margin-top: var(--space-3); }
.on-brand .field label { color: var(--paper); }
.on-brand .field input, .on-brand .field textarea { background: var(--brand-2); color: var(--paper); border-color: var(--accent); }
.on-brand .field input::placeholder, .on-brand .field textarea::placeholder { color: var(--accent); opacity: 0.7; }
.on-brand .help { color: var(--accent); }
.on-brand .form-success { border-color: var(--accent); }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: start; }

/* footer */
.site-footer { background: var(--brand-2); color: var(--accent); border-top: 0; }
.footer-inner { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-4); }
.footer-logo img { height: 30px; width: auto; }
.footer-links { justify-content: center; }
.footer-links a { color: var(--paper); }
.footer-fine { text-align: right; }

/* mobile call bar: appears once the hero has scrolled away */
.call-bar { display: none; }
@media (max-width: 899px) {
  .call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border-top: 1px solid var(--line); transform: translateY(100%); transition: transform 0.3s ease; padding-bottom: env(safe-area-inset-bottom); }
  .call-bar.is-on { transform: none; }
  .call-bar a { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; font-family: var(--font-display); font-weight: 500; color: var(--ink); }
  .call-bar a + a { border-left: 1px solid var(--line); }
  body.has-call-bar { padding-bottom: 52px; }
}

/* responsive */
@media (max-width: 1099px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-4); padding-block: var(--space-5) 0; }
  .hero-media { position: relative; width: auto; height: 62vw; max-height: 480px; margin-top: var(--space-4); margin-right: calc(-1 * var(--gutter)); }
  .hero-media img { clip-path: polygon(0 50%, 18% 0, 100% 0, 100% 100%, 18% 100%); object-position: 50% 50%; }
  .hero-mark { display: none; }
  .about-person { grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-3); }
  .about-inner, .contact-inner, .work-head { grid-template-columns: 1fr; gap: var(--space-3); }
  .service { grid-template-columns: 1fr; gap: var(--space-2); }
  .service svg { max-width: 220px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
  .footer-fine { text-align: left; }
}
@media (max-width: 599px) {
  .steps, .work-grid { grid-template-columns: 1fr 1fr; }
  .form-two { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero h1 { max-width: 10ch; }
  .about-person { grid-template-columns: 1fr; }
  .about-person img { width: 160px; }
}
@media (max-width: 480px) {
  .site-logo img { height: 28px; }
  .work-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-copy > *, .js .hero-media { opacity: 1; transform: none; animation: none; }
  .js .draw path { stroke-dashoffset: 0; }
  .call-bar { transition: none; }
}

/* preloader: the NH mark draws itself in, fills, then the navy lifts away. Once per session, and
   never under reduced motion. Content is visible underneath the whole time, so nothing is lost if
   the script fails. */
.loader { display: none; }
.js.is-loading .loader { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; background: var(--brand); animation: loader-out 0.6s ease 1.5s forwards; }
.loader-mark { width: min(28vw, 180px); height: auto; }
.loader-mark path { fill: var(--paper); fill-opacity: 0; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: loader-draw 0.9s ease forwards, loader-fill 0.4s ease 0.9s forwards; }
.loader-mark .loader-roof { fill: var(--accent); }
.loader-mark path:nth-child(2) { animation-delay: 0.08s, 0.98s; }
.loader-mark path:nth-child(3), .loader-mark path:nth-child(4) { animation-delay: 0.3s, 1.1s; }
@keyframes loader-draw { to { stroke-dashoffset: 0; } }
@keyframes loader-fill { to { fill-opacity: 1; } }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
.js.is-loading .hero-copy > * { animation-delay: 1.7s; }
.js.is-loading .hero-copy > *:nth-child(2) { animation-delay: 1.78s; }
.js.is-loading .hero-copy > *:nth-child(3) { animation-delay: 1.86s; }
.js.is-loading .hero-copy > *:nth-child(4) { animation-delay: 1.94s; }
.js.is-loading .hero-media { animation-delay: 1.85s; }
.js.is-loading .hero-mark path { transition-delay: 1.9s; }
@media (prefers-reduced-motion: reduce) {
  .js.is-loading .loader { display: none; }
  .js.is-loading .hero-copy > *, .js.is-loading .hero-media { animation: none; opacity: 1; transform: none; }
}

/* Alex, 2 Oct 2026: three quiet motions on top of the loader. Transform and opacity only.
   1. The hero photo drifts a few percent over fourteen seconds.
   2. Section rules draw in from the left as their section arrives.
   3. The work grid fades up tile by tile. */
.js .hero-media img { animation: drift 14s ease-out 0.4s forwards; transform-origin: 60% 50%; }
.js.is-loading .hero-media img { animation-delay: 2s; }
@keyframes drift { to { transform: scale(1.05); } }

.rule-draw { position: relative; border-top: 0 !important; }
.rule-draw::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.steps.rule-draw::before { background: var(--brand-2); }
.about-person.rule-draw::before { background: var(--ink); }
.js .rule-draw::before { transform: scaleX(0); transform-origin: left; transition: transform 1s ease; }
.js .rule-draw.is-in::before { transform: none; }

.js .work-grid figure { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .work-grid.is-in figure { opacity: 1; transform: none; }
.work-grid figure:nth-child(2) { transition-delay: 0.06s; } .work-grid figure:nth-child(3) { transition-delay: 0.12s; }
.work-grid figure:nth-child(4) { transition-delay: 0.18s; } .work-grid figure:nth-child(5) { transition-delay: 0.24s; }
.work-grid figure:nth-child(6) { transition-delay: 0.3s; } .work-grid figure:nth-child(7) { transition-delay: 0.36s; }
.work-grid figure:nth-child(8) { transition-delay: 0.42s; } .work-grid figure:nth-child(9) { transition-delay: 0.48s; }
.work-grid figure:nth-child(10) { transition-delay: 0.54s; } .work-grid figure:nth-child(11) { transition-delay: 0.6s; }
.work-grid figure:nth-child(12) { transition-delay: 0.66s; }

/* membership seal and social link */
.contact-social { margin-top: var(--space-2); }
.contact-social a { font-family: var(--font-display); font-stretch: semi-expanded; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 0.2em; }
.areas-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.member { display: flex; align-items: center; gap: var(--space-2); }
.member img { width: 88px; height: 88px; flex: 0 0 auto; }
.member p { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small); color: var(--muted); max-width: 20ch; }

@media (prefers-reduced-motion: reduce) {
  .js .hero-media img { animation: none; }
  .js .rule-draw::before { transform: none; transition: none; }
  .js .work-grid figure { opacity: 1; transform: none; transition: none; }
}