/* Ace Registration Services — page styles.
   Every value here is carried over from the Claude Design source
   `Ace Registration Services.dc.html`; inline styles became classes, and the
   design tool's `style-hover` attributes became real :hover rules. */

/* ── globals (from the design's <helmet> block) ─────────────────────────── */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
  overflow-x: hidden;
}
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }
::selection { background: var(--color-accent-200); }

.shell { max-width: 1360px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 64px); }

/* The header is sticky, so anchor jumps have to stop clear of it or the
   section kicker lands underneath. */
#top, #services, #why, #contact, #main { scroll-margin-top: 100px; }
@media (max-width: 900px) { #top, #services, #why, #contact, #main { scroll-margin-top: 128px; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 18px; background: var(--color-accent-700); color: var(--color-bg);
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.skip-link:focus { left: 0; color: var(--color-bg); }

/* Section kicker — "01 · Services" */
.kicker {
  display: block;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 14px;
}
.kicker-light { color: var(--color-accent-300); }

/* ── brand lockup ───────────────────────────────────────────────────────── */
.brand { display: flex; align-items: center; gap: 15px; color: var(--color-text); }
.brand-mark { height: 54px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand-name {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 31px); line-height: 0.95;
  letter-spacing: 0.015em; text-transform: uppercase;
}
.brand-sub {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(14px, 1.4vw, 17px); line-height: 1;
  letter-spacing: 0.44em; text-transform: uppercase;
  color: var(--color-accent-700);
}

/* ── header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-divider);
}
.site-header__inner {
  max-width: 1360px; margin: 0 auto;
  padding: 15px clamp(20px, 4vw, 64px);
  display: flex; align-items: center; gap: clamp(20px, 4vw, 56px);
}
.site-header .brand { margin-right: auto; }
.site-nav {
  display: flex; align-items: center; gap: 30px;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
}
.site-nav a { color: inherit; }
.site-nav a:hover { color: var(--color-accent); }
.btn-phone {
  min-height: 44px; padding-inline: 22px;
  font-family: var(--font-heading); font-weight: 600;
  font-size: 18px; letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Mobile-only header controls — the compact call button and the menu
   toggle. Both are revealed in the ≤900px block. */
.btn-call, .nav-toggle { display: none; }
.btn-call {
  width: 46px; height: 46px; padding: 0; flex: none;
  align-items: center; justify-content: center;
}
.btn-call svg { width: 21px; height: 21px; fill: currentColor; }

.nav-toggle {
  width: 46px; height: 46px; flex: none;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--color-divider);
  border-radius: 0; cursor: pointer; color: var(--color-text);
}
/* Three bars drawn from one element: the middle is the box itself, the outer
   two are its pseudo-elements. Open state morphs them into a cross. */
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block; width: 20px; height: 2px; background: currentColor;
  transition: transform 240ms ease, opacity 160ms ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.site-header[data-nav-open="true"] .nav-toggle__bars { background: transparent; }
.site-header[data-nav-open="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.site-header[data-nav-open="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* The panel is positioned against the header. */
.site-header__inner { position: relative; }

/* The two links that only exist inside the mobile menu. */
.site-nav__cta, .site-nav__call { display: none; }

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: clamp(540px, 80vh, 780px);
  display: flex; flex-direction: column;
  background: var(--color-neutral-900);
}
.hero__media { position: absolute; inset: 0; }
/* Fixed-background effect: the photo is pinned to the viewport and the hero
   merely clips it, so the page appears to slide up over a stationary banner.
   clip-path (unlike overflow:hidden) clips even fixed-position descendants;
   the @supports guard keeps unsupporting browsers on the plain absolute
   layout above instead of an unclipped full-screen image. */
@supports (clip-path: inset(0)) {
  .hero { clip-path: inset(0); }
  .hero__media { position: fixed; inset: 0; height: 100vh; height: 100lvh; }
}
.hero__photo { width: 100%; height: 100%; }
/* Black tint over the photo — the gradient scrim then layers on top of this to
   keep the headline legible at the bottom. */
