/* CollectiveIS corporate stylesheet — consolidated production build (REV14, 2026-07-21).
   Replaces the previous base + REV11 + REV12 override layers with a single clean layer. */

:root{
  --header-height:76px;
  --navy:#071a33;
  --navy-2:#0c1e36;
  --navy-panel:#10213a;
  --gold:#c5a059;
  --gold-light:#e4c675;
  --off:#f8f9fa;
  --muted:#a8b3c4;
  --ink:#0b1b31;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 24px)}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:#07111f;color:var(--off);line-height:1.65}
main{flex:1 0 auto}
footer{flex-shrink:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(1180px,calc(100% - 48px));margin-inline:auto}

/* Accessibility helpers */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:18px;top:18px;width:auto;height:auto;padding:10px 14px;background:#fff;color:#000;z-index:9999;border-radius:8px}
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold-light);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;min-height:var(--header-height);background:rgba(5,12,24,.96);border-bottom:1px solid rgba(197,160,89,.24);backdrop-filter:blur(16px) saturate(140%)}
.header-inner{min-height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;flex:0 0 auto;min-width:0}
.brand-mark-wrap{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:visible}
.brand-mark{display:block;width:auto;height:52px;max-width:66px;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
.brand-name{display:inline-flex;align-items:baseline;font-size:26px;font-weight:850;line-height:1;letter-spacing:-.045em;white-space:nowrap;color:#fff}
.brand-name strong{color:var(--gold-light)}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:nowrap;font-size:14px;color:#dbe3ee}
.nav a{white-space:nowrap;opacity:.9;padding:4px 2px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--gold-light);opacity:1}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:10px;padding:8px 12px;font:inherit;font-size:14px;cursor:pointer}

/* Type */
.eyebrow{color:var(--gold-light);font-size:13px;text-transform:uppercase;letter-spacing:.16em;font-weight:850;margin-bottom:14px}
h1{font-size:clamp(38px,4.6vw,60px);line-height:1.04;margin:0 0 14px;font-weight:850;letter-spacing:-.045em;max-width:20ch;text-wrap:balance}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.12;margin:0 0 18px;letter-spacing:-.03em;text-wrap:balance}
h3{font-size:22px;margin:0 0 10px;line-height:1.25}
h4{font-size:17px;margin:0 0 8px;line-height:1.3}
p{margin:0 0 16px;color:#d4dceb}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.55;max-width:62ch;color:#e2e9f5}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:12px 20px;border-radius:999px;font-weight:800;font-size:15px;border:1px solid transparent;transition:transform .2s,box-shadow .2s;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#07111f;box-shadow:0 14px 30px rgba(197,160,89,.24)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.04);color:#fff}
.btn-secondary:hover{border-color:rgba(228,198,117,.6)}
.light .btn-secondary{border-color:rgba(12,30,54,.3);color:var(--ink);background:#fff}

/* Hero (home) */
.hero{position:relative;overflow:hidden;min-height:calc(100svh - var(--header-height));padding:52px 0 44px;display:flex;align-items:center;background:radial-gradient(circle at 70% 35%,rgba(197,160,89,.16),transparent 25%),radial-gradient(circle at 34% 35%,rgba(34,112,172,.20),transparent 30%),linear-gradient(135deg,#050b15 0%,#0c1e36 55%,#07111f 100%)}
.hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),transparent 86%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start}
.hero-copy h1{max-width:16ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.stat{padding:16px 14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.04)}
.stat strong{display:block;color:var(--gold-light);font-size:20px;line-height:1.15}
.stat span{display:block;color:var(--muted);font-size:11px;margin-top:6px;text-transform:uppercase;letter-spacing:.07em;line-height:1.35}

/* Page hero (inner pages) */
.page-hero{padding:52px 0 40px;background:radial-gradient(circle at 72% 25%,rgba(197,160,89,.15),transparent 25%),linear-gradient(135deg,#050b15,#0c1e36);border-bottom:1px solid rgba(197,160,89,.18)}
.page-hero h1{max-width:22ch}

/* Sections */
.section{padding:60px 0;background:#07111f}
.section.alt{background:#0a1728}
.section.light{background:#f7f8fa;color:var(--ink)}
.section.light p{color:#405067}
.section.light .eyebrow{color:#9c7936}
.section.compact{padding:48px 0}
.section-intro{max-width:62ch}
.grid{display:grid;gap:22px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border-radius:24px;padding:28px;box-shadow:0 18px 46px rgba(0,0,0,.18);min-width:0}
.light .card{background:#fff;border-color:#e5e9ef;box-shadow:0 18px 46px rgba(14,43,77,.08)}
.card-icon{width:58px;height:52px;border-radius:16px;margin-bottom:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(197,160,89,.2),rgba(197,160,89,.06));border:1px solid rgba(197,160,89,.32);color:var(--gold-light);font-weight:900;font-size:13px}
.light .card-icon{color:#9c7936}
.card-link{display:inline-flex;margin-top:6px;font-weight:800;color:var(--gold-light);font-size:14px}
.light .card-link{color:#9c7936}
.card-link:hover{text-decoration:underline}
.kicker{display:inline-flex;border:1px solid rgba(197,160,89,.35);color:var(--gold-light);border-radius:999px;padding:6px 11px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.light .kicker{color:#9c7936;border-color:rgba(156,121,54,.4)}
.list{display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.list li{padding-left:26px;position:relative;color:#d7deea}
.light .list li{color:#374860}
.list li:before{content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;background:var(--gold)}
.profile-band{background:linear-gradient(135deg,#071a33,#0e2b4d);border:1px solid rgba(197,160,89,.26);border-radius:30px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.proof-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.proof-row span{border:1px solid rgba(12,30,54,.14);background:#fff;border-radius:999px;padding:10px 14px;color:#10213a;font-weight:800;font-size:13px;box-shadow:0 12px 28px rgba(14,43,77,.07)}
.section:not(.light) .proof-row span{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#e2e9f5;box-shadow:none}

/* Tables */
.table-wrap{overflow-x:auto;margin:24px 0 8px;border-radius:18px;border:1px solid rgba(255,255,255,.14)}
.light .table-wrap{border-color:#dfe4ec}
table.table{width:100%;border-collapse:collapse;min-width:560px;font-size:15px}
.table caption{text-align:left;padding:14px 18px 6px;font-weight:800;color:inherit}
.table th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-light);background:rgba(255,255,255,.05);padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.16)}
.table td{padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.09);vertical-align:top;color:#d7deea}
.table tr:last-child td{border-bottom:0}
.table td:first-child{font-weight:700;color:#fff}
.light .table th{color:#9c7936;background:#f1f3f7;border-color:#dfe4ec}
.light .table td{color:#405067;border-color:#e8ecf2}
.light .table td:first-child{color:var(--ink)}

/* Stage blocks (methodology) */
.stage{border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-radius:24px;padding:30px;margin-bottom:22px}
.stage-head{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.stage-num{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(197,160,89,.24),rgba(197,160,89,.08));border:1px solid rgba(197,160,89,.4);color:var(--gold-light);font-weight:900;font-size:19px}
.stage h3{margin:0}
.stage-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin-top:14px}
.stage-grid .list{margin-top:8px}
.fact-rows{margin:14px 0 0;display:grid;gap:0}
.fact-rows > div{display:grid;grid-template-columns:190px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.fact-rows > div:last-child{border-bottom:0}
.fact-rows dt{font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--gold-light);margin:0;padding-top:2px}
.fact-rows dd{margin:0;color:#d7deea;font-size:15px}
.light .fact-rows dt{color:#9c7936}
.light .fact-rows dd{color:#405067}
.light .fact-rows > div{border-color:#e8ecf2}

/* CTA band */
.cta{padding:56px 0;background:radial-gradient(circle at 30% 20%,rgba(197,160,89,.20),transparent 28%),linear-gradient(135deg,#07111f,#0e2b4d)}
.cta-box{border:1px solid rgba(197,160,89,.35);border-radius:30px;padding:42px;background:rgba(255,255,255,.05);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.cta-box h2{margin-bottom:10px}
.cta-box p{margin-bottom:0}

/* Footer */
.footer{background:radial-gradient(circle at 18% 8%,rgba(197,160,89,.10),transparent 24%),linear-gradient(135deg,#07111f 0%,#09182a 52%,#050a12 100%);padding:48px 0 24px;border-top:1px solid rgba(197,160,89,.24)}
.footer-grid{display:grid;grid-template-columns:1.3fr .9fr .9fr 1.1fr;gap:30px;align-items:start}
.footer h2{font-size:18px;margin:0 0 14px;color:#fff;letter-spacing:0}
.footer p{margin:0 0 10px;color:#c9d2e0;font-size:14.5px}
.footer a{color:#d8dfeb}
.footer a:hover{color:var(--gold-light)}
.footer-brand{display:grid;gap:14px}
.footer-logo{display:inline-flex;align-items:center;gap:12px}
.footer-mark-wrap{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:visible}
.footer-mark{display:block;width:auto;height:72px;max-width:96px;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.4))}
.footer-name{display:inline-flex;align-items:baseline;font-weight:850;font-size:28px;line-height:1;letter-spacing:-.045em;white-space:nowrap;color:#f4f6fa}
.footer-name strong{color:var(--gold-light)}
.footer-note{font-size:12.5px;color:#93a0b4}
.footer address{font-style:normal;color:#c9d2e0;font-size:14.5px;line-height:1.6}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:20px;color:#a9b4c4;font-size:13px;display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.footer-bottom a{color:#c9d2e0}
.footer-bottom a:hover{color:var(--gold-light)}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap}

/* Forms */
.form{display:grid;gap:16px}
.field{display:grid;gap:6px}
.field label{font-weight:700;font-size:14px;color:var(--ink)}
.field .req{color:#9c2f2f}
.input,select,textarea{width:100%;padding:13px 15px;border-radius:14px;border:1px solid rgba(14,43,77,.22);background:#fff;color:#10213a;font:inherit}
textarea{min-height:150px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2310213a' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:38px}
.field .hint{font-size:12.5px;color:#68788f;margin:0}
.field .error-msg{display:none;font-size:13px;font-weight:700;color:#9c2f2f;margin:0}
.field.invalid .error-msg{display:block}
.field.invalid .input,.field.invalid select,.field.invalid textarea{border-color:#b04a4a}
.consent-row{display:flex;gap:12px;align-items:flex-start}
.consent-row input[type="checkbox"]{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:#9c7936}
.consent-row label{font-size:14px;color:#374860;font-weight:500}
.notice{font-size:13px;color:#53647c}
.section:not(.light) .notice,.cta .notice,.hero .notice{color:#9aa7ba}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
#contact-form-panel{scroll-margin-top:calc(var(--header-height) + 24px)}
.contact-hero{padding:48px 0 36px}
.contact-panel{padding-top:52px}
.contact-grid{align-items:start;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.contact-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.contact-list li{color:#374860}
.contact-list strong{color:var(--ink)}

/* Utility */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.anchor-offset{scroll-margin-top:calc(var(--header-height) + 24px)}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.divider{border:0;border-top:1px solid rgba(255,255,255,.12);margin:44px 0}
.light .divider{border-color:#e2e7ee}

/* Responsive */
@media (max-width:1180px){
  .nav-toggle{display:inline-flex}
  .nav{display:none;position:absolute;left:20px;right:20px;top:calc(var(--header-height) + 8px);background:#050b15;border:1px solid rgba(197,160,89,.22);border-radius:18px;padding:18px;flex-direction:column;align-items:flex-start;gap:14px;font-size:15px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
  .nav.open{display:flex}
  .nav a{width:100%;padding:6px 4px}
}
@media (max-width:980px){
  :root{--header-height:72px}
  .brand-mark{height:46px;max-width:60px}
  .brand-name{font-size:24px}
  .hero{min-height:auto;padding:40px 0 34px}
  .hero-grid,.profile-band,.cta-box{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .stage-grid{grid-template-columns:1fr}
  .page-hero{padding:44px 0 34px}
}
@media (max-width:640px){
  :root{--header-height:68px}
  .container{width:calc(100% - 28px)}
  .brand-mark{height:42px;max-width:56px}
  .brand-name{font-size:22px}
  .hero{padding:34px 0 28px}
  .eyebrow{font-size:12px;letter-spacing:.13em}
  h1{font-size:clamp(30px,8.6vw,42px)}
  h2{font-size:clamp(25px,7vw,34px)}
  h3{font-size:20px}
  .lead{font-size:16.5px}
  .grid-2,.grid-3,.footer-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .stat{display:flex;align-items:baseline;gap:10px;padding:12px 14px}
  .stat span{margin-top:0}
  .hero-actions{flex-direction:column;gap:12px}
  .hero-actions .btn{width:100%;min-height:48px}
  .card,.profile-band,.cta-box{padding:24px}
  .stage{padding:22px}
  .stage-num{width:40px;height:40px;font-size:17px;border-radius:12px}
  .section,.section.compact{padding:44px 0}
  .page-hero{padding:38px 0 30px}
  .footer-mark{height:62px;max-width:84px}
  .footer-name{font-size:25px}
  .fact-rows > div{grid-template-columns:1fr;gap:2px}
  .table td,.table th{padding:11px 14px}
}
@media (max-width:380px){
  .brand-name{font-size:20px}
  h1{font-size:clamp(27px,9vw,34px)}
  .container{width:calc(100% - 24px)}
}

/* ============================================================
   LIQUID GLASS LAYER — REV16 (2026-07-21)
   Kokonut-UI-inspired glass material, built on the existing navy/
   gold/silver palette (not a generic white/blue glass skin).
   Rules:
   - Every panel keeps a real (non-fully-transparent) base colour,
     so browsers without backdrop-filter still render a legible
     solid-ish surface — backdrop-filter is a progressive layer,
     not a requirement.
   - Text-bearing surfaces keep enough backing opacity to hold the
     WCAG AA contrast ratios already verified for this palette.
   - Dense/functional surfaces (form inputs, data tables, the
     primary CTA button) are deliberately left solid: glass is a
     chrome treatment, not something that belongs on a control a
     user must read precisely or click with confidence.
   - True SVG liquid distortion is applied only to two singleton,
     non-repeating hero elements (home hero card, inner-page hero)
     — never to repeated grids of cards — to keep scroll/paint
     performance in line with the rest of the rebuild.
   - No auto-playing motion: the material is static glass, not an
     animated blob; interaction is limited to a hover lift, which
     is already covered by the site-wide prefers-reduced-motion
     rule above.
   ============================================================ */

:root{
  --glass-border:rgba(255,255,255,.22);
  --glass-border-gold:rgba(197,160,89,.38);
  --glass-sheen:linear-gradient(120deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.02) 30%,rgba(255,255,255,0) 55%,rgba(197,160,89,.10) 100%);
  --glass-shadow:0 20px 50px rgba(2,6,14,.45),inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.16);
}

/* Depth wash behind glass panels so blur/saturate have something to react to */
.section:not(.light){background:radial-gradient(circle at 15% 0%,rgba(197,160,89,.05),transparent 40%),radial-gradient(circle at 85% 100%,rgba(70,120,190,.06),transparent 45%),#07111f}
.section.alt{background:radial-gradient(circle at 15% 0%,rgba(197,160,89,.06),transparent 40%),radial-gradient(circle at 85% 100%,rgba(70,120,190,.07),transparent 45%),#0a1728}

/* Header glass */
.site-header{background:linear-gradient(180deg,rgba(10,20,38,.66),rgba(5,11,21,.56));backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);box-shadow:0 12px 40px rgba(0,0,0,.28);overflow:visible}
.site-header::before{content:"";position:absolute;inset:0;background:var(--glass-sheen);mix-blend-mode:overlay;opacity:.55;pointer-events:none;z-index:0}
.header-inner{position:relative;z-index:1}
.nav-toggle{backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%);transition:background .2s,border-color .2s}
.nav-toggle:hover{background:rgba(255,255,255,.06)}

/* Buttons */
.btn-secondary{backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);transition:transform .2s,box-shadow .2s,border-color .2s,background .2s}
.btn-secondary:hover{background:rgba(255,255,255,.09)}
.light .btn-secondary:hover{background:rgba(16,33,58,.05)}

/* Pills */
.kicker{background:rgba(197,160,89,.08);backdrop-filter:blur(8px) saturate(150%);-webkit-backdrop-filter:blur(8px) saturate(150%)}
.light .kicker{background:rgba(156,121,54,.06)}
.card-icon{backdrop-filter:blur(8px) saturate(150%);-webkit-backdrop-filter:blur(8px) saturate(150%)}
.proof-row span{backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);background:rgba(255,255,255,.72)}
.section:not(.light) .proof-row span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.20)}

/* Home hero card — the flagship glass surface, incl. true liquid distortion */
/* Inner-page hero — subtle liquid wash behind the title */
.page-hero{position:relative;overflow:hidden}
.page-hero .container{position:relative;z-index:2}
.page-hero:after{content:"";position:absolute;inset:-15%;z-index:1;background:radial-gradient(circle at 25% 28%,rgba(197,160,89,.13),transparent 45%),radial-gradient(circle at 82% 78%,rgba(90,150,220,.10),transparent 50%);filter:url(#liquid-distort);opacity:.6;pointer-events:none}

/* Cards, stage blocks — frosted glass (no per-card distortion filter, for scroll/paint cost) */
.card,.stage{background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,.02));backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);border-color:rgba(255,255,255,.16);box-shadow:0 18px 46px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.13);position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.15) 0%,transparent 35%);pointer-events:none}
.card:hover{transform:translateY(-3px);box-shadow:0 28px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18);border-color:rgba(255,255,255,.28)}
.light .card{background:linear-gradient(165deg,rgba(255,255,255,.86),rgba(255,255,255,.60));backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);border-color:rgba(255,255,255,.65);box-shadow:0 18px 46px rgba(14,43,77,.10),inset 0 1px 0 rgba(255,255,255,.9)}
.light .card:hover{box-shadow:0 28px 60px rgba(14,43,77,.16),inset 0 1px 0 rgba(255,255,255,.95);border-color:rgba(255,255,255,.9)}

/* CTA band, profile band, footer brand panel */
.cta-box,.profile-band{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02));backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-color:var(--glass-border-gold);box-shadow:var(--glass-shadow)}
.cta-box:after,.profile-band:after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--glass-sheen);mix-blend-mode:overlay;pointer-events:none}
.footer-brand{background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.015));backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.10);border-radius:24px;padding:24px;box-shadow:0 16px 40px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.10)}

/* Stat chips */
.stat{background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-color:rgba(255,255,255,.16)}

@media (prefers-reduced-motion:reduce){
  .card:hover,.light .card:hover{transform:none}
}

/* ============================================================
   THE INSTITUTIONAL FOLIO — REV17 (2026-07-21)
   Editorial financial-press design system: masthead treatment,
   a compact hero seal replacing the oversized floating logo card,
   a vertical data rail, bespoke hairline division icons, ghost
   numerals, exhibit-labelled tables, drop caps and pull-quotes.
   Chosen by a 3-judge panel over four other creative directions
   for lowest engineering/accessibility risk and strongest fit for
   a bank/government/CFO audience; the six division icons are
   grafted in from a runner-up concept to fix the "childish
   three-letter badge" complaint this system alone doesn't solve.
   Everything below is static — no new motion, no new colours, no
   new fonts, no build tooling. Decorative-only elements are
   aria-hidden and never carry text-contrast duty.
   ============================================================ */

/* Masthead treatment for the hero eyebrow (already uppercase; this adds framing) */
.hero .eyebrow{position:relative;padding:10px 0;margin-bottom:22px}
.hero .eyebrow:before,.hero .eyebrow:after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(197,160,89,.55),rgba(197,160,89,.08))}
.hero .eyebrow:before{top:0}
.hero .eyebrow:after{bottom:0}

/* Hero seal — replaces the oversized floating glass logo card */
.hero-seal-col{display:flex;flex-direction:column;align-items:center;gap:26px;width:min(300px,100%);margin-left:auto}
.hero-seal{position:relative;width:clamp(96px,11vw,132px);aspect-ratio:1;border-radius:50%;padding:14px;background:linear-gradient(165deg,rgba(255,255,255,.20),rgba(255,255,255,.04) 60%,rgba(197,160,89,.10));backdrop-filter:blur(24px) saturate(200%);-webkit-backdrop-filter:blur(24px) saturate(200%);border:1px solid rgba(255,255,255,.20);box-shadow:0 18px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center}
.hero-seal:before{content:"";position:absolute;inset:-24%;border-radius:50%;background:radial-gradient(circle,rgba(197,160,89,.20) 0%,rgba(120,170,230,.10) 45%,transparent 68%);pointer-events:none}
.hero-seal img{position:relative;z-index:1;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}

/* Hero data rail — replaces the three stat chips */
.hero-rail{width:100%;display:grid;gap:0;border-top:1px solid rgba(255,255,255,.14)}
.hero-rail-item{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.10);text-align:left}
.hero-rail-item strong{font-variant-numeric:tabular-nums;color:var(--gold-light);font-size:15px;font-weight:850;letter-spacing:-.01em;white-space:nowrap}
.hero-rail-item span{color:var(--muted);font-size:12.5px;line-height:1.4;grid-column:2}

/* Ghost numerals — methodology stage watermark (uses :before; the shared card
   sheen below is scoped to .card only so it never collides with this rule) */
.stage{position:relative;overflow:hidden}
.stage:before{content:attr(data-num);position:absolute;right:18px;top:-16px;font-size:clamp(72px,10vw,120px);font-weight:850;line-height:1;color:transparent;-webkit-text-stroke:1.75px rgba(197,160,89,.4);z-index:1;pointer-events:none;user-select:none}
.stage:after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:0;background:linear-gradient(115deg,rgba(255,255,255,.15) 0%,transparent 35%);pointer-events:none}
.stage-head,.stage p,.stage .stage-grid{position:relative;z-index:2}

/* Ghost numerals — industries sector index (uses :after; base .card:before
   sheen still applies underneath since sector cards carry the .card class) */
.sector-grid{counter-reset:sector}
.sector-grid .card{counter-increment:sector;position:relative;overflow:hidden}
.sector-grid .card:after{content:counter(sector,decimal-leading-zero);position:absolute;right:18px;top:14px;font-size:54px;font-weight:850;line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(197,160,89,.38);z-index:1;pointer-events:none;user-select:none}
.light .sector-grid .card:after{-webkit-text-stroke-color:rgba(156,121,54,.32)}
.sector-grid .card h3,.sector-grid .card p,.sector-grid .card .list{position:relative;z-index:2}
.sector-grid .card h3{padding-right:88px;min-height:54px}

/* Division-card hairline icons */
.card-icon svg{width:26px;height:26px;stroke:currentColor}

/* Exhibit-labelled tables */
main{counter-reset:exhibit}
.table-wrap{counter-increment:exhibit;position:relative;padding-top:30px}
.table-wrap:before{content:"Exhibit " counter(exhibit,decimal-leading-zero);position:absolute;top:0;left:0;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-light)}
.light .table-wrap:before{color:#9c7936}
.table td,.table th{font-variant-numeric:tabular-nums}
.table thead tr{border-bottom:2px solid rgba(255,255,255,.22)}
.light .table thead tr{border-bottom-color:rgba(12,30,54,.22)}

/* Drop cap */
.lede:first-letter{float:left;font-size:3.4em;line-height:.86;font-weight:850;color:var(--gold-light);padding:.03em .06em 0 0}
.light .lede:first-letter{color:#9c7936}

/* Pull quote */
.pull-quote{position:relative;margin:32px 0;padding:4px 0 4px 26px;border-left:2px solid var(--gold);max-width:56ch}
.pull-quote p{font-size:clamp(19px,2vw,24px);line-height:1.45;color:#f0f3f9;font-weight:500;margin:0}
.light .pull-quote p{color:var(--ink)}

/* Footer colophon */
.footer h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--gold-light)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);position:relative;padding-top:22px}
.footer-bottom:before{content:"";position:absolute;top:-5px;left:0;right:0;height:1px;background:rgba(255,255,255,.12)}
.footer-title-block{margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;letter-spacing:.04em;color:#93a0b4}

/* Social connect row (contact page) — uniform tiles, links to be activated
   once the channels launch; spans swap to anchors with no CSS change needed */
.social-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:16px 0 6px;padding:0;list-style:none}
.social-row li{margin:0}
.social-icon{display:block;width:168px;height:168px;transition:transform .25s ease}
.social-icon img{width:100%;height:100%;object-fit:contain}
.social-icon:hover{transform:translateY(-3px)}
@media (max-width:640px){
  .social-row{gap:14px}
  .social-icon{width:136px;height:136px}
}
.social-row-footer{gap:12px;margin:16px 0 0}
.social-row-footer .social-icon{width:92px;height:92px}
@media (max-width:640px){.social-row-footer .social-icon{width:84px;height:84px}}

/* Footer POPIA compliance block — sits between the brand paragraph (col 1)
   and the link/social columns, under Services/Company/Contact */
.footer-compliance{grid-column:2 / -1;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin-top:8px}
.footer-compliance p{margin:0;font-size:13px;line-height:1.6;color:#a9b4c4;max-width:78ch}
.footer-compliance a{color:var(--gold-light);text-decoration:underline;text-underline-offset:2px}
@media (max-width:980px){.footer-compliance{grid-column:1 / -1}}

/* Scroll-progress hairline */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--gold),var(--gold-light));z-index:1100;pointer-events:none}

/* Hero responsive: rebuild the two-column split for the new seal + rail */
@media (max-width:980px){
  .hero-seal-col{width:100%;margin-left:0;flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:20px}
  .hero-rail{width:auto;flex:1}
}
@media (max-width:640px){
  .hero-seal-col{flex-direction:column;align-items:center}
  .hero-seal{width:84px}
  .hero-rail{width:100%}
  .hero-rail-item{padding:11px 0}
}

/* REV25 correction (C-47) - footer brand seal: fills the open area left of the
   social icons and above the POPIA compliance block, on a white panel so the
   navy wordmark keeps contrast on the dark footer. */
.footer-grid > div:nth-child(2){grid-area:1 / 2}
.footer-grid > div:nth-child(3){grid-area:1 / 3}
.footer-grid > div:nth-child(4){grid-area:1 / 4}
.footer-seal{grid-row:1;grid-column:2 / 4;align-self:end;justify-self:center;background:#fff;border-radius:14px;padding:16px 26px;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.footer-seal img{display:block;width:200px;height:auto}
@media (max-width:980px){
  .footer-grid > div:nth-child(2),.footer-grid > div:nth-child(3),.footer-grid > div:nth-child(4){grid-area:auto}
  .footer-seal{grid-row:auto;grid-column:1 / -1;justify-self:center;margin-top:4px}
}

/* SEC1 - utility replacing an inline style blocked by the CSP */
.mt-26{margin-top:26px}