/* ── BASE ──────────────────────────────────────────── */
/* The cdnfonts.com Metropolis stylesheet registers Thin/ExtraLight/Light
   AND Regular all under the identical (family: Metropolis, weight: 400,
   style: normal) descriptor — a bug on their end that makes font-weight:400
   resolve unpredictably. Re-declaring it here, after their <link>, wins
   font-matching for that exact descriptor and pins weight 400 to Regular. */
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 400;
  src: url("https://fonts.cdnfonts.com/s/16308/Metropolis-Regular.woff") format("woff");
}
/* Same fix, extended: Thin/ExtraLight/Light were ALSO all lumped under
   weight 400 by cdnfonts, leaving no distinct lighter weights at all. Giving
   them their own numeric slots makes font-weight: 100/200/300 actually mean
   something instead of silently matching back to Regular. */
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 300;
  src: url("https://fonts.cdnfonts.com/s/16308/Metropolis-Light.woff") format("woff");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 200;
  src: url("https://fonts.cdnfonts.com/s/16308/Metropolis-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 100;
  src: url("https://fonts.cdnfonts.com/s/16308/Metropolis-Thin.woff") format("woff");
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* ── DESIGN TOKENS ─────────────────────────────────────
   Introduced for citymapia-tool.html's premium treatment — the rest of
   this file still uses inline hex directly (out of scope to retrofit). */
:root {
  --color-accent: #F00E4B;
  --color-dark: #0a0a0a;
  --color-text-on-dark: #fafaf9;
}
/* scroll-behavior intentionally omitted: Lenis (script.js) drives smooth
   scrolling; native smooth-scroll would fight its own scrollTo animation */
body {
  font-family: "Metropolis", "Jost", system-ui, sans-serif;
  background: #fff;
  color: #111;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* !important is deliberate here: dozens of individual heading classes
   throughout the file set their own font-weight (200/300/500/700...) for
   visual variety — this is a global reset so every h1-h4 renders at 200
   regardless, per explicit request, without having to hunt down each one. */
h1,
h2,
h3,
h4 {
  font-family: "Metropolis", "Jost", system-ui, sans-serif;
  font-weight: 200 !important;
}
::selection {
  background: rgba(240, 14, 75, 0.15);
}
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  background: #fff;
}
::-webkit-scrollbar-thumb {
  background: #111;
}
/* ── CUSTOM CURSOR (dot + trailing ring) ─────────────── */
/* Enabled only via JS on fine-pointer devices with motion allowed;
   `cursor-active` on <html> both reveals these and hides the native
   cursor, so there's never a double-cursor flash on touch/reduced-motion. */
html.cursor-active,
html.cursor-active a,
html.cursor-active button {
  cursor: none;
}
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease;
}
html.cursor-active .cursor-dot,
html.cursor-active .cursor-ring {
  opacity: 1;
}
.cursor-dot {
  width: 7px;
  height: 7px;
  background: #0a0a0a;
  will-change: transform;
  transition:
    opacity 0.25s ease,
    background 0.3s ease;
}
.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(10, 10, 10, 0.45);
  will-change: transform, width, height, background;
  transition:
    opacity 0.25s ease,
    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease,
    border-color 0.3s ease;
}
/* Cursor sits over a dark-background section/element — flip to white
   for contrast, mirroring the adaptive nav-theme logic used elsewhere. */
.cursor-dot.cursor-light {
  background: #fff;
}
.cursor-ring.cursor-light {
  border-color: rgba(255, 255, 255, 0.55);
}
.cursor-ring.cursor-hover {
  width: 64px;
  height: 64px;
  background: rgba(10, 10, 10, 0.08);
  border-color: #0a0a0a;
}
.cursor-ring.cursor-hover.cursor-light {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.cursor-dot.cursor-hover {
  opacity: 0;
}
.cursor-ring.cursor-down {
  width: 26px;
  height: 26px;
}

a {
  text-decoration: none;
}
p {
  font-size: 18px;
  font-weight: 200;
  line-height: 1.75;
  margin: 0;
}
@media (max-width: 639px) {
  p {
    font-size: 17px;
  }
}
/* ── PAGE LOADER (draw-a-path intro) ──────────────────── */
html.is-loading,
html.is-loading body {
  overflow: hidden;
  height: 100%;
}
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-loader-svg {
  width: clamp(160px, 22vw, 320px);
  height: auto;
}
.page-loader-shape {
  stroke: #F00E4B;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: #F00E4B;
  fill-opacity: 0;
}

/* ── CONTAINER ─────────────────────────────────────── */
.cm-wrap {
  max-width: 1650px;
  margin: 0 auto;
}
@media (max-width: 1650px) {
  .cm-wrap {
    padding: 0 clamp(20px, 4vw, 60px);
  }
}
#hero .cm-wrap {
  margin: unset;
  padding-left: clamp(20px, 4vw, 60px);
  padding-right: clamp(20px, 4vw, 60px);
}
.hero-content {
  padding-top: 80px;
  padding-bottom: 72px;
}
@media (max-width: 899px) {
  .hero-content {
    padding-top: 0;
    padding-bottom: 0;
  }
}
/* ── KEYFRAMES ─────────────────────────────────────── */
@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* ── SCROLL PROGRESS ───────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: #F00E4B;
  z-index: 9999;
  pointer-events: none;
}

/* ── FLOATING CONTACT WIDGET (radial fan-out) ───────── */
/* The outer box is deliberately bigger than the visible main button —
   it's the real hoverable hit-area, sized to cover the whole fan-out
   zone so moving the cursor from the main button toward a revealed
   item never exits the hover region and collapses the menu mid-travel. */
.floating-contact {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 900;
  width: 160px;
  height: 160px;
}
.floating-contact-main {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: #F00E4B;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s;
}
.floating-contact-main::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(240, 14, 75, 0.55);
  animation: floating-pulse 2.4s ease-out infinite;
}
.floating-contact.active .floating-contact-main {
  transform: rotate(-45deg) scale(1.05);
}
@media (hover: hover) and (pointer: fine) {
  .floating-contact:hover .floating-contact-main {
    transform: rotate(-45deg) scale(1.05);
  }
}
.floating-contact-item {
  position: absolute;
  z-index: 1;
  right: 5px;
  bottom: 5px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: translate(0, 0) scale(0.3);
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.25s ease;
}
.floating-contact-item--whatsapp {
  background: #25d366;
  --tx: -14px;
  --ty: -79px;
}
.floating-contact-item--call {
  background: #0a0a0a;
  border: 1.5px solid rgba(240, 14, 75, 0.5);
  --tx: -61px;
  --ty: -51px;
}
.floating-contact-item--email {
  background: #fff;
  color: #0a0a0a;
  --tx: -80px;
  --ty: 0px;
}
.floating-contact.active .floating-contact-item {
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--tx), var(--ty)) scale(1);
}
.floating-contact.active .floating-contact-item--whatsapp {
  transition-delay: 0s, 0s;
}
.floating-contact.active .floating-contact-item--call {
  transition-delay: 0.05s, 0.05s;
}
.floating-contact.active .floating-contact-item--email {
  transition-delay: 0.1s, 0.1s;
}
/* Hover-driven variants only for real mouse input — on touch devices,
   tapping can leave a "sticky" synthetic :hover state active after the
   tap ends, fighting with the JS click-toggled .active class below and
   making the widget seem to not close properly. Touch relies purely on
   .active (toggled in script.js), never on :hover. */
@media (hover: hover) and (pointer: fine) {
  .floating-contact:hover .floating-contact-item {
    opacity: 1;
    pointer-events: auto;
    transform: translate(var(--tx), var(--ty)) scale(1);
  }
  .floating-contact:hover .floating-contact-item--whatsapp {
    transition-delay: 0s, 0s;
  }
  .floating-contact:hover .floating-contact-item--call {
    transition-delay: 0.05s, 0.05s;
  }
  .floating-contact:hover .floating-contact-item--email {
    transition-delay: 0.1s, 0.1s;
  }
  .floating-contact-item:hover {
    transform: translate(var(--tx), var(--ty)) scale(1.1) !important;
  }
}
@keyframes floating-pulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@media (max-width: 899px) {
  .floating-contact {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 639px) {
  .floating-contact {
    right: 18px;
    width: 130px;
    height: 130px;
  }
  .floating-contact-main {
    width: 48px;
    height: 48px;
  }
  .floating-contact-item {
    width: 40px;
    height: 40px;
  }
  .floating-contact-item--whatsapp {
    --tx: -12px;
    --ty: -68px;
  }
  .floating-contact-item--call {
    --tx: -52px;
    --ty: -44px;
  }
  .floating-contact-item--email {
    --tx: -68px;
    --ty: 0px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .floating-contact-main::after {
    animation: none;
  }
}

/* ── MOBILE BOTTOM NAV ───────────────────────────────── */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  background: rgba(10, 10, 10, 0.82);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-bottom-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 14, 75, 0.5), transparent);
}
@media (max-width: 899px) {
  .mobile-bottom-nav {
    display: flex;
  }
}
.mbn-link {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px 8px;
  color: rgba(255, 255, 255, 0.45);
}
.mbn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 26px;
  border-radius: 13px;
  background: transparent;
  transform: translateY(0) scale(1);
  transition:
    background 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.25s;
}
.mbn-icon svg {
  transition: transform 0.3s ease;
}
.mbn-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-family: "Metropolis", "Jost", sans-serif;
  transition: color 0.25s, opacity 0.25s;
  opacity: 0.8;
}
.mbn-link:hover .mbn-icon,
.mbn-link.active .mbn-icon {
  color: #F00E4B;
  background: rgba(240, 14, 75, 0.14);
  transform: translateY(-2px) scale(1.06);
}
.mbn-link.active .mbn-label {
  color: #fff;
  opacity: 1;
}

/* ── BOTTOM CTA STRIP ──────────────────────────────── */
/* Desktop/tablet-large only (>=900px) — the mobile bottom nav already
   owns that real estate below, so this doesn't compete with it. */
.cta-strip {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 970;
  background: linear-gradient(180deg, #141414 0%, #0a0a0a 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-strip::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #F00E4B, transparent);
}
@media (min-width: 900px) {
  .cta-strip {
    display: block;
  }
}
.cta-strip.visible {
  transform: translateY(0);
}
.cta-strip-inner {
  max-width: 1650px;
  margin: 0 auto;
  padding: 18px clamp(20px, 4vw, 60px);
  display: flex;
  align-items: center;
  gap: 24px;
}
.cta-strip-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(240, 14, 75, 0.12);
  color: #F00E4B;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-strip-text {
  flex: 1;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 200;
  line-height: 1.5;
  margin: 0;
}
.cta-strip-text strong {
  color: #fff;
  font-weight: 500;
}
.cta-strip-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.cta-strip-btn {
  padding: 14px 32px;
  background: #F00E4B;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  border-radius: 999px;
  white-space: nowrap;
  font-family: "Metropolis", "Jost", sans-serif;
  transition:
    background 0.3s,
    color 0.3s,
    transform 0.3s,
    box-shadow 0.3s;
}
.cta-strip-btn:hover {
  background: #fff;
  color: #0a0a0a;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(240, 14, 75, 0.35);
}
.cta-strip-close {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.3s;
}
.cta-strip-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}
@media (max-width: 1099px) {
  .cta-strip-text {
    display: none;
  }
  .cta-strip-icon {
    display: none;
  }
  .cta-strip-inner {
    justify-content: center;
  }
}
body.cta-strip-open .floating-contact {
  bottom: 106px;
}

/* ── EMAIL OPTIONS POPOVER ─────────────────────────── */
.email-menu {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1300;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 6px;
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.email-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.email-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  border-radius: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "Metropolis", "Jost", sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}
.email-menu-item:hover {
  background: #f5f5f5;
  color: #F00E4B;
}

/* ── COOKIE CONSENT ────────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 980;
  width: 380px;
  max-width: calc(100vw - 48px);
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition:
    opacity 0.45s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cookie-banner-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 10px;
}
.cookie-banner-text {
  font-size: 13px;
  font-weight: 200;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 20px;
}
.cookie-banner-link {
  color: #F00E4B;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-link:hover {
  color: #fff;
}
.cookie-banner-actions {
  display: flex;
  gap: 12px;
}
.cookie-banner-decline,
.cookie-banner-accept {
  flex: 1;
  padding: 11px 0;
  font-size: 13px;
  font-weight: 500;
  font-family: "Metropolis", "Jost", sans-serif;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.25s,
    color 0.25s,
    border-color 0.25s,
    transform 0.25s;
}
.cookie-banner-decline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.65);
}
.cookie-banner-decline:hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.cookie-banner-accept {
  background: #F00E4B;
  border: 1px solid #F00E4B;
  color: #fff;
}
.cookie-banner-accept:hover {
  background: #fff;
  border-color: #fff;
  color: #0a0a0a;
  transform: translateY(-2px);
}

/* ── LOGIN MODAL — visibility/opacity toggled by script.js, actual
   open/close motion (backdrop fade, card scale+y) is a GSAP timeline,
   not CSS transitions; the rules here just define the resting states. ── */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  visibility: hidden;
  pointer-events: none;
}
.login-modal.active { visibility: visible; pointer-events: auto; }
.login-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.6);
  opacity: 0;
}
.login-modal-card {
  position: relative;
  width: min(920px, 100%);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4);
  opacity: 0;
}
.login-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  transition: color 0.2s;
}
.login-modal-close:hover { color: #0a0a0a; }

/* Left: promo panel + reused mock Citypage card */
.login-modal-visual {
  flex: 1 1 44%;
  background: #0a0a0a;
  padding: clamp(32px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}
.login-modal-benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.login-modal-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.login-modal-benefits svg { flex-shrink: 0; margin-top: 3px; }

/* Right: form column */
.login-modal-form-col {
  flex: 1 1 56%;
  padding: clamp(32px, 4vw, 44px);
  overflow-y: auto;
}
.login-modal-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F00E4B;
  margin-bottom: 14px;
}
.login-modal-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin: 0 0 8px;
}
.login-modal-sub {
  font-size: 14px;
  font-weight: 300;
  color: #666;
  line-height: 1.6;
  margin: 0 0 24px;
}
.login-modal-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #0a0a0a;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.login-modal-google:hover { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.25); }
.login-modal-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.login-modal-divider::before, .login-modal-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.login-modal-form { display: flex; flex-direction: column; }
.login-modal-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}
.login-modal-input {
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-family: "Metropolis", "Jost", sans-serif;
  outline: none;
  margin-bottom: 18px;
  transition: border-color 0.2s;
}
.login-modal-input:focus { border-color: #F00E4B; }
.login-modal-forgot {
  align-self: flex-end;
  font-size: 12px;
  color: #F00E4B;
  margin-top: -10px;
  margin-bottom: 22px;
}
.login-modal-submit {
  padding: 15px;
  background: #F00E4B;
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
}
.login-modal-submit:hover { opacity: 0.88; }
.login-modal-signup {
  text-align: center;
  font-size: 13px;
  color: #666;
  margin: 22px 0 0;
}
.login-modal-signup a { color: #F00E4B; font-weight: 600; }
@media (max-width: 767px) {
  .login-modal-visual { display: none; }
  .login-modal-card { border-radius: 12px; }
}
@media (max-width: 899px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none;
  }
}
body.cta-strip-open .cookie-banner {
  bottom: 106px;
}

/* ── NAVBAR ────────────────────────────────────────── */
#main-nav {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition:
    background 0.35s,
    border-color 0.35s,
    box-shadow 0.3s;
  height: 80px;
  position: sticky;
  top: 0;
  z-index: 1000;
}
@media (max-width: 899px) {
  #main-nav {
    height: 64px;
  }
}
#main-nav.scrolled {
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.08);
}
/* Dark theme applied automatically while a dark-background section
   (.dark-section) sits directly beneath the sticky nav — see script.js.
   The hero is intentionally excluded, so scrolling through it never
   triggers this (nav stays in its default light state there). */
#main-nav.nav-dark {
  background: #0a0a0a;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
#main-nav.nav-dark.scrolled {
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}
#main-nav.nav-dark .nav-logo img {
  filter: brightness(0) invert(1);
}
#main-nav.nav-dark .nav-link {
  color: rgba(255, 255, 255, 0.6);
}
#main-nav.nav-dark .nav-link:hover {
  color: #fff;
}
#main-nav.nav-dark .nav-dropdown-menu {
  background: #0a0a0a;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
#main-nav.nav-dark .nav-dropdown-item {
  color: rgba(255, 255, 255, 0.6);
  border-top-color: rgba(255, 255, 255, 0.08);
}
#main-nav.nav-dark .nav-dropdown-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
#main-nav.nav-dark .nav-icon svg {
  stroke: #fff;
}
#main-nav.nav-dark .nav-icon:hover {
  background: rgba(255, 255, 255, 0.1);
}
.nav-inner {
  padding: 0 clamp(20px, 4vw, 60px);
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
}
.nav-logo {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.03em;
  z-index: 1;
}
.nav-logo img {
    max-width: 180px;
    margin-top: 6px;
    transition: filter 0.35s;
}
@media (max-width: 899px) {
  .nav-logo img {
    max-width: 130px;
    margin-top: 4px;
  }
}
@media (max-width: 480px) {
  .nav-logo img {
    max-width: 110px;
  }
}
.nav-logo:hover {
  color: #0a0a0a;
}
.nav-links-center {
  /* Was position:absolute + left:50%/translateX(-50%), centered on the
     full nav width regardless of how much room .nav-logo/.nav-right
     actually left available — that overlapped the account/search/
     hamburger cluster at almost every desktop width, including 1440px
     (confirmed via a full responsive audit). A flex:1 spacer between
     the two fixed-width ends centers this row within only the space
     actually left over, and overflow:hidden means it can never visually
     collide with its neighbors even in an edge case — it clips instead. */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
.nav-link {
  padding: 8px 14px;
  color: #555;
  font-size: 16px;
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
  transition: color 0.2s;
  cursor: pointer;
  background: none;
  border: none;
  font-family: "Metropolis", "Jost", sans-serif;
}
.nav-link:hover {
  color: #0a0a0a;
}
.nav-link--icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 6px;
}
.nav-link--icon svg {
  flex-shrink: 0;
  display: block;
  position: relative;
}
.nav-link--highlight {
  color: #F00E4B;
}
.nav-highlight-text {
  background-image: linear-gradient(100deg, #F00E4B 42%, #ffc2d1 50%, #F00E4B 58%);
  background-size: 300% 100%;
  background-position: 200% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
#main-nav.nav-dark .nav-highlight-text {
  background-image: linear-gradient(100deg, #ff7a94 42%, #ffe1e8 50%, #ff7a94 58%);
}
.nav-link--caret {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  gap: 5px;
}
.nav-caret {
  flex-shrink: 0;
  display: block;
  position: relative;
  top: 1px;
  transition: transform 0.25s ease;
}
.nav-dropdown {
  position: relative;
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s;
}
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown.is-open .nav-caret {
  transform: rotate(180deg);
}
.nav-dropdown-item {
  display: block;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 400;
  color: #555;
  font-family: "Metropolis", "Jost", sans-serif;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  transition: color 0.2s, background 0.2s;
}
.nav-dropdown-item:first-child {
  border-top: none;
}
.nav-dropdown-item:hover {
  color: #0a0a0a;
  background: rgba(10, 10, 10, 0.04);
}
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1;
}
.nav-icon {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 9px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition:
    opacity 0.2s,
    background 0.2s,
    transform 0.2s;
}
.nav-icon svg {
  width: 21px;
  height: 21px;
}
.nav-icon:hover {
  opacity: 1;
  background: rgba(10, 10, 10, 0.06);
  transform: scale(1.08);
}
/* Responsive: below tablet, the centered desktop link row has nowhere to
   go — hide it and let the hamburger (#menu-trigger) be the only nav
   affordance, matching the full-screen .mobile-menu it already opens. */
@media (max-width: 899px) {
  .nav-inner {
    padding: 0 20px;
  }
}
/* .nav-links-center's own content (Citypages pill + Company/About Us/Our
   Works/Services/Careers/Contact) only actually fits next to the logo and
   account/search/hamburger cluster from ~1280px up — measured directly
   (natural content width ~733px, first has room at viewport ~1280px).
   Below that it was either overlapping (old absolute-centered layout) or,
   after switching to a flex spacer, silently clipping off the last links.
   Hiding it in favor of the hamburger's already-existing full .mobile-menu
   avoids both. */
@media (max-width: 1279px) {
  .nav-links-center {
    display: none;
  }
  .nav-account {
    display: none;
  }
}

/* ── MEGA MENU ─────────────────────────────────────── */
#mega-menu {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 998;
  background: #0a0a0a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  visibility: hidden;
  opacity: 0;
}
.mega-inner-wrap {
  max-width: 1650px;
  margin: 0 auto;
  padding: 52px clamp(20px, 4vw, 60px) 56px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 72px;
}
.mega-col-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  margin-bottom: 28px;
  display: block;
}
.mega-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  font-size: 17px;
  font-weight: 400;
  transition:
    color 0.25s,
    transform 0.25s,
    padding-left 0.25s;
  font-family: "Metropolis", "Jost", sans-serif;
}
.mega-link:hover {
  color: #fff;
  padding-left: 8px;
}
.mega-link:hover .mega-link-num {
  color: #F00E4B;
}
.mega-link-num {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
  width: 20px;
  flex-shrink: 0;
  font-family: "Metropolis", "Jost", sans-serif;
  transition: color 0.25s;
}
.mega-featured-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  margin-bottom: 20px;
  display: block;
}
.mega-featured-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 200;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}
.mega-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: #F00E4B;
  border-bottom: 1px solid rgba(240, 14, 75, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.25s;
  font-family: "Metropolis", "Jost", sans-serif;
}
.mega-cta-link:hover {
  color: #F00E4B;
  border-color: #F00E4B;
}
.mega-cta-link .arrow {
  display: inline-block;
  transition: transform 0.3s;
}
.mega-cta-link:hover .arrow {
  transform: translateX(5px);
}
.mega-stat {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mega-stat-num {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 48px;
  font-weight: 200;
  color: #fff;
  letter-spacing: -0.04em;
  display: block;
  line-height: 1;
  margin-bottom: 8px;
}
.mega-stat-label {
  font-size: 14px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.4);
}

