/* ==========================================================================
   DZNEXPERTS — layout & component styles
   ========================================================================== */

/* ---- Shared "EST 2019 / SECTION LABEL" topbar ----
   Same bordered strip used at the top of Process, Testimonials, FAQ,
   Pricing, and Locations. Kept as one shared rule so the border style and
   spacing stay identical everywhere; each section only overrides the
   border/text color to match its own background (white line on dark
   sections, dark line on light sections — set alongside each section's
   own rules further down this file). */
.process__topbar, .testimonials__topbar, .faq__topbar, .pricing__topbar, .locations__topbar, .blog-teaser__topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 50px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  margin-bottom: var(--space-6);
  font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ---- Utilities ---- */
.eyebrow {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-pink);
  margin-bottom: var(--space-2);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--color-ink);
  color: var(--color-white);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.button--pill { border-radius: 999px; }
.button:hover { background: var(--color-accent-pink); transform: translateY(-2px); }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.skip-link:focus {
  position: fixed; top: var(--space-2); left: var(--space-2);
  width: auto; height: auto; padding: var(--space-2) var(--space-3);
  background: var(--color-ink); color: var(--color-white); z-index: 999;
}

[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Header ---- */
body { background: var(--color-page-lavender); }
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  opacity: 0; transform: translateY(-20px);
  animation: dzn-header-in 0.7s var(--ease-premium) 0.15s forwards;
}
@keyframes dzn-header-in { to { opacity: 1; transform: none; } }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-4);
}
.site-header__logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-ink); color: var(--color-white);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}
.site-header__nav { display: flex; }
.site-header__menu {
  display: flex; align-items: center; gap: var(--space-1, 4px);
  list-style: none; margin: 0; padding: 6px;
  border-radius: 999px;
  background: var(--color-plum-900);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    0 5px 6px rgba(0, 0, 0, 0.1),
    0 24px 20px rgba(0, 0, 0, 0.12),
    0 3px 0 rgba(245, 245, 245, 0.9);
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.site-header__menu a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 20px; border-radius: 999px; color: rgba(255, 255, 255, 0.85);
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.site-header__menu a:hover { color: var(--color-white); }
.site-header__menu li.current-menu-item > a,
.site-header__menu li.current_page_item > a {
  background: var(--color-plum-800);
  color: var(--color-white);
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.25), 0 2px 0 rgba(0, 0, 0, 0.5);
}
.site-header__menu li.current-menu-item > a::before,
.site-header__menu li.current_page_item > a::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-pink); flex-shrink: 0;
}

/* Rolling text hover: two stacked labels, mask via overflow hidden. */
.roll-text { display: inline-block; overflow: hidden; position: relative; height: 1.2em; vertical-align: top; }
.roll-text__stack { display: block; transition: transform 0.3s var(--ease-premium); }
.roll-text__stack span { display: block; line-height: 1.2em; }
.roll-text:hover .roll-text__stack, .roll-text:focus-visible .roll-text__stack { transform: translateY(-1.2em); }

.site-header__cta.button {
  background: var(--color-accent-pink); border-radius: 999px; padding: 15px;
  transition: transform 0.25s ease;
}
.site-header__cta:hover { transform: translateY(-2px); }
.site-header__toggle { display: none; position: relative; width: 26px; height: 18px; background: none; border: 0; cursor: pointer; padding: 0; }
.site-header__toggle-bar,
.site-header__toggle-bar::before,
.site-header__toggle-bar::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--color-ink);
  transition: transform var(--dur-hover) ease, opacity var(--dur-hover) ease, top var(--dur-hover) ease;
}
.site-header__toggle-bar { top: 50%; transform: translateY(-50%); }
.site-header__toggle-bar::before { top: -8px; }
.site-header__toggle-bar::after { top: 8px; }
body.nav-open .site-header__toggle-bar { background: transparent; }
body.nav-open .site-header__toggle-bar::before { top: 0; transform: rotate(45deg); }
body.nav-open .site-header__toggle-bar::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 809.98px) {
  .site-header__nav { display: none; }
  body.nav-open .site-header__nav {
    display: block; position: fixed; inset: 0; top: 64px; z-index: 99;
    background: var(--color-white); padding: var(--space-4);
  }
  body.nav-open .site-header__menu { flex-direction: column; align-items: stretch; gap: var(--space-2); background: none; padding: 0; font-size: 1.1rem; }
  body.nav-open .site-header__menu a { color: var(--color-ink); }
  /* The active item keeps its dark plum pill background (unaffected by the
     rule above) — its text needs to stay white, not the black used for the
     rest of the stacked list, or it becomes unreadable. */
  body.nav-open .site-header__menu li.current-menu-item > a,
  body.nav-open .site-header__menu li.current_page_item > a { color: var(--color-white); }
  .site-header__toggle { display: block; }
  .site-header__inner { gap: var(--space-2); }
}
@media (max-width: 400px) {
  /* Logo + CTA pill + toggle is razor-tight on the smallest phones —
     drop the CTA's label so it doesn't force the row to wrap/overflow. */
  .site-header__cta .hero__dot { display: none; }
  .site-header__cta { padding: 10px; }
  .site-header__cta-label { display: none; }
}

/* ---- Hero ---- */
body.home { background: var(--color-page-lavender, #f2e9ee); }
.hero {
  position: relative;
  overflow: hidden;
  /* Mirrors .container's content box exactly (same clamp-based inset,
     same 1920px cap) so the hero card's edges line up with the header. */
  width: calc(100% - 2 * var(--container-pad));
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  margin-inline: auto;
  margin-block: var(--space-4);
  min-height: 780px;
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  background: radial-gradient(60% 55% at 32% 45%, #7a1250 0%, #3a0a26 42%, #0c0609 78%) , #0a070a;
  color: var(--color-white);
  cursor: none;
}
.hero__glow {
  position: absolute; top: 50%; left: 30%;
  width: 480px; height: 480px; margin: -240px 0 0 -240px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent-pink) 90%, white) 0%, color-mix(in srgb, var(--color-accent-pink) 55%, transparent) 45%, transparent 72%);
  filter: blur(4px);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

.hero__badge-top, .hero__availability { position: absolute; z-index: 2; }
.hero__badge-top {
  top: var(--space-4); left: var(--space-4);
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.3);
  color: var(--color-white);
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600;
}
.hero__badge-top svg { color: var(--color-accent-pink); }
.hero__availability {
  top: var(--space-4); right: var(--space-4); text-align: right;
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; line-height: 1.5;
}
.hero__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-green); }
.hero__availability .hero__dot {
  box-shadow: 0 0 4px 1px var(--color-accent-green), 0 0 12px 4px color-mix(in srgb, var(--color-accent-green) 65%, transparent);
}
.hero__badge-top .hero__dot, .hero__badge-top svg { color: var(--color-accent-pink); }

.hero__kicker {
  /* Centered on the same 30%/32%-from-left anchor as .hero's own background
     gradient and .hero__glow, not on the hero card's full width — otherwise
     the text optically sits right of the glow instead of on top of it. */
  position: absolute; z-index: 2; top: 50%; left: 30%;
  transform: translate(-50%, -50%);
  width: max-content; max-width: 80%;
  overflow: visible;
  text-align: center;
  padding-block: 0.2em;
}
.hero__kicker-text {
  display: block;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.25rem); color: var(--color-white); line-height: 1.4;
  transition: transform 0.45s var(--ease-premium), opacity 0.45s var(--ease-premium);
}

.hero__headline {
  position: relative;
  z-index: 2;
  margin-top: 20vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  align-content: flex-end;
}
.hero__heading {
  text-align: right; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.75rem, 7vw, 5.5rem); line-height: 0.92; letter-spacing: -0.02em;
}
.hero__heading-line { display: block; }
.hero__heading sup { font-size: 0.32em; font-weight: 600; margin-left: 4px; vertical-align: super; }

.hero__about { margin-top: var(--space-4); text-align: left; max-width: 340px; display: flex; flex-direction: column; align-items: flex-start; align-self: flex-end; }
.hero__about-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-white); }
.hero__about-eyebrow .hero__dot { background: var(--color-white); box-shadow: none; }
.hero__tagline { margin-top: var(--space-2); color: var(--color-white); font-size: 0.95rem; line-height: 1.5; }
.hero__cta {
  margin-top: var(--space-3); background: var(--color-white); color: var(--color-ink);
  padding: 15px; gap: var(--space-2); align-self: flex-end;
}
.hero__cta .hero__dot { background: var(--color-accent-pink); }
.hero__cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--color-ink); color: var(--color-white);
  margin-left: var(--space-2); transition: transform var(--dur-hover) var(--ease-premium);
}
.hero__cta:hover .hero__cta-arrow,
.site-header__cta:hover .hero__cta-arrow { transform: translate(3px, -3px); }
.site-header__cta { display: inline-flex; align-items: center; gap: var(--space-2); }
.site-header__cta .hero__dot { background: var(--color-white); }
.site-header__cta .hero__cta-arrow { background: var(--color-white); color: var(--color-ink); }

