/* ==========================================================================
   Société de Nettoyage.ma — Design System
   Cloned 1:1 from the Clanyeco theme DNA (see docs/01-DESIGN-DNA.md)
   Zero dependencies. Mobile-first. WCAG 2.2 AA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS — self-hosted variable woff2, latin subset (covers all French)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Parkinsans';
  src: url('../fonts/parkinsans-var-latin.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                 U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-var-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
                 U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Colour — extracted from samples/elementor-global-defaults.php */
  --c-primary:      #F2D701;   /* signature yellow  */
  --c-primary-deep: #D9C001;   /* hover state       */
  --c-green:        #3CA200;   /* eco green — brand mark, borders, decorative fills */
  --c-green-deep:   #2E7D00;   /* hover state       */
  /* Any green surface that carries text uses this, never --c-green.
     White on #3CA200 measures 3.30:1 — under the 4.5:1 AA floor for body text.
     The same substitution was already made in the header; these are the rest of
     the components that were still failing: the quote form on ~88 commercial
     pages, the homepage feature card, the featured price tier and the green
     buttons. #2E7D00 is the palette's existing deep green, so no new hue enters
     the system. */
  --c-green-surface: #2E7D00;
  --c-green-soft:   #E8F5D3;   /* tint              */
  --c-off:          #F4F6F0;   /* off-white         */
  --c-white:        #FFFFFF;
  --c-black:        #000000;
  --c-line:         rgba(0,0,0,.10);
  --c-line-strong:  rgba(0,0,0,.18);
  --c-body:         rgba(0,0,0,.60);
  --c-body-dim:     rgba(0,0,0,.45);
  /* Secondary text on a green surface. Was rgba(255,255,255,.82), which composites
     to 4.09:1 even over the deeper green — still short of AA. A solid tint is used
     instead of an alpha so the ratio cannot drift with whatever sits underneath. */
  --c-on-green:     #EDF6E7;   /* 4.73:1 on --c-green-surface */

  /* Type */
  --f-head: 'Parkinsans', 'Trebuchet MS', system-ui, sans-serif;
  --f-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-h1: clamp(1.6875rem, 1.196rem + 2.10vw, 2.875rem);   /* 27 → 46 */
  --t-h2: clamp(1.4375rem, 0.998rem + 1.88vw, 2.5rem);     /* 23 → 40 */
  --t-h3: clamp(1.1875rem, 0.903rem + 1.22vw, 1.875rem);   /* 19 → 30 */
  --t-h4: clamp(1.0625rem, 0.881rem + 0.77vw, 1.5rem);     /* 17 → 24 */
  --t-h5: 1.125rem;                                        /* 18       */
  --t-eyebrow: 0.75rem;                                    /* 12       */
  --t-lead: clamp(1rem, 0.95rem + 0.22vw, 1.125rem);       /* 16 → 18  */
  --t-base: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.75rem;

  /* Shape */
  --r-pill:   24px;
  --r-card:   32px;
  --r-input:  8px;
  --r-avatar: 100px;

  /* Layout */
  --w-site: 1280px;
  --pad-x: 20px;
  --gap: 20px;
  --sec-y: clamp(56px, 7vw, 112px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .28s;

  --shadow-soft: 0 4px 24px rgba(0,0,0,.06);
  --shadow-lift: 0 12px 40px rgba(0,0,0,.10);
}

@media (min-width: 768px) { :root { --pad-x: 30px; } }

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Reserve the scrollbar gutter so locking body scroll cannot shift the layout.
   Belt and braces: site.js also pads the body by the measured scrollbar width
   for engines that do not support scrollbar-gutter. */
html { scrollbar-gutter: stable; }

body {
  font-family: var(--f-body);
  font-weight: 300;
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--c-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--f-head);
  font-weight: 400;
  color: var(--c-black);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.2; letter-spacing: -.01em; }
h2 { font-size: var(--t-h2); line-height: 1.2; letter-spacing: -.01em; }
h3 { font-size: var(--t-h3); line-height: 1.3; }
h4 { font-size: var(--t-h4); line-height: 1.4; }
h5 { font-size: var(--t-h5); line-height: 1.5; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

/* The theme's signature: uppercase micro-label above every section heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-head);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-black);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-primary);
  flex: none;
}
.eyebrow--on-green { color: var(--c-white); }
.eyebrow--on-green::before { background: var(--c-primary); }

.lead {
  font-family: var(--f-head);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--c-body);
}

.muted { color: var(--c-body); }
.small { font-size: var(--t-sm); }
.xs    { font-size: var(--t-xs); }

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--w-site);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--sec-y); }
.section--tight { padding-block: clamp(36px, 4.5vw, 64px); }
.section--off   { background: var(--c-off); }
.section--soft  { background: var(--c-green-soft); }

.stack > * + * { margin-top: var(--flow, 20px); }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Asymmetric split — the theme leans on off-balance two-column bands */
.split {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px) {
  .split           { grid-template-columns: 1.05fr 1fr; }
  .split--reverse  { grid-template-columns: 1fr 1.05fr; }
  .split--reverse > :first-child { order: 2; }
  .split--wide-left  { grid-template-columns: 1.35fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.35fr; }
}

.section-head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 16px; }

.section-head--row { max-width: none; display: grid; gap: 20px; align-items: end; }
@media (min-width: 900px) {
  .section-head--row { grid-template-columns: 1fr auto; }
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--f-head);
  font-weight: 500;
  font-size: var(--t-sm);
  line-height: 1.3;
  padding: 15px 30px;
  border-radius: var(--r-pill);
  background: var(--c-primary);
  color: var(--c-black);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  min-height: 48px;
  text-align: center;
}
.btn:hover  { background: var(--c-primary-deep); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); }

.btn--green { background: var(--c-green-surface); color: var(--c-white); }
.btn--green:hover { background: var(--c-green-deep); }

.btn--dark { background: var(--c-black); color: var(--c-white); }
.btn--dark:hover { background: #1a1a1a; }

.btn--ghost {
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-line);
}
.btn--ghost:hover { background: var(--c-off); border-color: var(--c-line-strong); }

.btn--on-green { background: var(--c-white); color: var(--c-black); }
.btn--on-green:hover { background: var(--c-primary); }

.btn--lg { padding: 18px 36px; font-size: var(--t-base); }
.btn--block { display: flex; width: 100%; }

