/* ============================================================
   CORNERSTONE PATHWAYS LIVING — DESIGN SYSTEM
   ============================================================ */
:root{
  /* Brand — sampled from the official Cornerstone Pathways Living logo */
  --plum-900:#1C0830; --plum-800:#2A0F45; --plum-700:#3B145F; --plum-600:#4B2078;
  --plum-400:#7C5C9B; --plum-200:#C9B7DA; --plum-050:#F4EFF8;
  --gold-800:#6E5015; --gold-700:#7C5B1A; --gold-600:#A8801F; --gold-500:#C0993C;
  --gold-400:#D5B267; --gold-200:#EBD9AE; --gold-100:#F6ECD6;

  /* Warm neutrals */
  --cream:#FBF7F1; --cream-2:#F5EEE4; --cream-3:#EFE6D9; --paper:#FFFFFF;
  --ink:#241830; --ink-2:#4C4157; --ink-3:#6B6076;
  --line:#E6DCCE; --line-2:#D8CBB8;

  /* Type */
  --serif:'Fraunces',ui-serif,Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Space */
  --sec:clamp(4.25rem,7.5vw,8rem);
  --gut:clamp(1.25rem,4vw,2.5rem);
  --wrap:1220px;

  /* Radii + elevation */
  --r-xs:6px; --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(36,24,48,.05), 0 8px 24px -12px rgba(36,24,48,.14);
  --sh-2:0 2px 4px rgba(36,24,48,.05), 0 28px 60px -30px rgba(36,24,48,.34);
  --sh-3:0 40px 90px -40px rgba(28,8,48,.45);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink-2);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.7;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
button,input,textarea,select{font:inherit; color:inherit}
a{color:inherit}
::selection{background:var(--gold-200); color:var(--plum-900)}

h1,h2,h3,h4{
  font-family:var(--serif); color:var(--plum-900);
  font-weight:500; line-height:1.06; letter-spacing:-.018em;
  margin:0; text-wrap:balance;
}
h1{font-size:clamp(2.7rem,1.5rem + 4.1vw,4.75rem); line-height:1.02; letter-spacing:-.028em}
h2{font-size:clamp(2.05rem,1.35rem + 2.5vw,3.35rem); letter-spacing:-.024em}
h3{font-size:clamp(1.3rem,1.14rem + .62vw,1.7rem); line-height:1.2}
h4{font-size:1.0625rem; line-height:1.35; letter-spacing:-.008em}
p{margin:0}

