/* humsick.com.au. Tokens from design/handoff/README.md; layout ported from the prototypes' inline styles. */

/* ---------- Fonts (self-hosted, OFL; see fonts/OFL-*.txt) ---------- */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/static/fonts/newsreader.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/newsreader-italic.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/hanken-grotesk.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/static/fonts/space-grotesk.woff2") format("woff2"); }
@font-face { font-family: "Darker Grotesque"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/darker-grotesque.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --night: #0F0D17; --night-deep: #0C0A12; --surface: #13111C; --surface-raised-a: #15121F; --surface-raised-b: #100E18;
  --line: #1C1828; --line-card: #221E30; --line-pill: #2A2540; --line-btn: #34304A;
  --text-headline: #F4F1FB; --text-primary: #EDE8DF; --text-strong: #C9C2D6; --text-body: #A59FB5; --text-secondary: #8E879F; --text-label: #6E6885; --text-legal: #5A5570;
  --paper: #F5F3EE; --paper-deep: #EFECE4; --paper-surface: #FCFBF8; --paper-line: #E0D9CC; --paper-line-btn: #D4CFC4; --paper-divider: #EDE9E0;
  --ink: #211F1B; --stone: #6B655C; --paper-legal: #8A8478; --paper-slash: #C9C2B4;
  --lilac: #8B7BF0; --aurora: #4C3DBF; --aurora-tint: #B6AEDC;
  --green-dark: #3DD6A8; --green: #0E8F6E; --green-deep: #0A6B52; --green-tint: #DDF3EA; --green-wash: #E9F6F0;
  --dot-parent: linear-gradient(135deg, #8B7BF0 30%, #3DD6A8 100%);
  --font-serif: "Newsreader", Georgia, serif; --font-sans: "Hanken Grotesk", system-ui, sans-serif; --font-mark: "Darker Grotesque", sans-serif; --font-label: "Space Grotesk", sans-serif;
  --container: 1180px; --gutter: 36px;
  --r-pill: 100px; --r-card: 14px; --r-card-lg: 16px; --r-input: 10px; --r-card-sm: 12px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; min-height: 100vh; }
body.ground-night { background: var(--night); color: var(--text-primary); }
body.ground-night ::selection { background: var(--aurora); color: #fff; }
body.ground-night a { color: var(--aurora-tint); text-decoration: none; }
body.ground-night a:hover { color: var(--text-primary); }
body.ground-paper { background: var(--paper); color: var(--ink); }
body.ground-paper ::selection { background: var(--green); color: #fff; }
body.ground-paper a { color: var(--green); text-decoration: none; }
body.ground-paper a:hover { color: var(--green-deep); }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; margin: 0; }
body.ground-night h1, body.ground-night h2, body.ground-night h3 { color: var(--text-headline); }
body.ground-paper h1, body.ground-paper h2, body.ground-paper h3 { color: var(--ink); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.small { font-size: 13.5px; line-height: 1.6; }
body.ground-night .small { color: var(--text-secondary); }
body.ground-paper .small { color: var(--stone); }

/* ---------- Type helpers ---------- */
.overline { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.22em; font-weight: 600; text-transform: uppercase; color: var(--text-secondary); margin: 0; }
.division-studios .overline { color: var(--lilac); }
.division-consulting .overline { color: var(--green); }
.band-night .overline { color: var(--green-dark); }
.overline + h2 { margin-top: 14px; }
.lead { font-size: 19px; line-height: 1.6; margin-top: 22px; }
body.ground-night .lead { color: var(--text-body); }
body.ground-paper .lead { color: var(--stone); }
h2 { font-size: 42px; line-height: 1.08; letter-spacing: -0.01em; }
h3 { font-size: 26px; line-height: 1.1; }

/* ---------- Wordmark lockups ---------- */
.lockup { display: inline-flex; flex-direction: column; }
.wordmark { font-family: var(--font-mark); font-weight: 700; line-height: 1; display: inline-flex; align-items: center; letter-spacing: 0; }
body.ground-night .wordmark, body.ground-night a.wordmark { color: var(--text-primary); }
body.ground-paper .wordmark, body.ground-paper a.wordmark { color: var(--ink); }
.wordmark .dot { width: 0.155em; height: 0.155em; border-radius: 50%; margin-left: 0.11em; display: inline-block; transform: translateY(-0.045em); background: var(--dot-parent); }
.lockup-studios .dot { background: var(--lilac); }
.lockup-consulting .dot { background: var(--green-dark); }
body.ground-paper .lockup-consulting .dot, .card-light .lockup-consulting .dot { background: var(--green); }
.lockup-nav .wordmark { font-size: 32px; }
.lockup-hero .wordmark { font-size: 112px; letter-spacing: -0.01em; background: linear-gradient(180deg, #FBFAFF 0%, #FFFFFF 40%, #D8D2EE 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lockup-hero .wordmark .dot { -webkit-text-fill-color: initial; }
.lockup-card .wordmark { font-size: 54px; }
.lockup-card.lockup-studios .wordmark { color: var(--text-headline); }
.lockup-lockup .wordmark { font-size: 52px; }
.lockup-lockup.lockup-studios .wordmark { background: linear-gradient(180deg, #FBFAFF 0%, #FFFFFF 38%, #CFC4F5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lockup-lockup .wordmark .dot { -webkit-text-fill-color: initial; }
.descriptor { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.62em; margin-top: 10px; padding-left: 0.62em; }
.lockup-lockup .descriptor { margin-top: 11px; }
.lockup-studios .descriptor { color: var(--lilac); }
.lockup-consulting .descriptor { color: var(--green-dark); }
body.ground-paper .lockup-consulting .descriptor, .card-light .lockup-consulting .descriptor { color: var(--green); }
.card-light .lockup-consulting .wordmark { color: var(--ink); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-card); }
body.ground-night .nav { background: rgba(15, 13, 23, 0.72); }
body.ground-paper .nav { background: rgba(245, 243, 238, 0.8); border-bottom-color: var(--paper-line); }
.nav-inner { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
/* Division switcher: the lockup's descriptor typography (Hanken 600, wide tracking, small caps) as two text items,
   the active one carrying its division colour and a 2px rule, the way the privacy TOC marks its division sections. */
.switcher { display: flex; align-items: stretch; gap: 26px; margin-right: auto; font-weight: 600; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; }
.switch-item { display: inline-flex; align-items: center; padding: 10px 0 8px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
body.ground-night .switch-item { color: var(--text-secondary); }
body.ground-night .switch-item:hover { color: var(--text-primary); }
body.ground-paper .switch-item { color: var(--stone); }
body.ground-paper .switch-item:hover { color: var(--ink); }
body.ground-night .switch-item.is-active, body.ground-night .switch-item.is-active:hover { color: var(--lilac); border-bottom-color: var(--lilac); }
body.ground-paper .switch-item.is-active, body.ground-paper .switch-item.is-active:hover { color: var(--green); border-bottom-color: var(--green); }
.nav-links { display: flex; gap: 30px; align-items: center; font-size: 14px; font-weight: 500; }
body.ground-night .nav-links a { color: var(--text-body); }
body.ground-night .nav-links a:hover { color: var(--text-primary); }
body.ground-paper .nav-links a { color: var(--stone); }
.nav-links .btn { padding: 9px 18px; font-size: 14px; font-weight: 500; }
.nav-toggle { display: none; font: inherit; font-size: 14px; font-weight: 600; border-radius: var(--r-pill); padding: 8px 16px; cursor: pointer; background: transparent; }
body.ground-night .nav-toggle { color: var(--text-primary); border: 1px solid var(--line-btn); }
body.ground-paper .nav-toggle { color: var(--ink); border: 1px solid var(--paper-line-btn); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 600; font-size: 15px; padding: 15px 28px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; font-family: inherit; line-height: 1.2; text-decoration: none; transition: filter .15s ease, background-color .15s ease; }
.btn:hover { filter: brightness(1.05); }
.btn-filled { background: var(--aurora); color: #fff; box-shadow: 0 6px 24px rgba(76, 61, 191, 0.4); }
body.ground-night .btn-filled, body.ground-night .btn-filled:hover { color: #fff; }
.btn-green { background: var(--green); color: #fff; box-shadow: 0 6px 22px rgba(14, 143, 110, 0.28); padding: 15px 26px; }
body.ground-paper .btn-green, body.ground-paper .btn-green:hover { color: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
body.ground-paper .btn-ink, body.ground-paper .btn-ink:hover { color: #fff; }
body.ground-night .btn-outline { background: rgba(255, 255, 255, 0.04); border-color: var(--line-btn); color: var(--text-primary); }
body.ground-night .btn-outline:hover { color: var(--text-primary); }
body.ground-paper .btn-outline { background: var(--paper-surface); border-color: var(--paper-line-btn); color: var(--ink); padding: 15px 26px; }
body.ground-paper .btn-outline:hover { color: var(--ink); }
.btn-block { width: 100%; margin-top: 18px; padding: 15px; }

/* ---------- Heroes and glows ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
body.ground-paper .hero { border-bottom-color: var(--paper-line); }
.hero > .container { position: relative; }
.hero-center > .container { padding-top: 120px; padding-bottom: 110px; text-align: center; }
.division-studios .hero-center > .container { padding-top: 128px; padding-bottom: 124px; }
.hero-center h1 { font-size: 42px; line-height: 1.1; letter-spacing: -0.015em; margin: 34px auto 0; max-width: 720px; }
.division-studios .hero-center h1 { font-size: 74px; line-height: 1.04; letter-spacing: -0.02em; margin: 0 auto; max-width: 880px; }
.hero-center .lead { max-width: 600px; margin-left: auto; margin-right: auto; }
.division-studios .hero-center .lead { font-size: 20px; max-width: 580px; margin-top: 30px; }
.hero-actions { margin-top: 42px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-split > .container { padding-top: 108px; padding-bottom: 96px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: end; }
.hero-split h1 { font-size: 66px; line-height: 1.04; letter-spacing: -0.02em; max-width: 720px; }
.hero-split .lead { margin-top: 28px; max-width: 560px; }
.hero-split .hero-actions { justify-content: flex-start; margin-top: 38px; gap: 12px; }
.hero-plain > .container { padding-top: 96px; padding-bottom: 96px; }
.hero-plain h1 { font-size: 54px; line-height: 1.06; letter-spacing: -0.02em; margin-top: 14px; }
.hero-plain .lead { max-width: 640px; }
.hero-plain .btn { margin-top: 30px; }
.glow { position: absolute; pointer-events: none; }
.hero .glow-parent { top: -140px; left: 50%; width: 1300px; height: 620px; transform: translate(-50%, 0); filter: blur(34px); background: radial-gradient(ellipse 40% 56% at 36% 50%, rgba(139, 123, 240, 0.32), transparent 66%), radial-gradient(ellipse 40% 56% at 66% 46%, rgba(61, 214, 168, 0.20), transparent 66%); }
.hero .glow-lilac { top: -160px; left: 50%; width: 1200px; height: 620px; transform: translate(-50%, 0); filter: blur(30px); background: radial-gradient(ellipse 44% 58% at 42% 48%, rgba(139, 123, 240, 0.34), transparent 66%), radial-gradient(ellipse 40% 52% at 64% 44%, rgba(40, 168, 120, 0.14), transparent 64%); }
.hero .glow-green { top: -120px; right: -160px; width: 760px; height: 560px; filter: blur(36px); background: radial-gradient(ellipse 50% 56% at 50% 50%, rgba(61, 214, 168, 0.26), transparent 68%); }
@keyframes floatGlow { 0%, 100% { transform: translate(-50%, 0) scale(1); opacity: 0.88; } 50% { transform: translate(-50%, -13px) scale(1.03); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { .hero-center .glow { animation: floatGlow 10s ease-in-out infinite; } }
/* Hero label: the overline device in the division colour, no pill, no dot. */
.hero-label { font-family: var(--font-label); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; margin: 0 0 36px; }
.division-studios .hero-label { color: var(--lilac); }
.division-consulting .hero-label { color: var(--green); }
.hero-label-after { margin: 26px 0 0; color: var(--text-secondary); }

/* ---------- Sections and grids ---------- */
.section > .container { padding-top: 96px; padding-bottom: 96px; }
.section-rule { border-top: 1px solid var(--line); }
body.ground-paper .section-rule { border-top-color: var(--paper-line); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-sub { font-size: 14.5px; line-height: 1.6; max-width: 400px; }
body.ground-night .section-sub { color: var(--text-label); }
body.ground-paper .section-sub { color: var(--stone); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-about { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.grid-about .prose p { font-size: 18px; line-height: 1.72; }
.grid-about .prose p + p { font-size: 16px; margin-top: 20px; }
body.ground-night .grid-about .prose p { color: var(--text-strong); }
body.ground-night .grid-about .prose p + p { color: var(--text-secondary); }
body.ground-paper .grid-about .prose p { color: var(--ink); }
body.ground-paper .grid-about .prose p + p { color: var(--stone); }
body.ground-night .grid-about .prose a { color: var(--aurora-tint); border-bottom: 1px solid var(--aurora); }
.grid-work { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 20px; }
.grid-services { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.index .grid-2 > .card { min-height: 420px; }
.section-divisions > .container { padding-top: 72px; padding-bottom: 40px; }
.section-about > .container { padding-top: 72px; padding-bottom: 96px; }

/* ---------- Cards and chips ---------- */
.card { position: relative; overflow: hidden; border-radius: var(--r-card); display: flex; flex-direction: column; }
.card-dark { border: 1px solid var(--line-card); background: linear-gradient(180deg, var(--surface-raised-a), var(--surface-raised-b)); color: var(--text-primary); }
.card-link { border-radius: var(--r-card-lg); padding: 44px 40px 40px; min-height: 420px; }
.card-link.card-dark { border-color: var(--line-pill); background: linear-gradient(160deg, #1A1530, #100E18); }
.card-light { border: 1px solid var(--paper-line-btn); background: linear-gradient(160deg, #FCFBF8, #F1EEE6); color: var(--ink); }
.card-light h2, .card-light h3, body.ground-night .card-light h2, body.ground-night .card-light h3 { color: var(--ink); }
a.card-link, a.card-link:hover { color: inherit; }
.card .glow-lilac, .card .glow-green { top: -80px; right: -60px; width: 320px; height: 260px; filter: blur(18px); }
.card .glow-lilac { background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(139, 123, 240, 0.34), transparent 70%); }
.card .glow-green { background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(61, 214, 168, 0.30), transparent 70%); }
.card-link > :not(.glow) { position: relative; }
.card-link h2 { font-size: 32px; line-height: 1.1; margin: 34px 0 12px; }
.card-link p { font-size: 15.5px; line-height: 1.7; max-width: 420px; }
.card-dark.card-link p { color: #B6AEC8; }
.card-light.card-link p { color: var(--stone); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; }
.chip { font-size: 12px; border-radius: var(--r-pill); padding: 6px 12px; }
.card-dark .chip { color: var(--text-strong); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-pill); }
.chip-green { color: var(--ink); background: rgba(14, 143, 110, 0.08); border: 1px solid rgba(14, 143, 110, 0.3); }
body.ground-paper .chip { color: var(--ink); background: var(--paper); border: 1px solid var(--paper-line-btn); padding: 5px 12px; }
body.ground-paper .card-lead .chip { background: var(--paper-surface); }
.card-cta { margin-top: auto; padding-top: 30px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.card-dark .card-cta { color: var(--aurora-tint); }
.card-light .card-cta { color: var(--green); }
.card-game { padding: 30px 32px 32px; }
.card-game h3 { font-size: 34px; line-height: 1.04; margin: 0 0 14px; }
.card-game p { font-size: 15px; line-height: 1.7; color: var(--text-body); margin: 0 0 22px; }
.card-muted { background: var(--surface); border-color: var(--line-card); }
.card-muted h3 { font-size: 26px; color: var(--text-strong); }
.card-muted p { color: var(--text-secondary); }
.pills { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 9px; border-radius: var(--r-pill); }
.pill-status { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--text-strong); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-pill); padding: 5px 12px; }
.pill-tag { font-size: 13px; color: var(--text-label); }
/* Contact router: two rule-marked entries, label in the division colour, the same device as the privacy TOC rules. */
.route-links { display: flex; gap: 36px; flex-wrap: wrap; }
.route-link { display: flex; flex-direction: column; gap: 5px; padding: 6px 0 6px 18px; border-left: 2px solid var(--line-btn); min-width: 220px; transition: border-color .15s ease; }
.route-label { font-family: var(--font-label); font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; }
.route-text { font-weight: 600; font-size: 15px; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; }
.route-studios { border-left-color: var(--lilac); }
.route-studios .route-label { color: var(--lilac); }
.route-consulting { border-left-color: var(--green-dark); }
.route-consulting .route-label { color: var(--green-dark); }
body.ground-night a.route-link:hover .route-text { color: #fff; }
body.ground-night a.route-link:hover { border-left-width: 3px; padding-left: 17px; }
.spec { display: flex; flex-direction: column; gap: 9px; margin: auto 0 0; }
.spec-row { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line-card); padding-bottom: 8px; font-size: 13px; }
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { color: var(--text-label); margin: 0; }
.spec-row dd { color: var(--text-strong); font-weight: 500; text-align: right; margin: 0; }
.card-principles { border: 1px solid var(--paper-line); border-radius: var(--r-card-lg); background: var(--paper-surface); padding: 28px 30px; gap: 18px; overflow: visible; }
.card-principles .overline { font-size: 11px; letter-spacing: 0.2em; }
.principle { display: flex; gap: 14px; align-items: flex-start; border-bottom: 1px solid var(--paper-divider); padding-bottom: 16px; }
.principle:last-child { border-bottom: 0; padding-bottom: 0; }
.principle .num { font-family: var(--font-serif); font-size: 22px; color: var(--green); line-height: 1; min-width: 30px; }
.principle strong { display: block; font-weight: 600; font-size: 15px; }
.principle p { font-size: 13.5px; color: var(--stone); line-height: 1.55; margin-top: 3px; }
.card-lead { border: 1px solid rgba(14, 143, 110, 0.35); background: linear-gradient(150deg, #FCFBF8, #E9F6F0); padding: 32px 32px 30px; }
.card-lead .overline { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 10px; }
.card-service { border: 1px solid var(--paper-line); background: var(--paper-surface); padding: 32px 32px 30px; }
.card-service h3, .card-lead h3 { margin: 0 0 10px; }
.card-service p, .card-lead p { font-size: 14.5px; line-height: 1.68; color: var(--stone); margin: 0 0 18px; }
.card-service .chips, .card-lead .chips { margin-top: auto; }

/* ---------- Tiles (numbered) ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tile { border-radius: var(--r-card-sm); padding: 24px; }
body.ground-night .tile, .band-night .tile { border: 1px solid var(--line-card); background: var(--surface); }
.tile .num { font-family: var(--font-serif); font-size: 30px; line-height: 1; color: var(--lilac); }
.band-night .tile .num { color: var(--green-dark); }
.tile strong { display: block; font-weight: 600; font-size: 16px; margin-top: 14px; color: var(--text-primary); }
.tile p { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 6px 0 0; }
.stat { margin-top: 30px; display: flex; align-items: baseline; gap: 12px; }
.stat .num { font-family: var(--font-serif); font-size: 72px; line-height: 1; color: var(--green); letter-spacing: -0.02em; }
.stat span { font-size: 14px; color: var(--stone); max-width: 140px; line-height: 1.4; }

/* ---------- Marquee strip ---------- */
.marquee { border-bottom: 1px solid var(--line); background: var(--night-deep); }
.marquee > .container { padding-top: 26px; padding-bottom: 26px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; font-family: var(--font-label); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-label); font-weight: 500; }
.marquee-item + .marquee-item::before { content: "/"; color: var(--line-btn); margin-right: 30px; }
.marquee-paper { border-bottom-color: var(--paper-line); background: var(--paper-deep); }
.marquee-paper > .container { padding-top: 22px; padding-bottom: 22px; gap: 24px; font-size: 12.5px; color: var(--stone); font-weight: 600; }
.marquee-paper .marquee-item + .marquee-item::before { color: var(--paper-slash); margin-right: 24px; }

/* ---------- Bands ---------- */
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-deep { background: var(--night-deep); }
.band-deep > .container { padding-top: 64px; padding-bottom: 64px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.band-deep h2 { font-size: 32px; line-height: 1.1; }
.band-deep p { font-size: 15px; color: var(--text-secondary); margin-top: 10px; }
.pointer-links { display: flex; gap: 12px; flex-wrap: wrap; }
.pointer { background: var(--night-deep); }
.pointer-inner { padding-top: 40px; padding-bottom: 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.pointer-text { border-left: 2px solid var(--green-dark); padding-left: 18px; font-size: 14px; color: var(--text-secondary); }
.pointer-text strong { color: var(--text-primary); font-size: 16px; font-weight: 600; display: block; }
.pointer-inner .btn { padding: 11px 20px; font-size: 14px; }
.band-night { background: var(--night); color: var(--text-primary); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.band-night > .container { padding-top: 88px; padding-bottom: 88px; }
.band-night h2, body.ground-paper .band-night h2, body.ground-paper .band-night h3 { color: var(--text-headline); }
.band-night .section-sub { color: var(--text-body); font-size: 15.5px; line-height: 1.7; margin-top: 20px; max-width: 380px; }
.band-night a { color: var(--aurora-tint); }

/* ---------- Contact ---------- */
.contact { position: relative; overflow: hidden; }
.contact > .container { padding-top: 104px; padding-bottom: 100px; }
.contact-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 60px; align-items: center; }
.contact .lockup { margin-bottom: 26px; }
.contact h2 { font-size: 44px; line-height: 1.08; letter-spacing: -0.01em; max-width: 440px; }
.contact .copy { font-size: 17px; line-height: 1.65; margin-top: 20px; max-width: 420px; }
body.ground-night .contact .copy { color: var(--text-body); }
body.ground-paper .contact .copy { color: var(--stone); font-size: 16.5px; margin-top: 18px; }
.contact .small { margin-top: 22px; max-width: 420px; }
body.ground-paper .contact .small a { border-bottom: 1px solid rgba(14, 143, 110, 0.4); }
.contact .glow-lilac { bottom: -200px; left: 50%; transform: translateX(-50%); width: 1000px; height: 520px; filter: blur(30px); background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(139, 123, 240, 0.22), transparent 68%); }
.band-deep-paper { background: var(--paper-deep); border-top: 1px solid var(--paper-line); }
.band-deep-paper > .container { padding-top: 96px; padding-bottom: 96px; }
.form-card { border-radius: var(--r-card-lg); padding: 34px; overflow: visible; }
body.ground-night .form-card { border: 1px solid var(--line-card); background: var(--surface); }
body.ground-paper .form-card { border: 1px solid var(--paper-line); background: var(--paper-surface); }
.field + .field { margin-top: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 7px; letter-spacing: 0.02em; }
body.ground-night .field label { color: var(--text-secondary); }
body.ground-paper .field label { color: var(--stone); }
.field input, .field select, .field textarea { width: 100%; border-radius: var(--r-input); padding: 12px 14px; font-family: inherit; font-size: 14px; outline: none; }
.field textarea { resize: vertical; min-height: 120px; }
body.ground-night .field input, body.ground-night .field select, body.ground-night .field textarea { background: var(--night); border: 1px solid var(--line-btn); color: var(--text-primary); }
body.ground-night .field input:focus, body.ground-night .field select:focus, body.ground-night .field textarea:focus { border-color: var(--lilac); }
body.ground-paper .field input, body.ground-paper .field select, body.ground-paper .field textarea { background: var(--paper); border: 1px solid var(--paper-line-btn); color: var(--ink); }
body.ground-paper .field input:focus, body.ground-paper .field select:focus, body.ground-paper .field textarea:focus { border-color: var(--green); }
.field-error { font-size: 12.5px; margin-top: 6px; color: #E08A8A; }
body.ground-paper .field-error { color: #B23A3A; }
.notice { font-size: 14px; line-height: 1.5; border-radius: var(--r-input); padding: 12px 14px; margin-bottom: 16px; }
.notice-error { background: rgba(224, 138, 138, 0.1); border: 1px solid rgba(224, 138, 138, 0.4); color: var(--text-primary); }
body.ground-paper .notice-error { background: rgba(178, 58, 58, 0.06); border-color: rgba(178, 58, 58, 0.35); color: var(--ink); }
.footnote { font-size: 12px; margin-top: 14px; text-align: center; }
body.ground-night .footnote { color: var(--text-legal); }
body.ground-paper .footnote { color: var(--paper-legal); }
.cf-turnstile { margin-top: 14px; }
.success { text-align: center; padding: 38px 12px; }
.tick { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 24px; }
body.ground-night .tick { background: rgba(139, 123, 240, 0.14); border: 1px solid rgba(139, 123, 240, 0.4); color: var(--lilac); }
body.ground-paper .tick { background: var(--green-tint); border: 1px solid rgba(14, 143, 110, 0.4); color: var(--green); }
.success h3 { font-size: 24px; margin-bottom: 8px; }
.success p { font-size: 14.5px; line-height: 1.6; }
body.ground-night .success p { color: var(--text-secondary); }
body.ground-paper .success p { color: var(--stone); }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--night-deep); }
body.ground-paper .footer { border-top-color: var(--paper-line); background: var(--paper-deep); }
.footer-inner { padding-top: 30px; padding-bottom: 30px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.footer .lockup-nav .wordmark { font-size: 26px; }
.legal { font-size: 12.5px; line-height: 1.6; text-align: center; }
body.ground-night .legal { color: var(--text-legal); }
body.ground-paper .legal { color: var(--paper-legal); }
.footer-privacy { justify-self: end; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: var(--r-pill); border: 1px solid transparent; }
body.ground-night .footer-privacy { color: var(--text-primary); border-color: var(--line-btn); }
body.ground-night .footer-privacy:hover { color: #fff; border-color: var(--aurora-tint); }
body.ground-paper .footer-privacy { color: var(--ink); border-color: var(--paper-line-btn); }
body.ground-paper .footer-privacy:hover { border-color: var(--green); }

/* ---------- Privacy page ---------- */
.privacy-header { border-bottom: 1px solid var(--line); }
.privacy-header > .container { padding-top: 72px; padding-bottom: 56px; }
.privacy-header h1 { font-size: 54px; line-height: 1.06; letter-spacing: -0.02em; margin-top: 14px; }
.privacy-header .lead { font-size: 17px; margin-top: 18px; max-width: 640px; }
.privacy-meta { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 26px; font-size: 13px; color: var(--text-label); }
.privacy-body { padding-top: 56px; padding-bottom: 96px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.toc-title { font-family: var(--font-label); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-label); font-weight: 600; margin-bottom: 12px; }
.toc a { color: var(--text-body); padding: 7px 0 7px 14px; border-left: 2px solid var(--line-card); }
.toc a:hover { color: var(--text-primary); }
.toc a.toc-rule-green { border-left-color: var(--green-dark); }
.toc a.toc-rule-lilac { border-left-color: var(--lilac); }
.privacy-content { display: flex; flex-direction: column; gap: 52px; max-width: 720px; font-size: 16px; line-height: 1.72; color: var(--text-strong); }
.privacy-content h2 { font-size: 30px; line-height: 1.15; margin-bottom: 16px; }
.privacy-content h3 { font-family: var(--font-sans); font-weight: 600; font-size: 17px; margin: 0 0 8px; color: var(--text-headline); }
.privacy-content p + p, .privacy-content ul + p, .privacy-content p + ul, .privacy-content p + h3 { margin-top: 18px; }
.privacy-content strong { color: var(--text-headline); font-weight: 600; }
.privacy-content ul { padding-left: 22px; list-style: disc; display: flex; flex-direction: column; gap: 6px; }
.commitments { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.commitments li { border: 1px solid var(--line-card); border-radius: var(--r-card-sm); padding: 18px 20px; background: var(--surface); font-size: 14.5px; line-height: 1.55; color: var(--text-primary); }
.callout { border-radius: var(--r-card-lg); padding: 32px 34px; }
.callout-green { border: 1px solid rgba(61, 214, 168, 0.3); background: linear-gradient(160deg, #121A1A, #0F0D17); }
.callout-lilac { border: 1px solid rgba(139, 123, 240, 0.3); background: linear-gradient(160deg, #17132A, #0F0D17); }
.callout-label { display: inline-block; font-family: var(--font-label); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; margin-bottom: 12px; }
.callout-green .callout-label { color: var(--green-dark); }
.callout-lilac .callout-label { color: var(--lilac); }
.callout ul { gap: 8px; }
.callout .close { margin-top: 18px; font-size: 14.5px; color: var(--text-body); }
.contact-card { margin-top: 22px; border: 1px solid var(--line-card); border-radius: var(--r-card); padding: 24px 26px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.contact-card .overline { font-size: 11px; letter-spacing: 0.18em; color: var(--text-label); }
.contact-card .entity { font-size: 16px; color: var(--text-headline); font-weight: 600; }
.contact-card .email { font-size: 15px; }
.contact-card .ids { font-size: 13.5px; color: var(--text-label); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-2, .grid-about, .grid-work, .grid-services, .contact-grid, .hero-split > .container, .tiles { grid-template-columns: 1fr; }
  .hero-split > .container { gap: 40px; }
  .privacy-body { grid-template-columns: 1fr; gap: 32px; }
  .toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
  .toc-title { width: 100%; }
  .toc a { padding: 4px 0 4px 10px; }
  .index .grid-2 > .card, .card-link { min-height: 0; }
}
@media (max-width: 768px) {
  :root { --gutter: 20px; }
  .section > .container, .contact > .container, .band-night > .container, .band-deep-paper > .container { padding-top: 64px; padding-bottom: 64px; }
  .hero-center > .container, .division-studios .hero-center > .container { padding-top: 72px; padding-bottom: 64px; }
  .hero-split > .container { padding-top: 72px; padding-bottom: 56px; }
  .hero-center h1, .division-studios .hero-center h1, .hero-split h1, .privacy-header h1 { font-size: 40px; }
  .lockup-hero .wordmark { font-size: 72px; }
  h2, .contact h2 { font-size: 32px; }
  .card-game h3 { font-size: 28px; }
  .stat .num { font-size: 56px; }
  .nav-inner { flex-wrap: wrap; gap: 12px; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .switcher { margin-right: 0; }
  .nav-links { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 14px; padding: 10px 0 6px; }
  .nav-links.is-open { display: flex; }
  .commitments { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; }
  .footer-privacy { justify-self: center; }
  .marquee > .container { justify-content: flex-start; gap: 12px 18px; }
  .marquee-item + .marquee-item::before, .marquee-paper .marquee-item + .marquee-item::before { margin-right: 18px; }
  .hero .glow-parent, .hero .glow-lilac { width: 900px; }
}