:root{
  --navy:#16283C;
  --green:#1D9E75;
  --paper:#F8F9F7;
  --light:#E3E7E2;
  --slate:#7E8A87;
  --muted:#46555F;
  --white:#FFFFFF;
  --sans:'DM Sans',Inter,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--navy);line-height:1.5;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---- language toggle ---- */
body:not(.lang-en) .en{display:none!important}
body.lang-en .fr{display:none!important}

/* ---- shared ---- */
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:108px 0}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.eyebrow::before{content:"";display:inline-block;width:26px;height:2px;background:var(--green);flex:none}
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.08}
h2{font-size:clamp(30px,4.4vw,48px);max-width:18ch}
.lead{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:62ch;margin-top:20px}
.dot{color:var(--green)}
a{color:inherit}

/* ---- header ---- */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .35s,box-shadow .35s;background:transparent}
header.solid{background:rgba(248,249,247,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--light)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-weight:700;font-size:25px;letter-spacing:-.02em;text-decoration:none}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-links{display:flex;gap:26px}
.nav-links a{text-decoration:none;font-size:15px;font-weight:500;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--navy)}
.lang-switch{font-family:var(--mono);font-size:12.5px;display:flex;gap:2px;border:1px solid var(--light);border-radius:6px;overflow:hidden}
.lang-switch button{font-family:inherit;font-size:inherit;border:0;background:transparent;color:var(--slate);padding:6px 10px;cursor:pointer;transition:.2s}
.lang-switch button.on{background:var(--navy);color:var(--paper)}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:15.5px;padding:13px 26px;border-radius:8px;transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s,background .25s;will-change:transform}
.btn-primary{background:var(--navy);color:var(--paper)}
.btn-primary:hover{background:var(--green);transform:translateY(-2px);box-shadow:0 10px 24px rgba(29,158,117,.28)}
.btn-ghost{border:1.5px solid var(--light);color:var(--navy)}
.btn-ghost:hover{border-color:var(--navy);transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:14px}
@media(max-width:860px){.nav-links{display:none}}

/* ---- hero ---- */
.hero{padding:176px 0 64px;position:relative}
.hero h1{font-size:clamp(42px,7.2vw,84px)}
.hero .line{display:block;overflow:hidden}
.hero .line>span{display:block;transform:translateY(110%)}
.hero .lead{margin-top:26px}
.hero-cta{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap;opacity:0}
.hero-eyebrow{opacity:0}

