/* =================================================
   Étanchéité de l'Arsenal — enhance.css
   New components layered on top of site.css :
   section dividers, tabs, before/after sliders,
   blog, cookie banner, legal pages, certification
   lockups, marquee, extra animations + extra tweaks.
   All theming inherits site.css custom properties.
   ================================================= */

/* extra tweakable variables (defaults mirror site.css) */
:root{
  --hero-overlay:.62;          /* hero darkening */
  --motion-scale:1;            /* global anim speed multiplier inverse */
  --cta-style-bg:var(--c-brand);
  --tw-accent-strength:1;
}

/* ───────── ACCENT / BUTTON TWEAK HOOKS ───────── */
[data-btnshape="square"]{ --r-btn:6px; }
[data-btnshape="pill"]{ --r-btn:999px; }

/* hero overlay strength tweak */
[data-heroshade="soft"] .hero-bg::after{background:linear-gradient(180deg,rgba(11,27,43,.15) 0%,rgba(11,27,43,.4) 55%,rgba(11,27,43,.78) 100%)}
[data-heroshade="medium"] .hero-bg::after{background:linear-gradient(180deg,rgba(11,27,43,.25) 0%,rgba(11,27,43,.55) 55%,rgba(11,27,43,.92) 100%)}
[data-heroshade="strong"] .hero-bg::after{background:linear-gradient(180deg,rgba(11,27,43,.45) 0%,rgba(11,27,43,.72) 50%,rgba(11,27,43,.97) 100%)}

/* uppercase headings tweak */
[data-uptitles="on"] h1.hero-title,[data-uptitles="on"] h2.sec,[data-uptitles="on"] .svc-hero h1{text-transform:uppercase;letter-spacing:-.005em}

/* grain toggle */
[data-grain="off"] .hero-grain{display:none}

/* ───────── SECTION DIVIDER / ONGLET ──────────── */
.divider{
  position:relative;background:var(--c-ink);color:#FBF6EC;overflow:hidden;
  padding:0;
}
.divider .wrap{display:flex;align-items:center;gap:22px;padding:30px var(--sec-px)}
.divider::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 20h40M20 0v40' stroke='rgba(255,255,255,.05)' stroke-width='1'/></svg>");
}
.divider .d-ico{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;position:relative;z-index:1;
  background:linear-gradient(140deg,var(--c-brand) 0%,var(--c-brand-deep) 100%);
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 0 0 6px rgba(26,111,184,.18);
}
.divider .d-text{position:relative;z-index:1;flex:1}
.divider .d-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7FB4E4;font-weight:700;margin-bottom:3px}
.divider .d-title{font-family:var(--f-accent);font-style:italic;font-size:clamp(20px,2.4vw,30px);line-height:1.1;color:#fff}
.divider .d-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.3),transparent);position:relative;z-index:1;min-width:40px}
.divider .d-count{position:relative;z-index:1;font-family:var(--f-accent);font-style:italic;font-size:40px;color:rgba(255,255,255,.22);line-height:1}

/* cream variant */
.divider.light{background:var(--c-cream-2);color:var(--c-ink)}
.divider.light::before{opacity:.4;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 20h40M20 0v40' stroke='rgba(11,27,43,.05)' stroke-width='1'/></svg>")}
.divider.light .d-eyebrow{color:var(--c-accent)}
.divider.light .d-title{color:var(--c-ink)}
.divider.light .d-line{background:linear-gradient(90deg,var(--c-line-2),transparent)}
.divider.light .d-count{color:rgba(11,27,43,.12)}

/* ───────── TABS / ONGLETS ────────────────────── */
.tabs-wrap{margin-top:46px}
.tabs-nav{
  display:flex;gap:6px;flex-wrap:wrap;background:var(--c-cream-2);
  padding:6px;border-radius:var(--r-pill);border:1px solid var(--c-line);
  width:max-content;max-width:100%;margin:0 auto 46px;position:relative;
}
[data-radius="sharp"] .tabs-nav{border-radius:6px}
.tab-btn{
  padding:11px 22px;border-radius:var(--r-pill);font-weight:600;font-size:14px;
  color:var(--c-ink-2);background:transparent;border:0;cursor:pointer;transition:.2s;
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-body);white-space:nowrap;
}
[data-radius="sharp"] .tab-btn{border-radius:4px}
.tab-btn .ti{width:18px;height:18px;flex-shrink:0;opacity:.7;transition:.2s}
.tab-btn:hover{color:var(--c-ink)}
.tab-btn.on{background:var(--c-paper);color:var(--c-brand-deep);box-shadow:var(--sh-sm)}
.tab-btn.on .ti{opacity:1}
.tab-panel{display:none;animation:tabIn .5s cubic-bezier(.2,.7,.3,1)}
.tab-panel.on{display:block}
@keyframes tabIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ───────── BEFORE / AFTER SLIDER ─────────────── */
.ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.ba{
  position:relative;border-radius:var(--r-l);overflow:hidden;background:#2a2c2f;
  box-shadow:var(--sh-md);aspect-ratio:16/10;user-select:none;cursor:ew-resize;
  border:1px solid var(--c-line);
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .ba-label{
  position:absolute;top:14px;z-index:3;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);
  backdrop-filter:blur(6px);color:#fff;pointer-events:none;
}
.ba .lbl-before{left:14px;background:rgba(168,67,31,.82)}
.ba .lbl-after{right:14px;background:rgba(47,122,79,.82)}
.ba .ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;z-index:4;
  transform:translateX(-50%);box-shadow:0 0 14px rgba(0,0,0,.5);pointer-events:none;
}
.ba .ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%230E3F70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'/><polyline points='9 18 3 12 9 6' transform='translate(12 0)'/></svg>");
  background-repeat:no-repeat;background-position:center;
}
.ba .ba-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 18px 16px;
  background:linear-gradient(180deg,transparent,rgba(11,27,43,.85));color:#fff;pointer-events:none;
}
.ba .ba-cap .t{font-weight:700;font-size:16px;font-family:var(--f-display)}
.ba .ba-cap small{display:block;color:rgba(255,255,255,.72);font-size:12.5px;margin-top:2px}
@media(max-width:780px){.ba-grid{grid-template-columns:1fr}}

