@import url("../fonts/fonts.css");

/* ==========================================================================
   Capital Misr — design system
   Palette sampled directly from the approved concept boards.
   ========================================================================== */

:root{
  --cyan:#1CBCDE;          /* logo cyan */
  --blue:#0069CC;          /* primary interface blue */
  --blue-600:#0059AE;
  --blue-700:#00478E;
  --blue-050:#EDF4FD;
  --blue-100:#D8E7F8;
  --navy:#01162E;          /* dark sections */
  --navy-2:#062544;
  --navy-3:#0B3055;
  --slate:#2A4451;         /* logo slate */
  --red:#ED2124;
  --green:#12A150;
  --amber:#E8930C;

  --ink:#08141F;           /* headings */
  --ink-2:#1E2E3D;
  --body:#4B5C70;          /* paragraph text */
  --muted:#7E8DA1;
  --faint:#9AA7B8;

  /* warm neutral family: light bands and chips move off blue so the blue
     reads as an accent rather than a tint over the whole page */
  --sand:#F7F5F2;
  --sand-2:#F1EDE7;
  --sand-line:#E4DED4;

  --line:#E1E8F0;
  --line-2:#EEF2F7;
  --bg:#FFFFFF;
  --bg-soft:#F7F5F2;
  --bg-tint:#F2EEE8;

  --r:12px;
  --r-lg:20px;
  --r-pill:999px;
  --wrap:1320px;
  --pad:32px;
  --bleed:0px;            /* container edge to viewport edge, set by assets/js/motion.js */


  /* type scale — 7 steps, floor 12px. Nothing may sit off this scale;
     tools/audit.sh fails the build if it does. */
  --t-xs:12px;
  --t-sm:14px;
  --t-base:17px;
  --t-lg:21px;
  --t-xl:27px;
  --t-2xl:36px;
  --t-3xl:64px;

  --fd:"Poppins","Segoe UI",system-ui,sans-serif;   /* display */
  --fb:"Inter","Segoe UI",system-ui,sans-serif;     /* body */

  --sh-sm:0 1px 3px rgba(8,20,31,.06);
  --sh:0 10px 30px rgba(8,20,31,.08);
  --sh-lg:0 30px 70px rgba(8,20,31,.16);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--fb);font-size:var(--t-base);line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-600)}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5{font-family:var(--fd);color:var(--ink);margin:0;font-weight:600;letter-spacing:-.018em;line-height:1.2}
p{margin:0 0 12px}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
strong{font-weight:600;color:var(--ink-2)}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 var(--pad)}

/* --- type scale ---------------------------------------------------------- */
.h-hero{font-size:clamp(40px,4.6vw,64px);line-height:1.1;letter-spacing:-.03em}
.h-1{font-size:clamp(30px,3.4vw,46px);line-height:1.16;letter-spacing:-.024em}
.h-2{font-size:clamp(22px,2.4vw,31px);line-height:1.26}
.h-3{font-size:var(--t-lg);line-height:1.38}
.h-4{font-size:var(--t-base);line-height:1.42}
.lede{font-size:var(--t-base);line-height:1.7;color:var(--body)}
.small{font-size:var(--t-sm);line-height:1.68}
.tiny{font-size:var(--t-sm);line-height:1.6}
.b{color:var(--blue)}
.c{color:#0B7E9B}
.dark .c,.cta .c,.dark-panel .c,.hero-full .c,.ph-cap .c,.proj .c,.site-foot .c{color:var(--cyan)}
.ink{color:var(--ink)}
.mut{color:var(--muted)}
.center{text-align:center}
.nowrap{white-space:nowrap}

/* --- eyebrow / section headers ------------------------------------------ */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--fd);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  margin-bottom:16px;flex-wrap:nowrap;
}
.eyebrow .lbl{min-width:0}
.eyebrow .num{color:var(--blue);font-weight:600;letter-spacing:.06em;flex:none}
.eyebrow .lbl{color:var(--slate);opacity:.85}
.eyebrow-line::after{content:"";flex:1;height:1px;background:var(--line);margin-left:2px}

.sec{padding:80px 0}
.sec-tight{padding:48px 0}
.sec-soft{background:var(--bg-soft)}
.sec-tint{background:var(--bg-tint)}
.sec-head{margin-bottom:40px;max-width:820px}
.sec-head p{margin-top:16px}
.sec-head.center{margin-left:auto;margin-right:auto}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* --- icons --------------------------------------------------------------- */
.ic{width:22px;height:22px;flex:none}
.ic-sm{width:17px;height:17px}
.ic-xs{width:14px;height:14px}
.ic-lg{width:28px;height:28px}
.ic-xl{width:34px;height:34px}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--fd);font-weight:600;
  text-transform:none;letter-spacing:.01em;font-size:var(--t-sm);padding:16px 24px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;transition:.16s ease;white-space:nowrap;
  max-width:100%;
}
.btn .ic{width:17px;height:17px}
.btn-pri{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-pri:hover{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--blue-100)}
.btn-ghost:hover{border-color:var(--blue);background:var(--blue-050);color:var(--blue)}
.btn-dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-dark:hover{background:var(--navy-2);color:#fff}
.btn-onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-onDark:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.6)}
.btn-sm{padding:8px 16px;font-size:var(--t-sm)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}

.tlink{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);
}
.tlink .ic{width:14px;height:14px;transition:transform .16s ease}
.tlink:hover .ic{transform:translateX(3px)}

/* --- top utility bar ----------------------------------------------------- */
.lang{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.lang b{color:#fff;font-weight:600}

/* --- header -------------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:60;background:#fff}
/* Pages that open with a full-bleed hero let the header sit on the image. */
.has-hero .site-head{position:absolute;left:0;right:0;top:0;background:transparent}
.has-hero .site-head .nav>li>a{color:rgba(255,255,255,.9)}
.has-hero .site-head .nav>li>a:hover,.has-hero .site-head .nav>li.on>a{color:#fff}
/* Two marks ship in the header and CSS picks one. Every rule below is scoped
   to .brand so a bare `.brand img` declaration cannot outrank it and leave both
   of them laid out side by side. */
.brand .brand-mark--dark{display:block}
.brand .brand-mark--light{display:none}
.has-hero .site-head .brand .brand-mark--dark{display:none}
.has-hero .site-head .brand .brand-mark--light{display:block}
.has-hero .site-head.scrolled .brand .brand-mark--dark{display:block}
.has-hero .site-head.scrolled .brand .brand-mark--light{display:none}
.has-hero .site-head .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.has-hero .site-head .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.has-hero .nav-toggle{color:#fff;border-color:rgba(255,255,255,.35)}
/* once scrolled it re-forms as the solid bar, pinned to the top */
.has-hero .site-head.scrolled{position:fixed;top:0;background:#fff}
.has-hero .site-head.scrolled .nav>li>a{color:var(--ink-2)}
.has-hero .site-head.scrolled .nav>li.on>a{color:var(--blue)}

.has-hero .site-head.scrolled .btn-ghost{color:var(--blue);border-color:var(--blue-100)}
.has-hero .site-head.scrolled .nav-toggle{color:var(--ink);border-color:var(--line)}
.has-hero .subnav{position:absolute;left:0;right:0;top:82px;z-index:58;background:transparent}
.has-hero .subnav a{color:rgba(255,255,255,.78)}
.has-hero .subnav a:hover{color:#fff}
.has-hero .subnav a.on{color:#fff}
.has-hero .subnav a.on::after{background:var(--cyan)}
/* the hero needs to clear the header, and the sub-nav when there is one */
.has-hero .hero-in{padding-top:132px}
.has-hero:has(.subnav) .hero-in{padding-top:172px}
.head-in{display:flex;align-items:center;gap:16px;height:82px}
.brand{display:flex;align-items:center;gap:8px;flex:none}
.brand img{height:58px;width:auto}
.brand-tx{display:flex;flex-direction:column;line-height:1}
.brand-tx .n1{font-family:var(--fd);font-size:var(--t-base);font-weight:600;color:var(--blue);letter-spacing:.04em}
.brand-tx .n2{font-size:var(--t-xs);letter-spacing:.055em;color:var(--slate);margin-top:4px;text-transform:uppercase;font-weight:500}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>li{position:relative}
.nav>li>a{
  display:flex;align-items:center;gap:4px;padding:0 8px;height:82px;
  font-family:var(--fd);font-size:var(--t-xs);font-weight:500;letter-spacing:.055em;
  text-transform:uppercase;color:var(--ink-2);position:relative;
}
.nav>li>a .ic{width:11px;height:11px;opacity:.55}
.nav>li>a:hover{color:var(--blue)}
.nav>li.on>a{color:var(--blue)}
.nav>li.on>a::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--blue)}

.drop{
  position:absolute;top:100%;left:0;min-width:236px;background:#fff;
  border:1px solid var(--line);border-top:2px solid var(--blue);box-shadow:var(--sh-lg);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s ease;
}
.nav>li:hover .drop,.nav>li:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:8px 12px;font-size:var(--t-xs);color:var(--ink-2);border-radius:3px}
.drop a:hover{background:var(--blue-050);color:var(--blue)}

.head-cta{display:flex;align-items:center;gap:8px;flex:none}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:8px;color:var(--ink)}

/* --- sub nav ------------------------------------------------------------- */
.subnav{background:#fff}
.subnav .wrap{display:flex;gap:4px;justify-content:center;overflow-x:auto;scrollbar-width:none}
/* Over a hero the sub-nav has no ground of its own and reads as a second row of
   the header. Give it a contained, blurred bar so it is clearly its own object. */
.has-hero .subnav .wrap{
  width:max-content;max-width:calc(100% - var(--pad) * 2);margin-inline:auto;
  gap:2px;padding:5px 7px;border-radius:var(--r-pill);
  background:rgba(1,22,46,.52);border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.55);
}
.has-hero .subnav a{padding:9px 16px;border-radius:var(--r-pill)}
.has-hero .subnav a:hover{background:rgba(255,255,255,.09)}
.has-hero .subnav a.on{background:rgba(255,255,255,.14);font-weight:600}
.has-hero .subnav a.on::after{display:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{
  padding:12px 16px;font-size:var(--t-xs);color:var(--body);white-space:nowrap;position:relative;
  font-weight:500;
}
.subnav a:hover{color:var(--blue)}
.subnav a.on{color:var(--blue);font-weight:600}
.subnav a.on::after{content:"";position:absolute;left:15px;right:15px;bottom:-1px;height:2px;background:var(--blue)}

/* --- breadcrumb ---------------------------------------------------------- */
.crumb{display:flex;gap:8px;align-items:center;font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);font-family:var(--fd);font-weight:500}
.crumb a{color:var(--faint)}
.crumb a:hover{color:var(--blue)}

/* --- hero ----------------------------------------------------------------
   A full-bleed photograph with the copy set over it, rather than a text box
   beside a picture. The image is the page's first impression.
   ------------------------------------------------------------------------ */
.hero{position:relative;min-height:min(88vh,760px);display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;background:var(--navy);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
/* Two overlays: a horizontal ramp so the copy always has a dark bed, and a
   vertical one so the bottom strip separates from the picture. */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    /* Copy bed. It has to resolve to fully transparent, not to a low alpha:
       a .12 floor across the whole frame is what greys the photograph out.
       Past ~66% the image is untouched and keeps its own contrast. */
    linear-gradient(100deg,
      rgba(1,22,46,.94) 0%,
      rgba(1,22,46,.90) 26%,
      rgba(1,22,46,.78) 44%,
      rgba(1,22,46,.52) 58%,
      rgba(1,22,46,.20) 67%,
      rgba(1,22,46,0)   77%),
    /* Only enough at the edges to seat the floating header and the foot strip. */
    /* The top band has to carry the floating header AND the sub-nav beneath it.
       Daylight heroes are bright enough that a 14% falloff left the sub-nav
       links sitting on a lit window with almost no separation. */
    linear-gradient(180deg,
      rgba(1,22,46,.68) 0%,
      rgba(1,22,46,.46) 12%,
      rgba(1,22,46,.20) 22%,
      rgba(1,22,46,0)   34%,
      rgba(1,22,46,0)   68%,
      rgba(1,22,46,.22) 86%,
      rgba(1,22,46,.58) 100%);
}
.hero-in{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;
  padding-top:120px;padding-bottom:152px;width:100%}
.hero-tx{max-width:860px}
.hero-tx .lede{max-width:560px;margin-top:24px;color:#C6D4E4;font-size:var(--t-base)}
.hero .eyebrow{color:var(--cyan)}
.hero .eyebrow .lbl{color:var(--cyan);opacity:.9}
.hero h1{color:#fff}
.hero .btn-row{margin-top:32px}
.hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.06)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.hero .crumb,.hero .crumb a{color:rgba(255,255,255,.66)}
.hero .note{color:var(--cyan)}
.hero .small,.hero .mut,.hero p{color:#B7C7D8}
.hero .tile .ring{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:var(--cyan)}
.hero .tile:hover .ring{border-color:var(--cyan);background:rgba(28,188,222,.16)}
.hero .tile .lbl{color:#fff}
.hero .tile p{color:#A8BACE}
.hero .tile .step{color:var(--cyan)}
.hero .pipeline{color:var(--cyan)}
.hero .pipeline .sep{color:rgba(255,255,255,.45)}
.hero .crumb a:hover{color:#fff}

/* the glass card carrying callouts or statistics */
.hero-card{
  width:296px;padding:24px 24px;border-radius:var(--r-lg);
  background:rgba(3,20,40,.52);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 70px rgba(0,0,0,.34);
}
.hero-card .row{display:flex;gap:0;align-items:center;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.hero-card .row:last-child{border-bottom:0}
.hero-card .row:first-child{padding-top:0}
.hero-card .ic{color:var(--cyan);width:22px;height:22px;flex:none}
.hero-card b{display:block;font-family:var(--fd);font-size:var(--t-sm);font-weight:600;color:#fff;line-height:1.25}
.hero-card span{font-size:var(--t-xs);color:#9FB3CA;line-height:1.4}

/* capability strip pinned across the foot of the hero */
.hero-strip{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:rgba(1,16,33,.62);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(255,255,255,.12)}
.hero-strip__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:stretch}
.hero-strip__cell{flex:1;display:flex;align-items:center;gap:0;padding:16px 16px;
  border-right:1px solid rgba(255,255,255,.1);color:#DCE7F3;
  font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.25;min-width:0}
.hero-strip__cell:first-child{padding-left:0}
.hero-strip__cell:last-child{border-right:0;padding-right:0}
.hero-strip__cell .ic{color:var(--cyan);width:22px;height:22px;flex:none}

/* full-bleed variant used by the case study */
.hero-full{position:relative;min-height:440px;display:flex;align-items:center;overflow:hidden}
.hero-full>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-full::before{content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(95deg,
      rgba(1,22,46,.95) 0%,
      rgba(1,22,46,.88) 24%,
      rgba(1,22,46,.60) 44%,
      rgba(1,22,46,.22) 60%,
      rgba(1,22,46,0)   76%),
    linear-gradient(180deg,
      rgba(1,22,46,.66) 0%,
      rgba(1,22,46,.42) 13%,
      rgba(1,22,46,.16) 24%,
      rgba(1,22,46,0)   36%,
      rgba(1,22,46,0)   70%,
      rgba(1,22,46,.50) 100%)}
.hero-full .wrap{position:relative;z-index:2;padding-top:64px;padding-bottom:64px}
.hero-full,.hero-full h1,.hero-full .lede{color:#fff}
.hero-full h1{color:#fff}
.hero-full .lede{color:#C6D4E4}

.hero-feats{display:flex;flex-wrap:wrap;gap:0;margin-top:32px}
.hero-feat{display:flex;align-items:center;gap:12px;padding:0 24px 0 0;margin-right:24px;
  border-right:1px solid rgba(255,255,255,.2);color:#DCE7F3;font-size:var(--t-sm);font-weight:500;line-height:1.3}
.hero-feat:last-child{border-right:0;margin-right:0}
.hero-feat .ic{color:var(--cyan);width:24px;height:24px}
.hero-feat.stack{flex-direction:column;align-items:flex-start;gap:8px;text-align:left}

/* --- grid helpers -------------------------------------------------------- */
.grid{display:grid;gap:24px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g7{grid-template-columns:repeat(7,minmax(0,1fr))}
.g8{grid-template-columns:repeat(8,minmax(0,1fr))}
.g9{grid-template-columns:repeat(9,minmax(0,1fr))}
.g10{grid-template-columns:repeat(10,minmax(0,1fr))}
.gap-lg{gap:40px}
.gap-sm{gap:12px}
.span2{grid-column:span 2}
.span3{grid-column:span 3}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
/* A closing statement beside a row of labels. Deliberately not .split-1-2:
   that carries a :has(.grid) rule which would stack the two and strand the
   headline beside a void. */
.statement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:56px;align-items:center}
@media (max-width:900px){.statement{grid-template-columns:1fr;gap:28px}}
.split-1-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:start}
.split-2-1{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px;align-items:start}
.stack{display:flex;flex-direction:column;gap:12px}

/* --- panels & cards ------------------------------------------------------ */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.panel-soft{background:var(--bg-soft);border:1px solid var(--line-2);border-radius:var(--r);padding:24px}
.panel-tint{background:var(--blue-050);border:1px solid var(--blue-100);border-radius:var(--r);padding:24px}
.panel-pad{padding:24px}
.panel-flush{padding:0;overflow:hidden}
.panel h3,.panel h4{margin-bottom:8px}
.panel-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}

.card-link{display:block;transition:.16s ease}
.card-link:hover{border-color:var(--blue-100);box-shadow:var(--sh);transform:translateY(-2px)}

/* --- feature cards (icon + title + copy) --------------------------------- */
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 24px}
.feat .ic{color:var(--blue);margin-bottom:16px;width:30px;height:30px}
.feat h4{font-family:var(--fd);font-size:var(--t-base);font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.feat p{font-size:var(--t-sm);line-height:1.65;color:var(--body)}
.feat.bare{background:none;border:0;padding:0}
.feat.center{text-align:center}
.feat.center .ic{margin-left:auto;margin-right:auto}

.feat-row{display:flex;gap:16px;align-items:flex-start}
.feat-row .ic{color:var(--blue);flex:none;width:24px;height:24px;margin-top:1px}
.feat-row h4{font-family:var(--fd);font-size:var(--t-base);font-weight:600;color:var(--ink);margin-bottom:4px}
.feat-row p{font-size:var(--t-sm);line-height:1.62}

/* icon tile — circle/ring treatment used across the concept */
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.hero .tile .ring,.hero-full .tile .ring{display:none}
.hero .tile,.hero-full .tile{align-items:flex-start;text-align:left;gap:6px;
  padding-left:14px;border-left:1px solid rgba(255,255,255,.24)}
.tile .ring{
  width:66px;height:66px;border-radius:50%;border:1px solid var(--blue-100);
  display:grid;place-items:center;color:var(--blue);background:#fff;flex:none;
}
.tile .ring .ic{width:30px;height:30px}
.tile .lbl{font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);line-height:1.3}
.tile p{font-size:var(--t-sm);line-height:1.58;color:var(--body)}
.tile .step{font-family:var(--fd);font-size:var(--t-xs);font-weight:600;color:var(--blue);letter-spacing:.06em}

/* --- process flow (numbered steps with connectors) ----------------------- */
.flow{display:grid;gap:8px;align-items:start;overflow:hidden}
.flow>.tile{position:relative}
.flow>.tile:not(:last-child)::after{
  content:"";position:absolute;top:26px;right:-50%;width:calc(100% - 52px);height:1px;
  background:var(--line);margin-right:24px;
}
.flow.dashed>.tile:not(:last-child)::after{background:none;border-top:1px dashed var(--blue-100)}

/* compact chip flow: icon > icon > icon */
.chipflow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chipflow__step{display:flex;align-items:center;gap:8px}
.chipflow .node{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;text-align:center}
.chipflow .node .ic{color:var(--blue);width:22px;height:22px}
.chipflow .node span{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:600;font-family:var(--fd);line-height:1.3}
.chipflow .arw{color:var(--blue-100);flex:none}
.chipflow .arw .ic{width:14px;height:14px}

/* horizontal label pipeline: A -> B -> C */
.pipeline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--fd);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.pipeline .sep{color:var(--muted)}

/* --- lists --------------------------------------------------------------- */
.ck{display:flex;flex-direction:column;gap:8px}
.ck li{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-sm);line-height:1.6;color:var(--body)}
.ck li .ic{color:var(--blue);width:16px;height:16px;flex:none;margin-top:3px}
.ck li span{min-width:0;overflow-wrap:anywhere}
.ck.green li .ic{color:var(--green)}
.ck.tight li{font-size:var(--t-sm)}

.dots{display:flex;flex-direction:column;gap:8px}
.dots li{position:relative;padding-left:16px;font-size:var(--t-sm);line-height:1.62;color:var(--body)}
.dots li::before{content:"";position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--blue)}

.numlist{display:flex;flex-direction:column;gap:24px;counter-reset:n}
.numlist li{display:flex;gap:12px}
.numlist .n{font-family:var(--fd);font-size:var(--t-xs);font-weight:600;color:var(--blue);flex:none;
  width:22px;padding-top:1px;letter-spacing:.05em}
.numlist h4{font-family:var(--fd);font-size:var(--t-base);font-weight:600;color:var(--ink);margin-bottom:4px}
.numlist p{font-size:var(--t-sm);line-height:1.62}

/* --- dark surfaces ------------------------------------------------------- */
.dark{background:var(--navy);color:#B9C7D8;position:relative;overflow:hidden}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark-panel h1, .cta h1, .dark-panel h2, .cta h2, .dark-panel h3, .cta h3, .dark-panel h4, .cta h4{color:#fff}
.hero-full h1, .hero-full h2, .hero-full h3, .hero-full h4{color:#fff}
.dark .eyebrow .lbl{color:#8FA6C0}
.dark-panel .eyebrow .lbl, .cta .eyebrow .lbl{color:#8FA6C0}
.hero-full .eyebrow .lbl{color:#8FA6C0}
.dark .eyebrow,.dark .eyebrow .num{color:var(--cyan)}
.dark-panel .eyebrow, .cta .eyebrow, .dark-panel .eyebrow .num, .cta .eyebrow .num{color:var(--cyan)}
.hero-full .eyebrow, .hero-full .eyebrow .num{color:var(--cyan)}
.dark .lede{color:#B9C7D8}
.dark-panel .lede, .cta .lede{color:#B9C7D8}
.hero-full .lede{color:#B9C7D8}
.dark .panel{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);color:#B9C7D8}
.dark-panel .panel, .cta .panel{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);color:#B9C7D8}
.hero-full .panel{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12);color:#B9C7D8}
.dark .feat{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.dark-panel .feat, .cta .feat{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.hero-full .feat{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.dark .feat p,.dark .ck li,.dark .dots li{color:#A8B9CD}
.dark-panel .feat p, .cta .feat p, .dark-panel .ck li, .cta .ck li, .dark-panel .dots li, .cta .dots li{color:#A8B9CD}
.hero-full .feat p, .hero-full .ck li, .hero-full .dots li{color:#A8B9CD}
.dark .feat .ic,.dark .tile .ring,.dark .ck li .ic,.dark .feat-row .ic{color:var(--cyan)}
.dark-panel .feat .ic, .cta .feat .ic, .dark-panel .tile .ring, .cta .tile .ring, .dark-panel .ck li .ic, .cta .ck li .ic, .dark-panel .feat-row .ic, .cta .feat-row .ic{color:var(--cyan)}
.hero-full .feat .ic, .hero-full .tile .ring, .hero-full .ck li .ic, .hero-full .feat-row .ic{color:var(--cyan)}
.dark .tile .ring{background:rgba(255,255,255,.05);border-color:rgba(28,188,222,.4)}
.dark-panel .tile .ring, .cta .tile .ring{background:rgba(255,255,255,.05);border-color:rgba(28,188,222,.4)}
.hero-full .tile .ring{background:rgba(255,255,255,.05);border-color:rgba(28,188,222,.4)}
.dark .tile .lbl{color:#fff}
.dark-panel .tile .lbl, .cta .tile .lbl{color:#fff}
.hero-full .tile .lbl{color:#fff}
.dark .tile p{color:#9FB3CA}
.dark-panel .tile p, .cta .tile p{color:#9FB3CA}
.hero-full .tile p{color:#9FB3CA}
.dark .rule,.dark .flow>.tile:not(:last-child)::after{background:rgba(255,255,255,.14)}
.dark-panel .rule, .cta .rule, .dark-panel .flow>.tile:not(:last-child)::after, .cta .flow>.tile:not(:last-child)::after{background:rgba(255,255,255,.14)}
.hero-full .rule, .hero-full .flow>.tile:not(:last-child)::after{background:rgba(255,255,255,.14)}
.dark .b{color:var(--cyan)}
.dark-panel .b, .cta .b{color:var(--cyan)}
.hero-full .b{color:var(--cyan)}
.dark .mut{color:#8FA6C0}
.dark-panel .mut, .cta .mut{color:#8FA6C0}
.hero-full .mut{color:#8FA6C0}
.dark .chipflow .node .ic{color:var(--cyan)}
.dark-panel .chipflow .node .ic, .cta .chipflow .node .ic{color:var(--cyan)}
.hero-full .chipflow .node .ic{color:var(--cyan)}
.dark .chipflow .node span{color:#8FA6C0}
.dark-panel .chipflow .node span, .cta .chipflow .node span{color:#8FA6C0}
.hero-full .chipflow .node span{color:#8FA6C0}
.dark .chipflow .arw{color:rgba(28,188,222,.45)}
.dark-panel .chipflow .arw, .cta .chipflow .arw{color:rgba(28,188,222,.45)}
.hero-full .chipflow .arw{color:rgba(28,188,222,.45)}
.dark .dots li::before{background:var(--cyan)}
.dark-panel .dots li::before, .cta .dots li::before{background:var(--cyan)}
.hero-full .dots li::before{background:var(--cyan)}
.dark a{color:var(--cyan)}
.dark-panel a, .cta a{color:var(--cyan)}
.hero-full a{color:var(--cyan)}
.dark .tlink{color:var(--cyan)}
.dark-panel .tlink, .cta .tlink{color:var(--cyan)}
.hero-full .tlink{color:var(--cyan)}

/* blueprint wireframe texture used behind the concept's dark bands */
.bp::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(28,188,222,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,188,222,.075) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 80% 120% at 15% 50%,#000 10%,transparent 72%);
  mask-image:radial-gradient(ellipse 80% 120% at 15% 50%,#000 10%,transparent 72%);
}
.bp>*{position:relative;z-index:1}
.bp-r::before{-webkit-mask-image:radial-gradient(ellipse 70% 120% at 88% 50%,#000 10%,transparent 74%);
  mask-image:radial-gradient(ellipse 70% 120% at 88% 50%,#000 10%,transparent 74%)}
.bp-c::before{-webkit-mask-image:radial-gradient(ellipse 90% 130% at 50% 50%,#000 5%,transparent 70%);
  mask-image:radial-gradient(ellipse 90% 130% at 50% 50%,#000 5%,transparent 70%)}

.dark-panel{background:linear-gradient(150deg,var(--navy-2) 0%,var(--navy) 62%);
  color:#B9C7D8;border-radius:var(--r);padding:32px;position:relative;overflow:hidden}
.dark-panel h2,.dark-panel h3,.dark-panel h4,.dark-panel b{color:#fff}
.hero-full h2, .hero-full h3, .hero-full h4, .hero-full b{color:#fff}

/* --- stat band ----------------------------------------------------------- */
.stats{display:grid;gap:0}
.stat{padding:8px 16px;border-right:1px solid rgba(255,255,255,.13);text-align:center}
.stat:last-child{border-right:0}
.stat .ic{color:var(--cyan);margin:0 auto 8px;width:30px;height:30px}
.stat .v{font-family:var(--fd);font-size:clamp(24px,2.6vw,34px);font-weight:600;color:#fff;line-height:1.1;letter-spacing:-.02em}
.stat .k{font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;color:#8FA6C0;margin-top:8px;font-weight:500}
.stats.light .stat{border-color:var(--line)}
.stats.light .v{color:var(--blue)}
.stats.light .k{color:var(--muted)}
.stats.light .ic{color:var(--blue)}

/* --- CTA band ------------------------------------------------------------ */
.cta{background:linear-gradient(105deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);
  color:#fff;position:relative;overflow:hidden}
.cta .wrap{position:relative;z-index:2;padding-top:72px;padding-bottom:72px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta h2{color:#fff;font-size:clamp(26px,2.9vw,38px);line-height:1.3;max-width:700px}
.cta p{color:#A8BACE;font-size:var(--t-sm);margin-top:16px;max-width:600px}
.cta .btn-row{margin-top:0;flex:none}
.cta .btn-pri{background:var(--blue);border-color:var(--blue)}

/* --- footer -------------------------------------------------------------- */
.site-foot{background:var(--navy);color:#93A6BC;font-size:var(--t-xs);padding-top:40px}
.foot-top{display:grid;grid-template-columns:minmax(190px,1.15fr) repeat(4,minmax(0,1fr));gap:24px;padding-bottom:32px}
.foot-wide{grid-template-columns:minmax(190px,1.1fr) repeat(8,minmax(0,.62fr))}
/* width:auto matters here - without it the intrinsic width attribute wins and
   the mark is stretched to the full column. */
.foot-brand img{height:56px;width:auto;margin-bottom:18px}
.foot-brand p{font-size:var(--t-xs);line-height:1.7;color:#93A6BC;max-width:220px}
.foot-col h5{font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;margin-bottom:12px}
.foot-col a{display:block;color:#93A6BC;padding:3.5px 0;font-size:var(--t-xs)}
.foot-col a:hover{color:var(--cyan)}
.socials{display:flex;gap:8px;margin-top:16px}
.socials a{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07);
  display:grid;place-items:center;color:#C3D2E3}
.socials a:hover{background:var(--blue);color:#fff}
.socials .ic{width:15px;height:15px}
.foot-bot{border-top:1px solid rgba(255,255,255,.1);padding:16px 0;display:flex;
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:var(--t-xs);color:#7E93AB}
.foot-bot a{color:#7E93AB}
.foot-bot a:hover{color:var(--cyan)}
.foot-bot .links{display:flex;gap:16px}

/* --- discipline / media cards (angled photo tops) ------------------------ */
.disc{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.16s ease}
.disc:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.disc .ph{height:118px;position:relative;overflow:hidden;background:var(--navy)}
.disc .ph img{width:100%;height:100%;object-fit:cover}
.disc .bd{padding:16px;display:flex;flex-direction:column;flex:1}
.disc .bd .ic{color:var(--blue);width:24px;height:24px;margin-bottom:8px}
.disc h3{font-family:var(--fd);font-size:var(--t-sm);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.disc p{font-size:var(--t-xs);line-height:1.55;margin-bottom:12px}
.disc .ck{margin-bottom:12px}
.disc .tlink{margin-top:auto;padding-top:12px;border-top:1px solid var(--line-2)}

/* --- project cards ------------------------------------------------------- */
.proj{position:relative;border-radius:var(--r);overflow:hidden;min-height:320px;
  display:flex;flex-direction:column;justify-content:flex-end;color:#fff;background:var(--navy)}
.proj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.proj::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(1,22,46,.96) 0%,rgba(1,22,46,.80) 34%,rgba(1,22,46,.22) 100%)}
.proj .bd{position:relative;z-index:2;padding:24px}
.proj-lead{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;flex-wrap:wrap;margin-bottom:32px}
.proj h3{color:#fff;font-family:var(--fd);font-size:var(--t-base);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.proj .meta{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.proj .meta span{display:block;font-size:var(--t-xs);color:#C6D4E4}
.proj .meta .ic{width:13px;height:13px;color:var(--cyan);flex:none}
.proj .tlink{color:#fff}
.proj .tlink:hover{color:var(--cyan)}
.proj:hover img{transform:scale(1.04)}
.proj img{transition:transform .5s ease}

/* --- article cards ------------------------------------------------------- */
.art{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:.16s ease}
.art:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.art .ph{height:132px;overflow:hidden;background:var(--navy)}
.art .ph img{width:100%;height:100%;object-fit:cover}
.art .bd{padding:16px;display:flex;flex-direction:column;flex:1}
.art .cat{font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.art h3{font-size:var(--t-sm);font-weight:600;line-height:1.4;color:var(--ink);margin-bottom:8px;letter-spacing:-.005em}
.art .rt{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--muted);margin-bottom:12px}
.art .rt .ic{width:12px;height:12px}
.art .tlink{margin-top:auto}

/* --- tables -------------------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-xs)}
.tbl th,.tbl td{overflow-wrap:anywhere}
.tbl th,.tbl td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line-2)}
.tbl th{font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:var(--bg-soft)}
.tbl td{color:var(--body)}
.tbl tr:last-child td{border-bottom:0}
.tbl .k{color:var(--ink);font-weight:500;display:flex;align-items:center;gap:8px}
.tbl .k .ic{width:15px;height:15px;color:var(--blue)}
.tbl-matrix td,.tbl-matrix th{text-align:center;border:1px solid var(--line-2)}
.tbl-matrix td:first-child,.tbl-matrix th:first-child{text-align:left}
.tbl-matrix .ic{color:var(--green);width:15px;height:15px;margin:0 auto}
.dark .tbl th{background:rgba(255,255,255,.06);color:#8FA6C0}
.dark-panel .tbl th, .cta .tbl th{background:rgba(255,255,255,.06);color:#8FA6C0}
.hero-full .tbl th{background:rgba(255,255,255,.06);color:#8FA6C0}
.dark .tbl td,.dark .tbl-matrix td,.dark .tbl-matrix th{border-color:rgba(255,255,255,.1);color:#A8B9CD}
.dark-panel .tbl td, .cta .tbl td, .dark-panel .tbl-matrix td, .cta .tbl-matrix td, .dark-panel .tbl-matrix th, .cta .tbl-matrix th{border-color:rgba(255,255,255,.1);color:#A8B9CD}
.hero-full .tbl td, .hero-full .tbl-matrix td, .hero-full .tbl-matrix th{border-color:rgba(255,255,255,.1);color:#A8B9CD}
.dark .tbl .k{color:#fff}
.dark-panel .tbl .k, .cta .tbl .k{color:#fff}
.hero-full .tbl .k{color:#fff}
.dark .prog-row .k{color:#fff}
.dark-panel .prog-row .k, .cta .prog-row .k{color:#fff}
.hero-full .prog-row .k{color:#fff}
.dark .prog-row .v{color:#fff}
.dark-panel .prog-row .v, .cta .prog-row .v{color:#fff}
.hero-full .prog-row .v{color:#fff}
.dark .prog-row{border-bottom-color:rgba(255,255,255,.1)}
.dark-panel .prog-row, .cta .prog-row{border-bottom-color:rgba(255,255,255,.1)}
.hero-full .prog-row{border-bottom-color:rgba(255,255,255,.1)}
.dark .prog-row .k .ic{color:var(--cyan)}
.dark-panel .prog-row .k .ic, .cta .prog-row .k .ic{color:var(--cyan)}
.hero-full .prog-row .k .ic{color:var(--cyan)}
.dark .bar{background:rgba(255,255,255,.12)}
.dark-panel .bar, .cta .bar{background:rgba(255,255,255,.12)}
.hero-full .bar{background:rgba(255,255,255,.12)}
.dark .bar i{background:var(--cyan)}
.dark-panel .bar i, .cta .bar i{background:var(--cyan)}
.hero-full .bar i{background:var(--cyan)}
.dark .kv .k{color:#8FA6C0}
.dark-panel .kv .k, .cta .kv .k{color:#8FA6C0}
.hero-full .kv .k{color:#8FA6C0}
.dark .kv .v{color:#fff}
.dark-panel .kv .v, .cta .kv .v{color:#fff}
.hero-full .kv .v{color:#fff}
.dark .kv .row{border-bottom-color:rgba(255,255,255,.1)}
.dark-panel .kv .row, .cta .kv .row{border-bottom-color:rgba(255,255,255,.1)}
.hero-full .kv .row{border-bottom-color:rgba(255,255,255,.1)}
.dark .kv .k .ic{color:var(--cyan)}
.dark-panel .kv .k .ic, .cta .kv .k .ic{color:var(--cyan)}
.hero-full .kv .k .ic{color:var(--cyan)}
.dark .numlist h4{color:#fff}
.dark-panel .numlist h4, .cta .numlist h4{color:#fff}
.hero-full .numlist h4{color:#fff}
.dark .numlist p{color:#A8B9CD}
.dark-panel .numlist p, .cta .numlist p{color:#A8B9CD}
.hero-full .numlist p{color:#A8B9CD}
.dark .numlist .n{color:var(--cyan)}
.dark-panel .numlist .n, .cta .numlist .n{color:var(--cyan)}
.hero-full .numlist .n{color:var(--cyan)}
.dark .pill-ok{background:rgba(18,161,80,.16);color:#7FD3A5}
.dark-panel .pill-ok, .cta .pill-ok{background:rgba(18,161,80,.16);color:#7FD3A5}
.hero-full .pill-ok{background:rgba(18,161,80,.16);color:#7FD3A5}
.dark .pill-b{background:rgba(28,188,222,.14);color:var(--cyan)}
.dark-panel .pill-b, .cta .pill-b{background:rgba(28,188,222,.14);color:var(--cyan)}
.hero-full .pill-b{background:rgba(28,188,222,.14);color:var(--cyan)}
.dark .quote p{color:#fff}
.dark-panel .quote p, .cta .quote p{color:#fff}
.hero-full .quote p{color:#fff}
.dark .small,.dark p{color:#A8B9CD}
.dark-panel .small, .cta .small, .dark-panel p, .cta p{color:#A8B9CD}
.hero-full .small, .hero-full p{color:#A8B9CD}
.dark .filter-lbl,.dark .tiny.mut{color:#8FA6C0}
.dark-panel .filter-lbl, .cta .filter-lbl, .dark-panel .tiny.mut, .cta .tiny.mut{color:#8FA6C0}
.hero-full .filter-lbl, .hero-full .tiny.mut{color:#8FA6C0}

/* traditional -> integrated comparison rows */
.cmp{display:flex;flex-direction:column;gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.cmp .row{display:grid;grid-template-columns:1fr 30px 1fr;align-items:center;gap:8px;background:#fff;padding:8px 12px}
.cmp .from{font-size:var(--t-xs);color:var(--body)}
.cmp .to{font-size:var(--t-xs);color:var(--blue);font-weight:500}
.cmp .arw{color:var(--blue);display:grid;place-items:center}
.cmp .arw .ic{width:15px;height:15px}
.dark .cmp{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
.dark-panel .cmp, .cta .cmp{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
.hero-full .cmp{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12)}
.dark .cmp .row{background:var(--navy-2)}
.dark-panel .cmp .row, .cta .cmp .row{background:var(--navy-2)}
.hero-full .cmp .row{background:var(--navy-2)}
.dark .cmp .from{color:#A8B9CD}
.dark-panel .cmp .from, .cta .cmp .from{color:#A8B9CD}
.hero-full .cmp .from{color:#A8B9CD}
.dark .cmp .to{color:var(--cyan)}
.dark-panel .cmp .to, .cta .cmp .to{color:var(--cyan)}
.hero-full .cmp .to{color:var(--cyan)}
.dark .cmp .arw{color:var(--cyan)}
.dark-panel .cmp .arw, .cta .cmp .arw{color:var(--cyan)}
.hero-full .cmp .arw{color:var(--cyan)}

/* --- filters / tabs ------------------------------------------------------ */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;font-family:var(--fd);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--body);cursor:pointer;transition:.14s}
.chip:hover{border-color:var(--blue-100);color:var(--blue)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.filter-lbl{font-size:var(--t-xs);color:var(--muted);margin-bottom:8px;font-weight:500}

/* --- quote --------------------------------------------------------------- */
.quote{position:relative;padding-left:2px}
.quote .mark{font-family:var(--fd);font-size:44px/*decorative glyph*/;line-height:.7;color:#5F8CC0;display:block;margin-bottom:8px}
.quote p{font-family:var(--fd);font-size:var(--t-base);line-height:1.48;color:var(--ink);font-weight:500;letter-spacing:-.015em}
.dark .quote p{color:#fff}
.dark-panel .quote p, .cta .quote p{color:#fff}
.hero-full .quote p{color:#fff}
.dark .quote .mark{color:rgba(28,188,222,.4)}
.dark-panel .quote .mark, .cta .quote .mark{color:rgba(28,188,222,.4)}
.hero-full .quote .mark{color:rgba(28,188,222,.4)}

/* --- radial / ecosystem diagram ------------------------------------------ */
.radial{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin:0 auto 32px}
.radial .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:38%;aspect-ratio:1;border-radius:50%;border:1px solid var(--blue-100);background:#fff;
  display:grid;place-items:center;text-align:center;padding:12px;gap:4px}
.radial .core .ic{color:var(--blue);width:26px;height:26px;margin:0 auto}
.radial .core b{font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);line-height:1.3;display:block}
.radial .ring{position:absolute;inset:6%;border:1px dashed var(--blue-100);border-radius:50%}
.radial .sat{position:absolute;transform:translate(-50%,-50%);text-align:center;width:92px}
.radial .sat .ic{color:var(--blue);width:22px;height:22px;margin:0 auto 4px}
.radial .sat b{display:block;font-family:var(--fd);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink);line-height:1.25}
.radial .sat span{font-size:var(--t-xs);color:var(--body);line-height:1.4;display:block;margin-top:3px}
.dark .radial .core{background:rgba(255,255,255,.05);border-color:rgba(28,188,222,.4)}
.dark-panel .radial .core, .cta .radial .core{background:rgba(255,255,255,.05);border-color:rgba(28,188,222,.4)}
.hero-full .radial .core{background:rgba(255,255,255,.05);border-color:rgba(28,188,222,.4)}
.dark .radial .core b,.dark .radial .sat b{color:#fff}
.dark-panel .radial .core b, .cta .radial .core b, .dark-panel .radial .sat b, .cta .radial .sat b{color:#fff}
.hero-full .radial .core b, .hero-full .radial .sat b{color:#fff}
.dark .radial .core .ic,.dark .radial .sat .ic{color:var(--cyan)}
.dark-panel .radial .core .ic, .cta .radial .core .ic, .dark-panel .radial .sat .ic, .cta .radial .sat .ic{color:var(--cyan)}
.hero-full .radial .core .ic, .hero-full .radial .sat .ic{color:var(--cyan)}
.dark .radial .ring{border-color:rgba(28,188,222,.3)}
.dark-panel .radial .ring, .cta .radial .ring{border-color:rgba(28,188,222,.3)}
.hero-full .radial .ring{border-color:rgba(28,188,222,.3)}
.dark .radial .sat span{color:#9FB3CA}
.dark-panel .radial .sat span, .cta .radial .sat span{color:#9FB3CA}
.hero-full .radial .sat span{color:#9FB3CA}

/* Below ~700px a 320px circle with 6+ satellites is unreadable and the fixed
   92px label box cannot hold a word like "Communication". Drop the geometry and
   render the same content as a plain list. */
@media (max-width:700px){
  .radial,.radial-dense{aspect-ratio:auto;max-width:none;margin:0 auto 24px;
    display:grid;gap:0}
  .radial .ring{display:none}
  .radial .core{position:static;transform:none;width:auto;aspect-ratio:auto;
    border-radius:var(--r-lg);padding:16px 16px;margin-bottom:16px;gap:8px}
  .radial .sat{position:static;transform:none;width:auto;text-align:left;
    display:grid;grid-template-columns:22px 1fr;column-gap:12px;row-gap:2px;
    align-items:start;padding:12px 0;border-top:1px solid var(--line-2)}
  .radial .sat .ic{margin:0;grid-row:1/span 2}
  .radial .sat b,.radial .sat span{grid-column:2}
  .radial .sat span{margin-top:0}
}

/* concentric model rings */
.rings{display:grid;place-items:center;position:relative;aspect-ratio:1;max-width:340px;margin:0 auto}
.rings div{position:absolute;border-radius:50%;border:1px solid var(--blue-100);display:grid;
  place-items:end center;padding-top:8px;font-family:var(--fd);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.rings .r1{inset:0;background:rgba(237,244,253,.42)}
.rings .r2{inset:13%;background:rgba(216,231,248,.5)}
.rings .r3{inset:26%;background:rgba(196,220,246,.55)}
.rings .r4{inset:39%;background:rgba(0,105,204,.1)}
.rings .hub{inset:52%;background:var(--blue);border-color:var(--blue);color:#fff;
  place-items:center;padding:0;text-align:center;font-size:var(--t-xs);line-height:1.25}

/* --- layered stack diagram ----------------------------------------------- */
.layers{display:flex;flex-direction:column;gap:4px}
/* Label-only rows: a compact grid rather than full-width bars with a dead tail. */
.layers--compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.layers--compact .lay{padding:11px 14px}
.layers--compact .lay b{min-width:0}
.layers .lay{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;border-left:3px solid var(--blue)}
.layers .lay .ic{color:var(--blue);width:19px;height:19px;flex:none}
.layers .lay b{font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);flex:none;min-width:118px}
.layers .lay span{font-size:var(--t-xs);color:var(--body);line-height:1.45}
.dark .layers .lay{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);border-left-color:var(--cyan)}
.dark-panel .layers .lay, .cta .layers .lay{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);border-left-color:var(--cyan)}
.hero-full .layers .lay{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);border-left-color:var(--cyan)}
.dark .layers .lay b{color:#fff}
.dark-panel .layers .lay b, .cta .layers .lay b{color:#fff}
.hero-full .layers .lay b{color:#fff}
.dark .layers .lay span{color:#9FB3CA}
.dark-panel .layers .lay span, .cta .layers .lay span{color:#9FB3CA}
.hero-full .layers .lay span{color:#9FB3CA}
.dark .layers .lay .ic{color:var(--cyan)}
.dark-panel .layers .lay .ic, .cta .layers .lay .ic{color:var(--cyan)}
.hero-full .layers .lay .ic{color:var(--cyan)}

/* --- tree / branch diagram ----------------------------------------------- */
.tree{display:flex;flex-direction:column;align-items:center;gap:0;font-family:var(--fd)}
.tree .node{border:1px solid var(--line);border-radius:var(--r);padding:8px 16px;background:#fff;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);text-align:center}
.tree .node.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.tree .node.alert{background:#FDEBEB;border-color:#F6C9C9;color:var(--red)}
.tree .node.ok{background:#E8F7EE;border-color:#BFE6CE;color:var(--green)}
.tree .stem{width:1px;height:16px;background:var(--line)}
.tree .branch{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tree .bar{height:1px;background:var(--line);width:78%}
.dark .tree .node{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.dark-panel .tree .node, .cta .tree .node{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.hero-full .tree .node{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.dark .tree .stem,.dark .tree .bar{background:rgba(255,255,255,.2)}
.dark-panel .tree .stem, .cta .tree .stem, .dark-panel .tree .bar, .cta .tree .bar{background:rgba(255,255,255,.2)}
.hero-full .tree .stem, .hero-full .tree .bar{background:rgba(255,255,255,.2)}

/* --- journey (photo/step strip) ------------------------------------------ */
.journey{display:grid;gap:8px;align-items:start;overflow:hidden}
.journey .st{text-align:center;position:relative}
.journey .st .av{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid var(--blue-100);
  margin-bottom:8px;background:var(--bg-soft);max-width:82px;margin-left:auto;margin-right:auto}
.journey .st .av img{width:100%;height:100%;object-fit:cover}
.journey .st .n{font-family:var(--fd);font-size:var(--t-xs);font-weight:600;color:var(--blue);letter-spacing:.06em}
.journey .st b{display:block;font-family:var(--fd);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-top:3px}
.journey .st span{font-size:var(--t-xs);color:var(--body);line-height:1.42;display:block;margin-top:3px}
.journey .st:not(:last-child)::after{content:"";position:absolute;top:41px;left:calc(50% + 48px);
  right:calc(-50% + 48px);height:1px;background:var(--line)}
/* ...but not on the last cell of a row, where it would trail off into nothing */
.journey.g2 .st:nth-child(2n)::after,
.journey.g3 .st:nth-child(3n)::after,
.journey.g4 .st:nth-child(4n)::after,
.journey.g5 .st:nth-child(5n)::after,
.journey.g6 .st:nth-child(6n)::after,
.journey.g7 .st:nth-child(7n)::after,
.journey.g8 .st:nth-child(8n)::after{display:none}

/* --- timeline / day strip ------------------------------------------------ */
.daystrip{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.daystrip .h{text-align:center;padding:12px 8px;border-right:1px solid var(--line-2);min-width:0}
.daystrip .h:last-child{border-right:0}
.daystrip .h span{display:block;overflow-wrap:anywhere}
.daystrip .h b{display:block;font-family:var(--fd);font-size:var(--t-xs);font-weight:600;color:var(--blue)}
.daystrip .h span{font-size:var(--t-xs);color:var(--body);line-height:1.4;display:block;margin-top:3px}

/* --- progress ------------------------------------------------------------ */
.bar{height:5px;border-radius:3px;background:var(--line-2);overflow:hidden}
.bar i{display:block;height:100%;background:var(--blue);border-radius:3px}
.bar.ok i{background:var(--green)}
.prog-row{display:grid;grid-template-columns:1fr 90px 44px;align-items:center;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line-2);font-size:var(--t-xs)}
.prog-row:last-child{border-bottom:0}
.prog-row .k{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:500}
.prog-row .k .ic{width:16px;height:16px;color:var(--blue)}
.prog-row .v{text-align:right;font-family:var(--fd);font-weight:600;color:var(--ink);font-size:var(--t-xs)}

/* --- status pills -------------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;font-family:var(--fd)}
.pill-ok{background:#E8F7EE;color:#0C7A3C}
.pill-b{background:var(--blue-050);color:var(--blue)}
.pill-r{background:#FDEBEB;color:#C81C1F}
.pill-a{background:#FEF3E0;color:#A66505}

/* --- forms --------------------------------------------------------------- */
.field{position:relative;margin-bottom:12px}
.field .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--faint)}
.inp,.sel,.ta{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;font-family:var(--fb);font-size:var(--t-xs);color:var(--ink);transition:.14s}
.field .ic+.inp{padding-left:32px}
.inp::placeholder,.ta::placeholder{color:var(--faint)}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-050)}
.ta{min-height:96px;resize:vertical;line-height:1.6}
.sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E8DA1' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:14px;padding-right:32px;cursor:pointer}
.flabel{font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);margin-bottom:12px;display:block}
.cbx{display:flex;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--body);padding:4px 0;cursor:pointer}
.cbx input{width:14px;height:14px;accent-color:var(--blue);margin:0;flex:none;cursor:pointer}
.drop-zone{display:block;border:1px dashed var(--blue-100);border-radius:var(--r);background:var(--blue-050);
  padding:20px;text-align:center;cursor:pointer;transition:.14s}
.drop-zone:hover{border-color:var(--blue);background:#E4EFFC}
.drop-zone .ic{color:var(--blue);width:26px;height:26px;margin:0 auto 8px}
.drop-zone b{display:block;font-size:var(--t-xs);color:var(--ink);font-weight:500}
.drop-zone span{font-size:var(--t-xs);color:var(--blue)}

/* selectable requirement cards */
.opt{border:1px solid var(--line);border-radius:var(--r);padding:16px 16px;text-align:center;
  background:#fff;cursor:pointer;transition:.14s;
  /* top-align: otherwise a 3-line description centres its card and the title
     sits ~13px above the titles either side of it */
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.opt:hover{border-color:var(--blue-100);box-shadow:var(--sh-sm)}
.opt.on{border-color:var(--blue);background:var(--blue-050);box-shadow:inset 0 0 0 1px var(--blue)}
.opt .ic{color:var(--blue);width:30px;height:30px;margin:0 auto 12px}
.opt b{display:block;font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.opt span{font-size:var(--t-xs);color:var(--body);line-height:1.45}

/* --- accordion ----------------------------------------------------------- */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.acc details{border-bottom:1px solid var(--line-2)}
.acc details:last-child{border-bottom:0}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  cursor:pointer;font-size:var(--t-xs);color:var(--ink);list-style:none;font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ic{width:14px;height:14px;color:var(--faint);transition:transform .18s}
.acc details[open] summary{color:var(--blue)}
.acc details[open] summary .ic{transform:rotate(90deg);color:var(--blue)}
.acc .body{padding:0 16px 12px;font-size:var(--t-xs);line-height:1.6;color:var(--body)}

/* --- map placeholder ----------------------------------------------------- */
.mapbox{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:#EEF2F7;min-height:230px;display:grid;place-items:center}
.mapbox::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(160,175,195,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(160,175,195,.28) 1px,transparent 1px);background-size:34px 34px}
.mapbox .pinmark{position:relative;z-index:1;color:var(--blue);width:40px;height:40px}

/* --- media helpers ------------------------------------------------------- */
.ph-box{position:relative;border-radius:var(--r);overflow:hidden;background:var(--navy)}
.ph-box img{width:100%;height:100%;object-fit:cover;display:block}
.ph-cap{position:absolute;left:0;right:0;bottom:0;padding:12px 12px;z-index:2;
  background:linear-gradient(to top,rgba(1,22,46,.92),transparent);color:#fff;
  font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px}
.ph-cap .ic{width:15px;height:15px;color:var(--cyan)}
.ratio-16{aspect-ratio:16/9}
.ratio-43{aspect-ratio:4/3}
.ratio-21{aspect-ratio:21/9}
.ratio-1{aspect-ratio:1}

.play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;
  place-items:center;color:var(--blue);box-shadow:var(--sh)}
.play-btn .ic{width:26px;height:26px}

/* --- misc ---------------------------------------------------------------- */
.kv{display:flex;flex-direction:column;gap:0}
.kv .row{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:var(--t-xs)}
.kv .row:last-child{border-bottom:0}
.kv .k{display:flex;align-items:center;gap:8px;color:var(--muted)}
.kv .k .ic{width:15px;height:15px;color:var(--blue)}
.kv .v{color:var(--ink);font-weight:500}

.note{font-size:var(--t-xs);color:var(--blue);line-height:1.55;margin-top:12px}
.dark .note{color:var(--cyan)}
.dark-panel .note, .cta .note{color:var(--cyan)}
.hero-full .note{color:var(--cyan)}
.badge{display:inline-block;font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue);background:var(--blue-050);padding:3px 8px;border-radius:2px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--muted);margin-top:8px}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:9px;height:9px;border-radius:50%;display:block}

/* ==========================================================================
   Responsive — the concept is a dense desktop grid, so each breakpoint
   collapses column counts rather than reflowing content away.
   ========================================================================== */

@media (max-width:1320px){
  #enquiry{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1180px){
  .hero-in{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero-card{width:100%;max-width:520px}
}

@media (max-width:1180px){
  .g10,.g9,.g8{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g7{grid-template-columns:repeat(4,minmax(0,1fr))}
  .g6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-wide{grid-template-columns:minmax(180px,1fr) repeat(4,minmax(0,1fr))}
  .flow>.tile::after,.journey .st::after{display:none}
  /* Below the hero photo these become a normal light card, so they never
     inherit the dark treatment meant for the desktop overlay. */
}

@media (max-width:1024px){
  .hero{min-height:0}
  .hero-in{padding-top:128px;padding-bottom:56px}
  .has-hero .hero-in{padding-top:128px}
  .has-hero:has(.subnav) .hero-in{padding-top:176px}
  .hero-strip{position:static;background:rgba(1,16,33,.5)}
  .hero-strip__in{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .hero-strip__cell{flex:1 1 44%;border-right:0;padding:12px 0}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav,.head-cta{display:none}   /* both CTAs are in the mobile sheet */
  .nav-toggle{display:inline-flex;margin-left:auto}
  .head-in{height:64px}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g6,.g5,.g7,.g8,.g9,.g10{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-tx{padding:32px 0 24px}
  .split,.split-1-2,.split-2-1{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.13);padding:16px}
  .stats{grid-template-columns:repeat(3,1fr)!important}
  .stat:nth-last-child(-n+1){border-bottom:0}
  .radial{max-width:320px}
}

/* mobile nav drawer */
.mnav{display:none;position:fixed;inset:0;z-index:80;background:rgba(1,22,46,.55);backdrop-filter:blur(2px)}
.mnav.open{display:block}
.mnav .sheet{position:absolute;right:0;top:0;bottom:0;width:min(340px,88vw);background:#fff;
  overflow-y:auto;padding:16px;box-shadow:var(--sh-lg)}
.mnav .sheet .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mnav .sheet .hd button{background:none;border:0;color:var(--ink);cursor:pointer;padding:4px}
.mnav details{border-bottom:1px solid var(--line-2)}
.mnav summary{padding:12px 2px;font-family:var(--fd);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary .ic{width:13px;height:13px;color:var(--faint)}
.mnav details[open] summary .ic{transform:rotate(90deg)}
.mnav .sub a{display:block;padding:8px 12px;font-size:var(--t-xs);color:var(--body)}
.mnav .sub a:hover{color:var(--blue)}
.mnav>.sheet>a.top{display:block;padding:12px 2px;font-family:var(--fd);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line-2)}
.mnav .btn{width:100%;margin-top:8px}

@media (max-width:760px){
  :root{--pad:18px}
  .hero-in{padding-top:120px;padding-bottom:48px}
  .has-hero .hero-in{padding-top:120px}
  .has-hero:has(.subnav) .hero-in{padding-top:160px}
  .hero-card{padding:16px 20px}
  .hero-strip__cell{flex:1 1 100%;font-size:var(--t-xs)}
  .btn{white-space:normal;text-align:center;line-height:1.35}
  .g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,1fr)!important}
  .foot-top,.foot-wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .cta .wrap{flex-direction:column;align-items:flex-start}
  .cta .btn-row{width:100%}
  .cta .btn{flex:1}
  .hero-feat{border-right:0;padding-right:0;margin-right:0;width:calc(50% - 9px)}
  .hero-feats{gap:16px 16px}
  .kv .row{grid-template-columns:1fr;gap:2px}
  .prog-row{grid-template-columns:1fr 60px 38px;gap:8px}
  .cmp .row{grid-template-columns:1fr 22px 1fr;padding:8px 8px}
  .sec{padding:32px 0}
  .journey{grid-template-columns:repeat(2,1fr)!important}
  .daystrip{grid-template-columns:repeat(3,1fr)!important}
  .flow{grid-template-columns:repeat(2,1fr)!important}
}

@media (max-width:760px){
  /* No single label may push its column wider than the screen. */
  .taglist li,.chipflow .node,.tile,.feat,.pipeline span{max-width:100%;overflow-wrap:anywhere}
  .chipflow{max-width:100%}
}

/* On a phone the hero copy spans the full width, so a gradient that clears to
   transparent on the right leaves half the text on a lit part of the picture.
   Swap the diagonal ramp for an even vertical bed at this size. */
@media (max-width:760px){
  .hero-bg::after,.hero-full::before{
    background:linear-gradient(180deg,
      rgba(1,22,46,.86) 0%,
      rgba(1,22,46,.66) 26%,
      rgba(1,22,46,.60) 62%,
      rgba(1,22,46,.84) 100%);
  }
}

/* Touch targets. Inline text links sit at ~20px, which is well under any
   reasonable thumb target, so give them height on small screens. */
@media (max-width:760px){
  .tlink,.foot-col a,.subnav a,.art .rt + a,.proj .tlink{
    min-height:36px;display:inline-flex;align-items:center;
  }
  .foot-col a{padding:6px 0}
  .socials a{min-width:40px;min-height:40px}
  .foot-bot a{min-height:36px;display:inline-flex;align-items:center}
  .foot-bot .links{flex-wrap:wrap;gap:8px 20px}
}

@media (max-width:520px){
  .g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr!important}
  .stat{border-bottom:1px solid rgba(255,255,255,.13)}
  .foot-top,.foot-wide{grid-template-columns:1fr}
  .flow,.journey{grid-template-columns:1fr!important}
  .daystrip{grid-template-columns:repeat(2,1fr)!important}
  .h-hero{font-size:var(--t-xl)}
  .btn{width:100%}
  .btn-row .btn{width:auto;flex:1 1 100%}
  .filters{gap:8px}
  .chip{padding:8px 12px;font-size:var(--t-xs)}
}

@media print{
  .site-head,.topbar,.subnav,.cta,.nav-toggle{display:none}
  body{font-size:var(--t-xs)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* scroll-in reveal (progressive enhancement — visible by default) */
.rv{opacity:1}
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.js .rv.in{opacity:1;transform:none}

/* journey avatar rendered as an icon rather than a photo */
.journey .st .av.ico{display:grid;place-items:center;background:#fff;color:var(--blue)}
.journey .st .av.ico .ic{width:26px;height:26px}
.dark .journey .st .av.ico{background:rgba(255,255,255,.05);border-color:rgba(28,188,222,.4);color:var(--cyan)}
.dark-panel .journey .st .av.ico, .cta .journey .st .av.ico{background:rgba(255,255,255,.05);border-color:rgba(28,188,222,.4);color:var(--cyan)}
.hero-full .journey .st .av.ico{background:rgba(255,255,255,.05);border-color:rgba(28,188,222,.4);color:var(--cyan)}
.dark .journey .st b{color:#fff}
.dark-panel .journey .st b, .cta .journey .st b{color:#fff}
.hero-full .journey .st b{color:#fff}
.dark .journey .st span{color:#9FB3CA}
.dark-panel .journey .st span, .cta .journey .st span{color:#9FB3CA}
.hero-full .journey .st span{color:#9FB3CA}
.dark .journey .st:not(:last-child)::after{background:rgba(255,255,255,.16)}
.dark-panel .journey .st:not(:last-child)::after, .cta .journey .st:not(:last-child)::after{background:rgba(255,255,255,.16)}
.hero-full .journey .st:not(:last-child)::after{background:rgba(255,255,255,.16)}
.dark .daystrip{border-color:rgba(255,255,255,.14)}
.dark-panel .daystrip, .cta .daystrip{border-color:rgba(255,255,255,.14)}
.hero-full .daystrip{border-color:rgba(255,255,255,.14)}
.dark .daystrip .h{border-color:rgba(255,255,255,.1)}
.dark-panel .daystrip .h, .cta .daystrip .h{border-color:rgba(255,255,255,.1)}
.hero-full .daystrip .h{border-color:rgba(255,255,255,.1)}
.dark .daystrip .h b{color:var(--cyan)}
.dark-panel .daystrip .h b, .cta .daystrip .h b{color:var(--cyan)}
.hero-full .daystrip .h b{color:var(--cyan)}
.dark .daystrip .h span{color:#9FB3CA}
.dark-panel .daystrip .h span, .cta .daystrip .h span{color:#9FB3CA}
.hero-full .daystrip .h span{color:#9FB3CA}
.dark .mapbox{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.dark-panel .mapbox, .cta .mapbox{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.hero-full .mapbox{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.dark .rings div{border-color:rgba(28,188,222,.35);color:var(--cyan)}
.dark-panel .rings div, .cta .rings div{border-color:rgba(28,188,222,.35);color:var(--cyan)}
.hero-full .rings div{border-color:rgba(28,188,222,.35);color:var(--cyan)}
.dark .rings .r1,.dark .rings .r2,.dark .rings .r3,.dark .rings .r4{background:rgba(28,188,222,.06)}
.dark-panel .rings .r1, .cta .rings .r1, .dark-panel .rings .r2, .cta .rings .r2, .dark-panel .rings .r3, .cta .rings .r3, .dark-panel .rings .r4, .cta .rings .r4{background:rgba(28,188,222,.06)}
.hero-full .rings .r1, .hero-full .rings .r2, .hero-full .rings .r3, .hero-full .rings .r4{background:rgba(28,188,222,.06)}
.dark .opt,.dark .inp,.dark .sel,.dark .ta{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.dark-panel .opt, .cta .opt, .dark-panel .inp, .cta .inp, .dark-panel .sel, .cta .sel, .dark-panel .ta, .cta .ta{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.hero-full .opt, .hero-full .inp, .hero-full .sel, .hero-full .ta{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}
.dark .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#B9C7D8}
.dark-panel .chip, .cta .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#B9C7D8}
.hero-full .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#B9C7D8}
.dark .chip:hover{color:var(--cyan);border-color:rgba(28,188,222,.5)}
.dark-panel .chip:hover, .cta .chip:hover{color:var(--cyan);border-color:rgba(28,188,222,.5)}
.hero-full .chip:hover{color:var(--cyan);border-color:rgba(28,188,222,.5)}
.dark .badge{background:rgba(28,188,222,.12);color:var(--cyan)}
.dark-panel .badge, .cta .badge{background:rgba(28,188,222,.12);color:var(--cyan)}
.hero-full .badge{background:rgba(28,188,222,.12);color:var(--cyan)}
.dark .panel-soft,.dark .panel-tint{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.dark-panel .panel-soft, .cta .panel-soft, .dark-panel .panel-tint, .cta .panel-tint{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.hero-full .panel-soft, .hero-full .panel-tint{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}

/* Radials carrying more than eight satellites need more room per label. */
.radial-dense{max-width:460px}
.radial-dense .sat{width:82px}
.radial-dense .sat b{font-size:var(--t-xs);letter-spacing:.05em}
.radial-dense .sat .ic{width:19px;height:19px;margin-bottom:3px}
.radial-dense .sat span{display:none}
.radial-dense .core{width:34%}
@media (max-width:760px){
  .radial-dense{max-width:340px}
  .radial-dense .sat{width:68px}
  .radial-dense .sat b{font-size:var(--t-xs)}
}

/* Detail cards: equal height, list pinned below a fixed-height heading so
   rows line up instead of leaving ragged gaps. */
.detail-card{display:flex;flex-direction:column;gap:2px}
.detail-card h4{margin-bottom:12px}
.detail-card > :last-child{margin-bottom:0}

/* A card inside a card reads as clutter. When a feature or panel is nested
   inside a detail card, drop its chrome and let it behave as plain content. */
.detail-card .feat,
.detail-card .panel,
.detail-card .panel-soft,
.detail-card .panel-tint{
  background:none;border:0;box-shadow:none;padding:0;border-radius:0;
}
.detail-card .grid{gap:20px 24px}
.detail-card .feat .ic{width:24px;height:24px;margin-bottom:8px}
.detail-card .feat h4{font-size:var(--t-sm);margin-bottom:4px}
.detail-card .feat p{font-size:var(--t-sm)}
/* keep an intentional tinted callout readable, just flatter */
.detail-card .panel-tint{background:var(--blue-050);padding:16px;border-radius:var(--r)}
.detail-card .dark-panel{padding:16px}

/* Tag list — the compact form of a checklist of short technical terms. */
.taglist{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.taglist li{
  background:var(--sand-2);color:var(--ink-2);
  border:1px solid var(--sand-line);
  padding:4px 12px;border-radius:4px;
  font-size:var(--t-xs);line-height:1.35;font-weight:500;
}
.taglist.tight li{font-size:var(--t-xs);padding:4px 8px}
.dark .taglist li{background:rgba(28,188,222,.09);border-color:rgba(28,188,222,.22);color:#BFE4F2}
.dark-panel .taglist li, .cta .taglist li{background:rgba(28,188,222,.09);border-color:rgba(28,188,222,.22);color:#BFE4F2}
.hero-full .taglist li{background:rgba(28,188,222,.09);border-color:rgba(28,188,222,.22);color:#BFE4F2}
.detail-card .taglist{margin-top:2px}

/* ==========================================================================
   Layout discipline
   Rules that keep every page on the same grid without per-page overrides.
   ========================================================================== */

/* 1. A short intro column beside a long card grid leaves a dead void.
      Stack them instead: intro first, grid full width beneath. */
.split-1-2:has(> * > .grid.g3),.split-1-2:has(> * > .grid.g4),
.split-1-2:has(> * > .grid.g5),.split-1-2:has(> * > .grid.g6),
.split-2-1:has(> * > .grid.g3),.split-2-1:has(> * > .grid.g4),
.split:has(> * > .grid.g3),.split:has(> * > .grid.g4){
  grid-template-columns:minmax(0,1fr);
  gap:32px;
}

/* 2. A single card left over on the final row reads as a mistake.
      Let it span so the row closes deliberately. */
.grid > *{min-width:0}   /* let a grid child shrink instead of pushing the page wide */
.grid.g4 > :last-child:nth-child(4n+1){grid-column:1/-1}
.grid.g3 > :last-child:nth-child(3n+1){grid-column:span 2}
.grid.g2 > :last-child:nth-child(2n+1){grid-column:span 2}

/* 3. Cards align to the top of their row; only the card box stretches. */
.grid{align-items:stretch}
.panel,.feat,.disc,.art{align-self:stretch}

/* 4. Icon pipelines centre and wrap cleanly rather than dangling an arrow. */
.chipflow{justify-content:flex-start;row-gap:16px}
.chipflow .arw{align-self:center}
.center .chipflow,.chipflow.center{justify-content:center}

/* 5. One consistent gutter everywhere. */
.grid{gap:24px}
.grid.gap-sm{gap:16px}
.grid.gap-lg{gap:32px}

/* 6. A photo that fills a stacked column must not become a second hero.
      The box crops rather than growing, so aspect ratios stay intact. */
.ph-box{max-height:440px}
.split .ph-box,.split-1-2 .ph-box,.split-2-1 .ph-box{max-height:380px}
.grid .ph-box{max-height:260px}
.grid.g2 .ph-box{max-height:320px}
.disc .ph,.art .ph{max-height:none}

/* --- justified body copy -------------------------------------------------
   Justified text needs a wide enough measure. Below roughly 55 characters the
   spaces open into rivers - clearly visible in a card column or a pull quote -
   so justification is applied to full-measure copy only and everything set in a
   narrow column stays ragged right. Hyphenation is on wherever it is justified. */
p,.lede,.small{
  text-align:justify;
  text-justify:inter-word;
  -webkit-hyphens:auto;hyphens:auto;
}
/* narrow measures: back to ragged right */
.panel p,.panel .small,.feat p,.feat-row p,.detail-card p,.art p,.disc p,
.quote,.quote p,.opt span,.tile p,.card p,.kv p,.stat p,
.grid.g3 p,.grid.g4 p,.grid.g5 p,.grid.g6 p,.grid.g7 p,.grid.g8 p,
.grid.g3 .small,.grid.g4 .small,.grid.g5 .small,.grid.g6 .small,
.hero-card span,.site-foot p,.proj p,.layers .lay span,.radial .sat span,
.hero .lede,.hero-full .lede,.hero-tx .lede,.cta p,
.journey .st span,.daystrip .h span,.flow .tile p{
  text-align:left;
  -webkit-hyphens:manual;hyphens:manual;
}
/* anything deliberately centred keeps its alignment */
.center,.center p,.center .lede,.center .small,.tile,.stat,.opt{text-align:center}
.tile p,.opt span{text-align:center}