/* ============================================
   PMA SOLUTIONS — STYLES (v2)
   Brand: #1A2B3C dark + #38B6FF accent + #22c55e green
   ============================================ */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-dark: #1A2B3C;
  --color-dark-2: #243648;
  --color-dark-3: #2d4258;
  --color-accent: #38B6FF;
  --color-accent-soft: rgba(56, 182, 255, 0.12);
  --color-accent-glow: rgba(56, 182, 255, 0.4);
  --color-green: #22c55e;
  --color-green-soft: rgba(34, 197, 94, 0.12);
  --color-white: #ffffff;
  --color-gray-50: #f7f9fb;
  --color-gray-100: #eef2f6;
  --color-gray-200: #dde4ec;
  --color-gray-400: #8898ab;
  --color-gray-600: #4a5868;
  --color-gray-800: #2c3a48;
  --color-text: #1A2B3C;
  --color-text-muted: #5a6878;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;

  --container: 1200px;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 2px 8px rgba(26, 43, 60, 0.06);
  --shadow: 0 8px 30px rgba(26, 43, 60, 0.08);
  --shadow-lg: 0 24px 60px rgba(26, 43, 60, 0.15);
  --shadow-accent: 0 12px 40px rgba(56, 182, 255, 0.25);

  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ---------- LAYOUT HELPERS ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

section { padding: 80px 0; }

@media (max-width: 768px) {
  section { padding: 56px 0; }
}

.section__header {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.section__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.section__eyebrow--light {
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-accent);
}

.section__title {
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin-bottom: 14px;
}

.section__intro {
  font-size: 1.06rem;
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-dark);
  box-shadow: var(--shadow-accent);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 50px rgba(56, 182, 255, 0.4);
  background: #4cc0ff;
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.btn--ghost-light {
  background: var(--color-white);
  color: var(--color-dark);
  border: 1.5px solid var(--color-gray-200);
}
.btn--ghost-light:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn--large { padding: 16px 32px; font-size: 1rem; }
.btn--full { width: 100%; }

.btn--whatsapp {
  background: #25d366;
  color: var(--color-white);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}
.btn--whatsapp:hover {
  background: #1fb958;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.4);
  color: var(--color-white);
}

.btn--email {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn--email:hover {
  background: var(--color-dark-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  color: var(--color-white);
}

/* ---------- NAVIGATION ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 16px 0;
  transition: all var(--transition);
}

.nav.scrolled,
.nav--solid {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-gray-100);
  padding: 12px 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.nav__logo {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.nav__logo img {
  height: 56px;
  width: auto;
  border-radius: 8px;
  transition: transform var(--transition);
}
.nav__logo:hover img { transform: scale(1.04); }

.nav.scrolled .nav__logo img,
.nav--solid .nav__logo img { height: 46px; }

@media (max-width: 600px) {
  .nav__logo img { height: 46px; }
  .nav.scrolled .nav__logo img,
  .nav--solid .nav__logo img { height: 40px; }
}

.nav__menu {
  display: flex;
  gap: 28px;
  margin-left: auto;
}

.nav__menu a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-white);
  position: relative;
  padding: 4px 0;
}

.nav.scrolled .nav__menu a,
.nav--solid .nav__menu a { color: var(--color-text); }

.nav__menu a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width var(--transition);
}
.nav__menu a:hover::after,
.nav__menu a.is-active::after { width: 100%; }

.nav__cta { padding: 10px 22px; font-size: 0.9rem; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: all var(--transition);
}

.nav.scrolled .nav__toggle span,
.nav--solid .nav__toggle span { background: var(--color-text); }

@media (max-width: 900px) {
  .nav__menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 80%;
    max-width: 320px;
    background: var(--color-dark);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    padding: 40px;
  }
  .nav__menu.open { transform: translateX(0); }
  .nav__menu a {
    color: var(--color-white) !important;
    font-size: 1.4rem;
    font-family: var(--font-display);
    font-weight: 600;
  }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__toggle.open span:nth-child(2) { opacity: 0; }
  .nav__toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- HERO (split layout) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 60px;
  background: var(--color-dark);
  color: var(--color-white);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, var(--color-accent-glow), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(56, 182, 255, 0.18), transparent 60%),
    var(--color-dark);
}
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 182, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 182, 255, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.hero__bg::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-accent-glow) 0%, transparent 70%);
  top: 8%;
  right: -8%;
  filter: blur(80px);
  animation: float 12s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-40px, 40px); }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}

@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.hero__content { max-width: 600px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
  animation: fadeInUp 0.8s 0.1s both;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 12px var(--color-green);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.hero__title {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 22px;
  animation: fadeInUp 0.8s 0.2s both;
}

.hero__title-accent {
  background: linear-gradient(135deg, var(--color-accent) 0%, #6dcaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-weight: 700;
}

.hero__subtitle {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(255, 255, 255, 0.78);
  max-width: 540px;
  margin: 0 0 30px;
  line-height: 1.6;
  animation: fadeInUp 0.8s 0.3s both;
}

/* Benefit list with green highlights */
.hero__benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
  animation: fadeInUp 0.8s 0.4s both;
}

.hero__benefit {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.92);
}

.hero__benefit-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--color-green-soft);
  color: var(--color-green);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.hero__benefit-tag svg { width: 14px; height: 14px; }

.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 0;
  animation: fadeInUp 0.8s 0.5s both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero visual: animated browser mockup */
.hero__visual {
  position: relative;
  animation: fadeInUp 0.9s 0.4s both;
  perspective: 1400px;
}

.browser {
  position: relative;
  background: #0e1a26;
  border-radius: 14px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(56, 182, 255, 0.15);
  overflow: hidden;
  transform: rotateY(-6deg) rotateX(4deg);
  transform-style: preserve-3d;
  animation: browserFloat 8s ease-in-out infinite;
}

@keyframes browserFloat {
  0%, 100% { transform: rotateY(-6deg) rotateX(4deg) translateY(0); }
  50%      { transform: rotateY(-4deg) rotateX(3deg) translateY(-8px); }
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: #18283a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.browser__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.browser__dot:nth-child(1) { background: #ff5f57; }
.browser__dot:nth-child(2) { background: #febc2e; }
.browser__dot:nth-child(3) { background: #28c840; }

.browser__url {
  margin-left: 14px;
  flex: 1;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 6px;
}
.browser__url::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-green);
  box-shadow: 0 0 8px var(--color-green);
}

.browser__body {
  position: relative;
  background: linear-gradient(180deg, #0e1a26 0%, #122334 100%);
  padding: 22px 22px 24px;
  min-height: 320px;
  overflow: hidden;
}

.mock__title {
  height: 14px;
  width: 60%;
  background: linear-gradient(90deg, var(--color-accent), #6dcaff);
  border-radius: 4px;
  margin-bottom: 10px;
  animation: shimmer 3s ease-in-out infinite;
}

.mock__sub {
  height: 8px;
  width: 80%;
  background: rgba(255,255,255,0.12);
  border-radius: 4px;
  margin-bottom: 6px;
}
.mock__sub.short { width: 50%; margin-bottom: 18px; }

@keyframes shimmer {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.mock__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.mock__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 12px;
  position: relative;
  overflow: hidden;
}

.mock__card-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: -0.03em;
  line-height: 1;
}

.mock__card-num.green { color: var(--color-green); }

.mock__card-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  margin-top: 6px;
}

.mock__chart {
  height: 70px;
  margin-top: 8px;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

.mock__bar {
  flex: 1;
  background: linear-gradient(180deg, var(--color-accent) 0%, rgba(56,182,255,0.3) 100%);
  border-radius: 3px 3px 0 0;
  animation: bar 2.4s ease-in-out infinite;
}
.mock__bar:nth-child(1) { height: 30%; animation-delay: 0s; }
.mock__bar:nth-child(2) { height: 45%; animation-delay: 0.15s; }
.mock__bar:nth-child(3) { height: 38%; animation-delay: 0.3s; }
.mock__bar:nth-child(4) { height: 60%; animation-delay: 0.45s; }
.mock__bar:nth-child(5) { height: 52%; animation-delay: 0.6s; }
.mock__bar:nth-child(6) { height: 78%; animation-delay: 0.75s; }
.mock__bar:nth-child(7) { height: 90%; animation-delay: 0.9s; }

@keyframes bar {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.08); }
}

/* Floating card outside browser */
.hero__floating {
  position: absolute;
  bottom: -22px;
  left: -22px;
  background: var(--color-white);
  color: var(--color-dark);
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: floatCard 6s ease-in-out infinite;
  z-index: 2;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.hero__floating-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-green-soft);
  color: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero__floating-text { line-height: 1.2; }
.hero__floating-text strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.hero__floating-text span {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* Cursor accent */
.hero__cursor {
  position: absolute;
  top: 38%;
  right: 24%;
  width: 22px;
  height: 22px;
  z-index: 3;
  animation: cursorMove 5s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
}

@keyframes cursorMove {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-30px, 20px); }
  50%  { transform: translate(20px, 40px); }
  75%  { transform: translate(40px, -10px); }
  100% { transform: translate(0, 0); }
}

@media (max-width: 600px) {
  .hero__floating { left: 0; right: 0; bottom: -16px; margin: 0 auto; max-width: 240px; }
  .browser { transform: none; }
}

/* ---------- TRUST BAR ---------- */
/* Trust row now lives inside the hero (under the CTA) on the dark canvas. */
.hero__trust {
  margin-top: 30px;
  text-align: center;
}

.hero__trust-label {
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 16px;
}

.hero__trust .trust__flags { margin-bottom: 0; gap: 28px; }
.hero__trust .trust__flag { color: rgba(255, 255, 255, 0.9); font-size: 0.92rem; }

@media (max-width: 700px) {
  .hero__trust { margin-top: 24px; }
  /* Balanced 2x2 instead of a lonely 3+1 wrap. */
  .hero__trust .trust__flags {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: 26px;
    row-gap: 14px;
  }
  .hero__trust .trust__flag { font-size: 0.85rem; }
}

.trust__flags {
  display: flex;
  gap: 36px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.trust__flag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--color-dark);
}

.flag {
  display: inline-block;
  width: 26px;
  height: 18px;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.flag--nl { background: linear-gradient(to bottom, #AE1C28 0%, #AE1C28 33.33%, #fff 33.33%, #fff 66.66%, #21468B 66.66%, #21468B 100%); }
.flag--de { background: linear-gradient(to bottom, #000 0%, #000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCE00 66.66%, #FFCE00 100%); }
.flag--es { background: linear-gradient(to bottom, #AA151B 0%, #AA151B 25%, #F1BF00 25%, #F1BF00 75%, #AA151B 75%, #AA151B 100%); }
.flag--pt { background: linear-gradient(to right, #006600 0%, #006600 40%, #FF0000 40%, #FF0000 100%); }
.flag--cw { background: linear-gradient(to bottom, #002B7F 0%, #002B7F 62%, #F9E814 62%, #F9E814 76%, #002B7F 76%, #002B7F 100%); }

/* ---------- APPROACH (4 step cards) ---------- */
.approach { background: var(--color-white); }

.approach__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative;
}

@media (max-width: 900px) {
  .approach__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .approach__steps { grid-template-columns: 1fr; }
}

.step {
  background: var(--color-gray-50);
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  position: relative;
  transition: all var(--transition);
  border: 1px solid transparent;
  overflow: hidden;
}

.step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), #6dcaff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-slow);
}

.step:hover {
  background: var(--color-white);
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}
.step:hover::before { transform: scaleX(1); }

.step__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: all var(--transition);
}
.step__icon svg { width: 24px; height: 24px; }
.step:hover .step__icon {
  background: var(--color-accent);
  color: var(--color-white);
  transform: scale(1.06);
}

.step__num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}

.step h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.step p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ---------- WHAT WE BUILD ---------- */
.build { background: var(--color-gray-50); }

.build__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 32px;
}

@media (max-width: 800px) {
  .build__grid { grid-template-columns: 1fr; }
}

.build__card {
  background: var(--color-white);
  padding: 36px 32px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  transition: all var(--transition-slow);
  position: relative;
  overflow: hidden;
}

.build__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-accent-soft), transparent 60%);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.build__card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}
.build__card:hover::before { opacity: 1; }
.build__card > * { position: relative; z-index: 1; }

.build__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.build__icon svg { width: 28px; height: 28px; }

.build__card h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.build__card p {
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 18px;
}

.build__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.build__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--color-text);
  font-weight: 500;
}

.build__features li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

.build__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.chip svg { width: 14px; height: 14px; }

.chip--shopify {
  background: rgba(149, 191, 71, 0.1);
  border-color: rgba(149, 191, 71, 0.3);
  color: #5e8e2e;
}

/* ---------- POWER PACKS (compact) ---------- */
.packs { background: var(--color-white); padding-top: 60px; }

.packs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .packs__grid { grid-template-columns: 1fr; }
}

.pack {
  position: relative;
  background: var(--color-white);
  padding: 28px 26px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-gray-100);
  transition: all var(--transition-slow);
  display: flex;
  flex-direction: column;
}

.pack:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
}

.pack__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 14px;
  align-self: flex-start;
}

.pack h3 {
  font-size: 1.18rem;
  margin-bottom: 12px;
}

.pack__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.pack__stack span {
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  padding: 4px 10px;
  border-radius: 100px;
  color: var(--color-text);
}

.pack__result {
  font-size: 0.9rem;
  color: var(--color-dark);
  background: var(--color-green-soft);
  border-left: 3px solid var(--color-green);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-top: auto;
  line-height: 1.45;
}

.pack__result strong { font-weight: 700; }

/* ---------- BEYOND / GROWTH (compact) ---------- */
.growth { background: var(--color-gray-50); padding-top: 60px; padding-bottom: 60px; }

.growth__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 900px) { .growth__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .growth__grid { grid-template-columns: 1fr; } }

.growth__card {
  background: var(--color-white);
  padding: 22px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--color-gray-100);
  transition: all var(--transition);
}

.growth__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--color-accent);
}

.growth__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.growth__icon svg { width: 20px; height: 20px; }

.growth__card h3 { font-size: 1rem; margin-bottom: 6px; }

.growth__card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ---------- MODULAR (one-line note) ---------- */
.modular-note {
  padding: 28px 0;
  background: var(--color-white);
  text-align: center;
}

.modular-note p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.modular-note a {
  color: var(--color-accent);
  font-weight: 600;
  font-style: normal;
  border-bottom: 1px dashed var(--color-accent);
}

/* ---------- SECTION CTAS ---------- */
.section-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---------- CASES ---------- */
.cases {
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gray-50) 100%);
}

.cases__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.case {
  background: var(--color-white);
  padding: 30px 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

.case::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-slow);
}

.case:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.case:hover::after { transform: scaleX(1); }

.case__country {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.case__brand { font-size: 1.5rem; margin-bottom: 4px; }

.case__quote {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
  flex-grow: 1;
}

.case__author {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-dark);
}

.case__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-top: 6px;
  align-self: flex-start;
}

.case__link:hover { color: var(--color-dark); }

/* ---------- FAQ ---------- */
.faq { background: var(--color-gray-50); }

.faq__list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq__item {
  background: var(--color-white);
  border-radius: var(--radius);
  border: 1px solid var(--color-gray-100);
  transition: all var(--transition);
  overflow: hidden;
}

.faq__item[open] {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
}

.faq__item summary {
  padding: 18px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-dark);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: color var(--transition);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: '+';
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-gray-100);
  color: var(--color-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: all var(--transition);
}

.faq__item[open] summary::after {
  content: '−';
  background: var(--color-accent);
  color: var(--color-white);
  transform: rotate(180deg);
}

.faq__item summary:hover { color: var(--color-accent); }

.faq__answer {
  padding: 0 24px 22px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-size: 0.95rem;
}

.faq__answer strong { color: var(--color-dark); }