.hero__tint { position: absolute; inset: 0; pointer-events: none; background: #000; opacity: 0.55; }
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(24, 26, 28, 0.55) 0%,
    rgba(24, 26, 28, 0.18) 30%,
    rgba(24, 26, 28, 0.24) 55%,
    rgba(24, 26, 28, 0.86) 100%);
}
.hero__body { position: relative; z-index: 2; flex: 1; display: flex; align-items: flex-end; }
.hero__inner {
  width: 100%; max-width: 1360px; margin: 0 auto;
  padding: 64px clamp(20px, 4vw, 64px) clamp(48px, 6vh, 80px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 36px;
}
.hero__copy {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 24px; max-width: 700px;
}
.hero__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-accent-300);
}
.hero__title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(48px, 5.6vw, 88px); line-height: 0.98;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--color-bg); margin: 0;
}
.hero__title span { display: block; }
.hero__title .accent { color: var(--color-accent-300); }
.hero__lede {
  font-size: 17px; line-height: 28px;
  color: rgba(242, 242, 243, 0.85);
  margin: 0; max-width: 50ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.btn-hero {
  min-height: 50px; padding-inline: 30px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.btn-on-dark {
  color: var(--color-bg);
  border-color: rgba(242, 242, 243, 0.45);
  background: transparent;
}
.btn-on-dark:hover { background: rgba(242, 242, 243, 0.12); color: var(--color-bg); }

.hero__stats {
  margin: 0; display: flex; gap: clamp(28px, 3vw, 52px);
  border-left: 2px solid var(--color-accent-400);
  padding-left: clamp(20px, 2.5vw, 36px);
}
.hero__stats dt {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(242, 242, 243, 0.65);
  margin: 0 0 8px;
}
.hero__stats dd {
  margin: 0;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(36px, 3vw, 48px); line-height: 1;
  color: var(--color-bg);
  font-feature-settings: 'tnum' 1;
}

/* ── filings ticker — continuous left-running marquee ───────────────────── */
.ticker {
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-bg);
  overflow: hidden;
}
.ticker__track { display: flex; width: max-content; }
.ticker__group {
  display: flex; align-items: center; flex: none; gap: 28px;
  padding: 18px 14px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  white-space: nowrap;
}
.ticker__lead { color: var(--color-accent-700); }

/* ── services ─────────────────────────────────────────────────────────────
   Heading spans the full width above the list, and the eight filings sit in a
   4 × 2 matrix — the earlier 50/50 split left most of the left column empty. */
.services { max-width: 1360px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 64px) 0; }
.services__head {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 72px); align-items: end;
  margin-bottom: clamp(38px, 4.5vw, 60px);
}
.services__title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(34px, 3.8vw, 52px); line-height: 1.04;
  letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0; max-width: 20ch;
}
.services__intro {
  font-size: 15px; line-height: 25px;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
  margin: 0; max-width: 46ch;
}
.services__table {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--color-divider);
}
.service {
  display: flex; flex-direction: column;
  padding: 26px clamp(18px, 1.8vw, 26px) 30px;
  background: var(--color-bg);
}
.service__num {
  font-family: var(--font-heading); font-weight: 700; font-size: 26px; line-height: 1;
  color: var(--color-accent-700); font-feature-settings: 'tnum' 1;
  margin-bottom: 16px;
}
.service__name {
  font-family: var(--font-heading); font-weight: 600; font-size: 23px;
  line-height: 1.08; letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 0 10px; text-wrap: balance;
}
.service__note {
  font-size: 14px; line-height: 22px;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
  margin: 0;
}
@media (max-width: 1100px) {
  .services__table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .services__head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
}
@media (max-width: 560px) {
  .services__table { grid-template-columns: minmax(0, 1fr); }
}

/* ── why ace ────────────────────────────────────────────────────────────── */
.why {
  margin-top: clamp(72px, 9vw, 120px);
  background: var(--color-neutral-900);
  color: var(--color-bg);
}
.why__inner { max-width: 1360px; margin: 0 auto; padding: clamp(64px, 7vw, 104px) clamp(20px, 4vw, 64px); }
.why__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(36px, 5vw, 88px); align-items: center;
}
.why__title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04;
  letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0; max-width: 18ch;
}
.why__lede {
  font-size: 16px; line-height: 27px;
  color: rgba(242, 242, 243, 0.8);
  margin: 22px 0 0; max-width: 48ch;
}
.why__points { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 0; }
.why__points li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start;
  font-size: 15px; line-height: 24px;
  padding: 14px 0; border-top: 1px solid rgba(242, 242, 243, 0.2);
}
.why__points li:last-child { padding-bottom: 0; }
.why__points .mark { color: var(--color-accent-300); font-family: var(--font-heading); font-weight: 700; }
.why__figure { margin: 0; border-color: rgba(242, 242, 243, 0.3); }
.why__figure > .corner { color: rgba(242, 242, 243, 0.55); }
.why__photo { width: 100%; aspect-ratio: 4 / 3; }

