/* ===========================================================
   AUROCH THRYX — DESIGN SYSTEM
   Pearl Meridian × Iridescent Pearl
   =========================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
  /* surfaces */
  --bg: #F2EFE7;
  --bg2: #FAFAF6;
  --bg3: #ECE8DC;
  --surf: rgba(255,255,255,0.70);
  --surf2: rgba(255,255,255,0.45);
  --surf3: rgba(255,255,255,0.85);

  /* borders */
  --bd: rgba(196,160,48,0.22);
  --bd2: rgba(196,160,48,0.11);
  --bd3: rgba(24,22,38,0.08);

  /* text */
  --tx: #181626;
  --tx2: #5A586A;
  --tx3: #9C9AAC;
  --tx-soft: #BCBACC;

  /* accents */
  --gold: #C49A2A;
  --gold2: #E6C05A;
  --gold-soft: rgba(196,160,48,0.09);
  --gold-glow: rgba(196,160,48,0.20);

  --blue: #1A3C7A;
  --blue2: #2C5CB0;
  --blue-soft: rgba(26,60,122,0.07);
  --blue-glow: rgba(26,60,122,0.20);

  /* iridescent palette */
  --iri-1: rgba(196,160,48,0.30);
  --iri-2: rgba(160,120,200,0.30);
  --iri-3: rgba(100,150,220,0.30);
  --iri-4: rgba(190,180,120,0.30);

  /* radii — kept tight for Art Deco precision */
  --r: 2px;
  --r-lg: 4px;
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

body{
  background:var(--bg);
  color:var(--tx);
  font-family:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0 56px;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .3s,border .3s;
}
.nav.scrolled{
  background:rgba(242,239,231,0.92);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--bd2);
}
.nav-logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.22em;color:var(--tx);
}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx2);text-decoration:none;transition:color .2s;position:relative;
}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-links a.active::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);
}
.nav-cta{
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);text-decoration:none;
  border:1px solid rgba(26,60,122,.3);padding:9px 22px;transition:all .2s;
}
.nav-cta:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ===========================================================
   PEARL — IRIDESCENT, SHIFTING
   =========================================================== */
.pearl{
  position:relative;width:240px;height:240px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.pearl.lg{width:280px;height:280px}
.pearl.sm{width:180px;height:180px}

@keyframes pearl-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.034)}
}
@keyframes pearl-iridescent{
  from{filter:hue-rotate(0deg) saturate(.85) brightness(1.04)}
  to{filter:hue-rotate(360deg) saturate(.85) brightness(1.04)}
}
@keyframes pearl-aurora{
  0%,100%{box-shadow:
    0 0 50px rgba(196,160,48,0.30),
    0 0 110px rgba(196,160,48,0.13),
    inset 0 0 28px rgba(255,255,255,.85)}
  25%{box-shadow:
    0 0 50px rgba(160,120,200,0.30),
    0 0 110px rgba(160,120,200,0.13),
    inset 0 0 28px rgba(255,255,255,.88)}
  50%{box-shadow:
    0 0 50px rgba(100,150,220,0.30),
    0 0 110px rgba(100,150,220,0.13),
    inset 0 0 28px rgba(255,255,255,.88)}
  75%{box-shadow:
    0 0 50px rgba(180,200,140,0.30),
    0 0 110px rgba(180,200,140,0.13),
    inset 0 0 28px rgba(255,255,255,.88)}
}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spinR{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

.p-outer{
  position:absolute;width:88%;height:88%;
  border:1px solid rgba(196,160,48,.20);border-radius:50%;
  animation:spin 44s linear infinite;
}
.p-outer::before{
  content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;background:var(--gold);border-radius:50%;
  box-shadow:0 0 10px var(--gold);
}
.p-outer::after{
  content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;background:var(--blue2);border-radius:50%;
  box-shadow:0 0 8px var(--blue2);
}
.p-mid{
  position:absolute;width:72%;height:72%;
  border:1px solid rgba(196,160,48,.13);border-radius:50%;
  animation:spinR 30s linear infinite;
}
.p-mid::after{
  content:'';position:absolute;top:50%;right:-3px;transform:translateY(-50%);
  width:3px;height:3px;background:rgba(160,120,200,.7);border-radius:50%;
  box-shadow:0 0 6px rgba(160,120,200,.5);
}
.p-core{
  width:50%;height:50%;border-radius:50%;position:relative;z-index:2;
  background:
    radial-gradient(ellipse 30% 20% at 32% 28%, rgba(255,255,255,.94) 0%, transparent 100%),
    radial-gradient(circle at 42% 40%,
      #FFFCF6 0%,
      #F8E8D8 22%,
      #E8D0C8 48%,
      #C8C0D8 72%,
      #A8B0CC 92%,
      #98A0C0 100%);
  animation:
    pearl-breathe 4.2s ease-in-out infinite,
    pearl-iridescent 14s linear infinite,
    pearl-aurora 9s ease-in-out infinite;
}
.p-core::after{
  content:'';position:absolute;top:16%;left:20%;width:30%;height:18%;
  background:rgba(255,255,255,.72);border-radius:50%;filter:blur(3px);
  transform:rotate(-28deg);pointer-events:none;
}

/* ===========================================================
   ART DECO MARKS
   =========================================================== */
.corner-tl,.corner-br,.corner-tr,.corner-bl{
  position:absolute;width:90px;height:90px;opacity:.35;pointer-events:none;
}
.corner-tl{top:96px;left:56px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}
.corner-br{bottom:72px;right:56px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold)}
.corner-tr{top:96px;right:56px;border-top:1px solid var(--gold);border-right:1px solid var(--gold)}
.corner-bl{bottom:72px;left:56px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold)}