/* ---------- Layout ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.wrap-wide{max-width:1400px}
.sec{padding-block:var(--sec)}
.sec-t{padding-top:var(--sec)}
.sec-b{padding-bottom:var(--sec)}
.band-cream2{background:var(--cream-2)}
.band-paper{background:var(--paper)}
.stack>*+*{margin-top:var(--gap,1.15rem)}

/* ---------- Type utilities ---------- */
.eyebrow{
  font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--gold-700);
  display:flex; align-items:center; gap:.65rem; margin:0 0 1.15rem;
}
.eyebrow::before{content:""; width:1.85rem; height:1px; background:var(--gold-500); flex:none}
.eyebrow.center{justify-content:center}
.eyebrow.on-dark{color:var(--gold-400)}
.eyebrow.on-dark::before{background:var(--gold-400)}
.lead{font-size:clamp(1.06rem,1rem + .42vw,1.3rem); line-height:1.62; color:var(--ink-2)}
.muted{color:var(--ink-3)}
.measure{max-width:60ch}
.measure-sm{max-width:48ch}
.vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.serif-quote{font-family:var(--serif); font-weight:400; font-style:normal; line-height:1.24; letter-spacing:-.02em; color:var(--plum-800)}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--plum-700); --fg:#fff; --bd:var(--plum-700);
  display:inline-flex; align-items:center; gap:.6rem; justify-content:center;
  padding:.95rem 1.6rem; border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  font-size:.94rem; font-weight:600; letter-spacing:.005em; text-decoration:none;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  box-shadow:0 1px 2px rgba(36,24,48,.08);
}
.btn .arw{transition:transform .45s var(--ease-out); flex:none}
.btn:hover{transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(59,20,95,.6)}
.btn:hover .arw{transform:translateX(4px)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent; --fg:var(--plum-800); --bd:var(--line-2); box-shadow:none}
.btn--ghost:hover{--bg:var(--plum-050); --bd:var(--plum-200); box-shadow:none; transform:translateY(-2px)}
.btn--gold{--bg:var(--gold-500); --fg:#2A0F45; --bd:var(--gold-500)}
.btn--gold:hover{box-shadow:0 14px 28px -14px rgba(192,153,60,.75)}
.btn--onDark{--bg:#fff; --fg:var(--plum-800); --bd:#fff}
.btn--onDarkGhost{--bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.4)}
.btn--onDarkGhost:hover{--bg:rgba(255,255,255,.1); --bd:rgba(255,255,255,.7)}
.btn--sm{padding:.68rem 1.2rem; font-size:.86rem}

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-weight:600; font-size:.94rem; color:var(--plum-700);
  padding-bottom:.2rem; border-bottom:1px solid var(--gold-400);
  transition:color .3s var(--ease), border-color .3s var(--ease), gap .35s var(--ease-out);
}
.link-arrow:hover{color:var(--plum-900); border-color:var(--plum-700); gap:.75rem}
.link-arrow.on-dark{color:#fff; border-color:rgba(214,178,103,.85)}
.link-arrow.on-dark:hover{color:#fff; border-color:#fff}

/* ---------- Focus ---------- */
:where(a,button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--plum-600); outline-offset:3px; border-radius:var(--r-xs);
}
.on-dark-focus:focus-visible,.footer :focus-visible,.hero-band :focus-visible{outline-color:var(--gold-400)}
.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:200; transform:translateY(-160%);
  background:var(--plum-800); color:#fff; padding:.7rem 1.1rem; border-radius:var(--r-sm);
  text-decoration:none; font-weight:600; font-size:.9rem; transition:transform .3s var(--ease-out);
}
.skip:focus{transform:translateY(0)}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(251,247,241,.82); backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.hdr.is-stuck{border-bottom-color:var(--line); background:rgba(251,247,241,.94); box-shadow:0 8px 30px -22px rgba(36,24,48,.5)}
.hdr-in{
  display:flex; align-items:center; gap:1.5rem;
  height:var(--h,98px); transition:height .4s var(--ease);
}
.hdr.is-stuck .hdr-in{--h:76px}
.brand{display:flex; align-items:center; flex:none; text-decoration:none; margin-right:auto}
.brand img{
  height:var(--lh,60px); width:auto; transition:height .4s var(--ease);
}
.hdr.is-stuck .brand img{--lh:48px}
.nav{display:flex; align-items:center; gap:.15rem}
.nav a{
  position:relative; text-decoration:none; font-size:.905rem; font-weight:500;
  color:var(--ink-2); padding:.55rem .85rem; border-radius:var(--r-sm);
  transition:color .3s var(--ease), background-color .3s var(--ease);
  white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:.28rem; height:1.5px;
  background:var(--gold-500); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.nav a:hover{color:var(--plum-800)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--plum-800); font-weight:600}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr-cta{flex:none; margin-left:.6rem}
