:root {
  --bg:#ffffff; --bg2:#f6f6f4; --bg3:#eeeeea; --ink:#0f1412; --ink2:#3d4441; --muted:#737a77; --line:#e6e6e2; --line2:#d4d4cf;
  --accent:#d9552c; --accent-ink:#b8421e; --accent-soft:#fdeee8; --moss:#1f5f4c; --moss-soft:#e3f0ea; --dark:#0f1412;
  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); --t:220ms; --t-slow:600ms;
  --shadow-sm:0 1px 2px rgba(15,20,18,.05), 0 1px 1px rgba(15,20,18,.03);
  --shadow:0 10px 30px -12px rgba(15,20,18,.18), 0 2px 6px rgba(15,20,18,.05);
  --shadow-lg:0 30px 60px -24px rgba(15,20,18,.28), 0 8px 20px -10px rgba(15,20,18,.12);
  --max:1240px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; font-size:16px; -webkit-font-smoothing:antialiased; font-feature-settings:'cv11','ss01','ss03'; }
::selection { background:var(--accent-soft); color:var(--accent-ink); }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-weight:600; letter-spacing:-.03em; line-height:1.05; margin:0 0 .4em; color:var(--ink); text-wrap:balance; }
h1 { font-size:clamp(2.6rem,6vw,4.6rem); letter-spacing:-.04em; }
h2 { font-size:clamp(1.8rem,3.4vw,2.6rem); margin-top:1.8em; }
h3 { font-size:1.15rem; letter-spacing:-.015em; }
p { margin:0 0 1em; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 28px; }
.center { text-align:center; } .center .lede { margin-inline:auto; }
.lede { font-size:1.15rem; color:var(--ink2); max-width:640px; line-height:1.55; }
.pilltag { display:inline-flex; align-items:center; gap:8px; background:var(--dark); color:#fff; font-size:.74rem; font-weight:600; letter-spacing:.02em; padding:6px 12px; border-radius:var(--r-pill); }
.pilltag.light { background:var(--bg3); color:var(--ink2); }
.pilltag .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.6); opacity:.5; } }

