/* =====================================================================
   PILS - Website mockup stylesheet
   Design tokens + components. One accent (crimson), one radius system,
   one type system. Built to map cleanly onto Elementor Pro containers.
   Brand source of truth: Logo V7 + Homepage-Styling.png
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Brand palette (rose / crimson family - single accent locked) */
  --crimson:      #c0264b;   /* primary accent */
  --crimson-600:  #a81f42;   /* hover / active */
  --burgundy:     #8a1c31;   /* deep brand - dark bands, strong text */
  --burgundy-900: #6d1526;
  --pink:         #f173ac;   /* soft brand tint */
  --pink-300:     #f7a6c8;
  --pink-100:     #f9c6da;

  /* Warm neutrals (not clinical white) */
  --rose-50:  #fdf3f6;       /* page tint */
  --rose-100: #fbe9ef;       /* card / band tint */
  --rose-150: #f7dde7;
  --ink:      #2a1a20;       /* near-black warm - headings/body */
  --ink-700:  #4b3841;
  --muted:    #6c565e;       /* secondary text (AA on white) */
  --line:     #efdbe3;       /* hairline on light */
  --line-2:   #e7ccd6;
  --white:    #ffffff;

  /* Typography */
  --font-display: "Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.4rem, 1.4rem + 3.4vw, 3.85rem);
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h4: 1.2rem;
  --fs-body: 1.125rem;       /* 18px ideal (per brand accessibility spec) */
  --fs-sm: 0.95rem;
  --fs-xs: 0.82rem;
  --lh-body: 1.62;
  --lh-tight: 1.12;

  /* Spacing (8px base) */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 2.5rem;   --space-8: 3rem;    --space-10: 4rem;
  --space-12: 5rem;    --space-16: 7rem;
  --section-y: clamp(3.5rem, 2rem + 5vw, 6rem);
  --maxw: 1200px;
  --maxw-text: 68ch;

  /* Radii (rule: cards/media 20px - inputs/small 12px - buttons/tags pill) */
  --radius-card: 20px;
  --radius-lg: 28px;
  --radius-input: 12px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Shadows (tinted to brand hue - never pure black) */
  --shadow-sm: 0 1px 2px rgba(138,28,49,.05), 0 2px 6px rgba(138,28,49,.05);
  --shadow-md: 0 6px 20px rgba(138,28,49,.09);
  --shadow-lg: 0 20px 55px rgba(138,28,49,.15);
  --focus: 0 0 0 3px rgba(192,38,75,.4);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--crimson); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
ul[role="list"] { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { text-wrap: pretty; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--crimson); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------
   3. LAYOUT HELPERS
   --------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; }
.section { padding-block: var(--section-y); }
/* Section rhythm: two plain (untinted) sections in a row would stack 2x vertical
   padding into one oversized void. Collapse the seam so adjacent plain sections read
   as a single, consistent gap. Tint/burgundy bands keep their full padding (the color
   change earns the breathing room). */
.section:not([class*="--"]) + .section:not([class*="--"]) { padding-top: 0; }
/* The pre-footer help CTA is a self-contained band; a full section-gap above it on top
   of the previous section's bottom padding reads as a dead void. One gap is enough.
   Extra bottom clearance so the footer hotline band (which straddles up into this section)
   keeps comfortable air between the two crimson blocks instead of nearly touching. */
