/* Leonard Builders — site styles.
   Grown out of the structure-stage wireframe kit: the layout, the component
   classes and the breakpoints are the ones Peter already reviewed.

   The palette is taken from the logo rather than invented — navy and cyan are
   sampled from images/logo.png. That matters beyond tidiness: the line-drawn
   house inside the mark is why the service icons and the hero drawing look
   native to the page rather than bolted on.

   The first pass at this was flat: no dark surface anywhere, every ground
   between #edf1f5 and #ffffff, no gradient, no shadow, no transition, and a
   font link that never downloaded a weight above 600 — so no headline could
   go heavy even where one was asked for. The notes below mark what fixed
   what. */

:root {
  /* Brand, from the logo */
  --navy: #0d4a8f;       /* buttons, headings, icon strokes */
  --navy-deep: #08356a;  /* hover */
  --navy-900: #072a52;   /* the dark ground: 14.2:1 with white */
  --navy-700: #0a3a70;   /* raised panels on the dark ground */

  /* The accent only works on dark. #29abe2 is 2.6:1 on white — nowhere near
     the 4.5 WCAG wants for text — but 5.4:1 on --navy-900. Before there was
     a dark surface it could only ever be a rule or a bar; on the hero and the
     band it is finally allowed to be a word. */
  --cyan: #29abe2;

  /* Text on the dark ground. All three clear AA against --navy-900:
     8.8:1 quiet, 5.3:1 faint. */
  --on-ink: #ffffff;
  --on-ink-quiet: rgba(255, 255, 255, 0.76);
  --on-ink-faint: rgba(255, 255, 255, 0.55);

  /* Ink ramp, warmed towards the navy so text and brand sit together */
  --ink: #16202b;
  --body: #3e4a57;
  /* Every one of these is text on paper, so every one has to clear AA's 4.5:1
     for normal size — including the quietest. The first pass had --faint at
     #8492a0, which is 3.18:1: it carried the footer's "Building in the Valley
     since 1986" and the column headings, and neither is decoration.
     Measured on --paper: 8.9 / 6.8 / 5.7 / 4.9. `.eyebrow` moved to --navy in
     the restyle, which left --label with no users at all. */
  --mute: #5b6874;
  --faint: #65727f;

  /* Surfaces. --band is shifted off --surface's hue rather than merely
     darkened: two lightnesses of one hue read as a single surface, which is
     why the old page looked like one long panel. */
  --bg: #e9eef4;
  --paper: #ffffff;
  --surface: #f5f8fb;
  --band: #e3ebf2;
  --line: #c3d1de;
  --hair: #dae3ec;

  /* What the house drawing fills itself with, so its nearer shapes occlude
     the ones behind. Overridden by whichever section it sits in. */
  --house-fill: var(--paper);

  /* Depth. Tinted navy rather than neutral black, so shadows belong to the
     palette instead of greying it. */
  --shadow-sm: 0 1px 2px rgba(7, 42, 82, 0.05), 0 2px 6px rgba(7, 42, 82, 0.04);
  --shadow-md: 0 8px 24px rgba(7, 42, 82, 0.10), 0 2px 6px rgba(7, 42, 82, 0.06);

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  --max: 1180px;
}

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

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

/* Two brand-hue washes over the ground. Without them --bg is a dead flat
   grey and every section floats on nothing. */