.hero__featured {
  position: absolute; left: var(--space-4); bottom: var(--space-5); z-index: 2;
  display: block; width: 440px; padding: var(--space-4);
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-md);
  border: 1px solid var(--overlay-white-10);
}
.hero__featured-head { display: flex; align-items: flex-start; justify-content: space-between; font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--overlay-white-30); }
.hero__featured-year { background: var(--color-white); color: var(--color-ink); border-radius: 999px; padding: 3px 10px; }
.hero__featured-title { display: block; margin-top: var(--space-2); font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; }
.hero__featured-media { display: block; margin-top: var(--space-3); border-radius: var(--radius-sm); overflow: hidden; }
.hero__featured-media img { aspect-ratio: 4/3; object-fit: cover; display: block; transition: opacity 0.3s ease; }
.hero__featured-bar { display: block; margin-top: var(--space-3); height: 4px; border-radius: 999px; background: var(--overlay-white-10); overflow: hidden; }
.hero__featured-bar span { display: block; width: 0%; height: 100%; background: var(--color-white); animation: dzn-progress 4.5s linear infinite; }
@keyframes dzn-progress { from { width: 0%; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .hero__featured-bar span { animation: none; width: 55%; } }

/* Mouse-follow "blob" cursor inside the hero: big, clean-edged, organically
   morphing, opaque flat fill — no glow/blur/blend halo. */
.hero-blob-cursor {
  position: fixed; top: 0; left: 0; z-index: 998;
  width: 220px; height: 220px; margin: -110px 0 0 -110px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-accent-pink) 95%, white) 0%,
    var(--color-accent-pink) 35%,
    color-mix(in srgb, var(--color-accent-pink) 40%, transparent) 62%,
    transparent 78%);
  border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%;
  filter: blur(6px);
  opacity: 0; transform: translate(-200px, -200px) scale(0.4);
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.hero-blob-cursor.is-active { opacity: 1; animation: dzn-blob-morph 5s ease-in-out infinite; }
@keyframes dzn-blob-morph {
  0%, 100% { border-radius: 42% 58% 65% 35% / 45% 45% 55% 55%; }
  25%      { border-radius: 58% 42% 35% 65% / 55% 62% 38% 45%; }
  50%      { border-radius: 50% 50% 62% 38% / 38% 55% 45% 62%; }
  75%      { border-radius: 38% 62% 45% 55% / 62% 38% 62% 38%; }
}
@media (hover: none), (pointer: coarse) { .hero { cursor: auto; } .hero-blob-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-blob-cursor.is-active { animation: none; } }

@media (max-width: 809.98px) {
  .hero { min-height: 0; padding: var(--space-4); cursor: auto; }
  .hero__badge-top, .hero__availability { position: static; display: inline-flex; margin-bottom: var(--space-3); }
  .hero__availability { text-align: left; display: block; }
  .hero__glow { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
  .hero__kicker { position: static; transform: none; text-align: left; width: auto; max-width: none; margin: var(--space-5) 0; }
  .hero__headline { align-items: flex-start; }
  .hero__heading { text-align: left; }
  .hero__about { align-self: flex-start; }
  .hero__cta { align-self: flex-start; }
  .hero__featured { position: static; width: 100%; margin-top: var(--space-5); }
}

/* ---- Brand wordmark + info ticker ---- */
.brand-banner { padding-top: var(--space-6); }
.brand-banner__wordmark {
  display: block; text-align: center;
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(3rem, 11vw, 9.5rem); line-height: 0.9; letter-spacing: -0.02em;
  color: var(--color-ink);
}
a.brand-banner__wordmark { transition: color var(--dur-hover) ease; }
a.brand-banner__wordmark:hover { color: var(--color-accent-pink); }

.brand-banner__ticker { margin-top: var(--space-6); border-top: 1px solid rgba(17,17,17,0.2); border-bottom: 1px solid rgba(17,17,17,0.2); }
.brand-banner__ticker-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 50px; }
.brand-banner__item { font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-ink); }
.brand-banner__item strong { color: var(--color-gray-500); font-weight: 700; }
.brand-banner__item--center { display: inline-flex; align-items: center; gap: var(--space-2); }
.brand-banner__dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--color-ink); color: var(--color-white);
  font-style: normal; font-size: 0.65rem;
}

@media (max-width: 809.98px) {
  .brand-banner__ticker-inner { flex-wrap: wrap; gap: var(--space-2); justify-content: center; text-align: center; }
}

/* ---- Intro badge + two-tone heading ---- */
.intro { padding-block: var(--space-6) var(--space-5); }
.intro__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px 18px; border-radius: 999px; background: var(--color-white);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--color-ink);
}
.intro__badge svg { color: var(--color-ink); }
.intro__heading {
  margin-top: var(--space-4);
  font-family: var(--font-display); font-weight: 700; text-transform: none;
  font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 0.98;
}
.intro__heading-line { display: block; color: var(--color-ink); }
.intro__heading-line--accent { color: var(--color-accent-pink); }

/* ---- Services sticky stack ----
   The black card mirrors .hero's exact box model (same clamp-based inset,
   same 1920px cap, same rounded corners) so left/right spacing and the
   "floating card on the page background" look stay consistent site-wide. */
.services-stack__pin { padding-block: var(--space-6); }
.services-stack__inner {
  width: calc(100% - 2 * var(--container-pad));
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  margin-inline: auto;
  background: var(--color-ink);
  border-radius: 40px;
  padding: var(--space-6) var(--space-7);
  display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: var(--space-6);
  align-items: center;
}
.services-stack__media { position: relative; }
.services-stack__card { position: relative; border-radius: 28px; overflow: hidden; }
.services-stack__card img { aspect-ratio: 4/3; object-fit: cover; border-radius: 64px; }
.services-stack__tags {
  position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 2;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.services-stack__tags span {
  padding: 14px 14px; border-radius: 999px;
  background: color-mix(in srgb, #000 45%, transparent);
  backdrop-filter: blur(6px);
  color: var(--color-white); font-family: var(--font-ui); font-size: 1rem; font-weight: 400;
}
.services-stack__view {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  color: var(--color-ink); font-size: 1.1rem;
  transition: background-color var(--dur-hover) ease, transform var(--dur-hover) var(--ease-premium);
}
.services-stack__card:hover .services-stack__view { background: var(--color-white); transform: scale(1.08); }
.services-stack__text { color: var(--color-white); }
.services-stack__number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--color-ink-2);
  font-family: var(--font-display); font-size: 0.9rem; margin-bottom: var(--space-4);
}
.services-stack__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1.05; }
.services-stack__rule { position: relative; margin-block: var(--space-4); height: 1px; background: var(--overlay-white-10); }
.services-stack__rule i { position: absolute; right: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--color-accent-pink); }
.services-stack__desc { color: var(--overlay-white-30); max-width: 46ch; }
.services-stack__link { margin-top: var(--space-4); background: var(--color-white); color: var(--color-ink); padding: 15px; gap: var(--space-2); }
.services-stack__link .hero__dot { background: var(--color-accent-pink); }
.services-stack__link:hover .hero__cta-arrow { transform: translate(3px, -3px); }

/* Default (no-JS / mobile / reduced-motion): plain readable stacked list. */
.services-stack__media { display: flex; flex-direction: column; gap: var(--space-6); }
.services-stack__text { display: flex; flex-direction: column; gap: var(--space-6); }

/* Mobile-only interleaved rendering for the sticky (homepage) variant.
   The desktop split (.services-stack__media column, .services-stack__text
   column) shows every image and then every caption once the grid drops to
   a single column below 1024px — so below that width we swap to a
   dedicated image+text-per-card list instead, hiding the split columns. */
.services-stack__desktop { display: contents; }
.services-stack__mobile-list { display: none; }
.services-stack__mobile-list .services-stack__row { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }
.services-stack__mobile-list .services-stack__row:last-child { margin-bottom: 0; }

/* Plain (non-sticky, e.g. Studio page) variant — white card, one aligned
   row per service instead of homepage's black pinned/overlapping stack. */
.services-stack__inner--plain {
  background: var(--color-white);
  display: flex; flex-direction: column; gap: var(--space-7);
}
.services-stack__inner--plain .services-stack__row {
  display: grid; grid-template-columns: minmax(0, 480px) 1fr; gap: var(--space-6);
  align-items: center;
  width: 100%;
}
.services-stack__inner--plain .services-stack__media,
.services-stack__inner--plain .services-stack__text { display: block; }
.services-stack__inner--plain .services-stack__text { color: var(--color-ink); }
.services-stack__inner--plain .services-stack__number { background: var(--color-accent-pink); color: var(--color-white); }
.services-stack__inner--plain .services-stack__title { color: var(--color-ink); }
.services-stack__inner--plain .services-stack__rule { background: var(--color-gray-200); }
.services-stack__inner--plain .services-stack__desc { color: var(--color-gray-500); }
.services-stack__inner--plain .services-stack__link { background: var(--color-accent-pink); color: var(--color-white); }
.services-stack__inner--plain .services-stack__link .hero__dot { background: var(--color-white); }
.services-stack__inner--plain .services-stack__link .hero__cta-arrow { background: var(--color-white); color: var(--color-ink); }
@media (max-width: 809.98px) {
  .services-stack__inner--plain .services-stack__row { grid-template-columns: 1fr; }
}
.services-stack__panel { opacity: 1; }

/* JS-gated: pinned, scroll-scrubbed card stack — the pin fills the full
   100vh viewport (edge-to-edge like the hero card), not a shorter box
   centered inside it. Scroll range covers (count - 1) transitions, not
   count — there's no card to transition *to* after the last one, so
   sizing for a full extra segment there just left a dead pinned stretch. */