.divider{
  height:1px;max-width:1320px;margin:0 auto;
  background:linear-gradient(to right,transparent,var(--bd),transparent);
}
.divider-tight{height:1px;background:var(--bd2)}

/* ===========================================================
   TYPOGRAPHY HELPERS
   =========================================================== */
.eyebrow{
  font-size:10px;font-weight:500;letter-spacing:.30em;text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:14px;
}
.eyebrow.center{justify-content:center}
.eyebrow.center::before,.eyebrow.center::after{
  content:'';width:32px;height:1px;background:var(--gold);opacity:.45;
}
.eyebrow:not(.center)::before{
  content:'';width:36px;height:1px;background:var(--gold);opacity:.45;
}

.display{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(40px,5.5vw,72px);line-height:1.08;
  color:var(--tx);letter-spacing:-.015em;
}
.display em{font-style:italic;color:var(--blue)}

.title-l{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(32px,3.6vw,50px);line-height:1.18;color:var(--tx);
  letter-spacing:-.01em;
}
.title-l em{font-style:italic;color:var(--blue)}

.title-m{
  font-family:'Cormorant Garamond',serif;font-weight:400;
  font-size:clamp(24px,2.6vw,34px);line-height:1.3;color:var(--tx);
}

.title-s{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:18px;letter-spacing:.02em;color:var(--tx);
}

.lede{
  font-size:17px;font-weight:300;color:var(--tx2);line-height:1.7;
  max-width:620px;
}
.body-l{font-size:15px;font-weight:300;color:var(--tx2);line-height:1.72}
.body-m{font-size:14px;font-weight:300;color:var(--tx2);line-height:1.68}
.body-s{font-size:13px;font-weight:300;color:var(--tx2);line-height:1.65}

.label{
  font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
}
.mono{font-family:'JetBrains Mono',monospace;font-weight:300;letter-spacing:.04em}

/* ===========================================================
   BUTTONS
   =========================================================== */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:#fff;background:var(--blue);text-decoration:none;
  padding:14px 38px;transition:all .25s;border-radius:var(--r);
}
.cta:hover{background:var(--blue2);transform:translateY(-1px);box-shadow:0 10px 32px rgba(26,60,122,.22)}
.cta::after{content:'→';transition:transform .2s}
.cta:hover::after{transform:translateX(4px)}

.cta-ghost{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--blue);text-decoration:none;
  border:1px solid var(--blue);padding:13px 36px;transition:all .2s;border-radius:var(--r);
}
.cta-ghost:hover{background:var(--blue);color:#fff}

.cta-text{
  font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx2);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;transition:color .2s;
}
.cta-text:hover{color:var(--gold)}

/* ===========================================================
   LAYOUT
   =========================================================== */
.wrap{max-width:1320px;margin:0 auto;padding:0 56px}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 56px}
.wrap-md{max-width:1100px;margin:0 auto;padding:0 56px}

.section{padding:100px 0}
.section-tight{padding:72px 0}
.section-loose{padding:140px 0}

.section-head{text-align:center;margin-bottom:64px}
.section-head .eyebrow{margin-bottom:16px;justify-content:center}
.section-head .eyebrow::before,.section-head .eyebrow::after{
  content:'';width:32px;height:1px;background:var(--gold);opacity:.45;
}

/* ===========================================================
   HOMEPAGE HERO
   =========================================================== */
