/* =========================================================================
   BAS Group: homepage stylesheet (shared by NL / EN / FR)
   Structure: 1 tokens · 2 base · 3 layout · 4 components · 5 sections
              6 responsive. See HANDOFF.md.
   ========================================================================= */

/* 1. TOKENS ------------------------------------------------------------- */
:root{
  /* colour */
  --c-bg:#0D0D14; --c-panel:#17172A; --c-bone:#F4F1EA; --c-ink:#0D0D14;
  --c-ink-soft:#3C3A4E; --c-coral:#FF5A36; --c-violet:#6C4BFF; --c-violet-deep:#3A23B8;
  --c-violet-light:#8F7BFF; --c-lilac:#A7A3C2; --c-lilac-light:#EDEAFF;
  --c-line:rgba(255,255,255,.1); --c-line-strong:rgba(244,241,234,.16);
  --c-outline:rgba(244,241,234,.3); --c-header:rgba(13,13,20,.85);
  --c-glass:rgba(23,23,42,.6); --c-hairline:rgba(244,241,234,.12);

  /* type families */
  --ff-display:'Bricolage Grotesque',system-ui,sans-serif;
  --ff-body:Inter,system-ui,sans-serif;

  /* type scale: fluid on width AND height so every section fits one screen */
  --fs-display-xl:clamp(2rem,min(5.2vw,9vh),4.25rem);   /* hero h1 */
  --fs-display-xl-long:clamp(2rem,min(4.3vw,7.4vh),3.375rem); /* hero h1 for languages with a longer one-line third line (EN/FR) */
  --fs-h1-page:clamp(2rem,min(4.2vw,7.2vh),3.625rem); /* subpage h1: one step above --fs-h2, below --fs-display-xl */
  --fs-display-l:clamp(2.25rem,min(5.4vw,9vh),4.75rem); /* closing h2 */
  --fs-h2:clamp(1.875rem,min(3.9vw,6.6vh),3.375rem);    /* section titles */
  --fs-quote:clamp(1.75rem,min(2.6vw,5vh),2.5rem);      /* pull quote */
  --fs-h3-l:clamp(1.5rem,3.8vh,2rem);                   /* card titles */
  --fs-num:clamp(1.875rem,5vh,2.75rem);                 /* step numbers */
  --fs-num-l:clamp(2.5rem,5.5vh,3rem);                  /* problem points 01–03 */
  --fs-point:clamp(1.35rem,2.9vh,1.5rem);               /* problem point titles */
  --fs-h3:clamp(1.1875rem,2.8vh,1.375rem);              /* list/step titles */
  --fs-lead:clamp(1rem,2.4vh,1.1875rem);
  --fs-question:clamp(1rem,2.4vh,1.1875rem);
  --fs-body:clamp(.9375rem,2.2vh,1.0625rem);
  --fs-body-l:1.0625rem;
  --fs-small:.9375rem;
  --fs-xs:.875rem;
  --fs-eyebrow:.75rem;
  --fs-nav:.875rem;
  --fs-logo:1.5rem;
  --fs-menu:clamp(1.75rem,6vw,2.5rem);

  /* line heights (+ cap-offset constants per font/line-height, see HANDOFF) */
  --lh-display:1.02; --lh-quote:1.12; --lh-title:1.2; --lh-question:1.25; --lh-body:1.6; --lh-compact:1.5;
  --k-display:.18; --k-body:.435; --k-num:.17;

  /* spacing */
  --section-pad:clamp(64px,11vh,112px);
  --gap-xs:8px;
  --gap-s:clamp(12px,2vh,18px);     /* heading → lead */
  --gap-m:clamp(24px,4vh,40px);     /* intro → content block, content → action */
  --gap-col:clamp(40px,5vw,80px);   /* column gutter in split layouts */
  --gap-grid:20px;                  /* gutter between cards / list items */
  --gutter:32px;                    /* container side padding */
  --panel-inset:16px;               /* panel distance from viewport edge */
  --gap-point:clamp(16px,2.6vh,24px); /* between stacked points */
  --num-col:4.5rem;
  --card-pad:clamp(24px,3.6vh,34px);
  --question-pad:clamp(14px,2.4vh,20px);
  --header-h:80px;
  --tap:44px;                       /* minimum tap target */
  --menu-max:560px;                 /* mobile menu content width */

  /* shape & size */
  --radius-l:40px; --radius-m:24px; --radius-card:20px; --radius-pill:999px;
  --border:1px; --rule:5px;
  --node:14px; --icon:40px; --icon-s:32px;
  --max-w:1240px; --max-w-narrow:900px;
  --measure:60ch; --measure-lead:62ch; --measure-title:22ch; --measure-closing:32ch;
  --aside-w:clamp(360px,30vw,410px); --aside-w-page:clamp(300px,24vw,340px); --avatar:44px;
}

