/* ==========================================================================
   styles.css — layout & visual design
   --------------------------------------------------------------------------
   You should NOT need to edit this file to re-skin the site.
   Brand colors live in config.js (SITE.theme) and are injected as the
   CSS custom properties below at page load. The values here are only
   fallbacks so the page never renders unstyled.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Overridden from config.js — edit colors THERE, not here */
  --accent:       #16519E;
  --accent-dark:  #0E3A73;
  --accent-soft:  #E6EEF8;
  --volt:         #F5A623;
  --ink:          #1A2433;
  --paper:        #FFFFFF;
  --paper-alt:    #F2F6FB;

  /* Non-brand tokens (safe to leave alone) */
  --ink-soft:     #56627A;
  --line:         #E2E7F0;
  --radius:       12px;
  --shadow:       0 2px 10px rgba(20, 35, 60, 0.08);
  --shadow-lift:  0 14px 34px rgba(20, 35, 60, 0.16);
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bricolage Grotesque", "Arial Black", Impact, sans-serif;
  --header-h:     72px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
h3 { font-size: 1.25rem; }

/* ---------- Scroll reveal (classes applied by main.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

p { margin: 0 0 1em; }

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

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

.container {
  width: min(1140px, 100% - 2.5rem);
  margin-inline: auto;
}

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

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--accent-dark);
  color: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
}
.skip-link:focus { top: 0; color: #fff; }

/* ---------- Emergency bar ---------- */
.emergency-bar {
  background: var(--accent-dark);
  color: #fff;
  font-size: 0.95rem;
}
.emergency-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.85rem;
  padding: 0.6rem 0;
  text-align: center;
}
.emergency-bar svg { width: 18px; height: 18px; color: var(--volt); flex: none; }
.emergency-bar__text { color: #DCE7F4; }
.emergency-bar__cta {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.emergency-bar__cta strong { color: var(--volt); }
.emergency-bar__cta:hover { color: #fff; text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(22, 81, 158, 0.28);
}
.btn--primary:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(14, 58, 115, 0.34);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.btn--ghost:hover {
  background: #fff;
  color: var(--accent-dark);
  border-color: #fff;
}

.btn--lg { padding: 1rem 1.9rem; font-size: 1.0625rem; }

.btn[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(20, 35, 60, 0.1); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}
.brand svg { width: 30px; height: 30px; color: var(--accent); flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 11px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  padding: 1rem 1.25rem 1.5rem;
}
.site-nav.is-open { display: block; }

.site-nav ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.site-nav li + li { border-top: 1px solid var(--line); }
.site-nav ul a {
  display: block;
  padding: 0.75rem 0.25rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.site-nav ul a:hover { color: var(--accent); }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .site-nav ul {
    display: flex;
    gap: 1.5rem;
    margin: 0;
  }
  .site-nav li + li { border: 0; }
  .site-nav ul a { padding: 0.25rem 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(88vh, 760px);
  padding: 5rem 0;
  color: #fff;
  background: var(--accent-dark);
  overflow: hidden;
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: hero-zoom 18s ease-out forwards;
}

@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8, 22, 45, 0.55) 0%, transparent 40%),
    linear-gradient(
      to right,
      rgba(8, 22, 45, 0.85) 0%,
      rgba(8, 22, 45, 0.55) 55%,
      rgba(8, 22, 45, 0.18) 100%
    );
}

.hero__content {
  position: relative;
  max-width: 640px;
  margin-left: calc((100% - min(1140px, 100% - 2.5rem)) / 2);
}

.hero__eyebrow {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--volt);
}

.hero__headline {
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  color: #fff;
  margin-bottom: 0.4em;
  text-wrap: balance;
}

.hero__subhead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 34em;
  color: #E5ECF5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.hero__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

.hero__stat-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #BCCBDD;
}

.hero__license {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1.5rem 0 0;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #EAF1F9;
}

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 5.5rem) 0; }
.section--alt { background: var(--paper-alt); }

.section__head {
  max-width: 640px;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.section__head--center { margin-inline: auto; text-align: center; }

.section__eyebrow {
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.section__lede { color: var(--ink-soft); font-size: 1.1rem; }

/* ---------- Services ---------- */
.grid--services {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid--services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--services { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  isolation: isolate; /* clip the zooming image to the rounded top corners */
}
.service-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-5px); }

.service-card__img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  transition: transform 0.45s ease;
}
.service-card:hover .service-card__img { transform: scale(1.05); }

.service-card__body { padding: 1.25rem 1.4rem 1.5rem; }
.service-card__body h3 { color: var(--accent-dark); }
.service-card__body p { margin: 0; color: var(--ink-soft); }

/* ---------- Gallery (featured projects / before-after) ---------- */
.grid--gallery {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .grid--gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--gallery { grid-template-columns: repeat(3, 1fr); } }

.project {
  margin: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.project:hover { box-shadow: var(--shadow-lift); transform: translateY(-5px); }

.project__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--line);
}

.project__shot { position: relative; overflow: hidden; }
.project__shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.project:hover .project__shot img { transform: scale(1.05); }

/* Single-photo projects get a taller, more editorial crop */
.project > .project__shot img { aspect-ratio: 1 / 1; }
/* Before/after pairs keep the side-by-side 4:3 crop */
.project__pair .project__shot img { aspect-ratio: 4 / 3; }

.project__tag {
  position: absolute;
  top: 10px; left: 10px;
  padding: 0.2rem 0.65rem;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(26, 36, 51, 0.85);
}
.project__tag--after { background: var(--accent); }

.project__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 1rem 1.25rem;
}
.project__caption strong { font-size: 1.05rem; }
.project__caption span { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Why choose us ---------- */
.why {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .why { grid-template-columns: 5fr 7fr; }
}

.why__img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.why__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.why__items {
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 560px) { .why__items { grid-template-columns: 1fr 1fr; } }

.why-item { display: flex; gap: 1rem; }
.why-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}
.why-item__icon svg { width: 26px; height: 26px; }
.why-item h3 { margin-bottom: 0.25em; font-size: 1.1rem; }
.why-item p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

/* ---------- Testimonials ---------- */
.grid--testimonials {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .grid--testimonials { grid-template-columns: repeat(3, 1fr); } }

.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 1.75rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.testimonial:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }

.testimonial__stars {
  color: var(--volt);
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.75rem;
}

.testimonial blockquote {
  margin: 0 0 1.25rem;
  font-style: italic;
  color: var(--ink);
}

.testimonial figcaption {
  margin-top: auto;
  font-weight: 700;
  color: var(--accent-dark);
}
.testimonial figcaption span {
  font-weight: 400;
  color: var(--ink-soft);
}

/* ---------- Service area ---------- */
.counties {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 1.5rem;
  color: var(--ink);
  font-size: 1.05rem;
}
.counties strong { color: var(--accent-dark); }

.towns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.towns li {
  padding: 0.45rem 1rem;
  background: var(--accent-soft);
  color: var(--accent-dark);
  border-radius: 99px;
  font-weight: 600;
  font-size: 0.95rem;
}
.service-area__cta { text-align: center; }

/* ---------- Contact ---------- */
.contact {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .contact { grid-template-columns: 5fr 7fr; align-items: start; }
}

.contact-info {
  background: var(--accent-dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
}
.contact-info h3 { color: #fff; }
.contact-info a {
  color: #fff;
  font-weight: 700;
  overflow-wrap: anywhere; /* long emails must wrap, not overflow the card */
}
.contact-info a:hover { color: var(--accent-soft); }

.contact-info__row {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
}

/* Grow the phone/email links to a ~44px touch target without moving layout */
.contact-info__row a {
  display: inline-block;
  padding: 0.5rem 0;
  margin: -0.5rem 0;
}
.contact-info__row svg {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 3px;
  color: var(--accent-soft);
}
.contact-info__row p { margin: 0; }
.contact-info__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #AFC4DE;
}

.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.97rem;
}

/* ---------- Form ---------- */
.quote-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow);
}

.form-row { display: grid; gap: 0 1.25rem; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }

.field { margin-bottom: 1.2rem; }

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  /* ≥16px keeps iOS Safari from auto-zooming when a field gets focus */
  font-size: max(1rem, 16px);
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  /* Strip iOS/Android native control chrome (inner shadows, bevels) */
  -webkit-appearance: none;
  appearance: none;
}

.field input,
.field select {
  min-height: 48px; /* comfortable touch target on phones */
}

/* appearance:none removes the native dropdown arrow — draw our own */
.field select {
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356627A' stroke-width='2' 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 0.9rem center;
  background-size: 18px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field textarea { resize: vertical; min-height: 130px; }

/* Honeypot — hidden from humans, visible to dumb bots. Do not remove. */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.turnstile-slot { margin-bottom: 1.2rem; min-height: 65px; }
/* Flexible-size widget fills the form; never let it spill out of the card */
.turnstile-slot iframe { max-width: 100% !important; }

/* Turnstile's flexible widget bottoms out at 300px — on very narrow phones
   (e.g. iPhone SE 1st gen, 320px) scale it down to fit the form instead */
@media (max-width: 374px) {
  .turnstile-slot {
    transform: scale(0.83);
    transform-origin: top left;
  }
}

.form-status {
  margin: 1rem 0 0;
  font-weight: 600;
  min-height: 1.5em;
}
.form-status.is-error   { color: #A23B2E; }
.form-status.is-success { color: var(--accent); }

/* ---------- Contact section: phone-size adjustments ---------- */
@media (max-width: 560px) {
  /* Slimmer card padding so fields (and the 300px-min Turnstile widget)
     get the full width of small screens */
  .contact-info,
  .quote-form {
    padding: 1.5rem 1rem;
  }

  /* Full-width, thumb-friendly submit button */
  .quote-form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--accent-dark);
  color: #CCD8E7;
  padding: 3.5rem 0 0;
  font-size: 0.97rem;
}

.site-footer a { color: #fff; overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--accent-soft); }

.site-footer .brand { color: #fff; }
.site-footer .brand svg { color: #9DBBDD; }

.footer-license {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: #9DBBDD;
}

.footer-grid {
  display: grid;
  gap: 2.25rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }

.footer-grid h3 {
  color: #fff;
  font-size: 1rem;
  font-family: var(--font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-grid p { margin-bottom: 0.5em; }

.footer-grid .hours-list li { border-color: rgba(255, 255, 255, 0.12); }

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}
.footer-social a:hover { background: rgba(255, 255, 255, 0.1); }
.footer-social svg { width: 20px; height: 20px; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 1.25rem 0;
  text-align: center;
  font-size: 0.88rem;
  color: #9DAEC2;
}
.footer-bottom p { margin: 0; }