@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600&family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;
  --lang-ground: #070c12;
  --lang-canvas: #08121a;
  --lang-surface: #0d1b24;
  --lang-surface-raised: #142733;
  --lang-surface-muted: #0a1720;
  --lang-ink: #e8f1f7;
  --lang-ink-soft: #c2d2de;
  --lang-muted: #8ca1b4;
  --lang-border: #203440;
  --lang-border-strong: #31505e;
  --lang-primary-rgb: 61 220 200;
  --lang-energy-rgb: 255 155 61;
  --lang-data-rgb: 111 168 255;
  --lang-primary: rgb(var(--lang-primary-rgb));
  --lang-energy: rgb(var(--lang-energy-rgb));
  --lang-data: rgb(var(--lang-data-rgb));
  --lang-on-primary: #061612;
  --lang-danger: #ff5470;
  --lang-shadow-rgb: 0 0 0;
  --lang-font-display: 'Space Grotesk', sans-serif;
  --lang-font-ui: 'Manrope', sans-serif;
  --lang-font-data: 'IBM Plex Mono', monospace;
  --lang-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --lang-ease-emphasis: cubic-bezier(.16, 1, .3, 1);
  --lang-surface-themed: color-mix(in srgb, var(--lang-surface) 96%, var(--lang-primary) 4%);
  --lang-surface-muted-themed: color-mix(in srgb, var(--lang-surface-muted) 96%, var(--lang-primary) 4%);
  --lang-border-themed: color-mix(in srgb, var(--lang-border) 92%, var(--lang-primary) 8%);
  --lang-border-strong-themed: color-mix(in srgb, var(--lang-border-strong) 88%, var(--lang-primary) 12%);
}

:root[data-lang-mode='light'] {
  color-scheme: light;
  --lang-ground: #eef3f2;
  --lang-canvas: #e9efed;
  --lang-surface: #f8faf8;
  --lang-surface-raised: #f3f7f4;
  --lang-surface-muted: #e8efec;
  --lang-ink: #243330;
  --lang-ink-soft: #465b56;
  --lang-muted: #71837e;
  --lang-border: #d5dfdc;
  --lang-border-strong: #bfcec9;
  --lang-on-primary: #f8faf8;
  --lang-danger: #c52d4b;
  --lang-shadow-rgb: 51 76 69;
}

:root[data-lang-palette='delej'] { --lang-primary-rgb: 61 220 200; --lang-energy-rgb: 255 155 61; --lang-data-rgb: 111 168 255; }
:root[data-lang-palette='ocean'] { --lang-primary-rgb: 56 200 255; --lang-energy-rgb: 255 180 84; --lang-data-rgb: 127 140 255; }
:root[data-lang-palette='grove'] { --lang-primary-rgb: 121 217 120; --lang-energy-rgb: 255 200 87; --lang-data-rgb: 66 191 208; }
:root[data-lang-palette='ember'] { --lang-primary-rgb: 255 118 87; --lang-energy-rgb: 255 209 102; --lang-data-rgb: 90 169 255; }
:root[data-lang-palette='violet'] { --lang-primary-rgb: 167 139 250; --lang-energy-rgb: 255 143 186; --lang-data-rgb: 99 217 255; }
:root[data-lang-palette='aqua'] { --lang-primary-rgb: 45 212 191; --lang-energy-rgb: 251 146 60; --lang-data-rgb: 96 165 250; }
:root[data-lang-palette='aurora'] { --lang-primary-rgb: 103 232 249; --lang-energy-rgb: 196 181 253; --lang-data-rgb: 96 165 250; }
:root[data-lang-palette='cobalt'] { --lang-primary-rgb: 91 140 255; --lang-energy-rgb: 255 159 104; --lang-data-rgb: 88 214 199; }
:root[data-lang-palette='rose'] { --lang-primary-rgb: 251 113 133; --lang-energy-rgb: 251 191 36; --lang-data-rgb: 96 165 250; }
:root[data-lang-palette='neon'] { --lang-primary-rgb: 232 121 249; --lang-energy-rgb: 251 113 133; --lang-data-rgb: 103 232 249; }
:root[data-lang-palette='copper'] { --lang-primary-rgb: 245 158 98; --lang-energy-rgb: 242 193 78; --lang-data-rgb: 96 165 250; }
:root[data-lang-palette='solar'] { --lang-primary-rgb: 246 201 69; --lang-energy-rgb: 255 131 92; --lang-data-rgb: 91 184 255; }
:root[data-lang-palette='jade'] { --lang-primary-rgb: 52 211 153; --lang-energy-rgb: 251 191 36; --lang-data-rgb: 45 212 191; }
:root[data-lang-palette='moss'] { --lang-primary-rgb: 163 214 92; --lang-energy-rgb: 233 170 85; --lang-data-rgb: 102 182 201; }
:root[data-lang-palette='glacier'] { --lang-primary-rgb: 125 211 252; --lang-energy-rgb: 165 180 252; --lang-data-rgb: 94 234 212; }
:root[data-lang-palette='indigo'] { --lang-primary-rgb: 129 140 248; --lang-energy-rgb: 244 114 182; --lang-data-rgb: 56 189 248; }
:root[data-lang-palette='plum'] { --lang-primary-rgb: 192 132 252; --lang-energy-rgb: 251 113 133; --lang-data-rgb: 96 165 250; }
:root[data-lang-palette='ruby'] { --lang-primary-rgb: 244 63 94; --lang-energy-rgb: 245 158 11; --lang-data-rgb: 56 189 248; }
:root[data-lang-palette='sand'] { --lang-primary-rgb: 231 182 106; --lang-energy-rgb: 249 115 96; --lang-data-rgb: 106 169 216; }
:root[data-lang-palette='graphite'] { --lang-primary-rgb: 148 163 184; --lang-energy-rgb: 245 158 11; --lang-data-rgb: 96 165 250; }

