/* ==========================================================================
   Roland Conner Advisory Group — global stylesheet
   Archetype A4. House component library, RCAG token skin.
   Palette sampled from the approved keystone and seal artwork.
   ========================================================================== */

:root{
  /* Brand */
  --brand:#620718; --brand-dark:#4A0512; --brand-light:#8E2233;
  --brand-soft:#F0E4E2; --brand-hair:rgba(98,7,24,.22);
  --accent:#1F3A5F; --accent-soft:#E6EAF0;

  /* Surfaces */
  --bg:#F6F1E6; --surface:#FCFAF4; --surface-alt:#EFE9DA; --raise:#E8E1CF;
  --ink:#17161C; --ink-mid:#3B3A42; --muted:#6E6C73;
  --border:rgba(23,22,28,.15); --border-soft:rgba(23,22,28,.085);
  --hair:rgba(23,22,28,.26);
  --ink-on-brand:#FCFAF4;

  /* Type */
  --font-display:'Spectral', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Geometry */
  --r-card:14px; --r-pill:50px; --r-input:10px; --r-bar:8px;
  --shadow:0 1px 2px rgba(23,22,28,.035), 0 10px 34px -18px rgba(23,22,28,.22);
  --shadow-lift:0 2px 5px rgba(23,22,28,.05), 0 20px 52px -22px rgba(23,22,28,.3);
  --nav-h:64px; --wrap:1180px; --gut:22px;
}
@media (min-width:960px){ :root{ --nav-h:74px; --gut:40px } }

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand:#E8A0AA; --brand-dark:#CE7E8A; --brand-light:#F2BEC5;
    --brand-soft:#2C1519; --brand-hair:rgba(232,160,170,.26);
    --accent:#9BB8DC; --accent-soft:#1A2432;
    --bg:#121116; --surface:#1A1920; --surface-alt:#1F1E26; --raise:#272630;
    --ink:#EDE9E0; --ink-mid:#C4C0B8; --muted:#94918B;
    --border:rgba(237,233,224,.17); --border-soft:rgba(237,233,224,.09);
    --hair:rgba(237,233,224,.28);
    --ink-on-brand:#1A0A0E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px -18px rgba(0,0,0,.8);
    --shadow-lift:0 2px 5px rgba(0,0,0,.45), 0 20px 52px -22px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --brand:#E8A0AA; --brand-dark:#CE7E8A; --brand-light:#F2BEC5;
  --brand-soft:#2C1519; --brand-hair:rgba(232,160,170,.26);
  --accent:#9BB8DC; --accent-soft:#1A2432;
  --bg:#121116; --surface:#1A1920; --surface-alt:#1F1E26; --raise:#272630;
  --ink:#EDE9E0; --ink-mid:#C4C0B8; --muted:#94918B;
  --border:rgba(237,233,224,.17); --border-soft:rgba(237,233,224,.09);
  --hair:rgba(237,233,224,.28);
  --ink-on-brand:#1A0A0E;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 34px -18px rgba(0,0,0,.8);
  --shadow-lift:0 2px 5px rgba(0,0,0,.45), 0 20px 52px -22px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
img,svg{max-width:100%}
h1,h2,h3,h4,h5{font-family:var(--font-display); margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.016em}
p{margin:0}
strong{font-weight:600; color:var(--ink)}
a{color:var(--brand); text-decoration-thickness:1px; text-underline-offset:3px}
::selection{background:var(--brand); color:var(--ink-on-brand)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:3px;
}

.skip-link{position:absolute;left:-9999px;top:0;z-index:1200;background:var(--brand);color:var(--ink-on-brand);padding:12px 20px;border-radius:0 0 var(--r-input) 0;font-weight:600;font-size:14px}
.skip-link:focus{left:0}

/* ============================ Layout ============================ */
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut)}
section{padding:76px 0; position:relative}
@media (min-width:960px){ section{padding:112px 0} }
.band-alt{background:var(--surface-alt)}
.stack{display:flex; flex-direction:column; gap:17px}
.measure{max-width:66ch}
.measure-tight{max-width:24ch}
.measure-mid{max-width:40ch}

/* Hairline section rule with registration ticks — identity-manual motif */
.ruled{border-top:1px solid var(--border)}
.ruled::before,.ruled::after{
  content:''; position:absolute; top:-1px; width:1px; height:9px; background:var(--hair);
}
.ruled::before{left:var(--gut)}
.ruled::after{right:var(--gut)}