body {
  margin: 0;
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(41, 171, 226, 0.10), transparent 60%),
    radial-gradient(ellipse 70% 50% at 90% 12%, rgba(13, 74, 143, 0.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Barlow", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}

/* Condensed uppercase for display, echoing the LEONARD BUILDERS block in the
   logo. Barlow stays for everything that has to be read rather than seen. */
h1, h2, h3 {
  font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.02;
  margin: 0;
  color: var(--ink);
}
h4, h5, h6 {
  font-family: "Barlow", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--navy-deep); }
img { display: block; max-width: 100%; }

[x-cloak] { display: none !important; }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  z-index: 50;
}
.skip:focus { left: 12px; top: 12px; color: #fff; }

/* ── page frame ─────────────────────────────────────────────────────── */
.site {
  max-width: var(--max);
  margin: 32px auto;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
@media (max-width: 1240px) {
  .site { margin: 0 auto; border-left: none; border-right: none; box-shadow: none; }
}

/* ── header ─────────────────────────────────────────────────────────── */
.hdr {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 13px 40px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.logo { display: block; flex: none; line-height: 0; text-decoration: none; }
.logo img { width: 100%; height: auto; }
/* 232px, not the wireframe's 212: the script L's swash runs into the house
   box when the mark is set smaller than this at header weight. */
.hdr .logo { width: 232px; }
.ftr .logo { width: 240px; margin-bottom: 16px; }
.nav { display: flex; gap: 24px; font-size: 15px; margin-left: 8px; flex-wrap: wrap; }
.nav a {
  position: relative;
  color: var(--body);
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 3px;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav a:hover { color: var(--navy); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--navy); }
.hdr-cta { margin-left: auto; display: flex; align-items: center; gap: 16px; flex: none; }
.hdr-phone {
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.hdr-phone:hover { text-decoration: underline; text-underline-offset: 3px; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  background: none;
  padding: 10px;
  cursor: pointer;
  margin-left: auto;
}
.burger span { display: block; width: 22px; height: 2px; background: var(--navy); }
.mobnav { display: none; }

@media (max-width: 960px) {
  .hdr { padding: 14px 20px; flex-wrap: wrap; }
  .hdr .logo { width: 186px; }
  .nav, .hdr-cta { display: none; }
  .burger { display: flex; }
  .mobnav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 16px 4px 6px;
    border-top: 1px solid var(--hair);
  }
  .mobnav a { color: var(--body); font-size: 16px; text-decoration: none; }
  .mobnav .hdr-phone { font-size: 21px; margin-top: 4px; }
}

/* ── sections ───────────────────────────────────────────────────────── */
/* Three padding tiers rather than one, so a section's weight is legible
   before you read it. */
.sec { padding: clamp(48px, 7vw, 84px) 40px; border-top: 1px solid var(--hair); }
.sec:first-of-type { border-top: none; }
.sec.tight { padding-block: clamp(36px, 5vw, 56px); }
.sec.tint { background: var(--surface); }
/* Full-strength hairlines: a two-step tint only reads as a band when its
   edges are drawn. At --hair the old band was invisible. */
.sec.band {
  background: var(--band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* The dark band. No top hairline — the ground change is the edge. */
.sec.ink {
  background: var(--navy-900);
  color: var(--on-ink);
  border-top: 0;
  --house-fill: var(--navy-900);
}
.sec.ink h1, .sec.ink h2, .sec.ink h3 { color: var(--on-ink); }
.sec.ink .lead, .sec.ink .body { color: var(--on-ink-quiet); }
.sec.ink .eyebrow { color: var(--cyan); }
.sec.ink .eyebrow::before { background: var(--cyan); }
@media (max-width: 720px) { .sec { padding-inline: 20px; } }

/* A drawn rule in front of the label, rather than a bare caps line. */
.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--cyan);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-2px);
}

.h-xl { font-size: clamp(38px, 5.4vw, 62px); }
.h-lg { font-size: clamp(28px, 3.4vw, 40px); }
.h-md { font-size: clamp(24px, 2.6vw, 30px); }
.h-sm { font-size: 21px; }
.lead { font-size: clamp(17px, 1.5vw, 19px); color: var(--body); margin-top: 16px; text-wrap: pretty; }
.body { font-size: 16px; color: var(--body); text-wrap: pretty; }
.muted { color: var(--mute); }
.faint { color: var(--faint); }
.measure { max-width: 62ch; }

/* A short cyan rule under a section heading. */
.rule { width: 56px; height: 3px; background: var(--cyan); margin: 18px 0 0; border: 0; }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 14px 26px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.btn-secondary { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-secondary:hover { color: #fff; background: var(--navy); }
/* For a call to action standing on the dark ground, where a navy fill would
   disappear into it. */
.btn-onink {
  background: transparent;
  color: var(--on-ink);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-onink:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--on-ink);
  color: var(--on-ink);
}
.link { font-size: 15px; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ── hero ───────────────────────────────────────────────────────────── */
/* Flat navy plus a two-stop wash on a ::before, so the content sits above the
   gradient rather than inside a stacking context with it. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--on-ink);
  padding: clamp(56px, 9vw, 104px) 40px clamp(48px, 7vw, 84px);
  --house-fill: var(--navy-900);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 78% 18%, rgba(41, 171, 226, 0.22), transparent 58%),
    radial-gradient(ellipse at 8% 92%, rgba(41, 171, 226, 0.09), transparent 62%);
  pointer-events: none;
}
.hero > * { position: relative; }
/* Interior pages get a shorter plate. They carry no drawing beside the copy,
   so at the home page's height the right-hand half is a large empty navy
   field rather than deliberate space. */
.hero--page { padding-block: clamp(44px, 6vw, 76px); }
.hero h1 { color: var(--on-ink); max-width: 15ch; }
.hero .eyebrow { color: var(--cyan); }
.hero .eyebrow::before { background: var(--cyan); }
.hero .lead { color: var(--on-ink-quiet); max-width: 54ch; }
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}
/* The home page headline is Peter's own sentence and runs to thirteen words,
   so it gets a wider measure than the 15ch the short interior headlines use. */
.hero-grid h1 { max-width: 22ch; font-size: clamp(34px, 4.4vw, 52px); }
/* .svc-list on the dark ground: the key points under the headline. */
.hero .hero-list {
  margin-top: 22px;
  font-size: clamp(18px, 1.6vw, 21px);
  font-weight: 500;
  color: var(--on-ink);
}
.hero .hero-list li { padding: 5px 0 5px 22px; }
.hero .hero-list li::before { top: 0.95em; width: 12px; height: 2px; }
.hero .hero-list a { color: inherit; text-decoration: none; font-weight: 700; }
.hero .hero-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 720px) { .hero { padding-inline: 20px; } }

/* ── the house drawing ──────────────────────────────────────────────── */
.house { width: 100%; height: auto; display: block; }
.house .solid { fill: var(--house-fill); }
/* Behind a section rather than beside the copy. Sized off the section, pinned
   to the right, and quiet enough to be texture rather than picture. */
.house-mark {
  position: absolute;
  right: -40px;
  bottom: 0;
  width: min(560px, 55%);
  opacity: 0.05;
  color: var(--navy);
  pointer-events: none;
}
.house-mark .solid { fill: none; }
@media (max-width: 900px) { .house-mark { display: none; } }

/* ── grids ──────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start; }
/* Wider left column, for a form beside a details panel. A class rather than
   an inline style: an inline grid-template-columns outranks the media query
   below, which is how the contact form ended up two columns wide on a 390px
   phone with the inputs at about 40% of the screen. */
.split--form { grid-template-columns: 1.25fr 1fr; }
@media (max-width: 900px) {
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--form { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) { .g2, .g3 { grid-template-columns: 1fr; } }

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

/* ── blueprint ground ───────────────────────────────────────────────── */
/* A 40px crosshatch behind the services. This is the .blueprint device the
   wireframe had and the first high-fidelity pass threw away as a wireframe
   tell — but Peter draws his plans in pencil on vellum, so drafting is the
   one motif here that is actually his. */
.sec.plan {
  position: relative;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23c3d1de' stroke-width='0.5' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 40px 40px;
  overflow: hidden;
}
.sec.plan > * { position: relative; }

/* ── service tiles ──────────────────────────────────────────────────── */
/* Peter's fifteen services, grouped into six, each with a line icon drawn in
   the same weight as the house inside the logo. Icons rather than
   photographs because his diagnosis was right: the project photos were
   complicating the story rather than telling it. */
.svc {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 30px 26px 26px;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
/* The top rule wipes in rather than sitting there, which is the whole
   difference between a card and a card that responds. */
.svc::after {
  content: "";
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 3px;
  background: var(--cyan);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.svc:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--navy);
}
.svc:hover::after { transform: scaleX(1); }
.svc-ico { margin-bottom: 20px; color: var(--navy); }
.svc-ico svg { width: 64px; height: 64px; display: block; }
.svc-t {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--ink);
}
.svc-list { list-style: none; margin: 14px 0 0; padding: 0; font-size: 16px; color: var(--body); }
.svc-list li { padding: 3px 0 3px 18px; position: relative; }
.svc-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 1px;
  background: var(--cyan);
}

/* Repairs is a phone number, not a tile — the judgement the wireframe's
   repairs page already made by putting the number at 44px in its hero. */
.callout {
  margin-top: 30px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  background: var(--paper);
  padding: 24px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.callout--stack { display: block; margin-top: 0; }
.callout-phone {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.callout-phone:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── facts strip, on the dark band ──────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.fact { padding: 4px 26px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact-n {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 700;
  line-height: 1;
  color: var(--on-ink);
}
.fact-l {
  font-size: 15px;
  color: var(--on-ink-faint);
  margin-top: 8px;
  letter-spacing: 0.02em;
}
@media (max-width: 760px) {
  .facts { grid-template-columns: 1fr 1fr; gap: 28px 1px; }
  .fact:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 460px) {
  .facts { grid-template-columns: 1fr; }
  .fact { border-left: 0; padding-left: 0; }
}

/* ── numbered steps ─────────────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.step { background: var(--paper); padding: 26px 22px; }
.sec.tint .step, .sec.plan .step { background: var(--surface); }
.step-n {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.step-t {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 8px;
  line-height: 1.05;
}
.step-d { font-size: 15px; color: var(--body); margin-top: 8px; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ── testimonials ───────────────────────────────────────────────────── */
.quote { border-top: 3px solid var(--cyan); padding-top: 24px; }
.quote-lg { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.quote-by { font-size: 15px; color: var(--mute); margin-top: 18px; font-weight: 500; }

/* ── people ─────────────────────────────────────────────────────────── */
.person { border-top: 1px solid var(--line); padding-top: 26px; }
.person-n {
  font-family: "Barlow Condensed", "Barlow", sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}
.person-r { font-size: 15px; color: var(--navy); margin-top: 4px; font-weight: 500; }
.person-b { font-size: 16px; color: var(--body); margin-top: 16px; text-wrap: pretty; }

/* ── map ────────────────────────────────────────────────────────────── */
.map {
  border: 1px solid var(--line);
  width: 100%;
  aspect-ratio: 16 / 7;
  display: block;
  filter: grayscale(0.25) contrast(1.04);
}
@media (max-width: 640px) { .map { aspect-ratio: 4 / 3; } }

/* ── contact form ───────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.form-grid .span2 { grid-column: span 2; }
.field { display: block; }
.field > span { font-size: 14px; color: var(--body); font-weight: 600; }
.field input, .field textarea, .field select {
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  background: var(--paper);
  margin-top: 6px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--cyan);
  outline-offset: -1px;
  border-color: var(--navy);
}
.field textarea { height: 150px; padding: 12px 14px; }
.field-error { color: #b3261e; font-size: 13px; margin-top: 4px; display: block; }
.form-note { font-size: 16px; color: var(--mute); margin-top: 10px; }
.form-success {
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  background: var(--surface);
  padding: 24px 26px;
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: auto; }
}

/* ── footer ─────────────────────────────────────────────────────────── */
.ftr { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; font-size: 15px; color: var(--body); }
.ftr a { color: var(--navy); text-decoration: none; }
.ftr a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ftr-col-head {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 12px;
  font-weight: 600;
}
.ftr-links { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 900px) { .ftr { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ftr { grid-template-columns: 1fr; } }

/* ── CTA band ───────────────────────────────────────────────────────── */
.cta { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* helpers */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 14px; }
.mt-3 { margin-top: 26px; }
.divider { height: 1px; background: var(--hair); margin: 24px 0; }

/* Everything above moves on hover or focus only — there is no entrance
   animation, no parallax and no scroll reveal, because a builder's site
   should feel like it is standing still. What is left is small enough that
   honouring the preference costs nothing. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .svc:hover { transform: none; }
  .svc::after { transform: scaleX(1); }
}