.hdr-tel{
  display:none; align-items:center; gap:.45rem; flex:none; text-decoration:none;
  font-size:.875rem; font-weight:600; color:var(--plum-800); white-space:nowrap;
  padding:.5rem .7rem; border-radius:var(--r-pill); margin-left:.15rem;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.hdr-tel svg{color:var(--gold-600); flex:none; transition:color .3s var(--ease)}
.hdr-tel:hover{background:var(--plum-050); color:var(--plum-900)}
.hdr-tel:hover svg{color:var(--plum-600)}
@media (min-width:1330px){.hdr-tel{display:inline-flex}}

.tel-note{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--ink-3);
  text-decoration:none; margin-top:1.35rem;
}
.tel-note b{color:var(--plum-800); font-weight:600; border-bottom:1px solid var(--gold-400); padding-bottom:1px}
.tel-note:hover b{border-color:var(--plum-700)}
.tel-note svg{color:var(--gold-600); flex:none}
.tel-note.on-dark{color:rgba(255,255,255,.7)}
.tel-note.on-dark b{color:#fff; border-color:rgba(214,178,103,.85)}
.tel-note.on-dark:hover b{border-color:#fff}
.tel-note.on-dark svg{color:var(--gold-400)}

.f-tel{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:var(--serif); font-size:1.22rem; color:#fff; letter-spacing:-.01em;
  margin-bottom:.9rem; transition:color .3s var(--ease);
}
.f-tel svg{color:var(--gold-400); flex:none}
.f-tel:hover{color:var(--gold-300)}
.burger{
  display:none; flex:none; width:46px; height:46px; border:1px solid var(--line-2);
  background:transparent; border-radius:var(--r-pill); cursor:pointer;
  align-items:center; justify-content:center; transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.burger:hover{background:var(--cream-2)}
.burger span{display:block; width:19px; height:1.6px; background:var(--plum-800); border-radius:2px; position:relative; transition:transform .4s var(--ease-out), opacity .25s}
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:19px; height:1.6px; background:var(--plum-800); border-radius:2px;
  transition:transform .4s var(--ease-out);
}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger[aria-expanded="true"] span{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(-90deg)}
.burger[aria-expanded="true"] span::after{opacity:0}

/* Mobile menu */
.mnav{
  position:fixed; inset:0; z-index:99; background:var(--cream);
  padding:calc(98px + 1.5rem) var(--gut) 2rem; display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s var(--ease), transform .45s var(--ease-out), visibility .35s;
  overflow-y:auto;
}
.mnav.open{opacity:1; visibility:visible; transform:none}
.mnav a.mlink{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  font-family:var(--serif); font-size:clamp(1.75rem,7vw,2.35rem); color:var(--plum-900);
  text-decoration:none; padding:.72rem 0; border-bottom:1px solid var(--line);
  letter-spacing:-.02em;
}
.mnav a.mlink span{font-family:var(--sans); font-size:.72rem; font-weight:600; color:var(--gold-700); letter-spacing:.16em}
.mnav a.mlink[aria-current="page"]{color:var(--plum-600)}
.mnav-foot{margin-top:auto; padding-top:2rem; display:grid; gap:.75rem}
.mnav-foot .btn{width:100%}

@media (max-width:1000px){
  .nav,.hdr-cta{display:none}
  .burger{display:flex}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; overflow:hidden; padding-block:clamp(3rem,5vw,5.5rem) clamp(3.5rem,6vw,6rem)}
.hero::before{
  content:""; position:absolute; inset:-30% -10% auto -20%; height:120%;
  background:radial-gradient(60% 55% at 18% 28%, rgba(192,153,60,.14), transparent 68%),
             radial-gradient(48% 48% at 88% 8%, rgba(75,32,120,.09), transparent 70%);
  pointer-events:none;
}
.hero-grid{
  position:relative; display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center;
}
.hero-copy h1{margin-bottom:1.4rem}
.hero-copy h1 em{
  font-style:normal; position:relative; white-space:nowrap;
  background:linear-gradient(100deg,var(--plum-700),var(--plum-600) 45%,var(--gold-600));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{max-width:44ch; margin-bottom:2.25rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem; align-items:center}
@media (max-width:560px){.hero-actions{display:grid; grid-template-columns:1fr; gap:.7rem} .hero-actions .btn{width:100%}}
.hero-note{
  margin-top:2.5rem; padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; align-items:flex-start; gap:.8rem; max-width:46ch;
  font-size:.9rem; line-height:1.6; color:var(--ink-3);
}
.hero-note svg{flex:none; margin-top:.15rem; color:var(--gold-600)}

.hero-media{position:relative}
.hero-frame{
  position:relative; border-radius:var(--r-xl) var(--r-xl) var(--r-lg) var(--r-xl);
  overflow:hidden; box-shadow:var(--sh-2); background:var(--cream-3);
  aspect-ratio:4/3.35;
}
.hero-frame img{width:100%; height:100%; object-fit:cover; transform:scale(1.02)}
.hero-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(190deg, rgba(28,8,48,.16), transparent 42%, rgba(28,8,48,.08));
  mix-blend-mode:multiply;
}
.hero-rule{
  position:absolute; inset:auto -1.4rem -1.4rem auto; width:58%; height:58%;
  border-right:1px solid var(--gold-400); border-bottom:1px solid var(--gold-400);
  border-radius:0 0 var(--r-xl) 0; z-index:-1; pointer-events:none;
}
.hero-chip{
  position:absolute; left:1rem; bottom:1.9rem; z-index:2;
  background:rgba(255,255,255,.93); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9); border-radius:var(--r);
  box-shadow:var(--sh-2); padding:.95rem 1.15rem; max-width:16.5rem;
  display:flex; gap:.75rem; align-items:flex-start;
}
@media (min-width:941px){.hero-chip{left:-2.75rem; bottom:2.4rem; max-width:17.5rem}}
.hero-chip .dot{
  flex:none; width:2.1rem; height:2.1rem; border-radius:var(--r-pill);
  background:var(--plum-050); color:var(--plum-700);
  display:grid; place-items:center;
}
.hero-chip b{display:block; font-family:var(--serif); font-size:1rem; font-weight:600; color:var(--plum-900); line-height:1.2; letter-spacing:-.01em}
.hero-chip small{display:block; font-size:.79rem; line-height:1.45; color:var(--ink-3); margin-top:.2rem}

@media (max-width:940px){
  .hero-grid{grid-template-columns:1fr}
  .hero-media{order:-1}
  .hero-frame{aspect-ratio:16/11}
  .hero-chip{left:auto; right:1rem; bottom:-1.2rem; max-width:15rem}
  .hero-rule{display:none}
  .hero-copy{padding-top:1.6rem}
}

/* ============================================================
   VALUE STRIP
   ============================================================ */
.vstrip{border-block:1px solid var(--line); background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.vstrip-in{display:grid; grid-template-columns:repeat(4,1fr)}
.vitem{padding:clamp(1.8rem,3vw,2.6rem) clamp(1rem,2vw,1.9rem); position:relative}
.vitem+.vitem::before{content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--line-2)}
.vitem .vi-ic{color:var(--gold-600); margin-bottom:1rem; transition:transform .5s var(--ease-out), color .35s var(--ease)}
.vitem:hover .vi-ic{transform:translateY(-3px); color:var(--plum-600)}
.vitem h3{margin-bottom:.4rem; font-family:var(--serif); font-size:1.13rem; font-weight:600}
.vitem p{font-size:.885rem; line-height:1.6; color:var(--ink-3)}
@media (max-width:860px){
  .vstrip-in{grid-template-columns:repeat(2,1fr)}
  .vitem:nth-child(odd)::before{display:none}
  .vitem:nth-child(n+3){border-top:1px solid var(--line-2)}
}
@media (max-width:480px){
  .vstrip-in{grid-template-columns:1fr}
  .vitem::before{display:none!important}
  .vitem+.vitem{border-top:1px solid var(--line-2)}
}

/* ============================================================
   EDITORIAL / SPLIT
   ============================================================ */
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,5vw,5rem); align-items:center}
.split.wide-left{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
@media (max-width:900px){.split,.split.wide-left{grid-template-columns:1fr}}

.figure{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); background:var(--cream-3)}
.figure img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease-out)}
.figure:hover img{transform:scale(1.035)}
.figure--tall{aspect-ratio:4/5}
.figure--wide{aspect-ratio:16/10}
.figure--sq{aspect-ratio:1/1}
.figure--portrait{aspect-ratio:4/4.6}
.figure--person{aspect-ratio:4/5}
.figure--person img{object-position:50% 16%}
@media (max-width:560px){.figure--person{aspect-ratio:4/4.4}}
@media (max-width:900px){
  .figure--tall,.figure--portrait{aspect-ratio:16/10}
  .figure--sq{aspect-ratio:16/10}
}