:root[data-lang-mode='light'][data-lang-palette='delej'] { --lang-primary-rgb: 15 143 130; --lang-energy-rgb: 198 95 20; --lang-data-rgb: 53 111 203; }
:root[data-lang-mode='light'][data-lang-palette='ocean'] { --lang-primary-rgb: 8 126 168; --lang-energy-rgb: 185 104 13; --lang-data-rgb: 82 95 196; }
:root[data-lang-mode='light'][data-lang-palette='grove'] { --lang-primary-rgb: 60 139 62; --lang-energy-rgb: 173 117 20; --lang-data-rgb: 36 125 139; }
:root[data-lang-mode='light'][data-lang-palette='ember'] { --lang-primary-rgb: 200 76 50; --lang-energy-rgb: 168 121 6; --lang-data-rgb: 52 116 189; }
:root[data-lang-mode='light'][data-lang-palette='violet'] { --lang-primary-rgb: 115 82 199; --lang-energy-rgb: 189 77 124; --lang-data-rgb: 35 132 162; }
:root[data-lang-mode='light'][data-lang-palette='aqua'] { --lang-primary-rgb: 13 140 125; --lang-energy-rgb: 194 95 17; --lang-data-rgb: 57 117 200; }
:root[data-lang-mode='light'][data-lang-palette='aurora'] { --lang-primary-rgb: 24 138 156; --lang-energy-rgb: 117 101 191; --lang-data-rgb: 52 116 189; }
:root[data-lang-mode='light'][data-lang-palette='cobalt'] { --lang-primary-rgb: 53 101 200; --lang-energy-rgb: 197 103 48; --lang-data-rgb: 40 139 128; }
:root[data-lang-mode='light'][data-lang-palette='rose'] { --lang-primary-rgb: 196 67 91; --lang-energy-rgb: 168 117 0; --lang-data-rgb: 57 117 200; }
:root[data-lang-mode='light'][data-lang-palette='neon'] { --lang-primary-rgb: 168 63 186; --lang-energy-rgb: 196 67 91; --lang-data-rgb: 23 134 154; }
:root[data-lang-mode='light'][data-lang-palette='copper'] { --lang-primary-rgb: 173 92 38; --lang-energy-rgb: 168 121 25; --lang-data-rgb: 57 117 200; }
:root[data-lang-mode='light'][data-lang-palette='solar'] { --lang-primary-rgb: 154 118 16; --lang-energy-rgb: 197 76 49; --lang-data-rgb: 51 124 173; }
:root[data-lang-mode='light'][data-lang-palette='jade'] { --lang-primary-rgb: 22 134 93; --lang-energy-rgb: 168 117 0; --lang-data-rgb: 22 140 128; }
:root[data-lang-mode='light'][data-lang-palette='moss'] { --lang-primary-rgb: 95 143 37; --lang-energy-rgb: 169 101 26; --lang-data-rgb: 49 121 137; }
:root[data-lang-mode='light'][data-lang-palette='glacier'] { --lang-primary-rgb: 37 127 168; --lang-energy-rgb: 102 113 189; --lang-data-rgb: 24 142 128; }
:root[data-lang-mode='light'][data-lang-palette='indigo'] { --lang-primary-rgb: 84 94 195; --lang-energy-rgb: 182 64 125; --lang-data-rgb: 22 128 170; }
:root[data-lang-mode='light'][data-lang-palette='plum'] { --lang-primary-rgb: 134 72 191; --lang-energy-rgb: 196 67 91; --lang-data-rgb: 57 117 200; }
:root[data-lang-mode='light'][data-lang-palette='ruby'] { --lang-primary-rgb: 189 41 68; --lang-energy-rgb: 178 96 0; --lang-data-rgb: 22 128 170; }
:root[data-lang-mode='light'][data-lang-palette='sand'] { --lang-primary-rgb: 163 110 36; --lang-energy-rgb: 189 75 56; --lang-data-rgb: 61 115 157; }
:root[data-lang-mode='light'][data-lang-palette='graphite'] { --lang-primary-rgb: 89 104 124; --lang-energy-rgb: 178 96 0; --lang-data-rgb: 57 117 200; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

.lang-app {
  min-height: 100vh;
  color: var(--lang-ink);
  background:
    linear-gradient(rgb(var(--lang-primary-rgb) / 2.8%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--lang-primary-rgb) / 2.8%) 1px, transparent 1px),
    radial-gradient(50rem 42rem at 5% 5%, rgb(var(--lang-primary-rgb) / 10%), transparent 72%),
    radial-gradient(42rem 38rem at 96% 45%, rgb(var(--lang-energy-rgb) / 7%), transparent 72%),
    var(--lang-ground);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  font-family: var(--lang-font-ui);
  line-height: 1.6;
  transition: color 220ms var(--lang-ease-standard), background-color 220ms var(--lang-ease-standard);
}

:root[data-lang-mode='light'] .lang-app {
  background:
    linear-gradient(rgb(var(--lang-primary-rgb) / 4%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--lang-primary-rgb) / 4%) 1px, transparent 1px),
    radial-gradient(50rem 42rem at 5% 5%, rgb(var(--lang-primary-rgb) / 13%), transparent 72%),
    radial-gradient(42rem 38rem at 96% 45%, rgb(var(--lang-energy-rgb) / 10%), transparent 72%),
    var(--lang-ground);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
}