.has-services-stack .services-stack { position: relative; height: calc(100vh + (var(--stack-count, 6) - 1) * 85vh); }
.has-services-stack .services-stack__pin { position: sticky; top: 0; height: 100vh; padding-block: 0; }
.has-services-stack .services-stack__inner {
  height: calc(100vh - 2 * var(--space-4));
  margin-block: var(--space-4);
  align-content: center;
}
.has-services-stack .services-stack__media { display: block; position: relative; height: min(560px, 60vh); overflow: hidden; }
.has-services-stack .services-stack__card {
  position: absolute; inset: 0;
  will-change: transform;
  padding-top: 100px;
  border-radius: 48px;
}
.has-services-stack .services-stack__card img { width: 100%; height: 100%; }
.has-services-stack .services-stack__text { display: block; position: relative; min-height: 320px; }
.has-services-stack .services-stack__panel {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-premium);
}
.has-services-stack .services-stack__panel.is-active { opacity: 1; pointer-events: auto; }

@media (max-width: 1023.98px) {
  .services-stack__inner { grid-template-columns: 1fr; padding: var(--space-5) var(--space-4); }
  .has-services-stack .services-stack { height: auto; }
  .has-services-stack .services-stack__pin { position: static; height: auto; }
  .has-services-stack .services-stack__media { display: flex; flex-direction: column; height: auto; overflow: visible; }
  .has-services-stack .services-stack__card { position: relative; inset: auto; transform: none !important; opacity: 1 !important; }
  .has-services-stack .services-stack__text { display: flex; flex-direction: column; min-height: 0; }
  .has-services-stack .services-stack__panel { position: relative; inset: auto; opacity: 1; pointer-events: auto; }
  .services-stack__desktop { display: none; }
  .services-stack__mobile-list { display: flex; flex-direction: column; }
}

/* ---- Brand marquee (continuous ticker with inline image) ---- */
.brand-marquee { padding-block: var(--space-6); overflow: hidden; background: var(--color-white); }
.brand-marquee__track {
  display: inline-flex; align-items: center; gap: var(--space-5);
  font-family: var(--font-display); font-weight: 500; text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 4.5rem); line-height: 1; color: var(--color-plum-900);
  white-space: nowrap;
  animation-duration: 32s;
}
.brand-marquee__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent-pink); flex-shrink: 0; }
.brand-marquee__media { display: inline-flex; flex-shrink: 0; }
.brand-marquee__media img {
  width: 96px; height: 56px; object-fit: cover; border-radius: 999px;
  border: 1px solid var(--overlay-black-10);
}

/* ---- Services grid ---- */
.services { padding-block: var(--space-6); }
.services__grid, .services__grid.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.services__card { padding: var(--space-5); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); position: relative; }
.services__number { font-family: var(--font-display); font-size: 0.9rem; color: var(--color-gray-500); }
.services__card h3, .services__card h2 { font-family: var(--font-heading); font-size: 1.5rem; margin-top: var(--space-2); }
.services__link { display: inline-block; margin-top: var(--space-3); font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid currentColor; }

/* ---- Client logos marquee ----
   Edge fade via mask-image (12.5%/87.5% stops) and pill sizing/colors are
   pulled directly from the live Framer source's inline styles. */
.client-logos {
  padding-block: var(--space-6);
  background: var(--color-white);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12.5%, black 87.5%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 12.5%, black 87.5%, transparent 100%);
}
.client-logos__track { gap: 12px; animation-duration: 36s; }
.client-logos__pill {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 220px; height: 92px; padding: var(--space-4);
  border-radius: 200px;
  background: rgb(42, 42, 42);
  border: 1px solid rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(16px);
}
.client-logos__pill img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

@media (max-width: 809.98px) {
  .client-logos__pill { width: 160px; height: 68px; padding: var(--space-3); }
}

/* ---- Impact stats slider ----
   --color-impact-accent is the exact rgb(249,69,45) pulled from the live
   Framer source for this component. It's a different, more coral-red hue
   than the site's main --color-accent-pink — scoped to this component only
   since we haven't confirmed a sitewide rebrand is wanted. */
.impact {
  --color-impact-accent: #f9452d;
  padding-block: var(--space-7);
  background-color: var(--color-page-lavender);
  background-image: url('../images/impact-worldmap.png');
  background-repeat: no-repeat;
  background-position: center 60%;
  background-size: min(1440px, 150%) auto;
}
.impact__inner { display: flex; align-items: center; justify-content: center; gap: var(--space-5); }
.impact__nav {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 40px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--color-impact-accent); color: var(--color-white); font-size: 1.1rem;
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--color-impact-accent) 60%, transparent), inset 0 2px 2px rgba(255, 255, 255, 0.3);
  transition: transform var(--dur-hover) var(--ease-premium), background-color var(--dur-hover) ease;
}
.impact__nav:hover { background: var(--color-ink); transform: scale(1.05); }

.impact__card-wrap { position: relative; width: min(640px, 90vw); }
.impact__card-shadow {
  position: absolute; inset: var(--space-4) calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4);
  background: #d3d3d3;
  border-radius: 40px;
  transform: rotate(5deg);
  z-index: 0;
}
.impact__card {
  position: relative; z-index: 1;
  background: var(--color-black);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 40px;
  padding: var(--space-5);
  min-height: 420px;
  color: var(--color-white);
  box-shadow: 0 12px 80px rgba(0, 0, 0, 0.25), inset 0 3px 6px rgba(255, 255, 255, 0.15);
}
.impact__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 16px 6px 6px; border-radius: 999px;
  background: rgba(249, 249, 249, 0.1);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.15);
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600;
}
.impact__badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-white); color: var(--color-impact-accent);
  font-style: normal; font-size: 0.75rem;
  box-shadow: inset -2px -3px 5px rgba(255, 255, 255, 0.25);
}

.impact__slide { display: none; }
.impact__slide.is-active { display: block; }
.impact__number {
  display: block; margin-top: var(--space-5);
  font-family: 'Zalando Sans Expanded', var(--font-display); font-weight: 600; color: var(--color-impact-accent);
  font-size: clamp(3.5rem, 10vw, 7.5rem); line-height: 0.85; letter-spacing: -0.04em;
}
.impact__desc {
  margin-top: var(--space-5); max-width: 34ch;
  font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; line-height: 1.4;
  color: rgba(255, 255, 255, 0.6);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
}
.impact__slide.is-active .impact__desc { opacity: 1; transform: none; }
.impact__images { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }
.impact__image {
  display: block; width: 80px; height: 80px; border-radius: var(--radius-md); overflow: hidden;
  transform: translateX(24px); opacity: 0;
  transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
}
.impact__slide.is-active .impact__image { transform: none; opacity: 1; }
.impact__slide.is-active .impact__image:nth-child(2) { transition-delay: 0.08s; }
.impact__image img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 809.98px) {
  .impact__inner { gap: var(--space-3); }
  .impact__nav { width: 44px; height: 36px; flex-shrink: 0; }
  .impact__card { padding: var(--space-4); min-height: 0; }
  /* min(640px,90vw) is computed against the full viewport, not the space
     actually left over inside .container once the two nav buttons and
     their gaps are subtracted — on phones that overshoots and forces
     horizontal scroll. Let flexbox size it instead. */
  .impact__card-wrap { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* ---- Work showcase ----
   Same hero-style inset black card as the other full-bleed sections, a
   fixed 2-up / full-width / 2-up grid (nth-child(3) spans both columns —
   matches the live Framer source exactly for 5 cards), and a hover-reveal
   card: image only by default, blurred scrim + title/tags/description
   fade in on hover (see the "Scoop Analytics" hover-state reference). */
.work-showcase {
  width: calc(100% - 2 * var(--container-pad));
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  margin-inline: auto;
  margin-block: var(--space-4);
  background: var(--color-black);
  border-radius: 40px;
  padding: var(--space-6) var(--space-5);
  color: var(--color-white);
}
.work-showcase__badge {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 16px 6px 6px; border-radius: 999px;
  background: rgba(249, 249, 249, 0.1);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600;
}
.work-showcase__badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-white); color: var(--color-ink);
  font-style: normal; font-size: 0.75rem;
}
.work-showcase__header-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.work-showcase__header-row h1,
.work-showcase__header-row h2 { font-family: var(--font-display); font-weight: 700; font-size: 88px; line-height: 0.98; text-transform: none; color: var(--color-white); margin: 0; }
@media (max-width: 900px) {
  .work-showcase__header-row h1,
  .work-showcase__header-row h2 { font-size: clamp(2rem, 9vw, 88px); }
}
.work-showcase__all { background: var(--color-white); color: var(--color-ink); padding: 15px; gap: var(--space-2); }
.work-showcase__all .hero__dot { background: var(--color-accent-pink); }

.work-showcase__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.work-showcase__card:nth-child(3) { grid-column: 1 / -1; }
.work-showcase__card {
  position: relative; border-radius: 48px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
}
.work-showcase__card a { display: block; position: relative; }
.work-showcase__card img { display: block; width: 100%; height: 475px; object-fit: cover; transition: transform 0.7s var(--ease-premium); }
.work-showcase__card:hover img { transform: scale(1.05); }

@media (max-width: 809.98px) {
  .work-showcase__card img { height: 320px; }
}

