/* ==========================================================================
   R SQUARED HANDYMAN SERVICE
   Design system + site styles
   --------------------------------------------------------------------------
   Palette is pulled directly from the badge logo:
     ink   = the charcoal in the wordmark / mountain shadow
     green = the forest green in the mountain + "HANDYMAN SERVICE"
     paper = a warm off-white, deliberately not #fff — keeps the site from
             reading sterile/templated and makes the green feel richer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand ------------------------------------------------------------ */
  --ink-900: #0F181D;
  --ink-800: #1C2A31; /* logo charcoal */
  --ink-700: #2B3C45;
  --ink-600: #3D515B;
  /* #5A6C75 not #6C7F89 — the lighter grey only reached 3.9:1 on the paper
     and sand backgrounds, short of the 4.5:1 needed for small text. */
  --ink-400: #5A6C75;
  --ink-300: #9AA9B1;
  --ink-200: #C6D0D5;

  --green-800: #0C4A19;
  --green-700: #10601F;
  --green-600: #16752B; /* logo green */
  --green-500: #1E8C36;
  --green-400: #34A34C;
  --green-100: #E2EFE4;

  --paper: #FAF8F4;
  --paper-2: #F2EEE6;
  --paper-3: #E7E1D5;
  --white: #FFFFFF;

  --amber: #D98324; /* used once, for the "estimate" stamp only */

  /* Semantic --------------------------------------------------------- */
  --bg: var(--paper);
  --surface: var(--white);
  --text: var(--ink-800);
  --text-muted: var(--ink-600);
  --text-subtle: var(--ink-400);
  --accent: var(--green-600);
  --accent-hover: var(--green-700);
  --line: rgba(28, 42, 49, 0.14);
  --line-strong: rgba(28, 42, 49, 0.28);
  --line-invert: rgba(255, 255, 255, 0.16);

  /* Type ------------------------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-script: "Dancing Script", "Brush Script MT", cursive;

  /* Fluid type scale — clamp() so it breathes without breakpoint jumps */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.125rem, 0.4vw + 1.03rem, 1.3125rem);
  --fs-xl: clamp(1.375rem, 1vw + 1.15rem, 1.75rem);
  --fs-2xl: clamp(1.75rem, 2vw + 1.3rem, 2.5rem);
  --fs-3xl: clamp(2.125rem, 3.4vw + 1.35rem, 3.5rem);
  --fs-4xl: clamp(2.6rem, 6vw + 1rem, 5.5rem);

  /* Spacing — 4pt rhythm */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(3.5rem, 8vw, 7.5rem);

  /* Shape ------------------------------------------------------------ */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* Elevation — restrained on purpose. Borders do most of the work. */
  --shadow-sm: 0 1px 2px rgba(15, 24, 29, 0.06);
  --shadow-md: 0 4px 16px -6px rgba(15, 24, 29, 0.16);
  --shadow-lg: 0 24px 48px -24px rgba(15, 24, 29, 0.34);

  /* Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 780px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --header-h: 76px;

  /* Layers */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-callbar: 70;
  --z-overlay: 90;
  --z-modal: 100;
}

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-y must be set explicitly alongside overflow-x — leaving it
     unset makes the UA compute it as auto (CSS2.1 11.1.1), which turns body
     into its own independent scroll container split from the page's normal
     scroll root. That breaks html's scroll-behavior/scroll-padding-top and
     anything that assumes window is the scrolling element. */
  overflow-x: hidden;
  overflow-y: visible;
  /* Room for the sticky mobile call bar so nothing hides behind it */
  padding-bottom: env(safe-area-inset-bottom);
}

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

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Dark sections need a focus ring that survives the background */
.is-dark :focus-visible { outline-color: var(--green-400); }

::selection { background: var(--green-600); color: #fff; }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  /* Archivo is a variable font — nudging the width axis wider echoes the
     squared-off lettering in the badge logo. */
  font-variation-settings: "wdth" 105;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); line-height: 1.15; }
h4 { font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -0.01em; }

p { text-wrap: pretty; }

.lede {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 56ch;
}

.script {
  font-family: var(--font-script);
  font-weight: 700;
  letter-spacing: 0;
  font-variation-settings: normal;
}

/* Small caps label used above nearly every section heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  flex: none;
}
/* Same dark-surface list as the ghost button — the mid green only manages
   2.5:1 on charcoal, so dark contexts step up to --green-400. */
