/* ---------- shared ---------- */
.kicker {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.kicker.amber { color: var(--amber); }
.kicker.center { text-align: center; }
/* Contrast fix: default blue kicker text is unreadable on the dark .banner/.hero
   backgrounds used for every page's top hero section (~2.4:1 contrast, fails WCAG
   AA). Switch to white there; :not(.amber) leaves the already-correct amber
   variant (used on dark final-CTA sections) untouched. */
.banner .kicker:not(.amber), .hero .kicker:not(.amber) { color: var(--white); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  border: none;
  box-shadow: var(--shadow-signature);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
.btn:active { transform: translate(0, 0); box-shadow: var(--shadow-sm); transition-duration: var(--dur-instant); }
.btn.btn-primary { background: var(--blue); color: var(--white); }
.btn.on-dark:hover { background: var(--white); color: var(--black); box-shadow: var(--shadow-signature-amber); }
.btn.btn-secondary { background: transparent; color: var(--black); border: 2px solid var(--black); box-shadow: none; }
.btn.btn-secondary:hover { background: var(--black); color: var(--white); }
.btn.btn-secondary:active { transform: translate(0, 0); }

.link-arrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--black);
  border-bottom: 2px solid var(--blue);
  padding-bottom: 2px;
  display: inline-flex;
  gap: 6px;
  transition: color var(--dur-fast) var(--ease-out);
}
.link-arrow:hover { color: var(--blue); }
.link-arrow.on-dark { color: var(--white); border-color: var(--amber); }

/* ---------- header / nav ---------- */
.site-header {
  --header-pad: 20px;
  background: rgba(11, 16, 32, 0.82); /* var(--ink-900) at reduced opacity */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--white-08);
  padding: var(--header-pad) 0;
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  transition: padding var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.site-header.scrolled {
  --header-pad: 12px;
  background: rgba(11, 16, 32, 0.96);
  border-bottom-color: var(--white-15);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; }

/* ---------- logo ---------- */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  transition: transform var(--dur-base) var(--ease-out);
}
.site-header.scrolled .logo { transform: scale(0.94); transform-origin: left center; }
.logo-mark { width: 30px; height: 30px; flex-shrink: 0; }
.logo-word { font-family: var(--font-heading); font-weight: 700; font-size: 19px; white-space: nowrap; }
.logo-word-primary { color: var(--white); }
.logo-word-accent { color: var(--slate-400); font-weight: 500; }

/* ---------- primary nav ---------- */
.nav-row { display: flex; align-items: center; gap: 32px; }
.main-nav ul { display: flex; gap: 32px; }
.main-nav li { position: relative; }
.main-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--blue);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after { transform: scaleX(1); }
/* Active page: the indicator stays on permanently, in amber, so "hover"
   (temporary, blue) and "you are here" (permanent, amber) never look the
   same and are never confused for each other. */
.main-nav a.is-active::after {
  transform: scaleX(1);
  background: var(--amber);
}
.main-nav a.is-active { color: var(--white); }

/* ---------- mobile toggle (hamburger) ---------- */
.hamburger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.hamburger:hover { background: var(--white-08); }
.hamburger span {
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- mobile nav panel ---------- */
/* A full-screen takeover, not an in-flow accordion push-down. It sits
   ABOVE the sticky header in stacking order (--z-mobile-nav > --z-header)
   and carries its own logo + close row, so it fully replaces the header
   while open instead of relying on the real header peeking through a gap
   underneath it. Three fixed rows (topbar / scrollable body / footer) via
   flex, so the CTA never has to fight the list for space. */
.mobile-nav[hidden] { display: none !important; }
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-mobile-nav);
  background: linear-gradient(180deg, var(--ink-950) 0%, var(--black) 100%);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mobile-nav.is-open { opacity: 1; transform: translateY(0); }
body.mobile-nav-active { overflow: hidden; }

.mobile-nav-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  border-bottom: 1px solid var(--white-08);
}
.mobile-nav-close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--white);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mobile-nav-close:hover, .mobile-nav-close:focus-visible { background: var(--white-08); color: var(--amber); }
.mobile-nav-close .icon-svg { width: 22px; height: 22px; }

.mobile-nav-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 24px var(--gutter) 8px;
}

.mobile-nav-footer {
  flex: 0 0 auto;
  padding: 20px var(--gutter) max(20px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--white-08);
}

.mobile-nav-list { display: flex; flex-direction: column; gap: 4px; max-width: 480px; width: 100%; margin: 0 auto; }
.mobile-nav-item {
  border-bottom: 1px solid var(--white-08);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.mobile-nav.is-open .mobile-nav-item { opacity: 1; transform: translateY(0); }
.mobile-nav-item:nth-child(1) { transition-delay: 40ms; }
.mobile-nav-item:nth-child(2) { transition-delay: 80ms; }
.mobile-nav-item:nth-child(3) { transition-delay: 120ms; }
.mobile-nav-item:nth-child(4) { transition-delay: 160ms; }
.mobile-nav-item:nth-child(5) { transition-delay: 200ms; }
.mobile-nav-item:nth-child(6) { transition-delay: 240ms; }

.mobile-nav-row { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav-link {
  display: block;
  padding: 16px 0;
  color: var(--white);
  font-size: 19px;
  font-weight: 600;
  font-family: var(--font-heading);
  transition: color var(--dur-fast) var(--ease-out);
}
.mobile-nav-row .mobile-nav-link { flex: 1 1 auto; padding-right: 12px; }
.mobile-nav-link:hover, .mobile-nav-link:focus-visible { color: var(--blue); }
.mobile-nav-link.is-active { color: var(--amber); }

.mobile-nav-expand {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--white-60);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mobile-nav-expand:hover, .mobile-nav-expand:focus-visible { background: var(--white-08); color: var(--amber); }
.mobile-nav-expand .icon-svg { width: 20px; height: 20px; transition: transform var(--dur-fast) var(--ease-out); }
.mobile-nav-expand[aria-expanded="true"] .icon-svg { transform: rotate(180deg); color: var(--amber); }

/* Pure-CSS animated collapse: visibility is delayed on the way out (stays
   visible until max-height finishes collapsing) and instant on the way in,
   so collapsed sub-items are never keyboard-focusable or screen-reader
   reachable, without needing a JS transitionend listener. */
.mobile-nav-sublist {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  padding-left: 18px;
  margin-left: 4px;
  border-left: 2px solid var(--white-08);
  transition: max-height var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.mobile-nav-item.is-expanded .mobile-nav-sublist {
  max-height: 480px;
  visibility: visible;
  transition: max-height var(--dur-base) var(--ease-out), visibility 0s linear 0s;
}
.mobile-nav-sublist li:not(:last-child) { border-bottom: 1px solid var(--white-08); }
.mobile-nav-sublink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 8px;
  color: var(--white-60);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-out);
}
.mobile-nav-sublink:hover, .mobile-nav-sublink:focus-visible { color: var(--amber); }
.mobile-nav-sublink-icon { display: flex; flex: 0 0 auto; color: var(--slate-400); }
.mobile-nav-sublink-icon .icon-svg { width: 18px; height: 18px; }
/* min-width:0 lets this flex item shrink below its text's natural width —
   without it, a long label like "Web Design & Development" can force the
   row (and the panel) wider than the viewport instead of wrapping. */
.mobile-nav-sublink-text { min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; }

.mobile-nav-cta {
  display: flex;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out) 280ms, transform var(--dur-base) var(--ease-out) 280ms;
}
.mobile-nav.is-open .mobile-nav-cta { opacity: 1; transform: translateY(0); }


/* ---------- generic section rhythm ---------- */
section { padding: var(--section-pad) 0; }

/* ---------- hero ---------- */
.hero { background: var(--black); padding: 140px 0; }
.hero .wrap { display: flex; align-items: center; gap: 64px; }
.hero-text { flex: 1 1 55%; min-width: 0; }
.hero h1 { color: var(--white); font-size: var(--fs-h1); margin-bottom: 20px; }
.hero h1 .accent { color: var(--amber); }
.hero p { color: var(--white-60); font-size: var(--fs-body-lg); max-width: 520px; margin-bottom: 32px; }

/* Replaces the previous <span style="color:#FFBF00;"><h1>...</h1></span>
   pattern used on about/web-design/content-marketing/social-media/contact —
   a <span> (inline content) can't validly contain an <h1> (not phrasing
   content). Same visual result, valid markup: the color now lives on a
   class on the heading itself. */
.hero-title-accent { color: var(--amber); }
.hero-image { flex: 1 1 40%; min-width: 0; }
.hero-image img { width: 100%; border-radius: var(--radius-md); box-shadow: 8px 8px 0 var(--amber); }
.cta-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ---------- about teaser ---------- */
.about .wrap { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
/* Desktop-only reversed layout (alternating service-detail sections on services.php).
   Scoped to >1024px so it never fights the mobile/tablet stacking rule below. */
@media (min-width: 1025px) {
  .about .wrap.wrap--reverse { flex-direction: row-reverse; }
}
.about-image { flex: 0 0 42%; }
.about-image img { width: 100%; border-radius: var(--radius-md); box-shadow: 8px 8px 0 var(--black); }
.about-text { flex: 0 0 50%; }
.about-text h2 { font-size: var(--fs-h2); margin-bottom: 20px; }
.about-text p { font-size: var(--fs-body-lg); margin-bottom: 32px; max-width: 520px; }

/* ---------- services ---------- */
.services .intro-row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; margin-bottom: 56px; flex-wrap: wrap;
}
.services h2 { font-size: var(--fs-h2); white-space: pre-line; }
.grid { display: flex; flex-wrap: wrap; gap: 32px; }

.card {
  background: var(--white);
  border: 2px solid var(--amber);
  border-radius: var(--radius-md);
  padding: 40px;
  box-shadow: 6px 6px 0 var(--amber);
  flex: 1 1 calc(33.333% - 22px);
  max-width: calc(33.333% - 22px);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.card:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--black); border-color: var(--blue); }
.card .icon { font-size: 28px; color: var(--blue); margin-bottom: 12px; display: block; }
.card h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.card p { font-size: var(--fs-small); color: var(--black-60); margin-bottom: 16px; }

/* Stage 3: alternate accent modifier so a row of otherwise-identical cards
   (the services carousel) reads as a considered system rather than one
   card repeated six times — same shape/size/hover mechanic throughout,
   just half amber and half blue by default. Never changes card width, so
   the carousel's scroll-snap math (main.js) is unaffected. */
.card.card--accent-blue { border-color: var(--blue); box-shadow: 6px 6px 0 var(--blue); }
.card.card--accent-blue:hover { border-color: var(--amber); box-shadow: 10px 10px 0 var(--black); }

/* ---------- team / CTA banners (dark, centered) ---------- */
.banner { background: var(--black); text-align: center; }
.banner h2 { color: var(--white); font-size: var(--fs-h2); white-space: pre-line; margin-bottom: 24px; }
.banner p { color: var(--white-60); font-size: var(--fs-body-lg); max-width: 600px; margin: 0 auto 32px; }

/* ---------- testimonials ---------- */
.testimonials { text-align: center; }
.testimonials .intro { margin-bottom: 56px; }
.testimonials h2 { font-size: var(--fs-h2); }
.testimonials .grid { text-align: left; }
.t-card {
  background: var(--white); border: 2px solid var(--black); border-radius: var(--radius-md);
  padding: 40px; box-shadow: 6px 6px 0 var(--black); flex: 1 1 calc(33.333% - 22px);
}
.t-card .quote-icon { color: var(--amber); font-size: 28px; margin-bottom: 12px; display: block; }
.t-card p.quote { font-size: var(--fs-body); margin-bottom: 20px; }
.t-card .person { display: flex; align-items: center; gap: 12px; }
.t-card .avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--black); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; flex-shrink: 0;
}
.t-card .name { font-weight: 600; font-size: 15px; }
.t-card .role { font-size: 13px; color: var(--black-60); }

/* ---------- clients ---------- */
.clients { text-align: center; }
.logo-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 48px; }
.logo-row span { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--black-60); }

/* ---------- footer ---------- */
.site-footer { background: var(--black); padding: 80px 0 40px; color: var(--white); }
.footer-top { display: flex; flex-wrap: wrap; gap: 40px; margin-bottom: 40px; }
.footer-brand { flex: 0 0 30%; }
.footer-brand .logo { margin-bottom: 16px; display: block; }
.footer-brand p { color: var(--white-60); font-size: var(--fs-small); }
.footer-col { flex: 0 0 20%; }
.footer-col h4 { font-family: var(--font-heading); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--white-60); font-size: var(--fs-small); transition: color var(--dur-fast) ease; }
.footer-col a:hover { color: var(--blue); }