.work-showcase__scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(35px);
  opacity: 0; transition: opacity 0.4s var(--ease-premium);
}
.work-showcase__content {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-4);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s var(--ease-premium), transform 0.4s var(--ease-premium);
}
.work-showcase__card:hover .work-showcase__scrim,
.work-showcase__card:hover .work-showcase__content { opacity: 1; transform: none; }
.work-showcase__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.work-showcase__title-row h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem; margin: 0; }
.work-showcase__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.work-showcase__tags span {
  padding: 5px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; color: var(--color-white);
}
.work-showcase__content p { margin-top: var(--space-3); margin-bottom: 0; color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }

@media (max-width: 809.98px) {
  .work-showcase__grid { grid-template-columns: 1fr; }
  .work-showcase__card:nth-child(3) { grid-column: auto; }
  .work-showcase__card .work-showcase__scrim,
  .work-showcase__card .work-showcase__content { opacity: 1; transform: none; }
  .work-showcase__header { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .work-showcase__header-row { align-items: flex-start; }
}

.work-showcase__header { display: flex; align-content: center; justify-content: space-between; align-items: center; }

/* Work archive page — reuses the homepage Work Showcase styling, but the
   "3rd card spans full width" rule only makes sense for the homepage's
   fixed 5-item teaser, not an arbitrary-length paginated archive. */
.work-archive-page .work-showcase__card:nth-child(3) { grid-column: auto; }
.work-archive-page .work-showcase__header-row { justify-content: flex-start; }

/* White background for the Work ARCHIVE page only — the homepage's Work
   Showcase teaser (and its own site header/nav) are untouched; this is
   scoped strictly to .work-archive-page so nothing else is affected. */
.work-archive-page.work-showcase { background: var(--color-white); color: var(--color-ink); }
.work-archive-page .work-showcase__badge {
  background: var(--color-gray-50); border: 0; backdrop-filter: none; color: var(--color-ink);
}
.work-archive-page .work-showcase__badge-icon { background: var(--color-ink); color: var(--color-white); }
.work-archive-page .work-showcase__header-row h1,
.work-archive-page .work-showcase__header-row h2 { color: var(--color-ink); }
.work-archive-page .work-showcase__card {
  border-color: var(--color-gray-200); background: var(--color-gray-50);
}
.work-archive-page .pagination,
.work-archive-page .nav-links { color: var(--color-ink); }

/* ---- Process ----
   Contained rounded "card" like .hero / .services-stack__inner / .work-showcase,
   rather than a flat edge-to-edge black band, so its side insets line up
   with the header. */
.process {
  width: calc(100% - 2 * var(--container-pad));
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  margin-inline: auto;
  margin-block: var(--space-4);
  padding: var(--space-6) var(--space-5);
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: 40px;
}
.process__topbar { border-top-color: rgba(255,255,255,0.2); border-bottom-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); }
.process__topbar-item strong { color: var(--color-white); margin-left: 0.35em; }
.process__intro { text-align: center; margin-bottom: var(--space-6); }
.process__badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1.1em; border-radius: 999px;
  border: 1px dashed rgba(255,255,255,0.3);
  backdrop-filter: blur(20px);
  font-family: var(--font-ui); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-3);
}
.process__badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4em; height: 1.4em; border-radius: 50%;
  background: rgba(255,255,255,0.12); font-style: normal; font-size: 0.85em;
}
.process h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); text-transform: uppercase; margin: 0 0 var(--space-4); }
.process__weeks { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
.process__weeks-pill {
  padding: 0.5em 1.2em; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2);
  font-family: var(--font-ui); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.7);
}
.process__weeks-line { width: 40px; height: 1px; background: rgba(255,255,255,0.2); }

.process__accordion { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4); }
.process__item {
  position: relative; border-radius: 40px; background: rgba(255,255,255,0.12);
  padding: var(--space-2); transition: background var(--dur-hover) ease;
  flex: 1 1 320px; min-width: 280px; max-width: 520px;
}
/* Stair-step stagger, desktop only (Section 13 reference) */
.process__accordion .process__item:nth-child(1) { margin-top: 0; }
.process__accordion .process__item:nth-child(2) { margin-top: 70px; margin-left: 4%; }
.process__accordion .process__item:nth-child(3) { margin-top: 140px; margin-left: 8%; }
.process__item-header {
  width: 100%; display: flex; align-items: center; gap: var(--space-3);
  background: rgba(255,255,255,0.1); border-radius: 32px; border: 0;
  padding: 1em 1.4em; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--color-white); transition: background var(--dur-hover) ease;
}
.process__item.is-open .process__item-header { background: var(--color-white); color: var(--color-ink); }
.process__item-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4em; height: 2.4em; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(180deg, var(--color-accent-pink) 0%, #a82a68 100%);
  box-shadow: 0 0 0 2px rgba(202,55,130,0.35);
  color: var(--color-white); font-family: var(--font-display); font-size: 1rem;
}
.process__item-title { flex: 1; font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.6rem); text-transform: uppercase; }
.process__item-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2em; height: 2.2em; border-radius: 50%; flex-shrink: 0;
  background: var(--color-ink); color: var(--color-white);
  backdrop-filter: blur(35px); transition: transform var(--dur-hover) ease;
}
.process__item.is-open .process__item-header .process__item-chevron { transform: rotate(180deg); background: rgba(0,0,0,0.85); }
.process__item.is-open .process__item-header { color: var(--color-ink); }
/* JS sets an explicit inline max-height when opening/closing (data-process-toggle
   in main.js) — far more reliable across browsers than animating grid-template-rows. */
.process__item-body {
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-medium, 0.4s) ease;
}
.process__item-body p { padding: var(--space-4) 1.4em var(--space-4); color: rgba(255,255,255,0.75); max-width: 60ch; }
.no-js .process__item-body { max-height: none !important; }

/* Floating "Brainstorming" tag — hangs half outside the card's bottom edge.
   The pill itself continuously drifts left/right via translate3d (matches
   the live Framer source's small oscillating transform on the Illustration). */
.process__tag {
  position: absolute; left: 1.8em; bottom: 0; transform: translateY(50%);
  display: block;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-hover) ease;
}
.process__item.is-open .process__tag { opacity: 1; pointer-events: auto; }
.process__tag-drift {
  display: inline-block;
  animation: dzn-process-tag-drift 2.2s ease-in-out infinite alternate;
}
.process__tag-pill {
  position: relative; display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.6em 1.3em 0.6em 1.8em; white-space: nowrap; border-radius: 29px;
  background: linear-gradient(151deg, rgb(249,69,45) 26%, rgb(255,123,106) 100%);
  box-shadow: 0 4px 12px rgba(234,0,0,0.5);
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--color-white);
}
.process__tag-arrow-wrap {
  position: absolute; top: 0; left: 0.6em; transform: translate(-50%, -50%);
  width: 1.6em; height: 1.6em;
}
.process__tag-arrow { display: block; width: 100%; height: 100%; }
@keyframes dzn-process-tag-drift {
  from { transform: translate3d(1px, 0, 0); }
  to   { transform: translate3d(100px, 0, 0); }
}

@media (max-width: 900px) {
  .process__accordion { flex-direction: column; flex-wrap: nowrap; }
  .process__accordion .process__item { max-width: none; margin-top: 0 !important; margin-left: 0 !important; flex-basis: auto; }
}

@media (max-width: 720px) {
  .process__topbar { font-size: 0.7rem; }
  .process__item-title { font-size: 1rem; }
}

/* Shared small-screen sizing for the "EST 2019 / SECTION LABEL" bars used
   across Process, Testimonials, FAQ, Pricing, and Locations — same fix,
   applied once instead of five near-duplicate section-specific rules. */
@media (max-width: 480px) {
  .process__topbar,
  .testimonials__topbar,
  .faq__topbar,
  .pricing__topbar,
  .locations__topbar,
  .blog-teaser__topbar {
    font-size: 0.65rem; gap: var(--space-2);
  }
}

/* ---- Testimonials ----
   Contained rounded "card" like .process, with a photo + quote slider —
   changing slide swaps both the portrait and the quote/name/logo together. */
.testimonials {
  width: calc(100% - 2 * var(--container-pad));
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  margin-inline: auto;
  margin-block: var(--space-4);
  padding: var(--space-6) var(--space-5);
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: 40px;
}
.testimonials__topbar { border-top-color: rgba(255,255,255,0.2); border-bottom-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); }
.testimonials__topbar-item strong { color: var(--color-white); margin-left: 0.35em; }
.testimonials__badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1.1em; border-radius: 999px;
  border: 1px dashed rgba(255,255,255,0.3);
  backdrop-filter: blur(20px);
  font-family: var(--font-ui); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-3);
}
.testimonials__badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4em; height: 1.4em; border-radius: 50%;
  background: var(--color-white); color: var(--color-ink); font-style: normal; font-size: 0.8em;
}
.testimonials h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); text-transform: uppercase; margin: 0 0 var(--space-5); }

.testimonials__slider { list-style: none; margin: 0; padding: 0; }
.testimonials__slide { display: none; grid-template-columns: minmax(220px, 460px) 1fr; gap: var(--space-5); align-items: center; }
.testimonials__slide.is-active { display: grid; }
.testimonials__slide--no-photo { grid-template-columns: 1fr; }
.testimonials__slide--no-photo .testimonials__card { max-width: 720px; }
/* Photo panel: dotted-pattern background behind a ghosted (60% opacity,
   contain-fit) portrait — matches the live Framer source exactly rather
   than a plain full-bleed cover photo. */
