@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- tokens: Sleek and Futuristic ---------- */
:root{
  --bg:#f2f8f6; --text:#1a2421; --muted:#485652; --line:#1a2421; --surface:#d1e8e2;
  --inv-bg:#2c3531; --inv-text:#f2f8f6; --inv-muted:#bcd3cc;
  --accent:#116466; --on-accent:#ffffff; --warm:#ffcb9a; --on-warm:#1a2421; --peach-line:#c4712a; --link:#116466;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gap:1rem; --max:75rem; color-scheme:light;
}
html[data-mode="dark"]{color-scheme:dark;
  --bg:#101916; --text:#e6f1ee; --muted:#a3b9b3; --line:#4f7a72; --surface:#172622;
  --inv-bg:#116466; --inv-text:#f2f8f6; --inv-muted:#cfe6e2;
  --accent:#7fd1c7; --on-accent:#101916; --warm:#ffcb9a; --on-warm:#101916; --peach-line:#ffcb9a; --link:#7fd1c7}
html[data-mode="contrast"]{color-scheme:light;
  --bg:#ffffff; --text:#000000; --muted:#262626; --line:#000000; --surface:#ffffff;
  --inv-bg:#000000; --inv-text:#ffffff; --inv-muted:#e6e6e6;
  --accent:#0036a3; --on-accent:#ffffff; --warm:#ffd400; --on-warm:#000000; --peach-line:#8a4b00; --link:#0036a3}
html[data-mode="contrast"] a{text-decoration:underline;text-decoration-thickness:2px}
html[data-mode="contrast"] .tile{border-width:2px}

/* ---------- text size ---------- */
html{-webkit-text-size-adjust:100%}
html[data-text="l"]{font-size:112.5%}
html[data-text="xl"]{font-size:125%}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--text);font:400 1.0625rem/1.55 var(--sans)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.5rem}
section{padding:3.5rem 0}
section[id]{scroll-margin-top:4.5rem}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6vw,4.5rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.4rem}
.card-title{font-size:1.5rem}
p{max-width:62ch}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--link);outline-offset:3px}
.label{font:600 .75rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rule-double{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:5px}
.hl{text-decoration:underline;text-decoration-color:var(--warm);text-decoration-thickness:.1em;text-underline-offset:.1em;text-decoration-skip-ink:none}
.skip{position:absolute;left:-999px;top:0;background:var(--text);color:var(--bg);padding:.75rem 1rem;z-index:20}
.skip:focus{left:0}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.tile{border:1px solid var(--line);border-radius:4px;padding:1.75rem;position:relative;overflow:hidden;
  background:var(--bg);color:var(--text);display:flex;flex-direction:column;gap:.875rem}
.tile.surface{background:var(--surface)}
.tile.inverse{background:var(--inv-bg);color:var(--inv-text);border-color:var(--inv-bg)}
.tile.inverse .label{color:var(--inv-muted)}
.tile.accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tile.accent .label{color:inherit}
.tile.warm{background:var(--warm);color:var(--on-warm)}
.tile.warm .label{color:inherit}
.tile.center{align-items:center;text-align:center}
.tile.center .btn{align-self:center}
.tile.arch{border-radius:140px 140px 4px 4px;padding:3.5rem 2rem 2rem}
.tile.stat{padding:1.1rem 1.25rem;gap:.3rem}
.tile.stat h3{font-size:1.25rem}
.span-3{grid-column:span 3}.span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
@media (max-width:800px){.span-4,.span-6,.span-8{grid-column:span 12}.span-3{grid-column:span 6}.tile.arch{border-radius:90px 90px 4px 4px;padding-top:2.75rem}}
@media (max-width:420px){.span-3{grid-column:span 12}}

.btn{display:inline-block;font:600 .9375rem/1 var(--sans);padding:.875rem 1.375rem;border:1px solid currentColor;
  border-radius:999px;text-decoration:none;color:inherit;align-self:flex-start;background:transparent;cursor:pointer}
.btn.solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.warm{background:var(--warm);color:var(--on-warm);border-color:var(--line)}
.inverse .btn.solid{background:var(--warm);color:var(--on-warm);border-color:var(--warm)}
.accent .btn.solid{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)}

.motif{width:100%;max-width:8.75rem;height:auto;display:block}
.motif.accent{color:var(--accent)}
.motif.peach{color:var(--peach-line)}
.inverse .motif.peach{color:var(--warm)}
.path .motif{max-width:4.5rem}

/* ---------- header, nav, logos ---------- */
.bar{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);
  padding:.625rem max(1.5rem,calc((100% - var(--max))/2 + 1.5rem));display:flex;align-items:center;gap:1.25rem}
.brand{display:flex}
.logo{height:2rem;width:auto;display:block}
.logo.on-dark{display:none}
html[data-mode="dark"] .logo.on-light{display:none}
html[data-mode="dark"] .logo.on-dark{display:block}
.nav-links{display:flex;gap:1.25rem;list-style:none;padding:0;margin:0 0 0 1rem}
.nav-links a{color:var(--text);text-decoration:none;font-weight:500;font-size:.9375rem}
.nav-links a:hover{text-decoration:underline;text-decoration-color:var(--warm);text-decoration-thickness:.2em;text-underline-offset:.25em}
.bar-actions{display:flex;align-items:center;gap:.625rem;margin-left:auto}
.bar .btn{padding:.7rem 1.1rem}

.appearance,.menu{position:relative}
.appearance summary,.menu summary{list-style:none;cursor:pointer;font:700 .9375rem/1 var(--sans);padding:.7rem .9rem;
  border:1px solid var(--line);border-radius:999px;color:var(--text)}
.appearance summary::-webkit-details-marker,.menu summary::-webkit-details-marker{display:none}
.appearance-panel,.menu-panel{position:absolute;right:0;top:calc(100% + .5rem);background:var(--bg);color:var(--text);
  border:1px solid var(--line);border-radius:4px;z-index:10}
.appearance-panel{width:min(20rem,90vw);padding:1rem;display:grid;gap:1rem}
.menu-panel{width:min(18rem,90vw);padding:.5rem}
.menu-panel a{display:block;padding:.75rem;color:var(--text);text-decoration:none;font-weight:600}
.menu{display:none}
@media (max-width:860px){.nav-links{display:none}.menu{display:block}}
.appearance fieldset{border:0;padding:0;display:grid;gap:.375rem}
.appearance legend{font:600 .75rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.appearance label{display:flex;gap:.5rem;align-items:center;cursor:pointer}
.appearance input{accent-color:var(--accent);width:1.1rem;height:1.1rem}
.appearance button{font:600 .875rem/1 var(--sans);padding:.625rem 1rem;border:1px solid var(--line);
  border-radius:999px;background:transparent;color:var(--text);cursor:pointer;justify-self:start}

/* ---------- home page ---------- */
.hero{padding:2.25rem 0 1.25rem}
.hero h1{margin-top:1.25rem;max-width:18ch}
.lead{margin-top:1.25rem;font-size:1.1875rem;max-width:52ch}
.paths{padding:1.25rem 0 .5rem}
.audit{margin-top:1rem;max-width:none}
.trust{padding:1.25rem 0 3rem}
.stub{border-top:1px solid var(--line);padding:2.5rem 0}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:2.5rem 0;font-size:.9375rem}
.foot-grid{display:grid;grid-template-columns:1fr 2fr;gap:2rem}
.foot ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.foot a{color:var(--text)}
.foot small{display:block;margin-top:1rem;color:var(--muted)}
.linkbtn{background:none;border:0;font:inherit;color:var(--text);text-decoration:underline;cursor:pointer;padding:0}
@media (max-width:700px){.foot-grid{grid-template-columns:1fr}}

/* ---------- consent banner ---------- */
.consent{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:36rem;z-index:30;background:var(--bg);
  color:var(--text);border:1px solid var(--line);border-radius:4px;padding:1.25rem;display:grid;gap:.75rem}
.consent h2{font-size:1.15rem}
.consent p{font-size:.9375rem}
.consent-actions{display:flex;gap:.75rem;flex-wrap:wrap}

/* ---------- style tile helpers ---------- */
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.125rem,1fr));gap:var(--gap)}
.swatch{border:1px solid var(--line);border-radius:4px;overflow:hidden;font-size:.8125rem}
.swatch i{display:block;height:4rem}
.swatch span{display:block;padding:.5rem .625rem}
.ctable{border-collapse:collapse;width:100%;font-size:.9375rem}
.ctable th,.ctable td{border-bottom:1px solid var(--line);padding:.5rem;text-align:left}
.logos{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.logobox{border:1px solid var(--line);border-radius:4px;padding:1.5rem;display:flex;flex-direction:column;gap:.75rem}
.logobox img{max-width:13.75rem;height:auto}
.logobox.light{background:#ffffff;color:#101011}
.logobox.dark{background:#101011;color:#f5f4ed}
@media (max-width:600px){.logos{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== v2 additions: hero art, bands, offers, cases, FAQ, prose ===== */
[id]{scroll-margin-top:4.5rem}
h4{font-family:var(--serif);font-weight:600;line-height:1.15}
.muted{color:var(--muted)}
.pill{display:inline-block;font:600 .75rem/1 var(--sans);padding:.4rem .7rem;border:1px solid currentColor;border-radius:999px}
.pills{display:flex;flex-wrap:wrap;gap:.4rem}

/* hero */
.hero{position:relative;overflow:hidden;padding:2rem 0 1rem}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(2rem,4.4vw,3.5rem);max-width:none;margin-top:1.25rem}
.hero h1 .line{display:block}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:2.5rem;align-items:center}
.hero-art{position:relative;margin:0;justify-self:center;width:min(100%,24rem)}
.hero-art::before{content:"";position:absolute;inset:1rem -1rem -1rem 1rem;border:2px solid var(--peach-line);border-radius:999px 999px 4px 4px}
.arch-frame{position:relative;z-index:1;aspect-ratio:4/5;border:1px solid var(--line);border-radius:999px 999px 4px 4px;overflow:hidden;background:var(--surface)}
.arch-frame picture,.arch-frame img{display:block;width:100%;height:100%;object-fit:cover}
.deco::after{content:"";position:absolute;top:0;right:0;width:42%;height:100%;z-index:0;background:var(--peach-line);opacity:.18;
  -webkit-mask:url(/assets/img/pattern-arches.svg) 0 0/60px 30px repeat;mask:url(/assets/img/pattern-arches.svg) 0 0/60px 30px repeat;pointer-events:none}
@media (max-width:899px){
  .hero-grid{grid-template-columns:1fr;gap:1.5rem}
  .hero-art{width:min(100%,22rem)}
  .arch-frame{aspect-ratio:16/9;border-radius:14rem 14rem 4px 4px}
  .hero-art::before{border-radius:14rem 14rem 4px 4px}
  .deco::after{top:auto;bottom:0;width:100%;height:5rem}
}

/* bands */
.band{position:relative;overflow:hidden}
.band .wrap{position:relative;z-index:1}
.band.surface{background:var(--surface)}
.band.inverse{background:var(--inv-bg);color:var(--inv-text)}
.band.inverse .label,.band.inverse .muted{color:var(--inv-muted)}
.band.warm{background:var(--warm);color:var(--on-warm)}
.band.warm .label{color:inherit}
.band.accent{background:var(--accent);color:var(--on-accent)}
.band.accent .label{color:inherit}
.band.accent a:not(.btn),.band.inverse a:not(.btn){color:inherit}
.band.accent.deco::after{background:var(--warm);opacity:.22}
.sec-head{display:grid;gap:.75rem;margin-bottom:2rem}
.sec-head p{max-width:60ch}
.cta-in{display:grid;gap:1rem;justify-items:start}

/* problem photo tiles */
.photo-tile{padding:0;gap:0}
.photo-tile .ph{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:var(--surface)}
.photo-tile .ph picture,.photo-tile .ph img{display:block;width:100%;height:100%;object-fit:cover}
.photo-tile .body{padding:1.25rem 1.5rem 1.5rem;display:grid;gap:.5rem}
.big-n{font:600 2rem/1 var(--serif);color:var(--peach-line)}

/* paths and offers */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
@media (max-width:900px){.cols{grid-template-columns:1fr}}
.path-head{display:grid;gap:.5rem;margin-bottom:1rem}
.path-head .motif{max-width:3.5rem}
.stack{display:grid;gap:var(--gap)}
.offer{gap:.6rem}
.offer.with{border-top:6px solid var(--accent)}
.offer.for{border-top:6px solid var(--peach-line)}
.offer .price{font:600 1.5rem/1.2 var(--serif)}
.offer .sub{color:var(--muted);font-style:italic}
.offer .safety{border-left:3px solid var(--peach-line);padding-left:.75rem;font-size:.9375rem}

/* plan */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.step{border-top:2px solid currentColor;padding-top:1rem;display:grid;gap:.5rem}
.step .n{font:600 clamp(3rem,7vw,5rem)/1 var(--serif)}
@media (max-width:800px){.steps{grid-template-columns:1fr}}

/* case tiles and case pages */
.case-tile{padding:0;gap:0;text-decoration:none;color:var(--text)}
.case-tile .cover{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);background:var(--surface);color:var(--text)}
.case-tile .cover .motif{max-width:6rem}
.cover.inverse{background:var(--inv-bg);color:var(--inv-text)}
.cover.warm{background:var(--warm);color:var(--on-warm)}
.cover.accent{background:var(--accent);color:var(--on-accent)}
.cover.surface{background:var(--surface)}
.case-tile .body{padding:1.25rem 1.5rem 1.5rem;display:grid;gap:.5rem}
.more{font-weight:600;color:var(--link)}
.tile:hover .more{text-decoration:underline;text-decoration-color:var(--warm);text-decoration-thickness:.2em;text-underline-offset:.2em}
.case-head{display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:center}
.case-head h1{font-size:clamp(2rem,4.4vw,3.5rem)}
.case-art .motif{max-width:12rem;margin:0 auto}
@media (max-width:800px){.case-head{grid-template-columns:1fr}.case-art .motif{max-width:6rem;margin:0}}

/* services as rows */
.svc{list-style:none;padding:0;border-bottom:1px solid var(--line)}
.svc li{display:grid;grid-template-columns:3rem 1fr 2fr;gap:1rem;padding:1rem 0;border-top:1px solid var(--line);align-items:baseline}
.svc .no{font:600 .8rem/1 var(--sans);color:var(--peach-line);letter-spacing:.1em}
.svc strong{font-family:var(--serif);font-size:1.25rem}
@media (max-width:700px){.svc li{grid-template-columns:2.5rem 1fr}.svc li span:last-child{grid-column:2}}

/* FAQ */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 0;font:600 1.1rem/1.3 var(--serif);display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 1.5rem/1 var(--sans);color:var(--peach-line)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 1.25rem}

/* long text pages */
.prose{max-width:46rem}
.prose h1{margin-bottom:.5rem}
.prose h2{font-size:1.5rem;margin:2.25rem 0 .75rem}
.prose h3{font-size:1.15rem;margin:1.5rem 0 .5rem}
.prose p,.prose li{margin-bottom:.9rem}
.prose ul{padding-left:1.25rem;margin-bottom:.9rem}
.prose .meta{color:var(--muted);font-size:.9375rem}

/* ===== v2.1: headline fit, hero image blend ===== */
.hero-text{container-type:inline-size}
.hero h1{font-size:min(7cqw,3.25rem)}
.hero h1 .line{white-space:nowrap}
html[data-text="l"] .hero h1,html[data-text="xl"] .hero h1{font-size:clamp(2rem,4.2vw,3.25rem)}
html[data-text="l"] .hero h1 .line,html[data-text="xl"] .hero h1 .line{white-space:normal}

.arch-frame{isolation:isolate;background:var(--surface)}
.arch-frame img{mix-blend-mode:multiply}
html[data-mode="dark"] .arch-frame{background:var(--bg)}
html[data-mode="dark"] .arch-frame img{filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}
html[data-mode="contrast"] .arch-frame img{filter:none;mix-blend-mode:normal}

/* ===== v2.1: aligned offer grid, collapsible details ===== */
.offer-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;grid-auto-flow:column;gap:1rem 2rem}
.offer-grid .path-head{margin-bottom:0}
@media (max-width:900px){.offer-grid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}
.offer .btn{margin-top:auto}
.more-d summary{cursor:pointer;list-style:none;display:flex;gap:.5rem;align-items:center;font-weight:600}
.more-d summary::-webkit-details-marker{display:none}
.more-d summary::before{content:"+";color:var(--peach-line);font-weight:700;font-size:1.2rem}
.more-d[open] summary::before{content:"\2212"}
.more-d p{margin-top:.5rem}

/* ===== v2.2: headline wrapping, light only ===== */
.hero-text{container-type:inline-size}
.hero h1{font-size:clamp(1.75rem,4.4vw,3.4rem)}
.hero h1{font-size:clamp(1.75rem,6.6cqw,3.4rem)}
.hero h1 .line{white-space:normal;text-wrap:balance}

/* ===== v2.3: case pages, gallery, audit, 404 ===== */
.cover img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.case-art img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:4px;background:#fff}
.case-links{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:1.25rem}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.gallery figure{margin:0;display:grid;gap:.5rem;align-content:start}
.gallery img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:4px;background:#fff}
.gallery figcaption{font-size:.9375rem;max-width:60ch}
@media (max-width:800px){.gallery{grid-template-columns:1fr}}
.prose ol{padding-left:1.25rem;margin-bottom:.9rem}
.prose .pills{margin:1rem 0}
.rows{list-style:none;padding:0;border-bottom:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:13rem 1fr;gap:1rem;padding:.9rem 0;border-top:1px solid var(--line)}
.rows strong{font-family:var(--serif);font-size:1.2rem}
@media (max-width:700px){.rows li{grid-template-columns:1fr;gap:.25rem}}
.course{gap:.4rem}
.course .code{font:600 .8rem/1 var(--sans);letter-spacing:.1em;color:var(--peach-line)}
.course h3{font-size:1.2rem}
.nf .big{font:600 clamp(5rem,18vw,11rem)/1 var(--serif);color:var(--peach-line)}
.q{border:1px solid var(--line);border-radius:4px;padding:1rem 1.25rem;margin:0 0 .75rem}
.q legend{font:600 1.05rem/1.4 var(--sans);padding:0 .4rem}
.q .opts{display:flex;gap:1.25rem;flex-wrap:wrap;margin-top:.5rem}
.q label{display:flex;gap:.5rem;align-items:center;cursor:pointer}
.q input{accent-color:var(--accent);width:1.15rem;height:1.15rem}
.head-title{margin:2rem 0 .75rem}
.meter{height:.75rem;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:.25rem 0 1rem}
.meter span{display:block;height:100%;background:var(--peach-line)}
.gap-list{padding-left:1.25rem}
.gap-list li{margin-bottom:.6rem}
.res-actions{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.5rem}