/* Icon pill — the header phone treatment. The 5px left inset is deliberate:
   a circular icon badge sits flush inside the pill. See docs/01 §5. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 15px 5px 5px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-family: var(--f-head);
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--c-black);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pill:hover { border-color: var(--c-line-strong); background: var(--c-off); }
.pill__icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-primary);
  display: grid; place-items: center;
  flex: none;
}
.pill__icon svg { width: 16px; height: 16px; }
.pill--green .pill__icon { background: var(--c-green-surface); color: var(--c-white); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row--center { justify-content: center; }

/* Text link with animated arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-head);
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--c-black);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 4px;
  transition: border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.link-arrow:hover { border-color: var(--c-black); gap: 14px; }
.link-arrow svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   7. FOCUS & SKIP LINK  (WCAG 2.2 AA)
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
  border-radius: 4px;
}
.section--green :focus-visible,
.footer :focus-visible { outline-color: var(--c-primary); }

.skip-link {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 999;
  background: var(--c-black);
  color: var(--c-white);
  padding: 12px 20px;
  border-radius: var(--r-input);
  font-family: var(--f-head);
  font-size: var(--t-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }

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

/* --------------------------------------------------------------------------
   8. HEADER
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.header.is-stuck { border-bottom-color: var(--c-line); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
}

.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo__mark { width: 38px; height: 38px; flex: none; }
.logo__text {
  font-family: var(--f-head);
  font-weight: 600;
  color: var(--c-black);
}
.logo__tld { color: var(--c-black); background: var(--c-primary); padding: 0 4px; border-radius: 4px; }

/* One-line lockup — desktop only, where there is room for the full name. */
.logo__full {
  display: none;   /* kept in markup for a future one-line context */
  font-size: 1.0625rem;
  line-height: 1.05;
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* Stacked lockup — the default. 97px narrower than the one-liner. */
.logo__stack { display: inline-flex; flex-direction: column; align-items: stretch; }

.logo__l1 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 1.1875rem;      /* 19px */
  line-height: .96;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* The lower line is tracked out so its left AND right INK edges sit flush with
   the line above — measured with a Range over the glyphs, not with
   getBoundingClientRect, which includes the invisible trailing letter-space and
   reports the block as aligned when it is 16px short.

   "DE NETTOYAGE" at 11.5px/500 measures 83.61px untracked and has 11 internal
   gaps; "Société.ma" at 19px/600 measures 121.35px including the .ma badge.
   (121.35 - 83.61) / 11 = 3.431px, trimmed to .2865em after measuring the
   rendered glyphs — the raw figure overshot the right edge by 1.5px. The negative margin-right removes
   the trailing space CSS adds after the final character so the layout box
   matches the ink. */
.logo__l2 {
  /* Outfit, not Parkinsans: Parkinsans' uppercase G carries a geometric spur that
     is conspicuous in "NETTOYAGE" precisely because the line is heavily tracked.
     Outfit's G is conventional and it holds up better at 700. No extra font —
     Outfit is already loaded for body copy. */
  font-family: var(--f-body);
  font-size: 0.71875rem;     /* 11.5px */
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  /* Tracking is font- and weight-specific: heavier faces are wider, so this value
     is not transferable. .2518em is the measured figure for Outfit 700 at 11.5px
     that puts the ink edges flush with "Société.ma" above. */
  letter-spacing: .2518em;
  margin-right: -.2518em;
  color: rgba(0,0,0,.68);
  white-space: nowrap;
}

/* The stacked lockup is used at every width. It is the designed mark, it is
   97px narrower than the one-liner, and that width is what lets the desktop nav
   fit alongside it. */

/* The drawer header is always narrow — keep it stacked there regardless. */
.drawer .logo__full  { display: none; }
.drawer .logo__stack { display: inline-flex; }

/* Desktop nav — same items, same weights and same submenus as the mobile panel,
   because they are now rendered by one function. Revealed at 1120px: below that
   the nav, the logo and the actions no longer fit on one line. */
.dnav { display: none; }
@media (min-width: 1120px) {
  .dnav { display: flex; align-items: center; gap: 1px; }
}

.dnav > a,
.dnav__group > summary {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 0.8125rem;              /* 13 — one step below the mobile 15 */
  letter-spacing: -.01em;
  color: rgba(255,255,255,.88);
  padding: 9px 12px;
  white-space: nowrap;
  border-radius: var(--r-pill);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dnav > a:hover,
.dnav > a[aria-current="page"],
.dnav__group > summary:hover,
.dnav__group[open] > summary { color: #fff; background: rgba(0,0,0,.16); }
/* A white veil over the green header lightens the ground and pushes white nav text
   to 3.99:1. Darkening instead of lightening keeps the same "pressed" read and
   takes it to 6.76:1. */

.dnav__group { position: relative; }
.dnav__group > summary::-webkit-details-marker { display: none; }
.dnav__group > summary::after {
  content: '';
  width: 9px; height: 9px;
  flex: none;
  background: currentColor;
  clip-path: polygon(50% 78%, 0 22%, 14% 10%, 50% 52%, 86% 10%, 100% 22%);
  transition: transform var(--dur) var(--ease);
}
.dnav__group[open] > summary::after { transform: rotate(180deg); }

/* The panel hangs off the header rather than pushing the bar taller. */
.dnav__panel {
  position: absolute;
  /* Anchored to the bottom of the HEADER, not of the trigger. `100% + 12px` is
     relative to the 38px summary, which left the panel 13px above the header
     edge and overlapping it. The summary is vertically centred, so from its own
     mid-point it is exactly half the header height to the bar's bottom edge —
     and --header-h is measured by site.js, so this survives a taller header. */
  top: calc(50% + (var(--header-h, 77px) / 2) + 10px);
  left: 0;
  z-index: 120;
  width: max-content;
  max-width: 460px;
  background: var(--c-white);
  border-radius: var(--r-card);
  box-shadow: 0 18px 46px rgba(0,0,0,.16);
  padding: 16px;
  animation: sdn-drop .18s var(--ease);
}
@keyframes sdn-drop { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .dnav__panel { animation: none; } }

.dnav__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dnav__cols a {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--c-body);
  background: var(--c-off);
  border-radius: 10px;
  padding: 11px 13px;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dnav__cols a:hover,
.dnav__cols a:focus-visible { background: var(--c-green-soft); color: var(--c-black); }

.dnav__cols--cities a { flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 15px; }
.dnav__cols--cities strong { font-size: 0.9375rem; font-weight: 600; color: var(--c-black); }
.dnav__cols--cities span { font-size: var(--t-xs); font-weight: 400; color: var(--c-body); }

.dnav__all { margin-top: 8px; font-size: 0.8125rem; }

.header__actions { display: flex; align-items: center; gap: 10px; }
.header__actions .pill { display: none; }
@media (min-width: 768px)  { .header__actions .pill { display: inline-flex; } }
.header__actions .btn { display: none; }
@media (min-width: 1024px) { .header__actions .btn { display: inline-flex; } }

.burger {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-white);
  flex: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (min-width: 1120px) { .burger { display: none; } }

/* Burger → X. The three bars are absolutely positioned inside a fixed box so the
   button's size never changes between states — a morph that resizes its own
   button makes the whole header jump. */
.burger__box {
  position: relative;
  width: 18px; height: 12px;
  display: block;
}
.burger__box i {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--c-black);
  transition: transform var(--dur) var(--ease), opacity .16s linear, top var(--dur) var(--ease);
}
.burger__box i:nth-child(1) { top: 0; }
.burger__box i:nth-child(2) { top: 5px; }
.burger__box i:nth-child(3) { top: 10px; }

.burger[aria-expanded="true"] { background: var(--c-primary); border-color: transparent; }
.burger[aria-expanded="true"] .burger__box i:nth-child(1) { top: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box i:nth-child(3) { top: 5px; transform: rotate(-45deg); }

/* Mobile drawer — a panel under the header, not a full-screen takeover.
   The header stays visible and sticky the whole time, so the logo and the quote
   CTA never leave the screen. --header-h is measured by site.js; the 76px
   fallback is the header's min-height, so the panel is positioned correctly even
   before the script runs. */
.drawer-scrim {
  position: fixed;
  inset: var(--header-h, 76px) 0 0;
  z-index: 94;
  background: rgba(0,0,0,.28);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer-scrim[data-show="true"] { opacity: 1; }

.drawer {
  position: fixed;
  top: var(--header-h, 76px);
  left: 0; right: 0;
  z-index: 95;
  max-height: calc(100dvh - var(--header-h, 76px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--c-white);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  padding: 10px var(--pad-x) 20px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: transform .26s var(--ease), opacity .26s var(--ease), visibility .26s;
}
.drawer[data-open="true"] { transform: none; opacity: 1; visibility: visible; }

.mnav { display: flex; flex-direction: column; }

/* Top-level items: smaller than the old 24px, but heavier and tighter. */
.mnav > a,
.mnav__group > summary {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 0.9375rem;          /* 15 */
  letter-spacing: -.012em;
  color: var(--c-black);
  padding: 14px 2px;
  border-bottom: 1px solid var(--c-line);
  min-height: 48px;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
.mnav > a:last-child { border-bottom: 0; }
.mnav__group > summary::-webkit-details-marker { display: none; }

.mnav__group > summary::after {
  content: '';
  width: 22px; height: 22px;
  margin-left: auto;
  flex: none;
  border-radius: 50%;
  background: var(--c-off) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 12px no-repeat;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.mnav__group[open] > summary::after { transform: rotate(180deg); background-color: var(--c-primary); }
.mnav__group[open] > summary { border-bottom-color: transparent; }

.mnav__panel { padding: 4px 0 16px; border-bottom: 1px solid var(--c-line); }

.mnav__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mnav__cols a {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: 0.8125rem;          /* 13 */
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--c-body);
  background: var(--c-off);
  border-radius: 10px;
  padding: 11px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mnav__cols a:hover,
.mnav__cols a:focus-visible { background: var(--c-green-soft); color: var(--c-black); }

.mnav__cols--cities a { flex-direction: column; align-items: flex-start; gap: 3px; padding: 13px 14px; }
.mnav__cols--cities strong { font-size: 0.9375rem; font-weight: 600; color: var(--c-black); }
.mnav__cols--cities span { font-size: var(--t-xs); font-weight: 400; color: var(--c-body); }

.mnav__all { margin-top: 10px; font-size: 0.8125rem; }

.mnav__foot { display: grid; gap: 10px; padding-top: 18px; }
.mnav__foot .btn { font-size: 0.8125rem; }
.mnav__foot .btn svg { width: 15px; height: 15px; }

@media (min-width: 1120px) {
  .drawer, .drawer-scrim { display: none; }
}

/* --------------------------------------------------------------------------
   9. HERO
   -------------------------------------------------------------------------- */
.hero { padding-block: clamp(36px, 5vw, 72px) clamp(48px, 6vw, 88px); position: relative; }
.hero__grid { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
@media (min-width: 1000px) { .hero__grid { grid-template-columns: 1.06fr 1fr; } }

.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 52ch; }
.hero .btn-row { margin-top: 30px; }

.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: var(--r-card);
}
/* Editorial imagery stays square-cornered per the DNA; only the hero card is soft */
.hero__badge {
  position: absolute;
  left: -12px; bottom: 26px;
  background: var(--c-white);
  border-radius: var(--r-pill);
  padding: 14px 20px;
  box-shadow: var(--shadow-lift);
  display: flex; align-items: center; gap: 12px;
}
@media (min-width: 640px) { .hero__badge { left: -24px; } }
.hero__badge strong { font-family: var(--f-head); font-size: 1.375rem; color: var(--c-black); display: block; line-height: 1; }
.hero__badge span { font-size: var(--t-xs); }

.hero__leaf {
  position: absolute;
  right: -30px; top: -20px;
  width: 120px; opacity: .9;
  pointer-events: none;
}

/* Inline trust chips under the hero CTAs */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-xs);
  background: var(--c-green-soft);
  color: var(--c-black);
  padding: 7px 14px;
  border-radius: var(--r-pill);
}
.chip svg { width: 13px; height: 13px; color: var(--c-green); flex: none; }

/* --------------------------------------------------------------------------
   10. TRUST STRIP / STATS
   -------------------------------------------------------------------------- */
.strip {
  border-block: 1px solid var(--c-line);
  padding-block: 26px;
}
.strip__inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: center;
}
@media (min-width: 900px) { .strip__inner { grid-template-columns: repeat(4, 1fr); } }
.stat strong {
  display: block;
  font-family: var(--f-head);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  line-height: 1;
  color: var(--c-black);
}
.stat span { display: block; margin-top: 8px; font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   11. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 28px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  height: 100%;
  display: flex;
  flex-direction: column;
}
a.card:hover, .card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: transparent;
}
.card__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--c-green-soft);
  display: grid; place-items: center;
  margin-bottom: 20px;
  flex: none;
  transition: background var(--dur) var(--ease);
}
.card__icon svg { width: 26px; height: 26px; color: var(--c-green); }
a.card:hover .card__icon { background: var(--c-primary); }
a.card:hover .card__icon svg { color: var(--c-black); }
.card h3, .card h4 { margin-bottom: 10px; }
.card p { font-size: var(--t-sm); }
.card__foot { margin-top: auto; padding-top: 20px; }

