/* RMC Capital Coaching. Colors come from the original logo (deep navy #1B3764, muted gold #BB9532).
   Light pages alternate with navy bands; content sits on soft cards; gold is for rules, icons and accents. */
:root{
  --bg:#F8F5EF; --surface:#FFFFFF; --surface-2:#F0EBE1; --ink:#13213C; --muted:#586179; --rule:#E3DCCD;
  --accent:#1B3764; --accent-ink:#FFFFFF; --gold:#BB9532; --gold-ink:#86681C; --hl:#1B3764; --flag:#B4462F;
  --navy:#1B3764; --navy-deep:#12264A; --on-navy:#F6F2E9; --on-navy-muted:#BAC4D8; --navy-rule:#2F4C7C; --on-navy-gold:#D9B865;
  --shadow:0 1px 2px rgba(19,33,60,.05), 0 8px 24px -12px rgba(19,33,60,.18);
  --shadow-lift:0 2px 4px rgba(19,33,60,.06), 0 18px 36px -16px rgba(19,33,60,.28);
  --radius:12px;
  --display:"Newsreader", Georgia, "Times New Roman", serif;
  --body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1628; --surface:#12213B; --surface-2:#172A49; --ink:#EEF1F6; --muted:#A5B0C6; --rule:#243759;
  --accent:#D4B062; --accent-ink:#13213C; --gold:#D4B062; --gold-ink:#D4B062; --hl:#D4B062; --flag:#F08F7A;
  --navy:#142B52; --navy-deep:#0E1F3D; --on-navy:#F6F2E9; --on-navy-muted:#B4BFD6; --navy-rule:#2C4672; --on-navy-gold:#D9B865;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6);
  --shadow-lift:0 2px 4px rgba(0,0,0,.35), 0 20px 40px -18px rgba(0,0,0,.7); color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0B1628; --surface:#12213B; --surface-2:#172A49; --ink:#EEF1F6; --muted:#A5B0C6; --rule:#243759;
  --accent:#D4B062; --accent-ink:#13213C; --gold:#D4B062; --gold-ink:#D4B062; --hl:#D4B062; --flag:#F08F7A;
  --navy:#142B52; --navy-deep:#0E1F3D; --on-navy:#F6F2E9; --on-navy-muted:#B4BFD6; --navy-rule:#2C4672; --on-navy-gold:#D9B865;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -14px rgba(0,0,0,.6);
  --shadow-lift:0 2px 4px rgba(0,0,0,.35), 0 20px 40px -18px rgba(0,0,0,.7); color-scheme:dark }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:1.0625rem; line-height:1.6; margin:0; overflow-x:clip}
.wrap{max-width:72rem; margin:0 auto; padding-inline:clamp(16px,5vw,48px)}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display); font-weight:500; text-wrap:balance; margin:0; line-height:1.12}
p{margin:0}
ul,ol{margin:0}
.label{font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink)}
.ph{font-family:var(--mono); font-size:.85em; color:var(--flag); border-bottom:1px dashed var(--flag)}
.muted{color:var(--muted)}
.prose{display:grid; gap:1rem; max-width:40rem}

/* navy surfaces: full-bleed bands behind any element */
.band, .pagehead, .hero-band{background:var(--navy); color:var(--on-navy); box-shadow:0 0 0 100vmax var(--navy); clip-path:inset(0 -100vmax)}
.band .label, .pagehead .label, .hero-band .label{color:var(--on-navy-gold)}
.band h2, .band h3{color:var(--on-navy)}
.band p, .band .sec-head p{color:var(--on-navy-muted)}

