.hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--fade) 0%, var(--fade) 22%, transparent 62%); }
.hero-page .lead { max-width: 500px; }
@media (max-width: 840px) { .hero-art::after { background: linear-gradient(180deg, var(--fade) 30%, transparent 100%); } }

.hero .lead { color: var(--text); text-shadow: none; }
.hero .coords { color: var(--text); }
.btn-ghost { background: transparent; color: var(--heading); box-shadow: inset 0 0 0 1.5px var(--heading); backdrop-filter: none; }
.menu-toggle { border-color: var(--heading); }
.tag-current, .tag-exited, .tag-past { background: var(--bg-2); color: var(--heading); }

:root { --bg:#f3f9fc; --bg-2:#e3f0f6; --surface:#fff; --line:rgba(20,89,131,.12); --text:#1d3340; --muted:#587080; --heading:#0f2733;
  --accent:#ff6b35; --accent-2:#2d86b8; --sun:linear-gradient(90deg,#2d86b8,#3e6b4f); --btn:#145983; --btn-text:#fff;
  --hdr:rgba(243,249,252,.88); --ftr:#0f2733; --radius:16px; --display:'Hanken Grotesk', sans-serif; --body:'Hanken Grotesk', sans-serif; --fade:rgba(243,249,252,.9); }
h1 { font-weight: 800; letter-spacing: -.04em; } h2 { font-weight: 800; letter-spacing: -.03em; } h3 { font-weight: 700; }
.mark { background: linear-gradient(180deg,#5d7391,#3e6b4f 55%,#145983); color: #fff; } .btn:hover { background: #ff6b35; box-shadow: none; }
.icon, .logo { background: #e3f0f6; } .avatar { background: linear-gradient(180deg,#ffffff,#5d7391 30%,#3e6b4f 65%,#145983); color: #fff; }
.cta { background: linear-gradient(180deg,#e3f0f6,#d6eadf); } .ftr { color: #9bb2c0; } .ftr .brand-name { color: #fff; }

.hero-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-art:has(.hero-photo)::after { background: linear-gradient(90deg, rgba(8,24,34,.78) 0%, rgba(8,24,34,.55) 40%, rgba(8,24,34,.05) 75%); }
@media (max-width: 840px) { .hero-art:has(.hero-photo)::after { background: rgba(8,24,34,.6); } }
.hero:has(.hero-photo) h1, .hero:has(.hero-photo) .lead, .hero:has(.hero-photo) .coords { color: #fff; }
.hero:has(.hero-photo) h1 span { background: linear-gradient(90deg,#8fd3ff,#b6f0c8); -webkit-background-clip: text; background-clip: text; }
.hero:has(.hero-photo) .eyebrow { color: #ffb38a; }
.hero:has(.hero-photo) .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.hero:has(.hero-photo) .hero-inner { padding-bottom: clamp(110px, 14vw, 170px); }