/* Craig Chappell Inc. — site.css
   One stylesheet for every page. Tokens at the top; later "passes" deliberately override
   earlier ones (the design was iterated in layers). Edit tokens in the BRAND PALETTE block to retheme. */


/* ===================== base (Handoff Index variant, superset of the homepage base) ===================== */
/* ============ TOKENS — identical to the homepage ============ */
:root{
  --ink:#0B1020;
  --navy:#001338;          /* deep midnight ground */
  --navy-2:#001A6E;        /* Midnight */
  --bone:#EEF2F8;          /* Mist tint — light surface */
  --mist:#DCE3F0;          /* Mist */
  --paper:#FFFFFF;
  --signal:#6AB8FF;        /* Sky */
  --signal-dark:#0070F3;   /* Azure */
  --signal-tint:#DCE3F0;   /* Mist */
  --electric:#0070F3;      /* Azure */
  --ember:#FF4B00;         /* Vibrant Orange */
  --amber:#FF9A00;         /* Amber */
  --sunlight:#FFC400;      /* Sunlight */
  --crimson:#B70000;       /* Crimson */
  --burgundy:#6A0D2E;      /* Burgundy */
  --mute:#5A6472;
  --rule:#DCE3F0;
  --rule-dark:rgba(255,255,255,.14);
  --grad:linear-gradient(135deg,#001A6E 0%,#0070F3 52%,#6AB8FF 100%);
  --grad-ember:linear-gradient(135deg,#B70000 0%,#FF4B00 46%,#FFC400 100%);
  --spectrum:linear-gradient(90deg,#001338 0%,#001A6E 16%,#0070F3 34%,#6AB8FF 46%,#DCE3F0 54%,#FFC400 64%,#FF9A00 74%,#FF4B00 86%,#B70000 100%);
  --display:'Inter Tight','Helvetica Neue',Arial,system-ui,sans-serif;
  --body:'Inter','Helvetica Neue',Arial,system-ui,sans-serif;
  --radius:8px;
  --shadow:0 18px 44px rgba(2,10,30,.10);
  --shadow-lg:0 28px 70px rgba(2,10,30,.16);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:var(--signal-dark);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

.container{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}
.narrow{max-width:720px;margin:0 auto}
section{padding:clamp(64px,9vw,120px) 0}

/* type */
h1,h2,h3,h4{font-family:var(--display);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(38px,5.4vw,64px);font-weight:800}
h2{font-size:clamp(30px,3.6vw,44px);font-weight:800;letter-spacing:-.018em}
h3{font-size:clamp(21px,2.1vw,26px);font-weight:700}
.lead{font-size:clamp(18px,1.7vw,22px);line-height:1.55;color:var(--mute)}
.eyebrow{
  display:inline-block;font-size:13px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--signal-dark);margin-bottom:18px;
}
.on-dark .eyebrow{color:var(--signal)}
.on-dark h2,.on-dark h3{color:#fff}
.on-dark p{color:rgba(255,255,255,.86)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--body);font-weight:600;font-size:16px;
  padding:15px 30px;border-radius:var(--radius);border:0;cursor:pointer;
  text-decoration:none;transition:background .18s,transform .18s,box-shadow .18s;
}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--grad);color:#fff;text-shadow:0 1px 2px rgba(3,11,22,.35);box-shadow:0 10px 34px rgba(0,144,255,.60),0 0 80px rgba(0,194,255,.35),inset 0 1px 0 rgba(255,255,255,.30)}
.btn--primary:hover{background:var(--signal-dark);box-shadow:0 12px 38px rgba(0,83,214,.65),0 0 90px rgba(0,194,255,.30)}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.on-dark .btn--ghost,.phero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.on-dark .btn--ghost:hover,.phero .btn--ghost:hover{background:#fff;color:var(--navy)}
.btn .arr{transition:transform .18s}
.btn:hover .arr{transform:translateX(4px)}

/* progress bar */
.progressbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:200}

/* ============ HEADER ============ */
.header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);
}
.header__inner{
  max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,80px);
  height:76px;display:flex;align-items:center;gap:38px;
}
.brand{display:flex;align-items:flex-start;color:var(--ink);text-decoration:none}
.brand:hover{text-decoration:none}
.brand__word{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.01em;text-transform:uppercase}
.brand__inc{font-size:11px;font-weight:700;margin-left:3px;transform:translateY(-2px)}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.navlink{font-size:15px;font-weight:500;color:var(--ink);padding:8px 0;border-bottom:2px solid transparent}
.navlink:hover{text-decoration:none;border-bottom-color:var(--signal)}
.navlink[aria-current="page"]{border-bottom-color:var(--signal);font-weight:600}
.header__cta{margin-left:6px}
.header__cta .btn{padding:11px 22px;font-size:15px}
.has-mega{position:relative;display:flex;align-items:center}
.mega{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);
  display:grid;grid-template-columns:repeat(3,240px);gap:10px;background:#fff;
  border:1px solid var(--rule);border-radius:12px;box-shadow:var(--shadow-lg);
  padding:14px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;
}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega a{display:block;padding:16px;border-radius:8px;color:var(--ink)}
.mega a:hover{background:var(--signal-tint);text-decoration:none}
.mega .num{font-family:var(--display);font-weight:800;font-size:13px;color:var(--signal-dark)}
.mega h4{font-size:16px;margin:6px 0 4px}
.mega p{font-size:13.5px;color:var(--mute);line-height:1.45}
.mega .tag{display:inline-block;margin-top:10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--signal-dark);background:var(--signal-tint);padding:3px 9px;border-radius:99px}
.hamburger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:10px}
.hamburger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .2s,opacity .2s}
.mobilemenu{display:none}
@media(max-width:940px){
  .nav,.header__cta{display:none}
  .hamburger{display:block}
  .mobilemenu{
    display:block;position:fixed;inset:76px 0 0 0;background:#fff;z-index:99;
    padding:28px clamp(20px,5vw,80px);transform:translateX(100%);transition:transform .25s;
    overflow-y:auto;
  }
  .mobilemenu.open{transform:none}
  .mobilemenu a{display:block;font-family:var(--display);font-weight:700;font-size:26px;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--rule)}
  .mobilemenu .sub{font-family:var(--body);font-weight:500;font-size:17px;padding-left:16px}
  .mobilemenu .btn{margin-top:26px;width:100%;justify-content:center}
  body.menu-open{overflow:hidden}
  .mobilebar{
    position:fixed;bottom:0;left:0;right:0;z-index:98;background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);border-top:1px solid var(--rule);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .mobilebar .btn{width:100%;justify-content:center}
}
@media(min-width:941px){.mobilebar{display:none}}

/* ============ HERO ============ */
.phero{
  background:var(--navy);position:relative;overflow:hidden;
  padding:clamp(84px,11vw,140px) 0 0;
}
.phero__photo{position:absolute;top:0;right:0;bottom:0;z-index:0;width:auto}
.phero__photo img{
  display:block;height:100%;width:auto;object-fit:contain;object-position:right top;
}
.phero__photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--navy) 0%, rgba(3,11,22,.55) 22%, transparent 48%),
    linear-gradient(0deg, rgba(3,11,22,.85) 0%, rgba(3,11,22,.3) 12%, transparent 26%);
}
.phero::before{content:none}
.phero .container{position:relative;z-index:2}
@media(max-width:760px){
  .phero__photo{left:0;width:100%}
  .phero__photo img{width:100%;object-fit:cover;object-position:62% 0%}
  .phero__photo::after{
    background:
      linear-gradient(0deg, rgba(3,11,22,.92) 0%, rgba(3,11,22,.70) 40%, rgba(3,11,22,.35) 70%, rgba(3,11,22,.10) 100%);
  }
}
.phero__crumb{font-size:13.5px;color:rgba(255,255,255,.55);margin-bottom:26px}
.phero__crumb a{color:rgba(255,255,255,.55)}
.phero h1{color:#fff;max-width:13ch;text-shadow:0 2px 24px rgba(3,11,22,.85),0 1px 3px rgba(3,11,22,.6)}
.phero h1 .tm{font-size:.42em;vertical-align:super;font-weight:700}
.phero .lead{color:rgba(255,255,255,.92);text-shadow:0 1px 14px rgba(3,11,22,.85);max-width:52ch;margin-top:24px}
.phero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin:36px 0 0}
.phero__meta{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;font-size:13.5px;color:rgba(255,255,255,.72);text-shadow:0 1px 10px rgba(3,11,22,.8)}
.phero__meta b{color:#fff;font-weight:600}

/* the loop strip that closes the hero */
.loopstrip{
  position:relative;z-index:2;margin-top:clamp(48px,7vw,84px);
  background:linear-gradient(180deg,rgba(3,11,22,.55) 0%,rgba(3,11,22,.96) 18%,var(--navy) 100%);
  backdrop-filter:blur(10px);
}
.loopstrip::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(74,228,255,.85) 30%,rgba(74,228,255,.85) 70%,transparent);
  box-shadow:0 0 18px rgba(74,228,255,.55);
}
.loopstrip__scroll{overflow-x:auto;scrollbar-width:none}
.loopstrip__scroll::-webkit-scrollbar{display:none}
.loopstrip__inner{
  display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:14px;
  max-width:1200px;margin:0 auto;padding:28px clamp(20px,5vw,80px) 6px;min-width:760px;
}
.loopstop{
  display:block;padding:22px 22px 24px;border-radius:14px;color:#fff;position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.08);
  transition:border-color .25s,box-shadow .25s,transform .25s,background .25s;
}
.loopstop:hover{
  transform:translateY(-3px);border-color:rgba(74,228,255,.45);
  background:linear-gradient(180deg,rgba(74,228,255,.10),rgba(74,228,255,.02));
  box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 0 1px rgba(74,228,255,.15),0 0 32px rgba(74,228,255,.18);
}
.loopstop .hn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:12.5px;
  color:#4AE4FF;letter-spacing:.14em;text-shadow:0 0 14px rgba(74,228,255,.75),0 0 3px rgba(160,240,255,.6);
}
.loopstop .hn::before{content:"";width:6px;height:6px;border-radius:50%;background:#4AE4FF;box-shadow:0 0 10px #4AE4FF,0 0 18px rgba(74,228,255,.6)}
.loopstop .hl{display:block;font-family:var(--display);font-weight:700;font-size:19px;margin-top:12px;line-height:1.2;letter-spacing:-.01em}
.loopstop .hq{display:block;font-size:13.5px;color:rgba(255,255,255,.66);margin-top:8px;line-height:1.5}
.loopstop::after{
  content:"";position:absolute;top:50%;right:-15px;width:10px;height:10px;margin-top:-5px;
  border-top:2px solid #4AE4FF;border-right:2px solid #4AE4FF;transform:rotate(45deg);
  filter:drop-shadow(0 0 6px rgba(74,228,255,.9));
}
.loopstop:last-child::after{display:none}
.loopstrip__back{
  display:flex;align-items:center;gap:14px;max-width:1200px;margin:0 auto;min-width:760px;
  padding:16px clamp(20px,5vw,80px) 22px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:600;
}
.loopstrip__back .line{
  flex:1;height:2px;border-radius:2px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(90deg,rgba(74,228,255,.55) 0 6px,transparent 6px 14px);
}
.loopstrip__back .line::after{
  content:"";position:absolute;top:-4px;bottom:-4px;width:120px;
  background:linear-gradient(90deg,transparent,rgba(74,228,255,.95),transparent);
  filter:blur(2px);animation:loopPulse 3.2s linear infinite;
}
@keyframes loopPulse{from{left:-140px}to{left:100%}}

/* trusted-by logo marquee */
.logos{
  max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,80px) 30px;
}
.logos__rule{height:1px;background:rgba(255,255,255,.10);margin-bottom:22px}
.logos__row{display:flex;align-items:center;gap:28px}
.logos__label{flex:0 0 auto;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600;white-space:nowrap}
.marquee{
  flex:1;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee__track{display:flex;align-items:center;gap:72px;width:max-content;padding-right:72px;animation:marquee 26s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee__track{animation:none}.loopstrip__back .line::after{animation:none;display:none}}
.logo{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;opacity:.62;transition:opacity .25s;filter:grayscale(1)}
.logo:hover{opacity:.95}
.logo img{height:26px;width:auto;display:block}
.logo span{font-family:var(--display);font-weight:700;font-size:15.5px;color:#D6D6D6;letter-spacing:-.01em}
@media(max-width:760px){
  .loopstrip__inner{padding-top:22px}
  .logos__row{flex-direction:column;align-items:flex-start;gap:14px}
  .marquee{width:100%}
}

/* five-join variant of the strip (Handoff Index page) */
.loopstrip--five .loopstrip__inner{grid-template-columns:repeat(5,minmax(196px,1fr));gap:12px;min-width:1080px}
.loopstrip--five .loopstop{padding:20px 18px 22px}
.loopstrip--five .loopstop .hl{font-size:16px}
.loopstrip--five .loopstop .hq{font-size:12.5px}
.loopstrip--five .loopstop::after{right:-13px}
.loopstrip--five .loopstrip__back{min-width:1080px;text-transform:none;letter-spacing:.02em;padding-bottom:72px}
.loopstrip--five .loopstrip__back b{color:#4AE4FF;font-weight:700;text-shadow:0 0 12px rgba(74,228,255,.7)}
.phero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 88% 18%, rgba(0,144,255,.22), transparent 62%),
    radial-gradient(700px 480px at 12% 100%, rgba(3,36,232,.18), transparent 60%),
    linear-gradient(180deg,var(--navy-2) 0%,var(--navy) 60%);
}
.phero h1 .tm{color:#4AE4FF;text-shadow:0 0 18px rgba(74,228,255,.8),0 0 4px rgba(160,240,255,.6)}

/* ============ ANSWER BLOCK ============ */
.answerband{padding:0;background:var(--paper)}
.answerblock{
  max-width:860px;margin:clamp(-34px,-4vw,-44px) auto 0;position:relative;z-index:2;
  background:var(--signal-tint);border:1px solid rgba(0,121,200,.25);
  border-left:5px solid var(--signal);border-radius:var(--radius);
  padding:26px 30px;font-size:16.5px;line-height:1.6;box-shadow:var(--shadow);
}
.answerblock strong{display:block;font-family:var(--display);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-dark);margin-bottom:8px}

/* prose */
.prose p{margin-top:18px;color:#2A3340}
.prose p:first-of-type{margin-top:22px}
.pull{
  font-family:var(--display);font-weight:700;font-size:clamp(21px,2.2vw,26px);
  line-height:1.3;color:var(--ink);border-left:4px solid var(--signal);
  padding:6px 0 6px 22px;margin:30px 0 6px!important;
}

/* ============ THE JOIN CARDS (signature) ============ */
.joins{background:var(--bone);padding:clamp(52px,7vw,88px) 0}
.joins__head{max-width:760px;margin-bottom:clamp(22px,3vw,34px)}
.joincard{
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  padding:clamp(20px,2.6vw,30px) clamp(20px,2.8vw,32px);margin-top:14px;box-shadow:0 8px 24px rgba(6,18,29,.05);
  display:grid;grid-template-columns:140px 1fr;gap:clamp(18px,2.6vw,32px);
  transition:box-shadow .2s,transform .2s;
}
.joincard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.joincard__id .hn{font-family:var(--display);font-weight:800;font-size:15px;color:var(--signal-dark)}
.joincard__id .cost{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--mute)}
.joincard__id .cost b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
/* the join diagram: two blocks and the gap between them */
.joinviz{display:flex;align-items:center;gap:0;margin:0 0 12px}
.joinviz .fn{
  font-family:var(--display);font-weight:700;font-size:14.5px;
  background:var(--navy);color:#fff;border-radius:6px;padding:10px 16px;white-space:nowrap;
}
.joinviz .gap{
  flex:1;max-width:170px;height:2px;position:relative;margin:0 4px;
  background:repeating-linear-gradient(90deg,var(--rule) 0 7px,transparent 7px 14px);
}
.joinviz .gap::after{
  content:"the join";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-dark);
  white-space:nowrap;font-weight:600;
}
.joinviz .gap .drip{display:none}
.joincard h3{margin-bottom:2px}
.joincard .q{font-size:15.5px;font-weight:600;color:var(--signal-dark);margin-bottom:8px}
.joincard p{font-size:15.5px;color:#2A3340;margin-top:8px;line-height:1.55}
.joincard .sym{margin-top:12px;padding:12px 16px;background:var(--bone);border-radius:8px;font-size:14.5px;color:#2A3340}
.joincard .sym b{color:var(--ink)}
@media(max-width:760px){
  .joincard{grid-template-columns:1fr}
  .joincard__id{display:flex;justify-content:space-between;align-items:baseline}
  .joincard__id .cost{margin-top:0;max-width:60%}
  .joinviz .gap{max-width:none}
}

/* ============ FOUR TESTS ============ */
.tests{background:var(--paper)}
.testgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
@media(max-width:960px){.testgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.testgrid{grid-template-columns:1fr}}
.testcard{
  border:1px solid var(--rule);border-top:4px solid var(--signal);
  border-radius:10px;padding:26px 24px;background:var(--paper);
}
.testcard h3{font-size:19px}
.testcard .tq{font-size:14.5px;color:#2A3340;margin-top:10px;line-height:1.55}
.testcard .tf{margin-top:16px;font-size:13.5px;color:var(--mute);line-height:1.55}
.testcard .tf b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--signal-dark);margin-bottom:4px}

/* ============ THE MATRIX ============ */
.matrix-section{background:var(--navy)}
.matrixwrap{overflow-x:auto;margin-top:44px;border-radius:12px}
.matrix{
  width:100%;min-width:720px;border-collapse:separate;border-spacing:4px;
}
.matrix th{
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.05em;
  color:rgba(255,255,255,.85);text-transform:uppercase;padding:10px 12px;text-align:left;
}
.matrix th.rowh{font-size:14px;text-transform:none;letter-spacing:0;white-space:nowrap}
.matrix th.rowh small{display:block;font-weight:500;font-size:11.5px;color:rgba(255,255,255,.45);letter-spacing:.02em}
.matrix td{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:6px;height:52px;min-width:86px;text-align:center;
  font-family:var(--display);font-weight:800;font-size:17px;color:#fff;
  transition:background .3s,border-color .3s;
}
.matrix td.filled{background:rgba(0,194,255,.30);border-color:rgba(47,233,255,.75);box-shadow:0 0 22px rgba(0,194,255,.30) inset,0 0 14px rgba(0,194,255,.18);color:#fff;text-shadow:0 0 10px rgba(120,235,255,.8)}
.matrix td.sub{background:transparent;border-color:transparent;color:var(--signal);font-size:15px}
.matrixfoot{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:30px;
}
.matrixfoot .total{
  font-family:var(--display);font-weight:800;font-size:clamp(44px,6vw,68px);color:#fff;line-height:1;
}
.matrixfoot .total small{font-size:.4em;color:rgba(255,255,255,.5);font-weight:700}
.matrixfoot .bandtag{
  font-family:var(--display);font-weight:700;font-size:15px;color:var(--navy);
  background:var(--grad);padding:8px 18px;border-radius:99px;color:#fff;
  opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s;
}
.matrixfoot .bandtag.show{opacity:1;transform:none}
.matrixfoot .demo{margin-left:auto}
.matrixnote{font-size:13.5px;color:rgba(255,255,255,.66);margin-top:18px;max-width:60ch}

/* band spectrum */
.spectrum{margin-top:54px}
.spectrum__bar{
  position:relative;height:14px;border-radius:99px;overflow:hidden;
  background:linear-gradient(90deg,
    rgba(255,255,255,.10) 0 40%,
    rgba(3,36,232,.55) 40% 60%,
    rgba(0,144,255,.85) 60% 80%,
    #2FE9FF 80% 100%);
}
.spectrum__marker{
  position:absolute;top:-7px;width:2px;height:28px;background:#fff;left:0;
  transition:left 1s cubic-bezier(.2,.8,.2,1);box-shadow:0 0 0 3px rgba(255,255,255,.35),0 0 18px rgba(120,235,255,.9);
}
.spectrum__labels{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px}
.spectrum__labels div{font-size:12.5px;color:rgba(255,255,255,.74)}
.spectrum__labels b{display:block;font-family:var(--display);font-weight:700;font-size:14px;color:#fff}
.spectrum__labels div:nth-child(2){text-align:left;padding-left:2%}
.spectrum__labels div:nth-child(3){padding-left:4%}
.spectrum__labels div:nth-child(4){padding-left:6%}

/* ============ SHAPES ============ */
.shapes{background:var(--paper)}
.shapegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:900px){.shapegrid{grid-template-columns:1fr}}
.shapecard{
  border:1px solid var(--rule);border-radius:12px;padding:28px 26px;background:var(--paper);
  transition:box-shadow .2s,transform .2s;
}
.shapecard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.shapebars{display:flex;align-items:flex-end;gap:8px;height:86px;margin-bottom:20px}
.shapebars .bar{
  flex:1;background:var(--signal-tint);border-radius:4px 4px 0 0;position:relative;
  border:1px solid rgba(0,121,200,.18);border-bottom-width:2px;
}
.shapebars .bar.hi{background:var(--grad);border-color:transparent}
.shapebars .bar span{
  position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);
  font-family:var(--display);font-weight:700;font-size:10.5px;color:var(--mute);
}
.shapecard h3{margin-top:14px;font-size:20px}
.shapecard .sd{font-size:14.5px;color:#2A3340;margin-top:10px;line-height:1.6}
.shapecard .st{margin-top:14px;font-size:13px;color:var(--signal-dark);font-weight:600}

/* ============ THREE MOVES ============ */
.moves{background:var(--bone)}
.movegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:900px){.movegrid{grid-template-columns:1fr}}
.movecard{background:var(--navy);border-radius:12px;padding:30px 28px;color:#fff}
.movecard .mn{font-family:var(--display);font-weight:800;font-size:22px;color:var(--signal)}
.movecard .mp{font-size:15px;color:rgba(255,255,255,.82);margin-top:12px;line-height:1.6}
.movecard .mf{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule-dark);font-size:13.5px;color:rgba(255,255,255,.55);line-height:1.6}
.movecard .mf b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--signal);margin-bottom:5px}
.moves .verdict{
  margin-top:34px;background:var(--paper);border:1px solid var(--rule);border-left:5px solid var(--signal);
  border-radius:var(--radius);padding:24px 28px;font-size:16.5px;line-height:1.6;
}
.moves .verdict b{font-family:var(--display)}

