/* ==========================================================================
   SILVERPINE CAR DETAILING
   One hand-written stylesheet. No framework, no build step.

   Reference language: a precision workshop service record. Tight type,
   hairline rules, all-caps mono micro-labels over heavy headings, dense
   and confident, almost no decoration.

   This is a LIGHT site. Paper is the working surface everywhere; pine and
   copper are used as ink and accent, never as a dark background. The only
   dark pixels on the page are the photo placeholder panels and the small
   tag chips that sit on top of photographs.

   Sections in this file:
     00  Tokens (colors, spacing, type)
     01  Reset and base
     02  Reusable pieces (buttons, labels, rules, repeated CTA)
     03  Header
     04  Hero + booking form
     05  Full-width photo strip
     06  Problem strip
     07  Packages (stacked tiers)
     08  Before / after slider
     09  Reviews
     10  How it works
     11  Service area
     12  FAQ
     13  Contact
     14  Footer
     15  Mobile call bar
     16  Thank-you page
     17  Motion
   ========================================================================== */


/* ==========================================================================
   00  TOKENS
   Every color and every spacing value on this site is declared here.
   Nothing else in this file uses a raw hex value or a one-off pixel gap.
   ========================================================================== */

:root {

  /* --- Palette -------------------------------------------------------- */
  --ink:        #1A1D21;   /* primary text and dark rules                 */
  --ink-soft:   #2B3137;   /* photo placeholder panels only               */
  --paper:      #EBEAE6;   /* main page background, cool neutral gray     */
  --paper-alt:  #F5F4F1;   /* the lighter alternating band                */
  --paper-pure: #FFFFFF;   /* cards and the form                          */
  --pine:       #22483A;   /* deep pine: the brand color, used as ink     */ /* unslop-ignore */
  --silver:     #8A9298;   /* cold steel gray: metadata on dark surfaces  */
  --copper:     #B95622;   /* the single accent: CTAs, active, key numbers*/ /* unslop-ignore */
  --line:       #D5D2CA;   /* hairline rules                              */

  /* --- Derived tones ---------------------------------------------------
     Built from the nine colors above so no new hex ever enters the file. */
  --ink-dim:        rgba(26, 29, 33, 0.68);   /* muted body + micro-labels */
  --ink-tint:       rgba(26, 29, 33, 0.05);   /* pressed / hover wash      */
  --pine-wash:      rgba(34, 72, 58, 0.06);   /* tinted section background */
  --pine-line:      rgba(34, 72, 58, 0.20);   /* brand-tinted hairline     */
  --copper-press:   rgba(185, 86, 34, 0.86);
  --copper-tint:    rgba(185, 86, 34, 0.10);
  --paper-dim:      rgba(235, 234, 230, 0.76); /* text on the dark panels  */
  --line-dark:      rgba(138, 146, 152, 0.28); /* hairlines on dark panels */
  --scrim:          rgba(26, 29, 33, 0.55);    /* chips over photos        */
  --veil-top:       rgba(26, 29, 33, 0.05);    /* photo caption overlay    */
  --veil-bottom:    rgba(26, 29, 33, 0.88);

  /* --- Spacing scale ---------------------------------------------------
     The only spacing values allowed anywhere in this file. */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-96:  96px;
  --sp-128: 128px;

  /* --- Type ------------------------------------------------------------ */
  --font-head: "Archivo Black", "Arial Black", Helvetica, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-micro:  12px;
  --t-mono:   13px;
  --t-small:  15px;
  --t-body:   17px;
  --t-lede:   19px;
  --t-h3:     20px;
  --t-h2:     clamp(27px, 4.4vw, 40px);
  --t-h1:     clamp(30px, 5vw, 52px);
  --t-price:  clamp(26px, 4vw, 34px);
  --t-num:    clamp(34px, 6vw, 54px);

  /* --- Layout constants ------------------------------------------------ */
  --wrap:        1200px;
  --wrap-narrow: 820px;
  --radius:      12px;
  --radius-lg:   16px;
  --hairline:    1px;
  --header-h:    64px;
}


