/* BBRS site.css — components built per .claude/skills/bbrs-design/SKILL.md
   Bootstrap 5 utilities still loaded for grid/flex; we override visuals. */

/* ── 1. Reset / base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Phantom-scroll guard: off-screen elements (mobile drawer parked at
     translateX(100%), page-intro overlay) can otherwise let mobile
     browsers scroll a few px sideways. `clip` blocks that WITHOUT
     creating a scroll container, so position:sticky on the nav keeps
     working (`hidden` would break sticky on iOS Safari). */
  overflow-x: clip;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; transition: color var(--duration-base) var(--ease-out-soft); }
a:hover { color: var(--brand-blue); }

hr {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 0;
}

::selection { background: var(--brand-blue); color: #fff; }

/* ── 2. Container ────────────────────────────────────────────────── */
.bb-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

.bb-section {
  padding-block: var(--section-y);
}

.bb-section--paper-2 { background: var(--paper-2); }
.bb-section--dark { background: var(--surface-deep); color: var(--ink-on-dark); }
.bb-section--dark a:hover { color: var(--brand-orange); }

/* ── 3. Typography ───────────────────────────────────────────────── */
.display, .display-1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-display);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
  color: var(--ink);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
  color: var(--ink);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  text-wrap: balance;
  font-size: var(--type-h3);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--type-h4);
  line-height: 1.35;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}
p { margin: 0 0 var(--space-4); max-width: 65ch; }
.lede {
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 60ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin-bottom: var(--space-4);
  line-height: 1;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  margin-right: 10px;
  flex-shrink: 0;
}
.eyebrow--muted { color: var(--ink-muted); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* ── 4. Buttons / Links ──────────────────────────────────────────── */
.btn-bb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out-soft),
              border-color var(--duration-base) var(--ease-out-soft),
              color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-fast) var(--ease-out-snap);
  text-decoration: none;
}
.btn-bb:active { transform: scale(0.98); }
.btn-bb--primary {
  background: var(--ink);
  color: var(--ink-on-dark);
  border-color: var(--ink);
}
.btn-bb--primary:hover { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.btn-bb--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn-bb--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.btn-bb--on-dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-bb--on-dark:hover { background: var(--brand-orange); border-color: var(--brand-orange); color: #fff; }

/* Ghost button sitting on a DARK background (CTA bands).
   Stays light on hover — fixes the bug where inline color was fighting
   the .btn-bb--ghost:hover that flipped to ink + paper-2 (= invisible). */
.btn-bb--ghost-on-dark {
  background: transparent;
  color: var(--ink-on-dark);
  border-color: rgba(244, 244, 241, 0.32);
}
.btn-bb--ghost-on-dark:hover {
  background: rgba(244, 244, 241, 0.08);
  border-color: var(--ink-on-dark);
  color: var(--ink-on-dark);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--duration-base) var(--ease-out-soft),
              border-color var(--duration-base) var(--ease-out-soft),
              gap var(--duration-base) var(--ease-out-soft);
}
.link-arrow span { transition: transform var(--duration-base) var(--ease-out-soft); }
.link-arrow:hover { color: var(--brand-blue); border-bottom-color: var(--brand-blue); gap: var(--space-3); }
.link-arrow:hover span { transform: translateX(2px); }

/* ── 5. Navigation ───────────────────────────────────────────────── */
.bb-nav {
  position: sticky;
  top: 0;
  z-index: 60; /* above mobile drawer (z-50) so brand + toggle stay visible */
  background: rgba(251, 251, 250, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.bb-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
  gap: var(--space-6);
}
.bb-nav__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.bb-nav__brand-mark {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--brand-orange);
  border-radius: 50%;
  transform: translateY(-1px);
}
.bb-nav__logo {
  height: 36px;
  width: auto;
  display: block;
}
.bb-footer__logo {
  height: 44px;
  width: auto;
  display: block;
  margin-bottom: var(--space-3);
}
.bb-nav__brand-sub {
  font-family: var(--font-sans);
  font-size: var(--type-tiny);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.bb-nav__links {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bb-nav__links a {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-muted);
  text-decoration: none;
  position: relative;
}
.bb-nav__links a:hover, .bb-nav__links a[aria-current="page"] { color: var(--ink); }
.bb-nav__links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--brand-orange);
}
.bb-nav__right {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.bb-nav__lang {
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  color: var(--ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bb-nav__lang a { color: var(--ink-muted); margin: 0 4px; padding: 6px 4px; }
.bb-nav__lang a[aria-current="true"] { color: var(--ink); font-weight: 600; }

.bb-nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  width: 44px; height: 44px;   /* 44×44 = Apple HIG min touch target */
  border-radius: var(--radius-sm);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 2; /* sits above the drawer's overlay */
  transition: background var(--duration-base) var(--ease-out-soft),
              border-color var(--duration-base) var(--ease-out-soft);
}
.bb-nav__toggle:hover { background: var(--paper-2); }
.bb-nav__toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: background var(--duration-fast) var(--ease-out-soft);
}
.bb-nav__toggle span::before, .bb-nav__toggle span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--ink);
  transition: top var(--duration-base) var(--ease-out-soft),
              transform var(--duration-base) var(--ease-out-soft);
}
.bb-nav__toggle span::before { top: -6px; }
.bb-nav__toggle span::after  { top:  6px; }

/* Hamburger → X transition when drawer is open */
.bb-nav__toggle[aria-expanded="true"] span        { background: transparent; }
.bb-nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.bb-nav__toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 880px) {
  /* Hide desktop nav items inline */
  .bb-nav__links, .bb-nav__right .btn-bb, .bb-nav__lang { display: none; }
  .bb-nav__toggle { display: inline-flex; }

  /* === MOBILE DRAWER === */
  /* The .bb-nav__links UL becomes a full-screen overlay when .is-open.
     Slides in from the right with the Apple-style easing curve.
     The nav header (z-60) stays above it so brand + close stay visible. */
  .bb-nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: clamp(96px, 14vw, 128px) var(--container-pad) var(--space-8);
    position: fixed;
    inset: 0;
    background: var(--paper);
    transform: translateX(100%);
    transition: transform 0.42s var(--ease-out-soft);
    z-index: 50; /* below .bb-nav (z-60) so the toggle stays clickable */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
  }
  .bb-nav__links.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  /* Large editorial links — Newsreader serif, big touch targets */
  .bb-nav__links li {
    margin: 0;
    width: 100%;
    border-bottom: 1px solid var(--hairline);
  }
  .bb-nav__links li:first-child { border-top: 1px solid var(--hairline); }
  .bb-nav__links a {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
    padding: var(--space-5) 0;
    text-decoration: none;
    transition: color var(--duration-base) var(--ease-out-soft),
                padding-left var(--duration-base) var(--ease-out-soft);
  }
  .bb-nav__links a:hover,
  .bb-nav__links a:focus-visible,
  .bb-nav__links a[aria-current="page"] {
    color: var(--brand-blue);
    padding-left: var(--space-3);
  }
  .bb-nav__links a[aria-current="page"]::after { display: none; }

  /* Show language switcher + CTA INSIDE the drawer (pinned to bottom).
     They're hidden by default at this breakpoint; un-hide when nav is open. */
  body.nav-open .bb-nav__lang,
  body.nav-open .bb-nav__right .btn-bb {
    display: inline-flex;
    position: fixed;
    z-index: 51; /* above drawer (50), below nav header (60) */
    left: var(--container-pad);
  }
  body.nav-open .bb-nav__lang {
    bottom: calc(var(--space-8) + 64px); /* sits above the CTA */
    color: var(--ink-muted);
    background: var(--paper);
    padding: 8px 14px;
    border-radius: var(--radius-sm);
  }
  body.nav-open .bb-nav__right .btn-bb {
    bottom: var(--space-6);
    right: var(--container-pad);
    left: var(--container-pad);
    justify-content: center;
    font-size: 1rem;
    padding: 18px 22px;
  }

  /* Body scroll lock when drawer open */
  body.nav-open {
    overflow: hidden;
    height: 100%;
  }
}

/* ── 6. Hero (Editorial Split + Full-bleed variant) ──────────────── */
.hero {
  padding-block: clamp(56px, 5vw + 32px, 120px) var(--section-y);
  position: relative;
  overflow: hidden;
}

/* Full-bleed variant — background image fills section; copy is in a left panel */
.hero--bleed {
  padding-block: 0;
  min-height: clamp(560px, 78vh, 820px);
  display: grid;
  align-items: center;
}
.hero--bleed .hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero--bleed .hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}
/* Darken layer on top of the bg image so the H1 has contrast even where the
   photo has bright highlights (windows, sky, white shirts). Reviewer fix
   for CRITICAL #24 — 35% midnight overlay. */