/* ---------- CTA / CONTACT ---------- */
.cta {
  background: var(--color-dark);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%;
  height: 100%;
  background: radial-gradient(circle at top right, var(--color-accent-glow), transparent 50%);
  pointer-events: none;
}

.cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  position: relative;
}

@media (max-width: 900px) {
  .cta__inner { grid-template-columns: 1fr; gap: 36px; }
}

.cta__content .section__eyebrow { margin-bottom: 18px; }

.cta__title {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  margin-bottom: 22px;
  letter-spacing: -0.03em;
}

.cta__text {
  font-size: 1.06rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  margin-bottom: 28px;
}

.cta__text strong { color: var(--color-accent); }

.cta__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cta__contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.94rem;
  transition: all var(--transition);
}

.cta__contact-item svg { color: var(--color-accent); }

.cta__contact-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--color-accent);
  transform: translateX(4px);
}

.cta__form {
  background: var(--color-white);
  color: var(--color-text);
  padding: 36px;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.cta__form h3 { font-size: 1.4rem; margin-bottom: 22px; color: var(--color-dark); }

.form__group { margin-bottom: 16px; }

.form__group label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-dark);
}

.form__group input,
.form__group textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--color-gray-50);
  border: 1.5px solid var(--color-gray-100);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: all var(--transition);
}

.form__group input:focus,
.form__group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-white);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}

.form__group textarea { resize: vertical; min-height: 80px; }

.form__note {
  text-align: center;
  font-size: 0.84rem;
  color: var(--color-text-muted);
  margin-top: 14px;
}

.form__note a { color: var(--color-accent); font-weight: 600; }

.form__success {
  display: none;
  margin-top: 18px;
  padding: 14px;
  background: #dcfce7;
  color: #166534;
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  text-align: center;
}

.form__success.show {
  display: block;
  animation: fadeInUp 0.4s ease;
}

/* ---------- FOOTER ---------- */
.footer {
  background: #0e1a26;
  color: rgba(255, 255, 255, 0.65);
  padding: 50px 0 26px;
  font-size: 0.88rem;
}

.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 800px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer__top { grid-template-columns: 1fr; } }

.footer__logo {
  height: 56px;
  width: auto;
  margin-bottom: 16px;
  border-radius: 8px;
}

.footer__brand p { line-height: 1.6; }

.footer__col h4 {
  color: var(--color-white);
  font-size: 0.94rem;
  margin-bottom: 14px;
}

.footer__col ul { display: flex; flex-direction: column; gap: 9px; }
.footer__col a:hover { color: var(--color-accent); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 26px;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.82rem;
}

.footer__bottom a:hover { color: var(--color-accent); }

/* ---------- WHATSAPP FLOAT ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  background: #25d366;
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: all var(--transition);
  animation: floatPulse 3s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5);
}

@keyframes floatPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 0 0 12px rgba(37, 211, 102, 0); }
}

@media (max-width: 600px) {
  .whatsapp-float { bottom: 18px; right: 18px; width: 50px; height: 50px; }
  .whatsapp-float svg { width: 24px; height: 24px; }
}

/* ===========================================
   SUB-PAGE SHARED — Page header, etc
   =========================================== */

.page-header {
  position: relative;
  padding: 150px 0 70px;
  background: var(--color-dark);
  color: var(--color-white);
  overflow: hidden;
}

.page-header__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, var(--color-accent-glow), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(56, 182, 255, 0.15), transparent 60%),
    var(--color-dark);
}

.page-header__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(56, 182, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 182, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.page-header__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

.page-header__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 18px;
}

.page-header__title {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: 16px;
  line-height: 1.05;
}

.page-header__title em {
  font-style: italic;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-accent) 0%, #6dcaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.page-header__subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---------- ABOUT PAGE: intro + timeline + values ---------- */
.about-intro { background: var(--color-white); padding: 70px 0 40px; }

.about-intro__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .about-intro__grid { grid-template-columns: 1fr; gap: 32px; }
}

.about-intro__content p {
  font-size: 1.06rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: 16px;
}

.about-intro__content strong { color: var(--color-dark); }

.about-intro__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.about-intro__card {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius);
  padding: 22px;
  transition: all var(--transition);
}

.about-intro__card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.about-intro__card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.about-intro__card-icon svg { width: 22px; height: 22px; }

.about-intro__card h4 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.about-intro__card p {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-dark);
  margin: 0;
  line-height: 1.4;
}

/* ---------- TIMELINE ---------- */
.timeline { background: var(--color-gray-50); }

.timeline__wrapper {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 0;
}

.timeline__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    var(--color-accent) 8%,
    var(--color-accent) 92%,
    transparent 100%);
  transform: translateX(-50%);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 36px;
}

.timeline__item:last-child { margin-bottom: 0; }

.timeline__year {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: -0.03em;
}

.timeline__node {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 4px solid var(--color-gray-50);
  box-shadow: 0 0 0 2px var(--color-accent), 0 0 16px var(--color-accent-glow);
  margin-top: 6px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.timeline__card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: all var(--transition-slow);
  position: relative;
}

.timeline__card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.timeline__card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.timeline__card p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 8px;
}

.timeline__card ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.timeline__card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.5;
}

.timeline__card li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 8px;
  flex-shrink: 0;
}

/* Alternate sides */
.timeline__item--right .timeline__year { text-align: right; }
.timeline__item--left .timeline__card  { order: 1; }
.timeline__item--left .timeline__year  { order: 3; text-align: left; }
.timeline__item--right .timeline__year { order: 1; }
.timeline__item--right .timeline__card { order: 3; }
.timeline__item .timeline__node        { order: 2; }

@media (max-width: 800px) {
  .timeline__line { left: 20px; }
  .timeline__item {
    grid-template-columns: 36px 1fr;
    gap: 16px;
  }
  .timeline__item--left .timeline__card,
  .timeline__item--right .timeline__card { order: initial; }
  .timeline__item--left .timeline__year,
  .timeline__item--right .timeline__year { order: initial; text-align: left; margin-bottom: 4px; }
  .timeline__item--left,
  .timeline__item--right { display: block; padding-left: 56px; }
  .timeline__node { position: absolute; left: 12px; top: 4px; }
  .timeline__year { display: block; margin-bottom: 6px; font-size: 1.3rem; }
}

/* ---------- VALUES BLOCKS ---------- */
.values { background: var(--color-white); }

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 800px) {
  .values__grid { grid-template-columns: 1fr; }
}

.value {
  padding: 28px 26px;
  background: var(--color-gray-50);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-gray-100);
  transition: all var(--transition);
}

.value:hover {
  border-color: var(--color-accent);
  background: var(--color-white);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.value__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.value__icon svg { width: 24px; height: 24px; }

.value h3 { font-size: 1.1rem; margin-bottom: 8px; }

.value p {
  font-size: 0.93rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ---------- SERVICES PAGE: detailed sections ---------- */
.svc-section {
  padding: 70px 0;
}
.svc-section--alt { background: var(--color-gray-50); }

.svc-section__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 36px;
}

@media (max-width: 800px) {
  .svc-section__intro { grid-template-columns: 1fr; gap: 24px; }
}

.svc-section__intro h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.svc-section__intro p {
  color: var(--color-text-muted);
  font-size: 1.04rem;
  line-height: 1.65;
}

/* Platform grid (Google, Meta, etc) */
.platforms__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.platform {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  transition: all var(--transition);
}

.svc-section--alt .platform { background: var(--color-white); }

.platform:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.platform__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.platform__icon svg { width: 22px; height: 22px; }

.platform h3 { font-size: 1.05rem; margin-bottom: 6px; }
.platform__what {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 10px;
}
.platform__for {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Service mini cards (websites, email, funnels) */
.svc-mini__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 800px) { .svc-mini__grid { grid-template-columns: 1fr; } }

.svc-mini {
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  transition: all var(--transition);
}

.svc-section--alt .svc-mini { background: var(--color-white); }

.svc-mini:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.svc-mini__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.svc-mini__icon svg { width: 22px; height: 22px; }

.svc-mini h3 { font-size: 1.16rem; margin-bottom: 8px; }

.svc-mini p {
  font-size: 0.94rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

.svc-mini ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.svc-mini li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-text);
}

.svc-mini li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ---------- APPROACH PAGE: extended steps ---------- */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
}

.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all var(--transition-slow);
}

.process-step:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.process-step__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.process-step__icon svg { width: 28px; height: 28px; }

.process-step__num {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 4px;
}

.process-step h3 { font-size: 1.25rem; margin-bottom: 10px; }

.process-step p {
  color: var(--color-text-muted);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

.process-step ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.process-step li {
  display: flex;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--color-text);
  line-height: 1.5;
}

.process-step li::before {
  content: '✓';
  color: var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .process-step { grid-template-columns: 1fr; gap: 14px; padding: 22px; }
}

/* ---------- SCROLL REVEAL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   MOBILE-ONLY OVERRIDES (round 2: sticky scroll-shift, menu fix,
   2x2 grids, packs side-by-side, footer socials)
   These rules apply only to mobile and override above defaults.
   Desktop is untouched.
   ============================================================ */

@media (max-width: 700px) {

  /* ---- 1. Sticky nav: logo smooth slides toward center on scroll ---- */
  /* Default (top): logo left, hamburger right, big white space in between */
  /* Scrolled: logo translates to center, hamburger stays right */
  /* We use the existing .nav.scrolled class (already toggled by script.js) */

  .nav__inner {
    position: relative;
    transition: padding 0.4s ease;
  }

  .nav__logo {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  /* When scrolled on mobile, slide the logo toward center.
     We use translate3d for smoothness. The exact pixel amount depends on viewport,
     so we use a CSS-calc that approximates: half the available space minus logo width. */
  .nav.scrolled .nav__logo {
    transform: translateX(calc(50vw - 50% - 60px));
    /* 50vw = halfway across screen
       - 50% = compensate for logo's own width (centers itself)
       - 60px = pull back so it doesn't sit underneath the hamburger */
  }

  /* ---- 2. Mobile menu fix: full-screen overlay above nav ---- */
  .nav__toggle {
    position: relative;
    z-index: 1100; /* always on top */
  }
  /* When menu open, hamburger lines stay white for visibility on dark menu */
  .nav__toggle.open span,
  .nav.scrolled .nav__toggle.open span,
  .nav--solid .nav__toggle.open span {
    background: var(--color-white) !important;
  }

  /* When the mobile menu is open, lift the nav above the menu so the logo and
     X-toggle stay visible at the top — and force the dark theme on the nav so
     the logo (white text on dark) reads correctly on the dark menu background.
     The body.menu-open class is added by script.js when toggling the menu. */
  body.menu-open .nav {
    z-index: 1101 !important; /* above menu (1050) AND toggle (1100) is fine because toggle is INSIDE the nav */
    background: transparent !important;
    backdrop-filter: none !important;
    border-bottom: none !important;
  }
  body.menu-open .nav__logo img {
    /* Make sure the logo (which already has dark theme baked into the PNG) is visible */
    filter: none;
  }
  /* Hide the "Request a quote" CTA pill while menu is open (it's already hidden on mobile, but just to be safe) */
  body.menu-open .nav__cta { display: none !important; }
  .nav__menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background: var(--color-dark) !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* start vanaf boven, zoals webnexus */
    align-items: stretch !important; /* items vol breed */
    gap: 0 !important;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* Top padding = ruimte voor de sticky nav-bar zelf (waar logo + close button blijven) */
    padding: 88px 0 calc(env(safe-area-inset-bottom, 0px) + 24px) 0 !important;
    z-index: 1050 !important; /* boven nav (1000), onder toggle (1100) */
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav__menu.open { transform: translateX(0) !important; }

  /* Reset list-item styling and make each link a full-width row, like a real navigation list */
  .nav__menu li { width: 100%; }
  .nav__menu a {
    display: block !important;
    width: 100% !important;
    color: var(--color-white) !important;
    font-size: 1.5rem !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1.2 !important;
    padding: 18px 28px !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .nav__menu a:hover,
  .nav__menu a:active,
  .nav__menu a:focus {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--color-accent) !important;
  }
  .nav__menu a::after { display: none !important; }

  /* On taller phones, give items a touch more breathing room */
  @media (min-height: 800px) {
    .nav__menu a { padding: 22px 28px !important; font-size: 1.6rem !important; }
  }

  /* ===== Hamburger → X-icon transformation =====
     When .open: hide the 3 hamburger lines, show a clean cross via pseudo-elements */
  .nav__toggle {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1100;
  }
  .nav__toggle.open span {
    background: transparent !important;
  }
  .nav__toggle::before,
  .nav__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  }
  .nav__toggle.open::before {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    opacity: 1;
  }
  .nav__toggle.open::after {
    transform: translate(-50%, -50%) rotate(-45deg) scale(1);
    opacity: 1;
  }

  /* Lock scroll on body when menu is open (set via JS). Fallback CSS: */
  body.menu-open { overflow: hidden; }

  /* ---- 3. 2x2 grids on mobile ---- */
  /* How we work (was 1 column on mobile, becomes 2x2) */
  .approach__steps {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .step { padding: 18px 14px !important; }
  .step h3 { font-size: 1rem !important; }
  .step p { font-size: 0.85rem !important; line-height: 1.45 !important; }
  .step__num { font-size: 0.7rem !important; margin-bottom: 6px !important; }
  .step__icon-wrap { width: 40px !important; height: 40px !important; margin-bottom: 12px !important; }
  .step__icon-wrap svg { width: 20px !important; height: 20px !important; }

  /* What we build (Lead vs E-commerce, becomes 2x1 side by side) */
  .build__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .build__card { padding: 20px 16px !important; }
  .build__card h3 { font-size: 1.05rem !important; line-height: 1.2 !important; }
  .build__card > p { font-size: 0.85rem !important; line-height: 1.45 !important; }
  .build__features { gap: 8px !important; }
  .build__features li { font-size: 0.82rem !important; line-height: 1.35 !important; }
  .build__industries { gap: 6px !important; margin-top: 14px !important; }
  .build__industries .tag,
  .build__industries span { font-size: 0.72rem !important; padding: 4px 10px !important; }
  .build__icon { width: 44px !important; height: 44px !important; margin-bottom: 14px !important; }
  .build__icon svg { width: 22px !important; height: 22px !important; }

  /* Beyond the website (4 cards in 2x2) */
  .growth__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .growth__card { padding: 18px 14px !important; }
  .growth__card h3 { font-size: 1rem !important; }
  .growth__card p { font-size: 0.82rem !important; line-height: 1.4 !important; }
  .growth__icon { width: 40px !important; height: 40px !important; margin-bottom: 12px !important; }
  .growth__icon svg { width: 20px !important; height: 20px !important; }

  /* Cases (2 cards side-by-side instead of stacked) */
  .cases__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .case { padding: 18px 14px !important; gap: 10px !important; }
  .case__brand { font-size: 1.1rem !important; }
  .case__quote { font-size: 0.78rem !important; line-height: 1.45 !important; }
  .case__author { font-size: 0.78rem !important; }
  .case__country { font-size: 0.72rem !important; }
  .case__country .flag { width: 22px !important; height: 16px !important; }
  .case__link { font-size: 0.75rem !important; }
}

/* ---- 4. Power packs: 3 packs side-by-side on mobile ---- */
/* The packs__grid currently goes to 1 column at <900px.
   We override that for <=700px to show 3 columns side by side. */
@media (max-width: 700px) {
  .packs__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .pack {
    padding: 14px 10px !important;
  }
  .pack__head { gap: 6px !important; margin-bottom: 10px !important; }
  .pack__name { font-size: 0.95rem !important; line-height: 1.15 !important; }
  .pack__tag { font-size: 0.6rem !important; padding: 2px 7px !important; letter-spacing: 0.06em !important; }
  .pack__tag svg { width: 9px !important; height: 9px !important; }
  .pack__includes { gap: 5px !important; margin-bottom: 12px !important; }
  .pack__includes .tag,
  .pack__includes span { font-size: 0.65rem !important; padding: 3px 7px !important; }
  .pack__result { font-size: 0.72rem !important; line-height: 1.35 !important; padding: 8px 10px !important; }
  .pack__result strong { font-size: 0.72rem !important; }
}

/* On very narrow screens (<360px) packs go vertical to avoid squashing */
@media (max-width: 360px) {
  .packs__grid {
    grid-template-columns: 1fr !important;
  }
  .pack { padding: 16px 14px !important; }
}

/* ---- 5. Footer socials: extra column with Instagram link ---- */
.footer__social {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
  transition: color var(--transition);
}
.footer__social a:hover { color: var(--color-accent); }
.footer__social svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Adjust footer grid to fit the new socials column */
.footer__top {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 1000px) {
  .footer__top {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  /* Socials column moves to second row by spanning */
  .footer__social-col {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 24px;
    margin-top: 8px;
  }
}
@media (max-width: 800px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
  }
  .footer__social-col {
    grid-column: 1 / -1;
  }
}
@media (max-width: 500px) {
  .footer__top {
    grid-template-columns: 1fr;
  }
  .footer__social-col { grid-column: auto; }
}

/* ============================================================
   SERVICES HUB & INDIVIDUAL SERVICE PAGES (v4)
   ============================================================ */

/* ---- Services hub: card grid ---- */
.svc-grid-section {
  padding: 80px 0 100px;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

@media (max-width: 1000px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr; gap: 14px; }
}

.svc-card {
  display: block;
  position: relative;
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-100);
  border-radius: var(--radius-lg);
  padding: 28px 26px 30px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.svc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), #6dcaff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.svc-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(26, 43, 60, 0.10);
}

