/* Mila Studios — shared site stylesheet (the Lego pieces).
   COLOR RULE (Braden, 2026-08-07): full plum #80314E wherever the brand color
   sits on a LIGHT background. On DARK backgrounds we never tint plum toward
   pink; emphasis carries through cream + italic instead. --mauve stays in the
   palette as a brand color but is not used as an accent-on-dark. */
:root{
  --wine:#80314E;      /* THE plum. Full strength, always. */
  --wine-deep:#6d2942; /* hover only */
  --bone:#EDEADC;
  --green:#43534C;
  --rust:#783734;
  --mauve:#C0A19F;     /* brand palette member; not used as accent text */
  --ink:#241d1b;
  --cream-70:rgba(237,234,220,.7);
  --cream-85:rgba(237,234,220,.85);
  --serif:'Playfair Display',Georgia,serif;
  --caps:'Helvetica Neue',Arial,sans-serif;
  --display:'League Spartan',sans-serif;
  --r:16px;
}
/* 30 Sep 2026: the header and the footer are styled only by assets/chrome.css, the same file on every page.
   Their old rules were removed from this file; the comments further down describe the history. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--caps);color:var(--ink);background:var(--bone);line-height:1.65;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:calc(1320px + 2 * clamp(20px,4.2vw,64px));margin:0 auto;padding:0 clamp(20px,4.2vw,64px)} /* 30 Sep: the same frame as the redesign's pages and the header */
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.26em;font-weight:600;font-size:.7rem}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.08;letter-spacing:-.012em}
em{font-style:italic}
a{color:inherit}
.btn{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-weight:600;font-size:.76rem;
background:var(--wine);color:var(--cream-fixed);border:none;padding:16px 30px;border-radius:999px;cursor:pointer;
text-decoration:none;display:inline-block;transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s}
.btn:hover{transform:translateY(-2px);background:var(--wine-deep)}
.btn.light{background:var(--cream-fixed);color:var(--wine)}
.btn.light:hover{background:#fff}
.btn.ghost{background:transparent;border:1.5px solid rgba(237,234,220,.55);color:var(--cream-fixed)}
.btn.ghost:hover{background:rgba(237,234,220,.12)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* NAV */










/* The CTA and the hamburger sit together on the right. The hamburger is hidden
   on desktop and only appears at the 900px breakpoint (see the mobile block). */




/* open state: the three bars become an X */




/* HERO (dark) */
.hero{position:relative;height:100svh;min-height:620px;display:flex;align-items:flex-end;color:var(--cream-fixed);overflow:hidden}
.hero video,.hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero .scrim{position:absolute;inset:0;z-index:1;background:
linear-gradient(180deg,rgba(36,29,27,.55) 0%,rgba(36,29,27,.18) 34%,rgba(36,29,27,.72) 78%,rgba(36,29,27,.94) 100%)}
.hero .tint{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(128,49,78,.22),transparent 62%);mix-blend-mode:multiply}
.hero .wrap{position:relative;z-index:3;padding-bottom:92px}
.hero .eyebrow{color:var(--mauve);display:inline-flex;align-items:center;gap:13px;margin-bottom:24px}
.hero .eyebrow::before{content:"";width:42px;height:1.5px;background:var(--mauve)}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.9rem);max-width:21ch;text-shadow:0 2px 40px rgba(0,0,0,.35)}
.hero h1 em{color:#fff}                       /* emphasis by brightness + italic, never pink */
.hero p{font-size:clamp(1rem,1.25vw,1.18rem);max-width:44ch;margin:26px 0 34px;color:var(--cream-85)}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* compact hero for interior pages */
.hero.short{height:auto;min-height:0;padding:170px 0 92px}
.hero.short .wrap{padding-bottom:0}
.hero .wrap{width:100%} /* 30 Sep: the header text sits on the page frame, lined up with the logo */

/* STAKES (dark) */
.stakes{position:relative;color:var(--cream-fixed);padding:120px 0;overflow:hidden;background:var(--ink-fixed)}
.stakes .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.24;filter:grayscale(.35)}
.stakes .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(36,29,27,.96) 30%,rgba(36,29,27,.55))}
.stakes .wrap{position:relative;z-index:2}
.stakes .eyebrow{color:var(--cream-70);display:block;margin-bottom:20px}
.stakes h2{font-size:clamp(2rem,4.2vw,3.3rem);max-width:19ch;margin-bottom:26px}
.stakes h2 em{color:#fff}
.stakes p{color:var(--cream-85);max-width:52ch;font-size:1.06rem}
.stakes p+p{margin-top:16px}
.stakes .kicker{margin-top:30px;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:#fff}

/* VALUE / card grid (light) */
.value{padding:120px 0}
.value .head{max-width:46ch;margin-bottom:60px}
.value .head .eyebrow{color:var(--wine);display:block;margin-bottom:16px}
.value .head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);color:var(--green)}
.value .head h2 em{color:var(--wine)}
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.vc{border-radius:var(--r);overflow:hidden;background:#fff;box-shadow:0 2px 0 rgba(67,83,76,.06);
transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.vc:hover{transform:translateY(-8px);box-shadow:0 30px 60px -34px rgba(36,29,27,.45)}
.vc .ph{aspect-ratio:4/3;background-size:cover;background-position:center}
.vc .tx{padding:28px 26px 32px}
.vc h3{font-size:1.3rem;color:var(--green);margin-bottom:10px}
.vc p{font-size:.97rem;color:#5f544e}

/* GUIDE (white split) */
.guide{background:#fff;padding:120px 0;border-top:1px solid rgba(67,83,76,.08);border-bottom:1px solid rgba(67,83,76,.08)}
.guide .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.guide .photo{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background-size:cover;background-position:center top;
box-shadow:0 30px 60px -34px rgba(36,29,27,.45)}
.guide .eyebrow{color:var(--wine);display:block;margin-bottom:16px}
.guide h2{font-size:clamp(1.85rem,3.2vw,2.6rem);color:var(--green);margin-bottom:22px}
.guide h2 em{color:var(--wine)}
.guide p{color:#5f544e;font-size:1.06rem;max-width:52ch}
.guide p+p{margin-top:15px}
.guide .proofrow{margin-top:30px;padding-top:26px;border-top:1px solid rgba(67,83,76,.14);
font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:#9a8d86}

/* ORIGIN (why Mila exists — restored 2026-08-11, carried verbatim from about.html's
   founder-story hero + story sections per the 2026-08-08 hard requirement in the
   idea inbox, video included. NOTE: .ohero here is deliberately NOT named .ogrid —
   .ogrid is already the offers-cards grid elsewhere in this file. */
.origin{background:var(--bone);padding:110px 0;text-align:center}
.origin .ohero{max-width:960px;display:grid;grid-template-columns:minmax(220px,280px) 1fr;
gap:56px;align-items:center;text-align:left;margin-bottom:64px}
.origin .ocopy{max-width:680px}
.origin .video-wrap{position:relative;width:100%;max-width:280px;margin:0 auto;
border-radius:var(--r);overflow:hidden;background:#141013;
box-shadow:0 30px 70px -30px rgba(36,29,27,.5);aspect-ratio:9/16}
.origin .video-wrap video,.origin .video-wrap img.poster{width:100%;height:100%;display:block;object-fit:cover}
.origin .play-overlay{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
background:linear-gradient(180deg,rgba(128,49,78,.22),rgba(20,12,15,.5));
color:var(--cream-fixed);font-family:var(--caps);transition:background .25s ease}
.origin .play-overlay:hover{background:linear-gradient(180deg,rgba(128,49,78,.36),rgba(20,12,15,.58))}
.origin .play-circle{width:70px;height:70px;border-radius:50%;background:rgba(244,240,231,.96);
display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.origin .play-circle span{color:var(--wine);font-size:24px;margin-left:5px;line-height:1}
.origin .play-label{text-transform:uppercase;letter-spacing:.2em;font-size:.66rem;font-weight:700;
text-shadow:0 1px 8px rgba(0,0,0,.45)}
.origin .eyebrow{color:var(--wine);display:block;margin-bottom:20px}
.origin .oquote{font-family:var(--serif);font-style:italic;color:var(--green);
font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.45;
border-left:3px solid var(--wine);padding-left:26px;margin:0;max-width:520px}
.origin .oquote cite{display:block;margin-top:14px;font-style:normal;font-family:var(--display);
text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;font-weight:600;color:var(--wine)}
.origin .kicker{font-family:var(--serif);font-style:italic;color:var(--wine);
font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:26px}
.origin p{color:#5f544e;font-size:1.07rem}
.origin p+p{margin-top:15px}
.origin .lead{color:var(--ink)}
.origin .final-line{margin-top:18px;font-size:1.18rem}
.origin .signature{margin-top:38px}
.origin .signature img{width:200px;max-width:60%;height:auto;display:inline-block;mix-blend-mode:multiply}
.origin .cta{margin-top:32px}

/* PLAN (green band) */
.plan{background:var(--green-fixed);color:var(--cream-fixed);padding:120px 0}
.plan .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.plan .eyebrow{color:var(--cream-70);display:block;margin-bottom:16px}
.plan h2{font-size:clamp(1.9rem,3.4vw,2.8rem);margin-bottom:34px}
.step{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:22px 0;border-top:1px solid rgba(237,234,220,.2)}
.step:last-of-type{border-bottom:1px solid rgba(237,234,220,.2)}
.step .n{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.14em;color:var(--cream-70);padding-top:5px}
.step h3{font-size:1.22rem;color:var(--cream-fixed);margin-bottom:5px}
.step p{color:var(--cream-85);font-size:.97rem}
.plan .vid{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;position:relative;box-shadow:0 30px 60px -34px rgba(0,0,0,.6)}
.plan .vid video{width:100%;height:100%;object-fit:cover;display:block}
.plan .cta{margin-top:34px}

/* WEBINAR band (plum) */
.webinar{background:var(--wine);color:var(--cream-fixed);padding:76px 0;position:relative;overflow:hidden}
.webinar .mk{position:absolute;right:-4%;top:-40%;width:44%;opacity:.07}
.webinar .wrap{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;position:relative;z-index:2}
.webinar .eyebrow{color:var(--cream-85);display:block;margin-bottom:14px}
.webinar h2{font-size:clamp(1.6rem,3vw,2.4rem);max-width:24ch;margin-bottom:12px}
.webinar h2 em{color:#fff}
.webinar p{color:var(--cream-85);max-width:50ch;font-size:1rem}

/* OFFER cards (dark imagery) */
.offers{padding:120px 0}
.offers .head{max-width:44ch;margin-bottom:56px}
.offers .head .eyebrow{color:var(--wine);display:block;margin-bottom:16px}
.offers .head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);color:var(--green)}
.offers .head h2 em{color:var(--wine)}
.ogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.oc{position:relative;border-radius:var(--r);overflow:hidden;min-height:440px;display:flex;flex-direction:column;
justify-content:flex-end;padding:34px;color:var(--cream-fixed);isolation:isolate;text-decoration:none}
.oc .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.oc:hover .bg{transform:scale(1.06)}
.oc .sc{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(36,29,27,.15) 20%,rgba(36,29,27,.9) 82%)}
.oc.plum .sc{background:linear-gradient(180deg,rgba(128,49,78,.18) 12%,rgba(90,32,54,.84) 84%)}
.oc.forest .sc{background:linear-gradient(180deg,rgba(67,83,76,.12) 12%,rgba(30,40,35,.82) 84%)}
.oc .step-t{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:.63rem;color:var(--cream-70)}
.oc h3{font-size:1.65rem;margin:10px 0 10px}
.oc p{font-size:.96rem;color:var(--cream-85);margin-bottom:20px;max-width:30ch}
.oc .go{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.71rem;color:var(--cream-fixed);
border-bottom:1.5px solid var(--cream-70);padding-bottom:4px;align-self:flex-start;transition:border-color .25s}
.oc:hover .go{border-color:var(--cream-fixed)}

/* PROOF (dark) */
.proof{position:relative;padding:130px 0;color:var(--cream-fixed);overflow:hidden;background:var(--ink-fixed)}
.proof .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22;filter:grayscale(.4)}
.proof .veil{position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 50%,rgba(36,29,27,.72),rgba(36,29,27,.96))}
.proof .wrap{position:relative;z-index:2;text-align:center}
.proof blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,3.2vw,2.5rem);
max-width:24ch;margin:0 auto 22px;line-height:1.26}
.proof .who{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;color:var(--cream-70)}

/* FINAL + FOOTER */
.final{padding:130px 0;text-align:center;background:
radial-gradient(80% 120% at 50% 0%,rgba(128,49,78,.13),transparent 62%),var(--bone)}
.final h2{font-size:clamp(2.2rem,4.4vw,3.5rem);color:var(--green);max-width:18ch;margin:0 auto 28px}
.final h2 em{color:var(--wine)}
.final .sub{color:#6b6058;margin-top:18px;font-size:.95rem}
.final .sub a{color:var(--wine)}







/* PROSE (offer pages) */
.prose{padding:110px 0;background:var(--bone)}
.prose .wrap{max-width:760px}
.prose .eyebrow{color:var(--wine);display:block;margin-bottom:16px}
.prose h2{font-size:clamp(1.8rem,3.2vw,2.5rem);color:var(--green);margin-bottom:22px}
.prose h2 em{color:var(--wine)}
.prose h3{font-size:1.25rem;color:var(--green);margin:34px 0 10px}
.prose p{color:#5f544e;font-size:1.07rem}
.prose p+p{margin-top:15px}
.prose ul{margin:16px 0 0 20px;color:#5f544e}
.prose li{margin-bottom:9px;font-size:1.04rem}
.prose .note{margin-top:34px;padding:24px 26px;border-left:3px solid var(--wine);background:#fff;border-radius:0 12px 12px 0}
.prose .note p{font-size:1rem;color:#4d443f}

/* stub page (untouched pages) */
.stub{padding:190px 0 130px;text-align:center;background:var(--bone)}
.stub h1{font-size:clamp(2rem,4vw,3rem);color:var(--green);margin-bottom:20px}
.stub p{color:#5f544e;max-width:54ch;margin:0 auto 14px;font-size:1.06rem}
.stub .badge{display:inline-block;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;
font-size:.64rem;color:var(--wine);border:1px solid rgba(128,49,78,.35);padding:7px 14px;border-radius:999px;margin-bottom:26px}
.stub .cta{margin-top:30px}

@media(max-width:900px){
 .hero .wrap{padding-bottom:64px}
 .hero.short{padding:130px 0 66px}
 .vgrid,.ogrid{grid-template-columns:1fr}
 .guide .wrap,.plan .wrap,.webinar .wrap,.origin .ohero{grid-template-columns:1fr;gap:38px}
 .guide .photo{aspect-ratio:4/3;max-width:460px}
 .origin .video-wrap{max-width:240px}
 .origin .oquote{text-align:left;margin:0 auto;max-width:420px}
 .plan .vid{aspect-ratio:16/10}
 .stakes,.value,.guide,.plan,.offers,.proof,.final,.prose,.origin{padding:76px 0}
}

/* ============ PER-PAGE SIGNATURE SECTIONS ============
   Each interior page gets ONE distinct treatment so the site feels like one
   family without every page being the same page. No repeated plan block
   outside the home page. */

/* SERVICES: "which one fits" — open rows, no boxes (replaces the note card) */
.fits{padding:110px 0;background:#fff;border-top:1px solid rgba(67,83,76,.08)}
.fits .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.fits .eyebrow{color:var(--wine);display:block;margin-bottom:16px}
.fits h2{font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--green)}
.fits h2 em{color:var(--wine)}
.fits .rows{display:flex;flex-direction:column}
.fits .row{padding:24px 0;border-top:1px solid rgba(67,83,76,.14);display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline}
.fits .row:last-child{border-bottom:1px solid rgba(67,83,76,.14)}
.fits .row .tag{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.63rem;
color:var(--wine);white-space:nowrap;padding-top:4px}
.fits .row p{color:#5f544e;font-size:1.04rem}
.fits .row p strong{color:var(--green);font-weight:600}
.fits .closer{margin-top:30px;font-family:var(--serif);font-style:italic;font-size:1.22rem;color:var(--green)}

/* SSS: the session as a timeline */
.timeline{padding:110px 0;background:var(--bone)}
.timeline .head{max-width:44ch;margin-bottom:54px}
.timeline .head .eyebrow{color:var(--wine);display:block;margin-bottom:16px}
.timeline .head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--green)}
.timeline .head h2 em{color:var(--wine)}
.tl{position:relative;padding-left:38px}
.tl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:rgba(128,49,78,.22)}
.tl .item{position:relative;padding:0 0 34px 0}
.tl .item::before{content:"";position:absolute;left:-38px;top:7px;width:16px;height:16px;border-radius:50%;
background:var(--bone);border:3px solid var(--wine)}
.tl .item h3{font-size:1.2rem;color:var(--green);margin-bottom:7px}
.tl .item p{color:#5f544e;font-size:1.02rem;max-width:52ch}
.tl .item .when{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.62rem;color:var(--wine);display:block;margin-bottom:6px}

/* CONTENT RETAINER: the month as a rhythm strip */
.rhythm{padding:110px 0;background:var(--green-fixed);color:var(--cream-fixed)}
.rhythm .head{max-width:46ch;margin-bottom:52px}
.rhythm .head .eyebrow{color:var(--cream-70);display:block;margin-bottom:16px}
.rhythm .head h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.rhythm .head h2 em{color:#fff}
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.rgrid::before{content:"";position:absolute;left:0;right:0;top:26px;height:2px;background:rgba(237,234,220,.22)}
.rgrid .wk{position:relative;padding:0 22px 0 0}
.rgrid .wk .dot{width:14px;height:14px;border-radius:50%;background:var(--cream-fixed);position:relative;z-index:2;margin-bottom:26px}
.rgrid .wk .lbl{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;color:var(--cream-70);margin-bottom:8px;display:block}
.rgrid .wk h3{font-size:1.12rem;color:var(--cream-fixed);margin-bottom:7px}
.rgrid .wk p{font-size:.94rem;color:var(--cream-85)}

/* DCS: the system as stacked layers */
.system{padding:110px 0;background:var(--bone)}
.system .head{max-width:46ch;margin-bottom:50px}
.system .head .eyebrow{color:var(--wine);display:block;margin-bottom:16px}
.system .head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--green)}
.system .head h2 em{color:var(--wine)}
.layers{display:flex;flex-direction:column;gap:12px}
.layer{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;padding:26px 30px;border-radius:12px;
background:#fff;border-left:4px solid var(--wine);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.layer:hover{transform:translateX(6px)}
.layer:nth-child(2){margin-left:26px}
.layer:nth-child(3){margin-left:52px}
.layer:nth-child(4){margin-left:78px}
.layer .n{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;color:var(--wine)}
.layer h3{font-size:1.14rem;color:var(--green);margin-bottom:4px}
.layer p{font-size:.97rem;color:#5f544e}
.system .foot{margin-top:34px;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--green);max-width:46ch}

@media(max-width:900px){
 .fits .wrap{grid-template-columns:1fr;gap:32px}
 .rgrid{grid-template-columns:1fr;gap:26px}
 .rgrid::before{display:none}
 .rgrid .wk .dot{display:none}
 .layer:nth-child(2),.layer:nth-child(3),.layer:nth-child(4){margin-left:0}
 .fits,.timeline,.rhythm,.system{padding:70px 0}
}

/* ============ OFFER-PAGE DEPTH BLOCKS ============ */
/* "What you get" — a clean deliverables list on bone */
.gets{padding:100px 0;background:#fff;border-top:1px solid rgba(67,83,76,.08)}
.gets .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.gets .eyebrow{color:var(--wine);display:block;margin-bottom:16px}
.gets h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--green)}
.gets h2 em{color:var(--wine)}
.gets ul{list-style:none}
.gets li{padding:16px 0 16px 34px;border-bottom:1px solid rgba(67,83,76,.12);position:relative;color:#5f544e;font-size:1.04rem}
.gets li:first-child{border-top:1px solid rgba(67,83,76,.12)}
.gets li::before{content:"";position:absolute;left:0;top:24px;width:14px;height:2px;background:var(--wine)}
.gets li strong{color:var(--green);font-weight:600}

/* "What this asks of you" — the capacity answer, the strongest block on the page */
.asks{padding:96px 0;background:var(--wine);color:var(--cream-fixed);text-align:center}
.asks .eyebrow{color:var(--cream-85);display:block;margin-bottom:18px}
.asks h2{font-size:clamp(1.9rem,3.6vw,2.9rem);max-width:20ch;margin:0 auto 20px}
.asks h2 em{color:#fff}
.asks p{color:var(--cream-85);max-width:52ch;margin:0 auto;font-size:1.06rem}
.asks p+p{margin-top:14px}
.asks .flag{margin-top:22px;font-size:.8rem;color:rgba(237,234,220,.6);font-style:italic}

/* Who it's for / not for */
.forwho{padding:100px 0;background:var(--bone)}
.forwho .wrap{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.forwho .col{padding:34px 32px;border-radius:14px;background:#fff}
.forwho .col.no{background:transparent;border:1px solid rgba(67,83,76,.18)}
.forwho .lbl{font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.63rem;
color:var(--wine);display:block;margin-bottom:12px}
.forwho .col.no .lbl{color:#8b7f78}
.forwho h3{font-size:1.2rem;color:var(--green);margin-bottom:10px}
.forwho p{color:#5f544e;font-size:1.02rem}

/* FAQ */
.faq{padding:100px 0;background:#fff;border-top:1px solid rgba(67,83,76,.08)}
.faq .head{max-width:40ch;margin-bottom:44px}
.faq .head .eyebrow{color:var(--wine);display:block;margin-bottom:14px}
.faq .head h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--green)}
.faq .q{border-top:1px solid rgba(67,83,76,.14);padding:26px 0}
.faq .q:last-child{border-bottom:1px solid rgba(67,83,76,.14)}
.faq .q h3{font-size:1.1rem;color:var(--green);margin-bottom:8px}
.faq .q p{color:#5f544e;font-size:1.02rem;max-width:66ch}
@media(max-width:900px){
 .gets .wrap,.forwho .wrap{grid-template-columns:1fr;gap:30px}
 .gets,.asks,.forwho,.faq{padding:66px 0}
}

/* ============ PORTFOLIO GRID ============ */
.pf{padding:110px 0 120px;background:var(--bone)}
.pf .head{max-width:52ch;margin-bottom:20px}
.pf .head .eyebrow{color:var(--wine);display:block;margin-bottom:16px}
.pf .head h1{font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--green)}
.pf .head h1 em{color:var(--wine)}
.pf .head p{color:#5f544e;font-size:1.08rem;margin-top:16px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:34px 0 44px}
.filters button{font-family:var(--display);text-transform:uppercase;letter-spacing:.13em;font-size:.68rem;font-weight:600;
padding:11px 18px;border-radius:999px;border:1.5px solid rgba(67,83,76,.24);background:transparent;color:var(--green);cursor:pointer;transition:.2s}
.filters button:hover{border-color:var(--wine);color:var(--wine)}
.filters button.on{background:var(--wine);border-color:var(--wine);color:var(--cream-fixed)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;display:flex;flex-direction:column;
justify-content:flex-end;padding:26px;color:var(--cream-fixed);text-decoration:none;isolation:isolate}
.pcard .bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pcard:hover .bg{transform:scale(1.07)}
.pcard .sc{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(36,29,27,.06) 30%,rgba(36,29,27,.86) 88%)}
.pcard .kind{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.6rem;color:var(--mauve);margin-bottom:8px}
.pcard h3{font-size:1.24rem;line-height:1.15}
.pcard .cnt{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.6rem;color:var(--cream-70);margin-top:8px}
.pcard.hide{display:none}
@media(max-width:980px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}.pf{padding:90px 0}}

/* ============ SPLIT SECTION (text + image) ============ */
.split{padding:110px 0;background:var(--bone)}
.split.white{background:#fff;border-top:1px solid rgba(67,83,76,.08);border-bottom:1px solid rgba(67,83,76,.08)}
.split .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.split.flip .wrap{direction:rtl}.split.flip .wrap>*{direction:ltr}
.split .eyebrow{color:var(--wine);display:block;margin-bottom:16px}
.split h2{font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--green);margin-bottom:20px}
.split h2 em{color:var(--wine)}
.split p{color:#5f544e;font-size:1.06rem}
.split p+p{margin-top:14px}
.split ul{margin:18px 0 0 20px;color:#5f544e}
.split li{margin-bottom:10px;font-size:1.03rem}
.split .shot{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background-size:cover;background-position:center;
box-shadow:0 30px 60px -34px rgba(36,29,27,.45)}
.split .shot.tall{aspect-ratio:4/5}

/* ============ SEE IT IN ACTION (case-study link band) ============ */
.inaction{position:relative;padding:0;overflow:hidden;background:var(--ink-fixed)}
.inaction a{display:grid;grid-template-columns:1.1fr .9fr;min-height:340px;text-decoration:none;color:var(--cream-fixed);align-items:center}
.inaction .tx{padding:64px 0 64px 0;position:relative;z-index:2}
.inaction .wrapin{max-width:1200px;margin:0 auto;padding:0 32px;width:100%}
.inaction .eyebrow{color:var(--mauve);display:block;margin-bottom:14px}
.inaction h2{font-size:clamp(1.6rem,2.8vw,2.2rem);max-width:22ch;margin-bottom:14px}
.inaction p{color:var(--cream-85);max-width:44ch;font-size:1.02rem}
.inaction .go{display:inline-block;margin-top:20px;font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;
font-size:.71rem;border-bottom:1.5px solid var(--mauve);padding-bottom:4px}
.inaction .shot{position:absolute;right:0;top:0;bottom:0;width:44%;background-size:cover;background-position:center;z-index:0}
.inaction .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink-fixed),rgba(36,29,27,.25) 45%,rgba(36,29,27,.5))}
.inaction .play{position:absolute;right:20%;top:50%;transform:translate(50%,-50%);width:70px;height:70px;border-radius:50%;
background:rgba(237,234,220,.92);display:flex;align-items:center;justify-content:center;z-index:3}
.inaction .play::after{content:"";border-left:19px solid var(--wine);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
@media(max-width:900px){
 .split .wrap{grid-template-columns:1fr;gap:34px}.split.flip .wrap{direction:ltr}
 .split{padding:70px 0}
 .inaction a{grid-template-columns:1fr;min-height:0}
 .inaction .shot{position:relative;width:100%;height:220px}
 .inaction .shot::after{background:linear-gradient(180deg,rgba(36,29,27,.2),rgba(36,29,27,.75))}
 .inaction .tx{padding:44px 0}
 .inaction .play{right:50%;top:110px}
}

/* ============================================================================
   THEME-ADAPTIVE (Braden 2026-08-07): the whole site follows the device.
   Light is the default for the marketing pages; dark mode flips the surfaces.
   The plum accent is IDENTICAL in both modes, brand-locked.
   ============================================================================ */
@media (prefers-color-scheme:dark){
 :root{
  --bone:#141013;              /* page background flips dark */
  --ink:#F4F0E7;               /* body text flips cream */
  --green:#EDE7DC;             /* headings read cream on dark */
  --cream-70:rgba(244,240,231,.7);
  --cream-85:rgba(244,240,231,.85);
 }
 body{background:#141013;color:#F4F0E7}
 .value,.offers,.final,.prose,.timeline,.system,.forwho,.pf,.origin{background:#141013}
 .guide,.gets,.faq,.fits,.split.white{background:#1e181c;border-color:rgba(244,240,231,.1)}
 .vc,.forwho .col{background:#1e181c;box-shadow:none;border:1px solid rgba(244,240,231,.09)}
 .vc h3,.gets h2,.faq .head h2,.faq .q h3,.fits h2,.forwho h3,.split h2,.timeline .head h2,
 .system .head h2,.value .head h2,.offers .head h2,.final h2,.prose h2,.prose h3,.stub h1{color:#EDE7DC}
 .vc p,.gets li,.faq .q p,.fits .row p,.forwho p,.split p,.split li,.prose p,.prose li,
 .tl .item p,.layer p,.stub p,.origin p{color:rgba(244,240,231,.78)}
 .origin .signature img{mix-blend-mode:normal;filter:invert(1) brightness(1.8)}
 .gets li{border-color:rgba(244,240,231,.14)}
 .gets li strong,.fits .row p strong,.layer h3,.tl .item h3{color:#EDE7DC}
 .fits .row,.faq .q{border-color:rgba(244,240,231,.14)}
 .fits .closer,.system .foot{color:rgba(244,240,231,.86)}
 .layer{background:#1e181c}
 .forwho .col.no{background:transparent;border-color:rgba(244,240,231,.2)}
 .final{background:radial-gradient(80% 120% at 50% 0%,rgba(128,49,78,.22),transparent 62%),#141013}
 .final .sub{color:rgba(244,240,231,.66)}
 
 
 
 .timeline .tl::before{background:rgba(128,49,78,.4)}
 .tl .item::before{background:#141013}
}
/* The dark cinematic pages (portfolio, case studies) flip LIGHT on light devices,
   exactly as the original Wix elements did. */
@media (prefers-color-scheme:light){
 .pfpage,.cs{--ink:#F1EEE6;--cream:#1c1a1a;--fg-soft:rgba(28,26,26,.76);--fg-mute:rgba(28,26,26,.5);
  --fg-rgb:28,26,26;--surface:#fff;--line:rgba(28,26,26,.16)}
 .pfpage .card h3,.pfpage .card .type,.pfpage .card .view{color:#fff}   /* card text sits on photos */
 .cs .hero .q,.cs .close h2,.cs .pin .panel p,.cs .pull q{color:#fff}   /* immersive surfaces stay dark by design */
}

/* ============================================================================
   TWO SITE-WIDE FIXES (2026-08-07), found during the case-study ports.

   BUG 3 — the logo vanished on a solid nav. assets/logo.png is the WHITE mark
   (averages ~190,190,190). Over the transparent nav on a dark hero it is right,
   but nav.solid is bone, so it disappeared on scroll on every page. The nav now
   swaps to the real black logo asset when solid in light mode, and back to the
   white one in dark mode. No filter hacks.

   BUG 4 — the footer went cream-on-cream in dark mode. footer{background:
   var(--ink)} while the dark block flips --ink to cream, so background and text
   became the same color. The footer now uses its own fixed token.
   ============================================================================ */



/* ============================================================================
   SITE-WIDE FIX (2026-08-12) — mobile dark-mode pass. Braden's wife found this
   on her Pixel: the hamburger disappeared on the homepage, and headline text on
   every colored/photo band (hero, stakes, plan, webinar, proof, rhythm, asks,
   ctabar, offer + portfolio cards, the inaction band) went dark-on-dark or
   flipped its band color. Exact same root cause as BUG 4 above, just never
   swept site-wide: --bone/--ink/--green each do two jobs — (a) the page's own
   light/dark theme token, which SHOULD flip with prefers-color-scheme, and
   (b) a fixed light-or-dark decorative color for bands and photo overlays that
   never change with the visitor's device theme. When dark mode flips (a),
   every (b) usage broke with it. Fixed, non-flipping tokens below; every
   decorative-band usage switched to them. Content and layout untouched. */
:root{
  --cream-fixed:#EDEADC;  /* light text/icon, always, on wine/green/photo bands */
  --ink-fixed:#241d1b;    /* dark backdrop, always, for stakes/proof/inaction bands */
  --green-fixed:#43534C;  /* dark green backdrop, always, for plan/rhythm bands */
}

/* logo swap: two <img> in the nav, only one visible at a time */





@media (prefers-color-scheme:dark){
 
 /* on a dark device the solid nav is dark too, so keep the white mark */
 
 
}

/* logo is a link home. NOTE: do not set display on the imgs here; the
   light/dark swap above owns that, and a blanket rule re-shows both. */


/* Visually-hidden headings: present for search engines and screen readers,
   invisible on screen. The case studies use a styled pull-quote as their visual
   headline by design, so the real <h1> is carried here instead. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the primary ask on the replay page, directly under the film */
/* Centered under the player. Was left-flush because the block sat OUTSIDE .wrap
   and flex defaults to flex-start; it is now inside .wrap and explicitly centred. */
.under-video{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;text-align:center}
.under-video .uv-line{font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--green);margin:0}
@media (prefers-color-scheme:dark){.under-video .uv-line{color:#EDE7DC}}

/* mid-page CTA bar: keeps the ask within about a screen on long pages */
.ctabar{background:var(--wine);color:var(--cream-fixed);padding:38px 0}
.ctabar .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.ctabar p{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.5rem);margin:0;max-width:32ch}
.ctabar .btn{background:var(--cream-fixed);color:var(--wine);flex-shrink:0}
.ctabar .btn:hover{background:#fff}
@media(max-width:700px){.ctabar .wrap{flex-direction:column;align-items:flex-start}}

/* ============ NAV DROPDOWNS ============ */
/* the dropdown parents must sit on the SAME baseline as the plain links, so
   they are flex items styled identically, not inline spans. */











/* hover bridge so the panel does not vanish between the link and the menu */


/* REMOVED 2026-08-07: this used to be `@media(max-width:900px){nav .menu{display:none}}`,
   which made sense when there was no mobile menu at all. It now sits AFTER the mobile-nav
   block and, at equal specificity, silently beat its `nav .menu{display:block}`, so the
   hamburger opened a menu with the sub-pages missing: Services and Free resources showed
   a caret with nothing under them. The mobile block owns .menu now. */

/* inline CTA that sits directly under a section's content */
.cta-inline{text-align:center;padding:0 0 var(--pad,0)}
.cta-inline.after-dark{background:var(--ink-fixed);padding:0 0 60px}
.cta-inline.on-bone{background:var(--bone);padding:6px 0 90px}
.cta-inline.on-white{background:#fff;padding:0 0 90px}
@media (prefers-color-scheme:dark){
 .cta-inline.on-bone{background:#141013}
 .cta-inline.on-white{background:#1e181c}
}

/* ============================================================================
   BUG: dropdown menu text was invisible on pages with a transparent nav.
   Cause: `nav .links a:not(.btn){color:var(--bone)}` scores (0,2,2) and beat
   `nav .menu a` at (0,1,2), so menu links inherited cream on a cream panel.
   Fix: match the menu links at equal-or-higher specificity, after that rule.
   ============================================================================ */






/* CTA placed INSIDE the stakes section, over the photograph */
.stakes-cta{margin-top:34px}
/* both CTAs under the guide paragraph, left aligned, no proof strip */
.guide-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.guide-cta .btn.wineghost{background:transparent;border:1.5px solid var(--wine);color:var(--wine)}
.guide-cta .btn.wineghost:hover{background:var(--wine);color:var(--cream-fixed)}
@media (prefers-color-scheme:dark){
 .guide-cta .btn.wineghost{border-color:#C0A19F;color:#EDE7DC}
 .guide-cta .btn.wineghost:hover{background:#C0A19F;color:#141013}
}
/* tighter buffer where a CTA follows a grid */
.cta-inline.on-bone.tight{padding:0 0 74px;margin-top:-38px}
.cta-inline.on-white.tight{padding:0 0 74px;margin-top:-38px}

/* Native select controls: keep the OS accent from painting the open option list
   in the system color (it was rendering purple). accent-color + explicit option
   colors give a neutral, on-brand list in both themes. */
select{accent-color:#80314E}
select option{background:#fff;color:#241d1b}
@media (prefers-color-scheme:dark){
 select option{background:#1e181c;color:#F4F0E7}
}

/* ============================================================================
   MOBILE NAV. Deliberately placed at the END of this file.
   It was originally up in the first @media(max-width:900px) block, and it did not
   work: the base nav rules (nav .menu{position:absolute}, and a stray
   nav .menu{display:none}) are defined LOWER in the file, and at equal specificity
   the later rule wins. The hamburger opened a menu whose sub-pages were invisible.
   Keeping this last means source order does the work and no !important arms race
   is needed. If you add nav CSS below this, check it does not re-break the panel.
   ============================================================================ */


/* ============================================================================
   ADDED 2026-09-24 (branch system-pages): the offer pages and the scorecard
   pop-up. Section styles first, the pop-up last. Nothing above was changed.
   ============================================================================ */

/* The house: five rooms as stacked layers. Reuses .system/.layers; the fifth
   layer needs its own offset because the DCS page only ever had four. */
.layer:nth-child(5){margin-left:104px}
.layer .q{display:block;margin-top:6px;font-family:var(--serif);font-style:italic;color:var(--wine);font-size:1rem}
@media(max-width:900px){.layer:nth-child(5){margin-left:0}}
@media (prefers-color-scheme:dark){.layer .q{color:#C0A19F}}

/* The compact house list used beside prose on the home page */
.house{list-style:none;margin:0;padding:0}
.house li{padding:16px 0;border-top:1px solid rgba(67,83,76,.14)}
.house li:last-child{border-bottom:1px solid rgba(67,83,76,.14)}
.house .room{display:block;font-family:var(--display);text-transform:uppercase;letter-spacing:.16em;font-size:.62rem;color:var(--wine);margin-bottom:5px}
.house p{font-size:.98rem;color:#5f544e;max-width:40ch}
.house .q{display:block;margin-top:5px;font-family:var(--serif);font-style:italic;color:var(--green);font-size:.98rem}
@media (prefers-color-scheme:dark){.house li{border-color:rgba(244,240,231,.14)}.house p{color:rgba(244,240,231,.78)}.house .q{color:#EDE7DC}}

/* The path: five steps with a price on each. Light section, open rows. */
.pricing{padding:110px 0;background:#fff;border-top:1px solid rgba(67,83,76,.08)}
.pricing .head{max-width:46ch;margin-bottom:44px}
.pricing .head .eyebrow{color:var(--wine);display:block;margin-bottom:16px}
.pricing .head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);color:var(--green)}
.pricing .head h2 em{color:var(--wine)}
.pricing .row{display:grid;grid-template-columns:.9fr 1.6fr .7fr;gap:26px;padding:24px 0;border-top:1px solid rgba(67,83,76,.14);align-items:baseline}
.pricing .row:last-of-type{border-bottom:1px solid rgba(67,83,76,.14)}
.pricing .row .step{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;color:var(--wine);display:block;margin-bottom:4px}
.pricing .row h3{font-size:1.2rem;color:var(--green)}
.pricing .row p{color:#5f544e;font-size:1.02rem;max-width:56ch}
.pricing .row .price{font-family:var(--serif);font-size:1.3rem;color:var(--green);text-align:right}
.pricing .row .price small{display:block;font-family:var(--caps);font-size:.8rem;color:#8b7f78;margin-top:3px}
.pricing .foot{margin-top:30px;color:#5f544e;font-size:1rem;max-width:66ch}
.pricing .foot a{color:var(--wine)}
@media(max-width:900px){.pricing{padding:70px 0}.pricing .row{grid-template-columns:1fr;gap:8px}.pricing .row .price{text-align:left}}
@media (prefers-color-scheme:dark){
 .pricing{background:#1e181c;border-color:rgba(244,240,231,.1)}
 .pricing .head h2,.pricing .row h3,.pricing .row .price{color:#EDE7DC}
 .pricing .row p,.pricing .foot{color:rgba(244,240,231,.78)}
 .pricing .row{border-color:rgba(244,240,231,.14)}
}

/* The refusal band reuses .asks; the three promises sit under it as a list */
.asks .promises{list-style:none;max-width:56ch;margin:30px auto 0;text-align:left;padding:0}
.asks .promises li{padding:14px 0 14px 30px;border-top:1px solid rgba(237,234,220,.25);position:relative;color:var(--cream-85);font-size:1.02rem}
.asks .promises li:last-child{border-bottom:1px solid rgba(237,234,220,.25)}
.asks .promises li::before{content:"";position:absolute;left:0;top:23px;width:14px;height:2px;background:var(--cream-fixed)}
.asks .promises strong{color:#fff;font-weight:600}

/* The one-line cross-link inside a case study's closing band */
.cs .close .xlink{margin:0 0 22px;font-family:var(--caps);font-size:1rem;color:rgba(244,240,231,.8);max-width:52ch}
.cs .close .xlink a{color:#fff}
.pfpage .close .xlink{margin:14px 0 22px;font-family:var(--caps);font-size:1rem;color:var(--fg-soft)}
.pfpage .close .xlink a{color:var(--wine-lift)}

/* The ctabar's plain-text link variant (used for the one-line cross-links) */
.ctabar p a{color:#fff}

/* ============ THE SCORECARD POP-UP ============
   Injected by site.js on every page except the ones the script excludes.
   A card in the corner on desktop, a bottom sheet on a phone. Never a modal:
   it never covers the page, never traps focus, and one tap dismisses it. */
.qpop{position:fixed;right:24px;bottom:24px;z-index:200;width:min(400px,calc(100% - 32px));
background:#fff;color:var(--ink);border-radius:16px;padding:26px 26px 24px;
box-shadow:0 34px 80px -30px rgba(36,29,27,.55),0 0 0 1px rgba(67,83,76,.1);
opacity:0;transform:translateY(18px);visibility:hidden;
transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1),visibility .35s}
.qpop.on{opacity:1;transform:none;visibility:visible}
.qpop .eyebrow{color:var(--wine);display:block;margin-bottom:10px}
.qpop h3{font-size:1.28rem;color:var(--green);margin-bottom:10px;max-width:22ch}
.qpop p{font-size:.95rem;color:#5f544e;margin-bottom:18px;max-width:40ch}
.qpop .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.qpop .btn{padding:13px 22px;font-size:.7rem}
.qpop .later{background:none;border:0;cursor:pointer;font-family:var(--display);text-transform:uppercase;
letter-spacing:.14em;font-size:.68rem;color:#8b7f78;padding:10px 4px}
.qpop .later:hover{color:var(--wine)}
.qpop .x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;background:none;cursor:pointer;
color:#8b7f78;font-size:22px;line-height:36px;text-align:center;border-radius:50%}
.qpop .x:hover{background:rgba(128,49,78,.09);color:var(--wine)}
@media(max-width:700px){
 .qpop{left:0;right:0;bottom:0;width:100%;border-radius:18px 18px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));
 transform:translateY(100%)}
 .qpop.on{transform:none}
 .qpop .row{flex-direction:column;align-items:stretch}
 .qpop .btn{text-align:center}
}
@media (prefers-reduced-motion:reduce){.qpop{transition:none}}
@media (prefers-color-scheme:dark){
 .qpop{background:#1e181c;color:#F4F0E7;box-shadow:0 34px 80px -30px rgba(0,0,0,.7),0 0 0 1px rgba(244,240,231,.12)}
 .qpop h3{color:#EDE7DC}.qpop p{color:rgba(244,240,231,.78)}
}

/* ============================================================================
   30 Sep 2026 (Braden's read-through): the top menu's links sit on the true center of
   the page, with the logo at the far left and the button at the far right. Desktop only;
   the phone menu below 900px is unchanged. Same rule as minimal.css, so every page matches.
   Also centers the one-line cross-link under a work page's closing headline.
   ============================================================================ */

.pfpage .close .xlink{margin-left:auto;margin-right:auto}
.cs .close .xlink{margin-left:auto;margin-right:auto}
/* The plain (no photo) closing band on some work pages turns light on a light device, so its cross-link needs dark text there. */
@media (prefers-color-scheme:light){.cs .narrow.close .xlink{color:rgba(28,26,26,.74)}.cs .narrow.close .xlink a{color:#80314E}}