/* ============================================================
   OddStorm Company — site styles on top of OSDS (design.css).
   Per-app override (13-per-app-overrides.md): the company is the parent
   "patron" brand, so it keeps a BLUE accent (distinct from the green
   product sites) while inheriting the full OSDS surface/theme/typography
   system. Logo stays green (brand mark). Mobile-first throughout.
   ============================================================ */

/* ── Blue identity override (unlayered → beats OSDS @layer :root) ──────
   The company is the blue "patron" brand: blue accent + blue-tinted neutral
   surfaces (OSDS ships green-tinted surfaces for the product sites). Logo
   stays green. */
:root {
  --primary:      #4f6bf0;
  --primary-soft: #7d97ff;
  --primary-deep: #3a52d6;
  --on-primary:   #ffffff;
  --brand-gradient: linear-gradient(135deg, #4f6bf0 0%, #7d97ff 100%);
  --accent-glow: rgba(79, 107, 240, 0.42);
  --wrap: 1200px;

  /* Blue-tinted neutral surfaces (replace OSDS green tint) */
  --bg:                        #0a0c14;
  --surface:                   #11141e;
  --surface-container-low:     #12151f;
  --surface-container:         #161a26;
  --surface-container-high:    #1d2230;
  --surface-container-highest: #242b3b;
  --border:        #232a3b;
  --border-strong: #2f3850;
  --text:       #e9ecf4;
  --text-muted: #98a2ba;
  --text-dim:   #7c86a2;   /* AA 5.0 on surface-container-low (Lighthouse-measured) */
}
html.light {
  --primary:      #2f47cf;   /* AA on light bg */
  --primary-soft: #3a52d6;
  --primary-deep: #243aa8;
  --accent-glow: rgba(47, 71, 207, 0.20);

  --bg:                        #f4f6fc;
  --surface:                   #ffffff;
  --surface-container-low:     #eef1fa;
  --surface-container:         #f1f4fc;
  --surface-container-high:    #e7ecf8;
  --surface-container-highest: #dfe6f5;
  --border:        #e2e7f3;
  --border-strong: #c9d2e8;
  --text:       #161a24;
  --text-muted: #4a5570;
  --text-dim:   #5d6880;   /* AA 4.95 on #eef1fa */
}

/* ── Base ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.eyebrow { color: var(--primary-soft); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }

/* ── Header ─────────────────────────────────────────────────
   Base chrome (.hdr, .hdr-inner, .hdr-brand, .hdr-logo, .hdr-title,
   .hdr-nav, .hdr-nav-link, .hdr-actions, .hdr-icon-btn, .hdr-menu-btn,
   .skip-link, .theme-icon) comes from OSDS design.css — do NOT redefine
   it here (continuity across OSDS versions). Below: company-only pieces
   (wordmark tag, products dropdown, CTA) + true overrides. */
.hdr { z-index: 100; }                      /* above Lenis content layers */
.hdr-logo { will-change: transform; }        /* scroll-spin runs on GPU */
.hdr-title { font-weight: 800; white-space: nowrap; }
.hdr-tag { color: var(--primary-soft); font-weight: 700; }
.hdr-nav-chev { width: 15px; height: 15px; opacity: .7; }
.hdr-nav-group { position: relative; }
.hdr-dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 250px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-md); padding: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-short) var(--ease-emphasized), transform var(--dur-short) var(--ease-emphasized), visibility var(--dur-short); }
/* Invisible hover bridge over the 8px gap between the nav link and the
   menu — without it the pointer falls out of :hover mid-gap and the
   dropdown flickers closed/open on the way down. */
.hdr-dropdown::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.hdr-nav-group:hover .hdr-dropdown, .hdr-nav-group:focus-within .hdr-dropdown,
.hdr-nav-group.is-open .hdr-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.hdr-dropdown-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.hdr-dropdown-all { justify-content: space-between; color: var(--primary-soft); }
.hdr-dropdown-all svg { width: 16px; height: 16px; }
.hdr-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: var(--shape-sm); text-decoration: none; color: var(--text); }
.hdr-dropdown-item:hover { background: var(--surface-container-high); }
.hdr-dropdown-name { font-weight: 600; }