.svc-card:hover::before {
  transform: scaleX(1);
}

.svc-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: all 0.3s ease;
}
.svc-card__icon svg { width: 26px; height: 26px; }
.svc-card:hover .svc-card__icon {
  background: var(--color-accent);
  color: var(--color-white);
  transform: rotate(-4deg) scale(1.05);
}

.svc-card__category {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.svc-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--color-dark);
}

.svc-card__desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 16px;
}

.svc-card__meta {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-gray-50);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 4px;
}

.svc-card__arrow {
  position: absolute;
  top: 28px; right: 26px;
  color: var(--color-gray-400);
  transition: all 0.3s ease;
}
.svc-card:hover .svc-card__arrow {
  color: var(--color-accent);
  transform: translateX(4px);
}

/* ---- Individual service page: "What is" section ---- */
.svc-what {
  padding: 80px 0;
  background: var(--color-white);
}

.svc-what__body {
  max-width: 760px;
  margin: 0 auto;
}

.svc-what__body p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 22px;
}

.svc-what__body p:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .svc-what { padding: 60px 0; }
  .svc-what__body p { font-size: 1rem; }
}

/* ---- Service page: "What's included" ---- */
.svc-included {
  padding: 80px 0;
  background: var(--color-gray-50);
}

.svc-included__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 700px) {
  .svc-included { padding: 60px 0; }
  .svc-included__grid { grid-template-columns: 1fr; gap: 14px; }
}

.svc-included__item {
  display: flex;
  gap: 16px;
  background: var(--color-white);
  padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--color-gray-100);
  transition: all var(--transition);
}
.svc-included__item:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.svc-included__check {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.svc-included__check svg { width: 18px; height: 18px; }

.svc-included__item h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--color-dark);
}
.svc-included__item p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ---- Service page: Approach ---- */
.svc-approach {
  padding: 80px 0;
  background: var(--color-white);
}

.svc-approach__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
}

@media (max-width: 900px) { .svc-approach__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .svc-approach__grid { grid-template-columns: 1fr; } }

.svc-approach__step {
  background: var(--color-gray-50);
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  transition: all var(--transition);
}
.svc-approach__step:hover {
  background: var(--color-white);
  border-color: var(--color-accent);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}

.svc-approach__num {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: 16px;
  display: inline-block;
  background: var(--color-accent-soft);
  padding: 4px 12px;
  border-radius: 100px;
}

.svc-approach__step h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--color-dark);
}
.svc-approach__step p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ---- Service page: Why us ---- */
.svc-why {
  padding: 80px 0;
  background: var(--color-dark);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.svc-why::before {
  content: '';
  position: absolute;
  top: -50%; left: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, var(--color-accent-glow), transparent 60%);
  filter: blur(80px);
  pointer-events: none;
}

.svc-why .section__title {
  color: var(--color-white);
}

.svc-why .section__eyebrow {
  background: rgba(56, 182, 255, 0.15);
}

.svc-why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}

@media (max-width: 800px) { .svc-why__grid { grid-template-columns: 1fr; } }

.svc-why__item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  backdrop-filter: blur(8px);
}

.svc-why__item h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  color: var(--color-white);
}

.svc-why__item p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---- Service page: FAQ (reuses .faq__list / .faq__item from main styles) ---- */
.svc-faq {
  padding: 80px 0;
  background: var(--color-gray-50);
}
.svc-faq .faq__list {
  max-width: 800px;
  margin: 40px auto 0;
}

/* ---- Service page: Related services ---- */
.svc-related {
  padding: 80px 0;
  background: var(--color-white);
}

.svc-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}

@media (max-width: 900px) { .svc-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .svc-related__grid { grid-template-columns: 1fr; } }

.svc-related__card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius);
  padding: 22px 22px;
  transition: all var(--transition);
}

.svc-related__card:hover {
  background: var(--color-white);
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.svc-related__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.svc-related__icon svg { width: 20px; height: 20px; }

.svc-related__card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--color-dark);
}

.svc-related__card p {
  color: var(--color-text-muted);
  font-size: 0.86rem;
  line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.svc-related__more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
}

.svc-related__back {
  text-align: center;
  margin-top: 40px;
}

/* ---- CTA banner (used at bottom of services hub + service pages) ---- */
.cta-banner {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--color-dark) 0%, #243648 100%);
  color: var(--color-white);
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  background: radial-gradient(circle at top right, var(--color-accent-glow), transparent 60%);
  pointer-events: none;
}

.cta-banner__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cta-banner__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  color: var(--color-white);
}

.cta-banner__text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 32px;
}

.cta-banner__text strong { color: var(--color-accent); }

.cta-banner__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .cta-banner { padding: 60px 0; }
  .cta-banner__actions { flex-direction: column; align-items: stretch; }
  .cta-banner__actions .btn { width: 100%; }
}

/* ============================================================
   ROUND 4 OVERRIDES (rectangular logo, mobile grid fixes,
   svc-grid 2x2 on mobile, build__grid stacked on mobile)
   These come last and override earlier rules.
   ============================================================ */

/* ---- 1. Logo: rectangular, dual-img with smooth fade ---- */
.nav__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.nav__logo-img {
  height: 44px;
  width: auto;
  border-radius: 0; /* override the old 8px - rectangular logo doesn't need it */
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform var(--transition);
  display: block;
}

/* Stack the two images on top of each other so they can crossfade */
.nav__logo-img--dark {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}

/* Default state (nav transparent, on dark hero): show WHITE logo */
.nav__logo-img--white { opacity: 1; }
.nav__logo-img--dark { opacity: 0; }

/* Scrolled OR --solid (white nav background): show DARK logo */
.nav.scrolled .nav__logo-img--white,
.nav--solid .nav__logo-img--white { opacity: 0; }
.nav.scrolled .nav__logo-img--dark,
.nav--solid .nav__logo-img--dark { opacity: 1; }

.nav__logo:hover .nav__logo-img { transform: scale(1.04); }
.nav__logo:hover .nav__logo-img--dark { transform: translateY(-50%) scale(1.04); }

/* ---- Footer logo: also rectangular, no radius ---- */
.footer__logo {
  height: 56px !important;
  width: auto !important;
  border-radius: 0 !important;
  max-width: 280px;
}

/* ---- 2. Mobile-specific overrides ---- */
@media (max-width: 700px) {
  .nav__logo-img { height: 38px; }
  .nav.scrolled .nav__logo-img,
  .nav--solid .nav__logo-img { height: 34px; }
  
  /* IMPORTANT: kill the old translateX-to-center animation that was made for a
     small square icon. A rectangular logo should just shrink, not move to center. */
  .nav.scrolled .nav__logo {
    transform: none !important;
  }
  
  /* In mobile menu open state, force the WHITE logo to show (menu has dark bg).
     This overrides the scrolled state which would otherwise show the dark logo. */
  body.menu-open .nav__logo-img--white { opacity: 1 !important; }
  body.menu-open .nav__logo-img--dark { opacity: 0 !important; }
  
  /* Footer logo a bit smaller on mobile */
  .footer__logo { height: 48px !important; }
}

/* ---- 3. Services hub: 2x2 grid on mobile (was 1 column) ---- */
@media (max-width: 600px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .svc-card {
    padding: 18px 14px 20px !important;
  }
  .svc-card__icon {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 12px !important;
  }
  .svc-card__icon svg { width: 20px !important; height: 20px !important; }
  .svc-card__category {
    font-size: 0.62rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 6px !important;
  }
  .svc-card__title {
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
  }
  .svc-card__desc {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .svc-card__meta {
    font-size: 0.66rem !important;
    padding: 4px 9px !important;
  }
  .svc-card__arrow {
    top: 16px !important;
    right: 14px !important;
  }
  .svc-card__arrow svg { width: 16px; height: 16px; }
}

/* ---- 4. "What we build" homepage: STACKED on mobile (was 2x2) ---- */
/* Overrides the earlier round-3 rule that put them side-by-side. */
@media (max-width: 700px) {
  .build__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .build__card { padding: 28px 24px !important; }
  .build__card h3 { font-size: 1.4rem !important; line-height: 1.15 !important; }
  .build__card > p { font-size: 0.95rem !important; line-height: 1.55 !important; }
  .build__features { gap: 12px !important; }
  .build__features li { font-size: 0.95rem !important; line-height: 1.45 !important; }
  .build__industries { gap: 8px !important; margin-top: 18px !important; }
  .build__industries .tag,
  .build__industries span { font-size: 0.8rem !important; padding: 6px 14px !important; }
  .build__icon { width: 52px !important; height: 52px !important; margin-bottom: 18px !important; }
  .build__icon svg { width: 26px !important; height: 26px !important; }
}

/* ---- 5. Power Packs: keep 3 side-by-side on mobile (was already set in round 3) ---- */
/* Already correct from round 3, just confirming no regression here. */


/* ============================================================
   HERO SLIDER (homepage only)
   Cross-fades between hero images behind the existing dark overlay
   ============================================================ */

.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--color-dark); /* fallback if images fail */
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.hero-slide.is-active { opacity: 1; }

.hero-slide picture,
.hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Dark overlay so the white hero text stays readable over any image.
   Stronger on the bottom-left where the H1 sits. */
.hero-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(15, 25, 38, 0.78) 0%, rgba(15, 25, 38, 0.55) 50%, rgba(15, 25, 38, 0.65) 100%);
  pointer-events: none;
  z-index: 1;
}

/* The existing .hero__bg (radial glow + grid) now sits OVER the slider,
   adding the brand glow and grid pattern as a subtle layer. */
.hero .hero__bg {
  z-index: 1;
  /* Soften the original solid dark fallback so the slider shines through */
  background:
    radial-gradient(ellipse at top right, var(--color-accent-glow), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(56, 182, 255, 0.18), transparent 60%);
  pointer-events: none;
}

/* Keep the floating glow + grid pattern but make them subtler so the
   underlying photo can breathe */
.hero .hero__bg::before {
  opacity: 0.55;
}

.hero .hero__bg::after {
  opacity: 0.7;
}

/* Make sure hero__inner sits above all backgrounds */
.hero .hero__inner {
  position: relative;
  z-index: 2;
}

/* Reduced-motion users: no crossfade animation, just first slide */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ============================================================
   V9 — MOOVE-STYLE HEADER + CENTERED HERO
   Overrides earlier styles where conflicts arise.
   ============================================================ */

/* ---- Announcement bar (top strip in PMA blue) ---- */
.announcement-bar {
  background: var(--color-accent);
  color: var(--color-dark);
  padding: 11px 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1001;
}
.announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.announcement-bar__text {
  color: var(--color-dark);
}
.announcement-bar__link {
  color: var(--color-dark);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--transition);
}
.announcement-bar__link:hover {
  color: var(--color-white);
}

/* ---- New nav (Moove pill-style) ----
   We override the existing .nav: not fixed/absolute anymore, lives below the
   announcement bar in normal document flow. Light pill that floats. */
body { padding-top: 0; } /* reset any padding from older nav */

.nav {
  position: sticky;
  top: 12px;
  left: 0; right: 0;
  z-index: 1000;
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 12px auto 0;
}
.nav.scrolled,
.nav--solid {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  padding: 0 !important;
}
.nav__inner {
  background: var(--color-white);
  border-radius: 100px;
  padding: 10px 12px 10px 24px;
  box-shadow: 0 4px 24px rgba(26, 43, 60, 0.06), 0 1px 3px rgba(26, 43, 60, 0.04);
  border: 1px solid var(--color-gray-100);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo: always dark variant now (white was for dark hero, no longer needed) */
.nav__logo-img {
  height: 32px;
  width: auto;
  display: block;
  opacity: 1 !important; /* override the old dual-logo opacity logic */
}
.nav__logo-img--white { display: none !important; }

/* Menu - inline next to logo */
.nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nav__menu li {
  position: relative;
}
.nav__menu a,
.nav__menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-dark);
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  letter-spacing: -0.01em;
  font-family: inherit;
}
.nav__menu a:hover,
.nav__menu-trigger:hover,
.nav__menu a.is-active,
.nav__menu-trigger.is-active {
  background: var(--color-gray-50);
  color: var(--color-dark);
}
.nav__menu a::after { display: none !important; } /* kill old underline */

.nav__caret {
  width: 13px;
  height: 13px;
  transition: transform 0.25s ease;
  margin-left: 2px;
}
.nav__item--has-dd.is-open .nav__caret {
  transform: rotate(180deg);
}

/* Nav CTA (audit button) */
.btn--audit {
  background: var(--color-accent);
  color: var(--color-dark);
  border: 1.5px solid var(--color-accent);
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all var(--transition);
}
.btn--audit:hover {
  background: #6ec9ff;
  border-color: #6ec9ff;
  color: var(--color-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(56, 182, 255, 0.35);
}

.nav__cta.btn--audit {
  padding: 10px 20px;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ---- Services dropdown panel ---- */
.nav-dd {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(960px, calc(100vw - 32px));
  background: var(--color-white);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(26, 43, 60, 0.18), 0 8px 20px rgba(26, 43, 60, 0.06);
  border: 1px solid var(--color-gray-100);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.22s;
  z-index: 1100;
  overflow: hidden;
}
.nav__item--has-dd.is-open .nav-dd {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Hover bridge: invisible bridge above dropdown so cursor can travel from trigger to dropdown without closing */
.nav-dd::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0; right: 0;
  height: 12px;
}

.nav-dd__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 28px;
}
.nav-dd__col {
  padding: 0 16px;
  border-right: 1px solid var(--color-gray-100);
}
.nav-dd__col:first-child { padding-left: 0; }
.nav-dd__col:last-child { padding-right: 0; border-right: none; }

.nav-dd__col-head {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-gray-100);
}
.nav-dd__col-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.nav-dd__col-head h4 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  margin-bottom: 4px;
}
.nav-dd__col-head p {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.nav-dd__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-dd__item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transition: background var(--transition);
}
.nav-dd__item:hover {
  background: var(--color-gray-50);
}
.nav-dd__item-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-dark);
  margin-bottom: 2px;
}
.nav-dd__item-blurb {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.nav-dd__footer {
  background: var(--color-gray-50);
  padding: 14px 28px;
  border-top: 1px solid var(--color-gray-100);
}
.nav-dd__view-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: gap var(--transition);
}
.nav-dd__view-all:hover {
  gap: 10px;
}

