/* ============================================================
   BOAN.ink — site furniture. Grounded in the BOAN.ink design-system
   tokens (warm ink on cream, one gold accent, sharp 0px corners).
   Type: Playfair Display (display), Libre Baskerville (body), DM Mono (labels).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Mono:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@500;700;800&display=swap');

:root {
  --cream:#F4EFE6; --cream-2:#EEE7D8; --cream-3:#ECE3D2; --cream-4:#F0E9DA; --raised:#FBF8F1;
  --ink:#191613; --ink-2:#100E0C; --soft:#5b554c; --soft-2:#6f685c; --muted:#8a8275;
  --gold:#B68A3E; --gold-bright:#C8A55E;
  --hair:rgba(25,22,19,.14); --hair-soft:rgba(25,22,19,.08); --hair-cream:rgba(244,239,230,.14);
  --serif:'Playfair Display', Georgia, serif;
  --body:'Libre Baskerville', Georgia, serif;
  --mono:'DM Mono', ui-monospace, monospace;
  --logo:'JetBrains Mono', ui-monospace, monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --wrap:1280px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--cream); color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.ico { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.ico svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* ---- type helpers ---------------------------------------- */
.kicker { font-family:var(--mono); font-size:.94rem; letter-spacing:.22em; text-transform:uppercase; color:var(--soft); display:inline-flex; align-items:center; gap:.7rem; }
.kicker .ico { width:20px; height:20px; color:var(--gold); }
.label { font-family:var(--mono); font-size:.98rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.7rem; }
.label .ico { width:19px; height:19px; }
.marker { font-family:var(--mono); font-size:.9rem; letter-spacing:.18em; text-transform:uppercase; color:var(--soft); }
.secnum { font-family:var(--serif); font-weight:700; font-size:clamp(2.6rem,7vw,6rem); line-height:.8; color:transparent; -webkit-text-stroke:1.5px rgba(182,138,62,.5); display:block; }
h1,h2,h3,h4 { color:var(--ink); }
.display { font-family:var(--serif); font-weight:800; line-height:.86; letter-spacing:-.035em; font-size:clamp(3.4rem,9vw,8rem); }
.display em { font-style:italic; font-weight:600; color:var(--gold); }
.h1 { font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem,5.4vw,4.6rem); line-height:1; letter-spacing:-.025em; text-wrap:balance; }
.h1 em { font-style:italic; font-weight:500; color:var(--gold); }
.h2 { font-family:var(--serif); font-weight:700; font-size:clamp(2rem,4vw,3.3rem); line-height:1.04; letter-spacing:-.02em; text-wrap:balance; }
.h2 em { font-style:italic; font-weight:500; color:var(--gold); }
.h3 { font-family:var(--serif); font-weight:700; font-size:1.5rem; line-height:1.2; }
.h4 { font-family:var(--serif); font-weight:600; font-size:1.2rem; line-height:1.25; }
.lede { font-family:var(--serif); font-style:italic; font-weight:400; font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.4; color:var(--ink); text-wrap:pretty; }
.body { font-family:var(--body); font-size:1.05rem; line-height:1.8; color:var(--ink); }
.body.soft { color:var(--soft); }
.body p { margin-bottom:1.3rem; }
.body p:last-child { margin-bottom:0; }
.body em { font-family:var(--serif); font-style:italic; color:var(--gold); }
.mission { font-family:var(--serif); font-style:italic; font-size:1.5rem; line-height:1.4; color:var(--gold); }