/* ============================ Type ============================ */
.eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--brand); display:flex; align-items:center;
  gap:11px; margin-bottom:20px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--brand); flex:none; opacity:.55}
.eyebrow.alt{color:var(--accent)} .eyebrow.alt::before{background:var(--accent)}
h1,.h1{font-size:clamp(38px,7vw,74px); line-height:1.02; letter-spacing:-.028em}
h2,.h2{font-size:clamp(27px,4.2vw,42px); line-height:1.12; letter-spacing:-.021em}
h3,.h3{font-size:clamp(19px,2.2vw,23px); line-height:1.26; letter-spacing:-.012em}
.lede{font-size:clamp(17.5px,2.05vw,20.5px); line-height:1.58; color:var(--ink-mid); font-weight:400}
.small{font-size:14.5px; color:var(--muted); line-height:1.62}
.label{font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}
.serif-body{font-family:var(--font-display); font-size:19px; line-height:1.62}

/* ============================ Buttons ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border-radius:var(--r-pill); font-weight:600; font-size:15px;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  font-family:var(--font-body); line-height:1.2; letter-spacing:.005em;
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn-solid{background:var(--brand); color:var(--ink-on-brand); border-color:var(--brand)}
.btn-solid:hover{background:var(--brand-dark); border-color:var(--brand-dark); box-shadow:var(--shadow)}
.btn-outline{background:transparent; color:var(--brand); border-color:var(--brand-hair)}
.btn-outline:hover{border-color:var(--brand); background:var(--brand-soft)}
.btn-accent{background:var(--accent); color:var(--surface); border-color:var(--accent)}
:root[data-theme="dark"] .btn-accent,:root:not([data-theme="light"]) .btn-accent{color:var(--ink-on-brand)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border)}
.btn-ghost:hover{border-color:var(--ink-mid)}
.btn-sm{padding:9px 19px; font-size:14px}

/* ============================ Mark ============================ */
.mark-svg{display:block}
.mark-svg path{fill:var(--brand)}

/* ============================ Header ============================ */
.site-header{
  position:sticky; top:0; z-index:900; background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--border-soft);
}
@supports not (backdrop-filter:blur(1px)){ .site-header{background:var(--bg)} }
.nav{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); height:var(--nav-h); display:flex; align-items:center; gap:18px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); flex:none}
.brand .mark-svg{width:17px; height:19px}
.brand .mark{font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.1em; color:var(--ink); line-height:1}
.brand .full{font-family:var(--font-mono); font-size:9px; font-weight:400; color:var(--muted); letter-spacing:.13em; text-transform:uppercase; display:none; padding-left:11px; margin-left:1px; border-left:1px solid var(--border)}
@media (min-width:1120px){ .brand .full{display:inline-block} }

.nav-toggle{margin-left:auto; width:42px; height:42px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:transparent; border:1px solid var(--border); border-radius:var(--r-input); cursor:pointer}
.nav-toggle span{display:block; width:16px; height:1.5px; background:var(--ink); transition:transform .22s, opacity .22s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (min-width:960px){ .nav-toggle{display:none} }

.nav-links{position:fixed; inset:var(--nav-h) 0 0 0; background:var(--bg); padding:24px var(--gut) 40px; overflow-y:auto; display:none; flex-direction:column; gap:0}
.nav-links.open{display:flex}
.nav-links > a{padding:15px 2px; text-decoration:none; color:var(--ink); font-size:17px; font-weight:500; border-bottom:1px solid var(--border-soft)}
.nav-drop-toggle{width:100%; text-align:left; padding:15px 2px; background:transparent; border:none; border-bottom:1px solid var(--border-soft); color:var(--ink); font-size:17px; font-weight:500; font-family:var(--font-body); cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px}
.nav-drop-toggle .caret{font-size:10px; color:var(--muted); transition:transform .22s}
.nav-drop-toggle[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-drop-menu{display:none; padding:6px 0 12px 14px; flex-direction:column; gap:0}
.nav-drop-menu.open{display:flex}
.nav-drop-label{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); padding:10px 0 6px}
.nav-drop-menu a{padding:10px 0; text-decoration:none; color:var(--ink-mid); font-size:15px}
.nav-drop-menu a:hover{color:var(--brand)}
.nav-links .btn{margin-top:22px}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:10px}
@media (max-width:959px){ .nav-cta{margin-left:auto; order:2} .nav-toggle{order:3; margin-left:0} }

