/* ============================================
   FABIEN DUPONT - GLOBAL STYLES
   Font: Open Sans | Palette: Navy/Blue
   ============================================ */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --nv:#0F1A2E;--nm:#1A2942;--nl:#243656;
  --sl:#3A4A5C;--st:#7A8A9C;--sv:#B0BCC8;
  --cl:#E8ECF0;--of:#F5F6F8;--wt:#FFF;
  --ac:#4A90D9;--as:#6BA3E0;--wm:#D4A76A;
  --fn:'Open Sans',Helvetica,Arial,sans-serif;
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--fn);color:var(--nv);background:var(--of);overflow-x:hidden}

/* ANIMATIONS */
@keyframes fu{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.rv{opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease}
.rv.v{opacity:1;transform:translateY(0)}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}

/* ============================================
   NAV
   ============================================ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0 3rem;height:64px;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(15,26,46,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s;
}
nav.scrolled{background:rgba(15,26,46,.98)}
.nav-name{font-size:1.1rem;font-weight:700;color:var(--wt);text-decoration:none;letter-spacing:.01em}
.nav-name span{color:var(--as);font-weight:400}
.nav-links{display:flex;gap:1.8rem;align-items:center}
.nav-links a{font-size:.78rem;font-weight:500;color:var(--sv);text-decoration:none;letter-spacing:.02em;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--wt)}
.nav-cta{
  font-size:.75rem;font-weight:600;color:var(--wt);text-decoration:none;
  padding:.5rem 1.2rem;border:1px solid rgba(255,255,255,.2);
  letter-spacing:.03em;transition:all .2s;
}
.nav-cta:hover{background:var(--ac);border-color:var(--ac)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:.5rem;flex-direction:column;gap:4px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--wt)}

/* ============================================
   COMMON SECTIONS
   ============================================ */
section{padding:6rem 3rem}
.ct{max-width:1080px;margin:0 auto}
.ct-narrow{max-width:700px;margin:0 auto}

.s-tag{
  font-size:.7rem;font-weight:700;color:var(--ac);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.2rem;
}
h2{font-family:var(--fn);font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;color:var(--nv);line-height:1.2;margin-bottom:1.2rem}
h3{font-family:var(--fn);font-size:1.3rem;font-weight:700;color:var(--nv);line-height:1.3;margin-bottom:.7rem}

.prose{font-size:1rem;font-weight:400;color:var(--sl);line-height:1.8}
.prose p{margin-bottom:1.2rem}
.prose strong{font-weight:600;color:var(--nv)}
.tl{color:var(--ac);text-decoration:none;font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s}
.tl:hover{border-bottom-color:var(--ac)}

.bp{
  font-size:.82rem;font-weight:600;color:var(--wt);background:var(--ac);
  padding:.75rem 1.8rem;border:1px solid var(--ac);text-decoration:none;
  letter-spacing:.03em;display:inline-block;transition:all .2s;
}
.bp:hover{background:var(--as);border-color:var(--as);transform:translateY(-1px);box-shadow:0 4px 16px rgba(74,144,217,.25)}
.bs-btn{
  font-size:.82rem;font-weight:600;color:var(--ac);background:transparent;
  padding:.75rem 1.8rem;border:1px solid var(--ac);text-decoration:none;
  letter-spacing:.03em;display:inline-block;transition:all .2s;
}
.bs-btn:hover{background:var(--ac);color:var(--wt)}

/* DARK SECTION */
.sec-dark{background:var(--nv);color:var(--wt)}
.sec-dark h2{color:var(--wt)}
.sec-dark .s-tag{color:var(--as)}
/* ALT BG */
.sec-alt{background:var(--wt)}

/* ============================================
   PAGE HERO (inner pages)
   ============================================ */