.card--soft  { background: var(--c-off); border-color: transparent; }
.card--green { background: var(--c-green-surface); border-color: transparent; color: var(--c-on-green); }
.card--green h3, .card--green h4 { color: var(--c-white); }

/* Service card with image */
.svc-card { padding: 0; overflow: hidden; }
.svc-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.svc-card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.svc-card__tag {
  display: inline-block;
  font-size: var(--t-xs);
  background: var(--c-primary);
  color: var(--c-black);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   12. GREEN FEATURE CARD — the hero moment of the homepage
   -------------------------------------------------------------------------- */
.feature {
  background: var(--c-green-surface);
  border-radius: var(--r-card);
  color: var(--c-on-green);
  padding: clamp(36px, 5vw, 72px) clamp(24px, 4vw, 64px);
  position: relative;
  overflow: hidden;
}
.feature h2, .feature h3, .feature h4 { color: var(--c-white); }
.feature__leaf {
  position: absolute;
  right: -60px; bottom: -60px;
  width: 280px;
  opacity: .12;
  pointer-events: none;
}

/* Process timeline (5 steps) */
.steps { display: grid; gap: 24px; position: relative; }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(5, 1fr); gap: 16px; } }
.step { position: relative; padding-top: 30px; }
.step::before {
  content: '';
  position: absolute;
  top: 15px; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,.25);
}
@media (max-width: 999px) { .step::before { display: none; } }
.step__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-black);
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--t-sm);
  display: grid; place-items: center;
  position: absolute;
  top: 0; left: 0;
}
@media (max-width: 999px) { .step { padding-top: 0; padding-left: 48px; } .step__num { top: -2px; } }
.step h3 { font-size: var(--t-h4); line-height: 1.4; margin-bottom: 8px; }
.step p { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   13. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quotes {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 768px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  background: var(--c-off);
  border-radius: var(--r-card);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.quote__mark {
  font-family: var(--f-head);
  font-size: 3.5rem;
  line-height: .6;
  color: var(--c-primary);
  margin-bottom: 14px;
}
.quote blockquote {
  font-family: var(--f-head);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--c-black);
  flex: 1;
}
.quote__who { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.quote__who img {
  width: 48px; height: 48px;
  border-radius: var(--r-avatar);
  object-fit: cover;
  flex: none;
}
.quote__who strong {
  display: block;
  font-family: var(--f-head);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-black);
}
.quote__who span { font-size: var(--t-xs); }

.stars { display: inline-flex; gap: 2px; margin-bottom: 14px; }
.stars svg { width: 15px; height: 15px; color: var(--c-primary); }

/* --------------------------------------------------------------------------
   14. FAQ ACCORDION — CSS only, <details>/<summary>, keyboard-native
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: 12px; }
.faq details {
  border: 1px solid var(--c-line);
  border-radius: var(--r-input);
  background: var(--c-white);
  transition: border-color var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--c-line-strong); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--f-head);
  font-weight: 500;
  font-size: var(--t-lead);
  color: var(--c-black);
  list-style: none;
  min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  width: 28px; height: 28px;
  flex: none;
  border-radius: 50%;
  background: var(--c-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233CA200' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--c-primary);
}
.faq__body { padding: 0 24px 22px; }
.faq__body p { font-size: var(--t-base); }

/* --------------------------------------------------------------------------
   15. PRICE TABLES — HTML tables, never images (AI-citable)
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-white);
  -webkit-overflow-scrolling: touch;
}
.price-table { min-width: 560px; }
.price-table caption {
  caption-side: top;
  text-align: left;
  padding: 22px 26px 0;
  font-family: var(--f-head);
  font-size: var(--t-h5);
  color: var(--c-black);
}
.price-table th, .price-table td {
  padding: 16px 26px;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-sm);
}
.price-table thead th {
  font-family: var(--f-head);
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-black);
  background: var(--c-off);
}
.price-table tbody th { font-family: var(--f-body); font-weight: 400; color: var(--c-black); }
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table .price {
  font-family: var(--f-head);
  font-weight: 500;
  color: var(--c-black);
  white-space: nowrap;
}
/* WCAG 2.2 AA §2.5.8 — links inside table cells are not "inline in a sentence",
   so they need the full 24px target. */
.price-table a {
  display: inline-block;
  padding-block: 4px;
  min-height: 24px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.price-table a:hover { color: var(--c-green); }

/* Pricing tiers */
.tiers { display: grid; gap: var(--gap); }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  background: var(--c-white);
}
.tier--featured {
  background: var(--c-green-surface);
  border-color: transparent;
  color: var(--c-on-green);
}
.tier--featured h3, .tier--featured .tier__price { color: var(--c-white); }
.tier__price {
  font-family: var(--f-head);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1;
  color: var(--c-black);
  margin: 18px 0 6px;
}
.tier__price small { font-size: var(--t-sm); font-family: var(--f-body); }
.tier ul { margin: 24px 0; display: grid; gap: 12px; }
.tier li { display: flex; gap: 10px; font-size: var(--t-sm); }
.tier li svg { width: 18px; height: 18px; flex: none; color: var(--c-green); margin-top: 2px; }
.tier--featured li svg { color: var(--c-primary); }
.tier .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   16. BEFORE / AFTER  — nobody in this market has this
   -------------------------------------------------------------------------- */
.ba {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-off);
  --pos: 50%;
}
.ba__pair { position: relative; aspect-ratio: 4/3; }
.ba__pair img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__label {
  position: absolute; top: 14px;
  font-family: var(--f-head); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 1px; text-transform: uppercase;
  background: rgba(255,255,255,.92); color: var(--c-black);
  padding: 5px 12px; border-radius: var(--r-pill);
  z-index: 3; pointer-events: none;
}
.ba__label--before { left: 14px; }
.ba__label--after  { right: 14px; background: var(--c-primary); }