@media (min-width:960px){
  .nav-links{position:static; inset:auto; background:none; padding:0; overflow:visible; display:flex; flex-direction:row; align-items:center; gap:2px; margin-left:14px}
  .nav-links > a{border-bottom:none; padding:9px 13px; font-size:14.5px; border-radius:var(--r-pill); font-weight:500}
  .nav-links > a:hover{background:var(--surface-alt)}
  .nav-drop{position:relative}
  .nav-drop-toggle{width:auto; border-bottom:none; padding:9px 13px; font-size:14.5px; border-radius:var(--r-pill)}
  .nav-drop-toggle:hover{background:var(--surface-alt)}
  .nav-drop-menu{position:absolute; top:calc(100% + 10px); left:0; min-width:310px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-lift); padding:16px 18px 18px; z-index:950}
  .nav-drop-menu a{padding:9px 8px; border-radius:8px}
  .nav-drop-menu a:hover{background:var(--surface-alt); color:var(--brand)}
  .nav-links .btn{margin-top:0; margin-left:10px}
}
.theme-toggle{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:transparent; color:var(--ink-mid); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; flex:none; transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--ink-mid); color:var(--ink)}

/* ============================ Hero ============================ */
.hero{padding:72px 0 0; overflow:hidden}
@media (min-width:960px){ .hero{padding:104px 0 0} }
.hero-inner{position:relative}
.hero .eyebrow{margin-bottom:26px}
.hero h1{max-width:13ch}
.hero .lede{max-width:52ch; margin-top:26px}
.hero-figure{
  position:absolute; right:-4%; top:-30px; width:min(30vw,300px); opacity:.055;
  pointer-events:none; z-index:0;
}
.hero-figure svg{width:100%; height:auto; display:block}
.hero-inner > *{position:relative; z-index:1}
@media (max-width:900px){ .hero-figure{display:none} }

/* Pathway split */
.paths{display:grid; grid-template-columns:1fr; gap:1px; margin-top:60px; background:var(--border); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
@media (min-width:820px){ .paths{grid-template-columns:1fr 1fr} }
.path{
  background:var(--bg); padding:34px 0 36px; display:flex; flex-direction:column;
  text-decoration:none; color:inherit; position:relative; transition:background .25s;
}
@media (min-width:820px){ .path{padding:40px 34px 42px} .path:first-child{padding-left:0} .path:last-child{padding-right:0} }
.path::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.path.pro::after{background:var(--accent)}
.path:hover::after{transform:scaleX(1)}
.path:hover{background:var(--surface)}
.path .who{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.19em; text-transform:uppercase; color:var(--brand); margin-bottom:16px}
.path.pro .who{color:var(--accent)}
.path h2{font-size:clamp(22px,2.9vw,30px); margin-bottom:13px; letter-spacing:-.018em}
.path p{color:var(--ink-mid); font-size:16px; flex:1; max-width:44ch}
.path .go{margin-top:24px; font-weight:600; font-size:14.5px; color:var(--brand); display:inline-flex; align-items:center; gap:9px}
.path.pro .go{color:var(--accent)}
.path:hover .go .arr{transform:translateX(5px)}
.path .arr{transition:transform .3s cubic-bezier(.2,.7,.3,1); display:inline-block}

/* ============================ Cards & grids ============================ */
.grid{display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media (min-width:700px){ .grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .grid-3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--surface); padding:30px 28px 32px; transition:background .25s; display:flex; flex-direction:column}
a.card{text-decoration:none; color:inherit}
a.card:hover{background:var(--bg)}
.card h3{margin-bottom:11px}
.card p{color:var(--ink-mid); font-size:15.5px; flex:1; line-height:1.62}
.card .go{margin-top:20px; font-family:var(--font-mono); font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--brand)}

/* ============================ Stages ============================ */
.stages{display:flex; flex-wrap:wrap; gap:9px; align-items:center}
.stage{display:inline-flex; align-items:center; gap:10px; padding:11px 21px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); font-weight:600; font-size:14.5px; color:var(--ink)}
.stage .dot{width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none}
.stage-arrow{display:flex; align-items:center; color:var(--muted); font-size:12px; opacity:.7}