.testimonials__photo {
  position: relative; border-radius: 32px; overflow: hidden; aspect-ratio: 4/3;
  border: 1px solid rgba(255,255,255,0.2);
  background: var(--color-ink) url('../images/testimonials-dots.png') center/cover no-repeat;
}
.testimonials__photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) -4%, rgba(255,255,255,0) 35%);
}
.testimonials__photo img { position: relative; width: 100%; height: 100%; object-fit: contain; opacity: 0.6; display: block; }
.testimonials__card {
  background: rgba(255,255,255,0.1); border-radius: 32px; padding: var(--space-5);
  border: 1px dashed rgba(255,255,255,0.1);
  box-shadow: inset 0 0 24px rgba(255,255,255,0.1);
}
.testimonials__dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: rgb(249,69,45); margin-bottom: var(--space-3); }
.testimonials__card blockquote {
  font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 600;
  margin: 0 0 var(--space-4); color: var(--color-white);
}
.testimonials__meta {
  display: flex; align-items: center; gap: var(--space-3);
  padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,0.2);
}
.testimonials__meta img { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; object-fit: contain; background: var(--color-white); padding: 4px; }
.testimonials__meta cite { display: flex; flex-direction: column; font-style: normal; gap: 0.2em; }
.testimonials__name { font-family: var(--font-ui); font-weight: 700; color: var(--color-white); }
.testimonials__role { font-family: var(--font-ui); font-size: 0.85rem; color: rgba(255,255,255,0.55); }
.testimonials__role strong { color: rgba(255,255,255,0.8); }

.testimonials__nav { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.testimonials__nav-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.2em; height: 3.2em; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 1.1rem; transition: transform var(--dur-hover) ease;
}
.testimonials__nav-btn:hover { transform: scale(1.06); }
.testimonials__nav-btn--prev { background: var(--color-white); color: var(--color-ink); }
.testimonials__nav-btn--next {
  background: var(--color-accent-pink); color: var(--color-white);
  box-shadow: 0 0 24px rgba(202,55,130,0.55);
}

@media (max-width: 780px) {
  .testimonials__slide { grid-template-columns: 1fr; }
  .testimonials__photo { aspect-ratio: 16/10; }
}
.no-js .testimonials__slide { display: grid !important; margin-bottom: var(--space-5); }

/* ---- Video / Showcase Media ----
   Full-width rounded media card, same box-model as .hero so its edges
   line up with the header. */
.dzn-video { padding-block: var(--space-4); }
.dzn-video__frame {
  width: calc(100% - 2 * var(--container-pad));
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  margin-inline: auto;
  aspect-ratio: 21/9;
  border-radius: 40px;
  overflow: hidden;
  background: var(--color-ink);
}
.dzn-video__media { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) {
  .dzn-video__frame { aspect-ratio: 4/3; border-radius: 24px; }
}

/* ---- FAQ ----
   Light two-column section (badge/heading/CTA left, accordion right) —
   sits on the page's normal light background, unlike the dark contained
   cards used for Process/Testimonials. */
.faq { padding-block: var(--space-6); }
.faq__topbar { border-top-color: rgba(17,17,17,0.2); border-bottom-color: rgba(17,17,17,0.2); color: var(--color-gray-500); }
.faq__topbar-item strong { color: var(--color-ink); margin-left: 0.35em; }

.faq__body { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: var(--space-6); align-items: start; }
.faq__intro { position: sticky; top: var(--space-5); }
@media (max-width: 768px) { .faq__body { grid-template-columns: 1fr; } .faq__intro { position: static; } }
.faq__badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1.1em; border-radius: 999px; background: var(--color-gray-50);
  font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.faq__badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--color-ink); color: var(--color-white); font-style: normal; font-size: 0.85em;
}
.faq h2 { font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 4rem); text-transform: uppercase; line-height: 1.02; margin: 0 0 var(--space-5); }
.faq__heading-accent { color: var(--color-accent-pink); }
.faq__note { color: var(--color-gray-500); margin-bottom: var(--space-3); }
.faq__cta { background: var(--color-accent-pink); color: var(--color-white); }

.faq__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.faq__item { border-radius: 32px; background: var(--color-gray-50); overflow: hidden; }
.faq__item-header {
  width: 100%; display: flex; align-items: center; gap: var(--space-3);
  background: transparent; border: 0; padding: 1.2em 1.6em; cursor: pointer; text-align: left;
  font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-ink);
}
.faq__item-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-pink); flex-shrink: 0; }
.faq__item-question { flex: 1; }
.faq__item-chevron {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2em; height: 2em; border-radius: 50%; flex-shrink: 0;
  background: var(--color-ink); color: var(--color-white);
  transition: transform var(--dur-hover) ease;
}
.faq__item.is-open .faq__item-chevron { transform: rotate(180deg); }
.faq__item-body { max-height: 0; overflow: hidden; transition: max-height var(--dur-medium, 0.4s) ease; }
.faq__item-body p { padding: 0 1.6em 1.4em 3.2em; color: var(--color-gray-500); max-width: 60ch; }
.no-js .faq__item-body { max-height: none !important; }

@media (max-width: 860px) {
  .faq__body { grid-template-columns: 1fr; }
  .faq__intro { position: static; }
}

/* ---- Blog Teaser ---- */
.blog-teaser { padding-block: var(--space-6); }
.blog-teaser__topbar { border-top-color: rgba(17,17,17,0.2); border-bottom-color: rgba(17,17,17,0.2); color: var(--color-gray-500); }
.blog-teaser__topbar-item strong { color: var(--color-ink); margin-left: 0.35em; }
.blog-teaser__intro { max-width: 640px; }
.blog-teaser__badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1.1em; border-radius: 999px; background: var(--color-gray-50);
  font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.blog-teaser__badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--color-ink); color: var(--color-white); font-style: normal; font-size: 0.8em;
}
.blog-teaser h1,
.blog-teaser h2 { font-family: var(--font-display); font-size: 88px; text-transform: uppercase; line-height: 1.02; margin: 0; }
@media (max-width: 900px) {
  .blog-teaser h1,
  .blog-teaser h2 { font-size: clamp(2rem, 9vw, 88px); }
}
.blog-teaser__heading-accent { color: var(--color-accent-pink); }
.blog-teaser__header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.blog-teaser__cta { background: var(--color-accent-pink); color: var(--color-white); padding: 15px; gap: var(--space-2); }
.blog-teaser__cta .hero__dot { background: var(--color-white); }
.blog-teaser__cta .hero__cta-arrow { background: var(--color-white); color: var(--color-ink); }

.blog-teaser__grid {
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-4);
}
.blog-teaser__card a { display: block; color: inherit; text-decoration: none; }
.blog-teaser__image {
  position: relative; border-radius: 40px; overflow: hidden;
  border: 1px solid var(--color-gray-200); background: var(--color-gray-50);
  /* Fixed height (not aspect-ratio) so both columns' images line up at the
     same height even though the grid columns themselves stay unequal
     widths (1.6fr/1fr) — matches the real Framer reference. */
  height: 620px;
}
.blog-teaser__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter var(--dur-hover) ease; }
.blog-teaser__blur {
  position: absolute; inset: 0; opacity: 0;
  backdrop-filter: blur(6px); background: rgba(0,0,0,0.24);
  transition: opacity var(--dur-hover) ease;
}
.blog-teaser__card:hover .blog-teaser__image img { filter: blur(6px); }
.blog-teaser__card:hover .blog-teaser__blur { opacity: 1; }
.blog-teaser__content { padding-top: var(--space-3); }
.blog-teaser__content h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; margin: 0 0 0.3em; }
.blog-teaser__content p { color: var(--color-gray-500); margin: 0; }

@media (max-width: 780px) {
  .blog-teaser__grid { grid-template-columns: 1fr; }
  .blog-teaser__image { height: 320px; }
}

/* Blog archive page — the teaser's 1.6fr/1fr split exists to make a 2-post
   teaser feel intentional; an arbitrary-length paginated archive reads
   better with both columns equal, per spec. */
.blog-archive-page.blog-teaser { padding-block: var(--space-7) var(--space-6); }
.blog-archive-page .blog-teaser__grid { grid-template-columns: 1fr 1fr; }
.blog-archive-page .blog-teaser__image { aspect-ratio: 4/3; }
@media (max-width: 780px) {
  .blog-archive-page .blog-teaser__grid { grid-template-columns: 1fr; }
}

/* ---- Archive pagination (Work / Blog) ---- */
.pagination, .nav-links { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-6); }
.pagination .page-numbers, .nav-links .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6em; height: 2.6em; padding-inline: 0.6em; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; color: var(--color-ink);
  background: var(--color-gray-50); text-decoration: none;
}
.pagination .page-numbers.current, .nav-links .page-numbers.current { background: var(--color-accent-pink); color: var(--color-white); }
.pagination .page-numbers:hover, .nav-links .page-numbers:hover { background: var(--color-ink); color: var(--color-white); }
.work-archive-page .pagination,
.work-archive-page .nav-links { color: var(--color-white); }