/* ── SEARCH OVERLAY ────────────────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s;
}
.search-overlay.active {
  opacity: 1;
  visibility: visible;
}
.search-close {
  position: absolute;
  top: 28px;
  right: 32px;
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s;
}
.search-close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}
.search-form {
  width: 100%;
  max-width: 760px;
  transform: translateY(-16px);
  opacity: 0;
  transition:
    transform 0.4s ease 0.1s,
    opacity 0.4s ease 0.1s;
}
@media (max-width: 899px) {
  .search-form {
    padding: 0 clamp(20px, 4vw, 40px);
  }
}
.search-overlay.active .search-form {
  transform: translateY(0);
  opacity: 1;
}
.search-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #F00E4B;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.search-field {
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 20px;
  transition: border-color 0.3s;
}
.search-field:focus-within {
  border-color: #F00E4B;
}
.search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(22px, 2.8vw, 44px);
  font-weight: 200;
  letter-spacing: -0.02em;
}
.search-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.search-submit {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 14, 75, 0.5);
  background: transparent;
  color: #F00E4B;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.search-submit:hover {
  background: #F00E4B;
  color: #fff;
  transform: scale(1.06);
}
@media (max-width: 639px) {
  .search-submit {
    width: 40px;
    height: 40px;
  }
}
.search-suggest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}
.search-suggest-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.35);
}
.search-suggest-link {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 6px 16px;
  transition:
    color 0.25s,
    border-color 0.25s,
    background 0.25s;
}
.search-suggest-link:hover {
  color: #fff;
  border-color: rgba(240, 14, 75, 0.5);
  background: rgba(240, 14, 75, 0.1);
}

/* ── MOBILE MENU ───────────────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: #0a0a0a;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0.4s;
}
.mobile-menu.active {
  opacity: 1;
  visibility: visible;
}
/* Bottom scroll-fade cue — a fixed gradient over the panel (not the
   scrolling inner content) so it's always visible as an ambient "there's
   more below" hint whenever the link list is taller than the viewport,
   without needing JS to track scroll position. */
.mobile-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, transparent, #0a0a0a 75%);
  pointer-events: none;
}
.mobile-menu-inner {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Scales from a tight mobile inset up to a deliberate, generous margin
     on wide screens — without this the link list ran edge-to-edge at
     every breakpoint, which read as an unfinished mobile layout simply
     stretched wide rather than something designed for the space.
     IMPORTANT: this element (not a child) is the overflow-y:auto scroll
     container, so it must stay full-width — a max-width here moves its
     scrollbar off the real viewport edge to wherever that cap lands,
     which reads as a broken/duplicate scrollbar and leaves a dead void
     beside it. The width cap below lives on the flex children instead,
     which caps the content's reading width without touching where the
     scrollbar renders. */
  padding: 40px clamp(20px, 7vw, 88px);
  position: relative;
  transform: translateY(-16px);
  opacity: 0;
  /* The transform/opacity transition below promotes this to its own
     compositing layer for the duration of the animation. Large thin-
     weight text painted on a composited layer loses subpixel (LCD) AA
     and shows an RGB fringe against the dark background — forcing plain
     grayscale AA here avoids that without touching how the type looks
     anywhere else on the site. */
  -webkit-font-smoothing: antialiased;
  transition:
    transform 0.4s ease 0.1s,
    opacity 0.4s ease 0.1s;
  /* justify-content:center with no scroll fallback pushed the first couple
     of links (Pricing, Company) entirely off-screen — unreachable — on
     any viewport shorter than the full link+account+footer stack (e.g.
     375×667, a very common phone size). overflow-y:auto alone isn't
     enough: centered flex content overflows symmetrically on BOTH ends,
     and a scroll container can only reach the "positive" (bottom) side by
     default, leaving the top-overflow part just as unreachable. The
     `safe` keyword falls back to start-alignment instead of centering
     once content no longer fits, which keeps every item within the
     scrollable/reachable range. (Older browsers that don't recognize
     `safe center` simply ignore this line and keep the plain `center`
     above — harmless progressive enhancement, not a hard dependency.) */
  overflow-y: auto;
  justify-content: safe center;
}
.mobile-menu.active .mobile-menu-inner {
  transform: translateY(0);
  opacity: 1;
}
.mobile-menu-close {
  position: absolute;
  top: 28px;
  right: clamp(20px, 7vw, 48px);
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s;
}
.mobile-menu-close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
}
.mobile-menu-link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 200;
  color: #fff;
  letter-spacing: -0.02em;
  transition:
    color 0.3s,
    padding-left 0.3s,
    border-color 0.3s;
}
.mobile-menu-link span {
  flex-shrink: 0;
  width: 30px;
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.3s;
}
.mobile-menu-link:hover {
  color: #F00E4B;
  padding-left: 12px;
  border-color: rgba(240, 14, 75, 0.25);
}
.mobile-menu-link:hover span {
  color: #F00E4B;
}
.mobile-menu-link:last-child {
  /* The account block right after this supplies its own border-top as
     the divider into that section — without this, the two hairlines sat
     back-to-back with nothing between them, reading as one redundant
     doubled-up line rather than two meaningful dividers. */
  border-bottom: none;
}
.mobile-menu-account {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mobile-menu-account-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.mobile-menu-account-link {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}
.mobile-menu-account-link:hover {
  color: #F00E4B;
}
.mobile-menu-footer {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.mobile-menu-copy {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.4);
}

/* ── HERO ──────────────────────────────────────────── */
#hero {
  background: #050505;
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  text-align: left;
  overflow: hidden;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 5, 5, 0.96) 0%, rgba(5, 5, 5, 0.8) 40%, rgba(5, 5, 5, 0.25) 75%, rgba(5, 5, 5, 0.05) 100%);
  z-index: 0;
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 100px 100px;
  pointer-events: none;
}
.hero-glow {
  position: absolute;
  right: 0;
  top: 0;
  width: 55%;
  height: 100%;
  background: radial-gradient(
    ellipse at 75% 35%,
    rgba(240, 14, 75, 0.06),
    transparent 55%
  );
  pointer-events: none;
}
#hero h1 {
  font-family: "Metropolis", "Jost", sans-serif;
  /* 9.5vw hit the 100px ceiling by ~1053px viewport width, so every
     laptop screen (1280-1536px) rendered identically to an ultra-wide
     monitor — reads as oversized on a smaller physical laptop display.
     6.5vw reaches the same ceiling closer to ~1540px, so laptop widths
     now scale gradually instead of plateauing immediately. */
  font-size: clamp(36px, 6.5vw, 100px);
  font-weight: 200;
  color: #fff;
  line-height: 1.08;
  letter-spacing: -0.04em;
  transform-origin: left center;
  will-change: transform, filter, opacity;
}
#hero .hero-sub {
  transform-origin: left center;
  will-change: transform, filter, opacity;
}
.hero-word {
  display: inline-block;
  overflow: hidden;
}
.hero-word-inner {
  display: inline-block;
}
#hero .hero-sub {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 200;
  color: rgba(255, 255, 255, 0.5);
  max-width: 520px;
  line-height: 1.72;
  margin: 28px 0 72px;
  opacity: 0;
}
.hero-tags {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  opacity: 0;
}
.hero-tag-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-right: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  margin-right: 28px;
  white-space: nowrap;
}
.hero-tag-shine {
  display: inline;
}
.hero-tag {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.48);
  font-weight: 200;
  padding-right: 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  margin-right: 22px;
}
.hero-tag:last-child {
  border-right: none;
  margin-right: 0;
}
.hero-badge-wrap {
  position: absolute;
  top: 50%;
  right: 220px;
  width: 180px;
  height: 180px;
  z-index: 2;
  transform: translateY(-50%);
  pointer-events: none;
}
.hero-badge {
  position: absolute;
  inset: 0;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
}
.hero-badge-img {
  width: 100%;
  height: 100%;
  animation: hero-badge-spin 10s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes hero-badge-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 899px) {
  #hero {
    height: auto;
    /* Also clear the fixed mobile bottom nav (~60px) plus its safe-area
       inset — otherwise the hero measures against the full viewport
       height as if that bar didn't exist, leaving the "first screen"
       taller than what's actually visible above the bar. */
    min-height: calc(100dvh - 64px - 60px - env(safe-area-inset-bottom, 0px));
    padding: 100px 0 56px;
  }
  .hero-badge-wrap {
    display: none;
  }
  #hero .hero-sub {
    margin: 20px 0 40px;
  }
  .hero-tags {
    row-gap: 12px;
  }
}
@media (max-width: 639px) {
  .hero-tag-label {
    padding-right: 0;
    border-right: none;
    margin-right: 0;
    width: 100%;
    margin-bottom: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-badge-img {
    animation: none;
  }
}

/* ── TICKER ────────────────────────────────────────── */
#ticker {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 40px 0;
  overflow: hidden;
}
@media (max-width: 639px) {
  #ticker {
    padding: 24px 0;
  }
}
.ticker-track {
  display: flex;
  animation: ticker 28s linear infinite;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}
.ticker-item {
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 200;
  color: #111;
  white-space: nowrap;
  padding: 0 32px;
}
.ticker-dot {
  font-size: clamp(34px, 3.8vw, 52px);
  font-weight: 200;
  color: #F00E4B;
  padding: 0 16px;
  line-height: 1;
}

/* ── SHARED SECTION STYLES ─────────────────────────── */
.section-label {
  font-size: 12px;
  font-weight: 500;
  color: #F00E4B;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 20px;
  display: block;
}
.section-label--dark {
  color: rgba(255, 255, 255, 0.6);
}
.section-h2 {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(36px, 4.5vw, 68px);
  font-weight: 200;
  color: #0a0a0a;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.section-h2--white {
  color: #fff;
}
.section-desc {
  font-size: 20px;
  font-weight: 200;
  line-height: 1.68;
  color: #666;
}
.section-desc--dark {
  color: rgba(255, 255, 255, 0.72);
}
@media (max-width: 639px) {
  .section-desc {
    font-size: 18px;
  }
}
.divider-line {
  padding-bottom: 52px;
}
.divider-line--dark {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 40px;
}
.section-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}
@media (max-width: 639px) {
  .section-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}
.work-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.clients-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: flex-end;
}
.journey-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.journey-content {
  transform-origin: left center;
  will-change: transform, filter, opacity;
}
@media (max-width: 899px) {
  .clients-grid,
  .journey-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* The desktop left panel (cinematic reveal on tab click) doesn't work
     well below it — instead each tab becomes an accordion that expands
     its own copy of that content directly beneath itself. */
  .journey-content {
    display: none;
  }
}

/* ── CITYPAGES (flagship feature) ─────────────────────── */
#citypages { background: #0a0a0a; padding: 140px 0; position: relative; overflow: hidden; }
@media (max-width: 899px) { #citypages { padding: 90px 0; } }
@media (max-width: 639px) { #citypages { padding: 72px 0; } }

.cp-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.cp-glow {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, rgba(240, 14, 75, 0.12), transparent 65%);
  pointer-events: none;
}

.cp-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 1100px) {
  .cp-layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .cp-visual {
    order: -1;
  }
}

.cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0 28px;
}
.cp-chip {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  padding: 8px 16px;
  white-space: nowrap;
}
.cp-live-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
}
.cp-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2ecc71;
  animation: cp-live-pulse 2s ease-out infinite;
}
@keyframes cp-live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(46, 204, 113, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
  }
}
.cp-live-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 300;
}
.cp-live-city {
  color: #fff;
  font-weight: 500;
}
.cp-cta {
  margin-top: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.cp-cta .arrow {
  display: inline-block;
  transition: transform 0.3s;
}
.cp-cta:hover .arrow {
  transform: translateX(4px);
}

.cp-mock {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.cp-mock-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: #f1f1f1;
  border-bottom: 1px solid #e4e4e4;
}
.cp-mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cp-mock-dot--r {
  background: #ff5f57;
}
.cp-mock-dot--y {
  background: #febc2e;
}
.cp-mock-dot--g {
  background: #28c840;
}
.cp-mock-url {
  margin-left: 10px;
  font-size: 12px;
  color: #8a8a8a;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 6px 12px;
  flex: 1;
  font-family: "Metropolis", "Jost", sans-serif;
}
.cp-mock-body {
  display: grid;
  grid-template-columns: 168px 1fr;
  min-height: 300px;
  background: #fafafa;
}
.cp-mock-rail {
  background: #fff;
  border-right: 1px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
}
.cp-mock-rail-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.cp-mock-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #F00E4B;
  flex-shrink: 0;
}
.cp-mock-rail-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  font-family: "Metropolis", "Jost", sans-serif;
}
.cp-mock-rail-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 500;
  color: #777;
  padding: 8px 9px;
  border-radius: 7px;
  font-family: "Metropolis", "Jost", sans-serif;
  white-space: nowrap;
}
.cp-mock-rail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
}
.cp-mock-rail-item--active {
  background: rgba(240, 14, 75, 0.08);
  color: #F00E4B;
}
.cp-mock-rail-item--active .cp-mock-rail-dot {
  background: #F00E4B;
}
.cp-mock-rail-cta {
  margin-top: auto;
  background: #F00E4B;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 10px 8px;
  border-radius: 8px;
  font-family: "Metropolis", "Jost", sans-serif;
}
.cp-mock-feed {
  padding: 18px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cp-mock-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 10px 14px;
}
.cp-mock-search-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #c9c9c9;
  flex-shrink: 0;
}
.cp-mock-search-bar {
  font-size: 12px;
  color: #aaa;
  font-family: "Metropolis", "Jost", sans-serif;
}
.cp-mock-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cp-mock-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cp-mock-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F00E4B, #ff7a93);
  flex-shrink: 0;
}
.cp-mock-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.cp-mock-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  font-family: "Metropolis", "Jost", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-mock-meta {
  font-size: 11px;
  color: #999;
}
.cp-mock-banner {
  height: 72px;
  border-radius: 8px;
}
.cp-mock-banner--a {
  background: linear-gradient(135deg, #ffd166, #F00E4B);
}
.cp-mock-caption {
  font-size: 11px;
  color: #555;
  line-height: 1.5;
  margin: 0;
}
.cp-mock-engage {
  display: flex;
  gap: 16px;
  padding-top: 10px;
  border-top: 1px solid #f2f2f2;
}
.cp-mock-engage-item {
  font-size: 11px;
  font-weight: 500;
  color: #888;
}
@media (max-width: 639px) {
  .cp-mock-body {
    grid-template-columns: 56px 1fr;
  }
  .cp-mock-rail {
    align-items: center;
    gap: 14px;
    padding: 16px 8px;
  }
  .cp-mock-rail-title,
  .cp-mock-rail-label,
  .cp-mock-rail-cta {
    display: none;
  }
  .cp-mock-rail-item {
    padding: 8px;
  }
  .cp-mock-banner {
    height: 64px;
  }
}


/* Fit the hero (badge + headline + search bar + stats) into the first
   screen, below the sticky 80px/64px nav, instead of spilling past it. */
.hero-fit { min-height: calc(100vh - 80px); display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 48px) 0; }
@media (max-width: 899px) {
  .hero-fit { min-height: calc(100vh - 64px); padding: clamp(24px, 5vw, 36px) 0; }
}

/* ── HERO DEMO MOCK (right column, homepage.js initHeroDemo) ──
   A small looping mock-browser animation: cursor "types" a business name
   into a search bar, shows a not-listed result, then "clicks" a list-it-
   free CTA and ends on a live listing card — replaces the earlier 3D
   globe with something that actually explains the product. Used by
   index-centered.html's demo-mock hero variant (not index.html, which
   uses the plain hero-video-panel instead). */