/* ==========================================================================
   01  RESET AND BASE
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); line-height: 1.12; }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p { margin: 0; overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

img {
  display: block;
  max-width: 100%;
  height: auto;
  /* If a photo has not been added yet, the box still holds its shape and
     the alt text stays readable instead of the layout collapsing. */
  background-color: var(--ink-soft);
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.5;
}

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

/* Focus: one visible copper ring everywhere, no exceptions. */
:focus-visible {
  outline: calc(var(--hairline) * 2) solid var(--copper);
  outline-offset: var(--sp-4);
  border-radius: var(--radius);
}

.sr-only {
  position: absolute;
  width: var(--hairline);
  height: var(--hairline);
  padding: 0;
  margin: calc(var(--hairline) * -1);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--sp-16);
  top: calc(var(--sp-64) * -1);
  z-index: 100;
  background: var(--copper);
  color: var(--paper-pure);
  padding: var(--sp-12) var(--sp-16);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
}
.skip-link:focus { top: var(--sp-8); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  /* Tighter on phones so content sits closer to the screen edge; widens
     back out at the 700px breakpoint below. */
  padding-inline: var(--sp-16);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sp-48); }

/* Headings stand alone in most sections now, so the head block no longer
   needs a bottom margin sized for a heading plus a paragraph. */
.section-head { max-width: var(--wrap-narrow); margin-bottom: var(--sp-32); }
.section-head h2 { margin-bottom: 0; }


/* ==========================================================================
   02  REUSABLE PIECES
   ========================================================================== */

/* The mono micro-label. This plus a heavy heading is the whole personality
   of the site, so it is used the same way everywhere. Default color is the
   light-background one, since almost every surface here is light. */
.mono-label,
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin: 0;
}

.eyebrow { margin-bottom: var(--sp-16); }
.eyebrow-brand { color: var(--pine); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: var(--sp-16) var(--sp-24);
  border: var(--hairline) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--copper);
  color: var(--paper-pure);
  border-color: var(--copper);
}
.btn-primary:hover { background: var(--copper-press); border-color: var(--copper-press); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); background: var(--ink-tint); }

.btn-sm { padding: var(--sp-12) var(--sp-16); }
.btn-block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  margin-top: var(--sp-32);
}

/* The repeated call to action. Identical button, identical text, at the
   end of every section, so there is never a scroll position on this page
   where booking is more than a thumb-reach away. */
.cta-band {
  margin-top: var(--sp-48);
  display: flex;
  justify-content: center;
}


/* ==========================================================================
   03  HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper-pure);
  border-bottom: var(--hairline) solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  min-height: var(--header-h);
  padding-block: var(--sp-12);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  color: var(--ink);
}
.wordmark-mark { color: var(--pine); flex: none; }

.wordmark-text {
  font-family: var(--font-head);
  font-size: var(--t-body);   /* steps up to --t-h3 at 700px */
  letter-spacing: -0.02em;
  line-height: 1;
}

/* On a narrow phone the header button shortens to "Book" so the row
   still fits at 320px. The full label comes back at 700px. */
.btn-more { display: none; }

.wordmark-sub {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  padding-left: var(--sp-8);
  border-left: var(--hairline) solid var(--line);
  align-self: stretch;
  align-content: center;
}

.header-nav { display: none; gap: var(--sp-24); }
.header-nav a {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  padding-block: var(--sp-4);
  border-bottom: var(--hairline) solid transparent;
}
.header-nav a:hover { color: var(--ink); border-bottom-color: var(--copper); }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-12);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.08em;
}
.header-phone:hover { border-color: var(--ink); }
/* Under 700px the phone collapses to an icon-only button. */
.header-phone-text { display: none; }

/* Under 700px the header keeps Call only; Book already lives in the
   sticky bottom bar, so showing it twice is redundant on a phone. */
.header-book { display: none; }


/* ==========================================================================
   04  HERO + BOOKING FORM
   The form sits in the hero on purpose: it is the first thing on the page
   a ready-to-book visitor can act on, with no scrolling.
   ========================================================================== */

.hero {
  background: var(--pine-wash);
  border-bottom: var(--hairline) solid var(--line);
  padding-block: var(--sp-48);
}

.hero-grid { display: grid; gap: var(--sp-48); }

.hero-copy h1 { margin-bottom: var(--sp-24); }