/* ===== v3: pills, ribbon, plates, guide, offers, services row ===== */
:root{--peach-text:#8a4b00}
html[data-mode="dark"]{--peach-text:#ffcb9a}
html[data-mode="contrast"]{--peach-text:#6b3a00}
.big-n,.svc .no,.course .code,.course-strip .code{color:var(--peach-text)}

.plate{display:block;width:100%;height:auto}
.ico{width:4rem;height:4rem;flex:none}
.ico-m{width:5.5rem;height:5.5rem}
.ico-l{width:8rem;height:8rem;flex:none}
.on-dark{background:#fff;border-radius:4px}

.pills-hero{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--line)}

.ribbon-sec{padding:1rem 0 .5rem}
.ribbon{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.ribbon .tile.stat h3{font-size:1.05rem;line-height:1.25}
@media (max-width:1000px){.ribbon{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ribbon{grid-template-columns:1fr}}

.paths .path{justify-content:flex-start}
.paths .path .btn{margin-top:auto}
.audit-strip{display:flex;align-items:center;gap:1rem;margin-top:1.25rem}
.audit-strip p{max-width:none}

.photo-tile .ph.sq{aspect-ratio:1/1;background:transparent;padding:.5rem}
.photo-tile .ph.sq .plate{height:100%;object-fit:contain;mix-blend-mode:multiply}

.guide{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.guide h2{margin:.5rem 0 1rem}
.delivered{padding-left:1.1rem;display:grid;gap:.6rem}
@media (max-width:800px){.guide{grid-template-columns:1fr}}

.outcome{flex-direction:row;align-items:center;gap:1.25rem}
.outcome .plate{mix-blend-mode:multiply}
.outcome .on-dark{mix-blend-mode:normal}
@media (max-width:520px){.outcome{flex-direction:column;align-items:flex-start}}

.rivets{height:14px;margin:0 auto;max-width:var(--max);background:radial-gradient(circle,var(--line) 3px,transparent 3.5px) 0 50%/28px 14px repeat-x;opacity:.5}

.offer-band{margin-bottom:3rem}
.offer-row{display:grid;gap:var(--gap)}
.offer-row.c2{grid-template-columns:repeat(2,1fr)}
.offer-row.c3{grid-template-columns:repeat(3,1fr)}
.offer{gap:.75rem}
.offer .o-out{font-weight:600}
.offer .btn{margin-top:auto}
@media (min-width:901px){
  @supports (grid-template-rows:subgrid){
    .offer-row .offer{display:grid;grid-template-rows:subgrid;grid-row:span 5;align-content:start}
  }
}
@media (max-width:900px){.offer-row.c2,.offer-row.c3{grid-template-columns:1fr}}
.more-d summary{gap:.6rem}
.badge{width:2.25rem;height:2.25rem}
.courses-tile{margin-top:var(--gap)}
.course-strip{list-style:none;padding:0;display:grid;grid-template-columns:repeat(9,1fr);gap:.75rem;text-align:center;font-size:.85rem}
.course-strip li{display:grid;justify-items:center;gap:.3rem}
.course-strip .code{font-weight:700;letter-spacing:.08em}
@media (max-width:1000px){.course-strip{grid-template-columns:repeat(3,1fr)}}

.steps .ico-m{margin-bottom:.25rem}
.svc-row{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;text-align:center}
.svc-row li{display:grid;justify-items:center;gap:.4rem;font-weight:600}
@media (max-width:800px){.svc-row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.svc-row{grid-template-columns:repeat(2,1fr)}}
.faq-head{display:flex;align-items:center;gap:1.25rem}
.cta-in .plate{max-width:8rem}

/* ===== v3.1: plates as subtle multiply backgrounds ===== */
.plate,.bgplate{mix-blend-mode:multiply}
.has-bg,.sec-bg{position:relative;overflow:hidden}
.has-bg>*:not(.bgplate),.sec-bg>.wrap{position:relative;z-index:1}
.bgplate{position:absolute;right:-1rem;bottom:-1rem;width:min(55%,14rem);height:auto;opacity:.22;pointer-events:none;z-index:0}
.bgplate.big{width:min(65%,20rem);opacity:.24}
.bgplate.fill{inset:0;right:auto;bottom:auto;width:100%;height:100%;object-fit:contain;opacity:.3}
.sec-bg>.bgplate{right:2%;top:1rem;bottom:auto;opacity:.14}
.cta-plate{right:3%;top:50%;bottom:auto;transform:translateY(-50%);opacity:.3}

.btn.ghost{background:transparent;color:var(--accent);border:2px solid var(--accent)}

.ribbon{grid-template-columns:repeat(5,1fr)}
.ribbon .tile.stat{padding:1.1rem 1.25rem;gap:.6rem}
.ribbon .tile.stat ul{list-style:none;padding:0;display:grid;gap:.4rem;font-size:.95rem;line-height:1.3}
.rn{font:600 1.7rem/1 var(--serif);margin-right:.25rem}

.audit-strip{display:block;margin-top:1.25rem;padding:1.25rem 1.5rem;text-decoration:none;color:var(--text)}
.audit-strip p{max-width:none}
.audit-strip strong{text-decoration:underline;text-decoration-color:var(--peach-line);text-underline-offset:.2em;text-decoration-thickness:.15em}
.audit-strip:hover strong{color:var(--link)}

.photo-tile .ph.sq{aspect-ratio:auto;height:9.5rem;padding:.75rem;border-bottom:0;background:transparent;display:flex;justify-content:center}
.photo-tile .ph.sq .plate{width:auto;height:100%;max-width:100%;object-fit:contain}

.outcome{flex-direction:column;align-items:flex-start;min-height:15rem;gap:.875rem}

.offer .o-out{min-height:1.5em}
.more-d{padding-top:.25rem}
.formula{display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem 1rem;margin-top:.75rem;font-size:.9375rem}
.formula dt{font:600 .72rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.formula dd{margin:0}
@media (max-width:520px){.formula{grid-template-columns:1fr;gap:.15rem}.formula dd{margin-bottom:.5rem}}
.more-d .bgplate{right:-.5rem;bottom:-.5rem;width:9rem;opacity:.18}
@media (min-width:901px){@supports (grid-template-rows:subgrid){.offer-row .offer{grid-row:span 5}}}

.course-strip{grid-template-columns:repeat(9,1fr);gap:.5rem}
.course-strip li{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;min-height:7rem;padding:.6rem .7rem;border:1px solid var(--line);border-radius:4px;background:var(--bg);gap:.15rem;font-weight:600}
@media (max-width:1000px){.course-strip{grid-template-columns:repeat(3,1fr)}}

.steps{gap:1rem}
.step.has-bg{border:1px solid var(--line);border-radius:4px;padding:1.5rem;min-height:17rem;align-content:start;background:color-mix(in srgb,var(--warm) 55%,#ffffff)}
.step .bgplate.fill{opacity:.35}

.svc-row{gap:.75rem}
.svc-row li{display:flex;align-items:flex-end;justify-content:flex-start;text-align:left;min-height:8rem;padding:.75rem;border:1px solid var(--line);border-radius:4px;background:var(--bg);font-weight:600}
@media (max-width:800px){.svc-row li{min-height:7rem}}

.cta-in{position:relative;z-index:1}

/* ===== v3.2: four cell ribbon ===== */
.ribbon-note{margin-bottom:.75rem}
.ribbon{grid-template-columns:repeat(4,1fr)}
.ribbon .tile.stat ul{font-size:.9375rem}
@media (max-width:1000px){.ribbon{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.ribbon{grid-template-columns:1fr}}

/* ===== v3.3: problem tiles with big background plates ===== */
.problem{min-height:17rem;justify-content:flex-start;gap:.75rem}
.problem p{font:600 1.2rem/1.35 var(--serif);max-width:20ch}
.problem .bgplate{width:min(85%,18rem);right:-1rem;bottom:-1rem;opacity:.3}

/* ===== v3.4: centred menu bar ===== */
.bar{display:grid;grid-template-columns:1fr auto 1fr;gap:1.25rem}
.bar .brand{justify-self:start}
.bar .nav-links{margin:0;justify-content:center}
.bar-actions{justify-self:end;margin-left:0}
@media (max-width:860px){.bar{grid-template-columns:1fr auto}.bar nav{display:none}}

/* ===== v3.4b: shorter steps with text panel, nine course cards ===== */
.step.has-bg{min-height:10rem;padding:0;display:flex;align-items:stretch;border-top:1px solid var(--line)}
.step .bgplate.fill{opacity:.2;object-fit:cover;object-position:center}
.step .txt{position:relative;z-index:1;margin:.75rem;padding:.9rem 1.1rem;display:grid;gap:.3rem;align-content:start;width:100%;
  background:color-mix(in srgb,var(--bg) 80%,transparent);border-radius:4px}
.step .n{font:600 2.25rem/1 var(--serif)}
.step h3{font-size:1.25rem}

.course-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.course-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--bg)}
.course-card .cimg{aspect-ratio:16/10;background:var(--surface);overflow:hidden;border-bottom:1px solid var(--line)}
.course-card .cimg .plate{width:100%;height:100%;object-fit:cover;object-position:center}
.course-card .ctxt{padding:1rem 1.1rem 1.2rem;display:grid;gap:.35rem;align-content:start}
.course-card .code{font:700 .8rem/1 var(--sans);letter-spacing:.1em;color:var(--peach-text)}
.course-card h4{font-size:1.1rem}
.course-card p{font-size:.9375rem}
@media (max-width:900px){.course-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.course-grid{grid-template-columns:1fr}}

/* ===== v3.5: steps restored, problem tiles shorter with text panel ===== */
.step.has-bg{display:grid;padding:1.5rem;min-height:17rem;align-content:start;border:1px solid var(--line);gap:.5rem}
.step .bgplate.fill{object-fit:contain;opacity:.35}

.problem{min-height:11rem;padding:.75rem;justify-content:stretch}
.problem .bgplate{top:0;left:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.22}
.problem .txt{position:relative;z-index:1;width:100%;display:grid;gap:.5rem;align-content:start;padding:1rem 1.1rem;
  background:color-mix(in srgb,var(--bg) 80%,transparent);border-radius:4px}
.problem .big-n{font-size:1.75rem}
.problem p{font:600 1.15rem/1.35 var(--serif);max-width:none}