/* ---- Pricing ---- */
.pricing { padding-block: var(--space-6); }
.pricing__topbar { border-top-color: rgba(17,17,17,0.2); border-bottom-color: rgba(17,17,17,0.2); color: var(--color-gray-500); }
.pricing__topbar-item strong { color: var(--color-ink); margin-left: 0.35em; }
.pricing__intro { text-align: center; margin-bottom: var(--space-6); }
.pricing__badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1.1em; border-radius: 999px; background: var(--color-gray-50);
  font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.pricing__badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--color-ink); color: var(--color-white); font-style: normal; font-size: 0.8em;
}
.pricing h2 { font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 4rem); text-transform: uppercase; line-height: 1.05; margin: 0; }
.pricing__heading-accent { color: var(--color-accent-pink); }

.pricing__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.pricing__plan {
  border-radius: 40px; border: 1px solid var(--color-ink); overflow: hidden;
  background: var(--color-black); display: flex; flex-direction: column;
}
.pricing__plan-top { background: var(--color-white); padding: var(--space-5); }
.pricing__plan-name {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--color-ink);
}
.pricing__plan-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-pink); flex-shrink: 0; }
.pricing__audience { color: var(--color-gray-500); margin: 0.5em 0 var(--space-4); }
.pricing__price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.pricing__price {
  font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--color-ink); margin: 0;
  display: flex; align-items: flex-start; gap: 0.1em;
}
.pricing__price-sign { font-size: 0.4em; font-family: var(--font-ui); font-weight: 700; margin-top: 0.3em; }
.pricing__note { text-align: right; font-family: var(--font-ui); font-size: 0.85rem; margin: 0; }
.pricing__note-main { display: block; font-weight: 700; color: var(--color-ink); }
.pricing__note-sub { display: block; color: var(--color-gray-500); }
.pricing__cta {
  display: flex; align-items: center; justify-content: center; gap: 0.6em;
  width: 100%; padding: 1em; border-radius: 999px; border: 1px solid var(--color-accent-pink);
  background: var(--color-white); color: var(--color-ink);
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  transition: transform var(--dur-hover) ease;
}
.pricing__cta:hover { transform: scale(1.01); }
.pricing__cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--color-ink); color: var(--color-white); flex-shrink: 0;
}
.pricing__features {
  list-style: none; margin: 0; padding: var(--space-5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4);
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--color-white);
}
.pricing__features li { display: flex; align-items: center; gap: 0.6em; }
.pricing__feature-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }

/* Featured (premium) plan — dark red gradient card */
.pricing__plan--featured { border-color: rgb(249,69,45); }
.pricing__plan--featured .pricing__plan-top {
  background: radial-gradient(120% 140% at 100% 0%, rgba(255,140,110,0.9) 0%, rgb(120,10,5) 45%, rgb(20,2,1) 100%);
}
.pricing__plan--featured .pricing__plan-name,
.pricing__plan--featured .pricing__audience,
.pricing__plan--featured .pricing__price,
.pricing__plan--featured .pricing__note-main { color: var(--color-white); }
.pricing__plan--featured .pricing__audience { color: rgba(255,255,255,0.75); }
.pricing__plan--featured .pricing__note-sub { color: rgba(255,255,255,0.6); }
.pricing__plan--featured .pricing__cta { border-color: var(--color-white); }
.pricing__plan--featured .pricing__cta-arrow { background: var(--color-ink); color: var(--color-white); }

@media (max-width: 640px) {
  .pricing__features { grid-template-columns: 1fr; }
  .pricing__price-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .pricing__note { text-align: left; }
}
/* .pricing__plans' minmax(340px,1fr) track is wider than the available
   content width on phones (~280-335px after container padding), which
   forces horizontal overflow — collapse to a single flexible column. */
@media (max-width: 400px) {
  .pricing__plans { grid-template-columns: 1fr; }
}

/* ---- Locations ----
   World-map "hotspot" widget: dotted map background with absolutely
   positioned city pins (flag pill + marker dot), driven by pos_x/pos_y
   percentages set per city in Site Options. */
.locations { padding-block: var(--space-6); text-align: center; overflow: hidden; }
.locations__topbar { border-top-color: rgba(17,17,17,0.2); border-bottom-color: rgba(17,17,17,0.2); color: var(--color-gray-500); }
.locations__topbar-item strong { color: var(--color-ink); margin-left: 0.35em; }
.locations__intro { margin-bottom: var(--space-5); }
.locations__badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1.1em; border-radius: 999px; background: var(--color-gray-50);
  font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.locations__badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--color-ink); color: var(--color-white); font-style: normal; font-size: 0.8em;
}
.locations h2 { font-family: var(--font-display); font-size: clamp(2.2rem, 4.4vw, 4rem); text-transform: uppercase; line-height: 1.05; margin: 0; }
.locations__heading-accent { color: var(--color-accent-pink); }

.locations__map {
  position: relative; width: 100%; aspect-ratio: 2048/900; max-height: 70vh;
}
.locations__map::before {
  content: ''; position: absolute; inset: 0;
  background: url('../images/impact-worldmap.png') center top/contain no-repeat;
  opacity: 0.15;
}
/* A user-supplied map (Site Options > Global Locations > Map Image) is
   assumed pre-styled (e.g. an SVG already tinted/dotted to match the
   design), so it's shown at full opacity instead of the placeholder's
   heavily-faded treatment. */
.locations__map--custom::before {
  background-image: var(--locations-map-image);
  opacity: 1;
}
.locations__pin {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; gap: 0.5em;
}
.locations__pin-badge {
  display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap;
  padding: 0.55em 1.1em 0.55em 0.55em; border-radius: 999px;
  background: var(--color-white); box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 700; color: var(--color-ink);
}
.locations__pin-flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8em; height: 1.8em; border-radius: 50%; font-style: normal; font-size: 1.1em;
  background: var(--color-gray-50); overflow: hidden;
}
.locations__pin-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent-pink);
  box-shadow: 0 0 0 5px rgba(202,55,130,0.18);
}
@media (max-width: 720px) {
  .locations__map { aspect-ratio: 2048/1400; }
  .locations__pin-badge {
    font-size: 0.7rem; padding: 0.4em 0.7em 0.4em 0.4em;
    /* Pins near the map's left/right edge (e.g. x=10%) would otherwise get
       their nowrap pill clipped by .locations' overflow:hidden — letting
       the label wrap onto two lines keeps it readable at that width. */
    white-space: normal; max-width: 26vw; text-align: center; line-height: 1.3;
  }
  .locations__pin-flag { width: 1.3em; height: 1.3em; font-size: 1em; }
}

/* ---- About / Story hero (Studio) ----
   Two-column: left holds badge/meta/CTA, right holds the big heading —
   mirrors the homepage hero's own badge-left / heading-right composition. */
.about-hero { padding-block: var(--space-7) var(--space-6); }
.about-hero__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6);
  align-items: start;
}
.about-hero__left { display: flex; flex-direction: column; }
.about-hero__heading { justify-self: end; text-align: right; }
@media (max-width: 900px) {
  .about-hero__inner { grid-template-columns: 1fr; }
  .about-hero__heading { justify-self: start; text-align: left; }
}
.about-hero__badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.4em 1.2em 0.4em 0.4em; border-radius: 999px; background: var(--color-white);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; color: var(--color-ink);
  margin-bottom: var(--space-5);
  width: fit-content;
}
.about-hero__badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2em; height: 2em; border-radius: 50%;
  background: var(--color-ink); color: var(--color-white); font-style: normal; font-size: 0.9em;
}
.about-hero__heading {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 88px; line-height: 1.02;
}
@media (max-width: 900px) {
  .about-hero__heading { font-size: clamp(2rem, 9vw, 88px); }
}
.about-hero__heading-line { display: block; color: var(--color-ink); }
.about-hero__heading-line sup { font-size: 0.32em; font-weight: 600; margin-left: 4px; vertical-align: super; }
.about-hero__heading-line--accent { color: var(--color-accent-pink); }

.about-hero__meta {
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: flex; flex-direction: column;
}
.about-hero__meta li {
  display: flex; flex-direction: column; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-gray-500);
}
.about-hero__meta span { font-family: var(--font-ui); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; color: var(--color-ink); }
.about-hero__meta small { font-family: var(--font-ui); font-size: 0.95rem; color: var(--color-gray-500); }

.about-hero__cta { margin-top: var(--space-5); background: var(--color-accent-pink); color: var(--color-white); padding: 15px; gap: var(--space-2); width: fit-content; }
.about-hero__cta .hero__dot { background: var(--color-white); }
.about-hero__cta .hero__cta-arrow { background: var(--color-white); color: var(--color-ink); }

/* Separate full-width container, not confined to the left column — spans
   the whole content width like the other full-bleed media bands. */
.about-hero__media { width: 100%; margin-top: var(--space-6); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21/8; }
.about-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) {
  .about-hero__media { aspect-ratio: 4/3; }
}

/* ---- Contact section (shared, footer.php) ----
   Contained rounded black card (same box-model as .process) with a dotted
   texture + diagonal light-streak overlay, a floating white form card on
   the left, and the badge/heading/details column on the right. */
