/* ==========================================================================
   SWV Electrical — site styles
   Palette sampled from the logo: gold #EEC610 → amber #E1A139, ink #2D2E2D
   ========================================================================== */

/* --- Fonts (self-hosted) ------------------------------------------------
   Served from our own domain rather than Google Fonts. Loading them from
   fonts.googleapis.com meant a render-blocking chain across two extra origins
   (CSS, then the font files) before any text could paint. These are variable
   fonts, so one file per family covers every weight we use.
   Latin subset only — it includes the accents Afrikaans needs. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design tokens ------------------------------------------------------ */
:root {
  /* Brand */
  --gold:        #EEC610;
  --amber:       #E1A139;
  /* Darker gold for small text on light backgrounds. Plain --amber only
     reaches 2.2:1 on white, well under the 4.5:1 WCAG AA needs; this is
     5.0:1 on white and 4.7:1 on --paper-2. */
  --amber-ink:   #96650E;
  --gold-soft:   #FBEFB8;
  --grad-bolt:   linear-gradient(140deg, #F2CC0F 0%, #E1A139 100%);

  /* Neutrals */
  --ink:         #17181A;
  --ink-2:       #1F2123;
  --ink-3:       #2D2E2D;
  --slate:       #5A5E63;
  --mist:        #8D9298;
  --line:        #E4E6E9;
  --line-dark:   rgba(255, 255, 255, .10);
  --paper:       #FFFFFF;
  --paper-2:     #F6F7F8;

  /* Type */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Space + shape */
  --container: 1180px;
  --gutter: 24px;
  --radius:  14px;
  --radius-sm: 8px;
  --shadow:    0 2px 4px rgba(23, 24, 26, .04), 0 12px 28px rgba(23, 24, 26, .07);
  --shadow-lg: 0 4px 8px rgba(23, 24, 26, .06), 0 24px 56px rgba(23, 24, 26, .13);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-3);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 .5em;
}

h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.85rem); }
h3 { font-size: 1.2rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

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

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

.section { padding-block: clamp(64px, 9vw, 108px); }
.section--tight { padding-block: clamp(48px, 6vw, 72px); }
.section--muted { background: var(--paper-2); }

.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--slate); font-size: 1.08rem; margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-ink);
  margin-bottom: 14px;
}
/* On the dark hero the bright amber is the readable one (7.9:1 on ink) */
.hero .eyebrow { color: var(--amber); }
.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--grad-bolt);
}
.eyebrow--center::before { display: none; }

.lede { font-size: 1.14rem; color: var(--slate); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary {
  background: var(--grad-bolt);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(225, 161, 57, .35);
}
.btn--primary:hover { box-shadow: 0 10px 28px rgba(225, 161, 57, .45); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-3); }

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

.btn--ghost-light {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}
.btn--ghost-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* --- Site header -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Opaque rather than translucent + backdrop-filter: a blurred sticky header
     forces a full-width repaint on every scroll frame, which is a common cause
     of scroll jank on mid-range phones. */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 46px; height: 46px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.brand-tag {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--slate);
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  padding: 9px 15px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: var(--slate);
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--ink); }

.header-actions { display: flex; align-items: center; gap: 14px; }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .97rem;
  text-decoration: none;
  color: var(--ink);
}
.header-phone svg { width: 17px; height: 17px; color: var(--amber); }
.header-phone:hover { color: var(--amber); }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; margin-inline: auto; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding-block: clamp(72px, 10vw, 128px);
}

/* Diagonal bolt-inspired light streaks */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset-block: -20%;
  width: 46%;
  transform: skewX(-14deg);
  pointer-events: none;
}
.hero::before {
  right: -6%;
  background: linear-gradient(180deg, rgba(238, 198, 16, .16), rgba(225, 161, 57, .03));
}
.hero::after {
  right: 26%;
  width: 14%;
  background: linear-gradient(180deg, rgba(238, 198, 16, .08), transparent);
}

