/*
Theme Name: ZVEN
Theme URI: https://zven.ae
Author: ZVEN
Author URI: https://zven.ae
Description: Dark, premium block theme for ZVEN — exhibition stand design & build. Black with red/orange brand gradient, Alexandria typography.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zven
*/


/* Alexandria — self-hosted from Google Fonts (SIL Open Font License 1.1).
   Served locally so no visitor data reaches a third party and the
   typeface renders even if an external CDN is blocked or slow. */

/* arabic */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/alexandria-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* vietnamese */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/alexandria-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/alexandria-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Alexandria';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/alexandria-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --zven-grad: linear-gradient(135deg, #ff0049 0%, #eb8649 100%);
}

/* Prevent horizontal overflow without breaking `position: sticky`.
   NOTE: `overflow-x: hidden` would create a scroll container on the root and
   silently disable the sticky header — `clip` contains overflow the same way
   while leaving overflow-y visible, so sticky keeps working. */
html {
  overflow-x: clip;
}
body {
  background: #111111;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100vw;
}
/* Flex items default to a content-based minimum width, which lets wide
   children (e.g. the hero emblem) force their column beyond its flex-basis
   and overflow the viewport. Reset so columns can actually shrink. */
.wp-block-column,
.wp-block-columns > *,
.wp-block-group > .wp-block-group {
  min-width: 0;
}

/* ── Footer margin reset (required) ─────────────────────────── */
.wp-site-blocks > footer { margin-block-start: 0; }

