/* ============================================================
   Harrington Compliance — Design System
   Bright corporate blue. Built 2026.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Blues */
  --navy-950:#04102B;
  --navy-900:#071633;
  --navy-800:#0C2450;
  --blue-900:#062B6B;
  --blue-800:#083795;
  --blue-700:#0B44BE;
  --blue-600:#1256E8;
  --blue-500:#2E7BFF;
  --blue-400:#5D9AFF;
  --blue-300:#95BCFF;
  --blue-200:#C4DAFF;
  --blue-100:#DFEAFF;
  --blue-50:#F0F5FF;

  --cyan-500:#00C3F0;
  --cyan-300:#63DEFF;
  --cyan-100:#D4F5FF;

  --mint-500:#12C69B;
  --mint-100:#D3F7EE;

  --amber-500:#F5A524;
  --amber-100:#FDF0D5;

  --rose-500:#F04E6E;
  --rose-100:#FEE1E7;

  /* Neutrals */
  --paper:#FFFFFF;
  --paper-2:#F7FAFF;
  --paper-3:#EEF3FC;
  --line:#DEE7F5;
  --line-soft:#EAF0FA;

  --ink:#071633;
  --ink-2:#33456A;
  --ink-3:#5E6E8E;
  --ink-4:#8C9AB5;
  --ink-muted:#7A88A6;

  /* Semantic */
  --bg:var(--paper);
  --text:var(--ink);
  --brand:var(--blue-600);
  --brand-dark:var(--blue-800);

  /* Type */
  --f-display:"Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body:"Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Space */
  --gut:clamp(10px, 3vw, 40px);
  --maxw:1248px;
  --maxw-narrow:820px;
  --sec-y:clamp(72px, 9vw, 132px);

  /* Radii */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-pill:999px;

  /* Shadows */
  --sh-xs:0 1px 2px rgba(7,22,51,.06);
  --sh-sm:0 2px 8px rgba(7,22,51,.06), 0 1px 2px rgba(7,22,51,.04);
  --sh-md:0 10px 30px -8px rgba(9,38,96,.14), 0 2px 6px rgba(9,38,96,.05);
  --sh-lg:0 26px 60px -18px rgba(9,38,96,.24), 0 6px 16px rgba(9,38,96,.07);
  --sh-xl:0 44px 100px -30px rgba(6,30,80,.34), 0 10px 30px rgba(6,30,80,.1);
  --sh-blue:0 14px 34px -10px rgba(18,86,232,.44);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* Stops the hero blobs and the float cards, which sit deliberately outside
     their containers, from producing a horizontal scrollbar.

     It must be clip, not hidden. overflow-x:hidden makes the body a scroll
     container; desktop engines propagate that to the viewport and sticky
     survives, but iOS Safari and several Android WebViews do not, and the
     sticky header scrolls away with the page. overflow-x:clip suppresses the
     overflow without creating a scroll container at all, so sticky holds
     everywhere. hidden stays first as the fallback for Safari below 16. */
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  color:var(--ink);
  margin:0 0 .5em;
  font-weight:800;
  letter-spacing:-.028em;
  line-height:1.08;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6vw,4.4rem)}
h2{font-size:clamp(2rem,4.1vw,3.15rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.22;letter-spacing:-.02em}
h4{font-size:1.06rem;line-height:1.3;letter-spacing:-.012em;font-weight:700}
p{margin:0 0 1.1em}
a{color:var(--blue-700);text-decoration:none}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin-bottom:.42em}
strong{color:var(--ink);font-weight:650}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:3px;border-radius:4px}
::selection{background:var(--blue-200);color:var(--navy-900)}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* ---------- 3. Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:var(--maxw-narrow)}
.section{padding-block:var(--sec-y);position:relative}
/* In-page nav targets sit under a sticky header (66px once stuck, 76px
   before), so anchors need an offset or the bar eats into the target.
   The base offset lives in one place: scroll-padding-top on <html>, sized
   for a bare target such as a blog heading that brings no padding of its own.

   Sections are the exception. --sec-y already puts 72-132px above the
   heading, so the full base offset strands them well down the viewport.
   This gives part of it back, landing the heading closer to the header.

   It has to be negative, not a smaller positive number: scroll-padding and
   scroll-margin ADD rather than override, so anything positive here would
   push the section further down instead of pulling it up. */
.section[id]{scroll-margin-top:-32px}
.section--tight{padding-block:clamp(52px,6vw,86px)}
.section--tint{background:var(--paper-2)}
.section--band{
  background:
    radial-gradient(1100px 480px at 12% 0%, #E9F1FF 0%, rgba(233,241,255,0) 62%),
    radial-gradient(900px 420px at 92% 100%, #E4F8FF 0%, rgba(228,248,255,0) 60%),
    var(--paper);
}
.section--dark{
  background:
    radial-gradient(900px 500px at 78% 8%, rgba(18,86,232,.42) 0%, rgba(18,86,232,0) 62%),
    radial-gradient(700px 420px at 8% 96%, rgba(0,195,240,.24) 0%, rgba(0,195,240,0) 60%),
    linear-gradient(165deg,#061539 0%,#08214F 52%,#041027 100%);
  color:#B9CBEA;
}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
.section--dark strong{color:#fff}
.grid{display:grid;gap:clamp(16px,2vw,26px)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4.4vw,72px);align-items:center}
.split--top{align-items:start}
.stack-sm>*+*{margin-top:.55rem}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

@media(max-width:1000px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}
  .split{grid-template-columns:minmax(0,1fr);gap:36px}
}

/* ---------- 4. Section headers ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-mono);
  font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-700);
  margin-bottom:1.15rem;
}
.eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan-500),var(--blue-600));
}
.section--dark .eyebrow{color:var(--cyan-300)}
.sec-head{max-width:760px;margin-bottom:clamp(36px,4.4vw,64px)}
.sec-head.center{margin-inline:auto}
.sec-head p{font-size:1.12rem;color:var(--ink-3);margin-bottom:0}
.section--dark .sec-head p{color:#9FB6DC}
.lede{font-size:clamp(1.08rem,1.5vw,1.3rem);line-height:1.6;color:var(--ink-3)}

/* ---------- 5. Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--f-display);
  font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  padding:.86em 1.5em;border-radius:var(--r-pill);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),background .25s,color .25s,border-color .25s;
  position:relative;white-space:nowrap;cursor:pointer;
  text-decoration:none;
}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .32s var(--ease-out)}
.btn:hover svg.arr{transform:translateX(4px)}
.btn-primary{
  background:linear-gradient(135deg,var(--blue-600) 0%,var(--blue-800) 100%);
  color:#fff;box-shadow:var(--sh-blue);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 42px -10px rgba(18,86,232,.58)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{
  background:var(--paper);color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--blue-400);color:var(--blue-700);transform:translateY(-2px)}
.btn-light{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.btn-light:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--blue-800);box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(0,0,0,.45)}
.btn-sm{font-size:.85rem;padding:.66em 1.15em}
.btn-lg{font-size:1.03rem;padding:1em 1.85em}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--f-display);font-weight:700;font-size:.95rem;
  color:var(--blue-700);
}
.link-arrow svg{width:1em;height:1em;transition:transform .3s var(--ease-out)}
.link-arrow:hover svg{transform:translateX(4px)}
.section--dark .link-arrow{color:var(--cyan-300)}

/* ---------- 6. Chips / pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.4em .9em;border-radius:var(--r-pill);
  font-size:.78rem;font-weight:600;letter-spacing:.005em;
  background:var(--blue-50);color:var(--blue-800);
  border:1px solid var(--blue-100);
}
.pill--live{
  background:rgba(255,255,255,.09);color:#DCE9FF;
  border-color:rgba(255,255,255,.2);backdrop-filter:blur(8px);
}
.pill--mint{background:var(--mint-100);color:#0A6A54;border-color:#A7EEDB}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mint-500);flex:none;position:relative}
.dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--mint-500);opacity:.6;
  animation:ping 2.2s var(--ease-out) infinite;
}
@keyframes ping{0%{transform:scale(.6);opacity:.7}70%,100%{transform:scale(1.5);opacity:0}}

.tag-row{display:flex;flex-wrap:wrap;gap:.5rem}

/* ---------- 7. Icons ---------- */
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-lg{width:32px;height:32px}
.icon-xl{width:40px;height:40px}
svg[data-sprite]{position:absolute;width:0;height:0;overflow:hidden}

.iconwell{
  width:56px;height:56px;border-radius:16px;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--blue-50),#fff);
  box-shadow:inset 0 0 0 1px var(--blue-100), var(--sh-xs);
  color:var(--blue-700);
  position:relative;overflow:hidden;
  transition:transform .45s var(--ease-spring), box-shadow .4s var(--ease-out), color .3s;
}
.iconwell::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(140deg,var(--blue-600),var(--blue-800));
  opacity:0;transition:opacity .35s var(--ease-out);
}
.iconwell .icon{position:relative;z-index:1;width:28px;height:28px;stroke-width:1.5}
.iconwell--lg{width:64px;height:64px;border-radius:19px}
.iconwell--lg .icon{width:32px;height:32px}