.section:has(.help-strip) { padding-top: 0; padding-bottom: calc(var(--section-y) + 3rem); }
.section--tint { background: var(--rose-50); }
.section--tint-strong { background: var(--rose-100); }
.section--burgundy { background: var(--burgundy); color: #fff; }
.section--burgundy h1, .section--burgundy h2, .section--burgundy h3 { color: #fff; }
.stack > * + * { margin-top: var(--space-4); }
.measure { max-width: var(--maxw-text); }
.center { text-align: center; margin-inline: auto; }

.grid { display: grid; gap: 1.5rem; counter-reset: step; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* Section heading block */
.section-head { max-width: 62ch; margin-bottom: 2.5rem; }
.section-head.center { margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-body); font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 1rem;
  background: rgba(192,38,75,.09); border: 1px solid rgba(192,38,75,.18);
  padding: .42rem .85rem; border-radius: var(--radius-pill);
}
.section--burgundy .eyebrow { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.28); color: #fff; }
.section-head p { color: var(--muted); margin-top: .85rem; font-size: 1.075rem; }

/* ---------------------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .8rem 1.5rem;
  font-weight: 600; font-size: 1rem; line-height: 1;
  border-radius: var(--radius-pill); border: 1.5px solid transparent;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icon { width: 1.15em; height: 1.15em; }

.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: var(--crimson-600); transform: translateY(-2px); }

.btn-secondary { background: #fff; color: var(--crimson); border-color: var(--pink-100); }
.btn-secondary:hover { border-color: var(--crimson); background: var(--rose-50); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--crimson); padding-inline: .4rem; min-height: 40px; }
.btn-ghost:hover { color: var(--crimson-600); text-decoration: underline; }

.btn-white { background: #fff; color: var(--crimson); }
.btn-white:hover { background: var(--rose-100); transform: translateY(-2px); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

.btn-lg { min-height: 56px; padding: 1rem 1.9rem; font-size: 1.075rem; }
.btn-block { width: 100%; }

/* Text link with arrow */
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--crimson); }
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover svg { transform: translateX(4px); }

