/* Launch layer: calmer hierarchy, better touch targets, and lightweight depth. */
:root {
  --launch-max: 1240px;
  --launch-gutter: clamp(18px, 4vw, 48px);
  --launch-line: rgba(164, 240, 255, 0.14);
}

[data-theme="dark"] {
  --bg-void: #080b10;
  --bg-void2: #0d1219;
  --bg-space: #101820;
  --bg-graph: #141e28;
  --bg-card: #151f2a;
  --bg-card2: #1b2733;
  --bg-card3: #222f3b;
  --bg-overlay: #202d39;
  --c1: #62d9e8;
  --c1d: rgba(98, 217, 232, 0.09);
  --c1g: rgba(98, 217, 232, 0.16);
  --c1h: rgba(98, 217, 232, 0.055);
  --c1hot: rgba(98, 217, 232, 0.26);
  --c2: #8c9eff;
  --c2d: rgba(140, 158, 255, 0.1);
  --c2g: rgba(140, 158, 255, 0.17);
  --c2hot: rgba(140, 158, 255, 0.28);
  --c3: #76ddb0;
  --c3d: rgba(118, 221, 176, 0.1);
  --c-blue: #4496ff;
  --c-blued: rgba(68, 150, 255, 0.1);
  --c-pink: #ef789d;
  --ink1: #f4f7fa;
  --ink2: #b6c2ce;
  --ink3: #8593a2;
  --ink4: #7b8998;
  --bdr: rgba(208, 226, 238, 0.1);
  --bdr-c: rgba(98, 217, 232, 0.28);
  --bdr-cd: rgba(98, 217, 232, 0.13);
  --bdr-chot: rgba(98, 217, 232, 0.42);
  --bdr-v: rgba(140, 158, 255, 0.22);
  --nav-bg: rgba(8, 11, 16, 0.88);
  --nav-bgs: rgba(8, 11, 16, 0.97);
  --card-bg: rgba(21, 31, 42, 0.78);
  --card-bgh: rgba(25, 38, 50, 0.94);
  --form-bg: #0f171f;
  --alt-bg: linear-gradient(135deg, #0d1219 0%, #111b24 50%, #0d1219 100%);
  --sh-sm: 0 4px 24px rgba(0, 0, 0, 0.34);
  --sh-md: 0 16px 50px rgba(0, 0, 0, 0.42);
  --sh-lg: 0 28px 80px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
  --bg-void: #f5f7fa;
  --bg-void2: #eef2f5;
  --bg-space: #e8eef2;
  --bg-graph: #e3ebef;
  --bg-card: #ffffff;
  --bg-card2: #f2f6f8;
  --bg-card3: #e8eef2;
  --bg-overlay: #edf2f5;
  --c1: #0e7490;
  --c1d: rgba(14, 116, 144, 0.09);
  --c1g: rgba(14, 116, 144, 0.15);
  --c1h: rgba(14, 116, 144, 0.045);
  --c1hot: rgba(14, 116, 144, 0.23);
  --c2: #5261c7;
  --c2d: rgba(82, 97, 199, 0.1);
  --c2g: rgba(82, 97, 199, 0.16);
  --c2hot: rgba(82, 97, 199, 0.24);
  --c3: #047857;
  --c3d: rgba(4, 120, 87, 0.1);
  --c-blue: #2563eb;
  --c-blued: rgba(37, 99, 235, 0.1);
  --c-pink: #be4165;
  --ink1: #10202b;
  --ink2: #405464;
  --ink3: #617482;
  --ink4: #526979;
  --bdr: rgba(16, 32, 43, 0.11);
  --bdr-c: rgba(14, 116, 144, 0.28);
  --bdr-cd: rgba(14, 116, 144, 0.15);
  --bdr-chot: rgba(14, 116, 144, 0.42);
  --bdr-v: rgba(82, 97, 199, 0.2);
  --nav-bg: rgba(255, 255, 255, 0.9);
  --nav-bgs: rgba(255, 255, 255, 0.98);
  --card-bg: rgba(255, 255, 255, 0.9);
  --card-bgh: #ffffff;
  --form-bg: #f6f9fa;
  --alt-bg: linear-gradient(135deg, #eef2f5 0%, #e8eef2 50%, #eef2f5 100%);
  --sh-sm: 0 4px 24px rgba(16, 32, 43, 0.08);
  --sh-md: 0 16px 50px rgba(16, 32, 43, 0.12);
  --sh-lg: 0 28px 80px rgba(16, 32, 43, 0.16);
}

html {
  scroll-behavior: smooth;
}
body {
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
body.nav-open {
  overflow: hidden;
}
::selection {
  color: #001014;
  background: var(--c1);
}

#preloader {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(124, 58, 237, 0.14), transparent 34%),
    radial-gradient(circle at 18% 18%, rgba(0, 240, 255, 0.06), transparent 30%),
    linear-gradient(180deg, #050a14 0%, var(--bg-void) 100%);
  overflow: hidden;
  isolation: isolate;
  transition:
    opacity 0.42s var(--cin),
    visibility 0.42s;
}
#preloader::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: min(520px, 72vw);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--bdr-cd), transparent);
  pointer-events: none;
  opacity: 0.7;
}
.pre-grid {
  opacity: 0.16;
}
#preloader .pre-grid {
  background-image:
    radial-gradient(circle at 14% 22%, rgba(95, 247, 255, 0.72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 18%, rgba(154, 131, 255, 0.68) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 76%, rgba(95, 247, 255, 0.54) 0 1px, transparent 1.5px),
    radial-gradient(circle at 23% 80%, rgba(154, 131, 255, 0.58) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 30%, rgba(244, 251, 255, 0.48) 0 1px, transparent 1.5px);
  background-size: auto;
  background-repeat: no-repeat;
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 0.24;
}
.pre-inner {
  gap: 24px;
  width: min(390px, calc(100% - 32px));
  padding: 28px 28px 26px;
  transition:
    opacity 0.34s var(--cin),
    transform 0.42s var(--cin);
}
#preloader.hidden .pre-inner {
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
}
.pre-logo-wrap {
  width: 148px;
  height: 148px;
}
.pre-logo-img {
  width: 112px;
  height: 112px;
}
.pre-bar-wrap {
  width: 100%;
}
.pre-bar-track {
  height: 5px;
  border-radius: 99px;
}
.pre-logo-img {
  filter: drop-shadow(0 8px 16px rgba(0, 240, 255, 0.12));
}
.pre-orbit {
  inset: -10px;
}
.pre-kicker {
  color: #5ff7ff;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.9px;
}
.pre-subline {
  color: #c3d8de;
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.25px;
}
.pre-bar-label {
  color: rgba(201, 225, 232, 0.74);
  font-size: 8px;
  font-weight: 600;
}
.pre-bar-track {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(137, 190, 202, 0.24);
}
.pre-bar-fill {
  background: linear-gradient(90deg, #5ff7ff, #8c7dff);
  box-shadow: 0 0 10px rgba(95, 247, 255, 0.25);
}
.pre-bar-meta {
  color: #b9cdd4;
  font-size: 8px;
  font-weight: 500;
}
.pre-pct {
  color: #5ff7ff;
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
}
.pre-kicker,
.pre-subline,
.pre-bar-label,
.pre-bar-meta,
.pre-pct {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Keep the launch screen readable even when the portfolio theme is light. */
[data-theme="light"] #preloader {
  color-scheme: dark;
}
[data-theme="light"] #preloader .pre-grid {
  opacity: 0.12;
}

@media (max-width: 420px) {
  .pre-inner {
    gap: 20px;
    width: min(calc(100% - 24px), 360px);
    padding: 24px 20px 22px;
  }
  .pre-logo-wrap {
    width: 128px;
    height: 128px;
  }
  .pre-logo-img {
    width: 96px;
    height: 96px;
  }
  .pre-kicker {
    font-size: 8.5px;
    letter-spacing: 1.45px;
  }
  .pre-subline {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .pre-bar-label,
  .pre-bar-meta {
    font-size: 7.5px;
    letter-spacing: 0.9px;
  }
  .pre-bar-label {
    margin-bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #preloader *,
  #preloader *::before,
  #preloader *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #preloader .pre-orbit-sweep {
    visibility: hidden;
  }
  #preloader .galaxy-rotation {
    visibility: hidden;
  }
}
.atm-vignette {
  background: radial-gradient(
    ellipse 85% 85% at 50% 50%,
    transparent 18%,
    rgba(8, 11, 16, 0.46) 100%
  );
}
[data-theme="light"] .atm-vignette {
  background: radial-gradient(
    ellipse 85% 85% at 50% 50%,
    transparent 18%,
    rgba(226, 235, 239, 0.18) 100%
  );
}
#scrollLine {
  background: linear-gradient(
    90deg,
    var(--c2),
    var(--c1),
    var(--c3),
    var(--c1)
  );
  box-shadow: 0 0 16px var(--c1g);
}
.hero::before {
  background-image:
    radial-gradient(circle at 80% 10%, var(--c1h) 0%, transparent 50%),
    radial-gradient(circle at 20% 70%, var(--c2d) 0%, transparent 50%);
}
.tt-track {
  background: var(--nav-bgs);
  border-color: var(--bdr-cd);
}
[data-theme="light"] .tt-track {
  background: var(--nav-bgs);
  border-color: var(--bdr-cd);
}
.tt-moon {
  color: var(--c1);
}
.tt-sun {
  color: var(--c3);
}
.tt-track::after {
  background: var(--c1);
  box-shadow:
    0 0 10px var(--c1),
    0 0 20px var(--c1g);
}
[data-theme="light"] .tt-track::after {
  background: var(--c3);
  box-shadow:
    0 0 10px var(--c3),
    0 0 20px var(--c3d);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent 0 49.95%,
      rgba(0, 240, 255, 0.018) 50%,
      transparent 50.05%
    ),
    linear-gradient(rgba(0, 240, 255, 0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.014) 1px, transparent 1px);
  background-size:
    100% 100%,
    100% 72px,
    72px 100%;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
  opacity: 0.35;
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--c3);
  outline-offset: 4px;
}

.nav-capsule {
  min-height: 58px;
  box-shadow: 0 14px 44px rgba(0, 0, 8, 0.22);
}
.nav-a,
.nav-hire-pill,
.nav-menu-btn,
.tt-btn,
.motion-toggle {
  min-height: 44px;
}
.nav-a {
  display: inline-flex;
  align-items: center;
}

