@charset "UTF-8";
/* ==========================================================================
   NW Build — Design System & Homepage Styles
   Concept: "The Measured Line" — an architectural drawing-sheet system.
   Warm paper ground, charcoal ink, hairline rules on a 12-column grid,
   editorial serif display, burgundy used as a precision accent.

   Structure
   01  Fonts
   02  Design tokens
   03  Reset & base
   04  Utilities (shell, grid, rules, visually-hidden)
   05  Typography components
   06  Buttons & links
   07  Media components (figure, ratio, reveal)
   08  Header & navigation
   09  Section: Hero
   10  Section: Positioning
   11  Section: Featured projects
   12  Section: Services
   13  Section: Process
   14  Section: Why NW Build
   15  Section: Our story (founder)
   16  Section: Testimonials
   17  Section: Service area
   18  Section: Final CTA / inquiry
   19  Footer
   20  Motion: pre-animation states & reduced motion
   ========================================================================== */

/* ==========================================================================
   01  FONTS — self-hosted variable woff2
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext-var.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   02  DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Brand colour, sampled directly from the NW Build logo ------------- */
  --c-burgundy: #6b1631; /* the "N" */
  --c-burgundy-deep: #4a0f22;
  --c-burgundy-bright: #8a2144; /* hover / on-dark accent */
  --c-stone: #93939b; /* the "W" */

  /* --- Neutral ground ---------------------------------------------------- */
  --c-paper: #ffffff; /* pure white base — the beige comes from the grain tile */
  --c-paper-2: #ffffff; /* alternate band — pure white */
  --c-white: #ffffff;

  /* Subtle grain overlay for the light beige sections. The tile is an opaque
     8×8 seamless PNG, so it is layered with background-blend-mode:multiply over
     each section's own beige fill — the fill (paper vs paper-2) still shows
     through, the grain just rides on top. */
  --pattern: url("../images/subtle-pattern.png");
  --c-ink: #16171b; /* charcoal */
  --c-graphite: #2c2e34;
  --c-slate: #5c5f68; /* body copy — 5.8:1 on paper, 5.4:1 on paper-2 */
  --c-mute: #65686f; /* meta text — 5.1:1 on paper, 4.7:1 on paper-2 (AA) */

  /* --- Accent used on dark surfaces --------------------------------------
     White rather than a hue: on the inverted sections the burgundy brand accent
     loses contrast, and a second colour competed with it. Keeping this neutral
     lets burgundy stay the only accent colour in the system. */
  --c-accent-invert: #ffffff;

  /* --- Semantic ---------------------------------------------------------- */
  --c-bg: var(--c-paper);
  --c-text: var(--c-ink);
  --c-text-soft: var(--c-slate);
  --c-line: color-mix(in srgb, var(--c-ink) 14%, transparent);
  --c-line-strong: color-mix(in srgb, var(--c-ink) 26%, transparent);
  --c-line-invert: color-mix(in srgb, #ffffff 20%, transparent);
  --c-focus: var(--c-burgundy);

  /* --- Type families ----------------------------------------------------- */
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Heading weights. Hierarchy in a sans-serif comes from weight, size and
     spacing rather than from an ornamental face. */
  --display-weight: 600; /* section + card headings */
  --display-weight-hero: 700; /* large hero display only */

  /* --- Fluid type scale (390px → 1600px viewport) ------------------------ */
  --step--2: clamp(0.6875rem, 0.672rem + 0.062vw, 0.75rem);
  --step--1: clamp(0.8125rem, 0.797rem + 0.062vw, 0.875rem);
  --step-0: clamp(1rem, 0.969rem + 0.124vw, 1.125rem);
  --step-1: clamp(1.125rem, 1.063rem + 0.248vw, 1.375rem);
  --step-2: clamp(1.375rem, 1.25rem + 0.496vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.53rem + 0.87vw, 2.625rem);
  --step-4: clamp(2.125rem, 1.72rem + 1.61vw, 3.75rem);
  --step-5: clamp(2.5rem, 1.76rem + 2.98vw, 5.5rem);
  --step-6: clamp(3rem, 1.6rem + 5.6vw, 8rem);
  /* Hero display. Capped so the longest line ("Luxury home builders") always
     fits --hero-measure without wrapping on desktop. */
  --step-hero: clamp(2.125rem, 1.05rem + 4.4vw, 6rem);

  /* --- Fluid spacing scale ----------------------------------------------- */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.06vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.47rem + 0.12vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
  --space-s: clamp(1rem, 0.94rem + 0.25vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.38rem + 0.5vw, 2rem);
  --space-l: clamp(2rem, 1.75rem + 1vw, 3rem);
  --space-xl: clamp(3rem, 2.5rem + 2vw, 5rem);
  --space-2xl: clamp(4rem, 3rem + 4vw, 8rem);
  --space-3xl: clamp(5.5rem, 3.8rem + 6.8vw, 12rem);

  /* --- Layout widths ----------------------------------------------------- */
  --shell-max: 92.5rem; /* 1480px */
  --shell-narrow: 62rem;
  --shell-text: 44rem;
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 4.5rem);
  --grid-gap: clamp(1rem, 0.4rem + 1.6vw, 2.5rem);

  /* --- Borders & radii ---------------------------------------------------- */
  --hairline: 1px;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-pill: 999px;

  /* --- Motion tokens ------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-base: 420ms;
  --dur-slow: 760ms;

  /* --- Elevation (used sparingly) ---------------------------------------- */
  --shadow-card: 0 24px 60px -32px rgb(22 23 27 / 0.35);

  /* --- Header ------------------------------------------------------------- */
  --header-h: clamp(4.5rem, 4rem + 1.6vw, 5.75rem);
}

/* Dark surfaces re-map the semantic tokens rather than restating colours. */
.is-inverted {
  --c-bg: var(--c-ink);
  --c-text: var(--c-paper);
  --c-text-soft: color-mix(in srgb, var(--c-paper) 74%, transparent);
  --c-line: var(--c-line-invert);
  --c-line-strong: color-mix(in srgb, #ffffff 34%, transparent);
  --c-focus: var(--c-accent-invert);
  background-color: var(--c-bg);
  color: var(--c-text);
}

/* ==========================================================================
   03  RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--c-bg);
  background-image: var(--pattern);
  background-repeat: repeat;
  background-blend-mode: multiply;
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.is-locked {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}

a {
  color: inherit;
  text-decoration-color: var(--c-line-strong);
  text-underline-offset: 0.22em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--c-burgundy);
  color: var(--c-white);
}

/* ==========================================================================
   04  UTILITIES
   ========================================================================== */

.u-shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.u-shell--narrow {
  max-width: var(--shell-narrow);
}

.u-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
}

.u-rule {
  border: 0;
  border-top: var(--hairline) solid var(--c-line);
  margin: 0;
}

/* Holds <symbol> definitions referenced by <use>; takes no layout space. */
.u-sprite {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  overflow: hidden;
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  z-index: 200;
  transform: translateY(-120%);
  padding: 0.75rem 1.25rem;
  background: var(--c-ink);
  color: var(--c-paper);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.u-skip-link:focus-visible {
  transform: translateY(0);
  outline-offset: -4px;
}

.section {
  padding-block: var(--space-3xl);
  position: relative;
}
.section--tight {
  padding-block: var(--space-2xl);
}

/* ==========================================================================
   05  TYPOGRAPHY COMPONENTS
   ========================================================================== */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-text-soft);
}
.eyebrow::before {
  content: "";
  inline-size: clamp(1.5rem, 3vw, 2.75rem);
  block-size: var(--hairline);
  background: var(--c-burgundy);
  flex: none;
}
.is-inverted .eyebrow::before {
  background: var(--c-accent-invert);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display--xl {
  font-size: var(--step-hero);
  font-weight: var(--display-weight-hero);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.display--l {
  font-size: var(--step-5);
  font-weight: var(--display-weight-hero);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.display--m {
  font-size: var(--step-4);
  line-height: 1.1;
  letter-spacing: -0.024em;
}
.display--s {
  font-size: var(--step-3);
  line-height: 1.18;
  letter-spacing: -0.018em;
}
/* Manrope ships no italic; emphasis inside display type is carried by weight. */
.display strong {
  font-weight: 800;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--c-text-soft);
  text-wrap: pretty;
}

.prose > * + * {
  margin-block-start: 1.1em;
}
.prose p {
  color: var(--c-text-soft);
  text-wrap: pretty;
  max-width: 62ch;
}

.meta {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-mute);
}

.index-no {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  font-weight: 400;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--c-burgundy);
  letter-spacing: 0.02em;
}
.is-inverted .index-no {
  color: var(--c-accent-invert);
}

