/* Durak Homes — assets/style.css
   ---------------------------------------------------------------------------
   Material Design 3 foundations, in plain CSS, with no JavaScript anywhere.

   What is Material here: the tonal surface system (surface / surface-container /
   -low / -high / -highest instead of drop shadows for hierarchy), the MD3 colour
   roles and their -container / on- pairs, the MD3 type scale (display / headline /
   title / body / label), state layers on every interactive element, the 4dp
   spacing grid, and 48dp minimum touch targets throughout.

   What is deliberately not stock Material: the palette, the typefaces, and the
   fact that the hi-vis amber is reserved exclusively for conversion actions.
   Roboto + purple would make this look like every Material template on the web.

   Colour reasoning. Primary is a deep pine — trades, Pacific Northwest, and dark
   enough to hold white text at any size. The call-to-action colour is a hi-vis
   amber taken from site signage and safety equipment, used on exactly two things:
   the call button and the estimate button. Because it appears nowhere else, the
   eye finds the conversion action instantly on any screen.
   --------------------------------------------------------------------------- */

:root {
  /* --- MD3 colour roles ------------------------------------------------ */
  --primary:            #0e5544;
  --on-primary:         #ffffff;
  --primary-container:  #c8ebda;
  --on-primary-container:#00201700;   /* overridden below; kept for role completeness */
  --primary-hover:      #14705a;

  --secondary:          #47635a;
  --on-secondary:       #ffffff;
  --secondary-container:#dde9e2;
  --on-secondary-container:#0a2019;

  /* Conversion accent. Amber #ffb020 carries near-black text at 10.4:1. */
  --cta:                #ffb020;
  --on-cta:             #1f1400;
  --cta-hover:          #ffc04d;

  --surface:            #fbfcfa;
  --surface-container-low:  #f4f7f3;
  --surface-container:      #eef2ec;
  --surface-container-high: #e7ece5;
  --surface-container-highest:#e0e6de;
  --on-surface:         #171d1a;
  --on-surface-variant: #48544e;
  --outline:            #78857e;
  --outline-variant:    #c8d1cb;

  --inverse-surface:    #121815;
  --on-inverse-surface: #e4eae4;

  --error:              #a3311d;

  --star:               #e8a020;

  /* --- type ------------------------------------------------------------ */
  --display-face: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body-face: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- shape (MD3 corner scale) ---------------------------------------- */
  --r-xs: 4px;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-xl: 28px;
  --r-full: 999px;

  /* --- elevation ------------------------------------------------------- */
  --e1: 0 1px 2px rgba(16, 30, 24, .09), 0 1px 3px 1px rgba(16, 30, 24, .06);
  --e2: 0 1px 2px rgba(16, 30, 24, .10), 0 2px 6px 2px rgba(16, 30, 24, .07);
  --e3: 0 4px 8px 3px rgba(16, 30, 24, .08), 0 1px 3px rgba(16, 30, 24, .12);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(3.25rem, 8vw, 6rem);

  /* Height of the mobile action bar, so page content can clear it. */
  --actionbar: 4.5rem;
}

:root { --on-primary-container: #002017; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--body-face);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 899px) {
  body { padding-bottom: var(--actionbar); }
}

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

a { color: var(--primary); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); }

:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); }

/* ---------- MD3 type scale ---------- */

h1, h2, h3, h4 {
  font-family: var(--display-face);
  font-variation-settings: "wdth" 105;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0 0 .5em;
  color: var(--on-surface);
}
/* display-large */
h1 { font-size: clamp(2.35rem, 6.4vw, 3.9rem); line-height: 1.06; letter-spacing: -0.03em; }
/* headline-large */
h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); letter-spacing: -0.025em; }
/* headline-small */
h3 { font-size: clamp(1.15rem, 2.1vw, 1.4rem); line-height: 1.22; }
/* title-medium */
h4 { font-size: 1.02rem; line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; max-width: 66ch; }
p:last-child { margin-bottom: 0; }

/* body-large */
.lede {
  font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.5;
  max-width: 56ch; color: var(--on-surface-variant);
}

/* label-large */
.label {
  font-family: var(--display-face); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; color: var(--primary);
}

/* ---------- layout ---------- */

.wrap { max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 46rem; margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--section); }

