/* ==========================================================================
   Macz Arkitektura: "Details tell stories."
   Palette = Material-3-style tonal roles seeded from the logo (sun #FEC726,
   brown #261A0E). Every text token reaches 4.5:1 on every surface it sits on
   (see PROJECT.md › Direction); tools/browser_qa.mjs measures the result.
   Sun yellow is a fill, never text on light surfaces.
   ========================================================================== */
:root {
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;

  /* Material-style roles */
  --md-primary: #7a5300;                 /* amber tone 40: links, small accents on light */
  --md-primary-container: #fec726;       /* logo sun: primary CTA fill */
  --md-on-primary-container: #261a0e;
  --md-on-surface: #261a0e;              /* logo brown: ink */
  --md-on-surface-variant: #5a4b3a;
  --md-surface: #fbf7ef;
  --md-surface-container: #f2eadb;
  --md-surface-bright: #ffffff;
  --md-inverse-surface: #1d140b;
  --md-inverse-surface-2: #2b2013;
  --md-inverse-on-surface: #f6efe2;
  --md-inverse-on-surface-variant: #cdbfa9;
  --md-outline-variant: #e2d7c4;
  --md-outline-inverse: #4a3b29;

  /* template aliases (the mechanics below use these) */
  --c-bg: var(--md-surface);
  --c-surface: var(--md-surface-container);
  --c-text: var(--md-on-surface);
  --c-muted: var(--md-on-surface-variant);
  --c-line: var(--md-outline-variant);
  --c-brand: var(--md-primary-container);
  --c-on-brand: var(--md-on-primary-container);
  --c-error: #a3261a;
  --c-ok: #2f6b2a;

  --radius: 4px;
  --radius-lg: 1.25rem;
  --container: 76rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-gutter: clamp(1.25rem, 5vw, 3.5rem);  /* header + full-bleed hero copy: never tight to the edge */
  --header-h: 5rem;
  --section: clamp(3.75rem, 9vw, 7.5rem);   /* one vertical rhythm for every section */
  --stack: clamp(1.75rem, 3vw, 2.75rem);   /* heading block → content */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font: 400 1.0625rem/1.7 var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; letter-spacing: .005em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
p { text-wrap: pretty; margin: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--md-primary); outline-offset: 3px; }
.on-night :focus-visible, .site-footer :focus-visible { outline-color: var(--md-primary-container); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), 46rem); margin-inline: auto; }
.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: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .5rem 1rem; background: var(--c-text); color: var(--c-bg); }
.skip-link:focus { top: 1rem; }