.hero-stage {
  max-width: var(--launch-max);
}
.hero-content {
  max-width: 640px;
  min-width: 0;
  grid-column: 1;
}
.hh-name {
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.hh-sub {
  letter-spacing: 2.4px;
  color: var(--ink3);
}
.h-bio {
  max-width: 55ch;
  line-height: 1.75;
  text-wrap: pretty;
}
.h-actions {
  flex-wrap: wrap;
}
.btn-primary,
.btn-secondary {
  min-height: 48px;
}
.btn-primary {
  color: #061014;
  background: var(--c1);
  box-shadow: 0 8px 24px var(--c1d);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px var(--c1g);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 16px var(--c1d);
}

.hero-atmos {
  opacity: 0.68;
}
.ha-starfield {
  opacity: 0.48;
}
.ha-grid {
  opacity: 0.12;
}
.ha-planet-orbit {
  opacity: 0.55;
}
.ha-readout {
  opacity: 0.45;
}

.sec-header {
  max-width: 760px;
  margin-bottom: 46px;
}
.sec-label {
  gap: 10px;
}
.sl-text {
  letter-spacing: 2px;
}
.sl-value {
  background: transparent;
  box-shadow: none;
  color: var(--ink3);
}

.section > .container,
.process-band > .container,
.stats-sys > .container,
.marquee-sys > .container {
  width: min(100% - (var(--launch-gutter) * 2), var(--launch-max));
}
.section-head {
  max-width: 760px;
}
.section-title {
  text-wrap: balance;
}
.section-subtitle {
  max-width: 62ch;
  line-height: 1.75;
}

.svc-card,
.port-card,
.rv-card,
.stat-pod,
.process-step,
.ct-form-card,
.ct-info-card {
  box-shadow:
    0 18px 60px rgba(0, 0, 8, 0.16),
    inset 0 1px rgba(255, 255, 255, 0.035);
}
.svc-card:hover,
.port-card:hover,
.rv-card:hover,
.stat-pod:hover,
.process-step:hover {
  border-color: var(--bdr-c);
  box-shadow:
    0 18px 48px rgba(0, 0, 8, 0.22),
    0 0 0 1px var(--c1d),
    inset 0 1px rgba(255, 255, 255, 0.05);
  transform: translateY(-4px);
}
.svc-card,
.port-card,
.rv-card,
.stat-pod,
.process-step {
  border-radius: 14px;
}
.ct-form-card {
  border-radius: 18px;
}
.svc-card-glow {
  opacity: 0.58;
}
.svc-card,
.port-card,
.rv-card,
.stat-pod,
.process-step,
.ct-form-card {
  background-image: none;
}
.svc-card::before,
.port-card::before,
.rv-card::before,
.process-step::before {
  opacity: 0.65;
}
.port-visual img {
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.7s ease;
}
.port-card:hover .port-visual img {
  transform: scale(1.035);
  filter: saturate(1.08) contrast(1.03);
}
.port-lens {
  background: rgba(0, 0, 8, 0.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.port-card:hover {
  transform: translateY(-4px);
}
.ct-contact-item:hover {
  transform: translateX(2px);
}

.ct-contact-item strong {
  overflow-wrap: anywhere;
}

.csb-btn {
  min-height: 44px;
}

.fg label {
  cursor: text;
}

.fg label .optional-label {
  color: var(--ink4);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.15px;
  text-transform: none;
}

.fi-wrap:focus-within {
  border-color: var(--c1) !important;
  box-shadow:
    0 0 0 3px var(--c1d),
    0 0 32px var(--c1h);
}
.fi-wrap input,
.fi-wrap select,
.fi-wrap textarea {
  font-size: 16px;
}
.form-msg {
  min-height: 24px;
}

.wa-toggle,
.scroll-top {
  width: 48px;
  height: 48px;
}

@media (max-width: 1100px) {
  .scorpio-journey {
    display: none;
  }
}

@media (max-width: 900px) {
  .hero-stage {
    padding-left: var(--launch-gutter);
    padding-right: var(--launch-gutter);
  }
}

@media (max-width: 640px) {
  .hero-stage {
    padding-top: 112px;
  }
  .h-actions > * {
    flex: 1 1 100%;
  }
  .h-proof {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: start;
  }
  .process-grid {
    gap: 12px;
  }
  .process-step {
    min-height: 0;
  }
}

@media (max-width: 700px) {
  .port-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: calc(0px - var(--launch-gutter));
    padding: 0 var(--launch-gutter) 8px 0;
    scrollbar-width: thin;
  }
  .pf-pill {
    flex: 0 0 auto;
  }
  .sec-label {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .sl-value {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
  .sec-header {
    margin-bottom: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .delivery-standard .mqs-track,
  .wa-toggle {
    animation: none !important;
  }
}

.motion-reduced *,
.motion-reduced *::before,
.motion-reduced *::after {
  animation-play-state: paused !important;
  transition-duration: 0.001ms !important;
}

/* Product pass: a quieter, more considered interface with the work and offer first. */
html {
  scroll-padding-top: 96px;
}
body {
  background: var(--bg-void);
}
body::before {
  opacity: 0.16;
}
.atm-grain {
  opacity: 0.012;
  animation: none;
}
.atm-vignette {
  background: radial-gradient(
    ellipse 90% 90% at 50% 45%,
    transparent 28%,
    rgba(8, 11, 16, 0.32) 100%
  );
}
[data-theme="light"] .atm-vignette {
  background: radial-gradient(
    ellipse 90% 90% at 50% 45%,
    transparent 30%,
    rgba(226, 235, 239, 0.12) 100%
  );
}

#nav {
  top: 18px;
  width: min(calc(100% - (var(--launch-gutter) * 2)), 1240px);
}
#nav.scrolled {
  top: 12px;
}
.nav-capsule {
  min-height: 62px;
  padding: 10px 12px 10px 16px;
  border-radius: 16px;
  background: rgba(10, 15, 20, 0.78);
  border-color: rgba(208, 226, 238, 0.14);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
}
.nav-capsule::before {
  background: linear-gradient(
    90deg,
    transparent 8%,
    var(--c1),
    transparent 92%
  );
  opacity: 0.45;
}
#nav.scrolled .nav-capsule {
  background: var(--nav-bgs);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}
.nav-logo-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--c1d);
  border-color: var(--bdr-cd);
}
.nav-logo-img {
  filter: saturate(0.8);
}
.nav-brand {
  letter-spacing: 0;
}
.nav-a {
  padding: 8px 12px;
  border-radius: 8px;
  letter-spacing: 0;
}
.nav-a::after {
  background: var(--c1);
}
.nav-hire-pill {
  padding: 10px 15px;
  border-radius: 9px;
  background: var(--c1);
  color: #061014;
  letter-spacing: 0;
  box-shadow: 0 8px 20px var(--c1d);
}
.nav-hire-pill:hover {
  background: var(--c1);
  color: #061014;
  box-shadow: 0 12px 26px var(--c1g);
}
[data-theme="light"] .nav-hire-pill {
  background: var(--ink1);
  color: #fff;
}
[data-theme="light"] .nav-hire-pill:hover {
  background: var(--ink1);
  color: #fff;
}

.hero {
  min-height: 100svh;
  background:
    radial-gradient(circle at 76% 42%, var(--c1h) 0, transparent 31%),
    linear-gradient(135deg, var(--bg-void) 0%, var(--bg-void2) 100%);
}
.hero::before {
  opacity: 0.7;
}
.hero-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.hero-ambient-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--c1h) 1px, transparent 1px),
    linear-gradient(90deg, var(--c1h) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(
    90deg,
    transparent 4%,
    black 50%,
    transparent 96%
  );
  opacity: 0.34;
}
.hero-ambient-line {
  position: absolute;
  top: 24%;
  right: 7%;
  width: 37%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c1g), transparent);
  transform: rotate(-18deg);
}
.hero-ambient-orbit {
  position: absolute;
  right: 4%;
  top: 22%;
  width: 42vw;
  max-width: 620px;
  height: 42vw;
  max-height: 620px;
  border: 1px solid var(--bdr-cd);
  border-radius: 50%;
  transform: rotate(-18deg) scaleY(0.43);
  opacity: 0.8;
}
.hero-ambient-orbit::before,
.hero-ambient-orbit::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 1px solid var(--bdr-v);
  border-radius: inherit;
}
.hero-ambient-orbit::after {
  inset: 24%;
  border-color: var(--c3d);
}

.hero-stage {
  max-width: 1280px;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 0.86fr);
  gap: clamp(42px, 7vw, 112px);
  padding: 148px var(--launch-gutter) 86px;
}
.hero-content {
  max-width: 690px;
}
.h-status {
  margin-bottom: 28px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--bdr-cd);
  border-radius: 0;
  background: transparent;
  font-size: 0.62rem;
  letter-spacing: 1px;
}
.h-status:hover {
  background: transparent;
  border-color: var(--bdr-c);
}
.hs-protocol {
  letter-spacing: 1px;
  text-shadow: none;
}
.hh-sub {
  color: var(--c1);
  font-size: 0.64rem;
  letter-spacing: 2px;
  margin-bottom: 18px;
}
.hh-name {
  font-size: 5.55rem;
  letter-spacing: 0;
  line-height: 0.98;
  margin-bottom: 20px;
}
.hh-name em {
  color: var(--c1);
  text-shadow: 0 0 44px var(--c1d);
  animation: none;
}
.hh-typed-row {
  min-height: auto;
  font-size: 1.12rem;
  letter-spacing: 0;
  color: var(--ink2);
}
.hh-static-row .hh-craft {
  color: var(--ink2);
  font-weight: 500;
}
.h-bio {
  max-width: 530px;
  margin-bottom: 32px;
  color: var(--ink2);
  font-size: 1.02rem;
  line-height: 1.78;
}
.h-actions {
  gap: 10px;
  margin-bottom: 34px;
}
.btn-primary,
.btn-secondary {
  border-radius: 9px;
  letter-spacing: 0;
}
.btn-primary {
  min-height: 50px;
  padding: 13px 20px;
  background: var(--c1);
  color: #061014;
  box-shadow: 0 10px 24px var(--c1d);
}
.btn-primary::before,
.btn-primary::after {
  display: none;
}
.btn-primary:hover {
  background: var(--c1);
  color: #061014;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px var(--c1g);
}
.btn-secondary {
  min-height: 50px;
  padding: 12px 19px;
  border-color: var(--bdr-cd);
  color: var(--ink1);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: none;
}
.hero-capabilities {
  gap: 7px;
  align-items: center;
}
.hero-capability-label {
  color: var(--ink4);
  font: 500 0.62rem var(--f-mono);
  letter-spacing: 0.8px;
  margin-right: 4px;
}
.stk-chip {
  padding: 6px 10px;
  border-radius: 7px;
  background: transparent;
  color: var(--ink3);
  border-color: var(--bdr-cd);
  font-size: 0.64rem;
}
.stk-chip:hover {
  transform: none;
  box-shadow: none;
  background: var(--c1h);
}
.h-proof {
  gap: 8px 20px;
  margin-top: 24px;
  color: var(--ink3);
  font-size: 0.61rem;
  letter-spacing: 0.3px;
}
.h-proof span {
  padding: 6px 9px;
  gap: 7px;
  border: 1px solid var(--bdr-cd);
  border-radius: 999px;
  background: var(--card-bg);
}
.h-proof b {
  color: var(--c1);
  font-weight: 600;
}
.h-proof i {
  display: none;
}

.hero-work-preview {
  position: relative;
  grid-column: 2;
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 570px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  animation: none;
  transform: none;
}
.hero-workcard {
  position: relative;
  width: min(100%, 570px);
  padding: 12px;
  background: var(--card-bg);
  border: 1px solid var(--bdr-cd);
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.02);
  transform: rotate(1deg);
  overflow: visible;
}
.hero-workcard::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c1), transparent);
}
.hero-workcard-head,
.hero-workcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.hero-workcard-head {
  min-height: 30px;
  padding: 0 4px 10px;
  color: var(--ink3);
  font: 600 0.56rem var(--f-mono);
  letter-spacing: 1.1px;
}
.hero-work-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--c3);
}
.hero-work-status i {
  width: 6px;
  height: 6px;
  background: var(--c3);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--c3);
}
.hero-workcard-screen {
  position: relative;
  display: block;
  aspect-ratio: 1.42;
  overflow: hidden;
  border: 1px solid var(--bdr);
  border-radius: 11px;
  background: var(--bg-graph);
  color: inherit;
  text-decoration: none;
}
.hero-workcard-screen:hover {
  border-color: var(--bdr-c);
}
.hero-workcard-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.7s var(--ease);
}
.hero-workcard:hover .hero-workcard-screen img {
  transform: scale(1.035);
}
.hero-screen-corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-color: var(--c1);
  border-style: solid;
  opacity: 0.8;
}
.hero-screen-corner-a {
  top: 14px;
  left: 14px;
  border-width: 1px 0 0 1px;
}
.hero-screen-corner-b {
  right: 14px;
  bottom: 14px;
  border-width: 0 1px 1px 0;
}
.hero-workcard-foot {
  display: block;
  padding: 12px 4px 2px;
}
.hero-project-copy {
  display: grid;
  gap: 5px;
  padding: 0 4px 13px;
  border-bottom: 1px solid var(--bdr-cd);
  word-break: normal;
  overflow-wrap: normal;
}
.hero-project-kicker {
  color: var(--c1);
  font: 600 0.52rem var(--f-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hero-project-title {
  color: var(--ink1);
  font: 700 1.18rem/1.15 var(--f-orb);
  letter-spacing: -0.02em;
  margin: 0;
  word-break: normal;
  overflow-wrap: normal;
}
.hero-project-description {
  max-width: 48ch;
  color: var(--ink2);
  font: 400 0.78rem/1.55 var(--f-body);
  margin: 0;
  word-break: normal;
  overflow-wrap: normal;
}
.hero-project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 12px 4px 0;
}
.hero-maker {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.hero-maker img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  border: 1px solid var(--bdr-c);
}
.hero-maker span {
  display: grid;
  gap: 2px;
}
.hero-maker strong {
  color: var(--ink1);
  font: 600 0.72rem var(--f-orb);
  letter-spacing: 0;
}
.hero-maker small {
  color: var(--ink3);
  font: 500 0.57rem var(--f-mono);
  letter-spacing: 0.35px;
}
.hero-work-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.hero-work-tags span {
  padding: 5px 7px;
  border: 1px solid var(--bdr-cd);
  border-radius: 5px;
  color: var(--ink3);
  font: 500 0.49rem var(--f-mono);
  letter-spacing: 0.8px;
}
.hero-work-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--bdr-c);
  border-radius: 7px;
  color: var(--c1);
  font: 600 0.58rem var(--f-mono);
  letter-spacing: 0.65px;
  text-decoration: none;
  white-space: nowrap;
}
.hero-work-cta:hover,
.hero-work-cta:focus-visible {
  border-color: var(--c1);
  background: var(--c1d);
  color: var(--c1);
}
.hero-float-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--nav-bgs);
  border: 1px solid var(--bdr-cd);
  border-radius: 8px;
  box-shadow: var(--sh-sm);
  color: var(--ink2);
  font: 500 0.55rem var(--f-mono);
  letter-spacing: 0.7px;
}
.hero-float-note b {
  color: var(--c1);
  font-weight: 600;
}
.hero-float-note-a {
  top: 13%;
  left: -26px;
}
.hero-float-note-b {
  right: -28px;
  bottom: 16%;
}
.hero-scroll-cue {
  bottom: 26px;
  gap: 8px;
  font-size: 0.55rem;
  letter-spacing: 1.6px;
}

.marquee-sys {
  padding: 0 0 14px;
}
.mqs-shell {
  max-width: 1280px;
  min-height: 52px;
  border-radius: 0 0 12px 12px;
  background: var(--card-bg);
  border-color: var(--bdr-cd);
}
.mqs-kicker {
  padding-left: 0;
}

.section,
.process-band,
.stats-sys {
  --sec-py: 112px;
}
.section-alt {
  background: var(--alt-bg);
}
.section-alt::before {
  opacity: 0.35;
}
.sec-header {
  max-width: 820px;
  margin-bottom: 52px;
}
.sec-title {
  font-size: 3.85rem;
  line-height: 1.08;
  letter-spacing: 0;
}
.sec-title em {
  color: var(--c1);
}
.sec-title em::after {
  background: var(--c1);
  opacity: 0.28;
}
.sec-sub {
  max-width: 62ch;
  line-height: 1.78;
}
.svc-card,
.port-card,
.rv-card,
.stat-pod,
.process-step,
.ct-form-card {
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);
}
.svc-card:hover,
.port-card:hover,
.rv-card:hover,
.stat-pod:hover,
.process-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.2);
}
.svc-card h3,
.process-step h3,
.rv-card h3,
.sp-label {
  letter-spacing: 0;
}
.svc-card-glow {
  opacity: 0.35;
}
.port-lens {
  background: rgba(8, 11, 16, 0.66);
}
.port-card:hover .port-img {
  transform: scale(1.035);
}
.ct-form-card {
  background: var(--card-bg);
}

@media (max-width: 1040px) {
  .hero-stage {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
    gap: 40px;
  }
  .hh-name {
    font-size: 4.65rem;
  }
  .hero-float-note-a {
    left: -14px;
  }
  .hero-float-note-b {
    right: -14px;
  }
}

@media (max-width: 900px) {
  #nav {
    top: 12px;
  }
  .hero-stage {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 122px;
    padding-bottom: 70px;
    align-items: stretch;
  }
  .hero-content {
    order: 1;
    max-width: 700px;
    width: 100%;
    grid-column: 1;
  }
  .hero-work-preview {
    order: 2;
    width: min(100%, 590px);
    max-width: 590px;
    min-height: 0;
    margin: 0 auto;
    grid-column: 1;
    justify-self: center;
    transform: none;
  }
  .hero-workcard {
    transform: none;
  }
  .hero-float-note-a {
    left: -16px;
  }
  .hero-float-note-b {
    right: -16px;
  }
  .hero-scroll-cue {
    position: static;
    transform: none;
    margin: 8px 0 0;
    animation: none;
  }
}

/* Keep hero social links available at every viewport size. The base stylesheet
   hides the desktop rail below 1000px; on smaller screens it becomes a compact
   horizontal control in normal document flow. */
@media (max-width: 1000px) {
  .hero-social {
    position: relative;
    display: flex;
    left: auto;
    bottom: auto;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0 auto 18px;
    padding: 8px 10px;
    flex-direction: row;
    gap: 7px;
    border: 1px solid var(--bdr-cd);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--c1h), var(--card-bg));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
    margin-top: 0;
  }
  .hero-social a {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.95rem;
  }
  .hero-social .hs-rail {
    display: none;
  }
}

@media (max-width: 640px) {
  .nav-capsule {
    min-height: 56px;
  }
  .hero-stage {
    padding-top: 102px;
    padding-bottom: 54px;
  }
  .h-status {
    gap: 7px;
    font-size: 0.55rem;
  }
  .hs-divider {
    display: none;
  }
  .hs-loc {
    flex-basis: 100%;
  }
  .hh-name {
    font-size: 3.5rem;
  }
  .hh-typed-row {
    font-size: 0.98rem;
  }
  .h-bio {
    font-size: 0.96rem;
  }
  .h-actions > * {
    flex: 1 1 auto;
  }
  .hero-capabilities {
    margin-top: 8px;
  }
  .hero-capability-label {
    flex-basis: 100%;
  }
  .h-proof {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hero-workcard {
    padding: 9px;
    border-radius: 14px;
  }
  .hero-workcard-head {
    font-size: 0.5rem;
  }
  .hero-work-tags {
    justify-content: flex-start;
  }
  .hero-float-note {
    display: none;
  }
  .hero-social {
    gap: 5px;
    padding: 7px 8px;
    margin-top: 0;
    margin-bottom: 14px;
  }
  .hero-social a {
    width: 31px;
    height: 31px;
    font-size: 0.85rem;
  }
  .sec-title {
    font-size: 3rem;
  }
  .section,
  .process-band,
  .stats-sys {
    --sec-py: 82px;
  }
}

@media (max-width: 420px) {
  .hh-name {
    font-size: 3rem;
  }
  .h-actions {
    flex-direction: column;
  }
  .h-actions > * {
    width: 100%;
  }
  .sec-title {
    font-size: 2.45rem;
  }
}

/* Shared signal rhythm: every section gets one restrained, living marker. */
.sec-label::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--c1);
  box-shadow:
    0 0 0 3px var(--c1d),
    0 0 12px var(--c1g);
  animation: sectionDotPulse 2.4s ease-in-out infinite;
}
.mqs-kicker-dot,
.stats-signal-mark,
.ftce-dot,
.hero-work-status i,
.wph-dot {
  animation: sectionDotPulse 2.4s ease-in-out infinite;
}
@keyframes sectionDotPulse {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

/* Contact action: a quiet studio signal instead of a generic neon bubble. */
.wa-toggle {
  width: auto;
  min-width: 158px;
  height: 56px;
  padding: 6px 15px 6px 7px;
  gap: 10px;
  border: 1px solid rgba(37, 211, 102, 0.36);
  border-radius: 16px;
  background: var(--nav-bgs);
  color: var(--ink1);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.22),
    0 0 0 4px rgba(37, 211, 102, 0.06);
  animation: none;
  font-size: 1rem;
}
.wa-toggle-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 12px;
  background: #1baf60;
  color: #fff;
  font-size: 1.18rem;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.25);
}
.wa-toggle-copy {
  display: grid;
  gap: 1px;
  text-align: left;
}
.wa-toggle-copy strong {
  color: var(--ink1);
  font: 600 0.75rem var(--f-orb);
  letter-spacing: 0;
}
.wa-toggle-copy small {
  color: var(--ink3);
  font: 500 0.53rem var(--f-mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.wa-toggle:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 211, 102, 0.72);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.26),
    0 0 0 5px rgba(37, 211, 102, 0.08);
}
.wa-toggle:active {
  transform: translateY(-1px);
}
.wa-toggle.wa-open {
  min-width: 56px;
  width: 56px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}
.wa-toggle.wa-open .wa-toggle-icon {
  width: auto;
  height: auto;
  flex-basis: auto;
  background: transparent;
  box-shadow: none;
  color: var(--ink1);
}
.wa-toggle.wa-open .wa-toggle-copy {
  display: none;
}
.wa-popup {
  right: 0;
  bottom: 68px;
  width: 348px;
  border-radius: 16px;
  border-color: rgba(37, 211, 102, 0.22);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34);
}
.wa-popup-head {
  padding: 16px;
}
.wa-msg {
  border-radius: 11px;
}
.wa-send {
  background: #1baf60;
}
.wa-send:hover {
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.38);
}

[data-theme="light"] .wa-toggle {
  border-color: rgba(22, 163, 74, 0.26);
  box-shadow:
    0 12px 30px rgba(16, 32, 43, 0.12),
    0 0 0 4px rgba(22, 163, 74, 0.05);
}
[data-theme="light"] .wa-toggle-icon,
[data-theme="light"] .wa-send {
  background: #168a51;
}
[data-theme="light"] .wa-popup {
  border-color: rgba(22, 163, 74, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .sec-label::before,
  .mqs-kicker-dot,
  .stats-signal-mark,
  .ftce-dot,
  .hero-work-status i,
  .wph-dot {
    animation: none;
  }
}
.motion-reduced .sec-label::before,
.motion-reduced .mqs-kicker-dot,
.motion-reduced .stats-signal-mark,
.motion-reduced .ftce-dot,
.motion-reduced .hero-work-status i,
.motion-reduced .wph-dot {
  animation: none;
}

/* Hide the back-to-top control while the chat panel is open. */
.wa-chat-open .scroll-top {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

/* A short, edge-pinned brand signal that guides attention without covering content. */
.scorpio-guide {
  --sg-edge: 16px;
  --sg-gap: 9px;
  position: fixed;
  top: 50%;
  z-index: 480;
  display: flex;
  align-items: center;
  gap: var(--sg-gap);
  width: min(224px, calc(100vw - 28px));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -50%, 14px) scale(0.88);
  transition:
    top 0.72s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.28s ease,
    transform 0.72s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.72s;
}
.scorpio-guide[data-side="left"] {
  left: var(--sg-edge);
}
.scorpio-guide[data-side="right"] {
  right: var(--sg-edge);
  flex-direction: row-reverse;
}
.scorpio-guide.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, -50%, 0) scale(1);
  transition-delay: 0s;
}
.scorpio-guide.is-fading {
  opacity: 0;
  transform: translate3d(0, -50%, -8px) scale(0.94);
}
.scorpio-guide-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border: 1px solid var(--bdr-c);
  border-radius: 14px;
  background: var(--nav-bgs);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.26),
    0 0 0 4px var(--c1d);
}
.scorpio-guide-avatar img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px var(--c1g));
}
.scorpio-guide.is-visible .scorpio-guide-avatar {
  animation: scorpioGuideSettle 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes scorpioGuideSettle {
  0% {
    transform: translateY(5px) rotate(-6deg);
  }
  26% {
    transform: translateY(-2px) rotate(2deg);
  }
  72% {
    transform: translateY(0) rotate(0);
  }
  100% {
    transform: translateY(1px) rotate(0);
  }
}
.scorpio-guide-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--bdr-cd);
  border-radius: 9px;
  background: var(--nav-bgs);
  box-shadow: var(--sh-sm);
  color: var(--ink2);
  font: 500 0.63rem/1.35 var(--f-mono);
  letter-spacing: 0.15px;
}
.scorpio-guide-copy small {
  color: var(--c1);
  font: 600 0.47rem/1 var(--f-mono);
  letter-spacing: 1.1px;
}
.scorpio-guide-copy span {
  overflow-wrap: anywhere;
}
.scorpio-guide[data-side="left"] .scorpio-guide-copy {
  text-align: left;
}
.scorpio-guide[data-side="right"] .scorpio-guide-copy {
  text-align: right;
}

@media (max-width: 640px) {
  .scorpio-guide {
    --sg-edge: 10px;
    width: min(190px, calc(100vw - 20px));
  }
  .scorpio-guide-avatar {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .scorpio-guide-avatar img {
    width: 31px;
    height: 31px;
  }
  .scorpio-guide-copy {
    padding: 7px 8px;
    font-size: 0.57rem;
  }
  .scorpio-guide-copy small {
    font-size: 0.43rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scorpio-guide {
    transition:
      opacity 0.001ms linear,
      visibility 0s linear 0s;
  }
  .scorpio-guide.is-visible {
    transform: translate3d(0, -50%, 0) scale(1);
  }
  .scorpio-guide.is-visible .scorpio-guide-avatar {
    animation: none;
  }
}
.motion-reduced .scorpio-guide {
  display: none;
}

/* ── FAQ: practical objection handling ───────────────────────── */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(28px, 5vw, 52px);
}

.faq-item {
  border: 1px solid var(--bdr-cd);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease;
}

.faq-item:hover,
.faq-item[open] {
  border-color: var(--bdr-c);
  background: var(--card-bgh);
}

.faq-item[open] {
  transform: translateY(-2px);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 22px;
  color: var(--ink1);
  cursor: pointer;
  font: 600 0.82rem/1.4 var(--f-body);
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  flex: 0 0 auto;
  color: var(--c1);
  content: "+";
  font: 400 1.25rem/1 var(--f-mono);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: -3px;
}

.faq-item p {
  max-width: 58ch;
  margin: -2px 22px 22px;
  color: var(--ink3);
  font-size: 0.8rem;
  line-height: 1.75;
}

@media (max-width: 760px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* ── FINAL RESPONSIVE SAFETY LAYER ────────────────────────────────────────
   Keeps the established desktop composition intact while protecting the
   smallest screens from overflow, cramped controls, and unreadable wrapping. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  overflow-wrap: break-word;
}

main,
section,
header,
footer,
nav,
.container,
.hero-stage,
.hero-content,
.hero-work-preview,
.hero-workcard,
.about-system,
.ct-system,
.faq-grid,
.svc-grid,
.port-grid,
.rv-grid,
.stats-grid,
.process-grid,
.ft-grid {
  min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
label,
summary {
  overflow-wrap: anywhere;
}

@media (any-pointer: coarse) {
  a,
  button,
  summary,
  select {
    touch-action: manipulation;
  }
}

@media (max-width: 900px) {
  #nav {
    width: calc(100% - 20px);
  }

  .hero-stage,
  .hero-content,
  .hero-work-preview,
  .hero-workcard {
    width: 100%;
    max-width: 100%;
  }

  .hero-workcard-head {
    flex-wrap: wrap;
  }

  .hero-work-status,
  .hero-maker,
  .hero-work-tags {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  :root {
    --launch-gutter: clamp(12px, 4vw, 18px);
  }

  #nav {
    top: 8px;
    width: calc(100% - 16px);
  }

  .nav-capsule {
    min-height: 52px;
    padding: 7px 8px 7px 10px;
    border-radius: 14px;
  }

  .nav-logo-wrap {
    width: 28px;
    height: 28px;
  }

  .nbl-name,
  .nbl-tag {
    font-size: 0.72rem;
  }

  .hero-stage {
    padding-right: var(--launch-gutter);
    padding-left: var(--launch-gutter);
  }

  .hh-sub {
    max-width: 100%;
    font-size: 0.54rem;
    line-height: 1.5;
    letter-spacing: 1.1px;
  }

  .hh-name {
    font-size: clamp(2.25rem, 12.5vw, 3.5rem);
    line-height: 0.96;
  }

  .hh-typed-row {
    font-size: clamp(0.9rem, 4vw, 1.1rem);
  }

  .h-bio {
    margin-bottom: 26px;
    font-size: 0.94rem;
    line-height: 1.7;
  }

  .h-actions {
    gap: 10px;
    margin-bottom: 32px;
  }

  .h-actions > * {
    min-height: 50px;
  }

  .hero-workcard {
    width: 100%;
    transform: none;
  }

  .hero-workcard-head {
    align-items: flex-start;
    gap: 7px;
    line-height: 1.4;
    letter-spacing: 0.7px;
  }

  .hero-work-status {
    margin-left: 0;
  }
  .hero-workcard-foot {
    gap: 10px;
  }

  .hero-maker strong {
    font-size: 0.65rem;
  }

  .hero-maker small {
    font-size: 0.5rem;
  }

  .hero-work-tags {
    gap: 4px;
  }

  .hero-work-tags span {
    padding: 4px 5px;
    font-size: 0.43rem;
    letter-spacing: 0.5px;
  }

  .hero-social {
    max-width: 100%;
  }

  .hero-social a {
    min-width: 32px;
  }

  .section,
  .process-band,
  .stats-sys {
    --sec-py: clamp(64px, 16vw, 82px);
  }

  .sec-header {
    margin-bottom: 30px;
  }

  .sec-label {
    gap: 6px;
    line-height: 1.4;
  }

  .sl-text {
    font-size: 0.58rem;
    letter-spacing: 1px;
  }

  .sl-value {
    width: 100%;
    font-size: 0.42rem;
    line-height: 1.4;
  }

  .sec-title {
    font-size: clamp(2rem, 10vw, 3rem);
    line-height: 1.02;
  }

  .sec-sub {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .svc-card,
  .port-card,
  .rv-card,
  .process-step,
  .stat-pod,
  .ct-form-card,
  .faq-item {
    min-width: 0;
  }

  .svc-card h3,
  .port-meta h3,
  .port-meta h4 {
    font-size: 1rem;
    line-height: 1.25;
  }

  .svc-card p,
  .port-meta p {
    font-size: 0.82rem;
    line-height: 1.65;
  }

  .port-meta {
    padding: 14px;
  }

  .port-cat {
    overflow-wrap: anywhere;
    font-size: 0.57rem;
    line-height: 1.35;
    letter-spacing: 0.85px;
  }

  .port-stack span {
    padding: 3px 7px;
    font-size: 0.6rem;
  }

  .port-visual {
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .port-proof-grid {
    gap: 9px;
  }

  .port-proof-grid > div {
    padding: 12px;
  }

  .about-system {
    gap: 36px;
  }

  .avc-wrap::before {
    inset: -14px;
  }

  .badge-exp {
    right: -6px;
    bottom: -12px;
    min-width: 78px;
    padding: 10px 12px;
  }

  .badge-live {
    top: 10px;
    left: -6px;
    padding: 6px 10px;
    font-size: 0.65rem;
  }

  .ac-bio {
    font-size: 0.9rem;
    line-height: 1.75;
  }

  .ac-facts {
    gap: 8px;
  }

  .acf-item {
    padding: 10px;
  }

  .acf-item strong {
    overflow-wrap: anywhere;
    font-size: 0.78rem;
  }

  .ct-form-card {
    padding: 20px 16px;
  }

  .ct-form-intro > span {
    font-size: 0.45rem;
    line-height: 1.45;
    letter-spacing: 0.8px;
  }

  .ct-form-intro h3 {
    font-size: 1rem;
  }

  .ct-form-intro p {
    font-size: 0.75rem;
  }

  .fi-wrap input,
  .fi-wrap select,
  .fi-wrap textarea {
    min-width: 0;
  }

  .faq-grid {
    gap: 10px;
  }

  .faq-item summary {
    padding: 17px 16px;
    font-size: 0.78rem;
  }

  .faq-item p {
    margin: 0 16px 17px;
    font-size: 0.76rem;
    line-height: 1.7;
  }

  .ft-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ft-brand-bio {
    max-width: 100%;
  }

  .ft-cta-strip {
    padding: 42px 0;
  }

  .ft-cta-action .btn-primary,
  .ft-cta-action .btn-secondary {
    width: 100%;
    justify-content: center;
  }

}

@media (max-width: 420px) {
  .nav-hire-pill {
    display: none;
  }

  .nav-capsule {
    min-height: 50px;
  }

  .hero-stage {
    padding-top: 90px;
  }

  .hero-workcard-head {
    font-size: 0.44rem;
  }
  .stats-grid,
  .process-grid,
  .svc-grid,
  .port-grid,
  .rv-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .h-actions {
    flex-direction: column;
  }

  .h-actions > *,
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .sec-title {
    font-size: clamp(1.9rem, 10vw, 2.5rem);
  }

  .ac-actions {
    flex-direction: column;
  }

  .ac-actions > * {
    width: 100%;
    justify-content: center;
  }

  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .hero-stage {
    padding-top: 86px;
    padding-bottom: 40px;
  }

  .nav-logo-wrap {
    width: 26px;
    height: 26px;
  }

  .nav-brand {
    gap: 6px;
  }

  .nbl-name {
    font-size: 0.68rem;
  }

  .nav-menu-btn {
    width: 42px;
    height: 42px;
  }

  .hh-sub {
    font-size: 0.47rem;
    letter-spacing: 0.65px;
  }

  .hh-name {
    font-size: clamp(2rem, 13vw, 2.5rem);
  }

  .hh-typed-row {
    font-size: 0.85rem;
  }

  .h-proof span {
    white-space: normal;
  }

  .hero-workcard {
    padding: 7px;
    border-radius: 12px;
  }

  .hero-workcard-head {
    font-size: 0.4rem;
  }
  .hero-workcard-foot {
    padding: 9px 2px 1px;
  }

  .hero-maker img {
    width: 32px;
    height: 32px;
  }

  .section,
  .process-band,
  .stats-sys {
    --sec-py: 58px;
  }

  .sec-title {
    font-size: clamp(1.75rem, 10vw, 2.2rem);
  }

  .sec-sub {
    font-size: 0.84rem;
  }

  .faq-item summary {
    padding: 15px 13px;
  }

  .faq-item p {
    margin: 0 13px 15px;
  }

  .ct-form-card {
    padding: 18px 13px;
  }
}

/* Keep the contact route understandable when scripting is unavailable. */
.form-noscript {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(0, 240, 255, 0.24);
  border-radius: 0.75rem;
  background: rgba(0, 240, 255, 0.06);
  color: var(--muted, #9aa8c7);
  font-size: 0.82rem;
  line-height: 1.6;
}

.form-noscript a {
  color: var(--accent-cyan, #00f0ff);
  text-underline-offset: 0.18em;
}

/* Make portfolio proof clear without implying unverified client outcomes. */
.trust-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 760px;
  margin: 1.35rem 0 0;
  color: var(--muted, #9aa8c7);
  font-size: 0.78rem;
  line-height: 1.65;
}

.trust-disclosure i,
.case-intro-note i {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--accent-cyan, #00f0ff);
}

.case-intro-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  max-width: 720px;
  margin: 1.4rem 0 0;
  padding: 0.9rem 1rem;
  border-left: 2px solid var(--c1, #00f0ff);
  background: color-mix(in srgb, var(--c1, #00f0ff) 6%, transparent);
  color: var(--ink2, #aeb8cc);
  font-size: 0.82rem;
  line-height: 1.65;
}

@supports not (background: color-mix(in srgb, white 10%, transparent)) {
  .case-intro-note {
    background: rgba(0, 240, 255, 0.06);
  }
}

/* Desktop rail alignment: bring the first icon up beside the hero headline.
   The mobile rail remains in normal flow through the max-width rules above. */
@media (min-width: 1101px) and (min-height: 500px) {
  .hero-social {
    top: clamp(42px, 8vh, 76px);
    bottom: auto;
  }
}

/* Keep narrow mobile section headers calm; the decorative index is secondary to the content. */
@media (max-width: 640px) {
  .sec-label .sl-value {
    display: none;
  }
}

/* ── PREMIUM WHATSAPP CONTACT SYSTEM ──────────────────────────────────────
   One clear action language for the footer CTA, floating contact control,
   and chat panel. Green is used as a signal, not as a loud surface. */
.ft-cta-action {
  gap: 14px;
}

.ft-wa-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 6px 14px 6px 7px;
  border: 1px solid var(--bdr-cd);
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--ink1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.ft-wa-link::after {
  display: none;
}

.ft-wa-link:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 211, 102, 0.48);
  background: var(--card-bgh);
  color: var(--ink1);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

.ft-wa-link:active {
  transform: translateY(0);
}

.ft-wa-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(37, 211, 102, 0.22);
  border-radius: 11px;
  background: rgba(37, 211, 102, 0.1);
  color: var(--c-wa);
  font-size: 1rem;
}

.ft-wa-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.ft-wa-copy strong {
  color: var(--ink1);
  font: 600 0.72rem/1.2 var(--f-orb);
  letter-spacing: 0;
}

.ft-wa-copy small {
  color: var(--ink3);
  font: 500 0.54rem/1.2 var(--f-mono);
  letter-spacing: 0.55px;
  text-transform: uppercase;
}

.ft-wa-arrow {
  margin-left: 4px;
  color: var(--ink3);
  font-size: 0.86rem;
  transition: color 180ms ease, transform 180ms ease;
}

.ft-wa-link:hover .ft-wa-arrow {
  color: var(--c-wa);
  transform: translate(2px, -2px);
}

[data-theme="light"] .ft-wa-link {
  box-shadow: 0 12px 28px rgba(16, 32, 43, 0.1);
}

.wa-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  min-width: 220px;
  height: 58px;
  padding: 8px 14px 8px 8px;
  gap: 11px;
  border: 1px solid var(--bdr-cd);
  border-radius: 15px;
  background: var(--card-bg);
  color: var(--ink1);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
  animation: none;
  font-size: 1rem;
}

.wa-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 211, 102, 0.48);
  background: var(--card-bgh);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.3);
}

.wa-toggle:active {
  transform: translateY(0);
}

.wa-toggle-icon {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(37, 211, 102, 0.22);
  border-radius: 11px;
  background: rgba(37, 211, 102, 0.1);
  color: var(--c-wa);
  font-size: 1.05rem;
  box-shadow: none;
}

.wa-toggle-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  text-align: left;
}

.wa-toggle-copy strong {
  color: var(--ink1);
  font: 600 0.74rem/1.2 var(--f-orb);
  letter-spacing: 0;
}

.wa-toggle-copy small {
  color: var(--ink3);
  font: 500 0.53rem/1.2 var(--f-mono);
  letter-spacing: 0.45px;
}

.wa-toggle.wa-open {
  width: 54px;
  min-width: 54px;
  height: 54px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}

.wa-toggle.wa-open .wa-toggle-copy {
  display: none;
}

.wa-toggle.wa-open .wa-toggle-icon {
  width: auto;
  height: auto;
  flex-basis: auto;
  border: 0;
  background: transparent;
  color: var(--ink1);
}

.wa-popup {
  right: 0;
  bottom: 70px;
  width: min(360px, calc(100vw - 32px));
  border: 1px solid var(--bdr-cd);
  border-radius: 18px;
  background: var(--nav-bgs);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

.wa-popup-head {
  padding: 16px;
  background: var(--card-bg);
  border-bottom-color: var(--bdr-cd);
}

.wph-info strong {
  font: 600 0.78rem/1.25 var(--f-orb);
}

.wph-info > span {
  color: var(--ink3);
  font-size: 0.58rem;
  letter-spacing: 0.15px;
}

.wph-dot {
  background: var(--c-wa);
}

.wph-close {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
}

.wph-close:hover {
  background: var(--card-bgh);
}

.wa-popup-body {
  padding: 18px;
}

.wa-msg {
  border-color: var(--bdr-cd);
  border-radius: 13px;
  background: var(--card-bgh);
  padding: 13px 15px;
  font-size: 0.8rem;
  line-height: 1.65;
}

.wa-ts {
  margin-top: 9px;
  color: var(--ink4);
  font-size: 0.57rem;
  letter-spacing: 0.2px;
}

.wa-popup-foot {
  padding: 12px 14px;
  background: var(--card-bg);
  border-top-color: var(--bdr-cd);
}

.wa-input {
  min-width: 0;
  min-height: 34px;
  font-size: 0.8rem;
}

.wa-send {
  width: 38px;
  height: 38px;
  background: var(--c-wa);
  box-shadow: none;
}

.wa-send:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.24);
}