/* 2. BASE ---------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-body);background:var(--c-bg);color:var(--c-bone);line-height:var(--lh-body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--ff-display);font-weight:800;letter-spacing:-.03em;line-height:var(--lh-display);text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--c-violet-light);outline-offset:3px}

/* 3. LAYOUT -------------------------------------------------------------- */
.container{position:relative;max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter)}
.container--narrow{max-width:var(--max-w-narrow)}
.section{position:relative;padding:var(--section-pad) 0;scroll-margin-top:var(--header-h)}
.section--panel{margin:0 var(--panel-inset);border-radius:var(--radius-l)}
.section--light{background:var(--c-bone);color:var(--c-ink)}
.section--accent{background:linear-gradient(120deg,var(--c-violet),var(--c-violet-deep))}
.section--center{text-align:center}
.section__title{font-size:var(--fs-h2);max-width:var(--measure-title)}
.section__title--wide{max-width:none}
.section__head > * + *{margin-top:var(--gap-s)}
.section__head + *{margin-top:var(--gap-m)}
.section__title + *{margin-top:var(--gap-m)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);align-items:start}
.split--3-2{grid-template-columns:3fr 2fr}
.split--quote{align-items:center}
.split--cap-align{grid-template-columns:1.2fr 1fr;align-items:center} /* heading column fits a 3-line display title */
.stack > * + *{margin-top:var(--gap-s)}

/* glow: decorative coral→violet blur */
.has-glow{overflow:hidden}
.has-glow::before{content:"";position:absolute;width:min(600px,70vh);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,var(--c-coral),var(--c-violet) 60%,transparent 72%);
  filter:blur(40px);opacity:.45;top:-22vh;right:-10vw;pointer-events:none;animation:glow-drift 14s ease-in-out infinite alternate}
.section--center.has-glow::before{top:50%;right:auto;left:50%;translate:-50% -50%;opacity:.32;animation:none}
@keyframes glow-drift{to{transform:translate(-80px,60px) scale(1.08)}}

/* 4. COMPONENTS ---------------------------------------------------------- */
.lead{font-size:var(--fs-lead);color:var(--c-lilac);max-width:var(--measure-lead)}
.body-text{font-size:var(--fs-body);max-width:var(--measure)}
.body-text > * + *{margin-top:var(--gap-s)}
.microcopy{font-size:var(--fs-xs);color:var(--c-lilac)}
.line{display:block}
.phrase{display:inline-block}
.highlight{background:linear-gradient(transparent 62%,var(--c-violet) 62%,var(--c-violet) 92%,transparent 92%);padding:0 .06em}

.btn{display:inline-flex;align-items:center;white-space:nowrap;background:var(--c-coral);color:var(--c-ink);border:0;font-family:inherit;cursor:pointer;
  padding:15px 28px;border-radius:var(--radius-pill);font-weight:600;font-size:var(--fs-small);text-decoration:none;
  transition:transform .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,90,54,.35)}
.btn--s{padding:11px 20px;font-size:.8125rem}
.btn--l{padding:18px 34px;font-size:1rem}

.text-link{font-weight:600;text-decoration:none;border-bottom:2px solid var(--c-coral)}
.text-link:hover{color:var(--c-coral);border-bottom-color:transparent}

