@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root{
  --ink:#0e1a24;
  --slate:#23394E;
  --gold:#c8a75a;
  --muted:#6b7c8f;
  --hair:#e9edf2;
  --bg:#ffffff;
  --danger:#b00020;
  --softdanger:#fff7f8;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  letter-spacing:-0.01em;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.88}

.container{max-width:1120px;margin:0 auto;padding:84px 24px}
.container.narrow{max-width:780px}
.hair{height:1px;background:var(--hair);width:100%;margin:28px 0}

nav{
  position:sticky;top:0;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--hair);
  z-index:10;
}
.nav-inner{
  max-width:1120px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.brand{display:flex;align-items:baseline;gap:10px}
.brand .mark{width:10px;height:10px;border:2px solid var(--gold);border-radius:2px}
.brand .name{font-weight:600;letter-spacing:0.02em}
.brand .tag{font-size:12px;color:var(--muted)}
.menu{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted)}
.menu a{padding:6px 10px;border-radius:999px}
.menu a.active{color:var(--slate);background:#f6f8fb;border:1px solid var(--hair)}

.hero{border-top:4px solid var(--gold);border-bottom:1px solid var(--hair)}
.hero h1{font-size:56px;line-height:1.02;font-weight:500;margin:0 0 14px}
.hero h2{font-size:30px;line-height:1.25;font-weight:400;margin:0 0 22px;color:var(--slate)}
.hero p{font-size:18px;line-height:1.65;color:var(--muted);margin:0}

.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pill{font-size:12px;color:var(--slate);border:1px solid var(--hair);padding:8px 12px;border-radius:999px}

.kicker{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.section-title{font-size:26px;font-weight:500;margin:0 0 20px}
.lead{font-size:18px;line-height:1.7;color:var(--ink)}
.muted{color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}
.card{
  grid-column:span 6;
  border:1px solid var(--hair);
  border-radius:20px;
  padding:24px;
  background:#fff;
}
.card h3{margin:0 0 10px;font-size:16px;color:var(--slate);font-weight:600}
.card p{margin:0;color:var(--muted);line-height:1.65;font-size:14.5px}
@media (max-width:860px){
  .card{grid-column:span 12}
  .hero h1{font-size:44px}
  .hero h2{font-size:24px}
}

.list{margin:0;padding:0;list-style:none;border-top:1px solid var(--hair)}
.list li{padding:14px 0;border-bottom:1px solid var(--hair);display:flex;justify-content:space-between;gap:16px}
.list .left{font-size:15px}
.list .right{font-size:12.5px;color:var(--muted);white-space:nowrap}

.callout{
  border-left:3px solid var(--gold);
  padding:16px 18px;
  background:#fbfbfd;
  border-radius:16px;
  color:var(--slate);
  line-height:1.65;
}
.warning{
  border-left:3px solid var(--danger);
  padding:16px 18px;
  background:var(--softdanger);
  border-radius:16px;
  line-height:1.65;
}

.mock{
  border:1px solid var(--hair);
  border-radius:18px;
  padding:18px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;letter-spacing:0.06em;
}
.red{color:var(--danger);font-weight:600}

footer{border-top:1px solid var(--hair);background:#fafbfd}
footer .container{padding:28px 24px}
footer p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.7}
.smallcap{font-size:11.5px;color:var(--muted)}


/* RGRA trigger section */
.section.trigger .list { list-style: none; padding-left: 0; margin-top: 12px; }
.section.trigger .list li { display:block; }


/* Added: recognition section padding + containment */
.recognition{max-width:1100px;margin:0 auto;padding:48px 24px;}
.recognition p{margin:0 0 14px 0;}
.recognition p:last-child{margin-bottom:0;}

/* Mobile-safe padding for home sections that were rendered edge-to-edge */
.absence,
.asymmetry,
.restraint{
  max-width:1100px;
  margin:0 auto;
  padding:0 24px;
}

@media (max-width: 480px){
  .absence,
  .asymmetry,
  .restraint{
    padding:0 16px;
  }
}

/* Mobile headline tuning */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -0.02em;
  }
  .hero .lead {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* v3 mobile guard: ensure padding always exists even if cached CSS was different */
@media (max-width: 600px){
  .section{padding-left:20px !important; padding-right:20px !important;}
  .container{padding-left:20px !important; padding-right:20px !important;}
}


/* --- RGRA v5 micro-tuning: spacing utilities (no visual redesign) --- */
.rgra-mt-16 { margin-top: 16px; }
.rgra-mt-20 { margin-top: 20px; }
.rgra-mt-24 { margin-top: 24px; }

.rgra-mt-18 { margin-top: 18px; }



/* --- Mobile nav: prevent awkward wrap beside brand --- */
@media (max-width: 720px){
  .nav-inner{flex-direction:column; align-items:flex-start; gap:10px;}
  .menu{width:100%; justify-content:flex-start; row-gap:10px;}
}

/* --- Mobile rhythm: reduce excessive vertical padding --- */
@media (max-width: 600px){
  .container{padding-top:56px !important; padding-bottom:56px !important;}
  header.hero .container{padding-top:44px !important; padding-bottom:44px !important;}
}



/* --- RGRA v6: hierarchy + scroll-gate (CSS-only, no redesign) --- */
section.anchor .container{
  padding-top: 64px;
  padding-bottom: 64px;
}
section.anchor p{
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--slate);
}

section.trigger .section-title{
  letter-spacing: -0.02em;
}

section.absence{
  margin-top: -10px;
}

/* Scroll gate: quiet divider between orientation and evidence */
section.scroll-gate .container{
  padding-top: 20px;
  padding-bottom: 20px;
}
section.scroll-gate .gate-line{
  height:1px;
  background: rgba(20, 30, 40, 0.10);
  margin: 0 auto 14px auto;
  max-width: 520px;
}
section.scroll-gate p{
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(35, 55, 75, 0.70);
}

/* Cards rhythm: avoid back-to-back heaviness */
section.cards-block + section.cards-block .container{
  padding-top: 56px;
}

/* Mobile: tighten vertical rhythm, strengthen hero */
@media (max-width: 600px){
  .container{padding-top:44px !important; padding-bottom:44px !important;}
  header.hero .container{padding-top:36px !important; padding-bottom:36px !important;}
  section.trigger .section-title{font-size: 1.65rem;}
  section.trigger .lead{font-size: 1.05rem;}
  section.anchor .container{padding-top:48px !important; padding-bottom:48px !important;}
  section.scroll-gate .container{padding-top:18px !important; padding-bottom:18px !important;}
  .callout{padding:14px 16px;}
}