/* ==========================================================================
   Backyard Home / ADU Landing — Soloway & Sons + Leafstone Architecture
   Converted from the original single-file prototype to static HTML/CSS.
   ========================================================================== */

/* --- Fonts (latin + latin-ext subsets only; self-hosted) ----------------- */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/public-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/public-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design tokens ------------------------------------------------------- */
:root {
  --green: #1f3a2d;
  --green-dark: #16291f;
  --green-tint: #edefe8;
  --sage: #8fa189;
  --sage-light: #9db396;
  --bronze: #b5834f;

  --cream: #fffcf7;
  --cream-2: #faf6ee;
  --field-bg: #fffdfa;

  --line: #e7dfd1;
  --line-2: #e1d9ca;
  --field-line: #ddd5c6;

  --ink: #2b2926;
  --ink-2: #3a3833;
  --body: #4a473f;
  --muted: #5c574f;
  --muted-2: #6e685e;
  --muted-3: #7a746a;

  --on-dark: #f3f0e8;
  --on-dark-2: #d8dcd1;
  --on-dark-3: #a9b5a2;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1180px;
  --pad: 24px;
  --radius: 4px;
}

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

html {
  scroll-behavior: smooth;
  /* keep anchored sections clear of the sticky header */
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: var(--green); }
a:hover { color: var(--bronze); }

:focus-visible {
  outline: 3px solid var(--bronze);
  outline-offset: 2px;
}

/* --- Layout helpers ------------------------------------------------------ */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 96px var(--pad);
}
.shell--narrow { max-width: 900px; }
.rule-b { border-bottom: 1px solid var(--line); }
.bg-tint { background: var(--cream-2); }

.lede {
  max-width: 620px;
  color: var(--muted);
  font-size: 18px;
}

.eyebrow {
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6c7f66;
  margin-bottom: 22px;
}
.eyebrow--dark { color: var(--sage-light); margin-bottom: 20px; }

/* --- Typography ---------------------------------------------------------- */
.h1 {
  font: 400 clamp(38px, 5.2vw, 64px) / 1.08 var(--serif);
  color: var(--green);
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin-bottom: 24px;
}
.h2 {
  font: 400 clamp(29px, 3.6vw, 44px) / 1.15 var(--serif);
  color: var(--green);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin-bottom: 16px;
}
.h2--lg { font-size: clamp(32px, 4vw, 50px); line-height: 1.12; }
.h2--light { color: var(--cream); }
.h3 {
  font: 500 24px/1.25 var(--serif);
  color: var(--green);
  margin-bottom: 12px;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  font: 600 17px/1 var(--sans);
  text-decoration: none;
  padding: 18px 30px;
  border-radius: 3px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.btn--primary { background: var(--green); color: var(--cream); }
.btn--primary:hover { background: var(--green-dark); color: var(--cream); }
.btn--ghost {
  border-color: var(--green);
  color: var(--green);
  background: rgba(255, 252, 247, 0.6);
}
.btn--ghost:hover { background: var(--green-tint); color: var(--green); }
.btn--light { background: var(--cream); color: var(--green); }
.btn--light:hover { background: var(--green-tint); color: var(--green); }
.btn--sm { font-size: 16.5px; padding: 17px 28px; }
.btn--xs { font-size: 15px; padding: 13px 20px; white-space: nowrap; }
.btn[hidden] { display: none; }

/* --- Skip link ----------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
  text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; color: #fff; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 252, 247, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand__mark { width: 34px; height: 34px; flex: 0 0 auto; }
.brand__name {
  font: 500 19px/1.15 var(--serif);
  color: var(--green);
  letter-spacing: 0.01em;
}
.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav__link {
  font: 500 15px/1 var(--sans);
  color: #42403a;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
}
.nav__link:hover { color: var(--green); border-bottom-color: var(--bronze); }

/* --- Hero ---------------------------------------------------------------- */
.hero { position: relative; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 252, 247, 0.97) 0%,
    rgba(255, 252, 247, 0.93) 42%,
    rgba(255, 252, 247, 0.35) 70%,
    rgba(255, 252, 247, 0) 100%
  );
}
.hero__inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 96px var(--pad) 104px;
}
.hero__copy { max-width: 660px; }
.hero__sub {
  font-size: 19px;
  line-height: 1.62;
  color: var(--body);
  margin-bottom: 14px;
  max-width: 580px;
  text-wrap: pretty;
}
.hero__aka {
  font-size: 15px;
  color: var(--muted-2);
  margin-bottom: 32px;
  max-width: 560px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero__locale {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  font-size: 15px;
  color: var(--muted);
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sage);
  flex: 0 0 auto;
}

/* --- Use-case cards ------------------------------------------------------ */
.cards {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  margin-top: 52px;
}
.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(43, 41, 38, 0.04),
    0 10px 26px -22px rgba(43, 41, 38, 0.4);
}
/* A fixed pixel height made the crop depend on how wide the column happened to
   be, so the burned-in headline reappeared at some breakpoints. A locked aspect
   ratio keeps the proportion of the image that gets cropped constant at every
   width, which is what makes one scale value work everywhere. */