/* ---- layout --------------------------------------------- */
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 4vw; }
section { padding:11vh 0; position:relative; }
section.tight { padding:7vh 0; }
.dark { background:var(--ink-2); color:var(--cream); }
.dark h1,.dark h2,.dark h3,.dark h4,.dark .h1,.dark .h2,.dark .h3,.dark .h4,.dark .lede { color:var(--cream); }
.dark .label { color:var(--gold-bright); }
.dark .body { color:#d8d1c4; }
.dark .secnum { -webkit-text-stroke-color:rgba(200,165,94,.55); }
.deep { background:var(--cream-2); }
.deep-3 { background:var(--cream-3); }
.rule { border:0; border-top:1px solid var(--hair); }
.rule-ink { border:0; border-top:1.5px solid var(--ink); }
.rule-gold { border:0; border-top:1px solid var(--gold); }

/* ---- buttons -------------------------------------------- */
.btn { font-family:var(--mono); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; padding:1.1rem 2.1rem; display:inline-flex; align-items:center; gap:.7rem; border:1.5px solid var(--ink); cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.btn .ico { width:15px; height:15px; }
.btn-pri { background:var(--ink); color:var(--cream); }
.btn-pri:hover { background:var(--gold); border-color:var(--gold); color:var(--ink); }
.btn-ghost { background:transparent; color:var(--ink); }
.btn-ghost:hover { color:var(--gold); border-color:var(--gold); }
.dark .btn-pri { background:var(--gold); border-color:var(--gold); color:var(--ink); }
.dark .btn-pri:hover { background:var(--cream); border-color:var(--cream); }
.dark .btn-ghost { color:var(--cream); border-color:var(--cream); }
.dark .btn-ghost:hover { color:var(--gold-bright); border-color:var(--gold-bright); }
.link-ul { font-family:var(--mono); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); border-bottom:1.5px solid var(--gold); padding-bottom:3px; display:inline-flex; align-items:center; gap:.5rem; transition:color .2s, border-color .2s; }
.link-ul:hover { color:var(--gold); }
.dark .link-ul { color:var(--cream); }
.link-ul .ico { width:14px; height:14px; }

/* ============================================================
   NAV — editorial mega-menu
   ============================================================ */
.nav { position:sticky; top:0; z-index:500; background:rgba(244,239,230,.86); backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid var(--hair); }
.nav-inner { max-width:1480px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:.85rem 3vw; }
.nav .logo img { height:46px; width:auto; }
.nav-menu { display:flex; align-items:stretch; gap:.2rem; }
.nav-group { position:relative; }
.nav-group > .nav-top { font-family:var(--mono); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--soft); padding:1.4rem .95rem; display:inline-flex; align-items:center; gap:.4rem; cursor:default; transition:color .2s; white-space:nowrap; }
.nav-group:hover > .nav-top { color:var(--gold); }
.nav-group > .nav-top .ico { width:13px; height:13px; opacity:.6; }
.nav-cta { display:flex; align-items:center; gap:1.3rem; }
.nav-enter { font-family:var(--mono); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); border:1.5px solid var(--gold); padding:.7rem 1.2rem; display:inline-flex; align-items:center; gap:.5rem; transition:background .2s, color .2s; white-space:nowrap; }
.nav-enter:hover { background:var(--gold); color:var(--ink); }
.nav-enter .ico { width:13px; height:13px; }

/* mega panel */
.mega { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px); min-width:300px; background:var(--cream); border:1.5px solid var(--ink); box-shadow:0 30px 60px -30px rgba(25,22,19,.5); padding:1.5rem 1.6rem; opacity:0; visibility:hidden; transition:opacity .2s var(--ease), transform .2s var(--ease); z-index:600; }
.nav-group:hover .mega { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega.wide { min-width:560px; }
.mega-head { font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); padding-bottom:.9rem; margin-bottom:.9rem; border-bottom:1px solid var(--hair); }
.mega-grid { display:grid; grid-template-columns:1fr; gap:.1rem; }
.mega.wide .mega-grid { grid-template-columns:1fr 1fr; gap:.1rem 2rem; }
.mega-item { display:flex; flex-direction:column; gap:.15rem; padding:.6rem .5rem; transition:background .15s; }
.mega-item:hover { background:var(--cream-2); }
.mega-item .mi-t { font-family:var(--serif); font-weight:600; font-size:1.02rem; color:var(--ink); }
.mega-item:hover .mi-t { color:var(--gold); }
.mega-item .mi-d { font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
.burger { display:none; background:none; border:1.5px solid var(--ink); font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); cursor:pointer; padding:.6rem .9rem; }

