/* =========================================================
   OPTOPUS — Design tokens
   ========================================================= */
:root {
  --black: #08080a;
  --charcoal: #131316;
  --charcoal-2: #1c1c20;
  --platinum: #d9dade;
  --champagne: #e8d2a4;
  --champagne-bright: #f3e3bd;
  --white: #f7f7f5;

  --blue: #4da3ff;
  --cyan: #57e6e0;
  --violet: #9b6bff;
  --magenta: #e35fd6;
  --orange: #ff9a5c;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --header-h: 88px;
  --container-pad: clamp(24px, 5vw, 64px);

  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
input, textarea, select { font: inherit; color: inherit; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--white);
  color: var(--black);
  padding: 10px 16px;
  border-radius: 8px;
  z-index: 1000;
  transition: top 0.2s var(--ease-soft);
}
.skip-link:focus { top: 12px; }

:focus-visible {
  outline: 2px solid var(--champagne-bright);
  outline-offset: 3px;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.35s var(--ease-out), background 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}
.btn--solid {
  background: var(--white);
  color: var(--black);
}
.btn--solid:hover { transform: translateY(-2px); background: var(--champagne-bright); }
.btn--outline {
  border: 1px solid rgba(247, 247, 245, 0.35);
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
}
.btn--outline:hover {
  border-color: rgba(247, 247, 245, 0.75);
  background: rgba(255, 255, 255, 0.09);
}
.btn--sm { padding: 10px 20px; font-size: 0.78rem; }
.btn--lg { padding: 18px 34px; font-size: 0.95rem; }

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
}
/* The scrolled "glass" lives on a pseudo-element, NOT on the header itself: a
   backdrop-filter (like filter/transform) on an ancestor turns it into the
   containing block for position:fixed descendants, which collapsed the mobile
   menu (a fixed child of the header) into the 88px header box whenever the page
   had been scrolled, stacking its rows on top of each other. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--header-glass, rgba(8, 8, 10, 0.55));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-soft);
}
.site-header.is-scrolled::before { opacity: 1; }
/* While the mobile menu is open the header bar becomes solid like the panel
   below it; otherwise the page's own headline/artwork shows through the
   transparent bar and prints over the logo, language switch and MENU label. */
.site-header.is-menu-open { --header-glass: rgba(8, 8, 10, 0.97); }
.site-header.is-menu-open::before { opacity: 1; }
.site-header__inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--container-pad);
}
.site-header__logo {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.14em;
}
.site-header__nav ul {
  display: flex;
  gap: clamp(18px, 2vw, 34px);
}
.site-header__nav a {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.82;
  position: relative;
  padding-bottom: 4px;
  transition: opacity 0.25s var(--ease-soft);
}
.site-header__nav a:hover { opacity: 1; }
.site-header__nav a[aria-current="page"] { opacity: 1; }
.site-header__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--champagne);
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.lang-switch__btn {
  background: none;
  border: none;
  padding: 2px 1px;
  color: rgba(247, 247, 245, 0.4);
  transition: color 0.25s var(--ease-soft);
  cursor: pointer;
}
.lang-switch__btn:hover { color: rgba(247, 247, 245, 0.75); }
.lang-switch__btn.is-active { color: var(--white); }
.lang-switch__sep { opacity: 0.3; font-size: 0.68rem; }

body { transition: opacity 0.15s var(--ease-soft); }
body.lang-fade { opacity: 0.4; }
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}
.menu-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.menu-toggle__icon {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 20px;
}
.menu-toggle__icon i {
  display: block;
  height: 1px;
  background: currentColor;
  width: 100%;
  transition: transform 0.3s var(--ease-soft), opacity 0.3s var(--ease-soft);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:first-child { transform: translateY(2.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon i:last-child { transform: translateY(-2.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 490;
  background: rgba(8, 8, 10, 0.97);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 40px var(--container-pad) 48px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft);
}
.mobile-menu:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.mobile-menu ul { display: flex; flex-direction: column; gap: 26px; }
.mobile-menu a { font-size: 1.9rem; font-weight: 500; letter-spacing: -0.01em; }
.mobile-menu .btn { align-self: flex-start; }

@media (max-width: 1180px) {
  .site-header__nav { display: none; }
  .site-header__actions .btn--outline { display: none; }
}

/* =========================================================
   Shared section head
   ========================================================= */
.section-head {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  text-align: center;
}
.section-head__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 18px;
}
.section-head__title {
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.section-head__sub {
  margin-top: 20px;
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.68);
}

/* =========================================================
   01 — HERO
   ========================================================= */
.hero {
  /* Single source of truth for the logo's own geometry, shared with
     .hero__content below so its clearance is always exactly
     "logo bottom + a small fixed buffer" instead of an independently
     guessed vh percentage that can drift out of sync and make the
     Hero far taller than the viewport. */
  --logo-top-gap: clamp(60px, 9vh, 130px);
  --logo-w: clamp(190px, 19vw, 380px);
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: -3% -3%;
  z-index: -2;
  will-change: transform;
}
.hero__video,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
/* The poster sits behind the video in stacking order (not just DOM
   order) so it can never occlude playback once the video is ready —
   this was the actual bug: with no z-index, the poster (later in the
   DOM) painted over the video regardless of its opacity/play state. */
.hero__poster { z-index: 1; }
.hero__video { z-index: 2; opacity: 0; transition: opacity 1.1s var(--ease-soft); }
.hero__video[data-ready="true"] { opacity: 1; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4,6,10,0.42) 0%, rgba(4,6,10,0.06) 30%, rgba(4,6,10,0.12) 62%, rgba(4,6,10,0.6) 100%),
    linear-gradient(90deg, rgba(4,6,10,0.5) 0%, rgba(4,6,10,0.06) 32%, rgba(4,6,10,0.02) 60%, rgba(4,6,10,0.28) 100%);
}

/* Floating logo — an independent sprite so it can carry its own
   drift/rotation, distinct from the background video's motion.
   Sized to read clearly (~18-20vw on desktop) while staying secondary
   to the headline; positioned in the upper-middle of the Hero, near
   the mountain skyline, well clear of the header and the headline. */
.hero__logo {
  position: absolute;
  z-index: 1;
  top: calc(var(--header-h) + var(--logo-top-gap));
  left: 50%;
  width: var(--logo-w);
  aspect-ratio: 674 / 691;
  margin-left: calc(-0.5 * var(--logo-w));
  will-change: transform;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  perspective: 900px;
}
/* One-time cinematic entrance — plays once on load, then settles into
   an identity transform so the idle float/tilt layers beneath take
   over with no jump. Isolated on its own layer so it never touches
   the parallax transform (on the button) or the idle/hover/tilt
   transforms (on the layers below it). */
.hero__logo-intro {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: heroLogoIntro 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroLogoIntro {
  0% {
    opacity: 0;
    transform: scale(2.2) translateZ(70px) translateY(14px) rotateY(-7deg) rotateX(4deg);
    filter: brightness(0.85) contrast(0.95);
  }
  10% { opacity: 1; }
  46% {
    transform: scale(2.05) translateZ(46px) translateY(-6px) rotateY(5deg) rotateX(-2.5deg);
    filter: brightness(1.08) contrast(1.05);
  }
  92% {
    transform: scale(1.01) translateZ(2px) translateY(0) rotateY(0.4deg) rotateX(-0.2deg);
    filter: brightness(1) contrast(1);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateZ(0) translateY(0) rotateY(0deg) rotateX(0deg);
    filter: brightness(1) contrast(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo-intro { animation: none; }
}
.hero__logo-float {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: heroLogoFloat 11s ease-in-out infinite;
}
/* Cursor-relative tilt — driven by JS (spring-smoothed rotateX/rotateY
   toward the pointer). Isolated on its own layer so it composes with
   the idle drift and hover/click scale below rather than replacing
   them: each layer owns one transform, the browser combines all of
   them visually. */
.hero__logo-mouse-tilt {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Hover/click react here, isolated from the idle drift below so both
   can run at once without fighting over the same transform. */
.hero__logo-scale {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease-out);
}
.hero__logo:hover .hero__logo-scale,
.hero__logo:focus-visible .hero__logo-scale {
  transform: scale(1.035);
}
.hero__logo-scale.is-pressed {
  transition: transform 0.12s var(--ease-soft);
  transform: scale(0.975);
}
.hero__logo-tilt {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: heroLogoTilt 15s ease-in-out infinite;
}
.hero__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    contrast(1.1) saturate(1.08) brightness(1.03)
    drop-shadow(0 10px 16px rgba(4, 6, 10, 0.4))
    drop-shadow(0 0 22px rgba(255, 250, 235, 0.14));
  transition: filter 0.4s var(--ease-soft);
}
.hero__logo:hover img,
.hero__logo:focus-visible img {
  filter:
    contrast(1.18) saturate(1.16) brightness(1.12)
    drop-shadow(0 14px 22px rgba(4, 6, 10, 0.48))
    drop-shadow(0 0 34px rgba(255, 250, 235, 0.32));
}
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes heroLogoTilt {
  0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
  25% { transform: rotateY(3deg) rotateX(-1.4deg); }
  75% { transform: rotateY(-3deg) rotateX(1.4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo-float,
  .hero__logo-tilt { animation: none; }
  .hero__logo-mouse-tilt { transform: none !important; }
}
@media (max-width: 1080px) {
  .hero { --logo-top-gap: clamp(50px, 7vh, 90px); --logo-w: clamp(140px, 21vw, 260px); }
}
@media (max-width: 720px) {
  .hero { --logo-top-gap: clamp(36px, 6vh, 64px); --logo-w: clamp(110px, 30vw, 190px); }
}
.hero__content {
  position: relative;
  z-index: 2;
  /* Tied directly to the logo's own top offset + height (674/691 is
     its aspect ratio) plus one small fixed buffer — this is always
     exactly enough to clear the logo, at any viewport size, instead
     of independently-guessed vh clearance that could push the Hero
     far taller than the viewport. */
  padding: calc(var(--header-h) + var(--logo-top-gap) + (var(--logo-w) * 691 / 674) + 24px) var(--container-pad) 0;
  max-width: 720px;
}

.hero__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 12px;
}

.hero__headline {
  font-size: clamp(3rem, 8.6vw, 6.4rem);
  line-height: 0.94;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero__headline-line {
  display: block;
  overflow: hidden;
}
.hero__headline-accent {
  background: linear-gradient(100deg, var(--champagne) 0%, var(--champagne-bright) 45%, var(--champagne) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  margin-top: 16px;
  max-width: 440px;
  font-size: 1.08rem;
  line-height: 1.55;
  color: rgba(247, 247, 245, 0.86);
}

.hero__services {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 440px;
}

.service-pill {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 20px;
  border-radius: 16px;
  border: 1px solid rgba(247, 247, 245, 0.16);
  background: rgba(20, 22, 26, 0.32);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: border-color 0.4s var(--ease-soft), background 0.4s var(--ease-soft), transform 0.4s var(--ease-out);
}
.service-pill__index {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  opacity: 0.55;
  min-width: 18px;
}
.service-pill__label {
  flex: 1;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  font-weight: 500;
}
.service-pill__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(247, 247, 245, 0.28);
  font-size: 0.9rem;
  transition: transform 0.4s var(--ease-out), border-color 0.4s var(--ease-soft), background 0.4s var(--ease-soft);
}
.service-pill:hover {
  border-color: rgba(232, 210, 164, 0.55);
  background: rgba(28, 30, 35, 0.5);
  transform: translateX(3px);
}
.service-pill:hover .service-pill__arrow {
  transform: translateX(3px);
  border-color: rgba(232, 210, 164, 0.75);
  background: rgba(232, 210, 164, 0.12);
}

.hero__statement {
  position: absolute;
  z-index: 2;
  top: calc(var(--header-h) + 64px);
  right: var(--container-pad);
  text-align: right;
  font-size: 0.92rem;
  line-height: 1.42;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.72);
  max-width: 220px;
}

.hero__scroll-cue {
  /* Pinned to the Hero's own bottom edge rather than flowing after
     .hero__content — it no longer adds to the Hero's computed
     height, which otherwise stacked with the headline/lede/services
     block and pushed the section well past one viewport tall. */
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(20px, 3vh, 32px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.7);
}
.hero__scroll-cue svg { animation: scrollcue 2.2s var(--ease-soft) infinite; }
@keyframes scrollcue {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue svg { animation: none; }
}

/* Hero responsive */
@media (max-width: 1080px) {
  .hero__statement { display: none; }
}
/* Reserve room under the last service pill for the absolutely-positioned scroll
   cue (~60px tall + its bottom offset). Without it the content reaches the
   Hero's bottom edge, so the centred cue sat over pill 04 and swallowed taps on
   it — on phones, and on tablets/small laptops (up to ~1180px) where the cue's
   centre column still reaches the pill list. The Hero simply grows to fit. */
@media (max-width: 1180px) {
  .hero__content { padding-bottom: calc(60px + clamp(20px, 3vh, 32px) + 12px); }
}
@media (max-width: 720px) {
  .hero__content { max-width: none; }
  .hero__headline { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .hero__lede { font-size: 1rem; max-width: none; }
  .hero__services { max-width: none; }
  .hero__video, .hero__poster { object-position: 62% 58%; }
}

/* =========================================================
   Shared: scroll reveal + section rhythm
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

.ecosystem,
.what-we-build,
.selected-work,
.how-we-work {
  padding: clamp(36px, 4vw, 64px) 0;
  background: var(--black);
  position: relative;
}
/* Each section eases toward the next one's tone over its own bottom
   edge — a continuous dark backdrop rather than a hard color seam at
   the boundary, so the transition reads as atmosphere, not a line. */
.ecosystem { background: linear-gradient(180deg, var(--black) 0%, var(--black) calc(100% - 140px), var(--charcoal) 100%); }
.what-we-build { background: linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal) calc(100% - 140px), var(--black) 100%); }
.selected-work { background: linear-gradient(180deg, var(--black) 0%, var(--black) calc(100% - 140px), var(--charcoal) 100%); }
.how-we-work { background: linear-gradient(180deg, var(--charcoal) 0%, var(--charcoal) calc(100% - 140px), var(--black) 100%); }

/* =========================================================
   02 — Our Ecosystem
   ========================================================= */
.ecosystem__worlds {
  position: relative;
  margin-top: 48px;
  padding: 0 var(--container-pad);
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ecosystem__trails {
  position: absolute;
  top: 50%;
  left: var(--container-pad);
  right: var(--container-pad);
  width: calc(100% - 2 * var(--container-pad));
  height: 60px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
.ecosystem__trail {
  fill: none;
  stroke: rgba(232, 210, 164, 0.35);
  stroke-width: 1.5;
  stroke-dasharray: 6 10;
  animation: trailFlow 3.5s linear infinite;
}
@keyframes trailFlow { to { stroke-dashoffset: -32; } }
@media (max-width: 1080px) {
  .ecosystem__worlds { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .ecosystem__trails { display: none; }
}
@media (max-width: 767px) {
  .ecosystem__worlds { grid-template-columns: 1fr; }
}

.world-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(247, 247, 245, 0.1);
  background: var(--charcoal);
  transition: transform 0.5s var(--ease-out), border-color 0.4s var(--ease-soft);
}
.world-card:hover,
.world-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(247, 247, 245, 0.24);
}
.world-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.world-card:hover .world-card__bg { transform: scale(1.06); }
.world-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,6,10,0) 30%, rgba(4,6,10,0.88) 100%);
  z-index: 1;
}
.world-card__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.7;
  transition: opacity 0.5s var(--ease-soft);
}
.world-card:hover .world-card__glow { opacity: 1; }
.world-card--design .world-card__bg { filter: saturate(1.05); }
.world-card--design::after {
  background: linear-gradient(180deg, rgba(6,10,6,0) 26%, rgba(5,10,6,0.92) 100%);
}
.world-card--ai::after {
  background: linear-gradient(180deg, rgba(10,4,14,0) 26%, rgba(8,4,14,0.9) 100%);
}