/* Tag / pill label */
.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--crimson); background: var(--rose-100);
  padding: .35rem .7rem; border-radius: var(--radius-pill);
}
.tag--solid { background: var(--crimson); color: #fff; }

/* ---------------------------------------------------------------------
   5. HEADER / NAVIGATION
   --------------------------------------------------------------------- */
.topbar { background: var(--burgundy); color: #fff; font-size: .85rem; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 40px; }
.topbar a { color: #fff; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--pink-300); text-decoration: none; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 1.4rem; }
.topbar .sep { opacity: .4; }
@media (max-width: 780px) { .topbar { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.brand { flex-shrink: 0; display: inline-flex; align-items: center; }
.brand img { height: 46px; width: auto; }
.brand:hover { text-decoration: none; }

.main-nav { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.main-nav a {
  color: var(--ink); font-weight: 600; font-size: .95rem; white-space: nowrap;
  padding: .5rem .62rem; border-radius: var(--radius-sm); position: relative;
}
.main-nav a:hover { color: var(--crimson); background: var(--rose-50); text-decoration: none; }
.main-nav a[aria-current="page"] { color: var(--crimson); }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .15rem;
  height: 2px; background: var(--crimson); border-radius: 2px;
}

/* Nav dropdowns */
.main-nav .has-dropdown { position: relative; display: inline-flex; }
.main-nav .nav-parent {
  color: var(--ink); font-weight: 600; font-size: .95rem; white-space: nowrap;
  padding: .5rem .62rem; border-radius: var(--radius-sm);
  background: transparent; border: none; display: inline-flex; align-items: center; gap: .3rem;
}
.main-nav .nav-parent .caret { color: var(--muted); transition: transform .2s var(--ease); }
.main-nav .nav-parent.is-active { color: var(--crimson); }
.main-nav .has-dropdown:hover .nav-parent,
.main-nav .has-dropdown:focus-within .nav-parent { color: var(--crimson); background: var(--rose-50); }
.main-nav .has-dropdown:hover .caret,
.main-nav .has-dropdown:focus-within .caret { transform: rotate(180deg); color: var(--crimson); }
.nav-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 218px;
  display: grid; gap: 2px; padding: .4rem; margin: 0;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-input);
  box-shadow: var(--shadow-md); z-index: 120;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav-menu::before { content: ""; position: absolute; top: -8px; left: 0; right: 0; height: 8px; }
.main-nav .has-dropdown:hover .nav-menu,
.main-nav .has-dropdown:focus-within .nav-menu { opacity: 1; visibility: visible; transform: none; }
.nav-menu a {
  display: block; padding: .55rem .6rem; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.nav-menu a::after { display: none; }
.nav-menu a:hover { background: var(--rose-50); color: var(--crimson); text-decoration: none; }
.nav-menu a[aria-current="page"] { color: var(--crimson); background: var(--rose-50); }

.header-actions { display: flex; align-items: center; gap: .6rem; }
/* Language dropdown (flag selector) */
.lang-select { position: relative; }
.lang-current {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #fff; border: 1px solid var(--line-2); color: var(--ink);
  border-radius: var(--radius-pill); padding: .4rem .6rem .4rem .55rem;
  font-size: .82rem; font-weight: 700; min-height: 40px;
}
.lang-current:hover { border-color: var(--crimson); }
.lang-current .lang-chev { color: var(--muted); transition: transform .2s var(--ease); }
.lang-current[aria-expanded="true"] .lang-chev { transform: rotate(180deg); }
.flag {
  width: 20px; height: 14px; border-radius: 3px; flex: none;
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.flag-fr { background-image: linear-gradient(90deg, #0055A4 0 33.33%, #fff 33.33% 66.66%, #EF4135 66.66% 100%); }
.flag-gb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='u'%3E%3Cpath d='M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z'/%3E%3C/clipPath%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' clip-path='url(%23u)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 v30 M0,15 h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 120;
  list-style: none; margin: 0; padding: .35rem; min-width: 172px;
  background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-input);
  box-shadow: var(--shadow-md); display: grid; gap: 2px;
}
.lang-menu li { margin: 0; }
.lang-menu button {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  background: transparent; border: none; text-align: left;
  padding: .55rem .6rem; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 600; color: var(--ink);
}
.lang-menu button:hover { background: var(--rose-50); color: var(--crimson); }
.lang-menu button[aria-selected="true"] { color: var(--crimson); }
.lang-menu button[aria-selected="true"]::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--crimson); }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-pill); border: 1px solid var(--line-2); background: #fff; color: var(--ink);
}
.icon-btn:hover { border-color: var(--crimson); color: var(--crimson); }

.nav-toggle { display: none; }

@media (max-width: 1040px) {
  .main-nav, .header-actions .btn, .header-actions .lang-select { display: none; }
  /* With the nav + actions hidden, push the whole actions cluster (just the toggle now)
     to the far right — margin-left:auto on the lone toggle inside it has nothing to push. */
  .header-actions { margin-left: auto; }
  .nav-toggle { display: inline-grid; }
}

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.drawer[data-open="true"] { visibility: visible; }
.drawer-overlay { position: absolute; inset: 0; background: rgba(42,26,32,.5); opacity: 0; transition: opacity .3s var(--ease); }
.drawer[data-open="true"] .drawer-overlay { opacity: 1; }
.drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 360px);
  background: #fff; box-shadow: var(--shadow-lg); padding: 1.25rem;
  transform: translateX(100%); transition: transform .3s var(--ease); overflow-y: auto;
  display: flex; flex-direction: column; gap: .35rem;
}
.drawer[data-open="true"] .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.drawer-panel nav a {
  display: block; padding: .85rem .5rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line); border-radius: 0;
}
.drawer-panel nav a:hover { color: var(--crimson); text-decoration: none; }
.drawer-cta { margin-top: 1rem; display: grid; gap: .6rem; }
.drawer .lang-select { margin-top: 1rem; align-self: flex-start; }
/* The drawer panel clips horizontal overflow (overflow-y:auto), so align the
   menu to the button's left edge to keep it inside the panel. */
.drawer .lang-menu { right: auto; left: 0; }

/* ---------------------------------------------------------------------
   6. MOBILE FIXED SUPPORT BAR
   --------------------------------------------------------------------- */
.support-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: none; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: #fff; border-top: 1px solid var(--line-2);
  box-shadow: 0 -6px 20px rgba(138,28,49,.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.support-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  padding: .55rem .25rem; color: var(--ink); font-size: .7rem; font-weight: 600; min-height: 60px;
}
.support-bar a:hover { text-decoration: none; color: var(--crimson); }
.support-bar a svg { width: 22px; height: 22px; }
.support-bar a.is-primary { color: var(--crimson); }
.support-bar a + a { border-left: 1px solid var(--line); }
@media (max-width: 780px) {
  .support-bar { display: grid; }
  body { padding-bottom: 68px; }
}

/* ---------------------------------------------------------------------
   7. HERO
   --------------------------------------------------------------------- */