.newsletter { flex: 1 1 26%; }
.newsletter h4 { font-family: var(--font-heading); font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.newsletter-form { display: flex; gap: 12px; }
.newsletter-form input {
  flex: 1; background: transparent; border: 1px solid var(--white-15); border-radius: var(--radius-sm);
  padding: 12px 16px; color: var(--white); font-family: var(--font-body); font-size: 14px;
}
.newsletter-form input::placeholder { color: var(--white-60); }
.newsletter-form button {
  background: var(--amber); color: var(--black); border: none; border-radius: var(--radius-sm);
  padding: 12px 20px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.newsletter-form button:hover { background: var(--white); }

.footer-divider { border: none; border-top: 1px solid var(--white-15); margin-bottom: 24px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-bottom p { color: var(--white-60); font-size: 14px; }
.socials { display: flex; gap: 12px; }
.socials a {
  width: 36px; height: 36px; border: 1px solid var(--white-15); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 14px;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.socials a:hover { background: var(--blue); border-color: var(--blue); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .hamburger { display: flex; }
  .hero .wrap, .about .wrap { flex-direction: column; }
  .hero-text, .about-text, .hero-image, .about-image { flex: 0 0 100%; width: 100%; }
  .about .wrap { flex-direction: column-reverse; }
  .hero { padding: var(--section-pad-tablet) 0; }
  section { padding: var(--section-pad-tablet) 0; }
  .card, .t-card { flex: 1 1 calc(50% - 16px); max-width: calc(50% - 16px); }
  .footer-brand, .footer-col, .newsletter { flex: 1 1 45%; }
}

@media (max-width: 767px) {
  .hero { padding: var(--section-pad-mobile) 0; }
  section { padding: var(--section-pad-mobile) 0; }
  .card, .t-card { flex: 1 1 100%; }
  .card { padding: 28px; }
  .services .intro-row { align-items: flex-start; }
  .footer-brand, .footer-col, .newsletter { flex: 1 1 100%; }
  .newsletter-form { flex-direction: column; }
}
/* Force hide mobile nav on desktop, overriding the base flex display.
   NOTE: this must start at 1025px (not 768px) — the hamburger/mobile-nav
   are the ONLY nav trigger from 0-1024px, since .main-nav is hidden in
   that same range. Starting this at 768px previously hid the hamburger
   while .main-nav was also hidden, leaving 768-1024px with no visible
   navigation at all. */
@media (min-width: 1025px) {
    .mobile-nav {
        display: none !important;
    }
    
    .hamburger {
        display: none !important;
    }
}
/* Hide the 'Start a Project' button in the top header whenever the
   hamburger nav is in control (same 0–1024px range as .main-nav /
   .hamburger above). Keeps the mobile/tablet header down to just the logo
   and the menu toggle — the CTA still exists, just inside the mobile-nav
   panel below — instead of duplicating it in the header row at 768–1024px. */
@media (max-width: 1024px) {
    .nav-row .btn {
        display: none !important;
    }
}
/* Logo styling now lives in the main "header / nav" block above (mark +
   two-tone wordmark). .logo-img is kept, inert, as a ready-made fallback:
   if a real logo.png is uploaded later and swapped back into an <img
   class="logo-img"> in navigation.php, it will size correctly with no
   further CSS changes needed. */
.logo-img {
    height: 40px;
    max-width: none;
    width: auto;
    display: block;
    object-fit: contain;
}


/* =========================================================
   $10K+ HERO SECTION ATMOSPHERIC BACKGROUND
   ========================================================= */

.hero {
    position: relative;
    overflow: hidden;
    /* Stage 3: the fine grid used to be redrawn on canvas every single
       frame despite never changing — moved here as a static, effectively-
       free CSS background layer instead. main.js no longer draws a grid. */
    background:
        linear-gradient(to right, var(--white-08) 1px, transparent 1px),
        linear-gradient(to bottom, var(--white-08) 1px, transparent 1px),
        var(--black);
    background-size: 56px 56px, 56px 56px, auto;
}

/* Multi-layered radial gradient pools for ambient depth */
.hero::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(circle, rgba(var(--blue-rgb), 0.18) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -10%;
    width: 70%;
    height: 90%;
    background: radial-gradient(circle, rgba(var(--amber-rgb), 0.08) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 1;
}

/* Ensure content stays sharply on top */
.hero .wrap {
    position: relative;
    z-index: 3;
}

/* Interactive Canvas Layer */
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* ---------- hero visual panel (Stage 3) ----------
   Replaces the missing hero_data_showcase.png with a small, purely
   decorative abstract data panel — no real numbers or claims, just visual
   texture. aria-hidden in the markup; swap for a real screenshot later
   with no CSS changes needed. */
.hero-visual-panel {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.7), rgba(11, 16, 32, 0.85));
  border: 1px solid var(--white-15);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg-on-dark);
}
.hero-visual-panel-head { display: flex; align-items: center; gap: 6px; margin-bottom: 24px; }
.hero-visual-panel-head span:not(.hero-visual-panel-label) { width: 8px; height: 8px; border-radius: 50%; background: var(--white-15); }
.hero-visual-panel-head span:not(.hero-visual-panel-label):nth-child(3) { background: var(--amber); }
.hero-visual-panel-label { margin-left: auto; font-family: var(--font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-400); }
.hero-visual-chart { display: flex; align-items: flex-end; gap: 10px; height: 120px; margin-bottom: 20px; }
.hvc-bar { flex: 1; background: rgba(var(--blue-rgb), 0.4); border-radius: 4px 4px 0 0; transition: height 1.1s var(--ease-out) 500ms; }
.hvc-bar--accent { background: var(--amber); }
.hero-visual-line { display: block; width: 100%; height: 60px; margin-bottom: 20px; }
.hero-visual-line polyline { fill: none; stroke: var(--amber); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320; transition: stroke-dashoffset 1.3s var(--ease-out) 700ms; }
.hero-visual-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-visual-tags span { font-family: var(--font-heading); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--slate-400); border: 1px solid var(--white-15); border-radius: 999px; padding: 5px 10px; }

/* ---------- hero entrance motion (Stage 3) ----------
   A page-load reveal (text stagger, panel settle-in, bars grow, line
   draws), distinct from the scroll-triggered .reveal system since the
   hero is already in view on load — main.js adds .is-loaded to .hero via
   a double rAF shortly after paint. Follows the exact same no-js safety
   pattern as .reveal/.stagger elsewhere: hidden only once JS has removed
   .no-js from <html>, so nothing depends on JS to simply be visible. */
.hero-text > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-snap), transform var(--dur-slow) var(--ease-snap);
}
.hero.is-loaded .hero-text > * { opacity: 1; transform: none; }
.no-js .hero-text > * { opacity: 1; transform: none; }
.hero-text > *:nth-child(1) { transition-delay: 0ms; }
.hero-text > *:nth-child(2) { transition-delay: 90ms; }
.hero-text > *:nth-child(3) { transition-delay: 180ms; }
.hero-text > *:nth-child(4) { transition-delay: 270ms; }

.hero .hero-visual-panel {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity var(--dur-slower) var(--ease-out) 200ms, transform var(--dur-slower) var(--ease-out) 200ms;
}
.hero.is-loaded .hero-visual-panel { opacity: 1; transform: none; }
.no-js .hero-visual-panel { opacity: 1; transform: none; }

.hvc-bar { height: 0; }
.hero.is-loaded .hvc-bar { height: var(--h); }
.no-js .hvc-bar { height: var(--h); }

.hero-visual-line polyline { stroke-dashoffset: 320; }
.hero.is-loaded .hero-visual-line polyline { stroke-dashoffset: 0; }
.no-js .hero-visual-line polyline { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .hvc-bar, .hero-visual-line polyline { transition: none !important; }
}




/* =========================================================
   $10K+ FOOTER ATMOSPHERE & MICRO-INTERACTIONS
   ========================================================= */

.site-footer {
    position: relative;
    background: var(--black); /* was a hardcoded off-brand navy (#020718) */
    overflow: hidden;
}

/* Ambient breathing background glow */
.site-footer::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 350px;
    background: radial-gradient(circle, rgba(var(--blue-rgb), 0.18) 0%, rgba(0, 0, 0, 0) 70%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
    animation: footerPulse 7s ease-in-out infinite alternate;
}

@keyframes footerPulse {
    0% {
        transform: translateX(-50%) scale(0.95);
        opacity: 0.4;
    }
    100% {
        transform: translateX(-50%) scale(1.25);
        opacity: 0.8;
    }
}

/* Ensure footer content sits above the ambient glow */
.site-footer > * {
    position: relative;
    z-index: 2;
}

/* Smooth navigation links shift on hover */
.site-footer a {
    transition: color 0.2s ease, transform 0.2s ease;
}

.site-footer .footer-col a:hover {
    color: var(--amber) !important;
    transform: translateX(4px);
}

/* Social icons lift-and-glow effect (in, ig, X) */
.site-footer .socials a {
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.site-footer .socials a:hover {
    transform: translateY(-5px) scale(1.08) !important;
    color: var(--amber) !important;
    box-shadow: 0 10px 20px rgba(var(--amber-rgb), 0.15);
}

/* Newsletter input focus glow */
.site-footer input[type="email"] {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer input[type="email"]:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 15px rgba(var(--blue-rgb), 0.25);
    outline: none;
}
/* =========================================================
   NEW HOME PAGE SECTIONS — additive only.
   Nothing above this line was changed. These rules only add
   support for the 3 new section types that had no existing
   visual precedent (Why Us / How We Work / Results / FAQ all
   reuse .grid, .card, .icon, .kicker, h2-h4 exactly as-is).
   ========================================================= */

.center-intro { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.center-intro p { margin: 20px auto 0; }

.stats-row { text-align: center; justify-content: center; }
.stats-row h3 { font-size: var(--fs-h3); color: var(--blue); margin-bottom: 8px; }
.stats-row p { color: var(--black-60); }

.faq-list { display: flex; flex-direction: column; gap: 32px; max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--black-15); padding-bottom: 32px; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-item h3 { font-size: var(--fs-h4); margin-bottom: 12px; }
.faq-item p { color: var(--black-60); }

/* =========================================================
   SOCIAL MEDIA MARKETING PAGE — additive only.
   Nothing above this line was changed. These rules only add
   support for 3 section types unique to this page (Strategy
   Timeline / Content Pillars / Platform Rows) that had no
   existing visual precedent elsewhere on the site. All colors
   and spacing reuse existing tokens from variables.css.
   ========================================================= */
 
/* ---- Social Strategy: numbered editorial timeline ---- */
.strategy-timeline { display: flex; flex-direction: column; max-width: 900px; margin: 0 auto; }
.strategy-row { display: flex; align-items: baseline; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--black-15); }
.strategy-row:last-child { border-bottom: none; padding-bottom: 0; }
.strategy-row .num { font-family: var(--font-heading); font-weight: 700; font-size: 40px; color: var(--blue); flex: 0 0 72px; }
.strategy-row .content h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.strategy-row .content p { color: var(--black-60); }
 
/* ---- Content Pillars: stacked editorial rows with a rotating accent bar ---- */
.pillar-list { display: flex; flex-direction: column; max-width: 900px; margin: 0 auto; }
.pillar-row { padding: 40px 0 40px 32px; border-bottom: 1px solid var(--black-15); border-left: 4px solid var(--blue); }
.pillar-row:last-child { border-bottom: none; }
.pillar-row.accent-black { border-left-color: var(--black); }
.pillar-row.accent-amber { border-left-color: var(--amber); }
.pillar-row .pillar-label { font-family: var(--font-heading); font-weight: 700; font-size: 48px; letter-spacing: 0.02em; color: var(--black); margin-bottom: 12px; }
.pillar-row p { color: var(--black-60); font-size: var(--fs-body-lg); max-width: 640px; }
 
/* ---- Platform Strategy: dense horizontal rows, not a bullet list ---- */
.platform-rows { display: flex; flex-direction: column; max-width: 900px; margin: 0 auto; }
.platform-row { display: flex; align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--black-15); flex-wrap: wrap; }
.platform-row:last-child { border-bottom: none; padding-bottom: 0; }
.platform-row .platform-name { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h4); flex: 0 0 160px; }
.platform-row .platform-desc { color: var(--black-60); flex: 1 1 320px; }
.platform-row .platform-tag { font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); background: var(--blue); padding: 6px 14px; border-radius: var(--radius-sm); white-space: nowrap; }
 
@media (max-width: 767px) {
  .strategy-row { flex-direction: column; gap: 8px; }
  .strategy-row .num { font-size: 32px; }
  .pillar-row { padding-left: 20px; }
  .pillar-row .pillar-label { font-size: 32px; }
  .platform-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .platform-row .platform-name { flex: none; }
}
 

/* New accordion markup (Home page) manages its own internal spacing via
   .faq-question/.faq-answer padding, so the legacy item padding is redundant
   there. Scoped with :has() so the older static h4/p pages are unaffected. */
.faq-item:has(.faq-question) { padding-bottom: 0; }
 
/* =========================================================
   CARD DESIGN SYSTEM
   Each card-driven section on the Home page gets its own
   visual pattern instead of reusing .card everywhere. Services
   keeps .card/.grid unchanged. Everything below is additive —
   Services/SEO pages, which still use the older .faq-item h4/p
   and .card markup, are unaffected since they don't use these
   new classes.
   ========================================================= */
 
/* ---------- Why Xova Digital: editorial numbered feature rows ---------- */
.feature-list { display: flex; flex-direction: column; max-width: 900px; margin: 0 auto; }
.feature-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding: 36px 0 36px 20px;
  margin-left: -20px;
  border-bottom: 1px solid var(--black-15);
  border-left: 3px solid transparent;
  transition: border-color var(--dur-base) var(--ease-snap), background-color var(--dur-base) var(--ease-snap);
}
.feature-row:first-child { padding-top: 0; }
.feature-row:last-child { border-bottom: none; padding-bottom: 0; }
.feature-row:hover { border-left-color: var(--blue); background: rgba(var(--blue-rgb), 0.03); }
.feature-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--amber);
  flex: 0 0 90px;
  transition: color var(--dur-base) ease;
}
.feature-row:hover .feature-num { color: var(--blue); }
.feature-content h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.feature-content p { color: var(--black-60); font-size: var(--fs-body); max-width: 560px; margin-bottom: 0; }
 
