/* ============================================================
   AIN UAE — Design System
   Light premium interface — official brand palette
   Primary: #FFFFFF / #191919 / #848484
   Grayscale: Cloud #EDEFF7, Smoke #D3D6E0, Steel #BCBFCC,
   Space #9DA2B3, Graphite #6E7180, Arsenic #40424D,
   Phantom #1E1E24, Black #000000
   ============================================================ */

:root {
  /* Color tokens */
  --bg: #ffffff;
  --bg-2: #EDEFF7;              /* Cloud — alternating section band */
  --surface: #ffffff;
  --surface-2: #EDEFF7;
  --line: rgba(25, 25, 25, 0.09);
  --line-strong: rgba(25, 25, 25, 0.22);
  --txt: #191919;               /* brand primary ink */
  --txt-2: #6E7180;             /* Graphite */
  --muted: #9DA2B3;             /* Space */
  --accent: #191919;
  --accent-dim: rgba(25, 25, 25, 0.06);
  --accent-2: #40424D;          /* Arsenic */
  --success: #2f8a5b;
  --danger: #c14545;
  --grad: linear-gradient(96deg, #020101 0%, #848484 55%, #191919 100%);

  /* Type — brand typefaces */
  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "Manrope", sans-serif;
  --font-mono: "Manrope", sans-serif;

  /* Scale */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --nav-h: 96px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-pad: clamp(80px, 12vh, 150px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.3s;

  /* Z scale */
  --z-bg: 0; --z-content: 10; --z-nav: 100; --z-menu: 200; --z-cursor: 1000;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; } /* clip stray fixed/oversized overflow so mobile never gains a wider layout viewport */
html.lenis, html.lenis body { height: auto; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(25, 25, 25, 0.12); }

img, video, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.005em;
  word-spacing: 0.12em;
}
h3, h4 { font-weight: 600; }

/* Major headlines (h1/h2) carry the brand gradient in caps; sub-headings
   (h3/h4 — card titles, FAQ questions, timeline steps) stay solid ink so
   the hierarchy still reads at a glance. */
h1, h2 {
  text-transform: uppercase;
  letter-spacing: 0.01em;
  word-spacing: 0.18em;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* The word-reveal script moves headline text into child .sw spans for the
   scroll animation — background-clip:text only clips an element's own
   direct text, so once the words move out the parent has nothing left to
   clip and renders invisible. Put the same gradient on the word spans. */
h1 .sw, h2 .sw {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.h-display { font-size: clamp(1.9rem, 4.2vw, 3.5rem); font-weight: 800; }
.h-1 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); font-weight: 700; }
.h-2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; }
.h-3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; }

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mono-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mono-label::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

.lead { color: var(--txt-2); font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 62ch; }

.container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--gutter); }
section { position: relative; padding: var(--section-pad) 0; }

/* ---------- Grain + grid backdrop ---------- */
/* The grain layer must be oversized so its translate animation never reveals an
   edge — but an oversized FIXED element extends past the viewport, and mobile
   Chrome counts that as scrollable width, widening the layout viewport (which
   pushed the fixed bottom bars off-screen). So the fixed layer is now clamped to
   the viewport with overflow:hidden, and the oversized animated grain lives in a
   clipped ::before. Same look, zero overflow. */
.noise {
  position: fixed; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2000;
}
.noise::before {
  content: ""; position: absolute; inset: -50%;
  width: 200%; height: 200%;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
  mix-blend-mode: multiply;
}
@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 3%); }
}