/* ---------------------------------------------------------------- rule utilities */
.nowrap { white-space: nowrap; }
.wrap-anywhere { overflow-wrap: anywhere; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
/* icon + text rows (address, phone, email): the icon never drops to its own line */
.icon-row { display: inline-flex; align-items: center; gap: .6em; }
/* badges and pills never wrap at 360–390px; hide secondary bits on small screens instead */
.badge, .pill { display: inline-flex; align-items: center; gap: .4em; white-space: nowrap; }
/* sticky sub-navs and pill bars sit centered */
.subnav { width: fit-content; max-width: 100%; margin-inline: auto; overflow-x: auto; }
/* hours and spec tables: aligned columns, values never wrap */
.hours, .specs { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem; margin: 0; }
.hours dt, .specs dt { margin: 0; }
.hours dd, .specs dd { margin: 0; white-space: nowrap; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }

/* ---------------------------------------------------------------- type helpers */
.lede { font-size: clamp(1.125rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--c-muted); }
.prose > * + * { margin-top: 1.1em; }
.prose { color: var(--c-muted); }
.prose strong { color: var(--c-text); font-weight: 500; }
.smallcaps { font: 500 .8125rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.text-link {
  display: inline-flex; align-items: center; gap: .5em; font-weight: 500; color: var(--md-primary);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em;
}
.text-link .icon { transition: transform .2s var(--ease); }
.text-link:hover .icon { transform: translateX(3px); }
.on-night .text-link { color: var(--md-primary-container); }

/* the logo's two horizon strokes, redrawn: the site's divider */
.horizon { display: block; width: 6.5rem; height: auto; color: var(--md-on-surface); }
.on-night .horizon, .band .horizon, .page-head .horizon, .hero .horizon { color: var(--md-primary-container); }
.section-head { display: grid; gap: 1.1rem; margin-bottom: var(--stack); max-width: 44rem; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--split { max-width: none; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 2rem 4rem; }
}

/* ---------------------------------------------------------------- buttons
   One primary CTA label + style sitewide (.btn-primary). Everything else is
   .btn-ghost or a text link. .btn-call is the phone number. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 3rem; padding: .8rem 1.4rem; border: 1.5px solid transparent; border-radius: var(--radius);
  font: 500 1rem/1.2 var(--font-body); letter-spacing: .02em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary, .btn-submit { background: var(--c-brand); color: var(--c-on-brand); }
.btn-ghost { border-color: currentColor; background: transparent; }
.btn-call { background: var(--md-on-surface); color: var(--md-surface); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* ---------------------------------------------------------------- header
   Fixed-height bar. The scrolled state only animates transform + opacity:
   backdrop fades in via ::before, the logo scales. Never animate height. */
@media (min-width: 1100px) { :root { --header-h: 5.75rem; } }  /* room above and below the bar's buttons */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); }
.site-header::before {
  content: ""; position: absolute; inset: 0; background: var(--c-bg); box-shadow: 0 1px 0 var(--c-line);
  opacity: 0; transition: opacity .25s var(--ease);
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header__bar { position: relative; height: 100%; display: flex; align-items: center; gap: 1.75rem;
  width: min(100% - 2 * var(--header-gutter), var(--container)); }
.brand {
  display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; white-space: nowrap;
  transform-origin: left center; transition: transform .25s var(--ease);
}
.brand img { width: 2.6rem; height: auto; }
.brand__name { font: 400 1.35rem/1 var(--font-display); letter-spacing: .02em; }
.brand__name b { font-weight: 400; letter-spacing: .14em; }
.site-header.is-scrolled .brand { transform: scale(.92); }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 1100px) and (max-width: 1319px) {
  .site-nav ul { gap: 1.25rem; }
  .site-header__bar { gap: 1.25rem; }
  .header-call__num { display: none; }  /* icon-only phone until there's room for the number */
  .header-call { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
}
.site-nav a { text-decoration: none; white-space: nowrap; font-weight: 500; font-size: .98rem; }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .45em; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--md-primary-container); text-decoration-thickness: 3px; text-underline-offset: .45em; }
.header-call { display: inline-flex; align-items: center; gap: .45em; font-weight: 500; text-decoration: none; white-space: nowrap; }
.header-cta { min-height: 2.75rem; padding: .6rem 1.1rem; }
.nav-toggle { display: none; }

@media (max-width: 1099px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
    border: 0; background: transparent; color: inherit; cursor: pointer;
  }
  .header-call { margin-left: auto; min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 auto 0; margin: 0; padding: .5rem var(--header-gutter) 1.5rem;
    background: var(--c-bg); box-shadow: 0 12px 24px rgb(29 20 11 / .12);
    opacity: 0; visibility: hidden; transform: translateY(-.5rem);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s;
  }
  .nav-open .site-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { display: block; padding: .85rem 0; font-size: 1.15rem; border-bottom: 1px solid var(--c-line); }
}
@media (max-width: 599px) {
  .header-call { background: var(--md-on-surface); color: var(--md-surface); border-radius: 50%; }
  .header-call__num { display: none; }
  .header-cta { display: none; }
  .brand img { width: 2.2rem; }
  .brand__name { font-size: 1.15rem; }
}

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--section); }
.section--tint { background: var(--md-surface-container); }
.on-night { background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); }
.on-night .prose, .on-night .lede, .on-night .muted { color: var(--md-inverse-on-surface-variant); }
.on-night .prose strong { color: var(--md-inverse-on-surface); }
.muted { color: var(--c-muted); }
.mt-stack { margin-top: var(--stack); }

/* ---------------------------------------------------------------- media + parallax
   Every full-bleed photo (hero, page heads, bands) scrolls at 50% speed: main.js sets translateY(-0.5 × frame top).
   To stay covered while its frame is on screen, the image must be max(frame, (frame + viewport) / 2) tall,
   pinned to the frame's top edge (lvh: the largest mobile viewport, so the URL bar never exposes a gap).
   Static and frame-sized under reduced motion. */
.media { position: relative; overflow: hidden; background: var(--md-surface-container); }
.media > img { width: 100%; height: 100%; object-fit: cover; }
.media > img[data-parallax] { position: absolute; left: 0; top: 0; height: max(100%, calc(50% + 50lvh + 2px)); will-change: transform; }
/* photo headers start at the page top and only scroll away, so a frame-sized image always covers them */
.hero > .media > img[data-parallax], .page-head > .media > img[data-parallax] { height: 100%; }