/* header + tabs */
header.top{position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--rule); padding-top:env(safe-area-inset-top,0px)}
.bar1{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.75rem .4rem}
.mark{display:flex; align-items:center; gap:.7rem; text-decoration:none; min-width:0}
.mark .mono{width:2.4rem; height:auto; color:var(--hl); flex:none}
.mark-t{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap}
.mark b{font-family:var(--display); font-size:1.45rem; font-weight:600; letter-spacing:.02em}
.mark-t span{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.tabs{display:flex; gap:.2rem; overflow-x:auto; scrollbar-width:none; margin-inline:-.6rem}
.tabs::-webkit-scrollbar{display:none}
.tabs a{flex:none; text-decoration:none; color:var(--muted); font-size:.92rem; padding:.5rem .6rem .65rem; border-bottom:3px solid transparent; transition:color .15s}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--gold); font-weight:600}
.tabs a.ros-tab{display:flex; align-items:center; gap:.45rem}
.tabs a.ros-tab::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); flex:none}
@media (max-width:520px){
  .mark-t span{display:none}
  .mark .mono{width:2.1rem}
  .bar1 .btn{padding:.6rem .9rem; font-size:.88rem}
}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; white-space:nowrap; background:var(--accent); color:var(--accent-ink); text-decoration:none; font-weight:600; font-size:.95rem; padding:.8rem 1.3rem; border-radius:8px; border:1px solid transparent; cursor:pointer; font-family:var(--body); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-lift); filter:brightness(1.06)}
.btn.ghost{background:transparent; color:var(--ink); border-color:color-mix(in srgb, var(--ink) 25%, transparent)}
.btn.gold{background:var(--on-navy-gold); color:#13213C}
.btn.line-on-navy{background:transparent; color:var(--on-navy); border-color:color-mix(in srgb, var(--on-navy) 35%, transparent)}
.textlink{color:var(--hl); font-weight:600; text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 40%, transparent); transition:border-color .15s}
.textlink:hover{border-bottom-color:currentColor}
.band .textlink, .pagehead .textlink{color:var(--on-navy-gold)}

/* page heads (inner pages): navy band */
.pagehead{padding-block:clamp(3rem,7vw,5.2rem) clamp(2.6rem,5vw,3.6rem); position:relative}
.pagehead h1{font-size:clamp(2.3rem,5.4vw,4rem); font-weight:400; max-width:20ch; margin-top:.9rem; color:var(--on-navy)}
.pagehead h1 em{font-style:italic; color:var(--on-navy-gold)}
.pagehead .lede{margin-top:1.3rem; max-width:42rem; font-size:1.15rem; color:var(--on-navy-muted)}

/* home hero */
.hero-band{position:relative; overflow:hidden}
.hero-band::after{content:""; position:absolute; right:-8rem; top:50%; width:34rem; height:34rem; transform:translateY(-50%); background:url(/assets/logo/rmc-monogram-gold.svg) center/contain no-repeat; opacity:.06; pointer-events:none}
.hero{padding-block:clamp(3.2rem,8vw,6rem); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:2.5rem 4rem; align-items:center; position:relative; z-index:1}
.hero h1{font-size:clamp(2.6rem,6vw,4.8rem); font-weight:400; max-width:14ch; letter-spacing:-.01em; margin-top:1rem; color:var(--on-navy)}
.hero h1 em{font-style:italic; color:var(--on-navy-gold)}
.hero .lede{margin-top:1.5rem; max-width:38rem; font-size:1.18rem; color:var(--on-navy-muted)}
.ctas{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.hero .btn:not(.ghost){background:var(--on-navy-gold); color:#13213C}
.hero .btn.ghost{color:var(--on-navy); border-color:color-mix(in srgb, var(--on-navy) 35%, transparent)}
.hero .badge{width:clamp(220px,26vw,320px); height:auto; justify-self:center}
.trust{display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:2.2rem; padding-top:1.4rem; border-top:1px solid var(--navy-rule); font-size:.9rem; color:var(--on-navy-muted)}
.trust span{display:flex; align-items:center; gap:.5rem}
.trust span::before{content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--on-navy-gold)}

/* portrait photo with a gold offset frame */
.portrait{position:relative; margin:0; justify-self:center; width:100%; max-width:24rem}
.portrait .frame{position:relative; display:block}
.portrait .frame::before{content:""; position:absolute; inset:1rem -1rem -1rem 1rem; border:2px solid var(--gold); border-radius:var(--radius)}
.portrait img{position:relative; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:50% 22%; border-radius:var(--radius); box-shadow:var(--shadow-lift)}
.portrait figcaption{position:relative; margin-top:1.6rem; font-size:.9rem; color:var(--muted)}
.portrait figcaption b{display:block; font-family:var(--display); font-size:1.2rem; font-weight:500; color:var(--ink)}
.hero-band .portrait .frame::before{border-color:var(--on-navy-gold)}
.hero-band .portrait figcaption{color:var(--on-navy-muted)}
.hero-band .portrait figcaption b{color:var(--on-navy)}
@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero .portrait{max-width:18rem; justify-self:start; margin-top:.5rem}
  .hero .badge{width:180px; order:-1; justify-self:start}
}

