/* =====================================================================
   KOGNIFY — shared design system
   Palette, type scale and components lifted from the CFO one-pager.
   ===================================================================== */

:root{
  --amber:#F59E0B;
  --flame:#FF6B35;
  --gold:#edae49;
  --red:#d1495b;
  --cyan:#00798c;
  --blue:#30638e;
  --navy:#003d5b;

  --ink:#062634;
  --muted:#5a7684;
  --muted-2:#4A6560;
  --card:#ffffff;
  --line:#e7ddca;
  --line-2:#d9ceb6;
  --gold-wash:#fdf4e1;
  --cyan-wash:#e3f0f1;
  --navy-wash:#e9eff3;
  --red-wash:#fbe9ec;
  --green:#0a7d43;
  --green-wash:#eafaf0;

  --f:'Raleway',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --px:clamp(22px,6vw,96px);
  --fs:1;

  --t-2xs:  calc(11px   * var(--fs));
  --t-xs:   calc(12px   * var(--fs));
  --t-xs2:  calc(12.5px * var(--fs));
  --t-sm:   calc(13.5px * var(--fs));
  --t-base: calc(14px   * var(--fs));
  --t-md:   calc(15px   * var(--fs));
  --t-lg:   calc(16px   * var(--fs));
  --t-lg2:  calc(16.5px * var(--fs));
  --t-xl:   calc(17px   * var(--fs));
  --t-2xl:  calc(20px   * var(--fs));
  --t-3xl:  calc(26px   * var(--fs));
  --t-stepno:calc(40px  * var(--fs));
  --t-mark: calc(90px   * var(--fs));

  --t-lede:   calc(clamp(15px,1.5vw,18px) * var(--fs));
  --t-intro:  calc(clamp(14px,1.4vw,16px) * var(--fs));
  --t-h2:     calc(clamp(34px,3.2vw,44px) * var(--fs));
  --t-h1:     calc(clamp(44px,5.4vw,66px) * var(--fs));
  --t-cta:    calc(clamp(24px,3.4vw,38px) * var(--fs));
  --t-quote:  calc(clamp(17px,2vw,21px)   * var(--fs));
  --t-stat:   calc(clamp(62px,4vw,118px) * var(--fs));
  --t-metric: calc(clamp(40px,5vw,54px)   * var(--fs));
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f);font-size:var(--t-base);color:var(--ink);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
.page{width:100%;overflow:clip}
em{font-style:italic}
a{color:inherit}

/* ---------- SITE HEADER / NAV ------------------------------- */
#nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);padding:11px var(--px)}
.navbar{display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{height:26px;width:auto;display:block}
.navlinks{display:flex;flex-wrap:wrap;gap:2px;align-items:center;margin-left:auto}
.pill{position:relative;font-size:var(--t-sm);font-weight:600;color:var(--ink);text-decoration:none;
  padding:9px 13px;border:none;background:transparent;white-space:nowrap;transition:color .16s ease}
.pill::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px;border-radius:2px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.22,.9,.3,1.05)}
.pill:hover{color:var(--navy)}
.pill:hover::after{transform:scaleX(1)}
.pill.active{color:var(--navy);font-weight:800}
.pill.active::after{transform:scaleX(1);background:var(--gold)}
.pill.cta{margin-left:10px;font-weight:800;color:var(--navy);background:var(--gold);
  padding:9px 17px;border-radius:9px;transition:transform .14s ease, box-shadow .18s ease, background .18s ease}
.pill.cta::after{display:none}
.pill.cta:hover{transform:translateY(-1px);color:var(--navy);background:#f2b840;box-shadow:0 10px 20px -10px rgba(237,174,73,.7)}
@media(max-width:720px){.navlinks{gap:0}.pill{padding:8px 9px;font-size:var(--t-xs)}.pill.cta{margin-left:6px;padding:8px 13px}}

/* ---------- HERO -------------------------------------------- */
#hero{position:relative;color:#fff;padding:44px var(--px) 56px;
  background:
    radial-gradient(760px 340px at 90% -20%, rgba(237,174,73,.34), transparent 60%),
    linear-gradient(150deg,var(--navy) 0%, #024058 46%, var(--cyan) 100%);}
#hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--gold),var(--red))}
#hero.short{padding:38px var(--px) 44px}
.eyebrow{font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--gold)}
#hero h1{font-size:var(--t-h1);line-height:1.04;font-weight:900;letter-spacing:-.03em;margin-top:8px;max-width:20ch}
#hero.short h1{font-size:calc(clamp(34px,4vw,52px) * var(--fs));max-width:26ch}
#hero h1 .hl{background:linear-gradient(90deg,var(--flame),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
#hero .lede{margin-top:18px;font-size:var(--t-lede);line-height:1.62;color:rgba(255,255,255,.9);max-width:72ch}
#hero .lede b{color:#fff;font-weight:700}
#hero .lede .mk{color:#fff;font-weight:800;background-image:linear-gradient(180deg,transparent 56%,rgba(237,174,73,.55) 56%);padding:0 1px;border-radius:2px}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:800;
  padding:14px 24px;border-radius:999px;text-decoration:none;transition:transform .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--gold);color:var(--navy)}
.btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.32)}

/* ---------- STAT STRIP -------------------------------------- */
.statstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.statstrip.s4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.statstrip,.statstrip.s4{grid-template-columns:1fr 1fr}}
.stat{--stat-px:clamp(12px,1vw,34px);position:relative;overflow:hidden;background:var(--card);padding:16px var(--stat-px);text-align:center;min-width:0;transition:background .3s ease}
.stat::before{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--cyan),var(--navy));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.stat.g::before{background:linear-gradient(90deg,var(--gold),var(--red))}
.stat::after{content:"";position:absolute;right:-46px;top:-46px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 32% 32%,var(--cyan),var(--navy));opacity:.07;transition:transform .3s ease, opacity .3s ease}
.stat.g::after{background:radial-gradient(circle at 32% 32%,var(--gold),var(--red))}
.stat:hover{background:var(--navy-wash)}
.stat.g:hover{background:var(--gold-wash)}
.stat:hover::before{transform:scaleX(1)}
.stat:hover::after{transform:scale(1.4);opacity:.16}
.stat .num{position:relative;z-index:1;font-size:var(--t-stat) !important;font-weight:900;letter-spacing:-.05em;white-space:nowrap;overflow:visible;background:linear-gradient(120deg,var(--cyan),var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat.g .num{background:linear-gradient(120deg,var(--gold),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .lbl{position:relative;z-index:1;font-size:calc(var(--t-base) * 1.15);color:var(--ink);margin-top:18px;font-weight:900;letter-spacing:-.01em}
.stat .sub{position:relative;z-index:1;font-size:var(--t-xs2);color:var(--muted);margin:6px auto 0;line-height:1.45;max-width:34ch}

/* ---------- GENERIC BLOCK ----------------------------------- */
.body{padding:60px var(--px)}
.block + .block{margin-top:64px}
.kicker{font-size:var(--t-xs);font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.h2{font-size:var(--t-h2);font-weight:900;letter-spacing:-.025em;margin-top:10px;max-width:28ch;line-height:1.08;background:linear-gradient(120deg,var(--navy),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.intro{font-size:var(--t-intro);color:#334c57;margin-top:14px;max-width:76ch;margin-bottom:20px}
.intro b{color:var(--ink)}
.subkicker{font-size:var(--t-xs);font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin:22px 0 10px}

/* highlighter */
.mk{font-weight:800;color:var(--navy);background-image:linear-gradient(180deg,transparent 56%,rgba(237,174,73,.5) 56%);padding:0 1px;border-radius:2px}

/* ---------- CARDS ------------------------------------------- */
.cards{display:grid;gap:18px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1080px){.cards.c3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.cards.c2,.cards.c3{grid-template-columns:1fr}}
.card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 28px 52px rgba(0,61,91,.13);border-color:var(--line-2)}
.card::after{content:"";position:absolute;right:-44px;top:-44px;width:132px;height:132px;border-radius:50%;background:var(--cyan);opacity:.07;transition:transform .18s ease}
.card:hover::after{transform:scale(1.25)}
.card .ico{position:relative;z-index:1;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:var(--t-3xl);background:var(--cyan-wash);color:var(--cyan)}
.card h4{position:relative;z-index:1;font-size:var(--t-lg);font-weight:900;margin-top:16px;background:linear-gradient(120deg,var(--cyan),var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}
.card p{position:relative;z-index:1;font-size:var(--t-sm);color:#3a4c55;margin-top:8px}
.card .tagrow{position:relative;z-index:1;margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.card:nth-child(3n+1)::after{background:var(--gold)}
.card:nth-child(3n+1) .ico{background:var(--gold-wash);color:#a5701a}
.card:nth-child(3n+1) h4{background:linear-gradient(120deg,var(--gold),#a5701a);-webkit-background-clip:text;background-clip:text;color:transparent}
.card:nth-child(3n+2)::after{background:var(--cyan)}
.card:nth-child(3n+2) .ico{background:var(--cyan-wash);color:var(--cyan)}
.card:nth-child(3n+2) h4{background:linear-gradient(120deg,var(--cyan),var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}
.card:nth-child(3n)::after{background:var(--blue)}
.card:nth-child(3n) .ico{background:var(--navy-wash);color:var(--blue)}
.card:nth-child(3n) h4{background:linear-gradient(120deg,var(--blue),var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}

/* compact horizontal card variant */
.cards.compact{gap:12px}
.cards.compact .card{padding:18px 20px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:2px;align-items:start}
.cards.compact .card .ico{grid-row:1 / span 2;width:42px;height:42px;border-radius:12px;font-size:20px;margin-top:2px}
.cards.compact .card h4{margin-top:0;align-self:start;font-size:var(--t-md)}
.cards.compact .card p{margin-top:4px;font-size:var(--t-xs2);line-height:1.5}
.cards.compact .card::after{width:104px;height:104px;right:-38px;top:-38px}

/* two-up cards: icon inline with a larger title, body below */
.cards.c2:not(.compact) .card{display:grid;grid-template-columns:auto 1fr;column-gap:15px}
.cards.c2:not(.compact) .card .ico{grid-column:1;grid-row:1;align-self:center}
.cards.c2:not(.compact) .card h4{grid-column:2;grid-row:1;margin-top:0;align-self:center;font-size:var(--t-2xl);line-height:1.15}
.cards.c2:not(.compact) .card p{grid-column:1 / -1;margin-top:14px}
.cards.c2:not(.compact) .card .tagrow{grid-column:1 / -1}

/* chip */
.chip{display:inline-block;font-size:var(--t-2xs);font-weight:800;letter-spacing:.02em;color:var(--blue);
  background:var(--navy-wash);border:1px solid #cfe0ea;border-radius:999px;padding:4px 10px}
.chip.ing{color:#7a5a12;background:var(--gold-wash);border-color:#eecf8f}
.chip.prod{color:var(--green);background:var(--green-wash);border-color:#bfe6cd}

  /* ---------- PROCESS FLOW ----------------------------------- */
  .flow{position:relative;margin-top:28px;display:grid;gap:14px}
  .flow::before{content:"";position:absolute;left:31px;top:30px;bottom:30px;width:2px;
    background:linear-gradient(var(--gold),var(--cyan),var(--navy))}
  .step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:center;
    background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;
    transition:transform .35s cubic-bezier(.22,.9,.3,1.05), box-shadow .35s ease, border-color .35s ease}
  .step::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:0px;border-radius:0 4px 4px 0;
    background:var(--accent,var(--cyan));transform:scaleY(0);transform-origin:center;
    transition:transform .35s cubic-bezier(.22,.9,.3,1.05)}
  .step:hover{transform:translateX(12px);box-shadow:0 22px 40px -18px var(--accent-soft,rgba(0,61,91,.35)),0 6px 16px -10px rgba(6,38,52,.15)}
  .step:hover::before{transform:scaleY(1)}
  .step .no{position:relative;z-index:1;width:64px;height:64px;border-radius:18px;font-size:var(--t-stepno); align-content: space-between;
    color:#fff;font-weight:900;display:grid;place-items:center;box-shadow:0 0 0 6px #fff;
    transition:transform .35s cubic-bezier(.22,.9,.3,1.05), box-shadow .35s ease}
  .step:hover .no{transform:scale(1.1) rotate(-6deg);
    box-shadow:0 0 0 6px #fff,0 0 0 13px var(--accent-soft,rgba(0,61,91,.35))}
  .step:nth-child(1) .no{background:var(--gold);color:var(--navy)}
  .step:nth-child(2) .no{background:var(--blue)}
  .step:nth-child(3) .no{background:var(--cyan)}
  .step:nth-child(4) .no{background:var(--blue)}
  .step:nth-child(5) .no{background:var(--navy)}
  .step:nth-child(6) .no{background:var(--gold);color:var(--navy)}
  .step:nth-child(1){--accent:var(--gold);--accent-soft:rgba(237,174,73,.4)}
  .step:nth-child(2){--accent:var(--blue);--accent-soft:rgba(48,99,142,.4)}
  .step:nth-child(3){--accent:var(--cyan);--accent-soft:rgba(0,121,140,.4)}
  .step:nth-child(4){--accent:var(--blue);--accent-soft:rgba(48,99,142,.4)}
  .step:nth-child(5){--accent:var(--navy);--accent-soft:rgba(0,61,91,.4)}
  .step:nth-child(6){--accent:var(--gold);--accent-soft:rgba(237,174,73,.4)}
  .step h4{font-size:var(--t-lg2);font-weight:900;
    background:linear-gradient(120deg,var(--cyan),var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}
  .step:nth-child(1) h4{background:linear-gradient(120deg,var(--gold),#d98a1f);-webkit-background-clip:text;background-clip:text;color:transparent}
  .step:nth-child(2) h4,.step:nth-child(4) h4{background:linear-gradient(120deg,var(--blue),var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}
  .step:nth-child(3) h4{background:linear-gradient(120deg,var(--cyan),var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}
  .step:nth-child(5) h4{background:linear-gradient(120deg,var(--navy),#024058);-webkit-background-clip:text;background-clip:text;color:transparent}
  .step:nth-child(6) h4{background:linear-gradient(120deg,var(--gold),#d98a1f);-webkit-background-clip:text;background-clip:text;color:transparent}
  .step p{font-size:var(--t-base);color:#3a4c55;margin-top:4px}

/* ---------- DUO OUTCOME ------------------------------------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;perspective:1200px}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.outcome{border-radius:20px;padding:26px;border:1px solid var(--line);transform-origin:bottom center;transition:transform .35s cubic-bezier(.22,.9,.3,1.05), box-shadow .35s ease, border-color .35s ease}
.outcome.green{background:linear-gradient(165deg,#eafaf0,#fff);border-color:#bfe6cd;--accent:#0a7d43;--accent-soft:rgba(10,125,67,.32)}
.outcome.amber{background:linear-gradient(165deg,var(--gold-wash),#fff);border-color:#eecf8f;--accent:#a15c12;--accent-soft:rgba(161,92,18,.32)}
.outcome:hover{transform:rotateX(-6deg) translateY(-6px);border-color:var(--accent);box-shadow:0 30px 54px -20px var(--accent-soft)}
.outcome .tag{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-2xs);font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.outcome.green .tag{background:#0a7d43;color:#fff}
.outcome.amber .tag{background:#a15c12;color:#fff}
.outcome h4{font-size:var(--t-xl);font-weight:900;margin-top:14px}
.outcome.green h4{background:linear-gradient(120deg,#bfe6cd,#0a7d43);-webkit-background-clip:text;background-clip:text;color:transparent}
.outcome.amber h4{background:linear-gradient(120deg,#eecf8f,#a15c12);-webkit-background-clip:text;background-clip:text;color:transparent}
.outcome p{font-size:var(--t-base);color:#3a4c55;margin-top:6px}

/* ---------- METRICS ----------------------------------------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
@media(max-width:820px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{position:relative;isolation:isolate;border-radius:20px;padding:28px 24px;color:#fff;background:linear-gradient(150deg,var(--navy),#024058);min-width:0;overflow:hidden;transition:transform .35s ease, box-shadow .35s ease}
.metric::after{content:"";position:absolute;z-index:1;pointer-events:none;top:-30%;left:-85%;width:55%;height:160%;background:rgba(255,255,255,.5); box-shadow:
  inset 0 1px 0 rgba(255, 255, 255, 0.8),   /* top glass reflection */
  inset 1px 0 0 rgba(255, 255, 255, 0.16),  /* left edge catch */
  0 0 0 1px rgba(220, 240, 255, 0.72),      /* sharp outer edge */
  0 0 14px rgba(142, 202, 255, 0.26),       /* controlled glow */
  0 14px 32px rgba(0, 18, 70, 0.5); transform:skewX(-25deg);transition:left .9s cubic-bezier(.86,0,.07,1)}
.metric:hover::after{left:125%}
.metric:hover{transform:scale(1.035);box-shadow:0 26px 48px -16px rgba(0,20,30,.4)}
.metric:nth-child(4n+2){background:linear-gradient(150deg,var(--cyan),var(--navy))}
.metric:nth-child(4n+3){background:linear-gradient(150deg,var(--blue),var(--navy))}
.metric:nth-child(4n){background:linear-gradient(150deg,var(--gold),#d98a1f);color:var(--navy)}
.metric .n{position:relative;z-index:2;font-size:var(--t-metric);font-weight:900;letter-spacing:-.03em;line-height:.9;white-space:nowrap;transition:letter-spacing .3s ease}
.metric:hover .n{letter-spacing:-.01em}
.metric p{position:relative;z-index:2;font-size:var(--t-xs2);margin-top:12px;opacity:.94;line-height:1.4}

/* ---------- TRUST CHIPS ------------------------------------- */
.trust{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:22px;padding-top:20px;border-top:1px dashed var(--line-2)}
.trust span{font-size:var(--t-xs2);font-weight:600;color:#3a4c55}
.trust span b{color:var(--navy);font-weight:800}

/* ---------- SPLIT LIST (pros/cons compare) ------------------ */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
@media(max-width:820px){.compare{grid-template-columns:1fr}}
.col{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.col .hd{padding:16px 20px;font-weight:900;font-size:var(--t-md);letter-spacing:-.01em}
.col.bad .hd{background:var(--red-wash);color:#8e1626;border-bottom:1px solid #f3c3cc}
.col.good .hd{background:var(--green-wash);color:#0a5c31;border-bottom:1px solid #bfe6cd}
.col .row{display:flex;gap:12px;padding:13px 20px;font-size:var(--t-sm);color:#3a4c55;line-height:1.5;border-bottom:1px solid var(--line)}
.col .row:last-child{border-bottom:none}
.col .row .i{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;margin-top:1px}
.col.bad .row .i{background:var(--red-wash);color:var(--red);border:1px solid #f3c3cc}
.col.good .row .i{background:var(--green-wash);color:var(--green);border:1px solid #bfe6cd}
/* lift the compare columns into crisp cards when placed on a dark band */
.band.dark .compare .col{border-color:transparent;box-shadow:0 26px 50px -30px rgba(0,0,0,.6),0 4px 14px -8px rgba(0,0,0,.4)}
.band.dark .compare .col .row{border-bottom-color:var(--line)}

/* ---------- TABLE ------------------------------------------- */
.tablewrap{margin-top:24px;border:1px solid var(--line);border-radius:18px;overflow:auto}
table.kg{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:900px}
table.kg th{background:var(--navy);color:#fff;text-align:left;font-weight:800;font-size:var(--t-xs);letter-spacing:.04em;text-transform:uppercase;padding:13px 16px;position:sticky;top:0}
table.kg td{padding:13px 16px;border-bottom:1px solid var(--line);color:#3a4c55;vertical-align:top}
table.kg tr:last-child td{border-bottom:none}
table.kg tr:hover td{background:var(--navy-wash)}
table.kg td b{color:var(--ink)}

/* ---------- MODALITY PILLS ---------------------------------- */
.modgrid{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.mod{display:inline-flex;align-items:center;gap:9px;font-size:var(--t-sm);font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:10px 15px;transition:.16s}
.mod:hover{border-color:var(--cyan);box-shadow:0 10px 22px -14px rgba(0,61,91,.4);transform:translateY(-2px)}
.mod .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.mod.egress .dot{background:var(--gold)}
.mod.both .dot{background:linear-gradient(90deg,var(--cyan),var(--gold))}

/* ---------- QUOTE ------------------------------------------- */
.quote{margin-top:24px;background:linear-gradient(155deg,var(--navy) 0%, #024058 100%);color:#fff;border-radius:24px;padding:40px clamp(28px,4vw,48px);position:relative;overflow:hidden}
.quote-brand{position:absolute;top:28px;right:clamp(28px,4vw,48px);background:#fff;border-radius:14px;padding:10px 18px;box-shadow:0 14px 30px rgba(0,0,0,.22);display:flex;align-items:center}
.quote-brand img{height:26px;width:auto;display:block}
.quote .mark{font-size:var(--t-mark);line-height:.4;font-weight:900;color:var(--gold);opacity:.5}
.quote blockquote{font-size:var(--t-quote);line-height:1.55;font-weight:500;margin-top:10px;max-width:72ch}
.quote blockquote em{font-style:italic;color:var(--gold)}
.quote .who{display:flex;align-items:center;gap:15px;margin-top:24px}
.quote .av{width:50px;height:50px;border-radius:16px;background:var(--gold);color:var(--navy);font-weight:900;font-size:var(--t-lg);display:grid;place-items:center;flex:none}
.quote .who .nm{font-weight:800;font-size:var(--t-md)}
.quote .who .rl{font-size:var(--t-xs2);color:rgba(255,255,255,.75)}

/* ---------- LOGO WALL --------------------------------------- */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.logos .from{font-size:var(--t-2xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);align-self:center;margin-right:2px}
.logo{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:var(--t-sm);font-weight:800;color:var(--blue);background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:8px 14px;transition:transform .16s ease, box-shadow .16s ease}
.logo img{height:28px;width:auto;object-fit:contain;display:block}
.logo:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(0,61,91,.4)}

/* ---------- PARTNER BADGE ----------------------------------- */
.partner-badge{display:inline-flex;align-items:center;width:100%;gap:14px;margin-top:24px;padding:14px 22px;border-radius:14px;
  background:linear-gradient(150deg, var(--blue), var(--navy));border:1px solid rgba(255,255,255,.12);text-decoration:none;cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease}
.partner-badge:hover{transform:translateY(-3px);box-shadow:0 18px 34px -14px rgba(0,61,91,.55);border-color:rgba(255,255,255,.32);background:linear-gradient(150deg, var(--cyan), var(--navy))}
.partner-badge .pb-mark{flex-shrink:0;height:42px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;padding:2px 8px;transition:transform .25s ease}
.partner-badge:hover .pb-mark{transform:scale(1.08)}
.partner-badge .pb-mark img{height:100%;display:block;object-fit:contain}
.partner-badge .pb-kick{font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.partner-badge .pb-main{font-size:14.5px;font-weight:700;color:#fff;margin-top:3px}

/* ---------- CASE STUDY -------------------------------------- */
.casebar{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:20px}
@media(max-width:820px){.casebar{grid-template-columns:1fr}}
.casecell{background:#fff;padding:18px 20px}
.casecell .cl{font-size:var(--t-2xs);font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.casecell.challenge .cl{color:var(--red)}
.casecell.result .cl{color:var(--green)}
.casecell p{font-size:var(--t-sm);color:#3a4c55;line-height:1.5}
.casecell p b{color:var(--ink);font-weight:800}

/* ---------- FOUNDERS / ABOUT -------------------------------- */
.founders{display:flex;flex-wrap:wrap;gap:36px;margin-top:26px;justify-content:flex-start}
.founder{display:flex;flex-direction:column;align-items:center;text-align:center;width:200px}
.founder .fpic{width:180px;height:180px;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 1px var(--line-2),0 14px 28px -12px rgba(0,61,91,.35);transition:transform .25s ease, box-shadow .25s ease}
.founder:hover .fpic{transform:translateY(-3px);box-shadow:0 0 0 1px var(--line-2),0 22px 38px -14px rgba(0,61,91,.5)}
.founder .fpic img{width:100%;height:100%;object-fit:cover;display:block}
.fname{font-size:var(--t-lg);font-weight:800;color:var(--navy);margin-top:16px;letter-spacing:-.005em}
.frole{font-size:var(--t-xs2);color:var(--muted);margin-top:3px;line-height:1.35}

/* ---------- SPEC CARDS -------------------------------------- */
.speccards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:980px){.speccards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.speccards{grid-template-columns:1fr}}
.speccard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.speccard:hover{transform:translateY(-3px);box-shadow:0 20px 36px -20px rgba(0,61,91,.28);border-color:var(--line-2)}
.speccard .sh{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.speccard .sic{font-size:20px;line-height:1;flex:none}
.speccard h5{font-size:var(--t-md);font-weight:900;color:var(--navy);letter-spacing:-.01em}
.speccard p{font-size:var(--t-xs2);color:#3a4c55;line-height:1.55}

/* ---------- TABLE CLIENT CELL ------------------------------- */
table.kg td.client{width:120px}
table.kg td.client img{height:30px;width:auto;max-width:104px;object-fit:contain;display:block}

/* ---------- CTA --------------------------------------------- */
#cta{background:
    radial-gradient(640px 280px at 88% -30%, rgba(237,174,73,.4), transparent 60%),
    linear-gradient(150deg,var(--cyan) 0%, var(--navy) 100%);
  color:#fff;padding:60px var(--px)}
#cta h3{font-size:var(--t-cta);font-weight:900;letter-spacing:-.025em;margin-top:8px;max-width:26ch}
#cta p{font-size:var(--t-intro);color:rgba(255,255,255,.9);margin-top:14px;max-width:74ch}
#cta p .mk{color:#fff;background-image:linear-gradient(180deg,transparent 56%,rgba(237,174,73,.55) 56%)}
#cta .actions{margin-top:26px}
#cta .contact{margin-top:22px;font-size:var(--t-sm);color:rgba(255,255,255,.85);font-weight:600;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#cta .contact a{color:#fff}

/* ---------- FOOTER ------------------------------------------ */
footer{background:#0a1a22;color:rgba(255,255,255,.6);padding:48px var(--px) 40px;font-size:14px}
footer .footer-inner{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px}
footer .fbrand img{height:30px;margin-bottom:12px;filter: invert(1);}
footer .fbrand p{max-width:34ch;font-size:13px;line-height:1.6}
footer .fcol h5{color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px;font-weight:800}
footer .fcol a{display:block;color:rgba(255,255,255,.72);text-decoration:none;margin-bottom:8px;font-size:13.5px}
footer .fcol a:hover{color:#fff}
footer .fbot{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:rgba(255,255,255,.45)}
footer .fcontact{display:flex;align-items:center;gap:9px;margin-bottom:9px;color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px}
footer .fcontact:hover{color:#fff}
footer .fcontact img{height:16px;width:16px;object-fit:contain;flex:none;transition:opacity .18s ease;     vertical-align: sub; margin-right:6px;}
footer .fcontact:hover img{opacity:1}
footer .fsocial{display:flex;gap:14px;margin-top:16px}
footer .fsocial a img{height:16px;width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.7;transition:opacity .18s ease, transform .18s ease}
footer .fsocial a:hover img{opacity:1;transform:translateY(-2px)}
/* mail icon before the CTA email link */
#cta .contact a[href^="mailto:"]::before{content:"";display:inline-block;width:15px;height:15px;margin-right:7px;vertical-align:-2px; vertical-align: sub; margin-right:6px;
  background:url('https://kgnf.blob.core.windows.net/imgs/mail.png') center/contain no-repeat;}

.brandmarkfooter{font-weight:900;font-size:var(--t-2xl);letter-spacing:-.02em; vertical-align: middle;}
.brandmarkfooter .dot{color:var(--gold)}
.iconHei {max-height:10px;vertical-align: middle; margin-right: 5px;}



/* ---------- PROBLEM STRIP (full-bleed) --------------------- */
.problemstrip{background:linear-gradient(180deg,#fdeef1 0%, #fbe4e8 100%);border-top:4px solid var(--red);border-bottom:1px solid #f3c3cc;border-radius:0;margin-left:calc(-1 * var(--px));margin-right:calc(-1 * var(--px));padding:48px var(--px) 52px}
.problemstrip .kicker{color:var(--red)}
.problemstrip .h2{background:linear-gradient(120deg,var(--red),#a11d30);-webkit-background-clip:text;background-clip:text;color:transparent}
.problemstrip .mk{color:#8e1626;background-image:linear-gradient(180deg,transparent 56%,rgba(209,73,91,.3) 56%)}
.probgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px;align-items:start}
@media(max-width:820px){.probgrid{grid-template-columns:1fr}}
.painlist{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.painrow{display:flex;gap:14px;padding:16px 20px;align-items:flex-start;border-bottom:1px solid var(--line);background:#fff;font-size:var(--t-sm);color:#3a4c55;line-height:1.55;transition:background .15s ease}
.painrow:last-child{border-bottom:none}
.painrow:hover{background:var(--red-wash)}
.painrow .pi{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--red-wash);border:1px solid #f3c3cc;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--red);font-weight:900;margin-top:1px}
.pstats{display:flex;flex-direction:column;gap:16px}
.pstat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:transform .18s ease, box-shadow .18s ease}
.pstat:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(6,38,52,.25)}
.pstat .pv{font-size:clamp(32px,4vw,42px);font-weight:900;letter-spacing:-.03em;line-height:1;background:linear-gradient(120deg,var(--flame),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.pstat .pl{margin-top:8px;font-size:var(--t-xs2);color:var(--muted-2);line-height:1.5;border-top:1px dashed var(--line-2);padding-top:10px}
.pstat .pl b{color:var(--ink);font-weight:800}

/* ---------- PROOF CARDS (committed numbers) ---------------- */
.proofgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
@media(max-width:900px){.proofgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.proofgrid{grid-template-columns:1fr}}
.proofcard{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,#fbfcfd);border:1px solid var(--line);border-radius:20px;padding:24px 22px 18px;display:flex;flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.proofcard::before{content:"";position:absolute;left:0;top:0;width:100%;height:0px;background:linear-gradient(90deg,var(--cyan),var(--navy))}
.proofcard::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 40% 40%,var(--cyan),transparent 70%);opacity:.06;transition:transform .22s ease, opacity .22s ease}
.proofcard:hover{transform:translateY(-5px);box-shadow:0 28px 48px -22px rgba(0,61,91,.3);border-color:var(--line-2)}
.proofcard:hover::after{transform:scale(1.4);opacity:.13}
.proofcard .pn{position:relative;z-index:1;font-size:clamp(42px,6.6vw,88px);font-weight:900;letter-spacing:-.045em;line-height:1; margin-top: -10px; padding-bottom: 20px; background:linear-gradient(120deg,var(--navy),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.proofcard .pd{position:relative;z-index:1;font-size:var(--t-xs2);color:#3a4c55;line-height:1.5;margin-top:12px;flex:1}
.proofcard .pa{position:relative;z-index:1;display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:13px;border-top:1px dashed var(--line-2);min-height:22px}
.proofcard .pa img{height:22px;width:auto;max-width:96px;object-fit:contain}
.proofcard .pa .src{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.proofcard:nth-child(1)::before{background:linear-gradient(90deg,var(--gold),var(--red))}
.proofcard:nth-child(1)::after{background:radial-gradient(circle at 40% 40%,var(--gold),transparent 70%)}
.proofcard:nth-child(1) .pn{background:linear-gradient(120deg,var(--gold),#d98a1f);-webkit-background-clip:text;background-clip:text;color:transparent}
.proofcard:nth-child(2)::before{background:linear-gradient(90deg,var(--cyan),var(--navy))}
.proofcard:nth-child(2) .pn{background:linear-gradient(120deg,var(--cyan),var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}
.proofcard:nth-child(3)::before{background:linear-gradient(90deg,var(--blue),var(--navy))}
.proofcard:nth-child(3)::after{background:radial-gradient(circle at 40% 40%,var(--blue),transparent 70%)}
.proofcard:nth-child(3) .pn{background:linear-gradient(120deg,var(--blue),var(--navy));-webkit-background-clip:text;background-clip:text;color:transparent}
.proofcard:nth-child(4)::before{background:linear-gradient(90deg,var(--gold),var(--flame))}
.proofcard:nth-child(4)::after{background:radial-gradient(circle at 40% 40%,var(--flame),transparent 70%)}
.proofcard:nth-child(4) .pn{background:linear-gradient(120deg,var(--flame),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}




.subaddanode {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---------- ARCHITECTURE DIAGRAM ---------------------------- */
.arch{margin-top:30px;display:flex;flex-direction:column;gap:0;position:relative}

.alayer{
  --acc:var(--cyan);--acc2:var(--navy);--acc-soft:rgba(0,121,140,.4);--acc-wash:var(--cyan-wash);
  position:relative;display:grid;grid-template-columns:288px 1fr;gap:26px;
  background:linear-gradient(180deg,#ffffff,#fbfcfd);
  border:1px solid var(--line);border-radius:22px;padding:24px 26px 24px 32px;overflow:hidden;
  transition:transform .4s cubic-bezier(.22,.9,.3,1.05), box-shadow .4s ease, border-color .4s ease;
}
.alayer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:22px;
  background:linear-gradient(180deg,var(--acc),var(--acc2));transition:width .4s ease}
.alayer::after{content:"";position:absolute;right:-60px;top:-70px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,var(--acc),transparent 70%);opacity:.06;transition:opacity .4s ease, transform .4s ease}
.alayer:hover{transform:translateY(-4px);border-color:var(--acc);
  box-shadow:0 34px 64px -28px var(--acc-soft),0 6px 18px -12px rgba(6,38,52,.18)}
.alayer:hover::before{width:55px}
.alayer:hover::after{opacity:.15;transform:scale(1.18)}
@media(max-width:860px){.alayer{grid-template-columns:1fr;gap:18px;padding:22px 22px 22px 26px}}

.arail{display:flex;gap:16px;align-items:flex-start; z-index:9}
.anum{font-size:46px;font-weight:900;line-height:.82;letter-spacing:-.04em;color:var(--acc);
  -webkit-text-stroke:1.5px var(--acc);-webkit-text-fill-color:transparent;opacity:.45;
  transition:opacity .4s ease, -webkit-text-fill-color .4s ease}
.alayer:hover .anum{opacity:1;-webkit-text-fill-color:var(--acc-wash)}
.atag{font-size:var(--t-2xs);font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.arail h4{font-size:var(--t-lg);font-weight:900;color:var(--navy);letter-spacing:-.015em;margin-top:3px;line-height:1.15}
.arail p{font-size:var(--t-xs2);color:var(--muted);margin-top:7px;line-height:1.5;max-width:32ch}

.anodes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-content:start; z-index:9}
.anodes.n1{grid-template-columns:1fr}
@media(max-width:560px){.anodes{grid-template-columns:1fr}}
.anode{position:relative;overflow:hidden;display:flex;gap:11px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.anode::after{content:"";position:absolute;top:-30%;left:-85%;width:55%;height:160%;pointer-events:none;
.anode::after{content:"";position:absolute;top:-30%;left:-85%;width:55%;height:160%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-22deg);
  transition:left .75s cubic-bezier(.86,0,.07,1)}
.anode::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:skewX(-22deg);}



  transition:left .75s cubic-bezier(.86,0,.07,1)}



.anode:hover::after{left:110%}
.anode:hover{transform:translateY(2px);border-color:var(--acc);box-shadow:0 18px 32px -18px var(--acc-soft)}
.anode .ai{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:17px;
  background:var(--acc-wash);transition:transform .25s ease}
.anode:hover .ai{transform:scale(1.12) rotate(-6deg)}
.anode b{display:block;font-size:var(--t-sm);font-weight:800;color:var(--navy);letter-spacing:-.01em}
.anode span{display: inline;font-size:var(--t-2xs);color:var(--muted);line-height:1.42;margin-top:2px}

/* flow connector between layers */
.aflow{display:flex;justify-content:center;align-items:center;height:26px;position:relative; }
.aflow::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--line-2),var(--line-2))}
.aflow i{position:relative;width:12px;height:12px;border-radius:50%;place-items:center;font-style:normal; align-content: center;
  font-size:12px;color:var(--cyan);background:#fff;border:1px solid var(--line-2);box-shadow:0 6px 14px -8px rgba(6,38,52,.3);
  transition:transform .3s ease, color .3s ease, border-color .3s ease; justify-content: center; flex-wrap: balance; display: flex;}
.aflow:hover i{transform:translateY(2px) scale(1.1);color:var(--navy);border-color:var(--cyan);font-family: cursive;}

/* capstone: dynamic product (output) */



.acap{position:relative;overflow:hidden;border-radius:22px;padding:28px 30px;color:#fff;display:flex;gap:20px;align-items:center;
  border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(620px 220px at 88% -50%, rgba(237,174,73,.4), transparent 62%),linear-gradient(150deg,var(--navy),#024058);
  transition:transform .4s ease, box-shadow .4s ease}



  .acap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--gold),#d98a1f)}

  .acap::after{content:"";position:absolute;z-index:1;pointer-events:none;top:-30%;left:-85%;width:55%;height:160%;background:rgba(255, 255, 255, 0.129);filter:blur(1px);transform:skewX(-25deg);transition:left 3s cubic-bezier(.86,0,.07,1)}
  .acap:hover::after{left:125%}



.acap:hover{transform:translateY(-4px);box-shadow:0 36px 64px -26px rgba(0,20,30,.55)}
.acap .capico{flex:none;width:58px;height:58px;border-radius:16px;background:var(--gold);color:var(--navy);display:grid;place-items:center;
  font-size:27px;box-shadow:0 0 0 6px rgba(237,174,73,.16);transition:transform .35s ease}
.acap:hover .capico{transform:scale(1.08) rotate(-4deg)}
.acap .captag{font-size:var(--t-2xs);font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.acap h4{font-size:var(--t-xl);font-weight:900;margin-top:3px;letter-spacing:-.015em}
.acap p{font-size:var(--t-sm);color:rgba(255,255,255,.9);margin-top:7px;line-height:1.55;max-width:74ch}

/* ---------- REVEAL (one-time settle on first scroll into view) ---
   Elements get .reveal added by JS (fit.js), then .in when they
   first enter the viewport. Class is JS-added so no-JS keeps everything
   visible, and above-the-fold content is shown instantly (no flash). */
.reveal{opacity:0;transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.22,.9,.3,1), transform .7s cubic-bezier(.22,.9,.3,1)}
.reveal.in{opacity:1;transform:none}
/* gentle child settle: cards/steps/metrics drift up a touch after the section */
.reveal .cards>*,.reveal .metrics>*,.reveal .flow>*,.reveal .speccards>*,.reveal .proofgrid>*{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.9,.3,1)}
.reveal.in .cards>*,.reveal.in .metrics>*,.reveal.in .flow>*,.reveal.in .speccards>*,.reveal.in .proofgrid>*{
  opacity:1;transform:none}
.reveal.in .cards>:nth-child(2),.reveal.in .metrics>:nth-child(2),.reveal.in .flow>:nth-child(2),.reveal.in .speccards>:nth-child(2),.reveal.in .proofgrid>:nth-child(2){transition-delay:.07s}
.reveal.in .cards>:nth-child(3),.reveal.in .metrics>:nth-child(3),.reveal.in .flow>:nth-child(3),.reveal.in .speccards>:nth-child(3),.reveal.in .proofgrid>:nth-child(3){transition-delay:.14s}
.reveal.in .cards>:nth-child(4),.reveal.in .metrics>:nth-child(4),.reveal.in .flow>:nth-child(4),.reveal.in .speccards>:nth-child(4),.reveal.in .proofgrid>:nth-child(4){transition-delay:.21s}
.reveal.in .cards>:nth-child(n+5),.reveal.in .flow>:nth-child(n+5),.reveal.in .speccards>:nth-child(n+5){transition-delay:.28s}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal.in,
  .reveal .cards>*,.reveal .metrics>*,.reveal .flow>*,.reveal .speccards>*,.reveal .proofgrid>*{
    opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- PRINT ------------------------------------------- */
@media print{
  #nav{display:none}
  body{background:#fff}
  #hero,.metric,.quote,#cta,.outcome,.card{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .block,.step,.card,.quote{break-inside:avoid}
  .reveal,.reveal.in,.reveal .cards>*,.reveal .metrics>*,.reveal .flow>*,.reveal .speccards>*,.reveal .proofgrid>*{opacity:1!important;transform:none!important;transition:none!important}
}


.cardcologo{
	vertical-align: bottom;
	margin-left: 5px;
	margin-right: 5px;
	height: 20px;
}


/* ---------- SECTION BANDS (full-bleed alternating backgrounds) --- */
.band{padding:54px var(--px);scroll-margin-top:64px}
.band.tint{background:linear-gradient(180deg,#f3f7fa,#e9eff4)}
.band.dark{
  background:
    radial-gradient(680px 320px at 88% -35%, rgba(237,174,73,.14), transparent 62%),
    linear-gradient(165deg,var(--navy) 0%, #06344a 55%, #04283a 100%);
  color:#fff}
/* keep single blocks flush inside a band */
.band > .block{margin-top:0}
.band > .block + .block{margin-top:56px}
/* dark-band text/element overrides so headings and copy stay legible */
.band.dark .kicker{color:var(--gold)}
.band.dark .h2{background:linear-gradient(120deg,#ffffff,#ffd98a);-webkit-background-clip:text;background-clip:text;color:transparent}
.band.dark .intro{color:rgba(255,255,255,.82)}
.band.dark .intro b{color:#fff}
.band.dark .mk{color:#fff;background-image:linear-gradient(180deg,transparent 56%,rgba(237,174,73,.5) 56%)}
.band.dark .subkicker{color:rgba(255,255,255,.62)}
.band.dark .trust{border-top-color:rgba(255,255,255,.18)}
.band.dark .trust span{color:rgba(255,255,255,.82)}
.band.dark .trust span b{color:#fff}

.subsubnote {font-size:var(--t-2xs);color:var(--muted);margin-top:16px;line-height:1.5}

/* ---------- BENCHMARK BARS --------------------------------- */
.benchgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
@media(max-width:820px){.benchgrid{grid-template-columns:1fr}}
.benchcard{border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px;background:#fff}
.benchcard h4{font-size:var(--t-md);font-weight:900;color:var(--navy);letter-spacing:-.01em}
.benchcard .dir{font-size:var(--t-2xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:2px 0 16px}
.benchrow{margin-bottom:13px}
.benchrow:last-child{margin-bottom:0}
.benchrow .bt{display:flex;justify-content:space-between;font-size:var(--t-xs2);margin-bottom:5px}
.benchrow .bt .who{font-weight:700;color:#3a4c55}
.benchrow .bt .who.k{color:var(--red);font-weight:900}
.benchrow .bt .val{font-weight:900;color:var(--ink)}
.benchrow .bt .val.k{color:var(--red)}
.benchtrack{height:10px;background:var(--navy-wash);border-radius:6px;overflow:hidden}
.benchfill{height:100%;border-radius:6px;background:var(--blue)}
.benchfill.k{background:linear-gradient(90deg,var(--gold),var(--red))}
.benchfill.avg{background:var(--line-2)}
.benchnote{font-size:var(--t-2xs);color:var(--muted);margin-top:16px;line-height:1.5}


.boldforcards {
	font-weight: 800;

}
.acimg {
  transform:scale(1) ;transition:transform .22s cubic-bezier(.22,.9,.3,1.05), all 0.2s ease

}
.acimg:hover {
  transform:scale(1.12);  transition:transform .22s cubic-bezier(.22,.9,.3,1.05), all 0.2s ease

}