/* ============================================================
   FOOTER — four columns
   ============================================================ */
.foot { background:var(--ink-2); color:var(--cream); padding:11vh 0 5vh; }
.foot .wrap { max-width:1480px; padding:0 3vw; }
.foot-top { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-bottom:5vh; border-bottom:1px solid var(--hair-cream); }
.foot-promise { font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(2.8rem,7.5vw,5.6rem); color:var(--cream); line-height:.95; letter-spacing:-.015em; }
.foot-logo { height:58px; width:auto; filter:invert(1) brightness(1.1); opacity:.92; }
.foot-cols { display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; padding:5vh 0; }
.foot-col h5 { font-family:var(--mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:1.3rem; }
.foot-col a { display:block; font-family:var(--body); font-size:.96rem; color:#bdb6a8; padding:.34rem 0; transition:color .2s; }
.foot-col a:hover { color:var(--cream); }
.foot-mid { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; align-items:flex-end; padding:4vh 0; border-top:1px solid var(--hair-cream); }
.foot-contact .ct { font-family:var(--mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:.7rem; }
.foot-contact a { font-family:var(--serif); font-style:italic; font-size:1.3rem; color:var(--cream); }
.foot-contact a:hover { color:var(--gold-bright); }
.foot-contact .loc { font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--soft-2); margin-top:.6rem; }
.foot-enter { font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-bright); border:1.5px solid var(--gold); padding:.9rem 1.4rem; display:inline-flex; align-items:center; gap:.5rem; transition:background .2s, color .2s; }
.foot-enter:hover { background:var(--gold); color:var(--ink); }
.foot-fine { display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; border-top:1px solid var(--hair-cream); padding-top:3vh; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--soft-2); }
.foot-fine .legal { display:flex; gap:1.5rem; }
.foot-fine .legal a:hover { color:#bdb6a8; }

/* ============================================================
   COMPONENTS
   ============================================================ */
/* page hero */
.phero { padding:9vh 0 7vh; }
.phero .kicker { margin-bottom:1.6rem; }
.phero .lede { margin-top:2.2rem; max-width:34ch; }
.phero-meta { display:flex; gap:2.2rem; flex-wrap:wrap; margin-top:2.6rem; }
.phero-meta .pm { display:flex; flex-direction:column; gap:.3rem; }
.phero-meta .pm .k { font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); }
.phero-meta .pm .v { font-family:var(--serif); font-size:1.05rem; color:var(--ink); }

