/* =========================================================
   AET Orion TEKMER
   ========================================================= */

/* ---------- Fonts (served from our own host; SIL OFL, see assets/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url("../fonts/jetbrains-mono-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

:root {
  --ink: #0A1022;
  --ink-2: #10182F;
  --ink-3: #19233F;
  --paper: #F6F5F0;
  --paper-2: #EDEBE3;
  --white: #FFFFFF;
  --field: #FAFAF7;

  --text: #0E1426;
  --body: #2E3547;
  --muted: #586074;
  --line: rgba(14, 20, 38, .10);
  --line-strong: rgba(14, 20, 38, .18);

  --on-ink: #EEF1F8;
  --on-ink-muted: #A0A8C0;
  --line-ink: rgba(255, 255, 255, .10);

  --teal: #1EC3B0;
  --teal-hover: #43D7C5;
  --teal-deep: #0B776B;
  --teal-soft: #DCF3EE;
  --teal-ink: #3C5D59;
  --gold: #F4BB4E;
  --danger: #B42318;

  --radius: 22px;
  --sheet-r: clamp(28px, 4vw, 48px);
  --horizon: clamp(24px, 6.5vw, 96px); /* how far the planet's curve dips at the sides */
  --shadow: 0 1px 2px rgba(10, 16, 34, .04), 0 18px 40px -18px rgba(10, 16, 34, .22);
  --ease: cubic-bezier(.2, .7, .2, 1);

  --container: 1200px;
  --header-h: 76px;

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img, svg, canvas, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
p, ol, ul, dl, dd, blockquote, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
::selection { background: var(--teal); color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

.container { width: min(100% - 32px, var(--container)); margin-inline: auto; }
@media (min-width: 768px) { .container { width: min(100% - 64px, var(--container)); } }

.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Arrows slip out on hover and come back in (see "Arrow slip" under Motion) */
.icon { --slip: none; }
.icon:has(> use[href="#i-arrow"]) { --slip: arrow-slip; }
.icon:has(> use[href="#i-arrow-up-right"]) { --slip: arrow-slip-up; }
.icon-wrap {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--teal-soft); color: var(--teal-deep);
}
.icon-wrap .icon { width: 22px; height: 22px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--teal); color: var(--ink); font-weight: 600;
  padding: 10px 16px; border-radius: 10px; transition: top .2s;
}
.skip-link:focus { top: 16px; }

/* ---------- Type ---------- */
h1 em, h2 em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.1em; letter-spacing: -.01em; line-height: .9;
  margin-left: .06em;
  color: var(--teal-deep);
}
.hero h1 em, .page-hero h1 em, .section--ink h2 em, .site-footer h2 em,
.cta-card h2 em, .guide h2 em { color: var(--teal); }

h2 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); letter-spacing: -.035em; line-height: 1.04; }
.h2-sm { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem); letter-spacing: -.03em; }
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-deep);
}
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
/* Sections in the page body are numbered like a technical document: 01 ── NELER SUNUYORUZ */
.sheet { counter-reset: bolum; }
.sheet .kicker { counter-increment: bolum; }
.sheet .kicker::after { content: counter(bolum, decimal-leading-zero); order: -1; opacity: .55; }
.section-lead { max-width: 40em; font-size: clamp(1.02rem, .96rem + .25vw, 1.12rem); color: var(--muted); }

/* ---------- Buttons & links ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: .96rem; line-height: 1.2; white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s, transform .45s var(--ease);
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover .icon { animation: var(--slip) .6s var(--ease); }
.btn:active { transform: scale(.98); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: .9rem; }
.btn-primary { background: var(--teal); color: var(--ink); }
.btn-primary:hover { background: var(--teal-hover); }
.btn-ghost { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); color: var(--on-ink); }
.btn-ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.32); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); }
.btn-outline { border-color: var(--line-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* sheen */
.btn-primary, .btn-dark { overflow: hidden; isolation: isolate; }
.btn-primary::before, .btn-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-130%); transition: transform .9s var(--ease);
}
.btn-dark::before { background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%); }
.btn-primary:hover::before, .btn-dark:hover::before { transform: translateX(130%); }

.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; color: var(--teal-deep); }
.text-link .icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.text-link:hover .icon { animation: var(--slip) .6s var(--ease); }
.text-link--light { color: var(--teal); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: var(--on-ink);
  border-bottom: 1px solid transparent;
  transition: transform .6s var(--ease), background-color .4s, border-color .4s;
  view-transition-name: site-header;
}
.site-header.is-scrolled {
  background: rgba(10, 16, 34, .82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--line-ink);
}
.site-header.is-hidden { transform: translateY(-100%); }
/* backdrop-filter would make the header the containing block of the fixed mobile menu */
body.nav-open .site-header { background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--line-ink); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { display: block; width: auto; height: 42px; }
@media (max-width: 479px) { .brand img { height: 22px; } }

.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.scroll-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--teal), #8FE8DC 60%, var(--gold));
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}

.nav-list { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-list > li { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-size: .93rem; font-weight: 500; color: var(--on-ink-muted);
  transition: color .25s;
}
.nav-link .caret { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.nav-link:hover, .nav-link[aria-current], .has-sub:hover > .nav-link, .has-sub:focus-within > .nav-link { color: #fff; }
.has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }
.sub-toggle { display: none; }

.nav-list > .nav-indicator {
  position: absolute; top: 0; left: 0; height: 100%; z-index: -1;
  border-radius: 999px; background: rgba(255,255,255,.08);
  opacity: 0; pointer-events: none;
  transition: transform .5s var(--ease), width .5s var(--ease), opacity .3s;
}
.nav-list > .nav-indicator.is-on { opacity: 1; }

.subnav {
  position: absolute; top: 100%; left: 50%; z-index: 5;
  padding-top: 14px;
  transform: translateX(-50%);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), visibility .3s;
}
.subnav-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  width: 600px; padding: 10px; border-radius: 22px;
  background: rgba(12, 19, 38, .97); border: 1px solid var(--line-ink);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.65);
  transform: translateY(10px) scale(.98); transform-origin: top center;
  transition: transform .45s var(--ease);
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; pointer-events: auto; }
.has-sub:hover .subnav-inner, .has-sub:focus-within .subnav-inner { transform: none; }
.sub-link { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border-radius: 14px; transition: background-color .25s; }
.sub-link:hover, .sub-link[aria-current] { background: rgba(255,255,255,.06); }
.sub-link .icon-wrap { width: 40px; height: 40px; border-radius: 12px; background: rgba(30,195,176,.12); color: var(--teal); }
.sub-link .icon-wrap .icon { width: 19px; height: 19px; }
.sub-link b { display: block; font-size: .93rem; font-weight: 600; color: #fff; }
.sub-link small { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.4; color: var(--on-ink-muted); }
.sub-all {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding: 14px 16px; border-radius: 14px;
  background: rgba(30,195,176,.08); color: var(--teal); font-size: .88rem; font-weight: 600;
  transition: background-color .25s;
}
.sub-all:hover { background: rgba(30,195,176,.14); }
.sub-all .icon { width: 18px; height: 18px; }
.sub-all:hover .icon { animation: var(--slip) .6s var(--ease); }
.nav-cta-mobile { display: none; }

.header-actions { display: flex; align-items: center; gap: 16px; }
.link-portal { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .93rem; font-weight: 500; color: var(--on-ink-muted); transition: color .2s; }
.link-portal .icon { width: 16px; height: 16px; }
.link-portal:hover { color: #fff; }
.nav-toggle { display: none; }
.nav-fallback { display: none; }
/* Narrow desktops: keep the header on one line (the portal link stays in the footer and on İletişim) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .link-portal { display: none; }
  .nav-link { padding-inline: 11px; }
}

@media (max-width: 1023px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--line-ink); background: rgba(255,255,255,.05);
  }
  .nav-toggle span { width: 18px; height: 2px; border-radius: 2px; background: #fff; transition: transform .3s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .main-nav {
    position: fixed; inset: var(--header-h) 0 0; z-index: 49;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 8px 16px 32px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ink);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--line-ink); }
  .nav-link { padding: 16px 4px; border-radius: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; color: #fff; }
  .nav-link[aria-current] { color: var(--teal); }
  .nav-link .caret, .nav-list > .nav-indicator { display: none; }
  .sub-toggle {
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--line-ink); background: none; color: #fff;
  }
  .sub-toggle .icon { transition: transform .35s var(--ease); }
  .has-sub.is-open .sub-toggle .icon { transform: rotate(180deg); }
  .subnav {
    position: static; grid-column: 1 / -1; transform: none; padding: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease);
  }
  .has-sub.is-open .subnav { grid-template-rows: 1fr; }
  .subnav-inner {
    min-height: 0; overflow: hidden; width: auto; grid-template-columns: 1fr; gap: 0;
    padding: 0; background: none; border: 0; box-shadow: none; transform: none !important;
  }
  .has-sub.is-open .subnav-inner { padding-bottom: 12px; }
  .sub-link { align-items: center; padding: 10px 4px; }
  .sub-link small, .sub-all { display: none; }
  .sub-link .icon-wrap { width: 34px; height: 34px; border-radius: 10px; }
  .nav-cta-mobile { display: grid; gap: 12px; margin-top: 32px; }
  .link-portal { display: none; }
}
@media (max-width: 479px) {
  .header-actions .btn { display: none; }
}

/* Menu items settle in one after another: dropdowns on desktop, the full-screen menu on mobile */
.subnav-inner > :nth-child(2) { --ni: 1; } .subnav-inner > :nth-child(3) { --ni: 2; }
.subnav-inner > :nth-child(4) { --ni: 3; } .subnav-inner > :nth-child(5) { --ni: 4; }
.subnav-inner > :nth-child(6) { --ni: 5; }
.nav-list > li:nth-child(2) { --ni: 1; } .nav-list > li:nth-child(3) { --ni: 2; }
.nav-list > li:nth-child(4) { --ni: 3; } .nav-list > li:nth-child(5) { --ni: 4; }
.nav-cta-mobile { --ni: 5; }
@media (min-width: 1024px) {
  .subnav-inner > * { opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .3s var(--ease), background-color .25s; }
  .has-sub:hover .subnav-inner > *, .has-sub:focus-within .subnav-inner > * {
    opacity: 1; transform: none;
    transition: opacity .45s var(--ease), transform .6s var(--ease), background-color .25s;
    transition-delay: calc(var(--ni, 0) * 40ms + 60ms), calc(var(--ni, 0) * 40ms + 60ms), 0s;
  }
}
@media (max-width: 1023px) {
  .nav-list > li, .nav-cta-mobile { opacity: 0; transform: translateY(18px); transition: opacity .2s, transform .2s; }
  .main-nav.is-open .nav-list > li, .main-nav.is-open .nav-cta-mobile {
    opacity: 1; transform: none;
    transition: opacity .5s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--ni, 0) * 55ms + 80ms);
  }
}