.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.hero h1 { color: #fff; }
.hero h1 .accent {
  background: var(--grad-bolt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Separators in the "Fast | Professional | Affordable" tagline */
.pipe {
  color: var(--amber);
  font-weight: 400;
  margin-inline: .1em;
}

.hero-lede {
  font-size: 1.16rem;
  color: rgba(255, 255, 255, .72);
  max-width: 54ch;
  margin-bottom: 32px;
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: .84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}
.badge svg { width: 15px; height: 15px; color: var(--gold); flex: none; }

/* Stat panel beside the hero copy */
.hero-panel {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  padding: 30px;
}
.hero-panel h2 {
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.stat-list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.stat-list li { display: flex; align-items: baseline; gap: 14px; }
.stat-num {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  background: var(--grad-bolt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-width: 92px;
}
.stat-label { font-size: .92rem; color: rgba(255, 255, 255, .68); }

/* --- Trust strip -------------------------------------------------------- */
.trust-strip {
  background: var(--ink-3);
  color: rgba(255, 255, 255, .8);
  padding-block: 18px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 34px;
  font-size: .9rem;
  font-weight: 600;
}
.trust-strip span { display: inline-flex; align-items: center; gap: 9px; }
.trust-strip svg { width: 16px; height: 16px; color: var(--gold); flex: none; }

/* --- Cards -------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.card {
  position: relative;
  padding: 30px 28px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease),
              border-color .22s var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.card h3 { margin-bottom: .45em; }
.card p { color: var(--slate); font-size: .97rem; margin-bottom: 0; }

.card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--grad-bolt);
  color: var(--ink);
}
.card-icon svg { width: 26px; height: 26px; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
}
.card-link svg { width: 15px; height: 15px; transition: transform .18s var(--ease); }
.card-link:hover svg { transform: translateX(4px); }

/* --- Feature list (why us) ---------------------------------------------- */
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.feature-list li { display: flex; gap: 18px; }
.feature-list .tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--ink-3);
}
.feature-list .tick svg { width: 17px; height: 17px; }
.feature-list h3 { font-size: 1.05rem; margin-bottom: .25em; }
.feature-list p { color: var(--slate); font-size: .97rem; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}

.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
}
.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(238, 198, 16, .22), transparent 60%);
}
.media-frame img {
  position: relative;
  z-index: 1;
  width: 58%;
  max-width: 260px;
}

/* --- Service cards (services page 3×3 grid) ----------------------------- */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  scroll-margin-top: 100px;
}
.service-card h2 {
  font-size: 1.25rem;
  letter-spacing: -.01em;
  margin-bottom: .45em;
}
.service-card > p {
  color: var(--slate);
  font-size: .97rem;
  margin-bottom: 0;
}
/* Tags sit on the card's baseline so rows line up regardless of copy length */
.service-card .tag-list { margin-top: auto; padding-top: 20px; }

/* The ninth cell: a call to action that completes the grid */
.card--cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  border-color: transparent;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.card--cta::before {
  content: "";
  position: absolute;
  inset-block: -30%;
  right: -10%;
  width: 55%;
  transform: skewX(-14deg);
  background: linear-gradient(180deg, rgba(238, 198, 16, .18), transparent);
  pointer-events: none;
}
.card--cta > * { position: relative; z-index: 1; }
.card--cta h3 { color: #fff; font-size: 1.3rem; }
.card--cta p { color: rgba(255, 255, 255, .72); }
.card--cta .btn-row { margin-top: 22px; }
.card--cta:hover { transform: translateY(-4px); }

.tag-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 20px 0 0;
  padding: 0;
}
.tag-list li {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-2);
  font-size: .82rem;
  font-weight: 600;
  color: var(--slate);
}

/* --- Value chips (FAST · PROFESSIONAL · AFFORDABLE …) -------------------- */
.value-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
}
.value-chips li {
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--grad-bolt);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* --- Areas served ------------------------------------------------------- */
.area-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.area-grid li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-weight: 600;
  font-size: .96rem;
}
.area-grid svg { width: 17px; height: 17px; color: var(--amber); flex: none; }

/* --- CTA band ----------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding-block: clamp(56px, 7vw, 84px);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset-block: -40%;
  right: -4%;
  width: 38%;
  transform: skewX(-14deg);
  background: linear-gradient(180deg, rgba(238, 198, 16, .15), transparent);
}
.cta-band .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { color: rgba(255, 255, 255, .7); margin-bottom: 0; max-width: 52ch; }

/* --- Page header (inner pages) ------------------------------------------ */
.page-header {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  padding-block: clamp(56px, 7vw, 84px);
}
.page-header::before {
  content: "";
  position: absolute;
  inset-block: -40%;
  right: -6%;
  width: 40%;
  transform: skewX(-14deg);
  background: linear-gradient(180deg, rgba(238, 198, 16, .14), transparent);
}
.page-header .container { position: relative; z-index: 1; max-width: 760px; }
.page-header h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.2rem); }
.page-header p { color: rgba(255, 255, 255, .72); font-size: 1.1rem; margin-bottom: 0; }

.crumbs {
  font-size: .86rem;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 14px;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold); }

/* --- Contact page ------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
}

.form-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3vw, 34px);
}
.form-panel h2 { font-size: 1.6rem; }
.form-panel > p { color: var(--slate); font-size: .99rem; }

/* --- Quote modal ---------------------------------------------------------
   Progressive enhancement again: until JS adds .js-modal to <html>, the modal
   is just ordinary content sitting in the page, so with JS off the contact
   page still shows a working form instead of an unreachable one. */
.js-modal .modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  padding: 20px;
  overflow-y: auto;
}
.js-modal .modal.is-open { display: block; }

.modal-backdrop { display: none; }
.js-modal .modal-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(12, 13, 14, .74);
  animation: modal-fade .22s var(--ease) both;
}

.js-modal .modal-dialog {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  animation: modal-rise .26s var(--ease) both;
}

@keyframes modal-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(18px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-modal .modal-backdrop, .js-modal .modal-dialog { animation: none; }
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 26px 0;
}
.modal-head h2 { font-size: 1.5rem; margin-bottom: .3em; }
.modal-head p { color: var(--slate); font-size: .96rem; margin-bottom: 0; }

/* Without JS the dialog is an ordinary panel in the page */
.modal-dialog {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.js-modal .modal-dialog { margin-top: 0; border: 0; }
/* Focused programmatically on open purely to announce the title — the ring
   would just be noise here; the controls inside keep their own. */
.modal-dialog:focus { outline: none; }

/* The close button does nothing without JS, so it only appears with it */
.modal-close { display: none; }
.js-modal .modal-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
.modal-close:hover { background: var(--paper-2); border-color: var(--mist); }
.modal-close svg { width: 20px; height: 20px; }

.js-modal .modal-body { padding: 0 26px 26px; }
.modal-body { padding: 0; }

/* Body scroll lock while the dialog is open */
.modal-open { overflow: hidden; }

/* The panel on the contact page that launches the dialog */
.quote-launch { text-align: left; }
.quote-launch .btn { margin-top: 22px; }
.quote-launch ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.quote-launch li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .96rem;
  color: var(--slate);
}
.quote-launch li svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--amber-ink);
}

@media (max-width: 620px) {
  .js-modal .modal { padding: 0; }
  .js-modal .modal-dialog {
    max-width: none;
    min-height: 100%;
    border-radius: 0;
  }
  .modal-head { padding: 20px 18px 0; }
  .js-modal .modal-body { padding: 0 18px 24px; }
}

/* --- Quote form --------------------------------------------------------- */
.quote-form { margin-top: 26px; }

/* --- Stepped card flow ---------------------------------------------------
   One question per card, the way the JotForm card layout works. Steps are
   only hidden once JS has added .js-steps, so without JS the form degrades to
   a single scrolling page with every question visible. */
.fsteps { position: relative; }

.js-steps .fstep { display: none; }
.js-steps .fstep.is-active { display: block; animation: fstep-in .32s var(--ease) both; }

@keyframes fstep-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-steps .fstep.is-active { animation: none; }
}