/* Section head — a small eyebrow label with a real, visible heading beneath
   it. Previously the <h2> here was visually hidden (aria-labelling the section
   without a visible headline); it is now shown, styled a size down from a
   page-level display heading so the eyebrow still reads as its label. */
.section-head {
  display: block;
}
.section-head__title {
  margin-block-start: var(--space-s);
  max-inline-size: 34ch;
}
.is-inverted .section-head__title {
  color: var(--c-white);
}

/* ==========================================================================
   06  BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-fg: var(--c-paper);
  --btn-bg: var(--c-ink);
  --btn-bd: var(--c-ink);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.95em 1.6em;
  border: var(--hairline) solid var(--btn-bd);
  border-radius: var(--radius-none);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.btn:hover {
  --btn-bg: var(--c-burgundy);
  --btn-bd: var(--c-burgundy);
  --btn-fg: var(--c-white);
}
.btn__arrow {
  inline-size: 0.85em;
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover .btn__arrow {
  transform: translateX(0.3em);
}

.btn--accent {
  --btn-bg: var(--c-burgundy);
  --btn-bd: var(--c-burgundy);
  --btn-fg: var(--c-white);
}
.btn--accent:hover {
  --btn-bg: var(--c-burgundy-deep);
  --btn-bd: var(--c-burgundy-deep);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-text);
  --btn-bd: var(--c-line-strong);
}
.btn--ghost:hover {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-paper);
  --btn-bd: var(--c-ink);
}
.is-inverted .btn--ghost:hover,
.hero .btn--ghost:hover {
  --btn-bg: var(--c-white);
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-white);
}

/* Underline-on-hover text link with a trailing rule. */
.link-line {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  padding-block-end: 0.35em;
  border-block-end: var(--hairline) solid var(--c-line-strong);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.link-line:hover {
  color: var(--c-burgundy);
  border-color: var(--c-burgundy);
}
.is-inverted .link-line:hover {
  color: var(--c-accent-invert);
  border-color: var(--c-accent-invert);
}
.link-line__arrow {
  inline-size: 0.85em;
  transition: transform var(--dur-base) var(--ease-out);
}
.link-line:hover .link-line__arrow {
  transform: translateX(0.3em);
}

/* Leading icon variant — the mark sits before the label and stays put, so it
   reads as a glyph on the value rather than a "go somewhere" arrow. */
.link-line__icon {
  inline-size: 1.15em;
  flex: none;
}
/* No rule under this one: the underline reads as "this navigates somewhere",
   which a phone number does not. The icon already marks it as a link. */
.link-line--lead {
  font-variant-numeric: tabular-nums;
  padding-block-end: 0;
  border-block-end: 0;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

/* ==========================================================================
   07  MEDIA COMPONENTS
   ========================================================================== */

/* Ratio-locked wrapper — prevents CLS and gives GSAP something to scale
   inside without affecting layout. */
.figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background-color: var(--c-paper-2);
  aspect-ratio: var(--ratio, auto);
}
/* <picture> is a layout no-op so the <img> is always the figure's box child,
   whether the markup uses <img> alone or <picture><source><img>. */
.figure picture,
.hero__media picture,
.page-hero__media picture,
.project-stage__item picture,
.pgal__btn picture {
  display: contents;
}
.figure img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: var(--ratio, auto);
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
}
.figure--3-2 {
  --ratio: 3 / 2;
}
.figure--4-3 {
  --ratio: 4 / 3;
}
.figure--1-1 {
  --ratio: 1 / 1;
}
.figure--4-5 {
  --ratio: 4 / 5;
}
.figure--2-3 {
  --ratio: 2 / 3;
}
.figure--16-9 {
  --ratio: 16 / 9;
}
.figure--21-9 {
  --ratio: 21 / 9;
}

.figure__caption {
  margin-block-start: var(--space-xs);
  font-size: var(--step--1);
  color: var(--c-mute);
}

/* Parallax inner layer: taller than the frame so it has room to travel.
   Requires a --ratio on the figure so the frame height is definite. */
.figure--parallax img {
  position: absolute;
  inset-block-start: -6%;
  inset-inline: 0;
  block-size: 112%;
  aspect-ratio: auto;
}

/* --- Small layout helpers (used instead of one-off inline styles) -------- */
.u-mt-m {
  margin-block-start: var(--space-m);
}
.u-mt-s {
  margin-block-start: var(--space-s);
}
.u-mt-l {
  margin-block-start: var(--space-l);
}
.section--alt {
  background-color: var(--c-paper-2);
}
.u-measure-short {
  max-inline-size: 34ch;
}

/* ==========================================================================
   08  HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  color: var(--c-white);
  transition: color var(--dur-base) var(--ease-out);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-paper);
  border-block-end: var(--hairline) solid var(--c-line);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.site-header.is-solid {
  color: var(--c-ink);
}
.site-header.is-solid::before {
  opacity: 1;
}

/* Scrim so the transparent-over-hero state stays legible. */
.site-header::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: calc(var(--header-h) * 1.9);
  background: linear-gradient(
    to bottom,
    rgb(10 10 12 / 0.58),
    rgb(10 10 12 / 0)
  );
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  z-index: -1;
}
.site-header.is-solid::after {
  opacity: 0;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  block-size: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex: none;
}
.brand__mark {
  inline-size: auto;
  block-size: clamp(3rem, 2.6rem + 1.6vw, 4.25rem);
  /* The logo art is dark-on-transparent; invert it while over imagery. */
  filter: brightness(0) invert(1);
  transition: filter var(--dur-base) var(--ease-out);
}
.site-header.is-solid .brand__mark,
.nav-panel .brand__mark {
  filter: none;
}

/* --- Desktop navigation ------------------------------------------------- */
.nav {
  display: none;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.2rem + 1.6vw, 2.25rem);
}
.nav__link {
  display: inline-block;
  padding-block: 0.5rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0.15rem;
  block-size: var(--hairline);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover::after,
.nav__item:focus-within > .nav__link::after,
.nav__item[data-open="true"] > .nav__link::after {
  transform: scaleX(1);
}

.nav__item {
  position: relative;
}
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  background: none;
  border: 0;
  padding-block: 0.5rem;
  cursor: pointer;
}
.nav__caret {
  inline-size: 0.6em;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__item[data-open="true"] .nav__caret {
  transform: rotate(180deg);
}

.nav__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.75rem);
  inset-inline-start: -1.25rem;
  min-inline-size: 17.5rem;
  padding: 0.5rem 0;
  background: var(--c-paper);
  border: var(--hairline) solid var(--c-line);
  box-shadow: var(--shadow-card);
  color: var(--c-ink);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  /* visibility is stepped, not eased: it must flip to `visible` immediately on
     open (so the menu is focusable at once) and only revert after the fade. */
  transition: opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}
