/* =========================================================
   RS Repairs — Rushden
   Mobile-first. No frameworks, no webfonts, no dependencies.
   ========================================================= */

:root{
  /* Base */
  --ink:        #0b0c0e;
  --charcoal:   #121418;
  --surface:    #181b20;
  --surface-2:  #1f2328;
  --line:       #2a2f36;
  --line-soft:  #22262c;

  /* Text */
  --text:       #f2f4f6;
  --text-dim:   #a8b0b8;
  --text-faint: #767f88;

  /* Accent — signal red */
  --accent:     #ff2d16;
  --accent-hi:  #ff4a33;
  --accent-lo:  #d41f0b;
  --accent-ink: #ffffff;

  --wa:         #25d366;

  /* Shape */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --shadow:    0 2px 4px rgb(0 0 0 / .3), 0 12px 32px -8px rgb(0 0 0 / .55);
  --shadow-lg: 0 4px 8px rgb(0 0 0 / .3), 0 28px 60px -16px rgb(0 0 0 / .7);

  --head-h: 62px;

  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Fluid type */
  --fs-h1:   clamp(2.1rem, 8.2vw, 4.4rem);
  --fs-h2:   clamp(1.6rem, 5vw, 2.6rem);
  --fs-h3:   clamp(1.08rem, 2.4vw, 1.25rem);
  --fs-lede: clamp(1rem, 2.6vw, 1.15rem);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 10px);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

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

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

h1,h2,h3{
  margin:0 0 .5em;
  line-height:1.08;
  letter-spacing:-.022em;
  font-weight:800;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); line-height:1.25; letter-spacing:-.012em; }
p{ margin:0 0 1em; }

a{ color:var(--text); text-decoration:none; }
a:hover{ color:var(--accent-hi); }

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

.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:18px; }
@media (min-width:700px){ .wrap{ padding-inline:32px; } }

.muted{ color:var(--text-dim); }
.small{ font-size:.86rem; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--accent-ink);
  padding:12px 18px; font-weight:700;
}
.skip:focus{ left:12px; top:12px; }

/* ---- Placeholder markers ------------------------------------------------ */
.ph{
  display:inline;
  color:#ffd9a0;
  background:rgb(255 170 40 / .10);
  border:1px dashed rgb(255 170 40 / .45);
  border-radius:4px;
  padding:.05em .4em;
  font-size:.88em;
  font-weight:600;
  letter-spacing:.01em;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--head-h);
  background:rgb(11 12 14 / .78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease;
}
.site-head.is-stuck{
  background:rgb(11 12 14 / .96);
  border-bottom-color:var(--line-soft);
}
.head-inner{
  height:100%;
  display:flex; align-items:center; gap:14px;
}

.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand-mark{
  flex:none;
  width:36px; height:36px;
  display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink);
  font-weight:900; font-size:.95rem; letter-spacing:-.03em;
  border-radius:var(--r-sm);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-size:1.02rem; font-weight:800; letter-spacing:-.02em; }
.brand-text small{
  font-size:.62rem; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.1em; margin-top:2px;
}
@media (max-width:420px){ .brand-text small{ display:none; } }

.nav{ display:none; }
.head-call{ display:none; }

.burger{
  flex:none;
  width:42px; height:42px;
  display:grid; place-content:center; gap:5px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); cursor:pointer;
}
.burger span{
  display:block; width:18px; height:2px; background:var(--text);
  border-radius:2px; transition:transform .22s ease, opacity .22s ease;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
@media (max-width:1059px){
  .nav{
    position:fixed; inset:var(--head-h) 0 auto 0;
    display:block;
    background:var(--charcoal);
    border-bottom:1px solid var(--line);
    padding:8px 18px 20px;
    transform:translateY(-130%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:var(--shadow-lg);
  }
  .nav.is-open{ transform:translateY(0); }
  .nav a{
    display:block;
    padding:14px 2px;
    font-weight:600;
    border-bottom:1px solid var(--line-soft);
  }
  .nav a:last-child{ border-bottom:0; }
  .nav .nav-cta{
    margin-top:14px;
    background:var(--accent); color:var(--accent-ink);
    text-align:center; border-radius:var(--r-sm);
    padding:14px; font-weight:800;
  }
}

@media (min-width:1060px){
  :root{ --head-h:72px; }
  .burger{ display:none; }
  .nav{
    display:flex; align-items:center; gap:4px;
  }
  .nav a{
    padding:9px 13px;
    font-size:.9rem; font-weight:600;
    white-space:nowrap;
    color:var(--text-dim);
    border-radius:var(--r-sm);
    transition:color .18s ease, background .18s ease;
  }
  .nav a:hover{ color:var(--text); background:var(--surface); }
  .nav .nav-cta{
    margin-left:8px;
    background:var(--accent); color:var(--accent-ink);
    font-weight:800;
  }
  .nav .nav-cta:hover{ background:var(--accent-hi); color:var(--accent-ink); }
  .head-call{
    display:flex; align-items:center; gap:8px;
    margin-left:12px; padding:9px 14px;
    border:1px solid var(--line); border-radius:var(--r-sm);
    font-weight:700; font-size:.92rem;
    font-variant-numeric:tabular-nums;
    transition:border-color .18s ease, color .18s ease;
  }
  .head-call svg{ color:var(--accent); }
  .head-call:hover{ border-color:var(--accent); color:var(--text); }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px;
  border:1px solid transparent; border-radius:var(--r-sm);
  font:inherit; font-weight:700; font-size:.95rem;
  letter-spacing:.005em;
  cursor:pointer; text-align:center;
  transition:background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-lg{ padding:16px 28px; font-size:1.02rem; }
.btn-block{ display:flex; width:100%; }

.btn-accent{ background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover{ background:var(--accent-hi); color:var(--accent-ink); }

.btn-ghost{
  background:transparent; color:var(--text);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--text-dim); background:var(--surface); color:var(--text); }

.btn-wa{ background:var(--wa); color:#062812; font-weight:800; }
.btn-wa:hover{ background:#3ae07a; color:#062812; }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  padding:calc(var(--head-h) + 48px) 0 56px;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(90% 70% at 88% 6%, rgb(255 45 22 / .20), transparent 62%),
    radial-gradient(70% 60% at 6% 96%, rgb(255 45 22 / .08), transparent 60%),
    linear-gradient(180deg, #15171c 0%, var(--ink) 92%);
}
/* Faint diagonal workshop hatch */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg,
    rgb(255 255 255 / .022) 0 2px, transparent 2px 11px);
}
.hero-inner{ position:relative; z-index:1; }

.eyebrow{
  margin:0 0 14px;
  font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--accent);
}
.hero h1{ max-width:16ch; }
.hero h1 em{
  font-style:normal;
  color:var(--accent);
  display:inline-block;
}
.hero-sub{
  max-width:46ch;
  font-size:var(--fs-lede);
  color:var(--text-dim);
  margin-bottom:26px;
}
.hero-cta{ display:flex; flex-direction:column; gap:11px; }
@media (min-width:520px){
  .hero-cta{ flex-direction:row; flex-wrap:wrap; }
  .hero-cta .btn{ flex:1 1 auto; min-width:190px; }
}
@media (min-width:860px){ .hero-cta .btn{ flex:0 0 auto; } }

.hero-points{
  list-style:none; margin:28px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 20px;
}
.hero-points li{
  position:relative; padding-left:20px;
  font-size:.9rem; color:var(--text-dim);
}
.hero-points li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px;
  background:var(--accent);
  clip-path:polygon(0 0, 100% 50%, 0 100%);
}
.hero-note{
  margin:26px 0 0;
  font-size:.88rem; color:var(--text-faint);
}
@media (min-width:860px){
  .hero{ padding:calc(var(--head-h) + 86px) 0 90px; }
}

/* =========================================================
   TRUST STRIP
   ========================================================= */
.strip{
  background:var(--surface);
  border-bottom:1px solid var(--line-soft);
}
.strip-inner{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 16px;
  padding-block:15px;
  font-size:.82rem; font-weight:600;
  color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.06em;
}
.strip .dot{
  width:4px; height:4px; border-radius:50%;
  background:var(--accent); flex:none;
}

/* =========================================================
   SECTION SHELL
   ========================================================= */
.section{ padding:62px 0; }
@media (min-width:860px){ .section{ padding:96px 0; } }
.section-alt{ background:var(--charcoal); }

.sec-head{ max-width:62ch; margin-bottom:38px; }
.sec-head h2{ margin-bottom:.35em; }
.lede{ font-size:var(--fs-lede); color:var(--text-dim); margin:0; }

/* =========================================================
   SERVICE CARDS
   ========================================================= */
.cards{ display:grid; gap:16px; }
@media (min-width:720px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .cards{ grid-template-columns:repeat(3,1fr); gap:20px; } }

.card{
  display:flex; flex-direction:column;
  padding:26px 22px 24px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.card:hover{
  border-color:#3a4047;
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.card-feature{
  border-color:rgb(255 45 22 / .40);
  box-shadow:inset 0 1px 0 rgb(255 45 22 / .10);
}
.card-ico{
  width:48px; height:48px;
  display:grid; place-items:center;
  margin-bottom:18px;
  color:var(--accent);
  background:rgb(255 45 22 / .10);
  border:1px solid rgb(255 45 22 / .24);
  border-radius:var(--r);
}
.card > p{ color:var(--text-dim); font-size:.95rem; }

.ticks{ list-style:none; margin:4px 0 20px; padding:0; }
.ticks li{
  position:relative;
  padding:5px 0 5px 24px;
  font-size:.9rem; color:var(--text-dim);
  border-top:1px solid var(--line-soft);
}
.ticks li:first-child{ border-top:0; }
.ticks li::before{
  content:""; position:absolute; left:2px; top:.95em;
  width:10px; height:5px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.ticks-lg li{ font-size:.98rem; padding-block:8px; }

.card-price{
  margin:0 0 16px; padding-top:4px;
  font-size:.9rem; font-weight:700;
  color:var(--text);
}
.card .btn{ margin-top:auto; }

/* =========================================================
   BEFORE / AFTER SLIDER
   ========================================================= */
.ba-grid{ display:grid; gap:20px; }
@media (min-width:760px){ .ba-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } }

.ba{ margin:0; }
.ba-stage{
  position:relative;
  aspect-ratio:4 / 3;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface-2);
  touch-action:pan-y;
  cursor:ew-resize;
  user-select:none;
  -webkit-user-select:none;
}
.ba-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
/* The "after" layer is clipped by --pos (0–100%) */
.ba-after{
  position:absolute; inset:0;
  clip-path:inset(0 0 0 var(--pos,50%));
  will-change:clip-path;
}
/* -------------------------------------------------------------------------
   DEMO ONLY — delete this block once real before/after photos are dropped in.
   Both sides currently point at the same placeholder file, so the "before"
   half is knocked back to make the drag interaction obvious. Leaving it in
   with real photos would wash out every genuine "before" shot.
   ------------------------------------------------------------------------- */
.ba-stage > .ba-img{ filter:grayscale(1) brightness(.5) contrast(.85); }
.ba-after .ba-img{ filter:brightness(1.9) saturate(1.1); }
.ba-after::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgb(255 45 22 / .14), rgb(120 210 255 / .10));
  pointer-events:none;
}
/* ------------------------------- end demo-only ------------------------- */

.ba-tag{
  position:absolute; top:12px; z-index:3;
  padding:5px 11px;
  font-size:.66rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.12em;
  background:rgb(11 12 14 / .82);
  border:1px solid var(--line);
  border-radius:100px;
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.ba-tag-l{ left:12px; }
.ba-tag-r{ right:12px; color:var(--accent); border-color:rgb(255 45 22 / .45); }

.ba-handle{
  position:absolute; top:0; bottom:0; z-index:4;
  left:var(--pos,50%);
  width:2px; margin-left:-1px;
  background:var(--accent);
  pointer-events:none;
  box-shadow:0 0 0 1px rgb(0 0 0 / .35);
}
.ba-handle i{
  position:absolute; top:50%; left:50%;
  width:42px; height:42px; margin:-21px 0 0 -21px;
  background:var(--accent);
  border:3px solid #fff;
  border-radius:50%;
  box-shadow:0 4px 14px rgb(0 0 0 / .5);
}
.ba-handle i::before,
.ba-handle i::after{
  content:""; position:absolute; top:50%; width:7px; height:7px;
  border-top:2px solid #fff; border-right:2px solid #fff;
}
.ba-handle i::before{ left:9px;  transform:translateY(-50%) rotate(-135deg); }
.ba-handle i::after{  right:9px; transform:translateY(-50%) rotate(45deg); }

/* The range input is the real control: keyboard + AT accessible, visually hidden */
.ba-range{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%;
  margin:0; padding:0;
  opacity:0;
  cursor:ew-resize;
  -webkit-appearance:none; appearance:none;
  background:transparent;
}
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:44px; height:100%; }
.ba-range::-moz-range-thumb{ width:44px; height:100%; border:0; opacity:0; }
.ba-range:focus-visible{ outline:none; }
.ba-stage:has(.ba-range:focus-visible){
  outline:2px solid var(--accent-hi);
  outline-offset:3px;
}

.ba figcaption{
  margin-top:11px;
  font-size:.86rem; color:var(--text-faint);
}

/* =========================================================
   WHY US
   ========================================================= */
.why-grid{ display:grid; gap:14px; }
@media (min-width:760px){ .why-grid{ grid-template-columns:repeat(2,1fr); gap:20px; } }

.why{
  position:relative;
  padding:24px 22px 22px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-left:3px solid var(--accent);
  border-radius:var(--r);
}
.why-no{
  display:block; margin-bottom:10px;
  font-size:.74rem; font-weight:800;
  letter-spacing:.14em;
  color:var(--accent);
}
.why p{ margin:0; color:var(--text-dim); font-size:.95rem; }
.why h3{ margin-bottom:.45em; }

/* =========================================================
   PROCESS
   ========================================================= */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:14px;
  counter-reset:step;
}
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .steps{ grid-template-columns:repeat(4,1fr); gap:18px; } }

.step{
  position:relative;
  padding:24px 20px 20px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
}
/* Connector line on wide screens */
@media (min-width:1040px){
  .step::after{
    content:""; position:absolute; top:40px; right:-18px;
    width:18px; height:1px; background:var(--line);
  }
  .step:last-child::after{ display:none; }
}
.step-no{
  display:grid; place-items:center;
  width:34px; height:34px; margin-bottom:14px;
  background:var(--accent); color:var(--accent-ink);
  border-radius:50%;
  font-weight:900; font-size:.95rem;
}
.step p{ margin:0; color:var(--text-dim); font-size:.93rem; }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews{ display:grid; gap:16px; }
@media (min-width:760px){ .reviews{ grid-template-columns:repeat(3,1fr); } }

.review{
  position:relative;
  margin:0; padding:40px 22px 22px;
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
}
.review::before{
  content:"\201C";
  position:absolute; top:4px; left:18px;
  font-size:3.4rem; line-height:1;
  color:var(--accent); opacity:.5;
}
.review p{ margin:0 0 16px; font-size:.97rem; color:var(--text-dim); }
.review footer{
  padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:.84rem; color:var(--text-faint);
}
.reviews-link{
  margin-top:28px;
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
}
.reviews-link p{ margin:0; }

/* =========================================================
   QUOTE FORM
   ========================================================= */
.quote-wrap{ display:grid; gap:34px; }
@media (min-width:980px){
  .quote-wrap{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:start; }
  .quote-copy{ position:sticky; top:calc(var(--head-h) + 28px); }
}
.quote-copy .btn-wa{ margin-top:10px; }

.quote-form{
  position:relative;
  padding:24px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
@media (min-width:700px){ .quote-form{ padding:32px 30px; } }

.field{ margin-bottom:16px; }
.field-row{ display:grid; gap:16px; }
@media (min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } }

.field label{
  display:block; margin-bottom:7px;
  font-size:.86rem; font-weight:700;
  letter-spacing:.01em;
}
.req{ color:var(--accent); }
.hint{ font-weight:500; color:var(--text-faint); }