/* point list: stacked numbered points (not clickable: no card, no hover) */
.point-list{counter-reset:item}
.point{display:grid;grid-template-columns:var(--num-col) 1fr;column-gap:var(--gap-s);align-items:start;padding:var(--gap-point) 0}
.point:first-child{padding-top:0}
.point:last-child{padding-bottom:0}
.point + .point{border-top:var(--border) solid var(--c-hairline)}
.point::before{counter-increment:item;content:counter(item,decimal-leading-zero);grid-row:span 2;font:800 var(--fs-num-l)/1 var(--ff-display);color:var(--c-coral)}
.point__title{display:block;font:700 var(--fs-point)/var(--lh-title) var(--ff-display);letter-spacing:-.01em}
.point__text{font-size:var(--fs-body-l);color:var(--c-lilac);margin-top:var(--gap-xs)}

/* clickable cards: border, lift, arrow */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--gap-grid)}
.card{display:grid;grid-row:span 3;grid-template-rows:subgrid;background:var(--c-panel);border:var(--border) solid var(--c-line-strong);
  border-radius:var(--radius-m);padding:var(--card-pad);text-decoration:none;transition:transform .3s,border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-6px);border-color:var(--c-coral);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.card__title{font-size:var(--fs-h3-l);margin-bottom:var(--gap-s)}
.card__text{font-size:var(--fs-small);color:var(--c-lilac)}
.card::after{content:"→";justify-self:end;align-self:end;margin-top:var(--gap-s);width:var(--icon);height:var(--icon);border-radius:50%;
  border:var(--border) solid var(--c-outline);display:grid;place-items:center;font:500 1.125rem/1 var(--ff-body);transition:background .25s,border-color .25s,color .25s}
.card:hover::after{background:var(--c-coral);border-color:var(--c-coral);color:var(--c-ink)}

/* pull quote */
.pull-quote{font:800 var(--fs-quote)/var(--lh-quote) var(--ff-display);letter-spacing:-.02em;
  border-left:var(--rule) solid var(--c-coral);padding-left:clamp(18px,2vw,28px)}
.pull-quote__line{display:block}

/* steps: four columns on one connecting line */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--gap-grid)}
.steps::before{content:"";position:absolute;left:calc(var(--node) / 2);right:0;top:calc(var(--node) / 2 - 1px);height:2px;
  background:linear-gradient(90deg,var(--c-coral),var(--c-violet) 70%,rgba(108,75,255,.15))}
.step{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;padding-top:calc(var(--node) + var(--gap-s))}
.step::before{content:"";position:absolute;left:0;top:0;width:var(--node);height:var(--node);border-radius:50%;background:var(--c-bg);border:2px solid var(--c-coral)}
.step:nth-child(n+3)::before{border-color:var(--c-violet-light)}
.step__num{font:800 var(--fs-num)/1 var(--ff-display);color:var(--c-violet-light)}
.step__title{font-size:var(--fs-h3);letter-spacing:-.01em;line-height:var(--lh-title);margin:var(--gap-xs) 0}
.step__text{font-size:var(--fs-xs);line-height:var(--lh-compact);color:var(--c-lilac)}

/* FAQ accordion (details/summary, no JS) */
.faq__list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--gap-col);align-items:start}
.faq__item{border-bottom:var(--border) solid var(--c-line)}
.faq__item:first-child{border-top:var(--border) solid var(--c-line)}
.faq__question{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--gap-s);padding:var(--question-pad) 0;
  font:700 var(--fs-question)/var(--lh-question) var(--ff-display);letter-spacing:-.01em;cursor:pointer;list-style:none;text-wrap:balance}
.faq__question::-webkit-details-marker{display:none}
.faq__question::after{content:"+";flex:none;width:var(--icon-s);height:var(--icon-s);border-radius:50%;border:var(--border) solid rgba(255,90,54,.6);
  color:var(--c-coral);display:grid;place-items:center;font:500 1.25rem/1 var(--ff-body);transition:background .25s,color .25s}
.faq__item[open] .faq__question::after{content:"−";background:var(--c-coral);border-color:var(--c-coral);color:var(--c-ink)}
.faq__answer{font-size:var(--fs-small);color:var(--c-lilac);padding:0 calc(var(--icon-s) + 16px) var(--question-pad) 0}