.card__media { aspect-ratio: 16 / 9; height: auto; overflow: hidden; }
.card__media img {
  width: 100%;
  height: 100%;
  /* The source art carries a burned-in headline across its top third, which
     would duplicate the card <h3> below. Anchoring the crop to the bottom and
     scaling up pushes that lettering out of frame. Replace these three
     declarations with `object-position: center` once clean art is supplied. */
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.14);
  transform-origin: center bottom;
}
.card__body { padding: 28px 28px 32px; }
.card__body p { color: var(--body); font-size: 16.5px; text-wrap: pretty; }

/* --- Split section (problem) --------------------------------------------- */
.split {
  display: grid;
  gap: 64px;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  align-items: center;
}
.split__media {
  position: relative;
  min-height: 440px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.split p { color: var(--body); font-size: 17.5px; }

.dashlist { display: grid; gap: 13px; margin: 24px 0 28px; }
.dashlist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--ink-2);
  font-size: 16.5px;
}
.dashlist li::before {
  content: '\2014';
  color: var(--sage);
  font-size: 19px;
  line-height: 1.35;
}

.pull {
  font: 400 22px/1.45 var(--serif);
  color: var(--green);
  border-left: 2px solid var(--bronze);
  padding-left: 20px;
  margin-bottom: 30px;
}

/* --- Assessment (dark) --------------------------------------------------- */
.assess { background: var(--green); color: var(--on-dark); }
.assess .shell { padding-bottom: 104px; }
.assess__intro { max-width: 720px; margin-bottom: 52px; }
.assess__intro p {
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--on-dark-2);
  text-wrap: pretty;
}
.assess__grid {
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.35fr);
  align-items: start;
}
.assess__h3 { font: 500 21px/1.3 var(--serif); color: var(--cream); margin-bottom: 22px; }
.checklist { display: grid; gap: 11px; margin-bottom: 26px; }
.checklist li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  color: var(--on-dark-2);
  font-size: 16px;
}
.checklist li::before { content: '\2022'; color: var(--sage); }
.disclaimer {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--on-dark-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 18px;
}

/* --- Form ---------------------------------------------------------------- */
.formcard {
  background: var(--cream);
  border-radius: 5px;
  padding: 36px;
  color: var(--ink);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.6);
}
.formcard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.formcard__head h3 { font: 500 26px/1.2 var(--serif); color: var(--green); }
.formcard__time { font-size: 13px; color: var(--muted-3); white-space: nowrap; }
.formcard__note { margin-bottom: 24px; font-size: 15px; color: var(--muted-2); }

.steps { display: flex; gap: 8px; margin-bottom: 28px; }
.steps li {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 3px;
  border: 1px solid var(--line-2);
  background: var(--cream-2);
  color: #8a8378;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.steps li[data-state='done'] {
  background: var(--green-tint);
  color: var(--green);
}
.steps li[data-state='active'] {
  background: var(--green);
  border-color: var(--green);
  color: var(--cream);
}

.panel {
  display: grid;
  gap: 18px;
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
.panel[hidden] { display: none; }
.panel > legend {
  font: 500 19px/1.3 var(--serif);
  color: var(--green);
  padding: 0;
  margin-bottom: 4px;
}

.row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.field > label,
.field > .label {
  display: block;
  font: 600 12.5px/1.4 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field .opt {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: #8a8378;
}
.field input[type='text'],
.field input[type='email'],
.field input[type='tel'],
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  background: var(--field-bg);
  font: 400 16px/1.4 var(--sans);
  color: var(--ink);
}
.field textarea { line-height: 1.5; resize: vertical; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235c574f' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 38px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(31, 58, 45, 0.14);
  outline: none;
}
.field input[type='file'] {
  width: 100%;
  padding: 14px;
  border: 1px dashed #c9c0af;
  border-radius: var(--radius);
  background: var(--cream-2);
  font: 400 15px/1.4 var(--sans);
  color: var(--body);
}
.hint { margin-top: 7px; font-size: 13.5px; color: var(--muted-3); }
.hint--ok { color: #3f5a48; margin-top: 8px; }

.consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
.consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--green); }
.consent label { font-size: 14.5px; line-height: 1.55; color: var(--body); }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formerror {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: #f7ede6;
  border: 1px solid #e0c4b0;
  color: #7a3b1e;
  font-size: 14.5px;
}
.formerror[hidden] { display: none; }

.formnav {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 26px;
}
.formnav .btn { font-size: 16px; }
.formnav .btn--ghost { padding: 14.5px 24px; background: transparent; }
.formnav .btn--primary { padding: 16px 28px; }
.stepcount { font-size: 13.5px; color: var(--muted-3); margin-left: auto; }