/* ── Gradient + accent text ─────────────────────────────────── */
.gradient-text {
  background: var(--zven-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  font-weight: 600;
  color: #ff3366;
}
.region-tags {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.4);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-gradient > .wp-element-button,
.wp-block-button.btn-gradient > .wp-element-button {
  background: var(--zven-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 0.95rem 2rem !important;
  font-weight: 700 !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-gradient > .wp-element-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(255, 0, 73, 0.4);
}
.btn-outline > .wp-element-button {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 999px !important;
  padding: 0.95rem 2rem !important;
  font-weight: 600 !important;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.btn-outline > .wp-element-button:hover {
  border-color: rgba(255, 255, 255, 0.6) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
.btn-dark > .wp-element-button {
  background: #080808 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 1rem 2.25rem !important;
  font-weight: 700 !important;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card,
.stat-card,
.service-card,
.audience-card,
.project-card {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
}

/* ── Client testimonials carousel ────────────────────────────── */
/* Heading spacing lives here, not in the block's style attr — the block
   validator strips inline spacing from this heading on re-save. */
.zven-quotes-wrap .eyebrow { margin-bottom: 0; }
.zven-quotes-wrap h2 { margin-top: 1.25rem; margin-bottom: 3rem; }
/* Core's constrained layout caps this at the 760px content size; the original
   ran at max-w-4xl. !important because core's rule sits later in the cascade. */
.zven-quotes-wrap { max-width: 896px !important; margin-inline: auto !important; }
.zven-quotes { max-width: 896px; margin-inline: auto; }
/* Every slide occupies the same grid cell, so the stage is automatically as
   tall as the longest quote and the dots below never shift on rotate. */
.zven-quotes__stage { display: grid; }
.zven-quotes__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1), visibility .45s;
}
.zven-quotes__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.zven-quotes__mark {
  display: block;
  font-size: 3.75rem;
  line-height: 1;
  font-weight: 900;
  margin-bottom: 1rem;
  background: var(--zven-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.zven-quotes__text {
  margin: 0;
  max-width: 768px;
  border: 0;
  padding: 0;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.375;
  color: rgba(255, 255, 255, 0.85);
}
.zven-quotes__by {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.zven-quotes__rule { flex: none; width: 2.5rem; height: 1px; background: var(--zven-grad); }
.zven-quotes__name { display: block; font-weight: 600; color: #fff; }
.zven-quotes__role { display: block; font-size: 0.875rem; color: rgba(255, 255, 255, 0.45); }

.zven-quotes__dots { display: flex; gap: 0.75rem; margin-top: 2.5rem; }
.zven-quotes__dot {
  position: relative;
  width: 8px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
/* The visible dot is 6px tall; extend the touch area to 44px without
   changing how it looks. */
.zven-quotes__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 24px);
  height: 44px;
}
.zven-quotes__dot.is-active { width: 32px; background: var(--zven-grad); }
.zven-quotes__dot:focus-visible { outline: 2px solid #ff3366; outline-offset: 3px; }

@media (min-width: 640px) { .zven-quotes__text { font-size: 1.875rem; } }

@media (prefers-reduced-motion: reduce) {
  /* The global reduced-motion rule flattens the crossfade to 0.01ms, which
     makes slides pop. Keep the fade but skip the vertical travel. */
  .zven-quotes__slide {
    transition: opacity .45s ease, visibility .45s !important;
    transform: none !important;
  }
}
.service-card,
.stat-card,
.audience-card { padding: 1.75rem; }
/* WP "constrained" layout auto-centres a group's children, which centred the
   icon and title while the full-width description stayed left. Keep the whole
   card left-aligned. */
/* Core prints `margin-inline: auto !important` inline AFTER this sheet at equal
   specificity, so this needs the extra .wp-block-group class to win. */
.wp-block-group.service-card > *,
.wp-block-group.project-card > * { margin-left: 0 !important; margin-right: 0 !important; }

.icon-badge {
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  background: var(--zven-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  color: #fff;
  -webkit-text-fill-color: #fff;
  margin-bottom: 1rem;
  box-shadow: 0 6px 18px rgba(255, 0, 73, 0.28);
}
.icon-badge.gradient-text { font-weight: 800; }
/* SVG service icons inside the gradient chip */
.icon-badge .wp-block-image { margin: 0; line-height: 0; }
.icon-badge .wp-block-image img { width: 30px; height: 30px; display: block; }

/* ── Equal cards (required pattern) ─────────────────────────── */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.equal-cards .cta-bottom { margin-top: auto; }

/* 2x2 stat grid + 3-up service grid.
   NOTE: WordPress core sets `flex-wrap: nowrap` on .wp-block-columns at desktop,
   which squeezes all items onto one row. These selectors are scoped with
   .wp-block-columns to out-specify core so the rows can actually wrap. */
.wp-block-columns.grid-2x2 { flex-wrap: wrap !important; gap: 1rem !important; }
.wp-block-columns.grid-2x2 > .wp-block-column { flex-basis: calc(50% - 0.5rem) !important; flex-grow: 0 !important; }

.wp-block-columns.services-grid { flex-wrap: wrap !important; gap: 1.25rem !important; }
.wp-block-columns.services-grid > .wp-block-column {
  flex-basis: calc(33.333% - 0.84rem) !important;
  flex-grow: 0 !important;
}
@media (max-width: 900px) {
  .wp-block-columns.services-grid > .wp-block-column { flex-basis: calc(50% - 0.63rem) !important; }
}
@media (max-width: 600px) {
  .wp-block-columns.grid-2x2 > .wp-block-column,
  .wp-block-columns.services-grid > .wp-block-column { flex-basis: 100% !important; }
}

/* ── Hero radar graphic (pure CSS) ──────────────────────────── */
.radar {
  position: relative;
  width: min(78vw, 320px);
  aspect-ratio: 1;
  margin: 2.5rem auto 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle, rgba(255, 0, 73, 0.14) 0%, transparent 62%),
    repeating-radial-gradient(circle at center, transparent 0 35px, rgba(255, 255, 255, 0.06) 35px 36px);
  overflow: hidden;
}
.radar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 0, 73, 0.45), rgba(255, 0, 73, 0) 90deg);
  animation: radar-sweep 8s linear infinite;
}
.radar::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)) center / 1px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)) center / 100% 1px no-repeat;
}
.radar .wp-block-image {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.radar .wp-block-image img {
  width: 42%;
  height: auto;
  filter: drop-shadow(0 0 22px rgba(255, 0, 73, 0.5));
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }

/* ── Stat number emphasis ───────────────────────────────────── */
.stat-number { font-weight: 800; line-height: 1; }
.live-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #ff0049;
  box-shadow: 0 0 8px rgba(255, 0, 73, 0.8);
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* ── CTA band (full gradient section) ───────────────────────── */
.cta-band { position: relative; background: var(--zven-grad) !important; }
/* Wave line motif along the top edge (brief 2.7) */
.cta-band::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: url("assets/images/cta-wave.svg") no-repeat center top;
  background-size: 100% 44px;
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }
/* Inverted words in the headline read dark against the gradient. */
.cta-band .gradient-text,
.cta-band .dark-accent {
  color: #111111 !important;
  -webkit-text-fill-color: #111111;
  background: none;
}

