:root {
  --navy: #071c42;
  --navy-light: #0a2d69;
  --gold: #e4b64e;
  --paper: #f2ede2;
  --ink: #102957;
  --white: #ffffff;
  --grid: rgba(255, 255, 255, 0.055);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--navy); font: 16px/1.55 "DM Sans", sans-serif; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 2000; padding: 12px 16px; background: var(--gold); color: var(--navy); font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header {
  position: fixed;
  z-index: 1000;
  top: 16px;
  left: 50%;
  width: min(1180px, calc(100% - 32px));
  height: 76px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 8px 10px 8px 18px;
  color: var(--ink);
  background: rgba(248, 245, 237, .94);
  border: 1px solid rgba(7, 28, 66, .55);
  box-shadow: 5px 5px 0 rgba(228, 182, 78, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: height .25s, top .25s, box-shadow .25s;
}
.site-header.scrolled { top: 8px; height: 66px; box-shadow: 3px 3px 0 rgba(228, 182, 78, .9); }
.brand img { width: auto; height: 58px; }
.desktop-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; font: 700 12px "Space Mono", monospace; }
.desktop-nav a { position: relative; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -5px; height: 2px; background: var(--gold); transition: right .2s; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { right: 0; }
.quote-button { padding: 13px 17px; background: var(--gold); color: var(--navy); font: 700 12px "Space Mono", monospace; box-shadow: 3px 3px 0 var(--navy); transition: transform .2s, box-shadow .2s; }
.quote-button span { padding: 5px; margin-right: 4px; color: #fff; background: var(--navy); text-transform: uppercase; }
.quote-button:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--navy); }
.menu-toggle, .mobile-menu { display: none; }

.hero {
  position: relative;
  min-height: 860px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(45px, 5vw, 80px);
  padding: 150px clamp(24px, 6.5vw, 105px) 90px;
  overflow: hidden;
  color: #fff;
  background-color: var(--navy);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
.coordinate, .section-number { font: 700 11px "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.coordinate { color: #aab8cc; }
.hero h1 { max-width: 820px; margin: 30px 0; font: 400 clamp(67px, 7.7vw, 116px)/.86 "Archivo Black", sans-serif; letter-spacing: -.065em; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero-copy > p { max-width: 600px; margin: 0; color: #d7deea; font-size: clamp(17px, 1.5vw, 20px); }
.hero-actions { display: flex; gap: 12px; margin-top: 36px; }
.hero-actions a { min-width: 195px; padding: 14px 17px; border: 1px solid #fff; font: 700 12px "Space Mono", monospace; text-transform: uppercase; transition: transform .2s, background .2s; }
.hero-actions a span { display: block; margin-top: 4px; font-family: "DM Sans", sans-serif; font-size: 15px; }
.hero-actions a:hover { transform: translateY(-3px); }
.primary-action { color: var(--navy); background: var(--gold); border-color: var(--gold) !important; }
.secondary-action:hover { color: var(--navy); background: #fff; }
.quick-proof { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 45px; color: #c5cfdf; font-size: 13px; }
.quick-proof span::before { content: "✓"; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 7px; color: var(--navy); background: var(--gold); border-radius: 50%; font-weight: 800; }
/* Silence the decorative tick for screen readers where CSS alt text is supported.
   Separate later declaration on purpose: engines that cannot parse it drop only
   this line and keep the tick from the rule above. */
.quick-proof span::before { content: "\2713" / ""; }
.hero-visual { position: relative; padding: 23px; color: var(--ink); background: var(--paper); }
.photo-frame { height: clamp(470px, 48vw, 590px); overflow: hidden; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.hero-visual:hover img { transform: scale(1.035); }
.photo-label { position: absolute; top: 7px; right: 25px; padding: 5px 9px; background: var(--paper); font: 10px "Space Mono", monospace; }
.measure { position: absolute; z-index: 2; padding: 3px 8px; color: #fff; background: var(--navy); font: 10px "Space Mono", monospace; }
.measure-top { top: -12px; left: 42%; }
.measure-side { top: 48%; right: -27px; transform: rotate(90deg); }
.quality-card { position: absolute; left: -40px; bottom: 35px; display: flex; align-items: center; gap: 13px; min-width: 285px; padding: 18px; background: var(--gold); box-shadow: 7px 7px 0 #fff; }
.quality-card > b { display: grid; place-items: center; width: 39px; height: 39px; color: #fff; background: var(--navy); }
.quality-card > span { display: flex; flex-direction: column; font-size: 12px; }
.quality-card strong { font-family: "Space Mono", monospace; text-transform: uppercase; }
.scroll-cue { position: absolute; right: 26px; bottom: 25px; display: grid; place-items: center; width: 46px; height: 46px; color: var(--navy); background: #fff; font-size: 24px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px); } }

.ticker { overflow: hidden; padding: 16px 0; color: var(--navy); background: var(--gold); font: 22px "Archivo Black", sans-serif; white-space: nowrap; }
.ticker-track { display: flex; width: max-content; animation: ticker 26s linear infinite; }
.ticker-track span { padding-right: 1em; }
@keyframes ticker { to { transform: translateX(-50%); } }

.section { padding: clamp(80px, 8vw, 125px) clamp(24px, 7vw, 110px); }
.services { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(45px, 7vw, 110px); color: var(--ink); background: var(--paper); }
.section-heading h2 { margin: 22px 0 0; font: 400 clamp(50px, 5.8vw, 83px)/.93 "Archivo Black", sans-serif; letter-spacing: -.055em; }
.service-list { border-top: 2px solid var(--ink); }
.service-list article { display: grid; grid-template-columns: 50px 1fr 36px; align-items: center; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--ink); transition: padding .2s, background .2s; }
.service-list article:hover { padding-right: 15px; padding-left: 15px; background: #fff9; }
.service-list b { color: var(--gold-dark); font: 11px "Space Mono", monospace; }
.service-list h3 { margin: 0; font: 24px "Archivo Black", sans-serif; }
.service-list p { margin: 5px 0 0; color: #56647b; }
.service-list > article > span { font-size: 25px; }

.process { color: var(--ink); background: var(--gold); }
.process > h2 { max-width: 1250px; margin: 28px 0 70px; font: 400 clamp(68px, 8.7vw, 130px)/.83 "Archivo Black", sans-serif; letter-spacing: -.065em; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.process-grid article { display: grid; grid-template-columns: 45px 1fr; gap: 15px; min-height: 185px; padding: 32px; border-right: 1px solid var(--ink); }
.process-grid article:last-child { border-right: 0; }
.process-grid > article > span { font: 12px "Space Mono", monospace; }
.process-grid h3 { margin: 0; font: 25px "Archivo Black", sans-serif; }
.process-grid p { margin-bottom: 0; }

.work { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(45px, 7vw, 110px); color: #fff; background-color: var(--navy-light); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; }
.work-copy h2 { margin: 22px 0; font: 400 clamp(48px, 5.5vw, 78px)/.93 "Archivo Black", sans-serif; letter-spacing: -.055em; }
.work-copy p { max-width: 550px; color: #d2dbea; font-size: 18px; }
.dark-action { display: inline-block; margin-top: 24px; padding: 15px 19px; color: var(--navy); background: var(--gold); font: 700 12px "Space Mono", monospace; text-transform: uppercase; }
.work-image { position: relative; min-height: 530px; padding: 22px; background: var(--paper); }
.work-image > img { width: 100%; height: 530px; object-fit: cover; object-position: center; }
.work-stamp { position: absolute; right: -25px; bottom: -30px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 145px; height: 145px; color: var(--navy); background: var(--white); border: 3px solid var(--gold); border-radius: 50%; transform: rotate(8deg); font: 15px "Archivo Black", sans-serif; }
.work-stamp img { display: block; width: auto; height: 62px; margin: 3px 0; }

.contact { display: flex; justify-content: space-between; align-items: flex-end; gap: 50px; color: var(--ink); background: var(--paper); }
.contact-heading > span { font: 11px "Space Mono", monospace; }
.contact-heading h2 { margin: 16px 0 0; font: 400 clamp(60px, 7vw, 105px)/.86 "Archivo Black", sans-serif; letter-spacing: -.06em; }
.contact-options { width: min(560px, 100%); border-top: 2px solid var(--ink); }
.contact-options a { position: relative; display: flex; flex-direction: column; padding: 22px 55px 22px 0; border-bottom: 1px solid var(--ink); }
.contact-options span { font: 11px "Space Mono", monospace; text-transform: uppercase; }
.contact-options b { font: 30px "Archivo Black", sans-serif; }
.contact-options i { position: absolute; right: 0; top: 50%; font-size: 28px; font-style: normal; transform: translateY(-50%); transition: transform .2s; }
.contact-options a:hover i { transform: translate(5px, -5px); }

.site-footer { display: grid; grid-template-columns: 1.5fr 1fr 1.15fr 1.35fr; align-items: start; gap: clamp(28px, 4vw, 56px); padding: clamp(46px, 5vw, 68px) clamp(24px, 6vw, 95px) 26px; color: #d4ddec; background: #04132e; border-top: 3px solid var(--gold); }
.site-footer img { width: 210px; height: auto; padding: 5px 8px; background: #fff; }
.site-footer p { margin: 0; font-size: 13px; line-height: 1.6; }
.site-footer a { font: 11px "Space Mono", monospace; letter-spacing: .05em; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.65,.25,1); }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; place-content: center; gap: 5px; width: 45px; height: 45px; padding: 0; color: var(--navy); background: transparent; border: 1px solid var(--navy); cursor: pointer; }
  .menu-toggle > span:not(.sr-only) { width: 22px; height: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: flex; flex-direction: column; padding: 20px; background: var(--paper); border: 1px solid var(--navy); box-shadow: 5px 5px 0 var(--gold); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .2s, visibility .2s, transform .2s; }
  .mobile-menu { max-height: calc(100vh - 108px); overflow-y: auto; }
  .mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
  .mobile-menu a { padding: 13px 5px; border-bottom: 1px solid #9aa3b2; font: 700 13px "Space Mono", monospace; }
  .hero, .services, .work { grid-template-columns: 1fr; }
  .hero-visual { max-width: 720px; }
  .section-heading h2 { max-width: 740px; }
  .contact { display: block; }
  .contact-options { margin-top: 55px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 650px) {
  .site-header { top: 8px; width: calc(100% - 16px); height: 68px; padding-left: 10px; }
  .brand img { width: auto; height: 46px; }
  .header-quote { display: none; }
  .menu-toggle { margin-left: auto; }
  .hero { min-height: auto; padding: 115px 20px 80px; gap: 55px; }
  .hero h1 { font-size: clamp(53px, 17vw, 73px); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions a { min-width: 0; }
  .quick-proof { gap: 12px; }
  .photo-frame { height: 400px; }
  .quality-card { left: 9px; right: 9px; bottom: 12px; min-width: 0; }
  .measure-side, .scroll-cue { display: none; }
  .ticker { font-size: 17px; }
  .section { padding: 78px 20px; }
  .section-heading h2 { font-size: 49px; }
  .service-list article { grid-template-columns: 35px 1fr 26px; }
  .service-list h3 { font-size: 20px; }
  .service-list p { font-size: 14px; }
  .process > h2 { font-size: clamp(55px, 17vw, 78px); }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid var(--ink); }
  .work-copy h2 { font-size: 49px; }
  .work-image { min-height: 0; }
  .work-image > img { min-height: 390px; height: 390px; }
  .work-stamp { right: -10px; width: 110px; height: 110px; }
  .work-stamp img { height: 46px; }
  .contact-heading h2 { font-size: 62px; }
  .contact-options b { font-size: 24px; }
  .site-footer { grid-template-columns: 1fr; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================================
   SUBPAGE COMPONENT LIBRARY
   Shared vocabulary for services.html / our-work.html / about.html /
   contact.html / 404.html. Also adds the global focus ring and the
   current-page nav state. Nothing above this line was reordered.
   House style: square corners, 1px hairlines, hard offset shadows,
   Space Mono measurement labels.
   ========================================================================= */

/* --- additional tokens (the originals in :root at the top still stand) --- */
:root {
  --on-navy: #d2dbea;                      /* body text on navy backgrounds */
  --hair: rgba(16, 41, 87, .22);           /* hairline rule on cream / gold */
  --hair-light: rgba(255, 255, 255, .2);   /* hairline rule on navy */
  --gold-dark: #7a5a10;                    /* gold that stays legible on cream */
}

/* --- global focus ring ---------------------------------------------------- */
/* Gold ring by default (sits on navy/dark surfaces). The 2px offset keeps the
   ring off the control itself, so gold buttons on navy still read clearly. */
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Dark ring wherever the ring would land on gold, cream or white. */
.site-header :focus-visible,
.services :focus-visible,
.contact :focus-visible,
.process :focus-visible,
.ticker :focus-visible,
.hero-visual :focus-visible,
.band-paper :focus-visible,
.band-gold :focus-visible,
.quote-button:focus-visible { outline-color: var(--navy); }

/* The skip link is a gold block that can land over any background — ring it
   on the inside so it is visible whatever is behind it. */
.skip-link:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }

/* --- current page state --------------------------------------------------- */
.desktop-nav a[aria-current="page"] { color: var(--navy); }
.desktop-nav a[aria-current="page"]::after { right: 0; }
.mobile-menu a[aria-current="page"] { position: relative; padding-left: 17px; }
.mobile-menu a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 21px; background: var(--gold); transform: translateY(-50%); }

/* --- page hero ------------------------------------------------------------ */
.page-hero {
  position: relative;
  padding: clamp(132px, 12vw, 162px) clamp(24px, 7vw, 110px) clamp(56px, 6vw, 88px);
  color: #fff;
  background-color: var(--navy);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  border-bottom: 1px solid rgba(228, 182, 78, .55);
}
.page-hero .section-number { display: block; color: var(--gold); }
.page-hero h1 { max-width: 16ch; margin: 18px 0 0; font: 400 clamp(46px, 7vw, 92px)/.88 "Archivo Black", sans-serif; letter-spacing: -.06em; }
.page-hero h1 em { color: var(--gold); font-style: normal; }
.page-hero-lede { max-width: 58ch; margin: 26px 0 0; color: var(--on-navy); font-size: clamp(16px, 1.5vw, 19px); }

/* --- breadcrumbs ---------------------------------------------------------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 24px; padding: 0; list-style: none; font: 11px "Space Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.breadcrumbs li { display: flex; align-items: center; gap: 9px; color: #aab8cc; }
.breadcrumbs li + li::before { content: "/"; color: rgba(228, 182, 78, .8); }
.breadcrumbs a { padding-bottom: 2px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .35); transition: color .2s, border-color .2s; }
.breadcrumbs a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.breadcrumbs [aria-current="page"] { color: var(--gold); }

/* --- bands ---------------------------------------------------------------- */
.band { position: relative; }
.band-paper { color: var(--ink); background: var(--paper); }
.band-navy {
  color: #fff;
  background-color: var(--navy-light);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
.band-gold { color: var(--ink); background: var(--gold); }

.band-heading { max-width: 820px; margin: 0 0 clamp(34px, 4.5vw, 56px); }
.band-heading .section-number { display: block; }
.band-navy .band-heading .section-number { color: var(--gold); }
.band-heading h2 { margin: 20px 0 0; font: 400 clamp(38px, 5.2vw, 72px)/.93 "Archivo Black", sans-serif; letter-spacing: -.055em; }
.band-heading h2 em { color: var(--gold); font-style: normal; }
/* .section-heading (home page) was the one display heading whose <em> had no rule,
   so any emphasis added there rendered browser-default italic. */
.section-heading h2 em { color: var(--gold-dark); font-style: normal; }
.band-paper .band-heading h2 em, .band-gold .band-heading h2 em { color: var(--navy); }
.band-heading p { max-width: 62ch; margin: 18px 0 0; font-size: 17px; }
.band-navy .band-heading p { color: var(--on-navy); }

/* --- prose ---------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose p { margin: 0 0 18px; font-size: 17px; line-height: 1.65; }
.prose p:last-child { margin-bottom: 0; }
/* A .prose column has no bottom margin, so a grid or stack following it sat flush
   against the card borders. Space them without touching either component. */
.prose + .spec-grid, .prose + .detail-stack, .prose + .gallery-grid { margin-top: clamp(34px, 4.5vw, 56px); }
.prose h2, .prose h3 { margin: 30px 0 12px; font: 22px "Archivo Black", sans-serif; letter-spacing: -.02em; }
.prose ul { margin: 0 0 18px; padding: 0; list-style: none; }
.prose li { position: relative; margin-top: 11px; padding-left: 26px; font-size: 17px; line-height: 1.6; }
.prose li::before { content: ""; position: absolute; left: 0; top: .68em; width: 13px; height: 2px; background: var(--ink); }
.band-navy .prose { color: var(--on-navy); }
.band-navy .prose h3 { color: #fff; }
.band-navy .prose li::before { background: var(--gold); }
.prose strong { font-weight: 700; }
.prose a { padding-bottom: 1px; border-bottom: 2px solid var(--gold); font-weight: 600; }
.prose a:hover { background: rgba(228, 182, 78, .28); }
.band-navy .prose a { color: #fff; }

/* --- detail stack --------------------------------------------------------- */
.detail-stack { margin: 0; border-top: 2px solid var(--ink); }
.detail-block { display: grid; grid-template-columns: 58px 1fr; gap: clamp(14px, 2.5vw, 30px); padding: clamp(24px, 3vw, 34px) 0; border-bottom: 1px solid var(--hair); transition: padding .2s, background .2s; }
.detail-block:hover { padding-right: 14px; padding-left: 14px; background: rgba(255, 255, 255, .5); }
.detail-block > b { padding-top: 7px; color: var(--gold-dark); font: 700 12px "Space Mono", monospace; letter-spacing: .08em; }
.detail-block h3 { margin: 0; font: clamp(21px, 2.4vw, 28px)/1.05 "Archivo Black", sans-serif; letter-spacing: -.025em; }
.detail-block p { max-width: 62ch; margin: 11px 0 0; font-size: 16px; line-height: 1.6; }
.detail-block ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.detail-block li { padding: 6px 10px; border: 1px solid var(--hair); font: 11px "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.band-navy .detail-stack { border-top-color: rgba(255, 255, 255, .8); }
.band-navy .detail-block { border-bottom-color: var(--hair-light); }
.band-navy .detail-block:hover { background: rgba(255, 255, 255, .05); }
.band-navy .detail-block > b { color: var(--gold); }
.band-navy .detail-block p { color: var(--on-navy); }
.band-navy .detail-block li { border-color: rgba(255, 255, 255, .38); }

/* --- spec cards ----------------------------------------------------------- */
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(240px, calc((100% - 2 * 18px) / 3)), 1fr)); gap: 18px; }
.spec-card { position: relative; padding: 28px 22px 24px; background: var(--white); border: 1px solid var(--ink); box-shadow: 5px 5px 0 rgba(7, 28, 66, .14); transition: transform .2s, box-shadow .2s; }
.spec-card::before { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-top: 3px solid var(--gold); border-left: 3px solid var(--gold); }
.spec-card h3 { margin: 0; font: 20px "Archivo Black", sans-serif; letter-spacing: -.02em; }
.spec-card p { margin: 11px 0 0; font-size: 15px; line-height: 1.6; }
.spec-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 rgba(7, 28, 66, .18); }
.band-navy .spec-card { color: #fff; background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .38); box-shadow: 5px 5px 0 rgba(0, 0, 0, .28); }
.band-navy .spec-card p { color: var(--on-navy); }
.band-navy .spec-card:hover { box-shadow: 7px 7px 0 rgba(0, 0, 0, .3); }
.band-gold .spec-card { background: var(--paper); box-shadow: 5px 5px 0 rgba(16, 41, 87, .3); }
.band-gold .spec-card:hover { box-shadow: 7px 7px 0 rgba(16, 41, 87, .34); }

/* --- gallery placeholders ------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  padding: 18px;
  color: var(--ink);
  background-color: rgba(255, 255, 255, .42);
  background-image: repeating-linear-gradient(135deg, rgba(16, 41, 87, .08) 0 1px, transparent 1px 9px);
  border: 1px solid var(--ink);
}
/* registration crosshair — this tile is a deliberate placeholder, not a broken image */
.gallery-slot::before {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  background-image: linear-gradient(rgba(16, 41, 87, .38) 0 0), linear-gradient(rgba(16, 41, 87, .38) 0 0);
  background-size: 100% 1px, 1px 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
.gallery-slot > span, .gallery-slot > b { position: absolute; top: 0; left: 0; padding: 6px 9px; color: #fff; background: var(--navy); font: 700 10px "Space Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.gallery-slot p { position: relative; max-width: 34ch; margin: 0; font-size: 14px; line-height: 1.45; }
.gallery-slot p::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: 11px; background: var(--gold-dark); }
.band-navy .gallery-slot { color: #fff; background-color: rgba(255, 255, 255, .035); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 9px); border-color: rgba(255, 255, 255, .38); }
.band-navy .gallery-slot::before { background-image: linear-gradient(rgba(255, 255, 255, .45) 0 0), linear-gradient(rgba(255, 255, 255, .45) 0 0); }
.band-navy .gallery-slot > span, .band-navy .gallery-slot > b { color: var(--navy); background: var(--gold); }
.band-navy .gallery-slot p::before { background: var(--gold); }

/* --- "to be confirmed" marker --------------------------------------------- */
.placeholder-note { max-width: 68ch; margin: 30px 0 0; padding: 18px 20px; background: rgba(228, 182, 78, .16); border-left: 5px solid var(--gold); }
.placeholder-note > span, .placeholder-note > b { display: block; margin-bottom: 9px; color: var(--gold-dark); font: 700 11px "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.placeholder-note p { margin: 0; font-size: 15px; line-height: 1.6; }
.band-navy .placeholder-note { background: rgba(228, 182, 78, .13); }
.band-navy .placeholder-note > span, .band-navy .placeholder-note > b { color: var(--gold); }
.band-navy .placeholder-note p { color: var(--on-navy); }
.band-gold .placeholder-note { background: rgba(255, 255, 255, .42); border-left-color: var(--navy); }
.band-gold .placeholder-note > span, .band-gold .placeholder-note > b { color: var(--navy); }

/* --- service area note ---------------------------------------------------- */
.area-note { max-width: 780px; padding: clamp(22px, 3vw, 32px); background: rgba(255, 255, 255, .45); border: 1px solid var(--ink); box-shadow: 6px 6px 0 rgba(228, 182, 78, .7); }
.area-note > span, .area-note > b { display: block; margin-bottom: 14px; font: 700 11px "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.area-note p { margin: 0; font: 400 clamp(19px, 2.2vw, 26px)/1.25 "Archivo Black", sans-serif; letter-spacing: -.025em; }
.band-navy .area-note { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .4); box-shadow: 6px 6px 0 rgba(228, 182, 78, .4); }
.band-navy .area-note > span, .band-navy .area-note > b { color: var(--gold); }
.band-gold .area-note { background: rgba(255, 255, 255, .4); box-shadow: 6px 6px 0 rgba(16, 41, 87, .3); }

/* --- FAQ ------------------------------------------------------------------ */
.faq-list { max-width: 78ch; margin: 0; border-top: 2px solid var(--ink); }
.faq-list dt { position: relative; margin: 0; padding-left: 27px; font: clamp(18px, 2vw, 22px)/1.25 "Archivo Black", sans-serif; letter-spacing: -.02em; }
.faq-list dt::before { content: ""; position: absolute; left: 0; top: .42em; width: 12px; height: 12px; background: var(--gold); border: 1px solid var(--ink); }
.faq-list dd { max-width: 66ch; margin: 12px 0 0; padding-left: 27px; font-size: 16px; line-height: 1.65; }
.faq-list > dt { padding-top: clamp(22px, 2.6vw, 30px); }
.faq-list > dd { padding-bottom: clamp(22px, 2.6vw, 30px); border-bottom: 1px solid var(--hair); }
.faq-item { padding: clamp(22px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--hair); }
.band-navy .faq-list { border-top-color: rgba(255, 255, 255, .8); }
.band-navy .faq-list dt::before { border-color: rgba(255, 255, 255, .5); }
.band-navy .faq-list dd { color: var(--on-navy); }
.band-navy .faq-list > dd, .band-navy .faq-item { border-bottom-color: var(--hair-light); }

/* --- closing call to action ----------------------------------------------- */
.cta-band { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(32px, 5vw, 70px); }
.cta-copy { flex: 1 1 360px; }
.cta-copy .section-number { display: block; }
.cta-copy h2 { margin: 16px 0 0; font: 400 clamp(40px, 5.6vw, 78px)/.89 "Archivo Black", sans-serif; letter-spacing: -.06em; }
.cta-copy p { max-width: 46ch; margin: 18px 0 0; font-size: 17px; line-height: 1.6; }
.cta-actions { flex: 0 1 400px; display: grid; gap: 12px; }
.cta-actions a { padding: 14px 17px; border: 1px solid var(--ink); font: 700 12px "Space Mono", monospace; text-transform: uppercase; transition: transform .2s, background .2s, box-shadow .2s, color .2s; }
.cta-actions a span { display: block; margin-top: 4px; font-family: "DM Sans", sans-serif; font-size: 16px; letter-spacing: 0; text-transform: none; }
/* the shared .primary-action is gold — invert it so it reads on a gold band */
.cta-actions .primary-action { color: #fff; background: var(--navy); border-color: var(--navy) !important; }
.cta-actions .primary-action:hover { color: var(--gold); background: var(--navy); }
.cta-actions .secondary-action:hover { color: var(--navy); background: var(--white); }
.cta-actions a:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 rgba(16, 41, 87, .35); }

/* --- footer blocks -------------------------------------------------------- */
.footer-nav h2, .footer-contact h2, .footer-area h2 { margin: 0 0 15px; color: #fff; font: 700 11px "Space Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.footer-brand p { margin-top: 16px; max-width: 34ch; }
.footer-nav a, .footer-contact a { display: block; padding: 8px 0; color: #d4ddec; border-bottom: 1px solid rgba(255, 255, 255, .09); transition: color .2s, padding-left .2s; }
.footer-nav a:hover, .footer-contact a:hover { padding-left: 7px; color: var(--gold); }
.footer-area p { max-width: 32ch; }
.site-footer .footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: clamp(20px, 3vw, 34px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font: 11px "Space Mono", monospace; letter-spacing: .05em; }
.footer-legal a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .3); transition: color .2s, border-color .2s; }
.footer-legal a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* --- responsive (same two breakpoints used above) ------------------------- */
@media (max-width: 980px) {
  .page-hero h1 { max-width: 18ch; }
  .cta-actions { flex: 1 1 320px; }
}

@media (max-width: 650px) {
  .page-hero { padding: 112px 20px 56px; }
  .page-hero h1 { max-width: none; font-size: clamp(36px, 12vw, 52px); }
  .page-hero-lede { font-size: 16px; }
  .band-heading h2 { font-size: clamp(32px, 10vw, 44px); }
  .detail-block { grid-template-columns: 38px 1fr; gap: 12px; }
  .detail-block:hover { padding-right: 0; padding-left: 0; background: none; }
  .detail-block h3 { font-size: 20px; }
  .spec-grid, .gallery-grid { grid-template-columns: 1fr; }
  .cta-band { display: block; }
  .cta-copy h2 { font-size: clamp(38px, 12vw, 52px); }
  .cta-actions { margin-top: 34px; }
  .cta-actions a:hover { transform: none; box-shadow: none; }
  .area-note p { font-size: 19px; }
  .site-footer .footer-legal { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================================
   PAGE-LEVEL EXTRAS
   Small, page-scoped additions returned by the page builds. Each one exists
   because the global `a { color: inherit; text-decoration: none }` would leave
   an inline link indistinguishable from body text. None of them restyle a
   shared component.
   ========================================================================= */

/* ---- page extras: contact.html ---- */
/* contact.html — the service-area block closes the "What to tell us" band,
   so it needs the same gap the band-heading leaves below itself. Scoped to a
   new class; .area-note itself is untouched. */
.contact-area { margin-top: clamp(34px, 4.5vw, 56px); }

/* ---- page extras: our-work.html ---- */
/* our-work.html — inline phone links inside the gallery .placeholder-note.
   Global `a { text-decoration: none }` would leave them indistinguishable from
   body text, so they get an explicit underline. Sits on the navy band. */
.note-link { color: #fff; border-bottom: 2px solid var(--gold); font-weight: 700; white-space: nowrap; }
.note-link:hover { background: rgba(228, 182, 78, .28); }

/* ---- page extras: index.html ---- */
/* --- home page only: service-area line under the hero quick-proof row ----- */
/* scoped with .hero-copy > so it outranks the existing .hero-copy > p rule */
.hero-copy > .hero-area { max-width: 46ch; margin: 18px 0 0; color: #c5cfdf; font: 12px/1.65 "Space Mono", monospace; letter-spacing: .02em; }

/* --- home page only: whole-row link on the service list ------------------- */
/* .service-row is added alongside .reveal on the existing .service-list articles; */
/* it only establishes a containing block so the link can stretch over the row.  */
.service-row { position: relative; }
.service-link::after { content: ""; position: absolute; inset: 0; }

/* --- home page only: secondary text link in the work band ----------------- */
.work-link { display: inline-block; margin-top: 24px; margin-left: clamp(0px, 2vw, 18px); color: #fff; border-bottom: 2px solid var(--gold); font: 700 12px "Space Mono", monospace; text-transform: uppercase; transition: color .2s; }
.work-link:hover { color: var(--gold); }

/* --- home page only: contact-page link under the contact heading ---------- */
.contact-more { margin: 26px 0 0; font: 700 12px "Space Mono", monospace; text-transform: uppercase; }
.contact-more a { border-bottom: 2px solid var(--gold); transition: color .2s; }
.contact-more a:hover { color: var(--gold-dark); }

@media (max-width: 650px) {
  .work-link { margin-left: 0; }
}

/* ---- page extras: about.html ---- */
/* --- about.html: contact routes inside a .spec-card (Dave / Reece) ---------
   .contact-card is a modifier used ONLY alongside .spec-card inside .band-navy,
   where `.band-navy .spec-card { color: #fff }` already supplies the text colour.
   Without these rules the tel:/sms: links are visually indistinguishable from
   body text, so this block is required for about.html to be usable.
   Mirrors the .cta-actions a / a span idiom (mono label + DM Sans number). */
.contact-card ul { margin: 18px 0 0; padding: 0; list-style: none; }
.contact-card li + li { margin-top: 10px; }
.contact-card a {
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .38);
  font: 700 11px "Space Mono", monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: color .2s, background .2s, border-color .2s;
}
.contact-card a span {
  display: block;
  margin-top: 4px;
  font: 700 16px "DM Sans", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.contact-card a:hover { color: var(--navy); background: var(--gold); border-color: var(--gold); }

/* ---- page extras: services.html ---- */
/* services.html — inline text link inside a .detail-block paragraph.
   .prose a covers prose columns, but .detail-block has no inline link style,
   so an <a> there would inherit `color: inherit; text-decoration: none` and be
   invisible. Values copied from the existing .prose a rule so the two match. */
.detail-link { padding-bottom: 1px; border-bottom: 2px solid var(--gold); font-weight: 600; }
.detail-link:hover { background: rgba(228, 182, 78, .28); }

/* A .placeholder-note carries only a top margin, so anything following it sat
   flush against it (our-work.html: the note touched the gallery grid). Space
   the note from whatever comes next without altering the component itself. */
.placeholder-note + .gallery-grid,
.placeholder-note + .spec-grid,
.placeholder-note + .detail-stack { margin-top: clamp(22px, 3vw, 34px); }

/* Dave has one contact route and Reece has two, so Dave’s card left a block of
   empty space under its single button while Reece’s ran full. Pin the actions to
   the bottom of both cards so the pair reads as deliberate rather than lopsided. */
.contact-card { display: flex; flex-direction: column; }
.contact-card ul { margin-top: auto; }

/* The FAQ marker is a gold square, which disappears on the gold band that now
   closes contact.html. Flip it to navy there so it still reads. */
.band-gold .faq-list dt::before { background: var(--navy); }

/* <main> is focused by the skip link, so :focus-visible would paint the global
   gold ring around the whole page. Suppress it on that element only. */
#main:focus { outline: none; }

/* Above 980px the hero headline wrapped to three lines, orphaning "IN." and
   "OUT." and overriding the authored <br>. Scoped so the 651-980px two-column
   band and the <=650px rule are untouched. */
@media (min-width: 981px) { .hero h1 { font-size: min(5.7vw, 104px); } }

/* ============================================================================
   REAL PROJECT PHOTOGRAPHS
   Replaced the placeholder tiles once Dave and Reece supplied their own photos.
   ========================================================================= */

/* before/after pairs — the two shots stay side by side at every width, because
   the whole point is comparing them. A fixed square crop keeps the grid tidy
   across a mix of portrait and landscape source photos. */
.job-list { display: grid; gap: clamp(30px, 4.5vw, 54px); }
/* A justified row: each figure's flex-grow is its own aspect ratio, so the two
   images always resolve to exactly the SAME height whatever their shapes, and
   neither is cropped. --ar / --sum are written into the markup per image. */
.job-shots { display: flex; align-items: flex-start; justify-content: center; gap: clamp(10px, 1.8vw, 26px); margin-inline: auto; }
.job-shots figure { flex: var(--ar, 1) 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.job-shots figure { margin: 0; }
.job-shots img { display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, .22); }
.job-shots figcaption { align-self: center; padding: 6px 10px; color: #fff; background: var(--navy); font: 700 10px "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.job-caption { max-width: 62ch; margin: 15px 0 0; color: var(--on-navy); font-size: 16px; line-height: 1.6; }
.band-paper .job-shots img { border-color: var(--hair); }
.band-paper .job-caption { color: var(--ink); }

/* single showcase shots */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--hair); }
.shot figcaption { margin-top: 12px; font: 11px/1.55 "Space Mono", monospace; letter-spacing: .02em; }
.band-navy .shot img { border-color: rgba(255, 255, 255, .22); }
.band-navy .shot figcaption { color: var(--on-navy); }

@media (max-width: 650px) {
  .job-shots { gap: 8px; }
  .job-shots figcaption { padding: 4px 7px; font-size: 9px; }
  .job-caption { font-size: 15px; }
}

/* ============================================================================
   OWNER STATEMENT + LOCATION
   ========================================================================= */

/* The owner's own words on the About page — set as a pull-quote so it reads as
   a person talking, not as marketing copy. */
.owner-note { position: relative; max-width: 60ch; margin: 0 0 clamp(30px, 4vw, 46px); padding: 4px 0 4px 26px; border-left: 5px solid var(--gold); }
.owner-note p { margin: 0; font: clamp(19px, 2.1vw, 25px)/1.45 "DM Sans", sans-serif; font-weight: 500; letter-spacing: -.012em; }
.band-navy .owner-note p { color: #fff; }

/* Address + map */
.locate { display: grid; grid-template-columns: minmax(220px, .8fr) 1.2fr; gap: clamp(20px, 3vw, 38px); align-items: start; }
.locate-address { font-style: normal; }
.locate-address > span { display: block; margin-bottom: 11px; color: var(--gold-dark); font: 700 11px "Space Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.locate-address p { margin: 0; font: clamp(20px, 2.2vw, 27px)/1.35 "Archivo Black", sans-serif; letter-spacing: -.03em; }
.locate-link { display: inline-block; margin-top: 18px; padding-bottom: 2px; border-bottom: 2px solid var(--gold); font: 700 12px "Space Mono", monospace; letter-spacing: .06em; text-transform: uppercase; transition: color .2s; }
.locate-link:hover { color: var(--gold-dark); }

.locate-map { position: relative; padding: 12px; background: var(--white); border: 1px solid var(--ink); box-shadow: 7px 7px 0 rgba(7, 28, 66, .14); }
.locate-map iframe { display: block; width: 100%; height: clamp(260px, 34vw, 400px); border: 0; background: #e8e4da; }
.band-navy .locate-map { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); box-shadow: 7px 7px 0 rgba(0, 0, 0, .18); }

.footer-address { margin-top: 10px; font: 11px/1.6 "Space Mono", monospace; letter-spacing: .03em; color: #9fb0c8; }

@media (max-width: 780px) {
  .locate { grid-template-columns: 1fr; }
  .locate-map { padding: 9px; box-shadow: 5px 5px 0 rgba(7, 28, 66, .14); }
}

/* An iframe takes keyboard focus but does not match :focus-visible, so the global
   ring never paints on it. Ring the container instead, which is the usual pattern
   and gives a clearer indicator than outlining the map itself. */
.locate-map:focus-within { outline: 3px solid var(--navy); outline-offset: 2px; }

/* ============================================================================
   SCROLL STAGE
   A section that holds still while you scroll through it, revealing one item
   per step. Built on position: sticky — the wheel is never intercepted, so
   native scrolling, keyboard paging, touch and find-in-page all still work.

   Default (no JS, reduced motion, or narrow screens) is a plain stacked list
   with every item visible. The pinned behaviour is opt-in: script.js adds
   .is-live only when it is safe to do so.
   ========================================================================= */

.stage { padding: 0; }
.stage-inner { padding: clamp(72px, 8vw, 120px) clamp(24px, 7vw, 110px); }
.stage-head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.stage-stack { display: grid; gap: clamp(34px, 5vw, 60px); }
.stage-dots { display: none; }

/* ---- pinned mode ---- */
.stage.is-live .stage-track { height: calc(100vh + var(--steps, 3) * 72vh); }
.stage.is-live .stage-inner {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stage.is-live .stage-stack { position: relative; gap: 0; }
.stage.is-live .stage-item {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2, .65, .25, 1);
  pointer-events: none;
}
.stage.is-live .stage-item.is-active { opacity: 1; transform: none; pointer-events: auto; }

/* images sized to the viewport, never cropped */
/* Cap the row by HEIGHT: width = height x (sum of both aspect ratios). Below
   that cap the row simply fills the column, so wide pairs go full width and
   tall pairs go full height. Either way the space is used. */
.stage.is-live .job-shots { max-width: min(100%, calc(var(--shot-h) * var(--sum, 2))); }
.stage.is-live .job-shots img { width: 100%; height: auto; }
.stage.is-live .job-caption { text-align: center; max-width: 66ch; margin-inline: auto; }
.stage.is-live .shot { display: grid; justify-items: center; gap: 14px; }
.stage.is-live .shot img { width: auto; height: auto; max-width: 100%; max-height: var(--shot-h); }
.stage.is-live .shot figcaption { text-align: center; }

/* step indicator */
.stage.is-live .stage-dots { display: flex; gap: 9px; justify-content: center; margin: clamp(22px, 3vw, 34px) 0 0; padding: 0; list-style: none; }
.stage-dots li { width: 28px; height: 3px; background: currentColor; opacity: .22; transition: opacity .35s ease; }
.stage-dots li.is-on { opacity: 1; }
.band-navy .stage-dots li { background: var(--gold); }

/* how tall a stage image may get; the pair maths above keys off this */
.stage.is-live { --shot-h: min(62vh, 620px); }
@media (max-width: 1100px) { .stage.is-live { --shot-h: min(54vh, 500px); } }
@media (max-height: 780px) { .stage.is-live { --shot-h: 50vh; } }

/* On a phone, two images side by side leaves each of them too small to read —
   a landscape pair came out ~100px tall. Stack them full width instead: the
   before/after comparison survives a short scroll, the detail does not survive
   being shrunk to a thumbnail. */
@media (max-width: 600px) {
  .job-shots { flex-direction: column; align-items: stretch; gap: 14px; }
  .job-shots figure { flex: none; width: 100%; }
  .job-shots img { width: 100%; height: auto; }
}

/* "Where we work" with the map alongside — the note on its own left a big empty
   cream band. The note keeps its own box styling; only the two-up is new. */
.area-locate { align-items: stretch; }
.area-locate .area-note { max-width: none; display: flex; flex-direction: column; justify-content: center; }
.area-locate .locate-link { align-self: flex-start; }

/* Six services in one tall column left the right-hand half of the band empty.
   Two across closes that up. Scoped with a modifier because the same
   .detail-stack carries the three-step list on our-work.html, and three items
   in two columns would strand one. */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(26px, 4vw, 64px); }
.detail-grid .detail-block { border-bottom: 1px solid var(--hair); }
/* the block's own hover inset would jog the column; keep the shift vertical-free */
.detail-grid .detail-block:hover { padding-left: 10px; padding-right: 10px; }
@media (max-width: 860px) {
  .detail-grid { grid-template-columns: 1fr; }
}

/* A readable prose column is ~68ch, which left half of a full-width band empty.
   Put the heading and the owner's statement in a side column so the band fills
   out without stretching the body text past a comfortable measure. */
.split { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(28px, 5vw, 78px); align-items: start; }
/* groups the heading and the quote into ONE grid cell — without it they would
   become separate grid items and the two-up would collapse */
.split-side { display: flex; flex-direction: column; }
.split .band-heading { margin-bottom: clamp(20px, 2.5vw, 30px); }
.split .owner-note { margin-bottom: 0; max-width: none; }
.split .prose { max-width: 64ch; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 40px); }
  .split .owner-note { margin-bottom: clamp(24px, 3vw, 34px); }
}

/* Four Q&A pairs in one column left a third of the gold band empty. Two across
   fills it. Each pair is wrapped in a .faq-item div (valid inside a <dl>) so a
   question can never be separated from its answer across columns. */
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 5vw, 76px); max-width: none; }
.faq-grid .faq-item { padding: clamp(20px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--hair); }
.faq-grid .faq-item dt { padding-top: 0; }
.faq-grid .faq-item dd { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* With an odd number of services the last one sat alone beside an empty cell.
   Let it span the full width so the row reads as deliberate. Matches only when
   the total count is odd (last child also at an odd position). */
.detail-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }