@import url("fonts/fonts.css");

/* SSI Group concept: the homepage as the view from their own 24/7 monitoring centre.
   Light ground, navy fields, one signal yellow for live state and the main action. Zero radius, 1px lines. */
:root {
  --bg: #eef1f5;
  --bg-2: #e2e7ee;
  --navy: #002d59;
  --navy-2: #001d3b;
  --ink: #081a30;
  --ink-2: #44546a;
  --line: rgba(0, 45, 89, .16);
  --gl: rgba(0, 45, 89, .07);
  --yel: #ffc72c;
  --on-navy-2: rgba(255, 255, 255, .74);
  --display: "Saira", "Arial Narrow", sans-serif;
  --body: "Geist", Arial, sans-serif;
  --mono: "Geist Mono", Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gut: clamp(16px, 3.4vw, 48px);
  --hh: 68px;
  --max: 1440px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: var(--hh); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--yel); color: var(--navy); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.hero :focus-visible, .svc :focus-visible, .nrg :focus-visible, .chat :focus-visible, .foot :focus-visible, .menu :focus-visible, .skip:focus-visible { outline-color: var(--yel); }
a { color: inherit; text-underline-offset: .2em; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 650; font-stretch: 82%; letter-spacing: -.01em; line-height: 1.1; text-transform: uppercase; text-wrap: balance; }
h2 { font-size: clamp(36px, 5vw, 76px); }
p { margin: 0; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--navy); border: 3px solid var(--bg); }
html { scrollbar-color: var(--navy) var(--bg); }

.wrap { width: min(var(--max), 100% - 2 * var(--gut)); margin-inline: auto; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 99; left: 16px; top: -80px; padding: 12px 18px; background: var(--yel); color: var(--navy); font-weight: 600; text-decoration: none; }
.skip:focus { top: 16px; }
.lbl { font: 500 12px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.mono { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--yel); flex: none; }
.dot.live, .dot.rec { animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* the faint 12-column grid behind light sections */
.lines { position: relative; isolation: isolate; }
.lines::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 50%; width: min(var(--max), 100% - 2 * var(--gut)); transform: translateX(-50%); pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--gl) 0 1px, transparent 1px calc(100% / 12)); border-right: 1px solid var(--gl); }

/* viewfinder corners: eight 1.5px strokes painted on the box */
.vf { --c: rgba(255, 255, 255, .85); --s: 18px; --w: 1.5px;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--s) var(--w), linear-gradient(var(--c), var(--c)) left top / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) right top / var(--s) var(--w), linear-gradient(var(--c), var(--c)) right top / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) left bottom / var(--s) var(--w), linear-gradient(var(--c), var(--c)) left bottom / var(--w) var(--s),
    linear-gradient(var(--c), var(--c)) right bottom / var(--s) var(--w), linear-gradient(var(--c), var(--c)) right bottom / var(--w) var(--s);
  background-repeat: no-repeat; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 22px; font: 600 15px/1 var(--display); font-stretch: 90%; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; border-radius: 0; cursor: pointer; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.btn svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn.sm { min-height: 42px; padding: 0 16px; font-size: 13px; }
.btn.yel { background: var(--yel); color: var(--navy); }
.btn.yel:hover { background: #fff; }
.btn.navy { background: var(--navy); color: #fff; }
.btn.navy:hover { background: var(--ink); color: var(--yel); }
.btn.line { color: var(--navy); border-color: var(--navy); background: transparent; }
.btn.line:hover { background: var(--navy); color: #fff; }
.btn.line-w { color: #fff; border-color: rgba(255, 255, 255, .5); background: transparent; }
.btn.line-w:hover { background: var(--yel); border-color: var(--yel); color: var(--navy); }
.ext { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--body); letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: var(--on-navy-2); }
.ext svg { width: 11px; height: 11px; transition: transform .4s var(--ease); }
.ext:hover { color: var(--yel); }
.ext:hover svg { transform: translate(2px, -2px); }
.ext.dark { color: var(--navy); }
.ext.dark:hover { color: var(--navy); text-decoration: underline; }

/* header */
.head { position: sticky; top: 0; z-index: 50; height: var(--hh); display: flex; align-items: center; gap: clamp(14px, 2vw, 32px); padding: 0 var(--gut); background: var(--bg); border-bottom: 1px solid var(--line); }
.logo { display: block; flex: none; }
.logo img { height: 44px; width: auto; }
.head-loc { font: 500 11px/1.35 var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); }
.head-nav { display: flex; gap: clamp(16px, 2.2vw, 36px); margin-left: auto; }
.head-nav a { position: relative; padding: 8px 0; font: 500 15px/1 var(--body); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; color: var(--navy); }
.head-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--navy); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.head-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.head-r { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px); }
.langs { display: flex; gap: 10px; font: 500 12px/1 var(--body); letter-spacing: .08em; }
.langs a { color: var(--ink-2); cursor: pointer; }
.langs a[aria-current] { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; }
.vf-btn { --c: var(--navy); --s: 9px; display: inline-flex; align-items: center; gap: 10px; padding: 13px 18px; font: 600 14px/1 var(--display); font-stretch: 90%; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; color: var(--navy); transition: background-color .35s var(--ease); }
.vf-btn:hover { background-color: var(--yel); }
.vf-btn .dot { animation: none; }
.menu-b { display: none; padding: 10px 14px; font: 500 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: none; border: 1px solid var(--navy); cursor: pointer; }
.menu { position: fixed; z-index: 49; inset: var(--hh) 0 0; display: flex; flex-direction: column; justify-content: space-between; padding: 32px var(--gut) 40px; background: var(--navy); color: #fff; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { padding: 10px 0; font: 650 40px/1 var(--display); font-stretch: 82%; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.menu .langs a { color: var(--on-navy-2); }
.menu .langs a[aria-current] { color: #fff; }

/* hero: the feed */
.hero { position: relative; height: calc(100svh - var(--hh)); min-height: 640px; max-height: 1100px; overflow: hidden; color: #fff; background: var(--navy-2); }
.hero-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 22, 46, .35), rgba(0, 22, 46, 0) 14%), linear-gradient(to top, rgba(0, 22, 46, .88) 0%, rgba(0, 22, 46, .4) 30%, rgba(0, 22, 46, 0) 55%), linear-gradient(90deg, rgba(0, 22, 46, .4) 0%, rgba(0, 22, 46, 0) 50%); }
.hud { position: absolute; z-index: 2; inset: clamp(12px, 1.6vw, 22px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto auto auto; gap: 0 32px; padding: clamp(16px, 2vw, 28px); }
.hud-top { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; }
.hud-top p { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.hud-main { grid-column: 1; grid-row: 3; max-width: 1100px; }
.hero h1 { font-size: clamp(42px, 6.4vw, 96px); font-weight: 700; font-stretch: 78%; line-height: .96; letter-spacing: -.012em; }
.hero-sub { max-width: 60ch; margin-top: 22px; font-size: clamp(16px, 1.25vw, 19px); color: rgba(255, 255, 255, .86); }
.hero-pick { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: clamp(22px, 3vh, 36px); padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .26); }
.hero-pick > .mono { color: var(--on-navy-2); margin-right: 6px; }
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick-row button { min-height: 42px; padding: 0 16px; font: 500 14px/1 var(--body); color: #fff; background: rgba(0, 22, 46, .35); border: 1px solid rgba(255, 255, 255, .45); border-radius: 0; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.pick-row button:hover { border-color: #fff; }
.pick-row button[aria-pressed="true"] { background: var(--yel); border-color: var(--yel); color: var(--navy); }
.hero-pick .btn { margin-left: auto; }
.hero-job { font: 500 13px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.hud-bar { grid-column: 1 / -1; grid-row: 5; display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.pp { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; background: none; border: 1px solid rgba(255, 255, 255, .45); color: var(--yel); cursor: pointer; }
.pp svg { width: 12px; height: 12px; }
.track { position: relative; flex: 1; height: 1px; background: rgba(255, 255, 255, .25); }
.track i { position: absolute; inset: -1px auto -1px 0; width: 100%; background: var(--yel); transform: scaleX(var(--p, 0)); transform-origin: left; }
.hud-bar p { display: flex; align-items: center; gap: 10px; min-width: 170px; justify-content: flex-end; }

/* about */
.about { padding: clamp(96px, 14vw, 200px) 0 clamp(80px, 10vw, 140px); }
.about-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; }
.statement { grid-column: 1 / 10; font: 500 clamp(26px, 2.9vw, 44px)/1.16 var(--display); font-stretch: 92%; letter-spacing: -.01em; color: var(--navy); text-wrap: pretty; }
.js .statement .w { opacity: .14; }
.founders { grid-column: 5 / 13; grid-row: 2; margin: 24px 0 0; }
.founders img { width: 100%; height: auto; }
.founders figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; color: var(--ink-2); border-top: 1px solid var(--line); margin-top: 12px; }
.facts { grid-column: 1 / 5; grid-row: 2; align-self: end; display: grid; gap: 22px; margin: 0 0 44px; }
.facts div { padding-top: 14px; border-top: 1px solid var(--navy); }
.facts dt { color: var(--ink-2); margin-bottom: 8px; }
.facts dd { margin: 0; font: 600 20px/1.25 var(--display); font-stretch: 92%; color: var(--navy); }

/* services: one sticky feed, five channels */
.svc { padding: clamp(80px, 10vw, 140px) 0 clamp(80px, 10vw, 120px); background: var(--navy); color: #fff; }
.svc-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.svc-head h2 { max-width: 14ch; }
.svc-count { color: var(--on-navy-2); white-space: nowrap; }
.svc-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.svc-media { --c: var(--yel); grid-column: 1 / 8; position: sticky; top: calc(var(--hh) + 32px); height: min(72vh, 640px); margin-top: 48px; padding: 14px; }
.svc-media video { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.svc-media video.on { opacity: 1; }
.svc-media-l { position: absolute; left: 30px; bottom: 28px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--navy); }
.svc-list { grid-column: 8 / 13; list-style: none; margin: 0; padding: 0 0 0 clamp(8px, 2vw, 32px); }
.svc-i { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 48px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.svc-i h3 { color: rgba(255, 255, 255, .5); transition: color .6s var(--ease); }
.svc-i.is-on h3 { color: #fff; }
.svc-i:last-child { border-bottom: 0; }
.svc-i h3 { font-size: clamp(40px, 4.4vw, 68px); }
.svc-i > p { max-width: 46ch; color: var(--on-navy-2); }
.svc-mv { display: none; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tags li, .tags i { padding: 7px 10px; font: 500 11px/1.2 var(--body); font-style: normal; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .32); }
.svc-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 6px; }

/* energy: the scrubbed feed */
.nrg { position: relative; height: 340vh; background: var(--navy-2); color: #fff; }
.nrg-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.nrg-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nrg-stick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 22, 46, .9) 0%, rgba(0, 22, 46, .55) 48%, rgba(0, 22, 46, .1) 100%); pointer-events: none; }
.nrg-hud { position: absolute; z-index: 2; inset: calc(var(--hh) + 12px) clamp(12px, 1.6vw, 22px) clamp(12px, 1.6vw, 22px); display: grid; grid-template-rows: auto 1fr auto; padding: clamp(16px, 2vw, 28px); }
.beats { position: relative; align-self: center; width: min(620px, 100%); min-height: 360px; }
.beat { position: absolute; inset: 0 0 auto; display: grid; gap: 22px; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .8s var(--ease); pointer-events: none; }
.beat.is-on { opacity: 1; transform: none; pointer-events: auto; }
.beat h2 { font-size: clamp(40px, 5vw, 76px); }
.beat h3 { font-size: clamp(28px, 2.8vw, 42px); }
.beat > p { color: rgba(255, 255, 255, .84); max-width: 50ch; }
.mw { display: grid; gap: 28px; margin: 0; }
.mw div { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .3); }
.mw dd { margin: 0 0 8px; font: 700 clamp(64px, 9vw, 136px)/.86 var(--display); font-stretch: 78%; color: var(--yel); }
.mw small { font-size: .38em; color: #fff; }
.proj { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .3); }
.proj li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); font-weight: 500; }
.proj time { padding-top: 3px; color: var(--yel); }
.nrg-bar { grid-row: 3; margin-top: 0; }
.nrg-bar .track b { position: absolute; top: -5px; width: 1px; height: 11px; background: rgba(255, 255, 255, .6); }
.nrg-bar p { min-width: 0; color: var(--on-navy-2); }

/* references: the client log */
.ref { padding: clamp(96px, 12vw, 170px) 0 clamp(80px, 10vw, 130px); }
.ref-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; align-items: end; padding-bottom: 32px; }
.ref-head h2 { grid-column: 1 / 10; color: var(--navy); }
.filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { min-height: 38px; padding: 0 12px; font: 500 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: transparent; border: 1px solid var(--line); border-radius: 0; cursor: pointer; transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s; }
.filters button:hover { border-color: var(--navy); }
.filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--navy); }
.rows li { position: relative; display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 3.4fr) minmax(0, 4.4fr) minmax(0, 1.6fr); gap: 24px; align-items: center; padding: 20px 16px; border-bottom: 1px solid var(--line); transition: background-color .35s var(--ease), color .35s var(--ease); }
.rows li[hidden] { display: none; }
.rows b { font: 650 clamp(22px, 2vw, 32px)/1 var(--display); font-stretch: 82%; text-transform: uppercase; color: var(--navy); transition: color .35s var(--ease); }
.rows .tags i { color: var(--navy); border-color: var(--line); }
.rows .d { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.rows .k { justify-self: end; text-align: right; font: 500 14px/1.2 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); font-variant-numeric: tabular-nums; }
.rows li:hover { background: var(--navy); }
.rows li:hover b, .rows li:hover .k { color: #fff; }
.rows li:hover .d { color: var(--on-navy-2); }
.rows li:hover .tags i { color: #fff; border-color: rgba(255, 255, 255, .35); }
.rows li:hover .k::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--yel); }
.js .rows:not(.all) li.cut { display: none; }
.ref-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }

/* careers on the signal yellow */
.job { padding: clamp(88px, 11vw, 150px) 0; background: var(--yel); color: var(--navy); }
.job-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: start; }
.job-t { grid-column: 1 / 7; display: grid; gap: 26px; justify-items: start; }
.job-t > p { max-width: 50ch; }
.job-tel { display: grid; gap: 8px; font: 700 clamp(56px, 7.4vw, 112px)/.86 var(--display); font-stretch: 78%; text-decoration: none; letter-spacing: -.01em; }
.job-tel:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.job-c { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; margin: 0; }
.job-c div { padding-top: 12px; border-top: 1px solid var(--navy); }
.job-c dt { margin-bottom: 6px; }
.job-c dd { margin: 0; font-weight: 600; }
.job-ozp { font-size: 15px; }
.job-r { grid-column: 8 / 13; display: grid; gap: 0; }
.job-v video { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; background: var(--navy); }
.chat { background: var(--navy); color: #fff; }
.chat-h { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.chat-h p { display: grid; gap: 4px; line-height: 1.2; }
.chat-h small { color: var(--on-navy-2); font-size: 11px; }
.av { display: grid; place-items: center; flex: none; width: 38px; height: 38px; font: 650 14px/1 var(--display); color: var(--navy); background: var(--yel); }
.chat-h .tag { margin-left: auto; padding: 6px 9px; font-size: 11px; color: var(--yel); border: 1px solid var(--yel); }
.chat-b { height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px; overscroll-behavior: contain; }
.msg { max-width: 86%; padding: 11px 14px; font-size: 15px; line-height: 1.45; }
.msg.bot { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.msg.me { align-self: flex-end; background: var(--yel); color: var(--navy); }
.msg.typing { color: var(--on-navy-2); font-size: 13px; }
.chat-q { display: flex; flex-wrap: wrap; gap: 8px; min-height: 74px; padding: 0 18px 18px; }
.chat-q button { min-height: 40px; padding: 0 14px; font: 500 14px/1 var(--body); color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .45); border-radius: 0; cursor: pointer; }
.chat-q button:hover { background: #fff; color: var(--navy); }

/* inquiry: the router */
.ask { padding: clamp(96px, 12vw, 170px) 0; }
.ask-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: start; }
.ask-t { grid-column: 1 / 6; display: grid; gap: 24px; position: sticky; top: calc(var(--hh) + 40px); }
.ask-t h2 { color: var(--navy); }
.ask-t > p { color: var(--ink-2); max-width: 44ch; }
.route { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--navy); }
.route li { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); font: 600 18px/1 var(--display); font-stretch: 92%; text-transform: uppercase; color: var(--ink-2); transition: color .3s var(--ease); }
.route i { font-style: normal; color: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; }
.route li.on { color: var(--navy); }
.route li.on i { color: var(--navy); }
.route li.on i::before { content: ""; width: 8px; height: 8px; background: var(--yel); outline: 1px solid var(--navy); }
.cfg { grid-column: 7 / 13; display: grid; gap: 30px; padding: clamp(24px, 3vw, 40px); background: #fff; border: 1px solid var(--line); }
.cfg fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.cfg legend { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 0; font: 650 22px/1 var(--display); font-stretch: 86%; text-transform: uppercase; color: var(--navy); }
.cfg legend .mono { display: grid; place-items: center; width: 26px; height: 26px; color: #fff; background: var(--navy); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 15px; color: var(--navy); border: 1px solid var(--line); transition: background-color .25s var(--ease), border-color .25s, color .25s; }
.chips label:hover span { border-color: var(--navy); }
.chips input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.row3 legend { grid-column: 1 / -1; }
.row3 label { display: grid; gap: 6px; font: 500 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.row3 input { width: 100%; min-height: 48px; padding: 0 12px; font: 400 16px var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 0; caret-color: var(--navy); }
.row3 input:focus { outline: none; border-color: var(--navy); background: #fff; }
.row3 input::placeholder { color: #5a6a80; }
.row3 input[aria-invalid="true"] { border-color: #b3261e; }
.sum { padding: 14px 16px; color: var(--navy); background: var(--bg); border-left: 1px solid var(--navy); font-size: 15px; }
.cfg .btn { justify-self: start; }
.done { padding: 16px; background: var(--yel); color: var(--navy); font-weight: 500; }

/* news */
.news { padding: 0 0 clamp(96px, 12vw, 160px); }
.news-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 28px 0 32px; border-top: 1px solid var(--navy); }
.news-head h2 { color: var(--navy); }
.news-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.news-g a { display: grid; gap: 14px; text-decoration: none; color: var(--navy); }
.news-g .ph { position: relative; overflow: hidden; background: var(--bg-2); }
.news-g img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--ease); }
.news-g a:hover img { transform: scale(1.04); }
.news-g .ph span { position: absolute; left: 12px; top: 12px; padding: 6px 9px; color: var(--navy); background: var(--bg); }
.news-g time { color: var(--ink-2); }
.news-g h3 { font: 600 22px/1.15 var(--display); font-stretch: 92%; text-transform: none; letter-spacing: 0; }
.news-g a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; }

/* footer */
.foot { position: relative; overflow: hidden; padding: clamp(88px, 11vw, 150px) 0 0; background: var(--navy-2); color: #fff; }
.foot-big { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); font: 700 clamp(48px, 7vw, 96px)/.9 var(--display); font-stretch: 78%; text-transform: uppercase; }
.foot-big .dot { width: .52em; height: .52em; animation: none; }
.foot-line { --c: var(--yel); --s: 14px; display: flex; flex-wrap: wrap; gap: 8px 40px; margin-top: 36px; padding: 22px 26px; width: fit-content; max-width: 100%; font: 600 clamp(22px, 2.4vw, 34px)/1.1 var(--display); font-stretch: 88%; }
.foot-line a { text-decoration: none; }
.foot-line a:hover { color: var(--yel); }
.foot-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; margin-top: clamp(56px, 7vw, 96px); }
.foot-g > div { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); display: grid; align-content: start; gap: 8px; }
.foot-g .mono { color: var(--on-navy-2); }
.foot-g .sp { margin-top: 10px; }
.foot-g a { text-decoration: none; }
.foot-g a:hover { color: var(--yel); }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 56px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2); }
.foot-nav nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font: 500 14px/1 var(--body); text-transform: uppercase; letter-spacing: .03em; }
.foot-nav nav a { text-decoration: none; }
.foot-nav nav a:hover { color: var(--yel); }
.foot .langs a { color: var(--on-navy-2); }
.foot .langs a[aria-current] { color: #fff; }
.ghost { margin: 0; padding: 0 var(--gut); font: 800 clamp(96px, 21vw, 360px)/.8 var(--display); font-stretch: 75%; text-transform: uppercase; white-space: nowrap; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .16); transform: translateY(14%); user-select: none; }
.foot-b { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; padding: 20px 0 26px; font-size: 13px; color: var(--on-navy-2); border-top: 1px solid rgba(255, 255, 255, .2); position: relative; background: var(--navy-2); }
.foot-b a { color: var(--yel); }