.nav__item[data-open="true"] > .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out), visibility 0s;
}
.nav__menu a {
  display: block;
  padding: 0.7rem 1.25rem;
  font-size: var(--step--1);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.nav__menu a:hover {
  background: var(--c-paper-2);
  color: var(--c-burgundy);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.header-phone {
  display: none;
  align-items: center;
  gap: 0.55em;
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone__icon {
  inline-size: 0.95em;
  flex: none;
}
.header-phone:hover {
  text-decoration: underline;
}
.header-cta {
  display: none;
}

/* --- Mobile menu button -------------------------------------------------- */
.nav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-burger__bar {
  display: block;
  inline-size: 2rem;
  block-size: 1.75px;
  margin-inline: auto;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

/* --- Mobile / tablet panel ----------------------------------------------- */
.nav-panel[hidden] {
  display: none;
}
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--c-paper);
  color: var(--c-ink);
  visibility: hidden;
  opacity: 0;
  /* See .nav__menu — visibility must become `visible` on the same frame the
     panel opens, or the initial focus() call is a no-op. */
  transition: opacity var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-panel[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}
.nav-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--header-h);
  border-block-end: var(--hairline) solid var(--c-line);
}
.nav-panel__close {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-panel__close svg {
  inline-size: 1.4rem;
}
.nav-panel__body {
  padding-block: var(--space-l);
}
.nav-panel__list > li + li {
  border-block-start: var(--hairline) solid var(--c-line);
}
.nav-panel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  inline-size: 100%;
  min-block-size: 3.5rem;
  padding-block: 0.9rem;
  background: none;
  border: 0;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  line-height: 1.1;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.nav-panel__link .nav__caret {
  inline-size: 0.55em;
  color: var(--c-burgundy);
}
.nav-panel__sub {
  overflow: hidden;
  max-block-size: 0;
  transition: max-block-size var(--dur-base) var(--ease-inout);
}
.nav-panel__item[data-open="true"] .nav-panel__sub {
  max-block-size: 26rem;
}
.nav-panel__item[data-open="true"] .nav-panel__link .nav__caret {
  transform: rotate(180deg);
}
.nav-panel__sub a {
  display: block;
  padding: 0.7rem 0 0.7rem 1.25rem;
  border-inline-start: var(--hairline) solid var(--c-line);
  margin-inline-start: 0.25rem;
  font-size: var(--step-0);
  color: var(--c-text-soft);
  text-decoration: none;
}
.nav-panel__sub a:hover {
  color: var(--c-burgundy);
}
.nav-panel__sub li:last-child a {
  padding-block-end: 1.1rem;
}
.nav-panel__foot {
  padding-block: var(--space-l);
  border-block-start: var(--hairline) solid var(--c-line);
  display: grid;
  gap: var(--space-s);
}
.nav-panel__foot .btn {
  justify-content: center;
}
.nav-panel__contact {
  display: grid;
  gap: 0.35rem;
  font-size: var(--step--1);
  color: var(--c-text-soft);
}
.nav-panel__contact a {
  text-decoration: none;
}
.nav-panel__contact a:hover {
  text-decoration: underline;
}

@media (min-width: 64rem) {
  .nav {
    display: block;
  }
  .nav-burger {
    display: none;
  }
  .header-cta {
    display: inline-flex;
  }
}
@media (min-width: 78rem) {
  .header-phone {
    display: inline-flex;
  }
}

/* ==========================================================================
   09  SECTION: HERO
   ========================================================================== */

.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  isolation: isolate;
  color: var(--c-white);
  background: var(--c-ink);
  overflow: clip;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 58%;
}
/* Crossfading background stack — same pattern as .services__stack. The first
   image (is-current, fetchpriority=high) is the only one that must load before
   paint; the rest are loading="lazy" and fade in on rotation. */
.hero__stack {
  position: relative;
  will-change: transform;
  inline-size: 100%;
  block-size: 100%;
}
.hero__stack img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease-inout);
}
.hero__stack img.is-current {
  opacity: 1;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgb(10 10 12 / 0.82) 0%,
      rgb(10 10 12 / 0.42) 38%,
      rgb(10 10 12 / 0.12) 66%,
      rgb(10 10 12 / 0.3) 100%
    ),
    linear-gradient(to right, rgb(10 10 12 / 0.42), rgb(10 10 12 / 0) 62%);
}

.hero__body {
  display: flex;
  align-items: flex-end;
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl);
}
/* Wide enough for the longest display line to stay unbroken at every
   breakpoint; the lede is constrained separately below. */
.hero__content {
  max-inline-size: min(100%, 44rem);
}
.hero__eyebrow {
  color: color-mix(in srgb, #ffffff 82%, transparent);
}
.hero__eyebrow::before {
  background: var(--c-accent-invert);
}
.hero__title {
  margin-block-start: var(--space-m);
  color: var(--c-white);
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.28);
}
/* The headline sets as three lines on small screens and folds to two from the
   desktop breakpoint up: "We Plan. We Execute." / "You Celebrate."
   Each line stays its own element so the reveal animation masks them
   individually at every size — the row is only a layout wrapper. */
.hero__title .hero__row {
  display: block;
}
.hero__title .hero__line {
  display: block;
}
/* Clipping frame injected by animations.js; styled here, not inline, so the
   flex row below can lay the frames out as its items. */
.hero__frame {
  display: block;
  overflow: hidden;
  padding-block-end: 0.16em;
  margin-block-end: -0.16em;
}

@media (min-width: 64rem) {
  .hero__content {
    max-inline-size: min(100%, 66rem);
  }
  .hero__title .hero__row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.26em;
  }
  .hero__title .hero__row:only-child {
    display: block;
  }
}
.hero__lede {
  margin-block-start: var(--space-m);
  max-inline-size: 46ch;
  color: color-mix(in srgb, #ffffff 88%, transparent);
  font-size: var(--step-1);
  text-shadow: 0 1px 22px rgb(0 0 0 / 0.35);
}
.hero__actions {
  margin-block-start: var(--space-l);
}
.hero .btn--ghost {
  --btn-fg: var(--c-white);
  --btn-bd: color-mix(in srgb, #ffffff 55%, transparent);
}

@media (max-width: 47.99rem) {
  .hero {
    min-block-size: 100dvh;
  }
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   11  SECTION: FEATURED PROJECTS
   ========================================================================== */

.projects {
  background-color: var(--c-paper-2);
}

.projects__foot {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: var(--hairline) solid var(--c-line-strong);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}

/* --- Single-view project stage (filter bar + one full-bleed project) ---- */
.project-stage {
  margin-block-start: var(--space-xl);
}
.project-stage__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  margin-block-end: var(--space-l);
}
.project-filter {
  appearance: none;
  background: transparent;
  border: var(--hairline) solid var(--c-line-strong);
  padding: 0.55em 1.1em;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.project-filter:hover {
  border-color: var(--c-burgundy);
  color: var(--c-ink);
}
.project-filter.is-active {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-paper);
}

.project-stage__viewport {
  position: relative;
  overflow: hidden;
  background: var(--c-paper-2);
  aspect-ratio: 4 / 3;
}
@media (min-width: 48rem) {
  .project-stage__viewport {
    aspect-ratio: 16 / 9;
    max-block-size: calc(100svh - var(--header-h) - var(--space-2xl));
  }
}
/* Items are stacked and crossfaded rather than display-toggled, so switching
   projects reads as a dissolve instead of a hard cut. visibility is stepped
   (see .nav__menu for the same pattern) so hidden items leave the tab order
   and the accessibility tree the moment the fade finishes. */
.project-stage__item {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out),
    visibility 0s linear var(--dur-slow);
}
.project-stage__item.is-current {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s;
}
.project-stage__item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.project-stage__item:hover img,
.project-stage__item:focus-visible img {
  transform: scale(1.03);
}
/* Without JS the controls do nothing, so hide them and leave the first
   project on show rather than shipping dead buttons. */
html:not(.js) .project-stage__filters,
html:not(.js) .project-stage__controls {
  display: none;
}
.project-stage__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-l);
  background: linear-gradient(to top, rgb(10 10 12 / 0.82), rgb(10 10 12 / 0.35) 46%, rgb(10 10 12 / 0) 78%);
  color: var(--c-white);
}
.project-stage__title {
  font-size: var(--step-3);
  color: var(--c-white);
}
.project-stage__place {
  color: color-mix(in srgb, #ffffff 76%, transparent);
}
.project-stage__tag {
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, #ffffff 72%, transparent);
}
.project-stage__controls {
  margin-block-start: var(--space-m);
  display: flex;
  align-items: center;
  gap: var(--space-s);
}
.project-stage__btn {
  inline-size: 3rem;
  block-size: 3rem;
  display: grid;
  place-items: center;
  border: var(--hairline) solid var(--c-line-strong);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.project-stage__btn:hover:not(:disabled) {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-paper);
}
.project-stage__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.project-stage__btn svg {
  inline-size: 1rem;
}
.project-stage__count {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--c-mute);
}