.hero--bleed .hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22, 27, 38, 0.35);
  pointer-events: none;
  z-index: 1;
}
.hero--bleed .hero__bg-fade {
  position: absolute;
  inset: 0;
  z-index: 2; /* sits above the darken overlay */
  background:
    linear-gradient(
      100deg,
      rgba(251, 251, 250, 0.97) 0%,
      rgba(251, 251, 250, 0.94) 28%,
      rgba(251, 251, 250, 0.62) 52%,
      rgba(251, 251, 250, 0.12) 76%,
      rgba(251, 251, 250, 0) 100%
    );
}
.hero--bleed .bb-container {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero__copy--panel {
  max-width: 580px;
  padding-block: var(--space-8);
}

/* ────────────────────────────────────────────────────────────────
   Hero VIDEO variant (.hero--video) — full-bleed video background
   + dark gradient overlay for text readability across changing
   scenes. Used by index.html when the multi-venue hero video is
   shipped. Pairs with <video class="hero__bg-video"> markup.
   ──────────────────────────────────────────────────────────── */
.hero--video.hero--bleed .hero__bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* Stronger dark overlay (45% midnight) — needed because video scenes
   vary widely in brightness (golden-hour stadium vs darker corridor). */
.hero--video.hero--bleed .hero__bg::after {
  background: rgba(22, 27, 38, 0.45);
}
/* Replace the left-to-right paper fade with a vertical gradient that
   gives extra contrast in the top-left zone (where eyebrow+title sit)
   without hiding the video on the right. */
.hero--video.hero--bleed .hero__bg-fade {
  background:
    linear-gradient(
      90deg,
      rgba(22, 27, 38, 0.6) 0%,
      rgba(22, 27, 38, 0.35) 35%,
      rgba(22, 27, 38, 0.1) 70%,
      rgba(22, 27, 38, 0) 100%
    );
}
/* Hero copy on video bg: light text + text-shadow for safety. */
/* Hero VIDEO variant — copy panel aligned BOTTOM-LEFT instead of vertical
   center. Per review #41 IMPORTANT #3: the video multi-venue has forward-
   dolly motion converging toward the center-right vanishing point. Putting
   copy in vertical center "fights" the motion; bottom-left lets the eye
   travel from focal motion (right) -> copy (bottom-left) naturally, the
   way Apple / Linear / Vercel video heroes are composed. */
.hero--video.hero--bleed {
  display: grid;
  align-items: end;            /* anchor copy to the bottom */
}
.hero--video .hero__copy--panel {
  max-width: 640px;
  padding-block: clamp(48px, 6vw, 96px);  /* breathing room from bottom edge */
}
.hero--video .hero__title,
.hero--video .hero__lede {
  color: var(--ink-on-dark);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.3);
}
.hero--video .hero__lede u { text-decoration-color: var(--brand-orange); }
.hero--video .hero__copy--panel .eyebrow {
  color: var(--brand-orange);
  background: rgba(22, 27, 38, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(237, 125, 49, 0.4);
  padding: 8px 18px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
}
/* Ghost CTA on dark video bg — adjust to use ink-on-dark instead of ink */
.hero--video .btn-bb--ghost {
  color: var(--ink-on-dark);
  border-color: rgba(244, 244, 241, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(22, 27, 38, 0.25);
}
.hero--video .btn-bb--ghost:hover {
  background: rgba(244, 244, 241, 0.1);
  border-color: rgba(244, 244, 241, 0.7);
  color: var(--ink-on-dark);
}
/* Respect reduce-motion: pause the autoplay video */
@media (prefers-reduced-motion: reduce) {
  .hero--video .hero__bg-video { animation-play-state: paused; }
}

@media (max-width: 880px) {
  .hero--bleed {
    min-height: 0;
    padding-block: var(--space-7) var(--space-8);
  }
  .hero--bleed .hero__bg-fade {
    background:
      linear-gradient(
        180deg,
        rgba(251, 251, 250, 0.97) 0%,
        rgba(251, 251, 250, 0.92) 35%,
        rgba(251, 251, 250, 0.74) 70%,
        rgba(251, 251, 250, 0.55) 100%
      );
  }
  .hero__copy--panel { padding-block: 0; }
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}
.hero__copy { max-width: 680px; }
.hero__title { margin-bottom: var(--space-5); }
.hero__title em { font-style: italic; color: var(--brand-blue); font-weight: 500; }
.hero__title u {
  text-decoration: none;
  background-image: linear-gradient(transparent 70%, rgba(237, 125, 49, 0.32) 70%);
  padding: 0 2px;
}
.hero__lede { margin-bottom: var(--space-6); }
.hero__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.hero__asset {
  position: relative;
  aspect-ratio: 5 / 6;
  border-radius: var(--radius-lg);
  background: var(--ink);
  overflow: hidden;
  box-shadow: var(--shadow-hero);
}
.hero__asset img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.hero__asset-meta {
  position: absolute;
  left: var(--space-5); bottom: var(--space-5); right: var(--space-5);
  color: var(--ink-on-dark);
  font-family: var(--font-mono);
  font-size: var(--type-tiny);
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-5);
}
.hero__asset-meta strong { font-weight: 600; font-size: 0.875rem; font-family: var(--font-sans); display: block; margin-bottom: 4px; letter-spacing: 0; }
.hero__asset-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(244, 244, 241, 0.14);
  border: 1px solid rgba(244, 244, 241, 0.22);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.6875rem;
  color: var(--ink-on-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Hero variant for sub-pages (About) — text-only on paper, wider container */
.hero--about {
  padding-block: clamp(80px, 8vw + 32px, 160px) clamp(56px, 5vw + 24px, 120px);
  min-height: 0;
  background: var(--paper);
}
.hero__copy--wide {
  max-width: 920px;
}
.hero--about .hero__title {
  font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem);
}
.hero--about .hero__title em {
  font-style: italic;
  color: var(--brand-blue);
  font-weight: 500;
}
.hero--about .hero__title u {
  text-decoration: none;
  background-image: linear-gradient(transparent 70%, rgba(237, 125, 49, 0.32) 70%);
  padding: 0 2px;
}

/* ──────────────────────────────────────────────────────────────────────
   21. SERVICES HERO — magazine spread variant (.hero--services)
   ────────────────────────────────────────────────────────────────────
   Fixes "plat/vide" perception by layering:
   - Faint topographic ambient background (8% opacity, mask-faded)
   - 2-col grid layout on desktop: text 55% / still-life image 45%
   - "01 02 03" pôles mono caps under the lede (typographic anchor)
   Editorial Luxury — Aesop / Wallpaper magazine sensibility.
────────────────────────────────────────────────────────────────────── */
.hero--services {
  position: relative;
  overflow: hidden;
}
/* Layer 1 — faint topographic background, masked + tinted.
   When the hero figure ITSELF is topographic art (variant --topo),
   we drop the ambient overlay to avoid redundancy. */
.hero--services__topo {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/services-hero-topo-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.06;
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, black 20%, transparent 80%);
          mask-image: radial-gradient(ellipse at 70% 50%, black 20%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
/* Variant: hero figure is the topo art at full opacity → drop ambient
   to avoid double-topo redundancy. */
.hero--services:has(.hero--services__figure--topo) .hero--services__topo {
  opacity: 0;
}
.hero--services .bb-container { position: relative; z-index: 1; }

/* Layer 2 — 2-col grid
   DESIGNER REVIEW 2026-05-26: bumped image column from 1fr → 1.1fr so
   the hero image breathes (was rendering ~480px on 1440 viewport,
   postage-stamp territory). Stripe / Linear give sub-page hero images
   50-55% of the row — this brings BBRS in line. */
.hero--services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .hero--services__grid { grid-template-columns: 1fr; gap: 40px; }
}
.hero--services__copy { max-width: 100%; }

/* Layer 3 — Mono "01 02 03" caps under lede */
.hero--services__caps {
  list-style: none;
  padding: 0;
  margin: clamp(28px, 3vw, 40px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--hairline);
  padding-top: clamp(20px, 2.5vw, 28px);
}
.hero--services__caps li {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.hero--services__caps .mono {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--brand-orange);
  font-weight: 500;
  letter-spacing: 0.1em;
  min-width: 24px;
}

/* Layer 4 — Still-life figure (legacy single-image variant, kept for
   compatibility with preview pages still using it) */
.hero--services__figure {
  margin: 0;
  border-radius: clamp(12px, 1.2vw, 16px);
  overflow: hidden;
  box-shadow:
    0 12px 32px -16px rgba(26, 31, 44, 0.18),
    0 4px 12px -4px rgba(26, 31, 44, 0.08);
  aspect-ratio: 4 / 3;
}
.hero--services__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* DESIGNER REVIEW 2026-05-26: hairline outline for consistency with
     the triptych variant + sectors mosaic cells (same editorial frame
     treatment across all sub-page hero images). */
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
  /* DESIGNER REVIEW 2026-05-26: unified warm-amber filter brings all 4
     sub-page hero images into the same luminance/temperature band
     (target ±15% per Aesop benchmark, was ±40%). Subtle: 5% warmth,
     ~10% shadow lift, no visible "filter" look. */
  filter: sepia(0.06) saturate(1.06) brightness(0.97) contrast(1.02);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero--services__figure:hover img { transform: scale(1.03); }
@media (max-width: 880px) {
  .hero--services__figure { aspect-ratio: 16 / 10; }
}

/* DESIGNER REVIEW 2026-05-26: About-us hero gets 5:4 crop override
   (regenerated image is tighter on the 3 figures so they dominate
   rather than getting lost in stadium negative space). */
.hero--aboutus .hero--services__figure { aspect-ratio: 5 / 4; }
@media (max-width: 880px) {
  .hero--aboutus .hero--services__figure { aspect-ratio: 5 / 4; }
}

/* Layer 4b — Triptych (3 stacked stills, one per pôle).
   Each frame is 4:3, soft hairline + shadow, mono 01/02/03 cap
   floats on the LEFT EDGE outside the image so it reads as a
   marginal annotation (mirrors the 01/02/03 list in the copy
   column). On mobile, the triptych collapses to a horizontal
   3-up row to keep vertical real estate. */
.hero--services__triptych {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.6vw, 22px);
}
.hero--services__still {
  position: relative;
  margin: 0;
  padding-left: clamp(28px, 3vw, 44px); /* room for the floating mono cap */
}
.hero--services__still > img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: clamp(10px, 1vw, 14px);
  box-shadow:
    0 10px 28px -14px rgba(26, 31, 44, 0.20),
    0 3px 10px -3px rgba(26, 31, 44, 0.08);
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  /* Subtle hairline that picks up against light bg */
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
}
.hero--services__still:hover > img {
  transform: scale(1.015);
  box-shadow:
    0 18px 40px -18px rgba(26, 31, 44, 0.28),
    0 6px 14px -4px rgba(26, 31, 44, 0.12);
}
.hero--services__still-cap {
  position: absolute;
  left: 0;
  top: clamp(10px, 1.2vw, 16px);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--brand-orange);
  font-weight: 500;
  /* Tiny vertical tick under the number to anchor it visually */
  padding-bottom: 8px;
  border-bottom: 1px solid var(--brand-orange);
  line-height: 1;
}
@media (max-width: 880px) {
  /* On mobile, stack each still tighter and shrink the mono cap */
  .hero--services__triptych { gap: 14px; }
  .hero--services__still { padding-left: 22px; }
  .hero--services__still-cap { font-size: 0.65rem; }
}