.page-hero{padding:9rem 3rem 4.5rem;background:var(--nv);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 70% 100%,rgba(74,144,217,.08),transparent)}
.page-hero .ct{position:relative;z-index:2}
.page-hero .s-tag{color:var(--as)}
.page-hero h1{font-size:clamp(2.2rem,4.5vw,3.2rem);font-weight:700;color:var(--wt);line-height:1.15;margin-bottom:1.2rem;animation:fu .7s ease .2s both}
.page-hero p{font-size:1.05rem;font-weight:400;color:var(--sv);line-height:1.7;max-width:620px;animation:fu .7s ease .4s both}

/* ============================================
   HOMEPAGE HERO
   ============================================ */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--nv);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 20% 80%,rgba(74,144,217,.07),transparent)}
.hc{position:relative;z-index:2;text-align:center;max-width:800px;padding:2rem}
.hero-name{font-size:1rem;font-weight:600;color:var(--as);letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.2rem;animation:fu .7s ease .3s both}
.hero h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;color:var(--wt);line-height:1.15;margin-bottom:1.5rem;animation:fu .7s ease .5s both}
.hero .hl{font-size:.78rem;font-weight:600;color:var(--as);letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.8rem;animation:fu .7s ease .2s both}
.hero .hb{font-size:1.02rem;font-weight:400;color:var(--st);line-height:1.7;max-width:560px;margin:0 auto 2.2rem;animation:fu .7s ease .7s both}
.hero .hx{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fu .7s ease .9s both}
.hero .btn-ghost{font-size:.82rem;font-weight:600;color:var(--sv);background:transparent;padding:.75rem 1.8rem;border:1px solid rgba(255,255,255,.2);text-decoration:none;letter-spacing:.03em;display:inline-block;transition:all .2s}
.hero .btn-ghost:hover{color:var(--wt);border-color:rgba(255,255,255,.5)}

/* ============================================
   HOMEPAGE BLOCKS
   ============================================ */
/* Problem callout */
.callout{font-size:1.15rem;font-weight:600;color:var(--nv);border-left:2px solid var(--ac);padding-left:1.5rem;margin-top:1.5rem;line-height:1.55}

/* Framework cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:2rem 0}
.card{background:var(--wt);padding:2rem;border:1px solid var(--cl);position:relative;overflow:hidden;transition:box-shadow .2s}
.card:hover{box-shadow:0 4px 20px rgba(0,0,0,.05)}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.card:nth-child(1)::before{background:var(--st)}
.card:nth-child(2)::before{background:var(--ac)}
.card:nth-child(3)::before{background:var(--wm)}
.card-num{font-size:.68rem;font-weight:700;color:var(--st);letter-spacing:.12em;margin-bottom:.7rem}
.card:nth-child(2) .card-num{color:var(--ac)}
.card:nth-child(3) .card-num{color:var(--wm)}
.card p{font-size:.92rem;color:var(--sl);line-height:1.65;margin-bottom:.5rem}
.card .outcome{font-size:.85rem;color:var(--st);font-style:italic;padding-top:.6rem;border-top:1px solid var(--cl)}

/* Metrics */
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:2rem 0}
.mc{background:var(--nm);border:1px solid rgba(255,255,255,.06);padding:1.8rem 1.4rem;text-align:center;transition:background .2s}
.mc:hover{background:var(--nl)}
.m-num{font-size:2.6rem;font-weight:700;color:var(--wt);line-height:1}
.m-unit{font-size:.78rem;font-weight:600;color:var(--as);margin-top:.25rem;letter-spacing:.03em}
.m-lbl{font-size:.78rem;color:var(--st);margin-top:.4rem;line-height:1.4}
.m-note{font-size:.85rem;color:var(--st);margin-top:.8rem;text-align:center}
.m-note a{color:var(--as);text-decoration:underline;text-underline-offset:2px}

/* Audience */
.aud-row{padding:1rem 0;border-bottom:1px solid var(--cl);display:flex;gap:1.2rem;align-items:baseline}
.aud-row:last-child{border-bottom:none}
.aud-type{font-size:1rem;font-weight:700;color:var(--nv);min-width:180px;flex-shrink:0}
.aud-desc{font-size:.95rem;color:var(--sl);font-weight:400;line-height:1.6}
.aud-note{font-size:.98rem;color:var(--nv);font-weight:500;line-height:1.6;margin-top:1.5rem;padding:1.2rem 1.5rem;background:rgba(74,144,217,.06);border-left:2px solid var(--ac)}