/* cards: used for the comparison table, columns, tools, FAQ */
.card, .ledger, .col, .tool, .format, .area, .deliver, .score, .story{background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow)}

/* ledger tables */
.ledger{overflow:hidden; border-top:3px solid var(--gold)}
.ledger-head{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.4rem 1rem; padding:1rem 1.4rem; border-bottom:1px solid var(--rule); background:var(--surface-2)}
.tbl{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:36rem}
th,td{text-align:left; padding:1.05rem 1.4rem; vertical-align:top; border-bottom:1px solid var(--rule)}
tr:last-child td{border-bottom:0}
th{font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
td:first-child{font-family:var(--display); font-size:1.18rem; width:26%}
td.from{color:var(--muted)}
td.to{font-weight:500}
td.num, th.num{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:.92rem; white-space:nowrap}
td.num.goal{color:var(--hl); font-weight:600}
tbody tr{transition:background .15s}
tbody tr:hover{background:color-mix(in srgb, var(--gold) 6%, transparent)}
.example-tag{display:inline-block; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--flag); border:1px solid var(--flag); padding:.1rem .45rem; border-radius:4px}
/* home "What changes": before → after rows */
.shift-head, .shift{display:grid; grid-template-columns:minmax(0,12rem) minmax(0,1fr) 2.2rem minmax(0,1.1fr); gap:1.2rem; align-items:center}
.shift-head{padding:0 1.5rem .6rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.shift-head span:last-child{color:var(--gold-ink); padding-left:1rem}
.shifts{list-style:none; padding:0; margin:0; display:grid; gap:.8rem}
.shift{padding:1.1rem 1.5rem; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow)}
.shift-area{display:flex; align-items:center; gap:.85rem}
.shift-area b{font-family:var(--display); font-weight:500; font-size:1.25rem}
.shift-before{color:var(--muted); font-size:.98rem}
.shift-after{font-weight:500; font-size:.98rem; padding:.75rem 1rem; border-radius:8px; background:color-mix(in srgb, var(--gold) 11%, var(--surface)); border-left:3px solid var(--gold)}
.shift small{display:none; font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.25rem}
.shift-before small{color:var(--muted)}
.shift-after small{color:var(--gold-ink)}
.shift-arrow{color:var(--gold); display:grid; place-items:center}
.shift-arrow svg{width:1.6rem; height:1.6rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
@media (max-width:820px){
  .shift-head{display:none}
  .shift{grid-template-columns:1fr; gap:.6rem; padding:1.2rem}
  .shift small{display:block}
  .shift-area{margin-bottom:.2rem}
  .shift-arrow{justify-content:start; padding-left:.9rem; transform:rotate(90deg); width:1.6rem; height:1.4rem}
  .shift-arrow svg{width:1.3rem; height:1.3rem}
}

/* sections */
section.block{padding-block:clamp(3.4rem,7vw,5.6rem)}
section.block + section.block:not(.band){border-top:1px solid var(--rule)}
.sec-head{display:grid; grid-template-columns:minmax(0,14rem) minmax(0,1fr); gap:1.2rem 3rem; margin-bottom:2.6rem}
.sec-head h2{font-size:clamp(1.85rem,3.8vw,2.8rem)}
.sec-head p{max-width:40rem; color:var(--muted); margin-top:1rem}
@media (max-width:760px){ .sec-head{grid-template-columns:1fr} }

/* column grids → card grids */
.cols{display:grid; gap:1.2rem}
.cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.col{padding:1.6rem 1.5rem 1.7rem; display:flex; flex-direction:column; gap:.7rem; min-width:0; transition:transform .2s ease, box-shadow .2s ease}
a.col:hover, .col:has(> a.textlink):hover{transform:translateY(-3px); box-shadow:var(--shadow-lift)}
.col h3{font-size:1.45rem}
.col p{color:var(--muted)}
.col ul{padding-left:1.1rem; display:grid; gap:.3rem; font-size:.95rem}
.col .textlink{margin-top:auto; align-self:flex-start}
.col .for{margin-top:auto; font-family:var(--mono); font-size:.78rem; color:var(--hl)}
.band .col{background:color-mix(in srgb, var(--on-navy) 6%, transparent); border-color:var(--navy-rule); box-shadow:none}
.band .col p{color:var(--on-navy-muted)}
@media (max-width:960px){ .cols.c3,.cols.c4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .cols.c2,.cols.c3,.cols.c4{grid-template-columns:1fr} }

/* icons */
.ico{display:inline-grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:50%; background:color-mix(in srgb, var(--gold) 16%, transparent); color:var(--gold-ink); flex:none}
.ico svg{width:1.35rem; height:1.35rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.band .ico{background:color-mix(in srgb, var(--on-navy-gold) 18%, transparent); color:var(--on-navy-gold)}

/* numbered steps (home process preview) */
.steps .col{position:relative; padding-top:2rem}
.steps .num{position:absolute; top:-1.1rem; left:1.5rem; width:2.2rem; height:2.2rem; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:var(--on-navy-gold); font-family:var(--display); font-size:1.1rem; box-shadow:0 0 0 4px var(--bg)}
.steps{margin-top:1.1rem; row-gap:2.2rem}

/* offer detail rows (Coaching page) */
.offer-row{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:1.4rem 3rem; padding:2.2rem; margin-bottom:1.4rem; background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--gold); border-radius:var(--radius); box-shadow:var(--shadow)}
.offer-row h3{font-size:clamp(1.6rem,3vw,2.1rem)}
.offer-row .who{margin-top:.7rem; font-family:var(--mono); font-size:.78rem; color:var(--muted)}
.offer-body{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.6rem}
.offer-body > p{grid-column:1 / -1; color:var(--muted); max-width:44rem}
.offer-body h4{font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:.5rem}
.offer-body ul{padding-left:1.1rem; display:grid; gap:.3rem; font-size:.95rem}
.offer-body > div{min-width:0}
@media (max-width:860px){ .offer-row{grid-template-columns:1fr; padding:1.5rem} .offer-body{grid-template-columns:1fr} }

/* formats */
.formats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem}
.format{padding:1.6rem; display:flex; flex-direction:column; gap:.7rem; min-width:0}
.format h3{font-size:1.4rem}
.format dl{display:grid; grid-template-columns:auto 1fr; gap:.35rem 1rem; margin:0; font-size:.93rem}
.format dt{color:var(--muted)}
.format dd{margin:0; font-weight:500}
@media (max-width:860px){ .formats{grid-template-columns:1fr} }

