/* ============================================================
   ÉLÈVEDERZA — Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  --black:#0b0d10;
  --charcoal:#15181d;
  --cream:#f5f2ea;
  --white:#fefefc;
  --teal:#2fe6c9;
  --teal-dark:#12a893;
  --coral:#ff7a59;
  --yellow:#ffd23f;
  --blue:#2451ff;
  --pink:#ff9fc7;
  --ink:#0b0d10;
  --navy:#1e3a8a;

  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:10px;
  --radius-pill:999px;

  --container:1200px;
  --pad:clamp(20px,5vw,64px);

  --shadow-hard:8px 8px 0 var(--ink);
  --shadow-soft:0 20px 60px rgba(0,0,0,.25);

  --ff-head:'Unbounded', system-ui, sans-serif;
  --ff-body:'Plus Jakarta Sans', system-ui, sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Loading intro — eye opens once, then never blocks the page ---------- */
.loader-eye{
  position:fixed;inset:0;z-index:9999;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease;
}
.loader-eye.is-hidden{opacity:0;pointer-events:none}
.loader-eye[hidden]{display:none}
.loader-mark{
  position:relative;width:180px;height:180px;
  display:flex;align-items:center;justify-content:center;
}
.loader-ring{
  position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(245,242,234,.14);
  border-top-color:var(--teal);border-right-color:var(--blue);
  opacity:0;
  animation:loaderRingIn .3s ease .35s forwards, loaderSpin 1.3s linear infinite .35s;
}
.loader-letter{
  font-family:var(--ff-head);font-weight:900;font-size:118px;line-height:1;
  background:linear-gradient(135deg, var(--blue), var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform:scale(.25) rotate(-30deg);opacity:0;
  animation:loaderLetterIn .65s cubic-bezier(.34,1.56,.64,1) .12s forwards,
            loaderLetterFloat 2.6s ease-in-out infinite 1s;
}
@keyframes loaderRingIn{to{opacity:1}}
@keyframes loaderSpin{to{transform:rotate(360deg)}}
@keyframes loaderLetterIn{to{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes loaderLetterFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:1rem}
h1,h2,h3,h4{
  font-family:var(--ff-head);
  font-weight:800;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1,h2{text-align:center}
h1{font-size:clamp(1.9rem,4.2vw,3rem)}
h2{font-size:clamp(1.9rem,4.4vw,3.1rem)}
h3{font-size:clamp(1.3rem,2.6vw,1.7rem)}
p{margin:0 0 1em}
.container{max-width:var(--container);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
section{position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--ff-head);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.5em 1em;
  border:2px solid currentColor;
  border-radius:var(--radius-pill);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--ff-head);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:1.05em 1.9em;
  border-radius:var(--radius-pill);
  border:2.5px solid var(--ink);
  background:var(--white);
  color:var(--ink);
  transition:transform .35s var(--ease), background .3s, color .3s, box-shadow .3s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-hard)}
.btn:active{transform:translateY(0)}
.btn-solid{background:var(--ink);color:var(--white);border-color:var(--teal)}
.btn-teal{border-color:var(--teal);color:var(--teal-dark)}
.btn-teal:hover{background:var(--teal);color:var(--ink)}
.btn-white{border-color:var(--white);color:var(--white);background:transparent}
.btn-white:hover{background:var(--white);color:var(--ink)}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ---------- Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(245,242,234,.86);
  backdrop-filter:blur(14px);
  border-bottom:2px solid var(--ink);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);
  max-width:var(--container);margin:0 auto;
}
.brand{display:flex;align-items:center;gap:.5em}
.brand-mark{
  font-family:var(--ff-head);
  font-weight:900;
  font-size:1.4rem;
  letter-spacing:-.02em;
}
.brand-mark .bm-a{color:var(--blue)}
.brand-mark .bm-b{color:var(--teal)}
.nav-links{display:flex;align-items:center;gap:0;margin-left:10px;margin-right:16px}
.nav-links a{
  font-family:var(--ff-head);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.01em;
  text-transform:uppercase;
  padding:.7em .5em;
  border-radius:var(--radius-pill);
  transition:background .25s,color .25s,transform .2s ease,box-shadow .2s ease;
  position:relative;
  white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active{
  background:var(--ink);color:var(--white);
  transform:translateY(-2px) rotate(-2deg);
  box-shadow:3px 3px 0 rgba(11,13,16,.3);
}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang-switch{
  display:flex;align-items:center;
  border:2px solid var(--ink);
  border-radius:var(--radius-pill);
  padding:3px;
  gap:2px;
  font-family:var(--ff-head);
  font-size:.7rem;
  font-weight:700;
}
.lang-switch button{
  border:none;background:transparent;padding:.5em .9em;border-radius:var(--radius-pill);
  color:var(--ink);transition:background .25s,color .25s;
}
.lang-switch button.active{background:var(--ink);color:var(--white)}
.nav-toggle{
  display:none;
  width:44px;height:44px;
  border:2px solid var(--ink);
  border-radius:var(--radius-pill);
  background:var(--white);
  align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
}
.nav-toggle span{width:18px;height:2px;background:var(--ink);display:block}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--navy);color:var(--cream);
  border-bottom:2px solid var(--ink);
  overflow:hidden;
  white-space:nowrap;
  padding:12px 0;
}
.marquee-track{display:inline-flex;animation:marquee 15s linear infinite}
.marquee-track span{
  font-family:var(--ff-head);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:0 1.4em;
  display:inline-flex;align-items:center;gap:1.4em;
}
.marquee-track span::after{content:'</>';color:var(--teal);font-family:'Consolas',monospace;letter-spacing:0}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Hero ---------- */
.hero{
  padding:clamp(26px,4.5vw,52px) 0 clamp(24px,3.5vw,40px);
  background:
    radial-gradient(60% 55% at 85% 8%, rgba(47,230,201,.35), transparent 60%),
    var(--cream);
  border-bottom:2px solid var(--ink);
}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}