/* ---- subpage components (shared by all inner pages) ---- */
.eyebrow{font:600 var(--fs-eyebrow)/1.2 var(--ff-body);letter-spacing:.14em;text-transform:uppercase;color:var(--c-coral)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.btn--ghost{background:none;color:var(--c-bone);box-shadow:inset 0 0 0 var(--border) var(--c-outline)}
.btn--ghost:hover{box-shadow:inset 0 0 0 var(--border) var(--c-bone)}
.section--light .btn--ghost{color:var(--c-ink);box-shadow:inset 0 0 0 var(--border) rgba(13,13,20,.35)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-s) var(--gap-m)}
/* split for text sections: title column + copy column, vertically centred */
.split--text{grid-template-columns:5fr 7fr;align-items:center}
.section--light .lead,.section--light .microcopy{color:var(--c-ink-soft)}
.split--center{align-items:center}
.steps--5{grid-template-columns:repeat(5,1fr)}
.faq__list--single{grid-template-columns:1fr}
.info-grid--l .info__title{font-size:var(--fs-h3-l)}
.section--accent .microcopy{color:var(--c-lilac-light)}
.section--light .stat__source,.section--light .body-text{color:var(--c-ink-soft)}
.split--top{align-items:start}
.section--flush-top{padding-top:0}
.side-card{background:var(--c-panel);border:var(--border) solid var(--c-line-strong);border-radius:var(--radius-m);padding:var(--card-pad)}
.side-card > * + *{margin-top:var(--gap-s)}
.side-card .price-line{font-size:var(--fs-h3)}
/* hero aside list (subpages): repeats real page items, no links */
.aside-list{counter-reset:aside}
.aside-list > li{display:grid;grid-template-columns:1fr;row-gap:2px;padding:var(--gap-s) 0;border-top:var(--border) solid var(--c-hairline)}
.aside-list > li:first-child{border-top:0;padding-top:0}
.aside-list > li:last-child{padding-bottom:0}
.aside-list__title{font:700 var(--fs-h3)/var(--lh-title) var(--ff-display);letter-spacing:-.01em;text-wrap:balance}
.aside-list__meta{font-size:var(--fs-xs);color:var(--c-lilac-light)}
.aside-list--num > li{grid-template-columns:2.25rem 1fr;align-items:baseline}
.aside-list--num > li::before{counter-increment:aside;content:counter(aside,decimal-leading-zero);font:800 var(--fs-small)/1 var(--ff-display);color:var(--c-coral)}
.quote-card > .eyebrow + .aside-list{margin-top:var(--gap-m)}
.offer__price-label{display:block;font:500 var(--fs-xs)/var(--lh-compact) var(--ff-body);color:var(--c-lilac);letter-spacing:0}
.offer__price-amount{display:block}
/* check list */
.check-list > li{position:relative;padding-left:28px;font-size:var(--fs-body)}
.check-list > li + li{margin-top:var(--gap-xs)}
.check-list > li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:6px;border-left:2px solid var(--c-coral);border-bottom:2px solid var(--c-coral);transform:rotate(-45deg)}
.check-list > .check-list__intro{padding-left:0;color:var(--c-lilac)}
.check-list > .check-list__intro::before{content:none}
.check-list--cols{columns:2;column-gap:var(--gap-col)}
.check-list--cols > li{break-inside:avoid}
.check-list--row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-xs) var(--gap-grid)}
.check-list--row > li + li{margin-top:0}
.col-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-m) var(--gap-col)}
/* offer cards (tracks, workshop, add-on): not clickable, rows aligned with subgrid */
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.offer{position:relative;display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:var(--gap-s);background:var(--c-panel);
  border:var(--border) solid var(--c-line-strong);border-radius:var(--radius-m);padding:var(--card-pad)}
.offer--featured{border-color:var(--c-coral);background:linear-gradient(160deg,rgba(108,75,255,.24),var(--c-panel) 60%)}
.offer__badge{position:absolute;top:var(--card-pad);right:var(--card-pad);padding:6px 12px;border-radius:var(--radius-pill);background:var(--c-coral);color:var(--c-ink);
  font:600 var(--fs-eyebrow)/1 var(--ff-body);letter-spacing:.08em;text-transform:uppercase}