/* ============================================
   INNER PAGE COMPONENTS
   ============================================ */
/* Phase sections (framework page) */
.phase-section{padding:5.5rem 3rem}
.phase-section:nth-child(odd){background:var(--wt)}
.phase-section:nth-child(even){background:var(--of)}
.phase-header{display:flex;align-items:flex-start;gap:1.5rem;margin-bottom:2rem}
.phase-number{font-size:3.5rem;font-weight:300;color:var(--cl);line-height:1;flex-shrink:0;min-width:70px}
.phase-subtitle{font-size:.9rem;font-weight:400;color:var(--st);line-height:1.5;margin-top:.2rem}
.phase-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.phase-content{font-size:.98rem;font-weight:400;color:var(--sl);line-height:1.8}
.phase-content p{margin-bottom:1rem}
.phase-outcome{background:var(--of);border-left:2px solid var(--ac);padding:1.5rem;border-radius:0 2px 2px 0}
.phase-section:nth-child(1) .phase-outcome{border-left-color:var(--st)}
.phase-section:nth-child(2) .phase-outcome{border-left-color:var(--ac)}
.phase-section:nth-child(3) .phase-outcome{border-left-color:var(--wm)}
.phase-section:nth-child(even) .phase-outcome{background:var(--wt)}
.outcome-label{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--st);margin-bottom:.5rem}
.outcome-text{font-size:.95rem;font-weight:500;color:var(--nv);line-height:1.5}

/* Journey bar */
.journey{background:var(--of);padding:2.5rem 3rem}
.journey-bar{display:flex;align-items:center;justify-content:center}
.journey-step{text-align:center;padding:.8rem 1.8rem}
.journey-dot{width:10px;height:10px;border-radius:50%;margin:0 auto .5rem;border:2px solid var(--cl)}
.journey-step.active .journey-dot{background:var(--ac);border-color:var(--ac)}
.journey-label{font-size:.68rem;font-weight:600;color:var(--st);letter-spacing:.06em;text-transform:uppercase}
.journey-step.active .journey-label{color:var(--ac)}
.journey-line{width:50px;height:1px;background:var(--cl);margin-bottom:1rem}

/* Qualification items */
.q-items{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.2rem}
.q-item{padding:1rem 1.2rem 1rem 2.2rem;border:1px solid var(--cl);font-size:.92rem;color:var(--sl);line-height:1.6;position:relative}
.q-item::before{content:'';position:absolute;left:.9rem;top:1.15rem;width:6px;height:6px;border-radius:50%;background:var(--ac)}

/* Steps (transformation) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.5rem}
.step{padding:1.8rem;background:var(--wt);border:1px solid var(--cl)}
.step-num{font-size:2.5rem;font-weight:300;color:var(--cl);line-height:1;margin-bottom:.8rem}
.step p{font-size:.92rem;color:var(--sl);line-height:1.65}

/* Deliverables */
.del-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.2rem}
.del-item{padding:1.2rem 1.5rem;border-left:2px solid var(--ac);background:var(--of)}
.del-item h4{font-size:.92rem;font-weight:700;color:var(--nv);margin-bottom:.3rem}
.del-item p{font-size:.88rem;color:var(--sl);line-height:1.55}

/* Timeline */
.tl-bar{display:flex;align-items:center;gap:0;margin:1.5rem 0;justify-content:center}
.tl-block{text-align:center;padding:1.2rem 2rem;background:var(--wt);border:1px solid var(--cl)}
.tl-block:nth-child(2){background:var(--nm);border-color:transparent}
.tl-block:nth-child(2) .tl-label,.tl-block:nth-child(2) .tl-weeks{color:var(--wt)}
.tl-weeks{font-size:1.6rem;font-weight:700;color:var(--nv);margin-bottom:.2rem}
.tl-label{font-size:.72rem;color:var(--st);letter-spacing:.05em;text-transform:uppercase}
.tl-arrow{font-size:1.2rem;color:var(--cl);margin:0 .4rem}