@media (max-width: 767px) {
  .feature-row { flex-direction: column; gap: 12px; padding: 28px 0 28px 16px; margin-left: -16px; }
  .feature-num { font-size: 34px; }
  .feature-content h3 { font-size: var(--fs-h4); }
}
 
/* ---------- How We Work: connected timeline ---------- */
.timeline { display: flex; align-items: flex-start; gap: 8px; }
.timeline-step { flex: 1 1 0; min-width: 0; }
.timeline-node-wrap { display: flex; align-items: center; margin-bottom: 20px; }
.timeline-node {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--blue);
  color: var(--blue);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.timeline-node-wrap::after {
  content: '';
  flex: 1 1 auto;
  height: 2px;
  background: var(--black-15);
  margin-left: 12px;
}
.timeline-step:last-child .timeline-node-wrap::after { display: none; }
.timeline-step:hover .timeline-node { background: var(--amber); border-color: var(--amber); color: var(--black); transform: scale(1.08); }
.timeline-step h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.timeline-step p { font-size: var(--fs-small); color: var(--black-60); max-width: 230px; margin-bottom: 0; }
 
@media (max-width: 767px) {
  .timeline { flex-direction: column; gap: 0; }
  .timeline-step { display: flex; gap: 20px; align-items: flex-start; padding-bottom: 32px; }
  .timeline-step:last-child { padding-bottom: 0; }
  .timeline-node-wrap { display: block; position: relative; width: 56px; flex: 0 0 56px; margin-bottom: 0; }
  .timeline-node-wrap::after {
    content: '';
    position: absolute;
    top: 56px;
    left: 27px;
    width: 2px;
    height: 32px;
    background: var(--black-15);
    margin-left: 0;
  }
  .timeline-step:last-child .timeline-node-wrap::after { display: none; }
  .timeline-step p { max-width: none; }
}
 
/* ---------- Results: outcome-focused stat blocks ---------- */
.stat-row { display: flex; flex-wrap: wrap; border-top: 1px solid var(--black-15); border-bottom: 1px solid var(--black-15); }
.stat-block { flex: 1 1 0; min-width: 200px; padding: 40px 32px; border-right: 1px solid var(--black-15); }
.stat-block:last-child { border-right: none; }
.stat-block::before { content: ''; display: block; width: 32px; height: 3px; background: var(--amber); margin-bottom: 20px; }
.stat-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.01em;
  color: var(--black);
  margin-bottom: 10px;
}
.stat-block p { color: var(--black-60); font-size: var(--fs-small); max-width: 220px; margin-bottom: 0; }
 
@media (max-width: 1024px) {
  .stat-block { flex: 1 1 50%; }
  .stat-block:nth-child(2n) { border-right: none; }
  .stat-block:nth-child(n+3) { border-top: 1px solid var(--black-15); }
}
@media (max-width: 600px) {
  .stat-block { flex: 1 1 100%; border-right: none; border-top: 1px solid var(--black-15); }
  .stat-block:first-child { border-top: none; }
}

/* Stage 3: Results now sits on .bg-dark — .bg-dark p already covers the
   description text (see DESIGN SYSTEM v2 block), these fill the two gaps
   that generic rule doesn't reach (borders, the bold number/label itself). */
.bg-dark .stat-row, .bg-charcoal .stat-row { border-color: var(--white-15); }
.bg-dark .stat-block, .bg-charcoal .stat-block { border-right-color: var(--white-15); }
.bg-dark .stat-block:nth-child(n+3), .bg-charcoal .stat-block:nth-child(n+3) { border-top-color: var(--white-15); }
.bg-dark .stat-label, .bg-charcoal .stat-label { color: var(--white); }
 
/* ---------- Selected Work: case-study layout ---------- */
.case-grid { display: flex; gap: 32px; align-items: stretch; }
.case-study { display: block; }
.case-study--featured { flex: 1 1 58%; }
.case-stack { flex: 1 1 38%; display: flex; flex-direction: column; gap: 32px; }
.case-image { overflow: hidden; border-radius: var(--radius-md); margin-bottom: 20px; }
.case-study--featured .case-image { aspect-ratio: 16 / 11; }
.case-stack .case-image { aspect-ratio: 16 / 9.5; }
.case-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-snap); }
.case-study:hover .case-image img { transform: scale(1.04); }
.case-category { font-family: var(--font-heading); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 8px; }
.case-info h2, .case-info h3 { font-size: var(--fs-h4); margin-bottom: 8px; }
.case-info p { color: var(--black-60); font-size: var(--fs-small); margin-bottom: 0; }
.case-arrow { display: inline-block; margin-top: 14px; font-family: var(--font-heading); font-weight: 600; font-size: 14px; transition: transform var(--dur-fast) ease, color var(--dur-fast) ease; }
.case-study:hover .case-arrow { transform: translateX(6px); color: var(--blue); }
 
@media (max-width: 1024px) {
  .case-grid { flex-direction: column; }
  .case-study--featured, .case-stack { flex: 1 1 auto; width: 100%; }
}
 
/* ---------- Who We Help: interactive list rows ---------- */
.help-list { border-top: 1px solid var(--black-15); }
.help-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--black-15);
  transition: background var(--dur-fast) ease;
}
.help-num { font-family: var(--font-heading); font-weight: 700; color: var(--blue); font-size: var(--fs-small); flex: 0 0 32px; }
.help-row h3 { font-size: var(--fs-h4); flex: 0 0 260px; margin-bottom: 0; }
.help-desc {
  color: var(--black-60);
  font-size: var(--fs-small);
  flex: 1 1 auto;
  margin-bottom: 0;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--dur-base) ease, max-height var(--dur-base) ease;
}
.help-row:hover .help-desc, .help-row:focus-within .help-desc { opacity: 1; max-height: 60px; }
.help-arrow {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--amber);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
  flex: 0 0 24px;
  text-align: right;
}
.help-row:hover .help-arrow { opacity: 1; transform: translateX(0); }
 
@media (max-width: 1024px) {
  .help-row { flex-wrap: wrap; padding: 24px 0; }
  .help-row h3 { flex: 1 1 auto; }
  .help-desc { opacity: 1; max-height: none; flex: 1 1 100%; margin-left: 56px; margin-top: 8px; }
  .help-arrow { display: none; }
}
 
/* ---------- Testimonials: single rotating quote ---------- */
.quote-slider { max-width: 820px; margin: 0 auto; text-align: center; }
.quote-slide { display: none; }
.quote-slide.is-active { display: block; }
.quote-mark { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 64px; line-height: 1; color: var(--amber); margin-bottom: 12px; }
.quote-text { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-h3); line-height: 1.4; color: var(--black); margin-bottom: 32px; }
.quote-cite { display: inline-flex; flex-direction: column; gap: 4px; align-items: center; padding-top: 20px; border-top: 1px solid var(--black-15); }
.quote-name { font-weight: 700; font-size: 15px; }
.quote-company { font-size: 13px; color: var(--black-60); text-transform: uppercase; letter-spacing: 0.06em; }
.quote-nav { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 40px; }
.quote-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--black-15);
  background: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.quote-arrow:hover { border-color: var(--blue); background: var(--blue); color: var(--white); }
.quote-dots { display: flex; gap: 10px; }
.quote-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--black-15); border: none; padding: 0; transition: background var(--dur-fast) ease, transform var(--dur-fast) ease; }
.quote-dot.is-active { background: var(--amber); transform: scale(1.3); }

/* Stage 3: Testimonials now sits on .bg-spotlight. That section already
   sets color:white at the section level (quote-name inherits it for
   free) — these cover the properties set as explicit values elsewhere,
   which don't inherit. */
.bg-spotlight .quote-text, .bg-dark .quote-text { color: var(--white); }
.bg-spotlight .quote-cite, .bg-dark .quote-cite { border-top-color: var(--white-15); }
.bg-spotlight .quote-company, .bg-dark .quote-company { color: var(--white-60); }
.bg-spotlight .quote-arrow, .bg-dark .quote-arrow { border-color: var(--white-15); color: var(--white); }
.bg-spotlight .quote-dot, .bg-dark .quote-dot { background: var(--white-15); }
 
@media (max-width: 767px) {
  .quote-mark { font-size: 48px; }
  .quote-nav { gap: 16px; }
}
 
/* ---------- FAQ: real accordion (Home page markup) ---------- */
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: none;
  border: none;
  text-align: left;
  padding: 28px 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--black);
}
.faq-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--black-15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.faq-question:hover .faq-icon { border-color: var(--blue); color: var(--blue); }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); border-color: var(--amber); color: var(--amber); }
.faq-answer { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease-snap); }
.faq-answer p { padding-bottom: 28px; color: var(--black-60); font-size: var(--fs-body); max-width: 760px; margin-bottom: 0; }
 

/* =========================================================
   CONTENT MARKETING PAGE — additive only.
   Nothing above this line was changed. These rules add support
   for 2 section types unique to this page (Relationship Split +
   Checklist, and Idea Flow) that had no existing visual
   precedent elsewhere. All colors and spacing reuse existing
   tokens from variables.css. Existing pages are unaffected.
   ========================================================= */

/* ---- Relationship split: text + checklist, side by side ---- */
.relationship-split { display: flex; gap: 64px; align-items: flex-start; }
.relationship-info { flex: 1 1 45%; min-width: 0; }
.relationship-info h2 { font-size: var(--fs-h2); margin-bottom: 20px; }
.relationship-info p { font-size: var(--fs-body-lg); margin-bottom: 24px; max-width: 480px; }
.check-list { flex: 1 1 45%; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: var(--fs-body);
  color: var(--black-60);
}
.check-list li::before {
  content: '\2713';
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-list.amber li::before { background: var(--amber); color: var(--black); }

/* Outcomes: same checklist styling, centered in two columns */
.check-list.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 48px;
  max-width: 900px;
  margin: 0 auto;
  flex: none;
}

@media (max-width: 1024px) {
  .relationship-split { flex-direction: column; gap: 40px; }
  .relationship-info, .relationship-split .check-list { flex: 1 1 100%; }
  .relationship-info p { max-width: none; }
}
@media (max-width: 600px) {
  .check-list.cols-2 { grid-template-columns: 1fr; }
}

/* ---- Idea flow: vertical connected diagram (Content + Social Media) ---- */
.idea-flow { display: flex; flex-direction: column; align-items: center; max-width: 520px; margin: 0 auto; }
.flow-step {
  width: 100%;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  text-align: center;
  box-shadow: 6px 6px 0 var(--black);
}
.flow-step.c-blue { border-color: var(--blue); box-shadow: 6px 6px 0 var(--blue); }
.flow-step.c-amber { border-color: var(--amber); box-shadow: 6px 6px 0 var(--amber); }
.flow-step h3 { font-size: var(--fs-h4); margin-bottom: 6px; }
.flow-step p { font-size: var(--fs-small); color: var(--black-60); margin-bottom: 0; }
.flow-arrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--black-60);
  line-height: 1;
  margin: 6px 0;
}

@media (max-width: 767px) {
  .flow-step { padding: 20px 22px; }
}

/* =========================================================
   WEB DESIGN & DEVELOPMENT PAGE — additive only.
   Nothing above this line was changed. These rules add support
   for 3 section types unique to this page (Tag Pills, Device
   Showcase, and Growth Hub diagram) that had no existing visual
   precedent elsewhere. All colors and spacing reuse existing
   tokens from variables.css. Existing pages are unaffected.
   ========================================================= */
 
/* ---- Tag pills: compact inline principle/focus-area labels ---- */
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tag-pill {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--white);
  border: 1.5px solid var(--black-15);
  border-radius: 999px;
  padding: 8px 18px;
  transition: border-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.tag-pill:hover { border-color: var(--blue); color: var(--blue); }
 
/* ---- Device showcase: simplified responsive-frame composition ---- */
.device-showcase { display: flex; align-items: flex-end; justify-content: center; gap: 32px; flex-wrap: wrap; margin: 8px 0; }
.device-frame {
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 6px 6px 0 var(--amber);
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.device-desktop { flex: 0 1 320px; }
.device-tablet { flex: 0 1 210px; box-shadow: 6px 6px 0 var(--black); }
.device-mobile { flex: 0 1 130px; box-shadow: 6px 6px 0 var(--blue); }
.device-chrome { display: flex; gap: 6px; padding: 10px 14px; background: var(--black); }
.device-chrome span { width: 8px; height: 8px; border-radius: 50%; background: var(--white-15); }
.device-screen { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.mock-bar { height: 8px; border-radius: 4px; background: var(--black-15); }
.mock-bar.w-40 { width: 40%; }
.mock-bar.w-60 { width: 60%; }
.mock-bar.w-80 { width: 80%; }
.mock-row { display: flex; gap: 8px; }
.mock-block { flex: 1; height: 34px; border-radius: 6px; background: rgba(var(--blue-rgb), 0.12); }
.device-label {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--black-60);
  padding: 10px 0 16px;
}
 
@media (max-width: 600px) {
  .device-showcase { gap: 20px; }
  .device-desktop { flex-basis: 100%; max-width: 280px; }
}
 
/* ---- Growth hub: channels feeding into the website, then into analytics ---- */
.growth-hub { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 900px; margin: 0 auto; }
.hub-feeders { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; }
.hub-feeder {
  flex: 1 1 180px;
  max-width: 220px;
  background: var(--white);
  border: 2px solid var(--black-15);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  text-align: center;
  transition: border-color var(--dur-fast) ease;
}
.hub-feeder:hover { border-color: var(--blue); }
.hub-feeder h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: 6px; }
.hub-feeder p { font-size: 13px; color: var(--black-60); margin-bottom: 10px; }
.hub-feeder .link-arrow { font-size: 13px; }
.hub-arrow-down { font-size: 26px; color: var(--blue); line-height: 1; margin: 6px 0; }
.hub-center {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 28px 44px;
  text-align: center;
  box-shadow: 6px 6px 0 var(--amber);
  min-width: 220px;
}
.hub-center h3 { color: var(--white); font-size: var(--fs-h3); margin-bottom: 6px; }
.hub-center p { color: var(--white-60); font-size: var(--fs-small); margin-bottom: 0; }
.hub-outcome { border-color: var(--amber); max-width: 260px; }
 