/* ============================ Rules list ============================ */
.rules{border-top:1px solid var(--border)}
.rules .rule{padding:26px 0; border-bottom:1px solid var(--border-soft); display:grid; grid-template-columns:1fr; gap:8px}
@media (min-width:860px){ .rules .rule{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px; align-items:baseline} }
.rules .rule .r-h{font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:19px; line-height:1.34; letter-spacing:-.012em}
.rules .rule .r-b{color:var(--ink-mid); font-size:15.5px; line-height:1.64}

/* ============================ Ledger ============================ */
.ledger{border-top:1px solid var(--border); max-width:640px}
.ledger .row{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline; padding:13px 0; border-bottom:1px solid var(--border-soft)}
.ledger .lbl{font-size:15px; color:var(--ink-mid)}
.ledger .lbl em{display:block; font-style:normal; font-size:12.5px; color:var(--muted); margin-top:2px}
.ledger .val{font-family:var(--font-mono); font-size:14.5px; font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}
.ledger .row.tot{border-bottom:2px solid var(--brand)}
.ledger .row.tot .lbl{font-weight:600; color:var(--ink)}
.ledger .row.tot .val{color:var(--brand); font-weight:500}

/* ============================ Narrative ============================ */
.narrative{border-left:1px solid var(--brand-hair); padding-left:30px; display:flex; flex-direction:column; gap:20px; max-width:60ch}
.narrative p{font-family:var(--font-display); font-size:19.5px; line-height:1.6; color:var(--ink)}
.narrative p.aside{font-family:var(--font-body); font-size:15px; color:var(--muted)}
.pullquote{font-family:var(--font-display); font-size:clamp(24px,3.6vw,38px); line-height:1.26; font-weight:600; color:var(--brand); max-width:19ch; letter-spacing:-.022em}

/* ============================ Definition rows ============================ */
.defs{display:flex; flex-direction:column; border-top:1px solid var(--border)}
.defs .d{display:grid; grid-template-columns:1fr; gap:5px; padding:22px 0; border-bottom:1px solid var(--border-soft)}
@media (min-width:760px){ .defs .d{grid-template-columns:230px 1fr; gap:34px} }
.defs .d dt{font-weight:600; color:var(--ink); font-size:15.5px; font-family:var(--font-body)}
.defs .d dd{margin:0; color:var(--ink-mid); font-size:15.5px; line-height:1.64}

/* ============================ FAQ ============================ */
.faq{border-top:1px solid var(--border); max-width:78ch}
.faq-item{border-bottom:1px solid var(--border-soft)}
.faq-q{width:100%; text-align:left; background:transparent; border:none; cursor:pointer; padding:23px 40px 23px 0; font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--ink); position:relative; line-height:1.38; letter-spacing:-.012em}
.faq-q::after{content:''; position:absolute; right:8px; top:50%; width:11px; height:1.5px; background:var(--brand); transform:translateY(-50%)}
.faq-q::before{content:''; position:absolute; right:13px; top:50%; width:1.5px; height:11px; background:var(--brand); transform:translateY(-50%); transition:transform .25s}
.faq-q[aria-expanded="true"]::before{transform:translateY(-50%) scaleY(0)}
.faq-a{display:none; padding:0 0 24px; color:var(--ink-mid); font-size:16px; line-height:1.68; max-width:64ch}
.faq-a.open{display:block}

