/* Ported from aakb-website in frontend layout import order. Fonts: Google Fonts, OFL. */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/sites/aakb/fonts/instrument-serif-italic-400.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 Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/sites/aakb/fonts/instrument-serif-normal-400.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/sites/aakb/fonts/jetbrains-mono-normal-400.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/sites/aakb/fonts/jetbrains-mono-normal-500.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/sites/aakb/fonts/space-grotesk-normal-300.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/sites/aakb/fonts/space-grotesk-normal-400.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/sites/aakb/fonts/space-grotesk-normal-500.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/sites/aakb/fonts/space-grotesk-normal-600.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/sites/aakb/fonts/space-grotesk-normal-700.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;
}
/* next/font's metric fallbacks from aakb-website. They also draw what the latin subsets
   leave out (→ ← ∞), so those glyphs match the original's size. */
@font-face { font-family: 'Instrument Serif Fallback'; src: local('Times New Roman'); ascent-override: 117.94%; descent-override: 36.93%; line-gap-override: 0%; size-adjust: 83.94%; }
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial'); ascent-override: 89.71%; descent-override: 26.62%; line-gap-override: 0%; size-adjust: 109.69%; }
@font-face { font-family: 'JetBrains Mono Fallback'; src: local('Arial'); ascent-override: 75.79%; descent-override: 22.29%; line-gap-override: 0%; size-adjust: 134.59%; }
:root { --font-serif-display: "Instrument Serif", "Instrument Serif Fallback"; --font-body: "Space Grotesk", "Space Grotesk Fallback"; --font-code: "JetBrains Mono", "JetBrains Mono Fallback"; }
/* AAKB base reset previously supplied by Tailwind preflight; shared host overrides. */
:where(.site-aakb) *, :where(.site-aakb) ::before, :where(.site-aakb) ::after { box-sizing: border-box; }
.site-aakb main { max-width: none; margin: 0; padding: 0; }
/* Undo the template's generic header/footer/nav box (app/(frontend)/styles.css) at zero
   class specificity, so AAKB's own class rules (e.g. .site-footer padding) still win. */
:where(.site-aakb) :is(header, footer) { max-width: none; margin: 0; padding: 0; }
:where(.site-aakb) :is(header, nav) { display: revert; gap: normal; justify-content: normal; }
:where(.site-aakb) section { margin-block: 0; }
.site-aakb img { border-radius: 0; }
.site-aakb :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd) { margin: 0; }
.site-aakb :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
.site-aakb :where(ol, ul) { list-style: none; margin: 0; padding: 0; }
.site-aakb :where(input, textarea, select) { font: inherit; color: inherit; border-radius: 0; }
.site-aakb .block { margin: 0; }
.site-aakb .hero { display: block; }
.site-aakb .hero h1 { margin-bottom: 0; }
.site-aakb .button { border-radius: 0; font-weight: 400; }
.site-aakb .site-footer__legal { margin: 0; max-width: none; opacity: 1; }
/* Source: app/(frontend)/aakb.css */
/* =========================================================
   All About Kitchens & Bathrooms — design system
   Tokens mirror the Penpot `site` token set (gospel §2):
   color.bg-0 → --bg-0, color.ink-0 → --ink-0, color.accent → --accent …
   Source palette: bone + ink + brand green (#37833C).
   ========================================================= */

:root {
  --bg-0: #efebe2; /* bone */
  --bg-1: #e6e1d5; /* bone-2 */
  --bg-2: #f6f3ec; /* paper */
  --ink-0: #141414;
  --ink-1: #2a2825;
  --mute: #6b6862;
  --rule: #1a1a1a;
  --rule-soft: rgba(20, 20, 20, 0.18);
  --accent: #37833c;
  --accent-2: #2a6630;
  --accent-soft: #c9d8c1;
  --white: #ffffff;

  --font-serif: var(--font-serif-display), 'Instrument Serif', 'Times New Roman', serif;
  --font-sans: var(--font-body), 'Space Grotesk', system-ui, sans-serif;
  --font-mono: var(--font-code), 'JetBrains Mono', ui-monospace, monospace;

  --wrap-max: 1400px;
  --wrap-pad: 32px;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 720px) {
  :root {
    --wrap-pad: 20px;
  }
}

/* ---------- base ---------- */
html {
  background: var(--bg-0);
  color: var(--ink-0);
  scroll-behavior: smooth;
}

body {
  background: var(--bg-0);
  color: var(--ink-0);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: var(--accent);
  color: var(--bg-0);
}

/* Section chrome: every block section closes with a hairline (styles.css `section`). */
section {
  border-bottom: 1px solid var(--rule);
}

/* ---------- text helpers ---------- */
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.mono {
  font-family: var(--font-mono);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-0);
}

.mute {
  color: var(--mute);
}

.accent {
  color: var(--accent);
}

/* em accents inside serif headings: accent colour, italic (browser default) */
em {
  color: var(--accent);
}

/* ---------- layout ---------- */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- buttons (design-system components) ---------- */
/* button/primary = .cta-green, button/dark = .cta, button/ghost = .ghost */
.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--ink-0);
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.button__arr {
  display: inline-block;
  transition: transform 0.25s ease;
}

.button:hover .button__arr {
  transform: translateX(4px);
}

.button--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.button--primary:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}

.button--dark {
  background: var(--ink-0);
  border-color: var(--ink-0);
  color: var(--bg-0);
}

.button--dark:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

.button--ghost {
  background: transparent;
  color: var(--ink-0);
}

.button--ghost:hover {
  background: var(--ink-0);
  color: var(--bg-0);
}

/* ---------- sec-head (§-numbered section header) ---------- */
.sec-head {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr auto;
  align-items: end;
  gap: 32px;
  padding: 80px 0 48px;
  border-bottom: 1px solid var(--rule-soft);
}

.sec-head__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
}

.sec-head__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.sec-head__link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ink-0);
  padding-bottom: 4px;
  white-space: nowrap;
}

.sec-head__link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ≥44px hit area on touch widths without moving the underline: pad, then pull back. */
@media (max-width: 767px) {
  .sec-head__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -14px 0 -18px;
  }
}

@media (max-width: 900px) {
  .sec-head {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 56px 0 32px;
  }

  /* The portrait boards let the heading use the full 350px column (no 18ch cap);
     balanced wrapping keeps the last word from sitting alone. */
  .sec-head__heading {
    max-width: none;
    text-wrap: balance;
  }

  .sec-head__link {
    justify-self: start;
  }
}

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

/* Source: styles/header.css */
/* header — topbar + nav + mobile drawer (design-system component) */

/* =========================================================
   TOP BAR
   ========================================================= */
.topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--ink-0);
  color: var(--bg-0);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
}

.topbar__left {
  white-space: nowrap;
}

.topbar__marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin: 0 24px;
  position: relative;
}

/* The list is duplicated once in the markup, and every item carries its own
   trailing 48px, so the track is exactly two identical halves and -50% loops
   without a seam. */
.topbar__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: topbar-marquee 38s linear infinite;
}

.topbar__item {
  opacity: 0.65;
  padding-right: 48px;
}

.topbar__item::after {
  content: '✦';
  margin-left: 48px;
  opacity: 0.45;
  color: var(--accent);
}

@keyframes topbar-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (hover: hover) {
  .topbar__marquee:hover .topbar__track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar__track {
    animation: none;
  }
}

.topbar__phones {
  display: flex;
  gap: 24px;
  align-items: center;
  white-space: nowrap;
}

.topbar__phones a {
  white-space: nowrap;
}

@media (hover: hover) {
  .topbar__phones a:hover {
    color: var(--accent);
  }
}

@media (max-width: 980px) {
  .topbar__left {
    display: none;
  }
}

@media (max-width: 720px) {
  .topbar__marquee {
    display: none;
  }

  .topbar__inner {
    justify-content: flex-end;
  }

  .topbar__phones {
    margin-left: auto;
  }
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky;
  /* Below core's editor bar when signed in (set by HeaderClient). */
  top: var(--aakb-bar-h, 0px);
  z-index: 50;
  background: var(--bg-0);
  border-bottom: 1px solid var(--rule);
}

.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
  min-height: 88px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* ---------- brand lockup (shared by nav + drawer head) ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brand__logo {
  width: auto;
  height: 54px;
  flex-shrink: 0;
}

.brand__name {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}

.brand__main {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.brand__main em {
  font-style: italic;
  color: var(--accent);
}

.brand__tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  margin-top: 6px;
  letter-spacing: 0;
}

/* ---------- primary list ---------- */
.nav__primary {
  display: flex;
  gap: 2px;
  list-style: none;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
}

.nav__link,
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 13px;
  letter-spacing: 0.02em;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}

.nav__link::after,
.nav__toggle::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 1px;
  background: var(--ink-0);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}

@media (hover: hover) {
  .nav__link:hover::after,
  .nav__toggle:hover::after,
  .nav__item:hover > .nav__toggle::after {
    transform: scaleX(1);
  }
}

.nav__link:focus-visible::after,
.nav__toggle:focus-visible::after,
.nav__item--open > .nav__toggle::after,
.nav__item--active > .nav__link::after,
.nav__item--active > .nav__toggle::after {
  transform: scaleX(1);
}

.nav__item--active > .nav__link,
.nav__item--active > .nav__toggle {
  color: var(--accent);
}

.nav__item--active > .nav__link::after,
.nav__item--active > .nav__toggle::after {
  background: var(--accent);
}

.nav__caret {
  display: inline-block;
  font-size: 9px;
  transform: translateY(1px);
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .nav__item:hover > .nav__toggle .nav__caret {
    transform: rotate(180deg);
  }
}

.nav__item--open > .nav__toggle .nav__caret {
  transform: rotate(180deg);
}

/* ---------- dropdown ---------- */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: -8px;
  min-width: 280px;
  background: var(--bg-0);
  border: 1px solid var(--rule);
  border-top: 0;
  padding: 8px;
  display: none;
  z-index: 60;
}

@media (hover: hover) {
  .nav__item:hover > .nav__dropdown {
    display: block;
  }
}

.nav__item--open > .nav__dropdown {
  display: block;
}

.nav__dropdown a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--rule-soft);
}

.nav__dropdown a:last-child {
  border-bottom: 0;
}

@media (hover: hover) {
  .nav__dropdown a:hover {
    background: var(--bg-2);
    color: var(--accent);
  }

  .nav__dropdown a:hover .nav__num {
    color: var(--accent);
  }
}

.nav__dropdown a:focus-visible {
  background: var(--bg-2);
  color: var(--accent);
}

.nav__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--mute);
  flex-shrink: 0;
}

/* ---------- end cluster ---------- */
.nav__end {
  display: flex;
  align-items: center;
}

