/* ==========================================================================
   Norman Wood Flooring — Design tokens & base styles
   --------------------------------------------------------------------------
   Direction: the page itself is cool, quiet and neutral so that the wood —
   the photography, the species swatches, the amber CTAs — is the only warm
   thing on screen. That's the product.

   Signature device: the "plank seam rule" (.seam) — a CSS-drawn strip of
   staggered board end-joints used to separate major sections, echoing the
   stagger pattern of an installed floor.

   Mobile-first: every layout starts single-column and widens at min-width
   breakpoints. No CSS framework, no build step — edit this file directly.
   ========================================================================== */

:root {
  /* ---- Color ------------------------------------------------------------ */
  --espresso: #241610;        /* darkest surface — from the logo's dark brown */
  --bark: #3b2618;            /* second dark surface / gradient partner */
  --ink: #2a211b;             /* body text */
  --ink-soft: #6b5f55;        /* secondary text */
  --paper: #f6f3ed;           /* page background */
  --paper-alt: #ece6da;       /* alternating section background */
  --surface: #ffffff;         /* raised card surface */
  --amber: #b4711e;           /* primary action — logo caramel, pushed warmer */
  --amber-deep: #8c5514;      /* hover / active */
  --amber-tint: #faeeda;      /* soft amber wash */
  --verdigris: #3c5148;       /* cool counterpoint — checkmarks, badges */
  --verdigris-tint: #e4eae5;
  --oat: #e0cda9;             /* light wood tint — seam rule, dark-section rules */
  --hairline: rgba(42, 33, 27, 0.14);
  --hairline-strong: rgba(42, 33, 27, 0.26);
  --hairline-light: rgba(246, 243, 237, 0.18);

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

  /* ---- Spacing scale (use these, not 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: 5.5rem;

  /* ---- Layout ----------------------------------------------------------- */
  --max-width: 1180px;
  --gutter: 1.15rem;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --header-h: 62px;

  /* ---- Depth: base -> elevated -> floating, all brown-tinted ------------ */
  --shadow-sm: 0 1px 2px rgba(36, 22, 16, 0.06), 0 1px 3px rgba(36, 22, 16, 0.05);
  --shadow-md: 0 10px 24px -8px rgba(36, 22, 16, 0.18), 0 2px 6px -2px rgba(36, 22, 16, 0.1);
  --shadow-lg: 0 30px 60px -20px rgba(36, 22, 16, 0.34), 0 10px 22px -12px rgba(36, 22, 16, 0.2);
  --shadow-cta: 0 8px 18px -8px rgba(180, 113, 30, 0.6), 0 2px 5px -2px rgba(180, 113, 30, 0.4);

  --ease-spring: cubic-bezier(0.22, 0.86, 0.25, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--espresso);
  margin: 0 0 var(--sp-4);
}

h1 { font-size: clamp(1.95rem, 6.4vw, 3.15rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; }
h3 { font-size: clamp(1.15rem, 3.4vw, 1.35rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--amber-deep); }

strong { font-weight: 600; color: var(--espresso); }

/* ---- Shared layout pieces ---------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }

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

.section--dark {
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(180, 113, 30, 0.16) 0%, transparent 58%),
    radial-gradient(100% 80% at 95% 100%, rgba(60, 81, 72, 0.34) 0%, transparent 60%),
    linear-gradient(168deg, var(--bark) 0%, var(--espresso) 72%);
  color: #efe7dc;
}

.section--dark h2,
.section--dark h3 { color: #fdfaf5; }

.section--dark p { color: rgba(239, 231, 220, 0.86); }

.eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: var(--sp-3);
}

.section--dark .eyebrow { color: var(--oat); }

.lede {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

.section--dark .lede { color: rgba(239, 231, 220, 0.82); }

.section-head { margin-bottom: var(--sp-6); }

/* ---- Signature: the plank seam rule ------------------------------------
   Staggered board end-joints, drawn with two gradients running at different
   periods so the "joints" never line up — the way a real floor is laid.
   ------------------------------------------------------------------------ */
.seam {
  height: 6px;
  border: 0;
  margin: 0;
  background-color: var(--oat);
  background-image:
    repeating-linear-gradient(90deg, rgba(59, 38, 24, 0.2) 0 1px, transparent 1px 137px),
    repeating-linear-gradient(90deg, transparent 0 61px, rgba(59, 38, 24, 0.2) 61px 62px, transparent 62px 211px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(59, 38, 24, 0.18);
}

.seam--hero {
  width: 132px;
  height: 5px;
  margin-bottom: var(--sp-5);
  background-image:
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(36, 22, 16, 0.6) 78px 80px, transparent 80px 132px);
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.85rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s var(--ease-spring),
    background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--amber);
  color: #fff;
  box-shadow: var(--shadow-cta);
}