/* ---------- Dark hero backdrops ---------- */
.aurora { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute; border-radius: 50%; will-change: transform;
  animation: drift 24s ease-in-out infinite alternate; animation-delay: var(--clock, 0s);
}
.aurora span:nth-child(1) {
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px; top: -22%; right: -14%;
  background: radial-gradient(circle, rgba(30,195,176,.30), rgba(30,195,176,.08) 40%, transparent 68%);
}
.aurora span:nth-child(2) {
  width: 52vw; height: 52vw; max-width: 760px; max-height: 760px; bottom: -34%; left: -16%;
  background: radial-gradient(circle, rgba(76,104,230,.26), transparent 66%);
  animation-duration: 30s; animation-delay: calc(var(--clock, 0s) - 9s);
}
.aurora span:nth-child(3) {
  width: 34vw; height: 34vw; max-width: 520px; max-height: 520px; top: 34%; left: 32%;
  background: radial-gradient(circle, rgba(244,187,78,.12), transparent 66%);
  animation-duration: 36s; animation-delay: calc(var(--clock, 0s) - 15s);
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(5%, 7%, 0) scale(1.1); }
  100% { transform: translate3d(-6%, -4%, 0) scale(.94); }
}
.starfield { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); z-index: -1; will-change: transform; }
.grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.orbit-decor {
  position: absolute; z-index: -1; top: 50%; right: -8%;
  width: min(720px, 70vw); height: auto; transform: translateY(-50%);
  fill: none; stroke: rgba(255,255,255,.08); stroke-width: 1; pointer-events: none;
}
.orbit-decor-spin { transform-box: view-box; transform-origin: 300px 300px; animation: spin 140s var(--clock, 0s) linear infinite; }
.orbit-decor .dashed { stroke-dasharray: 2 8; stroke: rgba(30,195,176,.22); }
.orbit-decor .dot { fill: rgba(255,255,255,.75); stroke: none; }
.orbit-decor .dot--teal { fill: var(--teal); filter: drop-shadow(0 0 8px rgba(30,195,176,.9)); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Home hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: var(--header-h); padding-bottom: calc(40px + var(--horizon));
  color: var(--on-ink);
  background: linear-gradient(180deg, #070B18 0%, var(--ink) 100%);
}
.hero-grid {
  display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 40px;
  min-height: min(860px, calc(100svh - var(--header-h) - 106px - var(--horizon)));
  padding: 48px 0 64px;
}
.hero-copy { will-change: transform, opacity; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-ink-muted);
}
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--teal); animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.hero h1 {
  margin-top: 22px;
  font-size: clamp(2.7rem, 1.2rem + 5.4vw, 5.6rem);
  line-height: 1; letter-spacing: -.045em; color: #fff;
}
.hero .lead { margin-top: 26px; max-width: 34em; font-size: clamp(1.02rem, .95rem + .3vw, 1.15rem); color: var(--on-ink-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-points { display: grid; gap: 10px; margin-top: 40px; }
.hero-points li { display: flex; align-items: flex-start; gap: 12px; color: var(--on-ink-muted); font-size: .95rem; }
.hero-points .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--teal); stroke-width: 2.2; }

