/* Generated by scripts/extract-base-css.mjs from the <style> block in
   public/_design/index.html, which is the client's file. Do not edit this
   directly: edit nothing here, and rebuild. */

:root{
  --navy:#0A2647; --navy-900:#061733; --navy-800:#123663;
  --bronze:#C79A4E; --bronze-soft:#E6D2A8; --bronze-pale:#F7EFDE; --gold-hi:#E8C87A;
  --paper:#FBFAF8; --white:#fff; --ink:#12202E; --muted:#5D6E7E;
  --line:#E4E8EC; --line-dark:rgba(255,255,255,.16);
  --ok:#2E7D5B; --warn:#B4531F; --stop:#9C2B2B;
  --maxw:1180px;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.01em;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.2vw,3.35rem);line-height:1.14}
h2{font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.22}
h3{font-size:1.18rem;line-height:1.3}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze);font-weight:600;margin-bottom:1rem}
.eyebrow.on-dark{color:var(--bronze-soft)}
.lede{font-size:1.08rem;color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
section{padding:78px 0}
.tight{padding:52px 0}

/* ---------- prototype ribbon ---------- */
#ribbon{background:#1F1B16;color:#E8DDC9;font-size:.74rem;letter-spacing:.06em;text-align:center;padding:7px 14px;font-weight:500}
#ribbon b{color:#fff;font-weight:600}
#ribbon button{background:none;border:1px solid rgba(255,255,255,.3);color:#E8DDC9;border-radius:3px;font-size:.68rem;padding:2px 8px;margin-left:12px;cursor:pointer;font-family:var(--sans)}

/* ---------- header ---------- */
.utility{background:var(--navy-900);color:rgba(255,255,255,.62);font-size:.73rem;letter-spacing:.02em}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:38px;flex-wrap:wrap}
.utility span{padding:8px 0}
header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line-dark)}
.bar{display:flex;align-items:center;gap:28px;min-height:78px}
.brand{display:flex;align-items:center;gap:13px;cursor:pointer}
.brand .word{font-family:var(--serif);font-size:1.32rem;letter-spacing:.02em;line-height:1.05}
.brand .word small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-soft);margin-top:3px}
nav.main{margin-left:auto;display:flex;gap:26px;align-items:center}
nav.main a{font-size:.87rem;font-weight:400;color:rgba(255,255,255,.85);padding:6px 0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
nav.main a:hover{color:#fff;border-color:var(--bronze)}
nav.main a.active{color:#fff;border-color:var(--bronze)}
.btn{display:inline-block;font-family:var(--sans);font-size:.86rem;font-weight:500;padding:13px 26px;border-radius:2px;cursor:pointer;border:1px solid transparent;transition:.15s;text-align:center}
.btn-gold{background:var(--bronze);color:#14202C;border-color:var(--bronze)}
.btn-gold:hover{background:#c29c62}
.btn-ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-800)}
.btn-out{border-color:var(--navy);color:var(--navy)}
.btn-out:hover{background:var(--navy);color:#fff}
.btn-sm{padding:9px 18px;font-size:.8rem}
.portal,nav.main a.portal{border:1px solid var(--bronze);color:var(--bronze-soft);padding:9px 17px;font-size:.79rem;letter-spacing:.04em;border-radius:2px;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;border-bottom:1px solid var(--bronze)}
.portal:hover,nav.main a.portal:hover{background:var(--bronze);color:#14202C;border-color:var(--bronze)}
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;padding:8px 12px;border-radius:2px;cursor:pointer}

/* ---------- seal ---------- */
.seal{width:44px;height:44px;flex:0 0 44px;object-fit:contain;border-radius:50%;background:#fff}

/* ---------- hero ---------- */
.hero{background:linear-gradient(150deg,var(--navy-900) 0%,var(--navy) 55%,#0F3355 100%);color:#fff;position:relative;overflow:hidden;padding:104px 0 92px}
.hero::after{content:"";position:absolute;right:-120px;top:-90px;width:560px;height:560px;border:1px solid rgba(176,141,87,.18);border-radius:50%}
.hero::before{content:"";position:absolute;right:-40px;top:10px;width:380px;height:380px;border:1px solid rgba(176,141,87,.12);border-radius:50%}
.hero .wrap{position:relative;z-index:2}
.hero h1{max-width:16ch;color:#fff}
.hero p{max-width:56ch;color:rgba(255,255,255,.78);font-size:1.09rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(30px,5vw,72px)}
.hero-copy{min-width:0}
.hero-mark{position:relative;display:grid;place-items:center;width:clamp(210px,26vw,360px);aspect-ratio:1}
.hero-mark img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;border-radius:50%;background:#fff;box-shadow:0 26px 74px rgba(6,26,46,.5)}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;justify-items:start}.hero-mark{order:-1;width:clamp(150px,36vw,210px)}}

/* ---------- trust bar ---------- */
.trust{background:var(--navy-900);color:rgba(255,255,255,.7);padding:20px 0;font-size:.79rem}
.trust .wrap{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;text-align:center}
.trust i{font-style:normal;color:var(--bronze-soft)}

/* ---------- counters ---------- */
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.counters div{background:var(--white);padding:32px 22px;text-align:center}
.counters b{display:block;font-family:var(--serif);font-size:2.3rem;color:var(--navy);line-height:1;margin-bottom:8px}
.counters span{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---------- generic cards ---------- */
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border:1px solid var(--line);padding:34px 30px;display:flex;flex-direction:column}
.card h3{margin-bottom:.55em}
.card p{font-size:.94rem;color:var(--muted);flex:1}
.card .more{color:var(--navy);font-weight:500;font-size:.87rem;border-bottom:1px solid var(--bronze);padding-bottom:2px;align-self:flex-start;margin-top:14px;cursor:pointer}
.card.dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.card.dark p{color:rgba(255,255,255,.75)}
.card.dark .more{color:var(--bronze-soft)}

/* ---------- ladder ---------- */
.ladder{display:grid;grid-template-columns:1fr 1fr;gap:44px}
.track h4{font-family:var(--sans);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.rung{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px dotted var(--line)}
.rung:last-child{border-bottom:none}
.chev{width:34px;height:34px;flex:0 0 34px;background:var(--bronze-pale);border:1px solid var(--bronze-soft);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:.85rem;color:#7A5D2E;border-radius:2px}
.rung b{display:block;font-family:var(--serif);font-size:1.05rem;font-weight:500;color:var(--navy)}
.rung span{font-size:.88rem;color:var(--muted)}
.rung.apex .chev{background:var(--navy);border-color:var(--navy);color:var(--bronze-soft)}

/* ---------- schedule strip ---------- */
.sched{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sched-row{display:flex;align-items:center;gap:22px;padding:17px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.sched-row:last-child{border-bottom:none}
.date{font-family:var(--serif);color:var(--navy);width:112px;flex:0 0 112px;font-size:.98rem}
.sched-row .nm{flex:1;font-weight:500}
.pill{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border:1px solid var(--line);color:var(--muted);border-radius:2px;white-space:nowrap}
.pill.open{border-color:var(--ok);color:var(--ok)}
.pill.few{border-color:var(--warn);color:var(--warn)}

/* ---------- verify ---------- */
.verify-box{background:var(--white);border:1px solid var(--line);padding:38px;max-width:720px}
.vsearch{display:flex;gap:10px;flex-wrap:wrap}
.vsearch input{flex:1;min-width:240px;padding:14px 16px;border:1px solid var(--line);font-family:var(--sans);font-size:.95rem;border-radius:2px}
.vsearch input:focus{outline:none;border-color:var(--navy)}
.result{margin-top:26px;border:1px solid var(--line);border-top:3px solid var(--ok);background:#fff;padding:0;display:none}
.result.show{display:block}
.result.revoked{border-top-color:var(--stop)}
.res-head{display:flex;gap:18px;align-items:center;padding:26px 28px;border-bottom:1px solid var(--line)}
.avatar{width:58px;height:58px;flex:0 0 58px;border-radius:50%;background:var(--navy);color:var(--bronze-soft);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.2rem}
.res-head b{font-family:var(--serif);font-size:1.35rem;font-weight:500;display:block;color:var(--navy)}
.status{margin-left:auto;text-align:right}
.badge{display:inline-block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:6px 13px;border-radius:2px;background:#E8F3EE;color:var(--ok)}
.badge.bad{background:#F7E9E9;color:var(--stop)}
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.res-grid div{background:#fff;padding:19px 22px}
.res-grid small{display:block;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.res-grid strong{font-weight:500;font-size:.95rem}
.res-foot{padding:16px 28px;background:var(--paper);font-size:.78rem;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- registry ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.filters select,.filters input{padding:11px 14px;border:1px solid var(--line);font-family:var(--sans);font-size:.88rem;background:#fff;border-radius:2px}
.mcard{background:#fff;border:1px solid var(--line);padding:24px}
.mcard .top{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.mcard b{font-family:var(--serif);font-size:1.05rem;font-weight:500;display:block}
.mcard .id{font-size:.76rem;color:var(--muted);letter-spacing:.05em}
.gradechip{display:inline-block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;background:var(--bronze-pale);color:#7A5D2E;border:1px solid var(--bronze-soft);border-radius:2px}
.mcard .meta{font-size:.85rem;color:var(--muted);border-top:1px dotted var(--line);padding-top:12px;margin-top:4px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);background:#fff}
.step{padding:28px 22px;border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step b{display:block;font-family:var(--serif);color:var(--bronze);font-size:1.5rem;margin-bottom:8px}
.step h4{font-family:var(--serif);font-size:1.05rem;margin:0 0 6px}
.step p{font-size:.85rem;color:var(--muted);margin:0}

/* ---------- events ---------- */
.ev{display:flex;gap:26px;padding:26px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.ev .cal{width:78px;flex:0 0 78px;border:1px solid var(--line);text-align:center;padding:10px 4px}
.ev .cal b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--navy);line-height:1}
.ev .cal span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ev .body{flex:1}
.ev h3{margin-bottom:4px}
.ev p{font-size:.9rem;color:var(--muted);margin:0}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ph{aspect-ratio:4/3;background:linear-gradient(135deg,#E9EDF1,#DCE3E9);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#9AA9B6;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:10px}

/* ---------- chapters ---------- */
.chap{background:#fff;border:1px solid var(--line);padding:26px}
.chap h3{margin-bottom:2px}
.chap .city-meta{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bronze);margin-bottom:16px}
.person{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px dotted var(--line)}
.person .pa{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--bronze-pale);border:1px solid var(--bronze-soft);color:#7A5D2E;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600}
.person b{display:block;font-size:.92rem;font-weight:500;font-family:var(--sans)}
.person span{font-size:.78rem;color:var(--muted)}

/* ---------- news / social ---------- */
.post{background:#fff;border:1px solid var(--line)}
.post .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#E9EDF1,#DCE3E9);display:flex;align-items:center;justify-content:center;color:#9AA9B6;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.post .pbody{padding:22px}
.post small{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bronze)}
.post h3{font-size:1.05rem;margin:8px 0 6px}
.post p{font-size:.88rem;color:var(--muted);margin:0}
.tweet{background:#fff;border:1px solid var(--line);padding:20px;font-size:.9rem}
.tweet .th{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.tweet .th .pa{width:34px;height:34px;border-radius:50%;background:var(--navy);color:var(--bronze-soft);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-family:var(--serif)}
.tweet .th b{font-size:.88rem;font-family:var(--sans);font-weight:600;display:block}
.tweet .th span{font-size:.76rem;color:var(--muted)}
.tweet p{margin:0;color:var(--ink)}

/* ---------- timeline ---------- */
.tl{border-left:2px solid var(--line);padding-left:30px;margin-left:6px}
.tl .item{position:relative;padding-bottom:30px}
.tl .item::before{content:"";position:absolute;left:-37px;top:7px;width:12px;height:12px;background:var(--bronze);border:2px solid var(--paper);border-radius:50%}
.tl b{font-family:var(--serif);font-size:1.15rem;color:var(--navy);display:block;margin-bottom:4px}
.tl p{font-size:.93rem;color:var(--muted);margin:0;max-width:60ch}

/* ---------- bands ---------- */
.band{background:var(--navy);color:#fff;text-align:center}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.75);max-width:56ch;margin:0 auto 26px}
.band .row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.paper{background:var(--white)}
.stone{background:#F2F0EC}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;background:#fff;font-size:.92rem}
th,td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--line)}
th{font-family:var(--sans);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
td b{font-family:var(--serif);font-weight:500;color:var(--navy)}

/* ---------- footer ---------- */
footer{background:var(--navy-900);color:rgba(255,255,255,.66);padding:66px 0 0;font-size:.88rem}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:34px;padding-bottom:44px}
footer h5{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-soft);margin:0 0 16px}
footer li{list-style:none;margin-bottom:9px;cursor:pointer}
footer ul{padding:0;margin:0}
footer li:hover{color:#fff}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:#fff}
.legal{border-top:1px solid var(--line-dark);padding:22px 0 40px;font-size:.76rem;color:rgba(255,255,255,.45);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---------- notes for designer ---------- */
.note{background:#FFF9EC;border:1px solid #EBDCB6;border-left:3px solid var(--bronze);padding:14px 18px;font-size:.82rem;color:#6B5729;margin:18px 0}
.note b{color:#4E3F1C}
body.hide-notes .note{display:none}

.view{display:none}
.view.on{display:block}

@media(max-width:960px){
  .g3,.g4,.counters,.res-grid,.gallery{grid-template-columns:repeat(2,1fr)}
  .ladder{grid-template-columns:1fr;gap:34px}
  .steps{grid-template-columns:1fr 1fr}
  .step{border-right:none;border-bottom:1px solid var(--line)}
  .fcols{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .burger{display:block}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy-900);flex-direction:column;align-items:stretch;gap:0;padding:10px 28px 22px;border-bottom:1px solid var(--line-dark)}
  nav.main.open{display:flex}
  nav.main a{padding:13px 0;border-bottom:1px solid var(--line-dark)}
  nav.main a.portal{padding:10px 19px;border:1px solid rgba(232,200,122,.55);border-radius:999px;color:var(--gold-hi);align-self:flex-start;margin-top:14px;border-bottom:1px solid rgba(232,200,122,.55)}
  .g2,.g3,.g4,.counters,.res-grid,.gallery,.steps,.fcols{grid-template-columns:1fr}
  section{padding:54px 0}
  .hero{padding:66px 0 58px}
  .ev{gap:16px}
}

/* ==========================================================
   Refinement pass: same palette, same components.
   Tighter display type, a calmer vertical rhythm, and
   numerals that line up in tables, fees, dates and IDs.
   ========================================================== */

/* --- display type: Lora wants tighter tracking and leading as it scales up --- */
h1{font-size:clamp(2.2rem,4.7vw,3.6rem);line-height:1.05;letter-spacing:-.024em;margin-bottom:.4em;text-wrap:balance}
h2{font-size:clamp(1.62rem,2.95vw,2.4rem);line-height:1.12;letter-spacing:-.019em;margin-bottom:.44em;text-wrap:balance}
h3{font-size:1.2rem;line-height:1.3;letter-spacing:-.008em}
.hero h1{max-width:17ch}
.band h2{letter-spacing:-.02em}

/* --- supporting text: a narrower measure reads calmer at this size --- */
.eyebrow{font-size:.7rem;letter-spacing:.2em;margin-bottom:1.15rem}
.lede{font-size:1.1rem;line-height:1.62;max-width:56ch}
.hero p{font-size:1.12rem;line-height:1.6;max-width:52ch}
p{line-height:1.66}
.card p{line-height:1.6}

/* --- vertical rhythm --- */
section{padding:98px 0}
.tight{padding:62px 0}
.hero{padding:116px 0 100px}
.lede{margin-bottom:0}
.lede + .grid,.lede + .ladder,.lede + .sched,.lede + .steps,.lede + .filters,.lede + table,.lede + .verify-box{margin-top:38px}

/* --- numerals align wherever they are read in a column --- */
table,.counters b,.date,.mcard .id,.res-grid strong,.ev .cal,.step b,.vsearch input,.filters select,.filters input,.legal{font-variant-numeric:tabular-nums}

/* --- tables breathe, headers sit quieter --- */
th,td{padding:17px 20px}
th{font-size:.68rem;letter-spacing:.15em}
td b{font-weight:500}

/* --- cards and grids --- */
.grid{gap:28px}
.card{padding:36px 32px}
.card h3{margin-bottom:.6em}
.mcard{padding:26px}
.chap{padding:30px}

/* --- the numbered steps --- */
.step{padding:32px 24px}
.step b{letter-spacing:-.02em}

/* --- counters --- */
.counters div{padding:36px 22px}
.counters b{font-size:2.5rem;letter-spacing:-.03em}
.counters span{font-size:.72rem;letter-spacing:.12em}

/* --- small uppercase labels, one consistent tracking --- */
.badge,.pill,.gradechip,.track h4{letter-spacing:.14em}

/* --- footer --- */
footer h5{margin-bottom:18px}
footer li{padding:5px 0}

/* ==========================================================
   Card and surface pass, Apple-style: no hairline borders,
   generous radii, soft layered shadows, panels that lift on
   hover. Same navy and bronze, softer geometry.
   ========================================================== */

/* --- Newsreader sits a touch lighter than Lora, so headings gain weight --- */
h1,h2,h3,h4{font-weight:500}
h1{letter-spacing:-.028em}
h2{letter-spacing:-.022em}

/* --- the card family --- */
.card,.mcard,.chap,.verify-box,.post,.tweet,.result{
  border:0;
  border-radius:20px;
  background:#fff;
  box-shadow:0 1px 2px rgba(6,26,46,.05),0 10px 30px rgba(6,26,46,.06);
  transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s cubic-bezier(.22,.61,.36,1);
}
.card{padding:38px 34px}
.mcard{padding:28px}
.chap{padding:32px}
.verify-box{padding:42px;border-radius:24px}
.tweet{padding:24px}

/* lift the ones that are actually a route somewhere */
.card:hover,.mcard:hover,.chap:hover,.post:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(6,26,46,.06),0 18px 44px rgba(6,26,46,.11);
}
.card.dark{box-shadow:0 1px 2px rgba(6,26,46,.16),0 14px 38px rgba(6,26,46,.24)}

/* --- panels that were hairline grids become single rounded surfaces --- */
.counters{
  border:0;
  border-radius:22px;
  overflow:hidden;
  background:var(--line);
  gap:1px;
  box-shadow:0 1px 2px rgba(6,26,46,.05),0 10px 30px rgba(6,26,46,.06);
}
.steps{
  border:0;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(6,26,46,.05),0 10px 30px rgba(6,26,46,.06);
}
table{border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(6,26,46,.05),0 10px 30px rgba(6,26,46,.06)}
th,td{border-bottom:1px solid #EEF1F4}
tr:last-child td{border-bottom:0}
.sched{border:0;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(6,26,46,.05),0 10px 30px rgba(6,26,46,.06)}
.sched-row{padding:19px 24px;border-bottom:1px solid #EEF1F4}
.post{overflow:hidden}
.ev{border-bottom:1px solid #EEF1F4}

/* --- the verified result keeps its status colour as a top cap --- */
.result{border-top:0;position:relative;overflow:hidden}
.result::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--ok)}
.result.revoked::before{background:var(--stop)}
.res-head,.res-grid div,.res-foot{border-color:#EEF1F4}

/* --- controls: pills and rounded fields --- */
.btn{border-radius:999px;padding:14px 28px}
.btn-sm{padding:10px 20px}
.portal{border-radius:999px;padding:10px 19px}
.vsearch input,.filters select,.filters input{border-radius:12px;border-color:#E2E7EC}
.vsearch input:focus,.filters select:focus,.filters input:focus{outline:none;border-color:var(--bronze);box-shadow:0 0 0 4px rgba(176,141,87,.16)}
.badge,.pill,.gradechip{border-radius:999px}
.chev{border-radius:10px}
.ev .cal{border-radius:14px;border-color:#E9EDF1}

/* --- section tints, Apple keeps these very light --- */
.stone{background:#F4F2EE}

/* --- the seal in the nav gets a soft ring rather than a hard edge --- */
.brand .seal{box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* ==========================================================
   Typography carries the page: no photography, so scale,
   space and colour weight do the work images would.
   ========================================================== */

/* --- 1. a wider scale gap between display and body, the way Apple sets it --- */
h1{font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-.032em}
.hero h1{font-size:clamp(2.6rem,5.8vw,4.5rem);max-width:15ch}
h2{font-size:clamp(1.75rem,3.4vw,2.85rem);line-height:1.08;letter-spacing:-.026em}
h3{font-size:1.24rem}

/* --- 2. two-tone headings: the statement in ink, the qualifier stepped back --- */
h2 span{color:#9AA7B4}
.band h2 span{color:rgba(255,255,255,.52)}

/* --- 3. the numbers become the graphic, since nothing else is --- */
.counters{background:transparent;box-shadow:none;border-radius:0;gap:0;grid-template-columns:repeat(4,1fr)}
.counters div{background:transparent;padding:16px 32px 10px 0;text-align:left;border-left:1px solid var(--line)}
.counters div:first-child{border-left:0;padding-left:0}
.counters div:not(:first-child){padding-left:32px}
.counters b{font-size:clamp(2.6rem,5.6vw,4.4rem);line-height:1.12;letter-spacing:-.045em;margin-bottom:14px;color:var(--navy)}
.counters span{font-size:.78rem;letter-spacing:.11em;line-height:1.45;display:block;max-width:14ch}

/* --- 4. grade marks made of type, not icons --- */
.chev{
  width:auto;height:auto;flex:0 0 46px;
  background:none;border:0;border-radius:0;
  font-family:var(--serif);font-size:1.5rem;font-weight:400;
  color:var(--bronze);letter-spacing:-.02em;
  justify-content:flex-start;align-items:baseline;padding-top:2px
}
.rung.apex .chev{background:none;border:0;color:var(--navy)}
.rung{padding:22px 0;align-items:baseline}
.rung b{font-size:1.16rem}
.track h4{font-size:.7rem;letter-spacing:.2em;padding-bottom:14px;margin-bottom:6px}

/* --- 5. statement bands get real presence --- */
.band{padding:118px 0}
.band h2{font-size:clamp(2rem,4.4vw,3.5rem);max-width:19ch;margin-left:auto;margin-right:auto}
.band p{font-size:1.12rem;max-width:52ch;margin-left:auto;margin-right:auto;color:rgba(255,255,255,.72)}
.band .row{margin-top:38px}

/* --- 6. a heading block is a heading block: hold it narrow, give it air --- */
section > .wrap > .eyebrow + h2,section > .wrap > h2{max-width:20ch}
.hero-cta{margin-top:40px}

/* --- 7. the prototype's empty gallery slots stay hidden --- */
.gallery,.chapters-empty{display:none}

/* ==========================================================
   Rails, statements and watermarks: the last three moves that
   need no photography.
   ========================================================== */

/* --- 1. card rails: the next card peeks, a chevron nudges it along --- */
.rail{position:relative;margin-top:38px}
.rail-track{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 0 22px}
.rail-track::-webkit-scrollbar{display:none}
.rail-track > .grid{display:flex;gap:24px;width:max-content;padding-right:22%}
.rail-track > .grid > *{scroll-snap-align:start;flex:0 0 clamp(280px,29vw,376px)}
.rail-next{
  position:absolute;top:50%;right:-6px;z-index:4;
  width:46px;height:46px;transform:translateY(-50%);
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 6px rgba(6,26,46,.1),0 12px 30px rgba(6,26,46,.14);
  color:var(--navy);font-size:26px;line-height:1;padding-bottom:4px;
  cursor:pointer;transition:transform .2s ease,box-shadow .2s ease
}
.rail-next:hover{transform:translateY(-50%) scale(1.06);box-shadow:0 3px 8px rgba(6,26,46,.12),0 16px 38px rgba(6,26,46,.2)}
.rail-next[hidden]{display:none}
@media(max-width:720px){.rail-track > .grid > *{flex:0 0 82vw}.rail-next{display:none}}

/* --- 2. one sentence, full bleed, nothing else --- */
.statement{
  position:relative;overflow:hidden;
  background:var(--navy-900);color:#fff;
  padding:clamp(90px,13vw,168px) 0;text-align:center
}
.statement .wrap{position:relative;z-index:2}
.statement p{
  margin:0 auto;max-width:20ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,4.8vw,3.9rem);line-height:1.08;letter-spacing:-.028em;
  text-wrap:balance
}
.statement em{font-style:italic;color:var(--bronze-soft)}

section{position:relative}
section > .wrap{position:relative;z-index:1}

/* ==========================================================
   Brass: the seal and its parts, struck in metal and used at
   full strength. Nothing here is a faded watermark.
   ========================================================== */

.brass{display:block;width:100%;height:auto}

/* a card can carry one element in the space a product shot would fill */
.card .brass{
  margin:26px auto 4px;
  width:min(184px,62%);
  filter:drop-shadow(0 14px 26px rgba(6,26,46,.18))
}
.card.dark .brass{filter:drop-shadow(0 14px 30px rgba(0,0,0,.42))}

/* the statement leads with the medallion */
.statement .brass{
  width:clamp(116px,13vw,168px);
  margin:0 auto clamp(34px,4.4vw,54px);
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.5))
}

/* the hero keeps the flat seal; the brass arc caps the trust strip instead */
.trust .brass{width:210px;margin:0 auto 16px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45))}
.trust{padding-top:34px}

/* ==========================================================
   Colour tuning: the blue goes deeper and slightly indigo so
   the gold sits opposite it, and the gold gains real chroma
   instead of reading as khaki. Darks carry a gradient rather
   than a flat fill, which is most of the "premium" feel.
   ========================================================== */

/* --- dark fields are never one flat colour --- */
.hero{background:linear-gradient(152deg,var(--navy-900) 0%,var(--navy) 52%,#16457A 100%)}
.statement{background:linear-gradient(168deg,#081D3C 0%,var(--navy-900) 58%,#04101F 100%)}
.band{background:linear-gradient(160deg,var(--navy) 0%,#0B2A50 55%,var(--navy-900) 100%)}
footer{background:linear-gradient(180deg,var(--navy-900) 0%,#04101F 100%)}
.utility{background:#04101F}
.trust{background:linear-gradient(180deg,#04101F 0%,var(--navy-900) 100%)}

/* --- the gold reads as metal when it has a light source --- */
.btn-gold{
  background:linear-gradient(178deg,var(--gold-hi) 0%,var(--bronze) 62%,#B0863C 100%);
  border-color:transparent;
  color:#14202C;
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 8px 22px rgba(199,154,78,.3)
}
.btn-gold:hover{
  background:linear-gradient(178deg,#F0D48C 0%,#CFA457 62%,#B98F45 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 28px rgba(199,154,78,.4)
}

/* --- gold type: lighter on dark, deeper on paper --- */
.eyebrow{color:#9A7534}
.eyebrow.on-dark{color:var(--gold-hi)}
.trust i{color:var(--gold-hi)}
.portal,nav.main a.portal{border-color:rgba(232,200,122,.55);color:var(--gold-hi)}
.portal:hover,nav.main a.portal:hover{background:var(--gold-hi);color:#14202C;border-color:var(--gold-hi)}
nav.main a:hover,nav.main a.active{border-color:var(--gold-hi)}
nav.main a.portal:hover,nav.main a.portal.active{border-color:var(--gold-hi)}
.statement em{color:var(--gold-hi)}
.chev{color:#A87F32}
.rung.apex .chev{color:var(--navy)}
.gradechip{background:var(--bronze-pale);color:#7A5A22;border-color:#E7D6B4}
.card .more{border-bottom-color:var(--bronze)}

::selection{background:var(--gold-hi);color:#14202C}

/* --- the paper side warms a shade so it belongs to the same palette --- */
.stone{background:#F3F0E9}

/* --- trust strip: a struck gold star marks each claim --- */
.trust .wrap{gap:12px 30px}
.tstar{
  display:inline-block;
  width:15px;height:15px;
  margin-right:9px;
  vertical-align:-2px;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45))
}
.trust span:first-child{color:var(--gold-hi);letter-spacing:.04em}
.trust{padding-top:22px;padding-bottom:22px}

/* ==========================================================
   Hero: one composition carries it. Gold stars struck in 3D
   around the authentic seal, with the left third left open
   for the headline.
   ========================================================== */

.hero{
  --hero-bg-shift:0px;
  background:
    linear-gradient(92deg,var(--navy-900) 0%,rgba(6,23,51,.72) 24%,rgba(6,23,51,.22) 42%,rgba(6,23,51,0) 58%),
    url("/img/hero-composition.jpg") right calc(50% + var(--hero-bg-shift))/cover no-repeat,
    var(--navy-900);
  padding:clamp(92px,10vw,132px) 0;
  min-height:min(74vh,640px);
  display:flex;
  align-items:center
}
.hero::before,.hero::after{display:none}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-grid{grid-template-columns:minmax(0,1fr)}
.hero-copy{max-width:min(100%,540px)}
.hero h1{
  font-size:clamp(1.9rem,3.5vw,2.85rem);
  line-height:1.12;
  letter-spacing:-.022em;
  max-width:25ch
}
.hero p{max-width:44ch;font-size:1.05rem}

@media(max-width:900px){
  /* the medallion would sit under the type, so the scrim closes over it */
  .hero{
    background:
      linear-gradient(180deg,rgba(6,23,51,.94) 0%,rgba(6,23,51,.82) 55%,rgba(6,23,51,.96) 100%),
      url("/img/hero-composition.jpg") 76% calc(50% + var(--hero-bg-shift))/cover no-repeat,
      var(--navy-900);
    min-height:0
  }
  .hero-copy,.hero h1,.hero p{max-width:none}
}

/* the falcon leads the closing band */
.brass-falcon{
  width:clamp(96px,10vw,140px);
  margin:0 auto clamp(28px,3.4vw,42px);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))
}

/* --- gold object icons lead the differentiator cards --- */
.cardicon{
  display:block;
  width:auto;height:74px;
  margin:0 0 22px;
  object-fit:contain;object-position:left bottom;
  filter:drop-shadow(0 12px 20px rgba(6,26,46,.16))
}

/* --- an abstract gold form fills the open half of a heading block --- */
.sectionform{
  position:absolute;
  z-index:0;
  pointer-events:none;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain
}
.form-ribbon{
  top:6%;right:6%;
  width:clamp(150px,17vw,250px);
  aspect-ratio:1;
  background-image:url("/img/form-ribbon.png");
  filter:drop-shadow(0 26px 44px rgba(6,26,46,.14))
}
@media(max-width:1100px){.sectionform{display:none}}

/* --- the warm mist is one accent, not the treatment for every section --- */
.misted{
  background:
    linear-gradient(180deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.42) 100%),
    url("/img/fog-gold.jpg") center/cover no-repeat,
    var(--white)
}

/* the gold form needs no cutout: multiply drops its light backdrop into the
   section behind it, so there is no rectangle and no masking artefact */
.form-ribbon{
  mix-blend-mode:multiply;
  filter:none;
  /* feather the frame so no residual rectangle shows against the mist */
  mask-image:radial-gradient(closest-side at 50% 50%,#000 58%,rgba(0,0,0,.5) 80%,transparent 100%)
}

/* ==========================================================
   Editorial motion system. The reference language is built
   from clipped media, scale and radius morphs, quiet depth,
   and staggered content rather than ornamental spinning.
   ========================================================== */
.motion-panel{
  z-index:2;
  overflow:clip;
  transform-origin:50% 100%
}
.motion-arch-card{transform-origin:50% 100%;will-change:transform,border-radius,opacity}
.counter-mask{display:block;overflow:hidden}
.motion-trace{
  position:relative;
  isolation:isolate;
  overflow:visible;
  transform-origin:50% 50%;
  will-change:transform
}
.motion-trace-svg{
  position:absolute;
  z-index:2;
  inset:-4px;
  width:calc(100% + 8px);
  height:calc(100% + 8px);
  overflow:visible;
  pointer-events:none
}
.motion-trace-base,.motion-trace-aura,.motion-trace-comet{fill:none;vector-effect:non-scaling-stroke}
.motion-trace-base{stroke:rgba(255,241,193,.34);stroke-width:1}
.motion-trace-aura{
  stroke:rgba(255,235,170,.3);
  stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray:10 90;
  filter:blur(3px)
}
.motion-trace-comet{
  stroke:#fff3c7;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:10 90;
  filter:drop-shadow(0 0 5px rgba(255,232,156,.92))
}
.hero,.hero-copy,.sectionform,.motion-panel{will-change:transform}
@supports not (overflow:clip){.motion-panel{overflow:hidden}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero,.hero-copy,.sectionform,.motion-panel,.motion-arch-card,.motion-trace{will-change:auto}
  .motion-trace-aura,.motion-trace-comet{stroke-dashoffset:0!important}
}
@media(max-width:760px){
  .utility{display:none}
  table{
    display:block;
    max-width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch
  }
  .counters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .counters div,.counters div:not(:first-child){
    padding:24px 16px;
    border-left:0;
    border-top:1px solid var(--line)
  }
  .counters div:nth-child(-n+2){border-top:0}
  .counters div:nth-child(odd){padding-left:0}
  .counters div:nth-child(even){border-left:1px solid var(--line)}
  .counters b{font-size:clamp(2.15rem,11vw,3rem)}
  .sched-row{
    display:grid;
    grid-template-columns:minmax(82px,auto) minmax(0,1fr);
    gap:6px 14px;
    align-items:start;
    padding:18px
  }
  .date{width:auto;grid-column:1;grid-row:1}
  .sched-row .nm{grid-column:2;grid-row:1;min-width:0}
  .sched-row > .muted{grid-column:2;grid-row:2}
  .sched-row > .pill{grid-column:1;grid-row:2;justify-self:start}
}

/* --- the chakra turns, slowly enough to read as presence not motion --- */
.brass-chakra{
  width:clamp(104px,10vw,148px);
  margin:0 auto clamp(30px,3.6vw,44px);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));
  animation:chakra-turn 72s linear infinite;
  will-change:transform
}
@keyframes chakra-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* --- the closing band breathes: two soft lights drift on offset cycles --- */
.band{isolation:isolate}
.band::before,.band::after{
  content:"";position:absolute;z-index:0;border-radius:50%;
  pointer-events:none;will-change:transform
}
.band::before{
  top:-55%;left:-20%;width:80%;height:190%;
  background:radial-gradient(closest-side,rgba(38,102,180,.72),rgba(38,102,180,.2) 55%,transparent 78%);
  animation:band-drift-a 34s ease-in-out infinite alternate
}
.band::after{
  top:-30%;right:-15%;width:56%;height:150%;
  background:radial-gradient(closest-side,rgba(199,154,78,.28),rgba(199,154,78,.09) 50%,transparent 76%);
  animation:band-drift-b 47s ease-in-out infinite alternate
}
@keyframes band-drift-a{
  from{transform:translate3d(-6%,-4%,0) scale(1)}
  to{transform:translate3d(26%,6%,0) scale(1.18)}
}
@keyframes band-drift-b{
  from{transform:translate3d(8%,5%,0) scale(1.1)}
  to{transform:translate3d(-22%,-6%,0) scale(.92)}
}

@media(prefers-reduced-motion:reduce){
  .brass-chakra,.band::before,.band::after{animation:none}
}

/* ---------- date leaf: one rhythm for every tile ----------
   Day over month over year, each on its own line. A single "MON YEAR" line
   wraps for four-letter months (en-GB "Sept") and the tiles fall out of
   step; the stacked leaf cannot. Year is the quietest line of the three. */
.ev .cal span{display:block}
.ev .cal b{margin-bottom:4px}
.ev .cal span.yr{font-size:.58rem;letter-spacing:.18em;margin-top:1px;opacity:.62}