/* ======================================================================
   ALL IT SOLUTIONS — styles.css
   Pixel-perfect Contiant-style clone for All IT Solutions MSP
   ====================================================================== */


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&display=swap');

/* ----- DESIGN TOKENS ----- */
:root {
  --bg:           #E8F4F8;
  --accent:       #0771AB;
  --secondary:    #1DB7CE;
  --dark:         #2E2F30;
  --white:        #FFFFFF;
  --text-grey:    #4A6067;
  --soft-grey:    #DDDDDD;
  --tertiary:     #1C97D4;
  --font-stack:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ease-draw:    cubic-bezier(0.87, 0, 0.13, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --container-max: 1870px;
  --nav-h: 80px;
}

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

html {
  /* Native smooth scrolling removed — Lenis drives scrolling (script.js) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-stack);
  /* Fluid base size with a readable floor: ~16.4px on large monitors,
     ~15px on laptops, never below 14px (the old 1vw formula collapsed
     to unreadable ~8–13px on laptops, tablets and phones). */
  font-size: clamp(14px, 0.9vw + 2px, 16.43px);
  line-height: 1.6;
  color: var(--dark);
  background: var(--bg);
  overflow-x: hidden;
}

@media (max-width: 767px) {
  body { font-size: 15px; }
}

body.o-hidden { overflow: hidden !important; }

::selection { background: var(--accent); color: var(--white); }
::-moz-selection { background: var(--accent); color: var(--white); }

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* ----- TYPOGRAPHY ----- */
.h--huge { font-size: clamp(2.8rem, 5vw, 5.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
h1, .h1   { font-size: clamp(2rem, 3.5vw, 4rem);   font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
h2, .h2   { font-size: clamp(1.6rem, 2.8vw, 3rem);  font-weight: 700; line-height: 1.15; }
h3, .h3   { font-size: clamp(1.3rem, 2vw, 2.2rem);  font-weight: 600; line-height: 1.2; }
h4, .h4   { font-size: clamp(1.1rem, 1.4vw, 1.5rem); font-weight: 600; line-height: 1.3; }
h5, .h5   { font-size: clamp(0.9rem, 1vw, 1.1rem);  font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.05em; }
h6, .h6   { font-size: 0.85rem; font-weight: 600; }

p { font-size: clamp(0.95rem, 1.1vw, 1.15rem); color: var(--text-grey); margin-top: 1em; }
.p-leading { line-height: 1.7; }
.italic { font-style: italic; }
.text-center { text-align: center; }

/* ----- CONTAINER ----- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(20px, 3vw, 60px);
}

/* ----- SECTION SPACING ----- */
.section { padding: clamp(60px, 8vw, 140px) 0; position: relative; }

/* ======================================================================
   SKIP-SECTION FAB — Circular floating action button
   ====================================================================== */
.skip-fab {
  position: fixed;
  right: clamp(18px, 2.4vw, 36px);
  bottom: clamp(24px, 4vw, 48px);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #1DB7CE 0%, #0771AB 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 7500;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.85);
  transition:
    opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow:
    0 12px 28px rgba(7, 113, 171, 0.42),
    0 4px 10px rgba(14, 26, 44, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.skip-fab.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.skip-fab:hover {
  background: #054e76;
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 14px 30px rgba(7, 113, 171, 0.42),
    0 4px 10px rgba(14, 26, 44, 0.16);
}
.skip-fab:active {
  transform: translateY(0) scale(0.96);
}
.skip-fab__icon {
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.skip-fab:hover .skip-fab__icon {
  transform: translateY(2px);
}
.skip-fab__ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(7, 113, 171, 0.25);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.skip-fab:hover .skip-fab__ring {
  opacity: 1;
  transform: scale(1);
  animation: skip-fab-pulse 1.8s ease-out infinite;
}
@keyframes skip-fab-pulse {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(1.35); opacity: 0; }
}
/* Persistent chat-bubble tooltip — always visible when FAB is shown */
.skip-fab__tooltip {
  position: absolute;
  right: calc(100% + 18px);
  top: 50%;
  transform: translateY(-50%) translateX(12px);
  background: #FFFFFF;
  color: #0E1A2C;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 14px 22px 14px 20px;
  border-radius: 26px 26px 4px 26px; /* chat-bubble shape — squared corner near tail */
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
  box-shadow:
    0 14px 30px rgba(7, 113, 171, 0.22),
    0 4px 10px rgba(14, 26, 44, 0.14),
    0 0 0 1px rgba(7, 113, 171, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.skip-fab.is-visible .skip-fab__tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
/* "Jump to" prefix in brand color */
.skip-fab__tooltip::before {
  content: 'Jump to';
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0771AB;
}
/* No prefix when the button loops back to the top */
.skip-fab__tooltip.is-top::before {
  content: none;
}
/* Chat-bubble tail pointing at the FAB */
.skip-fab__tooltip::after {
  content: '';
  position: absolute;
  right: -10px;
  bottom: 0;
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  box-shadow: 1px 1px 0 0 rgba(7, 113, 171, 0.12);
}
.skip-fab:hover .skip-fab__tooltip {
  background: #F5FAFC;
  transform: translateY(-50%) translateX(-2px);
  box-shadow:
    0 14px 30px rgba(7, 113, 171, 0.24),
    0 3px 8px rgba(14, 26, 44, 0.12),
    0 0 0 1px rgba(7, 113, 171, 0.12);
}
@media (max-width: 600px) {
  .skip-fab__tooltip { display: none; }
}

/* ======================================================================
   PAGE LOAD CURTAIN
   ====================================================================== */
.curtain {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; pointer-events: none;
}
.curtain__panel {
  flex: 1;
  background: var(--accent);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.6s var(--ease-draw);
}
.curtain.is-open .curtain__panel { transform: scaleY(0); }
.curtain.is-open .curtain__panel:nth-child(1) { transition-delay: 0s; }
.curtain.is-open .curtain__panel:nth-child(2) { transition-delay: 0.08s; }
.curtain.is-open .curtain__panel:nth-child(3) { transition-delay: 0.16s; }
.curtain.is-open .curtain__panel:nth-child(4) { transition-delay: 0.24s; }
.curtain.is-open .curtain__panel:nth-child(5) { transition-delay: 0.32s; }
.curtain.is-hidden { display: none; }

/* ======================================================================
   COOKIE BANNER
   ====================================================================== */
.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000;
  background: var(--dark); color: var(--white);
  padding: 16px 24px;
  transform: translateY(0);
  transition: transform 0.4s ease;
}
.cookie-banner.is-hidden { transform: translateY(100%); pointer-events: none; }
.cookie-banner__inner {
  max-width: var(--container-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.cookie-banner__inner p { color: var(--soft-grey); margin: 0; font-size: 0.9rem; }
.cookie-banner__accept {
  background: var(--accent); color: var(--white); border: none;
  padding: 10px 28px; border-radius: 6px; cursor: pointer;
  font-weight: 600; font-size: 0.9rem; transition: background 0.3s;
}
.cookie-banner__accept:hover { background: var(--tertiary); }

/* ======================================================================
   SECTION 1 — STICKY NAVIGATION
   ====================================================================== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8000;
  height: var(--nav-h);
  background: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.navbar.is-scrolled {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
  backdrop-filter: blur(10px);
}

/* Dark-themed transparent navbar contrast for subpage dark hero headers */
.navbar--dark:not(.is-scrolled) .navbar__brand {
  color: var(--white);
}
.navbar--dark:not(.is-scrolled) .navbar__link {
  color: rgba(255, 255, 255, 0.85);
}
.navbar--dark:not(.is-scrolled) .navbar__link:hover {
  color: var(--white);
}
.navbar--dark:not(.is-scrolled) .navbar__hamburger span {
  background: var(--white);
}

/* Global scroll offset margin for elements with IDs to clear the fixed navbar */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}

/* Brand */
.navbar__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.15rem; color: var(--dark);
  z-index: 2;
}
.navbar__brand-logo,
.footer__brand-logo {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Center links */
.navbar__links {
  display: flex; gap: clamp(18px, 2.2vw, 32px);
  position: absolute; left: 50%; transform: translateX(-50%);
}
.navbar__link {
  position: relative; display: inline-flex; flex-direction: column;
  font-weight: 500; font-size: 0.95rem; color: var(--dark);
  padding: 4px 0;
}
.navbar__link-underline {
  width: 100%; height: 6px; position: absolute; bottom: -4px; left: 0;
}
.navbar__link-underline path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.7s var(--ease-draw);
}
.navbar__link:hover .navbar__link-underline path { stroke-dashoffset: 0; }

/* CTA */
.navbar__cta { z-index: 2; }

/* Hamburger */
.navbar__hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; width: 28px; height: 28px;
  background: none; border: none; cursor: pointer; z-index: 9001;
  padding: 0;
}
.navbar__hamburger span {
  display: block; width: 100%; height: 2px; background: var(--dark);
  transition: 0.3s ease;
}
.navbar__hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__hamburger.is-active span:nth-child(2) { opacity: 0; }
.navbar__hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 8999;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
}
.mobile-menu.is-open { opacity: 1; pointer-events: all; }
.mobile-menu__inner { display: flex; flex-direction: column; gap: 32px; text-align: center; }
.mobile-menu__link { font-size: 2rem; font-weight: 700; color: var(--dark); }

/* ======================================================================
   BUTTON SYSTEM
   ====================================================================== */
.m-button__wrap {
  display: inline-flex; align-items: center; gap: 12px;
  position: relative; cursor: pointer;
  padding: 14px 28px; border-radius: 8px;
  overflow: hidden; color: var(--white);
  transform-style: preserve-3d;
  font-weight: 600; font-size: 0.95rem;
}
.m-b-bg {
  position: absolute; inset: 0;
  background: var(--accent); border-radius: 8px;
  z-index: 0;
  transition: transform 0.45s var(--ease-draw);
  transform-origin: center;
}
.m-b-bg-dark {
  color: var(--dark) !important;
}
.m-b-bg-dark .m-b-bg {
  background: var(--white);
}
.m-b-bg-dark:hover {
  color: var(--white) !important;
}
.m-b-bg-dark:hover .m-b-bg {
  background: var(--accent);
}
/* High-contrast accent button — for use on light sections (extra POP) */
.m-b-accent {
  color: var(--white) !important;
  padding: 18px 36px !important;
  font-size: 1.02rem !important;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(7,113,171,0.32), 0 2px 6px rgba(7,113,171,0.18);
}
.m-b-accent .m-b-bg {
  background: linear-gradient(135deg, #0771AB 0%, #1C97D4 100%);
  border-radius: 10px;
}
.m-b-accent:hover .m-b-bg {
  background: linear-gradient(135deg, #095e90 0%, #0F88C5 100%);
}
/* Secondary Outline Glass Button — for secondary CTA actions like phone call */
.m-b-outline {
  color: #FFFFFF !important;
  border: 1.5px solid rgba(29, 183, 206, 0.4);
  background: rgba(14, 26, 44, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 8px;
}
.m-b-outline .m-b-bg {
  background: rgba(29, 183, 206, 0.12);
  border-radius: 8px;
}
.m-b-outline:hover {
  border-color: #1DB7CE;
  color: #1DB7CE !important;
}
.m-b-outline:hover .m-b-bg {
  background: rgba(29, 183, 206, 0.22);
}
.m-button__wrap:hover .m-b-bg { transform: scale3d(1.05, 1.05, 1); }

.m-b-text-up, .m-b-text-static {
  position: relative; z-index: 1;
  display: inline-block;
  transition: transform 0.4s var(--ease-draw), opacity 0.3s;
  white-space: nowrap;
}
.m-b-text-static {
  position: absolute; left: 28px;
  transform: translate3d(0, 120%, 0);
  opacity: 0;
}
.m-button__wrap:hover .m-b-text-up { transform: translate3d(0, -120%, 0); opacity: 0; }
.m-button__wrap:hover .m-b-text-static { transform: translate3d(0, 0, 0); opacity: 1; }

.m-b-arrow {
  position: relative; z-index: 1;
  display: inline-flex; width: 18px; height: 18px; overflow: hidden;
}
.m-b-arrow svg {
  flex-shrink: 0;
  transition: transform 0.4s var(--ease-draw);
}
.m-b-arrow svg:nth-child(2) {
  position: absolute; left: -100%;
  transition: left 0.4s var(--ease-draw);
}
.m-button__wrap:hover .m-b-arrow svg:first-child { transform: translateX(120%); }
.m-button__wrap:hover .m-b-arrow svg:nth-child(2) { left: 0; }

/* ======================================================================
   HAND-DRAWN UNDERLINE SYSTEM
   ====================================================================== */
.js-text-underline {
  position: relative; display: inline; white-space: nowrap;
}
.js-text-underline svg,
.underline-svg {
  position: absolute; bottom: -6px; left: 0;
  width: 100%; height: auto;
  pointer-events: none;
}
.js-text-underline path,
.underline-svg path {
  stroke: var(--accent);
  stroke-width: 4;
  fill: none;
  stroke-dasharray: var(--length);
  stroke-dashoffset: var(--length);
}
.js-text-underline.is-animated path,
.underline-svg.is-animated path {
  animation: title-underline 0.9s var(--ease-draw) forwards;
}
.js-text-underline[data-underline="sm"] path,
[data-underline="sm"] .underline-svg path {
  stroke-width: 3;
}

@keyframes title-underline {
  0%   { stroke-dashoffset: var(--length); }
  100% { stroke-dashoffset: 0; }
}

/* ======================================================================
   TEXT CIRCLE SYSTEM
   ====================================================================== */
.js-text-circle {
  position: relative; display: inline; white-space: nowrap;
}
.js-text-circle svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120%; height: 160%;
  pointer-events: none;
}
.js-text-circle path {
  stroke: var(--accent);
  stroke-width: 3;
  fill: none;
  stroke-dasharray: var(--length);
  stroke-dashoffset: var(--length);
}
.js-text-circle.is-animated path {
  animation: text-circle 1.2s var(--ease-draw) forwards;
}

@keyframes text-circle {
  0%   { stroke-dashoffset: var(--length); }
  100% { stroke-dashoffset: 0; }
}

/* ======================================================================
   THREE LINES SYSTEM
   ====================================================================== */
.js-three-lines {
  position: relative; display: inline;
}
.js-three-lines svg {
  position: absolute; top: -6px; right: -18px;
  width: 45px; height: 50px;
  pointer-events: none;
}
.js-three-lines path {
  stroke: var(--accent);
  stroke-width: 3;
  fill: none;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
}

/* ======================================================================
   SECTION 2 — HERO
   ====================================================================== */
.section__hero {
  padding-top: var(--nav-h);
  padding-bottom: 0; /* generic .section padding made the hero overflow the fold */
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  --translate-x: 0px;
  --translate-y: 0px;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(30px, 4vw, 60px);
  align-items: center;
  flex-grow: 1;
  min-height: 0;
  padding-top: clamp(10px, 3.5vh, 40px);
  padding-bottom: clamp(16px, 5vh, 60px);
}

/* Copy */
.hero__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.hero__headline-block { margin-bottom: 0.2em; }
.hero__h1 { color: var(--dark); }
.hero__rotator {
  position: relative; height: clamp(2.2rem, 3.5vw, 4rem);
  overflow: hidden;
}
.hero__rotator-item {
  position: absolute; top: 0; left: 0; width: 100%;
  font-size: clamp(1.4rem, 2.5vw, 2.8rem);
  font-weight: 700; color: var(--accent);
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.hero__rotator-item.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.hero__rotator-item.exit {
  opacity: 0;
  transform: translate3d(0, -100%, 0);
}

.hero__subline {
  font-size: clamp(1.4rem, 2.5vw, 2.8rem); font-weight: 700;
  color: var(--dark); margin-top: 0;
}
.hero__paragraph { max-width: 520px; margin-top: 1.2em; }
.hero__cta { margin-top: 1.5em; }


/* ======================================================================
   HERO MOSAIC — 3-Col Tessellating Tiles, Bespoke Icons, Accent Pieces
   ====================================================================== */
.hero__visual {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 0;
}
.hm-wrap {
  position: relative;
  width: 100%; max-width: 600px;
  height: 420px;
  perspective: 1400px; perspective-origin: 50% 50%;
  display: flex; align-items: center; justify-content: center;
}
.hm-shadow {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%) scaleX(0.7);
  width: 160px;
  height: 18px;
  background: radial-gradient(ellipse at center, rgba(14, 26, 44, 0.42) 0%, rgba(14, 26, 44, 0) 75%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: multiply;
}
/* Decorations */
.hm-deco { position: absolute; pointer-events: none; z-index: 0; }
.hm-deco--ring {
  width: 120px; height: 120px; border-radius: 50%;
  border: 1.5px solid rgba(29,183,206,0.16);
  top: -32px; right: -22px;
  animation: _dSpin 34s linear infinite;
}
.hm-deco--blob {
  width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(29,183,206,0.12), rgba(7,113,171,0.05));
  bottom: 20px; left: -28px;
  animation: _dFloat 7s ease-in-out infinite;
}
.hm-deco--dots {
  display: grid; grid-template-columns: repeat(3,7px); gap: 5px;
  top: 16%; right: -36px;
}
.hm-deco--dots span {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(7,113,171,0.16); display: block;
}
@keyframes _dSpin { to { transform: rotate(360deg); } }
@keyframes _dFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-8px) scale(1.06); }
}

/* ── 3D Cube Container (vertex-balanced layout) ── */
.hm-cube-parent {
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateY(0deg) rotateX(0deg);
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);
  position: relative; z-index: 1;
}

@keyframes cubeSpin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.hm-cube-spinner {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: cubeSpin 20s linear infinite;
}

.hm-cube-parent:hover .hm-cube-spinner {
  animation-play-state: paused;
}

.hm-cube {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(-35.264deg) rotateY(45deg);
}

.hm-face {
  position: absolute;
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 8px;
  transform-style: preserve-3d;
}

.hm-face--top {
  transform: rotateX(90deg) translateZ(150px);
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.1);
}
.hm-face--bottom {
  transform: rotateX(-90deg) translateZ(150px);
  background: rgba(14, 26, 44, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.25);
}
.hm-face--front {
  transform: rotateY(0deg) translateZ(150px);
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.05);
}
.hm-face--back {
  transform: rotateY(180deg) translateZ(150px);
  background: rgba(14, 26, 44, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.2);
}
.hm-face--left {
  transform: rotateY(-90deg) translateZ(150px);
  background: rgba(14, 26, 44, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.15);
}
.hm-face--right {
  transform: rotateY(90deg) translateZ(150px);
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 16px rgba(255, 255, 255, 0.08);
}

/* ── Base tile ── */
.ht {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(14,26,44,0.08);
  box-shadow: 0 1px 5px rgba(14,26,44,0.03), inset 0 1px 0 rgba(255,255,255,0.75);
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s ease, box-shadow .4s ease, border-color .35s ease;
  cursor: default; overflow: visible;
  padding: 0;
}
.ht:hover {
  transform: translateZ(24px) scale(1.04);
  box-shadow: 0 14px 28px rgba(7,113,171,0.15), 0 4px 10px rgba(14,26,44,0.06);
  border-color: rgba(7,113,171,0.25);
  z-index: 5;
}

.ht__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 8px;
  gap: 4px;
}

/* Icon */
.ht-i {
  width: clamp(22px, 3.2vh, 32px); height: clamp(22px, 3.2vh, 32px); flex-shrink: 0;
  transition: transform .4s ease;
}
.ht-i--lg { width: clamp(26px, 4vh, 40px); height: clamp(26px, 4vh, 40px); }
.ht:hover .ht-i { transform: scale(1.12) rotate(-4deg); }

/* Label */
.ht-t {
  font-family: 'Montserrat', var(--font-stack);
  font-size: clamp(0.74rem, min(1vw, 1.9vh), 0.95rem);
  font-weight: 700; color: #1a2a35;
  letter-spacing: -0.005em; line-height: 1.35;
}

/* Sizing */
.ht--w2 { grid-column: span 2; }
.ht--tall {
  grid-row: span 2;
  padding: 0;
}
.ht--tall .ht-t { font-size: clamp(0.8rem, min(1.1vw, 2vh), 1.02rem); }