.grid-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(25,25,25,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,25,25,0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--grad);
  z-index: calc(var(--z-nav) + 1);
}

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  border-radius: 50%;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
}
.cursor-dot { width: 6px; height: 6px; background: var(--accent); }
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(25,25,25,0.35);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), border-color 0.25s;
}
.cursor-ring.is-hover { width: 64px; height: 64px; border-color: rgba(25,25,25,0.85); }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background var(--dur), border-color var(--dur), transform 0.4s var(--ease-out), box-shadow var(--dur);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
  box-shadow: 0 12px 30px rgba(25,25,25,0.05);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav-inner {
  width: 100%; max-width: 1360px; margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo {
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.nav-logo { height: 48px; }
.nav-logo img { height: 100%; width: auto; display: block; }
.nav-logo .logo-light { display: none; }
.footer-logo { height: 38px; display: inline-block; }
.footer-logo img { height: 100%; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links > li { position: relative; }
.nav-links a.nav-link {
  display: inline-block;
  padding: 12px 20px;
  font-size: 1.02rem; font-weight: 600;
  color: var(--txt);
  border-radius: 999px;
  transition: color var(--dur), background var(--dur);
}
.nav-links a.nav-link:hover, .nav-links a.nav-link[aria-current="page"] { color: var(--txt); background: rgba(25,25,25,0.05); }
.nav-links a.nav-link[aria-current="page"] { color: var(--accent); font-weight: 700; }

/* Nav floats over a video hero until scrolled — swap to the white logo
   and light text so it stays legible against bright or dark footage. */
.nav-on-video:not(.is-scrolled) .logo-dark { display: none; }
.nav-on-video:not(.is-scrolled) .logo-light { display: block; }
.nav-on-video:not(.is-scrolled) .nav-link { color: rgba(255,255,255,0.9); text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.nav-on-video:not(.is-scrolled) .nav-link:hover,
.nav-on-video:not(.is-scrolled) .nav-link[aria-current="page"] { color: #ffffff; background: rgba(255,255,255,0.12); }
.nav-on-video:not(.is-scrolled) .nav-phone { color: rgba(255,255,255,0.85); text-shadow: 0 1px 8px rgba(0,0,0,0.35); }
.nav-on-video:not(.is-scrolled) .nav-phone:hover { color: #ffffff; }
.nav-on-video:not(.is-scrolled) .burger span { background: #ffffff; box-shadow: 0 1px 6px rgba(0,0,0,0.3); }
.nav-on-video:not(.is-scrolled) .nav-cta .btn-ghost { border-color: rgba(255,255,255,0.5); color: #fff; }

/* Homepage hero is a bright glass-tower video with a light veil (see
   .hero.on-video above) — the floating nav needs dark text here instead. */
.nav-on-light-video:not(.is-scrolled) .logo-dark { display: block !important; }
.nav-on-light-video:not(.is-scrolled) .logo-light { display: none !important; }
.nav-on-light-video:not(.is-scrolled) .nav-link { color: var(--txt); text-shadow: 0 1px 10px rgba(255,255,255,0.55); }
.nav-on-light-video:not(.is-scrolled) .nav-link:hover,
.nav-on-light-video:not(.is-scrolled) .nav-link[aria-current="page"] { color: var(--txt); background: rgba(25,25,25,0.05); }
.nav-on-light-video:not(.is-scrolled) .nav-phone { color: var(--txt); text-shadow: 0 1px 10px rgba(255,255,255,0.55); }
.nav-on-light-video:not(.is-scrolled) .nav-phone:hover { color: var(--accent); }
.nav-on-light-video:not(.is-scrolled) .burger span { background: var(--txt); box-shadow: none; }
.nav-on-light-video:not(.is-scrolled) .nav-cta .btn-ghost { border-color: var(--line-strong); color: var(--txt); }

/* Mega dropdown */
.has-mega .mega {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(680px, 90vw);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), visibility 0.25s;
  box-shadow: 0 30px 80px rgba(25,25,25,0.14);
}
.has-mega:hover .mega, .has-mega:focus-within .mega {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega a {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 14px; border-radius: var(--r-md);
  transition: background var(--dur);
}
.mega a:hover { background: rgba(25,25,25,0.045); }
.mega .mi { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-dim); color: var(--accent); }
.mega .mi svg { width: 17px; height: 17px; }
/* The link markup nests <b> inside a <span>, so the title inherited the muted
   colour below. Set it explicitly. --muted (#9DA2B3) also fails WCAG AA on white
   at this size, so descriptions use --txt-2 (#6E7180, ~4.8:1). */
.mega b { display: block; font-size: 0.92rem; font-weight: 600; color: var(--txt); }
.mega span { font-size: 0.8rem; color: var(--txt-2); line-height: 1.45; }

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-phone { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; color: var(--txt); transition: color var(--dur); }
.nav-phone:hover { color: var(--accent); }

/* Burger */
.burger { display: none; width: 44px; height: 44px; position: relative; z-index: calc(var(--z-menu) + 1); }
.burger span {
  position: absolute; left: 10px; right: 10px; height: 2px;
  background: var(--txt);
  transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 28px; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0;
  z-index: var(--z-menu);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(24px);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter);
  clip-path: circle(0% at calc(100% - 54px) 38px);
  transition: clip-path 0.6s var(--ease-out);
  visibility: hidden;
}
.mobile-menu.is-open { clip-path: circle(150% at calc(100% - 54px) 38px); visibility: visible; }
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--txt-2);
  transition: color var(--dur), padding-left var(--dur);
}
.mobile-menu a:hover { color: var(--accent); padding-left: 12px; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 600; font-size: 0.95rem;
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s, background var(--dur), color var(--dur), border-color var(--dur);
  will-change: transform;
}
.btn svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--accent); color: #ffffff; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(96deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease-out);
}
.btn-primary:hover { box-shadow: 0 12px 34px rgba(25,25,25,0.28); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--txt); background: rgba(25,25,25,0.02); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 34px);
  overflow: hidden;
  transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--line-strong);
  box-shadow: 0 24px 60px rgba(25,25,25,0.10);
}
.card .glow {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(25,25,25,0.05), transparent 45%);
}
.card:hover .glow { opacity: 1; }
.card-icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--accent-dim);
  color: var(--accent);
  margin-bottom: 20px;
  transition: transform 0.35s var(--ease-out);
}
.card-icon svg { width: 22px; height: 22px; }
.card:hover .card-icon { transform: scale(1.08) rotate(-4deg); }