@media (max-width: 767px) {
  .hub-feeders { gap: 14px; }
  .hub-feeder { flex-basis: 45%; }
  .hub-center { padding: 24px 32px; }
}
 
/* =========================================================
   STRATEGY & ANALYTICS PAGE — additive only.
   Nothing above this line was changed. These rules add support
   for 3 section types unique to this page (Comparison Flow,
   Audit Grid, and Loop Ring) plus a dashboard variant of the
   existing Device Showcase. All colors and spacing reuse
   existing tokens from variables.css. Existing pages, including
   the shared .growth-hub, .idea-flow and .check-list components
   they reuse, are unaffected.
   ========================================================= */
 
/* ---- Comparison flow: random activity vs. connected strategy ---- */
.comparison-flow { display: flex; gap: 56px; align-items: flex-start; }
.comparison-col { flex: 1 1 45%; min-width: 0; }
.comparison-col h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  margin-bottom: 24px;
  text-align: center;
}
.comparison-col.is-strategic h3 { color: var(--blue); }
.scatter-list { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-content: flex-start; }
.scatter-item {
  background: var(--white);
  border: 2px dashed var(--black-15);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--black-60);
}
.scatter-item:nth-child(odd) { transform: rotate(-1.5deg); }
.scatter-item:nth-child(even) { transform: rotate(1deg); }
 
@media (max-width: 1024px) {
  .comparison-flow { flex-direction: column; gap: 40px; }
  .comparison-col { flex: 1 1 100%; }
}
 
/* ---- Audit grid: diagnostic checklist, two columns ---- */
.audit-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--black-15); }
.audit-item {
  display: flex;
  gap: 16px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--black-15);
}
.audit-item:nth-child(odd) { border-right: 1px solid var(--black-15); }
.audit-check {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 2px solid var(--black);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--blue);
  margin-top: 2px;
}
.audit-item h3 { font-size: var(--fs-h4); margin-bottom: 4px; }
.audit-item p { font-size: var(--fs-small); color: var(--black-60); margin-bottom: 0; }
 
@media (max-width: 767px) {
  .audit-grid { grid-template-columns: 1fr; }
  .audit-item:nth-child(odd) { border-right: none; }
  .audit-item { padding: 20px 4px; }
}
 
/* ---- Dashboard variant of the device showcase (Reporting section) ---- */
.device-dashboard { flex: 0 1 460px; box-shadow: 6px 6px 0 var(--blue); }
.mock-chart { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-bottom: 8px; }
.mock-chart .bar { flex: 1; border-radius: 4px 4px 0 0; background: rgba(var(--blue-rgb), 0.25); }
.mock-chart .bar.amber { background: rgba(var(--amber-rgb), 0.45); }
.device-caption { font-size: 12px; color: var(--black-60); text-align: center; padding: 0 16px 16px; }
 
/* ---- Loop ring: circular optimization cycle ---- */
.loop-ring { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; max-width: 960px; margin: 0 auto; }
.loop-node {
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: 50%;
  width: 132px;
  height: 132px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  box-shadow: 6px 6px 0 var(--amber);
}
.loop-node.is-repeat { border-color: var(--blue); box-shadow: 6px 6px 0 var(--blue); }
.loop-node h3 { font-size: 15px; margin-bottom: 4px; }
.loop-node p { font-size: 11px; color: var(--black-60); margin-bottom: 0; line-height: 1.3; }
.loop-connector { color: var(--blue); flex: 0 0 auto; }
.loop-connector .arrow-h { font-size: 22px; }
.loop-connector .arrow-v { display: none; font-size: 22px; }
 
@media (max-width: 767px) {
  .loop-ring { flex-direction: column; }
  .loop-connector .arrow-h { display: none; }
  .loop-connector .arrow-v { display: block; }
}
 
/* =========================================================
   START A PROJECT / CONTACT PAGE — additive only.
   Nothing above this line was changed. These rules add support
   for the two-column contact layout, the project inquiry form
   and its success/error states — none of which had an existing
   visual precedent elsewhere on the site. All colors and spacing
   reuse existing tokens from variables.css. Existing pages,
   including the shared .strategy-timeline, .feature-list and
   .faq-item/.faq-question accordion components reused on this
   page, are unaffected.
   ========================================================= */
 
/* Offset anchor scrolling so the sticky header never covers the target. */
#project-form { scroll-margin-top: 110px; }

/* Same fix for the in-page service anchors on services.php (#seo, #google-ads,
   etc.) — the "Learn more" links on the overview grid were landing partly
   behind the sticky header with no offset applied. */
.service-detail { scroll-margin-top: 110px; }
 
/* ---- Two-column layout: contact info (left) + form (right) ---- */
.contact-grid { display: flex; gap: 64px; align-items: flex-start; }
.contact-info { flex: 0 0 38%; min-width: 0; position: sticky; top: 120px; }
.contact-info h2 { font-size: var(--fs-h2); margin-bottom: 20px; }
.contact-info p { font-size: var(--fs-body-lg); color: var(--black-60); max-width: 440px; }
.contact-form-panel { flex: 1 1 58%; min-width: 0; }
 
.contact-methods { display: flex; flex-direction: column; gap: 28px; margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--black-15); }
.contact-method { display: flex; flex-direction: column; gap: 4px; }
.cm-label { font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.contact-method a { font-family: var(--font-heading); font-weight: 700; font-size: 22px; color: var(--black); transition: color var(--dur-fast) ease; word-break: break-word; }
.contact-method a:hover { color: var(--blue); }
 
@media (max-width: 1024px) {
  .contact-grid { flex-direction: column; gap: 48px; }
  .contact-info, .contact-form-panel { flex: 1 1 100%; }
  .contact-info { position: static; }
  .contact-info p { max-width: none; }
}
 
/* ---- Project inquiry form ---- */
.project-form {
  background: var(--white);
  border: 2px solid var(--black-15);
  border-radius: var(--radius-md);
  padding: 48px;
}
.form-section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black-60);
  margin-bottom: 20px;
}
.form-section-title:not(:first-child) { margin-top: 8px; }
 
.form-grid { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; }
.form-group { flex: 1 1 100%; display: flex; flex-direction: column; gap: 8px; }
.form-group.half { flex: 1 1 calc(50% - 10px); }
 
.form-label, .project-form legend.form-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--black);
}
.project-form fieldset { border: none; padding: 0; margin: 0; }
.project-form legend.form-label { padding: 0; margin-bottom: 14px; }
.req { color: var(--blue); }
 
.project-form input[type="text"],
.project-form input[type="email"],
.project-form input[type="tel"],
.project-form input[type="url"],
.project-form select,
.project-form textarea {
  width: 100%;
  border: 1.5px solid var(--black-15);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--black);
  background: var(--white);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.project-form textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.project-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23000000' stroke-opacity='0.6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.project-form input::placeholder, .project-form textarea::placeholder { color: var(--black-60); }
.project-form input:focus, .project-form select:focus, .project-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.12);
}
.project-form input.has-error, .project-form select.has-error, .project-form textarea.has-error {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.1);
}
.form-help { font-size: 13px; color: var(--black-60); }
.field-error { font-size: 13px; font-weight: 600; color: var(--blue); }
 
/* ---- Services: pill-style checkboxes ---- */
.checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; }
.checkbox-pill { position: relative; }
.checkbox-pill input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.checkbox-pill label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1.5px solid var(--black-15);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--black);
  cursor: pointer;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.checkbox-pill label:hover { border-color: var(--blue); color: var(--blue); }
.checkbox-pill input:checked + label { background: var(--blue); border-color: var(--blue); color: var(--white); }
.checkbox-pill input:focus-visible + label { outline: 3px solid var(--blue); outline-offset: 2px; }
 
/* ---- Honeypot: hidden from real visitors, present for bots ---- */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
 
/* ---- Submit button + footnote ---- */
.project-form .btn { width: 100%; justify-content: center; }
.form-footnote { font-size: 13px; color: var(--black-60); margin-top: 20px; line-height: 1.6; }
.form-footnote a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
 
/* ---- Error banner (brand palette has no red, so errors use blue) ---- */
.form-error-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1.5px solid var(--blue);
  background: rgba(var(--blue-rgb), 0.05);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-bottom: 32px;
}
.form-error-banner > span { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--blue); color: var(--white); font-family: var(--font-heading); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.form-error-banner strong { display: block; margin-bottom: 4px; font-family: var(--font-heading); }
.form-error-banner p { color: var(--black-60); font-size: var(--fs-small); margin-bottom: 0; }
 
/* ---- Success state ---- */
.success-panel {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--radius-md);
  padding: 64px 48px;
  box-shadow: 8px 8px 0 var(--amber);
}
.success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 26px;
  font-weight: 700;
}
.success-panel h2 { font-size: var(--fs-h2); margin-bottom: 16px; }
.success-panel p { color: var(--black-60); font-size: var(--fs-body-lg); max-width: 460px; margin: 0 auto 32px; }
 
@media (max-width: 767px) {
  .project-form { padding: 28px; }
  .form-group.half { flex: 1 1 100%; }
  .success-panel { padding: 48px 24px; }
  .contact-method a { font-size: 19px; }
}
 
/* =========================================================
   OUR WORK / CASE STUDIES PAGE — additive only.
   Nothing above this line was changed. New rules support the
   distinct hero, the honest "case studies coming soon" showcase
   panel, and a proof/results statement — none of which had a
   precedent elsewhere. Reuses .growth-hub, .timeline,
   .feature-list, .tag-pill/.tag-row, .device-frame and
   .faq-question accordion exactly as-is. Existing pages are
   unaffected.
   ========================================================= */

/* ---- Work hero: dark, asymmetric, distinct from .banner/.hero ---- */
.work-hero {
  background: var(--black);
  padding: 160px 0 100px;
}
.work-hero .kicker:not(.amber) { color: var(--white); }
.work-hero .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; flex-wrap: wrap; }
.work-hero-content { flex: 1 1 55%; min-width: 0; }
.work-hero-content h1 { color: var(--white); font-size: var(--fs-h1); max-width: 760px; margin-bottom: 24px; }
.work-hero-content p { color: var(--white-60); font-size: var(--fs-body-lg); max-width: 540px; margin-bottom: 36px; }

.work-hero-visual { flex: 0 0 320px; }
.work-hero-stat { text-align: right; margin-bottom: 28px; }
.work-hero-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  color: var(--amber);
}
.work-hero-stat-label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--white-60);
  margin-top: 8px;
  line-height: 1.5;
}
.work-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; max-width: 320px; margin-left: auto; }

.tag-pill.on-dark { background: transparent; border-color: var(--white-15); color: var(--white); }
.tag-pill.on-dark:hover { border-color: var(--amber); color: var(--amber); }

@media (max-width: 1024px) {
  .work-hero { padding: var(--section-pad-tablet) 0; }
  .work-hero .wrap { flex-direction: column; align-items: flex-start; gap: 40px; }
  .work-hero-visual { flex: 1 1 100%; width: 100%; }
  .work-hero-stat, .work-hero-tags { text-align: left; justify-content: flex-start; margin-left: 0; }
}
@media (max-width: 767px) {
  .work-hero { padding: var(--section-pad-mobile) 0; }
  .work-hero-stat-num { font-size: 64px; }
}

/* ---- Work showcase: the honest "coming soon" panel ---- */
.work-showcase {
  background: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--radius-md);
  padding: 56px;
  box-shadow: 10px 10px 0 var(--amber);
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
  justify-content: space-between;
}
.work-showcase-info { flex: 1 1 420px; min-width: 0; }
.work-showcase-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  color: var(--blue);
  margin-bottom: 12px;
}
.work-showcase-info h3 { font-size: var(--fs-h2); margin-bottom: 16px; }
.work-showcase-info p { color: var(--black-60); font-size: var(--fs-body-lg); max-width: 520px; margin-bottom: 28px; }
.work-showcase-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.work-showcase-preview { flex: 1 1 340px; display: flex; justify-content: center; }

@media (max-width: 767px) {
  .work-showcase { padding: 28px; }
  .work-showcase-num { font-size: 48px; }
}