.hero-lede {
  font-size: var(--t-lede);
  color: var(--ink-dim);
  max-width: 54ch;
}

.hero-points {
  margin-top: var(--sp-24);
  display: grid;
  gap: var(--sp-12);
}
.hero-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  font-size: var(--t-small);
  color: var(--ink);
}
.hero-points svg { flex: none; color: var(--pine); margin-top: var(--sp-4); }

.proof-line {
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: var(--hairline) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

.form-card {
  background: var(--paper-pure);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-24);
}

.form-card-label { margin-bottom: var(--sp-8); }
.form-card-title { font-size: var(--t-h3); margin-bottom: var(--sp-8); }
.form-card-sub {
  font-size: var(--t-small);
  color: var(--ink-dim);
  padding-bottom: var(--sp-16);
  margin-bottom: var(--sp-16);
  border-bottom: var(--hairline) solid var(--line);
}

.field { margin-bottom: var(--sp-16); }

.field label {
  display: block;
  margin-bottom: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

.req { color: var(--copper); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--sp-12);
  background: var(--paper-pure);
  color: var(--ink);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  font-size: var(--t-small);
}
.field textarea { resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-dim); }

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

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--copper); background: var(--copper-tint); }

.field-error {
  margin-top: var(--sp-8);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--copper);
}

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

.form-status {
  min-height: var(--sp-24);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--copper);
}

.form-fineprint {
  margin-top: var(--sp-12);
  font-size: var(--t-micro);
  color: var(--ink-dim);
}
.form-fineprint a { border-bottom: var(--hairline) solid var(--line); }
.form-fineprint a:hover { border-bottom-color: var(--copper); }


/* ==========================================================================
   05  FULL-WIDTH PHOTO STRIP
   ========================================================================== */

.hero-strip {
  position: relative;
  margin: 0;
  border-bottom: var(--hairline) solid var(--line);
}

.hero-strip img {
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 9;
  object-fit: cover;
  padding: var(--sp-16);   /* keeps fallback alt text off the edge */
}

.hero-strip-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-32) var(--sp-24) var(--sp-16);
  background: linear-gradient(to bottom, var(--veil-top), var(--veil-bottom));
  color: var(--paper-pure);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.5;
}


/* ==========================================================================
   06  PROBLEM STRIP
   ========================================================================== */

.problem { background: var(--paper); }

.strip {
  display: grid;
  border-top: var(--hairline) solid var(--line);
}

.strip-item {
  padding-block: var(--sp-24);
  border-bottom: var(--hairline) solid var(--line);
}

.strip-item .mono-label { margin-bottom: var(--sp-12); }
.strip-item h3 { margin-bottom: var(--sp-12); }
.strip-item p { color: var(--ink-dim); font-size: var(--t-small); }
.strip-item p + p { margin-top: var(--sp-12); }


/* ==========================================================================
   07  PACKAGES
   Three columns standing side by side, each card read top to bottom.
   Every card uses the same vertical order — label, name, price, summary,
   what is included, time and place, button — so the equivalent line sits
   at the same height in all three and the eye can compare straight across.
   The button is pinned to the bottom of each card so they always align.
   ========================================================================== */

.packages { background: var(--paper-alt); border-top: var(--hairline) solid var(--line); }

.tiers {
  display: grid;
  gap: var(--sp-24);
  align-items: stretch;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper-pure);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-24);
}

/* The featured column: a solid dark card instead of a pale tint. A faint
   wash read as "discounted" next to two crisp white cards; a hard color
   change against them can't be mistaken for anything but the one to pick.
   Text inside switches to the same light-on-dark pairing used for the
   hero and footer elsewhere on the site. */
.tier-featured {
  background: var(--ink);
}
.tier-featured h3 { color: var(--paper-pure); }
.tier-featured .tier-price { border-bottom-color: var(--line-dark); }
.tier-featured .price-note { color: var(--paper-dim); }
.tier-featured .tier-list li { color: var(--paper-dim); }
.tier-featured .tier-list li::before { background: var(--copper); }

/* The single pill-shaped element allowed anywhere on this site. */
.tier-badge {
  position: absolute;
  top: calc(var(--sp-12) * -1);
  left: var(--sp-24);
  padding: var(--sp-4) var(--sp-12);
  border-radius: var(--sp-16);
  background: var(--copper);
  color: var(--paper-pure);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.6;
}

