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

/* ==========================================================================
   Template C15 v1: Impact Windows of Miami
   Built from design/desktop.html + design/mobile.html. Measurements and the
   box-model note live in design/DESIGN-SPEC.md.

   Square corners everywhere. There is no border-radius in this design and
   adding one anywhere breaks the idea.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  --ink:        #0C2A30;  /* text, dark bands, logo outline */
  --ink-deep:   #081E23;  /* footer */
  --panel:      #123840;  /* the photo block ground */
  --paper:      #F3F6F5;
  --rule:       #D5DEDC;
  --rule-dk:    #2A5158;
  --muted:      #4A5F63;
  --teal:       #0A6F6A;  /* accent on light */
  --teal-dk:    #085753;
  --seafoam:    #8FE3D4;  /* accent on dark */
  --on-dark:    #D3E3E1;
  --coral:      #C93B1B;  /* the button colour, white text sits on it */
  --coral-hi:   #B33417;
  --coral-line: #E8684A;  /* the H1 underline */
  --input-line: #9FB1AE;
  --white:      #FFFFFF;

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

  --font-head: 'Golos Text', 'Arial Black', Arial, sans-serif;
  --font-body: 'Commissioner', 'Segoe UI', system-ui, sans-serif;

  /* the concentric arcs that sit over the dark bands */
  --arcs: repeating-radial-gradient(circle at 100% 100%,
            rgba(143,227,212,0) 0, rgba(143,227,212,0) 46px,
            rgba(143,227,212,.07) 46px, rgba(143,227,212,.07) 47px);
}

/* --------------------------------------------------------------------------
   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, C10 and C12. */
.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; }
[id] { scroll-margin-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--paper); 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(--teal); }
a:hover { color: var(--ink); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white); padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 0; color: var(--white); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.section--ink :focus-visible, .site-footer :focus-visible { outline-color: var(--seafoam); }

.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: square, no radius
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-weight: 700; text-decoration: none;
  border: 0; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn svg { flex: none; }
.btn--coral { background: var(--coral); color: var(--white); }
.btn--coral:hover { background: var(--coral-hi); color: var(--white); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--teal); color: var(--white); }
.btn--line {
  background: transparent; color: var(--ink); border: 2px solid var(--ink);
}
.btn--line:hover { background: var(--ink); color: var(--white); }
.btn--sea {
  background: transparent; color: var(--white); border: 2px solid var(--seafoam);
}
.btn--sea:hover { background: var(--seafoam); color: var(--ink); }

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

/* --------------------------------------------------------------------------
   4. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--white); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 40;
}
.site-header__inner {
  min-height: 76px; 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 svg { flex: none; }
.logo__img { display: block; width: auto; height: 52px; }
.logo__text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.logo__name {
  font-family: var(--font-head); font-weight: 800; font-size: 18px;
  letter-spacing: .02em; text-transform: uppercase;
}
.logo__sub {
  font-size: 13px; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--teal);
}

.nav { display: flex; align-items: center; gap: 32px; font-size: 15px; font-weight: 600; }
.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(--teal); }
.nav > a[aria-current="page"] { font-weight: 700; }

/* ---- dropdowns ----------------------------------------------------------
   Services and Service Areas group the flat URLs; menu grouping and URL
   nesting are separate things. Opens on hover for a mouse and on click or
   Enter for a keyboard; Escape closes. */
.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: 600; color: var(--ink);
  transition: color .15s ease;
}
.nav__btn:hover, .nav__btn[aria-expanded="true"] { color: var(--teal); }
.nav__btn.is-here { font-weight: 700; color: var(--teal); }
.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: 262px;
  background: var(--white); border: 1px solid var(--rule);
  box-shadow: 0 18px 36px -18px rgba(12,42,48,.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;
  font-size: 15px; font-weight: 600; color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.nav__menu a:hover { background: var(--paper); color: var(--teal); }
.nav__menu a[aria-current="page"] { color: var(--teal); }
/* hover bridge so the pointer can cross the gap into the panel */
.nav__group::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }

.header__cta { display: flex; align-items: center; gap: 14px; }
.header__tel {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  border: 2px solid var(--ink); color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 16px; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.header__tel:hover { background: var(--ink); color: var(--white); }
.nav-toggle, .header__call-icon {
  display: none; width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center; padding: 0;
}
.nav-toggle { border: 2px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; }
.header__call-icon { background: var(--coral); color: var(--white); }

/* --------------------------------------------------------------------------
   5. HERO
   -------------------------------------------------------------------------- */
.hero {
  background-color: var(--ink);
  background-image: var(--arcs), linear-gradient(rgba(12, 42, 48, .86), rgba(12, 42, 48, .86)), url("images/hero-miami-brickell.webp");
  background-size: auto, cover, cover;
  background-position: 0 0, center, center 40%;
  color: var(--white);
}
.hero__inner {
  padding-top: 72px; padding-bottom: 80px;
  display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start;
}
.hero__copy {
  flex: 1 1 520px; min-width: 0;
  display: flex; flex-direction: column; gap: 24px; padding-top: 12px;
}
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--seafoam);
}
.eyebrow::before { content: ""; width: 36px; height: 2px; background: var(--seafoam); flex: none; }
.eyebrow--light { color: var(--teal); }
.eyebrow--light::before { background: var(--teal); }
.eyebrow--plain::before { content: none; }

.hero h1 {
  font-size: clamp(38px, 4.7vw, 68px); line-height: 1.02;
  letter-spacing: -.015em; text-wrap: balance;
}
/* the city name: seafoam with a coral underline. Not a highlighter. */
.mark {
  color: var(--seafoam);
  text-decoration: underline; text-decoration-color: var(--coral-line);
  text-decoration-thickness: 4px; text-underline-offset: 10px;
}
.hero__lead {
  margin-top: 8px; font-size: 20px; line-height: 1.5;
  color: var(--on-dark); max-width: 540px;
}
.hero__points {
  list-style: none; padding: 0; margin-top: 4px;
  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;
  margin-top: 8px; font-size: 16px; color: var(--on-dark);
}
.hero__talk a {
  color: var(--white); font-weight: 700; font-size: 20px; text-decoration: none;
  border-bottom: 2px solid var(--seafoam); padding-bottom: 2px;
  min-height: 44px; display: flex; align-items: center; gap: .35em;
}
.hero__talk a:hover { color: var(--seafoam); }

/* --------------------------------------------------------------------------
   6. QUOTE FORM: white card, 6px coral top border, square
   -------------------------------------------------------------------------- */
.hero__form { flex: 0 1 430px; min-width: 0; }
.quote {
  background: var(--white); color: var(--ink);
  padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 14px;
  border-top: 6px solid var(--coral);
  box-shadow: 0 24px 48px rgba(0,0,0,.28);
}
.quote__head { display: flex; flex-direction: column; gap: 2px; }
.quote h2, .quote__title {
  font-family: var(--font-head); font-weight: 800; font-size: 24px; line-height: 1.15;
}
.quote__sub { font-size: 15px; color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 13px; font-weight: 700; }
.field > label .opt { font-weight: 500; color: var(--muted); }
/* the design weights this row 0.8fr / 1.2fr: phone is short, address is not */
.field-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; }

.quote input, .quote textarea, .quote select {
  width: 100%; border: 1px solid var(--input-line); background: var(--white);
  font: inherit; font-size: 16px;   /* 16px keeps iOS from zooming on focus */
  color: var(--ink);
}
.quote input, .quote select { height: 46px; padding: 0 12px; }
.quote textarea { height: 64px; min-height: 64px; padding: 10px 12px; resize: vertical; }
.quote ::placeholder { color: #6E8481; }
.quote input:focus, .quote textarea:focus, .quote select:focus {
  outline: 2px solid var(--teal); outline-offset: 1px;
}
.quote__foot { font-size: 13px; color: var(--muted); text-align: center; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field--invalid input, .field--invalid textarea, .field--invalid select { border-color: #B3261E; }
.field__err { font-size: 13px; font-weight: 700; color: #B3261E; }
.form-status { font-size: 15px; font-weight: 700; }
.form-status--ok { color: #1B6B45; }
.form-status--err { color: #B3261E; }

/* --------------------------------------------------------------------------
   7. TRUST STRIP
   -------------------------------------------------------------------------- */
.trust { background: var(--white); border-bottom: 1px solid var(--rule); }
.trust__inner {
  padding-top: 28px; padding-bottom: 28px;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px 32px; font-size: 15px; font-weight: 600;
}
@media (min-width: 1024px) {
  .trust__inner { display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; gap: 0; font-size: 14px; padding-top: 22px; padding-bottom: 22px; }
  .trust__item { justify-content: center; text-align: left; padding: 4px 16px; }
  .trust__item + .trust__item { border-left: 1px solid var(--rule); }
}
@media (max-width: 599.98px) {
  .trust__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}
.trust__item { display: flex; align-items: center; gap: 10px; }
.trust__item::before { content: ""; width: 10px; height: 10px; background: var(--teal); flex: none; }

/* --------------------------------------------------------------------------
   8. SECTIONS
   -------------------------------------------------------------------------- */
.section { background: var(--paper); }
.section--white { background: var(--white); }
.section--ink {
  background-color: var(--ink); background-image: var(--arcs); color: var(--white);
}
.section__inner { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.section h2 { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.08; letter-spacing: -.01em; }
.section--ink p { color: var(--on-dark); }

/* a two-column section head: sticky-ish intro left, content right */
.split { display: flex; flex-wrap: wrap; gap: 56px; }
.split__intro { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.split__intro p { color: var(--muted); }
.split__body { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; }

/* ruled service list, 01–05 */
.svc { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }
.svc__item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
}
.svc__num {
  flex: 0 0 44px; font-family: var(--font-head); font-weight: 600;
  font-size: 15px; color: var(--teal);
}
.svc__item h3 { flex: 0 0 250px; font-size: 21px; font-weight: 800; }
/* these headings are the way into the doors page on a phone, so the link gets
   a 44px row rather than just the height of its own text */
.svc__item h3 a {
  display: inline-block; padding: 10px 0; margin: -10px 0;
  color: var(--ink); text-decoration: none;
}
.svc__item h3 a:hover { color: var(--teal); text-decoration: underline; }
.svc__item p { flex: 1 1 280px; min-width: 0; color: var(--muted); }

/* why-impact: photo + ruled points on the dark band */
.why__inner {
  padding-top: var(--section-y); padding-bottom: var(--section-y);
  display: flex; flex-wrap: wrap; gap: 64px; align-items: stretch;
}
.why__media { flex: 1 1 400px; min-width: 0; min-height: 420px; }
.why__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; border: 1px solid var(--rule-dk); }
.why__copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.why__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 32px 40px;
}
.why__item { display: flex; flex-direction: column; gap: 8px; border-top: 2px solid var(--seafoam); padding-top: 16px; }
.why__item h3 { font-size: 18px; font-weight: 700; }
.why__item p { font-size: 16px; color: var(--on-dark); }

/* process cards */
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 24px; margin-top: 44px;
}
.step { background: var(--white); border: 1px solid var(--rule); padding: 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.step__num { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--teal); letter-spacing: .1em; }
.step h3 { font-size: 19px; font-weight: 700; }
.step p { font-size: 16px; color: var(--muted); }

/* areas */
.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 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.areas__copy p { color: var(--muted); max-width: 520px; }
.areas__list {
  list-style: none; padding: 0; margin-top: 4px;
  display: flex; flex-wrap: wrap; gap: 10px; font-size: 15px; font-weight: 600;
}
.areas__list li, .areas__list a {
  border: 1px solid var(--rule); background: var(--white); color: var(--ink);
  padding: 9px 14px; 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: 1px solid var(--rule); }

/* FAQ */
.faq__list { display: flex; flex-direction: column; border-top: 2px solid var(--ink); margin-top: 8px; }
.faq__list details { border-bottom: 1px solid var(--rule); padding: 22px 0; }
.faq__list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-size: 19px; font-weight: 700; min-height: 44px;
  list-style: none; cursor: pointer; font-family: var(--font-head);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list .plus { font-size: 26px; font-weight: 400; line-height: 1; flex: none; color: var(--teal); transition: transform .15s ease; }
.faq__list details[open] .plus { transform: rotate(45deg); }
.faq__list details p { margin-top: 10px; color: var(--muted); max-width: 70ch; }

/* 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(--on-dark); max-width: 560px; }
.section--white .about__copy p, .section .about__copy p { color: var(--muted); }
.section--ink .about__copy p { color: var(--on-dark); }

.panel {
  flex: 0 1 430px; min-width: 0; background: var(--coral); color: var(--white);
  padding: 32px 28px; display: flex; flex-direction: column; gap: 20px;
}
.panel h2, .panel h3 { font-family: var(--font-head); font-weight: 800; font-size: 24px; }
.panel__row { display: flex; flex-direction: column; gap: 2px; }
.panel__label { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.panel__phone {
  color: var(--white); font-family: var(--font-head); font-size: 28px; font-weight: 800;
  text-decoration: none; min-height: 44px; display: flex; align-items: center;
}
.panel__phone:hover { color: var(--white); text-decoration: underline; }
.panel a:not(.btn):not(.panel__phone) { color: var(--white); }
.panel .btn { margin-top: auto; }
.panel .btn--sea { border-color: var(--white); }
.panel .btn--sea:hover { background: var(--white); color: var(--coral); }

/* --------------------------------------------------------------------------
   9. INNER PAGES
   -------------------------------------------------------------------------- */
.page-hero { background-color: var(--ink); background-image: var(--arcs); color: var(--white); }
.page-hero__inner { padding-top: 40px; padding-bottom: 56px; }
.page-hero h1 { font-size: clamp(32px, 4vw, 54px); line-height: 1.05; letter-spacing: -.015em; margin-top: 16px; text-wrap: balance; }
.page-hero__lead { margin-top: 16px; font-size: 19px; line-height: 1.5; color: var(--on-dark); max-width: 46em; }
.crumbs { font-size: 14px; color: var(--on-dark); }
.crumbs a { color: var(--seafoam); }
.crumbs a:hover { color: var(--white); }

.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; }

.prose { display: flex; flex-direction: column; gap: 18px; max-width: 46em; }
.prose h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -.012em; margin-top: 22px; }
.prose h3 { font-size: 20px; 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(--teal); }
.prose a { font-weight: 600; }

.card { background: var(--white); border: 1px solid var(--rule); padding: 26px 24px; display: flex; flex-direction: column; gap: 12px; }
.card--tint { background: var(--paper); }
.card h2, .card h3 { font-size: 20px; font-weight: 800; }
.card p, .card li { font-size: 16px; color: var(--muted); }
/* sidebar lists are navigation, so every 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(--rule); }
.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(--teal); text-decoration: underline; }

/* price table */
.ptable { width: 100%; border-collapse: collapse; font-size: 16px; }
.ptable caption { text-align: left; font-size: 14px; color: var(--muted); padding-bottom: 10px; }
.ptable th, .ptable td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ptable thead th { border-bottom: 2px solid var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.ptable td:last-child, .ptable th:last-child { padding-right: 0; white-space: nowrap; font-weight: 700; }
.ptable--src td.src { font-size: 14px; color: var(--muted); 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%; }

.estimate {
  background: var(--paper); border-left: 3px solid var(--coral);
  padding: 16px 18px; font-size: 15px; color: var(--muted);
}
.section--white .estimate { background: var(--paper); }

.fig { margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.fig figcaption { font-size: 14px; color: var(--muted); }

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink-deep); color: var(--on-dark); }
.site-footer__inner {
  padding-top: 48px; padding-bottom: 40px;
  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: 18px;
  letter-spacing: .02em; text-transform: uppercase; color: var(--white);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-weight: 600; }
.site-footer nav a {
  color: var(--white); text-decoration: none;
  min-height: 44px; min-width: 44px; display: flex; align-items: center;
}
.site-footer nav a:hover { color: var(--seafoam); }
.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(--seafoam); }
.site-footer__legal {
  border-top: 1px solid var(--rule-dk); padding: 18px 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__lic { margin-left: auto; display: flex; align-items: center; min-height: 44px; }
@media (max-width: 767.98px) { .site-footer__lic { margin-left: 0; } }

.callbar { display: none; }

/* --------------------------------------------------------------------------
   11. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .nav { display: none; }
  .nav-toggle, .header__call-icon { display: inline-flex; }
  .header__tel { display: none; }
  .site-header__inner { min-height: 64px; }
  .logo__name { font-size: 16px; }
  .logo__img { height: 40px; }
  .logo__sub { font-size: 11px; letter-spacing: .18em; }

  .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(--rule);
    padding: 8px var(--gutter) 16px; box-shadow: 0 18px 32px -20px rgba(12,42,48,.45);
  }
  .nav--open > a { min-height: 52px; border-bottom: 1px solid var(--rule); 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(--rule); }
  .nav--open .nav__menu {
    position: static; display: none; min-width: 0; padding: 0 0 8px 14px;
    border: 0; border-bottom: 1px solid var(--rule); box-shadow: none; background: none;
  }
  .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: 14.5px; }
  .header__tel { font-size: 15px; padding: 0 14px; }
  .nav__menu { left: -10px; min-width: 240px; }
}

/* Short laptop screens: the design's 72px hero padding puts the bottom of the
   quote card under the fold at 1366x650, and the point of the card is that the
   button is visible without scrolling. Only the top padding moves, and only
   where it actually breaks. */
@media (min-width: 768px) and (max-height: 760px) {
  .hero__inner { padding-top: 44px; padding-bottom: 56px; }
  .hero__copy { padding-top: 0; gap: 18px; }
}
@media (min-width: 768px) and (max-height: 660px) {
  .hero__inner { padding-top: 24px; padding-bottom: 40px; }
  .hero__copy { gap: 14px; }
}

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

  .hero__inner { padding-top: 32px; padding-bottom: 40px; 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(30px, 10.3vw, 40px); line-height: 1.05; }
  .hero__lead { font-size: 17px; }
  .mark { text-underline-offset: 7px; text-decoration-thickness: 3px; }

  .split, .why__inner, .areas__inner, .about__inner, .layout { gap: 32px; }
  .svc__item { padding: 20px 0; }
  .svc__item h3 { flex: 1 1 100%; }
  .svc__num { flex: 0 0 34px; }
  .why__media, .why__media img { min-height: 260px; }
  .step { padding: 22px 20px; }
  .panel { padding: 26px 20px; }
  .panel__phone { font-size: 24px; }
  .faq__list summary { font-size: 17px; }
  .page-hero__inner { padding-top: 24px; padding-bottom: 36px; }
  .layout { padding-top: 40px; }

  .btn { white-space: normal; text-align: center; }
  .field-row { grid-template-columns: minmax(0, 1fr); }

  /* 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(--rule);
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  }
  .callbar .btn { min-height: 50px; font-size: 16px; }
}

@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; }
  .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(--rule); padding: 14px 0; }
  .ptable--src th, .ptable--src td { border: 0; padding: 0; }
  .ptable--src td.src { margin-top: 6px; }
}

@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; }
}