.ba__range {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  background: none; -webkit-appearance: none; appearance: none;
  cursor: ew-resize; z-index: 4;
}
.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-primary);
  border: 3px solid var(--c-white);
  box-shadow: var(--shadow-lift);
  cursor: ew-resize;
}
.ba__range::-moz-range-thumb {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-primary);
  border: 3px solid var(--c-white);
  box-shadow: var(--shadow-lift);
  cursor: ew-resize;
}
.ba__line {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 3px; background: var(--c-white);
  z-index: 2; pointer-events: none;
  transform: translateX(-50%);
}
/* No-JS fallback: show both images side by side rather than a broken slider */
.no-js .ba__after { clip-path: none; position: relative; }
.no-js .ba__pair  { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 8/3; }
.no-js .ba__pair img { position: relative; }
.no-js .ba__range, .no-js .ba__line { display: none; }

.ba__meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  padding: 18px 22px;
  font-size: var(--t-xs);
}
.ba__meta b { font-family: var(--f-head); font-weight: 500; color: var(--c-black); }

/* --------------------------------------------------------------------------
   17. FORMS
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--f-head);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-black);
}
.field .req { color: var(--c-green-surface); }  /* 5.19:1 on white; --c-green was 3.30:1 */
.field .hint { font-size: var(--t-xs); color: var(--c-body-dim); }
/* On the green quote card the hint inherited the light-background colour —
   black at 50 % over green is 4.05:1. */
.quote-box .field .hint { color: var(--c-on-green); }

.input, .select, .textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-input);
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--f-body);
  font-size: var(--t-base);
  min-height: 50px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--c-line-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(60,162,0,.14);
}
.textarea { min-height: 130px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 44px;
}
.input:user-invalid, .textarea:user-invalid, .select:user-invalid {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}
.form-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }

.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-sm); }
.consent input { width: 24px; height: 24px; margin-top: 1px; flex: none; accent-color: var(--c-green); }

/* --------------------------------------------------------------------------
   18. BREADCRUMBS
   -------------------------------------------------------------------------- */