.btn--primary:hover { background: var(--amber-deep); }

.btn--ghost {
  background: transparent;
  color: var(--espresso);
  border-color: var(--hairline-strong);
}

.btn--ghost:hover {
  border-color: var(--espresso);
  background: rgba(36, 22, 16, 0.04);
}

.section--dark .btn--ghost,
.hero .btn--ghost {
  color: #fdfaf5;
  border-color: rgba(253, 250, 245, 0.5);
}

.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover {
  border-color: #fdfaf5;
  background: rgba(253, 250, 245, 0.1);
}

.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media (min-width: 480px) {
  .btn-row { flex-direction: row; flex-wrap: wrap; }
  .btn--block { width: auto; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(246, 243, 237, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: var(--header-h);
}

.header__logo { display: flex; align-items: center; flex: none; }
.header__logo img { height: 34px; width: auto; max-width: none; flex: none; }

.header__actions { display: flex; align-items: center; gap: var(--sp-2); }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--espresso);
  text-decoration: none;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-md);
  transition: color 0.18s ease, background-color 0.18s ease;
}

.header__phone { white-space: nowrap; }
.header__phone:hover { color: var(--amber-deep); background: var(--amber-tint); }
.header__phone:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.header__phone svg { width: 17px; height: 17px; flex: none; }
.header__phone span { display: none; }

.header__cta { display: none; padding: 0.6rem 1.05rem; font-size: 0.95rem; white-space: nowrap; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--espresso);
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.nav-toggle:hover { background: rgba(36, 22, 16, 0.05); border-color: var(--espresso); }
.nav-toggle:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile nav panel — drops out of the header, which is the positioned parent */
.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  padding-block: var(--sp-3) var(--sp-5);
}

.nav.is-open { display: block; }

.nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.nav__list a {
  display: block;
  padding: 0.7rem var(--sp-3);
  border-radius: var(--radius-md);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.nav__list a:hover { background: var(--amber-tint); color: var(--amber-deep); }
.nav__list a:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }

.nav__cta { margin-top: var(--sp-4); }

@media (min-width: 960px) {
  :root { --header-h: 76px; }
  .header__logo img { height: 44px; }
  .header__phone span { display: inline; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }

  .nav {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin-inline: auto var(--sp-4);
  }
  .nav > .wrap { padding-inline: 0; max-width: none; }
  .nav__list { display: flex; gap: var(--sp-1); }
  .nav__list a { padding: 0.45rem 0.6rem; font-size: 0.93rem; white-space: nowrap; }
  .nav__cta { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  color: #fdfaf5;
  padding-block: var(--sp-8) var(--sp-9);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

/* Color treatment + legibility scrim over the hero photograph */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(36, 22, 16, 0.74) 0%, rgba(36, 22, 16, 0.42) 45%, rgba(36, 22, 16, 0.8) 100%),
    linear-gradient(120deg, rgba(59, 38, 24, 0.32) 0%, rgba(60, 81, 72, 0.26) 100%);
}

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hero__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.hero__copy p { color: rgba(253, 250, 245, 0.86); }

.hero__intro {
  font-size: 0.98rem;
  color: rgba(253, 250, 245, 0.78);
  margin-top: var(--sp-4);
}

@media (min-width: 940px) {
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: var(--sp-8); }
}