/* ── Product brand-mark chip (real product logos) ─────────────
   White plate on both themes: the vendored raster logos are drawn for
   light backgrounds; the plate keeps them legible on the dark theme and
   uniform next to the inline SVG marks. Accent-tinted soft shadow ties
   each chip to its product colour. */
.pmark { display: grid; place-items: center; flex: none; background: #fff; border: 1px solid var(--border); overflow: hidden; }
.pmark svg, .pmark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pmark--sm { width: 32px; height: 32px; border-radius: 9px; padding: 5px; }
.pmark--md { width: 50px; height: 50px; border-radius: 13px; padding: 8px; box-shadow: 0 8px 22px color-mix(in srgb, var(--pa) 30%, transparent); }
.pmark--lg { width: 60px; height: 60px; border-radius: 16px; padding: 9px; margin-bottom: 18px; box-shadow: 0 10px 26px color-mix(in srgb, var(--pa) 30%, transparent); }
.hdr-cta { padding: 9px 18px; }

/* ── Drawer (mobile) ──────────────────────────────────────────
   Base .drawer chrome is OSDS. Company-only rows below. The locale
   switcher (header + drawer) is the OSDS component — no styles here. */
.drawer-group-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); padding: 8px 12px 4px; }
.drawer-divider { height: 1px; background: var(--border); margin: 10px 4px; }
.drawer-foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: 12px; }
.drawer-cta { display: flex; justify-content: center; margin: 2px 12px 12px; }
.drawer-row-label { font-weight: 600; }

/* ── Sections / headings ──────────────────────────────────── */
.hm-section { padding: clamp(54px, 8vw, 104px) 0; }
.hm-section--alt { background: var(--surface-container-low); border-block: 1px solid var(--border); }
.hm-head { max-width: 720px; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; }
.hm-h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; }
.hm-lede { color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; margin: 0; }

/* ── Hero ─────────────────────────────────────────────────── */
.hm-hero { position: relative; overflow: hidden; padding: clamp(60px, 11vw, 132px) 0 clamp(48px, 8vw, 96px); }
.hm-hero-bg { position: absolute; inset: 0; z-index: 0; background:
    radial-gradient(1100px 520px at 78% -8%, var(--accent-glow), transparent 60%),
    radial-gradient(760px 420px at 8% 18%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 62%); }
.hm-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hm-hero-title { font-size: clamp(2.3rem, 6vw, 4.1rem); line-height: 1.04; font-weight: 850; letter-spacing: -.03em; margin: 0 0 20px; }
.hm-hero-sub { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--text-muted); line-height: 1.6; max-width: 33ch; margin: 0 0 30px; }
.hm-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hm-hero-since { margin: 26px 0 0; color: var(--text-dim); font-size: .9rem; font-weight: 600; letter-spacing: .02em; }
.hm-hero-visual { display: grid; place-items: center; }
.hm-hero-orb { --orbw: min(420px, 80vw); position: relative; display: grid; place-items: center; width: var(--orbw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%); }
.hm-hero-orb::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--primary) 35%, transparent); }
.hm-hero-mark { width: 52%; height: 52%; filter: drop-shadow(0 18px 40px rgba(0,0,0,.4)); animation: floaty 7s var(--ease-emphasized) infinite; }
@keyframes orbspin { to { transform: rotate(360deg); } }
@keyframes floaty { 0%,100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } }

/* Product satellites orbit the company mark. The container spins; each chip
   counter-rotates (same duration, reversed + static angle offset) so the
   logos stay upright the whole way round. Decorative only. */
.hm-orbit { position: absolute; inset: 0; animation: orbspin 70s linear infinite; pointer-events: none; }
.hm-orbit-sat { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(calc(var(--i) * 72deg)); }
/* Satellite size: big enough to hold its own against the central mark
   (~218px). --sat overrides the .pmark--sm sizing. */
.hm-orbit-sat .pmark { --sat: 58px; position: absolute; width: var(--sat); height: var(--sat); border-radius: 15px; padding: 9px; left: calc(var(--sat) / -2); top: calc(var(--orbw) * -0.42 - var(--sat) / 2); box-shadow: 0 8px 22px rgba(0,0,0,.32); animation: orbcounter 70s linear infinite; }
@keyframes orbcounter {
  from { transform: rotate(calc(var(--i) * -72deg)); }
  to   { transform: rotate(calc(var(--i) * -72deg - 360deg)); }
}

/* ── Products grid ────────────────────────────────────────── */
.hm-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.hm-product { position: relative; display: flex; flex-direction: column; padding: 26px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-lg); overflow: hidden; transition: transform var(--dur-medium) var(--ease-emphasized), border-color var(--dur-medium); }
.hm-product::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pa); opacity: .9; }
.hm-product:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--pa) 50%, var(--border)); }
.hm-product-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hm-product-est { font-size: .8rem; font-weight: 700; color: var(--text-dim); }
.hm-product-name { font-size: 1.35rem; font-weight: 800; margin: 0 0 4px; }
.hm-product-tag { color: var(--pa); font-weight: 700; font-size: .92rem; margin: 0 0 12px; }
html.light .hm-product-tag { color: var(--pad); }
.hm-product-sum { color: var(--text-muted); line-height: 1.6; margin: 0 0 22px; flex: 1; }
.hm-product-actions { display: flex; align-items: center; gap: 18px; }
.hm-product-visit, .hm-product-learn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; font-size: .92rem; }
.hm-product-visit { color: var(--text); position: relative; z-index: 1; }   /* stays clickable above the stretched link */
.hm-product-learn { color: var(--text-muted); }
/* Whole card navigates to the detail page ("Learn more" stretched over the
   card); the external "Visit" link sits above it on its own layer. */
.hm-product-learn::after { content: ""; position: absolute; inset: 0; }
.hm-product:focus-within { border-color: color-mix(in srgb, var(--pa) 60%, var(--border)); }
.hm-product-visit svg, .hm-product-learn svg { width: 16px; height: 16px; transition: transform var(--dur-short); }
.hm-product-visit:hover svg { transform: translate(2px,-2px); }
.hm-product-learn:hover { color: var(--primary-soft); }
.hm-product-learn:hover svg { transform: translateX(3px); }

/* ── Capabilities ─────────────────────────────────────────── */
.hm-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.hm-cap { padding: 28px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-lg); }
.hm-cap-num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--shape-pill); background: var(--brand-gradient); color: #fff; font-weight: 800; margin-bottom: 18px; }
.hm-cap-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 10px; }
.hm-cap-body { color: var(--text-muted); line-height: 1.65; margin: 0; }
.hm-cap-b2b { text-align: center; margin: 30px 0 0; font-weight: 700; }
.hm-cap-b2b a { display: inline-flex; align-items: center; gap: 7px; color: var(--primary-soft); text-decoration: none; }
.hm-cap-b2b a:hover { text-decoration: underline; }
.hm-cap-b2b svg { width: 17px; height: 17px; }
.hm-metric-num--word { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }

/* ── Metrics ──────────────────────────────────────────────── */
.hm-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.hm-metric-num { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 850; letter-spacing: -.02em; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-metric-label { color: var(--text-muted); font-weight: 600; margin-top: 6px; }

/* ── Timeline ─────────────────────────────────────────────── */
.hm-section--tl { padding-top: 0; }
.hm-tl { list-style: none; display: flex; gap: 0; padding: 26px 0 8px; margin: 0; position: relative; overflow-x: auto; scroll-snap-type: x proximity; }
.hm-tl::before { content: ""; position: absolute; top: 31px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--border-strong) 8%, var(--border-strong) 92%, transparent); }
.hm-tl-item { flex: 1 0 150px; min-width: 150px; position: relative; padding: 24px 18px 0 0; scroll-snap-align: start; }
.hm-tl-dot { position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-gradient); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent); }
.hm-tl-year { display: block; font-weight: 850; font-size: 1.25rem; letter-spacing: -.01em; margin-bottom: 4px; }
.hm-tl-label { color: var(--text-muted); font-size: .95rem; line-height: 1.45; display: block; }

/* ── One Man Army ─────────────────────────────────────────── */
.hm-oma { max-width: 760px; margin-inline: auto; text-align: center; }
.hm-oma-card { display: inline-flex; align-items: center; gap: 22px; margin-top: 14px; padding: 22px 30px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-xl); text-align: left; }
.hm-oma-badge { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: var(--shape-lg); background: var(--brand-gradient); color: #fff; font-weight: 850; font-size: 1.2rem; letter-spacing: .04em; }
.hm-oma-role { font-weight: 800; font-size: 1.1rem; margin: 0 0 4px; }
.hm-oma-body { color: var(--text-muted); margin: 0; line-height: 1.55; }

/* ── CTA band ─────────────────────────────────────────────── */
.hm-cta { padding: clamp(56px, 9vw, 110px) 0; background:
    radial-gradient(800px 360px at 50% 0%, var(--accent-glow), transparent 65%), var(--surface-container-low); border-top: 1px solid var(--border); }
.hm-cta-inner { max-width: 660px; margin-inline: auto; text-align: center; }
.hm-cta-title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 850; letter-spacing: -.02em; margin: 0 0 14px; }
.hm-cta-sub { color: var(--text-muted); font-size: 1.1rem; margin: 0 0 28px; }

/* ── Sub-page hero ────────────────────────────────────────── */
.sub-hero { padding: clamp(52px, 8vw, 96px) 0 clamp(30px, 5vw, 52px); position: relative; }
.sub-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(720px 320px at 30% 0%, var(--accent-glow), transparent 62%); }
.sub-hero--tight { padding-bottom: 18px; }
.sub-hero-title { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 850; letter-spacing: -.02em; margin: 0 0 14px; }
.sub-hero-sub { color: var(--text-muted); font-size: 1.15rem; max-width: 60ch; margin: 0; line-height: 1.6; }

/* ── Product detail ───────────────────────────────────────── */
.pd-hero { padding: clamp(40px,7vw,80px) 0; background: linear-gradient(180deg, color-mix(in srgb, var(--pa) 12%, transparent), transparent); border-bottom: 1px solid var(--border); }
.pd-crumbs { display: flex; gap: 8px; color: var(--text-dim); font-size: .85rem; margin-bottom: 22px; }
.pd-crumbs a { text-decoration: none; color: var(--text-muted); }
.pd-hero-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: 40px; align-items: center; }
.pd-name { font-size: clamp(2.2rem,5vw,3.4rem); font-weight: 850; margin: 0 0 8px; letter-spacing: -.02em; }
.pd-tag { color: var(--pa); font-weight: 700; font-size: 1.1rem; margin: 0 0 16px; }
html.light .pd-tag { color: var(--pad); }
.pd-sum { color: var(--text-muted); font-size: 1.1rem; line-height: 1.6; max-width: 56ch; margin: 0 0 14px; }
.pd-role { color: var(--text-dim); font-style: italic; max-width: 56ch; margin: 0 0 24px; line-height: 1.55; }
.pd-role::before { content: "· "; color: var(--pa); font-style: normal; font-weight: 800; }
.pd-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pd-est { color: var(--text-dim); font-weight: 600; font-size: .9rem; }
.pd-hero-badge { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--shape-xl); background: linear-gradient(135deg, var(--pa), var(--pad)); }
.pmark--xl { width: 44%; aspect-ratio: 1; border-radius: 26px; padding: 7%; box-shadow: 0 18px 50px rgba(0,0,0,.30); }
.pd-lede { font-size: 1.2rem; line-height: 1.7; color: var(--text); max-width: 70ch; margin: 0 auto 40px; text-align: center; }
.pd-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 18px; }
.pd-feature { display: flex; gap: 14px; padding: 22px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-lg); }
.pd-feature-ic { width: 24px; height: 24px; flex: none; color: var(--primary-soft); }
.pd-feature h3 { margin: 0 0 6px; font-size: 1.1rem; }
.pd-feature p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.pd-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; }
.pd-more-card { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-md); text-decoration: none; color: var(--text); font-weight: 700; transition: border-color var(--dur-short), transform var(--dur-short); }
.pd-more-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pa) 50%, var(--border)); }

/* ── Careers ──────────────────────────────────────────────── */
.cr-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 14px; }
.cr-shot { margin: 0; overflow: hidden; border-radius: var(--shape-md); border: 1px solid var(--border); }
.cr-shot--wide { grid-column: span 2; grid-row: span 2; }
.cr-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-emphasized); }
.cr-shot:hover img { transform: scale(1.06); }
.cr-apply { max-width: 760px; }
.cr-meta { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: stretch; }
.cr-stack, .cr-process { padding: 28px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-lg); }
.cr-h2 { font-size: 1.35rem; margin-bottom: 10px; }
.cr-stack-items { margin: 16px 0 0; font-weight: 700; font-size: 1.05rem; line-height: 1.9; color: var(--text); }
.cr-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: var(--text-muted); font-weight: 600; }
.cr-step-num { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: var(--shape-pill); background: var(--brand-gradient); color: #fff; font-size: .82rem; font-weight: 800; }
@media (max-width: 760px) { .cr-meta { grid-template-columns: 1fr; } }

/* ── Forms ────────────────────────────────────────────────── */
.os-form { display: flex; flex-direction: column; gap: 16px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-lg); padding: clamp(20px, 4vw, 34px); }
.os-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.os-field { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: .92rem; }
.os-field span em { color: var(--text-dim); font-style: normal; font-weight: 500; }
.os-field .input, .os-field textarea.input { width: 100%; font: inherit; }
.os-field textarea.input { resize: vertical; min-height: 120px; }
.os-file input[type=file] { font: inherit; color: var(--text-muted); }
/* Branded "Choose file" button — native file inputs ignore .btn styling,
   so restyle the pseudo-button to match .btn-secondary. */
.os-file input[type=file]::file-selector-button {
  font: inherit; font-weight: 700; font-size: .92rem;
  color: var(--text); background: var(--surface-container-high);
  border: 1px solid var(--border-strong); border-radius: var(--shape-pill);
  padding: 9px 18px; margin-right: 14px; cursor: pointer;
  transition: background var(--dur-short) var(--ease-emphasized), border-color var(--dur-short) var(--ease-emphasized);
}
.os-file input[type=file]::file-selector-button:hover {
  background: var(--surface-container-highest); border-color: var(--primary-soft);
}
.os-hint { color: var(--text-dim); font-weight: 500; }
.os-form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.os-form-msg { margin: 0; font-weight: 600; }
.os-form-msg.is-error { color: #e0563f; }
.os-form-msg.is-ok { color: var(--primary-soft); }
.ct-route { padding: 22px 26px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-lg); }
.ct-route-title { font-size: 1.05rem; font-weight: 800; margin: 0 0 12px; }
.ct-route-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; color: var(--text-muted); line-height: 1.55; }
.ct-route-list a { color: var(--primary-soft); text-decoration: none; font-weight: 700; }
.ct-route-list a:hover { text-decoration: underline; }
.ct-route-links { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; margin-left: 6px; }
.ct-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: start; }
.ct-info { display: flex; flex-direction: column; gap: 14px; }
.ct-card { padding: 22px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-lg); }
.ct-card svg { width: 26px; height: 26px; color: var(--primary-soft); margin-bottom: 10px; }
.ct-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ct-card p { margin: 0; color: var(--text-muted); }
.ct-card a { color: var(--primary-soft); text-decoration: none; }