/* ---- Proof statement: honest, no fabricated stats ---- */
.proof-statement {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  border-top: 1px solid var(--black-15);
  border-bottom: 1px solid var(--black-15);
  padding: 48px 0;
}
.proof-statement p {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h4);
  color: var(--black);
  margin-bottom: 16px;
}
.proof-statement span { display: block; color: var(--black-60); font-size: var(--fs-body); }
/* =========================================================
   HOME — SERVICES CAROUSEL (additive only)
   Nothing above this line was changed. Scoped entirely to
   .services-carousel / .services-carousel-slide, used only by
   the Services section on index.php. The .card visual design
   (background, border, radius, shadow, hover state, icon/h4/p/
   link-arrow) is untouched — only flex-basis/width is
   overridden so cards sit in a horizontally snapping track
   instead of a wrapping grid. No other card grid on the site
   references these classes.
   ========================================================= */

.services-carousel {
  position: relative;
  --carousel-visible: 3.15; /* ~3 cards + a peek of the 4th on desktop */
}

.services-carousel-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Padding + matching negative margin gives the .card:hover translate/shadow
     room to render without being clipped by this scroll container, while
     keeping the carousel's outer footprint identical to an un-padded box. */
  padding: 8px 16px 20px 8px;
  margin: -8px -16px -20px -8px;
}
.services-carousel-viewport::-webkit-scrollbar { display: none; }

.services-carousel-track {
  display: flex;
  gap: var(--gutter);
}
.services-carousel-track:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

.services-carousel-slide {
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  flex: 0 0 calc((100% - (var(--carousel-visible) - 1) * var(--gutter)) / var(--carousel-visible));
  max-width: none;
}
/* Stage 4: card content must sit above the decorative motifs below, which
   are deliberately z-index:-1 so they read as texture behind the text,
   never a legibility risk even where a longer description wraps into
   their corner. */
.services-carousel-slide > * { position: relative; z-index: 1; }

/* ---------- service card motifs (Stage 4) ----------
   One quiet decorative signature per service, bleeding off the card's
   bottom-right corner at low opacity. z-index:-1 keeps them strictly
   behind the icon/heading/paragraph/link — texture, not competition.
   Each motif transitions on card hover (see the shared hover rule at the
   end of this block) for a small "coming alive" cue without any JS. */

/* SEO — a radar/target ring: search & ranking signal. */
.motif-seo::before {
  content: '';
  position: absolute;
  right: -24px; bottom: -24px;
  width: 140px; height: 140px;
  border: 16px solid rgba(var(--blue-rgb), 0.08);
  border-radius: 50%;
  z-index: -1;
  transition: transform var(--dur-slow) var(--ease-out);
}
.motif-seo::after {
  content: '';
  position: absolute;
  right: 30px; bottom: 30px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(var(--blue-rgb), 0.3);
  z-index: -1;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Google Ads / PPC — an ascending line with a peak marker: campaign trending up. */
.motif-ppc::before {
  content: '';
  position: absolute;
  right: 18px; bottom: 32px;
  width: 96px; height: 2px;
  background: rgba(var(--amber-rgb), 0.35);
  transform: rotate(-26deg);
  transform-origin: right center;
  z-index: -1;
  transition: transform var(--dur-slow) var(--ease-out);
}
.motif-ppc::after {
  content: '';
  position: absolute;
  right: 12px; bottom: 58px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--amber);
  opacity: 0.35;
  z-index: -1;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Social Media — a loose cluster of connected nodes. */
.motif-social::before {
  content: '';
  position: absolute;
  right: 70px; bottom: 40px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(var(--blue-rgb), 0.3);
  box-shadow: 26px -20px 0 rgba(var(--amber-rgb), 0.32), 32px 18px 0 rgba(var(--blue-rgb), 0.22);
  z-index: -1;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Content & Creative — repeating editorial lines, fading into the card. */
.motif-content::before {
  content: '';
  position: absolute;
  right: 24px; bottom: 26px;
  width: 84px; height: 46px;
  background-image: linear-gradient(rgba(var(--blue-rgb), 0.14) 2px, transparent 2px);
  background-size: 100% 10px;
  -webkit-mask-image: linear-gradient(to left, black, transparent);
  mask-image: linear-gradient(to left, black, transparent);
  z-index: -1;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Web Design & Development — a browser frame with chrome dots. */
.motif-web::before {
  content: '';
  position: absolute;
  right: 20px; bottom: 20px;
  width: 100px; height: 62px;
  border: 1.5px solid rgba(var(--blue-rgb), 0.16);
  border-radius: 8px;
  z-index: -1;
  transition: transform var(--dur-slow) var(--ease-out);
}
.motif-web::after {
  content: '';
  position: absolute;
  right: 30px; bottom: 88px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(var(--amber-rgb), 0.4);
  box-shadow: 12px 0 0 rgba(var(--blue-rgb), 0.2), 24px 0 0 rgba(var(--blue-rgb), 0.2);
  z-index: -1;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Strategy & Analytics — a connective path between two nodes. */
.motif-strategy::before {
  content: '';
  position: absolute;
  right: 24px; bottom: 30px;
  width: 66px; height: 1.5px;
  background: rgba(var(--blue-rgb), 0.22);
  z-index: -1;
  transition: transform var(--dur-slow) var(--ease-out);
}
.motif-strategy::after {
  content: '';
  position: absolute;
  right: 20px; bottom: 26px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--amber);
  opacity: 0.32;
  box-shadow: -62px 0 0 rgba(var(--blue-rgb), 0.28);
  z-index: -1;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* Shared hover cue: every motif recedes slightly further into its corner
   as the card lifts on hover, a small complementary depth cue rather than
   a repeat of the same translateY+shadow every other card treatment uses. */
.services-carousel-slide.motif-seo:hover::before,
.services-carousel-slide.motif-seo:hover::after,
.services-carousel-slide.motif-ppc:hover::after,
.services-carousel-slide.motif-social:hover::before,
.services-carousel-slide.motif-content:hover::before,
.services-carousel-slide.motif-web:hover::before,
.services-carousel-slide.motif-web:hover::after,
.services-carousel-slide.motif-strategy:hover::before,
.services-carousel-slide.motif-strategy:hover::after {
  transform: translate(4px, 4px);
}
.services-carousel-slide.motif-ppc:hover::before { transform: rotate(-26deg) translate(4px, 4px); }

@media (prefers-reduced-motion: reduce) {
  .motif-seo::before, .motif-seo::after, .motif-ppc::before, .motif-ppc::after,
  .motif-social::before, .motif-content::before, .motif-web::before, .motif-web::after,
  .motif-strategy::before, .motif-strategy::after { transition: none !important; }
}


.services-carousel.is-dragging .services-carousel-viewport { scroll-snap-type: none; cursor: grabbing; }
.services-carousel.is-dragging .services-carousel-slide { pointer-events: none; }

.services-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 32px;
}
.services-carousel-count {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--black-60);
}
.services-carousel-count strong { color: var(--black); font-weight: 700; }

.services-carousel-nav { display: flex; gap: 12px; }
.carousel-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
              border-color var(--dur-fast) ease, transform var(--dur-fast) ease,
              opacity var(--dur-fast) ease;
}
.carousel-arrow:hover:not(:disabled) {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
}
.carousel-arrow:disabled { opacity: 0.3; cursor: default; }

@media (max-width: 1024px) {
  .services-carousel { --carousel-visible: 2.15; } /* ~2 cards + a peek */
}
@media (max-width: 767px) {
  .services-carousel { --carousel-visible: 1.15; } /* 1 card + a clearly visible peek */
  .services-carousel-controls { margin-top: 24px; }
  .carousel-arrow { width: 44px; height: 44px; }
}

/* Respect reduced motion: disable smooth scroll-snap easing and let JS fall
   back to instant scrollTo (handled in main.js via matchMedia). */
@media (prefers-reduced-motion: reduce) {
  .services-carousel-viewport { scroll-behavior: auto; }
}

/* =========================================================
   SERVICES DROPDOWN (Stage 2)
   Structured icon + title + description rows instead of a plain link
   list, with a footer link back to the full services page. Deliberately
   NOT given role="menu"/"menuitem" — that ARIA pattern implies full
   arrow-key navigation between items, which isn't implemented here; a
   plain nav list with aria-haspopup/aria-expanded is the more honest
   (and more robust) semantic for what this actually is.
   ========================================================= */

.nav-item.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle .arrow {
    display: inline-flex;
    width: 14px;
    height: 14px;
    margin-left: 2px;
    transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

/* Outer box: sits flush against the toggle (top: 100%, zero real gap) so
   the pointer never crosses a dead zone between link and menu — the
   padding-top below is what creates the *visual* gap instead, and because
   padding is part of this element's own hoverable box, hover on the
   parent .nav-item.dropdown never drops out while the pointer travels
   through it. The inner .dropdown-menu-panel is what actually paints and
   animates. */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 340px;
    max-width: calc(100vw - 32px);
    transform: translateX(-50%);
    padding-top: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), visibility var(--dur-base) var(--ease-out);
    z-index: var(--z-dropdown);
}

/* Reveal on hover, on keyboard focus (:focus-within), or via .is-open
   (JS-driven touch/tap fallback for coarse pointers — see main.js). All
   three are equally valid ways to open it; none override the others. */
.nav-item.dropdown:hover .dropdown-menu,
.nav-item.dropdown:focus-within .dropdown-menu,
.nav-item.dropdown.is-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav-item.dropdown:hover .dropdown-toggle .arrow,
.nav-item.dropdown:focus-within .dropdown-toggle .arrow,
.nav-item.dropdown.is-open .dropdown-toggle .arrow {
    transform: rotate(180deg);
    color: var(--amber);
}

.dropdown-menu-panel {
    background: linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%);
    border: 1px solid var(--white-08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg-on-dark);
    padding: 10px;
    transform: translateY(6px);
    transition: transform var(--dur-base) var(--ease-out);
}
.nav-item.dropdown:hover .dropdown-menu-panel,
.nav-item.dropdown:focus-within .dropdown-menu-panel,
.nav-item.dropdown.is-open .dropdown-menu-panel {
    transform: translateY(0);
}

.dropdown-menu-list { display: flex; flex-direction: column; gap: 2px; }

.dropdown-item {
    --stagger-delay: 0ms;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: var(--radius-sm);
    opacity: 0;
    transform: translateY(-4px);
    transition: background-color var(--dur-fast) var(--ease-out),
                opacity var(--dur-base) var(--ease-out) var(--stagger-delay),
                transform var(--dur-base) var(--ease-out) var(--stagger-delay);
}
.nav-item.dropdown:hover .dropdown-item,
.nav-item.dropdown:focus-within .dropdown-item,
.nav-item.dropdown.is-open .dropdown-item {
    opacity: 1;
    transform: translateY(0);
}
.dropdown-item:nth-child(1) { --stagger-delay: 0ms; }
.dropdown-item:nth-child(2) { --stagger-delay: 25ms; }
.dropdown-item:nth-child(3) { --stagger-delay: 50ms; }
.dropdown-item:nth-child(4) { --stagger-delay: 75ms; }
.dropdown-item:nth-child(5) { --stagger-delay: 100ms; }
.dropdown-item:nth-child(6) { --stagger-delay: 125ms; }

.dropdown-item-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--white-08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slate-400);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dropdown-item-icon .icon-svg { width: 18px; height: 18px; }
.dropdown-item-text { display: flex; flex-direction: column; min-width: 0; }
.dropdown-item-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: var(--white);
    transition: color var(--dur-fast) var(--ease-out);
}
.dropdown-item-desc { font-size: 12px; color: var(--slate-400); margin-top: 2px; line-height: 1.4; }

.dropdown-item:hover, .dropdown-item:focus-visible {
    background: var(--white-08);
}
.dropdown-item:hover .dropdown-item-icon, .dropdown-item:focus-visible .dropdown-item-icon {
    background: var(--glow-amber-soft);
    color: var(--amber);
}
.dropdown-item:hover .dropdown-item-title, .dropdown-item:focus-visible .dropdown-item-title {
    color: var(--amber);
}

.dropdown-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    padding: 12px 10px 6px;
    border-top: 1px solid var(--white-08);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 13px;
    color: var(--slate-400);
    transition: color var(--dur-fast) var(--ease-out);
}
.dropdown-menu-footer:hover, .dropdown-menu-footer:focus-visible { color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
    .dropdown-item, .mobile-nav-item, .mobile-nav-cta { transition-delay: 0ms !important; }
}
/* =========================================================
   INSIGHTS / ARTICLE PAGES — additive only. Nothing above this
   line was changed. New rules support the category/search
   controls on the listing page, the horizontal article-row
   layout for overflow articles, and the full article reading
   experience (TOC, prose content, author box, share, related
   CTA) — none of which had a precedent elsewhere. Reuses
   .case-grid, .grid/.card, .tag-pill, .relationship-split,
   .device-showcase and .faq-question exactly as-is. Existing
   pages are unaffected.
   ========================================================= */
 
/* ---- Listing controls: category filter + search ---- */
.insights-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--black-15);
}
.category-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-pill.is-active { background: var(--black); border-color: var(--black); color: var(--white); }
.tag-pill.is-active:hover { color: var(--white); }
 
.insights-search { position: relative; flex: 0 1 280px; min-width: 220px; }
.insights-search .form-input { padding-right: 44px; }
.insights-search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--black-60);
  pointer-events: none;
  font-size: 15px;
}
.insights-no-results { text-align: center; color: var(--black-60); padding: 40px 0; }
 