.hero{
  min-height:100vh;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:120px 48px 80px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, rgba(196,160,48,.06) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 28% 72%, rgba(26,60,122,.05) 0%, transparent 55%);
}
.hero .pearl{margin-bottom:60px}
.hero-inner{text-align:center;max-width:680px;position:relative;z-index:1}
.hero-inner .eyebrow{justify-content:center;margin-bottom:22px}
.hero-inner .eyebrow::before,.hero-inner .eyebrow::after{
  content:'';width:36px;height:1px;background:var(--gold);opacity:.45;
}
.hero-inner h1{margin-bottom:26px}
.hero-inner .lede{margin:0 auto 44px}

/* ===========================================================
   PILLAR HERO (subpages)
   =========================================================== */
.pillar-hero{
  position:relative;overflow:hidden;
  padding:140px 56px 100px;
  background:
    radial-gradient(ellipse 60% 50% at 30% 50%, rgba(196,160,48,.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(26,60,122,.05) 0%, transparent 50%);
}
.pillar-hero-grid{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1fr auto;gap:80px;align-items:center;
}
.pillar-hero-text{max-width:600px}
.pillar-hero-num{
  font-family:'Cormorant Garamond',serif;
  font-size:14px;font-weight:400;letter-spacing:.20em;
  color:var(--tx3);margin-bottom:18px;
}
.pillar-hero-num strong{color:var(--gold);font-weight:500;font-style:italic}
.pillar-hero h1{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  font-size:clamp(56px,7vw,96px);line-height:1.0;color:var(--tx);
  margin-bottom:14px;letter-spacing:-.02em;
}
.pillar-hero h1 em{font-style:italic;color:var(--blue)}
.pillar-hero-role{
  font-family:'Syne',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin-bottom:30px;
}
.pillar-hero-desc{
  font-size:18px;font-weight:300;color:var(--tx2);line-height:1.72;
  margin-bottom:40px;
}

/* ===========================================================
   PILLAR SYMBOL (subpage visual)
   =========================================================== */
.symbol{
  position:relative;width:300px;height:300px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.symbol-ring{
  position:absolute;width:280px;height:280px;
  border:1px solid var(--bd);border-radius:50%;
  animation:spin 50s linear infinite;
}
.symbol-ring::before{
  content:'';position:absolute;top:-3px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;background:var(--gold);border-radius:50%;
}
.symbol-ring-i{
  position:absolute;width:220px;height:220px;
  border:1px solid var(--bd2);border-radius:50%;
  animation:spinR 35s linear infinite;
}
.symbol-shape{
  width:140px;height:140px;color:var(--gold);position:relative;z-index:2;
  filter:drop-shadow(0 4px 30px rgba(196,160,48,.20));
}
.symbol-shape svg{width:100%;height:100%}

/* ===========================================================
   INTRO QUOTE
   =========================================================== */
.intro{padding:100px 48px;max-width:880px;margin:0 auto;text-align:center}
.intro-q{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(22px,2.8vw,32px);font-weight:300;font-style:italic;
  line-height:1.55;color:var(--tx);
}
.intro-q strong{font-style:normal;font-weight:500;color:var(--gold)}

/* ===========================================================
   PILLAR GRID (homepage)
   =========================================================== */
.pillars-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--bd);border:1px solid var(--bd);
  overflow:hidden;border-radius:var(--r);
}
.pcard{
  background:var(--surf);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:48px 40px;position:relative;
  text-decoration:none;color:inherit;display:block;
  transition:background .25s;
}
.pcard:hover{background:rgba(255,255,255,.92)}
.pcard.w{
  grid-column:span 3;
  display:grid;grid-template-columns:56px 1fr;gap:36px;align-items:start;
  background:var(--blue-soft);
}
.pcard.m{grid-column:span 2}

.pcard-icon{width:44px;height:44px;color:var(--gold);margin-bottom:22px;flex-shrink:0}
.pcard-icon svg{width:100%;height:100%}
.pcard-num{
  font-family:'Cormorant Garamond',serif;font-size:10px;font-weight:400;
  letter-spacing:.22em;color:var(--tx3);margin-bottom:10px;
}
.pcard-name{
  font-family:'Syne',sans-serif;font-size:18px;font-weight:700;
  letter-spacing:.02em;color:var(--tx);margin-bottom:8px;
}
.pcard-role{
  font-size:10px;font-weight:500;letter-spacing:.20em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;padding-bottom:18px;
  border-bottom:1px solid var(--bd2);
}
.pcard-desc{font-size:13px;font-weight:300;color:var(--tx2);line-height:1.68}
.pcard-arr{
  position:absolute;bottom:28px;right:28px;font-size:18px;color:var(--tx3);
  transition:all .2s;
}
.pcard:hover .pcard-arr{color:var(--gold);transform:translateX(4px)}

/* ===========================================================
   FEATURE GRIDS (subpages)
   =========================================================== */
.feature-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--bd2);border:1px solid var(--bd2);border-radius:var(--r);
  overflow:hidden;
}
.feature-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.feature-grid.cols-4{grid-template-columns:repeat(4,1fr)}

.feature{
  background:var(--surf);padding:40px 32px;
  display:flex;flex-direction:column;gap:14px;
  position:relative;
}
.feature-num{
  font-family:'Cormorant Garamond',serif;font-size:11px;font-weight:400;
  letter-spacing:.22em;color:var(--tx-soft);
}
.feature-title{
  font-family:'Syne',sans-serif;font-size:15px;font-weight:700;
  color:var(--tx);letter-spacing:.01em;
}
.feature-desc{font-size:13px;font-weight:300;color:var(--tx2);line-height:1.65}

/* ===========================================================
   COMMAND LIST (Winnie page, bridges)
   =========================================================== */
.cmd-list{
  background:var(--surf);border:1px solid var(--bd2);border-radius:var(--r);
  overflow:hidden;
}
.cmd-row{
  display:grid;grid-template-columns:240px 1fr auto;gap:32px;
  padding:18px 28px;border-bottom:1px solid var(--bd2);
  align-items:center;
}
.cmd-row:last-child{border-bottom:none}
.cmd-row:hover{background:rgba(255,255,255,.5)}
.cmd-name{
  font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:400;
  color:var(--blue);letter-spacing:.02em;
}
.cmd-desc{font-size:13px;color:var(--tx2);line-height:1.5}
.cmd-tag{
  font-size:9px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);padding:4px 10px;border:1px solid var(--bd);border-radius:1px;
}

/* ===========================================================
   ARCH BLOCK (architecture / data shape)
   =========================================================== */
.arch{
  background:var(--bg2);border:1px solid var(--bd2);
  padding:48px;border-radius:var(--r-lg);
  position:relative;
}
.arch::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,var(--gold),transparent);
  opacity:.7;
}
.arch-title{
  font-family:'Syne',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.10em;text-transform:uppercase;color:var(--tx);
  margin-bottom:24px;
  display:flex;align-items:center;gap:12px;
}
.arch-title::before{
  content:'';width:24px;height:1px;background:var(--gold);
}
.arch-list{display:flex;flex-direction:column;gap:0}
.arch-row{
  display:grid;grid-template-columns:200px 1fr;gap:24px;
  padding:14px 0;border-bottom:1px solid var(--bd2);align-items:baseline;
}
.arch-row:last-child{border-bottom:none}
.arch-key{
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:400;
  color:var(--gold);letter-spacing:.04em;
}
.arch-val{font-size:13px;color:var(--tx2);line-height:1.6}

/* ===========================================================
   PRINCIPLE / QUOTE BLOCK
   =========================================================== */
.principle{
  padding:80px 56px;background:var(--surf);
  border-top:1px solid var(--bd2);border-bottom:1px solid var(--bd2);
  text-align:center;
}
.principle-q{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(24px,3vw,38px);font-weight:300;font-style:italic;
  line-height:1.5;color:var(--tx);
  max-width:780px;margin:0 auto 18px;
}
.principle-q strong{font-style:normal;font-weight:500;color:var(--gold)}
.principle-attrib{
  font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tx3);
}

/* ===========================================================
   RELATED PILLARS (subpages)
   =========================================================== */
.related{padding:100px 0;background:var(--bg3)}
.related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:1320px;margin:0 auto;padding:0 56px;
}
.related-card{
  background:var(--surf);padding:32px;text-decoration:none;color:inherit;
  border:1px solid var(--bd2);transition:all .25s;border-radius:var(--r);
  position:relative;
}
.related-card:hover{background:rgba(255,255,255,.95);border-color:var(--bd);transform:translateY(-2px)}
.related-name{
  font-family:'Syne',sans-serif;font-size:16px;font-weight:700;
  color:var(--tx);margin-bottom:6px;
}
.related-role{
  font-size:10px;font-weight:500;letter-spacing:.20em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;
}
.related-desc{font-size:13px;color:var(--tx2);line-height:1.6}
.related-arr{
  position:absolute;bottom:24px;right:24px;font-size:14px;color:var(--tx3);
  transition:all .2s;
}
.related-card:hover .related-arr{color:var(--gold);transform:translateX(4px)}

/* ===========================================================
   MANTRA STRIP
   =========================================================== */
.mantra{
  padding:100px 56px;background:var(--blue);position:relative;overflow:hidden;
}
.mantra::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(255,255,255,.015) 40px,rgba(255,255,255,.015) 80px);
}
.mantra-in{max-width:880px;margin:0 auto;text-align:center;position:relative;z-index:1}
.mantra-label{
  font-size:10px;letter-spacing:.30em;text-transform:uppercase;
  color:rgba(255,255,255,.40);margin-bottom:32px;
}
.mantra-text{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(20px,2.5vw,30px);font-weight:300;font-style:italic;
  color:rgba(255,255,255,.92);line-height:1.72;
}
.mantra-text span{color:var(--gold2);font-style:normal;font-weight:400}

/* ===========================================================
   FOOTER
   =========================================================== */
footer{
  padding:56px;background:var(--bg2);border-top:1px solid var(--bd2);
}
.foot{max-width:1320px;margin:0 auto}
.foot-row{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  flex-wrap:wrap;
}
.foot-logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:13px;
  letter-spacing:.22em;color:var(--tx);
}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
.foot-links a{
  font-size:11px;color:var(--tx2);text-decoration:none;
  letter-spacing:.06em;transition:color .2s;
}
.foot-links a:hover{color:var(--gold)}
.foot-copy{font-size:11px;color:var(--tx3);letter-spacing:.04em}
.foot-meta{
  margin-top:36px;padding-top:24px;border-top:1px solid var(--bd2);
  display:flex;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--tx3);
  letter-spacing:.06em;gap:24px;flex-wrap:wrap;
}
.foot-meta-l{display:flex;gap:24px;flex-wrap:wrap}
.foot-meta-l span{color:var(--gold)}

/* ===========================================================
   SCROLL REVEAL
   =========================================================== */
.rv{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.rv.on{opacity:1;transform:none}

/* ===========================================================
   UTILITIES
   =========================================================== */
.mt-xs{margin-top:8px}
.mt-s{margin-top:16px}
.mt-m{margin-top:32px}
.mt-l{margin-top:48px}
.mt-xl{margin-top:72px}
.mb-xs{margin-bottom:8px}
.mb-s{margin-bottom:16px}
.mb-m{margin-bottom:32px}
.mb-l{margin-bottom:48px}
.mb-xl{margin-bottom:72px}
.gap-s{gap:8px}
.gap-m{gap:16px}
.gap-l{gap:32px}
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.center{text-align:center}
.subtle{color:var(--tx3)}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media(max-width:1000px){
  .nav-links{gap:22px}
  .pillar-hero-grid{grid-template-columns:1fr;gap:48px;text-align:center}
  .pillar-hero-text{margin:0 auto}
  .pillar-hero-num{display:inline-block}
  .pillars-grid{grid-template-columns:repeat(2,1fr)}
  .pcard.w{grid-column:span 2}
  .pcard.m{grid-column:span 2}
  .feature-grid,.feature-grid.cols-4{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .symbol{margin:0 auto}
}
@media(max-width:760px){
  .nav{padding:0 24px}
  .nav-links{display:none}
  .wrap,.wrap-md,.wrap-narrow{padding:0 24px}
  .hero{padding:100px 24px 60px}
  .pillar-hero{padding:120px 24px 80px}
  .pillars-grid{grid-template-columns:1fr}
  .pcard.w,.pcard.m{grid-column:span 1}
  .pcard.w{grid-template-columns:1fr}
  .feature-grid,.feature-grid.cols-2,.feature-grid.cols-4{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .section,.section-tight,.section-loose{padding:72px 0}
  .intro{padding:60px 24px}
  .principle{padding:60px 24px}
  .mantra{padding:72px 24px}
  footer{padding:40px 24px}
  .foot-row{flex-direction:column;text-align:center;gap:24px}
  .foot-links{justify-content:center}
  .foot-meta{flex-direction:column;text-align:center}
  .arch{padding:32px 24px}
  .arch-row{grid-template-columns:1fr;gap:6px}
  .cmd-row{grid-template-columns:1fr;gap:6px;padding:16px}
  .cmd-tag{align-self:flex-start}
  .symbol{width:240px;height:240px}
  .symbol-ring{width:220px;height:220px}
  .symbol-ring-i{width:180px;height:180px}
  .symbol-shape{width:110px;height:110px}
  .corner-tl,.corner-tr,.corner-bl,.corner-br{width:56px;height:56px}
}