/* ==========================================================================
   ATX Commercial Roof Network, visual identity: "industrial spec sheet"
   Slate greys, safety orange, off-white. Condensed uppercase display type on
   a visible 1px rule grid. Zero radius anywhere, zero drop shadows, hard
   edges, monospaced micro-labels. Reads like a submittal package, not a
   marketing page.
   ========================================================================== */

:root {
  --slate-950: #14181b;
  --slate-900: #1d2226;
  --slate-800: #272e34;
  --slate-700: #38424a;
  --slate-500: #5d6b76;
  --slate-400: #77848e;
  --ink:       #1d2226;
  --muted:     #55626c;
  --safety:    #ef5f0a;   /* signage orange, pair with dark text only      */
  --safety-hi: #ff8a3d;   /* orange for text on dark slate                  */
  --safety-tx: #c04600;   /* orange for text on light backgrounds (AA)      */
  --paper:     #f2f0ec;
  --paper-2:   #e7e4de;
  --rule:      #cfcbc3;
  --rule-hard: #a9a49a;
  --shell:     1280px;
  --gutter:    32px;
  --cond:      "Arial Narrow", "Helvetica Neue Condensed", "Helvetica Neue", Arial, sans-serif;
  --sans:      "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

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

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

body {
  font: 16px/1.6 var(--sans);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--safety-tx) }
a:hover { color: var(--slate-900) }

:focus-visible {
  outline: 3px solid var(--safety);
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--slate-900);
}

/* ---------- shell / grid rules --------------------------------------- */

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

/* ---------- display type: condensed, uppercase, tight ---------------- */

h1, h2, h3, h4 {
  font-family: var(--cond);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -.012em;
  color: var(--slate-950);
}
h1 { font-size: clamp(2.2rem, 5.4vw, 3.9rem); margin-bottom: 16px }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.7rem); margin-bottom: 12px }
h3 { font-size: 1.3rem; letter-spacing: -.005em; margin-bottom: 8px }
h4 { font-size: 1.02rem; letter-spacing: .01em; margin-bottom: 8px }
p  { margin-bottom: 13px }
p:last-child { margin-bottom: 0 }

/* ---------- top notice strip ------------------------------------------ */

.urgent-bar {
  background: var(--safety);
  color: var(--slate-950);
  text-align: center;
  padding: 8px 20px;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.urgent-bar a {
  color: var(--slate-950);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- masthead: two hard rules, nav on its own rail ------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--slate-900);
  border-bottom: 3px solid var(--safety);
}
.header-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  min-height: 62px;
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 12px 0;
  border-right: 1px solid var(--slate-700);
  text-decoration: none;
  color: #fff;
  font-family: var(--cond);
  font-size: 1.22rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.008em;
}
.logo-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 0;
  background: var(--safety);
  color: var(--slate-950);
  display: grid;
  place-items: center;
  font-family: var(--cond);
  font-size: 1.35rem;
  font-weight: 700;
}
.header-rail {
  background: var(--slate-950);
  border-top: 1px solid var(--slate-700);
}
.site-nav {
  display: flex;
  gap: 0;
  margin: 0 auto;
  max-width: var(--shell);
  padding: 0 var(--gutter);
  flex-wrap: wrap;
  align-items: stretch;
}
.site-nav a {
  display: flex;
  align-items: center;
  padding: 13px 24px;
  border-right: 1px solid var(--slate-700);
  color: #d7dde2;
  text-decoration: none;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.site-nav a:hover { background: var(--slate-800); color: var(--safety-hi) }
.header-phone {
  display: flex;
  align-items: center;
  margin-left: auto;
  background: var(--safety);
  color: var(--slate-950);
  padding: 12px 22px;
  border-radius: 0;
  font-family: var(--cond);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
}
.header-phone:hover { background: #ff7a22; color: var(--slate-950) }

/* ---------- hero: ruled grid, stat rail on top ------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, var(--slate-900), var(--slate-950));
  color: #e3e8eb;
  padding: 0 0 54px;
  border-bottom: 1px solid var(--slate-700);
}
.hero h1, .hero h2 { color: #fff }
.hero h3 { color: var(--slate-950) }
.hero p { color: #b8c2c9; font-size: 1.02rem; max-width: 58ch }
.hero > .container { position: relative; z-index: 1 }
.hero > .container:first-child { padding-top: 0 }

/* ---------- photo: technical plate -----------------------------------
   Traitement maison: la photo est ramenee en noir et blanc dur et sous-
   exposee, puis la trame de 96px du site est redessinee PAR-DESSUS, si
   bien qu'elle se lit comme un fond de plan et non comme une image
   d'ambiance. Aucun arrondi, aucune ombre, coherent avec le reste.

   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,
   trames claires 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. Le point faible n'est pas le paragraphe mais la pastille orange
   #ff8a3d, qui est le texte le plus clair pose sur le voile. Les deux paliers
   ont ete resserres (.88/.93 -> .92/.95) pour tenir AA: minimum 4.28:1 ->
   4.53:1, et 4.53 a 4.62:1 selon l'image. Le noir et blanc dur et le
   brightness(.58) ecrasent les cinq images au meme niveau, l'ecart entre elles
   est inferieur a 0.1 point de ratio.
   -------------------------------------------------------------------- */

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--slate-950);
}
.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: grayscale(1) contrast(1.12) brightness(.58);
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 96px),
    linear-gradient(180deg, rgba(29, 34, 38, .92) 0%, rgba(20, 24, 27, .95) 100%);
}

/* the stat rail: trust-pills promoted to a bordered instrument band */
.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  border-bottom: 1px solid var(--slate-700);
  border-left: 1px solid var(--slate-700);
}
.trust-pills span {
  flex: 1 1 184px;
  padding: 16px 18px;
  border-right: 1px solid var(--slate-700);
  background: rgba(255, 255, 255, .02);
  color: #cdd6db;
  font-family: var(--mono);
  font-size: .73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.5;
}
/* inside a hero column (city / county / emergency pages) it stays a band */
.hero-grid .trust-pills {
  margin: 30px 0 0;
  border-top: 1px solid var(--slate-700);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 452px;
  gap: 0;
  align-items: stretch;
  padding-top: 46px;
}
.hero-grid > :first-child {
  padding: 0 46px 0 0;
  border-right: 1px solid var(--slate-700);
}
.hero-grid > .hero-form { margin-left: 46px }

.hero-badge {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--safety);
  border-radius: 0;
  padding: 6px 12px;
  margin-bottom: 20px;
  color: var(--safety-hi);
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.hero-form {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-hard);
  border-top: 4px solid var(--safety);
  border-radius: 0;
  padding: 24px;
  box-shadow: none;
}
.hero-form h3 {
  font-size: 1.35rem;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
}

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

.section {
  padding: 60px 0;
  border-bottom: 1px solid var(--rule);
}
.section-alt {
  background: var(--paper);
}
.section-header {
  margin-bottom: 28px;
  max-width: 78ch;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--slate-950);
}
.section-header p { color: var(--muted); font-size: .96rem; margin-top: 8px }
.section-tag {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--safety-tx);
  margin-bottom: 10px;
}

/* ---------- buttons: hard rectangles ----------------------------------- */

.btn {
  display: inline-block;
  padding: 13px 24px;
  border: 2px solid transparent;
  border-radius: 0;
  font-family: var(--cond);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  line-height: 1.15;
}
.btn-accent {
  background: var(--safety);
  border-color: var(--safety);
  color: var(--slate-950);
}
.btn-accent:hover { background: #ff7a22; border-color: #ff7a22; color: var(--slate-950) }
.btn-outline {
  background: transparent;
  border-color: var(--slate-950);
  color: var(--slate-950);
}
.btn-outline:hover { background: var(--slate-950); color: #fff }
.btn-white {
  background: #fff;
  border-color: #fff;
  color: var(--slate-950);
}
.btn-white:hover { background: var(--paper); color: var(--slate-950) }
.btn-lg { padding: 16px 30px; font-size: 1.2rem }
.btn-full { width: 100%; display: block }

/* ---------- cards: flat rectangles on a ruled grid ---------------------- */

.grid { display: grid; gap: 0 }
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.card {
  display: block;
  background: #fff;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 26px 24px;
  color: inherit;
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: var(--safety);
  transition: width .18s linear;
}
.card:hover::before { width: 100% }
.card:hover { background: var(--paper) }
.section-alt .card { background: var(--paper) }
.section-alt .card:hover { background: #fff }
.card h3 { color: var(--slate-950) }
.card p { color: var(--muted); font-size: .92rem; margin: 0 }
.card-icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 12px;
  filter: saturate(.35);
}

/* ---------- bandeau de planches photo ----------------------------------
   Trois vues alignees sur la meme trame que les cartes, filets 1px, legende
   monospace. Les legendes decrivent ce que montre la photo, rien d'autre.
   ---------------------------------------------------------------------- */

.plate-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 0;
  margin-bottom: 30px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--safety);
  background: #fff;
}
.plate {
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.plate:last-child { border-right: 0 }
.plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
}
.plate figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  border-top: 1px solid var(--rule);
  padding: 9px 12px 10px;
  background: #fff;
  font-family: var(--mono);
  font-size: .66rem;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.plate figcaption .plate-no { color: var(--slate-950); font-weight: 700 }
.plate figcaption em { font-style: normal; color: var(--safety-tx); margin-left: auto }

/* ---------- directory listings ------------------------------------------ */

.dir-list {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  border-top: 2px solid var(--slate-950);
  border-left: 1px solid var(--rule);
}
.dir-card {
  background: #fff;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 22px 24px;
}
.dir-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.dir-card h3 { color: var(--slate-950); margin: 0 }
.dir-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.dir-rating strong {
  font-family: var(--cond);
  font-size: 1.4rem;
  color: var(--safety-tx);
  letter-spacing: -.01em;
}
.dir-stars { color: var(--safety-tx); letter-spacing: .04em }
.dir-count { color: var(--slate-500) }
.dir-addr {
  color: var(--muted);
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.6;
  margin: 12px 0 0;
}
.dir-review {
  border-left: 3px solid var(--safety);
  padding: 4px 0 4px 14px;
  margin-top: 14px;
  font-size: .9rem;
  font-style: normal;
  color: var(--muted);
}
.dir-review cite {
  display: block;
  margin-top: 7px;
  font-family: var(--mono);
  font-style: normal;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate-500);
}
.dir-attrib {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: .7rem;
  line-height: 1.7;
  color: var(--slate-500);
  max-width: 100ch;
}

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

.match-cta {
  background: #fff;
  border: 2px solid var(--slate-950);
  border-radius: 0;
  padding: 32px 30px;
}
.match-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.match-cta p { color: var(--muted); font-size: .95rem }

.lead-form { display: grid; gap: 14px; margin-top: 18px }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.lead-form label {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--slate-700);
}
.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid var(--rule-hard);
  border-radius: 0;
  background: #fff;
  font: 400 16px/1.4 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(--safety);
  outline-offset: 0;
  border-color: var(--slate-950);
  box-shadow: none;
}
.lead-form .lf-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
  line-height: 1.55;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
}
.lead-form .lf-consent input { width: auto; margin-top: 3px; flex: 0 0 auto }
.lf-alt {
  text-align: left;
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate-500);
  margin: 0;
}
.lf-success {
  background: var(--paper);
  border: 2px solid #1f6b3f;
  border-radius: 0;
  padding: 28px;
  text-align: left;
}

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

.emergency-band {
  background: var(--slate-950);
  color: #fff;
  border-top: 4px solid var(--safety);
  border-bottom: 4px solid var(--safety);
  padding: 20px 0;
}
.emergency-band .container {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.emergency-band strong {
  font-family: var(--cond);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.008em;
  color: #fff;
  max-width: 62ch;
}

/* ---------- FAQ: numbered spec rows --------------------------------------- */

.faq-item {
  background: #fff;
  border: 1px solid var(--rule);
  border-bottom-width: 0;
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.faq-item:last-of-type { border-bottom-width: 1px }
.faq-item.open { border-color: var(--slate-950); border-bottom-width: 1px }
.faq-item.open + .faq-item { border-top-width: 0 }
.faq-q {
  padding: 16px 20px;
  font-family: var(--cond);
  font-size: 1.22rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.005em;
  color: var(--slate-950);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq-q::after {
  content: "[+]";
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 700;
  color: var(--safety-tx);
  letter-spacing: 0;
  flex: 0 0 auto;
}
.faq-item.open .faq-q { background: var(--slate-950); color: #fff }
.faq-item.open .faq-q::after { content: "[\2212]"; color: var(--safety-hi) }
.faq-a {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: .92rem;
  transition: max-height .2s linear, padding .2s linear;
}
.faq-item.open .faq-a { padding: 16px 20px 18px; max-height: 720px }

/* ---------- index tables (link grids) -------------------------------------- */

.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.link-grid a {
  background: #fff;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 12px 14px;
  text-decoration: none;
  font-size: .87rem;
  font-weight: 700;
  color: var(--slate-800);
}
.link-grid a:hover { background: var(--slate-950); color: #fff }
.section-alt .link-grid a { background: var(--paper) }
.section-alt .link-grid a:hover { background: var(--slate-950); color: #fff }

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

.breadcrumb {
  background: var(--slate-800);
  border-bottom: 1px solid var(--slate-700);
  padding: 8px 0;
  font-family: var(--mono);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.breadcrumb ol {
  display: flex;
  gap: 8px;
  list-style: none;
  flex-wrap: wrap;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  color: #b8c2c9;
}
.breadcrumb li + li::before { content: "//"; margin-right: 8px; color: var(--slate-500) }
.breadcrumb a { color: #b8c2c9; text-decoration: none }
.breadcrumb a:hover { color: var(--safety-hi); text-decoration: underline }

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

.prose { max-width: 80ch }
.prose h2 { margin-top: 34px }
.prose h3 {
  margin-top: 26px;
  font-size: 1.15rem;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.prose ul, .prose ol { margin: 0 0 16px 20px }
.prose li { margin-bottom: 8px }
.prose strong { color: var(--slate-950) }

/* ---------- data band -------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  margin-top: 30px;
  border-top: 2px solid var(--slate-950);
  border-left: 1px solid var(--rule);
}
.stat {
  background: #fff;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  padding: 18px 16px;
  text-align: left;
}
.stat strong {
  display: block;
  font-family: var(--cond);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--slate-950);
  margin-bottom: 7px;
}
.stat span {
  display: block;
  font-family: var(--mono);
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  line-height: 1.55;
  color: var(--muted);
}

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

.site-footer {
  background: var(--slate-950);
  color: #9daab3;
  padding: 48px 0 0;
  margin-top: 0;
  font-size: .88rem;
  border-top: 4px solid var(--safety);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 0;
  padding-bottom: 0;
  border-left: 1px solid var(--slate-700);
}
.footer-grid > div {
  padding: 0 26px 34px;
  border-right: 1px solid var(--slate-700);
}
.footer-brand {
  font-family: var(--cond);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}
.site-footer h4 {
  font-family: var(--mono);
  color: var(--safety-hi);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-bottom: 12px;
}
.site-footer ul { list-style: none }
.site-footer li { margin-bottom: 7px }
.site-footer a { color: #9daab3; text-decoration: none }
.site-footer a:hover { color: #fff; text-decoration: underline }
.footer-phone { margin-top: 12px }
.footer-phone a {
  font-family: var(--cond);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--safety-hi);
}
.footer-legal {
  border-top: 1px solid var(--slate-700);
  padding: 18px var(--gutter) 26px;
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.8;
  color: #8a97a0;
}
/* attribution Pexels, obligatoire, sur toutes les pages */
.photo-credits {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--slate-800);
  max-width: 110ch;
}

/* ---------- mobile call rail ---------------------------------------------------- */

.sticky-call { display: none }

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

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

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    padding-top: 34px;
  }
  .hero-grid > :first-child {
    padding: 0 0 30px;
    border-right: 0;
    border-bottom: 1px solid var(--slate-700);
  }
  .hero-grid > .hero-form { margin: 30px 0 0 }
  .footer-grid { grid-template-columns: 1fr 1fr }
  .site-nav a { flex: 1 1 auto; justify-content: center; padding: 12px 10px }
  .site-logo { border-right: 0 }
}

@media (max-width: 620px) {
  :root { --gutter: 18px }
  .site-logo { font-size: 1rem; padding: 10px 14px 10px 0; gap: 9px }
  .logo-mark { width: 30px; height: 30px; flex: 0 0 30px; font-size: 1.15rem }
  .header-phone { padding: 10px 14px; font-size: 1rem }
  .site-nav a { padding: 11px 6px; font-size: .66rem; letter-spacing: .06em }
  .lf-row { grid-template-columns: 1fr }
  .footer-grid { grid-template-columns: 1fr }
  .footer-grid > div { border-right: 0; border-bottom: 1px solid var(--slate-700) }
  .section { padding: 44px 0 }
  .match-cta { padding: 22px 18px }
  .trust-pills span { flex: 1 1 100%; border-bottom: 1px solid var(--slate-700) }
  body { padding-bottom: 60px }
  .sticky-call {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--safety);
    color: var(--slate-950);
    text-align: center;
    padding: 15px;
    font-family: var(--cond);
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    z-index: 60;
    border-top: 3px solid var(--slate-950);
  }
}