/* ---------------------------------------------------------------- hero (after reference 1)
   One full-bleed photo, no fade. The header floats over the top (see .has-hero); title, intro and CTAs
   sit low, by the wave divider, over a bottom scrim; the crops put the stove just above the copy. */
.has-hero main > :first-child { margin-top: calc(-1 * var(--header-h)); }
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end; justify-items: center;
  min-height: min(100svh + 4rem, 62rem); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
  padding: calc(var(--header-h) + 2rem) var(--header-gutter) calc(var(--wave-h) + clamp(2.25rem, 6svh, 4.25rem));
}
.hero > .media { position: absolute; inset: 0; z-index: -1; background: var(--md-inverse-surface); }
.hero > .media > img { object-position: 50% 45%; }
.hero > .media::after {
  /* a band behind the floating header, and a bottom scrim behind the copy that clears before the stove */
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgb(29 20 11 / .72) 0%, rgb(29 20 11 / .62) var(--header-h), rgb(29 20 11 / 0) calc(var(--header-h) + 6rem)),
    linear-gradient(0deg, rgb(29 20 11 / .84) 0%, rgb(29 20 11 / .8) 28%, rgb(29 20 11 / .7) 46%, rgb(29 20 11 / 0) 62%);
}
.hero__content { display: grid; justify-items: center; gap: 1.25rem; text-align: center; max-width: 46rem; }
.hero__title { color: var(--md-inverse-on-surface); font-size: clamp(2.75rem, 6.2vw, 5.25rem); max-width: 14ch; }
.hero__lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: #efe6d6; max-width: 40rem; }
.hero .actions { justify-content: center; margin-top: .5rem; }
.hero .btn-ghost { color: var(--md-inverse-on-surface); }
/* the wave divider closes every photo header (home hero and inner page-heads) in the page colour */
.hero, .page-head { --wave-h: clamp(3.25rem, 7.5vw, 6.5rem); }
.hero__wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: var(--wave-h); fill: var(--c-bg); }

/* Pages that open on a full-bleed photo (.has-hero): the header floats over it
   (light ink, white mark) until scrolled or the menu opens */
.has-hero .site-header:not(.is-scrolled) { color: var(--md-inverse-on-surface); }
.has-hero .site-header:not(.is-scrolled) .brand img { filter: brightness(0) invert(1); }
.nav-open .has-hero .site-header::before { opacity: 1; }
.nav-open .has-hero .site-header { color: var(--md-on-surface); }
.nav-open .has-hero .site-header .brand img { filter: none; }
@media (max-width: 1099px) {
  .site-nav { color: var(--md-on-surface); }
}
@media (max-width: 599px) {
  .hero > .media > img { object-position: 50% 40%; }
  .hero .actions { width: 100%; }
  .hero .btn { flex: 1 1 auto; }
  .has-hero .site-header:not(.is-scrolled) .header-call { background: var(--md-inverse-on-surface); color: var(--md-on-surface); }
  .nav-open .has-hero .site-header .header-call { background: var(--md-on-surface); color: var(--md-surface); }
}

/* ---------------------------------------------------------------- story split (ref 2) */
.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .split--flip > :first-child { order: 2; }
}
.split__media { border-radius: var(--radius-lg); aspect-ratio: 4 / 5; }
@media (max-width: 899px) { .split__media { aspect-ratio: 4 / 3; } }
.split__media--wide { aspect-ratio: 3 / 2; }
.split__body { display: grid; gap: 1.4rem; align-content: start; }
.values { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--c-line); }
.values li { display: grid; grid-template-columns: 2.25rem 1fr; gap: .25rem 1rem; padding: 1.05rem 0; border-bottom: 1px solid var(--c-line); }
.values__n { font: 500 1.05rem/1.55 var(--font-body); font-variant-numeric: tabular-nums; color: var(--md-primary); }
.values h3 { font-size: 1.3rem; }
.values p { grid-column: 2; color: var(--c-muted); font-size: 1rem; }

/* ---------------------------------------------------------------- captioned image cards (ref 2 "accents") */
.cards { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .card__media { aspect-ratio: 16 / 10; } }
.card { display: grid; gap: 1rem; align-content: start; text-decoration: none; }
.card__media { border-radius: .75rem; aspect-ratio: 4 / 3; }
.card__media img { transition: transform .6s var(--ease); }
a.card:hover .card__media img { transform: scale(1.04); }
.card h3 { font-size: 1.45rem; }
.card p { color: var(--c-muted); font-size: 1rem; }

