/* ============================================================================
   Supreme Construction — design system
   MONOCHROME BY DESIGN. Manuel, 2026-09-08: "i use black and white".
   All chrome is ink, paper and grey. The job photos supply the only color, which
   is why stamped concrete browns and grays read so hard against this frame.

   CASCADE WARNING, read before appending anything to this file.
   A base rule appended at the END of this file beats an EARLIER @media rule of
   equal specificity, even at mobile width, because later-in-file wins. That is
   exactly how the invisible-hamburger bug shipped on a 2026-07-09 build.
   If you append a rule for an element with responsive display behavior, re-declare
   its mobile state inside a media query in the same appended block, and check the
   winning declaration at 390px in the BUILT css before pushing.
   ========================================================================== */

:root {
  --ink: #0E0E0F;
  --ink-soft: #1C1C1F;
  --paper: #FFFFFF;
  --paper-2: #F7F7F6;
  --paper-3: #EFEFED;
  --line: #E3E3E0;
  --muted: #6C6C71;
  --muted-2: #6E6E75; /* was #8E8E93, only 3.26:1 on white. Small text needs 4.5. */

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(14,14,15,.06), 0 2px 8px rgba(14,14,15,.04);
  --shadow-md: 0 2px 6px rgba(14,14,15,.07), 0 12px 32px rgba(14,14,15,.08);
  --shadow-lg: 0 8px 24px rgba(14,14,15,.10), 0 24px 64px rgba(14,14,15,.12);

  --wrap: 1180px;
  --gut: 24px;

  --f-head: 'Sora', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-head);
  color: var(--ink);
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 .5em;
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--muted-2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }

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

/* Every inline-SVG context gets an explicit size. An unconstrained breadcrumb SVG
   rendered as a giant arrow across twelve pages on a 2026-06-28 build. */
svg { width: 20px; height: 20px; flex: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 780px; }

.eyebrow {
  font-family: var(--f-head);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .9rem;
}

.lede { font-size: 1.16rem; color: var(--muted); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: .97rem;
  letter-spacing: -0.01em;
  padding: .95rem 1.6rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: #000; color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--onphoto { background: var(--paper); color: var(--ink); }
.btn--onphoto:hover { background: var(--paper); color: var(--ink); }
.btn--onphoto-ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.7); }
.btn--onphoto-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--wide { width: 100%; }

/* ----------------------------------------------------------------- header */
header.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: 1.5rem; height: 74px; }