/* ── Colour fills ── */
.ht--blue {
  background: linear-gradient(135deg, #0771AB, #1C97D4);
  border-color: transparent;
}
.ht--blue .ht-t { color: #fff; font-weight: 700; }

.ht--teal {
  background: linear-gradient(135deg, #1DB7CE, #17a0b5);
  border-color: transparent;
}
.ht--teal .ht-t { color: #fff; font-weight: 700; }

.ht--tint-b {
  background: rgba(230, 241, 247, 0.94);
  border-color: rgba(7, 113, 171, 0.22);
}
.ht--tint-b .ht-t { color: #0771AB; font-weight: 700; }

.ht--tint-t {
  background: rgba(233, 248, 249, 0.94);
  border-color: rgba(29, 183, 206, 0.22);
}
.ht--tint-t .ht-t { color: #0E8E9F; font-weight: 700; }

.ht--grad {
  background: linear-gradient(135deg, rgba(230, 241, 247, 0.94), rgba(233, 248, 249, 0.94));
  border-color: rgba(7, 113, 171, 0.18);
}
.ht--grad .ht-t { color: #0771AB; font-weight: 700; }

/* ── Accent tiles ── */
.ht--deco-dot, .ht--deco-ring {
  padding: 0; border: none; background: transparent;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; min-height: 0;
}
.ht--deco-dot::after {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, #0771AB, #1DB7CE); opacity: 0.4;
}
.ht--deco-ring::after {
  content: ''; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid rgba(29,183,206,0.25);
}

/* ── Grid placement: Auto-flow into solid 4x4 diamond shape ── */
.ht { grid-column: auto !important; grid-row: auto !important; }
.ht--w2 { grid-column: auto !important; }
.ht--tall { grid-row: auto !important; }

/* Hide decoration items */
.ht[data-i="d1"], .ht[data-i="d2"] { display: none !important; }

/* Accent tip styles */
.ht--accent-tip {
  background: linear-gradient(135deg, #0771AB, #1DB7CE) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(7, 113, 171, 0.22) !important;
}
.ht--accent-tip .ht-t {
  color: #fff !important;
  font-weight: 700 !important;
}

/* Photographic / fluent-emoji icon variant — keeps real 3D-rendered fidelity */
.ht-i--photo {
  width: clamp(22px, 3.4vh, 34px);
  height: clamp(22px, 3.4vh, 34px);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(7, 113, 171, 0.18));
  transition: transform 0.4s ease;
}
.ht-i--photo.ht-i--lg { width: clamp(26px, 4.2vh, 42px); height: clamp(26px, 4.2vh, 42px); }
.ht:hover .ht-i--photo { transform: scale(1.08) rotate(-3deg); }

/* ── Breathing ── */
@keyframes _hf {
  0%,100% { transform: translateY(0) translateZ(0); }
  50%     { transform: translateY(-3px) translateZ(5px); }
}
.ht[data-i="0"]  { animation: _hf 8s ease-in-out infinite 0s; }
.ht[data-i="1"]  { animation: _hf 8s ease-in-out infinite -1.2s; }
.ht[data-i="2"]  { animation: _hf 8s ease-in-out infinite -2.4s; }
.ht[data-i="3"]  { animation: _hf 8s ease-in-out infinite -3.6s; }
.ht[data-i="4"]  { animation: _hf 8s ease-in-out infinite -.6s; }
.ht[data-i="5"]  { animation: _hf 8s ease-in-out infinite -1.8s; }
.ht[data-i="6"]  { animation: _hf 8s ease-in-out infinite -4.2s; }
.ht[data-i="7"]  { animation: _hf 8s ease-in-out infinite -3s; }
.ht[data-i="8"]  { animation: _hf 8s ease-in-out infinite -4.8s; }
.ht[data-i="9"]  { animation: _hf 8s ease-in-out infinite -.9s; }
.ht[data-i="10"] { animation: _hf 8s ease-in-out infinite -2.6s; }
.ht[data-i="11"] { animation: _hf 8s ease-in-out infinite -3.2s; }
.ht:hover { animation-play-state: paused; }

/* ── Responsive ── */
/* Narrow desktops / small laptops: soften the 3D angle so the rotated
   grid doesn't crowd or clip against the hero copy. */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero__inner { grid-template-columns: 1fr 0.92fr; }
  .hm-wrap { max-width: 440px; margin-left: auto; margin-right: auto; }
  .hm-cube-parent { transform: scale(0.8) !important; }
}
@media (max-width:991px) {
  .hm-wrap { max-width: 480px; margin: 30px auto 0; perspective: none; height: auto !important; }
  
  .hm-cube-parent { 
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; 
    transform: none !important; 
    gap: 12px !important; 
    padding: 0 !important;
    grid-auto-rows: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }
  
  .hm-cube-spinner {
    display: contents !important;
  }
  
  .hm-cube {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    display: contents !important;
    transform-style: flat !important;
  }
  
  .hm-face {
    position: relative !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    display: contents !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    transform-style: flat !important;
  }

  .hm-shadow {
    display: none !important;
  }
  
  .ht--desktop-only {
    display: none !important;
  }
  
  .ht { 
    grid-column: auto !important; 
    grid-row: auto !important; 
    aspect-ratio: auto !important;
    padding: 12px 16px !important;
  }
  .ht[data-i="0"] { grid-column: span 2 !important; }
  .ht[data-i="11"] { grid-column: 1 / -1 !important; }
  .ht[data-i="d1"],.ht[data-i="d2"] { display: none !important; }
  
  .ht__inner {
    transform: none !important;
    flex-direction: row !important;
    text-align: left !important;
    gap: 12px !important;
    padding: 0 !important;
  }
}
@media (max-width:479px) {
  .hm-cube-parent { grid-template-columns: 1fr 1fr !important; }
  .ht-i { width: 24px; height: 24px; }
  .ht-i--lg { width: 30px; height: 30px; }
  .ht-t { font-size: 0.78rem; }
}

/* Marquee */
.hero__marquee {
  position: relative;
  margin-top: 0;
  padding-bottom: clamp(12px, 2vh, 24px);
  overflow: hidden;
  flex-shrink: 0;
}
.hero__marquee-subtitle {
  text-align: center; color: var(--text-grey);
  font-size: 0.9rem; margin-bottom: clamp(10px, 2.6vh, 30px);
}
.marquee__track {
  display: flex; width: max-content;
}
.marquee__row {
  display: flex; align-items: center; gap: clamp(60px, 6vw, 95px);
  padding: 10px clamp(60px, 6vw, 95px) 10px 0;
  flex-shrink: 0;
}
.marquee__logo {
  flex-shrink: 0; opacity: 0.6;
  transition: opacity 0.3s, filter 0.3s;
  filter: drop-shadow(0 2px 5px rgba(14, 26, 44, 0.08)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.04));
}
.marquee__logo img,
.marquee__logo svg {
  height: clamp(20px, 2.6vh, 27px);
  width: auto;
  display: block;
  object-fit: contain;
}
.marquee__logo--flex {
  display: flex;
  align-items: center;
  gap: 8px;
}
.marquee__logo-text {
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #1A2B4A;
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.marquee__logo:hover {
  opacity: 1;
  filter: drop-shadow(0 4px 8px rgba(7, 113, 171, 0.15)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.06));
}
.marquee__gradient-left,
.marquee__gradient-right {
  position: absolute; top: 0; bottom: 0; width: 100px; z-index: 2;
  pointer-events: none;
}
.marquee__gradient-left {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.marquee__gradient-right {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

/* ======================================================================
   SECTION 3 — THE SHIFT (Pinned editorial book, paper-and-ink)
   ====================================================================== */
.section__shift {
  background: #E4EEF5;
  color: #0E1A2C;
  position: relative;
  padding: 0 !important;
  overflow: visible;
}
.section__shift p { color: rgba(14,26,44,0.62); }
.section__shift .js-text-underline path { stroke: #0771AB; }

.shift__anchor {
  position: absolute; top: calc(var(--nav-h) * -1);
  width: 1px; height: 1px;
}

.shift__pin {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: #E4EEF5;
  overflow: hidden;
}
.shift__pin::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(29, 183, 206, 0.06), transparent 38%),
    radial-gradient(circle at 86% 78%, rgba(7,113,171,0.06), transparent 42%);
  pointer-events: none;
}
.shift__pin::after {
  /* Subtle ruled-paper horizontal lines */
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(to bottom, transparent 0, transparent 38px, rgba(14,26,44,0.04) 38px, rgba(14,26,44,0.04) 39px);
  background-size: 100% 39px;
  pointer-events: none;
  opacity: 0.55;
  mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}

.shift__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: clamp(10px, 1.8vh, 18px);
  min-height: 100vh;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-top: calc(var(--nav-h) + 10px);
  padding-bottom: clamp(10px, 1.8vh, 20px);
  box-sizing: border-box;
}

/* Explicit row mappings for robust auto-placement */
.shift__head {
  grid-row: 1;
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
}
.shift__tiles-container {
  grid-row: 2;
  align-self: start;
}
.shift__stage {
  grid-row: 3;
}
.shift__progress {
  grid-row: 4;
}
.shift__connector-svg,
.vs__connector-svg {
  grid-row: 1 / span 4;
  grid-column: 1;
}

.shift__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.5);
}
.shift__kicker-num { color: #0771AB; font-weight: 700; font-variant-numeric: tabular-nums; }
.shift__kicker-divider { color: rgba(14,26,44,0.3); }
.shift__kicker-label { letter-spacing: 0.22em; }

.shift__h {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: #0E1A2C;
  margin: 0;
}
.shift__h .js-text-underline {
  font-style: italic;
  font-weight: 700;
}

/* ---------- STAGE (focal area where phases cross-blur) ---------- */
.shift__stage {
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  min-height: 0;
}

.shift__phase {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.8vh, 24px);
  opacity: 0;
  filter: blur(10px);
  transform: translateY(40px) scale(0.97);
  will-change: transform, opacity, filter;
  pointer-events: none;
}
.shift__phase.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.shift__phase-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.shift__phase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(7,113,171,0.22);
  border-radius: 8px;
  background: rgba(7,113,171,0.04);
  flex-shrink: 0;
}
.shift__phase-icon svg { display: block; }

.shift__phase-topic {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #0771AB;
  margin: 0;
}

.shift__phase-line {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.32;
  letter-spacing: -0.018em;
  font-weight: 400;
  color: #0E1A2C;
  margin: 0;
  max-width: 820px;
}

.shift__phase-friction {
  color: rgba(14,26,44,0.48);
  text-decoration: line-through;
  text-decoration-color: #2E2F30;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
  font-style: italic;
  font-weight: 400;
}

.shift__phase-arrow {
  color: #2E2F30;
  font-weight: 500;
  padding: 0 10px;
  font-size: 0.85em;
}

.shift__phase-pivot {
  color: #0E1A2C;
  font-weight: 600;
}

.shift__phase-felt {
  margin: clamp(10px, 1.8vh, 20px) 0 0;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  color: rgba(14,26,44,0.55);
}
.shift__phase-felt em {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.05em;
}
.shift__phase-felt strong {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: #0771AB;
  font-size: 2em;
  letter-spacing: -0.014em;
  padding-left: 8px;
  transform-origin: left center;
}

/* ---------- FINALE (composition: felt-words orbiting the All IT mark) ---------- */
.shift__finale {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: clamp(18px, 2.5vh, 32px);
  opacity: 0;
  filter: blur(10px);
  transform: translateY(40px) scale(0.97);
  pointer-events: none;
}
.shift__finale.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.shift__finale-kicker {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.5);
  margin: 0;
}

.shift__finale-composition,
.vs__finale-composition {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}

.shift__finale-mark,
.vs__finale-mark {
  position: relative;
  width: clamp(110px, 13vw, 150px);
  height: clamp(110px, 13vw, 150px);
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 auto;
  box-shadow:
    0 10px 28px rgba(14,26,44,0.10),
    0 0 0 1px rgba(7,113,171,0.18);
  z-index: 10;
}
.shift__finale-ring,
.vs__finale-ring {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1px dashed rgba(7,113,171,0.4);
  animation: shift-ring-spin 38s linear infinite;
  z-index: -1;
}
@keyframes shift-ring-spin {
  to { transform: rotate(360deg); }
}

/* --- Connector z-index fix: finale logo above connector lines --- */
.shift__finale.is-active,
.vs__finale.is-active {
  z-index: 12;
}
.shift__finale-mark,
.vs__finale-mark {
  position: relative;
  z-index: 20;
}

.shift__finale-logo,
.vs__finale-logo {
  display: block;
  width: 62%;
  height: 62%;
  max-width: 62%;
  max-height: 62%;
  object-fit: contain;
  object-position: center center;
  margin: 0 auto;
}

.shift__finale-tag {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.5;
  color: rgba(14,26,44,0.65);
  max-width: 460px;
}
.shift__finale-tag em {
  display: inline-block;
  margin-top: 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.25em;
  color: #0E1A2C;
}

.shift__finale-cta { display: inline-flex; }

/* ---------- PROGRESS (bottom of pin) ---------- */
.shift__progress {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.45);
}
.shift__progress-num {
  font-variant-numeric: tabular-nums;
  color: rgba(14,26,44,0.62);
}
.shift__progress-num span { color: #0771AB; font-weight: 700; }
.shift__progress-rail {
  flex: 1;
  height: 1px;
  background: rgba(14,26,44,0.14);
  position: relative;
  overflow: hidden;
}
.shift__progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: #0771AB;
  transition: width 0.12s linear;
}
.shift__progress-hint { color: rgba(14,26,44,0.4); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .shift__inner {
    padding-left: 24px;
    padding-right: 24px;
    gap: 24px;
  }
  .shift__phase-line { font-size: clamp(1.25rem, 4.4vw, 1.7rem); }
  .shift__phase-friction,
  .shift__phase-pivot { display: block; }
  .shift__phase-arrow {
    display: block;
    margin: 4px 0;
    padding: 0;
    text-align: left;
  }
  .shift__phase-felt strong { font-size: 1.5em; }
  .shift__finale-composition {
    width: 100%;
    max-width: none;
    gap: 0;
  }
}

/* ======================================================================
   SECTION 5 — HORIZONTAL USP
   ====================================================================== */
.section__horizontal-usp {
  background: var(--white);
  padding-bottom: clamp(140px, 16vw, 240px) !important;
}

.horizontal-usp__inner {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: clamp(40px, 5vw, 80px); align-items: start;
}
.horizontal-usp__left h2 { margin-bottom: 2em; }
.horizontal-usp__cta { margin-top: 2rem; }
@media (min-width: 768px) {
  .horizontal-usp__cta { margin-top: 3rem; }
}

.horizontal-usp__cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.h-usp-card {
  background: var(--bg); border-radius: 16px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid rgba(7,113,171,0.08);
  transition: box-shadow 0.3s;
  will-change: transform;
}
.h-usp-card:hover {
  box-shadow: 0 8px 30px rgba(7,113,171,0.1);
  transform: translateY(-6px);
  transition: box-shadow 0.3s, transform 0.3s ease;
}
.h-usp-card h4 { color: var(--dark); }
.h-usp-card p { font-size: 0.9rem; margin-top: 0; }

@media (min-width: 992px) {
  .horizontal-usp__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    height: auto;
  }
  .h-usp-card {
    position: relative;
    width: 100%;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
    padding-bottom: 28px; /* quote bubble flows in-card now — no reserved gap needed */
  }
}

.h-usp-card--icon-bottom { flex-direction: column; }
/* Removed conflicting display — icon-bottom uses column-reverse */

/* USP card icons */
.h-usp-card__icon { width: 56px; height: 56px; position: relative; flex-shrink: 0; }

.h-usp-icon--security { position: relative; width: 56px; height: 56px; }
.h-usp-icon__circle { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--accent); position: absolute; left: 4px; top: 10px; }
.h-usp-icon__half {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--secondary);
  clip-path: inset(0 50% 0 0);
  position: absolute; left: 22px; top: 14px;
}

.h-usp-icon--cloud { position: relative; width: 56px; height: 56px; }
.h-usp-icon__circle-1 { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--accent); position: absolute; left: 4px; top: 14px; }
.h-usp-icon__circle-2 { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--secondary); position: absolute; left: 20px; top: 12px; }

.h-usp-icon--ai { position: relative; width: 56px; height: 56px; }
.h-usp-icon__sq-1 { width: 28px; height: 28px; border-radius: 6px; border: 3px solid var(--accent); position: absolute; left: 4px; top: 10px; }
.h-usp-icon__sq-2 { width: 28px; height: 28px; border-radius: 6px; border: 3px solid var(--secondary); position: absolute; left: 20px; top: 18px; }

/* ======================================================================
   SECTION 6 — CONVERSION WIZARD
   ====================================================================== */
.section__conversion { background: var(--bg); }

.conversion__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px); align-items: center;
}
.conversion__video {
  border-radius: 16px; overflow: hidden;
  background: var(--dark);
  transform: translateZ(0);
}
.conversion__video video,
.conversion__video img { width: 100%; height: auto; display: block; }
.conversion__copy h2 { margin-bottom: 0.4em; }
.conversion__cta { margin-top: 2em; }

/* ======================================================================
   SECTION 7 — FIVE QUESTIONS (Pinned editorial, paper-and-ink)
   ====================================================================== */
.section__vs {
  background: #E4EEF5;
  color: #0E1A2C;
  position: relative;
  padding: 0 !important;
  overflow: visible;
}
.section__vs p { color: rgba(14,26,44,0.62); }
.section__vs .js-text-underline path { stroke: #0771AB; }

.vs__pin {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: #E4EEF5;
  overflow: hidden;
}
.vs__pin::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 16%, rgba(29, 183, 206, 0.06), transparent 38%),
    radial-gradient(circle at 88% 84%, rgba(7,113,171,0.06), transparent 42%);
  pointer-events: none;
}
.vs__pin::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(to bottom, transparent 0, transparent 38px, rgba(14,26,44,0.04) 38px, rgba(14,26,44,0.04) 39px);
  background-size: 100% 39px;
  pointer-events: none;
  opacity: 0.55;
  mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}

.vs__inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: clamp(10px, 1.8vh, 18px);
  min-height: 100vh;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding-top: calc(var(--nav-h) + 10px);
  padding-bottom: clamp(10px, 1.8vh, 20px);
  box-sizing: border-box;
}

/* ---------- HEAD ---------- */
.vs__head {
  grid-row: 1;
  position: relative;
  max-width: 840px;
  margin: 0 auto;
  width: 100%;
}

.vs__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.5);
}
.vs__kicker-num { color: #0771AB; font-weight: 700; font-variant-numeric: tabular-nums; }
.vs__kicker-divider { color: rgba(14,26,44,0.3); }
.vs__kicker-label { letter-spacing: 0.22em; }

.vs__h {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: #0E1A2C;
  margin: 0;
}
.vs__h .js-text-underline {
  font-style: italic;
  font-weight: 700;
}

/* ---------- STAGE ---------- */
.vs__stage {
  grid-row: 3;
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  min-height: 0;
}

.vs__phase {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(20px, 3vh, 36px);
  opacity: 0;
  filter: blur(10px);
  transform: translateY(40px) scale(0.97);
  will-change: transform, opacity, filter;
  pointer-events: none;
}
.vs__phase.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.vs__phase-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.vs__phase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(7,113,171,0.22);
  border-radius: 9px;
  background: rgba(7,113,171,0.04);
  flex-shrink: 0;
  margin-top: 4px;
}
.vs__phase-icon svg { display: block; }

.vs__phase-text {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0E1A2C;
  margin: 0;
  max-width: 820px;
}

.vs__phase-answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(12px, 2vh, 24px);
}

.vs__answer {
  position: relative;
  padding-left: clamp(18px, 2vw, 26px);
}
.vs__answer--them { border-left: 1px solid rgba(46, 47, 48, 0.35); }
.vs__answer--us   { border-left: 2px solid #0771AB; }

.vs__answer-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.vs__answer--them .vs__answer-label { color: #6B7C85; }
.vs__answer--us .vs__answer-label   { color: #0771AB; }

.vs__answer-text {
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.014em;
  margin: 0 0 10px;
}
.vs__answer--them .vs__answer-text {
  color: rgba(14,26,44,0.5);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}
.vs__answer--us .vs__answer-text {
  color: #0E1A2C;
  font-weight: 700;
}

.vs__answer-note {
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
  color: rgba(14,26,44,0.55);
}

/* ---------- FINALE: typewriter checklist + brand stamp ---------- */
.vs__finale {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2.5vh, 28px);
  opacity: 0;
  filter: blur(10px);
  transform: translateY(40px) scale(0.97);
  pointer-events: none;
}
.vs__finale.is-active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.vs__finale-kicker {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.5);
  margin: 0;
}

.vs__finale-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 14px);
}
.vs__finale-item {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.3vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: -0.014em;
  color: #0E1A2C;
}
.vs__finale-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(7,113,171,0.08);
  color: #0771AB;
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
  font-style: normal;
  font-family: var(--font-stack);
}

.vs__finale-stamp {
  margin: 12px 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  color: rgba(14,26,44,0.6);
}
.vs__finale-stamp em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  color: #0E1A2C;
  font-size: 1.1em;
}

.vs__finale-cta {
  display: inline-flex;
  margin-top: clamp(10px, 1.8vh, 20px);
}

/* ---------- PROGRESS ---------- */
.vs__progress {
  grid-row: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.45);
}
.vs__progress-num { font-variant-numeric: tabular-nums; color: rgba(14,26,44,0.62); }
.vs__progress-num span { color: #0771AB; font-weight: 700; }
.vs__progress-rail {
  flex: 1;
  height: 1px;
  background: rgba(14,26,44,0.14);
  position: relative;
  overflow: hidden;
}
.vs__progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: #0771AB;
  transition: width 0.12s linear;
}
.vs__progress-hint { color: rgba(14,26,44,0.4); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
  .vs__inner {
    padding-left: 24px;
    padding-right: 24px;
    gap: 24px;
  }
  .vs__phase-text { font-size: clamp(1.2rem, 4.6vw, 1.6rem); }
  .vs__phase-answers {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .vs__finale-item { font-size: 1.1rem; }
}


/* ======================================================================
   SECTION 7 v7 — US vs THEM (scroll-driven stack accumulation)
   As you scroll, each comparison's brief stacks at the top while
   the next full comparison appears below. After all 5, brand finale.
   ====================================================================== */
.vs7__pin {
  position: relative;
  background: #E4EEF5;
  overflow: hidden;
}
.vs7__pin::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 14%, rgba(29, 183, 206, 0.08), transparent 40%),
    radial-gradient(circle at 88% 86%, rgba(7, 113, 171, 0.08), transparent 42%);
  pointer-events: none;
}
.vs7__inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  min-height: 100vh;
  padding-top: clamp(60px, 8vh, 100px);
  padding-bottom: clamp(40px, 6vh, 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vh, 28px);
}

/* Header */
.vs7__head {
  flex: 0 0 auto;
  text-align: center;
}
.vs7__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.5);
}
.vs7__kicker-num { color: #0771AB; font-weight: 700; }
.vs7__kicker-divider { color: rgba(14, 26, 44, 0.3); }
.vs7__h {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: #0E1A2C;
}
.vs7__h .js-text-underline {
  font-style: italic;
  font-weight: 700;
}

/* Brief stack at the top — fills in as you scroll */
.vs7__stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  perspective: 1200px;
}
.vs7__brief {
  display: grid;
  grid-template-columns: 36px auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(7, 113, 171, 0.12);
  border-radius: 12px;
  opacity: 0;
  transform: translateY(-20px) scale(0.94) rotateX(-30deg);
  transform-origin: top center;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.5s ease;
  box-shadow: 0 4px 14px rgba(14, 26, 44, 0.06);
}
.vs7__brief.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
  box-shadow:
    0 6px 18px rgba(7, 113, 171, 0.10),
    0 2px 6px rgba(14, 26, 44, 0.05);
}
/* When freshly added — extra "landing" bounce */
.vs7__brief.is-just-added {
  animation: brief-land 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes brief-land {
  0%   { transform: translateY(-40px) scale(0.85) rotateX(-40deg); opacity: 0; }
  60%  { transform: translateY(4px) scale(1.02) rotateX(2deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; }
}
.vs7__brief-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 800;
  color: #FFFFFF;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(7, 113, 171, 0.28);
  flex-shrink: 0;
}
.vs7__brief-topic {
  font-family: 'Montserrat', var(--font-stack);
  font-size: 0.82rem;
  font-weight: 700;
  color: #0E1A2C;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.vs7__brief-them {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.82rem;
  color: rgba(14, 26, 44, 0.62);
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.6);
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;
  white-space: normal;
  line-height: 1.3;
  min-width: 0;
}
.vs7__brief-arrow {
  color: #0771AB;
  font-size: 1rem;
  font-weight: 700;
  margin: 0 4px;
  flex-shrink: 0;
}
.vs7__brief-us {
  font-family: 'Montserrat', var(--font-stack);
  font-size: 0.86rem;
  font-weight: 700;
  color: #0E1A2C;
  white-space: normal;
  line-height: 1.3;
  min-width: 0;
}
.vs7__brief-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(7, 113, 171, 0.3);
}