/* ==========================================================================
   12  SECTION: SERVICES
   ========================================================================== */

.services__layout {
  margin-block-start: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);
  align-items: start;
}

.services__list {
  grid-column: 1 / -1;
  border-block-start: var(--hairline) solid var(--c-line);
}
.service {
  border-block-end: var(--hairline) solid var(--c-line);
}
.service__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-s);
  padding-block: var(--space-m);
  text-decoration: none;
  color: inherit;
  transition: color var(--dur-base) var(--ease-out);
}
.service__no {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--c-mute);
  transition: color var(--dur-base) var(--ease-out);
}
.service__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-3);
  line-height: 1.06;
  letter-spacing: -0.02em;
  transition: transform var(--dur-base) var(--ease-out);
  transform-origin: left center;
}
.service__arrow {
  inline-size: 1.1rem;
  color: var(--c-mute);
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.service__desc {
  padding-block-end: var(--space-m);
  margin-block-start: calc(var(--space-s) * -0.5);
  max-inline-size: 56ch;
  color: var(--c-text-soft);
  font-size: var(--step-0);
}

.service:hover .service__name,
.service.is-active .service__name {
  color: var(--c-burgundy);
}
.service:hover .service__no,
.service.is-active .service__no {
  color: var(--c-burgundy);
}
.service:hover .service__arrow,
.service.is-active .service__arrow,
.service__link:focus-visible .service__arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--c-burgundy);
}

/* Preview panel — desktop only; the mobile layout shows an image per row. */
.services__preview {
  display: none;
}
.service__thumb {
  margin-block-end: var(--space-m);
}

@media (min-width: 62rem) {
  .services__list {
    grid-column: 1 / span 6;
  }
  .services__preview {
    display: block;
    grid-column: 8 / span 5;
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-l));
  }
  .service__thumb {
    display: none;
  }
  .services__stack {
    position: relative;
    --ratio: 4 / 5;
    aspect-ratio: var(--ratio);
    overflow: hidden;
    background: var(--c-paper-2);
  }
  .services__stack img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
  }
  .services__stack img.is-current {
    opacity: 1;
  }
  .services__preview-caption {
    margin-block-start: var(--space-s);
    font-size: var(--step--1);
    color: var(--c-mute);
    min-block-size: 3em;
  }
  .service__desc {
    max-inline-size: 46ch;
  }
}

/* ==========================================================================
   14  SECTION: WHY NW BUILD
   ========================================================================== */

.why__layout {
  margin-block-start: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-xl);
  align-items: start;
}
.why__media {
  grid-column: 1 / -1;
}
.why__list {
  grid-column: 1 / -1;
  border-block-start: var(--hairline) solid var(--c-line);
}
/* Breathing room between the "Why NW Build" head and the list divider (About page). */
.section--alt.why .section-head {
  margin-block-end: var(--space-l);
}
.why__item {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--space-s);
  padding-block: var(--space-m);
  border-block-end: var(--hairline) solid var(--c-line);
}
.why__no {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-0);
  color: var(--c-burgundy);
  font-variant-numeric: tabular-nums;
  padding-block-start: 0.2em;
}
.why__title {
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.why__text {
  margin-block-start: var(--space-2xs);
  color: var(--c-text-soft);
  font-size: var(--step-0);
  max-inline-size: 52ch;
}
@media (min-width: 62rem) {
  .why__media {
    grid-column: 1 / span 5;
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-l));
  }
  .why__list {
    grid-column: 7 / span 6;
  }
}

/* ==========================================================================
   15  SECTION: WHY — content column
   ========================================================================== */

.why__content {
  grid-column: 1 / -1;
}
.why__lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--c-text);
  text-wrap: pretty;
  max-inline-size: 46ch;
  margin-block-end: var(--space-l);
}
.why__content .why__list {
  grid-column: auto;
}
.why__actions {
  margin-block-start: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-l);
}
.why__credit {
  font-size: var(--step--1);
  color: var(--c-mute);
}
.why__credit strong {
  color: var(--c-text);
  font-weight: 600;
}
@media (min-width: 62rem) {
  .why__content {
    grid-column: 7 / span 6;
  }
}

/* ==========================================================================
   16  SECTION: TESTIMONIALS
   ========================================================================== */

.testimonials {
  background-color: var(--c-paper-2);
}
.quotes {
  margin-block-start: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-l);
}
.quotes__viewport {
  grid-column: 1 / -1;
  position: relative;
}
.quote {
  margin: 0;
}
.quote[hidden] {
  display: none;
}
.quote__mark {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-5);
  line-height: 0.7;
  color: var(--c-burgundy);
  margin-block-end: var(--space-s);
}
.quote__text {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: calc(var(--step-3) * 0.8);
  line-height: 1.24;
  letter-spacing: -0.018em;
  text-wrap: pretty;
}
.quote__cite {
  display: block;
  margin-block-start: var(--space-m);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.quotes__controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding-block-start: var(--space-m);
  border-block-start: var(--hairline) solid var(--c-line-strong);
}
.quotes__btn {
  inline-size: 3rem;
  block-size: 3rem;
  display: grid;
  place-items: center;
  border: var(--hairline) solid var(--c-line-strong);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.quotes__btn:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-paper);
}
.quotes__btn svg {
  inline-size: 1rem;
}
.quotes__count {
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--c-mute);
}
@media (min-width: 62rem) {
  .quotes__viewport {
    grid-column: 2 / span 9;
  }
  .quotes__controls {
    grid-column: 2 / span 9;
  }
  .quote__text {
    font-size: calc(var(--step-3) * 0.8);
  }
}

/* ==========================================================================
   17  SECTION: SERVICE AREA
   ========================================================================== */

.area__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-xl);
}
.area__body {
  grid-column: 1 / -1;
  max-inline-size: 60rem;
  margin-inline: auto;
  text-align: center;
}
.area__body .eyebrow {
  justify-content: center;
}
.area__body .prose,
.area__body .prose p {
  margin-inline: auto;
}
.area__aside {
  grid-column: 1 / -1;
}
.area__list {
  margin-block-start: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2xs) var(--space-xs);
}
/* Forces a row break so the nine badges set as 5 (top) + 4 (bottom),
   each row independently centered by the flex justify-content above. */
.area__list li.area__list-break {
  flex-basis: 100%;
  block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.area__list li {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  border: var(--hairline) solid var(--c-line);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.area__list li a {
  display: block;
  padding: 0.5em 0.9em;
  color: inherit;
  text-decoration: none;
}
.area__list li:hover,
.area__list li:focus-within {
  border-color: var(--c-line-strong);
  color: var(--c-text);
}
.office-card {
  padding: var(--space-l);
  border: var(--hairline) solid var(--c-line-strong);
  background: var(--c-white);
  block-size: 100%;
  display: flex;
  flex-direction: column;
}
.office-card__label {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-burgundy);
}
/* Map fills the space left over so the card matches the form column's height. */
.office-card__map {
  flex: 1 1 auto;
  min-block-size: 15rem;
  margin-block-end: var(--space-l);
  overflow: hidden;
  background: var(--c-paper-2);
}
.office-card__map iframe {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 15rem;
  border: 0;
}
.office-card address {
  font-style: normal;
  font-size: var(--step-1);
  line-height: 1.45;
}
.office-card__rows {
  margin-block-start: var(--space-m);
  padding-block-start: var(--space-m);
  border-block-start: var(--hairline) solid var(--c-line);
  display: grid;
  gap: var(--space-xs);
  font-size: var(--step--1);
}
.office-card__row {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: baseline;
}
.office-card__row dt {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-mute);
  font-size: var(--step--2);
}
.office-card__row dd {
  margin: 0;
  text-align: right;
}
.office-card__row a {
  text-decoration: none;
  border-block-end: var(--hairline) solid var(--c-line-strong);
}
.office-card__row a:hover {
  color: var(--c-burgundy);
}
@media (min-width: 62rem) {
  .area__body {
    grid-column: 1 / -1;
  }
  .area__aside {
    grid-column: 8 / span 5;
  }
}

/* ==========================================================================
   18  SECTION: FINAL CTA / INQUIRY
   ========================================================================== */

