/* CHARLES LIOC — IMMERSIVE EXPERIENCE LAYER
   Loaded after the base styles so the original site remains structurally intact.
   No external animation library required. */

:root {
  --fx-cyan: #00efff;
  --fx-blue: #1788ff;
  --fx-violet: #8a5cff;
  --fx-pink: #ff2bd6;
  --fx-green: #48ff9b;
  --fx-ink: #05060a;
  --fx-panel: rgba(8, 12, 21, .72);
  --fx-line: rgba(151, 183, 229, .22);
  --fx-soft: rgba(173, 190, 219, .74);
  --fx-card-x: 50%;
  --fx-card-y: 50%;
  --fx-scroll: 0;
  --fx-velocity: 0;
}

html { scroll-padding-top: 92px; }
body {
  font-size: 16px;
  min-height: 100%;
  position: relative;
  isolation: isolate;
}
body > main,
body > footer,
body > .shell,
body > .wrap {
  position: relative;
  z-index: 2;
}

/* ---------- Readability pass ---------- */
.main-nav,
.site-nav,
header nav {
  font-size: clamp(11px, .78vw, 13px) !important;
  letter-spacing: .075em;
}

.brand strong,
.brand-wordmark { font-size: clamp(12px, .86vw, 14px) !important; }
.brand small { font-size: 9px !important; }
.header-node,
.header-status { font-size: 10px !important; }

.hero-kicker,
.eyebrow,
.kicker,
.section-id,
.section-index,
.label {
  font-size: clamp(11px, .78vw, 13px) !important;
  line-height: 1.45;
}

.hero-lead,
.hero-intro,
.lead {
  font-size: clamp(17px, 1.35vw, 21px) !important;
  line-height: 1.66 !important;
}

.section-heading > p,
.site-purpose p,
.card-copy p,
.card p,
.story p,
.contact-copy p,
.copy p,
.identity-card-copy p,
.principle-card p,
.process-track p {
  font-size: clamp(15px, 1.05vw, 17px) !important;
  line-height: 1.68 !important;
}

.hero-paths small,
.hero-meta small,
.card-copy small,
.card small,
.site-node small,
.portfolio-bridge small,
.closing-copy small,
.status,
.fact small,
.tag,
.identity-card-copy small,
.principle-card > span,
.capability-index,
.capability-name small,
.process-track article > span,
.contact-status,
.terminal-top,
.terminal-foot,
.terminal-line small,
.final-signature small,
.back-top,
.next,
footer,
.site-footer {
  font-size: 11px !important;
}

.hero-paths strong,
.hero-paths span,
.hero-meta span,
.card-action,
.site-node span,
.fact strong,
.capability-name strong,
.process-track strong,
.terminal-line strong,
.final-signature strong {
  font-size: 13px !important;
}

.meta span { font-size: 10px !important; }

.primary-btn,
.secondary-btn,
.btn,
.closing-link {
  font-size: 11px !important;
  min-height: 56px;
}

/* Make huge headings feel intentional, not like empty space. */
.hero h1 { margin-bottom: 22px !important; }
.featured-section,
.site-purpose,
.contact-section,
.about-section,
.domains-section,
.work-section {
  padding-top: clamp(78px, 8vw, 108px) !important;
  padding-bottom: clamp(82px, 8.5vw, 116px) !important;
}

/* ---------- Atmosphere ---------- */
.fx-atmosphere {
  position: fixed;
  inset: -18vh -12vw;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .82;
}
.fx-atmosphere::before,
.fx-atmosphere::after {
  content: "";
  position: absolute;
  width: 48vw;
  height: 48vw;
  min-width: 520px;
  min-height: 520px;
  border-radius: 46% 54% 55% 45% / 44% 40% 60% 56%;
  filter: blur(74px);
  opacity: .15;
  animation: fxBlob 18s ease-in-out infinite alternate;
}
.fx-atmosphere::before {
  left: 4%;
  top: 4%;
  background: radial-gradient(circle at 40% 40%, var(--fx-cyan), transparent 62%);
}
.fx-atmosphere::after {
  right: 2%;
  bottom: 0;
  background: radial-gradient(circle at 55% 45%, var(--fx-pink), transparent 61%);
  animation-duration: 23s;
  animation-direction: alternate-reverse;
}

.fx-particle-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: .44;
  mix-blend-mode: screen;
}

.fx-pointer-light {
  position: fixed;
  left: 0;
  top: 0;
  width: 480px;
  height: 480px;
  margin: -240px 0 0 -240px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(0,239,255,.075), rgba(138,92,255,.025) 38%, transparent 68%);
  transform: translate3d(-1000px,-1000px,0);
  transition: opacity .25s ease;
  opacity: .9;
}

/* ---------- Cursor ---------- */
.fx-cursor-dot,
.fx-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-100px,-100px,0);
}
.fx-cursor-dot {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: white;
  box-shadow: 0 0 12px var(--fx-cyan), 0 0 22px rgba(255,43,214,.38);
}
.fx-cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(0,239,255,.65);
  box-shadow: inset 0 0 16px rgba(0,239,255,.06), 0 0 16px rgba(0,239,255,.08);
  transition: width .2s ease, height .2s ease, margin .2s ease, border-color .2s ease, background .2s ease;
}
body.fx-pointer-on .fx-cursor-dot,
body.fx-pointer-on .fx-cursor-ring { opacity: 1; }
body.fx-cursor-active .fx-cursor-ring {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-color: rgba(255,43,214,.72);
  background: rgba(138,92,255,.07);
}

/* ---------- Header upgrades ---------- */
.site-header,
.shell > header,
.wrap > header {
  box-shadow: 0 12px 42px rgba(0,0,0,.12);
}
.site-header::before,
.shell > header::before,
.wrap > header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  opacity: .75;
  background: linear-gradient(90deg, transparent 0 8%, rgba(0,239,255,.45) 30%, rgba(138,92,255,.22) 55%, rgba(255,43,214,.42) 78%, transparent 95%);
  transform: scaleX(.26);
  transform-origin: center;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.site-header:hover::before,
.shell > header:hover::before,
.wrap > header:hover::before { transform: scaleX(1); }

.fx-clock {
  margin-left: 9px;
  padding-left: 9px;
  border-left: 1px solid rgba(142,170,210,.22);
  color: #8d9ab1;
  white-space: nowrap;
}

/* ---------- Scroll chapter rail ---------- */
.fx-section-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: grid;
  gap: 8px;
  padding: 11px 8px;
  border: 1px solid rgba(128,160,210,.14);
  background: rgba(5,8,15,.54);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.fx-section-rail button {
  width: 10px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.fx-section-rail button::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 2px;
  height: 18px;
  background: rgba(118,142,179,.25);
  transition: .3s ease;
}
.fx-section-rail button::after {
  content: attr(data-label);
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  opacity: 0;
  pointer-events: none;
  color: #c9d4e7;
  background: rgba(5,8,14,.93);
  border: 1px solid rgba(120,155,205,.18);
  padding: 7px 9px;
  font: 700 9px "Space Mono",monospace;
  letter-spacing: .08em;
  white-space: nowrap;
  transition: .2s ease;
}
.fx-section-rail button:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.fx-section-rail button.active::before {
  background: linear-gradient(var(--fx-cyan),var(--fx-pink));
  box-shadow: 0 0 10px rgba(0,239,255,.45);
  height: 24px;
  top: 2px;
}

/* ---------- Scroll depth ---------- */
[data-fx-parallax] {
  translate: 0 var(--fx-parallax-y, 0px);
  will-change: translate;
}
.fx-scroll-scanner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
  opacity: .2;
  background: linear-gradient(90deg,transparent 0 10%,rgba(0,239,255,.5),rgba(138,92,255,.18),rgba(255,43,214,.42),transparent 90%);
  box-shadow: 0 0 18px rgba(0,239,255,.16);
  transform: translate3d(0,var(--fx-scan-y,-20px),0);
}

/* ---------- Universal reveal ---------- */
.fx-reveal {
  opacity: 0;
  translate: 0 34px;
  filter: blur(7px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    translate .9s cubic-bezier(.16,1,.3,1),
    filter .85s cubic-bezier(.16,1,.3,1);
}
.fx-reveal.fx-visible {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
}
.fx-reveal.fx-delay-1 { transition-delay: .07s; }
.fx-reveal.fx-delay-2 { transition-delay: .14s; }
.fx-reveal.fx-delay-3 { transition-delay: .21s; }

.fx-heading {
  position: relative;
  text-wrap: balance;
}
.fx-heading::after {
  content: "";
  position: absolute;
  left: -.02em;
  bottom: -.1em;
  width: min(40%, 240px);
  height: 2px;
  background: linear-gradient(90deg,var(--fx-cyan),var(--fx-violet),transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .85s .18s cubic-bezier(.16,1,.3,1);
  opacity: .5;
}
.fx-visible .fx-heading::after,
.fx-heading.fx-visible::after { transform: scaleX(1); }

/* ---------- Pointer-reactive cards ---------- */
[data-fx-card] {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
.fx-card-glow {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(420px circle at var(--fx-card-x) var(--fx-card-y), rgba(0,239,255,.14), transparent 38%),
    radial-gradient(300px circle at calc(var(--fx-card-x) + 10%) calc(var(--fx-card-y) + 5%), rgba(255,43,214,.08), transparent 42%);
  mix-blend-mode: screen;
  transition: opacity .3s ease;
}
[data-fx-card]:hover > .fx-card-glow { opacity: 1; }

/* Neon corner brackets on major cards */
.featured-card,
.card,
.discipline-card,
.principle-card,
.capability-row,
.contact-terminal,
.terminal,
.visual {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.008), 0 22px 70px rgba(0,0,0,.16);
}

/* ---------- Hero: stronger movement, less dead space ---------- */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 6% -12% auto auto;
  width: 46vw;
  height: 46vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(0,239,255,.07) 0 1px, transparent 1px 34px);
  mask-image: radial-gradient(circle, black 0 42%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, black 0 42%, transparent 74%);
  animation: fxOrbitGrid 24s linear infinite;
  pointer-events: none;
  opacity: .48;
}
.hero-copy { translate: 0 calc(var(--fx-hero-shift, 0px)); }
.hero-core,
.hero-visual { translate: 0 calc(var(--fx-hero-visual-shift, 0px)); }

.hero h1,
.hero-copy h1 {
  text-shadow: 0 0 38px rgba(0,239,255,.025);
}
.hero h1 span,
.hero-copy h1 span {
  transition: text-shadow .35s ease, -webkit-text-stroke-color .35s ease;
}
.hero:hover h1 span,
.hero:hover .hero-copy h1 span {
  -webkit-text-stroke-color: rgba(243,249,255,.94);
  text-shadow: 10px 0 34px rgba(0,239,255,.11), -10px 0 34px rgba(255,43,214,.09);
}

.core-ring,
.orbital-ring { filter: drop-shadow(0 0 7px rgba(0,239,255,.07)); }
.core-logo img,
.hero-logo { filter: drop-shadow(0 0 24px rgba(0,239,255,.22)) drop-shadow(0 0 32px rgba(255,43,214,.12)) !important; }

/* ---------- Moving signal ticker ---------- */
.fx-marquee {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(132,163,207,.18);
  border-bottom: 1px solid rgba(132,163,207,.18);
  background: rgba(6,9,16,.63);
  position: relative;
  z-index: 4;
}
.fx-marquee::before,
.fx-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 13vw;
  min-width: 80px;
  z-index: 2;
  pointer-events: none;
}
.fx-marquee::before { left: 0; background: linear-gradient(90deg,#05060a,transparent); }
.fx-marquee::after { right: 0; background: linear-gradient(-90deg,#05060a,transparent); }
.fx-marquee-track {
  min-width: max-content;
  display: flex;
  align-items: center;
  gap: 34px;
  height: 52px;
  animation: fxMarquee 25s linear infinite;
  font: 700 11px "Space Mono",monospace;
  letter-spacing: .13em;
  color: #8996aa;
}
.fx-marquee-track b { color: var(--fx-cyan); font-size: 9px; }
.fx-marquee-track span:nth-of-type(3n) { color: #b7c1d2; }

/* ---------- Homepage: signal deck ---------- */
.signal-deck,
.build-system {
  width: min(calc(100% - 48px), var(--max, 1440px));
  margin: 0 auto;
  position: relative;
  border-top: 1px solid var(--fx-line);
}
.signal-deck { padding: 28px 0 34px; }
.signal-deck-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
  color: #6d7a91;
  font: 700 10px "Space Mono",monospace;
  letter-spacing: .12em;
}
.signal-deck-head i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fx-green);
  box-shadow: 0 0 14px rgba(72,255,155,.7);
  animation: fxPulse 2s ease-in-out infinite;
}
.signal-deck-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
}
.signal-card {
  min-height: 154px;
  padding: 20px;
  border: 1px solid rgba(137,169,214,.18);
  background:
    linear-gradient(135deg,rgba(0,239,255,.035),transparent 42%),
    rgba(6,10,18,.56);
  overflow: hidden;
}
.signal-card:nth-child(2n) { background: linear-gradient(135deg,rgba(255,43,214,.035),transparent 42%),rgba(6,10,18,.56); }
.signal-card small {
  display: block;
  color: var(--fx-cyan);
  font: 700 10px "Space Mono",monospace;
  letter-spacing: .11em;
}
.signal-card strong {
  display: block;
  margin-top: 18px;
  font-size: clamp(18px,1.7vw,25px);
  letter-spacing: -.025em;
}
.signal-card p {
  margin: 9px 0 0;
  color: #8793a8;
  font-size: 14px;
  line-height: 1.55;
}
.signal-card .signal-bar {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 12px;
  height: 1px;
  background: linear-gradient(90deg,var(--fx-cyan),rgba(138,92,255,.42),transparent);
  transform-origin: left;
  animation: fxSignalBar 3.4s ease-in-out infinite;
}
.signal-card:nth-child(2) .signal-bar { animation-delay: -.7s; }
.signal-card:nth-child(3) .signal-bar { animation-delay: -1.4s; }
.signal-card:nth-child(4) .signal-bar { animation-delay: -2.1s; }

/* ---------- Homepage: build system ---------- */
.build-system { padding: clamp(82px,8vw,112px) 0; }
.build-system-grid {
  display: grid;
  grid-template-columns: minmax(360px,.82fr) minmax(0,1.18fr);
  gap: clamp(32px,6vw,88px);
  align-items: start;
}
.build-console {
  position: sticky;
  top: 116px;
  min-height: 560px;
  border: 1px solid rgba(132,167,215,.21);
  background:
    linear-gradient(rgba(72,117,168,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,117,168,.045) 1px,transparent 1px),
    radial-gradient(circle at 50% 48%,rgba(0,239,255,.08),transparent 34%),
    rgba(5,9,17,.66);
  background-size: 28px 28px,28px 28px,auto,auto;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.build-console::before,
.build-console::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(0,239,255,.25);
  animation: fxConsoleSpin 18s linear infinite;
}
.build-console::before { width: 63%; aspect-ratio:1; }
.build-console::after {
  width: 84%;
  aspect-ratio:1;
  border-color: rgba(255,43,214,.16);
  animation-duration: 29s;
  animation-direction: reverse;
}
.console-core {
  width: 51%;
  aspect-ratio: 1;
  border: 1px solid rgba(136,172,219,.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
  background: radial-gradient(circle,rgba(9,17,28,.95),rgba(5,8,14,.45));
  box-shadow: 0 0 70px rgba(0,239,255,.07);
}
.console-core::before {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border-top: 2px solid var(--fx-cyan);
  border-right: 2px solid transparent;
  border-bottom: 2px solid var(--fx-pink);
  border-left: 2px solid transparent;
  animation: fxConsoleSpin 6.5s linear infinite;
}
.console-core strong {
  font: 800 clamp(24px,3vw,40px) "Space Mono",monospace;
  letter-spacing: -.07em;
}
.console-core small {
  position: absolute;
  bottom: 25%;
  color: #77859b;
  font: 700 9px "Space Mono",monospace;
  letter-spacing: .13em;
}
.console-readout {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  z-index: 3;
}
.console-readout div {
  border: 1px solid rgba(132,166,210,.14);
  padding: 11px;
  background: rgba(5,9,16,.72);
}
.console-readout span,
.console-readout b { display: block; }
.console-readout span { color:#65738a;font:700 8px "Space Mono",monospace;letter-spacing:.09em; }
.console-readout b { margin-top:6px;font:700 11px "Space Mono",monospace;color:#a9b5c7; }
.console-readout div:nth-child(2) b { color: var(--fx-green); }

.method-list { display: grid; gap: 10px; }
.method-step {
  min-height: 142px;
  border: 1px solid rgba(132,165,210,.17);
  background: rgba(6,10,18,.48);
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 18px;
  align-items: center;
  opacity: .64;
  transition: border-color .35s ease, background .35s ease, opacity .35s ease, transform .35s ease;
}
.method-step.is-active,
.method-step:hover {
  opacity: 1;
  transform: translateX(7px);
  border-color: rgba(0,239,255,.34);
  background: linear-gradient(90deg,rgba(0,239,255,.055),rgba(8,12,21,.66));
}
.method-step > span {
  color: var(--fx-cyan);
  font: 700 11px "Space Mono",monospace;
}
.method-step h3 {
  margin: 0;
  font-size: clamp(22px,2.2vw,32px);
  letter-spacing: -.035em;
}
.method-step p {
  margin: 8px 0 0;
  max-width: 660px;
  color: #8995aa;
  font-size: 15px;
  line-height: 1.58;
}
.method-step b {
  color: #5f6d82;
  font: 700 16px "Space Mono",monospace;
  transition: color .25s ease, transform .25s ease;
}
.method-step.is-active b,
.method-step:hover b { color: var(--fx-pink); transform: translateX(3px); }

.capability-deck {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.capability-tile {
  min-height: 152px;
  border: 1px solid rgba(132,165,210,.16);
  padding: 20px 22px;
  background: rgba(5,9,16,.48);
}
.capability-tile small {
  color: #69768d;
  font: 700 10px "Space Mono",monospace;
}
.capability-tile strong {
  display: block;
  margin-top: 12px;
  font-size: 18px;
}
.capability-tile p {
  margin: 8px 0 0;
  color: #818da1;
  font-size: 14px;
  line-height: 1.55;
}
.direction-banner {
  margin-top: 10px;
  border: 1px solid rgba(255,43,214,.19);
  background: linear-gradient(90deg,rgba(0,239,255,.04),rgba(138,92,255,.05),rgba(255,43,214,.04));
  padding: 18px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 14px;
  align-items: center;
}
.direction-banner span {
  color: #69768d;
  font: 700 9px "Space Mono",monospace;
  letter-spacing: .1em;
}
.direction-banner strong { font-size: 13px; }
.direction-banner i { width: 1px; height: 26px; background: linear-gradient(var(--fx-cyan),var(--fx-pink)); opacity:.5; }

/* ---------- Dense project cards ---------- */
.featured-card { min-height: 470px !important; }
.featured-primary { min-height: 520px !important; }
.card-copy { padding: clamp(24px,2.5vw,32px) !important; }
.card-copy h3 { margin-top: 12px !important; }
.featured-grid { gap: 12px !important; }

/* ---------- Subpages ---------- */
.shell .hero { padding-top: clamp(70px,7vw,92px); padding-bottom: clamp(48px,5vw,66px); }
.shell .grid { padding-top: 42px; padding-bottom: 82px; gap: 12px; }
.shell .card { min-height: 270px; padding: 26px; }
.shell .card h2 { margin-top: 13px; }
.shell .card p { font-size: 15px !important; }
.shell .action { font-size: 10px !important; }
.shell footer { font-size: 10px !important; }

/* Contact: make email feel like an actual control. */
.fx-copy-email {
  margin-top: 12px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(0,239,255,.28);
  background: rgba(0,239,255,.04);
  color: #c8d3e7;
  font: 700 10px "Space Mono",monospace;
  letter-spacing: .08em;
  cursor: pointer;
  transition: .25s ease;
}
.fx-copy-email:hover { transform: translateY(-2px); border-color: rgba(0,239,255,.54); background: rgba(0,239,255,.08); }

/* ---------- Portfolio readability ---------- */
.portfolio-shell {} /* selector anchor for future upgrades */
.work-section .section-head > p,
.domains-section .section-head > p,
.about-section .section-head > p,
.contact-section .section-head > p { font-size: clamp(15px,1.05vw,17px) !important; }

.project-tab small,
.project-tab .project-number,
.project-meta small,
.discipline-card small,
.discipline-bottom,
.identity-card-top,
.terminal-line small,
.terminal-top,
.terminal-foot,
.capability-name small,
.capability-index,
.process-track article > span,
.contact-status,
.final-signature small,
.back-top { font-size: 10px !important; }

.project-tab p,
.discipline-card p,
.identity-card-copy p,
.principle-card p,
.process-track p { font-size: 14px !important; }

/* The tiny labels inside simulated app mockups are intentionally left compact. */

/* ---------- Case studies ---------- */
.wrap .hero { padding-top: clamp(72px,7vw,94px); }
.wrap .lead { font-size: clamp(18px,1.7vw,22px) !important; }
.wrap .fact small { font-size: 10px !important; }
.wrap .fact strong { font-size: 14px !important; }
.wrap .copy p { font-size: 17px !important; }
.wrap .tag { font-size: 10px !important; padding: 9px 11px !important; }
.wrap .next { font-size: 11px !important; }
.wrap .visual {
  background:
    linear-gradient(rgba(73,118,164,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(73,118,164,.045) 1px,transparent 1px),
    linear-gradient(135deg,#070d17,#09060f) !important;
  background-size: 30px 30px,30px 30px,auto !important;
}

/* ---------- Command palette ---------- */
.fx-command-trigger {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(0,239,255,.28);
  background: rgba(5,9,16,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #b9c5d9;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font: 700 10px "Space Mono",monospace;
  letter-spacing: .08em;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  transition: .25s ease;
}
.fx-command-trigger::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fx-cyan);
  box-shadow: 0 0 12px rgba(0,239,255,.7);
}
.fx-command-trigger:hover { transform: translateY(-3px); border-color: rgba(255,43,214,.45); }
.fx-command-trigger kbd {
  border: 1px solid rgba(139,168,209,.19);
  padding: 4px 6px;
  color: #69768c;
  font: inherit;
}

.fx-command-palette {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2,3,7,.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.fx-command-palette.open { opacity: 1; visibility: visible; }
.fx-command-box {
  width: min(620px,100%);
  border: 1px solid rgba(137,170,217,.27);
  background: linear-gradient(145deg,rgba(10,14,25,.98),rgba(5,7,12,.98));
  box-shadow: 0 32px 100px rgba(0,0,0,.48), 0 0 70px rgba(0,239,255,.04);
  transform: translateY(15px) scale(.98);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.fx-command-palette.open .fx-command-box { transform: none; }
.fx-command-top {
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(134,166,213,.17);
  color: #728097;
  font: 700 10px "Space Mono",monospace;
  letter-spacing: .1em;
}
.fx-command-top b { color: var(--fx-green); font-weight: 700; }
.fx-command-list { padding: 8px; display:grid; gap:4px; }
.fx-command-list a,
.fx-command-list button {
  min-height: 56px;
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: #b8c3d5;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  font: 700 12px "Space Mono",monospace;
  transition: .2s ease;
}
.fx-command-list a span:first-child,
.fx-command-list button span:first-child { color: #647188; }
.fx-command-list a em,
.fx-command-list button em { color: #5f6d83; font: normal 400 9px "Space Mono",monospace; }
.fx-command-list a:hover,
.fx-command-list button:hover,
.fx-command-list a:focus-visible,
.fx-command-list button:focus-visible {
  border-color: rgba(0,239,255,.22);
  background: linear-gradient(90deg,rgba(0,239,255,.06),rgba(255,43,214,.025));
  color: white;
}
.fx-command-foot {
  min-height: 46px;
  padding: 0 18px;
  border-top: 1px solid rgba(134,166,213,.17);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#66748a;
  font:700 9px "Space Mono",monospace;
}

/* ---------- Boot ---------- */
.fx-boot {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: #040509;
  display: grid;
  place-items: center;
  transition: opacity .42s ease, visibility .42s ease;
}
.fx-boot.done { opacity:0; visibility:hidden; }
.fx-boot-box {
  width: min(620px,calc(100% - 40px));
  font: 700 11px "Space Mono",monospace;
  letter-spacing:.08em;
  color:#718198;
}
.fx-boot-box strong {
  display:block;
  color:white;
  font-size: clamp(22px,4vw,38px);
  letter-spacing:-.04em;
  margin-bottom:20px;
}
.fx-boot-line { display:flex; justify-content:space-between; gap:18px; padding:7px 0; border-bottom:1px solid rgba(116,149,197,.08); }
.fx-boot-line b { color:var(--fx-green); }
.fx-boot-progress { margin-top:18px;height:2px;background:rgba(124,158,207,.13);overflow:hidden; }
.fx-boot-progress i { display:block;height:100%;width:0;background:linear-gradient(90deg,var(--fx-cyan),var(--fx-violet),var(--fx-pink));animation:fxBoot 1s cubic-bezier(.16,1,.3,1) forwards; }

/* ---------- Toast / click ripple ---------- */
.fx-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 2000;
  transform: translate(-50%,18px);
  opacity:0;
  pointer-events:none;
  min-height:42px;
  padding:0 14px;
  display:flex;
  align-items:center;
  border:1px solid rgba(0,239,255,.28);
  background:rgba(5,9,16,.93);
  color:#cbd5e5;
  font:700 10px "Space Mono",monospace;
  letter-spacing:.07em;
  transition:.25s ease;
}
.fx-toast.show { opacity:1;transform:translate(-50%,0); }
.fx-ripple {
  position: fixed;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  border:1px solid rgba(0,239,255,.72);
  box-shadow:0 0 20px rgba(255,43,214,.28);
  animation:fxRipple .55s cubic-bezier(.16,1,.3,1) forwards;
}



/* ---------- Website client availability / services ---------- */
.client-availability {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 16px;
  width: min(760px,100%);
  margin: 24px 0 26px;
  padding: 15px 17px;
  border: 1px solid rgba(72,255,155,.25);
  background:
    linear-gradient(90deg,rgba(72,255,155,.075),rgba(0,239,255,.025) 52%,rgba(255,43,214,.035)),
    rgba(5,10,16,.62);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.client-availability::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.07) 48%,transparent 67%);
  translate:-120% 0;
  transition:translate .75s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.client-availability:hover::before { translate:120% 0; }
.client-availability:hover {
  border-color:rgba(72,255,155,.5);
  box-shadow:0 0 34px rgba(72,255,155,.08),inset 0 0 32px rgba(0,239,255,.025);
}
.client-availability > strong {
  color:#eef8ff;
  font-size:clamp(13px,1.04vw,16px);
  letter-spacing:.035em;
}
.client-live {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--fx-green);
  font:700 10px/1.3 "Space Mono",monospace;
  letter-spacing:.08em;
  white-space:nowrap;
}
.client-live i,
.fx-client-badge > i {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--fx-green);
  box-shadow:0 0 0 4px rgba(72,255,155,.08),0 0 16px rgba(72,255,155,.58);
  animation:fxClientPulse 1.9s ease-in-out infinite;
}
.client-link {
  color:#b7c6d8;
  font:700 10px "Space Mono",monospace;
  letter-spacing:.07em;
  white-space:nowrap;
}
.client-link b { color:var(--fx-cyan);margin-left:4px; }

.web-service-section {
  position:relative;
  width:min(calc(100% - 64px),1440px);
  margin:0 auto;
  padding:clamp(82px,8vw,116px) 0;
  border-top:1px solid rgba(133,165,211,.14);
  border-bottom:1px solid rgba(133,165,211,.14);
}
.web-service-section::before {
  content:"WEB / CLIENT MODE";
  position:absolute;
  right:0;
  top:22px;
  color:rgba(126,153,190,.3);
  font:700 9px "Space Mono",monospace;
  letter-spacing:.14em;
}
.web-service-head {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:clamp(34px,6vw,88px);
  align-items:end;
  margin-bottom:34px;
}
.web-service-head h2 {
  margin:12px 0 0;
  font-size:clamp(46px,6.7vw,104px);
  line-height:.87;
  letter-spacing:-.062em;
}
.web-service-head h2 span {
  color:transparent;
  -webkit-text-stroke:1px rgba(224,239,255,.72);
}
.web-service-intro p {
  margin:14px 0 0;
  color:var(--fx-soft);
  font-size:clamp(15px,1.13vw,18px);
  line-height:1.7;
}
.client-service-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid rgba(140,174,223,.16);
  background:rgba(6,10,17,.38);
}
.client-service-card {
  position:relative;
  min-height:245px;
  padding:25px 23px 22px;
  border-right:1px solid rgba(140,174,223,.13);
  overflow:hidden;
  transition:border-color .25s ease,background .25s ease;
}
.client-service-card:last-child { border-right:0; }
.client-service-card:hover { background:rgba(9,18,28,.67); }
.client-service-card small {
  display:block;
  color:#718199;
  font:700 10px "Space Mono",monospace;
  letter-spacing:.09em;
}
.client-service-card strong {
  display:block;
  margin:30px 0 13px;
  color:#edf7ff;
  font-size:clamp(18px,1.45vw,23px);
  line-height:1.05;
  letter-spacing:-.025em;
}
.client-service-card p {
  margin:0;
  color:#8fa1b9;
  font-size:14px;
  line-height:1.65;
}
.client-service-card > span {
  position:absolute;
  left:23px;
  right:23px;
  bottom:20px;
  color:rgba(0,239,255,.65);
  font:700 8px "Space Mono",monospace;
  letter-spacing:.08em;
}
.client-project-cta {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:34px;
  margin-top:22px;
  padding:26px 28px;
  border:1px solid rgba(72,255,155,.24);
  background:linear-gradient(105deg,rgba(72,255,155,.065),rgba(0,239,255,.022) 48%,rgba(255,43,214,.035));
  overflow:hidden;
}
.client-project-cta small {
  display:block;
  margin-bottom:8px;
  color:var(--fx-green);
  font:700 10px "Space Mono",monospace;
  letter-spacing:.1em;
}
.client-project-cta strong {
  display:block;
  max-width:830px;
  color:#dce8f6;
  font-size:clamp(15px,1.22vw,19px);
  line-height:1.45;
  letter-spacing:.005em;
}
.portfolio-web-service { width:min(calc(100% - 64px),var(--max,1440px)); }

.fx-client-badge {
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:1900;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:178px;
  min-height:48px;
  padding:8px 12px;
  border:1px solid rgba(72,255,155,.24);
  background:rgba(4,9,15,.88);
  backdrop-filter:blur(14px);
  color:#dce8f4;
  text-decoration:none;
  box-shadow:0 8px 32px rgba(0,0,0,.25);
  transition:.25s ease;
}
.fx-client-badge:hover {
  translate:0 -3px;
  border-color:rgba(72,255,155,.5);
  box-shadow:0 12px 38px rgba(0,0,0,.34),0 0 24px rgba(72,255,155,.07);
}
.fx-client-badge span { display:grid;gap:2px; }
.fx-client-badge small {
  color:#73849a;
  font:700 8px "Space Mono",monospace;
  letter-spacing:.08em;
}
.fx-client-badge strong {
  color:var(--fx-green);
  font:700 11px "Space Mono",monospace;
  letter-spacing:.11em;
}
.fx-client-badge > b { margin-left:auto;color:var(--fx-cyan);font-size:13px; }
.contact-services {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}
.contact-services span {
  padding:9px 10px;
  border:1px solid rgba(0,239,255,.16);
  background:rgba(0,239,255,.035);
  color:#9fb0c6;
  font:700 9px "Space Mono",monospace;
  letter-spacing:.06em;
}
.client-open { color:var(--fx-green)!important; }

@keyframes fxClientPulse {
  0%,100% { opacity:.5;transform:scale(.82); }
  50% { opacity:1;transform:scale(1.12); }
}



/* ---------- Website Studio funnel ---------- */
.studio-entry-strip{
  margin-top:18px;padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  border:1px solid rgba(0,239,255,.18);background:linear-gradient(100deg,rgba(0,239,255,.055),rgba(139,92,255,.035),rgba(72,255,155,.035));
}
.studio-entry-strip span{display:block;color:#71839c;font:700 9px "Space Mono",monospace;letter-spacing:.09em;margin-bottom:5px}
.studio-entry-strip strong{display:block;color:#e9f5ff;font-size:clamp(15px,1.15vw,19px);line-height:1.35}
.studio-entry-strip a{display:inline-flex;align-items:center;gap:16px;padding:13px 15px;border:1px solid rgba(0,239,255,.28);color:#dffcff;text-decoration:none;font:700 10px "Space Mono",monospace;letter-spacing:.08em;background:rgba(0,239,255,.04)}
.studio-entry-strip a:hover{border-color:rgba(0,239,255,.62);background:rgba(0,239,255,.08)}
.client-trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:14px;background:rgba(126,158,203,.12);border:1px solid rgba(126,158,203,.12)}
.client-trust-row span{padding:13px 12px;background:#060a11;color:#8fa1b8;text-align:center;font:700 8px "Space Mono",monospace;letter-spacing:.06em}
@media(max-width:760px){.studio-entry-strip{grid-template-columns:1fr}.studio-entry-strip a{justify-content:space-between}.client-trust-row{grid-template-columns:1fr 1fr}}

/* ---------- Animations ---------- */
@keyframes fxBlob {
  0% { transform: translate3d(-2%,0,0) rotate(0deg) scale(.96); }
  100% { transform: translate3d(8%,6%,0) rotate(28deg) scale(1.08); }
}
@keyframes fxOrbitGrid { to { transform: rotate(360deg); } }
@keyframes fxMarquee { to { transform: translateX(-50%); } }
@keyframes fxPulse { 0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)} }
@keyframes fxSignalBar { 0%,100%{transform:scaleX(.16);opacity:.35}50%{transform:scaleX(1);opacity:.8} }
@keyframes fxConsoleSpin { to { transform:rotate(360deg); } }
@keyframes fxBoot { to { width:100%; } }
@keyframes fxRipple { to { width:120px;height:120px;margin:-60px 0 0 -60px;opacity:0; } }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .fx-section-rail { display:none; }
  .signal-deck-grid { grid-template-columns:repeat(2,1fr); }
  .build-system-grid { grid-template-columns:1fr; }
  .build-console { position:relative;top:auto;min-height:470px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  body { font-size:16px; }
  .signal-deck,
  .build-system { width:min(calc(100% - 28px),var(--max,1440px)); }
  .signal-deck-grid { grid-template-columns:1fr; }
  .signal-card { min-height:132px; }
  .signal-card p { font-size:14px; }
  .build-console { min-height:390px; }
  .console-readout { grid-template-columns:1fr 1fr; }
  .console-readout div:last-child { display:none; }
  .method-step { grid-template-columns:42px 1fr;min-height:132px;padding:18px; }
  .method-step b { display:none; }
  .capability-deck { grid-template-columns:1fr; }
  .direction-banner { grid-template-columns:1fr;gap:7px; }
  .direction-banner i { display:none; }
  .fx-command-trigger { right:14px;bottom:14px; }
  .fx-command-trigger kbd { display:none; }
  .fx-marquee-track { height:46px;font-size:10px; }
  .hero-lead,.hero-intro,.lead { font-size:17px !important; }
  .section-heading > p,.site-purpose p,.card-copy p,.card p,.story p,.contact-copy p,.copy p { font-size:15px !important; }
  .shell .card p { font-size:15px !important; }
  .wrap .copy p { font-size:16px !important; }
}

@media (hover: none), (pointer: coarse) {
  .fx-cursor-dot,.fx-cursor-ring,.fx-pointer-light { display:none !important; }
  [data-fx-card] { transform:none !important; }
}


@media (max-width: 1080px) {
  .client-service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .client-service-card:nth-child(2) { border-right:0; }
  .client-service-card:nth-child(-n+2) { border-bottom:1px solid rgba(140,174,223,.13); }
  .web-service-head { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
  .client-availability { grid-template-columns:1fr;gap:8px;padding:14px;margin:18px 0 22px; }
  .client-availability > strong { font-size:14px; }
  .client-link { white-space:normal; }
  .web-service-section,.portfolio-web-service { width:min(calc(100% - 28px),1440px);padding:68px 0; }
  .web-service-section::before { display:none; }
  .web-service-head h2 { font-size:clamp(42px,14vw,68px); }
  .client-service-grid { grid-template-columns:1fr; }
  .client-service-card { min-height:215px;border-right:0!important;border-bottom:1px solid rgba(140,174,223,.13); }
  .client-service-card:last-child { border-bottom:0; }
  .client-project-cta { grid-template-columns:1fr;padding:21px 19px; }
  .client-project-cta .primary-btn,.client-project-cta .btn { width:100%;justify-content:space-between; }
  .fx-client-badge { left:12px;bottom:12px;min-width:0;padding:8px 10px; }
  .fx-client-badge small { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-atmosphere::before,
  .fx-atmosphere::after,
  .fx-marquee-track,
  .build-console::before,
  .build-console::after,
  .console-core::before,
  .signal-card .signal-bar,
  .fx-boot-progress i { animation:none !important; }
  .fx-particle-field,
  .fx-cursor-dot,
  .fx-cursor-ring,
  .fx-pointer-light { display:none !important; }
  .fx-reveal { opacity:1 !important;translate:0 !important;filter:none !important; }
  [data-fx-card] { transform:none !important; }
}


/* ===== CLARITY UX V4 ===== */
body{font-size:17px}.main-nav,.site-nav,header nav{font-size:clamp(12px,.85vw,14px)!important}.hero-lead,.hero-intro,.lead{font-size:clamp(18px,1.45vw,22px)!important;color:#b3bdcd!important}.section-heading>p,.site-purpose p,.card-copy p,.card p,.story p,.contact-copy p,.copy p,.identity-card-copy p,.principle-card p,.process-track p{font-size:clamp(16px,1.08vw,18px)!important;color:#aeb8c9!important}.primary-btn,.secondary-btn,.btn,.closing-link{font-size:12px!important}.featured-section,.site-purpose,.contact-section,.about-section,.domains-section,.work-section{padding-top:clamp(64px,7vw,94px)!important;padding-bottom:clamp(68px,7vw,100px)!important}
.clarity-home .fx-section-rail{display:none!important}.clarity-home .fx-client-badge{bottom:18px}.clarity-home .site-header{grid-template-columns:1fr auto auto;gap:24px}.clarity-home .main-nav{gap:21px}.clarity-home .nav-hire{color:#dffcff;border:1px solid rgba(0,239,255,.28);padding:9px 11px}.clarity-home .header-node{min-width:88px}.clarity-home .hero{min-height:min(830px,calc(100vh - 88px));grid-template-columns:minmax(0,1.03fr) minmax(420px,.77fr);padding:54px 0 78px}.clarity-home .hero h1{font-size:clamp(58px,6.6vw,105px);max-width:940px}.clarity-status{display:inline-flex;align-items:center;gap:9px;color:#b8ffd5;font:800 11px "Space Mono",monospace;letter-spacing:.07em}.clarity-status i{width:8px;height:8px;border-radius:50%;background:#48ff9b;box-shadow:0 0 16px rgba(72,255,155,.75)}.clarity-home .hero-lead{max-width:760px}.clarity-primary{background:linear-gradient(110deg,#f7fbff,#dffcff)!important}.clarity-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:36px;border:1px solid var(--line);background:var(--line);max-width:820px}.clarity-proof>div{background:rgba(7,10,17,.88);padding:16px}.clarity-proof strong,.clarity-proof span{display:block}.clarity-proof strong{font-size:12px}.clarity-proof span{margin-top:5px;color:#8f9caf;font-size:12px;line-height:1.45}.clarity-core{min-height:560px}.clarity-core-label{position:absolute;left:0;top:38px;z-index:4}.clarity-core-label span,.clarity-core-label strong{display:block}.clarity-core-label span{font:700 9px "Space Mono",monospace;color:#778398;letter-spacing:.08em}.clarity-core-label strong{font-size:15px;margin-top:5px}.clarity-core-tags{position:absolute;right:0;bottom:42px;display:flex;gap:6px;z-index:4}.clarity-core-tags span{padding:7px 8px;border:1px solid var(--line);background:rgba(8,12,20,.7);font:700 8px "Space Mono",monospace;color:#9ca8ba}
.clarity-section,.clarity-final{width:min(calc(100% - 48px),var(--max));margin:0 auto;padding:82px 0;border-top:1px solid var(--line)}.clarity-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:34px}.clarity-section-head>div>span,.clarity-final>div>span{color:var(--cyan);font:800 11px "Space Mono",monospace;letter-spacing:.08em}.clarity-section-head h2,.clarity-final h2,.clarity-web-cta h2{font-size:clamp(44px,5.1vw,78px);line-height:.93;letter-spacing:-.055em;margin:10px 0 0}.clarity-section-head h2 em,.clarity-final h2 em,.clarity-web-cta h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(229,239,255,.8)}.clarity-section-head>p{max-width:470px;color:#a3aec0;font-size:17px;line-height:1.58;margin:0}.clarity-service-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px}.clarity-service-card{min-height:330px;border:1px solid var(--line);padding:24px;display:grid;grid-template-columns:auto 1fr;gap:18px;background:rgba(7,11,18,.64);position:relative;overflow:hidden}.clarity-service-card.featured-service{border-color:rgba(0,239,255,.35);background:linear-gradient(145deg,rgba(0,239,255,.07),rgba(8,12,20,.7) 48%,rgba(138,92,255,.035))}.service-number{color:#647188;font:800 10px "Space Mono",monospace}.clarity-service-card small{color:var(--cyan);font:800 9px "Space Mono",monospace;letter-spacing:.06em}.clarity-service-card h3{font-size:clamp(25px,2vw,34px);letter-spacing:-.035em;margin:8px 0 11px}.clarity-service-card p{font-size:15px;line-height:1.65;color:#a2aec0}.clarity-service-card a{position:absolute;left:59px;right:24px;bottom:22px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#d7e0ed;font:800 10px "Space Mono",monospace}.clarity-web-cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.8fr);gap:70px;align-items:center}.clarity-pill{display:inline-flex;align-items:center;gap:8px;color:#b9ffd8;font:800 10px "Space Mono",monospace}.clarity-pill i{width:7px;height:7px;border-radius:50%;background:#48ff9b;box-shadow:0 0 13px rgba(72,255,155,.75)}.web-cta-copy>p{font-size:18px;line-height:1.62;color:#a8b3c4;max-width:760px}.web-cta-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0}.web-cta-steps span{border:1px solid var(--line);padding:12px;color:#9eabbc;font-size:12px}.web-cta-steps b{color:var(--cyan);margin-right:6px}.mini-browser{border:1px solid rgba(0,239,255,.25);background:#070b12;box-shadow:0 30px 90px rgba(0,0,0,.3);transform:rotate(1deg)}.mini-browser-top{height:38px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--line)}.mini-browser-top i{width:6px;height:6px;border-radius:50%;background:#596679}.mini-browser-top span{margin-left:auto;color:#657187;font:700 7px "Space Mono",monospace}.mini-browser-body{min-height:360px;padding:52px 34px;position:relative;overflow:hidden;background:radial-gradient(circle at 82% 28%,rgba(138,92,255,.16),transparent 30%),linear-gradient(rgba(0,239,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,239,255,.03) 1px,transparent 1px);background-size:auto,36px 36px,36px 36px}.mini-browser-body small{color:var(--cyan);font:700 8px "Space Mono",monospace}.mini-browser-body strong{display:block;font-size:clamp(34px,3.7vw,58px);line-height:.89;letter-spacing:-.06em;margin:12px 0}.mini-browser-body strong em{font-style:normal;color:var(--cyan)}.mini-browser-body p{font-size:12px;color:#8d9bae;max-width:320px}.mini-button{display:inline-block;background:var(--cyan);color:#051015;padding:10px 12px;font:900 8px "Space Mono",monospace}.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:32px}.mini-cards i{height:58px;border:1px solid rgba(0,239,255,.16);background:rgba(255,255,255,.018)}.clarity-text-link{color:#bcc7d7;font:800 11px "Space Mono",monospace}.clarity-work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.clarity-work-card{min-height:315px;border:1px solid var(--line);background:rgba(7,10,17,.62);padding:24px;display:flex;flex-direction:column;position:relative}.clarity-work-card:hover{border-color:rgba(0,239,255,.35)}.clarity-work-card>span{color:#738198;font:800 9px "Space Mono",monospace}.clarity-work-card h3{font-size:clamp(30px,3vw,46px);letter-spacing:-.045em;margin:10px 0}.clarity-work-card p{color:#9eabbc;font-size:15px;line-height:1.6;max-width:650px}.clarity-work-card>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.clarity-work-card>div b{padding:6px 8px;border:1px solid var(--line);color:#8f9db0;font:700 8px "Space Mono",monospace}.clarity-work-card>strong{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font:800 10px "Space Mono",monospace;color:#c7d2e1}.clarity-process-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line)}.clarity-process-row article{padding:22px;border-right:1px solid var(--line)}.clarity-process-row article:last-child{border-right:0}.clarity-process-row b{color:var(--cyan);font:800 9px "Space Mono",monospace}.clarity-process-row strong{display:block;font-size:15px;margin:10px 0 6px}.clarity-process-row p{color:#8f9caf;font-size:13px;line-height:1.5;margin:0}.clarity-final{display:flex;justify-content:space-between;align-items:center;gap:50px;padding-bottom:110px}.clarity-final>div:last-child{display:flex;gap:10px;flex-wrap:wrap}.clarity-home footer{width:min(calc(100% - 48px),var(--max));margin:0 auto;padding:24px 0;border-top:1px solid var(--line);display:flex;gap:24px;align-items:center;color:#728096;font:700 9px "Space Mono",monospace}.clarity-home footer a{margin-left:auto}.clarity-home footer a+a{margin-left:0}
/* Portfolio clarity: plain-language first impression without removing its visual identity. */
body:not(.clarity-home):not(.studio-body) .hero .hero-intro{max-width:760px!important}.portfolio-clarity-note{margin-top:18px;border-left:2px solid var(--fx-cyan);padding:10px 14px;color:#aab6c8;font-size:14px;line-height:1.5}.portfolio-clarity-note strong{color:white}
@media(max-width:1100px){.clarity-home .site-header{grid-template-columns:1fr auto}.clarity-home .header-node{display:none}.clarity-home .hero{grid-template-columns:1fr;min-height:auto}.clarity-home .hero-core{min-height:500px}.clarity-service-grid{grid-template-columns:1fr}.clarity-service-card{min-height:240px}.clarity-web-cta{grid-template-columns:1fr}.clarity-process-row{grid-template-columns:repeat(2,1fr)}.clarity-process-row article:nth-child(2){border-right:0}.clarity-process-row article:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media(max-width:760px){body{font-size:16px}.clarity-home .site-header{width:calc(100% - 24px)}.clarity-home .hero,.clarity-section,.clarity-final,.clarity-home footer{width:calc(100% - 24px)}.clarity-home .hero{padding:44px 0 62px}.clarity-home .hero h1{font-size:clamp(50px,15vw,74px)}.clarity-proof{grid-template-columns:1fr}.clarity-core{min-height:390px}.clarity-core-label{top:10px}.clarity-core-tags{bottom:10px}.clarity-section,.clarity-final{padding:64px 0}.clarity-section-head{align-items:flex-start;flex-direction:column;gap:18px}.clarity-section-head h2,.clarity-final h2,.clarity-web-cta h2{font-size:clamp(39px,12vw,58px)}.clarity-service-card{grid-template-columns:1fr}.clarity-service-card a{left:24px}.web-cta-steps{grid-template-columns:1fr}.clarity-work-grid{grid-template-columns:1fr}.clarity-process-row{grid-template-columns:1fr}.clarity-process-row article{border-right:0;border-bottom:1px solid var(--line)}.clarity-process-row article:last-child{border-bottom:0}.clarity-final{align-items:flex-start;flex-direction:column}.clarity-home footer{flex-wrap:wrap}.clarity-home footer a{margin-left:0}.clarity-home .fx-command-trigger{display:none!important}}