.nav__trigger {
  display: none;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav__primary {
    display: none;
  }

  .nav__inner {
    grid-template-columns: 1fr auto;
    min-height: 78px;
    gap: 16px;
  }

  .nav__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    min-height: 44px;
    border: 1px solid var(--ink-0);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .nav__bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .nav__bars i {
    display: block;
    width: 14px;
    height: 1.5px;
    background: var(--ink-0);
  }

  .nav__cta {
    display: none;
  }
}

@media (max-width: 720px) {
  .brand__main {
    font-size: 18px;
  }

  .brand__tag {
    font-size: 11px;
  }

  .brand__logo {
    height: 42px;
  }

  .nav__inner {
    min-height: 64px;
  }
}

@media (max-width: 480px) {
  .brand__name {
    display: none;
  }

  .brand__logo {
    height: 40px;
  }
}

/* =========================================================
   MOBILE DRAWER
   ========================================================= */
body.has-drawer {
  overflow: hidden;
}

.drawer {
  position: fixed;
  inset: 0;
  background: var(--bg-0);
  z-index: 100;
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform 0.4s var(--ease-out),
    visibility 0s linear 0.4s;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.drawer--open {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 0.4s var(--ease-out),
    visibility 0s linear 0s;
}

.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px var(--wrap-pad);
  border-bottom: 1px solid var(--rule);
  min-height: 88px;
  flex-shrink: 0;
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--ink-0);
  white-space: nowrap;
  flex-shrink: 0;
}

.drawer__list {
  list-style: none;
  margin: 0;
  padding: 32px var(--wrap-pad);
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.drawer__list li {
  border-bottom: 1px solid var(--rule-soft);
}

.drawer__list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-family: var(--font-serif);
  font-size: 30px;
  letter-spacing: -0.01em;
}

.drawer__item--indent a {
  padding-left: 24px;
  font-size: 22px;
  color: var(--ink-1);
}

.drawer__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mute);
  text-transform: uppercase;
  flex-shrink: 0;
}

@media (hover: hover) {
  .drawer__list li a:hover {
    color: var(--accent);
  }
}

.drawer__foot {
  padding: 32px var(--wrap-pad);
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.drawer__foot a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.drawer__foot .drawer__phone {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--accent);
}

@media (hover: hover) {
  .drawer__foot a:hover {
    color: var(--accent);
  }

  .drawer__foot .drawer__phone:hover {
    color: var(--accent-2);
  }
}

/* =========================================================
   TOUCH TARGETS (<768px)
   Every header control gets a ≥44px tall hit box while the rendered
   type size and vertical rhythm stay exactly as designed: the box is
   grown with `min-height` and the growth is cancelled again with
   negative block margins, so the outer (layout) box is unchanged and
   nothing around it moves. The hit box simply bleeds into the
   surrounding whitespace.
   ========================================================= */
@media (max-width: 767px) {
  /* The bar keeps its 34px height; the phone hit boxes overflow it by
     5.25px top and bottom. Raise the bar above the sticky nav so the
     lower bleed is actually tappable (they never overlap visually —
     the nav only sticks once the bar has scrolled away). */
  .topbar {
    position: relative;
    z-index: 51;
  }

  .topbar__phones a {
    display: inline-flex;
    align-items: flex-start;
    min-height: 44px;
    /* natural line box 16.5px (11px × 1.5). The box is anchored so its top sits
       at y=0 of the 34px bar (text 8.75px down) and the rest bleeds below, keeping
       the full 44px inside the document instead of 5px above it. */
    padding-top: 8.75px;
    margin-block: -8.75px -18.75px;
  }

  /* Brand lockup: 40px logo at ≤480px, 42px at ≤720px. The nav row is
     sized by the 44px MENU button, so this never grows the header. */
  .brand {
    min-height: 44px;
  }

  /* Drawer foot. `.drawer__foot` is a flex column, so these margins do
     not collapse — each item's outer height is preserved exactly. */
  .drawer__foot a {
    display: flex;
    align-items: center;
    min-height: 44px;
    /* natural line box 18px (12px × 1.5) → (44 − 18) / 2 = 13 */
    margin-block: -13px;
  }

  .drawer__foot .drawer__phone {
    /* natural line box 35.2px (32px × 1.1) → (44 − 35.2) / 2 = 4.4 */
    margin-block: -4.4px;
  }
}

/* Source: styles/footer.css */
/* footer — ctaBanner + wordmark footer (design-system component) */

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner {
  background: var(--accent);
  color: var(--white);
  border-bottom: 1px solid var(--rule);
}

.cta-banner__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 64px var(--wrap-pad);
}

.cta-banner__heading {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

/* On the green band the accent <em> stays white — only the italic is kept. */
.cta-banner__heading em {
  font-style: italic;
  color: inherit;
}

.cta-banner__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-banner__action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-0);
  color: var(--ink-0);
  padding: 16px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--bg-0);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.cta-banner__action--alt {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

.cta-banner__arr {
  display: inline-block;
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .cta-banner__action:hover {
    background: var(--ink-0);
    color: var(--white);
    border-color: var(--ink-0);
  }

  .cta-banner__action:hover .cta-banner__arr {
    transform: translateX(4px);
  }
}

@media (max-width: 900px) {
  .cta-banner__inner {
    grid-template-columns: 1fr;
    padding: 48px var(--wrap-pad);
  }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  /* bone at 18% / 55% — the source's rgba(239,235,226,.18|.55) hairline + label ink */
  --footer-rule: color-mix(in srgb, var(--bg-0) 18%, transparent);
  --footer-dim: color-mix(in srgb, var(--bg-0) 55%, transparent);

  background: var(--ink-0);
  color: var(--bg-0);
  padding: 80px 0 32px;
}

.site-footer__wordmark {
  font-family: var(--font-serif);
  font-size: clamp(64px, 14vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-bottom: 64px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--footer-rule);
  /* last-resort guard: at 390px the 64px floor already fits "Bathrooms." (~273px
     of the 350px content box), so this never fires above ~330px. */
  overflow-wrap: break-word;
}

.site-footer__wordmark em {
  font-style: italic;
  color: var(--accent);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

.site-footer__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--footer-dim);
  margin-bottom: 16px;
}

.site-footer p,
.site-footer a {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bg-0);
}

.site-footer__col p {
  margin-bottom: 6px;
}

/* The phone stack is its own flex column so the 6px rhythm comes from a
   gap rather than collapsing margins — that keeps the mobile hit-box
   margins below from leaking into the surrounding flow. */
.site-footer__phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.site-footer .site-footer__big {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  display: block;
}

.site-footer .site-footer__big--accent {
  color: var(--accent);
}

@media (hover: hover) {
  .site-footer .site-footer__big:hover {
    color: var(--accent);
  }

  .site-footer .site-footer__big--accent:hover {
    color: var(--accent-2);
  }
}

.site-footer__hours + .site-footer__hours {
  margin-top: 12px;
}

.site-footer__hours--muted {
  opacity: 0.6;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__links a {
  opacity: 0.85;
}

@media (hover: hover) {
  .site-footer__links a:hover {
    opacity: 1;
    color: var(--accent);
  }
}

.site-footer__legal {
  border-top: 1px solid var(--footer-rule);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--footer-dim);
}

@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* =========================================================
   TOUCH TARGETS (<768px)
   Same technique as header.css: grow the hit box with `min-height`,
   then cancel the growth with negative block margins so the outer
   (layout) box — and therefore the whole footer rhythm — is unchanged.
   Both link groups sit in flex columns, so the margins are contained
   and do not collapse into their neighbours.
   ========================================================= */
@media (max-width: 767px) {
  .site-footer .site-footer__phones a {
    display: flex;
    align-items: center;
    min-height: 44px;
    /* natural line box 30.8px (28px × 1.1) → (44 − 30.8) / 2 = 6.6 */
    margin-block: -6.6px;
  }

  .site-footer__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    /* the li's line box is 24px — the 16px/1.5 strut, not the 14px/1.6
       anchor text — so (44 − 24) / 2 = 10 */
    margin-block: -10px;
  }
}

/* Source: styles/hero.css */
/* hero — Penpot 01-hero (BEM: .hero, .hero__part). Landscape truth ≥1024px, portrait <768px. */

.hero {
  position: relative;
  overflow: hidden;
}

.hero .wrap {
  padding-top: 40px;
  padding-bottom: 48px;
}

/* ---------- top meta row ---------- */
.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.hero__meta {
  display: flex;
  gap: 32px;
}

.hero__meta-item b {
  color: var(--ink-0);
  font-weight: 500;
}

/* ---------- heading ---------- */
.hero .hero__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(54px, 9vw, 144px);
  line-height: 0.94;
  letter-spacing: -0.025em;
  margin-top: 56px;
  max-width: 7.1em; /* "Bespoke renovations" / "in Wellington." at every size (board line break) */
}

.hero__heading em {
  color: var(--accent);
  font-style: italic;
}

/* ---------- sub row ---------- */
.hero__sub {
  display: grid;
  grid-template-columns: 1.2fr auto;
  gap: 48px;
  align-items: end;
  margin-top: 40px;
}

.hero__lede {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-1);
  max-width: 42ch;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---------- full-bleed image band ---------- */
.hero__image {
  position: relative;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: #222;
}

.hero__image .block-image {
  filter: contrast(1.02);
}

.hero__tag {
  position: absolute;
  left: 32px;
  bottom: 24px;
  z-index: 2;
  color: var(--bg-0);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  gap: 24px;
  align-items: center;
}

.hero__dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.hero__play {
  position: absolute;
  right: 32px;
  bottom: 24px;
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  border: 1px solid var(--accent);
  transition:
    transform 0.3s ease,
    background 0.25s ease;
}

@media (hover: hover) {
  .hero__play:hover {
    transform: scale(1.05);
    background: var(--accent-2);
  }
}

@media (max-width: 1100px) {
  .hero__sub {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }
}

@media (max-width: 900px) {
  .hero__meta {
    gap: 20px;
    flex-wrap: wrap;
  }

  .hero__top {
    row-gap: 10px;
  }

  .hero .hero__heading {
    font-size: 48px;
    margin-top: 32px;
    max-width: 18ch;
  }

  .hero__image {
    aspect-ratio: 4 / 3;
  }

  .hero__tag {
    left: 20px;
    bottom: 16px;
    font-size: 10px;
    gap: 14px;
  }

  .hero__play {
    right: 20px;
    bottom: 16px;
    width: 58px;
    height: 58px;
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .hero__top {
    font-size: 10px;
  }

  .hero__meta-item:nth-child(n + 3) {
    display: none;
  }
}

/* Source: styles/ticker.css */
/* ticker — Penpot 02-ticker (BEM: .ticker, .ticker__part). Decorative serif marquee band. */

.ticker {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  background: var(--bg-1);
}

.ticker__track {
  display: flex;
  width: max-content;
  gap: 48px;
  white-space: nowrap;
  padding: 18px 0;
  animation: ticker-marquee 60s linear infinite;
  font-family: var(--font-serif);
  font-size: 32px;
  letter-spacing: -0.01em;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 48px;
}

.ticker__item::after {
  content: '✦';
  color: var(--accent);
  font-size: 22px;
}

@keyframes ticker-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Portrait: the band stays a single line of type. */
@media (max-width: 720px) {
  .ticker__track {
    font-size: 22px;
    padding: 14px 0;
  }

  .ticker__item::after {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}

/* Source: styles/intro.css */
/* intro — Penpot 03-intro (BEM: .intro, .intro__part). Lead + before/after slider + stats. */

.intro {
  padding: 64px 0 96px;
}

.intro__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: start;
  padding-top: 48px;
}

.intro__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.intro__lead {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.008em;
  max-width: 32ch;
}

.intro__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 52ch;
}