.hero-visual-glow {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(65%, 520px);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(240, 14, 75, 0.16), rgba(240, 14, 75, 0) 72%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}
.demo-mock {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  background: #0a0a0a;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}
/* Mobile-first fallback: below the lg breakpoint the text column is
   col-12 (full width, stacked), so the panel stays in normal flow,
   centered under the text — the edge-bleed absolute treatment below is
   only safe once the text is confined to the left half at >=992px. */
.hero-video-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 0;
}
@media (min-width: 992px) {
  /* At 1000px flat, the panel is wide enough to span the entire section
     right at 992-1199px (where the section itself is only ~1000-1200px),
     leaving no gap before the text column and crashing into the search
     form. Ramp the cap up with viewport width instead of a flat 1000px,
     reaching the full size only once there's room for it. */
  .hero-video-panel {
    position: absolute;
    right: 0;
    bottom: 50%;
    width: 100%;
    max-width: 480px;
    margin: 0;
    transform: translateY(50%);
  }
}
@media (min-width: 1200px) {
  .hero-video-panel { max-width: 700px; }
}
@media (min-width: 1400px) {
  .hero-video-panel { max-width: 1000px; }
}
.hero-video {
  display: block;
  width: 100%;
  height: auto;
}
.demo-mock-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.demo-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.demo-mock-url {
  margin-left: 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  font-family: "Metropolis", "Jost", sans-serif;
}
.demo-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.demo-step {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.demo-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.3s;
  flex-shrink: 0;
}
.demo-step-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.28);
  white-space: nowrap;
  transition: color 0.3s;
}
.demo-step-line { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.08); min-width: 8px; }
.demo-step.is-active .demo-step-dot { background: #F00E4B; box-shadow: 0 0 0 3px rgba(240, 14, 75, 0.2); }
.demo-step.is-active .demo-step-label { color: #fff; }
.demo-step.is-done .demo-step-dot { background: rgba(46, 204, 113, 0.8); }
.demo-step.is-done .demo-step-label { color: rgba(255, 255, 255, 0.45); }
.demo-mock-body { position: relative; padding: clamp(24px, 3vw, 32px); min-height: 360px; display: flex; flex-direction: column; gap: 18px; }
.demo-google-logo {
  text-align: center;
  font-family: Arial, "Metropolis", sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: opacity 0.3s;
}
/* Default state IS the Google search box (light pill, like the real
   thing) — .is-citypages is added by homepage.js partway through the
   loop once the demo "switches sites" to Citypages. */
.demo-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  padding: 13px 18px;
  flex-shrink: 0;
  transition: background 0.35s, border-radius 0.35s, border-color 0.35s;
}
.demo-search-bar svg { flex-shrink: 0; color: rgba(0, 0, 0, 0.4); transition: color 0.35s; }
.demo-search-text { color: #202124; font-size: 14px; font-family: "Metropolis", "Jost", sans-serif; transition: color 0.35s; }
.demo-search-bar.is-citypages {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 0;
}
/* Flatten the pill's bottom corners while the suggestions dropdown is
   open, so the search bar and the dropdown read as one continuous shape
   instead of a rounded edge sitting on top of a square one. */
.demo-search-bar.suggestions-open { border-radius: 24px 24px 0 0; }
.demo-search-bar.is-citypages svg { color: rgba(255, 255, 255, 0.4); }
.demo-search-bar.is-citypages .demo-search-text { color: #fff; }
.demo-blink-caret {
  display: inline-block;
  width: 1px;
  height: 15px;
  background: #F00E4B;
  margin-left: 1px;
  animation: demoBlink 1s step-end infinite;
}
@keyframes demoBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* Google-style autocomplete dropdown — shown only during the Google
   search stage, hidden once the demo "switches sites" to Citypages. */
.demo-google-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  z-index: 6;
}
.demo-suggestion-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 13px;
  color: #444;
  font-family: "Metropolis", "Jost", sans-serif;
  text-align: left;
}
.demo-suggestion-row svg { flex-shrink: 0; color: #9aa0a6; }
.demo-suggestion-row strong { color: #202124; font-weight: 600; }
.demo-stage { position: relative; flex: 1; }
.demo-result-notfound, .demo-result-cta, .demo-result-success {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
}
/* Google "not found" state: a couple of fake generic result skeletons
   (sells "this is a real search with real results") followed by a
   distinct dashed row for the searched business, echoing the same
   dashed "not listed" treatment used for the tease section's pain-point
   mockups elsewhere on this page. */
.demo-result-notfound { justify-content: flex-start; padding-top: 6px; gap: 14px; }
.demo-google-result-fake { width: 100%; max-width: 340px; text-align: left; }
.demo-google-result-line {
  height: 9px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-bottom: 6px;
  width: 85%;
}
.demo-google-result-line--title { width: 55%; height: 11px; background: rgba(255, 255, 255, 0.18); }
.demo-result-missing {
  width: 100%;
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  padding: 12px 14px;
  text-align: left;
}
.demo-result-missing span {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.demo-result-missing div { font-size: 12px; color: rgba(255, 255, 255, 0.55); line-height: 1.5; }
.demo-result-missing strong { color: #fff; font-weight: 600; }
.demo-result-cta-text { color: rgba(255, 255, 255, 0.6); font-size: 13px; margin-bottom: 16px; max-width: 260px; line-height: 1.5; }
.demo-cta-btn {
  position: relative;
  padding: 12px 24px;
  background: #F00E4B;
  color: #fff;
  border: none;
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.demo-result-cta-detail { margin-top: 14px; color: rgba(255, 255, 255, 0.4); font-size: 11px; letter-spacing: 0.01em; }
.demo-success-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px;
  width: 100%;
  max-width: 300px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}
.demo-success-avatar { width: 40px; height: 40px; background: #F00E4B; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; }
.demo-success-name { font-size: 14px; font-weight: 600; color: #fff; }
.demo-success-meta { font-size: 10px; color: rgba(255, 255, 255, 0.45); margin-top: 2px; }
.demo-success-badge { margin-left: auto; font-size: 8px; background: #F00E4B; color: #fff; padding: 3px 8px; font-weight: 700; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.demo-success-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: cp-live-pulse-white 1.6s ease-out infinite; }
@keyframes cp-live-pulse-white {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
  70% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.demo-success-msg { margin-top: 18px; color: #fff; font-size: 13px; }
.demo-success-stats {
  margin-top: 14px;
  display: flex;
  gap: 18px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}
.demo-success-stats strong { color: #fff; font-size: 13px; font-weight: 700; margin-right: 4px; }
.demo-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
}
.demo-cursor-hand {
  position: absolute;
  top: -7px;
  left: -10px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
  transform-origin: 45% 30%;
}
/* Expanding ring on click — the unmistakable "something was just clicked"
   signal, independent of how well the hand icon itself reads at a glance. */
.demo-cursor-ripple {
  position: absolute;
  top: -11px;
  left: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #F00E4B;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}
@media (max-width: 639px) {
  .demo-mock { display: none; }
  .hero-video-panel { display: none; }
}

/* ── HERO SEARCH BAR (category + city dropdowns, mirrors .nav-dropdown) ── */
/* position+z-index here (not just on .hero-dd-menu) because #h-search gets
   a GSAP y-tween for its entrance animation — a lingering `transform` on an
   ancestor creates its own stacking context, which traps the dropdown
   menu's z-index inside it. Without this, a later sibling with no
   transform of its own (#h-stats) paints over the open dropdown menu
   regardless of the menu's own z-index. */
#h-search { position: relative; z-index: 5; }
.hero-search-bar { display: flex; align-items: stretch; border: 1px solid rgba(0, 0, 0, 0.15); background: #fff; box-shadow: 0 24px 48px -16px rgba(10, 10, 10, 0.14); transition: box-shadow 0.25s ease; }
.hero-search-bar:hover, .hero-search-bar:focus-within { box-shadow: 0 28px 56px -14px rgba(10, 10, 10, 0.2); }
.hero-dd { position: relative; flex: 1; border-right: 1px solid rgba(0, 0, 0, 0.15); min-width: 0; }
.hero-dd-trigger {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 15px 18px;
  background: none;
  border: none;
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 14px;
  color: #0a0a0a;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}
.hero-dd-trigger:hover { background: rgba(10, 10, 10, 0.03); }
.hero-dd-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-dd-menu {
  /* position:fixed (not absolute) with top/left/min-width set inline by
     initHeroDropdown() in homepage.js on open — #hp-hero has its own
     overflow:hidden (to clip .hero-video-panel flush to the section
     edge), which would otherwise clip this menu's bottom the moment
     it's taller than the remaining space in the hero section. Fixed
     positioning escapes that clip entirely since it's relative to the
     viewport, not any ancestor. */
  position: fixed;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 1010;
  overflow: hidden;
}
.hero-dd.is-open .hero-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.hero-dd.is-open .nav-caret { transform: rotate(180deg); }
.hero-dd-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 400;
  color: #555;
  font-family: "Metropolis", "Jost", sans-serif;
  background: none;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.hero-dd-item:first-child { border-top: none; }
.hero-dd-item:hover { color: #0a0a0a; background: rgba(10, 10, 10, 0.04); }
.hero-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  background: #F00E4B;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.hero-search-submit:hover { opacity: 0.88; }
@media (max-width: 640px) {
  .hero-search-bar { flex-direction: column; }
  .hero-dd { border-right: none; border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
  .hero-search-submit { width: 100%; }
}

/* ── SERVICES ──────────────────────────────────────── */
#services {
  background: #fff;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
#services::before {
  content: "";
  position: absolute;
  top: -180px;
  left: -220px;
  width: 620px;
  height: 620px;
  background: radial-gradient(
    circle,
    rgba(240, 14, 75, 0.05),
    rgba(10, 10, 10, 0.025) 55%,
    transparent 75%
  );
  pointer-events: none;
  z-index: 0;
}
#services::after {
  content: "";
  position: absolute;
  top: 64px;
  right: 64px;
  width: 240px;
  height: 180px;
  background-image: radial-gradient(rgba(10, 10, 10, 0.16) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at top right, #000 35%, transparent 75%);
  mask-image: radial-gradient(ellipse at top right, #000 35%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
#services .cm-wrap {
  position: relative;
  z-index: 1;
}
.service-row {
  display: grid;
  grid-template-columns: minmax(90px, 120px) 1fr auto;
  align-items: start;
  gap: 32px;
  padding: 48px 0;
  border-bottom: 1px solid #e8e8e8;
  position: relative;
  transition: background 0.35s;
  cursor: default;
}
.service-row:hover {
  background: #fafafa;
}
.service-num {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(46px, 4.8vw, 68px);
  font-weight: 200;
  color: #e6e6e6;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 2px;
  transition: color 0.35s;
}
.service-row:hover .service-num {
  color: #dcdcdc;
}
.service-content {
  max-width: 600px;
}
.service-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 400;
  color: #0a0a0a;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.service-title::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  background: #F00E4B;
  margin-bottom: 14px;
}
.service-p {
  font-size: 18px;
  font-weight: 200;
  color: #777;
  line-height: 1.65;
  transition: color 0.35s;
}
@media (max-width: 639px) {
  .service-p {
    font-size: 17px;
  }
}
.service-row:hover .service-p {
  color: #444;
}
.service-arrow {
  width: 40px;
  height: 40px;
  border: 1.5px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 6px;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s;
}
.service-row:hover .service-arrow {
  background: #0a0a0a;
  border-color: #0a0a0a;
  transform: translate(2px, -2px);
}
.service-row:hover .service-arrow svg {
  stroke: #fff;
}
/* Hover image preview — desktop/mouse only. Gated on (hover: hover) and
   (pointer: fine) rather than a width breakpoint, since it's a mouse-only
   affordance that makes no sense on touch, even on a wide touch tablet. */
.service-preview {
  position: absolute;
  right: 80px;
  top: 50%;
  display: none;
  transform: translateY(-50%) translateX(50px) rotate(-9deg) scale(0.82);
  transform-origin: center bottom;
  width: 260px;
  opacity: 0;
  border-radius: 12px;
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.3);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .service-preview {
    display: block;
  }
  .service-row:hover .service-preview {
    opacity: 1;
    transform: translateY(-50%) translateX(0) rotate(-4deg) scale(1);
    box-shadow: 0 40px 70px -12px rgba(0, 0, 0, 0.4);
  }
}
.service-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain !important;
}
@media (max-width: 639px) {
  .service-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "num . arrow"
      "content content content";
    row-gap: 16px;
    padding: 32px 0;
  }
  .service-num {
    grid-area: num;
    font-size: 34px;
  }
  .service-content {
    grid-area: content;
    max-width: none;
  }
  .service-arrow {
    grid-area: arrow;
    margin-top: 0;
  }
}
.services-closing-cta {
  margin-top: 48px;
  text-align: center;
}

/* ── WORK SLIDER ───────────────────────────────────── */
#work {
  background: #0a0a0a;
  padding: 56px 0 0;
}
@media (max-width: 639px) {
  #work {
    padding: 40px 0 0;
  }
}
.work-header {
  max-width: 1650px;
  margin: 0 auto;
  padding: 0 0 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
@media (max-width: 1650px) {
  .work-header {
    padding: 0 clamp(20px, 4vw, 60px) 56px;
  }
}
@media (max-width: 639px) {
  .work-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}
.slider-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.slider-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.08);
}
.slider-btn:active {
  transform: scale(0.96);
}
.btn-see-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s;
  white-space: nowrap;
  font-family: "Metropolis", "Jost", sans-serif;
}
.btn-see-all:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  transform: translateY(-2px);
}
#work-slider {
  /* No extra bottom padding here — #team's own 120px top padding (the
     same section-gap convention used everywhere else on this page, e.g.
     #services/#stats) already provides the gap before it. The 180px
     added here on top of that was stacking to ~300px of dead space. */
  padding-bottom: 40px;
}
@media (max-width: 639px) {
  #work-slider {
    padding-bottom: 24px;
  }
}
.work-card {
  flex-shrink: 0;
  width: clamp(260px, 85vw, 480px);
}
@media (min-width: 640px) {
  .work-card {
    width: clamp(340px, 30vw, 480px);
  }
}
.work-card-img {
  height: 420px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}
.work-ext-link {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s;
}
.work-ext-link svg {
  transition: transform 0.3s;
}
.work-card:hover .work-ext-link {
  background: #F00E4B;
  border-color: #F00E4B;
}
.work-card:hover .work-ext-link svg {
  stroke: #fff;
  transform: rotate(45deg);
}
.wc-cat {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.wc-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 17px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 3px;
}
.wc-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
}

/* ── STATS ─────────────────────────────────────────── */
#stats {
  background: #fff;
  padding: 40px 0;
  border-top: 1px solid #e8e8e8;
}
@media (max-width: 639px) {
  #stats {
    padding: 24px 0;
  }
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #e8e8e8;
}
.stat-box {
  background: #fff;
  padding: 52px 44px;
}
.stat-box:nth-child(2),
.stat-box:nth-child(3) {
  text-align: center;
}
.stat-box:nth-child(4) {
  text-align: right;
}
@media (max-width: 899px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-box {
    padding: 36px 24px;
  }
  .stat-box:nth-child(2) {
    text-align: right;
  }
  .stat-box:nth-child(3) {
    text-align: left;
  }
  .stat-box:nth-child(4) {
    text-align: right;
  }
}
@media (max-width: 639px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }
  .stat-box {
    padding: 28px 20px;
  }
  .stat-box:nth-child(2),
  .stat-box:nth-child(3),
  .stat-box:nth-child(4) {
    text-align: left;
  }
}
.stat-num {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(52px, 6vw, 90px);
  font-weight: 200;
  color: #0a0a0a;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.04em;
}
.stat-label {
  font-size: 17px;
  font-weight: 400;
  color: #888;
}
.stats-closing-cta {
  margin-top: 56px;
  text-align: center;
}
@media (max-width: 899px) {
  .stats-closing-cta {
    margin-top: 40px;
  }
}
.stats-closing-text {
  font-size: 18px;
  color: #555;
  margin-bottom: 20px;
}
#stats .btn-ol {
  border-color: rgba(10, 10, 10, 0.2);
  color: #0a0a0a;
}
#stats .btn-ol:hover {
  border-color: rgba(10, 10, 10, 0.5);
  color: #0a0a0a;
  background: rgba(10, 10, 10, 0.05);
}

/* ── TRUST MARQUEE ─────────────────────────────────── */
#trust-marquee {
  background: #fff;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 56px 0;
  overflow: hidden;
}
@media (max-width: 639px) {
  #trust-marquee {
    padding: 32px 0;
  }
}
.trust-track {
  display: flex;
  align-items: center;
  animation: ticker 35s linear infinite;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}
.trust-item {
  font-family: "Syne", "Jost", sans-serif;
  font-size: clamp(42px, 4.8vw, 68px);
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding: 0 40px;
}
.trust-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ff5a5f;
  flex-shrink: 0;
}

/* ── DECORATIVE BLEEDING-EDGE SHAPE (Clients, Journey, Brands) ──
   A quiet ambient wireframe graphic that sits at each section's right
   edge, partially cropped by the viewport (relies on body's existing
   overflow-x:hidden for the clip — no need for overflow:hidden here,
   that would just fight the bleed effect). Rotation is scroll-scrubbed
   in script.js, not auto-looping. */
/* Split into an outer wrapper (static position + vertical centering, and
   the mirror flip for the left variant) and an inner img that carries NO
   CSS transform of its own — GSAP's rotation tween owns .deco-shape's
   transform exclusively, so it never fights a pre-existing translateY/
   scaleX baked in via CSS (which is what silently broke rotation on the
   mirrored variant). */
.deco-shape-wrap {
  position: absolute;
  top: 50%;
  right: -70px;
  transform: translateY(-50%);
  width: clamp(180px, 22vw, 260px);
  pointer-events: none;
  z-index: 0;
}
.deco-shape-wrap--left {
  right: auto;
  left: -70px;
  transform: translateY(-50%) scaleX(-1);
}
.deco-shape {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}
@media (max-width: 899px) {
  .deco-shape-wrap {
    display: none;
  }
}

/* ── CLIENTS ───────────────────────────────────────── */
#clients {
  background: #0a0a0a;
  padding: 120px 0;
}
.clients-heading {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(56px, 6.2vw, 96px);
  font-weight: 200;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.04em;
}
.clients-desc {
  font-size: 20px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
}
@media (max-width: 639px) {
  .clients-desc {
    font-size: 18px;
  }
}
.clients-row {
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 44px 0;
}
.clients-row--last {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cl-swiper {
  width: 100%;
  overflow: hidden;
}
.cl-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
  will-change: transform;
}
.cl-slide {
  width: auto;
  display: flex;
  align-items: center;
  gap: 32px;
}
.cl-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 210px;
  height: 72px;
}
@media (max-width: 639px) {
  .cl-slide {
    gap: 20px;
  }
  .cl-logo {
    width: 130px;
    height: 48px;
  }
}
.cl-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(100%) brightness(2.1) contrast(0.9);
  opacity: 0.85;
  transition: 0.3s;
}
.cl-logo img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.05);
}
.cl-dot {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, transparent, #F00E4B, transparent);
  flex-shrink: 0;
}
.btn-clients {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 15px;
  font-weight: 500;
  transition:
    border-color 0.3s,
    color 0.3s,
    transform 0.3s;
  letter-spacing: 0.02em;
}
.btn-clients:hover {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  transform: translateY(-2px);
}
.btn-clients svg {
  transition: transform 0.3s;
}
.btn-clients:hover svg {
  transform: translateX(4px);
}

/* ── JOURNEY ───────────────────────────────────────── */
#journey {
  background: #0a0a0a;
  padding: 120px 0;
}
.journey-steps {
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.journey-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 32px;
  background: #111;
  cursor: pointer;
  transition: background 0.3s;
}
.journey-step + .journey-step {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.journey-step:hover {
  background: #181818;
}
.journey-step.active {
  background: #161616;
}
.step-num {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: 600;
  font-family: "Metropolis", "Jost", sans-serif;
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
}
.journey-step.active .step-num {
  background: #F00E4B;
  border-color: #F00E4B;
  color: #fff;
}
.step-body {
  min-width: 0;
}
.step-title {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 6px;
}
.step-desc {
  font-size: 16px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.55;
}
/* Mobile-only accordion expansion — collapsed by default, opens when its
   .journey-step gets .active (the same class the existing click/autoplay
   logic already toggles, so no separate interaction code is needed here). */
.step-expand {
  display: none;
}
@media (max-width: 899px) {
  .step-expand {
    display: block;
    /* Pull back out of .step-body's indent (step-num's 36px width + the
       row's 20px gap) so this content — and its top divider — starts flush
       with the number badge's left edge instead of lining up with the
       title text above it. */
    margin-left: -56px;
    width: calc(100% + 56px);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease,
      margin-top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .journey-step.active .step-expand {
    max-height: 320px;
    opacity: 1;
    margin-top: 18px;
  }
  /* A visible divider (instead of just spacing) makes this read as "more
     detail below" rather than a second block competing with .step-title/
     .step-desc right above it. */
  .step-expand-label {
    padding-top: 16px;
    padding-left: 56px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    font-weight: 500;
    color: #F00E4B;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
  }
  .step-expand-desc {
    padding-left: 56px;
    font-size: 15px;
    font-weight: 200;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.6;
  }
}
.btn-fill {
  padding: 14px 32px;
  background: #fff;
  color: #0a0a0a;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Metropolis", "Jost", sans-serif;
}
.btn-fill:hover {
  background: #F00E4B;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(240, 14, 75, 0.35);
}
.btn-fill .arrow {
  display: inline-block;
  transition: transform 0.3s;
}
.btn-fill:hover .arrow {
  transform: translateX(4px);
}
.btn-ol {
  padding: 14px 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-weight: 500;
  transition: all 0.3s;
  display: inline-block;
  font-family: "Metropolis", "Jost", sans-serif;
}
.btn-ol:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-3px);
}

/* ── SOFTWARE ──────────────────────────────────────── */
#software {
  background: #fff;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
#software::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 220px;
  height: 200px;
  background-image: radial-gradient(rgba(240, 14, 75, 0.14) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at bottom left, #000 35%, transparent 75%);
  mask-image: radial-gradient(ellipse at bottom left, #000 35%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}
#software .cm-wrap {
  position: relative;
  z-index: 1;
}
.sw-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 64px;
}
.sw-header-desc {
  max-width: 380px;
  border-left: 2px solid #F00E4B;
  padding-left: 24px;
  margin-top: 10px;
}
.sw-accent-dot {
  color: #F00E4B;
}
.sw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #e8e8e8;
}
.sw-card {
  background: #fff;
  padding: 0 36px;
}
.sw-card:first-child {
  padding-left: 0;
}
.sw-card:last-child {
  padding-right: 0;
}
@media (max-width: 899px) {
  .sw-header {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 40px;
  }
  .sw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sw-card {
    padding: 24px;
  }
  .sw-card:first-child,
  .sw-card:last-child {
    padding: 24px;
  }
}
@media (max-width: 639px) {
  .sw-grid {
    grid-template-columns: 1fr;
  }
}
.sw-num {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #F00E4B;
  letter-spacing: 0.02em;
  display: block;
}
.sw-num::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: #F00E4B;
  margin-top: 14px;
}
.sw-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: #0a0a0a;
  margin: 26px 0 14px;
  letter-spacing: -0.02em;
}
@media (max-width: 639px) {
  .sw-title {
    font-size: 20px;
    margin: 20px 0 10px;
  }
}
.sw-p {
  font-size: 18px;
  font-weight: 200;
  color: #666;
  line-height: 1.65;
  max-width: 240px;
}
@media (max-width: 639px) {
  .sw-p {
    font-size: 17px;
  }
}
.sw-link {
  margin-top: 18px;
}

/* ── MID-PAGE CTA BANNER ───────────────────────────── */
#mid-cta {
  background: #0a0a0a;
  padding: 100px 0 120px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
@media (max-width: 899px) {
  #mid-cta {
    padding: 72px 0 88px;
  }
}
@media (max-width: 639px) {
  #mid-cta {
    padding: 52px 0 64px;
  }
}
#citypages-cta {
  background: #fff;
  padding: 100px 0 120px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
@media (max-width: 899px) {
  #citypages-cta {
    padding: 72px 0 88px;
  }
}
@media (max-width: 639px) {
  #citypages-cta {
    padding: 52px 0 64px;
  }
}
#citypages-cta .mid-cta-heading {
  color: #0a0a0a;
}
#citypages-cta .mid-cta-sub {
  color: rgba(10, 10, 10, 0.55);
}
#citypages-cta .mid-cta-divider {
  background: rgba(10, 10, 10, 0.15);
}
#citypages-cta .mid-cta-or {
  color: rgba(10, 10, 10, 0.4);
}
#citypages-cta .mid-cta-call {
  color: rgba(10, 10, 10, 0.55);
}
#citypages-cta .mid-cta-call strong {
  color: #0a0a0a;
}
#citypages-cta .mid-cta-call:hover {
  color: rgba(10, 10, 10, 0.85);
}
#citypages-cta .mid-cta-grid-bg {
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.03) 1px, transparent 1px);
}
#citypages-cta .mid-cta-glow {
  background: radial-gradient(circle, rgba(240, 14, 75, 0.08), transparent 65%);
}
#citypages-cta .btn-fill {
  background: #0a0a0a;
  color: #fff;
}
#citypages-cta .btn-fill:hover {
  background: #F00E4B;
  color: #fff;
}
.mid-cta-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.mid-cta-glow {
  position: absolute;
  top: 40%;
  right: 10%;
  width: 700px;
  height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(240, 14, 75, 0.14), transparent 65%);
  pointer-events: none;
}
.mid-cta-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.mid-cta-inner {
  position: relative;
  z-index: 1;
}
.mid-cta-heading {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(32px, 3.6vw, 56px);
  font-weight: 200;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.mid-cta-accent {
  color: #F00E4B;
}
.mid-cta-sub {
  font-size: 20px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 40px;
}
@media (max-width: 639px) {
  .mid-cta-sub {
    font-size: 18px;
  }
}
.mid-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
.mid-cta-divider {
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.15);
}
.mid-cta-or {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.4);
}
.mid-cta-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s;
}
.mid-cta-call strong {
  color: #fff;
  font-weight: 500;
  border-bottom: 1px solid rgba(240, 14, 75, 0.5);
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
.mid-cta-call:hover {
  color: rgba(255, 255, 255, 0.85);
}
.mid-cta-call:hover strong {
  border-color: #F00E4B;
}
.mid-cta-call-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 14, 75, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F00E4B;
  flex-shrink: 0;
  transition:
    background 0.3s,
    border-color 0.3s;
}
.mid-cta-call:hover .mid-cta-call-icon {
  background: #F00E4B;
  border-color: #F00E4B;
  color: #fff;
}

