/* ==========================================================================
   Broken Arrow Elite Tree Service — Design Tokens & Base
   --------------------------------------------------------------------------
   Palette is built from the job site itself: storm-sky slate, bone-white
   paper, hi-vis amber (the color of the crew's vests and the cones on the
   drive), and a quiet olive for canopy accents. Mobile-first throughout —
   every layout starts single-column and widens at min-width breakpoints.
   ========================================================================== */

:root {
  /* ---- Color ---- */
  --storm: #0a1e31;         /* brand navy, taken from the logo — darkest surface */
  --storm-2: #14304a;       /* lighter navy for gradients */
  --slate: #2c4a68;         /* mid navy for dark-section borders */
  --bone: #faf8f4;          /* page background */
  --bone-alt: #efebe3;      /* alternating section background */
  --surface: #ffffff;       /* raised card surface */
  --ink: #132434;           /* body text */
  --ink-soft: #566878;      /* secondary / muted text */
  --amber: #e58c04;         /* brand amber, taken from the logo — CTAs and the hazard rule */
  --amber-dark: #b06b02;    /* CTA hover / active */
  --amber-tint: #fdf1de;    /* soft amber wash for badges */
  --olive: #6b7c52;         /* secondary canopy accent */
  --olive-tint: #edf0e6;    /* soft olive wash for badges */
  --hairline: rgba(10, 30, 49, 0.14);
  --hairline-strong: rgba(10, 30, 49, 0.24);
  --hairline-dark: rgba(250, 248, 244, 0.16);

  /* ---- Type ---- */
  --font-display: "Archivo", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Spacing scale (used everywhere — no ad-hoc values) ---- */
  --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;

  /* ---- Layout ---- */
  --max-width: 1200px;
  --gutter: 1.25rem;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --header-h: 64px;

  /* ---- Shadows: layered and slate-tinted, never flat grey ---- */
  --shadow-sm: 0 1px 2px rgba(10, 30, 49, 0.07), 0 1px 3px rgba(10, 30, 49, 0.05);
  --shadow-md: 0 8px 20px -6px rgba(10, 30, 49, 0.16), 0 2px 6px -2px rgba(10, 30, 49, 0.09);
  --shadow-lg: 0 28px 56px -16px rgba(10, 30, 49, 0.3), 0 10px 20px -10px rgba(10, 30, 49, 0.18);
  --shadow-cta: 0 8px 20px -8px rgba(229, 140, 4, 0.55), 0 2px 5px -2px rgba(229, 140, 4, 0.35);

  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font: inherit; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--storm);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
p { margin: 0; }
table { border-collapse: collapse; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -120px;
  z-index: 300;
  background: var(--storm);
  color: var(--bone);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s var(--ease-spring);
}
.skip-link:focus { top: var(--sp-4); }

.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section { padding-block: var(--sp-7); }
@media (min-width: 768px) { section { padding-block: var(--sp-8); } }
@media (min-width: 1024px) { section { padding-block: var(--sp-9); } }

.section-alt { background: var(--bone-alt); }

/* ==========================================================================
   SIGNATURE ELEMENT — the hazard rule
   A hi-vis chevron stripe borrowed from hazard tape and truck chevrons.
   Used in exactly three places (header, emergency band, footer) so it stays
   a signature instead of decoration.
   ========================================================================== */
.hazard-rule {
  height: 6px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--amber) 0 10px,
    var(--storm) 10px 20px
  );
}
.hazard-rule--thin { height: 4px; }