/* Active stage — where the current card lives */
.vs7__stage {
  flex: 1 1 auto;
  position: relative;
  min-height: 280px;
}
.vs7__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(24px, 3vw, 36px);
  background: #FFFFFF;
  border: 1px solid rgba(7, 113, 171, 0.10);
  border-radius: 18px;
  box-shadow:
    0 18px 44px rgba(7, 113, 171, 0.08),
    0 4px 10px rgba(14, 26, 44, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  /* Default: card hasn't arrived yet — slides in from the right */
  opacity: 0;
  transform: translateX(60px) scale(0.96) rotateY(8deg);
  transform-origin: center center;
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  will-change: transform, opacity;
}
.vs7__card.is-active {
  opacity: 1;
  transform: translateX(0) scale(1) rotateY(0deg);
  pointer-events: auto;
  position: relative;
  z-index: 2;
}
/* When the card is "leaving" (moving up to the brief stack), animate
   it shrinking + flying upward — feels like it's morphing into a brief. */
.vs7__card.is-leaving {
  opacity: 0;
  transform: translateY(-120%) scale(0.55) rotateX(-12deg);
  transform-origin: top center;
  z-index: 1;
}

.vs7__card-num {
  position: absolute;
  top: clamp(14px, 1.8vw, 22px);
  left: clamp(24px, 2.8vw, 36px);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 400;
  color: rgba(7, 113, 171, 0.10);
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
}

/* (vs7__card-stamp removed — card head padding kept light) */
.vs7__card { padding-top: clamp(48px, 4vw, 60px); }
.vs7__card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
  padding-left: clamp(50px, 5.5vw, 80px); /* clear room for the big italic number */
}
.vs7__card-illu {
  width: clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(7, 113, 171, 0.18));
  transition: transform 0.5s ease;
}
.vs7__card.is-active .vs7__card-illu {
  animation: card-illu-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes card-illu-pop {
  0%   { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(4deg);  opacity: 1; }
  100% { transform: scale(1)   rotate(0deg);  opacity: 1; }
}
.vs7__card-topic {
  margin: 0;
  font-family: 'Montserrat', var(--font-stack);
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  color: #0E1A2C;
  text-transform: none;
}

.vs7__card-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.vs7__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2.2vw, 24px);
  border-radius: 12px;
  min-width: 0;
}
.vs7__side--them {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(14, 26, 44, 0.02));
  border: 1px dashed rgba(239, 68, 68, 0.28);
}
.vs7__side--us {
  background: linear-gradient(135deg, rgba(29, 183, 206, 0.12), rgba(7, 113, 171, 0.06));
  border: 1px solid rgba(29, 183, 206, 0.45);
  position: relative;
  overflow: hidden;
}
.vs7__side--us::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, #1DB7CE, #0771AB);
}
.vs7__side-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vs7__side--them .vs7__side-icon {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}
.vs7__side--us .vs7__side-icon {
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(7, 113, 171, 0.3);
}
/* When the icon hosts the All IT logo: white plate + larger size + soft brand ring */
.vs7__side-icon--logo {
  width: 38px !important;
  height: 38px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(7, 113, 171, 0.22);
  padding: 5px;
  box-shadow:
    0 6px 14px rgba(7, 113, 171, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
.vs7__side-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.vs7__side-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vs7__side--them .vs7__side-label { color: #b91c1c; }
.vs7__side--us .vs7__side-label { color: #0771AB; }
.vs7__side-quote {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -0.014em;
}
.vs7__side--them .vs7__side-quote {
  color: rgba(14, 26, 44, 0.5);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.45);
  text-decoration-thickness: 1.5px;
}
.vs7__side--us .vs7__side-quote {
  color: #0E1A2C;
  font-family: 'Montserrat', var(--font-stack);
  font-weight: 700;
}

/* BRAND FINALE card — solid white text, strong contrast highlight */
.vs7__card--brand {
  background: linear-gradient(135deg, #0771AB 0%, #054e76 100%);
  border-color: transparent;
  text-align: center;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  gap: 18px;
}
.vs7__card--brand::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 18%, rgba(29, 183, 206, 0.35), transparent 50%),
    radial-gradient(circle at 88% 82%, rgba(255, 255, 255, 0.10), transparent 60%);
  pointer-events: none;
}
.vs7__card--brand > * { position: relative; z-index: 1; }
.vs7__brand-mark {
  position: relative;
  width: clamp(80px, 9vw, 110px);
  height: clamp(80px, 9vw, 110px);
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
}
.vs7__brand-ring {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.55);
  animation: vs7-ring-spin 38s linear infinite;
}
@keyframes vs7-ring-spin { to { transform: rotate(360deg); } }
.vs7__brand-logo {
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
}
.vs7__brand-kicker,
.vs7__card--brand .vs7__brand-kicker {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFFFFF !important;
}
.vs7__brand-h {
  margin: 4px 0 16px;
  font-family: 'Montserrat', var(--font-stack);
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #FFFFFF;
  max-width: 580px;
}
/* High-contrast highlight pill replaces the cyan italic em */
.vs7__brand-highlight {
  display: inline-block;
  padding: 2px 12px;
  margin: 0 2px;
  background: #1DB7CE;
  color: #FFFFFF;
  border-radius: 6px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(29, 183, 206, 0.45);
}
.vs7__brand-cta { display: inline-flex; }
.vs7__brand-cta .m-button__wrap {
  padding: 14px 28px !important;
  font-size: 0.95rem !important;
  border-radius: 10px;
  color: #0E1A2C !important;
}
.vs7__brand-cta .m-b-bg {
  background: #FFFFFF;
  border-radius: 10px;
}
.vs7__brand-cta .m-button__wrap:hover { color: #FFFFFF !important; }
.vs7__brand-cta .m-button__wrap:hover .m-b-bg { background: #1DB7CE; }

/* Progress */
.vs7__progress {
  flex: 0 0 auto;
  height: 6px;
}
.vs7__progress-rail {
  width: 100%;
  height: 100%;
  background: rgba(14, 26, 44, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.vs7__progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #0771AB, #1DB7CE);
  border-radius: 3px;
  transition: width 0.15s linear;
}

/* Mobile fallback — no pin, simple stack */
@media (max-width: 760px) {
  .vs7__inner { min-height: auto; padding: clamp(40px, 6vw, 60px) 16px; }
  .vs7__stage { min-height: 0; }
  .vs7__card { position: relative; opacity: 1; transform: none; pointer-events: auto; margin-bottom: 16px; }
  .vs7__card-pair { grid-template-columns: 1fr; gap: 10px; }
  .vs7__progress { display: none; }
  .vs7__stack { display: none; }
}

/* ======================================================================
   SECTION 7 v6 — legacy
   ====================================================================== */
.section__vs {
  background: #E4EEF5;
  padding: clamp(70px, 9vw, 120px) 0 !important;
  position: relative;
  overflow: hidden;
}
.section__vs::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 14%, rgba(29, 183, 206, 0.08), transparent 38%),
    radial-gradient(circle at 88% 86%, rgba(7, 113, 171, 0.08), transparent 42%);
  pointer-events: none;
}
.vs6__inner {
  position: relative;
  z-index: 1;
  max-width: 1020px;
}

/* Header */
.vs6__head {
  text-align: center;
  margin: 0 auto clamp(32px, 4vw, 52px);
  max-width: 660px;
}
.vs6__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.5);
}
.vs6__kicker-num { color: #0771AB; font-weight: 700; }
.vs6__kicker-divider { color: rgba(14, 26, 44, 0.3); }
.vs6__h {
  margin: 0 0 14px;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.024em;
  color: #0E1A2C;
}
.vs6__h .js-text-underline {
  font-style: italic;
  font-weight: 700;
}
.vs6__sub {
  margin: 0;
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: rgba(14, 26, 44, 0.6);
}

/* Column headers — sticky-feel anchor for the two columns */
.vs6__col-headers {
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
  padding: 0 clamp(8px, 1vw, 16px);
}
.vs6__col-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 22px;
  border-radius: 12px;
  position: relative;
}
.vs6__col-head--them {
  background: rgba(239, 68, 68, 0.04);
  border: 1px dashed rgba(239, 68, 68, 0.30);
  align-items: flex-end;
  text-align: right;
}
.vs6__col-head--us {
  background: linear-gradient(135deg, rgba(29, 183, 206, 0.16), rgba(7, 113, 171, 0.08));
  border: 1px solid rgba(29, 183, 206, 0.5);
  box-shadow: 0 6px 18px rgba(7, 113, 171, 0.08);
}
.vs6__col-mark {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.vs6__col-mark--them {
  background: rgba(239, 68, 68, 0.14);
  color: #ef4444;
}
.vs6__col-mark--us {
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(7, 113, 171, 0.3);
}
.vs6__col-label {
  font-family: 'Montserrat', var(--font-stack);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.vs6__col-head--them .vs6__col-label { color: #b91c1c; }
.vs6__col-head--us .vs6__col-label { color: #0771AB; }
.vs6__col-meta {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.45);
}
.vs6__col-divider {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The 5-row journey */
.vs6__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.vs6__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 40px 1fr;
  gap: 0;
  align-items: stretch;
}
.vs6__row-num {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0771AB, #1DB7CE);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(7, 113, 171, 0.3);
  border: 3px solid #E4EEF5;
}
.vs6__row-topic {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  margin: 0;
  font-family: 'Montserrat', var(--font-stack);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0771AB;
  white-space: nowrap;
  background: #E4EEF5;
  padding: 0 12px;
}

/* Cells */
.vs6__cell {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  border-radius: 12px;
  min-width: 0;
}
.vs6__cell--them {
  background: rgba(255, 255, 255, 0.4);
  border: 1px dashed rgba(239, 68, 68, 0.20);
  flex-direction: row-reverse;
  text-align: right;
  justify-content: flex-start;
}
.vs6__cell--us {
  background: #FFFFFF;
  border: 1px solid rgba(29, 183, 206, 0.35);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(7, 113, 171, 0.06);
}
.vs6__cell--us::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #1DB7CE, #0771AB);
}
.vs6__cell-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vs6__cell-icon--them {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.vs6__cell-icon--us {
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  color: #FFFFFF;
  box-shadow: 0 4px 10px rgba(7, 113, 171, 0.28);
}
.vs6__cell-quote {
  margin: 0;
  font-size: clamp(0.98rem, 1.2vw, 1.15rem);
  line-height: 1.4;
  letter-spacing: -0.008em;
}
.vs6__cell--them .vs6__cell-quote {
  color: rgba(14, 26, 44, 0.5);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.45);
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;
}
.vs6__cell--us .vs6__cell-quote {
  color: #0E1A2C;
  font-family: 'Montserrat', var(--font-stack);
  font-weight: 700;
}

/* Center journey line — the spine connecting rows */
.vs6__journey-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 240px;
  width: 2px;
  background: rgba(7, 113, 171, 0.10);
  z-index: 1;
  border-radius: 1px;
  margin-top: 200px;
  pointer-events: none;
  overflow: hidden;
}
.vs6__journey-line-fill {
  display: block;
  width: 100%;
  background: linear-gradient(180deg, #0771AB, #1DB7CE);
  height: 0%;
  transition: height 0.2s linear;
  border-radius: 1px;
}

/* Make sure rows sit ABOVE the journey line */
.vs6__rows { z-index: 2; }

/* Arrival — brand destination */
.vs6__arrival {
  position: relative;
  margin: clamp(48px, 6vw, 80px) auto 0;
  max-width: 720px;
  padding: clamp(40px, 5vw, 60px) clamp(28px, 4vw, 56px);
  background: linear-gradient(135deg, #0771AB 0%, #054e76 100%);
  border-radius: 24px;
  color: #FFFFFF;
  text-align: center;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(7, 113, 171, 0.25),
    0 8px 18px rgba(14, 26, 44, 0.10);
  z-index: 3;
}
.vs6__arrival::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(29, 183, 206, 0.32), transparent 50%),
    radial-gradient(circle at 88% 88%, rgba(255, 255, 255, 0.10), transparent 60%);
  pointer-events: none;
}
.vs6__arrival > * { position: relative; z-index: 1; }
.vs6__arrival-mark {
  position: relative;
  width: clamp(90px, 11vw, 120px);
  height: clamp(90px, 11vw, 120px);
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.20);
}
.vs6__arrival-ring {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  animation: vs6-ring-spin 38s linear infinite;
}
@keyframes vs6-ring-spin { to { transform: rotate(360deg); } }
.vs6__arrival-logo {
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
}
.vs6__arrival-kicker {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.vs6__arrival-h {
  margin: 10px 0 26px;
  font-family: 'Montserrat', var(--font-stack);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #FFFFFF;
}
.vs6__arrival-h em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: #1DB7CE;
}
.vs6__arrival-cta { display: inline-flex; }
.vs6__arrival-cta .m-button__wrap {
  padding: 16px 32px !important;
  font-size: 1rem !important;
  border-radius: 10px;
  color: #0E1A2C !important;
}
.vs6__arrival-cta .m-b-bg {
  background: #FFFFFF;
  border-radius: 10px;
}
.vs6__arrival-cta .m-button__wrap:hover {
  color: #FFFFFF !important;
}
.vs6__arrival-cta .m-button__wrap:hover .m-b-bg {
  background: #1DB7CE;
}

/* Mobile — stack cells vertically */
@media (max-width: 760px) {
  .vs6__col-headers { grid-template-columns: 1fr; gap: 10px; }
  .vs6__col-divider { display: none; }
  .vs6__col-head--them { align-items: flex-start; text-align: left; }
  .vs6__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .vs6__row-num {
    position: relative;
    top: auto; left: auto; transform: none;
    margin-bottom: 6px;
  }
  .vs6__row-topic {
    position: relative;
    top: auto; left: auto; transform: none;
    background: transparent;
    padding: 0;
    margin-bottom: 8px;
  }
  .vs6__cell--them {
    flex-direction: row;
    text-align: left;
    justify-content: flex-start;
  }
  .vs6__journey-line { display: none; }
}

/* ======================================================================
   SECTION 7 v5 — legacy
   ====================================================================== */
.vs5__pin {
  position: relative;
  background: #E4EEF5;
  overflow: hidden;
}
.vs5__pin::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 14%, rgba(29, 183, 206, 0.08), transparent 38%),
    radial-gradient(circle at 88% 86%, rgba(7, 113, 171, 0.08), transparent 42%);
  pointer-events: none;
}
.vs5__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  min-height: 100vh;
  padding-top: clamp(60px, 8vh, 100px);
  padding-bottom: clamp(40px, 6vh, 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 36px);
}

/* Sticky context header — always tells you where you are */
.vs5__head {
  flex: 0 0 auto;
  text-align: center;
}
.vs5__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.5);
}
.vs5__kicker-num { color: #0771AB; font-weight: 700; }
.vs5__kicker-divider { color: rgba(14, 26, 44, 0.3); }
.vs5__h {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: #0E1A2C;
}
/* Live step indicator inside the header */
.vs5__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(7, 113, 171, 0.08);
  border: 1px solid rgba(7, 113, 171, 0.18);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(14, 26, 44, 0.7);
}
.vs5__step-now {
  color: #0771AB;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.vs5__step-divider { color: rgba(14, 26, 44, 0.3); }
.vs5__step-total { color: rgba(14, 26, 44, 0.5); }
.vs5__step-name {
  font-family: 'Montserrat', var(--font-stack);
  font-size: 0.82rem;
  font-weight: 600;
  color: #0E1A2C;
  letter-spacing: -0.005em;
  border-left: 1px solid rgba(7, 113, 171, 0.2);
  padding-left: 12px;
  margin-left: 4px;
}

/* Viewport masks the horizontal track */
.vs5__viewport {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  align-items: center;
  min-height: 320px;
  max-height: 460px;
}
.vs5__track {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: stretch;
  will-change: transform;
}
.vs5__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3.6vw, 52px);
  background: #FFFFFF;
  border: 1px solid rgba(7, 113, 171, 0.10);
  border-radius: 20px;
  margin-right: 0;
  box-shadow:
    0 18px 44px rgba(7, 113, 171, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Comparison side-by-side row */
.vs5__compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: stretch;
}
.vs5__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: 14px;
  min-width: 0;
}
.vs5__side--them {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), rgba(14, 26, 44, 0.02));
  border: 1px dashed rgba(239, 68, 68, 0.22);
}
.vs5__side--us {
  background: linear-gradient(135deg, rgba(29, 183, 206, 0.12), rgba(7, 113, 171, 0.06));
  border: 1px solid rgba(29, 183, 206, 0.4);
  position: relative;
  overflow: hidden;
}
.vs5__side--us::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, #1DB7CE, #0771AB);
}
.vs5__side-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vs5__side--them .vs5__side-mark {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.vs5__side--us .vs5__side-mark {
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  color: #FFFFFF;
  box-shadow: 0 6px 14px rgba(7, 113, 171, 0.3);
}
.vs5__side-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vs5__side--them .vs5__side-label { color: #b91c1c; }
.vs5__side--us .vs5__side-label { color: #0771AB; }
.vs5__side-quote {
  margin: 0;
  font-size: clamp(1.15rem, 1.6vw, 1.55rem);
  line-height: 1.3;
  letter-spacing: -0.014em;
}
.vs5__side--them .vs5__side-quote {
  color: rgba(14, 26, 44, 0.5);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: rgba(239, 68, 68, 0.4);
  text-decoration-thickness: 1.5px;
}
.vs5__side--us .vs5__side-quote {
  color: #0E1A2C;
  font-weight: 700;
  font-family: 'Montserrat', var(--font-stack);
}

/* BRAND FINALE slide — climactic */
.vs5__slide--brand {
  background: linear-gradient(135deg, #0771AB 0%, #054e76 100%);
  border-color: transparent;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.vs5__slide--brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(29, 183, 206, 0.35), transparent 50%),
    radial-gradient(circle at 88% 88%, rgba(255, 255, 255, 0.10), transparent 60%);
  pointer-events: none;
}
.vs5__slide--brand > * { position: relative; z-index: 1; }
.vs5__brand-mark {
  position: relative;
  width: clamp(90px, 11vw, 130px);
  height: clamp(90px, 11vw, 130px);
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
}
.vs5__brand-ring {
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.5);
  animation: vs5-ring-spin 38s linear infinite;
}
@keyframes vs5-ring-spin { to { transform: rotate(360deg); } }
.vs5__brand-logo {
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
}
.vs5__brand-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
}
.vs5__brand-kicker {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.vs5__brand-h {
  margin: 6px 0 22px;
  font-family: 'Montserrat', var(--font-stack);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: #FFFFFF;
}
.vs5__brand-h em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: #1DB7CE;
}
.vs5__brand-cta { display: inline-flex; }
.vs5__brand-cta .m-button__wrap {
  padding: 14px 28px !important;
  font-size: 0.95rem !important;
  border-radius: 10px;
  color: #0E1A2C !important;
}
.vs5__brand-cta .m-b-bg {
  background: #FFFFFF;
  border-radius: 10px;
}
.vs5__brand-cta .m-button__wrap:hover { color: #FFFFFF !important; }
.vs5__brand-cta .m-button__wrap:hover .m-b-bg { background: #1DB7CE; }

/* Scroll-progress rail */
.vs5__progress {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.4);
}
.vs5__progress-rail {
  flex: 1;
  height: 2px;
  background: rgba(14, 26, 44, 0.10);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}
.vs5__progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #0771AB, #1DB7CE);
  border-radius: 1px;
  transition: width 0.12s linear;
}

/* Mobile fallback — no horizontal scroll, stack vertically */
@media (max-width: 760px) {
  .vs5__inner { min-height: auto; }
  .vs5__viewport { overflow: visible; height: auto; min-height: 0; max-height: none; }
  .vs5__track { flex-direction: column; gap: 16px; transform: none !important; }
  .vs5__slide { flex: 0 0 auto; min-height: 0; }
  .vs5__compare { grid-template-columns: 1fr; gap: 14px; }
  .vs5__slide--brand { flex-direction: column; text-align: center; }
  .vs5__step-name { padding-left: 0; border-left: none; margin-left: 0; display: block; margin-top: 6px; }
  .vs5__step { flex-wrap: wrap; justify-content: center; }
  .vs5__progress { display: none; }
}

/* ======================================================================
   SECTION 7 v4 — legacy
   ====================================================================== */
.section__vs {
  background: #E4EEF5;
  padding: clamp(60px, 7vw, 100px) 0 !important;
}
.vs4__inner {
  position: relative;
  z-index: 1;
  max-width: 980px;
}

/* Compact header */
.vs4__head {
  text-align: center;
  margin: 0 auto clamp(28px, 3.5vw, 44px);
  max-width: 640px;
}
.vs4__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.5);
}
.vs4__kicker-num { color: #0771AB; font-weight: 700; }
.vs4__kicker-divider { color: rgba(14, 26, 44, 0.3); }
.vs4__h {
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.024em;
  color: #0E1A2C;
}
.vs4__h .js-text-underline {
  font-style: italic;
  font-weight: 700;
}

/* Viewport masks the track */
.vs4__viewport {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFD 100%);
  border: 1px solid rgba(7, 113, 171, 0.10);
  box-shadow:
    0 14px 36px rgba(7, 113, 171, 0.08),
    0 3px 8px rgba(14, 26, 44, 0.04);
  height: clamp(220px, 22vw, 280px);
}

/* Horizontal sliding track */
.vs4__track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.vs4__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3vw, 40px) clamp(28px, 3.5vw, 56px);
  position: relative;
}
.vs4__slide-num {
  position: absolute;
  top: clamp(20px, 2.2vw, 28px);
  right: clamp(28px, 3.2vw, 44px);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 400;
  color: rgba(7, 113, 171, 0.12);
  line-height: 1;
  letter-spacing: -0.04em;
  user-select: none;
}
.vs4__slide-topic {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  font-family: 'Montserrat', var(--font-stack);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0771AB;
  position: relative;
  z-index: 1;
}