.hero h1 { color: #fff; margin-bottom: var(--sp-4); }

.hero__sub {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(253, 250, 245, 0.88);
  margin-bottom: var(--sp-5);
  max-width: 40rem;
}

.hero .btn-row { margin-bottom: var(--sp-5); }

.hero .form { margin-top: var(--sp-2); }

.form__heading {
  margin-bottom: var(--sp-2);
  font-size: 1.3rem;
}

.form__intro {
  margin-bottom: var(--sp-5);
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: 0.87rem;
  color: rgba(253, 250, 245, 0.78);
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero__meta li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hero__meta svg { width: 15px; height: 15px; color: var(--oat); flex: none; }

@media (min-width: 720px) {
  .hero { padding-block: var(--sp-9); }
  .hero__sub { font-size: 1.15rem; }
}

/* ---- Marquee strip under the hero: the service area, stated plainly ----- */
.areastrip {
  background: var(--espresso);
  color: rgba(239, 231, 220, 0.9);
  font-size: 0.83rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

.areastrip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  list-style: none;
  margin: 0;
  padding-block: 0.85rem;
}

.areastrip li { display: flex; align-items: center; gap: var(--sp-3); }

.areastrip li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--amber);
  transform: rotate(45deg);
  flex: none;
}

/* ==========================================================================
   Cards & grids
   ========================================================================== */
.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
}

.grid > * { min-width: 0; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--2-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease-spring), box-shadow 0.28s var(--ease-spring);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--paper-alt);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-spring);
}

.card:hover .card__media img { transform: scale(1.04); }

/* Gradient + color treatment so photos read as one set, not a stock grab-bag */
.card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(36, 22, 16, 0.5) 0%, rgba(36, 22, 16, 0.05) 45%, transparent 100%);
  pointer-events: none;
}

.card__body { padding: var(--sp-5); }
.card__body h3 { margin-bottom: var(--sp-3); }
.card__body p { font-size: 0.97rem; color: var(--ink-soft); }

/* Reframe helper: pulls a tall photo down so the floor fills the crop */
.card__media img.pos-bottom,
.spec__media img.pos-bottom { object-position: center bottom; }

/* ---- Specialty service cards (text-heavy, image optional) --------------- */
.spec {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--oat);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  min-width: 0;
  transition: border-left-color 0.25s ease, box-shadow 0.28s var(--ease-spring),
    transform 0.28s var(--ease-spring);
}

.spec:hover {
  border-left-color: var(--amber);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.spec h3 { margin-bottom: var(--sp-3); }
.spec p { font-size: 0.97rem; color: var(--ink-soft); }

.spec__media {
  margin: 0 0 var(--sp-4);
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paper-alt);
}

.spec__media img { width: 100%; height: 100%; object-fit: cover; }

.spec__list {
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.spec__list li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: var(--sp-3);
  align-items: start;
}

.spec__list li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 0.62em;
  background: var(--amber);
  transform: rotate(45deg);
}

/* ==========================================================================
   Split rows (image beside copy)
   ========================================================================== */
.split {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

.split > * { min-width: 0; }

.split--top { align-items: start; }

.split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.split__media img { width: 100%; }

.split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(36, 22, 16, 0.4), transparent 55%);
  pointer-events: none;
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
  .split--reverse .split__media { order: 2; }
}

/* ==========================================================================
   Why us — feature list
   ========================================================================== */
.features {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

@media (min-width: 700px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.feature {
  background: rgba(253, 250, 245, 0.06);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  transition: transform 0.28s var(--ease-spring), background-color 0.25s ease;
}

.feature:hover { transform: translateY(-3px); background: rgba(253, 250, 245, 0.1); }

.feature h3 {
  font-size: 1.15rem;
  margin-bottom: var(--sp-2);
}

.feature__mark {
  display: block;
  width: 26px;
  height: 4px;
  background: var(--oat);
  border-radius: 1px;
  margin-bottom: var(--sp-4);
  box-shadow: 6px 0 0 -1px rgba(224, 205, 169, 0.45);
}
.feature p { font-size: 0.95rem; margin: 0; }

/* ---- Process: a real sequence, so it gets real numbers ----------------- */
.process {
  counter-reset: step;
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.process li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--sp-4);
  align-items: start;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--hairline-light);
  font-size: 0.98rem;
}