/* ---------- Stats ---------- */
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-label { color: var(--muted); font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
/* ---------- Article body ---------- */
.prose { max-width: 74ch; }
.prose h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 46px 0 14px;
  text-transform: none;      /* headline caps rule is for section titles, not prose */
  word-spacing: normal;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--txt-2); margin-bottom: 18px; font-size: 1.02rem; }
.prose ul { margin: 0 0 22px; display: grid; gap: 12px; }
.prose li { color: var(--txt-2); padding-left: 24px; position: relative; font-size: 1.02rem; }
.prose li::before {
  content: "\\25C6"; position: absolute; left: 0; top: 1px;
  color: var(--accent); font-size: .62rem;
}
.prose strong { color: var(--txt); font-weight: 600; }
.prose a { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--accent); }

/* ---------- Page hero with a photographic background ---------- */
.page-hero.has-bg-image { overflow: hidden; }
.page-hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Scrim keeps the dark brand text legible over the imagery. The image is a
   bright green field, so the veil is white rather than the usual dark one. */
.page-hero .hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.62) 42%, rgba(255,255,255,.30) 72%, rgba(255,255,255,.18) 100%),
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, transparent 45%, rgba(255,255,255,.45) 100%);
}
@media (max-width: 860px) {
  /* Narrow screens put text over the middle of the frame — lift the veil. */
  .page-hero .hero-bg::after {
    background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.62) 55%, rgba(255,255,255,.72) 100%);
  }
}

/* ---------- Figures (index maps, sensor diagrams) ---------- */
.figure {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.figure img { width: 100%; height: auto; display: block; }
.figure figcaption { padding: 16px 18px 18px; border-top: 1px solid var(--line); }
.figure .fig-tag {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); font-weight: 700;
}
.figure figcaption p { color: var(--txt-2); font-size: .92rem; margin-top: 6px; }
/* Index maps are wide screenshots — cap height so the grid stays even. */
.figure.fig-map img { aspect-ratio: 16/10; object-fit: cover; }

/* ---------- Dash-marker list (asset record comparisons) ---------- */
.tick-list { display: grid; gap: 12px; margin-top: 14px; }
.tick-list li { position: relative; padding-left: 22px; color: var(--txt-2); font-size: .95rem; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 11px; height: 1px; background: var(--line-strong);
}

/* ---------- Numbered benefit list ---------- */
.num-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); counter-reset: num; }
.num-item { counter-increment: num; position: relative; padding-top: 18px; border-top: 2px solid var(--line-strong); }
.num-item::before {
  content: counter(num, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
  color: var(--accent); display: block; margin-bottom: 10px;
}
.num-item h3 { font-size: 1.05rem; margin-bottom: 8px; }
.num-item p { color: var(--txt-2); font-size: .94rem; }
@media (max-width: 900px) { .num-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .num-grid { grid-template-columns: 1fr; } }

/* ---------- Report / case-study callout ---------- */
.report {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(26px, 4vw, 48px);
  box-shadow: 0 18px 48px rgba(25,25,25,.07);
}
.report-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 28px;
}
.report-finding { border-top: 1px solid var(--line); padding: 18px 0; }
.report-finding:first-of-type { border-top: 0; }
.report-finding b { display: block; margin-bottom: 4px; }
.report-finding p { color: var(--txt-2); font-size: .94rem; }
.prio { display: inline-block; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 999px; margin-right: 10px; }
.prio-critical { background: rgba(193,69,69,.12); color: var(--danger); }
.prio-high { background: rgba(25,25,25,.08); color: var(--txt); }