/* ============ FAQ ============ */
.faq{background:var(--paper);padding-bottom:40px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  padding:22px 0;font-family:var(--display);font-weight:700;font-size:18px;gap:20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";font-size:24px;font-weight:400;color:var(--signal-dark);transition:transform .2s;flex:0 0 auto;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 40px 22px 0;color:#2A3340;font-size:15.5px}

/* ============ CLOSING ============ */
.closing{
  background:var(--grad);position:relative;overflow:hidden;text-align:center;
}
.closing::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(640px 640px at 50% -30%, rgba(220,250,255,.55), transparent 62%),
    radial-gradient(700px 400px at 50% 120%, rgba(3,11,22,.45), transparent 70%);
}
.closing .container{position:relative}
.closing h2{color:#fff;max-width:20ch;margin:0 auto}
.closing p{color:rgba(255,255,255,.88);max-width:52ch;margin:20px auto 0;font-size:18px}
.closing .btn--primary{background:#fff;color:var(--navy);box-shadow:0 14px 34px rgba(6,18,29,.25);margin-top:34px}
.closing .btn--primary:hover{background:var(--navy);color:#fff}
.closing .alt{display:block;margin-top:18px;font-size:14.5px;color:rgba(255,255,255,.85)}
.closing .alt a{color:#fff;text-decoration:underline}

/* ============ FOOTER ============ */
.footer{background:var(--navy);color:rgba(255,255,255,.7);padding:64px 0 34px;font-size:14.5px}
.footer a{color:rgba(255,255,255,.7)}
.footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
@media(max-width:860px){.footer__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer__grid{grid-template-columns:1fr}}
.footer h5{font-family:var(--display);font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.footer li{list-style:none;margin-bottom:10px}
.footer .brand{color:#fff;margin-bottom:14px}
.footer__base{
  border-top:1px solid var(--rule-dark);margin-top:48px;padding-top:24px;
  font-size:13px;color:rgba(255,255,255,.45);display:flex;flex-wrap:wrap;gap:8px 26px;
}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}


/* ===================== homepage sections ===================== */
/* ---- landing additions ---- */
.phero--land h1{max-width:15ch}
.phero--land h1,.phero--land .h1b{text-shadow:0 2px 24px rgba(3,11,22,.85),0 1px 3px rgba(3,11,22,.6)}
.phero--land .h1b{display:block;color:#4AE4FF;text-shadow:0 0 22px rgba(0,214,255,.55),0 0 6px rgba(120,236,255,.35),0 2px 24px rgba(3,11,22,.85)}
.friction{background:var(--paper)}
.frictiongrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
@media(max-width:900px){.frictiongrid{grid-template-columns:1fr}}
.fcard{border:1px solid var(--rule);border-radius:12px;padding:28px 26px;background:var(--paper);transition:box-shadow .2s,transform .2s}
.fcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.fcard .fk{display:inline-flex;width:38px;height:38px;border-radius:10px;background:var(--signal-tint);color:var(--signal-dark);font-family:var(--display);font-weight:800;align-items:center;justify-content:center;font-size:15px;margin-bottom:16px}
.fcard h3{font-size:19px}
.fcard p{font-size:14.5px;color:#2A3340;margin-top:10px;line-height:1.6}
.friction .kicker{margin-top:34px;font-family:var(--display);font-weight:700;font-size:clamp(19px,2vw,23px);line-height:1.4;border-left:4px solid var(--signal);padding-left:20px}

.pillars{background:var(--navy);position:relative;overflow:hidden}
.pillars::before{content:"";position:absolute;inset:0;background:radial-gradient(780px 680px at 84% -4%, rgba(210,248,255,.42) 0%, rgba(50,195,255,.32) 26%, rgba(0,110,255,.20) 48%, transparent 70%);mix-blend-mode:screen;pointer-events:none}
.pillars .container{position:relative}
.pillargrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:900px){.pillargrid{grid-template-columns:1fr}}
.pillar{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:30px 26px;color:#fff;transition:border-color .2s,background .2s}
.pillar:hover{border-color:rgba(47,233,255,.7);background:rgba(0,150,255,.10);box-shadow:0 0 30px rgba(0,194,255,.16)}
.pillar .pn{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--signal)}
.pillar h3{color:#fff;margin-top:10px;font-size:20px}
.pillar .pa{font-size:14.5px;color:rgba(255,255,255,.88);margin-top:12px;line-height:1.6}
.pillar .pv{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);font-size:13.5px;color:rgba(255,255,255,.74);line-height:1.55}
.pillar .pv b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--signal);margin-bottom:5px}
.pillars .fwlink{margin-top:30px;font-size:14.5px;color:rgba(255,255,255,.8)}
.pillars .fwlink a{color:#fff;text-decoration:underline}

.deliver{background:var(--bone)}
.delgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:960px){.delgrid{grid-template-columns:1fr}}
.delcard{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:30px 26px;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.delcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.delcard .role{display:inline-block;align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-dark);background:var(--signal-tint);padding:4px 11px;border-radius:99px}
.delcard h3{margin-top:14px;font-size:20px}
.delcard .get{font-size:14.5px;color:#2A3340;margin-top:10px;line-height:1.6}
.delcard ul{margin:16px 0 0;padding:0;list-style:none}
.delcard li{font-size:13.5px;color:#2A3340;line-height:1.55;padding-left:20px;position:relative;margin-bottom:9px}
.delcard li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:var(--grad)}
.delcard .best{margin-top:auto;padding-top:18px;font-size:13px;color:var(--mute);line-height:1.55}
.delcard .best b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.delcard .note{margin-top:12px;font-size:12.5px;color:var(--signal-dark)}

.outcome{background:var(--paper);text-align:center}
.outcome h2 .oc{color:var(--signal-dark)}
.outcome p{max-width:56ch;margin:22px auto 0;font-size:clamp(17px,1.7vw,20px);color:#2A3340;line-height:1.7}


/* ===================== solution page shell: tables, comparison, steps, disclosure panel, faq ===================== */
/* ================= SOLUTION PAGE SHELL ================= */
.phero--sol{padding-bottom:clamp(64px,8vw,96px)}
.phero--sol::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(900px 520px at 88% 18%, rgba(0,144,255,.22), transparent 62%),
             radial-gradient(700px 480px at 12% 100%, rgba(3,36,232,.18), transparent 60%),
             linear-gradient(180deg,var(--navy-2) 0%,var(--navy) 60%)}
.phero--sol .container{z-index:1}
.phero--sol h1{max-width:18ch;font-size:clamp(34px,4.8vw,58px)}
.lum{color:#4AE4FF;text-shadow:0 0 22px rgba(0,214,255,.55),0 0 6px rgba(120,236,255,.35),0 2px 24px rgba(3,11,22,.85)}
.phero__meta b{color:#fff}
.phero__meta span{display:inline-flex;align-items:center;gap:8px}
.phero__meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:#4AE4FF;box-shadow:0 0 10px #4AE4FF}

/* glowing cap line between hero and first light section */
.capline{position:relative}
.capline::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(74,228,255,.85) 30%,rgba(74,228,255,.85) 70%,transparent);box-shadow:0 0 18px rgba(74,228,255,.55)}

/* answer block pulled up over the hero */
.answerband{padding:0;background:var(--paper)}
.answerblock{max-width:860px;margin:clamp(-34px,-4vw,-44px) auto 0;position:relative;z-index:2;background:var(--signal-tint);border:1px solid rgba(0,121,200,.25);border-left:5px solid var(--signal);border-radius:var(--radius);padding:26px 30px;font-size:16.5px;line-height:1.6;box-shadow:var(--shadow),0 0 40px rgba(0,194,255,.14)}
.answerblock strong{display:block;font-family:var(--display);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--signal-dark);margin-bottom:8px}

/* light tables */
.ttable{width:100%;border-collapse:separate;border-spacing:0;margin-top:36px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(6,18,29,.05)}
.ttable th{background:var(--navy);color:#fff;font-family:var(--display);font-weight:700;font-size:13px;text-align:left;padding:14px 18px;letter-spacing:.06em;text-transform:uppercase}
.ttable th:first-child{color:#4AE4FF;text-shadow:0 0 12px rgba(74,228,255,.6)}
.ttable td{padding:16px 18px;border-top:1px solid var(--rule);font-size:15px;color:#2A3340;line-height:1.55;vertical-align:top;transition:background .2s}
.ttable td:first-child{font-weight:700;color:var(--ink);font-family:var(--display);white-space:nowrap}
.ttable tr:hover td{background:var(--signal-tint)}
.ttable--wrap td:first-child{white-space:normal;min-width:160px}
@media(max-width:760px){.twrap{overflow-x:auto;margin-top:36px}.twrap .ttable{margin-top:0;min-width:640px}}

/* dark comparison */
.cmp{background:var(--navy);position:relative;overflow:hidden}
.cmp::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(800px 520px at 88% 0%, rgba(0,144,255,.18), transparent 62%)}
.cmp .container{position:relative}
.cmpwrap{overflow-x:auto;margin-top:40px;border-radius:12px}
.cmptable{width:100%;min-width:720px;border-collapse:separate;border-spacing:6px}
.cmptable th{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75);padding:12px 14px;text-align:left}
.cmptable thead th:last-child{color:#4AE4FF;text-shadow:0 0 14px rgba(74,228,255,.7)}
.cmptable td{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:8px;padding:15px 14px;font-size:14px;color:rgba(255,255,255,.82);line-height:1.5;vertical-align:top}
.cmptable td:first-child{background:transparent;border-color:transparent;font-weight:700;font-family:var(--display);color:#fff;white-space:nowrap}
.cmptable td:last-child{background:rgba(74,228,255,.10);border-color:rgba(74,228,255,.45);color:#fff;box-shadow:0 0 22px rgba(74,228,255,.14) inset}

/* process timeline */
.steps{margin-top:44px;display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:64px 1fr;gap:22px;position:relative;padding-bottom:30px}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:19px;top:46px;bottom:4px;width:2px;background:repeating-linear-gradient(180deg,rgba(0,194,255,.6) 0 6px,transparent 6px 12px)}
.step:last-child::before{display:none}
.step .sn{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:14px;box-shadow:0 6px 20px rgba(0,144,255,.45),0 0 26px rgba(0,194,255,.35)}
.step h3{font-size:18px}
.step p{font-size:15px;color:#2A3340;margin-top:6px;line-height:1.6;max-width:64ch}

/* disclosure panel */
.dpanel{margin-top:40px;background:var(--bone);border:1px solid var(--rule);border-left:5px solid var(--signal);border-radius:10px;padding:24px 28px;font-size:14.5px;color:#22303F;line-height:1.65}
.dpanel b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-dark);margin-bottom:8px}

/* stats */
.stats{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap;margin-top:36px}
.stat .n{font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,52px);color:#4AE4FF;text-shadow:0 0 18px rgba(74,228,255,.7)}
.stat .l{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-top:4px}
.on-dark .stat .l{color:rgba(255,255,255,.62)}

/* faq */
.faq{background:var(--paper);padding-bottom:40px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-family:var(--display);font-weight:700;font-size:18px;gap:20px;transition:color .2s}
.faq summary:hover{color:var(--signal-dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;font-weight:400;color:var(--signal-dark);transition:transform .2s;flex:0 0 auto}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 40px 22px 0;color:#2A3340;font-size:15.5px}

.prose p{margin-top:18px;color:#2A3340}
.prose p:first-of-type{margin-top:22px}
.pull2{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.2vw,25px);line-height:1.35;color:var(--ink);border-left:4px solid var(--signal);padding:6px 0 6px 22px;margin-top:34px}
.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}

/* staggered reveal */
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}


/* ===================== fractional page specifics ===================== */
/* page specific */
.own{background:var(--bone)}
.gapsec{padding-top:clamp(56px,7vw,84px)}


/* ===================== solutions hub: router + engines ===================== */
/* ================= SOLUTIONS HUB ================= */
/* hero: no photo — navy with the brand glows */
.phero--sol{padding-bottom:clamp(64px,8vw,96px)}
.phero--sol::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 88% 18%, rgba(0,144,255,.22), transparent 62%),
    radial-gradient(700px 480px at 12% 100%, rgba(3,36,232,.18), transparent 60%),
    linear-gradient(180deg,var(--navy-2) 0%,var(--navy) 60%);
}
.phero--sol .container{z-index:1}
.phero--sol h1{max-width:16ch}
.phero--sol h1 .lum{color:#4AE4FF;text-shadow:0 0 22px rgba(0,214,255,.55),0 0 6px rgba(120,236,255,.35),0 2px 24px rgba(3,11,22,.85)}
/* three glowing markers that hint at the engines */
.phero__engines{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.phero__engines a{
  display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:99px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;
  font-size:13.5px;font-weight:600;transition:border-color .25s,background .25s,box-shadow .25s,transform .25s;
}
.phero__engines a::before{content:"";width:7px;height:7px;border-radius:50%;background:#4AE4FF;box-shadow:0 0 10px #4AE4FF,0 0 18px rgba(74,228,255,.6)}
.phero__engines a:hover{text-decoration:none;transform:translateY(-2px);border-color:rgba(74,228,255,.5);background:rgba(74,228,255,.08);box-shadow:0 0 24px rgba(74,228,255,.18)}
.phero__engines a span{color:rgba(255,255,255,.55);font-weight:500}

/* glowing rule that opens the router, like the strip cap on the homepage */
.router-section{position:relative;padding-top:clamp(56px,7vw,84px)}
.router-section::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(74,228,255,.85) 30%,rgba(74,228,255,.85) 70%,transparent);box-shadow:0 0 18px rgba(74,228,255,.55)}

/* router cards */
.router{display:grid;grid-template-columns:1fr;gap:12px;margin-top:40px}
.route{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:22px 26px;color:var(--ink);position:relative;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.route::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad);opacity:0;transition:opacity .2s}
.route:hover{text-decoration:none;border-color:rgba(0,194,255,.6);box-shadow:var(--shadow),0 0 30px rgba(0,194,255,.14);transform:translateY(-3px)}
.route:hover::before{opacity:1}
.route .rq{font-size:16.5px;font-weight:500;font-style:italic;color:#2A3340}
.route .rd{font-family:var(--display);font-weight:700;font-size:15px;color:var(--signal-dark);white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.route .rd::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.route:hover .rd::after{transform:translateX(4px) rotate(45deg)}
@media(max-width:640px){.route{flex-direction:column;align-items:flex-start;gap:10px}}

/* engines */
.enginesec{background:var(--bone)}
.engines{display:flex;flex-direction:column;gap:18px;margin-top:44px}
.engine{display:grid;grid-template-columns:220px 1fr auto;gap:clamp(20px,3vw,40px);align-items:center;border-radius:14px;padding:clamp(24px,3.4vw,38px);position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.engine:hover{text-decoration:none;transform:translateY(-3px)}
.engine--light{background:var(--paper);border:1px solid var(--rule)}
.engine--light:hover{border-color:rgba(0,194,255,.55);box-shadow:var(--shadow-lg),0 0 30px rgba(0,194,255,.12)}
.engine--navy{background:linear-gradient(135deg,var(--navy-2),var(--navy));border:1px solid rgba(255,255,255,.10)}
.engine--ink{background:#01060D;border:1px solid rgba(255,255,255,.08)}
.engine--navy:hover,.engine--ink:hover{border-color:rgba(74,228,255,.45);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 36px rgba(74,228,255,.16)}
.engine--navy::after,.engine--ink::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 260px at 100% 0%, rgba(0,144,255,.18), transparent 65%)}
.engine .en{font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.14em;color:var(--signal-dark);display:inline-flex;align-items:center;gap:8px}
.engine .en::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--signal-dark)}
.engine--navy .en,.engine--ink .en{color:#4AE4FF;text-shadow:0 0 14px rgba(74,228,255,.75)}
.engine--navy .en::before,.engine--ink .en::before{background:#4AE4FF;box-shadow:0 0 10px #4AE4FF}
.engine h3{margin-top:10px;font-size:22px;color:var(--ink)}
.engine--navy h3,.engine--ink h3{color:#fff}
.engine p{font-size:14.5px;color:#2A3340;line-height:1.6;margin-top:8px}
.engine--navy p,.engine--ink p{color:rgba(255,255,255,.82)}
.engine ul{margin:14px 0 0;padding:0;list-style:none;display:flex;gap:8px;flex-wrap:wrap}
.engine li{font-size:12px;font-weight:600;color:var(--signal-dark);background:var(--signal-tint);padding:4px 11px;border-radius:99px}
.engine--navy li,.engine--ink li{color:#8FEBFF;background:rgba(74,228,255,.10);border:1px solid rgba(74,228,255,.22)}
.engine .go{font-family:var(--display);font-weight:700;font-size:15px;color:var(--signal-dark);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;position:relative;z-index:1}
.engine .go::after{content:"";width:8px;height:8px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.engine:hover .go::after{transform:translateX(4px) rotate(45deg)}
.engine--navy .go,.engine--ink .go{color:#4AE4FF}
.engine > *{position:relative;z-index:1}
@media(max-width:860px){.engine{grid-template-columns:1fr;gap:14px}.engine .go{justify-self:start}}

/* staggered reveal */
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}


/* ===================== skin pass 1 ===================== */
/* ============ SPECTRUM SKIN — palette: light in motion ============ */

/* dark heroes: midnight on the left where the copy sits, warm light bleeding in from the right */
.phero,.phero--sol,.phero--about,.phero--land{background:var(--navy)}
.phero:has(.phero__photo)::after,.phero:has(.phero__photo)::before{content:none !important}
.phero:not(:has(.phero__photo))::after,.phero--sol::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(40% 108% at 103% 48%, rgba(255,196,0,.62) 0%, rgba(255,120,0,.52) 24%, rgba(183,0,0,.22) 46%, transparent 70%),
    radial-gradient(58% 110% at 56% 52%, rgba(0,112,243,.50) 0%, rgba(0,60,180,.26) 44%, transparent 74%),
    linear-gradient(90deg,#001338 0%,#001A6E 40%,rgba(0,26,110,.72) 62%,rgba(0,19,56,.25) 80%,transparent 92%);
}
/* the seam: the join, running through every dark hero */
.phero:not(:has(.phero__photo))::before,.phero--sol::before{
  content:"";position:absolute;left:0;right:0;top:86%;height:2px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent 2%,rgba(106,184,255,.55) 22%,#EAF2FF 48%,#FFE9B0 62%,rgba(255,120,0,.75) 80%,transparent 98%);
  box-shadow:0 0 26px rgba(255,180,90,.35),0 0 44px rgba(106,184,255,.25);
  mix-blend-mode:normal;opacity:.9;
}
/* pages whose hero carries a photo: warm rim light instead of a full wash */
.phero__photo::after{
  background:
    linear-gradient(90deg, var(--navy) 0%, rgba(0,19,56,.72) 30%, rgba(0,19,56,.18) 56%, transparent 74%),
    linear-gradient(0deg, rgba(0,19,56,.85) 0%, rgba(0,19,56,.28) 14%, transparent 32%),
    radial-gradient(46% 120% at 100% 52%, rgba(255,75,0,.34), transparent 68%) !important;
}
.phero .container{z-index:2}

/* headline accents */
.lum,.phero--land .h1b,.phero h1 .tm,.phero--about h1 .lum,.phero--sol h1 .lum{
  color:#8CC8FF;text-shadow:0 0 24px rgba(0,112,243,.55),0 0 8px rgba(170,220,255,.4),0 2px 22px rgba(0,10,30,.8);
}
.eyebrow{color:var(--signal-dark)}
.on-dark .eyebrow,.phero .eyebrow{color:#FFB43D !important;text-shadow:0 0 16px rgba(255,154,0,.5)}

/* buttons: azure gradient, ember on hover */
.btn--primary{background:var(--grad);box-shadow:0 10px 32px rgba(0,112,243,.45),0 0 60px rgba(106,184,255,.22),inset 0 1px 0 rgba(255,255,255,.28)}
.btn--primary:hover{background:var(--grad-ember);box-shadow:0 12px 36px rgba(255,75,0,.45),0 0 70px rgba(255,154,0,.25)}
.closing .btn--primary{background:#fff;color:var(--navy-2)}
.closing .btn--primary:hover{background:var(--navy-2);color:#fff}

/* progress + top rules carry the full spectrum */
.progressbar{background:var(--spectrum)}
.loopstrip::before,.capline::before,.router-section::before,.record::before{
  background:linear-gradient(90deg,transparent,rgba(106,184,255,.9) 26%,#EAF2FF 50%,rgba(255,154,0,.9) 74%,transparent) !important;
  box-shadow:0 0 18px rgba(255,154,0,.35),0 0 26px rgba(106,184,255,.35) !important;
}

/* card glows shift from cyan to azure, with a warm hover edge */
.loopstop:hover,.roomcard:hover,.record__cell:hover{
  border-color:rgba(255,154,0,.5) !important;
  box-shadow:0 12px 40px rgba(0,0,0,.45),0 0 30px rgba(255,120,0,.18) !important;
}
.loopstop .hn,.record__cell .n,.movecard .mn,.pillar .pn,.joincard__id .hn{
  color:#FFB43D !important;text-shadow:0 0 14px rgba(255,154,0,.5) !important;
}
.loopstop .hn::before{background:#FFB43D !important;box-shadow:0 0 10px #FFB43D !important}
.loopstop::after{border-color:#8CC8FF !important;filter:drop-shadow(0 0 6px rgba(106,184,255,.8)) !important}
.loopstrip__back .line{background:repeating-linear-gradient(90deg,rgba(106,184,255,.6) 0 6px,transparent 6px 14px) !important}
.loopstrip__back .line::after{background:linear-gradient(90deg,transparent,rgba(255,180,60,.95),transparent) !important}
.loopstrip__back b{color:#FFB43D !important;text-shadow:0 0 12px rgba(255,154,0,.5) !important}

/* dark sections pick up the midnight-to-azure ground */
.pillars,.room,.cmp,.matrix-section{background:var(--navy)}
.pillars::before,.room::after,.cmp::before{
  background:
    radial-gradient(700px 520px at 96% 8%, rgba(255,75,0,.20), transparent 62%),
    radial-gradient(760px 620px at 60% 0%, rgba(0,112,243,.30), transparent 66%) !important;
  mix-blend-mode:normal !important;
}
.pillar:hover{border-color:rgba(255,154,0,.6);background:rgba(0,112,243,.12);box-shadow:0 0 30px rgba(255,120,0,.16)}

/* light sections */
.fcard .fk{background:var(--grad-ember);color:#fff}
.testcard{border-top-color:var(--ember)}
.delcard .role,.engine li{background:var(--signal-tint);color:var(--signal-dark)}
.delcard li::before{background:var(--grad-ember)}
.pull,.pull2,.moves .verdict,.dpanel,.answerblock{border-left-color:var(--ember)}
.answerblock{background:#F7FAFF;border-color:rgba(0,112,243,.22);box-shadow:var(--shadow),0 0 34px rgba(0,112,243,.10)}
.answerblock strong{color:var(--signal-dark)}
.step .sn{background:var(--grad-ember);box-shadow:0 6px 20px rgba(255,75,0,.4),0 0 24px rgba(255,154,0,.3)}
.step::before{background:repeating-linear-gradient(180deg,rgba(0,112,243,.5) 0 6px,transparent 6px 12px)}
.joinviz .fn{background:var(--navy-2)}
.joinviz .gap::after{color:var(--ember)}
.faq summary::after,.faq summary:hover{color:var(--ember)}
.route::before{background:var(--grad-ember)}
.route:hover{border-color:rgba(255,75,0,.55);box-shadow:var(--shadow),0 0 28px rgba(255,120,0,.14)}
.route .rd{color:var(--signal-dark)}
.engine--light:hover{border-color:rgba(255,75,0,.5);box-shadow:var(--shadow-lg),0 0 28px rgba(255,120,0,.12)}
.engine--navy{background:linear-gradient(135deg,#001A6E,#001338)}
.engine--ink{background:#000B24}
.engine--navy .en,.engine--ink .en,.engine--navy .go,.engine--ink .go{color:#FFB43D}
.engine--navy .en::before,.engine--ink .en::before{background:#FFB43D;box-shadow:0 0 10px #FFB43D}
.engine--navy li,.engine--ink li{color:#FFD08A;background:rgba(255,154,0,.10);border-color:rgba(255,154,0,.28)}
.engine--navy:hover,.engine--ink:hover{border-color:rgba(255,154,0,.45);box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 34px rgba(255,120,0,.16)}
.phero__engines a::before{background:#FFB43D;box-shadow:0 0 10px #FFB43D}
.phero__engines a:hover{border-color:rgba(255,154,0,.55);background:rgba(255,154,0,.10);box-shadow:0 0 24px rgba(255,120,0,.18)}

/* matrix + spectrum bar */
.matrix td.filled{background:rgba(0,112,243,.28);border-color:rgba(106,184,255,.65);box-shadow:0 0 18px rgba(0,112,243,.2) inset}
.matrix td.sub{color:#FFB43D}
.matrixfoot .bandtag{background:var(--grad-ember)}
.spectrum__bar{background:var(--spectrum)}

/* closing band: the full spectrum, warm end trailing off */
.closing{background:linear-gradient(120deg,#001338 0%,#001A6E 26%,#0070F3 52%,#FF9A00 86%,#FF4B00 100%)}
.closing::before{background:
  radial-gradient(640px 620px at 44% -28%, rgba(235,246,255,.42), transparent 62%),
  radial-gradient(700px 420px at 60% 124%, rgba(0,10,32,.5), transparent 70%)}

/* footer + header */
.footer{background:var(--navy)}
.header{border-bottom-color:var(--rule)}
.navlink:hover{border-bottom-color:var(--ember)}
.navlink[aria-current="page"]{border-bottom-color:var(--ember)}
.mega a:hover{background:var(--signal-tint)}
.mega .num,.mega .tag{color:var(--signal-dark)}

/* quotes + seams inside light pages */
.quote{border-left-color:#FFB43D;box-shadow:-6px 0 18px -8px rgba(255,154,0,.55)}
.ttable th:first-child{color:#FFC46B}
.cmptable thead th:last-child{color:#FFB43D}
.cmptable td:last-child{background:rgba(0,112,243,.16);border-color:rgba(106,184,255,.5)}


/* ===================== skin pass 2 ===================== */
/* ============ LUMINANCE PASS — brighter, more gradient, palette forward ============ */

/* ground lifts from near-black to a live midnight-to-azure field */
:root{
  --navy:#001A6E;
  --navy-2:#0033A8;
  --glow-blue:rgba(0,112,243,.85);
  --glow-sky:rgba(106,184,255,.75);
  --glow-ember:rgba(255,75,0,.85);
  --glow-amber:rgba(255,154,0,.85);
  --glow-sun:rgba(255,196,0,.9);
}

/* every dark section becomes a gradient, never a flat fill */
.phero,.phero--sol,.phero--about,.phero--land,.pillars,.room,.cmp,.matrix-section,.footer{
  background:linear-gradient(150deg,#001A6E 0%,#002A96 38%,#0047C8 68%,#0070F3 100%) !important;
}
.footer{background:linear-gradient(150deg,#00113F 0%,#001A6E 55%,#0033A8 100%) !important}

/* photo-free heroes: a full spectrum wash, far brighter than before */
.phero:not(:has(.phero__photo))::after,.phero--sol::after{
  background:
    radial-gradient(44% 118% at 100% 46%, var(--glow-sun) 0%, var(--glow-ember) 26%, rgba(183,0,0,.42) 48%, transparent 72%) ,
    radial-gradient(56% 116% at 52% 54%, rgba(0,150,255,.80) 0%, rgba(106,184,255,.42) 40%, transparent 74%),
    radial-gradient(70% 130% at 4% 10%, rgba(0,26,110,.9), transparent 68%),
    linear-gradient(90deg,#001A6E 0%,#0033A8 34%,rgba(0,90,220,.6) 58%,rgba(255,154,0,.12) 82%,transparent 96%) !important;
  opacity:1 !important;
}
/* the seam glows properly now */
.phero:not(:has(.phero__photo))::before,.phero--sol::before{
  height:3px !important;
  background:linear-gradient(90deg,transparent 2%,rgba(106,184,255,.9) 20%,#FFFFFF 46%,#FFE9A8 60%,#FF9A00 78%,transparent 98%) !important;
  box-shadow:0 0 34px rgba(255,180,60,.75),0 0 60px rgba(106,184,255,.55),0 0 100px rgba(255,120,0,.35) !important;
  opacity:1 !important;
}
/* photo heroes: keep the face clean, but light the frame */
.phero__photo::after{
  background:
    linear-gradient(90deg, #001A6E 0%, rgba(0,26,110,.86) 14%, rgba(0,26,110,.62) 28%, rgba(0,38,140,.34) 40%,
      rgba(0,51,168,.16) 52%, rgba(0,51,168,.06) 62%, transparent 74%),
    linear-gradient(0deg, rgba(0,26,110,.80) 0%, rgba(0,26,110,.24) 15%, transparent 34%),
    radial-gradient(46% 120% at 102% 52%, rgba(255,154,0,.48), rgba(255,75,0,.22) 44%, transparent 74%) !important;
}

/* dark section overlays: brighter, wider, two-sided */
.pillars::before,.room::after,.cmp::before,.matrix-section::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 620px at 100% 4%, rgba(255,154,0,.42), rgba(255,75,0,.18) 40%, transparent 70%) ,
    radial-gradient(900px 720px at 24% 100%, rgba(0,150,255,.45), transparent 68%) !important;
  mix-blend-mode:normal !important;
}

/* headline accents: luminous, not tinted */
.lum,.phero--land .h1b,.phero h1 .tm,.phero--about h1 .lum,.phero--sol h1 .lum{
  color:#BFE4FF !important;
  text-shadow:0 0 18px rgba(150,215,255,.95),0 0 42px rgba(0,140,255,.7),0 0 80px rgba(0,112,243,.45) !important;
}
.on-dark .eyebrow,.phero .eyebrow{
  color:#FFC400 !important;text-shadow:0 0 18px rgba(255,196,0,.85),0 0 38px rgba(255,154,0,.5) !important;
}

/* cards on dark: lit glass rather than grey panels */
.pillar,.roomcard,.loopstop,.record__cell,.movecard{
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03)) !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.pillar:hover,.roomcard:hover,.loopstop:hover,.record__cell:hover{
  border-color:rgba(255,196,0,.75) !important;
  background:linear-gradient(160deg,rgba(255,154,0,.18),rgba(0,112,243,.10)) !important;
  box-shadow:0 16px 46px rgba(0,10,40,.5),0 0 44px rgba(255,140,0,.35),inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.loopstop .hn,.record__cell .n,.movecard .mn,.pillar .pn{
  color:#FFC400 !important;text-shadow:0 0 16px rgba(255,196,0,.9),0 0 34px rgba(255,154,0,.5) !important;
}
.loopstop .hn::before{background:#FFC400 !important;box-shadow:0 0 14px #FFC400,0 0 28px rgba(255,154,0,.8) !important}
.loopstop::after{border-color:#BFE4FF !important;filter:drop-shadow(0 0 10px rgba(150,215,255,1)) !important}

/* buttons glow */
.btn--primary{
  background:linear-gradient(135deg,#0047C8 0%,#0070F3 46%,#6AB8FF 100%) !important;
  box-shadow:0 12px 36px rgba(0,112,243,.65),0 0 70px rgba(106,184,255,.45),inset 0 1px 0 rgba(255,255,255,.4) !important;
}
.btn--primary:hover{
  background:linear-gradient(135deg,#B70000 0%,#FF4B00 44%,#FFC400 100%) !important;
  box-shadow:0 14px 40px rgba(255,75,0,.6),0 0 80px rgba(255,196,0,.5),inset 0 1px 0 rgba(255,255,255,.45) !important;
}
.closing .btn--primary{background:#fff !important;color:#0033A8 !important;box-shadow:0 14px 40px rgba(0,10,40,.35),0 0 60px rgba(255,255,255,.5) !important}

/* rules and bars: full spectrum, glowing */
.progressbar{box-shadow:0 0 16px rgba(255,154,0,.7),0 0 26px rgba(0,112,243,.6)}
.loopstrip::before,.capline::before,.router-section::before,.record::before{
  height:2px !important;
  background:linear-gradient(90deg,transparent,rgba(106,184,255,1) 22%,#FFFFFF 48%,#FFC400 72%,rgba(255,75,0,.9) 88%,transparent) !important;
  box-shadow:0 0 26px rgba(255,180,60,.7),0 0 40px rgba(106,184,255,.6) !important;
}
.loopstrip{background:linear-gradient(180deg,rgba(0,26,110,.6) 0%,rgba(0,26,110,.96) 18%,#001A6E 100%) !important}
.record{background:linear-gradient(180deg,rgba(0,26,110,.6) 0%,rgba(0,26,110,.96) 18%,#001A6E 100%) !important}

/* light sections: tinted gradients instead of flat mist */
.joins,.rules,.moves,.deliver,.enginesec,.own{
  background:linear-gradient(165deg,#FFFFFF 0%,#EAF1FC 42%,#DCE7F7 100%) !important;
}
.friction,.tests,.shapes,.faq,.outcome,.where,.answerband{
  background:linear-gradient(180deg,#FFFFFF 0%,#F7FAFF 100%) !important;
}
.answerblock{
  background:linear-gradient(120deg,#EAF3FF 0%,#DCE9FF 58%,#FFF3DC 100%) !important;
  border-left-color:#FF4B00 !important;
  box-shadow:0 18px 44px rgba(0,40,120,.12),0 0 44px rgba(0,112,243,.16) !important;
}
.fcard,.testcard,.shapecard,.delcard,.joincard,.engine--light,.route{
  background:linear-gradient(165deg,#FFFFFF 0%,#F6FAFF 100%) !important;
}
.fcard:hover,.testcard:hover,.shapecard:hover,.delcard:hover,.joincard:hover,.route:hover,.engine--light:hover{
  border-color:rgba(255,75,0,.6) !important;
  box-shadow:0 20px 50px rgba(0,40,120,.14),0 0 38px rgba(255,120,0,.22) !important;
}
.fcard .fk,.step .sn,.matrixfoot .bandtag{
  background:linear-gradient(135deg,#FF4B00 0%,#FF9A00 52%,#FFC400 100%) !important;
  box-shadow:0 8px 24px rgba(255,75,0,.45),0 0 30px rgba(255,196,0,.5) !important;color:#fff !important;
}

/* dark engine cards */
.engine--navy{background:linear-gradient(140deg,#0033A8 0%,#001A6E 60%,#00113F 100%) !important}
.engine--ink{background:linear-gradient(140deg,#001A6E 0%,#00113F 55%,#000A26 100%) !important}
.engine--navy .en,.engine--ink .en,.engine--navy .go,.engine--ink .go{color:#FFC400 !important;text-shadow:0 0 16px rgba(255,196,0,.8) !important}

/* matrix */
.matrix td{background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.2) !important}
.matrix td.filled{
  background:linear-gradient(135deg,rgba(0,112,243,.6),rgba(106,184,255,.42)) !important;
  border-color:rgba(191,228,255,.9) !important;
  box-shadow:0 0 26px rgba(0,150,255,.5) inset,0 0 20px rgba(106,184,255,.35) !important;
}
.matrix td.sub{background:transparent !important;border-color:transparent !important;color:#FFC400 !important}
.spectrum__bar{box-shadow:0 0 30px rgba(0,112,243,.5),0 0 50px rgba(255,154,0,.35)}

/* closing: the brightest moment on the page */
.closing{
  background:linear-gradient(115deg,#0033A8 0%,#0070F3 30%,#6AB8FF 48%,#FFC400 72%,#FF9A00 86%,#FF4B00 100%) !important;
}
.closing::before{
  background:
    radial-gradient(700px 640px at 42% -26%, rgba(255,255,255,.55), transparent 62%),
    radial-gradient(760px 460px at 66% 128%, rgba(0,26,110,.42), transparent 72%) !important;
}
.closing h2,.closing p{text-shadow:0 2px 22px rgba(0,20,70,.45)}


/* photo blends into the luminous ground instead of butting against it */
.phero__photo{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 44%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 10%,rgba(0,0,0,.7) 24%,#000 44%);
}
.phero__photo::after{
  background:
    linear-gradient(90deg, rgba(0,26,110,.55) 0%, rgba(0,26,110,.34) 22%, rgba(0,51,168,.12) 44%, transparent 66%),
    linear-gradient(0deg, rgba(0,26,110,.78) 0%, rgba(0,26,110,.22) 15%, transparent 34%),
    radial-gradient(46% 120% at 102% 52%, rgba(255,154,0,.46), rgba(255,75,0,.20) 44%, transparent 74%) !important;
}
@media(max-width:760px){
  .phero__photo{-webkit-mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.6) 22%,#000 52%);
                mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.6) 22%,#000 52%)}
}
/* nav accent */
.navlink:hover,.navlink[aria-current="page"]{border-bottom-color:#FF4B00 !important}


/* ===================== skin pass 3 ===================== */
/* ============ CALM PASS — clean, simple, colour used sparingly ============ */

/* 1. kill the luminescence everywhere */
*{text-shadow:none !important}
.phero h1,.phero .lead,.phero__crumb,.phero__meta,.closing h2,.closing p{
  text-shadow:0 1px 18px rgba(0,10,40,.35) !important;   /* legibility only, not glow */
}
.lum,.phero--land .h1b,.phero h1 .tm,.phero--about h1 .lum,.phero--sol h1 .lum{
  color:#8FD0FF !important;
}
.on-dark .eyebrow,.phero .eyebrow{color:#FFB43D !important}
.loopstop .hn,.record__cell .n,.movecard .mn,.pillar .pn,.joincard__id .hn,
.engine--navy .en,.engine--ink .en,.engine--navy .go,.engine--ink .go,.matrix td.sub,
.loopstrip__back b{color:#FFB43D !important}
.loopstop .hn::before{box-shadow:none !important}
.loopstop::after{filter:none !important}
.progressbar{box-shadow:none !important}

/* 2. one calm hero gradient, no radial fireworks */
.phero,.phero--sol,.phero--about,.phero--land{
  background:linear-gradient(112deg,#001338 0%,#001A6E 46%,#0033A8 100%) !important;
}
.phero:not(:has(.phero__photo))::after,.phero--sol::after{
  background:linear-gradient(100deg,
    #001338 0%,#001A6E 34%,#0043BE 60%,#0070F3 74%,#FF7A00 92%,#FF4B00 100%) !important;
  opacity:.92 !important;
}
/* a single quiet seam */
.phero:not(:has(.phero__photo))::before,.phero--sol::before{
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75) 45%,rgba(255,200,120,.75) 72%,transparent) !important;
  box-shadow:none !important;opacity:.75 !important;
}
.phero__photo::after{
  background:
    linear-gradient(90deg, rgba(0,19,56,.92) 0%, rgba(0,19,56,.70) 22%, rgba(0,26,110,.30) 44%, transparent 68%),
    linear-gradient(0deg, rgba(0,19,56,.80) 0%, rgba(0,19,56,.20) 16%, transparent 36%) !important;
}

/* 3. dark sections: calm, near-solid, no overlay glows */
.pillars,.room,.cmp,.matrix-section{background:#001338 !important}
.pillars::before,.room::after,.cmp::before,.matrix-section::before{
  background:linear-gradient(140deg,rgba(0,51,168,.35),transparent 62%) !important;
}
.footer{background:#00112F !important}
.loopstrip,.record{background:#001338 !important}
.loopstrip::before,.capline::before,.router-section::before,.record::before{
  height:1px !important;background:rgba(255,255,255,.18) !important;box-shadow:none !important;
}

/* 4. light sections: white and quiet, like Sanei's pages */
.joins,.rules,.moves,.deliver,.enginesec,.own,.friction,.tests,.shapes,.faq,.outcome,.where,.answerband{
  background:#FFFFFF !important;
}
.joins,.moves,.enginesec,.own,.rules{border-top:1px solid #E8EDF4;border-bottom:1px solid #E8EDF4}
section{padding:clamp(76px,10vw,132px) 0}

/* 5. cards: hairline borders, no gradients, restrained hover */
.fcard,.testcard,.shapecard,.delcard,.joincard,.engine--light,.route,.ttable{
  background:#FFFFFF !important;border:1px solid #E4EAF2 !important;box-shadow:none !important;
}
.fcard:hover,.testcard:hover,.shapecard:hover,.delcard:hover,.joincard:hover,.route:hover,.engine--light:hover{
  border-color:#C9D6E6 !important;box-shadow:0 10px 28px rgba(0,30,90,.08) !important;transform:translateY(-2px) !important;
}
.pillar,.roomcard,.loopstop,.record__cell,.movecard{
  background:rgba(255,255,255,.05) !important;border-color:rgba(255,255,255,.14) !important;box-shadow:none !important;
}
.pillar:hover,.roomcard:hover,.loopstop:hover,.record__cell:hover{
  background:rgba(255,255,255,.09) !important;border-color:rgba(255,180,61,.5) !important;box-shadow:none !important;
}
.answerblock{
  background:#F6F9FE !important;border:1px solid #DDE6F2 !important;border-left:4px solid #FF4B00 !important;
  box-shadow:none !important;
}
.engine--navy{background:#001A6E !important}
.engine--ink{background:#001338 !important}
.engine--navy:hover,.engine--ink:hover{box-shadow:none !important;border-color:rgba(255,180,61,.45) !important}

/* 6. typography: bigger, tighter, blacker — the Sanei move */
h1{letter-spacing:-.035em !important;line-height:1.02 !important}
h2{font-size:clamp(32px,4vw,52px) !important;letter-spacing:-.03em !important;line-height:1.05 !important;color:#0B1020 !important}
h3{letter-spacing:-.02em !important}
.narrow,.joins__head{max-width:760px}
.lead{color:#5A6472 !important}
.eyebrow{color:#0B1020 !important;opacity:.45;font-size:12px;letter-spacing:.16em}
.on-dark .eyebrow{opacity:1}


/* dark-ground text stays bright */
.phero .lead,.on-dark .lead,.shero .lead{color:rgba(255,255,255,.90) !important}
.phero .eyebrow,.on-dark .eyebrow{opacity:1 !important;font-size:13px !important}
.phero__crumb,.phero__crumb a{color:rgba(255,255,255,.62) !important}
.phero__meta{color:rgba(255,255,255,.78) !important}
.phero__meta b{color:#fff !important}
.on-dark h2,.on-dark h3,.phero h1{color:#fff !important}
/* 7. buttons: flat, confident, one accent */
.btn--primary{
  background:#0070F3 !important;box-shadow:none !important;text-shadow:none !important;
}
.btn--primary:hover{background:#FF4B00 !important;box-shadow:none !important}
.btn--ghost{border-width:1.5px}
.closing .btn--primary{background:#fff !important;color:#0B1020 !important;box-shadow:none !important}
.closing .btn--primary:hover{background:#0B1020 !important;color:#fff !important}

.closing h2{color:#fff !important}
.closing p,.closing .alt{color:rgba(255,255,255,.92) !important}
.closing .alt a{color:#fff !important}
/* 8. closing band: one clean gradient */
.closing{background:linear-gradient(100deg,#001A6E 0%,#0070F3 46%,#FF7A00 86%,#FF4B00 100%) !important}
.closing::before{background:none !important}

/* 9. accents kept to the orange line and the amber marker */
.fcard .fk,.step .sn,.matrixfoot .bandtag{background:#FF4B00 !important;box-shadow:none !important}
.testcard{border-top:3px solid #FF4B00 !important}
.delcard .role,.engine li{background:#F0F4FA !important;color:#0B1020 !important;border:0 !important}
.matrix td.filled{background:rgba(0,112,243,.45) !important;box-shadow:none !important;border-color:rgba(255,255,255,.35) !important}
.quote{box-shadow:none !important;border-left-color:#FFB43D !important}
.spectrum__bar{box-shadow:none !important}


/* ===================== skin pass 4 ===================== */
/* ============ GRADIENT PASS — striking through colour, not glow ============ */

/* no glow returns: gradients do the work */
*{text-shadow:none !important}
.phero h1,.phero .lead,.closing h2,.closing p{text-shadow:0 1px 16px rgba(0,10,40,.32) !important}

/* 1. HEROES — a full, confident spectrum sweep */
.phero:not(:has(.phero__photo))::after,.phero--sol::after{
  background:linear-gradient(104deg,
    #001338 0%,#001A6E 22%,#0033A8 42%,#0070F3 60%,#2E93FF 70%,
    #FFC400 84%,#FF9A00 91%,#FF4B00 97%,#B70000 100%) !important;
  opacity:1 !important;
}
.phero:not(:has(.phero__photo))::before{
  height:1px !important;background:rgba(255,255,255,.5) !important;opacity:.7 !important;
}
/* photo heroes: the sweep runs behind and past the photo */
.phero:has(.phero__photo){
  background:linear-gradient(104deg,#001338 0%,#001A6E 30%,#0033A8 52%,#0070F3 70%,#FF9A00 92%,#FF4B00 100%) !important;
}
.phero__photo::after{
  background:
    linear-gradient(90deg, rgba(0,19,56,.94) 0%, rgba(0,19,56,.70) 24%, rgba(0,26,110,.26) 46%, transparent 70%),
    linear-gradient(0deg, rgba(0,19,56,.78) 0%, rgba(0,19,56,.18) 16%, transparent 36%) !important;
}

/* 2. GRADIENT HEADLINE ACCENT — colour inside the type, no halo */
.lum,.phero--land .h1b,.phero--about h1 .lum,.phero--sol h1 .lum{
  background:linear-gradient(96deg,#FFFFFF 0%,#CDE9FF 38%,#8FD0FF 72%,#6AB8FF 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
.phero h1 .tm{color:#FFB43D !important;-webkit-text-fill-color:#FFB43D !important}

/* 3. DARK SECTIONS become gradient fields, not flat navy */
.pillars,.room,.cmp,.matrix-section{
  background:linear-gradient(128deg,#001338 0%,#001A6E 42%,#0033A8 78%,#0047C8 100%) !important;
}
.pillars::before,.room::after,.cmp::before,.matrix-section::before{
  background:linear-gradient(104deg,transparent 52%,rgba(255,122,0,.30) 84%,rgba(255,75,0,.40) 100%) !important;
}
.loopstrip,.record{background:linear-gradient(100deg,#001338 0%,#001A6E 58%,#0033A8 100%) !important}
.footer{background:linear-gradient(128deg,#00112F 0%,#001A6E 100%) !important}

/* 4. CARDS ON DARK — each one a gradient tile, mood-board style */
.pillar,.roomcard,.loopstop,.record__cell,.movecard{
  background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.03)) !important;
  border-color:rgba(255,255,255,.18) !important;
}
.pillar:nth-child(1),.movecard:nth-child(1){background:linear-gradient(150deg,rgba(0,112,243,.42),rgba(0,26,110,.25)) !important}
.pillar:nth-child(2),.movecard:nth-child(2){background:linear-gradient(150deg,rgba(46,147,255,.34),rgba(0,51,168,.24)) !important}
.pillar:nth-child(3),.movecard:nth-child(3){background:linear-gradient(150deg,rgba(255,154,0,.34),rgba(183,0,0,.20)) !important}
.pillar:hover,.roomcard:hover,.loopstop:hover,.record__cell:hover{
  border-color:rgba(255,196,0,.7) !important;
  background:linear-gradient(150deg,rgba(255,154,0,.30),rgba(0,112,243,.18)) !important;
}

/* 5. LIGHT SECTIONS — white ground, but gradient bands and edges */
.joins,.rules,.moves,.deliver,.enginesec,.own{
  background:#FFFFFF !important;border-top:0 !important;border-bottom:0 !important;position:relative;
}
.joins::before,.rules::before,.moves::before,.deliver::before,.enginesec::before,.own::before,
.friction::before,.tests::before,.shapes::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#001A6E,#0070F3 34%,#6AB8FF 50%,#FFC400 70%,#FF4B00 92%,#B70000);
}
.friction,.tests,.shapes,.faq,.outcome,.where,.answerband{background:#FFFFFF !important;position:relative}

/* 6. LIGHT CARDS — white with a gradient top edge */
.fcard,.testcard,.shapecard,.delcard,.joincard,.engine--light,.route{
  background:#FFFFFF !important;border:1px solid #E4EAF2 !important;position:relative;overflow:hidden;
}
.fcard::after,.testcard::after,.shapecard::after,.delcard::after,.engine--light::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#0070F3,#6AB8FF 46%,#FFC400 78%,#FF4B00);
}
.testcard{border-top:1px solid #E4EAF2 !important}
.fcard:hover,.testcard:hover,.shapecard:hover,.delcard:hover,.joincard:hover,.route:hover,.engine--light:hover{
  border-color:#C4D3E6 !important;box-shadow:0 14px 34px rgba(0,30,90,.10) !important;transform:translateY(-3px) !important;
}
.fcard .fk,.step .sn,.matrixfoot .bandtag{
  background:linear-gradient(135deg,#FF4B00,#FF9A00 55%,#FFC400) !important;color:#fff !important;
}
.answerblock{
  background:linear-gradient(100deg,#EFF5FF 0%,#F7FAFF 52%,#FFF4E2 100%) !important;
  border:1px solid #E2EAF6 !important;border-left:5px solid transparent !important;
  border-image:linear-gradient(180deg,#0070F3,#FF4B00) 1 !important;
}

/* 7. ENGINE CARDS — full gradient panels */
.engine--navy{background:linear-gradient(130deg,#0033A8 0%,#001A6E 68%,#001338 100%) !important}
.engine--ink{background:linear-gradient(130deg,#001A6E 0%,#001338 48%,#3A0A00 100%) !important}

/* 8. MATRIX + BARS */
.matrix td.filled{background:linear-gradient(135deg,rgba(0,112,243,.7),rgba(106,184,255,.45)) !important}
.spectrum__bar{background:linear-gradient(90deg,#001A6E 0%,#0070F3 34%,#6AB8FF 52%,#FFC400 74%,#FF4B00 100%) !important}
.progressbar{background:linear-gradient(90deg,#0070F3,#6AB8FF 40%,#FFC400 72%,#FF4B00) !important}

/* 9. CLOSING — the biggest colour moment on the page */
.closing{
  background:linear-gradient(104deg,#001338 0%,#001A6E 14%,#0033A8 30%,#0070F3 50%,
    #6AB8FF 64%,#FFC400 80%,#FF9A00 89%,#FF4B00 97%,#B70000 100%) !important;
}
.closing h2{color:#fff !important}

/* 10. buttons stay flat and graphic */
.btn--primary{background:linear-gradient(100deg,#0033A8,#0070F3 60%,#2E93FF) !important;box-shadow:none !important}
.btn--primary:hover{background:linear-gradient(100deg,#B70000,#FF4B00 55%,#FF9A00) !important}
.navlink:hover,.navlink[aria-current="page"]{border-bottom-color:#FF4B00 !important}


/* ===================== skin pass 5 ===================== */
/* ============ FINAL: BLUE GRADIENT ONLY — no glow, no warm ============ */

/* 1. no luminescence anywhere */
*{text-shadow:none !important;filter:none !important}
.phero h1,.phero .lead,.closing h2,.closing p{text-shadow:0 1px 14px rgba(0,10,40,.30) !important}
.loopstop .hn::before,.phero__engines a::before,.engine .en::before,.tag::after{box-shadow:none !important}

/* 2. heroes: one blue ramp, midnight to sky */
.phero,.phero--sol,.phero--about,.phero--land,.phero:has(.phero__photo){
  background:linear-gradient(104deg,#001338 0%,#001A6E 34%,#0033A8 62%,#0070F3 88%,#2E93FF 100%) !important;
}
.phero:not(:has(.phero__photo))::after,.phero--sol::after{
  background:linear-gradient(104deg,
    #001338 0%,#001A6E 24%,#0033A8 46%,#0058D8 64%,#0070F3 80%,#2E93FF 92%,#6AB8FF 100%) !important;
  opacity:1 !important;
}
.phero:not(:has(.phero__photo))::before,.phero--sol::before{
  height:1px !important;background:rgba(255,255,255,.42) !important;box-shadow:none !important;opacity:.7 !important;
}
.phero__photo::after{
  background:
    linear-gradient(90deg, rgba(0,19,56,.94) 0%, rgba(0,19,56,.70) 24%, rgba(0,26,110,.26) 46%, transparent 70%),
    linear-gradient(0deg, rgba(0,19,56,.78) 0%, rgba(0,19,56,.18) 16%, transparent 36%) !important;
}

/* 3. headline accent: gradient inside the type, blue only */
.lum,.phero--land .h1b,.phero--about h1 .lum,.phero--sol h1 .lum{
  background:linear-gradient(96deg,#FFFFFF 0%,#CDE9FF 40%,#8FD0FF 76%,#6AB8FF 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
.phero h1 .tm{color:#8FD0FF !important;-webkit-text-fill-color:#8FD0FF !important}

/* 4. all accents return to blue */
.on-dark .eyebrow,.phero .eyebrow{color:#8FD0FF !important}
.loopstop .hn,.record__cell .n,.movecard .mn,.pillar .pn,.joincard__id .hn,
.engine--navy .en,.engine--ink .en,.engine--navy .go,.engine--ink .go,
.matrix td.sub,.loopstrip__back b,.quote span{color:#8FD0FF !important}
.loopstop .hn::before,.phero__engines a::before,.engine--navy .en::before,.engine--ink .en::before{background:#8FD0FF !important}
.loopstop::after{border-color:#8FD0FF !important}
.quote{border-left-color:#0070F3 !important}
.joinviz .gap::after,.faq summary::after,.faq summary:hover,.route .rd{color:#0070F3 !important}
.testcard{border-top:3px solid #0070F3 !important}
.navlink:hover,.navlink[aria-current="page"]{border-bottom-color:#0070F3 !important}

/* 5. dark sections: blue gradient fields */
.pillars,.room,.cmp,.matrix-section{
  background:linear-gradient(128deg,#001338 0%,#001A6E 44%,#0033A8 82%,#0047C8 100%) !important;
}
.pillars::before,.room::after,.cmp::before,.matrix-section::before{
  background:linear-gradient(104deg,transparent 46%,rgba(0,112,243,.35) 82%,rgba(46,147,255,.42) 100%) !important;
}
.loopstrip,.record{background:linear-gradient(100deg,#001338 0%,#001A6E 56%,#0033A8 100%) !important}
.footer{background:linear-gradient(128deg,#00112F 0%,#001A6E 100%) !important}
.engine--navy{background:linear-gradient(130deg,#0033A8 0%,#001A6E 68%,#001338 100%) !important}
.engine--ink{background:linear-gradient(130deg,#001A6E 0%,#001338 60%,#000A22 100%) !important}

/* 6. tiles: three shades of blue, no warm tile */
.pillar:nth-child(1),.movecard:nth-child(1){background:linear-gradient(150deg,rgba(0,112,243,.42),rgba(0,26,110,.25)) !important}
.pillar:nth-child(2),.movecard:nth-child(2){background:linear-gradient(150deg,rgba(46,147,255,.36),rgba(0,51,168,.24)) !important}
.pillar:nth-child(3),.movecard:nth-child(3){background:linear-gradient(150deg,rgba(106,184,255,.30),rgba(0,71,200,.24)) !important}
.pillar:hover,.roomcard:hover,.loopstop:hover,.record__cell:hover{
  border-color:rgba(143,208,255,.7) !important;
  background:linear-gradient(150deg,rgba(106,184,255,.28),rgba(0,112,243,.18)) !important;box-shadow:none !important;
}

/* 7. light sections: white, with blue gradient edges */
.joins::before,.rules::before,.moves::before,.deliver::before,.enginesec::before,.own::before,
.friction::before,.tests::before,.shapes::before{
  background:linear-gradient(90deg,#001A6E,#0033A8 28%,#0070F3 58%,#2E93FF 80%,#6AB8FF 100%) !important;
}
.fcard::after,.testcard::after,.shapecard::after,.delcard::after,.engine--light::after{
  background:linear-gradient(90deg,#0033A8,#0070F3 52%,#6AB8FF 100%) !important;
}
.fcard:hover,.testcard:hover,.shapecard:hover,.delcard:hover,.joincard:hover,.route:hover,.engine--light:hover{
  border-color:#B9CFE8 !important;box-shadow:0 14px 34px rgba(0,40,120,.10) !important;
}
.fcard .fk,.step .sn,.matrixfoot .bandtag{
  background:linear-gradient(135deg,#0033A8,#0070F3 55%,#2E93FF) !important;color:#fff !important;
}
.answerblock{
  background:linear-gradient(100deg,#EEF4FF 0%,#F7FAFF 60%,#EAF3FF 100%) !important;
  border:1px solid #DEE8F6 !important;border-left:5px solid #0070F3 !important;border-image:none !important;
}
.delcard li::before,.route::before{background:linear-gradient(135deg,#0033A8,#0070F3 55%,#6AB8FF) !important}
.pull,.pull2,.moves .verdict,.dpanel{border-left-color:#0070F3 !important}

/* 8. matrix + bars, blue */
.matrix td.filled{background:linear-gradient(135deg,rgba(0,112,243,.7),rgba(106,184,255,.45)) !important}
.spectrum__bar{background:linear-gradient(90deg,#001A6E 0%,#0033A8 30%,#0070F3 58%,#2E93FF 80%,#6AB8FF 100%) !important}
.progressbar{background:linear-gradient(90deg,#001A6E,#0070F3 52%,#6AB8FF) !important}
.loopstrip::before,.capline::before,.router-section::before,.record::before{
  background:linear-gradient(90deg,transparent,rgba(143,208,255,.75) 30%,rgba(143,208,255,.75) 70%,transparent) !important;
  box-shadow:none !important;
}
.loopstrip__back .line::after{background:linear-gradient(90deg,transparent,rgba(143,208,255,.85),transparent) !important}

/* 9. closing: deep blue to sky */
.closing{
  background:linear-gradient(104deg,#001338 0%,#001A6E 20%,#0033A8 44%,#0070F3 70%,#2E93FF 88%,#6AB8FF 100%) !important;
}
.closing::before{background:none !important}
.closing .btn--primary{background:#fff !important;color:#0B1020 !important}
.closing .btn--primary:hover{background:#001A6E !important;color:#fff !important}

.ttable th:first-child{color:#8FD0FF !important}
.cmptable thead th:last-child{color:#8FD0FF !important}
/* 10. buttons */
.btn--primary{background:linear-gradient(100deg,#0033A8,#0070F3 60%,#2E93FF) !important;box-shadow:none !important}
.btn--primary:hover{background:linear-gradient(100deg,#001A6E,#0033A8 60%,#0070F3) !important}


/* ===================== skin pass 6 ===================== */
/* ============ SECONDARY: MINT — used at ~5%, no glow ============ */
:root{
  --mint:#6FF2C0;          /* on dark surfaces and as a fill */
  --mint-deep:#077257;     /* for text and icons on white, WCAG AA on white */
  --mint-ink:#04231A;      /* text that sits on mint */
}

/* 1. accents on dark grounds */
.on-dark .eyebrow,.phero .eyebrow,
.loopstop .hn,.record__cell .n,.movecard .mn,.pillar .pn,
.engine--navy .en,.engine--ink .en,.engine--navy .go,.engine--ink .go,
.matrix td.sub,.loopstrip__back b{color:var(--mint) !important}
.loopstop .hn::before,.phero__engines a::before,
.engine--navy .en::before,.engine--ink .en::before{background:var(--mint) !important}
.loopstop::after{border-color:var(--mint) !important}
.quote{border-left-color:var(--mint) !important}
.quote span{color:var(--mint) !important}
.phero__engines a:hover{border-color:rgba(111,242,192,.6) !important;background:rgba(111,242,192,.12) !important}
.pillar:hover,.roomcard:hover,.loopstop:hover,.record__cell:hover{
  border-color:rgba(111,242,192,.65) !important;
  background:linear-gradient(150deg,rgba(111,242,192,.16),rgba(0,112,243,.16)) !important;
}

/* 2. accents on white — deeper mint so small text stays readable */
.joincard__id .hn,.joinviz .gap::after,.route .rd,
.faq summary::after,.delcard .role,.engine li,.shapecard .st{color:var(--mint-deep) !important}
.delcard .role,.engine li{background:#E6FBF3 !important}
.faq summary:hover{color:var(--mint-deep) !important}

/* 3. the one accent edge per card + section rules */
.fcard::after,.testcard::after,.shapecard::after,.delcard::after,.engine--light::after{
  background:linear-gradient(90deg,#0070F3,#2E93FF 44%,var(--mint) 100%) !important;
}
.joins::before,.rules::before,.moves::before,.deliver::before,.enginesec::before,.own::before,
.friction::before,.tests::before,.shapes::before{
  background:linear-gradient(90deg,#001A6E,#0033A8 24%,#0070F3 52%,#2E93FF 74%,var(--mint) 100%) !important;
}
.testcard{border-top:3px solid var(--mint) !important}
.pull,.pull2,.moves .verdict,.dpanel,.answerblock{border-left-color:var(--mint-deep) !important}

/* 4. number chips and step markers carry the accent */
.fcard .fk,.step .sn,.matrixfoot .bandtag{
  background:var(--mint) !important;color:var(--mint-ink) !important;
}
.delcard li::before,.route::before{background:linear-gradient(135deg,#0070F3,var(--mint)) !important}

/* 5. the primary call to action is the loudest use of it */
.btn--primary{
  background:var(--mint) !important;color:var(--mint-ink) !important;
  text-shadow:none !important;box-shadow:none !important;
}
.btn--primary:hover{background:#4FE3AC !important;color:var(--mint-ink) !important}
.header__cta .btn--primary{background:var(--mint) !important;color:var(--mint-ink) !important}
.closing .btn--primary{background:#fff !important;color:#0B1020 !important}
.closing .btn--primary:hover{background:var(--mint) !important;color:var(--mint-ink) !important}
.mobilebar .btn--primary{background:var(--mint) !important;color:var(--mint-ink) !important}

/* 6. progress + seam pick up a mint tail */
.progressbar{background:linear-gradient(90deg,#001A6E,#0070F3 46%,#2E93FF 74%,var(--mint)) !important}
.loopstrip::before,.capline::before,.router-section::before,.record::before{
  background:linear-gradient(90deg,transparent,rgba(143,208,255,.7) 28%,rgba(111,242,192,.85) 72%,transparent) !important;
}
.spectrum__bar{background:linear-gradient(90deg,#001A6E 0%,#0033A8 26%,#0070F3 54%,#2E93FF 76%,var(--mint) 100%) !important}
.matrix td.filled{background:linear-gradient(135deg,rgba(0,112,243,.62),rgba(111,242,192,.42)) !important;
  border-color:rgba(111,242,192,.6) !important}

/* 7. nav + links */
.navlink:hover,.navlink[aria-current="page"]{border-bottom-color:var(--mint) !important}
.mega .num,.mega .tag{color:var(--mint-deep) !important}
.mega .tag{background:#E6FBF3 !important}
.mega a:hover{background:#F0FDF8 !important}


/* ===================== skin pass 7 ===================== */
/* gradient headline text: gradient only, no shadow bleeding through the letterforms */
.lum,.phero--land .h1b,.phero--about h1 .lum,.phero--sol h1 .lum,
.phero h1 .lum,.phero h1 .h1b,.phero h1 .tm{
  text-shadow:none !important;filter:none !important;
}
.phero h1{text-shadow:none !important}
.phero h1 > span,.phero h1 .tm{text-shadow:none !important}


/* ===================== skin pass 8 ===================== */
/* accent line reads as its own colour: mint into sky, flat gradient, no glow */
.lum,.phero--land .h1b,.phero--about h1 .lum,.phero--sol h1 .lum{
  background:linear-gradient(98deg,#6FF2C0 0%,#8FD0FF 46%,#6AB8FF 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  text-shadow:none !important;
}
.phero h1 .tm{color:#6FF2C0 !important;-webkit-text-fill-color:#6FF2C0 !important;text-shadow:none !important}


/* ===================== skin pass 9 ===================== */
/* ============ BRAND PALETTE — Craig Chappell Inc. ============ */
:root{
  --deep-navy:#06143F;      /* trust, leadership, stability, impact */
  --midnight:#0D1F5D;       /* depth, focus, confidence, precision */
  --royal:#133084;          /* energy, progress, opportunity, growth */
  --electric:#123FA8;       /* innovation, momentum, creativity */
  --mint:#93EDC6;           /* fresh perspective, clarity, balance */
  --mint-deep:#0B6B4F;      /* mint for text on white — AA compliant */
  --mint-ink:#06143F;       /* text that sits on mint */
  --soft-white:#F6F6F6;     /* simplicity, space, clarity, freedom */
  --cool-grey:#BFC0C5;      /* balance, perspective, professionalism */
  --ink:#06143F;
  --mute:#6B6F7A;
  --rule:#DDDEE2;
}

/* ---------- dark grounds ---------- */
.phero,.phero--sol,.phero--about,.phero--land,.phero:has(.phero__photo){
  background:linear-gradient(104deg,#06143F 0%,#0D1F5D 34%,#133084 66%,#123FA8 100%) !important;
}
.phero:not(:has(.phero__photo))::after,.phero--sol::after{
  background:linear-gradient(104deg,#06143F 0%,#0D1F5D 26%,#133084 52%,#123FA8 82%,#1A4FC8 100%) !important;
}
.phero__photo::after{
  background:
    linear-gradient(90deg, rgba(6,20,63,.95) 0%, rgba(6,20,63,.72) 24%, rgba(13,31,93,.28) 46%, transparent 70%),
    linear-gradient(0deg, rgba(6,20,63,.80) 0%, rgba(6,20,63,.20) 16%, transparent 36%) !important;
}
.pillars,.room,.cmp,.matrix-section{
  background:linear-gradient(128deg,#06143F 0%,#0D1F5D 46%,#133084 82%,#123FA8 100%) !important;
}
.pillars::before,.room::after,.cmp::before,.matrix-section::before{
  background:linear-gradient(104deg,transparent 46%,rgba(18,63,168,.45) 82%,rgba(26,79,200,.5) 100%) !important;
}
.loopstrip,.record{background:linear-gradient(100deg,#06143F 0%,#0D1F5D 58%,#133084 100%) !important}
.footer{background:linear-gradient(128deg,#06143F 0%,#0D1F5D 100%) !important}
.engine--navy{background:linear-gradient(130deg,#133084 0%,#0D1F5D 66%,#06143F 100%) !important}
.engine--ink{background:linear-gradient(130deg,#0D1F5D 0%,#06143F 62%,#030B24 100%) !important}
.closing{background:linear-gradient(104deg,#06143F 0%,#0D1F5D 22%,#133084 48%,#123FA8 76%,#2E6BE0 100%) !important}
.joinviz .fn{background:var(--midnight) !important}

/* tiles step through the blues */
.pillar:nth-child(1),.movecard:nth-child(1){background:linear-gradient(150deg,rgba(18,63,168,.42),rgba(6,20,63,.30)) !important}
.pillar:nth-child(2),.movecard:nth-child(2){background:linear-gradient(150deg,rgba(19,48,132,.44),rgba(13,31,93,.30)) !important}
.pillar:nth-child(3),.movecard:nth-child(3){background:linear-gradient(150deg,rgba(46,107,224,.34),rgba(19,48,132,.30)) !important}
.pillar,.roomcard,.loopstop,.record__cell,.movecard{border-color:rgba(255,255,255,.16) !important}
.pillar:hover,.roomcard:hover,.loopstop:hover,.record__cell:hover{
  border-color:rgba(147,237,198,.7) !important;
  background:linear-gradient(150deg,rgba(147,237,198,.18),rgba(18,63,168,.22)) !important;
}

/* ---------- mint accent on dark ---------- */
.on-dark .eyebrow,.phero .eyebrow,
.loopstop .hn,.record__cell .n,.movecard .mn,.pillar .pn,
.engine--navy .en,.engine--ink .en,.engine--navy .go,.engine--ink .go,
.matrix td.sub,.loopstrip__back b,.quote span,
.ttable th:first-child,.cmptable thead th:last-child{color:var(--mint) !important}
.loopstop .hn::before,.phero__engines a::before,
.engine--navy .en::before,.engine--ink .en::before{background:var(--mint) !important}
.loopstop::after{border-color:var(--mint) !important}
.quote{border-left-color:var(--mint) !important}
.lum,.phero--land .h1b,.phero--about h1 .lum,.phero--sol h1 .lum{
  background:linear-gradient(98deg,#93EDC6 0%,#BFD8FF 52%,#7FA8FF 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;text-shadow:none !important;
}
.phero h1 .tm{color:var(--mint) !important;-webkit-text-fill-color:var(--mint) !important}

/* ---------- light surfaces ---------- */
.joins,.rules,.moves,.deliver,.enginesec,.own{background:var(--soft-white) !important}
.friction,.tests,.shapes,.faq,.outcome,.where,.answerband,body{background:#FFFFFF !important}
.fcard,.testcard,.shapecard,.delcard,.joincard,.engine--light,.route,.ttable{
  background:#FFFFFF !important;border:1px solid var(--rule) !important;
}
.fcard:hover,.testcard:hover,.shapecard:hover,.delcard:hover,.joincard:hover,.route:hover,.engine--light:hover{
  border-color:var(--cool-grey) !important;box-shadow:0 14px 34px rgba(6,20,63,.10) !important;
}
.header{background:rgba(255,255,255,.94) !important;border-bottom-color:var(--rule) !important}
.answerblock{
  background:linear-gradient(100deg,#F2F8F6 0%,var(--soft-white) 58%,#EEF2FA 100%) !important;
  border:1px solid var(--rule) !important;border-left:5px solid var(--mint-deep) !important;
}
.answerblock strong{color:var(--mint-deep) !important}
.joincard .sym,.dpanel{background:var(--soft-white) !important;border-color:var(--rule) !important}
.ttable td{border-top-color:var(--rule) !important}
.ttable tr:nth-child(even) td{background:var(--soft-white) !important}
.ttable tr:hover td{background:#F2F8F6 !important}
.ttable th{background:var(--midnight) !important}

/* accents on white — deeper mint keeps text legible */
.joincard__id .hn,.joinviz .gap::after,.route .rd,.faq summary::after,.faq summary:hover,
.shapecard .st,.mega .num,.delcard .role,.engine li,.eyebrow{color:var(--mint-deep) !important}
.delcard .role,.engine li,.mega .tag{background:#E8F7F1 !important;color:var(--mint-deep) !important}
.mega a:hover{background:#F2F8F6 !important}
.fcard .fk,.step .sn,.matrixfoot .bandtag{background:var(--mint) !important;color:var(--mint-ink) !important}
.testcard{border-top:3px solid var(--mint) !important}
.pull,.pull2,.moves .verdict,.dpanel{border-left-color:var(--mint-deep) !important}
.delcard li::before,.route::before{background:linear-gradient(135deg,var(--electric),var(--mint)) !important}

/* section + card edges */
.joins::before,.rules::before,.moves::before,.deliver::before,.enginesec::before,.own::before,
.friction::before,.tests::before,.shapes::before{
  background:linear-gradient(90deg,#06143F,#133084 34%,#123FA8 64%,var(--mint) 100%) !important;
}
.fcard::after,.testcard::after,.shapecard::after,.delcard::after,.engine--light::after{
  background:linear-gradient(90deg,#133084,#123FA8 52%,var(--mint) 100%) !important;
}
.progressbar{background:linear-gradient(90deg,#06143F,#133084 38%,#123FA8 70%,var(--mint)) !important}
.spectrum__bar{background:linear-gradient(90deg,#06143F 0%,#0D1F5D 22%,#133084 46%,#123FA8 74%,var(--mint) 100%) !important}
.loopstrip::before,.capline::before,.router-section::before,.record::before{
  background:linear-gradient(90deg,transparent,rgba(147,237,198,.85) 30%,rgba(147,237,198,.85) 70%,transparent) !important;
}
.matrix td.filled{background:linear-gradient(135deg,rgba(18,63,168,.72),rgba(147,237,198,.4)) !important;
  border-color:rgba(147,237,198,.6) !important}

.eyebrow{opacity:1 !important;font-size:12.5px !important;letter-spacing:.16em !important}
/* ---------- buttons + nav ---------- */
.btn--primary{background:var(--mint) !important;color:var(--mint-ink) !important;box-shadow:none !important}
.btn--primary:hover{background:#75E2B4 !important;color:var(--mint-ink) !important}
.closing .btn--primary{background:#fff !important;color:var(--deep-navy) !important}
.closing .btn--primary:hover{background:var(--mint) !important;color:var(--mint-ink) !important}
.btn--ghost{border-color:var(--ink)}
.navlink{color:var(--ink) !important}
.navlink:hover,.navlink[aria-current="page"]{border-bottom-color:var(--mint-deep) !important}
h1,h2,h3,h4{color:var(--ink) !important}
.on-dark h2,.on-dark h3,.phero h1,.closing h2{color:#fff !important}
.lead{color:var(--mute) !important}
.phero .lead,.on-dark .lead{color:rgba(255,255,255,.90) !important}


/* ===================== skin pass 10 ===================== */
/* brighter mint accent */
:root{
  --mint:#5CF0BE;        /* brighter than the swatch, same hue family */
  --mint-bright:#6FFFD0; /* hover / highlight */
  --mint-deep:#0A7A5A;   /* text on white, still AA */
}
.on-dark .eyebrow,.phero .eyebrow,
.loopstop .hn,.record__cell .n,.movecard .mn,.pillar .pn,
.engine--navy .en,.engine--ink .en,.engine--navy .go,.engine--ink .go,
.matrix td.sub,.loopstrip__back b,.quote span,
.ttable th:first-child,.cmptable thead th:last-child{color:var(--mint) !important}
.loopstop .hn::before,.phero__engines a::before,
.engine--navy .en::before,.engine--ink .en::before{background:var(--mint) !important}
.loopstop::after,.quote{border-color:var(--mint) !important}
.quote{border-left-color:var(--mint) !important}
.lum,.phero--land .h1b,.phero--about h1 .lum,.phero--sol h1 .lum{
  background:linear-gradient(98deg,#6FFFD0 0%,#A9E6FF 52%,#7FB4FF 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
.phero h1 .tm{color:var(--mint) !important;-webkit-text-fill-color:var(--mint) !important}
.pillar:hover,.roomcard:hover,.loopstop:hover,.record__cell:hover{
  border-color:rgba(92,240,190,.85) !important;
  background:linear-gradient(150deg,rgba(92,240,190,.20),rgba(18,63,168,.22)) !important;
}
.btn--primary{background:var(--mint) !important;color:#06143F !important}
.btn--primary:hover{background:var(--mint-bright) !important;color:#06143F !important}
.closing .btn--primary:hover{background:var(--mint) !important;color:#06143F !important}
.fcard .fk,.step .sn,.matrixfoot .bandtag{background:var(--mint) !important;color:#06143F !important}
.testcard{border-top:3px solid var(--mint) !important}
.joins::before,.rules::before,.moves::before,.deliver::before,.enginesec::before,.own::before,
.friction::before,.tests::before,.shapes::before{
  background:linear-gradient(90deg,#06143F,#133084 34%,#123FA8 62%,var(--mint) 100%) !important;
}
.fcard::after,.testcard::after,.shapecard::after,.delcard::after,.engine--light::after{
  background:linear-gradient(90deg,#133084,#123FA8 50%,var(--mint) 100%) !important;
}
.progressbar{background:linear-gradient(90deg,#06143F,#133084 36%,#123FA8 68%,var(--mint)) !important}
.spectrum__bar{background:linear-gradient(90deg,#06143F 0%,#0D1F5D 20%,#133084 44%,#123FA8 72%,var(--mint) 100%) !important}
.loopstrip::before,.capline::before,.router-section::before,.record::before{
  background:linear-gradient(90deg,transparent,rgba(92,240,190,.95) 30%,rgba(92,240,190,.95) 70%,transparent) !important;
}
.matrix td.filled{background:linear-gradient(135deg,rgba(18,63,168,.7),rgba(92,240,190,.45)) !important;
  border-color:rgba(92,240,190,.7) !important}
.delcard li::before,.route::before{background:linear-gradient(135deg,#123FA8,var(--mint)) !important}
.navlink:hover,.navlink[aria-current="page"]{border-bottom-color:var(--mint-deep) !important}
.delcard .role,.engine li,.mega .tag{background:#E4FBF3 !important;color:var(--mint-deep) !important}


/* ===================== skin pass 11 ===================== */
/* ============ FLAT MINT — saturated, no glow, no gradient in the type ============ */
:root{
  --mint:#14F5A6;         /* flat spring mint, from the swatch */
  --mint-hover:#00E894;
  --mint-deep:#0B7A56;    /* text on white, AA */
}

/* kill every specific text-shadow that survived the blanket reset */
.eyebrow,.phero .eyebrow,.on-dark .eyebrow,
.loopstop .hn,.record__cell .n,.movecard .mn,.pillar .pn,.joincard__id .hn,
.engine .en,.engine .go,.matrix td.sub,.loopstrip__back b,.quote span,
.lum,.phero--land .h1b,.phero h1,.phero h1 *,.on-dark h2,.on-dark h3,.closing h2,.closing p,
.phero .lead,.stat .n,.record__cell .l,.btn,.btn--primary{
  text-shadow:none !important;filter:none !important;
}
.loopstop .hn::before,.phero__engines a::before,.engine .en::before,.tag::after{box-shadow:none !important}

.phero__meta,.phero__crumb,.phero__crumb a,.phero__meta b{text-shadow:none !important;filter:none !important}
/* headline accent: one flat colour, no gradient fill */
.lum,.phero--land .h1b,.phero--about h1 .lum,.phero--sol h1 .lum,.phero h1 .tm{
  background:none !important;-webkit-background-clip:initial !important;background-clip:initial !important;
  color:var(--mint) !important;-webkit-text-fill-color:var(--mint) !important;
}

/* accents on dark */
.on-dark .eyebrow,.phero .eyebrow,
.loopstop .hn,.record__cell .n,.movecard .mn,.pillar .pn,
.engine--navy .en,.engine--ink .en,.engine--navy .go,.engine--ink .go,
.matrix td.sub,.loopstrip__back b,.quote span,
.ttable th:first-child,.cmptable thead th:last-child{color:var(--mint) !important}
.loopstop .hn::before,.phero__engines a::before,
.engine--navy .en::before,.engine--ink .en::before{background:var(--mint) !important}
.loopstop::after{border-color:var(--mint) !important}
.quote{border-left-color:var(--mint) !important}
.pillar:hover,.roomcard:hover,.loopstop:hover,.record__cell:hover{
  border-color:var(--mint) !important;
  background:rgba(20,245,166,.10) !important;
}

/* fills */
.btn--primary{background:var(--mint) !important;color:#06143F !important}
.btn--primary:hover{background:var(--mint-hover) !important;color:#06143F !important}
.closing .btn--primary:hover{background:var(--mint) !important;color:#06143F !important}
.fcard .fk,.step .sn,.matrixfoot .bandtag{background:var(--mint) !important;color:#06143F !important}
.testcard{border-top:3px solid var(--mint) !important}
.matrix td.filled{background:rgba(20,245,166,.28) !important;border-color:var(--mint) !important}

/* rules and edges: flat two-stop, blue to mint */
.joins::before,.rules::before,.moves::before,.deliver::before,.enginesec::before,.own::before,
.friction::before,.tests::before,.shapes::before{
  background:linear-gradient(90deg,#123FA8 0%,#123FA8 55%,var(--mint) 100%) !important;
}
.fcard::after,.testcard::after,.shapecard::after,.delcard::after,.engine--light::after{
  background:linear-gradient(90deg,#123FA8 0%,#123FA8 50%,var(--mint) 100%) !important;
}
.progressbar{background:linear-gradient(90deg,#123FA8 0%,#123FA8 60%,var(--mint) 100%) !important}
.spectrum__bar{background:linear-gradient(90deg,#06143F 0%,#133084 40%,#123FA8 70%,var(--mint) 100%) !important}
.loopstrip::before,.capline::before,.router-section::before,.record::before{
  background:var(--mint) !important;opacity:.8;
}
.delcard li::before,.route::before{background:var(--mint) !important}

/* on white */
.joincard__id .hn,.joinviz .gap::after,.route .rd,.faq summary::after,.faq summary:hover,
.shapecard .st,.mega .num,.eyebrow{color:var(--mint-deep) !important}
.delcard .role,.engine li,.mega .tag{background:#DFFCF1 !important;color:var(--mint-deep) !important}
.answerblock{border-left-color:var(--mint) !important}
.pull,.pull2,.moves .verdict,.dpanel{border-left-color:var(--mint) !important}
.navlink:hover,.navlink[aria-current="page"]{border-bottom-color:var(--mint) !important}


/* ===================== skin pass 12 ===================== */
/* ============ SPACING + MODERN PASS ============ */

/* section rhythm: tighter, consistent */
section{padding:clamp(56px,7vw,96px) 0 !important}
.phero{padding:clamp(64px,8vw,104px) 0 0 !important}
.phero--sol,.phero--about{padding-bottom:clamp(48px,6vw,72px) !important}
.answerband{padding:0 !important}
.closing{padding:clamp(56px,7vw,88px) 0 !important}
.footer{padding:48px 0 28px !important}
.footer__base{margin-top:36px !important;padding-top:20px !important}

/* type: tighter leading and tracking, bigger hierarchy jumps */
h1{font-size:clamp(40px,5.6vw,68px) !important;line-height:.98 !important;letter-spacing:-.04em !important}
h2{font-size:clamp(30px,3.8vw,50px) !important;line-height:1.02 !important;letter-spacing:-.035em !important;margin-bottom:14px}
h3{letter-spacing:-.025em !important;line-height:1.12 !important}
.lead{font-size:clamp(17px,1.5vw,20px) !important;line-height:1.5 !important;margin-top:18px !important}
.phero .lead{margin-top:20px !important;max-width:50ch !important}
.eyebrow{margin-bottom:12px !important;font-size:12px !important}
body{line-height:1.55 !important}
p{line-height:1.55}

/* hero internals */
.phero__crumb{margin-bottom:18px !important;font-size:13px !important}
.phero__ctas{margin-top:26px !important;gap:10px !important}
.phero__meta{margin-top:20px !important;gap:20px !important}
.phero__engines{margin-top:24px !important}
.loopstrip,.record{margin-top:clamp(36px,5vw,60px) !important}
.loopstrip__inner,.record__inner{padding-top:20px !important;gap:10px !important}
.loopstrip__back{padding-top:12px !important;padding-bottom:18px !important}

/* cards: tighter padding, smaller radius, thinner borders */
.fcard,.testcard,.shapecard,.delcard,.joincard,.engine,.route,.pillar,.roomcard,.loopstop,.record__cell,.movecard,.answerblock,.dpanel{
  border-radius:10px !important;
}
.fcard,.testcard,.shapecard,.delcard,.pillar,.roomcard{padding:22px 22px 24px !important}
.loopstop,.record__cell{padding:18px 18px 20px !important}
.engine{padding:clamp(20px,2.6vw,28px) !important;gap:clamp(16px,2.4vw,30px) !important}
.route{padding:16px 20px !important}
.answerblock{padding:20px 24px !important;font-size:15.5px !important}
.dpanel{padding:18px 22px !important}
.frictiongrid,.pillargrid,.delgrid,.testgrid,.shapegrid,.movegrid,.roomgrid{gap:14px !important;margin-top:32px !important}
.engines,.router{gap:12px !important;margin-top:32px !important}
.joincard{margin-top:12px !important;padding:22px 24px !important;gap:22px !important}
.joins__head{margin-bottom:20px !important}
.steps{margin-top:32px !important}
.step{padding-bottom:22px !important;gap:18px !important}
.quotes{margin-top:32px !important;gap:12px !important}
.friction .kicker,.pull,.pull2{margin-top:26px !important}

/* smaller copy inside cards for density */
.fcard p,.pillar .pa,.roomcard p,.delcard .get,.engine p,.joincard p,.step p{font-size:14px !important;line-height:1.5 !important}
.fcard h3,.pillar h3,.roomcard h3,.delcard h3,.engine h3{font-size:18px !important}
.pillar .pv,.delcard .best,.movecard .mf{margin-top:12px !important;padding-top:10px !important;font-size:13px !important}
.loopstop .hl{font-size:16px !important;margin-top:8px !important}
.loopstop .hq{font-size:12.5px !important;margin-top:6px !important}

/* buttons: sleeker */
.btn{padding:12px 22px !important;font-size:15px !important;border-radius:8px !important;gap:8px !important}
.header__cta .btn{padding:9px 18px !important;font-size:14px !important}
.btn--ghost{border-width:1px !important}

/* header */
.header__inner{height:68px !important}
.navlink{font-size:14.5px !important}

/* tables + faq */
.ttable{margin-top:26px !important}
.ttable td,.ttable th{padding:12px 16px !important}
.cmpwrap{margin-top:30px !important}
.cmptable td{padding:12px !important}
.faq summary{padding:16px 0 !important;font-size:17px !important}
.faq details p{padding-bottom:16px !important;font-size:15px !important}

/* mobile keeps breathing room where it needs it */
@media(max-width:760px){
  section{padding:48px 0 !important}
  h1{font-size:clamp(34px,9vw,44px) !important}
}


/* ===================== skin pass 13 ===================== */
.engine--navy h3,.engine--ink h3,.pillar h3,.roomcard h3,.movecard h3,.loopstop .hl,
.on-dark h3,.cmp h3,.matrix-section h3,.record__cell .l{color:#fff !important}
.engine--navy p,.engine--ink p,.pillar .pa,.roomcard p{color:rgba(255,255,255,.86) !important}


/* ===================== skin pass 14 ===================== */
/* ============ GRADIENT + MOTION PASS ============ */
/* the gradient reads as a direction: from deep navy (the problem) toward electric and mint (the fix), always left to right */

/* --- heroes: wider ramp, slow drift --- */
.phero,.phero--sol,.phero--about,.phero--land,.phero:has(.phero__photo){
  background:linear-gradient(100deg,#06143F 0%,#0D1F5D 22%,#133084 44%,#123FA8 66%,#1A55D6 82%,#123FA8 100%) !important;
  background-size:200% 100% !important;
  animation:heroDrift 22s ease-in-out infinite alternate !important;
}
.phero:not(:has(.phero__photo))::after,.phero--sol::after{
  background:linear-gradient(100deg,#06143F 0%,#0D1F5D 20%,#133084 40%,#123FA8 60%,#1A55D6 78%,#2A6BE8 100%) !important;
  background-size:200% 100% !important;
  animation:heroDrift 22s ease-in-out infinite alternate !important;
}
@keyframes heroDrift{from{background-position:0% 50%}to{background-position:100% 50%}}

/* --- the handoff line: a mint pulse travelling left to right along the hero base --- */
.phero:not(:has(.phero__photo))::before,.phero--sol::before{
  top:auto !important;bottom:0 !important;height:2px !important;opacity:1 !important;
  background:linear-gradient(90deg,transparent 0%,transparent 35%,var(--mint) 50%,transparent 65%,transparent 100%) !important;
  background-size:60% 100% !important;background-repeat:no-repeat !important;
  animation:handoff 4.8s cubic-bezier(.65,0,.35,1) infinite !important;
}
@keyframes handoff{0%{background-position:-60% 0}100%{background-position:160% 0}}
/* photo heroes get the same travelling line via a dedicated element */
.handoff-line{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,transparent 35%,var(--mint) 50%,transparent 65%,transparent 100%);
  background-size:60% 100%;background-repeat:no-repeat;animation:handoff 4.8s cubic-bezier(.65,0,.35,1) infinite}

/* --- dark sections: directional ramp with slow drift --- */
.pillars,.room,.cmp,.matrix-section,.closing{
  background:linear-gradient(100deg,#06143F 0%,#0D1F5D 26%,#133084 50%,#123FA8 74%,#1A55D6 100%) !important;
  background-size:180% 100% !important;
  animation:heroDrift 26s ease-in-out infinite alternate !important;
}
.closing{background:linear-gradient(100deg,#0D1F5D 0%,#133084 30%,#123FA8 58%,#1A55D6 80%,#2A6BE8 100%) !important;
  background-size:180% 100% !important}
.pillars::before,.room::after,.cmp::before,.matrix-section::before{background:none !important}
.loopstrip,.record{background:linear-gradient(100deg,#06143F 0%,#0D1F5D 60%,#133084 100%) !important}
.engine--navy{background:linear-gradient(100deg,#133084 0%,#123FA8 55%,#0D1F5D 100%) !important;background-size:180% 100% !important;animation:heroDrift 18s ease-in-out infinite alternate !important}
.engine--ink{background:linear-gradient(100deg,#0D1F5D 0%,#06143F 60%,#133084 100%) !important;background-size:180% 100% !important;animation:heroDrift 18s ease-in-out infinite alternate-reverse !important}

/* --- section rules and card edges animate the same direction --- */
.joins::before,.rules::before,.moves::before,.deliver::before,.enginesec::before,.own::before,
.friction::before,.tests::before,.shapes::before{
  background:linear-gradient(90deg,#06143F 0%,#123FA8 40%,#123FA8 60%,var(--mint) 100%) !important;
  background-size:200% 100% !important;animation:ruleFlow 8s linear infinite !important;
}
@keyframes ruleFlow{from{background-position:100% 0}to{background-position:0% 0}}
.fcard::after,.testcard::after,.shapecard::after,.delcard::after,.engine--light::after{
  background:linear-gradient(90deg,#123FA8 0%,#123FA8 50%,var(--mint) 100%) !important;
  transform:scaleX(.35);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.fcard:hover::after,.testcard:hover::after,.shapecard:hover::after,.delcard:hover::after,.engine--light:hover::after{transform:scaleX(1)}

/* --- loop strip pulse in mint, faster --- */
.loopstrip__back .line::after{background:linear-gradient(90deg,transparent,var(--mint),transparent) !important;animation-duration:2.6s !important}
.loopstrip__back .line{background:repeating-linear-gradient(90deg,rgba(20,245,166,.5) 0 6px,transparent 6px 14px) !important}

/* --- hero entrance: lines rise in sequence --- */
.phero .phero__crumb,.phero .eyebrow,.phero h1,.phero .lead,.phero .phero__ctas,.phero .phero__meta,.phero .phero__engines{
  opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards;
}
.phero .phero__crumb{animation-delay:.05s}.phero .eyebrow{animation-delay:.15s}.phero h1{animation-delay:.25s}
.phero .lead{animation-delay:.4s}.phero .phero__ctas{animation-delay:.55s}.phero .phero__meta,.phero .phero__engines{animation-delay:.7s}
@keyframes rise{to{opacity:1;transform:none}}
.phero__photo{opacity:0;transform:translateX(24px) scale(1.02);animation:photoIn 1.2s cubic-bezier(.2,.8,.2,1) .2s forwards}
@keyframes photoIn{to{opacity:1;transform:none}}
.phero__photo img{will-change:transform}

/* --- cards: staggered reveal + lift --- */
.reveal{transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1) !important;transform:translateY(22px)}
.reveal.in{transform:none}
.fcard,.testcard,.shapecard,.delcard,.pillar,.roomcard,.route,.engine,.joincard,.loopstop,.record__cell{
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s,background .35s !important;
}
.fcard:hover,.testcard:hover,.shapecard:hover,.delcard:hover,.route:hover,.engine:hover,.joincard:hover{transform:translateY(-4px) !important}
.pillar:hover,.roomcard:hover,.loopstop:hover,.record__cell:hover{transform:translateY(-4px) !important}

/* --- buttons --- */
.btn{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s !important}
.btn:hover{transform:translateY(-2px)}
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.btn--primary:hover::after{transform:translateX(120%)}

/* --- step timeline draws itself --- */
.step::before{background:linear-gradient(180deg,var(--mint),#123FA8) !important;transform:scaleY(0);transform-origin:top;transition:transform .8s cubic-bezier(.2,.8,.2,1) .2s}
.step.in::before{transform:scaleY(1)}
.step .sn{transform:scale(.6);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.step.in .sn{transform:scale(1)}

/* --- matrix cells fill in sequence --- */
.matrix td.filled{transition:background .5s,border-color .5s,transform .4s !important}

/* --- reduced motion: everything settles instantly --- */
@media(prefers-reduced-motion:reduce){
  .phero,.phero::after,.phero--sol::after,.pillars,.room,.cmp,.matrix-section,.closing,.engine--navy,.engine--ink,
  .joins::before,.rules::before,.moves::before,.deliver::before,.enginesec::before,.own::before,.friction::before,.tests::before,.shapes::before,
  .phero::before,.phero--sol::before,.handoff-line,.loopstrip__back .line::after{animation:none !important}
  .phero *,.phero__photo{opacity:1 !important;transform:none !important;animation:none !important}
  .reveal{transform:none !important}
}


/* ===================== skin pass 15 ===================== */
/* ============ HANDOFF TRACK — the strip as a route, not a row of boxes ============ */
.loopstrip__scroll{padding-bottom:0 !important}
.loopstrip__inner{
  position:relative;display:grid;gap:0 !important;padding:30px clamp(20px,5vw,80px) 8px !important;
}
/* the track itself */
.loopstrip__inner::before{
  content:"";position:absolute;left:clamp(20px,5vw,80px);right:clamp(20px,5vw,80px);top:44px;height:2px;
  background:rgba(255,255,255,.14);
}
/* a mint carrier moving along the track, left to right: the handoff */
.loopstrip__inner::after{
  content:"";position:absolute;top:40px;left:clamp(20px,5vw,80px);width:10px;height:10px;border-radius:50%;
  background:var(--mint);animation:carrier 6s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes carrier{0%{left:clamp(20px,5vw,80px);opacity:0}6%{opacity:1}94%{opacity:1}100%{left:calc(100% - clamp(20px,5vw,80px) - 10px);opacity:0}}

/* stations */
.loopstop{
  background:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  padding:0 26px 6px 0 !important;position:relative;
}
.loopstop::after{
  content:"" !important;position:absolute;top:8px;left:0;width:8px;height:8px;border-radius:50%;
  background:#06143F;border:2px solid var(--mint);transform:none !important;right:auto !important;filter:none !important;
}
.loopstop:hover{transform:none !important;background:none !important}
.loopstop .hn{
  display:inline-flex;align-items:center;gap:0;margin-left:20px;padding:3px 10px;border-radius:99px;
  background:#06143F;border:1px solid rgba(20,245,166,.55);color:var(--mint) !important;
  font-size:11.5px;letter-spacing:.14em;position:relative;z-index:1;
}
.loopstop .hn::before{display:none !important}
.loopstop .hl{margin-top:18px !important;font-size:17px !important;line-height:1.15 !important;letter-spacing:-.02em;color:#fff !important}
.loopstop .hl .arr{color:var(--mint);font-weight:400;margin:0 .18em}
.loopstop .hq{margin-top:6px !important;font-size:13px !important;line-height:1.45 !important;color:rgba(255,255,255,.66) !important;max-width:24ch}
.loopstop:hover .hl{color:var(--mint) !important}
.loopstop:hover .hl .arr{color:#fff}
.loopstop .hl{transition:color .25s}

/* the closing line under the track */
.loopstrip__back{padding:14px clamp(20px,5vw,80px) 22px !important;min-width:0 !important}
.loopstrip__back .line{height:1px !important;background:rgba(255,255,255,.14) !important}
.loopstrip__back .line::after{display:none}

/* mobile: stations stack, track runs vertically */
@media(max-width:760px){
  .loopstrip__inner{grid-template-columns:1fr !important;min-width:0 !important;padding-top:20px !important;gap:18px !important}
  .loopstrip__inner::before{left:calc(clamp(20px,5vw,80px) + 3px);right:auto;top:20px;bottom:20px;width:2px;height:auto}
  .loopstrip__inner::after{display:none}
  .loopstop{padding:0 0 0 24px !important}
  .loopstop::after{top:6px;left:0}
  .loopstop .hn{margin-left:0}
  .loopstop .hl{margin-top:10px !important}
  .loopstrip__back{min-width:0 !important}
}


/* ===================== skin pass 16 ===================== */
/* ============ MOOD BOARD GRADIENT — blue field resolving into cyan-mint light ============ */
:root{--beam:#7CF5D8;--beam-2:#2E8BFF}

/* photo-free heroes: the beam enters from the right edge, like the mood board tiles */
.phero:not(:has(.phero__photo)),.phero--sol,.phero--about{
  background:linear-gradient(112deg,#06143F 0%,#0D1F5D 26%,#133084 48%,#123FA8 66%,#2E8BFF 84%,#7CF5D8 100%) !important;
  background-size:170% 100% !important;animation:heroDrift 24s ease-in-out infinite alternate !important;
}
.phero:not(:has(.phero__photo))::after,.phero--sol::after{
  background:
    linear-gradient(112deg,#06143F 0%,#0D1F5D 24%,#133084 46%,#123FA8 64%,#2E8BFF 82%,#7CF5D8 100%),
    radial-gradient(60% 90% at 100% 100%,rgba(124,245,216,.55),transparent 62%) !important;
  background-size:170% 100%,100% 100% !important;
  animation:heroDrift 24s ease-in-out infinite alternate !important;
}
/* homepage photo hero: same field, beam kept behind the subject's edge */
.phero:has(.phero__photo){
  background:linear-gradient(112deg,#06143F 0%,#0D1F5D 30%,#133084 56%,#123FA8 78%,#2E8BFF 100%) !important;
  background-size:170% 100% !important;
}

/* dark sections: the same field, beam on the right */
.pillars,.room,.cmp,.matrix-section{
  background:linear-gradient(112deg,#06143F 0%,#0D1F5D 28%,#133084 52%,#123FA8 72%,#2E8BFF 92%,#5FD8E8 100%) !important;
  background-size:170% 100% !important;
}
/* closing: the full beam, the brightest moment */
.closing{
  background:linear-gradient(105deg,#06143F 0%,#0D1F5D 18%,#133084 38%,#123FA8 56%,#2E8BFF 74%,#7CF5D8 100%) !important;
  background-size:160% 100% !important;
}
.closing h2,.closing p,.closing .alt{color:#fff !important}
.engine--navy{background:linear-gradient(112deg,#133084 0%,#123FA8 48%,#2E8BFF 86%,#7CF5D8 100%) !important;background-size:180% 100% !important}
.engine--ink{background:linear-gradient(112deg,#0D1F5D 0%,#06143F 50%,#133084 100%) !important;background-size:180% 100% !important}
.footer{background:linear-gradient(112deg,#06143F 0%,#0D1F5D 100%) !important}

/* white text sits safely: copy is left, the beam is right */
.phero h1,.phero .lead,.on-dark h2,.on-dark h3{color:#fff !important}

/* ============ JOIN RAIL — the five handoffs as stops on one line ============ */
.loopstrip{background:linear-gradient(112deg,#06143F 0%,#0D1F5D 60%,#133084 100%) !important;margin-top:clamp(40px,5vw,64px) !important}
.loopstrip::before{display:none !important}
.loopstrip__inner{position:relative;gap:0 !important;padding:44px clamp(20px,5vw,80px) 8px !important}
/* the rail */
.loopstrip__inner::before{
  content:"";position:absolute;left:clamp(20px,5vw,80px);right:clamp(20px,5vw,80px);top:44px;height:2px;
  background:rgba(255,255,255,.16);
}
/* the pulse travelling along the rail, left to right */
.loopstrip__inner::after{
  content:"";position:absolute;left:clamp(20px,5vw,80px);right:clamp(20px,5vw,80px);top:44px;height:2px;
  background:linear-gradient(90deg,transparent 0%,transparent 35%,var(--mint) 50%,transparent 65%,transparent 100%);
  background-size:40% 100%;background-repeat:no-repeat;animation:handoff 4.8s cubic-bezier(.65,0,.35,1) infinite;
}
.loopstop{
  position:relative;background:none !important;border:0 !important;border-radius:0 !important;
  padding:26px 22px 18px 0 !important;margin-right:22px;box-shadow:none !important;
}
.loopstop:last-child{margin-right:0}
.loopstop::before{content:none !important}
/* the stop: a mint node sitting on the rail */
.loopstop::after{
  content:"";position:absolute;left:0;top:-5px;width:12px;height:12px;border-radius:50%;
  background:#06143F;border:2px solid var(--mint);transform:none !important;right:auto !important;
  transition:background .3s,transform .3s;
}
.loopstop:hover::after{background:var(--mint);transform:scale(1.25) !important}
.loopstop:hover{background:none !important;transform:none !important;border:0 !important}
.loopstop .hn{display:block;font-size:12px !important;letter-spacing:.16em;color:var(--mint) !important}
.loopstop .hn::before{display:none !important}
.loopstop .hl{font-size:17px !important;margin-top:8px !important;color:#fff !important;letter-spacing:-.02em}
.loopstop .hq{font-size:13px !important;color:rgba(255,255,255,.66) !important;margin-top:6px !important;max-width:24ch}
.loopstrip__back{padding:18px clamp(20px,5vw,80px) 26px !important;min-width:0 !important}
.loopstrip__back .line{display:none}
.loopstrip__back{justify-content:space-between}
.loopstrip__back span:first-child::before{content:"";display:inline-block;width:18px;height:2px;background:var(--mint);margin-right:10px;vertical-align:middle}
.loopstrip--five .loopstrip__inner{grid-template-columns:repeat(5,1fr) !important;min-width:1000px}
.loopstrip__scroll{overflow-x:auto}
@media(max-width:760px){
  .loopstrip__inner{grid-template-columns:1fr !important;min-width:0 !important;padding-left:clamp(20px,5vw,80px) !important}
  .loopstrip__inner::before,.loopstrip__inner::after{top:0;bottom:0;height:auto;width:2px;left:clamp(20px,5vw,80px);right:auto}
  .loopstrip__inner::after{background:linear-gradient(180deg,transparent 0%,transparent 35%,var(--mint) 50%,transparent 65%,transparent 100%);background-size:100% 40%;animation:handoffV 4.8s cubic-bezier(.65,0,.35,1) infinite}
  .loopstop{padding:14px 0 18px 26px !important;margin-right:0}
  .loopstop::after{left:-5px;top:16px}
}
@keyframes handoffV{0%{background-position:0 -60%}100%{background-position:0 160%}}


/* ===================== skin pass 17 ===================== */
.loopstop .hn{border:0 !important;padding:0 !important;background:none !important;display:block !important;width:auto !important;border-radius:0 !important;box-shadow:none !important}
.loopstrip--five .loopstrip__back{padding-bottom:78px !important}
.loopstrip__back{padding-bottom:54px !important}
.phero:not(:has(.phero__photo)),.phero--sol,.phero--about,.phero:not(:has(.phero__photo))::after,.phero--sol::after{background-size:140% 100%,100% 100% !important}
.pillars,.room,.cmp,.matrix-section,.closing{background-size:140% 100% !important;animation:heroDrift 26s ease-in-out infinite alternate !important}


/* ===================== skin pass 18 ===================== */
.loopstop:last-child::after{display:block !important}.loopstop .hn{margin-left:0 !important;text-indent:0 !important}


/* ===================== skin pass 19 ===================== */
/* ============ SIGNATURE MOTION GRAPHIC: THE LEAK ============ */
.leakviz{position:relative;width:100%;max-width:540px;margin-left:auto}
.leakviz svg{width:100%;height:auto;overflow:visible}
.lv-rail{stroke:rgba(255,255,255,.16);stroke-width:2;fill:none}
.lv-flow{stroke:url(#lvgrad);stroke-width:3;fill:none;stroke-linecap:round;
  stroke-dasharray:180 1400;animation:lvflow 6s cubic-bezier(.65,0,.35,1) infinite}
@keyframes lvflow{0%{stroke-dashoffset:1400}100%{stroke-dashoffset:-180}}
.lv-node{fill:#06143F;stroke:var(--mint);stroke-width:2.5}
.lv-node.n1{animation:lvnode 6s linear infinite .15s}
.lv-node.n2{animation:lvnode 6s linear infinite 1.1s}
.lv-node.n3{animation:lvnode 6s linear infinite 2.1s}
.lv-node.n4{animation:lvnode 6s linear infinite 3.1s}
.lv-node.n5{animation:lvnode 6s linear infinite 4.1s}
@keyframes lvnode{0%,6%{fill:#06143F}2%{fill:var(--mint)}12%,100%{fill:#06143F}}
.lv-label{fill:rgba(255,255,255,.78);font-family:var(--body);font-size:13px;font-weight:600}
.lv-sub{fill:rgba(255,255,255,.42);font-family:var(--body);font-size:11px;font-weight:600}
.lv-cap{fill:var(--mint);font-family:var(--display);font-size:11.5px;font-weight:800;letter-spacing:.16em}
/* the drip: value escaping at the unmanaged joins H4 and H5 */
.lv-drip{fill:var(--mint)}
.lv-drip.d1{animation:lvdrip 6s ease-in infinite 3.3s}
.lv-drip.d2{animation:lvdrip 6s ease-in infinite 4.3s}
@keyframes lvdrip{0%{opacity:0;transform:translateY(0)}6%{opacity:.95}30%{opacity:0;transform:translateY(40px)}100%{opacity:0;transform:translateY(40px)}}
@media(max-width:900px){.leakviz{max-width:460px;margin:30px auto 0}}
@media(prefers-reduced-motion:reduce){.lv-flow,.lv-node,.lv-drip{animation:none !important}.lv-drip{opacity:0}.lv-flow{stroke-dasharray:none}}

/* hero split for pages that carry the graphic */
.phero--split .container{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,4vw,56px);align-items:center}
@media(max-width:900px){.phero--split .container{grid-template-columns:1fr}}


/* ===================== skin pass 20 ===================== */
/* ---- furniture for the wider page set ---- */
.prose h2{margin-top:34px}
.prose h3{margin-top:24px}
.prose ul,.prose ol{margin:12px 0 0;padding-left:22px}
.prose li{margin-bottom:8px;font-size:15.5px;line-height:1.6;color:#22303F}
.legal .updated{font-size:13.5px;color:var(--mute);margin-top:8px}
.legal h2{font-size:clamp(24px,2.6vw,32px) !important}
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
@media(max-width:900px){.cardgrid{grid-template-columns:1fr}}
.postcard{display:block;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:22px;color:var(--ink);position:relative;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .35s}
.postcard::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#123FA8,#14F5A6);transform:scaleX(.35);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.postcard:hover{text-decoration:none;transform:translateY(-4px);border-color:#C4D3E6;box-shadow:0 14px 34px rgba(6,20,63,.10)}
.postcard:hover::after{transform:scaleX(1)}
.postcard .meta{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mint-deep)}
.postcard h3{font-size:19px;margin:10px 0 8px}
.postcard p{font-size:14px;color:#2A3340;line-height:1.55}
.postcard .rt{display:block;margin-top:14px;font-size:12.5px;color:var(--mute)}
/* forms */
.form{display:grid;gap:14px;margin-top:26px;max-width:560px}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--ink)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:15px;color:var(--ink);background:#fff;
  border:1px solid var(--rule);border-radius:8px;padding:12px 14px;width:100%;
  transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 3px rgba(20,245,166,.2)}
.field textarea{min-height:130px;resize:vertical}
.formnote{font-size:13px;color:var(--mute)}
/* speaking */
.talkcard{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:24px;position:relative;overflow:hidden}
.talkcard::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#123FA8,#14F5A6)}
.talkcard .kind{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--mint-deep)}
.talkcard h3{font-size:19px;margin:10px 0 8px}
.talkcard p{font-size:14px;color:#2A3340;line-height:1.55}
.talkcard .dur{margin-top:14px;font-size:12.5px;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.chips span{font-size:13px;font-weight:700;color:var(--ink);background:var(--soft-white);border:1px solid var(--rule);border-radius:99px;padding:7px 15px}
/* assessment */
.qcard{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:22px 24px;margin-top:12px}
.qcard .qn{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--mint-deep)}
.qcard h3{font-size:17px;margin:8px 0 14px}
.scale{display:flex;gap:8px;flex-wrap:wrap}
.scale label{flex:1;min-width:92px;text-align:center;border:1px solid var(--rule);border-radius:8px;padding:10px 6px;font-size:13px;font-weight:600;color:#2A3340;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.scale label:hover{border-color:var(--mint);background:#F2FCF8}
.scale input{position:absolute;opacity:0;width:0;height:0}
.scale input:focus-visible + label{outline:2px solid var(--mint);outline-offset:2px}
/* util pages */
.util{min-height:52vh;display:flex;align-items:center}
.util h1{font-size:clamp(64px,12vw,140px);line-height:.88}
.linklist{display:grid;gap:10px;margin-top:26px;max-width:640px}
.linklist a{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:15px 20px;color:var(--ink);font-weight:600;font-size:15.5px;transition:border-color .25s,transform .25s}
.linklist a:hover{text-decoration:none;border-color:var(--mint);transform:translateX(3px)}
.linklist a span{font-size:13px;color:var(--mute);font-weight:500}
/* sitemap */
.smgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:32px}
@media(max-width:900px){.smgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.smgrid{grid-template-columns:1fr}}
.smgrid h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:12px}
.smgrid li{list-style:none;margin-bottom:9px}
.smgrid a{font-size:15px;color:var(--ink)}


/* ===================== site furniture added at export ===================== */
.skiplink{position:absolute;left:-999px;top:8px;z-index:300;background:#06143F;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600}
.skiplink:focus{left:12px;outline:2px solid var(--mint)}
.phero__photo img{filter:none}
.tag{white-space:nowrap}
/* generic content pages */
.pagehead{padding-bottom:clamp(40px,5vw,64px) !important}
.pagehead h1{max-width:18ch}
.twocol{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start}
@media(max-width:900px){.twocol{grid-template-columns:1fr}}
.portrait{border-radius:12px;overflow:hidden;background:#06143F;aspect-ratio:4/5}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:60% 0}
.side{background:var(--soft-white);border:1px solid var(--rule);border-radius:10px;padding:22px 24px}
.side h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:12px}
.side li{list-style:none;padding:9px 0;border-top:1px solid var(--rule);font-size:14.5px;color:#22303F}
.side li:first-child{border-top:0;padding-top:0}
.side li b{display:block;color:var(--ink);font-size:13px}
.seatlist{display:grid;gap:12px;margin-top:28px}
.seat{display:grid;grid-template-columns:110px 1fr;gap:18px;background:#fff;border:1px solid var(--rule);border-radius:10px;padding:18px 20px}
.seat .yr{font-family:var(--display);font-weight:800;font-size:13px;color:var(--mint-deep);letter-spacing:.08em}
.seat h3{font-size:17px}
.seat p{font-size:14px;color:#2A3340;margin-top:6px;line-height:1.55}
@media(max-width:560px){.seat{grid-template-columns:1fr;gap:6px}}
.result{display:none;margin-top:28px;background:#fff;border:1px solid var(--rule);border-radius:12px;padding:26px 28px}
.result.show{display:block}
.result .big{font-family:var(--display);font-weight:800;font-size:clamp(48px,7vw,84px);line-height:1;color:var(--ink)}
.result .big small{font-size:.35em;color:var(--mute)}
.result .band{display:inline-block;margin-top:10px;background:var(--mint);color:#06143F;font-family:var(--display);font-weight:700;padding:7px 16px;border-radius:99px;font-size:14px}
.result .bars{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px;align-items:end;height:120px}
.result .bars div{background:#E4EAF2;border-radius:6px 6px 0 0;position:relative;transition:height .6s cubic-bezier(.2,.8,.2,1)}
.result .bars div.weak{background:var(--mint)}
.result .bars span{position:absolute;bottom:-22px;left:0;right:0;text-align:center;font-size:11.5px;font-weight:700;color:var(--mute)}
.result .verdict{margin-top:40px;font-size:15.5px;line-height:1.6;color:#22303F}
.result .verdict b{color:var(--ink)}
.qgroup{margin-top:34px}
.qgroup h2{font-size:clamp(22px,2.4vw,28px) !important;margin-bottom:4px}
.qgroup .qsub{font-size:14.5px;color:var(--mute)}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.formrow{grid-template-columns:1fr}}
.ok{display:none;margin-top:16px;padding:14px 18px;background:#E4FBF3;border:1px solid var(--mint);border-radius:8px;font-size:14.5px;color:#06143F}
.postbody{max-width:720px}
.postbody h2{margin-top:36px;font-size:clamp(24px,2.6vw,32px) !important}
.postbody p{margin-top:18px;color:#22303F;font-size:16.5px;line-height:1.65}
.postbody .meta{font-size:13px;color:var(--mute);margin-top:12px}
.byline{display:flex;align-items:center;gap:14px;margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.byline img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:60% 10%}
.byline p{font-size:14px;color:#2A3340}
.byline b{display:block;color:var(--ink)}
.presskit{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:28px}
@media(max-width:700px){.presskit{grid-template-columns:1fr}}
.presskit .card{background:#fff;border:1px solid var(--rule);border-radius:10px;padding:22px}
.presskit .card h3{font-size:17px}
.presskit .card p{font-size:14px;color:#2A3340;margin-top:8px;line-height:1.55}
.presskit .card a.btn{margin-top:14px}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.swatches span{display:inline-block;width:44px;height:44px;border-radius:8px;border:1px solid var(--rule)}
.bio{background:var(--soft-white);border:1px solid var(--rule);border-radius:10px;padding:20px 22px;margin-top:14px;font-size:14.5px;line-height:1.6;color:#22303F}
.bio b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint-deep);margin-bottom:6px}
.talkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
@media(max-width:900px){.talkgrid{grid-template-columns:1fr}}
.contactgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:start;margin-top:32px}
@media(max-width:900px){.contactgrid{grid-template-columns:1fr}}
.route .rq{font-style:normal !important}
.engine--ink .en,.engine--ink .go,.engine--navy .en,.engine--navy .go{color:var(--mint) !important}
.scale input:checked + label{background:var(--mint);border-color:var(--mint);color:#06143F}
.qgroup + .qgroup{margin-top:40px}
.result{scroll-margin-top:90px}.result .verdict + .verdict{margin-top:14px}[id]{scroll-margin-top:84px}