.cta {
  background: var(--c-ink);
  position: relative;
  overflow: clip;
}
/* Subtle gradient circle glow behind the CTA */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: min(90vw, 46rem);
  block-size: min(90vw, 46rem);
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--c-burgundy) 35%, transparent) 0%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 0;
}
.cta__layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  row-gap: var(--space-2xl);
}
.cta__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta__title {
  margin-block-start: var(--space-m);
  max-inline-size: 18ch;
}
.cta__lede {
  margin-block-start: var(--space-m);
  max-inline-size: 46ch;
}
.cta__direct {
  margin-block-start: var(--space-l);
  display: grid;
  gap: var(--space-s);
  border-block-start: var(--hairline) solid var(--c-line-invert);
  padding-block-start: var(--space-m);
}
.cta__direct-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem var(--space-s);
}
.cta__direct-row dt {
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-paper) 55%, transparent);
}
.cta__direct-row dd {
  margin: 0;
}
.cta__direct-row a {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  text-decoration: none;
  border-block-end: var(--hairline) solid var(--c-line-invert);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.cta__direct-row a:hover {
  color: var(--c-accent-invert);
  border-color: var(--c-accent-invert);
}
.cta .btn--ghost {
  --btn-fg: var(--c-paper);
  --btn-bd: var(--c-line-strong);
}

/* --- Direct contact ------------------------------------------------------ */
.cta__contact {
  grid-column: 1 / -1;
}
/* Service template shares this CTA but omits the direct-contact list, matching
   the home/about CTA (centered, gradient circle, no phone/email/hours block). */
.service-template .cta__contact {
  display: none;
}
.cta__contact .cta__direct {
  margin-block-start: 0;
}
.cta__actions {
  margin-block-start: var(--space-l);
}


/* ==========================================================================
   INNER PAGES  (About, Contact — file-served via page.php)
   ========================================================================== */

/* Inner-page hero — a full-bleed image that runs up behind the fixed header,
   like the homepage: transparent white header over the image at the top,
   turning solid on scroll (main.js). The <body class="page"> hook stays for
   future use but no longer forces the header solid. */
.page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-block-size: clamp(24rem, 54svh, 40rem);
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-xl);
  color: var(--c-white);
  background: var(--c-ink);
  overflow: clip;
}
.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.page-hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 55%);
}
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgb(10 10 12 / 0.8) 0%,
      rgb(10 10 12 / 0.42) 46%,
      rgb(10 10 12 / 0.32) 100%
    ),
    linear-gradient(to right, rgb(10 10 12 / 0.44), rgb(10 10 12 / 0) 64%);
}
.page-hero .eyebrow {
  color: color-mix(in srgb, #ffffff 82%, transparent);
}
.page-hero .eyebrow::before {
  background: var(--c-accent-invert);
}
.page-hero__title {
  margin-block-start: var(--space-m);
  max-inline-size: 22ch;
  color: var(--c-white);
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.28);
}
.page-hero__lede {
  margin-block-start: var(--space-m);
  max-inline-size: 56ch;
  color: color-mix(in srgb, #ffffff 88%, transparent);
  text-shadow: 0 1px 22px rgb(0 0 0 / 0.35);
}

/* Two-column prose (mission / vision). */
.prose-2col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-block-start: var(--space-xl);
}
@media (min-width: 48rem) {
  .prose-2col {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
}
.prose-2col h3 {
  font-size: var(--step-2);
  margin-block-end: var(--space-s);
}

/* Balanced image + text split (About "Our story") — vertically centred so
   short copy sits level with the image instead of leaving a tall void. */
.why--story .feature {
  margin-block-start: 0;
}
.feature {
  margin-block-start: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 62rem) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }
  .feature--reverse .feature__media {
    order: 2;
  }
}

/* Numbered steps (our process). */
.steps {
  margin-block-start: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
}
@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: var(--space-l);
  }
}
.step-card {
  border-block-start: var(--hairline) solid var(--c-line-strong);
  padding-block-start: var(--space-m);
}
.step-card__no {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  color: var(--c-burgundy);
  font-variant-numeric: tabular-nums;
}
.step-card__title {
  margin-block-start: var(--space-xs);
  font-size: var(--step-2);
}
.step-card__text {
  margin-block-start: var(--space-s);
  color: var(--c-text-soft);
  max-inline-size: 40ch;
}

/* Contact: form + info side by side. */
/* Contact form section: no section heading, so trim the top padding. */
.contact-section {
  padding-block-start: var(--space-l);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  margin-block-start: var(--space-m);
  align-items: stretch;
}
@media (min-width: 62rem) {
  .contact-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-3xl);
  }
}

/* Inquiry form — light background (Contact page). */
.inquiry {
  display: grid;
  gap: var(--space-m);
}
.inquiry__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}
@media (min-width: 40rem) {
  .inquiry__grid {
    grid-template-columns: 1fr 1fr;
  }
  .field--full {
    grid-column: 1 / -1;
  }
}
.field {
  display: grid;
  gap: 0.5rem;
}
.field label {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.field .req {
  color: var(--c-burgundy);
}
.field input,
.field select,
.field textarea {
  inline-size: 100%;
  padding: 0.85rem 0;
  background: transparent;
  border: 0;
  border-block-end: var(--hairline) solid var(--c-line-strong);
  border-radius: 0;
  color: var(--c-ink);
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 1.45rem, calc(100% - 6px) 1.45rem;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 1.75rem;
}
.field textarea {
  min-block-size: 7rem;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-burgundy);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--c-burgundy);
  outline-offset: 4px;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--c-mute);
}
.field__error {
  font-size: var(--step--1);
  color: #b3261e;
  min-block-size: 1.2em;
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #b3261e;
}
.inquiry__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  justify-content: space-between;
}
.inquiry__note {
  font-size: var(--step--2);
  color: var(--c-mute);
  max-inline-size: 36ch;
}
.inquiry__status {
  font-size: var(--step--1);
  color: var(--c-burgundy);
  min-block-size: 1.4em;
}

/* ==========================================================================
   19  FOOTER
   ========================================================================== */

.site-footer {
  background: var(--c-ink);
  padding-block: var(--space-2xl) var(--space-l);
  border-block-start: var(--hairline) solid var(--c-line-invert);
}
.footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-xl);
}
.footer__brand {
  grid-column: 1 / -1;
}
.footer__brand .brand__mark {
  filter: brightness(0) invert(1);
  block-size: 2.75rem;
}
/* The knockout artwork is already white — leave it alone. */
.brand__mark--knockout {
  filter: none !important;
}
.footer__tagline {
  margin-block-start: var(--space-m);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  line-height: 1.14;
  letter-spacing: -0.02em;
  max-inline-size: 18ch;
}
.footer__col {
  grid-column: span 6;
}
/* The address block needs the full row on small screens or the street, hours
   and licence number all break mid-value. */