/* ---------------------------------------------------------------- parallax band (full-bleed background image) */
.band { position: relative; isolation: isolate; overflow: hidden; color: var(--md-inverse-on-surface); background: var(--md-inverse-surface); }
.band > .media { position: absolute; inset: 0; z-index: -1; background: var(--md-inverse-surface); }
.band > .media::after { content: ""; position: absolute; inset: 0; background: var(--band-scrim, linear-gradient(90deg, rgb(29 20 11 / .82), rgb(29 20 11 / .45) 60%, rgb(29 20 11 / .2))); }
.band__inner { padding-block: clamp(4rem, 12vw, 9.5rem); display: grid; gap: 1.5rem; }
.band blockquote { margin: 0; display: grid; gap: 1.25rem; max-width: 46rem; }
.band blockquote p { font: 400 clamp(1.9rem, 3.8vw, 3.2rem)/1.18 var(--font-display); color: var(--md-inverse-on-surface); }
.band cite { font-style: normal; color: #e6dccb; }
.band--cta { --band-scrim: linear-gradient(90deg, rgb(29 20 11 / .9), rgb(29 20 11 / .55) 55%, rgb(29 20 11 / .25)); }
.band--cta .band__inner { justify-items: start; }
.band--cta h2 { max-width: 40rem; }
.band--cta p { max-width: 36rem; color: #efe6d6; }
.band .btn-ghost { color: var(--md-inverse-on-surface); }
/* inner-page closings: full-bleed photo band, copy on the dark left side of the scrim */
.band--closing { --band-scrim: linear-gradient(90deg, rgb(29 20 11 / .9), rgb(29 20 11 / .82) 50%, rgb(29 20 11 / .6)); }
.band--closing .band__inner { justify-items: start; padding-block: clamp(4.5rem, 11vw, 8.5rem); }
.band--closing h2 { max-width: 34rem; } .band--closing .lede { max-width: 36rem; color: #efe6d6; }
@media (max-width: 699px) { .band, .band--closing, .band--cta { --band-scrim: rgb(29 20 11 / .84); } }
.band__facts { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; color: #e6dccb; font-size: .98rem; }

/* ---------------------------------------------------------------- title block (project captions) */
.titleblock {
  display: grid; grid-template-columns: max-content 1fr; margin: 0; border-top: 1.5px solid currentColor;
  font-size: .95rem;
}
.titleblock dt, .titleblock dd { margin: 0; padding: .6rem 0; border-bottom: 1px solid var(--c-line); }
.titleblock dt { padding-right: 1.25rem; font: 500 .75rem/1.9 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.titleblock dd { color: var(--c-text); }
.on-night .titleblock dt, .on-night .titleblock dd { border-color: var(--md-outline-inverse); }
.on-night .titleblock dt { color: var(--md-inverse-on-surface-variant); }
.on-night .titleblock dd { color: var(--md-inverse-on-surface); }

/* ---------------------------------------------------------------- featured work (home) */
.work { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.work__item { display: grid; gap: 1.5rem 3.5rem; align-items: start; }
.work__media { border-radius: var(--radius-lg); aspect-ratio: 3 / 2; }
.work__body { display: grid; gap: 1.1rem; }
.work__body h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
@media (min-width: 900px) {
  .work__item { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- process (numbered, no icon tiles) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem; } }
.steps li { display: grid; gap: .75rem; align-content: start; padding: 1.25rem 0; border-top: 1.5px solid var(--md-outline-inverse); }
@media (min-width: 900px) { .steps li { padding-block: 1.5rem; } }
@media (max-width: 599px) { .values li { padding-block: .85rem; } }
.steps__n { font: 400 2.25rem/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--md-primary-container); }
.steps h3 { font-size: 1.4rem; color: var(--md-inverse-on-surface); }
.steps p { color: var(--md-inverse-on-surface-variant); font-size: 1rem; }

/* ---------------------------------------------------------------- page header (inner pages) */
.page-head { position: relative; isolation: isolate; overflow: hidden; color: var(--md-inverse-on-surface); background: var(--md-inverse-surface); }
.page-head > .media { position: absolute; inset: 0; z-index: -1; background: var(--md-inverse-surface); }
.page-head > .media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(29 20 11 / .6) 0%, rgb(29 20 11 / 0) calc(var(--header-h) + 3rem)),  /* behind the floating header */
    var(--band-scrim, linear-gradient(90deg, rgb(29 20 11 / .85), rgb(29 20 11 / .5) 55%, rgb(29 20 11 / .15))); }
.page-head__inner { display: grid; gap: 1.1rem; width: min(100% - 2 * var(--header-gutter), var(--container)); margin-inline: auto;
  padding-block: calc(var(--header-h) + clamp(4rem, 11vw, 8rem)) calc(var(--wave-h) + clamp(2rem, 4vw, 3.5rem)); }
.page-head__inner > * { max-width: 46rem; }
.page-head p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: #efe6d6; }

/* ---------------------------------------------------------------- services page */
.service-list { display: grid; gap: 0; border-top: 1.5px solid var(--c-text); }
.service { display: grid; gap: .9rem 3rem; padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--c-line); }
.service h2, .service h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.service { scroll-margin-top: calc(var(--header-h) + 1rem); }
.service__body { display: grid; gap: .9rem; color: var(--c-muted); }
.service__body ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
@media (min-width: 900px) { .service { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }

.scope { columns: 2 12rem; column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.scope li { break-inside: avoid; padding: .55rem 0; border-bottom: 1px solid var(--c-line); }

.faq { display: grid; gap: 0; border-top: 1.5px solid var(--c-text); }
.faq details { border-bottom: 1px solid var(--c-line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; list-style: none;
  padding: 1.2rem 0; font: 400 clamp(1.2rem, 1.8vw, 1.4rem)/1.3 var(--font-display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 300 1.6rem/1 var(--font-body); color: var(--md-primary); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 1.4rem; color: var(--c-muted); max-width: 46rem; }
.faq details > div > * + * { margin-top: .8em; }

/* ---------------------------------------------------------------- gallery page */
.project { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding-block: var(--section); border-top: 1px solid var(--c-line); }
.project:first-of-type { border-top: 0; }
.project__head { display: grid; gap: 1.25rem 4rem; }
@media (min-width: 900px) { .project__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.project__intro { display: grid; gap: 1rem; }
.mosaic { display: grid; gap: clamp(.6rem, 1.2vw, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaic figure { margin: 0; display: grid; gap: .5rem; }
.mosaic .media { border-radius: .75rem; aspect-ratio: 3 / 2; }
.mosaic figcaption { font-size: .9rem; color: var(--c-muted); }
.mosaic .is-wide { grid-column: 1 / -1; }
.mosaic .is-wide .media { aspect-ratio: 16 / 9; }
.mosaic .is-tall .media { aspect-ratio: 4 / 5; }
@media (min-width: 900px) {
  .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaic .is-wide { grid-column: span 2; }
  .mosaic .is-wide .media { aspect-ratio: auto; height: 100%; min-height: 100%; }
  .mosaic .is-tall { grid-row: span 2; }
  .mosaic .is-tall .media { aspect-ratio: auto; height: 100%; }
}
@media (max-width: 599px) {
  .mosaic { grid-template-columns: 1fr; }
}
.also { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .also { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
.also article { display: grid; gap: .9rem; align-content: start; padding: 1.75rem; background: var(--md-surface-bright); border: 1px solid var(--c-line); border-radius: .75rem; }

/* ---------------------------------------------------------------- forms */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 500; }
.field__hint { font-weight: 400; color: var(--c-muted); }
.field .hint-req, .field.is-required .hint-opt { display: none; }
.field.is-required .hint-req { display: inline; }
.form__demo { padding: .85rem 1.1rem; border: 1px solid var(--c-line); border-radius: var(--radius); color: var(--c-text); background: var(--md-surface-bright); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 3rem; padding: .7rem .85rem; border: 1px solid #cbbda6; border-radius: var(--radius);
  background: var(--md-surface-bright); color: var(--c-text); font: inherit;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 0; border-color: var(--md-primary); }
.form__next { color: var(--c-muted); padding: 1rem 1.1rem; background: var(--md-surface-container); border-radius: var(--radius); }
.form__status:empty { display: none; }
.form__status[data-kind="error"] { color: var(--c-error); }
.form__status[data-kind="ok"] { color: var(--c-ok); }
.btn-submit { justify-self: start; }

/* ---------------------------------------------------------------- contact (phone before form on mobile) */
.contact { display: grid; gap: clamp(2rem, 5vw, 4.5rem); padding-block: var(--section); }
.contact__quick { display: grid; gap: 1.5rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); border-radius: var(--radius-lg); }
.contact__quick h2 { font-size: 1.9rem; }
.contact__quick p { color: var(--md-inverse-on-surface-variant); }
.contact__quick .btn-call { background: var(--md-primary-container); color: var(--md-on-primary-container); justify-self: start; }
.contact__quick .contact-list a { text-decoration: none; }
.contact__quick .contact-list a:hover span { text-decoration: underline; }
.contact__quick .hours dt { color: var(--md-inverse-on-surface-variant); }
.contact__form-wrap { display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 900px) {
  .contact { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); align-items: start; }
  .contact__quick { position: sticky; top: calc(var(--header-h) + 1rem); }
}

/* ---------------------------------------------------------------- footer */
.site-footer { padding-block: clamp(3.5rem, 7vw, 5rem) 1.75rem; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); }
.site-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer__brand { display: grid; gap: 1rem; align-content: start; }
.site-footer__brand img { width: 3.25rem; }
.site-footer__brand p { color: var(--md-inverse-on-surface-variant); max-width: 20rem; }
.site-footer__name { margin: 0; font: 400 1.5rem/1.2 var(--font-display); }
.site-footer__heading { margin: 0 0 1rem; color: var(--md-inverse-on-surface-variant); }
.site-footer__heading--gap { margin-top: 1.75rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .3em; }
.site-footer .hours dt { color: var(--md-inverse-on-surface-variant); }
.site-footer nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--md-outline-inverse); color: var(--md-inverse-on-surface-variant); font-size: .9rem; }

/* ---------------------------------------------------------------- 404 */
.notfound { display: grid; gap: 1.25rem; justify-items: start; padding-block: var(--section); }
.notfound p { color: var(--c-muted); max-width: 36rem; }

/* ---------------------------------------------------------------- inner-page pieces */
.section--closing { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem); }
.closing { display: grid; gap: 1.25rem; justify-items: start; }
.closing.on-night { padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4.5vw, 3.75rem); border-radius: var(--radius-lg); }
.page-head--busy { --band-scrim: linear-gradient(90deg, rgb(29 20 11 / .9), rgb(29 20 11 / .72) 55%, rgb(29 20 11 / .35)); }
/* on phones the copy runs the full width, so the scrim can't fade out to the right */
@media (max-width: 699px) { .page-head, .page-head--busy { --band-scrim: linear-gradient(90deg, rgb(29 20 11 / .86), rgb(29 20 11 / .78)); } }
.closing h2 { max-width: 34rem; }
.closing .lede { max-width: 36rem; }
.on-night .btn-ghost { color: var(--md-inverse-on-surface); }
.split--top { align-items: start; }
.titleblock--regions { font-size: 1rem; }
.titleblock--regions dt { padding-right: 2.5rem; }
.project__figure { margin: 0; display: grid; gap: .5rem; }
.project__figure .media { border-radius: var(--radius-lg); aspect-ratio: 3 / 2; max-width: 60rem; }
.project__figure--tall .media { aspect-ratio: 4 / 5; max-width: 34rem; }
.project__figure figcaption { font-size: .9rem; color: var(--c-muted); }
.project > h2 { margin-bottom: .5rem; }
/* GIC board shown as two logo-free crops; capped so the 921px source isn't upscaled past 1.3x */
.board { display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); max-width: 52rem; }
.board figure { margin: 0; display: grid; gap: .5rem; }
.board figcaption { font-size: .9rem; color: var(--c-muted); }
.board .media { border-radius: .75rem; }
.board__main { aspect-ratio: 689 / 312; }
.board__strip { aspect-ratio: 921 / 249; }
/* one portrait image: image and text side by side instead of a lone image under the head */
@media (min-width: 900px) {
  .project--single { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: start; }
  .project--single .project__head { grid-template-columns: 1fr; }
  .project--single .project__figure .media { max-width: none; }
  .project--flip > .project__figure { order: -1; }
  .mosaic .is-wide { grid-row: span 2; }
}
.contact__area { font-size: .95rem; }
.contact__form-wrap h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); }

/* ---------------------------------------------------------------- motion
   Reveals use transform + opacity only, and only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.is-in) { opacity: 0; transform: translateY(1.25rem); }
  .js .reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .media > img[data-parallax] { transform: none !important; height: 100%; }
}