.contact-section {
  width: calc(100% - 2 * var(--container-pad));
  max-width: calc(var(--container-max) - 2 * var(--container-pad));
  margin-inline: auto;
  margin-block: var(--space-4);
  border-radius: 40px;
  background: var(--color-ink); color: var(--color-white);
  position: relative; overflow: hidden;
}
.contact-section::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1.5px);
  background-size: 14px 14px;
  opacity: 0.12;
}
.contact-section::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 55%, rgba(255,255,255,0.08) 68%, transparent 82%);
}
.contact-section__inner {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-6); align-items: center;
  padding: var(--space-6) var(--space-5);
}
.contact-section__form-wrap { background: var(--color-white); border-radius: 32px; padding: var(--space-6); }
.contact-section__badge {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.5em 1.1em; border-radius: 999px; background: rgba(255,255,255,0.08);
  font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-white);
  margin-bottom: var(--space-4);
}
.contact-section__badge-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: rgba(255,255,255,0.1); font-style: normal; font-size: 0.8em;
}
.contact-section__intro h2 {
  font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem);
  text-transform: uppercase; line-height: 1.02; margin: 0 0 var(--space-5);
}
.contact-section__details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.contact-section__details li { display: flex; align-items: center; gap: var(--space-3); }
.contact-section__details-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.4em; height: 2.4em; border-radius: 50%; background: rgba(255,255,255,0.08);
  font-style: normal; font-size: 1rem;
}
.contact-section__details span { display: flex; flex-direction: column; gap: 0.2em; }
.contact-section__details em { font-style: normal; font-family: var(--font-ui); font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.contact-section__details a { font-family: var(--font-ui); font-weight: 700; color: var(--color-white); text-decoration: none; }
@media (max-width: 860px) { .contact-section__inner { grid-template-columns: 1fr; } }

/* ---- Contact form ----
   Sized up to fill the now-equal-width column (was tuned for a narrower
   minmax(320px,480px) column) — bigger fields/type/button, kept in the
   same proportion to each other. */
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-form__field { display: flex; flex-direction: column; gap: 0.7em; }
.contact-form__field label {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--color-ink);
}
.contact-form__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-pink); flex-shrink: 0; }
.contact-form input,
.contact-form textarea {
  width: 100%; padding: 1.1em 1.2em; border: 1px solid var(--color-gray-200); border-radius: 18px;
  background: var(--color-gray-50); color: var(--color-ink); font-family: var(--font-ui); font-size: 1rem;
  resize: vertical;
}
.contact-form textarea { min-height: 160px; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--color-gray-500); }
.contact-form__hp { position: absolute; left: -9999px; }
.contact-form__notice { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.contact-form__notice--success { background: var(--color-accent-green); color: var(--color-ink); }
.contact-form__notice--error { background: #ff4d4d; color: var(--color-white); }
.contact-form__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  padding: 1.2em 1.8em; border: 0; border-radius: 999px; cursor: pointer; align-self: flex-start;
  background: var(--color-accent-pink); color: var(--color-white);
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  transition: transform var(--dur-hover) ease;
}
.contact-form__submit:hover { transform: scale(1.02); }
.contact-form__submit .contact-form__dot { background: var(--color-white); }
.contact-form__submit-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2em; height: 2em; border-radius: 50%; background: var(--color-white); color: var(--color-ink);
}

/* ---- Footer ---- */
.site-footer { padding-block: var(--space-6) 0; background: transparent; color: var(--color-ink); overflow: hidden; }
.site-footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5); padding-bottom: var(--space-5); }

.site-footer__connect { max-width: 420px; }
.site-footer__thumb { width: 100%; max-width: 420px; aspect-ratio: 4/3; object-fit: cover; border-radius: 24px; border: 1px solid var(--color-ink); display: block; }
.site-footer__connect-label {
  display: flex; align-items: center; gap: 0.6em; margin: var(--space-3) 0 0.3em;
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--color-ink);
}
.site-footer__connect-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-pink); flex-shrink: 0; }
.site-footer__connect-email { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 1.1rem; color: var(--color-ink); }

.site-footer__columns { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.site-footer__column-heading { display: block; font-family: var(--font-ui); font-size: 0.9rem; color: var(--color-gray-500); margin-bottom: var(--space-3); }
.site-footer__menu, .site-footer__social { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; margin: 0; padding: 0; font-family: var(--font-ui); font-size: 1rem; }
.site-footer__menu a, .site-footer__social a { color: var(--color-ink); text-decoration: none; border-bottom: 1px dotted var(--color-gray-200); padding-bottom: 0.2em; }

.site-footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-4); border-top: 1px solid var(--color-gray-200);
  font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-gray-500);
}
.site-footer__legal-links { display: flex; gap: var(--space-4); }
.site-footer__legal-links a { color: var(--color-gray-500); text-decoration: none; }
.site-footer__legal-links a:hover { color: var(--color-ink); }

.site-footer__wordmark {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(3rem, 12vw, 9rem); line-height: 1; color: var(--color-ink);
  text-align: center; margin: 0; padding-block: var(--space-4) var(--space-3);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}

@media (max-width: 720px) {
  .site-footer__top { flex-direction: column; }
  .site-footer__wordmark { font-size: clamp(2.2rem, 14vw, 4rem); white-space: normal; }
}

/* ---- Service detail (single-service.php, unchanged) ---- */
.service-detail__hero { padding-block: var(--space-6); text-align: center; }
.service-detail__hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); text-transform: uppercase; }
.service-detail__tagline { max-width: 620px; margin: var(--space-3) auto 0; color: var(--color-gray-500); font-size: 1.05rem; line-height: 1.6; }
.service-detail__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5); list-style: none; margin: var(--space-4) 0 0; padding: 0; }
@media (max-width: 480px) { .service-detail__meta { gap: var(--space-4) var(--space-3); } .service-detail__meta li { flex: 0 1 calc(50% - var(--space-3)); text-align: center; } }
.service-detail__meta span { display: block; font-family: var(--font-heading); font-size: 1.1rem; }
.service-detail__meta small { display: block; font-family: var(--font-ui); font-size: 0.75rem; color: var(--color-gray-500); text-transform: uppercase; }
.service-detail__section { padding-block: var(--space-6); max-width: 760px; }
.service-detail__number { font-family: var(--font-display); color: var(--color-accent-pink); }

/* ---- Case study (single-work.php) ----
   Each block below only ever renders when its ACF field has content, so
   these rules never need to account for an "empty state" — if a section
   exists in the DOM, it has something to show. */
.case-study__hero { padding-block: var(--space-7) var(--space-6); }
.case-study__hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.case-study__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 88px; line-height: 0.98; margin: 0; }
.case-study__title-line { display: block; color: var(--color-ink); }
.case-study__title-line--accent { color: var(--color-accent-pink); }

.case-study__hero-side { display: flex; flex-direction: column; gap: var(--space-5); }
.case-study__hero-badge {
  display: inline-flex; align-items: center; gap: 0.7em; align-self: flex-start;
  padding: 0.4em 1.2em 0.4em 0.4em; border-radius: 999px; background: var(--color-gray-50);
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--color-ink);
}
.case-study__hero-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2em; height: 2em; border-radius: 50%; font-style: normal;
  background: var(--color-accent-pink); color: var(--color-white);
}
.case-study__hero-intro p { margin: var(--space-3) 0 0; color: var(--color-gray-500); max-width: 46ch; }
.case-study__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.case-study__meta li { display: flex; flex-direction: column; gap: 0.3em; padding-block: var(--space-3); border-bottom: 1px solid var(--color-gray-200); }
.case-study__meta span { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; text-transform: uppercase; color: var(--color-ink); }
.case-study__meta small { font-family: var(--font-ui); font-size: 0.85rem; color: var(--color-gray-500); }
@media (max-width: 860px) { .case-study__hero-grid { grid-template-columns: 1fr; } }

/* Media (gallery) section */
.case-study__media { padding-block: var(--space-6); }
.case-study__media h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); text-transform: uppercase; margin-bottom: var(--space-5); }
.case-study__media-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.case-study__media-item--half { display: inline-grid; }
.case-study__media-grid:has(.case-study__media-item--half) { display: grid; grid-template-columns: 1fr 1fr; }
.case-study__media-item:not(.case-study__media-item--half) { grid-column: 1 / -1; }
.case-study__media-item img { width: 100%; border-radius: 32px; display: block; object-fit: cover; }
@media (max-width: 720px) {
  .case-study__media-grid:has(.case-study__media-item--half) { grid-template-columns: 1fr; }
}