/* ---- Horizontal article rows (overflow articles beyond the featured set) ---- */
.insight-list { display: flex; flex-direction: column; margin-top: 48px; }
.insight-row {
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--black-15);
}
.insight-row:first-child { padding-top: 0; }
.insight-row:last-child { border-bottom: none; padding-bottom: 0; }
.insight-row-image { flex: 0 0 180px; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; }
.insight-row-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-snap); }
.insight-row:hover .insight-row-image img { transform: scale(1.04); }
.insight-row-content { flex: 1 1 auto; min-width: 0; }
.insight-row-category { font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 6px; }
.insight-row-content h2 { font-size: var(--fs-h4); margin-bottom: 6px; }
.insight-row-content p { color: var(--black-60); font-size: var(--fs-small); margin-bottom: 8px; }
.insight-row-meta { font-size: 13px; color: var(--black-60); }
.insight-row-meta .dot { margin: 0 6px; color: var(--black-15); }
 
@media (max-width: 600px) {
  .insight-row { gap: 16px; }
  .insight-row-image { flex-basis: 96px; }
  .insight-row-content h2 { font-size: var(--fs-body-lg); }
}
 
/* ---- Article reading experience ---- */
.article-header { max-width: 760px; margin: 0 auto; text-align: center; }
.article-header .kicker { justify-content: center; }
.article-header h1 { font-size: var(--fs-h1); margin-bottom: 20px; }
.article-header .excerpt { font-size: var(--fs-body-lg); color: var(--black-60); max-width: 640px; margin: 0 auto; }
 
.article-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  color: var(--black-60);
  font-size: 14px;
  margin: 28px auto 0;
  padding-bottom: 32px;
  max-width: 760px;
  border-bottom: 1px solid var(--black-15);
}
.article-meta-row .dot { color: var(--black-15); }
 
.article-featured-image { border-radius: var(--radius-md); overflow: hidden; margin: 48px auto; max-width: 960px; box-shadow: 8px 8px 0 var(--amber); }
.article-featured-image img { width: 100%; display: block; }
 
.article-layout { display: flex; gap: 56px; align-items: flex-start; justify-content: center; }
.article-toc { flex: 0 0 240px; position: sticky; top: 120px; }
.article-toc-title { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black-60); margin-bottom: 16px; }
.article-toc ol { display: flex; flex-direction: column; gap: 12px; counter-reset: toc; }
.article-toc li { counter-increment: toc; font-size: 14px; }
.article-toc li::before { content: counter(toc, decimal-leading-zero) '  '; color: var(--blue); font-weight: 700; font-family: var(--font-heading); }
.article-toc a { color: var(--black-60); }
.article-toc a:hover { color: var(--blue); }
 
.article-body-col { flex: 1 1 700px; max-width: 700px; min-width: 0; }
.article-body-col.no-toc { margin: 0 auto; }
 
.article-content { font-size: var(--fs-body); line-height: 1.8; }
.article-content h2 { font-size: var(--fs-h3); margin: 48px 0 16px; scroll-margin-top: 110px; }
.article-content h3 { font-size: var(--fs-h4); margin: 32px 0 12px; scroll-margin-top: 110px; }
.article-content p { margin-bottom: 20px; }
.article-content ul, .article-content ol { margin: 0 0 20px 24px; }
.article-content li { margin-bottom: 8px; line-height: 1.7; }
.article-content blockquote {
  border-left: 4px solid var(--amber);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-body-lg);
  color: var(--black);
}
.article-content img { border-radius: var(--radius-md); margin: 32px 0; width: 100%; }
.article-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.article-content strong { font-weight: 700; }
 
.article-author-box {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 28px;
  border: 2px solid var(--black-15);
  border-radius: var(--radius-md);
  margin: 56px 0;
}
.article-author-avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--black); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 18px; flex-shrink: 0;
  overflow: hidden;
}
.article-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.article-author-name { font-weight: 700; font-family: var(--font-heading); margin-bottom: 4px; }
.article-author-bio { font-size: 14px; color: var(--black-60); margin-bottom: 0; }
 
.article-share { display: flex; align-items: center; gap: 12px; margin: 40px 0; }
.article-share-label { font-size: 13px; font-weight: 600; color: var(--black-60); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
.article-share a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--black-15);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.article-share a:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
 
.article-cta-panel {
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 48px;
  text-align: center;
  margin: 56px 0;
  box-shadow: 8px 8px 0 var(--amber);
}
.article-cta-panel h3 { color: var(--white); font-size: var(--fs-h3); margin-bottom: 12px; }
.article-cta-panel p { color: var(--white-60); margin-bottom: 24px; }
 
.article-related { max-width: 1000px; margin: 64px auto 0; }
.article-related-title { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black-60); margin-bottom: 24px; text-align: center; }
 
.article-not-found { text-align: center; max-width: 520px; margin: 0 auto; padding: 80px 0; }
.article-not-found h1 { font-size: var(--fs-h2); margin-bottom: 16px; }
.article-not-found p { color: var(--black-60); font-size: var(--fs-body-lg); margin-bottom: 32px; }
 
@media (max-width: 1024px) {
  .article-layout { flex-direction: column; }
  .article-toc { position: static; flex: 1 1 100%; width: 100%; max-width: 700px; margin: 0 auto 8px; }
  .article-body-col { max-width: 700px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .article-featured-image { margin: 32px auto; }
  .article-cta-panel, .article-author-box { padding: 28px; }
}
 
/* =========================================================
   DESIGN SYSTEM v2 — FOUNDATION (additive only)
   Nothing above this line was changed. This block adds the shared
   primitives the visual system is built from: SVG icons, background
   modes, section-header variants, a quiet detail-row list (replacing
   dense .card grids for long enumerations), hover-interaction tiers,
   and staggered reveal motion. Existing .card/.grid usage on
   not-yet-migrated pages is untouched and keeps working exactly as
   before during the phased rollout.
   ========================================================= */
 
/* ---------- icons ---------- */
/* Renders via xova_icon() in header.php — <svg class="icon-svg"><use .../></svg>.
   Color is inherited, never hardcoded per icon, so one sprite instance can
   sit on blue/black/white/amber contexts without a color variant per icon. */
.icon-svg {
  width: 26px;
  height: 26px;
  display: inline-block;
  flex-shrink: 0;
  color: var(--blue);
  stroke-width: 1.6;
}
.card .icon-svg { width: 28px; height: 28px; margin-bottom: 12px; }
.on-dark .icon-svg, .bg-dark .icon-svg, .bg-charcoal .icon-svg { color: var(--white); }
.icon-svg.is-spotlight { color: var(--amber); }
 
/* ---------- background modes ---------- */
/* Four named modes with an explicit reason to reach for each — see the
   approved design-system doc. Applied as a class on the <section>, same
   level as the existing .banner dark treatment. */
.bg-light { background: var(--white); }
.bg-soft { background: var(--surface-soft); }
.bg-dark { background: var(--black); color: var(--white); }
.bg-charcoal { background: var(--charcoal); color: var(--white); }
.bg-dark .kicker:not(.amber), .bg-charcoal .kicker:not(.amber) { color: var(--white); }
.bg-dark h2, .bg-dark h3, .bg-charcoal h2, .bg-charcoal h3 { color: var(--white); }
.bg-dark p, .bg-charcoal p { color: var(--white-60); }
 
/* Spotlight — dark base, one controlled amber accent. Reused by the
   existing .banner final-CTA treatment and by each page's single
   signature moment. Not a general "make it fancy" wrapper — the amber
   glow is deliberately faint and off to one side, not a full bloom. */
.bg-spotlight { position: relative; background: var(--black); color: var(--white); overflow: hidden; }
.bg-spotlight::before {
  content: '';
  position: absolute;
  top: -25%;
  right: -10%;
  width: 55%;
  height: 90%;
  background: radial-gradient(circle, rgba(var(--amber-rgb), 0.10) 0%, rgba(0,0,0,0) 70%);
  pointer-events: none;
}
.bg-spotlight .wrap { position: relative; z-index: 2; }
.bg-spotlight .kicker:not(.amber) { color: var(--white); }

/* ---------- background primitives (Stage 1) ----------
   Opt-in, class-based atmosphere layers. Each attaches as a ::before/::after
   on the section itself, so no markup changes are needed to use one later —
   just add the class. Restrained by design: everything sits behind content
   at low opacity via z-index:0, while `.wrap` is lifted to z-index:2 so text
   is never competing with the texture behind it. Combine with at most ONE
   primitive per section; these are not meant to be stacked. Not yet applied
   to any page — this is the toolkit later stages will draw from. */

/* Fine technical grid — evenly spaced hairlines, barely-there. */
.bg-grid-fine { position: relative; overflow: hidden; }
.bg-grid-fine::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--white-08) 1px, transparent 1px),
    linear-gradient(to bottom, var(--white-08) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}
.bg-light.bg-grid-fine::before, .bg-soft.bg-grid-fine::before {
  background-image:
    linear-gradient(to right, var(--black-08) 1px, transparent 1px),
    linear-gradient(to bottom, var(--black-08) 1px, transparent 1px);
}

/* Soft dot-grid — quieter alternative, reads as texture rather than a grid. */
.bg-dot-grid { position: relative; overflow: hidden; }
.bg-dot-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--black-15) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.bg-dark.bg-dot-grid::before, .bg-charcoal.bg-dot-grid::before, .bg-spotlight.bg-dot-grid::before {
  background-image: radial-gradient(var(--white-15) 1px, transparent 1px);
}

/* Directional glows — a single controlled light source, not a full bloom.
   Named by corner/color so intent is obvious at the call site. */
.bg-glow-blue { position: relative; overflow: hidden; }
.bg-glow-blue::after {
  content: '';
  position: absolute;
  top: -10%; left: -5%;
  width: 55%; height: 70%;
  background: radial-gradient(circle, var(--glow-blue-soft) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.bg-glow-amber { position: relative; overflow: hidden; }
.bg-glow-amber::after {
  content: '';
  position: absolute;
  bottom: -15%; right: -5%;
  width: 50%; height: 65%;
  background: radial-gradient(circle, var(--glow-amber-soft) 0%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Drifting line — a generalized version of the SEO/Google Ads hero motif
   (see .service-hero-motif below) so any section can opt into the same
   slow/fast pacing, not just a service-page hero. */
.bg-line-drift { position: relative; overflow: hidden; }
.bg-line-drift::before {
  content: '';
  position: absolute;
  left: -5%; right: -5%; top: 40%; height: 1px;
  background: linear-gradient(90deg, rgba(var(--blue-rgb), 0) 0%, var(--glow-amber-strong) 50%, rgba(var(--blue-rgb), 0) 100%);
  animation: motifDriftSlow 14s ease-in-out infinite;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}
.bg-line-drift.is-fast::before { animation: motifPulseFast 3.2s ease-in-out infinite; }

/* Oversized ghost typography — a faint, large numeral or word behind
   content. Usage: add data-ghost="02" to the element carrying this class,
   and aria-hidden is not required on the pseudo-element itself (CSS
   generated content is already invisible to screen readers), but any
   sibling used purely for decoration should still be marked aria-hidden. */
.bg-ghost-type { position: relative; overflow: hidden; }
.bg-ghost-type::before {
  content: attr(data-ghost);
  position: absolute;
  right: -2%; bottom: -12%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(160px, 24vw, 340px);
  line-height: 1;
  color: var(--white-08);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}
.bg-light.bg-ghost-type::before, .bg-soft.bg-ghost-type::before { color: var(--black-08); }

/* Subtle grain — very low-opacity static noise for texture on large dark
   surfaces. No animation, so it costs nothing at runtime. */
.bg-noise { position: relative; }
.bg-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  z-index: 1;
}

/* Any section using a background primitive needs its content lifted above
   the pseudo-element layer. `.wrap` is a direct child of every section
   sitewide, so this single rule covers all of the primitives above. */
.bg-grid-fine > .wrap, .bg-dot-grid > .wrap, .bg-glow-blue > .wrap,
.bg-glow-amber > .wrap, .bg-line-drift > .wrap, .bg-ghost-type > .wrap,
.bg-noise > .wrap {
  position: relative;
  z-index: 2;
}

/* ---------- elevation utilities (Stage 1) ----------
   A real tier system to replace "every card/button/panel gets the same
   hard shadow." Existing components (.card, .t-card, .work-showcase, etc.)
   keep their current shadow for now — reassigning tiers across the site is
   a later-stage, page-by-page decision, not a global find-and-replace.
   These classes are the toolkit that decision will draw from. */
.elevate-1 { box-shadow: var(--shadow-xs); }
.elevate-2 { box-shadow: var(--shadow-sm); }
.elevate-3 { box-shadow: var(--shadow-md); }
.elevate-4 { box-shadow: var(--shadow-lg); }
.elevate-signature { box-shadow: var(--shadow-signature); }
.elevate-signature-amber { box-shadow: var(--shadow-signature-amber); }
.elevate-glow-blue { box-shadow: var(--shadow-glow-blue); }
.elevate-glow-amber { box-shadow: var(--shadow-glow-amber); }

/* ---------- section header treatments ---------- */
/* A. Centered — the existing .center-intro, unchanged, still the default
   for standard grid sections. */
 
/* B. Left-aligned editorial — for split layouts and higher-weight sections. */
.section-header--left { text-align: left; max-width: 640px; margin: 0 0 56px; }
.section-header--left h2 { margin-bottom: 0; }
.section-header--left p { margin: 20px 0 0; max-width: 480px; }
 
/* C. Oversized statement — 1–2 per page, maximum. Large-scale numeral or
   single-line claim; minimal supporting copy. */
.section-header--oversized { text-align: center; max-width: 820px; margin: 0 auto 56px; }
.section-header--oversized .stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(56px, 8vw, 108px);
  line-height: 1;
  color: var(--amber);
  margin-bottom: 12px;
}
.bg-light .section-header--oversized .stat-num,
.bg-soft .section-header--oversized .stat-num { color: var(--blue); }
.section-header--oversized h2 { font-size: clamp(32px, 4vw, var(--fs-h1)); }
.section-header--oversized p { margin: 20px auto 0; max-width: 620px; }
 
/* ---------- quiet detail-row list ---------- */
/* Replaces dense .card grids for long enumerations (10+ items) — an icon,
   a title and a short description, read as a scannable list rather than
   a wall of shadow-boxed tiles competing for the same attention. */
.detail-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--black-15); }
.detail-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 26px 28px;
  border-bottom: 1px solid var(--black-15);
  transition: background var(--dur-fast) ease;
}
.detail-row:nth-child(odd) { border-right: 1px solid var(--black-15); }
.detail-row:hover { background: rgba(var(--blue-rgb), 0.03); }
.detail-row .icon-svg { margin-top: 2px; }
.detail-row h3 { font-size: var(--fs-body); margin-bottom: 4px; }
.detail-row p { font-size: var(--fs-small); color: var(--black-60); margin-bottom: 0; }
.detail-group-label {
  grid-column: 1 / -1;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 28px 28px 4px;
}
.detail-group-label:first-child { padding-top: 0; }
 