/* Industry outcome figures carry short phrases ("No scaffolding") rather than
   numerals, so they need a smaller size to sit on one line and stay aligned. */
.stat-num.stat-compact { font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.18; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; position: relative; }
.marquee-track { display: flex; gap: 64px; width: max-content; animation: marquee 32s linear infinite; }
.marquee-track span {
  font-family: var(--font-mono); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--txt); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 64px;
}
.marquee-track span::after { content: "◆"; color: var(--accent); font-size: 0.6rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Video blocks ---------- */
.video-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  aspect-ratio: 16 / 9;
}
.video-frame iframe, .video-frame video { width: 100%; height: 100%; object-fit: cover; border: 0; }

/* Facade: a poster + play button stands in for the real player so no
   third-party video bundle (~1MB each) is fetched until the user asks.
   The thumbnail itself is only fetched once the frame nears the viewport. */
.video-frame[data-facade] {
  cursor: pointer;
  background: linear-gradient(150deg, var(--surface-2) 0%, var(--bg-2) 60%, #dfe3ee 100%);
  background-size: cover; background-position: center;
}
.vf-play {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: rgba(25, 25, 25, 0.16);
  transition: background var(--dur);
}
.video-frame[data-facade]:hover .vf-play { background: rgba(25, 25, 25, 0.28); }
.vf-play i {
  width: 76px; height: 76px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: grid; place-items: center;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  transition: transform 0.3s var(--ease-out);
}
.video-frame[data-facade]:hover .vf-play i { transform: scale(1.09); }
.vf-play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--txt); }
.vf-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 20px 16px;
  background: linear-gradient(180deg, transparent, rgba(10,10,10,0.72));
  color: #fff; font-size: 0.9rem; font-weight: 600;
  text-align: left;
}
.video-frame .frame-tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  background: rgba(25,25,25,0.72); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 7px 12px; border-radius: 999px; color: #ffffff;
}

.bg-video {
  position: absolute; inset: 0; z-index: 2; overflow: hidden;
}
.bg-video iframe, .bg-video video {
  position: absolute; top: 50%; left: 50%;
  width: 177.78vh; min-width: 100%;
  height: 56.25vw; min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}
.bg-video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.42) 45%, var(--bg) 100%);
}

/* Sections with a photographic/video background need light text for legibility
   even though the rest of this light-themed site uses dark text on white. */