/* ── JOIN OUR COMMUNITY (white theme, no border-radius anywhere) ── */
#social {
  background: #fff;
  padding: 120px 0;
}
.section-label-dot {
  width: 6px;
  height: 6px;
  background: #F00E4B;
  display: inline-block;
  margin-right: 8px;
}
.social-accent {
  font-style: normal;
  color: #F00E4B;
}
.social-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #e8e8e8;
}
.social-card {
  position: relative;
  background: #fff;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s;
}
.social-card:hover {
  background: rgba(240, 14, 75, 0.035);
  border-color: rgba(240, 14, 75, 0.35);
  transform: translateY(-5px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.1);
  z-index: 1;
}
.social-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F00E4B;
  color: #fff;
  transition:
    background 0.3s,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.social-card:hover .social-icon {
  background: #0a0a0a;
  transform: scale(1.12) rotate(-6deg);
}
.social-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.social-name {
  font-size: 16px;
  font-weight: 500;
  color: #0a0a0a;
  font-family: "Metropolis", "Jost", sans-serif;
}
.social-handle {
  font-size: 14px;
  font-weight: 200;
  color: #888;
}
.social-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #ddd;
  color: #0a0a0a;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s;
}
.social-card:hover .social-arrow {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #fff;
  transform: translate(2px, -2px);
}
@media (max-width: 899px) {
  .social-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 40px;
  }
  .social-card {
    padding: 22px;
    gap: 12px;
  }
}
@media (max-width: 639px) {
  .social-grid {
    grid-template-columns: 1fr;
  }
  .social-icon {
    width: 38px;
    height: 38px;
  }
  .social-arrow {
    width: 28px;
    height: 28px;
  }
  .social-name {
    font-size: 15px;
  }
}

/* ── PROCESS ───────────────────────────────────────── */
#process {
  background: #0a0a0a;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.process-glow {
  position: absolute;
  top: 50%;
  right: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(240, 14, 75, 0.05), transparent 70%);
  transform: translateY(-50%);
  pointer-events: none;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 899px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 899px) {
  .process-card {
    padding: 36px;
  }
}
@media (max-width: 639px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
  .process-card {
    padding: 32px 24px;
    min-height: unset;
  }
}
.process-card {
  background: #111;
  padding: 44px;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  transition: background 0.3s;
  cursor: default;
}
.process-card:hover {
  background: #161616;
}
.proc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.proc-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  line-height: 1.25;
  max-width: 200px;
}
@media (max-width: 639px) {
  .proc-title {
    font-size: 18px;
  }
}
.proc-arrow {
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s;
}
.proc-arrow svg {
  transition: stroke 0.3s;
}
.process-card:hover .proc-arrow {
  background: #F00E4B;
  border-color: #F00E4B;
  transform: translate(2px, -2px);
}
.process-card:hover .proc-arrow svg {
  stroke: #fff;
}
.proc-desc {
  font-size: 18px;
  font-weight: 200;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.72);
  flex: 1;
  padding-bottom: 24px;
}
@media (max-width: 639px) {
  .proc-desc {
    font-size: 17px;
  }
}
.proc-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.proc-step-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.28);
  margin-bottom: 2px;
}
.proc-step-num {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 42px;
  font-weight: 200;
  color: #F00E4B;
  line-height: 1;
}
.proc-icon {
  width: 96px;
  height: 84px;
  background: #1c1c1c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.proc-icon svg {
  stroke: #F00E4B;
}
.process-closing-cta {
  margin-top: 48px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ── SHOWCASE ──────────────────────────────────────── */
#showcase {
  background: #0a0a0a;
  padding: 120px 0 140px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 899px) {
  #showcase {
    padding: 88px 0 100px;
  }
}
@media (max-width: 639px) {
  #showcase {
    padding: 64px 0 72px;
  }
}
.showcase-glow {
  position: absolute;
  top: 10%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(240, 14, 75, 0.1), transparent 65%);
  pointer-events: none;
}
.showcase-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.showcase-marquee {
  position: relative;
  z-index: 1;
  margin-top: 64px;
}
@media (max-width: 899px) {
  .showcase-marquee {
    margin-top: 40px;
  }
}
.showcase-swiper {
  overflow: hidden;
}
@media (max-width: 1650px) {
  .showcase-swiper {
    padding: 0 clamp(20px, 4vw, 60px);
  }
}
.showcase-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
  will-change: transform;
}
.showcase-item {
  width: min(85vw, 340px);
  height: 420px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #111;
  position: relative;
  cursor: pointer;
  transition: border-color 0.3s;
}
.showcase-item:hover {
  border-color: rgba(240, 14, 75, 0.4);
}
.showcase-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.showcase-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  opacity: 0;
  transition:
    opacity 0.3s,
    background 0.3s;
}
.showcase-item:hover .showcase-zoom {
  opacity: 1;
}
.showcase-zoom:hover {
  background: #F00E4B;
}
.showcase-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 260px;
  z-index: 5;
  background: linear-gradient(
    to top,
    #0a0a0a 0%,
    #0a0a0a 20%,
    rgba(10, 10, 10, 0.9) 34%,
    rgba(10, 10, 10, 0.72) 48%,
    rgba(10, 10, 10, 0.5) 62%,
    rgba(10, 10, 10, 0.28) 76%,
    rgba(10, 10, 10, 0.1) 90%,
    transparent 100%
  );
  pointer-events: none;
}

/* ── SHOWCASE LIGHTBOX ──────────────────────────────── */
.showcase-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(5, 5, 5, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s;
}
.showcase-lightbox.active {
  opacity: 1;
  visibility: visible;
}
.showcase-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  transform: scale(0.94);
  transition: transform 0.35s ease;
}
.showcase-lightbox.active .showcase-lightbox-img {
  transform: scale(1);
}

/* ── TESTIMONIALS (company.html — plain white Swiper slider) ──
   Prefixed co-testi-* on the card/quote-mark/avatar pieces specifically
   because those three class names were reused (unrelated, unnamespaced)
   by the homepage's dark card-stack testimonial slider declared later in
   this file — the later rule silently won the cascade and made these
   cards render as absolutely-positioned dark-on-dark boxes. ── */
#testimonials {
  background: #fff;
  padding: 120px 0;
}
.testi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}
@media (max-width: 639px) {
  .testi-header {
    flex-direction: column;
    gap: 24px;
  }
  .testi-header-right {
    width: 100%;
    justify-content: space-between;
  }
  .testi-header-desc {
    max-width: none;
  }
}
.testi-header .section-label::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: #F00E4B;
  margin-top: 14px;
  margin-bottom: 14px;
}
.testi-accent {
  color: #F00E4B;
}
.testi-header-right {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-shrink: 0;
}
.testi-header-desc {
  max-width: 320px;
  border-left: 2px solid #F00E4B;
  padding-left: 24px;
  margin-top: 10px;
}
.testi-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 10px;
}
.testi-nav-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(10, 10, 10, 0.15);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.testi-nav-btn:hover {
  background: rgba(10, 10, 10, 0.05);
  border-color: rgba(10, 10, 10, 0.35);
  transform: scale(1.08);
}
.testi-nav-btn:active {
  transform: scale(0.96);
}
.testi-nav-btn.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}
.testi-swiper {
  margin-top: 60px;
  overflow: hidden;
}
.testi-swiper .swiper-wrapper {
  align-items: stretch;
}
.co-testi-card {
  background: #fff;
  padding: 44px;
  height: auto;
  display: flex;
  flex-direction: column;
}
.co-testi-card + .co-testi-card {
  border-left: 1px solid #e8e8e8;
}
.testi-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 44px;
}
.testi-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0e0e0;
  opacity: 1;
  margin: 0 !important;
  transition:
    background 0.3s,
    width 0.3s;
}
.testi-pagination .swiper-pagination-bullet-active {
  background: #F00E4B;
  width: 22px;
  border-radius: 4px;
}
.testi-closing-cta {
  margin-top: 40px;
  text-align: center;
}
.co-testi-quote-mark {
  font-family: Georgia, serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 0.7;
  color: #F00E4B;
  margin-bottom: 24px;
}
.testi-text {
  font-size: 18px;
  font-weight: 200;
  line-height: 1.78;
  color: #333;
  flex: 1;
  margin-bottom: 36px;
}
@media (max-width: 639px) {
  .testi-text {
    font-size: 17px;
  }
}
.testi-author-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid #e8e8e8;
  padding-top: 24px;
}
.co-testi-avatar {
  width: 44px;
  height: 44px;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
  font-family: "Metropolis", "Jost", sans-serif;
}
.testi-author-name {
  font-size: 15px;
  font-weight: 600;
  color: #0a0a0a;
  margin-bottom: 3px;
}
.testi-author-role {
  font-size: 13px;
  color: #999;
}

/* ── TEAM ──────────────────────────────────────────── */
#team {
  background: #0a0a0a;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.team-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.team-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
.team-list-text {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.team-list-name {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.3s ease;
}
.team-list-item:hover .team-list-name {
  color: #fff;
}
.team-list-role {
  font-size: 14px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.35);
}
.team-list-arrow {
  font-size: 18px;
  color: #F00E4B;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.team-list-item:hover .team-list-arrow {
  opacity: 1;
  transform: translateX(0);
}
.team-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 280px;
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
  overflow: hidden;
  pointer-events: none;
  z-index: 1200;
  opacity: 0;
  transform: scale(0.9);
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  will-change: transform;
}
.team-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
@media (max-width: 899px) {
  .team-list {
    grid-template-columns: 1fr;
  }
  .team-preview {
    display: none;
  }
}
@media (max-width: 639px) {
  .team-list-name {
    font-size: 19px;
  }
}

/* ── BRAND NETWORK ─────────────────────────────────── */
#brands {
  background: #0a0a0a;
  padding: 120px 0;
  position: relative;
}
/* Brand cards used to be a static 3-col grid; now a Swiper carousel
   (same pattern as .testi-swiper below) since a 4th card no longer
   fits evenly. Divider between cards comes from the sibling combinator
   instead of a per-card inline border, so adding/removing a card never
   needs a manual border fixup. */
.brand-header-right {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.brand-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-nav-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  flex-shrink: 0;
}
.brand-nav-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.35);
  transform: scale(1.08);
}
.brand-nav-btn:active { transform: scale(0.96); }
.brand-nav-btn.swiper-button-disabled { opacity: 0.3; cursor: default; }
.brand-swiper {
  margin-top: 52px;
  overflow: hidden;
}
.brand-swiper .swiper-wrapper { align-items: stretch; }
.brand-card {
  background: #111;
  padding: 52px;
  transition: background 0.3s;
  cursor: default;
  display: flex;
  flex-direction: column;
  height: auto;
}
.brand-card:hover {
  background: #161616;
}
.brand-card + .brand-card {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.brand-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}
.brand-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  opacity: 1;
  margin: 0 !important;
  transition: background 0.3s, width 0.3s;
}
.brand-pagination .swiper-pagination-bullet-active {
  background: #F00E4B;
  width: 22px;
  border-radius: 4px;
}
@media (max-width: 899px) {
  .brand-card {
    padding: 32px;
  }
}
.brand-logo-box {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 24px;
  background: #fff;
  border-radius: 6px;
  padding: 10px;
}
.brand-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-name {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 16px;
}
@media (max-width: 639px) {
  .brand-name {
    font-size: 19px;
  }
}
.brand-desc {
  font-size: 18px;
  font-weight: 200;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 28px;
  flex: 1;
}
@media (max-width: 639px) {
  .brand-desc {
    font-size: 17px;
  }
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 2px;
  transition: all 0.3s;
  font-family: "Metropolis", "Jost", sans-serif;
  align-self: flex-start;
}
.brand-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.brand-link .arrow {
  display: inline-block;
  transition: transform 0.3s;
}
.brand-link:hover .arrow {
  transform: translateX(4px);
}

/* ── BRAND MARK: looping draw-a-path reveal ────────── */
#draw-path {
  background: #fff;
  padding: 140px 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}
#draw-path .cm-wrap {
  max-width: none;
  padding: 0 clamp(20px, 4vw, 60px);
}
@media (max-width: 899px) {
  #draw-path {
    padding: 88px 0;
  }
}
@media (max-width: 639px) {
  #draw-path {
    padding: 64px 0;
  }
}
.draw-path-glow {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 800px;
  height: 800px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(240, 14, 75, 0.08), transparent 65%);
  pointer-events: none;
}
.draw-path-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(circle at 20% 50%, #000 0%, transparent 65%);
  mask-image: radial-gradient(circle at 20% 50%, #000 0%, transparent 65%);
  pointer-events: none;
}
.draw-path-inner {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 96px;
}
.draw-path-visual {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}
.draw-path-svg {
  width: clamp(180px, 20vw, 300px);
  height: auto;
}
.draw-path-shape {
  stroke: #F00E4B;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: #F00E4B;
  fill-opacity: 0;
}
.draw-path-content {
  flex: 1;
  min-width: 0;
}
.draw-path-content .section-desc {
  max-width: 520px;
}
.draw-path-points {
  display: flex;
  gap: 32px;
  margin-top: 48px;
}
.draw-path-point {
  flex: 1;
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  padding-top: 18px;
}
.draw-path-point-num {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #F00E4B;
  margin-bottom: 10px;
}
.draw-path-point p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}
@media (max-width: 899px) {
  .draw-path-inner {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  .draw-path-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .draw-path-points {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 360px;
  }
  .draw-path-point {
    text-align: center;
  }
}

/* ── MEGA CTA ──────────────────────────────────────── */
#cta {
  background: #050505;
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(
    ellipse at 80% 50%,
    rgba(240, 14, 75, 0.07),
    transparent 55%
  );
  pointer-events: none;
}
.cta-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 16px 0;
}
@media (max-width: 1650px) {
  .cta-inner {
    padding: 16px clamp(20px, 4vw, 60px);
  }
}
.cta-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 32px;
}
.cta-label-line {
  position: relative;
  width: clamp(80px, 12vw, 180px);
  height: 1px;
  background: rgba(240, 14, 75, 0.4);
}
.cta-label-line--left::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F00E4B;
}
.cta-label-line--right::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F00E4B;
}
.cta-label-text {
  font-size: 12px;
  color: #F00E4B;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  font-family: "Metropolis", "Jost", sans-serif;
  white-space: nowrap;
}
.cta-heading {
  margin: 0;
}
.cta-particle-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.cta-particle-canvas {
  display: block;
  max-width: 100%;
}
/* ── RESPONSIVE: SECTION SPACING ──────────────────────
   All eight major sections share the same 120px 0 vertical padding on
   desktop, but had no mobile reduction (only #brands did) — 120px top
   and bottom on a 375px-wide phone leaves sections feeling hollow and
   over-spaced. Stepping it down at both breakpoints used elsewhere. */
@media (max-width: 899px) {
  #services,
  #clients,
  #journey,
  #software,
  #process,
  #testimonials,
  #brands,
  #team,
  #social {
    padding: 88px 0;
  }
  #cta {
    padding: 48px 0;
  }
}
@media (max-width: 639px) {
  #services,
  #clients,
  #journey,
  #software,
  #process,
  #testimonials,
  #brands,
  #team,
  #social {
    padding: 64px 0;
  }
  #cta {
    padding: 40px 0;
  }
}

/* ── BRAND PARTICLE BAND (logo + wordmark rendered as a dot-matrix,
   shown on every page just above the footer — see brand-particles.js) ── */
.brand-particle-section {
  position: relative;
  background: #050505;
  height: clamp(180px, 22vw, 280px);
  overflow: hidden;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
}
.brand-particle-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 100% at 72% 50%, rgba(240, 14, 75, 0.14), transparent 70%);
  pointer-events: none;
}
.brand-particle-canvas {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

/* ── FOOTER ────────────────────────────────────────── */
footer#contact {
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
@media (max-width: 899px) {
  footer#contact {
    /* Clear the fixed mobile bottom nav (~64px tall) plus any device
       safe-area (home-indicator) inset, so the last footer content
       never sits underneath it. */
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}
.footer-top {
  max-width: 1650px;
  margin: 0 auto;
  padding: 72px 0 64px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1fr;
  gap: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
@media (max-width: 1650px) {
  .footer-top {
    padding-left: clamp(20px, 4vw, 60px);
    padding-right: clamp(20px, 4vw, 60px);
  }
}
@media (max-width: 899px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 56px 20px 48px;
  }
}
@media (max-width: 639px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding-bottom: 40px;
  }
  .connect-label {
    min-width: 0;
  }
}
.footer-col-title {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 28px;
  display: block;
}
.footer-link {
  display: block;
  font-size: 16px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
  transition:
    color 0.25s,
    transform 0.25s;
  font-family: "Metropolis", "Jost", sans-serif;
}
.footer-link:hover {
  color: #fff;
  transform: translateX(4px);
}
.connect-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.connect-label {
  font-size: 14px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  min-width: 110px;
}
.connect-colon {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.3);
}
.connect-val {
  font-size: 16px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.55);
  transition: color 0.2s;
  overflow-wrap: break-word;
  min-width: 0;
}
.connect-val:hover {
  color: #fff;
}
.footer-bottom {
  max-width: 1650px;
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
@media (max-width: 1650px) {
  .footer-bottom {
    padding: 24px clamp(20px, 4vw, 60px);
  }
}
.footer-copy {
  font-size: 15px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.3);
  font-family: "Metropolis", "Jost", sans-serif;
}
.footer-policy {
  font-size: 15px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.2s;
  font-family: "Metropolis", "Jost", sans-serif;
}
.footer-policy:hover {
  color: rgba(255, 255, 255, 0.6);
}
.footer-logo-text {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
}
.footer-social {
  display: flex;
  align-items: center;
  gap: 18px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.35);
  transform-origin: 50% 100%;
  transition:
    color 0.25s,
    background 0.25s;
}
.footer-social a:hover {
  color: #fff;
  background: rgba(240, 14, 75, 0.15);
}
.footer-social a.footer-bni {
  width: auto;
  height: 36px;
  padding: 0 6px;
  border-radius: 0;
  margin-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-social a.footer-bni:hover {
  background: none;
}
.footer-social a.footer-bni img {
  height: 17px;
  width: auto;
  display: block;
  filter: grayscale(100%) brightness(1.7);
  opacity: 0.65;
  transition: filter 0.25s, opacity 0.25s;
}
.footer-social a.footer-bni:hover img {
  filter: none;
  opacity: 1;
}
.footer-app-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-app-label {
  font-size: 14px;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.35);
  font-family: "Metropolis", "Jost", sans-serif;
  width: 100%;
  margin-bottom: 4px;
}
.footer-app-links a {
  display: inline-flex;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.footer-app-links a:hover {
  opacity: 1;
}
.footer-app-links img {
  width: 100px;
  height: 30px;
  object-fit: contain;
  object-position: center;
  display: block;
}
@media (max-width: 480px) {
  .footer-app-links img {
    width: 92px;
    height: 28px;
  }
}

/* ══════════════════════════════════════════════════════
   INNER SERVICE PAGES (svc-*) — shared by web-design-development.html
   and future service detail pages. .btn-fill defaults to white-on-dark
   (correct for the shared dark chrome: mobile menu, dark panels, etc.),
   so each LIGHT svc-* section scopes its own dark-on-light override —
   same pattern as #citypages-cta on the homepage — instead of flipping
   every button on the page with one body-level rule. ═════════════════ */
.svc-hero .btn-fill,
.svc-cta .btn-fill {
  background: #0a0a0a;
  color: #fff;
}
.svc-hero .btn-fill:hover,
.svc-cta .btn-fill:hover {
  background: #F00E4B;
  color: #fff;
}

/* ── SERVICE HERO ──────────────────────────────────── */
.svc-hero {
  background: #fff;
  padding: 100px 0 140px;
  position: relative;
  overflow: hidden;
}
.svc-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(circle at 80% 30%, #000 0%, transparent 60%);
  mask-image: radial-gradient(circle at 80% 30%, #000 0%, transparent 60%);
  pointer-events: none;
}
.svc-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 64px;
}
.svc-hero-content {
  flex: 1;
  min-width: 0;
}
.svc-hero-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 200;
  color: #0a0a0a;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 4px 0 20px;
}
/* Single self-contained illustration (it already has its own floating
   UI details baked in) — shown plainly rather than cropped/tilted into a
   messy multi-image collage, which just clipped and buried the artwork. */
.svc-hero-visual {
  flex: 1.15;
  min-width: 0;
  display: flex;
  justify-content: center;
  /* .svc-hero-wordmark below sizes itself off this container's actual
     width (via cqw), not raw viewport vw — the vw-based version scaled
     off the full page width regardless of how narrow this flex column
     actually was, so longer words ("GROWTH", "BRAND") broke into 2-3
     ragged lines and overflowed past the section (confirmed via a full
     responsive audit); only "SEO" was short enough to never expose it. */
  container-type: inline-size;
}
.svc-hero-img {
  width: 100%;
  max-width: 640px;
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(10, 10, 10, 0.18);
}
.svc-hero-wordmark {
  font-family: "Metropolis", "Jost", sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 21cqw, 190px);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  max-width: 100%;
  white-space: nowrap;
}
.svc-hero-wordmark span {
  color: #F00E4B;
}
@media (max-width: 899px) {
  .svc-hero {
    padding: 72px 0 100px;
  }
  .svc-hero-inner {
    flex-direction: column;
    gap: 48px;
  }
  .svc-hero-visual {
    width: 100%;
  }
}