/* Wordmark stands in for a logo. Manuel has none, deliberately, see client-profile.md. */
.wordmark { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.wordmark b {
  font-family: var(--f-head);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: uppercase;
}
.wordmark span {
  font-family: var(--f-head);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .32rem;
}

.menu { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.menu > li { list-style: none; position: relative; }
.menu a:not(.btn) {
  display: block;
  font-family: var(--f-head);
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: .6rem .85rem;
  border-radius: var(--r-sm);
}
.menu a:not(.btn):hover { background: var(--paper-2); color: var(--ink); }
.menu > li > ul {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 246px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: .4rem;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.menu > li:hover > ul, .menu > li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.menu > li > ul li { list-style: none; }
.nav__cta { margin-left: .6rem; }

.hamb {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamb span { display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
header.nav.open .hamb span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.nav.open .hamb span:nth-child(2) { opacity: 0; }
header.nav.open .hamb span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ------------------------------------------------------------------- hero */
/* Hero background stays TRANSPARENT, the photo layer sits at z-index 0 and the
   content at z-index 1, and the container is NOT width-capped. All three are
   documented fixes; an 820px cap made this look smushed on an earlier build. */
.hero { position: relative; background: transparent; overflow: hidden; isolation: isolate; }
.hero__img {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center 30%;   /* keep the horizon and sky in frame */
  background-repeat: no-repeat;
  background-color: var(--ink);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, rgba(14,14,15,.90) 0%, rgba(14,14,15,.74) 45%, rgba(14,14,15,.28) 100%);
}
.hero__in {
  position: relative; z-index: 1;
  padding: clamp(3.4rem, 7vw, 5.4rem) 0 clamp(3.4rem, 7vw, 5.4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero__copy { max-width: 620px; }
.hero .eyebrow { color: rgba(255,255,255,.72); }
.hero h1 { color: var(--paper); }
.hero__sub { font-size: 1.19rem; color: rgba(255,255,255,.86); max-width: 560px; margin-bottom: 2rem; }
.hero__btns { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --------------------------------------------------------- hero form card */
.heroform {
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 2.6vw, 2rem);
  box-shadow: var(--shadow-lg);
}
/* Every color below is declared ON the card. The hero's own light-on-dark rules
   must never reach inside it. */
.heroform h2 { color: var(--ink); font-size: 1.45rem; margin-bottom: .35rem; }
.heroform p, .heroform label, .heroform .checkrow label { color: var(--ink-soft); }
.heroform .heroform__sub { color: var(--muted); font-size: .95rem; margin-bottom: 1.2rem; }
.heroform .field { margin-bottom: .75rem; }
.heroform .field label { font-size: .8rem; margin-bottom: .3rem; }
.heroform .field input, .heroform .field textarea { padding: .7rem .85rem; font-size: .95rem; }
.heroform .field textarea { min-height: 84px; }
.heroform .row { gap: .75rem; }
.heroform .checkrow { gap: 1rem; }
.heroform .checkrow label { font-size: .92rem; }
.heroform .disclaim { color: var(--muted-2); font-size: .78rem; margin-top: .85rem; }
.heroform .formdone { padding: 1rem .25rem; }
.heroform .formdone h3 { color: var(--ink); }
.heroform .formdone p { color: var(--muted); }

/* ------------------------------------------------------------------ bands */
.band { padding: clamp(3.4rem, 7vw, 6rem) 0; }
.band--tight { padding: clamp(2.4rem, 4.5vw, 3.6rem) 0; }
.band--paper2 { background: var(--paper-2); }
.band--ink { background: var(--ink); }
/* Component-scoped colors, never panel-level descendant rules. A .panel--dark p
   rule leaked into white cards nested on dark panels twice on a 2026-06-28 build
   and rendered them invisible. */
.band--ink h2, .band--ink h3 { color: var(--paper); }
.band--ink > .wrap > p, .band--ink .band__lede { color: rgba(255,255,255,.78); }
.band--ink .eyebrow { color: rgba(255,255,255,.6); }

.band__head { max-width: 720px; margin-bottom: 2.6rem; }
.band__head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ------------------------------------------------------------------ stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: var(--paper); padding: 1.9rem 1.5rem; text-align: center; }
.stat b { display: block; font-family: var(--f-head); font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.stat span { display: block; margin-top: .55rem; font-size: .89rem; color: var(--muted); }

/* ------------------------------------------------------------------ cards */
.grid { display: grid; gap: 1.15rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #CFCFCB; }
.card h3 { color: var(--ink); margin-bottom: .5rem; }
.card p { color: var(--muted); font-size: .97rem; margin-bottom: 1.1rem; }
.card__more { margin-top: auto; font-family: var(--f-head); font-weight: 600; font-size: .9rem; color: var(--ink); display: inline-flex; align-items: center; gap: .4rem; }
.card__more svg { width: 15px; height: 15px; }
a.card:hover .card__more svg { transform: translateX(3px); transition: transform .18s ease; }

.card--photo { padding: 0; overflow: hidden; }
.card--photo .card__ph { aspect-ratio: 4 / 3; background: var(--paper-3) center/cover no-repeat; }
.card--photo .card__body { padding: 1.4rem 1.5rem 1.6rem; }

/* number tiles for process steps */
/* auto-fit rather than a fixed 4, because service pages run 4 or 5 steps and a
   fixed grid left the fifth stranded alone on its own row. */
.steps { counter-reset: s; display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; }
.step b {
  counter-increment: s;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: .95rem;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-family: var(--f-head); font-size: .9rem; font-weight: 700;
}
.step b::before { content: counter(s); }
.step h3 { font-size: 1.06rem; margin-bottom: .4rem; }
.step p { color: var(--muted); font-size: .95rem; margin: 0; }

/* checklist */
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; grid-template-columns: repeat(2, 1fr); }
.checks li { display: flex; gap: .7rem; align-items: flex-start; font-size: 1rem; }
.checks svg { width: 19px; height: 19px; margin-top: 3px; color: var(--ink); }
.band--ink .checks li { color: rgba(255,255,255,.88); }
.band--ink .checks svg { color: var(--paper); }

/* ---------------------------------------------------------------- gallery */
/* Uniform grid on purpose. A feature tile spanning two rows at 1:1 never lines up
   with 4:3 neighbours, and the mismatch left dead white space between rows. Every
   tile is the same ratio so the grid is correct at any photo count. */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); }
/* 3:4 portrait, because ten of the eleven source photos are portrait. Cropping
   them into landscape tiles threw away most of every frame. */
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* -------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: .7rem; }
.faq details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.15rem 1.35rem;
}
.faq summary {
  cursor: pointer;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 1.03rem;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--muted); flex: none; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin-top: .85rem; color: var(--muted); font-size: .99rem; }

/* ------------------------------------------------------------------- form */
/* Lives in its OWN section, never inside the hero. A .hero p color rule bled into
   a form placed in the hero and washed the text out on an earlier build. */
.formsec { background: var(--paper-2); }
.formcard {
  max-width: 760px; margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 4vw, 3rem);
  box-shadow: var(--shadow-sm);
}
.formcard > h2 { text-align: center; }
.formcard__sub { text-align: center; color: var(--muted); max-width: 520px; margin: 0 auto 2rem; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-family: var(--f-head); font-size: .87rem; font-weight: 600; color: var(--ink); margin-bottom: .42rem; }
.field input, .field textarea {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--ink);
  padding: .85rem 1rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(14,14,15,.08); }