/* ---- Hero: centered, light theme, no slider ---- */
.hero {
  background: var(--color-gray-50) !important;
}
.hero--centered {
  min-height: auto;
  padding: 80px 0 100px;
  display: block;
  position: relative;
  color: var(--color-dark);
  overflow: hidden;
}
.hero--centered .hero__inner {
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hero--centered .hero__content {
  max-width: 880px;
  margin: 0 auto;
}

.hero--centered .hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--color-dark);
  margin-bottom: 28px;
}
.hero--centered .hero__title-accent {
  color: var(--color-accent);
  font-style: normal;
}

.hero--centered .hero__subtitle {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 680px;
  margin: 0 auto 40px;
}

.hero--centered .hero__cta {
  display: flex;
  justify-content: center;
}
.hero--centered .hero__cta .btn--audit.btn--large {
  font-size: 1.05rem;
  padding: 16px 32px;
  font-weight: 700;
}

/* Decorative subtle background */
.hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__decor-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 700px;
  background: radial-gradient(circle, rgba(56, 182, 255, 0.18), transparent 60%);
  filter: blur(60px);
}
.hero__decor-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(26, 43, 60, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 43, 60, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

/* ============================================================
   MOBILE NAV (overrides for new pill nav)
   ============================================================ */

@media (max-width: 1100px) {
  /* Hide nav menu on tablet/mobile, show hamburger */
  .nav__menu {
    /* will be moved to mobile drawer via fixed positioning below */
  }
}

@media (max-width: 900px) {
  .nav__inner {
    padding: 8px 10px 8px 18px;
  }
  .nav__logo-img { height: 28px; }
  
  /* Hide CTA + menu on mobile, show hamburger */
  .nav__menu { display: none !important; }
  .nav__cta { display: none !important; }
  .nav__toggle { display: flex !important; }
  
  /* Mobile menu: full-screen overlay (existing rules in styles file already handle this,
     but with our new pill nav layout we need a few tweaks) */
  .nav__menu.open {
    display: flex !important;
  }
}

/* Tablet to small desktop: show hamburger instead of full menu */
@media (max-width: 1100px) and (min-width: 901px) {
  .nav__menu { display: none !important; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: flex !important; }
}

/* Desktop: hide hamburger */
@media (min-width: 1101px) {
  .nav__toggle { display: none !important; }
  .nav__menu { display: flex !important; }
}

/* Mobile menu drawer styling for new nav — keep dark overlay style */
@media (max-width: 1100px) {
  .nav__menu.open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--color-dark) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    padding: 88px 0 32px !important;
    z-index: 1200 !important;
    overflow-y: auto !important;
    gap: 0 !important;
  }
  .nav__menu.open li {
    width: 100%;
  }
  .nav__menu.open a,
  .nav__menu.open .nav__menu-trigger {
    color: var(--color-white) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    width: 100%;
    text-align: left !important;
    padding: 18px 32px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    justify-content: space-between !important;
  }
  .nav__menu.open a:hover,
  .nav__menu.open .nav__menu-trigger:hover {
    background: rgba(255,255,255,0.04) !important;
  }
  
  /* Dropdown on mobile: inline accordion under trigger, full width */
  .nav__menu.open .nav-dd {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: none;
    border: none;
    border-radius: 0;
    display: none;
  }
  .nav__menu.open .nav__item--has-dd.is-open .nav-dd {
    display: block;
  }
  .nav__menu.open .nav-dd__inner {
    grid-template-columns: 1fr;
    padding: 16px 24px;
    gap: 24px;
  }
  .nav__menu.open .nav-dd__col {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 0 0 18px 0;
  }
  .nav__menu.open .nav-dd__col:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .nav__menu.open .nav-dd__col-eyebrow { color: var(--color-accent); }
  .nav__menu.open .nav-dd__col-head h4 { color: var(--color-white); }
  .nav__menu.open .nav-dd__col-head p { color: rgba(255,255,255,0.6); }
  .nav__menu.open .nav-dd__item:hover { background: rgba(255,255,255,0.04); }
  .nav__menu.open .nav-dd__item-title { color: var(--color-white); }
  .nav__menu.open .nav-dd__item-blurb { color: rgba(255,255,255,0.6); }
  .nav__menu.open .nav-dd__footer { background: rgba(255,255,255,0.03); border-top-color: rgba(255,255,255,0.08); }
  
  /* Force visibility of all menu items when open */
  .nav__menu.open .nav__menu-trigger {
    cursor: pointer;
  }
}

/* Hero mobile tightening */
@media (max-width: 700px) {
  .hero--centered {
    padding: 56px 0 72px;
  }
  .hero--centered .hero__title {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }
  .hero--centered .hero__subtitle {
    font-size: 1rem;
    margin-bottom: 32px;
  }
  .hero--centered .hero__cta .btn--audit.btn--large {
    font-size: 0.95rem;
    padding: 14px 24px;
    width: 100%;
    max-width: 360px;
  }
  
  /* Announcement bar mobile - stack tighter */
  .announcement-bar {
    font-size: 0.78rem;
    padding: 9px 0;
  }
  .announcement-bar__inner {
    gap: 8px;
    padding: 0 16px;
  }
}


/* ============================================================
   V10 — HERO BACK TO DARK WITH SLIDER + MOOVE-STYLE MOBILE MENU
   Overrides V9 light hero and dark mobile menu.
   ============================================================ */

/* ---- Hero: dark theme with image slider ---- */
.hero--with-slider {
  background: var(--color-dark) !important;
  color: var(--color-white);
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  padding: 100px 0 120px;
}

.hero--with-slider .hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* MERCURY FEATHERED BACKGROUND — the exact technique from mercury.com's
     hero: two linear-gradient masks (vertical + horizontal) combined with
     mask-composite:intersect, so the moving background fades softly on all
     four edges and melts into the dark page instead of ending on a hard line.
     Kept subtle (6% top / 12% bottom / 4% sides) so the background stays
     essentially full-bleed like Mercury, just softly melding into the page. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 88%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 88%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.hero--with-slider .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.hero--with-slider .hero-slide.is-active { opacity: 1; }

.hero--with-slider .hero-slide picture,
.hero--with-slider .hero-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Legibility overlay — Mercury keeps the cinematic background bright and only
   darkens/softens behind the centred text. Center-weighted so the photo shows
   through toward the edges (where the feather already melts into the page),
   while the headline + CTA stay readable. */
.hero--with-slider .hero-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 62% at 50% 52%,
      rgba(15, 25, 38, 0.74) 0%,
      rgba(15, 25, 38, 0.42) 55%,
      rgba(15, 25, 38, 0.12) 100%),
    linear-gradient(to bottom,
      rgba(15, 25, 38, 0.30) 0%,
      rgba(15, 25, 38, 0.30) 100%);
  z-index: 1;
}

/* Decor (glow + grid) on top of slider, subtle */
.hero--with-slider .hero__decor {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.hero--with-slider .hero__decor-grid {
  opacity: 0.35;
}
.hero--with-slider .hero__decor-glow {
  opacity: 0.6;
}

.hero--with-slider .hero__inner {
  position: relative;
  z-index: 3;
}

/* White text on dark hero */
.hero--with-slider .hero__title {
  color: var(--color-white);
}
.hero--with-slider .hero__title-accent {
  color: var(--color-accent);
}
.hero--with-slider .hero__subtitle {
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   MERCURY-STYLE HERO ANIMATION
   Two signature motions from the Mercury homepage hero:
   1. A slow "Ken Burns" zoom that gives the atmospheric photo life.
   2. A staggered fade-up reveal of headline -> subtitle -> CTA on load.
   Pure additive layer — no content, colour or layout changes.
   ============================================================ */

/* 1. Slow cinematic drift on whichever slide is active — stands in for
   Mercury's slowly-moving hero video. A gentle pan + zoom keeps the
   feathered background alive. Restarts each time a slide crossfades in. */
.hero--with-slider .hero-slide.is-active img {
  animation: heroKenBurns 16s ease-out forwards;
}

@keyframes heroKenBurns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.6%, -1.1%, 0); }
}

/* 2. Staggered entrance reveal — Mercury's calm, restrained content rise. */
.hero--with-slider .hero__title {
  animation: heroReveal 1s 0.15s both cubic-bezier(0.16, 1, 0.3, 1);
}
.hero--with-slider .hero__subtitle {
  animation: heroReveal 1s 0.35s both cubic-bezier(0.16, 1, 0.3, 1);
}
.hero--with-slider .hero__cta {
  animation: heroReveal 1s 0.55s both cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Reduced-motion: no slide animation, no Ken Burns, no entrance reveal */
@media (prefers-reduced-motion: reduce) {
  .hero--with-slider .hero-slide { transition: none; }
  .hero--with-slider .hero-slide.is-active img,
  .hero--with-slider .hero__title,
  .hero--with-slider .hero__subtitle,
  .hero--with-slider .hero__cta {
    animation: none;
  }
}

/* ============================================================
   MOBILE MENU — MOOVE-STYLE (white bg, blue pill buttons)
   Replaces the dark overlay from V9.
   ============================================================ */

@media (max-width: 1100px) {
  /* Open state */
  .nav__menu.open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--color-white) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 96px 20px 24px !important;
    z-index: 1200 !important;
    overflow-y: auto !important;
    gap: 12px !important;
  }
  
  .nav__menu.open li {
    width: 100%;
    list-style: none;
  }
  
  /* Each top-level menu item becomes a blue pill button */
  .nav__menu.open a,
  .nav__menu.open .nav__menu-trigger {
    color: var(--color-dark) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    width: 100% !important;
    text-align: left !important;
    padding: 18px 24px !important;
    border: none !important;
    border-radius: 16px !important;
    background: var(--color-accent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    transition: background var(--transition);
  }
  .nav__menu.open a:hover,
  .nav__menu.open .nav__menu-trigger:hover {
    background: #6ec9ff !important;
  }
  
  /* Caret in Services trigger */
  .nav__menu.open .nav__caret {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
  }
  .nav__menu.open .nav__item--has-dd.is-open .nav__caret {
    transform: rotate(180deg);
  }
  
  /* Hide the desktop dropdown panel on mobile */
  .nav__menu.open .nav-dd {
    display: none !important;
  }
  
  /* Mobile sub-menu (flat services list) - hidden by default, shown when Services is open */
  .nav__mobile-sub {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 8px 0;
    margin-top: 8px;
  }
  .nav__item--has-dd.is-open .nav__mobile-sub {
    display: flex;
  }
  
  /* Each service link: lighter pill (with reduced opacity blue) inside the accordion */
  .nav__mobile-sub-link {
    display: block !important;
    padding: 14px 24px !important;
    background: rgba(56, 182, 255, 0.12) !important;
    color: var(--color-dark) !important;
    text-decoration: none !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    text-align: left !important;
    transition: background var(--transition);
  }
  .nav__mobile-sub-link:hover {
    background: rgba(56, 182, 255, 0.22) !important;
  }
  .nav__mobile-sub-link--all {
    background: transparent !important;
    color: var(--color-accent) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    padding: 12px 24px !important;
    margin-top: 4px;
  }
  
  /* Mobile CTA at bottom of menu - sticky look */
  .nav__mobile-cta-wrap {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--color-gray-100);
  }
  .nav__mobile-cta {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 18px 24px !important;
    font-size: 1.05rem !important;
    border-radius: 100px !important;
    background: var(--color-dark) !important;
    color: var(--color-white) !important;
    border-color: var(--color-dark) !important;
  }
  .nav__mobile-cta:hover {
    background: var(--color-accent) !important;
    color: var(--color-dark) !important;
    border-color: var(--color-accent) !important;
  }
}

/* Desktop: hide all mobile-only elements */
@media (min-width: 1101px) {
  .nav__mobile-sub { display: none !important; }
  .nav__mobile-cta-wrap { display: none !important; }
}

/* Make sure the hamburger X is dark (visible on white bg) when menu open */
@media (max-width: 1100px) {
  body.menu-open .nav__toggle span,
  body.menu-open .nav__toggle::before,
  body.menu-open .nav__toggle::after {
    background-color: var(--color-dark) !important;
  }
  /* Make sure nav is above the open menu so toggle button stays clickable */
  body.menu-open .nav {
    z-index: 1300 !important;
  }
  body.menu-open .announcement-bar {
    z-index: 1199 !important; /* below open menu */
  }
}


/* ============================================================
   V10b — VERTICAL CENTERING OF HERO CONTENT ON MOBILE
   Make hero a flex column that centers its content over the
   full available viewport height on mobile.
   ============================================================ */

@media (max-width: 700px) {
  /* Hero becomes a flex column; content vertically centered */
  .hero--centered.hero--with-slider {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    /* Fill the visible viewport area minus announcement bar (~36px) and nav row (~64px).
       Using min-height (not height) so very long content can still grow. */
    min-height: calc(100vh - 100px);
    /* Use small-vh (svh) when supported for a more accurate mobile height
       that respects browser UI chrome (e.g. Safari address bar). */
    min-height: calc(100svh - 100px);
    padding: 40px 0 40px;
  }

  .hero--centered.hero--with-slider .hero__inner {
    width: 100%;
  }

  .hero--centered.hero--with-slider .hero__content {
    padding: 0 4px;
  }

  /* Subtitle a touch tighter on mobile for visual balance */
  .hero--centered.hero--with-slider .hero__subtitle {
    margin-bottom: 28px;
  }
}

/* Tablet: also centered nicely but doesn't fill full viewport */
@media (min-width: 701px) and (max-width: 1100px) {
  .hero--centered.hero--with-slider {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 75vh;
  }
}


/* ============================================================
   V11 — HEADER ABSOLUTE OVER HERO + MOBILE FULLSCREEN FIX + CLICKABLE COL HEADS
   ============================================================ */

/* ---- Homepage only: make announcement bar + nav absolute over hero slider ---- */
.has-hero-slider .announcement-bar {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

.has-hero-slider .nav {
  position: absolute !important;
  top: 56px; /* below announcement bar height */
  left: 0;
  right: 0;
  margin: 0 auto !important;
  z-index: 1000;
  background: transparent !important;
}

/* On scroll: stick the nav to top with the announcement bar above it
   (handled via JS scrolled body class) */
.has-hero-slider.scrolled .announcement-bar {
  position: fixed !important;
}
.has-hero-slider.scrolled .nav {
  position: fixed !important;
}

/* Hero needs extra top padding since header now sits absolute over it */
.hero--with-slider {
  padding-top: 140px !important;
}

@media (max-width: 700px) {
  .hero--with-slider {
    padding-top: 110px !important;
  }
  .has-hero-slider .nav { top: 40px; }
}

@media (max-width: 480px) {
  .announcement-bar {
    padding: 8px 0;
  }
}

/* ---- Mobile menu: fullscreen white (override V10 padding) ---- */
@media (max-width: 1100px) {
  .nav__menu.open {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100svh !important;
    background: var(--color-white) !important;
    padding: 88px 20px 32px !important;
    z-index: 1200 !important;
    overflow-y: auto !important;
  }
  
  /* CTA wrap inside menu — HIDDEN per request */
  .nav__mobile-cta-wrap { display: none !important; }
}

/* Desktop also hide CTA wrap (we already had this rule but make sure) */
@media (min-width: 1101px) {
  .nav__mobile-cta-wrap { display: none !important; }
}

/* ---- Clickable category headers in desktop dropdown ---- */
.nav-dd__col-head--link {
  display: block;
  text-decoration: none;
  transition: background var(--transition);
  border-radius: 10px;
  padding: 8px 8px 16px 8px;
  margin: -8px -8px 8px -8px;
  cursor: pointer;
}
.nav-dd__col-head--link:hover {
  background: rgba(56, 182, 255, 0.06);
}
.nav-dd__col-head--link h4 {
  color: var(--color-dark);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition);
}
.nav-dd__col-head--link:hover h4 {
  gap: 10px;
}
.nav-dd__col-arrow {
  display: inline-block;
  color: var(--color-accent);
  font-size: 1rem;
  font-weight: 700;
  transition: transform var(--transition);
}
.nav-dd__col-head--link:hover .nav-dd__col-arrow {
  transform: translateX(2px);
}