.hero-visual { position: relative; width: 100%; max-width: 540px; margin-left: auto; will-change: transform; }
.hero-visual-inner { position: relative; will-change: transform; }
.orion { width: 100%; height: auto; overflow: visible; }
.orbit-line { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; }
.orbit-line--dashed { stroke-dasharray: 2 7; stroke: rgba(255,255,255,.22); }
.satellite { fill: var(--teal); filter: drop-shadow(0 0 6px rgba(30,195,176,.9)); }
.satellite--gold { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(244,187,78,.9)); }
.orion-lines path {
  fill: none; stroke: rgba(158, 236, 226, .5); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 520; stroke-dashoffset: 520;
  animation: draw 2.6s .5s var(--ease) forwards;
}
.orion-lines path:nth-child(2) { animation-delay: .75s; }
.orion-lines path:nth-child(3) { animation-delay: 1.4s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.star .halo { transform-box: fill-box; transform-origin: center; animation: twinkle 4.2s var(--t, 0s) ease-in-out infinite; }
/* A faint sky-chart grid behind the constellation (right ascension / declination) */
.sky-grid line { stroke: rgba(255,255,255,.05); stroke-width: 1; }
.sky-grid text { fill: rgba(160,168,192,.5); font-family: var(--mono); font-size: 9px; letter-spacing: .06em; }
/* Star names appear on hover; the invisible hit circle makes the small stars easy to find */
.star-hit { fill: transparent; pointer-events: all; }
.star-name {
  fill: #EEF1F8; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; pointer-events: none;
  paint-order: stroke; stroke: rgba(10, 16, 34, .9); stroke-width: 4px; stroke-linejoin: round;
  opacity: 0; transition: opacity .35s var(--ease);
}
.star-name tspan { fill: var(--teal); }
.star:hover .star-name { opacity: 1; }
.star:hover .halo { animation-play-state: paused; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }

.chip {
  position: absolute; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 14px;
  font-size: .88rem; font-weight: 600; color: #fff; white-space: nowrap;
  background: rgba(16, 24, 47, .72); border: 1px solid var(--line-ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
  animation: float 7s ease-in-out infinite alternate;
}
.chip .icon { width: 18px; height: 18px; color: var(--teal); }
.chip-1 { top: 16%; left: -4%; }
.chip-2 { top: 50%; right: -6%; animation-delay: -2.5s; }
.chip-3 { bottom: 9%; left: 6%; animation-delay: -4.5s; }
@keyframes float { from { transform: translateY(-6px); } to { transform: translateY(8px); } }

.scroll-cue {
  position: absolute; left: 50%; bottom: calc(128px + var(--horizon)); z-index: 1;
  display: flex; justify-content: center; width: 26px; height: 42px; margin-left: -13px; padding-top: 8px;
  border: 1.5px solid rgba(255,255,255,.22); border-radius: 999px;
  transition: border-color .3s;
}
.scroll-cue:hover { border-color: var(--teal); }
.scroll-cue span { width: 3px; height: 8px; border-radius: 2px; background: var(--teal); animation: cue 2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

.focus-strip {
  border-top: 1px solid var(--line-ink); padding: 20px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.focus-track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.focus-group { display: flex; gap: 40px; padding-right: 40px; }
.focus-group span { display: inline-flex; align-items: center; gap: 40px; white-space: nowrap; font-weight: 500; color: var(--on-ink-muted); }
.focus-group span::after { content: "✦"; font-size: .7em; color: var(--teal); }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding: 40px 0 56px; }
  .hero-visual { max-width: 460px; margin: 0 auto; }
  .chip-1 { left: 0; }
  .chip-2 { right: 0; }
}
@media (max-width: 1023px), (max-height: 760px) { .scroll-cue { display: none; } }
@media (max-width: 479px) {
  .hero-actions .btn { flex: 1 1 100%; }
  .chip { padding: 8px 12px; font-size: .8rem; }
  .chip .icon { width: 16px; height: 16px; }
}

/* ---------- Program emblems (mission-patch style; symbols in partials/sprite.html) ----------
   The lettered ring turns slowly on the shared clock; the emblem itself stays still.
   Use them with viewBox="0 0 120 120": <use> maps each symbol's own -60…60 box onto that square. */
.arma { display: block; overflow: visible; font-family: var(--mono); font-weight: 500; }
.arma-ring { transform-box: view-box; transform-origin: 50% 50%; animation: spin 150s linear infinite; animation-delay: var(--clock, 0s); }
/* On a program page: at the centre of the hero's orbit drawing, or small in the corner when the text needs the room */
.arma--hero {
  position: absolute; top: calc(var(--header-h) + 22px); right: 16px; width: 76px;
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, .45));
}
@media (min-width: 768px) { .arma--hero { right: 32px; width: 96px; } }
/* Small emblem in the corner: the breadcrumb and kicker beside it keep clear */
@media (max-width: 1319px) { .page-hero:has(.arma--hero) :is(.breadcrumb, .kicker) { padding-right: 88px; } }
@media (min-width: 768px) and (max-width: 1319px) { .page-hero:has(.arma--hero) :is(.breadcrumb, .kicker) { padding-right: 112px; } }
@media (min-width: 1320px) {
  .arma--hero { top: 50%; right: calc(-8% + min(720px, 70vw) / 2); width: clamp(220px, 19vw, 280px); transform: translate(50%, -50%); }
}
/* On a program card: in the top corner, the heading keeps clear of it */
.program .arma--card { position: absolute; top: clamp(20px, 2.6vw, 34px); right: clamp(20px, 2.6vw, 34px); width: 60px; }
.program > .tag + h3 { margin-right: 64px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--on-ink);
  background: linear-gradient(180deg, #070B18 0%, var(--ink) 100%);
  padding: calc(var(--header-h) + clamp(40px, 6vw, 88px)) 0 calc(clamp(64px, 8vw, 112px) + 40px + var(--horizon));
}
.page-hero-inner { position: relative; display: grid; justify-items: start; max-width: 860px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .84rem; color: var(--on-ink-muted); }
.breadcrumb a { transition: color .2s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { opacity: .35; }
.breadcrumb [aria-current] { color: var(--on-ink); }
.page-hero .kicker { margin-top: 36px; color: var(--teal); }
.page-hero h1 { margin-top: 18px; font-size: clamp(2.5rem, 1.3rem + 4.4vw, 5rem); line-height: 1.02; letter-spacing: -.045em; color: #fff; }
.page-hero .lead { margin-top: 22px; max-width: 38em; font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); color: var(--on-ink-muted); }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-figure { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.hero-figure strong { font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.6rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.hero-figure span { padding-left: 18px; border-left: 2px solid var(--teal); font-size: .95rem; line-height: 1.5; color: var(--on-ink-muted); }
.page-hero--full { display: flex; align-items: center; min-height: 100svh; padding-bottom: clamp(64px, 8vw, 112px); }
body.page-404 { background: var(--ink); }
.page-404 .site-footer { border-top: 1px solid var(--line-ink); }
@media (max-width: 767px) {
  .page-hero .orbit-decor { right: -45%; width: 115vw; opacity: .55; }
  .page-hero .kicker { margin-top: 28px; }
}

/* ---------- Sheet (content sliding over the dark hero) ----------
   Its top edge is a planet's horizon: half an ellipse that dips by --horizon at the sides, with a
   thin atmosphere along the rim (::before), its glow and a rising sun (::after). The rim images are
   the same half-ellipse drawn in SVG; non-scaling-stroke keeps the line thin however wide the page is. */
.sheet {
  position: relative; z-index: 2;
  margin-top: calc(-40px - var(--horizon));
  border-radius: 50% 50% 0 0 / var(--horizon) var(--horizon) 0 0;
  background: var(--paper);
  box-shadow: 0 -30px 60px -30px rgba(0,0,0,.35);
}
.sheet::before, .sheet::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.sheet::before {
  top: 0; height: var(--horizon);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%231EC3B0' stop-opacity='0'/%3E%3Cstop offset='.28' stop-color='%231EC3B0' stop-opacity='.85'/%3E%3Cstop offset='.62' stop-color='%23FBE9BE'/%3E%3Cstop offset='.8' stop-color='%231EC3B0' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%231EC3B0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 100A500 100 0 0 1 1000 100' fill='none' stroke='url(%23g)' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.sheet::after {
  top: -40px; height: calc(var(--horizon) + 40px);
  background:
    radial-gradient(circle at 62% 42px, rgba(255, 246, 222, .95) 0, rgba(244, 187, 78, .45) 14px, rgba(244, 187, 78, .12) 42px, transparent 90px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%231EC3B0' stop-opacity='0'/%3E%3Cstop offset='.28' stop-color='%231EC3B0' stop-opacity='.85'/%3E%3Cstop offset='.62' stop-color='%23FBE9BE'/%3E%3Cstop offset='.8' stop-color='%231EC3B0' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%231EC3B0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 100A500 100 0 0 1 1000 100' fill='none' stroke='url(%23g)' stroke-width='7' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 40px / 100% var(--horizon) no-repeat;
  filter: blur(5px); opacity: .85;
  animation: sunrise 9s ease-in-out infinite alternate; animation-delay: var(--clock, 0s);
}
@keyframes sunrise { from { opacity: .6; } to { opacity: .95; } }
.page-body { padding: clamp(64px, 8vw, 112px) 0 clamp(88px, 10vw, 140px); }
.block { padding-top: clamp(80px, 9vw, 128px); }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 9vw, 136px) 0; }
.section--tight { padding-top: 0; }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--ink .kicker { color: var(--teal); }
.section--ink .section-lead { color: var(--on-ink-muted); }
.section--panel {
  position: relative; isolation: isolate; overflow: hidden;
  margin-inline: clamp(8px, 1.4vw, 20px);
  border-radius: var(--sheet-r);
}
.section--panel .orbit-decor { top: -18%; right: -16%; transform: none; width: min(900px, 80%); }
.section--panel + .section { padding-top: clamp(96px, 10vw, 150px); }
.section--after { margin-top: clamp(80px, 9vw, 128px); }

.section-head { display: grid; gap: 18px; max-width: 780px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-head--split { max-width: none; grid-template-columns: 1fr auto; align-items: end; }
.section-head--split > div { display: grid; gap: 18px; }
@media (max-width: 639px) { .section-head--split { grid-template-columns: 1fr; } }

/* ---------- Support bento ---------- */
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.support-card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
a.support-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.support-card h3 { font-size: 1.26rem; }
.support-card p { font-size: .97rem; color: var(--muted); }
.support-card.is-featured {
  grid-row: span 2; overflow: hidden;
  background: radial-gradient(420px 260px at 90% 100%, rgba(30,195,176,.22), transparent 70%), var(--ink);
  color: var(--on-ink); border-color: transparent;
}
.support-card.is-featured h3 { font-size: 1.6rem; color: #fff; }
.support-card.is-featured p { color: var(--on-ink-muted); }
.support-card.is-featured .icon-wrap { background: rgba(30,195,176,.14); color: var(--teal); }

.network { position: relative; margin-top: auto; aspect-ratio: 400 / 260; min-height: 190px; }
.network svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.network path { fill: none; stroke: rgba(30,195,176,.55); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; animation: flow 1.6s linear infinite; }
.network path.faint { stroke: rgba(255,255,255,.1); stroke-dasharray: none; animation: none; }
@keyframes flow { to { stroke-dashoffset: -16; } }
.node {
  position: absolute; transform: translate(-50%, -50%);
  padding: 7px 12px; border-radius: 999px; white-space: nowrap;
  font-size: .8rem; font-weight: 600; color: var(--on-ink);
  background: var(--ink-3); border: 1px solid var(--line-ink);
}
.node--center { background: var(--teal); color: var(--ink); border-color: transparent; font-size: .86rem; padding: 9px 16px; box-shadow: 0 0 0 6px rgba(30,195,176,.14), 0 0 40px rgba(30,195,176,.4); }

.support-card--cta {
  grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--teal-soft); border-color: transparent;
}
.support-card--cta h3 { font-size: 1.3rem; max-width: 22em; }
.support-card--cta p { margin-top: 8px; color: var(--teal-ink); max-width: 34em; }

@media (max-width: 1023px) {
  .support-grid { grid-template-columns: repeat(2, 1fr); }
  .support-card.is-featured { grid-row: auto; grid-column: span 2; }
  .support-card--cta { grid-column: span 1; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 639px) {
  .support-grid { grid-template-columns: 1fr; }
  .support-card.is-featured, .support-card--cta { grid-column: auto; }
  .support-card { padding: 24px; }
}

/* ---------- Facts ---------- */
.facts { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line-strong); }
/* A ruler along the top edge: minor ticks every 12px, major every 120px */
.facts::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 120px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 12px) 0 0 / 100% 5px no-repeat;
}
.fact { padding: 28px 28px 0; border-left: 1px solid var(--line); }
.fact:first-child { border-left: 0; padding-left: 0; }
.fact-value { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.fact-value small { margin-left: 6px; font-size: .42em; font-weight: 700; letter-spacing: -.01em; color: var(--teal-deep); }
.fact-label { margin-top: 14px; max-width: 17em; font-size: .93rem; color: var(--muted); }
/* The facts row's program slot (home): a title and a link instead of a figure */
.fact--program { display: grid; align-content: start; gap: 10px; }
.fact-title { font-size: clamp(1.3rem, 1rem + .9vw, 1.65rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.12; }
.fact-title em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.1em; color: var(--teal-deep); }
.fact--program .fact-label { margin-top: 0; max-width: none; }
@media (max-width: 859px) {
  .facts { grid-template-columns: repeat(2, 1fr); }
  .fact { padding: 28px 20px; }
  .fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 419px) {
  .fact { padding: 24px 12px; }
  .fact:nth-child(even) { padding-right: 0; }
  .fact-label { font-size: .86rem; }
}

/* ---------- Service list (home) ---------- */
.service-list { border-top: 1px solid var(--line-strong); }
.service-row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 72px minmax(0, 1.1fr) minmax(0, 1fr) 52px;
  grid-template-areas: "num title desc go";
  align-items: center; gap: 24px;
  padding: 30px 8px; border-bottom: 1px solid var(--line-strong);
  transition: color .45s var(--ease), padding .5s var(--ease);
}
.service-row::before {
  content: ""; position: absolute; inset: -1px -12px; z-index: -1; border-radius: 22px;
  background: var(--ink); opacity: 0; transform: scaleY(.4);
  transition: transform .55s var(--ease), opacity .35s;
}
.service-row:hover { color: #fff; padding-inline: 24px; }
.service-row:hover::before { opacity: 1; transform: none; }
.service-num { grid-area: num; font-size: .85rem; font-weight: 700; letter-spacing: .06em; color: var(--teal-deep); transition: color .45s; }
.service-title { grid-area: title; font-size: clamp(1.35rem, 1rem + 1.3vw, 2.1rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.service-desc { grid-area: desc; font-size: .98rem; color: var(--muted); transition: color .45s; }
.service-go {
  grid-area: go; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  transition: background-color .45s, border-color .45s, color .45s, transform .5s var(--ease);
}
.service-row:hover .service-num { color: var(--teal); }
.service-row:hover .service-desc { color: var(--on-ink-muted); }
.service-row:hover .service-go { background: var(--teal); border-color: var(--teal); color: var(--ink); transform: rotate(45deg); }
@media (max-width: 767px) {
  .service-row { grid-template-columns: 34px 1fr 44px; grid-template-areas: "num title go" ". desc go"; gap: 6px 14px; padding: 22px 4px; }
  .service-row:hover { padding-inline: 12px; }
  .service-desc { font-size: .9rem; }
  .service-go { width: 44px; height: 44px; }
}

/* ---------- Programs ---------- */
.programs-grid { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.program {
  grid-column: span 6;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: clamp(26px, 3vw, 40px); border-radius: 28px;
  background: var(--ink-2); border: 1px solid var(--line-ink);
  transition: border-color .45s, transform .5s var(--ease);
}
.program:hover { border-color: rgba(30,195,176,.35); transform: translateY(-4px); }
.program h3 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.05rem); letter-spacing: -.03em; color: #fff; }
.program p { color: var(--on-ink-muted); }
.program > .btn { margin-top: auto; }
.program--bigg {
  grid-column: span 7;
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(30,195,176,.30), transparent 65%),
    radial-gradient(400px 300px at 0% 100%, rgba(30,195,176,.08), transparent 70%),
    var(--ink-2);
  border-color: rgba(30,195,176,.28);
}
.program--uretim { grid-column: span 5; }
@media (max-width: 1023px) { .program, .program--bigg, .program--uretim { grid-column: span 12; } }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-ink); background: rgba(255,255,255,.05); border: 1px solid var(--line-ink);
}
.tag .icon { width: 15px; height: 15px; }
.tag--teal { color: var(--teal); background: rgba(30,195,176,.12); border-color: rgba(30,195,176,.32); }

.bigg-figure { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 8px 0; }
.bigg-figure strong { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.4rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.bigg-figure span { font-size: .92rem; line-height: 1.45; color: var(--on-ink-muted); padding-left: 16px; border-left: 2px solid var(--teal); }

.weeks { display: grid; gap: 8px; width: 100%; margin: 4px 0 12px; }
.week {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-ink);
}
.week b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(244,187,78,.12); color: var(--gold); font-size: .92rem; }
.week span { font-weight: 600; color: #fff; line-height: 1.3; }
.week small { display: block; margin-top: 2px; font-size: .84rem; font-weight: 400; color: var(--on-ink-muted); }

/* ---------- Checklists ---------- */
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-top: 32px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; }
.checklist .icon {
  width: 22px; height: 22px; padding: 4px; margin-top: 1px; border-radius: 50%;
  background: var(--teal-soft); color: var(--teal-deep); stroke-width: 2.6;
}
.checklist--single { grid-template-columns: 1fr; gap: 12px; }
.checklist--ink { grid-template-columns: 1fr; gap: 12px; margin: 4px 0 12px; }
.checklist--ink li { color: var(--on-ink); font-size: .96rem; }
.checklist--ink .icon { background: rgba(30,195,176,.14); color: var(--teal); }
@media (max-width: 639px) { .checklist { grid-template-columns: 1fr; } }

/* ---------- Events & blog preview ---------- */
.news-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); }
.col-title { margin-bottom: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.event { display: grid; grid-template-columns: 76px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.event-date {
  display: grid; align-content: center; justify-items: center; gap: 4px;
  height: 84px; border-radius: 18px;
  background: var(--white); border: 1px solid var(--line); text-align: center;
}
.event-date b { font-size: 1.9rem; letter-spacing: -.04em; line-height: 1; }
.event-date span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.event-type { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal-deep); }
.event h4 { margin-top: 6px; font-size: 1.12rem; line-height: 1.3; }
.event p:not(.event-type) { margin-top: 8px; font-size: .93rem; color: var(--muted); }
.events > .text-link, .posts > .text-link { margin-top: 24px; }

.posts { display: grid; gap: 12px; align-content: start; }
.post {
  display: grid; grid-template-columns: 168px 1fr; align-items: center; gap: 22px;
  padding: 12px 20px 12px 12px; border-radius: 22px;
  background: var(--white); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.post:hover h4 { color: var(--teal-deep); }
.post-tag { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); }
.post h4 { margin-top: 6px; font-size: 1.06rem; line-height: 1.35; letter-spacing: -.015em; transition: color .2s; }
.post p:not(.post-tag) {
  margin-top: 6px; font-size: .9rem; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.post-cover { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--ink); }
.post-cover::before, .post-cover::after { content: ""; position: absolute; border-radius: 50%; }
.post-cover::after { inset: 18% -30%; border: 1px solid rgba(255,255,255,.28); transform: rotate(-18deg); transition: transform 1.2s var(--ease); }
.post-cover::before { width: 6px; height: 6px; background: #fff; top: 30%; left: 62%; box-shadow: -40px 30px 0 -1px #fff, 24px 40px 0 -2px rgba(255,255,255,.7), -70px -10px 0 -2px rgba(255,255,255,.6); }
.post:hover .post-cover::after, .post-card:hover .post-cover::after { transform: rotate(-6deg) scale(1.08); }
.post-cover--1 { background: radial-gradient(circle at 30% 35%, #1EC3B0 0, transparent 45%), radial-gradient(circle at 85% 90%, #F4BB4E 0, transparent 40%), var(--ink); }
.post-cover--2 { background: radial-gradient(circle at 75% 25%, #F4BB4E 0, transparent 42%), radial-gradient(circle at 20% 85%, #3B5BDB 0, transparent 45%), var(--ink); }
.post-cover--3 { background: radial-gradient(circle at 50% 50%, #1EC3B0 0, transparent 38%), radial-gradient(circle at 10% 10%, #7C5CFF 0, transparent 40%), var(--ink); }
.post-cover--4 { background: radial-gradient(circle at 80% 70%, #1EC3B0 0, transparent 42%), radial-gradient(circle at 15% 20%, #F4BB4E 0, transparent 30%), var(--ink); }
.post-cover--5 { background: radial-gradient(circle at 25% 75%, #3B5BDB 0, transparent 45%), radial-gradient(circle at 80% 20%, #1EC3B0 0, transparent 38%), var(--ink); }
.post-cover--6 { background: radial-gradient(circle at 60% 40%, #7C5CFF 0, transparent 40%), radial-gradient(circle at 20% 90%, #1EC3B0 0, transparent 40%), var(--ink); }

@media (max-width: 1023px) { .news-grid { grid-template-columns: 1fr; } }
/* Events only (no blog yet): the events use the full width, two per row */
.news-grid--single { grid-template-columns: 1fr; }
.news-grid--single .events { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); }
.news-grid--single .events > .col-title, .news-grid--single .events > .text-link { grid-column: 1 / -1; }
@media (max-width: 767px) { .news-grid--single .events { grid-template-columns: 1fr; } }
@media (max-width: 559px) {
  .post { grid-template-columns: 92px 1fr; gap: 14px; padding: 10px 14px 10px 10px; }
  .post p:not(.post-tag) { display: none; }
  .post h4 { font-size: .98rem; }
  .event { grid-template-columns: 64px 1fr; gap: 16px; }
  .event-date { height: 72px; }
  .event-date b { font-size: 1.6rem; }
}

/* ---------- Partners ---------- */
.partners { padding: 56px 0; border-top: 1px solid var(--line); }
.partners-inner { display: grid; grid-template-columns: 200px 1fr; align-items: center; gap: 32px; }
.partners-title { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; color: var(--muted); }
.partner-list {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
}
.partner {
  display: grid; place-items: center; min-height: 84px; padding: 12px;
  background: var(--paper); text-align: center;
  font-size: .95rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: #6B7184;
  transition: color .25s, background-color .25s;
}
.partner:hover { color: var(--text); background: var(--white); }
/* A single partner: one box, centred, no empty cells */
.partner-list--single { display: flex; justify-content: center; background: none; border: 0; overflow: visible; }
.partner-list--single .partner { min-width: min(100%, 320px); border: 1px solid var(--line); border-radius: 18px; }
.partner img { display: block; width: auto; height: 56px; }
@media (max-width: 1023px) {
  .partners-inner { grid-template-columns: 1fr; gap: 20px; }
  .partner-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 479px) { .partner-list { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Apply teaser (home) ---------- */
.apply-teaser { padding: clamp(28px, 5vw, 64px); border-radius: 36px; background: var(--white); border: 1px solid var(--line); }
.apply-teaser-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; align-items: end; }
.apply-teaser-head h2 { margin-top: 18px; }
.apply-teaser-side { display: grid; gap: 24px; }
.steps-row { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: clamp(40px, 5vw, 64px); }
.steps-row::before, .steps-row::after { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 1px; background: var(--line-strong); }
.steps-row::after { background: linear-gradient(90deg, var(--teal-deep), var(--teal)); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease) .3s; }
.steps-row.is-visible::after { transform: none; }
html:not(.js) .steps-row::after { transform: none; }
.steps-row li { position: relative; }
.steps-row li:nth-child(2) { --si: 1; } .steps-row li:nth-child(3) { --si: 2; } .steps-row li:nth-child(4) { --si: 3; }
.step-dot {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line-strong);
  font-size: .8rem; font-weight: 700;
  transition: background-color .5s, color .5s, border-color .5s;
  transition-delay: calc(var(--si, 0) * .4s + .3s);
}
.steps-row.is-visible .step-dot { background: var(--ink); color: #fff; border-color: var(--ink); }
.steps-row h3 { margin-top: 18px; font-size: 1.08rem; }
.steps-row p { margin-top: 6px; font-size: .94rem; color: var(--muted); }
@media (max-width: 1023px) {
  .apply-teaser-head { grid-template-columns: 1fr; }
  .steps-row { grid-template-columns: 1fr 1fr; }
  .steps-row::before, .steps-row::after { display: none; }
}
@media (max-width: 559px) { .steps-row { grid-template-columns: 1fr; } }

/* ---------- Application route (home: the steps plotted as an ascent to orbit; desktop only) ----------
   The curve draws itself as the section scrolls by and lights each step's marker when it gets there
   (scrolling back rewinds it). Without scroll-driven animations it draws once on arrival. */
.route { position: relative; view-timeline: --route block; }
.route-chart { display: none; }
@media (min-width: 1024px) {
  .route-chart { display: block; position: relative; height: 200px; margin-top: clamp(48px, 5vw, 72px); }
  .route .steps-row { margin-top: 0; }
}
.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route-line { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.route-drop { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 5; }
.route-progress { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.route-mark {
  position: absolute; left: var(--mx); top: var(--my); width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--white); border: 2px solid var(--ink);
  transition: background-color .5s, border-color .5s, transform .5s var(--ease);
}
.route-mark:nth-child(3) { transition-delay: .6s; } .route-mark:nth-child(4) { transition-delay: 1.2s; } .route-mark:nth-child(5) { transition-delay: 1.8s; }
.route-end { position: absolute; right: 0; top: -22px; font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.route.is-visible .route-progress { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease) .3s; }
.route.is-visible .route-mark { background: var(--teal); border-color: var(--teal); transform: scale(1.2); }
html:not(.js) .route-progress { stroke-dashoffset: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .route .route-progress { animation: route-draw linear both; animation-timeline: --route; animation-range: cover 24% cover 54%; }
    .route .route-mark { animation: route-mark linear both; animation-timeline: --route; animation-range: cover calc(var(--on) - 1.5%) cover var(--on); }
  }
}
@keyframes route-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes route-mark { from { background: var(--white); border-color: var(--ink); transform: none; } to { background: var(--teal); border-color: var(--teal); transform: scale(1.2); } }

/* ---------- Tabs (services overview) ---------- */
.tabs { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
.tablist { position: relative; display: flex; flex-direction: column; gap: 8px; }
.tab {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 18px 14px 14px; border-radius: 18px;
  border: 1px solid var(--line); background: transparent; cursor: pointer;
  font-size: 1rem; font-weight: 600; text-align: left;
  transition: background-color .25s, color .35s, border-color .25s;
}
.tab .icon-wrap { width: 42px; height: 42px; border-radius: 12px; transition: background-color .35s, color .35s; }
.tab .icon-wrap .icon { width: 20px; height: 20px; }
.tab .chev { margin-left: auto; width: 18px; height: 18px; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .35s var(--ease); }
.tab:hover:not([aria-selected="true"]) { background: rgba(14,20,38,.04); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab[aria-selected="true"] .icon-wrap { background: rgba(30,195,176,.16); color: var(--teal); }
.tab[aria-selected="true"] .chev { opacity: 1; transform: none; }
.tab-indicator { display: none; }
.has-indicator .tab-indicator {
  display: block; position: absolute; top: 0; left: 0; z-index: 0;
  border-radius: 18px; background: var(--ink); pointer-events: none;
  box-shadow: 0 18px 36px -18px rgba(10,16,34,.55);
  transition: transform .55s var(--ease), width .55s var(--ease), height .55s var(--ease);
}
.has-indicator .tab[aria-selected="true"] { background: transparent; border-color: transparent; }

.tabpanels { position: relative; transition: height .55s var(--ease); }
.tabpanels.is-animating { overflow: hidden; }
.tabpanel {
  position: relative; overflow: hidden;
  padding: clamp(28px, 4vw, 52px); border-radius: 28px;
  background: var(--white); border: 1px solid var(--line);
}
.tabpanel:not([hidden]) { animation: panelIn .5s var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.panel-num {
  position: absolute; top: 12px; right: 28px;
  font-size: clamp(4.5rem, 3rem + 5vw, 8rem); font-weight: 800; letter-spacing: -.06em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--line-strong);
  pointer-events: none; user-select: none;
}
.tabpanel h2 { position: relative; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.03em; max-width: 14em; }
.panel-lead { position: relative; margin-top: 16px; max-width: 38em; font-size: 1.06rem; color: var(--muted); }
.panel-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }

@media (max-width: 1023px) {
  .tabs { grid-template-columns: 1fr; }
  .tablist {
    flex-direction: row; overflow-x: auto; scrollbar-width: none;
    margin-inline: -16px; padding: 2px 16px 4px;
  }
  .tablist::-webkit-scrollbar { display: none; }
  .tab { width: auto; flex: none; white-space: nowrap; padding: 8px 16px 8px 8px; border-radius: 999px; font-size: .92rem; }
  .tab .icon-wrap { width: 34px; height: 34px; border-radius: 50%; }
  .tab .icon-wrap .icon { width: 17px; height: 17px; }
  .tab .chev { display: none; }
  .has-indicator .tab-indicator { border-radius: 999px; }
}
@media (min-width: 768px) and (max-width: 1023px) { .tablist { margin-inline: -32px; padding-inline: 32px; } }
@media (max-width: 639px) { .panel-num { right: 16px; } }

/* ---------- Values ---------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(56px, 7vw, 96px); }
.section-head + .values { margin-top: 0; }
.value { padding: 28px; border-radius: 22px; border: 1px solid var(--line-strong); }
.value h3 { margin-top: 18px; font-size: 1.12rem; }
.value p { margin-top: 8px; font-size: .96rem; color: var(--muted); }
@media (max-width: 859px) { .values { grid-template-columns: 1fr; } }

/* ---------- Detail pages ---------- */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(40px, 6vw, 96px); align-items: start; }
.detail-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 16px; }
.aside-nav { padding: 10px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); }
.aside-nav h2 { padding: 12px 14px 8px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.aside-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 14px; font-size: .95rem; font-weight: 600;
  transition: background-color .25s, color .25s;
}
.aside-nav a .icon { width: 16px; height: 16px; opacity: 0; transform: translateX(-4px); transition: opacity .25s, transform .3s var(--ease); }
.aside-nav a:hover { background: var(--paper); }
.aside-nav a:hover .icon { opacity: 1; transform: none; }
.aside-nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.aside-nav a[aria-current="page"] .icon { opacity: 1; transform: none; color: var(--teal); }
.aside-cta {
  display: grid; gap: 14px; justify-items: start;
  padding: 26px; border-radius: 22px;
  background: radial-gradient(320px 200px at 100% 0%, rgba(30,195,176,.28), transparent 65%), var(--ink);
  color: var(--on-ink);
}
.aside-cta h2 { font-size: 1.3rem; letter-spacing: -.02em; color: #fff; }
.aside-cta p { font-size: .93rem; color: var(--on-ink-muted); }
.aside-phone { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .93rem; color: var(--on-ink); }
.aside-phone .icon { width: 16px; height: 16px; color: var(--teal); }
@media (max-width: 1023px) {
  .detail-grid { grid-template-columns: 1fr; }
  .detail-aside { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) { .detail-aside { grid-template-columns: 1fr; } }

.prose { max-width: 720px; }
.prose > * + * { margin-top: 20px; }
.prose > p { font-size: 1.08rem; line-height: 1.75; color: var(--body); }
.prose > .prose-lead, .prose-lead { font-size: clamp(1.22rem, 1.08rem + .6vw, 1.55rem); line-height: 1.5; font-weight: 500; letter-spacing: -.015em; color: var(--text); }
.prose > p.kicker { font-size: .74rem; line-height: 1.6; color: var(--teal-deep); } /* not the body-text size of .prose > p */
.prose > .kicker + .prose-lead { margin-top: 18px; }
.prose > h2 { margin-top: 56px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.03em; }
.prose > h2 + * { margin-top: 20px; }
.prose .checklist { margin-top: 20px; }

.pull-quote {
  margin-top: 48px; padding: 6px 0 6px 28px; border-left: 3px solid var(--teal);
  font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  line-height: 1.3; letter-spacing: -.01em; color: var(--text);
}
.prose > .pull-quote { margin-top: 48px; }
.pull-quote--wide { max-width: 920px; margin-inline: auto; }

.area-grid, .reason-list { display: grid; gap: 12px; }
.area, .reason { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 22px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); }
.area h3, .reason h3 { font-size: 1.06rem; line-height: 1.3; }
.area p, .reason p { margin-top: 6px; font-size: .96rem; color: var(--muted); }
.reason-title { margin-bottom: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.tag-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pills li { padding: 10px 18px; border-radius: 999px; background: var(--white); border: 1px solid var(--line-strong); font-size: .92rem; font-weight: 600; }

.mini-steps { counter-reset: ms; margin-left: 16px; border-left: 1px solid var(--line-strong); }
.mini-steps li { counter-increment: ms; position: relative; padding: 0 0 26px 34px; }
.mini-steps li:last-child { padding-bottom: 0; }
.mini-steps li::before {
  content: counter(ms); position: absolute; left: -16px; top: -3px;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: .8rem; font-weight: 700;
}
.mini-steps h3 { font-size: 1.05rem; }
.mini-steps p { margin-top: 4px; font-size: .96rem; color: var(--muted); }

.callout {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding: 26px 28px; border-radius: 22px; background: var(--teal-soft);
}
.prose > .callout { margin-top: 48px; }
.callout h3 { font-size: 1.15rem; }
.callout p { margin-top: 6px; max-width: 30em; font-size: .96rem; color: var(--teal-ink); }

.link-list { border-top: 1px solid var(--line-strong); }
.link-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 4px; border-bottom: 1px solid var(--line-strong); font-weight: 600;
  transition: color .25s, padding .4s var(--ease);
}
.link-list a:hover { color: var(--teal-deep); padding-left: 14px; }
.link-list .icon { width: 18px; height: 18px; }

/* ---------- Legal pages (KVKK) ---------- */
.legal { max-width: 860px; margin-inline: auto; } /* same column as the page hero above */
.legal-meta { font-size: .88rem; color: var(--muted); }
.legal > .prose-lead { font-size: clamp(1.08rem, 1rem + .3vw, 1.22rem); line-height: 1.6; }
.legal a { color: var(--teal-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal > ul { display: grid; gap: 8px; padding-left: 1.3em; list-style: disc; }
.legal > ul li { font-size: 1.04rem; line-height: 1.7; color: var(--body); }
.legal > ul li::marker { color: var(--teal-deep); }
.legal-block { padding: 22px 24px; border-radius: 18px; background: var(--white); border: 1px solid var(--line); }
.legal > .legal-block { margin-top: 16px; }
.legal > h2 + .legal-block, .legal > p + .legal-block { margin-top: 24px; }
.legal-block h3 { font-size: 1.15rem; letter-spacing: -.015em; }
.legal-block dl { display: grid; gap: 14px; }
.legal-block h3 + dl { margin-top: 16px; }
.legal-block dl > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; }
.legal-block dt { padding-top: 3px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.legal-block dd { font-size: .98rem; line-height: 1.65; color: var(--body); }
.legal-declaration { padding: 20px 24px; border-left: 3px solid var(--teal); border-radius: 0 14px 14px 0; background: var(--teal-soft); }
.prose > .legal-declaration { font-size: 1rem; }
@media (max-width: 639px) {
  .legal-block { padding: 18px; }
  .legal-block dl > div { grid-template-columns: 1fr; gap: 2px; }
}
/* Information still missing from src/site.json (build lists these) */
mark.doldur { padding: 1px 6px; border-radius: 6px; background: #FFF1C2; color: #7A5A12; font-size: .9em; font-weight: 600; }

/* ---------- Blog post ---------- */
.page-hero--article .page-hero-inner { max-width: 760px; }
.page-hero--article h1 { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem); }
.article-date { margin-top: 18px; font-size: .9rem; color: var(--on-ink-muted); }
.article-cover { width: 100%; max-width: 960px; margin: 0 auto 56px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 24px; }
.article-body { max-width: 760px; margin-inline: auto; }
.article-body > * + * { margin-top: 20px; }
.article-body p, .article-body li { font-size: 1.08rem; line-height: 1.75; color: var(--body); }
.article-body h2 { margin-top: 48px; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); letter-spacing: -.025em; }
.article-body h3 { margin-top: 36px; font-size: 1.25rem; letter-spacing: -.015em; }
.article-body ul { padding-left: 1.3em; list-style: disc; }
.article-body ol { padding-left: 1.3em; list-style: decimal; }
.article-body li + li { margin-top: 6px; }
.article-body li::marker { color: var(--teal-deep); }
.article-body a { color: var(--teal-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.article-body blockquote { padding: 4px 0 4px 22px; border-left: 3px solid var(--teal); font-size: 1.15rem; font-style: italic; color: var(--text); }
.article-body img { border-radius: 18px; }
.article-body code { padding: .1em .35em; border-radius: 6px; background: var(--paper-2); font-size: .92em; }
.article-body pre { overflow-x: auto; padding: 18px; border-radius: 14px; background: var(--ink); color: var(--on-ink); }
.article-body pre code { padding: 0; background: none; }
.article-body table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.article-body th, .article-body td { padding: 10px 12px; border-bottom: 1px solid var(--line-strong); text-align: left; }
.article-body hr { border: 0; border-top: 1px solid var(--line-strong); }
.article-foot { max-width: 760px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- Notice pill (e.g. applications closed) ---------- */
.notice-pill {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 999px;
  border: 1px solid rgba(244,187,78,.4); background: rgba(244,187,78,.1); color: #F8D48C; font-size: .95rem; font-weight: 600;
}
.notice-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* ---------- Related ---------- */
.related { padding-top: clamp(80px, 9vw, 128px); }
.related-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.related-head h2 { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.4rem); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.related-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 210px;
  padding: 24px; border-radius: 22px; background: var(--white); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.related-card[aria-current="page"] { display: none; }
.related-card h3 { margin-top: 6px; font-size: 1.1rem; }
.related-card p { font-size: .92rem; color: var(--muted); }
.related-card .go {
  display: grid; place-items: center; width: 40px; height: 40px; margin-top: auto; align-self: flex-end;
  border-radius: 50%; border: 1px solid var(--line-strong);
  transition: background-color .4s, color .4s, border-color .4s, transform .5s var(--ease);
}
.related-card .go .icon { width: 18px; height: 18px; }
.related-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.related-card:hover .go { background: var(--ink); border-color: var(--ink); color: #fff; transform: rotate(45deg); }

/* ---------- Orbit map (programs overview: which orbit is your startup on?) ----------
   Stages as orbits around the centre; hovering a program here or in the list below lights its orbit
   (main.js sets data-focus). The labels are HTML so they stay readable; phones get short SVG tags. */
.orbit-map {
  position: relative; isolation: isolate; overflow: hidden;
  aspect-ratio: 1000 / 440; margin-bottom: clamp(28px, 4vw, 48px);
  border-radius: 28px; color: var(--on-ink);
  background: radial-gradient(55% 75% at 50% 50%, #131D3B, var(--ink) 72%);
}
.om-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.om-orbit { fill: none; stroke: rgba(255,255,255,.15); stroke-width: 1.2; transition: stroke .45s, stroke-width .45s, opacity .45s; }
.om-orbit--b2b { stroke-dasharray: 3 7; }
.om-stage { fill: var(--on-ink-muted); font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; transition: fill .45s; }
.om-center { fill: rgba(160,168,192,.75); font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; }
.om-route { fill: none; stroke: var(--gold); stroke-opacity: .55; stroke-width: 1.4; stroke-dasharray: 3 5; transition: stroke-opacity .45s, stroke-width .45s; }
.om-sat { fill: var(--gold); }
.om-planet { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease), opacity .45s; }
.om-dot { fill: var(--teal); stroke: var(--ink); stroke-width: 3; }
.om-short { display: none; fill: #fff; font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: .06em; }
.om-short--gold { fill: var(--gold); }
.om-label {
  position: absolute; display: grid; gap: 2px; width: max-content; max-width: 16em;
  transform: translate(24px, -50%); transition: opacity .45s, transform .5s var(--ease);
}
.om-label--left { transform: translate(calc(-100% - 24px), -50%); text-align: right; }
.om-label b { font-size: .98rem; font-weight: 700; letter-spacing: -.01em; color: #fff; }
.om-label small { font-size: .8rem; line-height: 1.35; color: var(--on-ink-muted); }
.om-label--mentorluk b { color: var(--gold); }
.om-label:hover b { color: var(--teal); }
.orbit-map[data-focus] .om-orbit, .orbit-map[data-focus] .om-planet, .orbit-map[data-focus] .om-label { opacity: .4; }
.orbit-map[data-focus="uretim"] :is(.om-orbit--uretim, .om-planet--uretim, .om-label--uretim),
.orbit-map[data-focus="bigg"] :is(.om-orbit--bigg, .om-planet--bigg, .om-label--bigg),
.orbit-map[data-focus="b2b"] :is(.om-orbit--b2b, .om-planet--b2b, .om-label--b2b),
.orbit-map[data-focus="mentorluk"] .om-label--mentorluk { opacity: 1; }
.orbit-map[data-focus="uretim"] .om-orbit--uretim, .orbit-map[data-focus="bigg"] .om-orbit--bigg, .orbit-map[data-focus="b2b"] .om-orbit--b2b {
  stroke: var(--teal); stroke-width: 1.8; stroke-dasharray: 4 8; animation: flow 1.6s linear infinite;
}
.orbit-map[data-focus="uretim"] .om-planet--uretim, .orbit-map[data-focus="bigg"] .om-planet--bigg, .orbit-map[data-focus="b2b"] .om-planet--b2b { transform: scale(1.3); }
.orbit-map[data-focus="uretim"] .om-stage--uretim, .orbit-map[data-focus="bigg"] .om-stage--bigg, .orbit-map[data-focus="b2b"] .om-stage--b2b { fill: var(--teal); }
.orbit-map[data-focus="mentorluk"] .om-route { stroke-opacity: 1; stroke-width: 2.2; }
@media (max-width: 699px) {
  .orbit-map { border-radius: 20px; }
  .om-label, .om-center { display: none; }
  .om-short { display: block; }
  .om-stage { font-size: 22px; letter-spacing: .06em; }
}

/* ---------- Production lines (Ar-Ge Sizden Üretim Bizden) ---------- */
.facility-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.facility {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 12px 12px 26px; border-radius: 24px; background: var(--white); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.facility:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.facility > :not(.facility-art) { margin-inline: 12px; }
.facility h3 { margin-top: 12px; font-size: 1.2rem; letter-spacing: -.02em; }
.facility p { font-size: .96rem; color: var(--muted); }
.facility-art { overflow: hidden; aspect-ratio: 16 / 9; border-radius: 16px; background: var(--ink); }
.facility-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) { .facility-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .facility-grid { grid-template-columns: 1fr; } }

/* ---------- Program pages ---------- */
.bigg-program-logo { display: block; width: 100%; max-width: 380px; height: auto; margin: 24px 0 28px; mix-blend-mode: multiply; }
.fit-list { display: grid; gap: 12px; }
.fit-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) 56px minmax(0, 1fr); align-items: center; gap: 24px;
  padding: 24px 28px; border-radius: 22px; background: var(--white); border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .45s, border-color .45s;
}
.fit-who { font-size: 1.06rem; font-weight: 500; color: var(--body); }
.fit-arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); color: var(--teal-deep); transition: background-color .4s, color .4s, transform .5s var(--ease); }
.fit-what b { display: block; font-size: 1.2rem; letter-spacing: -.02em; }
.fit-what small { font-size: .88rem; color: var(--muted); }
.fit-row:hover { transform: translateX(6px); box-shadow: var(--shadow); border-color: transparent; }
.fit-row:hover .fit-arrow { background: var(--ink); color: #fff; transform: translateX(4px); }
@media (max-width: 767px) {
  .fit-row { grid-template-columns: 1fr auto; gap: 14px; padding: 20px; }
  .fit-who { grid-column: 1 / -1; font-size: .98rem; }
  .fit-what { order: 2; }
  .fit-arrow { order: 3; width: 42px; height: 42px; }
}

.split-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.split-intro--center { align-items: center; }
.split-intro .h2-sm { margin-top: 16px; }
@media (max-width: 1023px) { .split-intro { grid-template-columns: 1fr; } }

.mini-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.mini-facts > li { padding: 26px 24px; background: var(--white); }
.mini-facts strong { display: block; font-size: 2.3rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.mini-facts strong .icon { width: 36px; height: 36px; color: var(--teal-deep); }
.mini-facts span { display: block; margin-top: 10px; font-size: .93rem; color: var(--muted); }

.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.package {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: 28px; border-radius: 22px; background: var(--white); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.package:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.package h3 { margin-top: 4px; font-size: 1.15rem; }
.package p { font-size: .95rem; color: var(--muted); }
.package--hl { background: radial-gradient(400px 240px at 100% 0%, rgba(30,195,176,.3), transparent 65%), var(--ink); color: var(--on-ink); border-color: transparent; }
.package--hl h3 { color: #fff; }
.package--hl p { color: var(--on-ink-muted); }
.package--hl .icon-wrap { background: rgba(30,195,176,.14); color: var(--teal); }
@media (max-width: 1023px) { .package-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .package-grid { grid-template-columns: 1fr; } }

.focus-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.focus-tiles li { display: flex; align-items: center; gap: 14px; padding: 26px 24px; background: var(--paper); font-size: 1.02rem; font-weight: 600; transition: background-color .3s; }
.focus-tiles li:hover { background: var(--white); }
.focus-tiles .icon { width: 24px; height: 24px; color: var(--teal-deep); }
@media (max-width: 767px) { .focus-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .focus-tiles { grid-template-columns: 1fr; } }

.process { counter-reset: p; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.process--4 { grid-template-columns: repeat(4, 1fr); }
.process li {
  counter-increment: p; position: relative; overflow: hidden;
  padding: 28px 26px 30px; border-radius: 22px; background: var(--white); border: 1px solid var(--line);
}
.process li::before {
  content: counter(p, decimal-leading-zero); display: block; margin-bottom: 22px;
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.2px var(--teal-deep);
}
.process li::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--teal), transparent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease); transition-delay: calc(var(--pi, 0) * .14s + .2s);
}
.process.is-visible li::after, html:not(.js) .process li::after { transform: none; }
.process li:nth-child(2) { --pi: 1; } .process li:nth-child(3) { --pi: 2; } .process li:nth-child(4) { --pi: 3; }
.process li:nth-child(5) { --pi: 4; } .process li:nth-child(6) { --pi: 5; }
.process h3 { font-size: 1.1rem; }
.process p { margin-top: 8px; font-size: .95rem; color: var(--muted); }
@media (max-width: 1023px) { .process, .process--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 559px) { .process, .process--4 { grid-template-columns: 1fr; } }

.criteria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.criterion { padding: 28px; border-radius: 22px; background: var(--teal-soft); }
.criterion-check { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; background: var(--teal-deep); color: #fff; }
.criterion-check .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.criterion h3 { font-size: 1.1rem; }
.criterion p { margin-top: 8px; font-size: .96rem; color: var(--teal-ink); }
@media (max-width: 859px) { .criteria { grid-template-columns: 1fr; } }

.guide {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px);
  padding: clamp(28px, 5vw, 64px); border-radius: 32px;
  background: var(--ink); color: var(--on-ink);
}
.guide .orbit-decor { top: -35%; left: -35%; right: auto; transform: none; width: 90%; }
.guide .kicker { color: var(--teal); }
.guide-head h2 { margin-top: 16px; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); color: #fff; }
.guide-head p:not(.kicker) { margin-top: 16px; color: var(--on-ink-muted); }
.guide-head a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.guide-steps { counter-reset: g; display: grid; gap: 10px; }
.guide-steps li {
  counter-increment: g; display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px;
  padding: 18px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line-ink);
  transition: background-color .3s, border-color .3s;
}
.guide-steps li:hover { background: rgba(30,195,176,.06); border-color: rgba(30,195,176,.3); }
.guide-steps li::before {
  content: counter(g); grid-row: span 2; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px; background: rgba(30,195,176,.14); color: var(--teal); font-weight: 700;
}
.guide-steps h3 { align-self: end; font-size: 1rem; color: #fff; }
.guide-steps p { font-size: .9rem; color: var(--on-ink-muted); }
@media (max-width: 1023px) { .guide { grid-template-columns: 1fr; } }

.cta-card {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
  padding: clamp(28px, 5vw, 60px); border-radius: 32px;
  background:
    radial-gradient(640px 320px at 100% 0%, rgba(30,195,176,.28), transparent 62%),
    radial-gradient(420px 260px at 0% 100%, rgba(76,104,230,.18), transparent 70%),
    var(--ink);
  color: var(--on-ink);
}
.cta-card h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem); color: #fff; }
.cta-card p { margin-top: 12px; max-width: 36em; color: var(--on-ink-muted); }

.week-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.week-card { position: relative; padding: 26px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); }
.week-card:not(:last-child)::after { content: ""; position: absolute; top: 42px; left: 100%; width: 14px; height: 1px; background: var(--teal-deep); }
.week-no { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: rgba(244,187,78,.18); color: #8A5A06; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.week-card h3 { margin-top: 16px; font-size: 1.3rem; letter-spacing: -.02em; }
.week-card ul { display: grid; gap: 10px; margin-top: 14px; }
.week-card li { position: relative; padding-left: 18px; font-size: .94rem; color: var(--body); }
.week-card li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
@media (max-width: 1023px) { .week-grid { grid-template-columns: 1fr 1fr; } .week-card::after { display: none; } }
@media (max-width: 559px) { .week-grid { grid-template-columns: 1fr; } }

.flow { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; }
.flow-card { padding: clamp(24px, 3vw, 40px); border-radius: 26px; background: var(--white); border: 1px solid var(--line); }
.flow-card--ink { background: radial-gradient(420px 260px at 100% 0%, rgba(30,195,176,.28), transparent 65%), var(--ink); color: var(--on-ink); border-color: transparent; }
.flow-label { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-deep); }
.flow-card--ink .flow-label { color: var(--teal); }
.flow-card .checklist { margin-top: 20px; }
.flow-note { margin-top: 20px; font-size: .95rem; color: var(--on-ink-muted); }
.flow-link { position: relative; display: grid; place-items: center; align-self: stretch; }
.flow-link span {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, var(--teal-deep) 50%, transparent 0) 0 0 / 12px 1px repeat-x;
  animation: dash .8s linear infinite;
}
@keyframes dash { to { background-position: 12px 0; } }
.flow-link .icon { position: relative; width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--teal); color: var(--ink); stroke-width: 2.2; }
@media (max-width: 767px) {
  .flow { grid-template-columns: 1fr; }
  .flow-link { height: 72px; }
  .flow-link span { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(180deg, var(--teal-deep) 50%, transparent 0) 0 0 / 1px 12px repeat-y; animation-name: dashv; }
  .flow-link .icon { transform: rotate(90deg); }
}
@keyframes dashv { to { background-position: 0 12px; } }

.topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.topic-grid li { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 16px; background: var(--white); border: 1px solid var(--line); font-weight: 600; font-size: .96rem; }
.topic-grid .icon { color: var(--teal-deep); }
@media (max-width: 419px) { .topic-grid { grid-template-columns: 1fr; } }

.choice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 290px;
  padding: clamp(28px, 4vw, 44px); border-radius: 28px; background: var(--white); border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .45s var(--ease);
}
.choice-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.choice-card h3 { margin-top: 8px; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: -.03em; }
.choice-card p { max-width: 26em; color: var(--muted); }
.choice-go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-weight: 600; color: var(--teal-deep); }
.choice-go .icon { width: 18px; height: 18px; }
.choice-card:hover .choice-go .icon { animation: var(--slip) .6s var(--ease); }
.choice-card--ink { background: radial-gradient(420px 260px at 100% 0%, rgba(30,195,176,.28), transparent 65%), var(--ink); color: var(--on-ink); border-color: transparent; }
.choice-card--ink h3 { color: #fff; }
.choice-card--ink p { color: var(--on-ink-muted); }
.choice-card--ink .choice-go { color: var(--teal); }
.choice-card--ink .icon-wrap { background: rgba(30,195,176,.14); color: var(--teal); }
@media (max-width: 767px) { .choice-cards { grid-template-columns: 1fr; } .choice-card { min-height: 0; } }

/* ---------- Events page ---------- */
.formats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.format { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 28px; border-radius: 24px; background: var(--white); border: 1px solid var(--line); }
.format h2 { font-size: 1.4rem; letter-spacing: -.02em; }
.format p { margin-top: 8px; color: var(--muted); }
@media (max-width: 767px) { .formats { grid-template-columns: 1fr; } }

.event-list { display: grid; gap: 14px; }
.event-card {
  display: grid; grid-template-columns: 124px 1fr; gap: 28px;
  padding: 26px; border-radius: 26px; background: var(--white); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.event-card-date {
  display: grid; align-content: center; justify-items: center; align-self: start;
  padding: 18px 8px; border-radius: 20px; background: var(--ink); color: #fff; text-align: center; line-height: 1.1;
}
.event-card-date b { font-size: 2.6rem; letter-spacing: -.04em; }
.event-card-date span { margin-top: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }
.event-card-date small { margin-top: 2px; font-size: .78rem; color: var(--on-ink-muted); }
.event-card h3 { margin-top: 8px; font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); letter-spacing: -.02em; line-height: 1.25; }
.event-card-body > p:not(.event-type) { margin-top: 10px; color: var(--muted); }
.event-card-body > .btn { margin-top: 18px; }
@media (max-width: 559px) {
  .event-card { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .event-card-date { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; padding: 12px 16px; }
  .event-card-date b { font-size: 1.8rem; }
}

/* ---------- Blog page ---------- */
.filter-bar {
  position: relative; display: inline-flex; gap: 4px; max-width: 100%; margin-bottom: 36px;
  padding: 5px; border-radius: 999px; background: var(--white); border: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn {
  position: relative; z-index: 1; flex: none;
  padding: 10px 18px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: .9rem; font-weight: 600; color: var(--muted); white-space: nowrap;
  transition: color .35s;
}
.filter-btn:hover { color: var(--text); }
.filter-btn[aria-pressed="true"] { color: #fff; }
.filter-bar:not(.is-ready) .filter-btn[aria-pressed="true"] { background: var(--ink); }
.filter-indicator {
  position: absolute; top: 5px; left: 0; z-index: 0; height: calc(100% - 10px);
  border-radius: 999px; background: var(--ink); pointer-events: none;
  transition: transform .5s var(--ease), width .5s var(--ease);
}
.filter-bar:not(.is-ready) .filter-indicator { display: none; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 12px 12px 22px; border-radius: 24px; background: var(--white); border: 1px solid var(--line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.post-card .post-cover { aspect-ratio: 16 / 10; margin-bottom: 10px; }
.post-card > :not(.post-cover) { margin-inline: 10px; }
.post-card h2 { font-size: 1.15rem; line-height: 1.35; letter-spacing: -.015em; transition: color .25s; }
.post-card > p:not(.post-tag) { font-size: .93rem; color: var(--muted); }
.post-card .read { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: .9rem; font-weight: 600; color: var(--teal-deep); }
.post-card .read .icon { width: 16px; height: 16px; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.post-card:hover h2 { color: var(--teal-deep); }
.post-card:hover .read .icon { animation: var(--slip) .6s var(--ease); }
.post-card.is-filtered { display: none; }
img.post-cover { width: 100%; object-fit: cover; }
.post-card.is-entering { animation: cardIn .55s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@media (max-width: 1023px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .post-grid { grid-template-columns: 1fr; } }

/* ---------- Application page ---------- */
.apply-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 88px); align-items: start; }
.apply-intro { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 28px; }
.steps { counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding-bottom: 26px; }
.step:nth-child(2) { --si: 1; } .step:nth-child(3) { --si: 2; } .step:nth-child(4) { --si: 3; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--line-strong);
  font-size: .82rem; font-weight: 700;
  transition: background-color .5s, color .5s, border-color .5s; transition-delay: calc(var(--si, 0) * .3s + .2s);
}
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 22px; top: 44px; bottom: 0; width: 1px;
  background: linear-gradient(var(--teal-deep), var(--line-strong));
  transform: scaleY(0); transform-origin: top;
  transition: transform .6s var(--ease); transition-delay: calc(var(--si, 0) * .3s + .35s);
}
.steps.is-visible .step::before { background: var(--ink); color: #fff; border-color: var(--ink); }
.steps.is-visible .step:not(:last-child)::after, html:not(.js) .step:not(:last-child)::after { transform: none; }
.step h3 { margin-top: 10px; font-size: 1.06rem; }
.step p { margin-top: 4px; font-size: .94rem; color: var(--muted); }
.other-routes { display: grid; gap: 10px; padding: 22px; border-radius: 20px; background: var(--white); border: 1px solid var(--line); }
.other-routes p { font-size: .88rem; color: var(--muted); }
.other-routes a { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; transition: color .25s; }
.other-routes a:hover { color: var(--teal-deep); }
.other-routes .icon { width: 16px; height: 16px; }
@media (max-width: 1023px) {
  .apply-grid { grid-template-columns: 1fr; }
  .apply-intro { position: static; }
}

/* ---------- Forms ---------- */
.form-card { padding: clamp(24px, 4vw, 48px); border-radius: 30px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(10,16,34,.25); }
.form-card--after { margin-top: clamp(32px, 4vw, 48px); scroll-margin-top: calc(var(--header-h) + 24px); }
.form-title { margin-bottom: 24px; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: -.03em; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.field > label, .field legend { padding: 0; font-size: .88rem; font-weight: 600; }
.field legend { margin-bottom: 8px; }
.optional { font-weight: 400; color: var(--muted); }

.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  width: 100%; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--field);
  font-size: 1rem; transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input:not([type="radio"]):not([type="checkbox"]), .field select { height: 52px; padding: 0 16px; }
.field textarea { min-height: 150px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6B7183; } /* 4.6:1 on the field, still lighter than real input */
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(14,20,38,.3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: var(--white); border-color: var(--teal-deep); box-shadow: 0 0 0 4px rgba(30,195,176,.2); }
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586074' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
}

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: var(--field);
  font-size: .9rem; font-weight: 500;
  transition: background-color .25s, color .25s, border-color .25s;
}
.choice:hover span { border-color: rgba(14,20,38,.34); }
.choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }

.consent { display: flex; align-items: flex-start; gap: 12px; font-size: .88rem; color: var(--muted); cursor: pointer; }
.consent input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--teal-deep); cursor: pointer; }
.consent a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.field--consent + .field--consent { margin-top: -8px; }
.field-hint { font-size: .82rem; color: var(--muted); }
/* Honeypot: off-screen for people, still filled in by form-spamming bots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.error-msg { display: none; font-size: .82rem; font-weight: 500; color: var(--danger); }
.field.has-error .error-msg { display: block; }
.field.has-error input:not([type="radio"]):not([type="checkbox"]), .field.has-error textarea { border-color: var(--danger); }
.field.has-error .choice span { border-color: rgba(180,35,24,.5); }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.form-status { flex: 1 1 220px; font-size: .9rem; color: var(--muted); }
.form-status.is-error { color: var(--danger); }
.form-status.is-note { color: #7A5A12; }
.form-actions .btn[disabled] { opacity: .6; cursor: progress; }

.form-success { display: grid; justify-items: start; gap: 12px; padding: 24px 0; }
.form-success:focus { outline: none; }
.success-icon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--teal); color: var(--ink); }
.success-icon .icon { width: 28px; height: 28px; stroke-width: 2.4; }
.form-success h2 { margin-top: 8px; font-size: 1.8rem; letter-spacing: -.03em; }
.form-success p { max-width: 32em; color: var(--muted); }
@media (max-width: 639px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 22px 18px; border-radius: 24px; }
  .form-actions .btn { width: 100%; }
}

/* ---------- Contact page ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.contact-info { display: grid; gap: 14px; }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-card {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 18px; border-radius: 20px; background: var(--white); border: 1px solid var(--line);
  transition: border-color .3s, transform .45s var(--ease);
}
.contact-card:hover { border-color: var(--teal-deep); transform: translateY(-2px); }
.contact-card--wide { grid-column: 1 / -1; }
.contact-card small { display: block; font-size: .78rem; color: var(--muted); }
.contact-card b { display: block; font-weight: 600; line-height: 1.4; }
.contact-card .go-icon { margin-left: auto; color: var(--muted); }
.map { overflow: hidden; aspect-ratio: 16 / 10; min-height: 280px; border-radius: 24px; border: 1px solid var(--line); background: var(--paper-2); }
/* Shown until the visitor chooses to load the Google map */
.map-consent {
  display: grid; place-content: center; justify-items: center; gap: 14px; height: 100%; padding: 24px; text-align: center;
  background: radial-gradient(circle at 28% 30%, rgba(30,195,176,.14), transparent 55%), var(--paper-2);
}
.map-consent p { max-width: 34em; font-size: .9rem; color: var(--muted); }
.map-consent p a { color: var(--teal-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.map-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; }
html:not(.js) [data-map-load] { display: none; }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05); }
.quick-links { display: grid; overflow: hidden; border-radius: 22px; background: var(--white); border: 1px solid var(--line); }
.quick-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; border-top: 1px solid var(--line); transition: background-color .25s; }
.quick-links a:first-child { border-top: 0; }
.quick-links a:hover { background: var(--paper); }
.quick-links b { display: block; font-size: .98rem; }
.quick-links small { font-size: .85rem; color: var(--muted); }
.quick-links .icon { color: var(--teal-deep); }
.quick-links a:hover .icon { animation: var(--slip) .6s var(--ease); }
@media (max-width: 1023px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .contact-cards { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer {
  /* clip, not hidden: hidden would make the footer a scroll container, and the ORION letters'
     scroll-linked animation would then follow the footer instead of the page */
  position: relative; display: flow-root; overflow: clip; isolation: isolate;
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
}
.cta-band {
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: 48px;
  padding: clamp(80px, 9vw, 128px) 0 clamp(56px, 6vw, 80px);
  border-bottom: 1px solid var(--line-ink);
}
.cta-band h2 { font-size: clamp(2.3rem, 1.2rem + 4vw, 4.5rem); letter-spacing: -.045em; line-height: 1; color: #fff; }
.cta-contacts { display: grid; gap: 10px; }
.cta-contact {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: 18px;
  border: 1px solid var(--line-ink); background: rgba(255,255,255,.03);
  transition: border-color .3s, background-color .3s;
}
.cta-contact:hover { border-color: rgba(30,195,176,.5); background: rgba(30,195,176,.06); }
.cta-contact .icon-wrap { width: 44px; height: 44px; background: rgba(30,195,176,.12); color: var(--teal); }
.cta-contact .icon-wrap .icon { width: 20px; height: 20px; }
.cta-contact small { display: block; font-size: .78rem; color: var(--on-ink-muted); }
.cta-contact b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.4; color: #fff; }

.footer-main { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding: 64px 0 56px; }
.footer-about p { margin-top: 18px; max-width: 30em; font-size: .93rem; color: var(--on-ink-muted); }
.socials { display: flex; gap: 8px; margin-top: 24px; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line-ink); color: var(--on-ink-muted); transition: color .2s, border-color .2s, background-color .2s; }
.socials a:hover { color: var(--teal); border-color: rgba(30,195,176,.5); background: rgba(30,195,176,.06); }
.socials .icon { width: 18px; height: 18px; }
.footer-col h3 { margin-bottom: 18px; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-muted); }
.footer-col li + li { margin-top: 10px; }
.footer-col a {
  padding-bottom: 2px; font-size: .95rem; color: rgba(238,241,248,.86);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ease), color .2s;
}
.footer-col a:hover, .footer-col a[aria-current] { color: var(--teal); background-size: 100% 1px; }

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px 0; border-top: 1px solid var(--line-ink);
  font-size: .86rem; color: var(--on-ink-muted);
}
.footer-bottom .text-link { font-size: .86rem; color: var(--on-ink); }
.footer-coords { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; color: var(--on-ink-muted); }
.footer-coords svg { width: 14px; height: 14px; fill: none; stroke: var(--teal); stroke-width: 1.2; }
.icon-up { transform: rotate(-90deg); }
.icon.icon-up:has(> use) { --slip: arrow-slip-rise; }

.footer-giant {
  margin-bottom: -.2em; text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  font-size: clamp(5rem, 25vw, 22rem); font-weight: 800; letter-spacing: -.07em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09);
}
/* One span per letter, so the letters can rise one after another (see Motion) */
.footer-giant span {
  display: inline-block;
  background: linear-gradient(180deg, rgba(30,195,176,.14), transparent 70%);
  -webkit-background-clip: text; background-clip: text;
}
.footer-giant span:nth-child(2) { --gi: 1; } .footer-giant span:nth-child(3) { --gi: 2; }
.footer-giant span:nth-child(4) { --gi: 3; } .footer-giant span:nth-child(5) { --gi: 4; }
@media (max-width: 1023px) {
  .cta-band { grid-template-columns: 1fr; gap: 32px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 479px) { .footer-main { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Technical labels ----------
   Small labels share the monospaced face, like the annotations on an engineering drawing.
   (JetBrains Mono comes in 400–500 only; heavier weights would be faked by the browser.) */
.eyebrow, .breadcrumb, .col-title, .footer-col h3, .aside-nav h2, .event-type, .post-tag, .flow-label,
.reason-title, .service-num, .week-no, .tag, .step-dot, .legal-meta, .article-date, .fact-value small {
  font-family: var(--mono); font-weight: 500; font-synthesis: none;
}
.eyebrow, .col-title, .footer-col h3, .aside-nav h2, .flow-label, .reason-title { letter-spacing: .1em; }
.breadcrumb { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.fact-value small { letter-spacing: 0; }

/* =========================================================
   Motion
   ========================================================= */

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Word-by-word heading reveal */
[data-split] .w {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: .14em .1em .16em 0; margin: -.14em -.1em -.16em 0;
}
[data-split] .wi {
  display: inline-block; transform: translate3d(0, 112%, 0);
  transition: transform 1.05s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 55ms);
}
.is-visible [data-split] .wi, [data-split].is-visible .wi { transform: none; }

/* Scroll reveal */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-split] { opacity: 1; transform: none; }
.js .section-head.reveal { transform: none; }
/* Above the fold: a short fade so the headline and intro are readable almost at once */
.js .hero .reveal:not([data-split]), .js .page-hero .reveal:not([data-split]) { transform: translateY(12px); transition-duration: .4s, .55s; }
.js .hero .reveal.is-visible, .js .page-hero .reveal.is-visible { transform: none; }
/* main.js adds .js-ready once reveals are wired up. If it never gets there (blocked, failed),
   show everything after a short wait instead of leaving the page blank. */
.js:not(.js-ready) .reveal,
.js:not(.js-ready) .stagger > *,
.js:not(.js-ready) .kicker::before,
.js:not(.js-ready) [data-split] .wi { animation: reveal-fallback .6s 2.5s var(--ease) forwards; }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }

/* Lists and grids that come in item by item (main.js adds .is-visible to .stagger) */
.stagger > :nth-child(2) { --n: 1; } .stagger > :nth-child(3) { --n: 2; } .stagger > :nth-child(4) { --n: 3; }
.stagger > :nth-child(5) { --n: 4; } .stagger > :nth-child(6) { --n: 5; } .stagger > :nth-child(7) { --n: 6; }
.stagger > :nth-child(n+8) { --n: 7; }
.js .stagger:not(.is-visible) > * { opacity: 0; }
/* Backwards fill only, so each item's own hover transform takes over once it has landed */
.js .stagger.is-visible > * { animation: rise .95s var(--ease) backwards; animation-delay: calc(var(--d, 0s) + var(--n, 0) * 75ms); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* The short rule before a kicker draws in with its heading */
.js .reveal .kicker::before, .js .kicker.reveal::before { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease) .25s; }
.js .is-visible .kicker::before, .js .kicker.is-visible::before { transform: none; }

/* Counters (main.js counts them up when they scroll into view) */
[data-count] { display: inline-block; font-variant-numeric: tabular-nums; }

/* Pointer spotlight */
.spot { position: relative; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(30,195,176,.13), transparent 62%);
}
.spot:hover::after { opacity: 1; }
.section--ink .spot::after, .is-featured.spot::after, .cta-contact.spot::after, .package--hl.spot::after, .choice-card--ink.spot::after {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(30,195,176,.2), transparent 60%);
}

/* Corner brackets lock onto the card under the pointer, like a targeting reticle */
.spot::before {
  --c: rgba(11, 119, 107, .7); --l: 12px; --w: 1.5px;
  content: ""; position: absolute; inset: 10px; z-index: 1; pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) left top / var(--l) var(--w), linear-gradient(var(--c) 0 0) left top / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) right top / var(--l) var(--w), linear-gradient(var(--c) 0 0) right top / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) left bottom / var(--l) var(--w), linear-gradient(var(--c) 0 0) left bottom / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) right bottom / var(--l) var(--w), linear-gradient(var(--c) 0 0) right bottom / var(--w) var(--l);
  background-repeat: no-repeat;
  opacity: 0; transform: scale(1.04); transition: opacity .3s, transform .55s var(--ease);
}
.spot:hover::before { opacity: 1; transform: none; }
.section--ink .spot::before, .is-featured.spot::before, .cta-contact.spot::before, .package--hl.spot::before, .choice-card--ink.spot::before { --c: rgba(30, 195, 176, .8); }

/* Arrow slip: out one side, back in from the other (--slip is set per arrow icon, see .icon).
   It comes back from closer in, so it never touches the button's label. */
@keyframes arrow-slip {
  0% { animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  45% { transform: translateX(110%); opacity: 0; }
  46% { transform: translateX(-55%); opacity: 0; animation-timing-function: var(--ease); }
}
@keyframes arrow-slip-up {
  0% { animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  45% { transform: translate(85%, -85%); opacity: 0; }
  46% { transform: translate(-45%, 45%); opacity: 0; animation-timing-function: var(--ease); }
}
@keyframes arrow-slip-rise {
  0% { animation-timing-function: cubic-bezier(.5, 0, .75, 0); }
  45% { transform: rotate(-90deg) translateX(110%); opacity: 0; }
  46% { transform: rotate(-90deg) translateX(-55%); opacity: 0; animation-timing-function: var(--ease); }
}

/* Links inside running text: a faint underline that fills in from the left on hover */
@supports (color: color-mix(in srgb, red, blue)) {
  .guide-head a, .legal a, .article-body a, .consent a, .map-consent p a {
    text-decoration: none; padding-bottom: 2px;
    background:
      linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat,
      linear-gradient(color-mix(in srgb, currentColor 32%, transparent), color-mix(in srgb, currentColor 32%, transparent)) 0 100% / 100% 1px no-repeat;
    transition: background-size .55s var(--ease), color .2s;
  }
  .guide-head a:hover, .legal a:hover, .article-body a:hover, .consent a:hover, .map-consent p a:hover { background-size: 100% 1.5px, 100% 1px; }
}

/* Form sent: the check draws itself inside a widening ring */
.success-icon { position: relative; }
.success-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--teal); opacity: 0; pointer-events: none; }
.form-success:not([hidden]) > * { animation: rise .8s var(--ease) backwards; }
.form-success:not([hidden]) > :nth-child(2) { animation-delay: .1s; }
.form-success:not([hidden]) > :nth-child(3) { animation-delay: .18s; }
.form-success:not([hidden]) .success-icon::after { animation: ring-out 1.5s .3s var(--ease) both; }
.form-success:not([hidden]) .success-icon .icon { stroke-dasharray: 23; animation: check-draw .6s .25s var(--ease) both; }
@keyframes ring-out { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@keyframes check-draw { from { stroke-dashoffset: 23; } to { stroke-dashoffset: 0; } }

/* Scroll-linked touches, in browsers with scroll-driven animations (elsewhere these just sit still) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The dark programs panel opens up to full size as it scrolls in */
    .section--panel { transform-origin: 50% 0; animation: panel-open linear both; animation-timeline: view(); animation-range: entry 5% entry 90%; }
    /* ORION at the foot of the page rises letter by letter */
    .footer-giant span {
      animation: giant-rise linear both; animation-timeline: view();
      animation-range: entry calc(var(--gi, 0) * 6%) entry calc(38% + var(--gi, 0) * 6%);
    }
  }
}
@keyframes panel-open { from { transform: scale(.93); } }
@keyframes giant-rise { from { opacity: 0; transform: translateY(40%); } }

/* ---------- Page transitions (cross-document View Transitions) ----------
   head-script.html names the moving parts. The sky stays put: every page draws the same stars and
   runs its loops on the same clock, so the crossfade of the page itself is invisible up there.
   The hero's words leave first (vt-copy-out) and the new ones rise in after them (vt-copy-in);
   the clicked title flies to the new page's h1 (vt-title) and the light content sheet rises over
   the sky (vt-sheet). The header stays where it is. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: var(--ease); }
/* Arriving from further down a light page: the old page goes sooner (a dip into the sky, not grey) */
:root.vt-from-page::view-transition-old(root) { animation-duration: .28s; }
::view-transition-old(vt-copy-out) { animation: vt-fade-out .22s ease-out both; }
::view-transition-new(vt-copy-in) { animation: vt-copy-in .65s .16s var(--ease) both; }
@keyframes vt-copy-in { from { opacity: 0; transform: translateY(14px); } }
::view-transition-group(site-header) { z-index: 2; animation-duration: .5s; }
/* Above the header too: a title picked from an open dropdown starts inside it */
::view-transition-group(vt-title) { z-index: 3; animation-duration: .85s; animation-timing-function: cubic-bezier(.3, .75, .15, 1); }
::view-transition-old(vt-title) { animation: vt-fade-out .3s ease-out both; }
::view-transition-new(vt-title) { animation: vt-fade-in .5s .1s ease-out both; }
/* Nothing matched on the new page: the title leaves with the rest of the old page */
::view-transition-old(vt-title):only-child { animation: vt-fade-out .5s var(--ease) both; }
::view-transition-new(vt-sheet) { animation: vt-sheet-in .9s var(--ease) both; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
/* Solid early, so the old page doesn't show through its edge while it rises */
@keyframes vt-sheet-in { from { opacity: 0; transform: translateY(40px); } 40% { opacity: 1; } }
/* An h1 that arrives by morphing skips its own word-by-word entrance */
.vt-morph .page-hero h1.reveal, .vt-morph .page-hero h1 .wi { opacity: 1; transform: none; transition: none; }

/* ---------- Without JavaScript ---------- */
/* The menu button needs JS; a plain link to the footer's link list takes its place */
@media (max-width: 1023px) {
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav-fallback {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px;
    border: 1px solid var(--line-ink); color: #fff; font-weight: 600;
  }
}
/* Tabs and filters need JS: show every panel and every post instead */
html:not(.js) [data-tabs] { display: block; }
html:not(.js) [data-tabs] .tablist, html:not(.js) .filter-bar { display: none; }
html:not(.js) [data-tabs] .tabpanel[hidden] { display: block !important; }
html:not(.js) [data-tabs] .tabpanel + .tabpanel { margin-top: 24px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .orion-lines path { stroke-dashoffset: 0; }
  .focus-track { animation: none; }
}