/* ── SERVICE BANNER (dark, black/white theme — pink is accent-only) ── */
.svc-banner {
  background: #0a0a0a;
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.svc-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 72px;
}
.svc-banner-mock {
  flex-shrink: 0;
  width: min(420px, 42vw);
  border-radius: 14px;
  background: #16161a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  position: relative;
}
.svc-banner-mock-bar {
  display: flex;
  gap: 7px;
  padding: 12px 16px;
  background: #1a1a1d;
}
.svc-banner-mock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.svc-banner-mock-dot--r { background: #ff5f57; }
.svc-banner-mock-dot--y { background: #febc2e; }
.svc-banner-mock-dot--g { background: #28c840; }
.svc-banner-mock-body {
  padding: 28px 20px 40px;
}
.svc-banner-mock-line {
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
}
.svc-banner-mock-line--a { width: 70%; height: 20px; background: rgba(240, 14, 75, 0.4); }
.svc-banner-mock-line--b { width: 100%; }
.svc-banner-mock-line--c { width: 85%; }
.svc-banner-chip {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: #fff;
  color: #0a0a0a;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.svc-banner-content {
  flex: 1;
  min-width: 0;
  padding-top: 6px;
}
.svc-banner-p {
  font-size: 16px;
  font-weight: 200;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 16px;
}
.svc-banner-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.svc-banner-tag {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 7px 16px;
}
.svc-banner-stats {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  flex-wrap: wrap;
}
.svc-stat {
  display: flex;
  align-items: baseline;
  gap: 8px 4px;
  flex-wrap: wrap;
}
.svc-stat-num {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 44px;
  font-weight: 300;
  color: #F00E4B;
}
.svc-stat-plus {
  font-size: 28px;
  font-weight: 300;
  color: #F00E4B;
}
.svc-stat-label {
  width: 100%;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.svc-banner-quote {
  flex: 1;
  min-width: 260px;
  font-size: 15px;
  font-weight: 200;
  font-style: italic;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 899px) {
  .svc-banner-inner {
    flex-direction: column;
    gap: 40px;
  }
  .svc-banner-mock {
    width: 100%;
  }
  .svc-banner-stats {
    gap: 32px;
  }
}

/* ── SOLUTIONS: dark stacked panels ────────────────── */
.svc-solutions {
  background: #0a0a0a;
  padding: 120px 0 0;
}
.svc-solutions-eyebrow {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: #F00E4B;
  margin-bottom: 12px;
}
.svc-panels {
  position: relative;
  margin-top: 64px;
}
/* Each panel sticks to the top of the viewport in turn — plain CSS
   position:sticky stacking, so the "next panel covers the previous one"
   behavior is native and predictable. GSAP only adds the dim/scale-down
   on the outgoing panel and the content reveal (see web-design-development.js). */
.svc-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
/* Same full-width two-column grid the rest of the site uses for this kind
   of layout (see .cp-layout on the homepage Citypages section) — each side
   gets a true 50% column across the whole 1650px container, instead of a
   flex row that only grows as large as its content and leaves the rest of
   the width empty. */
.svc-panel-inner {
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 60px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  transform-origin: center center;
}
.svc-panel-visual {
  order: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.svc-panel-content {
  order: 2;
  min-width: 0;
}
.svc-panel--reverse .svc-panel-visual {
  order: 2;
}
.svc-panel--reverse .svc-panel-content {
  order: 1;
}
.svc-panel-visual img {
  width: 100%;
  max-width: 100%;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.svc-panel-icon-visual {
  width: 220px;
  height: 220px;
  max-width: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-panel-icon-visual-inner {
  width: 100px;
  height: 100px;
  background: #F00E4B;
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-panel-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.svc-panel-p {
  font-size: 18px;
  font-weight: 200;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 20px;
}
@media (max-width: 639px) {
  .svc-panel-p {
    font-size: 17px;
  }
}

.svc-panel-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 10px 28px;
}
.svc-panel-list li {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
  padding-left: 18px;
  position: relative;
}
.svc-panel-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F00E4B;
}
/* .btn-fill on a dark panel needs the site's normal dark-section treatment
   (white fill, dark text) — overriding the light-page default set on
   body.page-service, since these panels are the one dark stretch on this
   otherwise light page. */
.svc-panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 899px) {
  .svc-panel-actions {
    justify-content: center;
  }
}
.svc-panel .btn-fill {
  background: #fff;
  color: #0a0a0a;
}
.svc-panel .btn-fill:hover {
  background: #F00E4B;
  color: #fff;
}
@media (max-width: 899px) {
  .svc-panel {
    position: static;
    height: auto;
    min-height: 0;
    padding: 64px 0;
  }
  .svc-panel-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .svc-panel-visual,
  .svc-panel--reverse .svc-panel-visual {
    order: 1;
  }
  .svc-panel-content,
  .svc-panel--reverse .svc-panel-content {
    order: 2;
  }
  .svc-panel-list {
    grid-template-columns: 1fr;
    text-align: left;
    display: inline-block;
  }
  .svc-panel-p {
    margin-left: auto;
    margin-right: auto;
  }
}

.svc-panels-progress {
  position: fixed;
  right: clamp(20px, 3vw, 44px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.svc-panels-progress.is-visible {
  opacity: 1;
}
.svc-panels-progress-count {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.svc-panels-progress-count strong {
  color: #fff;
}
.svc-panels-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.3s, transform 0.3s;
}
.svc-panels-dot.is-active {
  background: #F00E4B;
  transform: scale(1.35);
}
@media (max-width: 899px) {
  .svc-panels-progress {
    display: none;
  }
}

/* ── WHY CHOOSE US (hairline-divider card grid, matches .process-card) ── */
.svc-why {
  background: #f7f7f8;
  padding: 120px 0;
}
.svc-why-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(10, 10, 10, 0.08);
}
.svc-why-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}
.svc-why-card {
  background: #fff;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  min-height: 240px;
  transition: background 0.3s;
}
.svc-why-card:hover {
  background: #fafafa;
}
.svc-why-icon {
  width: 52px;
  height: 52px;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 24px;
  transition: background 0.3s;
}
.svc-why-card:hover .svc-why-icon {
  background: #F00E4B;
}
.svc-why-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #0a0a0a;
  margin-bottom: 10px;
}
.svc-why-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #777;
  flex: 1;
}
.svc-why-num {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 32px;
  font-weight: 200;
  color: rgba(240, 14, 75, 0.35);
  margin-top: 20px;
  align-self: flex-end;
}
@media (max-width: 899px) {
  .svc-why {
    padding: 88px 0;
  }
  .svc-why-grid,
  .svc-why-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
  .svc-why-card {
    padding: 32px;
    min-height: 0;
  }
}
@media (max-width: 639px) {
  .svc-why-grid,
  .svc-why-grid--3col {
    grid-template-columns: 1fr;
  }
}

/* ── SERVICE CTA (reuses the site's .mid-cta-* pattern, light theme) ── */
.svc-cta {
  background: #fff;
  padding: 100px 0 120px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
@media (max-width: 899px) {
  .svc-cta {
    padding: 72px 0 88px;
  }
}
@media (max-width: 639px) {
  .svc-cta {
    padding: 52px 0 64px;
  }
}
.svc-cta .mid-cta-heading {
  color: #0a0a0a;
}
.svc-cta .mid-cta-sub {
  color: rgba(10, 10, 10, 0.55);
}
.svc-cta .mid-cta-divider {
  background: rgba(10, 10, 10, 0.15);
}
.svc-cta .mid-cta-or {
  color: rgba(10, 10, 10, 0.4);
}
.svc-cta .mid-cta-call {
  color: rgba(10, 10, 10, 0.55);
}
.svc-cta .mid-cta-call strong {
  color: #0a0a0a;
}
.svc-cta .mid-cta-call:hover {
  color: rgba(10, 10, 10, 0.85);
}
.svc-cta .mid-cta-grid-bg {
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.03) 1px, transparent 1px);
}
.svc-cta .mid-cta-glow {
  background: radial-gradient(circle, rgba(240, 14, 75, 0.08), transparent 65%);
}

/* ══════════════════════════════════════════════════════
   ABOUT PAGE (about.html) — built from the site's own existing
   components (.cp-layout, .stat-grid, .process-card, .mid-cta-*)
   rather than one-off layouts, so it reads as part of the same site. ══ */

/* ── ABOUT HERO ────────────────────────────────────── */
.about-hero {
  background: #f4f4f5;
  padding: 100px 0 120px;
}
.about-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 64px;
}
.about-hero-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 200;
  color: #0a0a0a;
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 4px 0 20px;
}
.about-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 320px;
}
.about-hero-blob {
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #F00E4B, #7a0726);
  box-shadow: 0 40px 90px rgba(240, 14, 75, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-hero-mark {
  width: 42%;
  height: auto;
}
@media (max-width: 899px) {
  .about-hero {
    padding: 72px 0 88px;
  }
  .about-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .about-hero-visual {
    height: 240px;
  }
}

/* ── INTRO / STATS (dark; .cp-layout two-column grid + a purpose-built
   dark stat-card grid — the homepage's .stat-grid is styled for a white
   background and doesn't reuse cleanly on a dark section) ──────────── */
.about-intro {
  background: #0a0a0a;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.about-intro-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.about-intro-inner {
  position: relative;
  z-index: 1;
}
.about-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
}
.about-stat-card {
  background: #131315;
  padding: 40px 32px;
}
.about-stat-num {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(38px, 4.5vw, 56px);
  font-weight: 200;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 14px;
}
.about-stat-p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 639px) {
  .about-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* ── OUR STORY (pinned staged reveal) ──────────────────
   The section pins for 2 viewport-heights of scroll while three short
   beats crossfade one at a time — each beat is short enough to always
   fit comfortably, so the pin never fights the content's height (the
   failure mode of trying to pin one long paragraph on screen at once). */
.about-story {
  background: #0a0a0a;
  height: calc(100vh - 80px);
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.about-story-inner {
  max-width: 1300px;
  width: 100%;
}
.about-story-steps {
  position: relative;
  min-height: clamp(260px, 38vh, 380px);
}
.about-story-step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-size: clamp(30px, 4vw, 56px);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #fff;
  opacity: 0;
}
.about-story-step:first-child {
  opacity: 1;
}
.about-story-dots {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.about-story-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.3s, transform 0.3s;
}
.about-story-dot:first-child {
  background: #F00E4B;
  transform: scale(1.35);
}
@media (max-width: 899px) {
  .about-story {
    height: auto;
    min-height: 0;
    padding: 96px 0;
  }
  .about-story-steps {
    position: static;
    min-height: 0;
  }
  .about-story-step {
    position: static;
    opacity: 1;
    margin-bottom: 24px;
  }
  .about-story-dots {
    display: none;
  }
}

/* ── OUR PURPOSE (big centered statement) ──────────── */
.about-purpose {
  background: #fff;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.about-purpose-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(240, 14, 75, 0.05), transparent 65%);
  pointer-events: none;
}
.about-purpose-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}
.about-purpose-sub {
  max-width: 560px;
  margin: 20px auto 0;
  font-size: 17px;
}

/* ── HOW IT WORKS (dark, reuses .section-header-row / .divider-line
   from #services — same header pattern, dark variant) ────────────── */
.about-how {
  background: #0a0a0a;
  padding: 120px 0 68px;
  position: relative;
  overflow: hidden;
}
.about-how-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.about-how-steps {
  position: relative;
  z-index: 1;
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.about-how-step {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
}
.about-how-step-num {
  display: block;
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 32px;
  font-weight: 200;
  color: #F00E4B;
  margin-bottom: 12px;
}
.about-how-step-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 10px;
}
.about-how-step-p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 899px) {
  .about-how-steps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ── WHO IT'S FOR (same hairline-grid + hover-lift pattern
   as .social-card — no border-radius, matching that card's
   sharp-square icon and corners) ──────────────────────── */
.about-audience {
  background: #fff;
  padding: 40px 0 120px;
}
.about-audience-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.about-audience-card {
  position: relative;
  background: #fff;
  padding: 48px;
  border: 1.5px solid transparent;
  transition:
    background 0.3s,
    border-color 0.3s,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s;
}
/* Divider lives on the card itself (not a background peeking through a
   grid gap) so it's always there — the gap-trick version went solid gray
   whenever the cards were momentarily transparent before their entrance
   animation fired. */
.about-audience-card:nth-child(2) {
  border-left-color: #e8e8e8;
}
.about-audience-card:nth-child(2):hover {
  border-left-color: rgba(240, 14, 75, 0.35);
}
.about-audience-card:hover {
  background: rgba(240, 14, 75, 0.035);
  border-color: rgba(240, 14, 75, 0.35);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(10, 10, 10, 0.1);
  z-index: 1;
}
.about-audience-icon {
  width: 52px;
  height: 52px;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: background 0.3s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.about-audience-card--accent .about-audience-icon {
  background: #F00E4B;
}
.about-audience-card:hover .about-audience-icon {
  transform: scale(1.1) rotate(-6deg);
}
.about-audience-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #0a0a0a;
  margin-bottom: 12px;
}
.about-audience-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #777;
  margin-bottom: 24px;
}
.about-audience-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.about-audience-list li {
  font-size: 15px;
  color: #555;
  padding: 12px 0;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}
.about-audience-list li:first-child {
  border-top: none;
}
.about-audience-arrow {
  position: absolute;
  top: 48px;
  right: 48px;
  width: 32px;
  height: 32px;
  border: 1.5px solid rgba(10, 10, 10, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.about-audience-arrow svg {
  transition: stroke 0.3s;
}
.about-audience-card:hover .about-audience-arrow {
  background: #F00E4B;
  border-color: #F00E4B;
  transform: translate(2px, -2px);
}
.about-audience-card:hover .about-audience-arrow svg {
  stroke: #fff;
}
@media (max-width: 639px) {
  .about-audience-grid {
    grid-template-columns: 1fr;
  }
  .about-audience-card {
    padding: 32px;
  }
  .about-audience-arrow {
    top: 32px;
    right: 32px;
  }
}

/* ── ABOUT CTA — no extra rules needed; .about-cta just supplies
   the background color, everything else comes from .mid-cta-*. ── */
.about-cta {
  background: #0a0a0a;
  padding: 100px 0 120px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
@media (max-width: 899px) {
  .about-cta {
    padding: 72px 0 88px;
  }
}
@media (max-width: 639px) {
  .about-cta {
    padding: 52px 0 64px;
  }
}

/* ══════════════════════════════════════════════════════
   OUR WORKS PAGE (our-works.html)
   ═══════════════════════════════════════════════════════ */

/* ── WORKS HERO ────────────────────────────────────── */
.works-hero {
  background: #0a0a0a;
  padding: 140px 0 100px;
  position: relative;
  overflow: hidden;
}
.works-hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.works-hero-glow {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(240, 14, 75, 0.1), transparent 65%);
  pointer-events: none;
}
.works-hero-inner {
  position: relative;
  z-index: 1;
}
.works-hero-stats {
  display: flex;
  gap: 56px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.works-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.works-hero-stat-num {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 200;
  color: #F00E4B;
  letter-spacing: -0.02em;
}
.works-hero-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 639px) {
  .works-hero {
    padding: 100px 0 72px;
  }
  .works-hero-stats {
    gap: 32px;
    flex-wrap: wrap;
  }
}

/* ── WORKS GALLERY ─────────────────────────────────── */
.works-gallery {
  background: #0a0a0a;
  padding: 88px 0 40px;
}
.works-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
  margin-bottom: 56px;
}
@media (max-width: 899px) {
  .works-gallery {
    padding: 64px 0 32px;
  }
}
.works-filter-btn {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.works-filter-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.works-filter-btn.is-active {
  background: #F00E4B;
  border-color: #F00E4B;
  color: #fff;
}
.works-empty {
  display: none;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.72);
  padding: 60px 0;
  text-align: center;
}
.works-empty.is-visible {
  display: block;
}

/* ══════════════════════════════════════════════════════
   CASE STUDIES PAGE (case-studies.html)
   Modeled on webandcrafts.com/works — a plain "Case Studies (N)" header
   row with two filter dropdowns, then a dense 3-col image-forward grid
   (image / industry·expertise tag / one-line outcome title). No carousel,
   no big marketing hero — the grid itself is the content.
   ═══════════════════════════════════════════════════════ */
.cs-hero {
  background: #0a0a0a;
  padding: 140px 0 40px;
  position: relative;
  overflow: hidden;
}
.cs-hero-inner {
  position: relative;
  z-index: 1;
}
.cs-hero-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 28px;
}
.cs-hero-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: #fff;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cs-hero-count {
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}
.cs-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cs-filter {
  position: relative;
  display: flex;
  align-items: center;
}
.cs-filter select {
  appearance: none;
  -webkit-appearance: none;
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 11px 34px 11px 16px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.cs-filter select:hover,
.cs-filter select:focus {
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
}
.cs-filter select option {
  background: #0a0a0a;
  color: #fff;
}
.cs-filter-chevron {
  position: absolute;
  right: 14px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
@media (max-width: 639px) {
  .cs-hero {
    padding: 100px 0 32px;
  }
  .cs-hero-top {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── GRID ───────────────────────────────────────────── */
.cs-gallery {
  background: #0a0a0a;
  padding: 40px 0 88px;
}
.cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
@media (max-width: 1023px) {
  .cs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 639px) {
  .cs-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cs-gallery {
    padding: 32px 0 64px;
  }
}
.cs-card {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.cs-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #141412;
  margin-bottom: 16px;
}
.cs-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.cs-card:hover .cs-card-media img {
  transform: scale(1.06);
}
.cs-card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}
.cs-card-tag-dot {
  color: #F00E4B;
}
.cs-card-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.cs-card:hover .cs-card-title {
  color: #F00E4B;
}

/* ══════════════════════════════════════════════════════
   CASE STUDY DETAIL PAGE (case-study.html)
   Content is populated at runtime by case-study-detail.js from
   case-study-data.js based on ?slug= — this only styles the shell.
   ═══════════════════════════════════════════════════════ */
.csd-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(480px, 72vh, 760px);
  display: flex;
  align-items: flex-end;
}
.csd-hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Portfolio images are raw website/UI screenshots, not clean lifestyle
   photography — a light blur keeps them as ambient texture/mood instead
   of legible (and sometimes visually colliding) on-screen text/buttons
   baked into the source screenshot. */
.csd-hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) brightness(.4); transform: scale(1.06); }
.csd-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .82) 45%, rgba(0, 0, 0, .68) 100%);
}
.csd-hero-inner {
  position: relative;
  z-index: 2;
  padding: 140px 0 clamp(48px, 7vw, 72px);
}
.csd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.2s;
}
.csd-back:hover {
  color: #fff;
}
.csd-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 16px;
  max-width: 900px;
}
.csd-summary {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  max-width: 640px;
  margin-bottom: 20px;
}
.csd-hero-tags { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 639px) {
  .csd-hero { min-height: 420px; }
  .csd-hero-inner { padding: 100px 0 40px; }
}

.csd-content {
  background: #0a0a0a;
  padding: clamp(56px, 8vw, 96px) 0;
}
.csd-content-text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
}
.csd-lead { font-size: 18px; }

/* ── Overview: sidebar chips + meta table ── */
.csd-overview-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(32px, 5vw, 64px);
  padding-bottom: clamp(48px, 7vw, 72px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.csd-sidebar .section-label { display: block; margin-bottom: 16px; }
.csd-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.csd-chip {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 9px 18px;
  border-radius: 999px;
}
.csd-meta { margin-top: 32px; }
.csd-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
}
.csd-meta-row span:first-child { color: rgba(255, 255, 255, 0.6); }
.csd-meta-row span:last-child { color: #fff; font-weight: 500; text-align: right; }

.csd-results {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  margin-top: clamp(40px, 6vw, 56px);
}
@media (max-width: 767px) {
  .csd-overview-grid {
    grid-template-columns: 1fr;
  }
  .csd-results {
    gap: 32px;
  }
}

/* ── Approach: 3-col icon cards ── */
.csd-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 40px);
}
.csd-point-icon { margin-bottom: 18px; }
.csd-point-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
}
.csd-point-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 767px) {
  .csd-points { grid-template-columns: 1fr; }
}

/* ── Full-bleed image showcase break ── */
.csd-showcase-image {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: #141412;
}
.csd-showcase-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 639px) {
  .csd-showcase-image { aspect-ratio: 4 / 3; }
}

/* ── About-the-client card ── */
.csd-client-card {
  margin-top: clamp(48px, 7vw, 72px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #141412;
  padding: clamp(28px, 4vw, 40px);
  max-width: 560px;
}
.csd-client-card-name {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 12px;
}
.csd-client-card-about {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
}

/* ── View-all link (related case studies) ── */
.csd-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 14px 28px;
  text-decoration: none;
  transition: border-color 0.2s;
}
.csd-view-all:hover { border-color: rgba(255, 255, 255, 0.5); }

/* ── WORK GRID (replaces the old Swiper carousel — a plain filterable
   image grid; clicking a card opens it in the shared showcase lightbox) ── */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
@media (max-width: 1023px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 639px) {
  .work-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
.work-grid-item {
  cursor: pointer;
}
.work-grid-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #141412;
  margin-bottom: 16px;
}
.work-grid-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.5s ease;
}
.work-grid-item:hover .work-grid-media img {
  transform: scale(1.06);
}
.work-grid-cat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F00E4B;
  margin-bottom: 8px;
}
.work-grid-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.work-grid-item:hover .work-grid-title {
  color: #F00E4B;
}

/* ── WORKS CTA — no extra rules needed; .works-cta just supplies
   the background/padding, everything else comes from .mid-cta-*. ── */
.works-cta {
  background: #0a0a0a;
  padding: 100px 0 120px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
@media (max-width: 899px) {
  .works-cta {
    padding: 72px 0 88px;
  }
}
@media (max-width: 639px) {
  .works-cta {
    padding: 52px 0 64px;
  }
}

/* ── CONTACT PAGE (contact.html) ─────────────────────────── */
.contact-hero {
  background: #f7f7f7;
  padding: 80px 0 80px;
  text-align: center;
}
.contact-hero .section-label {
  display: block;
}
.contact-hero-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(40px, 5.5vw, 76px);
  font-weight: 200;
  color: #0a0a0a;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 20px;
}
.contact-hero .section-desc {
  max-width: 560px;
  margin: 0 auto;
}
@media (max-width: 899px) {
  .contact-hero {
    padding: 120px 0 60px;
  }
}

.contact-main {
  background: #fff;
  padding: 100px 0 120px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}