.duo{position:relative; padding:0 0 4.5rem 3.25rem}
.duo .duo-main{aspect-ratio:4/4.55}
.duo .duo-sub{
  position:absolute; left:0; bottom:0; width:53%; aspect-ratio:4/3.2;
  border:8px solid var(--cream); border-radius:var(--r); box-shadow:var(--sh-2);
}
@media (max-width:900px){
  .duo{padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start}
  .duo .duo-main{aspect-ratio:4/3.4}
  .duo .duo-sub{position:static; width:100%; aspect-ratio:4/3.4; border:0; box-shadow:var(--sh-1)}
}
@media (max-width:560px){ .duo{grid-template-columns:1fr} }

.pull{
  border-left:2px solid var(--gold-500); padding:.35rem 0 .35rem 1.4rem;
  font-family:var(--serif); font-size:clamp(1.18rem,1.05rem + .55vw,1.5rem);
  line-height:1.35; color:var(--plum-800); letter-spacing:-.015em;
}

/* ============================================================
   PILLARS (accordion + media)
   ============================================================ */
.pillars{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(2rem,4vw,4rem); align-items:start}
@media (max-width:920px){.pillars{grid-template-columns:1fr}}
.acc{border-top:1px solid var(--line-2)}
.acc-item{border-bottom:1px solid var(--line-2)}
.acc-btn{
  width:100%; display:flex; align-items:center; gap:1.15rem; text-align:left;
  background:none; border:0; cursor:pointer; padding:1.5rem .25rem;
  transition:padding-left .45s var(--ease-out);
}
.acc-btn:hover{padding-left:.6rem}
.acc-num{
  font-family:var(--sans); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  color:var(--gold-700); flex:none; width:1.9rem; padding-top:.35rem;
  transition:color .35s var(--ease);
}
.acc-ttl{
  flex:1; font-family:var(--serif); font-size:clamp(1.22rem,1.08rem + .6vw,1.62rem);
  font-weight:500; color:var(--plum-900); letter-spacing:-.02em; line-height:1.2;
}
.acc-ico{
  flex:none; width:2.15rem; height:2.15rem; border-radius:var(--r-pill);
  border:1px solid var(--line-2); display:grid; place-items:center; color:var(--plum-600);
  transition:transform .5s var(--ease-out), background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.acc-ico svg{transition:transform .5s var(--ease-out)}
.acc-btn[aria-expanded="true"] .acc-ico{background:var(--plum-700); border-color:var(--plum-700); color:#fff}
.acc-btn[aria-expanded="true"] .acc-ico svg{transform:rotate(45deg)}
.acc-btn[aria-expanded="true"] .acc-num{color:var(--plum-600)}
.acc-panel{overflow:hidden; height:0; transition:height .5s var(--ease-out)}
.acc-panel-in{padding:0 .25rem 1.7rem 3.05rem}
.acc-panel p{color:var(--ink-2); max-width:52ch}
.acc-media{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); aspect-ratio:4/4.3; background:var(--cream-3)}
@media (min-width:921px){.acc-media{position:sticky; top:120px}}
.acc-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06); transition:opacity .8s var(--ease), transform 1.4s var(--ease-out);
}
.acc-media img.on{opacity:1; transform:scale(1)}
.acc-media::after{content:""; position:absolute; inset:0; background:linear-gradient(200deg,rgba(28,8,48,.2),transparent 45%)}
@media (max-width:920px){.acc-media{aspect-ratio:16/10; margin-top:2.5rem}}