/* ── how it works ───────────────────────────────────────────────────────── */
.process { max-width: 1360px; margin: 0 auto; padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 64px) 0; }
.process__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 0; border-top: 1px solid var(--color-divider);
}
.process__step:nth-child(1) { padding: 32px clamp(0px, 2vw, 32px) 8px 0; }
.process__step:nth-child(2) { padding: 32px clamp(0px, 2vw, 32px) 8px; }
.process__step:nth-child(3) { padding: 32px 0 8px; }
.process__num {
  font-family: var(--font-heading); font-weight: 700; font-size: 44px; line-height: 1;
  color: var(--color-accent-700); font-feature-settings: 'tnum' 1;
}
.process__title {
  font-family: var(--font-heading); font-weight: 600; font-size: 23px; line-height: 1.1;
  letter-spacing: 0.02em; text-transform: uppercase; margin: 16px 0 8px;
}
.process__body {
  font-size: 14.5px; line-height: 23px;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
  margin: 0; max-width: 34ch;
}

/* ── contact ────────────────────────────────────────────────────────────── */
.contact {
  max-width: 1360px; margin: 0 auto;
  padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 64px) clamp(72px, 9vw, 110px);
}
.contact__rule { height: 1px; border: 0; background: var(--color-divider); margin: 0 0 40px; }
.contact__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: clamp(36px, 5vw, 88px);
}
.contact__title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04;
  letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0; max-width: 16ch;
}
.contact__lede {
  font-size: 16px; line-height: 27px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 22px 0 40px; max-width: 42ch;
}
.contact__details { margin: 0; display: grid; }
.contact__row {
  display: grid; grid-template-columns: 120px 1fr; gap: 16px;
  padding: 18px 0; border-top: 1px solid var(--color-divider);
}
.contact__row:last-child { border-bottom: 1px solid var(--color-divider); }
.contact__row dt {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.contact__row dd { margin: 0; font-size: 15px; line-height: 24px; }
.contact__row dd .muted { color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.contact__phone { font-family: var(--font-heading); font-weight: 700; font-size: 30px; line-height: 1; }
.contact__phone a { color: var(--color-text); }
.contact__phone a:hover { color: var(--color-accent); }

.contact__panel { padding: clamp(26px, 3vw, 40px); align-self: start; }
.contact__form { display: grid; gap: 18px; }
.form-legend {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 18px; }
.btn-submit {
  min-height: 48px; font-size: 15px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px;
}
.form-note {
  font-size: 13px; line-height: 20px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  margin: 0;
}
.form-error { color: #9a3535; }
/* Spam trap. Moved off-screen rather than display:none — bots skip fields
   that are display:none, which defeats the point. */
.form-honey {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}

.thanks { display: grid; gap: 16px; padding: 24px 0; }
.thanks__kicker {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-accent-700);
}
.thanks__title {
  font-family: var(--font-heading); font-weight: 600; font-size: 32px; line-height: 1.06;
  letter-spacing: 0.02em; text-transform: uppercase; margin: 0;
}
.thanks__body {
  font-size: 15px; line-height: 24px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  margin: 0;
}
.btn-reset {
  justify-self: start; min-height: 42px; padding-inline: 22px;
  font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
}
[hidden] { display: none !important; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--color-neutral-900); color: rgba(242, 242, 243, 0.7); }
.site-footer__inner {
  max-width: 1360px; margin: 0 auto;
  padding: clamp(52px, 6vw, 76px) clamp(20px, 4vw, 64px) 32px;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-300); }
.site-footer p { margin: 0; font-size: 13px; line-height: 22px; }