.offer__num{font:800 var(--fs-num)/1 var(--ff-display);color:var(--c-violet-light)}
.offer__title{font-size:var(--fs-h3-l)}
.offer__promise{font-size:var(--fs-body-l);font-weight:500;line-height:var(--lh-compact)}
.offer__who{font-size:var(--fs-small);color:var(--c-lilac)}
.offer__body{border-top:var(--border) solid var(--c-hairline);padding-top:var(--gap-s)}
.offer__body > * + *{margin-top:var(--gap-s)}
.offer__body p,.offer .check-list > li{font-size:var(--fs-small)}
.offer__body p{color:var(--c-lilac)}
.offer__body .offer__note{font-size:var(--fs-xs)}
.offer__foot{align-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap-s) var(--gap-m);padding-top:var(--gap-s)}
.offer__price{flex-basis:100%;font:700 var(--fs-h3)/var(--lh-title) var(--ff-display);letter-spacing:-.01em}
.offer--wide{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--gap-col)}
.offer-grid + .offer--wide{margin-top:var(--gap-grid)}
.offer__content > * + *{margin-top:var(--gap-s)}
.offer--wide .offer__foot{align-self:center;flex-direction:column;align-items:flex-start;padding-top:0}
/* short titled text blocks in a grid */
.info-grid{display:grid;gap:var(--gap-m) var(--gap-col)}
.info-grid--2{grid-template-columns:repeat(2,1fr)}
.info-grid--3{grid-template-columns:repeat(3,1fr)}
.info-grid--4{grid-template-columns:repeat(4,1fr);column-gap:var(--gap-grid)}
.info{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:var(--gap-s);align-content:start;border-top:var(--border) solid var(--c-hairline);padding-top:var(--gap-s)}
.info__title{font-size:var(--fs-h3);line-height:var(--lh-title);letter-spacing:-.01em}
.info__text{font-size:var(--fs-body);color:var(--c-lilac)}
.info__text > * + *{margin-top:var(--gap-xs)}
.section--light .info{border-color:rgba(13,13,20,.15)}
.section--light .info__text{color:var(--c-ink-soft)}
/* price lines */
.price-line{font:700 var(--fs-h3-l)/var(--lh-title) var(--ff-display);letter-spacing:-.01em}
.price-line + .price-line{margin-top:var(--gap-xs)}
.price-line__amount{font-weight:800}
/* stat with source */
.stat{border-left:var(--rule) solid var(--c-coral);padding-left:clamp(18px,2vw,28px)}
.stat__num{font:800 var(--fs-display-l)/1 var(--ff-display);color:var(--c-coral)}
.stat__quote{margin-top:var(--gap-s);font-size:var(--fs-lead);line-height:var(--lh-compact)}
.stat__source{margin-top:var(--gap-s);font-size:var(--fs-xs);color:var(--c-lilac)}
/* article list (insights) */
.article-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-grid)}
.article-list > li,.article-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:var(--gap-s)}
.article-card{background:var(--c-panel);border:var(--border) solid var(--c-line-strong);border-radius:var(--radius-m);padding:var(--card-pad)}
.article-card__title{font-size:var(--fs-h3-l)}
/* long-form text (legal, privacy) */
.prose{max-width:var(--measure-lead);overflow-wrap:anywhere}
.prose > * + *{margin-top:var(--gap-s)}
.prose > h1{font-size:var(--fs-h1-page)}
.prose > h2{margin-top:var(--gap-m);font-size:var(--fs-h3-l)}
.prose > p{font-size:var(--fs-body);color:var(--c-lilac-light)}
.prose a{text-decoration-color:var(--c-coral);text-underline-offset:3px}
/* contact form (markup owned by the form handler: class names kept) */
.form-panel{background:var(--c-panel);border:var(--border) solid var(--c-line-strong);border-radius:var(--radius-m);padding:var(--card-pad)}
.contact-form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-s) var(--gap-grid)}
.contact-form > *{grid-column:1 / -1}
.contact-form > .field:nth-of-type(-n+4){grid-column:auto}
.field label{display:block;margin-bottom:6px;font-size:var(--fs-xs);font-weight:600}
.field input,.field select,.field textarea{width:100%;min-height:var(--tap);padding:11px 14px;background:var(--c-bg);color:var(--c-bone);
  border:var(--border) solid var(--c-line-strong);border-radius:12px;font:inherit;font-size:var(--fs-small)}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--c-coral)}