.on-video { color: #ffffff; }
.on-video .mono-label { color: #ffffff; }
.on-video .mono-label::before { background: #ffffff; }
.on-video .lead { color: rgba(255,255,255,0.8); }
.on-video .stat-label { color: rgba(255,255,255,0.62); }
.on-video .breadcrumb { color: rgba(255,255,255,0.65); }
.on-video .breadcrumb a:hover { color: #ffffff; }
.on-video h3 { color: #ffffff; }
.on-video h1, .on-video h2, .on-video .grad-text,
.on-video h1 .sw, .on-video h2 .sw, .on-video .grad-text .sw {
  background: linear-gradient(96deg, #ffffff 0%, #D3D6E0 55%, #ffffff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.on-video .btn-primary { background: #ffffff; color: #191919; }
.on-video .btn-primary:hover { box-shadow: 0 12px 34px rgba(0,0,0,0.25); }
.on-video .btn-primary::after { background: linear-gradient(96deg, transparent 20%, rgba(25,25,25,0.18) 50%, transparent 80%); }
.on-video .btn-ghost { border-color: rgba(255,255,255,0.4); color: #ffffff; background: rgba(255,255,255,0.06); }
.on-video .btn-ghost:hover { border-color: #ffffff; color: #ffffff; background: rgba(255,255,255,0.16); }

/* The homepage hero sits on bright glass-tower footage, not dark drone
   footage — fighting it with a heavy dark scrim + white text just washes
   everything out. Let more of the video show through (a light veil instead
   of a dark one) and flip its text back to dark ink to match. */
.hero.on-video { color: var(--txt); }
.hero .bg-video::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.38) 45%, rgba(255,255,255,0.8) 100%);
}
.hero.on-video .mono-label { color: var(--txt); }
.hero.on-video .mono-label::before { background: var(--txt); }
.hero.on-video .lead { color: var(--txt-2); }
.hero.on-video .stat-label { color: var(--txt-2); }
.hero.on-video h1, .hero.on-video h2, .hero.on-video .grad-text,
.hero.on-video h1 .sw, .hero.on-video h2 .sw, .hero.on-video .grad-text .sw {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero.on-video .btn-primary { background: var(--accent); color: #ffffff; }
.hero.on-video .btn-primary:hover { box-shadow: 0 12px 34px rgba(25,25,25,0.28); }
.hero.on-video .btn-primary::after { background: linear-gradient(96deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%); }
.hero.on-video .btn-ghost { border-color: var(--line-strong); color: var(--txt); background: rgba(255,255,255,0.5); }
.hero.on-video .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.7); }

/* ---------- Section header ---------- */
.section-head { display: grid; gap: 18px; max-width: 780px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .mono-label { justify-content: center; }

/* ---------- Split reveal ---------- */
/* .split-line masks each line while its words animate in individually
   (see splitLines() in main.js) — .inner itself must stay untransformed,
   the per-word .sw spans carry the actual reveal motion now. */
.split-line { display: block; overflow: hidden; }
.split-line > .inner { display: block; }

/* Word-by-word reveal: the wrapper masks the sliding word and carries the
   inter-word gap via margin (a trailing space inside .sw would collapse). */
.sw-wrap { display: inline-block; overflow: hidden; margin-right: 0.3em; vertical-align: top; }
.sw-wrap:last-child { margin-right: 0; }

[data-reveal] { opacity: 0; transform: translateY(36px); }
html.no-js [data-reveal], html.reduced [data-reveal] { opacity: 1; transform: none; }

/* ---------- Tabs / industries ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--txt-2); font-size: 0.9rem; font-weight: 500;
  transition: all var(--dur) var(--ease-out);
  cursor: pointer;
}
.chip:hover { border-color: var(--line-strong); color: var(--txt); transform: translateY(-2px); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #ffffff; }

/* ---------- Flowing gloss-black wave background ---------- */
.wave-bg {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.wave-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  background: radial-gradient(circle at 35% 35%, rgba(25,25,25,0.22), rgba(25,25,25,0.05) 55%, transparent 75%);
  animation: wave-drift 22s ease-in-out infinite;
  will-change: transform;
}
.wave-bg span:nth-child(1) { width: 46vw; height: 46vw; top: -14%; left: -8%; animation-duration: 26s; }
.wave-bg span:nth-child(2) { width: 34vw; height: 34vw; top: 30%; right: -10%; animation-duration: 20s; animation-delay: -6s; background: radial-gradient(circle at 60% 40%, rgba(64,66,77,0.20), rgba(64,66,77,0.04) 55%, transparent 75%); }
.wave-bg span:nth-child(3) { width: 30vw; height: 30vw; bottom: -12%; left: 22%; animation-duration: 30s; animation-delay: -12s; background: radial-gradient(circle at 40% 60%, rgba(25,25,25,0.16), transparent 70%); }
.wave-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.5) 48%, transparent 66%);
  mix-blend-mode: overlay;
  animation: wave-sheen 10s ease-in-out infinite;
}
@keyframes wave-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(4%, -5%) scale(1.08); }
  66% { transform: translate(-3%, 4%) scale(0.96); }
}
@keyframes wave-sheen {
  0%, 100% { transform: translateX(-10%); opacity: 0.5; }
  50% { transform: translateX(10%); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
  .wave-bg span, .wave-bg::after { animation: none; }
}

/* ---------- Industry pain -> answer panel ---------- */
.industry-split {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(20px, 3vw, 40px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 46px);
  box-shadow: 0 18px 48px rgba(25,25,25,0.07);
}
.ip-tag {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-block; margin-bottom: 12px;
}
.ip-pain .ip-tag { color: var(--muted); }
.ip-answer .ip-tag { color: var(--accent); font-weight: 700; }
.ip-pain p { color: var(--txt-2); }
.ip-answer p { color: var(--txt); font-weight: 500; }
.ip-arrow {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  display: grid; place-items: center; flex: none;
  color: var(--accent);
}
.ip-arrow svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .industry-split { grid-template-columns: 1fr; text-align: left; }
  .ip-arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* ---------- Process timeline ---------- */
.timeline { position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line);
}
.timeline .t-progress {
  position: absolute; left: 27px; top: 8px;
  width: 2px; height: 0%;
  background: var(--grad);
}
.t-step { position: relative; padding: 0 0 46px 84px; }
.t-step:last-child { padding-bottom: 0; }
.t-dot {
  position: absolute; left: 8px; top: 2px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent);
  transition: background 0.3s, box-shadow 0.3s, border-color 0.3s, color 0.3s;
}
.t-step.is-active .t-dot { background: var(--accent); color: #ffffff; box-shadow: 0 0 24px rgba(25,25,25,0.30); border-color: var(--accent); }
.t-step h3 { margin-bottom: 8px; }
.t-step p { color: var(--txt-2); max-width: 56ch; }

/* ---------- Compare (why) ---------- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px); }
.compare-col { border-radius: var(--r-lg); border: 1px solid var(--line-strong); padding: clamp(24px, 3.4vw, 40px); position: relative; overflow: hidden; box-shadow: 0 4px 24px rgba(25,25,25,0.05); }
.compare-col.old { background: var(--bg-2); border-color: rgba(25,25,25,0.16); }
.compare-col.new { background: linear-gradient(160deg, rgba(25,25,25,0.045), var(--surface)); border-color: rgba(25,25,25,0.32); box-shadow: 0 14px 36px rgba(25,25,25,0.10); }
.compare-col h3 { margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.compare-item { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 0.94rem; }
.compare-item b { font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bar { height: 6px; border-radius: 4px; background: rgba(25,25,25,0.08); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0; width: 0%; border-radius: 4px; }
.old .bar i { background: #9DA2B3; }
.new .bar i { background: var(--grad); }
.compare-val { font-family: var(--font-mono); font-size: 0.8rem; color: var(--txt-2); margin-top: 6px; display: block; }

/* ---------- Accordion / FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left;
  padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 600;
  word-spacing: 0.08em;
  transition: color var(--dur);
}
.faq-q:hover { color: var(--accent); }
.faq-q .fi { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: transform 0.35s var(--ease-out), background 0.3s, color 0.3s; }
.faq-item.is-open .fi { transform: rotate(45deg); background: var(--accent); color: #ffffff; border-color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.45s var(--ease-out); }
.faq-a p { padding: 0 0 24px; color: var(--txt-2); max-width: 70ch; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); padding: clamp(56px, 8vw, 96px) 0 36px; position: relative; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 56px); margin-bottom: 56px; }
.footer h4 { font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; font-family: var(--font-mono); font-weight: 500; }
.footer ul li { margin-bottom: 11px; }
.footer ul a { color: var(--txt-2); font-size: 0.95rem; transition: color var(--dur), padding-left var(--dur); }
.footer ul a:hover { color: var(--accent); padding-left: 6px; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 0.85rem; }
.footer-big {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.2rem, 11vw, 9.5rem);
  line-height: 0.95; letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(25,25,25,0.25);
  user-select: none; pointer-events: none;
  margin-bottom: clamp(30px, 5vw, 60px);
  white-space: nowrap;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: calc(var(--nav-h) + clamp(70px, 10vh, 120px)) 0 clamp(56px, 8vh, 90px); position: relative; overflow: hidden; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { opacity: 0.4; }

/* ---------- Grids ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); }

/* ---------- Floating contact ---------- */
.float-cta {
  position: fixed; right: 26px; bottom: 26px; z-index: var(--z-nav);
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: #ffffff;
  display: grid; place-items: center;
  box-shadow: 0 14px 34px rgba(25,25,25,0.30);
  transition: transform 0.3s var(--ease-out);
}
.float-cta:hover { transform: scale(1.1) rotate(8deg); }
.float-cta svg { width: 24px; height: 24px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; margin-bottom: 20px; }
.field label { font-size: 0.85rem; font-weight: 600; color: var(--txt-2); }
.field label .req { color: var(--accent-2); }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--txt);
  padding: 15px 16px;
  font: inherit; font-size: 0.95rem;
  transition: border-color var(--dur), box-shadow var(--dur);
  min-height: 52px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(25,25,25,0.10);
}
.field .hint { font-size: 0.78rem; color: var(--muted); }
.field .error-msg { font-size: 0.8rem; color: var(--danger); display: none; }
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field.has-error .error-msg { display: block; }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-1 { margin-top: 12px; } .mt-2 { margin-top: 24px; } .mt-3 { margin-top: 40px; } .mt-4 { margin-top: 64px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--txt-2);
  background: rgba(25,25,25,0.03);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
