/* Meet The Minds is the reference: gutters outside a shared content maximum. */
.service-item,
.work-stack-item,
.faq-item,
.contact-form {
  border-radius: clamp(18px, 2vw, 28px);
}

.work-card {
  border-radius: clamp(18px, 2vw, 16px);
}

@media (min-width: 640px) {
  .work-card {
    width: 300px;
    height: 160px;
  }

  .work-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

.faq-item {
  border-radius: 24px;
}

@media (max-width: 767px) {
  .work-stack-item__media {
    border-radius: 16px;
  }
  .work-showcase-title {
    width: 100%;
    text-align: center;
  }
  .services-head__copy {
    width: 100%;
  }
  .services-head__copy .section-index {
    align-self: stretch;
    text-align: start;
  }
  .faq-item,
  .faq-item__trigger {
    border-radius: 16px;
  }
}

.contact-logo--dark {
  display: none;
}

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="light"] body {
  background: var(--paper);
  color: var(--ink);
}
.theme-toggle {
  --toggle-height: 44px;
  --toggle-width: var(--toggle-height);
  position: relative;
  display: block;
  flex: 0 0 var(--toggle-width);
  width: var(--toggle-width);
  height: var(--toggle-height);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  transition: opacity 200ms;
}
.theme-toggle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  transition: opacity 250ms, transform 450ms;
}
.theme-toggle .theme-toggle__sun {
  color: #ffbb50;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-70deg) scale(0.6);
}
.theme-toggle .theme-toggle__moon {
  display: block;
  color: #fff;
  opacity: 1;
}
:root[data-theme="light"] .theme-toggle__sun {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
}
:root[data-theme="light"] .theme-toggle__moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(35deg) scale(0.6);
}
:root[data-theme="light"] .nav-pill {
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.25);
}
:root[data-theme="light"] .nav-pill a {
  color: #fff;
}
:root[data-theme="light"] .nav-pill a.is-active {
  background: #fff;
  color: #000;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle svg {
    transition: none;
  }
}

.site-header.is-floating {
  --section-pad-x: var(--floating-pad-x, clamp(1.15rem, 3.3vw, 3.5rem));
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  background: #080808;
  color: #fff;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.2);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  animation: floating-header-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.site-header.is-floating > .header-inner {
  width: calc(100% - 2 * var(--floating-shell-pad, 0.5rem));
  max-width: none;
  margin-inline: auto;
}
@keyframes floating-header-in {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header.is-floating {
    animation: none;
  }
}

/* Share one vertical rhythm across every content section. */
.studio,
.services,
.process,
.work-showcase,
.tech-stack,
.testimonials,
.faqs,
.contact {
  margin-block: 0;
  padding-block: var(--section-pad-y);
}

.dark-band {
  margin-block: 0;
}

/* Services previously added its section spacing inside this wrapper. */
.services-inner {
  padding-block: 0;
}

.services-inner,
.members-inner,
.work-showcase-inner {
  width: min(
    var(--section-max, 100rem),
    calc(100% - 2 * var(--section-pad-x, 0.75rem))
  );
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

/* These sections extend past the page shell, so subtract its inset as well. */
.process-inner,
.tech-stack__inner,
.testimonials-inner,
.faqs-inner,
.contact-inner {
  width: min(
    var(--section-max, 100rem),
    calc(100% - 2 * (var(--shell-pad, 0.5rem) + var(--section-pad-x, 0.75rem)))
  );
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.site-footer {
  padding-inline: calc(
    var(--shell-pad, 0.5rem) + var(--section-pad-x, 0.75rem)
  );
}

.site-footer__inner {
  width: min(var(--section-max, 100rem), 100%);
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

/* One office and a separate social column share the footer's available space. */
.site-footer__offices {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 2rem;
  margin-top: 1.75rem;
}
.site-footer__connect h3 {
  margin: 0 0 0.85rem;
  font:
    800 0.98rem/1.5 "Codec Cold",
    system-ui,
    sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.site-footer__office li .icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  flex: 0 0 1rem;
}
.site-footer__office li a {
  overflow-wrap: anywhere;
}
.site-footer__office-city {
  display: block;
}
@media (max-width: 720px) {
  .site-footer__office-city {
    display: inline;
  }
}
.site-footer__map {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1rem;
  padding-block: 0.35rem;
  font:
    500 0.82rem/1.5 "Inter",
    system-ui,
    sans-serif;
  color: #fff;
}
.site-footer__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.site-footer__socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 50%;
  background: #111;
  color: #fff;
  transition:
    background 200ms,
    border-color 200ms,
    transform 200ms;
}
.site-footer__socials svg {
  width: 19px;
  height: 19px;
}
.site-footer__socials a:hover,
.site-footer__socials a:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* Keep the footer readable on the light theme's paper surface. */
:root[data-theme="light"] .site-footer {
  background: var(--paper);
  color: var(--ink);
}
:root[data-theme="light"] .site-footer__logo img {
  filter: url("#logo-light-surface");
}
:root[data-theme="light"] .site-footer__desc,
:root[data-theme="light"] .site-footer__office li,
:root[data-theme="light"] .site-footer__copy {
  color: #555158;
}
:root[data-theme="light"] .site-footer__policies a,
:root[data-theme="light"] .site-footer__nav a,
:root[data-theme="light"] .site-footer__office h3,
:root[data-theme="light"] .site-footer__office i,
:root[data-theme="light"] .site-footer__map {
  color: var(--ink);
}
:root[data-theme="light"] .site-footer__nav {
  border-color: rgb(16 16 18 / 0.16);
}
:root[data-theme="light"] .site-footer__socials a {
  background: rgb(16 16 18 / 0.04);
  border-color: rgb(16 16 18 / 0.2);
  color: var(--ink);
}
:root[data-theme="light"] .site-footer__policies a:hover,
:root[data-theme="light"] .site-footer__nav a:hover,
:root[data-theme="light"] .site-footer__office a:hover {
  color: var(--footer-accent);
}
:root[data-theme="light"] .site-footer__socials a:hover,
:root[data-theme="light"] .site-footer__socials a:focus-visible {
  background: var(--footer-accent);
  border-color: var(--footer-accent);
  color: #fff;
}
:root[data-theme="light"] .site-footer__mark img {
  filter: invert(1);
  mix-blend-mode: multiply;
}
@media (max-width: 600px) {
  .site-footer__offices {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer__socials a {
    transition: none;
  }
  .site-footer__socials a:hover,
  .site-footer__socials a:focus-visible {
    transform: none;
  }
}

/* The hero remains full width, with its original edge gutters. */
.hero,
.header-inner {
  padding-inline: var(--section-pad-x, 0.75rem);
}

@media (max-width: 767px) {
  .header-inner {
    padding: 0.8rem;
    gap: 0.65rem;
  }
  .site-header.is-floating {
    animation-duration: 500ms;
  }
  .header-inner .logo {
    min-width: 0;
  }
  .header-inner .logo img {
    max-width: 100%;
    object-fit: contain;
  }
  .header-actions {
    flex-shrink: 0;
  }
  .menu-btn {
    min-height: 0px;
  }
  .theme-toggle {
    --toggle-height: var(--btn-height);
    min-height: 0px;
  }
}

/* Mobile uses the desktop connector's gradient, rounded dots, and flowing rhythm. */
@media (max-width: 699px) {
  .process-card:not(:last-child)::after {
    width: 2px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(180deg, #86182b, #c82837 40%, #f28aa3 72%, #f7b2c4);
    box-shadow: none;
    transform: translateX(-50%);
    -webkit-mask-image: radial-gradient(circle at center, #000 1px, transparent 1.1px);
    mask-image: radial-gradient(circle at center, #000 1px, transparent 1.1px);
    -webkit-mask-size: 2px 8.5px;
    mask-size: 2px 8.5px;
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
    animation: mobile-process-connector-flow 1100ms linear infinite paused;
  }
  .process.is-linked .process-card:not(:last-child)::after {
    animation-play-state: running;
  }
}
@keyframes mobile-process-connector-flow {
  to {
    -webkit-mask-position: 0 8.5px;
    mask-position: 0 8.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .process-card:not(:last-child)::after {
    animation: none;
  }
}

/* Give animated section headings extra breathing room on large screens. */
@media (min-width: 1024px) {
  [data-split-title] {
    padding-right: 30px;
  }
}

/* Light theme: once the header floats on scroll it is a light bar. The header at the
   very top sits inside the dark hero, so it keeps its dark style. Skipped while the
   mobile menu is open, which has its own dark panel. */
:root[data-theme="light"] .site-header.is-floating:not(:has(.menu-btn[aria-expanded="true"])) {
  background: rgb(255 255 255 / 0.88);
  color: #101012;
  border-bottom-color: rgb(16 16 18 / 0.08);
  box-shadow: 0 8px 30px rgb(100 100 111 / 0.14);
}
:root[data-theme="light"] .site-header.is-floating:not(:has(.menu-btn[aria-expanded="true"])) .logo img {
  filter: url("#logo-light-surface");
}
:root[data-theme="light"] .site-header.is-floating:not(:has(.menu-btn[aria-expanded="true"])) .nav-pill {
  background: rgb(16 16 18 / 0.04);
  border-color: rgb(16 16 18 / 0.16);
}
:root[data-theme="light"] .site-header.is-floating:not(:has(.menu-btn[aria-expanded="true"])) .nav-pill a {
  color: #101012;
}
:root[data-theme="light"] .site-header.is-floating:not(:has(.menu-btn[aria-expanded="true"])) .nav-pill a:hover:not(.is-active) {
  background: rgb(16 16 18 / 0.06);
}
:root[data-theme="light"] .site-header.is-floating:not(:has(.menu-btn[aria-expanded="true"])) .nav-pill a.is-active {
  background: #101012;
  color: #fff;
}
:root[data-theme="light"] .site-header.is-floating:not(:has(.menu-btn[aria-expanded="true"])) .theme-toggle__sun {
  color: #d97706;
}
:root[data-theme="light"] .site-header.is-floating:not(:has(.menu-btn[aria-expanded="true"])) .connect-cta {
  background: #101012;
  color: #fff;
}
:root[data-theme="light"] .site-header.is-floating:not(:has(.menu-btn[aria-expanded="true"])) .menu-btn {
  border-color: rgb(16 16 18 / 0.28);
  color: #101012;
}
:root[data-theme="light"] .site-header.is-floating:not(:has(.menu-btn[aria-expanded="true"])) .menu-btn:hover {
  background: rgb(200 40 55 / 0.08);
  border-color: var(--accent, #c82837);
  color: #101012;
}