.field .opt { font-weight: 500; color: var(--muted-2); }

/* The global .field input{width:100%} above hits checkboxes and stretches them
   across the row. Scope it back out. Keep this style simple; the boxed variant
   broke on an earlier build. */
.checkrow { display: flex; flex-wrap: wrap; gap: 1.3rem; padding-top: .2rem; }
.checkrow label { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--f-body); font-weight: 500; font-size: .97rem; color: var(--ink-soft); margin: 0; cursor: pointer; }
.checkrow input { width: auto; margin: 0; accent-color: var(--ink); }

.formcard .btn--wide { margin-top: .6rem; }
.disclaim { text-align: center; font-size: .84rem; color: var(--muted-2); margin: 1.1rem 0 0; }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* Inline confirmation. NO thank-you page and no redirect on this site: that slug
   exists to give paid traffic a conversion URL and no ads run here (Spencer,
   2026-09-10). The form swaps its own contents for this instead. */
.formdone { text-align: center; padding: 1.5rem .5rem; }
.formdone svg { width: 46px; height: 46px; margin: 0 auto 1.1rem; color: var(--ink); }
.formdone h3 { font-size: 1.35rem; margin-bottom: .55rem; }
.formdone p { color: var(--muted); max-width: 430px; margin-left: auto; margin-right: auto; }
.formdone a { font-weight: 600; }

/* ---------------------------------------------------------------- callout */
.callout {
  background: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  text-align: center;
}
.callout h2 { color: var(--paper); margin-bottom: .7rem; }
.callout p { color: rgba(255,255,255,.78); max-width: 540px; margin: 0 auto 1.9rem; }
.callout .btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ------------------------------------------------------------- page hero */
.phero { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(2.2rem, 4vw, 3.2rem); }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muted); margin-bottom: 1.1rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.crumb svg { width: 13px; height: 13px; color: var(--muted-2); }
.phero h1 { margin-bottom: .6rem; }
.phero .lede { max-width: 680px; }