.container-wide{max-width:1560px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- Hero stage (full-width media with content overlaid) ---------- */
.hero-split{
  position:relative;
  min-height:clamp(480px,66vh,660px);
  border:2.5px solid var(--ink);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-hard);
  background:var(--ink);
}
.hero-media{
  position:absolute;inset:0;overflow:hidden;background:var(--ink);
}
.hero-media-tint{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  background:
    radial-gradient(60% 60% at 50% 44%, rgba(11,13,16,.28), rgba(11,13,16,.72) 100%),
    linear-gradient(180deg, rgba(11,13,16,.55) 0%, rgba(11,13,16,.3) 30%, rgba(11,13,16,.55) 100%);
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;animation:tvRoll 9s ease-in-out infinite}
@keyframes tvRoll{
  0%,96%,100%{transform:translateY(0)}
  97%{transform:translateY(5px)}
  98%{transform:translateY(-3px)}
  99%{transform:translateY(1px)}
}
.tv-scanlines{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0, rgba(0,0,0,.22) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
}
.tv-vignette{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.6) 100%);
}
.tv-flicker{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:rgba(255,255,255,.03);
  animation:tvFlicker 4s ease-in-out infinite;
}
@keyframes tvFlicker{
  0%,19%,21%,50%,52%,100%{opacity:.35}
  20%,51%{opacity:1}
}
.hero-media-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-media-scan{
  position:absolute;left:0;right:0;height:70px;z-index:3;pointer-events:none;
  background:linear-gradient(rgba(245,242,234,0), rgba(245,242,234,.14), rgba(245,242,234,0));
  animation:scanMove 5s linear infinite;
}
@keyframes scanMove{0%{top:-70px}100%{top:100%}}
.hero-content{
  position:absolute;inset:0;z-index:7;
  padding:clamp(24px,3vw,36px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.hero-content .hero-badge{margin-bottom:18px}
.hero-mark{display:inline-flex;margin-bottom:18px}
.hero-mark-tag{
  background:transparent;
  font-size:clamp(2.2rem,4.6vw,3.4rem)!important;
  letter-spacing:-.02em;
  animation:markFloat 4.5s ease-in-out infinite 1.3s;
}
@keyframes markFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(1.5deg)}}

/* "designed from scratch" reveal — the letter draws itself in on load, then floats */
.hero-mark-draw .hero-mark-tag{
  position:relative;display:inline-block;
  clip-path:inset(0 100% 0 0);
  animation:markDraw 1s cubic-bezier(.65,0,.35,1) .3s forwards, markFloat 4.5s ease-in-out infinite 1.3s;
}
.hero-mark-draw .hero-mark-tag::after{
  content:'';position:absolute;top:6%;bottom:6%;right:0;width:4px;background:var(--teal);
  animation:markCursor .9s steps(1) .3s 2, markFade .1s linear 1.3s forwards;
}
@keyframes markDraw{to{clip-path:inset(0 0 0 0)}}
@keyframes markCursor{0%,100%{opacity:1}50%{opacity:0}}
@keyframes markFade{to{opacity:0}}