@media (max-width: 767px) {
  .detail-list { grid-template-columns: 1fr; }
  .detail-row:nth-child(odd) { border-right: none; }
  .detail-row { padding: 20px 4px; }
  .detail-group-label { padding-left: 4px; padding-right: 4px; }
}
 
/* ---------- hover interaction tiers ---------- */
/* Signature: full hard-shadow flip — same mechanic as .card:hover /
   .btn:hover, reserved for the featured card(s) per section. */
.hover-signature { transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.hover-signature:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--amber); border-color: var(--amber); }
 
/* Standard: subtle lift, no shadow flip. */
.hover-standard { transition: transform var(--dur-fast) ease, border-color var(--dur-fast) ease, background-color var(--dur-fast) ease; }
.hover-standard:hover { transform: translateY(-3px); border-color: var(--blue); }
 
/* Quiet: color/arrow movement only, no transform on the container. */
.hover-quiet { transition: color var(--dur-fast) ease; }
.hover-quiet:hover { color: var(--blue); }
 
/* ---------- staggered reveal motion ---------- */
/* Add class="stagger" to the direct child wrapper (.grid, .detail-list,
   .feature-list, etc.) of a .reveal section so its children choreograph
   in one-by-one instead of the whole block arriving as a single fade.
   Purely CSS — reuses the existing .reveal/.is-visible toggle already
   driven by the IntersectionObserver in main.js. Respects reduced-motion
   via the global rule in base.css. */
.reveal .stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-snap), transform var(--dur-slow) var(--ease-snap);
}
.reveal.is-visible .stagger > * { opacity: 1; transform: none; }
.reveal .stagger > *:nth-child(1) { transition-delay: 0ms; }
.reveal .stagger > *:nth-child(2) { transition-delay: 70ms; }
.reveal .stagger > *:nth-child(3) { transition-delay: 140ms; }
.reveal .stagger > *:nth-child(4) { transition-delay: 210ms; }
.reveal .stagger > *:nth-child(5) { transition-delay: 280ms; }
.reveal .stagger > *:nth-child(6) { transition-delay: 350ms; }
.reveal .stagger > *:nth-child(7) { transition-delay: 420ms; }
.reveal .stagger > *:nth-child(8) { transition-delay: 490ms; }
.reveal .stagger > *:nth-child(n+9) { transition-delay: 560ms; }
.no-js .reveal .stagger > * { opacity: 1; transform: none; }

/* ---------- motion vocabulary extensions (Stage 3) ----------
   Companions to .stagger above, for sections where plain fade+rise
   everywhere would flatten the page into visual sameness. Same
   relationship to .reveal/.is-visible — these go on an INNER element (an
   image, a row, a group of stat blocks) while the ancestor section's
   .reveal/.is-visible toggle (already driven by the IntersectionObserver
   in main.js) does the actual triggering. No JS changes needed for any
   of these. */

/* Clip reveal — wipes in from the left edge. For images/panels. */
.reveal-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--dur-slower) var(--ease-out);
}
.reveal.is-visible .reveal-clip { clip-path: inset(0 0 0 0); }
.no-js .reveal-clip { clip-path: inset(0 0 0 0); }

/* Scale reveal — settles into place rather than sliding up. For single
   elements (a quote block, a panel) that shouldn't use the list-oriented
   stagger below. */
.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity var(--dur-slow) var(--ease-snap), transform var(--dur-slow) var(--ease-snap);
}
.reveal.is-visible .reveal-scale { opacity: 1; transform: none; }
.no-js .reveal-scale { opacity: 1; transform: none; }

/* Stagger, scale variant — same nth-child cadence as .stagger, settling
   into place instead of rising. Suits numbered nodes / stat blocks. */
.reveal .stagger-scale > * {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--dur-slow) var(--ease-snap), transform var(--dur-slow) var(--ease-snap);
}
.reveal.is-visible .stagger-scale > * { opacity: 1; transform: none; }
.reveal .stagger-scale > *:nth-child(1) { transition-delay: 0ms; }
.reveal .stagger-scale > *:nth-child(2) { transition-delay: 70ms; }
.reveal .stagger-scale > *:nth-child(3) { transition-delay: 140ms; }
.reveal .stagger-scale > *:nth-child(4) { transition-delay: 210ms; }
.reveal .stagger-scale > *:nth-child(5) { transition-delay: 280ms; }
.reveal .stagger-scale > *:nth-child(6) { transition-delay: 350ms; }
.no-js .reveal .stagger-scale > * { opacity: 1; transform: none; }

/* Stagger, horizontal variant — for list rows, where movement reading
   left-to-right suits the content better than rising vertically. */
.reveal .stagger-left > * {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity var(--dur-slow) var(--ease-snap), transform var(--dur-slow) var(--ease-snap);
}
.reveal.is-visible .stagger-left > * { opacity: 1; transform: none; }
.reveal .stagger-left > *:nth-child(1) { transition-delay: 0ms; }
.reveal .stagger-left > *:nth-child(2) { transition-delay: 60ms; }
.reveal .stagger-left > *:nth-child(3) { transition-delay: 120ms; }
.reveal .stagger-left > *:nth-child(4) { transition-delay: 180ms; }
.reveal .stagger-left > *:nth-child(5) { transition-delay: 240ms; }
.reveal .stagger-left > *:nth-child(6) { transition-delay: 300ms; }
.no-js .reveal .stagger-left > * { opacity: 1; transform: none; }

/* Selected Work: the two stacked case studies wipe in a touch after the
   large featured one, instead of all three moving in perfect unison. */
.case-stack .case-image.reveal-clip { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal-clip, .reveal-scale { transition: none !important; }
}

/* ---------- single-column linked detail row (Connections section) ---------- */
.detail-list--single { grid-template-columns: 1fr; max-width: 820px; margin: 0 auto; }
.detail-row--link {
  align-items: center;
  color: inherit;
}
.detail-row--link:nth-child(odd) { border-right: none; }
.detail-row--link .detail-row-arrow { margin-left: auto; flex-shrink: 0; }
.detail-row--link:hover { background: rgba(var(--blue-rgb), 0.04); }
.detail-row--link:hover .detail-row-arrow { color: var(--blue); }
@media (max-width: 600px) {
  .detail-row--link { flex-wrap: wrap; }
  .detail-row-arrow { margin-left: 42px; }
}
 
/* ---------- service-page hero motifs ---------- */
/* SEO ("organic"): a slow, gently drifting line — compounding, patient.
   Google Ads ("performance"): short, quicker pulses — immediate, metered.
   Same mechanism (an absolutely positioned decorative SVG-less CSS line),
   different pacing, so the two pages feel different without needing two
   separate canvas builds. Purely decorative, sits behind hero content. */
.service-hero { position: relative; overflow: hidden; }
.service-hero-motif {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.service-hero-motif::before {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--blue-rgb),0) 0%, rgba(var(--amber-rgb),0.5) 50%, rgba(var(--blue-rgb),0) 100%);
}
.motif-organic .service-hero-motif::before { top: 32%; animation: motifDriftSlow 14s ease-in-out infinite; }
.motif-organic .service-hero-motif::after {
  content: '';
  position: absolute;
  left: -5%; right: -5%; top: 62%; height: 1px;
  background: linear-gradient(90deg, rgba(var(--blue-rgb),0) 0%, rgba(var(--blue-rgb),0.35) 50%, rgba(var(--blue-rgb),0) 100%);
  animation: motifDriftSlow 18s ease-in-out infinite reverse;
}
.motif-performance .service-hero-motif::before { top: 40%; animation: motifPulseFast 3.2s ease-in-out infinite; }
.motif-performance .service-hero-motif::after {
  content: '';
  position: absolute;
  left: -5%; right: -5%; top: 58%; height: 1px;
  background: linear-gradient(90deg, rgba(var(--blue-rgb),0) 0%, rgba(var(--blue-rgb),0.4) 50%, rgba(var(--blue-rgb),0) 100%);
  animation: motifPulseFast 2.1s ease-in-out infinite 0.4s;
}
 
@keyframes motifDriftSlow {
  0%, 100% { transform: translateX(-3%); opacity: 0.5; }
  50% { transform: translateX(3%); opacity: 0.9; }
}
@keyframes motifPulseFast {
  0%, 100% { transform: scaleX(0.9); opacity: 0.4; }
  50% { transform: scaleX(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .service-hero-motif::before, .service-hero-motif::after { animation: none; }
  .bg-line-drift::before { animation: none; }
}

/* =========================================================
   LEGAL PAGES (Privacy Policy / Terms & Conditions) — additive only.
   Nothing above this line was changed. Deliberately NOT built from
   .card/.grid — legal content is read top-to-bottom, not scanned as
   tiles, so it gets its own quiet, reading-focused treatment: a light
   (not dark) hero, a comfortable measure, numbered sections with a
   restrained amber numeral (the only accent color used on the page),
   and a table of contents. Motion is limited to a single hero fade —
   no staggered reveals, since choreographing legal text working
   against readability is exactly what this system is meant to avoid.
   ========================================================= */
 
.legal-hero {
  background: var(--white);
  padding: 100px 0 40px;
  border-bottom: 1px solid var(--black-15);
}
.legal-hero .wrap { max-width: 760px; }
.legal-hero .kicker { color: var(--blue); }
.legal-hero h1 { font-size: var(--fs-h1); margin-bottom: 18px; }
.legal-hero > .wrap > p { color: var(--black-60); font-size: var(--fs-body-lg); margin-bottom: 20px; max-width: 620px; }
 
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: var(--fs-small);
  color: var(--black-60);
}
.legal-meta strong { color: var(--black); font-weight: 600; }
 
.legal-body { background: var(--white); }
.legal-body .wrap { max-width: 760px; padding-top: 56px; padding-bottom: 40px; }
 
/* ---- Table of contents ---- */
.legal-toc {
  background: var(--surface-soft, #F5F5F3);
  border: 1px solid var(--black-15);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin-bottom: 56px;
}
.legal-toc h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black-60);
  margin-bottom: 18px;
}
.legal-toc ol {
  list-style: none;
  counter-reset: legaltoc;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
}
.legal-toc li { counter-increment: legaltoc; }
.legal-toc a {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: var(--fs-small);
  color: var(--black);
  border-bottom: 1px solid transparent;
  line-height: 1.4;
}
.legal-toc a::before {
  content: counter(legaltoc) '.';
  color: var(--blue);
  font-weight: 600;
  flex-shrink: 0;
}
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--blue); border-bottom-color: var(--blue); }
 
/* ---- Numbered sections ---- */
.legal-section {
  scroll-margin-top: 110px;
  padding: 36px 0;
  border-bottom: 1px solid var(--black-15);
}
.legal-section:last-of-type { border-bottom: none; padding-bottom: 0; }
.legal-section h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: var(--fs-h3);
  margin-bottom: 16px;
}
.legal-section h2 .legal-num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--amber);
  flex-shrink: 0;
}
.legal-section h3 { font-size: var(--fs-h4); margin: 24px 0 12px; }
.legal-section p { color: var(--black-60); margin-bottom: 16px; max-width: 68ch; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul, .legal-section ol.legal-list {
  color: var(--black-60);
  margin: 0 0 16px 22px;
  max-width: 66ch;
}
.legal-section li { margin-bottom: 8px; line-height: 1.65; }
.legal-section li:last-child { margin-bottom: 0; }
.legal-section strong { color: var(--black); font-weight: 600; }
.legal-section a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.legal-section a:hover { color: var(--black); }
 
.legal-placeholder {
  background: rgba(var(--amber-rgb), 0.1);
  border: 1px dashed rgba(var(--amber-rgb), 0.6);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-weight: 600;
  white-space: nowrap;
}
 
.legal-flag {
  margin-top: 8px;
  padding: 14px 18px;
  background: rgba(var(--blue-rgb), 0.04);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-small);
  color: var(--black-60);
}
 