/* ==========================================================================
   TYPOGRAPHY HELPERS
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-dark);
  margin-bottom: var(--sp-3);
}
.eyebrow--olive { color: var(--olive); }
.eyebrow--on-dark { color: var(--amber); }

.section-head { margin-bottom: var(--sp-6); }
.section-head h2 {
  font-size: clamp(1.65rem, 5.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.section-head p {
  margin-top: var(--sp-4);
  color: var(--ink-soft);
  max-width: 62ch;
  font-size: 1.0625rem;
}
.section-head--on-dark h2 { color: var(--bone); }
.section-head--on-dark p { color: rgba(250, 248, 244, 0.78); }

/* ==========================================================================
   BUTTONS — every state defined: hover, focus-visible, active
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring), background-color 0.2s var(--ease-spring),
              border-color 0.2s var(--ease-spring), color 0.2s var(--ease-spring),
              box-shadow 0.2s var(--ease-spring);
}
.btn .icon { font-size: 1.05em; }

.btn--primary {
  background: var(--amber);
  color: var(--storm);
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover { background: var(--amber-dark); color: #fff; transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0); background: var(--amber-dark); }

.btn--outline {
  background: transparent;
  color: var(--storm);
  border-color: var(--hairline-strong);
}
.btn--outline:hover { border-color: var(--storm); background: var(--storm); color: var(--bone); transform: translateY(-2px); }
.btn--outline:active { transform: translateY(0); }

.btn--ghost-dark {
  background: rgba(250, 248, 244, 0.08);
  color: var(--bone);
  border-color: rgba(250, 248, 244, 0.42);
}
.btn--ghost-dark:hover { background: var(--bone); color: var(--storm); border-color: var(--bone); transform: translateY(-2px); }
.btn--ghost-dark:active { transform: translateY(0); }

.btn--lg { padding: 1rem 1.6rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ==========================================================================
   HEADER — sticky, with the hazard rule as its bottom edge
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--surface);
  border-bottom: 4px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--amber) 0 10px, var(--storm) 10px 20px) 4;
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--storm);
}
.logo-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.logo-text strong {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.logo-text strong span { color: var(--amber-dark); }
.logo-text small {
  display: none;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}

.main-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.header-phone { padding: 0.55rem 0.9rem; font-size: 0.9rem; white-space: nowrap; }
.header-phone-text { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  font-size: 1.35rem;
  background: transparent;
  color: var(--storm);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-spring), border-color 0.2s var(--ease-spring);
}
.nav-toggle:hover { background: var(--bone-alt); border-color: var(--storm); }

/* Mobile drop-down nav panel */
.main-nav.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: var(--sp-2) var(--gutter) var(--sp-4);
  box-shadow: var(--shadow-lg);
}
.main-nav a {
  padding: 0.85rem 0;
  color: var(--storm);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  border-bottom: 1px solid var(--hairline);
  transition: color 0.2s var(--ease-spring);
}
.main-nav a:last-child { border-bottom: 0; }
.main-nav a:hover { color: var(--amber-dark); }

@media (min-width: 640px) {
  .header-phone-text { display: inline; }
  .logo-text small { display: block; }
}
@media (min-width: 1180px) {
  :root { --header-h: 76px; }
  .main-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }
  .main-nav a { padding: 0; border-bottom: 0; font-size: 0.9rem; white-space: nowrap; }
  .nav-toggle { display: none; }
  .logo-mark { width: 54px; height: 54px; }
  .logo-text strong { font-size: 1.1rem; }
}
@media (min-width: 1320px) {
  .main-nav { gap: var(--sp-5); }
  .main-nav a { font-size: 0.92rem; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: 0;
  background: var(--storm);
  color: var(--bone);
}
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}
/* Color treatment: a slate multiply pass, then a bottom-up scrim for text contrast */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--storm);
  mix-blend-mode: multiply;
  opacity: 0.62;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 30, 49, 0.97) 4%, rgba(10, 30, 49, 0.72) 45%, rgba(10, 30, 49, 0.55) 100%),
    radial-gradient(120% 90% at 15% 5%, rgba(229, 140, 4, 0.16), transparent 60%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding-block: var(--sp-7) var(--sp-8);
}
@media (min-width: 768px) { .hero-inner { padding-block: var(--sp-8) var(--sp-9); } }

