/* BAICA — baltics.ai
   One stylesheet, no frameworks, no JavaScript dependencies.

   Two typefaces only: Golos Text for headings and UI, Inter for reading text.
   One accent hue, used sparingly. Dark and light sections alternate so the page
   has rhythm rather than one long dark corridor. */

/* ---------- tokens ---------- */
:root {
  /* dark surfaces — lifted off pure black so elevation is legible */
  --bg:        #0A0C0F;
  --bg-2:      #0D1014;
  --surface:   #14171C;
  --surface-2: #1A1E24;
  --line:      rgba(255,255,255,.11);
  --line-soft: rgba(255,255,255,.065);

  --fg:        #F4F6F7;
  --fg-2:      #A8B0B8;
  --fg-3:      #737B85;

  /* light surfaces — warm paper, not blue-grey */
  --paper:     #FBFBFA;
  --paper-2:   #F3F3F1;
  --ink:       #10141A;
  --ink-2:     #5A626C;
  --ink-3:     #8A929B;
  --paper-line: rgba(16,20,26,.11);

  /* one accent, two steps: bright for dark ground, deep for paper */
  --accent:    #3DDDE8;
  --accent-ink:#00889B;

  --font-display: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1320px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --sec: clamp(4.5rem, 9vw, 8.5rem);
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --header-h: 68px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.021em;
  margin: 0;
  text-wrap: balance;
}
h3, h4 { line-height: 1.24; letter-spacing: -.014em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 760px; }
.section { padding-block: var(--sec); }
.section--tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section--alt { background: var(--bg-2); }
/* Dark sections get one very soft ambient light so they read as space rather
   than as a black rectangle. */
.section--glow { position: relative; isolation: isolate; overflow: hidden; }
.section--glow::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; translate: -50% 0; top: -30%;
  width: min(120rem, 160%); aspect-ratio: 2 / 1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(61,221,232,.09) 0%, rgba(61,221,232,0) 70%);
}
.section--glow.section--low::before { top: auto; bottom: -45%; }

/* Light sections re-point every token the components read, so no component
   needs a second set of rules further down. */
.section--paper {
  background: var(--paper);
  --bg: var(--paper); --bg-2: var(--paper-2);
  --surface: #fff; --surface-2: var(--paper-2);
  --line: var(--paper-line); --line-soft: rgba(16,20,26,.07);
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
  --accent: var(--accent-ink);
  color: var(--ink);
}

/* ---------- typography ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 1.15rem;
}
.h-xl { font-size: clamp(2.6rem, 5.6vw, 4.5rem); }
.h-lg { font-size: clamp(2rem, 3.8vw, 3rem); }
.h-md { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.h-sm { font-size: clamp(1.1rem, 1.6vw, 1.28rem); }

.lead { font-size: clamp(1.06rem, 1.4vw, 1.22rem); line-height: 1.58; color: var(--fg-2); max-width: 60ch; }
.muted { color: var(--fg-2); }
.stamp { font-size: .84rem; color: var(--fg-3); }
.tag {
  font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); font-weight: 600;
}

.section-head { max-width: 40rem; margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .lead { margin-inline: auto; }
.section-head .lead { margin-top: 1.1rem; }
.head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.head-row > div { max-width: 34rem; }

/* long-form body copy */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-top: 3.25rem; margin-bottom: .9rem; }
.prose h3 { font-size: clamp(1.12rem, 1.7vw, 1.28rem); margin-top: 2.25rem; margin-bottom: .55rem; }
.prose > h2:first-child, .prose > h3:first-child, .prose > .btn-row:first-child { margin-top: 0; }
.prose p + p { margin-top: 1.1rem; }
.prose > p { color: var(--fg-2); }
.prose ul, .prose ol { margin: 1.25rem 0; list-style: none; }
.prose li { position: relative; padding-left: 1.6rem; margin-bottom: .8rem; color: var(--fg-2); }
.prose li::before { content: ""; position: absolute; left: .1rem; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .75; }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; }
.prose ol li::before {
  content: counter(n); top: 0; left: 0; width: auto; height: auto; border-radius: 0;
  background: none; color: var(--accent); font-size: .8rem; font-weight: 600;
  font-family: var(--font-display); font-variant-numeric: tabular-nums; opacity: 1;
}
.prose strong { color: var(--fg); font-weight: 600; }
.prose a:not(.btn):not(.link-arrow) { color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:not(.btn):not(.link-arrow):hover { color: var(--accent); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header .bar { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; flex: none; margin-right: auto; }
.brand img { height: 26px; width: auto; }
.nav { display: none; gap: clamp(1.15rem, 1.9vw, 1.9rem); font-family: var(--font-display); font-size: .92rem; margin-right: clamp(1.5rem, 3vw, 2.75rem); }
.nav a { color: var(--fg-2); text-decoration: none; transition: color .18s; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); }
.header-cta { display: flex; align-items: center; gap: .6rem; flex: none; }

.menu { position: relative; }
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; width: 15px; height: 9px; border-top: 1.5px solid var(--fg); border-bottom: 1.5px solid var(--fg); }
.menu[open] > summary::after { border-bottom-color: transparent; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + .65rem);
  width: min(78vw, 290px); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: .4rem; display: grid;
  box-shadow: 0 24px 48px -18px rgba(0,0,0,.7);
}
.menu-panel a { padding: .8rem .9rem; text-decoration: none; color: var(--fg); font-family: var(--font-display); font-size: 1rem; border-radius: var(--r-sm); }
.menu-panel a:hover { background: var(--surface-2); }