/* Outcome grid */
.out-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.2rem}
.out-card{padding:1.2rem;border:1px solid var(--cl);text-align:center}
.out-card h4{font-size:1rem;font-weight:700;color:var(--nv);margin-bottom:.3rem}
.out-card p{font-size:.85rem;color:var(--st);line-height:1.45}

/* Advisory includes */
.inc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.2rem}
.inc-card{padding:1.5rem;background:var(--wt);border:1px solid var(--cl);border-top:2px solid var(--ac)}
.inc-card h3{font-size:1.05rem;margin-bottom:.4rem}
.inc-card p{font-size:.92rem;color:var(--sl);line-height:1.65}

/* For-who list */
.for-item{padding:1rem 0 1rem 1.3rem;border-bottom:1px solid var(--cl);font-size:.98rem;color:var(--sl);line-height:1.65;position:relative}
.for-item::before{content:'';position:absolute;left:0;top:1.15rem;width:5px;height:5px;border-radius:50%;background:var(--ac)}
.for-item:last-child{border-bottom:none}

/* Case study results */
.r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.5rem 0}
.r-card{background:var(--nm);border:1px solid rgba(255,255,255,.06);padding:1.5rem;text-align:center}
.r-num{font-size:2.2rem;font-weight:700;color:var(--wt);line-height:1}
.r-unit{font-size:.78rem;font-weight:600;color:var(--as);margin-top:.2rem}
.r-desc{font-size:.78rem;color:var(--st);margin-top:.4rem;line-height:1.35}

/* Hero meta (case study) */
.hero-meta{display:flex;gap:2rem;margin-top:1.2rem;animation:fu .7s ease .6s both}
.hero-meta-item{font-size:.72rem;font-weight:600;color:var(--st);letter-spacing:.05em;text-transform:uppercase}
.hero-meta-item span{display:block;font-size:.92rem;color:var(--wt);text-transform:none;letter-spacing:0;margin-top:.2rem;font-weight:500}

/* Impact quote */
.impact-quote{font-size:1.1rem;font-weight:600;color:var(--nv);border-left:2px solid var(--ac);padding-left:1.5rem;margin-top:1.5rem;line-height:1.55}

/* Capability cards (network) */
.cap-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.2rem}
.cap-card{padding:1.5rem;background:var(--wt);border:1px solid var(--cl);transition:box-shadow .2s}
.cap-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.04)}
.cap-icon{font-size:1.4rem;margin-bottom:.8rem;color:var(--ac)}
.cap-card p{font-size:.92rem;color:var(--sl);line-height:1.65}

/* Neutral highlight */
.neutral-highlight{font-size:1.05rem;font-weight:600;color:var(--nv);border-left:2px solid var(--ac);padding-left:1.5rem;margin-top:1.5rem;line-height:1.5}

/* Pillars (about page) */
.pil-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.2rem}
.pil-card{padding:1.5rem;background:var(--wt);border:1px solid var(--cl);border-top:2px solid var(--st)}
.pil-card:nth-child(2){border-top-color:var(--ac)}
.pil-card:nth-child(3){border-top-color:var(--wm)}
.pil-card:nth-child(4){border-top-color:var(--sl)}
.pil-card h3{font-size:1.05rem;margin-bottom:.4rem}
.pil-card p{font-size:.92rem;color:var(--sl);line-height:1.65}

/* Credentials */
.cred-row{display:flex;gap:2.5rem;margin-top:1.2rem;flex-wrap:wrap}
.cred-group h4{font-size:.68rem;font-weight:700;color:var(--ac);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.4rem}
.cred-group p{font-size:.9rem;color:var(--sl);line-height:1.55}