.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 14px;
  background:var(--ink);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font:inherit; font-size:1rem; /* 16px keeps iOS from zooming */
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea{ resize:vertical; min-height:104px; }
.field select{
  appearance:none; -webkit-appearance:none;
  padding-right:40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.field input::placeholder,
.field textarea::placeholder{ color:#5d666f; }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgb(255 45 22 / .16);
}
.field.has-err input,
.field.has-err select,
.field.has-err textarea{ border-color:#ff5b45; }

.err{
  margin:6px 0 0; min-height:0;
  font-size:.82rem; font-weight:600; color:#ff7a66;
}
.err:empty{ display:none; }

/* File input */
.file-drop{
  position:relative;
  display:block;
  padding:22px 16px;
  text-align:center;
  background:var(--ink);
  border:1px dashed var(--line);
  border-radius:var(--r-sm);
  transition:border-color .16s ease, background .16s ease;
}
.file-drop:hover,
.file-drop.is-over{ border-color:var(--accent); background:rgb(255 45 22 / .05); }
.file-drop input[type="file"]{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.file-drop-label{
  display:grid; justify-items:center; gap:4px;
  color:var(--text-dim); pointer-events:none;
}
.file-drop-label svg{ color:var(--accent); margin-bottom:4px; }
.file-drop-label strong{ font-size:.94rem; color:var(--text); }
.file-drop-label small{ font-size:.8rem; color:var(--text-faint); }

.file-list{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:7px; }
.file-list li{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  background:var(--ink);
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  font-size:.85rem;
}
.file-list .fname{
  flex:1 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.file-list .fsize{ color:var(--text-faint); font-variant-numeric:tabular-nums; flex:none; }
.file-list .fdel{
  flex:none;
  width:24px; height:24px; padding:0;
  display:grid; place-items:center;
  background:transparent; color:var(--text-faint);
  border:1px solid var(--line); border-radius:4px;
  font:inherit; font-size:1rem; line-height:1; cursor:pointer;
}
.file-list .fdel:hover{ color:var(--accent); border-color:var(--accent); }

.form-foot{
  margin:14px 0 0;
  font-size:.8rem; color:var(--text-faint);
}
.form-status{
  margin:12px 0 0;
  font-size:.88rem; font-weight:600;
}
.form-status:empty{ display:none; }
.form-status.is-err{ color:#ff7a66; }

/* Submit spinner */
#qSubmit{ position:relative; }
.spinner{ display:none; }
#qSubmit.is-busy{ pointer-events:none; opacity:.85; }
#qSubmit.is-busy .btn-label{ opacity:.55; }
#qSubmit.is-busy .spinner{
  display:block;
  width:17px; height:17px;
  border:2px solid rgb(255 255 255 / .35);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Success state */
.form-done{
  position:absolute; inset:0; z-index:6;
  display:grid; place-content:center; justify-items:center;
  gap:4px; padding:34px 26px; text-align:center;
  background:var(--surface);
  border-radius:var(--r-lg);
}
.form-done svg{ color:var(--wa); margin-bottom:10px; }
.form-done p{ color:var(--text-dim); max-width:34ch; }
.form-done .btn{ margin-top:10px; }
.form-done[hidden]{ display:none; }

/* =========================================================
   FIND US
   ========================================================= */
.find-grid{ display:grid; gap:26px; }
@media (min-width:900px){
  .find-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:start; }
}

.info-list{ margin:0; }
.info-list dt{
  margin-top:22px;
  font-size:.68rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent);
}
.info-list dt:first-child{ margin-top:0; }
.info-list dd{
  margin:7px 0 0;
  color:var(--text-dim);
}
.info-list address{ font-style:normal; color:var(--text); line-height:1.6; }
.info-list a{ font-weight:600; }

.link-arrow{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px;
  color:var(--accent) !important;
  font-size:.9rem; font-weight:700;
}
.link-arrow::after{ content:"\2192"; transition:transform .18s ease; }
.link-arrow:hover::after{ transform:translateX(3px); }

.hours{ list-style:none; margin:0 0 8px; padding:0; max-width:340px; }
.hours li{
  display:flex; justify-content:space-between; gap:12px;
  padding:7px 0;
  font-size:.9rem;
  border-bottom:1px solid var(--line-soft);
}
.hours li:last-child{ border-bottom:0; }
.hours li > span:first-child{ color:var(--text); font-weight:600; }

.map{
  position:relative;
  min-height:320px;
  aspect-ratio:4 / 3;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-load{
  position:absolute; inset:0;
  display:grid; place-content:center; justify-items:center; gap:3px;
  background:
    radial-gradient(60% 60% at 50% 40%, rgb(255 45 22 / .10), transparent 70%),
    repeating-linear-gradient(135deg, #1b1e23 0 2px, #181b20 2px 12px);
  border:0; cursor:pointer;
  color:var(--text); font:inherit;
}
.map-load svg{ color:var(--accent); margin-bottom:8px; }
.map-load strong{ font-size:1rem; font-weight:800; }
.map-load small{ font-size:.84rem; color:var(--text-dim); }
.map-load:hover{ color:var(--text); }
.map-load:hover svg{ transform:scale(1.08); transition:transform .2s ease; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-foot{
  background:var(--charcoal);
  border-top:1px solid var(--line-soft);
  padding-top:50px;
}
.foot-grid{ display:grid; gap:30px; padding-bottom:36px; }
@media (min-width:620px){ .foot-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; } }

.brand-foot{ margin:0 0 14px; }
.foot-col h3{
  font-size:.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--text-faint);
  margin-bottom:14px;
}
.foot-col > p{ font-size:.9rem; margin:0; max-width:38ch; }
.foot-list{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot-list a,
.foot-list span{ font-size:.92rem; color:var(--text-dim); }
.foot-list a:hover{ color:var(--accent-hi); }
.foot-list address{ font-style:normal; font-size:.92rem; color:var(--text-dim); }

.foot-base{
  display:flex; flex-wrap:wrap; gap:8px 18px;
  justify-content:space-between; align-items:center;
  padding-block:20px;
  border-top:1px solid var(--line-soft);
  font-size:.82rem; color:var(--text-faint);
}
.foot-base p{ margin:0; }
.credit span{ color:var(--text-dim); font-weight:600; }

/* =========================================================
   STICKY MOBILE BAR
   ========================================================= */
.sticky-bar{
  position:fixed; z-index:95;
  inset:auto 0 0 0;
  display:flex; gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgb(11 12 14 / .94);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  transform:translateY(130%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.sticky-bar.is-on{ transform:translateY(0); }
.sticky-btn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-width:0;                 /* let flex items shrink instead of clipping */
  min-height:48px; padding:0 10px;
  border-radius:var(--r-sm);
  font-weight:800; font-size:.95rem;
  white-space:nowrap;
}
.sticky-call{ flex:0 1 auto; background:var(--surface-2); border:1px solid var(--line); color:var(--text); }
.sticky-call svg{ color:var(--accent); flex:none; }
.sticky-wa{ flex:none; width:50px; background:var(--wa); color:#062812; }
.sticky-quote{ flex:1 1 auto; background:var(--accent); color:var(--accent-ink); }
@media (max-width:359px){
  .sticky-btn{ font-size:.88rem; padding:0 8px; }
}
.sticky-btn:hover{ color:inherit; }

@media (min-width:1060px){
  .sticky-bar{ display:none; }
}
/* Keep the sticky bar from covering the end of the page on mobile */
@media (max-width:1059px){
  body{ padding-bottom:70px; }
}

/* =========================================================
   SCROLL REVEAL (subtle, and disabled for reduced motion)
   ========================================================= */
/* Gated on .js (set by an inline script in <head>) so that with JavaScript
   disabled every section is visible and nothing is hidden for good. */
.js .reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.65,.3,1);
}
.js .reveal.is-in{ opacity:1; transform:none; }

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

@media print{
  .site-head,.sticky-bar,.map,.quote-form,.burger{ display:none !important; }
  body{ background:#fff; color:#000; }
}