/* Problems and Solutions */
.case-study__problems { padding-block: var(--space-6); }
.case-study__problems h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); text-transform: uppercase; margin-bottom: var(--space-5); }
.case-study__problems-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.case-study__pill {
  display: inline-block; padding: 0.4em 1.1em; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.case-study__pill--problem { background: var(--color-gray-50); color: var(--color-ink); }
.case-study__pill--solution { background: color-mix(in srgb, var(--color-accent-pink) 15%, transparent); color: var(--color-accent-pink); }
.case-study__problem-col p { color: var(--color-gray-500); margin: 0 0 var(--space-4); }
.case-study__problem-image img { width: 100%; border-radius: 24px; display: block; object-fit: cover; aspect-ratio: 4/3; }
@media (max-width: 720px) { .case-study__problems-grid { grid-template-columns: 1fr; } }

/* Compact numbered sections (everything after the hero's own row) */
.case-study__sections { padding-block: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.case-study__section { border-top: 1px solid var(--color-gray-200); padding-top: var(--space-5); }
/* Capped so the stat sits near its text on wide screens, rather than
   flex:1 on .case-study__section-text stretching it to the far edge of
   the full ~1900px container. */
.case-study__section-row { display: flex; align-items: flex-start; gap: var(--space-4); max-width: 1400px; }
.case-study__number {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.6em; height: 2.6em; border-radius: 50%;
  background: var(--color-gray-50); color: var(--color-ink);
  font-family: var(--font-display); font-size: 1rem;
}
.case-study__section-text { flex: 1; }
.case-study__section-text h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; margin: 0 0 0.4em; }
.case-study__section-text p { color: var(--color-gray-500); margin: 0 0 0.5em; max-width: 60ch; }
.case-study__stat { text-align: right; flex-shrink: 0; }
.case-study__stat strong { display: block; font-family: var(--font-display); font-size: 1.8rem; color: var(--color-accent-pink); }
.case-study__stat span { display: block; font-family: var(--font-ui); font-size: 0.8rem; color: var(--color-gray-500); max-width: 16ch; }
.case-study__section-image { margin-top: var(--space-4); }
.case-study__section-image img { width: 100%; border-radius: 32px; display: block; }

/* padding-block only (not the padding shorthand) — the shorthand was
   zeroing out .container's own padding-inline, pulling this row flush
   to the browser edge instead of matching every other section's inset. */
.case-study__awards { display: flex; gap: var(--space-4); list-style: none; padding-block: 0; margin: var(--space-5) 0; flex-wrap: wrap; }

/* Typeface and Colors */
.case-study__type { padding-block: var(--space-6); }
.case-study__type-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; max-width: 1400px; }
.case-study__type-head h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); text-transform: uppercase; margin: 0; }
.case-study__type-name {
  font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  writing-mode: vertical-rl; transform: rotate(180deg); color: var(--color-gray-500);
}
.case-study__type-specimen {
  margin-top: var(--space-4); padding: var(--space-5); border-radius: 24px; background: var(--color-gray-50);
  font-family: var(--font-heading); font-size: 1.1rem; line-height: 1.8; color: var(--color-ink);
}
.case-study__colors { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-top: var(--space-5); }
.case-study__color {
  aspect-ratio: 4/3; border-radius: 20px; padding: var(--space-3);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.2em;
}
.case-study__color-name { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.9); mix-blend-mode: difference; }
.case-study__color-hex { font-family: var(--font-ui); font-size: 0.75rem; color: rgba(255,255,255,0.75); mix-blend-mode: difference; }

.case-study__related { margin-top: var(--space-4); }
.case-study__related .work-showcase__card:nth-child(3) { grid-column: auto; }

.case-study__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.case-study__gallery img { border-radius: var(--radius-md); }

/* ---- Archives ---- */
.archive-header { padding-block: var(--space-6); text-align: center; }
.archive-header h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); text-transform: uppercase; }
.work-archive__grid, .blog-archive__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.work-archive__card img, .blog-archive__card img { border-radius: var(--radius-md); aspect-ratio: 4/5; object-fit: cover; }

/* ---- Blog post ---- */
.blog-post__header { padding-block: var(--space-6); text-align: center; }
.blog-post__header h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); text-transform: uppercase; }
.blog-post__byline { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.blog-post__byline img { border-radius: 50%; }
.blog-post__pullquote { max-width: 50ch; margin: var(--space-3) auto 0; font-family: var(--font-heading); font-size: 1.25rem; }
.blog-post__cover img { border-radius: var(--radius-lg); }
.blog-post__content { max-width: 720px; margin: var(--space-6) auto; line-height: 1.7; }
.blog-related { padding-block: var(--space-6); }
.blog-related ul { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }

/* ---- Legal pages ---- */
.legal-page { padding-block: var(--space-6); max-width: 760px; }
.legal-page h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; }
.legal-page__updated { color: var(--color-gray-500); font-size: 0.85rem; }
.legal-page__content { margin-top: var(--space-5); line-height: 1.7; }
.legal-page__content h2 { margin-top: var(--space-6); }

/* ---- Page hero (generic, e.g. Contact) ---- */
.page-hero { padding-block: var(--space-6); text-align: center; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); text-transform: uppercase; }

.error-404 { padding-block: var(--space-7); text-align: center; }

/* ==========================================================================
   Motion system: masked text, image reveal, counters, marquee,
   sticky process, hover library, mouse parallax, custom cursor.
   Everything degrades to fully visible without JS / no-js / reduced-motion.
   ========================================================================== */

/* ---- Masked text reveal ---- */
[data-reveal-text] { overflow: hidden; display: block; }
[data-reveal-text] .reveal-text__inner {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-reveal) var(--ease-premium);
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}
[data-reveal-text].is-visible .reveal-text__inner { transform: translateY(0); }
.no-js [data-reveal-text] .reveal-text__inner,
.no-js [data-reveal] { transform: none !important; opacity: 1 !important; }

/* ---- Image clip reveal ---- */
[data-reveal-image] { overflow: hidden; }
[data-reveal-image] img {
  clip-path: inset(10% 0 10% 0);
  transform: scale(1.06);
  transition: clip-path var(--dur-image-reveal) var(--ease-premium), transform var(--dur-image-reveal) var(--ease-premium);
}
[data-reveal-image].is-visible img { clip-path: inset(0 0 0 0); transform: scale(1); }
.no-js [data-reveal-image] img { clip-path: none !important; transform: none !important; }
.no-js .process__item-header .process__item-chevron { display: none; }
.no-js .process__tag { opacity: 1 !important; }

/* ---- Stagger group (children get --stagger-index via JS) ---- */
[data-reveal-group] > * { transition-delay: calc(var(--stagger-index, 0) * 80ms); }

/* ---- Counters ---- */
[data-counter] { font-variant-numeric: tabular-nums; }

/* ---- Marquee / ticker ---- */
[data-marquee] { overflow: hidden; white-space: nowrap; }
[data-marquee] .marquee__track {
  display: inline-flex;
  gap: var(--space-6);
  animation: dzn-marquee 22s linear infinite;
}
[data-marquee]:hover .marquee__track { animation-play-state: paused; }
@keyframes dzn-marquee { to { transform: translateX(-50%); } }

/* ---- Sticky process (Section 13) — only engaged when JS adds the gate class ---- */
.has-sticky-process .process__steps { display: block; }
.has-sticky-process [data-sticky-process] { position: relative; height: 240vh; }
.has-sticky-process [data-sticky-inner] {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
.has-sticky-process [data-process-step] {
  position: absolute; inset: 0; margin: auto 0; height: fit-content;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
  pointer-events: none;
}
.has-sticky-process [data-process-step].is-active { opacity: 1; transform: none; pointer-events: auto; }

/* ---- Hover library ---- */
.hover-lift { transition: transform var(--dur-hover) var(--ease-premium), box-shadow var(--dur-hover) var(--ease-premium); }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.25); }

.hover-zoom { overflow: hidden; display: block; }
.hover-zoom img { transition: transform 0.7s var(--ease-premium); }
.hover-zoom:hover img { transform: scale(1.06); }

.hover-shift { display: inline-flex; align-items: center; gap: var(--space-2); transition: transform var(--dur-hover) var(--ease-premium); }
.hover-shift:hover { transform: translateX(8px); }

.hover-arrow { display: inline-block; transition: transform var(--dur-hover) var(--ease-premium); }
*:hover > .hover-arrow, .hover-shift:hover .hover-arrow { transform: translateX(6px); }

/* Card-level hover composition used on services/work/pricing cards */
.services__card, .work-showcase__card, .pricing__plan { transition: transform var(--dur-hover) var(--ease-premium), box-shadow var(--dur-hover) var(--ease-premium), border-color var(--dur-hover) var(--ease-premium); }
.services__card:hover, .pricing__plan:hover { transform: translateY(-8px); box-shadow: 0 20px 40px -22px rgb(0 0 0 / 0.22); }
.work-showcase__card a { display: block; }
.work-showcase__card { overflow: hidden; }
.work-showcase__card img { transition: transform 0.7s var(--ease-premium); }
.work-showcase__card:hover img { transform: scale(1.06); }
.work-showcase__card h3 { transition: transform var(--dur-hover) var(--ease-premium); }
.work-showcase__card:hover h3 { transform: translateX(8px); }

.services__link .hover-arrow, .work-showcase__all .hover-arrow { margin-left: 4px; }
.services__card:hover .services__link { text-decoration-thickness: 2px; }

/* ---- Mouse parallax target ---- */
[data-mouse-parallax] { transform-style: preserve-3d; will-change: transform; transition: transform 0.15s ease-out; }

/* ---- Custom cursor (desktop, fine pointer only — added by JS) ---- */
.dzn-cursor {
  position: fixed; top: 0; left: 0; z-index: 999;
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--color-ink); color: var(--color-white);
  opacity: 0; transform: translate(-100px, -100px) scale(0.6);
  transition: opacity 0.25s ease, transform 0.05s linear, scale 0.25s ease;
  pointer-events: none;
}
.dzn-cursor.is-active { opacity: 1; scale: 1; }
@media (hover: none), (pointer: coarse) { .dzn-cursor { display: none; } }

/* ---- Form focus states (Section 19) ---- */
.contact-form input, .contact-form textarea { transition: border-color var(--dur-hover) ease; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-accent-pink); }