.is-dark .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.rate-card .eyebrow { color: var(--green-400); }
.is-dark .eyebrow::before,
.hero .eyebrow::before,
.page-hero .eyebrow::before,
.rate-card .eyebrow::before { background: var(--green-400); }

.text-accent { color: var(--accent); }
.is-dark .text-accent { color: var(--green-400); }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head .lede { margin-top: var(--sp-4); }

.is-dark {
  background: var(--ink-800);
  color: var(--paper);
  --text: var(--paper);
  --text-muted: rgba(250, 248, 244, 0.72);
  --text-subtle: rgba(250, 248, 244, 0.55);
  --line: var(--line-invert);
  --surface: rgba(255, 255, 255, 0.04);
}
.is-sand { background: var(--paper-2); }

.grid { display: grid; gap: var(--sp-5); }
.stack > * + * { margin-top: var(--sp-4); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: var(--z-modal);
  transform: translateY(-200%);
  background: var(--ink-800);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-weight: 600;
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   5. Textures — the "not a template" layer
   -------------------------------------------------------------------------- */

/* Fine paper grain. Sits over dark sections at very low opacity so large
   flat fills don't look like flat digital slabs. */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* Topographic contour lines — echoes the mountain in the badge */
.contours {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.contours svg { width: 100%; height: 100%; }
.contours path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* A hairline rule set that repeats across the site as connective tissue */
.rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 0;
}
.rule--accent { height: 3px; width: 56px; background: var(--accent); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--green-600);
  --btn-fg: #fff;
  --btn-bd: var(--green-600);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: 0.9rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.btn:hover { --btn-bg: var(--green-700); --btn-bd: var(--green-700); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-800);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--green-700);
  --btn-bd: var(--green-600);
  box-shadow: none;
}
/* Dark contexts. .hero / .page-hero / .rate-card / .mobile-nav each carry
   their own dark background rather than the .is-dark class, so they're named
   explicitly — without this the ghost button renders ink-on-ink and vanishes.
   Any new dark surface must be added here too.
   Border alpha is 0.42 to clear the 3:1 non-text contrast minimum. */
.is-dark .btn--ghost,
.hero .btn--ghost,
.page-hero .btn--ghost,
.rate-card .btn--ghost,
.mobile-nav .btn--ghost { --btn-fg: var(--paper); --btn-bd: rgba(255, 255, 255, 0.42); }
.is-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.rate-card .btn--ghost:hover,
.mobile-nav .btn--ghost:hover { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: #fff; }

.btn--light { --btn-bg: var(--paper); --btn-fg: var(--ink-800); --btn-bd: var(--paper); }
.btn--light:hover { --btn-bg: #fff; --btn-bd: #fff; }

.btn--sm { min-height: 44px; padding: 0.6rem 1.15rem; font-size: var(--fs-xs); }
.btn--lg { min-height: 60px; padding: 1.05rem 2.1rem; font-size: var(--fs-base); }
.btn--block { width: 100%; }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn .spinner { display: none; }
.btn.is-loading .spinner { display: block; }
.btn.is-loading .btn__label { opacity: 0.6; }

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Text link with a rule that draws itself on hover */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  color: var(--accent);
  padding-block: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease-out);
}
.link:hover { background-size: 100% 1.5px; }
.link svg { transition: transform var(--dur) var(--ease-out); }
.link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   7. Header / navigation
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink-900);
  color: rgba(250, 248, 244, 0.82);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 40px;
  padding-block: var(--sp-2);
}
.topbar__items { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: var(--sp-2); }
.topbar__item svg { width: 14px; height: 14px; color: var(--green-400); flex: none; }
.topbar a:hover { color: #fff; }
@media (max-width: 860px) {
  .topbar__items li:not(:first-child) { display: none; }
}

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(250, 248, 244, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 24px -18px rgba(15, 24, 29, 0.5);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: var(--header-h);
}

/* Logo lockup: mountain mark + stacked wordmark, set in the web font so it
   stays crisp at every size. */
.logo { display: inline-flex; align-items: center; gap: var(--sp-3); flex: none; }
/* The real badge carries fine detail, so it needs a little more room than a
   simple mark would. The wordmark beside it does the legibility work. */
.logo__mark { width: 52px; height: 52px; flex: none; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.16rem;
  letter-spacing: 0.01em;
  font-variation-settings: "wdth" 112;
  color: var(--ink-800);
  white-space: nowrap;
}
.logo__sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.5625rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-600);
  margin-top: 4px;
  white-space: nowrap;
}
.is-dark .logo__name { color: var(--paper); }
.is-dark .logo__sub { color: var(--green-400); }
@media (max-width: 380px) {
  .logo__mark { width: 38px; height: 38px; }
  .logo__name { font-size: 1rem; }
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.25rem); }
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
  padding-block: var(--sp-3);
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--green-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover { color: var(--green-700); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--green-700); }