.crumbs { padding-block: 14px; font-size: var(--t-xs); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.crumbs li { display: flex; align-items: center; gap: 8px; }
/* WCAG 2.2 AA §2.5.8 — 24px minimum target */
.crumbs a, .crumbs [aria-current] { display: inline-block; padding-block: 4px; min-height: 24px; }
.crumbs li + li::before { content: '›'; color: var(--c-body-dim); }
.crumbs a:hover { color: var(--c-black); text-decoration: underline; }
.crumbs [aria-current] { color: var(--c-black); }

/* --------------------------------------------------------------------------
   19. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  background: var(--c-primary);
  border-radius: var(--r-card);
  padding: clamp(36px, 5vw, 64px) clamp(24px, 4vw, 56px);
  display: grid;
  gap: 28px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) { .cta-band { grid-template-columns: 1.4fr auto; } }
.cta-band h2 { color: var(--c-black); }
.cta-band p { color: rgba(0,0,0,.7); margin-top: 12px; }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: linear-gradient(180deg, var(--c-green-soft) 0%, var(--c-green-soft) 42%, var(--c-white) 100%);
  padding-top: clamp(48px, 6vw, 88px);
  position: relative;
  overflow: hidden;
}
.footer__news {
  background: var(--c-white);
  border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  gap: 24px;
  align-items: center;
  margin-bottom: clamp(40px, 5vw, 64px);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 900px) { .footer__news { grid-template-columns: 1fr 1.1fr; } }
.footer__news form { display: flex; gap: 10px; flex-wrap: wrap; }
.footer__news .input { flex: 1 1 220px; }

.footer__cols { display: grid; gap: 36px; padding-bottom: 48px; }
@media (min-width: 640px)  { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer h4 {
  font-size: var(--t-eyebrow);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 18px;
}
.footer ul { display: grid; gap: 8px; }
/* WCAG 2.2 AA §2.5.8 — 24px minimum target size */
.footer li a {
  display: inline-block;
  font-size: var(--t-sm);
  padding-block: 3px;
  min-height: 24px;
  transition: color var(--dur) var(--ease);
}
.footer li a:hover { color: var(--c-black); text-decoration: underline; }
.footer__about p { font-size: var(--t-sm); margin-top: 16px; max-width: 34ch; }

.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  display: grid; place-items: center;
  background: var(--c-white);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.socials a:hover { background: var(--c-primary); transform: translateY(-2px); }
.socials svg { width: 17px; height: 17px; }

.footer__contact li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-sm); }
.footer__contact svg { width: 17px; height: 17px; color: var(--c-green); flex: none; margin-top: 3px; }

.footer__bottom {
  border-top: 1px solid var(--c-line);
  padding-block: 24px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: var(--t-xs);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
/* Short labels like "CGV" render ~24px wide — right on the §2.5.8 boundary and
   under it once subpixel rounding is counted. Inline padding gives every legal
   link a real target regardless of how short the word is. */
.footer__bottom nav a { display: inline-block; padding: 3px 3px; min-height: 24px; min-width: 28px; text-align: center; }

/* A heading that is nothing but a link is a card title — a standalone target, so
   the §2.5.8 24px minimum applies with no inline-in-sentence exemption. Card
   titles run at --t-h4, which at the tablet end of the fluid scale resolves to
   16.35px; x1.4 leaves a 22.9px line box, under the minimum on that one band and
   correct everywhere else. min-height needs a block-level box to take effect, so
   the link is made inline-block — it still wraps internally, being shrink-to-fit
   against the container width. */
h2 > a:only-child,
h3 > a:only-child,
h4 > a:only-child { display: inline-block; min-height: 24px; }
.footer__bottom a:hover { text-decoration: underline; }

.footer__leaf {
  position: absolute;
  left: -70px; bottom: -40px;
  width: 240px; opacity: .35;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   21. FLOATING WHATSAPP  (mobile conversion driver — absent from competitors)
   -------------------------------------------------------------------------- */
.wa {
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 90;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lift);
  transition: transform var(--dur) var(--ease);
}
.wa:hover { transform: scale(1.06); }
.wa svg { width: 28px; height: 28px; }

/* --------------------------------------------------------------------------
   22. UTILITIES & MOTION
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 40px; }
.list-check { display: grid; gap: 12px; }
.list-check li { display: flex; gap: 11px; font-size: var(--t-sm); }
.list-check svg { width: 18px; height: 18px; color: var(--c-green); flex: none; margin-top: 2px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .header, .footer, .wa, .btn, .drawer { display: none !important; }
  body { color: #000; }
}

/* ==========================================================================
   23. INNER PAGE COMPONENTS  (phase A2)
   ========================================================================== */

/* Page hero — inner pages. Deliberately flatter than the homepage hero. */
.page-hero { background: var(--c-off); padding-block: 8px clamp(40px, 5vw, 72px); }
.page-hero__grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 900px) { .page-hero__grid { grid-template-columns: 1.25fr 1fr; } }
.page-hero h1 { margin-bottom: 18px; }
.page-hero .lead { max-width: 58ch; }
.page-hero img { border-radius: var(--r-card); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.page-hero--plain { padding-bottom: clamp(32px, 4vw, 56px); }
.page-hero--plain .page-hero__grid { grid-template-columns: 1fr; max-width: 780px; }

/* Grid and flex items default to min-width:auto, which lets wide children
   (price tables, code, long words) push a track past the viewport. Reset it. */
.grid > *, .split > *, .with-aside > *, .quotes > *, .tiers > *,
.post-grid > *, .ba-grid > *, .proof-band > *, .team-grid > * { min-width: 0; }

/* Main + sticky aside */
.with-aside { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (min-width: 1000px) { .with-aside { grid-template-columns: minmax(0,1fr) 348px; } }
.aside-sticky { display: grid; gap: 20px; }
@media (min-width: 1000px) { .aside-sticky { position: sticky; top: 96px; } }

/* Sticky quote card */
.quote-box {
  background: var(--c-green-surface);
  color: var(--c-on-green);
  border-radius: var(--r-card);
  padding: 28px 26px;
}
.quote-box h2, .quote-box h3 { color: var(--c-white); margin-bottom: 8px; }
.quote-box p { font-size: var(--t-sm); }
.quote-box .field { margin-top: 14px; }
.quote-box label { color: var(--c-white); }
.quote-box .btn { margin-top: 18px; }

.side-card {
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: 24px 26px;
  background: var(--c-white);
}
.side-card h2, .side-card h3 { margin-bottom: 14px; font-size: var(--t-h4); line-height: 1.4; }
.side-card ul { display: grid; gap: 6px; }
.side-card li a { font-size: var(--t-sm); display: inline-block; padding-block: 4px; min-height: 24px; }
.side-card li a:hover { color: var(--c-black); text-decoration: underline; }

/* Prose — long-form body copy on money pages */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 46px; }
.prose h3 { margin-top: 32px; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose p, .prose li { font-size: var(--t-base); line-height: 1.65; }
.prose ul { display: grid; gap: 10px; }
.prose ul li { display: flex; gap: 11px; }
.prose ul li::before {
  content: '';
  flex: none; width: 7px; height: 7px; margin-top: 9px;
  border-radius: 50%; background: var(--c-primary);
}
.prose a { text-decoration: underline; text-underline-offset: 3px; color: var(--c-black); }
.prose a:hover { color: var(--c-green); }
/* A link that is the whole paragraph is a standalone target, not a word inside a
   sentence — WCAG 2.2 §2.5.8's inline exception does not cover it. */
.prose p > a:only-child { display: inline-block; padding-block: 3px; min-height: 24px; }
.prose strong { color: var(--c-black); font-weight: 500; }

/* Key-answer callout — the passage LLMs extract. Always first after the H2. */
.answer {
  background: var(--c-green-soft);
  border-left: 4px solid var(--c-green);
  border-radius: 0 var(--r-input) var(--r-input) 0;
  padding: 20px 24px;
  font-family: var(--f-head);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--c-black);
}

/* Quartiers */
.quartiers { display: flex; flex-wrap: wrap; gap: 9px; }
.quartiers li {
  font-size: var(--t-sm);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  min-height: 24px;
}

/* Formules comparison table */
.compare th:first-child { width: 34%; }
.compare td { text-align: center; }
.compare thead th:not(:first-child) { text-align: center; }
.compare .yes svg { width: 18px; height: 18px; color: var(--c-green); margin-inline: auto; }
.compare .no { color: var(--c-body-dim); }
.compare .best { background: rgba(242,215,1,.16); }

/* Blog */
.post-grid { display: grid; gap: var(--gap); }
@media (min-width: 700px)  { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1050px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { padding: 0; overflow: hidden; }
.post-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.post-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.post-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: var(--t-xs); margin-bottom: 10px; }

.post-featured { display: grid; gap: 0; overflow: hidden; padding: 0; }
@media (min-width: 900px) { .post-featured { grid-template-columns: 1.1fr 1fr; } }
.post-featured img { height: 100%; min-height: 280px; object-fit: cover; width: 100%; }
.post-featured__body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }

/* Réalisations grid */
.ba-grid { display: grid; gap: clamp(24px, 3vw, 40px); }
@media (min-width: 860px) { .ba-grid { grid-template-columns: repeat(2, 1fr); } }
.ba-grid .ba { border: 1px solid var(--c-line); }

/* About timeline */
.timeline { display: grid; border-left: 2px solid var(--c-line); padding-left: 30px; }
.timeline li { position: relative; padding-bottom: 34px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: '';
  position: absolute; left: -37px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-primary); border: 3px solid var(--c-white);
  box-shadow: 0 0 0 2px var(--c-line);
}
.timeline .year {
  font-family: var(--f-head); font-weight: 500; font-size: var(--t-xs);
  letter-spacing: 1px; text-transform: uppercase; color: var(--c-green);
  display: block; margin-bottom: 6px;
}
.timeline h3 { margin-bottom: 8px; }

/* Team */
.team-grid { display: grid; gap: var(--gap); }
@media (min-width: 640px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
.team-card { text-align: center; }
.team-card img { width: 112px; height: 112px; border-radius: var(--r-avatar); object-fit: cover; margin: 0 auto 16px; }

/* Services filter rail */
.rail { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.rail a {
  font-family: var(--f-head); font-weight: 500; font-size: var(--t-sm);
  padding: 10px 18px; border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: var(--c-white);
  min-height: 40px; display: inline-flex; align-items: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.rail a:hover { background: var(--c-off); border-color: var(--c-line-strong); }
.rail a.is-active { background: var(--c-primary); border-color: transparent; color: var(--c-black); }

/* Contact */
.contact-grid { display: grid; gap: clamp(32px, 4vw, 56px); align-items: start; }
@media (min-width: 950px) { .contact-grid { grid-template-columns: 1.25fr 1fr; } }
.contact-card {
  background: var(--c-off);
  border-radius: var(--r-card);
  padding: 28px 26px;
}
.contact-card + .contact-card { margin-top: 20px; }
.contact-card h2, .contact-card h3 { margin-bottom: 12px; font-size: var(--t-h4); line-height: 1.4; }
.contact-card ul { display: grid; gap: 12px; }
.contact-card li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-sm); }
/* WCAG 2.2 AA §2.5.8 — 24px minimum target */
.contact-card li a { display: inline-block; padding-block: 4px; min-height: 24px; }
.contact-card svg { width: 17px; height: 17px; color: var(--c-green); flex: none; margin-top: 3px; }

.form-note {
  background: var(--c-green-soft);
  border-radius: var(--r-input);
  padding: 16px 20px;
  font-size: var(--t-sm);
  color: var(--c-black);
}

/* Local proof band */
.proof-band { display: grid; gap: 20px; }
@media (min-width: 760px) { .proof-band { grid-template-columns: repeat(3, 1fr); } }
.proof {
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-card); padding: 24px 26px;
}
.proof strong {
  display: block; font-family: var(--f-head);
  font-size: var(--t-h4); color: var(--c-black); margin-bottom: 6px;
}
.proof p { font-size: var(--t-sm); }

/* ==========================================================================
   24. PREMIUM TYPE LAYER  —  opt-in via <body class="sdn-premium">
   ==========================================================================

   A deliberate departure from the Clanyeco DNA (docs/01), which sets every
   heading at weight 400 with default tracking. That is what makes the source
   theme read as a template.

   Five changes do the work, and only the first is about size:

   1. SMALLER, HEAVIER. H1 drops 46 → 40px but goes 400 → 600. A short heavy
      line reads more confident than a long light one; scale is not authority.
   2. NEGATIVE TRACKING ON DISPLAY SIZES. The single strongest "expensive" tell.
      Large type at default tracking always looks amateur; −0.03em at 40px
      closes the gaps the type designer expected you to close.
   3. WIDER WEIGHT CONTRAST. Headings 600, body 400. The source sits everything
      at 300–400, which reads flat and cheap.
   4. TIGHTER HEADING LEADING, LOOSER BODY LEADING. 1.06 on H1, 1.65 on body.
      Headings become objects; paragraphs become comfortable.
   5. MORE AIR PER UNIT OF TYPE. Type shrinks, section padding does not — so
      the whitespace ratio rises without adding a single pixel of height.

   Body goes 16 → 15px but is MORE readable, not less: weight rises 300 → 400,
   leading 1.5 → 1.65, and colour deepens .60 → .66. Smaller and thin would be
   a mistake; smaller and firmer is the trade that works.
   ========================================================================== */