.footer__col--contact {
  grid-column: 1 / -1;
}
.footer__heading {
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-paper) 52%, transparent);
  margin-block-end: var(--space-s);
}
.footer__links li + li {
  margin-block-start: 0.55rem;
}
.footer__links a {
  font-size: var(--step-0);
  text-decoration: none;
  color: var(--c-text-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__links a:hover {
  color: var(--c-paper);
  text-decoration: underline;
}
.footer__contact {
  font-style: normal;
  display: grid;
  gap: 0.55rem;
  color: var(--c-text-soft);
  font-size: var(--step-0);
}
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  column-gap: 0.7rem;
  color: inherit;
}
.footer__contact-icon {
  flex: 0 0 1.15rem;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.18em;
  color: color-mix(in srgb, var(--c-paper) 58%, transparent);
}
.footer__contact a {
  text-decoration: none;
}
.footer__contact a:hover {
  color: var(--c-paper);
  text-decoration: underline;
}
.footer__social {
  display: flex;
  gap: var(--space-xs);
  margin-block-start: var(--space-m);
}
.footer__social a {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  border: var(--hairline) solid var(--c-line-invert);
  color: var(--c-text-soft);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.footer__social a:hover {
  color: var(--c-paper);
  border-color: var(--c-paper);
}
.footer__social svg {
  inline-size: 1.05rem;
}
.footer__bottom {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: var(--hairline) solid var(--c-line-invert);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
  font-size: var(--step--1);
  color: color-mix(in srgb, var(--c-paper) 52%, transparent);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
}
.footer__legal a {
  text-decoration: none;
}
.footer__legal a:hover {
  color: var(--c-paper);
  text-decoration: underline;
}

@media (min-width: 48rem) {
  .footer__brand {
    grid-column: span 12;
  }
  .footer__col {
    grid-column: span 3;
  }
}
@media (min-width: 62rem) {
  .footer__brand {
    grid-column: span 3;
  }
  .footer__col--nav {
    grid-column: 5 / span 2;
  }
  .footer__col--services {
    grid-column: 7 / span 3;
  }
  .footer__col--contact {
    grid-column: 10 / span 3;
  }
}

/* ==========================================================================
   20  MOTION — pre-animation states & reduced motion
   ========================================================================== */

/* Only hide content when JS is running AND the user accepts motion, so the
   page is fully legible with JS disabled or GSAP unavailable. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.anim-ready) [data-reveal],
  html.js.anim-on [data-reveal] {
    opacity: 0;
  }
  html.js.anim-on [data-reveal="up"] {
    transform: translateY(1.75rem);
  }
  html.js.anim-on [data-reveal="mask"] {
    clip-path: inset(0 0 100% 0);
    opacity: 1;
  }
  html.js.anim-on [data-reveal="line"] {
    transform: scaleX(0);
  }
  /* Safety net: if GSAP never initialises, reveal everything. */
  html.js.anim-failed [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .project-stage__item,
  .project-stage__item img {
    transition: none;
  }
}

/* ==========================================================================
   GALLERY  (tabbed grid + lightbox — file-served gallery page)
   ========================================================================== */
.portfolio__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  border-block-end: var(--hairline) solid var(--c-line);
  margin-block-end: var(--space-xl);
}
.portfolio__tab {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0 0 var(--space-s);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-1);
  color: var(--c-text-soft);
  cursor: pointer;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.portfolio__tab::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  block-size: 2px;
  background: var(--c-burgundy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.portfolio__tab:hover,
.portfolio__tab.is-active {
  color: var(--c-ink);
}
.portfolio__tab.is-active::after {
  transform: scaleX(1);
}
.portfolio__tab:focus-visible {
  outline: 2px solid var(--c-burgundy);
  outline-offset: 4px;
}

.portfolio__panel[hidden] {
  display: none;
}
.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (max-width: 60rem) {
  .portfolio__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 40rem) {
  .portfolio__grid {
    grid-template-columns: 1fr;
  }
}
.portfolio__item {
  margin: 0;
}
.portfolio__open {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: var(--c-paper-2);
  cursor: zoom-in;
  overflow: hidden;
}
.portfolio__open img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.portfolio__open:hover img {
  transform: scale(1.04);
}
.portfolio__open:focus-visible {
  outline: 2px solid var(--c-burgundy);
  outline-offset: 3px;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(10 10 12 / 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox__img {
  max-inline-size: min(100%, 80rem);
  max-block-size: 85vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.5);
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.lightbox__btn:hover {
  background: rgb(255 255 255 / 0.24);
}
.lightbox__btn svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}
.lightbox__close {
  inset-block-start: 1.25rem;
  inset-inline-end: 1.25rem;
}
.lightbox__prev {
  inset-inline-start: 1.25rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
}
.lightbox__next {
  inset-inline-end: 1.25rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
}
@media (max-width: 40rem) {
  .lightbox__prev {
    inset-block: auto 1.25rem;
    transform: none;
  }
  .lightbox__next {
    inset-block: auto 1.25rem;
    transform: none;
  }
}

/* ==========================================================================
   LOCATION PAGE  (services-offered list)
   ========================================================================== */
.loc-services {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-block-start: var(--hairline) solid var(--c-line);
}
@media (min-width: 48rem) {
  .loc-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
}
@media (min-width: 62rem) {
  .loc-services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.loc-services li {
  border-block-end: var(--hairline) solid var(--c-line);
}
.loc-services a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-m) 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-1);
  text-decoration: none;
  color: var(--c-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.loc-services a:hover {
  color: var(--c-burgundy);
}
.loc-services a svg {
  inline-size: 1rem;
  block-size: 0.75rem;
  color: var(--c-burgundy);
  flex: none;
}
.loc-nearby {
  margin-block-start: var(--space-l);
  color: var(--c-text-soft);
  max-inline-size: var(--shell-text);
}
/* Location CTA headings are long/dynamic — smaller size, balanced to ~2 lines. */
.location-template .cta__title {
  font-size: var(--step-4);
  max-inline-size: 24ch;
  text-wrap: balance;
}

/* ==========================================================================
   BLOG  (index card grid + single-post layout)
   ========================================================================== */

/* Slightly shorter hero for the blog index / posts. */
.page-hero--compact,
.post-hero {
  min-block-size: clamp(20rem, 46svh, 32rem);
}
.post-hero__meta {
  margin-block-start: var(--space-m);
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, #ffffff 82%, transparent);
}

/* --- Index grid --- */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl) var(--grid-gap);
}
@media (min-width: 40rem) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 62rem) {
  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.blog-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.blog-card__figure {
  display: block;
  overflow: hidden;
  margin-block-end: var(--space-s);
}
.blog-card__figure img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.blog-card__link:hover .blog-card__figure img,
.blog-card__link:focus-visible .blog-card__figure img {
  transform: scale(1.04);
}
.blog-card__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.blog-card__tag {
  color: var(--c-burgundy);
  font-weight: 500;
}
.blog-card__title {
  display: block;
  margin-block-start: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-2);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--c-ink);
  text-wrap: balance;
  transition: color var(--dur-fast) var(--ease-out);
}
.blog-card__link:hover .blog-card__title,
.blog-card__link:focus-visible .blog-card__title {
  color: var(--c-burgundy);
}
.blog-card__excerpt {
  display: block;
  margin-block-start: var(--space-xs);
  color: var(--c-text-soft);
  text-wrap: pretty;
}
.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-block-start: var(--space-s);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.blog-card__more svg {
  inline-size: 1rem;
  block-size: 0.75rem;
  transition: transform var(--dur-base) var(--ease-out);
}
.blog-card__link:hover .blog-card__more svg {
  transform: translateX(0.25rem);
}

/* --- Pagination --- */
.blog-pagination {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: var(--hairline) solid var(--c-line-strong);
}
.blog-pagination .page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}
.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  padding: 0.6em 0.9em;
  border: var(--hairline) solid var(--c-line-strong);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--c-ink);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.blog-pagination .page-numbers a:hover {
  color: var(--c-burgundy);
  border-color: var(--c-burgundy);
}
.blog-pagination .page-numbers .current {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
}

/* --- Single-post layout: TOC + prose --- */
.post-layout__shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
@media (min-width: 62rem) {
  .post-layout__shell {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

.post-toc {
  border-block-start: 2px solid var(--c-burgundy);
  padding-block-start: var(--space-s);
}
@media (min-width: 62rem) {
  .post-toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-m));
  }
}
.post-toc__title {
  margin: 0 0 var(--space-s);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.post-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.post-toc__list li {
  counter-increment: toc;
}
.post-toc__list li + li {
  margin-block-start: var(--space-2xs);
}
.post-toc__list a {
  display: grid;
  grid-template-columns: 1.6em 1fr;
  gap: 0.4em;
  padding-block: 0.35em;
  font-size: var(--step--1);
  line-height: 1.35;
  text-decoration: none;
  color: var(--c-text-soft);
  transition: color var(--dur-fast) var(--ease-out);
}
.post-toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--c-burgundy);
  font-variant-numeric: tabular-nums;
}
.post-toc__list a:hover {
  color: var(--c-ink);
}

/* Post body prose — richer than the shared .prose (which is tuned for short
   intros). Scoped so it only affects rendered post content. */