.header__actions { display: flex; align-items: center; gap: var(--sp-4); }
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--ink-800);
  font-variant-numeric: tabular-nums;
}
.header__phone svg { width: 18px; height: 18px; color: var(--green-600); }
.header__phone:hover { color: var(--green-700); }

/* Mobile menu ------------------------------------------------------- */
.menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  flex: none;
}
.menu-toggle__bars { position: relative; width: 20px; height: 14px; }
.menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink-800);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) linear;
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6px; }
.menu-toggle__bars span:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  flex-direction: column;
  background: var(--ink-800);
  color: var(--paper);
  padding: var(--sp-5) var(--gutter) calc(var(--sp-7) + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.is-open { display: flex; animation: sheet-in var(--dur-slow) var(--ease-out); }
@keyframes sheet-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  margin-bottom: var(--sp-5);
}
.mobile-nav__close {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-invert);
  border-radius: var(--r-md);
  color: var(--paper);
}
.mobile-nav__list { display: flex; flex-direction: column; }
.mobile-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 60px;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line-invert);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.mobile-nav__list a span { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--green-400); letter-spacing: 0.1em; }
.mobile-nav__cta { margin-top: auto; padding-top: var(--sp-6); display: grid; gap: var(--sp-3); }

@media (max-width: 1000px) {
  .nav, .header__phone { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 620px) {
  /* the sticky call bar covers this job on phones */
  .header__cta { display: none; }
}
/* No JS means the hamburger can't open anything — hide it and keep the quote
   button instead. Full navigation is still available in the footer. */
html:not(.js) .menu-toggle { display: none; }
html:not(.js) .header__cta { display: inline-flex; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink-800);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.hero .contours { color: rgba(255, 255, 255, 0.075); }
.hero::before {
  /* soft green light bleeding from the lower right, keeps the slab alive */
  content: "";
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  background: radial-gradient(circle, rgba(30, 140, 54, 0.28), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3.5rem, 9vw, 7rem);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-400);
  margin-bottom: var(--sp-5);
}
.hero__eyebrow::before {
  content: "";
  width: 40px;
  height: 2px;
  background: var(--green-400);
}

.hero h1 { margin-bottom: var(--sp-5); }
.hero h1 em {
  font-style: normal;
  color: var(--green-400);
  /* hand-drawn underline instead of a highlighter block */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 50 2, 150 2, 198 7' stroke='%2334A34C' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.32em;
  padding-bottom: 0.1em;
}
.hero__lede { font-size: var(--fs-lg); color: rgba(250, 248, 244, 0.76); max-width: 52ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.hero__actions .btn { flex: 1 1 auto; min-width: 220px; }
@media (min-width: 560px) { .hero__actions .btn { flex: 0 0 auto; } }

/* Trust strip along the bottom of the hero */
.hero__trust {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line-invert);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .hero__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero__trust li {
  padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
  border-right: 1px solid var(--line-invert);
}
.hero__trust li:nth-child(2n) { padding-left: var(--sp-4); }
@media (max-width: 759px) {
  .hero__trust li:nth-child(2n) { border-right: 0; }
  .hero__trust li:nth-child(-n + 2) { border-bottom: 1px solid var(--line-invert); }
}
@media (min-width: 760px) {
  .hero__trust li { padding-left: var(--sp-5); }
  .hero__trust li:first-child { padding-left: 0; }
  .hero__trust li:last-child { border-right: 0; }
}
.hero__trust strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero__trust span { font-size: var(--fs-sm); color: rgba(250, 248, 244, 0.6); }

/* The badge, floated in the hero */
.hero__badge { display: none; }
@media (min-width: 960px) {
  .hero__badge {
    display: block;
    justify-self: end;
    width: min(340px, 100%);
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.45));
    animation: float 7s var(--ease-in-out) infinite;
  }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Compact hero for interior pages */
