/* ============================================================
   Purdue Triangle Fraternity — shared styles
   Palette grounded in deep red + charcoal, with a
   structural triangle motif as the signature device.
   ============================================================ */

:root{
  --black:#090909;
  --ink:#141414;
  --paper:#f7f1ef;       /* warm red-balanced off-white */
  --paper-2:#eee4e2;
  --gold:#B31B1B;        /* elevated deep red */
  --gold-deep:#8F1414;
  --gold-bright:#B31B1B;
  --gray:#6a6a6a;
  --line:rgba(20,20,20,.13);
  --line-on-dark:rgba(255,255,255,.14);

  --display:"Anton","Archivo Expanded","Helvetica Neue",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI","Helvetica Neue",sans-serif;
  --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --maxw:1240px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:10px;
  font-weight:500;
}
.eyebrow::before{
  content:"";
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-bottom:9px solid var(--gold-deep);
  display:inline-block;
}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:.96;letter-spacing:-.01em;text-transform:uppercase}
h1{font-size:clamp(3rem,8vw,7.5rem)}
h2{font-size:clamp(2.2rem,5vw,4.2rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.9rem)}
.lede{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.5;color:var(--gray);font-weight:400}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:16px 26px;border-radius:2px;font-weight:500;
  transition:transform .25s ease,background .25s ease,color .25s ease;
  cursor:pointer;border:none;
}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translateX(5px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;box-shadow:0 12px 28px -18px rgba(255,255,255,0.225)}
.btn-gold:hover{background:linear-gradient(135deg,var(--gold-bright),var(--gold));color:#fff;box-shadow:0 16px 36px -18px rgba(255,255,255,0.270)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#000}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-ghost-light{background:transparent;border:1px solid var(--line-on-dark);color:var(--paper)}
.btn-ghost-light:hover{border-color:var(--paper)}

/* ---------- nav ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  transition:background .35s ease,padding .35s ease,box-shadow .35s ease;
}
header.nav.solid{
  background:rgba(247,241,239,.92);
  backdrop-filter:blur(14px);
  padding:12px 28px;
  box-shadow:0 1px 0 var(--line);
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.brand .mark{
  width:26px;height:26px;display:block;
}
.brand .mark svg{display:block}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);opacity:.92;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-links a.active{opacity:1;color:var(--gold)}
.nav-cta{padding:11px 18px!important;font-size:11px!important}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s}
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:40px;
  transform:translateY(-100%);transition:transform .4s cubic-bezier(.7,0,.2,1);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{font-family:var(--display);font-size:2.4rem;color:var(--paper);text-transform:uppercase;padding:6px 0;opacity:.85}
.mobile-menu a:hover{color:var(--gold)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- sections ---------- */
section{position:relative}
.pad{padding:110px 0}
.pad-sm{padding:72px 0}
.dark{background:var(--ink);color:var(--paper)}
.dark .lede{color:rgba(246,244,238,.7)}
.dark .eyebrow{color:var(--gold)}
.dark .eyebrow::before{border-bottom-color:var(--gold)}

/* section index marker */
.smark{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--gold-deep)}

/* footer */
footer.site{background:linear-gradient(180deg,#120b0c 0%, var(--black) 100%);color:var(--paper);padding:80px 0 40px}
footer.site a{opacity:.7;transition:opacity .2s}
footer.site a:hover{opacity:1}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:60px;border-bottom:1px solid var(--line-on-dark)}
.foot-grid h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:10px;font-size:14px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(246,244,238,.5);flex-wrap:wrap;gap:14px}

@media (max-width:880px){
  .nav-links{display:none}
  .burger{display:flex}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .pad{padding:74px 0}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr}
}

/* ============================================================
   Smooth animation upgrade
   ============================================================ */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.22,.61,.36,1);
  --scroll-progress:0;
}

html.js body::before{
  content:"";
  position:fixed;
  left:0;top:0;height:3px;width:calc(var(--scroll-progress) * 100%);
  background:linear-gradient(90deg,var(--gold-deep),var(--gold),var(--gold-bright));
  z-index:9999;
  transform-origin:left;
  box-shadow:0 0 20px rgba(255,255,255,0.126);
}

body{animation:pageFade .7s var(--ease-out) both;}
@keyframes pageFade{from{opacity:0}to{opacity:1}}

header.nav{will-change:transform,background,padding;animation:navDrop .8s var(--ease-out) both .05s}
@keyframes navDrop{from{transform:translateY(-18px);opacity:0}to{transform:none;opacity:1}}

.brand .mark{transition:transform .45s var(--ease-out),filter .45s var(--ease-out)}
.brand:hover .mark{transform:rotate(120deg) scale(1.04);filter:drop-shadow(0 0 10px rgba(255,255,255,0.135))}
.nav-links a:not(.btn){position:relative}
.nav-links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease-out);opacity:.65;
}
.nav-links a:not(.btn):hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}

.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu a{transform:translateY(-12px);opacity:0;transition:transform .55s var(--ease-out),opacity .55s var(--ease-out),color .2s}
.mobile-menu.open a{transform:none;opacity:.88}
.mobile-menu.open a:nth-child(1){transition-delay:.08s}.mobile-menu.open a:nth-child(2){transition-delay:.12s}.mobile-menu.open a:nth-child(3){transition-delay:.16s}.mobile-menu.open a:nth-child(4){transition-delay:.20s}.mobile-menu.open a:nth-child(5){transition-delay:.24s}.mobile-menu.open a:nth-child(6){transition-delay:.28s}.mobile-menu.open a:nth-child(7){transition-delay:.32s}

.hero-bg img,.subhero .bg img,.framed img,.media img,.gallery img,.bgall img{will-change:transform;transition:transform 1.1s var(--ease-out),filter .6s var(--ease-out),opacity .6s var(--ease-out)}
.hero-bg img{transform:translate3d(0,calc(var(--parallax-y,0) * .18px),0) scale(1.06)}
.subhero .bg img{transform:translate3d(0,calc(var(--parallax-y,0) * .12px),0) scale(1.05)}

.hero h1{animation:heroRise .95s var(--ease-out) both .18s;will-change:transform,opacity}
.hero-tag{animation:heroRise .85s var(--ease-out) both .08s}
.hero-sub{animation:heroRise .95s var(--ease-out) both .32s}
.hero-cta{animation:heroRise .95s var(--ease-out) both .45s}
.hero-stats .st{animation:statUp .85s var(--ease-out) both;animation-delay:calc(.55s + var(--stagger,0) * 90ms)}
.hero-stats .st:nth-child(1){--stagger:0}.hero-stats .st:nth-child(2){--stagger:1}.hero-stats .st:nth-child(3){--stagger:2}.hero-stats .st:nth-child(4){--stagger:3}
@keyframes heroRise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes statUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.subhero .wrap,.subhero .inner{animation:heroRise .9s var(--ease-out) both .12s}

.reveal{opacity:0;transform:translate3d(0,34px,0);filter:blur(8px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out)}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
.reveal.in > .pillar,.reveal.in > .val,.reveal.in > .way,.reveal.in > .tier,.reveal.in > .concern,.reveal.in > .q,.reveal.in > .s,.reveal.in > .row,.reveal.in > .card,.reveal.in > .ck,.reveal.in > .c,.reveal.in > .term{
  animation:childLift .75s var(--ease-out) both;animation-delay:calc(var(--i,0) * 65ms);
}
@keyframes childLift{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.btn,.aud,.pillar,.val,.way,.tier,.concern,.card,.step,.q,.term,.s,.c,.fact{
  will-change:transform;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s var(--ease-out),background .35s var(--ease-out),color .35s var(--ease-out);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.aud:hover,.pillar:hover,.val:hover,.way:hover,.tier:hover,.concern:hover,.card:hover,.step:hover,.q:hover,.term:hover,.s:hover,.c:hover,.fact:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 54px -34px rgba(0,0,0,.45);
}
.dark .pillar:hover,.dark .s:hover,.dark .c:hover{box-shadow:0 28px 70px -38px rgba(255,255,255,0.084)}

.aud::before,.pillar::before,.val::before,.way::before,.tier::before,.concern::before,.card::before,.step::before,.q::before,.term::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.16) 42%,transparent 58%);
  transform:translateX(-120%);transition:transform .75s var(--ease-out);
}
.aud:hover::before,.pillar:hover::before,.val:hover::before,.way:hover::before,.tier:hover::before,.concern:hover::before,.card:hover::before,.step:hover::before,.q:hover::before,.term:hover::before{transform:translateX(120%)}
.aud,.pillar,.val,.way,.tier,.concern,.card,.step,.q,.term{position:relative;overflow:hidden}

.framed{overflow:visible}
.framed:hover img,.media:hover img{transform:scale(1.035)}
.framed::before,.framed::after{transition:transform .55s var(--ease-out),border-color .35s var(--ease-out)}
.framed:hover::before{transform:translate(-5px,-5px)}
.framed:hover::after{transform:translate(5px,5px)}

.marquee-track{will-change:transform}
.gallery a,.bgall > *{clip-path:inset(0 round 3px)}
.gallery a:hover img,.bgall > *:hover img{transform:scale(1.08) rotate(.4deg)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none;filter:none}.hero-bg img,.subhero .bg img{transform:none}
  html.js body::before{display:none}
}

/* ============================================================
   Cinematic texture + image treatment upgrade
   Inspired by dark travel editorial layouts: grain, misty overlays,
   framed image cards, deeper contrast, and smooth image motion.
   ============================================================ */
:root{
  --old-rose:#B31B1B;
  --charcoal:#141516;
  --charcoal-2:#1a1b1d;
  --smoke:rgba(255,255,255,.055);
}

html.js body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  opacity:.24;
  mix-blend-mode:multiply;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.95) 0 1px, transparent 1px),
    radial-gradient(circle at 82% 30%, rgba(0,0,0,.65) 0 1px, transparent 1px),
    radial-gradient(circle at 45% 76%, rgba(0,0,0,.48) 0 1px, transparent 1px),
    linear-gradient(115deg, rgba(255,255,255,.025), transparent 38%, rgba(255,255,255,0.027));
  background-size:31px 31px,43px 43px,67px 67px,100% 100%;
}

body{
  background:
    radial-gradient(circle at 20% -10%, rgba(255,255,255,0.054), transparent 34%),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,0.030), transparent 28%),
    linear-gradient(180deg,var(--paper) 0%,#ebe7da 42%,#151617 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(20,20,22,.075) 0 1px, transparent 1px 94px),
    repeating-linear-gradient(0deg, rgba(20,20,22,.055) 0 1px, transparent 1px 94px);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 72%);
}

section.pad,
section.pad-sm,
.cta-band,
.marquee{
  isolation:isolate;
}
section.pad::before,
section.pad-sm::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.048), transparent 28%),
    linear-gradient(135deg, transparent 0 72%, rgba(255,255,255,0.026) 72% 100%);
  opacity:.78;
}
.dark,
footer.site{
  background:
    linear-gradient(180deg, rgba(10,13,15,.92), rgba(22,22,22,.98)),
    radial-gradient(circle at 70% 10%, rgba(255,255,255,0.066), transparent 36%),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.039), transparent 32%),
    var(--ink);
  position:relative;
  overflow:hidden;
}
.dark::before,
footer.site::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 32%);
}

.hero{background:var(--charcoal);overflow:hidden;isolation:isolate}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,8,8,.84) 0%, rgba(8,8,8,.46) 42%, rgba(8,8,8,.76) 100%),
    linear-gradient(180deg, rgba(8,8,8,.15) 0%, rgba(8,8,8,.82) 86%, var(--charcoal) 100%),
    radial-gradient(circle at 18% 45%, rgba(255,255,255,0.066), transparent 28%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.42;
  background:
    repeating-linear-gradient(90deg, transparent 0 112px, rgba(255,255,255,.22) 113px, transparent 114px),
    linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,0.078) 58.2%, transparent 58.6%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.6), transparent 70%);
}
.hero-bg img{filter:saturate(.9) contrast(1.08) brightness(.76)}
.hero h1{text-shadow:0 18px 55px rgba(0,0,0,.55)}
.hero-sub{max-width:620px;text-shadow:0 10px 30px rgba(0,0,0,.6)}
.hero-stats{background:linear-gradient(180deg, rgba(16,16,16,.25), rgba(16,16,16,.72));backdrop-filter:blur(3px)}
.hero-stats .st{position:relative;padding-left:18px}
.hero-stats .st::before{
  content:"";
  position:absolute;
  left:0;top:22px;width:3px;height:30px;
  background:linear-gradient(var(--old-rose),var(--gold));
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .8s var(--ease-out);
}
.hero-stats .st:hover::before{transform:scaleY(1)}

/* Image cards get the darker, textured editorial look */
.framed,
.gallery a,
.hero-bg,
.subhero .bg,
.media,
.bgall,
[class*="card"],
.aud,
.pillar,
.term,
.q,
.concern,
.tier,
.way,
.val{
  position:relative;
}
.framed,
.gallery a,
.media,
.bgall,
.aud,
.pillar,
.term,
.q,
.concern,
.tier,
.way,
.val{
  box-shadow:0 24px 60px -38px rgba(0,0,0,.72);
}
.framed::before{border-top-color:var(--old-rose);border-left-color:var(--old-rose)}
.framed::after{border-bottom-color:var(--gold);border-right-color:var(--gold)}
.framed img,
.gallery img,
.media img,
.bgall img{
  filter:saturate(.88) contrast(1.08) brightness(.9);
}
.framed::marker{display:none}
.framed .texture-layer{display:none}
.framed::after,
.gallery a::after,
.media::after,
.bgall::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.42) 100%),
    radial-gradient(circle at 14% 18%, rgba(255,255,255,0.060), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 28px);
  opacity:.75;
  mix-blend-mode:multiply;
  transition:opacity .55s var(--ease-out);
}
.framed:hover img,
.gallery a:hover img,
.media:hover img,
.bgall:hover img{
  transform:scale(1.075) translateY(-4px);
  filter:saturate(1.04) contrast(1.13) brightness(.98);
}
.framed:hover::after,
.gallery a:hover::after,
.media:hover::after,
.bgall:hover::after{opacity:.44}

.gallery{gap:16px}
.gallery a{border:1px solid rgba(255,255,255,.12);background:#131415;transform:translateZ(0)}
.gallery a::before{
  content:"0" counter(gallery-item);
  counter-increment:gallery-item;
  position:absolute;
  right:16px;top:14px;z-index:2;
  color:rgba(255,255,255,.88);
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-shadow:0 8px 22px rgba(0,0,0,.75);
}
.gallery{counter-reset:gallery-item}

.aud,
.pillar,
.term,
.q,
.concern,
.tier,
.way,
.val{
  overflow:hidden;
  border-color:rgba(255,255,255,0.060)!important;
  transition:transform .45s var(--ease-out), border-color .45s var(--ease-out), box-shadow .45s var(--ease-out), background .45s var(--ease-out);
}
.aud::before,
.pillar::before,
.term::before,
.q::before,
.concern::before,
.tier::before,
.way::before,
.val::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,0.036), transparent 32%),
    radial-gradient(circle at 90% 0%, rgba(255,255,255,0.054), transparent 28%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 22px);
  opacity:.45;
  transition:opacity .45s var(--ease-out);
}
.aud:hover,
.pillar:hover,
.term:hover,
.q:hover,
.concern:hover,
.tier:hover,
.way:hover,
.val:hover{
  transform:translateY(-8px);
  border-color:var(--gold)!important;
  box-shadow:0 30px 80px -42px rgba(0,0,0,.85);
}
.aud:hover::before,
.pillar:hover::before,
.term:hover::before,
.q:hover::before,
.concern:hover::before,
.tier:hover::before,
.way:hover::before,
.val:hover::before{opacity:.8}

.marquee{
  background:linear-gradient(90deg,#131415,#1b1c1e,#131415);
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.marquee-track span{color:rgba(248,248,246,.94);text-shadow:0 8px 30px rgba(0,0,0,.45)}
.marquee-track .dot{border-bottom-color:var(--old-rose)}

.cta-band{
  background:
    linear-gradient(135deg, rgba(255,255,255,0.282), rgba(255,255,255,0.060)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 42px),
    var(--gold);
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.22), transparent 36%);
  animation:slowDrift 12s var(--ease-soft) infinite alternate;
}
@keyframes slowDrift{from{transform:translate3d(-2%,1%,0) rotate(0deg)}to{transform:translate3d(3%,-2%,0) rotate(5deg)}}

@media (prefers-reduced-motion:reduce){
  .cta-band::before{animation:none}
  .framed:hover img,.gallery a:hover img,.media:hover img,.bgall:hover img{transform:none}
}

/* ============================================================
   Full-section background image fade system
   Makes each major section feel like one smooth cinematic page,
   with the image softly transitioning as you scroll.
   ============================================================ */
.site-bg-fader{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  background:#101112;
  pointer-events:none;
}
.site-bg-layer{
  position:absolute;
  inset:-5%;
  opacity:0;
  background-position:center;
  background-size:cover;
  transform:scale(1.06);
  transition:opacity 1.25s var(--ease-out), transform 4.8s var(--ease-soft), filter 1.25s var(--ease-out);
  filter:saturate(.82) contrast(1.12) brightness(.48) blur(1px);
  will-change:opacity,transform,filter;
}
.site-bg-layer.active{
  opacity:1;
  transform:scale(1.015) translate3d(0, calc(var(--bg-drift, 0) * -10px), 0);
  filter:saturate(.9) contrast(1.12) brightness(.52) blur(0);
}
.site-bg-fader::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(180deg, rgba(8,8,8,.58), rgba(8,8,8,.78) 38%, rgba(8,8,8,.94)),
    radial-gradient(circle at 22% 20%, rgba(255,255,255,0.048), transparent 30%),
    radial-gradient(circle at 78% 34%, rgba(255,255,255,0.042), transparent 34%);
}
.site-bg-fader::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  opacity:.30;
  mix-blend-mode:screen;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.095) 0 1px, transparent 1px 120px),
    radial-gradient(circle at 40% 20%, rgba(255,255,255,.22), transparent 2px);
  background-size:auto,auto,34px 34px;
}

/* Let sections breathe over the shared fading image instead of hard cuts. */
section.section-fade{
  background:transparent!important;
  overflow:hidden;
}
section.section-fade::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,12,12,.18), rgba(12,12,12,.72) 46%, rgba(12,12,12,.90)),
    radial-gradient(circle at 12% 16%, rgba(255,255,255,0.048), transparent 30%);
  opacity:.94;
}
section.section-fade:not(.hero):not(.dark):not(.cta-band){
  color:var(--paper);
}
section.section-fade:not(.hero):not(.dark):not(.cta-band) .lede,
section.section-fade:not(.hero):not(.dark):not(.cta-band) p{
  color:rgba(246,244,238,.78);
}
section.section-fade:not(.hero):not(.dark):not(.cta-band) .btn-ghost{
  border-color:rgba(255,255,255,.24);
  color:var(--paper);
}
section.section-fade .wrap{position:relative;z-index:2}
.marquee{background:rgba(16,16,16,.72);color:var(--paper);backdrop-filter:blur(6px)}
.cta-band.section-fade{
  background:linear-gradient(180deg, rgba(255,255,255,0.258), rgba(255,255,255,0.126))!important;
}

/* Travel-template inspired section transitions */
.section-fade.reveal-bg{
  animation:none;
}
.section-fade .wrap,
.section-fade .hero-inner{
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out), filter .75s var(--ease-out);
}
.section-fade.is-past .wrap,
.section-fade.is-past .hero-inner{
  opacity:.54;
  transform:translateY(-16px) scale(.985);
  filter:blur(1.5px);
}
.section-fade.is-current .wrap,
.section-fade.is-current .hero-inner{
  opacity:1;
  transform:none;
  filter:none;
}
.section-fade.is-next .wrap,
.section-fade.is-next .hero-inner{
  opacity:.72;
  transform:translateY(16px) scale(.992);
}

/* Make inline photos feel layered over the same background. */
.framed,
.gallery a,
.media,
.bgall>*{
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(12,12,12,.22);
  backdrop-filter:blur(2px);
}
.framed img,.gallery img,.media img,.bgall img{
  opacity:.92;
  mix-blend-mode:normal;
}
.framed::before{
  border-color:rgba(255,255,255,.6)!important;
}
.framed::after{
  border-color:rgba(255,255,255,0.216)!important;
}

@media (prefers-reduced-motion:reduce){
  .site-bg-layer{transition:none!important;transform:none!important}
  .section-fade .wrap,.section-fade .hero-inner{transition:none!important;opacity:1!important;transform:none!important;filter:none!important}
}

/* ============================================================
   Blend/readability refinement
   Fewer hard image changes, more breathable sections, stronger text safety.
   ============================================================ */
.site-bg-layer{
  transition:opacity 1.8s var(--ease-out), transform 7s var(--ease-soft), filter 1.6s var(--ease-out);
  filter:saturate(.72) contrast(1.04) brightness(.40) blur(1.5px);
}
.site-bg-layer.active{
  filter:saturate(.78) contrast(1.06) brightness(.43) blur(.4px);
}
.site-bg-fader::before{
  background:
    linear-gradient(180deg, rgba(8,8,8,.72), rgba(8,8,8,.82) 36%, rgba(8,8,8,.96)),
    linear-gradient(90deg, rgba(8,8,8,.78), rgba(8,8,8,.32) 48%, rgba(8,8,8,.76)),
    radial-gradient(circle at 22% 20%, rgba(255,255,255,0.030), transparent 32%),
    radial-gradient(circle at 78% 34%, rgba(255,255,255,0.030), transparent 36%);
}
.site-bg-fader::after{opacity:.10}

/* Sections without their own image now act as calm blending zones. */
section.section-fade.section-clean,
section.section-fade:not([data-bg]):not(.hero):not(.cta-band){
  background:
    linear-gradient(180deg, rgba(15,15,15,.92), rgba(19,19,19,.96)),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.025), transparent 30%),
    var(--charcoal)!important;
}
section.section-fade.section-clean::before,
section.section-fade:not([data-bg]):not(.hero):not(.cta-band)::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 22%, rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 110px);
  opacity:.55;
}
section.section-fade{box-shadow:inset 0 1px rgba(255,255,255,.04), inset 0 -1px rgba(255,255,255,.04)}
section.section-fade + section.section-fade::after{
  content:"";
  position:absolute;
  left:0;right:0;top:-120px;height:240px;
  z-index:0;pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(12,12,12,.62) 48%, transparent);
}

/* Readable content surfaces over image backgrounds. */
section.section-fade:not(.hero) .copy,
section.section-fade:not(.hero) .lead,
section.section-fade:not(.hero) .ask,
section.section-fade:not(.hero) .faq,
section.section-fade:not(.hero) .gloss,
section.section-fade:not(.hero) .values,
section.section-fade:not(.hero) .ways,
section.section-fade:not(.hero) .tiers,
section.section-fade:not(.hero) .concerns,
section.section-fade:not(.hero) .legacy,
section.section-fade:not(.hero) .pillars,
section.section-fade:not(.hero) .aud-grid{
  position:relative;
  border-radius:4px;
}
section.section-fade:not(.hero) .copy,
section.section-fade:not(.hero) .lead{
  background:linear-gradient(135deg, rgba(12,12,12,.68), rgba(12,12,12,.36));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 70px -50px rgba(0,0,0,.9);
  backdrop-filter:blur(5px);
  padding:clamp(20px,3vw,34px);
}
section.section-fade h2,
section.section-fade h3{color:var(--paper);text-shadow:0 12px 34px rgba(0,0,0,.62)}
section.section-fade p,
section.section-fade li{color:rgba(248,248,246,.94)}
section.section-fade strong{color:#fff}
section.section-fade .lede{color:rgba(246,244,238,.84)}

/* Cards stay legible instead of disappearing into the photo. */
section.section-fade .aud,
section.section-fade .pillar,
section.section-fade .term,
section.section-fade .q,
section.section-fade .concern,
section.section-fade .tier,
section.section-fade .way,
section.section-fade .val,
section.section-fade .card,
section.section-fade .step,
section.section-fade .fact,
section.section-fade .s,
section.section-fade .c{
  background:linear-gradient(135deg, rgba(16,16,16,.84), rgba(24,24,24,.76))!important;
  color:var(--paper)!important;
  border-color:rgba(255,255,255,.16)!important;
  backdrop-filter:blur(8px);
}
section.section-fade .aud p,
section.section-fade .pillar p,
section.section-fade .term p,
section.section-fade .q p,
section.section-fade .concern p,
section.section-fade .tier p,
section.section-fade .way p,
section.section-fade .val p,
section.section-fade .card p,
section.section-fade .step p,
section.section-fade .fact p,
section.section-fade .s p,
section.section-fade .c p{color:rgba(246,244,238,.76)!important}

/* Inline images are dimmed just enough to blend with the full-page background. */
.framed img,.gallery img,.media img,.bgall img{filter:saturate(.82) contrast(1.02) brightness(.78)}
.framed::after,.gallery a::after,.media::after,.bgall::after{opacity:.86;background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.54)),radial-gradient(circle at 14% 18%, rgba(255,255,255,0.036), transparent 34%)}

/* Navigation remains readable on dark hero/image backgrounds. */
header.nav:not(.solid) .brand,
header.nav:not(.solid) .nav-links a:not(.btn){color:var(--paper);text-shadow:0 10px 28px rgba(0,0,0,.55)}
header.nav:not(.solid) .burger span{background:var(--paper)}
header.nav:not(.solid) .brand .mark svg polygon{stroke:var(--gold)}

/* ============================================================
   Final readability/theme polish
   - removes the red wash from the homepage CTA
   - gives the top navigation a darker cinematic glass treatment
   ============================================================ */

/* CTA: no red tint, just warm gold + dark glass for readability */
.cta-band,
.cta-band.section-fade{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.276), rgba(143,20,20,.86)),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.28), transparent 34%),
    repeating-linear-gradient(90deg, rgba(12,12,13,.08) 0 1px, transparent 1px 64px),
    var(--gold)!important;
  color:var(--ink)!important;
}
.cta-band::before{
  background:
    radial-gradient(circle at 48% 24%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(90deg, transparent, rgba(12,12,13,.08), transparent)!important;
}
.cta-band .eyebrow,
.cta-band .eyebrow[style]{
  color:rgba(12,12,13,.72)!important;
  text-shadow:none!important;
}
.cta-band .eyebrow::before{border-bottom-color:rgba(12,12,13,.55)!important}
.cta-band h2,
section.cta-band.section-fade h2{
  color:var(--ink)!important;
  text-shadow:0 16px 42px rgba(255,255,255,.24)!important;
}
.cta-band p,
section.cta-band.section-fade p{
  color:rgba(12,12,13,.78)!important;
  text-shadow:none!important;
}
.cta-band .btn-dark{
  background:rgba(12,12,13,.92)!important;
  color:var(--paper)!important;
  box-shadow:0 18px 45px -28px rgba(0,0,0,.8);
}

/* Top taskbar: theme-matched glass instead of flat light bar */
header.nav{
  margin:14px auto 0;
  left:28px;
  right:28px;
  width:auto;
  max-width:calc(var(--maxw) + 56px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(13,13,13,.58), rgba(13,13,13,.34));
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  box-shadow:0 18px 50px -34px rgba(0,0,0,.92), inset 0 1px rgba(255,255,255,.10);
}
header.nav.solid{
  background:linear-gradient(180deg, rgba(14,14,14,.88), rgba(14,14,14,.74));
  border-color:rgba(255,255,255,0.066);
  padding:12px 24px;
  box-shadow:0 18px 55px -32px rgba(0,0,0,.95), inset 0 1px rgba(255,255,255,.08);
}
header.nav .brand,
header.nav.solid .brand,
header.nav:not(.solid) .brand,
header.nav .nav-links a:not(.btn),
header.nav.solid .nav-links a:not(.btn),
header.nav:not(.solid) .nav-links a:not(.btn){
  color:rgba(246,244,238,.92)!important;
  text-shadow:0 8px 24px rgba(0,0,0,.68)!important;
}
header.nav .nav-links a:not(.btn){opacity:.82}
header.nav .nav-links a:not(.btn):hover,
header.nav .nav-links a.active{
  opacity:1;
  color:var(--gold-bright)!important;
}
header.nav .nav-links a:not(.btn)::after{
  bottom:-10px;
  background:linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  height:1px;
}
header.nav .brand .mark svg polygon,
header.nav.solid .brand .mark svg polygon,
.brand .mark svg polygon{stroke:var(--gold)!important}
header.nav .nav-cta{
  background:rgba(255,255,255,0.276)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px rgba(255,255,255,.28), 0 12px 28px -22px rgba(0,0,0,.8);
}
header.nav .nav-cta:hover{background:var(--gold-bright)!important;transform:translateY(-1px)}
header.nav .burger span,
header.nav.solid .burger span{background:var(--paper)!important}

@media(max-width:880px){
  header.nav{left:14px;right:14px;margin-top:10px;padding:12px 16px;border-radius:22px}
  header.nav.solid{padding:10px 16px}
}
@media(max-width:520px){
  header.nav .brand{font-size:17px;gap:9px}
  header.nav .brand .mark{width:22px;height:22px}
}


/* Final red/white polish requested */
:root{--triangle-red:#B31B1B;}
svg polygon, .eyebrow::before, .marquee-track .dot, .aud .tri{
  border-bottom-color:var(--triangle-red)!important;
  stroke:var(--triangle-red)!important;
}
.identity-mark svg polygon, .brand .mark svg polygon{stroke:var(--triangle-red)!important;}
.hero-tag .eyebrow{
  border-top:1px solid rgba(255,255,255,.42)!important;
  border-bottom:1px solid rgba(255,255,255,.34)!important;
  background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.055),transparent)!important;
}
.identity-kicker{
  border-top:1px solid rgba(255,255,255,.48)!important;
  border-bottom:1px solid rgba(255,255,255,.38)!important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent),repeating-linear-gradient(135deg,rgba(255,255,255,.10) 0 1px,transparent 1px 7px)!important;
}
.identity-band::after, .hero::after, .site-bg-fader::after{filter:contrast(1.18) brightness(1.08);}


/* Requested frosted ICE-style info texture + white Beta tag */
:root{--frosted-ice:rgba(235,242,243,.105);--frosted-ice-soft:rgba(255,255,255,.055);}
.hero-tag .eyebrow{
  color:#fff!important;
  text-shadow:0 2px 18px rgba(0,0,0,.88)!important;
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.23), transparent 20%),
    radial-gradient(circle at 68% 64%, rgba(169,188,186,.18), transparent 28%),
    linear-gradient(90deg, rgba(235,242,243,.105), rgba(217,226,224,.065), rgba(255,255,255,.018))!important;
  border-top:1px solid rgba(255,255,255,.18)!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.10), inset 0 -1px rgba(255,255,255,.055), 0 18px 48px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(18px) saturate(.82)!important;
}
.hero-tag .eyebrow::before{border-bottom-color:#fff!important;filter:drop-shadow(0 0 10px rgba(255,255,255,.20))!important;}

/* Make the information panels feel closer to the blurred ICE reference image: translucent, cool, and textured. */
section.section-fade .aud,
section.section-fade .pillar,
section.section-fade .term,
section.section-fade .q,
section.section-fade .concern,
section.section-fade .tier,
section.section-fade .way,
section.section-fade .val,
section.section-fade .card,
section.section-fade .step,
section.section-fade .fact,
section.section-fade .s,
section.section-fade .c,
.identity-kicker{
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.24), transparent 22%),
    radial-gradient(circle at 82% 72%, rgba(152,170,168,.18), transparent 30%),
    linear-gradient(135deg, rgba(232,240,241,.13), rgba(116,131,130,.075) 46%, rgba(12,12,12,.20))!important;
  border-color:rgba(255,255,255,.20)!important;
  backdrop-filter:blur(18px) saturate(.78)!important;
  -webkit-backdrop-filter:blur(18px) saturate(.78)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12), inset 0 -1px rgba(255,255,255,.055), 0 26px 70px -42px rgba(0,0,0,.82)!important;
}
section.section-fade .aud::after,
section.section-fade .pillar::after,
section.section-fade .term::after,
section.section-fade .q::after,
section.section-fade .concern::after,
section.section-fade .tier::after,
section.section-fade .way::after,
section.section-fade .val::after,
section.section-fade .card::after,
section.section-fade .step::after,
section.section-fade .fact::after,
section.section-fade .s::after,
section.section-fade .c::after,
.identity-kicker::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.40;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 13px);
  mix-blend-mode:screen;
}
.identity-kicker{position:relative;overflow:hidden;}

/* ============================================================
   Texture correction requested
   - texture belongs on the dark section/background boxes, not on cards
   - restores cards like “People Who Get It” to the cleaner pre-frosted look
   ============================================================ */
section.section-fade,
.dark,
footer.site,
.marquee,
.cta-band{
  position:relative;
  isolation:isolate;
}

/* Premium subtle texture on the large dark background panels */
section.section-fade::before,
section.section-fade.section-clean::before,
section.section-fade:not([data-bg]):not(.hero):not(.cta-band)::before,
.dark::before,
footer.site::before{
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,0.036), transparent 31%),
    radial-gradient(circle at 86% 68%, rgba(255,255,255,.045), transparent 34%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 104px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 104px),
    repeating-radial-gradient(circle at 28% 24%, rgba(255,255,255,.055) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(0,0,0,.20))!important;
  opacity:.42!important;
  mix-blend-mode:screen;
}

/* Extra grain layer on the actual black blocks behind content */
section.section-fade > .wrap::before,
.dark > .wrap::before,
footer.site > .wrap::before{
  content:"";
  position:absolute;
  inset:-36px -28px;
  z-index:-1;
  pointer-events:none;
  opacity:.16;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.11) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 72% 62%, rgba(255,255,255,.07) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 1px, transparent 1px 18px);
  mask-image:linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}

/* Revert content boxes/cards from frosted ICE style back to clean dark cards */
section.section-fade .aud,
section.section-fade .pillar,
section.section-fade .term,
section.section-fade .q,
section.section-fade .concern,
section.section-fade .tier,
section.section-fade .way,
section.section-fade .val,
section.section-fade .card,
section.section-fade .step,
section.section-fade .fact,
section.section-fade .s,
section.section-fade .c{
  background:linear-gradient(135deg, rgba(16,16,16,.84), rgba(24,24,24,.76))!important;
  border-color:rgba(255,255,255,.16)!important;
  color:var(--paper)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  box-shadow:0 24px 60px -38px rgba(0,0,0,.72)!important;
}

/* Remove the frosted texture overlay from cards themselves */
section.section-fade .aud::after,
section.section-fade .pillar::after,
section.section-fade .term::after,
section.section-fade .q::after,
section.section-fade .concern::after,
section.section-fade .tier::after,
section.section-fade .way::after,
section.section-fade .val::after,
section.section-fade .card::after,
section.section-fade .step::after,
section.section-fade .fact::after,
section.section-fade .s::after,
section.section-fade .c::after{
  display:none!important;
  content:none!important;
}

/* Keep the Beta Chapter tag white and low-opacity, without spreading that style to all cards */
.hero-tag .eyebrow{
  color:#fff!important;
  background:linear-gradient(90deg, rgba(12,12,12,.26), rgba(12,12,12,.12), transparent)!important;
  border-top:1px solid rgba(255,255,255,.22)!important;
  border-bottom:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.06), 0 18px 48px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
}
.hero-tag .eyebrow::before{border-bottom-color:#fff!important;}


/* ============================================================
   Final neutral-gray background pass
   Removes the blue/green cast from dark textured sections while
   preserving subtle texture and the red accent system.
   ============================================================ */
:root{
  --black:#090909;
  --ink:#141414;
  --charcoal:#141516;
  --charcoal-2:#1a1b1d;
  --neutral-dark:#101112;
  --neutral-panel:#151617;
  --neutral-panel-2:#1b1c1e;
}

body{
  background:
    radial-gradient(circle at 20% -10%, rgba(255,255,255,.045), transparent 34%),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.026), transparent 28%),
    linear-gradient(180deg,var(--paper) 0%,#ebe7da 42%,#151617 100%)!important;
}

.dark,
footer.site,
.marquee,
section.section-fade.section-clean,
section.section-fade:not([data-bg]):not(.hero):not(.cta-band),
header.nav:not(.solid),
.mobile-menu{
  background-color:var(--neutral-dark)!important;
  background-image:
    linear-gradient(180deg, rgba(12,12,12,.94), rgba(18,18,18,.98)),
    radial-gradient(circle at 70% 10%, rgba(255,255,255,.055), transparent 36%),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,.032), transparent 32%)!important;
}

.site-bg-fader::before{
  background:
    linear-gradient(180deg, rgba(8,8,8,.72), rgba(12,12,12,.82) 36%, rgba(16,16,16,.96)),
    linear-gradient(90deg, rgba(10,10,10,.78), rgba(18,18,18,.32) 48%, rgba(10,10,10,.76)),
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.026), transparent 32%),
    radial-gradient(circle at 78% 34%, rgba(255,255,255,.026), transparent 36%)!important;
}

section.section-fade:not(.hero) .copy,
section.section-fade:not(.hero) .lead{
  background:linear-gradient(135deg, rgba(14,14,14,.68), rgba(24,24,24,.36))!important;
}

section.section-fade .aud,
section.section-fade .pillar,
section.section-fade .term,
section.section-fade .q,
section.section-fade .concern,
section.section-fade .tier,
section.section-fade .way,
section.section-fade .val,
section.section-fade .card,
section.section-fade .step,
section.section-fade .fact,
section.section-fade .s,
section.section-fade .c,
.pillar,.s,.c,.aud,.card,.term,.q,.concern,.tier,.way,.val,.step,.fact{
  background:linear-gradient(135deg, rgba(15,15,15,.86), rgba(25,25,25,.78))!important;
}

.hero-stats,
header.nav .brand,
.nav-shell{
  background-color:rgba(10,10,10,.72)!important;
}

.gallery a,
.bgall > *,
.media,
.framed{
  background-color:#141414!important;
}

/* neutralize the fine-line texture so it reads gray, not teal */
body::before,
.dark::before,
footer.site::before,
section.section-fade.section-clean::before,
section.section-fade:not([data-bg]):not(.hero):not(.cta-band)::before{
  filter:grayscale(1) saturate(0)!important;
}