.fstep {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.js-steps .fstep { box-shadow: var(--shadow-lg); }
.fstep + .fstep { margin-top: 22px; }
.js-steps .fstep + .fstep { margin-top: 0; }

.fstep-body { padding: clamp(24px, 4vw, 40px); }
.fstep-body .field { margin-bottom: 0; }

/* Welcome / section-break cards are dark, like the JotForm ones */
.fstep--intro { border-color: transparent; }
.fstep--intro .fstep-body {
  background: var(--ink);
  color: #fff;
  text-align: center;
  padding-block: clamp(34px, 6vw, 56px);
}
/* The logo PNG has a white ground, so on the dark card give it a rounded
   tile and let it read as a deliberate badge rather than a stray box. */
.fstep--intro img {
  width: 92px;
  margin: 0 auto 22px;
  border-radius: 16px;
  padding: 6px;
  background: #fff;
}
.fstep--intro h2 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: .4em; }
.fstep--intro p { color: rgba(255, 255, 255, .75); margin-bottom: 0; }

/* Gold action bar along the bottom of every card */
.fstep-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
  background: var(--grad-bolt);
  min-height: 62px;
}
/* The first card has no Back button, so its action sits centred */
.fstep-bar--center { justify-content: center; }

.fbtn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-display);
  font-size: .97rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s var(--ease), transform .15s var(--ease);
}
.fbtn:hover { background: rgba(23, 24, 26, .1); }
.fbtn:active { transform: translateY(1px); }
.fbtn svg { width: 18px; height: 18px; }
.fbtn--back { font-size: .88rem; opacity: .75; }
.fbtn--back:hover { opacity: 1; }
.fbtn--submit {
  background: var(--ink);
  color: #fff;
  padding-inline: 26px;
}
.fbtn--submit:hover { background: var(--ink-3); }
.fbtn[disabled] { opacity: .6; cursor: default; }

/* Left side of the bar holds Back (or the required-field message) */
.fstep-bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }

.fstep-error {
  display: none;
  padding: 7px 14px;
  border-radius: 6px;
  background: #C4462F;
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
}
.fstep.has-error .fstep-error { display: block; }

/* Progress */
.fprogress {
  display: none;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.js-steps .fprogress { display: flex; }
.fprogress-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.fprogress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--grad-bolt);
  transition: width .35s var(--ease);
}
.fprogress-count {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--slate);
  white-space: nowrap;
}

/* The plain submit row is only for the no-JS case */
.js-steps .form-actions { display: none; }

@media (max-width: 520px) {
  .fstep-bar { flex-wrap: wrap; }
  .fbtn { flex: 1; justify-content: center; }
  .fstep-error { order: -1; width: 100%; text-align: center; }
}

.field { margin-bottom: 22px; }
.field:last-of-type { margin-bottom: 0; }

.field > label,
.field > .field-label {
  display: block;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.req { color: var(--amber-ink); margin-left: 2px; }
.field-hint {
  display: block;
  font-family: var(--font-body);
  font-size: .87rem;
  font-weight: 400;
  color: var(--slate);
  margin-top: 4px;
  line-height: 1.5;
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #A8ADB3; }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px rgba(238, 198, 16, .22);
}
.textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5E63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 17px;
}

/* Rows that split into columns on wider screens */
.field-row { display: grid; gap: 14px; }
.field-row--2 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.field-row--name { grid-template-columns: minmax(90px, .5fr) repeat(auto-fit, minmax(150px, 1fr)); }

/* Radio pills */
.choice-row { display: flex; flex-wrap: wrap; gap: 10px; }
.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.choice:hover { border-color: var(--mist); }
.choice input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.choice .dot {
  width: 18px;
  height: 18px;
  border: 2px solid var(--line);
  border-radius: 50%;
  flex: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.choice input:checked ~ .dot {
  border-color: var(--amber);
  box-shadow: inset 0 0 0 4px var(--gold);
}
.choice:has(input:checked) {
  border-color: var(--amber);
  background: #FFFBEA;
}
.choice input:focus-visible ~ .dot {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Consent checkbox */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  font-size: .94rem;
  line-height: 1.55;
  cursor: pointer;
}
.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: #E1A139;
  cursor: pointer;
}
.consent a { color: var(--ink); font-weight: 600; }

/* File upload */
.file-drop {
  display: block;
  padding: 22px;
  border: 2px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.file-drop:hover { border-color: var(--amber); background: #FFFDF5; }
.file-drop svg { width: 26px; height: 26px; margin: 0 auto 8px; color: var(--amber); }
.file-drop input { position: absolute; opacity: 0; width: 0; height: 0; }
.file-drop .file-cta { font-weight: 700; font-family: var(--font-display); color: var(--ink); }
.file-drop .file-meta { display: block; font-size: .86rem; color: var(--slate); margin-top: 4px; }
.file-names {
  margin-top: 10px;
  font-size: .89rem;
  color: var(--slate);
  word-break: break-word;
}

/* Validation + status */
.input:user-invalid,
.select:user-invalid,
.textarea:user-invalid { border-color: #C4462F; }

.field-error {
  display: none;
  margin-top: 6px;
  font-size: .87rem;
  font-weight: 600;
  color: #C4462F;
}
.field.has-error .field-error { display: block; }
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: #C4462F; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.form-actions .btn { flex: none; }
.form-note { font-size: .88rem; color: var(--slate); margin: 0; }

.form-alert {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-left: 3px solid #C4462F;
  border-radius: var(--radius-sm);
  background: #FCF1EE;
  font-size: .93rem;
  font-weight: 600;
  color: #8E2F1E;
}

.form-fallback {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  font-size: .93rem;
  color: var(--slate);
}

/* --- Terms page --------------------------------------------------------- */
.terms-list { counter-reset: term; list-style: none; margin: 0; padding: 0; }
.terms-list li {
  position: relative;
  counter-increment: term;
  padding: 20px 0 20px 56px;
  border-bottom: 1px solid var(--line);
  font-size: 1.01rem;
}
.terms-list li:last-child { border-bottom: 0; }
.terms-list li::before {
  content: counter(term);
  position: absolute;
  left: 0;
  top: 19px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--grad-bolt);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 800;
  color: var(--ink);
}

/* --- Thank you page ----------------------------------------------------- */
.confirm {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.confirm-mark {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: var(--grad-bolt);
  color: var(--ink);
}
.confirm-mark svg { width: 40px; height: 40px; }

.info-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
  padding: 28px;
}
.info-card + .info-card { margin-top: 22px; }
.info-card h3 { font-size: 1.02rem; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 20px; }

.info-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.info-list li { display: flex; gap: 15px; }
.info-list .ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--grad-bolt);
  color: var(--ink);
}
.info-list .ico svg { width: 19px; height: 19px; }
.info-list dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 3px;
}
.info-list dd { margin: 0; font-weight: 600; font-size: .99rem; }
.info-list dd a { text-decoration: none; }
.info-list dd a:hover { color: var(--amber); }
.info-list dl { margin: 0; }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: .95rem;
}
.hours li:last-child { border-bottom: 0; }
.hours .day { color: var(--slate); }
.hours .time { font-weight: 600; }

.map-embed {
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: var(--radius);
  display: block;
}

/* --- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .62);
  padding-block: 60px 0;
  font-size: .94rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(160px, 1fr));
  gap: 40px;
  padding-bottom: 48px;
}
.site-footer .brand-name { color: #fff; }
/* Against the dark footer the lighter mist is the readable one (5.7:1) */
.site-footer .brand-tag { color: var(--mist); }
.site-footer .brand { margin-bottom: 18px; }
.site-footer h4 {
  color: #fff;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-links a { text-decoration: none; transition: color .15s var(--ease); }
.footer-links a:hover { color: var(--gold); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--line-dark);
  font-size: .86rem;
  color: rgba(255, 255, 255, .58);
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--gold); }

/* --- Reveal on scroll ---------------------------------------------------
   Scoped to .js-reveal, which an inline script in <head> adds only when the
   observer is actually available. Without it the content simply shows — it is
   never left stuck at opacity 0 because a script failed to run. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: grid; place-items: center; }
  .header-phone span { display: none; }
  .header-phone { padding: 11px; border: 1px solid var(--line); border-radius: 10px; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px var(--gutter) 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 14px; font-size: 1rem; }
  .nav .btn { margin-top: 8px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .service-block { grid-template-columns: 1fr; gap: 18px; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .header-actions .btn { width: auto; }
  .stat-num { font-size: 1.8rem; min-width: 78px; }
}

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

@media print {
  .site-header, .cta-band, .nav-toggle, .site-footer { display: none; }
}