/* ============================================================
   V12 — FINAL OVERRIDES
   Header always fixed at top (sticky on scroll).
   Mobile menu truly fullscreen.
   Simpler dropdown.
   Mobile services nested accordion.
   ============================================================ */

/* ---- Header: ALWAYS fixed at top (homepage + all other pages) ---- */
.announcement-bar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: var(--color-accent);
  /* The transition for height/padding when scrolled */
  transition: padding 0.25s ease;
}

.nav {
  position: fixed !important;
  top: 56px; /* below announcement bar */
  left: 0;
  right: 0;
  margin: 0 auto !important;
  padding: 0 !important;
  z-index: 1000;
  background: transparent !important;
  border: none !important;
  transition: top 0.25s ease;
}

/* On scroll: announcement bar tucks away, nav slides up to top */
body.scrolled .announcement-bar {
  transform: translateY(-100%);
  pointer-events: none;
}
body.scrolled .nav {
  top: 12px;
}

/* When announcement bar is visible (not scrolled), nav appears against the bar */
@media (max-width: 700px) {
  .nav { top: 44px; }
  body.scrolled .nav { top: 8px; }
}

/* The pill itself (nav__inner) stays styled white */
.nav__inner {
  background: var(--color-white) !important;
  border-radius: 100px !important;
  padding: 10px 12px 10px 24px !important;
  box-shadow: 0 4px 24px rgba(26, 43, 60, 0.06), 0 1px 3px rgba(26, 43, 60, 0.04) !important;
  border: 1px solid var(--color-gray-100) !important;
}

/* Hero — make extra padding so content doesn't sit under fixed header */
.hero--with-slider {
  padding-top: 160px !important;
  padding-bottom: 100px !important;
}

/* Desktop only: shift hero content down a bit so visually centered with breathing room */
@media (min-width: 1101px) {
  .hero--centered.hero--with-slider {
    padding-top: 220px !important;
    padding-bottom: 140px !important;
  }
}

/* Non-homepage pages need top padding so .page-header doesn't sit under fixed header */
body:not(.has-hero-slider) {
  padding-top: 124px;
}
body:not(.has-hero-slider).scrolled {
  padding-top: 76px;
}
@media (max-width: 700px) {
  body:not(.has-hero-slider) {
    padding-top: 100px;
  }
  body:not(.has-hero-slider).scrolled {
    padding-top: 68px;
  }
}

/* page-header was already 150px top padding — reset for fixed-nav layout */
body:not(.has-hero-slider) .page-header {
  padding-top: 40px !important;
}

/* ---- Hamburger lines: white when over hero, dark otherwise ---- */
.has-hero-slider .nav__toggle span,
.has-hero-slider .nav__toggle::before,
.has-hero-slider .nav__toggle::after {
  background-color: var(--color-white) !important;
}
.has-hero-slider.scrolled .nav__toggle span,
.has-hero-slider.scrolled .nav__toggle::before,
.has-hero-slider.scrolled .nav__toggle::after {
  background-color: var(--color-dark) !important;
}
/* When menu is open, even on homepage we want dark X (visible on white bg) */
.has-hero-slider body.menu-open .nav__toggle span,
.has-hero-slider body.menu-open .nav__toggle::before,
.has-hero-slider body.menu-open .nav__toggle::after,
body.menu-open .nav__toggle span,
body.menu-open .nav__toggle::before,
body.menu-open .nav__toggle::after {
  background-color: var(--color-dark) !important;
}

/* Hamburger button itself: make sure it sits on top of pill */
.nav__toggle {
  position: relative;
  z-index: 2;
}

/* ---- Desktop dropdown: simpler styling ---- */
.nav-dd__col-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-dark);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-gray-100);
}

/* Hide old eyebrow/blurb/arrow styles if any references remain */
.nav-dd__col-eyebrow,
.nav-dd__col-arrow { display: none !important; }

/* ============================================================
   MOBILE MENU — TRULY FULLSCREEN + NESTED ACCORDIONS
   ============================================================ */

@media (max-width: 1100px) {
  /* Full viewport white menu */
  .nav__menu.open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* dynamic viewport for mobile browser chrome */
    background: var(--color-white) !important;
    padding: 88px 20px 32px !important;
    margin: 0 !important;
    z-index: 1199 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* All top-level menu items as blue pills */
  .nav__menu.open li {
    width: 100% !important;
    list-style: none;
  }
  
  .nav__menu.open a,
  .nav__menu.open .nav__menu-trigger {
    color: var(--color-dark) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    width: 100% !important;
    padding: 18px 24px !important;
    border: none !important;
    border-radius: 16px !important;
    background: var(--color-accent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    cursor: pointer !important;
  }
  
  .nav__menu.open .nav__caret {
    width: 16px;
    height: 16px;
    transition: transform 0.25s ease;
  }
  .nav__item--has-dd.is-open > .nav__menu-trigger .nav__caret {
    transform: rotate(180deg);
  }
  
  /* Desktop dropdown hidden in mobile */
  .nav__menu.open .nav-dd { display: none !important; }
  
  /* Mobile services accordion (3 categories) */
  .nav__mobile-sub {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 0 0;
    margin-top: 6px;
  }
  .nav__item--has-dd.is-open .nav__mobile-sub {
    display: flex;
  }
  
  /* Category pill (3 of them: Paid, Organic, Conversion) — lighter blue */
  .nav__mobile-cat {
    width: 100%;
  }
  .nav__mobile-cat-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 14px 24px !important;
    background: rgba(56, 182, 255, 0.14) !important;
    color: var(--color-dark) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border: none !important;
    border-radius: 12px !important;
    text-align: left !important;
    cursor: pointer !important;
    font-family: inherit;
  }
  .nav__mobile-cat-trigger:hover {
    background: rgba(56, 182, 255, 0.24) !important;
  }
  .nav__mobile-cat-caret {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
  }
  .nav__mobile-cat.is-open .nav__mobile-cat-caret {
    transform: rotate(180deg);
  }
  
  /* Service leaves (inside category) — even lighter */
  .nav__mobile-leaves {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0 8px 16px;
  }
  .nav__mobile-cat.is-open .nav__mobile-leaves {
    display: flex;
  }
  .nav__mobile-leaf {
    display: block !important;
    padding: 12px 18px !important;
    background: rgba(56, 182, 255, 0.06) !important;
    color: var(--color-dark) !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    /* Override the generic .open a pill rule */
    width: 100% !important;
    border: none !important;
    justify-content: flex-start !important;
  }
  .nav__mobile-leaf:hover {
    background: rgba(56, 182, 255, 0.14) !important;
  }
  
  .nav__mobile-sub-link--all {
    background: transparent !important;
    color: var(--color-accent) !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    padding: 14px 24px !important;
    margin-top: 4px;
    width: 100% !important;
    text-align: left !important;
    display: block !important;
    border: none !important;
  }
}

/* Desktop: hide all mobile-specific elements */
@media (min-width: 1101px) {
  .nav__mobile-sub,
  .nav__mobile-cat,
  .nav__mobile-leaves,
  .nav__mobile-leaf,
  .nav__mobile-cta-wrap { display: none !important; }
}


/* ============================================================
   V13 — HAMBURGER COLOR FIX + DROPDOWN POLISH
   ============================================================ */

/* ---- Hamburger lines: always DARK because they sit on the white pill ---- */
.nav__toggle span,
.nav__toggle::before,
.nav__toggle::after {
  background-color: var(--color-dark) !important;
}

/* Keep dark on all states including homepage hero, scrolled, menu open */
.has-hero-slider .nav__toggle span,
.has-hero-slider .nav__toggle::before,
.has-hero-slider .nav__toggle::after,
.has-hero-slider.scrolled .nav__toggle span,
.has-hero-slider.scrolled .nav__toggle::before,
.has-hero-slider.scrolled .nav__toggle::after,
body.menu-open .nav__toggle span,
body.menu-open .nav__toggle::before,
body.menu-open .nav__toggle::after {
  background-color: var(--color-dark) !important;
}

/* ============================================================
   DESKTOP DROPDOWN POLISH
   - Wider panel, tighter spacing, no awkward line breaks on titles
   - Subtle hover effect, cleaner divider
   ============================================================ */

.nav-dd {
  width: min(1080px, calc(100vw - 32px)) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(26, 43, 60, 0.16), 0 8px 24px rgba(26, 43, 60, 0.06) !important;
  overflow: hidden;
}

.nav-dd__inner {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 !important;
  padding: 32px 8px !important;
}

.nav-dd__col {
  padding: 0 24px !important;
  border-right: 1px solid var(--color-gray-100) !important;
}
.nav-dd__col:first-child { padding-left: 24px !important; }
.nav-dd__col:last-child {
  padding-right: 24px !important;
  border-right: none !important;
}

/* Category title: bigger, cleaner, with accent color */
.nav-dd__col-title {
  font-family: var(--font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--color-accent) !important;
  margin: 0 0 18px 0 !important;
  padding: 0 0 16px 0 !important;
  border-bottom: 1px solid var(--color-gray-100) !important;
}

/* Items list: tighter and cleaner */
.nav-dd__items {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.nav-dd__item {
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
  position: relative;
}
.nav-dd__item:hover {
  background: rgba(56, 182, 255, 0.08) !important;
}

/* Service title: stronger, no line break for normal names */
.nav-dd__item-title {
  font-family: var(--font-display) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--color-dark) !important;
  margin-bottom: 3px !important;
  white-space: nowrap !important; /* keeps "TikTok Marketing" on one line */
  transition: color 0.2s ease;
}
.nav-dd__item:hover .nav-dd__item-title {
  color: var(--color-accent) !important;
}

/* Service blurb: smaller, softer */
.nav-dd__item-blurb {
  font-size: 0.8rem !important;
  line-height: 1.4 !important;
  color: var(--color-text-muted) !important;
  font-weight: 500 !important;
}

/* Footer with "View all services" — better contrast */
.nav-dd__footer {
  background: var(--color-gray-50) !important;
  padding: 16px 32px !important;
  border-top: 1px solid var(--color-gray-100) !important;
}
.nav-dd__view-all {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: gap 0.2s ease;
}
.nav-dd__view-all:hover { gap: 12px !important; }

/* Make sure dropdown sits flush below the trigger pill */
.nav-dd {
  top: calc(100% + 14px) !important;
}

/* Mobile: revert to single column with appropriate padding (no horizontal lines from desktop) */
@media (max-width: 1100px) {
  .nav-dd__col {
    border-right: none !important;
    padding: 0 !important;
  }
}


/* ============================================================
   V14 — MOBILE RESPONSIVENESS & "FEEL" POLISH
   Touch optimisations, active states, smoother transitions.
   ============================================================ */