.shell { width: min(1180px, calc(100% - clamp(40px, 8vw, 96px))); margin-inline: auto; }
.lang-surface { background: linear-gradient(135deg, rgb(var(--lang-primary-rgb) / 6%), transparent 42%), linear-gradient(315deg, rgb(var(--lang-primary-rgb) / 4%), transparent 38%), var(--lang-surface-themed); border: 1px solid var(--lang-border-themed); box-shadow: 0 18px 45px rgb(var(--lang-shadow-rgb) / 24%); }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: .7rem 1rem; border-radius: 10px; color: var(--lang-on-primary); background: var(--lang-primary); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.lang-focus:focus-visible, a:focus-visible { outline: 2px solid var(--lang-primary); outline-offset: 3px; }

.site-header { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid var(--lang-border-themed); background: color-mix(in srgb, var(--lang-ground) 84%, transparent); backdrop-filter: blur(18px); }
.nav-wrap { min-height: 78px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 60px; height: 39px; object-fit: contain; flex: 0 0 auto; }
.brand-name { color: var(--lang-ink); font: 700 1.05rem/1 var(--lang-font-display); letter-spacing: .09em; }
.brand-name small { display: block; margin-top: 5px; color: var(--lang-primary); font: 600 .59rem/1 var(--lang-font-data); letter-spacing: .23em; text-transform: uppercase; }
.site-nav { display: flex; justify-content: flex-end; gap: clamp(16px, 3vw, 34px); }
.site-nav a { position: relative; padding: 27px 0 25px; color: var(--lang-muted); font-size: .84rem; font-weight: 700; text-decoration: none; }
.site-nav a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--lang-primary); content: ''; transform: scaleX(0); transition: transform 190ms var(--lang-ease-standard); }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--lang-ink); }
.site-nav a:hover::after, .site-nav a[aria-current='page']::after { transform: scaleX(1); }
.theme-toggle { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--lang-border-strong-themed); border-radius: 14px; color: var(--lang-ink-soft); background: var(--lang-surface-muted-themed); cursor: pointer; font: 700 .72rem/1 var(--lang-font-ui); }
.theme-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.theme-icon--moon { display: none; }
:root[data-lang-mode='light'] .theme-icon--sun { display: none; }
:root[data-lang-mode='light'] .theme-icon--moon { display: block; }

.hero { min-height: min(790px, calc(100vh - 78px)); display: grid; grid-template-columns: minmax(0, .92fr) minmax(450px, 1.08fr); align-items: center; gap: clamp(42px, 7vw, 90px); padding-block: clamp(70px, 10vw, 130px); }
.eyebrow { margin: 0 0 18px; color: var(--lang-primary); font: 600 .68rem/1.4 var(--lang-font-data); letter-spacing: .15em; text-transform: uppercase; }
.signal-dot { width: 7px; height: 7px; display: inline-block; margin-right: 10px; border-radius: 50%; background: var(--lang-primary); box-shadow: 0 0 0 5px rgb(var(--lang-primary-rgb) / 13%), 0 0 18px rgb(var(--lang-primary-rgb) / 75%); animation: signal-breath 2.2s ease-in-out infinite; }
h1, h2, h3 { margin-top: 0; color: var(--lang-ink); font-family: var(--lang-font-display); overflow-wrap: break-word; }
h1 { max-width: 760px; margin-bottom: 25px; font-size: clamp(3rem, 6vw, 5.35rem); line-height: .98; letter-spacing: -.055em; }
h1 span { color: var(--lang-primary); }
h2 { margin-bottom: 14px; font-size: clamp(1.85rem, 3.7vw, 3.2rem); line-height: 1.08; letter-spacing: -.035em; }
h3 { margin-bottom: 8px; font-size: 1.15rem; line-height: 1.2; }
p { color: var(--lang-ink-soft); }
.lead { max-width: 680px; margin: 0; color: var(--lang-ink-soft); font-size: clamp(1rem, 1.6vw, 1.17rem); line-height: 1.75; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: .78rem 1.2rem; border: 1px solid transparent; border-radius: 16px; font-size: .84rem; font-weight: 700; text-decoration: none; transition: transform 190ms var(--lang-ease-standard), box-shadow 190ms var(--lang-ease-standard), border-color 190ms var(--lang-ease-standard); }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--lang-on-primary); background: var(--lang-primary); box-shadow: 0 10px 28px rgb(var(--lang-primary-rgb) / 22%); }
.button-primary:hover { box-shadow: 0 14px 34px rgb(var(--lang-primary-rgb) / 30%); }
.button-secondary { color: var(--lang-ink); border-color: var(--lang-border-strong-themed); background: var(--lang-surface-muted-themed); }
.button-secondary:hover { border-color: var(--lang-primary); }
.hero-proof { display: flex; align-items: center; gap: 12px; margin-top: 46px; color: var(--lang-muted); font: 600 .62rem/1 var(--lang-font-data); letter-spacing: .09em; text-transform: uppercase; }
.hero-proof i { width: clamp(18px, 4vw, 54px); height: 1px; background: linear-gradient(90deg, var(--lang-primary), transparent); }

.hero-board { position: relative; overflow: hidden; padding: 24px; border-radius: 24px; }
.board-head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; color: var(--lang-muted); font: 600 .63rem/1 var(--lang-font-data); letter-spacing: .11em; }
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--lang-primary); }
.status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.signal-map { height: 145px; margin: 10px -10px -26px; opacity: .74; }
.signal-map svg { width: 100%; height: 100%; overflow: visible; }
.signal-map path { fill: none; stroke: var(--lang-border-strong-themed); stroke-width: 2; }
.signal-map .signal-path { stroke: var(--lang-primary); stroke-dasharray: 10 18; animation: signal-route 5s linear infinite; }
.signal-map circle { fill: var(--lang-surface); stroke: var(--lang-primary); stroke-width: 2; }
.discipline-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.discipline { min-height: 153px; padding: 20px; border: 1px solid var(--lang-border-themed); border-radius: 18px; background: color-mix(in srgb, var(--lang-surface-raised) 91%, transparent); transition: transform 200ms var(--lang-ease-standard), border-color 200ms var(--lang-ease-standard); }
.discipline:hover { transform: translateY(-3px); border-color: var(--lang-border-strong-themed); }
.discipline-icon, .service-symbol svg { width: 25px; height: 25px; margin-bottom: 25px; fill: none; stroke: var(--lang-primary); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.discipline strong { display: block; margin-bottom: 6px; color: var(--lang-ink); font-family: var(--lang-font-display); font-size: .95rem; }
.discipline small { display: block; color: var(--lang-muted); font-size: .73rem; line-height: 1.5; }

.section { padding-block: clamp(66px, 9vw, 108px); }
.section-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr); align-items: end; gap: 50px; margin-bottom: 38px; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { margin-bottom: 0; }
.section-head > p { max-width: 500px; margin: 0; font-size: .94rem; line-height: 1.7; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.service-card { min-height: 235px; display: flex; flex-direction: column; padding: 24px; border-radius: 20px; }
.service-card .number, .service-detail .number { color: var(--lang-primary); font: 600 .66rem/1 var(--lang-font-data); letter-spacing: .12em; }
.service-card h3 { margin-top: auto; }
.service-card p { margin: 0; color: var(--lang-muted); font-size: .83rem; }
.feature-panel { padding: clamp(24px, 4vw, 48px); border-radius: 26px; }
.reference-preview { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.reference-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.reference-card { position: relative; min-height: 250px; overflow: hidden; border: 1px solid var(--lang-border-themed); border-radius: 18px; background: var(--lang-surface-muted); }
.reference-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--lang-ease-emphasis); }
.reference-card:hover img { transform: scale(1.025); }
.reference-card--brand { background: radial-gradient(circle at 65% 25%, rgb(var(--lang-energy-rgb) / 16%), transparent 36%), var(--lang-surface-muted); }
.reference-card--brand img { width: 54%; height: 58%; margin: 4% auto 0; object-fit: contain; }
.overlay { position: absolute; inset: auto 0 0; padding: 60px 22px 20px; color: #e8f1f7; background: linear-gradient(transparent, rgb(2 8 12 / 93%)); }
.overlay span { color: var(--lang-primary); font: 600 .57rem/1 var(--lang-font-data); letter-spacing: .12em; text-transform: uppercase; }
.overlay h3 { margin: 6px 0; color: #e8f1f7; }
.overlay p { margin: 0; color: #c2d2de; font-size: .76rem; }

.page-intro { max-width: 1180px; padding-top: clamp(80px, 11vw, 140px); padding-bottom: 22px; }
.page-intro h1 { max-width: 900px; font-size: clamp(2.75rem, 6vw, 5rem); }
.service-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.service-detail { display: flex; flex-direction: column; min-width: 0; position: relative; min-height: 350px; padding: clamp(25px, 4vw, 38px); border-radius: 24px; }
.service-detail:nth-child(2n) { transform: none; }
.service-symbol { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 46px; border: 1px solid var(--lang-border-strong-themed); border-radius: 16px; background: rgb(var(--lang-primary-rgb) / 8%); }
.service-symbol svg { margin: 0; }
.service-detail h2 { min-height: 2.6em; max-width: 520px; margin: 10px 0 12px; font-size: clamp(1.45rem, 3vw, 2.1rem); }
.service-detail > p { margin: 0 0 24px; color: var(--lang-muted); font-size: .9rem; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; min-height: 31px; align-items: center; padding: 0 10px; border: 1px solid var(--lang-border-themed); border-radius: 10px; color: var(--lang-ink-soft); background: var(--lang-surface-muted-themed); font: 600 .62rem/1 var(--lang-font-data); letter-spacing: .03em; }
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: process; }
.process-step { position: relative; padding: 26px 24px 0 0; border-top: 1px solid var(--lang-border-strong-themed); }
.process-step::before { position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--lang-primary); box-shadow: 0 0 0 5px rgb(var(--lang-primary-rgb) / 10%); content: ''; }
.process-step::after { position: absolute; top: -1px; right: 0; width: 42%; height: 1px; background: linear-gradient(90deg, var(--lang-primary), transparent); content: ''; }
.process-step span { color: var(--lang-primary); font: 600 .62rem/1 var(--lang-font-data); }
.process-step h3 { margin: 14px 0 6px; }
.process-step p { margin: 0; color: var(--lang-muted); font-size: .8rem; }

.project-list { display: grid; gap: 28px; }
.project { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); min-height: 410px; overflow: hidden; border-radius: 24px; scroll-margin-top: 110px; }
.project:nth-child(even) { grid-template-columns: minmax(320px, .88fr) minmax(0, 1.12fr); }
.project:nth-child(even) .project-media { order: 2; }
.project-media { min-height: 360px; overflow: hidden; background: var(--lang-surface-muted); }
.project-media > img { width: 100%; height: 100%; object-fit: cover; }
.project-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 55px); }
.project-copy .kicker { margin: 0 0 10px; color: var(--lang-primary); font: 600 .62rem/1.5 var(--lang-font-data); letter-spacing: .1em; text-transform: uppercase; }
.project-copy h2 { margin-bottom: 14px; }
.project-copy > p { margin: 0 0 26px; color: var(--lang-muted); font-size: .9rem; }
.industrial-visual { display: grid; place-items: center; padding: 35px; background: radial-gradient(circle at 50% 50%, rgb(var(--lang-primary-rgb) / 14%), transparent 48%), var(--lang-surface-muted); }
.system-map { position: relative; width: min(100%, 500px); height: 280px; }
.system-map::before, .system-map::after { position: absolute; z-index: 0; inset: 50% 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--lang-primary), transparent); content: ''; }
.system-map::after { inset: 12% 50%; width: 1px; height: auto; background: linear-gradient(transparent, var(--lang-primary), transparent); }
.system-map strong, .system-map span { position: absolute; z-index: 2; display: grid; place-items: center; border: 1px solid var(--lang-border-strong-themed); color: var(--lang-ink-soft); background: var(--lang-surface-raised); box-shadow: 0 10px 30px rgb(var(--lang-shadow-rgb) / 20%); text-align: center; }
.system-map strong { top: 50%; left: 50%; width: 110px; height: 110px; border-radius: 50%; color: var(--lang-primary); font: 700 1rem/1 var(--lang-font-display); transform: translate(-50%, -50%); }
.system-map span { width: 120px; min-height: 46px; padding: 8px; border-radius: 11px; font: 600 .57rem/1.35 var(--lang-font-data); }
.system-map span:nth-of-type(1) { top: 0; left: 2%; }
.system-map span:nth-of-type(2) { top: 0; right: 2%; }
.system-map span:nth-of-type(3) { bottom: 0; left: 2%; }
.system-map span:nth-of-type(4) { right: 2%; bottom: 0; }
.project-media--brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: radial-gradient(circle at 65% 35%, rgb(var(--lang-energy-rgb) / 16%), transparent 32%), radial-gradient(circle at 30% 62%, rgb(var(--lang-data-rgb) / 13%), transparent 36%), var(--lang-surface-muted); }
.project-media--brand img { width: min(57%, 330px); height: auto; max-height: 230px; object-fit: contain; }
.project-media--brand span { color: var(--lang-muted); font: 600 .68rem/1 var(--lang-font-data); letter-spacing: .28em; text-transform: uppercase; }
.note { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: clamp(28px, 5vw, 50px); border-radius: 24px; }
.note h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
.note p:last-child { max-width: 690px; margin-bottom: 0; }
.note .button { flex: 0 0 auto; }
.capability-reference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.capability-reference { min-height: 390px; padding: clamp(26px, 4vw, 42px); border-radius: 24px; }
.capability-reference .service-symbol { margin-bottom: 44px; }
.capability-reference .kicker { margin: 0 0 12px; color: var(--lang-primary); font: 600 .62rem/1.5 var(--lang-font-data); letter-spacing: .1em; text-transform: uppercase; }
.capability-reference h2 { max-width: 520px; font-size: clamp(1.55rem, 3vw, 2.35rem); }
.capability-reference > p:not(.kicker) { max-width: 620px; margin: 0 0 28px; color: var(--lang-muted); }

.legal-page { background: radial-gradient(circle at 14% 8%, rgb(var(--lang-data-rgb) / 8%), transparent 28%), var(--lang-ground); }
.legal-intro { padding-bottom: clamp(42px, 7vw, 74px); }
.legal-intro h1 { max-width: 980px; }
.legal-meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 42px; }
.legal-meta-card { min-height: 105px; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 20px; border: 1px solid var(--lang-border-themed); border-radius: 17px; background: var(--lang-surface-muted-themed); }
.legal-meta-card span { color: var(--lang-muted); font: 600 .61rem/1.2 var(--lang-font-data); letter-spacing: .1em; text-transform: uppercase; }
.legal-meta-card strong { color: var(--lang-ink); font-family: var(--lang-font-display); font-size: .96rem; overflow-wrap: anywhere; }
.legal-section-wrap { padding-top: 0; }
.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 22px; }
.legal-toc { position: sticky; top: 100px; padding: 24px; border-radius: 20px; }
.legal-toc .kicker, .legal-copy-section .kicker { margin: 0 0 16px; color: var(--lang-primary); font: 600 .61rem/1.4 var(--lang-font-data); letter-spacing: .11em; text-transform: uppercase; }
.legal-toc nav { display: grid; gap: 4px; }
.legal-toc a { padding: 8px 0; color: var(--lang-muted); font-size: .78rem; line-height: 1.35; text-decoration: none; transition: color 180ms var(--lang-ease-standard); }
.legal-toc a:hover { color: var(--lang-primary); }
.legal-content { padding: clamp(26px, 5vw, 58px); border-radius: 24px; }
.legal-copy-section { scroll-margin-top: 108px; padding-bottom: clamp(42px, 7vw, 70px); }
.legal-copy-section + .legal-copy-section { padding-top: clamp(42px, 7vw, 70px); border-top: 1px solid var(--lang-border-themed); }
.legal-copy-section:last-child { padding-bottom: 0; }
.legal-copy-section h2 { max-width: 760px; font-size: clamp(1.6rem, 3.3vw, 2.55rem); }
.legal-copy-section > p:not(.kicker), .legal-list { max-width: 830px; color: var(--lang-ink-soft); font-size: 1rem; line-height: 1.8; }
.legal-copy-section a { color: var(--lang-primary); text-underline-offset: 3px; }
.legal-list { display: grid; gap: 12px; padding-left: 1.25rem; }
.legal-list li::marker { color: var(--lang-primary); }
.legal-list strong, .legal-contact strong { color: var(--lang-ink); }
.legal-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0; }
.legal-info-card { padding: 22px; border: 1px solid var(--lang-border-themed); border-radius: 17px; background: var(--lang-surface-muted-themed); }
.legal-info-card h3 { font-size: 1rem; }
.legal-info-card p { margin: 0; color: var(--lang-muted); font-size: .86rem; line-height: 1.7; }
.legal-callout { max-width: 830px; margin-top: 28px; padding: 22px; border: 1px solid rgb(var(--lang-data-rgb) / 28%); border-left: 3px solid var(--lang-data); border-radius: 15px; background: rgb(var(--lang-data-rgb) / 7%); }
.legal-callout--warning { border-color: rgb(var(--lang-energy-rgb) / 25%); border-left-color: var(--lang-energy); background: rgb(var(--lang-energy-rgb) / 7%); }
.legal-callout strong { color: var(--lang-ink); font-family: var(--lang-font-display); }
.legal-callout p { margin: 8px 0 0; color: var(--lang-ink-soft); font-size: .9rem; line-height: 1.7; }
.legal-contact { padding: clamp(28px, 5vw, 46px); border: 1px solid var(--lang-border-strong-themed); border-radius: 20px; background: radial-gradient(circle at 100% 0, rgb(var(--lang-primary-rgb) / 11%), transparent 42%), var(--lang-surface-muted-themed); }
.legal-contact + .legal-copy-section { border-top: 0; }

.site-footer { margin-top: 55px; border-top: 1px solid var(--lang-border-themed); background: color-mix(in srgb, var(--lang-surface-muted) 76%, transparent); }
.footer-inner { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--lang-muted); font-size: .72rem; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--lang-ink); font: 700 .78rem/1 var(--lang-font-display); letter-spacing: .08em; text-decoration: none; }
.footer-brand img { width: 48px; height: 31px; object-fit: contain; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: var(--lang-primary); }

.palette-launch { position: fixed; z-index: 90; right: 18px; bottom: 18px; min-height: 44px; padding: 0 16px; border: 1px solid var(--lang-border-strong-themed); border-radius: 14px; color: var(--lang-ink); background: var(--lang-surface-raised); box-shadow: 0 12px 32px rgb(var(--lang-shadow-rgb) / 28%); cursor: pointer; font: 600 .68rem/1 var(--lang-font-data); }
.palette-lab { width: min(720px, calc(100% - 28px)); max-height: min(760px, calc(100vh - 28px)); padding: 0; border: 1px solid var(--lang-border-strong-themed); border-radius: 24px; color: var(--lang-ink); background: var(--lang-surface); box-shadow: 0 28px 80px rgb(0 0 0 / 45%); }
.palette-lab::backdrop { background: rgb(2 7 11 / 72%); backdrop-filter: blur(7px); }
.palette-panel { padding: clamp(22px, 5vw, 38px); }
.palette-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.palette-head span { color: var(--lang-primary); font: 600 .62rem/1 var(--lang-font-data); letter-spacing: .1em; text-transform: uppercase; }
.palette-head h2 { margin: 9px 0 0; font-size: 2rem; }
.palette-panel > p { margin: 10px 0 22px; color: var(--lang-muted); font-size: .82rem; }
.icon-button { width: 44px; height: 44px; border: 1px solid var(--lang-border-themed); border-radius: 13px; color: var(--lang-ink); background: var(--lang-surface-muted-themed); cursor: pointer; font-size: 1.6rem; }
.palette-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; max-height: 390px; overflow: auto; padding: 3px; }
.palette-option { min-height: 72px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; padding: 10px; border: 1px solid var(--lang-border-themed); border-radius: 13px; color: var(--lang-ink-soft); background: var(--lang-surface-muted-themed); cursor: pointer; font: 600 .68rem/1 var(--lang-font-data); }
.palette-option[aria-pressed='true'] { border-color: var(--lang-primary); box-shadow: 0 0 0 2px rgb(var(--lang-primary-rgb) / 14%); }
.palette-swatches { display: flex; gap: 4px; }
.palette-swatches i { width: 21px; height: 9px; border-radius: 6px; background: var(--swatch); }
.reset-button { width: 100%; min-height: 44px; margin-top: 16px; border: 1px solid var(--lang-border-strong-themed); border-radius: 14px; color: var(--lang-ink); background: transparent; cursor: pointer; font-weight: 700; }