.post-body {
  max-inline-size: 68ch;
}
.post-body > * + * {
  margin-block-start: 1.15em;
}
.post-body p,
.post-body li {
  color: var(--c-text-soft);
  max-inline-size: 68ch;
}
.post-body h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-3);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: var(--c-ink);
  margin-block-start: 1.8em;
  scroll-margin-top: calc(var(--header-h) + var(--space-m));
}
.post-body h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--c-ink);
  margin-block-start: 1.5em;
}
.post-body ul,
.post-body ol {
  padding-inline-start: 1.3em;
}
.post-body li + li {
  margin-block-start: 0.5em;
}
.post-body a {
  color: var(--c-burgundy);
  text-underline-offset: 0.18em;
}
.post-body img {
  inline-size: 100%;
  block-size: auto;
}
.post-body blockquote,
.post-body .callout {
  margin-inline: 0;
  padding: var(--space-m) var(--space-l);
  border-inline-start: 3px solid var(--c-burgundy);
  background: var(--c-paper-2);
}
.post-body blockquote p,
.post-body .callout p {
  color: var(--c-ink);
  max-inline-size: none;
}
.post-body table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.post-body th,
.post-body td {
  padding: var(--space-xs) var(--space-s);
  border-block-end: var(--hairline) solid var(--c-line-strong);
  text-align: start;
}
.post-body th {
  font-weight: 600;
  color: var(--c-ink);
}

/* Print: keep it simple and readable. */
@media print {
  .site-header,
  .nav-panel,
  .hero__media {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}

.portfolio__filters{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-s);margin-block-end:var(--space-xl);}
.portfolio__project[hidden]{display:none;}
.portfolio__project+.portfolio__project{margin-block-start:var(--space-2xl);padding-block-start:var(--space-l);border-block-start:var(--hairline) solid var(--c-line);}
.portfolio__project-head{margin-block-end:var(--space-m);}
.portfolio__project-title{font-family:var(--font-display);font-weight:600;font-size:var(--step-3);line-height:1.15;color:var(--c-burgundy);}
.portfolio__project-place{color:var(--c-mute);font-weight:400;}
.portfolio__project-tag{margin-block-start:var(--space-2xs);font-size:var(--step--1);letter-spacing:0.1em;text-transform:uppercase;color:var(--c-mute);}

/* ==========================================================================
   NWB PROJECTS CPT
   Portfolio index grid, single-project gallery, prev/next and related work.
   ========================================================================== */
/* NWB PROJECTS CPT */
.project-grid-wrap {
  display: block;
}
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  margin-block-start: var(--space-xl);
}
@media (min-width: 40rem) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .project-grid { grid-template-columns: repeat(3, 1fr); }
}
.project-card2 {
  display: block;
  text-decoration: none;
  color: inherit;
}
.project-card2[hidden] { display: none; }
.project-card2__figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 3 / 2;
  background: var(--c-paper-2);
}
.project-card2__figure img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.project-card2:hover .project-card2__figure img,
.project-card2:focus-visible .project-card2__figure img {
  transform: scale(1.04);
}
.project-card2__body {
  padding-block-start: var(--space-s);
  border-block-start: var(--hairline) solid var(--c-rule);
  margin-block-start: var(--space-s);
}
.project-card2__title {
  font-size: var(--step-1);
  line-height: 1.2;
}
.project-card2__place {
  color: var(--c-mute);
  font-weight: 400;
}
.project-card2__cats {
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-burgundy);
}