body.sdn-premium {
  --t-h1: clamp(1.875rem, 1.55rem + 1.39vw, 2.5rem);       /* 30 → 40 */
  --t-h2: clamp(1.5rem, 1.28rem + 0.94vw, 1.9375rem);      /* 24 → 31 */
  --t-h3: clamp(1.1875rem, 1.11rem + 0.33vw, 1.375rem);    /* 19 → 22 */
  --t-h4: clamp(1rem, 0.97rem + 0.11vw, 1.0625rem);        /* 16 → 17 */
  --t-h5: 0.9375rem;                                       /* 15 */
  --t-eyebrow: 0.6875rem;                                  /* 11 — floor for an
                                                              uppercase tracked label;
                                                              10.5 read too tight on
                                                              small screens */
  --t-lead: clamp(1rem, 0.97rem + 0.11vw, 1.0625rem);      /* 16 → 17 */
  --t-base: 0.9375rem;                                     /* 15 */
  --t-sm: 0.84375rem;                                      /* 13.5 */
  --t-xs: 0.71875rem;                                      /* 11.5 */

  --c-body:     rgba(0,0,0,.66);
  --c-body-dim: rgba(0,0,0,.5);
  --c-line:     rgba(0,0,0,.09);

  --sec-y: clamp(64px, 7.5vw, 124px);

  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.002em;
  font-optical-sizing: auto;
}

.sdn-premium h1,
.sdn-premium h2,
.sdn-premium h3,
.sdn-premium h4,
.sdn-premium h5 { font-weight: 600; }

.sdn-premium h1 { line-height: 1.06; letter-spacing: -.032em; }
.sdn-premium h2 { line-height: 1.12; letter-spacing: -.026em; }
.sdn-premium h3 { line-height: 1.24; letter-spacing: -.018em; }
.sdn-premium h4 { line-height: 1.35; letter-spacing: -.012em; }
.sdn-premium h5 { line-height: 1.45; letter-spacing: -.008em; }

/* The eyebrow gets smaller and more tracked — the inverse of the headings.
   That contrast is what makes it read as a label rather than small text. */
.sdn-premium .eyebrow {
  font-weight: 600;
  letter-spacing: .16em;
  margin-bottom: 16px;
}
.sdn-premium .eyebrow::before { width: 6px; height: 6px; }

.sdn-premium .lead {
  font-family: var(--f-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.004em;
  color: var(--c-body);
}

.sdn-premium p { line-height: 1.65; }
.sdn-premium .prose p,
.sdn-premium .prose li { font-size: var(--t-base); line-height: 1.72; }

/* Buttons shrink and tighten. Chunky buttons are the fastest way to look cheap. */
.sdn-premium .btn {
  font-size: 0.8125rem;          /* 13 */
  font-weight: 600;
  letter-spacing: -.002em;
  padding: 14px 26px;
  min-height: 46px;
}
.sdn-premium .btn--lg { padding: 16px 32px; font-size: 0.875rem; min-height: 50px; }
.sdn-premium .pill { font-size: 0.8125rem; font-weight: 600; }

/* Finer detailing throughout — thinner rules, smaller chips, calmer shadows. */
.sdn-premium .chip { font-size: var(--t-xs); padding: 7px 13px; }
.sdn-premium .card { padding: 30px; }
.sdn-premium .svc-card { padding: 0; }
.sdn-premium .svc-card__body { padding: 26px 28px 28px; }
.sdn-premium .svc-card__tag { font-size: var(--t-xs); padding: 4px 11px; }
.sdn-premium .shadow, .sdn-premium .card--hover:hover, .sdn-premium a.card:hover {
  box-shadow: 0 10px 34px rgba(0,0,0,.07);
}

/* Stat numbers stay large — they are the one place scale still earns its keep,
   and shrinking them would flatten the page's only real typographic accent. */
.sdn-premium .stat strong {
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.03em;
}
.sdn-premium .stat span { font-size: var(--t-xs); }

.sdn-premium .quote blockquote {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.7;
  letter-spacing: -.004em;
}
.sdn-premium .quote__mark { font-size: 2.75rem; }

.sdn-premium .price-table th,
.sdn-premium .price-table td { font-size: var(--t-sm); padding: 15px 24px; }
.sdn-premium .price-table thead th { font-size: var(--t-xs); letter-spacing: .12em; }

.sdn-premium .faq summary { font-size: var(--t-h4); font-weight: 600; padding: 19px 24px; }
.sdn-premium .answer { font-family: var(--f-body); font-size: var(--t-base); line-height: 1.68; }

.sdn-premium .section-head { margin-bottom: clamp(36px, 4.5vw, 60px); }
.sdn-premium .section-head p { margin-top: 14px; }

/* --------------------------------------------------------------------------
   24b. PREMIUM LAYER — components that only exist off the homepage
   --------------------------------------------------------------------------
   The scale in §24 was tuned against the homepage. These are the pieces that
   live on the inner templates and needed the same treatment, plus one
   deliberate exception.
   -------------------------------------------------------------------------- */

/* EXCEPTION — form fields stay at 16px.
   iOS Safari zooms the viewport whenever a focused input is under 16px, and the
   page never zooms back out. A 15px field would be visually consistent and
   would break every form on the site on iPhone. Consistency loses here. */
.sdn-premium .input,
.sdn-premium .select,
.sdn-premium .textarea { font-size: 1rem; padding: 13px 15px; min-height: 48px; }
.sdn-premium .field label { font-size: var(--t-sm); font-weight: 600; letter-spacing: -.006em; }
.sdn-premium .field .hint { font-size: var(--t-xs); }
.sdn-premium .consent { font-size: var(--t-sm); }

/* Breadcrumbs */
.sdn-premium .crumbs { font-size: var(--t-xs); padding-block: 12px; }

/* Sidebar cards */
.sdn-premium .side-card { padding: 22px 24px; }
.sdn-premium .side-card h2,
.sdn-premium .side-card h3 { font-size: var(--t-h4); font-weight: 600; margin-bottom: 12px; }
.sdn-premium .side-card li a { font-size: var(--t-sm); }
.sdn-premium .quote-box { padding: 26px 24px; }
.sdn-premium .quote-box p { font-size: var(--t-sm); }

/* Pricing tiers */
.sdn-premium .tier { padding: 28px 26px; }
.sdn-premium .tier__price { font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.125rem); font-weight: 600; letter-spacing: -.03em; }
.sdn-premium .tier__price small { font-size: var(--t-xs); }
.sdn-premium .tier li { font-size: var(--t-sm); }

/* About timeline */
.sdn-premium .timeline .year { font-size: var(--t-xs); letter-spacing: .16em; }
.sdn-premium .timeline h3 { font-size: var(--t-h4); }
.sdn-premium .timeline p { font-size: var(--t-sm); }

/* Blog + portfolio cards */
.sdn-premium .post-card__body { padding: 24px 26px 26px; }
.sdn-premium .post-meta { font-size: var(--t-xs); letter-spacing: .02em; }
.sdn-premium .post-card h3 { font-size: var(--t-h4); }
.sdn-premium .ba__meta { font-size: var(--t-xs); padding: 16px 22px; }
.sdn-premium .ba__label { font-size: var(--t-xs); letter-spacing: .1em; }