.field [aria-invalid="true"]{border-color:var(--c-coral)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-notice,.noscript-note,.req-note,.contact-resp,.form-gdpr{font-size:var(--fs-xs);color:var(--c-lilac)}
.contact-form .btn{justify-self:start}
.form-status:empty{display:none}
.form-status{font-size:var(--fs-small);font-weight:600}
.form-status.ok{color:var(--c-lilac-light)}
.form-status.err{color:var(--c-coral)}

/* 5. SECTIONS ------------------------------------------------------------ */
/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--c-header);backdrop-filter:blur(12px);border-bottom:var(--border) solid var(--c-line)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:24px}
.site-header__actions{display:flex;align-items:center;gap:24px}
.brand{font:800 var(--fs-logo)/1 var(--ff-display);letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:26px;font-size:var(--fs-nav);color:var(--c-lilac)}
.nav a{text-decoration:none;white-space:nowrap}.nav a:hover{color:var(--c-bone)}
.nav a[aria-current]{color:var(--c-bone);text-decoration:underline 2px var(--c-coral);text-underline-offset:8px}
.lang-switch{display:flex;gap:2px;font-size:var(--fs-eyebrow);background:var(--c-panel);border-radius:var(--radius-pill);padding:4px}
.lang-switch a{display:block;padding:4px 10px;border-radius:var(--radius-pill);text-decoration:none;color:var(--c-lilac)}
.lang-switch a[aria-current]{background:var(--c-bone);color:var(--c-ink)}
.site-header :focus-visible,.site-menu :focus-visible{outline:2px solid var(--c-coral);outline-offset:3px}

/* header / mobile menu (< 1180px) */
.nav-toggle{display:none;align-items:center;gap:10px;min-height:var(--tap);padding:0 18px;background:none;border:var(--border) solid var(--c-outline);
  border-radius:var(--radius-pill);color:var(--c-bone);font:600 var(--fs-xs)/1 var(--ff-body);text-decoration:none;cursor:pointer}
.nav-toggle:hover{border-color:var(--c-bone)}
.nav-toggle__icon{position:relative;width:18px;height:10px}
.nav-toggle__icon::before,.nav-toggle__icon::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .25s,top .25s}
.nav-toggle__icon::before{top:0}
.nav-toggle__icon::after{top:8px}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before{top:4px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after{top:4px;transform:rotate(-45deg)}

.site-menu{position:fixed;inset:0;z-index:30;height:100vh;height:100dvh;padding-top:var(--header-h);background:var(--c-bg);overflow-y:auto;overscroll-behavior:contain;
  animation:menu-in .28s ease-out}
.site-menu::before{content:"";position:fixed;width:min(520px,90vw);aspect-ratio:1;right:-25%;bottom:-20%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 40% 40%,var(--c-coral),var(--c-violet) 60%,transparent 72%);filter:blur(60px);opacity:.4}
@keyframes menu-in{from{opacity:0;transform:translateY(-12px)}}
.site-menu__inner{position:relative;display:flex;flex-direction:column;max-width:calc(var(--menu-max) + 2 * var(--gutter));
  padding:var(--gap-m) var(--gutter) calc(var(--gap-m) + env(safe-area-inset-bottom))}
.site-menu__link{display:flex;align-items:center;gap:14px;min-height:var(--tap);padding:var(--gap-s) 0;border-bottom:var(--border) solid var(--c-hairline);
  font:800 var(--fs-menu)/1.1 var(--ff-display);letter-spacing:-.02em;text-decoration:none;text-wrap:balance}
