/*
Theme Name: Groupe Protech Clim
Theme URI: https://www.protech-clim.fr
Author: Groupe Protech
Description: Classic WordPress theme for Groupe PROTECH Clim - genie climatique, climatisation, pompes a chaleur, maintenance. Single stylesheet, no build step, no dependencies.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
Text Domain: protech-clim
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Recolouring the whole site = editing the colour block below (plus the two
   hardcoded rgba() values flagged with RECOLOUR further down, and the colours
   inside assets/img/mesh-divider.svg and the two logo SVGs).
   ========================================================================== */

:root {
  /* ---- COLOURS ---- */
  --accent: #FEC70D;        /* gold accent: highlights on dark, icons, primary button */
  --accent-soft: #FED754;   /* lighter gold: hero badge text */
  --accent-ink: #906F01;    /* deeper gold: small text on light backgrounds (contrast) */
  --accent-dark: #17457F;   /* deep blue: h2, callout, square badge, phone button */
  --accent-deep: #0F3B72;   /* navy: start of the hero / multiservice gradient */
  --accent-mid: #2E8FCB;    /* mid blue: end of that gradient */
  --footer-dark: #2C333D;   /* footer background (neutral dark slate) */
  --text-dark: #1c1c1c;
  --text-muted: #666;
  --white: #ffffff;
  --page-bg: #F7FAFC;       /* page background */
  --band-bg: #F1F5F9;       /* full-bleed band background (section 3) */
  --line: #E5E9EF;          /* dividers, borders */

  /* ---- RADII / SHADOWS ---- */
  --radius: 14px;
  --radius-card: 24px;
  --radius-block: 0;        /* sharp block corners, like the square badge */
  --shadow-img: 0 20px 46px rgba(18, 32, 44, .16), 0 2px 8px rgba(18, 32, 44, .06);

  /* ---- PAGE GRID ---- */
  --shell-max: 1720px;      /* content band; one block = (1720 - 96) / 2 = 812 */
  --gutter: 48px;           /* distance from the screen edges */
  --card-pad-x: 96px;       /* inner padding of the "cards" (accent sections) */
  --card-pad-y: 96px;
  --block-ratio: 624 / 538; /* proportion of the text/photo blocks from the mockup */
  --block-gap: 96px;
  --gap-section: 104px;     /* vertical rhythm between sections */

  /* ---- HEADER AND HERO ---- */
  --header-h: 92px;
  --logo-nudge: 6px;        /* optical nudge: the round mark next to the flat hero
                               edge reads as overhanging when boxes are aligned */
  --hero-gap: 16px;
  --hero-trim: 72px;        /* how much shorter than the viewport the hero is */
  --contact-shift: 76px;    /* pushes the footer Contact column right so the two
                               gaps around it match (237 / 388 -> 313 / 312) */
}

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;   /* clip, not hidden: hidden creates a scroll container
                         and breaks the sticky header */
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: var(--text-dark);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 { font-weight: 800; line-height: 1.2; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

section[id], footer[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

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

/* ==========================================================================
   3. GRID SYSTEM
   .shell is the single source of truth for the left and right content edge.
   Header, hero, sections and footer all use it, so their edges match to the
   pixel. Never add side padding anywhere - change --gutter instead.
   ========================================================================== */

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell-max));
  margin-left: auto;
  margin-right: auto;
}

/* ==========================================================================
   4. TYPOGRAPHY HELPERS
   ========================================================================== */

.label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-ink);
  margin-bottom: 18px;
}

.label-dash {
  display: block; width: 24px; height: 1px;
  background: var(--accent-ink); flex: none;
}

.section h2 {
  font-size: clamp(24px, 2vw, 34px);
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 20px;
}

.section p { font-size: 15.5px; color: var(--text-muted); }

.highlight { color: var(--accent-ink); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 8px;
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
  white-space: nowrap; border: 0; cursor: pointer;
  transition: opacity .2s ease;
}
.btn:hover { opacity: .88; }

.btn-phone-pill { background: var(--accent-dark); color: var(--white); }
.btn-accent     { background: var(--accent);     color: #10233D; }

/* translucent fill, not a solid dark colour: the button has to sit on the
   hero photo, which runs dark on one edge and light on the other */
.btn-outline {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .38);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255, 255, 255, .18); opacity: 1; }