.hero h1 {
  color: var(--bone);
  font-size: clamp(2rem, 7.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.hero h1 em {
  font-style: normal;
  color: var(--amber);
}
.hero-lede {
  margin-top: var(--sp-5);
  color: rgba(250, 248, 244, 0.85);
  font-size: 1.0625rem;
  max-width: 60ch;
}
.hero-cta-line {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bone);
  border-left: 3px solid var(--amber);
  padding-left: var(--sp-4);
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
/* The sticky call bar already owns "call us" on phones, so the hero leads with
   the estimate instead of stacking two identical amber call buttons. */
.hero-actions .hero-call { display: none; }
/* On phones the estimate button is the hero's only CTA, so it takes the solid
   amber treatment; on desktop it steps back and lets the call button lead. */
.hero-estimate {
  background: var(--amber);
  color: var(--storm);
  box-shadow: var(--shadow-cta);
}
.hero-estimate:hover { background: var(--amber-dark); color: #fff; transform: translateY(-2px); }
.hero-estimate:active { transform: translateY(0); background: var(--amber-dark); }
@media (min-width: 900px) {
  .hero-actions .hero-call { display: inline-flex; }
  .hero-estimate {
    background: rgba(250, 248, 244, 0.08);
    color: var(--bone);
    border-color: rgba(250, 248, 244, 0.42);
    box-shadow: none;
  }
  .hero-estimate:hover { background: var(--bone); color: var(--storm); border-color: var(--bone); }
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline-dark);
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(250, 248, 244, 0.88);
}
.hero-badge .icon { color: var(--amber); font-size: 1.05rem; }

@media (min-width: 480px) {
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 auto; }
}
@media (min-width: 1024px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.85fr);
    gap: var(--sp-7);
    align-items: start;
  }
  .hero-actions .btn { flex: 0 0 auto; }
}

/* Estimate card that sits in the hero on desktop, below the fold copy on mobile */
.hero-form-wrap { display: none; }
@media (min-width: 1024px) {
  .hero-form-wrap { display: block; }
}
.hero-form {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
}
.hero-form-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: var(--sp-2);
}
.hero-form-sub {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: var(--sp-5);
}

/* ==========================================================================
   TRUST STRIP — sits directly under the hero
   ========================================================================== */
.trust-strip {
  background: var(--bone-alt);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--sp-5);
}
.trust-list {
  display: grid;
  gap: var(--sp-4);
}
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 0.9375rem;
}
.trust-item .icon {
  color: var(--amber-dark);
  font-size: 1.25rem;
  margin-top: 2px;
}
.trust-item strong {
  font-family: var(--font-display);
  display: block;
  font-size: 0.95rem;
  color: var(--storm);
}
.trust-item span { color: var(--ink-soft); font-size: 0.875rem; }
@media (min-width: 700px) { .trust-list { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } }

/* ==========================================================================
   SERVICE SECTIONS — the "ledger" layout
   A media panel plus a stack of hairline-separated rows. Replaces the usual
   3-up card grid so the page reads like a work order, not a brochure.
   ========================================================================== */
.svc-layout { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .svc-layout {
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
  .svc-aside { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}
/* The rail is narrow, so its heading runs a step smaller than a full-width one */
.svc-aside .section-head { margin-bottom: var(--sp-5); }
.svc-aside .section-head h2 { font-size: clamp(1.55rem, 4.6vw, 2.15rem); }
.svc-aside .section-head p { font-size: 1rem; }

.svc-photo {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.svc-photo img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.svc-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 30, 49, 0.55), transparent 55%);
  pointer-events: none;
}
@media (min-width: 900px) {
  .svc-photo img { aspect-ratio: 1 / 1; }
}

.ledger { border-top: 1px solid var(--hairline-strong); }
.ledger-row {
  display: block;
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  border-left: 3px solid transparent;
  transition: border-left-color 0.25s var(--ease-spring), background-color 0.25s var(--ease-spring),
              transform 0.25s var(--ease-spring);
}
.ledger-row:hover {
  border-left-color: var(--amber);
  background: var(--surface);
  transform: translateX(3px);
}
.ledger-row h3 {
  font-size: 1.125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.ledger-row h3 .icon { color: var(--amber-dark); font-size: 1.25rem; }
.ledger-row p {
  margin-top: var(--sp-2);
  color: var(--ink-soft);
  font-size: 0.9688rem;
}
@media (min-width: 600px) {
  .ledger-row h3 { font-size: 1.25rem; }
  .ledger-row p { font-size: 1rem; }
}
/* On wide screens the row becomes a true two-column ledger line */
@media (min-width: 1100px) {
  .ledger-row {
    display: grid;
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
  }
  .ledger-row p { margin-top: 0; }
}

/* ==========================================================================
   EMERGENCY BAND — dark, urgent, opens with the hazard rule
   ========================================================================== */
.emergency {
  background:
    radial-gradient(90% 120% at 85% 0%, rgba(229, 140, 4, 0.14), transparent 60%),
    linear-gradient(var(--storm-2), var(--storm));
  color: var(--bone);
  position: relative;
}
.emergency h3 { color: var(--bone); }
.emergency .ledger { border-top-color: var(--hairline-dark); }
.emergency .ledger-row { border-bottom-color: var(--hairline-dark); }
.emergency .ledger-row:hover { background: rgba(250, 248, 244, 0.05); border-left-color: var(--amber); }
.emergency .ledger-row p { color: rgba(250, 248, 244, 0.76); }
.emergency .ledger-row h3 .icon { color: var(--amber); }
.emergency .svc-photo { box-shadow: var(--shadow-lg); }

.emergency-cta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: rgba(250, 248, 244, 0.06);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-md);
}
.emergency-cta p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
}
@media (min-width: 700px) {
  .emergency-cta { flex-direction: row; align-items: center; justify-content: space-between; }
  .emergency-cta .btn { flex-shrink: 0; }
}

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.why-layout { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .why-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--sp-8); align-items: stretch; }
}
.why-list { display: grid; gap: var(--sp-4); }
.why-item {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s var(--ease-spring);
}
.why-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--amber-tint);
  color: var(--amber-dark);
  font-size: 1.25rem;
}
.why-item:nth-child(even) .why-icon { background: var(--olive-tint); color: var(--olive); }
.why-item h3 { font-size: 1.0625rem; font-weight: 700; }
.why-item p { margin-top: var(--sp-1); color: var(--ink-soft); font-size: 0.9375rem; }