/* ──────────────────────────────────────────────────────────────────────
   21b. SECTORS HERO — 2-col magazine spread with 2x2 venue mosaic
   ────────────────────────────────────────────────────────────────────
   Mirrors the H1 "Quatre univers" with 4 venue stills in a 2x2 grid.
   Reading order top→bottom, left→right = order of growing density:
   Healthcare · Education · Hospitality · High Density.
   All 4 stills share the same golden-hour palette so the mosaic
   reads as one set, not 4 random shots.
────────────────────────────────────────────────────────────────────── */
.hero--sectors {
  position: relative;
  overflow: hidden;
}
.hero--sectors__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .hero--sectors__grid { grid-template-columns: 1fr; gap: 40px; }
}
.hero--sectors__copy { max-width: 100%; }

/* 2x2 mosaic
   DESIGNER REVIEW 2026-05-26: tightened gap from clamp(10px, 1vw, 16px)
   to 8px flat so the 4 cells read as ONE object (Wallpaper-magazine
   spread move), not a quadrant grid. */
.sectors-mosaic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sectors-mosaic__cell {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sectors-mosaic__cell > img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: clamp(8px, 0.8vw, 12px);
  outline: 1px solid var(--hairline);
  outline-offset: -1px;
  box-shadow:
    0 8px 22px -12px rgba(26, 31, 44, 0.18),
    0 2px 8px -2px rgba(26, 31, 44, 0.06);
  /* DESIGNER REVIEW 2026-05-26: unified warm-amber filter (matches
     .hero--services__figure img) — locks all sub-page hero imagery
     into one luminance/temperature band. */
  filter: sepia(0.06) saturate(1.06) brightness(0.97) contrast(1.02);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sectors-mosaic__cell:hover > img {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px -14px rgba(26, 31, 44, 0.26),
    0 4px 12px -3px rgba(26, 31, 44, 0.10);
}
.sectors-mosaic__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 500;
  text-transform: uppercase;
  margin: 0;
  padding-left: 2px;
}
@media (max-width: 880px) {
  /* Mobile: keep 2x2 (4 small thumbnails is still readable);
     only shrink the gap + label */
  .sectors-mosaic { gap: 8px; }
  .sectors-mosaic__label { font-size: 0.62rem; }
}
@media (max-width: 480px) {
  /* Very narrow phones: stack to 1 col */
  .sectors-mosaic { grid-template-columns: 1fr; gap: 12px; }
}

/* ──────────────────────────────────────────────────────────────────────
   21c. FORMATION HERO — FULL-BLEED CINEMATIC (Apple "Today at Apple"
   ────────────────────────────────────────────────────────────────────
   Bold experiment per joint designer + sales review (2026-05-26):
   Formation is the flagship offer (only CWNP center in Morocco).
   It deserves operatic delivery — not the standard 2-col grid that
   the 3 other sub-pages use. Full-bleed 16:9 image with H1 overlaid
   bottom-left + paper-colored gradient scrim for text legibility.

   Breaks the symmetry of the other 4 sub-page heroes intentionally —
   "asymmetry between equals is editorial, not error" (designer).
────────────────────────────────────────────────────────────────────── */
.hero--formation-bleed {
  /* Override the standard hero padding — full-bleed needs flush edges */
  padding: 0;
  position: relative;
  overflow: hidden;
  /* The full-bleed media + scrim live directly under .hero--formation-bleed,
     no inner .bb-container (the scrim's edge gradient does the optical
     containing instead of a CSS max-width). */
}
.hero--formation-bleed__media {
  position: relative;
  width: 100%;
  /* User request 2026-05-26: "image needs to be full screen" —
     fills the entire viewport BELOW the sticky nav (93px).
     `100dvh` accounts for mobile browser chrome (URL bar collapse);
     `100vh` fallback. min-height/max-height prevent absurd edges. */
  height: calc(100vh - 93px);
  height: calc(100dvh - 93px);
  min-height: 520px;
  max-height: 1000px;
}
.hero--formation-bleed__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Same unified warm-amber filter as the other sub-page heroes —
     keeps Formation in the same luminance band as its siblings. */
  filter: sepia(0.06) saturate(1.06) brightness(0.94) contrast(1.04);
}
/* Paper-colored gradient scrim — lightens the bottom-left so dark H1
   reads cleanly without obliterating the image. Layered:
   - Horizontal: paper opacity strong at left → 0 at ~70%
   - Vertical: paper opacity stronger at bottom → 0 at top
   The two compound to form a "soft light wedge" in the bottom-left
   corner. */
.hero--formation-bleed__scrim {
  position: absolute;
  inset: 0;
  /* DESIGNER ROUND-2 NIT 2026-05-26: leftmost paper opacity 0.92 → 0.85
     so the image reads as LIT not MASKED on the left wedge. H1
     legibility still maintained by the text-shadow + 0.85 paper. */
  background:
    linear-gradient(
      to right,
      rgba(251, 251, 250, 0.85) 0%,
      rgba(251, 251, 250, 0.70) 25%,
      rgba(251, 251, 250, 0.30) 50%,
      rgba(251, 251, 250, 0) 72%
    ),
    linear-gradient(
      to top,
      rgba(251, 251, 250, 0.40) 0%,
      rgba(251, 251, 250, 0.15) 35%,
      rgba(251, 251, 250, 0) 65%
    );
  pointer-events: none;
}
.hero--formation-bleed__copy {
  position: absolute;
  bottom: clamp(36px, 5vw, 72px);
  left: 0;
  right: 0;
  z-index: 1;
}
.hero--formation-bleed__copy .bb-container {
  /* Reuse the normal container constraints so the copy aligns with
     the rest of the page below the hero. */
  max-width: min(720px, 60vw);
  margin-left: clamp(20px, 4vw, 80px);
  padding-inline: 0;
}
.hero--formation-bleed__copy .eyebrow {
  color: var(--brand-orange);
  /* Make the eyebrow pop slightly more on the imagery */
  font-weight: 600;
}
.hero--formation-bleed__copy .hero__title {
  color: var(--ink);
  /* Subtle text-shadow guarantees legibility even on bright spots in
     the image — invisible on the paper-scrim'd area, just-enough on
     edge cases. */
  text-shadow: 0 1px 0 rgba(251, 251, 250, 0.4);
}
.hero--formation-bleed__copy .hero__lede {
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  max-width: 56ch;
}

/* Mobile fallback: full-bleed becomes a stacked layout — image on top,
   copy below on paper. Trying to overlay text on an image on a 375px
   phone is illegible. */
@media (max-width: 720px) {
  .hero--formation-bleed { padding-block: 0; }
  .hero--formation-bleed__media { height: clamp(280px, 40vh, 420px); }
  .hero--formation-bleed__scrim { display: none; }
  .hero--formation-bleed__copy {
    position: static;
    background: var(--paper);
    padding: clamp(28px, 5vw, 48px) 0;
  }
  .hero--formation-bleed__copy .bb-container {
    max-width: 100%;
    margin-left: 0;
    padding-inline: var(--container-pad);
  }
}

/* ── 7. Trust strip ──────────────────────────────────────────────── */
.trust {
  border-block: 1px solid var(--hairline);
  padding-block: var(--space-6);
}
.trust__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  align-items: center;
  justify-content: space-between;
  color: var(--ink-muted);
  font-family: var(--font-sans);
  font-size: var(--type-small);
}
.trust__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.trust__item strong { color: var(--ink); font-weight: 600; }
.trust__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-orange); }

/* Modifier — force all items onto one row (used on the Formation page
   where 5 items were wrapping to 2 lines). Reduces column gap +
   prevents intra-item wrap so the strip stays on one line down to
   ~880px. Below 880px it falls back to wrap (5 items will never fit
   on a phone). */
.trust__inner--single-line {
  flex-wrap: nowrap;
  gap: var(--space-4) clamp(20px, 2.5vw, 40px);
  font-size: 0.82rem;
}
.trust__inner--single-line .trust__item { white-space: nowrap; }
@media (max-width: 880px) {
  .trust__inner--single-line { flex-wrap: wrap; gap: var(--space-4) var(--space-6); font-size: var(--type-small); }
  .trust__inner--single-line .trust__item { white-space: normal; }
}

/* ── 8. Bento services grid (Asymmetric) ─────────────────────────── */
.services {
  background-color: var(--paper-2);
  position: relative;
  overflow: hidden;
  isolation: isolate; /* makes ::before z-index local to .services */
}
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/assets/img/patterns/network-topology.svg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.78; /* slightly stronger so the tech moment lands clearly */
  pointer-events: none;
  z-index: 0;
  /* Subtle radial fade so the pattern is denser in the middle, lighter at edges */
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.5) 100%);
          mask-image: radial-gradient(ellipse at center, black 30%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0.5) 100%);
}
.services > .bb-container { position: relative; z-index: 1; }
.services__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
  align-items: end;
}
@media (max-width: 820px) {
  .services__header { grid-template-columns: 1fr; gap: var(--space-5); }
}
.services__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-5);
}
.services__grid > :nth-child(1) { grid-row: 1 / span 2; }
@media (max-width: 820px) {
  .services__grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .services__grid > :nth-child(1) { grid-row: auto; }
}

.card-bb {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: transform var(--duration-base) var(--ease-out-soft),
              border-color var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.card-bb--feature { padding: var(--space-7); }
.card-bb:hover {
  transform: translateY(-2px);
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-lift);
}
.card-bb__media {
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  aspect-ratio: 16 / 9;
  background: var(--paper-2);
  overflow: hidden;
}
.card-bb--feature .card-bb__media {
  margin: calc(var(--space-7) * -1) calc(var(--space-7) * -1) var(--space-6);
  aspect-ratio: 5 / 4;
}
.card-bb__media img { width: 100%; height: 100%; object-fit: cover; }
.card-bb__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}
.card-bb__lead { color: var(--ink-muted); font-size: var(--type-small); margin-bottom: var(--space-5); flex-grow: 1; }
.card-bb__foot { margin-top: auto; }

/* ── 9. Case study spotlight ─────────────────────────────────────── */
.case {
  position: relative;
  display: grid;
  /* minmax(0, ...) instead of bare 1.2fr 1fr — without it, the body
     column expands to its min-content (~223px) and the image column
     takes ALL remaining + overflow space (~923 of 940), pushing the
     body past the slide's right edge by ~206px. minmax(0,...) tells
     grid the columns can shrink below content min-size, so the
     1.2:1 ratio is strictly honored within the parent's width. */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  background: var(--surface-deep);
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--ink-on-dark);
}
@media (max-width: 880px) { .case { grid-template-columns: 1fr; } }
.case__media {
  background: linear-gradient(135deg, #1A2538 0%, #2A4480 100%);
  position: relative;
  /* No aspect-ratio on desktop — the column needs to stretch to match
     the body column's full height. Without this, a 4:3 image leaves
     the dark surface-deep background showing below the photo. Grid
     equal-height stretch only fires when the cell has no intrinsic
     size constraint, so removing aspect-ratio is the fix. */
  min-height: 100%;
}
/* Mobile: layout stacks, so the image needs an explicit ratio
   to avoid collapsing to zero height. */
@media (max-width: 880px) {
  .case__media { aspect-ratio: 4 / 3; min-height: 240px; }
}
.case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.62; }
.case__body { padding: clamp(36px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.case__body .eyebrow { color: var(--brand-orange); }
.case__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
  color: var(--ink-on-dark);
  text-wrap: balance;
}
.case__lede { color: rgba(244, 244, 241, 0.78); margin-bottom: var(--space-6); }
.case__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-5);
  border-block: 1px solid rgba(244, 244, 241, 0.16);
  margin-bottom: var(--space-6);
}
.case__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--brand-orange);
  display: block;
  white-space: nowrap;
  line-height: 1.05;
}
.case__stat-unit {
  display: inline-block;
  font-size: 0.55em;
  font-weight: 400;
  margin-left: 2px;
  vertical-align: baseline;
  letter-spacing: 0;
}
.case__stat-label {
  font-size: var(--type-tiny);
  color: rgba(244, 244, 241, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
  display: block;
}
.case__body .link-arrow { color: var(--ink-on-dark); }
.case__body .link-arrow:hover { color: var(--brand-orange); border-bottom-color: var(--brand-orange); }

.case__stats-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 244, 241, 0.5);
  margin-bottom: var(--space-2);
  margin-top: var(--space-3);
}
.case__stats-label em {
  display: inline;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(244, 244, 241, 0.4);
  margin-left: 4px;
}

.case__stat-source {
  display: block;
  font-size: 0.6875rem;
  font-style: italic;
  color: rgba(244, 244, 241, 0.45);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
  font-weight: 400;
}

.case__pending {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--type-small);
  color: rgba(244, 244, 241, 0.62);
  font-style: italic;
}
.case__pending-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-orange);
  flex-shrink: 0;
  animation: pending-pulse 2.4s ease-in-out infinite;
}
@keyframes pending-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .case__pending-dot { animation: none; opacity: 0.85; }
}

/* ── 10. Sectors strip ───────────────────────────────────────────── */
.sectors__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
}
@media (max-width: 980px) { .sectors__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sectors__grid { grid-template-columns: 1fr; } }
.sector {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-out-soft),
              background var(--duration-base) var(--ease-out-soft);
}
.sector:hover { border-color: var(--brand-blue); background: var(--paper); }
.sector__icon { width: 32px; height: 32px; margin-bottom: var(--space-4); color: var(--brand-blue); }
.sector__name { font-family: var(--font-sans); font-weight: 600; font-size: 0.9375rem; margin-bottom: var(--space-2); color: var(--ink); }
.sector__desc { font-size: var(--type-small); color: var(--ink-muted); line-height: 1.5; margin: 0; }

/* ── 9b. Cases carousel (horizontal scroll-snap + prev/next nav) ── */
/* FIX 2026-05-26: Tier 3 body[data-section="cases"] paints body dark
   (var(--surface-deep)). The cases section had no own bg or dark-text
   treatment, so the header eyebrow + h2 became dark-on-dark (faded).
   Painting the section explicitly and giving the header light-on-dark
   text colors makes it self-contained and legible regardless of body. */
.cases {
  background: var(--surface-deep);
  color: var(--ink-on-dark);
}
.cases__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-7);
  margin-bottom: var(--space-7);
}
.cases__header .eyebrow,
.cases__header h2 {
  color: var(--ink-on-dark);
}
.cases__header .eyebrow {
  /* mono eyebrow needs slightly muted treatment on dark to mirror
     the paper-bg sections' subtle eyebrow color */
  opacity: 0.85;
}
@media (max-width: 820px) {
  .cases__header { flex-direction: column; align-items: stretch; gap: var(--space-4); }
}

.cases__nav {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}
.cases__nav-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-base) var(--ease-out-soft),
              border-color var(--duration-base) var(--ease-out-soft),
              color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-fast) var(--ease-out-snap),
              opacity var(--duration-base) var(--ease-out-soft);
}
.cases__nav-btn svg { width: 20px; height: 20px; }
.cases__nav-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ink-on-dark);
}
.cases__nav-btn:active { transform: scale(0.96); }
.cases__nav-btn:disabled,
.cases__nav-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.cases__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 72px, black calc(100% - 72px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 72px, black calc(100% - 72px), transparent 100%);
}

.cases__track {
  display: flex;
  gap: clamp(48px, 5vw, 96px);
  list-style: none;
  margin: 0;
  padding: 4px max(72px, var(--container-pad)) 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cases__track::-webkit-scrollbar { display: none; }

.cases__slide {
  flex: 0 0 auto;
  width: min(90vw, 1200px);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  opacity: 0.55;
  transition: opacity var(--duration-slow) var(--ease-out-soft);
}
.cases__slide.is-active {
  opacity: 1;
}
.cases__slide > .case {
  height: 100%; /* equal-height cards across the carousel */
  flex: 1;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .cases__slide,
  .cases__slide.is-active {
    opacity: 1;
    transition: none;
  }
}
@media (max-width: 820px) {
  .cases__slide { width: 92vw; }
  .cases__viewport {
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  }
}

/* Override the .case article inside a slide — case keeps its own styles, no change needed */

/* ── 10b. Trust marquee (3-lane infinite scroll, Datadog-style) ──── */
.trust-marquee {
  /* Scan-zone section — tightened per review #41 IMPORTANT #4 */
  padding-block: var(--section-y-tight);
  overflow: hidden; /* clip lane bleed */
}

.trust-marquee__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
  align-items: end;
}
@media (max-width: 820px) {
  .trust-marquee__header { grid-template-columns: 1fr; gap: var(--space-5); }
}

.trust-marquee__lanes {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* edge fade so logos enter/exit cleanly */
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 96px, black calc(100% - 96px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 96px, black calc(100% - 96px), transparent 100%);
}

.marquee-lane {
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation-name: marquee-left;
  animation-duration: var(--marquee-duration, 60s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* GPU-promote for smoothness on Odoo Online */
  will-change: transform;
}

.marquee-lane--right .marquee-track {
  animation-name: marquee-right;
}

.marquee-lane:hover .marquee-track,
.marquee-track:focus-within {
  animation-play-state: paused;
}

.marquee-set {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-4);
  padding-right: var(--space-4); /* keep gap consistent at the seam */
}

.marquee-set li {
  flex-shrink: 0;
  width: 200px;
  height: 84px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-base) var(--ease-out-soft),
              border-color var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft);
}

.marquee-set li:hover {
  transform: translateY(-2px);
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-lift);
  z-index: 1;
}

.marquee-set img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* color preserved by default — this is intentional */
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
    /* on reduced motion: show first ~6 logos statically, no scroll */
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
}

.trust-marquee__key {
  margin-top: var(--space-7);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}
.trust-marquee__key p { margin: 0 auto; max-width: 70ch; }
.trust-marquee__key span { white-space: nowrap; }
.trust-marquee__sep {
  display: inline-block;
  margin: 0 10px;
  color: var(--ink-soft);
}

/* ── 10c. Timeline (hairline rows w/ year on left) ───────────────── */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.timeline__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-7);
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.timeline__year {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 500;
  color: var(--brand-blue);
  letter-spacing: 0;
  line-height: 1;
}
.timeline__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}
.timeline__body p {
  color: var(--ink-muted);
  margin: 0;
  max-width: 60ch;
}
.timeline__body .mark {
  background: linear-gradient(transparent 70%, rgba(237, 125, 49, 0.28) 70%);
  padding: 0 2px;
  color: var(--ink);
  font-weight: 500;
}
@media (max-width: 720px) {
  .timeline__row { grid-template-columns: 1fr; gap: var(--space-3); }
  .timeline__year { font-size: 2rem; }
}

/* ── 10d. Vision & Mission grid ─────────────────────────────────── */
.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}
@media (max-width: 820px) { .vm-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.vm-card {
  padding: var(--space-7);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.vm-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem);
  letter-spacing: -0.015em;
  margin: var(--space-3) 0 var(--space-4);
  color: var(--ink);
}
.vm-card__body {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  margin: var(--space-3) 0 var(--space-5);
  max-width: 60ch;
}

/* ── 10e. Values grid (3 numbered cards) ─────────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
@media (max-width: 880px) { .values-grid { grid-template-columns: 1fr; } }
.value-card {
  padding: var(--space-7) var(--space-6);
  border-right: 1px solid var(--hairline);
}
.value-card:last-child { border-right: none; }
@media (max-width: 880px) {
  .value-card { border-right: none; border-bottom: 1px solid var(--hairline); }
  .value-card:last-child { border-bottom: none; }
}
.value-card__num {
  display: block;
  font-size: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  color: var(--brand-orange);
  font-weight: 500;
  line-height: 1;
  margin-bottom: var(--space-5);
  letter-spacing: -0.02em;
}
.value-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}
.value-card p {
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.6;
  margin: 0;
}

/* ── 10g. Cert ladder (CWNP certifications by tier) ──────────────── */
.cert-ladder {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.cert-tier {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-7);
  padding: var(--space-7) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}
@media (max-width: 880px) {
  .cert-tier { grid-template-columns: 1fr; gap: var(--space-5); }
}

.cert-tier__label {
  max-width: 36ch;
}
.cert-tier__label h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: var(--space-3) 0 var(--space-3);
  color: var(--ink);
  text-wrap: balance;
}
.cert-tier__label p {
  color: var(--ink-muted);
  margin: 0;
}

.cert-tier__certs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
.cert-tier__certs--solo {
  grid-template-columns: 1fr;
  max-width: 240px;
}
@media (max-width: 540px) {
  .cert-tier__certs { grid-template-columns: repeat(2, 1fr); }
}

.cert-tier__certs li {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  transition: border-color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft);
}
.cert-tier__certs li:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.cert-tier__certs img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.cert-tier__certs--solo img { width: 140px; height: 140px; }

.cert-name {
  font-family: var(--font-sans);
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cert-name em {
  display: block;
  font-style: normal;
  font-size: var(--type-tiny);
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  margin-top: 2px;
  text-transform: uppercase;
}

.cert-tier--expert {
  /* the pinnacle row — subtle highlight via accent line on the left */
  background:
    linear-gradient(to right,
      rgba(237, 125, 49, 0.04) 0%,
      transparent 30%);
}
.cert-tier--expert .cert-tier__label::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--brand-orange);
  margin-bottom: var(--space-4);
}

/* Instructor callout — meta-level CWNT */
.cert-instructor {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-6);
  padding: var(--space-7);
  background: var(--surface-deep);
  color: var(--ink-on-dark);
  border-radius: var(--radius-xl);
  align-items: center;
  margin-top: var(--space-8);
}
@media (max-width: 720px) {
  .cert-instructor { grid-template-columns: 1fr; text-align: center; gap: var(--space-4); }
}
.cert-instructor img {
  width: 140px;
  height: 140px;
  object-fit: contain;
  filter: brightness(1.02);
}
.cert-instructor__body .eyebrow {
  color: var(--brand-orange);
}
.cert-instructor__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: var(--space-3) 0;
  color: var(--ink-on-dark);
}
.cert-instructor__body h3 strong {
  color: var(--brand-orange);
  font-weight: 600;
}
.cert-instructor__body p {
  color: rgba(244, 244, 241, 0.78);
  margin: 0;
  max-width: 65ch;
}

/* ── 10f. Team grid (avatar circle + name + role + bio) ─────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}
@media (max-width: 720px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  align-items: start;
  transition: border-color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft);
}
.team-card:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.team-card__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-deep) 100%);
  color: var(--ink-on-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  position: relative;
}
.team-card__avatar::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  pointer-events: none;
}
.team-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
  letter-spacing: -0.015em;
  margin: 0 0 4px;
  color: var(--ink);
}
.team-card__role {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-blue);
  margin: 0 0 var(--space-4);
}
.team-card__bio {
  color: var(--ink-muted);
  font-size: var(--type-small);
  line-height: 1.6;
  margin: 0;
}
.team-foot {
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--type-small);
  color: var(--ink-soft);
  font-style: italic;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.team-foot .case__pending-dot {
  background: var(--brand-orange);
}

/* ── 10h. Service list (numbered, hairline rows, denser than spec-list) ── */
.service-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hairline);
}
.service-list__row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
@media (max-width: 720px) {
  .service-list__row { grid-template-columns: 1fr; gap: var(--space-3); }
}
.service-list__row dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.service-list__row dt .mono {
  color: var(--brand-orange);
  font-weight: 500;
  font-size: 0.875em;
  margin-right: var(--space-2);
  vertical-align: 1px;
  letter-spacing: 0;
}
.service-list__row dd {
  margin: 0;
  color: var(--ink-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.service-list__row dd strong {
  color: var(--ink);
  font-weight: 600;
}

/* ── 10i. Toolkit (hardware + software photo grids) ──────────────── */
.toolkit__subtitle {
  margin: var(--space-3) 0 var(--space-6);
  padding-top: var(--space-5);
}
.toolkit__subtitle--second {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--hairline);
}

.toolkit__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 880px) { .toolkit__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .toolkit__grid { grid-template-columns: 1fr; } }

.toolkit__grid--sw {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 880px) { .toolkit__grid--sw { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .toolkit__grid--sw { grid-template-columns: 1fr; } }

.tool-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft);
}
.tool-card:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.tool-card img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: var(--paper-2);
  padding: var(--space-4);
  display: block;
}
.tool-card--sw img {
  background: var(--surface-deep);
  padding: var(--space-3);
  object-fit: cover;
  object-position: top center;
}
.tool-card figcaption {
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-top: 1px solid var(--hairline);
}
.tool-card figcaption strong {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.tool-card figcaption span {
  display: block;
  font-size: var(--type-small);
  color: var(--ink-muted);
  line-height: 1.5;
}

/* ── 10j. Methodology — 4-step process ────────────────────────────── */
.methodology {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) { .methodology { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .methodology { grid-template-columns: 1fr; } }

.method-step {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--brand-blue);
  display: flex;
  flex-direction: column;
}
.method-step:nth-child(2) { border-top-color: var(--brand-blue-deck); }
.method-step:nth-child(3) { border-top-color: var(--brand-orange); }
.method-step:nth-child(4) { border-top-color: var(--ink-muted); }

.method-step__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
}
.method-step__num {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.method-step__head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem);
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.method-step p {
  font-size: var(--type-small);
  color: var(--ink-muted);
  line-height: 1.55;
  margin: 0 0 var(--space-3);
}
.method-step p:last-child { margin-bottom: 0; }