.tier h3 { margin-bottom: var(--sp-12); }

/* Carries the rule that separates the card's header from its contents. */
.tier-price {
  padding-bottom: var(--sp-16);
  margin-bottom: var(--sp-16);
  border-bottom: var(--hairline) solid var(--line);
}

.price {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-price);
  color: var(--copper);
  line-height: 1.1;
}

.price-note {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}

.tier-list { margin-bottom: var(--sp-24); }

.tier-list li {
  position: relative;
  padding-left: var(--sp-16);
  font-size: var(--t-small);
  color: var(--ink-dim);
  margin-bottom: var(--sp-8);
}
.tier-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--sp-12);
  width: var(--sp-8);
  height: var(--hairline);
  background: var(--pine);
}
.tier-list li:last-child { margin-bottom: 0; }

/* margin-top:auto pushes the button to the foot of the card, so all three
   buttons line up however long the lists run. */
.tier-cta { margin-top: auto; }

.table-footnote {
  margin-top: var(--sp-24);
  font-size: var(--t-small);
  color: var(--ink-dim);
  max-width: 76ch;
}


/* ==========================================================================
   08  BEFORE / AFTER
   ========================================================================== */

.work { background: var(--paper); border-top: var(--hairline) solid var(--line); }

.ba-frame {
  --ba-pos: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-soft);
  touch-action: pan-y;
  user-select: none;
}

.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: var(--sp-16);
  pointer-events: none;
}

.ba-clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

.ba-tag {
  position: absolute;
  top: var(--sp-12);
  padding: var(--sp-4) var(--sp-8);
  background: var(--scrim);
  border: var(--hairline) solid var(--line-dark);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper-pure);
}
.ba-tag-before { left: var(--sp-12); }
.ba-tag-after  { right: var(--sp-12); }

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos);
  width: var(--sp-48);
  margin-left: calc(var(--sp-24) * -1);
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
}

.ba-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(var(--hairline) * 2);
  margin-left: calc(var(--hairline) * -1);
  background: var(--paper-pure);
}

.ba-handle-grip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-48);
  height: var(--sp-48);
  border-radius: 50%;              /* the one round element: a drag grip */
  background: var(--copper);
  color: var(--paper-pure);
  border: calc(var(--hairline) * 2) solid var(--paper-pure);
}

.ba-caption {
  display: block;
  margin-top: var(--sp-16);
  padding-top: var(--sp-16);
  border-top: var(--hairline) solid var(--line);
  color: var(--pine);
}

.ba-caption-plain {
  display: block;
  margin-top: var(--sp-8);
  font-family: var(--font-body);
  font-size: var(--t-small);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-dim);
  max-width: 76ch;
}


/* ==========================================================================
   09  REVIEWS
   ========================================================================== */

.reviews { background: var(--paper-alt); border-top: var(--hairline) solid var(--line); }

/* Two flex columns rather than one grid: each column stacks its own cards
   independently, so column height never depends on the other column. */
.review-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.review-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.review-card {
  margin: 0;
  padding: var(--sp-24);
  background: var(--paper-pure);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
}

.stars {
  display: flex;
  gap: var(--sp-4);
  color: var(--copper);
  margin-bottom: var(--sp-16);
}

.review-card blockquote { margin: 0; }
.review-card blockquote p { font-size: var(--t-small); }

.review-card figcaption {
  margin-top: var(--sp-16);
  padding-top: var(--sp-12);
  border-top: var(--hairline) solid var(--line);
}

.review-name {
  display: block;
  font-weight: 600;
  font-size: var(--t-small);
}
.review-card .mono-label { display: block; margin-top: var(--sp-4); }


/* ==========================================================================
   10  HOW IT WORKS
   ========================================================================== */

.steps { background: var(--paper); border-top: var(--hairline) solid var(--line); }

.step-row {
  display: grid;
  border-top: var(--hairline) solid var(--line);
}

.step {
  padding-block: var(--sp-24);
  border-bottom: var(--hairline) solid var(--line);
}

.step-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-num);
  line-height: 1;
  color: var(--copper);
  margin-bottom: var(--sp-16);
}

.step h3 { margin-bottom: var(--sp-8); }
.step p { font-size: var(--t-small); color: var(--ink-dim); }


/* ==========================================================================
   11  SERVICE AREA
   ========================================================================== */

.area { background: var(--paper-alt); border-top: var(--hairline) solid var(--line); }

.area-list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--hairline) solid var(--line);
}

.area-list li {
  padding-block: var(--sp-12);
  border-bottom: var(--hairline) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  overflow-wrap: break-word;
}

.area-note {
  margin-top: var(--sp-24);
  font-size: var(--t-small);
  color: var(--ink-dim);
  max-width: 76ch;
}


/* ==========================================================================
   12  FAQ
   ========================================================================== */

.faq { background: var(--paper); border-top: var(--hairline) solid var(--line); }

.faq-list { border-top: var(--hairline) solid var(--line); }

.faq details { border-bottom: var(--hairline) solid var(--line); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
  padding-block: var(--sp-16);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--copper); }

.faq-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-24);
  height: var(--sp-24);
  margin-top: var(--sp-4);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius);
  color: var(--copper);
  transition: transform 0.15s ease;
}
.faq details[open] .faq-mark { transform: rotate(180deg); }

.faq-body { padding-bottom: var(--sp-24); }
.faq-body p { font-size: var(--t-small); color: var(--ink-dim); max-width: 72ch; }


/* ==========================================================================
   13  CONTACT
   ========================================================================== */

.contact { background: var(--paper-alt); border-top: var(--hairline) solid var(--line); }

.contact-grid { display: grid; gap: var(--sp-24); }

.info-block {
  padding-top: var(--sp-16);
  border-top: var(--hairline) solid var(--line);
}
.info-block .mono-label { margin-bottom: var(--sp-8); }

.info-big {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-price);
  color: var(--copper);
  line-height: 1.1;
  overflow-wrap: break-word;
}

.info-link {
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  color: var(--ink);
  border-bottom: var(--hairline) solid var(--line);
  overflow-wrap: break-word;
}
.info-link:hover { border-bottom-color: var(--copper); }

.info-sub {
  margin-top: var(--sp-8);
  font-size: var(--t-small);
  color: var(--ink-dim);
}

.hours { margin: 0; }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-16);
  padding-block: var(--sp-8);
  border-bottom: var(--hairline) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hours dt { color: var(--ink-dim); }
.hours dd { margin: 0; color: var(--ink); }


/* ==========================================================================
   14  FOOTER
   ========================================================================== */

.site-footer {
  background: var(--pine-wash);
  color: var(--ink);
  border-top: var(--hairline) solid var(--pine-line);
  padding-block: var(--sp-48);
}

.footer-grid { display: grid; gap: var(--sp-32); }

.wordmark-footer { margin-bottom: var(--sp-16); }

.footer-col .mono-label { margin-bottom: var(--sp-12); }

.footer-nap {
  font-style: normal;
  font-size: var(--t-small);
  color: var(--ink-dim);
  line-height: 1.8;
}
.footer-nap-name { color: var(--ink); font-weight: 600; }
.footer-nap a { border-bottom: var(--hairline) solid var(--line); }
.footer-nap a:hover { border-bottom-color: var(--copper); }

.footer-list li {
  font-size: var(--t-small);
  color: var(--ink-dim);
  padding-block: var(--sp-4);
}
.footer-links a { border-bottom: var(--hairline) solid transparent; }
.footer-links a:hover { color: var(--ink); border-bottom-color: var(--copper); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-top: var(--sp-32);
  padding-top: var(--sp-24);
  border-top: var(--hairline) solid var(--pine-line);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.footer-legal-sep { color: var(--copper); }


/* ==========================================================================
   15  MOBILE BOOKING BAR
   The single most important conversion element on a phone. Call sits in
   the header instead, so this bar is Book alone.
   ========================================================================== */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  background: var(--paper-pure);
  border-top: var(--hairline) solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.callbar-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: var(--sp-64);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--t-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.callbar-book { background: var(--copper); color: var(--paper-pure); }

/* Reserve room so the bar never sits on top of the footer's last line.
   64px button + the bar's 1px top border. */
body { padding-bottom: calc(var(--sp-64) + var(--hairline) + env(safe-area-inset-bottom)); }


/* ==========================================================================
   16  THANK-YOU PAGE
   ========================================================================== */

.ty {
  min-height: 60vh;
  display: flex;
  align-items: center;
  background: var(--pine-wash);
  padding-block: var(--sp-64);
}
.ty h1 { margin-bottom: var(--sp-24); }
.ty-lede { font-size: var(--t-lede); color: var(--ink-dim); max-width: 54ch; }

.ty-next {
  margin-top: var(--sp-32);
  padding-top: var(--sp-24);
  border-top: var(--hairline) solid var(--line);
}
.ty-next li {
  display: flex;
  gap: var(--sp-16);
  padding-block: var(--sp-12);
  border-bottom: var(--hairline) solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-dim);
}
.ty-next .mono-label { flex: none; color: var(--copper); }