.hero { background: linear-gradient(180deg, var(--rose-50), #fff); overflow: hidden; }
.hero .container {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4rem);
  align-items: center; padding-block: clamp(2.5rem, 4vw, 4.5rem);
}
.hero__content { max-width: 34rem; }
.hero h1 { font-size: var(--fs-display); margin-top: 1rem; }
.hero__lead { font-size: 1.2rem; color: var(--ink-700); margin-top: 1.15rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero__media { position: relative; }
.hero__media .photo { border-radius: var(--radius-lg); aspect-ratio: 4 / 4.4; box-shadow: var(--shadow-lg); }
.hero__badge {
  position: absolute; left: -1.4rem; bottom: 1.6rem; background: #fff;
  border-radius: var(--radius-card); box-shadow: var(--shadow-md); padding: .9rem 1.1rem;
  display: flex; align-items: center; gap: .75rem; max-width: 15rem;
}
.hero__badge .num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--crimson); line-height: 1; }
.hero__badge small { color: var(--muted); font-size: .82rem; }
@media (max-width: 860px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__media .photo { aspect-ratio: 16 / 11; }
  .hero__badge { left: auto; right: 1rem; }
}

/* ---------------------------------------------------------------------
   8. DUOTONE PHOTO TREATMENT (cohesive brand imagery)
   Grayscale base + crimson gradient in "lighten" = crimson-shadow duotone.
   --------------------------------------------------------------------- */
.photo { position: relative; overflow: hidden; background: var(--rose-100); border-radius: var(--radius-card); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* Photos now render in natural full colour (duotone treatment removed). */
.photo--flat { background: none; }

/* ---------------------------------------------------------------------
   9. CARDS
   --------------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  display: flex; flex-direction: column; gap: .7rem; height: 100%;
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink-100); text-decoration: none; }
.card__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--rose-100); color: var(--crimson); margin-bottom: .3rem;
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: 1.25rem; }
.card p { color: var(--muted); font-size: 1rem; }
.card .card__foot { margin-top: auto; padding-top: .4rem; }

/* Task card (homepage "choisissez votre besoin") */
.task-card { text-align: left; }
.task-card--feature { background: var(--burgundy); border-color: var(--burgundy); color: #fff; }
.task-card--feature h3 { color: #fff; }
.task-card--feature p { color: rgba(255,255,255,.82); }
.task-card--feature .card__icon { background: rgba(255,255,255,.14); color: #fff; }

/* News card */
.news-card { padding: 0; overflow: hidden; }
.news-card .photo { border-radius: 0; aspect-ratio: 16 / 10; }
.news-card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.news-card__body h3 { font-size: 1.2rem; }

/* Report card */
.report-card { flex-direction: row; align-items: flex-start; gap: 1.1rem; }
.report-card .doc-ico {
  flex-shrink: 0; width: 52px; height: 62px; border-radius: 8px; background: var(--rose-100);
  display: grid; place-items: center; color: var(--crimson);
}
.report-card__meta { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
/* On very narrow phones the row (icon + no-wrap download button) can't fit; stack it. */
@media (max-width: 380px) { .report-card { flex-direction: column; } }

/* Contact / info tiles */
.tile {
  display: flex; gap: 1rem; align-items: flex-start; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.3rem 1.4rem;
}
.tile .tile__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--rose-100); color: var(--crimson); display: grid; place-items: center; }
.tile h3 { font-size: 1.1rem; }
.tile p, .tile a { font-size: 1rem; }
.tile .muted { color: var(--muted); }

/* ---------------------------------------------------------------------
   10. STATS BAND / DONATION BAND
   --------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-card); padding: 1.4rem; text-align: center; }
.stat .num { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; line-height: 1; }
.stat .label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin-top: .5rem; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, 1fr); } }
/* Homepage donation band: 2x2 by design, but collapse to one column on very narrow phones
   (two tracks can't hold their min-content below ~380px and would force horizontal scroll). */
.stats--2col { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 380px) { .stats--2col { grid-template-columns: 1fr; } }

.support-band .container { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 860px) { .support-band .container { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   11. REASSURANCE / QUOTE / PILLARS
   --------------------------------------------------------------------- */
.quote-block {
  background: var(--rose-100); border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3.5rem);
  position: relative; text-align: center; max-width: 52rem; margin-inline: auto;
}
.quote-block blockquote { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.35; color: var(--burgundy); font-weight: 600; }
.quote-block cite { display: block; margin-top: 1.1rem; font-style: normal; font-weight: 700; color: var(--crimson); font-size: .95rem; }
.quote-mark { font-family: var(--font-display); font-size: 4rem; color: var(--pink-300); line-height: .5; height: 1.5rem; display: block; }

.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.pillar { text-align: center; padding: 1rem; }
.pillar .card__icon { margin-inline: auto; width: 60px; height: 60px; border-radius: var(--radius-pill); }
.pillar h3 { font-size: 1.15rem; margin-top: .8rem; }
.pillar p { color: var(--muted); font-size: 1rem; }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; gap: 1rem; } }

/* ---------------------------------------------------------------------
   12. HELP CTA STRIP
   --------------------------------------------------------------------- */
.help-strip {
  background: linear-gradient(135deg, var(--crimson), var(--burgundy));
  color: #fff; border-radius: var(--radius-lg); padding: clamp(1.8rem, 3vw, 2.6rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.help-strip h2, .help-strip h3 { color: #fff; }
.help-strip p { color: rgba(255,255,255,.85); margin-top: .35rem; }
.help-strip__actions { display: flex; gap: .7rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   13. FORMS
   --------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-weight: 600; font-size: .95rem; color: var(--ink); }
.field .hint { font-size: .82rem; color: var(--muted); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-input);
  padding: .8rem .9rem; width: 100%; min-height: 48px; transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #7a6570; } /* 5.4:1 on white - meets WCAG AA (was #a68a94, 3.1:1) */
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--crimson); box-shadow: var(--focus); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--shadow-md); }
.privacy-note { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--muted); background: var(--rose-50); border-radius: var(--radius-sm); padding: .8rem 1rem; }
.privacy-note svg { flex-shrink: 0; color: var(--crimson); width: 20px; height: 20px; margin-top: 1px; }