.why-photo {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.why-photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.why-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 30, 49, 0.5), transparent 60%);
}
/* Must come after the base rules above — at equal specificity the later
   declaration wins, and an earlier media block would simply be overridden.
   The photo column stretches to match the card list beside it, so the image is
   pinned to fill that box; a percentage height would not resolve against a
   height that only comes from grid stretching. */
@media (min-width: 900px) {
  .why-photo { min-height: 420px; }
  .why-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}

/* ==========================================================================
   PRICING TABLE — a real table on every screen, tuned to stay readable at 320px
   ========================================================================== */
.pricing-wrap {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  /* Scrolls rather than clipping the cost column on very narrow phones */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.pricing-table { width: 100%; font-size: 0.9375rem; }
.pricing-table th,
.pricing-table td {
  text-align: left;
  padding: var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.pricing-table thead th {
  background: var(--storm);
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 0;
}
.pricing-table tbody tr:last-child td { border-bottom: 0; }
.pricing-table tbody tr { transition: background-color 0.2s var(--ease-spring); }
.pricing-table tbody tr:hover { background: var(--amber-tint); }
.pricing-table td:last-child {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--storm);
  white-space: nowrap;
}
.pricing-note {
  margin-top: var(--sp-4);
  color: var(--ink-soft);
  font-size: 0.875rem;
  max-width: 70ch;
}
@media (max-width: 380px) {
  .pricing-table { font-size: 0.875rem; }
  .pricing-table th, .pricing-table td { padding: var(--sp-3) var(--sp-2); }
}
@media (min-width: 700px) {
  .pricing-table { font-size: 1rem; }
  .pricing-table th, .pricing-table td { padding: var(--sp-4) var(--sp-5); }
}

/* ==========================================================================
   SERVICE AREA
   ========================================================================== */
.area-layout { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .area-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
}
.area-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.area-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--surface);
}
.area-chip--primary {
  background: var(--storm);
  border-color: var(--storm);
  color: var(--bone);
  font-weight: 600;
}
.area-chip--primary .icon { color: var(--amber); }
.area-map {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
@media (min-width: 900px) { .area-map { height: 400px; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { display: grid; gap: var(--sp-3); max-width: 900px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s var(--ease-spring);
}
.faq-item:hover { box-shadow: var(--shadow-md); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--storm);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon {
  color: var(--amber-dark);
  font-size: 1.25rem;
  transition: transform 0.25s var(--ease-spring);
}
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-answer {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--ink-soft);
  font-size: 0.9688rem;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact {
  background:
    radial-gradient(100% 120% at 10% 0%, rgba(107, 124, 82, 0.22), transparent 55%),
    linear-gradient(var(--storm), var(--storm-2));
  color: var(--bone);
}
.contact-layout { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .contact-layout { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
}
.contact-details { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.contact-detail { display: flex; align-items: flex-start; gap: var(--sp-4); }
.contact-detail .icon { color: var(--amber); font-size: 1.35rem; margin-top: 4px; }
.contact-detail span {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 248, 244, 0.6);
}
.contact-detail a,
.contact-detail p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--bone);
  text-decoration: none;
  transition: color 0.2s var(--ease-spring);
}
.contact-detail a:hover { color: var(--amber); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.contact-form {
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 600px) { .contact-form { padding: var(--sp-6); } }

.form-fields { display: grid; gap: var(--sp-4); }
.form-row { display: grid; gap: var(--sp-4); }
@media (min-width: 520px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-field label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--storm);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bone);
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  width: 100%;
  transition: border-color 0.2s var(--ease-spring), box-shadow 0.2s var(--ease-spring),
              background-color 0.2s var(--ease-spring);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover { border-color: var(--ink-soft); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(229, 140, 4, 0.22);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #9aa4ad; }

/* Honeypot: hidden from people, visible to bots */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-legal { font-size: 0.8125rem; color: var(--ink-soft); }
/* Formspree AJAX reveals these by adding data-fs-active. The same hide rule is
   declared here so the messages stay hidden if that script never loads, and the
   selectors below are scoped to .contact-form so they outrank the plain-looking
   default boxes the Formspree script injects at runtime. */
[data-fs-success],
[data-fs-error] { display: none; }

.contact-form .form-error[data-fs-active] {
  display: block;
  background: #fdeceb;
  border: 1px solid #e5a49c;
  border-left: 4px solid #b23a22;
  color: #8f2c1c;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
/* Per-field validation notes (Formspree writes into [data-fs-error="fieldname"]) */
.contact-form [data-fs-error]:not([data-fs-error=""])[data-fs-active] {
  display: block;
  color: #8f2c1c;
  font-size: 0.8125rem;
  margin-top: var(--sp-1);
}
/* Success banner. Formspree clears the fields underneath it rather than
   removing them, so this reads as a confirmation above an empty form. */
.contact-form .form-success[data-fs-active] {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--olive-tint);
  color: var(--ink);
  border: 1px solid rgba(107, 124, 82, 0.35);
  border-left: 4px solid var(--olive);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: 1rem;
}
.form-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--olive);
  color: #fff;
  font-size: 1.1rem;
}
.form-success h3 { font-size: 1.05rem; }
.form-success p { margin-top: var(--sp-1); color: var(--ink-soft); font-size: 0.9375rem; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--storm);
  color: rgba(250, 248, 244, 0.72);
  padding-bottom: 84px; /* clears the sticky mobile call bar */
}
@media (min-width: 900px) { .site-footer { padding-bottom: 0; } }

