/* Campus Aggregator — redesigned site (2026) */
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --blue:#0000cc; --blue-deep:#0000a3; --navy:#000833; --navy-2:#0a1642;
  --orange:#e86100; --orange-soft:#ff7a1a;
  --ink:#12142b; --muted:#5a6178; --line:#e3e6f0;
  --bg:#f6f7fc; --card:#ffffff;
  --radius:16px; --shadow:0 10px 30px rgba(2,10,60,.08);
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* The nav is sticky, so #about / #mission etc. must stop clear of it — without this
   every in-page link parks its heading underneath the bar. Nav is 89px (78px on
   phones); a little extra keeps the heading off the border. */
html{scroll-behavior:smooth;scroll-padding-top:108px}
@media(max-width:520px){html{scroll-padding-top:94px}}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---------- top bar ---------- */
.topbar{background:var(--navy);color:#c6cdea;font-size:.78rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:14px}
.topbar a{display:inline-flex;align-items:center;gap:7px;color:#c6cdea}
.topbar a:hover{color:#fff}
.topbar img{width:14px;height:14px;filter:brightness(0) invert(.85)}
@media(max-width:700px){.topbar .tb-addr span{display:none}.topbar .tb-addr:after{content:"Powai, Mumbai"}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 4px 18px rgba(2,10,60,.08)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:92px;gap:26px}
/* Logo lockup — BOTH halves are crops of the OFFICIAL artwork (images/logo.svg):
   logo-mark.svg = the book emblem, logo-word.svg = the real "Campus Aggregator"
   wordmark. Sir, Jul 21 eve: use the brand mark, not typed text, and make it
   bigger. STACKED (emblem on top, wordmark under it) — Maneesha, Jul 21 night.
   Stacking is also what fixed the nav: side by side the lockup was 318px wide and
   squeezed the links until every one of them wrapped onto two lines. Stacked it is
   ~225px, which leaves the six links ~44px of slack on one clean line. */
/* The wordmark is ~10.7:1, so its height drives the whole lockup width. At 25px the
   lockup is 268px and the six links clear it by only 20px at 1200px wide — do NOT
   raise this without re-measuring that slack, or the nav starts wrapping again. */
.nav .logo{display:flex;align-items:center;text-decoration:none;flex:none}
/* Single OFFICIAL lockup (images/logo.svg = book emblem + "Campus Aggregator" text,
   correct proportions). Sir, Jul 28: the two-crop wordmark looked stretched (~10.7:1
   crop was far wider than the book); the official artwork keeps text width ≈ book. */
.nav .logo .logo-full{height:78px;width:auto;flex:none}
@media(max-width:520px){
  .nav .wrap{min-height:80px;gap:14px}
  .nav .logo .logo-full{height:64px}
}
@media(max-width:360px){
  .nav .logo .logo-full{height:56px}
}
.nav-links{display:flex;align-items:center;gap:19px}
/* One line, never wrapped — the burger takes over below 1180px (see below), so on
   the desktop nav there is always room for the full label. */
.nav-links>li>a{white-space:nowrap}
.nav-links>li{position:relative}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--ink);padding:8px 0;display:block}
.nav-links a:hover{color:var(--blue)}
.nav-links a.active{color:var(--blue)}
.has-drop>a:after{content:"";display:inline-block;margin-left:7px;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px)}
.drop{position:absolute;top:100%;left:-14px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);min-width:240px;padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(2px)}
.drop a{padding:10px 14px;border-radius:8px;font-size:.88rem}
.drop a:hover{background:var(--bg);color:var(--blue)}
.nav-cta{background:var(--orange);color:#fff !important;padding:11px 22px !important;border-radius:999px;font-weight:600;box-shadow:0 6px 16px rgba(232,97,0,.3)}
.nav-cta:hover{background:var(--orange-soft);color:#fff}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:2.5px;background:var(--navy);border-radius:2px;transition:.25s}
/* 1180px, not 1120px: below this the six labels no longer fit beside the lockup on
   one line, and a wrapped nav is exactly the thing we removed. Burger instead. */
@media(max-width:1180px){
  .burger{display:flex}
  .nav-links{position:fixed;inset:0;top:0;background:#fff;flex-direction:column;justify-content:center;gap:14px;font-size:1.1rem;transform:translateX(100%);transition:.3s;z-index:99}
  .nav-links>li>a{white-space:normal}   /* full-screen menu has its own width */
  .nav-links.open{transform:none}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;text-align:center;display:none;padding:0}
  .has-drop.open .drop{display:block}
  .nav-links a{text-align:center}
  body.menulock{overflow:hidden}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:999px;font-weight:600;font-size:.93rem;transition:.2s;border:0;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(0,0,204,.28)}
.btn-primary:hover{background:var(--blue-deep);transform:translateY(-2px)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(232,97,0,.28)}
.btn-orange:hover{background:var(--orange-soft);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}
.btn-light{background:#fff;color:var(--blue)}
.btn-light:hover{transform:translateY(-2px)}

/* ---------- hero (v2 light) ---------- */
.hero{background:
  radial-gradient(900px 480px at 88% -10%, rgba(0,0,204,.07), transparent 60%),
  radial-gradient(700px 420px at -10% 100%, rgba(232,97,0,.07), transparent 60%),
  linear-gradient(#ffffff,#f6f7fc);
  position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero:before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(0,8,51,.10) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(600px 420px at 78% 40%,#000 20%,transparent 70%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:74px;padding-bottom:84px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:18px}
.hero-eyebrow:before{content:"";width:26px;height:2px;background:var(--orange)}
.hero h1{font-size:clamp(2rem,4.4vw,3.25rem);line-height:1.12;font-weight:700;letter-spacing:-.6px;color:var(--navy)}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero h1 em.o{color:var(--orange)}
.hero p.sub{margin:22px 0 30px;color:var(--muted);font-size:1.06rem;max-width:52ch}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-chips{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}
.chip-f{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-size:.82rem;font-weight:500;color:var(--ink);box-shadow:0 4px 14px rgba(2,10,60,.06)}
.chip-f svg{width:16px;height:16px;flex:none}

/* hero product mock cluster */
.mock{position:relative;min-height:430px}
.mcard{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px rgba(2,10,60,.13)}
.mc-main{top:24px;left:0;right:39%;padding:24px 22px 22px}
.mc-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.mc-logo{width:38px;height:38px;border-radius:10px;background:var(--blue);display:grid;place-items:center;flex:none}
.mc-logo svg{width:20px;height:20px}
.mc-head b{font-size:.92rem;color:var(--navy);display:block;line-height:1.3}
.mc-head span{font-size:.72rem;color:var(--muted)}
.mc-prog{height:9px;border-radius:99px;background:#edf0fa;overflow:hidden;margin:6px 0 14px}
.mc-prog i{display:block;height:100%;width:78%;border-radius:99px;background:linear-gradient(90deg,var(--blue),#4a55f0)}
.mc-row{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted);margin-bottom:6px}
.mc-row b{color:var(--ink);font-weight:600}
.mc-mods{display:grid;gap:8px;margin-top:14px}
.mc-mod{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--ink);background:#f8f9fe;border:1px solid #eef0f9;border-radius:9px;padding:8px 12px}
.mc-mod .tick{width:17px;height:17px;border-radius:50%;background:#e9f7ee;color:#1a7f37;display:grid;place-items:center;font-size:.6rem;font-weight:700;flex:none}
.mc-mod.cur .tick{background:#fff1e6;color:var(--orange)}
.mc-score{right:0;top:40px;width:196px;padding:18px 20px}
.mc-score h5{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.mc-score .big{font-size:1.7rem;font-weight:700;color:var(--navy)}
.mc-score .big span{font-size:.85rem;color:var(--muted);font-weight:500}
.mc-bars{display:flex;gap:5px;align-items:flex-end;height:40px;margin-top:12px}
.mc-bars i{flex:1;border-radius:4px 4px 0 0;background:#dfe4f7}
.mc-bars i.hot{background:var(--orange)}
.mc-place{left:6%;bottom:0;padding:14px 20px;display:flex;align-items:center;gap:12px}
.mc-place .pb{width:34px;height:34px;border-radius:50%;background:#e9f7ee;color:#1a7f37;display:grid;place-items:center;font-weight:700;flex:none}
.mc-place b{font-size:.83rem;color:var(--navy);display:block}
.mc-place span{font-size:.72rem;color:var(--muted)}
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;padding-top:52px;padding-bottom:60px}
  .mock{min-height:400px;max-width:520px;margin:0 auto;width:100%}
  .mc-main{left:0;right:12%}
  .mc-score{right:-4px}
}
@media(max-width:480px){
  .mc-score{position:static;width:auto;margin-top:10px;display:none}
  .mc-main{position:static}
  .mc-place{position:static;margin-top:14px}
  .mock{min-height:0;display:grid;gap:0}
}

/* ---------- sections ---------- */
.sec{padding:84px 0}
.sec-alt{background:#fff}
.sec-head{max-width:680px;margin-bottom:46px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.kicker:before{content:"";width:22px;height:2px;background:var(--orange)}
.sec-head.center .kicker:after{content:"";width:22px;height:2px;background:var(--orange)}
h2.title{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:700;line-height:1.2;letter-spacing:-.4px;color:var(--navy)}
.sec-head p{margin-top:14px;color:var(--muted)}

/* about */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-grid .pic{border-radius:20px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.about-grid .pic:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,0,204,.12),transparent 50%)}
.about-copy p{color:var(--muted);margin-bottom:16px}
.tick-list li{display:flex;gap:12px;margin-bottom:12px;color:var(--ink);font-size:.95rem}
.tick-list li:before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue);margin-top:2px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/14px no-repeat;
  background:var(--blue)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}

/* values band */
.values{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.values:before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 90% 10%,rgba(0,0,204,.4),transparent 60%)}
.values .wrap{position:relative}
.values h2.title{color:#fff}
.values .sec-head p{color:#aab4dd}
.mission-quote{background:linear-gradient(120deg,var(--blue),#2a35e8);border-radius:var(--radius);padding:30px 36px;display:flex;gap:18px;align-items:flex-start;margin-bottom:44px;box-shadow:0 18px 40px rgba(0,0,60,.35)}
.mission-quote .q{font-size:2.4rem;font-weight:700;color:#ffb27a;line-height:1}
.mission-quote p{font-size:1.15rem;font-weight:500}
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.val-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:30px 26px;transition:.25s}
.val-card:hover{background:rgba(255,255,255,.09);transform:translateY(-4px)}
.val-card img{width:52px;height:52px;margin-bottom:18px;filter:brightness(0) invert(1)}
.val-card h3{font-size:1.06rem;margin-bottom:8px}
.val-card p{font-size:.88rem;color:#aab4dd}
@media(max-width:800px){.val-grid{grid-template-columns:1fr}}

/* platform (CA Connect) */
.platform-card{background:linear-gradient(135deg,#001060,#0018a8);border-radius:24px;color:#fff;padding:56px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;box-shadow:0 26px 60px rgba(0,8,80,.35);position:relative;overflow:hidden}
.platform-card:before{content:"";position:absolute;inset:0;background:radial-gradient(500px 300px at 100% 0%,rgba(232,97,0,.22),transparent 55%)}
.platform-card>*{position:relative}
.platform-card h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;margin-bottom:14px}
.platform-card p{color:#c9d2f2;margin-bottom:26px}
.plat-ctas{display:flex;gap:14px;flex-wrap:wrap}
/* The "More details / Create an account" line under the three login buttons.
   Sits on the dark platform card, so the links are warm-light, not blue. */
.plat-more{margin:15px 0 0;font-size:.92rem}
.plat-more a{color:#ffd9c0;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.plat-more a:hover{color:#fff}
.plat-more .sep{color:#8fa0d8;margin:0 9px}
@media(max-width:560px){.plat-more{font-size:.87rem}.plat-more .sep{display:block;height:0;margin:6px 0;visibility:hidden}}
.diff{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:24px}
.diff h4{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#ffb27a;margin-bottom:12px}
.diff ul li{display:flex;gap:10px;font-size:.88rem;color:#dde3f8;margin-bottom:10px}
.diff ul li:before{content:"→";color:var(--orange-soft);font-weight:700}
.diff+.diff{margin-top:16px}
@media(max-width:900px){.platform-card{grid-template-columns:1fr;padding:36px 26px}}

/* gap section */
.gap-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.gap-copy p{color:var(--muted);margin-bottom:16px}
.stat-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.stat-card b{font-size:1.9rem;color:var(--blue);font-weight:700;display:block;line-height:1.15}
.stat-card span{font-size:.85rem;color:var(--muted)}
.stat-card.orange b{color:var(--orange)}
@media(max-width:900px){.gap-grid{grid-template-columns:1fr}}

/* steps */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:step}
.step-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;position:relative;box-shadow:var(--shadow);transition:.25s}
.step-card:hover{transform:translateY(-5px)}
.step-card:before{counter-increment:step;content:"0" counter(step);font-size:2.2rem;font-weight:700;color:transparent;-webkit-text-stroke:1.5px var(--blue);display:block;margin-bottom:14px;opacity:.85}
.step-card:nth-child(even):before{-webkit-text-stroke-color:var(--orange)}
.step-card p{font-size:.92rem;color:var(--ink)}
@media(max-width:960px){.steps-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps-grid{grid-template-columns:1fr}}

/* vertical timeline (process page) */
.timeline{position:relative;max-width:640px;margin:0 auto;padding-left:34px}
.timeline:before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--blue),var(--orange))}
.tl-item{position:relative;padding-bottom:30px}
.tl-item:before{content:"";position:absolute;left:-31px;top:5px;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--blue)}
.tl-item:nth-child(even):before{border-color:var(--orange)}
.tl-item h3{font-size:1.02rem;font-weight:600}
.tl-item p{font-size:.9rem;color:var(--muted)}

/* curriculum cards */
.curr-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.curr-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);border-top:4px solid var(--blue)}
.curr-card:nth-child(even){border-top-color:var(--orange)}
.curr-card h3{font-size:1.12rem;margin-bottom:16px;color:var(--navy)}
.curr-card ul li{display:flex;gap:10px;font-size:.92rem;color:var(--muted);margin-bottom:10px}
.curr-card ul li:before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--orange);margin-top:9px}
@media(max-width:800px){.curr-grid{grid-template-columns:1fr}}

/* experts */
.exp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:24px}
.exp-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.25s;text-align:center}
.exp-card:hover{transform:translateY(-5px)}
.exp-card .ph{aspect-ratio:1/1.05;overflow:hidden;background:#e8ebf7}
.exp-card .ph img{width:100%;height:100%;object-fit:cover;object-position:top}
.exp-card .nm{padding:18px 14px 20px}
.exp-card .nm b{display:block;font-size:.98rem;color:var(--navy);font-weight:600}
.exp-card .nm a{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:.8rem;color:var(--blue);font-weight:500}
.exp-card .nm a:hover{color:var(--orange)}
.exp-card .nm a img{width:14px;height:14px}

/* page hero (subpages) */
.page-hero{background:linear-gradient(130deg,var(--navy),#001580);color:#fff;padding:64px 0 58px;position:relative;overflow:hidden}
.page-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(520px 280px at 88% 30%,rgba(232,97,0,.2),transparent 60%)}
.page-hero .wrap{position:relative}
.page-hero .crumb{font-size:.78rem;color:#9fabd8;margin-bottom:12px}
.page-hero .crumb a:hover{color:#fff}
.page-hero h1{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;letter-spacing:-.4px}
.page-hero p.lead{margin-top:14px;color:#c9d2f2;max-width:62ch}

/* Sir, 1 Sep 2026: the blue header on the four sub-pages carries the page title and
   nothing else — the breadcrumb repeated the title and the lead line was filler.
   Its padding and title size were set for a stack of three, so with one line left the
   band read as a title adrift in a lot of empty navy. Tightened, and the title given
   the size a page title should have.
   Matched by :has(), not by a new class, so it applies wherever a header genuinely has
   only a title. Six older pages still carry their breadcrumb and lead and are untouched
   by this; browsers without :has() simply keep the original spacing. */
.page-hero:has(.wrap > h1:only-child){padding-top:52px}
.page-hero:has(.wrap > h1:only-child) h1{font-size:clamp(1.9rem,4vw,3rem)}

/* prose */
.prose{max-width:760px}
.prose p{color:var(--muted);margin-bottom:18px}
.prose strong{color:var(--ink)}

/* principle cards (way of work) */
.prin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prin-card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:12px;padding:26px;box-shadow:var(--shadow)}
.prin-card h3{font-size:1rem;margin-bottom:8px;color:var(--navy)}
.prin-card p{font-size:.88rem;color:var(--muted)}
@media(max-width:800px){.prin-grid{grid-template-columns:1fr}}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--orange),#ff8c2e);border-radius:20px;color:#fff;padding:44px 48px;display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;box-shadow:0 20px 44px rgba(232,97,0,.3)}
.cta-band h3{font-size:1.4rem;font-weight:700}
.cta-band p{color:#ffe4cd;font-size:.92rem;margin-top:4px}

/* contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:26px;align-items:stretch}
.c-info{background:var(--navy);border-radius:var(--radius);color:#fff;padding:38px 34px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.c-info:before{content:"";position:absolute;inset:0;background:radial-gradient(400px 240px at 100% 100%,rgba(0,0,204,.45),transparent 60%)}
.c-info>*{position:relative}
.c-info h3{font-size:1.3rem;margin-bottom:6px}
.c-info>p{color:#aab4dd;font-size:.88rem;margin-bottom:20px}
.c-row{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-top:1px solid rgba(255,255,255,.12);font-size:.9rem;color:#dde3f8}
.c-row img{width:18px;height:18px;filter:brightness(0) invert(1);margin-top:3px}
.c-social{display:flex;gap:12px;margin-top:auto;padding-top:22px}
.c-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:.2s}
.c-social a:hover{background:var(--orange)}
.c-social img{width:16px;height:16px;filter:brightness(0) invert(1)}
.c-form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:38px 34px;box-shadow:var(--shadow)}
.c-form h3{font-size:1.3rem;color:var(--navy);margin-bottom:4px}
.c-form>p{font-size:.86rem;color:var(--muted);margin-bottom:22px}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-grid .full{grid-column:1/-1}
.inp{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:10px;font-family:inherit;font-size:.9rem;color:var(--ink);background:#fbfcff;transition:.2s}
.inp:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,0,204,.08)}
textarea.inp{resize:vertical;min-height:96px}
.f-file{font-size:.8rem;color:var(--muted)}
.f-file input{margin-top:6px;font-size:.8rem}
.f-msg{margin-top:12px;font-size:.85rem;font-weight:500;display:none;padding:10px 14px;border-radius:8px}
.f-msg.err{display:block;background:#fdecec;color:#a02020}
.f-msg.ok{display:block;background:#e9f7ee;color:#116329}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}.f-grid{grid-template-columns:1fr}}

/* footer */
footer{background:var(--navy);color:#aab4dd;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:38px;padding:64px 0 44px}
/* Footer mark — emblem only, no wordmark, no panel. It sits directly on the navy:
   the book's white pages carry the shape, so the #3754A4 cover reads fine without a
   backing plate. Bigger than the old lockup because it is now the only element. */
.foot-grid .fcol img.flogo{height:72px;width:auto;margin-bottom:18px}
@media(max-width:520px){.foot-grid .fcol img.flogo{height:60px}}
.foot-grid .fcol>p{font-size:.85rem;line-height:1.7}
.fcol h4{color:#fff;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.fcol ul li{margin-bottom:10px}
.fcol ul a{font-size:.87rem;color:#aab4dd}
.fcol ul a:hover{color:#fff}
.f-contact li{display:flex;gap:10px;font-size:.85rem;margin-bottom:12px}
.f-contact img{width:15px;height:15px;filter:brightness(0) invert(.8);margin-top:4px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:.78rem;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.foot-bottom a{color:#aab4dd}
.foot-bottom a:hover{color:#fff}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* reveal animation */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* thank you */
.ty{min-height:52vh;display:grid;place-items:center;padding:70px 22px}
.ty-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:56px 48px;text-align:center;max-width:520px}
.ty-card .tick{width:74px;height:74px;border-radius:50%;background:#e9f7ee;display:grid;place-items:center;margin:0 auto 22px;font-size:2rem;color:#1a7f37}
.ty-card h1{font-size:1.6rem;color:var(--navy);margin-bottom:10px}
.ty-card p{color:var(--muted);font-size:.95rem;margin-bottom:26px}

/* ---------- ecosystem diagram (about, v2) ---------- */
.eco{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:34px 30px;display:grid;gap:16px}
.eco-row{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.eco-node{background:#f8f9fe;border:1px solid #e8ebf8;border-radius:14px;padding:18px 16px;text-align:center}
.eco-node .ic{width:44px;height:44px;border-radius:12px;margin:0 auto 10px;display:grid;place-items:center;background:var(--blue)}
.eco-node.orange .ic{background:var(--orange)}
.eco-node .ic svg{width:22px;height:22px}
.eco-node b{font-size:.9rem;color:var(--navy);display:block}
.eco-node span{font-size:.74rem;color:var(--muted)}
.eco-link{display:flex;flex-direction:column;gap:4px;align-items:center;color:var(--muted)}
.eco-link svg{width:30px;height:16px}
.eco-hub{background:linear-gradient(130deg,var(--navy),#001580);border-radius:14px;color:#fff;text-align:center;padding:22px 16px}
.eco-hub img{height:52px;width:auto;margin:0 auto 8px}
.eco-hub b{display:block;font-size:.95rem}
.eco-hub span{font-size:.74rem;color:#aab4dd}
.eco-tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.eco-tags i{font-style:normal;font-size:.66rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:3px 10px;border-radius:99px;color:#dde3f8}

/* ---------- media clippings (Serviceability Gap) ---------- */
.media-cap{text-align:center;margin-top:48px;font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.media-band{display:flex;gap:18px;margin-top:20px;overflow-x:auto;padding:6px 4px 18px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.media-clip{flex:0 0 300px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:.25s}
.media-clip:hover{transform:translateY(-4px)}
.media-clip img{width:100%;height:auto;display:block}
.media-band::-webkit-scrollbar{height:8px}
.media-band::-webkit-scrollbar-thumb{background:rgba(0,8,51,.25);border-radius:4px}
@media(max-width:600px){.media-clip{flex-basis:240px}}
.steps-labeled .step-card:before{display:none}

/* step number label + platform differentiator label */
.stp{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.diff-label{font-weight:600;color:#ffb27a;margin-bottom:14px;font-size:1.02rem}
.c-follow{font-weight:600;color:#fff;margin-right:12px;align-self:center}
.mq-label{font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}

/* ================= v3 advanced design layer ================= */
:root{
  --grad-blue:linear-gradient(135deg,#0000cc,#3d33ff);
  --grad-orange:linear-gradient(135deg,#e86100,#ff8c2e);
  --shadow:0 2px 6px rgba(2,10,60,.05),0 18px 40px rgba(2,10,60,.09);
}
::selection{background:rgba(0,0,204,.16)}
html{scrollbar-color:#98a2c8 #eef0f8}

/* glass sticky nav + animated link underline */
.nav{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(2,10,60,.07)}
.nav-links>li>a{position:relative}
.nav-links>li>a:not(.nav-cta):after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:2px;border-radius:2px;background:var(--grad-orange);transition:right .28s ease}
.nav-links>li>a:not(.nav-cta):hover:after,.nav-links>li>a.active:not(.nav-cta):after{right:0}

/* buttons: gradients + shine sweep */
.btn{position:relative;overflow:hidden}
.btn:before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);transition:left .5s ease;pointer-events:none}
.btn:hover:before{left:135%}
.btn-primary{background:var(--grad-blue)}
.btn-primary:hover{background:var(--grad-blue);filter:brightness(1.1);box-shadow:0 12px 28px rgba(0,0,204,.38)}
.btn-orange{background:var(--grad-orange)}
.btn-orange:hover{background:var(--grad-orange);filter:brightness(1.07);box-shadow:0 12px 28px rgba(232,97,0,.4)}
.nav-cta{background:var(--grad-orange)}
.nav-cta:hover{background:var(--grad-orange);filter:brightness(1.07)}

/* hero: aurora blob + gradient headline + floating cards */
.hero .wrap{z-index:1}
.hero:after{content:"";position:absolute;width:560px;height:560px;border-radius:50%;right:-150px;top:-170px;background:conic-gradient(from 90deg,rgba(0,0,204,.10),rgba(232,97,0,.10),rgba(61,51,255,.08),rgba(0,0,204,.10));filter:blur(70px);animation:blobspin 16s linear infinite;pointer-events:none}
@keyframes blobspin{to{transform:rotate(360deg)}}
.hero h1 em{background:var(--grad-blue);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 em.o{background:var(--grad-orange);-webkit-background-clip:text;background-clip:text;color:transparent}
.chip-f{transition:.25s}
.chip-f:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(2,10,60,.1)}
.mcard{border:1px solid rgba(2,10,60,.06);box-shadow:0 2px 8px rgba(2,10,60,.06),0 30px 60px rgba(2,10,60,.16)}
.mc-score{animation:bob 5.5s ease-in-out infinite}
.mc-place{animation:bob 6.5s ease-in-out 1.2s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.mc-prog i{position:relative;overflow:hidden}
.mc-prog i:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55),transparent 70%);animation:shimmer 2.6s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* section headers: pill kicker */
.kicker{background:rgba(232,97,0,.08);border:1px solid rgba(232,97,0,.18);padding:6px 16px;border-radius:999px;margin-bottom:16px}
.kicker:before{width:6px;height:6px;border-radius:50%;background:var(--orange)}
.sec-head.center .kicker:after{width:6px;height:6px;border-radius:50%;background:var(--orange)}
h2.title{letter-spacing:-.8px}

/* cards: accents + deeper hover */
.stat-card{position:relative;overflow:hidden;transition:.28s}
.stat-card:after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-blue)}
.stat-card.orange:after{background:var(--grad-orange)}
.stat-card:hover,.curr-card:hover,.prin-card:hover{transform:translateY(-5px);box-shadow:0 4px 10px rgba(2,10,60,.06),0 26px 50px rgba(2,10,60,.13)}
.curr-card,.prin-card{transition:.28s}
.step-card:hover{box-shadow:0 4px 10px rgba(2,10,60,.06),0 26px 50px rgba(2,10,60,.13)}
.val-card:hover{border-color:rgba(255,178,122,.45);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.exp-card:hover{box-shadow:0 4px 10px rgba(2,10,60,.06),0 26px 50px rgba(2,10,60,.13)}
.exp-card .ph img{transition:transform .5s ease}
.exp-card:hover .ph img{transform:scale(1.05)}

/* mission quote: slow gradient drift */
.mission-quote{background:linear-gradient(120deg,#0000cc,#2a35e8,#4a55f0,#2a35e8,#0000cc);background-size:300% 100%;animation:gradshift 11s ease infinite}
@keyframes gradshift{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* media clippings: edge fade */
.media-band{mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}

/* subpage hero: dotted texture */
.page-hero .wrap{z-index:1}
.page-hero:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(560px 320px at 12% 30%,#000,transparent 70%);mask-image:radial-gradient(560px 320px at 12% 30%,#000,transparent 70%);pointer-events:none}
.page-hero .crumb{display:inline-block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);padding:4px 14px;border-radius:999px}

/* timeline markers glow */
.tl-item:before{box-shadow:0 0 0 5px rgba(0,0,204,.12)}
.tl-item:nth-child(even):before{box-shadow:0 0 0 5px rgba(232,97,0,.14)}

/* contact + footer */
.inp:hover{border-color:#c9cfe6}
footer{position:relative}
footer:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--orange))}
.fcol ul a{display:inline-block;transition:.2s}
.fcol ul a:hover{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  .hero:after,.mc-score,.mc-place,.mc-prog i:after,.mission-quote{animation:none}
}

/* ---------- clipping lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(0,8,51,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:30px 74px}
.lb.open{display:flex}
.lb img{max-width:min(92vw,980px);max-height:86vh;width:auto;height:auto;border-radius:14px;background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-size:1.3rem;line-height:1;display:grid;place-items:center;transition:.2s}
.lb-close:hover{background:var(--orange)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;font-size:1.5rem;display:grid;place-items:center;transition:.2s}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-prev:hover,.lb-next:hover{background:var(--blue)}
.lb-count{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#c6cdea;font-size:.85rem;background:rgba(255,255,255,.1);padding:6px 16px;border-radius:999px}
@media(max-width:700px){.lb{padding:16px 10px}.lb-prev,.lb-next{width:42px;height:42px}.lb-prev{left:6px}.lb-next{right:6px}.lb img{max-width:96vw}}

/* ================= v4 wow layer ================= */
/* page fade-in */
@keyframes pagefade{from{opacity:0}to{opacity:1}}
body{animation:pagefade .45s ease}

/* scroll progress bar */
.progressbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--blue),var(--orange));z-index:300;pointer-events:none}

/* ecosystem diagram: flowing links + pulsing nodes + breathing hub */
@keyframes dashflow{to{stroke-dashoffset:-26}}
.eco-link svg .flow{stroke-dasharray:7 6;animation:dashflow 1.1s linear infinite;stroke:#8a93b8}
.eco-node .ic{position:relative}
.eco-node .ic:after{content:"";position:absolute;inset:-5px;border-radius:14px;border:2px solid rgba(0,0,204,.3);animation:icpulse 2.8s ease-out infinite}
.eco-node.orange .ic:after{border-color:rgba(232,97,0,.35);animation-delay:1.4s}
@keyframes icpulse{0%{opacity:.9;transform:scale(.88)}65%{opacity:0;transform:scale(1.3)}100%{opacity:0;transform:scale(1.3)}}
@keyframes hubglow{0%,100%{box-shadow:0 6px 18px rgba(0,8,80,.25)}50%{box-shadow:0 16px 40px rgba(0,0,204,.45)}}
.eco-hub{animation:hubglow 4.5s ease-in-out infinite}

/* values: icon pop-in on reveal */
.val-card.rv.in img{animation:iconpop .8s cubic-bezier(.34,1.56,.64,1) both .15s}
@keyframes iconpop{0%{transform:scale(.35) rotate(-10deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}

/* platform card: rotating gradient border glow */
@property --pang{syntax:'<angle>';initial-value:0deg;inherits:false}
.platform-card{border:1.5px solid transparent;
  background:linear-gradient(135deg,#001060,#0018a8) padding-box,
  conic-gradient(from var(--pang),transparent 0%,rgba(255,178,122,.9) 10%,rgba(90,120,255,.8) 22%,transparent 34%) border-box}
@supports (background:conic-gradient(from var(--pang),#000,#fff)){
  .platform-card{animation:borderspin 7s linear infinite}
}
@keyframes borderspin{to{--pang:360deg}}

/* steps: animated dashed connector through the gaps */
@media(min-width:961px){
  .steps-grid{position:relative}
  .steps-grid:before{content:"";position:absolute;left:3%;right:3%;top:50%;height:2px;
    background:repeating-linear-gradient(90deg,rgba(0,0,204,.4) 0 9px,transparent 9px 18px);
    animation:dashslide 1s linear infinite}
  .step-card{z-index:1}
}
@keyframes dashslide{to{background-position:18px 0}}

/* media clippings: auto-drift marquee (JS driven) */
.media-band.drifting{scroll-behavior:auto}

/* tilt targets get GPU hint */
.stat-card,.curr-card{will-change:transform}

/* process timeline: scroll-drawn line + marker pop */
.timeline:before{opacity:.2}
.timeline:after{content:"";position:absolute;left:10px;top:6px;width:2px;height:var(--tlp,0%);max-height:calc(100% - 12px);background:linear-gradient(var(--blue),var(--orange));border-radius:2px;transition:height .18s linear}
.tl-item:before{transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s}
.tl-item.rv:not(.in):before{transform:scale(.3)}

/* expert photo: gradient ring on hover */
.exp-card .ph{position:relative}
.exp-card .ph:after{content:"";position:absolute;inset:0;border:0 solid transparent;transition:.28s;pointer-events:none;
  border-image:linear-gradient(135deg,var(--blue),var(--orange)) 1}
.exp-card:hover .ph:after{border-width:4px}

/* line-art illustrations */
.wow-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media(max-width:860px){.wow-grid{grid-template-columns:1fr}.wow-ill{max-width:300px;margin:0 auto}}
.wow-ill svg{width:100%;height:auto}
.ill-draw{stroke-dasharray:600;stroke-dashoffset:600}
.rv.in .ill-draw.d1,.ty .ill-draw.d1{animation:illdraw 1.1s ease forwards .1s}
.rv.in .ill-draw.d2,.ty .ill-draw.d2{animation:illdraw .8s ease forwards .9s}
@keyframes illdraw{to{stroke-dashoffset:0}}
.ill-spin{transform-origin:center;animation:spinslow 40s linear infinite}
@keyframes spinslow{to{transform:rotate(360deg)}}
.ill-float{animation:bob 5s ease-in-out infinite}
.ill-float.f2{animation-duration:6.2s;animation-delay:.8s}
.ill-float.f3{animation-duration:7s;animation-delay:1.6s}
.tick-svg{background:none !important}
.tick-svg svg{width:74px;height:74px}

/* contact card paper plane */
.c-info{overflow:hidden}
.c-plane{position:absolute;right:10px;bottom:64px;width:150px;opacity:.9;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  body,.eco-link svg .flow,.eco-node .ic:after,.eco-hub,.val-card.rv.in img,.platform-card,
  .steps-grid:before,.ill-spin,.ill-float,.progressbar{animation:none}
  .ill-draw{stroke-dashoffset:0}
  .timeline:after{height:100%}
}

/* ================= v5 layer: wave dividers, flip cards, duotone experts ================= */
/* wave section dividers (JS-injected) */
.wave{position:absolute;left:0;right:0;top:-1px;line-height:0;pointer-events:none;z-index:2}
.wave svg{display:block;width:100%;height:clamp(28px,4.5vw,56px)}
.wave.bot{top:auto;bottom:-1px;transform:scaleY(-1)}
.values{padding-bottom:110px}
.page-hero{padding-bottom:96px}
footer{overflow:hidden}
footer:before{display:none}
.foot-grid{padding-top:96px}

/* value cards: 3D flip (hover devices), static stack on touch */
.val-card.flip{padding:0;background:none;border:0;perspective:950px}
.val-card.flip:hover{transform:none;box-shadow:none;background:none;border-color:transparent}
.vc-inner{position:relative;min-height:232px;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.35,.15,.25,1)}
.val-card.flip:hover .vc-inner,.val-card.flip:focus-visible .vc-inner{transform:rotateY(180deg)}
.vc-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--radius);padding:30px 26px;display:flex;flex-direction:column;justify-content:center}
.vc-front{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.vc-front img{width:52px;height:52px;margin-bottom:18px;filter:brightness(0) invert(1)}
.vc-front h3{font-size:1.08rem}
.vc-hint{position:absolute;right:22px;bottom:16px;font-size:.7rem;color:#8f9ac4;letter-spacing:.04em}
.vc-back{background:var(--grad-blue);transform:rotateY(180deg);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.vc-back h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#ffb27a;margin-bottom:10px}
.vc-back p{font-size:.95rem;color:#eef0ff}
.val-grid>.val-card.flip:nth-child(2) .vc-back{background:var(--grad-orange)}
.val-grid>.val-card.flip:nth-child(2) .vc-back h3{color:#001040}
@media (hover:none),(max-width:800px){
  .val-card.flip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:30px 26px}
  .vc-inner{min-height:0;transform:none !important}
  .vc-face{position:static;transform:none;padding:0;background:none;border:0;box-shadow:none;display:block}
  /* out-specifies the nth-child(2) orange flip-face gradient, which otherwise
     paints a bar behind the text in the static stack */
  .val-grid>.val-card.flip:nth-child(2) .vc-back{background:none}
  .vc-back h3,.vc-hint{display:none}
  .vc-back p{color:#dfe4f7;font-size:.9rem;margin-top:8px}
}

/* program experts: blue duotone photos, colour on hover */
@media (hover:hover){
  .exp-card .ph img{filter:grayscale(1) contrast(1.06) brightness(1.03);transition:filter .5s ease,transform .5s ease}
  .exp-card .ph:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:color;
    background:linear-gradient(135deg,rgba(0,0,204,.55),rgba(0,8,51,.45));transition:opacity .5s ease}
  .exp-card:hover .ph img{filter:none}
  .exp-card:hover .ph:before{opacity:0}
  .exp-card .ph:after{z-index:2}
}

@media(prefers-reduced-motion:reduce){
  .vc-inner{transition:none}
}

/* ================= v6 layer: 404, back-to-top, curriculum icons, mobile menu ================= */
/* 404 page */
.nf-code{font-size:5.2rem;font-weight:700;line-height:1;letter-spacing:-2px;margin-bottom:8px;
  background:linear-gradient(135deg,#0000cc 30%,#e86100);-webkit-background-clip:text;background-clip:text;color:transparent}

/* back to top */
.totop{position:fixed;left:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--grad-blue);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,204,.35);
  z-index:90;opacity:0;visibility:hidden;transform:translateY(16px);transition:.3s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{filter:brightness(1.12);transform:translateY(-3px)}
.totop svg{width:20px;height:20px}
@media(max-width:600px){.totop{left:12px;bottom:12px;width:42px;height:42px}}

/* curriculum card icons */
.cc-ic{width:48px;height:48px;border-radius:13px;background:rgba(0,0,204,.08);display:grid;place-items:center;margin-bottom:16px}
.cc-ic svg{width:24px;height:24px;stroke:var(--blue);fill:none}
.curr-card:nth-child(even) .cc-ic{background:rgba(232,97,0,.09)}
.curr-card:nth-child(even) .cc-ic svg{stroke:var(--orange)}

/* lightbox entrance fade (image zoom is JS-driven) */
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.lb.open{animation:lbfade .28s ease}

/* mobile menu upgrade: blur panel, staggered links, burger -> X */
@media(max-width:1180px){   /* must match the burger breakpoint above */
  /* the glass nav's backdrop-filter turns it into the containing block for the
     fixed menu panel (clipping it to the bar) — drop it while the menu is open */
  body.menulock .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
  .nav-links{background:#fff}
  .nav-links>li{opacity:0;transform:translateY(18px);transition:opacity .38s ease,transform .38s ease}
  .nav-links.open>li{opacity:1;transform:none}
  .nav-links.open>li:nth-child(1){transition-delay:.08s}
  .nav-links.open>li:nth-child(2){transition-delay:.13s}
  .nav-links.open>li:nth-child(3){transition-delay:.18s}
  .nav-links.open>li:nth-child(4){transition-delay:.23s}
  .nav-links.open>li:nth-child(5){transition-delay:.28s}
  .nav-links.open>li:nth-child(6){transition-delay:.33s}
  .burger{position:relative;z-index:100}
  .burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0;transform:scaleX(.2)}
  .burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

@media(prefers-reduced-motion:reduce){
  .totop{transition:none}
  .lb.open{animation:none}
  .nav-links>li{opacity:1;transform:none;transition:none}
}

/* ================= v7 layer: Sir's Jul 18 review — layout + justified text ================= */
/* platform card: intro text on top, differentiator boxes below (side by side) */
.platform-card.plat-stack{display:block}
.plat-intro{max-width:820px;margin-bottom:40px}
.plat-intro p{margin-bottom:28px}
.plat-diffs .diff-label{margin-bottom:20px}
.diff-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.diff-row .diff+.diff{margin-top:0}
@media(max-width:820px){.diff-row{grid-template-columns:1fr}}

/* Equal vertical rhythm: title->paragraph gap = paragraph->paragraph gap (16px), sitewide (Sir Jul 18) */
.about-copy h2.title,.gap-copy h2.title{margin-bottom:16px}

/* justified body text (Sir's rule) — centered display elements stay centered */
p{text-align:justify}
.sec-head.center p,.ty-card p,.media-cap,.lb-count,.f-msg,
.mission-quote p,.cta-band p,.eco-node span,.eco-hub span{text-align:inherit}
.sec-head.center p{text-align:center}
.ty-card p{text-align:center}
.media-cap{text-align:center}

/* social icon buttons (contact card + footer) */
.c-social a svg{width:17px;height:17px;color:#fff;display:block}
.f-social{display:flex;gap:10px;margin-top:18px}
.f-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;transition:.2s}
.f-social a svg{width:16px;height:16px;color:#c6cdea;display:block}
.f-social a:hover{background:var(--orange);transform:translateY(-3px)}
.f-social a:hover svg{color:#fff}

/* ================= v8 layer: mobile polish (Sir Jul 20) ================= */
/* The nav's backdrop-filter makes it the containing block for the "fixed"
   off-canvas menu panel, whose translateX(100%) box then widens the page —
   phones could swipe sideways into a blank strip. A solid bar on mobile keeps
   the panel truly viewport-fixed, so it adds no overflow. (overflow-x:clip on
   html/body is NOT a fix — the visible+clip pair blanks content in Chrome.) */
@media(max-width:1180px){   /* must match the burger breakpoint above */
  /* Fully opaque, not .97 — with backdrop-filter off there is nothing to blur, and
     the leftover 3% let dark sections ghost through the bar as you scrolled. */
  .nav{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff}
}
/* justified text opens wide word-gaps in narrow columns — left-align on phones/tablets */
@media(max-width:820px){
  p{text-align:left}
}

/* ---- small phones (<=400px): kill the 28px horizontal overflow ----
   A `1fr` grid track can never shrink below its content's min-content width, so a
   card with generous padding silently blows the track — and the page — wider than
   the screen. Two offenders measured at 360px:
     .eco  -> 60px of side padding + 124/30/122px fixed node row = 366px min
     .c-info/.c-form -> 68px of side padding + the unbreakable support email = 342px
   Trimming the padding (and letting the email wrap) brings the page to exactly 0px
   of overflow at 360px. Re-measure with dev-browser if these cards ever change. */
@media(max-width:400px){
  .eco{padding:22px 14px;gap:12px}
  .eco-row{gap:8px}
  .eco-node{padding:14px 8px}
  .eco-link svg{width:22px}
  .c-info,.c-form{padding:26px 18px;overflow-wrap:anywhere}
}
/* program experts: two-up compact people grid on phones (halves the scroll) */
@media(max-width:600px){
  .exp-grid{grid-template-columns:1fr 1fr;gap:14px}
  .exp-card .nm{padding:12px 8px 14px}
  .exp-card .nm b{font-size:.85rem}
  .exp-card .nm a{font-size:.72rem}
}

/* ================= v7 layer: mobile polish (mission quote, reveal, spacing) ================= */
/* phones/tablets: scroll-reveal is instant — the fade-in stagger reads as blank
   cards during a fast flick-scroll on slower devices */
@media(max-width:800px){
  .rv{opacity:1;transform:none;transition:none}
}
/* mission quote: the desktop flex row squeezes the text into a two-word-per-line
   column next to the glyph + label — stack it on phones */
@media(max-width:640px){
  .mission-quote{display:block;padding:26px 22px}
  .mission-quote .q{display:none}
  .mission-quote .mq-label{margin-bottom:10px}
  .values{padding-bottom:70px}
}

/* gap stat boxes — Sir's Motorola review (Jul 20): "1500+ / 50%+ / Role-specific /
   Practitioners" labels touched the card edges in the 2-up mobile grid */
@media(max-width:700px){
  .stat-card{padding:18px 16px}
  .stat-card b{font-size:1.3rem}
  /* the two word-labels (cards 3+4) go smaller so a single word like
     "Practitioners" never splits mid-word; numbers keep their impact */
  .stat-cards .stat-card:nth-child(3) b,
  .stat-cards .stat-card:nth-child(4) b{font-size:.95rem}
  .stat-card span{font-size:.78rem}
}