/* ==========================================================================
   LA Roof Shield, visual identity: "California sunset"
   Warm residential. Charcoal hero, terracotta + amber accents, cream paper.
   Serif display type, oversized and left-aligned. Square corners, hairline
   rules, soft low shadows. Asymmetric hero with an overlapping quote card.
   ========================================================================== */

:root {
  --char:        #1b1917;
  --char-2:      #2a2521;
  --char-3:      #3b342e;
  --ink:         #2a2119;
  --ink-soft:    #6c5e51;
  --terracotta:  #b4441f;
  --terracotta-d:#8d3315;
  --amber:       #d98726;
  --amber-soft:  #f0c98a;
  --cream:       #fdf8f1;
  --cream-2:     #f6ecdc;
  --cream-3:     #efe0c9;
  --line:        #e3d5c2;
  --line-2:      #cdb99f;
  --shell:       1120px;
  --gutter:      26px;
  --serif:       Georgia, "Times New Roman", Times, serif;
  --sans:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --shadow-soft: 0 2px 4px rgba(74, 47, 26, .04), 0 10px 28px rgba(74, 47, 26, .07);
  --shadow-lift: 0 6px 12px rgba(74, 47, 26, .08), 0 26px 60px rgba(45, 27, 12, .18);
}

* { box-sizing: border-box; margin: 0; padding: 0 }

html { -webkit-text-size-adjust: 100% }

body {
  font: 17px/1.75 var(--sans);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--terracotta-d) }
a:hover { color: var(--terracotta) }

:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 3px;
}
.hero :focus-visible,
.site-footer :focus-visible,
.urgent-bar :focus-visible { outline-color: var(--amber) }

/* ---------- shell ---------------------------------------------------- */

.container {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-sm { max-width: 760px }

/* ---------- display type --------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--char);
}
h1 {
  font-size: clamp(2.35rem, 6.2vw, 4.4rem);
  line-height: 1.02;
  margin-bottom: 20px;
}
h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.65rem);
  margin-bottom: 14px;
}
h3 { font-size: 1.22rem; line-height: 1.25; margin-bottom: 9px }
h4 { font-size: 1.05rem; margin-bottom: 8px }
p  { margin-bottom: 15px }
p:last-child { margin-bottom: 0 }

/* ---------- announcement strip --------------------------------------- */

.urgent-bar {
  background: var(--cream-3);
  border-bottom: 1px solid var(--line-2);
  color: #5c3316;
  text-align: center;
  padding: 11px 20px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.urgent-bar a {
  color: var(--terracotta-d);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- masthead (static, not sticky) ---------------------------- */

.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--char);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.logo-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 0;
  background: var(--terracotta);
  color: var(--cream);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--cream-3);
}
.site-logo-text { display: block; line-height: 1.15 }
.site-logo-text em {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 4px;
}
.site-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 600;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--terracotta-d); border-bottom-color: var(--terracotta) }
.header-phone {
  background: transparent;
  color: var(--terracotta-d);
  border: 2px solid var(--terracotta);
  padding: 10px 18px;
  border-radius: 0;
  font-weight: 800;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { background: var(--terracotta); color: #fff }

/* ---------- hero: asymmetric, overlapping ---------------------------- */

.hero {
  position: relative;
  background:
    radial-gradient(1100px 560px at 78% -10%, rgba(217, 135, 38, .34), transparent 62%),
    radial-gradient(720px 480px at 4% 108%, rgba(180, 68, 31, .30), transparent 66%),
    var(--char);
  color: var(--cream);
  padding: 84px 0 76px;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 201, 138, .45), transparent);
}
.hero h1, .hero h2 { color: var(--cream) }
.hero p {
  color: #ddcab2;
  font-size: 1.12rem;
  max-width: 40ch;
}
.hero > .container { position: relative; z-index: 2 }

/* ---------- photo: sunset veil ---------------------------------------
   Traitement maison: la photo passe en sepia chaud sous un voile charbon
   dense a gauche (la colonne de texte) qui s'ouvre vers la droite, puis
   les memes lueurs terracotta/ambre que le hero sans photo. Bords francs,
   aucun arrondi, cadrage haut pour garder la ligne de toit.

   Contraste: les cinq images tournent maintenant sur toutes les pages ville,
   comte, service et urgence, il ne suffit plus de mesurer hero.jpg. Mesure
   refaite pour les cinq, en simulant le rendu reel (object-fit: cover, donc
   recadrage, puis voile interpole a la position du pixel DANS l'element,
   lueurs radiales comptees a leur alpha maximum partout), sur huit viewports
   de 360 a 1440px, en retenant le 99,9e centile de luminance de la zone de
   texte. Sous 900px la grille du hero se replie: le texte va jusqu'au bord
   droit, la ou le voile etait le plus transparent, et c'est la que se trouvait
   le pire cas. Les paliers de droite ont ete resserres (.87/.72 -> .91/.84)
   pour tenir AA: le minimum passe de 3.98:1 a 4.93:1 (paragraphe #ddcab2,
   le texte le plus faible), 4.93 a 5.12:1 selon l'image.
   -------------------------------------------------------------------- */

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--char);
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  filter: sepia(.30) saturate(1.1) contrast(1.02) brightness(.92);
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 560px at 78% -10%, rgba(217, 135, 38, .15), transparent 62%),
    radial-gradient(720px 480px at 4% 108%, rgba(180, 68, 31, .18), transparent 66%),
    linear-gradient(96deg,
      rgba(27, 25, 23, .96) 0%,
      rgba(27, 25, 23, .94) 44%,
      rgba(27, 25, 23, .91) 64%,
      rgba(43, 37, 33, .84) 100%);
}

/* Pages urgence: la photo est un ciel d'orage tres sombre, elle disparait
   sous le meme voile que le coucher de soleil. On compresse sa dynamique
   (contrast < 1) pour remonter le ciel. Le voile s'ouvre un peu plus a droite
   que le voile courant, derriere la carte du formulaire; il ne peut pas
   s'ouvrir davantage, car sous 900px la grille se replie et le paragraphe
   passe justement la (mesure: 3.10:1 avec l'ancien palier a .52, 4.76:1 a .80). */
.hero-photo-emergency img {
  filter: sepia(.32) saturate(1.05) brightness(1.3) contrast(.62);
  object-position: 50% 46%;
}
.hero-photo-emergency::after {
  background:
    radial-gradient(1100px 560px at 78% -10%, rgba(217, 135, 38, .15), transparent 62%),
    radial-gradient(720px 480px at 4% 108%, rgba(180, 68, 31, .18), transparent 66%),
    linear-gradient(96deg,
      rgba(27, 25, 23, .96) 0%,
      rgba(27, 25, 23, .94) 44%,
      rgba(27, 25, 23, .91) 64%,
      rgba(43, 37, 33, .80) 100%);
}
/* Heros dont le texte occupe toute la largeur (index /emergency, about,
   locations): pas de colonne de formulaire pour proteger le bord droit, le
   voile reste donc dense de bout en bout. Mesure: 5.58 a 5.78:1 selon l'image. */
.hero-photo-full::after {
  background:
    radial-gradient(1100px 560px at 78% -10%, rgba(217, 135, 38, .15), transparent 62%),
    radial-gradient(720px 480px at 4% 108%, rgba(180, 68, 31, .18), transparent 66%),
    linear-gradient(96deg,
      rgba(27, 25, 23, .96) 0%,
      rgba(27, 25, 23, .93) 50%,
      rgba(35, 30, 27, .88) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.38fr .92fr;
  gap: 0;
  align-items: start;
  position: relative;
  z-index: 2;
}
.hero-grid > :first-child { padding-right: 64px }

.hero-badge {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber-soft);
  border-bottom: 1px solid rgba(240, 201, 138, .4);
  padding: 0 0 9px;
  margin-bottom: 26px;
}

.hero-rule {
  display: block;
  width: 132px;
  height: 5px;
  margin: 0 0 24px;
  background: linear-gradient(90deg, var(--terracotta), var(--amber));
}

.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0 30px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(240, 201, 138, .28);
}
.trust-pills span {
  font-size: .84rem;
  font-weight: 600;
  color: #e6d6bf;
  padding: 5px 0;
}

/* the quote card is pulled down and left so it laps over the headline column */
.hero-form {
  background: var(--cream);
  color: var(--ink);
  border-radius: 0;
  border-top: 6px solid var(--terracotta);
  padding: 28px 26px 30px;
  margin: 46px 0 -46px -72px;
  position: relative;
  z-index: 3;
  box-shadow: var(--shadow-lift);
}
.hero-form h3 {
  font-size: 1.45rem;
  color: var(--char);
  margin-bottom: 4px;
}

/* ---------- sections -------------------------------------------------- */

.section { padding: 74px 0 }
.section-alt {
  background: var(--cream-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-header {
  margin-bottom: 34px;
  max-width: 62ch;
}
.section-tag {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--terracotta-d);
  margin-bottom: 8px;
}
.section-tag::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--terracotta);
  vertical-align: middle;
  margin-right: 12px;
}

/* ---------- buttons: square, weighted --------------------------------- */

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 0;
  border: 2px solid transparent;
  font-family: var(--sans);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn-accent {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}
.btn-accent:hover { background: var(--terracotta-d); border-color: var(--terracotta-d); color: #fff }
.btn-outline {
  background: transparent;
  border-color: var(--char);
  color: var(--char);
}
.btn-outline:hover { background: var(--char); color: var(--cream) }
.btn-white {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--terracotta-d);
}
.btn-white:hover { background: #fff; color: var(--terracotta-d) }
.btn-lg { padding: 17px 34px; font-size: 1.02rem }
.btn-full { width: 100%; display: block }

/* ---------- cards: right angles, hairline, soft shadow ---------------- */

.grid { display: grid; gap: 22px }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)) }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)) }

.card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 28px 26px;
  box-shadow: var(--shadow-soft);
  color: inherit;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  border-color: var(--line-2);
  box-shadow: 0 8px 16px rgba(74, 47, 26, .08), 0 22px 44px rgba(74, 47, 26, .12);
}
.card h3 { color: var(--char) }
.card p { color: var(--ink-soft); font-size: .95rem; margin: 0 }

/* bandeau photo en tete de carte: a fleur des bords, filet terracotta dessous */
.card-media {
  margin: -28px -26px 20px;
  border-bottom: 3px solid var(--terracotta);
  background: var(--cream-3);
  line-height: 0;
}
.card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 45%;
  filter: sepia(.24) saturate(1.08) contrast(1.03);
}
.card-icon {
  font-size: 1.55rem;
  line-height: 1;
  margin-bottom: 14px;
}
.section-alt .card { background: var(--cream) }

/* ---------- business directory ---------------------------------------- */

.dir-list {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(336px, 1fr));
}
.dir-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: 0;
  padding: 24px 26px;
  box-shadow: var(--shadow-soft);
}
.dir-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
}
.dir-card h3 { color: var(--char); margin: 0 }
.dir-rating {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: .85rem;
  white-space: nowrap;
}
.dir-rating strong {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--terracotta-d);
}
.dir-stars { color: #a06a10; letter-spacing: .05em }
.dir-count { color: var(--ink-soft) }
.dir-addr {
  color: var(--ink-soft);
  font-size: .92rem;
  margin: 10px 0 0;
}
.dir-review {
  border-left: 0;
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding: 14px 0 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--char-3);
}
.dir-review cite {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-style: normal;
  font-size: .8rem;
  color: var(--ink-soft);
}
.dir-attrib {
  margin-top: 24px;
  font-size: .8rem;
  color: var(--ink-soft);
  max-width: 80ch;
}

/* ---------- lead capture ---------------------------------------------- */

.match-cta {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 6px solid var(--terracotta);
  border-radius: 0;
  padding: 38px 34px;
  box-shadow: var(--shadow-soft);
}
.match-cta h2 { font-size: clamp(1.55rem, 3vw, 2.15rem) }

.lead-form { display: grid; gap: 16px; margin-top: 20px }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.lead-form label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  margin-top: 7px;
  padding: 13px 12px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: var(--cream);
  font: 400 16px/1.5 var(--sans);
  color: var(--ink);
  text-transform: none;
  letter-spacing: normal;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: 3px solid var(--amber);
  outline-offset: 1px;
  border-color: var(--terracotta);
  background: #fff;
}
.lead-form .lf-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-soft);
  line-height: 1.55;
}
.lead-form .lf-consent input { width: auto; margin-top: 3px; flex: 0 0 auto; padding: 0 }
.lf-alt {
  text-align: center;
  font-size: .9rem;
  color: var(--ink-soft);
  margin: 0;
}
.lf-success {
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  border-left: 6px solid #2f7d4f;
  border-radius: 0;
  padding: 30px;
  text-align: center;
}

/* ---------- emergency band -------------------------------------------- */

.emergency-band {
  background: var(--char-2);
  color: var(--cream);
  border-top: 3px solid var(--amber);
  border-bottom: 1px solid var(--char-3);
  padding: 26px 0;
}
.emergency-band .container {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.emergency-band strong {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--amber-soft);
  max-width: 60ch;
}

/* ---------- FAQ -------------------------------------------------------- */

.faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.faq-item:first-of-type { border-top: 1px solid var(--line) }
.faq-q {
  padding: 22px 40px 22px 0;
  font-family: var(--serif);
  font-size: 1.14rem;
  font-weight: 700;
  color: var(--char);
  cursor: pointer;
  position: relative;
  display: block;
}
.faq-q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 20px;
  color: var(--terracotta);
  font-size: 1.5rem;
  line-height: 1;
}
.faq-item.open .faq-q::after { content: "\2212" }
.faq-a {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: .97rem;
  transition: max-height .26s ease, padding .26s ease;
}
.faq-item.open .faq-a { padding: 0 40px 24px 0; max-height: 720px }

/* ---------- link grids -------------------------------------------------- */

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.link-grid a {
  background: transparent;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 16px;
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  color: var(--char);
}
.link-grid a:hover { background: var(--terracotta); color: #fff }

/* ---------- breadcrumb ------------------------------------------------- */

.breadcrumb {
  background: var(--cream-2);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  font-size: .82rem;
}
.breadcrumb ol {
  display: flex;
  gap: 9px;
  list-style: none;
  flex-wrap: wrap;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  color: var(--ink-soft);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 9px;
  color: var(--line-2);
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none }
.breadcrumb a:hover { color: var(--terracotta-d); text-decoration: underline }

/* ---------- long-form -------------------------------------------------- */

.prose { max-width: 68ch; font-size: 1.05rem }
.prose h2 { margin-top: 40px }
.prose h3 { margin-top: 28px; font-size: 1.3rem }
.prose ul, .prose ol { margin: 0 0 18px 24px }
.prose li { margin-bottom: 9px }
.prose em { color: var(--ink-soft) }

/* ---------- stat strip ------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 0;
  margin-top: 34px;
  border-top: 2px solid var(--char);
}
.stat {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 22px 18px 20px 0;
  text-align: left;
}
.stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 2.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--terracotta-d);
  margin-bottom: 8px;
}
.stat span {
  font-size: .82rem;
  color: var(--ink-soft);
  line-height: 1.45;
  display: block;
}

/* ---------- footer ------------------------------------------------------ */

.site-footer {
  background: var(--char);
  color: #bcac97;
  padding: 62px 0 0;
  margin-top: 0;
  font-size: .92rem;
  border-top: 4px solid var(--terracotta);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
.footer-brand {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 12px;
}
.site-footer h4 {
  font-family: var(--sans);
  color: var(--amber-soft);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  margin-bottom: 14px;
}
.site-footer ul { list-style: none }
.site-footer li { margin-bottom: 8px }
.site-footer a { color: #bcac97; text-decoration: none }
.site-footer a:hover { color: var(--cream); text-decoration: underline }
.footer-phone { margin-top: 12px }
.footer-phone a {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--cream);
  font-weight: 700;
}
.footer-legal {
  border-top: 1px solid var(--char-3);
  padding: 22px var(--gutter) 30px;
  font-size: .78rem;
  line-height: 1.65;
  color: #a3937f;
}
/* attribution Pexels, obligatoire, sur toutes les pages */
.photo-credits {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--char-3);
  font-size: .74rem;
  max-width: 92ch;
}

/* ---------- mobile call bar --------------------------------------------- */

.sticky-call { display: none }

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1.15fr 1fr }
  .hero-grid > :first-child { padding-right: 40px }
  .hero-form { margin-left: -34px }
}

@media (max-width: 900px) {
  body { font-size: 16px }
  .hero { padding: 60px 0 56px }
  .hero-grid { grid-template-columns: 1fr; gap: 0 }
  .hero-grid > :first-child { padding-right: 0 }
  .hero p { max-width: none }
  .hero-form { margin: 34px 0 -34px }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px }
  .section { padding: 54px 0 }
  .site-nav { order: 3; width: 100%; margin-left: 0; gap: 20px }
  .header-phone { margin-left: auto }
}

@media (max-width: 620px) {
  :root { --gutter: 18px }
  .header-inner { gap: 12px; padding: 14px var(--gutter) }
  .site-logo { font-size: 1.08rem; gap: 10px }
  .logo-mark { width: 34px; height: 34px; flex: 0 0 34px; font-size: 1.1rem }
  .header-phone { padding: 8px 13px; font-size: .84rem }
  .site-nav { gap: 16px; font-size: .9rem }
  .lf-row { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr }
  .match-cta { padding: 26px 20px }
  .hero-form { padding: 22px 18px 24px }
  .trust-pills { gap: 0 20px }
  body { padding-bottom: 62px }
  .sticky-call {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--terracotta);
    color: #fff;
    text-align: center;
    padding: 16px;
    font-weight: 800;
    text-decoration: none;
    z-index: 60;
    box-shadow: 0 -3px 18px rgba(27, 25, 23, .3);
  }
}