/* Newsletter */
.newsletter { display: grid; grid-template-columns: 1.05fr 1fr; background: var(--burgundy); border-radius: var(--radius-lg); overflow: hidden; color: #fff; }
.newsletter__media { position: relative; min-height: 340px; background: var(--rose-100); }
.newsletter__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.newsletter__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(109,21,38,.35) 0%, rgba(138,28,49,.15) 55%, transparent 100%); }
.newsletter__body { padding: clamp(2rem, 4vw, 3.25rem); }
.newsletter__body h2 { color: #fff; }
.newsletter__body p { color: rgba(255,255,255,.9); }
.newsletter__body .fine { color: rgba(255,255,255,.72); font-size: .82rem; }
.newsletter .eyebrow { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); color: #fff; }
.newsletter form { display: flex; gap: .6rem; margin-top: 1.4rem; max-width: 32rem; }
.newsletter input { flex: 1; }
.newsletter .btn-primary { background: #fff; color: var(--crimson); }
.newsletter .btn-primary:hover { background: var(--rose-50); color: var(--crimson-600); }
@media (max-width: 760px) { .newsletter { grid-template-columns: 1fr; } .newsletter__media { min-height: 200px; } }
@media (max-width: 520px) { .newsletter form { flex-direction: column; } }

/* ---------------------------------------------------------------------
   14. DONATION MODULE
   --------------------------------------------------------------------- */
.donate-module { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--shadow-md); }
.toggle-group { display: inline-flex; background: var(--rose-100); border-radius: var(--radius-pill); padding: .3rem; margin-bottom: 1.4rem; width: 100%; }
.toggle-group button { flex: 1; border: none; background: transparent; color: var(--muted); font-weight: 700; padding: .7rem 1rem; border-radius: var(--radius-pill); transition: all .2s var(--ease); }
.toggle-group button[aria-pressed="true"] { background: #fff; color: var(--crimson); box-shadow: var(--shadow-sm); }
.amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1rem; }
.amount-opt { position: relative; }
.amount-opt input { position: absolute; opacity: 0; inset: 0; }
.amount-opt label {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-input); padding: .9rem .5rem;
  font-weight: 700; font-size: 1.15rem; cursor: pointer; transition: all .18s var(--ease);
}
.amount-opt label small { font-weight: 600; font-size: .72rem; color: var(--muted); text-transform: none; }
.amount-opt input:checked + label { border-color: var(--crimson); background: var(--rose-50); color: var(--crimson); box-shadow: var(--focus); }
.amount-opt input:focus-visible + label { box-shadow: var(--focus); }
@media (max-width: 420px) { .amount-grid { grid-template-columns: repeat(2, 1fr); } }
.pay-methods { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: .85rem; margin-top: 1rem; }
.pay-chip { border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: .3rem .6rem; font-weight: 700; font-size: .78rem; color: var(--ink); }