/* process timeline */
.timeline{list-style:none; padding:0; display:grid; gap:0; position:relative}
.timeline::before{content:""; position:absolute; left:1.45rem; top:1.5rem; bottom:1.5rem; width:2px; background:linear-gradient(var(--gold), color-mix(in srgb, var(--gold) 20%, transparent))}
.phase{display:grid; grid-template-columns:3rem minmax(0,1fr) minmax(0,16rem); gap:1rem 2rem; padding-block:1.8rem; position:relative}
.phase .when{font-family:var(--mono); font-size:.72rem; color:var(--muted); grid-column:2; grid-row:1; letter-spacing:.06em; text-transform:uppercase}
.phase .when b{position:absolute; left:0; top:1.6rem; width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:var(--on-navy-gold); font-family:var(--display); font-size:1.15rem; font-weight:500; box-shadow:0 0 0 5px var(--bg)}
.phase h3{font-size:1.55rem}
.phase .what{display:grid; gap:.7rem; min-width:0; grid-column:2}
.phase .what p{color:var(--muted)}
.phase .what ul{padding-left:1.1rem; display:grid; gap:.25rem; font-size:.95rem}
.deliver{grid-column:3; grid-row:1 / span 2; padding:1.1rem 1.2rem; align-self:start; font-size:.92rem; display:grid; gap:.35rem}
@media (max-width:860px){ .phase{grid-template-columns:3rem minmax(0,1fr)} .deliver{grid-column:2; grid-row:auto} }

.session{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem}
.seg{padding:1.5rem; display:grid; gap:.45rem; align-content:start; min-width:0; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow)}
.seg .min{font-family:var(--display); font-size:2.4rem; line-height:1; font-variant-numeric:tabular-nums; color:var(--gold-ink)}
.seg .min small{font-size:1rem; color:var(--muted)}
.seg p{color:var(--muted); font-size:.95rem}
.minibar{display:flex; height:8px; margin-top:1.2rem; border-radius:99px; overflow:hidden}
.minibar i{display:block; height:100%}
@media (max-width:760px){ .session{grid-template-columns:1fr} }