/* ───────── INFOGRAPHIC SHOWCASE ──────────────── */
.infographic-sec{background:var(--c-paper);padding:var(--sec-py) 0;border-top:1px solid var(--c-line)}
.infographic-head{text-align:center;max-width:60ch;margin:0 auto 44px}
.infographic-head .eyebrow{justify-content:center}
.infographic-head .eyebrow::before{display:none}
.infographic-frame{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--c-line);box-shadow:var(--sh-lg);background:#fff;
  max-width:1100px;margin:0 auto;
}
.infographic-frame img{width:100%;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.infographic-frame .zoom-hint{
  position:absolute;right:16px;bottom:16px;z-index:2;background:rgba(11,27,43,.78);color:#fff;
  font-size:12px;font-weight:600;padding:7px 13px;border-radius:var(--r-pill);
  display:flex;align-items:center;gap:7px;backdrop-filter:blur(6px);pointer-events:none;
  transition:opacity .3s;
}
.infographic-frame.zoomed{cursor:zoom-out}
.infographic-frame:not(.zoomed){cursor:zoom-in}
.infographic-frame.zoomed .zoom-hint{opacity:0}
.infographic-bar{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px;
}
.ig-chip{
  display:inline-flex;align-items:center;gap:9px;background:var(--c-cream);border:1px solid var(--c-line);
  border-radius:var(--r-pill);padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--c-ink-2);
}
.ig-chip .d{width:8px;height:8px;border-radius:50%;background:var(--c-brand)}
.ig-chip.green .d{background:var(--c-ok)}
.ig-chip.accent .d{background:var(--c-accent)}

/* ───────── BLOG ──────────────────────────────── */
.blog{background:var(--c-cream);padding:var(--sec-py) 0}
.blog .head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:46px;flex-wrap:wrap}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post-card{
  background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-l);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .28s ease, box-shadow .28s ease, border-color .28s;
  text-decoration:none;color:inherit;
}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--c-brand)}
.post-thumb{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--c-brand-deep),var(--c-brand));
}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-card:hover .post-thumb img{transform:scale(1.05)}
.post-thumb .cat{
  position:absolute;top:14px;left:14px;z-index:2;background:var(--c-paper);color:var(--c-brand-deep);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);
  box-shadow:var(--sh-sm);
}
.post-body{padding:24px;display:flex;flex-direction:column;flex:1}
.post-body .date{font-size:12.5px;color:var(--c-muted);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.post-body h3{font-family:var(--f-display);font-size:20px;font-weight:700;line-height:1.2;margin:0 0 10px;letter-spacing:-.01em}
.post-body p{font-size:14px;color:var(--c-muted);line-height:1.55;margin:0 0 18px}
.post-body .more{margin-top:auto;font-size:13.5px;font-weight:600;color:var(--c-brand-deep);display:inline-flex;align-items:center;gap:6px}
.post-card:hover .more .arrow{transform:translateX(3px)}
.post-card .more .arrow{transition:transform .2s}
/* featured first post */
.blog-grid.featured{grid-template-columns:1.6fr 1fr 1fr;grid-auto-rows:1fr}
.blog-grid.featured .post-card:first-child{grid-row:span 2;flex-direction:column}
.blog-grid.featured .post-card:first-child .post-thumb{aspect-ratio:16/11}
.blog-grid.featured .post-card:first-child h3{font-size:27px}
@media(max-width:920px){.blog-grid,.blog-grid.featured{grid-template-columns:1fr 1fr}.blog-grid.featured .post-card:first-child{grid-row:auto;grid-column:1/-1}}
@media(max-width:620px){.blog-grid,.blog-grid.featured{grid-template-columns:1fr}.blog-grid.featured .post-card:first-child{grid-column:auto}}

/* placeholder thumb (no image) */
.post-thumb.ph{display:flex;align-items:center;justify-content:center}
.post-thumb.ph::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 10px,transparent 10px 20px);
}
.post-thumb.ph .ph-ic{position:relative;z-index:1;color:rgba(255,255,255,.85)}

/* ───────── ARTICLE ───────────────────────────── */
.article{background:var(--c-cream);padding:80px 0 110px}
.article .col{max-width:760px;margin:0 auto}
.article .meta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;color:var(--c-muted);font-size:13.5px;margin-bottom:26px}
.article .meta-row .cat{background:var(--c-brand-soft);color:var(--c-brand-deep);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill)}
.article h1{font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(34px,4.4vw,54px);line-height:1.04;letter-spacing:var(--tracking-display);margin:0 0 20px;text-wrap:balance}
.article .lede{font-size:20px;line-height:1.6;color:var(--c-ink-2);margin:0 0 36px;font-family:var(--f-accent);font-style:italic}
.article .cover{border-radius:var(--r-l);overflow:hidden;margin:0 0 40px;aspect-ratio:16/9;box-shadow:var(--sh-md)}
.article .cover img{width:100%;height:100%;object-fit:cover}
.article-body{font-size:17px;line-height:1.75;color:var(--c-ink-2)}
.article-body h2{font-family:var(--f-display);font-weight:700;font-size:28px;letter-spacing:-.01em;margin:44px 0 14px;color:var(--c-ink)}
.article-body h3{font-family:var(--f-display);font-weight:700;font-size:20px;margin:32px 0 10px}
.article-body p{margin:0 0 20px}
.article-body ul{margin:0 0 22px;padding-left:0;list-style:none}
.article-body ul li{padding:7px 0 7px 30px;position:relative}
.article-body ul li::before{content:"";position:absolute;left:6px;top:16px;width:7px;height:7px;border-radius:50%;background:var(--c-brand)}
.article-body blockquote{margin:32px 0;padding:6px 0 6px 26px;border-left:3px solid var(--c-brand);font-family:var(--f-accent);font-style:italic;font-size:23px;line-height:1.4;color:var(--c-ink)}
.article-body strong{color:var(--c-ink)}
.article .tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:1px solid var(--c-line)}
.article .tags a{font-size:13px;background:var(--c-cream-2);padding:7px 14px;border-radius:var(--r-pill);color:var(--c-ink-2);font-weight:500}
.article .tags a:hover{background:var(--c-brand-soft);color:var(--c-brand-deep)}

/* ───────── CERTIFICATION LOCKUPS ─────────────── */
.certs-sec{background:var(--c-paper);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line)}
.certs-sec .wrap{padding:54px var(--sec-px)}
.certs-head{text-align:center;margin-bottom:34px}
.certs-head .eyebrow{justify-content:center}
.certs-head .eyebrow::before{display:none}
.certs-head h3{font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(24px,2.6vw,34px);letter-spacing:var(--tracking-display);margin:6px 0 0}
.certs-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cert-card.feat{grid-column:1/-1;flex-direction:row;align-items:center;gap:26px}
.cert-img{height:140px;width:auto;border-radius:12px;flex-shrink:0;box-shadow:0 8px 22px -12px rgba(11,27,43,.35);background:#0E9BDB}
.cert-card.feat .feat-txt{flex:1;display:flex;flex-direction:column;gap:8px}
.cert-card.feat .feat-txt p{max-width:62ch}
.cert-card{
  border:1px solid var(--c-line);border-radius:var(--r-l);padding:24px;background:var(--c-cream);
  display:flex;flex-direction:column;gap:12px;transition:.25s;position:relative;overflow:hidden;
}
.cert-card:hover{border-color:var(--c-brand);transform:translateY(-3px);box-shadow:var(--sh-sm)}
.cert-logo{
  width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-family:var(--f-display);font-weight:800;color:#fff;position:relative;
}
.cert-logo.qualibat{background:linear-gradient(140deg,#E2342B 0%,#B11C16 100%);font-size:11px;letter-spacing:.02em;text-align:center;line-height:1.05}
.cert-logo.rge{background:linear-gradient(140deg,#1F8A5B 0%,#13633F 100%);font-size:15px}
.cert-logo.deca{background:linear-gradient(140deg,var(--c-brand) 0%,var(--c-brand-deep) 100%)}
.cert-logo.assur{background:linear-gradient(140deg,#3A3F4A 0%,#1C2029 100%)}
.cert-card h4{font-family:var(--f-display);font-size:16px;font-weight:700;margin:0;letter-spacing:-.01em}
.cert-card p{font-size:13px;color:var(--c-muted);line-height:1.5;margin:0}
.cert-card .badge-no{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--c-brand-deep);text-transform:uppercase}
.cert-card .oblig{position:absolute;top:14px;right:14px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--c-ok);color:#fff;padding:3px 8px;border-radius:var(--r-pill)}
@media(max-width:880px){.certs-grid{grid-template-columns:1fr}.cert-card.feat{flex-direction:column;align-items:flex-start}}

/* footer cert strip badges */
.foot-certs{display:flex;gap:16px;flex-wrap:wrap;margin-top:22px;align-items:center}
.foot-certs .foot-logo{height:78px;width:auto;border-radius:8px;background:#0E9BDB}
.foot-certs .fc{
  display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.04em;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);
  padding:7px 13px;color:#EBE3CF;
}
.foot-certs .fc .dot{width:18px;height:18px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;font-weight:800}
.foot-certs .fc .dot.q{background:#D32B23}
.foot-certs .fc .dot.r{background:#1F8A5B}
.foot-certs .fc .dot.d{background:var(--c-brand)}

/* ───────── MARQUEE ───────────────────────────── */
.marquee{overflow:hidden;background:var(--c-ink);color:#FBF6EC;padding:18px 0;white-space:nowrap;position:relative}
.marquee .track{display:inline-flex;gap:48px;align-items:center;animation:marq 32s linear infinite;will-change:transform}
[data-anim-off="on"] .marquee .track{animation:none}
@media (prefers-reduced-motion: reduce){.marquee .track{animation:none}}
.marquee .track .m{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-accent);font-style:italic;font-size:22px;color:rgba(251,246,236,.92)}
.marquee .track .m .star{color:var(--c-accent);font-style:normal;font-size:14px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ───────── COOKIE BANNER + CONSENT ───────────── */
.cookie-banner{
  position:fixed;left:24px;right:24px;bottom:24px;z-index:120;max-width:560px;margin:0 auto;
  background:var(--c-paper);color:var(--c-ink);border-radius:var(--r-l);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5),0 0 0 1px rgba(11,27,43,.06);
  padding:24px;transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner .ck-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.cookie-banner .ck-ic{width:38px;height:38px;border-radius:10px;background:var(--c-brand-soft);color:var(--c-brand-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cookie-banner h4{margin:0;font-family:var(--f-display);font-size:17px;font-weight:700}
.cookie-banner p{margin:0 0 16px;font-size:13.5px;color:var(--c-muted);line-height:1.55}
.cookie-banner p a{color:var(--c-brand-deep);font-weight:600;text-decoration:underline}
.cookie-banner .ck-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner .ck-actions .btn{flex:1;justify-content:center;min-width:120px}
.cookie-prefs{display:none;margin:4px 0 16px;border-top:1px dashed var(--c-line-2);border-bottom:1px dashed var(--c-line-2);padding:10px 0}
.cookie-banner.expanded .cookie-prefs{display:block}
.ck-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;gap:14px}
.ck-row .ck-l{font-size:13px}
.ck-row .ck-l strong{display:block;font-weight:700;margin-bottom:1px}
.ck-row .ck-l span{color:var(--c-muted);font-size:12px}
.ck-row.locked .ck-state{font-size:11px;font-weight:700;color:var(--c-ok);text-transform:uppercase;letter-spacing:.04em}
.ck-toggle{position:relative;flex-shrink:0;cursor:pointer}
.ck-toggle input{position:absolute;opacity:0;width:0;height:0}
.ck-track{display:block;width:42px;height:23px;background:var(--c-line);border-radius:999px;position:relative;transition:.2s}
.ck-knob{position:absolute;left:2px;top:2px;width:19px;height:19px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.ck-toggle input:checked + .ck-track{background:var(--c-brand)}
.ck-toggle input:checked + .ck-track .ck-knob{left:21px}
.ck-link{background:none;border:0;color:var(--c-muted);font-size:12.5px;text-decoration:underline;cursor:pointer;font-family:inherit;margin-top:4px}
@media(max-width:520px){.cookie-banner{left:12px;right:12px;bottom:12px}}

/* tiny floating cookie re-open button */
.cookie-reopen{
  position:fixed;left:24px;bottom:84px;z-index:80;width:42px;height:42px;border-radius:50%;
  background:var(--c-paper);border:1px solid var(--c-line);color:var(--c-ink-2);
  display:none;align-items:center;justify-content:center;box-shadow:var(--sh-sm);cursor:pointer;
}
.cookie-reopen.show{display:flex}
.cookie-reopen:hover{color:var(--c-brand-deep);border-color:var(--c-brand)}

/* ───────── LEGAL PAGES ───────────────────────── */
.legal{background:var(--c-cream);padding:70px 0 110px}
.legal .col{max-width:820px;margin:0 auto;display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start}
.legal .toc{position:sticky;top:100px}
.legal .toc h5{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);font-weight:700;margin:0 0 12px}
.legal .toc a{display:block;font-size:13.5px;color:var(--c-ink-2);padding:7px 0;border-left:2px solid var(--c-line);padding-left:14px;transition:.18s}
.legal .toc a:hover{color:var(--c-brand-deep);border-color:var(--c-brand)}
.legal-body h2{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:-.01em;margin:40px 0 12px;color:var(--c-ink);scroll-margin-top:100px}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-family:var(--f-display);font-weight:700;font-size:17px;margin:24px 0 8px}
.legal-body p,.legal-body li{font-size:15px;line-height:1.7;color:var(--c-ink-2)}
.legal-body p{margin:0 0 16px}
.legal-body ul{margin:0 0 18px;padding-left:0;list-style:none}
.legal-body ul li{padding:6px 0 6px 26px;position:relative}
.legal-body ul li::before{content:"";position:absolute;left:4px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--c-brand)}
.legal-body table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14px}
.legal-body th,.legal-body td{text-align:left;padding:11px 14px;border:1px solid var(--c-line)}
.legal-body th{background:var(--c-cream-2);font-weight:700;color:var(--c-ink)}
.legal-body .data-card{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-m);padding:20px 24px;margin:0 0 22px}
.legal-body a{color:var(--c-brand-deep);text-decoration:underline}
.legal-hero{background:var(--c-ink);color:#FBF6EC;padding:90px 0 50px}
.legal-hero .crumb{font-size:13px;color:rgba(251,246,236,.55);margin-bottom:14px}
.legal-hero .crumb a{color:rgba(251,246,236,.72)}
.legal-hero h1{font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(34px,4.4vw,58px);letter-spacing:var(--tracking-display);margin:0;line-height:1.02}
.legal-hero p{color:rgba(251,246,236,.7);font-size:15px;margin:14px 0 0;max-width:60ch}
@media(max-width:780px){.legal .col{grid-template-columns:1fr;gap:24px}.legal .toc{position:static;display:none}}

/* ───────── EXTRA ANIMATIONS ──────────────────── */
/* word-by-word title reveal */
.reveal-words .w{display:inline-block;opacity:0;transform:translateY(110%);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal-words.in .w{opacity:1;transform:none}
.reveal-words .w-wrap{display:inline-block;overflow:hidden;vertical-align:top}
[data-anim-off="on"] .reveal-words .w{opacity:1 !important;transform:none !important}

/* fade-scale cards on reveal */
[data-animate="pop"]{opacity:0;transform:scale(.94) translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
[data-animate="pop"].in{opacity:1;transform:none}

/* magnetic button base */
.magnetic{transition:transform .18s cubic-bezier(.2,.8,.3,1)}

/* number pop counter */
.stat-pop .k{display:inline-block}

/* gentle float */
@keyframes floaty{50%{transform:translateY(-8px)}}
[data-anim-off="on"] .floaty{animation:none !important}
.floaty{animation:floaty 5s ease-in-out infinite}

/* shimmer underline link group on cards already handled */

/* scroll-driven hero scrim already in site.css */

/* reduce-motion guard */
@media (prefers-reduced-motion: reduce){
  .floaty,.marquee .track{animation:none !important}
  .reveal-words .w{opacity:1 !important;transform:none !important}
}

/* ───────── PROCESS TIMELINE (renovation) ─────── */
.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;margin-top:40px}
.timeline::before{content:"";position:absolute;top:26px;left:6%;right:6%;height:2px;background:repeating-linear-gradient(90deg,var(--c-line-2) 0 8px,transparent 8px 16px)}
.tl-step{padding:0 12px;position:relative}
.tl-step .n{width:54px;height:54px;border-radius:50%;background:var(--c-paper);border:2px solid var(--c-line);display:flex;align-items:center;justify-content:center;font-family:var(--f-accent);font-style:italic;font-size:26px;color:var(--c-brand-deep);margin-bottom:18px;position:relative;z-index:1;transition:.25s}
.tl-step:hover .n{background:var(--c-brand-deep);color:#fff;border-color:var(--c-brand-deep)}
.tl-step h4{font-family:var(--f-display);font-size:15px;font-weight:700;margin:0 0 5px;line-height:1.2}
.tl-step p{font-size:13px;color:var(--c-muted);line-height:1.5;margin:0}
@media(max-width:880px){.timeline{grid-template-columns:1fr 1fr;gap:28px}.timeline::before{display:none}}

/* problem / solution columns */
.ps-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.ps-col{border-radius:var(--r-l);padding:30px;border:1px solid var(--c-line)}
.ps-col.bad{background:linear-gradient(160deg,#FBEFEA,#F8E5DC)}
.ps-col.good{background:linear-gradient(160deg,#EAF4EE,#DCEEE2)}
.ps-col .ps-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:16px;padding:5px 12px;border-radius:var(--r-pill)}
.ps-col.bad .ps-tag{background:rgba(168,67,31,.14);color:var(--c-accent-deep)}
.ps-col.good .ps-tag{background:rgba(47,122,79,.14);color:var(--c-ok)}
.ps-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.ps-col li{display:flex;gap:12px;align-items:start;font-size:14.5px;color:var(--c-ink-2);line-height:1.5}
.ps-col li .ic{width:22px;height:22px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;margin-top:1px}
.ps-col.bad li .ic{background:var(--c-accent)}
.ps-col.good li .ic{background:var(--c-ok)}
@media(max-width:780px){.ps-grid{grid-template-columns:1fr}}

/* ───────── ACCENT COLOR TWEAKS ───────────────── */
[data-accent="copper"]{ --c-accent:#B97A2B; --c-accent-deep:#8F5C16; }
[data-accent="teal"]{ --c-accent:#1F8A87; --c-accent-deep:#136562; }
[data-accent="plum"]{ --c-accent:#8E4471; --c-accent-deep:#6B2F55; }
[data-accent="green"]{ --c-accent:#3C8A4E; --c-accent-deep:#256237; }
[data-accent="crimson"]{ --c-accent:#C13A3A; --c-accent-deep:#962525; }

/* ───────── HEADING SCALE TWEAK ────────────────── */
[data-titlescale="compact"]{ }
[data-titlescale="compact"] h1.hero-title{font-size:clamp(40px,5vw,68px)}
[data-titlescale="compact"] h2.sec{font-size:clamp(30px,3.2vw,44px)}
[data-titlescale="grand"] h1.hero-title{font-size:clamp(54px,7.4vw,104px)}
[data-titlescale="grand"] h2.sec{font-size:clamp(40px,4.6vw,66px)}

/* ───────── MARQUEE TOGGLE ─────────────────────── */
[data-marquee="off"] .marquee{display:none}

/* ───────── CARD LIFT INTENSITY ────────────────── */
[data-lift="flat"] .svc:hover,[data-lift="flat"] .post-card:hover,[data-lift="flat"] .testi:hover{transform:none}
[data-lift="bold"] .svc:hover{transform:translateY(-8px)}
[data-lift="bold"] .post-card:hover{transform:translateY(-9px)}

/* ───────── BORDER WEIGHT ──────────────────────── */
[data-borders="bold"] .svc,[data-borders="bold"] .post-card,[data-borders="bold"] .testi,
[data-borders="bold"] .cert-card,[data-borders="bold"] .svc-block{border-width:2px}

/* ───────── HEADER MODE TOGGLE ─────────────────── */
.mode-toggle{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--c-line);
  background:transparent;color:var(--c-ink);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .18s, border-color .18s, color .18s, transform .18s;flex-shrink:0;
}
.mode-toggle:hover{background:var(--c-cream-2);border-color:var(--c-line-2);transform:rotate(-12deg)}
.mode-toggle .i-sun{display:none}
.mode-toggle .i-moon{display:block}
.mode-toggle.is-dark .i-sun{display:block}
.mode-toggle.is-dark .i-moon{display:none}
[data-mode="dark"] .mode-toggle{border-color:rgba(255,255,255,.18);color:#EAF1F8}
[data-mode="dark"] .mode-toggle:hover{background:rgba(255,255,255,.07)}
[data-mode="dark"] .tw-fab{background:#16242F;color:#EAF1F8;box-shadow:0 14px 32px -10px rgba(0,0,0,.7);border:1px solid #2A3B4C}

/* ───────── MOBILE POLISH (new components) ─────── */
@media(max-width:760px){
  :root{ --sec-px:18px; }
  .divider .wrap{padding:20px 18px;gap:13px}
  .divider .d-count{display:none}
  .divider .d-line{min-width:16px}
  .divider .d-title{font-size:19px}
  .tabs-nav{width:100%;overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tab-btn{white-space:nowrap}
  .three .wrap{padding:60px 18px}
  .three-viewer.roof{aspect-ratio:4/3;min-height:0}
  .roof-controls{top:10px;right:10px;gap:6px}
  .roof-btn{padding:7px 10px;font-size:11.5px}
  .roof-caption{left:10px;right:10px;max-width:none;bottom:50px}
  .marquee .track .m{font-size:17px}
  .marquee .track{gap:32px}
  .legal-body table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .legal .col{gap:18px}
  .blog .head{gap:20px}
  .infographic-bar{gap:9px}
  .ig-chip{font-size:12px;padding:8px 12px}
  .cert-card.feat{gap:18px}
  .cert-img{height:104px}
}
@media(max-width:480px){
  .three-head h2{font-size:30px}
  .kpi-row{grid-template-columns:1fr 1fr}
  .dash-top{gap:8px;padding:11px 12px}
  .dash-win .tab-btn{padding:7px 10px;font-size:12px}
}

/* ───────── CLIENT PORTAL (post-login app) ─────── */
.app{display:grid;grid-template-columns:266px 1fr;min-height:100vh;background:var(--c-cream)}
.app-side{background:var(--c-ink);color:#EBE3CF;display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;border-right:1px solid rgba(255,255,255,.06)}
[data-mode="dark"] .app-side{background:#0A131D}
.app-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 18px}
.app-brand .l1{font-family:var(--f-accent);font-style:italic;font-size:13px;color:#9FC6EA;line-height:1}
.app-brand .l2{font-weight:800;font-size:15px;letter-spacing:.02em;color:#fff;margin-top:2px}
.app-nav{display:flex;flex-direction:column;gap:3px}
.app-nav .lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(235,227,207,.4);font-weight:700;padding:14px 13px 6px}
.app-nav a{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:12px;color:rgba(235,227,207,.74);font-weight:600;font-size:14px;transition:background .16s,color .16s}
.app-nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.app-nav a.on{background:var(--c-brand);color:#fff;box-shadow:0 8px 20px -10px rgba(26,111,184,.8)}
.app-nav a svg{flex-shrink:0;opacity:.85}
.app-nav a .pill{margin-left:auto;background:var(--c-accent);color:#fff;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px}
.app-side .spacer{flex:1}
.app-user{display:flex;align-items:center;gap:11px;padding:11px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.app-user .av{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,var(--c-brand),var(--c-brand-deep));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.app-user .nm{min-width:0}
.app-user .nm strong{display:block;font-size:13.5px;color:#fff;font-family:var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-user .nm span{font-size:11.5px;color:rgba(235,227,207,.55)}
.app-user .out{margin-left:auto;color:rgba(235,227,207,.6);flex-shrink:0}
.app-user .out:hover{color:#fff}

.app-main{display:flex;flex-direction:column;min-width:0}
.app-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:15px 28px;background:var(--c-paper);border-bottom:1px solid var(--c-line)}
.app-burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--c-line);background:transparent;color:var(--c-ink);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.app-top .ttl{min-width:0}
.app-top .ttl h1{font-family:var(--f-display);font-weight:800;font-size:20px;margin:0;letter-spacing:-.01em}
.app-top .ttl p{margin:1px 0 0;font-size:12.5px;color:var(--c-muted)}
.app-search{margin-left:auto;display:flex;align-items:center;gap:9px;background:var(--c-cream);border:1px solid var(--c-line);border-radius:99px;padding:9px 15px;color:var(--c-muted);font-size:13px;min-width:200px}
.app-search input{border:0;background:transparent;outline:0;font:inherit;font-size:13px;color:var(--c-ink);width:100%}
.app-ic{width:40px;height:40px;border-radius:50%;border:1px solid var(--c-line);background:transparent;color:var(--c-ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;position:relative;transition:.16s}
.app-ic:hover{background:var(--c-cream-2)}
.app-ic .dot{position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--c-accent);border:1.5px solid var(--c-paper)}
.app-content{padding:26px 28px 48px;display:flex;flex-direction:column;gap:20px}
.welcome{border-radius:var(--r-xl);padding:28px 30px;color:#fff;position:relative;overflow:hidden;background:linear-gradient(125deg,var(--c-brand-deep),var(--c-brand))}
.welcome::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.08)}
.welcome h2{font-family:var(--f-display);font-weight:800;font-size:26px;margin:0 0 6px;position:relative}
.welcome p{margin:0;color:rgba(255,255,255,.85);font-size:14.5px;position:relative;max-width:54ch}
.welcome .wbtn{margin-top:18px;position:relative;display:inline-flex}
.app-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}
.app-col{display:flex;flex-direction:column;gap:20px}
.app-scrim{position:fixed;inset:0;background:rgba(11,27,43,.5);z-index:55;opacity:0;pointer-events:none;transition:opacity .25s;backdrop-filter:blur(2px)}
.app-scrim.show{opacity:1;pointer-events:auto}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .app-side{position:fixed;left:0;top:0;width:266px;transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.8,.3,1);z-index:60}
  .app-side.open{transform:none}
  .app-burger{display:flex}
  .app-grid{grid-template-columns:1fr}
  .app-search{display:none}
}

/* generic page section helper */
.pad{padding:var(--sec-py) 0}

/* ───────── NEW TWEAK HOOKS v2 ─────────────────── */
[data-herohgt="compact"] .hero{min-height:600px}
[data-herohgt="tall"] .hero{min-height:100vh}

.read-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;display:none;
  background:linear-gradient(90deg,var(--c-brand),var(--c-accent));box-shadow:0 0 10px rgba(26,111,184,.5)}
[data-progress="on"] .read-progress{display:block}

.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:300;
  transform:translate(-50%,-50%);display:none;will-change:transform}
.cursor-dot{width:8px;height:8px;background:var(--c-accent)}
.cursor-ring{width:34px;height:34px;border:1.5px solid var(--c-brand);opacity:.6}
[data-cursor="on"] .cursor-dot,[data-cursor="on"] .cursor-ring{display:block}
@media(hover:none){[data-cursor="on"] .cursor-dot,[data-cursor="on"] .cursor-ring{display:none}}

/* ───────── ESPACE PRO — DASHBOARD PREVIEW ─────── */
.dash-sec{background:var(--c-cream);padding:var(--sec-py) 0}
.dash-win{max-width:1080px;margin:0 auto;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--c-line);box-shadow:var(--sh-lg);background:var(--c-paper)}
.dash-top{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--c-line);background:var(--c-cream-2);flex-wrap:wrap}
.dash-dots{display:flex;gap:6px}
.dash-dots i{width:11px;height:11px;border-radius:50%;display:block}
.dash-dots i:nth-child(1){background:#E5705B}.dash-dots i:nth-child(2){background:#E7B14B}.dash-dots i:nth-child(3){background:#5BB97C}
.dash-win .tab-btn{padding:8px 15px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--c-ink-2);background:transparent;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.16s}
.dash-win .tab-btn:hover{color:var(--c-ink)}
.dash-win .tab-btn.on{background:var(--c-paper);color:var(--c-brand-deep);box-shadow:var(--sh-sm)}
.dash-user{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:13px;color:var(--c-muted);font-weight:600}
.dash-av{width:30px;height:30px;border-radius:50%;background:linear-gradient(140deg,var(--c-brand),var(--c-brand-deep));color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
.dash-body{padding:22px}
.dash-win .tab-panel{animation:tabIn .45s cubic-bezier(.2,.7,.3,1)}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}
.kpi{border:1px solid var(--c-line);border-radius:var(--r-l);padding:15px 16px;background:var(--c-cream);position:relative;overflow:hidden}
.kpi::after{content:"";position:absolute;right:-14px;top:-14px;width:54px;height:54px;border-radius:50%;background:var(--c-brand-soft);opacity:.5}
.kpi .kn{font-family:var(--f-accent);font-style:italic;font-size:34px;line-height:1;color:var(--c-brand-deep);position:relative}
.kpi .kl{font-size:12px;color:var(--c-muted);margin-top:5px;position:relative}
.kpi .kt{font-size:11px;font-weight:700;color:var(--c-ok);margin-top:7px;position:relative;display:inline-flex;align-items:center;gap:4px}
.dash-cols{display:grid;grid-template-columns:1.55fr 1fr;gap:15px}
.dash-card{border:1px solid var(--c-line);border-radius:var(--r-l);background:var(--c-paper);overflow:hidden}
.dash-card .dch{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--c-line)}
.dash-card .dch h4{margin:0;font-family:var(--f-display);font-size:14.5px;font-weight:700}
.dash-card .dch .more{font-size:12px;color:var(--c-brand-deep);font-weight:600}
.srow{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--c-line);transition:background .15s}
.srow:last-child{border-bottom:0}
.srow:hover{background:var(--c-cream)}
.srow .si{width:38px;height:38px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--c-brand-soft);color:var(--c-brand-deep)}
.srow .smain{flex:1;min-width:0}
.srow .smain .st{font-weight:700;font-size:14px;font-family:var(--f-display)}
.srow .smain .ss{font-size:12px;color:var(--c-muted);margin-top:1px}
.srow .prog{height:6px;border-radius:99px;background:var(--c-line);margin-top:8px;overflow:hidden;max-width:280px}
.srow .prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--c-brand),var(--c-brand-deep));width:0;transition:width 1.1s cubic-bezier(.3,.8,.3,1)}
.in .srow .prog i{width:var(--p,50%)}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap}
.badge.ok{background:rgba(47,122,79,.14);color:var(--c-ok)}
.badge.run{background:var(--c-brand-soft);color:var(--c-brand-deep)}
.badge.wait{background:rgba(194,83,44,.14);color:var(--c-accent-deep)}
.rrow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--c-line)}
.rrow:last-child{border-bottom:0}
.rrow .pdf{width:34px;height:40px;border-radius:6px;background:var(--c-accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex-shrink:0;position:relative}
.rrow .rmain{flex:1;min-width:0}
.rrow .rmain .rt{font-weight:600;font-size:13.5px}
.rrow .rmain .rs{font-size:11.5px;color:var(--c-muted)}
.rrow .dl{width:32px;height:32px;border-radius:8px;border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;color:var(--c-ink-2);flex-shrink:0;transition:.15s}
.rrow .dl:hover{background:var(--c-brand);color:#fff;border-color:var(--c-brand)}
.tl-visit{display:flex;gap:14px;padding:6px 0}
.tl-visit .tld{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.tl-visit .tld .dd{width:46px;height:46px;border-radius:12px;background:var(--c-cream-2);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;border:1px solid var(--c-line)}
.tl-visit .tld .dd b{font-size:17px;font-family:var(--f-display)}
.tl-visit .tld .dd span{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--c-muted)}
.tl-visit .tll{width:2px;flex:1;background:var(--c-line);margin-top:4px}
.tl-visit:last-child .tll{display:none}
.tl-visit .tlb{padding-bottom:16px}
.tl-visit .tlb .tt{font-weight:700;font-size:13.5px;font-family:var(--f-display)}
.tl-visit .tlb .ts{font-size:12px;color:var(--c-muted);margin-top:2px}
.dash-note{text-align:center;color:var(--c-muted);font-size:12.5px;margin-top:20px}
@media(max-width:760px){.kpi-row{grid-template-columns:1fr 1fr}.dash-cols{grid-template-columns:1fr}.dash-user{display:none}}
[data-mode="dark"] .kpi,[data-mode="dark"] .srow:hover{background:var(--c-cream-2)}

/* ───────── DARK MODE — enhance components ─────── */
[data-mode="dark"] .divider{background:#0A131D}
[data-mode="dark"] .divider.light{background:var(--c-cream-2);color:var(--c-ink)}
[data-mode="dark"] .divider.light .d-title{color:var(--c-ink)}
[data-mode="dark"] .marquee{background:#0A131D}
[data-mode="dark"] .legal-hero{background:#0A131D}
[data-mode="dark"] .mega-foot{background:linear-gradient(140deg,#0A131D 0%, var(--c-brand-deep) 165%)}
[data-mode="dark"] .mega{background:var(--c-paper);border-color:var(--c-line)}
[data-mode="dark"] .ps-col.bad{background:linear-gradient(160deg,#2A1A16,#23130E);border-color:#3A241C}
[data-mode="dark"] .ps-col.good{background:linear-gradient(160deg,#13241B,#0F1E16);border-color:#1E3A2A}
[data-mode="dark"] .cookie-reopen{background:var(--c-paper);border-color:var(--c-line);color:var(--c-ink-2)}
[data-mode="dark"] .infographic-frame{background:#0E1A24}
[data-mode="dark"] .cert-card{background:var(--c-cream-2)}
[data-mode="dark"] .ig-chip{background:var(--c-cream-2)}
[data-mode="dark"] .tabs-nav{background:var(--c-cream-2)}
[data-mode="dark"] .post-card,
[data-mode="dark"] .svc,
[data-mode="dark"] .testi{background:var(--c-paper)}

/* ───────── NEW TWEAK HOOKS ────────────────────── */
/* content width */
[data-cw="narrow"]{ --wrap-max:1080px; }
[data-cw="wide"]{ --wrap-max:1460px; }
/* shadow depth */
[data-shadows="flat"]{
  --sh-sm:0 1px 0 rgba(11,27,43,.05);
  --sh-md:0 1px 0 rgba(11,27,43,.06), 0 2px 6px -4px rgba(11,27,43,.12);
  --sh-lg:0 8px 24px -16px rgba(11,27,43,.3);
}
[data-shadows="deep"]{
  --sh-sm:0 2px 4px -2px rgba(11,27,43,.18), 0 10px 24px -12px rgba(11,27,43,.28);
  --sh-md:0 4px 10px -4px rgba(11,27,43,.2), 0 22px 48px -16px rgba(11,27,43,.4);
  --sh-lg:0 50px 90px -30px rgba(0,0,0,.6);
}
[data-mode="dark"][data-shadows="deep"]{
  --sh-sm:0 2px 4px -2px rgba(0,0,0,.5), 0 10px 24px -12px rgba(0,0,0,.7);
  --sh-md:0 4px 10px -4px rgba(0,0,0,.5), 0 22px 48px -16px rgba(0,0,0,.8);
}

/* ───────── 3D MODEL SECTION ───────────────────── */
.three{background:var(--c-ink);color:#FBF6EC;position:relative;overflow:hidden}
[data-mode="dark"] .three{background:#0A131D}
.three::before{
  content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background:radial-gradient(900px 500px at 80% -10%, rgba(26,111,184,.28), transparent 60%);
}
.three .wrap{position:relative;z-index:1;padding:var(--sec-py) var(--sec-px)}
.three-head{max-width:62ch;margin-bottom:42px}
.three-head .eyebrow{color:#7FB4E4}
.three-head .eyebrow::before{background:#7FB4E4}
.three-head h2{font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(32px,4vw,52px);letter-spacing:var(--tracking-display);line-height:1.04;color:#fff;margin:8px 0 14px;text-wrap:balance}
.three-head h2 .ital{font-family:var(--f-accent);font-style:italic;font-weight:400;color:#9FC6EA}
.three-head p{font-size:17px;line-height:1.6;color:rgba(251,246,236,.78);margin:0;max-width:56ch}
.three-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:26px;align-items:stretch}
.three-viewer{
  position:relative;border-radius:var(--r-xl);overflow:hidden;background:#0A0F16;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 80px -30px rgba(0,0,0,.7);
  min-height:480px;aspect-ratio:16/11;
}
.three-viewer iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.three-viewer .three-tag{
  position:absolute;top:16px;left:16px;z-index:3;display:flex;align-items:center;gap:9px;
  background:rgba(10,15,22,.7);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
  color:#EAF1F8;font-size:12px;font-weight:600;letter-spacing:.02em;padding:8px 14px;border-radius:var(--r-pill);
  pointer-events:none;
}
.three-viewer .three-tag .pulse{width:8px;height:8px;border-radius:50%;background:#5BD08A;box-shadow:0 0 0 0 rgba(91,208,138,.6);animation:tpulse 2.2s infinite}
@keyframes tpulse{0%{box-shadow:0 0 0 0 rgba(91,208,138,.55)}70%{box-shadow:0 0 0 10px rgba(91,208,138,0)}100%{box-shadow:0 0 0 0 rgba(91,208,138,0)}}
.three-viewer .drag-hint{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;
  display:flex;align-items:center;gap:8px;background:rgba(10,15,22,.66);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);color:rgba(251,246,236,.85);font-size:12.5px;font-weight:500;
  padding:7px 14px;border-radius:var(--r-pill);transition:opacity .4s;
}
.three-viewer.touched .drag-hint{opacity:0}

/* layer list */
.three-layers{display:flex;flex-direction:column;gap:10px}
.layer{
  display:flex;gap:15px;align-items:flex-start;padding:15px 17px;border-radius:var(--r-l);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  transition:background .2s, border-color .2s, transform .2s;cursor:default;
}
.layer:hover{background:rgba(255,255,255,.09);border-color:rgba(127,180,228,.5);transform:translateX(3px)}
.layer .lnum{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-accent);font-style:italic;font-size:19px;color:#0A131D;font-weight:600;
}
.layer .ltx{display:flex;flex-direction:column;gap:2px}
.layer .ltx strong{font-family:var(--f-display);font-weight:700;font-size:15px;color:#fff;letter-spacing:-.01em}
.layer .ltx span{font-size:13px;line-height:1.45;color:rgba(251,246,236,.66)}
.three-cta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:920px){.three-grid{grid-template-columns:1fr}.three-viewer{min-height:0;aspect-ratio:16/10}}

/* roof 3d viewer */
.three-viewer.roof{background:radial-gradient(120% 130% at 50% 18%, #182a38 0%, #0a0f16 70%)}
.three-viewer canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.three-viewer canvas:active{cursor:grabbing}
.roof-controls{position:absolute;top:16px;right:16px;z-index:5;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.roof-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(10,15,22,.62);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);color:#EAF1F8;font-size:12px;font-weight:600;padding:8px 12px;border-radius:999px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s;font-family:inherit}
.roof-btn:hover{background:rgba(26,111,184,.5);border-color:rgba(127,180,228,.6);transform:translateY(-1px)}
.roof-btn.on{background:var(--c-brand);border-color:var(--c-brand);color:#fff}
.roof-btn svg{flex-shrink:0}
.roof-caption{position:absolute;left:16px;bottom:56px;z-index:5;max-width:80%;background:rgba(10,15,22,.8);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:12px 15px;opacity:0;transform:translateY(8px);transition:opacity .28s,transform .28s;pointer-events:none}
.roof-caption.show{opacity:1;transform:none}
.roof-caption strong{display:block;color:#fff;font-family:var(--f-display);font-size:14px;margin-bottom:3px}
.roof-caption span{color:rgba(251,246,236,.74);font-size:12.5px;line-height:1.45}
.three-layers [data-layer]{cursor:pointer}
.three-layers [data-layer].active{background:rgba(127,180,228,.16);border-color:rgba(127,180,228,.6);transform:translateX(3px)}
.roof-fallback canvas{display:none}
.roof-fallback::after{content:"Modèle 3D indisponible — activez JavaScript / WebGL";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(251,246,236,.6);font-size:13px;text-align:center;padding:24px}
/* stack rows clickable on the anatomy page */
.stack-row[data-layer]{cursor:pointer;transition:background .18s}
.stack-row[data-layer]:hover{background:var(--c-cream-2)}
.stack-row[data-layer].active{background:var(--c-brand-soft)}

/* swatch palette dots used by layer numbers */
.lc-vapor{background:#9FB4C4}
.lc-iso{background:#F2C84B}
.lc-etanch{background:#aebfcc;color:#1a2733 !important}
.lc-releve{background:#bccbd8;color:#1a2733 !important}
.lc-protect{background:#eef1f4;color:#1a2733 !important}
.lc-evac{background:#1A6FB8;color:#fff !important}

/* full anatomy page stack diagram */
.stack{display:grid;grid-template-columns:1fr;gap:0;max-width:760px;margin:0 auto;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-md);border:1px solid var(--c-line)}
.stack-row{display:grid;grid-template-columns:64px 1fr;align-items:stretch;background:var(--c-paper)}
.stack-row + .stack-row{border-top:1px solid var(--c-line)}
.stack-row .sr-band{display:flex;align-items:center;justify-content:center;font-family:var(--f-accent);font-style:italic;font-size:22px;color:#0A131D}
.stack-row .sr-body{padding:18px 22px}
.stack-row .sr-body h4{font-family:var(--f-display);font-weight:700;font-size:17px;margin:0 0 4px;letter-spacing:-.01em}
.stack-row .sr-body p{margin:0;font-size:14px;color:var(--c-muted);line-height:1.5}

/* ───────── MEGA-MENU (Nos métiers) ───────────── */
.header nav.primary{align-self:stretch}
.nav-item{position:relative;display:flex;align-items:center;align-self:stretch}
.nav-trigger{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.nav-trigger .chev{transition:transform .25s ease}
.nav-item.has-mega:hover .nav-trigger .chev{transform:rotate(180deg)}
.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);
  width:660px;max-width:min(92vw,720px);
  background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--r-l);
  box-shadow:0 32px 70px -24px rgba(11,27,43,.4),0 0 0 1px rgba(11,27,43,.03);
  padding:16px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1), visibility .22s;
  z-index:60;
}
/* hover bridge so the gap between trigger and panel stays hoverable */
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-item.has-mega:hover .mega,
.nav-item.has-mega:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(8px)}
.mega-inner{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega-link{
  display:flex;gap:13px;align-items:flex-start;padding:13px;border-radius:var(--r-m);
  transition:background .16s ease;
}
.mega-link:hover{background:var(--c-cream)}
.mega-link .mi{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(140deg,var(--c-brand-soft) 0%,var(--c-cream-2) 100%);
  color:var(--c-brand-deep);display:flex;align-items:center;justify-content:center;
  transition:background .18s, color .18s;
}
.mega-link:hover .mi{background:linear-gradient(140deg,var(--c-brand) 0%,var(--c-brand-deep) 100%);color:#fff}
.mega-link .mt{display:flex;flex-direction:column;gap:2px}
.mega-link .mt strong{font-family:var(--f-display);font-weight:700;font-size:14.5px;color:var(--c-ink);letter-spacing:-.01em}
.mega-link .mt small{font-size:12.5px;color:var(--c-muted);line-height:1.4}
.mega-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:12px;padding:14px 16px;border-radius:var(--r-m);
  background:linear-gradient(140deg,var(--c-ink) 0%,var(--c-brand-deep) 100%);color:#FBF6EC;
}
.mega-foot .mf-t{font-size:13.5px;line-height:1.4}
.mega-foot .mf-t strong{display:block;font-family:var(--f-display);font-size:15px;color:#fff}
.mega-foot .mf-t span{color:rgba(251,246,236,.7)}
@media(max-width:980px){.mega{display:none !important}}

/* mobile nav — services sublist */
.mobile-nav .mn-group{padding:10px 0 4px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);border-bottom:0}
.mobile-nav .mn-sub{padding-left:14px;font-size:14px;color:var(--c-muted)}
.center-head{text-align:center;max-width:62ch;margin:0 auto 50px}
.center-head .eyebrow{justify-content:center}
.center-head .eyebrow::before{display:none}