/* Bluebird Creatives, bbirdcreativesco.com. Stage black, brass, cerulean, Swiss Coffee bands. Bodoni Moda + Archivo. */
:root{
  --deep:#06080F;      /* header, footer */
  --bg:#0B0E17;        /* page ground: stage black, a hair of blue */
  --raise:#0E1B3F;     /* navy band */
  --surface:#151928;   /* cards on black */
  --surface2:#1C2136;  /* image wells */
  --fg:#F4EFE6; --fg2:#C9C5BC; --fg3:#948F86;
  --acc:#2F7CF6; --acc-ink:#FFFFFF;
  --brass:#E2B04A; --brass-soft:rgba(226,176,74,.14);
  --line:rgba(244,239,230,.13); --line2:rgba(244,239,230,.26);
  --cream:#F1ECE1; --cream-2:#E7E0D2; --cream-ink:#121212; --cream-muted:#5A5650; --cream-line:rgba(18,18,18,.14); --brass-deep:#8F6E1B; --acc-deep:#1F5FCC;
  --glow1:rgba(226,176,74,.22); --glow2:rgba(47,124,246,.22);
  --deep-ink:#F4EFE6; --deep-muted:#948F86; --brass-text:var(--brass);
  --band-bg:#F1ECE1; --band-ink:#121212; --band-muted:#5A5650; --band-accent:#8F6E1B; --band-line:rgba(18,18,18,.14);
  --band-card:#FFFFFF; --band-card-ink:#121212; --band-card-muted:#5A5650; --band-card-accent:#8F6E1B;
  --shadow:0 44px 70px -26px rgba(0,0,0,.8); --tile-shadow:0 12px 30px -18px rgba(0,0,0,.85);
  --f-display:"DM Serif Display",Georgia,serif; --fw-display:400; --ls-display:-.005em;
  --f-wm:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --f-body:"Newsreader",Georgia,serif; --fs-body:16px; --lh-body:1.6;
  --f-label:"DM Mono","SF Mono",Menlo,monospace; --fs-label:11.5px; --ls-label:.08em;
  --wrap:1160px; --pad:40px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:80px; --s7:104px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:var(--fs-body); line-height:var(--lh-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img{ max-width:100%; height:auto; display:block; }
video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:var(--fw-display); text-wrap:balance; margin:0; hyphens:none; letter-spacing:var(--ls-display); }
h1 em, h2 em, h3 em{ font-style:var(--em-style, italic); font-weight:inherit; color:var(--acc); }
p{ text-wrap:pretty; margin:0; }
ul,ol{ margin:0; padding:0; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.skip{ position:absolute; left:-999px; top:8px; background:var(--acc); color:var(--acc-ink); padding:8px 12px; z-index:100; }
.skip:focus{ left:8px; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ---------- type roles ---------- */
.mono, .meta, .eyebrow, .lab, .k{ font-family:var(--f-label); font-weight:500; font-size:var(--fs-label); letter-spacing:var(--ls-label); text-transform:uppercase; }
.mono{ color:var(--fg3); font-weight:400; letter-spacing:.02em; text-transform:none; font-size:13px; }
.meta{ color:var(--fg3); }
a.meta:hover{ color:var(--brass); }
.eyebrow{ color:var(--brass-text); margin:0 0 var(--s2); display:flex; align-items:center; gap:12px; }
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--brass); flex:none; }
.lead{ font-size:calc(var(--fs-body) + 3px); line-height:1.55; color:var(--fg2); max-width:54ch; font-weight:400; }
.small{ font-size:15px; }

/* ---------- wordmark ---------- */
.wm{ font-family:var(--f-wm); font-weight:800; font-size:21px; letter-spacing:-.025em; white-space:nowrap; color:inherit; }
.wm i{ display:inline-block; width:8px; height:8px; background:var(--acc); margin-left:4px; }
.wm.small{ font-size:17px; }
.wm-a{ display:none; }
.wm-a{ font-family:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif; font-weight:700; font-size:22px; letter-spacing:.14em; text-transform:uppercase; line-height:1; flex-direction:column; align-items:flex-start; }
.wm-a small{ display:block; font-family:"Archivo","Helvetica Neue",Arial,sans-serif; font-weight:600; font-size:9px; letter-spacing:.36em; color:var(--brass); margin-top:5px; padding-left:2px; }
.wm.small .wm-a{ font-size:18px; }
.wm.small .wm-a small{ font-size:8px; }
html[data-wm="a"] .wm-b{ display:none; }
html[data-wm="a"] .wm-a{ display:inline-flex; }

/* ---------- buttons ---------- */
.btn{ font-family:var(--f-label); font-weight:500; font-size:12px; letter-spacing:var(--ls-label); text-transform:uppercase; padding:14px 22px; border-radius:2px; white-space:nowrap; display:inline-block; border:1px solid transparent; cursor:pointer; line-height:1.2; transition:background .15s ease, color .15s ease, transform .15s ease; }
.btn.ghost{ border-color:var(--brass); color:var(--brass); background:transparent; }
.btn.ghost:hover{ background:var(--brass); color:var(--cream-ink); }
.btn.solid{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); }
.btn.solid:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn.brass{ background:var(--brass); color:var(--cream-ink); border-color:var(--brass); }
.link{ font-family:var(--f-label); font-weight:500; font-size:12px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--fg); border-bottom:1px solid var(--brass); padding-bottom:4px; }
.link:hover{ color:var(--brass); }

/* ---------- nav ---------- */
.nav{ background:var(--deep); color:var(--deep-ink); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.nav-in{ display:flex; align-items:center; gap:32px; padding-top:18px; padding-bottom:18px; }
.menu{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.menu ul{ list-style:none; display:flex; gap:30px; font-family:var(--f-label); font-size:12px; font-weight:500; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--deep-ink); opacity:.78; }
.menu ul a{ padding-bottom:4px; border-bottom:1px solid transparent; }
.menu a[aria-current="page"]{ opacity:1; border-bottom-color:var(--brass); }
.menu ul a:hover{ opacity:1; }
.nav-toggle{ display:none; margin-left:auto; background:transparent; border:1px solid var(--line2); color:var(--deep-ink); font:500 12px var(--f-label); letter-spacing:var(--ls-label); text-transform:uppercase; padding:10px 14px; border-radius:2px; }

/* ---------- sections ---------- */
.sec{ padding:var(--s6) 0; }
.sec.raise{ background:var(--raise); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.packs .pack{ background:#142452; border-color:rgba(244,239,230,.16); }
.packs .pack.hot{ border-color:var(--brass); }
.sec.cream{ background:var(--band-bg); color:var(--band-ink); }
.sec.cream .eyebrow, .sec.cream .lab, .sec.cream .k{ color:var(--band-accent); }
.sec.cream .eyebrow::before{ background:var(--band-accent); }
.sec.cream .meta, .sec.cream .mono{ color:var(--band-muted); }
.sec.cream a.meta:hover{ color:var(--band-ink); }
.sec.cream .lead, .sec.cream p{ color:var(--band-muted); }
.sec.cream h1, .sec.cream h2, .sec.cream h3{ color:var(--band-ink); }
.sec.cream .link{ color:var(--band-ink); border-bottom-color:var(--band-accent); }
.sec.cream .link:hover{ color:var(--band-accent); }
.sec.cream .btn.ghost{ border-color:var(--band-ink); color:var(--band-ink); }
.sec.cream .btn.ghost:hover{ background:var(--band-ink); color:var(--band-bg); }
.head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:var(--s5); flex-wrap:wrap; }
.head h2{ font-size:38px; line-height:1.06; }
.head .eyebrow{ margin-bottom:12px; }
.head p{ max-width:56ch; color:var(--fg2); margin-top:12px; font-size:16px; }

/* ---------- hero ---------- */
.hero{ background:radial-gradient(ellipse 52% 72% at 84% 12%, var(--glow1), transparent 62%), radial-gradient(ellipse 44% 56% at 4% 100%, var(--glow2), transparent 60%); }
.hero-in{ display:grid; grid-template-columns:1.12fr .88fr; gap:64px; padding-top:var(--s7); padding-bottom:var(--s7); align-items:center; }
.hero h1{ font-size:clamp(38px,4.4vw,56px); line-height:1.06; margin:0 0 var(--s3); max-width:18ch; }
.hero .lead{ max-width:48ch; margin-bottom:var(--s4); }
.ctas{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.card{ display:block; background:var(--surface); border:1px solid var(--line2); border-radius:4px; overflow:hidden; box-shadow:var(--shadow); transform:rotate(-1.6deg); transition:transform .3s ease, border-color .25s ease; }
.card:hover{ transform:rotate(0) translateY(-3px); border-color:var(--brass); }
.card-bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--deep); color:var(--deep-ink); }
.card-bar span{ width:8px; height:8px; border-radius:50%; background:var(--deep-muted); opacity:.8; }
.card-bar em{ font-style:normal; font-family:var(--f-label); font-weight:400; font-size:12px; color:inherit; opacity:.85; margin-left:8px; letter-spacing:.06em; }
.card-shot img, .card-shot video{ aspect-ratio:16/10; object-fit:cover; object-position:top; width:100%; display:block; }
.card-cap{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; font-family:var(--f-label); font-size:12px; font-weight:400; color:var(--fg2); letter-spacing:.02em; }
.card-cap b{ color:var(--brass-text); font-weight:500; font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; }

/* ---------- services ---------- */
.services{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.svc{ background:var(--band-card); color:var(--band-card-ink); border:1px solid var(--band-line); border-radius:4px; padding:30px 30px 26px; display:flex; flex-direction:column; gap:12px; transition:border-color .2s ease, transform .2s ease; }
.svc:hover{ border-color:var(--band-card-accent); transform:translateY(-3px); }
.svc .lab{ color:var(--band-card-accent); }
.svc h3{ font-size:27px; line-height:1.12; }
.svc p{ color:var(--band-card-muted); font-size:15px; line-height:1.6; }
.svc .from{ margin-top:auto; padding-top:16px; border-top:1px solid var(--band-line); display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.svc .from b{ font-family:var(--f-display); font-weight:500; font-size:24px; }
.svc .from b small{ font-family:var(--f-label); font-weight:500; font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--band-card-muted); margin-right:8px; }
.svc .link{ color:var(--band-card-ink); border-bottom-color:var(--band-card-accent); font-size:11px; }
.svc-note{ margin-top:var(--s4); font-size:15px; max-width:70ch; }

/* ---------- tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.group .tiles.wide{ grid-template-columns:repeat(3,1fr); }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:3px; overflow:hidden; box-shadow:var(--tile-shadow); display:flex; flex-direction:column; transition:transform .2s ease, border-color .2s ease; }
.tile:hover{ transform:translateY(-3px); border-color:var(--brass); }
.tile .th{ background:var(--surface2); border-bottom:1px solid var(--line); overflow:hidden; }
.tile .th img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.tile .lab{ color:var(--brass-text); padding:14px 16px 6px; font-size:10px; }
.tile .nm{ font-family:var(--f-display); font-weight:500; font-size:19px; padding:0 16px 14px; line-height:1.2; overflow-wrap:anywhere; }
.tile .dl{ font-size:14px; color:var(--fg2); padding:0 16px 16px; margin-top:-8px; line-height:1.55; }

/* ---------- packages ---------- */
.pack-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pack{ background:var(--surface); color:var(--fg); border:1px solid var(--line); border-radius:3px; padding:28px 28px 22px; display:flex; flex-direction:column; gap:8px; }
.pack.hot{ border-color:var(--brass); box-shadow:0 0 0 1px var(--brass) inset; }
.pack .lab{ color:var(--brass-text); }
.pack .price{ font-family:var(--f-display); font-weight:500; font-size:44px; line-height:1.05; font-variant-numeric:lining-nums tabular-nums; margin:6px 0 2px; }
.pack .price small{ font-family:var(--f-label); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--fg3); margin-left:10px; }
.sec.cream .pack .price small{ color:var(--band-card-muted); }
.care .head p{ max-width:60ch; }
.inc{ background:var(--surface); color:var(--fg); border-color:var(--line); }
.inc b{ color:var(--fg); }
.inc p{ color:var(--fg2); }
.sec.cream .inc{ background:var(--band-card); color:var(--band-card-ink); border-color:var(--band-line); }
.sec.cream .inc b{ color:var(--band-card-ink); }
.sec.cream .inc p{ color:var(--band-card-muted); }
.sec.cream .steps li{ background:var(--band-card); color:var(--band-card-ink); border-color:var(--band-line); box-shadow:0 18px 38px -22px rgba(18,18,18,.45); }
.sec.cream .steps li::before{ color:var(--band-card-accent); }
.sec.cream .steps p{ color:var(--band-card-muted); }
.pack p{ font-size:14.5px; line-height:1.6; color:var(--fg2); margin:2px 0 10px; max-width:34ch; }
.pack .time{ margin-top:auto; color:var(--fg3); font-family:var(--f-label); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; font-weight:500; }
.pack.detail ul{ list-style:none; margin:2px 0 16px; display:grid; gap:8px; font-size:14.5px; }
.pack.detail li{ padding-left:18px; position:relative; line-height:1.5; }
.pack.detail li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--acc); }
.pack.detail .btn{ margin-top:16px; align-self:flex-start; }
.pack.detail .rev{ font-size:13.5px; }
.addons{ margin:var(--s3) 0 0; line-height:1.8; font-size:14px; color:var(--fg2); }
.addons .k{ color:var(--brass-text); margin-right:8px; }
.addons a{ color:var(--fg); border-bottom:1px solid var(--brass); font-weight:600; }
/* cream ground variant */
.sec.cream .pack{ background:var(--band-card); color:var(--band-card-ink); border-color:var(--band-line); }
.sec.cream .pack.hot{ border-color:var(--band-card-accent); box-shadow:0 0 0 1px var(--band-card-accent) inset; }
.sec.cream .pack .lab{ color:var(--band-card-accent); }
.sec.cream .pack p, .sec.cream .pack .rev{ color:var(--band-card-muted); }
.sec.cream .pack .time{ color:var(--band-card-muted); }
.sec.cream .addons{ color:var(--band-muted); }
.sec.cream .addons .k{ color:var(--band-accent); }
.sec.cream .addons a{ color:var(--band-ink); border-bottom-color:var(--band-accent); }

/* ---------- about teaser ---------- */
.about-in{ display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:center; }
.portrait img{ aspect-ratio:3/4; object-fit:cover; border-radius:3px; border:1px solid var(--line2); box-shadow:0 24px 40px -24px rgba(0,0,0,.5); }
.about-teaser h3{ font-size:34px; line-height:1.1; margin:0 0 14px; }
.about-teaser p:not(.eyebrow){ font-size:16px; line-height:1.65; max-width:58ch; margin:0 0 20px; color:var(--fg2); }

/* ---------- footer ---------- */
.foot{ background:var(--deep); color:var(--deep-ink); border-top:1px solid var(--line); }
.foot .mono, .foot .copy{ color:var(--deep-muted); }
.foot-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:30px; padding-bottom:18px; flex-wrap:wrap; }
.foot .mono{ font-size:13px; letter-spacing:.04em; }
.foot a:hover{ color:var(--brass); }
.copy{ padding-bottom:32px; font-size:12px; }

/* ---------- page heads ---------- */
.pagehead{ padding:var(--s6) 0 var(--s5); background:radial-gradient(ellipse 50% 70% at 90% 10%, var(--glow1), transparent 60%); }
.pagehead h1{ font-size:clamp(40px,5vw,64px); line-height:1.02; margin:0 0 var(--s3); max-width:18ch; }
.pagehead .lead{ max-width:58ch; }
.pagehead .ctas{ margin-top:var(--s4); }
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-top:var(--s3); }
.filters button{ font:500 11px var(--f-label); letter-spacing:var(--ls-label); text-transform:uppercase; padding:9px 14px; border:1px solid var(--line2); border-radius:999px; color:var(--fg2); background:transparent; cursor:pointer; }
.filters button.on{ background:var(--brass); color:var(--cream-ink); border-color:var(--brass); }
.group{ padding:var(--s4) 0 var(--s2); }
.group[hidden]{ display:none; }