/* approach pillars */
.approach{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem}
.pillar{padding:1.6rem 1.4rem 1.8rem; display:grid; gap:.6rem; align-content:start; min-width:0; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); border-top:3px solid var(--gold)}
.band .pillar{background:color-mix(in srgb, var(--on-navy) 6%, transparent); border-color:var(--navy-rule); border-top-color:var(--on-navy-gold); box-shadow:none}
.pillar .q-line{font-family:var(--display); font-style:italic; color:var(--muted); font-size:1.08rem}
.band .pillar .q-line{color:var(--on-navy)}
.band .pillar p:not(.q-line):not(.step){color:var(--on-navy-muted)}
.pillar h3{font-size:1.45rem}
.pillar p{color:var(--muted); font-size:.95rem}
.pillar .step{font-family:var(--mono); font-size:.74rem; color:var(--gold-ink); letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; gap:.75rem}
.band .pillar .step{color:var(--on-navy-gold)}
@media (max-width:960px){ .approach{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .approach{grid-template-columns:1fr} }
.sec-head p.gap-statement, .gap-statement{color:var(--ink); margin-top:0; font-family:var(--display); font-size:clamp(1.5rem,3.2vw,2.3rem); line-height:1.25; max-width:38rem}
.gap-statement em{color:var(--hl)}
.assess{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem}
.tool{padding:1.5rem; display:grid; gap:.55rem; align-content:start; min-width:0}
.tool .shows{font-family:var(--mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-ink)}
.tool h3{font-size:1.35rem}
.tool p{color:var(--muted); font-size:.95rem}
.tool.wide{grid-column:1 / -1}
@media (max-width:700px){ .assess{grid-template-columns:1fr} }
.goals{columns:2; column-gap:1.2rem; list-style:none; padding:0}
.goals li{break-inside:avoid; margin-bottom:.7rem; padding:.85rem 1.1rem; background:var(--surface); border:1px solid var(--rule); border-radius:10px; display:flex; gap:.8rem; align-items:baseline}
.goals li::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); flex:none; transform:translateY(-.1rem)}
@media (max-width:640px){ .goals{columns:1} }

/* FAQ */
.faq{display:grid; gap:.7rem}
.faq details{background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding-inline:1.3rem; transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{cursor:pointer; list-style:none; padding:1.1rem 2rem 1.1rem 0; font-family:var(--display); font-size:1.22rem; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.1rem; top:.95rem; font-family:var(--mono); color:var(--gold-ink); font-size:1.3rem}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 1.2rem; color:var(--muted); max-width:44rem}

/* results */
.areas{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem}
.area{display:grid; gap:.5rem; align-content:start; padding:1.4rem; min-width:0; border-top:3px solid var(--gold)}
.area h3{font-size:1.35rem}
.area ul{padding-left:1.1rem; display:grid; gap:.3rem; font-size:.95rem; color:var(--muted)}
@media (max-width:900px){ .areas{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .areas{grid-template-columns:1fr} }
.placeholder-box{border:1px dashed var(--flag); padding:1.4rem; color:var(--muted); display:grid; gap:.5rem; border-radius:var(--radius)}

/* self-check */
.check{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:2.5rem; align-items:start}
.qs{display:grid; gap:.6rem}
.q{display:flex; gap:1rem; align-items:flex-start; padding:.95rem 1.1rem; background:var(--surface); border:1px solid var(--rule); border-radius:10px; cursor:pointer; color:var(--ink); font-size:1rem; transition:border-color .15s, background .15s}
.q:hover{border-color:var(--gold)}
.q:has(input:checked){border-color:var(--gold); background:color-mix(in srgb, var(--gold) 8%, var(--surface))}
.q input{width:1.15rem; height:1.15rem; margin-top:.25rem; accent-color:var(--accent); flex:none}
.score{padding:1.8rem; position:sticky; top:8rem; border-top:3px solid var(--gold)}
.score .big{font-family:var(--display); font-size:4rem; line-height:1; font-variant-numeric:tabular-nums; margin-top:.6rem}
.score .big small{font-size:1.4rem; color:var(--muted)}
.meter{height:8px; background:var(--surface-2); margin:1rem 0 1.2rem; border-radius:99px; overflow:hidden}
.meter i{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--gold), var(--accent)); transition:width .3s ease}
.score p{color:var(--muted)}
.score .verdict{color:var(--ink); font-weight:500; margin-bottom:.4rem}
@media (max-width:860px){ .check{grid-template-columns:1fr} .score{position:static} }

/* R.O.S. */
.ros-band{background:var(--navy-deep); color:var(--on-navy); box-shadow:0 0 0 100vmax var(--navy-deep); clip-path:inset(0 -100vmax)}
.ros-band .label{color:var(--on-navy-gold)}
.ros-hero{padding-block:clamp(3rem,8vw,6rem) clamp(2.5rem,6vw,4rem)}
.ros-hero .wordmark{font-family:var(--display); font-size:clamp(3.2rem,9vw,6.5rem); line-height:.95; letter-spacing:.02em; margin-top:1rem; font-weight:500}
.ros-hero .wordmark span{color:var(--on-navy-gold)}
.ros-hero .full{font-family:var(--mono); font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-navy-muted); margin-top:.6rem}
.ros-hero h1{font-size:clamp(1.9rem,4.4vw,3.1rem); font-weight:400; margin-top:2rem; max-width:22ch}
.ros-hero h1 em{color:var(--on-navy-gold)}
.ros-hero .lede{margin-top:1.2rem; max-width:42rem; font-size:1.15rem; color:var(--on-navy-muted)}
.bond-strip{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:3rem}
.bond-strip div{padding:1.1rem 1.2rem; display:flex; align-items:baseline; gap:.7rem; min-width:0; border:1px solid var(--navy-rule); border-radius:10px; background:color-mix(in srgb, var(--on-navy) 5%, transparent)}
.bond-strip b{font-family:var(--display); font-size:2.6rem; line-height:1; color:var(--on-navy-gold); font-weight:500}
.bond-strip span{font-size:.95rem; color:var(--on-navy)}
@media (max-width:700px){ .bond-strip{grid-template-columns:repeat(2,minmax(0,1fr))} }

.bond-detail{display:grid; gap:1.2rem}
.bond-row{display:grid; grid-template-columns:6rem minmax(0,1fr) minmax(0,1fr); gap:1rem 2.4rem; padding:2rem; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow)}
.bond-row .big-l{font-family:var(--display); font-size:5rem; line-height:.85; color:var(--gold-ink)}
.bond-row h3{font-size:1.6rem}
.bond-row .q-line{margin-top:.6rem; font-family:var(--display); font-style:italic; font-size:1.15rem; color:var(--muted)}
.bond-row .make{display:grid; gap:.5rem; min-width:0}
.bond-row .make ul{padding-left:1.1rem; display:grid; gap:.3rem; font-size:.95rem}
.bond-row > div{min-width:0}
@media (max-width:860px){ .bond-row{grid-template-columns:1fr; padding:1.5rem} .bond-row .big-l{font-size:3.6rem} }

.story{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.5rem; align-items:center; padding:clamp(1.6rem,4vw,3rem)}
.story h3{font-size:clamp(1.8rem,3.4vw,2.4rem)}
.story .parts{display:grid; gap:0; border-top:1px solid var(--rule)}
.story .parts div{display:flex; justify-content:space-between; gap:1rem; padding-block:.8rem; border-bottom:1px solid var(--rule)}
.story .parts span{color:var(--muted); font-size:.92rem}
@media (max-width:760px){ .story{grid-template-columns:1fr} }

.ros-cta{padding-block:clamp(2.8rem,6vw,4.5rem)}
.ros-cta .inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem 2rem}
.ros-cta p.big{font-family:var(--display); font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.25; max-width:34rem}

/* about */
.about{display:grid; grid-template-columns:minmax(0,20rem) minmax(0,1fr); gap:2.5rem 4rem; align-items:start}
.about > .label{padding-top:.4rem}
.about .pull{font-family:var(--display); font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.25}
.roles{display:grid; gap:0; margin-top:.8rem; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:.4rem 1.3rem}
.roles div{display:flex; justify-content:space-between; gap:.3rem 1rem; flex-wrap:wrap; padding-block:.8rem; border-bottom:1px solid var(--rule); font-size:.95rem}
.roles div:last-child{border-bottom:0}
.roles span{color:var(--muted)}
@media (max-width:820px){ .about{grid-template-columns:1fr} .about .portrait{max-width:20rem; justify-self:start} }