/* Four columns: the brand block is given extra width, the three link/detail
   columns share the rest. */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(36px, 4vw, 52px);
}
.site-footer .brand-mark { height: 50px; }
.site-footer .brand-text { color: var(--color-bg); }
.site-footer .brand-name { font-size: 25px; }
.site-footer .brand-sub { font-size: 14px; color: var(--color-accent-300); }

.footer-blurb {
  margin: 22px 0 0; max-width: 42ch;
  font-size: 14px; line-height: 23px;
  color: rgba(242, 242, 243, 0.6);
}

.footer-col__title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 13px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-300);
  margin: 0 0 20px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(242, 242, 243, 0.14);
}

.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-list a { font-size: 14px; line-height: 20px; }

/* Label/value pairs — same tracked-label idiom as the contact section. */
.footer-facts { margin: 22px 0 0; display: grid; gap: 14px; }
.footer-facts dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(242, 242, 243, 0.4);
  margin-bottom: 3px;
}
.footer-facts dd {
  margin: 0; font-size: 14px; line-height: 21px;
  color: rgba(242, 242, 243, 0.78);
  overflow-wrap: anywhere;
}
.footer-phone {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 30px; line-height: 1; letter-spacing: 0.01em;
  margin: 0;
}
.footer-phone a { color: var(--color-bg); }

/* Phone-only wayfinding row; the four columns cover this on desktop. */
.footer-quicklinks { display: none; }

.site-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(242, 242, 243, 0.14);
}
.site-footer__bottom p { font-size: 13px; color: rgba(242, 242, 243, 0.5); }
.site-footer__credit { font-size: 12px; color: rgba(242, 242, 243, 0.38); }

/* ── photo slots ────────────────────────────────────────────────────────────
   The design used <image-slot> placeholders — drop-targets that hold a photo
   the client supplies. Here they are real <img> elements over a wireframe
   panel; if the file is missing the img removes itself and the panel shows. */
.photo { position: relative; background: var(--color-neutral-800); overflow: hidden; }
.photo::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    135deg,
    transparent 0 14px,
    rgba(242, 242, 243, 0.05) 14px 15px);
}
.photo img { position: relative; width: 100%; height: 100%; object-fit: cover; }

/* ══ responsive ════════════════════════════════════════════════════════════
   The source design is fluid (clamp() throughout) but assumes a wide header
   row, two-column detail rows and mouse-sized hit areas. These rules carry it
   down to phones: nothing is restyled, only re-flowed and made touchable. */

/* Long addresses and emails must wrap rather than force the page wide. */
.contact__row dd, .site-footer p { overflow-wrap: anywhere; }

/* The select needs room for its own arrow, or the chevron sits on the text. */
select.input { padding-right: 34px; }

@media (max-width: 1100px) {
  /* Give the form panel a little less inset so fields keep their width. */
  .contact__panel { padding: clamp(22px, 3vw, 32px); }
}

@media (max-width: 900px) {
  /* ── header: one compact bar ────────────────────────────────────────────
     Brand, a call button and the menu toggle on a single row; the nav moves
     into a panel that drops down. The old two-row header stood 134px tall —
     16% of an iPhone viewport — before any content appeared. */
  .site-header__inner { flex-wrap: nowrap; gap: 10px; padding-block: 11px; }
  .nav-toggle, .btn-call { display: inline-flex; }
  .btn-phone { display: none; }

  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: block;
    padding: 0 clamp(14px, 4vw, 24px);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-divider);
    box-shadow: 0 18px 30px -18px rgba(29, 31, 32, 0.45);
    font-size: 15px; letter-spacing: 0.1em;
    /* Collapsed by default; clip-based reveal so no JS height math is needed. */
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height 300ms ease, opacity 200ms ease,
                visibility 300ms, padding 300ms ease;
  }
  .site-header[data-nav-open="true"] .site-nav {
    max-height: 80vh; opacity: 1; visibility: visible;
    padding-block: 4px 20px; overflow-y: auto;
  }
  .site-nav a {
    display: flex; align-items: center; min-height: 54px;
    border-bottom: 1px solid var(--color-divider);
  }
  .site-nav__cta, .site-nav__call { display: flex; }
  .site-nav__cta {
    justify-content: center; margin-top: 18px; min-height: 54px;
    border-bottom: 0; font-size: 15px; letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .site-nav__call {
    justify-content: center; border-bottom: 0; min-height: 50px;
    font-family: var(--font-heading); font-weight: 700; font-size: 21px;
    letter-spacing: 0.04em; color: var(--color-accent-700);
    text-transform: none;
  }

  /* ── touch sizing ────────────────────────────────────────────────────────
     Applies from tablet down, since everything in this range is a touch
     device. 16px on inputs is not a style choice: below it, iOS Safari zooms
     the page in when a field takes focus and never zooms back out. */
  .input { min-height: 48px; font-size: 16px; padding: 11px 12px; }
  textarea.input { min-height: 120px; }
  .field > label { font-size: 13px; margin-bottom: 6px; }
  .btn-submit { min-height: 52px; }
  .contact__row dt { font-size: 13px; }
  .contact__row dd a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Footer collapses to two columns; brand spans the full width. */
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 32px; }
  .footer-col--brand { grid-column: 1 / -1; }
  /* min-height does nothing on an inline box, so each of these has to become
     a flex/inline-block first. */
  .footer-list a,
  .footer-facts dd a,
  .footer-phone a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .site-footer__bottom a { display: inline-block; padding-block: 7px; }
}