/* Marketing & Digital — a real photo like Design/AI, but its hover is
   its own bespoke treatment rather than the shared scale: the CSS
   scale (kept to ~1.02, more restrained than Design/AI's 1.06) lives
   on this wrapper, while the <img> itself is reserved for the JS
   pointer-parallax translate3d() below, so the two transforms never
   collide on the same element/property (same split used for the
   OPTOPUS Lab card and the Final CTA). */
.world-card--marketing .world-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform 0.6s var(--ease-out);
}
.world-card--marketing:hover .world-card__media,
.world-card--marketing:focus-visible .world-card__media {
  transform: scale(1.02);
}
.world-card--marketing .world-card__bg {
  will-change: transform;
  transition: filter 0.5s var(--ease-soft);
}
.world-card--marketing:hover .world-card__bg,
.world-card--marketing:focus-visible .world-card__bg {
  /* Cancel the shared .world-card:hover scale — this element only
     ever carries the JS parallax transform now. */
  transform: none;
  filter: brightness(1.06) saturate(1.1);
}
.world-card--marketing::after {
  background: linear-gradient(180deg, rgba(6,8,16,0) 28%, rgba(6,8,16,0.9) 100%);
}
.world-card--marketing .world-card__glow {
  background:
    radial-gradient(50% 55% at 80% 16%, rgba(124, 92, 255, 0.42), transparent 70%),
    radial-gradient(46% 46% at 18% 78%, rgba(87, 230, 224, 0.24), transparent 70%);
}

.world-card__body {
  position: relative;
  z-index: 2;
  padding: 28px;
}
.world-card__index {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  opacity: 0.6;
  margin-bottom: 10px;
}
.world-card__title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.world-card__desc {
  margin-top: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(247, 247, 245, 0.72);
  max-width: 34ch;
}
.world-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.world-card__cta span { transition: transform 0.35s var(--ease-out); }
.world-card:hover .world-card__cta span { transform: translateX(4px); }

.world-card__egg {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  right: 20px;
  opacity: 0.16;
  color: var(--white);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  pointer-events: none;
}
.world-card__egg--eye { bottom: 18px; right: 18px; }

@media (max-width: 1080px) {
  .world-card { min-height: 340px; }
}

/* =========================================================
   03 — What We Build
   ========================================================= */
.what-we-build__scene {
  position: relative;
  margin: 48px var(--container-pad) 0;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(247, 247, 245, 0.1);
}
.what-we-build__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}
.what-we-build__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(4,6,10,0.05), rgba(4,6,10,0.55) 100%),
    linear-gradient(180deg, rgba(4,6,10,0.35) 0%, rgba(4,6,10,0.05) 20%, rgba(4,6,10,0.05) 80%, rgba(4,6,10,0.55) 100%);
}
/* Real navigation, styled as a discovery inside the scene rather than
   a website button: minimal glass by default, only gaining a visible
   border/fill on hover/focus so it never reads as a permanent UI
   chip. Each variant gets its own accent for the hover glow/border. */
.wwb-node {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: block;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid rgba(247, 247, 245, 0.16);
  background: rgba(6, 6, 9, 0.28);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.82);
  cursor: pointer;
  animation: wwbFloat 8s ease-in-out infinite;
  opacity: 0;
  filter: brightness(1);
  transition: opacity 0.8s var(--ease-out), background 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), color 0.35s ease, filter 0.3s var(--ease-soft);
  transition-delay: 0.3s, 0s, 0s, 0s, 0s, 0s;
}
.what-we-build__scene.is-revealed .wwb-node { opacity: 1; }
.wwb-node--digital { animation-delay: 0.5s; }
.wwb-node--content { animation-delay: 1s; }
.wwb-node--ai { animation-delay: 1.5s; }
@keyframes wwbFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% - 5px)); }
}

.wwb-node:hover,
.wwb-node:focus-visible,
.wwb-node.is-hot {
  color: var(--white);
  background: rgba(10, 10, 14, 0.55);
}
.wwb-node--brand:hover, .wwb-node--brand:focus-visible, .wwb-node--brand.is-hot {
  border-color: rgba(232, 210, 164, 0.6);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 22px rgba(232, 210, 164, 0.35);
}
.wwb-node--digital:hover, .wwb-node--digital:focus-visible, .wwb-node--digital.is-hot {
  border-color: rgba(87, 230, 224, 0.6);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 22px rgba(87, 230, 224, 0.35);
}
.wwb-node--content:hover, .wwb-node--content:focus-visible, .wwb-node--content.is-hot {
  border-color: rgba(227, 95, 214, 0.6);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 22px rgba(227, 95, 214, 0.35);
}
.wwb-node--ai:hover, .wwb-node--ai:focus-visible, .wwb-node--ai.is-hot {
  border-color: rgba(155, 107, 255, 0.6);
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.35), 0 0 22px rgba(155, 107, 255, 0.35);
}
.wwb-node:hover, .wwb-node:focus-visible, .wwb-node.is-hot {
  transform: translate(-50%, calc(-50% - 2px)) scale(1.06);
}
.wwb-node:active { transform: translate(-50%, -50%) scale(1.02); }

/* Local "platform" glow — a soft blurred bloom over that quadrant of
   the artwork, independent of the label itself, so hovering the
   label visibly lifts its region of the scene. */
.wwb-glow {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: 34%;
  height: 40%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(30px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-soft);
}
.wwb-glow--brand { background: radial-gradient(circle, rgba(232, 210, 164, 0.4), transparent 70%); }
.wwb-glow--digital { background: radial-gradient(circle, rgba(87, 230, 224, 0.4), transparent 70%); }
.wwb-glow--content { background: radial-gradient(circle, rgba(227, 95, 214, 0.4), transparent 70%); }
.wwb-glow--ai { background: radial-gradient(circle, rgba(155, 107, 255, 0.4), transparent 70%); }
.wwb-glow.is-on { opacity: 1; }

/* When one node is active, the others recede only slightly — a
   focus cue, not a spotlight-vs-darkness effect. */
.what-we-build__scene.has-active .wwb-node:not(:hover):not(:focus-visible):not(.is-hot) {
  filter: brightness(0.82);
}
.what-we-build__caption {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(247, 247, 245, 0.75);
  text-align: center;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wwb-node { animation: none; }
}
@media (max-width: 720px) {
  .what-we-build__scene { aspect-ratio: 4 / 5; border-radius: 20px; margin-left: 16px; margin-right: 16px; }
  /* Comfortable tap target (~44px) without the visible pill growing
     to match — the extra hit area is padding, not visual weight. */
  .wwb-node { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.68rem; padding: 6px 16px; }
  .wwb-glow { width: 46%; height: 30%; }
  .what-we-build__caption { font-size: 0.72rem; white-space: normal; padding: 0 16px; }
}

/* =========================================================
   04 — Selected Work
   ========================================================= */
.selected-work__list {
  margin-top: 40px;
  padding: 0 var(--container-pad);
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.project-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(247, 247, 245, 0.1);
}
.project-card--primary { min-height: 560px; display: flex; align-items: flex-end; }
.project-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease-out);
}
.project-card--primary:hover .project-card__bg { transform: scale(1.04); }
.project-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(4,6,10,0.9) 0%, rgba(4,6,10,0.25) 55%, rgba(4,6,10,0.15) 100%);
}
.project-card__body { position: relative; z-index: 1; padding: 40px; max-width: 640px; }
.project-card__index { font-size: 0.85rem; opacity: 0.65; letter-spacing: 0.08em; }
.project-card__title {
  margin-top: 10px;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.project-card__tags {
  margin-top: 8px;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.65);
}
.project-card__desc {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(247, 247, 245, 0.82);
}
.project-card__cta { margin-top: 24px; }
.project-card__cta-arrow { display: inline-block; transition: transform 0.35s var(--ease-out); }

/* OPTOPUS Lab — same editorial system as the primary card, deliberately
   the smaller of the two (grid gives it 1fr against the primary's 2fr).
   A real <a>, like .world-card elsewhere: the whole surface navigates,
   the CTA span is a visual affordance, not a nested interactive element. */
.project-card--lab {
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.4s var(--ease-soft);
}
.project-card--lab:hover,
.project-card--lab:focus-visible {
  border-color: rgba(247, 247, 245, 0.22);
}
/* Hover-scale lives on this wrapper; the <img> inside is left free for
   the JS pointer-parallax translate3d(), so the two transforms never
   fight over the same element/property. */
.project-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform 0.6s var(--ease-out);
}
.project-card--lab:hover .project-card__media,
.project-card--lab:focus-visible .project-card__media {
  transform: scale(1.02);
}
.project-card--lab .project-card__bg {
  object-position: 50% 42%;
  will-change: transform;
}
.project-card__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(38% 46% at 78% 30%, rgba(155, 107, 255, 0.35), transparent 70%),
    radial-gradient(34% 42% at 22% 70%, rgba(87, 230, 224, 0.28), transparent 70%);
  mix-blend-mode: screen;
  transition: opacity 0.5s var(--ease-soft);
}
.project-card--lab:hover .project-card__glow,
.project-card--lab:focus-visible .project-card__glow {
  opacity: 1;
}
.project-card--lab .project-card__title { font-size: clamp(1.5rem, 2.3vw, 2rem); }
.project-card--lab .project-card__desc { max-width: 34ch; }
.project-card--lab:hover .project-card__cta,
.project-card--lab:focus-visible .project-card__cta {
  border-color: rgba(247, 247, 245, 0.75);
  background: rgba(255, 255, 255, 0.09);
}
.project-card--lab:hover .project-card__cta-arrow,
.project-card--lab:focus-visible .project-card__cta-arrow {
  transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
  .project-card__media, .project-card__bg, .project-card__glow, .project-card__cta-arrow {
    transition-duration: 0.15s;
  }
}

@media (max-width: 1080px) {
  .selected-work__list { grid-template-columns: 1fr; }
  .project-card--primary, .project-card--lab { min-height: 420px; }
}

/* =========================================================
   05 — How We Work
   ========================================================= */
.how-we-work__scene {
  position: relative;
  margin: 48px var(--container-pad) 0;
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(247, 247, 245, 0.1);
}
.how-we-work__parallax {
  position: relative;
  aspect-ratio: 1642 / 958;
  will-change: transform;
}
.how-we-work__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.5s var(--ease-soft);
}
/* Only a very light overall grade — the artwork is the hero, not a
   backdrop to darken. No box, no grid, no line: this is the entire
   default-state visual treatment. */
.how-we-work__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4,6,10,0.14) 0%, rgba(4,6,10,0) 26%, rgba(4,6,10,0) 68%, rgba(4,6,10,0.26) 100%);
}
.how-we-work__scene.has-active .how-we-work__bg { filter: brightness(0.93) saturate(0.96); }

/* Four fully invisible, equal-width hotspots — no border, no fill,
   ever. Coverage only; all visual feedback lives in the glow/panel
   layers below. */
.hww-zones {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
}
.hww-zone {
  flex: 1 1 25%;
  height: 100%;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Soft round light blooms — blurred, feathered, screen-blended, so
   each reads as "that area of the scene lit up," never as a shape. */
.hww-glow {
  position: absolute;
  z-index: 2;
  left: var(--gx);
  top: var(--gy);
  width: var(--gw, 34%);
  height: var(--gh, 50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(28px);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
}
.hww-glow.is-on { opacity: 1; }
.hww-glow--0 { --gx: 13%; --gy: 46%; background: radial-gradient(circle, rgba(87, 230, 224, 0.55), transparent 70%); animation: hwwPulse 6s ease-in-out infinite; }
.hww-glow--1 { --gx: 38%; --gy: 50%; --gw: 30%; --gh: 46%; background: radial-gradient(circle, rgba(232, 210, 164, 0.5), transparent 70%); }
.hww-glow--2 { --gx: 62%; --gy: 58%; --gw: 32%; --gh: 48%; background: radial-gradient(circle, rgba(255, 154, 92, 0.5), transparent 70%); }
.hww-glow--3 { --gx: 87%; --gy: 48%; --gw: 30%; --gh: 50%; background: radial-gradient(circle, rgba(155, 107, 255, 0.5), transparent 70%); }
.hww-glow--0.is-on { animation-duration: 2.4s; }
@keyframes hwwPulse {
  0%, 100% { opacity: 0.14; }
  50% { opacity: 0.26; }
}

/* One shared floating panel — an editorial glass card, not a website
   card. Repositioned + refilled by JS per active world; only one
   instance ever exists, so only one can ever be visible. */
/* position:fixed, positioned entirely by JS in real viewport pixels
   (see script.js) — NOT ancestor-relative. Several ancestors here
   (the parallax wrapper's will-change:transform, the section's own
   [data-reveal] transform) each independently create a containing
   block for position:fixed descendants, which silently breaks
   percentage/left-based positioning no matter which of them the
   panel lives under. Computing real pixel coordinates from
   getBoundingClientRect() sidesteps that class of bug entirely. */
.hww-panel {
  position: fixed;
  z-index: 60;
  width: min(240px, 27vw);
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(8, 8, 11, 0.5);
  backdrop-filter: blur(11px) saturate(140%);
  -webkit-backdrop-filter: blur(11px) saturate(140%);
  border: 1px solid rgba(247, 247, 245, 0.14);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
  transition: opacity 0.32s var(--ease-soft), transform 0.32s var(--ease-soft), left 0.35s var(--ease-soft), top 0.35s var(--ease-soft);
}
.hww-panel.is-visible { opacity: 1; transform: translate(-50%, 0); }
.hww-panel__accent {
  display: block;
  width: 26px;
  height: 2px;
  margin-bottom: 10px;
  background: var(--accent, var(--champagne));
  transition: background 0.3s ease;
}
.hww-panel__index {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.hww-panel__title {
  display: block;
  margin-top: 3px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hww-panel__desc {
  display: block;
  margin-top: 7px;
  font-size: 0.78rem;
  line-height: 1.48;
  color: rgba(247, 247, 245, 0.76);
}
.hww-panel__tag {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  font-size: 0.74rem;
  font-style: italic;
  color: rgba(247, 247, 245, 0.6);
  transition: max-height 0.3s var(--ease-soft), opacity 0.3s ease, margin-top 0.3s ease;
}
.hww-panel.is-expanded { transform: translate(-50%, 0) scale(1.035); }
.hww-panel.is-expanded .hww-panel__tag { max-height: 40px; opacity: 1; margin-top: 8px; }

.hww-eye-egg {
  position: absolute;
  z-index: 4;
  top: 37%;
  left: 49.6%;
  opacity: 0.1;
  color: var(--white);
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hww-glow--0 { animation: none; }
  .hww-glow, .hww-panel, .how-we-work__bg { transition-duration: 0.15s; }
}

/* =========================================================
   How We Work — tablet/mobile ONLY.
   The desktop panoramic scene above is untouched; it is simply
   display:none'd below the breakpoint. Tablet/mobile get a fully
   separate markup block (.hww-stages, a sibling of .how-we-work__scene
   in the HTML) built from four dedicated per-stage artworks — no
   hover, so each stage becomes its own large, scroll-activated
   cinematic moment instead of hotspots over one panoramic image.
   ========================================================= */
.hww-stages { display: none; }

@media (max-width: 1080px) {
  .how-we-work__scene { display: none; }

  .hww-stages {
    display: flex;
    flex-direction: column;
    gap: 56px;
    margin: 48px var(--container-pad) 0;
  }

  .hww-stage__media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(247, 247, 245, 0.1);
    opacity: 0;
    transform: translateY(24px) scale(1.02);
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  }
  .hww-stage__media.is-revealed { opacity: 1; transform: translateY(0) scale(1); }

  .hww-stage__img {
    position: absolute;
    inset: -6% -6%;
    width: 112%;
    height: 112%;
    object-fit: cover;
    filter: brightness(0.9) saturate(0.96);
    transition: filter 0.6s var(--ease-soft);
    will-change: transform;
  }
  .hww-stage.is-active .hww-stage__img { filter: brightness(1.02) saturate(1.05); }

  /* Soft per-stage color bloom, same accent language as the desktop
     glows — a gentle lift, not a filter or overlay on the artwork. */
  .hww-stage__glow {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 40%, var(--stage-accent), transparent 65%);
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 0.6s var(--ease-soft);
  }
  .hww-stage.is-active .hww-stage__glow { opacity: 0.22; }

  .hww-stage__body {
    margin-top: 20px;
    text-align: center;
  }
  .hww-stage__index {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--stage-accent);
    opacity: 0.85;
  }
  .hww-stage__title {
    margin-top: 6px;
    font-size: clamp(1.4rem, 4vw, 1.8rem);
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .hww-stage__desc {
    margin-top: 10px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(247, 247, 245, 0.72);
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  .hww-stages { gap: 44px; }
  .hww-stage__media { border-radius: 16px; }
  .hww-stage__body { margin-top: 16px; }
  .hww-stage__desc { font-size: 0.88rem; }
}

@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  .hww-stage__media { transition-duration: 0.2s; transform: none; }
  .hww-stage__img { transition-duration: 0.2s; }
  .hww-stage__glow { transition-duration: 0.2s; }
}

/* =========================================================
   06 — Final CTA
   ========================================================= */
.final-cta {
  position: relative;
  min-height: clamp(560px, 60vw, 760px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 80px var(--container-pad);
  overflow: hidden;
  background: var(--black);
}
/* Hover-scale-free ambient drift lives on this wrapper; the <img>
   itself is left free for the JS pointer-parallax translate3d(), so
   the two transforms never fight over the same element/property
   (same pattern as the OPTOPUS Lab card above). */
.final-cta__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: finalCtaDrift 32s ease-in-out infinite alternate;
}
@keyframes finalCtaDrift {
  0% { transform: scale(1.03) translate3d(0, 0, 0); }
  100% { transform: scale(1.07) translate3d(-1%, -0.6%, 0); }
}
.final-cta__bg {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: 32% 56%;
  will-change: transform;
}
.final-cta__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 58% at 76% 52%, rgba(6,7,10,0.5), transparent 72%),
    linear-gradient(100deg, rgba(6,7,10,0.6) 0%, rgba(6,7,10,0.22) 40%, rgba(6,7,10,0) 62%),
    linear-gradient(0deg, rgba(6,7,10,0.5) 0%, rgba(6,7,10,0) 32%);
}
.final-cta__inner { position: relative; z-index: 1; max-width: 460px; text-align: left; }
.final-cta__title {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.final-cta__sub {
  margin: 18px 0 36px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(247, 247, 245, 0.82);
  max-width: 36ch;
}
.final-cta__arrow { display: inline-block; transition: transform 0.35s var(--ease-out); }
.final-cta__button {
  transition: transform 0.35s var(--ease-out), background 0.3s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.final-cta__button:hover,
.final-cta__button:focus-visible {
  box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 0 1px rgba(247,247,245,0.4);
}
.final-cta__button:hover .final-cta__arrow,
.final-cta__button:focus-visible .final-cta__arrow {
  transform: translateX(4px);
}

@media (max-width: 1080px) {
  .final-cta { min-height: auto; display: block; padding: 0 0 72px; }
  .final-cta__media { position: relative; inset: auto; aspect-ratio: 4 / 5; }
  .final-cta__bg { object-position: 38% 58%; }
  .final-cta__scrim {
    background: linear-gradient(0deg, rgba(6,7,10,0.85) 0%, rgba(6,7,10,0.3) 20%, rgba(6,7,10,0) 42%);
  }
  .final-cta__inner {
    max-width: 520px;
    margin: 0 auto;
    padding: 32px var(--container-pad) 0;
    text-align: center;
  }
  .final-cta__sub { margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .final-cta__media { aspect-ratio: 1 / 1.15; }
}
@media (prefers-reduced-motion: reduce) {
  .final-cta__media { animation: none; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: var(--black);
  border-top: 1px solid rgba(247, 247, 245, 0.08);
  padding: 56px var(--container-pad) 40px;
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-footer__logo { font-weight: 600; letter-spacing: 0.14em; }
.site-footer__tagline { opacity: 0.6; font-size: 0.9rem; }
.site-footer__inner nav ul { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer__inner nav a { font-size: 0.82rem; opacity: 0.7; }
.site-footer__inner nav a:hover { opacity: 1; }
.site-footer__copy { width: 100%; font-size: 0.78rem; opacity: 0.4; margin-top: 8px; }
.site-footer__social { width: 100%; display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; }
.site-footer__social a { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; opacity: 0.6; color: var(--white); transition: opacity 0.3s var(--ease-soft); }
.site-footer__social a:hover, .site-footer__social a:focus-visible { opacity: 1; }
.site-footer__social svg { flex-shrink: 0; }

/* =========================================================
   Start a Project — Modal
   ========================================================= */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.project-modal[hidden] { display: none; }
.project-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(6px);
}
.project-modal__panel {
  position: relative;
  width: min(680px, 100%);
  max-height: min(88vh, 900px);
  background: var(--charcoal);
  border: 1px solid rgba(247, 247, 245, 0.1);
  border-radius: 24px;
  overflow: hidden;
  animation: modalIn 0.4s var(--ease-out);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.project-modal__scroll {
  overflow-y: auto;
  max-height: min(88vh, 900px);
  padding: 48px clamp(24px, 5vw, 56px) 56px;
}
.project-modal__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(247, 247, 245, 0.2);
  z-index: 2;
}
.project-modal__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 14px;
}
.project-modal__title {
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 32px;
}
.project-form { display: flex; flex-direction: column; gap: 18px; }
.project-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.project-form__field { display: flex; flex-direction: column; gap: 8px; font-size: 0.82rem; opacity: 0.85; }
.project-form__field input,
.project-form__field textarea,
.project-form__field select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(247, 247, 245, 0.16);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--white);
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease-soft), background 0.25s var(--ease-soft);
  resize: vertical;
}
.project-form__field input:focus,
.project-form__field textarea:focus,
.project-form__field select:focus {
  border-color: rgba(232, 210, 164, 0.6);
  background: rgba(255, 255, 255, 0.06);
}
/* Custom dropdown (see the CUSTOM DROPDOWN block in script.js). The trigger
   copies the field styling above; the native <select> stays in the DOM as
   the form's real control, but is visually hidden. The menu is our own dark
   panel, so it never depends on the browser/OS-drawn native menu. */
.dd { position: relative; }
.project-form__field .dd__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
/* The field group is dimmed (opacity .85), which would make the open menu
   see-through and let the fields under it show through — undim while open. */
/* The inline Contact form sits right above the footer: while one of its
   dropdowns is open, lift the whole section over the footer so the menu is
   never painted underneath it. */
.contact-form-section:has(.has-dd-open) { position: relative; z-index: 5; }
/* Inline failure message under the submit button (project inquiry forms). */
.project-form__error { margin: 14px 0 0; font-size: 0.92rem; line-height: 1.5; color: #f0b8ae; }
.project-form__field.has-dd-open { position: relative; z-index: 30; opacity: 1; }
.dd__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  cursor: pointer;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(247, 247, 245, 0.16);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--white);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease-soft), background 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft);
}
.dd__trigger:hover { border-color: rgba(247, 247, 245, 0.3); }
.dd__trigger:focus { outline: none; }
.dd__trigger:focus-visible,
.dd.is-open .dd__trigger {
  border-color: rgba(232, 210, 164, 0.6);
  background: rgba(255, 255, 255, 0.06);
}
.dd__trigger:focus-visible { box-shadow: 0 0 0 3px rgba(232, 210, 164, 0.2); }
.dd__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__value.is-placeholder { color: rgba(247, 247, 245, 0.5); }
.dd__arrow { flex: 0 0 auto; display: flex; color: rgba(247, 247, 245, 0.65); transition: transform 0.2s var(--ease-soft); }
.dd.is-open .dd__arrow { transform: rotate(180deg); }
.dd__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 40;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: min(360px, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgb(20, 20, 24);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(247, 247, 245, 0.14);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
  outline: none;
  transform-origin: top center;
  animation: ddIn 0.16s var(--ease-out);
}
.dd--up .dd__list { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
@keyframes ddIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.dd__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.92rem;
  color: rgba(247, 247, 245, 0.88);
  cursor: pointer;
}
.dd__opt.is-placeholder { color: rgba(247, 247, 245, 0.5); }
.dd__opt.is-active,
.dd__opt:hover { background: rgba(247, 247, 245, 0.1); color: var(--white); }
.dd__opt[aria-selected="true"] { background: rgba(232, 210, 164, 0.16); color: var(--champagne-bright); font-weight: 500; }
.dd__opt[aria-selected="true"]::after { content: "\2713"; font-size: 0.85rem; }
.dd__opt[aria-selected="true"].is-active { background: rgba(232, 210, 164, 0.24); }
@media (max-width: 767px) {
  .dd__opt { min-height: 46px; font-size: 1rem; }
  .dd__trigger { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .dd__list { animation: none; }
  .dd__arrow { transition: none; }
}
/* Budget = currency dropdown + free amount input in ONE bordered control
   (USD / EUR only). The border, radius and focus colour live on the group so
   the two read as a single field, not two boxes. */
.budget-group {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(247, 247, 245, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.25s var(--ease-soft), background 0.25s var(--ease-soft);
}
.budget-group:hover { border-color: rgba(247, 247, 245, 0.3); }
.budget-group:focus-within { border-color: rgba(232, 210, 164, 0.6); background: rgba(255, 255, 255, 0.06); }
.budget-group .dd { flex: 0 0 auto; }
.project-form__field .budget-group .dd__trigger {
  width: auto;
  height: 100%;
  gap: 8px;
  padding: 12px 12px 12px 14px;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(247, 247, 245, 0.14);
  border-radius: 10px 0 0 10px;
  white-space: nowrap;
}
.project-form__field .budget-group .dd__trigger:hover,
.project-form__field .budget-group .dd__trigger:focus-visible,
.project-form__field .budget-group .dd.is-open .dd__trigger { background: rgba(255, 255, 255, 0.05); box-shadow: none; }
.project-form__field .budget-group .dd__list { right: auto; min-width: 150px; }
.project-form__field .budget-group input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  border-radius: 0 10px 10px 0;
  outline: none;
}
.project-form__field .budget-group input:focus { background: transparent; border: 0; }
/* Very narrow modal: let the two controls stack cleanly instead of squeezing. */
@media (max-width: 340px) {
  .budget-group { flex-direction: column; }
  .project-form__field .budget-group .dd__trigger { border-right: 0; border-bottom: 1px solid rgba(247, 247, 245, 0.14); border-radius: 10px 10px 0 0; width: 100%; }
  .project-form__field .budget-group input { border-radius: 0 0 10px 10px; }
}
.project-form__submit { margin-top: 10px; align-self: flex-start; }
.project-modal__success-copy { color: rgba(247, 247, 245, 0.72); margin-bottom: 32px; }

@media (max-width: 560px) {
  .project-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   DESIGN PAGE — Hero
   Its own page (/design), sharing only the header/footer/modal
   system with Home. Nothing here touches any Home rule above.
   ========================================================= */
.design-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}
/* The whole artwork, always shown complete — this wrapper's own
   height comes from the image's real aspect ratio rather than a
   forced 100vh, so object-fit:cover never has to crop anything to
   fill extra space. No oversized inset/parallax on this layer either
   (that would itself nibble a few % off the edges) — depth instead
   comes entirely from the foreground text layer below. */
.design-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
}
.design-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A soft, natural-toned scrim (not the neutral black used on the
   tech pages) concentrated behind the text in the upper portion of
   the scene — the characters and studio lower in the frame stay
   fully uncovered and untouched. */
.design-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 16, 10, 0.52) 0%, rgba(10, 16, 10, 0.18) 30%, rgba(10, 16, 10, 0) 52%),
    linear-gradient(90deg, rgba(6, 10, 6, 0.3) 0%, rgba(6, 10, 6, 0) 46%);
}
/* Positioned as a percentage of the image's own height (its
   containing block, .design-hero, is exactly as tall as the artwork)
   so it stays proportionally placed in the clean sky area at any
   width, without per-breakpoint offsets. */
.design-hero__content {
  position: absolute;
  z-index: 1;
  top: calc(var(--header-h) + 6%);
  left: 0;
  right: 0;
  max-width: 560px;
  padding: 0 var(--container-pad);
}
/* Reveal (fade/rise via [data-reveal]) and the JS pointer-parallax
   each own a different element — the outer block above handles the
   entrance transform, this inner one only ever carries the parallax
   translate3d(), so the two never collide on the same transform. */