/* contact */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:3rem; align-items:start}
.contact .details{display:grid; gap:1rem}
form{display:grid; gap:1rem}
#f{background:var(--surface); border:1px solid var(--rule); border-top:3px solid var(--gold); border-radius:var(--radius); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--shadow)}
label.f{display:grid; gap:.4rem; font-size:.85rem; font-weight:500; color:var(--muted)}
input[type=text],input[type=email],select,textarea{font:inherit; font-size:1rem; color:var(--ink); background:var(--bg); border:1px solid var(--rule); border-radius:8px; padding:.75rem .85rem; width:100%; transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent)}
textarea{min-height:7rem; resize:vertical}
.note{font-size:.85rem; color:var(--muted)}
.expect{list-style:none; padding:0; display:grid; gap:.7rem; margin-top:1.8rem}
.expect li{display:grid; grid-template-columns:2.2rem 1fr; gap:.8rem; align-items:center; font-size:.95rem}
.expect li b{display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; background:var(--navy); color:var(--on-navy-gold); font-family:var(--display); font-weight:500}
@media (max-width:760px){ .contact{grid-template-columns:1fr} }

/* "Built around you" note */
.tailored{display:flex; gap:1rem; align-items:flex-start; margin-top:1.6rem; padding:1.1rem 1.3rem; border-radius:var(--radius); background:color-mix(in srgb, var(--gold) 10%, var(--surface)); border:1px solid color-mix(in srgb, var(--gold) 35%, var(--rule)); border-left:4px solid var(--gold); max-width:52rem}
.tailored p{color:var(--ink); font-size:.98rem; padding-top:.45rem}
.tailored b{font-weight:600}
.sec-head + .tailored{margin:-1.2rem 0 2.2rem}

/* closing call to action */
.closer{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem 2rem; margin-block:clamp(2.6rem,6vw,4rem); padding:clamp(1.8rem,4vw,2.8rem); background:var(--navy); color:var(--on-navy); border-radius:16px; position:relative; overflow:hidden}
.closer::after{content:""; position:absolute; right:-3rem; bottom:-5rem; width:16rem; height:16rem; background:url(/assets/logo/rmc-monogram-gold.svg) center/contain no-repeat; opacity:.08}
.closer p{font-family:var(--display); font-size:clamp(1.4rem,2.8vw,1.9rem); max-width:34rem; line-height:1.25; position:relative}
.closer .btn{background:var(--on-navy-gold); color:#13213C; position:relative; z-index:1}

/* footer */
footer{background:var(--navy-deep); color:var(--on-navy-muted); padding-block:3rem 2.4rem; font-size:.88rem; margin-top:clamp(2rem,5vw,3rem)}
footer .foot{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:2rem 3rem; padding-bottom:2rem; border-bottom:1px solid var(--navy-rule)}
footer .foot-brand{display:flex; gap:1rem; align-items:flex-start}
footer .foot-brand img{width:3.2rem; height:auto; flex:none}
footer .foot-brand b{display:block; font-family:var(--display); font-size:1.3rem; font-weight:500; color:var(--on-navy)}
footer .foot-brand em{font-family:var(--display); color:var(--on-navy-gold)}
footer nav{display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); gap:.5rem 2.5rem; justify-content:end}
footer a{color:var(--on-navy); text-decoration:none}
footer a:hover{color:var(--on-navy-gold)}
footer .fine{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem 1.5rem; padding-top:1.4rem}
footer .fine-note{flex-basis:100%; font-size:.82rem; opacity:.85}
@media (max-width:700px){ footer .foot{grid-template-columns:1fr} footer nav{justify-content:start} }

/* gentle fade-in as sections scroll into view (only when JS runs and motion is welcome) */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
  .js .reveal.in{opacity:1; transform:none}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }

/* contact form states */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.note.ok{color:var(--ink); font-weight:500}
.note.err{color:var(--flag)}
.btn[disabled]{opacity:.6; cursor:wait}

/* 404 */
.notfound{padding-block:clamp(4rem,10vw,7rem)}