/* ---------- 8. Cards ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);
  position:relative;
  transition:transform .42s var(--ease-out),box-shadow .42s var(--ease-out),border-color .35s;
  overflow:hidden;
}
.card > *{position:relative;z-index:1}
.card h3,.card h4{margin-bottom:.5rem}
.card p{color:var(--ink-3);font-size:.97rem;margin-bottom:0}
.card--lift:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--blue-200)}
.card--lift:hover .iconwell{transform:scale(1.06) rotate(-4deg);color:#fff;box-shadow:var(--sh-blue)}
.card--lift:hover .iconwell::after{opacity:1}
.card--glow::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(46,123,255,.09), transparent 70%);
  opacity:0;transition:opacity .4s;
}
.card--glow:hover::before{opacity:1}
.card--flat{border-radius:var(--r-md);box-shadow:none}
.card--soft{background:var(--paper-2);border-color:var(--line-soft)}

.card-num{
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;color:var(--blue-400);
  position:absolute;top:20px;right:22px;z-index:2;
}

/* ---------- 9. Header / nav ---------- */
/* ---------- Top banner ----------
   Sits above the sticky header in normal flow, so it scrolls away on the way
   down and the navigation alone stays pinned. Ticks reuse the hero-checks
   treatment so the two read as the same family. */
.topbar{
  background:linear-gradient(100deg,var(--navy-900),var(--blue-900));
  color:#B9D0F5;font-size:.82rem;position:relative;z-index:210;
}
.topbar-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;padding-block:.55rem;
}
.topbar-points{list-style:none;padding:0;margin:0;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.topbar-points li{display:flex;align-items:center;gap:.45rem;margin:0;font-weight:500}
/* Plain white ticks rather than the mint discs used elsewhere — against the
   navy bar the bare check reads cleanly and stays quiet. */
.topbar-points .tick{width:14px;height:14px;flex:none;display:grid;place-items:center;color:#fff}
.topbar-points .tick svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3}
.topbar-tel{
  display:inline-flex;align-items:center;gap:.45rem;
  color:#fff;font-family:var(--f-mono);font-weight:600;font-size:.8rem;
  transition:color .22s;
}
.topbar-tel:hover{color:var(--cyan-300)}
.topbar-tel .icon{width:14px;height:14px;stroke-width:1.9}
/* Drop the points one at a time as room runs out. */
@media(max-width:1000px){.topbar-points li:nth-child(3){display:none}}
@media(max-width:820px){.topbar-points li:nth-child(2){display:none}}
/* Below tablet the bar buys less than the vertical space it costs, so it goes
   entirely rather than degrading to a dark strip holding one phone number. */
@media(max-width:768px){.topbar{display:none}}

.header{
  position:sticky;top:0;z-index:200;
  transition:box-shadow .35s var(--ease),background .35s;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid transparent;
}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:0 4px 24px -10px rgba(9,38,96,.16)}
.nav{
  display:flex;align-items:center;gap:clamp(12px,2vw,30px);
  height:76px;transition:height .35s var(--ease);
}
.header.is-stuck .nav{height:66px}

.brand{display:inline-flex;align-items:center;gap:.62rem;flex:none;color:var(--ink)}

/* Supplied lockup, 957x180. Height-driven so it tracks the shrinking nav.
   Every other height is scaled off the 48px base by the same 0.92 factor, so
   the stuck, footer and mobile states keep their existing relationship. */
.brand-logo{height:48px;width:auto;display:block;transition:height .35s var(--ease)}
.header.is-stuck .brand-logo{height:41px}
/* Dark navy footer — knock the lockup back to solid white so it reads. */
.footer .brand-logo{height:42px;filter:brightness(0) invert(1);opacity:.94}
/* The logo file carries its own left whitespace, so on a narrow screen it
   reads as indented against the burger on the other side. Pulling it left
   sits the mark on the gutter.

   Scoped to the header on purpose — .brand-logo is the footer mark too, and
   shifting that one would knock it out of line with the text beneath it.
   The is-stuck selector is repeated because the shrink-on-scroll rule above
   is more specific and would otherwise win and put the height back to 41px. */
@media(max-width:520px){
  .header .brand-logo,
  .header.is-stuck .brand-logo{height:38px;position:relative;left:-9px}
  .footer .brand-logo{height:35px}
  /* Shorter bar on a phone, where vertical space is the scarce thing.
     is-stuck is repeated for the same specificity reason as the logo. */
  .nav{height:64px}
  .header.is-stuck .nav{height:58px}
}