.process li:last-child { border-bottom: 0; padding-bottom: 0; }

.process li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--oat);
  padding-top: 0.15em;
}

/* ==========================================================================
   Species selector — tap a species, see how it behaves
   ========================================================================== */
.species { margin-top: var(--sp-6); }

.species__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
  margin: 0 0 var(--sp-5);
  list-style: none;
}

.species__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.55rem 0.95rem 0.55rem 0.55rem;
  background: rgba(253, 250, 245, 0.06);
  border: 1px solid var(--hairline-light);
  border-radius: 999px;
  color: rgba(253, 250, 245, 0.82);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s var(--ease-spring), background-color 0.2s ease,
    border-color 0.2s ease, color 0.2s ease;
}

.species__tab:hover { transform: translateY(-2px); border-color: var(--oat); color: #fff; }
.species__tab:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.species__tab[aria-selected="true"] {
  background: var(--oat);
  border-color: var(--oat);
  color: var(--espresso);
}

.species__chip {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(36, 22, 16, 0.25);
  box-shadow: inset 0 -4px 6px -3px rgba(36, 22, 16, 0.5);
}

.species__panel {
  background: rgba(253, 250, 245, 0.06);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
}

.species__panel[hidden] { display: none; }

.species__panel h4 {
  font-size: 1.25rem;
  color: #fdfaf5;
  margin-bottom: var(--sp-2);
}

.species__panel p { margin: 0; font-size: 0.98rem; }

/* ==========================================================================
   Tables (pricing, service areas)
   ========================================================================== */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
  min-width: 30rem;
}

caption {
  text-align: left;
  padding: var(--sp-4) var(--sp-5) 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

th, td {
  padding: 0.85rem var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

thead th {
  background: var(--paper-alt);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

tbody th { font-weight: 600; color: var(--espresso); white-space: nowrap; }
tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

/* Below 620px a two-column table reads better stacked: the row header
   becomes a label and its value sits underneath. No horizontal scrolling. */
@media (max-width: 619px) {
  .table-scroll { overflow-x: visible; }
  table { min-width: 0; }
  table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table, tbody, tr, th, td { display: block; width: 100%; }
  tbody tr { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--hairline); }
  tbody tr:last-child { border-bottom: 0; }
  tbody th, tbody td { padding: 0; border: 0; white-space: normal; }
  tbody th { font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: var(--sp-1); }
}

/* ---- Price callout ----------------------------------------------------- */
.callout {
  margin-top: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--amber);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}

.callout__figures {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

@media (min-width: 560px) { .callout__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.figure__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 600;
  color: var(--espresso);
  line-height: 1.1;
  letter-spacing: -0.02em;
  display: block;
}

.figure__label {
  display: block;
  font-size: 0.87rem;
  color: var(--ink-soft);
  margin-top: var(--sp-1);
}

.callout p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

/* ---- Service-area map --------------------------------------------------- */
.map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  background: var(--paper-alt);
  aspect-ratio: 4 / 3;
}

.map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- Service-area list (replaces the old table) ------------------------- */
.arealist {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.arealist li {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--hairline);
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.arealist li:last-child { border-bottom: 0; padding-bottom: 0; }

.arealist li::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 0.62em;
  background: var(--amber);
  transform: rotate(45deg);
}

.arealist strong { display: block; color: var(--espresso); font-weight: 600; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }

.faq details {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.25s var(--ease-spring);
}

.faq details[open] { box-shadow: var(--shadow-sm); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--espresso);
  transition: background-color 0.18s ease;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--amber-tint); }
.faq summary:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }

.faq summary::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-top: 0.42em;
  flex: none;
  border-right: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-spring);
}

.faq details[open] summary::after { transform: rotate(-135deg); }