/* Contact page */
.sdn-premium .contact-card { padding: 26px 24px; }
.sdn-premium .contact-card h2,
.sdn-premium .contact-card h3 { font-size: var(--t-h4); }
.sdn-premium .contact-card li { font-size: var(--t-sm); }
.sdn-premium .form-note { font-size: var(--t-sm); padding: 14px 18px; }

/* Proof band + process steps */
.sdn-premium .proof { padding: 22px 24px; }
.sdn-premium .proof strong { font-size: var(--t-h4); margin-bottom: 5px; }
.sdn-premium .proof p { font-size: var(--t-sm); }
.sdn-premium .step h3 { font-size: var(--t-h4); }
.sdn-premium .step p { font-size: var(--t-sm); }
.sdn-premium .step__num { width: 28px; height: 28px; font-size: var(--t-xs); }

/* Service filter rail + quartier chips */
.sdn-premium .rail a { font-size: var(--t-sm); padding: 9px 16px; min-height: 38px; }
.sdn-premium .quartiers li { font-size: var(--t-xs); padding: 7px 14px; }

/* Footer */
.sdn-premium .footer h4 { font-size: var(--t-eyebrow); letter-spacing: .16em; font-weight: 600; }
.sdn-premium .footer li a { font-size: var(--t-sm); }
.sdn-premium .footer__about p { font-size: var(--t-sm); }
.sdn-premium .footer__contact li { font-size: var(--t-sm); }
.sdn-premium .footer__bottom { font-size: var(--t-xs); }
.sdn-premium .footer__news { padding: clamp(26px, 3.5vw, 38px); }

/* Table captions read as labels, not headings */
.sdn-premium .price-table caption {
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: -.012em;
  padding: 20px 24px 0;
}

/* ==========================================================================
   25. GREEN HEADER  —  full-bleed brand bar
   ==========================================================================

   The whole header becomes a solid green band: white wordmark, white .ma pill
   with green text, leaf inverted to white with the yellow sun kept.

   CONTRAST NOTE — this is why the bar is #2E7D00 and not #3CA200.
   White text on the signature green #3CA200 measures 3.30:1. A logotype is
   explicitly exempt from WCAG contrast, so the wordmark alone would be fine —
   but the nav links, the phone number and the burger sit on the same bar and
   they are ordinary UI text, which needs 4.5:1. #2E7D00 is already in the
   palette (it is the green button's hover state), reads as the same brand
   colour, and takes white to 5.19:1. Switching --c-header-bg back to
   var(--c-green) is a one-line change if the contrast trade is acceptable.
   ========================================================================== */

:root { --c-header-bg: #2E7D00; }

/* The mark inverts by class rather than by shipping a second SVG. */
.logo__sun  { fill: var(--c-primary); }
.logo__leaf { fill: var(--c-green); }
.logo__vein { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }

.header {
  background: var(--c-header-bg);
  border-bottom: 1px solid transparent;
}
.header.is-stuck { border-bottom-color: rgba(255,255,255,.16); }

/* Leaf at full size on the bar — nothing crops or pads it now. */
.header .logo__mark { width: 42px; height: 42px; }
.header .logo__leaf { fill: #fff; }
.header .logo__vein { stroke: var(--c-header-bg); }

.header .logo__text,
.header .logo__full,
.header .logo__l1 { color: #fff; }
.header .logo__l2 { color: rgba(255,255,255,.86); }

/* .ma reverses: white pill, green text. */
.header .logo__tld {
  background: #fff;
  color: var(--c-header-bg);
}

/* Nav, phone and burger all read against the green. */
/* Nav colours live with the nav itself now; the panel is white so its own
   links must stay dark rather than inherit the header's white. */
.header .dnav__panel a { color: var(--c-body); }
.header .dnav__panel a:hover { color: var(--c-black); }
.header .dnav__all { color: var(--c-black); }

.header .pill {
  background: transparent;
  border-color: rgba(255,255,255,.30);
  color: #fff;
}
.header .pill:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); }

.header .burger { background: transparent; border-color: rgba(255,255,255,.30); }
.header .burger__box i { background: #fff; }
.header .burger[aria-expanded="true"] { background: #fff; border-color: transparent; }
.header .burger[aria-expanded="true"] .burger__box i { background: var(--c-header-bg); }

/* Focus rings need to be visible on green, not on white. */
.header :focus-visible { outline-color: var(--c-primary); outline-offset: 3px; }

/* The yellow CTA keeps black text — 14:1 on yellow, and it is the one element
   that should still shout on a coloured bar. */
.header .btn { background: var(--c-primary); color: var(--c-black); }
.header .btn:hover { background: #fff; }

/* The drawer opens beneath the green bar and stays white, which gives the panel
   a clean edge instead of a green-on-green seam. */
.drawer { border-top-color: rgba(0,0,0,.10); }

/* ==========================================================================
   26. HERO VIDEO
   ==========================================================================
   No overlay by request — the footage sits bare in the same 32px card the
   still image used, so swapping media does not change the hero's geometry.
   ========================================================================== */

.hero__video-wrap {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--c-green-soft);   /* holds the shape before the poster paints */
}

.hero__video {
  display: block;
  width: 100%;
  /* The still it replaces was 4/3.4 (1.18). The footage is 16:9 (1.78), so that
     box would centre-crop 34 % of every frame — enough to cut people out of shot.
     3/2 is the compromise: 16 % crop, and the card keeps roughly the visual weight
     the image had. Set 16/9 to show the full frame (the card gets noticeably
     shorter than the text column beside it), or 4/3.4 to restore the original
     crop. One line either way. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--c-green-soft);
}

/* Discreet, corner-placed, not an overlay. Present because WCAG 2.2 §1.4.2
   requires a control for audio that runs past three seconds — and once someone
   unmutes, they need a way back. */
.hero__sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hero__sound:hover { background: rgba(0,0,0,.62); transform: scale(1.06); }
.hero__sound svg { width: 19px; height: 19px; display: block; }
.hero__sound .hero__sound-on { display: none; }
.hero__sound[aria-pressed="true"] .hero__sound-off { display: none; }
.hero__sound[aria-pressed="true"] .hero__sound-on  { display: block; }

/* Hidden until the video is actually playing — a mute button over a static
   poster is a control for nothing. */
.hero__video-wrap:not([data-playing="true"]) .hero__sound { opacity: 0; pointer-events: none; }
.hero__video-wrap[data-playing="true"] .hero__sound { opacity: 1; transition: opacity .4s var(--ease); }

/* Reduced motion: the poster stays, the video never starts, and the control
   becomes a play button the visitor opts into. */
@media (prefers-reduced-motion: reduce) {
  .hero__video-wrap[data-playing="true"] .hero__sound { opacity: 1; }
}