/* The comparison row inside each slide */
.vs4__compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.vs4__side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.vs4__side-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vs4__side--them .vs4__side-label { color: rgba(14, 26, 44, 0.45); }
.vs4__side--us .vs4__side-label { color: #0771AB; }
.vs4__side-quote {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.4rem);
  line-height: 1.3;
  letter-spacing: -0.012em;
}
.vs4__side--them .vs4__side-quote {
  color: rgba(14, 26, 44, 0.45);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: rgba(46, 47, 48, 0.35);
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;
}
.vs4__side--us .vs4__side-quote {
  color: #0E1A2C;
  font-weight: 700;
}

/* Arrow between Them and Us */
.vs4__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(7, 113, 171, 0.28);
}

/* BRAND FINALE slide — dark gradient, climactic */
.vs4__slide--brand {
  background: linear-gradient(135deg, #0771AB 0%, #054e76 100%);
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3vw, 40px);
  text-align: left;
  overflow: hidden;
}
.vs4__slide--brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(29, 183, 206, 0.3), transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
}
.vs4__slide--brand > * { position: relative; z-index: 1; }
.vs4__brand-mark {
  position: relative;
  width: clamp(80px, 9vw, 110px);
  height: clamp(80px, 9vw, 110px);
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.20);
}
.vs4__brand-ring {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  animation: vs4-ring-spin 38s linear infinite;
}
@keyframes vs4-ring-spin { to { transform: rotate(360deg); } }
.vs4__brand-logo {
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
}
.vs4__brand-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 460px;
}
.vs4__brand-kicker {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.vs4__brand-h {
  margin: 0 0 16px;
  font-family: 'Montserrat', var(--font-stack);
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: #FFFFFF;
}
.vs4__brand-cta { display: inline-flex; }
.vs4__brand-cta .m-button__wrap {
  padding: 14px 28px !important;
  font-size: 0.95rem !important;
  border-radius: 10px;
  color: #0E1A2C !important;
}
.vs4__brand-cta .m-b-bg {
  background: #FFFFFF;
  border-radius: 10px;
}
.vs4__brand-cta .m-button__wrap:hover {
  color: #FFFFFF !important;
}
.vs4__brand-cta .m-button__wrap:hover .m-b-bg {
  background: #1DB7CE;
}

/* Progress dots under the viewport */
.vs4__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(18px, 2.2vw, 26px);
}
.vs4__pdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(14, 26, 44, 0.18);
  transition: background 0.4s ease, width 0.4s ease, border-radius 0.4s ease;
}
.vs4__pdot.is-active {
  background: linear-gradient(90deg, #0771AB, #1DB7CE);
  width: 28px;
  border-radius: 4px;
}
.vs4__pdot--brand.is-active {
  background: linear-gradient(90deg, #0771AB, #054e76);
}

/* Mobile */
@media (max-width: 760px) {
  .vs4__compare {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .vs4__arrow {
    transform: rotate(90deg);
  }
  .vs4__viewport { height: auto; min-height: 360px; }
  .vs4__slide--brand {
    flex-direction: column;
    text-align: center;
  }
}

/* ======================================================================
   SECTION 7 v3 — US vs THEM (legacy — selectors unused now)
   ====================================================================== */
.vs3__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
}
.vs3__head {
  max-width: 720px;
  margin: 0 auto clamp(36px, 4.5vw, 56px);
  text-align: center;
}
.vs3__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.5);
}
.vs3__kicker-num { color: #0771AB; font-weight: 700; }
.vs3__kicker-divider { color: rgba(14,26,44,0.3); }
.vs3__kicker-label { letter-spacing: 0.22em; }
.vs3__h {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: #0E1A2C;
  margin: 0 0 16px;
}
.vs3__h .js-text-underline {
  font-style: italic;
  font-weight: 700;
}
.vs3__sub {
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: rgba(14, 26, 44, 0.6);
  margin: 0;
}

/* TABS */
.vs3__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1vw, 14px);
  margin: 0 auto clamp(24px, 3vw, 36px);
  max-width: 760px;
}
.vs3__tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(7, 113, 171, 0.18);
  background: rgba(255, 255, 255, 0.6);
  color: rgba(14, 26, 44, 0.55);
  font-family: 'Montserrat', var(--font-stack);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.vs3__tab:hover {
  border-color: rgba(29, 183, 206, 0.4);
  background: rgba(255, 255, 255, 0.85);
  color: #0E1A2C;
  transform: translateY(-1px);
}
.vs3__tab.is-active {
  background: linear-gradient(135deg, #0771AB, #1DB7CE);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(7, 113, 171, 0.25);
}
.vs3__tab-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.7;
}
.vs3__tab.is-active .vs3__tab-num { opacity: 0.85; color: rgba(255, 255, 255, 0.85); }
.vs3__tab-name { letter-spacing: -0.005em; }

/* STAGE — one card visible at a time */
.vs3__stage {
  position: relative;
  max-width: 940px;
  margin: 0 auto clamp(56px, 7vw, 96px);
}
.vs3__cards {
  position: relative;
  min-height: 360px;
}
.vs3__card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  padding: clamp(28px, 3.4vw, 44px);
  background: #FFFFFF;
  border: 1px solid rgba(7, 113, 171, 0.10);
  border-radius: 20px;
  box-shadow:
    0 18px 44px rgba(7, 113, 171, 0.08),
    0 4px 10px rgba(14, 26, 44, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0;
  transform: translateY(20px) scale(0.985);
  pointer-events: none;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.vs3__card.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  position: relative;
}
.vs3__card.is-leaving {
  opacity: 0;
  transform: translateY(-20px) scale(0.985);
}

.vs3__card-topic {
  display: flex;
  align-items: center;
  gap: 16px;
}
.vs3__card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(29, 183, 206, 0.14), rgba(7, 113, 171, 0.08));
  color: #0771AB;
  border: 1px solid rgba(7, 113, 171, 0.18);
  flex-shrink: 0;
}
.vs3__card-counter {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.45);
}
.vs3__card-title {
  margin: 4px 0 0;
  font-family: 'Montserrat', var(--font-stack);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0E1A2C;
  line-height: 1.15;
}

/* Card grid — Them vs Us */
.vs3__card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 28px);
}
.vs3__cell {
  padding: clamp(18px, 2vw, 24px);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.vs3__cell--them {
  background: rgba(14, 26, 44, 0.03);
  border: 1px dashed rgba(14, 26, 44, 0.14);
}
.vs3__cell--us {
  background: linear-gradient(135deg, rgba(29, 183, 206, 0.10), rgba(7, 113, 171, 0.06));
  border: 1px solid rgba(29, 183, 206, 0.35);
  position: relative;
  overflow: hidden;
}
.vs3__cell--us::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #1DB7CE, #0771AB);
}
.vs3__cell-label {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vs3__cell--them .vs3__cell-label { color: rgba(14, 26, 44, 0.5); }
.vs3__cell--us .vs3__cell-label { color: #0771AB; }
.vs3__cell-quote {
  margin: 0;
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.vs3__cell--them .vs3__cell-quote {
  color: rgba(14, 26, 44, 0.45);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: rgba(46, 47, 48, 0.35);
  text-decoration-thickness: 1.5px;
}
.vs3__cell--us .vs3__cell-quote {
  color: #0E1A2C;
}
.vs3__cell--us .vs3__cell-quote strong { font-weight: 700; }
.vs3__cell-note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(14, 26, 44, 0.55);
}
.vs3__cell--them .vs3__cell-note { color: rgba(14, 26, 44, 0.4); }

/* Controls — prev / dots / next */
.vs3__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(24px, 3vw, 36px);
}
.vs3__nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(7, 113, 171, 0.18);
  background: #FFFFFF;
  color: #0771AB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.vs3__nav:hover {
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  color: #FFFFFF;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(7, 113, 171, 0.25);
}
.vs3__dots {
  display: inline-flex;
  gap: 10px;
}
.vs3__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(14, 26, 44, 0.18);
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.vs3__dot:hover { background: rgba(7, 113, 171, 0.45); }
.vs3__dot.is-active {
  background: linear-gradient(90deg, #0771AB, #1DB7CE);
  width: 28px;
  border-radius: 4px;
}

/* FINALE — "with us" feeling */
.vs3__finale {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 60px) clamp(28px, 4vw, 56px);
  background: linear-gradient(160deg, #0771AB 0%, #054e76 100%);
  border-radius: 24px;
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(7, 113, 171, 0.25),
    0 8px 18px rgba(14, 26, 44, 0.10);
}
.vs3__finale::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(29, 183, 206, 0.28), transparent 50%),
    radial-gradient(circle at 88% 88%, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
}
.vs3__finale > * { position: relative; z-index: 1; }
.vs3__finale-mark {
  position: relative;
  width: clamp(80px, 9vw, 100px);
  height: clamp(80px, 9vw, 100px);
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.vs3__finale-ring {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  animation: vs3-ring-spin 38s linear infinite;
}
@keyframes vs3-ring-spin { to { transform: rotate(360deg); } }
.vs3__finale-logo {
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
}
.vs3__finale-kicker {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.vs3__finale-h {
  margin: 10px 0 26px;
  font-family: 'Montserrat', var(--font-stack);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.vs3__finale-h em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: #1DB7CE;
  font-size: 1.05em;
}
.vs3__finale-list {
  list-style: none;
  margin: 0 auto 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 540px;
  text-align: left;
}
.vs3__finale-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.005em;
}
.vs3__finale-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1DB7CE;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.vs3__finale-cta { display: inline-flex; }
.vs3__finale-cta .m-button__wrap {
  padding: 16px 32px !important;
  font-size: 1rem !important;
  border-radius: 10px;
  color: #0E1A2C !important;
}
.vs3__finale-cta .m-b-bg {
  background: #FFFFFF;
  border-radius: 10px;
}
.vs3__finale-cta .m-button__wrap:hover {
  color: #FFFFFF !important;
}
.vs3__finale-cta .m-button__wrap:hover .m-b-bg {
  background: #1DB7CE;
}

/* Mobile */
@media (max-width: 760px) {
  .vs3__card-grid { grid-template-columns: 1fr; }
  .vs3__tab-name { display: none; }
  .vs3__tab { padding: 10px 14px; }
}

/* ======================================================================
   SECTION 7 v2 — US vs THEM (legacy — selectors unused now)
   ====================================================================== */
.section__vs {
  background: #E4EEF5;
  color: #0E1A2C;
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 !important;
  overflow: hidden;
}
.section__vs::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 16%, rgba(29, 183, 206, 0.06), transparent 38%),
    radial-gradient(circle at 88% 84%, rgba(7,113,171,0.06), transparent 42%);
  pointer-events: none;
}

.vs2__inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
}

/* HEAD */
.vs2__head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}
.vs2__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.5);
}
.vs2__kicker-num { color: #0771AB; font-weight: 700; font-variant-numeric: tabular-nums; }
.vs2__kicker-divider { color: rgba(14,26,44,0.3); }
.vs2__kicker-label { letter-spacing: 0.22em; }
.vs2__h {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: #0E1A2C;
  margin: 0 0 16px;
}
.vs2__h .js-text-underline {
  font-style: italic;
  font-weight: 700;
}
.vs2__sub {
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  color: rgba(14, 26, 44, 0.6);
  margin: 0;
}

/* COLUMN HEADERS */
.vs2__col-headers {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  margin-bottom: 12px;
  padding: 0 clamp(18px, 2vw, 26px);
}
.vs2__col-headers > :first-child { grid-column: 2; }
.vs2__col-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  border-radius: 10px;
}
.vs2__col-head--them {
  background: rgba(14, 26, 44, 0.04);
  border: 1px dashed rgba(14, 26, 44, 0.15);
}
.vs2__col-head--us {
  background: linear-gradient(135deg, rgba(29, 183, 206, 0.12), rgba(7, 113, 171, 0.08));
  border: 1px solid rgba(29, 183, 206, 0.3);
}
.vs2__col-label {
  font-family: 'Montserrat', var(--font-stack);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vs2__col-head--them .vs2__col-label { color: rgba(14, 26, 44, 0.55); }
.vs2__col-head--us .vs2__col-label { color: #0771AB; }
.vs2__col-meta {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-style: italic;
  color: rgba(14, 26, 44, 0.45);
}
.vs2__col-head--us .vs2__col-meta { color: rgba(7, 113, 171, 0.7); }

/* ROWS */
.vs2__rows {
  list-style: none;
  margin: 0 0 clamp(56px, 7vw, 96px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vs2__row {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
  padding: clamp(20px, 2vw, 26px) clamp(18px, 2vw, 26px);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(7, 113, 171, 0.10);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease,
    border-color 0.5s ease;
  box-shadow: 0 4px 14px rgba(14, 26, 44, 0.04);
}
.vs2__row:hover {
  transform: translateY(-3px);
  border-color: rgba(29, 183, 206, 0.35);
  box-shadow:
    0 18px 36px rgba(7, 113, 171, 0.10),
    0 4px 10px rgba(14, 26, 44, 0.06);
}

/* Topic column (left) */
.vs2__row-topic {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding-right: 12px;
  border-right: 1px dashed rgba(7, 113, 171, 0.14);
}
.vs2__row-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #0771AB;
}
.vs2__row-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(29, 183, 206, 0.14), rgba(7, 113, 171, 0.08));
  color: #0771AB;
  border: 1px solid rgba(7, 113, 171, 0.18);
}
.vs2__row-name {
  margin: 4px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.25;
  color: #0E1A2C;
  letter-spacing: -0.012em;
}

/* Cells (them / us) */
.vs2__cell {
  padding: 4px 0 4px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  border-left: 3px solid transparent;
}
.vs2__cell--them {
  border-left-color: rgba(46, 47, 48, 0.25);
}
.vs2__cell--us {
  border-left-color: #0771AB;
  background: linear-gradient(90deg, rgba(29, 183, 206, 0.05), transparent 80%);
  border-radius: 4px;
}
.vs2__quote {
  margin: 0 0 8px;
  font-size: clamp(1rem, 1.2vw, 1.18rem);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
.vs2__cell--them .vs2__quote {
  color: rgba(14, 26, 44, 0.45);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  text-decoration: line-through;
  text-decoration-color: rgba(46, 47, 48, 0.35);
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;
}
.vs2__cell--us .vs2__quote {
  color: #0E1A2C;
  font-weight: 400;
}
.vs2__cell--us .vs2__quote strong {
  font-weight: 700;
  color: #0E1A2C;
}
.vs2__note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(14, 26, 44, 0.55);
}
.vs2__cell--them .vs2__note {
  color: rgba(14, 26, 44, 0.4);
}

/* FINALE — "with us" feeling */
.vs2__finale {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 60px) clamp(28px, 4vw, 56px);
  background: linear-gradient(160deg, #0771AB 0%, #054e76 100%);
  border-radius: 24px;
  color: #FFFFFF;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 30px 60px rgba(7, 113, 171, 0.25),
    0 8px 18px rgba(14, 26, 44, 0.10);
}
.vs2__finale::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 12%, rgba(29, 183, 206, 0.28), transparent 50%),
    radial-gradient(circle at 88% 88%, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
}
.vs2__finale > * { position: relative; z-index: 1; }

.vs2__finale-mark {
  position: relative;
  width: clamp(80px, 9vw, 100px);
  height: clamp(80px, 9vw, 100px);
  border-radius: 50%;
  background: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.vs2__finale-ring {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.45);
  animation: vs2-ring-spin 38s linear infinite;
}
@keyframes vs2-ring-spin {
  to { transform: rotate(360deg); }
}
.vs2__finale-logo {
  width: 62%;
  height: 62%;
  object-fit: contain;
  display: block;
}
.vs2__finale-kicker {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.vs2__finale-h {
  margin: 10px 0 26px;
  font-family: 'Montserrat', var(--font-stack);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}
.vs2__finale-h em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: #1DB7CE;
  font-size: 1.05em;
}
.vs2__finale-list {
  list-style: none;
  margin: 0 auto 28px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 540px;
  text-align: left;
}
.vs2__finale-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: -0.005em;
}
.vs2__finale-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1DB7CE;
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.vs2__finale-cta { display: inline-flex; }
.vs2__finale-cta .m-button__wrap {
  padding: 16px 32px !important;
  font-size: 1rem !important;
  border-radius: 10px;
}
.vs2__finale-cta .m-b-bg {
  background: #FFFFFF;
  border-radius: 10px;
}
.vs2__finale-cta .m-button__wrap {
  color: #0E1A2C !important;
}
.vs2__finale-cta .m-button__wrap:hover .m-b-bg {
  background: #1DB7CE;
}
.vs2__finale-cta .m-button__wrap:hover {
  color: #FFFFFF !important;
}

/* Mobile */
@media (max-width: 900px) {
  .vs2__col-headers { display: none; }
  .vs2__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .vs2__row-topic {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-right: 0;
    padding-bottom: 14px;
    border-right: none;
    border-bottom: 1px dashed rgba(7, 113, 171, 0.14);
  }
  .vs2__row-num { order: 1; }
  .vs2__row-icon { order: 0; }
  .vs2__row-name { order: 2; margin: 0; flex: 1; }
  .vs2__cell { padding-left: 14px; }
  .vs2__cell--them::before {
    content: 'Standard MSP';
    display: block;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(14, 26, 44, 0.45);
    margin-bottom: 6px;
  }
  .vs2__cell--us::before {
    content: 'All IT';
    display: block;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #0771AB;
    margin-bottom: 6px;
  }
}

/* ======================================================================
   SECTION 7 → 8 PARALLAX BRIDGE
   ====================================================================== */
.section__vs-bridge {
  position: relative;
  height: clamp(80px, 10vw, 140px);
  background: linear-gradient(to bottom, #E4EEF5 0%, #F2F8FC 60%, #FFFFFF 100%);
  margin-top: -1px;
  z-index: 1;
  overflow: hidden;
}
.section__vs-bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(7,113,171,0.04) 0%, transparent 70%);
  pointer-events: none;
}
.section__letters.js-parallax-reveal {
  will-change: transform, opacity;
}

/* ======================================================================
   SECTION 8 — COLOR BLOCKS
   ====================================================================== */
.section__color-blocks {
  background: #EDF1F5;
}

.color-block {
  background: var(--white);
  border: 1px solid var(--soft-grey);
  border-radius: 20px;
  padding: 40px clamp(20px, 3vw, 50px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
  margin-bottom: clamp(40px, 5vh, 80px);
  transition: box-shadow 0.3s;
}
.color-block:hover {
  box-shadow: 0 12px 40px rgba(7, 113, 171, 0.06);
}

.color-block > h2 { margin-bottom: clamp(30px, 3vw, 60px); }
.color-block__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 4vw, 60px); align-items: center;
}
.color-block--reverse .color-block__inner { direction: rtl; }
.color-block--reverse .color-block__inner > * { direction: ltr; }
.color-block__text h3 { margin-bottom: 0.8em; }
.color-block__media img {
  border-radius: 16px; width: 100%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  transform: translateZ(0);
}

@media (min-width: 992px) {
  .section__color-blocks {
    padding-top: clamp(80px, 10vw, 160px);
    padding-bottom: clamp(120px, 15vw, 300px);
  }
  .color-block {
    position: sticky;
    top: 120px;
    border-radius: 24px;
    padding: 60px clamp(40px, 5vw, 85px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.04);
    margin-bottom: 120px;
    transform-origin: top center;
  }
  .color-block:hover {
    box-shadow: 0 25px 70px rgba(7, 113, 171, 0.1);
  }
}

/* ======================================================================
   SECTION 9 — USE CASES
   ====================================================================== */
.section__use-cases { background: var(--white); }
.section__use-cases > .container > h2 { margin-bottom: clamp(40px, 4vw, 80px); }

.use-cases__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 36px);
}
.use-case-card {
  background: var(--bg); border: 1px solid rgba(7,113,171,0.06);
  border-radius: 16px; padding: clamp(24px, 2vw, 36px);
  transition: box-shadow 0.3s, transform 0.3s;
}
.use-case-card:hover { box-shadow: 0 8px 30px rgba(7,113,171,0.1); transform: translateY(-4px); }
.use-case-card__icon-wrap { position: relative; width: 56px; height: 56px; margin-bottom: 20px; }
.use-case-card__circle-bg {
  position: absolute; inset: -4px; border-radius: 50%;
  background: rgba(7,113,171,0.06);
}
.use-case-card h4 { margin-bottom: 12px; }

/* ======================================================================
   MICRO-TESTIMONIAL (3D Isometric Floating "Twitter" Cards)
   ====================================================================== */
.h-usp-card {
  position: relative;
  /* Ensure the main card doesn't clip its children */
  overflow: visible;
}

.h-usp-card__quote {
  /* In normal flow (was absolutely positioned with reserved card padding,
     which overlapped the copy above on laptop/short screens). margin-top:auto
     pins it to the card bottom; the 3D tilt + float are pure transforms. */
  position: relative;
  width: auto;
  max-width: none;
  margin-top: auto;
  margin-bottom: -4px;
  padding: clamp(14px, 1.7vw, 22px) clamp(16px, 1.9vw, 24px);
  background: rgba(255, 255, 255, 0.85); /* Frosty glass effect */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 16px;

  /* Twitter-style isometric transform */
  transform: perspective(1000px) rotateX(25deg) rotateY(-10deg) rotateZ(5deg);
  transform-style: preserve-3d;

  /* Deep floating shadow to create 3D depth */
  box-shadow:
    -15px 25px 40px rgba(14,26,44,0.06),
    -5px 10px 15px rgba(14,26,44,0.04),
    inset 0 1px 0 rgba(255,255,255,1);

  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease;
  z-index: 10;

  /* Start floating animation */
  animation: floatIso 6s ease-in-out infinite;
}

/* Stagger animations for organic feel across the 3 cards */
.h-usp-card--1 .h-usp-card__quote { animation-delay: 0s; transform-origin: center right; }
.h-usp-card--2 .h-usp-card__quote { animation-delay: -2s; transform-origin: center right; }
.h-usp-card--3 .h-usp-card__quote { animation-delay: -4s; transform-origin: center right; }

@media (max-width: 991px) {
  .h-usp-card {
    padding-bottom: 28px;
  }
  .h-usp-card__quote {
    position: relative;
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
    width: 100%;
    max-width: none;
    margin-top: 16px;
    transform: none !important;
    animation: none !important;
    box-shadow: 0 4px 12px rgba(14,26,44,0.03);
    background: #FFFFFF;
    border: 1px solid rgba(14,26,44,0.06);
  }
  .h-usp-card:hover .h-usp-card__quote {
    transform: none !important;
  }
}