.footer-inner {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-7);
}
@media (min-width: 700px) { .footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-5); } }

/* The logo is navy on transparent, so it sits on a light panel in the dark
   footer rather than disappearing into it. */
.footer-logo {
  display: inline-block;
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform 0.25s var(--ease-spring);
}
.footer-logo:hover { transform: translateY(-2px); }
.footer-logo img {
  width: 180px;
  max-width: 100%;
  height: auto;
}
.footer-tagline { font-size: 0.9375rem; max-width: 44ch; }
.footer-col h4 {
  color: var(--bone);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer-col ul { display: grid; gap: var(--sp-3); font-size: 0.9375rem; }
.footer-col a { text-decoration: none; transition: color 0.2s var(--ease-spring); }
.footer-col a:hover { color: var(--amber); }

.footer-bottom {
  padding-block: var(--sp-4);
  border-top: 1px solid var(--hairline-dark);
  font-size: 0.8125rem;
}

/* ==========================================================================
   STICKY MOBILE CALL BAR — one-tap conversion on phones
   ========================================================================== */
.mobile-call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  display: block;
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(10, 30, 49, 0.97);
  border-top: 1px solid var(--hairline-dark);
  box-shadow: 0 -8px 24px -10px rgba(10, 30, 49, 0.6);
}
.mobile-call-bar .btn { padding: 0.85rem 0.75rem; font-size: 1.05rem; }
@media (min-width: 900px) { .mobile-call-bar { display: none; } }

.area-intro {
  margin-top: var(--sp-4);
  color: var(--ink-soft);
  max-width: 62ch;
  font-size: 1.0625rem;
}
.area-layout h2 {
  font-size: clamp(1.65rem, 5.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Long email addresses must never push the dark contact column past the viewport */
.contact-detail a,
.contact-detail p { overflow-wrap: anywhere; }