/* ── Mesh background accent ─────────────────────────────────── */
.mesh-bg {
  background-image:
    linear-gradient(rgba(255, 0, 73, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 73, 0.04) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ── Header / nav ───────────────────────────────────────────── */
/* The sticky must live on the template-part wrapper: a sticky element can only
   travel inside its parent's box, and the inner group's parent is exactly as
   tall as the header itself (no room to stick). The wrapper's parent is the
   full-height page, so this is what actually sticks. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Logo is set to 245px inline for desktop; cap it on smaller screens so it
   doesn't dominate the header (it was ~65% of a 375px viewport). */
.site-logo img { max-width: 100%; height: auto; }
@media (max-width: 900px) { .site-logo img { width: 190px !important; } }
@media (max-width: 600px) { .site-logo img { width: 150px !important; } }

.site-header {
  background: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-header .wp-block-navigation a { color: #ffffff; font-weight: 500; }
.site-header .wp-block-navigation a:hover { color: #fff; }

/* ── Mobile menu ─────────────────────────────────────────────── */
/* Core ships the open overlay as white-on-black-text, which is inverted
   against this theme. Repaint it and give the controls real touch targets. */
.wp-block-navigation__responsive-container.is-menu-open {
  background-color: #0c0c0c !important;
  color: #ffffff !important;
  padding: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #ffffff !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  gap: 0;
  width: 100%;
}
/* 44px minimum touch height, with a hairline between rows. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  display: flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
  font-size: 1.05rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; }

/* Core renders these at 24×24 — too small to hit reliably on a phone.
   NOTE: do NOT set `display` unconditionally here. Core hides the open
   toggle above 600px with `display:none`, and an unscoped override would
   leave a hamburger sitting next to the full desktop nav. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
}
@media (max-width: 599.98px) {
  .wp-block-navigation__responsive-container-open { display: inline-flex; }
}
.wp-block-navigation__responsive-container-close { display: inline-flex; color: #ffffff !important; }
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; }
.wp-block-navigation__responsive-container-open:focus-visible,
.wp-block-navigation__responsive-container-close:focus-visible { outline: 2px solid #ff3366; outline-offset: 2px; }

/* ── Animations ─────────────────────────────────────────────── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }

.fade-up { opacity: 0; transform: translateY(28px); animation: fadeUp 0.7s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.stagger-children > * { opacity: 0; transform: translateY(20px); animation: fadeUp 0.6s ease forwards; }
.stagger-children > *:nth-child(1) { animation-delay: 0.08s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.16s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.24s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.32s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.40s; }

.hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.hover-lift:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 0, 73, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 0, 73, 0.08);
}

/* ── Reduced motion (required) ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll, .fade-up, .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Hero emblem is a deliberate always-on brand animation — kept moving
     even when the OS/browser requests reduced motion. */
  .emblem-orbit .orbit-ring img { animation: spinCW 30s linear infinite !important; }
  .emblem-orbit .orbit-mark { animation: emblemFloat 6s ease-in-out infinite !important; }
  .emblem-orbit .orbit-mark img { animation: spinCCW 26s linear infinite !important; }
}

/* ── Editor visibility (required) ───────────────────────────── */
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .stagger-children > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* ── Latest homepage sections ───────────────────────────────── */
@keyframes spinCW { to { transform: rotate(360deg); } }
@keyframes spinCCW { to { transform: rotate(-360deg); } }
@keyframes emblemFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.pill-badge {
  display: inline-block;
  border: 1px solid rgba(255, 0, 73, 0.4);
  border-radius: 999px;
  padding: 0.5rem 1.25rem;
  color: #ff3366;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stats-row .wp-block-column + .wp-block-column {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-label {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.4);
}

.emblem-orbit {
  position: relative;
  width: min(100%, 360px);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle, rgba(255, 0, 73, 0.16) 0%, transparent 62%),
    repeating-radial-gradient(circle at center, transparent 0 38px, rgba(255, 255, 255, 0.05) 38px 39px);
}
.emblem-orbit .orbit-ring,
.emblem-orbit .orbit-mark {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.emblem-orbit .orbit-ring img {
  width: 100%;
  height: 100%;
  animation: spinCW 30s linear infinite;
  transform-origin: 50% 50%;
}
.hero-columns { align-items: center; }
@media (max-width: 781px) {
  .hero-columns .emblem-orbit { margin-top: 2.5rem; }
}
.emblem-orbit .orbit-mark {
  animation: emblemFloat 6s ease-in-out infinite;
}
.emblem-orbit .orbit-mark img {
  width: 47%;
  height: auto;
  filter: drop-shadow(0 0 32px rgba(255, 0, 73, 0.55));
  animation: spinCCW 26s linear infinite;
  transform-origin: 50% 50%;
}

.btn-white > .wp-element-button {
  background: #fff !important;
  color: #111111 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 1rem 2.25rem !important;
  font-weight: 700 !important;
}
.trust-grid p { font-weight: 500; }

.logo-row { gap: 0.85rem; }
.logo-card {
  margin: 0;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.9rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Exhibitions marquee (right → left, seamless) ────────────── */
.zven-marquee {
  --zven-marquee-duration: 60s;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  /* Fade the ends so items enter/leave softly instead of popping. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.zven-marquee__row { overflow: hidden; }
.zven-marquee__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: zven-marquee-rtl var(--zven-marquee-duration) linear infinite;
  will-change: transform;
}
.zven-marquee:hover .zven-marquee__track { animation-play-state: paused; }
/* The track holds the list twice. One copy measures 50% of the track MINUS half
   a gap (the seam gap is shared between the copies), so -50% alone lands 8px
   short and the loop visibly jumps. Subtracting half the gap lands it exactly. */
@keyframes zven-marquee-rtl {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - 0.5rem), 0, 0); }
}
.zven-marquee__item {
  flex: none;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.9rem 1.6rem;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.55);
  transition: color .25s ease, border-color .25s ease;
}
.zven-marquee__item:hover { color: #fff; border-color: rgba(255, 0, 73, 0.35); }

@media (prefers-reduced-motion: reduce) {
  /* Like the hero emblem, this is a deliberate always-on brand animation.
     The global reduced-motion rule above collapses every duration to 0.01ms,
     so restate it here. Hovering pauses the track for anyone who needs it. */
  .zven-marquee__track {
    animation: zven-marquee-rtl var(--zven-marquee-duration) linear infinite !important;
  }
}

.reel-band {
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255, 0, 73, 0.12), transparent 60%),
    #161616;
}

/* ── Project thumbnails ──────────────────────────────────────── */
/* Placeholder art until real project photos are added. Swap the background
   for an <img>/Cover block per card when photography is supplied. */
.project-thumb {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 15%, rgba(255, 0, 73, 0.35), transparent 55%),
    linear-gradient(135deg, #2a0010 0%, #1a1a1a 70%);
  display: flex;
  align-items: flex-end;
}
.project-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
}
.project-thumb > * { position: relative; z-index: 1; }

/* Real project photography */
.project-photo { margin: 0 0 1rem !important; border-radius: 8px; overflow: hidden; }
.project-photo img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .5s ease;
}
.project-card:hover .project-photo img { transform: scale(1.05); }
.project-card:hover .project-thumb { filter: brightness(1.12); }
.project-thumb, .project-card .project-thumb { transition: filter .3s ease; }

/* ── Projects grid (auto-filled from the Projects post type) ─── */
/* auto-FIT (not auto-fill) so 3 projects stretch to fill the row evenly
   instead of leaving an empty phantom column. */
.zven-projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  max-width: 1200px;
  margin-inline: auto;
}
.zven-project-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.zven-project-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 0, 73, .3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(255, 0, 73, .08);
}
.zven-project-card__media {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: .35rem;
}
.zven-project-card__media img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform .5s ease;
}
.zven-project-card:hover .zven-project-card__media img { transform: scale(1.05); }
.zven-project-card__placeholder {
  display: block;
  height: 200px;
  background:
    radial-gradient(circle at 25% 15%, rgba(255, 0, 73, .35), transparent 55%),
    linear-gradient(135deg, #2a0010 0%, #1a1a1a 70%);
}
.zven-project-card__title {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.zven-project-card__desc {
  display: block;
  font-size: .88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .45);
  flex: 1;
}
/* Footer meta sits at the card bottom so all cards line up. */
.zven-project-card .stat-label:last-child { margin-top: auto; }

/* Spec strip on a project page */
.zven-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5rem auto 0;
  max-width: 1200px;
}
.zven-specs > div { background: #1a1a1a; padding: 1rem 1.25rem; }
.zven-specs dt {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .4);
  margin-bottom: .3rem;
}
.zven-specs dd { margin: 0; font-weight: 700; font-size: .95rem; }
.zven-project-hero img { border-radius: 8px; width: 100%; object-fit: cover; max-height: 520px; }

/* ── Showreel player ─────────────────────────────────────────── */
.zven-reel {
  position: relative;
  margin-top: 1.75rem;
  border-radius: 8px;
  overflow: hidden;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  aspect-ratio: 16 / 9;
  max-width: 640px;
}
.zven-reel__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0d0d0d;
}
/* Graceful branded panel when no videos are uploaded yet. */
.zven-reel--empty {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 0, 73, 0.18), transparent 65%),
    linear-gradient(135deg, #2a0010 0%, #161616 70%);
}
.zven-reel__controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75));
}
.zven-reel__btn {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  color: #fff;
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .78rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.4;
  transition: background .2s ease, border-color .2s ease;
}
.zven-reel__btn:hover { background: var(--zven-grad); border-color: transparent; }
.zven-reel__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.zven-reel__count {
  margin-left: auto;
  font-size: .72rem;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .55);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) { .zven-reel { max-width: 100%; } }

/* ── Stand Calculator ────────────────────────────────────────── */
.zven-calculator { max-width: 860px; margin: 0 auto; }
.zc-wrap { background: #1a1a1a; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 2rem; }
.zc-body { margin-top: 1.5rem; }
.zc-center { text-align: center; display: block; }
.zc-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.15; text-align: center; margin: .5rem 0 0; }
.zc-sub { text-align: center; color: rgba(255,255,255,.55); margin: .75rem 0 1.75rem; font-size: .95rem; }
.zc-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .22em; color: #ff3366; font-weight: 600; margin: 1.75rem 0 .75rem; }
.zc-hint { color: rgba(255,255,255,.4); letter-spacing: normal; text-transform: none; }