/* ---- connector ---- */
.connector{margin:40px 0 0;opacity:0}
.connector svg{width:100%;height:auto;display:block}
.connector .rail{stroke:var(--light);stroke-width:1.5;fill:none}
.connector .wire{stroke:#9fb0bd;stroke-width:1.5;fill:none}
.connector .node{fill:var(--paper);stroke:#9fb0bd;stroke-width:1.5}
.connector .lbl{font-family:var(--mono);font-size:12px;fill:var(--slate)}
.connector .lbl-end{font-family:var(--mono);font-size:13.5px;font-weight:500;fill:var(--green)}
.connector .pulse{fill:var(--green);opacity:0}

/* ---- problem cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:54px}
.card{background:var(--white);border:1px solid var(--light);border-radius:12px;padding:30px 28px;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(22,40,60,.08)}
.card .num{font-family:var(--mono);font-size:12.5px;color:var(--slate);letter-spacing:.1em}
.card h3{font-size:20.5px;margin:14px 0 10px;line-height:1.25}
.card p{font-size:15.5px;color:var(--muted)}
@media(max-width:860px){.cards{grid-template-columns:1fr}}

/* ---- navy band (diagnostic) ---- */
.band{background:var(--navy);color:var(--paper);border-radius:0}
.band .eyebrow{color:#8fa0ae}
.band h2{color:var(--white)}
.band .lead{color:#b9c4cc}
.deliv{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid rgba(248,249,247,.16)}
.deliv>div{padding:30px 28px 8px 0;border-right:1px solid rgba(248,249,247,.16)}
.deliv>div:last-child{border-right:0}
.deliv .num{font-family:var(--mono);color:var(--green);font-size:13px}
.deliv h3{font-size:19px;margin:12px 0 10px;color:var(--white)}
.deliv p{font-size:15px;color:#b9c4cc}
.band .btn-primary{background:var(--green);color:#fff;margin-top:48px}
.band .btn-primary:hover{background:#23b886}
.band .note{font-family:var(--mono);font-size:13px;color:#8fa0ae;margin-top:18px}
@media(max-width:860px){.deliv{grid-template-columns:1fr}.deliv>div{border-right:0;border-bottom:1px solid rgba(248,249,247,.16);padding-right:0}}

/* ---- stages ---- */
.stages{position:relative;margin-top:60px}
.stage-line{position:absolute;top:0;left:0;right:0;height:2px;background:var(--light)}
.stage-line i{display:block;height:100%;background:var(--green);transform:scaleX(0);transform-origin:left}
.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding-top:42px}
.stage .num{font-family:var(--mono);font-size:13px;color:var(--slate)}
.stage h3{font-size:22px;margin:10px 0 4px}
.stage .tag{font-family:var(--mono);font-size:12.5px;color:var(--green);letter-spacing:.08em;text-transform:uppercase}
.stage p{font-size:15.5px;color:var(--muted);margin-top:12px}
@media(max-width:860px){.stage-grid{grid-template-columns:1fr}}

/* ---- pillars ---- */
.pillars{margin-top:54px}
.pillar{display:grid;grid-template-columns:90px 1fr 1.2fr;gap:24px;padding:30px 0;border-top:1px solid var(--light);align-items:baseline}
.pillar:last-child{border-bottom:1px solid var(--light)}
.pillar .num{font-family:var(--mono);font-size:14px;color:var(--slate);transition:color .4s}
.pillar.lit .num{color:var(--green)}
.pillar h3{font-size:20px;line-height:1.25}
.pillar p{font-size:15.5px;color:var(--muted)}
@media(max-width:860px){.pillar{grid-template-columns:1fr;gap:8px;padding:24px 0}}

/* ---- contact ---- */
.contact h2{max-width:none}
.contact .mail{display:inline-block;font-size:clamp(24px,3.6vw,44px);font-weight:700;letter-spacing:-.02em;color:var(--white);text-decoration:none;margin-top:30px;border-bottom:3px solid var(--green);padding-bottom:6px;transition:color .25s}
.contact .mail:hover{color:var(--green)}
.contact .meta{margin-top:34px;font-family:var(--mono);font-size:13.5px;color:#8fa0ae;display:flex;gap:34px;flex-wrap:wrap}

/* ---- footer ---- */
footer{background:var(--navy);color:#8fa0ae;border-top:1px solid rgba(248,249,247,.12);padding:34px 0}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
footer .logo{color:var(--paper);font-size:21px}
footer small{font-size:13px}

/* ---- mobile-only elements: hidden on desktop by default ---- */
.connector-m{display:none}
.hamburger{display:none}
.mobile-menu{display:none}

/* ============================================================
   MOBILE LAYER — desktop styles above are untouched.
   Menu + tablet tuning kicks in at 860px (matches nav-links).
   Phone tuning + vertical connector at 640px.
   ============================================================ */

/* ---- hamburger + mobile menu (<=860px) ---- */
@media(max-width:860px){
  header{z-index:60}              /* keep header (and the X) above the menu overlay */
  .hamburger{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:42px;padding:9px;border:0;background:transparent;cursor:pointer;
    -webkit-tap-highlight-color:transparent;z-index:60;
  }
  .hamburger span{display:block;height:2px;width:100%;background:var(--navy);border-radius:2px;transition:transform .3s ease,opacity .25s ease}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .nav-right{gap:14px}

  .mobile-menu{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    position:fixed;inset:0;z-index:54;
    background:var(--paper);
    padding:96px 28px 40px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s ease,transform .3s ease,visibility .3s;
  }
  .mobile-menu.open{opacity:1;visibility:visible;transform:none}
  .mm-links{display:flex;flex-direction:column}
  .mm-links a{
    text-decoration:none;color:var(--navy);font-weight:700;letter-spacing:-.02em;
    font-size:30px;padding:16px 0;border-bottom:1px solid var(--light);
  }
  .mm-links a:active{color:var(--green)}
  .mm-cta{margin-top:28px;text-align:center;padding:16px 26px;font-size:17px}
  body.menu-open{overflow:hidden}
}

/* ---- phone tuning (<=640px) ---- */
@media(max-width:640px){
  /* swap connector: hide horizontal, show vertical */
  .connector-d{display:none}
  .connector-m{display:block;max-width:330px;margin:34px auto 0}

  .header-cta{display:none}            /* CTA lives in the menu now */

  section{padding:72px 0}
  .wrap{padding:0 22px}

  .hero{padding:120px 0 40px}
  .hero h1{font-size:clamp(40px,11vw,60px)}
  .hero .lead{margin-top:22px;font-size:17px}
  .hero-cta{margin-top:30px;gap:12px}
  .hero-cta .btn{flex:1 1 auto;text-align:center}

  .eyebrow{margin-bottom:18px}
  h2{font-size:clamp(27px,7.4vw,36px)}
  .lead{font-size:17px}

  .cards{margin-top:34px;gap:14px}
  .card{padding:26px 22px}
  .card:hover{transform:none;box-shadow:none}   /* no hover lift on touch */

  .deliv{margin-top:36px}
  .deliv>div{padding:24px 0 6px}
  .band .btn-primary{margin-top:36px}

  .stages{margin-top:40px}
  .stage-grid{gap:30px;padding-top:34px}

  .pillars{margin-top:36px}
  .pillar{gap:6px;padding:22px 0}

  .contact .meta{gap:8px 24px;margin-top:26px}

  footer .wrap{justify-content:flex-start}
}

/* ---- very small phones (<=400px) ---- */
@media(max-width:400px){
  .mm-links a{font-size:26px;padding:14px 0}
  .hero h1{font-size:clamp(34px,11vw,48px)}
}

/* ---- reveal helper ---- */
.rv{opacity:0;transform:translateY(34px)}

@media(prefers-reduced-motion:reduce){
  .rv,.hero .line>span,.hero-cta,.hero-eyebrow,.connector{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}