/* Bluebird Creatives, bbirdcreatives.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; 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; }