/* progress */
.zc-progress { display: flex; align-items: center; gap: .4rem; }
.zc-step { display: flex; align-items: center; gap: .5rem; }
.zc-dot { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.5); flex: none; }
.zc-step.active .zc-dot { border-color: #ff0049; color: #fff; box-shadow: 0 0 0 3px rgba(255,0,73,.15); }
.zc-step.done .zc-dot { background: var(--zven-grad); border-color: transparent; color: #fff; }
.zc-steplabel { font-size: .78rem; color: rgba(255,255,255,.5); white-space: nowrap; }
.zc-step.active .zc-steplabel { color: #fff; font-weight: 600; }
.zc-line { flex: 1; height: 1px; background: rgba(255,255,255,.15); min-width: 12px; }
.zc-line.done { background: var(--zven-grad); }
@media (max-width: 700px) { .zc-steplabel { display: none; } .zc-wrap { padding: 1.25rem; } }

/* cards */
/* 4 stand types read best as a balanced 2x2 — auto-fit left a 3+1 orphan row. */
.zc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
@media (max-width: 560px) { .zc-grid { grid-template-columns: 1fr; } }
.zc-card { position: relative; display: flex; flex-direction: column; gap: .3rem; text-align: left; cursor: pointer;
  background: #222; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 1.25rem; color: #fff;
  transition: border-color .2s ease, transform .2s ease; }
.zc-card:hover { border-color: rgba(255,0,73,.5); transform: translateY(-2px); }
.zc-card.selected { border-color: #ff0049; background: rgba(255,0,73,.07); }
.zc-card-title { font-weight: 700; font-size: 1rem; }
.zc-card-desc { font-size: .85rem; color: rgba(255,255,255,.5); }
.zc-card-meta { font-size: .75rem; color: rgba(255,255,255,.35); margin-top: .35rem; }
.zc-check { position: absolute; top: .75rem; right: .75rem; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--zven-grad); color: #fff; font-size: .8rem; display: flex; align-items: center; justify-content: center; }

/* dimensions */
.zc-recap { display: flex; flex-direction: column; gap: .2rem; background: #222; border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: .5rem; }
.zc-recap span { font-size: .8rem; color: rgba(255,255,255,.45); }
.zc-dims { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.zc-dims label { display: flex; flex-direction: column; gap: .4rem; font-size: .8rem; color: rgba(255,255,255,.55); }
.zc-dims input { width: 120px; background: #222; border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  color: #fff; font-size: 1.4rem; font-weight: 700; text-align: center; padding: .6rem; }
.zc-x { font-size: 1.2rem; color: rgba(255,255,255,.4); padding-bottom: .7rem; }
.zc-area { font-size: 1.1rem; padding-bottom: .6rem; color: rgba(255,255,255,.5); }
.zc-area b { font-size: 1.8rem; font-weight: 800; }
.zc-warn { color: #ff6b8a; font-size: .85rem; margin-top: .6rem; }

/* finish + sides */
.zc-finish { display: flex; flex-direction: column; gap: .6rem; }
.zc-fin { text-align: left; cursor: pointer; background: #222; border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 1rem 1.25rem; color: #fff; display: flex; flex-direction: column; gap: .25rem; }
.zc-fin.selected { border-color: #ff0049; background: rgba(255,0,73,.08); }
.zc-fin-t { font-weight: 700; }
.zc-fin-t em { color: #ff3366; font-style: normal; font-size: .75rem; float: right; }
.zc-fin-d { font-size: .85rem; color: rgba(255,255,255,.5); }
.zc-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; }
.zc-side { cursor: pointer; background: #222; border: 1px solid rgba(255,255,255,.1); border-radius: 8px;
  padding: .85rem 1rem; color: #fff; display: flex; justify-content: space-between; align-items: center; font-size: .9rem; }
.zc-side em { font-style: normal; font-size: .68rem; letter-spacing: .1em; color: rgba(255,255,255,.35); }
.zc-side.open { border-color: rgba(255,0,73,.55); }
.zc-side.open em { color: #ff3366; }

/* form */
.zc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; align-items: start; }
.zc-form label { display: flex; flex-direction: column; gap: .45rem; font-size: .85rem;
  color: rgba(255,255,255,.6); min-width: 0; }
/* Keep the label text and its required asterisk on ONE line — as separate flex
   items they stack, which makes every label a different height and knocks the
   whole grid out of alignment. */
.zc-lbl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.zc-lbl b { color: #ff3366; }
.zc-span2 { grid-column: 1 / -1; }
.zc-when { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; align-items: start; }
.zc-form input, .zc-form select, #zc-notes {
  background: #222; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #fff;
  padding: 0 .9rem; height: 3rem; font-size: .95rem; font-family: inherit; width: 100%;
  box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.zc-form select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.5) 50%), linear-gradient(135deg, rgba(255,255,255,.5) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.zc-form input::placeholder, #zc-notes::placeholder { color: rgba(255,255,255,.3); }
.zc-form input:focus, .zc-form select:focus, #zc-notes:focus { outline: 2px solid rgba(255,0,73,.6); outline-offset: 1px; }
/* Reserve the helper-text line so the neighbouring field never shifts up. */
.zc-form small { color: rgba(255,255,255,.35); font-size: .75rem; min-height: 1.05rem; line-height: 1.3; }
#zc-notes { height: auto; padding: .8rem .9rem; margin-top: .5rem; }
@media (max-width: 640px) {
  .zc-form, .zc-when { grid-template-columns: 1fr; }
}

/* nav + result */
.zc-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.zc-nav.center { justify-content: center; }
.zc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; cursor: pointer;
  background: var(--zven-grad); color: #fff; border: none; border-radius: 999px; padding: .9rem 1.9rem;
  font-weight: 700; font-size: .95rem; font-family: inherit; text-decoration: none; transition: transform .2s ease, opacity .2s ease; }
.zc-btn:hover { transform: translateY(-2px); }
.zc-btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.zc-btn.ghost { background: transparent; border: 1px solid rgba(255,255,255,.25); font-weight: 600; }
.zc-note { background: rgba(255,0,73,.06); border: 1px solid rgba(255,0,73,.16); border-radius: 8px;
  padding: .9rem 1.1rem; font-size: .85rem; color: rgba(255,255,255,.6); margin-top: 1.5rem; }
.zc-fine { font-size: .78rem; color: rgba(255,255,255,.35); text-align: center; margin-top: 1rem; }
.zc-result { background: #222; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 2rem; text-align: center; margin-top: 1.5rem; }
.zc-reslabel { font-size: .72rem; text-transform: uppercase; letter-spacing: .22em; color: rgba(255,255,255,.4); }
.zc-resmain { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 800; margin: .6rem 0 .3rem; }
.zc-ressub { color: rgba(255,255,255,.5); font-size: .9rem; }
.zc-result hr { border: none; border-top: 1px solid rgba(255,255,255,.1); margin: 1.5rem 0 1rem; }
.zc-next-steps { margin-top: 2rem; }
.zc-next-steps ol { color: rgba(255,255,255,.6); font-size: .9rem; line-height: 1.9; padding-left: 1.2rem; }

/* ── Floating WhatsApp button ────────────────────────────────── */
.zven-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 999;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--zven-grad);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(255, 0, 73, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.zven-fab svg { width: 1.9rem; height: 1.9rem; }
.zven-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 30px rgba(255, 0, 73, 0.45);
}
.zven-fab:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── Footer ──────────────────────────────────────────────────── */
.wp-site-blocks > footer a { color: inherit; text-decoration: none; }
.wp-site-blocks > footer a:hover { color: #fff; text-decoration: none; }

/* Fading hairline rules that separate the footer's three bands. */
.footer-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  margin: 0 0 4rem;
  opacity: 1;
}

.footer-cta { align-items: flex-end; gap: 1.5rem; margin-bottom: 4rem; }
.footer-cta .eyebrow { margin: 0 0 1rem; }
.footer-cta__title { margin: 0; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; color: #fff; }
.footer-cta .wp-block-buttons { flex-shrink: 0; margin: 0; }

.footer-grid { gap: 3rem !important; margin-bottom: 3.5rem; }
.footer-logo { margin: 0 0 1.25rem; }
.footer-blurb {
  max-width: 20rem;
  margin: 0 0 1.25rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.4);
}
.footer-grid .region-tags { margin: 0; color: rgba(255, 255, 255, 0.2); }

.footer-colhead {
  margin: 0 0 1.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}

.footer-nav,
.footer-covers { margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.footer-nav li,
.footer-covers li { margin: 0 0 0.625rem; }

/* Small gradient dash that extends on hover. */
.footer-nav a { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.45); transition: color .2s ease; }
.footer-nav a::before {
  content: "";
  width: 4px;
  height: 1px;
  flex: none;
  background: var(--zven-grad);
  transition: width .2s ease;
}
.footer-nav a:hover { color: #fff; }
.footer-nav a:hover::before { width: 12px; }

.footer-covers li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
}
.footer-covers li::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: none;
  border-radius: 50%;
  background: rgba(235, 134, 73, 0.5);
}

/* Contact rows: the icon badge is decorative CSS so the text stays a plain,
   fully editable paragraph block. */
.contact-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.45);
}
.contact-line::before {
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 8px;
  background-color: rgba(255, 0, 73, 0.08);
  border: 1px solid rgba(255, 0, 73, 0.15);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.contact-mail::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff6a8d' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2 4l6 5 6-5M2 4h12v9H2V4z'/%3E%3C/svg%3E");
}
.contact-wa::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ff6a8d' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M3 2h2l1 4-1.5 1.5c1 2 2.5 3.5 4.5 4.5L10.5 10l4 1v2c0 .5-.5 1-1 1C5 14 2 5 2 3c0-.5.5-1 1-1z'/%3E%3C/svg%3E");
}
.contact-address {
  margin: 0 0 1.5rem;
  padding-left: 2.5rem;
  font-size: 0.75rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.25);
}

.footer-social { gap: 0.5rem !important; margin: 0; }
.footer-social .wp-social-link {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color .2s ease, color .2s ease;
}
.footer-social .wp-social-link a { color: rgba(255, 255, 255, 0.35); padding: 0; }
.footer-social .wp-social-link:hover { border-color: rgba(255, 0, 73, 0.4); }
.footer-social .wp-social-link:hover a { color: #fff; }

.footer-bottom { align-items: center; gap: 1rem; }
.footer-copy,
.footer-legal p { margin: 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.2); }
.footer-legal { gap: 1.5rem; align-items: center; }
.footer-legal a:hover { color: rgba(255, 255, 255, 0.5); }
.footer-divider { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.1); padding: 0; }
.footer-mark { letter-spacing: 0.1em; color: rgba(255, 0, 73, 0.4) !important; }

/* Two-up at tablet, single column on phones — matches the original's
   1 / 2 / 4 column progression. */
@media (max-width: 1080px) {
  .footer-grid { flex-wrap: wrap !important; }
  .footer-grid > .wp-block-column { flex-basis: calc(50% - 1.5rem) !important; flex-grow: 0 !important; }
}
@media (max-width: 781px) {
  .footer-grid > .wp-block-column { flex-basis: 100% !important; }
  .footer-cta { align-items: flex-start; }
  /* Core's generated layout class also sets justify-content, so this needs
     !important to win once the bar wraps to two rows. */
  .footer-bottom { justify-content: center !important; text-align: center; }
}

/* ── Search form ─────────────────────────────────────────────── */
.wp-block-search__input {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  padding: 0.75rem 1rem;
}
.wp-block-search__input::placeholder { color: rgba(255, 255, 255, 0.35); }
.wp-block-search__button {
  background: var(--zven-grad);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

/* Mobile: keep the 4 stats as a compact 2x2 instead of 4 tall full-width rows.
   The block itself opts out of core's mobile stacking (is-not-stacked-on-mobile),
   so we only need to set the wrap + widths here. */
@media (max-width: 781px) {
  .wp-block-columns.stats-row { flex-wrap: wrap !important; gap: 2rem 0 !important; }
  /* NOTE: a flat 50% rounds UP on odd viewport widths (375px -> 188px each =
     376px) and wraps to one-per-row. Shave a pixel so the pair always fits. */
  .wp-block-columns.stats-row > .wp-block-column {
    flex-basis: calc(50% - 1px) !important;
    max-width: calc(50% - 1px) !important;
    flex-grow: 0 !important;
    border-left: 0 !important;
  }
  /* Divider only between the pair, never at the start of a row. */
  .wp-block-columns.stats-row > .wp-block-column:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
}