/* ---------- case ---------- */
.case-head{ padding-bottom:var(--s4); }
.case-lead img{ width:100%; border-radius:4px; border:1px solid var(--line2); box-shadow:var(--shadow); }
.case-body{ display:grid; grid-template-columns:1.5fr 1fr; gap:56px; padding:var(--s5) 0 var(--s2); }
.case-text h2, .case-clips h2, .case-pages h2, .case-gallery h2{ font-size:30px; }
.case-text p{ font-size:17px; line-height:1.7; color:var(--fg2); margin-top:16px; max-width:58ch; }
.case-facts dl{ margin:0; background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:24px 26px; display:grid; gap:16px; }
.case-facts dt{ color:var(--brass-text); font-family:var(--f-label); font-weight:500; font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; }
.case-facts dd{ margin:0 0 6px; font-size:15px; line-height:1.55; }
.case-facts ul{ list-style:none; display:grid; gap:5px; }
.case-facts li{ padding-left:16px; position:relative; }
.case-facts li::before{ content:""; position:absolute; left:0; top:.66em; width:6px; height:6px; background:var(--acc); }
.case-facts a{ border-bottom:1px solid var(--brass); font-weight:600; }
.case-clips, .case-pages, .case-gallery{ padding-top:var(--s5); }
.clips{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; align-items:start; }
.clip{ margin:0; background:var(--surface); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.clip img, .clip video{ width:100%; display:block; }
.clip figcaption, .gallery figcaption{ font-size:14px; color:var(--fg2); padding:12px 16px 14px; line-height:1.55; }
.browsers{ display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:18px; }
.browsers:has(> :only-child){ grid-template-columns:1fr; }
.browser{ margin:0; background:var(--surface); border:1px solid var(--line2); border-radius:4px; overflow:hidden; }
.browser .bar{ display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--deep); color:var(--deep-ink); }
.browser .bar span{ width:8px; height:8px; border-radius:50%; background:var(--deep-muted); opacity:.8; }
.browser .bar em{ font-style:normal; font-weight:500; font-size:12px; color:inherit; opacity:.85; margin-left:8px; letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browser .scroll{ max-height:560px; overflow-y:auto; overscroll-behavior:contain; background:#fff; }
.browser .scroll img{ width:100%; }
.browser video.tour{ width:100%; display:block; background:#000; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:18px; }
.gallery figure{ margin:0; background:var(--surface); border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.gallery img{ width:100%; }
.case-next{ display:flex; gap:20px; align-items:baseline; flex-wrap:wrap; margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid var(--line); }
.case-next > a:not(.all){ font-family:var(--f-display); font-weight:500; font-size:30px; border-bottom:1px solid var(--brass); }
.case-next .all{ margin-left:auto; }
.case-next .all:hover{ color:var(--fg); }

/* ---------- websites / branding pages ---------- */
.inc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.inc{ background:var(--surface); color:var(--fg); border:1px solid var(--line); border-radius:3px; padding:24px 26px; }
.inc b{ font-family:var(--f-display); font-weight:500; font-size:22px; display:block; margin-bottom:8px; color:var(--fg); }
.inc p{ font-size:15px; color:var(--fg2); line-height:1.6; }
.steps{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
.steps li{ background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:24px 26px; counter-increment:step; }
.steps li::before{ content:counter(step, decimal-leading-zero); font-family:var(--f-label); color:var(--brass-text); font-size:13px; letter-spacing:var(--ls-label); display:block; margin-bottom:12px; }
.steps b{ font-family:var(--f-display); font-weight:500; font-size:22px; display:block; margin-bottom:8px; }
.steps p{ font-size:15px; color:var(--fg2); line-height:1.6; }
.steps.small{ grid-template-columns:1fr; gap:12px; }
.tablewrap{ overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:3px; }
table{ width:100%; border-collapse:collapse; font-size:15px; min-width:560px; }
th{ text-align:left; font-family:var(--f-label); font-weight:500; font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--brass-text); padding:16px 18px 12px; border-bottom:1px solid var(--line); }
td{ padding:13px 18px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5; }
tr:last-child td{ border-bottom:none; }
td.n{ font-weight:600; white-space:nowrap; }
td.p{ white-space:nowrap; color:var(--fg); font-family:var(--f-display); font-size:18px; }
td.was{ white-space:nowrap; color:var(--fg3); font-size:13px; }
.sec.cream .tablewrap{ background:var(--band-card); color:var(--band-card-ink); border-color:var(--band-line); }
.sec.cream th{ color:var(--band-card-accent); border-bottom-color:var(--band-line); }
.sec.cream td{ border-bottom-color:var(--band-line); }
.sec.cream td.p{ color:var(--band-card-ink); }
.sec.cream td.was{ color:var(--band-card-muted); }
.note{ font-size:14.5px; color:var(--fg2); margin-top:16px; }
.note a{ color:var(--fg); border-bottom:1px solid var(--brass); font-weight:600; }
.sec.cream .note a{ color:var(--band-ink); border-bottom-color:var(--band-accent); }
.faq-list{ display:grid; gap:10px; }
details{ background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:0 26px; }
summary{ cursor:pointer; font-family:var(--f-display); font-weight:500; font-size:21px; padding:18px 0; list-style:none; position:relative; padding-right:32px; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; position:absolute; right:0; top:14px; color:var(--brass); font-size:24px; font-weight:300; font-family:var(--f-label); }
details[open] summary::after{ content:"\2013"; }
details p{ padding:0 0 22px; font-size:15.5px; color:var(--fg2); max-width:62ch; line-height:1.65; }
.cols{ list-style:none; columns:2; column-gap:28px; margin-top:16px; font-size:15.5px; }
.cols li{ padding-left:16px; position:relative; margin-bottom:10px; break-inside:avoid; }
.cols li::before{ content:""; position:absolute; left:0; top:.66em; width:6px; height:6px; background:var(--acc); }
.files p{ color:var(--fg2); }
.cta{ text-align:center; padding:var(--s6) 40px; background:radial-gradient(ellipse 60% 100% at 50% 100%, var(--glow2), transparent 70%); border:1px solid var(--line2); border-radius:4px; }
.cta h2{ font-size:clamp(34px,4vw,50px); margin-bottom:14px; }
.cta p{ color:var(--fg2); max-width:48ch; margin:0 auto 26px; font-size:17px; }

/* ---------- about page ---------- */
.about-grid{ display:grid; grid-template-columns:340px 1fr; gap:56px; align-items:start; }
.about-portrait img{ border-radius:4px; border:1px solid var(--line2); box-shadow:var(--shadow); }
.about-text p{ font-size:17px; line-height:1.7; color:var(--fg2); margin-bottom:18px; max-width:58ch; }
.facts{ margin:32px 0 0; display:grid; grid-template-columns:auto 1fr; gap:12px 26px; font-size:15px; border-top:1px solid var(--line); padding-top:24px; }
.facts dt{ color:var(--brass-text); font-family:var(--f-label); font-weight:500; font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; padding-top:4px; }
.facts dd{ margin:0; }
.reel-frame{ margin:0; border-radius:4px; overflow:hidden; background:#000; border:1px solid var(--band-line); box-shadow:0 30px 60px -28px rgba(0,0,0,.6); }
.reel-frame video{ width:100%; display:block; aspect-ratio:16/9; }
.reel-slot{ aspect-ratio:16/9; background:var(--band-card); color:var(--band-card-muted); border:1px dashed var(--band-line); border-radius:4px; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:56px; align-items:start; }
.form{ display:grid; gap:20px; }
.form fieldset{ border:none; margin:0; padding:0; }
.form legend{ color:var(--brass-text); font-family:var(--f-label); font-weight:500; font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; margin-bottom:12px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.chip span{ display:inline-block; font-family:var(--f-label); font-size:12px; font-weight:500; letter-spacing:var(--ls-label); text-transform:uppercase; padding:10px 16px; border:1px solid var(--line2); border-radius:999px; color:var(--fg2); cursor:pointer; }
.chip input:checked + span{ background:var(--brass); color:var(--cream-ink); border-color:var(--brass); }
.chip input:focus-visible + span{ outline:2px solid var(--brass); outline-offset:2px; }
.form label{ display:grid; gap:8px; color:var(--brass-text); font-family:var(--f-label); font-weight:500; font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; }
.form input[type=text], .form input[type=email], .form select, .form textarea{ width:100%; font:15px var(--f-body); color:var(--fg); background:var(--surface); border:1px solid var(--line2); border-radius:2px; padding:13px 15px; letter-spacing:0; text-transform:none; font-weight:400; }
.form textarea{ resize:vertical; min-height:160px; }
.form select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--fg2) 50%), linear-gradient(135deg, var(--fg2) 50%, transparent 50%); background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; padding-right:40px; }
.form input:focus, .form select:focus, .form textarea:focus{ outline:2px solid var(--acc); outline-offset:0; border-color:var(--acc); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form .btn{ justify-self:start; }
.form-note{ font-size:14.5px; color:var(--fg2); }
.form-note a{ color:var(--fg); border-bottom:1px solid var(--brass); font-weight:600; }
.form-status{ font-size:15px; min-height:1.4em; }
.form-status.ok{ color:#9FE0B0; }
.form-status.err{ color:#F3B79E; }
.form.sent .btn{ opacity:.5; pointer-events:none; }
.contact-aside{ background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:28px; }
.contact-aside h3{ font-size:26px; margin-bottom:16px; }
.contact-aside .steps li{ background:transparent; border:none; padding:0; }
.contact-aside .steps li::before{ font-size:18px; margin-bottom:6px; }
.contact-aside .steps b{ font-size:19px; }
.contact-aside .mono{ margin-top:20px; line-height:1.6; display:block; }
.prose p{ font-size:16px; color:var(--fg2); max-width:62ch; margin-bottom:16px; line-height:1.7; }
.prose a{ color:var(--fg); border-bottom:1px solid var(--brass); font-weight:600; }

/* ---------- responsive ---------- */
@media (max-width: 960px){
  :root{ --pad:24px; --s6:60px; --s7:68px; }
  .hero-in{ grid-template-columns:1fr; gap:44px; }
  .hero h1{ max-width:none; }
  .card{ transform:none; }
  .services, .pack-grid, .inc-grid, .steps{ grid-template-columns:1fr; }
  .tiles, .group .tiles.wide{ grid-template-columns:repeat(2,1fr); }
  .case-body, .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .about-portrait{ max-width:340px; }
  .cols{ columns:1; }
}
@media (max-width: 680px){
  .nav-toggle{ display:block; }
  .menu{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--deep); border-bottom:1px solid var(--line); padding:18px var(--pad) 22px; flex-direction:column; align-items:flex-start; gap:18px; }
  .menu.open{ display:flex; }
  .menu ul{ flex-direction:column; gap:14px; font-size:13px; }
  .tiles, .group .tiles.wide{ grid-template-columns:1fr; }
  .row2{ grid-template-columns:1fr; }
  .about-in{ grid-template-columns:1fr; }
  .portrait{ max-width:220px; }
  .foot-in{ flex-direction:column; align-items:flex-start; }
  .cta{ padding:40px 22px; }
  .browser .scroll{ max-height:420px; }
  .head h2{ font-size:32px; }
}

/* light ground adjustments (set by the picker or a baked light palette) */
html.light .btn.ghost{ color:var(--brass-text); }
html.light .link{ border-bottom-color:var(--brass); }
html.light .hero{ background:radial-gradient(ellipse 52% 72% at 84% 12%, var(--glow1), transparent 62%), radial-gradient(ellipse 44% 56% at 4% 100%, var(--glow2), transparent 60%); }
html.light .tile, html.light .card, html.light .clip, html.light .browser, html.light .gallery figure, html.light .case-facts dl, html.light details, html.light .contact-aside, html.light .steps li, html.light .tablewrap{ box-shadow:0 14px 34px -22px rgba(11,24,56,.35); }
html.light .cta{ background:var(--band-bg); color:var(--band-ink); border-color:transparent; }
html.light .cta p{ color:var(--band-muted); }

/* lift on boxes */
.pack, .tile, .inc, .steps li, .case-facts dl, details, .contact-aside, .browser, .clip, .gallery figure, .tablewrap{ box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 22px 44px -22px rgba(0,0,0,.85); }
.svc, .sec.cream .pack, .sec.cream .inc, .sec.cream .tablewrap{ box-shadow:0 18px 38px -22px rgba(18,18,18,.45); }
.tile:hover, .pack:hover, .svc:hover{ box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 54px -22px rgba(0,0,0,.9); }
.svc:hover{ box-shadow:0 26px 48px -22px rgba(18,18,18,.5); }

/* ---------- start a project router ---------- */
.router{ max-width:820px; }
.rq{ margin-bottom:var(--s4); }
.rq .eyebrow{ margin-bottom:12px; }
.rchips{ display:flex; gap:8px; flex-wrap:wrap; }
.rchips button{ font-family:var(--f-body); font-size:15px; padding:11px 18px; border:1px solid var(--line2); border-radius:999px; color:var(--fg2); background:transparent; cursor:pointer; transition:all .15s ease; }
.rchips button:hover{ color:var(--fg); border-color:var(--brass); }
.rchips button.on{ background:var(--brass); color:var(--cream-ink); border-color:var(--brass); }
.rresult{ margin-top:var(--s5); padding-top:var(--s5); border-top:1px solid var(--line); }
.rresult .head{ margin-bottom:var(--s4); }
.rforms{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.rform{ background:var(--surface); border:1px solid var(--line); border-radius:3px; padding:26px 26px 24px; display:flex; flex-direction:column; gap:8px; opacity:.72; transition:opacity .2s ease, border-color .2s ease; }
.rform.rec{ opacity:1; border-color:var(--brass); box-shadow:0 0 0 1px var(--brass) inset, 0 22px 44px -22px rgba(0,0,0,.85); }
.rform .lab{ color:var(--brass-text); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.rform .lab b.rec{ display:none; font-weight:500; background:var(--brass); color:var(--cream-ink); padding:3px 8px; border-radius:2px; font-size:10px; }
.rform.rec .lab b.rec{ display:inline-block; }
.rform p{ color:var(--fg2); font-size:15px; line-height:1.6; margin:4px 0 12px; }
.rform .btn{ align-self:flex-start; margin-top:auto; }
.rform:not(.rec) .btn{ background:transparent; color:var(--brass); border-color:var(--brass); }
.rembed{ margin-top:var(--s5); background:#fff; border-radius:4px; padding:8px; box-shadow:var(--shadow); }
.rnote{ margin-top:var(--s4); }
@media (max-width:680px){ .rforms{ grid-template-columns:1fr; } }

/* ---------- choices ---------- */
.pack .choose{ font-family:var(--f-label); font-size:11px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--acc); margin:2px 0 10px; }
.choices{ margin:4px 0 16px; padding:14px 16px 12px; background:rgba(47,124,246,.08); border:1px solid rgba(47,124,246,.28); border-radius:3px; }
.choices .lab{ color:var(--acc); display:block; margin-bottom:4px; }
.choices b{ font-family:var(--f-display); font-weight:400; font-size:19px; display:block; margin-bottom:8px; }
.choices ul{ margin:0 !important; gap:5px !important; }
.choices li::before{ background:var(--acc) !important; }
.sec.cream .choices{ background:rgba(31,95,204,.07); border-color:rgba(31,95,204,.3); }
.sec.cream .choices .lab, .sec.cream .choices li::before{ color:var(--acc-deep); background:var(--acc-deep); }
.steps.three{ grid-template-columns:repeat(3,1fr); }
@media (max-width:960px){ .steps.three{ grid-template-columns:1fr; } }

/* ---------- connect page ---------- */
.connect{ max-width:820px; }
.cx-list{ display:grid; gap:10px; }
details.cx summary{ display:flex; flex-direction:column; gap:4px; padding-right:36px; }
.cx-t{ font-family:var(--f-display); font-size:22px; }
.cx-w{ font-family:var(--f-body); font-size:15px; color:var(--fg2); }
.cx-steps{ margin:4px 0 16px; padding-left:22px; font-size:15.5px; line-height:1.6; color:var(--fg2); display:grid; gap:8px; }
.cx-steps b{ color:var(--fg); }
.cx-steps code{ font-family:var(--f-label); font-size:13px; color:var(--brass); }
.cx-done{ display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; font-family:var(--f-label); font-size:12px; letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--fg3); cursor:pointer; }
.cx-done input{ accent-color:var(--brass); width:16px; height:16px; }
details.cx.is-done summary .cx-t::after{ content:"  \2713"; color:var(--brass); }

/* ---------- white cards on the coffee bands: lift and detail ---------- */
.sec.cream .svc, .sec.cream .pack, .sec.cream .inc, .sec.cream .steps li, .sec.cream .tablewrap{
  background:#FFFFFF; border:1px solid rgba(18,18,18,.08); border-top:3px solid var(--brass);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px -12px rgba(18,18,18,.25), 0 30px 50px -28px rgba(18,18,18,.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.sec.cream .svc:hover, .sec.cream .pack:hover, .sec.cream .inc:hover, .sec.cream .steps li:hover{
  transform:translateY(-4px); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 12px 22px -12px rgba(18,18,18,.3), 0 40px 60px -28px rgba(18,18,18,.5);
}
.sec.cream .svc{ position:relative; }
.sec.cream .svc::after{ content:""; position:absolute; right:22px; top:22px; width:9px; height:9px; background:var(--acc); }
.sec.cream .pack.hot{ border-top-color:var(--acc); box-shadow:0 0 0 1px var(--acc) inset, 0 12px 22px -12px rgba(18,18,18,.3), 0 40px 60px -28px rgba(18,18,18,.5); }
.sec.cream .inc b{ padding-bottom:10px; border-bottom:1px solid rgba(18,18,18,.08); }
.sec.cream .steps li::before{ background:var(--brass); color:var(--cream-ink); display:inline-block; padding:4px 8px; border-radius:2px; font-size:11px; }

/* ---------- care plan definitions ---------- */
.defs{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:var(--s3); }
.def{ padding:16px 18px; border-left:2px solid var(--brass); background:rgba(244,239,230,.03); }
.sec.cream .def{ background:rgba(18,18,18,.03); border-left-color:var(--band-accent); }
.def b{ font-family:var(--f-display); font-weight:400; font-size:18px; display:block; margin-bottom:6px; }
.def p{ font-size:14px; line-height:1.55; color:var(--fg2); }
.sec.cream .def p{ color:var(--band-muted); }
@media (max-width:960px){ .defs{ grid-template-columns:1fr 1fr; } }
@media (max-width:680px){ .defs{ grid-template-columns:1fr; } }

/* ---------- newsletter add-on ---------- */
.nl{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line); align-items:start; }
.nl-copy h2{ font-size:34px; line-height:1.08; margin-bottom:14px; }
.nl-copy p{ color:var(--fg2); max-width:58ch; }
.nl-inc{ list-style:none; margin:18px 0 0; display:grid; gap:8px; font-size:15px; }
.nl-inc li{ padding-left:18px; position:relative; }
.nl-inc li::before{ content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--acc); }
.nl-tiers{ display:grid; gap:14px; }
.nl-tiers .pack{ padding:22px 24px 18px; }
@media (max-width:960px){ .nl{ grid-template-columns:1fr; } }

.nl-how{ margin-top:var(--s3); }
.nl-how li{ background:transparent; border:none; border-left:2px solid var(--brass); border-radius:0; padding:4px 0 4px 18px; box-shadow:none; }
.nl-how li::before{ display:none; }
.nl-how b{ font-size:18px; }


.rq[data-multi] .rchips button.on::before{ content:"\2713"; margin-right:8px; }
.rq[data-multi] .eyebrow::after{ content:"pick all that apply"; text-transform:none; letter-spacing:0; font-family:var(--f-body); font-size:13px; color:var(--fg3); margin-left:4px; }

/* ---------- book a call ---------- */
.book{ display:flex; align-items:center; justify-content:space-between; gap:28px; margin-top:var(--s5); padding:28px 30px; border:1px solid var(--line2); border-radius:3px; background:var(--surface); box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 22px 44px -22px rgba(0,0,0,.85); }
.book h3{ font-size:26px; margin:4px 0 8px; }
.book p{ color:var(--fg2); font-size:15px; max-width:52ch; }
.book .btn{ flex:none; }
.book.compact{ flex-direction:column; align-items:flex-start; padding:22px; margin-top:var(--s4); }
.book.compact h3{ font-size:22px; }
@media (max-width:680px){ .book{ flex-direction:column; align-items:flex-start; } }

/* ---------- plan buttons ---------- */
.pack .btn{ margin-top:14px; align-self:flex-start; }
.pack .yr{ display:block; margin-top:10px; color:var(--brass-text); text-decoration:underline; text-underline-offset:3px; font-size:11px; }
.nl-card .btn{ margin-top:12px; align-self:flex-start; }
.pagehead .ctas .btn.brass{ font-size:13px; padding:16px 26px; }

/* ---------- package cards: the details open on click (Megan, 16 Sep) ---------- */
.pack.detail .more{ margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.sec.cream .pack.detail .more{ border-top-color:var(--band-line); }
.pack.detail .more summary{
  font-family:var(--f-label); font-weight:500; font-size:11.5px; letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--brass-text); cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0;
}
.pack.detail .more summary::-webkit-details-marker{ display:none; }
.pack.detail .more summary::after{ content:"+"; font-size:15px; line-height:1; }
.pack.detail .more[open] summary::after{ content:"\2013"; }
.pack.detail .more summary:hover{ color:var(--brass); }
.pack.detail .more-in{ padding-top:10px; }
.pack.detail .more ul{ margin:0; }
.sec.cream .pack.detail .more summary{ color:var(--band-card-accent); }
/* equal-height package boxes: the button sits on the floor of every card */
.pack-grid.detail{ align-items:stretch; }
.pack.detail{ height:100%; }
.pack.detail .btn{ margin-top:auto; }
.pack.detail .more{ margin-top:14px; }

/* ghost buttons: keep the label readable on hover (Megan, 16 Sep) */
.btn.ghost:hover{ background:#8F6E1B; border-color:#8F6E1B; color:#FFFFFF; }
.sec.cream .btn.ghost:hover{ background:#0B0E17; border-color:#0B0E17; color:#F4EFE6; }

/* ---------- footer, laid out on a grid (Megan, 16 Sep) ---------- */
.foot-in{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px 40px; padding-top:40px; padding-bottom:26px; }
.foot-brand{ display:flex; flex-direction:column; gap:8px; }
.foot-city{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.foot-links{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px; justify-content:center; }
.foot-links a{ font-size:13px; letter-spacing:.04em; padding:2px 0; border-bottom:1px solid transparent; }
.foot-links a:hover{ border-bottom-color:var(--brass); }
.foot-cta{ justify-self:end; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-top:16px; padding-bottom:28px; }
.foot-bottom .copy{ margin:0; font-size:12px; letter-spacing:.05em; }
@media (max-width:860px){
  .foot-in{ grid-template-columns:1fr; gap:20px; padding-top:34px; }
  .foot-links{ justify-content:flex-start; gap:8px 20px; }
  .foot-cta{ justify-self:start; }
  .foot-bottom{ justify-content:flex-start; gap:6px; }
}
/* headlines with hand-set line breaks opt out of balancing (Megan's rag rule:
   first line shortest, then staggered) */
h1.rag, h2.rag, h3.rag{ text-wrap:initial; }

/* ---------------------------------------------------------------------------
   Daylight & Brass: the inverted palette. Paper ground, midnight ink, and the
   dark bands doing the job the cream bands do on the stage-black site.
   Loaded only by `python3 build.py --light` (output: deploy-light/).
   --------------------------------------------------------------------------- */
html.light{
  color-scheme:light;
  --deep:#0B0E17;        /* footer only: the one dark anchor at the bottom */
  --bg:#F4F6F8;          /* Porcelain: cool paper, no off-white cast (Megan disliked the Swiss Coffee ground) */
  --raise:#E7E0D2;       /* the band that used to be navy */
  --surface:#FFFFFF;     /* cards */
  --surface2:#E8ECF1;    /* image wells */
  --fg:#121212; --fg2:#4B4740; --fg3:#6E6A62;
  --acc:#1F5FCC; --acc-ink:#FFFFFF;
  --brass:#8F6E1B; --brass-soft:rgba(143,110,27,.12);
  --line:rgba(18,18,18,.14); --line2:rgba(18,18,18,.26);
  --brass-text:#735711;
  --glow1:rgba(226,176,74,.20); --glow2:rgba(47,124,246,.10);
  --shadow:0 34px 60px -30px rgba(18,18,18,.4); --tile-shadow:0 14px 30px -18px rgba(18,18,18,.35);

  /* the bands invert: what was Swiss Coffee on black is now midnight on paper */
  --band-bg:#0B0E17; --band-ink:#F4EFE6; --band-muted:#C9C5BC; --band-accent:#E2B04A;
  --band-line:rgba(244,239,230,.16);
  --band-card:#151928; --band-card-ink:#F4EFE6; --band-card-muted:#C9C5BC; --band-card-accent:#E2B04A;
  --cream:#0B0E17; --cream-2:#151928; --cream-ink:#F4EFE6; --cream-muted:#C9C5BC; --cream-line:rgba(244,239,230,.16);
  --deep-ink:#F4EFE6; --deep-muted:#948F86;
}

/* nav and footer stay stage black on every page, so the frame never changes;
   only the page body flips. (Megan, 16 Sep: home dark, the rest light.) */
html.light .nav{ background:var(--deep); color:var(--deep-ink); border-bottom:1px solid rgba(244,239,230,.13); }
html.light .nav a{ color:var(--deep-ink); }
html.light .nav .wm small{ color:#E2B04A; }
html.light .nav-toggle{ border-color:rgba(244,239,230,.26); color:var(--deep-ink); }
html.light .nav a.active::after, html.light .nav a:hover::after{ background:#E2B04A; }
html.light .nav .btn.ghost{ border-color:#E2B04A; color:#E2B04A; }
html.light .nav .btn.ghost:hover{ background:#E2B04A; color:#0B0E17; }

/* footer keeps the stage black, so the page closes the way the brand opens */
html.light footer{ background:var(--deep); color:var(--deep-ink); }
html.light footer a{ color:var(--deep-ink); }
html.light footer .meta, html.light footer .mono{ color:var(--deep-muted); }

/* boxes: white cards with midnight text, hairline instead of glow */
html.light .pack, html.light .tile, html.light .inc, html.light .steps li,
html.light .case-facts dl, html.light details, html.light .contact-aside,
html.light .tablewrap, html.light .svc{
  background:var(--surface); color:var(--fg); border-color:var(--line);
  box-shadow:0 18px 38px -24px rgba(18,18,18,.38);
}
html.light .pack.hot{ border-color:var(--brass); box-shadow:0 0 0 1px var(--brass) inset, 0 22px 44px -24px rgba(18,18,18,.42); }
html.light .tile .th{ background:var(--surface2); }
html.light .tile .dl, html.light .inc p, html.light .steps p{ color:var(--fg2); }
html.light .packs .pack{ background:var(--surface); border-color:var(--line); color:var(--fg); }
html.light .card-bar{ background:var(--surface2); color:var(--fg2); border-bottom-color:var(--line); }

/* the dark bands: cream-band rules still apply, they just point at dark tokens now */
html.light .sec.cream{ background:var(--band-bg); color:var(--band-ink); }
html.light .sec.cream .pack, html.light .sec.cream .inc, html.light .sec.cream .steps li,
html.light .sec.cream .tablewrap{
  background:var(--band-card); color:var(--band-card-ink); border-color:var(--band-line);
  box-shadow:0 22px 44px -24px rgba(0,0,0,.6);
}
html.light .sec.cream .btn.solid{ background:var(--acc); border-color:var(--acc); color:#FFFFFF; }
html.light .sec.raise{ background:var(--raise); border-color:var(--line); }
html.light .sec.raise .lead, html.light .sec.raise p{ color:var(--fg2); }

/* type colour on paper: headlines midnight, body a touch softer */
html.light h1, html.light h2, html.light h3, html.light h4{ color:var(--fg); }
html.light .lead{ color:var(--fg2); }
html.light .eyebrow{ color:var(--brass-text); }
html.light .eyebrow::before{ background:var(--brass); }
html.light .meta, html.light .mono{ color:var(--fg3); }
html.light h1 em, html.light h2 em, html.light h3 em{ color:var(--acc); }
html.light .btn.brass{ color:#FFFFFF; }
html.light .cta{ background:var(--band-bg); color:var(--band-ink); border-color:transparent; }
html.light .cta h2{ color:var(--band-ink); }
html.light .cta p{ color:var(--band-muted); }

/* anything sitting inside a dark band stays dark: white-on-white was the bug */
html.light .sec.cream .svc, html.light .sec.cream .card, html.light .sec.cream .tile,
html.light .sec.cream .case-facts dl, html.light .sec.cream details, html.light .sec.cream .contact-aside{
  background:var(--band-card); color:var(--band-card-ink); border-color:var(--band-line);
  box-shadow:0 22px 44px -24px rgba(0,0,0,.6);
}
html.light .sec.cream .svc h3, html.light .sec.cream .svc .price, html.light .sec.cream .tile .nm,
html.light .sec.cream .pack h3, html.light .sec.cream .pack .price{ color:var(--band-card-ink); }
html.light .sec.cream .svc p, html.light .sec.cream .tile .dl, html.light .sec.cream .pack p,
html.light .sec.cream .pack li, html.light .sec.cream .note{ color:var(--band-card-muted); }
html.light .sec.cream .svc .lab, html.light .sec.cream .tile .lab, html.light .sec.cream .pack .lab,
html.light .sec.cream .svc .k, html.light .sec.cream .from{ color:var(--band-card-accent); }
html.light .sec.cream .link{ color:var(--band-ink); border-bottom-color:var(--band-accent); }
html.light .sec.cream .link:hover{ color:var(--band-accent); }
html.light .sec.cream .svc:hover{ border-color:var(--brass); }
html.light .sec.cream .tile .th{ background:#0E1220; border-bottom-color:var(--band-line); }

/* the "what happens next" aside is already a white card: the steps inside it
   must not be cards too, or it reads as white boxes stacked on white */
html.light .contact-aside .steps li{ background:transparent; box-shadow:none; border:0; border-left:1px solid var(--line); border-radius:0; }
html.light .contact-aside .steps li::before{ color:var(--brass-text); }

/* ---------------------------------------------------------------------------
   Per-section control on light pages (Megan, 16 Sep):
   .lt-dark  = this section stays stage black on a light page
   .lt-light = this band reads light on a light page (it is still coffee on the
               dark site, so the markup works in both builds)
   --------------------------------------------------------------------------- */
html.light .lt-dark{ background:var(--band-bg); color:var(--band-ink); }
html.light .lt-dark h1, html.light .lt-dark h2, html.light .lt-dark h3, html.light .lt-dark h4{ color:var(--band-ink); }
html.light .lt-dark p, html.light .lt-dark .lead, html.light .lt-dark li{ color:var(--band-muted); }
html.light .lt-dark .eyebrow, html.light .lt-dark .lab, html.light .lt-dark .k{ color:var(--band-accent); }
html.light .lt-dark .eyebrow::before{ background:var(--band-accent); }
html.light .lt-dark .meta, html.light .lt-dark .mono{ color:var(--band-muted); }
html.light .lt-dark .pack, html.light .lt-dark .inc, html.light .lt-dark .steps li,
html.light .lt-dark details, html.light .lt-dark .tablewrap, html.light .lt-dark .tile{
  background:var(--band-card); color:var(--band-card-ink); border-color:var(--band-line);
  box-shadow:0 22px 44px -24px rgba(0,0,0,.6);
}
html.light .lt-dark .pack h3, html.light .lt-dark .pack .price, html.light .lt-dark summary{ color:var(--band-card-ink); }
html.light .lt-dark .pack li, html.light .lt-dark .pack p, html.light .lt-dark details p{ color:var(--band-card-muted); }
html.light .lt-dark .pack.hot{ border-color:var(--brass); box-shadow:0 0 0 1px var(--brass) inset, 0 22px 44px -24px rgba(0,0,0,.6); }
html.light .lt-dark .choices{ border-color:var(--band-line); background:rgba(244,239,230,.04); }
html.light .lt-dark .btn.ghost{ border-color:#E2B04A; color:#E2B04A; }
html.light .lt-dark .btn.ghost:hover{ background:#E2B04A; color:#0B0E17; }
html.light .lt-dark .link{ color:var(--band-ink); border-bottom-color:var(--band-accent); }
html.light .lt-dark .time, html.light .lt-dark .choose{ color:var(--band-card-accent); }

html.light .sec.cream.lt-light{ background:transparent; color:var(--fg); }
html.light .sec.cream.lt-light h1, html.light .sec.cream.lt-light h2, html.light .sec.cream.lt-light h3, html.light .sec.cream.lt-light h4{ color:var(--fg); }
html.light .sec.cream.lt-light p, html.light .sec.cream.lt-light .lead, html.light .sec.cream.lt-light li{ color:var(--fg2); }
html.light .sec.cream.lt-light .eyebrow, html.light .sec.cream.lt-light .lab, html.light .sec.cream.lt-light .k{ color:var(--brass-text); }
html.light .sec.cream.lt-light .eyebrow::before{ background:var(--brass); }
html.light .sec.cream.lt-light .meta, html.light .sec.cream.lt-light .mono{ color:var(--fg3); }
html.light .sec.cream.lt-light .inc, html.light .sec.cream.lt-light .steps li, html.light .sec.cream.lt-light .pack, html.light .sec.cream.lt-light .tablewrap{
  background:var(--surface); color:var(--fg); border-color:var(--line);
  box-shadow:0 18px 38px -24px rgba(18,18,18,.38);
}
html.light .sec.cream.lt-light .inc b, html.light .sec.cream.lt-light .steps li b{ color:var(--fg); }
html.light .sec.cream.lt-light .inc p, html.light .sec.cream.lt-light .steps p{ color:var(--fg2); }

/* "Ready when you are." keeps its black ground (Megan, 16 Sep). It sits inside the
   dark Questions band, so lift it a step so it still reads as its own block. */
html.light .lt-dark .cta{ background:var(--band-card); color:var(--band-ink); border:1px solid var(--band-line); }
html.light .lt-dark .cta h2{ color:var(--band-ink); }
html.light .lt-dark .cta p{ color:var(--band-muted); }

/* ---------------------------------------------------------------------------
   Round 2 (Megan, 16 Sep): bring back the gold glow, put the cerulean squares
   back where the page goes flat, lift and move the boxes on hover, and fade the
   bands into each other instead of cutting hard from light to dark.
   --------------------------------------------------------------------------- */

/* --- gold glow ------------------------------------------------------------ */
html.light .lt-dark .cta{
  background:
    radial-gradient(ellipse 86% 150% at 50% 116%, rgba(226,176,74,.46), transparent 64%),
    radial-gradient(ellipse 50% 70% at 50% 128%, rgba(226,176,74,.30), transparent 60%),
    radial-gradient(ellipse 40% 60% at 50% -10%, rgba(47,124,246,.14), transparent 70%),
    var(--band-card);
}
html.light .pagehead.lt-dark{
  background:
    radial-gradient(ellipse 54% 74% at 86% 6%, rgba(226,176,74,.22), transparent 62%),
    radial-gradient(ellipse 42% 56% at 2% 104%, rgba(47,124,246,.16), transparent 60%),
    var(--band-bg);
}
html.light .lt-dark, html.light .sec.cream{
  background-image:
    radial-gradient(ellipse 60% 80% at 92% 100%, rgba(226,176,74,.12), transparent 64%);
}
html.light .pagehead:not(.lt-dark){
  background:radial-gradient(ellipse 52% 72% at 88% 4%, rgba(226,176,74,.16), transparent 60%);
}

/* --- ombré band edges: paper melts into the dark instead of butting against it */
html.light .lt-dark, html.light .sec.cream, html.light footer{ position:relative; }
html.light .lt-dark::before, html.light .sec.cream::before, html.light footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:64px; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(244,246,248,.85) 0%, rgba(244,246,248,.55) 26%, rgba(244,246,248,.28) 52%,
    rgba(244,246,248,.10) 76%, rgba(244,246,248,0) 100%);
}
html.light .lt-dark::after, html.light .sec.cream::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
  background:linear-gradient(to top,
    rgba(244,246,248,.85) 0%, rgba(244,246,248,.55) 26%, rgba(244,246,248,.28) 52%,
    rgba(244,246,248,.10) 76%, rgba(244,246,248,0) 100%);
}
/* Megan, 16 Sep: fades belong BETWEEN sections only. Never at the top of a page,
   never at the bottom, and never against the footer. */
html.light #main > *:first-child::before, html.light #main > *:first-child::after,
html.light #main > *:nth-child(2)::before,
html.light #main > *:last-child::before, html.light #main > *:last-child::after,
html.light #main > *:nth-last-child(2)::after,
html.light footer::before{ display:none; }
html.light .lt-dark, html.light .sec.cream{ padding-top:calc(var(--s6) + 30px); padding-bottom:calc(var(--s6) + 30px); }
html.light footer{ padding-top:56px; }
html.light .lt-dark > .wrap, html.light .sec.cream > .wrap, html.light footer > .wrap{ position:relative; z-index:1; }

/* --- cerulean squares where the page went flat --------------------------- */
html.light .def{ position:relative; background:var(--surface); border-left:2px solid var(--brass); padding:18px 20px 18px 18px; }
html.light .def::after{
  content:""; position:absolute; right:14px; top:16px; width:8px; height:8px; background:#2F7CF6;
  transition:transform .18s ease;
}
html.light .def b{ color:var(--fg); }
html.light .def p{ color:var(--fg2); }
html.light .sec.cream.lt-light .def, html.light .lt-dark .def{ background:rgba(244,239,230,.04); }
html.light .lt-dark .def b{ color:var(--band-ink); }
html.light .lt-dark .def p{ color:var(--band-muted); }
html.light .inc{ position:relative; }
html.light .inc::after{
  content:""; position:absolute; right:16px; top:18px; width:8px; height:8px; background:#2F7CF6;
  transition:transform .18s ease;
}

/* --- lift and movement ---------------------------------------------------- */
html.light .pack, html.light .inc, html.light .def, html.light .tile,
html.light .steps li, html.light .tablewrap, html.light details{
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html.light .pack:hover, html.light .inc:hover, html.light .tile:hover, html.light .steps li:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 54px -26px rgba(18,18,18,.5);
  border-color:rgba(47,124,246,.45);
}
html.light .def:hover{ transform:translateY(-3px); box-shadow:0 22px 40px -26px rgba(18,18,18,.45); border-left-color:#2F7CF6; }
html.light .inc:hover::after, html.light .def:hover::after{ transform:scale(1.4); }
html.light .pack:active, html.light .inc:active, html.light .def:active,
html.light .tile:active, html.light .steps li:active{ transform:translateY(-1px); }
html.light .lt-dark .pack:hover, html.light .lt-dark .inc:hover,
html.light .lt-dark .steps li:hover, html.light .lt-dark details:hover{
  transform:translateY(-4px); border-color:var(--brass);
  box-shadow:0 30px 54px -26px rgba(0,0,0,.75);
}
@media (prefers-reduced-motion: reduce){
  html.light .pack, html.light .inc, html.light .def, html.light .tile,
  html.light .steps li, html.light .tablewrap, html.light details{ transition:none; }
  html.light .pack:hover, html.light .inc:hover, html.light .def:hover,
  html.light .tile:hover, html.light .steps li:hover{ transform:none; }
}

/* --- add-ons table: give the rows something to do --------------------------- */
html.light .tablewrap{ border-radius:4px; overflow:hidden; }
html.light table{ border-collapse:collapse; width:100%; }
html.light thead th{
  background:rgba(47,124,246,.07); color:var(--brass-text); font-family:var(--f-label);
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; text-align:left;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
html.light tbody tr{ border-bottom:1px solid var(--line); transition:background .16s ease; }
html.light tbody tr:nth-child(even){ background:rgba(18,18,18,.022); }
html.light tbody tr:hover{ background:rgba(47,124,246,.07); }
html.light tbody td{ padding:14px 18px; vertical-align:top; }
html.light td.n{
  font-family:var(--f-display); font-size:18px; color:var(--fg); position:relative; padding-left:34px; white-space:normal;
}
html.light td.n::before{
  content:""; position:absolute; left:18px; top:.72em; width:8px; height:8px; background:#2F7CF6;
  opacity:.25; transition:opacity .16s ease, transform .16s ease;
}
html.light tbody tr:hover td.n::before{ opacity:1; transform:scale(1.35); }
html.light td.p{ font-family:var(--f-label); color:var(--brass-text); font-size:15px; white-space:nowrap; font-variant-numeric:tabular-nums; }
html.light td.was{ color:var(--fg3); font-size:12.5px; white-space:nowrap; }
html.light .lt-dark table thead th{ background:rgba(226,176,74,.10); color:var(--band-accent); border-bottom-color:var(--band-line); }
html.light .lt-dark tbody tr{ border-bottom-color:var(--band-line); }
html.light .lt-dark tbody tr:nth-child(even){ background:rgba(244,239,230,.03); }
html.light .lt-dark tbody tr:hover{ background:rgba(226,176,74,.10); }
html.light .lt-dark td.n{ color:var(--band-card-ink); }
html.light .lt-dark td.p{ color:var(--band-accent); }

/* --- a table on a dark band floats on its own white panel ------------------
   (Megan, 16 Sep: black type on the deep blue was unreadable in "One piece at
   a time". Rather than turn the type cream, the panel lifts off the band.) */
html.light .sec.cream .tablewrap, html.light .lt-dark .tablewrap{
  background:#FFFFFF; color:var(--fg); border:1px solid rgba(18,18,18,.10); border-radius:4px;
  box-shadow:0 34px 64px -30px rgba(0,0,0,.7), 0 0 0 6px rgba(244,246,248,.06);
  overflow:hidden;
}
html.light .sec.cream .tablewrap thead th, html.light .lt-dark .tablewrap thead th{
  background:rgba(47,124,246,.08); color:var(--brass-text); border-bottom:1px solid rgba(18,18,18,.12);
}
html.light .sec.cream .tablewrap tbody tr, html.light .lt-dark .tablewrap tbody tr{ border-bottom:1px solid rgba(18,18,18,.10); }
html.light .sec.cream .tablewrap tbody tr:nth-child(even), html.light .lt-dark .tablewrap tbody tr:nth-child(even){ background:rgba(18,18,18,.022); }
html.light .sec.cream .tablewrap tbody tr:hover, html.light .lt-dark .tablewrap tbody tr:hover{ background:rgba(47,124,246,.08); }
html.light .sec.cream .tablewrap td.n, html.light .lt-dark .tablewrap td.n{ color:var(--fg); }
html.light .sec.cream .tablewrap td.p, html.light .lt-dark .tablewrap td.p{ color:var(--brass-text); }
html.light .sec.cream .tablewrap td, html.light .lt-dark .tablewrap td{ color:var(--fg2); }
html.light .sec.cream .tablewrap td.n::before, html.light .lt-dark .tablewrap td.n::before{ background:#2F7CF6; }

/* --- one closing block, same everywhere (Megan, 16 Sep: "i want that to be
   cohesive"). Branding, About and Websites all get the "Ready when you are"
   treatment: midnight panel, gold glow rising from the bottom, cream type. */
html.light .cta{
  background:
    radial-gradient(ellipse 86% 150% at 50% 116%, rgba(226,176,74,.46), transparent 64%),
    radial-gradient(ellipse 50% 70% at 50% 128%, rgba(226,176,74,.30), transparent 60%),
    radial-gradient(ellipse 44% 62% at 50% -12%, rgba(47,124,246,.16), transparent 70%),
    var(--band-card);
  color:var(--band-ink);
  border:1px solid var(--band-line);
  border-radius:4px;
  box-shadow:0 34px 64px -30px rgba(0,0,0,.55);
}
html.light .cta h2{ color:var(--band-ink); }
html.light .cta p{ color:var(--band-muted); }
html.light .cta .btn.solid{ background:var(--acc); border-color:var(--acc); color:#FFFFFF; }
html.light .cta .btn.ghost{ border-color:#E2B04A; color:#E2B04A; }
html.light .cta .btn.ghost:hover{ background:#E2B04A; color:#0B0E17; }
html.light .btn.ghost:hover, html.light .nav .btn.ghost:hover, html.light footer .btn.ghost:hover{
  background:#8F6E1B; border-color:#8F6E1B; color:#FFFFFF;
}
html.light .lt-dark .btn.ghost:hover, html.light .sec.cream .btn.ghost:hover{
  background:#E2B04A; border-color:#E2B04A; color:#0B0E17;
}

/* --- the home hero keeps the stage-black ground, with its glow ------------- */
html.light .hero.lt-dark{
  background:
    radial-gradient(ellipse 52% 72% at 84% 12%, rgba(226,176,74,.22), transparent 62%),
    radial-gradient(ellipse 46% 58% at 2% 100%, rgba(47,124,246,.26), transparent 60%),
    var(--band-bg);
  color:var(--band-ink);
}
html.light .hero.lt-dark h1{ color:var(--band-ink); }
html.light .hero.lt-dark .lead, html.light .hero.lt-dark p{ color:var(--band-muted); }
html.light .hero.lt-dark .scope{ border-top-color:var(--band-line); }

/* --- the blue that stands out (Megan, 16 Sep) ------------------------------
   Headlines and accents go back to your cerulean; buttons sit one step deeper
   so white type on them still reads. */
html.light{ --acc:#2563E8; }
html.light h1 em, html.light h2 em, html.light h3 em,
html.light .lt-dark h1 em, html.light .lt-dark h2 em{ color:#2F7CF6; }
html.light .def::after, html.light .inc::after, html.light td.n::before{ background:#2F7CF6; }
html.light .btn.solid{ background:#2563E8; border-color:#2563E8; color:#FFFFFF; }
html.light .btn.solid:hover{ background:#2F7CF6; border-color:#2F7CF6; filter:none; transform:translateY(-1px); }

/* --- every box inside a .lt-light band is a white card, not a dark one ----- */
html.light .sec.cream.lt-light .svc,
html.light .sec.cream.lt-light .pack,
html.light .sec.cream.lt-light .tile,
html.light .sec.cream.lt-light .inc,
html.light .sec.cream.lt-light .steps li,
html.light .sec.cream.lt-light .tablewrap,
html.light .sec.cream.lt-light details,
html.light .sec.cream.lt-light .card{
  background:var(--surface); color:var(--fg); border-color:var(--line);
  box-shadow:0 18px 38px -24px rgba(18,18,18,.38);
}
html.light .sec.cream.lt-light .svc h3, html.light .sec.cream.lt-light .pack h3,
html.light .sec.cream.lt-light .tile .nm, html.light .sec.cream.lt-light summary,
html.light .sec.cream.lt-light .price, html.light .sec.cream.lt-light .from b,
html.light .sec.cream.lt-light .inc b, html.light .sec.cream.lt-light .steps li b{ color:var(--fg); }
html.light .sec.cream.lt-light .svc p, html.light .sec.cream.lt-light .pack p,
html.light .sec.cream.lt-light .pack li, html.light .sec.cream.lt-light .tile .dl,
html.light .sec.cream.lt-light .inc p, html.light .sec.cream.lt-light .steps p,
html.light .sec.cream.lt-light .price small{ color:var(--fg2); }
html.light .sec.cream.lt-light .svc .lab, html.light .sec.cream.lt-light .pack .lab,
html.light .sec.cream.lt-light .tile .lab, html.light .sec.cream.lt-light .k,
html.light .sec.cream.lt-light .time, html.light .sec.cream.lt-light .choose,
html.light .sec.cream.lt-light .from small, html.light .sec.cream.lt-light summary{ color:var(--brass-text); }
html.light .sec.cream.lt-light .svc::after{ background:#2F7CF6; }
html.light .sec.cream.lt-light .link{ color:var(--fg); border-bottom-color:var(--brass); }
html.light .sec.cream.lt-light .link:hover{ color:var(--brass-text); }
html.light .sec.cream.lt-light .svc:hover, html.light .sec.cream.lt-light .pack:hover{
  border-color:rgba(47,124,246,.45); transform:translateY(-4px); box-shadow:0 30px 54px -26px rgba(18,18,18,.5);
}