/* Single project ------------------------------------------------------- */
.project-single__back {
  color: var(--c-burgundy);
  text-decoration: none;
}
.project-single__back:hover { text-decoration: underline; }
.project-single__title { margin-block-start: var(--space-xs); }
.project-single__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l);
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-m);
  border-block-start: var(--hairline) solid var(--c-rule);
}
.project-single__metaitem {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}
.project-single__label {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.project-single__intro { margin-block-start: var(--space-l); max-inline-size: 62ch; }

/* Gallery: a steady two-up rhythm with a full-width plate every fifth image. */
.pgal {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}
@media (min-width: 48rem) {
  .pgal { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); }
  .pgal__item--wide { grid-column: 1 / -1; }
}
.pgal__item {
  margin: 0;
  overflow: hidden;
  background: var(--c-paper-2);
  aspect-ratio: 3 / 2;
}
.pgal__item--wide { aspect-ratio: 16 / 9; }
.pgal__item img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Prev / next ---------------------------------------------------------- */
.project-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-l);
  border-block: var(--hairline) solid var(--c-rule);
}
.project-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  text-decoration: none;
  color: var(--c-text);
  font-size: var(--step-0);
}
.project-nav__link:hover { color: var(--c-burgundy); }
.project-nav__link--next { margin-inline-start: auto; text-align: end; }
.project-nav__link svg { inline-size: 1rem; flex: none; }
.project-nav__label {
  display: block;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.project-grid--related { margin-block-start: var(--space-l); }
/* NWB SINGLE PROJECT SURFACE */
/* The body carries a tinted --pattern texture via background-blend-mode. The
   project pages sit on a plain white plate instead, so photography reads
   cleanly and the page keeps the same container rhythm as the rest of the
   site (u-shell handles the responsive gutters). */
.project-single {
  background-color: var(--c-white);
}
.project-single__section {
  position: relative;
  padding-block: var(--space-2xl);
  background-color: var(--c-white);
}
.project-single__section--head {
  padding-block-end: var(--space-xl);
}
.project-single__section--related {
  border-block-start: var(--hairline) solid var(--c-rule);
}
.pgal__item,
.project-card2__figure {
  background-color: var(--c-white);
}
@media (max-width: 47.99rem) {
  .project-single__section {
    padding-block: var(--space-xl);
  }
  .project-single__meta {
    gap: var(--space-m);
  }
}

/* NWB CPT SURFACE */
/* Detail pages for the content types (projects, services, locations) sit on a
   plain white plate rather than the tinted body texture, so photography and
   long-form copy read cleanly. Containers stay on u-shell so gutters match the
   rest of the site at every breakpoint. */
.service-template,
.location-template {
  background-image: none;
  background-color: var(--c-white);
}
/* Every section goes white EXCEPT the inverted CTA, which supplies its own
   dark ground and white type - forcing white there put white text on white. */
.service-template .section:not(.is-inverted),
.location-template .section:not(.is-inverted),
.service-template .page-hero,
.location-template .page-hero {
  background-color: var(--c-white);
}
/* With the alternating tint gone, an even hairline between consecutive
   sections carries the rhythm instead, and the block padding is a single
   value so the gaps read as regular. */
/* space-2xl is 64-128px, so as padding-block it left up to ~256px between
   consecutive sections. With the alternating tint gone there is nothing to
   break that up, so the rhythm steps down to space-xl (48-80px) and the
   hairline carries the separation. */
.service-template .section:not(.is-inverted),
.location-template .section:not(.is-inverted) {
  padding-block: var(--space-xl);
}
/* The two-column feature gap was also a full space-2xl on desktop. */
@media (min-width: 62rem) {
  .service-template .feature,
  .location-template .feature {
    gap: var(--space-xl);
  }
}
.service-template .section:not(.is-inverted) + .section:not(.is-inverted),
.location-template .section:not(.is-inverted) + .section:not(.is-inverted) {
  border-block-start: var(--hairline) solid var(--c-rule);
}

/* NWB FULL-BLEED STAGE */
/* The homepage slider breaks out of .u-shell to run edge to edge and fill the
   viewport, so the photography is the whole focus. Controls sit over the image
   rather than below it, and the caption keeps the site's gutters via a nested
   u-shell so it lines up with everything above. */
.project-stage--full {
  position: relative;
  inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
  margin-block-start: var(--space-xl);
}
.project-stage--full .project-stage__viewport {
  aspect-ratio: auto;
  block-size: 100svh;
  max-block-size: none;
  background: var(--c-ink, #0a0a0c);
}
.project-stage--full .project-stage__caption {
  padding-block: var(--space-2xl) var(--space-3xl);
}
.project-stage--full .project-stage__controls {
  position: absolute;
  inset-block-end: var(--space-l);
  inset-inline-end: var(--space-l);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin: 0;
}
.project-stage--full .project-stage__btn {
  inline-size: 3rem;
  block-size: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--hairline) solid rgb(255 255 255 / 0.45);
  border-radius: 50%;
  background: rgb(10 10 12 / 0.35);
  backdrop-filter: blur(6px);
  color: var(--c-white);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.project-stage--full .project-stage__btn:hover,
.project-stage--full .project-stage__btn:focus-visible {
  background: rgb(10 10 12 / 0.7);
  border-color: var(--c-white);
}
.project-stage--full .project-stage__btn svg { inline-size: 1rem; }
.project-stage--full .project-stage__count {
  color: var(--c-white);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  margin: 0;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}
@media (max-width: 47.99rem) {
  .project-stage--full .project-stage__viewport { block-size: 78svh; }
  .project-stage--full .project-stage__controls {
    inset-inline: var(--space-m);
    justify-content: space-between;
  }
  .project-stage--full .project-stage__caption { padding-block-end: 5.5rem; }
}

/* NWB UI REFINEMENTS */

/* Mobile panel: the two dropdown parents are <button>, which carries a UA
   padding-inline in Safari and pushed them right of the anchor items. Submenu
   links lose their rule-and-indent so every row starts on one axis. */
.nav-panel__link {
  padding-inline: 0;
}
.nav-panel__sub a {
  padding-inline: 0;
  border-inline-start: 0;
  margin-inline-start: 0;
}
/* The panel takes focus on open instead of the logo, so no control shows a
   ring from a tap. Keyboard users still get rings on the controls themselves. */
.nav-panel:focus,
.nav-panel:focus-visible {
  outline: none;
}

/* Slider caption: let the location drop to its own line on small screens so
   the project name is not broken across two lines by the em dash. */
@media (max-width: 47.99rem) {
  .project-stage--full .project-stage__title {
    font-size: var(--step-1);
  }
  .project-stage__place {
    display: block;
    margin-block-start: 0.15em;
    font-size: var(--step-0);
  }
  .project-card2__place {
    display: block;
    font-size: var(--step-0);
  }
}

/* Single project: clear the fixed header, and match the space below the meta
   block to the space above it. */
.project-single__section--head {
  padding-block-start: calc(var(--header-h) + var(--space-xl));
  padding-block-end: var(--space-l);
}
.project-single__section--head + .project-single__section {
  padding-block-start: 0;
}

/* Prev/next stays side by side at every width; the arrows carry the accent. */
.project-nav__link svg {
  color: var(--c-burgundy);
}
.project-nav__link:hover .project-nav__label {
  color: var(--c-burgundy);
}
@media (max-width: 47.99rem) {
  .project-nav {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-m);
  }
  .project-nav__link {
    font-size: var(--step--1);
    gap: var(--space-2xs);
    line-height: 1.25;
  }
  .project-nav__label {
    font-size: 0.68rem;
  }
  .project-nav__link svg {
    inline-size: 0.85rem;
  }
}

/* Back to top — icon only, sits at the end of the footer's legal row and
   fades in once the footer itself is on screen (see [data-to-top] script). */
.to-top {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
/* The reveal only applies once the script has taken charge, so the control
   stays visible if that script never runs. */
.site-footer.has-to-top-reveal .to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.4rem);
  transition: opacity var(--dur-slow, 0.4s) var(--ease-out),
              transform var(--dur-slow, 0.4s) var(--ease-out),
              visibility 0s linear var(--dur-slow, 0.4s);
}
.site-footer.has-to-top-reveal .to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .site-footer.has-to-top-reveal .to-top {
    transform: none;
    transition: opacity var(--dur-fast) linear, visibility 0s linear var(--dur-fast);
  }
  .site-footer.has-to-top-reveal .to-top.is-visible { transition-delay: 0s; }
}
.to-top__icon {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  display: grid;
  place-items: center;
  border: var(--hairline) solid currentColor;
  border-radius: 50%;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.to-top__icon svg {
  inline-size: 0.7rem;
}
.to-top:hover .to-top__icon {
  background: var(--c-burgundy);
  border-color: var(--c-burgundy);
  color: var(--c-white);
}
/* When the bottom row wraps, the legal links take the full width so the
   button still finishes the line on the right rather than dropping below. */
@media (max-width: 47.99rem) {
  .footer__legal { inline-size: 100%; }
  .to-top { margin-inline-start: auto; }
}

/* NWB MOBILE HERO STABILITY */
@media (pointer: coarse) {
  .hero__stack {
    will-change: auto;
    transform: none;
  }
}

/* NWB PAGINATION + LIGHTBOX TRIGGERS */

/* Gallery thumbnails are buttons so they are keyboard reachable; the button
   itself is invisible chrome. */
.pgal__btn {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
}
.pgal__btn img {
  transition: transform var(--dur-slow) var(--ease-out);
}
.pgal__btn:hover img,
.pgal__btn:focus-visible img {
  transform: scale(1.03);
}

/* Prev/next carries more weight on desktop: the project name reads at heading
   scale, and the row sits closer to the gallery it follows. */
.project-single__section--nav {
  padding-block: 0;
}
.project-nav {
  padding-block: var(--space-xl);
}
.project-nav__link {
  align-items: center;
  max-inline-size: 22rem;
}
.project-nav__link--next {
  justify-content: flex-end;
}
@media (min-width: 48rem) {
  .project-nav__link {
    font-size: var(--step-2);
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    line-height: 1.15;
    letter-spacing: -0.01em;
    gap: var(--space-m);
  }
  .project-nav__label {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: var(--step--1);
    margin-block-end: 0.25rem;
  }
  .project-nav__link svg {
    inline-size: 1.5rem;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .project-nav__link--prev:hover svg { transform: translateX(-0.25rem); }
  .project-nav__link--next:hover svg { transform: translateX(0.25rem); }
}

/* NWB MOBILE FILTER RAIL */

/* Hero lede: avoid a short orphan last line and tighten the measure so the
   sentence breaks at sensible points instead of stranding a few words. */
.page-hero__lede {
  text-wrap: pretty;
}
@media (max-width: 47.99rem) {
  .page-hero__lede {
    max-inline-size: 34ch;
    font-size: var(--step-0);
    line-height: 1.45;
  }
}

/* Portfolio filters on mobile: one swipeable row rather than three wrapped
   rows, bleeding to the screen edges so it reads as scrollable and the first
   project sits inside the fold. */
@media (max-width: 47.99rem) {
  .project-grid-wrap .project-stage__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    gap: 0.4rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    margin-block-end: var(--space-m);
  }
  .project-grid-wrap .project-stage__filters::-webkit-scrollbar {
    display: none;
  }
  .project-grid-wrap .project-filter {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 0.5em 0.85em;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  /* The portfolio grid follows a full-bleed hero, so it does not need the
     full section rhythm above it. */
  .section.portfolio {
    padding-block-start: var(--space-l);
  }
  .project-grid {
    margin-block-start: 0;
    gap: var(--space-m);
  }
}

/* NWB FILTER RAIL CUE */
.filter-rail {
  position: relative;
}
@media (max-width: 47.99rem) {
  /* Own the trailing margin so the cue can centre against the chip row. */
  .filter-rail {
    margin-block-end: var(--space-m);
  }
  .filter-rail .project-stage__filters {
    margin-block-end: 0;
  }
  /* Fade the chips themselves rather than painting a gradient over them, so
     the section's textured background shows through untouched. */
  .filter-rail.has-overflow .project-stage__filters {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.25rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 3.25rem), transparent 100%);
  }
  .filter-rail.has-overflow.is-end .project-stage__filters {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .filter-rail__cue {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0;
    transform: translateY(-50%);
    display: none;
    color: var(--c-burgundy);
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .filter-rail.has-overflow .filter-rail__cue {
    display: block;
  }
  .filter-rail.has-overflow.is-end .filter-rail__cue {
    opacity: 0;
  }
  .filter-rail__cue svg {
    display: block;
    inline-size: 0.85rem;
  }
}
/* The cue is a mobile-only affordance; the desktop row wraps normally. */
@media (min-width: 48rem) {
  .filter-rail__cue { display: none; }
}

/* NWB FOOTER CREDIT */
.footer__credit {
  margin-block-start: 0.35rem;
}
.footer__credit a {
  color: inherit;
  text-decoration: none;
  border-block-end: var(--hairline) solid currentColor;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.footer__credit a:hover {
  color: var(--c-burgundy);
  border-color: var(--c-burgundy);
}