/* ── About / legal / 404 ──────────────────────────────────── */
.ab-story { max-width: 760px; margin-inline: auto; }
.ab-lede { font-size: 1.25rem; line-height: 1.75; color: var(--text); }
.ab-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; max-width: 1040px; margin: 40px auto 0; }
.ab-fact { padding: 20px 22px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-md); }
.ab-fact dt { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 7px; }
.ab-fact dd { margin: 0; font-weight: 700; line-height: 1.45; }
.ab-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 20px; }
.ab-value { padding: 26px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-lg); }
.ab-value h3 { margin: 0 0 8px; font-size: 1.2rem; }
.ab-value p { margin: 0; color: var(--text-muted); line-height: 1.6; }
.legal-prose { max-width: 760px; margin-inline: auto; color: var(--text-muted); line-height: 1.75; }
.legal-prose h2 { color: var(--text); margin-top: 32px; }
.legal-updated { color: var(--text-dim); }
.nf { padding: clamp(80px,14vw,160px) 0; text-align: center; }
.nf-code { font-size: clamp(5rem,16vw,9rem); font-weight: 850; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.nf-title { font-size: 1.8rem; margin: 8px 0 10px; }
.nf-sub { color: var(--text-muted); margin: 0 0 26px; }

/* ── Footer (.osf) ────────────────────────────────────────── */
.osf { background: var(--surface-container-low); border-top: 1px solid var(--border); }
.osf-inner { max-width: var(--wrap); margin-inline: auto; padding: clamp(40px,6vw,68px) 20px 28px; }
.osf-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.osf-brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.osf-mark { width: 40px; height: 40px; }
.osf-wordmark { font-weight: 850; font-size: 1.25rem; }
.osf-wordmark-tag { color: var(--primary-soft); }
.osf-tagline { color: var(--text-muted); max-width: 38ch; line-height: 1.6; margin: 16px 0 18px; }
.osf-social { display: flex; gap: 10px; list-style: none; padding: 0; margin: 0; }
.osf-social-link { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--shape-pill); border: 1px solid var(--border); color: var(--text-muted); }
.osf-social-link:hover { color: var(--text); border-color: var(--border-strong); }
.osf-social-link svg { width: 18px; height: 18px; }
.osf-title { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin: 0 0 14px; }
.osf-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.osf-links a { color: var(--text-muted); text-decoration: none; }
.osf-links a:hover { color: var(--text); }
.osf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); color: var(--text-dim); font-size: .88rem; }
.osf-where { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.osf-where svg { width: 15px; height: 15px; }
.osf-copy { margin: 0; }

/* ── Logo lab ─────────────────────────────────────────────── */
.lab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px,1fr)); gap: 20px; }
.lab-card { padding: 26px; background: var(--surface-container); border: 1px solid var(--border); border-radius: var(--shape-lg); }
.lab-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.lab-lockup { display: inline-flex; align-items: center; gap: 10px; }
.lab-word { font-weight: 850; font-size: 1.2rem; }
.lab-word em { color: var(--primary-soft); font-style: normal; }
.lab-name { margin: 16px 0 0; color: var(--text-muted); }
.lab-name strong { color: var(--primary-soft); }

/* ── Reveal on scroll ─────────────────────────────────────────
   Gated on html.js so the content is fully visible without JS
   (SEO, no-JS, and full-page screenshots). JS animates it in. */
html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-emphasized), transform .7s var(--ease-emphasized); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 980px) {
  .hdr-nav { display: none; }
  .hdr-cta { display: none; }
  .hdr-menu-btn { display: inline-flex; }
  .hm-hero-inner { grid-template-columns: 1fr; }
  .hm-hero-visual { order: -1; }
  .hm-hero-orb { width: min(300px, 64vw); }
  .hm-orbit-sat .pmark { --sat: 44px; border-radius: 12px; padding: 7px; }
  .hm-hero-sub { max-width: none; }
  .pd-hero-grid { grid-template-columns: 1fr; }
  .pd-hero-badge { display: none; }
  .ct-grid { grid-template-columns: 1fr; }
  .hm-metrics { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 620px) {
  .os-form-row { grid-template-columns: 1fr; }
  .cr-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .cr-shot--wide { grid-column: span 2; grid-row: span 1; }
  .osf-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .osf-col-brand { grid-column: 1 / -1; }
  .hm-oma-card { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .hm-hero-mark, .hm-orbit, .hm-orbit-sat .pmark { animation: none; }
}