.design-hero__content-inner { will-change: transform; }
.design-hero__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 14px;
}
.design-hero__title {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.design-hero__title-accent { color: var(--champagne); }
.design-hero__lede {
  margin-top: 18px;
  max-width: 40ch;
  font-size: 1.08rem;
  line-height: 1.55;
  color: rgba(247, 247, 245, 0.88);
}
.design-hero__cta {
  margin-top: 32px;
  transition: transform 0.35s var(--ease-out), background 0.3s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.design-hero__cta:hover,
.design-hero__cta:focus-visible {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
.design-hero__arrow { display: inline-block; transition: transform 0.35s var(--ease-out); }
.design-hero__cta:hover .design-hero__arrow,
.design-hero__cta:focus-visible .design-hero__arrow {
  transform: translateX(4px);
}
.design-hero__scroll-cue {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: clamp(20px, 3vh, 32px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--white);
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.design-hero__scroll-cue:hover,
.design-hero__scroll-cue:focus-visible { opacity: 1; }
.design-hero__scroll-cue span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.design-hero__scroll-cue svg { animation: designScrollBob 2.2s ease-in-out infinite; }
@keyframes designScrollBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@media (max-width: 1080px) {
  .design-hero__title { font-size: clamp(2.2rem, 5.6vw, 3rem); }
}

@media (max-width: 640px) {
  /* Below 640px the complete image is too short (full width / 1.78
     aspect) to comfortably hold overlaid text without crowding it —
     so text moves to its own block below the (still complete,
     uncropped) artwork instead of shrinking further on top of it. */
  .design-hero { display: flex; flex-direction: column; }
  .design-hero__scrim { display: none; }
  .design-hero__content {
    position: static;
    max-width: none;
    padding: 28px var(--container-pad) 36px;
  }
  .design-hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .design-hero__lede { max-width: none; font-size: 1rem; }
  .design-hero__scroll-cue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .design-hero__scroll-cue svg { animation: none; }
}

/* =========================================================
   DESIGN PAGE — AI Creative Video
   An editorial gallery, not a portfolio grid: a dense 12-column mosaic
   with three deliberately larger "featured" panels and six smaller
   "secondary" panels creating rhythm around them. Every panel keeps
   the same interface (silent looped video, a label that only appears
   on hover) so the videos stay the visual stars. Sits between the
   Hero above and the Image & Design (logo) gallery below.
   ========================================================= */
.design-ai-video {
  position: relative;
  padding: clamp(64px, 9vw, 140px) 0 clamp(48px, 6vw, 88px);
  background: var(--black);
}
.design-ai-video__head {
  max-width: 1400px;
  margin: 0 auto clamp(56px, 7vw, 96px);
  padding: 0 var(--container-pad);
}
.design-ai-video__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
}
.design-ai-video__headline {
  margin-top: 18px;
  font-size: clamp(2.6rem, 6.6vw, 5.6rem);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.design-ai-video__body {
  margin-top: clamp(28px, 4vw, 48px);
  max-width: 520px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.design-ai-video__body p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.72);
}
.design-ai-video__body p:first-child {
  color: rgba(247, 247, 245, 0.92);
  font-size: 1.1rem;
}

.design-ai-gallery {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(40px, 4.6vw, 62px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.4vw, 20px);
}
.design-ai-gallery__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--charcoal);
}
.design-ai-gallery__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease-soft);
  will-change: transform;
}
.design-ai-gallery__item:hover .design-ai-gallery__video,
.design-ai-gallery__item:focus-within .design-ai-gallery__video {
  transform: scale(1.035);
  filter: brightness(1.04);
}
/* A discreet label only — no border, no solid card background, no
   play button. Text-shadow keeps it legible over any footage. */
.design-ai-gallery__label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft);
  pointer-events: none;
}
.design-ai-gallery__item:hover .design-ai-gallery__label,
.design-ai-gallery__item:focus-within .design-ai-gallery__label {
  opacity: 0.85;
  transform: translateY(0);
}

.design-ai-gallery__item--featured { grid-column: span 5; grid-row: span 9; }
.design-ai-gallery__item--md { grid-column: span 4; grid-row: span 6; }
.design-ai-gallery__item--sm { grid-column: span 3; grid-row: span 5; }

@media (max-width: 1080px) {
  .design-ai-video__body { margin-left: 0; max-width: 620px; }
  .design-ai-gallery { grid-template-columns: repeat(6, 1fr); }
  .design-ai-gallery__item--featured { grid-column: span 6; grid-row: span 8; }
  .design-ai-gallery__item--md,
  .design-ai-gallery__item--sm { grid-column: span 3; grid-row: span 5; }
}

@media (max-width: 640px) {
  .design-ai-video__headline { font-size: clamp(2.1rem, 10vw, 2.8rem); }
  .design-ai-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(36px, 9vw, 48px); }
  .design-ai-gallery__item--featured { grid-column: span 2; grid-row: span 11; }
  .design-ai-gallery__item--md,
  .design-ai-gallery__item--sm { grid-column: span 1; grid-row: span 6; }
  .design-ai-gallery__label { opacity: 0.85; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .design-ai-gallery__video { transition-duration: 0.15s; }
}

/* =========================================================
   DESIGN PAGE — Behind the Visual (process video)
   A deliberate bridge between the AI Creative gallery above and the
   Logos section below: text and a single vertical video, offset
   lower and toward the right rather than centered or full-width, so
   it reads as an art-directed editorial moment rather than another
   gallery card.
   ========================================================= */
.design-process {
  position: relative;
  padding: clamp(56px, 8vw, 100px) 0 clamp(72px, 9vw, 130px);
  background: var(--black);
}
.design-process__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(32px, 4vw, 64px);
}
.design-process__text {
  flex: 0 1 440px;
}
.design-process__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}
.design-process__headline {
  margin-top: 16px;
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.design-process__body {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.design-process__body p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.68);
}
.design-process__body p:first-child {
  color: rgba(247, 247, 245, 0.9);
  font-size: 1.05rem;
}
.design-process__tagline {
  margin-top: 26px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.45);
}

/* Offset lower than the text block and pinned toward the right edge
   of the row (space-between handles the horizontal push) — the
   asymmetry is intentional, not a leftover gap. */
.design-process__media {
  position: relative;
  flex: 0 1 320px;
  margin-top: clamp(56px, 7vw, 120px);
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  background: var(--charcoal);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  perspective: 800px;
}
.design-process__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
  will-change: transform;
}
.design-process__media:hover .design-process__video,
.design-process__media:focus-within .design-process__video {
  transform: scale(1.02);
}
.design-process__label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 1;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft);
  pointer-events: none;
}
.design-process__media:hover .design-process__label,
.design-process__media:focus-within .design-process__label {
  opacity: 0.85;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .design-process__text { flex-basis: 380px; }
  .design-process__media { flex-basis: 260px; margin-top: 48px; }
}

@media (max-width: 720px) {
  .design-process__inner { flex-direction: column; align-items: flex-start; }
  .design-process__media { margin-top: 32px; flex-basis: auto; width: min(300px, 70vw); }
}

@media (prefers-reduced-motion: reduce) {
  .design-process__video { transition: none; }
}

/* =========================================================
   DESIGN PAGE — Commercial Advertising
   One dominant "hero" example, two "featured" pieces a step down, and
   four smaller supporting ones — plus one text-only tile mixed into
   the grid itself, the way an art-directed editorial spread mixes a
   pull-quote in with images. Closes with a compact three-line bridge
   into Logos below.
   ========================================================= */
.design-ads {
  position: relative;
  padding: clamp(64px, 9vw, 140px) 0 clamp(56px, 7vw, 100px);
  background: var(--black);
}
.design-ads__head {
  max-width: 1400px;
  margin: 0 auto clamp(56px, 7vw, 96px);
  padding: 0 var(--container-pad);
}
.design-ads__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
}
.design-ads__headline {
  margin-top: 18px;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.design-ads__body {
  margin-top: clamp(24px, 3.6vw, 40px);
  max-width: 560px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.design-ads__body p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.7);
}
.design-ads__body p:first-child {
  color: rgba(247, 247, 245, 0.92);
  font-size: 1.08rem;
}
.design-ads__tagline {
  margin-top: 22px;
  text-align: right;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.45);
}

.design-ads__gallery {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(38px, 4.4vw, 58px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.4vw, 20px);
}
.design-ads__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--charcoal);
}
.design-ads__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease-soft);
  will-change: transform;
}
.design-ads__item:hover .design-ads__video,
.design-ads__item:focus-within .design-ads__video {
  transform: scale(1.028);
  filter: brightness(1.04);
}
.design-ads__label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft);
  pointer-events: none;
}
.design-ads__item:hover .design-ads__label,
.design-ads__item:focus-within .design-ads__label {
  opacity: 0.85;
  transform: translateY(0);
}

.design-ads__item--hero { grid-column: span 6; grid-row: span 10; }
.design-ads__item--featured { grid-column: span 4; grid-row: span 7; }
.design-ads__item--sm { grid-column: span 3; grid-row: span 5; }

/* A text-only tile living inside the grid alongside the videos — a
   quiet editorial beat, not another card. */
.design-ads__note {
  grid-column: span 3;
  grid-row: span 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 8px 4px;
}
.design-ads__note span {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.3;
  font-weight: 500;
  color: rgba(247, 247, 245, 0.55);
}
.design-ads__note span:last-child { color: rgba(247, 247, 245, 0.85); }

.design-ads__closing {
  margin: clamp(64px, 8vw, 110px) auto 0;
  max-width: 1400px;
  padding: 0 var(--container-pad);
  text-align: center;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.45;
  font-weight: 500;
  color: rgba(247, 247, 245, 0.5);
}
.design-ads__closing span {
  color: var(--champagne);
  font-weight: 600;
}

@media (max-width: 1080px) {
  .design-ads__body { margin-left: 0; max-width: 620px; }
  .design-ads__tagline { text-align: left; }
  .design-ads__gallery { grid-template-columns: repeat(6, 1fr); }
  .design-ads__item--hero { grid-column: span 6; grid-row: span 8; }
  .design-ads__item--featured { grid-column: span 3; grid-row: span 6; }
  .design-ads__item--sm,
  .design-ads__note { grid-column: span 2; grid-row: span 4; }
}

@media (max-width: 640px) {
  .design-ads__headline { font-size: clamp(2rem, 9vw, 2.6rem); }
  .design-ads__gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(34px, 8vw, 46px); }
  .design-ads__item--hero { grid-column: span 2; grid-row: span 10; }
  .design-ads__item--featured { grid-column: span 2; grid-row: span 7; }
  .design-ads__item--sm { grid-column: span 1; grid-row: span 5; }
  .design-ads__note { grid-column: span 2; grid-row: span 3; text-align: center; align-items: center; }
  .design-ads__label { opacity: 0.85; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .design-ads__video { transition-duration: 0.15s; }
}

/* =========================================================
   DESIGN PAGE — AI Images
   One large primary image (its full native 941x1672 portrait ratio,
   never cropped) beside a smaller support column of three — a wide
   one on top, two side by side below. The support images are framed
   with object-fit:cover (like every other gallery on this page) so
   their combined height reads as a clear "supporting" tier rather
   than fighting the primary for attention.
   ========================================================= */
.design-ai-images {
  position: relative;
  padding: clamp(64px, 9vw, 140px) 0 clamp(56px, 7vw, 100px);
  background: var(--black);
}
.design-ai-images__head {
  max-width: 1400px;
  margin: 0 auto clamp(56px, 7vw, 96px);
  padding: 0 var(--container-pad);
}
.design-ai-images__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
}
.design-ai-images__headline {
  margin-top: 18px;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.design-ai-images__body {
  margin-top: clamp(24px, 3.6vw, 40px);
  max-width: 560px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.design-ai-images__body p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.7);
}
.design-ai-images__body p:first-child {
  color: rgba(247, 247, 245, 0.92);
  font-size: 1.08rem;
}
.design-ai-images__tagline {
  margin-top: 22px;
  text-align: right;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.45);
}

.design-ai-images__gallery {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, 3vw, 40px);
}
.design-ai-images__primary,
.design-ai-images__item {
  position: relative;
  display: block;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--charcoal);
}
.design-ai-images__primary img,
.design-ai-images__item img {
  transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease-soft);
  will-change: transform;
}
.design-ai-images__primary img,
.design-ai-images__item img {
  display: block;
  width: 100%;
}
.design-ai-images__primary {
  flex: 1 1 56%;
}
.design-ai-images__primary img {
  height: auto;
}
.design-ai-images__primary:hover img,
.design-ai-images__primary:focus-visible img {
  transform: scale(1.02);
  filter: brightness(1.04);
}

.design-ai-images__support {
  flex: 1 1 38%;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
}
.design-ai-images__item--wide {
  aspect-ratio: 16 / 10;
}
.design-ai-images__item--wide img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
}
.design-ai-images__pair {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
}
.design-ai-images__pair .design-ai-images__item {
  flex: 1 1 50%;
  aspect-ratio: 4 / 5;
}
.design-ai-images__pair .design-ai-images__item img {
  height: 100%;
  object-fit: cover;
}
.design-ai-images__pair .design-ai-images__item:nth-child(1) img { object-position: 62% 40%; }
.design-ai-images__pair .design-ai-images__item:nth-child(2) img { object-position: 50% 62%; }
.design-ai-images__item:hover img,
.design-ai-images__item:focus-visible img {
  transform: scale(1.03);
  filter: brightness(1.04);
}

.design-ai-images__label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft);
  pointer-events: none;
}
.design-ai-images__primary:hover .design-ai-images__label,
.design-ai-images__primary:focus-visible .design-ai-images__label,
.design-ai-images__item:hover .design-ai-images__label,
.design-ai-images__item:focus-visible .design-ai-images__label {
  opacity: 0.85;
  transform: translateY(0);
}

.design-ai-images__closing {
  margin: clamp(56px, 7vw, 96px) auto 0;
  max-width: 1400px;
  padding: 0 var(--container-pad);
  text-align: center;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.42;
  font-weight: 500;
  color: rgba(247, 247, 245, 0.6);
}
.design-ai-images__closing span { color: var(--white); font-weight: 600; }

@media (max-width: 1080px) {
  .design-ai-images__body { margin-left: 0; max-width: 620px; }
  .design-ai-images__tagline { text-align: left; }
  .design-ai-images__gallery { flex-direction: column; }
  .design-ai-images__primary { flex-basis: auto; width: 100%; }
  .design-ai-images__support { flex-basis: auto; width: 100%; }
  .design-ai-images__item--wide { aspect-ratio: 20 / 9; }
}

@media (max-width: 640px) {
  .design-ai-images__headline { font-size: clamp(2rem, 9vw, 2.6rem); }
  .design-ai-images__item--wide { aspect-ratio: 16 / 11; }
  .design-ai-images__pair .design-ai-images__item { aspect-ratio: 1 / 1; }
  .design-ai-images__label { opacity: 0.85; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .design-ai-images__primary img,
  .design-ai-images__item img {
    transition-duration: 0.15s;
  }
}

/* =========================================================
   DESIGN PAGE — 3D & Motion
   Same dense 12-column mosaic technique as AI Creative Video and
   Advertising Videos above: one dominant piece (the approved
   metallic-logo scene), two medium cinematic scenes, and two smaller
   "template" pieces (a motion mockup + its still counterpart).
   ========================================================= */
.design-3d {
  position: relative;
  padding: clamp(64px, 9vw, 140px) 0 clamp(56px, 7vw, 100px);
  background: var(--black);
}
.design-3d__head {
  max-width: 1400px;
  margin: 0 auto clamp(56px, 7vw, 96px);
  padding: 0 var(--container-pad);
}
.design-3d__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
}
.design-3d__headline {
  margin-top: 18px;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.design-3d__body {
  margin-top: clamp(24px, 3.6vw, 40px);
  max-width: 560px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.design-3d__body p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.7);
}
.design-3d__body p:first-child {
  color: rgba(247, 247, 245, 0.92);
  font-size: 1.08rem;
}
.design-3d__tagline {
  margin-top: 22px;
  text-align: right;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.45);
}

.design-3d__gallery {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(38px, 4.4vw, 58px);
  grid-auto-flow: dense;
  gap: clamp(10px, 1.4vw, 20px);
}
.design-3d__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--charcoal);
}
.design-3d__item img,
.design-3d__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease-soft);
  will-change: transform;
}
.design-3d__item:hover img,
.design-3d__item:hover .design-3d__video,
.design-3d__item:focus-within img,
.design-3d__item:focus-within .design-3d__video {
  transform: scale(1.028);
  filter: brightness(1.04);
}
.design-3d__label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft);
  pointer-events: none;
}
.design-3d__item:hover .design-3d__label,
.design-3d__item:focus-within .design-3d__label {
  opacity: 0.85;
  transform: translateY(0);
}

.design-3d__item--primary { grid-column: span 7; grid-row: span 11; }
.design-3d__item--md { grid-column: span 5; grid-row: span 6; }
.design-3d__item--tall { grid-column: span 3; grid-row: span 10; }