.legal-back-to-top {
  display: inline-flex;
  margin-top: 40px;
  font-size: var(--fs-small);
}
 
@media (max-width: 767px) {
  .legal-hero { padding: var(--section-pad-mobile) 0 32px; }
  .legal-toc { padding: 22px 20px; }
  .legal-toc ol { grid-template-columns: 1fr; }
  .legal-body .wrap { padding-top: 40px; }
  .legal-section { padding: 28px 0; }
}
 
 

/* =========================================================
   PAGE HERO CANVAS SYSTEM (additive only) — animated, canvas-
   driven hero backgrounds for every page other than the
   homepage, in the same spirit as the homepage's #hero-canvas
   (mouse-reactive glow + floating nodes) but with a unique
   scene per page, driven from main.js via [data-hero]. Nothing
   above this line was changed. Classes are scoped to each
   page's own hero section (never bare .banner), so the many
   other .banner CTA sections sitewide are unaffected. A static
   CSS gradient/grid fallback is included per hero so the section
   still reads correctly with JS disabled or under
   prefers-reduced-motion (main.js skips the animation loop in
   both those cases, matching the homepage canvas's own pattern).
   ========================================================= */

.page-hero { position: relative; overflow: hidden; }
.page-hero > .wrap { position: relative; z-index: 2; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* Static fallback backgrounds — one quiet, on-brand gradient per page so
   the hero never looks empty before/without canvas paint. */
.hero-about       { background: radial-gradient(circle at 78% 45%, rgba(var(--blue-rgb), .14) 0%, rgba(0,0,0,0) 60%), var(--black); }
.hero-services    { background: radial-gradient(circle at 75% 50%, rgba(var(--amber-rgb), .10) 0%, rgba(0,0,0,0) 62%), var(--black); }
.hero-social      { background: radial-gradient(circle at 76% 40%, rgba(var(--blue-rgb), .16) 0%, rgba(0,0,0,0) 58%), var(--black); }
.hero-content     { background: radial-gradient(circle at 74% 55%, rgba(var(--amber-rgb), .12) 0%, rgba(0,0,0,0) 60%), var(--black); }
.hero-web         { background: radial-gradient(circle at 76% 48%, rgba(var(--blue-rgb), .15) 0%, rgba(0,0,0,0) 60%), var(--black); }
.hero-strategy    { background: radial-gradient(circle at 70% 60%, rgba(var(--amber-rgb), .12) 0%, rgba(0,0,0,0) 62%), var(--black); }
.hero-contact     { background: radial-gradient(circle at 82% 50%, rgba(var(--blue-rgb), .12) 0%, rgba(0,0,0,0) 55%), var(--black); }
.hero-insights    { background: radial-gradient(circle at 88% 4%, rgba(var(--blue-rgb), .06) 0%, rgba(0,0,0,0) 60%), var(--white); }
.legal-hero.hero-privacy, .legal-hero.hero-terms { background: var(--white); }

@media (max-width: 600px) {
  /* Canvas keeps running on mobile (main.js lightens particle count the
     same way the homepage canvas already does at <768px) but the fallback
     gradient is toned down so it never fights the stacked text above it. */
  .hero-about, .hero-services, .hero-social, .hero-content, .hero-web,
  .hero-strategy, .hero-contact { background-color: var(--black); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-canvas { display: none; }
}

/* =========================================================
   PREMIUM SERVICES-OVERVIEW CARDS (services.php ONLY)
   Additive only. Nothing above this line was changed. Scoped
   entirely to .xova-svc-card, applied only to the six carousel
   slides on services.php's "Six Disciplines" section. Reuses
   the existing .services-carousel / .services-carousel-slide /
   .services-carousel-viewport scroll-snap system as-is (see the
   "HOME — SERVICES CAROUSEL" block above) — same JS, same
   flex-basis math, same prev/next buttons. index.php's home
   carousel still uses the original .card/.motif-* markup and is
   completely unaffected: every rule below keys off .xova-svc-card,
   a class only present on services.php's slides.
   ========================================================= */

/* Reveal the glow outside the slide's own clipping box, but only for
   slides that opt in via .xova-svc-card — every other use of
   .services-carousel-slide (index.php) keeps its original overflow:hidden
   so the existing corner motifs still bleed/clip exactly as before. The
   viewport already reserves extra padding/negative-margin for exactly
   this kind of hover bleed (see .services-carousel-viewport above). */
.services-carousel-slide.xova-svc-card {
  overflow: visible;
  border-radius: var(--radius-lg);
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  transition: transform var(--dur-base) var(--ease-out);
}

/* Per-service accent — alternates blue/amber like the rest of the site's
   card--accent-blue pattern, used to tint the icon tile and the ring's
   brightest arc so each service reads slightly differently while staying
   one family. */
.xova-svc-seo,      .xova-svc-social,  .xova-svc-web      { --svc-accent-rgb: var(--blue-rgb); }
.xova-svc-ppc,       .xova-svc-content, .xova-svc-strategy { --svc-accent-rgb: var(--amber-rgb); }

/* ---- animated luminous ring ----
   A rotating conic-gradient, sized to 200% and centered, clipped by its
   own overflow:hidden wrapper (inset:0, radius inherited from the card).
   This never depends on the slide's own overflow, so it works identically
   whether the parent is clipped or not. The glass surface below sits on
   top with a small margin, exposing only a slim luminous ring. */
.xova-svc-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.xova-svc-ring::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg,
    rgba(var(--blue-rgb), 0) 0deg,
    rgba(var(--blue-rgb), .55) 35deg,
    rgba(150, 195, 255, .9) 60deg,
    rgba(var(--amber-rgb), .95) 85deg,
    rgba(var(--blue-rgb), .55) 110deg,
    rgba(var(--blue-rgb), 0) 150deg,
    rgba(var(--blue-rgb), 0) 360deg);
  transform: translate(-50%, -50%);
  opacity: .4;
  animation: xova-svc-ring-spin 11s linear infinite;
  transition: opacity var(--dur-base) var(--ease-out);
}
.xova-svc-card:hover .xova-svc-ring::before,
.xova-svc-card:focus-within .xova-svc-ring::before {
  opacity: .85;
}
@keyframes xova-svc-ring-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---- dark glass surface ----
   Sits inset by the ring's thickness (the "margin" below is what exposes
   the ring), predominantly dark/charcoal with a faint top-left highlight
   for depth, not a bright glass template. */
.xova-svc-surface {
  position: relative;
  z-index: 1;
  margin: 1.5px;
  height: calc(100% - 3px);
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--radius-lg) - 1.5px);
  padding: 36px 30px;
  background:
    linear-gradient(155deg, var(--white-08) 0%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(200deg, var(--ink-900) 0%, var(--ink-950) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 var(--white-08), inset 0 0 0 1px rgba(255, 255, 255, .03);
}

/* Soft ambient glow behind the whole card — restrained, not a full bloom,
   and colored per service accent so it complements (never overwhelms) the
   ring above it. */
.xova-svc-card::after {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: -1;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .6), 0 0 46px -22px rgba(var(--svc-accent-rgb), .45);
  opacity: .7;
  transition: opacity var(--dur-base) var(--ease-out);
}
.xova-svc-card:hover::after { opacity: 1; }

/* Subtle lift on hover/focus — no scale, no rotation. */
.xova-svc-card:hover,
.xova-svc-card:focus-within {
  transform: translateY(-4px);
}

/* ---- icon tile + per-service line-motif ---- */
.xova-svc-visual {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: linear-gradient(155deg, rgba(var(--svc-accent-rgb), .20), rgba(var(--svc-accent-rgb), .04));
  border: 1px solid rgba(var(--svc-accent-rgb), .35);
  overflow: hidden;
}
.xova-svc-visual .icon-svg {
  width: 26px;
  height: 26px;
  color: rgb(var(--svc-accent-rgb));
  position: relative;
  z-index: 1;
}
/* A faint, larger echo of a related line-shape sits behind the icon —
   the per-service "visual language" (radar rings for SEO, an ascending
   line for PPC, a node network for Social, text rules for Content, a
   browser frame for Web, bar chart for Strategy). Deliberately quiet: low
   opacity, no separate colors beyond the shared accent. */
.xova-svc-visual-motif {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  fill: none;
  stroke: rgb(var(--svc-accent-rgb));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .3;
}

.xova-svc-index {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  color: rgba(var(--svc-accent-rgb), .85);
  margin-bottom: 10px;
}
.xova-svc-surface h3 { color: var(--white); font-size: var(--fs-h4); margin-bottom: 10px; }
.xova-svc-surface p { color: var(--white-60); font-size: var(--fs-small); margin-bottom: 18px; flex: 1 1 auto; }
.xova-svc-surface .link-arrow { color: var(--white); border-color: rgb(var(--svc-accent-rgb)); align-self: flex-start; }
.xova-svc-surface .link-arrow:hover { color: rgb(var(--svc-accent-rgb)); }

/* Keyboard focus: the card itself, not just the inner link, gets the
   sitewide focus ring, since the whole card visually reacts on interaction. */
.xova-svc-card:focus-within {
  outline: none;
}
.xova-svc-surface .link-arrow:focus-visible {
  outline: 3px solid rgb(var(--svc-accent-rgb));
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

@media (max-width: 767px) {
  .xova-svc-surface { padding: 28px 24px; }
}

/* Reduced motion: the sitewide rule in base.css already collapses
   animation-duration to ~0 and forces a single iteration, which freezes
   the ring in place; this just removes the hover lift so the card stays
   fully static, and keeps a slightly brighter ring by default so the
   luminous-border look doesn't disappear entirely under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .xova-svc-card:hover,
  .xova-svc-card:focus-within {
    transform: none;
  }
  .xova-svc-ring::before {
    opacity: .6;
  }
}

/* =========================================================
   ABOUT PAGE — CARD GROUP VARIETY + MOBILE SWIPE (about.php ONLY)
   Additive only. Nothing above this line was changed. Three
   different card-group treatments (Our Approach / What We
   Believe / Why Xova Digital) so about.php doesn't read as the
   same card repeated four times, plus a CSS-only "one card at a
   time" swipeable mode at mobile widths — no JS, so it can never
   fight the real (JS-driven) services carousel. "Who We Work
   With" deliberately reuses the existing .help-list component
   instead (see about.php) rather than a fourth card style, and
   already handles mobile on its own.
   ========================================================= */

/* ---- Our Approach: bold "signature" numbered steps, blue ---- */
.card--approach {
  text-align: center;
  border-color: var(--blue);
  box-shadow: 6px 6px 0 var(--blue);
}
.card--approach:hover { border-color: var(--amber); box-shadow: 10px 10px 0 var(--black); }
.card--approach .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-heading);
}

/* ---- What We Believe: quiet editorial rows, amber left accent ---- */
.card--believe {
  border: none;
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-xs) var(--radius-md) var(--radius-md) var(--radius-xs);
  background: var(--surface-soft);
  box-shadow: none;
}
.card--believe:hover {
  border-left-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card--believe .icon {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  font-family: var(--font-heading);
  color: var(--blue);
  margin-bottom: 14px;
}

/* ---- Why Xova Digital: real icon tiles instead of emoji, alternating accent ---- */
.card--why { display: flex; flex-direction: column; }
.card--why .icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: 18px;
  background: rgba(var(--blue-rgb), .08);
  border: 1px solid rgba(var(--blue-rgb), .28);
}
.card--why .icon-tile .icon-svg { width: 24px; height: 24px; color: var(--blue); margin: 0; }
.card--why-amber .icon-tile { background: rgba(var(--amber-rgb), .16); border-color: rgba(var(--amber-rgb), .55); }
.card--why-amber .icon-tile .icon-svg { color: var(--black); }
.card--why-blue:hover { border-color: var(--blue); box-shadow: 10px 10px 0 var(--blue); }
.card--why-amber:hover { border-color: var(--black); box-shadow: 10px 10px 0 var(--amber); }

/* ---- Mobile swipe hint (hidden on desktop/tablet) ---- */
.swipe-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--black-60);
  margin: -8px 0 18px;
}

/* ---- Mobile-only swipeable "one card" carousel ----
   CSS-only: native horizontal scroll-snap, no JS, so it can never
   conflict with the real (JS) services carousel. Cards peek at
   ~86% width so the next card is visibly cut off at the edge —
   the same affordance pattern already used by .services-carousel.
   tabindex="0" on the grid (added in about.php) makes it keyboard
   scrollable via the browser's native focused-scroller behavior. */
@media (max-width: 767px) {
  .mobile-swipe-grid {
    display: flex;
    /* !important is needed only here, to beat the inline justify-content:center
       some of these grids carry for their desktop/tablet centered layout —
       centering a flex line that's wider than its scroll container clips the
       start of the content in some browsers ("flexbox scroll" quirk), so
       mobile specifically must force flex-start regardless of that inline
       style. */
    justify-content: flex-start !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 14px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 4px var(--gutter) 16px;
    scroll-padding-left: var(--gutter);
  }
  .mobile-swipe-grid::-webkit-scrollbar { display: none; }
  .mobile-swipe-grid > .card {
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: center;
  }
  .mobile-swipe-grid:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 4px;
  }
  .swipe-hint { display: flex; }
}