@media (min-width: 1040px) {
  .nav { display: flex; }
  .menu { display: none; }
  .brand img { height: 29px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .78rem 1.35rem; border-radius: 999px;
  font-family: var(--font-display); font-size: .92rem; font-weight: 500;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.btn::after { content: "→"; font-size: .95em; line-height: 1; opacity: .75; }
.btn--plain::after { content: none; }
.btn--primary { background: var(--fg); color: var(--bg); }
.btn--primary:hover { opacity: .88; }
.btn--ghost { border-color: var(--line); color: var(--fg); }
.btn--ghost:hover { border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-display); font-size: .88rem; font-weight: 500;
  color: var(--accent); text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .2s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- hero ---------- */
/* Built entirely from gradients: no image request, and it stays crisp at any
   viewport instead of cropping a photograph. */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100svh - var(--header-h));
  display: grid; align-items: center;
  background: var(--bg);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; }
/* Scrim: dark enough for white type at the top, transparent over the light in
   the lower half, and fading to the page colour at the bottom edge. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(10,12,15,.80) 0%, rgba(10,12,15,.50) 26%,
    rgba(10,12,15,.22) 56%, rgba(10,12,15,.55) 86%, var(--bg) 100%);
}
.hero-inner { position: relative; z-index: 2; padding-block: clamp(4rem, 10vw, 7rem); width: 100%; text-align: center; }
.hero h1 { max-width: 26ch; margin-inline: auto; }
/* The backdrop is light in places, so hero copy needs more than --fg-2. */
.hero .lead { margin: 1.75rem auto 0; max-width: 52ch; color: rgba(246,249,251,.92); }
.hero .btn-row { margin-top: 2.5rem; justify-content: center; }
@media (max-height: 640px) { .hero { min-height: 0; } }

.page-head { padding-block: clamp(3.5rem, 7vw, 5.5rem) 0; }
/* The glow sits behind the title, so a subpage does not open on flat black. */
.page-head.section--glow::before { top: -55%; width: min(90rem, 130%); }
.page-head h1 { max-width: 20ch; }
.page-head .lead { margin-top: 1.5rem; }
.page-head .stamp { margin-top: 1.5rem; }
.page-head + .section--tight { padding-top: clamp(2.5rem, 4vw, 3.5rem); }

/* ---------- document + rail ---------- */
.doc { display: grid; gap: clamp(2.5rem, 4vw, 4.5rem); align-items: start; }
@media (min-width: 1000px) { .doc { grid-template-columns: minmax(0, 1fr) 280px; } }
.rail { display: grid; gap: 2rem; font-size: .92rem; }
@media (min-width: 1000px) { .rail { position: sticky; top: calc(var(--header-h) + 2rem); } }
.rail h2 {
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-3); font-weight: 600; margin-bottom: 1rem;
}
.rail ul { list-style: none; display: grid; gap: .7rem; }
.rail a { color: var(--fg-2); text-decoration: none; line-height: 1.45; display: block; }
.rail a:hover { color: var(--fg); }
.rail .toc a { border-left: 1px solid var(--line); padding-left: .9rem; }
.rail .toc a:hover { border-color: var(--accent); }
.rail p { color: var(--fg-2); }
.rail .btn { margin-top: 1rem; }

/* ---------- cards ---------- */
/* Spaced cards with a hairline, not a one-pixel mosaic grid. */
.grid { display: grid; gap: 2.25rem 2.5rem; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* No boxes. A hairline above each item gives the grid its structure, and the
   type does the rest. */
.card { border-top: 1px solid var(--line); padding-top: 1.75rem; }
.cell {
  border-top: 1px solid var(--line); padding-top: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.cell h3 { font-size: 1.14rem; }
.cell p { color: var(--fg-2); font-size: .95rem; }
.cell-num { font-family: var(--font-display); font-size: .78rem; font-weight: 600; color: var(--accent); letter-spacing: .06em; }
.cell .link-arrow { margin-top: auto; padding-top: 1rem; }
a.cell { text-decoration: none; transition: border-color .2s; }
a.cell:hover { border-top-color: var(--accent); }
a.cell:hover h3 { color: var(--accent); }

/* numbered rows */
.rows { list-style: none; }
.rows li { display: grid; grid-template-columns: 2rem 1fr; gap: .5rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line-soft); }
.rows li:first-child { border-top: 1px solid var(--line-soft); }
.rows .n { font-family: var(--font-display); color: var(--accent); font-size: .82rem; font-weight: 600; padding-top: .18rem; }

.defs { display: grid; gap: 1.6rem; }
@media (min-width: 700px) { .defs--2 { grid-template-columns: 1fr 1fr; } }
.defs dt { font-family: var(--font-display); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: .45rem; }
.defs dd { margin: 0; color: var(--fg-2); font-size: .95rem; }

.split { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } }
.split--even { grid-template-columns: 1fr; }
@media (min-width: 900px) { .split--even { grid-template-columns: 1fr 1fr; } }
/* A portrait photograph beside a short list would otherwise tower over it. */
.split--even > img { border-radius: var(--r); width: 100%; max-height: 30rem; object-fit: cover; object-position: 50% 35%; }

/* ---------- quote ---------- */
.quote { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 800px) { .quote { grid-template-columns: 200px 1fr; gap: 3rem; } }
.quote img { border-radius: var(--r); width: 100%; }
.quote blockquote { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.42; letter-spacing: -.015em; }
.quote blockquote span { color: var(--fg-2); }
.quote figcaption { margin-top: 1.4rem; font-size: .92rem; }
.quote figcaption b { display: block; font-family: var(--font-display); font-weight: 500; }
.quote figcaption span { color: var(--fg-3); font-size: .86rem; }

/* ---------- feature rows ---------- */
.feature { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.feature + .feature { margin-top: clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .tile { order: 2; }
}
/* An image backdrop with the figure floated on top, after the pattern on
   exa.ai. The card is real markup, so its text stays selectable. */
.tile {
  position: relative; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden;
  display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem);
  isolation: isolate;
}
.tile-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.tile-card {
  position: relative; z-index: 2;
  width: 100%; background: var(--paper); border-radius: 12px; overflow: hidden;
  box-shadow: 0 32px 64px -24px rgba(4,14,38,.55), 0 4px 14px -6px rgba(4,14,38,.35);
}
.tile-card img { width: 100%; }
.tile-chip {
  position: absolute; z-index: 3; left: clamp(1rem, 2.5vw, 1.5rem); bottom: clamp(1rem, 2.5vw, 1.5rem);
  font-family: var(--font-display); font-size: .66rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  background: #0A0C0F; color: #fff; padding: .48rem .7rem; border-radius: 6px;
}
@media (max-width: 560px) { .tile { aspect-ratio: 4 / 5; } }
.feature-text h3 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); max-width: 22ch; margin-top: .9rem; }
.feature-text > p { color: var(--fg-2); margin-top: 1.1rem; max-width: 46ch; }
.feature-text .btn-row { margin-top: 1.75rem; }
.proof { margin-top: 2.25rem; padding-top: 1.35rem; border-top: 1px solid var(--line); }
.proof dt { font-family: var(--font-display); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: .5rem; }
.proof dd { margin: 0; font-size: .95rem; color: var(--fg-2); max-width: 46ch; }

/* ---------- table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: .94rem; min-width: 460px; }
th, td { text-align: left; padding: .95rem 1.2rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-family: var(--font-display); font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
tbody tr:last-child td { border-bottom: none; }
td:first-child { color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }

.ticks { list-style: none; display: grid; gap: .6rem; font-size: .95rem; }
.ticks li { display: grid; grid-template-columns: .9rem 1fr; gap: .65rem; align-items: baseline; color: var(--fg-2); }
.ticks li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-.15em); }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.15rem; max-width: 540px; }
.field { display: grid; gap: .45rem; }
.field label, .field > span { font-family: var(--font-display); font-size: .88rem; font-weight: 500; }
.req { color: var(--accent); }
input[type="text"], input[type="email"], select, textarea {
  width: 100%; font: inherit; font-size: .97rem; font-family: var(--font-body);
  color: var(--fg); background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .8rem .95rem;
}
textarea { min-height: 130px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--fg-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.4rem;
}
select option { background: var(--surface); color: var(--fg); }
.consent { display: grid; grid-template-columns: 1.05rem 1fr; gap: .7rem; align-items: start; font-size: .88rem; color: var(--fg-2); line-height: 1.5; }
.consent input { margin-top: .28rem; accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }
.consent a { color: var(--fg); }
.radios { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.radios label { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--fg-2); }
.radios input { accent-color: var(--accent); }
.form-note { font-size: .85rem; color: var(--fg-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter { text-align: center; }
.newsletter .form { margin-inline: auto; max-width: 520px; gap: .85rem; }
.newsletter .field { display: block; }
.newsletter .field label { position: absolute; left: -9999px; }
/* Stacked by default (the footer column is narrow); one row in the wide
   closing section. */
.subscribe-row { display: grid; gap: .6rem; justify-items: start; }
.subscribe-row input { width: 100%; }
.newsletter .subscribe-row { display: flex; }
.newsletter .subscribe-row input { flex: 1; }
.newsletter .subscribe-row .btn { flex: none; }
.newsletter .consent { text-align: left; font-size: .84rem; }
@media (max-width: 520px) { .subscribe-row { flex-direction: column; } .subscribe-row .btn { justify-content: center; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0;
  font-family: var(--font-display); font-weight: 500; font-size: 1.04rem; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .5rem; top: 50%; width: 11px; height: 11px; margin-top: -8px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details > p { padding-bottom: 1.35rem; color: var(--fg-2); font-size: .97rem; max-width: 68ch; }

/* ---------- events ---------- */
.events { display: grid; }
.event { border-top: 1px solid var(--line); padding-block: clamp(1.75rem, 3vw, 2.5rem); display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .event { grid-template-columns: 200px minmax(0, 1fr); gap: 2.5rem; } }
.event-when { display: grid; gap: .45rem; align-content: start; }
.event-date { font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; }
.event-meta { font-size: .85rem; color: var(--fg-3); }
.event-body h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
.event-body p { color: var(--fg-2); font-size: .96rem; margin-top: .6rem; max-width: 66ch; }
.event-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.1rem; font-size: .89rem; color: var(--fg-2); }
.event-facts span { display: inline-flex; gap: .45rem; }
.event-facts b { font-weight: 500; color: var(--fg-3); }
/* A tracked label, not a pill. */
.status {
  justify-self: start;
  font-family: var(--font-display); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600; color: var(--fg-3);
}
.status--next { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.status--planned { color: var(--fg-2); }
.status--past { opacity: .75; }
.event details { margin-top: 1.25rem; }
.event summary { list-style: none; cursor: pointer; font-family: var(--font-display); font-size: .88rem; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: .45rem; }
.event summary::-webkit-details-marker { display: none; }
.event summary::after { content: "+"; font-size: 1.1em; }
.event details[open] summary::after { content: "\2013"; }
.event details > * { margin-top: 1rem; }

/* ---------- news ---------- */
.news-list { list-style: none; border-top: 1px solid var(--line-soft); }
.news-list li { border-bottom: 1px solid var(--line-soft); }
.news-list a { display: grid; gap: .5rem; padding: 1.9rem 0; text-decoration: none; transition: opacity .2s; }
.news-list a:hover { opacity: .7; }
.news-list time { font-family: var(--font-display); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.news-list h3 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); }
.news-list p { color: var(--fg-2); font-size: .96rem; max-width: 76ch; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line-soft); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; }
.footer-grid { display: grid; gap: 2.75rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .footer-grid { grid-template-columns: 1fr 1fr 1.2fr 1.5fr; gap: 2.5rem 3rem; } }
.footer-grid h4 { font-family: var(--font-display); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; margin-bottom: 1.15rem; }
.footer-grid ul { list-style: none; display: grid; gap: .7rem; font-size: .94rem; }
.footer-grid a { color: var(--fg-2); text-decoration: none; }
.footer-grid a:hover { color: var(--fg); }
.footer-grid li { color: var(--fg-2); }
.footer-legal { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .85rem; color: var(--fg-3); }