/* ============================================================
   FOCUS GRID
   ============================================================ */
.fgrid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
@media (min-width:620px){.fgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.fgrid--3{grid-template-columns:repeat(3,1fr)} .fgrid--4{grid-template-columns:repeat(4,1fr)}}
.fcard{
  background:var(--paper); padding:clamp(1.5rem,2.6vw,2.15rem);
  display:flex; flex-direction:column; gap:.7rem; position:relative;
  transition:background-color .4s var(--ease);
}
.fcard::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--gold-500),var(--plum-500,var(--plum-600)));
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out);
}
.fcard:hover{background:var(--cream)}
.fcard:hover::before{transform:scaleX(1)}
.fcard .fi{color:var(--plum-600); transition:transform .5s var(--ease-out)}
.fcard:hover .fi{transform:translateY(-2px)}
.fcard h3{font-family:var(--serif); font-size:1.14rem; font-weight:600}
.fcard p{font-size:.885rem; line-height:1.62; color:var(--ink-3)}

/* ============================================================
   SCOPE / BOUNDARY
   ============================================================ */
.scope{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--sh-1);
  display:grid; grid-template-columns:1fr 1fr;
}
@media (max-width:820px){.scope{grid-template-columns:1fr}}
.scope-col{padding:clamp(1.9rem,3.4vw,2.9rem)}
.scope-col+.scope-col{border-left:1px solid var(--line)}
@media (max-width:820px){.scope-col+.scope-col{border-left:0; border-top:1px solid var(--line)}}
.scope-col.is-yes{background:linear-gradient(170deg,var(--plum-050),var(--paper) 60%)}
.scope-h{display:flex; align-items:center; gap:.7rem; margin-bottom:1.4rem}
.scope-h h3{font-size:1.22rem; font-family:var(--serif); font-weight:600}
.scope-badge{
  flex:none; width:2rem; height:2rem; border-radius:var(--r-pill); display:grid; place-items:center;
}
.is-yes .scope-badge{background:var(--plum-700); color:#fff}
.is-no .scope-badge{background:var(--cream-3); color:var(--ink-3)}
.scope-list{list-style:none; margin:0; padding:0; display:grid; gap:.72rem}
.scope-list li{display:flex; gap:.7rem; align-items:flex-start; font-size:.945rem; line-height:1.55}
.scope-list li svg{flex:none; margin-top:.35rem}
.is-yes .scope-list li svg{color:var(--gold-600)}
.is-no .scope-list li{color:var(--ink-3)}
.is-no .scope-list li svg{color:var(--line-2)}
.scope-foot{margin-top:1.6rem; padding-top:1.2rem; border-top:1px dashed var(--line-2); font-size:.86rem; line-height:1.6; color:var(--ink-3)}

/* ============================================================
   FULL-BLEED BAND
   ============================================================ */
.hero-band{position:relative; isolation:isolate; overflow:hidden; color:#fff}
.hero-band img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.hero-band::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg,rgba(28,8,48,.94) 6%,rgba(42,15,69,.86) 42%,rgba(42,15,69,.5) 78%,rgba(28,8,48,.42));
}
.hero-band h2{color:#fff}
.hero-band .lead{color:rgba(255,255,255,.84)}
.band-in{padding-block:clamp(4.5rem,8vw,8rem); max-width:63ch}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:3rem; counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}
.step{position:relative; padding:0 1.6rem 0 0}
.step-rail{display:flex; align-items:center; gap:.8rem; margin-bottom:1.15rem}
.step-dot{
  flex:none; width:2.6rem; height:2.6rem; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--cream);
  display:grid; place-items:center; font-family:var(--serif); font-size:.98rem;
  font-weight:600; color:var(--plum-700);
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease-out);
}
.step:hover .step-dot{background:var(--plum-700); color:#fff; border-color:var(--plum-700); transform:translateY(-3px)}
.step-line{flex:1; height:1px; background:var(--line-2)}
.step:last-child .step-line{background:linear-gradient(90deg,var(--line-2),transparent)}
.step h3{font-family:var(--serif); font-size:1.1rem; font-weight:600; margin-bottom:.42rem}
.step p{font-size:.875rem; line-height:1.6; color:var(--ink-3); max-width:26ch}
@media (max-width:900px){.step{padding-bottom:2.2rem}}

/* ============================================================
   FOUNDER
   ============================================================ */
.founder-card{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(2rem,4vw,4rem); align-items:center;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1.6rem,3vw,2.6rem); box-shadow:var(--sh-1);
}
@media (max-width:860px){.founder-card{grid-template-columns:1fr}}
.founder-quote{font-family:var(--serif); font-size:clamp(1.5rem,1.2rem + 1.5vw,2.35rem); line-height:1.18; letter-spacing:-.022em; color:var(--plum-900)}
.byline{display:flex; align-items:center; gap:.8rem; margin-top:1.9rem}
.byline .bar{width:1.9rem; height:1px; background:var(--gold-500); flex:none}
.byline b{font-size:.92rem; font-weight:600; color:var(--plum-800)}
.byline span{font-size:.83rem; color:var(--ink-3)}