/* Per-asset object-position so cover-cropping never cuts the actual
   subject — the logo/characters, not empty sky or floor. */
.design-3d__item--primary img { object-position: 50% 42%; }
.design-3d__item--md:nth-of-type(2) img { object-position: 45% 45%; }
.design-3d__item--md:nth-of-type(3) img { object-position: 50% 55%; }
.design-3d__item--tall:nth-of-type(4) .design-3d__video { object-position: 50% 45%; }
.design-3d__item--tall:nth-of-type(5) img { object-position: 50% 38%; }

.design-3d__closing {
  margin: clamp(56px, 7vw, 96px) auto 0;
  max-width: 1400px;
  padding: 0 var(--container-pad);
  text-align: center;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height: 1.42;
  font-weight: 500;
  color: rgba(247, 247, 245, 0.6);
}
.design-3d__closing span { color: var(--white); font-weight: 600; }

@media (max-width: 1080px) {
  .design-3d__body { margin-left: 0; max-width: 620px; }
  .design-3d__tagline { text-align: left; }
  .design-3d__gallery { grid-template-columns: repeat(6, 1fr); }
  .design-3d__item--primary { grid-column: span 6; grid-row: span 8; }
  .design-3d__item--md { grid-column: span 3; grid-row: span 6; }
  .design-3d__item--tall { grid-column: span 3; grid-row: span 8; }
}

@media (max-width: 640px) {
  .design-3d__headline { font-size: clamp(2rem, 9vw, 2.6rem); }
  .design-3d__gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(34px, 8vw, 46px); }
  .design-3d__item--primary { grid-column: span 2; grid-row: span 8; }
  .design-3d__item--md { grid-column: span 2; grid-row: span 6; }
  .design-3d__item--tall { grid-column: span 1; grid-row: span 7; }
  .design-3d__label { opacity: 0.85; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .design-3d__item img,
  .design-3d__video {
    transition-duration: 0.15s;
  }
}

/* =========================================================
   DESIGN PAGE — Social & Content (interactive showcase)
   ========================================================= */
.design-social {
  position: relative;
  padding: clamp(64px, 9vw, 140px) 0 clamp(56px, 7vw, 100px);
  background: var(--black);
}
.design-social__head {
  max-width: 1400px;
  margin: 0 auto clamp(56px, 7vw, 96px);
  padding: 0 var(--container-pad);
}
.design-social__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
}
.design-social__headline {
  margin-top: 18px;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 16ch;
}
.design-social__body {
  margin-top: clamp(24px, 3.6vw, 40px);
  max-width: 560px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.design-social__body p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.7);
}
.design-social__body p:first-child {
  color: rgba(247, 247, 245, 0.92);
  font-size: 1.08rem;
}
.design-social__tagline {
  margin-top: 22px;
  text-align: right;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.45);
}

.design-social__gallery {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
  gap: clamp(16px, 2vw, 28px);
}

.design-social__card {
  position: relative;
  grid-column: span 3;
  border-radius: 20px;
  overflow: hidden;
  background: var(--charcoal);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: box-shadow 0.4s var(--ease-soft);
}
.design-social__card:hover,
.design-social__card:focus-visible {
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5);
}
.design-social__card:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

.design-social__card--post,
.design-social__card--story,
.design-social__card--carousel { aspect-ratio: 4 / 5; }
.design-social__card--reel,
.design-social__card--shorts { aspect-ratio: 9 / 16; }

/* Deliberate floating stagger — never a perfectly flat row. Uses
   margin-top (not transform) so it never collides with the
   [data-reveal] fade or the hover-scale transform, both of which
   live on other elements of this same card. */
.design-social__card--reel { margin-top: -24px; }
.design-social__card--carousel { margin-top: 40px; }
.design-social__card--story:nth-of-type(4) { margin-top: 16px; }
.design-social__card--post:nth-of-type(5) { grid-column: span 4; margin-top: 6px; }
.design-social__card--story:nth-of-type(6) { grid-column: span 4; margin-top: -14px; }
.design-social__card--shorts { grid-column: span 4; margin-top: 32px; }

.design-social__media {
  position: absolute;
  inset: 0;
}
.design-social__media img,
.design-social__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease-soft);
  will-change: transform;
}
.design-social__card:hover .design-social__media img,
.design-social__card:hover .design-social__video,
.design-social__card:focus-visible .design-social__media img,
.design-social__card:focus-visible .design-social__video {
  transform: scale(1.035);
  filter: brightness(1.05);
}
.design-social__card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.85), rgba(8, 8, 10, 0));
  pointer-events: none;
}

.design-social__chrome {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.design-social__chrome--story {
  padding: 3px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--champagne), var(--orange));
  width: fit-content;
}
.design-social__chrome--story .design-social__avatar { background: var(--black); }
.design-social__avatar {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--champagne);
  background: rgba(8, 8, 10, 0.65);
  border-radius: 7px;
  padding: 5px 8px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.design-social__kind {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.75);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.design-social__dots {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: flex;
  gap: 4px;
}
.design-social__dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(247, 247, 245, 0.9);
  font-style: normal;
}
.design-social__dots i:not(:first-child) { background: rgba(247, 247, 245, 0.4); }

.design-social__caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.design-social__expand {
  position: absolute;
  right: 16px;
  top: 50%;
  z-index: 1;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(-50%) translateX(6px);
  transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft);
  pointer-events: none;
}
.design-social__card:hover .design-social__expand,
.design-social__card:focus-visible .design-social__expand {
  opacity: 0.9;
  transform: translateY(-50%) translateX(0);
}

.design-social__statement,
.design-social__trend {
  margin: clamp(56px, 7vw, 96px) auto 0;
  max-width: 1400px;
  padding: 0 var(--container-pad);
  text-align: center;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.42;
  font-weight: 500;
  color: rgba(247, 247, 245, 0.55);
}
.design-social__statement span { color: var(--white); font-weight: 600; }
.design-social__trend {
  margin-top: clamp(28px, 3.5vw, 40px);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(247, 247, 245, 0.6);
}

.design-social__closing {
  margin: clamp(56px, 7vw, 96px) auto 0;
  max-width: 1400px;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.design-social__closing p {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--white);
}

/* ---------- Lightbox ---------- */
.design-social__lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.design-social__lightbox[hidden] { display: none; }
.design-social__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 8, 0.82);
  backdrop-filter: blur(8px);
}
.design-social__lightbox-panel {
  position: relative;
  width: min(420px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--charcoal);
  border: 1px solid rgba(247, 247, 245, 0.1);
  border-radius: 24px;
  overflow: hidden;
  animation: modalIn 0.4s var(--ease-out);
  padding: 20px 20px 26px;
  gap: 16px;
}
.design-social__lightbox-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(247, 247, 245, 0.2);
  z-index: 2;
  background: rgba(8, 8, 10, 0.6);
  color: var(--white);
}
.design-social__lightbox-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--black);
}
.design-social__lightbox-media img,
.design-social__lightbox-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.design-social__lightbox-nav[hidden] { display: none; }
.design-social__lightbox-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(247, 247, 245, 0.7);
}
.design-social__lightbox-nav button {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(247, 247, 245, 0.2);
  font-size: 1.1rem;
  line-height: 1;
}
.design-social__lightbox-caption {
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  color: rgba(247, 247, 245, 0.85);
}
.design-social__lightbox-cta { width: 100%; justify-content: center; }

@media (max-width: 1080px) {
  .design-social__body { margin-left: 0; max-width: 620px; }
  .design-social__tagline { text-align: left; }
  .design-social__gallery { grid-template-columns: repeat(6, 1fr); }
  .design-social__card { grid-column: span 3 !important; margin-top: 0 !important; }
  .design-social__card--reel,
  .design-social__card--carousel { grid-column: span 3 !important; }
}

@media (max-width: 640px) {
  .design-social__headline { font-size: clamp(2rem, 9vw, 2.6rem); }
  .design-social__gallery { grid-template-columns: repeat(2, 1fr); }
  .design-social__card { grid-column: span 2 !important; }
  .design-social__expand { opacity: 0.85; transform: translateY(-50%) translateX(0); }
  .design-social__closing p { font-size: clamp(1.3rem, 7vw, 1.7rem); }
}

@media (prefers-reduced-motion: reduce) {
  .design-social__media img,
  .design-social__video {
    transition-duration: 0.15s;
  }
}

/* =========================================================
   DESIGN PAGE — Image & Design (logo/branding gallery)
   ========================================================= */
.design-gallery {
  position: relative;
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--black);
}
.design-gallery__head { margin-bottom: clamp(40px, 5vw, 56px); }

.design-gallery__grid {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(48px, 5.5vw, 74px);
  grid-auto-flow: dense;
  gap: clamp(12px, 1.6vw, 22px);
}
.design-gallery__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--charcoal);
  perspective: 800px;
}
.design-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out), filter 0.5s var(--ease-soft);
  will-change: transform;
}
.design-gallery__item:hover img,
.design-gallery__item:focus-within img {
  filter: brightness(1.05);
}

.design-gallery__item--sm { grid-column: span 3; grid-row: span 3; }
.design-gallery__item--md { grid-column: span 4; grid-row: span 4; }
.design-gallery__item--lg { grid-column: span 5; grid-row: span 5; }
.design-gallery__item--wide { grid-column: span 6; grid-row: span 3; }
.design-gallery__item--tall { grid-column: span 3; grid-row: span 6; }

/* Staggered reveal delays so pieces settle at slightly different
   moments as they scroll in — a depth cue without per-item JS. */
.design-gallery__item:nth-child(3n+1) { transition-delay: 0s; }
.design-gallery__item:nth-child(3n+2) { transition-delay: 0.08s; }
.design-gallery__item:nth-child(3n) { transition-delay: 0.16s; }

.design-gallery__statement {
  margin: clamp(56px, 8vw, 96px) auto 0;
  max-width: 720px;
  padding: 0 var(--container-pad);
  text-align: center;
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  font-weight: 500;
  line-height: 1.42;
  color: rgba(247, 247, 245, 0.6);
}
.design-gallery__statement span { color: var(--white); font-weight: 600; }

@media (max-width: 1080px) {
  .design-gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .design-gallery__item,
  .design-gallery__item--sm,
  .design-gallery__item--md,
  .design-gallery__item--lg,
  .design-gallery__item--tall {
    grid-column: span 1;
    grid-row: span 5;
  }
  .design-gallery__item--wide { grid-column: span 2; grid-row: span 5; }
}

@media (max-width: 640px) {
  .design-gallery__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .design-gallery__item,
  .design-gallery__item--sm,
  .design-gallery__item--md,
  .design-gallery__item--lg,
  .design-gallery__item--tall,
  .design-gallery__item--wide {
    grid-column: span 1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .design-gallery__item img { transition-duration: 0.15s; }
}

/* =========================================================
   MARKETING PAGE — Hero
   Full-bleed cinematic scene (the artwork is a wide 1672x941 photo,
   so object-fit:cover with a tuned object-position shows nearly all
   of it at typical viewport ratios) — one complete environment with
   real HTML content layered on top, not a text column beside a boxed
   image. The scrim sits only on the left, behind the text; the
   sunset/city/laptop/phone on the right stay bright and uncovered.
   ========================================================= */
.marketing-hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}
.marketing-hero__media {
  position: absolute;
  inset: -3%;
  z-index: -1;
  overflow: hidden;
  will-change: transform;
}
/* Soft blurred fill of the same photo — covers the whole screen edge
   to edge (object-fit:cover) so there is never a flat empty bar,
   however the viewport's aspect ratio compares to the artwork's. */
.marketing-hero__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.15);
  filter: blur(60px) brightness(0.5) saturate(1.15);
}
/* The real photo, at full quality, sized with object-fit:contain —
   mathematically this can never crop it, at any viewport shape. */
.marketing-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
/* Left-side scrim for text legibility only — the rest of the frame
   (sunset, city, laptop, phone) stays bright, per "do not darken the
   whole image." */
.marketing-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 68% at 24% 30%, rgba(8, 8, 12, 0.7), transparent 74%),
    linear-gradient(180deg, rgba(8, 8, 12, 0.6) 0%, rgba(8, 8, 12, 0.3) 32%, rgba(8, 8, 12, 0) 48%);
}
.marketing-hero__content {
  position: relative;
  z-index: 1;
  max-width: 520px;
  padding: calc(var(--header-h) + clamp(24px, 5vh, 56px)) var(--container-pad) 0;
}
.marketing-hero__content-inner { will-change: transform; }
.marketing-hero__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 14px;
}
.marketing-hero__title {
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.marketing-hero__title-accent { color: var(--orange); }
.marketing-hero__lede {
  margin-top: 14px;
  max-width: 40ch;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(247, 247, 245, 0.88);
}
.marketing-hero__cta { margin-top: 24px; transition: transform 0.35s var(--ease-out), background 0.3s var(--ease-soft), box-shadow 0.35s var(--ease-soft); }
.marketing-hero__cta:hover,
.marketing-hero__cta:focus-visible {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.marketing-hero__ctas { display: flex; align-items: center; gap: clamp(20px, 3vw, 32px); flex-wrap: wrap; }
.marketing-hero__explore {
  background: none;
  border: none;
  color: rgba(247, 247, 245, 0.85);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(247, 247, 245, 0.35);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.marketing-hero__explore:hover,
.marketing-hero__explore:focus-visible {
  color: var(--white);
  border-color: rgba(247, 247, 245, 0.7);
}
.marketing-hero__arrow { display: inline-block; transition: transform 0.35s var(--ease-out); }
.marketing-hero__cta:hover .marketing-hero__arrow,
.marketing-hero__cta:focus-visible .marketing-hero__arrow {
  transform: translateX(4px);
}

@media (max-width: 1080px) {
  /* Below desktop, viewports run tall/narrow enough that
     object-fit:contain would shrink the photo to a thin strip
     sandwiched between blurred margins — a full-bleed cover crop
     (tuned per breakpoint below) reads better at this size, so the
     blurred fill layer is switched off and the real photo takes over
     the whole screen again here. */
  .marketing-hero__fill { display: none; }
  .marketing-hero__bg { object-fit: cover; object-position: 62% 46%; }
  .marketing-hero__title { font-size: clamp(2.1rem, 5vw, 2.8rem); }
}

@media (max-width: 640px) {
  /* A very tall/narrow crop of a wide scene has little room to dodge
     the laptop entirely, so text stays anchored to the top (over the
     sky, the same clean zone used on desktop) and the scrim above it
     is strong enough to stay legible regardless of what's behind it —
     rather than pushing text down onto the bright laptop screen. */
  .marketing-hero__bg { object-position: 68% 30%; }
  .marketing-hero__scrim {
    background:
      linear-gradient(180deg, rgba(6, 6, 10, 0.78) 0%, rgba(6, 6, 10, 0.55) 32%, rgba(6, 6, 10, 0.15) 52%, rgba(6, 6, 10, 0) 66%);
  }
  .marketing-hero__content { padding-top: calc(var(--header-h) + 12px); }
  .marketing-hero__eyebrow { margin-bottom: 8px; }
  .marketing-hero__title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .marketing-hero__lede { max-width: none; font-size: 0.92rem; margin-top: 10px; }
  .marketing-hero__cta { margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-hero__media,
  .marketing-hero__content-inner {
    transition: none !important;
  }
}

/* =========================================================
   MARKETING PAGE — shared section heads
   ========================================================= */
.mkt-move, .mkt-social, .mkt-seo, .mkt-web, .mkt-strategy { background: var(--black); }
.mkt-ecosystem-section, .mkt-ads, .mkt-leads, .mkt-email, .mkt-system { background: var(--charcoal); }
.mkt-move, .mkt-ecosystem-section, .mkt-ads, .mkt-seo, .mkt-leads, .mkt-web, .mkt-email, .mkt-strategy, .mkt-system {
  position: relative;
  padding: clamp(64px, 9vw, 140px) 0 clamp(56px, 7vw, 100px);
}

.mkt-move__eyebrow, .mkt-ecosystem-section__eyebrow, .mkt-social__eyebrow,
.mkt-ads__eyebrow, .mkt-seo__eyebrow, .mkt-leads__eyebrow, .mkt-web__eyebrow, .mkt-email__eyebrow,
.mkt-strategy__eyebrow, .mkt-system__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
}
.mkt-move__headline, .mkt-ecosystem-section__headline, .mkt-social__headline,
.mkt-ads__headline, .mkt-seo__headline, .mkt-leads__headline, .mkt-web__headline, .mkt-email__headline,
.mkt-strategy__headline, .mkt-system__headline {
  margin-top: 18px;
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.mkt-move__body, .mkt-ecosystem-section__body, .mkt-social__body,
.mkt-ads__body, .mkt-seo__body, .mkt-leads__body, .mkt-web__body, .mkt-email__body,
.mkt-strategy__body, .mkt-system__body {
  margin-top: clamp(20px, 3vw, 32px);
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mkt-move__body p, .mkt-ecosystem-section__body p, .mkt-social__body p,
.mkt-ads__body p, .mkt-seo__body p, .mkt-leads__body p, .mkt-web__body p, .mkt-email__body p,
.mkt-strategy__body p, .mkt-system__body p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.7);
}
.mkt-move__body p:first-child, .mkt-social__body p:first-child, .mkt-seo__body p:first-child,
.mkt-strategy__body p:first-child {
  color: rgba(247, 247, 245, 0.92);
  font-size: 1.08rem;
}

.mkt-move__head, .mkt-ecosystem-section__head, .mkt-ads__head, .mkt-seo__head,
.mkt-leads__head, .mkt-web__head, .mkt-email__head, .mkt-strategy__head, .mkt-system__head {
  max-width: 1400px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  padding: 0 var(--container-pad);
}

/* Sequential uppercase word row (Attention. Traffic. Leads...) */
.mkt-move__words {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.45);
}
.mkt-move__words span { position: relative; }
.mkt-move__words span:not(:last-child)::after { content: ""; }

/* =========================================================
   Shared component — mkt-visual (large premium image)
   ========================================================= */
.mkt-visual {
  position: relative;
  max-width: 1400px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  padding: 0 var(--container-pad);
}
.mkt-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease-soft);
}
.mkt-visual:hover img, .mkt-visual:focus-within img {
  transform: scale(1.012);
  filter: brightness(1.03);
}
.mkt-visual__label {
  position: absolute;
  left: calc(var(--container-pad) + 18px);
  bottom: 18px;
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease-soft), transform 0.35s var(--ease-soft);
  pointer-events: none;
}
.mkt-visual:hover .mkt-visual__label, .mkt-visual:focus-within .mkt-visual__label { opacity: 0.85; transform: translateY(0); }