.wa-powered {
  padding: 8px;
  border-top-color: var(--bdr-cd);
  color: var(--ink4);
  font-size: 0.56rem;
  letter-spacing: 0.15px;
}

@media (max-width: 640px) {
  .ft-wa-link {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ── TYPOGRAPHY REFINEMENT ─────────────────────────────────────────────────
   Keeps Sora / Space Grotesk / DM Mono, but gives client-facing copy more
   room and reserves the mono face for compact system metadata. */
body,
button,
input,
select,
textarea {
  font-synthesis: none;
  font-optical-sizing: auto;
}

h1,
h2,
h3,
h4 {
  font-synthesis: none;
  text-wrap: balance;
}

p,
li,
.h-bio,
.sec-sub,
.ac-bio,
.svc-card p,
.port-meta p,
.trust-card p,
.faq-item p,
.ct-form-intro p {
  text-wrap: pretty;
}

.hh-name {
  letter-spacing: -0.045em;
}

.sec-title {
  letter-spacing: -0.035em;
}

.sl-text {
  font-size: 0.7rem;
  line-height: 1.35;
  letter-spacing: 1.6px;
}

.sl-value {
  font-size: 0.62rem;
  line-height: 1.35;
  letter-spacing: 0.55px;
}

.h-status,
.hero-capability-label,
.h-proof {
  font-size: 0.66rem;
}

.hero-workcard-head {
  font-size: 0.6rem;
  letter-spacing: 0.8px;
}

.hero-maker small {
  font-size: 0.6rem;
}

.hero-work-tags span {
  font-size: 0.55rem;
  letter-spacing: 0.65px;
}

.process-step-no {
  font-size: 0.62rem;
}

.svc-card-num {
  font-size: 0.72rem;
}

.svc-tags span,
.pf-pill {
  font-size: 0.72rem;
}

.port-cat {
  font-size: 0.7rem;
  letter-spacing: 1.05px;
}

.port-stack span {
  font-size: 0.7rem;
}

.port-proof-grid b {
  font-size: 0.6rem;
}

.trust-card-tag {
  font-size: 0.62rem;
}

.plr-label {
  font-size: 0.72rem;
  letter-spacing: 1.8px;
}

.ct-form-intro > span {
  font-size: 0.6rem;
}

.fg label {
  font-size: 0.78rem;
}

.btn-primary,
.btn-secondary {
  font-size: 0.86rem;
}

@media (max-width: 640px) {
  .sl-text {
    font-size: 0.64rem;
    letter-spacing: 1.25px;
  }

  .sl-value {
    white-space: normal;
    font-size: 0.58rem;
    letter-spacing: 0.45px;
  }

  .hero-workcard-head {
    font-size: 0.54rem;
  }

  .hero-work-tags span {
    font-size: 0.5rem;
  }

  .port-cat {
    font-size: 0.62rem;
  }

  .port-stack span,
  .svc-tags span {
    font-size: 0.66rem;
  }

  .ct-form-intro > span {
    font-size: 0.56rem;
  }
}

@media (max-width: 360px) {
  .sl-text {
    font-size: 0.6rem;
  }

  .sl-value {
    font-size: 0.55rem;
  }

  .hero-workcard-head {
    font-size: 0.5rem;
  }

  .hero-work-tags span {
    font-size: 0.48rem;
  }
}

/* Tablet-width hero guard: 1001–1100px needs the stacked composition so the
   headline, featured build, and social controls never compete for space. */
@media (min-width: 1001px) and (max-width: 1100px) {
  .hero-stage {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 122px;
    padding-bottom: 70px;
  }

  .hero-content {
    order: 1;
    max-width: 700px;
    grid-column: 1;
  }

  .hero-work-preview {
    order: 2;
    width: min(100%, 590px);
    max-width: 590px;
    min-height: 0;
    margin: 0 auto;
    grid-column: 1;
    justify-self: center;
  }

  .hero-workcard {
    transform: none;
  }

  .hero-social {
    position: relative;
    display: flex;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 0 auto 18px;
    padding: 8px 10px;
    flex-direction: row;
    gap: 7px;
    border: 1px solid var(--bdr-cd);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--c1h), var(--card-bg));
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
  }

  .hero-social a {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.95rem;
  }

  .hero-social .hs-rail {
    display: none;
  }

  .hero-scroll-cue {
    position: static;
    transform: none;
    margin: 8px 0 0;
    animation: none;
  }

  .hh-name {
    font-size: clamp(2.3rem, 6vw, 3.5rem);
  }
}

/* ── CALM PREMIUM VISUAL PASS ─────────────────────────────────────────────
   Keeps the editorial-tech character, but gives the eye a quieter resting
   surface and makes the work, offer, and CTA carry the visual weight. */
body::before {
  opacity: 0.08;
}

.atm-grain {
  opacity: 0.006;
}

.atm-vignette {
  background: radial-gradient(
    ellipse 90% 90% at 50% 45%,
    transparent 30%,
    rgba(8, 11, 16, 0.22) 100%
  );
}

[data-theme="light"] .atm-vignette {
  background: radial-gradient(
    ellipse 90% 90% at 50% 45%,
    transparent 32%,
    rgba(226, 235, 239, 0.08) 100%
  );
}

.hero::before {
  opacity: 0.42;
}

.hero-atmos {
  opacity: 0.48;
}

.hero-ambient-grid {
  opacity: 0.18;
}

.hero-ambient-line {
  opacity: 0.4;
}

.hero-ambient-orbit {
  opacity: 0.5;
}

.ha-starfield {
  opacity: 0.28;
}

.ha-grid {
  opacity: 0.06;
}

.ha-readout {
  opacity: 0.3;
}

.nav-capsule {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.nav-capsule::before {
  opacity: 0.28;
}

.hero-workcard {
  transform: rotate(0.5deg);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.018);
}

.svc-card,
.port-card,
.rv-card,
.stat-pod,
.process-step,
.ct-form-card,
.ct-info-card {
  border-color: var(--bdr);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.14),
    inset 0 1px rgba(255, 255, 255, 0.025);
}

.svc-card::before,
.port-card::before,
.rv-card::before,
.process-step::before {
  opacity: 0.34;
}

.svc-card-glow {
  opacity: 0.18;
}

.svc-card:hover,
.port-card:hover,
.rv-card:hover,
.stat-pod:hover,
.process-step:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.2),
    0 0 0 1px var(--c1d),
    inset 0 1px rgba(255, 255, 255, 0.035);
}

.port-card:hover .port-visual img {
  filter: saturate(1.04) contrast(1.02);
}

.btn-primary {
  box-shadow: 0 8px 20px var(--c1d);
}

.btn-primary:hover {
  box-shadow: 0 12px 26px var(--c1g);
}

.btn-secondary {
  border-color: var(--bdr-cd);
}

.btn-secondary:hover {
  background: var(--c1h);
  box-shadow: none;
}

.sec-label::before,
.mqs-kicker-dot,
.stats-signal-mark,
.ftce-dot,
.hero-work-status i,
.wph-dot,
.bl-pulse {
  animation: none;
}

.sec-label::before {
  box-shadow: 0 0 0 2px var(--c1d);
}

.stats-signal-mark {
  text-shadow: 0 0 8px var(--c1d);
}

.process-band::before {
  opacity: 0.18;
}

.section-alt {
  background: linear-gradient(135deg, var(--bg-void2), var(--bg-void));
}

.section-alt::before {
  opacity: 0.18;
}

.stats-sys {
  background: var(--bg-space);
}

.process-band {
  background: var(--bg-void2);
}

.ft-cta-strip {
  background: linear-gradient(135deg, var(--bg-void2), var(--bg-space));
}

/* The transparent watermark needs a darkening blend on the light theme;
   screen would disappear against a pale surface. */
[data-theme="light"] .sec-bg-img {
  mix-blend-mode: multiply;
  opacity: 0.028;
}

@media (max-width: 640px) {
  .hero-atmos,
  .hero-ambient-grid,
  .hero-ambient-orbit {
    opacity: 0.14;
  }

  .hero-workcard {
    transform: none;
  }

  .section-alt,
  .stats-sys,
  .process-band,
  .ft-cta-strip {
    background: var(--bg-void2);
  }
}

/* ── OUTCOME-LED SERVICE ENTRY POINTS ───────────────────────────────────── */
.offer-paths {
  margin: -18px 0 42px;
}

.offer-paths-label {
  margin-bottom: 12px;
  color: var(--ink4);
  font: 600 0.62rem/1.35 var(--f-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.offer-paths-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.offer-path {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid var(--bdr);
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--ink1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

.offer-path:hover {
  border-color: var(--bdr-c);
  background: var(--card-bgh);
  color: var(--ink1);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.offer-path-no {
  color: var(--c1);
  font: 700 0.64rem/1 var(--f-mono);
  letter-spacing: 0.8px;
}

.offer-path-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.offer-path-copy strong {
  color: var(--ink1);
  font: 600 0.78rem/1.25 var(--f-orb);
}

.offer-path-copy small {
  overflow-wrap: anywhere;
  color: var(--ink3);
  font: 500 0.65rem/1.35 var(--f-body);
}

.offer-path > i {
  color: var(--ink4);
  font-size: 0.82rem;
  transition: color 180ms ease, transform 180ms ease;
}

.offer-path:hover > i {
  color: var(--c1);
  transform: translate(2px, -2px);
}

@media (max-width: 820px) {
  .offer-paths-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .offer-paths {
    margin-top: -6px;
    margin-bottom: 32px;
  }

  .offer-path {
    padding: 14px;
  }
}

.port-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.port-footer .btn-primary,
.port-footer .btn-secondary {
  min-height: 44px;
}

/* ── PROJECT NOTES PAGE ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
.case-page {
  min-height: 100vh;
  background: var(--bg-void);
  color: var(--ink1);
}

.case-shell {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.case-topbar {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--bdr);
  background: var(--bg-void);
  background: color-mix(in srgb, var(--bg-void) 88%, transparent);
}

.case-topbar-inner,
.case-nav,
.case-brand,
.case-footer-inner {
  display: flex;
  align-items: center;
}

.case-topbar-inner {
  justify-content: space-between;
  min-height: 78px;
  gap: 24px;
}

.case-brand {
  gap: 11px;
  color: var(--ink1);
}

.case-brand:hover {
  color: var(--ink1);
}

.case-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--bdr-c);
  border-radius: 10px;
  color: var(--c1);
  font: 700 0.7rem/1 var(--f-mono);
  letter-spacing: -1px;
}

.case-brand strong,
.case-brand small {
  display: block;
}

.case-brand strong {
  font: 600 0.76rem/1.2 var(--f-orb);
}

.case-brand small {
  margin-top: 3px;
  color: var(--ink4);
  font: 500 0.57rem/1 var(--f-mono);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.case-nav {
  justify-content: flex-end;
  gap: 18px;
  color: var(--ink3);
  font: 600 0.66rem/1 var(--f-mono);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.case-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  color: inherit;
}

.case-nav a:hover {
  color: var(--c1);
}

.case-nav .case-nav-cta {
  padding: 0 14px;
  border: 1px solid var(--bdr-c);
  border-radius: 999px;
  color: var(--ink1);
}

.case-nav .case-nav-cta:hover {
  border-color: var(--c1);
  background: var(--c1h);
  color: var(--c1);
}

.case-intro {
  padding-top: clamp(82px, 12vw, 160px);
  padding-bottom: clamp(68px, 9vw, 120px);
}

.case-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--c1);
  font: 600 0.64rem/1.3 var(--f-mono);
  letter-spacing: 1.5px;
}

.case-kicker span {
  color: var(--ink4);
}

.case-intro h1 {
  max-width: 920px;
  margin-top: 23px;
  color: var(--ink1);
  font: 600 clamp(2.7rem, 7vw, 6.5rem) / 0.98 var(--f-orb);
  letter-spacing: -0.075em;
}

.case-intro-copy {
  max-width: 620px;
  margin-top: 28px;
  color: var(--ink2);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.75;
}

.case-intro-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 28px;
  margin-top: 42px;
  color: var(--ink3);
  font: 500 0.68rem/1.4 var(--f-mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.case-intro-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.case-intro-meta b {
  color: var(--c1);
  font-weight: 600;
}

.case-study-list {
  display: grid;
  gap: 22px;
}

.case-study {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--bdr);
  border-radius: 22px;
  background: var(--card-bg);
  background: linear-gradient(135deg, var(--card-bg), color-mix(in srgb, var(--bg-card2) 45%, transparent));
}

.case-study:nth-child(even) .case-study-image {
  order: 2;
}

.case-study:nth-child(even) .case-study-body {
  order: 1;
}

.case-study-image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--bdr);
  border-radius: 15px;
  background: var(--bg-card);
}

.case-study-image::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 8, 0.78));
  content: "";
  pointer-events: none;
}

.case-study-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.2, 0.75, 0.25, 1), filter 420ms ease;
}

.case-study-image span {
  position: absolute;
  z-index: 1;
  right: 17px;
  bottom: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font: 600 0.65rem/1 var(--f-mono);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.case-study-image:hover img {
  filter: saturate(1.08);
  transform: scale(1.025);
}

.case-study-image:hover span {
  color: var(--c1);
}

.case-study-body {
  min-width: 0;
  padding: clamp(8px, 2vw, 18px);
}

.case-study-index {
  color: var(--c1);
  font: 600 0.62rem/1.3 var(--f-mono);
  letter-spacing: 1.5px;
}

.case-study h2 {
  margin-top: 13px;
  color: var(--ink1);
  font: 600 clamp(1.5rem, 3vw, 2.45rem) / 1.1 var(--f-orb);
  letter-spacing: -0.055em;
}

.case-study-lead {
  max-width: 480px;
  margin-top: 18px;
  color: var(--ink2);
  font-size: 0.97rem;
  line-height: 1.75;
}

.case-note-grid {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.case-note-grid > div {
  padding-top: 13px;
  border-top: 1px solid var(--bdr);
}

.case-note-grid span {
  color: var(--ink4);
  font: 600 0.58rem/1.3 var(--f-mono);
  letter-spacing: 1.2px;
}

.case-note-grid p {
  margin-top: 6px;
  color: var(--ink3);
  font-size: 0.78rem;
  line-height: 1.6;
}

.case-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 25px;
}

.case-stack span {
  padding: 6px 9px;
  border: 1px solid var(--bdr);
  border-radius: 999px;
  color: var(--ink3);
  font: 500 0.59rem/1 var(--f-mono);
}

.case-next {
  margin-top: clamp(90px, 14vw, 180px);
  margin-bottom: clamp(80px, 12vw, 150px);
  padding: clamp(28px, 6vw, 74px);
  border: 1px solid var(--bdr-cd);
  border-radius: 22px;
  background: linear-gradient(135deg, var(--c1h), var(--card-bg));
}

.case-next h2 {
  max-width: 620px;
  margin-top: 18px;
  color: var(--ink1);
  font: 600 clamp(2rem, 5vw, 4.5rem) / 1.03 var(--f-orb);
  letter-spacing: -0.07em;
}

.case-next p:not(.case-kicker) {
  max-width: 540px;
  margin-top: 18px;
  color: var(--ink2);
  font-size: 1rem;
  line-height: 1.75;
}

.case-page .case-next .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  margin-top: 28px;
  padding: 0 17px;
  border: 1px solid var(--c1);
  border-radius: 999px;
  background: var(--c1);
  color: var(--bg-void);
  font: 600 0.68rem/1 var(--f-mono);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.case-page .case-next .btn-primary:hover {
  background: transparent;
  color: var(--c1);
}

.case-footer {
  border-top: 1px solid var(--bdr);
}

.case-footer-inner {
  justify-content: space-between;
  gap: 18px;
  min-height: 86px;
  color: var(--ink4);
  font: 500 0.61rem/1.4 var(--f-mono);
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.case-footer a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink3);
}

.case-footer a:hover {
  color: var(--c1);
}

@media (max-width: 800px) {
  .case-study {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .case-study:nth-child(even) .case-study-image,
  .case-study:nth-child(even) .case-study-body {
    order: initial;
  }

  .case-study-body {
    padding: 4px 3px 9px;
  }
}

@media (max-width: 620px) {
  .case-shell {
    width: min(calc(100% - 32px), 1180px);
  }

  .case-topbar-inner {
    min-height: 70px;
  }

  .case-nav {
    gap: 9px;
    font-size: 0.58rem;
  }

  .case-nav .case-nav-cta {
    padding: 0 10px;
  }

  .case-nav > a:first-child span {
    display: none;
  }

  .case-intro h1 {
    margin-top: 18px;
    font-size: clamp(2.45rem, 13vw, 4.3rem);
  }

  .case-intro-copy {
    margin-top: 21px;
    font-size: 0.95rem;
  }

  .case-intro-meta {
    display: grid;
    gap: 10px;
    margin-top: 30px;
  }

  .case-study {
    padding: 13px;
    border-radius: 17px;
  }

  .case-study h2 {
    font-size: 1.65rem;
  }

  .case-study-lead {
    font-size: 0.9rem;
  }

  .case-next {
    margin-top: 72px;
    margin-bottom: 72px;
    padding: 25px 20px;
    border-radius: 17px;
  }

  .case-footer-inner {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    min-height: 100px;
    padding-block: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-study-image img {
    transition: none;
  }
}

/* ── CONVERSION LAYER: clear offers, proof, and calmer signal ── */
.hh-sub {
  max-width: 34ch;
  text-wrap: balance;
}

.h-bio {
  max-width: 54ch;
  text-wrap: pretty;
}

.service-packages {
  margin: 4px 0 50px;
  padding: 20px;
  border: 1px solid var(--bdr-cd);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--c1h), transparent 42%), var(--card-bg);
}

.service-packages-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.service-packages-kicker,
.service-package-fit,
.service-package-meta span {
  color: var(--c1);
  font: 600 0.58rem/1.3 var(--f-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.service-packages-note {
  max-width: 48ch;
  margin: 0;
  color: var(--ink3);
  font-size: 0.8rem;
  line-height: 1.6;
  text-align: right;
}

.service-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.service-package {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--bdr);
  border-radius: 14px;
  background: var(--bg-card);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  transition:
    transform 220ms var(--spring),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.service-package::before {
  position: absolute;
  top: 0;
  right: 14%;
  left: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c1), transparent);
  content: "";
  opacity: 0.7;
}

.service-package:hover {
  transform: translateY(-4px);
  border-color: var(--bdr-c);
  box-shadow: 0 16px 44px rgba(0, 0, 8, 0.2);
}

.service-package-featured {
  border-color: var(--bdr-c);
  background: linear-gradient(145deg, var(--c1h), transparent 58%), var(--card-bg);
  box-shadow: 0 14px 38px rgba(0, 0, 8, 0.14);
}

.service-package-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 24px;
}

.service-package-number {
  color: var(--c1);
  font: 700 0.68rem/1 var(--f-mono);
  letter-spacing: 1px;
}

.service-package-fit {
  color: var(--ink4);
  font-size: 0.49rem;
  letter-spacing: 0.8px;
  text-align: right;
}

.service-package h3 {
  max-width: 18ch;
  margin-bottom: 11px;
  color: var(--ink1);
  font: 700 1.16rem/1.25 var(--f-orb);
  letter-spacing: 0;
}

.service-package > p {
  min-height: 78px;
  margin-bottom: 18px;
  color: var(--ink3);
  font-size: 0.82rem;
  line-height: 1.7;
}

.service-package ul {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.service-package li {
  position: relative;
  padding-left: 17px;
  color: var(--ink2);
  font-size: 0.76rem;
  line-height: 1.45;
}

.service-package li::before {
  position: absolute;
  top: 0.48em;
  left: 0;
  width: 6px;
  height: 6px;
  border: 1px solid var(--c1);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--c1d);
  content: "";
}

.service-package-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--bdr);
}

.service-package-meta span {
  color: var(--ink4);
  font-size: 0.5rem;
  letter-spacing: 0.7px;
}

.service-package-meta strong {
  color: var(--ink1);
  font: 600 0.72rem/1.3 var(--f-mono);
}

.package-link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  color: var(--c1);
  font: 600 0.68rem/1.4 var(--f-mono);
  letter-spacing: 0.2px;
}

.package-link i {
  transition: transform 180ms ease;
}

.package-link:hover i,
.package-link:focus-visible i {
  transform: translate(2px, -2px);
}

.package-link:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 5px;
  border-radius: 3px;
}

.port-integrity-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 70ch;
  margin: 22px 0 0;
  color: var(--ink4);
  font: 500 0.67rem/1.55 var(--f-mono);
}

.port-integrity-note i {
  flex: 0 0 auto;
  margin-top: 0.16em;
  color: var(--c3);
}

.ct-next-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 22px 0 26px;
  padding: 0;
  list-style: none;
}

.ct-next-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  padding: 10px;
  border: 1px solid var(--bdr);
  border-radius: 9px;
  background: var(--c1h);
}

.ct-next-steps li > span {
  grid-row: span 2;
  color: var(--c1);
  font: 600 0.58rem/1.4 var(--f-mono);
}

.ct-next-steps strong {
  color: var(--ink1);
  font: 600 0.69rem/1.35 var(--f-body);
}

.ct-next-steps small {
  color: var(--ink4);
  font-size: 0.61rem;
  line-height: 1.4;
}

/* Progressive disclosure keeps the first contact step lightweight while
   preserving useful scope details for visitors who want to share them. */
.ct-optional-details {
  margin: 0 0 16px;
  border: 1px solid var(--bdr);
  border-radius: 12px;
  background: var(--card-bg);
}

.ct-optional-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 10px 14px;
  color: var(--ink1);
  cursor: pointer;
  list-style: none;
}

.ct-optional-details summary::-webkit-details-marker {
  display: none;
}

.ct-optional-details summary > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ct-optional-details summary strong {
  font: 600 0.72rem/1.3 var(--f-body);
}

.ct-optional-details summary small {
  color: var(--ink4);
  font: 500 0.62rem/1.35 var(--f-mono);
  letter-spacing: 0.2px;
}

.ct-optional-details summary > b {
  flex: 0 0 auto;
  color: var(--c1);
  font: 500 1.1rem/1 var(--f-mono);
}

.ct-optional-details[open] summary {
  border-bottom: 1px solid var(--bdr);
}

.ct-optional-details[open] summary > b {
  transform: rotate(45deg);
}

.ct-optional-details summary:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: -3px;
  border-radius: 11px;
}

.ct-optional-fields {
  padding: 16px 14px 1px;
}

.ct-optional-fields .fg:last-child {
  margin-bottom: 0;
}

/* Decorative systems stay present, but content and actions remain dominant. */
.atm-grain {
  opacity: 0.018;
  animation-duration: 18s;
}

#heroCanvas {
  opacity: 0.72;
}

@media (min-width: 1101px) {
  .scorpio-journey {
    opacity: 0.7;
  }
}

@media (max-width: 900px) {
  .service-packages-grid {
    grid-template-columns: repeat(3, minmax(210px, 1fr));
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  .service-package {
    scroll-snap-align: start;
  }
}

@media (max-width: 640px) {
  .service-packages {
    margin-bottom: 36px;
    padding: 14px;
    border-radius: 15px;
  }

  .service-packages-head {
    display: block;
    margin-bottom: 14px;
  }

  .service-packages-note {
    margin-top: 8px;
    text-align: left;
  }

  .service-packages-grid {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .service-package {
    padding: 19px;
  }

  .service-package > p {
    min-height: 0;
  }

  .ct-next-steps {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-package,
  .package-link i {
    transition: none;
  }

  #heroCanvas {
    opacity: 0.35;
  }
}

.motion-reduced #heroCanvas {
  opacity: 0.3;
}

/* Scorpio zodiac lights for the launch mark: slow drift, bright twinkles,
   and tiny bounces keep the constellation alive without competing with it. */
.pre-galaxy .galaxy-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: scorpioStarTwinkle 2.35s ease-in-out infinite;
}

.pre-galaxy .galaxy-star-extra {
  animation-delay: var(--star-delay, 0s);
}

@keyframes scorpioStarTwinkle {
  0%,
  100% {
    opacity: 0.24;
    transform: translate(0, 0) scale(0.72);
  }
  38% {
    opacity: 1;
    transform: translate(1px, -1.5px) scale(1.42);
  }
  68% {
    opacity: 0.52;
    transform: translate(-1px, 1px) scale(0.9);
  }
}

@media (max-width: 420px) {
  .pre-galaxy .galaxy-star-extra {
    animation-duration: 2.8s;
  }
}

/* ── PROFESSIONAL SCROLL RAIL ── */
@media (min-width: 1101px) {
  .scorpio-journey {
    top: 50%;
    bottom: auto;
    right: clamp(22px, 3.2vw, 54px);
    width: 48px;
    height: min(64vh, 560px);
    padding: 0;
    transform: translateY(-50%);
    opacity: 0.74;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .scorpio-journey:hover {
    opacity: 1;
  }

  .sj-caption {
    top: -34px;
    right: 0;
    transform: none;
    gap: 5px;
    font-size: 0.48rem;
    letter-spacing: 1.1px;
  }

  .sj-caption-mark {
    font-size: 0.7rem;
    text-shadow: 0 0 8px var(--c1);
  }

  .sj-track {
    width: 1px;
    background: linear-gradient(
      180deg,
      transparent,
      var(--bdr-c) 7%,
      var(--bdr-c) 93%,
      transparent
    );
  }

  .sj-track::after {
    opacity: 0.28;
  }

  .sj-track-fill {
    box-shadow: 0 0 8px var(--c1);
  }

  .sj-waypoint {
    height: 22px;
  }

  .sj-node {
    width: 17px;
    height: 17px;
    border-color: var(--bdr-cd);
    background: var(--bg-void);
    font-size: 0.4rem;
  }

  .sj-label {
    right: 25px;
    font-size: 0.47rem;
    letter-spacing: 0.7px;
  }

  .sj-waypoint:hover .sj-node,
  .sj-waypoint:focus-visible .sj-node,
  .sj-waypoint.is-active .sj-node {
    background: var(--bg-card);
    box-shadow: 0 0 10px var(--c1d), 0 0 0 3px var(--c1h);
    transform: translate(-50%, -50%) scale(1.06);
  }

  .sj-traveler {
    width: 34px;
    height: 34px;
  }

  .sj-traveler-aura {
    inset: 6px;
    border-color: var(--bdr-c);
    box-shadow: 0 0 14px var(--c1d);
  }

  .sj-scorpion-image {
    width: 28px;
    height: 28px;
    border-radius: 0;
    filter: saturate(1.15) contrast(1.04) drop-shadow(0 0 5px var(--c1))
      drop-shadow(0 0 10px var(--c2d));
    mix-blend-mode: screen;
    animation: sjEmblemPulse 3.8s ease-in-out infinite;
  }

  .sj-footstep,
  .sj-thorn-signal {
    display: none;
  }
}

@keyframes sjEmblemPulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sj-scorpion-image,
  .sj-traveler-aura {
    animation: none;
  }
}

.motion-reduced .sj-scorpion-image,
.motion-reduced .sj-traveler-aura {
  animation: none;
}

/* ── SCORPIO SIGNATURE RAIL: final editorial treatment ── */
@media (min-width: 1101px) {
  .scorpio-journey {
    right: clamp(24px, 3.5vw, 58px);
    width: 44px;
    opacity: 0.68;
  }

  .sj-caption {
    top: -31px;
    right: -2px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--bdr-cd);
    gap: 4px;
    color: var(--ink4);
    font-size: 0.43rem;
    letter-spacing: 0.85px;
  }

  .sj-caption-mark {
    color: var(--c1);
    font-size: 0.62rem;
    line-height: 1;
    text-shadow: 0 0 8px var(--c1d);
  }

  .sj-caption-prefix {
    color: var(--ink4);
  }

  .sj-caption-current {
    color: var(--ink2);
    text-transform: uppercase;
  }

  .sj-track {
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--bdr-c) 10%, var(--bdr-c) 90%, transparent);
  }

  .sj-track::after {
    opacity: 0.18;
  }

  .sj-track-fill {
    background: linear-gradient(180deg, var(--c1), var(--c2));
    box-shadow: 0 0 7px var(--c1d);
  }

  .sj-waypoint {
    height: 18px;
  }

  .sj-node {
    width: 8px;
    height: 8px;
    border-color: var(--bdr-cd);
    background: var(--bg-void);
    font-size: 0;
    transition:
      width 220ms ease,
      height 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease;
  }

  .sj-node::after {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--c1);
    content: "";
    opacity: 0;
    box-shadow: 0 0 5px var(--c1);
    transition: opacity 220ms ease;
  }

  .sj-label {
    right: 22px;
    padding: 3px 5px 3px 0;
    background: var(--bg-void);
    font-size: 0.45rem;
    letter-spacing: 0.65px;
  }

  .sj-label::before {
    position: absolute;
    top: 50%;
    right: -12px;
    width: 9px;
    height: 1px;
    background: var(--c1);
    content: "";
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 220ms ease;
  }

  .sj-waypoint:hover .sj-node,
  .sj-waypoint:focus-visible .sj-node,
  .sj-waypoint.is-active .sj-node {
    width: 11px;
    height: 11px;
    border-color: var(--c1);
    background: var(--bg-void);
    box-shadow: 0 0 0 3px var(--c1h), 0 0 12px var(--c1d);
    transform: translate(-50%, -50%);
  }

  .sj-waypoint:hover .sj-node::after,
  .sj-waypoint:focus-visible .sj-node::after,
  .sj-waypoint.is-active .sj-node::after,
  .sj-waypoint:hover .sj-label::before,
  .sj-waypoint:focus-visible .sj-label::before,
  .sj-waypoint.is-active .sj-label::before {
    opacity: 1;
  }

  .sj-traveler {
    width: 30px;
    height: 30px;
  }

  .sj-traveler-aura {
    inset: 7px;
    background: radial-gradient(circle, var(--c1h), transparent 70%);
    box-shadow: 0 0 14px var(--c1d);
    animation: sjRailAura 3.8s ease-in-out infinite;
  }

  .sj-scorpion-image {
    width: 22px;
    height: 22px;
    filter: saturate(1.08) contrast(1.02) drop-shadow(0 0 5px var(--c1))
      drop-shadow(0 0 9px var(--c2d));
    mix-blend-mode: screen;
    animation: sjRailEmblem 4.5s ease-in-out infinite;
  }
}

@keyframes sjRailAura {
  0%,
  100% {
    opacity: 0.48;
    transform: scale(0.88);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.08);
  }
}

@keyframes sjRailEmblem {
  0%,
  100% {
    opacity: 0.76;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sj-node,
  .sj-node::after,
  .sj-label::before {
    transition: none;
  }
  .sj-traveler-aura,
  .sj-scorpion-image {
    animation: none;
  }
}

.motion-reduced .sj-traveler-aura,
.motion-reduced .sj-scorpion-image {
  animation: none;
}

/* ── READABLE SIGNATURE RAIL: visible, elegant, and still restrained ── */
@media (min-width: 1101px) {
  .scorpio-journey {
    right: clamp(20px, 2.8vw, 46px);
    width: 72px;
    height: min(70vh, 620px);
    padding: 0 8px;
    border: 1px solid var(--bdr-cd);
    border-radius: 22px;
    background:
      linear-gradient(180deg, var(--c1h), transparent 30%),
      var(--card-bg);
    box-shadow:
      0 18px 48px rgba(0, 0, 8, 0.22),
      inset 0 1px rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0.9;
    pointer-events: auto;
  }

  .scorpio-journey:hover {
    border-color: var(--bdr-c);
    box-shadow:
      0 18px 48px rgba(0, 0, 8, 0.28),
      0 0 0 1px var(--c1d),
      inset 0 1px rgba(255, 255, 255, 0.06);
  }

  .sj-caption {
    top: -57px;
    right: 0;
    display: grid;
    min-width: 132px;
    gap: 6px;
    padding: 0 0 9px;
    border-bottom: 1px solid var(--bdr-c);
    transform: none;
    font-size: 0.48rem;
    letter-spacing: 0.8px;
  }

  .sj-caption-brand,
  .sj-caption-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .sj-caption-brand {
    justify-content: flex-start;
  }

  .sj-caption-mark {
    color: var(--c1);
    font-size: 0.72rem;
    line-height: 1;
    text-shadow: 0 0 10px var(--c1d);
  }

  .sj-caption-prefix {
    color: var(--ink4);
    font-size: 0.43rem;
    letter-spacing: 1px;
  }

  .sj-caption-current {
    overflow: hidden;
    color: var(--ink1);
    font-size: 0.58rem;
    letter-spacing: 0.85px;
    text-overflow: ellipsis;
    text-transform: uppercase;
  }

  .sj-caption-percent {
    color: var(--c1);
    font: 600 0.56rem/1 var(--f-mono);
    letter-spacing: 0.4px;
  }

  .sj-track {
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--bdr-c) 8%, var(--bdr-c) 92%, transparent);
  }

  .sj-track::after {
    opacity: 0.3;
  }

  .sj-track-fill {
    box-shadow: 0 0 10px var(--c1d);
  }

  .sj-waypoint {
    height: 24px;
  }

  .sj-node {
    width: 13px;
    height: 13px;
    border-color: var(--bdr-c);
    background: var(--bg-void);
    font-size: 0;
  }

  .sj-node::after {
    width: 3px;
    height: 3px;
    background: var(--c1);
    opacity: 0.75;
    box-shadow: 0 0 7px var(--c1);
  }

  .sj-label {
    right: 25px;
    padding: 4px 6px 4px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--card-bg);
    font-size: 0.53rem;
    letter-spacing: 0.75px;
    box-shadow: 0 5px 18px rgba(0, 0, 8, 0.12);
  }

  .sj-label::before {
    right: -14px;
    width: 11px;
    background: var(--c1);
    opacity: 0;
  }

  .sj-waypoint:hover .sj-node,
  .sj-waypoint:focus-visible .sj-node,
  .sj-waypoint.is-active .sj-node {
    width: 16px;
    height: 16px;
    border-color: var(--c1);
    background: var(--bg-void);
    box-shadow: 0 0 0 4px var(--c1h), 0 0 16px var(--c1d);
  }

  .sj-waypoint:hover .sj-label,
  .sj-waypoint:focus-visible .sj-label,
  .sj-waypoint.is-active .sj-label {
    border-color: var(--bdr-cd);
    background: var(--card-bg);
    box-shadow: 0 8px 22px rgba(0, 0, 8, 0.2);
  }

  .sj-traveler {
    width: 44px;
    height: 44px;
  }

  .sj-traveler-aura {
    inset: 5px;
    border-color: var(--bdr-c);
    background: radial-gradient(circle, var(--c1g), transparent 70%);
    box-shadow: 0 0 20px var(--c1d);
  }

  .sj-scorpion-image {
    width: 31px;
    height: 31px;
    filter: saturate(1.14) contrast(1.04) drop-shadow(0 0 6px var(--c1))
      drop-shadow(0 0 12px var(--c2d));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sj-node,
  .sj-node::after,
  .sj-label::before {
    transition: none;
  }
}

/* ── FINAL UX POLISH: form guidance and result announcements ── */
.fg-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 17px;
  margin-top: 5px;
}

.fg-hint,
.fg-meta output {
  color: var(--ink4);
  font: 500 0.62rem/1.4 var(--f-mono);
  letter-spacing: 0.15px;
}

.fg-meta output {
  flex: 0 0 auto;
  transition: color var(--t-f);
}

/* Keep the category filter readable as a small collection index. */
.port-filter {
  margin-bottom: 12px;
}

.port-filter-status {
  margin: 0 0 30px;
  color: var(--ink4);
  font: 500 0.64rem/1.4 var(--f-mono);
  letter-spacing: 0.5px;
  text-align: center;
}

.fg-meta output.is-near-limit {
  color: var(--c-pink);
}

.form-msg:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 4px;
}

/* Keep the hero social rail readable on narrow screens. The links stay in one
   clean row on regular phones and wrap into a balanced three-column grid on
   ultra-small displays instead of overflowing the viewport. */
@media (max-width: 640px) {
  .hero-social {
    width: min(100%, 300px);
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .hero-social a {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    min-width: 42px;
    font-size: 1rem;
  }
}

@media (max-width: 280px) {
  .hero-social {
    width: min(100%, 164px);
    max-width: calc(100% - 16px);
    padding: 8px;
    gap: 6px;
  }
}

@media (max-width: 360px) {
  .hero-social {
    margin-top: 0;
  }
}

/* Mobile performance guard: the canvas, grain, and scan layers are decorative
   and should not consume a small device's first-render or scrolling budget. */
.hero-canvas-disabled {
  display: none !important;
}

@media (max-width: 700px), (prefers-reduced-motion: reduce) {
  #preloader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  #heroCanvas {
    display: none;
  }

  .atm-grain {
    animation: none;
    will-change: auto;
  }

  .atm-scan {
    display: none;
  }
}

/* Final narrow-screen layout guard. Keep the featured build readable instead
   of scaling the entire card down, and keep the floating chat control compact. */
