html { scroll-padding-top: calc(var(--header-height) + 16px); scroll-behavior: smooth; }

.studio-hero {
  overflow: clip;
  background: radial-gradient(ellipse at 87% 34%, #272555 0%, var(--dark) 63%);
  color: var(--contrast);
}
.studio-hero :focus-visible, .home-services :focus-visible { outline-color: var(--accent); }
.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  column-gap: clamp(28px, 4.2vw, 66px);
  align-items: center;
  padding-top: clamp(42px, 5vw, 76px);
}
.hero-kicker {
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 660;
}
.hero-kicker::before { content: ""; width: 23px; height: 1px; background: currentColor; flex-shrink: 0; }
.hero-copy h1 {
  margin-top: 20px;
  font-size: clamp(52px, 6.1vw, 92px);
  line-height: 1;
  letter-spacing: -.057em;
  font-weight: 770;
  text-wrap: initial;
}
.hero-line { display: block; overflow: hidden; padding-block: .04em; }
.hero-line > span { display: inline-block; animation: heading-slide .85s cubic-bezier(.16,1,.3,1) both; }
.hero-line:nth-child(2) > span { animation-delay: .10s; }
.hero-line:nth-child(3) > span { animation-delay: .20s; }
.hero-accent { color: var(--accent); }
@keyframes heading-slide {
  from { transform: translateY(112%); }
  to { transform: translateY(0); }
}
.hero-description {
  color: var(--dark-muted);
  max-width: 38ch;
  margin-block: 22px 27px;
  font-size: clamp(16px, 1.32vw, 20px);
  text-wrap: pretty;
}
.hero-actions { gap: 11px; }
.hero-secondary { border-color: #5e5c7b; color: var(--contrast); }
.hero-secondary:hover { color: var(--contrast); border-color: var(--accent); background: #c0d6ee18; }
.hero-scroll {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dark-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
  padding-block: 19px 24px;
  margin-top: 34px;
  grid-column: 1 / -1;
  border-top: 1px solid var(--dark-line);
}
.hero-scroll:hover { color: var(--accent); }
.hero-scroll > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #625f83; border-radius: 50%; font-size: 15px; color: var(--accent); }
.hero-layout:has(.hero-feature:last-child) { padding-bottom: 46px; }

.hero-feature { min-width: 0; }
.hero-stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1.37;
  border: 1px solid #4b4a75;
  border-radius: 18px;
  overflow: hidden;
  background: #191936;
  --pointer-x: 63%;
  --pointer-y: 40%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at var(--pointer-x) var(--pointer-y), #576fb36b, transparent 67%);
}
.hero-orbits { position: absolute; inset: -13% -9%; animation: orbit-assembly 1.35s .1s cubic-bezier(.16,1,.3,1) both; }
.hero-orbits span {
  position: absolute;
  width: 87%;
  height: 45%;
  top: 26%;
  left: 7%;
  border: 1px solid #a0bee87b;
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-24deg);
}
.hero-orbits span:nth-child(2) { top: 30%; left: 8%; height: 38%; border-color: #748dce90; border-top-color: transparent; }
.hero-orbits span:nth-child(3) { top: 34%; left: 9%; height: 31%; border-color: #c0d6ee58; border-bottom-color: transparent; }
@keyframes orbit-assembly {
  from { opacity: 0; transform: rotate(-26deg) scale(.73); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}
.hero-product {
  position: absolute;
  display: grid;
  place-items: center;
  inset: 9% 6%;
  transform: perspective(1050px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform .22s ease-out;
}
.hero-product > .project-art {
  width: 100%;
  height: 100%;
  border-radius: 0;
  aspect-ratio: auto;
  background: transparent;
  overflow: visible;
  animation: product-assembly 1.07s .19s cubic-bezier(.16,1,.3,1) both;
}
@keyframes product-assembly {
  from { opacity: .2; transform: translateY(12%) scale(.92); clip-path: inset(0 88% 0 0); }
  to { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(-30% -15% -25% -15%); }
}
.hero-product .project-screenshot { padding: 0; }
.hero-product .project-screenshot img { border-color: #8b9bc3; box-shadow: 0 17px 44px #0b102d95; }
.hero-product .store-devices { padding-top: 0; align-items: center; }
.hero-product .store-devices img { height: 90%; width: auto; max-width: 45%; object-fit: contain; }
.hero-product .store-devices img + img { margin-top: 1.5cqw; height: 80%; }
.hero-emblem {
  position: absolute;
  right: 6%;
  bottom: 7%;
  width: clamp(51px, 7vw, 96px);
  height: auto;
  padding: 6px;
  background: #f0f5ff;
  border: 1px solid #a8bee1;
  border-radius: 19%;
  box-shadow: 0 9px 30px #09112586;
  animation: reveal .65s .64s both;
}
.hero-emblem-centered { inset: 50% auto auto 50%; margin: calc(clamp(51px, 7vw, 96px) / -2); }
.hero-feature figcaption { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 15px; padding-top: 12px; }
.hero-feature figcaption a { color: var(--contrast); font-size: 14px; font-weight: 680; text-decoration: none; }
.hero-feature figcaption a:hover { text-decoration: underline; }
.hero-feature figcaption > span { color: var(--dark-muted); font-size: 12px; }

.home-work .section, .services-layout, .home-process { padding-block: clamp(55px, 6.5vw, 96px); }
.home-work .section-heading, .home-process .section-heading { margin-bottom: clamp(22px, 3vw, 42px); }
.home-work h2, .home-process h2, .services-intro h2 {
  font-size: clamp(36px, 4.8vw, 69px);
  font-weight: 770;
  line-height: 1.04;
  letter-spacing: -.05em;
}
.home-work .section-heading p, .home-process .section-heading p { color: var(--muted); margin-top: 10px; max-width: 52ch; }

.showcase-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr));
  gap: 18px;
  position: relative;
}
.showcase-slide { border-radius: 16px; background: #eaf0fa; overflow: hidden; min-width: 0; }
.showcase-media { min-width: 0; }
.showcase-copy { padding: 22px; min-width: 0; }
.showcase-copy h3 { font-size: clamp(23px, 2.25vw, 35px); letter-spacing: -.045em; line-height: 1.13; margin-block: 8px 10px; text-wrap: initial; }
.showcase-copy p:not(.eyebrow) { color: var(--muted); }
.showcase-copy .button { margin-top: 16px; }
.showcase-controls[hidden], .showcase-wipe, .showcase-progress { display: none; }

.project-showcase[data-enhanced] .showcase-track { grid-template-columns: minmax(0, 1fr); border-radius: 17px; overflow: hidden; background: #252044; }
.project-showcase[data-enhanced] .showcase-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  height: clamp(345px, 39vw, 520px);
  grid-template-rows: minmax(0, 1fr);
  color: var(--contrast);
  background: #252044;
  visibility: hidden;
  clip-path: inset(0 0 0 var(--slide-mask, 0%));
}
.project-showcase[data-enhanced] .showcase-slide.is-present { visibility: visible; }
.showcase-slide.is-entering { z-index: 1; }
.project-showcase[data-enhanced] .showcase-media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 43% 32%, #dbe7ff, #a6bbeb);
}
.project-showcase[data-enhanced] .showcase-media .project-art {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  border-radius: 0;
  background: transparent;
  transform: translateX(var(--slide-shift, 0%));
}
.project-showcase[data-enhanced] .showcase-media .store-devices { align-items: center; padding: 0; }
.project-showcase[data-enhanced] .showcase-media .store-devices img { width: auto; height: 91%; max-width: 42%; object-fit: contain; }
.project-showcase[data-enhanced] .showcase-media .store-devices img + img { margin-top: 4cqw; height: 82%; }
.project-showcase[data-enhanced] .showcase-copy { align-self: center; padding: clamp(23px, 4.1vw, 60px); }
.project-showcase[data-enhanced] .showcase-copy h3 { font-size: clamp(29px, 4.1vw, 60px); line-height: 1; margin-block: 13px 15px; }
.project-showcase[data-enhanced] .showcase-copy .eyebrow { color: var(--accent); }
.project-showcase[data-enhanced] .showcase-copy p:not(.eyebrow) { color: var(--dark-muted); }
.project-showcase[data-enhanced] .showcase-copy .button { color: var(--contrast); border-color: #817f9c; }
.project-showcase[data-enhanced] .showcase-copy .button:hover { color: var(--contrast); background: #c0d6ee19; border-color: var(--accent); }
.project-showcase[data-enhanced] .showcase-copy :focus-visible { outline-color: var(--accent); }
.project-showcase[data-pinned]::after { content: ""; display: block; height: var(--showcase-travel); }
.project-showcase[data-pinned] .showcase-pin { position: sticky; top: calc(var(--header-height) + 17px); }
.project-showcase[data-pinned] .showcase-slide { height: clamp(340px, 53svh, 530px); }
.showcase-track.is-wiping .showcase-wipe {
  display: block;
  position: absolute;
  left: var(--wipe-edge);
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 2px;
  background: #f5f8ff;
  box-shadow: 0 0 16px 2px #abc6ff;
  pointer-events: none;
}
.project-showcase[data-enhanced] .showcase-progress { display: block; height: 2px; background: #d6deef; margin-top: 14px; }
.showcase-progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(var(--showcase-progress, 0)); background: linear-gradient(90deg, var(--logo-blue), var(--logo-indigo)); }
.showcase-controls:not([hidden]) { display: flex; justify-content: space-between; gap: 10px; margin-top: 13px; }
.showcase-tabs { display: flex; gap: 5px 12px; flex-wrap: wrap; align-items: center; }
.showcase-tabs button, .showcase-arrows button { color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 6px; min-height: 43px; }
.showcase-tabs button { font-size: 13px; font-weight: 630; padding: 7px 10px; text-align: left; }
.showcase-tabs button > span { margin-right: 6px; color: var(--link); font-size: 11px; font-variant-numeric: tabular-nums; }
.showcase-tabs button[aria-current="true"] { background: var(--tint); border-color: #c6d3eb; }
.showcase-arrows { display: flex; gap: 7px; flex-shrink: 0; }
.showcase-arrows button { width: 43px; border-color: #c6d3eb; font-size: 17px; }
.showcase-arrows button[aria-disabled="true"] { opacity: .42; cursor: default; }
.showcase-tabs button:hover, .showcase-arrows button:not([aria-disabled="true"]):hover { background: var(--tint); }
.project-showcase[data-enhanced] .showcase-track { touch-action: pan-y pinch-zoom; }

.home-services { background: var(--dark); color: var(--contrast); }
.services-layout { display: grid; grid-template-columns: minmax(0, .73fr) minmax(0, 1.27fr); align-items: start; gap: clamp(30px, 6vw, 87px); }
.services-intro p { margin-top: 17px; color: var(--dark-muted); max-width: 30ch; }
.services-intro .text-link { margin-top: 21px; }
.home-services .text-link { color: var(--accent); }
.home-services .text-link:hover { color: var(--accent-hover); }
.service-accordion { border-top: 1px solid var(--dark-line); }
.service-accordion details { border-bottom: 1px solid var(--dark-line); }
.service-accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 19px 6px 19px 0;
  font-size: clamp(20px, 2.33vw, 34px);
  font-weight: 710;
  letter-spacing: -.04em;
  line-height: 1.18;
}
.service-accordion summary::-webkit-details-marker { display: none; }
.service-accordion summary:hover, .service-accordion details[open] > summary { color: var(--accent); }
.accordion-icon { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #686481; flex: 0 0 34px; }
.accordion-icon::before, .accordion-icon::after { content: ""; position: absolute; width: 12px; height: 1px; left: calc(50% - 6px); top: calc(50% - .5px); background: currentColor; }
.accordion-icon::after { transform: rotate(90deg); transition: transform .25s ease; }
.service-accordion details[open] .accordion-icon::after { transform: rotate(0); }
.service-expanded { color: var(--dark-muted); padding: 0 42px 23px 0; }
.service-accordion details[open] .service-expanded { animation: reveal .3s ease both; }
.service-expanded ul { margin: 12px 0 18px; padding-inline-start: 19px; line-height: 1.7; font-size: 14px; }
.service-expanded li::marker { color: var(--accent); }
.service-expanded-actions { display: flex; gap: 12px 23px; flex-wrap: wrap; }

.home-steps { border-block: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: project-step; }
.home-steps li { display: flex; gap: 17px; counter-increment: project-step; padding: 22px 21px; }
.home-steps li:first-child { padding-left: 0; }
.home-steps li + li { border-left: 1px solid var(--line); }
.home-steps li::before { content: counter(project-step); flex: 0 0 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--link); font-weight: 780; font-size: 14px; }
.home-steps h3 { font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -.035em; text-wrap: initial; }
.home-steps p { color: var(--muted); font-size: 14px; margin-top: 6px; }

@media (max-width: 890px) {
  .hero-layout { grid-template-columns: 1fr; row-gap: 27px; }
  .hero-copy h1 { font-size: clamp(48px, 9.7vw, 86px); }
  .hero-line:first-child, .hero-line:nth-child(2) { display: inline; }
  .hero-line:first-child { margin-inline-end: .05em; }
  .hero-accent { margin-top: 3px; }
  .hero-description { max-width: 42ch; }
  .hero-stage { aspect-ratio: 1.55; }
  .hero-scroll { margin-top: 0; padding-block: 14px 18px; }
}
@media (max-width: 740px) {
  .services-layout { grid-template-columns: 1fr; }
  .services-intro p { max-width: 38ch; }
  .project-showcase[data-enhanced] .showcase-slide { height: auto; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .project-showcase[data-enhanced] .showcase-media .project-art { height: auto; aspect-ratio: 1.48; }
  .project-showcase[data-enhanced] .showcase-media .store-devices { align-items: start; padding-top: 4cqw; }
  .project-showcase[data-enhanced] .showcase-media .store-devices img { width: 31cqw; height: auto; }
  .project-showcase[data-enhanced] .showcase-media .store-devices img + img { height: auto; }
  .showcase-controls:not([hidden]) { flex-wrap: wrap; }
  .showcase-tabs button { min-height: 42px; font-size: 12px; padding-inline: 7px; }
  .home-steps { grid-template-columns: 1fr; }
  .home-steps li { padding-inline: 0; }
  .home-steps li + li { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 490px) {
  .hero-layout { padding-top: 32px; row-gap: 21px; }
  .hero-kicker { font-size: 11px; }
  .hero-copy h1 { font-size: clamp(38px, 10.6vw, 55px); margin-top: 16px; }
  .hero-description { margin-block: 16px 19px; font-size: 16px; }
  .hero-actions { gap: 7px; }
  .hero-stage { aspect-ratio: 1.38; border-radius: 12px; }
  .hero-feature figcaption a { font-size: 12px; }
  .showcase-tabs { gap: 3px 6px; }
  .showcase-tabs button { min-height: 36px; }
  .service-accordion summary { padding-block: 15px; }
  .service-expanded { padding-inline-end: 0; }
}