/* --- Process ------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  border-top: 1px solid var(--line);
  margin-top: 56px;
}
.process li {
  padding: 34px 28px 38px 0;
  border-top: 2px solid var(--green);
  margin-top: -1px;
}
.process li:last-child { padding-right: 0; }
.process__num {
  font: 600 12.5px/1 var(--sans);
  letter-spacing: 0.16em;
  color: var(--bronze);
}
.process h3 { font: 500 23px/1.25 var(--serif); color: var(--green); margin: 14px 0 10px; }
.process p { color: var(--body); font-size: 16.5px; }

/* --- Credentials --------------------------------------------------------- */
.creds {
  display: grid;
  gap: 56px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}
.creds p { font-size: 18px; color: var(--body); text-wrap: pretty; margin-bottom: 28px; }
.factlist { border-top: 1px solid var(--line-2); }
.factlist > div {
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
}
.factlist dt {
  font: 600 13px/1.5 var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.factlist dd { margin: 0; color: var(--body); font-size: 15.5px; }

.gallery__hero {
  position: relative;
  height: 300px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 16px;
}
.gallery__grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.gallery__grid > figure {
  position: relative;
  height: 130px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }

/* --- Closing CTA --------------------------------------------------------- */
.closer {
  background:
    radial-gradient(120% 140% at 12% 0%, #2a5040 0%, rgba(42, 80, 64, 0) 62%),
    linear-gradient(115deg, var(--green) 0%, #182e23 100%);
  color: var(--cream);
}
.closer .shell { padding: 104px var(--pad); }
.closer__copy { max-width: 700px; }
.closer h2 { font-size: clamp(30px, 3.9vw, 48px); line-height: 1.14; }
.closer p { margin-bottom: 34px; font-size: 19px; color: #dce1d6; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { margin-top: 44px; }
.faq details { border-top: 1px solid var(--line); padding: 20px 0; }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  font: 500 20px/1.4 var(--serif);
  color: var(--green);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green-dark); }
.faq summary::after {
  content: '+';
  color: var(--bronze);
  font-size: 18px;
  flex: 0 0 auto;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details p { margin-top: 14px; color: var(--body); max-width: 720px; }
.faq__foot {
  margin-top: 48px;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.faq__foot span { color: var(--muted-2); font-size: 15.5px; }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--green); color: #c9d2c3; }
.site-footer__grid {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 64px var(--pad) 32px;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
}
.site-footer h3 {
  font: 600 12.5px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 16px;
}
.site-footer p { font-size: 15px; margin-bottom: 8px; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: #c9d2c3; text-decoration: none; }
.site-footer a:hover { color: var(--cream); }
.footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}
.footer-brand__name { font: 500 19px/1.15 var(--serif); color: var(--cream); }
.site-footer__legal {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--pad) 48px;
}
.site-footer__legal p {
  border-top: 1px solid rgba(201, 210, 195, 0.22);
  padding-top: 24px;
  font-size: 13.5px;
  color: #9ba795;
}

/* --- Reveal animation ---------------------------------------------------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* Two classes are required before anything is hidden: `js` (set inline, so
   there is no flash of unstyled content) and `reveal-ready` (set by adu.js
   once the observer is actually running). If the script fails to load or
   throws, the second class never lands and every section stays visible. */
.js.reveal-ready [data-reveal] { opacity: 0; }
.js.reveal-ready [data-reveal].is-visible {
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 980px) {
  .assess__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* Breakpoint is 999px, not 900px: between 901 and 939 the four nav links plus
   the button need more room than the viewport has, which pushed the CTA off the
   right edge and gave the whole page a horizontal scrollbar. The links only fit
   on one line from 1000px up. */
@media (max-width: 999px) {
  /* Collapse the nav to the single conversion action rather than wrapping
     five items onto three lines. The brand must be allowed to shrink
     (flex 1 1 auto + min-width 0) or the header pushes the page sideways. */
  .nav__link { display: none; }
  .site-header__inner { gap: 12px; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .brand__name { font-size: 15px; line-height: 1.18; }
  .nav { flex: 0 0 auto; }
  .btn--xs { font-size: 14px; padding: 12px 15px; }
}

@media (max-width: 720px) {
  .shell { padding: 64px var(--pad); }
  .assess .shell { padding-bottom: 72px; }
  .closer .shell { padding: 72px var(--pad); }
  .hero__inner { padding: 64px var(--pad) 72px; }
  .hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(255, 252, 247, 0.97) 0%,
      rgba(255, 252, 247, 0.94) 62%,
      rgba(255, 252, 247, 0.72) 100%
    );
  }
  .split { gap: 36px; }
  .split__media { min-height: 260px; }
  .formcard { padding: 24px 20px 28px; }
  .process li { padding-right: 0; }
  .steps li { font-size: 11px; letter-spacing: 0.06em; }
  .stepcount { margin-left: 0; width: 100%; }
}

@media (max-width: 480px) {
  :root { --pad: 18px; }
  .brand { gap: 8px; }
  .brand__mark { width: 28px; height: 28px; }
  .brand__name { font-size: 13.5px; }
  .btn--xs { font-size: 13px; padding: 11px 12px; }
  .gallery__grid { gap: 8px; }
  .gallery__grid > figure { height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js.reveal-ready [data-reveal] { opacity: 1; }
}

@media print {
  .site-header, .hero__media, .closer, .formnav { display: none; }
}