/* ---------- before / after comparison ---------- */
.intro__ba-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.intro__ba {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #1a1a1a;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  outline: none;
  --pos: 50%;
}

.intro__ba-layer {
  pointer-events: none;
  filter: contrast(1.02);
}

.intro__ba-layer--before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.intro__ba-lab {
  position: absolute;
  top: 16px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg-0);
  padding: 5px 10px;
  background: rgba(20, 20, 20, 0.62);
  backdrop-filter: blur(2px);
}

.intro__ba-lab--before {
  left: 16px;
}

.intro__ba-lab--after {
  right: 16px;
  color: var(--white);
  background: rgba(55, 131, 60, 0.82);
}

.intro__ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--bg-0);
  transform: translateX(-1px);
  z-index: 4;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.intro__ba-grip {
  position: absolute;
  top: 50%;
  left: var(--pos);
  z-index: 5;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  border: 1px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.25s var(--ease-out),
    background 0.2s ease;
}

.intro__ba-grip svg {
  width: 22px;
  height: 22px;
  display: block;
}

.intro__ba:focus-visible .intro__ba-grip {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--accent-2);
}

.intro__ba:focus-visible {
  box-shadow: 0 0 0 2px var(--accent);
}

@media (hover: hover) {
  .intro__ba:hover .intro__ba-grip {
    transform: translate(-50%, -50%) scale(1.06);
    background: var(--accent-2);
  }
}

.intro__ba-cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.intro__ba-cap b {
  color: var(--ink-0);
  font-weight: 500;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.intro__ba-drag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.intro__ba-drag-ico {
  display: inline-block;
  color: var(--accent);
}

/* ---------- stats ---------- */
.intro__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 64px;
  border-top: 1px solid var(--rule);
}

.intro__stat {
  /* Inset every cell from the rule it sits against (the landscape board indents
     column 1 too) and give the numbers room to breathe. */
  padding: 40px 32px 36px;
  border-right: 1px solid var(--rule-soft);
}

.intro__stat:last-child {
  border-right: 0;
}

.intro__stat-value {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.intro__stat-suffix {
  font-size: 0.5em;
  vertical-align: top;
}

.intro__stat-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 14px;
  color: var(--mute);
}

@media (max-width: 900px) {
  .intro__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .intro__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Portrait board insets every cell from the rule it sits against. */
  .intro__stat {
    padding: 28px 12px 28px 24px;
  }

  .intro__stat:nth-child(even) {
    border-right: 0;
  }

  /* Board draws a rule-soft hairline between the wrapped rows. */
  .intro__stat:nth-child(n + 3) {
    border-top: 1px solid var(--rule-soft);
  }

  /* A lone trailing cell spans both columns so its rule runs full width. */
  .intro__stat:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }

  .intro__ba-grip {
    width: 46px;
    height: 46px;
  }
}

/* Source: styles/services.css */
/* services — Penpot 04-services (BEM: .services, .services__part). 4-up service cards. */

.services__body {
  padding-bottom: 96px;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
}

.services__card {
  padding: 32px 28px 28px;
  border-right: 1px solid var(--rule-soft);
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  background: var(--bg-0);
  transition: background 0.35s ease;
}

.services__card:last-child {
  border-right: 0;
}

.services__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
}

.services__img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #222;
  border: 1px solid var(--rule);
}

.services__img .block-image {
  transition: transform 0.8s var(--ease-out);
}

.services__title {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-top: auto;
}

.services__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-1);
}

.services__more {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
}

.services__more::after {
  content: '→';
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  .services__card:hover {
    background: var(--bg-2);
  }

  .services__card:hover .services__img .block-image {
    transform: scale(1.04);
  }

  .services__card:hover .services__more {
    color: var(--accent);
  }

  .services__card:hover .services__more::after {
    transform: translateX(4px);
  }
}

@media (max-width: 1100px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services__card {
    border-bottom: 1px solid var(--rule-soft);
  }

  .services__card:nth-child(2) {
    border-right: 0;
  }

  .services__card:nth-child(3),
  .services__card:nth-child(4) {
    border-bottom: 0;
  }
}

@media (max-width: 600px) {
  .services__grid {
    grid-template-columns: 1fr;
  }

  .services__card {
    border-right: 0;
    border-bottom: 1px solid var(--rule-soft);
  }

  .services__card:last-child {
    border-bottom: 0;
  }
}

/* Source: styles/workGrid.css */
/* workGrid — Penpot 05-workGrid (BEM: .workGrid, .workGrid__part). 12-col mosaic. */

.workGrid {
  padding: 0 0 96px;
  background: var(--bg-2);
}

.workGrid .sec-head {
  border-bottom: 1px solid var(--rule-soft);
}

.workGrid__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 14px;
  margin-top: 32px;
}

.workGrid__item {
  display: block;
  min-width: 0;
}

.workGrid__item--1 {
  grid-column: span 7;
  grid-row: span 4;
}

.workGrid__item--2 {
  grid-column: span 5;
  grid-row: span 4;
}

.workGrid__item--3,
.workGrid__item--4,
.workGrid__item--5 {
  grid-column: span 4;
  grid-row: span 3;
}

.workGrid__figure {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid var(--rule);
}

.workGrid__figure .block-image {
  transition:
    transform 1s var(--ease-out),
    filter 0.4s ease;
}

.workGrid__caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  color: var(--bg-0);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 1;
  transform: none;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.6);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.workGrid__caption b {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  margin-bottom: 4px;
}

@media (hover: hover) {
  .workGrid__figure:hover .block-image {
    transform: scale(1.05);
    filter: brightness(0.7);
  }

  .workGrid__figure:hover .workGrid__caption {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Touch: nothing hovers, so the caption is always legible. */
@media (hover: none) {
  .workGrid__caption {
    opacity: 1;
    transform: none;
    text-shadow: 0 1px 20px rgba(0, 0, 0, 0.6);
  }
}

.workGrid__item:focus-visible .workGrid__caption {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .workGrid__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 90px;
  }

  .workGrid__item--1 {
    grid-column: span 6;
    grid-row: span 4;
  }

  .workGrid__item--2,
  .workGrid__item--3,
  .workGrid__item--4,
  .workGrid__item--5 {
    grid-column: span 3;
    grid-row: span 3;
  }
}

/* Source: styles/testimonial.css */
/* testimonial — Penpot 06-testimonial (BEM: .testimonial, .testimonial__part). Dark quote band. */

.testimonial {
  background: var(--ink-0);
  color: var(--bg-0);
  padding: 120px 0;
  border-bottom: 1px solid var(--rule);
}

.testimonial .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.testimonial__eyebrows {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
}

.testimonial__eyebrow {
  color: var(--bg-0);
  opacity: 0.6;
}

.testimonial__quote {
  font-family: var(--font-serif);
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  max-width: 19ch;
}

.testimonial__open {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(80px, 12vw, 180px);
  line-height: 0.6;
  color: var(--accent);
  display: block;
  margin-bottom: -20px;
}

.testimonial__by {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.testimonial__dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.testimonial__sep {
  opacity: 0.5;
}

.testimonial__more {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(239, 235, 226, 0.4);
  padding-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  justify-self: start;
}

.testimonial__more:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 900px) {
  .testimonial {
    padding: 80px 0;
  }
}

/* Source: styles/studioTeaser.css */
/* studioTeaser — Penpot 07-studioTeaser (BEM: .studioTeaser, .studioTeaser__part). */

.studioTeaser {
  padding: 0 0 120px;
}

.studioTeaser__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
  padding-top: 32px;
}

.studioTeaser__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #222;
  border: 1px solid var(--rule);
}

.studioTeaser__img .block-image {
  filter: grayscale(0.4) contrast(1.05);
}

.studioTeaser__heading {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-bottom: 32px;
  max-width: 26ch;
}

.studioTeaser__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-1);
  margin-bottom: 18px;
  max-width: 72ch;
}

.studioTeaser__badges {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}

.studioTeaser__badge {
  /* Inset every cell from the rule it sits against, like .intro__stat. */
  padding: 28px 24px 24px;
  border-right: 1px solid var(--rule-soft);
}

.studioTeaser__badge:last-child {
  border-right: 0;
}

.studioTeaser__badge-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.studioTeaser__badge-value {
  font-family: var(--font-serif);
  font-size: 24px;
  margin-top: 6px;
  letter-spacing: -0.01em;
}

.studioTeaser__ctas {
  margin-top: 32px;
}

@media (max-width: 900px) {
  .studioTeaser__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .studioTeaser__badges {
    grid-template-columns: 1fr 1fr;
  }

  /* Portrait board insets every cell from the rule it sits against. */
  .studioTeaser__badge {
    padding: 20px 16px;
  }

  .studioTeaser__badge:nth-child(even) {
    border-right: 0;
  }

  /* Board draws a rule-soft hairline above the wrapped row. */
  .studioTeaser__badge:nth-child(n + 3) {
    border-top: 1px solid var(--rule-soft);
  }

  /* A lone trailing badge spans both columns so its rule runs full width. */
  .studioTeaser__badge:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

/* Source: styles/pageHero.css */
/* =========================================================
   pageHero — Penpot NN-pageHero (about, services, kitchens, bathrooms,
   home-renovations, project-management, gallery, testimonials, contact).
   Source: clients/aakb/styles.css `.page-hero`.
   ========================================================= */

/* <header>, so the global `section { border-bottom }` does not reach it. */
.pageHero {
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--rule);
}

/* ---------- crumbs ---------- */
.pageHero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

.pageHero__sep {
  opacity: 0.5;
}

.pageHero__crumb {
  transition: color 0.2s ease;
}

@media (hover: hover) {
  a.pageHero__crumb:hover {
    color: var(--ink-0);
  }
}

/* ---------- heading ---------- */
.pageHero__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 148px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  /* Safety net only: long single words (e.g. "renovations.") still fit 350px at
     the 56px floor, but nothing may spill past the viewport at 320px. */
  overflow-wrap: break-word;
}

.pageHero__heading em {
  color: var(--accent);
  font-style: italic;
}

/* ---------- lede ---------- */
.pageHero__lede {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 48px;
  align-items: end;
}

.pageHero__copy {
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-1);
  max-width: 40ch;
}

.pageHero__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  align-self: end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.pageHero__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-soft);
}