/* ---------------------------------------------------------------------
   15. FAQ ACCORDION
   --------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); max-width: 52rem; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem .25rem; font-family: var(--font-display); font-weight: 600; font-size: 1.12rem;
  cursor: pointer; list-style: none; color: var(--ink);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--crimson); }
.accordion summary .chev { flex-shrink: 0; width: 24px; height: 24px; color: var(--crimson); transition: transform .25s var(--ease); }
.accordion details[open] summary .chev { transform: rotate(45deg); }
.accordion .acc-body { padding: 0 .25rem 1.3rem; color: var(--muted); }
.accordion .acc-body p + p { margin-top: .8rem; }

/* ---------------------------------------------------------------------
   16. PAGE HERO (interior pages)
   --------------------------------------------------------------------- */
.page-hero {
  position: relative; padding: clamp(2.75rem, 3.5vw, 4.25rem) 0 clamp(2rem, 2.5vw, 3rem);
  background-color: var(--burgundy);
  background-image:
    linear-gradient(115deg, rgba(109,21,38,.95) 0%, rgba(138,28,49,.88) 42%, rgba(192,38,75,.7) 100%),
    url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1600&q=70");
  background-size: cover; background-position: center; color: #fff;
}
.page-hero h1 { color: #fff; font-size: var(--fs-h1); margin-top: .8rem; max-width: 20ch; }
.page-hero__lead { font-size: 1.2rem; color: rgba(255,255,255,.9); margin-top: 1rem; max-width: 60ch; }
.page-hero .eyebrow { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.32); color: #fff; }
/* Tie the first content block closer to the photographic hero (consistent site-wide). */
.page-hero + .section { padding-top: clamp(2rem, 3vw, 2.75rem); }
.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.78); display: flex; gap: .5rem; align-items: center; }
.breadcrumb a { color: rgba(255,255,255,.78); }
.breadcrumb a:hover { color: #fff; }

/* Contact route mega tiles */
.contact-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.8rem; }
@media (max-width: 820px) { .contact-hero { grid-template-columns: 1fr; } }
.contact-hero .tile { flex-direction: column; }
.contact-hero .tile a.big { font-size: 1.5rem; font-family: var(--font-display); font-weight: 800; color: var(--crimson); }
/* Primary contact route: quietly emphasised so 8999 reads as the default choice. */
.contact-hero .tile--primary { border-color: var(--crimson); background: var(--rose-50); position: relative; }
/* Badge floats in the top-right corner (out of flow) so the icon still top-aligns with the other tiles. */
.contact-hero .tile--primary .tag { position: absolute; top: 1.3rem; right: 1.4rem; margin: 0; }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 1.2rem; }
.step { display: flex; gap: 1.1rem; align-items: flex-start; }
.step__num { counter-increment: step; flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--crimson); color: #fff; font-family: var(--font-display); font-weight: 800; display: grid; place-items: center; }
.step__num::before { content: counter(step); }
.step h3 { font-size: 1.15rem; }
.step p { color: var(--muted); margin-top: .2rem; }