.tone-low  { background: var(--surface-container-low); }
.tone-mid  { background: var(--surface-container); }
.tone-dark { background: var(--inverse-surface); color: var(--on-inverse-surface); }
.tone-dark h1, .tone-dark h2, .tone-dark h3, .tone-dark h4 { color: #fff; }
.tone-dark .lede, .tone-dark p { color: #bccec6; }
.tone-dark .label { color: #7fd3b3; }
.tone-dark a { color: #7fd3b3; }

.split { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .split { grid-template-columns: 1.25fr 1fr; align-items: start; } }
@media (min-width: 900px) { .split-even { grid-template-columns: 1fr 1fr; align-items: center; } }
.split-even { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }

.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); }
.grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.stack > * + * { margin-top: 1rem; }
.mt { margin-top: clamp(1.75rem, 4vw, 2.75rem); }

/* ---------- skip link ---------- */

.skip {
  position: fixed; left: .5rem; top: -6rem; z-index: 200;
  background: var(--primary); color: var(--on-primary);
  padding: .85rem 1.25rem; border-radius: var(--r-s);
  font-family: var(--display-face); font-size: .85rem; font-weight: 600;
  transition: top .12s ease;
}
.skip:focus { top: .5rem; color: var(--on-primary); }

/* ---------- app bar ---------- */

.appbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(251, 252, 250, .94);
  border-bottom: 1px solid var(--outline-variant);
}
@supports (backdrop-filter: blur(12px)) { .appbar { backdrop-filter: blur(12px); } }
.appbar-in { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; }
.brand-mark {
  width: 2.25rem; height: 2.25rem; flex: none; border-radius: var(--r-s);
  background: var(--primary); color: var(--on-primary);
  display: grid; place-items: center;
  font-family: var(--display-face); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.03em;
}
.brand-name {
  font-family: var(--display-face); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -0.025em; color: var(--on-surface);
}

.nav { display: none; }
/* Scoped to .appbar so it outranks `.btn { display: inline-flex }`, which is a
   later rule of equal specificity. The full phone number will not shrink, so
   leaving this visible below 900px pushed the document wider than the viewport
   and clipped every section under it. The sticky action bar covers mobile. */
.appbar .nav-call { display: none; }
@media (min-width: 900px) {
  .nav { display: flex; align-items: center; gap: .25rem; }
  .appbar .nav-call { display: inline-flex; }
  .menu { display: none !important; }
}
.nav a {
  font-family: var(--display-face); font-size: .84rem; font-weight: 600;
  letter-spacing: -0.005em; color: var(--on-surface-variant); text-decoration: none;
  padding: .6rem .8rem; border-radius: var(--r-s);
  transition: background-color .12s ease, color .12s ease;
}
.nav a:hover { background: var(--surface-container); color: var(--on-surface); }
.nav a[aria-current="page"] { color: var(--primary); background: var(--primary-container); }

/* mobile menu — a native <details>, so it works with JavaScript disabled */
.menu { position: relative; }
.menu summary {
  list-style: none; cursor: pointer;
  min-width: 48px; min-height: 48px;
  display: grid; place-items: center; border-radius: var(--r-full);
  color: var(--on-surface-variant);
  transition: background-color .12s ease;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--surface-container); }
.menu[open] summary { background: var(--primary-container); color: var(--on-primary-container); }
.menu summary svg { width: 24px; height: 24px; }
.menu-sheet {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 70;
  min-width: 15rem; padding: .5rem;
  background: var(--surface-container-low); border: 1px solid var(--outline-variant);
  border-radius: var(--r-l); box-shadow: var(--e3);
}
.menu-sheet a {
  display: block; padding: .85rem 1rem; border-radius: var(--r-s);
  font-family: var(--display-face); font-size: .95rem; font-weight: 600;
  color: var(--on-surface); text-decoration: none;
}
.menu-sheet a:hover { background: var(--surface-container-high); }

/* ---------- buttons (MD3 filled / tonal / outlined / text) ---------- */

.btn {
  max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.5rem;
  border: 1px solid transparent; border-radius: var(--r-full);
  font-family: var(--display-face); font-size: .92rem; font-weight: 700;
  letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: background-color .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }

/* Reserved for conversion actions only. Nothing else on the site is amber. */
.btn-cta { background: var(--cta); color: var(--on-cta); box-shadow: var(--e1); }
.btn-cta:hover { background: var(--cta-hover); color: var(--on-cta); box-shadow: var(--e2); }

