:root {
  --bg: #07090d;
  --bg-soft: #0c1017;
  --panel: #111720;
  --panel-2: #161d28;
  --text: #f3f5f7;
  --muted: #9aa6b2;
  --faint: #66717c;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .22);
  --red: #ff315f;
  --cyan: #43e8d8;
  --violet: #9f7aea;
  --warm: #f6f1e8;
  --ink: #101318;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-move: cubic-bezier(.77, 0, .175, 1);
  --page-progress: 0;
}

/* Performance pass: keep the deck readable without expensive full-card compositing. */
@media (min-width: 992px) {
  .service-studio .service-panel, .service-studio .service-panel[hidden] { transition: transform 160ms cubic-bezier(.23,1,.32,1), opacity 120ms ease-out; box-shadow: 0 14px 34px rgba(0,0,0,.2); }
  .service-studio .service-panel.deck-active { box-shadow: 0 18px 42px rgba(0,0,0,.28), 0 0 0 1px rgba(103,231,240,.18); }
  .service-studio .service-panel::after { display:none; }
}

/* Six-service deck: each service is a full reading card, not content in a small tab box. */
.service-studio .service-tabs-wrap { position: relative; top: auto; margin: 0 0 18px; background: transparent; border: 0; padding: 0; }
.service-studio .service-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.service-studio .service-tabs button { flex: 0 0 auto; min-width: 118px; min-height: 46px; padding: 8px 12px; border-color: rgba(142,231,240,.14); background: rgba(10,19,29,.68); }
.service-studio .service-tabs button span { display: inline; margin: 0 7px 0 0; }
.service-studio .service-panels { position: relative; min-height: min(78vh, 860px); isolation: isolate; }
.service-studio .service-panel, .service-studio .service-panel[hidden] { display: block; position: absolute; inset: 0; min-height: 0; margin: 0; padding: clamp(30px,4.4vw,70px); overflow-y: auto; overscroll-behavior: contain; border-radius: 26px; opacity: 0; pointer-events: none; transform: translate3d(64px,28px,0) scale(.94); transform-origin: 50% 100%; transition: transform 260ms cubic-bezier(.23,1,.32,1), opacity 180ms ease-out, box-shadow 260ms cubic-bezier(.23,1,.32,1); box-shadow: 0 34px 80px rgba(0,0,0,.34); }
.service-studio .service-panel:nth-child(1){background:linear-gradient(135deg,#112b37,#0b1622 66%)}.service-studio .service-panel:nth-child(2){background:linear-gradient(135deg,#172654,#0d1525 66%)}.service-studio .service-panel:nth-child(3){background:linear-gradient(135deg,#25314b,#101828 66%)}.service-studio .service-panel:nth-child(4){background:linear-gradient(135deg,#213d42,#101c22 66%)}.service-studio .service-panel:nth-child(5){background:linear-gradient(135deg,#3b2e48,#191329 66%)}.service-studio .service-panel:nth-child(6){background:linear-gradient(135deg,#41342b,#1b1713 66%)}
.service-studio .service-panel.deck-active { z-index: 6; opacity: 1; pointer-events: auto; transform: translate3d(0,0,0) scale(1); box-shadow: 0 44px 98px rgba(0,0,0,.5), 0 0 0 1px rgba(103,231,240,.25); }
.service-studio .service-panel.deck-next { z-index: 5; opacity: .72; transform: translate3d(42px,22px,0) scale(.965); }
.service-studio .service-panel.deck-back { z-index: 4; opacity: .36; transform: translate3d(-24px,32px,0) scale(.93); }
.service-studio .service-panel.deck-far { z-index: 1; }
.service-studio .service-panel::after { content: ""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; border:1px solid rgba(177,237,241,.16); }
@media (max-width: 991px) { .service-studio .service-panels { min-height: 72vh; }.service-studio .service-panel,.service-studio .service-panel[hidden]{padding:28px 20px;border-radius:20px}.service-studio .service-panel.deck-next{transform:translate3d(18px,16px,0) scale(.98)} }
@media (prefers-reduced-motion: reduce) { .service-studio .service-panel,.service-studio .service-panel[hidden]{transition:none;} }

/* Approved two-person cartoon portrait in the company-introduction panel. */
.about-2 .founder-portrait-panel { display: grid; place-items: center; padding: clamp(32px, 5vw, 76px); }
.about-2 .founder-portrait { width: min(100%, 600px); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: #101a28; box-shadow: 0 24px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(82,219,232,.34); }
.about-2 .col-lg-6:first-child .founder-portrait img { width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center; background: #101a28; filter: saturate(.94) contrast(1.03); }
@media (max-width: 991px) { .about-2 .founder-portrait-panel { padding: 28px; } .about-2 .founder-portrait { width: min(100%, 640px); } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 8%, rgba(159,122,234,.10), transparent 30rem),
    radial-gradient(circle at 88% 24%, rgba(67,232,216,.07), transparent 26rem),
    var(--bg);
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.72;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h, .sub-title-2 h { display: inline; font: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: min(1220px, calc(100% - 64px)); margin-inline: auto; }
.container-fluid { width: 100%; }
.row { display: flex; flex-wrap: wrap; }
.col-12, .col-lg-12, .col-md-12 { width: 100%; }
.text-center { text-align: center; }
.img-fluid { width: 100%; }
.section { position: relative; padding: clamp(100px, 12vw, 180px) 0; }
.bg-one, .section-bg { background: transparent; }
.p-0, .padding-0 { padding: 0; }
.no-gutters { margin: 0; }
.align-items-center { align-items: center; }

/* Global workflow rail: GitHub-like anchor structure + Comfy-like connected states. */
.workflow-rail {
  position: fixed;
  z-index: 26;
  top: 50%;
  left: 18px;
  width: 18px;
  height: min(54vh, 520px);
  transform: translateY(-50%);
  pointer-events: none;
}
.workflow-rail::before,
.workflow-rail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  width: 2px;
  height: 100%;
  border-radius: 999px;
}
.workflow-rail::before { background: rgba(255,255,255,.12); }
.workflow-rail::after {
  background: linear-gradient(var(--cyan), var(--violet) 52%, var(--red));
  transform: scaleY(var(--page-progress));
  transform-origin: top;
  transition: transform 80ms linear;
}
.workflow-rail span {
  position: absolute;
  left: 4px;
  width: 10px;
  height: 10px;
  border: 2px solid #26303c;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(7,9,13,.8);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms var(--ease-out);
}
.workflow-rail span:nth-child(1) { top: 0; }
.workflow-rail span:nth-child(2) { top: 33%; }
.workflow-rail span:nth-child(3) { top: 66%; }
.workflow-rail span:nth-child(4) { bottom: 0; }
.workflow-rail span.is-active { border-color: var(--cyan); background: var(--cyan); transform: scale(1.25); }

/* Hero — a staged system, not a background banner. */
.hero-area {
  position: relative;
  isolation: isolate;
  min-height: max(780px, 100svh);
  display: grid;
  place-items: end start;
  overflow: hidden;
  color: var(--text);
  background-size: cover;
  background-position: center;
}
.hero-area::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -3%;
  background: inherit;
  filter: saturate(.72) contrast(1.08);
  transform: scale(1.045) translate3d(calc(var(--hero-x, 0) * -8px), calc(var(--hero-y, 0) * -6px), 0);
  transition: transform 220ms var(--ease-out);
}
.hero-area::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,9,13,.28), rgba(7,9,13,.56) 42%, #07090d 98%),
    linear-gradient(90deg, rgba(7,9,13,.92) 0%, rgba(7,9,13,.55) 56%, rgba(7,9,13,.22));
}
.hero-area > .block {
  position: relative;
  z-index: 3;
  width: min(1220px, calc(100% - 64px));
  margin: 0 auto;
  padding: 180px 0 100px;
}
.hero-area .video-button { margin: 0 0 clamp(32px, 5vw, 64px); }
.hero-area .logo svg { width: clamp(220px, 27vw, 360px); height: auto; }
.hero-area h1 {
  width: min(980px, 100%);
  margin: 0 0 28px;
  padding: 0 !important;
  font-size: clamp(2.65rem, 6.3vw, 6.75rem);
  font-weight: 760;
  line-height: .98;
  letter-spacing: -.065em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hero-area p { max-width: 790px; margin: 0 0 24px; color: rgba(243,245,247,.74); font-size: clamp(1rem, 1.25vw, 1.18rem); }
.hero-area .sub-title-2 { display: block; max-width: 830px; margin: 0 0 36px; padding: 20px 22px; border: 1px solid rgba(255,255,255,.13); border-radius: 16px; background: rgba(8,11,16,.48); color: rgba(243,245,247,.88); backdrop-filter: blur(16px); }
.hero-area .sub-title-2 br { line-height: 2.05; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--cyan);
  font: 700 .72rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.hero-kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.hero-network { position: absolute; z-index: 1; inset: 0 0 0 48%; pointer-events: none; opacity: .82; }
.hero-network svg { width: 100%; height: 100%; overflow: visible; }
.hero-network path { fill: none; stroke: url(#flowGradient); stroke-width: .32; stroke-dasharray: 2.2 2.4; opacity: .7; }
.hero-node {
  position: absolute;
  width: 74px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 11px;
  background: rgba(12,16,23,.82);
  box-shadow: 0 18px 60px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.08);
  color: var(--muted);
  font: 700 .68rem/1 ui-monospace, monospace;
  backdrop-filter: blur(12px);
  animation: node-float 5.8s var(--ease-move) infinite alternate;
}
.hero-node::before { content: ""; position: absolute; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.hero-node:nth-of-type(1) { top: 18%; left: 26%; animation-delay: -.8s; }
.hero-node:nth-of-type(2) { top: 39%; right: 13%; animation-delay: -2.1s; }
.hero-node:nth-of-type(3) { top: 61%; left: 31%; animation-delay: -3.2s; }
.hero-node:nth-of-type(4) { top: 76%; right: 20%; animation-delay: -1.4s; }
@keyframes node-float { from { transform: translate3d(0,-5px,0); } to { transform: translate3d(0,7px,0); } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 24px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight: 720;
  line-height: 1.35;
  transition: transform 160ms var(--ease-out), border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.hero-area .btn { border-color: transparent; background: var(--red) !important; color: white; box-shadow: 0 16px 44px rgba(255,49,95,.25); }

/* Navigation: precise product chrome, not floating decoration. */
.navigation {
  position: sticky;
  z-index: 30;
  top: 0;
  height: 72px;
  display: flex;
  align-items: center;
  border-block: 1px solid rgba(255,255,255,.09);
  background: rgba(7,9,13,.82);
  backdrop-filter: blur(22px) saturate(140%);
}
.navigation .navbar-header, .navigation .navbar { width: 100%; }
.navigation .navbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.navigation .logo svg { display: block; width: min(230px, 34vw); height: auto; }
.navigation .navbar-collapse { display: flex; align-items: center; justify-content: flex-end; }
.navigation .navbar-nav { display: flex; align-items: center; gap: clamp(13px, 1.8vw, 26px); }
.navigation .nav-link { position: relative; display: block; padding: 24px 0 21px; color: rgba(243,245,247,.62); font-size: .82rem; font-weight: 720; }
.navigation .nav-link::after { content: ""; position: absolute; right: 0; bottom: 16px; left: 0; height: 2px; border-radius: 999px; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-out); }
.navigation .nav-link:hover, .navigation .nav-link.is-active { color: var(--text); }
.navigation .nav-link.is-active::after { transform: scaleX(1); }
.navigation .nav-item:last-child .nav-link, .navigation .nav-item:nth-last-child(2) .nav-link { color: var(--cyan); }
.navbar-toggler { display: none; padding: 9px; border: 0; background: transparent; color: white; }
.navbar-toggler-icon { position: relative; display: block; width: 24px; height: 16px; border-block: 2px solid currentColor; }
.navbar-toggler-icon::after { content: ""; position: absolute; top: 5px; left: 0; width: 100%; height: 2px; background: currentColor; }

/* Section language and scroll reveal. */
.title { position: relative; z-index: 2; margin-bottom: clamp(54px, 8vw, 98px); }
.title::before { content: attr(data-index); display: block; margin-bottom: 18px; color: var(--cyan); font: 700 .72rem/1 ui-monospace, monospace; letter-spacing: .18em; }
.title h2 { max-width: 990px; margin: 0 auto; font-size: clamp(2.35rem, 5.2vw, 5.4rem); font-weight: 760; line-height: 1.02; letter-spacing: -.055em; text-wrap: balance; overflow-wrap: anywhere; }
.title .color { color: var(--red); }
.about .title h2 {
  max-width: 1120px;
  font-size: clamp(2rem, 4.35vw, 4.65rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  overflow-wrap: normal;
  word-break: keep-all;
}
.about .title .company-name {
  display: inline-block;
  white-space: nowrap;
  word-break: keep-all;
}
.title .border { width: 92px; height: 2px; margin: 28px auto 0; background: linear-gradient(90deg, var(--red), var(--violet), var(--cyan)); transform-origin: left; }
.title h5 { max-width: 880px; margin: 24px auto 0; color: var(--muted); font-size: 1rem; font-weight: 520; }
.about.section { padding-bottom: 76px; }

.motion-ready .reveal { opacity: 0; transform: translate3d(0,36px,0); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--delay, 0ms); }
.motion-ready .reveal.is-visible { opacity: 1; transform: translate3d(0,0,0); }
.motion-ready .reveal-clip { clip-path: inset(0 100% 0 0 round 24px); transition: clip-path 900ms var(--ease-move); }
.motion-ready .reveal-clip.is-visible { clip-path: inset(0 0 0 0 round 24px); }

/* About: dual-pane system inspection. */
.about-2 { border-block: 1px solid var(--line); background: var(--bg-soft); }
.about-2 .row { min-height: 790px; }
.about-2 .col-lg-6 { width: 50%; }
.about-2 .col-lg-6:first-child { align-self: stretch; position: relative; overflow: hidden; }
.about-2 .col-lg-6:first-child::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 58%, var(--bg-soft)), linear-gradient(0deg, var(--bg-soft), transparent 28%); }
.about-2 .col-lg-6:first-child img { height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); }
.about-2 .content-block { position: relative; padding: clamp(64px, 7vw, 118px); }
.about-2 .content-block::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(transparent, var(--violet), var(--cyan), transparent); }
.about-2 h2 { display: block; margin: 0 0 14px; font-size: clamp(1.7rem, 2.5vw, 2.8rem); line-height: 1.14; letter-spacing: -.035em; }
.about-2 p, .about-2 .sub-title-2 { color: var(--muted); }
.about-2 .sub-title-2 { display: block; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }

/* Services: one connected route, four complete modules. */
#services { background: linear-gradient(180deg, var(--bg), #0b0e14); }
#services .row { gap: 30px; counter-reset: service; }
#services .col-lg-12 { width: 100%; }
#services article { position: relative; width: 100%; padding-left: 56px; counter-increment: service; }
#services article::before { content: "0" counter(service); position: absolute; z-index: 3; left: 0; top: 40px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; background: var(--bg); color: var(--cyan); font: 700 .68rem/1 ui-monospace, monospace; box-shadow: 0 0 0 7px var(--bg), 0 0 30px rgba(67,232,216,.16); }
#services article::after { content: ""; position: absolute; left: 16px; top: 78px; bottom: -48px; width: 2px; background: linear-gradient(var(--cyan), rgba(159,122,234,.26)); transform: scaleY(var(--route, 0)); transform-origin: top; transition: transform 900ms var(--ease-move); }
#services article.is-visible::after { --route: 1; }
#services article:last-child::after { display: none; }
.service-block { min-height: 510px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); grid-template-rows: auto 1fr auto; column-gap: clamp(34px, 6vw, 86px); overflow: hidden; padding: clamp(34px, 5vw, 68px); border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); box-shadow: 0 28px 80px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.06); }
.service-icon { display: none; }
.service-block h3 { grid-column: 2; margin: 0 0 24px; font-size: clamp(1.65rem, 2.8vw, 3rem); line-height: 1.1; letter-spacing: -.04em; }
.service-block .sub-title-2 { grid-column: 2; display: block; color: var(--muted); }
.service-block img { grid-column: 1; grid-row: 1 / 4; width: 100%; height: 100%; min-height: 380px; border-radius: 16px; object-fit: cover; filter: saturate(.78) contrast(1.03); }
.service-block .btn { grid-column: 2; align-self: end; justify-self: start; margin-top: 30px; }
#services article:nth-of-type(even) .service-block { grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr); }
#services article:nth-of-type(even) .service-block img { grid-column: 2; }
#services article:nth-of-type(even) .service-block h3,
#services article:nth-of-type(even) .service-block .sub-title-2,
#services article:nth-of-type(even) .service-block .btn { grid-column: 1; }

/* Partners: case files emerge from a dark continuous stage. */
#blog { background: #0a0d12; border-top: 1px solid var(--line); }
#blog .row { gap: 28px; }
#blog article { width: 100%; }
.post-block { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.45fr); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: 0 20px 70px rgba(0,0,0,.2); }
.post-block .media-wrapper { min-height: 100%; background: var(--bg); overflow: hidden; }
.post-block .media-wrapper .item { height: 50%; }
.post-block .media-wrapper img { height: 100%; min-height: 390px; object-fit: cover; filter: saturate(.82) contrast(1.05); transition: transform 220ms var(--ease-out); }
.post-block .content { padding: clamp(36px, 5vw, 68px); }
.post-block .content > h3 { margin: 0 0 30px; font-size: clamp(1.6rem, 2.8vw, 2.8rem); line-height: 1.12; letter-spacing: -.038em; }
.post-block .sub-title-2 { color: var(--muted); }
#blog article:nth-of-type(even) .post-block { grid-template-columns: minmax(0, 1.45fr) minmax(280px, .72fr); }
#blog article:nth-of-type(even) .media-wrapper { order: 2; }