@keyframes floatIso {
  0%   { transform: perspective(1000px) rotateX(25deg) rotateY(-10deg) rotateZ(5deg) translateY(0px); }
  50%  { transform: perspective(1000px) rotateX(25deg) rotateY(-10deg) rotateZ(5deg) translateY(-14px); }
  100% { transform: perspective(1000px) rotateX(25deg) rotateY(-10deg) rotateZ(5deg) translateY(0px); }
}

.h-usp-card__quote-mark {
  position: absolute;
  top: -8px; right: 20px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1;
  color: rgba(7,113,171,0.05);
  pointer-events: none;
}

.h-usp-card__quote-text {
  margin: 0 0 16px;
  font-family: var(--font-stack);
  font-size: 0.94rem;
  line-height: 1.5;
  color: #0E1A2C;
  font-weight: 400;
}

.h-usp-card__quote-cite {
  display: flex;
  align-items: center;
  gap: 10px;
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #0771AB;
}
.h-usp-card__quote-avatar {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  background: #FFFFFF;
  border: 1px solid rgba(7, 113, 171, 0.15);
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(7, 113, 171, 0.10);
}

/* Interactive hover alignment — when user hovers the card, the testimonial "wakes up" and faces them! */
.h-usp-card:hover .h-usp-card__quote {
  animation-play-state: paused;
  transform: perspective(1000px) rotateX(25deg) rotateY(-10deg) rotateZ(5deg) scale(1.03) translateY(-6px);
  box-shadow: 
    -18px 30px 45px rgba(14,26,44,0.12),
    -6px 12px 20px rgba(14,26,44,0.06),
    inset 0 1px 0 rgba(255,255,255,1);
  background: rgba(255, 255, 255, 0.95);
  z-index: 12;
}

/* ======================================================================
   SECTION 7.5 — LETTERS (Pinned stack-of-letters reveal)
   ====================================================================== */
.section__letters {
  background: #E4EEF5; /* Transition color: warm off-white parchment tint */
  color: #0E1A2C;
  position: relative;
  padding: 0 !important;
  overflow: visible;
}

.letters__pin {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: #E4EEF5;
  overflow: hidden;
}

.letters__pin::before {
  /* Ruled paper background visual context */
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 16%, rgba(29, 183, 206, 0.03), transparent 38%),
    radial-gradient(circle at 88% 84%, rgba(7,113,171,0.03), transparent 42%);
  pointer-events: none;
}

.section__letters {
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 8vh, 120px) 0;
}

.section__letters::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(to bottom, transparent 0, transparent 38px, rgba(14,26,44,0.02) 38px, rgba(14,26,44,0.02) 39px);
  background-size: 100% 39px;
  pointer-events: none;
  opacity: 0.55;
  mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}

.letters__inner {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vh, 60px);
  width: 100%;
}

/* ---------- HEAD & NAV ---------- */
.letters__head-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.letters__head {
  text-align: left;
  max-width: 600px;
}

.letters__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.5);
}

.letters__kicker-mark {
  display: inline-block;
  width: 26px;
  height: 1px;
  background: #0771AB;
}

.letters__h {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.026em;
  color: #0E1A2C;
  margin: 0;
}

.letters__h .js-text-underline {
  font-style: italic;
  font-weight: 700;
}

.letters__sub {
  font-size: clamp(0.9rem, 1.05vw, 1.1rem);
  color: rgba(14,26,44,0.6);
  margin-top: 8px;
}

.letters__nav {
  display: flex;
  gap: 12px;
  padding-bottom: 8px;
}

.letters__nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(7,113,171,0.2);
  background: transparent;
  color: #0771AB;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.letters__nav-btn:hover {
  background: #0771AB;
  color: #FFF;
  border-color: #0771AB;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(7,113,171,0.2);
}

/* ---------- DECK WRAP (Horizontal Marquee) ---------- */
.letters__deck-wrap {
  position: relative;
  width: 100%;
}

.letters__deck {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 40px; /* shadow room */
  padding-top: 10px;
  /* Hide scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.letters__deck::-webkit-scrollbar {
  display: none;
}

/* ---------- LETTER CARD ---------- */
.letter {
  flex: 0 0 clamp(320px, 45%, 450px);
  scroll-snap-align: start;
  border-radius: 8px;
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(14,26,44,0.08);
  box-shadow: 0 4px 16px rgba(14,26,44,0.04);
  background-blend-mode: multiply;
  background-image: radial-gradient(circle at 50% 10%, rgba(255,255,255,0.25), rgba(14,26,44,0.015));
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Subtle hover light effect */
.letter:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(7,113,171,0.08), 0 4px 10px rgba(14,26,44,0.03);
  border-color: rgba(7,113,171,0.2);
}

/* Five cream paper background tints */
.letter[data-letter="0"] { --paper-tint: #F0F5FA; background-color: var(--paper-tint); }
.letter[data-letter="1"] { --paper-tint: #EBF1F8; background-color: var(--paper-tint); }
.letter[data-letter="2"] { --paper-tint: #E4EEF5; background-color: var(--paper-tint); }
.letter[data-letter="3"] { --paper-tint: #E8F0F7; background-color: var(--paper-tint); }
.letter[data-letter="4"] { --paper-tint: #F2F7FC; background-color: var(--paper-tint); }

.letter__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  border-bottom: 1px dashed rgba(14,26,44,0.08);
  padding-bottom: 12px;
  margin-bottom: clamp(12px, 2vh, 22px);
}

.letter__re {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.55);
}

.letter__date {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 500;
  color: rgba(14,26,44,0.4);
  margin-right: 32px; /* make space for stamp */
}

/* Wax seal stamp */
.letter__stamp {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1DB7CE 0%, #0771AB 75%, #054e76 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.45),
              0 2px 6px rgba(7,113,171,0.4);
  transform: rotate(-12deg);
}

.letter__quote {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.45;
  color: #0E1A2C;
  margin: 0;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.letter__quote em {
  font-style: italic;
  color: #0771AB;
  font-weight: 600;
}

.letter__open {
  font-family: Georgia, serif;
  color: rgba(7,113,171,0.22);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 0;
  margin-right: 4px;
  vertical-align: middle;
}

.letter__sign {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: clamp(14px, 2.5vh, 24px);
  padding-top: clamp(10px, 1.5vh, 16px);
  border-top: 1px dashed rgba(14,26,44,0.08);
}

.letter__signature {
  width: 150px;
  height: 38px;
  display: block;
  stroke: #0E1A2C;
  stroke-width: 1.6;
  fill: none;
  margin-bottom: 2px;
}

.letter__name {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0E1A2C;
  margin: 0;
}

.letter__role {
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(14,26,44,0.5);
  margin: 0;
}

/* ---------- FOOT ---------- */
.letters__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.45);
  border-top: 1px solid rgba(14,26,44,0.1);
  padding-top: 16px;
}

.letters__count {
  display: flex;
  align-items: center;
  gap: 6px;
}

.letters__count-current {
  color: #0771AB;
  font-weight: 700;
}

.letters__count-divider {
  color: rgba(14,26,44,0.25);
}

.letters__count-total {
  color: rgba(14,26,44,0.55);
}

.letters__hint {
  color: rgba(14,26,44,0.4);
  margin: 0;
}

/* ---------- RESPONSIVE / MOBILE FALLBACK ---------- */
@media (max-width: 991px) {
  .letters__pin {
    height: auto !important;
    min-height: auto;
    padding: 60px 0;
  }
  .letters__pin::after {
    display: none; /* remove ruled lines overlay on mobile for cleaner stack spacing */
  }
  .letters__inner {
    grid-template-rows: auto;
    height: auto !important;
    min-height: auto;
    padding-top: 0;
    padding-bottom: 0;
    gap: 32px;
  }
  .letters__deck-wrap {
    height: auto;
  }
  .letters__deck {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 100%;
    perspective: none;
  }
  .letter {
    position: relative;
    width: 100%;
    height: auto;
    opacity: 1 !important;
    transform: none !important;
    box-shadow: 0 4px 15px rgba(14,26,44,0.06);
    margin-bottom: 0;
  }
  
  /* Organic rotations in vertical feed stack */
  .letter[data-letter="0"] { transform: rotate(-1deg) !important; }
  .letter[data-letter="1"] { transform: rotate(1.2deg) !important; }
  .letter[data-letter="2"] { transform: rotate(-0.8deg) !important; }
  .letter[data-letter="3"] { transform: rotate(1.5deg) !important; }
  .letter[data-letter="4"] { transform: rotate(-1.2deg) !important; }

  .letters__foot {
    display: none; /* Hide interactive footer on mobile */
  }
}

/* ======================================================================
   SECTION 7.5 — TESTIMONIAL SLIDER (slothUI-inspired premium slider)
   ====================================================================== */
.section__testimonial-slider {
  background: #FFFFFF;
  color: #0E1A2C;
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative;
  overflow: hidden;
}
.section__testimonial-slider::after {
  /* Subtle top edge to separate from the vs section bridge */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(7, 113, 171, 0.18), transparent);
}
.section__testimonial-slider::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 30%, rgba(29,183,206,0.06), transparent 42%),
    radial-gradient(circle at 82% 70%, rgba(7,113,171,0.06), transparent 42%);
  pointer-events: none;
}

.ts__container {
  position: relative;
  z-index: 1;
}

.ts__head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 70px);
}
.ts__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.55);
}
.ts__kicker-mark {
  display: inline-block;
  width: 26px;
  height: 1px;
  background: #0771AB;
}
.ts__heading {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.026em;
  color: #0E1A2C;
  margin: 0;
}
.ts__heading .js-text-underline {
  font-style: italic;
  font-weight: 700;
}

.ts__stage {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F9FC 100%);
  border-radius: 28px;
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px);
  box-shadow:
    0 30px 60px rgba(7, 113, 171, 0.08),
    0 10px 24px rgba(14, 26, 44, 0.05),
    0 0 0 1px rgba(7, 113, 171, 0.05);
  overflow: hidden;
}
.ts__stage::before {
  /* Large background quotation mark — premium editorial detail */
  content: '\201C';
  position: absolute;
  top: -40px;
  left: 24px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(180px, 24vw, 320px);
  line-height: 1;
  color: rgba(7, 113, 171, 0.05);
  font-weight: 700;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Subtle per-slide brand watermark — bottom-right corner, big, low opacity,
   diagonally masked so the right-column text never sits over the logo. */
.ts__watermark {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: clamp(260px, 32vw, 420px);
  height: auto;
  max-height: 80%;
  object-fit: contain;
  object-position: bottom right;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  /* Fade the watermark away from the upper-left where the quote text sits */
  -webkit-mask-image: linear-gradient(315deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 78%);
          mask-image: linear-gradient(315deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 78%);
  user-select: none;
  filter: saturate(1.1);
}

/* Make sure the slide content (avatar + copy) sits above the watermark */
.ts__slide .ts__avatar,
.ts__slide .ts__copy { position: relative; z-index: 1; }

.ts__slides {
  position: relative;
  min-height: 280px;
}

.ts__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: clamp(140px, 16vw, 200px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.ts__slide.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}
.ts__slide.is-leaving {
  opacity: 0;
  transform: translateX(-40px);
}

/* Avatar — rounded-square plate so client logos of any aspect ratio
   (square, wide, tall) sit cleanly with proper breathing room. */
.ts__avatar {
  position: relative;
  width: clamp(140px, 16vw, 200px);
  height: clamp(140px, 16vw, 200px);
  border-radius: 24px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0 auto;
  padding: clamp(20px, 2vw, 28px);
  box-shadow:
    0 14px 32px rgba(7, 113, 171, 0.14),
    0 2px 6px rgba(14, 26, 44, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.ts__avatar img,
.ts__avatar svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ts__avatar-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 3.5vw, 3.4rem);
  color: #0771AB;
  letter-spacing: -0.02em;
  z-index: 1;
}
/* Real client logo — fills the padded plate, aspect preserved.
   The padding inside .ts__avatar acts as the breathing room. */
.ts__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  z-index: 1;
}
/* Subtle rotated-square accent ring around the avatar — matches the
   rounded-square shape, replaces the old circular dashed ring. */
.ts__avatar-ring {
  position: absolute;
  inset: -10px;
  border-radius: 28px;
  border: 1px dashed rgba(7, 113, 171, 0.30);
  pointer-events: none;
  transform: rotate(-3deg);
}

.ts__copy {
  position: relative;
  min-width: 0;
}
.ts__open {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  line-height: 0.8;
  color: rgba(7, 113, 171, 0.45);
  font-weight: 700;
  margin-bottom: 8px;
}
.ts__quote {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.95rem);
  line-height: 1.4;
  color: #0E1A2C;
  margin: 0 0 22px;
  font-weight: 400;
  letter-spacing: -0.014em;
  max-width: 640px;
}
.ts__quote em {
  font-style: italic;
  color: #0771AB;
  font-weight: 600;
}
.ts__cite {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ts__name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0E1A2C;
  letter-spacing: -0.005em;
}
.ts__role {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.55);
}

/* Controls — pagination dots + prev/next */
.ts__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 24px;
  border-top: 1px solid rgba(7, 113, 171, 0.08);
}
.ts__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(7, 113, 171, 0.18);
  background: #FFFFFF;
  color: #0771AB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
.ts__nav-btn:hover {
  background: #0771AB;
  color: #FFFFFF;
  border-color: #0771AB;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(7, 113, 171, 0.25);
}
.ts__nav-btn:active {
  transform: translateY(0);
}
.ts__nav-btn {
  position: relative;
}
.ts__nav-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  background: #0E1A2C;
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 14px rgba(14, 26, 44, 0.18);
  z-index: 5;
}
.ts__nav-tip--left  { left: 0; }
.ts__nav-tip--right { right: 0; }
.ts__nav-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  border: 5px solid transparent;
  border-top-color: #0E1A2C;
}
.ts__nav-tip--left::after  { left: 16px; }
.ts__nav-tip--right::after { right: 16px; }
.ts__nav-btn:hover .ts__nav-tip {
  opacity: 1;
  transform: translateY(0);
}
.ts__dots {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ts__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(14, 26, 44, 0.18);
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.ts__dot:hover {
  background: rgba(7, 113, 171, 0.45);
}
.ts__dot.is-active {
  background: #0771AB;
  width: 26px;
  border-radius: 4px;
}

/* Mobile: stack avatar above copy */
@media (max-width: 768px) {
  .ts__slide {
    grid-template-columns: 1fr;
    gap: 22px;
    text-align: center;
  }
  .ts__avatar {
    margin: 0 auto;
  }
  .ts__quote {
    margin-left: auto;
    margin-right: auto;
  }
  .ts__stage {
    padding: 40px 24px;
  }
  .ts__stage::before {
    font-size: 160px;
    top: -20px;
    left: 8px;
  }
}

/* ======================================================================
   SECTION 9.5 — FINAL HIGH-CONFIDENCE QUOTE
   ====================================================================== */
.section__final-quote {
  background: #E4EEF5;
  color: #0E1A2C;
  padding: clamp(80px, 12vw, 180px) 0;
  position: relative;
  overflow: hidden;
}
.section__final-quote::before {
  /* Paper texture grain via radial gradients */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 30%, rgba(7,113,171,0.05), transparent 40%),
    radial-gradient(circle at 78% 70%, rgba(29, 183, 206, 0.04), transparent 40%);
  pointer-events: none;
}

.final-quote__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
}

.final-quote__rule {
  display: block;
  width: clamp(60px, 8vw, 100px);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(7,113,171,0.5), transparent);
}

.final-quote {
  position: relative;
  margin: 0;
  max-width: 720px;
}

.final-quote__open,
.final-quote__close {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(3rem, 5vw, 4.5rem);
  line-height: 1;
  color: rgba(7,113,171,0.6);
  font-weight: 700;
  user-select: none;
}
.final-quote__open { margin-bottom: -10px; }
.final-quote__close { margin-top: -8px; }

.final-quote__text {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: #0E1A2C;
}
.final-quote__text em {
  font-style: italic;
  color: #0771AB;
  font-weight: 600;
}

.final-quote__cite {
  margin-top: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.final-quote__signature {
  display: inline-block;
  margin-bottom: 8px;
}
.final-quote__signature-svg {
  width: clamp(150px, 18vw, 200px);
  height: auto;
}
.final-quote__signature-svg path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.section__final-quote.is-visible .final-quote__signature-svg path {
  animation: final-quote-sig-draw 2s var(--ease-draw) 0.4s forwards;
}
@keyframes final-quote-sig-draw {
  to { stroke-dashoffset: 0; }
}

.final-quote__name {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #0E1A2C;
}
.final-quote__role {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.55);
}

/* ======================================================================
   SECTION 10 — CTA DARK
   ====================================================================== */
.section__cta {
  background: var(--dark); color: var(--white);
  overflow: hidden;
}
.section__cta p { color: rgba(255,255,255,0.7); max-width: 600px; margin: 1em auto 0; }
.section__cta .js-text-underline path { stroke: var(--secondary); }
.cta__btn { margin-top: 2em; display: flex; justify-content: center; }

/* Decorative circles */
.cta__decorative { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cta__circle {
  position: absolute; border-radius: 50%;
  opacity: 0.08;
}
.cta__circle--1 {
  width: 300px; height: 300px; background: var(--secondary);
  top: -80px; left: -60px;
}
.cta__circle--2 {
  width: 200px; height: 200px; background: var(--accent);
  bottom: -40px; right: 10%;
}
.cta__circle--3 {
  width: 160px; height: 160px; background: var(--tertiary);
  top: 30%; right: -30px;
}

/* ======================================================================
   CONTACT MODAL
   ====================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease;
}
.modal.is-open { opacity: 1; pointer-events: all; }
.modal__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}
.modal__dialog {
  position: relative; z-index: 1;
  background: var(--white); border-radius: 20px;
  padding: clamp(30px, 4vw, 60px);
  max-width: 580px; width: 90%;
  max-height: 90vh; overflow-y: auto;
  transform: translateY(30px);
  transition: transform 0.4s var(--ease-draw);
}
.modal.is-open .modal__dialog { transform: translateY(0); }
.modal__close {
  position: absolute; top: 16px; right: 20px;
  background: none; border: none; font-size: 2rem; color: var(--text-grey);
  cursor: pointer; line-height: 1;
}
.modal__dialog h2 { margin-bottom: 0.3em; }
.modal__dialog > p { margin-top: 0; margin-bottom: 1.5em; }
.modal__form { display: flex; flex-direction: column; gap: 14px; }
.modal__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.modal__form input,
.modal__form textarea {
  width: 100%; border: 1px solid var(--soft-grey);
  border-radius: 10px; padding: 14px 16px;
  font-family: var(--font-stack); font-size: 0.95rem;
  transition: border-color 0.3s;
  outline: none;
}
.modal__form input:focus,
.modal__form textarea:focus { border-color: var(--accent); }
.modal__submit { margin-top: 10px; }

.modal__success p { color: var(--accent); font-weight: 600; text-align: center; padding: 30px 0; }
.modal__error p { color: #d9534f; font-weight: 600; text-align: center; padding: 10px 0; }

/* ======================================================================
   SECTION 11 — FOOTER
   ====================================================================== */
.section__footer {
  background: var(--bg);
  border-top: 1px solid var(--soft-grey);
  padding-top: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(30px, 3vw, 50px);
}
.footer__inner {
  display: grid; grid-template-columns: 1.5fr repeat(2, 1fr);
  gap: clamp(20px, 3vw, 50px);
}
.footer__brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.1rem; color: var(--dark);
  margin-bottom: 16px;
}
.footer__legal { font-size: 0.8rem; color: var(--text-grey); margin-top: 12px; }
.footer__address, .footer__phone { font-size: 0.85rem; color: var(--text-grey); margin-top: 4px; }
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer__col h5 { margin-bottom: 20px; color: var(--dark); }
.footer__link {
  display: inline-block; width: max-content; position: relative;
  font-size: 0.9rem; color: var(--text-grey);
  padding: 6px 0;
}
.footer__link-underline {
  width: 100%; height: 6px;
  position: absolute; bottom: 0; left: 0;
}
.footer__link-underline path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  transition: stroke-dashoffset 0.7s var(--ease-draw);
}
.footer__link:hover .footer__link-underline path { stroke-dashoffset: 0; }

/* ======================================================================
   ASPECT RATIO UTILITIES
   ====================================================================== */
.a-ratio-ticket     { aspect-ratio: 500 / 374; object-fit: cover; width: 100%; }
.a-ratio-dashboard  { aspect-ratio: 856 / 508; object-fit: cover; width: 100%; }
.a-ratio-servicedesk { aspect-ratio: 800 / 475; object-fit: cover; width: 100%; }
.a-ratio-reporting  { aspect-ratio: 800 / 475; object-fit: cover; width: 100%; }

/* ======================================================================
   SCROLL FADE UTILITY
   ====================================================================== */
.js-scroll-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s var(--ease-draw);
}
.js-scroll-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ======================================================================
   PREFERS REDUCED MOTION
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* transition/animation: none (NOT 0.01ms durations) — near-zero CSSTransitions
     get created on every style change and can stick at their start value,
     which collapses GSAP pin-spacers and breaks the pinned sections. */
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .js-scroll-fade { opacity: 1; transform: none; }
  .curtain { display: none; }
}

/* GSAP pin spacers must never animate their geometry — a transitioning
   height/padding collapses the pinned sections' scroll runway. */
.pin-spacer {
  transition: none !important;
  animation: none !important;
}

/* ======================================================================
   RESPONSIVE — TABLET (480–991)
   ====================================================================== */
@media (max-width: 991px) {
  .navbar__links { display: none; }
  .navbar__cta { display: none; }
  .navbar__hamburger { display: flex; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { margin-top: 40px; max-width: 500px; margin-left: auto; margin-right: auto; }

  .horizontal-usp__inner { grid-template-columns: 1fr; }
  .horizontal-usp__cards { grid-template-columns: repeat(2, 1fr); }

  .conversion__inner { grid-template-columns: 1fr; }
  .conversion__video { order: 2; }
  .conversion__copy { order: 1; }

  .color-block__inner { grid-template-columns: 1fr; }
  .color-block--reverse .color-block__inner { direction: ltr; }
  .color-blocks__sidenav { display: none; }

  .use-cases__grid { grid-template-columns: repeat(2, 1fr); }

  .footer__inner { grid-template-columns: repeat(2, 1fr); }
  .footer__col--brand { grid-column: 1 / -1; }
}

/* ======================================================================
   RESPONSIVE — MOBILE (<480)
   ====================================================================== */
@media (max-width: 479px) {
  .hero__rotator { height: 2.5rem; }

  .horizontal-usp__cards { grid-template-columns: 1fr; }

  .use-cases__grid { grid-template-columns: 1fr; }

  .footer__inner { grid-template-columns: 1fr; }

  .modal__form-row { grid-template-columns: 1fr; }
}

/* ======================================================================
   SECTION 7.8 — THE TEAM (Minimalist Creative Monograph)
   ====================================================================== */
.section__team {
  background: #EDF1F5;
  color: #0E1A2C;
  overflow: hidden;
  padding-top: clamp(60px, 8vw, 120px);
  padding-bottom: clamp(60px, 8vw, 120px);
}

.team__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

/* Kicker and Header styles */
.team__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.5);
}