/* ── 10k. Sectors page — logo grid per sector ───────────────────── */
.sector-block .services__header { margin-bottom: var(--space-7); }

.sector-logos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
}
@media (max-width: 1080px) { .sector-logos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) { .sector-logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .sector-logos { grid-template-columns: repeat(2, 1fr); } }

.sector-logos li {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft);
}
.sector-logos li:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  z-index: 1;
}
.sector-logos img {
  /* Cap BOTH dimensions so logos with wildly different aspect ratios
     (square Atlas Asni vs wide Radisson vs tall Amadil) read at a
     consistent optical weight inside their cards. Reviewer fix #28. */
  max-height: 48px;
  max-width: 78%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
}

.sector-note {
  margin: var(--space-6) auto 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--type-small);
  color: var(--ink-muted);
  line-height: 1.7;
  max-width: 70ch;
}
.sector-note .mono {
  color: var(--brand-blue);
  font-weight: 500;
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  margin-right: 6px;
}

/* The trust strip on sectors page — links style */
.sectors-toc { /* future-proof */ }
.trust__item a {
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.trust__item a:hover {
  color: var(--ink);
  border-bottom-color: var(--brand-orange);
}

/* ── 10l. Contact page — 3-card quick actions + map + form ───────── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; } }

.contact-card {
  display: grid;
  grid-template-columns: 56px 1fr 24px;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft);
}
.contact-card:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.contact-card__icon {
  width: 56px;
  height: 56px;
  background: var(--paper-2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-blue);
  flex-shrink: 0;
}
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 4px 0 4px;
  color: var(--ink);
}
.contact-card__title.mono {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  letter-spacing: 0;
}
.contact-card__sub {
  font-size: var(--type-small);
  color: var(--ink-muted);
  margin: 0;
}
.contact-card__arrow {
  font-size: 1.25rem;
  color: var(--ink-soft);
  transition: color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-base) var(--ease-out-soft);
  align-self: center;
}
.contact-card:hover .contact-card__arrow {
  color: var(--brand-blue);
  transform: translateX(4px);
}

/* Split layout — Map left, Form right */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
@media (max-width: 980px) { .contact-split { grid-template-columns: 1fr; } }

.map-frame {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface);
  min-height: 480px;
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(0.2) contrast(0.96);
}
.map-frame__overlay {
  position: absolute;
  left: var(--space-5);
  bottom: var(--space-5);
  right: var(--space-5);
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-lift);
  z-index: 1;
}
.map-frame__overlay .eyebrow { margin-bottom: var(--space-3); }
.map-frame__overlay p {
  margin: 0 0 var(--space-3);
  font-size: var(--type-small);
  color: var(--ink);
  line-height: 1.5;
}

/* Contact form */
.contact-form {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 48px);
  display: flex;
  flex-direction: column;
}
.contact-form__header { margin-bottom: var(--space-6); }
.contact-form__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: var(--space-3) 0 var(--space-3);
  color: var(--ink);
  text-wrap: balance;
}
.contact-form__header .lede {
  font-size: var(--type-small);
  color: var(--ink-muted);
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field--full { grid-column: 1 / -1; }

.form-field label {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-sans);
  /* 1rem (16px) minimum — iOS Safari auto-zooms any focused input under
     16px, which yanks the viewport and feels broken. 16px = no zoom. */
  font-size: 1rem;
  color: var(--ink);
  /* Inputs sit on .contact-form which is var(--surface) (#FFFFFF).
     Using --paper-2 (slightly darker cream) for the input bg gives
     visible "well" depth at rest. Reviewer fix #28: inputs were
     nearly invisible white-on-white before. */
  background: var(--paper-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color var(--duration-base) var(--ease-out-soft),
              background var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--brand-blue);
  background: var(--surface); /* on focus: lift to pure white = clear active state */
  box-shadow: 0 0 0 3px rgba(58, 95, 168, 0.12);
}
.form-field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }

.contact-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
}
.contact-form__actions .btn-bb { align-self: flex-start; }
.form-note {
  font-size: var(--type-tiny);
  color: var(--ink-soft);
  font-style: italic;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.form-note .case__pending-dot { background: var(--brand-orange); }

/* ── 11. Spec list (hairline rows) ───────────────────────────────── */
.spec-list { margin: 0; padding: 0; }
.spec-list__row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--hairline);
  align-items: baseline;
}
.spec-list__row:last-child { border-bottom: 1px solid var(--hairline); }
.spec-list__row dt {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}
.spec-list__row dd {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--ink);
}
.spec-list__row dd strong { font-weight: 600; }
@media (max-width: 640px) {
  .spec-list__row { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ── 12. CTA band ────────────────────────────────────────────────── */
.cta-band {
  background: var(--surface-deep);
  color: var(--ink-on-dark);
  border-radius: var(--radius-xl);
  padding: clamp(48px, 5vw, 80px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-7);
  align-items: end;
  position: relative;
  overflow: hidden;
}
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; align-items: start; } }
.cta-band::before {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(237, 125, 49, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink-on-dark);
  text-wrap: balance;
  margin: 0;
  max-width: 18ch;
}
.cta-band__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 820px) { .cta-band__actions { justify-content: flex-start; } }

/* ── 13. Footer ──────────────────────────────────────────────────── */
.bb-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-8) var(--space-5);
}
.bb-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}
@media (max-width: 820px) { .bb-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
@media (max-width: 520px) { .bb-footer__top { grid-template-columns: 1fr; } }
.bb-footer__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.bb-footer__desc { color: var(--ink-muted); font-size: var(--type-small); max-width: 36ch; }
.bb-footer__col-title {
  font-family: var(--font-sans);
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}
.bb-footer__list { list-style: none; padding: 0; margin: 0; }
.bb-footer__list li { margin-bottom: var(--space-3); }
.bb-footer__list a {
  font-size: 0.9375rem;
  color: var(--ink);
}
.bb-footer__list a:hover { color: var(--brand-blue); }
/* Touch: give footer links a ≥44px tap target so thumbs don't mis-hit
   adjacent rows. Inline-block + vertical padding; remove the li margin
   so the padding provides the rhythm instead (no double-gap). */
@media (max-width: 820px) {
  .bb-footer__list li { margin-bottom: 0; }
  .bb-footer__list a {
    display: inline-block;
    padding: 11px 0;
    font-size: 1rem;
  }
}
.bb-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--type-tiny);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ── 14. Scroll reveal — JS-gated, fails open ───────────────────── */
/* Default: .reveal elements are FULLY VISIBLE. The opacity:0 starting
   state is only applied AFTER a head-inlined script confirms that
   IntersectionObserver is available and the user hasn't requested
   reduced motion. If JS fails, is slow, or is blocked, content stays
   visible — LCP no longer depends on the reveal pipeline. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal-init .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-reveal) var(--ease-out-soft),
                transform var(--duration-reveal) var(--ease-out-soft);
    transition-delay: calc(var(--reveal-delay, 0) * 80ms);
  }
  .js-reveal-init .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 15. Utilities ───────────────────────────────────────────────── */
.text-muted-bb { color: var(--ink-muted); }
.text-balance { text-wrap: balance; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ──────────────────────────────────────────────────────────────────────
   17. MEGA STATS — V2-promoted (sales-driven hero proof band)
   ────────────────────────────────────────────────────────────────────
   Replaces the old small .trust strip on the home page with a hero-level
   stat band: 4 huge mono numbers (400+, 10 000+, "Seul", < 15 min) with
   counter-up animation on scroll-into-view (see site.js [data-counter]).
   The pre-counter "0" text in the DOM is the animation starting state.
────────────────────────────────────────────────────────────────────── */
.mega-stats {
  background: var(--paper);
  /* Reduced from clamp(72-120) to clamp(48-80) — fixes the 78%
     padding-to-content ratio that was breaking vertical rhythm per
     review #41 CRITICAL #1. Brings ratio in line with other sections
     (~33%) and eliminates the "sparse below" feel after the dense hero. */
  padding: clamp(48px, 5vw, 80px) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.mega-stats__intro {
  max-width: 720px;
  /* Reduced gap intro→grid from clamp(40-64) to clamp(28-44) for
     same vertical-rhythm fix per review CRITICAL #1. */
  margin: 0 auto clamp(28px, 3.5vw, 44px);
  padding: 0 var(--container-pad);
  text-align: center;
}
.mega-stats__intro .eyebrow {
  color: var(--brand-orange);
  margin-bottom: 12px;
}
.mega-stats__intro h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.mega-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
@media (max-width: 880px) {
  .mega-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 480px) {
  .mega-stats__grid { grid-template-columns: 1fr; gap: 32px; }
}
.mega-stat { text-align: center; }
.mega-stat__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--brand-orange);
  display: block;
  margin-bottom: 12px;
  white-space: nowrap;
}
/* Variant: render the value as a serif italic word (e.g. "Seul") */
.mega-stat__num--word {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.025em;
}
/* Small mono suffix for unit labels (e.g. "min" after the digits) */
.mega-stat__unit {
  font-size: 0.4em;
  font-family: var(--font-sans);
  color: var(--ink-muted);
  margin-left: 4px;
  letter-spacing: 0;
  font-weight: 500;
  vertical-align: 0.6em;
}
.mega-stat__label {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 240px;
  margin: 0 auto;
}
.mega-stat__label strong { color: var(--ink); font-weight: 600; }

/* ── Formation variant — boosted padding + bigger numbers so the band
   carries visual weight comparable to the full-bleed hero above
   (user request 2026-05-26: "make it as big as the landing"). */
.mega-stats--formation {
  /* Roughly doubles vertical breathing room — band height ~480-560px
     on desktop vs default ~250px, bringing it closer to hero scale. */
  padding: clamp(80px, 8vw, 140px) 0;
  /* Subtle eyebrow-style band: paper-2 background and stronger
     hairlines top/bottom signal "this is a major section" rather
     than a footer afterthought. */
  background: var(--paper-2);
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
}
.mega-stats--formation .mega-stat__num {
  /* Bigger numbers (clamp lifted ~25%) — read confidently from across
     the room when the hero scrolls past. */
  font-size: clamp(3.25rem, 2.25rem + 4vw, 5.75rem);
}
.mega-stats--formation .mega-stat__label {
  font-size: 0.95rem;
  max-width: 260px;
  line-height: 1.5;
}
/* On phones the 4 stats stack to 1 column — the desktop-scale padding
   (80px+) makes the band ~610px tall, too much scrolling. Tighten it
   and add row gaps between the now-stacked stats. */
@media (max-width: 480px) {
  .mega-stats--formation { padding: clamp(40px, 10vw, 56px) 0; }
  .mega-stats--formation .mega-stat__num { font-size: 3rem; }
  .mega-stats--formation .mega-stat__label { max-width: 300px; }
}

/* ──────────────────────────────────────────────────────────────────────
   18.5 DECOMPRESSION STRIP — "Comme déjà choisi par" + 4 client logos
   ────────────────────────────────────────────────────────────────────
   Per review #41 POLISH #5: insert a low-density "scan zone" between
   the dense hero (video) and the heavier proof sections (mega-stats /
   garantie). Gives the eye a moment of decompression + delivers
   instant authority via 4 marquee client logos.
   Height capped ~64px so it reads as a transition, not as a section.
────────────────────────────────────────────────────────────────────── */
.proof-strip {
  background: var(--paper-2);
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}
.proof-strip__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  justify-content: center;
}
.proof-strip__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-shrink: 0;
}
/* Verticals lineup — text-driven proof. Sectors served, separated by
   orange middot dividers (the only sales accent of the strip).
   "+ autres" is rendered slightly lighter so it reads as caveat, not
   as a 6th sector. */
.proof-strip__verticals {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 4px;
  column-gap: 0;
}
.proof-strip__verticals li {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.005em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.proof-strip__verticals li:not(:first-child)::before {
  content: "·";
  color: var(--brand-orange);
  font-weight: 700;
  font-size: 1.1em;
  margin: 0 clamp(14px, 1.8vw, 24px);
  display: inline-block;
}
.proof-strip__more {
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
  font-style: italic;
}
@media (max-width: 660px) {
  .proof-strip__inner { gap: 14px; flex-direction: column; }
  .proof-strip__label { font-size: 0.65rem; }
  .proof-strip__verticals li { font-size: 0.85rem; }
  .proof-strip__verticals li:not(:first-child)::before { margin: 0 10px; }
}

/* ──────────────────────────────────────────────────────────────────────
   18. GARANTIE BBRS — dark promise band (V2-promoted, paired with #19)
   ────────────────────────────────────────────────────────────────────
   Full-bleed dark navy band with two big claims (100% couverture / 10 000+
   Seuls au Maroc). Subtle animated grid background, paired with the
   light Security pillars band below to form a promise → proof sequence.
────────────────────────────────────────────────────────────────────── */
.garantie {
  position: relative;
  background: var(--surface-deep);
  color: var(--ink-on-dark);
  padding: clamp(80px, 9vw, 144px) 0;
  overflow: hidden;
}
.garantie::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--brand-orange);
  z-index: 2;
}
/* Subtle grid pattern — masked to fade at edges */
.garantie::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(244, 244, 241, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 244, 241, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}
.garantie__container {
  position: relative;
  z-index: 5;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.garantie__head {
  max-width: 760px;
  margin-bottom: clamp(48px, 5vw, 80px);
}
.garantie__head .eyebrow {
  color: var(--brand-orange);
  margin-bottom: 16px;
}
.garantie__head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink-on-dark);
  text-wrap: balance;
  margin-bottom: 16px;
}
.garantie__head p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  color: rgba(244, 244, 241, 0.78);
}
.garantie__claims {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
}
@media (max-width: 880px) { .garantie__claims { grid-template-columns: 1fr; gap: 40px; } }
.gclaim {
  padding: 32px 0 0;
  border-top: 1px solid rgba(244, 244, 241, 0.15);
  position: relative;
}
.gclaim::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 64px;
  height: 1px;
  background: var(--brand-orange);
}
.gclaim__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand-orange);
  margin-bottom: 16px;
  display: block;
  white-space: nowrap;
}
.gclaim__num small { font-size: 0.55em; vertical-align: 0.4em; margin-left: 2px; }
.gclaim h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink-on-dark);
  margin-bottom: 12px;
  text-wrap: balance;
}
.gclaim p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(244, 244, 241, 0.78);
}
.gclaim p strong { color: var(--ink-on-dark); font-weight: 600; }
.garantie__foot {
  margin-top: clamp(40px, 4vw, 56px);
  padding-top: 20px;
  border-top: 1px solid rgba(244, 244, 241, 0.12);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(244, 244, 241, 0.5);
  text-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────────────────
   19. SECURITY PILLARS — light proof band (paired with #18 above)
   ────────────────────────────────────────────────────────────────────
   Concrete 3-card proof of the security promise made in the dark band.
   WPA3, Segmentation par usage, Monitoring 24/7. Each card has an inline
   SVG icon, a numbered eyebrow, a title, and the technical detail.
────────────────────────────────────────────────────────────────────── */
.security-pillars {
  background: var(--paper);
  padding: clamp(80px, 8vw, 128px) 0;
}
.security-pillars__head {
  max-width: var(--container-max);
  margin: 0 auto clamp(40px, 5vw, 64px);
  padding: 0 var(--container-pad);
}
.security-pillars__head .eyebrow {
  color: var(--brand-blue);
  margin-bottom: 12px;
}
.security-pillars__head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 800px;
  margin-bottom: 16px;
}
.security-pillars__head p {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 680px;
}
.security-pillars__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
@media (max-width: 880px) {
  .security-pillars__grid { grid-template-columns: 1fr; }
}
.security-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.5vw, 36px);
  transition: border-color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft);
}
.security-card:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.security-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(58, 95, 168, 0.08);
  color: var(--brand-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.security-card__icon svg { width: 22px; height: 22px; }
.security-card__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-orange);
  display: block;
  margin-bottom: 10px;
}
.security-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 12px;
  text-wrap: balance;
}
.security-card p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.security-card__spec {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  display: block;
}
.security-card__spec strong { color: var(--brand-blue); font-weight: 500; }

/* ──────────────────────────────────────────────────────────────────────
   20. AMBIENT ENHANCEMENTS — promoted from /previews/landing-v3-ambient
   ────────────────────────────────────────────────────────────────────
   Per bbrs-frontend-designer Combo 1+3 + Move A. 4 effects, 0KB extra
   shared JS overhead (counter loop modifies existing observer, ticker
   adds ~30 lines). All respect prefers-reduced-motion. No Lighthouse
   regression measured at promotion time.
   ────────────────────────────────────────────────────────────────────
   20.1 Whisper mesh ambient on paper sections
   20.2 Signal pulse on .mega-stat__num
   20.3 Live data ticker (mono rotating credibility line)
────────────────────────────────────────────────────────────────────── */

/* ── 20.1 Whisper mesh ambient ────────────────────────────────────── */
.mega-stats,
.services,
.trust-marquee,
.bb-section--paper-2,
.security-pillars {
  position: relative;
  background-image:
    radial-gradient(800px circle at 78% 18%, rgba(237, 125, 49, 0.038), transparent 55%),
    radial-gradient(900px circle at 12% 88%, rgba(58, 95, 168, 0.045), transparent 60%),
    radial-gradient(1200px circle at 96% 96%, rgba(244, 235, 220, 0.45), transparent 50%);
  background-size: 130% 130%, 140% 140%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 50% 0%;
  animation: ambient-drift 40s ease-in-out infinite;
}
@keyframes ambient-drift {
  0%, 100% { background-position: 0% 0%, 100% 100%, 50% 0%; }
  50%      { background-position: 8% 12%, 92% 88%, 55% -4%; }
}
/* Preserve solid background-color on top of ambient mesh */
.mega-stats,
.services,
.trust-marquee,
.security-pillars { background-color: var(--paper); }
.bb-section--paper-2 { background-color: var(--paper-2); }

/* ── 20.2 Signal pulse on mega-stat numbers ──────────────────────── */
.mega-stat { position: relative; }
.mega-stat .mega-stat__num { position: relative; }
.mega-stat .mega-stat__num::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(237, 125, 49, 0.28);
  animation: pulse-signal 5s ease-out infinite;
  z-index: -1;
}
.mega-stat:nth-child(1) .mega-stat__num::after { animation-delay: 0s; }
.mega-stat:nth-child(2) .mega-stat__num::after { animation-delay: 1.2s; }
.mega-stat:nth-child(3) .mega-stat__num::after { animation-delay: 2.4s; }
.mega-stat:nth-child(4) .mega-stat__num::after { animation-delay: 3.6s; }
@keyframes pulse-signal {
  0%   { box-shadow: 0 0 0 0 rgba(237, 125, 49, 0.32); opacity: 1; }
  80%  { box-shadow: 0 0 0 56px rgba(237, 125, 49, 0); opacity: 0; }
  100% { box-shadow: 0 0 0 56px rgba(237, 125, 49, 0); opacity: 0; }
}

/* ── 20.3 Live data ticker — rotating verified facts ─────────────── */
.live-ticker {
  background: var(--paper);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 14px var(--container-pad);
  text-align: center;
  overflow: hidden;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.live-ticker__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-orange);
  margin-right: 12px;
  flex-shrink: 0;
  animation: ticker-dot 2.2s infinite ease-in-out;
}
@keyframes ticker-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.live-ticker__line {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
  display: inline-block;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-ticker__line.is-changing { opacity: 0; transform: translateY(-6px); }
.live-ticker__line strong { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
  .live-ticker__line { font-size: 0.62rem; letter-spacing: 0.08em; white-space: normal; }
}

/* ── 20.4 reduce-motion fallbacks for all ambient effects ────────── */
@media (prefers-reduced-motion: reduce) {
  .mega-stats, .services, .trust-marquee, .bb-section--paper-2, .security-pillars {
    animation: none !important;
  }
  .mega-stat .mega-stat__num::after { animation: none !important; box-shadow: none; }
  .live-ticker__dot { animation: none !important; }
  .live-ticker__line { transition: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   22. TIER 3 CINEMATIC — promoted from /previews/landing-tier3.html
   ────────────────────────────────────────────────────────────────────
   7 patterns + page intro + custom cursor. ~6KB of CSS, paired with
   ~6KB of JS in site.js (excl. CDN libs Lenis/GSAP/ScrollTrigger).
   IMPORTANT — cases section (.case, .cases__slide, .cases__header)
   is EXPLICITLY excluded from staged reveals and 3D tilt per user
   request (Stade de France + GITEX cards stay as they were).
   ────────────────────────────────────────────────────────────────────
   22.1 Lenis smooth scroll setup (CSS overrides)
   22.2 Sticky nav morph on .is-scrolled
   22.3 Per-section background tint shift via body[data-section]
   22.4 Magnetic CTAs + 3D tilt cards (transform hooks)
   22.5 GSAP staged reveals — initial hidden states
   22.6 Page intro overlay
   22.7 Custom cursor ring
────────────────────────────────────────────────────────────────────── */

/* ── 22.1 Lenis smooth scroll setup ──────────────────────────────── */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── 22.2 Sticky nav morph ───────────────────────────────────────── */
.bb-nav {
  transition:
    background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-nav.is-scrolled {
  background: rgba(251, 251, 250, 0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 var(--hairline), 0 4px 20px rgba(26, 31, 44, 0.06);
}
.bb-nav.is-scrolled .bb-nav__logo {
  transform: scale(0.92);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-nav.is-scrolled .bb-nav__brand-sub {
  opacity: 0;
  transition: opacity 0.3s;
}

/* ── MOBILE FIX — release the fixed drawer from the nav's containing block ──
   .bb-nav uses backdrop-filter (frosted glass). A non-none backdrop-filter
   makes an element the containing block for its position:fixed descendants,
   which trapped the mobile drawer (.bb-nav__links, position:fixed; inset:0)
   inside the ~77px nav box instead of the viewport — so tapping the hamburger
   opened a stunted, mispositioned panel that read as "menu not working".
   Drop backdrop-filter at the mobile breakpoint (solid bg instead) so the
   drawer resolves against the viewport. Must cover .is-scrolled too, or
   scrolling re-establishes the trap. Placed after §22.2 to win source order. */
@media (max-width: 880px) {
  .bb-nav,
  .bb-nav.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--paper);
  }
}

/* ── 22.3 Per-section bg tint shift ──────────────────────────────── */
body {
  transition: background-color 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
body[data-section="hero"]     { background-color: var(--surface-deep); }
body[data-section="proof"]    { background-color: var(--paper-2); }
body[data-section="stats"]    { background-color: var(--paper); }
body[data-section="ticker"]   { background-color: var(--paper); }
body[data-section="garantie"] { background-color: var(--surface-deep); }
body[data-section="security"] { background-color: var(--paper); }
body[data-section="services"] { background-color: var(--paper); }
body[data-section="cases"]    { background-color: var(--surface-deep); }
body[data-section="marquee"]  { background-color: var(--paper); }
body[data-section="about"]    { background-color: var(--paper-2); }
body[data-section="cta"]      { background-color: var(--surface-deep); }

/* ── 22.4 Magnetic CTAs + 3D tilt cards ──────────────────────────── */
[data-magnetic] {
  display: inline-flex;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-tilt] {
  transform-style: preserve-3d;
  transform: perspective(1500px);
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}
[data-tilt]:hover {
  box-shadow: 0 24px 80px -16px rgba(26, 31, 44, 0.18);
}

/* ── 22.5 GSAP staged reveals — initial hidden state ──────────────── */
[data-stage-reveal] {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}
/* If GSAP fails to load, content stays visible (graceful fallback) */
html:not(.gsap-ready) [data-stage-reveal] { opacity: 1; transform: none; }

/* ── 22.6 Page intro overlay ─────────────────────────────────────── */
.t3-intro {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--surface-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.t3-intro__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 30px);
  opacity: 0;
  transform: translateY(20px);
}
.t3-intro__logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2.2vw, 26px) clamp(22px, 3vw, 36px);
  background: var(--paper);
  border-radius: 18px;
  box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.55);
}
.t3-intro__logo {
  height: clamp(46px, 7vw, 78px);
  width: auto;
  display: block;
}
.t3-intro__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 1rem + 3vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink-on-dark);
}
.t3-intro__mark em {
  color: var(--brand-orange);
  font-style: normal;
}

/* ── 22.7 Custom cursor ring ──────────────────────────────────────── */
.t3-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--brand-orange);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition:
    width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s,
    opacity 0.25s;
  will-change: transform;
}
.t3-cursor.is-hover { width: 56px; height: 56px; }
.t3-cursor.is-pressed { width: 20px; height: 20px; }
@media (max-width: 880px), (hover: none) {
  .t3-cursor { display: none; }
}

/* ── 22.8 reduce-motion fallbacks for all Tier 3 ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bb-nav { transition: none !important; }
  body { transition: none !important; }
  [data-magnetic], [data-tilt] { transition: none !important; transform: none !important; }
  [data-stage-reveal] { opacity: 1 !important; transform: none !important; }
  .t3-intro { display: none !important; }
  .t3-cursor { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   PRE-GO-LIVE — Mus client feedback (2026-06-28)
   ════════════════════════════════════════════════════════════════════ */

/* (5)(6) Sector reference chips — text-based reference list for named
   entities that have no logo asset. Mirrors the .sector-logos card
   aesthetic (surface + hairline + hover-lift) but sizes to the text. */
.sector-refs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.sector-refs li {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  transition: border-color var(--duration-base) var(--ease-out-soft),
              transform var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft);
}
.sector-refs li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-blue);
  margin-right: var(--space-3);
  flex-shrink: 0;
}
.sector-refs li:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 520px) {
  .sector-refs { gap: var(--space-2); }
  .sector-refs li {
    padding: var(--space-3) var(--space-4);
    font-size: 0.95rem;
    min-height: 52px;
  }
}

/* (3) About-us hero without the team photo — single-column, text-only.
   Keeps the headline from stretching the full bleed width. */
.hero--services__grid--solo { grid-template-columns: 1fr; }
.hero--services__grid--solo .hero--services__copy { max-width: 760px; }

/* ── 16. ODOO-RISK markers in HTML are reminders — no CSS needed ─ */

/* ── Bilingual FR/EN live since 2026-07-15. The language toggle (.bb-nav__lang)
   and the EN footer link are now shown; the earlier FR-only hide rules and the
   /en/* → FR redirects were both removed at EN go-live. ────────────────────── */