/* Contact: endpoint node. */
.contact-us { position: relative; overflow: hidden; padding: clamp(100px, 12vw, 180px) 0; background: var(--warm); color: var(--ink); }
.contact-us::before { content: ""; position: absolute; width: 820px; aspect-ratio: 1; right: -360px; top: -330px; border: 1px solid rgba(16,19,24,.16); border-radius: 50%; box-shadow: 0 0 0 90px rgba(159,122,234,.05), 0 0 0 180px rgba(67,232,216,.035); }
.contact-us .row { gap: 38px; }
.contact-us .col-12 { width: 100%; }
.contact-us .contact-info, .contact-us .contact-form { position: relative; width: calc(50% - 19px); }
.contact-us .title h2 { max-width: 980px; }
.contact-us .title::before { color: #6b4fc5; }
.contact-us .title .border { background: linear-gradient(90deg, var(--red), #6b4fc5, #0fa99a); }
.contact-info > p { color: #4f5962; }
.contact-details { margin-top: 36px; padding: 28px; border: 1px solid rgba(16,19,24,.14); border-radius: 18px; background: rgba(255,255,255,.54); box-shadow: 0 22px 60px rgba(30,25,18,.08); }
.con-info { padding: 14px 0; border-bottom: 1px solid rgba(16,19,24,.1); }
.con-info:last-child { border-bottom: 0; }
.con-info h3 { margin: 0; }
.con-info span, .con-info p { color: #535c64; }
.contact-form img { width: 100%; height: 210px; min-height: 0; object-fit: cover; border-radius: 22px 22px 0 0; filter: saturate(.76) contrast(1.03); box-shadow: 0 24px 70px rgba(30,25,18,.15); }
.contact-us .contact-form {
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(15,31,28,.1);
  border-radius: 22px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 24px 70px rgba(30,25,18,.15);
}
.market-contact-form { padding: clamp(22px,3vw,34px); }
.market-contact-form h3 { margin: 0 0 22px; color: #101714; font-size: clamp(1.12rem,1.7vw,1.42rem); }
.market-contact-form label { display: block; margin: 0 0 14px; color: rgba(16,23,20,.72); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.market-contact-form label > span { display: block; margin: 0 0 7px; }
.market-contact-form input,
.market-contact-form textarea {
  display: block;
  width: 100%;
  border: 1px solid rgba(13,31,26,.14);
  border-radius: 10px;
  outline: 0;
  padding: 11px 13px;
  background: rgba(247,249,248,.96);
  color: #101714;
  font: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.market-contact-form textarea { min-height: 112px; resize: vertical; }
.market-contact-form input:focus,
.market-contact-form textarea:focus { border-color: rgba(0,139,126,.68); background: #fff; box-shadow: 0 0 0 3px rgba(0,139,126,.11); }
.contact-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.contact-form-actions .btn { flex: 0 0 auto; border: 1px solid #07584f !important; background: #08796d !important; color: #fff !important; cursor: pointer; }
.contact-form-actions .btn:disabled { cursor: wait; opacity: .58; }
.contact-form-status { margin: 0; color: rgba(16,23,20,.64); font-size: 12px; line-height: 1.45; }
.contact-form-status[data-state="success"] { color: #08796d; }
.contact-form-status[data-state="error"] { color: #b52442; }

#footer { padding: 40px 0; border-top: 1px solid var(--line); background: #05070a; color: rgba(243,245,247,.5); text-align: center; }
#footer .row, #footer .col-lg-12 { width: 100%; }
.social-icon { display: none; }
.copyright p { margin: 8px 0; }
.copyright a { color: var(--text); }
#scrollUp { display: none !important; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate3d(0,-3px,0); border-color: var(--cyan); background: rgba(67,232,216,.08); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
  .hero-area .btn:hover { box-shadow: 0 20px 55px rgba(255,49,95,.34); }
  .service-block:hover { border-color: rgba(67,232,216,.38); }
  .post-block:hover .media-wrapper img { transform: scale(1.025); }
}

@media (max-width: 980px) {
  .container, .hero-area > .block { width: min(100% - 40px, 760px); }
  .workflow-rail { display: none; }
  .hero-network { left: 38%; opacity: .52; }
  .about-2 .row { min-height: 0; }
  .about-2 .col-lg-6 { width: 100%; }
  .about-2 .col-lg-6:first-child { height: min(72vw, 620px); }
  .about-2 .col-lg-6:first-child::after { background: linear-gradient(0deg, var(--bg-soft), transparent 35%); }
  .about-2 .content-block { padding: 64px 28px 84px; }
  .about-2 .content-block::before { display: none; }
  #services article { padding-left: 0; padding-top: 52px; }
  #services article::before { top: 0; left: 4px; }
  #services article::after { left: 20px; top: 38px; bottom: auto; height: 26px; }
  .service-block, #services article:nth-of-type(even) .service-block { display: flex; flex-direction: column; min-height: 0; }
  .service-block img, #services article:nth-of-type(even) .service-block img { order: -1; height: min(60vw, 460px); min-height: 330px; margin-bottom: 34px; }
  .service-block .btn { align-self: flex-start; }
  .post-block, #blog article:nth-of-type(even) .post-block { grid-template-columns: 1fr; }
  #blog article:nth-of-type(even) .media-wrapper { order: 0; }
  .post-block .media-wrapper { height: min(68vw, 520px); }
  .post-block .media-wrapper .item { height: 50%; }
  .post-block .media-wrapper:has(.item:only-child) .item { height: 100%; }
  .contact-us .contact-info, .contact-us .contact-form { width: 100%; }
}

@media (max-width: 780px) {
  body { font-size: 15px; }
  .section { padding: 86px 0; }
  .hero-area { min-height: 820px; }
  .hero-area > .block { padding: 136px 0 58px; }
  .hero-area > .block h1 {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(2rem, 9vw, 3.45rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    text-wrap: wrap;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }
  .hero-area > .block p,
  .hero-area > .block .sub-title-2,
  .hero-area > .block .sub-title-2 h {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-all !important;
  }
  .hero-area .logo svg { width: 220px; }
  .hero-network { display: none; }
  .navigation { height: 68px; }
  .navigation .logo svg { width: 190px; }
  .navbar-toggler { display: block; }
  .navigation .navbar-collapse { display: none; position: absolute; top: 68px; right: 0; left: 0; padding: 12px 24px 24px; background: rgba(7,9,13,.98); border-bottom: 1px solid var(--line); }
  .navigation .navbar-collapse.is-open { display: block; }
  .navigation .navbar-nav { align-items: stretch; flex-direction: column; gap: 0; }
  .navigation .nav-link { padding: 12px 0; }
  .navigation .nav-link::after { bottom: 7px; }
  .title h2 { font-size: clamp(2.2rem, 10vw, 3.75rem); }
  .about .title h2 { font-size: clamp(1.9rem, 8vw, 3.15rem); line-height: 1.12; letter-spacing: -.035em; }
  .service-block { padding: 24px; }
  .service-block img { min-height: 260px; height: 58vw; }
  .post-block .content { padding: 30px 23px; }
  .contact-form img { height: 240px; min-height: 0; }
}

@media (max-width: 480px) {
  .container, .hero-area > .block { width: calc(100% - 30px); }
  .hero-area > .block h1,
  .hero-area > .block p,
  .hero-area > .block .sub-title-2 { width: calc(100% - 34px) !important; }
  .hero-area > .block h1 { font-size: clamp(1.85rem, 8.2vw, 2.35rem) !important; }
  .hero-area .sub-title-2 { padding: 16px; }
  .btn { width: 100%; }
  .service-block .btn { width: 100%; }
  .contact-details { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .hero-area::before, .hero-node, .btn, .post-block .media-wrapper img { transform: none !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
  .motion-ready .reveal-clip { clip-path: none; }
  .workflow-rail::after { transition: none; }
}

/* Six-service studio: one brand system, six distinct working views. */
.service-studio {
  position: relative;
  overflow-x: clip;
  padding: clamp(82px, 9vw, 132px) 0 clamp(96px, 11vw, 156px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 8% 12%, rgba(67,232,216,.08), transparent 30%),
    radial-gradient(circle at 91% 20%, rgba(255,49,95,.09), transparent 32%),
    var(--bg);
}
.studio-heading { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.62fr); gap: 20px 54px; align-items: end; margin-bottom: 38px; }
.studio-kicker { grid-column: 1 / -1; margin: 0; color: var(--cyan); font: 700 .72rem/1 ui-monospace, monospace; letter-spacing: .18em; }
.studio-heading h2 { margin: 0; max-width: 780px; font-size: clamp(2.25rem, 5vw, 4.9rem); line-height: .98; letter-spacing: -.055em; }
.studio-heading > p:last-child { margin: 0; color: var(--muted); line-height: 1.8; }
.service-tabs-wrap { position: sticky; z-index: 20; top: 74px; margin-bottom: 24px; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: rgba(7,9,13,.88); box-shadow: 0 18px 52px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.service-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 6px; }
.service-tabs button { min-width: 0; min-height: 58px; padding: 10px 9px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: rgba(243,245,247,.58); font: 700 clamp(.7rem,.9vw,.82rem)/1.3 inherit; cursor: pointer; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms var(--ease-out); }
.service-tabs button span { display: block; margin-bottom: 5px; color: var(--faint); font: 700 .61rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.service-tabs button:hover { color: var(--text); background: rgba(255,255,255,.04); }
.service-tabs button[aria-selected="true"] { border-color: rgba(67,232,216,.36); background: linear-gradient(135deg,rgba(67,232,216,.13),rgba(159,122,234,.08)); color: var(--text); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.service-tabs button[aria-selected="true"] span { color: var(--cyan); }
.service-tabs button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.service-panel { min-height: 620px; padding: clamp(28px,4.5vw,66px); overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); box-shadow: 0 28px 90px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.07); }
.service-panel[hidden] { display: none; }
.service-panel.is-entering { animation: service-in 440ms var(--ease-out) both; }
.panel-intro { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.62fr); gap: 8px 42px; align-items: end; margin-bottom: clamp(34px,5vw,64px); }
.panel-code { grid-column: 1 / -1; color: var(--red); font: 700 .68rem/1 ui-monospace, monospace; letter-spacing: .16em; }
.panel-intro h3 { margin: 0; font-size: clamp(2rem,4.1vw,4.3rem); letter-spacing: -.045em; }
.panel-intro p { margin: 0; color: var(--muted); line-height: 1.7; }
.reference-note { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }

.ops-runway { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-bottom: 34px; }
.ops-runway::before { content:""; position:absolute; top:18px; left:8%; right:8%; height:1px; background:linear-gradient(90deg,var(--cyan),var(--violet),var(--red)); }
.runway-step { position:relative; display:grid; gap:8px; padding-top:42px; }
.runway-step b { position:absolute; top:0; left:0; display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--cyan); border-radius:50%; background:var(--bg); color:var(--cyan); font:700 .66rem/1 ui-monospace,monospace; }
.runway-step span { font-weight:760; }
.runway-step small { color:var(--muted); line-height:1.55; }
.service-offers { display:grid; gap:14px; }
.three-up { grid-template-columns:repeat(3,minmax(0,1fr)); }
.service-offers section { min-width:0; padding:26px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.025); }
.service-offers em { color:var(--cyan); font:700 .63rem/1 ui-monospace,monospace; letter-spacing:.14em; }
.service-offers h4 { margin:18px 0 10px; font-size:1.22rem; }
.service-offers p { margin:0; color:var(--muted); line-height:1.7; }

.video-wall { display:grid; grid-template-columns:1.35fr .85fr; grid-template-rows:repeat(2,245px); gap:14px; }
.video-card { position:relative; min-width:0; margin:0; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--panel); }
.video-card-wide { grid-row:1 / 3; }
.video-card img { width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.05); }
.video-card::after { content:""; position:absolute; inset:30% 0 0; background:linear-gradient(transparent,rgba(5,7,10,.95)); }
.video-card figcaption { position:absolute; z-index:2; right:22px; bottom:21px; left:22px; display:grid; gap:6px; }
.video-card figcaption span { color:var(--cyan); font:700 .62rem/1 ui-monospace,monospace; letter-spacing:.13em; }
.video-card figcaption strong { font-size:1.16rem; }
.video-card figcaption small { color:rgba(243,245,247,.66); }

.distribution-map { position:relative; min-height:455px; display:grid; place-items:center; }
.distribution-map::before { content:""; position:absolute; width:min(70%,650px); aspect-ratio:1; border:1px solid rgba(67,232,216,.18); border-radius:50%; box-shadow:0 0 0 80px rgba(159,122,234,.025),0 0 90px rgba(67,232,216,.08); }
.matrix-core { position:relative; z-index:2; display:grid; place-items:center; width:220px; aspect-ratio:1; padding:25px; border:1px solid rgba(67,232,216,.45); border-radius:50%; background:radial-gradient(circle,rgba(67,232,216,.15),var(--bg) 72%); text-align:center; }
.matrix-core span,.matrix-node b { color:var(--cyan); font:700 .62rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.matrix-core strong { font-size:1.1rem; }
.matrix-core small { color:var(--muted); line-height:1.45; }
.matrix-node { position:absolute; z-index:3; width:min(260px,30%); padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.matrix-node h4 { margin:10px 0 7px; }
.matrix-node p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.55; }
.node-a { top:0; left:0; }.node-b { top:5%; right:0; }.node-c { right:9%; bottom:0; }

.creator-funnel { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.creator-funnel li { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; width:calc(100% - var(--indent)); margin-left:var(--indent); padding:19px 24px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(90deg,rgba(255,49,95,.08),rgba(255,255,255,.02)); }
.creator-funnel li:nth-child(1){--indent:0px}.creator-funnel li:nth-child(2){--indent:7%}.creator-funnel li:nth-child(3){--indent:14%}.creator-funnel li:nth-child(4){--indent:21%}
.creator-funnel li > span { color:var(--red); font:700 .72rem/1 ui-monospace,monospace; }
.creator-funnel div { display:flex; justify-content:space-between; gap:20px; }
.creator-funnel small { color:var(--muted); }

.qr-route { display:grid; grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr; align-items:center; gap:5px; margin-bottom:32px; }
.qr-route > div { min-height:112px; display:grid; align-content:center; gap:10px; padding:17px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.025); }
.qr-route b { color:var(--cyan); font:700 .65rem/1 ui-monospace,monospace; }.qr-route span { font-weight:700; line-height:1.35; }.qr-route i { height:1px; background:var(--cyan); opacity:.45; }
.store-split { display:grid; grid-template-columns:1.1fr 1.1fr .8fr; gap:14px; }
.store-split section { padding:25px; border:1px solid var(--line); border-radius:18px; background:var(--panel); }
.store-split span,.web-compare > section > span,.consent-demo > span { color:var(--cyan); font:700 .62rem/1 ui-monospace,monospace; letter-spacing:.12em; }
.store-split h4 { margin:17px 0 9px; }.store-split p { margin:0; color:var(--muted); line-height:1.65; }

.web-compare { display:grid; grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); gap:22px; align-items:stretch; }
.web-compare > section { padding:30px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.025); }
.web-compare .after { border-color:rgba(67,232,216,.35); background:linear-gradient(145deg,rgba(67,232,216,.1),rgba(159,122,234,.055)); }
.web-compare h4 { margin:18px 0; font-size:1.35rem; }.web-compare ul { display:grid; gap:12px; margin:0; padding-left:20px; color:var(--muted); }
.upgrade-axis { display:grid; place-items:center; align-content:center; gap:12px; color:var(--red); }.upgrade-axis b { font-size:2rem; }.upgrade-axis span { font:700 .63rem/1 ui-monospace,monospace; letter-spacing:.12em; writing-mode:vertical-rl; }
.consent-demo { display:grid; grid-template-columns:180px minmax(0,1fr); gap:28px; align-items:center; margin-top:24px; padding:22px 26px; border-left:2px solid var(--cyan); background:rgba(67,232,216,.04); }.consent-demo p { margin:0; color:var(--muted); line-height:1.65; }

@keyframes service-in { from { opacity:0; transform:translate3d(0,14px,0); } to { opacity:1; transform:none; } }

@media (max-width: 980px) {
  .studio-heading,.panel-intro { grid-template-columns:1fr; }
  .service-tabs-wrap { top:68px; overflow-x:auto; scrollbar-width:thin; }
  .service-tabs { grid-template-columns:repeat(6,minmax(145px,1fr)); width:max-content; min-width:100%; }
  .video-wall { grid-template-columns:1fr 1fr; grid-template-rows:330px 220px; }.video-card-wide { grid-column:1 / -1; grid-row:auto; }
  .qr-route { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.qr-route i { display:none; }
  .store-split { grid-template-columns:1fr 1fr; }.store-split section:last-child { grid-column:1 / -1; }
}

@media (max-width: 680px) {
  .service-studio { padding-top:72px; }.studio-heading { margin-bottom:28px; }.studio-heading h2 { font-size:clamp(2.1rem,11.5vw,3.2rem); }
  .service-tabs-wrap { margin-inline:-7px; border-radius:14px; }.service-tabs button { min-height:52px; }
  .service-panel { min-height:0; padding:25px 18px; border-radius:20px; }
  .panel-intro { margin-bottom:30px; }.panel-intro h3 { font-size:2.35rem; }
  .ops-runway,.three-up,.video-wall,.store-split,.web-compare,.consent-demo { grid-template-columns:1fr; }
  .ops-runway::before { display:none; }.runway-step { padding:0 0 0 50px; min-height:40px; }.runway-step b { top:0; }
  .video-wall { grid-template-rows:none; }.video-card,.video-card-wide { min-height:260px; grid-column:auto; grid-row:auto; }
  .distribution-map { min-height:0; display:grid; gap:12px; }.distribution-map::before { display:none; }.matrix-core { width:190px; margin:0 auto 12px; }.matrix-node { position:static; width:auto; }
  .creator-funnel li { --indent:0px !important; width:100%; margin-left:0; grid-template-columns:46px minmax(0,1fr); padding:17px 15px; }.creator-funnel div { display:grid; gap:5px; }
  .qr-route { grid-template-columns:1fr 1fr; }.qr-route > div { min-height:96px; }
  .store-split section:last-child { grid-column:auto; }.upgrade-axis { min-height:70px; }.upgrade-axis span { writing-mode:horizontal-tb; }.upgrade-axis b { transform:rotate(90deg); }
  .consent-demo { gap:12px; }
}

@media (prefers-reduced-motion: reduce) { .service-panel.is-entering { animation:none; } }

/* One stable, in-window language selector shared by all three source pages. */
.language-switcher {
  position: fixed;
  z-index: 120;
  top: 18px;
  right: clamp(14px, 2.2vw, 34px);
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(8,10,18,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 34px rgba(0,0,0,.22);
  backdrop-filter: blur(15px);
}
.language-switcher .language-choice {
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  color: rgba(255,255,255,.62);
  font: 680 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.language-switcher .language-choice:hover { color: #fff; }
.language-switcher .language-choice.is-current {
  color: #06110f;
  background: var(--cyan);
  box-shadow: 0 0 24px rgba(67,232,216,.34);
}
.intro-replay {
  position: fixed;
  z-index: 119;
  right: clamp(14px, 2.2vw, 34px);
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 999px;
  background: rgba(8,10,18,.76);
  color: rgba(255,255,255,.78);
  box-shadow: 0 10px 30px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
  font: 680 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.intro-replay span { color: var(--cyan); font-size: 16px; line-height: 1; }
.intro-replay:hover { color: #fff; border-color: rgba(67,232,216,.52); background: rgba(8,15,20,.9); transform: translateY(-1px); }
.intro-replay:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
#home, #about, #services, #blog, #contact-us { scroll-margin-top: 88px; }

@media (max-width: 980px) {
  .language-switcher {
    width: max-content;
    top: 12px;
    right: 12px;
  }
  .language-switcher .language-choice { min-height: 29px; padding: 0 8px; font-size: 10px; }
  .intro-replay { right: 12px; bottom: 12px; min-height: 36px; }
}

/* Motion rebuild — a kinetic Japan-market operating system. */
.motion-curtain {
  position: fixed;
  z-index: 1200;
  inset: 0;
  overflow: hidden;
  cursor: pointer;
  perspective: 1400px;
  /* The panels provide the cover. The stage must stay transparent so the page is
     visibly revealed between them instead of remaining behind a black sheet. */
  background: transparent;
  transition: opacity 180ms ease;
}
.motion-curtain.is-finished { opacity: 0; pointer-events: none; }
.curtain-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.08%;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent, rgba(67,232,216,.035) 48%, rgba(255,255,255,.08)),
    radial-gradient(circle at 50% 44%, rgba(159,122,234,.12), transparent 42%),
    #05070a;
  box-shadow: inset 0 0 120px rgba(0,0,0,.8);
  backface-visibility: hidden;
  will-change: transform;
}
.curtain-left { left: 0; transform-origin: left center; animation: curtain-left-open 1380ms cubic-bezier(.76,0,.16,1) 280ms both; }
.curtain-right { right: 0; transform-origin: right center; animation: curtain-right-open 1380ms cubic-bezier(.76,0,.16,1) 280ms both; }
.curtain-beam {
  position: absolute;
  top: -12%;
  left: 50%;
  width: 2px;
  height: 124%;
  background: linear-gradient(180deg, transparent, var(--cyan) 28%, #fff 50%, var(--red) 72%, transparent);
  box-shadow: 0 0 18px var(--cyan), 0 0 70px rgba(255,49,95,.5), 0 0 150px rgba(159,122,234,.5);
  transform: translateX(-50%) scaleY(0);
  animation: curtain-beam 1160ms cubic-bezier(.16,1,.3,1) 110ms both;
}
.curtain-word {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  color: rgba(255,255,255,.92);
  font: 700 clamp(.72rem,1.1vw,.96rem)/1 var(--font-sans, Arial, sans-serif);
  letter-spacing: .32em;
  white-space: nowrap;
  transform: translate(-50%,-50%);
  animation: curtain-word 1480ms cubic-bezier(.16,1,.3,1) both;
}
.curtain-word b { color: var(--cyan); padding: 0 .8em; }
.curtain-skip {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 20px;
  color: rgba(255,255,255,.5);
  font: 600 10px/1 Arial,sans-serif;
  letter-spacing: .22em;
}
@keyframes curtain-left-open { 0% { transform: translateX(0) rotateY(0); } 55% { transform: translateX(-4%) rotateY(2deg); } 100% { transform: translateX(-104%) rotateY(12deg); } }
@keyframes curtain-right-open { 0% { transform: translateX(0) rotateY(0); } 55% { transform: translateX(4%) rotateY(-2deg); } 100% { transform: translateX(104%) rotateY(-12deg); } }
@keyframes curtain-beam { 0% { opacity: 0; transform: translateX(-50%) scaleY(0); } 28% { opacity: 1; transform: translateX(-50%) scaleY(1); } 68% { opacity: .9; } 100% { opacity: 0; transform: translateX(-50%) scaleY(1.1); } }
@keyframes curtain-word { 0% { opacity: 0; filter: blur(12px); transform: translate(-50%,-35%) scale(.88); } 25%,60% { opacity: 1; filter: blur(0); transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; filter: blur(8px); transform: translate(-50%,-70%) scale(1.06); } }

.hero-area.intro-live::before { animation: hero-intro-light 1760ms cubic-bezier(.16,1,.3,1) both; }
.hero-area.intro-live::after { animation: hero-intro-wash 1760ms cubic-bezier(.16,1,.3,1) both; }
@keyframes hero-intro-light {
  0% { opacity: .12; filter: saturate(.65) brightness(.62); transform: scale(1.08); }
  48% { opacity: 1; filter: saturate(1.35) brightness(1.28); }
  100% { opacity: 1; filter: saturate(1) brightness(1); transform: scale(1); }
}
@keyframes hero-intro-wash {
  0% { opacity: 0; background-position: 10% 50%; }
  42% { opacity: .92; }
  100% { opacity: 1; background-position: 50% 50%; }
}

.hero-particle-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .82;
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent 0 26%, #000 58% 100%);
}
.hero-area > .block { z-index: 5; }
.hero-area .hero-kicker,
.hero-area h1,
.hero-area p,
.hero-area .sub-title-2,
.hero-area .btn { will-change: transform, opacity; }
.hero-area h1 {
  position: relative;
  text-shadow: 0 0 60px rgba(255,255,255,.08);
}
.hero-area h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.22em;
  width: min(32vw, 390px);
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--violet) 48%, var(--red), transparent);
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 24px rgba(67,232,216,.45);
  animation: hero-line 1100ms var(--ease-out) 980ms both;
}
@keyframes hero-line { to { transform: scaleX(1); } }
.hero-network { z-index: 4; filter: drop-shadow(0 0 18px rgba(67,232,216,.24)); }
.hero-network svg path { stroke-dasharray: 4 8; animation: route-drift 2.4s linear infinite; }
.hero-node {
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(67,232,216,.14), 0 0 34px rgba(67,232,216,.16), inset 0 0 24px rgba(159,122,234,.08);
}
.hero-node::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(90deg, transparent 35%, rgba(255,255,255,.34), transparent 65%);
  transform: translate3d(-60%,0,0) rotate(18deg);
  animation: node-scan 3.8s var(--ease-in-out) infinite;
}
@keyframes route-drift { to { stroke-dashoffset: -48; } }
@keyframes node-scan { 55%,100% { transform: translate3d(60%,0,0) rotate(18deg); } }

.page-conduit {
  position: fixed;
  z-index: 23;
  top: 7vh;
  right: clamp(12px, 2.6vw, 42px);
  width: clamp(70px, 8vw, 128px);
  height: 86vh;
  pointer-events: none;
  opacity: .72;
  mix-blend-mode: screen;
}
.page-conduit .conduit-base { fill: none; stroke: rgba(255,255,255,.09); stroke-width: 1.2; }
.page-conduit .conduit-flow { fill: none; stroke: url(#conduitGradient); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(67,232,216,.52)); }
.page-conduit circle { fill: var(--cyan); filter: drop-shadow(0 0 8px var(--cyan)); }

#services { perspective: 1300px; overflow: clip; }
#services::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 72% 18%, rgba(67,232,216,.09), transparent 27rem), radial-gradient(circle at 18% 62%, rgba(159,122,234,.10), transparent 31rem);
}
@media (min-width: 981px) {
  #services article { min-height: 108vh; transform-style: preserve-3d; }
  #services .service-block {
    position: sticky;
    top: 108px;
    transform-origin: 50% 12%;
    will-change: transform, opacity;
    box-shadow: 0 42px 120px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.08);
  }
  #services article:not(:last-child) .service-block::before {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(112deg, transparent 34%, rgba(67,232,216,.12) 47%, rgba(255,255,255,.2) 50%, rgba(159,122,234,.1) 53%, transparent 66%);
    transform: translate3d(-115%,0,0);
    opacity: 0;
  }
  #services article.is-current .service-block::before { animation: service-scan 1100ms var(--ease-out) both; }
  @keyframes service-scan { 22% { opacity: .9; } 100% { transform: translate3d(115%,0,0); opacity: 0; } }
}
.service-block img,
.post-block .media-wrapper { transform-origin: center; will-change: transform; }
.service-block img { transition: transform 220ms var(--ease-out); }
.service-block::after,
.post-block::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(120deg, rgba(67,232,216,.44), transparent 22%, transparent 70%, rgba(255,49,95,.35)) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--edge-glow, .18);
  transition: opacity 180ms ease;
}
.btn { position: relative; isolation: isolate; overflow: hidden; will-change: transform; }
.btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  background: radial-gradient(circle at var(--btn-x,50%) var(--btn-y,50%), rgba(255,255,255,.44), transparent 38%);
  opacity: 0;
  transition: opacity 160ms ease;
}

.motion-beacon {
  position: fixed;
  z-index: 24;
  left: 50%;
  bottom: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 24px var(--cyan);
  pointer-events: none;
  opacity: calc(1 - var(--page-progress));
}
.motion-beacon::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(67,232,216,.5);
  border-radius: 50%;
  animation: beacon 1.8s var(--ease-out) infinite;
}
@keyframes beacon { from { transform: scale(.55); opacity: .9; } to { transform: scale(2.8); opacity: 0; } }

@media (hover: hover) and (pointer: fine) {
  .service-block:hover,
  .post-block:hover { --edge-glow: .78; }
  .btn:hover::before { opacity: 1; }
}

@media (max-width: 980px) {
  .page-conduit { right: 4px; width: 52px; opacity: .38; }
  .hero-particle-canvas { opacity: .55; mask-image: linear-gradient(180deg, transparent, #000 25% 78%, transparent); }
  #services .service-block { transform: none !important; opacity: 1 !important; }
}

@media (max-width: 520px) {
  .page-conduit { display: none; }
  .motion-beacon { bottom: 14px; }
  .hero-particle-canvas { opacity: .42; }
  .contact-field-grid { grid-template-columns: 1fr; gap: 0; }
  .contact-form-actions { align-items: flex-start; flex-direction: column; }
  .contact-us .contact-form { border-radius: 16px; }
  .contact-form img { height: 170px; border-radius: 16px 16px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-curtain:not(.force-motion) { display: none; }
  .motion-curtain.force-motion .curtain-left { animation: curtain-left-open 1380ms cubic-bezier(.76,0,.16,1) 280ms both !important; }
  .motion-curtain.force-motion .curtain-right { animation: curtain-right-open 1380ms cubic-bezier(.76,0,.16,1) 280ms both !important; }
  .motion-curtain.force-motion .curtain-beam { animation: curtain-beam 1160ms cubic-bezier(.16,1,.3,1) 110ms both !important; }
  .motion-curtain.force-motion .curtain-word { animation: curtain-word 1480ms cubic-bezier(.16,1,.3,1) both !important; }
  .hero-area.intro-live::before,
  .hero-area.intro-live::after { animation: none !important; }
  .hero-particle-canvas { opacity: .28; }
  .hero-network svg path,
  .hero-node::after,
  .motion-beacon::after,
  .hero-area h1::after { animation: none !important; }
  .hero-area h1::after { transform: scaleX(1); }
  .page-conduit .conduit-flow { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  #services .service-block { transform: none !important; opacity: 1 !important; }
  #services article.is-current .service-block::before { animation: none !important; }
}

/* Pointer stage — three independent spatial depths, deliberately obvious. */
.pointer-ambient,
.pointer-aura,
.pointer-orbit {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  will-change: transform, opacity;
}
.pointer-ambient {
  z-index: 20;
  left: -30vw;
  top: -45vh;
  width: 160vw;
  height: 190vh;
  background:
    radial-gradient(circle at 50% 50%, rgba(67,232,216,.16), transparent 18%),
    conic-gradient(from 30deg at 50% 50%, transparent, rgba(159,122,234,.09), transparent 28%, rgba(255,49,95,.08), transparent 62%);
  mix-blend-mode: screen;
  filter: blur(28px);
}
.pointer-aura {
  z-index: 24;
  left: 0;
  top: 0;
  width: clamp(420px, 46vw, 720px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.17) 0 1%, rgba(67,232,216,.15) 8%, rgba(159,122,234,.10) 25%, rgba(255,49,95,.06) 43%, transparent 68%);
  mix-blend-mode: screen;
  filter: blur(9px);
}
.pointer-orbit {
  z-index: 25;
  left: 0;
  top: 0;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(67,232,216,.38);
  border-radius: 50%;
  box-shadow: inset 0 0 42px rgba(67,232,216,.07), 0 0 40px rgba(159,122,234,.1);
  mix-blend-mode: screen;
}
.pointer-orbit::before,
.pointer-orbit::after {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px dashed rgba(255,49,95,.45);
  border-radius: 50%;
}
.pointer-orbit::after {
  inset: 50% auto auto 50%;
  width: 7px;
  height: 7px;
  border: 0;
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan);
  transform: translate(-50%,-50%);
}
.pointer-engaged .pointer-ambient { opacity: .95; }
.pointer-engaged .pointer-aura { opacity: .9; }
.pointer-engaged .pointer-orbit { opacity: .72; }

.hero-area::before {
  transform: scale(1.09) translate3d(calc(var(--hero-x, 0) * -34px), calc(var(--hero-y, 0) * -26px), 0);
  transition: none;
}
.hero-area > .block,
.hero-network,
.hero-particle-canvas { will-change: transform; }
.hero-area.pointer-live h1 {
  text-shadow:
    calc(var(--hero-x, 0) * 9px) calc(var(--hero-y, 0) * 5px) 0 rgba(255,49,95,.2),
    calc(var(--hero-x, 0) * -9px) calc(var(--hero-y, 0) * -5px) 0 rgba(67,232,216,.18),
    0 0 62px rgba(255,255,255,.09);
}

.service-stage-hud {
  position: fixed;
  z-index: 22;
  right: clamp(34px, 6vw, 100px);
  top: 16vh;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(30px,0,0);
  transition: opacity 220ms ease, transform 220ms var(--ease-out), color 220ms ease;
  color: var(--cyan);
  font: 760 clamp(7rem, 15vw, 15rem)/.72 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: -.12em;
  mix-blend-mode: screen;
  text-shadow: 0 0 54px currentColor;
}
.service-stage-hud small {
  display: block;
  margin: 24px 0 0 16px;
  font-size: .72rem;
  line-height: 1;
  letter-spacing: .28em;
}
body.service-stage-active .service-stage-hud { opacity: .16; transform: translate3d(0,0,0); }
body.service-step-1 .service-stage-hud { color: var(--violet); }
body.service-step-2 .service-stage-hud { color: var(--red); }
body.service-step-3 .service-stage-hud { color: #f7c66b; }
.card-spotlight {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--card-x,50%) var(--card-y,50%), rgba(67,232,216,.14), rgba(159,122,234,.06) 34%, transparent 66%);
  opacity: 0;
  transition: opacity 180ms ease;
}
.service-block > *:not(.card-spotlight) { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  .service-block:hover .card-spotlight { opacity: 1; }
  .post-block:hover { transform: translate3d(0,-6px,0); box-shadow: 0 34px 110px rgba(0,0,0,.34); }
  .post-block { transition: transform 220ms var(--ease-out), box-shadow 220ms ease; }
}

@media (max-width: 980px), (hover: none), (pointer: coarse) {
  .pointer-ambient,
  .pointer-aura,
  .pointer-orbit,
  .service-stage-hud { display: none; }
  .hero-area > .block,
  .hero-network,
  .hero-particle-canvas { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pointer-ambient,
  .pointer-aura,
  .pointer-orbit,
  .service-stage-hud { display: none; }
  .hero-area > .block,
  .hero-network,
  .hero-particle-canvas,
  .service-block img { transform: none !important; }
}

/* Final cascade for the full-size six-card business deck. */
.service-studio .service-tabs-wrap { position: relative; top: auto; margin: 0 0 18px; background: transparent; border: 0; padding: 0; }
.service-studio .service-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.service-studio .service-tabs button { flex: 0 0 auto; min-width: 118px; min-height: 46px; padding: 8px 12px; border-color: rgba(142,231,240,.14); background: rgba(10,19,29,.68); }
.service-studio .service-tabs button span { display: inline; margin: 0 7px 0 0; }
.service-studio .service-panels { position: relative; min-height: min(78vh, 860px); isolation: isolate; }
.service-studio .service-panel, .service-studio .service-panel[hidden] { display: block; position: absolute; inset: 0; min-height: 0; margin: 0; padding: clamp(30px,4.4vw,70px); overflow-y: auto; overscroll-behavior: contain; border-radius: 26px; opacity: 0; pointer-events: none; transform: translate3d(64px,28px,0) scale(.94); transform-origin: 50% 100%; transition: transform 260ms cubic-bezier(.23,1,.32,1), opacity 180ms ease-out, box-shadow 260ms cubic-bezier(.23,1,.32,1); box-shadow: 0 34px 80px rgba(0,0,0,.34); }
.service-studio .service-panel:nth-child(1){background:linear-gradient(135deg,#112b37,#0b1622 66%)}.service-studio .service-panel:nth-child(2){background:linear-gradient(135deg,#172654,#0d1525 66%)}.service-studio .service-panel:nth-child(3){background:linear-gradient(135deg,#25314b,#101828 66%)}.service-studio .service-panel:nth-child(4){background:linear-gradient(135deg,#213d42,#101c22 66%)}.service-studio .service-panel:nth-child(5){background:linear-gradient(135deg,#3b2e48,#191329 66%)}.service-studio .service-panel:nth-child(6){background:linear-gradient(135deg,#41342b,#1b1713 66%)}
.service-studio .service-panel.deck-active { z-index: 6; opacity: 1; pointer-events: auto; transform: translate3d(0,0,0) scale(1); box-shadow: 0 44px 98px rgba(0,0,0,.5), 0 0 0 1px rgba(103,231,240,.25); }
.service-studio .service-panel.deck-next { z-index: 5; opacity: .72; transform: translate3d(42px,22px,0) scale(.965); }
.service-studio .service-panel.deck-back { z-index: 4; opacity: .36; transform: translate3d(-24px,32px,0) scale(.93); }
.service-studio .service-panel.deck-far { z-index: 1; }.service-studio .service-panel::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; border:1px solid rgba(177,237,241,.16); }
@media (max-width:991px){.service-studio .service-panels{min-height:72vh}.service-studio .service-panel,.service-studio .service-panel[hidden]{padding:28px 20px;border-radius:20px}.service-studio .service-panel.deck-next{transform:translate3d(18px,16px,0) scale(.98)}}

@media (min-width:992px){.service-studio .service-panel,.service-studio .service-panel[hidden]{transition:transform 160ms cubic-bezier(.23,1,.32,1),opacity 120ms ease-out;box-shadow:0 14px 34px rgba(0,0,0,.2)}.service-studio .service-panel.deck-active{box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 0 1px rgba(103,231,240,.18)}.service-studio .service-panel::after{display:none}}

/* Wide, single-screen physical cards: no nested vertical scroll surface. */
@media (min-width:992px){
 .service-studio .service-panels{min-height:0;background:transparent;border:0;overflow:visible}
 .service-studio .service-panel,.service-studio .service-panel[hidden]{aspect-ratio:16/9;min-height:0;height:auto;overflow:hidden;padding:clamp(28px,3vw,54px);border:0;box-shadow:none}
 .service-studio .service-panel.deck-active{transform:translate3d(0,0,0) rotate(-.45deg);box-shadow:0 18px 38px rgba(0,0,0,.24)}
 .service-studio .service-panel.deck-next{transform:translate3d(58px,20px,0) rotate(1.2deg) scale(.96);opacity:.82}.service-studio .service-panel.deck-back{transform:translate3d(-34px,32px,0) rotate(-1.4deg) scale(.91);opacity:.44}
 .service-studio .service-panel .reference-note{display:none}.service-studio .service-panel .service-offers section,.service-studio .service-panel .store-split section,.service-studio .service-panel .matrix-node,.service-studio .service-panel .video-card{padding:12px;background:transparent;box-shadow:none}
}

/* Final deck pass: cards own the whole view; detailed material opens separately. */
.service-studio { scroll-margin-top: 112px; }
.service-studio .service-panels { isolation:isolate; }
.service-studio .service-panel .deck-detail-source { display:none !important; }
.card-at-a-glance { display:grid; align-content:end; gap:clamp(12px,1.7vw,22px); min-height:clamp(170px,23vw,290px); }
.card-at-a-glance__label { font:700 .72rem/1 ui-monospace,monospace; letter-spacing:.15em; text-transform:uppercase; opacity:.72; }
.card-at-a-glance__items { display:flex; flex-wrap:wrap; gap:10px; }
.card-at-a-glance__items span { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid currentColor; border-radius:999px; font-weight:700; }
.card-detail-trigger { justify-self:start; appearance:none; border:0; border-radius:999px; padding:13px 18px; background:rgba(255,255,255,.94); color:#151719; font:700 .9rem/1 inherit; cursor:pointer; }
.card-detail-trigger:hover,.card-detail-trigger:focus-visible { transform:translateY(-2px); outline:3px solid rgba(255,255,255,.7); outline-offset:3px; }
.card-detail-dialog { width:min(1000px,calc(100vw - 34px)); max-height:min(82vh,820px); overflow:auto; padding:clamp(28px,5vw,64px); color:#eef4ff; background:#101827; border:1px solid rgba(255,255,255,.18); border-radius:24px; box-shadow:0 26px 90px rgba(0,0,0,.55); }
.card-detail-dialog::backdrop { background:rgba(5,9,18,.7); backdrop-filter:blur(4px); }
.card-detail-dialog .deck-detail-source { display:block !important; }
.card-detail-dialog form { position:sticky; z-index:2; top:-18px; height:0; display:flex; justify-content:flex-end; }
.card-detail-close { display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:#fff; color:#111827; font-size:28px; cursor:pointer; }
@media (min-width:992px){
  .service-studio { padding-top:clamp(124px,10vw,156px); }
  .service-studio .service-tabs-wrap { position:relative; z-index:12; }
  .service-studio .service-panels { min-height:0; height:auto; overflow:visible; }
  .service-studio .service-panel,.service-studio .service-panel[hidden] { width:100%; aspect-ratio:16/9; height:auto; min-height:0; overflow:hidden; display:grid; grid-template-rows:auto 1fr; align-content:space-between; gap:clamp(22px,3vw,42px); padding:clamp(30px,4vw,58px); cursor:pointer; }
  .service-studio .service-panel .panel-intro { margin:0; grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr); }
  .service-studio .service-panel .panel-intro h3 { font-size:clamp(2.2rem,4.7vw,5.3rem); line-height:.95; }
  .service-studio .service-panel .panel-intro p { max-width:36ch; align-self:end; }
  .service-studio .service-panel.deck-active { z-index:6; opacity:1; transform:translate3d(0,0,0) rotate(-.45deg); }
  .service-studio .service-panel.deck-next { z-index:5; opacity:.86; transform:translate3d(58px,21px,0) rotate(1.2deg) scale(.96); }
  .service-studio .service-panel.deck-back { z-index:4; opacity:.48; transform:translate3d(-34px,34px,0) rotate(-1.4deg) scale(.91); }
  .service-studio .service-panel.deck-far { z-index:1; opacity:0; transform:translate3d(70px,42px,0) scale(.89); }
}
@media (max-width:991px){.card-at-a-glance{min-height:160px}.service-studio .service-panel .deck-detail-source{display:none!important}}

/* Dopamine palette applies only to the six business cards. */
@media (min-width:992px){
 .service-studio .service-panel:nth-child(1){background:#ff7a1a!important;color:#16100b}.service-studio .service-panel:nth-child(2){background:#ffd51e!important;color:#171305}.service-studio .service-panel:nth-child(3){background:#f1458b!important;color:#fff}.service-studio .service-panel:nth-child(4){background:#7c4dff!important;color:#fff}.service-studio .service-panel:nth-child(5){background:#22a8ff!important;color:#06182a}.service-studio .service-panel:nth-child(6){background:#20c997!important;color:#06251e}
 .service-studio .service-panel h3,.service-studio .service-panel h4,.service-studio .service-panel p,.service-studio .service-panel span,.service-studio .service-panel small{color:inherit!important}.service-studio .service-panel:nth-child(1) em,.service-studio .service-panel:nth-child(2) em,.service-studio .service-panel:nth-child(5) em,.service-studio .service-panel:nth-child(6) em{color:#16100b!important}
}

/* Six-card fan: every service remains visibly present behind the current landscape card. */
.deck-edge-label { display:none; }
@media (min-width:992px){
  .service-studio .service-panels { height:min(43vw,600px); min-height:520px; overflow:clip; padding-right:240px; }
  .service-studio .service-panel,.service-studio .service-panel[hidden] { width:calc(100% - 240px); aspect-ratio:16/9; height:auto; min-height:0; transform-origin:0 50%; }
  .service-studio .service-panel.deck-pos-0 { z-index:12; opacity:1; pointer-events:auto; transform:translate3d(0,0,0) rotate(-.45deg); }
  .service-studio .service-panel.deck-pos-1 { z-index:11; opacity:1; transform:translate3d(48px,9px,0) rotate(.18deg); }
  .service-studio .service-panel.deck-pos-2 { z-index:10; opacity:1; transform:translate3d(96px,18px,0) rotate(.36deg); }
  .service-studio .service-panel.deck-pos-3 { z-index:9; opacity:1; transform:translate3d(144px,27px,0) rotate(.54deg); }
  .service-studio .service-panel.deck-pos-4 { z-index:8; opacity:1; transform:translate3d(192px,36px,0) rotate(.72deg); }
  .service-studio .service-panel.deck-pos-5 { z-index:7; opacity:1; transform:translate3d(240px,45px,0) rotate(.9deg); }
  .service-studio .service-panel.deck-pos-1,.service-studio .service-panel.deck-pos-2,.service-studio .service-panel.deck-pos-3,.service-studio .service-panel.deck-pos-4,.service-studio .service-panel.deck-pos-5 { pointer-events:auto; }
  .service-studio .service-panel .deck-edge-label { display:block; position:absolute; top:28px; right:13px; z-index:2; color:inherit!important; font:800 .67rem/1 ui-monospace,monospace; letter-spacing:.06em; writing-mode:vertical-rl; text-orientation:mixed; white-space:nowrap; opacity:.96; }
  .service-studio .service-panel.deck-pos-0 .deck-edge-label { display:none; }
}

/* Deliberate deck motion: lift, pass sideways, then let the next card settle. */
@media (min-width:992px){
  .service-studio .service-panel,.service-studio .service-panel[hidden] { transition:transform 760ms cubic-bezier(.22,.82,.22,1), opacity 700ms cubic-bezier(.22,.82,.22,1) !important; }
  .service-studio .service-panel.deck-lift-out { z-index:20 !important; opacity:.96 !important; transform:translate3d(-13%, -16px, 0) rotate(-3deg) scale(1.025) !important; pointer-events:none !important; }
}
@media (prefers-reduced-motion:reduce){.service-studio .service-panel,.service-studio .service-panel[hidden]{transition:none!important}}

/* Expanded service card: a paged landscape surface, dismissed by its surrounding mask. */
.card-detail-dialog { position:fixed; inset:0; width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:clamp(18px,4vw,56px); overflow:hidden; border:0; border-radius:0; background:rgba(5,10,19,.72); color:#101522; }
.card-detail-dialog::backdrop { background:rgba(5,10,19,.72); backdrop-filter:none; }
.card-detail-frame { width:min(1180px,100%); height:min(74vh,760px); margin:auto; display:grid; grid-template-rows:auto minmax(0,1fr) auto; overflow:hidden; border-radius:28px; box-shadow:0 26px 90px rgba(0,0,0,.48); transform:translate3d(0,18px,0) scale(.985); opacity:0; transition:transform 260ms cubic-bezier(.22,.82,.22,1),opacity 220ms ease; }
.card-detail-dialog[open] .card-detail-frame { transform:translate3d(0,0,0) scale(1); opacity:1; }
@starting-style{.card-detail-dialog[open] .card-detail-frame{transform:translate3d(0,18px,0) scale(.985);opacity:0}}
.detail-tone-1 .card-detail-frame{background:#ff7a1a;color:#16100b}.detail-tone-2 .card-detail-frame{background:#ffd51e;color:#171305}.detail-tone-3 .card-detail-frame{background:#f1458b;color:#fff}.detail-tone-4 .card-detail-frame{background:#7c4dff;color:#fff}.detail-tone-5 .card-detail-frame{background:#22a8ff;color:#06182a}.detail-tone-6 .card-detail-frame{background:#20c997;color:#06251e}
.card-detail-heading { display:grid; grid-template-columns:1fr auto; gap:4px 18px; align-items:end; padding:clamp(22px,3vw,38px) clamp(24px,4vw,58px) 16px; border-bottom:1px solid currentColor; }
.card-detail-heading span { grid-column:1/-1; font:800 .68rem/1 ui-monospace,monospace; letter-spacing:.14em; opacity:.7; }.card-detail-heading strong{font-size:clamp(1.7rem,3.3vw,3.4rem);line-height:1}.card-detail-heading small{font:700 .75rem/1 ui-monospace,monospace;opacity:.72}
.card-detail-viewport { overflow:hidden; min-width:0; }.card-detail-track { display:flex; height:100%; transition:transform 360ms cubic-bezier(.22,.82,.22,1); }.card-detail-page { flex:0 0 100%; min-width:0; height:100%; padding:clamp(22px,3.2vw,46px) clamp(24px,4vw,58px); overflow:hidden; display:grid; align-content:center; }.card-detail-page > *{max-height:100%;}
.card-detail-page .reference-note{color:inherit;border-color:currentColor;opacity:.72}.card-detail-page .ops-runway,.card-detail-page .three-up,.card-detail-page .store-split,.card-detail-page .web-compare{margin:0}.card-detail-page .video-wall{height:min(42vh,440px);margin:0}.card-detail-page .distribution-map{min-height:420px;max-height:100%}.card-detail-page .creator-funnel{margin:0}.card-detail-page .qr-route{margin:0}.card-detail-page .consent-demo{margin:0}
.card-detail-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:72px; padding:12px clamp(24px,4vw,58px); border-top:1px solid currentColor; font-size:.78rem; font-weight:700; }.card-detail-pager button{min-width:86px; min-height:40px; padding:0 14px; border:1px solid currentColor; border-radius:999px; background:transparent; color:inherit; font:700 .8rem/1 inherit; cursor:pointer}.card-detail-pager button:disabled{opacity:.35;cursor:default}.card-detail-pager button:not(:disabled):hover{background:rgba(255,255,255,.18)}
@media (max-width:760px){.card-detail-dialog{padding:12px}.card-detail-frame{height:min(80dvh,740px);border-radius:20px}.card-detail-heading{padding:22px 22px 14px}.card-detail-page{padding:20px 22px}.card-detail-pager{padding:10px 18px}.card-detail-pager span{display:none}.card-detail-page .distribution-map{min-height:0}.card-detail-page .video-wall{height:auto}.card-detail-page .ops-runway,.card-detail-page .three-up,.card-detail-page .video-wall,.card-detail-page .store-split,.card-detail-page .web-compare{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.card-detail-frame,.card-detail-track{transition:none}}

/* Same-origin 2.5D portrait viewport; motion is contained to the approved company-introduction artwork. */
.about-2 .founder-portrait:has(.founder-motion-frame){background:#101b28;aspect-ratio:4/3}.founder-motion-frame{display:block;width:100%;height:100%;border:0;background:#101b28}

@media (min-width:992px){.service-studio .service-panels{height:760px;min-height:620px;overflow:visible;padding:0}.service-studio .service-panel,.service-studio .service-panel[hidden]{left:50%;right:auto;width:min(43vw,480px);height:690px;aspect-ratio:auto;padding:38px;transform-origin:center;border-radius:24px}.service-studio .service-panel .panel-intro{display:block}.service-studio .service-panel .panel-intro h3{font-size:clamp(2.1rem,3.5vw,3.6rem);line-height:1.1}.service-studio .service-panel .panel-intro p{margin-top:22px}.service-studio .service-panel.deck-pos-0{transform:translateX(-50%) scale(1);z-index:12}.service-studio .service-panel.deck-pos-1{transform:translateX(-38%) rotate(3deg) scale(.94);z-index:11}.service-studio .service-panel.deck-pos-2{transform:translateX(-62%) rotate(-3deg) scale(.91);z-index:10}.service-studio .service-panel.deck-pos-3{transform:translateX(-30%) rotate(5deg) scale(.87);z-index:9}.service-studio .service-panel.deck-pos-4{transform:translateX(-70%) rotate(-5deg) scale(.84);z-index:8}.service-studio .service-panel.deck-pos-5{transform:translateX(-24%) rotate(7deg) scale(.81);z-index:7}.service-studio .service-panel .deck-edge-label{display:none}}
.founder-motion-frame{pointer-events:none}

/* Place the two founders directly beside the mission statement. */
.mission-content-column{width:100%}.about-2 .mission-content-column .content-block{max-width:1400px;margin:auto}.mission-with-portrait{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:clamp(28px,5vw,70px);align-items:center;margin:45px 0}.mission-with-portrait .founder-portrait{width:100%;overflow:hidden;border-radius:22px;aspect-ratio:4/3;background:#101b28}.mission-with-portrait .founder-motion-frame{width:100%;height:100%}@media(max-width:767px){.mission-with-portrait{grid-template-columns:1fr}.mission-with-portrait .founder-portrait{min-width:0}}

/* Readable deck, explicit controls and free page scrolling. */
html{scroll-behavior:smooth}
.service-studio .service-tabs-wrap{margin-bottom:22px}
.service-studio .service-panels{height:clamp(450px,58vw,650px);min-height:0;overflow:visible;padding:0;isolation:isolate}
.service-studio .service-panel,.service-studio .service-panel[hidden]{display:flex;flex-direction:column;justify-content:space-between;position:absolute;inset:0 auto auto 50%;width:min(68%,500px);height:100%;min-height:0;aspect-ratio:auto;overflow:hidden;padding:clamp(28px,4vw,48px);border-radius:24px;transform-origin:center;transition:transform 350ms ease,opacity 250ms ease!important;cursor:pointer}
.service-studio .service-panel .panel-intro{display:block}.service-studio .service-panel .panel-intro h3{font-size:clamp(2rem,4vw,3.8rem);line-height:1.1}.service-studio .service-panel .panel-intro p{margin-top:20px}
.service-studio .service-panel.deck-pos-0{z-index:12;opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
.service-studio .service-panel.deck-pos-1{z-index:11;opacity:.95;pointer-events:auto;transform:translateX(-34%) rotate(3deg) scale(.94)}
.service-studio .service-panel.deck-pos-2{z-index:10;opacity:.9;pointer-events:auto;transform:translateX(-66%) rotate(-3deg) scale(.91)}
.service-studio .service-panel.deck-pos-3,.service-studio .service-panel.deck-pos-4,.service-studio .service-panel.deck-pos-5{opacity:0;pointer-events:none;transform:translateX(-50%) scale(.85)}
.service-studio .service-panel .deck-edge-label{display:none}.card-at-a-glance{min-height:0;gap:16px}.card-detail-trigger{min-height:48px}
.deck-controls{position:relative;display:flex;align-items:center;justify-content:center;gap:24px;margin:26px auto 0}.deck-controls button{border:1px solid rgba(255,255,255,.4);color:#fff;background:#172331;border-radius:999px;padding:12px 18px;min-height:46px;cursor:pointer}.deck-controls button:hover,.deck-controls button:focus-visible{background:#314358;outline:2px solid #56e6d9;outline-offset:3px}.deck-count{min-width:48px;text-align:center;color:#d7e3ec;font-weight:700}
.card-detail-dialog{padding:20px;overflow:auto}.card-detail-frame{height:min(84dvh,800px);min-height:0;overflow:hidden}.card-detail-heading{position:relative;padding-right:72px}.detail-close{position:absolute;right:20px;top:20px;display:grid;place-items:center;width:44px;height:44px;border:1px solid currentColor;border-radius:50%;color:inherit;background:transparent;font-size:28px;cursor:pointer}.detail-close:focus-visible{outline:3px solid currentColor;outline-offset:2px}.card-detail-page{overflow-y:auto;align-content:start}.card-detail-page>*{max-height:none}
@media(max-width:767px){.service-studio .service-panels{height:490px}.service-studio .service-panel,.service-studio .service-panel[hidden]{width:85%;padding:25px}.service-studio .service-panel.deck-pos-1{transform:translateX(-39%) rotate(3deg) scale(.94)}.service-studio .service-panel.deck-pos-2{transform:translateX(-61%) rotate(-3deg) scale(.91)}.card-detail-frame{height:88dvh}.card-detail-page{overflow-y:auto}.card-detail-heading strong{font-size:1.6rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.service-studio .service-panel{transition:none!important}}

.card-detail-dialog .card-detail-page p,.card-detail-dialog .card-detail-page li,.card-detail-dialog .card-detail-page h3,.card-detail-dialog .card-detail-page h4,.card-detail-dialog .card-detail-page span,.card-detail-dialog .card-detail-page em{color:inherit!important;opacity:1}.card-detail-dialog .card-detail-page section{color:inherit}
html{scroll-behavior:auto}
/* All six cards remain visible in the stack. */
.service-studio .service-panel.deck-pos-1{z-index:11;opacity:1;pointer-events:auto;transform:translateX(-33%) rotate(2deg) scale(.96)}
.service-studio .service-panel.deck-pos-2{z-index:10;opacity:1;pointer-events:auto;transform:translateX(-67%) rotate(-2deg) scale(.94)}
.service-studio .service-panel.deck-pos-3{z-index:9;opacity:1;pointer-events:auto;transform:translateX(-16%) rotate(4deg) scale(.91)}
.service-studio .service-panel.deck-pos-4{z-index:8;opacity:1;pointer-events:auto;transform:translateX(-84%) rotate(-4deg) scale(.89)}
.service-studio .service-panel.deck-pos-5{z-index:7;opacity:1;pointer-events:auto;transform:translateX(1%) rotate(6deg) scale(.86)}
.service-studio .service-panel:nth-child(1){background:#ff7a1a!important;color:#16100b}.service-studio .service-panel:nth-child(2){background:#ffd51e!important;color:#171305}.service-studio .service-panel:nth-child(3){background:#f1458b!important;color:#fff}.service-studio .service-panel:nth-child(4){background:#7c4dff!important;color:#fff}.service-studio .service-panel:nth-child(5){background:#22a8ff!important;color:#06182a}.service-studio .service-panel:nth-child(6){background:#20c997!important;color:#06251e}
.service-studio .service-panel h3,.service-studio .service-panel p,.service-studio .service-panel span{color:inherit!important}
@media(max-width:767px){.service-studio .service-panel,.service-studio .service-panel[hidden]{width:64%;padding:20px}.service-studio .service-panel .panel-intro h3{font-size:clamp(1.5rem,5vw,2.3rem)}.service-studio .service-panel .card-at-a-glance__items span{min-height:34px;padding:0 9px;font-size:.8rem}.service-studio .service-panel .panel-intro p{font-size:.9rem}}

/* Balanced mission layout and gentle, physical card movement. */
.about-2 .mission-content-column .content-block{padding:clamp(40px,5vw,70px);max-width:1300px}.mission-with-portrait{margin:24px 0;gap:clamp(24px,4vw,52px)}.mission-with-portrait .founder-portrait{max-width:490px;justify-self:center}.about-2 .content-block > br{display:none}.about-2 .sub-title-2{margin-top:12px}.about-2 .content-block>h2:not(:first-child){margin-top:30px}
.service-studio .service-panel,.service-studio .service-panel[hidden]{transition:transform 620ms cubic-bezier(.22,1,.36,1),box-shadow 620ms cubic-bezier(.22,1,.36,1),opacity 450ms ease!important;box-shadow:0 18px 35px rgba(0,0,0,.18);will-change:transform}.service-studio .service-panel.deck-pos-0{box-shadow:0 30px 70px rgba(0,0,0,.4)}
@media(max-width:767px){.about-2 .mission-content-column .content-block{padding:42px 24px}.mission-with-portrait{gap:20px;margin:24px 0}.service-studio .service-panels{touch-action:pan-y}}
@media(prefers-reduced-motion:reduce){.service-studio .service-panel,.service-studio .service-panel[hidden]{transition:none!important}}

/* Fit the full card and its navigation in the same viewport. */
.service-studio .service-panels{height:clamp(320px,calc(100dvh - 190px),560px);overscroll-behavior:auto}
@media(max-width:767px){.service-studio .service-panels{height:clamp(320px,calc(100dvh - 190px),490px)}}
@media(max-height:600px){.service-studio .service-panel,.service-studio .service-panel[hidden]{padding:20px}.service-studio .service-panel .panel-intro p{margin-top:8px}.deck-controls{margin-top:14px}}

/* Keep the mission and qualifications together while the portrait sits alongside them. */
.about-2.section{padding:0}.about-2 .row{min-height:0}
.about-2 .mission-content-column .content-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px, .8fr);column-gap:clamp(24px,4vw,52px);row-gap:0;align-content:start}
.about-2 .content-block>h2,.about-2 .content-block>p,.about-2 .content-block>.sub-title-2,.mission-copy{grid-column:1}
.about-2 .content-block>h2:first-child{grid-row:1}.about-2 .content-block>p{grid-row:2}
.mission-with-portrait{display:contents}.mission-copy{grid-row:3;margin:24px 0 0}
.mission-with-portrait .founder-portrait{grid-column:2;grid-row:1 / 6;align-self:center;width:100%}
.about-2 .content-block>h2:not(:first-child){grid-row:4;margin-top:24px}.about-2 .content-block>.sub-title-2{grid-row:5}
@media(max-width:767px){.about-2 .mission-content-column .content-block{display:flex;flex-direction:column}.mission-with-portrait{display:contents}.mission-copy{order:2}.about-2 .content-block>h2:first-child,.about-2 .content-block>p{order:1}.about-2 .content-block>h2:not(:first-child){order:3}.about-2 .content-block>.sub-title-2{order:4}.mission-with-portrait .founder-portrait{order:5;margin-top:24px;max-width:490px;align-self:center}}

/* A calmer, more legible service showcase with uninterrupted native scrolling. */
html{scroll-behavior:auto;scroll-padding-top:80px}
.service-studio{padding-top:clamp(72px,8vw,112px);padding-bottom:clamp(64px,7vw,100px)}
.service-studio .studio-heading{margin-bottom:clamp(24px,3vw,38px)}
.service-studio .service-tabs-wrap{margin-bottom:22px}
.service-studio .service-tabs,.service-studio .service-tabs-wrap{scrollbar-width:none}.service-studio .service-tabs::-webkit-scrollbar,.service-studio .service-tabs-wrap::-webkit-scrollbar{display:none}
.service-studio .service-tabs button{border-radius:999px;transition:background .25s,color .25s,border-color .25s}
.service-studio .service-panels{height:clamp(390px,calc(100dvh - 200px),540px);overflow:visible;overscroll-behavior:auto}
.service-studio .service-panel,.service-studio .service-panel[hidden]{overscroll-behavior:auto;overflow:hidden;isolation:isolate;justify-content:space-between;transition:transform 580ms cubic-bezier(.22,1,.36,1),box-shadow 580ms ease,opacity 350ms ease!important}
.service-studio .service-panel::before{content:'';position:absolute;z-index:-1;width:64%;aspect-ratio:1;right:-24%;top:18%;border:1px solid currentColor;border-radius:50%;opacity:.14;box-shadow:0 0 0 28px rgba(255,255,255,.045),0 0 0 56px rgba(255,255,255,.035);pointer-events:none}
.service-studio .service-panel .panel-intro h3{letter-spacing:-.045em}
.service-studio .service-panel .panel-intro p{max-width:26em;line-height:1.6}
.card-at-a-glance{position:relative;gap:12px}.card-detail-trigger{transition:transform .2s,box-shadow .2s}.card-detail-trigger:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.deck-controls{margin-top:18px}.deck-controls button{transition:background .2s,transform .2s}.deck-controls button:hover{transform:translateY(-2px)}
.mission-with-portrait .founder-portrait{box-shadow:0 20px 55px rgba(0,0,0,.22)}
@media(max-width:767px){.service-studio .service-panels{height:clamp(390px,calc(100dvh - 200px),480px)}.service-studio .service-panel,.service-studio .service-panel[hidden]{width:68%;padding:22px}.service-studio .service-panel .panel-intro p{margin-top:12px}}
@media(max-width:480px){.service-studio .service-panel,.service-studio .service-panel[hidden]{width:76%;padding:20px}.service-studio .service-panel.deck-pos-5{transform:translateX(-2%) rotate(6deg) scale(.86)}.service-studio .service-panel.deck-pos-4{transform:translateX(-78%) rotate(-4deg) scale(.89)}}
@media(prefers-reduced-motion:reduce){.service-studio .service-panel,.service-studio .service-panel[hidden],.card-detail-trigger,.deck-controls button{transition:none!important}}
.card-detail-dialog .video-card figcaption,.card-detail-dialog .video-card figcaption span,.card-detail-dialog .video-card figcaption strong,.card-detail-dialog .video-card figcaption small{color:#fff!important}
.card-detail-pager.single-page{justify-content:center}.card-detail-pager.single-page button{display:none}.card-detail-pager.single-page span{display:block}

/* Detail content is a horizontal banner, never an inner vertical scroller. */
.card-detail-dialog{overflow:hidden}
.card-detail-frame{height:min(84dvh,760px)}
.card-detail-page.banner-slide{height:100%;overflow:hidden;display:grid;grid-template-columns:1fr;align-items:center;align-content:center;gap:clamp(16px,3vw,40px);padding:clamp(24px,4vw,58px)}
.banner-slide:not(.has-image){position:relative;isolation:isolate}.banner-slide:not(.has-image)::after{content:attr(data-slide-number);position:absolute;right:4%;bottom:2%;z-index:-1;font:800 clamp(8rem,23vw,18rem)/.8 system-ui,sans-serif;letter-spacing:-.08em;opacity:.09;pointer-events:none}
.banner-slide.has-image{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.banner-copy{min-width:0}.card-detail-dialog .banner-eyebrow{display:block;margin-bottom:clamp(12px,2vw,24px);font:800 .7rem/1.3 ui-monospace,monospace;letter-spacing:.14em;opacity:.72!important}
.card-detail-dialog .banner-copy h3{margin:0 0 clamp(12px,2vw,24px);font-size:clamp(1.8rem,4vw,3.8rem);line-height:1.12;letter-spacing:-.04em}
.card-detail-dialog .banner-copy p{margin:0;max-width:38em;font-size:clamp(.95rem,1.4vw,1.18rem);line-height:1.7}
.banner-visual{width:100%;height:100%;min-height:0;overflow:hidden;border-radius:20px}.banner-visual img{display:block;width:100%;height:100%;object-fit:cover}
.card-detail-pager{justify-content:center;gap:12px;min-height:68px}.card-detail-pager button{min-width:44px;width:44px;height:44px;min-height:44px;padding:0;display:grid;place-items:center;font-size:1.1rem}
.card-detail-pager .banner-dots{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}.card-detail-pager .banner-dot{width:20px;min-width:20px;height:32px;min-height:32px;border:0;position:relative;opacity:.4}.card-detail-pager .banner-dot::after{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}.card-detail-pager .banner-dot[aria-current=true]{opacity:1}.card-detail-pager .banner-dot[aria-current=true]::after{width:18px;border-radius:6px}
.card-detail-pager .banner-pause{font-size:.8rem;margin-left:5px}
@media(max-width:760px){.card-detail-frame{height:min(88dvh,740px)}.card-detail-page.banner-slide{padding:22px;gap:18px}.banner-slide.has-image{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.banner-visual{max-height:36dvh}.card-detail-pager{gap:6px;padding:8px;min-height:60px}.card-detail-pager button{width:38px;min-width:38px;height:38px;min-height:38px}.card-detail-pager .banner-dot{width:16px;min-width:16px}}
@media(max-height:520px){.card-detail-heading{padding:12px 65px 10px 20px}.card-detail-heading strong{font-size:1.4rem}.detail-close{top:10px}.card-detail-page.banner-slide{padding:12px 22px}.card-detail-dialog .banner-copy h3{font-size:1.5rem;margin-bottom:8px}.card-detail-dialog .banner-eyebrow{margin-bottom:8px}.card-detail-dialog .banner-copy p{font-size:.9rem;line-height:1.4}.banner-slide.has-image{grid-template-columns:1fr 1fr;grid-template-rows:1fr}.card-detail-pager{min-height:48px;padding:4px}}

/* Interactive welcome portrait next to the contact section. */
.assistant-intro{background:#10151d;color:#f7f5f0;padding:clamp(56px,8vw,112px) 24px;overflow:hidden}
.assistant-intro-inner{max-width:1220px;margin:auto;display:grid;grid-template-columns:1fr minmax(320px,500px);gap:clamp(40px,8vw,110px);align-items:center}
.assistant-kicker{font:700 .7rem/1 ui-monospace,monospace;letter-spacing:.18em;color:#74ded5}.assistant-intro-copy h2{font-size:clamp(2.5rem,4.8vw,5rem);line-height:1.13;letter-spacing:-.04em;margin:24px 0;color:#fff}.assistant-intro-copy p{font-size:1.05rem;line-height:1.8;color:#b5c1c9;max-width:32em}.assistant-contact{display:inline-flex;align-items:center;gap:28px;margin-top:20px;padding:15px 22px;border-radius:999px;background:#f5f4ee;color:#131a20;font-weight:700;text-decoration:none}.assistant-contact:hover{background:#79e7da;color:#10151d}.assistant-hint{display:block;color:#9caab3;margin-top:22px}
.assistant-portrait{position:relative;width:100%;aspect-ratio:1122/1402;border-radius:28px;overflow:hidden;background:#d1b99c;box-shadow:0 30px 80px #0006;isolation:isolate}
.assistant-base,.assistant-head,.assistant-eyes{position:absolute;inset:0;background:url('images/about/assistant-motion-base.png') center/100% 100% no-repeat;pointer-events:none}.assistant-head{mask-image:radial-gradient(ellipse 26% 24% at 47% 26%,#000 60%,transparent 100%);transform:translate(var(--head-x,0px),var(--head-y,0px));will-change:transform}.assistant-eyes{mask-image:radial-gradient(ellipse 4% 2.3% at 39% 27.5%,#000 48%,transparent 100%),radial-gradient(ellipse 4% 2.3% at 51.5% 26.5%,#000 48%,transparent 100%);transform:translate(var(--look-x,0px),var(--look-y,0px));will-change:transform}
.assistant-arm{position:absolute;z-index:3;width:44%;max-width:none;left:4%;bottom:-12%;transform-origin:20% 88%;transform:translate(var(--hand-x,0px),var(--hand-y,0px)) rotate(var(--hand-rotation,0deg));pointer-events:none;will-change:transform;filter:drop-shadow(0 8px 12px #0003)}
@media(max-width:767px){.assistant-intro{padding:55px 22px}.assistant-intro-inner{grid-template-columns:1fr;gap:30px}.assistant-intro-copy h2{font-size:clamp(2.3rem,9vw,3.5rem);margin:18px 0}.assistant-portrait{max-width:440px;margin:auto}.assistant-hint{display:none}}
@media(prefers-reduced-motion:reduce){.assistant-head,.assistant-eyes{display:none}.assistant-arm{transform:none}}

/* The reaching arm is derived from the same portrait and stays joined to her shoulder. */
.assistant-base,.assistant-head,.assistant-eyes{background-image:url('images/about/assistant-clean-v2.png')}
.assistant-arm{inset:0;width:auto;height:auto;max-width:none;background:url('images/about/assistant-reach-v2.png') center/100% 100% no-repeat;mask-image:radial-gradient(ellipse 27% 24% at 29% 69%,#000 70%,transparent 100%);transform-origin:22% 84%;filter:none}
.assistant-portrait{scroll-margin-top:80px}
/* Keep the arm and sleeve in the original photograph; only the eye area shifts. */
.assistant-base,.assistant-head,.assistant-eyes{background-image:url('images/about/assistant-reach-v2.png')}
.assistant-head,.assistant-arm{display:none}
.assistant-eyes{mask-image:radial-gradient(ellipse 5% 2.8% at 39.2% 27.8%,#000 55%,transparent 100%),radial-gradient(ellipse 5% 2.8% at 51.6% 26.6%,#000 55%,transparent 100%);background-position:calc(50% + var(--look-x,0px)) calc(50% + var(--look-y,0px));transform:none}
/* Disable the whole-eye slide while the portrait is being rebuilt. */
.assistant-eye-base{position:absolute;inset:0;pointer-events:none;background:url('images/about/assistant-eye-base-v3.png') center/100% 100% no-repeat;mask-image:radial-gradient(ellipse 4.3% 1.5% at 39.2% 27.8%,#000 75%,transparent 100%),radial-gradient(ellipse 4.3% 1.5% at 51.6% 26.6%,#000 75%,transparent 100%)}
.assistant-eyes{display:block;mask-image:radial-gradient(ellipse 2.8% 1.75% at 39.2% 27.8%,#000 70%,transparent 100%),radial-gradient(ellipse 2.8% 1.75% at 51.6% 26.6%,#000 70%,transparent 100%);background-position:center;transform:translate(var(--look-x,0px),var(--look-y,0px))}
@media(prefers-reduced-motion:reduce){.assistant-eye-base,.assistant-eyes{display:none}}