.contact-form-card {
  border: 1px solid rgba(10, 10, 10, 0.1);
  padding: clamp(28px, 4vw, 56px);
}
.contact-form-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: #0a0a0a;
  margin-bottom: 8px;
}
.contact-form-sub {
  font-size: 15px;
  color: #666;
  margin-bottom: 36px;
}
.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 560px) {
  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
.form-group {
  margin-bottom: 26px;
}
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(10, 10, 10, 0.5);
  margin-bottom: 10px;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(10, 10, 10, 0.15);
  padding: 8px 0 12px;
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 16px;
  color: #0a0a0a;
  outline: none;
  transition: border-color 0.25s;
  border-radius: 0;
  appearance: none;
}
.form-textarea {
  resize: vertical;
  min-height: 100px;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(10, 10, 10, 0.32);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: #F00E4B;
}
.form-select {
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a0a0a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
}
.contact-form-submit {
  margin-top: 12px;
  cursor: pointer;
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(10, 10, 10, 0.08);
  margin-bottom: 32px;
}
.contact-info-card {
  background: #fff;
  padding: 28px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.contact-info-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #0a0a0a;
  margin-bottom: 6px;
}
.contact-info-val {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  display: block;
}
.contact-info-val + .contact-info-val {
  margin-top: 2px;
}
a.contact-info-val:hover {
  color: #F00E4B;
}
.contact-hours {
  border: 1px solid rgba(10, 10, 10, 0.1);
  padding: 28px;
}
.contact-hours-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #0a0a0a;
  margin-bottom: 16px;
}
.contact-hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
  padding: 10px 0;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}
.contact-hours-row:first-of-type {
  border-top: none;
}
.contact-hours-row span:last-child {
  color: #0a0a0a;
  font-weight: 500;
}

/* ── LEGAL PAGES (privacy-policy, terms, refund-and-cancellation,
   code-of-conduct, dei-policy, whistleblowing-policy) — shared prose
   styling for verbatim policy content synced from citymapia.com. ── */
.legal-body { font-size: 15px; line-height: 1.85; color: #555; padding: 20px 0 40px; }
.legal-body h2 {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #0a0a0a;
  margin: 44px 0 16px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #0a0a0a;
  margin: 28px 0 12px;
}
.legal-body p { margin-bottom: 20px; }
.legal-body a { color: #F00E4B; }
.legal-list { list-style: disc; padding-left: 22px; margin: 0 0 20px; }
.legal-list li { margin-bottom: 8px; }
.legal-toc { padding-left: 20px; margin: 0 0 24px; counter-reset: none; }
.legal-toc li { margin-bottom: 10px; }
.legal-toc a { color: #0a0a0a; text-decoration: underline; text-underline-offset: 2px; }
.legal-toc a:hover { color: #F00E4B; }
.legal-source-block {
  margin-bottom: 20px;
  padding: 18px 22px;
  background: #f7f7f7;
  border: 1px solid rgba(10, 10, 10, 0.06);
}
.legal-source-block .legal-list { margin-bottom: 0; }
.legal-source-name { font-weight: 600; color: #0a0a0a; margin-bottom: 12px; }
.legal-address { font-style: normal; }
.legal-layout {
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: 64px;
  align-items: start;
}
.legal-sidebar {
  position: sticky;
  top: 104px;
  align-self: start;
  background: #f7f7f5;
  border: 1px solid rgba(10, 10, 10, 0.08);
  padding: 28px 24px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.legal-sidebar-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F00E4B;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
  display: block;
}
.legal-sidebar-nav {
  display: flex;
  flex-direction: column;
}
.legal-sidebar-nav a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  margin: 0 -12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #6b6b6b;
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.legal-sidebar-nav a::before {
  content: attr(data-num);
  flex-shrink: 0;
  font-family: "JetBrains Mono", "Metropolis", monospace;
  font-size: 10.5px;
  color: rgba(10, 10, 10, 0.32);
  transition: color 0.15s;
}
.legal-sidebar-nav a:hover { color: #0a0a0a; background: rgba(10, 10, 10, 0.04); }
.legal-sidebar-nav a.is-active {
  color: #0a0a0a;
  background: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #F00E4B, 0 1px 3px rgba(0, 0, 0, 0.06);
}
.legal-sidebar-nav a.is-active::before { color: #F00E4B; }
@media (max-width: 899px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-sidebar {
    position: static;
    order: -1;
    max-height: none;
    margin-bottom: 40px;
  }
}

.contact-map {
  background: #f7f7f7;
  padding: 0 0 100px;
}
.contact-map-frame {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
  filter: grayscale(15%);
}
@media (max-width: 639px) {
  .contact-map-frame {
    height: 340px;
  }
}

/* ══════════════════════════════════════════════════════════
   LANDING PAGE (index.html) — Citypages product/pricing page.
   This section is almost entirely inline-styled by design (ported
   from a supplied reference build) — these are just the small set
   of layout utility classes and keyframes it depends on.
   ══════════════════════════════════════════════════════════ */
@keyframes lp-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes lp-hero-glow { 0%, 100% { opacity: .06; } 50% { opacity: .12; } }
.lp-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  background: currentColor;
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: lp-blink 1s step-end infinite;
}
.lp-rv {
  opacity: 0;
  transform: translateY(44px);
}
@media (max-width: 900px) {
  .lp-dn { display: none !important; }
  .lp-hero-g { grid-template-columns: 1fr !important; }
  .lp-f2c { grid-template-columns: 1fr !important; }
  .lp-f3c { grid-template-columns: 1fr !important; gap: 0 !important; }
  .lp-how-g { grid-template-columns: 1fr !important; }
  .lp-how-a { display: none !important; }
  .lp-pg { grid-template-columns: 1fr !important; }
  .lp-tg { grid-template-columns: 1fr !important; }
  .lp-faq-g { grid-template-columns: 1fr !important; }
  .hp-faq-left { border-right: none !important; padding-right: 0 !important; margin-bottom: 40px; }
  .lp-cta-r { flex-direction: column !important; align-items: flex-start !important; }
  .lp-ft-g { grid-template-columns: 1fr 1fr !important; }
  .cmp-t { display: none !important; }
  .cmp-m { display: flex !important; }
  .lp-metrics-g { grid-template-columns: repeat(3, 1fr) !important; row-gap: 32px; }
  .lp-cat-grid { grid-template-columns: repeat(5, 1fr) !important; }
  .lp-cat-grid .lp-cat-cell:nth-child(5n) { border-right: none !important; }
}
@media (max-width: 600px) {
  .lp-ft-g { grid-template-columns: 1fr !important; }
  .lp-hs-g { grid-template-columns: 1fr 1fr !important; }
  .lp-metrics-g { grid-template-columns: repeat(2, 1fr) !important; }
  .lp-cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .lp-cat-grid .lp-cat-cell:nth-child(5n) { border-right: 1px solid rgba(255,255,255,0.07) !important; }
  .lp-cat-grid .lp-cat-cell:nth-child(3n) { border-right: none !important; }
}
.lp-cat-cell:hover {
  background: rgba(255, 255, 255, 0.03);
}
@media (max-width: 899px) {
  .hp-claim-feat > div {
    border-right: none !important;
    width: 50%;
    padding: 12px !important;
  }
}
@media (max-width: 479px) {
  .hp-claim-feat > div {
    width: 100%;
  }
}
/* ══════════════════════════════════════════════════════
   AWS CDK HOSTING PAGE (aws-cdk-hosting.html) — built from the
   site's own components (.cm-wrap, .section-label, .section-h2,
   .btn-fill/.btn-ol, .svc-panel-list dot pattern) with sharp corners
   throughout per the standing no-border-radius rule. The only circular
   shapes are small accent/status dots and the SLA progress ring, which
   match the site's existing circular-dot exceptions (cursor dot,
   .cp-live-dot, checkmark badges) rather than rounding any card/button/
   panel corner. No real isometric illustration assets exist for this
   page, so every "visual" slot below is drawn with plain CSS shapes/SVG
   lines in the site's own black/white/pink palette. ══════════════════ */

/* ── CDK HERO ──────────────────────────────────────── */
.cdk-hero {
  background: #fff;
  padding: 100px 0 0;
  position: relative;
  overflow: hidden;
}
.cdk-hero-grid {
  position: absolute;
  inset: 0;
  background: rgba(240, 14, 75, 0.03);
  background-image:
    linear-gradient(rgba(10, 10, 10, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}
.cdk-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 72px;
}
.cdk-hero-title {
  max-width: 920px;
  text-align: center;
}
.cdk-hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.cdk-btn-ol {
  border-color: rgba(10, 10, 10, 0.18);
  color: rgba(10, 10, 10, 0.7);
}
.cdk-btn-ol:hover {
  border-color: rgba(10, 10, 10, 0.5);
  color: #0a0a0a;
  background: rgba(10, 10, 10, 0.04);
}
.cdk-feature-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}
.cdk-feature {
  flex: 1;
  min-width: 0;
  padding: 32px 14px;
  text-align: center;
  border-right: 1px solid rgba(10, 10, 10, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.cdk-feature:last-child {
  border-right: none;
}
.cdk-feature-icon {
  width: 40px;
  height: 40px;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4px;
}
.cdk-feature-label {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #0a0a0a;
}
.cdk-feature-desc {
  font-size: 12px;
  font-weight: 300;
  color: #777;
  line-height: 1.5;
}
.cdk-stat-panel {
  flex: 1.3;
  min-width: 0;
  background: #0a0a0a;
  margin: -18px 0;
  padding: 40px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
  box-shadow: 0 24px 50px rgba(10, 10, 10, 0.22);
}
.cdk-ring-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 10px;
}
.cdk-ring {
  transform: rotate(-90deg);
}
.cdk-ring-track {
  stroke: rgba(255, 255, 255, 0.12);
}
.cdk-ring-fill {
  stroke: #F00E4B;
  stroke-dasharray: 264;
  stroke-dashoffset: 264;
}
.cdk-ring-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}
.cdk-stat-title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  text-align: center;
}
.cdk-stat-caption {
  font-size: 12px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}
@media (max-width: 1099px) {
  .cdk-feature-row {
    flex-wrap: wrap;
  }
  .cdk-feature {
    flex: 1 1 33.33%;
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
  }
  .cdk-stat-panel {
    flex: 1 1 100%;
    order: -1;
    margin: 0 0 8px;
  }
}
@media (max-width: 639px) {
  .cdk-feature {
    flex: 1 1 50%;
  }
  .cdk-hero {
    padding: 72px 0 0;
  }
}

/* ── CDK-DRIVEN DELIVERY FLOW ──────────────────────── */
.cdk-flow {
  background: #0a0a0a;
  padding: 120px 0;
}
.cdk-flow-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.cdk-flow-card {
  background: #111;
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  transition: background 0.3s;
}
.cdk-flow-card:hover {
  background: #161616;
}
.cdk-flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.cdk-flow-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.cdk-flow-icon {
  width: 44px;
  height: 44px;
  background: #1c1c1c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cdk-flow-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
}
.cdk-flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cdk-flow-list li {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  padding-left: 16px;
  position: relative;
}
.cdk-flow-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F00E4B;
}
@media (max-width: 899px) {
  .cdk-flow-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 639px) {
  .cdk-flow-grid {
    grid-template-columns: 1fr;
  }
  .cdk-flow-card {
    min-height: 0;
  }
}

/* ── ENTERPRISE-GRADE AWS CDK HOSTING (overview + specs) ── */
.cdk-overview {
  background: #fff;
  padding: 120px 0;
}
.cdk-overview-inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
}
.cdk-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(10, 10, 10, 0.08);
  border: 1px solid rgba(10, 10, 10, 0.08);
}
.cdk-spec {
  background: #fff;
  padding: 22px 24px;
}
.cdk-spec-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #0a0a0a;
  margin-bottom: 6px;
}
.cdk-spec-desc {
  font-size: 13px;
  font-weight: 300;
  color: #777;
  line-height: 1.5;
}
/* CSS-drawn "server rack" illustration standing in for the missing
   isometric artwork — status dots + load bars built from plain divs,
   square corners throughout, small dots the only circular elements. */
.cdk-overview-visual {
  display: flex;
  justify-content: center;
}
.cdk-rack {
  width: 100%;
  max-width: 420px;
  background: #0a0a0a;
  border: 1px solid rgba(10, 10, 10, 0.08);
}
.cdk-rack-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cdk-rack-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}
.cdk-rack-dot--live {
  background: #F00E4B;
  box-shadow: 0 0 0 3px rgba(240, 14, 75, 0.2);
}
.cdk-rack-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.14);
}
.cdk-rack-row:nth-child(odd) .cdk-rack-bar {
  background: rgba(240, 14, 75, 0.4);
}
.cdk-rack-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: #131313;
}
@media (max-width: 899px) {
  .cdk-overview-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
@media (max-width: 639px) {
  .cdk-spec-grid {
    grid-template-columns: 1fr;
  }
}

/* ── AWS FARGATE: SERVERLESS CONTAINERS ─────────────── */
.cdk-fargate {
  background: rgba(240, 14, 75, 0.03);
  padding: 120px 0;
}
.cdk-fargate-inner {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: center;
}
/* CSS-drawn "container task grid" standing in for the missing Fargate
   isometric artwork — a 3x3 grid of square task cells, a few marked
   active/running, echoing the mockup's container motif without any
   rounded corners. */
.cdk-fargate-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.cdk-containers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 300px;
}
.cdk-container-box {
  aspect-ratio: 1;
  background: #fff;
  border: 1.5px solid rgba(10, 10, 10, 0.12);
}
.cdk-container-box--active {
  background: #0a0a0a;
  border-color: #0a0a0a;
  position: relative;
}
.cdk-container-box--active::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #F00E4B;
}
.cdk-containers-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  color: #0a0a0a;
  border: 1px solid rgba(10, 10, 10, 0.12);
  background: #fff;
  padding: 10px 16px;
}
.cdk-containers-tag--dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
  background: #131313;
}
.cdk-check-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}
.cdk-check-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}
.cdk-check-grid li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 300;
  color: #444;
  line-height: 1.5;
}
.cdk-check-grid li::before {
  content: "";
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  margin-top: 2px;
  background: #F00E4B;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.cdk-check-grid--dark li {
  color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 899px) {
  .cdk-fargate-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .cdk-fargate-visual {
    order: -1;
  }
}
@media (max-width: 639px) {
  .cdk-check-grid,
  .cdk-check-grid--3col {
    grid-template-columns: 1fr;
  }
}

/* ── SAAS @ SCALE / COST DOWN, PERF UP ──────────────── */
.cdk-showcase {
  background: #f7f7f8;
  padding: 120px 0;
}
.cdk-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(10, 10, 10, 0.08);
}
.cdk-showcase-card {
  background: #fff;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
}
.cdk-showcase-icon {
  width: 52px;
  height: 52px;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 24px;
}
.cdk-showcase-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #0a0a0a;
  margin-bottom: 14px;
}
.cdk-showcase-p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #666;
  margin-bottom: 24px;
}
.cdk-showcase-list {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cdk-showcase-list li {
  font-size: 13.5px;
  font-weight: 300;
  color: #555;
  padding-left: 16px;
  position: relative;
}
.cdk-showcase-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F00E4B;
}
@media (max-width: 899px) {
  .cdk-showcase-grid {
    grid-template-columns: 1fr;
  }
  .cdk-showcase-card {
    padding: 40px 32px;
  }
}

/* ── YOUR AWS CDK SPECIALISTS ────────────────────────── */
.cdk-specialists {
  background: #0a0a0a;
  padding: 120px 0;
}
.cdk-specialists-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}
/* CSS/SVG-drawn multi-account network diagram standing in for the missing
   isometric artwork — square "account" nodes joined by straight lines,
   small circular dots marking connection points only. */
.cdk-specialists-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.cdk-network-svg {
  max-width: 320px;
}
@media (max-width: 899px) {
  .cdk-specialists-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .cdk-specialists-visual {
    order: -1;
  }
}

/* ── FINAL CTA BAND (modeled on the homepage "Red Break CTA") ──── */
.cdk-final-cta {
  padding: clamp(80px, 10vw, 120px) 0;
  background: #F00E4B;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cdk-final-cta-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.cdk-final-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.cdk-final-cta-heading {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 760px;
}
.cdk-final-cta-btn {
  padding: 18px 44px;
  background: #fff;
  color: #F00E4B;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.22s, color 0.22s, transform 0.22s;
}
.cdk-final-cta-btn:hover {
  background: #0a0a0a;
  color: #fff;
  transform: translateY(-3px);
}

/* ── COMPANY PAGE: AWS CDK HOSTING HIGHLIGHT SECTION ──
   Modeled on company.html's #software / #brands pattern — a short pitch
   + "Explore" link on the left, a hairline-divided stat strip on the
   right, same sharp corners and type system as the rest of the page. */
.cc-aws-cdk {
  background: #f7f7f8;
  padding: 100px 0;
}
.cc-aws-cdk-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
}
.cc-aws-cdk-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 14px 32px;
  background: #0a0a0a;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  font-family: "Metropolis", "Jost", sans-serif;
  transition: background 0.3s, transform 0.3s;
}
.cc-aws-cdk-link:hover {
  background: #F00E4B;
  color: #fff;
  transform: translateY(-3px);
}
.cc-aws-cdk-link .arrow {
  display: inline-block;
  transition: transform 0.3s;
}
.cc-aws-cdk-link:hover .arrow {
  transform: translateX(4px);
}
.cc-aws-cdk-stats {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(10, 10, 10, 0.08);
  background: #fff;
}
.cc-aws-cdk-stat {
  padding: 28px 32px;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}
.cc-aws-cdk-stat:last-child {
  border-bottom: none;
}
.cc-aws-cdk-stat-num {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 36px;
  font-weight: 300;
  color: #F00E4B;
  display: block;
  margin-bottom: 4px;
}
.cc-aws-cdk-stat-label {
  font-size: 13px;
  color: #666;
}
@media (max-width: 899px) {
  .cc-aws-cdk-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ══════════════════════════════════════════════════════
   HOMEPAGE (index.html) — ported faithfully from the
   supplied "Citypages Landing" reference design. Utility
   classes below are copied over from that design's own
   stylesheet (unchanged), since the shared site reset
   already covers box-sizing/scrollbar/body basics. ══════ */
/* .ticker-t below reuses the existing @keyframes ticker declared earlier in this file (identical from/to). */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }

/* width:100% is required, not decorative — .cm sits inside .hero-fit
   (display:flex; flex-direction:column) on the homepage, and a flex item
   with auto cross-axis margins (margin:0 auto) does NOT stretch to fill
   its line by default; it shrinks to fit its content instead, silently
   capping .cm's real width far below 1650px. Giving it an explicit
   width:100% (still capped by max-width) fixes that everywhere .cm is
   used, and is a no-op in normal block contexts where it already
   filled 100% anyway. */
.cm { width: 100%; max-width: 1650px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px); }
.section-w { padding: clamp(72px, 9vw, 120px) 0; }
.section-n { padding: clamp(56px, 7vw, 96px) 0; }

.hero-clip { overflow: hidden; padding-bottom: .06em; }
.hero-clip > span { display: block; will-change: transform; }

.ticker-t { display: flex; white-space: nowrap; animation: ticker 22s linear infinite; }
.marq-t { display: flex; white-space: nowrap; animation: marquee 32s linear infinite; }

.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.feat-row.rev { direction: rtl; }
.feat-row.rev > * { direction: ltr; }

/* FEATURES — standalone black-theme bento gallery (real T-5/T-6/T-7
   photography instead of the old hand-coded UI mocks). Its own visual
   language on purpose: sits between two light sections, so a full dark
   band plus a distinct heading/line-split treatment (not .section-h2)
   reads as a deliberate break in rhythm rather than a copy-paste row. */