/* photo placeholder */
.photo-ph { background:var(--cream-3); border:1.5px solid var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.9rem; text-align:center; color:var(--soft); aspect-ratio:4/3; position:relative; overflow:hidden; }
.photo-ph::before { content:""; position:absolute; inset:9px; border:1px dashed rgba(25,22,19,.22); pointer-events:none; }
.photo-ph .ico { width:34px; height:34px; color:var(--gold); }
.photo-ph .pl { font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; }
.photo-ph.tall { aspect-ratio:4/5; }
.photo-ph.wide { aspect-ratio:16/9; }
.photo-ph.sq { aspect-ratio:1; }
.dark .photo-ph { background:#1c1916; border-color:#3a352d; color:var(--muted); }
.dark .photo-ph::before { border-color:rgba(244,239,230,.16); }

/* generic card */
.card { background:var(--raised); border:1px solid var(--hair); padding:2.2rem; display:flex; flex-direction:column; gap:.8rem; box-shadow:0 1px 1px rgba(25,22,19,.03), 0 22px 38px -26px rgba(25,22,19,.42); transition:border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.card:hover { border-color:var(--gold); box-shadow:0 2px 4px rgba(25,22,19,.05), 0 34px 54px -28px rgba(25,22,19,.52); }
.card .ico { width:30px; height:30px; color:var(--gold); }
.card .cn, .cn { font-family:var(--mono); font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.card h3 { font-family:var(--serif); font-weight:700; font-size:1.4rem; }
.card p { font-family:var(--body); font-size:.98rem; line-height:1.6; color:var(--soft); }
.card.framed { background:transparent; border:1.5px solid var(--ink); box-shadow:0 16px 30px -26px rgba(25,22,19,.4); }
a.card:hover { transform:translateY(-4px); }

/* grids */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.split { display:grid; grid-template-columns:1.1fr 1fr; gap:4rem; align-items:start; }
.split.r { grid-template-columns:1fr 1.1fr; }
.split.even { grid-template-columns:1fr 1fr; }

/* numbered steps (how it works) */
.steps { display:grid; gap:0; border-top:1.5px solid var(--ink); }
.step { display:grid; grid-template-columns:90px 1fr; gap:2rem; padding:2.4rem 0; border-bottom:1px solid var(--hair); align-items:start; }
.step .sn { font-family:var(--serif); font-weight:700; font-size:2.6rem; color:transparent; -webkit-text-stroke:1.4px var(--gold); line-height:1; }
.step h4 { font-family:var(--serif); font-weight:700; font-size:1.45rem; margin-bottom:.5rem; }
.step p { font-family:var(--body); font-size:1rem; line-height:1.7; color:var(--soft); max-width:56ch; }

/* "what you get" list with ticks */
.gets { display:grid; gap:0; }
.get { display:grid; grid-template-columns:28px 1fr; gap:1.1rem; padding:1.4rem 0; border-bottom:1px solid var(--hair); align-items:start; }
.get .ico { width:22px; height:22px; color:var(--gold); margin-top:.2rem; }
.get h4 { font-family:var(--serif); font-weight:700; font-size:1.2rem; margin-bottom:.25rem; }
.get p { font-family:var(--body); font-size:.98rem; line-height:1.6; color:var(--soft); }

/* who it is for / not for */
.foreach { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1.5px solid var(--ink); }
.foreach .fc { padding:2.4rem; }
.foreach .fc:first-child { border-right:1.5px solid var(--ink); }
.foreach .fh { font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:1.4rem; display:flex; align-items:center; gap:.6rem; }
.foreach .fc ul { list-style:none; }
.foreach .fc li { font-family:var(--body); font-size:1rem; line-height:1.5; color:var(--ink); padding:.7rem 0 .7rem 1.5rem; border-bottom:1px solid var(--hair); position:relative; }
.foreach .fc li:last-child { border-bottom:0; }
.foreach .fc li::before { content:""; position:absolute; left:0; top:1.2rem; width:9px; height:1.5px; background:var(--gold); }

/* FAQ accordion */
.faq { border-top:1.5px solid var(--ink); }
.faq details { border-bottom:1px solid var(--hair); }
.faq summary { list-style:none; cursor:pointer; padding:1.7rem 0; display:flex; justify-content:space-between; align-items:center; gap:2rem; font-family:var(--serif); font-weight:600; font-size:1.25rem; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary .pm { font-family:var(--mono); color:var(--gold); font-size:1.4rem; flex:0 0 auto; transition:transform .25s; }
.faq details[open] summary .pm { transform:rotate(45deg); }
.faq .ans { font-family:var(--body); font-size:1.02rem; line-height:1.75; color:var(--soft); padding:0 0 1.8rem; max-width:70ch; }

/* tier / structure cards (no pricing) */
.tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1.5px solid var(--ink); }
.tier { padding:2.6rem 2rem; border-right:1.5px solid var(--ink); display:flex; flex-direction:column; gap:1rem; }
.tier:last-child { border-right:0; }
.tier .tn { font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.tier h3 { font-family:var(--serif); font-weight:700; font-size:1.7rem; }
.tier .price { font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); padding:.6rem 0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.tier ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.tier li { font-family:var(--body); font-size:.95rem; color:var(--soft); padding-left:1.3rem; position:relative; line-height:1.45; }
.tier li::before { content:""; position:absolute; left:0; top:.7em; width:8px; height:1.5px; background:var(--gold); }

/* verdict badges */
.verdicts { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.verdict { border:1.5px solid var(--ink); padding:2rem 1.8rem; display:flex; flex-direction:column; gap:.7rem; }
.verdict .vk { font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--soft); }
.verdict .vv { font-family:var(--serif); font-weight:700; font-size:1.8rem; }
.verdict.go .vv { color:var(--gold); }
.verdict p { font-family:var(--body); font-size:.92rem; line-height:1.5; color:var(--soft); }

/* coming soon banner */
.soon { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); border:1.5px solid var(--gold); padding:.5rem .9rem; }
.soon .dot { width:6px; height:6px; border-radius:50%; background:var(--gold); }

/* status pill */
.status { font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); display:inline-flex; align-items:center; gap:.5rem; }
.status .dot { width:7px; height:7px; border-radius:50%; background:var(--gold); }

/* pull quote / framed quote */
.pull { font-family:var(--body); font-style:italic; font-size:clamp(1.4rem,3vw,2.2rem); line-height:1.45; color:var(--ink); max-width:30ch; }
.pull .hl { color:var(--gold); }
.framed-q { border:1.5px solid var(--ink); padding:3rem 3.2rem; }

/* subscribe / capture block */
.capture { background:var(--ink-2); color:var(--cream); padding:5vh 4vw; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.6rem; }
.capture .h2 { color:var(--cream); }
.capture-form { display:flex; gap:0; max-width:480px; width:100%; border:1.5px solid var(--gold); }
.capture-form input { flex:1; background:transparent; border:0; color:var(--cream); font-family:var(--mono); font-size:.82rem; letter-spacing:.08em; padding:1rem 1.2rem; outline:none; }
.capture-form input::placeholder { color:var(--muted); }
.capture-form button { background:var(--gold); color:var(--ink); border:0; font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; padding:0 1.4rem; cursor:pointer; transition:background .2s; }
.capture-form button:hover { background:var(--cream); }
.capture .fine { font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* meta-row dividers between sections */
.eyebrow-row { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.6rem; }

/* pillar / list item rows */
.rowlist { border-top:1.5px solid var(--ink); }
.rowlink { display:grid; grid-template-columns:auto 1fr auto; gap:1.6rem; align-items:center; padding:1.9rem 0; border-bottom:1px solid var(--hair); transition:padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease); }
.rowlink:hover { padding:1.9rem 1rem 1.9rem 1.4rem; background:var(--raised); box-shadow:inset 3px 0 0 var(--gold), 0 18px 30px -24px rgba(25,22,19,.5); }
.rowlink .rn { font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; color:var(--gold); }
.rowlink .rt { font-family:var(--serif); font-weight:600; font-size:1.5rem; }
.rowlink:hover .rt { color:var(--gold); }
.rowlink .rd { font-family:var(--body); font-size:.96rem; color:var(--soft); }
.rowlink .ico { width:18px; height:18px; color:var(--soft); transition:transform .3s var(--ease), color .25s; }
.rowlink:hover .ico { color:var(--gold); transform:translateX(7px); }

/* scroll reveal — default VISIBLE. Where supported, a scroll-position-driven entrance
   (no JS class toggle, no time-based stalls, never leaves content hidden). */
.reveal { opacity:1; }
@keyframes boanReveal { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }
@keyframes boanRevealL { from { opacity:0; transform:translate(-32px,12px); } to { opacity:1; transform:none; } }
@keyframes boanRevealR { from { opacity:0; transform:translate(32px,12px); } to { opacity:1; transform:none; } }
@keyframes pillarSlide { from { transform:translateY(-95%); } to { transform:translateY(20%); } }
@keyframes floatY { from { transform:translateY(-22px); } to { transform:translateY(22px); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation:boanReveal both; animation-timeline:view(); animation-range:entry 0% entry 100%; }
    .reveal.rl { animation-name:boanRevealL; }
    .reveal.rr { animation-name:boanRevealR; }
    .pillar-numeral { animation:pillarSlide both linear; animation-timeline:view(); animation-range:cover 0% cover 100%; }
    .parallax-soft { animation:floatY both linear; animation-timeline:view(); animation-range:cover 0% cover 100%; }

/* loop diagram (the engine) */
.loopwrap { position:relative; aspect-ratio:1; width:100%; }
.loopwrap .ring { position:absolute; border:1.5px solid rgba(200,165,94,.55); border-radius:50%; }
.loopwrap .r1 { inset:0; }
.loopwrap .r2 { inset:16%; }
.loopwrap .r3 { inset:32%; }
.loopwrap .spin { position:absolute; inset:0; animation:bspin 16s linear infinite; }
.loopwrap .spin::before { content:""; position:absolute; top:-10px; left:50%; width:20px; height:20px; border-radius:50%; background:var(--gold-bright); transform:translateX(-50%); box-shadow:0 0 28px 4px rgba(200,165,94,.7); }
.loopwrap .spin2 { inset:16%; animation:bspin 12s linear infinite reverse; }
.loopwrap .spin2::before { width:14px; height:14px; }
.loopwrap .core { position:absolute; inset:32%; border-radius:50%; border:1.5px solid rgba(200,165,94,.45); display:flex; align-items:center; justify-content:center; background:radial-gradient(circle,rgba(200,165,94,.14),transparent 70%); }
.loopwrap .core .ico { width:42%; height:42%; color:var(--gold-bright); }
@keyframes bspin { to { transform:rotate(360deg); } }
/* on-load entrance for above-the-fold hero content (time-based, staggered via --d) */
@media (prefers-reduced-motion: no-preference) {
  .phero .reveal { animation:boanReveal .9s var(--ease) both; animation-delay:var(--d, 0s); }
  .phero .reveal.rl { animation-name:boanRevealL; }
  .phero .reveal.rr { animation-name:boanRevealR; }
}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important;} .reveal.in{animation:none!important;} .phero .reveal{animation:none!important;} .loopwrap .spin{animation:none;} }

/* accessibility — visible keyboard focus + skip link */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
[tabindex="-1"]:focus { outline:none; }
.skip-link { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; z-index:100000; background:var(--ink); color:var(--cream); font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; padding:.9rem 1.4rem; text-decoration:none; border:1px solid var(--gold); }
.skip-link:focus { width:auto; height:auto; overflow:visible; clip:auto; left:10px; top:10px; outline:2px solid var(--gold); outline-offset:2px; }

/* mobile safety — force single column even where inline grid-template-columns is set */
img { max-width:100%; }
@media (max-width:680px){
  .split, .split.even, .split.r { grid-template-columns:1fr !important; gap:2.2rem !important; }
  .grid-2, .grid-3, .grid-4, .verdicts, .tiers, .foreach { grid-template-columns:1fr !important; }
}

@media (max-width:1100px){
  .split,.split.r,.split.even { grid-template-columns:1fr; gap:2.4rem; }
  .grid-3,.tiers,.verdicts { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .foot-cols { grid-template-columns:1fr 1fr; }
  .tier,.foreach .fc:first-child { border-right:0; border-bottom:1.5px solid var(--ink); }
  .tier:last-child { border-bottom:0; }
}
@media (max-width:1024px){
  .nav-menu { display:none; }
  .burger { display:inline-block; }
  .grid-2 { grid-template-columns:1fr; }
  .foreach { grid-template-columns:1fr; }
  .foreach .fc:first-child { border-right:0; border-bottom:1.5px solid var(--ink); }
  .rowlink { grid-template-columns:auto 1fr; }
  .rowlink .rd { display:none; }
}
@media (max-width:620px){
  .foot-cols { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:1fr; }
}