/*
 * VSP.REST — Space-inspired visual system, 2026-10-18.
 * Original VSP branding and content. No Spaceship assets, fonts or trademarks.
 * Layered on top of site.css so all 14 original pages and translations keep
 * their existing HTML, semantics, navigation and forms.
 */
:root {
  color-scheme: dark;
  --paper: #0c1120;
  --ink: #f4f6ff;
  --lime: #94adff;
  --muted: #b2bfd6;
  --line: #313e56;
  --darkline: #394963;
  --radius: 22px;
  --width: 1320px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--paper);
}
html { scroll-padding-top: 100px; }
body {
  min-width: 320px;
  background: radial-gradient(ellipse 70% 680px at 50% -190px, #273967 0%, transparent 75%), var(--paper);
  color: var(--ink);
}
::selection { background: #a8b9ff; color: #0c1120; }
:focus-visible { outline: 3px solid #b5ccff; outline-offset: 4px; }
a { text-decoration-color: #839ce3; }
a:hover { text-decoration-color: #b5c7ff; }
p { line-height: 1.7; }
h1, h2, h3 { font-weight: 650; letter-spacing: -.055em; text-wrap: balance; }
h2 { font-size: clamp(2.4rem, 4.4vw, 4.7rem); }
.serif { font-family: inherit; font-style: normal; font-weight: 600; color: #a9bbff; }
.wrap { width: min(calc(100% - 80px), var(--width)); }

/* Navigation floats above the content, but never obscures the mobile menu. */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: rgba(12, 17, 32, .91);
  border-bottom: 1px solid rgba(175, 194, 243, .17);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.header-inner { min-height: 82px; gap: 24px; }
.brand { gap: 12px; }
.brand-mark {
  width: 45px; height: 45px; padding: 0;
  transform: none; border: 1px solid #809bff; border-radius: 14px;
  background: linear-gradient(145deg, #5569ff, #3846a3);
  color: #fff; box-shadow: 0 7px 24px #455aff48;
  font-size: 24px; letter-spacing: -.15em;
}
.brand-name { color: #b2bfd6; font-size: 10px; letter-spacing: .11em; line-height: 1.35; }
.brand-name strong { color: #fff; font-size: 22px; letter-spacing: -.04em; }
.nav { gap: clamp(12px, 2vw, 28px); }
.nav a { font-weight: 550; color: #cbd4e7; transition: color .2s; }
.nav a:hover, .nav a[aria-current=page] { color: #fff; }
.nav a[aria-current=page] { box-shadow: inset 0 -1px #8fa6ff; }
.nav .nav-cta {
  color: #081126; border: 1px solid #94adff;
  background: #94adff; border-radius: 999px;
  padding: 13px 20px; transition: background .2s, transform .2s;
}
.nav .nav-cta:hover { color: #081126; background: #b5c6ff; transform: translateY(-1px); }
.menu-toggle, .language-button { color: var(--ink); background: #192338; border: 1px solid var(--line); }
.menu-toggle { border-radius: 12px; padding: 10px 12px; min-height: 44px; }
.language-button:hover, .menu-toggle:hover { background: #253552; }

/* Hero uses a luminous graphic system, not downloaded third-party imagery. */
.hero { position: relative; padding: clamp(68px, 7vw, 115px) 0 62px; overflow: clip; }
.hero::before {
  content: ""; position: absolute; pointer-events: none;
  inset: -100px 0 auto; height: 520px;
  background: radial-gradient(closest-side at 76% 42%, #536bff1c, transparent 95%);
}
.hero .wrap { position: relative; }
.hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .7fr); gap: clamp(35px, 5vw, 90px); align-items: center; }
.eyebrow { color: #a5b9ff; font-size: 12px; letter-spacing: .17em; }
.eyebrow::before { background: #8a9fff; box-shadow: 0 0 17px #7c93ff; }
.hero h1 { font-size: clamp(4.2rem, 7.8vw, 8.5rem); line-height: .98; letter-spacing: -.085em; }
.hero h1 em {
  font-family: inherit; font-style: normal; font-weight: 700;
  color: #b2c4ff;
  background: linear-gradient(95deg, #a6bbff 8%, #d1c4ff 54%, #68dfd4 97%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-summary { max-width: 440px; }
.hero-summary p { color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); }
.hero-summary p:first-child { color: #f4f6ff; font-size: clamp(19px, 1.75vw, 25px); font-weight: 550; line-height: 1.35; }
.button {
  color: #0b1530; background: #94adff;
  border-color: #94adff; box-shadow: 0 7px 24px #5771fa25;
  font-weight: 700; transition: background .2s, transform .2s, box-shadow .2s;
}
.button:hover { color: #0b1530; background: #bfd0ff; box-shadow: 0 12px 32px #5771fa38; }
.button.outline { color: var(--ink); border-color: #586c91; background: #1b2841; }
.button.outline:hover { color: #fff; background: #273b61; }
.hero-stage {
  margin-top: clamp(46px, 7vw, 86px);
  background: radial-gradient(ellipse at 76% 48%, #304592 0%, #182543 36%, #101b32 68%, #101725 100%);
  border: 1px solid #415379; border-radius: 30px;
  box-shadow: 0 26px 110px #030715a0, inset 0 1px #a9c0ff20;
  color: var(--ink); min-height: 405px;
}
.hero-stage::after {
  content: ""; position: absolute; pointer-events: none;
  inset: 0; border-radius: inherit; opacity: .24;
  background-image: radial-gradient(#b0c2fa 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000);
  mask-image: linear-gradient(90deg, transparent 25%, #000);
}
.stage-copy { padding: clamp(32px, 4vw, 58px); }
.stage-copy p { font-weight: 550; line-height: 1.13; font-size: clamp(30px, 3.5vw, 49px); }
.stage-copy .serif { color: #b4c5ff; }
.stage-small, .stage-caption { color: #afc1df; }
.orbit { isolation: isolate; }
.orbit::before, .orbit::after { border-color: #799cff56; box-shadow: 0 0 65px #526ef414; }
.orbit::after { border-style: dashed; }
.orbit-core {
  color: #fff; background: linear-gradient(145deg, #7294ff, #4656d8);
  box-shadow: 0 0 90px #6887ff7a, inset 0 2px #ffffff55;
}
.orbit-label { background: #182947ed; color: #f5f7ff; border-color: #6783b47d; box-shadow: 0 15px 35px #02081466; }
.orbit-label span { color: #abc2f5; }
.hero-foot { color: #9caec8; }

/* Spaceship-inspired service tiles with real, existing service destinations. */
main > .hero + .section > .wrap {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
main > .hero + .section .section-head { grid-column: 1 / -1; margin-bottom: 24px; }
main > .hero + .section .service-row {
  position: relative; min-height: 215px; display: grid;
  grid-template-columns: minmax(0, 1fr) 50px; grid-template-rows: auto auto 1fr;
  align-items: start; gap: 14px; padding: clamp(22px, 3vw, 34px);
  border: 1px solid #34435f; border-radius: 23px;
  background: linear-gradient(145deg, #1b2944, #141e32 70%);
  box-shadow: inset 0 1px #ffffff0c;
  transition: border-color .2s, background .2s, transform .2s;
}
main > .hero + .section .service-row:last-child { border: 1px solid #34435f; }
main > .hero + .section .service-row:hover { border-color: #829cff; background: linear-gradient(145deg, #273d62, #182440); transform: translateY(-3px); }
main > .hero + .section .service-row .index { grid-column: 1; grid-row: 1; color: #a6baff; font-weight: 700; }
main > .hero + .section .service-row h3 { grid-column: 1 / -1; grid-row: 2; max-width: 440px; color: #f7f8ff; font-size: clamp(25px, 2.35vw, 35px); }
main > .hero + .section .service-row p { grid-column: 1 / -1; grid-row: 3; max-width: 530px; color: #afbdd2; }
main > .hero + .section .service-row .round-arrow { grid-column: 2; grid-row: 1; justify-self: end; border-color: #6983b0; }
.service-row:hover .round-arrow { background: #94adff; color: #0b1530; }

.section { padding: clamp(68px, 7vw, 110px) 0; }
.section.border { border-color: var(--line); }
.section-head { gap: clamp(35px, 6vw, 100px); }
.section-head p, .section-intro, .page-hero .lead { color: var(--muted); }
.text-link { color: #c1cfff; }
.project { padding: 10px; border: 1px solid #33425e; border-radius: 26px; background: #141f33; transition: border-color .2s, transform .2s; }
.project:hover { transform: translateY(-3px); border-color: #839dff; }
.project-visual { border-radius: 18px; }
.project-visual.shift { color: #f2f6ff; background: linear-gradient(145deg, #1b4b53, #113047 58%, #121e3e); }
.project-visual.avenqo { color: #f2f6ff; background: linear-gradient(145deg, #4a4c8f, #232a58 62%, #182039); }
.shift .visual-word::before { border-color: #83e5d8; border-top-color: #409cbf; }
.avenqo .visual-word::before { color: #8caaff; }
.project-meta, .project-note { padding-inline: 13px; }
.project-meta p, .project-note { color: #adbad0; }
.badge { background: #15243fe8; color: #e8efff; border: 1px solid #6c80b5; }
.round-arrow { border-color: #667794; }
.film-poster { border-radius: 19px; border: 1px solid #39496b; }
.film h3, .journal-item h3 { color: #f5f7ff; }
.film p, .journal-item p { color: #aabbd4; }
.journal-item { padding: 27px 0; }
.journal-item .category { color: #a5b9ff; }

.dark { background: linear-gradient(130deg, #162342, #101a31 55%, #162046); color: var(--ink); border-block: 1px solid #2f3f62; }
.method-list li { border-color: #41557b; }
.method-list li > span { color: #acc1ff; }
.method-list p { color: #b7c4d9; }
.cta-band { color: #fff; background: linear-gradient(110deg, #3647b2, #5b63cc 52%, #286780); }
.cta-band .serif { color: #ddedff; }
.cta-band .button { color: #10234a; background: #f0f4ff; border-color: #f0f4ff; }
.cta-band .button:hover { background: #dce7ff; }
.site-footer { color: var(--ink); background: #080e1a; border-top: 1px solid #33405c; }
.footer-top p, .footer-top h3, .footer-bottom { color: #a5b5cb; }
.footer-links a:hover, .footer-email:hover { color: #c0d0ff; }
.footer-bottom { border-color: #313d59; }
.wordmark-band { border-color: #303d57; color: #526caa; }

/* The existing localized language picker, intake and project form stay functional. */
.language-status { color: #e2e8ff; background: #1d2b45; }
.language-dialog, .intake-dialog { color: var(--ink); background: #141f34; border-color: #435574; box-shadow: 0 25px 100px #02050acc; }
.language-dialog::backdrop, .intake-dialog::backdrop { background: #050915b3; }
.dialog-close { color: #fff; border-color: #637594; background: #1a2b48; }
.language-search-label input, .intake-form textarea, .intake-summary,
.field input, .field select, .field textarea {
  color: #f3f6ff; background: #0f1a2e; border: 1px solid #657794;
}
.language-search-label input::placeholder, .field input::placeholder,
.field textarea::placeholder, .intake-form textarea::placeholder { color: #a8b8d2; opacity: 1; }
.language-auto { color: #0c1730; background: #a1b7ff; }
.language-note, .intake-disclosure, .intake-privacy, .handoff-note { color: #b5c4db; }
.language-option, .intake-tabs button { color: #f4f6ff; }
.language-option:hover, .language-option[aria-pressed=true], .intake-tabs button[aria-pressed=true] { background: #354b73; color: #fff; border-color: #849fff; }
.intake-tabs button { background: #1b2b47; border-color: #455c80; }
.intake-launch { color: #fff; background: #3748b0; border-color: #839dff; box-shadow: 0 9px 36px #030814a6; }
.intake-message { background: #243554; color: #f4f6ff; }
.intake-message.user { background: #4458a1; }
.intake-status { color: #bde9ce; }
.intake-bottom { border-color: #435373; }
.intake-bottom button { color: #b9c9fa; }
.handoff-contacts { border-color: #475777; }
.brief-form, .brief-preview, .article aside { color: var(--ink); background: #18243a; border: 1px solid #344763; }
.faq details, .step { border-color: var(--line); }
:where(input, select, textarea):focus-visible { outline-color: #a8bfff; }
[hidden], .nav[hidden] { display: none !important; }

/* Small screens remain readable in LTR and RTL, without horizontal scrolling. */
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 32px; }
  .hero h1 { font-size: clamp(3.6rem, 7.9vw, 7rem); }
}
@media (max-width: 800px) {
  .wrap { width: calc(100% - 36px); }
  .header-inner { min-height: 76px; gap: 10px; }
  .nav { background: #162239; border: 1px solid #455775; border-radius: 17px; padding: 14px 18px; align-items: stretch; box-shadow: 0 18px 45px #02071388; }
  .nav a { min-height: 44px; display: flex; align-items: center; padding: 10px; }
  .nav .nav-cta { justify-content: center; }
  .hero { padding: 58px 0 36px; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero h1 { font-size: clamp(3.1rem, 12.3vw, 6rem); }
  .hero-summary { max-width: 680px; }
  .hero-stage { grid-template-columns: 1fr; min-height: 0; margin-top: 38px; }
  .stage-copy { padding: 28px; min-height: 210px; }
  .stage-copy p { margin: 22px 0; }
  .orbit { min-height: 300px; }
  .ol1 { left: 6%; top: 17%; } .ol2 { right: 5%; top: 34%; } .ol3 { bottom: 8%; left: 17%; }
  .section-head { gap: 22px; }
}
@media (max-width: 650px) {
  main > .hero + .section > .wrap { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(3rem, 12vw, 5.1rem); }
  .hero-stage { border-radius: 22px; }
  .orbit::after { width: min(430px, 93vw); height: min(430px, 93vw); }
  .orbit::before { width: min(280px, 65vw); height: min(280px, 65vw); }
  .orbit-core { width: 110px; height: 110px; font-size: 29px; }
  .orbit-label { padding: 10px 12px; font-size: 11px; }
  .ol1 { left: 0; top: 12%; } .ol2 { right: 0; top: 33%; } .ol3 { left: 13%; bottom: 5%; }
  .service-row:hover, .project:hover { transform: none; }
  .brand-mark { width: 40px; height: 40px; }
  .brand-name strong { font-size: 20px; }
  .site-footer { padding-bottom: 108px; }
}
@media (max-width: 380px) {
  .wrap { width: calc(100% - 28px); }
  .brand-name strong { font-size: 18px; }
  .brand-name { font-size: 8px; }
  .hero h1 { font-size: 12vw; }
  .orbit-label { max-width: 47%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* VSP-UI-001 mobile toolbar: preserve a single compact top row and a real menu panel. */
@media (max-width: 800px) {
  .header-inner { position: relative; flex-wrap: nowrap; min-height: 74px; gap: 8px; }
  .brand { order: 1; gap: 9px; min-width: 0; }
  .brand-name { font-size: 0; letter-spacing: 0; }
  .brand-name strong { font-size: 19px; white-space: nowrap; }
  .language-button { order: 2; margin-inline-start: auto; flex-shrink: 0; }
  .menu-toggle {
    order: 3; flex-shrink: 0; width: 46px; min-width: 46px;
    font-size: 0; padding: 8px; margin: 0; text-align: center;
  }
  .menu-toggle span { font-size: 20px; }
  .nav {
    order: 4; position: absolute; inset-block-start: calc(100% - 1px);
    inset-inline: 0; width: 100%;
    max-height: calc(100dvh - 84px); overflow-y: auto;
    z-index: 2; margin: 0;
  }
}
@media (max-width: 380px) {
  .brand-mark { width: 37px; height: 37px; }
  .brand-name strong { font-size: 17px; }
  .language-button { padding-inline: 9px; }
}

/* VSP-UI-001 unobtrusive mobile intake: retain accessible label, avoid covering the primary CTA. */
@media (max-width: 650px) {
  .intake-launch {
    width: 52px; height: 52px; min-width: 52px; max-width: 52px;
    display: grid; place-items: center; font-size: 0; line-height: 1;
    padding: 0; border-radius: 50%; inset-inline-end: 12px;
    box-shadow: 0 7px 25px #050916af;
  }
  .intake-launch::before { content: ""; width: 25px; height: 25px; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M5%205.5h14v10.5H9l-4%203.3V5.5z'%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'1.8'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M8%209h8M8%2012h5'%20stroke%3D'%23fff'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%2F%3E%3C%2Fsvg%3E"); }
}

/* VSP-UI-001 accessibility: preserve compact typography when promoting h3 to h2. */
.footer-top h2 {
  font-size: 11px; line-height: 1.35; font-weight: 650;
  letter-spacing: .12em; text-transform: uppercase;
  color: #a5b5cb; margin-bottom: 25px;
}
.project-meta h2 { font-size: 25px; }
.film h2 { font-size: 24px; margin: 22px 0 10px; color: #f5f7ff; }
.journal-item h2 { font-size: 30px; max-width: 440px; color: #f5f7ff; }
@media (max-width: 800px) {
  .project-meta h2 { font-size: 23px; }
  .journal-item h2 { font-size: 26px; }
}
@media (max-width: 560px) {
  .film h2 { font-size: 25px; }
  .footer-top h2 { font-size: 10px; }
}

/* Callouts are non-landmark notes, so article sections have no nested complementary landmark. */
.article .article-note {
  padding: 30px; margin: 40px 0; border-radius: 15px;
  color: var(--ink); background: #18243a; border: 1px solid #344763;
}
.article .article-note p { margin: 0; font-size: 18px; color: #b6c6dd; }
@media (max-width: 560px) { .article .article-note { padding: 24px; } }