/* motion states (only with JS; content is visible without it) */
.js [data-split] .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.js [data-split] .wi { display: inline-block; will-change: transform; }
.js [data-scan] { position: relative; }
.js [data-scan]::after { content: ""; position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(var(--sc, 100) * 1%); width: 2px; background: var(--yel); opacity: var(--so, 0); pointer-events: none; }
.js [data-scan] > :first-child { clip-path: inset(0 calc(100% - var(--sc, 100) * 1%) 0 0); }

/* responsive */
@media (max-width: 1180px) {
  .head-loc { display: none; }
  .rows li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; }
  .rows .tags { display: none; }
}
@media (max-width: 980px) {
  :root { --hh: 62px; }
  .head-nav, .head-r .langs { display: none; }
  .menu-b { display: block; }
  .head-r { margin-left: auto; }
  .statement { grid-column: 1 / -1; }
  .founders { grid-column: 1 / -1; grid-row: auto; }
  .facts { grid-column: 1 / -1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
  .svc-media { display: none; }
  .svc-list { grid-column: 1 / -1; padding: 0; }
  .svc-i { min-height: 0; padding: 40px 0; }
  .svc-i h3 { color: #fff; }
  .svc-mv { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
  .svc-count { display: none; }
  .ref-head h2, .filters { grid-column: 1 / -1; }
  .job-t, .job-r, .ask-t, .cfg { grid-column: 1 / -1; }
  .ask-t { position: static; }
  .news-g { grid-template-columns: 1fr 1fr; }
  .news-g article:last-child { display: none; }
  .foot-g { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .langs { gap: 8px; }
  .vf-btn { padding: 11px 12px; font-size: 13px; }
  .hero { min-height: 700px; max-height: none; height: auto; }
  .hud { position: relative; inset: auto; margin: 12px; min-height: calc(100svh - var(--hh) - 24px); }
  .hero-sub { font-size: 16px; }
  .hero-pick .btn { margin-left: 0; width: 100%; }
  .hero-pick > .mono { width: 100%; }
  .hud-bar p { min-width: 0; }
  .cl-d { display: none; }
  .founders { grid-column: 1 / -1; }
  .facts { grid-template-columns: 1fr; gap: 16px; }
  .rows li { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 18px 4px; }
  .rows .d { grid-column: 1 / -1; grid-row: 2; }
  .job-c { grid-template-columns: 1fr; }
  .row3 { grid-template-columns: 1fr; }
  .news-g { grid-template-columns: 1fr; }
  .news-g article:last-child { display: block; }
  .foot-g { grid-template-columns: 1fr; }
  .foot-line { padding: 18px; }
  .proj li { grid-template-columns: 1fr; gap: 4px; }
  .nrg { height: 300vh; }
  .beats { min-height: 440px; }
  .svc-head { flex-direction: column; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .nrg { height: auto; }
  .nrg-stick { position: relative; height: auto; min-height: 100vh; }
  .nrg-hud { position: relative; inset: auto; min-height: 100vh; gap: 48px; padding: calc(var(--hh) + 40px) var(--gut) 48px; }
  .beats { min-height: 0; display: grid; gap: 48px; }
  .beat { position: static; opacity: 1; transform: none; }
  .js .statement .w { opacity: 1; }
  .svc-i h3 { color: #fff; }
  .js [data-scan]::after { display: none; }
  .js [data-scan] > :first-child { clip-path: none; }
}