.btn-filled { background: var(--primary); color: var(--on-primary); }
.btn-filled:hover { background: var(--primary-hover); color: var(--on-primary); box-shadow: var(--e1); }

.btn-tonal { background: var(--primary-container); color: var(--on-primary-container); }
.btn-tonal:hover { background: #b6e2ce; color: var(--on-primary-container); box-shadow: var(--e1); }

.btn-outlined { background: transparent; color: var(--primary); border-color: var(--outline); }
.btn-outlined:hover { background: var(--surface-container); color: var(--primary); }

/* Any dark ground, not just .tone-dark — the hero is its own class and was missed. */
.tone-dark .btn-outlined, .hero .btn-outlined { color: #fff; border-color: rgba(255,255,255,.55); }
.tone-dark .btn-outlined:hover, .hero .btn-outlined:hover { background: rgba(255,255,255,.12); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 460px) { .btn-row .btn { flex: 1 1 100%; } }

/* ---------- sticky mobile action bar ---------- */
/* The single highest-impact conversion element on a trades site: the phone number
   is inside the thumb's reach on every screen, on every page, always. */

.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; gap: .6rem; padding: .6rem var(--gutter);
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 252, 250, .96);
  border-top: 1px solid var(--outline-variant);
}
@supports (backdrop-filter: blur(12px)) { .actionbar { backdrop-filter: blur(12px); } }
.actionbar .btn { flex: 1; padding-inline: .75rem; font-size: .88rem; }
@media (min-width: 900px) { .actionbar { display: none; } }

/* ---------- hero ---------- */