@media (max-width: 820px) {
  /* Trim the section rhythm so the page doesn't read as mostly whitespace. */
  .services, .process { padding-top: clamp(52px, 11vw, 76px); }
  .contact { padding-block: clamp(52px, 11vw, 76px); }
  .why { margin-top: clamp(52px, 11vw, 76px); }
  .why__inner { padding-block: clamp(48px, 10vw, 72px); }
  .contact__lede { margin-bottom: 28px; }
}

@media (max-width: 640px) {
  /* Shrink the lockup and the CTA just enough that brand + phone share the
     first row and the nav takes the second — three stacked rows ate the fold. */
  .brand-mark { height: 40px; }
  .site-header .brand-name { font-size: 18px; }
  .site-header .brand-sub { font-size: 11px; letter-spacing: 0.36em; }
  .site-header__inner { gap: 10px 16px; }
  .btn-phone { font-size: 14px; padding-inline: 14px; min-height: 44px; }
  .site-nav { gap: 12px; font-size: 12.5px; }
  /* The desktop rules indent steps 2 and 3 via :nth-child, which stacked
     unevenly once the grid collapsed — match that specificity to flush them. */
  .process__step:nth-child(1),
  .process__step:nth-child(2),
  .process__step:nth-child(3) { padding: 26px 0 6px; }
  .process__grid { gap: 0; }

  /* The photo slot is a placeholder until a real photo lands; at 4:3 it ate
     half a phone screen showing nothing. */
  .why__photo { aspect-ratio: 16 / 10; }
  .why__figure { margin-top: 4px; }
  .form-row { gap: 14px; }
  .contact__form { gap: 15px; }

  /* Contact links are the primary conversion path on a phone. */
  .contact__phone { font-size: 34px; }

  /* Footer: stack the three blocks. */
  /* ── footer, stripped for phones ─────────────────────────────────────────
     It ran 1751px — two full screens. On a phone the two link columns just
     repeat the header menu and the Services section directly above, so they
     go; what's left is who you're calling and how to reach them. The full
     four-column footer is untouched on desktop. */
  .site-footer__inner { padding: 32px clamp(20px, 4vw, 64px) 20px; }
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px; padding-bottom: 18px;
  }
  .footer-col--brand,
  .footer-col:last-child { grid-column: 1 / -1; }

  /* Dropped on phones: both link lists, the brand blurb, the service-area
     pair, and the two lowest-priority contact rows. */
  .footer-col:nth-child(2),
  .footer-col:nth-child(3),
  .footer-blurb,
  .footer-col--brand .footer-facts,
  .footer-fact--extra { display: none; }

  .site-footer .brand-mark { height: 38px; }
  .site-footer .brand-name { font-size: 19px; }
  .site-footer .brand-sub { font-size: 11px; letter-spacing: 0.34em; }
  .footer-col__title { display: none; }
  .footer-phone { font-size: 30px; margin-top: 2px; }
  .footer-facts { margin-top: 12px; gap: 8px; }
  .footer-facts dt { font-size: 10px; letter-spacing: 0.12em; margin-bottom: 1px; }
  .footer-facts dd { font-size: 13.5px; line-height: 19px; }
  .footer-facts dd a { min-height: 38px; }

  /* Compact wayfinding row replacing the two dropped columns. */
  .footer-quicklinks {
    display: flex; flex-wrap: wrap; gap: 4px 22px;
    padding: 4px 0 14px;
    font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .footer-quicklinks a {
    display: inline-flex; align-items: center; min-height: 40px;
    color: rgba(242, 242, 243, 0.72);
  }
  .site-footer__bottom { flex-direction: column; gap: 2px; padding-top: 14px; }

  /* ── hero ────────────────────────────────────────────────────────────────
     At the design's 48px floor the headline broke as "YOUR PAPERWORK," /
     "FILED" — a one-word orphan line. Sizing off the viewport lets each
     line of the headline sit on its own row.
     The vw factor is set so the longest line ("in all 50 states.") runs
     nearly the full column — a poster-weight headline, as on desktop —
     rather than floating at half width. The 46px ceiling keeps the 480–640px
     tablet range from overshooting. */
  .hero__inner { padding-top: 44px; gap: 26px; }
  .hero__copy { gap: 18px; }
  .hero__title { font-size: clamp(30px, 11.2vw, 46px); line-height: 0.98; }
  /* Break "filed" onto its own line on phones — three stacked lines instead
     of two. Inline on desktop, so the designed two-line headline is intact. */
  .hero__title-br { display: block; }
  .hero__eyebrow { font-size: 12px; letter-spacing: 0.14em; }
  .hero__lede { font-size: 15px; line-height: 24px; }
  .hero__actions { width: 100%; gap: 10px; }
  .btn-hero { flex: 1 1 auto; min-height: 52px; }
  .hero__stats { padding-left: 16px; gap: 22px; }
  .hero__stats dd { font-size: 32px; }
  .hero__stats dt { font-size: 11px; margin-bottom: 5px; }

  /* ── services: compact cards ─────────────────────────────────────────────
     Stacking number-over-title-over-note made each card ~125px tall, so the
     eight of them ran a thousand pixels. The number moves beside the title
     and the note tucks under it. */
  .service {
    display: grid; grid-template-columns: auto 1fr;
    column-gap: 14px; row-gap: 4px;
    padding: 18px 18px 20px;
  }
  .service__num { font-size: 20px; margin: 0; line-height: 1.25; }
  .service__name { font-size: 19px; margin: 0; grid-column: 2; }
  .service__note { grid-column: 2; font-size: 14px; line-height: 21px; margin-top: 4px; }
  .service__num { grid-row: 1; }
  .service__name { grid-row: 1; }
  .service__note { grid-row: 2; }

  /* Section headings scale down with the viewport too. */
  .services__title, .why__title, .contact__title { font-size: clamp(28px, 7.6vw, 40px); }
  .services__head { margin-bottom: 28px; }
  .kicker { font-size: 12px; margin-bottom: 12px; }
  .process__num { font-size: 38px; }
  .process__title { font-size: 21px; margin: 12px 0 6px; }
  .why__points li { padding-block: 12px; }
}

@media (max-width: 480px) {
  .contact__row { grid-template-columns: 1fr; gap: 4px; padding-block: 14px; }
  .hero__stats { flex-wrap: wrap; gap: 18px 26px; }
  .service { padding: 22px 18px 26px; }
  /* Two CTAs side by side get too narrow to read — stack them. */
  .hero__actions { flex-direction: column; }
  .btn-hero { width: 100%; }
}

@media (max-width: 360px) {
  /* Last few pixels so brand + phone still share a row on a 320px screen. */
  .site-header__inner { padding-inline: 14px; gap: 10px; }
  .site-header .brand { gap: 11px; }
  .site-header .brand-name { font-size: 17px; }
  .btn-phone { font-size: 13px; padding-inline: 10px; }
  .contact__phone { font-size: 30px; }
}

/* Coarse pointers of any size (tablets, touch laptops) get the same
   comfortable hit areas, independent of viewport width. */
@media (pointer: coarse) {
  .input { min-height: 46px; font-size: 16px; }
  .site-nav a { min-height: 44px; display: flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}