@import url("fonts/fonts.css");

/* ==========================================================================
   Template C12 v1, Sarasota Pool Repair
   Built from design/desktop.html + design/mobile.html. Measurements and the
   box-model note live in design/DESIGN-SPEC.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --ink:        #0A2A33;  /* text, dark sections, the two dark cards */
  --ink-deep:   #072028;
  --aqua:       #2CC4D6;  /* wave underline, tile bands, step numerals */
  --aqua-lt:    #8FDDE7;
  --aqua-lbl:   #6FD9E6;  /* labels on dark */
  --hero:       #E4F4F5;
  --tint:       #F3F8F8;
  --accent:     #FF7A59;  /* always carries ink text, never white */
  --accent-hi:  #FF8F72;
  --link:       #0B6F80;
  --text-2:     #24454E;
  --text-3:     #48646C;
  --on-dark:    #B5D2D8;
  --line:       #DCE7E9;
  --line-2:     #C9D9DC;
  --line-3:     #B9CDD1;
  --line-dark:  #2A4C56;
  --white:      #FFFFFF;

  --maxw: 1200px;
  --gutter: 32px;
  --section-y: 96px;

  --r-ctl: 6px;    /* buttons and inputs */
  --r-card: 8px;   /* light cards and photo blocks */
  --r-dark: 10px;  /* the quote form and the contact card */
  --r-tile: 4px;   /* step numerals, area pills */

  --font-head: 'Chivo', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Onest', 'Segoe UI', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* The design export carries no reset, so its 1200px containers are CONTENT
   boxes, 1264px wide in total. Leaving them on border-box pulls every section
   in by 64px and re-wraps the H1. Same trap as C3 §5, C4 and C10. */
.container {
  box-sizing: content-box;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* the header is sticky, so anchored sections need to clear it */
[id] { scroll-margin-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 800; }
p, ul, ol { margin: 0; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--link); }
a:hover { color: var(--ink); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white); padding: 12px 18px;
  border-radius: 0 0 var(--r-ctl) 0; font-weight: 700;
}
.skip:focus { left: 0; color: var(--white); }

:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }

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

/* --------------------------------------------------------------------------
   3. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-weight: 700; text-decoration: none;
  border: 0; border-radius: var(--r-ctl); cursor: pointer;
  transition: filter .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { filter: brightness(.94); }
.btn svg { flex: none; }

.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-hi); color: var(--ink); filter: none; }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { color: var(--white); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); filter: none; }

.btn--sm { min-height: 46px; padding: 0 20px; font-size: 16px; }
.btn--md { min-height: 52px; padding: 0 24px; font-size: 17px; }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 18px; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--white); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.site-header__inner {
  min-height: 80px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px;
}
.logo {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  text-decoration: none; color: var(--ink); min-width: 0;
}
.logo:hover { color: var(--ink); }
.logo img { display: block; height: 52px; width: auto; }
.site-footer__logo { display: inline-block; align-self: flex-start; }
.site-footer__logo img { display: block; height: 52px; width: auto; }
.logo__mark {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px;
  width: 34px; height: 34px; flex: none;
}
.logo__mark span { border-radius: 2px; }
.logo__mark span:nth-child(1) { background: var(--ink); }
.logo__mark span:nth-child(2) { background: var(--aqua); }
.logo__mark span:nth-child(3) { background: var(--aqua-lt); }
.logo__mark span:nth-child(4) { background: var(--accent); }
.logo__name {
  font-family: var(--font-head); font-weight: 800; font-size: 22px;
  letter-spacing: -.02em; line-height: 1.1; min-width: 0;
}

.nav { display: flex; align-items: center; gap: 30px; font-size: 16px; font-weight: 500; }

/* ---- dropdowns ----------------------------------------------------------
   Services and Service Areas group the flat URLs; menu grouping and URL
   nesting are separate things (BUILD-SYSTEM 3b). The panel opens on hover for
   a mouse and on click or Enter for a keyboard, and Escape closes it. */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__btn {
  display: flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 500; color: var(--ink);
  transition: color .15s ease;
}
.nav__btn:hover, .nav__btn[aria-expanded="true"] { color: var(--link); }
.nav__btn.is-here { font-weight: 700; }
.nav__chev { flex: none; transition: transform .15s ease; }
.nav__btn[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: 100%; left: -14px; z-index: 50;
  margin: 0; padding: 6px; list-style: none;
  min-width: 248px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: 0 18px 36px -18px rgba(10,42,51,.45);
  display: none;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__btn[aria-expanded="true"] + .nav__menu { display: block; }
.nav__menu a {
  display: flex; align-items: center; min-height: 44px;
  padding: 0 12px; border-radius: var(--r-ctl);
  font-size: 15.5px; color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav__menu a:hover { background: var(--tint); color: var(--link); }
.nav__menu a[aria-current="page"] { font-weight: 700; color: var(--link); }
/* a hover bridge, so the pointer can cross the gap to the panel */
.nav__group::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
}
.nav > a {
  color: var(--ink); text-decoration: none;
  min-height: 44px; min-width: 44px; display: flex; align-items: center;
  transition: color .15s ease;
}
.nav > a:hover, .nav > a[aria-current="page"] { color: var(--link); }
.nav > a[aria-current="page"] { font-weight: 700; }

.header__cta { display: flex; align-items: center; gap: 18px; }
.header__tel {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--ink); font-weight: 700; font-size: 18px; min-height: 44px;
  white-space: nowrap;
}
.header__tel:hover { color: var(--link); }

.nav-toggle {
  display: none; width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center; padding: 0;
  border: 1.5px solid var(--ink); border-radius: var(--r-ctl);
  background: var(--white); color: var(--ink); cursor: pointer;
}
.header__call-icon {
  display: none; width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  border-radius: var(--r-ctl); background: var(--accent); color: var(--ink);
}

/* --------------------------------------------------------------------------
   5. WAVE UNDERLINE + TILE BAND
   -------------------------------------------------------------------------- */
.wave { position: relative; display: inline-block; white-space: nowrap; }
.wave svg {
  position: absolute; left: 0; bottom: -12px; width: 100%; height: 14px;
}

/* The waterline band: aqua ground with a 24px grid drawn in the colour of the
   section it meets, so the join reads as pool tile rather than a stripe. */
.tiles {
  height: 48px; background-color: var(--aqua);
  background-image:
    linear-gradient(90deg, rgba(228,244,245,.9) 3px, transparent 3px),
    linear-gradient(rgba(228,244,245,.9) 3px, transparent 3px);
  background-size: 24px 24px;
}
.tiles--foot {
  height: 24px;
  background-image:
    linear-gradient(90deg, rgba(10,42,51,.9) 3px, transparent 3px),
    linear-gradient(rgba(10,42,51,.9) 3px, transparent 3px);
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  background-color: var(--hero);
  background-image: linear-gradient(rgba(228, 244, 245, .88), rgba(228, 244, 245, .88)), url("/images/hero-sarasota-pool.webp");
  background-size: cover;
  background-position: center;
}
.hero__inner {
  padding-top: 72px; padding-bottom: 80px;
  display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start;
}
.hero__copy {
  flex: 1 1 520px; min-width: 0;
  display: flex; flex-direction: column; gap: 26px; padding-top: 12px;
}
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #0B5F6E;
}
.eyebrow::before {
  content: ""; width: 10px; height: 10px; background: var(--aqua);
  border-radius: 2px; flex: none;
}
.hero h1 {
  font-size: clamp(42px, 5.8vw, 84px); line-height: .98; letter-spacing: -.035em;
}
.hero__lead {
  margin-top: 8px; font-size: 20px; line-height: 1.5; color: var(--text-2);
  max-width: 540px; text-wrap: pretty;
}
.hero__points {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 17px; font-weight: 500;
}
.hero__points li { display: flex; align-items: center; gap: 12px; }
.hero__points svg { flex: none; }
.hero__talk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 17px; color: var(--text-2);
}
.hero__talk a {
  font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: .35em;
  color: var(--link);
}

/* --------------------------------------------------------------------------
   7. QUOTE FORM (dark card)
   -------------------------------------------------------------------------- */
.hero__form { flex: 0 1 440px; min-width: 0; }
.quote {
  background: var(--ink); color: var(--white); border-radius: var(--r-dark);
  padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 24px 48px -24px rgba(10,42,51,.55);
}
.quote__head { display: flex; flex-direction: column; gap: 4px; }
.quote h2, .quote__title {
  font-family: var(--font-head); font-weight: 700; font-size: 28px;
  letter-spacing: -.02em; line-height: 1.1;
}
.quote__sub { font-size: 15px; color: var(--on-dark); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 13px; font-weight: 600; color: var(--on-dark); }
.field > label .opt { font-weight: 400; }
.field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 12px;
}
.quote input, .quote textarea, .quote select {
  width: 100%; border: 0; border-radius: var(--r-ctl);
  background: var(--white); color: var(--ink);
  font: inherit; font-size: 16px;   /* 16px keeps iOS from zooming on focus */
}
.quote input, .quote select { height: 48px; padding: 0 14px; }
.quote textarea { padding: 12px 14px; resize: vertical; min-height: 58px; }
.quote ::placeholder { color: #6F8990; }
.quote input:focus, .quote textarea:focus, .quote select:focus {
  outline: 2px solid var(--aqua); outline-offset: 1px;
}
.quote__foot { font-size: 13px; color: var(--on-dark); text-align: center; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field--invalid input, .field--invalid textarea, .field--invalid select {
  outline: 2px solid #FFA99A; outline-offset: 1px;
}
.field__err { font-size: 13px; font-weight: 600; color: #FFC2B6; }
.form-status { font-size: 15px; font-weight: 600; }
.form-status--ok { color: #9FE6C4; }
.form-status--err { color: #FFC2B6; }

/* --------------------------------------------------------------------------
   8. TRUST STRIP
   -------------------------------------------------------------------------- */
.trust { background: var(--white); border-bottom: 1px solid var(--line); }
.trust__inner {
  padding-top: 30px; padding-bottom: 30px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 24px; font-size: 16px;
}
.trust__item { display: flex; flex-direction: column; gap: 2px; }
.trust__item strong { font-size: 17px; }
.trust__item span { color: var(--text-3); }

/* --------------------------------------------------------------------------
   9. SECTIONS
   -------------------------------------------------------------------------- */
.section { background: var(--white); }
.section--tint { background: var(--tint); }
.section--ink { background: var(--ink); color: var(--white); }
.section__inner {
  padding-top: var(--section-y); padding-bottom: var(--section-y);
  display: flex; flex-direction: column; gap: 48px;
}
.section h2 {
  font-size: clamp(34px, 3.8vw, 54px); line-height: 1.02; letter-spacing: -.03em;
}
.section__head {
  display: flex; flex-wrap: wrap; gap: 24px 64px;
  align-items: flex-end; justify-content: space-between;
}
.section__head h2 { flex: 1 1 480px; }
.section__head p { flex: 1 1 380px; max-width: 460px; color: var(--text-2); text-wrap: pretty; }
.section__intro { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.section--ink .section__intro p { color: var(--on-dark); text-wrap: pretty; }

/* ruled service list, 01–08 */
.svc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
  column-gap: 64px; border-top: 2px solid var(--ink);
}
.svc__item {
  display: flex; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--line);
}
.svc__num {
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  color: var(--link); padding-top: 5px; width: 26px; flex: none;
}
.svc__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.svc__body h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.svc__body h3 a {
  display: inline-block; padding: 10px 0; margin: -10px 0;
  text-decoration: none; color: var(--ink);
}
.svc__body h3 a:hover { color: var(--link); text-decoration: underline; }
.svc__body p { color: var(--text-3); font-size: 16px; }
.svc__body a { font-weight: 600; text-decoration: none; }
.svc__body a:hover { text-decoration: underline; }

/* problem grid, 1px gaps read as mortar joints */
.problems {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark);
}
.problem {
  background: var(--ink); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.problem__label {
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--aqua-lbl);
}
.problem h3 { font-size: 22px; font-weight: 700; line-height: 1.25; }
.problem p { font-size: 16px; color: var(--on-dark); }

.section--ink .cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
}
.section--ink .cta-row a:not(.btn) {
  color: var(--white); font-weight: 600;
  min-height: 44px; display: flex; align-items: center; gap: .35em;
}

/* steps */
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}
.step {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 12px;
}
.step__num {
  width: 40px; height: 40px; background: var(--aqua); border-radius: var(--r-tile);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--ink);
}
.step h3 { font-size: 21px; font-weight: 700; }
.step p { color: var(--text-3); font-size: 16px; }

/* areas + map */
.areas__inner {
  padding-top: var(--section-y); padding-bottom: var(--section-y);
  display: flex; flex-wrap: wrap; gap: 56px; align-items: stretch;
}
.areas__copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.areas__copy p { color: var(--text-2); max-width: 520px; text-wrap: pretty; }
.areas__list {
  list-style: none; padding: 0; margin-top: 6px;
  display: flex; flex-wrap: wrap; gap: 10px; font-size: 16px; font-weight: 600;
}
.areas__list li, .areas__list a {
  border: 1.5px solid var(--line-3); border-radius: var(--r-tile);
  padding: 9px 14px; color: var(--ink); text-decoration: none;
  display: flex; align-items: center; min-height: 44px;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.areas__list a:hover { border-color: var(--ink); background: var(--ink); color: var(--white); }
.areas__list li.is-here, .areas__list a.is-here {
  border-color: var(--ink); background: var(--ink); color: var(--white);
}
.areas__map { flex: 1 1 420px; min-width: 0; }
.areas__map img {
  width: 100%; height: 100%; min-height: 340px; object-fit: cover;
  border-radius: var(--r-card); border: 1px solid var(--line);
}

/* FAQ */
.faq__inner {
  padding-top: var(--section-y); padding-bottom: var(--section-y);
  display: flex; flex-wrap: wrap; gap: 40px 64px;
}
.faq__inner h2 { flex: 1 1 300px; }
.faq__list { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.faq__list details { border-bottom: 1px solid var(--line-2); padding: 22px 0; }
.faq__list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: 20px; font-weight: 700; min-height: 44px;
  list-style: none; cursor: pointer;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list .plus {
  font-size: 28px; font-weight: 400; line-height: 1; flex: none;
  transition: transform .15s ease;
}
.faq__list details[open] .plus { transform: rotate(45deg); }
.faq__list details p { margin-top: 10px; color: var(--text-2); max-width: 680px; }

/* about / contact band */
.about__inner {
  padding-top: var(--section-y); padding-bottom: var(--section-y);
  display: flex; flex-wrap: wrap; gap: 56px; align-items: stretch;
}
.about__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.about__copy p { color: var(--text-2); max-width: 560px; text-wrap: pretty; }
.about__photo { margin-top: 8px; flex: 1 1 auto; min-height: 220px; }
.about__photo img {
  width: 100%; height: 100%; min-height: 220px; object-fit: cover;
  border-radius: var(--r-card);
}
.about__photo figcaption { margin-top: 8px; font-size: 14px; color: var(--text-3); }

.panel {
  flex: 0 1 440px; min-width: 0;
  background: var(--ink); color: var(--white); border-radius: var(--r-dark);
  padding: 36px 32px; display: flex; flex-direction: column; gap: 22px;
}
.panel h2, .panel h3 {
  font-family: var(--font-head); font-weight: 700; font-size: 28px; letter-spacing: -.02em;
}
.panel__row { display: flex; flex-direction: column; gap: 2px; }
.panel__label {
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--aqua-lbl);
}
.panel__row span:not(.panel__label) { color: var(--on-dark); }
.panel__phone {
  color: var(--white); font-family: var(--font-head); font-size: 30px; font-weight: 700;
  text-decoration: none; min-height: 44px; display: flex; align-items: center;
}
.panel__phone:hover { color: var(--aqua-lt); }
.panel .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   10. INNER PAGES
   -------------------------------------------------------------------------- */
.page-hero { background: var(--hero); }
.page-hero__inner { padding-top: 40px; padding-bottom: 56px; }
.page-hero h1 {
  font-size: clamp(36px, 4.6vw, 62px); line-height: 1.02; letter-spacing: -.032em;
  margin-top: 16px;
}
.page-hero__lead {
  margin-top: 16px; font-size: 19px; line-height: 1.5; color: var(--text-2);
  max-width: 46em; text-wrap: pretty;
}
.crumbs { font-size: 14px; color: var(--text-3); }
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--ink); }

.prose { display: flex; flex-direction: column; gap: 18px; max-width: 46em; }
.prose h2 { font-size: clamp(27px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -.025em; margin-top: 22px; }
.prose h3 { font-size: 21px; font-weight: 700; margin-top: 12px; }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose li::marker { color: var(--link); }
.prose a { font-weight: 600; }

.layout {
  padding-top: 72px; padding-bottom: var(--section-y);
  display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start;
}
.layout__main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.layout__side { flex: 0 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px 24px; display: flex; flex-direction: column; gap: 12px;
}
.card--tint { background: var(--tint); }
.card h2, .card h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.card p, .card li { font-size: 16px; color: var(--text-3); }
/* the sidebar lists are navigation, not prose, each row is a real tap target */
.card ul { list-style: none; padding: 0; display: flex; flex-direction: column; }
.card ul li { border-bottom: 1px solid var(--line); }
.card--tint ul li { border-bottom-color: var(--line-2); }
.card ul li:last-child { border-bottom: 0; }
.card ul li a {
  display: flex; align-items: center; min-height: 44px; padding: 4px 0;
  font-size: 16px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.card ul li a:hover { color: var(--link); text-decoration: underline; }

/* price table */
.ptable { width: 100%; border-collapse: collapse; font-size: 16px; }
.ptable caption { text-align: left; font-size: 14px; color: var(--text-3); padding-bottom: 10px; }
.ptable th, .ptable td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ptable thead th { border-bottom: 2px solid var(--ink); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.ptable td:last-child, .ptable th:last-child { padding-right: 0; white-space: nowrap; font-weight: 700; }
/* the cost page adds a source column, it carries the honesty, so it stays
   readable but never competes with the figure next to it */
.ptable--src td.src { font-size: 14px; color: var(--text-3); white-space: normal; font-weight: 400; }
.ptable--src th[scope="row"] { width: 30%; }
.ptable--src td:first-of-type { white-space: nowrap; font-weight: 700; width: 20%; }
@media (max-width: 767.98px) {
  .ptable--src, .ptable--src tbody, .ptable--src tr, .ptable--src th, .ptable--src td { display: block; width: auto; }
  .ptable--src thead { display: none; }
  .ptable--src tr { border-bottom: 1px solid var(--line); padding: 14px 0; }
  .ptable--src th, .ptable--src td { border: 0; padding: 0; }
  .ptable--src td:first-of-type { margin-top: 2px; }
  .ptable--src td.src { margin-top: 6px; }
}

.estimate {
  background: var(--tint); border-left: 3px solid var(--aqua);
  padding: 16px 18px; font-size: 15px; color: var(--text-2); border-radius: 0 var(--r-card) var(--r-card) 0;
}

/* an inline figure inside .prose, breaks the text, never floats */
.fig { margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.fig img { width: 100%; border-radius: var(--r-card); aspect-ratio: 3 / 2; object-fit: cover; }
.fig figcaption { font-size: 14px; color: var(--text-3); }

.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}
.photo-grid figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.photo-grid img { border-radius: var(--r-card); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.photo-grid figcaption { font-size: 14px; color: var(--text-3); }

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--on-dark); }
.site-footer__inner {
  padding-top: 48px; padding-bottom: 56px;
  display: flex; flex-wrap: wrap; gap: 28px 48px;
  align-items: flex-start; justify-content: space-between; font-size: 15px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 6px; }
.site-footer__name {
  font-family: var(--font-head); font-weight: 800; font-size: 22px;
  letter-spacing: -.02em; color: var(--white);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 500; }
.site-footer nav a {
  color: var(--white); text-decoration: none;
  min-height: 44px; min-width: 44px; display: flex; align-items: center;
  justify-content: flex-start;
}
.site-footer nav a:hover { color: var(--aqua-lt); }
.site-footer__tel {
  color: var(--white); font-weight: 700; font-size: 20px; text-decoration: none;
  min-height: 44px; display: flex; align-items: center;
}
.site-footer__tel:hover { color: var(--aqua-lt); }
.site-footer__legal {
  border-top: 1px solid var(--line-dark); padding: 20px 0 28px;
  display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px;
}
.site-footer__legal a { color: var(--on-dark); min-height: 44px; min-width: 44px; display: flex; align-items: center; }
.site-footer__legal a:hover { color: var(--white); }
.site-footer__legal { align-items: center; }
.site-footer__lic { margin-left: auto; color: var(--on-dark); }

/* sticky mobile call bar */
.callbar { display: none; }

/* --------------------------------------------------------------------------
   12. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .nav { display: none; }
  .nav-toggle, .header__call-icon { display: inline-flex; }
  .header__tel { display: none; }
  .header__cta .btn--sm { display: none; }
  .site-header__inner { min-height: 64px; }
  .logo__mark { width: 28px; height: 28px; }
  .logo__name { font-size: 18px; }
  .logo img { height: 42px; }

  .nav--open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 16px; box-shadow: 0 18px 32px -20px rgba(10,42,51,.45);
  }
  .nav--open > a { min-height: 52px; border-bottom: 1px solid var(--line); display: flex; align-items: center; }
  .nav--open > *:last-child a:last-child { border-bottom: 0; }

  /* on a phone the groups are accordions inside the open menu, not panels */
  .nav--open .nav__group { display: block; position: static; }
  .nav--open .nav__btn {
    width: 100%; min-height: 52px; justify-content: space-between;
    border-bottom: 1px solid var(--line);
  }
  .nav--open .nav__menu {
    position: static; display: none; min-width: 0; padding: 0 0 8px 14px;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    box-shadow: none; background: none;
  }
  .nav--open .nav__btn[aria-expanded="true"] + .nav__menu { display: block; }
  .nav--open .nav__group:hover .nav__menu,
  .nav--open .nav__group:focus-within .nav__menu { display: none; }
  .nav--open .nav__btn[aria-expanded="true"] + .nav__menu { display: block; }
  .nav--open .nav__menu a { min-height: 48px; padding: 0 8px; white-space: normal; }
  .nav--open .nav__group::after { content: none; }
}

@media (min-width: 1024px) and (max-width: 1200px) {
  .nav { gap: 22px; font-size: 15px; }
  .header__tel { font-size: 16px; }
  .nav__menu { left: -10px; min-width: 230px; }
}

/* Short laptop screens: the design's 72px hero padding puts the bottom of the
   quote card 19px under the fold at 1366x650, and the whole point of the card
   is that you can see the button without scrolling. Only the top padding moves,
   and only where it actually breaks, taller screens keep the design as drawn. */
@media (min-width: 768px) and (max-height: 700px) {
  .hero__inner { padding-top: 44px; padding-bottom: 56px; }
  .hero__copy { padding-top: 0; gap: 20px; }
}

/* and a shorter tier again for 1280x620-class screens */
@media (min-width: 768px) and (max-height: 640px) {
  .hero__inner { padding-top: 20px; padding-bottom: 40px; }
  .hero__copy { gap: 16px; }
}

@media (max-width: 767.98px) {
  :root { --gutter: 16px; --section-y: 56px; }
  body { font-size: 16px; }

  .hero__inner { padding-top: 28px; padding-bottom: 36px; gap: 24px; }
  .hero__copy { gap: 18px; padding-top: 0; flex: 1 1 auto; width: 100%; }
  .hero__form { flex: 1 1 auto; width: 100%; }
  .hero h1 { font-size: clamp(34px, 11.8vw, 46px); line-height: 1; }
  .hero__lead { font-size: 17px; margin-top: 6px; }
  .eyebrow { font-size: 12px; }
  .eyebrow::before { width: 8px; height: 8px; }
  .wave svg { bottom: -9px; height: 10px; }
  .tiles { height: 32px; }

  .quote { padding: 22px 18px 20px; gap: 14px; }
  .quote h2, .quote__title { font-size: 24px; }
  .field-row { grid-template-columns: minmax(0, 1fr); }

  .section__inner { gap: 32px; }
  .svc { column-gap: 0; }
  .svc__item { padding: 22px 0; }
  .problem { padding: 24px 20px; }
  .step { padding: 24px 20px; }
  .areas__inner, .faq__inner, .about__inner, .layout { gap: 36px; }
  .panel { padding: 28px 22px; }
  .panel__phone { font-size: 26px; }
  .faq__list summary { font-size: 18px; }
  .page-hero__inner { padding-top: 28px; padding-bottom: 36px; }
  .layout { padding-top: 40px; }

  .btn { white-space: normal; text-align: center; }
  .logo__name { white-space: normal; }

  /* sticky call bar, body gets the clearance so nothing hides behind it */
  body { padding-bottom: 72px; }
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--white); border-top: 1px solid var(--line);
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  }
  .callbar .btn { min-height: 50px; font-size: 16px; }
}

/* the figure column is nowrap so a range never breaks mid-price, but two
   ranges in one cell ("repair . replacement") overflow a 320px screen */
@media (max-width: 520px) {
  .ptable { font-size: 15px; }
  .ptable th, .ptable td { padding: 12px 10px 12px 0; }
  .ptable td:last-child, .ptable th:last-child { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-header, .callbar, .quote, .panel .btn { display: none; }
  body { font-size: 12pt; }
}

@media (max-width: 359.98px) {
  .logo img { height: 36px; }
}