.brand-mark{width:38px;height:38px;flex:none;border-radius:11px;overflow:hidden;box-shadow:var(--sh-sm)}
.brand-name{
  font-family:var(--f-display);font-weight:800;font-size:1.16rem;
  letter-spacing:-.035em;color:var(--ink);line-height:1;
}
.brand-name span{color:var(--blue-600)}
.brand-sub{
  display:block;font-family:var(--f-mono);font-size:.575rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--ink-muted);
  margin-top:3px;font-weight:500;
}

.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;list-style:none;padding:0;margin-bottom:0}
.nav-links li{margin:0}
.nav-link{
  display:inline-flex;align-items:center;gap:.32em;
  padding:.55rem .8rem;border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:600;font-size:.92rem;
  color:var(--ink-2);transition:color .22s,background .22s;
  cursor:pointer;
}
.nav-link:hover,.nav-link[aria-expanded="true"]{color:var(--blue-700);background:var(--blue-50)}
.nav-link.is-active{color:var(--blue-700)}
.nav-link svg{width:.75em;height:.75em;stroke-width:2.6;transition:transform .3s var(--ease)}
.nav-link[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-cta{margin-left:.6rem}

.has-menu{position:relative}
.megamenu{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translate(-50%,10px) scale(.98);
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-xl);
  padding:16px;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--ease-out),transform .32s var(--ease-out),visibility .28s;
  z-index:60;
}
.megamenu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0) scale(1)}
.mm-grid{display:grid;gap:4px;min-width:290px}
.mm-grid--2{grid-template-columns:repeat(2,minmax(210px,1fr));gap:4px 10px}
.mm-item{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:.62rem .7rem;border-radius:var(--r-sm);
  transition:background .2s;color:var(--ink);
}
.mm-item:hover{background:var(--blue-50)}
.mm-item .iconwell{width:34px;height:34px;border-radius:10px}
.mm-item .iconwell .icon{width:18px;height:18px}
.mm-item strong{display:block;font-family:var(--f-display);font-size:.9rem;font-weight:700;line-height:1.3}
.mm-item small{display:block;color:var(--ink-muted);font-size:.775rem;line-height:1.35;margin-top:1px}
.mm-head{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-muted);
  padding:.7rem .7rem .35rem;grid-column:1/-1;
}
.mm-foot{
  grid-column:1/-1;margin-top:8px;padding:.75rem .9rem;
  border-radius:var(--r-sm);background:var(--blue-50);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-size:.85rem;color:var(--blue-800);font-weight:600;
}

/* Three bars in a flex column — the 5px gap and the 7px collapse have to
   agree, or the X opens up into a chevron. */
.burger{
  display:none;width:42px;height:42px;border-radius:10px;margin-left:auto;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:1px solid transparent;transition:background .2s,border-color .2s;
}
.burger:hover{background:var(--blue-50);border-color:var(--blue-100)}
.burger span{
  display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .28s var(--ease-out),opacity .16s linear;
}
.burger.is-open{background:var(--blue-50);border-color:var(--blue-100)}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Drops down out of the header rather than covering the screen. `top` is set
   from JS so it tracks the nav as it shrinks on scroll. */
.mobile-nav{
  position:fixed;top:76px;left:0;right:0;z-index:190;
  background:var(--paper);
  max-height:calc(100dvh - 76px);overflow-y:auto;overscroll-behavior:contain;
  padding:.6rem var(--gut) 1.3rem;
  border-top:1px solid var(--line-soft);
  box-shadow:0 4px 10px rgba(11,29,58,.05),0 26px 52px -14px rgba(11,29,58,.16);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity .16s linear,transform .24s var(--ease-out),visibility .24s;
}
.mobile-nav.is-open{opacity:1;visibility:visible;transform:translateY(0)}
/* Rows cascade in behind the panel — quick, 25ms apart. */
.mobile-nav>*{opacity:0;transform:translateY(-7px);transition:opacity .2s,transform .26s var(--ease-out)}
.mobile-nav.is-open>*{opacity:1;transform:none}
.mobile-nav.is-open>*:nth-child(1){transition-delay:.04s}
.mobile-nav.is-open>*:nth-child(2){transition-delay:.065s}
.mobile-nav.is-open>*:nth-child(3){transition-delay:.09s}
.mobile-nav.is-open>*:nth-child(4){transition-delay:.115s}
.mobile-nav.is-open>*:nth-child(5){transition-delay:.14s}
.mobile-nav.is-open>*:nth-child(6){transition-delay:.165s}
.mobile-nav.is-open>*:nth-child(7){transition-delay:.19s}
@media(prefers-reduced-motion:reduce){.mobile-nav.is-open>*{transition-delay:0s!important}}

.mnav-group{border-bottom:1px solid var(--line-soft)}
.mnav-group>button{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.85rem .7rem;border-radius:var(--r-sm);
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--ink);
  transition:background .18s,color .18s;
}
.mnav-group>button:hover{background:var(--blue-50)}
.mnav-group.is-open>button{color:var(--blue-700)}
/* The chevron sits in its own chip so it reads as a control, not decoration. */
.mnav-group>button svg{
  width:15px;height:15px;stroke-width:2.6;flex:none;
  color:var(--blue-600);transition:transform .28s var(--ease-out);
}
.mnav-group.is-open>button svg{transform:rotate(180deg)}
.mnav-chev{
  width:26px;height:26px;border-radius:8px;flex:none;
  display:grid;place-items:center;background:var(--blue-50);
  transition:background .2s;
}
.mnav-group.is-open>button .mnav-chev{background:var(--blue-100)}

.mnav-panel{
  max-height:0;overflow:hidden;
  transition:max-height .3s var(--ease-out),opacity .2s linear;
  opacity:0;
}
.mnav-group.is-open .mnav-panel{opacity:1}
.mnav-panel-in{padding:.1rem 0 .7rem}
.mnav-panel a{
  display:flex;align-items:center;gap:.65rem;
  padding:.52rem .7rem;border-radius:8px;
  color:var(--ink-3);font-size:.94rem;font-weight:500;
  transition:background .16s,color .16s;
}
.mnav-panel a::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--blue-200);transition:background .16s,transform .16s;
}
.mnav-panel a:hover{background:var(--blue-50);color:var(--blue-700)}
.mnav-panel a:hover::before{background:var(--blue-600);transform:scale(1.3)}
/* The catalogue is where most of this list is heading — pull it out of the
   run of plain links and give it a proper target. */
.mnav-panel a[href="courses.html"]{
  margin:.1rem 0 .5rem;padding:.78rem .8rem;
  background:var(--blue-50);border:1px solid var(--blue-100);
  color:var(--blue-800);font-weight:650;
  transition:background .16s,border-color .16s,color .16s;
}
.mnav-panel a[href="courses.html"]::before{background:var(--blue-600);transform:scale(1.2)}
.mnav-panel a[href="courses.html"]:hover{
  background:var(--blue-100);border-color:var(--blue-200);color:var(--blue-800);
}
.mnav-panel a[href="courses.html"] .icon{
  width:15px;height:15px;flex:none;margin-left:auto;stroke-width:2.4;
  transition:transform .2s var(--ease-out);
}
.mnav-panel a[href="courses.html"]:hover .icon{transform:translateX(3px)}