/* ============================================================
   JOURNAL
   ============================================================ */
.j-tools{display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; margin-bottom:2.5rem}
.j-cats{display:flex; flex-wrap:wrap; gap:.5rem}
.chip{
  border:1px solid var(--line-2); background:transparent; color:var(--ink-2);
  padding:.5rem 1rem; border-radius:var(--r-pill); font-size:.845rem; font-weight:500; cursor:pointer;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.chip:hover{background:var(--cream-2); border-color:var(--plum-200)}
.chip[aria-pressed="true"]{background:var(--plum-700); border-color:var(--plum-700); color:#fff}
.j-search{position:relative; min-width:min(100%,17rem)}
.j-search input{
  width:100%; padding:.72rem 1rem .72rem 2.5rem; border:1px solid var(--line-2);
  background:var(--paper); border-radius:var(--r-pill); font-size:.9rem; color:var(--ink);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.j-search input:focus{outline:none; border-color:var(--plum-400); box-shadow:0 0 0 3px var(--plum-050)}
.j-search svg{position:absolute; left:.9rem; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}

.feat{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:0;
  border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  background:var(--paper); box-shadow:var(--sh-1); margin-bottom:2.5rem;
}
@media (max-width:820px){.feat{grid-template-columns:1fr}}
.feat-media{position:relative; overflow:hidden; min-height:280px; background:var(--cream-3)}
.feat-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out)}
.feat:hover .feat-media img{transform:scale(1.04)}
.feat-body{padding:clamp(1.8rem,3.2vw,3rem); display:flex; flex-direction:column; justify-content:center}
.tag{
  display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start;
  font-size:.68rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gold-700); background:var(--gold-100); border:1px solid var(--gold-200);
  padding:.35rem .7rem; border-radius:var(--r-pill); margin-bottom:1.1rem;
}
.j-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.6rem}
.j-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; display:flex; flex-direction:column; text-decoration:none;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s var(--ease);
}
.j-card:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--plum-200)}
.j-card .cm{aspect-ratio:16/10; overflow:hidden; background:var(--cream-3)}
.j-card .cm img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out)}
.j-card:hover .cm img{transform:scale(1.05)}
.j-card .cb{padding:1.4rem 1.5rem 1.6rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.j-empty{
  border:1px dashed var(--line-2); border-radius:var(--r-lg); padding:clamp(2.5rem,5vw,4rem);
  text-align:center; background:var(--cream-2);
}

/* ============================================================
   FORM
   ============================================================ */
.form-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(1.6rem,3.4vw,2.9rem); box-shadow:var(--sh-1);
}
.field{display:grid; gap:.45rem; margin-bottom:1.25rem}
.field label{font-size:.845rem; font-weight:600; color:var(--plum-800); letter-spacing:.005em}
.field .opt{font-weight:400; color:var(--ink-3)}
.field input,.field textarea{
  width:100%; padding:.85rem 1rem; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--cream); font-size:.96rem; color:var(--ink);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.field textarea{min-height:9.5rem; resize:vertical; line-height:1.6}