.page-hero {
  position: relative;
  background: var(--ink-800);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(2.75rem, 7vw, 5.5rem);
}
.page-hero .contours { color: rgba(255, 255, 255, 0.07); }
.page-hero__inner { position: relative; z-index: 2; max-width: 68ch; }
.page-hero h1 { font-size: var(--fs-3xl); margin-bottom: var(--sp-4); }
.page-hero p { color: rgba(250, 248, 244, 0.76); font-size: var(--fs-lg); max-width: 54ch; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: rgba(250, 248, 244, 0.55);
  margin-bottom: var(--sp-5);
}
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumb li + li::before { content: "/"; color: rgba(250, 248, 244, 0.3); }

/* --------------------------------------------------------------------------
   9a. Service cards — the homepage overview. Each card is one link through
       to the matching section on the services page.
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }

.svc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: clamp(1.25rem, 2.2vw, 1.6rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: inherit;
  transition:
    border-color var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.svc:hover {
  border-color: var(--green-500);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.svc__icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--green-100);
  color: var(--green-700);
}
.svc__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.svc__desc {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.6;
}
.svc__more {
  margin-top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-700);
}
.svc__more svg { transition: transform var(--dur) var(--ease-out); }
.svc:hover .svc__more svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   9b. Service pill nav — jump nav on the services page
   -------------------------------------------------------------------------- */
.jumpnav { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.jumpnav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  touch-action: manipulation;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.jumpnav a:hover {
  color: var(--green-700);
  border-color: var(--green-500);
  background: var(--green-100);
}
.service__arrow {
  display: none;
  color: var(--green-600);
  transition: transform var(--dur) var(--ease-out);
}
@media (min-width: 900px) { .service__arrow { display: block; } }
.service:hover .service__arrow { transform: translateX(6px); }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card--interactive:hover {
  border-color: var(--green-500);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--green-100);
  color: var(--green-700);
  margin-bottom: var(--sp-4);
}
.is-dark .card__icon { background: rgba(52, 163, 76, 0.16); color: var(--green-400); }
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--text-muted); font-size: var(--fs-base); }

.cards-3 { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .cards-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }

/* --------------------------------------------------------------------------
   11. Process / steps
   -------------------------------------------------------------------------- */
.steps { display: grid; gap: var(--sp-6); counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); } }
.step { position: relative; padding-top: var(--sp-7); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--green-600);
  opacity: 0.28;
  line-height: 1;
}
.step::after {
  /* dashed connector between steps on desktop */
  content: "";
  position: absolute;
  top: 20px;
  left: 3.75rem;
  right: calc(var(--sp-7) * -1);
  height: 1px;
  background-image: linear-gradient(to right, var(--line-strong) 50%, transparent 50%);
  background-size: 8px 1px;
  display: none;
}
@media (min-width: 860px) { .step:not(:last-child)::after { display: block; } }
.step h3 { margin-bottom: var(--sp-3); }
.step p { color: var(--text-muted); font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   12. Pricing
   -------------------------------------------------------------------------- */
.pricing { display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 980px) {
  .pricing { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--sp-8); }
}