/* Contact page */
.contact-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:7rem 3rem 4rem;background:var(--nv);position:relative}
.contact-page::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 50% at 50% 80%,rgba(74,144,217,.06),transparent)}
.contact-inner{position:relative;z-index:2;text-align:center;max-width:560px;width:100%}
.contact-label{font-size:.72rem;font-weight:700;color:var(--as);letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.5rem}
.contact-inner h1{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;color:var(--wt);line-height:1.2;margin-bottom:1.2rem}
.contact-body{font-size:1rem;font-weight:400;color:var(--sv);line-height:1.7;margin-bottom:2rem}
.cal-embed{background:var(--nm);border:1px solid rgba(255,255,255,.06);padding:2.5rem 2rem;margin-bottom:1.5rem}
.cal-embed a{display:inline-block;font-size:.88rem;font-weight:600;color:var(--wt);background:var(--ac);padding:.85rem 2.5rem;text-decoration:none;transition:all .2s}
.cal-embed a:hover{background:var(--as);transform:translateY(-1px)}
.cal-embed p{font-size:.82rem;color:var(--st);margin-top:.8rem}
.alt-contact p{font-size:.88rem;color:var(--st);line-height:1.6}
.alt-contact a{color:var(--as);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.alt-contact a:hover{border-bottom-color:var(--as)}
.social-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;font-size:.85rem;color:var(--st)}

/* CTA sections */
.pg-cta{background:var(--nv);padding:5rem 3rem;text-align:center;position:relative;overflow:hidden}
.pg-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 100%,rgba(74,144,217,.08),transparent)}
.pg-cta .ct{position:relative;z-index:2}
.pg-cta h2{color:var(--wt);margin-bottom:.8rem}
.pg-cta p{font-size:1rem;font-weight:400;color:var(--st);line-height:1.7;max-width:520px;margin:0 auto 1.8rem}
.pg-cta .cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cross{font-size:.85rem;color:var(--st);margin-top:1.2rem}
.cross a{color:var(--as);text-decoration:none}

/* ============================================
   FOOTER
   ============================================ */
footer{background:var(--nv);border-top:1px solid rgba(255,255,255,.06);padding:3.5rem 3rem 2rem}
.footer-inner{max-width:1080px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.5rem}
.footer-brand{font-size:1rem;font-weight:700;color:var(--wt);margin-bottom:.3rem}
.footer-tagline{font-size:.82rem;color:var(--st);margin-bottom:.5rem}
.footer-location{font-size:.78rem;color:var(--st);line-height:1.5}
.footer-heading{font-size:.68rem;font-weight:700;color:var(--sv);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.8rem}
.footer-col a{display:block;font-size:.82rem;color:var(--st);text-decoration:none;padding:.25rem 0;transition:color .2s}
.footer-col a:hover{color:var(--wt)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:1.5rem;text-align:center}
.footer-bottom p{font-size:.72rem;color:var(--st)}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:900px){
  .nav-links{display:none}
  nav.open .nav-links{display:flex;flex-direction:column;position:absolute;top:64px;left:0;right:0;background:var(--nv);padding:1.5rem 3rem;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav-toggle{display:flex}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  nav{padding:0 1.5rem}
  section,.phase-section{padding:3.5rem 1.5rem}
  .hero{padding:6rem 1.5rem}
  .page-hero{padding:7rem 1.5rem 3.5rem}
  .cards,.steps,.del-grid,.inc-grid,.cap-grid,.pil-grid,.out-grid,.r-grid{grid-template-columns:1fr}
  .mg{grid-template-columns:1fr 1fr}
  .q-items{grid-template-columns:1fr}
  .phase-grid{grid-template-columns:1fr}
  .aud-row{flex-direction:column;gap:.2rem}
  .aud-type{min-width:auto}
  .hero-meta{flex-direction:column;gap:.8rem}
  .hx{flex-direction:column;align-items:center}
  .tl-bar{flex-direction:column}.tl-arrow{transform:rotate(90deg)}
  .cred-row{flex-direction:column;gap:1.2rem}
  .pg-cta .cta-row{flex-direction:column;align-items:center}
  .footer-grid{grid-template-columns:1fr}
  footer{padding:2.5rem 1.5rem 1.5rem}
}