/* =========================================================
   Shared component — mkt-flow (process stage strip)
   ========================================================= */
.mkt-flow {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.mkt-flow__track {
  position: relative;
  height: 2px;
  background: rgba(247, 247, 245, 0.14);
  margin: 0 0 clamp(28px, 4vw, 44px);
}
.mkt-flow__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 10px 2px rgba(232, 210, 164, 0.5);
  transform: translate(-50%, -50%);
  transition: left 2.6s var(--ease-soft) 0.2s;
}
.mkt-flow.is-revealed .mkt-flow__dot { left: 100%; }
.mkt-flow__stages {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.mkt-flow__stage {
  background: none;
  border: none;
  padding: 0 0 4px;
  text-align: left;
  color: rgba(247, 247, 245, 0.5);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.mkt-flow__num {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 4px;
}
.mkt-flow__label {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.mkt-flow__stage:hover, .mkt-flow__stage:focus-visible, .mkt-flow__stage.is-active {
  color: var(--white);
  border-color: var(--champagne);
}
.mkt-flow__desc {
  margin-top: clamp(20px, 3vw, 32px);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(247, 247, 245, 0.85);
  min-height: 1.6em;
}
.mkt-flow--compact { max-width: 620px; margin: clamp(28px, 4vw, 40px) 0 0; padding: 0; }
.mkt-flow--wide { max-width: 1300px; }

/* =========================================================
   Shared component — mkt-tabs (tab select)
   ========================================================= */
.mkt-tabs {
  max-width: 1100px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: 0 var(--container-pad);
}
.mkt-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.6vw, 20px);
  border-bottom: 1px solid rgba(247, 247, 245, 0.14);
  padding-bottom: 16px;
}
.mkt-tabs--center .mkt-tabs__nav { justify-content: center; }
.mkt-tabs__btn {
  background: none;
  border: 1px solid rgba(247, 247, 245, 0.18);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.6);
  cursor: pointer;
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), background 0.3s var(--ease-soft);
}
.mkt-tabs__btn:hover, .mkt-tabs__btn:focus-visible { color: var(--white); border-color: rgba(247, 247, 245, 0.4); }
.mkt-tabs__btn.is-active { color: var(--black); background: var(--champagne); border-color: var(--champagne); }
.mkt-tabs__panels { margin-top: clamp(20px, 3vw, 28px); min-height: 3em; }
.mkt-tabs--center .mkt-tabs__panels { text-align: center; }
.mkt-tabs__panel { display: none; font-size: clamp(1rem, 1.6vw, 1.15rem); color: rgba(247, 247, 245, 0.85); max-width: 640px; }
.mkt-tabs--center .mkt-tabs__panel { max-width: none; }
.mkt-tabs__panel.is-active { display: block; }

/* =========================================================
   THE DIGITAL ECOSYSTEM
   ========================================================= */
.mkt-ecosystem {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.mkt-ecosystem__frame { position: relative; }
.mkt-ecosystem__img { width: 100%; height: auto; display: block; border-radius: 16px; }
.mkt-ecosystem__hotspot {
  position: absolute;
  width: clamp(46px, 7vw, 74px);
  height: clamp(46px, 7vw, 74px);
  transform: translate(-50%, -50%);
  border-radius: 12px;
  border: 1px solid rgba(247, 247, 245, 0.35);
  background: rgba(8, 8, 10, 0.05);
  cursor: pointer;
  transition: transform 0.35s var(--ease-out), border-color 0.3s var(--ease-soft), box-shadow 0.35s var(--ease-soft);
}
.mkt-ecosystem__hotspot:hover, .mkt-ecosystem__hotspot:focus-visible, .mkt-ecosystem__hotspot.is-active {
  border-color: var(--champagne);
  box-shadow: 0 0 0 4px rgba(232, 210, 164, 0.18);
  transform: translate(-50%, -50%) scale(1.08);
}
.mkt-ecosystem__role {
  margin-top: clamp(28px, 4vw, 44px);
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 500;
  color: rgba(247, 247, 245, 0.55);
}
.mkt-ecosystem__role span { color: var(--white); font-weight: 600; }

/* =========================================================
   SOCIAL MEDIA MANAGEMENT (image left, content right)
   ========================================================= */
.mkt-social {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(64px, 9vw, 140px) var(--container-pad) clamp(56px, 7vw, 100px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.mkt-social__visual { margin: 0; padding: 0; max-width: none; }
.mkt-social__visual img { border-radius: 18px; }
.mkt-social__support {
  margin-top: 20px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.5);
}

/* =========================================================
   PAID ADVERTISING
   ========================================================= */
.mkt-ads__tags { margin-top: 22px; display: flex; gap: 10px; }
.mkt-ads__tags span {
  border: 1px solid rgba(247, 247, 245, 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.75);
}
.mkt-ads__statement {
  margin-top: clamp(28px, 4vw, 40px);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.4;
  font-weight: 500;
  color: rgba(247, 247, 245, 0.55);
}
.mkt-ads__statement span { color: var(--white); font-weight: 600; }
.mkt-ads .mkt-flow { margin-top: clamp(48px, 6vw, 80px); }

/* =========================================================
   SEO & DISCOVERY
   ========================================================= */
.mkt-seo .mkt-flow { margin-top: clamp(8px, 1vw, 12px); }

/* =========================================================
   LEAD GENERATION
   ========================================================= */
.mkt-leads__system {
  max-width: 1100px;
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
}
.mkt-leads__system-title {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 10px;
}
.mkt-leads__system-col p:not(.mkt-leads__system-title) {
  font-size: 0.94rem;
  color: rgba(247, 247, 245, 0.7);
  line-height: 1.8;
}

/* =========================================================
   WEBSITES & LANDING PAGES
   ========================================================= */
.mkt-web__support {
  margin-top: 22px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.5);
}
.mkt-web__reinforce {
  max-width: 1100px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  padding: 0 var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
}
.mkt-web__reinforce span {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.5);
}

/* =========================================================
   EMAIL MARKETING
   ========================================================= */
.mkt-email__support {
  margin-top: 22px;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.5);
}
.mkt-email__tags {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mkt-email__tags span {
  border: 1px solid rgba(247, 247, 245, 0.25);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.75);
}
.mkt-email .mkt-flow { margin-top: clamp(56px, 7vw, 88px); }

/* =========================================================
   MARKETING STRATEGY
   ========================================================= */
.mkt-strategy .mkt-flow { margin-top: clamp(8px, 1vw, 12px); }

/* =========================================================
   THE SYSTEM (closing summary — a wider, spotlighted flow)
   ========================================================= */
.mkt-flow--system .mkt-flow__stage { opacity: 0.4; transition: opacity 0.3s var(--ease-soft), color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft); }
.mkt-flow--system .mkt-flow__stage.is-active,
.mkt-flow--system .mkt-flow__stage:hover,
.mkt-flow--system .mkt-flow__stage:focus-visible { opacity: 1; }
.mkt-system__closing {
  margin: clamp(48px, 6vw, 72px) auto 0;
  max-width: 1400px;
  padding: 0 var(--container-pad);
  text-align: center;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.42;
  font-weight: 500;
  color: rgba(247, 247, 245, 0.55);
}
.mkt-system__closing span { color: var(--white); font-weight: 600; }

/* =========================================================
   THE MARKETING JOURNEY — an editorial layer built entirely in
   HTML/CSS around the approved "crecimiento" image. The image
   itself is never edited or annotated.
   ========================================================= */
.mkt-journey {
  position: relative;
  padding: clamp(64px, 9vw, 140px) 0 clamp(56px, 7vw, 100px);
  background: var(--black);
}
.mkt-journey__head {
  max-width: 900px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 0 var(--container-pad);
}
.mkt-journey__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
}
.mkt-journey__headline {
  margin-top: 14px;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
  max-width: 16ch;
}
.mkt-journey__body {
  margin-top: 16px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mkt-journey__body p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.65);
}

.mkt-flow--journey .mkt-flow__stage {
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), transform 0.3s var(--ease-out);
}
.mkt-flow--journey .mkt-flow__stage:hover,
.mkt-flow--journey .mkt-flow__stage:focus-visible,
.mkt-flow--journey .mkt-flow__stage.is-active {
  transform: scale(1.03);
}

/* mkt-flow--hero: the flow strip stands in for the section's
   visual (no image), so it runs bigger, roomier and slower. */
.mkt-flow--hero {
  max-width: 1200px;
  margin-top: clamp(48px, 7vw, 88px);
}
.mkt-flow--hero .mkt-flow__track { margin-bottom: clamp(44px, 6vw, 72px); }
.mkt-flow--hero .mkt-flow__stages { gap: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 48px); }
.mkt-flow--hero .mkt-flow__num { font-size: 0.72rem; letter-spacing: 0.18em; }
.mkt-flow--hero .mkt-flow__label {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mkt-flow--hero .mkt-flow__desc {
  margin-top: clamp(32px, 4.5vw, 48px);
  max-width: 620px;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

/* =========================================================
   MARKETING PAGE — responsive
   ========================================================= */
@media (max-width: 1080px) {
  .mkt-social { grid-template-columns: 1fr; }
  .mkt-social__visual { order: -1; }
  .mkt-move__body, .mkt-ecosystem-section__body, .mkt-ads__body,
  .mkt-seo__body, .mkt-leads__body, .mkt-web__body, .mkt-email__body,
  .mkt-strategy__body, .mkt-system__body { max-width: 620px; }
  .mkt-flow__stages { gap: 16px 24px; }
  .mkt-leads__system { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
  .mkt-move__headline, .mkt-ecosystem-section__headline, .mkt-social__headline,
  .mkt-ads__headline, .mkt-seo__headline, .mkt-leads__headline, .mkt-web__headline, .mkt-email__headline,
  .mkt-strategy__headline, .mkt-system__headline {
    font-size: clamp(1.9rem, 9vw, 2.4rem);
  }
  .mkt-visual__label { opacity: 0.85; transform: translateY(0); }
  .mkt-flow__stages { justify-content: flex-start; }
  .mkt-flow__track { display: none; }
  .mkt-ecosystem__hotspot { width: 40px; height: 40px; }
  .mkt-tabs__nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-visual img { transition-duration: 0.15s; }
  .mkt-flow__dot { transition: none; left: 100%; }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   AI & AUTOMATION PAGE
   ========================================================= */

/* ---------- Hero ---------- */
.ai-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--black);
  overflow: hidden;
}
.ai-hero__bg { position: absolute; inset: 0; overflow: hidden; }
.ai-hero__grid {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(rgba(87, 230, 224, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87, 230, 224, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 45%, black 40%, transparent 85%);
}
.ai-hero__glow {
  position: absolute;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  left: -10%;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(87, 230, 224, 0.16), rgba(155, 107, 255, 0.08) 45%, transparent 72%);
  filter: blur(10px);
  animation: aiHeroGlow 10s ease-in-out infinite;
}
@keyframes aiHeroGlow {
  0%, 100% { opacity: 0.8; transform: translateY(-50%) scale(1); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.06); }
}
.ai-hero__content {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 40px) var(--container-pad) 40px;
}
.ai-hero__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
  color: var(--cyan);
}
.ai-hero__title {
  margin-top: 18px;
  font-size: clamp(3rem, 8vw, 6.4rem);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.ai-hero__lede {
  margin-top: 24px;
  max-width: 480px;
  font-size: 1.08rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.7);
}
.ai-hero__ctas { margin-top: 36px; display: flex; align-items: center; gap: clamp(20px, 3vw, 32px); flex-wrap: wrap; }
.ai-hero__explore {
  background: none;
  border: none;
  color: rgba(247, 247, 245, 0.75);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(247, 247, 245, 0.3);
  cursor: pointer;
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.ai-hero__explore:hover, .ai-hero__explore:focus-visible { color: var(--white); border-color: rgba(247, 247, 245, 0.7); }

/* ---------- Shared section heads ---------- */
.ai-shift, .ai-marketing, .ai-bizauto, .ai-final { background: var(--black); }
.ai-agents, .ai-automation, .ai-content, .ai-system { background: var(--charcoal); }
.ai-shift, .ai-agents, .ai-automation, .ai-marketing, .ai-content, .ai-bizauto, .ai-system {
  position: relative;
  padding: clamp(64px, 9vw, 140px) 0 clamp(56px, 7vw, 100px);
}
.ai-shift__head, .ai-agents__head, .ai-automation__head, .ai-marketing__head,
.ai-content__head, .ai-bizauto__head, .ai-system__head {
  max-width: 1400px;
  margin: 0 auto clamp(48px, 6vw, 80px);
  padding: 0 var(--container-pad);
}
.ai-shift__eyebrow, .ai-agents__eyebrow, .ai-automation__eyebrow, .ai-marketing__eyebrow,
.ai-content__eyebrow, .ai-bizauto__eyebrow, .ai-system__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
  color: var(--cyan);
}
.ai-shift__headline, .ai-agents__headline, .ai-automation__headline, .ai-marketing__headline,
.ai-content__headline, .ai-bizauto__headline, .ai-system__headline {
  margin-top: 18px;
  font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.ai-shift__body, .ai-agents__body, .ai-automation__body, .ai-marketing__body,
.ai-content__body, .ai-bizauto__body, .ai-system__body {
  margin-top: clamp(20px, 3vw, 32px);
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ai-shift__body p, .ai-agents__body p, .ai-automation__body p, .ai-marketing__body p,
.ai-content__body p, .ai-bizauto__body p, .ai-system__body p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.7);
}

/* ---------- The Shift — before/after rows ---------- */
.ai-shift__row {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(247, 247, 245, 0.08);
  border-radius: 16px;
  overflow: hidden;
}
.ai-shift__item {
  background: var(--black);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 32px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}
.ai-shift__before { color: rgba(247, 247, 245, 0.45); font-size: 0.98rem; }
.ai-shift__after { color: var(--white); font-size: 0.98rem; font-weight: 500; text-align: right; }
.ai-shift__arrow { color: var(--cyan); font-size: 1.1rem; }

/* ---------- Meet OPTOPUS AI ---------- */
.ai-meet { position: relative; padding: clamp(64px, 9vw, 140px) 0 clamp(64px, 9vw, 120px); background: var(--black); overflow: hidden; }
.ai-meet__head { max-width: 900px; margin: 0 auto clamp(48px, 6vw, 80px); padding: 0 var(--container-pad); }
.ai-meet__eyebrow { font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.7; color: var(--cyan); }
.ai-meet__headline {
  margin-top: 18px;
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.ai-meet__body { margin-top: 22px; max-width: 520px; font-size: 1.05rem; line-height: 1.6; color: rgba(247, 247, 245, 0.7); }
.ai-meet__micro { margin-top: 14px; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247, 247, 245, 0.4); }

.ai-meet__stage {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
}

/* ---------- Intelligence core ---------- */
.ai-meet__core {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 32px);
  padding: clamp(24px, 4vw, 40px);
  border-radius: 24px;
  border: 1px solid rgba(247, 247, 245, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0));
}
.ai-core { position: relative; width: min(100%, 420px); aspect-ratio: 1 / 1; }
.ai-core__orb {
  position: absolute;
  inset: 34%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.9), rgba(87, 230, 224, 0.7) 40%, rgba(155, 107, 255, 0.45) 75%, transparent 100%);
  box-shadow: 0 0 40px 6px rgba(87, 230, 224, 0.35), 0 0 90px 20px rgba(155, 107, 255, 0.18);
  animation: aiOrbBreathe 4.5s ease-in-out infinite;
}
@keyframes aiOrbBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.ai-core__ring {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(87, 230, 224, 0.18);
}
.ai-core__ring--2 { inset: 6%; border-color: rgba(155, 107, 255, 0.14); }
.ai-core__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ai-core__lines line {
  stroke: rgba(247, 247, 245, 0.16);
  stroke-width: 1;
  transition: stroke 0.6s var(--ease-soft);
}
.ai-core__node {
  position: absolute;
  left: var(--nx);
  top: var(--ny);
  transform: translate(-50%, -50%);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.55);
  background: rgba(19, 19, 22, 0.9);
  border: 1px solid rgba(247, 247, 245, 0.14);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
  transition: color 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft);
}
.ai-core__status {
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: rgba(247, 247, 245, 0.55);
  min-height: 1.4em;
  text-align: center;
}

/* State reactions */
.ai-meet__core[data-ai-state="listening"] .ai-core__orb,
.ai-meet__core[data-ai-state="thinking"] .ai-core__orb,
.ai-meet__core[data-ai-state="responding"] .ai-core__orb {
  box-shadow: 0 0 56px 10px rgba(87, 230, 224, 0.5), 0 0 120px 30px rgba(155, 107, 255, 0.28);
}
.ai-meet__core[data-ai-state="thinking"] .ai-core__ring { animation: aiRingSpin 3.2s linear infinite; }
.ai-meet__core[data-ai-state="thinking"] .ai-core__ring--2 { animation-duration: 4.6s; animation-direction: reverse; }
@keyframes aiRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ai-meet__core[data-ai-state="thinking"] .ai-core__lines line { stroke: rgba(87, 230, 224, 0.4); }
.ai-meet__core[data-ai-state="recommendation"] .ai-core__node.is-active,
.ai-meet__core[data-ai-state="responding"] .ai-core__node.is-active {
  color: var(--white);
  border-color: var(--cyan);
}

/* ---------- Unified workspace ---------- */
.ai-ws {
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 1px solid rgba(247, 247, 245, 0.1);
  background: rgba(255, 255, 255, 0.03);
  padding: clamp(20px, 3vw, 32px);
  min-height: 480px;
  gap: 16px;
}

.ai-ws__nav { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-ws__nav-btn {
  background: none;
  border: 1px solid rgba(247, 247, 245, 0.14);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: rgba(247, 247, 245, 0.55);
  cursor: pointer;
  transition: color 0.25s var(--ease-soft), border-color 0.25s var(--ease-soft), background 0.25s var(--ease-soft);
}
.ai-ws__nav-btn:hover, .ai-ws__nav-btn:focus-visible { color: var(--white); border-color: rgba(247, 247, 245, 0.35); }
.ai-ws__nav-btn.is-active { color: var(--black); background: var(--cyan); border-color: var(--cyan); }

.ai-ws__form { display: flex; gap: 10px; }
.ai-ws__form input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(247, 247, 245, 0.16);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--white);
  font-size: 1rem;
  min-height: 48px;
}
.ai-ws__form input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

.ai-ws__quickstarts { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-option {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(247, 247, 245, 0.16);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-soft), background 0.25s var(--ease-soft), transform 0.2s var(--ease-out);
  min-height: 40px;
}
.ai-option:hover, .ai-option:focus-visible {
  border-color: var(--cyan);
  background: rgba(87, 230, 224, 0.08);
  transform: translateY(-1px);
}

.ai-ws__dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  background: none;
  border: 1px dashed rgba(247, 247, 245, 0.2);
  border-radius: 14px;
  padding: 16px;
  color: rgba(247, 247, 245, 0.55);
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-soft), color 0.25s var(--ease-soft);
}
.ai-ws__dropzone:hover, .ai-ws__dropzone:focus-visible, .ai-ws__dropzone.is-drag { border-color: var(--cyan); color: var(--white); }
.ai-ws__dropzone-sub { font-size: 0.72rem; opacity: 0.7; }

.ai-ws__command { border-top: 1px solid rgba(247, 247, 245, 0.08); padding-top: 16px; }
.ai-ws__command[hidden] { display: none; }
.ai-command__list { display: flex; flex-direction: column; gap: 10px; }
.ai-command__row { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: rgba(247, 247, 245, 0.45); transition: color 0.3s var(--ease-soft); }
.ai-command__row.is-active { color: var(--white); }
.ai-command__row.is-done { color: rgba(247, 247, 245, 0.7); }
.ai-command__icon { font-size: 0.8rem; color: var(--cyan); width: 1.2em; text-align: center; }

.ai-ws__feed { display: flex; flex-direction: column; gap: 14px; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.ai-ws__response { display: flex; flex-direction: column; gap: 14px; }
.ai-ws__understanding, .ai-ws__plan-intro { font-size: 0.94rem; color: rgba(247, 247, 245, 0.6); }
.ai-ws__plan-intro { color: var(--white); font-weight: 500; }
.ai-ws__demo-note { font-size: 0.76rem; color: rgba(247, 247, 245, 0.4); font-style: italic; }
.ai-ws__empty { font-size: 0.9rem; color: rgba(247, 247, 245, 0.4); }
.ai-ws__ready { border-top: 1px solid rgba(247, 247, 245, 0.08); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ai-ws__ready p { font-size: 0.94rem; color: rgba(247, 247, 245, 0.75); }
.ai-ws__history { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; border-bottom: 1px solid rgba(247, 247, 245, 0.08); margin-bottom: 4px; }

/* Artifact cards */
.ai-artifact {
  border: 1px solid rgba(87, 230, 224, 0.25);
  border-radius: 16px;
  padding: clamp(16px, 2.4vw, 22px);
  background: linear-gradient(160deg, rgba(87, 230, 224, 0.06), rgba(155, 107, 255, 0.03));
}
.ai-artifact__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-artifact__tag { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; color: var(--black); background: var(--cyan); }
.ai-artifact__tag--design { background: var(--champagne); }
.ai-artifact__tag--ai { background: var(--violet); color: var(--white); }
.ai-artifact__title { font-size: 1rem; font-weight: 600; color: var(--white); }
.ai-artifact__version { font-size: 0.7rem; color: rgba(247, 247, 245, 0.35); }
.ai-artifact__demo { margin-left: auto; font-size: 0.6rem; letter-spacing: 0.14em; color: rgba(247, 247, 245, 0.35); border: 1px solid rgba(247, 247, 245, 0.2); border-radius: 4px; padding: 2px 6px; }
.ai-artifact__body { margin-top: 12px; font-size: 0.9rem; line-height: 1.6; color: rgba(247, 247, 245, 0.75); white-space: pre-line; }

.ai-workflow { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-workflow__node { font-size: 0.76rem; letter-spacing: 0.04em; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(247, 247, 245, 0.18); color: var(--white); }
.ai-workflow__node--trigger { border-color: var(--cyan); }
.ai-workflow__node--condition { border-color: var(--champagne); }
.ai-workflow__node--yes { border-color: #57e68a; }
.ai-workflow__node--no { border-color: var(--orange); }

/* Project rail */
.ai-ws__project { border-top: 1px solid rgba(247, 247, 245, 0.08); padding-top: 14px; }
.ai-ws__project-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ai-ws__project-name { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.ai-ws__new-project { background: none; border: none; color: rgba(247, 247, 245, 0.5); font-size: 0.78rem; cursor: pointer; }
.ai-ws__new-project:hover, .ai-ws__new-project:focus-visible { color: var(--white); }
.ai-ws__project-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.ai-ws__project-item { background: none; border: 1px solid rgba(247, 247, 245, 0.14); border-radius: 999px; padding: 6px 12px; font-size: 0.74rem; color: rgba(247, 247, 245, 0.55); cursor: pointer; }
.ai-ws__project-item.is-active { color: var(--white); border-color: var(--cyan); }

/* ---------- AI Content Systems — pipeline flow (reuses mkt-flow look) ---------- */
.ai-content__pipeline {
  max-width: 1100px;
  margin: clamp(8px, 1vw, 12px) auto 0;
  padding: 0 var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.ai-content__pipeline span { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(247, 247, 245, 0.55); }
.ai-content__pipeline span:nth-child(odd) { color: var(--white); font-weight: 600; }

/* ---------- The OPTOPUS AI System — closing diagram ---------- */
.ai-system__row {
  max-width: 1100px;
  margin: clamp(8px, 1vw, 12px) auto 0;
  padding: 0 var(--container-pad);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ai-system__pill {
  border: 1px solid rgba(247, 247, 245, 0.18);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.75);
}

/* ---------- Final CTA ---------- */
.ai-final { text-align: center; }
.ai-final__inner { max-width: 760px; margin: 0 auto; padding: 0 var(--container-pad); }
.ai-final__eyebrow { font-size: 0.8rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.7; color: var(--cyan); }
.ai-final__headline { margin-top: 18px; font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.ai-final__cta { margin-top: 32px; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .ai-meet__stage { grid-template-columns: 1fr; }
  .ai-core { max-width: 320px; margin: 0 auto; }
  .ai-shift__item { grid-template-columns: 1fr; text-align: left; gap: 6px; }
  .ai-shift__after { text-align: left; }
  .ai-shift__arrow { display: none; }
  .ai-shift__body, .ai-agents__body, .ai-automation__body, .ai-marketing__body,
  .ai-content__body, .ai-bizauto__body, .ai-system__body { max-width: 620px; }
}

@media (max-width: 640px) {
  .ai-hero__title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .ai-shift__headline, .ai-agents__headline, .ai-automation__headline, .ai-marketing__headline,
  .ai-content__headline, .ai-bizauto__headline, .ai-system__headline {
    font-size: clamp(1.9rem, 9vw, 2.4rem);
  }
  .ai-core__node { font-size: 0.56rem; padding: 5px 9px; }
  .ai-ws { min-height: 0; }
  .ai-ws__feed { max-height: 44vh; }
  .ai-option { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-hero__glow { animation: none; }
  .ai-core__orb { animation: none; }
  .ai-meet__core[data-ai-state="thinking"] .ai-core__ring { animation: none; }
}

/* =========================================================
   ABOUT — two screens, editorial and cinematic, not another
   explorable world. Same approved artwork on both screens
   (about-desktop / about-mobile), recomposed the second time
   through position/crop/overlay only — never a second asset.
   ========================================================= */
.about-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--black);
  isolation: isolate;
}
.about-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  will-change: transform;
}
.about-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  display: block;
}
/* Dark enough at the very top for the header, and at the bottom for
   the content block; the logo and earth in the frame's middle third
   stay fully clear the whole time. */
.about-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 4, 6, 0.6) 0%, rgba(4, 4, 6, 0) 16%, rgba(4, 4, 6, 0) 40%, rgba(4, 4, 6, 0.55) 60%, rgba(4, 4, 6, 0.7) 80%, rgba(4, 4, 6, 0.94) 100%);
}
.about-hero__atmosphere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.about-mote {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 210, 164, 0.55) 0%, rgba(232, 210, 164, 0) 70%);
  filter: blur(1px);
  animation: aboutMoteFloat 16s ease-in-out infinite;
}
.about-mote--1 { width: 90px; height: 90px; left: 12%; top: 22%; animation-duration: 18s; }
.about-mote--2 { width: 60px; height: 60px; right: 16%; top: 30%; animation-duration: 14s; animation-delay: -4s; }
.about-mote--3 { width: 46px; height: 46px; left: 22%; top: 62%; animation-duration: 20s; animation-delay: -9s; }
@keyframes aboutMoteFloat {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.5; }
  50% { transform: translate3d(14px, -22px, 0); opacity: 0.9; }
}

.about-hero__content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0 var(--container-pad) clamp(40px, 6vh, 72px);
  text-align: center;
}
.about-hero__content-inner { max-width: 600px; will-change: transform; }
.about-hero__eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 10px;
}
.about-hero__title {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.about-hero__lede {
  margin: 14px auto 0;
  max-width: 44ch;
  font-size: 0.92rem;
  line-height: 1.56;
  color: rgba(247, 247, 245, 0.82);
}
.about-hero__tags {
  margin-top: 16px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.55);
}
.about-hero__cta {
  all: unset;
  cursor: pointer;
  margin-top: 20px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--white);
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.about-hero__cta:hover, .about-hero__cta:focus-visible { opacity: 1; }
.about-hero__cta span { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.about-hero__cta svg { animation: aboutScrollBob 2.2s ease-in-out infinite; }
@keyframes aboutScrollBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------------------------------------------------------
   SCREEN 02 — same artwork, recomposed via crop/position/overlay,
   never a second image
   --------------------------------------------------------- */
.about-approach {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
  padding: clamp(100px, 13vh, 150px) var(--container-pad) clamp(40px, 6vh, 72px);
}
/* Each breakpoint's background-image lives entirely inside its own
   media query (no unconditional base rule) — the same "only one
   resource is ever referenced for a given viewport" guarantee the
   hero's <picture><source media> gets natively, so the browser never
   has a reason to fetch both files on either screen size. */
.about-approach__media {
  position: absolute;
  inset: 0;
  filter: saturate(0.9);
  transform: scale(1.02);
}
@media (min-width: 768px) {
  .about-approach__media { background-image: url('assets/about/about-approach-desktop.webp'); background-size: 130%; background-position: 62% 42%; }
}
@media (max-width: 767px) {
  .about-approach__media { background-image: url('assets/about/about-approach-mobile.webp'); background-size: 145%; background-position: 68% 22%; }
}
.about-approach__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 4, 6, 0.86) 0%, rgba(4, 4, 6, 0.78) 55%, rgba(4, 4, 6, 0.9) 100%);
}
.about-approach__content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; }
.about-approach__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 16px;
}
.about-approach__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.about-approach__body {
  margin: 22px auto 0;
  max-width: 56ch;
  display: grid;
  gap: 14px;
  font-size: 0.98rem;
  line-height: 1.62;
  color: rgba(247, 247, 245, 0.82);
}
.about-approach__emphasis {
  margin: 26px auto 0;
  max-width: 34ch;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--champagne-bright);
  text-transform: uppercase;
  transition-delay: 0.15s;
}
.about-approach__tags {
  margin-top: 18px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.5);
  transition-delay: 0.15s;
}
.about-approach__close {
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: clamp(22px, 3.5vh, 34px);
  border-top: 1px solid rgba(247, 247, 245, 0.14);
  transition-delay: 0.25s;
}
.about-approach__close-title {
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .about-hero__bg { object-position: 74% 28%; }
  .about-hero__content { padding-bottom: clamp(40px, 8vh, 72px); }
  .about-hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .about-hero__lede { font-size: 0.94rem; }
  .about-approach { padding-top: clamp(96px, 14vh, 140px); }
}

@media (prefers-reduced-motion: reduce) {
  .about-mote { animation: none; opacity: 0.5; }
  .about-hero__cta svg { animation: none; }
  .about-hero__media, .about-hero__content-inner { transform: none !important; filter: none !important; }
}

/* =========================================================
   CONTACT — real photography hero, contact info, and an
   inline "Start a Project" form on the page itself. The
   shared modal stays too (unchanged, untouched) purely so the
   header's own "Let's Talk" / mobile "Start a Project"
   buttons keep working exactly as on every other page.
   ========================================================= */
.contact-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--header-h) + 40px) var(--container-pad) 80px;
  background: var(--black);
}
.contact-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.contact-hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: 56% 42%; display: block; }
.contact-hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 4, 6, 0.78) 0%, rgba(4, 4, 6, 0.32) 32%, rgba(4, 4, 6, 0.4) 58%, rgba(4, 4, 6, 0.9) 100%);
}
.contact-hero__inner { position: relative; z-index: 1; max-width: 620px; }
.contact-hero__kicker {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 18px;
}
.contact-hero__title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.contact-hero__lede {
  margin: 22px auto 0;
  max-width: 48ch;
  font-size: 1.06rem;
  line-height: 1.6;
  color: rgba(247, 247, 245, 0.82);
}
.contact-hero__cta { margin-top: 36px; }

@media (max-width: 767px) {
  .contact-hero__bg { object-position: 58% 28%; }
}

/* ---------------------------------------------------------
   Contact World — the closing experience. The contact-world.webp
   photograph is shown in FULL at its own natural aspect ratio
   (1215:1295) — width:100%, height:auto, no object-fit:cover, no
   cropping, no transform that could cut it. The section's height is
   whatever that implies at the current viewport width; nothing here
   forces 100vh or clips the image. Every interactive element is an
   absolutely-positioned overlay whose top/left are plain percentages
   of the image's own box, read directly off the photo (the egg, the
   central sphere+ring, the two right-side spheres). Because the
   image is never cropped, those percentages are correct at EVERY
   breakpoint — desktop, tablet and mobile share the exact same
   coordinates, unlike a cover-fit background where crop direction
   flips between wide and tall viewports. Only present on /contact;
   every selector below is scoped under .contact-world, so this is a
   no-op everywhere else. Real links only (mailto:info@optopus.space,
   the two real social URLs already used in the footer) — no second
   contact system, no invented URLs, no second logo/sphere/platform
   drawn over the photo's own; every .contact-world__spot below is
   transparent at rest (all: unset) — icon + text + a hover-only glow,
   nothing else, because the physical "object" look is the photograph.
   --------------------------------------------------------- */
.contact-world {
  position: relative;
  background: var(--black);
  padding-top: calc(var(--header-h) + 32px);
  text-align: center;
}
.contact-world__frame {
  position: relative;
  width: 100%;
  line-height: 0;
  container-type: inline-size;
}
.contact-world__bg {
  display: block;
  width: 100%;
  height: auto;
}
.contact-world__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(4, 4, 6, 0.34) 0%,
    rgba(4, 4, 6, 0.08) 18%,
    rgba(4, 4, 6, 0.06) 40%,
    rgba(4, 4, 6, 0.16) 60%,
    rgba(4, 4, 6, 0.4) 100%
  );
}

.contact-world__side {
  position: absolute;
  top: 46%;
  z-index: 1;
  transform: translateY(-50%);
  margin: 0;
  font-size: clamp(0.42rem, 0.85vw, 0.6rem);
  line-height: 2.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.34);
  pointer-events: none;
}
.contact-world__side--left { left: clamp(10px, 2.2vw, 40px); text-align: left; }
.contact-world__side--right { right: clamp(10px, 2.2vw, 40px); text-align: right; }

.contact-world__overlay { position: absolute; inset: 0; z-index: 1; }

/* Message — sits in the open sky/mountain band between the bottom of
   the hanging logo (~ image-y 32%) and the top of the central sphere
   (~ image-y 55%), so it never covers either. */
.contact-world__message {
  position: absolute;
  left: 50%;
  top: 39%;
  transform: translate(-50%, -50%);
  width: min(80%, 640px);
}
.contact-world__kicker {
  margin: 0 0 0.6em;
  font-size: clamp(0.5rem, 1.3vw, 0.8rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.contact-world__headline {
  margin: 0;
  font-size: clamp(1.15rem, 4.2vw, 3.4rem);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
}
.contact-world__sub {
  margin: 0.8em auto 0;
  max-width: 40ch;
  font-size: clamp(0.56rem, 1.35vw, 0.95rem);
  line-height: 1.5;
  color: rgba(247, 247, 245, 0.85);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.contact-world__spot {
  all: unset;
  position: absolute;
  cursor: pointer;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  transition: transform 0.4s var(--ease-out);
}
.contact-world__spot::before {
  content: "";
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 210, 164, 0.32) 0%, rgba(232, 210, 164, 0) 72%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-soft);
  z-index: -1;
}
.contact-world__spot:hover, .contact-world__spot:focus-visible { transform: translate(-50%, -50%) scale(1.07); }
.contact-world__spot:hover::before, .contact-world__spot:focus-visible::before { opacity: 1; }
.contact-world__spot:focus-visible { outline: 2px solid var(--champagne-bright); outline-offset: 6px; border-radius: 50%; }
.contact-world__spot-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
}
.contact-world__spot-icon svg { width: clamp(11px, 1.6vw, 20px); height: clamp(11px, 1.6vw, 20px); }
.contact-world__spot-label {
  font-size: clamp(0.4rem, 1.05vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}
.contact-world__spot-value {
  font-size: clamp(0.38rem, 0.95vw, 0.85rem);
  color: rgba(247, 247, 245, 0.88);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/* Email — the glass egg, left side (centre of its silhouette read off
   the photo: ~19.8% / 64.7% of the image box). Icon, EMAIL and the
   address stack vertically and centred. line-height is restored here
   only: .contact-world__frame sets line-height:0 (to kill the inline
   image gap), which every descendant inherits — with two text lines
   stacked that collapsed them onto each other. Sizes use container
   query units (cqw = 1% of the image's own width, see
   container-type on .contact-world__frame), so the block scales with
   the picture at any width; the vw declaration first is the fallback
   for engines without container units. */
.contact-world__spot--email {
  left: 19.8%;
  top: 64.7%;
  flex-direction: column;
  gap: 0.5em;
  line-height: 1.25;
}
.contact-world__spot--email .contact-world__spot-icon {
  font-size: clamp(0.95rem, 2.6vw, 2.9rem);
  font-size: clamp(0.95rem, 2.6cqw, 2.9rem);
}
.contact-world__spot--email .contact-world__spot-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25em;
  text-align: center;
}
.contact-world__spot--email .contact-world__spot-label {
  line-height: 1.25;
  font-size: clamp(0.55rem, 1.3vw, 1.7rem);
  font-size: clamp(0.55rem, 1.3cqw, 1.7rem);
  font-weight: 600;
}
.contact-world__spot--email .contact-world__spot-value {
  line-height: 1.25;
  font-size: clamp(0.52rem, 1.15vw, 1.55rem);
  font-size: clamp(0.52rem, 1.15cqw, 1.55rem);
}

/* Start a Project — the central sphere + glowing ring. Text only,
   centered on the ring; no drawn circle competes with the real one. */
.contact-world__spot--cta { left: 50%; top: 60.5%; line-height: 1.25; padding: 0.9em 1.6em; }
.contact-world__spot--cta .contact-world__spot-label { font-size: clamp(0.44rem, 1.3vw, 1.05rem); font-weight: 600; }

/* Instagram / Facebook — the two smaller spheres on the right, icon
   stacked above label to match their round silhouette. */
.contact-world__spot--instagram,
.contact-world__spot--facebook { flex-direction: column; gap: 0.35em; }
.contact-world__spot--instagram { left: 75.5%; top: 66.5%; }
.contact-world__spot--facebook { left: 91%; top: 68.5%; }
.contact-world__spot--instagram .contact-world__spot-icon,
.contact-world__spot--facebook .contact-world__spot-icon { font-size: clamp(0.55rem, 1.5vw, 1.3rem); }

.contact-world__tagline {
  position: absolute;
  left: 50%;
  top: 83%;
  transform: translate(-50%, -50%);
  margin: 0;
  width: 100%;
  font-size: clamp(0.36rem, 0.85vw, 0.64rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.5);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

@media (max-width: 1080px) {
  .contact-world__side { display: none; }
}
/* Tablet / small-laptop widths: the headline block is centred on 39% of the
   picture, but its text does not shrink in step with the picture down here, so
   the small "LET'S TALK" line rode up onto the bottom of the hanging logo. The
   whole block sits a little lower (the open sky band above the sphere has the
   room); wider screens keep the original position. On phones the same block
   sits just under the logo with a smaller shift, because the start-a-project
   sphere is closer below. */
@media (min-width: 641px) and (max-width: 1600px) {
  .contact-world__message { top: 43%; }
}
@media (max-width: 640px) {
  .contact-world__message { top: 43.5%; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-world__spot { transition: none; }
}

/* ---------------------------------------------------------
   Inline "Start a Project" form — reuses the same
   .project-modal__eyebrow/__title, .project-form* and
   .project-modal__success-copy classes the shared modal
   already uses, so it's visually and structurally the same
   form, just placed directly on the page instead of behind
   a click.
   --------------------------------------------------------- */
.contact-form-section {
  padding: clamp(64px, 8vh, 100px) var(--container-pad) clamp(100px, 12vh, 140px);
  background: var(--charcoal);
}
.contact-form-section__inner { max-width: 700px; margin: 0 auto; }
.contact-form-section [data-contact-state="error"] .project-modal__eyebrow { color: rgba(255, 255, 255, 0.6); }
.contact-form-section [data-contact-state="error"] a { color: var(--champagne-bright); }

/* ---------------------------------------------------------
   Legal pages (Privacy / Cookies / Terms) — plain, readable content,
   no new visual language: same body background/type the whole site
   already uses, just a comfortable reading measure and spacing.
   --------------------------------------------------------- */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 120px) var(--container-pad) clamp(100px, 12vh, 140px);
}
.legal-page__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 14px;
}
.legal-page__title { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.15; margin-bottom: 10px; }
.legal-page__updated { color: rgba(247, 247, 245, 0.5); font-size: 0.85rem; margin-bottom: 48px; }
.legal-page__section { margin-bottom: 36px; }
.legal-page__section h2 { font-size: 1.15rem; margin-bottom: 12px; }
.legal-page__section p,
.legal-page__section li { color: rgba(247, 247, 245, 0.78); line-height: 1.7; font-size: 0.95rem; }
.legal-page__section ul { padding-left: 20px; margin: 12px 0; }
.legal-page__section p + p, .legal-page__section ul + p { margin-top: 12px; }
.legal-page__section ol { list-style: decimal; padding-left: 22px; margin: 12px 0; }
.legal-page__section ul { list-style: disc; }
.legal-page__section li::marker { color: rgba(232, 210, 164, 0.7); }
.legal-page h2[id] { scroll-margin-top: calc(var(--header-h) + 20px); }
.legal-page__toc {
  margin: 0 0 48px;
  padding: 24px 26px 18px;
  border: 1px solid rgba(247, 247, 245, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}
.legal-page__toc h2 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); margin: 0 0 16px; font-weight: 500; }
.legal-page__toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 36px; }
.legal-page__toc li { break-inside: avoid; margin: 0 0 9px; font-size: 0.88rem; line-height: 1.4; }
.legal-page__toc a { color: rgba(247, 247, 245, 0.72); text-decoration: none; transition: color 0.2s var(--ease-soft); }
.legal-page__toc a:hover, .legal-page__toc a:focus-visible { color: var(--champagne-bright); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .legal-page__toc ol { columns: 1; } .legal-page__toc { padding: 20px 18px 12px; } }
.legal-page__section code { font-size: 0.88em; padding: 1px 6px; border-radius: 4px; background: rgba(247, 247, 245, 0.08); }
.legal-page__section li { margin-bottom: 6px; }
.legal-page__section a { color: var(--champagne-bright); text-decoration: underline; text-underline-offset: 3px; }
.legal-page__table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.88rem; }
.legal-page__table th, .legal-page__table td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid rgba(247, 247, 245, 0.1); color: rgba(247, 247, 245, 0.78); vertical-align: top; }
.legal-page__table th { color: var(--white); font-weight: 600; }
/* Four columns don't fit a phone: let the table itself scroll sideways
   instead of pushing the whole page wider than the viewport. */
@media (max-width: 640px) {
  .legal-page__table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.legal-page__pending {
  background: rgba(232, 210, 164, 0.08);
  border: 1px solid rgba(232, 210, 164, 0.25);
  border-radius: 14px;
  padding: 20px 22px;
  color: rgba(247, 247, 245, 0.85);
  font-size: 0.92rem;
  line-height: 1.6;
}