/* ------------------------------------------------------------------- prose */
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 1.8rem; }
.prose > :first-child { margin-top: 0; }
.prose ul { padding-left: 1.2rem; margin: 0 0 1.15em; }
.prose li { margin-bottom: .5rem; }

/* --------------------------------------------------------------- link rows */
.linkrow { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: repeat(3, 1fr); }
.linkrow a {
  display: block;
  font-family: var(--f-head);
  font-weight: 600;
  font-size: .97rem;
  color: var(--ink);
  text-decoration: none;
  padding: .95rem 1.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .16s ease, transform .16s ease;
}
.linkrow a:hover { border-color: var(--ink); transform: translateY(-2px); }

/* Prose on the dark band. Scoped ON the component, never inherited from the
   panel, which is how white cards on dark panels went invisible on an earlier
   build. */
.prose--ink p { color: rgba(255,255,255,.80); }
.prose--ink h2, .prose--ink h3 { color: var(--paper); }
.prose--ink strong { color: var(--paper); }
.prose--ink a { color: var(--paper); text-decoration-color: rgba(255,255,255,.55); }

/* ------------------------------------------------------------------ footer */
footer.ft { background: var(--ink); color: rgba(255,255,255,.72); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
footer.ft .wordmark b { color: var(--paper); }
footer.ft .wordmark span { color: rgba(255,255,255,.5); }
.ft__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; }
.ft__grid h4 { color: var(--paper); font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1rem; }
.ft__grid ul { list-style: none; padding: 0; margin: 0; }
.ft__grid li { margin-bottom: .55rem; }
.ft__grid a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .95rem; }
.ft__grid a:hover { color: var(--paper); }
.ft__blurb { font-size: .95rem; color: rgba(255,255,255,.66); margin: 1.1rem 0 0; max-width: 320px; }
.ft__bot { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .87rem; color: rgba(255,255,255,.55); }
.ft__bot a { color: rgba(255,255,255,.55); }

/* ------------------------------------------------------------ scroll reveal */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
  a.card:hover { transform: none; }
}

/* ============================================================== responsive */
@media (max-width: 1020px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .ft__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 860px) {
  /* Mobile nav, all three pieces. The HTML button and the toggle JS are the other
     two; see build.mjs. A 2026-07-09 build shipped CSS referencing a .hamb that
     was never in the markup, so phones had no navigation at all. */
  .hamb { display: flex; }
  .menu {
    display: none;
    position: absolute;
    top: 74px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: .6rem var(--gut) 1.3rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  header.nav.open .menu { display: flex; }
  .menu a { padding: .8rem .2rem; font-size: 1.02rem; }
  /* Submenus expand inline on touch. Hover submenus do not exist on a phone. */
  .menu > li > ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 0 0 .4rem .2rem;
    padding: 0 0 0 .8rem;
    min-width: 0;
  }
  .menu > li > ul a:not(.btn) { font-size: .95rem; color: var(--muted); padding: .55rem .2rem; }
  .nav__cta { display: none; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .linkrow { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .row { grid-template-columns: 1fr; gap: 0; }
  .hero__scrim { background: linear-gradient(180deg, rgba(14,14,15,.80) 0%, rgba(14,14,15,.88) 100%); }
  .hero__in { grid-template-columns: 1fr; gap: 2rem; }
  .hero__copy { max-width: none; }
  .ft__grid { grid-template-columns: 1fr; }
  body { font-size: 16px; }
}

@media (max-width: 480px) {
  :root { --gut: 18px; }
  .hero__btns .btn { width: 100%; }
  .linkrow { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
}