.faq__answer {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: 0.97rem;
  color: var(--ink-soft);
}

/* ==========================================================================
   Contact / quote request
   ========================================================================== */
.contact {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}

.contact p { font-size: 1.02rem; }

.contact .btn-row { justify-content: center; margin-top: var(--sp-6); }

.contact__call {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fdfaf5;
  text-decoration: none;
  border-bottom: 2px solid var(--amber);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.contact__call:hover { color: var(--oat); border-color: var(--oat); }
.contact__call:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.contact__call svg { width: 22px; height: 22px; color: var(--amber); flex: none; }

.contact__points {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
  font-size: 0.94rem;
}

.contact__points li {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.contact__points svg { width: 18px; height: 18px; color: var(--oat); margin-top: 0.28em; }

/* ---- Form -------------------------------------------------------------- */
.form {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 560px) { .form { padding: var(--sp-6); } }

.form__grid { display: grid; gap: var(--sp-4); }

@media (min-width: 560px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: var(--sp-2); }

.field label {
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--espresso);
  letter-spacing: 0.01em;
}

.field .req { color: var(--amber-deep); }

.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.field textarea { resize: vertical; min-height: 8rem; }

.field input:hover,
.field textarea:hover { border-color: var(--ink-soft); }

.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(180, 113, 30, 0.22);
}

.field span[data-fs-error] {
  font-size: 0.85rem;
  color: #a3341f;
  min-height: 0;
}

.section--dark .form p,
.form__footnote {
  margin-top: var(--sp-4);
  font-size: 0.83rem;
  color: var(--ink-soft);
}

.form__status {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 500;
}

/* The Formspree script toggles data-fs-active on these two blocks and injects
   its own stylesheet for them. These rules start the blocks hidden even if that
   script never loads, and are specific enough to keep the site's own styling
   once it does. */
.form .form__status[data-fs-success],
.form .form__status[data-fs-error] { display: none; }

.form .form__status[data-fs-success][data-fs-active],
.form .form__status[data-fs-error][data-fs-active] { display: block; }

.form .form__status[data-fs-success][data-fs-active] {
  background: var(--verdigris-tint);
  border: 1px solid rgba(60, 81, 72, 0.32);
  color: var(--verdigris);
}

.form .form__status[data-fs-error][data-fs-active] {
  background: #fbe9e4;
  border: 1px solid rgba(163, 52, 31, 0.32);
  color: #a3341f;
}

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

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  background: var(--espresso);
  color: rgba(239, 231, 220, 0.76);
  padding-block: var(--sp-7) calc(var(--sp-7) + 72px);
  font-size: 0.92rem;
}

@media (min-width: 960px) { .footer { padding-bottom: var(--sp-7); } }

.footer__grid { display: grid; gap: var(--sp-6); }

@media (min-width: 760px) { .footer__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } }

.footer__logo {
  display: inline-block;
  background: var(--paper);
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
}

.footer__logo img { height: 38px; width: auto; }

.footer h2 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--oat);
  margin-bottom: var(--sp-4);
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

.footer a {
  color: rgba(239, 231, 220, 0.88);
  text-decoration: none;
  transition: color 0.18s ease;
}

.footer a:hover { color: var(--amber); text-decoration: underline; }
.footer a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.footer__bottom {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline-light);
  font-size: 0.84rem;
  color: rgba(239, 231, 220, 0.56);
}

/* ==========================================================================
   Mobile sticky call bar — the primary conversion path on a phone
   ========================================================================== */
.stickybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: block;
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(36, 22, 16, 0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(224, 205, 169, 0.28);
}

.stickybar .btn { width: 100%; padding: 0.85rem 0.6rem; font-size: 1.05rem; letter-spacing: -0.01em; }

@media (min-width: 960px) { .stickybar { display: none; } }

/* ==========================================================================
   Motion — scroll reveal, and the reduced-motion opt-out
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

@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;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---- Accessibility helpers --------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 100;
  background: var(--amber);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease-spring);
}

.skip-link:focus { top: var(--sp-3); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}