.mobile-nav>a.mnav-solo{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem .7rem;border-radius:var(--r-sm);
  border-bottom:1px solid var(--line-soft);
  font-family:var(--f-display);font-weight:700;font-size:1.02rem;color:var(--ink);
  transition:background .18s,color .18s;
}
.mobile-nav>a.mnav-solo:hover{background:var(--blue-50);color:var(--blue-700)}
/* The top banner is hidden below 768px, so this is the only tap-to-call on a
   phone short of scrolling to the footer. */
.mnav-tel{
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  margin-top:.9rem;padding:.85rem;border-radius:12px;
  border:1px solid var(--line);background:var(--paper-2);
  font-family:var(--f-mono);font-weight:600;font-size:.92rem;color:var(--blue-800);
  transition:background .22s,border-color .22s,color .22s;
}
.mnav-tel:hover{background:var(--blue-50);border-color:var(--blue-100);color:var(--blue-700)}
.mnav-tel .icon{width:16px;height:16px}

/* Tap-anywhere-else scrim. Sits under the panel and over the page. */
.mnav-scrim{
  position:fixed;inset:0;z-index:180;background:rgba(9,28,66,.34);
  opacity:0;visibility:hidden;transition:opacity .24s,visibility .24s;
}
.mnav-scrim.is-open{opacity:1;visibility:visible}

@media(max-width:1080px){
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
}