.lang-reveal { animation: none; }
@keyframes lang-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes signal-route { from { stroke-dashoffset: 112; } to { stroke-dashoffset: 0; } }
@keyframes signal-breath { 0%,100% { opacity: .6; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-copy { max-width: 780px; }
  .hero-board { max-width: 720px; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .project, .project:nth-child(even) { grid-template-columns: 1fr; }
  .project:nth-child(even) .project-media { order: 0; }
  .project-copy { min-height: 330px; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .legal-toc nav { grid-template-columns: 1fr 1fr; gap: 2px 24px; }
}

@media (max-width: 780px) {
  .nav-wrap { grid-template-columns: 1fr auto; gap: 8px 16px; padding-block: 10px; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 24px; overflow-x: auto; }
  .site-nav a { padding: 9px 0 12px; white-space: nowrap; }
  .theme-label { display: none; }
  .theme-toggle { width: 44px; justify-content: center; padding: 0; }
  .hero { padding-top: 72px; }
  .section-head { grid-template-columns: 1fr; gap: 18px; }
  .reference-preview { grid-template-columns: 1fr; }
  .reference-stack { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .reference-card { min-height: 300px; }
  .reference-stack .reference-card { min-height: 230px; }
  .process { grid-template-columns: 1fr 1fr; gap: 34px 0; }
  .service-detail-grid { grid-template-columns: 1fr; }
  .service-detail:nth-child(2n) { transform: none; }
  .note { align-items: flex-start; flex-direction: column; }
  .capability-reference-grid { grid-template-columns: 1fr; }
  .legal-meta-grid { grid-template-columns: 1fr; }
  .legal-card-grid { grid-template-columns: 1fr; }
  .footer-inner { min-height: 150px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 12px; }
  .footer-links { flex-wrap: wrap; }
  .palette-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 520px) {
  .shell { width: min(100% - 32px, 1180px); }
  .brand-mark { width: 49px; height: 32px; }
  .brand-name { font-size: .86rem; }
  .brand-name small { font-size: .5rem; }
  .site-nav { gap: 19px; }
  .site-nav a { font-size: .75rem; }
  h1, .page-intro h1 { font-size: clamp(2.2rem, 11.5vw, 4rem); overflow-wrap: break-word; }
  .actions { flex-direction: column; }
  .button { width: 100%; }
  .hero-proof { align-items: flex-start; flex-direction: column; gap: 9px; }
  .hero-proof i { width: 1px; height: 15px; margin-left: 5px; background: linear-gradient(var(--lang-primary), transparent); }
  .hero-board { padding: 16px; }
  .board-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .signal-map { height: 110px; }
  .discipline-grid, .service-grid, .reference-stack, .process { grid-template-columns: 1fr; }
  .discipline { min-height: 138px; }
  .reference-card, .reference-stack .reference-card { min-height: 260px; }
  .service-card { min-height: 205px; }
  .project-media { min-height: 280px; }
  .project-copy { min-height: auto; }
  .system-map { height: 230px; }
  .system-map span { width: 102px; font-size: .5rem; }
  .system-map strong { width: 88px; height: 88px; }
  .palette-grid { grid-template-columns: 1fr 1fr; }
  .palette-launch { right: 12px; bottom: 12px; }
  .legal-toc nav { grid-template-columns: 1fr; }
  .legal-content { padding-inline: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Contact page and aligned service cards. */
.service-detail > .tags { margin-top: auto; }
.contact-section { padding-top: 0; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.contact-card { min-width: 0; padding: clamp(25px, 4vw, 38px); border-radius: 24px; text-decoration: none; transition: border-color 180ms ease, background-color 180ms ease; }
.contact-card:hover { border-color: var(--lang-primary); }
.contact-card .eyebrow { display: block; margin-top: 24px; margin-bottom: 12px; }
.contact-card h3 { font-size: clamp(1rem, 2.2vw, 1.65rem); overflow-wrap: anywhere; }
.contact-action { display: inline-flex; gap: 12px; color: var(--lang-primary); font-size: .84rem; font-weight: 700; }
@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } .service-detail h2 { min-height: 0; } }

/* A stable service grid: only the emphasis moves between cards. */
.hero-board .discipline-grid { margin-top: 26px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.hero-board .discipline { position: relative; min-width: 0; min-height: 190px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--lang-ink); font: inherit; cursor: pointer; transform: none; overflow-wrap: anywhere; transition: border-color 550ms ease, background-color 550ms ease, box-shadow 550ms ease; }
.hero-board .discipline.is-active { border-color: var(--lang-primary); background: color-mix(in srgb, var(--lang-surface-raised) 86%, var(--lang-primary)); box-shadow: inset 0 0 28px rgb(var(--lang-primary-rgb) / 7%); }
.hero-board .discipline:hover { transform: none; border-color: var(--lang-primary); }
.hero-board .discipline:focus-visible { outline: 2px solid var(--lang-primary); outline-offset: 4px; }
.hero-board .discipline-icon { flex: 0 0 auto; margin-bottom: 22px; }
.hero-board .discipline strong { min-height: 2.8em; line-height: 1.4; margin-bottom: 9px; }
.hero-board .discipline small { margin-top: auto; }
.scroll-reveal { opacity: 1; transform: none; transition: opacity 650ms var(--lang-ease-emphasis), transform 650ms var(--lang-ease-emphasis); }
.scroll-reveal.reveal-pending { opacity: 0; transform: translateY(22px); }
@media (max-width: 520px) {
  .hero-board .discipline { min-height: 190px; padding: 16px 12px; }
  .hero-board .discipline strong { font-size: .82rem; }
  .hero-board .discipline small { font-size: .68rem; }
  .board-head { line-height: 1.5; }
}
@media (max-width: 340px) { .hero-board .discipline-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal, .scroll-reveal.reveal-pending { opacity: 1; transform: none; transition: none; }
  .hero-board .discipline, .hero-board .discipline::before { transition: none; }
}

/* LANG opal: blue / amber light rotating through glass surfaces. */
@property --lang-orbit-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hero-board { isolation: isolate; background: linear-gradient(140deg, #152731e8, #0b141ee8); border-color: #42657866; box-shadow: 0 28px 80px #0005, inset 0 1px 0 #b8e5ff16; }
.hero-board::before { content: ''; position: absolute; z-index: -1; width: 140%; aspect-ratio: 1; left: -20%; top: -16%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, #359dd633 75deg, transparent 145deg, #f995272b 230deg, transparent 320deg); filter: blur(38px); animation: lang-opal-turn 22s linear infinite; pointer-events: none; }
.hero-board .discipline-grid { gap: 22px; }
.hero-board .discipline { isolation: isolate; overflow: hidden; border-color: #7cabc030; background: linear-gradient(145deg, #243d4a99, #0f202ce0); box-shadow: inset 0 1px 0 #c0e4ff12; backdrop-filter: blur(14px); transition: border-color 850ms ease, background 850ms ease, box-shadow 850ms ease; }
.hero-board .discipline > * { position: relative; z-index: 2; }
.hero-board .discipline::before { content: ''; position: absolute; inset: 0; z-index: 1; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--lang-orbit-angle), transparent 0deg, #56b9ee 65deg, #bdeaff 100deg, transparent 155deg, transparent 185deg, #fa9c2a 245deg, #ffda9b 280deg, transparent 335deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 850ms ease; animation: lang-border-orbit 6s linear infinite; pointer-events: none; }
.hero-board .discipline::after { content: ''; position: absolute; z-index: 0; inset: -60%; background: conic-gradient(from 40deg, transparent 0deg, #67c9ff20 75deg, transparent 140deg, #ffb34c22 250deg, transparent 310deg); opacity: 0; filter: blur(22px); animation: lang-opal-turn 13s linear infinite; transition: opacity 1000ms ease; pointer-events: none; }
.hero-board .discipline.is-active { border-color: #74bfe354; background: linear-gradient(145deg, #234859a8, #1e2d39e8); box-shadow: 0 0 28px #3b9fd519, inset 0 1px 0 #d4f1ff28; }
.hero-board .discipline.is-active::before, .hero-board .discipline.is-active::after { opacity: 1; }
.hero-board .discipline .discipline-icon { color: #91a9ba; stroke: currentColor; transition: color 850ms ease, filter 850ms ease; }
.hero-board .discipline.is-active .discipline-icon { color: #79d0ff; filter: drop-shadow(0 0 9px #48b5f66e); }
.hero-board .discipline:nth-of-type(even).is-active .discipline-icon { color: #ffb452; filter: drop-shadow(0 0 9px #ff9d326e); }
.hero-board .discipline small { color: #a2b6c5; }
.brand-orbit { position: absolute; z-index: 5; top: 50%; left: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); pointer-events: none; }
.orbit-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #50b8f4, transparent 95deg, #ffac37 175deg, transparent 285deg, #50b8f4); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); animation: lang-opal-turn 7s linear infinite; filter: drop-shadow(0 0 5px #65c8ff88); }
.orbit-ring--inner { inset: 7px; opacity: .7; animation-direction: reverse; animation-duration: 11s; }
.orbit-core { position: absolute; inset: 13px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #32596cdd, #0a1926f5 70%); border: 1px solid #a1d8f54d; box-shadow: 0 0 26px #39a7d93d, 0 8px 18px #0007, inset 0 1px 0 #fff3; backdrop-filter: blur(12px); }
.orbit-core img { width: 34px; height: auto; }
.hero-board.motion-paused::before, .hero-board.motion-paused .discipline::before, .hero-board.motion-paused .discipline::after, .hero-board.motion-paused .orbit-ring { animation-play-state: paused; }
@keyframes lang-opal-turn { to { transform: rotate(360deg); } }
@keyframes lang-border-orbit { to { --lang-orbit-angle: 360deg; } }
@media (max-width: 520px) { .hero-board .discipline-grid { gap: 18px; } .brand-orbit { width: 62px; height: 62px; } .orbit-core { inset: 11px; } .orbit-core img { width: 29px; } .orbit-ring--inner { inset: 6px; } }
@media (max-width: 340px) { .brand-orbit { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-board::before, .hero-board .discipline::before, .hero-board .discipline::after, .orbit-ring { animation: none; } }

/* Static atmosphere and a five-pixel clearance around the complete orbit. */
.hero-board { background: #101e28; }
.hero-board::before { content: none; animation: none; }
.hero-board .discipline-grid {
  --orbit-size: 72px;
  --card-gap: 22px;
  --orbit-clearance: 5px;
  --notch-radius: calc(var(--orbit-size) / 2 + var(--orbit-clearance));
  --half-gap: calc(var(--card-gap) / 2);
  gap: var(--card-gap);
  margin-top: 0;
  grid-template-rows: repeat(2, minmax(190px, 1fr));
}
.brand-orbit { width: var(--orbit-size); height: var(--orbit-size); }
.hero-board .discipline {
  -webkit-mask-image: radial-gradient(circle var(--notch-radius) at var(--notch-x) var(--notch-y), transparent calc(100% - .5px), #000 calc(100% + .5px));
  mask-image: radial-gradient(circle var(--notch-radius) at var(--notch-x) var(--notch-y), transparent calc(100% - .5px), #000 calc(100% + .5px));
}
.hero-board .discipline:nth-of-type(1) { --notch-x: calc(100% + var(--half-gap)); --notch-y: calc(100% + var(--half-gap)); }
.hero-board .discipline:nth-of-type(2) { --notch-x: calc(0px - var(--half-gap)); --notch-y: calc(100% + var(--half-gap)); }
.hero-board .discipline:nth-of-type(3) { --notch-x: calc(100% + var(--half-gap)); --notch-y: calc(0px - var(--half-gap)); }
.hero-board .discipline:nth-of-type(4) { --notch-x: calc(0px - var(--half-gap)); --notch-y: calc(0px - var(--half-gap)); }
@media (max-width: 520px) {
  .hero-board .discipline-grid { --orbit-size: 62px; --card-gap: 18px; }
}
@media (max-width: 340px) {
  .hero-board .discipline-grid { grid-template-rows: none; }
  .hero-board .discipline { -webkit-mask-image: none; mask-image: none; }
}