/* ---------- utilities ---------- */
.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--fg); color: var(--bg); padding: .75rem 1.15rem; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
.mt-1 { margin-top: .75rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.25rem; } .mt-4 { margin-top: 3.25rem; }
hr.rule { border: none; border-top: 1px solid var(--line-soft); margin: 0; }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  body { font-size: 1rem; overflow-wrap: break-word; }
  .h-xl { font-size: clamp(2.1rem, 9vw, 2.75rem); }
  .h-lg { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }
  .hero h1, .hero .lead, .page-head h1 { max-width: none; }
  /* A phone crops the backdrop to a narrow sliver; aim it at the light. */
  .hero-bg { object-position: 72% 62%; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .quote img { max-width: 170px; }
  .footer-legal { flex-direction: column; gap: .45rem; }
}
/* Logo + CTA + menu button do not fit a 390px viewport together. Below this the
   CTA drops out of the bar; Contact is the last item in the menu panel anyway. */
@media (max-width: 620px) {
  .header-cta > .btn { display: none; }
  .brand img { height: 24px; }
}
@media (pointer: coarse) {
  .menu-panel a { padding: .9rem; }
  .faq summary { padding-block: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- HubSpot embeds ---------- */
/* HubSpot renders its own markup, so the site's field styling is re-declared
   against its class names rather than ours. Tokens are inherited, so these
   forms invert correctly inside a .section--paper like everything else. */
.hs-embed { max-width: 540px; }
.newsletter .hs-embed { margin-inline: auto; text-align: left; }
.hs-embed .hs-form { display: grid; gap: 1.15rem; }
.hs-embed .hs-form-field > label,
.hs-embed .hs-form-field > label span { font-family: var(--font-display); font-size: .88rem; font-weight: 500; color: var(--fg); }
.hs-embed .hs-form-field { display: grid; gap: .45rem; }
.hs-embed .hs-field-desc { font-size: .84rem; color: var(--fg-3); }
.hs-embed .hs-form-required { color: var(--accent); }
.hs-embed .hs-input,
.hs-embed input[type="text"], .hs-embed input[type="email"],
.hs-embed input[type="tel"], .hs-embed select, .hs-embed textarea {
  width: 100%; font: inherit; font-size: .97rem; font-family: var(--font-body);
  color: var(--fg); background: color-mix(in srgb, var(--fg) 4%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: .8rem .95rem;
}
.hs-embed textarea { min-height: 130px; resize: vertical; }
.hs-embed .hs-input::placeholder { color: var(--fg-3); }
.hs-embed .hs-input:focus { border-color: var(--accent); outline: none; }
.hs-embed select option { background: var(--surface); color: var(--fg); }

/* checkbox and radio groups */
.hs-embed .inputs-list { list-style: none; display: grid; gap: .6rem; }
.hs-embed .hs-form-booleancheckbox label,
.hs-embed .hs-form-checkbox label,
.hs-embed .hs-form-radio label {
  display: grid; grid-template-columns: 1.05rem 1fr; gap: .7rem; align-items: start;
  font-family: var(--font-body); font-size: .88rem; font-weight: 400;
  color: var(--fg-2); line-height: 1.5;
}
.hs-embed input[type="checkbox"], .hs-embed input[type="radio"] {
  width: 1.05rem; height: 1.05rem; margin: .25rem 0 0; accent-color: var(--accent);
}
.hs-embed .legal-consent-container { font-size: .88rem; color: var(--fg-2); }
.hs-embed .legal-consent-container p { margin: 0 0 .6rem; }
.hs-embed a { color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); text-underline-offset: 3px; }

/* submit button, matched to .btn--primary */
.hs-embed .hs-button {
  display: inline-flex; align-items: center; justify-self: start;
  padding: .78rem 1.35rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--fg); color: var(--bg); cursor: pointer;
  font-family: var(--font-display); font-size: .92rem; font-weight: 500;
  transition: opacity .2s;
}
.hs-embed .hs-button:hover { opacity: .88; }

/* validation and confirmation */
.hs-embed .hs-error-msgs { list-style: none; display: grid; gap: .3rem; }
.hs-embed .hs-error-msg, .hs-embed .hs-main-font-element { color: #ff8087; font-size: .85rem; }
.section--paper .hs-embed .hs-error-msg, .section--paper .hs-embed .hs-main-font-element { color: #b3261e; }
.hs-embed .submitted-message { color: var(--fg-2); }