/* ---------- 10. Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,6vw,86px) clamp(60px,7vw,104px)}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(1000px 620px at 50% 22%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(1000px 620px at 50% 22%,#000 0%,transparent 78%);
  opacity:.85;
}
.blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;will-change:transform}
.blob-1{width:640px;height:640px;background:radial-gradient(circle,#9CC4FF 0%,rgba(156,196,255,0) 70%);top:-260px;left:-160px;animation:drift1 22s ease-in-out infinite}
.blob-2{width:560px;height:560px;background:radial-gradient(circle,#9AECFF 0%,rgba(154,236,255,0) 70%);top:-180px;right:-140px;animation:drift2 26s ease-in-out infinite}
.blob-3{width:520px;height:520px;background:radial-gradient(circle,#C6D6FF 0%,rgba(198,214,255,0) 70%);bottom:-280px;left:38%;animation:drift3 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,50px) scale(1.1)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,70px) scale(1.08)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,-40px) scale(1.12)}}

.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(32px,4vw,64px);align-items:center}
.hero h1{margin-bottom:1rem}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--blue-700) 0%,var(--blue-500) 42%,var(--cyan-500) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-lede{font-size:clamp(1.06rem,1.5vw,1.24rem);color:var(--ink-3);max-width:34em;margin-bottom:1.7rem}
.hero-badge{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.42em 1em .42em .55em;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--blue-100);
  box-shadow:var(--sh-sm);font-size:.82rem;font-weight:600;color:var(--blue-800);
  margin-bottom:1.5rem;
}
.hero-badge b{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;
  background:linear-gradient(135deg,var(--blue-600),var(--blue-800));
  color:#fff;padding:.34em .62em;border-radius:var(--r-pill);text-transform:uppercase;
}
.hero-checks{list-style:none;padding:0;margin:1.9rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1.4rem}
.hero-checks li{display:flex;gap:.55rem;align-items:center;font-size:.92rem;color:var(--ink-2);font-weight:550;margin:0}
.hero-checks .tick{
  width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--mint-500),#0FA582);
}
.hero-checks .tick svg{width:11px;height:11px;stroke:#fff;stroke-width:3.2}

@media(max-width:940px){
  .hero-inner{grid-template-columns:minmax(0,1fr)}
  .hero-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){.hero-checks{grid-template-columns:minmax(0,1fr)}}

/* Hero course panel */
.coursepanel{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:26px;padding:22px;
  box-shadow:var(--sh-xl);
  position:relative;
  animation:floaty 7s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cp-head{display:flex;align-items:center;gap:.85rem;padding-bottom:1rem;border-bottom:1px solid var(--line-soft);margin-bottom:1rem}
.cp-head .iconwell{width:46px;height:46px;border-radius:14px}
.cp-head .iconwell .icon{width:28px;height:28px}
.cp-title{font-family:var(--f-display);font-weight:800;font-size:1.06rem;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.cp-title small{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted);font-weight:500;margin-top:3px}
.cp-ring{margin-left:auto;position:relative;width:52px;height:52px;flex:none}
.cp-ring svg{transform:rotate(-90deg)}
.cp-ring .track{stroke:var(--blue-100)}
.cp-ring .prog{stroke:url(#ringGrad);stroke-linecap:round;stroke-dasharray:138.2;stroke-dashoffset:138.2;transition:stroke-dashoffset 1.6s var(--ease-out)}
.cp-ring b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.72rem;font-weight:700;color:var(--blue-800);
}
.cp-list{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.cp-list li{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:.75rem;margin:0;
  padding:.7rem .85rem;border-radius:13px;
  background:rgba(255,255,255,.7);border:1px solid var(--line-soft);
  transition:transform .4s var(--ease-out),border-color .3s,background .3s;
}
/* Per-module loading bar along the foot of the row. The fill duration comes
   from --cp-step-ms, which the script sets from the same constant it uses to
   advance, so the bar cannot finish early or run past the next step. */
.cp-bar{position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none}
.cp-bar i{
  display:block;height:3px;width:0;border-radius:0 99px 99px 0;
  background:linear-gradient(90deg,var(--blue-500),var(--cyan-500));
}
.cp-list li.active .cp-bar i{animation:cpFill var(--cp-step-ms,1500ms) linear forwards}
.cp-list li.done .cp-bar i{width:100%;background:linear-gradient(90deg,var(--mint-500),#0FA582)}
@keyframes cpFill{from{width:0}to{width:100%}}
.cp-list li.done{border-color:#B9EFDF;background:linear-gradient(100deg,#F1FDF9,rgba(255,255,255,.75))}
.cp-list li.active{border-color:var(--blue-300);background:linear-gradient(100deg,#F2F7FF,rgba(255,255,255,.8));box-shadow:0 8px 22px -12px rgba(18,86,232,.45)}
.cp-step{
  width:26px;height:26px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-family:var(--f-mono);font-size:.82rem;font-weight:700;
  background:var(--paper-3);color:var(--ink-muted);border:1px solid var(--line);
}
.cp-list li.done .cp-step{background:linear-gradient(140deg,var(--mint-500),#0FA582);color:#fff;border-color:transparent}
.cp-list li.active .cp-step{background:linear-gradient(140deg,var(--blue-500),var(--blue-700));color:#fff;border-color:transparent}
.cp-txt{flex:1;font-size:.885rem;font-weight:650;color:var(--ink);font-family:var(--f-display);line-height:1.25}
/* Completion mark on the right, so the step number on the left survives the
   whole run. It holds its space while hidden, so nothing shifts as it lands. */
.cp-tick{
  width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--mint-500),#0FA582);color:#fff;
  opacity:0;transform:scale(.55);
  transition:opacity .34s var(--ease-out),transform .34s var(--ease-out);
}
.cp-tick svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:3.4}
.cp-list li.done .cp-tick{opacity:1;transform:scale(1)}
/* The check draws itself rather than just appearing: the disc pops in first,
   then the stroke runs. 22 is the path length of the tick. */
.cp-tick svg path{stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .42s var(--ease-out) .12s}
.cp-list li.done .cp-tick svg path{stroke-dashoffset:0}
.cp-txt small{display:block;font-weight:500;font-size:.76rem;color:var(--ink-muted);font-family:var(--f-body);margin-top:1px}
.cp-foot{
  margin-top:1rem;padding-top:.95rem;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.8rem;color:var(--ink-muted);
}
.cp-foot .pill{font-size:.72rem}

/* Floating mini-cards around panel */
.float-card{
  position:absolute;background:var(--paper);border-radius:14px;padding:.6rem .85rem;
  box-shadow:var(--sh-lg);border:1px solid var(--line-soft);
  display:flex;align-items:center;gap:.55rem;z-index:3;
  font-size:.78rem;font-weight:650;color:var(--ink);font-family:var(--f-display);
  animation:floaty 6s ease-in-out infinite;
}
.float-card small{display:block;font-weight:500;color:var(--ink-muted);font-size:.7rem;font-family:var(--f-body)}
/* The certificate card is the payoff for the module run, so it holds back out
   of focus until the panel reaches 100% and then resolves in.

   Only opacity and blur are animated: the floaty drift already owns transform
   on this element, and a transform-based reveal would fight it mid-loop. */
.fc-1{top:-34px;right:-14px;animation-delay:-2s;
  opacity:0;filter:blur(12px);
  transition:opacity .95s var(--ease-out),filter .95s var(--ease-out);
}
.fc-1.is-issued{opacity:1;filter:blur(0)}
.fc-2{bottom:-20px;left:-22px;animation-delay:-4s}
.fc-ico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;color:#fff}
.fc-ico.mint{background:linear-gradient(140deg,var(--mint-500),#0FA582)}
.fc-ico.blue{background:linear-gradient(140deg,var(--blue-500),var(--blue-700))}
.fc-ico svg{width:15px;height:15px;stroke-width:2.2}
@media(max-width:940px){.fc-1{right:0}.fc-2{left:0}}
@media(max-width:420px){.float-card{display:none}}

/* ---------- 11. Stat bar ---------- */
.statbar{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--paper);box-shadow:var(--sh-md);
  overflow:hidden;
}
.statbar .stat{padding:clamp(18px,2.2vw,28px);border-right:1px solid var(--line-soft);position:relative}
.statbar .stat:last-child{border-right:0}
.stat-num{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(1.6rem,2.9vw,2.35rem);letter-spacing:-.04em;
  line-height:1;color:var(--ink);
  background:linear-gradient(120deg,var(--blue-700),var(--blue-500) 60%,var(--cyan-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-lab{
  display:block;margin-top:.5rem;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-muted);font-weight:500;
}
@media(max-width:900px){.statbar{grid-template-columns:repeat(3,minmax(0,1fr))}.statbar .stat:nth-child(3){border-right:0}}
@media(max-width:560px){.statbar{grid-template-columns:repeat(2,minmax(0,1fr))}.statbar .stat:nth-child(3){border-right:1px solid var(--line-soft)}.statbar .stat:nth-child(2n){border-right:0}}

/* ---------- 12. Course cards ---------- */
.course-card{
  display:flex;flex-direction:column;gap:.9rem;
  text-decoration:none;height:100%;
}
.course-card .cc-top{display:flex;align-items:flex-start;gap:1rem}
.course-card .cc-meta{margin-left:auto;text-align:right;flex:none}
.cc-cat{
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:var(--blue-500);display:block;
}
.cc-dur{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-muted);display:block;margin-top:4px}
.course-card h3{font-size:1.14rem;margin:0}
.course-card p{font-size:.925rem;line-height:1.55;color:var(--ink-3);margin:0;flex:1}
.cc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-top:.9rem;border-top:1px solid var(--line-soft);
  font-family:var(--f-display);font-size:.84rem;font-weight:700;color:var(--blue-700);
}
.cc-foot svg{width:15px;height:15px;transition:transform .3s var(--ease-out)}
.card--lift:hover .cc-foot svg{transform:translateX(4px)}

/* ---------- 13. Feature cards ---------- */
.feature{display:flex;flex-direction:column;gap:1rem;height:100%}
.feature .iconwell{margin-bottom:.2rem}

/* ---------- 14. Interaction showcase (home) ---------- */
.ix-stage{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(158deg,#08214F 0%,#0B2E6B 48%,#04122F 100%);
  padding:clamp(24px,3vw,40px);
  box-shadow:var(--sh-xl);
}
.ix-stage::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:44px 44px;
}
.ix-stage::after{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,195,240,.32),transparent 68%);
  top:-180px;right:-140px;filter:blur(20px);
}
.ix-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.ix-tile{
  aspect-ratio:1;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  display:grid;place-items:center;color:#9FC0F0;
  transition:all .5s var(--ease-out);position:relative;overflow:hidden;
}
.ix-tile svg{width:26px;height:26px;stroke-width:1.5;transition:transform .5s var(--ease-spring)}
.ix-tile.is-on{
  background:linear-gradient(140deg,rgba(46,123,255,.9),rgba(0,195,240,.75));
  border-color:rgba(255,255,255,.4);color:#fff;
  box-shadow:0 12px 34px -8px rgba(0,160,255,.6);
  transform:translateY(-4px) scale(1.04);
}
.ix-tile.is-on svg{transform:scale(1.12)}
.ix-caption{
  position:relative;z-index:2;margin-top:1.4rem;padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.13);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.ix-name{font-family:var(--f-display);font-weight:800;color:#fff;font-size:1.15rem;letter-spacing:-.02em}
.ix-name small{display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-300);font-weight:500;margin-bottom:4px}
@media(max-width:760px){.ix-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:440px){.ix-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ix-tile svg{width:20px;height:20px}}

/* ---------- 15. Sector cards ---------- */
.sector-card{
  position:relative;overflow:hidden;display:block;
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--paper);padding:0;
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),border-color .35s;
}
.sector-card:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:var(--blue-200)}
.sc-vis{
  height:132px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--blue-50),#EAF6FF);
  border-bottom:1px solid var(--line-soft);
  display:grid;place-items:center;
}
.sc-vis::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, var(--blue-200) 1px, transparent 0);
  background-size:16px 16px;opacity:.7;
}
.sc-vis .iconwell{
  width:72px;height:72px;border-radius:22px;background:var(--paper);
  box-shadow:var(--sh-md);z-index:1;
  transition:transform .5s var(--ease-spring),box-shadow .4s;
}
.sc-vis .iconwell .icon{width:36px;height:36px}
.sector-card:hover .sc-vis .iconwell{transform:translateY(-4px) scale(1.07);box-shadow:var(--sh-blue);color:#fff}
.sector-card:hover .sc-vis .iconwell::after{opacity:1}
.sc-body{padding:clamp(20px,2.2vw,26px)}
.sc-body h3{font-size:1.12rem}
.sc-body p{font-size:.93rem;color:var(--ink-3);margin-bottom:1rem}

/* ---------- 16. Certificate ---------- */
.cert-shell{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(26px,4vw,56px);align-items:center}
@media(max-width:940px){.cert-shell{grid-template-columns:minmax(0,1fr)}}

.cert-stage{perspective:1600px}
.cert{
  --gold:#C9A227;
  position:relative;aspect-ratio:1.414/1;width:100%;
  background:linear-gradient(155deg,#FFFFFF 0%,#F6FAFF 58%,#EDF4FF 100%);
  border-radius:12px;
  box-shadow:var(--sh-xl), 0 0 0 1px rgba(9,38,96,.08);
  overflow:hidden;
  transform:rotateX(6deg) rotateY(-7deg);
  transition:transform .7s var(--ease-out);
  transform-style:preserve-3d;
}
.cert-stage:hover .cert{transform:rotateX(0deg) rotateY(0deg) scale(1.015)}
.cert svg.guilloche{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.cert-inner{
  position:absolute;inset:4.2%;
  border:1.5px solid var(--blue-200);border-radius:6px;
  display:flex;flex-direction:column;
  padding:clamp(12px,2.6%,26px);text-align:center;
}
.cert-inner::before{
  content:"";position:absolute;inset:5px;border:1px solid rgba(18,86,232,.16);border-radius:4px;pointer-events:none;
}
.cert-head{display:flex;align-items:center;justify-content:center;gap:.5rem}
/* Sized off the certificate rather than the viewport, so it holds its
   proportion as the card scales. */
.cert-logo{width:clamp(86px,31%,208px);height:auto;display:block}
.cert-head .brand-mark{width:clamp(20px,4%,30px);height:clamp(20px,4%,30px);border-radius:7px;box-shadow:none}
.cert-brand{font-family:var(--f-display);font-weight:800;font-size:clamp(.66rem,1.5cqw,.92rem);letter-spacing:-.02em;color:var(--navy-900)}
.cert-kicker{
  font-family:var(--f-mono);font-size:clamp(.42rem,1cqw,.6rem);letter-spacing:.3em;text-transform:uppercase;
  color:var(--blue-600);margin-top:clamp(6px,2%,16px);font-weight:600;
}
.cert-title{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;
  font-size:clamp(.95rem,3.2cqw,1.9rem);color:var(--navy-900);line-height:1.05;
  margin-top:clamp(2px,.8%,6px);
}
.cert-rule{width:38%;height:2px;margin:clamp(6px,2%,14px) auto;background:linear-gradient(90deg,transparent,var(--blue-500),var(--cyan-500),transparent);border-radius:2px}
.cert-awarded{font-size:clamp(.44rem,1.1cqw,.66rem);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-muted);font-family:var(--f-mono)}
.cert-name{
  font-family:"Fraunces","Georgia",serif;font-weight:600;font-style:italic;
  font-size:clamp(1.1rem,5.4cqw,2.9rem);color:var(--blue-800);
  line-height:1.1;margin:clamp(3px,1.2%,10px) 0;
  letter-spacing:-.01em;min-height:1.1em;
  overflow-wrap:anywhere;
}
.cert-body{font-size:clamp(.46rem,1.35cqw,.8rem);color:var(--ink-3);line-height:1.5;max-width:78%;margin:0 auto}
.cert-body b{color:var(--navy-900)}
.cert-foot{
  margin-top:auto;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:end;gap:clamp(6px,2%,16px);padding-top:clamp(6px,2%,14px);
}
.cert-sig{text-align:left}
.cert-sig.right{text-align:right}
.cert-sig i{
  display:block;font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:clamp(.6rem,2cqw,1.05rem);
  color:var(--navy-800);line-height:1;margin-bottom:4px;
}
.cert-sig span{
  display:block;border-top:1px solid var(--blue-200);padding-top:4px;
  font-family:var(--f-mono);font-size:clamp(.36rem,.95cqw,.55rem);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-muted);
}
.cert-seal{width:clamp(34px,13%,74px);aspect-ratio:1;position:relative;justify-self:center}
.cert-seal svg{width:100%;height:100%;animation:sealspin 26s linear infinite}
@keyframes sealspin{to{transform:rotate(360deg)}}
.cert-meta{
  display:flex;justify-content:space-between;gap:.5rem;
  font-family:var(--f-mono);font-size:clamp(.36rem,.9cqw,.53rem);
  color:var(--ink-muted);letter-spacing:.06em;
  border-top:1px solid var(--line-soft);margin-top:clamp(5px,1.6%,12px);padding-top:clamp(4px,1.2%,9px);
}

.namefield{
  display:flex;gap:.6rem;align-items:center;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-pill);
  padding:.35rem .35rem .35rem 1.15rem;box-shadow:var(--sh-sm);
  transition:border-color .3s,box-shadow .3s;max-width:460px;
}
.namefield:focus-within{border-color:var(--blue-400);box-shadow:0 0 0 4px var(--blue-100)}
.namefield input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:var(--f-display);font-size:1rem;font-weight:650;color:var(--ink);padding:.5rem 0;
}
.namefield input::placeholder{color:var(--ink-muted);font-weight:500}
.privacy-note{
  display:flex;gap:.6rem;align-items:flex-start;margin-top:1.1rem;
  font-size:.85rem;color:var(--ink-muted);line-height:1.5;max-width:44em;
}
.privacy-note svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--mint-500)}