.hero h1{margin-bottom:0;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.18;color:var(--white)}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero-sub{font-size:1.05rem;max-width:42ch;color:#3a3f45;margin-left:auto;margin-right:auto}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:20px}

.hero-foot{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px;
  padding:28px 0 4px;
}
.stat-icon{
  width:36px;height:36px;flex-shrink:0;border-radius:10px;
  border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;color:var(--ink);
}
/* Deliberately NOT a pill/button shape — a hand-marked "highlighter
   swipe" under the text instead, so it reads as a little annotation on
   the hero photo rather than another clickable-looking button (there
   are already two real buttons right below it). */
.hero-badge{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  background:none;border:none;
  padding:.2em .1em;
  font-family:var(--ff-head);font-weight:700;font-size:1.08rem;letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--white);
  text-shadow:0 2px 6px rgba(11,13,16,.5);
  white-space:nowrap;
  max-width:100%;
  transform:rotate(-1.5deg);
}
.hero-badge::before{
  content:'';width:8px;height:8px;flex-shrink:0;border-radius:50%;
  background:var(--coral);position:relative;z-index:1;
  animation:pulseDot 1.6s ease-in-out infinite;
}
.hero-badge::after{
  /* A thin swipe sitting BELOW the baseline, not across the letters —
     the previous version was tall enough to cover the text itself, and
     white letters have poor contrast against bright yellow anyway.
     Negative z-index is belt-and-braces so it can never paint over the
     text regardless of stacking order. */
  content:'';
  z-index:-1;
  position:absolute;left:22px;right:-6px;bottom:-3px;height:4px;
  background:var(--yellow);
  transform:skewX(-8deg);
  border-radius:3px;
}
.hero-stats-wrap{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:var(--radius-lg);
  padding:14px 24px;
  box-shadow:var(--shadow-hard);
}
.hero-stats{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.hero-stat{display:flex;align-items:center;gap:12px;text-align:left}
.hero-stat b{
  display:block;font-family:var(--ff-head);font-size:1.7rem;font-weight:900;color:var(--ink);
}
.hero-stat span{font-size:.78rem;color:#5b6067;font-weight:600}
.type-cursor{color:var(--teal);animation:blink .9s step-end infinite;font-weight:700}
@keyframes blink{50%{opacity:0}}

.hero-playground-section{margin-top:56px;padding-top:40px;border-top:2px dashed rgba(11,13,16,.15)}
.playground-eyebrow-wrap{text-align:center;margin-bottom:22px}

/* ---------- Hero playground (editable CSS live preview) ---------- */
.hero-playground{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px;
}
.pg-pane{
  border-radius:var(--radius-lg);border:2.5px solid var(--ink);
  overflow:hidden;box-shadow:var(--shadow-hard);background:var(--ink);
  display:flex;flex-direction:column;
}
.pg-pane .monitor-bar{
  display:flex;align-items:center;gap:8px;padding:10px 16px;flex-shrink:0;
  background:#181b1f;border-bottom:1px solid rgba(245,242,234,.08);
}
.pg-pane .monitor-bar span{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.pg-pane .monitor-bar span:nth-child(1){background:var(--coral)}
.pg-pane .monitor-bar span:nth-child(2){background:var(--yellow)}
.pg-pane .monitor-bar span:nth-child(3){background:var(--teal-dark)}
.pg-label{margin-left:8px;font-family:'Consolas',monospace;font-size:.72rem;color:#6b7280}
.pg-reset{
  margin-left:auto;background:none;border:none;color:#6b7280;cursor:pointer;
  font-size:1rem;line-height:1;padding:4px 7px;border-radius:6px;
}
.pg-reset:hover{color:var(--teal);background:rgba(47,230,201,.1)}
.pg-tabs{display:flex;gap:2px;margin-left:8px}
.pg-tab{
  background:none;border:none;color:#6b7280;cursor:pointer;
  font-family:'Consolas',monospace;font-size:.7rem;padding:5px 10px;border-radius:6px;
}
.pg-tab.active{background:rgba(47,230,201,.14);color:var(--teal)}
.pg-code{position:relative;display:flex;flex-direction:column}
.pg-editor-wrap{position:relative;flex:1;min-height:300px}
.pg-editor-wrap[hidden]{display:none}
.pg-highlight,.pg-editor{
  position:absolute;inset:0;margin:0;border:none;
  font-family:'Consolas',monospace;font-size:.85rem;line-height:1.7;
  padding:22px 24px;white-space:pre-wrap;word-break:break-word;
  overflow:auto;
}
.pg-highlight{
  color:var(--teal);pointer-events:none;background:var(--ink);
}
.pg-highlight code{white-space:inherit;font:inherit}
.pg-editor{
  resize:none;outline:none;background:transparent;color:transparent;
  caret-color:var(--teal);
}
.pg-editor::selection{background:rgba(47,230,201,.35);color:transparent}
.pg-stage{
  position:relative;flex:1;min-height:300px;overflow:hidden;
  background:var(--cream);
}
.pg-orb{
  position:absolute;border-radius:50%;filter:blur(38px);opacity:.55;
  animation:heroFloat 6s ease-in-out infinite;
}
.pg-orb-a{width:150px;height:150px;background:var(--teal);top:-40px;right:-30px;--r:0deg}
.pg-orb-b{width:120px;height:120px;background:var(--pink);bottom:-30px;left:-20px;animation-delay:2s;--r:0deg}
.pg-frame{
  position:relative;z-index:1;width:100%;height:100%;border:none;background:transparent;
}
.pg-hint-wrap{margin-top:18px;text-align:center}
.pg-hint{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--white);border:2px solid var(--ink);
  border-radius:var(--radius-pill);padding:.6em 1.2em;
  font-size:.78rem;font-weight:600;color:var(--ink);
  box-shadow:4px 4px 0 rgba(11,13,16,.15);
}

/* ---------- Colour block sections ---------- */
.band{padding:clamp(64px,9vw,110px) 0;border-bottom:2px solid var(--ink)}
.band-black{background:var(--ink);color:var(--cream)}
.band-teal{background:var(--teal)}
.band-coral{background:var(--coral);color:var(--white)}
.band-yellow{background:var(--yellow)}
.band-cream{background:var(--cream)}
.band-blue{background:var(--blue);color:var(--white)}
.band-head{max-width:680px;margin:0 auto 52px;text-align:center}
.band-head .eyebrow{margin-bottom:16px}

/* ---------- Service / feature cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  border:2.5px solid var(--ink);
  border-radius:var(--radius-lg);
  padding:36px 30px;
  background:var(--white);
  color:var(--ink);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  position:relative;
  overflow:hidden;
}
.card:hover{transform:translateY(-8px) rotate(-.5deg);box-shadow:var(--shadow-hard)}
.card-icon{
  width:56px;height:56px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:'Consolas', monospace;font-weight:700;font-size:1.35rem;
  margin-bottom:20px;border:2px solid var(--ink);
}
.card p{color:#4b5056;font-size:.96rem}
.card .price-tag{
  display:inline-block;margin-top:12px;
  font-family:var(--ff-head);font-weight:800;color:var(--teal-dark);font-size:1.05rem;
}
.card-link{
  display:inline-flex;align-items:center;gap:.4em;margin-top:14px;
  font-family:var(--ff-head);font-weight:700;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.03em;
}
.card .card-link{display:flex;justify-content:center;width:100%}
.card-link .arrow{transition:transform .3s var(--ease)}
.card:hover .card-link .arrow{transform:translateX(6px)}

.center-cards .card{text-align:center}
.center-cards .card-icon{margin-left:auto;margin-right:auto}

.tilt-1{background:#fff}
.tilt-2{background:var(--yellow)}
.tilt-3{background:var(--pink)}
.tilt-4{background:var(--teal)}
.tilt-5{background:#fff}
.tilt-6{background:var(--coral);color:var(--white)}
.tilt-6 p{color:rgba(255,255,255,.85)}
.tilt-6 .card-icon{background:var(--ink);border-color:var(--ink)}

/* ---------- Split content (image / text) ---------- */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;border:2.5px solid var(--ink);border-radius:var(--radius-lg);overflow:hidden}
.split-media{background:var(--pink);min-height:340px;display:flex;align-items:center;justify-content:center;padding:40px;border-right:2.5px solid var(--ink);position:relative;overflow:hidden}
.split-media img{max-height:280px}
.split-body{padding:clamp(30px,4vw,56px);background:var(--yellow);color:var(--ink);text-align:center}
.split-body h2{font-size:clamp(1.5rem,2.6vw,2.1rem);max-width:26ch;margin-left:auto;margin-right:auto;margin-top:.5em}
.split-body p{font-size:1.05rem;max-width:52ch;margin-left:auto;margin-right:auto}

/* ---------- Wireframe mockup illustration (fills split-media panels) ---------- */
.split-visual{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.split-visual::before{
  content:'';position:absolute;inset:-10%;
  background-image:radial-gradient(rgba(11,13,16,.14) 1.5px, transparent 1.5px);
  background-size:16px 16px;
  opacity:.5;
}
.on-dark .split-visual::before{background-image:radial-gradient(rgba(245,242,234,.18) 1.5px, transparent 1.5px)}
.mockup{
  position:relative;z-index:1;
  width:100%;max-width:270px;
  background:var(--white);
  border:2.5px solid var(--ink);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:8px 8px 0 rgba(11,13,16,.22);
  transform:rotate(-2deg);
}
.mockup-bar{display:flex;gap:6px;padding:12px 14px;border-bottom:2px solid var(--ink);background:var(--cream)}
.mockup-bar span{width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:.2}
.mockup-bar span:nth-child(1){background:var(--coral);opacity:1}
.mockup-bar span:nth-child(2){background:var(--yellow);opacity:1}
.mockup-bar span:nth-child(3){background:var(--teal-dark);opacity:1}
.mockup-body{padding:22px}
.mockup-line{height:9px;border-radius:5px;background:rgba(11,13,16,.14);margin-bottom:10px}
.mockup-line.w-90{width:90%}
.mockup-line.w-70{width:70%}
.mockup-line.w-55{width:55%}
.mockup-line.w-40{width:40%}
.mockup-block{
  height:54px;border-radius:8px;margin-top:8px;border:1.5px dashed rgba(11,13,16,.3);
  background:repeating-linear-gradient(135deg, rgba(11,13,16,.07) 0 8px, transparent 8px 16px);
}
.split-badge{
  position:absolute;z-index:2;top:22px;right:22px;
  font-family:var(--ff-head);font-weight:900;font-size:2.6rem;
  color:var(--ink);opacity:.16;line-height:1;
}
.split-tag{
  position:absolute;z-index:2;bottom:22px;left:22px;
  background:var(--white);border:2px solid var(--ink);border-radius:var(--radius-pill);
  padding:.4em 1em;font-family:var(--ff-head);font-weight:700;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.04em;transform:rotate(-3deg);
}

/* ---------- Coverage / network map panel ---------- */
.map-panel{
  position:relative;width:100%;height:100%;min-height:280px;
  background-image:radial-gradient(rgba(245,242,234,.16) 1.5px, transparent 1.5px);
  background-size:18px 18px;
}
.map-pin{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,-50%)}
.map-pin .dot{width:11px;height:11px;border-radius:50%;background:var(--teal);border:2px solid var(--cream)}
.map-pin span{
  font-family:var(--ff-head);font-size:.66rem;font-weight:700;color:var(--cream);
  text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;
  background:rgba(11,13,16,.55);padding:3px 9px;border-radius:var(--radius-pill);
}
.map-pin.hub .dot{width:16px;height:16px;background:var(--teal);animation:pulse-hub 1.8s ease-in-out infinite}
.map-pin.hub span{background:var(--teal);color:var(--ink)}
@keyframes pulse-hub{
  0%,100%{box-shadow:0 0 0 0 rgba(47,230,201,.5)}
  50%{box-shadow:0 0 0 9px rgba(47,230,201,0)}
}

/* ---------- Portfolio ---------- */
.portfolio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.portfolio-card{
  border:2.5px solid var(--ink);border-radius:var(--radius-lg);
  overflow:hidden;background:var(--white);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  display:flex;flex-direction:column;
}
.portfolio-card:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:var(--shadow-hard)}
.portfolio-bar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:2.5px solid var(--ink);background:var(--cream)}
.portfolio-bar .dots{display:flex;gap:5px;flex-shrink:0}
.portfolio-bar .dots span{width:9px;height:9px;border-radius:50%;display:inline-block}
.portfolio-bar .dots span:nth-child(1){background:var(--coral)}
.portfolio-bar .dots span:nth-child(2){background:var(--yellow)}
.portfolio-bar .dots span:nth-child(3){background:var(--teal-dark)}
.portfolio-bar .url{
  flex:1;background:var(--white);border:1.5px solid rgba(11,13,16,.18);border-radius:var(--radius-pill);
  padding:5px 14px;font-size:.72rem;font-family:'Consolas',monospace;color:#5b6067;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.portfolio-shot{aspect-ratio:16/10;overflow:hidden;background:var(--cream);position:relative}
.portfolio-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.portfolio-video{width:100%;height:100%;object-fit:cover;display:block;background:var(--cream)}
.portfolio-placeholder{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background-image:radial-gradient(rgba(11,13,16,.14) 1.5px, transparent 1.5px);
  background-size:16px 16px;
}
.portfolio-placeholder span{
  font-family:var(--ff-head);font-weight:900;font-size:3.2rem;color:var(--ink);opacity:.85;
  letter-spacing:-.02em;
}
.portfolio-body{padding:26px 26px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1}
.portfolio-body .tag{align-self:center;margin-bottom:14px}
.portfolio-body h3{margin-bottom:8px;font-size:1.3rem}
.portfolio-body p{color:#4b5056;font-size:.92rem;margin-bottom:20px;flex:1}
.portfolio-body .card-link{margin-top:0}

/* ---------- Blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.blog-card{
  border:2.5px solid var(--ink);border-radius:var(--radius-lg);
  background:var(--white);padding:32px;display:flex;flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.blog-card:hover{transform:translateY(-8px) rotate(-.4deg);box-shadow:var(--shadow-hard)}
.blog-card .blog-meta{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.blog-card h3{font-size:1.4rem;margin-bottom:12px}
.blog-card p{color:#4b5056;font-size:.95rem;flex:1;margin-bottom:18px}
.blog-article{max-width:74ch;margin:0 auto}
.blog-article p{font-size:1.08rem;line-height:1.75;margin-bottom:1.3em;color:#2b2f33}
.blog-article em{color:var(--teal-dark);font-style:normal;font-weight:700}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.step{
  border:2px dashed rgba(245,242,234,.35);
  border-radius:var(--radius-md);
  padding:26px 22px;
  position:relative;
}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--ff-head);font-weight:900;font-size:2.4rem;
  color:var(--teal);opacity:.9;display:block;margin-bottom:10px;
}
.step h4{color:var(--white);margin-bottom:8px;font-size:1.05rem}
.step p{color:rgba(245,242,234,.7);font-size:.9rem;margin:0}

/* ---------- Pricing / Calculator ---------- */
.calc-wrap{
  border:2.5px solid var(--ink);
  border-radius:var(--radius-lg);
  background:var(--white);
  overflow:hidden;
  box-shadow:var(--shadow-hard);
}
.calc-progress{display:flex;background:var(--ink)}
.calc-progress div{
  flex:1;text-align:center;padding:16px 8px;
  font-family:var(--ff-head);font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:rgba(245,242,234,.45);border-right:1px solid rgba(245,242,234,.15);
  transition:color .3s,background .3s;
}
.calc-progress div:last-child{border-right:none}
.calc-progress div.active{color:var(--teal);background:rgba(47,230,201,.08)}
.calc-progress div.done{color:var(--cream)}
.calc-perks{
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;
  background:var(--teal);border-bottom:2.5px solid var(--ink);
  padding:12px 20px;
  font-family:var(--ff-head);font-weight:700;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);
}
.calc-body{padding:clamp(28px,4vw,48px)}
.calc-step{display:none}
.calc-step>h3,.calc-step>p.muted{text-align:center}
.calc-step.active{display:block;animation:fadein .5s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px}
.option-card{
  border:2px solid var(--ink);border-radius:var(--radius-md);
  padding:20px 22px;cursor:pointer;transition:background .25s,transform .25s;
  position:relative;
}
.option-card:hover{transform:translateY(-3px)}
.option-card.selected{background:var(--teal)}
.option-card h4{margin:0 0 4px;font-size:1rem}
.option-card .opt-price{font-family:var(--ff-head);font-weight:700;color:var(--teal-dark);font-size:.85rem}
.option-card.selected .opt-price{color:var(--ink)}
.option-card small{display:block;color:#5b6067;margin-top:4px;font-size:.82rem}
.check-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
.check-item{
  display:flex;align-items:flex-start;gap:12px;
  border:2px solid var(--ink);border-radius:var(--radius-md);
  padding:16px 18px;cursor:pointer;transition:background .25s;
}
.check-item.selected{background:var(--yellow)}
.check-item input{margin-top:3px;width:18px;height:18px;accent-color:var(--ink)}
.check-item div h4{margin:0;font-size:.92rem}
.check-item div span{font-size:.8rem;color:#5b6067}
.check-item .add-price{margin-left:auto;font-family:var(--ff-head);font-weight:700;font-size:.85rem;white-space:nowrap}
.qty-row{display:flex;align-items:center;justify-content:space-between;border:2px solid var(--ink);border-radius:var(--radius-md);padding:16px 22px;margin-top:20px}
.qty-control{display:flex;align-items:center;gap:14px}
.qty-control button{width:34px;height:34px;border-radius:50%;border:2px solid var(--ink);background:var(--white);font-family:var(--ff-head);font-weight:700;font-size:1.1rem;line-height:1}
.qty-control span{font-family:var(--ff-head);font-weight:800;font-size:1.2rem;min-width:20px;text-align:center}

.calc-nav{display:flex;justify-content:space-between;margin-top:36px;gap:14px}

.pay-toggle{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.pay-option{
  border:2.5px solid var(--ink);border-radius:var(--radius-md);
  padding:26px 24px;cursor:pointer;transition:background .25s,transform .25s;
}
.pay-option:hover{transform:translateY(-3px)}
.pay-option.selected{background:var(--ink);color:var(--cream)}
.pay-option.selected .muted{color:rgba(245,242,234,.65)}
.pay-option h4{margin:0 0 6px}
.muted{color:#5b6067;font-size:.88rem;margin:0}
.finance-detail{
  margin-top:22px;border:2px dashed var(--ink);border-radius:var(--radius-md);
  padding:22px 24px;display:none;
}
.finance-detail.show{display:block}
.term-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.term-btn{
  border:2px solid var(--ink);border-radius:var(--radius-pill);
  padding:.55em 1.3em;font-family:var(--ff-head);font-weight:700;font-size:.78rem;
  background:var(--white);
}
.term-btn.selected{background:var(--teal)}
.summary-box{
  background:var(--cream);border:2px solid var(--ink);border-radius:var(--radius-md);
  padding:24px 26px;margin-top:20px;
}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.95rem;border-bottom:1px solid rgba(11,13,16,.1)}
.summary-row:last-child{border-bottom:none}
.summary-row.total{font-family:var(--ff-head);font-weight:800;font-size:1.3rem;padding-top:16px}
.summary-row .label{color:#5b6067}
.big-total{
  text-align:center;padding:30px 0 6px;
}
.big-total .num{font-family:var(--ff-head);font-weight:900;font-size:clamp(2.6rem,6vw,4rem);color:var(--teal-dark)}
.big-total .cap{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:#5b6067;font-weight:700}

/* ---------- Tracking ---------- */
.track-box{
  max-width:520px;margin:0 auto;text-align:center;
  border:2.5px solid var(--ink);border-radius:var(--radius-lg);
  background:var(--white);padding:clamp(28px,5vw,48px);
  box-shadow:var(--shadow-hard);
}
.track-input-row{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.track-input-row input{
  padding:1.1em 1.3em;border:2px solid var(--ink);border-radius:var(--radius-pill);
  background:var(--cream);font-weight:600;letter-spacing:.02em;text-align:center;
}
.track-input-row input:focus{outline:2px solid var(--teal-dark);outline-offset:2px}
.track-input-row button{width:100%}
.track-result{margin-top:40px;display:none}
.track-result.show{display:block;animation:fadein .5s var(--ease)}
.track-error{
  margin-top:24px;padding:16px 20px;border:2px solid var(--coral);border-radius:var(--radius-md);
  background:rgba(255,122,89,.08);color:#b6431f;font-weight:600;font-size:.9rem;display:none;
}
.track-error.show{display:block}
.track-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.track-head h3{margin:0}
.track-days{
  font-family:var(--ff-head);font-weight:900;font-size:2.2rem;color:var(--teal-dark);
}
.track-days span{display:block;font-family:var(--ff-body);font-size:.72rem;font-weight:700;text-transform:uppercase;color:#5b6067;letter-spacing:.06em}
.progress-track{position:relative;padding-left:2px}
.progress-line{position:absolute;left:19px;top:14px;bottom:14px;width:3px;background:#dcd7c9;z-index:0}
.progress-line-fill{position:absolute;left:19px;top:14px;width:3px;background:var(--teal-dark);z-index:1;transition:height .8s var(--ease)}
.stage{display:flex;gap:20px;position:relative;z-index:2;padding-bottom:30px}
.stage:last-child{padding-bottom:0}
.stage-dot{
  width:40px;height:40px;border-radius:50%;background:var(--white);border:3px solid #dcd7c9;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem;
}
.stage.done .stage-dot{border-color:var(--teal-dark);background:var(--teal-dark);color:#fff}
.stage.current .stage-dot{border-color:var(--coral);background:var(--coral);color:#fff}
.stage h4{margin:0 0 2px;font-size:1rem}
.stage p{margin:0;font-size:.85rem;color:#5b6067}
.stage.pending h4,.stage.pending p{color:#9a9a92}

/* ---------- Testimonial / trust ---------- */
.quote-card{
  border:2.5px solid var(--ink);border-radius:var(--radius-lg);
  padding:36px 32px;background:var(--white);height:100%;
  display:flex;flex-direction:column;
}
.quote-card .stars{color:var(--yellow);font-size:1rem;letter-spacing:2px;margin-bottom:14px}
.quote-card p{font-size:1rem;color:#333}
.quote-author{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px}
.quote-avatar{
  width:42px;height:42px;border-radius:50%;background:var(--teal);
  display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:800;
  border:2px solid var(--ink);
}
.quote-author b{display:block;font-size:.9rem}
.quote-author span{font-size:.78rem;color:#5b6067}

.carousel-wrap{position:relative;padding:0 8px}
.carousel-track{
  display:flex;align-items:stretch;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 14px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track .quote-card{
  scroll-snap-align:start;flex:0 0 auto;width:min(360px,82vw);
}
.carousel-arrow{
  position:absolute;top:calc(50% - 7px);transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;
  background:var(--white);border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;line-height:1;font-family:var(--ff-head);cursor:pointer;
  box-shadow:var(--shadow-hard);z-index:2;
}
.carousel-arrow:hover{background:var(--teal)}
.carousel-prev{left:-14px}
.carousel-next{right:-14px}
@media (max-width:760px){
  .carousel-arrow{display:none}
  .carousel-wrap{padding:0}
}

/* ---------- Newsletter / CTA capture ---------- */
.capture{
  background:var(--teal);border:2.5px solid var(--ink);border-radius:var(--radius-lg);
  padding:clamp(30px,5vw,54px);display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
}
.capture>div:first-child{text-align:center}
.capture h2{margin-bottom:14px}
.capture-form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:4px;text-align:center}
.field label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.field input,.field textarea,.field select{
  background:transparent;border:none;border-bottom:2px solid var(--ink);
  padding:.6em .1em;font-size:1rem;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink)}
.capture-form .btn{margin-top:10px;align-self:flex-start}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:var(--cream);padding:64px 0 76px;border-top:2px solid var(--ink)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(245,242,234,.15)}
.footer-brand p{color:rgba(245,242,234,.65);font-size:.92rem;max-width:34ch}
.footer-col h4{font-family:var(--ff-head);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--teal);margin-bottom:16px}
.footer-col li{margin-bottom:10px}
.footer-col a{color:rgba(245,242,234,.75);font-size:.9rem;transition:color .2s}
.footer-col a:hover{color:var(--teal)}
.footer-bottom{display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:24px;gap:6px;text-align:center}
.footer-bottom p{margin:0;font-size:.8rem;color:rgba(245,242,234,.5)}
.footer-bottom p.footer-verse{font-style:italic;color:var(--teal)}
.social-row{display:flex;gap:10px}
.social-row a{
  width:38px;height:38px;border:2px solid rgba(245,242,234,.3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;transition:background .2s,border-color .2s;
}
.social-row a:hover{background:var(--teal);border-color:var(--teal);color:var(--ink)}
.newsletter{margin:20px 0}
.newsletter-label{display:block;font-family:var(--ff-head);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);margin-bottom:10px}
.newsletter-form{display:flex;gap:8px;max-width:340px}
.newsletter-form input{
  flex:1;min-width:0;height:42px;background:transparent;border:2px solid rgba(245,242,234,.3);border-radius:var(--radius-pill);
  padding:0 16px;color:var(--cream);font-size:.85rem;line-height:1;
}
.newsletter-form input::placeholder{color:rgba(245,242,234,.4)}
.newsletter-form input:focus{outline:none;border-color:var(--teal)}
.newsletter-form button{height:42px;padding:0 1.1em;font-size:.68rem;white-space:nowrap}
.newsletter-note{margin-top:10px;font-size:.78rem;color:var(--teal);display:none}
.newsletter-note.show{display:block}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  position:relative;
  padding:64px 0 54px;
  border-bottom:2px solid var(--ink);
  background:
    radial-gradient(55% 80% at 94% -15%, rgba(47,230,201,.38), transparent 62%),
    radial-gradient(38% 55% at 2% 115%, rgba(255,122,89,.22), transparent 60%),
    var(--cream);
  overflow:hidden;
}
.page-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,13,16,.09) 1.5px, transparent 1.5px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 80%);
  mask-image:linear-gradient(to bottom, black, transparent 80%);
}
.page-hero .container{position:relative;z-index:1;text-align:center}
.page-hero .eyebrow{margin-bottom:18px;background:var(--white)}
.page-hero h1{max-width:17ch;margin-left:auto;margin-right:auto}
.page-hero p{max-width:56ch;font-size:1.05rem;color:#3a3f45;margin-left:auto;margin-right:auto}
.page-hero::after{
  content:'</> ÉLÈVEDERZA';
  position:absolute;top:14px;right:14px;z-index:1;
  transform:rotate(4deg);
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:var(--radius-pill);
  padding:.4em .9em;
  font-family:'Consolas',monospace;font-weight:700;font-size:.62rem;letter-spacing:.02em;
  display:none;
  box-shadow:4px 4px 0 rgba(11,13,16,.18);
}
@media (min-width:900px){ .page-hero::after{display:inline-block} }
.crumb{font-size:.8rem;color:#5b6067;margin-bottom:16px}
.crumb a{text-decoration:underline}

.anchor-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.anchor-chip{
  display:inline-flex;align-items:center;
  background:var(--white);border:2px solid var(--ink);border-radius:var(--radius-pill);
  padding:.55em 1.3em;
  font-family:var(--ff-head);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.02em;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.anchor-chip:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:3px 3px 0 rgba(11,13,16,.3)}

/* ---------- Portal stub ---------- */
.portal-box{
  max-width:460px;margin:0 auto;text-align:center;
  border:2.5px solid var(--ink);border-radius:var(--radius-lg);
  padding:50px 36px;background:var(--white);box-shadow:var(--shadow-hard);
}
.portal-box .lock{
  width:70px;height:70px;border-radius:50%;background:var(--yellow);border:2.5px solid var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 22px;
}

/* ---------- Utilities ---------- */
.text-center{text-align:center}
.mt-0{margin-top:0}
.mx-auto{margin-left:auto;margin-right:auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tag-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.tag{
  border:2px solid currentColor;border-radius:var(--radius-pill);
  padding:.4em 1em;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
}

/* ---------- Responsive ---------- */
@media (max-width:1360px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
}
@media (max-width:600px){
  /* The language switch + "Client Login" pill no longer fit next to the
     brand logo and hamburger on phone widths — they were forcing the nav
     row wider than the viewport, pushing the hamburger off-screen until
     the page was scrolled sideways. Both are already reachable from the
     mobile menu panel instead. */
  .nav-right .lang-switch,
  .nav-right > a.btn{display:none}
}
@media (max-width:980px){
  .hero-split{min-height:clamp(420px,74vh,560px)}
  .hero-foot{justify-content:center;text-align:center}
  /* The French badge text ("Montréal → Partout au Canada") is noticeably
     longer than the English one — shrink it enough on narrow screens
     that it always stays on one line instead of wrapping. */
  .hero-badge{font-size:.95rem;gap:8px}
  .hero-playground{grid-template-columns:1fr}
  .pg-editor-wrap,.pg-stage{min-height:220px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split-media{border-right:none;border-bottom:2.5px solid var(--ink)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .capture{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
}
@media (max-width:400px){
  .hero-badge{font-size:.78rem;gap:7px}
}
@media (max-width:760px){
  .pg-editor-wrap,.pg-stage{min-height:200px}
  .pg-highlight,.pg-editor{padding:18px;font-size:.78rem}
  .card-grid{grid-template-columns:1fr}
  .option-grid{grid-template-columns:1fr}
  .check-list{grid-template-columns:1fr}
  .calc-progress div{font-size:.52rem;padding:12px 2px}
  .calc-progress div span{white-space:nowrap}
  .calc-perks{flex-direction:column;align-items:flex-start}
  .option-card{text-align:center}
  .grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .pay-toggle{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{text-align:center}
  .anchor-row{flex-direction:column;align-items:stretch}
  .anchor-chip{justify-content:center}
  body.nav-open .mobile-panel{display:flex}

  /* Footer: logo/blurb/newsletter/socials stay centered, but Explore,
     Services and Contact+Hours go back to a plain full-width, left-
     aligned stack — the common pattern most sites use for a mobile
     footer, per feedback. */
  .footer-grid{grid-template-columns:1fr}
  .footer-brand{text-align:center}
  .footer-brand .newsletter-form{max-width:340px;margin:0 auto}
  .footer-brand .social-row{justify-content:center}
}

.mobile-panel{
  display:none;position:fixed;inset:0;top:0;background:var(--cream);z-index:200;
  flex-direction:column;padding:24px var(--pad);gap:6px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
/* Without this, a swipe inside the (visually full-screen) panel could
   fall through to the page underneath and scroll it instead — the panel
   needs its own scroll (above) and the body behind it needs to be
   frozen while it's open. */
body.nav-open{overflow:hidden}
.mobile-panel .mp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.mobile-panel a{
  font-family:var(--ff-head);font-size:1.3rem;font-weight:800;padding:14px 0;
  border-bottom:1px solid rgba(11,13,16,.1);
}
.mobile-panel .lang-switch{align-self:center}
.mobile-panel .social-row{justify-content:center;margin-top:24px}
.mobile-panel .social-row a{border-color:var(--ink);color:var(--ink)}
.mobile-panel .mp-actions{display:flex;align-items:center;justify-content:center;margin-bottom:28px}
/* Client Login sits with the other nav links (not up top with EN/FR
   anymore), but keeps its button look instead of the plain link style
   so it still stands out from the rest of the list. */
.mobile-panel a.btn{
  font-family:var(--ff-head);font-size:.85rem;font-weight:700;padding:.7em 1.3em;
  border:2.5px solid var(--ink);align-self:center;margin-top:16px;
}
.mobile-panel .close-btn{
  width:44px;height:44px;border:2px solid var(--ink);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:var(--white);
}

/* ============================================================
   ADMIN PANEL
   ============================================================ */
body.admin-body{background:var(--cream)}
.admin-main h1,.admin-main h2,.admin-topbar h1{text-align:left}
.admin-shell{display:flex;min-height:100vh}
.admin-sidebar{
  width:230px;flex-shrink:0;background:var(--ink);color:var(--cream);
  padding:26px 18px;position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column;
}
.admin-sidebar .brand-mark{font-size:1.2rem;margin-bottom:30px;display:block;padding:0 8px}
.admin-nav a{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ff-head);font-size:.8rem;font-weight:600;letter-spacing:.02em;
  color:rgba(245,242,234,.7);padding:.8em 1em;border-radius:var(--radius-md);
  margin-bottom:4px;transition:background .2s,color .2s;
}
.admin-nav a:hover{background:rgba(245,242,234,.08);color:var(--cream)}
.admin-nav a.active{background:var(--teal);color:var(--ink)}
.admin-sidebar .admin-logout{margin-top:auto;padding-top:20px}
.admin-main{flex:1;padding:36px 40px;max-width:1180px}

/* ---------- Audio toggle (fixed, sitewide) ---------- */
.audio-toggle{
  position:fixed;left:18px;bottom:18px;z-index:300;
  background:var(--ink);color:var(--teal);
  border:2.5px solid var(--ink);border-radius:var(--radius-pill);
  padding:.6em 1.1em;font-family:var(--ff-head);font-weight:700;font-size:.7rem;letter-spacing:.04em;
  box-shadow:var(--shadow-hard);cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease;
}
.audio-toggle:hover{transform:translateY(-2px)}
.audio-toggle.is-muted{background:var(--white);color:#8a8578}
@media (max-width:760px){.audio-toggle{left:12px;bottom:12px;font-size:.62rem;padding:.5em .9em}}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:14px}
.admin-topbar h1{font-size:1.7rem;margin:0}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:30px}
.admin-stat{border:2px solid var(--ink);border-radius:var(--radius-md);padding:18px 20px;background:var(--white)}
.admin-stat b{display:block;font-family:var(--ff-head);font-size:1.4rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-stat span{font-size:.78rem;color:#5b6067}
.admin-card{border:2px solid var(--ink);border-radius:var(--radius-md);background:var(--white);padding:26px;margin-bottom:24px}
.admin-card h2{font-size:1.15rem;margin-bottom:16px}
.admin-table{width:100%;border-collapse:collapse;font-size:.88rem}
.admin-table th{text-align:left;font-family:var(--ff-head);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:#5b6067;padding:10px 12px;border-bottom:2px solid var(--ink)}
.admin-table td{padding:12px;border-bottom:1px solid rgba(11,13,16,.1);vertical-align:middle}
.admin-table tr:hover td{background:rgba(47,230,201,.06)}
.admin-form label{display:block;font-family:var(--ff-head);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;color:#3a3f45}
.admin-form input,.admin-form select,.admin-form textarea{
  width:100%;border:2px solid var(--ink);border-radius:var(--radius-sm);padding:.7em .9em;
  font-family:var(--ff-body);font-size:.92rem;background:var(--white);margin-bottom:16px;
}
/* A native file input isn't a real box the way a text input is — its
   actual clickable "Browse" control lives inside whatever box the
   browser draws, and stretching that box with width/padding the same
   way as a text input (as the rule above does) throws off where the
   real click target ends up, to the point of not being clickable at
   all in some browsers. Let it render with its native, unstyled box. */
.admin-form input[type=file]{width:auto;border:none;padding:.4em 0;background:none}
.admin-form textarea{resize:vertical}
.admin-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.admin-form .form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.btn-sm{padding:.5em 1em;font-size:.7rem}
.btn-danger{border-color:var(--coral);color:var(--coral)}
.btn-danger:hover{background:var(--coral);color:var(--white)}
.stage-badge{
  display:inline-block;font-family:var(--ff-head);font-size:.68rem;font-weight:700;
  padding:.3em .8em;border-radius:var(--radius-pill);border:2px solid var(--ink);text-transform:uppercase;
}
.action-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.admin-flash{
  background:var(--teal);border:2px solid var(--ink);border-radius:var(--radius-md);
  padding:14px 18px;margin-bottom:20px;font-weight:600;font-size:.9rem;
}
.admin-flash.error{background:var(--coral);color:var(--white)}
.admin-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink)}
.admin-menu-toggle{display:none}
@media (max-width:900px){
  .admin-shell{flex-direction:column}
  .admin-sidebar{width:100%;height:auto;position:relative;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
  .admin-sidebar .brand-mark{margin-bottom:0}
  .admin-nav{display:flex;flex-wrap:wrap;gap:6px}
  .admin-sidebar .admin-logout{margin-top:0;padding-top:0}
  .admin-main{padding:24px 18px}
  .admin-form .form-row,.admin-form .form-row-3{grid-template-columns:1fr}
}