/* ---- Global touch optimizations ---- */
* {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
.btn,
.nav__menu-trigger,
.nav__mobile-cat-trigger,
.nav__mobile-leaf,
.nav__mobile-sub-link,
.nav__toggle {
  touch-action: manipulation; /* removes iOS 300ms double-tap delay */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Re-enable text selection inside paragraphs and headings */
p, h1, h2, h3, h4, h5, h6, span, li {
  -webkit-user-select: text;
  user-select: text;
}

/* ---- Disable hover effects on touch devices (no more "stuck" hover states) ---- */
@media (hover: none) {
  /* Remove all background/transform changes from :hover on touch */
  .nav__mobile-cat-trigger:hover,
  .nav__mobile-leaf:hover,
  .nav__mobile-sub-link:hover,
  .nav__menu.open a:hover,
  .nav__menu.open .nav__menu-trigger:hover,
  .btn:hover,
  .btn--audit:hover,
  .nav-dd__item:hover,
  .announcement-bar__link:hover {
    /* keep base state — let :active handle the visual */
    background-color: inherit;
    transform: none;
    box-shadow: none;
    color: inherit;
    gap: inherit;
  }
  /* Specific re-statements for base colors that should NOT inherit (since inherit gives weird results) */
  .nav__mobile-cat-trigger:hover { background: rgba(56, 182, 255, 0.14) !important; }
  .nav__mobile-leaf:hover { background: rgba(56, 182, 255, 0.06) !important; }
  .nav__menu.open a:hover,
  .nav__menu.open .nav__menu-trigger:hover { background: var(--color-accent) !important; }
}

/* ---- Active (pressed) state feedback on mobile pills ---- */
@media (max-width: 1100px) {
  /* Primary pills — subtle press feedback */
  .nav__menu.open a:active,
  .nav__menu.open .nav__menu-trigger:active {
    background: #2da9ed !important; /* slightly darker accent */
    transform: scale(0.98);
    transition: transform 0.1s ease, background 0.1s ease;
  }
  
  /* Category trigger pills */
  .nav__mobile-cat-trigger:active {
    background: rgba(56, 182, 255, 0.28) !important;
    transform: scale(0.98);
    transition: transform 0.1s ease, background 0.1s ease;
  }
  
  /* Service leaves */
  .nav__mobile-leaf:active {
    background: rgba(56, 182, 255, 0.18) !important;
    transform: scale(0.98);
    transition: transform 0.1s ease, background 0.1s ease;
  }
  
  /* View all services link */
  .nav__mobile-sub-link--all:active {
    opacity: 0.6;
    transition: opacity 0.1s ease;
  }
  
  /* Hamburger button */
  .nav__toggle:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
  }
}

/* ---- Smoother animations everywhere ---- */

/* Use a high-quality easing curve consistently */
.nav__caret,
.nav__mobile-cat-caret {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
}

/* Mobile category expand/collapse should feel smooth.
   Note: display: none -> flex doesn't animate, but the caret rotation does, 
   and we add a subtle fade-in for the leaves */
@media (max-width: 1100px) {
  .nav__mobile-leaves {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* Remove the previous display: none; we'll use opacity + max-height instead */
    display: flex !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .nav__mobile-cat.is-open .nav__mobile-leaves {
    opacity: 1;
    max-height: 600px; /* large enough for 4 service links */
    padding-top: 6px !important;
    padding-bottom: 8px !important;
  }
  
  /* Same trick for the services-sub-menu (3 categories) */
  .nav__mobile-sub {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Override the previous display:none/flex toggle */
    display: flex !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  .nav__item--has-dd.is-open .nav__mobile-sub {
    opacity: 1;
    max-height: 1200px;
    padding-top: 8px !important;
    margin-top: 6px !important;
  }
}

/* ---- Mobile menu open: lock body scroll properly ---- */
body.menu-open {
  overflow: hidden !important;
  /* Prevents iOS rubber-band scroll behind menu */
  position: fixed;
  width: 100%;
  /* JS will set top: -<scrollY>px to preserve scroll position */
}

/* ---- Increase tap zones to minimum 44px ---- */
@media (max-width: 1100px) {
  .nav__mobile-cat-trigger,
  .nav__mobile-leaf,
  .nav__mobile-sub-link--all,
  .nav__menu.open a,
  .nav__menu.open .nav__menu-trigger {
    min-height: 48px;
  }
}

/* ---- Smooth scroll for the mobile menu itself ---- */
@media (max-width: 1100px) {
  .nav__menu.open {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Reduce motion: respect user preference ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   V14b — Power packs stacked vertically on mobile (revert)
   ============================================================ */

/* Mobile (≤700px): pack cards in a single column again — much more readable */
@media (max-width: 700px) {
  .packs__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pack {
    padding: 24px 20px !important;
  }
  /* Restore comfortable text sizes inside packs */
  .pack__head { gap: 10px !important; margin-bottom: 14px !important; }
  .pack__name { font-size: 1.15rem !important; line-height: 1.25 !important; }
  .pack__tag { font-size: 0.72rem !important; padding: 4px 10px !important; letter-spacing: 0.04em !important; }
  .pack__tag svg { width: 12px !important; height: 12px !important; }
  .pack__includes { gap: 6px !important; margin-bottom: 16px !important; }
  .pack__includes .tag,
  .pack__includes span { font-size: 0.8rem !important; padding: 5px 10px !important; }
  .pack__result { font-size: 0.9rem !important; line-height: 1.5 !important; padding: 12px 14px !important; }
  .pack__result strong { font-size: 0.9rem !important; }
}


/* ============================================================
   V15 — SMOOTH TRANSITIONS
   - Mobile menu slides + fades in/out
   - Page-to-page fade transitions
   - View Transitions API for modern browsers (graceful fallback)
   ============================================================ */

/* ---- Page entry transition (fade-in when arriving on a page) ---- */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  animation: pageEnter 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Page-exit transition (fade out before navigating) */
body.is-navigating {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When navigating, lock the body from extra scrolls/clicks */
body.is-navigating * {
  pointer-events: none;
}

/* ---- Mobile menu: slide-down + fade animation ---- */
@media (max-width: 1100px) {
  
  /* Default (closed) state: out of view above the screen, transparent */
  .nav__menu {
    /* Override the V12 closed-by-default behaviour */
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.3s;
    will-change: transform, opacity;
  }
  
  /* When .open class is added: slide down + fade in */
  .nav__menu.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
  }
}

/* Make sure desktop nav doesn't pick up the transform-hidden state */
@media (min-width: 1101px) {
  .nav__menu {
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ---- Smooth scroll for in-page anchor links ---- */
html {
  scroll-behavior: smooth;
}

/* Reduced-motion: skip all animations */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
  }
  body.is-navigating {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .nav__menu,
  .nav__menu.open {
    transition: none !important;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---- View Transitions API: smooth crossfade for modern browsers ---- */
@view-transition {
  navigation: auto;
}

/* Customize the cross-fade duration if View Transitions is supported */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}


/* ============================================================
   V15 fix — make sure mobile menu is `display: flex` even when closed
   so transforms can animate. Visibility hidden when not .open.
   ============================================================ */

@media (max-width: 1100px) {
  /* Override earlier `display: none` so element exists in layout
     and can be animated. We use visibility + opacity + transform
     instead of display to keep it animatable. */
  .nav__menu {
    display: flex !important;
    /* Position it as a full-screen fixed drawer even when closed
       (closed means: translated up out of view + invisible) */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--color-white) !important;
    padding: 88px 20px 32px !important;
    z-index: 1199 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin: 0 !important;
    /* Closed state: slid up out of view + invisible */
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.3s;
    will-change: transform, opacity;
  }
  
  .nav__menu.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0s;
  }
}


/* ============================================================
   V16 — BOOK A STRATEGY SESSION (Google Calendar embed)
   ============================================================ */

.booking {
  padding: 100px 0;
  background: linear-gradient(180deg,
    var(--color-gray-50) 0%,
    var(--color-white) 100%);
  position: relative;
  overflow: hidden;
}

/* Decorative blue glow background to match PMA brand */
.booking::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(56, 182, 255, 0.10), transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.booking .container {
  position: relative;
  z-index: 1;
}

.booking__header {
  margin-bottom: 48px;
}
.booking__header .section__intro {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* The iframe wrapper: rounded container with shadow */
.booking__embed-wrap {
  max-width: 980px;
  margin: 0 auto;
  background: var(--color-white);
  border-radius: 24px;
  box-shadow:
    0 30px 80px rgba(26, 43, 60, 0.10),
    0 8px 24px rgba(26, 43, 60, 0.06),
    0 0 0 1px var(--color-gray-100);
  overflow: hidden;
  position: relative;
}

/* The iframe itself */
.booking__embed {
  display: block;
  width: 100%;
  height: 700px;
  border: 0;
  background: var(--color-white);
}

/* Fallback link below the iframe (in case the iframe is blocked) */
.booking__fallback {
  margin-top: 24px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
.booking__fallback-link {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
  margin-left: 6px;
  transition: gap 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.booking__fallback-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile: tighter spacing, taller iframe (booking widget needs vertical room) */
@media (max-width: 900px) {
  .booking {
    padding: 70px 0 80px;
  }
  .booking__embed-wrap {
    border-radius: 18px;
    margin: 0 -4px; /* slight bleed for breathing room */
  }
  .booking__embed {
    height: 760px;
  }
}

@media (max-width: 600px) {
  .booking {
    padding: 56px 0 72px;
  }
  .booking__header {
    margin-bottom: 32px;
  }
  .booking__embed {
    height: 820px; /* Google Calendar widget needs more vertical room on mobile */
  }
  .booking__fallback {
    font-size: 0.85rem;
    padding: 0 16px;
  }
}


/* ============================================================
   V19 — SERVICE PAGE HERO BACKGROUND IMAGES (desktop only)
   ============================================================
   The .page-header gets a full-bleed background image with a
   dark overlay so the existing white text stays readable, and
   the fixed announcement bar + nav-pill float on top.
   Mobile is intentionally untouched (user will provide mobile
   images in a later iteration).
*/

/* The picture wrapper is layered behind everything else inside
   the page-header. We declare it at all viewports but only show
   it on desktop via media query below. */
.page-header__picture {
  display: none; /* hidden on mobile by default */
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-header__picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Desktop only: activate the image hero */
@media (min-width: 901px) {

  /* THE KEY FIX: neutralize the body's 124px padding-top reservation
     (which was created for the fixed nav on other pages). For pages
     with hero image we want the photo to start at y=0 and run all
     the way up behind the announcement bar AND the fixed nav. */
  body.has-image-hero {
    padding-top: 0 !important;
  }
  body.has-image-hero.scrolled {
    padding-top: 0 !important;
  }

  /* Show the picture wrapper */
  .page-header--has-image .page-header__picture {
    display: block;
  }

  /* Pull the page-header UP under the announcement bar so the
     image runs from the very top of the viewport down to the bottom
     of the hero — fully behind the announcement bar AND the nav-pill.
     The announcement bar (z-index: 1001) stays visible on top, and
     the fixed nav (z-index: 1000) floats over the image too.

     CRITICAL SPECIFICITY NOTE: this MUST be selected as
     `body.has-image-hero .page-header--has-image` (0,2,1) so it beats
     the existing override `body:not(.has-hero-slider) .page-header
     { padding-top: 40px !important; }` (0,2,0) earlier in the file.
     With a plain `.page-header--has-image` selector (0,1,0) the
     padding-top: 40px !important from that rule won the cascade
     and content rendered at y=40 — right behind the fixed nav. */
  body.has-image-hero .page-header--has-image {
    margin-top: -42px;
    padding-top: 300px !important;
    padding-bottom: 120px;
    min-height: 720px;
  }

  /* The existing .page-header__bg becomes the dark overlay that
     sits ABOVE the image but BELOW the text. Lighter than before so
     the photo is genuinely visible — text stays readable via the
     text-shadow defined further down. */
  .page-header--has-image .page-header__bg {
    z-index: 1;
    background:
      radial-gradient(ellipse at top right, rgba(56, 182, 255, 0.18), transparent 55%),
      radial-gradient(ellipse at bottom left, rgba(56, 182, 255, 0.08), transparent 60%),
      linear-gradient(180deg,
        rgba(15, 25, 38, 0.45) 0%,
        rgba(15, 25, 38, 0.60) 60%,
        rgba(15, 25, 38, 0.72) 100%);
  }

  /* Keep the subtle grid pattern overlay on top of the dark wash
     for that signature PMA texture — but a lot more transparent
     so it doesn't fight with the photo underneath. */
  .page-header--has-image .page-header__bg::before {
    opacity: 0.35;
  }

  /* Container/text must sit on top of both image and overlay */
  .page-header--has-image > .container {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  /* Soft text-shadow so the white title and subtitle remain crisp
     no matter what part of the photo lands behind them */
  .page-header--has-image .page-header__title,
  .page-header--has-image .page-header__subtitle,
  .page-header--has-image .page-header__eyebrow {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  }
}


/* ============================================================
   V20 — TARGETED REFINEMENTS
   ============================================================
   1. Homepage hero: full viewport height on desktop
   2. Service hero: more breathing room between subtitle and CTAs
   3. Service hero: stronger heading hierarchy (big name + smaller supporting line)
   ============================================================ */

/* ---------- Homepage hero — full viewport height on desktop ---------- */
@media (min-width: 901px) {
  .hero--centered.hero--with-slider {
    min-height: 100vh;
    padding-top: 160px !important;  /* clear the fixed nav stack */
    padding-bottom: 60px !important;
    display: flex;
    align-items: center;
  }
  .hero--centered.hero--with-slider .container {
    width: 100%;
  }
}

/* ---------- Service hero — vertical spacing between subtitle and CTAs ----------
   The gap between description and CTAs should roughly match the gap between
   the heading and the description (about 16-22px). We set 36px since the
   page-header__subtitle has no own bottom margin. */
.page-header__cta {
  margin-top: 36px;
}

/* ---------- Service hero — stronger heading hierarchy ----------
   HTML structure stays the same: <h1>Service<br><span class="...accent">Supporting</span></h1>
   We just style the accent span to look like a clear, smaller secondary heading. */
.page-header__title {
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
  line-height: 1.02;
  margin-bottom: 18px;
}
.page-header__title-accent {
  display: block;
  font-size: 0.42em;        /* relative to the (larger) parent title — ≈ 42% */
  font-weight: 500;          /* lighter weight vs 800 of main */
  letter-spacing: -0.01em;
  margin-top: 18px;
  line-height: 1.25;
  opacity: 0.92;
}


/* ============================================================
   V20.1 — BULLETPROOF NAV TEXT VISIBILITY ON WHITE PILL
   ============================================================
   The base CSS (line ~251) sets .nav__menu a to white (from an
   older transparent-nav design). The later pill rule (~3190)
   overrides to dark, but only via equal-specificity cascade.
   Any future addition could break it. Force it with !important
   so the white nav-pill ALWAYS has dark, readable text + links.
   ============================================================ */

/* Force dark text on all nav menu items and triggers */
.nav__menu a,
.nav__menu-trigger {
  color: var(--color-dark) !important;
}

/* Hover/active states stay dark with subtle gray background */
.nav__menu a:hover,
.nav__menu-trigger:hover,
.nav__menu a.is-active,
.nav__menu-trigger.is-active {
  color: var(--color-dark) !important;
  background: var(--color-gray-50);
}

/* Nav CTA (audit button) stays solid blue with dark text */
.nav__cta.btn--audit,
.btn--audit {
  background: var(--color-accent);
  color: var(--color-dark) !important;
}
.btn--audit:hover {
  color: var(--color-dark) !important;
}

/* Logo should be visible — never accidentally white-on-white */
.nav__logo-img {
  opacity: 1 !important;
}


/* ============================================================
   HERO — interactive ASCII "performance" background
   ============================================================ */
.hero--ascii {
  background: var(--color-dark) !important;
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0 0 4vh;
  overflow: hidden;
}

/* Full-bleed interactive ASCII canvas */
.hero--ascii .hero-ascii {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

/* Subtitle + CTA sit below the animated ASCII title */
.hero--ascii .hero__inner {
  position: relative;
  z-index: 1;
}
.hero--ascii .hero__content {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.hero--ascii .hero__subtitle {
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto 32px;
}
.hero--ascii .hero__cta {
  display: flex;
  justify-content: center;
}

/* Mobile: lift the subtitle + CTA up from the very bottom so the block
   reads as a centred group, with the ASCII title centred just above it
   (hero-ascii.js re-centres the title between the nav and this content). */
@media (max-width: 700px) {
  .hero--ascii {
    justify-content: flex-end;
    padding-bottom: 15vh;
  }
  .hero--ascii .hero__subtitle {
    margin-bottom: 26px;
  }
}

/* ============================================================
   HOW WE WORK — staggered "pop-in" entrance for the 4 steps
   ============================================================ */

/* The steps own the entrance; neutralise the generic container reveal */
.approach .approach__steps.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Hidden until the section scrolls into view */
.approach__steps .step.reveal {
  opacity: 0;
  transform: none;
  /* keep hover transitions snappy; entrance is driven by the keyframes */
  transition:
    background var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform var(--transition);
}

/* Cards spring up + scale with a slight overshoot */
.approach__steps .step.reveal.visible {
  opacity: 1;
  animation: stepPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Icons give a secondary little pop just after their card lands */
.approach__steps .step.reveal.visible .step__icon {
  animation: stepIconPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Stagger the four cards (and their icons) left → right */
.approach__steps .step:nth-child(1).visible { animation-delay: 0s; }
.approach__steps .step:nth-child(2).visible { animation-delay: 0.13s; }
.approach__steps .step:nth-child(3).visible { animation-delay: 0.26s; }
.approach__steps .step:nth-child(4).visible { animation-delay: 0.39s; }
.approach__steps .step:nth-child(1).visible .step__icon { animation-delay: 0.12s; }
.approach__steps .step:nth-child(2).visible .step__icon { animation-delay: 0.25s; }
.approach__steps .step:nth-child(3).visible .step__icon { animation-delay: 0.38s; }
.approach__steps .step:nth-child(4).visible .step__icon { animation-delay: 0.51s; }

@keyframes stepPop {
  0%   { opacity: 0; transform: translateY(46px) scale(0.9); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stepIconPop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .approach__steps .step.reveal { opacity: 1; }
  .approach__steps .step.reveal.visible,
  .approach__steps .step.reveal.visible .step__icon { animation: none; }
}

/* ============================================================
   MOBILE MENU v6 — smooth fade in/out, close button, filled layout
   Self-contained; supersedes the earlier .nav__menu.open drawer rules.
   Appended last so it wins the cascade.
   ============================================================ */
@media (max-width: 1100px) {
  /* The drawer is ALWAYS a full-screen fixed overlay so it can transition;
     display:none (the old approach) can't animate, which is why closing it
     popped abruptly. Hidden state = fully transparent + non-interactive. */
  .nav__menu {
    display: flex !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 22px 20px calc(env(safe-area-inset-bottom, 0px) + 26px) !important;
    background: var(--color-white) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    z-index: 1199 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.34s ease, transform 0.34s ease,
      visibility 0s linear 0.34s !important;
  }
  .nav__menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.34s ease, transform 0.34s ease !important;
  }

  /* ---- Header: logo (left) + CLOSE (right) ---- */
  .nav__menu-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 4px;
    margin-bottom: 16px;
  }
  .nav__menu-logo {
    height: 32px;
    width: auto;
    display: block;
  }
  .nav__menu .nav__menu-close {
    display: inline-block !important;
    width: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 2px !important;
    margin: 0 !important;
    font-family: var(--font-body) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--color-text) !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    text-decoration-thickness: 1.5px !important;
    cursor: pointer !important;
  }
  .nav__menu .nav__menu-close:hover,
  .nav__menu .nav__menu-close:active {
    color: var(--color-accent) !important;
  }

  /* ---- Top-level items as blue pills (base styling so they stay pills
          while the menu fades out, not just when .open is present) ---- */
  .nav__menu > li:not(.nav__menu-head):not(.nav__menu-foot) {
    width: 100% !important;
    list-style: none;
  }
  .nav__menu > li:not(.nav__menu-head):not(.nav__menu-foot) > a,
  .nav__menu .nav__menu-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 16px 22px !important;
    font-family: var(--font-display) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--color-dark) !important;
    background: var(--color-accent) !important;
    border: none !important;
    border-radius: 16px !important;
    text-align: left !important;
    cursor: pointer !important;
  }

  /* ---- Footer: pinned to the bottom to fill the blank space ---- */
  .nav__menu-foot {
    margin-top: auto !important;
    width: 100% !important;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 4px 4px;
  }
  .nav__menu a.nav__menu-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    padding: 16px 22px !important;
    background: var(--color-dark) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: 16px !important;
    font-family: var(--font-display) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    text-align: center !important;
  }
  .nav__menu a.nav__menu-cta:hover { background: var(--color-dark-2) !important; }
  .nav__menu a.nav__menu-cta svg { flex: none; }
  .nav__menu-contact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
  }
  .nav__menu .nav__menu-contact a {
    display: inline-block !important;
    width: auto !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 2px 4px !important;
    color: var(--color-text-muted) !important;
    font-family: var(--font-body) !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
  }
  .nav__menu .nav__menu-contact a:hover { color: var(--color-accent) !important; }
}

/* Header + footer rows are mobile-drawer only */
@media (min-width: 1101px) {
  .nav__menu-head,
  .nav__menu-foot { display: none !important; }
}

/* ============================================================
   MOBILE SERVICE HERO IMAGE (phone-only)
   Mirrors the desktop image hero but for ≤900px, using the
   portrait phone images. Activated per page by adding
   `has-image-hero-mobile` to <body> and `page-header--has-image-mobile`
   to the <header>, plus a `.page-header__picture--mobile`.
   ============================================================ */
.page-header__picture--mobile {
  display: none; /* shown on mobile only, via the media query below */
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.page-header__picture--mobile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 900px) {
  /* Neutralise the body's top padding (reserved for the fixed nav) so the
     photo runs full-bleed from the very top, behind the announcement bar + nav. */
  body.has-image-hero-mobile,
  body.has-image-hero-mobile.scrolled {
    padding-top: 0 !important;
  }

  /* Show the mobile picture */
  .page-header--has-image-mobile .page-header__picture--mobile {
    display: block;
  }

  /* Full-bleed hero; enough top padding so the title clears the
     announcement bar + nav pill that float on top. */
  body.has-image-hero-mobile .page-header--has-image-mobile {
    padding-top: 150px !important;
    padding-bottom: 56px;
    min-height: 540px;
  }

  /* The existing __bg becomes the dark overlay: above the image, below text */
  .page-header--has-image-mobile .page-header__bg {
    z-index: 1;
    background:
      radial-gradient(ellipse at top right, rgba(56, 182, 255, 0.18), transparent 55%),
      radial-gradient(ellipse at bottom left, rgba(56, 182, 255, 0.08), transparent 60%),
      linear-gradient(180deg,
        rgba(15, 25, 38, 0.50) 0%,
        rgba(15, 25, 38, 0.62) 60%,
        rgba(15, 25, 38, 0.74) 100%);
  }
  .page-header--has-image-mobile .page-header__bg::before {
    opacity: 0.35;
  }
  .page-header--has-image-mobile > .container {
    position: relative;
    z-index: 2;
    width: 100%;
  }
  .page-header--has-image-mobile .page-header__title,
  .page-header--has-image-mobile .page-header__subtitle,
  .page-header--has-image-mobile .page-header__eyebrow {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
  }
}

/* Homepage cases teaser: "View all cases" button */
.cases__more {
  text-align: center;
  margin-top: 44px;
}

/* ============================================================
   BREADCRUMB (case + service page heroes)
   White, on top of the dark image hero. Also used on case pages
   (assets/case.css redeclares it identically).
   ============================================================ */
.case-breadcrumb {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 18px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.case-breadcrumb a { color: rgba(255, 255, 255, 0.6); }
.case-breadcrumb a:hover { color: var(--color-accent); }
.case-breadcrumb [aria-current] { color: var(--color-white); font-weight: 500; }

/* ============================================================
   HEADER LOGO — larger size (the new logo art is more compact,
   so we scale it up to restore the previous visual presence).
   Final override; wins over the earlier scattered logo rules.
   ============================================================ */
/* Lock the nav pill to its original slim height so it does NOT grow with the
   logo. overflow:visible lets the logo fill (and slightly overspill) the bar
   without ever making the header itself taller. */
.nav, .nav__logo, .nav__inner { overflow: visible !important; }
.nav__inner { height: 76px !important; box-sizing: border-box !important; }
.nav.scrolled .nav__inner,
.nav--solid .nav__inner { height: 66px !important; }

.nav__logo .nav__logo-img { height: 72px !important; }
.nav.scrolled .nav__logo .nav__logo-img,
.nav--solid .nav__logo .nav__logo-img { height: 62px !important; }

@media (max-width: 700px) {
  .nav__inner { height: 64px !important; }
  .nav.scrolled .nav__inner,
  .nav--solid .nav__inner { height: 58px !important; }
  .nav__logo .nav__logo-img { height: 58px !important; }
  .nav.scrolled .nav__logo .nav__logo-img,
  .nav--solid .nav__logo .nav__logo-img { height: 52px !important; }
}

/* ============================================================
   MOBILE MENU — "decode" overlay (mobile + tablet ≤1100px)
   Reshapes the mobile menu into a full-screen fade-in overlay with
   centered display links that scramble into place (runScramble() in
   script.js). The scramble is the single signature; everything around
   it stays quiet. PMA house style: dark canvas, accent on press/active.
   Appended last so it wins source order over the earlier menu blocks.
   Trigger selectors include the .open variant to match the (0,3,0)
   specificity of earlier `.nav__menu.open .nav__menu-trigger` rules.
   ============================================================ */
@media (max-width: 1100px) {
  /* Vertically centre the link group between the header and the footer
     (footer already has margin-top:auto). */
  .nav__menu-head { margin-bottom: auto !important; }

  .nav__menu > li:not(.nav__menu-head):not(.nav__menu-foot) {
    width: 100% !important;
    text-align: center !important;
  }

  /* Top-level links + Services trigger → big, centred, plain text.
     Canvas is the existing white menu, so the labels are dark (quiet) and
     resolve to accent on the current page / press. .open prefixes raise
     specificity to 0,4,x so this beats the earlier pill rules. */
  .nav__menu.open > li:not(.nav__menu-head):not(.nav__menu-foot) > a,
  .nav__menu > li:not(.nav__menu-head):not(.nav__menu-foot) > a,
  .nav__menu .nav__menu-trigger,
  .nav__menu.open .nav__menu-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35em !important;
    width: 100% !important;
    padding: 7px 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: rgba(26, 43, 60, 0.72) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: clamp(2.1rem, 8.5vw, 3.1rem) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
    text-align: center !important;
    transition: color 0.25s ease !important;
  }

  /* Current page + press/active + open dropdown → accent. */
  .nav__menu.open > li > a.is-active,
  .nav__menu.open > li > a[aria-current="page"],
  .nav__menu.open > li:not(.nav__menu-head):not(.nav__menu-foot) > a:hover,
  .nav__menu.open > li:not(.nav__menu-head):not(.nav__menu-foot) > a:active,
  .nav__menu > li > a.is-active,
  .nav__menu > li > a[aria-current="page"],
  .nav__menu > li:not(.nav__menu-head):not(.nav__menu-foot) > a:hover,
  .nav__menu > li:not(.nav__menu-head):not(.nav__menu-foot) > a:active,
  .nav__menu .nav__menu-trigger:hover,
  .nav__menu .nav__menu-trigger:active,
  .nav__menu.open .nav__menu-trigger:hover,
  .nav__menu.open .nav__menu-trigger:active,
  .nav__item--has-dd.is-open > .nav__menu-trigger {
    color: var(--color-accent) !important;
    background: transparent !important;
  }

  /* Scramble char wrapper: lock width so resolving glyphs never reflow the line. */
  .nav__scramble { display: inline-block; white-space: nowrap; }
  .nav__scramble > span { display: inline-block; }

  /* Services caret sits inline after the label, smaller and quieter. */
  .nav__menu .nav__menu-trigger .nav__caret,
  .nav__menu.open .nav__menu-trigger .nav__caret {
    position: static !important;
    width: 0.55em !important;
    height: 0.55em !important;
    margin: 0 !important;
    opacity: 0.55;
  }

  /* Services accordion → centred and subordinate to the main links. */
  .nav__mobile-cat-trigger,
  .nav__mobile-leaf,
  .nav__mobile-sub-link--all {
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 1100px) and (prefers-reduced-motion: reduce) {
  /* No decode animation; labels are simply present. */
  .nav__scramble { width: auto !important; }
}

/* ============================================================
   APPROACH — expanding step accordion (replaces the 4 cards)
   Desktop: 4 dark panels side by side; hover/focus expands one to
   reveal its detail. Phone: stacks into 4 full cards. House style:
   dark brand panels on the white section, accent on the active step.
   Interaction lives in script.js (#approachAccordion).
   ============================================================ */
.apx {
  display: flex;
  gap: 12px;
  height: 460px;
}

.apx__panel {
  position: relative;
  flex: 1 1 0%;
  flex-grow: 1;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(56, 182, 255, 0.05), transparent 52%),
    linear-gradient(165deg, #1f3346 0%, #14222f 100%);
  transition: flex-grow 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s ease, background 0.4s ease;
}
.apx__panel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

.apx__panel.is-active {
  flex-grow: 3.6;
  border-color: rgba(56, 182, 255, 0.40);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(56, 182, 255, 0.18), transparent 58%),
    linear-gradient(165deg, #24394f 0%, #16242f 100%);
}

/* ---- collapsed state: number + vertical title ---- */
.apx__collapsed {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.apx__num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-accent);
}
.apx__rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
}
.apx__panel.is-active .apx__collapsed { opacity: 0; pointer-events: none; }

/* ---- active state: icon + label + title + description ---- */
.apx__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 44px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.12s, transform 0.4s ease 0.12s;
  pointer-events: none;
}
.apx__panel.is-active .apx__body { opacity: 1; transform: none; }

.apx__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-dark);
  margin-bottom: 20px;
}
.apx__icon svg { width: 26px; height: 26px; }

.apx__eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.apx__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--color-white);
  margin: 0 0 14px;
  white-space: nowrap;
}
.apx__desc {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 30ch;
  margin: 0;
}

/* ---- Phone: vertical accordion — tap a step to expand its detail ---- */
@media (max-width: 900px) {
  .apx {
    flex-direction: column;
    height: auto;
    gap: 12px;
  }
  .apx__panel {
    flex: none !important;
    flex-grow: 0 !important;
    height: auto;
    cursor: pointer;
    border-radius: 16px;
    overflow: hidden;
  }

  /* collapsed state becomes the tappable header row: number + title + chevron */
  .apx__collapsed {
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px;
    padding: 20px 22px;
    opacity: 1 !important;
  }
  .apx__rail {
    writing-mode: horizontal-tb !important;
    transform: none !important;
    font-size: 1.2rem;
    color: #f4f1ea;
    transition: color 0.25s ease;
  }
  .apx__panel.is-active .apx__rail { color: var(--color-accent); }
  .apx__collapsed::after {
    content: "";
    margin-left: auto;
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--color-accent);
    border-bottom: 2.5px solid var(--color-accent);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.35s ease;
  }
  .apx__panel.is-active .apx__collapsed::after { transform: translateY(2px) rotate(-135deg); }

  /* body collapses/expands vertically via the grid-rows technique */
  .apx__body {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    display: grid !important;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.42s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 22px;
    pointer-events: none;
  }
  .apx__panel.is-active .apx__body {
    grid-template-rows: 1fr;
    padding-bottom: 22px;
  }

  /* title + step live in the header, so the expanded area is the description */
  .apx__body .apx__icon,
  .apx__body .apx__eyebrow,
  .apx__body .apx__title { display: none; }
  .apx__desc {
    overflow: hidden;
    min-height: 0;
    max-width: none;
    font-size: 0.98rem;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apx__panel, .apx__body, .apx__collapsed { transition: none !important; }
}

/* ============================================================
   HOMEPAGE — "softened deadlock", LIGHT palette (scoped to .home)
   Warm off-white canvas + dark text + monospace eyebrows + big
   sentence-case headings + scroll animations, with PMA blue as the
   single accent. The hero and final CTA stay dark as bookends (the
   ASCII animation needs a dark canvas). Only <body class="home">.
   ============================================================ */

/* 1. Light section canvas; white cards keep their token, dark text. */
.home .approach,
.home .build,
.home .growth,
.home .packs,
.home .modular-note,
.home .cases,
.home .faq,
.home .booking {
  --color-gray-100: #e7e5df;
  background-color: #f6f5f2;
  color: #1c2a36;
}
.home .cases { background: #f6f5f2; }
.home .modular-note { background: #f0eee7; }

/* 2. Tight vertical rhythm — much less space between sections. */
.home .approach,
.home .build,
.home .growth,
.home .packs,
.home .cases,
.home .faq {
  padding-top: 34px;
  padding-bottom: 34px;
}
.home .booking { padding-top: 40px; padding-bottom: 40px; }
.home .cta { padding-top: 44px; padding-bottom: 44px; }
.home .modular-note { padding-top: 16px; padding-bottom: 16px; }
.home .section__header { margin-bottom: 30px; }
@media (max-width: 700px) {
  .home .approach,
  .home .build,
  .home .growth,
  .home .packs,
  .home .cases,
  .home .faq { padding-top: 28px; padding-bottom: 28px; }
}

/* 3. Monospace eyebrow with an accent tick (replaces the blue pill) */
.home .section__eyebrow {
  background: none;
  padding: 0;
  border-radius: 0;
  color: #7a8590;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  margin-bottom: 20px;
}
.home .section__eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  background: var(--color-accent);
  vertical-align: middle;
  margin-right: 12px;
  transform: translateY(-2px);
}
/* the dark final CTA keeps a light eyebrow for contrast */
.home .cta .section__eyebrow { color: rgba(244, 241, 234, 0.6); }

/* 4. Bigger sentence-case display headings, dark */
.home .section__title {
  font-size: clamp(2.1rem, 5vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: #16242f;
}
.home .section__intro { color: #586773; }

/* 5. All homepage blocks go dark like the "How we work" accordion panels:
   What we build / Beyond the website / Power Packs / Cases / FAQ.
   The token remaps flip inner text, chips and borders to light. */
.home .build__card,
.home .growth__card,
.home .pack,
.home .case,
.home .faq__item {
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(56, 182, 255, 0.05), transparent 52%),
    linear-gradient(165deg, #202427 0%, #15181a 100%);
  border-color: rgba(244, 241, 234, 0.10);
  color: #f4f1ea;
  --color-white: #262b2f;
  --color-text: #f4f1ea;
  --color-text-muted: rgba(244, 241, 234, 0.62);
  --color-dark: #f4f1ea;
  --color-gray-50: rgba(244, 241, 234, 0.06);
  --color-gray-100: rgba(244, 241, 234, 0.14);
  --color-green-soft: rgba(149, 191, 71, 0.14);
}
/* solid accent icon tiles, like the accordion */
.home .build__icon,
.home .growth__icon {
  background: var(--color-accent);
  color: #0d1216;
}

/* Approach accordion stays dark — a feature block on the light page */
.home .apx__panel {
  background:
    radial-gradient(130% 130% at 0% 0%, rgba(56, 182, 255, 0.05), transparent 52%),
    linear-gradient(165deg, #202427 0%, #15181a 100%);
}
.home .apx__panel.is-active {
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(56, 182, 255, 0.16), transparent 58%),
    linear-gradient(165deg, #262b2f 0%, #15181a 100%);
}

/* 6. Animation: section titles rise word-by-word behind a line mask.
      JS arms (.dl-armed) then triggers (.is-in) on scroll, so if JS
      never runs the words stay fully visible (progressive enhancement). */
.home .section__title .dl-wmask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.home .section__title .dl-w {
  display: inline-block;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.home .section__title.dl-armed .dl-w { transform: translateY(118%); }
.home .section__title.dl-armed.is-in .dl-w { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .home .section__title.dl-armed .dl-w { transform: none !important; }
}

/* Booking is light (it joins the off-white canvas via the group above);
   the scheduling widget sits on top as a white card. */

/* The final CTA stays charcoal as a dark bookend around the light content. */
.home .cta { background: #121517; }

/* Hero: blue halftone image background with a dark overlay so the ASCII
   animation + subtitle stay readable on top. */
.home .hero--ascii {
  background:
    linear-gradient(rgba(7, 12, 18, 0.52), rgba(7, 12, 18, 0.64)),
    url("assets/hero/hero-halftone.webp") center / cover no-repeat,
    #0d1b26 !important;
}

/* ============================================================
   WHAT WE BUILD — tabbed feature block (Feature108 adaptation)
   Light section, dark panel card, PMA blue accent, Bricolage type.
   Tabs switch a 2-column panel; switching logic in script.js.
   ============================================================ */
.wb-tabs { margin-top: 8px; }

/* ---- tab list (segmented control on the light section) ---- */
.wb-tabs__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
}
.wb-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.wb-tab svg { width: 18px; height: 18px; flex: none; }
.wb-tab:hover { color: var(--color-dark); }
.wb-tab.is-active {
  background: #ffffff;
  color: var(--color-dark);
  border-color: #e7e5df;
  box-shadow: 0 6px 18px rgba(26, 43, 60, 0.08);
}
.wb-tab.is-active svg { color: var(--color-accent); }
.wb-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- panel card (dark, matches the homepage dark blocks) ---- */
.wb-panels { position: relative; }
.wb-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  padding: 44px;
  border-radius: 22px;
  border: 1px solid rgba(244, 241, 234, 0.10);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(56, 182, 255, 0.07), transparent 55%),
    linear-gradient(165deg, #202427 0%, #15181a 100%);
  color: #f4f1ea;
}
.wb-panel.is-active { display: grid; animation: wbFade 0.4s ease; }
@keyframes wbFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.wb-panel__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.wb-panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}
.wb-panel__desc {
  color: rgba(244, 241, 234, 0.7);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}
.wb-panel__desc strong { color: var(--color-accent); }
.wb-panel__desc em { font-style: italic; color: #f4f1ea; }
.wb-panel__features {
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.wb-panel__features li {
  position: relative;
  padding-left: 26px;
  color: rgba(244, 241, 234, 0.82);
  font-size: 0.98rem;
  line-height: 1.45;
}
.wb-panel__features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
}
.wb-panel__btn { margin-top: 6px; }

/* ---- website mockup image ---- */
.wb-panel__media { width: 100%; }
.wb-panel__media picture { display: block; }
.wb-panel__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ---- responsive ---- */
@media (max-width: 800px) {
  .wb-panel {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 28px 22px;
  }
  .wb-panel__media { order: 2; }
}
@media (max-width: 480px) {
  .wb-tab { padding: 9px 15px; font-size: 0.9rem; }
}

/* ============================================================
   APPROACH accordion — step photos as block backgrounds
   Photo fills each panel; a dark gradient overlay keeps the cream
   text readable (matches the original image-panel accordion).
   ============================================================ */
.apx__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.apx__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.apx__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, rgba(11, 14, 16, 0.93) 0%, rgba(11, 14, 16, 0.74) 45%, rgba(11, 14, 16, 0.58) 100%);
  transition: opacity 0.4s ease;
}
/* keep content above the photo + overlay */
.apx__collapsed { z-index: 2; }
.apx__body { z-index: 2; }

/* Phone: the panels stack as a vertical accordion, so darken from the
   top-left where the number + title sit. */
@media (max-width: 900px) {
  .apx__overlay {
    background: linear-gradient(120deg, rgba(11, 14, 16, 0.92) 0%, rgba(11, 14, 16, 0.78) 60%, rgba(11, 14, 16, 0.66) 100%);
  }
}

/* ============================================================
   SITE-WIDE DARK BLOCKS  (added on request)
   Turn the card/panel components on every non-home page dark,
   using the same recipe as the homepage cards. Page canvases,
   section eyebrows, headings, spacing and long-form prose are
   left as-is — only the discrete blocks go dark. Scoped by
   component class so .home and article prose are never touched.
   ============================================================ */
:root {
  --dark-card-surface:
    radial-gradient(130% 130% at 0% 0%, rgba(56, 182, 255, 0.05), transparent 52%),
    linear-gradient(165deg, #202427 0%, #15181a 100%);
  --dark-card-surface-hover:
    radial-gradient(120% 130% at 0% 0%, rgba(56, 182, 255, 0.14), transparent 58%),
    linear-gradient(165deg, #262b2f 0%, #15181a 100%);
}

/* shared dark-card token remap (mirrors .home cards) */
.svc-card,
.svc-included__item,
.svc-approach__step,
.svc-related__card,
.svc-faq .faq__item {
  background: var(--dark-card-surface);
  border-color: rgba(244, 241, 234, 0.10);
  color: #f4f1ea;
  --color-white: #262b2f;
  --color-text: #f4f1ea;
  --color-text-muted: rgba(244, 241, 234, 0.62);
  --color-dark: #f4f1ea;
  --color-gray-50: rgba(244, 241, 234, 0.06);
  --color-gray-100: rgba(244, 241, 234, 0.14);
  --color-gray-400: rgba(244, 241, 234, 0.45);
  --color-green-soft: rgba(149, 191, 71, 0.14);
}
/* nicer lift on hover instead of turning pale */
.svc-card:hover,
.svc-approach__step:hover,
.svc-related__card:hover { background: var(--dark-card-surface-hover); }
/* solid accent icon tiles for punch, like the homepage */
.svc-card__icon,
.svc-related__icon { background: var(--color-accent); color: #0d1216; }

/* ---- Case pages (stats, pillars, goals, tags) ----
   Scoped with .case-page so these beat case.css, which loads AFTER
   styles.css and would otherwise win equal-specificity ties. */
.case-page .case-stat,
.case-page .case-pillar,
.case-page .case-goal {
  background: var(--dark-card-surface);
  border-color: rgba(244, 241, 234, 0.10);
  color: #f4f1ea;
  --color-white: #262b2f;
  --color-text: #f4f1ea;
  --color-text-muted: rgba(244, 241, 234, 0.62);
  --color-dark: #f4f1ea;
  --color-gray-50: rgba(244, 241, 234, 0.06);
  --color-gray-100: rgba(244, 241, 234, 0.14);
}
.case-page .case-pillar__icon { background: var(--color-accent); color: #0d1216; }
.case-page .case-tag {
  background: var(--dark-card-surface);
  border-color: rgba(244, 241, 234, 0.14);
  color: #f4f1ea;
}

/* ---- Blog: listing cards (scoped with .blog-list to beat blog.css) ---- */
.blog-list .bcard {
  background: var(--dark-card-surface);
  border-color: rgba(244, 241, 234, 0.10);
  color: #f4f1ea;
}
.blog-list .bcard__title { color: #f4f1ea; }
.blog-list .bcard__excerpt { color: rgba(244, 241, 234, 0.62); }
.blog-list .bcard__meta { color: rgba(244, 241, 234, 0.55); border-top-color: rgba(244, 241, 234, 0.14); }
.blog-list .bcard__meta strong { color: #f4f1ea; }

/* ---- Blog article: dark boxes, prose + tables stay readable ----
   Scoped with .post to beat blog.css (loaded after styles.css). */
/* inline callout */
.post .post__note {
  background: var(--dark-card-surface);
  border-color: rgba(244, 241, 234, 0.12);
  border-left-color: var(--color-accent);
}
.post .post__note p { color: rgba(244, 241, 234, 0.90); }
.post .post__note a { color: #6dcaff; }
/* FAQ turns into a dark box */
.post .post__faq {
  background: var(--dark-card-surface);
  border: 1px solid rgba(244, 241, 234, 0.10);
  border-radius: 16px;
  padding: 4px 26px;
}
.post .post__faq-item { border-top-color: rgba(244, 241, 234, 0.12); }
.post .post__faq-item > summary { color: #f4f1ea; }
.post .post__faq-item > p { color: rgba(244, 241, 234, 0.72); }
/* author bio card */
.post .post__author {
  background: var(--dark-card-surface);
  border-color: rgba(244, 241, 234, 0.10);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}
.post .post__author-name { color: #f4f1ea; }
.post .post__author-role { color: rgba(244, 241, 234, 0.60); }
.post .post__author p { color: rgba(244, 241, 234, 0.75); }
.post .post__author-link { background: var(--color-accent); color: #0d1216; }
.post .post__author-link--ghost { background: transparent; color: #f4f1ea; border-color: rgba(244, 241, 234, 0.28); }
.post .post__author-link--ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---- About + Approach pages (intro cards, timeline, values, process steps) ---- */
.about-intro__card,
.timeline__card,
.values .value,
.process-step {
  background: var(--dark-card-surface);
  border-color: rgba(244, 241, 234, 0.10);
  color: #f4f1ea;
  --color-white: #262b2f;
  --color-text: #f4f1ea;
  --color-text-muted: rgba(244, 241, 234, 0.62);
  --color-dark: #f4f1ea;
  --color-gray-50: rgba(244, 241, 234, 0.06);
  --color-gray-100: rgba(244, 241, 234, 0.14);
}
.about-intro__card:hover,
.timeline__card:hover,
.values .value:hover,
.process-step:hover { background: var(--dark-card-surface-hover); }
.about-intro__card-icon,
.value__icon,
.process-step__icon { background: var(--color-accent); color: #0d1216; }

/* ---- Cases overview cards (photo stays on top, body goes dark) ---- */
.cases-grid .ccard {
  background: var(--dark-card-surface);
  border-color: rgba(244, 241, 234, 0.10);
  color: #f4f1ea;
  --color-white: #262b2f;
  --color-dark: #f4f1ea;
  --color-text: #f4f1ea;
  --color-text-muted: rgba(244, 241, 234, 0.62);
}
.cases-grid .ccard__tag {
  background: rgba(56, 182, 255, 0.16);
  color: #9bd7ff;
}

/* ============================================================
   EXPLORE OUR SERVICES — arc slider (homepage)
   Light section canvas (matches the other .home sections); the
   photo cards fan out in an arc, centre card is largest and its
   description shows below. Positions are driven by services-slider.js.
   ============================================================ */
.home .svcx {
  background: #f6f5f2;
  color: #1c2a36;
  padding-top: 34px;
  padding-bottom: 40px;
}
@media (max-width: 700px) {
  .home .svcx { padding-top: 28px; padding-bottom: 30px; }
}

.svcx__stage {
  position: relative;
  height: 470px;
  margin: 6px auto 0;
  touch-action: pan-y;      /* horizontal drag handled in JS; vertical scroll stays with the page */
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  outline: none;
}
.svcx__stage.is-dragging { cursor: grabbing; }
@media (max-width: 700px) { .svcx__stage { height: 330px; } }

.svcx-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 252px;
  height: 336px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #0d1216;
  transform: translate(-50%, -50%);   /* JS overrides each frame */
  will-change: transform;
  box-shadow: 0 18px 44px rgba(10, 15, 20, 0.28);
  opacity: 0;
  transition: opacity 0.5s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.svcx__stage.is-ready .svcx-slide { opacity: 1; }
@media (max-width: 700px) { .svcx-slide { width: 168px; height: 226px; } }

.svcx-slide picture { display: block; width: 100%; height: 100%; }
.svcx-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.svcx-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 10, 14, 0.86) 0%, rgba(8, 10, 14, 0.35) 42%, rgba(8, 10, 14, 0) 68%);
  pointer-events: none;
}
.svcx-slide__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px 17px;
  color: #fff;
  text-align: left;
}
.svcx-slide__icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--color-accent);
  color: #0b1116;
  display: flex; align-items: center; justify-content: center;
}
.svcx-slide__icon svg { width: 17px; height: 17px; }
.svcx-slide__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* centre (selected) slide gets an accent ring + deeper shadow */
.svcx-slide.is-active {
  box-shadow: 0 28px 66px rgba(10, 15, 20, 0.44);
}
.svcx-slide.is-active::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  border-radius: 18px;
  box-shadow: inset 0 0 0 2px var(--color-accent);
  pointer-events: none;
}

/* description panel below the slider */
.svcx__detail {
  max-width: 620px;
  margin: 2px auto 0;
  text-align: center;
  min-height: 118px;
}
.svcx__detail-inner {
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.svcx__detail.is-swapping .svcx__detail-inner {
  opacity: 0;
  transform: translateY(6px);
}
.svcx__detail h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.7rem);
  letter-spacing: -0.02em;
  color: #16242f;
  margin: 0 0 8px;
}
.svcx__detail p {
  color: #586773;
  line-height: 1.6;
  font-size: 1rem;
  margin: 0 0 14px;
}
.svcx__detail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
}
.svcx__detail-link svg { transition: transform 0.2s ease; }
.svcx__detail-link:hover svg { transform: translateX(3px); }

/* prev / next */
.svcx__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.svcx__btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(22, 36, 47, 0.16);
  background: #fff;
  color: #16242f;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.svcx__btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* ============================================================
   HOMEPAGE CASES — photo cards (case hero image + one line +
   related services). Replaces the old quote blocks.
   ============================================================ */
.home .cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .home .cases__grid { grid-template-columns: 1fr 1fr !important; } }
/* Phones: keep two cases side by side (compact card styles are defined
   at the end of this file so they win over the base .hcase rules). */
@media (max-width: 600px) { .home .cases__grid { grid-template-columns: 1fr 1fr !important; gap: 12px; } }

.hcase {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: #0d1216;
  box-shadow: 0 18px 44px rgba(10, 15, 20, 0.22);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.hcase:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(10, 15, 20, 0.34); }
.hcase__media { position: absolute; inset: 0; display: block; }
.hcase__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s ease; }
.hcase:hover .hcase__media img { transform: scale(1.05); }
.hcase::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 10, 14, 0.92) 0%, rgba(8, 10, 14, 0.6) 34%, rgba(8, 10, 14, 0.1) 62%, rgba(8, 10, 14, 0.16) 100%);
  pointer-events: none;
}
.hcase__country {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(8, 12, 18, 0.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.02em; color: #fff;
}
.hcase__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px 20px 22px; }
.hcase__brand {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.05;
  margin: 0 0 8px; color: #fff;
}
.hcase__did { font-size: 0.98rem; line-height: 1.4; color: rgba(255, 255, 255, 0.85); margin: 0 0 14px; }
.hcase__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.hcase__tags span {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(56, 182, 255, 0.18); color: #bfe4ff;
  border: 1px solid rgba(56, 182, 255, 0.30);
}
.hcase__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; color: var(--color-accent); }
.hcase__link svg { transition: transform 0.2s ease; }
.hcase:hover .hcase__link svg { transform: translateX(3px); }

/* Compact homepage case cards on phones (two side by side).
   Placed at end of file so these override the base .hcase rules. */
@media (max-width: 600px) {
  .hcase { aspect-ratio: 3 / 4.5; border-radius: 14px; }
  .hcase__body { padding: 12px 11px 13px; }
  .hcase__country { top: 8px; left: 8px; padding: 4px 8px; gap: 5px; font-size: 0.64rem; }
  .hcase__brand { font-size: 1rem; line-height: 1.08; margin-bottom: 5px; }
  .hcase__did {
    font-size: 0.74rem; line-height: 1.32; margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hcase__tags { gap: 5px; margin-bottom: 8px; }
  .hcase__tags span { font-size: 0.6rem; padding: 3px 7px; }
  .hcase__link { font-size: 0.78rem; gap: 6px; }
}

/* CurAzul case appears in the homepage cases grid on phones only */
.hcase--mobile-only { display: none; }
@media (max-width: 600px) { .hcase--mobile-only { display: block; } }