/* ---------- 17. Spec table ---------- */
.spec{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--paper);box-shadow:var(--sh-md);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
}
.spec-item{padding:clamp(18px,2.2vw,26px);border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.spec-item:nth-child(3n){border-right:0}
.spec-item:nth-last-child(-n+3){border-bottom:0}
.spec-item dt{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-500);font-weight:600;margin-bottom:.5rem;
}
.spec-item dd{margin:0;font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--ink);line-height:1.35;letter-spacing:-.015em}
@media(max-width:840px){
  .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec-item:nth-child(3n){border-right:1px solid var(--line-soft)}
  .spec-item:nth-child(2n){border-right:0}
  .spec-item:nth-last-child(-n+3){border-bottom:1px solid var(--line-soft)}
  .spec-item:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:480px){
  .spec{grid-template-columns:minmax(0,1fr)}
  .spec-item{border-right:0!important;border-bottom:1px solid var(--line-soft)!important}
  .spec-item:last-child{border-bottom:0!important}
}

/* ---------- 18. Numbered steps ---------- */
.steps{list-style:none;padding:0;margin:0;counter-reset:s;display:grid;gap:2px}
.steps li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.15rem;
  padding:1.35rem 1.4rem;margin:0;border-radius:var(--r-md);
  background:var(--paper);border:1px solid transparent;
  transition:border-color .35s,box-shadow .35s,transform .35s var(--ease-out),background .3s;
  position:relative;
}
.steps li:hover{border-color:var(--blue-200);box-shadow:var(--sh-md);transform:translateX(4px)}
.step-n{
  counter-increment:s;
  width:38px;height:38px;border-radius:12px;flex:none;
  display:grid;place-items:center;
  font-family:var(--f-mono);font-weight:700;font-size:.88rem;
  background:linear-gradient(140deg,var(--blue-600),var(--blue-800));
  color:#fff;box-shadow:0 8px 20px -8px rgba(18,86,232,.6);
  transition:transform .4s var(--ease-spring);
}
.steps li:hover .step-n{transform:scale(1.08) rotate(-5deg)}
.step-n::before{content:counter(s,decimal-leading-zero)}
.step-b{padding-top:.25rem}
.step-b strong{display:block;font-family:var(--f-display);font-size:1.03rem;color:var(--ink);margin-bottom:.3rem;letter-spacing:-.018em}
.step-b p{font-size:.945rem;color:var(--ink-3);margin:0;line-height:1.55}
.section--dark .steps li{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.section--dark .steps li:hover{border-color:rgba(99,222,255,.4);background:rgba(255,255,255,.07)}
.section--dark .step-b p{color:#9FB6DC}
.section--dark .step-b strong{color:#fff}

/* ---------- 19. Check list ---------- */
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.15rem}
.checklist li{
  display:flex;gap:.85rem;align-items:flex-start;margin:0;
  padding:.8rem .9rem;border-radius:var(--r-sm);
  transition:background .28s;font-size:.99rem;color:var(--ink-2);line-height:1.55;
}
.checklist li:hover{background:var(--blue-50)}
.checklist .tick{
  width:22px;height:22px;border-radius:7px;flex:none;margin-top:2px;display:grid;place-items:center;
  background:var(--mint-100);color:#0A8A6C;
}
.checklist .tick svg{width:12px;height:12px;stroke-width:3}
.section--dark .checklist li{color:#B9CBEA}
.section--dark .checklist li:hover{background:rgba(255,255,255,.05)}
.section--dark .checklist .tick{background:rgba(18,198,155,.18);color:#5BE9C5}

/* ---------- 20. FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:900px}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:flex-start;gap:1.2rem;justify-content:space-between;
  padding:1.5rem .3rem;text-align:left;
  font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.5vw,1.14rem);
  color:var(--ink);letter-spacing:-.018em;line-height:1.35;
  transition:color .25s;
}
.faq-q:hover{color:var(--blue-700)}
.faq-ico{
  width:30px;height:30px;border-radius:50%;flex:none;margin-top:-1px;
  display:grid;place-items:center;background:var(--blue-50);color:var(--blue-700);
  transition:background .3s,transform .45s var(--ease-out),color .3s;
}
.faq-ico svg{width:14px;height:14px;stroke-width:2.6;transition:transform .4s var(--ease-out)}
.faq-item.is-open .faq-ico{background:var(--blue-600);color:#fff;transform:rotate(180deg)}
.faq-a{
  overflow:hidden;height:0;
  transition:height .42s var(--ease-out);
}
.faq-a-in{padding:0 3.2rem 1.6rem .3rem;color:var(--ink-3);font-size:1rem;line-height:1.68}
.faq-a-in p:last-child{margin-bottom:0}

/* ---------- 21. Team ---------- */
.person{text-align:left}
.person-vis{
  aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;position:relative;
  background:linear-gradient(155deg,var(--blue-100),#E6F6FF);
  margin-bottom:1.15rem;display:grid;place-items:center;
  border:1px solid var(--line);
}
.person-vis::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(18,86,232,.2) 1px,transparent 0);
  background-size:14px 14px;
}
.person-initials{
  position:relative;z-index:1;
  font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,6vw,3.6rem);
  letter-spacing:-.05em;
  background:linear-gradient(140deg,var(--blue-700),var(--cyan-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.person-vis::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(to top,rgba(255,255,255,.85),transparent);
}
/* With a real headshot the dot field and the white fade just muddy it. */
.person-vis--photo::before,.person-vis--photo::after{display:none}
.person-vis--photo img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  transition:transform .7s var(--ease-out);
}
.person:hover .person-vis--photo img{transform:scale(1.045)}
.person h3{font-size:1.16rem;margin-bottom:.15rem}
.person-role{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-600);font-weight:600;margin-bottom:.7rem;display:block;
}
.person p{font-size:.93rem;color:var(--ink-3);line-height:1.6;margin:0}

/* Group photo under the team split. Capped at the source width so the frame
   never stretches the image past its native 1024 and softens the faces. */
.team-photo{
  position:relative;margin:clamp(30px,4vw,52px) auto 0;max-width:1024px;
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-lg);background:var(--paper-2);
}
/* <picture> is inline by default, which would leave a few dead pixels under
   the image inside the rounded frame. */
.team-photo picture{display:block}
.team-photo img{display:block;width:100%;height:auto;aspect-ratio:1024/680;object-fit:cover}
.team-photo figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:clamp(28px,5vw,44px) clamp(16px,2.6vw,30px) clamp(14px,2.2vw,22px);
  background:linear-gradient(to top,rgba(6,34,80,.9),rgba(6,34,80,.55) 48%,rgba(6,34,80,0));
  color:#D8E6FB;font-size:clamp(.84rem,1.35vw,.97rem);line-height:1.55;
  text-shadow:0 1px 12px rgba(3,17,44,.45);
}
.team-photo figcaption b{
  display:block;color:#fff;font-family:var(--f-display);font-weight:700;
  font-size:clamp(.96rem,1.7vw,1.16rem);letter-spacing:-.02em;margin-bottom:.22rem;
}

/* ---------- 22. CTA band ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(150deg,#0A2A66 0%,#0F49B8 46%,#062250 100%);
  padding:clamp(38px,5.5vw,80px);color:#C3D7F5;
  box-shadow:var(--sh-xl);
}
.cta::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(700px 400px at 82% 20%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(700px 400px at 82% 20%,#000,transparent 72%);
}
.cta::after{
  content:"";position:absolute;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,195,240,.4),transparent 66%);
  bottom:-320px;right:-160px;filter:blur(24px);
}
.cta-in{position:relative;z-index:2;max-width:720px}
.cta h2{color:#fff;font-size:clamp(1.9rem,4vw,3rem)}
.cta p{font-size:1.1rem;color:#BDD3F4;margin-bottom:2rem}
.cta-steps{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;margin-top:clamp(32px,4vw,52px);padding-top:clamp(26px,3vw,38px);
  border-top:1px solid rgba(255,255,255,.16);
}
.cta-step{display:flex;gap:.85rem;align-items:center;font-size:.95rem;color:#DCE9FF;font-weight:600;font-family:var(--f-display)}
.cta-step b{
  width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  font-family:var(--f-mono);font-size:.8rem;color:#fff;
}
@media(max-width:760px){.cta-steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- 23. Footer ---------- */
.footer{
  background:linear-gradient(180deg,#04102B 0%,#061939 100%);
  color:#8FA6CC;padding-block:clamp(52px,6vw,80px) 2rem;margin-top:0;
  position:relative;overflow:hidden;
}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-500),var(--cyan-500),transparent);
}
.f-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,52px)}
.footer .brand-name{color:#fff}
.footer .brand-name span{color:var(--cyan-300)}
.footer .brand-sub{color:#6E86AE}
.f-about{font-size:.93rem;line-height:1.65;color:#8FA6CC;margin:1.2rem 0 1.4rem;max-width:34em}
.f-contact{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.f-contact li{display:flex;gap:.6rem;align-items:center;font-size:.9rem;margin:0;color:#A9BEE0}
.f-contact svg{width:16px;height:16px;color:var(--blue-400);flex:none}
.f-contact a{color:#A9BEE0}
.f-contact a:hover{color:#fff}
.f-col h4{
  color:#fff;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;margin-bottom:1.1rem;
}
.f-col ul{list-style:none;padding:0;margin:0;display:grid;gap:.62rem}
.f-col li{margin:0}
.f-col a{color:#8FA6CC;font-size:.9rem;transition:color .22s,transform .22s;display:inline-block}
.f-col a:hover{color:#fff;transform:translateX(3px)}
.f-bottom{
  margin-top:clamp(38px,4.4vw,58px);padding-top:1.7rem;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.83rem;color:#6E86AE;
}
.f-built{display:inline-flex;align-items:center;gap:.5rem}
.f-built .shamrock{width:14px;height:14px;color:var(--mint-500)}
.f-legal{display:inline-flex;align-items:center;gap:1.15rem}
.f-legal a{color:#8FA6CC;transition:color .22s}
.f-legal a:hover{color:#fff}
@media(max-width:900px){.f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.f-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 24. Page hero (interior) ---------- */
.phero{position:relative;overflow:hidden;padding-block:clamp(20px,3.5vw,28px) clamp(26px,3vw,42px)}
.phero .hero-bg::before{mask-image:radial-gradient(900px 480px at 30% 10%,#000,transparent 76%);-webkit-mask-image:radial-gradient(900px 480px at 30% 10%,#000,transparent 76%)}
/* .hero-bg is positioned with z-index:0, so it paints above any content that
   is not itself positioned — the grid was sitting over the headings on every
   layout that does not use .phero-in. Raise the wrap instead, so it covers
   whatever markup a page puts inside. */
.phero>.wrap{position:relative;z-index:2}
.phero-in{position:relative;z-index:2;max-width:900px}
.phero h1{font-size:clamp(2.2rem,5vw,3.7rem);margin-bottom:1rem}
.phero .lede{max-width:44em}
.breadcrumb{
  display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--ink-muted);margin-bottom:1.4rem;
}
.breadcrumb a{color:var(--ink-muted)}
.breadcrumb a:hover{color:var(--blue-700)}
.breadcrumb svg{width:11px;height:11px;opacity:.6}

/* ---------- 25. Reveal animation ----------
   Gated on .js so the page is fully readable without JavaScript. */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js [data-reveal="left"]{transform:translateX(-30px)}
.js [data-reveal="right"]{transform:translateX(30px)}
.js [data-reveal="scale"]{transform:scale(.95)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ---------- 26. Utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:1rem;top:-60px;z-index:400;
  background:var(--blue-700);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 10px 10px;
  font-weight:700;transition:top .25s;
}
.skip:focus{top:0}
.noise{position:absolute;inset:0;pointer-events:none;opacity:.028;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- 27. Testimonials ---------- */
.quote-card{display:flex;flex-direction:column;gap:1.1rem;margin:0}
.quote-mark{width:26px;height:26px;color:var(--blue-500);opacity:.45}
.quote-body{margin:0;font-size:1rem;line-height:1.68;color:var(--ink-2)}
.quote-author{display:flex;align-items:center;gap:.85rem;margin-top:auto;padding-top:.25rem}
.quote-avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--blue-700),var(--blue-500));
  color:#fff;font-family:var(--f-display);font-weight:700;font-size:.8rem;letter-spacing:.03em;
}
.quote-who{display:flex;flex-direction:column;line-height:1.35}
.quote-who strong{font-size:.94rem;color:var(--ink);font-weight:650}
.quote-who span{font-size:.84rem;color:var(--ink-muted)}

/* Client logo wall. Greyed right back so the marks read as quiet corroboration
   under the testimonials rather than competing with them, resolving to full
   colour on hover. Heights are set per mark rather than uniformly: a wide
   wordmark and a compact one at the same pixel height do not read as equal
   weight, so these are balanced by eye instead. */
.logo-wall{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(26px,4.4vw,60px);
  margin-top:clamp(30px,4vw,52px);
  padding-top:clamp(26px,3.4vw,42px);
  border-top:1px solid var(--line);
}
.logo-wall img{
  display:block;width:auto;
  filter:grayscale(1);opacity:.42;
  transition:filter .35s var(--ease-out),opacity .35s var(--ease-out);
}
.logo-wall img:hover{filter:grayscale(0);opacity:1}
/* The horizontal wordmark is a 4.83 ratio, so it needs a shorter height than
   the stacked mark it replaced or it dominates the row. */
.lw-bnp{height:clamp(20px,2.4vw,28px)}
.lw-mediolanum{height:clamp(20px,2.4vw,28px)}
.lw-asta{height:clamp(26px,3.1vw,36px)}
.lw-gt{height:clamp(18px,2.1vw,25px)}
.lw-pkf{height:clamp(28px,3.4vw,40px)}
@media(max-width:520px){.logo-wall{gap:26px 34px}}

/* ---------- 28. Marquee ---------- */
.marquee{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:0;width:max-content;animation:scroll 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee-item{
  display:flex;align-items:center;gap:.6rem;padding:0 1.8rem;
  font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--ink-3);
  white-space:nowrap;border-right:1px solid var(--line-soft);
}
.marquee-item svg{width:17px;height:17px;color:var(--blue-500);flex:none}

/* ---------- 29. Prefers reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .coursepanel,.float-card{animation:none}
}