/* ArcSoft / midnight world. Shared surfaces follow the supplied brand artwork. */
:root {
  color-scheme:dark;
  --paper:#030916;
  --ink:#edf5ff;
  --muted:#9cacbf;
  --blue:#65caff;
  --line:#78baff26;
  --dark:#030916;
}
body { background:#030916; color:var(--ink); }
::selection { background:#128ce0; color:#fff; }
.site-header {
  background:#030916d9;
  border-bottom:1px solid #75baff1b;
  box-shadow:0 8px 35px #00000015;
}
.wordmark { color:#f0f7ff; }
.wordmark-dot { box-shadow:0 0 16px #40bcff99; }
.desktop-nav a { color:#aabacf; }
.desktop-nav a:hover,.desktop-nav a[aria-current=true] { color:#e4f6ff; }
.desktop-nav a::after { box-shadow:0 0 9px #40bcff99; }
.header-note,.hero-topline { color:#8da6c4; }
.scroll-progress { background:linear-gradient(90deg,#175bdc,#76e4ff); box-shadow:0 0 12px #1589ff; }
.skip-link { background:#10223c; color:#fff; }
.menu-toggle { border-color:#719dd347; background:#0a172880; }
.menu-toggle span { background:#daefff; }
.mobile-menu { background:#030b19f5; color:#eef6ff; }
.mobile-menu>a { border-color:var(--line); }
.mobile-menu small,.mobile-menu>p { color:#98b6d7; }

/* One full-bleed environment: the emblem belongs to the landscape. */
.hero {
  min-height:clamp(720px,calc(100svh - 92px),1000px);
  background:#020815;
  isolation:isolate;
}
.hero-world {
  position:absolute;
  inset:0;
  height:100%;
  width:100%;
  z-index:-3;
  pointer-events:none;
  transform:translateY(var(--world-y,0px));
}
.hero-world img { width:100%; height:100%; object-fit:cover; object-position:60% center; }
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,#020815b8 0%,#02081566 35%,transparent 65%);
  pointer-events:none;
}
.hero::after {
  content:"";
  position:absolute;
  inset:auto 0 -1px;
  height:230px;
  z-index:-1;
  background:linear-gradient(transparent,#030916);
  pointer-events:none;
}
.hero-aura {
  inset:auto auto 8% -15%;
  width:75%;
  height:40%;
  z-index:-1;
  background:radial-gradient(ellipse,#126ad520,transparent 68%);
  transform:translate3d(0,var(--light-y,0px),0);
}
.hero-layout { display:flex; align-items:center; min-height:560px; }
.hero-copy { width:57%; padding:65px 0 120px; transform:none; opacity:1; }
.hero h1 { font-size:clamp(76px,8.8vw,142px); letter-spacing:-.065em; font-weight:450; line-height:1.02; }
.hero .blue-text { color:#b8eaff; text-shadow:0 0 38px #137edc33; }
.hero-kicker { color:#a4b8d0; font-size:12px; }
.hero-kicker>span { box-shadow:0 0 12px #3dbdff99; }
.hero-description { color:#a6bad2; max-width:330px; font-size:14px; line-height:1.8; }
.hero-topline,.hero-bottom { opacity:1; }
.hero-topline { padding-top:24px; }
.hero-bottom { border-color:#76baff29; padding-bottom:28px; }
.hero-bottom>p,.hero-bottom-note,.scroll-cue { color:#a3b6d0; }
.scroll-track { border-color:#74baff66; }
.scroll-track::after { background:#b2edff; box-shadow:0 0 7px #51bfff; }

/* A blue light seam carries the opening into the real product. */
.work {
  background:radial-gradient(ellipse at 75% 25%,#0d326433,transparent 60%),#030916;
  padding-top:65px;
}
.work::before {
  content:"";
  position:absolute;
  top:0;
  left:var(--gutter);
  right:var(--gutter);
  height:1px;
  background:linear-gradient(90deg,transparent,#398bdc55,#8bdbff,transparent);
  box-shadow:0 0 20px #1888fa66;
}
.section-top,.dark-section .section-top { color:#90a9c9; border-color:var(--line); }
.section-dot,.dark-section .section-dot { background:#7adaff; box-shadow:0 0 12px #32a8ff88; }
.work-heading h2 span { color:#8fabd2; }
.work-heading>p,.project-info>p { color:#a0b2c9; }
.project-stage {
  color:#b0c9e8;
  border:1px solid #599cea42;
  background:radial-gradient(ellipse at 50% 65%,#17457a80,transparent 65%),linear-gradient(135deg,#0c1a30,#06101f 65%,#0b2340);
  box-shadow:inset 0 1px 0 #addaff15,0 35px 90px #00000045;
  position:relative;
}
.project-stage-top>.micro { color:#92afd3; }
.servio-logo {
  box-sizing:content-box;
  width:128px;
  padding:10px 14px;
  background:#eaf5ff;
  border:1px solid #d7eeff;
  border-radius:10px;
  mix-blend-mode:normal;
}
/* Text wordmark for products without a logo file; sized to match .servio-logo. */
.product-mark {
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:34px;
  padding:10px 16px 10px 10px;
  background:#eaf5ff;
  border:1px solid #d7eeff;
  border-radius:10px;
  color:#11284a;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.product-mark b {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:8px;
  background:#2d3ccf;
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
}
.project+.project { margin-top:clamp(72px,9vw,128px); }
.desktop-device { border-color:#33445b; box-shadow:0 30px 65px #0008,0 0 35px #2464b52b; }
.mobile-device { border-color:#6499c0; box-shadow:0 30px 60px #0009,0 0 35px #299df12b; }
.view-switch { background:#12233c99; border-color:#71a6dd3d; }
.view-switch button { color:#a7c0dd; }
.view-switch button[aria-pressed=true] { background:#c2edff; color:#082747; box-shadow:0 0 15px #4bbcff26; }
.project-visit { color:#e4f5ff; }
.project-visit>span:first-of-type { border-color:#6ca9e64d; }
.project-visit:hover>span:first-of-type { background:#126fbb; }
.project-category { color:#8faed4; }
.project-flow .micro { color:#79ceff; }
.project-flow p,.project-detail-body p { color:#a4b5cc; }
.project-detail { padding-inline:clamp(18px,2.5vw,28px); background:linear-gradient(110deg,#0b1a30aa,#08132166); border-color:#5889bf3d; }
.project-tags span { color:#b4c9e4; border-color:#669ed13d; background:#0f223650; }

.studio {
  position:relative;
  overflow:hidden;
  background:radial-gradient(ellipse at 8% 50%,#09336155,transparent 55%),#050d1b;
  border-top:1px solid #73b6ff1a;
  border-bottom:1px solid #73b6ff1a;
}
.studio-grid { display:block; }
.studio-copy { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:clamp(32px,5vw,80px); }
.studio-description { grid-template-columns:1fr; gap:20px; margin-top:0; max-width:450px; }
.studio-copy h2>span { color:#88d7ff; }
.studio-description p { color:#a0b3cd; }
.principles .micro { color:#7fbbe8; }
.principles p { color:#dbe9fa; }
.capabilities { background:radial-gradient(ellipse at 100% 90%,#0b294044,transparent 65%),#030916; }
.capabilities-heading>p,.capability-body>p { color:#a5b7cf; }
.capability,.capability:last-child { border-color:var(--line); }
.capability[open] { background:linear-gradient(90deg,transparent,#1232562b,transparent); }
.capability-number,.capability-body>span { color:#86a4c9; }
.capability-sketch {
  background:linear-gradient(135deg,#17416d66,#0c192a);
  border-color:#609dd36b;
  box-shadow:12px 12px 0 -1px #0b172a,12px 12px 0 0 #4676a450,0 0 45px #097cc522;
}
.web-sketch>i { border-color:#4f80aa55; }
.web-sketch b,.product-sketch>i,.code-sketch i:nth-of-type(2) { background:#4489c2; }
.product-sketch>b,.code-sketch i { background:#295780; }
.product-sketch>b:last-child { background:#4c91bc; }
.contact {
  background:radial-gradient(ellipse at 5% 60%,#06366a66,transparent 55%),radial-gradient(ellipse at 100% 90%,#122d6444,transparent 60%),#050d1b;
  border-top:1px solid var(--line);
}
.contact h2 span { color:#8edcff; text-shadow:0 0 55px #1382d72b; }
.contact-description { color:#a5b9d4; }
.contact-copy>.micro { color:#8eafcf; }
.contact-layout { column-gap:7%; }
.contact-form {
  padding:32px;
  border:1px solid #72b4e936;
  border-radius:22px;
  background:linear-gradient(135deg,#132c4666,#09152580);
  box-shadow:inset 0 1px 0 #c8eeff0d,0 22px 65px #0000002b;
  backdrop-filter:blur(18px);
}
.contact-field>span { color:#b3c8e2; }
.contact-field input::placeholder,.contact-field textarea::placeholder { color:#8b9fb9; }
.contact-field input,.contact-field textarea { border-color:#6a99bf55; }
.contact-field input:focus,.contact-field textarea:focus { border-color:#6ed5ff; box-shadow:0 1px 0 #6ed5ff; }
.contact-submit-row>p { color:#91a9c5; }
.contact-submit { background:#b9eaff; color:#092947; }
.contact-submit i { background:#146eaa; }
.site-footer { background:#030916; }
.footer-wordmark { color:#dbedff; }
.footer-bottom { color:#8ba5c6; border-color:var(--line); }
.footer-top { border-color:var(--line); }

@media (max-width:1100px) and (min-width:901px) {
  .hero h1 { font-size:8.8vw; }
  .hero-copy { width:58%; }
  .contact-form { padding:24px; }
}
@media (max-width:900px) {
  .hero { min-height:1040px; }
  .hero-layout { display:block; min-height:0; }
  .hero-copy { width:100%; padding:55px 0 0; }
  .hero h1 { font-size:clamp(66px,10vw,88px); line-height:1.02; }
  .hero-world img { object-position:center 20%; }
  .hero::before { background:linear-gradient(#02081544,#02081566 25%,transparent 55%); }
  .hero-description { max-width:300px; font-size:13px; margin-top:22px; }
  .hero-kicker { font-size:11px; margin-bottom:22px; }
  .hero-bottom { margin-top:auto; }
  .hero-topline>span:last-child { display:none; }
  .contact-form { padding:24px; }
}
@media (max-width:760px) {
  .studio-copy { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:560px) {
  .hero { min-height:880px; min-height:max(880px,calc(100svh - 68px)); }
  .hero-copy { padding-top:35px; }
  .hero h1 { font-size:clamp(56px,15vw,80px); letter-spacing:-.055em; }
  .hero-description { font-size:12px; max-width:270px; margin-top:18px; }
  .hero-kicker { font-size:10px; margin-bottom:18px; }
  .hero-world img { object-position:center top; }
  .hero::before { background:linear-gradient(#02081511,#02081555 23%,transparent 43%); }
  .hero::after { height:180px; }
  .hero-bottom { padding:18px 0 24px; gap:10px; }
  .hero-bottom>p { font-size:9px; max-width:195px; }
  .scroll-cue { color:#c1d7ed; }
  .work { padding-top:46px; }
  .servio-logo { width:104px; padding:8px 10px; }
  .product-mark { height:28px; padding:8px 12px 8px 8px; font-size:14px; gap:8px; }
  .product-mark b { width:26px; height:26px; font-size:10px; border-radius:7px; }
  .project-stage-top>.micro { font-size:7px; }
  .contact-form { padding:24px 20px 8px; border-radius:18px; }
  .contact-fields { grid-template-columns:1fr; gap:0; }
  .contact-field { margin-bottom:26px; }
  .contact-submit-row { align-items:flex-start; }
  .contact-submit { gap:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-world,.hero-aura { transform:none; will-change:auto; }
}
@media (prefers-reduced-transparency:reduce) {
  .site-header,.mobile-menu { background:#030916; backdrop-filter:none; }
  .contact-form,.view-switch { background:#0b192b; backdrop-filter:none; }
}

/* Readable supporting type and a tighter editorial rhythm. */
.micro,.header-note,.hero-topline,.hero-bottom .micro,.hero-motion-toggle.micro,
.project-stage-top>.micro,.project-stage-bottom>.micro,.project-category,
.project-flow .micro,.principles .micro,.contact-copy>.micro,.footer-bottom {
  font-size:11px;
  letter-spacing:.075em;
}
.hero-kicker { font-size:14px; }
.hero-description { font-size:15px; }
.hero-bottom>p { font-size:12px; max-width:300px; }
.work-heading>p,.project-info>p,.project-flow p,.project-detail-body p,
.studio-description p,.capabilities-heading>p,.capability-body>p,
.contact-description { font-size:15px; line-height:1.8; }
.view-switch button { font-size:12px; min-height:44px; }
.project-tags span,.screen-dialog-note { font-size:12px; }
.contact-field>span { font-size:13px; }
.contact-submit-row>p { font-size:12px; max-width:230px; }
.contact-submit { min-height:48px; font-size:13px; }
.contact-status { font-size:14px; }
.work-heading { padding:40px 0; }
.work-heading h2 { font-size:clamp(44px,5.5vw,80px); }
.studio,.capabilities { padding-block:64px; }
.studio-grid { padding-block:40px 32px; }
.studio-copy { align-items:start; }
.studio-copy h2 { max-width:600px; font-size:clamp(38px,4.5vw,64px); }
.studio-description { max-width:490px; gap:14px; }
.founders { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding:0 0 36px; }
.founders>div { display:flex; align-items:center; gap:16px; }
.founder-monogram { display:grid; place-items:center; flex:0 0 48px; height:48px; border:1px solid #76c7ff40; border-radius:50%; background:#10273d; color:#b8eaff; font-size:14px; letter-spacing:.04em; }
.founders h3 { font-size:17px; font-weight:500; }
.founders p { color:#a0b3cd; font-size:13px; margin-top:4px; }
.principles { padding-top:24px; }
.principles p { max-width:270px; font-size:14px; line-height:1.65; }
.capabilities-heading { padding:36px 0; }
.capabilities-heading>p { padding-right:0; }
.capability-list { overflow-anchor:none; }
.capability { position:relative; background:transparent; }
.capability[open] { background:transparent; }
.capability::before { content:""; position:absolute; inset:0; background:linear-gradient(100deg,#15334d50,transparent); opacity:0; transition:opacity .35s ease; pointer-events:none; }
.capability[data-expanded=true]::before { opacity:1; }
.capability.is-animating { overflow:hidden; }
.capability summary { position:relative; min-height:98px; padding:26px 16px; }
.capability summary:focus-visible { outline-offset:-3px; border-radius:4px; }
.capability-body { animation:none; margin-left:106px; padding:0 24px 32px 0; min-height:0; display:grid; grid-template-columns:1.4fr 1fr; column-gap:48px; opacity:1; transition:opacity .22s ease; }
.capability-body>p { max-width:570px; }
.capability-body>span { font-size:12px; line-height:1.75; grid-column:1; margin-top:14px; }
.capability-example { grid-column:2; grid-row:1/3; align-self:start; border:1px solid #70b8e733; border-radius:12px; padding:20px; background:#10223780; font-size:16px; line-height:1.6; transition:border-color .2s,background .2s; }
.capability-example span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:#9bb5d3; margin-bottom:10px; }
.capability-example i { font-style:normal; margin-left:10px; color:#8fdbff; }
.capability-example:hover { border-color:#7bd9ff88; background:#15344d; }
.capability[data-expanded=false] .capability-body { opacity:0; }
.capability[data-expanded=false] h3 { color:var(--ink); }
.capability[data-expanded=false] .detail-plus { transform:rotate(0); }
.capability[data-expanded=true] .detail-plus { transform:rotate(45deg); }
.detail-plus { transition:transform .35s cubic-bezier(.22,.75,.25,1); }
.contact-description { max-width:360px; }
.contact-description br,.contact-submit-row>p br { display:none; }
.case-notes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:32px 0; margin:0 0 28px; border-block:1px solid var(--line); }
.case-notes .micro { color:#7fceff; }
.case-notes h4 { font-size:20px; font-weight:500; margin:14px 0 10px; letter-spacing:-.025em; }
.case-notes p { color:#a9bad0; font-size:14px; line-height:1.75; max-width:350px; }
.project-stage .screen-zoom { opacity:1; }
.servio-narrative { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:start; gap:clamp(28px,5vw,72px); margin:12px 0 48px; }
.servio-narrative .project-stage { position:sticky; top:110px; padding:24px; }
.servio-narrative .device-composition { height:400px; margin:20px 0; }
.servio-narrative .project-stage[data-view=mobile] .mobile-device { width:min(320px,88%); height:400px; right:50%; top:0; transform:translateX(50%); }
.servio-narrative .project-stage[data-view=mobile] .mobile-device:hover { transform:translateX(50%); }
.servio-narrative .project-stage[data-view=desktop] .desktop-device { width:94%; left:3%; top:15%; transform:none; }
.servio-narrative .project-stage-bottom { flex-wrap:wrap; justify-content:center; gap:16px; }
.servio-narrative .project-stage-top { flex-wrap:wrap; gap:12px; }
.story-steps { display:flex; flex-direction:column; padding:0; gap:0; }
.story-steps>div,.story-steps>div+div { position:relative; display:flex; flex-direction:column; justify-content:center; min-height:270px; padding:35px 24px 35px 38px; border:0; border-left:1px solid #517ba340; transition:background .4s; }
.story-steps>div::before { content:""; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:#87deff; transform:scaleY(0); transform-origin:top; transition:transform .5s var(--ease); box-shadow:0 0 14px #28b7ff55; }
.story-steps>div.is-current { background:linear-gradient(90deg,#16426b40,transparent); }
.story-steps>div.is-current::before { transform:scaleY(1); }
.story-steps h4 { font-size:clamp(26px,2.6vw,38px); line-height:1.2; margin:20px 0 16px; }
.story-steps p { max-width:310px; }
@media(max-width:1100px) {
  .servio-narrative { grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:24px; }
  .servio-narrative .project-stage { padding:20px; }
  .servio-narrative .view-switch button { padding-inline:10px; }
}

@media(max-width:900px) {
  .servio-narrative { grid-template-columns:1fr; }
  .servio-narrative .project-stage { position:relative; top:auto; }
  .story-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .story-steps>div,.story-steps>div+div { min-height:0; padding:20px 16px; justify-content:flex-start; }
  .story-steps h4 { font-size:24px; }
  .capability-body { grid-template-columns:1fr; gap:0; margin-left:76px; }
  .capability-example { grid-column:1; grid-row:auto; margin-top:22px; padding:16px 20px; }
  .hero-kicker { font-size:13px; }
  .hero-description { font-size:14px; }
  .hero-bottom { flex-wrap:wrap; row-gap:16px; }
}
@media(max-width:560px) {
  .section-top { gap:14px; align-items:flex-start; }
  .section-top>span:last-child { text-align:right; max-width:42%; }
  .micro,.project-stage-top>.micro,.project-stage-bottom>.micro,.footer-bottom { font-size:11px; letter-spacing:.04em; }
  .hero-kicker { font-size:12px; }
  .hero-description { font-size:14px; }
  .hero-bottom>p { font-size:11px; max-width:100%; }
  .hero-bottom .scroll-cue { margin-left:0; }
  .hero-motion-toggle.micro { margin-left:0; }
  .project-stage-top { flex-wrap:wrap; gap:12px; }
  .view-switch { max-width:100%; }
  .view-switch button { padding-inline:14px; }
  .work-heading>p { margin-top:20px; }
  .project-flow>div { grid-template-columns:1fr; gap:6px; padding-block:20px; }
  .project-flow .micro,.project-flow p { grid-column:1; grid-row:auto; }
  .project-flow h4 { margin-top:3px; }
  .studio,.capabilities { padding-block:44px; }
  .studio-grid { padding-block:30px 24px; }
  .studio-description { margin-top:0; }
  .founders { grid-template-columns:1fr; gap:22px; padding-bottom:30px; }
  .principles { grid-template-columns:1fr; gap:0; }
  .principles>div { display:grid; grid-template-columns:98px 1fr; gap:14px; padding-block:16px; }
  .principles>div+div { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .principles p { margin:0; max-width:none; font-size:14px; }
  .principles .micro { margin-top:3px; }
  .capability summary { grid-template-columns:26px 1fr 22px; gap:8px; padding:22px 4px; min-height:86px; }
  .capability h3 { font-size:clamp(22px,6vw,30px); }
  .capability-body { margin-left:38px; padding-right:4px; padding-bottom:26px; }
  .capability-body>p { font-size:14px; }
  .capability-example { font-size:14px; padding:16px; }
  .contact-submit-row { flex-wrap:wrap; gap:20px; }
  .contact-submit-row>p { max-width:none; flex-basis:100%; font-size:12px; }
  .contact-submit { margin-left:auto; }
  .case-notes { grid-template-columns:1fr; gap:28px; padding-block:28px; }
  .case-notes h4 { margin-top:8px; }
  .project-stage[data-view=mobile] .device-composition { height:520px; margin-top:18px; }
  .project-stage[data-view=mobile] .mobile-device { width:min(230px,82%); top:0; right:50%; transform:translateX(50%); }
  .project-stage[data-view=mobile] .mobile-device:hover { transform:translateX(50%); }
  .servio-narrative .project-stage[data-view=mobile] .mobile-device { width:min(260px,95%); height:510px; }
  .servio-narrative .project-stage[data-view=mobile] .device-composition { height:520px; }
  .story-steps { grid-template-columns:1fr; gap:0; }
  .story-steps>div,.story-steps>div+div { padding:24px; }
  .story-steps h4 { margin:10px 0; font-size:26px; }
}
@media(prefers-reduced-motion:reduce) {
  .capability::before,.capability-body,.detail-plus { transition:none; }
  .story-steps>div,.story-steps>div::before { transition:none; }
  .servio-narrative .project-stage { position:relative; top:auto; }
}
/* Product chapters: one visual grammar, independent scroll stories. */
.site-header .desktop-nav { margin-left:auto; }
.work .product-chapter { --story-accent:#86dcff; margin:48px 0 0; padding:0; scroll-margin-top:120px; }
.work .product-chapter + .product-chapter { --story-accent:#b4bcff; margin-top:120px; padding-top:64px; border-top:1px solid #829dcc55; }
.product-heading { display:grid; grid-template-columns:1fr 1fr; gap:24px 60px; padding:32px 0 42px; border-top:1px solid #6198be40; }
.product-index { grid-column:1/-1; display:flex; align-items:center; gap:24px; color:var(--story-accent); }
.product-index span { color:#9fb3cf; }
.product-heading h3 { font-size:clamp(46px,5.5vw,80px); letter-spacing:-.045em; line-height:1.06; font-weight:500; }
.product-intro h4 { font-size:22px; font-weight:500; letter-spacing:-.025em; }
.product-intro p { color:#abc0db; font-size:16px; line-height:1.75; margin:12px 0 0; max-width:520px; text-wrap:balance; }
.scroll-story { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:clamp(28px,5vw,76px); align-items:start; position:relative; }
.story-gallery { position:sticky; top:110px; border:1px solid #50759d66; border-radius:22px; background:radial-gradient(ellipse at 50% 100%,#123b60,#091525 75%); padding:24px; box-shadow:0 28px 70px #0003; min-width:0; }
#egitim-paneli .story-gallery { background:radial-gradient(ellipse at 50% 100%,#252954,#0b1428 75%); border-color:#777fbd55; }
.story-gallery-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.story-gallery-top>span:first-child { font-size:19px; font-weight:600; letter-spacing:-.035em; }
.story-gallery-top .micro { color:#a3b9d4; font-size:10px; text-align:right; }
.story-visit { display:inline-flex; align-items:center; min-height:44px; margin-block:-10px; color:var(--story-accent,#86dcff); font-size:13px; white-space:nowrap; }
.story-visit:hover { text-decoration:underline; text-underline-offset:4px; }
.story-frames { display:grid; gap:24px; }
.scroll-story:not(.story-enhanced) .story-gallery { position:static; }
.story-frame { margin:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; min-width:0; height:clamp(300px,54svh,500px); padding:8px 0; }
.story-enhanced .story-frames { display:grid; gap:0; }
.story-enhanced .story-frame { grid-area:1/1; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px); transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility .45s; }
.story-enhanced .story-frame.is-current { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
.story-screen { position:relative; display:block; padding:0; overflow:hidden; border:1px solid #8faec566; background:#08101c; cursor:zoom-in; min-height:0; max-width:100%; box-shadow:0 18px 45px #0005; }
.story-screen img { width:100%; height:100%; display:block; object-fit:contain; }
.phone-screen { aspect-ratio:390/844; height:calc(100% - 35px); border:6px solid #233449; border-radius:24px; }
.desktop-screen { width:100%; aspect-ratio:1280/820; border-radius:10px; }
.story-zoom { position:absolute; right:8px; bottom:8px; background:#050e20e8; border:1px solid #a0dfff50; color:#def1ff; padding:8px 10px; border-radius:20px; font-size:11px; }
.story-frame figcaption { color:#bdcee2; font-size:12px; line-height:1.4; text-align:center; }
.story-select { display:flex; gap:8px; padding-top:16px; border-top:1px solid #749ac52b; }
.story-select a { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:8px; border-radius:8px; color:#b3c7df; font-size:13px; transition:background .25s,color .25s; }
.story-select a>span { font-size:11px; opacity:.7; }
.story-select a[aria-current] { background:var(--story-accent,#86dcff); color:#091728; }
.story-select a:hover { outline:1px solid #adc6e360; }
.story-chapters { min-width:0; }
.story-chapter { position:relative; min-height:75svh; display:flex; flex-direction:column; justify-content:center; padding:48px 0 48px 28px; border-left:1px solid #627f9e40; scroll-margin-top:130px; }
.story-chapter::before { content:""; position:absolute; inset:0 auto 0 -1px; width:2px; background:var(--story-accent,#86dcff); opacity:0; transition:opacity .4s; }
.story-enhanced .story-chapter.is-current::before { opacity:1; }
.story-chapter .micro { color:var(--story-accent,#86dcff); }
.story-chapter h4,.story-chapter h3 { margin:22px 0; font-size:clamp(28px,3vw,43px); line-height:1.16; letter-spacing:-.035em; font-weight:500; overflow-wrap:anywhere; }
.story-chapter>p { color:#b1c4df; font-size:16px; line-height:1.8; max-width:360px; }
.story-screen-label { margin-top:28px; font-size:11px; line-height:1.6; color:#9eb7d2; letter-spacing:.025em; }
.product-chapter .project-detail { margin-top:32px; }
.studio-intro { display:grid; grid-template-columns:1fr; padding:48px 0; justify-items:center; text-align:center; }
.studio-intro h2 { font-size:clamp(38px,4.5vw,64px); line-height:1.08; letter-spacing:-.04em; font-weight:500; }
.studio-intro h2>span { color:#8edcff; }
.section-top>span:only-child { max-width:none; text-align:left; }
.work-heading { justify-content:center; text-align:center; }
.work-heading h2 { max-width:800px; color:#8edcff; }
.contact-copy h2:first-child { margin-top:0; }
.studio-intro>p { color:#b1c4df; font-size:16px; line-height:1.8; max-width:450px; }
.founder-gallery { position:sticky; top:130px; padding:80px 0 32px; isolation:isolate; min-width:0; }
.studio-silhouette { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:.14; filter:grayscale(1); z-index:-1; pointer-events:none; }
.founder-portraits { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:end; }
.founder-portrait { display:flex; flex-direction:column; align-items:center; gap:20px; color:#abc0d8; font-size:15px; }
.portrait-initials { display:grid; place-items:center; width:100%; aspect-ratio:3/4; border:1px solid #6383a338; border-radius:100px 100px 14px 14px; background:linear-gradient(155deg,#1a2c43cc,#07101be8); color:#60758f; font-size:clamp(44px,5vw,76px); letter-spacing:-.04em; transition:color .6s,background .6s,box-shadow .6s,border-color .6s; }
.founder-portrait.is-current .portrait-initials { color:#c7f1ff; background:linear-gradient(155deg,#286b9ac9,#0b2138ed); border-color:#8addff88; box-shadow:0 0 65px #269fe52b,inset 0 1px 0 #c2f5ff80; }
.founder-portrait.is-current { color:#e0f3ff; }
.founder-caption { text-align:center; margin:34px 0 0; color:#9cb6d0; }
.founder-story .story-chapter { min-height:65svh; }
.founder-story .story-chapter h3 { font-size:clamp(25px,2.8vw,40px); }
@media(min-width:761px) and (max-height:700px) {
  .story-gallery { top:100px; padding:16px; }
  .story-frame { height:45svh; min-height:220px; }
  .story-gallery-top { margin-bottom:6px; }
  .story-select { padding-top:8px; }
}
.hero .hero-kicker,.hero .hero-description,.hero .hero-topline>span:first-child,.hero .hero-motion-toggle { display:none; }
.hero .hero-topline { justify-content:flex-end; min-height:1em; }
@media(max-width:760px) {
  .work .product-chapter + .product-chapter { margin-top:80px; padding-top:32px; }
  .product-heading { grid-template-columns:1fr; gap:18px; padding:24px 0 32px; }
  .product-index { flex-wrap:wrap; gap:12px; }
  .product-heading h3 { font-size:48px; }
  .product-intro h4 { font-size:21px; }
  .product-intro p { font-size:15px; }
  /* No pinned panel: each screenshot sits inline above its own chapter. */
  .scroll-story { grid-template-columns:1fr; gap:0; }
  .story-gallery,.story-frames,.story-chapters { display:contents; }
  .story-gallery-top { order:0; margin-bottom:4px; }
  .story-gallery-top>span:first-child { font-size:16px; }
  .story-gallery-top .micro { font-size:9px; max-width:120px; }
  .story-frame:nth-child(1) { order:1; }
  .story-chapter:nth-child(1) { order:2; }
  .story-frame:nth-child(2) { order:3; }
  .story-chapter:nth-child(2) { order:4; }
  .story-frame { height:auto; gap:10px; padding:16px 0 0; }
  .phone-screen { height:min(56svh,440px); border-width:4px; border-radius:15px; }
  .desktop-screen { height:auto; }
  .story-frame figcaption { font-size:11px; }
  .story-select,.story-screen-label { display:none; }
  .story-chapter { min-height:0; padding:24px 0 48px 20px; }
  .story-chapter h4 { font-size:30px; margin:16px 0; }
  .story-chapter>p { font-size:15px; }
  .story-screen-label { margin-top:18px; }
  .studio-intro { grid-template-columns:1fr; gap:24px; padding:32px 0; }
  .founder-gallery { top:84px; z-index:3; background:#071221; padding:16px 24px; border-radius:16px; border:1px solid #597fa53d; }
  .founder-portraits { max-width:380px; margin:auto; gap:24px; }
  .portrait-initials { aspect-ratio:auto; height:23svh; min-height:130px; max-height:230px; font-size:48px; }
  .founder-portrait { gap:10px; font-size:13px; }
  .founder-caption { margin-top:16px; font-size:10px; }
  .founder-story .story-chapter { min-height:55svh; }
}
@media(max-width:560px) {
  .founder-gallery { top:76px; }
  .story-zoom { font-size:9px; padding:5px 7px; }
}
@media(prefers-reduced-motion:reduce) {
  .story-enhanced .story-frame,.story-chapter::before,.portrait-initials,.story-select a { transition:none; transform:none; }
}