.hero { position: relative; background: var(--inverse-surface); color: var(--on-inverse-surface); }
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,18,15,.14) 0%, rgba(10,18,15,.26) 55%, rgba(10,18,15,.60) 100%),
    linear-gradient(90deg, rgba(10,18,15,.74) 0%, rgba(10,18,15,.26) 60%, rgba(10,18,15,.06) 100%);
}
.hero-in {
  position: relative; z-index: 1;
  padding-block: clamp(3rem, 9vw, 6.5rem);
  max-width: 44rem;
}
.hero h1 { color: #fff; }
.hero .lede { color: #d3e0da; max-width: 40ch; }

/* Rating chip. Light ground is the default because most pages that carry it are
   light; the hero overrides for its dark photograph. Never define this only once. */
.rating {
  display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  background: var(--surface-container); border: 1px solid var(--outline-variant);
  border-radius: var(--r-full); padding: .5rem .95rem; margin-bottom: 1.5rem;
  font-size: .9rem; color: var(--on-surface-variant); max-width: 100%;
}
.rating .stars { color: var(--star); letter-spacing: .06em; font-size: 1rem; line-height: 1; }
.rating b { color: var(--on-surface); }
.rating a { color: var(--primary); }

.hero .rating {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.26); color: #eaf2ee;
}
.hero .rating b { color: #fff; }
.hero .rating a { color: #eaf2ee; text-decoration: underline; }

/* ---------- promise strip ---------- */

.promises {
  display: grid; gap: 1px; background: var(--outline-variant);
  border-block: 1px solid var(--outline-variant);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.promises > div { background: var(--surface); padding: 1.35rem var(--gutter); }
.promises dt {
  font-family: var(--display-face); font-size: .95rem; font-weight: 700;
  letter-spacing: -0.015em; margin-bottom: .2rem; color: var(--on-surface);
}
.promises dd { margin: 0; font-size: .92rem; color: var(--on-surface-variant); line-height: 1.45; }

/* ---------- cards ---------- */

.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-container-low); border-radius: var(--r-l);
  color: inherit; text-decoration: none;
  transition: box-shadow .16s ease, transform .16s ease, background-color .16s ease;
}
a.card:hover { background: var(--surface-container); box-shadow: var(--e2); transform: translateY(-2px); }
.card-media { aspect-ratio: 3 / 2; background: var(--surface-container-high); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 1.15rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.card-body h3 { margin-bottom: .4rem; }
.card-body p { font-size: .95rem; color: var(--on-surface-variant); margin: 0; }
.card-meta {
  margin-top: auto; padding-top: 1rem;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface-container-high); color: var(--on-surface-variant);
  border-radius: var(--r-s); padding: .3rem .6rem;
  font-family: var(--display-face); font-size: .72rem; font-weight: 600;
}
a.card .card-arrow {
  margin-top: .9rem; font-family: var(--display-face); font-size: .85rem;
  font-weight: 700; color: var(--primary);
}

/* ---------- review cards ---------- */

.review {
  background: var(--surface-container-low); border-radius: var(--r-l);
  padding: 1.4rem 1.5rem; display: flex; flex-direction: column;
}
.tone-dark .review { background: rgba(255,255,255,.06); }
.review .stars { color: var(--star); font-size: 1.05rem; letter-spacing: .1em; line-height: 1; margin-bottom: .8rem; }
.review blockquote { margin: 0 0 1.1rem; font-size: 1.02rem; line-height: 1.55; }
.tone-dark .review blockquote { color: #dfe9e4; }
.review figcaption { margin-top: auto; font-size: .86rem; color: var(--on-surface-variant); }
.tone-dark .review figcaption { color: #9db3aa; }
.review figcaption b { font-family: var(--display-face); color: var(--on-surface); font-weight: 700; }
.tone-dark .review figcaption b { color: #fff; }

/* ---------- owner ---------- */

.project + .project {
  margin-top: clamp(3rem, 7vw, 5rem);
  padding-top: clamp(3rem, 7vw, 5rem);
  border-top: 1px solid var(--outline-variant);
}
.project > .grid { align-items: start; }

.owner-photo { border-radius: var(--r-l); overflow: hidden; }
.owner-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.signature {
  font-family: var(--display-face); font-size: .9rem; font-weight: 700;
  color: var(--primary); margin-top: 1.25rem;
}

/* ---------- spec rows ---------- */

.spec { margin: 0; }
.spec > div {
  display: grid; gap: .3rem; padding: 1.15rem 0;
  border-bottom: 1px solid var(--outline-variant);
}
.spec > div:first-child { border-top: 1px solid var(--outline-variant); }
@media (min-width: 720px) { .spec > div { grid-template-columns: 15rem 1fr; gap: 2rem; } }
.spec dt { font-family: var(--display-face); font-size: .95rem; font-weight: 700; letter-spacing: -0.015em; }
.spec dd { margin: 0; color: var(--on-surface-variant); font-size: .97rem; }
.spec dd p { margin: 0; }

/* ---------- panel ---------- */

.panel { background: var(--surface-container); border-radius: var(--r-l); padding: clamp(1.25rem, 3vw, 1.75rem); }
.panel-primary { background: var(--primary); color: #dff2e9; }
.panel-primary h2, .panel-primary h3, .panel-primary .panel-h { color: #fff; }
.panel-primary a { color: #ffe9bd; }
.panel-h { font-family: var(--display-face); font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 .75rem; }
.panel p { font-size: .95rem; }
.panel .spec > div:first-child { border-top: 0; padding-top: 0; }
.panel .spec > div:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 720px) { .panel .spec > div { grid-template-columns: 1fr; gap: .2rem; } }

/* ---------- tick list ---------- */

.ticks { list-style: none; margin: 0 0 1rem; padding: 0; }
.ticks li { position: relative; padding-left: 1.85rem; margin-bottom: .65rem; font-size: .96rem; color: var(--on-surface-variant); }
.ticks li:last-child { margin-bottom: 0; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 1.15rem; height: 1.15rem; border-radius: var(--r-full);
  background: var(--primary-container);
}
.ticks li::after {
  content: ""; position: absolute; left: .35rem; top: .62em;
  width: .42rem; height: .22rem; border-left: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary); transform: rotate(-45deg);
}
.panel-primary .ticks li { color: #dff2e9; }
.panel-primary .ticks li::before { background: rgba(255,255,255,.18); }
.panel-primary .ticks li::after { border-color: #fff; }

/* ---------- steps ---------- */

.steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.steps > li {
  counter-increment: step; position: relative;
  background: var(--surface-container-low); border-radius: var(--r-l);
  padding: 1.25rem 1.4rem 1.25rem 4.25rem;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 1.25rem; top: 1.25rem;
  width: 2.25rem; height: 2.25rem; border-radius: var(--r-full);
  background: var(--primary-container); color: var(--on-primary-container);
  display: grid; place-items: center;
  font-family: var(--display-face); font-size: .85rem; font-weight: 700;
}
.steps h3 { font-size: 1.05rem; margin: 0 0 .3rem; }
.steps p { margin: 0; font-size: .95rem; color: var(--on-surface-variant); }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: .6rem; }
.faq details {
  background: var(--surface-container-low); border-radius: var(--r-m);
  overflow: hidden;
}
.faq details[open] { background: var(--surface-container); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.1rem 3.25rem 1.1rem 1.25rem; min-height: 48px;
  font-family: var(--display-face); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.015em; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.35rem; top: 1.45rem;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
  transform: rotate(45deg); transition: transform .15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.faq details > div { padding: 0 1.25rem 1.25rem; }
.faq details > div p { color: var(--on-surface-variant); font-size: .97rem; }

/* ---------- figures ---------- */

figure { margin: 0; }
figure img { border-radius: var(--r-l); }
figcaption { font-size: .85rem; color: var(--on-surface-variant); margin-top: .6rem; }
.figure-wide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.figure-tall img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- breadcrumb ---------- */

.crumb { padding-top: 1.1rem; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.crumb li { font-size: .84rem; color: var(--on-surface-variant); }
.crumb li + li::before { content: "›"; margin-right: .4rem; color: var(--outline); }
.crumb a { color: var(--on-surface-variant); text-decoration: none; }
.crumb a:hover { color: var(--primary); }

/* ---------- notice ---------- */

.notice {
  background: var(--secondary-container); color: var(--on-secondary-container);
  border-radius: var(--r-m); padding: 1.1rem 1.25rem;
}
.notice p { font-size: .94rem; margin-bottom: .6rem; }

/* ---------- area chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.chips li {
  border: 1px solid var(--outline-variant); border-radius: var(--r-s);
  padding: .5rem .85rem; font-size: .88rem; color: var(--on-surface-variant);
  background: var(--surface);
}

/* ---------- forms (MD3 filled text fields) ---------- */

.form { display: grid; gap: 1.15rem; max-width: 34rem; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1.15rem; }
fieldset[disabled] { opacity: .6; }
.field { display: grid; gap: .35rem; }
.field label {
  font-family: var(--display-face); font-size: .85rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--on-surface);
}
.field label em { font-style: normal; font-weight: 500; color: var(--on-surface-variant); }
.field .hint { font-size: .87rem; color: var(--on-surface-variant); margin: 0; }
input, select, textarea {
  font-family: var(--body-face); font-size: 1rem; color: var(--on-surface);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant); border-radius: var(--r-s);
  padding: .85rem .95rem; width: 100%; min-height: 48px;
}
input:hover, select:hover, textarea:hover { background: var(--surface-container); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); border-width: 2px; padding: calc(.85rem - 1px) calc(.95rem - 1px); }
textarea { resize: vertical; min-height: 8.5rem; }
.field-legend {
  font-family: var(--display-face); font-size: .85rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--on-surface);
}
.field-legend em { font-style: normal; font-weight: 500; color: var(--on-surface-variant); }
.file-row { display: block; }
.file-row + .file-row { margin-top: .5rem; }

.form-pair { display: grid; gap: 1.15rem; }
@media (min-width: 620px) { .form-pair { grid-template-columns: 1fr 1fr; } }

/* ---------- footer ---------- */

.foot { background: var(--inverse-surface); color: #9db3aa; padding-block: clamp(2.75rem, 6vw, 4rem) 2rem; }
.foot h2 { color: #fff; font-family: var(--display-face); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin-bottom: .9rem; }
.foot a { color: #cddcd5; text-decoration: none; }
.foot a:hover { color: #7fd3b3; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: .45rem; font-size: .95rem; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.foot-base {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.13);
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .84rem; color: #83988f;
}
.foot-base ul { display: flex; gap: 1.25rem; }
.foot-base li { margin: 0; font-size: .84rem; }

/* ---------- small utilities ---------- */
/* These exist so that no element carries a style="" attribute, which lets the
   Content-Security-Policy in site/_headers ban inline styles outright instead of
   weakening style-src with 'unsafe-inline'. build/validate.py enforces it. */

.pt-page   { padding-top: 2rem; }
.pt0       { padding-top: 0; }
.pb0       { padding-bottom: 0; }
.mb-l      { margin-bottom: 1.5rem; }
.self-center { align-self: center; }
.meta-row  { margin: 0 0 1.25rem; }
.note      { font-size: .95rem; color: var(--on-surface-variant); }
.foot-blurb { font-size: .95rem; color: #9db3aa; }
.foot-areas { font-size: .86rem; color: #6f847b; margin-top: 2rem; max-width: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }