/* Shared cool neutrals, an inset studio console, and a quieter pipeline. */
:root {
  --accent: #3468ac;
  --accent-2: #244b7a;
  --cloud-rain-color-paper: #264b54;
  --cloud-rain-color-night: #c0ced4;
}
html[data-skin="nocturne"] { --accent: #72a5df; --accent-2: #4779b1; }
#packs .pack-rail-card { --pack-card-bg: #eef0f3; }
#cases,
.site-footer a[href="#cases"] {
  display: none !important;
}
.site-stars,
.site-speckles,
.site-rainfall,
.footer-meteors { display: none !important; }
.site-footer > .footer-stars {
  z-index: 4 !important;
  pointer-events: none;
}
.cloud-rain { z-index: 2 !important; }
.page-stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}
html[data-skin="nocturne"] .page-stars { display: block; }
html:not([data-skin="nocturne"]) .page-stars { display: none; }
.hero-stars {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
}
html[data-skin="nocturne"] .hero-stars { display: block; }
html:not([data-skin="nocturne"]) .hero-stars { display: none; }
main { position: relative; z-index: auto !important; }
.section > .container { position: relative; z-index: 5 !important; }
.hero, #packs, #process, #process-radial, #taste-stage, #work, #studio-console { isolation: auto !important; }
.site-footer { isolation: auto !important; z-index: auto !important; }
.hero-sky-near-mask { z-index: 2 !important; }
.hero-product-stage { z-index: 4; }
.hero-copy { z-index: 6; }
.hero-actions, .hero .button, .hero-services { position: relative; z-index: 7; }
.hero::after { z-index: 0; }
.work-tile, .taste-card, .pack-rail-card, .sc-visual, .studio-panel-frame, .pr-board {
  position: relative;
  z-index: 6;
  isolation: isolate;
}

html:not([data-skin="nocturne"]) body { color: var(--muted); background: var(--paper); }
html:not([data-skin="nocturne"]) h1,
html:not([data-skin="nocturne"]) h2,
html:not([data-skin="nocturne"]) h3 { color: var(--ink); }
#process-radial .eyebrow,
#packs .eyebrow {
  font-family: var(--mono);
  font-size: var(--type-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted) !important;
}

/* Shared display scale. Taste & Judgement titles stay on their own sheet. */
#work .work-head-title h2,
#packs .packs-head h2,
#compare .compare-lite-intro h2,
#process .pipeline-heading h2,
#process-radial .pr-heading h2,
#partnership .partnership-copy h2 {
  font-size: var(--section-display-size);
  line-height: .94 !important;
  letter-spacing: -.055em !important;
}
#compare .compare-lite-intro h2 em { display: block; }

#faq.studio-panel-band {
  padding-block: clamp(34px, 4.5vw, 64px);
  scroll-margin-top: 82px;
}
#faq .studio-panel-alias { scroll-margin-top: 82px; }
#faq .studio-panel-container { width: min(1280px, calc(100% - clamp(32px, 7vw, 112px))); }
#faq .studio-panel-frame {
  --studio-h: clamp(560px, 66vh, 660px);
  height: var(--studio-h); min-height: var(--studio-h); max-height: var(--studio-h);
  padding: 14px; border: 0; border-radius: 28px;
  background: linear-gradient(145deg, #2b384a, #152234 42%, #0d1727);
  box-shadow: 0 22px 48px #0713232e, 0 4px 10px #07132318;
}
#faq .studio-panel-grid { grid-template-columns: minmax(0, 1fr) 174px; gap: 14px; }
#faq .studio-panel-main {
  height: 100%; min-height: 0; padding: clamp(26px, 3.2vw, 42px);
  border: 0; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 0%, #20334c66, transparent 70%), #091422;
  box-shadow: inset 0 2px 12px #0005;
}
#faq .studio-panel-view { position: absolute; inset: 0; overflow: hidden; gap: 26px; }
#faq .studio-panel-head { max-width: 100%; gap: 10px; }
#faq .studio-panel-kicker { color: #a4b8cf; font-size: .58rem; }
#faq .studio-panel-head h2 { font-size: clamp(1.65rem, 2.5vw, 2.15rem); color: #ccd6e3; }
#faq .studio-panel-proof { height: 100%; gap: 26px; }
#faq .client-review-stage[data-client-reviews] { height: 190px !important; }
#faq .client-review { align-content: center !important; gap: 22px !important; }
#faq .client-review blockquote {
  order: -1; max-width: 27ch !important;
  font-size: clamp(2rem, 3.4vw, 2.8rem) !important; line-height: 1.12 !important;
}
#faq .client-review-identity strong { font-size: .8rem; letter-spacing: 0; }
#faq .client-review-identity span { color: #a7b6c9; font-size: .73rem; }
#faq .client-review-avatar { width: 36px; height: 36px; border-color: #a4b8cf55; }
#faq .studio-panel-side { padding: 20px 0 12px; border: 0; border-left: 0; align-content: center; gap: 26px; }
#faq .studio-panel-side::before { display: none !important; content: none !important; }
#faq .studio-panel-modes { padding: 6px; gap: 6px; background: #070f1b; border: 1px solid #ffffff12; border-radius: 10px; }
#faq .studio-panel-mode {
  min-height: 42px; padding: 10px 12px; border-radius: 5px;
  border: 1px solid #ffffff12; background: linear-gradient(#233044, #192536);
  color: #b9c7d8; font-size: .75rem; box-shadow: inset 0 1px #ffffff09;
}
#faq .studio-panel-mode[aria-selected="true"] { background: linear-gradient(#edf1f6, #cbd5e1); border-color: #f0f4f8; color: #10233c; }
#faq .studio-panel-mode-dot { background: #8197b0; border-color: transparent; box-shadow: none; }
#faq .studio-panel-mode[aria-selected="true"] .studio-panel-mode-dot { background: #3468ac; box-shadow: none; }
#faq .studio-panel-nav { max-width: 300px; }
#faq .studio-panel-nav-btn { border-radius: 7px; background: #172638; color: #d2deec; }
#faq .studio-panel-nav-btn:hover, #faq .studio-panel-nav-btn:focus-visible { background: #294667; border-color: #8bacd0; }
#faq .studio-panel-progress i { background: #91b3d8; }
#faq .faq-split { min-height: 265px; }
#faq .faq-index button[aria-selected="true"] { background: #213952; border-color: #597b9f; }
#faq .studio-panel-mode:focus-visible { outline: 2px solid #8eabc9; outline-offset: 3px; }

/* Keep the comparison imagery comfortably inside its editorial stage. */
#compare.compare-lite { position: relative; z-index: auto; isolation: auto; }
#compare .compare-lite-shell { position: relative; z-index: 3; }
#compare .compare-lite-stage {
  width: min(1000px, 100%);
  margin-inline: auto;
  column-gap: clamp(14px, 2vw, 26px);
}
#compare .compare-lite-shot,
#compare .compare-lite-col-label,
#compare .compare-lite-points {
  width: min(300px, 100%);
  justify-self: center;
}
#compare .compare-lite-shot { max-height: 220px; }

#process.process-desk { --signal: #4b6f98; --process-ground: #F7F8FA; padding-block: clamp(52px, 5.3vw, 76px); }
html[data-skin="nocturne"] #process.process-desk { --signal: #6688b0; --process-ground: var(--paper); }
html[data-skin="nocturne"] #process .process-stage .process-stage-node {
  background: #13243a; color: #c0d2e6; border-color: #3c536d;
  box-shadow: inset 0 1px 0 #ffffff0d, 0 6px 16px #0003;
}
html[data-skin="nocturne"] #process .process-stage.is-active .process-stage-node {
  border-color: #7ea7d6; box-shadow: 0 0 0 2px #7ea7d624;
}
html[data-skin="nocturne"] #process .process-stage--ship.is-active .process-stage-node {
  color: #d6e2ee; border-color: #8da7c1; box-shadow: 0 0 0 3px #8da7c124;
}
#process .process-glow-line { stroke-width: 2; }
#process .process-glow-bloom { stroke-width: 5; opacity: .09; }
#process .process-glow-head { fill: #8da7c1; stroke: #dce8f4; }
#process .process-stage { color: var(--ink); }
#process .process-stage-node,
#process .process-stage.is-active .process-stage-node,
#process .process-stage.is-lit .process-stage-node { color: #23466f; }
#process .process-stage .ps-draw { stroke-dashoffset: 0; opacity: .85; }
#process .process-stage.is-active .ps-draw { opacity: 1; }
#process .process-stage-num,
#process .process-stage-label,
#process .process-stage p { position: relative; background: var(--process-ground); box-shadow: 0 0 0 5px var(--process-ground); border-radius: 3px; }
#process .process-stage p { color: var(--muted); }
#process .process-decor { display: block; opacity: .76; }
#process .process-orbit { opacity: .48; }
#process .process-scatter { opacity: .18; }
#process .process-spark { opacity: .68; }
#process .process-stage--ship .process-stage-node { position: relative; }
#process .process-stage--ship.is-active .process-stage-node {
  background: #122941; color: #d6e2ee; border-color: #8da7c1;
  box-shadow: 0 8px 24px #152b4320, 0 0 0 3px #8da7c124;
}
#process .process-stage--ship.is-active .process-stage-node::after {
  content: ""; position: absolute; inset: -6px; border: 1px solid #8da7c1;
  border-radius: 50%; animation: ship-confirm 1.6s ease-out both;
}
@keyframes ship-confirm { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.4); opacity: 0; } }
@media (min-width: 981px) {
  #process .process-rail { min-height: clamp(345px, 37vw, 420px); }
  #process .process-glow-svg { height: clamp(280px, 30vw, 345px); }
  #process .process-stage { width: min(134px, 12vw); --node: clamp(54px, 5.4vw, 68px); }
}
@media (max-width: 860px) {
  #work .work-head-title h2,
  #packs .packs-head h2,
  #compare .compare-lite-intro h2,
  #process .pipeline-heading h2,
  #process-radial .pr-heading h2,
  #partnership .partnership-copy h2 {
    font-size: 40px;
    line-height: .96 !important;
  }
  #faq.studio-panel-band { scroll-margin-top: 70px; }
  #faq .studio-panel-alias { scroll-margin-top: 70px; }
  #faq .studio-panel-container { width: calc(100% - 28px); }
  #faq .studio-panel-frame {
    --studio-h: 560px;
    height: var(--studio-h); min-height: var(--studio-h); max-height: var(--studio-h);
    padding: 10px; border-radius: 18px;
  }
  #faq .studio-panel-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 10px; }
  #faq .studio-panel-side { padding: 0; }
  #faq .studio-panel-side::before { display: none !important; content: none !important; }
  #faq .studio-panel-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #faq .studio-panel-mode { padding: 10px 4px; font-size: .7rem; }
  #faq .studio-panel-main { height: 100%; padding: 24px 20px; min-height: 0; }
  #faq .client-review-stage[data-client-reviews] { height: 205px !important; }
  #faq .client-review blockquote { font-size: clamp(1.9rem, 6vw, 2.5rem) !important; }
  #faq .studio-panel-head h2 { font-size: 1.65rem; }
  #faq .studio-panel-nav { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #process .process-stage.is-active .ps-pulse,
  #process .process-stage--ship.is-active .process-stage-node::after { animation: none; }
}