/* =========================================================
   CSAf — "Glass" style layer
   Loads AFTER site.css. Changes the look only: no content,
   links or page structure are touched.
   ========================================================= */
:root{
  --r:28px;
  --ease:cubic-bezier(.32,.72,0,1);              /* iOS-style glide */
  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.74);
  --glass-line:rgba(255,255,255,.75);
  --glass-shadow:0 1px 1px rgba(10,39,34,.04),0 10px 30px -8px rgba(10,39,34,.12),0 30px 60px -30px rgba(10,39,34,.18);
  --blur:blur(26px) saturate(180%);
  --dglass:rgba(255,255,255,.07);
  --dline:rgba(255,255,255,.14);
  --paper:#F3F5F4;
}

/* ---------- Ambient "wallpaper": soft brand-colour light behind everything */
body{background:var(--paper)}
body:before{content:"";position:fixed;inset:-10vmax;z-index:-5;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 12% 18%,rgba(23,128,138,.30),transparent 70%),
    radial-gradient(34vmax 34vmax at 88% 30%,rgba(29,95,168,.24),transparent 70%),
    radial-gradient(30vmax 30vmax at 70% 85%,rgba(43,182,115,.24),transparent 70%),
    radial-gradient(26vmax 26vmax at 20% 80%,rgba(201,161,90,.2),transparent 70%);
  animation:wall 40s ease-in-out infinite alternate}
@keyframes wall{to{transform:translate3d(-3vmax,2vmax,0) scale(1.06)}}

.kicker{font-size:12px;letter-spacing:.08em;font-weight:600;color:var(--teal)}
.kicker:before{display:none}
.kicker:after{content:"";order:-1;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(23,128,138,.14)}
.kicker.light{color:var(--gold-2)}
.kicker.light:after{box-shadow:0 0 0 4px rgba(230,204,146,.16)}
.sec-lede{color:#5E6B67}

/* ---------- Reusable glass surfaces */
.pillar,.front,.theme,.post,.hub-list li,.innovation,.course,.dd-panel{
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}

/* ---------- Navigation: a floating glass capsule */
.nav,.nav.solid{top:14px;left:50%;right:auto;transform:translateX(-50%);width:min(1240px,calc(100% - 28px));
  padding:8px 10px 8px 22px;border-radius:999px;background:rgba(255,255,255,.62);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.8);box-shadow:0 8px 30px -10px rgba(10,39,34,.25)}
.nav .brand,.nav .brand img,.nav.solid .brand,.nav.solid .brand img{height:40px}
.nav .logo-light{display:none}.nav .logo-dark{display:block}
.nav .menu>a,.nav .dd-btn{color:var(--text)}
.nav .menu>a:hover,.nav .dd-btn:hover{background:rgba(10,39,34,.06)}
.nav .menu>a.active,.nav .dd.active .dd-btn{background:rgba(10,39,34,.08);color:var(--ink)}
.nav .btn-line{color:var(--ink);border-color:rgba(10,39,34,.14)}
.nav .burger{border-color:rgba(10,39,34,.14)}
.nav .burger span{background:var(--ink)}
.nav.open{border-radius:28px}
.dd-panel{border-radius:22px}

/* ---------- Buttons: soft pills */
.btn{transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .3s}
.btn:hover{transform:scale(1.03)}
.btn:active{transform:scale(.97)}
.btn-ghost,.btn-line{background:rgba(255,255,255,.1);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.28)}
.btn-gold{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 18px -6px rgba(201,161,90,.6)}
.btn-dark{box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 8px 20px -8px rgba(10,39,34,.5)}

/* ---------- Hero: an inset dark panel, like a lock screen */
.hero{margin:10px;border-radius:38px;min-height:calc(100svh - 20px)}
.hero:after{background:linear-gradient(90deg,rgba(10,39,34,.85) 0%,rgba(10,39,34,.45) 50%,rgba(10,39,34,0) 80%)}
.hero-inner{padding-top:150px}
.hero-title em{font-family:var(--serif);font-weight:500}
.chip{border-radius:22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 20px 40px -20px rgba(0,0,0,.5)}

/* Themes strip: quiet text on the page, no dark band */
.marquee{background:transparent;color:#56645F;border:0;margin-top:6px}

/* ---------- Statement */

/* ---------- Icons: app-icon tiles in brand colours */
.ico,.pillar .ico,.theme .ico,.front .ico{border-radius:15px!important;color:#fff!important;
  background:linear-gradient(145deg,#2BB673 -20%,#17808A 45%,#1D5FA8 120%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -8px rgba(23,128,138,.7)}
.theme:hover .ico{background:linear-gradient(145deg,#2BB673 -20%,#17808A 45%,#1D5FA8 120%)!important}
.pillar:hover .ico{transform:scale(1.06)}

/* ---------- Pillars */
.pillar{border-radius:32px;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.pillar:before{display:none}
.pillar:hover{transform:translateY(-6px) scale(1.01)}
.p-num{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--ink);
  background:rgba(10,39,34,.06);padding:7px 12px;border-radius:99px;align-self:center}
.p-tag{font-size:18px}
.p-list{border-color:rgba(10,39,34,.08)}
.feature-pillar{background:rgba(10,39,34,.88);border-color:rgba(255,255,255,.12)}
.feature-pillar .p-num{color:var(--gold-2);background:rgba(255,255,255,.08)}
.innovation{background:var(--glass)}
.inno-mark{filter:saturate(.9)}

/* ---------- "What we do": cards that dissolve into their detail (no flipping) */
.flip{perspective:none}
.flip-in,.flip:hover .flip-in,.flip:focus-visible .flip-in,.flip.flipped .flip-in{transform:none;transition:transform .7s var(--ease)}
.flip:hover .flip-in{transform:translateY(-6px)}
.face{border-radius:28px;backface-visibility:visible;-webkit-backface-visibility:visible;
  transition:opacity .6s var(--ease),filter .6s var(--ease),transform .7s var(--ease)}
.front:before,.front:after{display:none}
.front .hint:before{content:"→"}
.back{transform:scale(.97);opacity:0;filter:blur(10px);pointer-events:none;
  background:rgba(10,39,34,.9);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.12);box-shadow:var(--glass-shadow)}
.flip:hover .back,.flip:focus-visible .back,.flip.flipped .back{opacity:1;filter:none;transform:none;pointer-events:auto}
.flip:hover .front,.flip:focus-visible .front,.flip.flipped .front{opacity:0;filter:blur(10px);transform:scale(1.03)}

/* ---------- Featured initiative: dark glass panel */
.feature-card{border-radius:38px;box-shadow:0 40px 80px -40px rgba(10,39,34,.6);border:1px solid rgba(255,255,255,.08)}
.feature .tags span{border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.big-stat,.legend{background:rgba(255,255,255,.08)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.16);border-radius:20px}

/* ---------- Themes */
.theme{border-radius:26px;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.theme:after{display:none}
.theme:hover{transform:translateY(-4px);border-color:var(--glass-line);box-shadow:0 30px 60px -30px rgba(10,39,34,.3)}

/* ---------- Vision, mission, values: inset dark panel with glass cards */
.vm{margin:0 10px;border-radius:38px}
.vm-card,.value{background:var(--dglass);border:1px solid var(--dline);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.vm-card{border-radius:32px}

.value{border-radius:28px}
.value:before{display:none}
.value .v-num{color:var(--gold-2);letter-spacing:.08em}

/* ---------- Insights */
.post{border-radius:28px;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.post:not(.soon):hover{transform:translateY(-6px)}
.post-art{margin:8px 8px 0;border-radius:22px}

/* ---------- Learn Hub banner */
.course{border-radius:38px}
.hub-list li{border-radius:18px}

/* ---------- Call to action + footer */
.cta{margin:0 10px 10px;border-radius:38px}
.footer{margin:0 10px 10px;border-radius:38px;background:#061A17}

/* ---------- Motion: things glide and come into focus */
.reveal{opacity:0;transform:translateY(26px) scale(.985);filter:blur(12px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none;filter:none}

@media (max-width:900px){
  .nav,.nav.solid{padding:6px 6px 6px 16px;top:10px;width:calc(100% - 20px)}
  .nav.open .menu{inset:80px 10px auto 10px;border-radius:28px;background:rgba(10,39,34,.92);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);max-height:calc(100svh - 100px)}
  .nav.open .menu>a,.nav.open .dd-btn{color:#fff}
  .nav.open{background:rgba(255,255,255,.8)}
  .nav.open .logo-dark{display:block}.nav.open .logo-light{display:none}
  .hero,.vm,.cta,.footer{margin-left:8px;margin-right:8px;border-radius:30px}
  .hero{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.reveal{filter:none!important}body:before{animation:none}}

/* fixes */
.eyebrow:before{display:none}
.eyebrow:after{content:"";order:-1;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(230,204,146,.16)}
.cert-real img{transform:rotate(1.5deg);border-radius:14px}
.course-visual{perspective:none}

/* No accent stripes on cards (top or side) */
.ccard:before,.a-card:after,.theme:after{display:none!important}
.ccard{border-top:0}
.pull{border-left:0;padding:28px 32px;border-radius:24px;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-line)}
.ccard{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);border-radius:28px}
.ccard li{background:rgba(31,46,43,.05)}