/* Article body */
.article { max-width: 44rem; }
.article h2 { margin-top: 2.2rem; }
.article h3 { margin-top: 1.6rem; }
.article p, .article li { color: var(--ink-700); }
.article p { margin-top: 1rem; }
.article ul { margin-top: 1rem; padding-left: 1.2rem; display: grid; gap: .5rem; }
.article ul li::marker { color: var(--crimson); }
.callout { background: var(--rose-50); border-left: 3px solid var(--crimson); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.1rem 1.3rem; margin-top: 1.5rem; }
.callout strong { color: var(--burgundy); }

.toc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 1.3rem 1.4rem; position: sticky; top: 92px; }
.toc h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .7rem; }
.toc a { display: block; padding: .35rem 0; color: var(--ink-700); font-size: .95rem; font-weight: 500; }
.toc a:hover { color: var(--crimson); text-decoration: none; }
.article-layout { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; align-items: start; }
@media (max-width: 900px) { .article-layout { grid-template-columns: 1fr; } .toc { display: none; } }

/* ---------------------------------------------------------------------
   17. FOOTER
   --------------------------------------------------------------------- */
.site-footer { background: var(--rose-50); border-top: 1px solid var(--line); padding-top: clamp(3rem, 5vw, 4.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer-brand img { height: 52px; margin-bottom: 1rem; }
.footer-brand p { color: var(--muted); font-size: .95rem; max-width: 26ch; }
.footer-col h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; color: var(--burgundy); margin-bottom: 1rem; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer-col a { color: var(--ink-700); font-size: .96rem; }
.footer-col a:hover { color: var(--crimson); }
.footer-contact li { display: flex; gap: .55rem; align-items: flex-start; color: var(--ink-700); font-size: .96rem; }
.footer-contact svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--crimson); margin-top: 3px; }
/* Footer hotline: a full-width filled crimson band across the top of the footer, so 8999
   reads as loudly as the top bar's band. Horizontal on desktop, stacks on narrow phones. */
.footer-hotline { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap;
  background: var(--crimson); color: #fff; border-radius: var(--radius-lg);
  padding: 1.4rem clamp(1.4rem, 3vw, 2.2rem);
  /* Lift the band so it straddles the seam between the section above and the footer,
     sitting half in each. z-index keeps its shadow above both. */
  position: relative; z-index: 1;
  margin-top: clamp(-7.5rem, -9vw, -4.5rem); margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
  box-shadow: 0 18px 38px -16px rgba(192,38,75,.55); }
.footer-hotline:hover { color: #fff; text-decoration: none; }
.footer-hotline__label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.footer-hotline__meta { display: block; font-size: .9rem; color: rgba(255,255,255,.85); margin-top: .2rem; }
.footer-hotline__num { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 800; font-size: 2.9rem; line-height: 1; letter-spacing: -.02em; }
.footer-hotline__num svg { width: 2rem; height: 2rem; }
@media (max-width: 480px) { .footer-hotline__num { font-size: 2.3rem; } }
.social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.social a { width: 40px; height: 40px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--crimson); }
.social a:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 3rem; padding-block: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.footer-bottom nav { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.footer-bottom a { color: var(--muted); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   18. UTIL / MOTION
   --------------------------------------------------------------------- */
.text-muted { color: var(--muted); }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: .5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 2rem; }
.mb-6 { margin-bottom: 2rem; }
.flex { display: flex; } .items-center { align-items: center; } .gap-3 { gap: .75rem; } .wrap { flex-wrap: wrap; }
.hidden { display: none; }

/* Fail-safe: content is visible without JS; only .js pages animate it in. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .card--link:hover { transform: none !important; }
}

/* Design-kit specific */
.swatch { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.swatch .chip { height: 96px; }
.swatch .meta { padding: .9rem 1rem; font-size: .85rem; }
.swatch .meta strong { display: block; font-size: .98rem; margin-bottom: .3rem; }
.swatch .meta code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .8rem; color: var(--muted); display: block; }
.kit-section { border-top: 1px solid var(--line); padding-top: 2.5rem; margin-top: 2.5rem; }
.type-row { display: flex; align-items: baseline; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.type-row .type-meta { font-size: .8rem; color: var(--muted); font-family: ui-monospace, monospace; min-width: 150px; }
.kit-demo { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; padding: 1.5rem; background: var(--rose-50); border-radius: var(--radius-card); }