/* ============================ CTA ============================ */
.cta-band{background:var(--ink); border-radius:var(--r-card); padding:60px 34px; text-align:center; position:relative; overflow:hidden}
.cta-band .cta-mark{position:absolute; right:-30px; bottom:-40px; width:210px; opacity:.06; pointer-events:none}
.cta-band .cta-mark path{fill:#F6F1E6}
.cta-band > *{position:relative; z-index:1}
.cta-band h2{color:#F6F1E6; margin-bottom:14px}
.cta-band p{color:rgba(246,241,230,.7); max-width:50ch; margin:0 auto 30px; font-size:16.5px}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.cta-band .btn-ghost{color:#F6F1E6; border-color:rgba(246,241,230,.3)}
.cta-band .btn-ghost:hover{border-color:#F6F1E6}
.cta-band .btn-solid{background:#F6F1E6; color:#17161C; border-color:#F6F1E6}
.cta-band .btn-solid:hover{background:#FFF; border-color:#FFF}

/* ============================ Disclaimer ============================ */
.disclaimer{background:var(--surface-alt); border-top:1px solid var(--border-soft); padding:22px 0; font-size:13.5px; color:var(--muted); line-height:1.62}

/* ============================ Footer ============================ */
.site-footer{background:var(--surface-alt); border-top:1px solid var(--border); padding:64px 0 0}
.foot-grid{display:grid; grid-template-columns:1fr; gap:38px}
@media (min-width:700px){ .foot-grid{grid-template-columns:1.5fr 1fr 1fr} }
@media (min-width:1000px){ .foot-grid{grid-template-columns:1.7fr 1fr 1fr 1fr} }
.foot-brand .fb-lock{display:flex; align-items:center; gap:12px}
.foot-brand .mark-svg{width:20px; height:22px}
.foot-brand .mark{font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:.1em; color:var(--ink); line-height:1}
.foot-brand .pos{margin-top:16px; color:var(--ink-mid); font-size:15px; max-width:31ch; line-height:1.6}
.foot-brand .tag{margin-top:18px; font-family:var(--font-mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--brand)}
.foot-col h4{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:17px}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.foot-col a{color:var(--ink-mid); text-decoration:none; font-size:14.5px}
.foot-col a:hover{color:var(--brand)}
.foot-legal{margin-top:52px; border-top:1px solid var(--border); padding:24px 0 30px; display:flex; flex-wrap:wrap; gap:11px 24px; align-items:center; justify-content:space-between; font-size:13px; color:var(--muted)}
.foot-legal a{color:var(--muted); text-decoration:none}
.foot-legal a:hover{color:var(--ink-mid)}
.foot-legal .links{display:flex; flex-wrap:wrap; gap:17px}
.foot-powered{color:var(--muted); font-size:13px; text-decoration:none}
.foot-powered:hover{color:var(--ink-mid)}
.foot-note{border-top:1px solid var(--border); padding:20px 0 30px; font-size:12.5px; color:var(--muted); line-height:1.62; max-width:92ch}

/* ============================ AI citation ============================ */
.ai-cite{border-top:1px solid var(--border-soft); background:var(--bg); padding:28px 0; font-size:12.5px; line-height:1.66; color:var(--muted)}
.ai-cite .label{margin-bottom:8px; display:block}
.ai-cite p{max-width:94ch}

/* ============================ Reveal ============================ */
.js-anim .reveal{opacity:0; transform:translateY(16px)}
.js-anim .reveal.visible{opacity:1; transform:none; transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){ .js-anim .reveal{opacity:1!important; transform:none!important} }

/* ============================ Breadcrumbs / page hero ============================ */
.crumbs{padding:22px 0 0; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{margin:0 9px; opacity:.5}
.page-hero{padding:42px 0 60px; position:relative; overflow:hidden}
@media (min-width:960px){ .page-hero{padding:54px 0 80px} }
.page-hero h1{max-width:17ch; font-size:clamp(33px,5.6vw,58px)}
.page-hero .lede{max-width:60ch; margin-top:24px}
.speakable-summary{max-width:60ch}

/* ==========================================================================
   AGENCY LAYER — dark hero, marquee, badges, stat figures
   Reference register: lodestardigital.co and goldstandrd.com
   ========================================================================== */

/* Committed dark band. Same in both themes, like a photographic hero. */
.dark-band{
  --d-ink:#F6F1E6; --d-mid:rgba(246,241,230,.66); --d-soft:rgba(246,241,230,.34);
  --d-line:rgba(246,241,230,.14); --d-rose:#E8A0AA;
  position:relative; background:#140F12; color:var(--d-ink); overflow:hidden; isolation:isolate;
}
.dark-band::before{
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 78% at 76% 12%, rgba(150,26,48,.42) 0%, rgba(20,15,18,0) 62%),
    radial-gradient(80% 60% at 8% 96%, rgba(98,7,24,.34) 0%, rgba(20,15,18,0) 60%);
}
.dark-band::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(246,241,230,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,241,230,.045) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
.dark-band h1,.dark-band h2,.dark-band h3{color:var(--d-ink)}
.dark-band .lede{color:var(--d-mid)}
.dark-band p{color:var(--d-mid)}
.dark-band a{color:var(--d-rose)}
.dark-band .btn-solid{background:var(--d-rose); color:#1A0A0E; border-color:var(--d-rose)}
.dark-band .btn-solid:hover{background:#F2BEC5; border-color:#F2BEC5}
.dark-band .btn-ghost{color:var(--d-ink); border-color:var(--d-line)}
.dark-band .btn-ghost:hover{border-color:var(--d-ink)}
.dark-band .eyebrow{color:var(--d-rose)}
.dark-band .eyebrow::before{background:var(--d-rose)}

/* Pill badge eyebrow */
.badge{
  display:inline-flex; align-items:center; gap:9px; padding:7px 16px 7px 13px;
  border:1px solid var(--brand-hair); border-radius:var(--r-pill);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--brand); background:transparent;
}
.badge .bdot{width:5px; height:5px; border-radius:50%; background:var(--brand); flex:none}
.dark-band .badge{border-color:rgba(232,160,170,.34); color:var(--d-rose)}
.dark-band .badge .bdot{background:var(--d-rose)}

/* Display headline with a coloured second clause */
.display{font-size:clamp(42px,8.4vw,96px); line-height:.98; letter-spacing:-.036em; font-weight:600}
.display .em{color:var(--d-rose); font-style:italic}
.display .em-light{color:var(--brand); font-style:italic}

/* Hero keystone, drawn architectural */
.hero-arch{position:absolute; right:-2%; top:50%; transform:translateY(-50%); width:min(38vw,440px); z-index:-1; pointer-events:none; opacity:.9}
.hero-arch .stone{fill:rgba(232,160,170,.13); stroke:rgba(232,160,170,.4); stroke-width:.9}
.hero-arch .key{fill:rgba(232,160,170,.3); stroke:rgba(232,160,170,.78); stroke-width:1.2}
.hero-arch .load{stroke:rgba(232,160,170,.5); stroke-width:1.4; fill:none}
.hero-arch .ring{fill:none; stroke:rgba(232,160,170,.16); stroke-width:.8}
@media (max-width:880px){ .hero-arch{display:none} }

/* Stat figures */
.statrow{display:grid; grid-template-columns:1fr; border-top:1px solid var(--d-line); margin-top:56px}
@media (min-width:720px){ .statrow{grid-template-columns:repeat(3,1fr)} }
.statrow .st{padding:26px 0; border-bottom:1px solid var(--d-line)}
@media (min-width:720px){ .statrow .st{padding:28px 30px 30px; border-bottom:none; border-left:1px solid var(--d-line)} .statrow .st:first-child{padding-left:0; border-left:none} }
.statrow .fig{font-family:var(--font-display); font-size:clamp(30px,4.2vw,46px); line-height:1; font-weight:700; color:var(--d-rose); letter-spacing:-.028em}
.statrow .fig .u{font-size:.5em; letter-spacing:.02em; opacity:.8}
.statrow .cap{margin-top:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--d-soft); line-height:1.7}
.statrow .sub{margin-top:7px; font-size:14px; color:var(--d-mid); line-height:1.55; max-width:32ch}

/* Marquee ticker */
.marquee{
  --sp:52s; position:relative; overflow:hidden; background:#140F12;
  border-top:1px solid rgba(246,241,230,.13); border-bottom:1px solid rgba(246,241,230,.13);
  padding:17px 0;
}
.marquee-track{display:flex; width:max-content; animation:mq var(--sp) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  display:inline-flex; align-items:center; gap:26px; padding-right:26px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.15em;
  text-transform:uppercase; color:rgba(246,241,230,.72); white-space:nowrap;
}
.marquee-track span::after{content:''; width:4px; height:4px; border-radius:50%; background:#E8A0AA; opacity:.85; flex:none}
@keyframes mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none; width:100%; flex-wrap:wrap; gap:10px 0; justify-content:center}
}

/* Scroll cue */
.scrollcue{margin-top:54px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--d-soft); display:flex; align-items:center; gap:12px}
.scrollcue::after{content:''; width:44px; height:1px; background:currentColor; opacity:.6}

/* Section number rail — replaces plain eyebrows on major bands */
.sec-head{display:grid; grid-template-columns:1fr; gap:14px; align-items:end; margin-bottom:34px}
@media (min-width:900px){ .sec-head{grid-template-columns:minmax(0,1fr) auto; gap:40px} }
.sec-head .sh-r{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); text-align:left}
@media (min-width:900px){ .sec-head .sh-r{text-align:right; padding-bottom:8px} }

/* Oversized quote band */
.quote-band{padding:96px 0}
.quote-band .q{font-family:var(--font-display); font-size:clamp(26px,4.6vw,54px); line-height:1.14; letter-spacing:-.028em; font-weight:600; max-width:19ch}
.quote-band .q .em{font-style:italic; color:var(--d-rose)}
.quote-band .attrib{margin-top:30px; font-family:var(--font-mono); font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--d-soft)}

/* Card hover lift for the agency register */
a.card{position:relative}
a.card::after{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.2,.7,.3,1)}
a.card:hover::after{transform:scaleX(1)}

/* ---- Agency layer fixes (post-render review) ---- */
.nav-links > a, .nav-drop-toggle, .btn{white-space:nowrap}
@media (min-width:960px){
  .nav-links{gap:0}
  .nav-links > a, .nav-drop-toggle{padding:9px 11px; font-size:14px}
  .nav{gap:12px}
}

/* Header sits ON the dark hero until the page is scrolled */
.site-header.over-dark{
  background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom-color:transparent; transition:background .3s, border-color .3s;
}
.site-header.over-dark .brand .mark{color:#F6F1E6}
.site-header.over-dark .brand .full{color:rgba(246,241,230,.5); border-left-color:rgba(246,241,230,.22)}
.site-header.over-dark .mark-svg path{fill:#E8A0AA}
.site-header.over-dark .nav-links > a,
.site-header.over-dark .nav-drop-toggle{color:#F6F1E6}
.site-header.over-dark .nav-links > a:hover,
.site-header.over-dark .nav-drop-toggle:hover{background:rgba(246,241,230,.1)}
.site-header.over-dark .theme-toggle{color:rgba(246,241,230,.72); border-color:rgba(246,241,230,.24)}
.site-header.over-dark .theme-toggle:hover{color:#F6F1E6; border-color:#F6F1E6}
.site-header.over-dark .nav-toggle{border-color:rgba(246,241,230,.24)}
.site-header.over-dark .nav-toggle span{background:#F6F1E6}
.site-header.over-dark .nav-links .btn-solid{background:#E8A0AA; color:#1A0A0E; border-color:#E8A0AA}
.site-header.over-dark .nav-links .btn-solid:hover{background:#F2BEC5; border-color:#F2BEC5}
@media (max-width:959px){
  .site-header.over-dark .nav-links{background:#140F12}
  .site-header.over-dark .nav-links > a, .site-header.over-dark .nav-drop-toggle{border-bottom-color:rgba(246,241,230,.12)}
  .site-header.over-dark .nav-drop-menu a{color:rgba(246,241,230,.72)}
  .site-header.over-dark .nav-drop-label{color:rgba(246,241,230,.44)}
}
/* dark hero rises under the transparent header */
body.dark-hero .hero.dark-band,
body.dark-hero .page-hero.dark-band{margin-top:calc(var(--nav-h) * -1); padding-top:calc(var(--nav-h) + 72px)}
@media (min-width:960px){
  body.dark-hero .hero.dark-band{padding-top:calc(var(--nav-h) + 104px)}
  body.dark-hero .page-hero.dark-band{padding-top:calc(var(--nav-h) + 64px)}
}
body.dark-hero .crumbs{position:relative; z-index:2; color:rgba(246,241,230,.5)}
body.dark-hero .crumbs a{color:rgba(246,241,230,.5)}
body.dark-hero .crumbs a:hover{color:#E8A0AA}

/* Arch, raised contrast */
.hero-arch .stone{fill:rgba(232,160,170,.2); stroke:rgba(232,160,170,.58); stroke-width:1}
.hero-arch .key{fill:rgba(232,160,170,.46); stroke:rgba(232,160,170,.95); stroke-width:1.4}
.hero-arch .load{stroke:rgba(232,160,170,.62); stroke-width:1.5}
.hero-arch .ring{stroke:rgba(232,160,170,.2)}

/* ---- Dropdown hover bridge ----
   The menu sits below the toggle with a gap. That gap belongs to neither
   element, so moving the pointer toward the menu fires mouseleave and the
   menu closes before it can be reached. The bridge covers the gap and, being
   a child of .nav-drop, keeps the pointer inside the hover target. */
@media (min-width:960px){
  .nav-drop-menu::before{
    content:''; position:absolute; left:0; right:0; top:-14px; height:14px;
    background:transparent;
  }
  .nav-drop-menu{ top:calc(100% + 10px) }
  /* keep the toggle looking active while its menu is open */
  .nav-drop-toggle[aria-expanded="true"]{ background:var(--surface-alt) }
  .site-header.over-dark .nav-drop-toggle[aria-expanded="true"]{ background:rgba(246,241,230,.12) }
}