.pageHero__label {
  margin: 0;
}

.pageHero__value {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
  color: var(--ink-0);
}

.pageHero__value a {
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .pageHero__value a:hover {
    color: var(--accent);
  }
}

/* services-01-pageHero-{l,p}: the four section-index values are green at rest,
   which is what marks them as links. tel:/mailto: values stay ink — the contact
   board renders 0800 288 274 and 04 527 8373 in dark ink. */
.pageHero__value--nav a {
  color: var(--accent);
}

@media (hover: hover) {
  .pageHero__value--nav a:hover {
    color: var(--accent-2);
  }
}

@media (max-width: 900px) {
  .pageHero {
    padding: 56px 0 40px;
  }

  .pageHero__lede {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 32px;
  }

  /* tel:/mailto: rows need a real tap target on touch; text rows keep the design height */
  .pageHero__row--link {
    min-height: 44px;
    align-items: center;
  }

  .pageHero__row--link .pageHero__value a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  /* Crumb links are an 11px mono line box (~16.5px tall). Grow the hit area to
     44px with an overlay instead of padding so the row keeps the board's
     rhythm: crumbs top at 56px, 32px down to the h1 (both measured on the
     390px boards). z-index keeps the overlay above the separators and above the
     current-page span when the crumb trail wraps to a second line. */
  a.pageHero__crumb {
    position: relative;
    z-index: 1;
  }

  a.pageHero__crumb::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    left: -6px;
    min-width: 44px;
    height: 44px;
    transform: translateY(-50%);
  }

  /* testimonials-01-pageHero-p leaves ~116px between a one-line h1 and the lede,
     against ~33px on the three- and four-line boards (services, about); the
     boards reserve roughly two lines of heading either way. Reserving 2 × 0.95em
     restores the board's hero height on the short headings and is a no-op on the
     headings that already wrap. */
  .pageHero__heading {
    min-height: 1.9em;
  }
}

/* Source: styles/featureImage.css */
/* =========================================================
   featureImage — Penpot NN-featureImage (service pages + about).
   Source: kitchens.html `.feature-img`.
   ========================================================= */

/* Board geometry (measured off the exports):
   - kitchens/bathrooms/home-renovations/project-management: 32px above a 16/8
     frame, at 1440 (1336×668) and at 390 (350×175). Those boards are cropped
     flush to the frame, so they show no ground below it.
   - about-02-featureImage-{l,p}: 48px above the frame and 96px of ground below
     it before the section rule, at both widths.
   One shared block: keep the service boards' 32px top and the 16/8 frame at
   every width, and take the 96px of bottom ground from the only board that
   captures the section rule, so the photo no longer butts into it. */
.featureImage {
  padding: 32px 0 0; /* service boards + kitchens.html: photo sits on the section rule */
}

/* 16/8 at every width — the portrait boards letterbox to 350×175 exactly as the
   landscape boards do. No mobile aspect-ratio override. */
.featureImage__frame {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #222;
}

.featureImage__frame .block-image {
  filter: contrast(1.02);
}

/* about.html frames the same block differently (about-02-featureImage boards):
   16/7, 48px above, 96px below. Page-scoped so one block serves both compositions. */
[data-page='about'] .featureImage {
  padding: 48px 0 96px;
}

[data-page='about'] .featureImage__frame {
  aspect-ratio: 16 / 7;
}

/* Source: styles/overview.css */
/* =========================================================
   overview — Penpot NN-overview (all four service pages).
   Source: kitchens.html `.overview` / `.ov-grid`.
   ========================================================= */

.overview {
  padding: 80px 0 96px;
}

.overview__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
  padding-top: 48px;
}

.overview__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 14ch;
}

.overview__heading em {
  color: var(--accent);
}

.overview__body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-1);
  max-width: 60ch;
  margin-bottom: 18px;
}

.overview__body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .overview__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* The 14ch measure is a two-column device. Once the grid collapses the board
     (kitchens/bathrooms/home-renovations/project-management -03-overview-p)
     runs the serif lead across the full 350px column in two lines. */
  .overview__heading {
    max-width: none;
  }
}

/* Source: styles/scopeGrid.css */
/* =========================================================
   scopeGrid — Penpot NN-scopeGrid (all four service pages).
   Source: kitchens.html `.scope` / `.scope-list`.
   ========================================================= */

.scopeGrid {
  padding: 0 0 96px;
  background: var(--bg-2);
}

.scopeGrid__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 32px;
  border-top: 1px solid var(--rule);
}

.scopeGrid__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 32px 32px 32px 0;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

/* even column: padding flips to the left, gutter rule belongs to the odd cell */
.scopeGrid__item:nth-child(even) {
  padding-right: 0;
  padding-left: 32px;
  border-right: 0;
}

/* last row (two cells, whatever the count) closes on the section rule */
.scopeGrid__item:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.scopeGrid__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mute);
}

.scopeGrid__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.scopeGrid__title em {
  color: var(--accent);
}

.scopeGrid__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-1);
  max-width: 46ch;
}

@media (max-width: 720px) {
  .scopeGrid__list {
    grid-template-columns: 1fr;
  }

  .scopeGrid__item {
    padding: 24px 0;
    border-right: 0;
  }

  .scopeGrid__item:nth-child(even) {
    padding: 24px 0;
  }
}

/* Source: styles/workSlice.css */
/* =========================================================
   workSlice — Penpot NN-workSlice (all four service pages).
   Source: kitchens.html `.work-slice` / `.ws-grid`.
   ========================================================= */

.workSlice {
  padding: 0 0 120px;
}

.workSlice__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 14px;
  margin-top: 32px;
}

.workSlice__item {
  display: block;
  min-width: 0;
  grid-column: span 4;
  grid-row: span 3;
}

.workSlice__item:nth-child(1) {
  grid-column: span 8;
  grid-row: span 4;
}

.workSlice__item:nth-child(2) {
  grid-column: span 4;
  grid-row: span 4;
}

.workSlice__figure {
  position: relative;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid var(--rule);
}

.workSlice__figure .block-image {
  transition:
    transform 1s var(--ease-out),
    filter 0.4s ease;
}

.workSlice__caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  color: var(--bg-0);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 1;
  transform: none;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.6);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.workSlice__title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
}

@media (hover: hover) {
  .workSlice__item:hover .block-image {
    transform: scale(1.05);
    filter: brightness(0.7);
  }

  .workSlice__item:hover .workSlice__caption {
    opacity: 1;
    transform: translateY(0);
  }
}

.workSlice__item:focus-visible .workSlice__caption {
  opacity: 1;
  transform: translateY(0);
}

/* Touch: there is no hover to reveal the caption, so it stays on — with the
   scrim the hover brightness(.7) would otherwise have provided. */
@media (hover: none) {
  .workSlice__caption {
    opacity: 1;
    transform: translateY(0);
  }

  .workSlice__figure::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 55%);
  }
}

@media (max-width: 900px) {
  .workSlice__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 90px;
  }

  .workSlice__item,
  .workSlice__item:nth-child(2) {
    grid-column: span 3;
    grid-row: span 3;
  }

  .workSlice__item:nth-child(1) {
    grid-column: span 6;
    grid-row: span 4;
  }
}

/* Source: styles/pricingTiers.css */
/* =========================================================
   pricingTiers — Penpot NN-pricingTiers (all four service pages).
   Source: kitchens.html `.pricing` / `.pricing-grid`.
   ========================================================= */

.pricingTiers {
  padding: 0 0 120px;
}

.pricingTiers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 32px;
  border-top: 1px solid var(--rule);
}

.pricingTiers__tier {
  padding: 40px 32px 40px 0;
  border-right: 1px solid var(--rule-soft);
}

.pricingTiers__tier:nth-child(2) {
  padding-right: 32px;
  padding-left: 32px;
}

.pricingTiers__tier:nth-child(3) {
  padding-right: 0;
  padding-left: 32px;
  border-right: 0;
}

.pricingTiers__num {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mute);
}

.pricingTiers__title {
  margin-bottom: 8px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.pricingTiers__title em {
  color: var(--accent);
}

.pricingTiers__range {
  margin-bottom: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-0);
}

.pricingTiers__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-1);
  max-width: 34ch;
}

@media (max-width: 900px) {
  .pricingTiers__grid {
    grid-template-columns: 1fr;
  }

  .pricingTiers__tier,
  .pricingTiers__tier:nth-child(2),
  .pricingTiers__tier:nth-child(3) {
    padding: 32px 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule-soft);
  }

  .pricingTiers__tier:last-child {
    border-bottom: 0;
  }
}

/* Source: styles/pmGrid.css */
/* =========================================================
   pmGrid — Penpot project-management/04-pmGrid.
   Source: project-management.html `.pm-grid` (section carries the paper ground).
   ========================================================= */

.pmGrid {
  padding: 0 0 96px;
  background: var(--bg-2);
}

.pmGrid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--rule);
}

.pmGrid__item {
  padding: 32px 32px 32px 0;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.pmGrid__item:nth-child(3n + 2) {
  padding-right: 32px;
  padding-left: 32px;
}

.pmGrid__item:nth-child(3n) {
  padding-right: 0;
  padding-left: 32px;
  border-right: 0;
}

.pmGrid__num {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mute);
}

.pmGrid__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.005em;
}

.pmGrid__text {
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-1);
}

@media (max-width: 900px) {
  .pmGrid__grid {
    grid-template-columns: 1fr;
  }

  .pmGrid__item,
  .pmGrid__item:nth-child(3n + 2),
  .pmGrid__item:nth-child(3n) {
    padding: 24px 0;
    border-right: 0;
  }
}

/* Source: styles/storyGrid.css */
/* storyGrid — Penpot about/03-storyGrid (source: about.html `.story`, `.story-grid`).
   Landscape truth ≥1024px, portrait <768px; 1-col ≤900px. */

.storyGrid {
  padding: 80px 0 96px;
}

.storyGrid__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
  padding-top: 48px;
}

.storyGrid__lead {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 14ch;
}

.storyGrid__para {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-1);
  margin-bottom: 18px;
  max-width: 60ch;
}

/* Drop cap is scoped to the first paragraph only. */
.storyGrid__para--drop::first-letter {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 5em;
  line-height: 0.8;
  color: var(--accent);
  float: left;
  padding: 8px 12px 0 0;
}

@media (max-width: 900px) {
  .storyGrid__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Stacked: the lead uses the full column, as the portrait board does.
     Balancing keeps the board's break ("…clients a" / "problem-free experience.")
     instead of splitting the compound word at its hyphen. */
  .storyGrid__lead {
    max-width: none;
    text-wrap: balance;
  }
}

/* Source: styles/pillarGrid.css */
/* pillarGrid — Penpot about/04-pillarGrid (source: about.html `.pillars`, `.pillar-grid`).
   Landscape truth ≥1024px, portrait <768px; 1-col ≤900px. No hover state. */

.pillarGrid {
  padding: 0 0 120px;
}