.rate-card {
  background: var(--ink-800);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.rate-card .contours { color: rgba(255, 255, 255, 0.08); }
/* :not(.contours) matters — a bare `> *` would override the absolute
   positioning on the texture layer and blow the card's height out. */
.rate-card > :not(.contours) { position: relative; z-index: 2; }
.rate-card__amount {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-display);
  margin-block: var(--sp-4) var(--sp-2);
}
.rate-card__amount b {
  font-size: clamp(3rem, 7vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rate-card__amount span { font-size: var(--fs-lg); color: rgba(250, 248, 244, 0.6); font-family: var(--font-body); }
.rate-card ul { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.rate-card li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-base);
  color: rgba(250, 248, 244, 0.82);
}
.rate-card li svg { color: var(--green-400); margin-top: 4px; }

/* Flat-rate price list, set like a printed menu */
.price-list { border-top: 2px solid var(--ink-800); }
.price-list__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.price-list__name { font-weight: 600; }
.price-list__name small { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--text-subtle); }
.price-list__dots {
  /* leader dots — the printed-menu detail that kills the template look */
  flex: 1;
  border-bottom: 1px dotted var(--line-strong);
  margin-inline: var(--sp-3);
  transform: translateY(-4px);
  display: none;
}
@media (min-width: 560px) {
  .price-list__row { grid-template-columns: auto 1fr auto; }
  .price-list__dots { display: block; }
}
.price-list__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--green-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.price-note {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--text-subtle);
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.price-note svg { flex: none; margin-top: 3px; color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   13. "What I don't do" — honesty block
   -------------------------------------------------------------------------- */
.honest { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .honest { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); } }
.honest__col h3 { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.honest__col h3 svg { flex: none; }
.honest li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
  color: var(--text-muted);
}
.honest li svg { margin-top: 4px; flex: none; }
.honest__yes svg { color: var(--green-500); }
.honest__no svg { color: var(--ink-300); }
.honest__no li { color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   14. Service area
   -------------------------------------------------------------------------- */
.area { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) { .area { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); } }
.area__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-1) var(--sp-4);
}
.area__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--fs-base);
  color: var(--text-muted);
  border-bottom: 1px solid var(--line);
}
.area__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--green-500);
  transform: rotate(45deg);
}

/* Marquee of towns — slow, subtle, respects reduced motion */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: var(--sp-4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--sp-6);
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-400);
  white-space: nowrap;
}
.marquee__item::after { content: ""; width: 7px; height: 7px; background: var(--green-500); transform: rotate(45deg); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   15. Testimonials
   -------------------------------------------------------------------------- */
.quotes { display: grid; gap: var(--sp-5); }
@media (min-width: 860px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.quote__stars { display: flex; gap: 3px; color: var(--green-600); }
.quote blockquote { font-size: var(--fs-base); color: var(--text); line-height: 1.7; }
.quote figcaption { margin-top: auto; display: flex; align-items: center; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.quote__avatar {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink-800);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
.quote__who strong { display: block; font-size: var(--fs-base); }
.quote__who span { font-size: var(--fs-sm); color: var(--text-subtle); }

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 64px;
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green-700); }
.faq__icon { position: relative; width: 20px; height: 20px; flex: none; }
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: var(--green-600);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.faq__icon::before { top: 9px; left: 0; width: 20px; height: 2px; }
.faq__icon::after { top: 0; left: 9px; width: 2px; height: 20px; }
.faq details[open] .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__body { padding-bottom: var(--sp-5); color: var(--text-muted); max-width: 68ch; }
.faq__body > * + * { margin-top: var(--sp-3); }
.faq details[open] .faq__body { animation: reveal var(--dur) var(--ease-out); }
@keyframes reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: repeat(2, 1fr); } }

.field { display: grid; gap: var(--sp-2); }
.field > label {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}
.field .req { color: var(--green-600); }
.field .hint { font-size: var(--fs-xs); color: var(--text-subtle); }
.is-dark .field .hint { color: rgba(250, 248, 244, 0.55); }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: var(--white);
  color: var(--ink-800);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-base); /* 16px — stops iOS zoom-on-focus */
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  appearance: none;
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%233D515B' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.75rem;
  cursor: pointer;
}
.input:hover,
.select:hover,
.textarea:hover { border-color: var(--ink-400); }
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(22, 117, 43, 0.18);
}
.input::placeholder,
.textarea::placeholder { color: var(--ink-300); }

/* Validation — only after the field has been touched, never on keystroke */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea {
  border-color: #B3261E;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.14);
}
.field.is-invalid .form__consent input {
  outline: 2px solid #B3261E;
  outline-offset: 2px;
}
.field__error {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #B3261E;
}
.is-dark .field__error { color: #FF8A80; }
.field.is-invalid .field__error { display: flex; }
.field__error svg { flex: none; }

/* Chip-style checkbox group for service selection */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.chip span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1rem;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: all var(--dur-fast) var(--ease-out);
  user-select: none;
}
.chip input:checked + span {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}
.chip input:focus-visible + span { outline: 3px solid var(--green-500); outline-offset: 3px; }
.chip:hover span { border-color: var(--green-500); }

.form__consent { display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3); align-items: start; }
.form__consent input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--green-600); }
.form__consent label { font-size: var(--fs-sm); color: var(--text-muted); }

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