.skip-link {
  position: fixed; top: -60px; left: 20px; z-index: 2000;
  background: var(--accent); color: #ffffff; font-weight: 700;
  padding: 12px 20px; border-radius: 8px;
  transition: top 0.25s;
}
.skip-link:focus { top: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav-links, .nav-phone { display: none; }
  .burger { display: block; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-2, .grid-3, .compare-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .compare-item { grid-template-columns: 100px 1fr; }
  .float-cta { right: 16px; bottom: 16px; }
  :root { --section-pad: 68px; }
}
@media (max-width: 560px) {
  .nav-cta .btn-primary { display: none; }
  .nav-logo { font-size: 1.15rem; }
}

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

/* ---------- Article sources ---------- */
.sources { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 74ch; }
.sources ul { display: grid; gap: 10px; margin-top: 12px; }
.sources li { color: var(--txt-2); font-size: .94rem; padding-left: 22px; position: relative; }
.sources li::before { content: "\2197"; position: absolute; left: 0; color: var(--accent); font-size: .8rem; }
.sources a { color: var(--txt-2); text-decoration: underline; text-underline-offset: 3px; }
.sources a:hover { color: var(--accent); }

/* ---------- Short-viewport hero ---------- */
/* A 100svh hero on a 1366x768 laptop leaves the type filling the fold and hiding
   the video behind it. Ease the scale down on short screens instead of removing
   anything: the h1 is the pages primary heading signal and has to stay. */
@media (min-width: 861px) and (max-height: 860px) {
  .hero.on-video { padding-bottom: 48px !important; }
  .hero.on-video .h-display { font-size: clamp(1.8rem, 3.1vw, 2.55rem); }
  .hero.on-video .lead { font-size: 1rem; max-width: 52ch; }
}
@media (min-width: 861px) and (max-height: 720px) {
  .hero.on-video { min-height: 640px !important; padding-bottom: 40px !important; }
  .hero.on-video .h-display { font-size: clamp(1.7rem, 2.7vw, 2.2rem); }
  .hero.on-video .lead { font-size: .95rem; max-width: 48ch; }
}

/* ---------- Cookie notice ---------- */
/* Single-row bar: one sentence, accept or reject. No preference matrix. */
.cc {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 300;
  padding: clamp(10px, 1.6vw, 18px);
  display: flex; justify-content: center;
  animation: cc-rise .4s var(--ease-out) both;
}
@keyframes cc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.cc-panel {
  width: min(760px, 100%);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 50px rgba(25, 25, 25, .14);
  padding: clamp(14px, 1.8vw, 20px) clamp(16px, 2vw, 24px);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 22px;
}
.cc-text { color: var(--txt-2); font-size: .88rem; flex: 1 1 320px; margin: 0; }
.cc-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cc-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cc-actions .btn { white-space: nowrap; padding-inline: 26px; }
@media (max-width: 560px) {
  /* Float it as a clear inset card instead of a near-full-width band: wider side
     gutters, lifted off the bottom edge, tighter padding, buttons side by side. */
  .cc { padding: 0 16px 16px; }
  .cc-panel { padding: 16px; gap: 12px; }
  .cc-text { flex-basis: 100%; font-size: .84rem; }
  .cc-actions { width: 100%; }
  .cc-actions .btn { flex: 1; justify-content: center; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cc { animation: none; } }

/* ---------- Mobile sticky CTA ---------- */
/* Desktop keeps the header phone + button, so this is phones only. */
.mcta { display: none; }
@media (max-width: 860px) {
  .mcta {
    display: flex; gap: 10px;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .mcta a {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 50px; border-radius: 999px; font-weight: 600; font-size: .95rem;
  }
  .mcta-wa { flex: 1.25; background: #25D366; color: #fff; }   /* WhatsApp green — the emblem cue */
  .mcta-wa svg { width: 20px; height: 20px; }
  .mcta-quote { background: var(--accent); color: #fff; }
  .mcta-quote svg { width: 17px; height: 17px; }
  /* Keep the fixed bar from covering the last of the footer at scroll end. */
  body { padding-bottom: 70px; }
  /* Lift the cookie card above the sticky bar while both are visible. */
  .cc { bottom: 70px; }
}

/* Honeypot field — off-screen for people, present in the DOM for bots. */
.w3f-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }