/* =====================================================================
   ACCENDO — marketing site stylesheet
   Single source of truth for design tokens.
   Full spec: workbench/company-website-redesign/project/DESIGN-SYSTEM.md

   SECTION INDEX
     1.  :root tokens — spectrum, surfaces, type, radius, layout
     2.  Base reset · serif helpers · eyebrow
     3.  Layout helpers (.wrap .section .grid-*)
     4.  Buttons (.btn-acc) · .link-arrow
     5.  Bootstrap navbar overrides — acc-navbar + topbar
     6.  Hero (home) + living-system stage
     7.  Hero interior (interior pages)
     8.  Logo strip / clients carousel
     9.  Pillars · positioning band · metrics
    10.  Phase / methodology cards
    11.  Split section (alternating image + text)
    12.  Service card grid (numbered / icon cards)
    13.  Comparison block (Despliegue Acotado vs Piloto)
    14.  FAQ accordion
    15.  Perspectives bridge
    16.  Trackvy promo block
    17.  Start-a-project CTA
    18.  Diagnostic CTA
    19.  PVV instrument (hero + static)
    20.  How-we-work timeline
    21.  ROI exhibit
    22.  Case study components (hero, card, detail)
    23.  Contact page
    24.  Thank-you page
    25.  Error page
    26.  About / who section
    27.  Data intelligence / AI page
    28.  CTA final block
    29.  Footer (dark navy)
    30.  WhatsApp float button
    31.  Breadcrumb
    32.  Reveal on scroll
    33.  Responsive breakpoints
   ===================================================================== */

/* =====================================================================
   1. :ROOT TOKENS
   ===================================================================== */
:root {
  --indigo:       #393664;
  --indigo-soft:  #5D5B80;
  --navy:         #15243C;
  --navy-2:       #102036;
  --navy-3:       #0B1726;
  --navy-3-rgb:   11,23,38;   /* --navy-3 as an RGB triplet, for alpha tints */
  --blue-deep:    #2C5A82;
  --blue:         #498DBE;
  --blue-bright:  #6EA4CB;
  --blue-soft:    #92BBD8;
  --teal:         #10658C;
  --teal-deep:    #005B85;
  --teal-mid:     #257396;
  --sage:         #85ADA3;
  --sage-soft:    #B6CEC8;
  --emerald:      #6EA4CB;
  --emerald-dp:   #2C5A82;
  --ink:          #161A22;
  --body:         #4F555E;
  --muted:        #878C94;
  --line:         #E6E8EC;
  --line-soft:    #EFF1F4;
  --paper:        #F7F8FB;
  --canvas:       #F2F5F9;
  --navy-tint:    #E7EDF4;
  --green-tint:   #E8EFF6;
  --white:        #fff;

  --font-sans:    "Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-serif:   "Newsreader",Georgia,"Times New Roman",serif;
  --font-mono:    "Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --radius-btn:   12px;
  --radius-card:  16px;
  --maxw:         1290px;
  --nav-h:        72px;
  --topbar-h:     36px;

  /* Bootstrap variable overrides */
  --bs-body-font-family:  var(--font-sans);
  --bs-body-color:        var(--body);
  --bs-primary:           var(--blue);
  --bs-primary-rgb:       73,141,190;
  --bs-link-color:        var(--blue-deep);
  --bs-link-hover-color:  var(--navy);

  /* Motion tokens */
  --ease:  var(--ease);
  --dur-1: .25s;
  --dur-2: .45s;
  --dur-3: .7s;

  /* Wave backgrounds (SVG data-URIs) */
  /* 3-path variant — opacities .18 / .12 / .12 */
  --wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='240' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232C5A82'%3E%3Cpath d='M0 120 C 240 50 480 190 720 120 S 1200 50 1440 120' stroke-width='1.4' opacity='0.18'/%3E%3Cpath d='M0 152 C 240 82 480 222 720 152 S 1200 82 1440 152' stroke-width='1.2' opacity='0.12'/%3E%3Cpath d='M0 88 C 240 18 480 158 720 88 S 1200 18 1440 88' stroke-width='1.2' opacity='0.12'/%3E%3C/g%3E%3C/svg%3E");
  /* 2-path variant — opacities .18 / .12 */
  --wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='240' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232C5A82'%3E%3Cpath d='M0 120 C 240 50 480 190 720 120 S 1200 50 1440 120' stroke-width='1.4' opacity='0.18'/%3E%3Cpath d='M0 152 C 240 82 480 222 720 152 S 1200 82 1440 152' stroke-width='1.2' opacity='0.12'/%3E%3C/g%3E%3C/svg%3E");
}

/* =====================================================================
   2. BASE RESET + TYPOGRAPHY
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--body);
  background: var(--white);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .75rem;
}

a { color: var(--blue-deep); text-decoration: none; }
a:hover { color: var(--navy); }

img { max-width: 100%; display: block; }

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

:is(a,button,[tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -.01em;
}

/* Unified hero headline: Bootstrap display classes inherited from the old
   theme render Geist 300 at 56-64px; every page-level headline uses the
   serif hero scale from the design system instead. */
h1.display-3, h1.display-4 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.1vw, 3.8rem);
  line-height: 1.07;
  letter-spacing: -.02em;
}
h1.display-3 em, h1.display-4 em { font-style: italic; font-weight: 500; }

/* Keep reading measures tight on Bootstrap .lead paragraphs */
main .lead { max-width: 62ch; }
.acc-center .lead, .text-center .lead { margin-inline: auto; }

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
/* The leading dot was removed from eyebrows site-wide (June 2026). */

/* =====================================================================
   3. LAYOUT HELPERS
   ===================================================================== */
.acc-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 2rem;
}

.acc-section {
  padding-block: clamp(4rem, 8vw, 7.5rem);
}
.acc-section--paper  { background: var(--paper); }
.acc-section--canvas { background: var(--canvas); }
.acc-section--white  { background: var(--white); }
/* White body site-wide: only index and trackvy (main.allow-tint) keep the
   paper/canvas section tints. Everywhere else the body reads clean white. */
main:not(.allow-tint) .acc-section--paper,
main:not(.allow-tint) .acc-section--canvas,
main:not(.allow-tint) .trackvy-promo--canvas { background: var(--white); }
.acc-section--tight  { padding-block: clamp(2.5rem, 5vw, 4rem); }
.acc-section--navy   { background: var(--navy); color: rgba(255,255,255,.78); }
.acc-section--navy h1, .acc-section--navy h2, .acc-section--navy h3, .acc-section--navy h4 { color: #fff; }

.acc-center { text-align: center; }
.acc-measure    { max-width: 680px; }
.acc-measure-lg { max-width: 820px; }
/* when a measure block is also centered, center the block itself (not just its text) */
.acc-center.acc-measure, .acc-center.acc-measure-lg { margin-inline: auto; }

.kicker-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.kicker-row .kicker-line {
  height: 1px; flex: 1;
  background: var(--line);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head.acc-center { margin-inline: auto; }

/* Section titles are Geist: the serif is reserved for the hero, page-level
   headlines and key figures. Weight and tracking carry the hierarchy. */
.section-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.18;
  letter-spacing: -.012em;
  color: var(--ink);
  max-width: 34ch;
  text-wrap: balance;
}
.section-title em { font-style: normal; color: var(--blue-deep); }
.acc-center .section-title { margin-inline: auto; }

/* Page-level headlines keep the serif voice */
h1.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.1vw, 3.4rem);
  line-height: 1.07;
  letter-spacing: -.02em;
}

.section-sub {
  margin-top: 1.1rem;
  font-size: 1.125rem;
  color: var(--body);
  max-width: 60ch;
}
.section-head.acc-center .section-sub { margin-inline: auto; }

/* CSS grid helpers (supplement Bootstrap grid) */
.acc-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 2.2rem; }
.acc-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.2rem; }
.acc-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.6rem; }
.acc-grid-2--vcenter { align-items: center; gap: clamp(2.5rem,5vw,5rem); }

/* =====================================================================
   4. BUTTONS
   ===================================================================== */
/* in-page anchor jumps (e.g. "Conocer más" -> #que-hacemos) clear the sticky nav */
[id] { scroll-margin-top: calc(var(--nav-h, 72px) + var(--topbar-h, 0px) + 1rem); }

.btn-acc {
  --bg: var(--navy); --fg: #fff; --bd: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .005em;
  line-height: 1;
  padding: .92rem 1.5rem;
  border-radius: var(--radius-btn);
  background: var(--bg);
  color: var(--fg);
  border: 1.5px solid var(--bd);
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
  white-space: nowrap;
  text-decoration: none;
}
.btn-acc i { font-size: 1.15em; transition: transform .3s var(--ease); }
.btn-acc:hover { transform: translateY(-1px); color: var(--fg); }
.btn-acc:hover i { transform: translateX(5px); }
.btn-acc--primary:hover { --bg: var(--blue-deep); --bd: var(--blue-deep); }
.btn-acc--ghost { --bg: transparent; --fg: var(--navy); --bd: var(--line); }
.btn-acc--ghost:hover { --bd: var(--navy); }
.btn-acc--light { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.btn-acc--light:hover { --bg: var(--green-tint); --bd: var(--green-tint); }
.btn-acc--onnavy-ghost { --bg: transparent; --fg: #fff; --bd: rgba(255,255,255,.32); }
.btn-acc--onnavy-ghost:hover { --bd: rgba(255,255,255,.7); }
/* solid secondary (e.g. /rfid "Conocer más") — brand blue, distinct from the navy primary */
.btn-acc--blue { --bg: var(--blue-deep); --fg: #fff; --bd: var(--blue-deep); }
.btn-acc--blue:hover { --bg: var(--navy); --bd: var(--navy); }
/* solid WhatsApp — WhatsApp green */
.btn-acc--whatsapp { --bg: #25D366; --fg: #fff; --bd: #25D366; }
.btn-acc--whatsapp:hover { --bg: #1EB955; --bd: #1EB955; }
.btn-acc--lg { padding: 1.05rem 1.85rem; font-size: 1rem; }
.btn-acc--sm { padding: .6rem 1.1rem; font-size: .875rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--blue-deep);
  font-size: .95rem;
  text-decoration: none;
}
.link-arrow i { transition: transform .3s var(--ease); }
.link-arrow:hover i { transform: translateX(4px); }
.link-arrow:hover { color: var(--navy); }

/* =====================================================================
   5. BOOTSTRAP NAVBAR OVERRIDES — ACC-NAVBAR + TOPBAR
   ===================================================================== */

/* --- Utility top bar --- */
.acc-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1031;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  /* reappearing is delayed so the white-on-dark text never bleeds over the
     still-solid navbar while both transition near the top of the page */
  transition: transform .25s ease .2s, background .22s;
  background: transparent;
}
.acc-topbar.is-hidden { transform: translateY(-100%); transition-delay: 0s; }
.acc-topbar .acc-topbar-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 2rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.1rem;
}
.acc-topbar-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: rgba(255,255,255,.82);
  transition: color .2s;
  text-decoration: none;
}
.acc-topbar-link i { font-size: .95rem; opacity: .8; }
.acc-topbar-link:hover { color: #fff; }
.acc-topbar-sep { width: 1px; height: 13px; background: rgba(255,255,255,.16); }
.acc-lang { display: inline-flex; align-items: center; gap: .2rem; }
.acc-lang > i { font-size: .9rem; color: rgba(255,255,255,.6); margin-right: .2rem; }
.acc-lang-btn {
  background: none; border: 0;
  font-family: var(--font-sans);
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  padding: .15rem .35rem;
  border-radius: 5px;
  transition: color .2s;
}
.acc-lang-btn.on { color: #fff; font-weight: 600; }
.acc-lang-btn:hover { color: #fff; }
.acc-lang-div { color: rgba(255,255,255,.22); font-size: .72rem; }

/* Solid-state topbar (over light sections) */
.acc-topbar.is-onlight .acc-topbar-link { color: var(--body); }
.acc-topbar.is-onlight .acc-topbar-link:hover { color: var(--navy); }
.acc-topbar.is-onlight .acc-topbar-sep { background: var(--line); }
.acc-topbar.is-onlight .acc-lang > i,
.acc-topbar.is-onlight .acc-lang-btn { color: var(--muted); }
.acc-topbar.is-onlight .acc-lang-btn.on,
.acc-topbar.is-onlight .acc-lang-btn:hover { color: var(--navy); }

/* Filled state — set by accendo-nav.js while a dropdown is open, so the
   supplementary top bar joins the navbar as one unified light header. */
.acc-topbar.is-filled {
  background: var(--white);
}
.acc-topbar.is-filled .acc-topbar-link { color: var(--body); }
.acc-topbar.is-filled .acc-topbar-link:hover { color: var(--navy); }
.acc-topbar.is-filled .acc-topbar-sep { background: var(--line); }
.acc-topbar.is-filled .acc-lang > i,
.acc-topbar.is-filled .acc-lang-btn { color: var(--muted); }
.acc-topbar.is-filled .acc-lang-btn.on,
.acc-topbar.is-filled .acc-lang-btn:hover { color: var(--navy); }
.acc-topbar.is-filled .acc-lang-div { color: var(--line); }

/* --- Main navbar --- */
.acc-navbar {
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0;
  z-index: 1030;
  height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .22s, border-color .22s, box-shadow .22s, top .35s;
  padding: 0;
}
/* Nav inner shares the page content container (.acc-wrap) so the logo aligns
   with page content and the bar never drops to Bootstrap's narrow widths. */
.acc-navbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: inherit;
}
.acc-navbar .navbar-brand {
  padding: 0;
  margin-right: 1.5rem;
  display: flex;
  align-items: center;
  flex-shrink: 0;            /* never let the logo squish when the nav is crowded */
}

/* Logo swap */
.acc-logo-dark { display: none; }
.acc-logo-white { display: block; }
.acc-logo-white,
.acc-logo-dark { height: 26px; width: auto; flex: none; }

.acc-navbar.is-solid .acc-logo-white,
.acc-navbar.is-onlight .acc-logo-white,
.acc-navbar.menu-open .acc-logo-white { display: none; }
.acc-navbar.is-solid .acc-logo-dark,
.acc-navbar.is-onlight .acc-logo-dark,
.acc-navbar.menu-open .acc-logo-dark  { display: block; }

/* Nav links — transparent state */
.acc-navbar .navbar-nav .nav-link {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  color: rgba(255,255,255,.86);
  padding: .4rem .7rem;
  transition: color .2s;
  white-space: nowrap;
}
.acc-navbar .navbar-nav .nav-link:hover,
.acc-navbar .navbar-nav .nav-link.show { color: #fff; }

/* Nav links — solid / on-light / hover-open state (dark text) */
.acc-navbar.is-solid .navbar-nav .nav-link,
.acc-navbar.is-onlight .navbar-nav .nav-link,
.acc-navbar.menu-open .navbar-nav .nav-link { color: var(--body); }
.acc-navbar.is-solid .navbar-nav .nav-link:hover,
.acc-navbar.is-solid .navbar-nav .nav-link.show,
.acc-navbar.is-onlight .navbar-nav .nav-link:hover,
.acc-navbar.is-onlight .navbar-nav .nav-link.show,
.acc-navbar.menu-open .navbar-nav .nav-link:hover,
.acc-navbar.menu-open .navbar-nav .nav-link.show { color: var(--navy); }

/* Frosted-white appearance: scrolled (is-solid) OR a dropdown is open (menu-open) */
.acc-navbar.is-solid,
.acc-navbar.menu-open {
  background: rgba(255,255,255,.985);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(14,42,69,.04);
}
.acc-navbar.is-solid { top: 0; }
/* On hover-open the bar frosts white with a square top so the topbar +
   navbar + rounded-bottom dropdown read as one unified light header. */
.acc-navbar.menu-open {
  border-radius: 0;
  border-bottom-color: transparent;
  box-shadow: none;
  background: var(--white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Mobile toggler */
.acc-nav-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,.9);
  font-size: 1.6rem;
  padding: .25rem .5rem;
  display: flex;
  align-items: center;
  transition: color .2s;
}
.acc-navbar.is-solid .acc-nav-toggle,
.acc-navbar.is-onlight .acc-nav-toggle,
.acc-navbar.menu-open .acc-nav-toggle { color: var(--navy); }

/* --- Dropdown menus (mega + narrow) ---
   Frosted glass, echoing the navbar's translucent blur. */
.acc-navbar .dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 34px 80px -34px rgba(11,23,38,.45);
  padding: 1rem;
  margin-top: .5rem;
  background: var(--white);
}

/* Desktop: fade the panel in/out so it stays in sync with the navbar/topbar
   frosting (both use the same .22s) instead of vanishing instantly. */
@media (min-width: 1200px) {
  .acc-navbar .navbar-nav .dropdown-menu {
    display: grid;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
  }
  .acc-navbar .navbar-nav .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .22s ease, visibility 0s;
  }
}
@keyframes accDropIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mega menu (wide — 2 or 3 column). On desktop it spans the full page width
   as a panel attached to the navbar bottom; columns align to the content
   container so everything breathes. */
.acc-mega-menu {
  min-width: 760px;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1.75rem;
  padding: 1.6rem 1.8rem;
}
@media (min-width: 1200px) {
  .acc-navbar .nav-item.dropdown:has(.acc-mega-menu) { position: static; }
  .acc-navbar .acc-mega-menu {
    --mega-pad-x: max(2rem, calc((100vw - var(--maxw)) / 2 + 2rem));
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    border: 0;
    border-top: 1px solid var(--line-soft);
    border-radius: 0 0 22px 22px;
    /* deep, layered shadow so the panel drops with depth from under the header */
    box-shadow: 0 34px 60px -24px rgba(11,23,38,.34), 0 14px 30px -18px rgba(11,23,38,.30);
    padding-block: 2.6rem 2.9rem;
    padding-inline: var(--mega-pad-x);
    gap: 0 clamp(2rem, 4vw, 4.5rem);
  }

  /* Feature variant — main columns on the left, a paper "Destacado" block on
     the right. All four mega menus keep their content aligned to the centred
     container (the white background still runs edge to edge). */
  .acc-navbar .acc-mega-menu--feature {
    grid-template-columns: 1fr minmax(280px, 360px);
    gap: 0;
    overflow: hidden;
  }
  .acc-mega-menu--feature .acc-mega-main { padding-right: clamp(2rem, 4vw, 4rem); }
  .acc-mega-menu--feature .acc-mega-promos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .acc-mega-aside {
    align-self: stretch;
    /* fill the panel height; no horizontal bleed so the right edge lands on
       the container edge, level with the Portafolio/Soluciones columns */
    margin: -2.6rem 0 -2.9rem;
    padding: 2.4rem clamp(1.5rem, 2vw, 2rem) 2.9rem clamp(1.75rem, 2.5vw, 2.25rem);
    background: rgba(244,246,250,.97);
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
  }
}
.acc-mega-aside-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.acc-mega-feature-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.acc-mega-feature-card .acc-mega-feature-eyebrow {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: .5rem;
}
.acc-mega-feature-card .acc-mega-feature-title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: .6rem;
}
.acc-mega-feature-card .acc-mega-feature-text {
  font-size: .925rem;
  line-height: 1.6;
  color: var(--body);
  margin-bottom: 1.1rem;
}
.acc-mega-feature-card .link-arrow { font-size: .925rem; margin-top: auto; }

/* Modern accents inside the featured summary */
.acc-mega-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.2rem;
}
.acc-mega-feature-tags span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--blue-deep);
  background: rgba(73,141,190,.1);
  border: 1px solid rgba(73,141,190,.18);
  border-radius: 100px;
  padding: .26rem .7rem;
}
.acc-mega-feature-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.3rem;
}
.acc-mega-feature-stats span { font-size: .66rem; color: var(--muted); line-height: 1.25; }
.acc-mega-feature-stats b {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--blue-deep);
  letter-spacing: -.01em;
  margin-bottom: .15rem;
}
/* Show via Bootstrap .show class (click) or hover-hold JS */
.dropdown-menu.show.acc-mega-menu { display: grid; }
.acc-mega-menu--2col {
  grid-template-columns: repeat(2, 1fr);
  min-width: 480px;
}

.acc-mega-col h6 {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .6rem;
  padding: 0 .8rem .6rem;
  border-bottom: 1px solid var(--line-soft);
}

/* Narrow menu (promo-row style) */
.acc-narrow-menu {
  min-width: 360px;
  gap: .15rem;
  padding: .85rem;
}
.dropdown-menu.show.acc-narrow-menu { display: grid; }

/* Promo row (icon + title + description) */
.acc-nav-promo {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .7rem .75rem;
  border-radius: 12px;
  transition: background .18s;
  text-decoration: none;
}
.acc-nav-promo:hover { background: var(--canvas); }
.acc-nav-promo .acc-nav-promo-ic {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--navy-tint);
  color: var(--blue-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex: none;
  margin-top: .1rem;
}
.acc-nav-promo .acc-nav-promo-tx b {
  display: block;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: .2rem;
}
.acc-nav-promo .acc-nav-promo-tx span {
  display: block;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.5;
}

/* Dropdowns stay white in every navbar state (white-on-navy is the standard);
   depth comes from a deep layered shadow under the header seam. */

/* Simple dropdown items */
.acc-dropdown-header {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .6rem .75rem .3rem;
}
.acc-dropdown-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .975rem;
  color: var(--body);
  font-weight: 500;
  padding: .55rem .75rem;
  border-radius: 8px;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.acc-dropdown-item i { font-size: 1.2rem; color: var(--blue-deep); flex: none; }
.acc-dropdown-item:hover { background: var(--canvas); color: var(--navy); }
.acc-dropdown-divider {
  height: 1px;
  background: var(--line-soft);
  margin: .5rem 0;
}

/* CTA buttons in nav */
.acc-nav-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  padding: .55rem 1.1rem;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.34);
  color: #fff;
  transition: border-color .25s, background .25s, color .25s;
  white-space: nowrap;
  text-decoration: none;
}
.acc-nav-cta:hover { border-color: #fff; color: #fff; }
.acc-nav-cta--solid { background: #fff; color: var(--navy); border-color: #fff; }
.acc-nav-cta--solid:hover { background: var(--green-tint); border-color: var(--green-tint); color: var(--navy); }
.acc-navbar.is-solid .acc-nav-cta,
.acc-navbar.is-onlight .acc-nav-cta,
.acc-navbar.menu-open .acc-nav-cta { border-color: var(--line); color: var(--navy); }
.acc-navbar.is-solid .acc-nav-cta:hover,
.acc-navbar.is-onlight .acc-nav-cta:hover,
.acc-navbar.menu-open .acc-nav-cta:hover { border-color: var(--navy); color: var(--navy); }
.acc-navbar.is-solid .acc-nav-cta--solid,
.acc-navbar.is-onlight .acc-nav-cta--solid,
.acc-navbar.menu-open .acc-nav-cta--solid { background: var(--navy); color: #fff; border-color: var(--navy); }
.acc-navbar.is-solid .acc-nav-cta--solid:hover,
.acc-navbar.is-onlight .acc-nav-cta--solid:hover,
.acc-navbar.menu-open .acc-nav-cta--solid:hover { background: var(--blue-deep); border-color: var(--blue-deep); }

/* Desktop hover-open is managed by accendo-nav.js (hover-hold with a close
   grace delay so the pointer can travel into the panel). */

/* Pages without a dark hero (nav solid from load, set by accendo-nav.js):
   push content below the fixed topbar + navbar */
html.nav-onlight main { padding-top: calc(var(--nav-h) + var(--topbar-h)); }

/* Mobile nav */
@media (max-width: 1199.98px) {
  .acc-topbar { display: none; }
  html.nav-onlight main { padding-top: var(--nav-h); }
  .acc-navbar { top: 0; }
  /* backdrop-filter makes the bar a containing block for the fixed mobile
     menu sheet, trapping it inside the 76px bar. Drop it on mobile so the
     sheet anchors to the viewport (top:nav-h / bottom:0) and fills the screen. */
  .acc-navbar.is-solid,
  .acc-navbar.menu-open {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Sheet sized to its content (not full-height): Bootstrap animates the
     collapse to the content height, so the open state matches the animation
     target — no end-of-transition snap to a full-screen white panel. */
  .acc-navbar .navbar-collapse {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    max-height: calc(100dvh - var(--nav-h));
    background: var(--white);
    padding: .5rem 1.5rem 2rem;
    overflow-y: auto;
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 24px 40px -28px rgba(11,23,38,.4);
  }
  .acc-navbar .navbar-nav { gap: 0; }
  .acc-navbar .navbar-nav .nav-item { border-bottom: 1px solid var(--line-soft); }
  /* nav links stay dark on the white mobile sheet in every state (the
     transparent-hero white-on-hover rule must not apply here) */
  .acc-navbar .navbar-nav .nav-link,
  .acc-navbar .navbar-nav .nav-link:hover,
  .acc-navbar .navbar-nav .nav-link:focus,
  .acc-navbar .navbar-nav .nav-link.show { color: var(--ink); padding: 1rem .25rem; font-size: 1.05rem; }
  .acc-navbar .navbar-nav .nav-link.show { color: var(--navy); }
  /* dropdowns collapse into accordions: hidden until their toggle is tapped */
  .acc-navbar .dropdown-menu {
    position: static; border: 0; box-shadow: none; background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0 0 .5rem 1rem; border-radius: 0;
    display: none; opacity: 1; visibility: visible; pointer-events: auto;
    min-width: unset; grid-template-columns: 1fr;
  }
  .acc-navbar .dropdown-menu.show { display: block; }
  .acc-mega-menu, .acc-mega-menu--feature, .acc-mega-promos {
    grid-template-columns: 1fr; min-width: unset; padding: .25rem 0; gap: 0;
  }
  /* featured side block stacks below on mobile, no edge bleed */
  .acc-mega-aside {
    margin: .5rem 0 0; padding: .75rem 0 0; border-left: 0;
    border-top: 1px solid var(--line-soft); background: transparent;
  }
  .acc-nav-cta { display: none; }
  .acc-mobile-ctas { display: flex; gap: .75rem; padding: 1.25rem 0 .5rem; }
  .acc-mobile-ctas .btn-acc { flex: 1; justify-content: center; }
  .acc-mobile-lang { display: flex; align-items: center; gap: .4rem; margin-top: .5rem; padding: 1rem .25rem .25rem; border-top: 1px solid var(--line-soft); }
  .acc-mobile-lang > i { color: var(--muted); font-size: 1rem; }
  .acc-mobile-lang .acc-lang-btn { color: var(--muted); font-size: .95rem; }
  .acc-mobile-lang .acc-lang-btn.on,
  .acc-mobile-lang .acc-lang-btn:hover { color: var(--navy); }
  .acc-mobile-lang .acc-lang-div { color: var(--line); }
}

/* =====================================================================
   6. HERO (home page)
   ===================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + var(--topbar-h) + 2rem);
  padding-bottom: 4rem;
  --h-ink: #fff;
  --h-soft: rgba(255,255,255,.74);
  --h-faint: rgba(255,255,255,.5);
  --h-panel: rgba(255,255,255,.045);
  --h-panel-bd: rgba(255,255,255,.12);
  --h-antes: #6E7E8E;
  --h-track: rgba(255,255,255,.07);
  background:
    radial-gradient(120% 90% at 80% 4%, rgba(73,141,190,.34) 0%, rgba(21,36,60,0) 56%),
    radial-gradient(95% 85% at 6% 100%, rgba(57,54,100,.44) 0%, rgba(21,36,60,0) 55%),
    linear-gradient(157deg, #1B2B48 0%, #122237 52%, #0B1726 100%);
}
.hero canvas.hero-field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
.hero .acc-wrap { position: relative; z-index: 2; width: 100%; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 3rem;
  align-items: center;
}
.hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.1vw, 3.8rem);
  line-height: 1.07;
  letter-spacing: -.02em;
  color: var(--h-ink);
  margin-bottom: 1.7rem;
}
.hero h1 em { font-style: italic; font-weight: 600; color: var(--blue-bright); }
.hero-lead {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--h-soft);
  max-width: 30ch;
  margin-bottom: 1.5rem;
}
.hero-flow {
  color: var(--h-soft);
  gap: .65rem;
  margin: 0 0 2.3rem;
}

/* Hero portfolio stats (under the CTAs) — quiet inline pairs in Geist,
   same register as the hero-flow eyebrow in the design reference */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.6rem;
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
@media (min-width: 992px) { .hero-stats { flex-wrap: nowrap; white-space: nowrap; } }
.hero-stat { display: flex; align-items: baseline; gap: .45rem; }
.hero-stat .hs-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .01em;
  color: var(--h-soft);
}
.hero-stat .hs-label {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--h-faint);
}
.hero-flow .ar { color: var(--blue-bright); font-weight: 400; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
  margin-bottom: 2.4rem;
}
.scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.4rem;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--h-faint);
  font-size: 1.3rem;
  animation: bob 2s ease-in-out infinite;
  text-decoration: none;
}
@keyframes bob {
  0%,100% { transform: translate(-50%,0); }
  50%      { transform: translate(-50%,6px); }
}

/* Living system stage */
.system {
  position: relative;
  width: 100%;
  height: clamp(300px, 38vh, 404px);
  border-radius: var(--radius-card);
  background: var(--h-panel);
  border: 1px solid var(--h-panel-bd);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.6);
  overflow: hidden;
}
.system-field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.system > *:not(.system-field) { position: absolute; z-index: 2; }
.sys-cap {
  top: 1.1rem;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--h-faint);
}
.sys-cap--l { left: 1.2rem; }
.sys-cap--r { right: 1.2rem; }
.sys-origins, .sys-decisions { top: 0; bottom: 0; width: 1px; }
.sys-origins { left: 9%; }
.sys-decisions { right: 8%; }
.sys-src, .sys-dec {
  position: absolute;
  transform: translateY(-50%);
  font-size: .8rem;
  font-weight: 500;
  color: var(--h-soft);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  letter-spacing: .01em;
  animation: sysFloat 6s ease-in-out infinite;
}
/* Origin labels sit on the template's left rail (9% inset), not the panel edge */
.sys-src { left: 9%; }
.sys-src .d { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.sys-src[data-src="0"] .d { background: #BFDCF1; box-shadow: 0 0 9px rgba(191,220,241,.8); }
.sys-src[data-src="1"] .d { background: var(--sage); box-shadow: 0 0 9px rgba(133,173,163,.7); }
.sys-src[data-src="2"] .d { width: 7px; height: 7px; border-radius: 1px; background: var(--indigo-soft); box-shadow: 0 0 9px rgba(93,91,128,.7); }
.sys-src[data-src="0"] { top: 28%; }
.sys-src[data-src="1"] { top: 50%; animation-delay: -2s; }
.sys-src[data-src="2"] { top: 72%; animation-delay: -4s; }
.sys-dec {
  right: 0; left: auto;
  transform: translate(0,-50%);
  justify-content: flex-end;
  font-size: .78rem;
  color: var(--h-faint);
  text-align: right;
  padding: .42rem .7rem;
  border: 1px solid var(--h-panel-bd);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  transition: color .4s, border-color .4s, box-shadow .4s, background .4s;
}
.sys-dec.lit {
  color: var(--h-ink);
  border-color: rgba(110,164,203,.6);
  box-shadow: 0 0 22px -4px rgba(110,164,203,.5);
  background: rgba(110,164,203,.08);
}
/* outcome chips link to their solution pages; anchor adds no box so the
   span keeps its absolute positioning and hero-system.js is unaffected */
.sys-dec-link { display: contents; text-decoration: none; }
.sys-dec-link .sys-dec { cursor: pointer; }
.sys-dec-link:hover .sys-dec,
.sys-dec-link:focus-visible .sys-dec {
  color: var(--h-ink);
  border-color: rgba(110,164,203,.6);
  background: rgba(110,164,203,.08);
}
.sys-dec[data-dec="0"] { top: 28%; right: 1.2rem; }
.sys-dec[data-dec="1"] { top: 50%; right: 1.2rem; animation-delay: -2.5s; }
.sys-dec[data-dec="2"] { top: 72%; right: 1.2rem; animation-delay: -4.5s; }
@keyframes sysFloat {
  0%,100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 5px)); }
}
.sys-dec[data-dec="0"],
.sys-dec[data-dec="1"],
.sys-dec[data-dec="2"] { animation-name: sysFloatR; }
@keyframes sysFloatR {
  0%,100% { transform: translate(0,-50%); }
  50% { transform: translate(0,calc(-50% - 5px)); }
}
.sys-core {
  left: 45%; top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: .8rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.025);
}
.sys-core-k {
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  margin: 0 0 .5rem;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-soft);
  white-space: nowrap;
}
.sys-core-box {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--h-ink);
  min-width: 96px;
  text-align: center;
  padding: .5rem 1rem;
  border-radius: 11px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 0 5px rgba(110,164,203,.05), 0 14px 34px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
  animation: coreBreathe 4.6s ease-in-out infinite;
}
.sys-core-box.ml { color: var(--blue-bright); animation-delay: -2.3s; }
@keyframes coreBreathe {
  0%,100% { box-shadow: 0 0 0 5px rgba(110,164,203,.04), 0 14px 34px -16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.12); }
  50%      { box-shadow: 0 0 0 7px rgba(110,164,203,.08), 0 14px 36px -15px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.17); }
}

/* =====================================================================
   7. HERO INTERIOR (non-home pages)
   ===================================================================== */
.hero-interior {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--topbar-h) + 3rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
  background:
    radial-gradient(110% 80% at 85% 5%, rgba(73,141,190,.3) 0%, rgba(21,36,60,0) 55%),
    radial-gradient(90% 80% at 5% 100%, rgba(57,54,100,.38) 0%, rgba(21,36,60,0) 55%),
    linear-gradient(157deg, #1B2B48 0%, #122237 52%, #0B1726 100%);
}
.hero-interior .acc-wrap { position: relative; z-index: 2; }

/* Variant: split with image */
.hero-interior--split .hero-interior-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-interior-eyebrow { color: rgba(255,255,255,.5); margin-bottom: 1.2rem; }
.hero-interior h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -.018em;
  color: #fff;
  margin-bottom: 1.2rem;
}
.hero-interior h1 em { font-style: italic; color: var(--blue-bright); }
/* Base rule is unscoped: about/contact/how-we-work reuse the class on
   light pages outside a .hero-interior, where it previously got no styles
   and ran the full container width. */
.hero-interior-lead {
  font-size: 1.15rem;
  color: var(--body);
  max-width: 52ch;
  margin-bottom: 2rem;
}
.acc-center .hero-interior-lead { margin-inline: auto; }
.hero-interior .hero-interior-lead { color: rgba(255,255,255,.72); }
.hero-interior-img {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(14,42,69,.5);
}
.hero-interior-img img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 3 / 2; object-fit: cover;
  filter: saturate(.85) contrast(1.03);
  transition: filter .7s cubic-bezier(.4, 0, .2, 1);
}
/* Brand tint: multiplies a navy wash over each hero photo so the set reads as
   one cohesive, engineered system rather than five separate stock images. */
.hero-interior-img::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(150deg, rgba(30,54,90,.22) 0%, rgba(var(--navy-3-rgb),.42) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
}
/* Hover slowly releases the tint: the photo blooms to full colour as the
   desaturation and the navy wash ease off together over .7s. Explicit filter
   values (not `none`) keep the interpolation smooth. This is a colour cross-fade,
   not motion, so it plays regardless of prefers-reduced-motion. */
.hero-interior-img:hover img { filter: saturate(1) contrast(1); }
.hero-interior-img:hover::after { opacity: 0; }
/* --bright: skip the brand tint and desaturation, showing the photo at full
   colour immediately (used on the city/geo heroes, where the place reads vivid). */
.hero-interior-img--bright img { filter: none; }
.hero-interior-img--bright::after { content: none; }

/* --cover: full-bleed flagship hero — a photo background under a navy brand
   overlay, on the dark hero-interior base (white text). Image via --cover-img. */
.hero-interior--cover {
  min-height: 58vh;
  background-image:
    linear-gradient(150deg, rgba(11,23,38,.9) 0%, rgba(11,23,38,.64) 52%, rgba(21,36,60,.48) 100%),
    var(--cover-img);
  background-size: cover;
  background-position: center;
  padding-top: calc(var(--nav-h) + var(--topbar-h) + 4rem);
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
  /* the full-bleed cover has no image card, so give the whole hero a clear drop
     shadow at its bottom edge; the subtle light-hero shadow disappeared against
     the dark photo. */
  box-shadow: 0 20px 44px -18px rgba(14, 42, 69, .5);
}
.hero-interior--cover .hero-location-row { color: rgba(255,255,255,.85); }
.hero-interior--cover .hero-location-row i { color: var(--blue-bright); }
.hero-interior--cover .hero-location-row a { color: inherit; text-decoration: none; transition: color .2s ease; }
.hero-interior--cover .hero-location-row a:hover { color: #fff; }
/* Cover heroes use the sans headline — cleaner over a photo than the serif. */
.hero-interior--cover h1 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -.02em; }
/* Secondary/ghost buttons get a translucent glass backdrop so they don't get
   lost over the photo. */
.hero-interior--cover .btn-acc--onnavy-ghost,
.hero-interior--cover .btn-acc--ghost {
  --bg: rgba(11,23,38,.4);
  --fg: #fff;
  --bd: rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Cover buttons: change colour on hover only, no lift and no icon slide. */
.hero-interior--cover .btn-acc:hover,
.hero-interior--cover .btn-acc:hover i { transform: none; }
.hero-interior--cover .btn-acc--onnavy-ghost:hover,
.hero-interior--cover .btn-acc--ghost:hover { --bg: rgba(11,23,38,.62); --bd: #fff; }
.hero-co { --cover-img: url('/assets/images/geo/colombia-cover.jpg'); }
/* 2x2 tile grid for the /services hero: four brand-tinted square photos,
   each reusing .hero-interior-img (rounded corners, tint, desaturation). */
.hero-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.hero-tile-grid .hero-interior-img { box-shadow: 0 16px 34px -22px rgba(14,42,69,.45); }
.hero-tile-grid .hero-interior-img img { aspect-ratio: 1 / 1; }
/* Once the hero stacks (<=992px, matching the split breakpoint), keep the 2x2
   compact instead of ballooning to full column width. */
@media (max-width: 992px) {
  .hero-tile-grid { max-width: 340px; }
}

/* Trackvy product page */
.trackvy-hero-logo { width: auto; height: 38px; margin-bottom: 1.4rem; }
.trackvy-note { margin-top: 1.2rem; font-size: .92rem; color: var(--muted); }

/* Light interior hero — canvas gradient base, dark text */
.hero-interior--light {
  background:
    radial-gradient(110% 70% at 78% 0%, rgba(73,141,190,.16) 0, transparent 55%),
    radial-gradient(70% 60% at 8%  0%, rgba(57,54,100,.06)  0, transparent 48%),
    var(--canvas);
  padding-top: calc(var(--nav-h) + var(--topbar-h) + 2rem);
}
/* Non-split: tall hero with content anchored at the bottom */
.hero-interior--light:not(.hero-interior--split) {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: clamp(5rem, 9vw, 8rem);
}
/* Secondary (light) hero titles are Geist, not the display serif */
.hero-interior--light h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2.1rem, 3.4vw, 3.2rem);
  letter-spacing: -.022em;
  line-height: 1.08;
  color: var(--ink);
}
.hero-interior--light h1 em { font-style: normal; color: var(--blue-deep); }
.hero-interior--light .hero-interior-lead { color: var(--body); }
.hero-interior--light .hero-interior-eyebrow { color: var(--muted); }

/* Full-height light hero (index-style): breadcrumb pinned to the top, the
   main content centred vertically in the remaining space, a bobbing scroll
   cue inviting the user down. */
.hero-interior--full {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: clamp(3rem, 7vh, 6rem);
}
.hero-interior--full .acc-wrap { width: 100%; }
.hero-interior-bar { padding-top: .25rem; }
.hero-interior-body { flex: 1; display: flex; align-items: center; }
.hero-interior--light .scroll-cue { color: var(--muted); }
.hero-interior--light .scroll-cue:hover { color: var(--navy); }

/* Scroll cue fades away once the user leaves the hero, returns at the top. */
.scroll-cue { transition: opacity .35s ease; }
.scroll-cue.is-gone { opacity: 0; pointer-events: none; }

/* Heroes cast a shadow over the body that follows, so the hero reads as a
   panel resting on the content (straight edge, no rounding). */
.hero,
.hero-interior--light {
  position: relative;
  z-index: 2;
}
/* Navy hero: deep drop reads well against the dark-to-light transition. */
.hero { box-shadow: 0 22px 44px -14px rgba(14, 42, 69, .50); }
/* Every light interior hero carries the same layered "premium" elevation: a
   faint tight contact layer plus a soft diffuse lift. Standardized site-wide. */
.hero-interior--light {
  box-shadow: 0 2px 5px -2px rgba(20, 40, 65, .07),
              0 16px 30px -16px rgba(20, 40, 65, .16);
}

/* Trackvy product shots: framed, natural aspect, capped so they read as
   compact screenshots rather than full-bleed photos. */
.trackvy-shot {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(240px, 30vw, 350px);
  margin-inline: auto;
  border-radius: 14px;
}

/* ---- Trackvy 5-layer architecture diagram ---- */
.tl-fig { position: relative; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; max-width: 1000px; }
.tl-svg {
  width: 100%; max-width: 600px; height: auto; display: block; margin-inline: auto;
  border-radius: 20px;
  box-shadow: 0 34px 64px -36px rgba(14, 42, 69, .5);
}
.tl-num    { font-family: var(--font-sans); font-weight: 700; font-size: 34px; letter-spacing: -1.2px; fill: var(--ink); }
.tl-caplbl { font-family: var(--font-sans); font-weight: 600; font-size: 9px; letter-spacing: 2.2px; fill: var(--muted); }
.tl-name   { font-family: var(--font-sans); font-weight: 600; font-size: 18px; letter-spacing: -.2px; fill: var(--ink); }
.tl-comp   { font-family: var(--font-sans); font-weight: 500; font-size: 11.5px; fill: var(--blue-deep); }
.tl-clink  { fill: var(--blue-deep); cursor: pointer; }
.tl-clink:hover { fill: var(--navy); text-decoration: underline; }
/* dark bottom bands (Física, Hardware): flip text to light for contrast */
.tl-on-dark .tl-num    { fill: #fff; }
.tl-on-dark .tl-caplbl { fill: rgba(255,255,255,.5); }
.tl-on-dark .tl-name   { fill: #fff; }
.tl-on-dark .tl-comp   { fill: var(--blue-soft); }

/* The active layer's highlight (toggled by JS as the sweep / next-back moves). */
.tl-glow { fill: var(--blue-bright); opacity: 0; filter: blur(10px); transition: opacity 1.1s ease; }
.tl-glow.is-on { opacity: .3; }

/* Explainer cards beside the stack, tinted in each layer's own colour, with a
   left-pointing tip aimed at its layer. */
.tl-callout {
  position: absolute; left: 56%; width: 38%;
  transform: translate(14px, -50%); opacity: 0;
  transition: opacity .55s ease, transform .55s ease;
  border-radius: 14px; box-shadow: 0 26px 52px -28px rgba(14,42,69,.42);
  padding: .9rem 1.1rem; z-index: 3; display: none;
}
.tl-callout.is-on { opacity: 1; transform: translate(0, -50%); }
.tl-callout::before {
  content: ""; position: absolute; left: -7px; top: 50%;
  width: 14px; height: 14px; background: inherit;
  transform: translateY(-50%) rotate(45deg);
}
.tl-callout-eyebrow {
  display: block; font-family: var(--font-sans); font-size: .62rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .3rem;
}
.tl-callout p { font-family: var(--font-sans); font-size: .85rem; line-height: 1.5; margin: 0; color: inherit; }
.tl-callout-1 { top: 86.8%; background: var(--navy);      color: #fff; }
.tl-callout-2 { top: 68.4%; background: var(--blue-deep); color: #fff; }
.tl-callout-3 { top: 50%;   background: var(--blue);      color: #fff; }
.tl-callout-4 { top: 31.6%; background: var(--blue-soft); color: var(--navy); }
.tl-callout-5 { top: 13.2%; background: #E4EDF6;          color: var(--navy); }
.tl-callout-1 .tl-callout-eyebrow,
.tl-callout-2 .tl-callout-eyebrow,
.tl-callout-3 .tl-callout-eyebrow { color: rgba(255,255,255,.72); }
.tl-callout-4 .tl-callout-eyebrow,
.tl-callout-5 .tl-callout-eyebrow { color: var(--blue-deep); }

/* Tablet+: compact stack inset on the left (room for the prev arrow), cards
   beside it, arrows flanking in the gutters. */
@media (min-width: 860px) {
  .tl-svg { width: 47%; max-width: none; margin: 0 0 0 6%; }
  .tl-callout { display: block; left: 57%; width: 35%; }
}
/* reduced-motion: JS shows every card at once; kill the fade/slide. */
@media (prefers-reduced-motion: reduce) {
  .tl-callout, .tl-glow { transition: none; }
}

/* next / back, pinned to the ends of the stack (carousel-style) */
.tl-ctl {
  position: absolute; top: 50%; z-index: 4;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white); color: var(--blue-deep);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.05rem; box-shadow: 0 12px 26px -14px rgba(14,42,69,.45);
  transition: border-color .2s, color .2s, background .2s;
}
.tl-ctl:hover { border-color: var(--navy); color: var(--navy); background: var(--paper); }
.tl-prev { left: 0; transform: translateY(-50%); }
.tl-next { right: 0; left: auto; transform: translateY(-50%); }
@media (max-width: 859.98px) { .tl-ctl { display: none; } }
@media (prefers-reduced-motion: reduce) { .tl-ctl { display: none; } }

/* the down link below the exhibit */
.tl-foot { text-align: center; margin-top: clamp(1.2rem, 2.5vw, 1.9rem); }

.tl-more {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .85rem;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 600;
  letter-spacing: .01em; color: var(--muted); text-decoration: none;
  transition: color .25s;
}
.tl-more i { transition: transform .3s var(--ease); }
.tl-more:hover { color: var(--navy); }
.tl-more:hover i { transform: translateY(3px); }

/* On phones, show the diagram small instead of hiding it. The SVG carries the
   layer number + Capa label + name inline, so it stands alone; the description
   callouts stay hidden (they only appear beside the stack at >=860px). */
@media (max-width: 640px) {
  .tl-svg { max-width: 380px; }
  .tl-callout { display: none; }
}

/* Navy bands lift off the body above with an inverted (upward) shadow,
   mirroring the hero's downward drop. */
.band,
.acc-section--navy {
  position: relative;
  z-index: 2;
  box-shadow: 0 -22px 44px -16px rgba(14, 42, 69, .45);
}


/* =====================================================================
   8. LOGO STRIP / CLIENTS CAROUSEL
   ===================================================================== */
.logostrip {
  border-block: 1px solid var(--line);
  background: var(--white);
}
.logostrip .acc-wrap {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-block: 1.7rem;
  flex-wrap: wrap;
}
.logostrip-lbl {
  font-family: var(--font-sans);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 13rem;
  line-height: 1.5;
}
.logostrip-logos {
  display: flex;
  align-items: center;
  gap: 2.6rem;
  flex: 1;
  flex-wrap: wrap;
}

/* Client logo carousel (paper surface), 5 per slide. Logos render in full
   colour and breathe; a subtle lift on hover. Prev/next controls are small. */
.acc-clients-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); background: var(--white); }
.acc-clients-section .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.acc-carousel { position: relative; padding-inline: clamp(1.5rem, 4vw, 3.5rem); }
.clients-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.75rem;
  align-items: center;
  justify-items: center;
}
.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 118px;
  width: 100%;
}
.client-logo img {
  max-height: 86px;
  max-width: 204px;
  width: auto;
  /* technical slate-grey at rest */
  filter: grayscale(100%);
  opacity: .72;
  transition: filter .5s cubic-bezier(.4,0,.2,1),
              opacity .5s cubic-bezier(.4,0,.2,1),
              transform .5s cubic-bezier(.4,0,.2,1);
}
/* hover: pop into full colour, grow and lift */
.client-logo:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.15) translateY(-5px);
}

/* Small, muted prev/next controls */
.acc-carousel .carousel-control-prev,
.acc-carousel .carousel-control-next {
  width: clamp(1.5rem, 4vw, 3rem);
  opacity: 1;
  color: var(--muted);
  transition: color .2s;
}
.acc-carousel .carousel-control-prev { left: 0; justify-content: flex-start; }
.acc-carousel .carousel-control-next { right: 0; justify-content: flex-end; }
.acc-carousel .carousel-control-prev:hover,
.acc-carousel .carousel-control-next:hover { color: var(--navy); }
.acc-carousel .carousel-control-prev i,
.acc-carousel .carousel-control-next i { font-size: 1.5rem; }
@media (max-width: 991.98px) { .clients-row { grid-template-columns: repeat(3, 1fr); row-gap: 2.6rem; } }
@media (max-width: 575.98px)  { .clients-row { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.4rem; } .client-logo { height: 70px; } .client-logo img { max-height: 64px; max-width: 150px; } }

/* =====================================================================
   9. PILLARS · BAND · METRICS
   ===================================================================== */
.pillar .ic {
  width: 52px; height: 52px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-tint);
  color: var(--navy);
  font-size: 1.65rem;
  margin-bottom: 1.3rem;
}
.pillar { display: flex; flex-direction: column; height: 100%; }
.pillar h3 { font-size: 1.35rem; margin-bottom: .15rem; letter-spacing: -.01em; }
.pillar .pillar-sub {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin: 0 0 .9rem;
}
.pillar p { color: var(--body); margin: 0 0 1rem; }
/* push the learn-more link to a shared baseline regardless of copy length */
.pillar .link-arrow { margin-top: auto; }
.pillar .metric {
  font-family: var(--font-sans);
  color: var(--blue-deep);
  font-weight: 600;
  font-size: .9rem;
}

/* =====================================================================
   RESULTADOS — head (left) + 3x2 card grid (right). outcome-metrics.jsp
   ===================================================================== */
.results-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.results-head { max-width: 32ch; }
/* serif flourish (a calmer echo of the Enfoque headline) */
.results-head .section-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  max-width: 13ch;
}
.results-head .section-title em { font-style: italic; font-weight: 500; color: var(--blue-deep); }
.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.result-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.7rem 1.6rem;
  display: flex;
  flex-direction: column;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.result-card:hover {
  border-color: var(--blue-soft);
  box-shadow: 0 20px 46px -32px rgba(14,42,69,.32);
  transform: translateY(-2px);
}
.result-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.result-num {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 2.9rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--blue-deep);
  margin: .45rem 0 .7rem;
}
.result-text { color: var(--body); font-size: .9rem; line-height: 1.55; margin: 0; }
@media (max-width: 900px) {
  .results-layout { grid-template-columns: 1fr; gap: 2rem; }
  .results-head { position: static; max-width: none; }
  .results-head .section-title { max-width: none; }
}
@media (max-width: 520px)  { .results-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   CÓMO LO HACEMOS — commercial 3-step journey
   ===================================================================== */
.step-title {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 1.2rem;
}

/* =====================================================================
   ENFOQUE — light editorial philosophy band over an engineered blueprint
   grid. Serif display headline (light weight) + refined sans body.
   ===================================================================== */
.enfoque {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(5rem, 9vw, 8.5rem);
  background:
    radial-gradient(120% 90% at 86% -4%, rgba(73,141,190,.09) 0%, transparent 52%),
    radial-gradient(95% 95% at 0% 104%, rgba(57,54,100,.06) 0%, transparent 52%),
    linear-gradient(178deg, var(--white) 0%, var(--paper) 100%);
  border-top: 1px solid var(--line-soft);
}
/* faint engineered blueprint grid, fading out toward the edges */
.enfoque::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(14,42,69,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,42,69,.045) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: radial-gradient(115% 85% at 74% 24%, #000 0%, transparent 72%);
          mask-image: radial-gradient(115% 85% at 74% 24%, #000 0%, transparent 72%);
}
.enfoque .acc-wrap { position: relative; z-index: 1; }
.enfoque-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
.enfoque-lead { position: sticky; top: calc(var(--nav-h) + 2rem); }
.enfoque .eyebrow { color: var(--muted); margin-bottom: 1.6rem; }
.enfoque-title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1.02;
  letter-spacing: -.022em; color: var(--ink); text-wrap: balance;
  margin: 0;
}
.enfoque-title em { font-style: italic; font-weight: 500; color: var(--blue-deep); }

.enfoque-text { max-width: 56ch; }
.enfoque-text > p { margin: 0 0 1.2rem; }
.enfoque-text .lead { font-size: 1.3rem; font-weight: 400; line-height: 1.5; color: var(--ink); letter-spacing: -.006em; }
.enfoque-text > p:not(.lead) { font-size: 1.0625rem; font-weight: 400; line-height: 1.66; color: var(--body); }
.enfoque-text em { font-style: normal; font-weight: 600; color: var(--blue-deep); }
.enfoque-text b { color: var(--ink); font-weight: 600; }
.enfoque-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .85rem; }

@media (max-width: 992px) {
  .enfoque-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .enfoque-lead { position: static; }
  .enfoque-text { max-width: none; }
}

/* Positioning band */
.band {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(100% 120% at 90% 0%, rgba(44,90,130,.5) 0, rgba(14,42,69,0) 55%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-3) 100%);
}
.band .eyebrow { color: rgba(255,255,255,.5); }
.band-statement {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  color: #fff;
  max-width: 20ch;
}
.band-statement em { font-style: italic; color: var(--emerald); }
.band-lead {
  color: rgba(255,255,255,.76);
  font-size: 1.15rem;
  max-width: 52ch;
  margin-top: 1.4rem;
}
.band-points {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 1.8rem 2.4rem;
  margin-top: 1rem;
}
.band-point { border-top: 1px solid rgba(255,255,255,.16); padding-top: 1.1rem; }
.band-point .n {
  font-family: var(--font-sans);
  font-size: .6875rem;
  letter-spacing: .14em;
  color: var(--emerald);
  text-transform: uppercase;
}
.band-point h4 { color: #fff; font-size: 1.15rem; margin: .55rem 0 .4rem; }
.band-point p { color: rgba(255,255,255,.66); font-size: .95rem; margin: 0; }

/* Band feature rows (who.jsp) */
.band-feature { display: flex; gap: 1.5rem; margin-bottom: 2rem; }
.band-feature:last-child { margin-bottom: 0; }
.band-feature-icon { flex-shrink: 0; font-size: 2.2rem; color: rgba(255,255,255,.55); }
.band-feature h4 { color: #fff; font-size: 1.05rem; margin-bottom: .4rem; }
.band-feature p { color: rgba(255,255,255,.66); font-size: .92rem; margin: 0; }

/* Metrics */
.metrics {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}
.metric-cell {
  padding: .5rem 2rem;
  border-left: 1px solid var(--line);
}
.metric-cell:first-child { border-left: 0; padding-left: 0; }
.metric-cell .k {
  font-family: var(--font-sans);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-deep);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.metric-cell .k .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex: none;
}
.metric-cell .fig {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.5vw, 3.8rem);
  color: var(--ink);
  line-height: 1;
  margin: .7rem 0 .6rem;
  letter-spacing: -.02em;
}
.metric-cell .sub { font-size: .92rem; color: var(--muted); margin: 0; }

/* =====================================================================
   10. PHASE / METHODOLOGY CARDS
   ===================================================================== */
.phase-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2.4rem;
  height: 100%;
  transition: border-color .3s, box-shadow .3s;
}
.phase-card:hover {
  border-color: var(--navy-tint);
  box-shadow: 0 24px 50px -36px rgba(14,42,69,.32);
}
.phase-card .ph-head {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.phase-card .ph-head > div { min-width: 0; }
.phase-card .ph-ic {
  width: 50px; height: 50px;
  flex: none;
  border-radius: 13px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
}
.phase-card .ph-tag {
  display: block;
  font-family: var(--font-sans);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--emerald-dp);
  line-height: 1;
  margin-bottom: .45rem;
}
.phase-card h3 { font-size: 1.35rem; margin: 0 0 .3rem; letter-spacing: -.01em; line-height: 1.2; }
.phase-card .ph-obj {
  font-family: var(--font-sans);
  font-size: .8rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}
.phase-card > p { color: var(--body); }

.checklist { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.checklist li {
  position: relative;
  padding: .7rem 0 .7rem 2rem;
  border-top: 1px solid var(--line-soft);
  font-size: .96rem;
  color: var(--body);
}
.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0; top: .72rem;
  width: 1.2rem; height: 1.2rem;
  color: var(--emerald-dp);
  font-size: .8rem;
  font-weight: 700;
}
.checklist li b { color: var(--ink); font-weight: 600; }

/* =====================================================================
   11. SPLIT SECTION (alternating image + text)
   ===================================================================== */
.split-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.split-section--canvas { background: var(--canvas); }
.split-section--paper { background: var(--paper); }
.split-section--dark {
  background:
    radial-gradient(100% 120% at 90% 0%, rgba(44,90,130,.4) 0, rgba(14,42,69,0) 55%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-3) 100%);
  color: #fff;
}

.split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.split-inner--flip .split-media { order: -1; }

.split-eyebrow { color: var(--muted); margin-bottom: 1rem; }
.split-section--dark .split-eyebrow { color: rgba(255,255,255,.5); }
.split-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  margin-bottom: 1.1rem;
}
.split-section--dark .split-title { color: #fff; }
.split-title em { font-style: italic; color: var(--blue-deep); }
.split-section--dark .split-title em { color: var(--blue-bright); }
.split-body { font-size: 1.05rem; color: var(--body); }
.split-section--dark .split-body { color: rgba(255,255,255,.72); }

.split-media img {
  width: 100%;
  border-radius: var(--radius-card);
  box-shadow: 0 24px 50px -30px rgba(14,42,69,.25);
  display: block;
}
.split-media-logo { margin-bottom: 1.5rem; }
.split-media-logo img { height: 36px; width: auto; }

/* =====================================================================
   12. SERVICE CARD GRID (numbered / icon cards)
   ===================================================================== */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.8rem;
  transition: border-color .25s, box-shadow .25s;
}
.service-card:hover {
  border-color: var(--navy-tint);
  box-shadow: 0 18px 40px -30px rgba(14,42,69,.22);
}
.service-card .sc-num {
  font-family: var(--font-sans);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--blue-deep);
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.service-card .sc-ic {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--navy-tint);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.service-card h5 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .5rem;
}
.service-card p { font-size: .92rem; color: var(--body); margin: 0; }

/* Quote/callout card */
.quote-card {
  background: var(--canvas);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  border: 1px solid var(--line);
}
.quote-card .qc-icon {
  font-size: 2.5rem;
  color: var(--blue);
  margin-bottom: 1.2rem;
  display: block;
}
.quote-card blockquote {
  font-size: 1.15rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
  font-style: italic;
}

/* Results card */
.results-card {
  background: var(--canvas);
  border-radius: var(--radius-card);
  padding: 2rem;
  border: 1px solid var(--line);
}

/* Service callout icon (large icon in a card/band) */
.svc-icon { font-size: 3rem; display: block; margin-bottom: 1rem; color: var(--blue-deep); }
.svc-icon--light { color: rgba(255,255,255,.7); }
.svc-icon--lg { font-size: 3.5rem; margin-bottom: 1.25rem; }

/* Band used as an inline card (dark navy rounded card) */
.band-card { border-radius: var(--radius-card); padding: 2rem; }

/* Service card CTA slot */
/* Whole-card contact link with a soft wave field (no inner button) */
.service-card--cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(180deg, var(--white) 0%, var(--canvas) 100%);
  border: 1px solid var(--line);
}
.service-card--cta::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--wave-2);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 150% auto;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 78%);
          mask-image: linear-gradient(to top, #000 0%, transparent 78%);
}
.service-card--cta:hover {
  border-color: var(--blue-soft);
  box-shadow: 0 18px 44px -28px rgba(14, 42, 69, .4);
  transform: translateY(-3px);
}
.service-card--cta .sc-ic { background: var(--blue-deep); color: #fff; transition: transform .25s var(--ease); }
.service-card--cta:hover .sc-ic { transform: scale(1.06); }
.service-card--cta h5 {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--navy); margin: 0;
}
.service-card--cta .sc-cta-arrow { font-size: .95em; color: var(--blue-deep); transition: transform .25s var(--ease); }
.service-card--cta:hover .sc-cta-arrow { transform: translateX(4px); }

/* Tech logo row images (web-and-mobile page) */
.tech-logo-img { height: 64px; width: auto; object-fit: contain; opacity: .85; }
.service-icon-img { width: 80px; height: 80px; margin-bottom: 1.25rem; }
.split-media-img { width: 100%; height: auto; border-radius: var(--radius-card); display: block; object-fit: cover; max-height: 320px; }

/* =====================================================================
   13. COMPARISON BLOCK (Bounded Deployment vs Piloto Tradicional)
   ===================================================================== */
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.compare-col {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2rem;
}
.compare-col--accent {
  border-color: var(--blue);
  background: var(--navy-tint);
}
.compare-col h4 {
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
  color: var(--ink);
}
.compare-col--accent h4 { color: var(--navy); }
.compare-col .compare-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--navy);
  color: #fff;
  padding: .25rem .7rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.compare-col ul { list-style: none; padding: 0; margin: 0; }
.compare-col ul li {
  padding: .6rem 0 .6rem 1.5rem;
  position: relative;
  border-top: 1px solid var(--line-soft);
  font-size: .9rem;
  color: var(--body);
}
.compare-col ul li::before {
  content: "×";
  position: absolute;
  left: 0;
  color: var(--muted);
  font-weight: 600;
}
.compare-col--accent ul li::before {
  content: "\2713";
  color: var(--blue-deep);
}
.compare-col--accent ul li { color: var(--ink); }

/* =====================================================================
   14. FAQ ACCORDION
   ===================================================================== */
.acc-faq .accordion-item {
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
}
.acc-faq .accordion-item:first-child { border-top: 1px solid var(--line-soft); }
.acc-faq .accordion-button {
  background: transparent;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--ink);
  padding: 1.4rem 0;
  box-shadow: none;
  gap: 1rem;
}
.acc-faq .accordion-button:not(.collapsed) { color: var(--navy); }
.acc-faq .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath stroke='%234F555E' stroke-width='1.5' fill='none' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-size: 16px;
  margin-left: auto;
  flex-shrink: 0;
}
.acc-faq .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath stroke='%2315243C' stroke-width='1.5' fill='none' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  transform: rotate(180deg);
}
.acc-faq .accordion-body {
  padding: 0 0 1.4rem;
  font-size: 1rem;
  color: var(--body);
  line-height: 1.7;
}
.acc-faq .accordion-body a { color: var(--blue-deep); text-decoration: underline; }

/* Dark surface FAQ */
.acc-faq--dark .accordion-item { border-bottom-color: rgba(255,255,255,.12); }
.acc-faq--dark .accordion-item:first-child { border-top-color: rgba(255,255,255,.12); }
.acc-faq--dark .accordion-button { color: rgba(255,255,255,.88); }
.acc-faq--dark .accordion-button:not(.collapsed) { color: #fff; }
.acc-faq--dark .accordion-body { color: rgba(255,255,255,.65); }

/* =====================================================================
   15. PERSPECTIVES BRIDGE
   ===================================================================== */
.perspectives-bridge { padding-block: clamp(3rem, 6vw, 5.5rem); }
.perspectives-bridge .pb-eyebrow { margin-bottom: .75rem; }
.perspectives-bridge .pb-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--ink);
  margin-bottom: 2.5rem;
  letter-spacing: -.01em;
}

.pb-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2rem;
  height: 100%;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  text-decoration: none;
}
.pb-card:hover {
  border-color: var(--navy);
  box-shadow: 0 18px 40px -30px rgba(14,42,69,.22);
  transform: translateY(-2px);
}
.pb-card .pb-card-eyebrow {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: .6rem;
}
.pb-card h4 { font-size: 1.15rem; color: var(--ink); margin-bottom: .6rem; }
.pb-card p { font-size: .9rem; color: var(--body); margin-bottom: 1.2rem; }
.pb-card .pb-card-cta {
  font-size: .875rem;
  font-weight: 600;
  color: var(--blue-deep);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* =====================================================================
   16. TRACKVY PROMO BLOCK
   ===================================================================== */
.trackvy-promo {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  border-top: 1px solid var(--line);
}
.trackvy-promo--canvas { background: var(--canvas); border-top: none; }

.trackvy-promo-logo { height: 28px; width: auto; margin-bottom: 1.4rem; display: block; }
.trackvy-promo-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 1rem;
}
.trackvy-promo-title em { font-style: italic; color: var(--blue-deep); }
.trackvy-promo-lead { font-size: 1.05rem; color: var(--body); margin-bottom: 1.8rem; }
.trackvy-promo-checklist { list-style: none; padding: 0; margin: 0 0 2rem; }
.trackvy-promo-checklist li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .55rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: .96rem;
  color: var(--body);
}
.trackvy-promo-checklist li:first-child { border-top: 0; }
.trackvy-promo-checklist li::before {
  content: "\2713";
  color: var(--blue-deep);
  font-weight: 700;
  flex: none;
  font-size: .85rem;
  padding-top: .1rem;
}

/* Case study teaser inline card */
.cs-teaser {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  padding: 1.4rem 1.75rem;
  margin-block: 2rem;
}
.cs-teaser-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue-deep);
  background: rgba(73,141,190,.12);
  padding: .18rem .6rem;
  border-radius: 4px;
  margin-bottom: .65rem;
}
.cs-teaser h5 { font-size: 1rem; color: var(--ink); margin-bottom: .3rem; }
.cs-teaser .cs-challenge { font-size: .95rem; color: var(--body); margin: 0; }
.cs-teaser-metrics { display: flex; gap: 2rem; margin-block: 1rem; }
.cs-teaser-metric .n { font-size: 1.5rem; font-weight: 700; color: var(--blue-deep); line-height: 1; display: block; }
.cs-teaser-metric .l { font-size: .78rem; color: var(--muted); display: block; margin-top: .15rem; }

/* Trackvy feature tab nav (replaces hs-nav-scroller) */
/* Interactive feature switcher: clickable rows on the left swap the
   device mockup on the right. Self-contained JS in trackvy-promo.jsp. */
.tv-switch-tabs { display: flex; flex-direction: column; gap: .65rem; }
.tv-switch-tab {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  text-align: left;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-left: 3px solid transparent;
  border-radius: 13px;
  background: #fff;
  cursor: pointer;
  transition: border-color .2s, box-shadow .25s, transform .2s, background .2s;
}
.tv-switch-num {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--muted);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color .2s;
}
.tv-switch-body { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.tv-switch-title { font-weight: 600; font-size: .98rem; color: var(--ink); letter-spacing: -.005em; }
.tv-switch-text { font-size: .85rem; color: var(--body); line-height: 1.5; }
.tv-switch-arrow {
  color: var(--blue-deep); font-size: 1.1rem;
  opacity: 0; transform: translateX(-6px);
  transition: opacity .2s, transform .2s;
}
.tv-switch-tab:hover { border-color: var(--blue-soft); box-shadow: 0 8px 22px -16px rgba(14,42,69,.4); }
.tv-switch-tab:hover .tv-switch-title { color: var(--navy); }
.tv-switch-tab.is-active {
  border-left-color: var(--blue-deep);
  box-shadow: 0 14px 34px -20px rgba(14,42,69,.5);
  transform: translateY(-1px);
}
.tv-switch-tab.is-active .tv-switch-num { color: var(--blue-deep); }
.tv-switch-tab.is-active .tv-switch-title { color: var(--navy); }
.tv-switch-tab.is-active .tv-switch-arrow { opacity: 1; transform: translateX(0); }

/* Stage: panes stacked in one grid cell so the tallest sets the height
   and the active one cross-fades in. */
.tv-stage { display: grid; }
.tv-pane {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale(.99);
  transition: opacity .45s ease, transform .45s ease;
}
.tv-pane.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tv-pane { transition: none; }
}

/* Browser device mockup */
.device-browser {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 12px 40px -20px rgba(14,42,69,.18);
}
.device-browser-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.device-browser-header-btn-list { display: flex; gap: .35rem; flex-shrink: 0; }
.device-browser-header-btn-list span {
  display: block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--line-soft);
}
.device-browser-header-browser-bar {
  flex: 1;
  font-size: .75rem;
  color: var(--muted);
  background: var(--canvas);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: .18rem .55rem;
}
.device-browser-frame img { width: 100%; height: auto; display: block; }

/* =====================================================================
   17. START-A-PROJECT CTA
   ===================================================================== */
.start-project {
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.start-project-inner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--white) 0%, var(--canvas) 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.start-project-inner::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--wave-3);
  background-repeat: no-repeat;
  background-position: center 84%;
  background-size: 120% auto;
  -webkit-mask-image: radial-gradient(125% 105% at 50% 100%, #000 0%, transparent 70%);
          mask-image: radial-gradient(125% 105% at 50% 100%, #000 0%, transparent 70%);
}
.start-project h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--ink);
  margin-bottom: .85rem;
  letter-spacing: -.01em;
}
.start-project p { font-size: 1.05rem; color: var(--body); margin-bottom: 1.8rem; max-width: 50ch; margin-inline: auto; }
.start-project-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.start-project-inner .section-sub { max-width: 56ch; margin-inline: auto; margin-bottom: 1.75rem; }

/* AI capabilities callout (ai-promo.jsp) — navy panel, glyph + copy + action */
.ai-promo {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.75rem, 4vw, 3.25rem);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 92% 0%, rgba(44,90,130,.45) 0, rgba(14,42,69,0) 55%),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-3) 100%);
  overflow: hidden;
}
.ai-promo-glyph {
  flex: none;
  width: 64px; height: 64px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: var(--blue-bright);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
.ai-promo-copy { flex: 1; min-width: 0; }
.ai-promo-copy .eyebrow { color: var(--blue-soft); margin-bottom: .55rem; }
.ai-promo-copy .section-title { color: #fff; max-width: none; margin-bottom: .5rem; }
.ai-promo-copy .section-sub { color: rgba(255,255,255,.74); margin-top: 0; max-width: 64ch; }
.ai-promo-action { flex: none; }
.ai-promo-action .btn-acc { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.ai-promo-action .btn-acc:hover { --bg: var(--green-tint); --bd: var(--green-tint); }
@media (max-width: 767.98px) {
  .ai-promo { flex-direction: column; align-items: flex-start; text-align: left; }
  .ai-promo-action { width: 100%; }
  .ai-promo-action .btn-acc { width: 100%; justify-content: center; }
}

/* =====================================================================
   18. DIAGNOSTIC CTA
   ===================================================================== */
/* Closing CTA over the Enfoque blueprint grid + soft wash, with a serif flourish. */
.diagnostic-cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(4rem, 8vw, 7rem);
  text-align: center;
  background:
    radial-gradient(120% 90% at 86% -4%, rgba(73,141,190,.09) 0%, transparent 52%),
    radial-gradient(95% 95% at 0% 104%, rgba(57,54,100,.06) 0%, transparent 52%),
    linear-gradient(178deg, var(--white) 0%, var(--paper) 100%);
  border-top: 1px solid var(--line-soft);
}
.diagnostic-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(14,42,69,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,42,69,.05) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: radial-gradient(120% 92% at 50% 16%, #000 0%, transparent 68%);
          mask-image: radial-gradient(120% 92% at 50% 16%, #000 0%, transparent 68%);
}
.diagnostic-cta .acc-wrap { position: relative; z-index: 1; }
.diagnostic-cta .section-title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(2.2rem, 4.6vw, 3.7rem); line-height: 1.03;
  letter-spacing: -.022em; color: var(--ink); text-wrap: balance;
  margin-inline: auto;
}
.diagnostic-cta .section-title em { font-style: italic; font-weight: 500; color: var(--blue-deep); }
.diagnostic-cta p { font-size: 1.08rem; color: var(--body); margin: 1rem auto 2rem; max-width: 52ch; }
.diagnostic-cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/* =====================================================================
   19. PVV INSTRUMENT
   ===================================================================== */
.instrument {
  position: relative;
  background: var(--h-panel);
  border: 1px solid var(--h-panel-bd);
  border-radius: var(--radius-card);
  padding: 1.9rem 1.9rem 1.6rem;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.6);
}
.instrument-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}
.instrument-top .ttl {
  font-family: var(--font-sans);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--h-faint);
}

.pvv-row { margin-bottom: 1.15rem; }
.pvv-row:last-child { margin-bottom: 0; }
.pvv-row .rl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .4rem;
}
.pvv-row .rl .lab {
  font-family: var(--font-sans);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--h-faint);
}
.pvv-row .rl .val {
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 500;
  color: var(--emerald);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .5s .5s, transform .5s .5s;
}
.pvv-track {
  position: relative;
  height: 9px;
  border-radius: 5px;
  background: var(--h-track);
  overflow: hidden;
}
.pvv-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  border-radius: 5px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.3s cubic-bezier(.16,.84,.3,1), opacity .5s;
}
.pvv-bar.antes { background: var(--h-antes); }
.pvv-bar.despues {
  background: linear-gradient(90deg, var(--blue-deep), var(--blue-bright));
  box-shadow: 0 0 14px rgba(110,164,203,.55);
}

/* Static light variant (on white card) */
.pvv-static {
  --h-antes: #C9CBC6;
  --h-track: var(--canvas);
  --h-faint: var(--muted);
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 30px 60px -45px rgba(14,42,69,.4);
}
.pvv-static .pvv-track { height: 12px; }
.pvv-static .pvv-bar { transition: none; }
.pvv-static .pvv-bar.antes { transform: scaleX(var(--antes-w,1)); }
.pvv-static .pvv-bar.despues { transform: scaleX(1); }
.pvv-static .pvv-row { margin-bottom: 1.6rem; }
.pvv-static .pvv-row .rl .val {
  opacity: 1; transform: none;
  transition: none;
  color: var(--emerald-dp);
}
.pvv-static .instrument-top .ttl { color: var(--muted); }

/* =====================================================================
   20. HOW-WE-WORK TIMELINE
   ===================================================================== */
.hwk-section { padding-block: clamp(3rem, 6vw, 5.5rem); }

.hwk-exhibit {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2.5rem 2rem 1.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(14,42,69,.04);
}
.hwk-eyebrow-label {
  font-size: .68rem;
  letter-spacing: .22em;
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: .5rem;
}
.hwk-exhibit-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  color: var(--ink);
  margin-bottom: .5rem;
  letter-spacing: -.01em;
}
.hwk-exhibit-subtitle {
  font-size: .95rem;
  color: var(--muted);
  margin-bottom: 2.5rem;
}
.hwk-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-top: 2.25rem;
}
.hwk-rail {
  position: absolute;
  top: 30px; left: 12.5%; right: 3%;
  height: 2px;
  background: linear-gradient(90deg, var(--line) 0%, var(--line) 86%, transparent 100%);
  z-index: 0;
}
.hwk-rail-fill {
  position: absolute;
  top: 30px; left: 12.5%;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 100%);
  z-index: 1;
  transition: width 2.4s cubic-bezier(.65,0,.35,1);
}
.hwk-exhibit[data-animate-hwk="in"] .hwk-rail-fill { width: 75%; }

.hwk-node { position: relative; z-index: 2; text-align: center; }
.hwk-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  color: var(--blue);            /* per-phase palette colour set below; drives fill + glow */
  background: currentColor;
  border: 2px solid currentColor;
  margin: 0 auto 1.25rem;
  opacity: .4;                   /* resting / "off" */
}
/* palette ramp, light -> dark across the four phases */
.hwk-node:nth-child(1) .hwk-dot { color: var(--blue-bright); }
.hwk-node:nth-child(2) .hwk-dot { color: var(--blue); }
.hwk-node:nth-child(3) .hwk-dot { color: var(--blue-deep); }
.hwk-node:nth-child(4) .hwk-dot { color: var(--navy); }
/* once revealed, the dots light in order like a semaphore, then loop */
.hwk-exhibit[data-animate-hwk="in"] .hwk-dot { animation: hwkSemaphore 4.4s ease-in-out infinite; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(1) .hwk-dot { animation-delay: 0s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(2) .hwk-dot { animation-delay: 1.1s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(3) .hwk-dot { animation-delay: 2.2s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(4) .hwk-dot { animation-delay: 3.3s; }
@keyframes hwkSemaphore {
  0%, 100% { opacity: .4;  transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
  10%      { opacity: 1;   transform: scale(1.25); box-shadow: 0 0 16px 2px currentColor; }
  25%      { opacity: .4;  transform: scale(1);    box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .hwk-exhibit[data-animate-hwk="in"] .hwk-dot { animation: none; opacity: 1; }
}

.hwk-node-num {
  font-size: .65rem; letter-spacing: .22em;
  color: var(--blue-deep); font-weight: 600;
  margin-bottom: .25rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.hwk-node-title {
  font-size: 1rem; font-weight: 600; color: var(--ink);
  margin-bottom: .4rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.hwk-node-duration {
  font-size: .78rem; color: var(--muted);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease-out, transform .5s ease-out;
}
.hwk-exhibit[data-animate-hwk="in"] .hwk-node-num,
.hwk-exhibit[data-animate-hwk="in"] .hwk-node-title,
.hwk-exhibit[data-animate-hwk="in"] .hwk-node-duration { opacity: 1; transform: translateY(0); }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(3) .hwk-node-num { transition-delay: .40s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(3) .hwk-node-title { transition-delay: .50s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(3) .hwk-node-duration { transition-delay: .60s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(4) .hwk-node-num { transition-delay: 1.05s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(4) .hwk-node-title { transition-delay: 1.15s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(4) .hwk-node-duration { transition-delay: 1.25s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(5) .hwk-node-num { transition-delay: 1.70s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(5) .hwk-node-title { transition-delay: 1.80s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(5) .hwk-node-duration { transition-delay: 1.90s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(6) .hwk-node-num { transition-delay: 2.35s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(6) .hwk-node-title { transition-delay: 2.45s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(6) .hwk-node-duration { transition-delay: 2.55s; }

.hwk-node-what {
  font-size: .82rem; color: var(--muted);
  margin-top: .85rem; line-height: 1.5;
  opacity: 0; transform: translateY(6px);
  transition: opacity .55s ease-out, transform .55s ease-out;
}
.hwk-exhibit[data-animate-hwk="in"] .hwk-node-what { opacity: 1; transform: translateY(0); }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(3) .hwk-node-what { transition-delay: .75s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(4) .hwk-node-what { transition-delay: 1.40s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(5) .hwk-node-what { transition-delay: 2.05s; }
.hwk-exhibit[data-animate-hwk="in"] .hwk-node:nth-child(6) .hwk-node-what { transition-delay: 2.70s; }

.hwk-decision-band {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s ease-out 3.15s, transform .6s ease-out 3.15s;
}
.hwk-exhibit[data-animate-hwk="in"] .hwk-decision-band { opacity: 1; transform: translateY(0); }
.hwk-decision-label {
  font-size: .65rem;
  letter-spacing: .22em;
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 600;
}
.hwk-decision-value { font-size: 1.1rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.hwk-source { font-size: .8125rem; color: var(--muted); margin-top: 1.25rem; margin-bottom: 0; line-height: 1.5; max-width: 62ch; }

.hwk-phase {
  padding: 2rem 1.75rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  background: #fff;
  height: 100%;
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.hwk-phase-num {
  font-size: .65rem; letter-spacing: .22em;
  color: var(--blue-deep); font-weight: 600;
  margin-bottom: .5rem;
}
.hwk-phase-title { font-size: 1.2rem; font-weight: 600; color: var(--ink); margin-bottom: 1rem; }
.hwk-phase-body { color: var(--body); font-size: .95rem; line-height: 1.6; }

/* =====================================================================
   21. ROI EXHIBIT
   ===================================================================== */
.roi-exhibit {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  box-shadow: 0 1px 2px rgba(14,42,69,.04);
}
.roi-exhibit[data-animate-roi="in"] .roi-bar-fill { transform: scaleX(1); }

.roi-row { margin-bottom: 1.75rem; }
.roi-row:last-child { margin-bottom: 0; }
.roi-row-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .6rem;
}
.roi-row-name {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.roi-row-val {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.01em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .6s, transform .6s;
}
.roi-exhibit[data-animate-roi="in"] .roi-row-val { opacity: 1; transform: none; }
.roi-exhibit[data-animate-roi="in"] .roi-row:nth-child(2) .roi-row-val { transition-delay: .2s; }
.roi-exhibit[data-animate-roi="in"] .roi-row:nth-child(3) .roi-row-val { transition-delay: .4s; }
.roi-val-before {
  text-decoration: line-through;
  font-size: .95rem;
  color: var(--muted);
  font-family: var(--font-sans);
  margin-right: .5rem;
}

.roi-track {
  height: 10px;
  border-radius: 5px;
  background: var(--canvas);
  overflow: hidden;
  position: relative;
}
.roi-bar-fill {
  display: block;
  height: 100%;
  border-radius: 5px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.16,.84,.3,1);
}
.roi-bar-fill.before { background: #C9CBD0; }
.roi-bar-fill.after {
  position: absolute;
  top: 0; left: 0;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue));
  box-shadow: 0 0 14px rgba(73,141,190,.4);
}
.roi-exhibit[data-animate-roi="in"] .roi-row:nth-child(2) .roi-bar-fill { transition-delay: .15s; }
.roi-exhibit[data-animate-roi="in"] .roi-row:nth-child(3) .roi-bar-fill { transition-delay: .3s; }

.roi-payoff {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.roi-payoff-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.roi-payoff-value {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -.015em;
}

/* =====================================================================
   22. CASE STUDY COMPONENTS
   ===================================================================== */

/* --- Listing page (/case-studies) --- */
.cs-hero-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.cs-hero-gallery img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: 0 18px 40px -28px rgba(14,42,69,.35);
}
.cs-hero-gallery img:nth-child(odd) { transform: translateY(-.75rem); }
.cs-hero-gallery img:nth-child(even) { transform: translateY(.75rem); }

/* Case grid cards: hairline brand cards instead of Bootstrap defaults */
#caseGrid .case-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
#caseGrid .case-card:hover {
  transform: translateY(-2px);
  border-color: var(--blue-soft);
  box-shadow: 0 18px 44px -30px rgba(14,42,69,.3);
}
#caseGrid .case-card .card-body { padding: 1.5rem; }
#caseGrid .badge, #featuredSlot .badge, #categoryHero .badge {
  background: var(--navy-tint) !important;
  color: var(--blue-deep) !important;
  font-weight: 600;
  letter-spacing: .04em;
}
#featuredSlot .card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
#caseGrid .case-title { color: var(--ink); font-weight: 600; }
#caseGrid .cs-m-number { color: var(--blue-deep) !important; }

/* Sidebar filter rail */
#industryFilter .list-group-item {
  border: 0;
  background: transparent;
  color: var(--body);
  font-size: .92rem;
  font-weight: 500;
  padding: .5rem .75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
#industryFilter .list-group-item:hover { background: var(--canvas); color: var(--navy); }
#industryFilter .list-group-item.active {
  background: var(--navy-tint);
  color: var(--navy);
  font-weight: 600;
}
#caseStats {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
#caseStats h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 2.2rem;
  color: var(--blue-deep) !important;
}

/* Listing card */
.cs-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  background: var(--white);
  height: 100%;
}
.cs-card:hover {
  border-color: var(--navy);
  box-shadow: 0 18px 40px -30px rgba(14,42,69,.25);
  transform: translateY(-2px);
}
.cs-card-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.cs-badge--finance   { background: #E8EFF6; color: var(--blue-deep); }
.cs-badge--health    { background: #E6F4F1; color: var(--teal-deep); }
.cs-badge--logistics { background: #EEF0FA; color: var(--indigo); }
.cs-badge--mfg       { background: #F1EDF8; color: #5B3D8C; }
.cs-badge--services  { background: var(--canvas); color: var(--body); }
.cs-badge--retail    { background: #FFF3E8; color: #9B5A0A; }

.cs-card-body { padding: 1.75rem; }
.cs-card h4 { font-size: 1.1rem; color: var(--ink); margin-bottom: .6rem; }
.cs-card p { font-size: .9rem; color: var(--body); margin-bottom: 0; }
.cs-card-metrics {
  display: flex;
  gap: 1.5rem;
  padding: 1.2rem 1.75rem;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
}
.cs-card-metric .cs-m-num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--ink);
  font-weight: 400;
  line-height: 1;
}
.cs-card-metric .cs-m-label {
  font-size: .7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: .2rem;
}

/* Detail page hero */
.cs-hero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + var(--topbar-h) + 3rem);
  padding-bottom: 4rem;
  color: #fff;
  background:
    radial-gradient(120% 90% at 85% 5%, rgba(73,141,190,.3) 0%, rgba(21,36,60,0) 55%),
    linear-gradient(157deg, #1B2B48 0%, #122237 52%, #0B1726 100%);
}
.cs-hero-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: 2rem; }
.cs-hero-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 6px;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  margin-bottom: 1.5rem;
}
.cs-hero h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1.2rem;
  letter-spacing: -.018em;
  max-width: 20ch;
}
.cs-hero-lead {
  font-size: 1.15rem;
  color: rgba(255,255,255,.7);
  margin-bottom: 2.5rem;
  max-width: 52ch;
}
.cs-hero-metrics {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.cs-hero-metric .cs-hm-num {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  color: var(--blue-bright);
  letter-spacing: -.02em;
  line-height: 1;
}
.cs-hero-metric .cs-hm-label {
  font-size: .75rem;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: .3rem;
}

/* Detail page layout */
.cs-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  align-items: start;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}
.cs-body h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--ink);
  margin: 2.5rem 0 .85rem;
  letter-spacing: -.01em;
}
.cs-body h2:first-child { margin-top: 0; }
.cs-body p { color: var(--body); margin-bottom: 1.1rem; line-height: 1.7; }
.cs-body ul { color: var(--body); padding-left: 1.5rem; margin-bottom: 1.1rem; }
.cs-body ul li { padding: .25rem 0; line-height: 1.6; }

.cs-sidebar { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.cs-sidebar-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  background: var(--white);
}
.cs-sidebar-card h5 { font-size: .95rem; color: var(--ink); margin-bottom: 1.1rem; }
.cs-sidebar-ctas { display: grid; gap: .75rem; }
.cs-sidebar-meta { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft); }
.cs-sidebar-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--body);
}
.cs-sidebar-meta-row span:first-child { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600; }

/* =====================================================================
   23. CONTACT PAGE
   ===================================================================== */
.contact-form-col {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2.5rem;
  box-shadow: 0 26px 58px -36px rgba(14, 42, 69, .32);
}
.contact-form-col h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--navy);
  letter-spacing: -.01em;
}

.acc-form .form-label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .4rem;
}
.acc-form .form-control {
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: .75rem 1rem;
  font-family: var(--font-sans);
  font-size: .95rem;
  color: var(--ink);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.acc-form .form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(73,141,190,.18);
  outline: none;
}
.acc-form .form-control.is-invalid { border-color: #C0392B; }
.acc-form .form-control.is-valid { border-color: var(--teal-mid); }
.acc-form textarea.form-control { resize: vertical; min-height: 120px; }

.contact-info-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: .85rem;
}
.contact-info-text { color: var(--body); font-size: .95rem; }
.contact-info-text a { color: var(--blue-deep); font-weight: 500; }
.contact-info-text a:hover { color: var(--navy); }
.contact-divider { height: 1px; background: var(--line); margin: 1.75rem 0; max-width: 8rem; }

.location-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color .2s, box-shadow .25s, transform .2s;
  text-decoration: none;
}
.location-card:hover {
  border-color: var(--blue-soft);
  box-shadow: 0 16px 36px -26px rgba(14, 42, 69, .4);
  transform: translateY(-2px);
}
.location-card-icon { font-size: 1.5rem; color: var(--blue-deep); flex: none; }
.location-card-name { font-weight: 600; color: var(--ink); font-size: .95rem; }
.location-card-code { font-size: .8rem; color: var(--muted); letter-spacing: .04em; }
.location-card-action { font-size: .8rem; color: var(--blue-deep); margin-top: .35rem; font-weight: 500; }

/* Contact page: simple header + form / info-aside layout (no hero) */
.contact-page { padding-top: calc(var(--nav-h) + var(--topbar-h) + 2.75rem); }
.contact-head { max-width: 60ch; margin-bottom: 3rem; }
.contact-head .breadcrumb-trail { margin-bottom: 1.1rem; }
.contact-head .eyebrow { margin-bottom: .25rem; }
.contact-h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -.022em;
  line-height: 1.08;
  color: var(--ink);
  margin: .1rem 0 .85rem;
}
.contact-lead { font-size: 1.1rem; color: var(--body); line-height: 1.55; margin: 0; }
/* metrics band below the contact form */
.contact-proof { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-soft); }
.contact-layout {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.contact-aside { padding-top: .5rem; }
@media (max-width: 991.98px) {
  .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* =====================================================================
   24. THANK-YOU PAGE
   ===================================================================== */
.thankyou-page {
  min-height: calc(100vh - var(--nav-h) - var(--topbar-h));
  display: flex;
  align-items: center;
  padding-block: 4rem;
}
.thankyou-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: clamp(2.5rem, 5vw, 4rem);
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  box-shadow: 0 24px 60px -40px rgba(14,42,69,.18);
}
.thankyou-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.75rem;
}
.thankyou-icon--success { background: #E6F4F1; color: var(--teal-mid); }
.thankyou-icon--error   { background: #FFF3E8; color: #C0392B; }
.thankyou-card h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--ink);
  letter-spacing: -.015em;
  margin-bottom: .75rem;
}
.thankyou-card p { color: var(--body); font-size: 1.05rem; margin-bottom: 2rem; }
.thankyou-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.thankyou-footnote { font-size: .82rem; color: var(--muted); margin-top: 1.5rem; }

/* =====================================================================
   25. ERROR PAGES
   ===================================================================== */
.error-page {
  min-height: calc(100vh - var(--nav-h) - var(--topbar-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 4rem;
  text-align: center;
}
.error-page-code {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(4rem, 12vw, 9rem);
  color: var(--navy-tint);
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .5rem;
}
.error-page h1 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: var(--ink);
  margin-bottom: .85rem;
}
.error-page p { font-size: 1.05rem; color: var(--body); max-width: 48ch; margin-inline: auto 0 1.75rem; }
.error-page-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.error-page-inner { max-width: 560px; text-align: center; padding: 2.5rem; }

/* =====================================================================
   26. ABOUT / WHO SECTION
   ===================================================================== */
.about-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.about-stat .as-num {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: .5rem;
}
.about-stat .as-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 600;
}
.about-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.team-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  text-align: center;
}
.team-card .tc-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--navy-tint);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 0 auto 1.1rem;
}
.team-card h5 { font-size: 1rem; color: var(--ink); margin-bottom: .3rem; }
.team-card .tc-role { font-size: .82rem; color: var(--blue-deep); font-weight: 500; margin-bottom: .75rem; }
.team-card p { font-size: .88rem; color: var(--body); margin: 0; }

/* =====================================================================
   27. DATA INTELLIGENCE / AI PAGE
   ===================================================================== */
/* TrackvyML · data-intelligence page */
.di-hero-shot { width: 100%; }
.di-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-top: 3.25rem;
}
.di-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem 1.9rem;
  transition: border-color .25s, box-shadow .3s, transform .25s;
}
.di-card:hover {
  border-color: var(--blue-soft);
  box-shadow: 0 24px 52px -32px rgba(14, 42, 69, .5);
  transform: translateY(-3px);
}
.di-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 15px;
  background: var(--navy-tint);
  color: var(--blue-deep);
  font-size: 1.75rem;
  margin-bottom: 1.3rem;
  transition: background .25s, color .25s;
}
.di-card:hover .di-ic { background: var(--blue-deep); color: #fff; }
.di-card-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
}
.di-card-text { font-size: .94rem; color: var(--body); line-height: 1.6; margin: 0 0 1.1rem; }
.di-card .list-arrow { margin: 0; }

.di-edge {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--canvas) 100%);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 2.6rem 2.75rem;
  box-shadow: 0 26px 58px -38px rgba(14, 42, 69, .3);
}
.di-edge-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; flex: none;
  border-radius: 17px;
  background: var(--navy-tint);
  color: var(--blue-deep);
  font-size: 2rem;
}
.di-edge-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -.015em;
  color: var(--navy);
  margin: 0 0 .7rem;
}
.di-edge-text { font-size: 1.05rem; color: var(--body); line-height: 1.6; margin: 0; max-width: 62ch; }
.di-edge-glyph { display: block; font-size: 2.4rem; color: var(--blue-deep); line-height: 1; margin-bottom: .85rem; }
@media (max-width: 991.98px) { .di-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .di-edge { flex-direction: column; gap: 1.25rem; padding: 2rem 1.6rem; } }

/* =====================================================================
   28. CTA FINAL BLOCK
   ===================================================================== */
.cta-final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--white) 0%, var(--canvas) 100%);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 22px;
  padding: clamp(3rem, 6vw, 5rem);
  text-align: center;
  box-shadow: 0 30px 64px -42px rgba(14, 42, 69, .3);
}
.cta-final::after {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--wave-3);
  background-repeat: no-repeat;
  background-position: center 82%;
  background-size: 118% auto;
  -webkit-mask-image: radial-gradient(125% 105% at 50% 100%, #000 0%, transparent 70%);
          mask-image: radial-gradient(125% 105% at 50% 100%, #000 0%, transparent 70%);
}
.cta-final h2 {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  color: var(--ink);
  letter-spacing: -.015em;
  margin-bottom: 1rem;
}
.cta-final h2 em { font-style: italic; color: var(--blue-deep); }
.cta-final p {
  position: relative;
  color: var(--body);
  margin: 0 auto 2rem;
  max-width: 46ch;
  font-size: 1.1rem;
}
.cta-final-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
}

/* =====================================================================
   29. FOOTER
   ===================================================================== */
.acc-footer {
  position: relative;
  overflow: hidden;
  color: rgba(255,255,255,.62);
  padding-block: 4.5rem 2.5rem;
  font-size: .9rem;
  background:
    radial-gradient(120% 130% at 82% 110%, rgba(73,141,190,.30) 0%, rgba(11,23,38,0) 55%),
    radial-gradient(95% 120% at 6% -10%, rgba(57,54,100,.42) 0%, rgba(11,23,38,0) 55%),
    linear-gradient(200deg, #122237 0%, #0E1C30 45%, #0B1726 100%);
}
.acc-footer .acc-wrap { position: relative; z-index: 1; }
.acc-footer a { color: rgba(255,255,255,.62); transition: color .2s; text-decoration: none; }
.acc-footer a:hover { color: #fff; }

.footer-brand-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding-top: 2.5rem;
}
.footer-brand { min-width: 0; }
.footer-brand-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .9rem;
  flex-shrink: 0;
}
.footer-menu-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-brand-logo { height: 28px; width: auto; display: block; margin-bottom: 1.2rem; }
.footer-brand-tagline { max-width: 30ch; color: rgba(255,255,255,.5); font-size: .9rem; }

.acc-footer h6 {
  font-family: var(--font-sans);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  margin: 0 0 1.1rem;
}
.acc-footer ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: .65rem;
}
.acc-footer ul li a { font-size: .88rem; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 2rem;
  flex-wrap: wrap;
}
.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: .82rem;
}
.footer-copyright { font-size: .8rem; color: rgba(255,255,255,.4); }

/* Footer language picker */
/* Language switcher — pill in the footer brand column (under LinkedIn) */
.footer-lang {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  padding: .25rem .35rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
}
.footer-lang > i {
  font-size: .9rem;
  color: rgba(255,255,255,.5);
  margin: 0 .15rem 0 .3rem;
}
.footer-lang-btn {
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: .76rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  padding: .22rem .6rem;
  border-radius: 999px;
  transition: color .2s, background .2s;
}
.footer-lang-btn.on { color: #fff; font-weight: 600; background: rgba(255,255,255,.14); }
.footer-lang-btn:hover { color: #fff; }

/* Footer social icon */
.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.6);
  transition: border-color .2s, color .2s;
  font-size: 1.1rem;
  text-decoration: none;
}
.footer-social-icon:hover { border-color: rgba(255,255,255,.6); color: #fff; }

/* =====================================================================
   30. WHATSAPP FLOAT BUTTON
   ===================================================================== */
.wa-float {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 1050;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 4px 18px rgba(21,36,60,.4);
  text-decoration: none;
  transition: transform .25s, box-shadow .25s, background .25s;
  animation: waPulse 3s ease-in-out infinite;
}
.wa-float:hover {
  transform: scale(1.08);
  background: var(--blue-deep);
  box-shadow: 0 6px 22px rgba(44,90,130,.5);
  color: #fff;
}
@keyframes waPulse {
  0%,100% { box-shadow: 0 4px 18px rgba(21,36,60,.4); }
  50%      { box-shadow: 0 4px 24px rgba(44,90,130,.55), 0 0 0 8px rgba(73,141,190,.1); }
}

/* The badge floats over the WhatsApp button; the footer carries the required
   reCAPTCHA attribution text on every page, so the floating badge stays hidden. */
.grecaptcha-badge { visibility: hidden; }

/* =====================================================================
   31. BREADCRUMB
   ===================================================================== */
.acc-breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.5rem;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}
.acc-breadcrumb a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.acc-breadcrumb a:hover { color: #fff; }
.acc-breadcrumb .active { color: rgba(255,255,255,.85); }
.acc-breadcrumb-sep { opacity: .4; font-size: .75rem; }

/* Light surface breadcrumb */
.acc-breadcrumb--light { color: var(--muted); }
.acc-breadcrumb--light a { color: var(--muted); }
.acc-breadcrumb--light a:hover { color: var(--navy); }
.acc-breadcrumb--light .active { color: var(--body); }

/* =====================================================================
   32. REVEAL ON SCROLL
   ===================================================================== */
/* Content scroll-reveal disabled (June 2026): blocks render immediately, no
   fade/slide on scroll. SVG/exhibit animations use their own hooks (data-inv,
   data-vc, data-animate-hwk, .instrument, etc.) and are unaffected. */
.reveal { opacity: 1; transform: none; }
.reveal.in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
.reveal.delay-3 { transition-delay: .3s; }
.reveal.delay-4 { transition-delay: .4s; }

/* =====================================================================
   33. RESPONSIVE
   ===================================================================== */
@media (max-width: 992px) {
  .hero { padding-top: calc(var(--nav-h) + 1.5rem); min-height: auto; padding-bottom: 3rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-viz { display: none; }
  .hero-interior { padding-top: calc(var(--nav-h) + 1.5rem); }
  .hero-interior--split .hero-interior-inner { grid-template-columns: 1fr; }

  .acc-grid-3, .acc-grid-4, .metrics, .band-points, .footer-menu-row { grid-template-columns: 1fr 1fr; }
  .band-grid { grid-template-columns: 1fr !important; }
  .split-inner { grid-template-columns: 1fr; }
  .split-inner--flip .split-media { order: 0; }
  .service-cards { grid-template-columns: 1fr 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .cs-layout { grid-template-columns: 1fr; }
  .cs-sidebar { position: static; }
  .about-stat-grid, .about-team-grid { grid-template-columns: 1fr 1fr; }
  .acc-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .acc-wrap { padding-inline: 1.3rem; }
  .acc-grid-2, .acc-grid-3, .acc-grid-4, .metrics, .band-points,
  .footer-menu-row, .service-cards, .compare-grid, .about-stat-grid,
  .about-team-grid, .acc-carousel .row { grid-template-columns: 1fr; }
  .metric-cell { border-left: 0; border-top: 1px solid var(--line); padding: 1.4rem 0; }
  .metric-cell:first-child { border-top: 0; }
  .hero h1 { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .footer-menu-row { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .cta-final { border-radius: 14px; }
  .hwk-timeline { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 0; }
  .hwk-rail, .hwk-rail-fill { display: none; }
  .hwk-node { text-align: left; padding-left: 2.5rem; }
  .hwk-dot { position: absolute; left: 0; top: 3px; margin: 0; }
  .cs-hero-metrics { flex-direction: column; gap: 1.5rem; }
  .thankyou-card { padding: 2rem 1.5rem; }
}

@media (max-width: 480px) {
  .footer-menu-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   34. RFID / VERTICAL PAGE COMPONENTS
   ===================================================================== */

/* Breadcrumb trail (hero pages, light + dark) */
.breadcrumb-trail {
  display: flex; align-items: center; gap: .5rem;
  font-size: .82rem; color: rgba(255,255,255,.5);
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.breadcrumb-trail a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.breadcrumb-trail a:hover { color: #fff; }
.breadcrumb-trail span { opacity: .4; }
.hero-interior--light .breadcrumb-trail { color: var(--muted); }
.hero-interior--light .breadcrumb-trail a { color: var(--muted); }
.hero-interior--light .breadcrumb-trail a:hover { color: var(--navy); }

/* Hero badge (dark hero industry/geo pages) */
.hero-badge {
  display: inline-block;
  padding: .22rem .75rem;
  background: rgba(73,141,190,.2);
  color: var(--blue-bright);
  border-radius: 2rem;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}

/* 4-column grid */
.acc-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.25rem; }

/* Use-case mini-card grid (2×N, right side of split section) */
.uc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.uc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 1px 4px rgba(14,42,69,.06);
}
.uc-card h6 { font-size: .9rem; font-weight: 600; color: var(--ink); margin-bottom: .25rem; }
.uc-card p { font-size: .82rem; color: var(--muted); margin: 0; line-height: 1.45; }

/* Qué hacemos — concrete use-case strip: the "what", sitting under the 3 method pillars.
   Reuses .uc-card; five linked cards, wraps to 2-up then 1-up on narrow viewports. */
.wwd-cases-head { text-align: center; margin: 3rem 0 1.35rem; }
.wwd-cases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.wwd-cases .uc-card {
  display: flex; flex-direction: column; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.wwd-cases .uc-card .uc-ic { font-size: 1.5rem; line-height: 1; color: var(--blue-bright); margin-bottom: .55rem; }
.wwd-cases .uc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -20px rgba(14, 42, 69, .45);
  border-color: var(--blue-bright);
}
@media (max-width: 991.98px) { .wwd-cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .wwd-cases { grid-template-columns: 1fr; } }

/* Deep capabilities 4-col grid */
.deep-caps { padding-block: clamp(3rem,6vw,5.5rem); background: var(--canvas); }
.deep-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 2rem; }
.deep-col h5 { font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.deep-col p { font-size: .84rem; color: var(--muted); margin: 0; line-height: 1.55; }

/* Inline case-study row cards (industry pages, 3-col) */
.rfid-cs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.rfid-cs-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  transition: border-color .25s, box-shadow .25s;
}
.rfid-cs-card:hover { border-color: var(--navy-tint); box-shadow: 0 18px 40px -30px rgba(14,42,69,.18); }
.rfid-cs-badge {
  display: inline-block; padding: .2rem .65rem;
  background: rgba(73,141,190,.12); color: var(--blue-deep);
  border-radius: 4px; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: .75rem;
}
.rfid-cs-card h5 { font-size: 1rem; color: var(--ink); margin-bottom: .5rem; }
.rfid-cs-card p { font-size: .875rem; color: var(--body); margin-bottom: 1rem; }
.rfid-cs-card .link-arrow { font-size: .875rem; }

/* Solution link cards (4-col, geo/hub pages) */
.sol-card {
  display: block;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 1.5rem;
  text-align: center; text-decoration: none; color: inherit;
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.sol-card:hover { border-color: var(--navy); box-shadow: 0 12px 30px -20px rgba(14,42,69,.2); transform: translateY(-2px); color: inherit; }
.sol-card .sol-icon { font-size: 2rem; color: var(--blue); margin-bottom: .75rem; display: block; }
.sol-card h5 { font-size: 1rem; color: var(--ink); margin-bottom: .4rem; }
.sol-card p { font-size: .84rem; color: var(--muted); margin: 0; }

/* Office card (light editorial, geo pages) */
.office-card {
  background: linear-gradient(180deg, var(--white) 0%, var(--canvas) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.85rem 1.85rem 1.6rem;
  color: var(--ink);
  height: 100%;
  transition: border-color .2s, box-shadow .25s, transform .2s;
}
.office-card:hover { border-color: var(--blue-soft); box-shadow: 0 22px 46px -30px rgba(14,42,69,.45); transform: translateY(-2px); }
.office-card-city { font-weight: 700; font-size: 1.18rem; letter-spacing: -.01em; margin-bottom: .25rem; color: var(--navy); }
.office-card-region { font-size: .82rem; color: var(--muted); margin-bottom: 1rem; }
.office-card-address { font-size: .9rem; color: var(--body); margin-bottom: 1.1rem; line-height: 1.55; }
.office-card hr { border: 0; border-top: 1px solid var(--line); margin-block: 1.1rem; }
.office-card-link { font-size: .9rem; color: var(--blue-deep); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .5rem; transition: color .2s; }
.office-card-link i { font-size: 1.05em; }
.office-card-link:hover { color: var(--navy); }
.office-card-link:last-child { margin-bottom: 0; }

/* aligned contact bar (shared phone/WhatsApp under the office cards) */
.office-contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  padding: .95rem 1.35rem; margin-bottom: 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
}
.office-contact .office-card-link { margin-bottom: 0; }

/* Live dot pulse (office cards on geo pages) */
.co-live-dot {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; background: #2C8A6A;
  margin-bottom: .75rem;
  animation: co-live 2s ease-in-out infinite;
}
@keyframes co-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44,138,106,.45); }
  60%       { box-shadow: 0 0 0 7px rgba(44,138,106,0); }
}

/* National network card (colombia hub page) */
.office-network { background: var(--navy-tint); border: 1px solid var(--line); border-radius: 16px; padding: 1.6rem; color: var(--ink); }
.office-network-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; color: var(--blue-deep); font-size: 1.1rem; }
.office-network-title { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); }
.office-network p { font-size: .9rem; color: var(--body); margin-bottom: 1rem; }
.office-network-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.office-network-tag { display: inline-block; padding: .32rem .72rem; background: var(--white); border: 1px solid var(--line); color: var(--navy); border-radius: 2rem; font-size: .78rem; font-weight: 500; }

/* Why-reason cards 2×2 (colombia why section) */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.why-card { background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; text-align: center; }
.why-card .wc-icon { font-size: 1.75rem; color: var(--blue); display: block; margin-bottom: .5rem; }
.why-card h5 { font-size: .93rem; font-weight: 600; color: var(--ink); margin-bottom: .25rem; }
.why-card p { font-size: .8rem; color: var(--muted); margin: 0; }

/* Pointer list (replaces HubSpot list-pointer) */
.list-arrow { list-style: none; margin: 0; padding: 0; }
.list-arrow li { position: relative; padding: .55rem 0 .55rem 1.6rem; border-top: 1px solid var(--line-soft); font-size: .96rem; color: var(--body); }
.list-arrow li:first-child { border-top: 0; }
.list-arrow li::before { content: "\2192"; position: absolute; left: 0; color: var(--blue-deep); font-size: .85rem; }

/* TrackvyML section image wrapper */
.trackvyml-bg { background: var(--canvas); border-radius: var(--radius-card); padding: 1.75rem; border: 1px solid var(--line); }

/* =====================================================================
   31. CASE STUDY PAGES
   ===================================================================== */
.cs-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + var(--topbar-h) + 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem;
  background: #fff;
}
.cs-sidebar h5 { font-size: 1rem; color: var(--navy); margin-bottom: 1.25rem; }
.cs-metric-num { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1; color: #fff; }
.cs-metric-label { font-size: .78rem; color: rgba(255,255,255,.68); margin-top: .25rem; }

/* =====================================================================
   32. PERSPECTIVE / INSIGHTS ARTICLES (pvv, roi)
   ===================================================================== */
.pvv-hero-title { line-height: .95; }
.pvv-cover-img { object-fit: cover; object-position: center bottom; max-height: 480px; width: 100%; display: block; }
.pvv-axis-label { text-transform: uppercase; }

.insights-body { max-width: 880px; margin-inline: auto; }
.insights-body p, .insights-body li { font-size: 1.0625rem; line-height: 1.7; }
.insights-body h2 { font-size: 2rem; margin-top: 3rem; margin-bottom: 1rem; }
.insights-body h3 { font-size: 1.375rem; margin-top: 2rem; margin-bottom: .75rem; }
.insights-lead { font-size: 1.375rem; line-height: 1.5; color: var(--body); }

.pvv-chart-outer { width: 100%; padding-inline: 16px; }
@media (min-width:768px)  { .pvv-chart-outer { padding-inline: 24px; } }
@media (min-width:1200px) { .pvv-chart-outer { padding-inline: 0; } }
.pvv-chart-wrap { position: relative; width: 100%; max-width: 1320px; margin-inline: auto; }
.pvv-chart-wrap svg { display: block; width: 100%; height: auto; }
.pvv-milestone { pointer-events: none; }
@media (max-width:575px) { .pvv-milestone text { font-size: 9px !important; } }
.pvv-replay { display: none; text-align: right; padding-top: 10px; font-size: .875rem; font-weight: 600; color: var(--muted); text-decoration: none; transition: color .2s; cursor: pointer; }
.pvv-replay:hover { color: var(--blue); }
.pvv-replay.visible { display: block; }

.pvv-table { font-size: 1rem; }
.pvv-table td { padding: 1rem .75rem; vertical-align: top; }
.pvv-table .pvv-dim { color: var(--blue); font-weight: 800; font-size: 1.5rem; width: 60px; }
.pvv-table .pvv-name { font-weight: 700; width: 160px; }

.pattern-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--blue); padding: 2rem 1.75rem; height: 100%; transition: box-shadow .2s, transform .2s; }
.pattern-card:hover { box-shadow: 0 .375rem 1.5rem 0 rgba(140,152,164,.125); transform: translateY(-2px); }
.pattern-num { font-size: .875rem; font-weight: 800; color: var(--blue); letter-spacing: .12em; margin-bottom: .75rem; }
.pattern-headline { font-size: 1.25rem; font-weight: 700; line-height: 1.35; margin-bottom: .75rem; color: var(--navy); }
.pattern-body { color: var(--muted); font-size: .9375rem; line-height: 1.6; }

.erosion-step { padding: 1.5rem 1.25rem; border-left: 3px solid #C48C7E; background: #faf8f7; height: 100%; }
.erosion-step .step-eyebrow { color: #C48C7E; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.arch-panel { background: var(--paper); padding: 2.5rem 2rem; height: 100%; border-radius: var(--radius-card); }
.arch-panel h4 { margin-bottom: 1rem; }
.arch-panel.arch-dark { background: var(--navy); color: #fff; }
.arch-panel.arch-dark h4 { color: #fff; }
.arch-panel .arch-eyebrow { color: var(--blue); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.arch-panel.arch-dark .arch-eyebrow { color: var(--blue-bright); }
.arch-panel.arch-dark p { color: rgba(255,255,255,.7); }

.pull-quote { border-left: 5px solid var(--blue); padding: 1.5rem 0 1.5rem 2rem; margin: 3rem 0; font-size: 1.5rem; line-height: 1.4; font-weight: 600; color: var(--navy); }

/* =====================================================================
   32. ROI EXHIBIT CHART
   ===================================================================== */
.exhibit-card { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 2.25rem 2rem 1.5rem; background: #fff; box-shadow: 0 1px 2px rgba(140,152,164,.05); }
.exhibit-eyebrow { font-size: .72rem; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; font-weight: 600; margin-bottom: .5rem; }
.exhibit-title { font-size: 1.5rem; color: var(--navy); margin-bottom: .5rem; font-weight: 600; line-height: 1.25; }
.exhibit-subtitle { font-size: .95rem; color: var(--muted); margin-bottom: 1.75rem; }
.exhibit-row { display: grid; grid-template-columns: 200px 1fr 130px; gap: 1.5rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--line-soft); }
.exhibit-row:first-of-type { border-top: none; padding-top: .5rem; }
.exhibit-metric-name { display: block; font-weight: 600; color: var(--navy); font-size: .95rem; line-height: 1.25; }
.exhibit-metric-unit { display: block; font-size: .72rem; color: var(--muted); margin-top: .15rem; letter-spacing: .04em; }
.exhibit-bar-track { position: relative; height: 36px; }
.exhibit-bar-bg { position: absolute; top: 14px; bottom: 14px; left: 0; right: 0; background: var(--canvas); border-radius: 4px; }
.exhibit-bar-before,
.exhibit-bar-after { position: absolute; left: 0; width: 0; border-radius: 4px; transition: width 1.2s var(--ease); }
.exhibit-bar-before { top: 14px; bottom: 14px; background: #c9d2dd; transition-delay: .1s; }
.exhibit-bar-after { top: 9px; bottom: 9px; background: linear-gradient(90deg, var(--blue-deep) 0%, var(--blue) 100%); box-shadow: 0 1px 4px rgba(73,141,190,.25); transition-delay: .4s; }
[data-animate-roi="in"] .exhibit-bar-before { width: var(--w-before, 0%); }
[data-animate-roi="in"] .exhibit-bar-after  { width: var(--w-after, 0%); }
.exhibit-row:nth-of-type(2) .exhibit-bar-before { transition-delay: .25s; }
.exhibit-row:nth-of-type(2) .exhibit-bar-after  { transition-delay: .55s; }
.exhibit-row:nth-of-type(3) .exhibit-bar-before { transition-delay: .40s; }
.exhibit-row:nth-of-type(3) .exhibit-bar-after  { transition-delay: .70s; }
.exhibit-result { text-align: right; }
.exhibit-result-before { display: inline-block; font-size: .8rem; color: var(--muted); text-decoration: line-through; margin-right: .4rem; }
.exhibit-result-after { display: inline-block; font-size: 1.4rem; font-weight: 600; color: var(--blue-deep); letter-spacing: -.01em; opacity: 0; transform: translateY(4px); transition: opacity .5s ease-out 1.2s, transform .5s ease-out 1.2s; }
.exhibit-row:nth-of-type(2) .exhibit-result-after { transition-delay: 1.4s; }
.exhibit-row:nth-of-type(3) .exhibit-result-after { transition-delay: 1.6s; }
[data-animate-roi="in"] .exhibit-result-after { opacity: 1; transform: translateY(0); }
.exhibit-payoff { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 2px solid var(--navy); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; opacity: 0; transform: translateY(6px); transition: opacity .6s ease-out 1.9s, transform .6s ease-out 1.9s; }
[data-animate-roi="in"] .exhibit-payoff { opacity: 1; transform: translateY(0); }
.exhibit-payoff-label { font-size: .72rem; letter-spacing: .22em; color: var(--navy); text-transform: uppercase; font-weight: 600; }
.exhibit-payoff-value { font-size: 1.6rem; font-weight: 600; color: var(--navy); letter-spacing: -.01em; }
.exhibit-source { font-size: .8125rem; color: var(--muted); margin-top: 1.25rem; margin-bottom: 0; line-height: 1.5; max-width: 62ch; }
@media (max-width:767.98px) {
  .exhibit-row { grid-template-columns: 1fr; gap: .5rem; }
  .exhibit-result { text-align: left; }
}

/* =====================================================================
   33. SERVICES HUB PAGE
   ===================================================================== */
.svc-sidenav { position: sticky; top: calc(var(--nav-h) + var(--topbar-h) + 1.5rem); }
.svc-sidenav .svc-nav-group { margin-bottom: 1.5rem; }
.svc-sidenav .svc-nav-label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: .5rem; display: block; }
.svc-sidenav .svc-nav-links { list-style: none; padding: 0; margin: 0; }
.svc-sidenav .svc-nav-links li + li { border-top: 1px solid var(--line-soft); }
.svc-sidenav .svc-nav-links a { display: flex; align-items: center; gap: .5rem; padding: .55rem .25rem; font-size: .9rem; color: var(--body); text-decoration: none; }
.svc-sidenav .svc-nav-links a:hover { color: var(--blue); }
.svc-sidenav .svc-nav-links i { font-size: 1.1rem; color: var(--blue); flex-shrink: 0; }

.svc-group { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 2rem; }
.svc-group-header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.svc-group-title { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin: 0; }
.svc-item { display: flex; gap: 1rem; }
.svc-item-ic { font-size: 1.5rem; color: var(--blue); flex-shrink: 0; margin-top: .15rem; }
.svc-item-title { font-size: .95rem; font-weight: 600; color: var(--navy); margin-bottom: .25rem; }
.svc-item-text { font-size: .95rem; color: var(--body); margin-bottom: .4rem; }

/* =====================================================================
   34. HARDWARE PAGE
   ===================================================================== */
.hw-photo { width: 100%; object-fit: cover; min-height: 22rem; border-radius: var(--radius-card); display: block; }
@media (min-width: 768px) { .hw-photo { min-height: 28rem; } }

/* Anchor scroll compensation — absorbs nav + topbar height on fragment links */
.js-anchor { scroll-margin-top: calc(var(--nav-h) + var(--topbar-h) + 1rem); }

/* Metrics grid variant — gap + vertical centering */
.acc-grid-2--metrics { gap: clamp(2rem,5vw,5rem); align-items: center; }
/* Four metric cells in a half-width column collapse to ~150px each;
   a 2x2 arrangement keeps the figures and captions readable. */
.acc-grid-2--metrics .metrics { grid-template-columns: repeat(2, 1fr); gap: 2.2rem 0; }
.acc-grid-2--metrics .metric-cell:nth-child(odd) { border-left: 0; padding-left: 0; }

/* Sticky sidebar with nav-aware top offset */
.acc-sticky-top { position: sticky; top: calc(var(--nav-h) + var(--topbar-h) + 1rem); }

/* Case study listing card helpers */
.cs-eyebrow-sm { font-size: .65rem; letter-spacing: .08em; }
.cs-m-label { font-size: .7rem; }

/* Responsive */
@media (max-width: 992px) {
  .deep-grid, .rfid-cs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .uc-grid, .why-grid, .deep-grid, .rfid-cs-grid, .acc-grid-4 { grid-template-columns: 1fr; }
}

.wiz-wave { margin-bottom: -.125rem; }
.wiz-ic { border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,.12); margin: 0 auto; width: 3.5rem; height: 3.5rem; }
.wiz-ic--lg { width: 4.5rem; height: 4.5rem; }
.wiz-ic-1 { background: #e8f0fe; }
.wiz-ic-2 { background: #e6f9f5; }
.wiz-ic-3 { background: #fff3cd; }
.wiz-ic-4 { background: #fce8f3; }
.wiz-ic-5 { background: #fff0e6; }
.wiz-ic-6 { background: #e8f8e8; }
.wiz-ic-i-1 { font-size: 1.5rem; color: #377dff; }
.wiz-ic-i-2 { font-size: 1.5rem; color: #00c9a7; }
.wiz-ic-i-3 { font-size: 2rem; color: #f0a500; }
.wiz-ic-i-4 { font-size: 2rem; color: #d63384; }
.wiz-ic-i-5 { font-size: 1.5rem; color: #fd7e14; }
.wiz-ic-i-6 { font-size: 1.5rem; color: #198754; }
.wiz-ic-label { font-size: .7rem; font-weight: 600; color: var(--muted); text-align: center; margin-top: .5rem; }
.wiz-float-6 { margin-top: -2rem !important; }
.wiz-float-7 { margin-top: -2.5rem !important; }
.wiz-float-10 { margin-top: -4rem !important; }

/* =====================================================================
   §12. INTERIOR HERO — reusable dark hero for inner pages
   Default: dark gradient only.
   Image variant: add class "has-image" + set background-image inline.
   ===================================================================== */
.interior-hero {
  position: relative; overflow: hidden;
  min-height: 52vh; display: flex; align-items: flex-end;
  padding-top: calc(var(--nav-h) + var(--topbar-h) + 3.5rem);
  padding-bottom: 3.5rem;
  background:
    radial-gradient(110% 100% at 85% 0%, rgba(73,141,190,.28) 0, rgba(21,36,60,0) 52%),
    radial-gradient(90% 90% at 4% 100%, rgba(57,54,100,.36) 0, rgba(21,36,60,0) 52%),
    linear-gradient(158deg, #192B45 0%, #111E31 55%, #0B1726 100%);
  color: #fff;
}
.interior-hero.has-image { background-size: cover; background-position: center; }
.interior-hero.has-image::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(11,23,38,.9) 35%, rgba(11,23,38,.55));
}
.interior-hero .acc-wrap { position: relative; z-index: 2; max-width: 860px; }

.ih-breadcrumb {
  display: flex; align-items: center; gap: .45rem;
  font-size: .8rem; color: rgba(255,255,255,.46); margin-bottom: 1.3rem;
}
.ih-breadcrumb a { color: rgba(255,255,255,.46); transition: color .2s; }
.ih-breadcrumb a:hover { color: rgba(255,255,255,.82); }
.ih-breadcrumb .sep { opacity: .35; }
.ih-breadcrumb .current { color: rgba(255,255,255,.7); font-weight: 500; }

.ih-eyebrow { color: rgba(255,255,255,.5); margin-bottom: 1rem; }
.ih-eyebrow .dot { background: var(--blue); box-shadow: 0 0 0 3px rgba(73,141,190,.2); }

.ih-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.07;
  letter-spacing: -.02em; color: #fff; margin-bottom: 1rem;
}
.ih-title em { font-style: italic; color: var(--blue-bright); }

.ih-lead {
  font-size: 1.08rem; line-height: 1.56;
  color: rgba(255,255,255,.7); max-width: 54ch; margin-bottom: 1.8rem;
}
.ih-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* =====================================================================
   §13. CASE STUDIES — layout, sidebar, cards
   ===================================================================== */

.cs-section { padding-block: clamp(3rem,6vw,5rem); }
.cs-layout { display: grid; grid-template-columns: 300px 1fr; gap: 3.5rem; align-items: start; }
.cs-sidebar { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.cs-main { min-width: 0; }
/* let the sidebar CTA wrap instead of clipping in the narrow column */
.cs-sidebar .btn-acc { white-space: normal; line-height: 1.25; text-align: center; }

.cs-filter-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .85rem;
}
.cs-filter-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 2px; }
.cs-filter-list li {
  font-size: .91rem; font-weight: 500; color: var(--body);
  padding: .62rem .9rem; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; gap: .6rem;
  transition: background .18s, color .18s;
}
.cs-filter-list li .fd { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex: none; transition: background .2s; }
.cs-filter-list li:hover { background: var(--canvas); color: var(--ink); }
.cs-filter-list li.active { background: var(--navy); color: #fff; }
.cs-filter-list li.active .fd { background: var(--blue-bright); box-shadow: 0 0 0 3px rgba(110,164,203,.22); }

[data-fcat="tools"]     .fd, .case-card[data-cat="tools"]     .cc-dot { background: var(--blue-deep)   !important; }
[data-fcat="assets"]    .fd, .case-card[data-cat="assets"]    .cc-dot { background: var(--teal-mid)    !important; }
[data-fcat="logistics"] .fd, .case-card[data-cat="logistics"] .cc-dot { background: var(--blue)        !important; }
[data-fcat="audit"]     .fd, .case-card[data-cat="audit"]     .cc-dot { background: var(--indigo-soft) !important; }
[data-fcat="custom"]    .fd, .case-card[data-cat="custom"]    .cc-dot { background: var(--sage)        !important; }
[data-fcat="retail"]    .fd, .case-card[data-cat="retail"]    .cc-dot { background: var(--teal-deep)   !important; }

.cs-stat-widget {
  position: relative; overflow: hidden;
  background: var(--navy-tint); border-radius: var(--radius-card);
  padding: 1.6rem 1.4rem; text-align: center; margin-bottom: 1.2rem;
  border: 1px solid var(--line);
}
.cs-stat-widget::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 90% at 50% -10%, rgba(44,90,130,.08) 0, transparent 60%);
}
.cs-stat-num {
  position: relative; font-family: var(--font-serif); font-weight: 400;
  font-size: 2.8rem; color: var(--navy); letter-spacing: -.02em; line-height: 1; margin-bottom: .35rem;
}
.cs-stat-lbl {
  position: relative; font-size: .78rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: .25rem;
}
.cs-stat-sub { position: relative; font-size: .76rem; color: var(--muted); }

.cs-feat {
  display: flex; flex-direction: column; gap: 1rem;
  text-decoration: none; cursor: pointer;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1.8rem, 3vw, 3rem);
  margin-bottom: 2.5rem;
  border-left: 4px solid var(--blue);
  transition: border-color .3s, box-shadow .3s;
}
.cs-feat:hover { border-color: var(--blue-deep); box-shadow: 0 20px 50px -36px rgba(14,42,69,.22); }
.cs-feat .cf-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.cs-feat .cf-badge .cc-dot { width: 7px; height: 7px; border-radius: 50%; }
.cs-feat .cf-title {
  font-family: var(--font-serif); font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-weight: 400; color: var(--ink); letter-spacing: -.015em; line-height: 1.1; margin: 0;
}
.cs-feat .cf-desc { font-size: 1rem; color: var(--body); max-width: 58ch; margin: 0; line-height: 1.55; }
.cs-feat .cf-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; font-weight: 600; color: var(--blue-deep); margin-top: .2rem;
}
.cs-feat .cf-cta i { transition: transform .3s; }
.cs-feat:hover .cf-cta i { transform: translateX(4px); }

.cs-cat-hero {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 2rem 2.4rem;
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 2rem; margin-bottom: 2rem;
}
.cs-cat-hero h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 1.75rem; color: var(--ink); margin-bottom: .5rem; letter-spacing: -.01em;
}
.cs-cat-hero p { color: var(--body); margin: 0; font-size: .95rem; max-width: 52ch; }

.cs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }

.case-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.case-card:hover {
  border-color: rgba(73,141,190,.32);
  box-shadow: 0 20px 50px -36px rgba(14,42,69,.38);
  transform: translateY(-2px);
}
.case-card.hidden { display: none; }

.cc-body { padding: 1.7rem; display: flex; flex-direction: column; flex: 1; }
.cc-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1rem;
}
.cc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--muted); }
.cc-title { font-weight: 600; font-size: 1.07rem; color: var(--ink); line-height: 1.35; margin: 0 0 .4rem; letter-spacing: -.005em; }
.cc-label { font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); margin: 0 0 .55rem; }
.cc-desc { font-size: .91rem; color: var(--body); line-height: 1.55; margin: 0; flex: 1; }

.cc-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-soft); margin-top: 1.4rem; padding-top: 1rem; gap: 0;
}
.cc-metric { padding: 0 .75rem; border-left: 1px solid var(--line-soft); }
.cc-metric:first-child { border-left: 0; padding-left: 0; }
.cc-num {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: 1.18rem; color: var(--blue-deep); letter-spacing: -.01em; line-height: 1.15; margin-bottom: .15rem;
}
.cc-mlab { display: block; font-size: .65rem; letter-spacing: .03em; color: var(--muted); line-height: 1.4; }

.cs-intro { font-size: .88rem; color: var(--muted); margin-bottom: 1.6rem; }
.cs-intro a { color: var(--blue-deep); font-weight: 500; }

@media (max-width: 1024px) { .cs-layout { grid-template-columns: 264px 1fr; gap: 2.2rem; } }
@media (max-width: 768px) {
  .cs-layout { grid-template-columns: 1fr; }
  .cs-sidebar { position: static; }
  .cs-grid { grid-template-columns: 1fr; }
  /* stack the category cross-link card and let its CTA wrap so it never spills past the card */
  .cs-cat-hero { grid-template-columns: 1fr; padding: 1.5rem 1.4rem; }
  .cs-cat-hero .btn-acc { white-space: normal; justify-self: start; line-height: 1.25; }
  .interior-hero { min-height: 44vh; align-items: flex-start; padding-top: calc(var(--nav-h) + var(--topbar-h) + 2rem); }
}

/* =====================================================================
   §14. RFID SIGNAL FIELD
   Decorative concentric reads radiating from the top-right of the
   rfid/* interior heroes. Sits behind the copy (acc-wrap is z-index 2),
   masked toward the headline so it never competes with the text.
   ===================================================================== */
.hero-interior--signal { position: relative; }
.rfid-signal {
  position: absolute;
  top: 0; right: 0;
  width: min(62%, 760px);
  height: 100%;
  color: var(--blue);
  pointer-events: none;
  z-index: 1;
  opacity: .9;
  -webkit-mask-image: linear-gradient(255deg, #000 18%, transparent 86%);
          mask-image: linear-gradient(255deg, #000 18%, transparent 86%);
}
.rfid-signal svg { width: 100%; height: 100%; display: block; }

/* Rings emit outward: each one brightens slightly after the last,
   so the bright phase travels from the core toward the edge. */
.rfid-signal .sig-ring {
  stroke-width: 1.3;
  opacity: .14;
  animation: sigPulse 5.6s ease-in-out infinite;
}
.rfid-signal .sig-ring-1 { animation-delay: 0s;    }
.rfid-signal .sig-ring-2 { animation-delay: .45s;  }
.rfid-signal .sig-ring-3 { animation-delay: .9s;   }
.rfid-signal .sig-ring-4 { animation-delay: 1.35s; }
.rfid-signal .sig-ring-5 { animation-delay: 1.8s;  }
@keyframes sigPulse {
  0%, 100% { opacity: .08; }
  45%      { opacity: .32; }
}

@media (max-width: 768px) {
  .rfid-signal { width: 78%; opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  .rfid-signal .sig-ring { animation: none; opacity: .16; }
}

/* =====================================================================
   §15. CAPABILITY CARDS ("¿Cómo ayudamos?")
   Editorial grid: serif index, icon chip, refined hover lift.
   ===================================================================== */
.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  margin-top: 3.25rem;
}
.help-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem 1.85rem 1.9rem;
  overflow: hidden;
  transition: border-color .25s, box-shadow .3s, transform .25s;
}
.help-card:hover {
  border-color: var(--blue-soft);
  box-shadow: 0 24px 52px -32px rgba(14, 42, 69, .5);
  transform: translateY(-3px);
}
.help-num {
  position: absolute;
  top: .85rem; right: 1.35rem;
  font-family: var(--font-serif);
  font-size: 2.7rem;
  line-height: 1;
  color: var(--navy-tint);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: color .25s;
}
.help-card:hover .help-num { color: var(--green-tint); }
.help-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  border-radius: 15px;
  background: var(--navy-tint);
  color: var(--blue-deep);
  font-size: 1.85rem;
  margin-bottom: 1.4rem;
  position: relative;
  transition: background .25s, color .25s;
}
.help-card:hover .help-ic { background: var(--blue-deep); color: #fff; }
.help-title {
  font-family: var(--font-sans);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0 0 .55rem;
}
.help-text { font-size: .92rem; color: var(--body); line-height: 1.6; margin: 0; }
@media (max-width: 991.98px) { .help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px)  { .help-grid { grid-template-columns: 1fr; } }

/* Icon chip fallback for legacy .pillar-icon usages (was unstyled, tiny). */
.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--navy-tint);
  color: var(--blue-deep);
  font-size: 1.7rem;
  margin-bottom: 1.25rem;
}

/* =====================================================================
   §16. VALUE-PROP CARDS (rfid-promo) · CTA BAND (cta1) ·
        CASE-STUDY CTA SIDEBAR · MANAGED-SERVICES COLLAGE
   Editorial replacements for the legacy HubSpot-theme partials.
   ===================================================================== */

/* ---- Value proposition: Plataforma / Equipos / Servicios ---- */
.vp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  text-align: left;
}
.vp-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2.1rem 1.9rem 1.9rem;
  transition: border-color .25s, box-shadow .3s, transform .25s;
}
.vp-card:hover {
  border-color: var(--blue-soft);
  box-shadow: 0 24px 52px -32px rgba(14, 42, 69, .5);
  transform: translateY(-3px);
}
.vp-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: 16px;
  background: var(--navy-tint);
  color: var(--blue-deep);
  font-size: 1.9rem;
  margin-bottom: 1.4rem;
  transition: background .25s, color .25s;
}
.vp-card:hover .vp-ic { background: var(--blue-deep); color: #fff; }
.vp-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0 0 .55rem;
}
.vp-text { font-size: .94rem; color: var(--body); line-height: 1.6; margin: 0 0 1.25rem; }
.vp-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.vp-list li {
  position: relative;
  padding: .5rem 0 .5rem 1.6rem;
  font-size: .9rem;
  color: var(--ink);
  border-top: 1px solid var(--line-soft);
}
.vp-list li:first-child { border-top: 0; }
.vp-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: .5rem; height: .5rem;
  margin-top: -.25rem;
  border-radius: 50%;
  background: var(--blue);
}
.vp-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--blue-deep);
  text-decoration: none;
  transition: gap .2s, color .2s;
}
.vp-link i { transition: transform .25s var(--ease); }
.vp-link:hover { color: var(--navy); }
.vp-link:hover i { transform: translateX(4px); }
@media (max-width: 991.98px) { .vp-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ---- Soft wave field, reused by the light CTAs ---- */
.cta-wave-bg::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='240' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%232C5A82'%3E%3Cpath d='M0 120 C 240 50 480 190 720 120 S 1200 50 1440 120' stroke-width='1.4' opacity='0.20'/%3E%3Cpath d='M0 152 C 240 82 480 222 720 152 S 1200 82 1440 152' stroke-width='1.2' opacity='0.13'/%3E%3Cpath d='M0 88 C 240 18 480 158 720 88 S 1200 18 1440 88' stroke-width='1.2' opacity='0.13'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
}

/* ---- Light CTA band ("¿Listo para comenzar...?") ---- */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--canvas) 100%);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2.6rem 2.9rem;
  color: var(--ink);
  box-shadow: 0 28px 60px -38px rgba(14, 42, 69, .32);
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--wave-3);
  background-repeat: no-repeat;
  background-position: center 70%;
  background-size: 135% auto;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 60%);
          mask-image: linear-gradient(to left, #000 0%, transparent 60%);
}
.cta-band-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  flex: none;
  border-radius: 16px;
  background: var(--navy-tint);
  color: var(--blue-deep);
  font-size: 1.9rem;
}
.cta-band-body { flex: 1; min-width: 0; }
.cta-band-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0;
}
.cta-band .btn-acc { flex: none; }
@media (max-width: 767.98px) {
  .cta-band { flex-direction: column; align-items: flex-start; gap: 1.4rem; padding: 2rem 1.75rem; text-align: left; }
  .cta-band .btn-acc { width: 100%; justify-content: center; }
}

/* ---- Case-study CTA sidebar (light; buttons wrap, no truncation) ---- */
.cs-cta-card {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, var(--white) 0%, var(--canvas) 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2.1rem 1.9rem;
  color: var(--ink);
  box-shadow: 0 24px 50px -34px rgba(14, 42, 69, .3);
}
.cs-cta-card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--wave-2);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 170% auto;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%);
          mask-image: linear-gradient(to top, #000 0%, transparent 72%);
}
.cs-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin: 0 0 1rem;
}
.cs-cta-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.cs-cta-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 1.5rem;
}
.cs-cta-card .btn-acc {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
}
.cs-cta-card .btn-acc + .btn-acc { margin-top: .7rem; }

/* ---- Managed-services photo collage ---- */
.ms-collage {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 1.4rem;
  align-items: end;
}
.ms-frame {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 56px -30px rgba(14, 42, 69, .45);
  border: 1px solid var(--line);
}
.ms-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-frame--tall img { aspect-ratio: 3 / 4; }
.ms-frame--wide img { aspect-ratio: 4 / 3; }
/* --logo: a brand logo contained (never cropped) on a soft panel */
.ms-frame--logo {
  background: var(--canvas);
  box-shadow: none;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3;
  padding: clamp(1.75rem, 5vw, 3.5rem);
}
.ms-frame--logo img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.ms-frame--white { background: #fff; }
/* --shot: a portrait app screenshot framed (contained, not cropped) in a soft box */
.ms-frame--shot {
  background: var(--canvas);
  display: flex; align-items: center; justify-content: center;
  padding: 1.75rem;
}
.ms-frame--shot img {
  width: auto; height: auto;
  max-width: 80%; max-height: 460px;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 18px 40px -22px rgba(14, 42, 69, .45);
}
/* --screen: a wide dashboard/app screenshot shown in full, flat on its card.
   No border, shadow, or rounding; sizes to the container width. */
.ms-frame--screen { border: 0; box-shadow: none; border-radius: 0; }
.ms-frame--screen img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
@media (max-width: 575.98px) {
  .ms-collage { grid-template-columns: 1fr; }
  .ms-frame--tall img, .ms-frame--wide img { aspect-ratio: 16 / 10; }
}

/* ---- Hardware category quick-nav cards ---- */
.hw-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
}
.hw-cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem 1.5rem 1.6rem;
  transition: border-color .25s, box-shadow .3s, transform .25s;
}
.hw-cat-card:hover {
  border-color: var(--blue-soft);
  box-shadow: 0 24px 52px -32px rgba(14, 42, 69, .5);
  transform: translateY(-3px);
}
.hw-cat-figure {
  margin: 0 0 1.3rem;
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hw-cat-figure img { max-width: 80%; max-height: 140px; width: auto; height: auto; object-fit: contain; }
.hw-cat-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--navy);
  letter-spacing: -.01em;
  margin: 0 0 .7rem;
}
.hw-cat-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--blue-deep);
}
.hw-cat-link i { transition: transform .25s var(--ease); }
.hw-cat-card:hover .hw-cat-link i { transform: translateX(4px); }
@media (max-width: 991.98px) { .hw-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .hw-cat-grid { grid-template-columns: 1fr; } }

/* ---- CTA band: two-button cluster ---- */
.cta-band-actions { display: flex; flex-wrap: wrap; gap: .7rem; flex: none; }
@media (max-width: 767.98px) {
  .cta-band-actions { width: 100%; }
  .cta-band-actions .btn-acc { flex: 1 1 auto; justify-content: center; }
}

/* =====================================================================
   §17. SOLUTION TILES (by-case / by-industry)
   Editorial image cards replacing the legacy Bootstrap .card grids.
   Named .sol-tile to avoid colliding with the geo .sol-card icon cards.
   ===================================================================== */
.sol-grid { display: grid; gap: 1.4rem; }
.sol-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sol-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sol-tile {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .25s, box-shadow .3s, transform .25s;
}
.sol-tile:hover {
  border-color: var(--blue-soft);
  box-shadow: 0 24px 52px -32px rgba(14, 42, 69, .5);
  transform: translateY(-3px);
}
.sol-tile-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--canvas); }
.sol-tile-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sol-tile-body { padding: 1.5rem 1.6rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.sol-tile-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
}
.sol-tile-text { font-size: .92rem; color: var(--body); line-height: 1.55; margin: 0 0 1.1rem; }
.sol-tile-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--blue-deep);
}
.sol-tile-link i { transition: transform .25s var(--ease); }
.sol-tile:hover .sol-tile-link i { transform: translateX(4px); }
@media (max-width: 991.98px) {
  .sol-grid--3 { grid-template-columns: 1fr 1fr; }
  .sol-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .sol-grid--3, .sol-grid--4 { grid-template-columns: 1fr; }
}

/* =====================================================================
   §18. EXHIBITS, TIER 1 (journey + decision gates)
   ===================================================================== */

/* ----- EXHIBIT 1: Commercial journey (how-we-do-commercial.jsp) ----- */

.hcj-exhibit {
  position: relative;
  padding-top: 1rem;
}

/* SVG path: hidden on mobile */
.hcj-svg {
  display: block;
  width: 100%;
  height: 80px;
  overflow: visible;
  margin-bottom: .5rem;
}

/* background track */
.hcj-track {
  stroke: var(--line);
  stroke-width: 1.5px;
  fill: none;
}

/* animated fill: stroke-dashoffset draw technique */
.hcj-fill {
  stroke-width: 1.5px;
  fill: none;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1);
}
.hcj-exhibit[data-hcj="in"] .hcj-fill {
  stroke-dashoffset: 0;
}

/* node circles */
.hcj-circle {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 1.5px;
  opacity: 0;
  transform: scale(.5);
  transform-origin: center;
  transition: opacity .45s ease-out, transform .45s var(--ease), fill .3s, stroke .3s;
}
.hcj-exhibit[data-hcj="in"] .hcj-circle { opacity: 1; transform: scale(1); }
.hcj-exhibit[data-hcj="in"] .hcj-c1 { fill: var(--navy); stroke: var(--navy); transition-delay: .3s; }
.hcj-exhibit[data-hcj="in"] .hcj-c2 { fill: var(--blue-deep); stroke: var(--blue-deep); transition-delay: .85s; }
.hcj-exhibit[data-hcj="in"] .hcj-c3 { fill: var(--blue); stroke: var(--blue); transition-delay: 1.4s; }

/* node numbers */
.hcj-num {
  font-family: var(--font-serif);
  font-size: 15px;
  fill: #fff;
  font-weight: 400;
  opacity: 0;
  transition: opacity .3s ease-out;
}
.hcj-exhibit[data-hcj="in"] .hcj-n1 { opacity: 1; transition-delay: .5s; }
.hcj-exhibit[data-hcj="in"] .hcj-n2 { opacity: 1; transition-delay: 1.05s; }
.hcj-exhibit[data-hcj="in"] .hcj-n3 { opacity: 1; transition-delay: 1.6s; }

/* cards row */
.hcj-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.hcj-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 1px 3px rgba(14,42,69,.04);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease-out, transform .55s var(--ease);
}
.hcj-exhibit[data-hcj="in"] .hcj-card   { opacity: 1; transform: translateY(0); }
.hcj-exhibit[data-hcj="in"] .hcj-card-1 { transition-delay: .55s; }
.hcj-exhibit[data-hcj="in"] .hcj-card-2 { transition-delay: 1.1s; }
.hcj-exhibit[data-hcj="in"] .hcj-card-3 { transition-delay: 1.65s; }

/* left accent per leg */
.hcj-card-1 { border-top: 3px solid var(--navy); }
.hcj-card-2 { border-top: 3px solid var(--blue-deep); }
.hcj-card-3 { border-top: 3px solid var(--blue); }

.hcj-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
  gap: .5rem;
}
.hcj-step-num {
  font-size: .63rem;
  letter-spacing: .22em;
  font-weight: 700;
  color: var(--blue-deep);
  text-transform: uppercase;
}
.hcj-step-time {
  font-size: .78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .3rem;
  white-space: nowrap;
}
.hcj-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 1rem;
  line-height: 1.35;
}
.hcj-block {
  margin-bottom: .75rem;
}
.hcj-block:last-child { margin-bottom: 0; }
.hcj-block-label {
  display: block;
  font-size: .63rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .3rem;
}
.hcj-block p {
  font-size: .85rem;
  color: var(--body);
  line-height: 1.55;
  margin: 0;
}

/* reduced-motion: show everything, no transitions */
@media (prefers-reduced-motion: reduce) {
  .hcj-fill { stroke-dashoffset: 0; transition: none; }
  .hcj-circle { opacity: 1; transform: scale(1); transition: none; }
  .hcj-exhibit[data-hcj="in"] .hcj-c1 { fill: var(--navy); stroke: var(--navy); }
  .hcj-exhibit[data-hcj="in"] .hcj-c2 { fill: var(--blue-deep); stroke: var(--blue-deep); }
  .hcj-exhibit[data-hcj="in"] .hcj-c3 { fill: var(--blue); stroke: var(--blue); }
  .hcj-num { opacity: 1; transition: none; }
  .hcj-card { opacity: 1; transform: translateY(0); transition: none; }
}

/* mobile: hide SVG, stack cards vertically */
@media (max-width: 767.98px) {
  .hcj-svg { display: none; }
  .hcj-cards { grid-template-columns: 1fr; }
  .hcj-exhibit[data-hcj="in"] .hcj-card-1,
  .hcj-exhibit[data-hcj="in"] .hcj-card-2,
  .hcj-exhibit[data-hcj="in"] .hcj-card-3 { transition-delay: 0s; }
  .hcj-card { opacity: 1; transform: translateY(0); }
}

/* ----- EXHIBIT 2: Decision gate markers on HWK timeline ----- */

/* gate row overlays the timeline rail.
   Lives INSIDE .hwk-timeline (position:relative); anchored to the rail's
   y (top:30px) so the diamonds sit on the line between nodes and never
   intrude on the node text below. */
.hwk-gates {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}

.hwk-gate {
  position: absolute;
  top: 0;
  transform: translateX(-50%) translateY(-50%);
}
/* centers at the midpoint between each pair of nodes:
   nodes sit at 12.5%, 37.5%, 62.5%, 87.5% of the exhibit width */
.hwk-gate-1 { left: 25%; }
.hwk-gate-2 { left: 50%; }
.hwk-gate-3 { left: 75%; }

.hwk-gate-diamond {
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1.5px solid var(--line);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity .4s ease-out, border-color .4s, background .4s;
}

/* gates light up chained after the rail fill reaches each midpoint.
   Rail fill takes 2.4s. Midpoints at ~25%, ~50%, ~75% of 75% rail width:
   gate-1 at t = 2.4 * (25/75) = 0.8s, gate-2 at 1.6s, gate-3 at 2.4s */
.hwk-exhibit[data-animate-hwk="in"] .hwk-gate-diamond {
  opacity: 1;
}
.hwk-exhibit[data-animate-hwk="in"] .hwk-gate-1 .hwk-gate-diamond {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  transition-delay: .65s;
}
.hwk-exhibit[data-animate-hwk="in"] .hwk-gate-2 .hwk-gate-diamond {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  transition-delay: 1.3s;
}
.hwk-exhibit[data-animate-hwk="in"] .hwk-gate-3 .hwk-gate-diamond {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  transition-delay: 1.95s;
}

/* hide gates on mobile where the rail is already hidden */
@media (max-width: 575.98px) {
  .hwk-gates { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hwk-gate-diamond { opacity: 1; transition: none; }
  .hwk-exhibit[data-animate-hwk="in"] .hwk-gate-1 .hwk-gate-diamond,
  .hwk-exhibit[data-animate-hwk="in"] .hwk-gate-2 .hwk-gate-diamond,
  .hwk-exhibit[data-animate-hwk="in"] .hwk-gate-3 .hwk-gate-diamond {
    background: var(--blue-deep);
    border-color: var(--blue-deep);
    transition-delay: 0s;
  }
}

/* =====================================================================
   §19. EXHIBITS, TIER 2 (manufacturing flow + logistics loop)
   ===================================================================== */

/* ----- EXHIBIT: Manufacturing material-flow (mflow) ----- */

.mflow-section {
  background: var(--canvas);
}

.mflow-exhibit {
  position: relative;
}

.mflow-svg {
  display: block;
  width: 100%;
  height: 72px;
  overflow: visible;
  margin-bottom: .25rem;
}

.mflow-track {
  stroke: var(--line);
  stroke-width: 1px;
  fill: none;
}

.mflow-fill {
  stroke: url(#mflowGrad);
  stroke-width: 1.5px;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1);
}
.mflow-exhibit[data-mflow="in"] .mflow-fill {
  stroke-dashoffset: 0;
}

.mflow-node {
  fill: var(--canvas);
  stroke: var(--line);
  stroke-width: 1.5px;
  opacity: 0;
  transform: scale(.5);
  transform-origin: center;
  transition: opacity .4s ease-out, transform .4s var(--ease),
              fill .3s, stroke .3s;
}
.mflow-exhibit[data-mflow="in"] .mflow-node { opacity: 1; transform: scale(1); }
.mflow-exhibit[data-mflow="in"] .mflow-n1   { fill: var(--navy);     stroke: var(--navy);     transition-delay: .2s; }
.mflow-exhibit[data-mflow="in"] .mflow-n2   { fill: var(--blue-deep);stroke: var(--blue-deep);transition-delay: .7s; }
.mflow-exhibit[data-mflow="in"] .mflow-n3   { fill: var(--blue);     stroke: var(--blue);     transition-delay: 1.2s; }
.mflow-exhibit[data-mflow="in"] .mflow-n4   { fill: var(--teal);     stroke: var(--teal);     transition-delay: 1.7s; }

.mflow-icon {
  opacity: 0;
  transition: opacity .35s ease-out;
}
.mflow-exhibit[data-mflow="in"] .mflow-i1 { opacity: 1; transition-delay: .4s; }
.mflow-exhibit[data-mflow="in"] .mflow-i2 { opacity: 1; transition-delay: .9s; }
.mflow-exhibit[data-mflow="in"] .mflow-i3 { opacity: 1; transition-delay: 1.4s; }
.mflow-exhibit[data-mflow="in"] .mflow-i4 { opacity: 1; transition-delay: 1.9s; }

.mflow-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.mflow-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.25rem;
  box-shadow: 0 1px 4px rgba(14,42,69,.05);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease-out, transform .5s var(--ease);
}
.mflow-exhibit[data-mflow="in"] .mflow-card   { opacity: 1; transform: translateY(0); }
.mflow-exhibit[data-mflow="in"] .mflow-card-1 { transition-delay: .35s; }
.mflow-exhibit[data-mflow="in"] .mflow-card-2 { transition-delay: .85s; }
.mflow-exhibit[data-mflow="in"] .mflow-card-3 { transition-delay: 1.35s; }
.mflow-exhibit[data-mflow="in"] .mflow-card-4 { transition-delay: 1.85s; }

.mflow-card-1 { border-top: 3px solid var(--navy); }
.mflow-card-2 { border-top: 3px solid var(--blue-deep); }
.mflow-card-3 { border-top: 3px solid var(--blue); }
.mflow-card-4 { border-top: 3px solid var(--teal); }

.mflow-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-bottom: .875rem;
  font-size: 1.1rem;
}
.mflow-card-1 .mflow-card-icon { background: var(--navy);      color: #fff; }
.mflow-card-2 .mflow-card-icon { background: var(--blue-deep); color: #fff; }
.mflow-card-3 .mflow-card-icon { background: var(--blue);      color: #fff; }
.mflow-card-4 .mflow-card-icon { background: var(--teal);      color: #fff; }

.mflow-card h5 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .5rem;
  line-height: 1.3;
}
.mflow-card p {
  font-size: .82rem;
  color: var(--body);
  line-height: 1.55;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mflow-fill { stroke-dashoffset: 0; transition: none; }
  .mflow-node { opacity: 1; transform: scale(1); transition: none; }
  .mflow-exhibit[data-mflow="in"] .mflow-n1 { fill: var(--navy);      stroke: var(--navy); }
  .mflow-exhibit[data-mflow="in"] .mflow-n2 { fill: var(--blue-deep); stroke: var(--blue-deep); }
  .mflow-exhibit[data-mflow="in"] .mflow-n3 { fill: var(--blue);      stroke: var(--blue); }
  .mflow-exhibit[data-mflow="in"] .mflow-n4 { fill: var(--teal);      stroke: var(--teal); }
  .mflow-icon { opacity: 1; transition: none; }
  .mflow-card { opacity: 1; transform: translateY(0); transition: none; }
}

@media (max-width: 767.98px) {
  .mflow-svg   { display: none; }
  .mflow-cards { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .mflow-exhibit[data-mflow="in"] .mflow-card-1,
  .mflow-exhibit[data-mflow="in"] .mflow-card-2,
  .mflow-exhibit[data-mflow="in"] .mflow-card-3,
  .mflow-exhibit[data-mflow="in"] .mflow-card-4 { transition-delay: 0s; }
  .mflow-card { opacity: 1; transform: translateY(0); }
}

/* ----- EXHIBIT: Logistics circular RTI loop (rloop) ----- */

.rloop-section {
  background: var(--white);
}

.rloop-exhibit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.rloop-svg {
  display: block;
  width: min(400px, 100%);
  height: min(400px, 100vw);
  flex-shrink: 0;
  overflow: visible;
}

.rloop-arc {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5px;
}

.rloop-arc-fill {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
}
.rloop-arc-fill-1 { stroke: var(--navy); }
.rloop-arc-fill-2 { stroke: var(--blue-deep); }
.rloop-arc-fill-3 { stroke: var(--blue); }
.rloop-arc-fill-4 { stroke: var(--teal); }

.rloop-exhibit[data-rloop="in"] .rloop-arc-fill-1 {
  transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) .1s;
}
.rloop-exhibit[data-rloop="in"] .rloop-arc-fill-2 {
  transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) 1.1s;
}
.rloop-exhibit[data-rloop="in"] .rloop-arc-fill-3 {
  transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) 2.1s;
}
.rloop-exhibit[data-rloop="in"] .rloop-arc-fill-4 {
  transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) 3.1s;
}

.rloop-node {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 1.5px;
  opacity: 0;
  transform: scale(.5);
  transform-origin: center;
  transition: opacity .4s ease-out, transform .4s var(--ease),
              fill .3s, stroke .3s;
}
.rloop-exhibit[data-rloop="in"] .rloop-node { opacity: 1; transform: scale(1); }
.rloop-exhibit[data-rloop="in"] .rloop-nd1  { fill: var(--navy);     stroke: var(--navy);     transition-delay: .9s; }
.rloop-exhibit[data-rloop="in"] .rloop-nd2  { fill: var(--blue-deep);stroke: var(--blue-deep);transition-delay: 1.9s; }
.rloop-exhibit[data-rloop="in"] .rloop-nd3  { fill: var(--blue);     stroke: var(--blue);     transition-delay: 2.9s; }
.rloop-exhibit[data-rloop="in"] .rloop-nd4  { fill: var(--teal);     stroke: var(--teal);     transition-delay: 3.9s; }

.rloop-nlabel {
  font-size: 9.5px;
  font-family: var(--font-sans);
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: 0;
  font-weight: 600;
  transition: opacity .3s ease-out;
}
.rloop-exhibit[data-rloop="in"] .rloop-nl1 { opacity: 1; transition-delay: 1.1s; }
.rloop-exhibit[data-rloop="in"] .rloop-nl2 { opacity: 1; transition-delay: 2.1s; }
.rloop-exhibit[data-rloop="in"] .rloop-nl3 { opacity: 1; transition-delay: 3.1s; }
.rloop-exhibit[data-rloop="in"] .rloop-nl4 { opacity: 1; transition-delay: 4.1s; }

.rloop-dot {
  fill: var(--blue-bright);
  opacity: 0;
  transition: opacity .4s ease-out 4.5s;
}
.rloop-exhibit[data-rloop="in"] .rloop-dot { opacity: 1; }

.rloop-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 640px;
}

.rloop-card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease-out, transform .5s var(--ease);
}
.rloop-exhibit[data-rloop="in"] .rloop-card   { opacity: 1; transform: translateY(0); }
.rloop-exhibit[data-rloop="in"] .rloop-card-1 { transition-delay: 1.05s; }
.rloop-exhibit[data-rloop="in"] .rloop-card-2 { transition-delay: 2.05s; }
.rloop-exhibit[data-rloop="in"] .rloop-card-3 { transition-delay: 3.05s; }
.rloop-exhibit[data-rloop="in"] .rloop-card-4 { transition-delay: 4.05s; }

.rloop-card-1 { border-left: 3px solid var(--navy); }
.rloop-card-2 { border-left: 3px solid var(--blue-deep); }
.rloop-card-3 { border-left: 3px solid var(--blue); }
.rloop-card-4 { border-left: 3px solid var(--teal); }

.rloop-card h5 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .4rem;
  line-height: 1.3;
}
.rloop-card p {
  font-size: .82rem;
  color: var(--body);
  line-height: 1.55;
  margin: 0;
}

@media (min-width: 992px) {
  .rloop-exhibit {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }
  .rloop-svg {
    width: 360px;
    height: 360px;
    flex: 0 0 360px;
  }
  .rloop-cards {
    max-width: none;
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rloop-arc-fill-1,
  .rloop-arc-fill-2,
  .rloop-arc-fill-3,
  .rloop-arc-fill-4 { transition: none; }
  .rloop-node   { opacity: 1; transform: scale(1); transition: none; }
  .rloop-exhibit[data-rloop="in"] .rloop-nd1 { fill: var(--navy);      stroke: var(--navy); }
  .rloop-exhibit[data-rloop="in"] .rloop-nd2 { fill: var(--blue-deep); stroke: var(--blue-deep); }
  .rloop-exhibit[data-rloop="in"] .rloop-nd3 { fill: var(--blue);      stroke: var(--blue); }
  .rloop-exhibit[data-rloop="in"] .rloop-nd4 { fill: var(--teal);      stroke: var(--teal); }
  .rloop-nlabel { opacity: 1; transition: none; }
  .rloop-dot    { opacity: 0 !important; }
  .rloop-card   { opacity: 1; transform: translateY(0); transition: none; }
}

@media (max-width: 575.98px) {
  .rloop-cards { grid-template-columns: 1fr; }
  .rloop-exhibit[data-rloop="in"] .rloop-card-1,
  .rloop-exhibit[data-rloop="in"] .rloop-card-2,
  .rloop-exhibit[data-rloop="in"] .rloop-card-3,
  .rloop-exhibit[data-rloop="in"] .rloop-card-4 { transition-delay: 0s; }
  .rloop-card { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
   §19c. EXHIBIT: Inventory asset lifecycle (inventory.jsp) — inv-
   Seven states, origin -> customer. A tagged carton travels the line
   (JS-driven), a check pops per state, a caption narrates, and a
   Trackvy data layer beneath shows where the reads land.
   ===================================================================== */

.inv-section { background: var(--white); }

.inv-exhibit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.inv-canvas { width: 100%; }

.inv-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1040px;
  margin: 0 auto;
  overflow: visible;
}

/* rail + progressively-drawn flow (offset set by JS as the tag advances) */
.inv-rail { stroke: var(--line); stroke-width: 2px; }
.inv-flow {
  stroke: url(#invFlowGrad);
  stroke-width: 3px;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(.5,0,.2,1);
}
.inv-arrow { stroke: var(--blue-soft); stroke-width: 1.5px; }

/* nodes — statically coloured navy -> teal */
.inv-node { stroke-width: 0; }
.inv-nd1 { fill: var(--navy); }
.inv-nd2 { fill: var(--blue-deep); }
.inv-nd3 { fill: var(--blue); }
.inv-nd4 { fill: var(--blue-bright); }
.inv-nd5 { fill: var(--teal-mid); }
.inv-nd6 { fill: var(--teal); }
.inv-nd7 { fill: var(--teal-deep); }

.inv-num {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  fill: var(--muted); text-anchor: middle; letter-spacing: .04em;
}
.inv-label-box {
  font-family: var(--font-sans); font-size: 11.5px; line-height: 1.3;
  font-weight: 600; color: var(--ink); text-align: center;
}

/* per-state validation checks — JS adds .inv-show as the tag passes */
.inv-check circle { fill: #17CC98; }
.inv-check { opacity: 0; transform: scale(.3); transform-origin: center; transition: opacity .4s ease-out, transform .4s var(--ease); }
.inv-check.inv-show { opacity: 1; transform: scale(1); }

/* traveling carton — JS sets --cx to each node's x */
.inv-carton {
  transform: translateX(var(--cx, 80px));
  transition: transform 1.4s cubic-bezier(.45,0,.2,1);
}
.inv-carton rect { fill: var(--paper); stroke: var(--navy); stroke-width: 1.5px; }
.inv-carton line { stroke: var(--navy); stroke-width: 1.2px; }
.inv-carton-tag  { fill: var(--blue); }

/* narrated caption */
.inv-caption {
  font-family: var(--font-sans);
  font-size: .95rem; color: var(--body); line-height: 1.5;
  text-align: center; max-width: 60ch; margin: 0 auto;
  min-height: 2.85em;
  transition: opacity .3s ease-out;
}

/* benefit cards */
.inv-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; width: 100%; max-width: 1040px; margin-top: .5rem;
}
.inv-card {
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 1.5rem;
}
.inv-card-1 { border-top: 3px solid var(--navy); }
.inv-card-2 { border-top: 3px solid var(--blue); }
.inv-card-3 { border-top: 3px solid var(--teal); }
.inv-card-ic { font-size: 1.6rem; color: var(--blue-deep); margin-bottom: .6rem; line-height: 1; }
.inv-card p  { font-size: .84rem; color: var(--body); line-height: 1.55; margin: 0; }

/* Trackvy data layer beneath the flow */
.inv-trackvy {
  width: 100%; max-width: 820px; margin: 1rem auto 0;
  text-align: center; position: relative; padding-top: 1.75rem;
}
.inv-tv-feed {
  position: absolute; top: 0; left: 50%; width: 0; height: 1.25rem;
  border-left: 2px dashed var(--blue-soft); transform: translateX(-50%);
}
.inv-tv-eyebrow {
  display: block; font-family: var(--font-sans); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em; color: var(--blue-deep);
  margin-bottom: 1rem;
}
.inv-tv-cards { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.inv-tv-card {
  display: flex; gap: .8rem; align-items: flex-start; text-align: left;
  background: var(--navy-tint); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 1.1rem 1.3rem;
  flex: 1 1 300px; max-width: 380px;
}
.inv-tv-ic { font-size: 1.5rem; color: var(--blue-deep); line-height: 1; flex-shrink: 0; }
.inv-tv-card h5 { font-size: .9rem; font-weight: 700; color: var(--ink); margin: 0 0 .25rem; }
.inv-tv-card p  { font-size: .8rem; color: var(--body); line-height: 1.5; margin: 0; }

@media (max-width: 991.98px) {
  .inv-cards { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 767.98px) {
  .inv-canvas { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .inv-svg { min-width: 880px; }
  .inv-tv-cards { flex-direction: column; align-items: stretch; max-width: 480px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .inv-flow   { transition: none; }
  .inv-carton { transition: none; }
  .inv-check  { transition: none; }
}

/* =====================================================================
   §19d. EXHIBIT: Traceability chain of custody (traceability.jsp) — tchain-
   ===================================================================== */

.tchain-section { background: var(--paper); }
.tchain-exhibit { margin-top: 2.5rem; }
.tchain-canvas { width: 100%; }
.tchain-svg {
  display: block; width: 100%; height: auto;
  max-width: 960px; margin: 0 auto; overflow: visible;
}

.tchain-planned {
  stroke: var(--blue-soft); stroke-width: 1.5px;
  stroke-dasharray: 3 5; opacity: 0;
  transition: opacity .5s ease-out .1s;
}
.tchain-exhibit[data-tchain="in"] .tchain-planned { opacity: .9; }
.tchain-planned-lbl {
  font-family: var(--font-sans); font-size: 10px; fill: var(--muted);
  letter-spacing: .04em; opacity: 0; transition: opacity .5s ease-out .3s;
}
.tchain-exhibit[data-tchain="in"] .tchain-planned-lbl { opacity: 1; }

.tchain-ticks line { stroke: var(--blue-soft); stroke-width: 1.5px; opacity: 0; }
.tchain-exhibit[data-tchain="in"] .tchain-ticks line { animation: tchainTick .6s ease-out forwards; }
.tchain-exhibit[data-tchain="in"] .tchain-ticks line:nth-child(1) { animation-delay: .8s; }
.tchain-exhibit[data-tchain="in"] .tchain-ticks line:nth-child(2) { animation-delay: 1.0s; }
.tchain-exhibit[data-tchain="in"] .tchain-ticks line:nth-child(3) { animation-delay: 1.2s; }
.tchain-exhibit[data-tchain="in"] .tchain-ticks line:nth-child(4) { animation-delay: 1.4s; }
.tchain-exhibit[data-tchain="in"] .tchain-ticks line:nth-child(5) { animation-delay: 1.6s; }
.tchain-exhibit[data-tchain="in"] .tchain-ticks line:nth-child(6) { animation-delay: 1.8s; }
@keyframes tchainTick { from { opacity: 0; } to { opacity: .7; } }

.tchain-real {
  fill: none; stroke: url(#tchainGrad); stroke-width: 3px;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke-dashoffset 2s cubic-bezier(.65,0,.35,1) .2s;
}
.tchain-exhibit[data-tchain="in"] .tchain-real { stroke-dashoffset: 0; }

.tchain-gap circle {
  fill: none; stroke: #C48C7E; stroke-width: 1.5px; stroke-dasharray: 3 4;
}
.tchain-gap-lbl {
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  color: #B5715F; text-align: center; letter-spacing: .03em; text-transform: uppercase;
}
.tchain-gap { opacity: 0; transform: scale(.6); transform-origin: 626px 150px; transition: opacity .5s ease-out, transform .5s var(--ease); }
.tchain-exhibit[data-tchain="in"] .tchain-gap { opacity: 1; transform: scale(1); transition-delay: 1.9s; }

.tchain-node {
  fill: #fff; stroke: var(--line); stroke-width: 1.5px;
  opacity: 0; transform: scale(.5); transform-origin: center;
  transition: opacity .4s ease-out, transform .45s var(--ease), fill .3s, stroke .3s;
}
.tchain-exhibit[data-tchain="in"] .tchain-node { opacity: 1; transform: scale(1); }
.tchain-exhibit[data-tchain="in"] .tchain-nd1 { fill: var(--navy);      stroke: var(--navy);      transition-delay: .35s; }
.tchain-exhibit[data-tchain="in"] .tchain-nd2 { fill: var(--blue-deep); stroke: var(--blue-deep); transition-delay: .85s; }
.tchain-exhibit[data-tchain="in"] .tchain-nd3 { fill: var(--blue);      stroke: var(--blue);      transition-delay: 1.35s; }
.tchain-exhibit[data-tchain="in"] .tchain-nd4 { fill: var(--teal);      stroke: var(--teal);      transition-delay: 1.85s; }

.tchain-ico { opacity: 0; transition: opacity .35s ease-out; }
.tchain-exhibit[data-tchain="in"] .tchain-ico1 { opacity: 1; transition-delay: .50s; }
.tchain-exhibit[data-tchain="in"] .tchain-ico2 { opacity: 1; transition-delay: 1.00s; }
.tchain-exhibit[data-tchain="in"] .tchain-ico3 { opacity: 1; transition-delay: 1.50s; }
.tchain-exhibit[data-tchain="in"] .tchain-ico4 { opacity: 1; transition-delay: 2.00s; }

.tchain-num {
  font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  fill: var(--muted); text-anchor: middle; letter-spacing: .04em;
  opacity: 0; transition: opacity .35s ease-out;
}
.tchain-exhibit[data-tchain="in"] .tchain-num1 { opacity: 1; transition-delay: .55s; }
.tchain-exhibit[data-tchain="in"] .tchain-num2 { opacity: 1; transition-delay: 1.05s; }
.tchain-exhibit[data-tchain="in"] .tchain-num3 { opacity: 1; transition-delay: 1.55s; }
.tchain-exhibit[data-tchain="in"] .tchain-num4 { opacity: 1; transition-delay: 2.05s; }

.tchain-label { opacity: 0; transition: opacity .4s ease-out; }
.tchain-label-box {
  font-family: var(--font-sans); font-size: 11.5px; line-height: 1.3;
  font-weight: 600; color: var(--ink); text-align: center;
}
.tchain-exhibit[data-tchain="in"] .tchain-label1 { opacity: 1; transition-delay: .6s; }
.tchain-exhibit[data-tchain="in"] .tchain-label2 { opacity: 1; transition-delay: 1.1s; }
.tchain-exhibit[data-tchain="in"] .tchain-label3 { opacity: 1; transition-delay: 1.6s; }
.tchain-exhibit[data-tchain="in"] .tchain-label4 { opacity: 1; transition-delay: 2.1s; }

.tchain-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; width: 100%; max-width: 960px; margin: 2.25rem auto 0;
}
.tchain-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 1.5rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease-out, transform .5s var(--ease);
}
.tchain-card-1 { border-top: 3px solid var(--navy); }
.tchain-card-2 { border-top: 3px solid var(--blue); }
.tchain-card-3 { border-top: 3px solid var(--teal); }
.tchain-exhibit[data-tchain="in"] .tchain-card   { opacity: 1; transform: translateY(0); }
.tchain-exhibit[data-tchain="in"] .tchain-card-1 { transition-delay: 2.2s; }
.tchain-exhibit[data-tchain="in"] .tchain-card-2 { transition-delay: 2.35s; }
.tchain-exhibit[data-tchain="in"] .tchain-card-3 { transition-delay: 2.5s; }
.tchain-card-ic { font-size: 1.6rem; color: var(--blue-deep); margin-bottom: .6rem; line-height: 1; }
.tchain-card p  { font-size: .84rem; color: var(--body); line-height: 1.55; margin: 0; }

@media (max-width: 991.98px) {
  .tchain-cards { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 767.98px) {
  .tchain-canvas { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tchain-svg { min-width: 720px; }
}

@media (prefers-reduced-motion: reduce) {
  .tchain-real { transition: none; }
  .tchain-planned, .tchain-planned-lbl, .tchain-ico, .tchain-num, .tchain-label, .tchain-gap { opacity: 1; transition: none; animation: none; }
  .tchain-gap { transform: scale(1); }
  .tchain-ticks line { opacity: .7; animation: none; }
  .tchain-node { opacity: 1; transform: scale(1); transition: none; }
  .tchain-exhibit[data-tchain="in"] .tchain-nd1 { fill: var(--navy);      stroke: var(--navy); }
  .tchain-exhibit[data-tchain="in"] .tchain-nd2 { fill: var(--blue-deep); stroke: var(--blue-deep); }
  .tchain-exhibit[data-tchain="in"] .tchain-nd3 { fill: var(--blue);      stroke: var(--blue); }
  .tchain-exhibit[data-tchain="in"] .tchain-nd4 { fill: var(--teal);      stroke: var(--teal); }
  .tchain-card { opacity: 1; transform: translateY(0); transition: none; }
}

/* =====================================================================
   §19e. EXHIBIT: Vehicles capture convergence (vehicles.jsp) — vc-
   Two methods -> three captures -> one record. Portal=auto (blue),
   mobile reader=manual (teal); they converge into the vehicle record.
   ===================================================================== */

.vc-section { background: var(--white); }
.vc-exhibit { margin-top: 2.5rem; }
.vc-canvas { width: 100%; }
.vc-svg {
  display: block; width: 100%; height: auto;
  max-width: 760px; margin: 0 auto; overflow: visible;
}

/* converging links (drawn on reveal) */
.vc-link { fill: none; stroke-width: 2px; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.5,0,.2,1); }
.vc-link-a { stroke: var(--blue-deep); }
.vc-link-b { stroke: var(--teal-mid); }
.vc-link-c { stroke: var(--teal-mid); }
.vc-exhibit[data-vc="in"] .vc-link-a { stroke-dashoffset: 0; transition-delay: 1.0s; }
.vc-exhibit[data-vc="in"] .vc-link-b { stroke-dashoffset: 0; transition-delay: 1.2s; }
.vc-exhibit[data-vc="in"] .vc-link-c { stroke-dashoffset: 0; transition-delay: 1.4s; }
.vc-stub { stroke: var(--line); stroke-width: 1.5px; }

/* source nodes */
.vc-src { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.5); transition: opacity .4s ease-out, transform .45s var(--ease); }
.vc-src-portal { fill: var(--blue); }
.vc-src-mobile { fill: var(--teal); }
.vc-exhibit[data-vc="in"] .vc-src { opacity: 1; transform: scale(1); transition-delay: .2s; }

.vc-srclabel-box { font-family: var(--font-sans); font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2; letter-spacing: .02em; }
.vc-srclabel-box--portal { color: var(--blue-deep); }
.vc-srclabel-box--mobile { color: var(--teal); }

/* data chips */
.vc-chip rect { fill: var(--navy-tint); stroke: var(--line); stroke-width: 1px; }
.vc-chip-box { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 22px; }
.vc-chip { opacity: 0; transition: opacity .5s ease-out; }
.vc-exhibit[data-vc="in"] .vc-chip-a { opacity: 1; transition-delay: .5s; }
.vc-exhibit[data-vc="in"] .vc-chip-b { opacity: 1; transition-delay: .7s; }
.vc-exhibit[data-vc="in"] .vc-chip-c { opacity: 1; transition-delay: .9s; }

/* central record */
.vc-record { fill: var(--navy); transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.7); transition: opacity .5s ease-out, transform .5s var(--ease); }
.vc-record-halo { fill: var(--navy-tint); opacity: 0; transition: opacity .6s ease-out; }
.vc-exhibit[data-vc="in"] .vc-record { opacity: 1; transform: scale(1); transition-delay: 1.5s; }
.vc-exhibit[data-vc="in"] .vc-record-halo { opacity: 1; transition-delay: 1.6s; }
.vc-recordlabel-box { font-family: var(--font-sans); font-size: 13px; font-weight: 700; color: var(--navy); text-align: center; line-height: 1.25; }

/* cards */
.vc-cards {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem; width: 100%; max-width: 900px; margin: 2.25rem auto 0;
}
.vc-card {
  background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 1.5rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease-out, transform .5s var(--ease);
}
.vc-card-1 { border-top: 3px solid var(--blue); }
.vc-card-2 { border-top: 3px solid var(--teal); }
.vc-card-3 { border-top: 3px solid var(--teal); }
.vc-exhibit[data-vc="in"] .vc-card   { opacity: 1; transform: translateY(0); }
.vc-exhibit[data-vc="in"] .vc-card-1 { transition-delay: 1.8s; }
.vc-exhibit[data-vc="in"] .vc-card-2 { transition-delay: 1.95s; }
.vc-exhibit[data-vc="in"] .vc-card-3 { transition-delay: 2.1s; }
.vc-card-h { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.vc-card-h i { font-size: 1.4rem; color: var(--blue-deep); }
.vc-card-h h5 { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0; }
.vc-tag { display: inline-block; font-family: var(--font-sans); font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .2rem .55rem; border-radius: 999px; margin: 0 0 .7rem; }
.vc-tag--portal { color: var(--blue-deep); background: var(--navy-tint); }
.vc-tag--mobile { color: var(--teal); background: rgba(16,101,140,.1); }
.vc-card p { font-size: .84rem; color: var(--body); line-height: 1.55; margin: 0; }

@media (max-width: 991.98px) {
  .vc-cards { grid-template-columns: 1fr; max-width: 480px; }
}
@media (max-width: 767.98px) {
  .vc-canvas { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vc-svg { min-width: 640px; }
}

@media (prefers-reduced-motion: reduce) {
  .vc-link { transition: none; stroke-dashoffset: 0 !important; }
  .vc-src, .vc-chip, .vc-record, .vc-record-halo, .vc-card { opacity: 1 !important; transform: none !important; transition: none; }
}

/* =====================================================================
   §19g. EXHIBIT: Traceability catch-all use cases (traceability.jsp) — tuc-
   Four operations (returnables, internal processes, shipping/receiving,
   compliance) converge into one traceability hub. Links draw on reveal.
   ===================================================================== */
.tuc-section { background: var(--white); }
.tuc-exhibit { margin-top: 2.5rem; }
.tuc-canvas { width: 100%; }
.tuc-svg { display: block; width: 100%; height: auto; max-width: 900px; margin: 0 auto; overflow: visible; }

/* converging links: source -> hub (dotted; fade in on reveal) */
.tuc-link { fill: none; stroke: url(#tucGrad); stroke-width: 2.5px; stroke-linecap: round;
  stroke-dasharray: 1 9; opacity: 0; transition: opacity .8s ease-out; }
.tuc-exhibit[data-tuc="in"] .tuc-link-1 { opacity: 1; transition-delay: .4s; }
.tuc-exhibit[data-tuc="in"] .tuc-link-2 { opacity: 1; transition-delay: .6s; }
.tuc-exhibit[data-tuc="in"] .tuc-link-3 { opacity: 1; transition-delay: .8s; }
.tuc-exhibit[data-tuc="in"] .tuc-link-4 { opacity: 1; transition-delay: 1.0s; }

/* source nodes — navy -> teal */
.tuc-src-1 { fill: var(--navy); }
.tuc-src-2 { fill: var(--blue-deep); }
.tuc-src-3 { fill: var(--blue); }
.tuc-src-4 { fill: var(--teal); }
.tuc-lbl-box { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--ink); line-height: 1.2; height: 44px;
  display: flex; align-items: center; justify-content: flex-end; text-align: right; }
.tuc-node-link { cursor: pointer; }
.tuc-node-link:hover .tuc-lbl-box { color: var(--blue-deep); text-decoration: underline; }

/* central traceability hub */
.tuc-hub { fill: var(--navy); }
.tuc-hub-halo { fill: var(--navy-tint); opacity: 0; transition: opacity .6s ease-out; }
.tuc-exhibit[data-tuc="in"] .tuc-hub-halo { opacity: 1; transition-delay: 1.1s; }
.tuc-hub-box { display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 84px; text-align: center; color: #fff; }
.tuc-hub-ic { font-size: 22px; line-height: 1; margin-bottom: 3px; }
.tuc-hub-k { font-family: var(--font-sans); font-weight: 700; font-size: 13px; }
.tuc-hub-brand { font-family: var(--font-sans); font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; opacity: .72; margin-top: 1px; }

.tuc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
  width: 100%; max-width: 1040px; margin: 2.25rem auto 0; }
.tuc-card { background: var(--canvas); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 1.4rem;
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s var(--ease); }
.tuc-card-1 { border-top: 3px solid var(--navy); }
.tuc-card-2 { border-top: 3px solid var(--blue-deep); }
.tuc-card-3 { border-top: 3px solid var(--blue); }
.tuc-card-4 { border-top: 3px solid var(--teal); }
.tuc-exhibit[data-tuc="in"] .tuc-card { opacity: 1; transform: translateY(0); }
.tuc-exhibit[data-tuc="in"] .tuc-card-1 { transition-delay: 1.2s; }
.tuc-exhibit[data-tuc="in"] .tuc-card-2 { transition-delay: 1.3s; }
.tuc-exhibit[data-tuc="in"] .tuc-card-3 { transition-delay: 1.4s; }
.tuc-exhibit[data-tuc="in"] .tuc-card-4 { transition-delay: 1.5s; }
.tuc-card-ic { font-size: 1.6rem; color: var(--blue-deep); margin-bottom: .5rem; line-height: 1; }
.tuc-card h5 { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 0 0 .35rem; }
.tuc-card p  { font-size: .84rem; color: var(--body); line-height: 1.55; margin: 0; }
.tuc-card { text-decoration: none; color: inherit; display: block; }
.tuc-card:hover { border-color: var(--blue); box-shadow: 0 18px 40px -24px rgba(14, 42, 69, .4); }

@media (max-width: 991.98px) { .tuc-cards { grid-template-columns: repeat(2, 1fr); max-width: 560px; } }
@media (max-width: 767.98px) {
  .tuc-canvas { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tuc-svg { min-width: 680px; }
}
@media (max-width: 520px) { .tuc-cards { grid-template-columns: 1fr; max-width: 360px; } }
@media (prefers-reduced-motion: reduce) {
  .tuc-link { transition: none; opacity: 1 !important; }
  .tuc-hub-halo { opacity: 1; transition: none; }
  .tuc-card { opacity: 1; transform: none; transition: none; }
}

/* reusable mobile "swipe" affordance for horizontally-scrollable exhibits */
.exhibit-scroll-hint { display: none; }
@media (max-width: 767.98px) {
  .exhibit-scroll-hint {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-sans); font-size: .8rem; color: var(--muted);
    margin: .15rem auto 0;
  }
  .exhibit-scroll-hint i { font-size: 1.05rem; }
}

/* =====================================================================
   §19f. SPECIAL PAGE: project-intake editorial intro — intake-
   No hero; copy + stats on the left, actions panel on the right.
   ===================================================================== */
.intake-intro { padding-top: calc(var(--nav-h, 72px) + var(--topbar-h, 0px) + 3rem); }
.intake-grid { gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.intake-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.1rem); line-height: 1.08;
  letter-spacing: -.02em; color: var(--ink); margin: .5rem 0 1.1rem;
}
.intake-lead { font-size: 1.05rem; color: var(--body); line-height: 1.65; max-width: 56ch; margin: 0 0 1.5rem; }
.intake-feats { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: .6rem; }
.intake-feats li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--ink); font-weight: 500; }
.intake-feats i { color: var(--blue); font-size: 1.2rem; flex-shrink: 0; margin-top: .05rem; }
.intake-stats {
  display: grid; grid-template-columns: repeat(4, auto);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line); padding-top: 1.5rem;
}
.intake-stat { display: flex; flex-direction: column; }
.intake-stat-num { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 500; color: var(--navy); line-height: 1; letter-spacing: -.01em; }
.intake-stat-lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: .4rem; line-height: 1.3; }

.intake-actions {
  display: flex; flex-direction: column; gap: 1rem;
  background: linear-gradient(180deg, var(--white) 0%, var(--canvas) 100%);
  border: 1px solid var(--line); border-radius: 20px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.intake-actions-kicker { font-family: var(--font-sans); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; color: var(--blue-deep); margin-bottom: .25rem; }
.intake-btn { width: 100%; justify-content: center; }

/* "Iniciar diagnóstico" jumps to #wizard; land just below the sticky nav,
   right where the gray wizard section begins (matches scrollToForm's offset). */
#wizard { scroll-margin-top: 80px; }

@media (max-width: 991.98px) {
  .intake-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .intake-stats { gap: 1.25rem 1.5rem; }
}

/* =====================================================================
   §20. EXHIBITS, PERSPECTIVE (erosion cascade + roi gauges)
   ===================================================================== */

/* ----- EXHIBIT: Erosion cascade (pvv.jsp) — erc ----- */

.erc-exhibit {
  position: relative;
  padding-top: 1rem;
}

/* decay step-chart: hidden on mobile (panels carry it there) */
.erc-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 920px;
  margin: 0 auto .5rem;
  overflow: visible;
}

.erc-axis { stroke: var(--line); stroke-width: 1.5px; }
.erc-ref  { stroke: var(--blue-soft); stroke-width: 1px; stroke-dasharray: 3 5; }
.erc-ref-lbl { font-family: var(--font-sans); font-size: 10px; fill: var(--muted); letter-spacing: .04em; }

/* remaining integrity (fills below the eroding line) */
.erc-remain { fill: url(#ercRemain); opacity: 0; transition: opacity .8s ease-out .3s; }
.erc-exhibit[data-erc="in"] .erc-remain { opacity: 1; }

/* eroded / lost band (above the line) — terracotta, echoing the pvv decline tone */
.erc-lost { fill: #C48C7E; opacity: 0; transition: opacity .9s ease-out .5s; }
.erc-exhibit[data-erc="in"] .erc-lost { opacity: .14; }

/* the eroding level line, drawn left -> right */
.erc-step {
  stroke-width: 2.5px; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 920; stroke-dashoffset: 920;
  transition: stroke-dashoffset 1.9s cubic-bezier(.65,0,.35,1);
}
.erc-exhibit[data-erc="in"] .erc-step { stroke-dashoffset: 0; }

/* down arrows at each stage transition */
.erc-drop { stroke: #B0543F; stroke-width: 1.5px; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .4s ease-out; }
.erc-exhibit[data-erc="in"] .erc-drop-1 { opacity: .85; transition-delay: 1.0s; }
.erc-exhibit[data-erc="in"] .erc-drop-2 { opacity: .85; transition-delay: 1.5s; }

/* dimension labels (replace 01/02/03) */
.erc-dim { font-family: var(--font-sans); font-size: 13px; font-weight: 600; fill: var(--ink); text-anchor: middle; opacity: 0; transition: opacity .4s ease-out; }
.erc-exhibit[data-erc="in"] .erc-dim-1 { opacity: 1; transition-delay: .6s; }
.erc-exhibit[data-erc="in"] .erc-dim-2 { opacity: 1; transition-delay: 1.1s; }
.erc-exhibit[data-erc="in"] .erc-dim-3 { opacity: 1; transition-delay: 1.6s; }

/* panels row */
.erc-panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.erc-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 1px 3px rgba(14,42,69,.04);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .55s ease-out, transform .55s var(--ease);
}
.erc-exhibit[data-erc="in"] .erc-panel    { opacity: 1; transform: translateY(0); }
.erc-exhibit[data-erc="in"] .erc-panel-1  { transition-delay: .55s; }
.erc-exhibit[data-erc="in"] .erc-panel-2  { transition-delay: 1.1s; }
.erc-exhibit[data-erc="in"] .erc-panel-3  { transition-delay: 1.65s; }

/* top accent per stage */
.erc-panel-1 { border-top: 3px solid #8C3A2C; }
.erc-panel-2 { border-top: 3px solid #B0543F; }
.erc-panel-3 { border-top: 3px solid #C48C7E; }

/* level bar: shows relative "health" dropping across stages */
.erc-bar-wrap {
  position: relative;
  height: 6px;
  border-radius: 3px;
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.erc-bar-bg {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 3px;
}
.erc-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 3px;
  width: 0;
  transition: width .7s cubic-bezier(.65,0,.35,1);
}

/* stage 1: precision high (72%) — dark navy */
.erc-bar-1 { background: #8C3A2C; }
.erc-exhibit[data-erc="in"] .erc-bar-1 { width: 72%; transition-delay: .65s; }

/* stage 2: velocity mid (42%) — blue-deep */
.erc-bar-2 { background: #B0543F; }
.erc-exhibit[data-erc="in"] .erc-bar-2 { width: 42%; transition-delay: 1.2s; }

/* stage 3: visibility low (18%) — blue */
.erc-bar-3 { background: #C48C7E; }
.erc-exhibit[data-erc="in"] .erc-bar-3 { width: 18%; transition-delay: 1.75s; }

.erc-eyebrow {
  margin-bottom: .5rem;
}
.erc-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .75rem;
  line-height: 1.35;
}
.erc-text {
  font-size: .85rem;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

/* reduced-motion: show final state immediately */
@media (prefers-reduced-motion: reduce) {
  .erc-step   { stroke-dashoffset: 0; transition: none; }
  .erc-remain { opacity: 1; transition: none; }
  .erc-lost   { opacity: .14; transition: none; }
  .erc-drop   { opacity: .85; transition: none; }
  .erc-dim    { opacity: 1; transition: none; }
  .erc-panel { opacity: 1; transform: translateY(0); transition: none; }
  .erc-bar  { transition: none; }
  .erc-bar-1 { width: 72%; }
  .erc-bar-2 { width: 42%; }
  .erc-bar-3 { width: 18%; }
}

/* mobile: hide SVG rail, stack panels, no stagger */
@media (max-width: 767.98px) {
  .erc-svg    { display: none; }
  .erc-panels { grid-template-columns: 1fr; }
  .erc-panel  { opacity: 1; transform: translateY(0); }
  .erc-exhibit[data-erc="in"] .erc-panel-1,
  .erc-exhibit[data-erc="in"] .erc-panel-2,
  .erc-exhibit[data-erc="in"] .erc-panel-3 { transition-delay: 0s; }
  .erc-bar-1 { width: 72%; }
  .erc-bar-2 { width: 42%; }
  .erc-bar-3 { width: 18%; }
}

/* ----- EXHIBIT: ROI gauge pairs (roi.jsp) — rog ----- */

.rog-exhibit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.rog-gauge {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 1px 3px rgba(14,42,69,.04);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease-out, transform .55s var(--ease);
}
.rog-exhibit[data-rog="in"] .rog-gauge    { opacity: 1; transform: translateY(0); }
.rog-exhibit[data-rog="in"] .rog-gauge-1  { transition-delay: .2s; }
.rog-exhibit[data-rog="in"] .rog-gauge-2  { transition-delay: .6s; }
.rog-exhibit[data-rog="in"] .rog-gauge-3  { transition-delay: 1.0s; }

.rog-gauge-1 { border-top: 3px solid var(--navy); }
.rog-gauge-2 { border-top: 3px solid var(--blue-deep); }
.rog-gauge-3 { border-top: 3px solid var(--blue); }

.rog-eyebrow {
  margin-bottom: 1rem;
}

/* bar pairs: antes + delta + despues */
.rog-bars {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: 1.25rem;
}

.rog-bar-pair {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.rog-bar-track {
  flex: 1;
  height: 10px;
  background: var(--line);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.rog-bar {
  height: 100%;
  border-radius: 5px;
  width: 0;
  transition: width .75s cubic-bezier(.65,0,.35,1);
}

/* muted "antes" bars */
.rog-bar-before {
  background: #CBD4DC;
}

/* blue "despues" bars */
.rog-bar-after {
  background: var(--blue-deep);
}

/* gauge 1: precision 63% antes, 99% despues */
.rog-exhibit[data-rog="in"] .rog-b1-before { width: 63%; transition-delay: .3s; }
.rog-exhibit[data-rog="in"] .rog-b1-after  { width: 99%; transition-delay: .55s; }

/* gauge 2: cycle velocity — baseline full, depois at 20% (17-30% of original) */
.rog-exhibit[data-rog="in"] .rog-b2-before { width: 100%; transition-delay: .7s; }
.rog-exhibit[data-rog="in"] .rog-b2-after  { width: 22%; transition-delay: .95s; }

/* gauge 3: latency — baseline full, depois near zero (relative) */
.rog-exhibit[data-rog="in"] .rog-b3-before { width: 100%; transition-delay: 1.1s; }
.rog-exhibit[data-rog="in"] .rog-b3-after  { width: 4%;  transition-delay: 1.35s; }

.rog-label {
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
  min-width: 5rem;
  text-align: right;
}
.rog-label-before { color: var(--muted); }
.rog-label-after  { color: var(--blue-deep); }

.rog-delta {
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  padding: .15rem 0;
  opacity: 0;
  transition: opacity .4s ease-out;
}
.rog-delta-1 { color: var(--navy); }
.rog-delta-2 { color: var(--blue-deep); }
.rog-delta-3 { color: var(--blue); }

.rog-exhibit[data-rog="in"] .rog-delta-1 { opacity: 1; transition-delay: .75s; }
.rog-exhibit[data-rog="in"] .rog-delta-2 { opacity: 1; transition-delay: 1.15s; }
.rog-exhibit[data-rog="in"] .rog-delta-3 { opacity: 1; transition-delay: 1.55s; }

.rog-heading {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .625rem;
  line-height: 1.35;
}

.rog-text {
  font-size: .85rem;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

/* reduced-motion: show final state immediately */
@media (prefers-reduced-motion: reduce) {
  .rog-gauge  { opacity: 1; transform: translateY(0); transition: none; }
  .rog-bar    { transition: none; }
  .rog-b1-before { width: 63%; }
  .rog-b1-after  { width: 99%; }
  .rog-b2-before { width: 100%; }
  .rog-b2-after  { width: 22%; }
  .rog-b3-before { width: 100%; }
  .rog-b3-after  { width: 4%; }
  .rog-delta  { opacity: 1; transition: none; }
}

/* mobile: stack gauges, no stagger */
@media (max-width: 767.98px) {
  .rog-exhibit { grid-template-columns: 1fr; }
  .rog-gauge   { opacity: 1; transform: translateY(0); }
  .rog-exhibit[data-rog="in"] .rog-gauge-1,
  .rog-exhibit[data-rog="in"] .rog-gauge-2,
  .rog-exhibit[data-rog="in"] .rog-gauge-3 { transition-delay: 0s; }
  .rog-bar     { transition: none; }
  .rog-b1-before { width: 63%; }
  .rog-b1-after  { width: 99%; }
  .rog-b2-before { width: 100%; }
  .rog-b2-after  { width: 22%; }
  .rog-b3-before { width: 100%; }
  .rog-b3-after  { width: 4%; }
  .rog-delta   { opacity: 1; }
}

/* =====================================================================
   §21. EXHIBITS, VERTICALS (healthcare rail + tools loop + asset triad)
   =====================================================================
   Self-contained staging file. CSS variables reference the same :root
   tokens already defined in accendo.css. A merging agent inserts this
   block after §19 in accendo.css (or appends it).
   ===================================================================== */

/* -----------------------------------------------------------------------
   EXHIBIT 1: Healthcare journey rail (jrail)
   Vertical schematic rail with four checkpoint nodes + alternating cards.
   Replaces the static 2x2 uc-grid on /rfid/healthcare.
   data-jrail: "off" | "in"
   ----------------------------------------------------------------------- */

.jrail-section {
  background: var(--canvas);
}

/* Outer wrapper: rail SVG + card columns side by side on desktop */
.jrail-exhibit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}

/* SVG spine */
.jrail-svg {
  display: block;
  width: 40px;
  flex-shrink: 0;
  overflow: visible;
  /* On desktop this is centred between the left/right card columns */
}

/* Background track line */
.jrail-track {
  stroke: var(--line);
  stroke-width: 1.5px;
  fill: none;
}

/* Animated fill line */
.jrail-fill {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.8s cubic-bezier(.65,0,.35,1);
}
.jrail-exhibit[data-jrail="in"] .jrail-fill {
  stroke-dashoffset: 0;
}

/* Checkpoint nodes */
.jrail-node {
  fill: var(--canvas);
  stroke: var(--line);
  stroke-width: 1.5px;
  opacity: 0;
  transform: scale(.4);
  transform-origin: center;
  transition: opacity .4s ease-out, transform .4s var(--ease),
              fill .3s, stroke .3s;
}
.jrail-exhibit[data-jrail="in"] .jrail-node { opacity: 1; transform: scale(1); }
.jrail-exhibit[data-jrail="in"] .jrail-nd1  { fill: var(--navy);      stroke: var(--navy);      transition-delay: .4s; }
.jrail-exhibit[data-jrail="in"] .jrail-nd2  { fill: var(--blue-deep); stroke: var(--blue-deep); transition-delay: .85s; }
.jrail-exhibit[data-jrail="in"] .jrail-nd3  { fill: var(--blue);      stroke: var(--blue);      transition-delay: 1.3s; }
.jrail-exhibit[data-jrail="in"] .jrail-nd4  { fill: var(--teal);      stroke: var(--teal);      transition-delay: 1.75s; }

/* Number labels inside nodes */
.jrail-num {
  font-size: 8.5px;
  font-family: var(--font-sans);
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: 0;
  font-weight: 600;
  transition: opacity .3s ease-out;
}
.jrail-exhibit[data-jrail="in"] .jrail-n1 { opacity: 1; transition-delay: .6s; }
.jrail-exhibit[data-jrail="in"] .jrail-n2 { opacity: 1; transition-delay: 1.05s; }
.jrail-exhibit[data-jrail="in"] .jrail-n3 { opacity: 1; transition-delay: 1.5s; }
.jrail-exhibit[data-jrail="in"] .jrail-n4 { opacity: 1; transition-delay: 1.95s; }

/* Cards wrapper */
.jrail-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

/* Individual checkpoint card */
.jrail-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 4px rgba(14,42,69,.05);
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .5s ease-out, transform .5s var(--ease);
}

/* Right-side cards slide from right on desktop; handled by --right modifier */
.jrail-card--right {
  transform: translateX(20px);
}

.jrail-exhibit[data-jrail="in"] .jrail-card {
  opacity: 1;
  transform: translateX(0);
}
.jrail-exhibit[data-jrail="in"] .jrail-card-1 { transition-delay: .45s; }
.jrail-exhibit[data-jrail="in"] .jrail-card-2 { transition-delay: .9s; }
.jrail-exhibit[data-jrail="in"] .jrail-card-3 { transition-delay: 1.35s; }
.jrail-exhibit[data-jrail="in"] .jrail-card-4 { transition-delay: 1.8s; }

.jrail-card-1 { border-left: 3px solid var(--navy); }
.jrail-card-2 { border-left: 3px solid var(--blue-deep); }
.jrail-card-3 { border-left: 3px solid var(--blue); }
.jrail-card-4 { border-left: 3px solid var(--teal); }

.jrail-card h5 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .4rem;
  line-height: 1.3;
}
.jrail-card p {
  font-size: .82rem;
  color: var(--body);
  line-height: 1.55;
  margin: 0;
}

/* Desktop layout: 3-column grid [left-cards | spine | right-cards] */
@media (min-width: 992px) {
  .jrail-exhibit {
    display: grid;
    grid-template-columns: 1fr 56px 1fr;
    grid-template-rows: repeat(4, 1fr);
    align-items: center;
    column-gap: 2rem;
    row-gap: 1rem;
  }

  /* SVG spine occupies centre column, all 4 rows */
  .jrail-svg {
    grid-column: 2;
    grid-row: 1 / 5;
    width: 40px;
    /* vertically: fill the 4-row grid */
    height: 100%;
    max-height: 580px;
    align-self: stretch;
  }

  /* Left-side cards: col 1 */
  .jrail-card--left {
    grid-column: 1;
  }

  /* Right-side cards: col 3 */
  .jrail-card--right {
    grid-column: 3;
  }

  /* Position each card in its row */
  .jrail-card-1 { grid-row: 1; }
  .jrail-card-2 { grid-row: 2; }
  .jrail-card-3 { grid-row: 3; }
  .jrail-card-4 { grid-row: 4; }

  .jrail-cards {
    display: contents; /* cards become direct grid children */
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .jrail-fill  { stroke-dashoffset: 0; transition: none; }
  .jrail-node  { opacity: 1; transform: scale(1); transition: none; }
  .jrail-exhibit[data-jrail="in"] .jrail-nd1 { fill: var(--navy);      stroke: var(--navy); }
  .jrail-exhibit[data-jrail="in"] .jrail-nd2 { fill: var(--blue-deep); stroke: var(--blue-deep); }
  .jrail-exhibit[data-jrail="in"] .jrail-nd3 { fill: var(--blue);      stroke: var(--blue); }
  .jrail-exhibit[data-jrail="in"] .jrail-nd4 { fill: var(--teal);      stroke: var(--teal); }
  .jrail-num   { opacity: 1; transition: none; }
  .jrail-card  { opacity: 1; transform: translateX(0); transition: none; }
}

/* Mobile: spine hidden, cards single column stacked */
@media (max-width: 991.98px) {
  .jrail-svg   { display: none; }
  .jrail-cards { flex-direction: column; }
  .jrail-exhibit[data-jrail="in"] .jrail-card-1,
  .jrail-exhibit[data-jrail="in"] .jrail-card-2,
  .jrail-exhibit[data-jrail="in"] .jrail-card-3,
  .jrail-exhibit[data-jrail="in"] .jrail-card-4 { transition-delay: 0s; }
  .jrail-card { opacity: 1; transform: translateX(0); }
}

/* -----------------------------------------------------------------------
   EXHIBIT 2: Tool-room circulation loop (tloop)
   Compact rounded-rect circuit with four icon nodes + adjacent cards.
   On /rfid/tools, replaces the checklist in the what-we-do section.
   data-tloop: "off" | "in"
   Prefix: tloop- (does NOT reuse rloop- classes)
   ----------------------------------------------------------------------- */

.tloop-section {
  background: var(--white);
}

.tloop-exhibit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.tloop-svg {
  display: block;
  width: min(380px, 100%);
  height: min(380px, 100vw);
  flex-shrink: 0;
  overflow: visible;
}

/* Background rounded-rect circuit ring */
.tloop-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.5px;
}

/* Animated arc fills */
.tloop-arc-fill {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
}
.tloop-af1 { stroke: var(--navy); }
.tloop-af2 { stroke: var(--blue-deep); }
.tloop-af3 { stroke: var(--blue); }
.tloop-af4 { stroke: var(--teal); }

/* Arc draw animations: sequential, triggered by JS (dashoffset -> 0 inline)
   CSS provides the transitions with staggered delays */
.tloop-exhibit[data-tloop="in"] .tloop-af1 {
  transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) .1s;
}
.tloop-exhibit[data-tloop="in"] .tloop-af2 {
  transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) 1.1s;
}
.tloop-exhibit[data-tloop="in"] .tloop-af3 {
  transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) 2.1s;
}
.tloop-exhibit[data-tloop="in"] .tloop-af4 {
  transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) 3.1s;
}

/* Circuit nodes */
.tloop-node {
  fill: var(--canvas);
  stroke: var(--line);
  stroke-width: 1.5px;
  opacity: 0;
  transform: scale(.4);
  transform-origin: center;
  transition: opacity .4s ease-out, transform .4s var(--ease),
              fill .3s, stroke .3s;
}
.tloop-exhibit[data-tloop="in"] .tloop-node { opacity: 1; transform: scale(1); }
.tloop-exhibit[data-tloop="in"] .tloop-nd1  { fill: var(--navy);      stroke: var(--navy);      transition-delay: .9s; }
.tloop-exhibit[data-tloop="in"] .tloop-nd2  { fill: var(--blue-deep); stroke: var(--blue-deep); transition-delay: 1.9s; }
.tloop-exhibit[data-tloop="in"] .tloop-nd3  { fill: var(--blue);      stroke: var(--blue);      transition-delay: 2.9s; }
.tloop-exhibit[data-tloop="in"] .tloop-nd4  { fill: var(--teal);      stroke: var(--teal);      transition-delay: 3.9s; }

/* Icon foreignObjects inside nodes */
.tloop-icon {
  opacity: 0;
  transition: opacity .35s ease-out;
}
.tloop-exhibit[data-tloop="in"] .tloop-i1 { opacity: 1; transition-delay: 1.05s; }
.tloop-exhibit[data-tloop="in"] .tloop-i2 { opacity: 1; transition-delay: 2.05s; }
.tloop-exhibit[data-tloop="in"] .tloop-i3 { opacity: 1; transition-delay: 3.05s; }
.tloop-exhibit[data-tloop="in"] .tloop-i4 { opacity: 1; transition-delay: 4.05s; }

/* Node number labels (hidden behind icon; appear as fallback if icon fails) */
.tloop-nlabel {
  font-size: 9px;
  font-family: var(--font-sans);
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: middle;
  opacity: 0;
  font-weight: 600;
  pointer-events: none;
}

/* Cards grid */
.tloop-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
  max-width: 640px;
}

.tloop-card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease-out, transform .5s var(--ease);
}
.tloop-exhibit[data-tloop="in"] .tloop-card   { opacity: 1; transform: translateY(0); }
.tloop-exhibit[data-tloop="in"] .tloop-card-1 { transition-delay: 1.05s; }
.tloop-exhibit[data-tloop="in"] .tloop-card-2 { transition-delay: 2.05s; }
.tloop-exhibit[data-tloop="in"] .tloop-card-3 { transition-delay: 3.05s; }
.tloop-exhibit[data-tloop="in"] .tloop-card-4 { transition-delay: 4.05s; }

.tloop-card-1 { border-left: 3px solid var(--navy); }
.tloop-card-2 { border-left: 3px solid var(--blue-deep); }
.tloop-card-3 { border-left: 3px solid var(--blue); }
.tloop-card-4 { border-left: 3px solid var(--teal); }

/* Step badge (numeric label, language-neutral) */
.tloop-step-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--muted);
  letter-spacing: .04em;
  line-height: 1;
}

.tloop-card p {
  font-size: .82rem;
  color: var(--body);
  line-height: 1.55;
  margin: 0;
}

/* Desktop: SVG side-by-side with cards */
@media (min-width: 992px) {
  .tloop-exhibit {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
  }
  .tloop-svg {
    width: 360px;
    height: 360px;
    flex: 0 0 360px;
  }
  .tloop-cards {
    max-width: none;
    flex: 1;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .tloop-af1,
  .tloop-af2,
  .tloop-af3,
  .tloop-af4 { transition: none; }
  .tloop-node  { opacity: 1; transform: scale(1); transition: none; }
  .tloop-exhibit[data-tloop="in"] .tloop-nd1 { fill: var(--navy);      stroke: var(--navy); }
  .tloop-exhibit[data-tloop="in"] .tloop-nd2 { fill: var(--blue-deep); stroke: var(--blue-deep); }
  .tloop-exhibit[data-tloop="in"] .tloop-nd3 { fill: var(--blue);      stroke: var(--blue); }
  .tloop-exhibit[data-tloop="in"] .tloop-nd4 { fill: var(--teal);      stroke: var(--teal); }
  .tloop-icon  { opacity: 1; transition: none; }
  .tloop-card  { opacity: 1; transform: translateY(0); transition: none; }
}

/* Mobile: single column cards */
@media (max-width: 575.98px) {
  .tloop-cards { grid-template-columns: 1fr; }
  .tloop-exhibit[data-tloop="in"] .tloop-card-1,
  .tloop-exhibit[data-tloop="in"] .tloop-card-2,
  .tloop-exhibit[data-tloop="in"] .tloop-card-3,
  .tloop-exhibit[data-tloop="in"] .tloop-card-4 { transition-delay: 0s; }
  .tloop-card { opacity: 1; transform: translateY(0); }
}

/* -----------------------------------------------------------------------
   EXHIBIT 3: Fixed-asset detection triad (atriad)
   Central asset node + three satellite detection nodes on spokes.
   On /rfid/asset-tracking only (injected via rfid-vertical-detail.jsp).
   data-atriad: "off" | "in"
   ----------------------------------------------------------------------- */

/* Wrapper: SVG + cards stacked on mobile, side-by-side on desktop */
.atriad-exhibit {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Heading block above the SVG+cards row */
.atriad-head {
  margin-bottom: .25rem;
}
.atriad-head .section-title {
  margin-bottom: .5rem;
}
.atriad-head p {
  font-size: .9rem;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

/* SVG diagram */
.atriad-svg {
  display: block;
  width: min(280px, 100%);
  height: min(280px, 100vw);
  flex-shrink: 0;
  overflow: visible;
  margin: 0 auto;
}

/* Pulse ring (one-time after settle) */
.atriad-pulse {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2px;
  opacity: 0;
  transform-origin: 160px 160px;
}
.atriad-pulse--fire {
  animation: atriadPulseRing .7s var(--ease) forwards;
}
@keyframes atriadPulseRing {
  0%   { opacity: .7; transform: scale(1); }
  100% { opacity: 0;  transform: scale(2.2); }
}

/* Spokes */
.atriad-spoke {
  stroke: var(--line);
  stroke-width: 1.5px;
  fill: none;
  stroke-linecap: round;
  transition: stroke-dashoffset .7s cubic-bezier(.65,0,.35,1);
}
/* Individual spoke delays */
.atriad-exhibit[data-atriad="in"] .atriad-sp1 { transition-delay: .15s; }
.atriad-exhibit[data-atriad="in"] .atriad-sp2 { transition-delay: .45s; }
.atriad-exhibit[data-atriad="in"] .atriad-sp3 { transition-delay: .75s; }

/* Satellite nodes */
.atriad-sat {
  fill: var(--canvas);
  stroke: var(--line);
  stroke-width: 1.5px;
  opacity: 0;
  transform: scale(.3);
  transform-origin: center;
  transition: opacity .45s ease-out, transform .45s var(--ease),
              fill .3s, stroke .3s;
}
.atriad-exhibit[data-atriad="in"] .atriad-sat   { opacity: 1; transform: scale(1); }
.atriad-exhibit[data-atriad="in"] .atriad-sat1  { fill: var(--navy);      stroke: var(--navy);      transition-delay: .5s; }
.atriad-exhibit[data-atriad="in"] .atriad-sat2  { fill: var(--blue-deep); stroke: var(--blue-deep); transition-delay: .8s; }
.atriad-exhibit[data-atriad="in"] .atriad-sat3  { fill: var(--teal);      stroke: var(--teal);      transition-delay: 1.1s; }

/* Satellite icons */
.atriad-sico {
  opacity: 0;
  transition: opacity .35s ease-out;
}
.atriad-exhibit[data-atriad="in"] .atriad-si1 { opacity: 1; transition-delay: .7s; }
.atriad-exhibit[data-atriad="in"] .atriad-si2 { opacity: 1; transition-delay: 1.0s; }
.atriad-exhibit[data-atriad="in"] .atriad-si3 { opacity: 1; transition-delay: 1.3s; }

/* Centre node */
.atriad-centre {
  fill: var(--blue-deep);
  stroke: var(--blue-deep);
  stroke-width: 1.5px;
}

/* Centre icon */
.atriad-cico {
  opacity: 1;
}

/* Detection cards */
.atriad-cards {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.atriad-card {
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .5s ease-out, transform .5s var(--ease);
}
.atriad-exhibit[data-atriad="in"] .atriad-card   { opacity: 1; transform: translateX(0); }
.atriad-exhibit[data-atriad="in"] .atriad-card-1 { transition-delay: .55s; }
.atriad-exhibit[data-atriad="in"] .atriad-card-2 { transition-delay: .85s; }
.atriad-exhibit[data-atriad="in"] .atriad-card-3 { transition-delay: 1.15s; }

.atriad-card-1 { border-left: 3px solid var(--navy); }
.atriad-card-2 { border-left: 3px solid var(--blue-deep); }
.atriad-card-3 { border-left: 3px solid var(--teal); }

/* Card icon bubble */
.atriad-card-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.atriad-card-1 .atriad-card-icon { background: var(--navy);      color: #fff; }
.atriad-card-2 .atriad-card-icon { background: var(--blue-deep); color: #fff; }
.atriad-card-3 .atriad-card-icon { background: var(--teal);      color: #fff; }

.atriad-card p {
  font-size: .82rem;
  color: var(--body);
  line-height: 1.55;
  margin: 0;
}

/* Desktop: head spans the full first row; SVG left + cards right below it */
@media (min-width: 768px) {
  .atriad-exhibit {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2rem;
  }
  .atriad-head {
    flex: 0 0 100%;
  }
  .atriad-svg {
    width: 240px;
    height: 240px;
    flex: 0 0 240px;
    margin: 0;
  }
  .atriad-cards {
    flex: 1;
    min-width: 0;
  }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .atriad-pulse { display: none; }
  .atriad-spoke { stroke-dashoffset: 0 !important; transition: none; }
  .atriad-sat   { opacity: 1; transform: scale(1); transition: none; }
  .atriad-exhibit[data-atriad="in"] .atriad-sat1 { fill: var(--navy);      stroke: var(--navy); }
  .atriad-exhibit[data-atriad="in"] .atriad-sat2 { fill: var(--blue-deep); stroke: var(--blue-deep); }
  .atriad-exhibit[data-atriad="in"] .atriad-sat3 { fill: var(--teal);      stroke: var(--teal); }
  .atriad-sico  { opacity: 1; transition: none; }
  .atriad-card  { opacity: 1; transform: translateX(0); transition: none; }
}

/* Mobile */
@media (max-width: 767.98px) {
  .atriad-exhibit {
    flex-direction: column;
    align-items: stretch;
  }
  .atriad-svg { width: min(260px, 90vw); height: min(260px, 90vw); }
  .atriad-exhibit[data-atriad="in"] .atriad-card-1,
  .atriad-exhibit[data-atriad="in"] .atriad-card-2,
  .atriad-exhibit[data-atriad="in"] .atriad-card-3 { transition-delay: 0s; }
  .atriad-card { opacity: 1; transform: translateX(0); }
}

/* =====================================================================
   §22. FUNNEL (proof strip + wa-cta + cta anchor + prelim analysis)
   ===================================================================== */

/* ============================================
   §22.1 PROOF STRIP
   Used on contact.jsp (contact-head block) and
   wizard-form.jsp intro (between benefits + actions).
   ============================================ */
.proof-strip {
    margin: 1.25rem 0 1.5rem;
}
.proof-strip-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1.1rem;
    padding: .85rem 1.2rem;
    background: var(--navy-tint, #E9EEF5);
    border: 1px solid rgba(21, 36, 60, .1);
    border-radius: var(--radius-card, 12px);
}
.proof-stat {
    display: flex;
    align-items: baseline;
    gap: .42rem;
}
.proof-num {
    font-family: var(--font-serif, 'Newsreader', Georgia, serif);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--navy, #15243C);
    letter-spacing: -.02em;
    line-height: 1;
}
.proof-lbl {
    font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
    font-size: .67rem;
    font-weight: 600;
    color: var(--muted, #6B7280);
    text-transform: uppercase;
    letter-spacing: .1em;
    line-height: 1.2;
}
.proof-sep { display: none; }
.proof-divider {
    font-size: .85rem;
    color: rgba(21, 36, 60, .2);
    user-select: none;
    flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .proof-divider { display: none; }
    .proof-strip-inner { gap: .65rem .9rem; }
}

/* ============================================
   §22.2 WHATSAPP LANE BUTTON (.wa-cta)
   Ghost button variant — no green fill.
   Applied to wa-cta.jsp fragment.
   ============================================ */
.wa-cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    /* Inherits .btn-acc--ghost from accendo.css.
       No additional overrides needed. */
}

/* ============================================
   §22.3 CTA ANCHOR LINE (.cta-anchor)
   Appears above button rows in goal.jsp,
   start-a-project.jsp, diagnostic-cta.jsp, cta1.jsp.
   ============================================ */
.cta-anchor {
    /* A normal block placed ABOVE the button rows (see CTA fragments).
       It inherits each CTA's own text-align so centered CTAs center it and
       the cta-band keeps it left-aligned under the title. */
    font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
    font-size: .78rem;
    color: var(--muted, #6B7280);
    letter-spacing: .04em;
    line-height: 1.5;
    margin: 0 0 .85rem;
}

/* ============================================
   §22.4 PRELIMINARY ANALYSIS CARD (.prelim-card)
   Rendered by renderPrelimCard() in accendo-wizard.js
   into #wiz-prelim-card on the wizard success screen.
   ============================================ */
.prelim-card {
    margin: 1.75rem auto 0;
    max-width: 38rem;
}
.prelim-card-inner {
    background: #fff;
    border: 1px solid rgba(21, 36, 60, .1);
    border-radius: var(--radius-card, 12px);
    padding: 1.5rem 1.75rem;
    text-align: left;
    box-shadow: 0 6px 18px -12px rgba(21, 36, 60, .3);
}
.prelim-title {
    font-family: var(--font-serif, 'Newsreader', Georgia, serif);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--navy, #15243C);
    letter-spacing: -.015em;
    margin: 0 0 .65rem;
    line-height: 1.25;
}
.prelim-headline {
    font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
    font-size: .88rem;
    color: var(--body-text, #4F555E);
    line-height: 1.6;
    margin: 0 0 1rem;
}
.prelim-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.prelim-bullet {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
    font-size: .84rem;
    color: var(--body-text, #4F555E);
    line-height: 1.5;
}
.prelim-bullet-icon {
    color: var(--blue-deep, #2C5A82);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .12rem;
}
.prelim-note {
    font-family: var(--font-sans, 'Geist', system-ui, sans-serif);
    font-size: .74rem;
    color: var(--muted, #6B7280);
    line-height: 1.5;
    margin: 0;
    border-top: 1px solid rgba(21, 36, 60, .08);
    padding-top: .75rem;
}

/* =====================================================================
   §34. RFID VERTICAL PAGE COMPONENTS
   ===================================================================== */

/* Hero stat tile grid (rfid.jsp right-column stats) */
.hero-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-self: center;
}

.hero-stat-tile {
  background: var(--navy-tint);
  border-radius: var(--radius-card);
  padding: 1.4rem 1.2rem;
  text-align: center;
}

.hero-stat-tile-num {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--navy);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1;
}

.hero-stat-tile-label {
  font-size: .72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-top: .5rem;
  line-height: 1.3;
}

/* Location badge row (hero pages, light variant) */
.hero-location-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1.6rem;
}
.hero-location-row i {
  color: var(--blue-deep);
  vertical-align: middle;
}

/* manufacturing.jsp — material-flow exhibit icon sizing */
.mflow-icon i {
  color: #fff;
  font-size: 18px;
  display: block;
  text-align: center;
  line-height: 24px;
}

/* case-study-teaser horizontal banner */
.cs-teaser-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--acc-gap-sm, 1rem);
}
@media (max-width: 767px) {
  .cs-teaser-grid { grid-template-columns: 1fr; }
  .cs-teaser-metrics { display: none; }
}

/* ===== Capabilities page (/capabilities) ===== */
.caps-section { padding-top: 3rem; }
.caps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 3rem;
}
.cap-block {
  border-top: 2px solid var(--blue-deep, #10658C);
  padding-top: 1.25rem;
}
.cap-title {
  font-size: 1.35rem;
  line-height: 1.25;
  margin: 0 0 .75rem;
  color: var(--navy, #15243C);
}
.cap-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft, #3c4a5a);
  margin: 0 0 1rem;
}
.cap-proof {
  font-weight: 700;
  color: var(--navy, #15243C);
  margin: 0 0 1rem;
  font-variant-numeric: tabular-nums;
}
.cap-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--blue-deep, #10658C);
  text-decoration: none;
}
.cap-link:hover { text-decoration: underline; }
@media (max-width: 767px) {
  .caps-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ===== Capabilities CTA band (vertical pages) ===== */
.caps-cta-lead {
  max-width: 60ch;
  margin: 0 auto 1.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft, #3c4a5a);
}

/* ===== Capabilities hero: flush-left with content/logo ===== */
.interior-hero--flush .acc-wrap { max-width: var(--maxw); }

@media (max-width: 600px) {
  .footer-brand-row { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .footer-brand-aside { align-items: flex-start; }
}

/* ===== Office addresses (contact cards + footer) ===== */
.location-card-street { font-size: .92rem; color: var(--ink-soft, #3c4a5a); margin: .15rem 0 .1rem; }
.footer-brand-info { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.footer-office, .footer-contact { display: flex; flex-direction: column; gap: .12rem; font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.5); text-decoration: none; }
.footer-office { transition: color .2s; }
.footer-office:hover { color: rgba(255,255,255,.75); }
.footer-office-name { color: rgba(255,255,255,.85); font-weight: 600; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .15rem; }
.footer-contact a { color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s; }
.footer-contact a:hover { color: #fff; }