.field input:hover,.field textarea:hover{border-color:var(--plum-200)}
.field input:focus,.field textarea:focus{outline:none; background:var(--paper); border-color:var(--plum-400); box-shadow:0 0 0 3px var(--plum-050)}
.field .err{font-size:.8rem; color:#8E2A2A; display:none; align-items:center; gap:.35rem}
.field.invalid input,.field.invalid textarea{border-color:#B85A5A; background:#FDF6F5}
.field.invalid .err{display:flex}
.form-note{font-size:.82rem; line-height:1.6; color:var(--ink-3); margin-top:1rem}
.form-done{
  display:none; border:1px solid var(--gold-200); background:var(--gold-100);
  border-radius:var(--r); padding:1.3rem 1.4rem; gap:.9rem; align-items:flex-start;
}
.form-done.show{display:flex; animation:rise .6s var(--ease-out)}
.form-err{display:none; margin-top:1.15rem; gap:.9rem; align-items:flex-start;
  border:1px solid #E4C3C3; background:#FDF6F5; border-radius:var(--r); padding:1.1rem 1.25rem}
.form-err.show{display:flex; animation:rise .5s var(--ease-out)}
.hp{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
button[aria-busy="true"]{opacity:.7; cursor:progress}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

.info-list{list-style:none; margin:0; padding:0; display:grid; gap:1.35rem}
.info-list li{display:flex; gap:.95rem; align-items:flex-start}
.info-list .ii{
  flex:none; width:2.5rem; height:2.5rem; border-radius:var(--r-pill);
  background:var(--plum-050); color:var(--plum-700); display:grid; place-items:center;
}
.info-list b{display:block; font-size:.95rem; color:var(--plum-900); font-weight:600; margin-bottom:.15rem}
.info-list p{font-size:.885rem; line-height:1.6; color:var(--ink-3)}
.notice{
  border-left:2px solid var(--gold-500); background:var(--cream-2);
  padding:1.15rem 1.35rem; border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.885rem; line-height:1.65; color:var(--ink-2);
}
.notice b{color:var(--plum-800)}

/* ============================================================
   PAGE HERO (interior)
   ============================================================ */
.phero{position:relative; overflow:hidden; padding-block:clamp(3rem,5vw,4.5rem) clamp(2.5rem,4vw,4rem); border-bottom:1px solid var(--line)}
.phero::before{
  content:""; position:absolute; inset:-40% -20% auto auto; width:60%; height:150%;
  background:radial-gradient(50% 50% at 70% 40%, rgba(192,153,60,.13), transparent 70%);
  pointer-events:none;
}
.phero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(2rem,4vw,4rem); align-items:end}
@media (max-width:900px){.phero-grid{grid-template-columns:1fr}}
.crumb{display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--ink-3); margin-bottom:1.4rem}
.crumb a{text-decoration:none; color:var(--ink-3); transition:color .3s}
.crumb a:hover{color:var(--plum-700)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--plum-900); color:rgba(255,255,255,.7); position:relative; overflow:hidden}
.footer::before{
  content:""; position:absolute; inset:auto -10% -40% -10%; height:70%;
  background:radial-gradient(50% 60% at 30% 100%, rgba(192,153,60,.13), transparent 70%);
  pointer-events:none;
}
.footer-top{position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1.75fr); gap:clamp(2.5rem,5vw,5rem); padding-block:clamp(3.5rem,6vw,5.5rem)}
@media (max-width:860px){.footer-top{grid-template-columns:1fr}}
.f-plaque{
  display:inline-block; background:var(--cream); border-radius:var(--r);
  padding:1rem 1.25rem; box-shadow:0 20px 40px -24px rgba(0,0,0,.6);
}
.f-plaque img{height:64px; width:auto; display:block}
.footer h3{color:#fff; font-size:1.05rem; font-family:var(--sans); font-weight:600; letter-spacing:.02em; margin-bottom:1.15rem}
.f-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem}
@media (max-width:620px){.f-cols{grid-template-columns:1fr 1fr}}
.f-cols ul{list-style:none; margin:0; padding:0; display:grid; gap:.68rem}
.f-cols a{
  text-decoration:none; font-size:.905rem; color:rgba(255,255,255,.68);
  transition:color .3s var(--ease), padding-left .35s var(--ease-out); display:inline-block;
}
.f-cols a:hover{color:#fff; padding-left:.28rem}
.footer-bar{
  position:relative; border-top:1px solid rgba(255,255,255,.12);
  padding-block:1.6rem; display:flex; flex-wrap:wrap; gap:.8rem 1.6rem;
  align-items:center; justify-content:space-between; font-size:.8rem; color:rgba(255,255,255,.5);
}
.footer-bar a{color:rgba(255,255,255,.62); text-decoration:none; transition:color .3s}
.footer-bar a:hover{color:#fff}
.f-legal{display:flex; flex-wrap:wrap; gap:1.2rem}

/* ============================================================
   REVEAL
   ============================================================ */
.rv{opacity:0; transform:translateY(18px); transition:opacity .85s var(--ease-out), transform .95s var(--ease-out)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s} .rv-d4{transition-delay:.32s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
  .acc-panel{transition:none}
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[hidden]{display:none!important}