/* header */
header.site { position:sticky; top:0; z-index:40; background:#fff; transition:background var(--t) var(--ease), box-shadow var(--t) var(--ease); }
header.site.dark:not(.scrolled) { background:transparent; }
html { scroll-padding-top:84px; }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; height:76px; gap:16px; transition:height var(--t) var(--ease); }
header.site.scrolled { background:rgba(255,255,255,.94); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); box-shadow:0 1px 0 var(--line); } header.site.scrolled .wrap { height:60px; }
header.site.dark:not(.scrolled) { color:#fff; } header.site.dark:not(.scrolled) nav.main a { color:rgba(255,255,255,.8); } header.site.dark:not(.scrolled) nav.main a:hover { color:#fff; background:rgba(255,255,255,.12); }
header.site.dark:not(.scrolled) .nav-cta { background:#fff; color:var(--ink); border-color:#fff; }
.logo { font-weight:700; font-size:1.2rem; letter-spacing:-.03em; display:inline-flex; align-items:center; gap:9px; }
.logo .mark { width:26px; height:26px; border-radius:8px; background:var(--accent); display:grid; place-items:center; transition:transform var(--t-slow) var(--ease); } .logo:hover .mark { transform:rotate(90deg); }
.logo .mark::before { content:''; width:10px; height:10px; border:2px solid #fff; border-radius:2px; }
nav.main { display:flex; gap:2px; }
nav.main a { color:var(--ink2); font-size:.86rem; font-weight:500; padding:8px 12px; border-radius:var(--r-pill); transition:background var(--t) var(--ease), color var(--t) var(--ease); }
nav.main a:hover { background:var(--bg3); color:var(--ink); } nav.main a[aria-current] { background:var(--ink); color:#fff; }
header.site.dark:not(.scrolled) nav.main a[aria-current] { background:#fff; color:var(--ink); }
@media (max-width:960px) { nav.main { display:none; } }

main { padding:0 0 96px; }

/* hero */
.hero-c { padding:96px 0 40px; text-align:center; }
.hero-c h1 { margin-inline:auto; max-width:900px; }
.hero-c .lede { margin:18px auto 30px; }
.hero-dark { position:relative; color:#fff; margin-top:-76px; padding:180px 0 88px; overflow:hidden; border-radius:0 0 var(--r-lg) var(--r-lg); background:var(--dark); }
.hero-dark img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; filter:saturate(.8); transform:scale(1.08); animation:kenburns 20s var(--ease-io) forwards; }
@keyframes kenburns { to { transform:scale(1); } }
.hero-dark::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,20,18,.2) 0%, rgba(15,20,18,.5) 55%, rgba(15,20,18,.92) 100%); }
.hero-dark .wrap { position:relative; z-index:2; }
.hero-dark h1 { color:#fff; max-width:900px; font-size:clamp(2.4rem,5vw,3.9rem); } .hero-dark .lede { color:rgba(255,255,255,.78); }
.hero-dark .pilltag { background:rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.hero-dark .links a { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff; } .hero-dark .links a:hover { background:#fff; color:var(--ink); }

/* headline word reveal */
.words .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; } .words .w > span { display:inline-block; transform:translateY(110%); animation:up .9s var(--ease) forwards; animation-delay:calc(var(--i) * 55ms + 60ms); }
@keyframes up { to { transform:translateY(0); } }
.fade-in { opacity:0; animation:fade .9s var(--ease) forwards; animation-delay:var(--d, 450ms); } @keyframes fade { to { opacity:1; } }

/* search */
.search { position:relative; max-width:640px; margin:0 auto; }
.search input { width:100%; padding:18px 56px 18px 52px; border:1px solid var(--line2); border-radius:var(--r-pill); font:inherit; font-size:1.02rem; background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.search input:focus { outline:none; border-color:var(--ink); box-shadow:var(--shadow); transform:translateY(-1px); }
.search .ico { position:absolute; left:20px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; display:flex; }
.search .kbd { position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:.7rem; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:3px 7px; background:var(--bg2); }
.pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:22px 0 8px; }
.pills .lbl { width:100%; text-align:center; font-size:.74rem; color:var(--muted); font-weight:500; margin-bottom:4px; }
.pill { font:inherit; font-size:.84rem; font-weight:500; padding:9px 16px; border-radius:var(--r-pill); border:1px solid var(--line2); background:#fff; color:var(--ink2); cursor:pointer; transition:all var(--t) var(--ease); display:inline-flex; align-items:center; gap:8px; }
.pill:hover { border-color:var(--ink); color:var(--ink); transform:translateY(-1px); }
.pill[aria-pressed=true] { background:var(--ink); color:#fff; border-color:var(--ink); }
.pill .n { font-size:.7rem; opacity:.6; font-variant-numeric:tabular-nums; }
.count { text-align:center; font-size:.84rem; color:var(--muted); margin:14px 0 0; } .count b { color:var(--ink); font-variant-numeric:tabular-nums; }

/* stats */
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:32px; margin:64px 0 0; padding:40px 0 0; border-top:1px solid var(--line); }
.stat b { display:block; font-size:clamp(2.4rem,4vw,3.4rem); font-weight:600; letter-spacing:-.04em; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat .l { display:block; font-weight:600; margin-top:10px; } .stat .s { display:block; font-size:.86rem; color:var(--muted); margin-top:2px; }

/* tiles */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px 24px; margin:28px 0; }
.tile { position:relative; display:flex; flex-direction:column; gap:14px; color:inherit; border-radius:var(--r-lg); background:#fff; transition:transform var(--t-slow) var(--ease); }
.tile:hover { transform:translateY(-4px); }
.tile .art { position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; background:var(--bg3); box-shadow:var(--shadow-sm); transition:box-shadow var(--t-slow) var(--ease); }
.tile:hover .art { box-shadow:var(--shadow-lg); }
.tile .art img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s var(--ease); } .tile:hover .art img { transform:scale(1.05); }
.tile .art .badge-row { position:absolute; top:12px; left:12px; display:flex; gap:6px; z-index:2; }
.tile .art .peek { position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity var(--t) var(--ease); background:rgba(15,20,18,.18); }
.tile:hover .art .peek { opacity:1; }
.tile .art .peek span { background:#fff; color:var(--ink); font-size:.8rem; font-weight:600; padding:10px 16px; border-radius:var(--r-pill); transform:translateY(8px) scale(.96); transition:transform var(--t) var(--ease); box-shadow:var(--shadow); }
.tile:hover .art .peek span { transform:translateY(0) scale(1); }
.tile .art .initials { position:absolute; left:16px; bottom:14px; color:#fff; font-weight:700; font-size:1.4rem; letter-spacing:-.03em; text-shadow:0 2px 12px rgba(0,0,0,.25); z-index:2; }
.tile .body { display:flex; flex-direction:column; gap:8px; padding:0 4px; }
.tile .head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.tile h3 { margin:0; font-size:1.12rem; } .tile .meta { font-size:.8rem; color:var(--muted); white-space:nowrap; }
.tile .spec { font-size:.92rem; color:var(--ink2); margin:0; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tile .why { font-size:.84rem; color:var(--muted); margin:0; line-height:1.5; }
.units { display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 0; padding:0; }
.units div { display:flex; flex-direction:column; background:var(--bg2); border-radius:var(--r-sm); padding:8px 10px; min-width:0; flex:1 1 30%; }
.units dt { font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; } .units dd { margin:2px 0 0; font-size:.8rem; color:var(--ink); font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tags { display:flex; flex-wrap:wrap; gap:6px; } .tag { font-size:.72rem; font-weight:500; background:var(--bg3); border-radius:var(--r-pill); padding:4px 10px; color:var(--ink2); }
.badge { font-size:.66rem; font-weight:700; border-radius:var(--r-pill); padding:4px 9px; letter-spacing:.04em; text-transform:uppercase; background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); } .badge.green { background:var(--moss); color:#fff; } .badge.accent { background:var(--accent); color:#fff; }
.tile .foot { display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
.vstamp { font-size:.7rem; color:var(--muted); display:inline-flex; align-items:center; gap:6px; } .vstamp::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--line2); } .vstamp.verified { color:var(--moss); } .vstamp.verified::before { background:var(--moss); }
.arrow { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; color:var(--ink); } .arrow svg { transition:transform var(--t) var(--ease); } .tile:hover .arrow svg, a.more:hover svg { transform:translateX(4px); }
.tile-link { position:absolute; inset:0; z-index:1; border-radius:var(--r-lg); }
.cmp { position:absolute; top:12px; right:12px; z-index:3; display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; color:var(--ink); cursor:pointer; padding:6px 10px; border-radius:var(--r-pill); background:rgba(255,255,255,.92); backdrop-filter:blur(6px); box-shadow:var(--shadow-sm); transition:all var(--t) var(--ease); user-select:none; opacity:0; transform:translateY(-4px); }
.tile:hover .cmp, .tile.selected .cmp { opacity:1; transform:translateY(0); } .cmp input { accent-color:var(--accent); margin:0; width:14px; height:14px; }
.tile.selected .cmp { background:var(--accent); color:#fff; } .tile.selected .art { box-shadow:0 0 0 3px var(--accent), var(--shadow); }
@media (hover:none) { .cmp { display:none; } }
.tile.featured .art { box-shadow:0 0 0 2px var(--accent), var(--shadow); }
.featured-row { display:grid; grid-template-columns:1fr; gap:24px; margin:24px 0 0; }
@media (min-width:900px) { .featured-row .tile { display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center; background:var(--bg2); padding:20px; border-radius:var(--r-lg); } .featured-row .tile .art { aspect-ratio:16/10; } }

/* hub cards */
.hubgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:24px 0; }
.hubcard { position:relative; display:flex; flex-direction:column; gap:10px; padding:26px; border-radius:var(--r-lg); background:var(--bg2); color:inherit; overflow:hidden; transition:transform var(--t-slow) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease); min-height:200px; }
.hubcard:hover { transform:translateY(-4px); background:var(--ink); color:#fff; } .hubcard:hover h3, .hubcard:hover .spec { color:inherit; }
.hubcard .num { font-size:.74rem; font-weight:600; color:var(--muted); letter-spacing:.06em; } .hubcard:hover .num { color:rgba(255,255,255,.6); }
.hubcard h3 { font-size:1.3rem; margin:0; transition:color var(--t) var(--ease); } .hubcard .spec { font-size:.9rem; color:var(--ink2); margin:0; transition:color var(--t) var(--ease); }
.hubcard .arrow { margin-top:auto; color:inherit; } .hubcard:hover .arrow svg { transform:translateX(4px); }
.hubcard .n { position:absolute; right:22px; bottom:22px; font-size:1.9rem; font-weight:600; letter-spacing:-.04em; color:var(--line2); line-height:1; transition:color var(--t) var(--ease); } .hubcard:hover .n { color:var(--accent); }
.hubcard .n::after { content:' firms'; font-size:.7rem; letter-spacing:.04em; font-weight:500; color:var(--muted); margin-left:4px; } .hubcard:hover .n::after { color:rgba(255,255,255,.6); }
.hubcard h3 { padding-right:8px; }

/* sections */
.sec { padding:56px 0 0; } .sec-head { display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; } .sec-head h2 { margin:0; } .sec-head p { margin:6px 0 0; color:var(--ink2); max-width:560px; }
a.more { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.9rem; white-space:nowrap; } a.more svg { transition:transform var(--t) var(--ease); }
.band { background:var(--bg2); border-radius:var(--r-lg); padding:44px; margin:64px 0; }
.band.dark { background:var(--dark); color:#fff; position:relative; overflow:hidden; } .band.dark h2 { color:#fff; margin-top:0; } .band.dark p { color:rgba(255,255,255,.72); } .band.dark .btn { background:#fff; color:var(--ink); border-color:#fff; }
.band.dark::before { content:''; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(217,85,44,.45), transparent 65%); pointer-events:none; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:var(--r-pill); background:var(--ink); color:#fff; font-weight:600; font-size:.9rem; border:1px solid var(--ink); cursor:pointer; font-family:inherit; transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease); }
.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow); } .btn:active { transform:translateY(0) scale(.98); }
.btn.accent { background:var(--accent); border-color:var(--accent); } .btn.accent:hover { background:var(--accent-ink); }
.btn.ghost { background:#fff; color:var(--ink); border-color:var(--line2); } .btn.ghost:hover { border-color:var(--ink); }
.btn svg { transition:transform var(--t) var(--ease); } .btn:hover svg { transform:translateX(3px); }

/* framework */
.framework { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; margin:24px 0 0; }
.fw { background:var(--bg2); border-radius:var(--r-lg); padding:32px; } .fw .num { font-size:.74rem; font-weight:600; letter-spacing:.08em; color:var(--accent); } .fw h2 { font-size:1.4rem; margin:10px 0 12px; } .fw p { color:var(--ink2); font-size:.95rem; }
.fw p:last-of-type { margin-bottom:0; }
.links { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; } .links a { font-size:.82rem; font-weight:500; border:1px solid var(--line2); background:#fff; padding:7px 14px; border-radius:var(--r-pill); color:var(--ink); transition:all var(--t) var(--ease); } .links a:hover { border-color:var(--ink); background:var(--ink); color:#fff; }
.sizehead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:48px; } .sizehead h3 { margin:0; font-size:1.6rem; } .sizehead .n { color:var(--muted); font-size:.88rem; }
.bandblurb { color:var(--ink2); margin:8px 0 0; max-width:640px; font-size:.95rem; }
.pull { margin:36px 0 8px; padding:32px 36px; border-radius:var(--r-lg); background:var(--accent-soft); color:var(--accent-ink); max-width:820px; } .pull .eyebrow { color:var(--accent-ink); } .pull p { font-size:1.25rem; font-weight:500; letter-spacing:-.02em; line-height:1.4; margin:8px 0 0; }
.eyebrow { display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-size:.7rem; color:var(--muted); font-weight:700; }

/* tables, details, misc */
table { width:100%; border-collapse:separate; border-spacing:0; font-size:.92rem; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
th,td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top; } tr:last-child td { border-bottom:0; } th { background:var(--bg2); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink2); font-weight:600; }
tbody tr { transition:background var(--t) var(--ease); } tbody tr:hover td { background:var(--bg2); }
.tablewrap { overflow-x:auto; margin:8px 0 12px; }
.cmp-table th[scope=row] { background:#fff; text-transform:none; letter-spacing:0; font-size:.86rem; color:var(--muted); font-weight:500; width:200px; }
.cmp-table thead th { font-size:1rem; text-transform:none; letter-spacing:-.01em; font-weight:600; } .cmp-table thead th a { color:var(--ink); }
details { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:0 20px; margin-bottom:10px; transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } details:hover { border-color:var(--line2); } details[open] { border-color:var(--ink); box-shadow:var(--shadow-sm); }
summary { cursor:pointer; font-weight:600; font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; letter-spacing:-.01em; } summary::-webkit-details-marker { display:none; }
summary .plus { width:28px; height:28px; border-radius:50%; border:1px solid var(--line2); display:grid; place-items:center; flex:none; transition:transform var(--t-slow) var(--ease), background var(--t) var(--ease); font-weight:500; } details[open] summary .plus { transform:rotate(45deg); background:var(--ink); color:#fff; border-color:var(--ink); }
details .ans p { margin:0 0 18px; color:var(--ink2); }
.breadcrumb { font-size:.8rem; color:var(--muted); margin:28px 0 20px; } .breadcrumb a:hover { color:var(--ink); }
.two { display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); gap:48px; } @media (max-width:900px) { .two { grid-template-columns:1fr; } }
.side { position:sticky; top:84px; align-self:start; display:flex; flex-direction:column; gap:16px; }
.box { background:var(--bg2); border-radius:var(--r-lg); padding:24px; }
.box h3 { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:12px; font-weight:700; }
.row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line2); font-size:.9rem; } .row:last-child { border:0; } .row span:first-child { color:var(--muted); } .row a { color:var(--ink); font-weight:500; }
.prose { max-width:720px; } .prose p, .prose li { font-size:1.05rem; color:var(--ink2); line-height:1.65; } .prose p strong { color:var(--ink); } .prose a { color:var(--accent-ink); font-weight:500; }
.prose h2 { font-size:1.7rem; }
.photo { border-radius:var(--r-lg); overflow:hidden; } .photo img { width:100%; height:100%; object-fit:cover; display:block; } .photo.tall { aspect-ratio:4/3; }
figure { margin:0; } figcaption { font-size:.76rem; color:var(--muted); margin-top:10px; }
.hero-art { background:var(--bg2); border-radius:var(--r-lg); padding:24px; } .hero-art img { width:100%; height:auto; display:block; }
.empty { background:var(--bg2); border-radius:var(--r); padding:22px 24px; color:var(--ink2); max-width:640px; font-size:.95rem; margin:16px auto; text-align:center; }
.small { font-size:.78rem; color:var(--muted); }
.hidden { display:none !important; }
.profile-head { display:flex; gap:20px; align-items:center; margin-bottom:14px; }
.profile-head .circle { width:64px; height:64px; border-radius:18px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:1.1rem; letter-spacing:.04em; flex:none; }
.profile-art { border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/7; margin:0 0 28px; } .profile-art img { width:100%; height:100%; object-fit:cover; display:block; }

/* scroll reveal */
[data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d, 0ms); }
[data-reveal].in { opacity:1; transform:none; }

/* compare bar */
.cmpbar { position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(140%); z-index:50; background:var(--ink); color:#fff; border-radius:var(--r-pill); padding:10px 10px 10px 22px; display:flex; align-items:center; gap:18px; box-shadow:var(--shadow-lg); transition:transform .6s var(--ease); max-width:calc(100% - 40px); }
.cmpbar.show { transform:translateX(-50%) translateY(0); }
.cmpbar-txt { font-size:.88rem; white-space:nowrap; } .cmpbar-txt b { font-size:1.1rem; margin-right:4px; } .cmpbar-txt .small { color:rgba(255,255,255,.5); }
.cmpbar-names { font-size:.8rem; color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; }
.cmpbar-actions { display:flex; gap:6px; } .cmpbar .btn { padding:10px 16px; font-size:.84rem; } .cmpbar .btn.ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,.25); } .cmpbar .btn.accent { background:#fff; color:var(--ink); border-color:#fff; }
@media (max-width:860px) { .cmpbar { display:none; } }

footer.site { border-top:1px solid var(--line); padding:64px 0 40px; font-size:.88rem; color:var(--ink2); margin-top:40px; }
footer.site .cols { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; } @media (max-width:700px) { footer.site .cols { grid-template-columns:1fr; } }
footer.site ul { list-style:none; padding:0; margin:0; } footer.site li { margin:8px 0; } footer.site a { color:var(--ink2); transition:color var(--t) var(--ease); } footer.site a:hover { color:var(--ink); }
footer.site h3 { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; margin-bottom:14px; }
.foot-bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:20px; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); }

/* view transitions */
::view-transition-old(root) { animation:vt-out .22s var(--ease-io) forwards; } ::view-transition-new(root) { animation:vt-in .45s var(--ease) forwards; }
@keyframes vt-out { to { opacity:0; transform:translateY(-6px); } } @keyframes vt-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } [data-reveal] { opacity:1; transform:none; } .words .w > span { transform:none; } .fade-in { opacity:1; } }

/* featured and pricing */
.featured-sec { margin-top:40px; }
.featured-grid { grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }
.tile.featured .art { box-shadow:0 0 0 2px var(--accent), var(--shadow); }
.tile .direct { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; position:relative; z-index:3; }
.btn.sm { padding:8px 14px; font-size:.8rem; }
.tile.slot { border:1px dashed var(--line2); border-radius:var(--r-lg); padding:10px; background:var(--bg2); }
.tile.slot:hover { border-color:var(--accent); background:var(--accent-soft); }
.slot-art { display:grid; place-items:center; background:repeating-linear-gradient(135deg, #fff 0 10px, var(--bg3) 10px 20px); box-shadow:none !important; position:relative; }
.slot-art .badge { position:absolute; top:12px; left:12px; }
.slot-num { font-size:3rem; font-weight:600; letter-spacing:-.05em; color:var(--line2); }
.tile.slot:hover .slot-num { color:var(--accent); }
.pricing { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin:24px 0 8px; }
.plan { position:relative; background:var(--bg2); border-radius:var(--r-lg); padding:32px; display:flex; flex-direction:column; gap:12px; transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.plan:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.plan.hi { background:var(--ink); color:#fff; } .plan.hi .eyebrow, .plan.hi .spec, .plan.hi li { color:rgba(255,255,255,.75); } .plan.hi .price b { color:#fff; } .plan.hi li::before { color:var(--accent); }
.plan .price b { font-size:2.6rem; font-weight:600; letter-spacing:-.04em; line-height:1; } .plan .price span { margin-left:8px; font-size:.86rem; color:var(--muted); }
.plan .spec { color:var(--ink2); margin:0; font-weight:500; }
.plan ul { list-style:none; padding:0; margin:8px 0 12px; display:flex; flex-direction:column; gap:8px; } .plan li { font-size:.9rem; color:var(--ink2); padding-left:22px; position:relative; } .plan li::before { content:'✓'; position:absolute; left:0; color:var(--moss); font-weight:700; }
.plan .btn { margin-top:auto; align-self:flex-start; }

/* centred prose blocks */
.prose.centred { margin-inline:auto; text-align:left; } .prose.centred > h2 { text-align:center; }
/* homepage content sections */
.bands3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin:24px 0 0; }
.bandcard { position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; background:var(--bg2); color:inherit; min-height:420px; transition:transform var(--t-slow) var(--ease); }
.bandcard:hover { transform:translateY(-4px); }
.bandcard img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform 1.2s var(--ease); } .bandcard:hover img { transform:scale(1.04); }
.bandcard .bc-body { padding:22px 24px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.bandcard .bc-body h3 { font-size:1.3rem; margin:0; } .bandcard .bc-body p { margin:0; color:var(--ink2); font-size:.92rem; }
.bandcard .kv { display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; } .bandcard .kv span { font-size:.78rem; color:var(--muted); } .bandcard .kv b { display:block; font-size:1rem; color:var(--ink); letter-spacing:-.02em; }
.bandcard .arrow { margin-top:auto; padding-top:10px; }
.guides { display:grid; grid-template-columns:1.2fr 1fr; gap:20px; margin:24px 0 0; } @media (max-width:860px) { .guides { grid-template-columns:1fr; } }
.guidecard { position:relative; display:grid; border-radius:var(--r-lg); overflow:hidden; color:#fff; min-height:340px; background:var(--dark); }
.guidecard img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.7; transition:transform 1.2s var(--ease), opacity var(--t-slow) var(--ease); } .guidecard:hover img { transform:scale(1.04); opacity:.55; }
.guidecard::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,20,18,0) 30%, rgba(15,20,18,.9) 100%); }
.guidecard .gc-body { position:relative; z-index:2; align-self:end; padding:26px 28px; } .guidecard h3 { color:#fff; font-size:1.5rem; margin:8px 0 6px; } .guidecard p { color:rgba(255,255,255,.78); margin:0 0 12px; font-size:.95rem; max-width:480px; } .guidecard .arrow { color:#fff; }
.guidecard.light { background:var(--bg2); color:var(--ink); } .guidecard.light::after { display:none; } .guidecard.light img { position:static; opacity:1; aspect-ratio:16/9; height:auto; } .guidecard.light .gc-body { align-self:start; } .guidecard.light h3 { color:var(--ink); } .guidecard.light p { color:var(--ink2); } .guidecard.light .arrow { color:var(--ink); }
.coststrip { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:24px 0 0; }
.coststrip .cs { background:var(--bg2); border-radius:var(--r); padding:22px; } .coststrip .cs b { display:block; font-size:1.6rem; letter-spacing:-.03em; font-weight:600; } .coststrip .cs span { display:block; font-size:.84rem; color:var(--muted); margin-top:4px; }
.ticker { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 0; } .ticker a { font-size:.82rem; font-weight:500; padding:8px 14px; border-radius:var(--r-pill); background:var(--bg2); color:var(--ink2); transition:all var(--t) var(--ease); } .ticker a:hover { background:var(--ink); color:#fff; }

/* mobile menu */
.burger { display:none; width:44px; height:44px; border:1px solid var(--line2); border-radius:var(--r-pill); background:#fff; cursor:pointer; position:relative; padding:0; }
.burger span { position:absolute; left:14px; right:14px; height:2px; background:var(--ink); border-radius:2px; transition:transform var(--t-slow) var(--ease), top var(--t) var(--ease); top:17px; } .burger span:last-child { top:25px; }
.burger[aria-expanded=true] span:first-child { top:21px; transform:rotate(45deg); } .burger[aria-expanded=true] span:last-child { top:21px; transform:rotate(-45deg); }
header.site.dark:not(.scrolled) .burger { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.25); } header.site.dark:not(.scrolled) .burger span { background:#fff; }
.mnav { position:fixed; inset:0; top:0; z-index:35; background:#fff; padding-top:88px; overflow:auto; animation:menu .35s var(--ease); }
@keyframes menu { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.mnav-grid { display:grid; gap:28px; padding-bottom:40px; } .mnav-grid h3 { font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:0 0 10px; } .mnav-grid a { display:block; padding:9px 0; font-size:1.1rem; font-weight:500; border-bottom:1px solid var(--line); } .mnav-grid a.btn { display:inline-flex; border:0; padding:13px 22px; }
.mnav-grid > div > a { animation:up2 .5s var(--ease) both; } @keyframes up2 { from { opacity:0; transform:translateY(8px); } }
@media (max-width:960px) { .burger { display:block; } .nav-cta { display:none; } header.site .wrap { height:68px; } body.menu-open { overflow:hidden; } body.menu-open header.site { background:#fff; } body.menu-open header.site .logo, body.menu-open header.site .burger span { color:var(--ink); background-color:var(--ink); } body.menu-open header.site .burger { background:#fff; border-color:var(--line2); } body.menu-open header.site .logo .mark { background:var(--accent); } }

.units.glance { margin:6px 0 20px; } .units.glance div { flex:1 1 18%; } .units.glance dd { white-space:normal; }
.hero-c .pilltag.light { background:var(--bg3); }

/* posts and sitemap */
.post h2 { font-size:1.5rem; margin-top:1.8em; } .post p strong { color:var(--ink); font-weight:600; } .post ul { padding-left:20px; } .post a { color:var(--accent-ink); font-weight:500; }
.smap { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px; margin:24px 0 0; } .smap h2 { font-size:1.1rem; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--line); } .smap ul { list-style:none; padding:0; margin:0; } .smap li { padding:6px 0; font-size:.94rem; } .smap a:hover { color:var(--accent-ink); }

/* subtle 3D */
.tile, .hubcard, .bandcard, .guidecard, .plan { transform-style:preserve-3d; will-change:transform; }
[data-tilt] { transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
[data-tilt].tilting { transition:transform .08s linear; }
.tile .art, .bandcard img, .guidecard .gc-body, .hubcard h3, .plan .price { transform:translateZ(var(--z, 0)); transition:transform .5s var(--ease); }
.tile:hover .art { --z:10px; } .bandcard:hover img { --z:6px; } .hubcard:hover h3 { --z:8px; } .plan:hover .price { --z:10px; } .guidecard:hover .gc-body { --z:8px; }
.glare { position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(600px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 45%); opacity:0; transition:opacity .4s var(--ease); z-index:2; }
[data-tilt]:hover .glare { opacity:1; }
.tile .art .glare { border-radius:var(--r); }
.hero-art { transform-style:preserve-3d; } .hero-art img { transition:transform .6s var(--ease); }
.hero-dark img.bg { will-change:transform; }
.btn { box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 -2px 0 rgba(0,0,0,.18) inset; } .btn.ghost { box-shadow:0 -2px 0 rgba(0,0,0,.05) inset; } .btn:active { box-shadow:0 2px 0 rgba(0,0,0,.2) inset; }
.cmpbar { transform-style:preserve-3d; }
@media (hover:none), (prefers-reduced-motion:reduce) { [data-tilt] { transform:none !important; } .glare { display:none; } }

/* borough tile map */
.bmap { display:grid; grid-template-columns:minmax(260px,1fr) 2fr; gap:36px; align-items:center; background:var(--bg2); border-radius:var(--r-lg); padding:36px; } @media (max-width:900px) { .bmap { grid-template-columns:1fr; padding:24px; } }
.bmap-side p { color:var(--ink2); max-width:380px; }
.bmap-legend { display:flex; flex-direction:column; gap:6px; margin:8px 0 12px; font-size:.8rem; color:var(--muted); } .bmap-legend i { display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:8px; vertical-align:-2px; border:1px solid var(--line2); }
.bmap-wrap { position:relative; } .bmap-svg { width:100%; height:auto; display:block; overflow:visible; }
.btile rect { fill:var(--bg3); stroke:#fff; stroke-width:2; transition:fill .25s var(--ease), transform .35s var(--ease), filter .35s var(--ease); transform-box:fill-box; transform-origin:center; }
.btile.warm rect { fill:var(--accent-soft); } .btile.hot rect { fill:var(--accent); }
.btile text { font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:-.01em; font-weight:600; fill:var(--ink2); pointer-events:none; } .btile.hot text { fill:#fff; } .btile .bt-n { font-size:14px; fill:var(--accent-ink); } .btile.hot .bt-n { fill:#fff; }
.btile:hover rect { fill:var(--ink); transform:scale(1.12); filter:drop-shadow(0 12px 18px rgba(15,20,18,.25)); } .btile:hover text { fill:#fff; }
.btile:focus-visible rect { stroke:var(--accent); stroke-width:3; }
.bmap-tip { position:absolute; pointer-events:none; background:var(--ink); color:#fff; padding:10px 14px; border-radius:10px; font-size:.82rem; box-shadow:var(--shadow-lg); transform:translate(-50%, calc(-100% - 14px)); white-space:nowrap; z-index:5; display:flex; flex-direction:column; gap:2px; animation:fade .2s var(--ease); opacity:1; }
.bmap-tip b { font-size:.95rem; } .bmap-tip span { color:rgba(255,255,255,.7); } .bmap-tip em { font-style:normal; color:rgba(255,255,255,.55); font-size:.74rem; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.btile { cursor:pointer; outline:none; }