.team__kicker-mark {
  display: inline-block;
  width: 26px;
  height: 1px;
  background: #0771AB;
}

.team__h {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.026em;
  color: #0E1A2C;
  margin: 0 0 24px;
}

.team__h .js-text-underline {
  font-style: italic;
  font-weight: 700;
}

/* Portrait Frame Box */
.team__portrait-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(14,26,44,0.08);
  aspect-ratio: 16/10;
  background: #0E1A2C;
  border: 1px solid rgba(14,26,44,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
}

.team__portrait-placeholder {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #15253c 0%, #08111e 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
}

.team__portrait-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.8;
}

.team__portrait-borders {
  position: absolute;
  inset: 20px;
  border: 1px dashed rgba(255,255,255,0.07);
  pointer-events: none;
}

/* Photographic mounting corners in CSS */
.team__portrait-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.12);
  pointer-events: none;
}
.team__portrait-corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.team__portrait-corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.team__portrait-corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.team__portrait-corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.team__portrait-meta {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 12px;
  text-align: center;
}

.team__portrait-icon {
  color: #0771AB;
  margin-bottom: 12px;
  animation: pulseLight 4s ease-in-out infinite;
}

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

/* Right hand copy */
.team__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.team__lead-text {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.35;
  color: #0E1A2C;
  margin: 0 0 18px 0;
  font-weight: 500;
  border-left: 3px solid #0771AB;
  padding-left: 20px;
}

.team__body-text {
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(14,26,44,0.65);
  margin: 0 0 32px 0;
}

/* Manifest Grid of Names */
.team__manifest {
  border-top: 1px solid rgba(14,26,44,0.1);
  display: flex;
  flex-direction: column;
}

.team__member {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(14,26,44,0.06);
  position: relative;
  cursor: default;
  transition: padding-left 0.3s ease;
}

.team__member::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: #0771AB;
  transition: width 0.3s ease;
}

.team__member-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 600;
  color: #0771AB;
  width: 36px;
  font-variant-numeric: tabular-nums;
}

.team__member-details {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}

.team__member-name {
  font-weight: 600;
  font-size: 0.94rem;
  color: #0E1A2C;
}

.team__member-role {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: rgba(14,26,44,0.5);
  letter-spacing: 0.05em;
}

/* Hover updates */
.team__member:hover {
  padding-left: 12px;
}

.team__member:hover::after {
  width: 100%;
}

.team__member:hover .team__member-name {
  color: #0771AB;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .team__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ======================================================================
   SCROLL CONTEXT PROGRESS TILES SYSTEM
   ====================================================================== */
.shift__tiles-container,
.vs__tiles-container {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: clamp(16px, 2.5vw, 40px);
  width: 100%;
  margin-top: 10px;
  margin-bottom: 5px;
  z-index: 20;
  position: relative;
}

.shift__tile,
.vs__tile {
  position: relative; /* Anchor the bottom rivet dots */
  flex: 1;
  background: transparent;
  border: none;
  border-top: 2px solid rgba(14, 26, 44, 0.08);
  border-radius: 0 0 6px 6px;
  padding: 12px 14px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(240px) scale(0.7);
  cursor: pointer;
  transition: background 0.3s ease, border-top-color 0.3s ease;
  box-shadow: none;
  pointer-events: none;
}

/* Premium creative chip-card overrides for vs tiles only — bigger, more present */
.vs__tile {
  flex: 1 1 0;
  min-width: 0;
  max-width: 240px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(7, 113, 171, 0.10);
  border-top: 2px solid rgba(7, 113, 171, 0.15);
  border-radius: 14px;
  padding: 20px 22px 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 18px rgba(14, 26, 44, 0.05);
  gap: 8px;
}
.vs__tile-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(29, 183, 206, 0.10);
  color: #0E8E9F;
  margin-bottom: 6px;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}
.vs__tile-glyph svg {
  display: block;
  width: 20px;
  height: 20px;
}
.vs__tile-num {
  font-size: 0.7rem !important;
}
.vs__tile-name {
  font-size: clamp(1rem, 1.2vw, 1.18rem) !important;
}
.vs__tile-status {
  font-size: 0.72rem !important;
}
.vs__tile.is-active .vs__tile-glyph {
  background: linear-gradient(135deg, #0771AB 0%, #1DB7CE 100%);
  color: #FFFFFF;
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(7, 113, 171, 0.28);
}
.vs__tile.is-completed .vs__tile-glyph {
  background: rgba(7, 113, 171, 0.08);
  color: #0771AB;
}
.vs__tile.is-active {
  border-color: rgba(29, 183, 206, 0.4);
  border-top-color: #1DB7CE;
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 10px 28px rgba(7, 113, 171, 0.10),
    0 2px 6px rgba(14, 26, 44, 0.05);
}
.vs__tile.is-completed {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(14, 26, 44, 0.08);
  border-top-color: rgba(7, 113, 171, 0.35);
}

/* Hover & Active tab styling */
.shift__tile:hover,
.vs__tile:hover {
  opacity: 0.95 !important;
  background: rgba(255, 255, 255, 0.15);
}

.shift__tile.is-active,
.vs__tile.is-active,
.shift__tile.is-completed,
.vs__tile.is-completed {
  pointer-events: auto;
}

.shift__tile.is-active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.45);
  border-top-color: #0771AB;
  border-top-width: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 12px rgba(14, 26, 44, 0.02);
}

.vs__tile.is-active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.45);
  border-top-color: #1DB7CE;
  border-top-width: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 12px rgba(14, 26, 44, 0.02);
}

.shift__tile.is-completed,
.vs__tile.is-completed {
  opacity: 0.8 !important;
  background: rgba(255, 255, 255, 0.2);
  border-top-color: rgba(14, 26, 44, 0.35);
  border-top-width: 2px;
}

.shift__tile::after,
.vs__tile::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%) scale(0.5);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(14, 26, 44, 0.25);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, background-color 0.4s ease;
  z-index: 10;
}

.shift__tile.is-active::after,
.shift__tile.is-completed::after,
.vs__tile.is-active::after,
.vs__tile.is-completed::after {
  opacity: 1;
  transform: translate(-50%, 50%) scale(1);
}

.shift__tile.is-active::after {
  background: #0771AB;
  box-shadow: 0 0 0 2px rgba(7, 113, 171, 0.15);
}

.vs__tile.is-active::after {
  background: #1DB7CE;
  box-shadow: 0 0 0 2px rgba(29, 183, 206, 0.15);
}

.shift__tile.is-completed::after {
  background: rgba(14, 26, 44, 0.35);
}

.vs__tile.is-completed::after {
  background: rgba(14, 26, 44, 0.35);
}

.shift__tile-num,
.vs__tile-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 500;
  color: rgba(14, 26, 44, 0.45);
  letter-spacing: 0.08em;
  transition: color 0.3s ease;
}
.shift__tile.is-active .shift__tile-num {
  color: #0771AB;
}
.vs__tile.is-active .vs__tile-num {
  color: #1DB7CE;
}

.shift__tile-name,
.vs__tile-name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(0.9rem, 1.1vw, 1.12rem);
  color: rgba(14, 26, 44, 0.65);
  transition: color 0.3s ease;
}
.shift__tile.is-active .shift__tile-name,
.vs__tile.is-active .vs__tile-name {
  color: #0E1A2C;
}