/* ==========================================================================
   17  MOTION
   One effect only: a short fade-and-rise as a section enters. Anything
   more than this gets in the way of someone trying to find a phone number.
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(var(--sp-16));
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.reveal.is-in { opacity: 1; transform: none; }

/* If JavaScript never runs, nothing is allowed to stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }

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


/* ==========================================================================
   BREAKPOINT: 700px and up
   Tablet and small laptop. The mobile call bar goes away here.
   ========================================================================== */

@media (min-width: 700px) {

  .wrap { padding-inline: var(--sp-24); }

  .section { padding-block: var(--sp-64); }

  .wordmark-sub { display: inline-flex; }
  .wordmark-text { font-size: var(--t-h3); }
  .btn-more { display: inline; }
  .header-phone-text { display: inline; }
  .header-phone { padding: var(--sp-12) var(--sp-16); }
  .header-book { display: inline-flex; }

  .callbar { display: none; }
  body { padding-bottom: 0; }

  .hero { padding-block: var(--sp-64); }
  .form-card { padding: var(--sp-32); }

  /* Problem strip: two across, hairlines between */
  .strip { grid-template-columns: 1fr 1fr; }
  .strip-item { padding: var(--sp-24); }
  .strip-item:nth-child(odd) { padding-left: 0; }
  .strip-item:nth-child(even) { border-left: var(--hairline) solid var(--line); }

  /* The three packages sit side by side from here up. */
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16); }
  .tier { padding: var(--sp-16); }
  .tier-badge { left: var(--sp-16); }

  /* Reviews: two level columns, not a carousel */
  .review-grid { flex-direction: row; gap: var(--sp-24); }
  .review-col { flex: 1; }

  /* Service area: three columns */
  .area-list { grid-template-columns: repeat(3, 1fr); column-gap: var(--sp-32); }

  .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-32); }

  .field-pair { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--sp-32); }
}


/* ==========================================================================
   BREAKPOINT: 1080px and up
   Desktop. The hero splits 55/45, copy against the booking form.
   ========================================================================== */

@media (min-width: 1080px) {

  .hero { padding-block: var(--sp-96); }

  .hero-grid {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    gap: var(--sp-64);
    align-items: start;
  }

  /* Problem strip: four across, hairline rules between */
  .strip { grid-template-columns: repeat(4, 1fr); border-bottom: var(--hairline) solid var(--line); }
  .strip-item {
    padding: var(--sp-32) var(--sp-24);
    border-left: var(--hairline) solid var(--line);
    border-bottom: 0;
  }
  .strip-item:nth-child(odd) { padding-left: var(--sp-24); }
  .strip-item:first-child { border-left: 0; padding-left: 0; }

  /* More room between the three columns once there is space for it. */
  .tiers { gap: var(--sp-24); }
  .tier { padding: var(--sp-24); }
  .tier-badge { left: var(--sp-24); }

  /* How it works: four across in one row */
  .step-row { grid-template-columns: repeat(4, 1fr); border-bottom: var(--hairline) solid var(--line); }
  .step {
    padding: var(--sp-32) var(--sp-24);
    border-left: var(--hairline) solid var(--line);
    border-bottom: 0;
  }
  .step:first-child { border-left: 0; padding-left: 0; }

  .review-grid { gap: var(--sp-32); }

  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}