/* Shared design for the Supreva Connect inner pages. Same tokens and parts as the home page. */
:root {
  --sc-canvas: #0b1b4d; --sc-surface: #132a74;
  --sc-ink: #f4f7ff; --sc-ink-soft: #b9c7f0;
  --sc-accent: #ffcf2e; --sc-accent-ink: #0b1b4d;
  --sc-font-display: "Outfit", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 228 80% 6%;
  --royal: #1b3fd1; --cyan: #00b4ff;
  --line-x: max(10px, calc(var(--sc-gutter) * 0.38));
}
.sc-display { font-weight: 600; }
h3 { font-family: var(--sc-font-display); font-weight: 600; letter-spacing: var(--sc-track-snug); line-height: 1.15; margin: 0; }
h2 { margin: 0; font-size: var(--sc-t-3xl); line-height: 1; letter-spacing: var(--sc-track-tight); text-wrap: balance; }
p { text-wrap: pretty; }
.eyebrow { display: inline-block; font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: #ffe27a; margin: 0 0 var(--sc-4); }
.soft { color: var(--sc-ink-soft); }
.big { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 40ch; }

/* bar */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); padding: var(--sc-3) var(--sc-gutter);
  background: linear-gradient(to bottom, color-mix(in oklab, #071238 70%, transparent), transparent);
  transition: background-color 220ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out); }
.bar.is-stuck { background: color-mix(in oklab, #071238 90%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08), 0 8px 24px -12px rgb(0 0 0 / 0.5); }
.brand { display: inline-flex; align-items: center; gap: var(--sc-3); text-decoration: none; }
.brand img { width: 40px; height: 40px; }
.brand span { font-family: var(--sc-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1; letter-spacing: 0.02em; }
.brand small { display: block; font-size: 0.62rem; letter-spacing: 0.32em; color: var(--sc-accent); margin-top: 3px; font-weight: 600; }
.bar__end { display: flex; align-items: center; gap: var(--sc-5); }
.bar__call { font-size: var(--sc-t-sm); text-decoration: none; opacity: 0.9; }
.bar__call:hover { opacity: 1; text-decoration: underline; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: var(--sc-2); min-height: 48px; padding: 0 var(--sc-5); border: 0; cursor: pointer; border-radius: var(--sc-r-pill); white-space: nowrap; font-family: var(--sc-font-display); font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out); }
.btn svg { width: 20px; height: 20px; }
.btn--yes { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e2); }
.btn--ghost { color: var(--sc-ink); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--sc-ink) 55%, transparent); }
.btn--sm { min-height: 42px; padding: 0 var(--sc-4); font-size: 0.95rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--yes:hover { background: #ffdb5c; box-shadow: var(--sc-e3); }
  .btn--ghost:hover { background: color-mix(in oklab, var(--sc-ink) 10%, transparent); }
}
.btn:active { transform: translateY(1px) scale(0.98); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-6); }

/* the line */
.line { position: fixed; left: var(--line-x); top: 0; bottom: 0; width: 2px; z-index: 50; pointer-events: none; opacity: var(--line-on, 0); transition: opacity 260ms var(--sc-ease-out); }
.line__half { position: absolute; left: 0; top: 0; bottom: var(--line-end, 0px); width: 2px; background: color-mix(in oklab, var(--sc-accent) 70%, #33437a); }
.pulse { position: absolute; left: -1px; top: 0; width: 4px; height: 56px; border-radius: 4px; background: linear-gradient(to bottom, transparent, #fff6cf 60%, var(--sc-accent)); will-change: transform; }

/* photo hero */
.phero { position: relative; min-height: 88vh; min-height: 88svh; display: grid; align-items: end; overflow: clip; background: #0a1a4a; }
.phero figure { position: absolute; inset: 0; margin: 0; }
.phero figure img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.phero__mask { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, #0b1b4d 3%, color-mix(in oklab, #071442 84%, transparent) 38%, color-mix(in oklab, #071442 18%, transparent) 72%, transparent); }
.phero__copy { position: relative; z-index: 2; padding-block: 8rem var(--sc-9); }
h1 { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.4rem); line-height: 0.98; margin: 0; letter-spacing: var(--sc-track-tight); text-wrap: balance; max-width: 18ch; }
h1 em { font-style: normal; color: var(--sc-accent); display: block; }
.sub { margin: var(--sc-5) 0 0; max-width: 40ch; font-size: var(--sc-t-lg); line-height: 1.5; color: #dfe7ff; }

/* layered street hero (support plans) */
.street .sc-stage { background: #0a1a4a; }
.plane { position: absolute; pointer-events: none; }
.plane img { max-width: none; }
.plane--sky { inset: -8% 0 0 0; }
.plane--sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; scale: calc(1.06 - var(--sc-p, 0) * 0.04); transform-origin: 50% 80%; }
.plane--mid { left: -6vw; width: 112vw; bottom: -4vh; aspect-ratio: 1944 / 972; }
.plane--mid img { position: absolute; inset: 0; width: 100%; height: 100%; scale: calc(1 + var(--sc-p, 0) * 0.07); transform-origin: 50% 82%; }
.plane--fore { inset: -4% -2% -6% -2%; }
.plane--fore img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 0%; filter: blur(2.5px) saturate(1.05); scale: calc(1.02 + var(--sc-p, 0) * 0.32); transform-origin: 92% 10%; }
.haze { position: absolute; inset: auto 0 0 0; height: 46%; pointer-events: none; background: linear-gradient(to top, #0b1b4d 2%, color-mix(in oklab, #0b1b4d 30%, transparent) 40%, transparent); }
.street__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(72% 68% at 18% 34%, color-mix(in oklab, #071442 86%, transparent), transparent 80%); }
.street__copy { position: absolute; z-index: 3; left: var(--sc-gutter); right: var(--sc-gutter); top: clamp(6.5rem, 17vh, 11rem); }

/* two columns with a ledger */
.duo { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sc-9) var(--sc-10); align-items: start; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { padding: var(--sc-6) 0; border-top: 1px solid var(--sc-hairline-strong); }
.ledger li:last-child { border-bottom: 1px solid var(--sc-hairline-strong); }
.ledger h3 { font-size: var(--sc-t-xl); margin-bottom: var(--sc-3); }
.ledger p { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; }
.prose > * + * { margin-top: var(--sc-5); }
.prose p { color: var(--sc-ink-soft); max-width: 58ch; margin-bottom: 0; }
.prose p strong { color: var(--sc-ink); font-weight: 500; }

/* plans */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-10); margin-top: var(--sc-9); }
.plan h3 { font-size: var(--sc-t-2xl); margin-bottom: var(--sc-4); line-height: 1.02; }
.plan > p { color: var(--sc-ink-soft); max-width: 44ch; margin: 0 0 var(--sc-6); }
.plan ul { list-style: none; margin: 0 0 var(--sc-6); padding: 0; }
.plan li { display: grid; grid-template-columns: auto 1fr; gap: var(--sc-1) var(--sc-3); padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline-strong); }
.plan li svg { width: 22px; height: 22px; color: var(--sc-accent); margin-top: 3px; grid-row: span 2; }
.plan li b { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.1rem; }
.plan li span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }

/* pan rail */
.range .sc-stage { display: flex; align-items: center; }
.rail { display: flex; gap: var(--sc-5); padding-inline: var(--sc-gutter); align-items: stretch; }
.rail__lead { flex: none; width: min(30rem, 82vw); align-self: center; padding-right: var(--sc-7); margin-block: -100vh; }
.rail__lead p { margin-top: var(--sc-5); color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; }
.svc { flex: none; width: clamp(16.5rem, 23vw, 21rem); display: flex; flex-direction: column; gap: var(--sc-3); padding: var(--sc-6); border-radius: var(--sc-r-lg); background: linear-gradient(170deg, #1a3590, var(--sc-surface) 60%); box-shadow: var(--sc-edge), var(--sc-e2); }
.svc__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in oklab, var(--sc-accent) 16%, transparent); color: var(--sc-accent); margin-bottom: var(--sc-4); }
.svc__icon svg { width: 26px; height: 26px; }
.svc h3 { font-size: var(--sc-t-xl); }
.svc p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }

/* night wipe */
.night { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; overflow: clip; }
.night figure { position: absolute; inset: 0; margin: 0; }
.night figure img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.night__mask { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklab, #050a1c 72%, transparent) 0%, color-mix(in oklab, #050a1c 40%, transparent) 38%, transparent 58%); }
.night__copy { position: relative; z-index: 2; padding-block: var(--sc-9); max-width: 40rem; }
.night h2 { margin-bottom: var(--sc-5); }
.night p { margin: 0; color: #dbe3fb; max-width: 42ch; }
.ticks { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: grid; gap: var(--sc-3); }
.ticks li { display: flex; align-items: center; gap: var(--sc-3); font-family: var(--sc-font-display); font-weight: 500; font-size: 1.15rem; }
.ticks svg { width: 22px; height: 22px; color: var(--sc-accent); flex: none; }
.bignum { display: inline-block; margin-top: var(--sc-7); text-decoration: none; }
.bignum small { display: block; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); letter-spacing: 0.02em; margin-bottom: var(--sc-2); }
.bignum b { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.2rem); line-height: 1; color: var(--sc-accent); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bignum:hover b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; }

/* data recovery: scattered files settle back into order */
.lost .sc-stage { background: #04060e; --k: clamp(0, calc((var(--sc-p, 0) - 0.18) / 0.5), 1); }
.lost__glow { position: absolute; inset: 0; pointer-events: none; opacity: var(--k); background: radial-gradient(70% 60% at 70% 55%, color-mix(in oklab, var(--royal) 70%, #04060e), #04060e 75%); }
.lost__copy { position: absolute; z-index: 3; left: var(--sc-gutter); right: var(--sc-gutter); top: clamp(6.5rem, 17vh, 11rem); }
.files { position: absolute; z-index: 2; right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 7rem); width: min(26rem, calc(100% - var(--sc-gutter) * 2 - 1rem)); list-style: none; margin: 0; padding: 0; }
.files li { display: flex; align-items: center; gap: var(--sc-3); padding: var(--sc-3) 0; font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); border-top: 1px solid rgb(244 247 255 / 0.2);
  opacity: calc(0.22 + var(--k) * 0.78);
  transform: translate(calc((1 - var(--k)) * var(--x)), calc((1 - var(--k)) * var(--y))) rotate(calc((1 - var(--k)) * var(--r))); }
.files svg { width: 22px; height: 22px; color: var(--sc-accent); flex: none; }

/* schools: the gate opens */
.gate .sc-stage { background: linear-gradient(145deg, #0b1b4d 0%, var(--royal) 55%, #0a8ee0 100%); --k: clamp(0, calc((var(--sc-p, 0) - 0.26) / 0.36), 1); }
.gate__door { position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: 2; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 64px), linear-gradient(to bottom, #0b1b4d, #132a74); }
.gate__door--l { left: 0; transform: translateX(calc(var(--k) * -101%)); box-shadow: inset -1px 0 0 rgb(255 255 255 / 0.28); }
.gate__door--r { right: 0; transform: translateX(calc(var(--k) * 101%)); box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.28); }
.gate__a { position: absolute; z-index: 3; left: var(--sc-gutter); right: var(--sc-gutter); top: clamp(6.5rem, 17vh, 11rem); }
.gate__b { position: absolute; z-index: 1; left: var(--sc-gutter); right: var(--sc-gutter); top: 50%; transform: translateY(-50%); }
.gate__b h2 { max-width: 16ch; }
.gate__status { position: absolute; z-index: 3; left: 50%; bottom: clamp(2rem, 9vh, 5rem); transform: translateX(-50%); white-space: nowrap; font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; opacity: calc(1 - var(--k) * 4); background: #071238; color: var(--sc-accent); padding: var(--sc-2) var(--sc-4); border-radius: var(--sc-r-pill); }
.brands { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-2xl); line-height: 1.05; letter-spacing: var(--sc-track-tight); color: var(--sc-accent); margin: 0; }

/* team */
.team-photo { margin: 0; border-radius: var(--sc-r-lg); overflow: clip; aspect-ratio: 4 / 5; box-shadow: var(--sc-e3); }
.team-photo img { width: 100%; height: 118%; margin-top: -9%; object-fit: cover; object-position: 62% 50%; }
.partners { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); border-top: 1px solid var(--sc-hairline-strong); padding-top: var(--sc-4); }

/* contact */
.ways { list-style: none; margin: var(--sc-8) 0 0; padding: 0; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sc-7); align-items: end; }
.ways h3 { font-size: var(--sc-t-lg); margin-bottom: var(--sc-2); }
.ways p { margin: 0 0 var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.ways a { color: var(--sc-accent); font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-xl); text-decoration: none; overflow-wrap: anywhere; }
.ways a:hover { text-decoration: underline; }
.ways .small a { font-size: var(--sc-t-lg); }
.msg { display: grid; gap: var(--sc-5); margin-top: var(--sc-6); }
.msg label { display: grid; gap: var(--sc-2); font-size: var(--sc-t-sm); font-weight: 500; }
.msg input, .msg textarea { font: inherit; color: var(--sc-ink); background: color-mix(in oklab, var(--sc-surface) 70%, #071238); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-md); padding: var(--sc-3) var(--sc-4); min-height: 48px; width: 100%; }
.msg ::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 80%, transparent); }
.msg .btn { justify-self: start; }
.note { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin: 0; }
.note a { color: var(--sc-accent); }

/* close */
.close .sc-stage { background: linear-gradient(145deg, #0b1b4d 0%, var(--royal) 55%, #0a8ee0 100%); display: grid; grid-template-rows: 1fr auto; }
.close .sc-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px circle at calc(var(--sc-mx, 0.5) * 100%) calc(var(--sc-my, 0.5) * 100%), rgb(255 255 255 / 0.10), transparent 70%); }
.close__inner { align-self: center; justify-self: center; text-align: center; padding-inline: var(--sc-gutter); position: relative; z-index: 2; }
.close h2 { font-size: clamp(2.8rem, 1.8rem + 4.6vw, 6rem); line-height: 0.98; max-width: 16ch; margin-inline: auto; }
.close p { margin: var(--sc-5) auto 0; max-width: 38ch; font-size: var(--sc-t-lg); color: #e6edff; }
.close__ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sc-3); margin-top: var(--sc-7); }
.close .btn--yes, .close .btn--ghost { min-height: 60px; }
.close .btn--yes { padding: 0 var(--sc-6); font-size: 1.15rem; }
.tp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.tp path { fill: none; stroke: var(--sc-accent); stroke-width: 2.5; stroke-linecap: round; }
.foot { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-7); align-items: center; justify-content: space-between; padding: var(--sc-5) var(--sc-gutter) var(--sc-5) calc(var(--sc-gutter) + 8px); border-top: 1px solid rgb(255 255 255 / 0.16); font-size: var(--sc-t-sm); color: #dbe5ff; }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot a[aria-current] { font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; }
.foot .brand img { width: 32px; height: 32px; }

@media (max-width: 860px) {
  .bar__call { display: none; }
  .brand span { font-size: 0.95rem; }
  .duo, .plans { grid-template-columns: 1fr; gap: var(--sc-8); }
  .ways { grid-template-columns: 1fr; gap: var(--sc-6); }
  .plane--mid { left: -98vw; width: 262vw; bottom: 6vh; }
  .plane--fore img { object-position: 78% 0%; }
  .plane--fore { inset: -2% -40% 30% -10%; }
  .street__scrim { background: linear-gradient(to bottom, color-mix(in oklab, #071442 70%, transparent) 0%, color-mix(in oklab, #071442 45%, transparent) 55%, transparent 75%); }
  .street__copy, .lost__copy, .gate__a { top: 6.2rem; }
  h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .sub { font-size: 1.05rem; }
  .files { bottom: 2rem; }
  .files li { font-size: 1.1rem; padding: var(--sc-2) 0; }
  .night { align-items: start; }
  .night__mask { background: linear-gradient(180deg, color-mix(in oklab, #050a1c 78%, transparent) 0%, color-mix(in oklab, #050a1c 50%, transparent) 50%, transparent 72%); }
  .night__copy { padding-top: 6rem; }
  .team-photo { aspect-ratio: 4 / 3; }
  .close .btn--ghost { display: none; }
  .foot { justify-content: flex-start; }
}
@media (max-width: 400px) { .bar .btn { padding: 0 var(--sc-3); } }
@media (prefers-reduced-motion: reduce) {
  .pulse { display: none; }
  .line { transition: none; }
  .gate__door, .gate__status { display: none; }
  .files li { opacity: 1; transform: none; }
  .gate .sc-stage, .lost .sc-stage { --k: 1; }
}