.shift__tile-status,
.vs__tile-status {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(2px);
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.shift__tile-status {
  color: #0771AB;
}
.vs__tile-status {
  color: #1DB7CE;
}

.shift__tile.is-active .shift__tile-status,
.shift__tile.is-completed .shift__tile-status,
.vs__tile.is-active .vs__tile-status,
.vs__tile.is-completed .vs__tile-status {
  opacity: 1;
  transform: translateY(0);
}

/* Connector SVGs overlay layout */
.shift__connector-svg,
.vs__connector-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.shift__connector-svg path {
  stroke: #0771AB !important;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 6px rgba(7, 113, 171, 0.18));
}

.vs__connector-svg path {
  stroke: #1DB7CE !important;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 6px rgba(29, 183, 206, 0.18));
}

/* Mobile responsive resets */
@media (max-width: 991px) {
  .shift__tiles-container,
  .vs__tiles-container,
  .shift__connector-svg,
  .vs__connector-svg {
    display: block !important;
  }
}

/* ======================================================================
   THE SHIFT — Glass editorial restructure
   Frosted depth, high-contrast text, vertical from → to narrative
   ====================================================================== */

/* Section background gets a richer cool gradient for glass to read against */
.section__shift {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(29, 183, 206, 0.10), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(7, 113, 171, 0.10), transparent 55%),
    linear-gradient(180deg, #E4EEF5 0%, #DCEAF3 100%);
}
.shift__pin {
  background: transparent;
}
.section__shift .shift__pin::after {
  opacity: 0.18;
}

/* ----- HEADER ----- */
.shift__head {
  text-align: center;
  margin-bottom: clamp(16px, 2.2vh, 26px);
}
.shift__kicker {
  justify-content: center;
  margin-bottom: 20px;
  font-size: 0.82rem;
  color: rgba(14, 26, 44, 0.7);
  font-weight: 600;
}
.shift__kicker-num { color: #0771AB; }
.shift__kicker-divider { color: rgba(14, 26, 44, 0.35); }
.shift__kicker-label { color: rgba(14, 26, 44, 0.85); }
.shift__h {
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #0E1A2C;
}
.shift__h .js-text-underline {
  font-weight: 700;
  font-style: italic;
  color: #0771AB;
}

/* ----- STEP RAIL — pill glass nav ----- */
.shift__tiles-container {
  display: inline-flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: clamp(10px, 1.6vh, 20px) auto clamp(20px, 2.8vh, 34px);
  padding: 5px;
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow:
    0 10px 30px rgba(7, 113, 171, 0.08),
    0 2px 6px rgba(14, 26, 44, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  position: relative;
  z-index: 20;
}
.shift__tile {
  flex: 0 0 auto;
  position: relative;
  background: transparent !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px clamp(16px, 2.4vw, 28px) !important;
  box-shadow: none !important;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 9px;
  cursor: default;
  transition:
    background 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.45s ease,
    color 0.35s ease;
}
.shift__tile::before,
.shift__tile::after {
  display: none !important;
}
.shift__tile.is-active {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow:
    0 4px 14px rgba(7, 113, 171, 0.14),
    0 1px 2px rgba(14, 26, 44, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.shift__tile.is-completed {
  background: rgba(255, 255, 255, 0.25) !important;
  opacity: 1 !important;
}
.shift__tile-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(14, 26, 44, 0.55);
  transition: color 0.35s ease;
}
.shift__tile-name {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(0.92rem, 1vw, 1.02rem);
  letter-spacing: -0.005em;
  color: rgba(14, 26, 44, 0.72);
  transition: color 0.35s ease, font-weight 0.35s ease;
}
.shift__tile-status {
  display: none !important;
}
.shift__tile.is-active .shift__tile-num { color: #0771AB; font-weight: 700; }
.shift__tile.is-active .shift__tile-name { color: #0E1A2C; font-weight: 700; }
.shift__tile.is-completed .shift__tile-num,
.shift__tile.is-completed .shift__tile-name { color: rgba(7, 113, 171, 0.7); }

/* Hide noisy connector arcs */
.shift__connector-svg { display: none !important; }

/* ----- STAGE / PHASE — vertical editorial narrative ----- */
.shift__stage { max-width: 820px; }

.shift__phase {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: clamp(20px, 2.6vh, 32px);
  filter: none !important;
}

/* Topic kicker — glass chip with rule under */
.shift__phase-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.shift__phase-icon { display: none !important; }
.shift__phase-topic {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: #0771AB;
  text-transform: uppercase;
  position: relative;
  padding: 8px 18px;
  margin: 0;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow:
    0 4px 14px rgba(7, 113, 171, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

/* From → To vertical narrative */
.shift__phase-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vh, 24px);
  margin: 0;
  max-width: 720px;
  text-align: center;
}
.shift__phase-friction {
  display: inline-block;
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  line-height: 1.5;
  color: rgba(14, 26, 44, 0.6);
  text-decoration: line-through;
  text-decoration-color: rgba(14, 26, 44, 0.45);
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.003em;
}
.shift__phase-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 4px 14px rgba(7, 113, 171, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: #0771AB;
  font-weight: 500;
  font-size: 1.1em;
  padding: 0 !important;
  transform: rotate(90deg);
  opacity: 1;
}
.shift__phase-pivot {
  display: block;
  color: #0E1A2C;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  line-height: 1.3;
  letter-spacing: -0.014em;
  max-width: 660px;
}

/* Result — glass callout card */
.shift__phase-felt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: clamp(10px, 1.4vh, 18px) 0 0;
  padding: clamp(18px, 2vh, 26px) clamp(24px, 3vw, 36px);
  font-size: 1rem;
  color: rgba(14, 26, 44, 0.75);
  line-height: 1.5;
  max-width: 520px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  box-shadow:
    0 10px 30px rgba(7, 113, 171, 0.08),
    0 2px 6px rgba(14, 26, 44, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.shift__phase-felt::before { display: none; }
.shift__phase-felt em {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.55);
  margin: 0;
}
.shift__phase-felt strong {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: #0771AB;
  font-size: clamp(1.18rem, 1.4vw, 1.45rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  padding: 0;
  transform: none;
}

/* ----- FINALE — glass medallion ----- */
.shift__finale {
  filter: none !important;
  gap: clamp(20px, 2.8vh, 34px);
}
.shift__finale-mark {
  width: clamp(100px, 11vw, 130px);
  height: clamp(100px, 11vw, 130px);
  background: rgba(255, 255, 255, 0.75) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 16px 40px rgba(7, 113, 171, 0.12),
    0 2px 6px rgba(14, 26, 44, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.shift__finale-ring {
  border-style: solid;
  border-color: rgba(7, 113, 171, 0.2);
  inset: -10%;
  animation: none;
}
.shift__finale-kicker {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: rgba(14, 26, 44, 0.65);
  text-transform: uppercase;
}
.shift__finale-tag {
  font-size: clamp(1.05rem, 1.15vw, 1.2rem);
  color: rgba(14, 26, 44, 0.75);
  line-height: 1.55;
  max-width: 440px;
}
.shift__finale-tag em {
  display: inline-block;
  font-size: 1.35em;
  color: #0771AB;
  margin-top: 8px;
}

/* ----- PROGRESS ----- */
.shift__progress { color: rgba(14, 26, 44, 0.55); }
.shift__progress-num { color: rgba(14, 26, 44, 0.7); }
.shift__progress-num span { color: #0771AB; font-weight: 700; }
.shift__progress-rail { background: rgba(14, 26, 44, 0.12); }
.shift__progress-fill { background: linear-gradient(90deg, #1DB7CE 0%, #0771AB 100%); }

/* Tablet / narrow desktop: collapse step rail to wrap nicely */
@media (max-width: 1100px) and (min-width: 992px) {
  .shift__tile {
    padding: 10px clamp(14px, 2vw, 22px) !important;
  }
  .shift__tile-name { font-size: 0.92rem; }
}


/* ======================================================================
   DATA CARDS — Unified tabular 2-column dashboard widget
   (Used in color blocks 1-5: Monitoring, Service Desk, Analytics, Access, Compliance)
   ====================================================================== */
.data-card {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1px solid rgba(7, 113, 171, 0.10);
  border-radius: 16px;
  padding: clamp(20px, 2.2vw, 28px);
  box-shadow:
    0 8px 24px rgba(7, 113, 171, 0.06),
    0 2px 6px rgba(14, 26, 44, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s ease,
    border-color 0.5s ease;
  position: relative;
}
/* Glass hover lift */
.data-card:hover {
  transform: translateY(-6px);
  border-color: rgba(29, 183, 206, 0.35);
  box-shadow:
    0 26px 50px rgba(7, 113, 171, 0.12),
    0 6px 14px rgba(14, 26, 44, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFE 100%);
}

/* Branded head variant — All IT logo replaces the abstract icon */
.data-card__head--branded {
  align-items: center;
}
.data-card__head-logo {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(7, 113, 171, 0.15));
}
.data-card__head-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.data-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(7, 113, 171, 0.08);
  margin-bottom: 14px;
}
.data-card__head-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(29, 183, 206, 0.14), rgba(7, 113, 171, 0.08));
  color: #0771AB;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(7, 113, 171, 0.15);
}
.data-card__head-title h4 {
  margin: 0;
  font-family: 'Montserrat', var(--font-stack);
  font-size: 0.98rem;
  font-weight: 700;
  color: #0E1A2C;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.data-card__head-title p {
  margin: 2px 0 0;
  font-size: 0.72rem;
  color: rgba(14, 26, 44, 0.55);
  font-weight: 500;
}
.data-card__head-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 16px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.2);
  white-space: nowrap;
}
.data-card__head-pulse--cyan {
  background: rgba(29, 183, 206, 0.10);
  color: #0E8E9F;
  border-color: rgba(29, 183, 206, 0.25);
}
.data-card__pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: data-card-pulse 2s ease-in-out infinite;
}
@keyframes data-card-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* Row list — the tabular core */
.data-card__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.data-card__row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px dashed rgba(7, 113, 171, 0.08);
  transition: background 0.3s ease, padding 0.3s ease;
}
.data-card__row:last-child { border-bottom: none; }
.data-card__row:hover {
  background: rgba(29, 183, 206, 0.03);
  padding-left: 8px;
  padding-right: 8px;
}
.data-card__row-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(7, 113, 171, 0.06);
  color: #0771AB;
}
.data-card__row-label {
  font-family: 'Montserrat', var(--font-stack);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(14, 26, 44, 0.75);
  letter-spacing: -0.005em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.data-card__row-value {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 400;
  color: #0E1A2C;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}
.data-card__row-value small {
  font-family: 'Montserrat', var(--font-stack);
  font-style: normal;
  font-size: 0.58em;
  font-weight: 500;
  color: rgba(14, 26, 44, 0.45);
  margin-left: 1px;
}
.data-card__row-badge {
  font-family: 'Montserrat', var(--font-stack);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(14, 26, 44, 0.06);
  color: rgba(14, 26, 44, 0.55);
  white-space: nowrap;
}
.data-card__row-badge--good {
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
}

/* Card foot — sparkline / progress / steps */
.data-card__foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(7, 113, 171, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.data-card__sparkline {
  width: 100%;
  height: 28px;
  display: block;
}
.data-card__foot-label {
  font-family: 'Montserrat', var(--font-stack);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.45);
}
.data-card__priority-track {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  gap: 2px;
}
.data-card__priority-seg {
  border-radius: 3px;
  transition: filter 0.3s ease;
}
.data-card__priority-seg:hover { filter: brightness(1.15); }
.data-card__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 36px;
}
.data-card__bar {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(to top, rgba(7, 113, 171, 0.4), rgba(29, 183, 206, 0.85));
  transition: filter 0.3s ease;
}
.data-card__bar:hover { filter: brightness(1.1); }
.data-card__steps {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.data-card__step {
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(14, 26, 44, 0.05);
  color: rgba(14, 26, 44, 0.5);
  border: 1px solid rgba(14, 26, 44, 0.06);
}
.data-card__step--done {
  background: rgba(34, 197, 94, 0.10);
  color: #16a34a;
  border-color: rgba(34, 197, 94, 0.25);
}
.data-card__step--active {
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(7, 113, 171, 0.25);
}
.data-card__step-arrow {
  font-size: 0.7rem;
  color: rgba(14, 26, 44, 0.35);
}
.data-card__progress {
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background: rgba(7, 113, 171, 0.08);
  overflow: hidden;
}
.data-card__progress-fill {
  display: block;
  height: 100%;
  width: var(--w, 80%);
  background: linear-gradient(90deg, #1DB7CE, #0771AB);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(29, 183, 206, 0.4);
}

/* ======================================================================
   SECTION 8 — ISOMETRIC 3D DASHBOARD CARDS (legacy — kept for any residual use)
   ====================================================================== */

/* ── Parent container: allow 3D overflow + perspective ── */
.color-block__media {
  overflow: visible !important;
  perspective: 1400px;
}

/* ── Base card — isometric 3D ── */
.dash-card {
  position: relative;
  border-radius: 16px;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(12deg) rotateY(-8deg) rotateZ(2deg);
  box-shadow:
    -12px 20px 50px rgba(0,0,0,0.35),
    -6px 10px 20px rgba(0,0,0,0.2),
    -2px 4px 8px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.08);
  animation: isoFloat 6s ease-in-out infinite;
  transition: transform 0.55s cubic-bezier(0.175,0.885,0.32,1.275),
              box-shadow 0.55s ease;
  will-change: transform;
}

/* Stagger each card with different angles + timing */
.dash-card--monitor {
  background: linear-gradient(145deg, #0E1A2C 0%, #0a2845 50%, #091e38 100%);
  transform: perspective(1200px) rotateX(12deg) rotateY(-8deg) rotateZ(2deg);
  animation-delay: 0s;
}
.dash-card--desk {
  background: linear-gradient(145deg, #0A2540 0%, #0d1f3c 60%, #081a30 100%);
  transform: perspective(1200px) rotateX(14deg) rotateY(-6deg) rotateZ(1.5deg);
  animation-delay: -1.8s;
}
.dash-card--analytics {
  background: linear-gradient(145deg, #1a1c2e 0%, #2E2F30 50%, #1e2024 100%);
  transform: perspective(1200px) rotateX(11deg) rotateY(-9deg) rotateZ(2.5deg);
  animation-delay: -3.2s;
}
.dash-card--video {
  background: linear-gradient(145deg, #08171e 0%, #0d2a35 60%, #05141a 100%);
  transform: perspective(1200px) rotateX(13deg) rotateY(-7deg) rotateZ(2.2deg);
  animation-delay: -1.0s;
}

/* Idle float animation — gentle isometric bob */
@keyframes isoFloat {
  0%, 100% {
    transform: perspective(1200px) rotateX(var(--iso-rx, 12deg)) rotateY(var(--iso-ry, -8deg)) rotateZ(var(--iso-rz, 2deg)) translateY(0px);
  }
  50% {
    transform: perspective(1200px) rotateX(var(--iso-rx, 12deg)) rotateY(var(--iso-ry, -8deg)) rotateZ(var(--iso-rz, 2deg)) translateY(-8px);
  }
}

/* CSS custom props for staggered rotations */
.dash-card--monitor  { --iso-rx: 12deg; --iso-ry: -8deg; --iso-rz: 2deg; }
.dash-card--desk     { --iso-rx: 14deg; --iso-ry: -6deg; --iso-rz: 1.5deg; }
.dash-card--analytics { --iso-rx: 11deg; --iso-ry: -9deg; --iso-rz: 2.5deg; }
.dash-card--video      { --iso-rx: 13deg; --iso-ry: -7deg; --iso-rz: 2.2deg; }

/* When the card sits on the LEFT side of the color block (M-T layout),
   flip the isometric tilt so the card faces the text on the right. */
.dash-card--tilt-right {
  --iso-ry: 8deg;
  --iso-rz: -1.5deg;
  transform: perspective(1200px) rotateX(14deg) rotateY(8deg) rotateZ(-1.5deg);
}
.dash-card--tilt-right .dash-card__edge-right {
  right: auto;
  left: -10px;
  transform: rotateY(-60deg);
  transform-origin: right center;
  border-radius: 10px 0 0 10px;
}

/* The scroll-fade utility (.js-scroll-fade.is-visible → transform: translateY(0))
   outweighs .dash-card in the cascade and flattens the isometric pose whenever
   the isoFloat animation isn't running (e.g. prefers-reduced-motion). Re-assert
   the pose at higher specificity. */
.dash-card.js-scroll-fade,
.dash-card.js-scroll-fade.is-visible {
  transform: perspective(1200px) rotateX(var(--iso-rx, 12deg)) rotateY(var(--iso-ry, -8deg)) rotateZ(var(--iso-rz, 2deg));
}

/* ── Hover: flatten toward viewer ── */
.dash-card:hover,
.dash-card.js-scroll-fade.is-visible:hover {
  animation-play-state: paused;
  transform: perspective(1200px) rotateX(4deg) rotateY(-3deg) rotateZ(0.5deg) translateY(-12px) scale(1.02);
  box-shadow:
    -18px 32px 70px rgba(0,0,0,0.45),
    -8px 16px 30px rgba(0,0,0,0.25),
    -3px 6px 12px rgba(0,0,0,0.15),
    0 0 50px rgba(29,183,206,0.06),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ── 3D Edge — Right side (simulates box depth) ── */
.dash-card__edge-right {
  position: absolute;
  top: 4px;
  right: -10px;
  width: 10px;
  bottom: 4px;
  border-radius: 0 10px 10px 0;
  transform: rotateY(60deg);
  transform-origin: left center;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.55s ease, width 0.55s ease;
}
.dash-card--monitor .dash-card__edge-right {
  background: linear-gradient(to right, #06131f, #040d16);
}
.dash-card--desk .dash-card__edge-right {
  background: linear-gradient(to right, #061527, #040e1c);
}
.dash-card--analytics .dash-card__edge-right {
  background: linear-gradient(to right, #131418, #0c0d10);
}
.dash-card--video .dash-card__edge-right {
  background: linear-gradient(to right, #05141a, #030b0e);
}
.dash-card:hover .dash-card__edge-right {
  opacity: 0.6;
  width: 6px;
}

/* ── 3D Edge — Bottom side (simulates box depth) ── */
.dash-card__edge-bottom {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: -10px;
  height: 10px;
  border-radius: 0 0 10px 10px;
  transform: rotateX(-60deg);
  transform-origin: top center;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.55s ease, height 0.55s ease;
}
.dash-card--monitor .dash-card__edge-bottom {
  background: linear-gradient(to bottom, #06131f, #040d16);
}
.dash-card--desk .dash-card__edge-bottom {
  background: linear-gradient(to bottom, #061527, #040e1c);
}
.dash-card--analytics .dash-card__edge-bottom {
  background: linear-gradient(to bottom, #131418, #0c0d10);
}
.dash-card--video .dash-card__edge-bottom {
  background: linear-gradient(to bottom, #05141a, #030b0e);
}
.dash-card:hover .dash-card__edge-bottom {
  opacity: 0.6;
  height: 6px;
}

/* ── Subtle background patterns ── */
.dash-card__grid-bg {
  position: absolute; inset: 0;
  border-radius: 16px;
  background-image:
    linear-gradient(rgba(29,183,206,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29,183,206,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.35s;
}
.dash-card:hover .dash-card__grid-bg { opacity: 1; }

.dash-card__dot-bg {
  position: absolute; inset: 0;
  border-radius: 16px;
  background-image: radial-gradient(rgba(29,183,206,0.1) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.35s;
}
.dash-card:hover .dash-card__dot-bg { opacity: 1; }

.dash-card__diag-bg {
  position: absolute; inset: 0;
  border-radius: 16px;
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 16px,
    rgba(29,183,206,0.04) 16px, rgba(29,183,206,0.04) 17px
  );
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.35s;
}
.dash-card:hover .dash-card__diag-bg { opacity: 1; }

/* ── Floating status badge ── */
.dash-card__float-badge {
  position: absolute;
  top: 16px; right: 20px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  animation: badgeFloat 5s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease;
}
.dash-card:hover .dash-card__float-badge {
  animation-play-state: paused;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

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

.dash-card__float-badge--green {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
}
.dash-card__float-badge--cyan {
  background: rgba(29,183,206,0.12);
  color: #5eead4;
}

.dash-card__float-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74,222,128,0.6);
  animation: dashBadgePulse 2s ease-in-out infinite;
}
.dash-card__float-badge-dot--cyan {
  background: #5eead4;
  box-shadow: 0 0 8px rgba(94,234,212,0.6);
}

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

/* ── Card body — rectangular layout, flexible height ── */
.dash-card {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.dash-card__body {
  position: relative;
  z-index: 2;
  padding: clamp(22px, 2.6vw, 30px) clamp(22px, 2.8vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* ── Header / Logo row ── */
.dash-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.dash-card__logo-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-card__logo {
  width: 30px; height: 30px;
  object-fit: contain;
  border-radius: 6px;
  transition: transform 0.35s ease;
}
.dash-card:hover .dash-card__logo {
  transform: rotate(-8deg) scale(1.08);
}
.dash-card__brand-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.03em;
}

/* ── Title ── */
.dash-card__title-row {
  margin-bottom: 12px;
}
.dash-card__title {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.dash-card__subtitle {
  display: block;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.38);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Metrics grid — 2x2 tile layout for proper breathing room ── */
.dash-card__metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.dash-card__metric-tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 16px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.dash-card:hover .dash-card__metric-tile {
  background: rgba(255,255,255,0.07);
  border-color: rgba(29,183,206,0.22);
  box-shadow: 0 0 20px rgba(29,183,206,0.05);
}
.dash-card__metric-tile:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(29,183,206,0.35) !important;
  box-shadow: 0 0 24px rgba(29,183,206,0.12) !important;
  transform: translateY(-2px);
}
.dash-card__metric-value {
  display: block;
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
  transition: text-shadow 0.3s ease;
}
.dash-card__metric-value small {
  font-size: 0.65em;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
}
.dash-card:hover .dash-card__metric-value {
  text-shadow: 0 0 18px rgba(29,183,206,0.25);
}
.dash-card__metric-label {
  display: block;
  font-size: 0.66rem;
  color: rgba(255,255,255,0.42);
  margin-top: 4px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Pulse line (Monitoring card) ── */
.dash-card__pulse-row {
  margin-top: auto;
  padding-top: 10px;
  overflow: hidden;
}
.dash-card__pulse-svg {
  width: 100%; height: 32px;
}
.dash-card__pulse-line {
  fill: none;
  stroke: var(--secondary, #1DB7CE);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: dashPulseTrace 3s ease-in-out infinite;
  opacity: 0.65;
}
.dash-card:hover .dash-card__pulse-line {
  opacity: 1;
}

@keyframes dashPulseTrace {
  0%   { stroke-dashoffset: 1200; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0.3; }
}

/* ── Priority bar (Service Desk card) ── */
.dash-card__priority-bar {
  margin-top: auto;
  padding-top: 10px;
}
.dash-card__priority-label {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 6px;
}
.dash-card__priority-track {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  gap: 2px;
}
.dash-card__priority-seg {
  border-radius: 4px;
  transition: filter 0.3s ease, transform 0.3s ease;
}
.dash-card__priority-seg:hover {
  filter: brightness(1.3);
  transform: scaleY(1.3);
}
.dash-card__priority-seg--crit { background: #ef4444; }
.dash-card__priority-seg--high { background: #f59e0b; }
.dash-card__priority-seg--med  { background: #3b82f6; }
.dash-card__priority-seg--low  { background: #22c55e; }

.dash-card__priority-legend {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.40);
  font-weight: 500;
}
.dash-card__priority-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dash-card__legend-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  font-style: normal;
}

/* ── Bar chart (Analytics card) ── */
.dash-card__bar-chart {
  margin-top: 4px;
  padding-top: 12px;
  padding-bottom: 18px; /* room for day labels under bars */
}
.dash-card__bar-chart-label {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 10px;
}
.dash-card__bar-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 56px;
  position: relative;
}
.dash-card__bar {
  flex: 1;
  height: var(--bar-h, 50%);
  border-radius: 5px 5px 0 0;
  background: linear-gradient(to top, rgba(29,183,206,0.4), rgba(29,183,206,0.75));
  position: relative;
  transition: height 0.5s cubic-bezier(.22,1,.36,1), background 0.3s ease, transform 0.3s ease;
  cursor: default;
}
.dash-card:hover .dash-card__bar {
  background: linear-gradient(to top, rgba(29,183,206,0.6), rgba(29,183,206,1));
}
.dash-card__bar:hover {
  transform: scaleX(1.08);
  filter: brightness(1.2);
}
.dash-card__bar-tip {
  position: absolute;
  bottom: -16px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.58rem;
  color: rgba(255,255,255,0.3);
  font-weight: 500;
  white-space: nowrap;
}

/* ── Mobile: flatten everything for usability ── */
@media (max-width: 768px) {
  .dash-card {
    transform: none !important;
    animation: none !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  }
  .dash-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  }
  .dash-card__edge-right,
  .dash-card__edge-bottom { display: none; }
  .dash-card__body {
    padding: 18px 16px;
    aspect-ratio: auto;
    min-height: 240px;
  }
  .dash-card__title { font-size: 1.1rem; }
  .dash-card__metric-value { font-size: 1rem; }
  .dash-card__float-badge {
    top: 12px; right: 12px;
    padding: 4px 10px;
    font-size: 0.65rem;
    animation: none !important;
  }
  .dash-card__bar-chart-bars { height: 40px; }
  .dash-card__priority-legend { flex-wrap: wrap; gap: 8px; }
  .color-block__media {
    overflow: hidden !important;
    perspective: none;
  }
}
@media (max-width: 480px) {
  .dash-card__metrics-grid { gap: 6px; }
  .dash-card__metric-tile { padding: 10px 12px; }
}


/* ======================================================================
   TRIGGR — Offboarding Feature Section
   ====================================================================== */
.section__triggr {
  background: var(--white);
  overflow: hidden;
}
.triggr__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.triggr__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(14,26,44,0.5);
}
.triggr__kicker-mark {
  display: inline-block;
  width: 26px;
  height: 1px;
  background: #0771AB;
}
.triggr__h {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.triggr__lead {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 12px;
}
.triggr__body {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  color: var(--text-grey);
  line-height: 1.7;
  margin: 0 0 24px;
}
.triggr__tagline {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0;
}
.triggr__tagline strong {
  color: var(--dark);
}

/* ======================================================================
   SUB-FEATURE ROTATOR — Access word cycle
   No overflow clipping. Words crossfade with a subtle slide that stays
   inside the natural inline baseline of the heading. Italic descenders
   are never clipped because nothing is hidden.
   ====================================================================== */
.subfeat-rotator {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: inherit;
  font-style: italic;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  /* No overflow:hidden — descenders never clip. */
}
/* Invisible sizer sets the slot width to the widest word (period included)
   so the slot doesn't reflow as the rotation cycles. */
.subfeat-rotator::before {
  content: 'validated.';
  display: inline-block;
  visibility: hidden;
  white-space: nowrap;
}
.subfeat-rotator__word {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  white-space: nowrap;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}
.subfeat-rotator__word.is-active {
  opacity: 1;
  transform: translateY(0);
}
.subfeat-rotator__word.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

/* ======================================================================
   SUB-FEATURE SCENES — Pure isometric illustrations (Access & Compliance)
   ====================================================================== */
.subfeat-scene {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F8FC 100%);
  border: 1px solid rgba(7, 113, 171, 0.10);
  border-radius: 20px;
  padding: clamp(18px, 2.5vw, 32px);
  box-shadow:
    0 18px 44px rgba(7, 113, 171, 0.08),
    0 3px 8px rgba(14, 26, 44, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
  perspective: 1600px;
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease,
    border-color 0.55s ease;
}
.subfeat-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(29, 183, 206, 0.07), transparent 50%),
    radial-gradient(circle at 82% 82%, rgba(7, 113, 171, 0.05), transparent 55%);
  pointer-events: none;
}
.subfeat-scene__svg {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Subtle hover tilt — premium feel, no autoplay animation */
.subfeat-scene:hover {
  border-color: rgba(29, 183, 206, 0.32);
  box-shadow:
    0 28px 60px rgba(7, 113, 171, 0.12),
    0 6px 14px rgba(14, 26, 44, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.subfeat-scene:hover .subfeat-scene__svg {
  transform: rotateX(4deg) rotateY(-4deg) translateZ(8px);
}

/* Light pulse on the active confirmed status (the only running animation —
   keeps the scene feeling "live" without being cartoonish) */
.iso-panel__row--active circle:nth-child(3) {
  transform-origin: 300px 242px;
  animation: iso-ring-pulse 2.4s ease-out infinite;
}
@keyframes iso-ring-pulse {
  0%   { transform: scale(1);   opacity: 0.45; }
  100% { transform: scale(1.8); opacity: 0;    }
}

/* ======================================================================
   UI MOCKUPS — Realistic product UI for Access & Compliance scenes
   ====================================================================== */

/* --- Phone mockup (Access verification screen) --- */
.ui-mock {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 36px) clamp(10px, 2vw, 24px);
}
.ui-mock--phone {
  min-height: 460px;
}
.ui-mock__device {
  position: relative;
  width: clamp(240px, 26vw, 290px);
  background: #FFFFFF;
  border-radius: 36px;
  padding: 14px 14px 14px;
  box-shadow:
    0 30px 60px rgba(7, 113, 171, 0.16),
    0 8px 18px rgba(14, 26, 44, 0.08),
    0 0 0 1px rgba(7, 113, 171, 0.06),
    0 0 0 8px #F2F8FC;
  overflow: hidden;
  z-index: 1;
}
.ui-mock__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 22px;
  background: #0E1A2C;
  border-radius: 12px;
  z-index: 2;
}
.ui-mock__statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 18px 12px;
  color: #0E1A2C;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 0.8rem;
}
.ui-mock__time { font-variant-numeric: tabular-nums; }
.ui-mock__signals {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ui-mock__appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px 14px;
  border-bottom: 1px solid rgba(7, 113, 171, 0.08);
}
.ui-mock__appbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0E1A2C;
  letter-spacing: -0.005em;
}
.ui-mock__appbar-logo {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  display: inline-block;
}
.ui-mock__appbar-action {
  color: rgba(14, 26, 44, 0.45);
  font-size: 1.1rem;
  line-height: 1;
}

.ui-mock__incoming {
  padding: 16px 16px 12px;
}
.ui-mock__incoming-label {
  margin: 0 0 10px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.45);
}
.ui-mock__incoming-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  background: linear-gradient(135deg, rgba(29, 183, 206, 0.06), rgba(7, 113, 171, 0.04));
  border: 1px solid rgba(7, 113, 171, 0.10);
  border-radius: 14px;
}
.ui-mock__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1DB7CE 0%, #0771AB 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(7, 113, 171, 0.25);
}
.ui-mock__avatar-initials {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.ui-mock__avatar-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #FFFFFF;
}
.ui-mock__caller {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ui-mock__caller-name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0E1A2C;
  letter-spacing: -0.005em;
}
.ui-mock__caller-meta {
  margin: 0;
  font-size: 0.7rem;
  color: rgba(14, 26, 44, 0.5);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.ui-mock__steps {
  padding: 4px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ui-mock__step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #F7FAFC;
  border: 1px solid rgba(7, 113, 171, 0.06);
  border-radius: 10px;
  font-size: 0.72rem;
  color: rgba(14, 26, 44, 0.7);
}
.ui-mock__step--done .ui-mock__step-icon { background: #22c55e; }
.ui-mock__step--active {
  background: linear-gradient(135deg, rgba(29, 183, 206, 0.10), rgba(7, 113, 171, 0.06));
  border-color: rgba(29, 183, 206, 0.4);
  color: #0E1A2C;
  font-weight: 600;
}
.ui-mock__step--active .ui-mock__step-icon {
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  box-shadow: 0 0 0 0 rgba(29, 183, 206, 0.5);
}
.ui-mock__step-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ui-mock__step-icon--pulse {
  animation: ui-mock-pulse 2s ease-out infinite;
}
@keyframes ui-mock-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(29, 183, 206, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(29, 183, 206, 0); }
}
.ui-mock__step-text {
  flex: 1;
  min-width: 0;
}
.ui-mock__step-meta {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  color: rgba(14, 26, 44, 0.45);
  letter-spacing: 0.04em;
}
.ui-mock__step--active .ui-mock__step-meta { color: #0771AB; }
.ui-mock__step--done .ui-mock__step-meta { color: #22c55e; }

.ui-mock__cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 4px 16px 18px;
}
.ui-mock__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: none;
  cursor: default;
  user-select: none;
}
.ui-mock__cta--primary {
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  color: #FFFFFF;
  box-shadow: 0 6px 14px rgba(7, 113, 171, 0.30);
}
.ui-mock__cta--ghost {
  background: rgba(14, 26, 44, 0.04);
  color: rgba(14, 26, 44, 0.6);
  border: 1px solid rgba(14, 26, 44, 0.08);
}
.ui-mock__home-indicator {
  margin: 0 auto;
  width: 100px;
  height: 4px;
  border-radius: 2px;
  background: rgba(14, 26, 44, 0.18);
  margin-bottom: 4px;
}
.ui-mock__floating-badge {
  position: absolute;
  top: 12%;
  right: clamp(8px, 4vw, 32px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #FFFFFF;
  border-radius: 22px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0771AB;
  box-shadow:
    0 10px 24px rgba(7, 113, 171, 0.18),
    0 0 0 1px rgba(7, 113, 171, 0.08);
}
.ui-mock__floating-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  animation: ui-mock-dot-pulse 2s ease-in-out infinite;
}
@keyframes ui-mock-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.04); }
}

/* Subtle hover tilt on the device */
.ui-mock__device {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform: perspective(1400px) rotateY(0deg);
}
.subfeat-scene:hover .ui-mock__device {
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg) translateY(-4px);
}
.subfeat-scene:hover .ui-mock__floating-badge {
  transform: translateY(-4px);
}
.ui-mock__floating-badge {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Certificate mockup (Compliance) --- */
.ui-mock--cert {
  min-height: 460px;
}
.ui-mock__cert {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #FFFFFF;
  border: 1px solid rgba(7, 113, 171, 0.10);
  border-radius: 14px;
  padding: 28px 32px 32px;
  box-shadow:
    0 28px 60px rgba(7, 113, 171, 0.14),
    0 6px 16px rgba(14, 26, 44, 0.06);
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 1;
}
.ui-mock__cert::before {
  /* Subtle watermark crest */
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(29, 183, 206, 0.08), transparent 70%);
  pointer-events: none;
}
.subfeat-scene:hover .ui-mock__cert {
  transform: perspective(1400px) rotateY(4deg) rotateX(2deg) translateY(-4px);
}
.ui-mock__cert-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(7, 113, 171, 0.08);
}
.ui-mock__cert-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ui-mock__cert-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.78rem;
}
.ui-mock__cert-brand-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0E1A2C;
  line-height: 1.1;
}
.ui-mock__cert-brand-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 500;
  color: rgba(14, 26, 44, 0.5);
  margin-top: 2px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ui-mock__cert-id {
  text-align: right;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 500;
  color: rgba(14, 26, 44, 0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ui-mock__cert-title {
  margin: 0 0 4px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 1.4rem;
  font-weight: 400;
  color: #0E1A2C;
  letter-spacing: -0.018em;
}
.ui-mock__cert-sub {
  margin: 0 0 22px;
  font-size: 0.78rem;
  color: rgba(14, 26, 44, 0.55);
}
.ui-mock__cert-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}
.ui-mock__cert-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFC 100%);
  border: 1px solid rgba(7, 113, 171, 0.08);
  border-radius: 10px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.ui-mock__cert-row:hover {
  transform: translateX(3px);
  border-color: rgba(29, 183, 206, 0.4);
  box-shadow: 0 6px 16px rgba(7, 113, 171, 0.06);
}
.ui-mock__cert-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1DB7CE, #0771AB);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(7, 113, 171, 0.25);
}
.ui-mock__cert-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ui-mock__cert-framework {
  font-weight: 700;
  font-size: 0.85rem;
  color: #0E1A2C;
  letter-spacing: -0.005em;
}
.ui-mock__cert-desc {
  font-size: 0.7rem;
  color: rgba(14, 26, 44, 0.55);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.ui-mock__cert-badge {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.10);
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.ui-mock__cert-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px dashed rgba(7, 113, 171, 0.18);
}
.ui-mock__cert-signature {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ui-mock__cert-sig-svg {
  width: 110px;
  height: 28px;
  display: block;
}
.ui-mock__cert-sig-svg path {
  stroke: #0E1A2C;
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}
.ui-mock__cert-sig-name {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(14, 26, 44, 0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ui-mock__cert-seal {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(29, 183, 206, 0.12), rgba(7, 113, 171, 0.18));
  border: 1.5px solid rgba(7, 113, 171, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-8deg);
}
.ui-mock__cert-seal::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px dashed rgba(7, 113, 171, 0.45);
}
.ui-mock__cert-seal-text {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.55rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0.06em;
  color: #0771AB;
  line-height: 1.1;
  text-transform: uppercase;
}

.ui-mock__cert-floating {
  position: absolute;
  top: 18%;
  left: clamp(8px, 4vw, 32px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #FFFFFF;
  border-radius: 22px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0771AB;
  box-shadow:
    0 10px 24px rgba(7, 113, 171, 0.18),
    0 0 0 1px rgba(7, 113, 171, 0.08);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ui-mock__cert-floating-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.subfeat-scene:hover .ui-mock__cert-floating {
  transform: translateY(-4px);
}

@media (max-width: 600px) {
  .ui-mock__device,
  .ui-mock__cert {
    transform: none !important;
  }
  .ui-mock__floating-badge,
  .ui-mock__cert-floating {
    display: none;
  }
}

/* Compliance medal — subtle float on hover only (no autoplay) */
.iso-comp__medal {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.subfeat-scene--compliance:hover .iso-comp__medal {
  transform: translate(240px, 26px);
}
.iso-comp__block {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.subfeat-scene--compliance:hover .iso-comp__block--bottom {
  transform: translateY(2px);
}
.subfeat-scene--compliance:hover .iso-comp__block--middle {
  transform: translateY(0px);
}
.subfeat-scene--compliance:hover .iso-comp__block--top {
  transform: translateY(-2px);
}

/* ======================================================================
   SUB-FEATURE VISUALS (Color Blocks 4 & 5)
   ====================================================================== */
.subfeature-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 5vw, 80px);
  border-radius: 16px;
  background: var(--bg);
  border: 1px solid rgba(7,113,171,0.08);
  min-height: 260px;
}
.subfeature-visual__icon {
  opacity: 0.85;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.subfeature-visual:hover .subfeature-visual__icon {
  transform: scale(1.08) rotate(-3deg);
  opacity: 1;
}

.color-block__flow {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-top: 8px;
}
.color-block__counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px !important;
  padding: 8px 16px;
  border-radius: 6px;
  background: rgba(239,68,68,0.06);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ef4444;
  letter-spacing: 0.04em;
}
.color-block__counter-cross {
  font-size: 1.1em;
  font-weight: 700;
}

/* ======================================================================
   NEW MOSAIC TILES — Accent Placeholders (matching existing deco tiles)
   ====================================================================== */
.ht--accent {
  padding: 0; border: none; background: transparent;
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; min-height: 0;
}
.ht--accent::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0771AB, #1DB7CE);
  opacity: 0.3;
}

/* Grid placement for new 12-tile mosaic */
.ht[data-i="a0"] { grid-column: 1; grid-row: 2; min-height: 20px; }
.ht[data-i="a1"] { grid-column: 1; grid-row: 4; min-height: 20px; }
.ht[data-i="11"] { animation: _hf 8s ease-in-out infinite -3.2s; }

@media (max-width:991px) {
  .ht[data-i="a0"],.ht[data-i="a1"] { display: none; }
}


/* ======================================================================
   HERO SUBLINE FIX — left-aligned, inline flow, sits naturally below rotator
   ====================================================================== */
.hero__subline {
  margin-top: 0.25em !important;
  font-size: clamp(1.1rem, 1.6vw, 1.5rem) !important;
  font-weight: 500 !important;
  color: var(--text-grey) !important;
  letter-spacing: -0.005em;
  line-height: 1.4;
  display: block;
  text-align: left;
}
.hero__subline-prefix,
.hero__subline-suffix {
  display: inline;
}
.hero__subline .js-text-underline {
  font-weight: 700;
  color: var(--dark);
}

/* ======================================================================
   TRIGGR IN CONVERSION SECTION
   ====================================================================== */
.triggr-title {
  font-size: clamp(2.4rem, 4.5vw, 4rem) !important;
  font-weight: 800 !important;
  color: var(--dark);
  letter-spacing: -0.03em;
  margin: 0 0 16px !important;
  line-height: 1.05;
}
.triggr-lead {
  font-size: clamp(1.3rem, 2.2vw, 1.8rem) !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
  margin: 0 0 12px !important;
}
.triggr-body {
  font-size: clamp(1rem, 1.15vw, 1.15rem) !important;
  color: var(--text-grey) !important;
  line-height: 1.7 !important;
  margin: 0 0 24px !important;
  max-width: 520px;
}
.triggr-tagline {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: clamp(1rem, 1.3vw, 1.3rem) !important;
  letter-spacing: 0.08em;
  color: var(--accent) !important;
  margin: 0 0 28px !important;
}
.triggr-tagline strong {
  color: var(--dark);
}

/* ======================================================================
   DASH-CARD VARIANTS — Verify & Compliance (Isometric 3D)
   ====================================================================== */
.dash-card--verify {
  background: linear-gradient(145deg, #0a2845 0%, #0E1A2C 50%, #081e35 100%);
  --iso-rx: 13deg;
  --iso-ry: -7deg;
  --iso-rz: 1.8deg;
  animation-delay: -0.8s;
}
.dash-card--verify .dash-card__edge-right {
  background: linear-gradient(to right, #061a30, #040e1c);
}
.dash-card--verify .dash-card__edge-bottom {
  background: linear-gradient(to bottom, #061a30, #040e1c);
}
.dash-card--compliance {
  background: linear-gradient(145deg, #111827 0%, #1a1c2e 50%, #0f1520 100%);
  --iso-rx: 11deg;
  --iso-ry: -9deg;
  --iso-rz: 2.2deg;
  animation-delay: -2.5s;
}
.dash-card--compliance .dash-card__edge-right {
  background: linear-gradient(to right, #0c0e18, #080a12);
}
.dash-card--compliance .dash-card__edge-bottom {
  background: linear-gradient(to bottom, #0c0e18, #080a12);
}

/* Grid Background for Verify Card */
.dash-card__grid-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Dot Background for Compliance Card */
.dash-card__dot-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.04;
  background-image: radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Verify Flow Steps */
.dash-card__verify-flow {
  margin-top: auto;
  padding-top: 10px;
}
.dash-card__verify-flow-label {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 8px;
}
.dash-card__verify-steps {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-card__verify-step {
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}
.dash-card__verify-step--active {
  background: rgba(74,222,128,0.12);
  border-color: rgba(74,222,128,0.3);
  color: #4ade80;
  box-shadow: 0 0 12px rgba(74,222,128,0.15);
}
.dash-card__verify-arrow {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.25);
}
.dash-card:hover .dash-card__verify-step {
  background: rgba(255,255,255,0.09);
  border-color: rgba(29,183,206,0.2);
}
.dash-card:hover .dash-card__verify-step--active {
  background: rgba(74,222,128,0.18);
  border-color: rgba(74,222,128,0.45);
  box-shadow: 0 0 18px rgba(74,222,128,0.25);
}

/* Compliance Bar */
.dash-card__compliance-bar {
  margin-top: auto;
  padding-top: 10px;
}
.dash-card__compliance-bar .dash-card__priority-label {
  font-size: 0.66rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 8px;
}
.dash-card__compliance-bar .dash-card__priority-track {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  gap: 2px;
}
.dash-card__compliance-bar .dash-card__priority-seg--med {
  background: #3b82f6;
  border-radius: 4px 0 0 4px;
}
.dash-card__compliance-bar .dash-card__priority-seg--low {
  background: #22c55e;
  border-radius: 0 4px 4px 0;
}
.dash-card__compliance-bar .dash-card__priority-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 0.66rem;
  color: rgba(255,255,255,0.45);
}
.dash-card__compliance-bar .dash-card__legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

/* Float badge green variant for new cards */
.dash-card__float-badge--green {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #4ade80;
}
.dash-card__float-badge--green .dash-card__float-badge-dot {
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
}

/* Color-block media sizing — slightly bigger for premium feel */
.color-block__media .dash-card {
  width: 100%;
  max-width: 620px;
  min-height: 0;
}
.color-block__media .data-card {
  max-width: 580px;
}

@media (min-width: 992px) {
  .color-block__media .dash-card {
    min-height: 450px;
  }
  .dash-card--video {
    height: 450px;
  }
  .dash-card--video .dash-card__body {
    height: 100%;
    aspect-ratio: auto !important;
  }
}

@media (max-width: 768px) {
  .dash-card__verify-steps {
    flex-wrap: wrap;
    gap: 6px;
  }
  .color-block__media .dash-card {
    max-width: 100%;
    min-height: 280px;
  }
}

/* ======================================================================
   THE SHIFT — Deal-from-a-stack restructure (overrides glass pill)
   Spacious 4-up tile grid + glassmorphism cards that deal under each tile
   ====================================================================== */

.section__shift .shift__inner {
  max-width: 1240px;
}

/* Header breathing room */
.shift__head {
  margin-bottom: clamp(14px, 2vh, 22px) !important;
}
.shift__h {
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.04;
}

/* ----- TILES: spacious 4-column grid (no more cramped pill) ----- */
.shift__tiles-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  width: 100%;
  max-width: 1180px;
  margin: clamp(8px, 1.4vh, 16px) auto clamp(6px, 0.8vh, 12px) !important;
  padding: clamp(12px, 1.3vw, 18px) !important;
  position: relative !important;
  z-index: 40 !important;
  background: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(22px) saturate(165%) !important;
  backdrop-filter: blur(22px) saturate(165%) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 22px !important;
  box-shadow:
    0 16px 38px rgba(7, 113, 171, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
.shift__tile {
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: clamp(16px, 1.6vw, 22px) clamp(18px, 1.8vw, 26px) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 22px rgba(7, 113, 171, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
  transform: none !important;
}
.shift__tile.is-active {
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow:
    0 12px 30px rgba(7, 113, 171, 0.16),
    0 2px 6px rgba(14, 26, 44, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.shift__tile-num {
  font-size: 0.86rem !important;
  letter-spacing: 0.14em !important;
}
.shift__tile-name {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem) !important;
  font-weight: 600 !important;
}

/* ----- STAGE / DECK ----- */
.section__shift .shift__stage {
  position: relative;
  z-index: 1;
  max-width: 1180px !important;
  width: 100%;
  margin: 0 auto;
  min-height: clamp(260px, 30vh, 340px);
}
.shift__deck {
  padding-top: clamp(2px, 0.4vh, 6px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}

/* ----- GLASSMORPHISM CARD ----- */
.shift__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1vw, 14px);
  padding: clamp(20px, 1.8vw, 28px) clamp(18px, 1.7vw, 24px);
  min-height: clamp(320px, 40vh, 400px);
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 20px;
  box-shadow:
    0 18px 48px rgba(7, 113, 171, 0.12),
    0 4px 12px rgba(14, 26, 44, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  will-change: transform, opacity;
}
.shift__card-friction {
  position: relative;
  display: inline-block;
  margin: 0;
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  line-height: 1.45;
  color: rgba(14, 26, 44, 0.6);
}
.shift__card-friction-label {
  display: block;
  margin-bottom: 7px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.45);
}
/* Friction quote — a soft brand highlighter sweeps across it (GSAP-driven
   background-size) instead of a strikethrough. */
.shift__card-friction-text {
  display: inline-block;
  font-style: italic;
  padding: 4px 8px;
  margin: -4px -8px;
  border-radius: 8px;
  background-image: linear-gradient(100deg, rgba(29, 183, 206, 0.22), rgba(7, 113, 171, 0.13));
  background-size: 0% 100%;
  background-repeat: no-repeat;
  background-position: left center;
}
.shift__card-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 4vw, 54px);
  height: clamp(42px, 4vw, 54px);
  padding: 8px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  box-shadow:
    0 6px 18px rgba(7, 113, 171, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.shift__card-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.shift__card-pivot {
  margin: 0;
  font-size: clamp(1rem, 1.18vw, 1.2rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: #0E1A2C;
}
.shift__card-result {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: auto 0 0;
  padding: clamp(12px, 1.2vw, 16px) clamp(14px, 1.3vw, 18px);
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.shift__card-result em {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(14, 26, 44, 0.5);
}
.shift__card-result strong {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.96rem, 1.12vw, 1.14rem);
  line-height: 1.32;
  color: #0771AB;
}

/* ----- FINALE: absolute-centered overlay (fades in after all dealt) ----- */
.section__shift .shift__finale {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(16px, 2.2vh, 28px);
  pointer-events: none;
}
.section__shift .shift__finale .shift__finale-cta { pointer-events: auto; }

/* Mobile: stack cards naturally, reveal all */
@media (max-width: 991px) {
  .shift__tiles-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .shift__deck {
    grid-template-columns: 1fr;
  }
  .section__shift .shift__stage {
    min-height: 0;
  }
  .shift__card {
    min-height: 0;
  }
  .section__shift .shift__finale {
    position: relative;
    margin-top: 32px;
  }
}

/* ======================================================================
   US vs THEM — kill CSS transitions so GSAP drives smooth reveal
   ====================================================================== */
@media (min-width: 760px) {
  .vs7__card,
  .vs7__brief {
    transition: none !important;
    animation: none !important;
  }
}

/* ======================================================================
   HEIGHT-FIT — pinned sections must fit ANY viewport height.
   All vertical metrics scale with vh so laptops/short screens never
   clip the cards, CTAs or progress bars.
   ====================================================================== */

/* ----- THE SHIFT (pinned 100vh) ----- */
.shift__inner {
  padding-top: calc(var(--nav-h) + clamp(4px, 1vh, 10px));
  gap: clamp(6px, 1.4vh, 18px);
}
.shift__head {
  margin-bottom: clamp(4px, 1vh, 22px) !important;
}
.shift__kicker {
  margin-bottom: clamp(6px, 1.4vh, 20px);
}
.shift__h {
  font-size: clamp(1.45rem, min(4vw, 5vh), 3.1rem);
}
.shift__tiles-container {
  margin: clamp(4px, 0.8vh, 16px) auto clamp(4px, 0.6vh, 12px) !important;
  padding: clamp(6px, 1vh, 18px) !important;
}
.shift__tile {
  padding: clamp(8px, 1.6vh, 22px) clamp(14px, 1.8vw, 26px) !important;
}
.shift__tile-name {
  font-size: clamp(0.92rem, min(1.4vw, 2.2vh), 1.35rem) !important;
}
.section__shift .shift__stage {
  min-height: clamp(220px, 42vh, 340px);
}
.shift__card {
  min-height: clamp(220px, 42vh, 400px);
  padding: clamp(12px, 2.2vh, 28px) clamp(12px, 1.7vw, 24px);
  gap: clamp(8px, 1.4vh, 14px);
}
.shift__card-logo {
  width: clamp(34px, 5.5vh, 54px);
  height: clamp(34px, 5.5vh, 54px);
}
.shift__card-result {
  padding: clamp(8px, 1.4vh, 16px) clamp(10px, 1.3vw, 18px);
}

/* ----- US vs THEM (pinned 100vh) ----- */
@media (min-width: 760px) {
  .vs7__inner {
    min-height: 100vh;
    padding-top: clamp(58px, 9vh, 100px);
    padding-bottom: clamp(10px, 2.6vh, 80px);
    gap: clamp(8px, 1.6vh, 28px);
  }
  .vs7__kicker { margin-bottom: clamp(4px, 1vh, 12px); }
  .vs7__h { font-size: clamp(1.5rem, min(3vw, 4.4vh), 2.4rem); }
  .vs7__brief {
    padding: clamp(5px, 1vh, 12px) clamp(10px, 1.4vw, 16px);
    grid-template-columns: auto auto 1fr auto;
  }
  .vs7__brief-num {
    width: clamp(22px, 3.8vh, 36px);
    height: clamp(22px, 3.8vh, 36px);
  }
  .vs7__brief-topic, .vs7__brief-them { font-size: clamp(0.72rem, 1.4vh, 0.82rem); }
  .vs7__brief-us { font-size: clamp(0.74rem, 1.5vh, 0.86rem); }
  .vs7__stage { min-height: clamp(225px, 42vh, 280px); }
  .vs7__card {
    padding: clamp(14px, 2.6vh, 36px) clamp(16px, 2.2vw, 36px);
    padding-top: clamp(32px, 6vh, 60px);
    gap: clamp(8px, 1.8vh, 24px);
  }
  .vs7__card-illu {
    width: clamp(32px, 6vh, 56px);
    height: clamp(32px, 6vh, 56px);
  }
  .vs7__card--brand {
    gap: clamp(8px, 1.6vh, 18px);
    padding-top: clamp(14px, 2.6vh, 36px);
  }
  .vs7__brand-mark {
    width: clamp(54px, 11vh, 110px);
    height: clamp(54px, 11vh, 110px);
  }
  .vs7__brand-h {
    margin: 2px 0 clamp(6px, 1.4vh, 16px);
    font-size: clamp(1.1rem, min(2.2vw, 3.2vh), 1.95rem);
  }
  .vs7__brand-cta .m-button__wrap {
    padding: clamp(10px, 1.8vh, 14px) clamp(18px, 2.4vw, 28px) !important;
  }
}

/* Short laptops — compact the hero copy so the fold lands cleanly */
@media (min-width: 992px) and (max-height: 720px) {
  .hero__h1 { font-size: clamp(2.4rem, 4vw, 4.4rem); }
  .hero__rotator { height: clamp(1.9rem, 3vw, 3.4rem); }
  .hero__rotator-item, .hero__subline { font-size: clamp(1.2rem, 2.2vw, 2.4rem); }
  .hero__paragraph { margin-top: 0.8em; }
  .hero__cta { margin-top: 1em; }
}

/* Very short laptops — final squeeze so the brand CTA always shows */
@media (min-width: 760px) and (max-height: 700px) {
  .vs7__inner { padding-top: 52px; }
  .vs7__h { font-size: 1.4rem; }
  .vs7__kicker { margin-bottom: 4px; font-size: 0.66rem; }
  .vs7__brand-kicker { font-size: 0.66rem; }
  .vs7__card--brand { gap: 6px; }
  .vs7__brand-mark { width: 48px; height: 48px; }
  .vs7__brand-h { font-size: 1.02rem; margin-bottom: 6px; }
}

/* ======================================================================
   ADDITIONAL MODIFICATIONS FOR HOVER AND AI COMPONENT ENHANCEMENTS
   ====================================================================== */
.team__member-portrait {
  position: absolute;
  inset: 0;
  display: none;
  opacity: 0;
}

.team__portrait-bio {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(8, 17, 30, 0.98) 0%, rgba(8, 17, 30, 0.8) 65%, transparent 100%);
  padding: clamp(16px, 2.2vw, 28px);
  color: #FFFFFF;
  text-align: left;
  z-index: 10;
  pointer-events: none;
}

.team__portrait-bio h4 {
  margin: 0 0 4px 0;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  font-family: 'Montserrat', var(--font-stack);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.team__portrait-bio .team__portrait-role {
  margin: 0;
}

.team__portrait-bio .team__portrait-desc {
  margin-top: 8px;
  font-size: clamp(0.78rem, 1.1vw, 0.86rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
}

.ai-hub-trigger {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.25s ease !important;
}

.ai-hub-trigger:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 6px 16px rgba(29, 183, 206, 0.35) !important;
}

.ai-hub-trigger:active {
  transform: translateY(0) scale(1) !important;
  box-shadow: 0 4px 10px rgba(29, 183, 206, 0.2) !important;
}

.ai-console-log p {
  opacity: 0;
  animation: consoleLineFadeIn 0.3s forwards ease-out;
}

@keyframes consoleLineFadeIn {
  to { opacity: 1; }
}

/* ======================================================================
   SUBPAGE PREMIUM HEROS & WIDGET UTILITIES
   ====================================================================== */
.subpage-hero {
  position: relative;
  background: linear-gradient(180deg, #0E1A2C 0%, #08111d 100%);
  padding: 150px 0 90px;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.subpage-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 25%, rgba(29, 183, 206, 0.15) 0%, transparent 45%),
              radial-gradient(circle at 85% 75%, rgba(7, 113, 171, 0.15) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}
.subpage-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 100px;
  background: linear-gradient(to top, rgba(232, 244, 248, 0.08), transparent);
  pointer-events: none;
  z-index: 1;
}
.subpage-hero .container {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.security-checklist div, .cloud-sync-status div {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
}
.security-checklist div:last-child, .cloud-sync-status div:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* ── Automation Dashboard Mockup Styles ── */
.automation-step {
  transition: all 0.3s ease;
}
.automation-step.is-active {
  color: #3b82f6 !important;
  text-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
}
.automation-step.is-completed {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Mobile/Tablet Flattening for 3D Isometric Cards ── */
@media (max-width: 991px) {
  .dash-card,
  .dash-card.js-scroll-fade,
  .dash-card.js-scroll-fade.is-visible,
  .dash-card:hover,
  .dash-card.js-scroll-fade.is-visible:hover {
    transform: none !important;
    animation: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  }
  .dash-card__edge-right,
  .dash-card__edge-bottom {
    display: none !important;
  }
}

/* ==========================================
   HIGH-CONTRAST PHONE CALL BUTTONS
   ========================================== */
.phone-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 0.98rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.01em;
  line-height: 1;
}

.phone-call-btn svg {
  flex-shrink: 0;
  transition: transform 0.3s ease, stroke 0.3s ease;
}

.phone-call-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(29, 183, 206, 0.3);
}

.phone-call-btn:hover svg {
  transform: scale(1.15) rotate(-10deg);
}

/* Variant: Dark Backgrounds (Hero, Dark Sections) */
.phone-call-btn--dark {
  background: rgba(29, 183, 206, 0.12);
  border: 1.5px solid #1DB7CE;
  color: #FFFFFF !important;
}

.phone-call-btn--dark:hover {
  background: #1DB7CE;
  color: #0E1A2C !important;
  border-color: #1DB7CE;
}

.phone-call-btn--dark:hover svg {
  stroke: #0E1A2C !important;
}

/* Variant: Light Backgrounds */
.phone-call-btn--light {
  background: #0E1A2C;
  border: 1.5px solid #0E1A2C;
  color: #FFFFFF !important;
}

.phone-call-btn--light:hover {
  background: #0771AB;
  border-color: #0771AB;
  color: #FFFFFF !important;
}

/* Variant: Solid Accent Pill */
.phone-call-btn--accent {
  background: linear-gradient(135deg, #1DB7CE 0%, #0771AB 100%);
  border: 1.5px solid #1DB7CE;
  color: #FFFFFF !important;
  box-shadow: 0 4px 20px rgba(29, 183, 206, 0.35);
}

.phone-call-btn--accent:hover {
  background: linear-gradient(135deg, #0771AB 0%, #0E1A2C 100%);
  border-color: #0771AB;
  box-shadow: 0 6px 25px rgba(7, 113, 171, 0.45);
}