.pillarGrid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule);
}

.pillarGrid__item {
  padding: 40px 32px 40px 0;
  border-right: 1px solid var(--rule-soft);
}

.pillarGrid__item:not(:first-child) {
  padding-left: 32px;
}

.pillarGrid__item:last-child {
  border-right: 0;
}

.pillarGrid__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mute);
  margin-bottom: 24px;
}

.pillarGrid__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

.pillarGrid__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-1);
  max-width: 34ch;
}

@media (max-width: 900px) {
  .pillarGrid__grid {
    grid-template-columns: 1fr;
  }

  .pillarGrid__item,
  .pillarGrid__item:not(:first-child) {
    border-right: 0;
    border-bottom: 1px solid var(--rule-soft);
    padding: 32px 0;
  }

  .pillarGrid__item:last-child {
    border-bottom: 0;
  }
}

/* Source: styles/partnersList.css */
/* partnersList — Penpot about/05-partnersList (source: about.html `.partners`, `.partners-list`).
   Landscape truth ≥1024px, portrait <768px; rows stack to one column ≤900px. */

.partnersList {
  padding: 0 0 96px;
}

.partnersList__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: start;
  padding-top: 48px;
}

.partnersList__aside {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-1);
  max-width: 38ch;
}

.partnersList__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.partnersList__row {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.partnersList__row:first-child {
  border-top: 1px solid var(--rule-soft);
}

.partnersList__name {
  font-family: var(--font-serif);
  font-size: 26px;
  letter-spacing: -0.005em;
}

.partnersList__desc {
  font-size: 14px;
  color: var(--ink-1);
  max-width: 48ch;
}

.partnersList__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

@media (max-width: 900px) {
  .partnersList__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .partnersList__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Source: styles/meetProfile.css */
/* meetProfile — Penpot about/06-meetProfile (source: about.html `.meet`, `.meet-grid`).
   Landscape truth ≥1024px, portrait <768px; stacked ≤900px. */

.meetProfile {
  padding: 0 0 120px;
}

.meetProfile__grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 64px;
  align-items: start;
  padding-top: 48px;
}

.meetProfile__img {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #222;
  border: 1px solid var(--rule);
}

.meetProfile__img img {
  filter: grayscale(0.55) contrast(1.05);
}

.meetProfile__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
}

.meetProfile__para {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-1);
  margin-bottom: 14px;
  max-width: 54ch;
}

.meetProfile__sig {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 42px;
  color: var(--ink-0);
  margin-top: 32px;
}

.meetProfile__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 4px;
}

.meetProfile__ctas {
  margin-top: 32px;
}

@media (max-width: 900px) {
  .meetProfile__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Source: styles/svcRows.css */
/* =========================================================
   svcRows — Penpot services/02-svcRows
   Alternating two-up rows: copy column + 5/4 image.
   `--flip` puts the copy on the right (order swap, border side swaps).
   Source: services.html `<style>` .svc-rows / .svc-row
   ========================================================= */

/* longhand: this element is also `.wrap`, whose horizontal padding must survive */
.svcRows__rows {
  padding-top: 32px;
  padding-bottom: 64px;
}

.svcRows__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-top: 1px solid var(--rule);
  /* clears the sticky site nav when an in-page anchor is followed */
  scroll-margin-top: 100px;
}

.svcRows__row:last-child {
  border-bottom: 1px solid var(--rule);
}

.svcRows__row--flip {
  grid-template-columns: 1fr 1.1fr;
}

/* ---------- copy ---------- */
.svcRows__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 56px 48px 56px 0;
  border-right: 1px solid var(--rule-soft);
}

.svcRows__row--flip .svcRows__copy {
  order: 2;
  padding: 56px 0 56px 48px;
  border-right: 0;
  border-left: 1px solid var(--rule-soft);
}

.svcRows__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--mute);
}

.svcRows__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 14ch;
}

.svcRows__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-1);
  max-width: 54ch;
}

/* ---------- bullets ---------- */
.svcRows__bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 8px;
  border-top: 1px solid var(--rule-soft);
  list-style: none;
}

.svcRows__bullet {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14px;
}

.svcRows__bullet::before {
  content: '+';
  color: var(--accent);
  font-weight: 600;
}

.svcRows__cta {
  margin-top: 12px;
}

/* ---------- image ---------- */
.svcRows__img {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #222;
  border: 1px solid var(--rule);
  align-self: center;
  margin: 32px 0;
}

@media (hover: hover) {
  .svcRows__img .block-image {
    transition: transform 1s var(--ease-out);
  }

  .svcRows__row:hover .svcRows__img .block-image {
    transform: scale(1.03);
  }
}

/* ---------- ≤900: stack copy then image, `flip` ignored ---------- */
@media (max-width: 900px) {
  .svcRows__row,
  .svcRows__row--flip {
    grid-template-columns: 1fr;
  }

  .svcRows__copy,
  .svcRows__row--flip .svcRows__copy {
    order: 0;
    padding: 32px 0 24px;
    border-right: 0;
    border-left: 0;
  }

  .svcRows__img {
    margin: 0 0 24px;
  }

  .svcRows__heading {
    font-size: 36px;
  }
}

/* Portrait board (390): bullets run one per row rather than cramping into two. */
@media (max-width: 560px) {
  .svcRows__bullets {
    grid-template-columns: 1fr;
  }
}

/* Source: styles/cabinetryFeature.css */
/* =========================================================
   cabinetryFeature — Penpot services/03-cabinetryFeature
   The one tinted section on the page (bg-2 / paper).
   4/5 image + copy, items as name / role rows on a baseline.
   Source: services.html `<style>` .cabinetry
   ========================================================= */

.cabinetryFeature {
  padding: 0 0 96px;
  background: var(--bg-2);
  scroll-margin-top: 100px;
}

.cabinetryFeature__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  padding-top: 32px;
}

.cabinetryFeature__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #222;
  border: 1px solid var(--rule);
}

.cabinetryFeature__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
}

.cabinetryFeature__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-1);
  margin-bottom: 14px;
  max-width: 54ch;
}

.cabinetryFeature__items {
  list-style: none;
  margin-top: 24px;
  border-top: 1px solid var(--rule);
}

.cabinetryFeature__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.cabinetryFeature__name {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: -0.005em;
}

.cabinetryFeature__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: right;
}

.cabinetryFeature__cta {
  margin-top: 32px;
}

@media (max-width: 900px) {
  .cabinetryFeature__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Portrait board (services-03-cabinetryFeature-p): each item is one 63px row —
   the serif name stays on a single line and the mono role wraps beside it,
   right-aligned. Measured from the export: rules 63px apart, longest name
   ("Living-room joinery") 151px wide, so the name column is sized to its
   content and the role takes whatever is left. */
@media (max-width: 720px) {
  .cabinetryFeature__item {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 16px;
  }

  .cabinetryFeature__name {
    white-space: nowrap;
  }

  .cabinetryFeature__role {
    line-height: 1.5;
  }
}

/* Source: styles/capsList.css */
/* =========================================================
   capsList — Penpot services/04-capsList
   1fr / 2fr grid; the list is CSS `columns: 2` (reading order
   flows down-then-across), not a 2-col grid.
   Source: styles.css .caps-grid / .caps-list (+ services.html .caps)
   ========================================================= */

.capsList {
  padding: 0 0 96px;
}

.capsList__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  align-items: start;
  padding-top: 32px;
}

.capsList__aside {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-1);
  max-width: 38ch;
}

.capsList__list {
  columns: 2;
  column-gap: 48px;
}

.capsList__row {
  break-inside: avoid;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.capsList__row:first-child {
  border-top: 1px solid var(--rule-soft);
}

.capsList__label {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: -0.005em;
}

.capsList__status {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: right;
}

@media (max-width: 900px) {
  .capsList__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .capsList__list {
    columns: 1;
  }
}

/* Source: styles/processRows.css */
/* =========================================================
   processRows — Penpot services/05-processRows
   110px / 1.3fr / 2fr rows, solid rule above the first,
   hairline under each, hover fills with bg-2.
   Source: styles.css .process-rows / .process-row (+ services.html .process)
   ========================================================= */

.processRows {
  padding: 0 0 120px;
}

.processRows__rows {
  border-top: 1px solid var(--rule);
}

.processRows__row {
  display: grid;
  grid-template-columns: 110px 1.3fr 2fr;
  gap: 48px;
  align-items: start;
  padding: 36px 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.25s ease;
}

@media (hover: hover) {
  .processRows__row:hover {
    background: var(--bg-2);
  }
}

.processRows__step {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  padding-top: 8px;
}

.processRows__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.01em;
}

.processRows__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-1);
  max-width: 60ch;
}

@media (max-width: 900px) {
  .processRows__row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 0;
  }

  .processRows__heading {
    font-size: 28px;
  }
}

/* Source: styles/galleryFilters.css */
/* galleryFilters — Penpot gallery/02-galleryFilters (BEM: .galleryFilters, .galleryFilters__part).
   Source: gallery.html `.filters`. The hairline under the bar is the global `section` border. */

.galleryFilters {
  padding: 24px 0 32px;
}

.galleryFilters__bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.galleryFilters__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  margin-right: 16px;
}

.galleryFilters__pills {
  display: contents;
}

/* design-system component `filter/pill` */
.galleryFilters__pill {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-0);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

/* The active pill keeps its accent fill on hover — a plain `:hover` rule would
   out-specify `--active` and leave white text on paper. */
@media (hover: hover) {
  .galleryFilters__pill:not(.galleryFilters__pill--active):hover {
    background: var(--bg-2);
  }
}

.galleryFilters__pill--active {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}

.galleryFilters__pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.galleryFilters__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Comfortable thumb targets on touch. */
@media (pointer: coarse) {
  .galleryFilters__pill {
    min-height: 44px;
  }
}

/* Portrait board: pills wrap to two rows, the count drops onto its own row. */
@media (max-width: 560px) {
  .galleryFilters__count {
    margin-left: 0;
    width: 100%;
    margin-top: 10px;
  }
}

/* Source: styles/galleryGrid.css */
/* galleryGrid — Penpot gallery/03-galleryGrid (BEM: .galleryGrid, .galleryGrid__part).
   Source: gallery.html `.grid`, `.s-*` spans and `.lightbox`. 12-col sparse mosaic. */

.galleryGrid {
  padding: 32px 0 120px;
}

.galleryGrid__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 14px;
  grid-auto-flow: row;
}

.galleryGrid__tile {
  position: relative;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid var(--rule);
  transition: opacity 0.25s ease;
}

.galleryGrid__tile--hidden {
  display: none;
}

.galleryGrid__tile .block-image {
  transition:
    transform 1s var(--ease-out),
    filter 0.4s ease;
}

.galleryGrid__caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  color: var(--bg-0);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 1;
  transform: none;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.6);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  pointer-events: none;
}

.galleryGrid__title {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  margin-bottom: 4px;
}

.galleryGrid__tag {
  display: block;
  margin-top: 8px;
  opacity: 0.8;
  font-size: 10px;
}

/* Full-tile hit area; sits above the caption, which is pointer-events: none. */
.galleryGrid__open {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.galleryGrid__open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.galleryGrid__tile:focus-within .galleryGrid__caption {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) {
  .galleryGrid__tile:hover .block-image {
    transform: scale(1.04);
    filter: brightness(0.7);
  }

  .galleryGrid__tile:hover .galleryGrid__caption {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Touch: nothing hovers, so the caption is always legible. */
@media (hover: none) {
  .galleryGrid__caption {
    opacity: 1;
    transform: none;
    text-shadow: 0 1px 20px rgba(0, 0, 0, 0.6);
  }
}

/* ---------- tile spans ---------- */
.galleryGrid__tile--s-l {
  grid-column: span 6;
  grid-row: span 4;
}

.galleryGrid__tile--s-m {
  grid-column: span 4;
  grid-row: span 3;
}

.galleryGrid__tile--s-s {
  grid-column: span 3;
  grid-row: span 3;
}

.galleryGrid__tile--s-tall {
  grid-column: span 3;
  grid-row: span 4;
}

.galleryGrid__tile--s-wide {
  grid-column: span 6;
  grid-row: span 3;
}

@media (max-width: 900px) {
  .galleryGrid__grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 90px;
  }

  .galleryGrid__tile--s-l,
  .galleryGrid__tile--s-wide {
    grid-column: span 6;
    grid-row: span 4;
  }

  .galleryGrid__tile--s-m,
  .galleryGrid__tile--s-s,
  .galleryGrid__tile--s-tall {
    grid-column: span 3;
    grid-row: span 3;
  }
}

@media (max-width: 560px) {
  .galleryGrid {
    padding: 32px 0 80px;
  }

  .galleryGrid__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 140px;
  }

  .galleryGrid__tile--s-l,
  .galleryGrid__tile--s-m,
  .galleryGrid__tile--s-s,
  .galleryGrid__tile--s-tall,
  .galleryGrid__tile--s-wide {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ---------- lightbox (overlay state of this block) ---------- */
.galleryGrid__lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(0, 0, 0, 0.92);
}

.galleryGrid__lightboxImage {
  border-radius: 0px;
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border: 1px solid #333;
}

.galleryGrid__close {
  position: absolute;
  top: 24px;
  right: 32px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 14px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid var(--white);
}

.galleryGrid__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 14px;
  background: transparent;
  border: 1px solid var(--white);
}

.galleryGrid__nav--prev {
  left: 32px;
}

.galleryGrid__nav--next {
  right: 32px;
}

.galleryGrid__close:focus-visible,
.galleryGrid__nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.galleryGrid__info {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  color: var(--bg-0);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.galleryGrid__infoTitle {
  display: block;
  margin-bottom: 4px;
  color: var(--white);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.galleryGrid__counter {
  white-space: nowrap;
}

/* Phones: the nav sits in the bottom corners so it never covers the image or the bar. */
@media (max-width: 720px) {
  .galleryGrid__lightbox {
    padding: 20px;
  }

  .galleryGrid__lightboxImage {
    max-width: calc(100vw - 40px);
    max-height: 58vh;
  }

  .galleryGrid__close {
    top: 20px;
    right: 20px;
  }

  .galleryGrid__nav {
    top: auto;
    bottom: 20px;
    transform: none;
  }

  .galleryGrid__nav--prev {
    left: 20px;
  }

  .galleryGrid__nav--next {
    right: 20px;
  }

  .galleryGrid__info {
    left: 20px;
    right: 20px;
    bottom: 84px;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .galleryGrid__infoTitle {
    font-size: 20px;
  }
}

/* Source: styles/pullQuote.css */
/* pullQuote — Penpot testimonials/02-pullQuote (source: testimonials.html `.pull`).
   Dark full-bleed band. Landscape truth ≥1024px, portrait <768px. */

.pullQuote {
  background: var(--ink-0);
  color: var(--bg-0);
  padding: 120px 0;
}

.pullQuote__open {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(80px, 12vw, 180px);
  line-height: 0.6;
  color: var(--accent);
  margin-bottom: -20px;
}

.pullQuote__quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 24ch;
  margin: 0;
}

.pullQuote__by {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 48px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.pullQuote__dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--accent);
  border-radius: 50%;
}

.pullQuote__sep {
  opacity: 0.5;
}

@media (max-width: 900px) {
  /* Portrait board: quote mark clears the first line instead of overlapping it. */
  .pullQuote__open {
    margin-bottom: 8px;
  }

  /* Portrait board sets the quote on 42px leading at its 38px size. */
  .pullQuote__quote {
    line-height: 1.1;
  }
}

/* Source: styles/quotesGrid.css */
/* quotesGrid — Penpot testimonials/03-quotesGrid (source: testimonials.html `.quotes`, `.q-grid`).
   Landscape truth ≥1024px, portrait <768px; 1-col ≤900px. No interaction. */

.quotesGrid {
  padding: 48px 0 64px;
}

.quotesGrid__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 32px;
}

.quotesGrid__item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 48px 48px 48px 0;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.quotesGrid__item:nth-child(even) {
  padding-left: 48px;
  padding-right: 0;
  border-right: 0;
}

.quotesGrid__item:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.quotesGrid__quote {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink-0);
  margin: 0;
}

/* Decorative open-quote glyph (deco/ — part of the card, not a field). */
.quotesGrid__quote::before {
  content: '\201C';
  display: inline-block;
  color: var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.6em;
  line-height: 0;
  margin-right: 6px;
  vertical-align: -0.2em;
}

.quotesGrid__by {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 16px;
  margin-top: auto;
}

.quotesGrid__who {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  letter-spacing: -0.005em;
}

.quotesGrid__what {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

@media (max-width: 900px) {
  .quotesGrid__grid {
    grid-template-columns: 1fr;
  }

  .quotesGrid__item,
  .quotesGrid__item:nth-child(even) {
    border-right: 0;
    padding: 32px 0;
  }

  .quotesGrid__item:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--rule-soft);
  }

  .quotesGrid__item:last-child {
    border-bottom: 0;
  }
}

/* Source: styles/contactForm.css */
/* contactForm — Penpot contact/02-contactForm (BEM: .contactForm, .contactForm__part).
   Source: contact.html `.contact-main`, `.c-grid`, `.form`, `.visit-card`. */

.contactForm {
  padding: 48px 0 96px;
}

.contactForm__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: start;
  padding-top: 48px;
}

/* ---------- form ---------- */
.contactForm__form {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
  min-width: 0;
}

.contactForm__field {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.2s ease;
}

.contactForm__label {
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.2s ease;
}

.contactForm__input {
  width: 100%;
  padding: 4px 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink-0);
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.contactForm__input::placeholder {
  color: var(--mute);
  font-style: italic;
}

.contactForm__input--textarea {
  resize: vertical;
  min-height: 96px;
}

.contactForm__field:focus-within {
  background: rgba(55, 131, 60, 0.04);
}

.contactForm__field:focus-within .contactForm__label {
  color: var(--accent);
}

/* pill radio group */
.contactForm__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contactForm__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--rule-soft);
  cursor: pointer;
  color: var(--ink-0);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.contactForm__pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contactForm__pill--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

@media (hover: hover) {
  .contactForm__pill:hover {
    border-color: var(--rule);
  }

  .contactForm__pill--on:hover {
    border-color: var(--accent);
  }
}

.contactForm__pill:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.contactForm__submit {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 32px 0 0;
}

.contactForm__send[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.contactForm__note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.contactForm__error {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a1341f;
}

.contactForm__success {
  align-self: start;
  padding: 20px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- visit card ---------- */
.contactForm__visit {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
}

.contactForm__visitHeading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.contactForm__visitText {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-1);
}

.contactForm__detail {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.contactForm__detail:last-child {
  border-bottom: 0;
}

.contactForm__detailKey {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.contactForm__detailValue {
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.contactForm__phone {
  align-self: flex-start;
  margin-top: 8px;
  font-family: var(--font-serif);
  font-size: 36px;
  letter-spacing: -0.01em;
  color: var(--accent);
}

@media (hover: hover) {
  .contactForm__phone:hover {
    color: var(--accent-2);
  }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .contactForm {
    padding: 32px 0 64px;
  }

  .contactForm__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 32px;
  }
}

@media (max-width: 720px) {
  .contactForm__field {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contactForm__note {
    margin-left: 0;
  }

  .contactForm__visit {
    padding: 24px;
  }

  .contactForm__detail {
    grid-template-columns: 84px 1fr;
  }
}

/* Narrow phones: the label/value split leaves the value column too tight for
   `info@allaboutkitchens.co.nz` (≈193px) or the two-number phone line, so the
   row is a flex line that drops the value onto its own full-width row as soon
   as it can no longer hold them. At 390 (the portrait board) the pair still
   sits side by side, exactly as the export shows. */
@media (max-width: 400px) {
  .contactForm__detail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
  }

  .contactForm__detailKey {
    flex: 0 0 84px;
  }

  .contactForm__detailValue {
    flex: 1 1 190px;
    overflow-wrap: normal;
  }
}

@media (pointer: coarse) {
  .contactForm__send {
    min-height: 44px;
  }
}

/* Source: styles/mapEmbed.css */
/* mapEmbed — Penpot contact/03-mapEmbed (BEM: .mapEmbed, .mapEmbed__part).
   Source: contact.html `.map`. */

.mapEmbed {
  padding: 0 0 96px;
}

.mapEmbed__frame {
  position: relative;
  margin-top: 96px;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--rule);
}

.mapEmbed__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.6) contrast(1.05);
}

.mapEmbed__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  padding: 8px 14px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.mapEmbed__pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--accent);
}

/* The portrait board keeps the 21/9 frame and the 96px gap above it
   (contact-03-mapEmbed-p: frame 350×151 at y=96), so only the section's
   trailing padding changes on phones. */
@media (max-width: 900px) {
  .mapEmbed {
    padding: 0 0 64px;
  }
}

/* Source: styles/blog.css */
/* =========================================================
   blog — /blog index, /blog/<slug> post page, related posts, pager.
   No Penpot board exists for the blog yet: this is built strictly from the
   existing system (bone ground, Instrument Serif headings with green <em>,
   JetBrains Mono eyebrows, hairline rules), reusing the pageHero block and
   `.sec-head`. The index is a single-column editorial list whose rows alternate
   the image side like `02-svcRows`; RelatedPosts keeps the compact card form of
   the same language.
   BEM: .blog / .blog__part, .post / .post__part, .pager / .pager__part,
   plus the in-content blocks .blogCallout / .blogQuote / .blogFig /
   .blogPair / .blogCta.
   ========================================================= */

.blog {
  padding-bottom: 96px;
}

/* =========================================================
   1. Index — topic filter row
   ========================================================= */

.blog__topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.blog__topic {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-right: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.2s ease;
}

.blog__topic:first-child {
  padding-left: 0;
}

.blog__topic:last-child {
  border-right: 0;
}

.blog__topic--on {
  color: var(--accent);
}

@media (hover: hover) {
  .blog__topic:hover {
    color: var(--ink-0);
  }
}

/* =========================================================
   2. Index — single-column post list
   ========================================================= */

.blog__row {
  border-top: 1px solid var(--rule-soft);
}

.blog__rows > .blog__row:first-child {
  /* The topic row already draws the rule above the list. */
  border-top: 0;
}

.blog__rows > .blog__row:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

.blog__rowLink {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  padding: 48px 0;
}

/* Copy left, image right — the row reads as a spread when alternated. */
.blog__row--flip .blog__rowLink {
  grid-template-columns: 1.1fr 1fr;
}

.blog__row--flip .blog__frame {
  order: 2;
}

.blog__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.blog__rowTitle {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink-0);
  max-width: 20ch;
  overflow-wrap: break-word;
  transition: color 0.25s ease;
}

.blog__row .blog__excerpt {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: 15px;
  max-width: 54ch;
}

/* ---------- featured opening row ---------- */
.blog__row--featured .blog__rowLink {
  grid-template-columns: 1.35fr 1fr;
  padding: 56px 0;
}

.blog__row--featured .blog__frame {
  aspect-ratio: 16 / 10;
}

.blog__row--featured .blog__rowTitle {
  font-size: clamp(34px, 4.4vw, 60px);
  max-width: 16ch;
}

.blog__row--featured .blog__excerpt {
  -webkit-line-clamp: 4;
  line-clamp: 4;
  font-size: 16px;
}

.blog__flag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 8px 12px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* =========================================================
   3. Index — post cards (RelatedPosts)
   ========================================================= */

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Closes the last row when it is short: sits exactly on the cards' own
     bottom hairline, so a full row shows one rule, not two. */
  border-bottom: 1px solid var(--rule-soft);
}

.blog__card {
  display: flex;
  background: var(--bg-0);
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  transition: background 0.35s ease;
}

.blog__card:nth-child(3n) {
  border-right: 0;
}

.blog__cardLink {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 32px 28px 28px;
}

.blog__cardTitle {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  overflow-wrap: break-word;
  transition: color 0.25s ease;
}

/* =========================================================
   4. Index — shared row/card parts
   ========================================================= */

/* ---------- hero frame (4/3, same treatment as services cards) ---------- */
.blog__frame {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #222;
  border: 1px solid var(--rule);
}

.blog__frame .block-image {
  transition: transform 0.8s var(--ease-out);
}

/* ---------- mono eyebrow: category · date · reading time ---------- */
.blog__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

.blog__cat {
  color: var(--accent);
}

.blog__dot {
  opacity: 0.6;
}

.blog__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-1);
}

.blog__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.blog__more::after {
  content: '→';
  transition: transform 0.25s ease;
}

.blog__empty {
  padding: 48px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

@media (hover: hover) {
  .blog__card:hover {
    background: var(--bg-2);
  }

  .blog__row:hover .blog__frame .block-image,
  .blog__card:hover .blog__frame .block-image {
    transform: scale(1.04);
  }

  .blog__row:hover .blog__rowTitle,
  .blog__card:hover .blog__cardTitle {
    color: var(--accent);
  }

  .blog__row:hover .blog__more,
  .blog__card:hover .blog__more {
    color: var(--accent);
  }

  .blog__row:hover .blog__more::after,
  .blog__card:hover .blog__more::after {
    transform: translateX(4px);
  }
}

/* ---------- ≤900: rows stack image-then-copy, `flip` ignored ---------- */
@media (max-width: 900px) {
  .blog__rowLink,
  .blog__row--flip .blog__rowLink,
  .blog__row--featured .blog__rowLink {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 32px 0;
  }

  .blog__row--flip .blog__frame {
    order: 0;
  }

  .blog__row--featured .blog__frame {
    aspect-ratio: 4 / 3;
  }

  .blog__rowTitle,
  .blog__row--featured .blog__rowTitle {
    max-width: none;
  }

  .blog__row--featured .blog__rowTitle {
    font-size: clamp(30px, 8vw, 40px);
  }
}

/* 2-up cards from 720px, 3-up from 1024px (grid above is the ≥1024 case). */
@media (max-width: 1023px) {
  .blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog__card:nth-child(3n) {
    border-right: 1px solid var(--rule-soft);
  }

  .blog__card:nth-child(2n) {
    border-right: 0;
  }
}

@media (max-width: 719px) {
  .blog {
    padding-bottom: 64px;
  }

  .blog__grid {
    grid-template-columns: 1fr;
  }

  .blog__card,
  .blog__card:nth-child(3n),
  .blog__card:nth-child(2n) {
    border-right: 0;
  }

  .blog__cardLink {
    padding: 28px 0;
    gap: 16px;
  }

  /* Dividers between four topics look like a broken table once they wrap. */
  .blog__topic {
    border-right: 0;
    padding: 0 20px 0 0;
  }

  .blog__topics {
    padding: 8px 0;
  }
}

/* =========================================================
   5. Pager (mono, `.pager` — used by /blog and /blog/page/N)
   ========================================================= */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pager__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid transparent;
  color: var(--mute);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.pager__page--current {
  border-color: var(--rule-soft);
  color: var(--accent);
}

.pager__gap {
  padding: 0 4px;
  color: var(--mute);
}

.pager__step {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--ink-0);
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.pager__step--off {
  color: var(--mute);
  border-bottom-color: var(--rule-soft);
}

@media (hover: hover) {
  a.pager__page:hover {
    color: var(--ink-0);
    border-color: var(--rule-soft);
  }

  a.pager__step:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
}

/* =========================================================
   6. Post page — header, hero band, CTA
   ========================================================= */

.post__head {
  padding: 96px 0 48px;
  border-bottom: 1px solid var(--rule);
}

.post__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

.post__sep {
  opacity: 0.5;
}

.post__crumb {
  transition: color 0.2s ease;
}

.post__crumb--current {
  color: var(--ink-1);
  /* Long titles must wrap inside the trail, never push the page wide. */
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  a.post__crumb:hover {
    color: var(--ink-0);
  }
}

.post__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

.post__eyebrow > span:first-child {
  color: var(--accent);
}

.post__dot {
  opacity: 0.6;
}

.post__by {
  color: var(--mute);
}

.post__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 20ch;
  overflow-wrap: break-word;
}

/* 21/9 framed band, matching the block image treatment used site-wide. */
.post__band {
  padding-top: 48px;
}

.post__frame {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: #222;
  border: 1px solid var(--rule);
}

.post__body {
  padding: 56px 0 96px;
}

.post__cta {
  padding: 64px 0;
}

.post__ctaText {
  margin-bottom: 24px;
  font-family: var(--font-serif);
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

@media (max-width: 900px) {
  .post__head {
    padding: 56px 0 32px;
  }

  .post__band {
    padding-top: 32px;
  }

  .post__frame {
    aspect-ratio: 4 / 3;
  }

  .post__body {
    padding: 40px 0 64px;
  }

  .post__cta {
    padding: 48px 0;
  }
}

@media (max-width: 767px) {
  /* 11px mono crumb links need a real tap target (same trick as pageHero). */
  a.post__crumb {
    position: relative;
    z-index: 1;
  }

  a.post__crumb::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    left: -6px;
    min-width: 44px;
    height: 44px;
    transform: translateY(-50%);
  }

  .post__title {
    max-width: none;
  }
}

/* =========================================================
   7. Article prose (`.blog__prose` wraps the RichText output)
   The three-column grid keeps body copy on a 68ch measure while letting
   `--wide` figures break out to the full `.wrap`.
   ========================================================= */

.blog__prose > .rich-text {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr min(68ch, 100%) 1fr;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-1);
}

.blog__prose > .rich-text > * {
  grid-column: 2;
}

.blog__prose > .rich-text > * + * {
  margin-top: 24px;
}

.blog__prose p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-1);
}

.blog__prose strong,
.blog__prose b {
  font-weight: 600;
  color: var(--ink-0);
}

.blog__prose em {
  font-style: italic;
  color: var(--accent);
}

.blog__prose h2,
.blog__prose h3,
.blog__prose h4 {
  color: var(--ink-0);
  font-weight: 400;
  overflow-wrap: break-word;
}

.blog__prose h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-soft);
}

.blog__prose h3 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: 40px;
}

.blog__prose h4 {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 32px;
}

.blog__prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .blog__prose a:hover {
    color: var(--accent-2);
  }
}

/* ---------- lists: mono markers in the accent green ---------- */
.blog__prose ul,
.blog__prose ol {
  list-style: none;
  padding-left: 0;
}

.blog__prose li {
  position: relative;
  padding-left: 26px;
  margin-top: 10px;
}

.blog__prose ul > li::before {
  content: '+';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.75;
  color: var(--accent);
}

.blog__prose ol {
  counter-reset: blog-ol;
}

.blog__prose ol > li {
  counter-increment: blog-ol;
}

.blog__prose ol > li::before {
  content: counter(blog-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 2.1;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.blog__prose li > ul,
.blog__prose li > ol {
  margin-top: 10px;
}

/* ---------- blockquote ---------- */
.blog__prose blockquote {
  margin: 40px 0;
  padding-left: 24px;
  border-left: 2px solid var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink-0);
}

.blog__prose blockquote p {
  font: inherit;
  color: inherit;
}

.blog__prose hr {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  margin: 48px 0;
}

/* ---------- media inside the article ---------- */
.blog__prose img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: #222;
}

.blog__prose figure {
  margin: 40px 0;
}

.blog__prose figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

.blog__prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-1);
  padding: 2px 5px;
}

.blog__prose pre {
  overflow-x: auto;
  padding: 20px;
  background: var(--bg-1);
  border: 1px solid var(--rule-soft);
}

.blog__prose pre code {
  background: none;
  padding: 0;
}

.blog__prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.blog__prose th,
.blog__prose td {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.blog__prose th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 400;
}

/* =========================================================
   8. In-content blocks (editor-inserted, see src/blocks/blog/)
   ========================================================= */

/* ---------- Callout: pale green ground, accent left rule ---------- */
.blog__prose > .rich-text > .blogCallout {
  margin-top: 40px;
  margin-bottom: 40px;
}

.blogCallout {
  padding: 24px 28px;
  background: var(--accent-soft);
  border-left: 2px solid var(--accent);
}

.blogCallout__label {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.blog__prose .blogCallout__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-0);
}

/* ---------- Pull quote: the pullQuote voice, set inside the measure ---------- */
.blog__prose > .rich-text > .blogQuote {
  margin-top: 48px;
  margin-bottom: 48px;
}

.blogQuote {
  padding: 28px 0 32px;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.blogQuote__open {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 64px;
  line-height: 0.6;
  color: var(--accent);
  margin-bottom: 14px;
}

.blog__prose .blogQuote__quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink-0);
}

.blog__prose .blogQuote__by {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* ---------- Image with caption: inset to the measure, or wide ---------- */
.blog__prose > .rich-text > .blogFig {
  margin-top: 48px;
  margin-bottom: 48px;
}

.blog__prose > .rich-text > .blogFig--wide,
.blog__prose > .rich-text > .blogPair {
  grid-column: 1 / -1;
}

.blogFig__frame {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #222;
  border: 1px solid var(--rule);
}

/* ---------- Two images side by side ---------- */
.blog__prose > .rich-text > .blogPair {
  margin-top: 48px;
  margin-bottom: 48px;
}

.blogPair__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.blogPair__frame {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #222;
  border: 1px solid var(--rule);
}

/* ---------- Mid-article call to action ---------- */
.blog__prose > .rich-text > .blogCta {
  margin-top: 56px;
  margin-bottom: 56px;
}

.blogCta {
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.blog__prose .blogCta__text {
  margin-bottom: 22px;
  max-width: 22ch;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink-0);
}

@media (max-width: 900px) {
  .blogPair__grid {
    grid-template-columns: 1fr;
  }

  .blogCallout {
    padding: 20px 20px 20px 22px;
  }
}

/* Shared host post width and the explicit article excerpt. */
.site-aakb .post { max-width: none; }
.post__excerpt { margin-top: 24px; max-width: 68ch; font-size: 17px; line-height: 1.65; color: var(--ink-1); }

/* Jobs (spec §4): /jobs mosaic and list, /jobs/<slug>, the home teaser placeholder.
   Builds on the galleryFilters, galleryGrid and workGrid rules above. */

.jobsBar__gap { margin-left: 24px; }
a.galleryFilters__pill { text-decoration: none; }

.jobsMosaic { padding: 16px 0 120px; }
.jobsMosaic__group + .jobsMosaic__group { margin-top: 56px; }
.jobsMosaic__sep {
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Placeholder: a Job with no photos yet (Starting soon). */
.jobPlaceholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: var(--bg-1);
  color: var(--ink-1);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.jobPlaceholder__label { font-size: 11px; color: var(--accent); }
.jobPlaceholder__sub { font-size: 10px; color: var(--mute); }

/* Mosaic: stacked bands, each a full-width rectangle, so a group always ends flush.
   Tiles stay near 4:3: a three-band is 2/3 + 1/3 wide and half its width tall. */
.jobsMosaic__bands { display: grid; gap: 14px; }
.jobsMosaic__band { display: grid; gap: 14px; }
.jobsMosaic__band--three {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  aspect-ratio: 2 / 1;
}
.jobsMosaic__band--three > :first-child { grid-row: span 2; }
.jobsMosaic__band--three.jobsMosaic__band--flip { grid-template-columns: 1fr 2fr; }
.jobsMosaic__band--three.jobsMosaic__band--flip > :first-child { grid-column: 2; grid-row: 1 / span 2; }
.jobsMosaic__band--two { grid-template-columns: 7fr 5fr; aspect-ratio: 5 / 2; }
.jobsMosaic__band--two.jobsMosaic__band--flip { grid-template-columns: 5fr 7fr; }
.jobsMosaic__band--one { grid-template-columns: 1fr; aspect-ratio: 12 / 5; }
.jobsMosaic__tile { display: block; min-height: 0; color: inherit; text-decoration: none; }
@media (max-width: 560px) {
  .jobsMosaic__bands, .jobsMosaic__band { gap: 8px; }
  /* Phone: the big tile runs full width and the other two pair up under it. */
  .jobsMosaic__band--three,
  .jobsMosaic__band--three.jobsMosaic__band--flip {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3fr 2fr;
    aspect-ratio: 4 / 5;
  }
  .jobsMosaic__band--three > :first-child,
  .jobsMosaic__band--three.jobsMosaic__band--flip > :first-child { grid-column: 1 / -1; grid-row: 1; }
  .jobsMosaic__band--two,
  .jobsMosaic__band--two.jobsMosaic__band--flip { grid-template-columns: 1fr 1fr; aspect-ratio: 2 / 1; }
  .jobsMosaic__band--one { aspect-ratio: 4 / 3; }
}
.jobsMosaic__tile:has(.jobPlaceholder) .galleryGrid__caption { color: var(--ink-0); text-shadow: none; }
.jobsMosaic__tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* List */
.jobsList { padding: 16px 0 120px; }
.jobsList__rows { border-top: 1px solid var(--rule); }
.jobsList__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule-soft);
  color: inherit;
  text-decoration: none;
}
.jobsList__row:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.jobsList__photo {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-1);
}
.jobsList__text { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.jobsList__title { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.1; }
.jobsList__meta,
.jobsList__progress {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.jobsList__progress { padding: 4px 8px; border: 1px solid var(--rule-soft); color: var(--ink-1); }
.jobsList__progress--starting-soon,
.jobsList__progress--in-progress { border-color: var(--accent); color: var(--accent); }
.jobsList__summary { max-width: 62ch; color: var(--ink-1); line-height: 1.55; }
.jobsList__empty { padding: 48px 0; color: var(--mute); }
@media (hover: hover) {
  .jobsList__row:hover .jobsList__title { color: var(--accent); }
}

/* Search (list view) */
.jobsSearch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.jobsSearch__label {
  margin-right: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.jobsSearch__input {
  flex: 1 1 260px;
  max-width: 420px;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  background: var(--bg-2);
  font: inherit;
  color: var(--ink-0);
}
.jobsSearch__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jobsSearch__clear { margin-left: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: underline; }

/* Show more */
.jobsMore { display: flex; align-items: center; gap: 20px; margin-top: -72px; padding-bottom: 120px; }
.jobsMore__count { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }

/* Job page */
.jobPage__photos { padding: 48px 0 72px; }

/* About this job: the hero's two-column rhythm, label and back link left, write-up right. */
.jobPage__about { padding: 72px 0 96px; }
.jobPage__aboutGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.jobPage__aboutSide { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.jobPage__aboutLabel {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.jobPage__writeUp p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--ink-1); }
.jobPage__writeUp p + p { margin-top: 1em; }

/* Job photo slider: one big photo with arrows, a thumbnail rail beside it (below on phones). */
.jobGallery { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 14px; }
.jobGallery__main { min-width: 0; }
.jobGallery__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: #1a1a1a;
  touch-action: pan-y;
}
.jobGallery__open { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.jobGallery__open:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.jobGallery__badge,
.jobGallery__zoom {
  position: absolute;
  top: 16px;
  display: inline-flex;
  gap: 10px;
  padding: 7px 10px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
}
.jobGallery__badge { left: 16px; }
.jobGallery__badge b { font-weight: 400; color: var(--accent-soft); }
.jobGallery__zoom { right: 16px; opacity: 0; transition: opacity 0.2s ease; }
@media (hover: hover) { .jobGallery__stage:hover .jobGallery__zoom { opacity: 1; } }
.jobGallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.7);
  font-family: var(--font-mono);
  font-size: 14px;
}
.jobGallery__nav:hover { background: rgba(0, 0, 0, 0.7); }
.jobGallery__nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jobGallery__nav--prev { left: 16px; }
.jobGallery__nav--next { right: 16px; }
.jobGallery__caption { min-height: 1.5em; margin: 10px 0 0; color: var(--ink-1); font-family: var(--font-serif); font-style: italic; font-size: 17px; }
.jobGallery__rail { position: relative; min-height: 0; }
.jobGallery__thumbs {
  position: absolute;
  inset: 0 0 calc(1.5em + 10px) 0;
  display: grid;
  grid-auto-rows: max-content;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
}
.jobGallery__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-1);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.jobGallery__thumb:hover,
.jobGallery__thumb[aria-current='true'] { opacity: 1; }
.jobGallery__thumb[aria-current='true'] { outline: 2px solid var(--accent); outline-offset: -2px; }
.jobGallery__thumbStage {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 5px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.55);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .jobGallery { grid-template-columns: minmax(0, 1fr); }
  .jobGallery__thumbs {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: 104px;
    grid-auto-rows: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }
}
@media (max-width: 560px) {
  .jobGallery__stage { aspect-ratio: 4 / 3; }
  .jobGallery__nav { width: 40px; height: 40px; }
  .jobGallery__nav--prev { left: 10px; }
  .jobGallery__nav--next { right: 10px; }
  .jobGallery__badge { top: 10px; left: 10px; }
  .jobGallery__thumbs { grid-auto-columns: 84px; }
}
.jobPage__frame {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--bg-1);
}
.jobPage__photo--wide .jobPage__frame { aspect-ratio: 16 / 9; }
/* Job photo carousel: the gallery lightbox, with the Job's details in the top corners. */
.jobViewer { touch-action: pan-y; background: rgba(12, 12, 12, 0.97); }
.jobViewer__meta {
  position: absolute;
  top: 24px;
  left: 32px;
  right: 220px;
  display: grid;
  gap: 4px;
  color: var(--bg-0);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.jobViewer__top {
  position: absolute;
  top: 24px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--bg-0);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.jobViewer__top .galleryGrid__close { position: static; }
.jobViewer__caption {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 24px;
  margin: 0;
  text-align: center;
  color: var(--white);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
}
@media (max-width: 720px) {
  .jobViewer__meta { top: 20px; left: 20px; right: 20px; }
  .jobViewer__top { top: auto; bottom: 20px; left: 84px; right: 84px; justify-content: center; }
  .jobViewer__top .galleryGrid__close { position: fixed; top: 20px; right: 20px; }
  .jobViewer__meta { right: 130px; }
  .jobViewer__caption { bottom: 84px; font-size: 16px; }
}
.jobPage__back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 560px) {
  .jobPage__photo--wide .jobPage__frame { aspect-ratio: 3 / 2; }
  .jobPage__about { padding: 48px 0 64px; }
  .jobPage__aboutGrid { grid-template-columns: 1fr; gap: 20px; }
  /* Phone: label, then the write-up, then the back link. */
  .jobPage__aboutSide { display: contents; }
  .jobPage__writeUp { order: 1; }
  .jobPage__back { order: 2; margin-top: 12px; }
  .jobsBar__gap { margin-left: 0; width: 100%; margin-top: 10px; }
  .jobsList__row { grid-template-columns: 112px 1fr; gap: 16px; padding: 16px 0; }
  .jobsList__title { font-size: 20px; }
  .jobsList__summary { font-size: 14px; }
  .jobsSearch__label { width: 100%; }
}

/* Home teaser: captions on the placeholder need dark ink. */
.workGrid__figure:has(.jobPlaceholder) .workGrid__caption { color: var(--ink-0); text-shadow: none; }

/* List rows: the placeholder sits in a 112 px thumbnail on phones. */
.jobsList__photo .jobPlaceholder { padding: 6px; text-align: center; letter-spacing: 0.08em; }