.icon { width: 20px; height: 20px; flex: none; }
.icon-14 { width: 14px; height: 14px; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }

/* ==========================================================================
   6. HEADER
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex; align-items: center; gap: 28px;
  height: var(--header-h);
}

.site-branding { flex: none; margin-left: var(--logo-nudge); }
.site-logo { height: 52px; width: auto; }

.main-nav { flex: 1; display: flex; justify-content: flex-end; }

.main-nav-list {
  display: flex; align-items: center; gap: 30px;
  list-style: none;
}

.main-nav-list a {
  display: inline-block; padding: 6px 0;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.main-nav-list a:hover,
.main-nav-list .is-active > a,
.main-nav-list a.is-active {
  color: var(--accent-dark);
  border-bottom-color: var(--accent);
}

.btn-phone-pill { flex: none; }   /* order par défaut : avant le burger */

/* Burger: 44x44 minimum touch target, hidden above 1080px */
.nav-toggle {
  order: 3;                  /* toujours à droite du bouton téléphone */
  display: none; flex: none;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--text-dark); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 28, 34, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
body.nav-open .nav-overlay { opacity: 1; visibility: visible; }

/* ==========================================================================
   7. HERO
   ========================================================================== */

.hero {
  margin-top: var(--hero-gap);
  /* anchored to the top edge: cover crops the bottom of the artwork, never
     the mesh along the top */
  background: url('assets/img/hero-bg.jpg') center top / cover,
              linear-gradient(100deg, var(--accent-deep) 0%, var(--accent-mid) 100%);
  display: flex; align-items: center;
  color: var(--white);
  /* min-height, not height: long content stretches the block instead of being
     cut off. svh, not vh: ignores the collapsing mobile address bar. */
  min-height: calc(100svh - var(--header-h) - var(--hero-gap) - var(--hero-trim));
}

.section-card { border-radius: var(--radius-card); overflow: hidden; }

.hero-inner { max-width: 780px; padding: var(--card-pad-y) var(--card-pad-x); }

.hero-badge {
  display: inline-block; margin-bottom: 26px;
  padding: 7px 18px; border-radius: 999px;
  border: 1px solid var(--accent-soft);   /* même jaune que le texte */
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent-soft);
}

.hero h1 {
  font-size: clamp(30px, 3vw, 56px);
  letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--white);
  margin-bottom: 22px;
}
.hero h1 .highlight { color: var(--accent); }

.hero p {
  font-size: 16px; opacity: .92; max-width: 560px;
  margin-bottom: 34px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-actions .btn {
  padding: 19px 28px; border-radius: 12px;
  font-size: 15px; letter-spacing: .06em; gap: 12px;
}

/* ==========================================================================
   8. TEXT + PHOTO SECTIONS (climatisation, pompe a chaleur, maintenance)
   ========================================================================== */

.section { padding: var(--gap-section) 0; }   /* identical top and bottom on
                                                 EVERY section, no exceptions */

.section:not(.section-multiservice) .two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--block-gap); align-items: center;
}

.section p.section-lead { margin-bottom: 34px; max-width: 560px; }
/* When the intro runs to a second paragraph, that paragraph carries the gap
   down to the list, sub-heading or cards below it. */
.col-text > p:last-of-type { margin-bottom: 34px; max-width: 560px; }

/* every section, multiservice included, so all four photos come out the same
   size: same column width, same ratio */
.col-image {
  position: relative;
  aspect-ratio: var(--block-ratio);
}
.col-image .section-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

.section-img {
  aspect-ratio: 5 / 4; object-fit: cover;
  border-radius: var(--radius-block);
  box-shadow: var(--shadow-img);
  background: var(--accent-dark);   /* visible while the photo loads */
}

/* photo left, text right - no direction: rtl hack */
.two-col.reverse .col-image { order: 1; }
.two-col.reverse .col-text  { order: 2; }

/* Square badge overhanging the bottom-left corner of the photo. Sharp
   corners, exactly like the mockup. z-index: 2, otherwise it slides
   under the photo. */
.exp-badge {
  position: absolute; left: -32px; bottom: -30px; z-index: 2;
  width: 192px; height: 192px;
  background: var(--accent-dark); color: var(--white);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 12px 28px rgba(18, 32, 44, .18);
}
.exp-badge b {
  font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: 8px;
}
.exp-badge span {
  max-width: 12ch; font-size: 11px; line-height: 1.35; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}

/* ==========================================================================
   9. BAND BACKGROUND + MESH DECORATION (pompe a chaleur)
   The strip overlaps the section boundary by half its height so the pattern
   stitches the seam. Stretched (no-repeat), not tiled: the generated
   pattern's edges do not meet. The mask fades the ends, otherwise the
   pattern is chopped off against the screen edges. The bottom copy is
   flipped on Y so the two seams do not look identical.
   ========================================================================== */

.section-pompe { background: var(--band-bg); position: relative; }

.section-pompe::before,
.section-pompe::after {
  content: ""; position: absolute; left: 0; right: 0; height: 92px;
  background: url('assets/img/mesh-divider.svg') no-repeat center / 100% 92px;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
}
.section-pompe::before { top: -46px; }
.section-pompe::after  { bottom: -46px; transform: scaleY(-1); }

/* ==========================================================================
   10. FEATURE LIST / DOT LIST / SUB-HEADING / CALLOUT
   ========================================================================== */

.feature-list { list-style: none; }
.feature-list li {
  display: grid; grid-template-columns: 30px 1fr; gap: 16px;
  align-items: start; margin-bottom: 26px;
}
.feature-list li:last-child { margin-bottom: 0; }
.feature-icon svg {
  width: 20px; height: 20px; color: var(--accent); margin-top: 2px;
}
.feature-list strong {
  display: block; font-size: 18px; color: var(--text-dark); margin-bottom: 4px;
}
.feature-list p { font-size: 14.5px; max-width: 440px; color: var(--text-muted); }

/* .sub-heading must be flex: the inner .feature-icon is a block-level flex
   box, and without its own flex context it takes the whole line and the
   caption drops below the icon. */
.sub-heading {
  display: flex; align-items: center; gap: 10px;
  color: var(--accent-dark); margin-bottom: 16px;
}
.sub-heading strong { font-size: 15px; letter-spacing: .02em; }

.dot-list { list-style: none; display: grid; gap: 9px; }  /* one column: the
                                                             items are long */
.dot-list li {
  padding-left: 20px; position: relative;
  font-size: 14px; color: var(--text-dark);
}
.dot-list li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 8px; height: 8px;
  border: 2px solid var(--accent); border-radius: 50%;   /* ring, not a dot */
}

.callout-box {
  background: var(--accent-dark); color: var(--white);
  border-radius: var(--radius); padding: 24px 26px; margin-top: 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.callout-box strong {
  display: block; font-size: 13px; letter-spacing: .06em; margin-bottom: 6px;
}
.callout-box p { color: rgba(255, 255, 255, .85); font-size: 13.5px; }
.callout-icon svg { width: 24px; height: 24px; color: rgba(255, 255, 255, .7); flex: none; }

/* ==========================================================================
   11. MULTISERVICE - second full-bleed accent section
   ========================================================================== */

.section-multiservice {
  margin: var(--gap-section) 0 0;
  padding: var(--card-pad-y) 0;
  /* full-bleed background: no .shell, no radius, no side padding */
  background: url('assets/img/multiservice-bg.jpg') center / cover,
              linear-gradient(260deg, var(--accent-deep) 0%, var(--accent-mid) 100%);
  color: var(--white);
}

.section-multiservice .two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--block-gap); align-items: center;
}

.col-text-light h2 { color: var(--white); }
.col-text-light h2 .highlight { color: var(--accent); }
.col-text-light p { color: rgba(255, 255, 255, .85); }

.col-text p + p,
.col-text-light p + p { margin-top: 14px; }

.value-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.value-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px; padding: 18px 20px;
}
.value-icon svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.value-card strong {
  display: block; color: #fff; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: 4px;
}
.value-card p { color: rgba(255, 255, 255, .75); font-size: 13px; }

/* ==========================================================================
   12. FOOTER
   Three columns, exact thirds; the outer ones sit on the shell edges, the
   middle one is centred and shifted right by --contact-shift so the gaps
   either side of it match.
   ========================================================================== */

.site-footer {
  background: var(--footer-dark); color: rgba(255, 255, 255, .8);
  padding: 72px 0 20px;
}

.footer-top {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px; padding-bottom: 56px;
}

.footer-brand-logo {
  display: inline-block; background: #fff;
  padding: 12px 18px; border-radius: 8px; margin-bottom: 22px;
}
.footer-brand-logo img { height: 64px; width: auto; }
.footer-brand p {
  font-size: 13.5px; line-height: 1.65; max-width: 42ch; margin-bottom: 14px;
}
.footer-brand p:last-child { margin-bottom: 0; }

.site-footer h3 {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}

.footer-contact { justify-self: center; position: relative; left: var(--contact-shift); }
.footer-contact ul { list-style: none; display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; }
.footer-contact svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 2px; }
.footer-contact a:hover { color: var(--white); }

.footer-certifications { justify-self: end; text-align: right; }

/* A 3-column grid does not work here: the column takes the width of the
   widest logo, which leaves a hole in the first row. Flex-wrap with a
   max-width sized for three logos wraps right after the third, and
   justify-content: flex-end pushes both rows to the right edge. */
.cert-logos {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;
  max-width: 250px; margin-left: auto; list-style: none;
}
.cert-logo {
  height: 54px; width: auto; background: #fff;
  border-radius: 6px; padding: 7px 11px; object-fit: contain;
}

/* border-top sits on the wrapper (not limited by .shell) so the line runs
   full width; the text inside stays on the content band.
   14px + 20px footer padding = 34px below -> text is optically centred. */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 34px 0 14px;
}
.footer-bottom-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; font-size: 12.5px; color: rgba(255, 255, 255, .6);
}
.footer-legal { display: flex; gap: 22px; }
.footer-legal a:hover { color: var(--white); }


/* ==========================================================================
   13. STATIC PAGES (page.php)
   Same .shell, but text blocks are capped: legal copy is unreadable at
   1520px.
   ========================================================================== */

.page-hero { padding: 72px 0 40px; }
.page-hero h1 {
  font-size: clamp(28px, 2.6vw, 44px);
  color: var(--accent-dark); margin-bottom: 14px;
}
.page-meta { font-size: 13px; color: var(--text-muted); }

.entry-content {
  padding-bottom: var(--gap-section);
  font-size: 15.5px; line-height: 1.7; max-width: 78ch;
}
.entry-content > * + * { margin-top: 18px; }
.entry-content h3 { font-size: 18px; color: var(--accent-dark); margin-top: 32px; }
.entry-content a { color: var(--accent); text-decoration: underline; }
.entry-content ul, .entry-content ol { padding-left: 0; list-style: none; }
.entry-content ol { list-style: decimal; padding-left: 22px; }
.entry-content ul li {
  padding-left: 20px; position: relative; margin-bottom: 9px; font-size: 15px;
}
.entry-content ul li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px;
  border: 2px solid var(--accent); border-radius: 50%;
}
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.entry-content th, .entry-content td {
  border: 1px solid var(--line); padding: 10px 12px; text-align: left;
}
.entry-content th { background: var(--band-bg); }

/* Must stay BELOW .section h2 in this file - same specificity (0,1,1), so
   the later rule wins: legal headings must not be uppercase. */
.entry-content h2 {
  font-size: 22px; text-transform: none; color: var(--accent-dark);
  margin-top: 38px; margin-bottom: 0;
}

/* ==========================================================================
   14. RESPONSIVE
   Mostly :root changes, which is why the header and the cards stay aligned
   at every width.
   ========================================================================== */

@media (max-width: 1440px) {
  :root {
    --gutter: 32px;
    --block-gap: 72px;
    --card-pad-x: 56px;
    --card-pad-y: 64px;
    --gap-section: 88px;
    --header-h: 88px;
  }
  .site-logo { height: 48px; }
}

@media (max-width: 1080px) {
  :root {
    --gutter: 32px;
    --gap-section: 72px;
    --block-gap: 56px;
    --header-h: 84px;
  }

  .nav-toggle { display: flex; }
  .btn-phone-pill { margin-left: auto; }

  /* The menu stops fitting earlier than expected: at 1024px it needs 948px
     out of 960. Off-canvas panel from the right. */
  .main-nav {
    position: fixed; top: 0; right: 0; z-index: 95;
    width: min(340px, 84vw); height: 100vh; height: 100svh;
    background: var(--white);
    padding: calc(var(--header-h) + 16px) 20px 24px;
    box-shadow: -12px 0 34px rgba(18, 32, 44, .16);
    transform: translateX(100%); visibility: hidden;
    transition: transform .28s ease, visibility .28s ease;
    overflow-y: auto; display: block;
  }
  body.nav-open .main-nav { transform: translateX(0); visibility: visible; }

  .main-nav-list { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav-list a {
    padding: 15px 12px;               /* row taller than 44px */
    border-bottom: 0; border-left: 3px solid transparent;
    font-size: 13px;
  }
  .main-nav-list a:hover,
  .main-nav-list .is-active > a,
  .main-nav-list a.is-active {
    border-bottom-color: transparent;
    border-left-color: var(--accent);
    background: rgba(254, 199, 13, .14);   /* RECOLOUR: --accent as rgba */
  }
}

@media (max-width: 900px) {
  :root {
    --gutter: 24px;
    --card-pad-x: 32px;
    --card-pad-y: 40px;
    --radius-card: 18px;
    --header-h: 80px;
    --hero-trim: 48px;
  }

  /* Both selectors are needed: .section:not(...) .two-col weighs (0,3,0) and
     beats a bare .two-col (0,1,0) even inside a media query. */
  .two-col,
  .section:not(.section-multiservice) .two-col,
  .section-multiservice .two-col {
    grid-template-columns: 1fr; gap: 28px;
  }

  /* The photo goes back to normal flow and carries the ratio itself. Left as
     position: absolute the parent stayed at zero height and the images
     disappeared, so both properties have to be reset together. */
  .col-image {
    aspect-ratio: auto;
  }
  .col-image .section-img {
    position: static; height: auto; aspect-ratio: 5 / 4;
  }

  /* Same reading order in EVERY section: text first, then photo. Set
     explicitly for both variants, otherwise the sections read out of step. */
  .two-col .col-text,  .two-col.reverse .col-text  { order: 1; }
  .two-col .col-image, .two-col.reverse .col-image { order: 2; }

  .exp-badge { width: 132px; height: 132px; left: -16px; bottom: -18px; }
  .exp-badge b { font-size: 24px; }
  .exp-badge span { font-size: 10px; }

  .section-pompe::before,
  .section-pompe::after {
    height: 66px; background-size: 100% 66px;
  }
  .section-pompe::before { top: -33px; }
  .section-pompe::after  { bottom: -33px; }

  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-contact { justify-self: start; left: 0; }
  .footer-certifications { justify-self: start; text-align: left; }
  .cert-logos { justify-content: flex-start; margin-left: 0; max-width: 100%; }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --card-pad-x: 24px;
    --card-pad-y: 32px;
    --gap-section: 48px;
    --header-h: 72px;
  }

  /* left/bottom were not reset here, so the badge kept the -16px/-18px overhang
     from the 900px breakpoint and stuck out past the photo to the screen edge.
     Tuck it inside the photo's corner instead. */
  .exp-badge { width: 104px; height: 104px; left: 12px; bottom: 12px; }
  .exp-badge b { font-size: 20px; margin-bottom: 4px; }

  /* stays a row: column dropped the icon under the text and stretched the box */
  .callout-box { flex-direction: row; padding: 20px; }

  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-legal { flex-wrap: wrap; gap: 16px; }
}

/* The full header needs about 520px: logo 228 + gaps 56 + burger 44 + the
   button with the number 160. Below that the number goes and the button
   becomes a 44px tap target, the number being read out via aria-label.
   This used to trigger only under 420px, so on a 430px iPhone the row
   overflowed and pushed the button off screen. */
@media (max-width: 560px) {
  .header-inner { gap: 12px; }
  .site-logo { height: 40px; }
  .btn-phone-text { display: none; }
  .btn-phone-pill {
    padding: 0; width: 44px; height: 44px;
    justify-content: center; border-radius: 10px;
  }
  .btn-phone-pill .icon { width: 18px; height: 18px; }
}

@media (max-width: 480px) {
  /* two hero buttons side by side did not fit and stacked like a staircase */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; width: 100%; }
}

@media (max-width: 360px) {
  /* at 320px a 40px logo (190px) plus the two 44px targets and the gaps
     no longer fit in 288px */
  .site-logo { height: 34px; }
}