.form__status {
  display: none;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: var(--fs-base);
}
.form__status.is-visible { display: flex; }
.form__status.is-success { background: var(--green-100); border-color: var(--green-500); color: var(--green-800); }
.form__status.is-error { background: #FDECEA; border-color: #B3261E; color: #8C1D18; }
.form__status svg { flex: none; margin-top: 2px; }
.form__status strong { display: block; margin-bottom: var(--sp-1); }

/* --------------------------------------------------------------------------
   18. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--green-700);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.cta-band .contours { color: rgba(255, 255, 255, 0.11); }
.cta-band__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8); } }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.82); margin-top: var(--sp-4); max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.cta-band .btn { --btn-bg: #fff; --btn-fg: var(--green-800); --btn-bd: #fff; }
.cta-band .btn:hover { --btn-bg: var(--paper); --btn-bd: var(--paper); }
.cta-band .btn--ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, 0.5); }
.cta-band .btn--ghost:hover { --btn-bg: transparent; --btn-bd: #fff; }

/* Slim variant — sits directly under the pricing block, so it needs to read
   as a next step rather than a second full-height section. */
.cta-band--slim .cta-band__inner { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.cta-band--slim h2 { font-size: var(--fs-xl); }
.cta-band--slim p { margin-top: var(--sp-2); font-size: var(--fs-base); }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--ink-900);
  color: rgba(250, 248, 244, 0.72);
  font-size: var(--fs-base);
  overflow: hidden;
}
.footer__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--sp-7);
  padding-block: clamp(3rem, 6vw, 5rem) var(--sp-6);
}
@media (min-width: 860px) {
  .footer__inner { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
}
.footer h3 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-400);
  margin-bottom: var(--sp-4);
}
.footer__links { display: grid; gap: var(--sp-3); }
.footer__links a { font-size: var(--fs-sm); transition: color var(--dur-fast) var(--ease-out); }
.footer__links a:hover { color: #fff; }
.footer__brand p { font-size: var(--fs-sm); max-width: 38ch; margin-top: var(--sp-4); color: rgba(250, 248, 244, 0.6); }
.footer__brand .script { font-size: var(--fs-xl); color: var(--green-400); display: block; margin-top: var(--sp-4); }
.footer__contact { display: grid; gap: var(--sp-3); }
.footer__contact a,
.footer__contact div { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-sm); }
.footer__contact svg { flex: none; margin-top: 3px; color: var(--green-400); }
.footer__contact a:hover { color: #fff; }

.footer__bottom {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-invert);
  font-size: var(--fs-xs);
  color: rgba(250, 248, 244, 0.45);
}
.footer__bottom a:hover { color: #fff; }

@media (max-width: 720px) {
  /* keep the footer clear of the sticky call bar */
  .footer__bottom { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   20. Sticky mobile call bar — highest-converting element on a trades site
   -------------------------------------------------------------------------- */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-callbar);
  display: none;
  gap: 1px;
  background: var(--line-invert);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: env(safe-area-inset-bottom);
  /* Shown by default. Without JS there is nothing to add .is-visible, and a
     permanently hidden call bar would cost real phone calls. */
  transform: translateY(0);
  transition: transform var(--dur-slow) var(--ease-out);
  box-shadow: 0 -8px 30px -12px rgba(15, 24, 29, 0.4);
}
/* With JS, hide it until the hero has scrolled past. */
html.js .callbar { transform: translateY(110%); }
html.js .callbar.is-visible { transform: translateY(0); }
.callbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 60px;
  padding: var(--sp-3);
  background: var(--ink-800);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  touch-action: manipulation;
}
.callbar a.callbar__primary { background: var(--green-600); }
.callbar a:active { filter: brightness(0.92); }
.callbar svg { flex: none; }
@media (max-width: 720px) { .callbar { display: flex; } }

/* --------------------------------------------------------------------------
   21. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   22. Utilities
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   23. Motion & contrast preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
  .hero__badge { animation: none; }
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(28, 42, 49, 0.4);
    --line-strong: rgba(28, 42, 49, 0.7);
    --text-muted: var(--ink-800);
    --text-subtle: var(--ink-700);
  }
}

/* --------------------------------------------------------------------------
   24. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .topbar, .callbar, .cta-band, .mobile-nav, .contours, .hero__badge { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero, .page-hero, .footer, .rate-card { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .section { padding-block: 1.5rem; }
}