.features-dark {
  background: #0a0a0a;
  padding-top: clamp(72px, 9vw, 120px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
}
.feat-head { max-width: 800px; margin-bottom: clamp(48px, 6vw, 76px); }
.feat-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .18em; color: #F00E4B; text-transform: uppercase; margin-bottom: 18px; }
.feat-split-heading {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(32px, 4.2vw, 60px);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0;
}
/* Line-split reveal spans, built at runtime by initFeaturesBento() in
   homepage.js — each line masked by its wrapper and slid/faded in,
   scrubbed to scroll position rather than a one-shot trigger. */
.feat-line { display: block; overflow: hidden; }
.feat-line-inner { display: inline-block; will-change: transform, opacity; }

/* Stacked pinned panels — each feature is a full-height panel; as the
   next one's normal document flow reaches it, the current panel (pinned,
   pinSpacing:false) scales down and fades so it visibly disappears
   BEHIND the incoming panel sliding up over it (see initFeaturesStack()
   in homepage.js). Base CSS below is just 3 stacked panels — the pin/
   scale/fade is entirely additive, so with no JS this still reads fine,
   just as a plain scroll past 3 full sections. */
.feat-stack { position: relative; }
.feat-panel {
  position: relative;
  width: 100%;
  height: calc(92vh - 80px);
  display: flex;
  align-items: center;
  background: #0a0a0a;
  border-top: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  transform-origin: center top;
}
/* The last panel never gets pinned/covered (see initFeaturesStack —
   there's nothing after it to slide over it), so it doesn't need the
   others' full-viewport height — that just leaves dead empty space
   below its content instead of hiding it under the next panel. */
.feat-panel:last-child { height: auto; padding: clamp(56px, 8vw, 96px) 0; }
.feat-panel-inner { width: 100%; }
.feat-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.feat-panel-grid--rev { direction: rtl; }
.feat-panel-grid--rev > * { direction: ltr; }
.feat-panel-media {
  position: relative;
  overflow: hidden;
  height: min(82vh, 720px);
  max-width: 640px;
  margin: 0 auto;
}
.feat-panel-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.feat-panel-body { display: flex; flex-direction: column; }
.feat-card-tag { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: #F00E4B; text-transform: uppercase; margin-bottom: 16px; }
.feat-card-title { font-family: "Metropolis", "Jost", sans-serif; font-size: clamp(26px, 3vw, 42px); font-weight: 400; color: #fff; letter-spacing: -.02em; line-height: 1.16; margin-bottom: 18px; }
.feat-card-desc { font-size: 14px; font-weight: 300; line-height: 1.75; color: rgba(255, 255, 255, .6); margin-bottom: 26px; max-width: 420px; }
.feat-card-link { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; border-bottom: 2px solid #F00E4B; padding-bottom: 3px; align-self: flex-start; }

.stats-g { display: grid; grid-template-columns: repeat(4, 1fr); }

.price-g { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(16px, 2.5vw, 28px); align-items: start; }
.price-col {
  transition: transform .3s ease, box-shadow .3s ease;
}
.price-col--light {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
}
.price-col--light:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, .07); }
.price-col--dark {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3);
}
.price-col--dark:hover { transform: translateY(-4px); box-shadow: 0 36px 80px rgba(0, 0, 0, .38); }
.price-badge-pop {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #F00E4B;
  color: #fff;
  padding: 6px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(240, 14, 75, .4);
}
.price-check {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.price-btn {
  display: block;
  padding: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.price-btn-outline { border: 1px solid rgba(0, 0, 0, .14); color: #0a0a0a; }
.price-btn-outline:hover { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.price-btn-fill { background: #fff; color: #0a0a0a; }
.price-btn-fill:hover { background: #F00E4B; color: #fff; transform: translateY(-2px); }

/* Pricing toggle */
.ptog-track {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(0, 0, 0, .1);
  padding: 8px 16px;
}
.ptog-switch { width: 50px; height: 28px; background: #eee; border: 1px solid rgba(0, 0, 0, .1); position: relative; cursor: pointer; flex-shrink: 0; }
.ptog-k { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: #F00E4B; box-shadow: 0 2px 6px rgba(240, 14, 75, .4); transition: transform .3s cubic-bezier(.4, 0, .2, 1); }

/* TESTIMONIALS — heading/copy left, GSAP card-stack slider right: front
   card visible, the next two peek behind at reduced scale/opacity, and
   advancing flies the front card off while the stack shifts forward one
   step. See initTestimonialSlider() in homepage.js — it owns every card's
   transform/z-index/opacity, so the base rule below only sets static
   card chrome, not position (JS positions all cards on load). */
.testi-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.testi-slider { position: relative; }
.testi-track {
  position: relative;
  min-height: 300px;
  margin-bottom: 36px;
  /* This is a drag/swipe surface (see initTestimonialSlider in
     homepage.js) — without these, a horizontal drag was indistinguishable
     from a text-selection drag to the browser, which is what caused the
     quote text to get highlighted mid-swipe. pan-y (not none) still lets
     a genuine vertical scroll gesture that starts on the card pass
     through untouched. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.testi-track:active { cursor: grabbing; }
.testi-card {
  position: absolute;
  inset: 0;
  background: #111110;
  border: 1px solid rgba(255, 255, 255, .09);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  transform-origin: center bottom;
  will-change: transform, opacity;
}
.testi-quote-mark { font-size: 52px; font-weight: 700; color: #F00E4B; line-height: .7; margin-bottom: 18px; font-family: Georgia, serif; }
.testi-quote { font-size: 15px; font-weight: 200; line-height: 1.85; color: rgba(255, 255, 255, .65); flex: 1; margin-bottom: 24px; }
.testi-footer { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .07); }
.testi-avatar { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0; }
.testi-name { font-size: 12px; font-weight: 500; color: #fff; }
.testi-biz { font-size: 10px; color: rgba(255, 255, 255, .35); margin-top: 2px; }
.testi-controls { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.testi-arrow { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .14); background: none; color: #fff; font-size: 14px; cursor: pointer; flex-shrink: 0; transition: background .2s, border-color .2s; }
.testi-arrow:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); }
.testi-dots { display: flex; align-items: center; gap: 8px; }
.testi-dot { width: 6px; height: 6px; background: rgba(255, 255, 255, .2); cursor: pointer; transition: background .3s, width .3s; }
.testi-dot.is-active { background: #F00E4B; width: 20px; }
.faq-body { overflow: hidden; max-height: 0; transition: max-height .4s ease; }
.faq-item.open .faq-body { max-height: 240px; }
.faq-item.open .faq-plus { transform: rotate(45deg); }
.faq-plus { transition: transform .3s; display: inline-block; line-height: 1; }

/* FINAL CTA — floating stat cards + decorative glow arcs framing the
   headline (mini-hero treatment). Purely decorative/ambient — no JS
   beyond the site's existing .gsap-up scroll-reveal on each card. */
.cta-arcs { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.cta-arcs path { fill: none; stroke: rgba(240, 14, 75, .16); stroke-width: 1.5; }
.cta-arc-dot { fill: #F00E4B; animation: cta-dot-pulse 2.4s ease-out infinite; }
.cta-arc-dot--b { animation-delay: 1.2s; }
@keyframes cta-dot-pulse {
  0% { r: 4; opacity: 1; }
  70% { r: 12; opacity: 0; }
  100% { r: 4; opacity: 0; }
}
.cta-float-card {
  position: absolute;
  z-index: 1;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(240, 14, 75, .18);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
  padding: 16px 18px;
  min-width: 140px;
  text-align: left;
  animation: cta-card-float 5s ease-in-out infinite;
}
.cta-float-card--tl { top: 10%; left: 6%; animation-delay: 0s; }
.cta-float-card--bl { top: 58%; left: 9%; animation-delay: .6s; }
.cta-float-card--r { top: 26%; right: 6%; animation-delay: 1.2s; }
@keyframes cta-card-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.cta-float-icon { width: 30px; height: 30px; background: #F00E4B; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.cta-float-num { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -.02em; }
.cta-float-label { font-size: 10px; color: rgba(255, 255, 255, .45); margin-top: 2px; white-space: nowrap; }
.cta-float-growth { font-size: 20px; font-weight: 600; color: #F00E4B; letter-spacing: -.02em; margin: 4px 0 10px; }
.cta-float-sub { font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -.01em; margin-top: 2px; white-space: nowrap; }
.cta-float-bars { display: flex; align-items: flex-end; gap: 4px; height: 28px; }
.cta-float-bars span { flex: 1; background: rgba(240, 14, 75, .3); display: block; }
.cta-float-bars span:last-child { background: #F00E4B; }
.cta-checklist { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; font-size: 11px; color: rgba(255, 255, 255, .45); }
.cta-checklist span { display: inline-flex; align-items: center; gap: 6px; }
.cta-scroll-cue { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 48px; animation: cta-scroll-bounce 2s ease-in-out infinite; }
@keyframes cta-scroll-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .cta-arc-dot, .cta-float-card, .cta-scroll-cue { animation: none !important; }
}
@media (max-width: 900px) {
  .cta-float-card, .cta-arcs { display: none !important; }
}

.sq { width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .35); transition: border-color .2s, color .2s; }
.sq:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }
.fl { font-size: 12px; font-weight: 200; color: rgba(255, 255, 255, .45); transition: color .2s; }
.fl:hover { color: rgba(255, 255, 255, .8); }

.app-badges { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.app-badges a { display: inline-flex; opacity: .92; transition: opacity .2s, transform .2s; }
.app-badges a:hover { opacity: 1; transform: translateY(-2px); }
.app-badges img { width: 152px; height: 46px; object-fit: contain; object-position: center; display: block; }
@media (max-width: 480px) {
  .app-badges img { width: 132px; height: 40px; }
}

.app-promo-section { background: #121317; border-top: 1px solid rgba(255, 255, 255, .1); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.app-promo-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 82% 45%, rgba(255, 255, 255, .05), transparent 60%); pointer-events: none; }
.app-promo-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 900px) {
  .app-promo-grid { grid-template-columns: 1fr; gap: 56px; text-align: center; }
  .app-promo-grid .app-badges,
  .app-promo-grid .cta-checklist { justify-content: center !important; }
}

.app-mock-wrap { display: flex; justify-content: center; }
.app-mock-img { width: 100%; max-width: 640px; height: auto; display: block; }

/* TEASE — pinned pain-point slides (just after the stats bar) */
.tease-pin { position: relative; height: 100vh; overflow: hidden; }
.tease-slide { position: absolute; inset: 0; display: flex; align-items: center; padding: clamp(24px, 4vw, 60px) 0; }
.tease-slide .cm { width: 100%; }
.tease-dots { position: absolute; left: 50%; bottom: clamp(22px, 3.5vw, 40px); transform: translateX(-50%); display: flex; gap: 10px; z-index: 5; }
.tease-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: background .3s, width .3s; }
.tease-dot.active { background: #F00E4B; width: 22px; border-radius: 3px; }

@media (max-width: 900px) {
  .hide-m { display: none !important; }
  .feat-row, .feat-row.rev { grid-template-columns: 1fr !important; direction: ltr !important; }
  /* 4 stat cells reflow 4-across → 2x2; their border-right was written
     for a single row (last cell bare), so on 2 columns it leaves a
     stray border on col 2's outer edge and no row divider. Redraw it
     as a proper 2x2 grid: right border on col 1 only, bottom border on
     row 1 only. */
  .stats-g { grid-template-columns: 1fr 1fr !important; }
  .stats-g > div { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, .07) !important; }
  .stats-g > div:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .07) !important; }
  .stats-g > div:nth-child(3), .stats-g > div:nth-child(4) { border-bottom: none !important; }
  /* Swipeable scroll-snap carousel — Pro card centered by default via
     initPriceSlider() in script.js, Basic/Featured peek at the edges to
     signal there's more to swipe to. Bleeds past .cm's own gutter
     (negative margin) then re-adds it as scroll padding so cards land
     flush with the rest of the page's margins at rest. */
  .price-g {
    display: flex !important;
    grid-template-columns: unset !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * clamp(20px, 4vw, 60px));
    /* Top padding must clear the "Most Popular" badge, which pops up
       above the Pro card (top:-14px) — overflow-x:auto here forces
       overflow-y to auto too, so without this room the badge gets
       clipped by the scroll container instead of just peeking out. */
    padding: 28px clamp(20px, 4vw, 60px) 10px;
    scroll-padding: 0 clamp(20px, 4vw, 60px);
  }
  .price-g::-webkit-scrollbar { display: none; }
  .price-col, .price-col--dark {
    flex: 0 0 80%;
    margin: 0 !important;
    transform: none !important;
    scroll-snap-align: center;
  }
  .faq-grid { grid-template-columns: 1fr !important; }
  .tease-pin { height: auto !important; }
  .tease-slide { position: relative !important; opacity: 1 !important; padding: clamp(48px, 8vw, 72px) 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .tease-dots { display: none !important; }
  /* The pin/scale/fade stack only ever runs on desktop (see
     initFeaturesStack in homepage.js) — below that width panels just
     stack normally in document flow, each fully visible, no pinning. */
  .feat-panel { height: auto !important; padding: clamp(48px, 8vw, 72px) 0; transform: none !important; opacity: 1 !important; }
  .feat-panel-grid, .feat-panel-grid--rev { grid-template-columns: 1fr !important; direction: ltr !important; }
  .feat-panel-media { height: 280px !important; margin-bottom: 8px; }
  .testi-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .testi-intro { text-align: left; }
}

/* ══════════════════════════════════════════════════════
   CAREERS PAGES (careers.html, career.html)
   ═══════════════════════════════════════════════════════ */

/* ── Openings accordion (careers.html) — job rows inside each
   department's .faq-body, built by careers.js. ── */
.careers-openings { background: #0a0a0a; padding: clamp(64px, 9vw, 100px) 0; }
.careers-job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .08);
  margin-top: 10px;
  transition: border-color .2s, background .2s;
}
.careers-job-row:hover { border-color: rgba(240, 14, 75, .4); background: rgba(255, 255, 255, .02); }
.careers-job-row-title { font-size: 18px; font-weight: 500; color: #fff; flex: 1; }
.careers-job-row-meta { font-size: 14px; color: rgba(255, 255, 255, .45); }
.careers-job-row-arrow { color: #F00E4B; font-size: 19px; flex-shrink: 0; transition: transform .2s; }
.careers-job-row:hover .careers-job-row-arrow { transform: translateX(4px); }
@media (max-width: 639px) {
  .careers-job-row { flex-wrap: wrap; }
  .careers-job-row-meta { width: 100%; }
}

/* ── Values (careers.html) — big ghost number + hover row, the same
   pattern already used by .service-row/.service-num on company.html's
   services list, reused here for consistency rather than inventing a new
   list treatment. ── */
.careers-values { background: #0a0a0a; padding: clamp(64px, 9vw, 100px) 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.careers-values-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.careers-values-list { display: flex; flex-direction: column; }
.careers-value-item {
  display: grid;
  grid-template-columns: clamp(64px, 8vw, 96px) 1fr;
  align-items: start;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(24px, 3.5vw, 36px) clamp(16px, 2vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  position: relative;
  transition: background .3s;
}
.careers-value-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.careers-value-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #F00E4B;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}
.careers-value-item:hover { background: rgba(255, 255, 255, .025); }
.careers-value-item:hover::before { transform: scaleY(1); }
.careers-value-num {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(40px, 4.6vw, 60px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .14);
  transition: color .35s;
}
.careers-value-item:hover .careers-value-num { color: rgba(240, 14, 75, .5); }
.careers-value-title { font-family: "Metropolis", "Jost", sans-serif; font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; color: #fff; margin-bottom: 10px; transition: color .3s; }
.careers-value-item:hover .careers-value-title { color: #F00E4B; }
.careers-value-desc { font-size: 14px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .55); max-width: 480px; }
@media (max-width: 767px) {
  .careers-values-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .careers-value-item { grid-template-columns: 1fr; gap: 8px; }
}

/* ── Perks & Benefits (careers.html) — bordered cards with a tinted icon
   tile and a hover lift, matching the site's other card-hover components
   (.cs-card, .careers-job-row) instead of bare icon+text floating in a
   grid. ── */
.careers-perks { background: #fff; padding: clamp(64px, 9vw, 100px) 0; }
.careers-perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 28px); }
.careers-perk {
  padding: clamp(28px, 3.5vw, 36px);
  border: 1px solid rgba(10, 10, 10, .1);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.careers-perk:hover {
  border-color: rgba(240, 14, 75, .3);
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(10, 10, 10, .08);
}
.careers-perk-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 14, 75, .08);
  margin-bottom: 22px;
  transition: background .3s;
}
.careers-perk:hover .careers-perk-icon { background: rgba(240, 14, 75, .14); }
.careers-perk-title { font-family: "Metropolis", "Jost", sans-serif; font-size: 17px; font-weight: 600; color: #0a0a0a; margin-bottom: 10px; }
.careers-perk-desc { font-size: 14px; font-weight: 300; line-height: 1.65; color: #777; }
@media (max-width: 767px) {
  .careers-perks-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Careers listing hero override — .works-hero's default 140px top
   padding is more breathing room than this page needs (its nav is
   position:sticky, not fixed, so content never needs extra clearance
   to avoid sitting under it — this is a pure spacing choice). ── */
.careers-hero { padding-top: 70px; }
@media (max-width: 639px) {
  .careers-hero { padding-top: 60px; }
}

/* ── Job detail page (career.html) ── */
.job-hero { background: #0a0a0a; padding: 84px 0 clamp(56px, 8vw, 88px); position: relative; overflow: hidden; }
.job-breadcrumb { font-size: 14px; color: rgba(255, 255, 255, .4); margin-bottom: 34px; }
.job-breadcrumb a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.job-breadcrumb a:hover { color: #fff; }
.job-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.job-title { font-family: "Metropolis", "Jost", sans-serif; font-size: clamp(38px, 5.5vw, 64px); font-weight: 300; color: #fff; letter-spacing: -.02em; max-width: 820px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 15px; color: rgba(255, 255, 255, .5); }
.job-meta span { color: #fff; font-weight: 500; }
@media (max-width: 639px) {
  .job-hero { padding: 60px 0 40px; }
}

.job-content { background: #0a0a0a; padding: 0 0 clamp(72px, 10vw, 112px); }
.job-content-block { padding-bottom: clamp(48px, 7vw, 72px); }
.job-content-block .section-label { display: block; margin-bottom: 20px; }
.job-content-text { font-size: 18px; font-weight: 300; line-height: 1.8; color: rgba(255, 255, 255, .65); max-width: 860px; }
.job-list { list-style: none; padding: 0; margin: 0; max-width: 860px; }
.job-list li { position: relative; padding: 16px 0 16px 28px; font-size: 18px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .65); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.job-list li::before { content: '—'; position: absolute; left: 0; color: #F00E4B; }

/* ── Application form (career.html) ── */
.job-apply { background: #0a0a0a; padding: clamp(48px, 7vw, 72px) 0 clamp(80px, 10vw, 110px); border-top: 1px solid rgba(255, 255, 255, .08); }
.job-apply-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.job-field { display: flex; flex-direction: column; gap: 8px; }
.job-field label { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .6); }
.job-field label .req { color: #F00E4B; }
.job-field input[type="text"],
.job-field input[type="email"],
.job-field input[type="tel"],
.job-field select,
.job-field textarea {
  width: 100%;
  padding: 13px 16px;
  background: #141412;
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
}
.job-field input:focus,
.job-field select:focus,
.job-field textarea:focus { border-color: rgba(240, 14, 75, .6); }
.job-field textarea { resize: vertical; min-height: 110px; }
.job-field--full { grid-column: 1 / -1; }
.job-file {
  border: 1px dashed rgba(255, 255, 255, .2);
  padding: 20px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: border-color .2s;
}
.job-file:hover { border-color: rgba(240, 14, 75, .5); }
/* Visually hidden but still focusable — a plain display:none input can't
   receive the browser's native "please fill out this field" validation
   bubble, which needs to anchor to a real (if invisible) focus target. */
.job-file input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.job-file-name { color: #fff; font-weight: 500; }
.job-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: rgba(255, 255, 255, .5); line-height: 1.6; }
.job-consent input { margin-top: 3px; }
.job-apply-success {
  display: none;
  text-align: center;
  padding: clamp(48px, 8vw, 72px) 0;
}
.job-apply-success.is-visible { display: block; }
.job-apply-success h3 { font-family: "Metropolis", "Jost", sans-serif; font-size: clamp(26px, 3vw, 36px); font-weight: 400; color: #fff; margin-bottom: 12px; }
.job-apply-success p { font-size: 14px; color: rgba(255, 255, 255, .55); }
@media (max-width: 767px) {
  .job-apply-grid { grid-template-columns: 1fr; }
}

/* ── index-centered.html — #how's "3 steps" grid was inline-styled with
   a fixed 5-column (step/arrow/step/arrow/step) layout and no responsive
   override anywhere, so it forced its natural width and caused page-wide
   horizontal scroll below ~640px (found via a full responsive audit). ── */
@media (max-width: 767px) {
  .how-steps-grid {
    grid-template-columns: 1fr !important;
    row-gap: 40px;
  }
  .how-steps-grid > div:nth-child(2),
  .how-steps-grid > div:nth-child(4) {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════
   CITYMAPIA TOOL PAGE (citymapia-tool.html)
   Premium treatment adapted from whiterabbit.group's visual
   language: near-black/off-white contrast, huge thin display
   type, a subtle dot-grid texture, and a scroll/tab-driven
   capability "chip cloud" for the tech-stack section — while
   reusing this site's existing tokens/animation primitives
   (.section-h2's char-reveal, .section-label, GSAP/ScrollTrigger
   already wired site-wide) rather than any new library.
   ══════════════════════════════════════════════════════ */

.tool-eyebrow {
  display: inline-block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid rgba(240, 14, 75, .35);
  padding: 6px 16px;
  margin-bottom: 28px;
}

/* ── HERO — pure typographic, no illustration (matches
   whiterabbit's own hero: huge thin type carries the whole
   section, no supporting image needed) ── */
.tool-hero {
  position: relative;
  background: var(--color-dark);
  padding: clamp(120px, 15vw, 200px) 0 clamp(90px, 11vw, 140px);
  overflow: hidden;
  text-align: center;
}
.tool-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 40%, transparent 90%);
  pointer-events: none;
}
.tool-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tool-hero-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(44px, 8vw, 128px);
  font-weight: 200;
  line-height: .96;
  letter-spacing: -.04em;
  color: var(--color-text-on-dark);
  margin-bottom: 26px;
}
.tool-hero-sub {
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(250, 250, 249, .5);
  max-width: 560px;
  margin: 0 auto 40px;
}
.tool-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.tool-hero-link {
  font-size: 13px;
  font-weight: 500;
  color: rgba(250, 250, 249, .55);
  border-bottom: 1px solid rgba(250, 250, 249, .2);
  padding-bottom: 3px;
  transition: color .25s, border-color .25s;
}
.tool-hero-link:hover { color: #fff; border-color: rgba(250, 250, 249, .6); }

/* ── WHAT IS IT — two-col, CSS-built browser mockup (no image asset) ── */
.tool-what { background: #fff; padding: clamp(80px, 10vw, 130px) 0; }
.tool-what-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
/* Website/dashboard "skeleton" mockups — plain flat rectangles read as
   an unfinished placeholder rather than a website preview, so this
   builds an actual recognizable layout out of the same primitives:
   real browser traffic-light dots, a nav row, heading/subheading text
   bars of decreasing width (mimicking real copy, not just one blob),
   a CTA-shaped bar, and a 3-card feature row (used by "What is it");
   a status/log line list for the AWS CDK promo's terminal-style mock. */
.tool-mock {
  background: #111;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.tool-mock--dark { background: #0a0a0a; }
.tool-mock-topbar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.tool-mock-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: rgba(255, 255, 255, .18); }
.tool-mock-dot--red { background: #ff5f57; }
.tool-mock-dot--yellow { background: #febc2e; }
.tool-mock-dot--green { background: #28c840; }
.tool-mock-url {
  margin-left: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, .35);
}
.tool-mock-body { padding: clamp(24px, 3.4vw, 36px); }

/* "What is it" website preview */
.tool-mock-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.tool-mock-logo { width: 24px; height: 8px; background: var(--color-accent); flex-shrink: 0; }
.tool-mock-navitem { width: 30px; height: 6px; background: rgba(255, 255, 255, .16); flex-shrink: 0; }
.tool-mock-navitem--last { margin-left: auto; }
.tool-mock-hero { margin-bottom: 26px; }
.tool-mock-line { display: block; height: 9px; background: rgba(255, 255, 255, .14); }
.tool-mock-line + .tool-mock-line { margin-top: 10px; }
.tool-mock-line--lg { width: 80%; height: 15px; background: rgba(255, 255, 255, .22); }
.tool-mock-line--md { width: 55%; }
.tool-mock-line--sm { width: 85%; height: 6px; background: rgba(255, 255, 255, .12); }
.tool-mock-cta { display: block; width: 100px; height: 26px; background: var(--color-accent); margin-top: 16px; }
.tool-mock-row { display: flex; gap: 12px; }
.tool-mock-card { flex: 1; min-width: 0; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); padding: 16px; }
.tool-mock-icon { display: block; width: 20px; height: 20px; background: rgba(255, 255, 255, .18); margin-bottom: 12px; }

/* AWS CDK promo — deploy/status log style */
.tool-mock-log { display: flex; flex-direction: column; gap: 14px; }
.tool-mock-log-row { display: flex; align-items: center; gap: 12px; }
.tool-mock-log-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: rgba(255, 255, 255, .2); }
.tool-mock-log-dot--live { background: var(--color-accent); box-shadow: 0 0 0 3px rgba(240, 14, 75, .18); }
.tool-mock-log-bar { flex: 1; height: 8px; background: rgba(255, 255, 255, .1); }
.tool-mock-log-tag {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, .35);
  flex-shrink: 0;
}
.tool-what-title { margin-bottom: 20px; }
.tool-what-desc {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: #666;
  max-width: 480px;
  margin-bottom: 28px;
}
.tool-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tool-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  line-height: 1.5;
}
.tool-check-list li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--color-accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ── BENEFITS ── */
.tool-benefits { background: var(--color-dark); padding: clamp(80px, 10vw, 130px) 0; }
.tool-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .08);
  margin-top: clamp(44px, 5vw, 60px);
}
.tool-benefit-card { background: var(--color-dark); padding: clamp(32px, 4vw, 44px); transition: background .3s; }
.tool-benefit-card:hover { background: #131311; }
.tool-benefit-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 14, 75, .1);
  margin-bottom: 20px;
}
.tool-benefit-title { font-family: "Metropolis", "Jost", sans-serif; font-size: 18px; font-weight: 500; color: #fff; margin-bottom: 10px; }
.tool-benefit-desc { font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(255, 255, 255, .72); }

/* ── COMPARISON TABLE ── */
.tool-compare { background: #fff; padding: clamp(80px, 10vw, 130px) 0; }
.tool-compare-table-wrap { overflow-x: auto; border: 1px solid rgba(0, 0, 0, .08); }
.tool-compare-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 14px; }
.tool-compare-table th, .tool-compare-table td {
  padding: 18px 24px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.tool-compare-table thead th {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #888;
  background: #fafafa;
}
.tool-compare-table tbody td { color: #444; font-weight: 300; }
.tool-compare-table tbody tr:last-child td { border-bottom: none; }
.tool-compare-highlight { background: rgba(10, 10, 10, .03); color: #0a0a0a !important; font-weight: 500 !important; border-left: 2px solid var(--color-accent); }
.tool-compare-table thead .tool-compare-highlight { background: rgba(10, 10, 10, .03); color: var(--color-accent) !important; }

/* ── TECHNOLOGIES — scroll/tab-driven chip cloud ── */
.tool-tech { background: var(--color-dark); padding: clamp(80px, 10vw, 130px) 0; }
/* Tabs are navigation controls — bordered pills, small type. Cards
   below are content — borderless soft-fill tiles with much bigger
   icons. Deliberately different shapes/treatments so the two never
   read as the same kind of element (a real complaint on the first
   pass, when both used near-identical thin borders + pill padding). */
.tool-tech-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(40px, 5vw, 60px);
}
.tool-tech-tab {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .5);
  background: none;
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 10px 18px;
  cursor: pointer;
  transition: all .25s;
}
.tool-tech-tab:hover { color: #fff; border-color: rgba(255, 255, 255, .35); }
.tool-tech-tab.is-active { color: #fff; background: var(--color-accent); border-color: var(--color-accent); }

/* Uniform grid — every card is the same size regardless of label
   length ("Microsoft SQL Server" vs "AWS"), so the row aligns cleanly
   instead of the ragged, mismatched widths a flex-wrap of variable-
   width pills produced. */
.tool-tech-panel {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.tool-tech-panel.is-active { display: grid; }
.tool-tech-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .04);
  border: none;
  padding: 30px 16px;
  cursor: default;
  transition: background .25s, transform .25s;
}
.tool-tech-chip:hover { background: rgba(255, 255, 255, .08); transform: translateY(-3px); }
/* Real brand logos (Citymapia's own production CDN assets), shown in
   full color on a white badge, sized big enough to actually read —
   most of these icons are flat-color marks designed for a light
   background (Angular red, Vue green, TypeScript blue, etc.);
   desaturating them against this section's dark background (the
   .cl-logo grayscale-marquee treatment, tried earlier) collapsed them
   into illegible dark-on-dark blobs. A "Technologies We Use" section is
   about identifying named tools, not a quiet trust marquee, so
   full-color recognition at real size is the right call here. */
.tool-tech-chip-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  padding: 8px;
}
.tool-tech-chip-desc {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
  width: 200px;
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
  background: #161616;
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 12px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 3;
}
.tool-tech-chip:hover .tool-tech-chip-desc { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── AWS CDK CROSS-PROMO ── */
.tool-cdk-promo { background: #fff; padding: clamp(80px, 10vw, 130px) 0; }
.tool-cdk-promo-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* ── .NET JOURNEY TIMELINE — plain near-black, same as every other
   dark section on this page; accent used only for the year digits and
   the "Now" card's border, not as a background wash. ── */
.tool-journey {
  position: relative;
  background: var(--color-dark);
  padding: clamp(80px, 10vw, 130px) 0;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.tool-journey-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}
.tool-journey-inner { position: relative; z-index: 1; }
.tool-journey-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(32px, 4.5vw, 56px);
  font-weight: 200;
  color: var(--color-text-on-dark);
  letter-spacing: -.03em;
  margin-bottom: 16px;
}
.tool-journey-accent { color: var(--color-accent); font-style: italic; }
.tool-journey-sub {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255, 255, 255, .5);
  max-width: 560px;
  margin: 0 auto clamp(44px, 5vw, 60px);
  line-height: 1.7;
}
.tool-journey-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: left;
}
.tool-journey-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 24px 20px;
}
.tool-journey-card--now { border-color: var(--color-accent); }
.tool-journey-year {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 22px;
  font-weight: 500;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.tool-journey-desc { font-size: 13px; font-weight: 300; line-height: 1.65; color: rgba(255, 255, 255, .65); }
.tool-journey-card--now .tool-journey-desc { color: rgba(255, 255, 255, .92); }

/* ── PAYMENT GATEWAYS ── */
.tool-payments { background: #fafafa; padding: clamp(80px, 10vw, 130px) 0; }
.tool-payments-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(40px, 6vw, 70px);
  align-items: center;
}
/* 4 columns × 2 rows exactly fits all 8 gateways — 3 columns left a
   dangling 2-item last row with an empty gap, which read as uneven. */
.tool-payments-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* These are wordmark logos (the brand name is baked into the image
   itself) — pairing a shrunken version of them with a redundant text
   label squeezed into a 28px-tall row is what made the last pass look
   cramped and small. Let each logo stand alone, centered, at a size
   where it's actually legible; alt text covers accessibility. */
.tool-payment-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 20px 28px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .1);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.tool-payment-badge:hover { border-color: rgba(240, 14, 75, .3); box-shadow: 0 14px 32px rgba(0, 0, 0, .07); transform: translateY(-2px); }
.tool-payment-icon {
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── FINAL CTA — lead-capture form, same near-black theme as the rest
   of the page; accent reserved for the submit button and focus state
   only (matches .job-field's dark-input convention, styles.css:8211). ── */
.tool-cta {
  background: var(--color-dark);
  padding: clamp(70px, 9vw, 110px) 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.tool-cta-inner { text-align: center; }
.tool-cta-heading {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 200;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--color-text-on-dark);
  margin-bottom: 40px;
}
.tool-cta-form {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.tool-cta-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tool-cta-input {
  width: 100%;
  padding: 14px 18px;
  background: #141412;
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 14px;
  font-family: "Metropolis", "Jost", sans-serif;
  outline: none;
  transition: border-color .2s;
}
.tool-cta-input::placeholder { color: rgba(255, 255, 255, .35); }
.tool-cta-input:focus { border-color: rgba(240, 14, 75, .6); }
.tool-cta-textarea { min-height: 100px; resize: vertical; }
.tool-cta-submit {
  align-self: center;
  margin-top: 10px;
  padding: 15px 44px;
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background .25s;
}
.tool-cta-submit:hover { background: #c40b3e; }

@media (max-width: 899px) {
  .tool-what-grid,
  .tool-cdk-promo-grid,
  .tool-payments-grid { grid-template-columns: 1fr; }
  .tool-cdk-promo-visual { order: -1; }
  .tool-benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-journey-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-payments-logos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .tool-benefit-grid { grid-template-columns: 1fr; }
  .tool-journey-grid { grid-template-columns: 1fr; }
  .tool-cta-form-row { grid-template-columns: 1fr; }
  .tool-tech-chip-desc { display: none; }
}


/* ══════════════════════════════════════════════════════
   BLOG (blog.html — index) & BLOG POST (blog-post.html —
   detail template, populated at runtime by blog-post-detail.js
   from blog-data.js based on ?slug=). Editorial, text-forward:
   no illustrated cover art (would clash with the site's black/
   white/minimal-accent palette), real content throughout.
   ═══════════════════════════════════════════════════════ */
.blog-hero {
  background: #0a0a0a;
  padding: 150px 0 64px;
  position: relative;
  overflow: hidden;
}
.blog-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.blog-hero-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #F00E4B;
  margin-bottom: 18px;
  display: block;
}
.blog-hero-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 20px;
}
.blog-hero-sub {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
  max-width: 520px;
}
@media (max-width: 639px) {
  .blog-hero { padding: 120px 0 48px; }
}

/* ── Featured post (light section, single editorial row) ── */
.blog-featured-section {
  background: #fff;
  padding: 72px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.blog-featured {
  display: block;
  color: inherit;
  text-decoration: none;
  max-width: 800px;
}
.blog-featured-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F00E4B;
  margin-bottom: 18px;
  display: block;
}
.blog-featured-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #0a0a0a;
  margin-bottom: 16px;
  transition: color 0.2s;
}
.blog-featured:hover .blog-featured-title { color: #F00E4B; }
.blog-featured-excerpt {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: #666;
  margin-bottom: 22px;
  max-width: 640px;
}
.blog-featured-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #999;
}
.blog-featured-meta .dot { color: #ccc; }
.blog-featured-read {
  font-size: 13px;
  font-weight: 600;
  color: #0a0a0a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
}
.blog-featured:hover .blog-featured-read { color: #F00E4B; }

/* ── Grid of remaining posts (dark, hairline-divided cells — same
   1px-gap technique already used for .testi-grid / homepage stats) ── */
.blog-grid-section { background: #0a0a0a; padding: 80px 0 100px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 1023px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .blog-grid { grid-template-columns: 1fr; }
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: #0a0a0a;
  padding: clamp(28px, 3.4vw, 40px);
  color: inherit;
  text-decoration: none;
}
.blog-card-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F00E4B;
  margin-bottom: 14px;
}
.blog-card-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  transition: color 0.2s;
  flex: 1;
}
.blog-card:hover .blog-card-title { color: #F00E4B; }
.blog-card-excerpt {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 20px;
}
.blog-card-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Empty state / pagination (real paged data — no equivalent in the
   static demo, styled to match the dark grid section around them) ── */
.blog-empty {
  color: rgba(255, 255, 255, 0.45);
  font-size: 15px;
  font-weight: 300;
  text-align: center;
  padding: 40px 0;
}
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.blog-pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.blog-pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.blog-pagination-page:hover { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.blog-pagination-page.is-current {
  color: #0a0a0a;
  background: #F00E4B;
  border-color: #F00E4B;
}
.blog-pagination-link {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s;
}
.blog-pagination-link:hover { color: #F00E4B; }

/* ── BLOG POST DETAIL ── */
.post-hero { background: #0a0a0a; padding: 150px 0 56px; position: relative; overflow: hidden; }
.post-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 28px;
  transition: color 0.2s;
}
.post-back:hover { color: #fff; }
.post-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F00E4B;
  margin-bottom: 18px;
  display: block;
}
.post-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 22px;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}
.post-meta .dot { color: rgba(255, 255, 255, 0.25); }

.post-body-section { background: #fff; padding: 64px 0 20px; }
.post-body { max-width: 700px; margin: 0 auto; }
.post-body-lead {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.7;
  color: #333;
  margin-bottom: 20px;
}
.post-body h2 {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #0a0a0a;
  margin: 48px 0 18px;
}
.post-body h3 {
  font-size: 17px;
  font-weight: 600;
  color: #0a0a0a;
  margin: 30px 0 12px;
}
.post-body p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.8;
  color: #444;
  margin-bottom: 18px;
}
.post-body ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.post-body ul li {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.65;
  color: #444;
  padding: 10px 0 10px 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  position: relative;
}
.post-body ul li:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
.post-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 6px;
  height: 6px;
  background: #F00E4B;
}

.post-faq-section { background: #fff; padding: 20px 0 72px; }
.post-faq { max-width: 700px; margin: 0 auto; }
.post-faq-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 500;
  color: #0a0a0a;
  margin-bottom: 24px;
}
.post-faq-item { border-top: 1px solid rgba(0, 0, 0, 0.09); padding: 22px 0; }
.post-faq-q { font-size: 16px; font-weight: 600; color: #0a0a0a; margin-bottom: 8px; }
.post-faq-a { font-size: 15px; font-weight: 300; line-height: 1.75; color: #555; }

.post-related-section { background: #0a0a0a; padding: 72px 0 90px; }
.post-related-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 28px;
}
.post-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 1023px) {
  .post-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .post-related-grid { grid-template-columns: 1fr; }
}

/* AI PAGE (ai.html): dedicated page for Citymapia's AI features.
   Content sourced from real blog posts (blog-data.js) and the
   existing AI Agents service card on company.html, not invented
   marketing copy. Same black/white/single-red-accent theme as the
   rest of the site, sharp corners throughout. */
.ai-hero { background: #0a0a0a; padding: 140px 0 96px; position: relative; overflow: hidden; }
.ai-hero-inner { position: relative; z-index: 1; }
.ai-hero-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(38px, 6vw, 74px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 16ch;
  margin-bottom: 20px;
}
.ai-hero-sub {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  max-width: 480px;
}
/* Anchor-tag row: real section names, not fabricated stats — fills the
   width the way works-hero-stats does on other hero sections, without
   inventing metrics we don't have for this page. */
.ai-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 639px) {
  .ai-hero { padding: 116px 0 64px; }
}

/* Section shell + heading. Eyebrow used ONCE on the whole page, on
   the MCP section only (see ai.html). */
.ai-section { padding: clamp(76px, 9vw, 128px) 0; }
.ai-section--light { background: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
.ai-section--dark { background: #0a0a0a; }
.ai-section-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F00E4B;
  margin-bottom: 16px;
  display: block;
}
.ai-section-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 700px;
  margin-bottom: 16px;
}
.ai-section--light .ai-section-title { color: #0a0a0a; }
.ai-section--dark .ai-section-title { color: #fff; }
.ai-section-lead {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  max-width: 560px;
}
.ai-section--light .ai-section-lead { color: #555; }
.ai-section--dark .ai-section-lead { color: rgba(255, 255, 255, 0.55); }

/* Tag chips: short supporting facts as an inline row of sharp
   chips instead of a bordered list (WhatsApp + data-intelligence
   sections). */
.ai-tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ai-tag {
  font-size: 12.5px;
  font-weight: 500;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}
.ai-section--light .ai-tag { border-color: rgba(0, 0, 0, 0.12); color: #444; }

/* "How it works" flow: three connected steps, not three equal
   cards. The middle (decide) step carries more visual weight since
   that is the actual AI decision-making step; the other two are
   supporting. Connector lines animate in on scroll (ai-page.js) to
   show sequence, not for decoration. */
.ai-flow {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: clamp(48px, 6vw, 72px);
}
/* Nodes are fixed-width, not flex:1 — a growing flex-basis stretched
   each node across a third of the row and centered its (much narrower)
   icon/label inside that, which is what read as "floating in empty
   space" misaligned with the left-set heading above. The connector
   lines carry the stretch instead, which fits their role better: they
   are literally the thing filling the gap between steps. */
.ai-flow-node { flex: 0 1 200px; text-align: center; }
.ai-flow-node--core { flex: 0 1 220px; }
.ai-flow-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.8);
}
.ai-flow-node--core .ai-flow-icon {
  width: 72px;
  height: 72px;
  border-color: #F00E4B;
  color: #F00E4B;
  background: rgba(240, 14, 75, 0.08);
}
.ai-flow-step { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #F00E4B; margin-bottom: 8px; }
.ai-flow-title { font-family: "Metropolis", "Jost", sans-serif; font-size: 17px; font-weight: 500; color: #fff; margin-bottom: 8px; }
.ai-flow-desc { font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.72); max-width: 200px; margin: 0 auto; }
.ai-flow-line {
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: 76px;
  transform: scaleX(0);
  transform-origin: left;
}
@media (max-width: 767px) {
  .ai-flow { flex-direction: column; gap: 32px; }
  .ai-flow-node, .ai-flow-node--core { flex: 0 0 auto; }
  .ai-flow-line { flex: 0 0 auto; width: 1px; height: 32px; min-width: 0; margin-bottom: 0; transform: scaleY(0); transform-origin: top; }
}

/* WhatsApp voice-to-appointment mockup: a recreation of the real
   flow described in the WhatsApp AI blog post, not a generic
   chat-bubble illustration. */
.ai-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
@media (max-width: 900px) {
  .ai-split { grid-template-columns: 1fr; }
}
.ai-chat-frame {
  max-width: 380px;
  margin: 0 auto;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 22px;
}
.ai-section--light .ai-chat-frame { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.35); }
.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-chat-avatar {
  width: 36px;
  height: 36px;
  background: #F00E4B;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-chat-name { font-size: 13px; font-weight: 600; color: #fff; }
.ai-chat-status { font-size: 11px; color: rgba(255, 255, 255, 0.4); }
.ai-chat-body { display: flex; flex-direction: column; gap: 10px; }
.ai-chat-bubble { max-width: 82%; padding: 10px 14px; font-size: 13px; line-height: 1.55; }
.ai-chat-bubble--in { align-self: flex-start; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); }
.ai-chat-bubble--out { align-self: flex-end; background: #F00E4B; color: #fff; }
.ai-chat-bubble--system { align-self: center; background: transparent; color: rgba(255, 255, 255, 0.35); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 0; }
.ai-chat-time { font-size: 10px; color: rgba(255, 255, 255, 0.3); margin-top: 4px; display: block; }
.ai-chat-bubble--out .ai-chat-time { color: rgba(255, 255, 255, 0.65); }

/* Ecosystem / MCP diagram: plain node-and-line recreation of the
   "external apps and AI agents query the open API" relationship
   described in the AI Blueprint post. */
.ai-ecosystem { display: flex; align-items: center; justify-content: center; gap: 0; padding: 48px 20px 16px; flex-wrap: wrap; }
.ai-eco-node {
  border: 1px solid rgba(0, 0, 0, 0.14);
  padding: 16px 20px;
  font-size: 13px;
  font-weight: 500;
  color: #0a0a0a;
  text-align: center;
  background: #fff;
  min-width: 150px;
}
.ai-eco-node--core { border-color: #F00E4B; color: #F00E4B; font-weight: 600; background: rgba(240, 14, 75, 0.04); }
.ai-eco-line { width: clamp(28px, 4vw, 56px); height: 1px; background: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.22) 0 4px, transparent 4px 8px); flex-shrink: 0; transform: scaleX(0); transform-origin: left; }
.ai-eco-col { display: flex; flex-direction: column; gap: 12px; }
.ai-eco-caption { font-size: 13px; font-weight: 300; line-height: 1.7; color: #666; max-width: 560px; margin: 24px auto 0; text-align: center; }
@media (max-width: 639px) {
  .ai-ecosystem { flex-direction: column; }
  .ai-eco-line { width: 1px; height: 28px; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0 4px, transparent 4px 8px); transform: scaleY(0); transform-origin: top; }
}

/* Manifesto statement: a single bold typographic moment for the
   data-intelligence section, distinct from every other layout
   family on the page (no card grid, no split, no diagram). Sized
   and spaced to actually fill the section as a statement, not a
   caption stranded in a black void. */
.ai-manifesto-section {
  min-height: 72vh;
  display: flex;
  align-items: center;
}
.ai-manifesto-section .cm-wrap {
  width: 100%;
}
.ai-manifesto-title {
  font-family: "Metropolis", "Jost", sans-serif;
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
  max-width: 15ch;
  margin-bottom: 28px;
}
.ai-manifesto-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.5);
  max-width: 480px;
  margin-bottom: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.ai-manifesto-section .ai-tag-row {
  margin-top: 40px;
  padding-top: 24px;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .ai-manifesto-section { min-height: 0; padding: 88px 0; }
  .ai-manifesto-section .ai-tag-row { justify-content: flex-start; }
}