/* ==========================================================================
   Empire Residential Solutions Inc.
   Design system — navy & gold, carried over from the V9 agent email so the
   email and the site read as one brand.

   Headlines are Georgia at REGULAR weight, not bold. That restraint is what
   makes the email look considered instead of loud; keep it here.
   ========================================================================== */

:root {
  /* Brand */
  --navy:        #1C2432;
  --navy-deep:   #141A24;
  --navy-line:   #2C3646;
  --gold:        #C79C39;
  --gold-deep:   #7B5C18;   /* eyebrow labels on light backgrounds */
  --gold-soft:   #E0C176;
  --cream:       #F6EEDB;
  --page:        #E7EBF0;

  /* Text */
  --ink:         #252525;
  --ink-soft:    #57544C;
  --on-navy:     #E7E2D8;
  --on-navy-dim: #A9B2C0;

  /* Type */
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;

  /* Height of the sticky header, measured at each breakpoint. Anchor targets
     offset by this so a jump does not land underneath the header. */
  --header-h: 80px;

  /* Rhythm */
  --wrap:    1120px;
  --wrap-sm: 760px;
  --gutter:  24px;
  --section: 88px;
}

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

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

/* The header is sticky, so it covers the top of whatever you jump to. Without
   this, every in-page link lands roughly one header-height too high and the
   section title is hidden. The extra 20px is breathing room so the heading is
   not flush against the header. */
[id] { scroll-margin-top: calc(var(--header-h) + 20px); }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: normal;      /* deliberate — see note above */
  margin: 0 0 .5em;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }

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

a { color: var(--gold-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

/* Keyboard users must be able to see where they are. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--gold); color: var(--navy);
  padding: 12px 20px; z-index: 200; font-weight: 700;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: var(--wrap-sm); }

.section { padding: var(--section) 0; }
.section--tight { padding: 56px 0; }

.section--navy  { background: var(--navy); color: var(--on-navy); }
.section--cream { background: var(--cream); }
.section--page  { background: var(--page); }

.section--navy h1, .section--navy h2, .section--navy h3,
.hero h1, .hero h2, .hero h3 { color: var(--gold); }
.section--navy a, .hero a { color: var(--gold); }
.section--navy a:hover, .hero a:hover { color: #FFFFFF; }

/* Buttons keep their own colours inside navy sections. Without this the
   `.section--navy a` rule above out-ranks `.btn` and paints gold text onto a
   gold button. */
.section--navy .btn, .hero .btn { color: var(--navy); }
.section--navy .btn:hover, .hero .btn:hover { color: var(--navy); }
.section--navy .btn--ghost, .hero .btn--ghost { color: var(--gold); }
.section--navy .btn--ghost:hover, .hero .btn--ghost:hover { color: var(--navy); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 12px;
}
.section--navy .eyebrow, .hero .eyebrow { color: var(--gold); }

.lede { font-size: 1.15rem; line-height: 1.6; color: var(--ink-soft); }
.section--navy .lede, .hero .lede { color: var(--on-navy); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  padding: 17px 30px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--gold-soft); color: var(--navy); }

.btn--ghost { background: transparent; color: var(--gold); }
.btn--ghost:hover { background: var(--gold); color: var(--navy); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 28px; }
.btn-note { font-size: 14px; color: var(--on-navy-dim); }

/* ---------- Header ---------- */
.site-header {
  background: var(--navy);
  border-bottom: 1px solid var(--navy-line);
  position: sticky; top: 0; z-index: 100;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 14px; padding-bottom: 14px;
}

.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand__mark { width: 62px; flex: none; }
.brand__text { display: block; }
.brand__name {
  font-family: var(--serif); font-size: 23px; line-height: 1.05;
  letter-spacing: 1.5px; color: var(--gold); display: block;
}
.brand__sub {
  font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--gold); opacity: .85; display: block; margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  color: var(--on-navy); text-decoration: none;
  font-size: 15px; letter-spacing: .2px; white-space: nowrap;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold); }
.nav .btn { color: var(--navy); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--navy-line);
  border-radius: 3px; color: var(--gold); padding: 9px 12px; cursor: pointer;
}

/* ==========================================================================
   Hero slideshow — full-bleed, cross-fading
   --------------------------------------------------------------------------
   Images sit edge-to-edge behind the copy rather than in a side panel, so a
   building is shown whole instead of boxed into a rectangle.

   Every slide carries a navy gradient over the photograph. That is not
   decoration: gold text over an unmodified dusk photo fails contrast badly,
   and the gradient is what keeps the headline readable on any image.

   Works with no JavaScript — the first slide carries .is-active in the markup
   and simply stays put.
   ========================================================================== */
.hero-show {
  position: relative;
  background: var(--navy);
  color: var(--on-navy);
  overflow: hidden;
  min-height: 560px;
  height: min(82vh, 760px);
}

/* Solid navy behind the slides. During a change the outgoing image fades to
   THIS rather than blending with the incoming one — see the transition timing
   below for why that matters. */
.hero-show__track { position: absolute; inset: 0; background: var(--navy); }

/* Staggered, not a true cross-fade.
   A simultaneous cross-fade blends the two photographs, and because they are
   bright in different places the outgoing one ghosts through as coloured bands
   at the top and bottom edges. Fading the outgoing slide out FIRST, over the
   navy track, and bringing the incoming one in slightly later removes the
   overlap where that blend is visible. */
.hero-show__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .45s ease-in;      /* leaves quickly */
  will-change: opacity;
}
.hero-show__slide.is-active {
  opacity: 1;
  transition: opacity .85s ease-out .28s; /* arrives after the old one has gone */
}

.hero-show__slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* A slow drift stops a still photograph feeling like a flat backdrop. */
.hero-show__slide.is-active img { animation: heroDrift 18s ease-out both; }

@keyframes heroDrift {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* The readability layer. Heavier on the left, where the copy sits.
   These stops are set by MEASUREMENT, not taste: with a lighter gradient the
   gold headline measured 2.85:1 against the brightest pixel behind it, below
   the 3.0 minimum for large text. Re-measure before lightening them. */
.hero-show__slide::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(28,36,50,.96) 0%,
      rgba(28,36,50,.90) 34%,
      rgba(28,36,50,.74) 56%,
      rgba(28,36,50,.40) 100%),
    linear-gradient(180deg,
      rgba(28,36,50,.55) 0%,
      rgba(28,36,50,0) 35%,
      rgba(28,36,50,.60) 100%);
}

/* ---------- Hero copy ---------- */
.hero-show__inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}

.hero-show__copy { max-width: 620px; }

/* All slide copy is stacked into ONE grid cell, so the container is always
   exactly as tall as its tallest slide — at every viewport width, in every
   language, however the text wraps.
   A fixed min-height was tried first and was wrong: at 375px the copy wrapped
   past it and the buttons overlapped the paragraph. Grid stacking has no such
   failure mode, so do not reintroduce absolute positioning here. */
.hero-show__rotator { display: grid; }

.hero-show__text {
  grid-area: 1 / 1;                /* every slide shares the same cell */
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease, visibility .7s;
}
.hero-show__text.is-active { opacity: 1; visibility: visible; transform: none; }

.hero-show__text h1 { color: var(--gold); margin-bottom: 16px; }
.hero-show__text p  { color: var(--on-navy); font-size: 1.12rem; line-height: 1.6; margin: 0; }

/* ---------- Controls ---------- */
.hero-show__controls {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 18px;
  margin-top: 28px;
}

.hero-show__dots { display: flex; gap: 10px; }

.hero-show__dot {
  width: 34px; height: 4px; padding: 0;
  border: 0; border-radius: 2px;
  background: rgba(231,226,216,.32);
  cursor: pointer;
  transition: background .25s ease;
}
.hero-show__dot:hover { background: rgba(231,226,216,.6); }
.hero-show__dot[aria-selected="true"] { background: var(--gold); }

.hero-show__arrows { display: flex; gap: 8px; margin-left: auto; }

.hero-show__arrow {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(231,226,216,.10);
  border: 1px solid rgba(231,226,216,.28);
  border-radius: 50%;
  color: var(--on-navy);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.hero-show__arrow:hover {
  background: var(--gold); border-color: var(--gold); color: var(--navy);
}
.hero-show__arrow svg { width: 17px; height: 17px; }

.hero-show__caption {
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--on-navy-dim);
}
/* On a phone the caption wraps to three lines and crowds the arrows. The dots
   already convey position, so drop it rather than let it squeeze the controls. */
@media (max-width: 600px) {
  .hero-show__caption { display: none; }
  .hero-show__controls { gap: 14px; }
}

/* Motion here is decorative. Honour the preference and show a static hero. */
@media (prefers-reduced-motion: reduce) {
  .hero-show__slide,
  .hero-show__text { transition: none; }
  .hero-show__slide.is-active img { animation: none; }
}

/* ---------- Hero (split layout, still used by interior pages) ---------- */
.hero { background: var(--navy); color: var(--on-navy); overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
  /* Horizontal padding must stay var(--gutter): this element is also .wrap,
     and a `padding: X 0 Y` shorthand here silently zeroes the page gutter. */
  padding: 84px var(--gutter) 92px;
}
.hero h1 { color: var(--gold); margin-bottom: 20px; }
.hero__art { position: relative; }
.hero__art img { width: 100%; border-radius: 2px; }
/* Fades the photo into the navy so it sits in the page instead of on it. */
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(28,36,50,.55) 22%, rgba(28,36,50,0) 62%);
  pointer-events: none;
}

/* ---------- Credibility bar ---------- */
.proof { background: var(--navy-deep); border-top: 1px solid var(--navy-line); }
.proof__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; padding: 34px var(--gutter);
}
.proof__item { text-align: center; }
.proof__num {
  font-family: var(--serif); font-size: 30px; line-height: 1.1; color: var(--gold);
}
.proof__label {
  font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--on-navy-dim); margin-top: 7px;
}

/* ---------- Cards ---------- */
.grid { display: grid; gap: 28px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #FFFFFF;
  border: 1px solid #DFE3EA;
  border-top: 3px solid var(--gold);
  padding: 32px 28px;
}
.card h3 { color: var(--navy); }
.card p:last-child { margin-bottom: 0; }

.section--cream .card { border-color: #E4D9BE; border-top-color: var(--gold); }

/* ---------- Numbered steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid rgba(123,92,24,.18);
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: "0" counter(step);
  grid-column: 1; grid-row: 1 / span 2;
  font-size: 13px; font-weight: 700; letter-spacing: 1px;
  color: var(--gold-deep); padding-top: 4px;
}
.steps h3 { grid-column: 2; grid-row: 1; margin-bottom: 4px; font-size: 1.15rem; }
.steps p  { grid-column: 2; grid-row: 2; margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--top { align-items: start; }

/* ---------- Contact ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { padding: 14px 0; border-bottom: 1px solid var(--navy-line); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .label {
  display: block; font-size: 11px; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--on-navy-dim); margin-bottom: 4px;
}
.contact-list a, .contact-list span.value { font-size: 1.05rem; color: var(--gold); }

.form-field { margin-bottom: 18px; }
.form-field label {
  display: block; font-size: 13px; font-weight: 700;
  letter-spacing: .4px; margin-bottom: 6px; color: var(--navy);
}
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 13px 14px;
  border: 1px solid #C9CFDA; border-radius: 3px;
  font-family: var(--sans); font-size: 16px; color: var(--ink); background: #FFF;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-hint { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

.notice {
  background: var(--cream); border-left: 3px solid var(--gold);
  padding: 18px 22px; font-size: .95rem; color: var(--ink-soft);
}
.notice--error {
  background: #FBEAEA; border-left-color: #A32020; color: #6B1616;
}
.notice--error a { color: #6B1616; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--on-navy-dim); font-size: 14px; }
.site-footer__top { padding: 56px var(--gutter) 40px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer h2 {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold);
  margin: 0 0 14px;
}
.site-footer a { color: var(--on-navy); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }

.legal {
  border-top: 1px solid var(--navy-line);
  padding: 30px var(--gutter) 44px;
  font-size: 12.5px; line-height: 1.7; color: #8E97A6;
}
.legal p { margin: 0 0 12px; }
.legal strong { color: var(--on-navy); }
.legal a { color: #8E97A6; text-decoration: underline; }
.legal a:hover { color: var(--gold); }

.eho { display: flex; align-items: flex-start; gap: 12px; }
.eho svg { flex: none; margin-top: 2px; }

/* ---------- Legal document pages ---------- */
.doc { max-width: 760px; }
.doc h2 { margin-top: 2.2em; font-size: 1.6rem; color: var(--navy); }
.doc h2:first-of-type { margin-top: 0; }
.doc h3 { margin-top: 1.6em; font-size: 1.15rem; color: var(--navy); }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: .5em; }
.doc__updated { font-size: 14px; color: var(--ink-soft); margin-bottom: 2.5em; }

/* ==========================================================================
   Section rail + scroll reveal
   --------------------------------------------------------------------------
   A position indicator, not a scroll hijack. Normal scrolling is untouched:
   the rail only shows where you are and lets you jump. Deliberately NOT
   full-page scroll-snapping, which breaks find-in-page, trackpad momentum and
   screen-reader navigation on a site whose job is to answer questions fast.
   ========================================================================== */
.rail {
  position: fixed;
  right: 26px; top: 50%; transform: translateY(-50%);
  z-index: 60;
  display: none;                 /* shown only where there is room — see below */
}
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li { margin: 14px 0; }

.rail a {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
  text-decoration: none;
  color: var(--on-navy-dim);
  font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase;
}

/* The label is hidden until hover/focus so the rail stays quiet. */
.rail__label {
  opacity: 0; transform: translateX(6px);
  transition: opacity .22s ease, transform .22s ease;
  white-space: nowrap;
  background: rgba(28,36,50,.92);
  color: var(--on-navy);
  padding: 5px 10px; border-radius: 3px;
  pointer-events: none;
}
.rail a:hover .rail__label,
.rail a:focus-visible .rail__label { opacity: 1; transform: none; }

.rail__tick {
  width: 22px; height: 2px; flex: none;
  background: rgba(160,170,186,.45);
  border-radius: 1px;
  transition: width .25s ease, background .25s ease;
}
.rail a:hover .rail__tick { background: var(--gold); }
.rail a[aria-current="true"] .rail__tick { width: 40px; background: var(--gold); }

/* On light sections the dim tick is too faint — darken it. */
.rail[data-on="light"] a { color: var(--ink-soft); }
.rail[data-on="light"] .rail__tick { background: rgba(60,66,78,.4); }
.rail[data-on="light"] a[aria-current="true"] .rail__tick { background: var(--gold-deep); }
.rail[data-on="light"] a:hover .rail__tick { background: var(--gold-deep); }

@media (min-width: 1100px) { .rail { display: block; } }

/* ---------- Scroll reveal ---------- */
/* Applied by JS only, so content is never hidden if the script fails. */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}

/* ---------- Hero scroll cue ---------- */
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--on-navy-dim);
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase;
  text-decoration: none;
}
.scroll-cue:hover { color: var(--gold); }
.scroll-cue svg { width: 18px; height: 18px; animation: cueBob 2.2s ease-in-out infinite; }
@keyframes cueBob {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal.is-in { transition: none; }
  .scroll-cue svg { animation: none; }
}
@media (max-width: 900px) { .scroll-cue { display: none; } }

/* ---------- Component modifiers ---------- */

/* Intro block that sits above a card grid. */
.section-intro { max-width: var(--wrap-sm); margin: 0 0 48px; }

/* Slightly shorter hero, for interior pages. */
.hero__grid--compact { padding: 70px var(--gutter) 74px; }

/* A card sitting on a navy section rather than a light one. */
.card--on-navy { background: transparent; border-color: var(--navy-line); }
.card--on-navy h3 { color: var(--gold); }
.card--on-navy p  { color: var(--on-navy); }

/* Numbered steps on a navy background. */
.steps--on-navy li    { border-bottom-color: var(--navy-line); }
.steps--on-navy li::before { color: var(--gold); }
.steps--on-navy h3    { color: var(--on-navy); }
.steps--on-navy p     { color: var(--on-navy-dim); }

.btn-row--center { justify-content: center; }

/* Ghost button on a LIGHT background — the default ghost assumes navy. */
.btn--ghost-dark { color: var(--gold-deep); border-color: var(--gold-deep); }
.btn--ghost-dark:hover { background: var(--gold-deep); color: #FFFFFF; }

.panel { padding: 38px 34px; }
.panel h2 { font-size: 1.6rem; margin-bottom: 20px; }

.logo-lg { width: 100%; max-width: 360px; margin: 0 auto; }
/* `width: 100%` is load-bearing: a bare `max-width: 360px` out-ranks the global
   `img { max-width: 100% }` and pushes the page wider than a 320px phone. */

.note-dim { margin-top: 18px; font-size: 14px; color: var(--on-navy-dim); }

.person-role {
  font-size: 13px; font-weight: 700; letter-spacing: .3px;
  color: var(--gold-deep); margin-bottom: .8em;
}

.value--plain { color: var(--on-navy); font-size: 1rem; }

/* ---------- Utilities ---------- */
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.mt-0  { margin-top: 0; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-34 { margin-top: 34px; }

.mb-6  { margin-bottom: 6px; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }
.mb-24 { margin-bottom: 24px; }
.mb-26 { margin-bottom: 26px; }
.mb-42 { margin-bottom: 42px; }
.mb-44 { margin-bottom: 44px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  :root { --section: 64px; --header-h: 76px; }

  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--navy); border-bottom: 1px solid var(--navy-line);
    padding: 8px var(--gutter) 22px;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--navy-line); }
  .nav .btn { margin-top: 16px; text-align: center; border-bottom: 0; }

  .hero__grid { grid-template-columns: 1fr; gap: 36px; padding: 56px var(--gutter) 64px; }
  .hero__art { order: -1; }
  .hero__art::after {
    background: linear-gradient(180deg, rgba(28,36,50,.35) 0%, rgba(28,36,50,0) 45%);
  }

  .proof__grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 480px) {
  :root { --header-h: 67px; }
  body { font-size: 16px; }
  .brand__mark { width: 50px; }
  .brand__name { font-size: 19px; }
  .brand__sub  { font-size: 8.5px; letter-spacing: 1px; }
  .proof__grid { grid-template-columns: 1fr; gap: 20px; }
  .btn { display: block; text-align: center; }
  .btn-row { flex-direction: column; align-items: stretch; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .nav, .btn, .hero__art { display: none; }
  body { font-size: 11pt; color: #000; }
  .section { padding: 12pt 0; }
  .section--navy, .section--cream, .section--page { background: #FFF !important; color: #000 !important; }
  .section--navy h1, .section--navy h2, .section--navy h3 { color: #000 !important; }
}