@media (max-width: 640px) {
  .hero-workcard {
    width: 100%;
    max-width: 100%;
    padding: 8px;
    border-radius: 12px;
  }

  .hero-workcard-head {
    min-height: 0;
    padding-bottom: 8px;
    gap: 6px;
  }

  .hero-workcard-head > span:first-child {
    max-width: calc(100% - 76px);
  }

  .hero-workcard-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .hero-maker,
  .hero-maker > span,
  .hero-work-tags {
    min-width: 0;
    max-width: 100%;
  }

  .hero-maker small {
    white-space: normal;
  }

  .hero-work-tags {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-start;
  }

  .wa-popup {
    right: 0;
    width: min(360px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    bottom: 58px;
    max-height: min(72svh, 540px);
  }

  /* This hint is useful on desktop, but competes with the page on phones. */
  .scorpio-guide {
    display: none !important;
  }

  /* FX is optional; keep the content and primary contact action dominant. */
  .motion-toggle {
    display: none !important;
  }
}

@media (max-width: 360px) {
  .motion-toggle,
  .scorpio-guide {
    display: none !important;
  }

  .wa-popup {
    right: 0;
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    bottom: 54px;
    max-height: calc(100dvh - 90px);
  }

}

/* ROOT MOBILE RECOMPOSITION
   The desktop hero is intentionally not compressed into two narrow columns.
   Mobile gets one readable content flow: introduction, then featured build.
   This is the structural correction for the 320/375/425 layouts.

   The mobile card is a normal-flow item; only genuinely decorative notes
   stay absolutely positioned on wider layouts. */

@media (max-width: 480px) {
  .hero-stage {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: clamp(22px, 6vw, 30px);
    padding-bottom: clamp(34px, 8vw, 48px);
  }

  .hero-work-preview {
    position: relative;
    order: 2;
    display: block;
    /* Keep the featured build on the right edge at 425/375/360/320px while
       retaining a single readable column instead of forcing side-by-side text. */
    width: calc(100% - clamp(6px, 2.5vw, 12px));
    max-width: none;
    min-height: 0;
    margin: 0 0 0 auto;
    grid-column: 1;
    justify-self: end;
    opacity: 1;
    transform: none;
  }

  .hero-content {
    display: block;
    order: 1;
    width: 100%;
    max-width: none;
    grid-column: 1;
  }

  .h-status,
  .h-headline,
  .h-bio,
  .h-actions,
  .hero-capabilities,
  .h-proof {
    width: 100%;
    max-width: none;
  }

  .h-status {
    margin-bottom: 20px;
  }

  .h-headline {
    margin-bottom: 18px;
  }

  .hh-sub,
  .hh-name,
  .h-bio {
    word-break: normal;
    overflow-wrap: normal;
  }

  .hh-sub {
    max-width: none;
  }

  .hh-name {
    font-size: clamp(2.3rem, 12vw, 3.5rem);
    line-height: 0.96;
  }

  .h-actions {
    flex-direction: column;
    margin-bottom: 26px;
  }

  .h-actions > *,
  .btn-primary,
  .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .hero-workcard {
    width: 100%;
    min-width: 0;
    padding: clamp(9px, 2.8vw, 13px);
    border-radius: 16px;
    transform: none;
  }

  .hero-workcard-head {
    min-height: 0;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 0 3px 9px;
    font-size: clamp(0.55rem, 2.2vw, 0.68rem);
    letter-spacing: 0.65px;
  }

  .hero-workcard-head > span:first-child {
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero-work-status {
    flex: 0 0 auto;
    gap: 5px;
  }

  .hero-workcard-screen {
    aspect-ratio: 16 / 10;
    border-radius: 10px;
  }

  .hero-workcard-screen img {
    object-position: center center;
  }

  .hero-workcard-foot {
    display: block;
    padding: 14px 3px 2px;
  }

  .hero-project-copy {
    gap: 6px;
    padding: 0 3px 14px;
  }

  .hero-project-kicker {
    font-size: 0.52rem;
    letter-spacing: 0.85px;
  }

  .hero-project-title {
    font-size: 1.16rem;
    line-height: 1.15;
  }

  .hero-project-description {
    max-width: none;
    font-size: 0.79rem;
    line-height: 1.55;
  }

  .hero-project-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    padding: 12px 3px 0;
  }

  .hero-maker {
    display: flex;
    min-width: 0;
    width: 100%;
  }

  .hero-maker > span {
    min-width: 0;
  }

  .hero-maker img {
    width: 34px;
    height: 34px;
  }

  .hero-maker strong {
    font-size: 0.7rem;
  }

  .hero-maker small {
    display: block;
    font-size: 0.54rem;
    white-space: normal;
  }

  .hero-work-tags {
    display: flex;
    width: 100%;
    justify-content: flex-start;
  }

  .hero-work-cta {
    display: inline-flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    white-space: nowrap;
  }

  .hero-float-note {
    display: none;
  }

  .hero-social {
    margin-top: 0;
    margin-bottom: 14px;
  }
}

/* The source screenshot contains its own marketing headline. On the three
   smallest targets, use a right-focused square crop so that embedded copy
   does not compete with the portfolio card's own title and description. */
@media (max-width: 375px) {
  .hero-work-preview {
    width: 100%;
    margin: 0;
    justify-self: start;
  }

  .hero-workcard-screen {
    aspect-ratio: 1 / 1;
  }

  .hero-workcard-screen img {
    object-position: right center;
  }
}

/* Keep the contact form's promise rail compact on phones so the first fields
   remain close to the heading, while preserving all three helpful steps. */
@media (max-width: 640px) {
  .ct-next-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 18px 0 22px;
  }

  .ct-next-steps li {
    padding: 9px 7px;
    column-gap: 6px;
  }

  .ct-next-steps strong {
    font-size: 0.64rem;
  }

  .ct-next-steps small {
    font-size: 0.56rem;
  }
}

@media (max-width: 360px) {
  .ct-next-steps li {
    padding: 8px 5px;
    column-gap: 5px;
  }

  .ct-next-steps strong {
    font-size: 0.6rem;
  }

  .ct-next-steps small {
    font-size: 0.53rem;
  }
}

/* One fixed anchor keeps the two persistent actions together. The back-to-top
   button sits to the left of the WhatsApp CTA without reserving page space or
   forcing either control to collapse at narrow widths. */
.floating-actions {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 500;
  width: max-content;
  max-width: calc(100vw - 24px);
}

.floating-actions .wa-widget {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: auto;
  width: max-content;
}

.floating-actions .scroll-top {
  position: absolute;
  right: calc(100% + 12px);
  bottom: 0;
  width: 46px;
  height: 46px;
  border-color: var(--bdr-c);
  background: var(--card-bg);
  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.05);
}

.floating-actions .scroll-top:hover {
  transform: translateY(-2px);
  border-color: var(--bdr-c);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.22),
    0 0 0 3px var(--c1h);
}

.floating-actions .scroll-top:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .floating-actions {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: calc(100vw - 20px);
  }

  .floating-actions .scroll-top {
    right: calc(100% + 10px);
    width: 44px;
    height: 44px;
  }

  .floating-actions .wa-toggle {
    width: max-content !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px);
    height: 48px !important;
    padding: 6px 12px 6px 7px !important;
    gap: 8px;
    border-radius: 14px;
    justify-content: flex-start;
  }

  .floating-actions .wa-toggle-copy {
    display: grid !important;
    min-width: 0;
  }

  .floating-actions .wa-toggle-copy strong {
    font-size: 0.68rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .floating-actions .wa-toggle.wa-open .wa-toggle-copy {
    display: none !important;
  }

  .floating-actions .wa-toggle.wa-open {
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    border-radius: 50%;
    justify-content: center;
  }

  .floating-actions .wa-toggle-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border: 1px solid rgba(37, 211, 102, 0.22);
    border-radius: 10px;
    background: rgba(37, 211, 102, 0.1);
    font-size: 1rem;
  }

  .floating-actions .wa-toggle.wa-open .wa-toggle-icon {
    width: auto;
    height: auto;
    flex-basis: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .hero-ambient {
    opacity: 0.08;
  }

  .hero-ambient-line,
  .hero-ambient-orbit {
    display: none;
  }
}

@media (max-width: 360px) {
  .floating-actions {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
  }

  .floating-actions .scroll-top {
    right: calc(100% + 8px);
    width: 40px;
    height: 40px;
  }

  .floating-actions .wa-toggle {
    height: 44px !important;
    padding: 5px 10px 5px 6px !important;
    gap: 7px;
    border-radius: 13px;
  }

  .floating-actions .wa-toggle.wa-open {
    width: 44px !important;
    min-width: 44px !important;
  }
}

@media (max-width: 360px) {
  .hero-stage {
    gap: 20px;
  }

  .hh-name {
    font-size: clamp(2.15rem, 12.5vw, 2.6rem);
  }

  .hero-workcard {
    padding: 8px;
    border-radius: 14px;
  }

  .hero-workcard-head {
    gap: 6px;
    padding-bottom: 8px;
    font-size: 0.52rem;
  }

  .hero-workcard-foot {
    padding-top: 10px;
  }

  .hero-project-meta {
    gap: 9px;
  }

  .hero-maker img {
    width: 30px;
    height: 30px;
  }

  .hero-maker strong {
    font-size: 0.64rem;
  }

  .hero-maker small {
    font-size: 0.5rem;
  }

  .hero-work-cta {
    min-height: 38px;
    padding-inline: 10px;
    font-size: 0.52rem;
  }
}

/* Keep the responsive hero as one full-width composition. At narrow widths the
   social rail and scroll cue become normal-flow siblings of .hero-stage; the
   parent must therefore stack them instead of shrinking the stage beside them. */
@media (max-width: 1000px) {
  #hero {
    flex-direction: column;
    align-items: stretch;
  }

  #hero > .hero-stage {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* The desktop WhatsApp label is useful at larger sizes, but a compact icon
   keeps the primary mobile content and CTA unobstructed. */
@media (max-width: 480px) {
  .floating-actions .wa-toggle {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border-radius: 50%;
    justify-content: center;
  }

  .floating-actions .wa-toggle-copy {
    display: none !important;
  }
}

/* ── CURATED HOMEPAGE LAYER ────────────────────────────────────────────────
   Keep the strongest proof visible first while preserving the full archive
   and capability list behind deliberate, accessible disclosures. */
.service-capabilities-disclosure {
  margin-top: 22px;
  border-top: 1px solid var(--bdr);
}

.service-capabilities-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 4px;
  color: var(--ink1);
  cursor: pointer;
  list-style: none;
}

.service-capabilities-disclosure > summary::-webkit-details-marker {
  display: none;
}

.service-capabilities-disclosure > summary::marker {
  display: none;
}

.service-capabilities-disclosure > summary:hover,
.service-capabilities-disclosure > summary:focus-visible {
  color: var(--c1);
}

.service-capabilities-copy {
  display: grid;
  gap: 4px;
}

.service-capabilities-kicker {
  color: var(--c1);
  font: 600 0.58rem/1.3 var(--f-mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.service-capabilities-copy strong {
  font-family: var(--f-orb);
  font-size: clamp(0.95rem, 1.5vw, 1.12rem);
  letter-spacing: 0.2px;
}

.service-capabilities-copy small {
  color: var(--ink4);
  font-size: 0.76rem;
  line-height: 1.5;
}

.service-capabilities-toggle {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid var(--bdr);
  border-radius: 50%;
  color: var(--c1);
  transition: transform 220ms var(--spring), border-color 220ms ease;
}

.service-capabilities-toggle i {
  transition: transform 220ms var(--spring);
}

.service-capabilities-disclosure > summary:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 4px;
}

.service-capabilities-disclosure[open] > summary {
  border-bottom: 1px solid var(--bdr);
}

.service-capabilities-disclosure[open] .service-capabilities-toggle {
  border-color: var(--bdr-c);
}

.service-capabilities-disclosure[open] .service-capabilities-toggle i {
  transform: rotate(45deg);
}

.service-capabilities-disclosure .svc-grid {
  padding-top: 22px;
}

.port-grid.is-curated .port-item-secondary {
  display: none;
}

.port-curation {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 26px auto 4px;
  padding: 16px 18px;
  border: 1px solid var(--bdr);
  border-radius: 14px;
  background: var(--bg-card2);
}

html.portfolio-curation-ready .port-curation {
  display: flex;
}

.port-curation p {
  max-width: 48ch;
  margin: 0;
  color: var(--ink3);
  font-size: 0.78rem;
  line-height: 1.55;
}

.port-expand {
  min-height: 42px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.port-expand i {
  color: var(--c1);
}

@media (max-width: 640px) {
  .service-capabilities-disclosure > summary {
    align-items: flex-start;
    padding-inline: 0;
  }

  .port-curation {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
  }

  .port-expand {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-capabilities-toggle,
  .service-capabilities-toggle i {
    transition: none;
  }
}