.site-menu__link:hover{color:var(--c-coral)}
.site-menu__link[aria-current]::after{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--c-coral)}
.site-menu .lang-switch{align-self:flex-start;margin:var(--gap-m) 0}
.lang-switch--l a{display:grid;place-items:center;min-width:var(--tap);min-height:var(--tap);font-size:var(--fs-xs);font-weight:600}
.btn--block{display:flex;justify-content:center;width:100%;min-height:52px}
.is-menu-open .site-header{position:fixed;inset:0 0 auto;z-index:31;background:var(--c-bg);backdrop-filter:none} /* opaque bar on top of the panel keeps the close toggle reachable */
.is-menu-open,.is-menu-open body{overflow:hidden}
.is-menu-open body{position:fixed;inset-inline:0;top:calc(var(--scroll-lock-y,0px) * -1)}

/* hero */
.hero__content > * + *{margin-top:var(--gap-s)}
.hero__content > .btn{margin-top:var(--gap-m)}
.hero__title{font-size:var(--fs-display-xl);line-height:1.04}
.hero__aside{display:none}
.hero__content > .btn-row{margin-top:var(--gap-m)}
.hero--page{padding:calc(var(--section-pad) * .6) 0 0} /* compact: the first section heading peeks in at 1440×800 and 1280×720 */
.hero--page:last-child{padding-bottom:var(--section-pad)}
.hero--page .hero__title{font-size:var(--fs-h1-page);line-height:var(--lh-display);max-width:26ch}
.hero--page .hero__content .lead{max-width:var(--measure-lead);text-wrap:pretty}

/* quote card: decorative example post (glass on the glow) */
.quote-card{background:var(--c-glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:var(--border) solid var(--c-hairline);
  border-radius:var(--radius-card);padding:var(--card-pad)}
.quote-card > * + *{margin-top:var(--gap-s)}
.quote-card__author{display:flex;align-items:center;gap:12px}
.quote-card__avatar{flex:none;width:var(--avatar);height:var(--avatar);border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--c-coral),var(--c-violet));font:700 var(--fs-xs)/1 var(--ff-display);letter-spacing:.02em}
.quote-card__name{font-size:var(--fs-xs);font-weight:600;line-height:var(--lh-title)}
.quote-card__text{font-size:var(--fs-small);color:var(--c-lilac-light)}
  fill:rgba(244,241,234,.1);stroke:none}

/* light panel / accent panel colour adjustments */
.section--light .body-text{color:var(--c-ink-soft)}
.section--accent .body-text{color:var(--c-lilac-light)}
.split__aside--rule{border-left:var(--border) solid var(--c-violet-light);padding-left:var(--gap-col)}
/* side copy cap-top = heading cap-top */
.split--cap-align .split__aside{margin-top:0}

/* section action link */
.section__action{margin-top:var(--gap-m)}

/* closing */
.closing__title + .lead{margin-top:var(--gap-s)}
.closing__title{font-size:var(--fs-display-l);max-width:var(--measure-closing);margin-inline:auto}
.section--center .lead{margin-inline:auto}
.closing .btn{margin-top:var(--gap-m)}
.closing .microcopy{margin-top:var(--gap-m)}
.closing .eyebrow + .closing__title{margin-top:var(--gap-s)}

/* footer */
.site-footer{border-top:var(--border) solid var(--c-line);color:var(--c-lilac);font-size:.8125rem;padding:56px 0 40px}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--gutter)}
.site-footer li + li,.site-footer p + p{margin-top:6px}
.site-footer a{text-decoration:none}
.footer__legal{margin-top:var(--gap-s);font-size:.8125rem;color:var(--c-lilac)}
.footer__legal span{display:block}
.footer__legal span + span{margin-top:4px}

/* 6. RESPONSIVE ---------------------------------------------------------- */
/* no subgrid: equalise title rows instead */
@supports not (grid-template-rows:subgrid){
  .card,.step{display:flex;flex-direction:column}
  .card__title,.step__title{min-height:2lh}
  .card::after{margin-top:auto}
}
/* ≥1024: pull-quote sentences on one line; problem section in two columns */
@media (max-width:1179.98px) and (min-width:901px){
  .info-grid--4{grid-template-columns:repeat(2,1fr)}
  .check-list--row{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .hero--page > .container:has(> .hero__aside){display:grid;grid-template-columns:minmax(0,1fr) var(--aside-w-page);gap:var(--gap-m);align-items:center}
  .hero--page .hero__aside{display:block}
  .pull-quote__line{white-space:nowrap}
  .split--list{display:grid;grid-template-columns:5fr 6fr;gap:var(--gap-col);align-items:center}
  /* first number cap-top = heading cap-top */
}
/* ≥1180: hero becomes text column + decorative quote card (vertically centred) */
@media (min-width:1180px){
  .hero > .container{display:grid;grid-template-columns:minmax(0,1fr) var(--aside-w);gap:var(--gap-col);align-items:center}
  .hero__aside{display:block;pointer-events:none}
  .keep-line{white-space:nowrap}
  .hero__title--long{font-size:var(--fs-display-xl-long)}
  .hero--page > .container{display:block}
}
/* ≤1180: nav collapses */
@media (max-width:1179.98px){
  .site-header__nav,.site-header .lang-switch,.site-header__cta{display:none}
  .nav-toggle{display:inline-flex}
}
.nav-toggle[hidden],.site-menu[hidden]{display:none}
/* short landscape screens: tighter hero */
@media (max-height:560px){
  :root{--fs-display-xl:clamp(1.75rem,min(5vw,8.5vh),3rem);--fs-lead:.9375rem}
  .hero{--section-pad:24px}
  .hero .btn{padding:12px 22px}
}
/* ≤900: single column */
@media (max-width:900px){
  :root{--section-pad:56px;--gap-s:14px;--gap-m:28px;--fs-quote:1.625rem}
  .split,.split--3-2,.faq__list,.card-grid{grid-template-columns:1fr}
  .split{gap:var(--gap-m)}
  .card-grid{row-gap:var(--gap-m)}
  .faq__list > * + * .faq__item:first-child{border-top:0}
  .split--cap-align .split__aside{margin-top:0}
  .split__aside--rule{padding-left:24px}
  .card,.step{grid-row:auto;display:flex;flex-direction:column}
  .card::after{align-self:flex-end}
  .steps{grid-template-columns:1fr;row-gap:var(--gap-m)}
  .steps::before{left:calc(var(--node) / 2 - 1px);top:0;bottom:0;right:auto;width:2px;height:auto;background:linear-gradient(180deg,var(--c-coral),var(--c-violet))}
  .step{padding:0 0 0 calc(var(--node) + 20px)}
  .step::before{top:4px}
  .site-footer__grid{grid-template-columns:1fr}
  .offer-grid,.info-grid,.article-list,.col-grid,.offer--wide,.contact-form{grid-template-columns:1fr}
  .offer,.info,.article-list > li,.article-card{grid-row:auto;display:flex;flex-direction:column}
  .offer__foot{margin-top:auto}
  .contact-form > .field:nth-of-type(-n+4){grid-column:1 / -1}
  .check-list--cols{columns:1}
  .check-list--row{grid-template-columns:1fr 1fr}
}
/* ≤560: phones */
@media (max-width:560px){
  :root{--gutter:20px;--panel-inset:8px;--radius-l:28px;--header-h:68px;--fs-display-xl:clamp(2rem,min(10vw,6.5vh),3rem);--fs-display-l:clamp(1.75rem,8vw,2.25rem);--fs-lead:1.0625rem;--fs-logo:1.25rem}
  .site-header .container{padding:0 14px}
  .site-header__bar{gap:10px}
  .site-header__actions{gap:8px}
  .has-glow::before{width:420px;right:-180px}
  .faq__answer{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .has-glow::before,.site-menu{animation:none}
  .nav-toggle__icon::before,.nav-toggle__icon::after{transition:none}
  .btn,.card,.card::after,.faq__question::after{transition:none}
  html{scroll-behavior:auto}
}
.hero .lead{text-wrap:balance;max-width:46ch}
html[lang="fr"] .hero .lead{max-width:60ch}

/* Short pages (404): main fills the viewport so the footer sits at the bottom */
.page--fill{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.page--fill>main{flex:1;display:flex;flex-direction:column}
.page--fill>main>.hero{flex:1;display:flex;flex-direction:column;justify-content:center}