/* ==========================================================================
   iottag — main stylesheet
   Structure:
     1. Design tokens (CSS custom properties)
     2. Base / reset
     3. Layout helpers (container, section, grid)
     4. Typography
     5. Buttons
     6. Header / navigation
     7. Footer
     8. Reusable components (cards, brand strip, lens diagram, world map…)
     9. Page sections (hero, CTA, media blocks)
    10. Responsive
   ========================================================================== */

/* 1. DESIGN TOKENS ------------------------------------------------------- */
:root {
  /* Brand colours */
  --c-blue:        #2da2db;
  --c-blue-dark:   #1da2d8;
  --c-blue-light:  #4cc4fe;
  --c-blue-pale:   #e9f3f9;
  --c-blue-tint:   #d3e8f3;
  --c-orange:      #f4813e;
  --c-navy:        #0c477d;

  /* Neutrals */
  --c-ink:         #5c616b;
  --c-ink-2:       #1a1a1a;
  --c-grey:        #504e52;
  --c-grey-2:      #828184;
  --c-line:        #d9d9da;
  --c-line-soft:   #eeeeee;
  --c-surface:     #f2f2f2;
  --c-white:       #ffffff;

  /* Hero / dark gradients */
  --grad-hero:  linear-gradient(118.9deg, #0c477d 0%, #2f4f5b 49%, #073459 100%);
  --grad-dark:  linear-gradient(rgba(5,55,80,.6), rgba(5,55,80,.6));
  --grad-dark-strong: linear-gradient(rgba(5,55,80,.7), rgba(5,55,80,.7));

  /* Type families */
  --f-head: "Oswald", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-body: "Open Sans", -apple-system, "Segoe UI", sans-serif;
  --f-ui:   "Roboto", -apple-system, "Segoe UI", sans-serif;
  --f-alt:  "Ubuntu", -apple-system, "Segoe UI", sans-serif;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;

  /* Layout */
  --maxw: 1200px;
  --pad-x: 80px;
  --nav-h: 80px;
}

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

html {
  scroll-behavior: smooth;
  /* render the whole site at 80% — equivalent to opening the page at 80% browser zoom */
  zoom: 0.8;
}

body {
  margin: 0;
  font-family: var(--f-body);
  color: #5c616b;
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* full-bleed 100vw layers (e.g. .fri-dark__bg) overhang by the scrollbar width;
     clip (not hidden — no new scroll container) so they never cause an x-scrollbar */
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* Material Symbols icon helper */
.icon {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* 3. LAYOUT HELPERS ----------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; }

.section,
.section--narrow {
  width: min(100%, calc(var(--maxw) + (var(--pad-x) * 2)));
  margin-inline: auto;
}

.section--flush > :not(.btn):not(.full-bleed),
.section--pale:not(.section) > :not(.btn):not(.full-bleed) {
  width: min(100%, calc(var(--maxw) + (var(--pad-x) * 2)));
  margin-inline: auto;
}
.full-bleed { width: 100%; }

.section { padding: 80px var(--pad-x); }
.section--narrow { padding: 64px var(--pad-x); }
.section--pale  { background: var(--c-blue-pale); }
/* tinted section bands: the box stays capped at --maxw and centred (content
   unchanged), but the tint bleeds edge-to-edge — a huge box-shadow paints it
   and the clip-path bounds it vertically / prevents horizontal overflow */
.section.section--pale,
.section--narrow.section--pale {
  box-shadow: 0 0 0 100vmax var(--c-blue-pale);
  clip-path: inset(0 -100vmax);
}
.section--flush { padding-inline: 0; }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; }
.center  { align-items: center; }
.between { justify-content: space-between; }
.wrap    { flex-wrap: wrap; }
.grow    { flex-grow: 1; }

.gap-8  { gap: 8px; }  .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.gap-40 { gap: 40px; } .gap-60 { gap: 60px; } .gap-80 { gap: 80px; }

/* 4. TYPOGRAPHY --------------------------------------------------------- */
/* block-only reset so layout helpers can still center headings with
   margin-inline: auto */
.h1, .h2, .h3, .eyebrow { margin-block: 0; }

.h1 {
  font-family: var(--f-alt);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #4b5059;
}
.h2 {
  font-family: var(--f-alt);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #4b5059;
}
.h3 {
  font-family: var(--f-alt);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: #4b5059;
}
.eyebrow {
  font-family: var(--f-alt);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.01em;
  color: #4b5059
}
/* blue section eyebrow — same style as .hero__kicker but on light backgrounds */
.kicker {
  margin: 0;
  font-family: var(--f-body); font-weight: 400; font-size: 20px; line-height: 1.5;
  color: var(--c-blue);
}
/* Ubuntu caps carry ~3px left side bearing at 56px — pull the h1 left so its ink
   lines up optically with the kicker above it */
[data-page="home"] .hero .h1 { margin-left: -3px; }
.eyebrow--cond {
  font-family: var(--f-alt);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 1.68px;
  color: #4b5059
}
.lead   { font-family: var(--f-body); font-weight: 400; font-size: 18px; line-height: 1.5; color: #5c616b; margin: 0; }
.body   { font-family: var(--f-body); font-weight: 400; font-size: 18px; line-height: 1.5; color: #5c616b; margin: 0; }
.body--sm { font-size: 16px; }
.text-center { text-align: center; }
.measure { max-width: 820px; }

/* Body copy is left-aligned site-wide, with a natural ragged right edge. */
p { text-align: left; }
/* Keep centred / right-aligned containers: their paragraphs inherit the
   container's alignment instead of picking up the left rule above. */
:is(.text-center, .lens-tile, .env-tile, .ie-core, .asset-stage, .brand-card,
    .testimonial__by, .level, .stage, .vtabs__tab, .odt2-tl__col, .fri-chip,
    .fri-cond2, .ab-team__band, .ab-cta__head, .a7-node--plain) p { text-align: inherit; }

/* 5. BUTTONS ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 10px 24px;
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--f-alt);         /* Ubuntu (no 600 cut — use 500) */
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s ease, background .15s ease, transform .1s ease;
}
.btn:hover  { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn .icon  { font-size: 24px; }

.btn--primary   { background: #2DA2DB; color: #fff; box-shadow: inset 0 0 0 1px var(--c-blue); }
.btn--secondary { background: #fff; color: var(--c-grey); box-shadow: inset 0 0 0 1px rgba(6,3,9,.15); }
.btn--ghost     { color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.14); filter: none; }
.btn--lg        { padding: 10px 32px; }
/* full-width button with label left / icon right (factor cards) */
.btn--block     { width: 100%; justify-content: space-between; }

/* 6. HEADER / NAV ------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 0 64px;
  background: transparent;
  z-index: 50;
  transition: background .2s ease, backdrop-filter .2s ease;
}
/* Figma: idle header is transparent; hovering / an open dropdown brings in
   the translucent navy panel (only while at the top of the page) */
.site-header:not(.site-header--scrolled):not(.site-header--solid):hover,
.site-header:not(.site-header--scrolled):not(.site-header--solid):focus-within {
  background: rgba(45,51,87,.95);
  backdrop-filter: blur(4px);
}
/* once scrolled the bar goes white with dark text */
.site-header--scrolled,
.site-header--solid {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 9px; flex: 1 1 0; }
.brand__logo { display: block; height: 36px; width: auto; flex-shrink: 0; color: #fff; transition: color .2s ease; }
.site-header--scrolled .brand__logo,
.site-header--solid .brand__logo { color: #000; }

.nav { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.nav__item { position: static; height: var(--nav-h); display: flex; align-items: center; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  transition: color .15s;
  /* top-level items are <button>s (the section hubs no longer exist) — strip
     the UA button chrome so they render identically to the former links */
  background: none;
  border: 0;
  padding: 0;
  line-height: inherit;
}
/* caret only reads as an affordance on mobile, where the button toggles.
   chevron_right rotated 90deg — the font is subset via icon_names and
   expand_more is not in the list, chevron_right is. */
.nav__caret {
  display: none; font-size: 20px;
  transform: rotate(90deg); transition: transform .18s ease;
}
.site-header--scrolled .nav__link,
.site-header--solid .nav__link { color: #4b5059; }
.nav__link:hover,
.nav__item:hover .nav__link,
.nav__link[aria-current="page"] { color: var(--c-blue); }
/* Mega-menu dropdown */
.megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* surface (#f2f2f2) at 95% — matches the 95% navy header hover panel */
  background: rgba(242, 242, 242, .95);
  backdrop-filter: blur(4px);
  padding: 40px 64px;
  box-shadow: 0 24px 40px -16px rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity .25s ease, transform .3s cubic-bezier(.22,.9,.3,1), visibility .3s ease;
  z-index: 40;
}
.nav__item:hover .megamenu,
.nav__item:focus-within .megamenu { opacity: 1; visibility: visible; transform: none; }
/* desktop: top-level items only open the menu (click is disabled in JS) */
.nav__item > .nav__link[data-nav] { cursor: default; }
/* Figma dropdown: 424px options auto-wrapping with 40px row / 20px column
   gaps (3 per row at 1440); Resources spreads its 4 options across one row */
.megamenu__inner {
  max-width: 1312px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, 424px);
  gap: 40px 20px;
}
/* in the menu with a capabilities band, push the band's hairline 16px below
   the tier-1 descriptions — exactly the options' 16px bottom overhang, so the
   Atlas tile's fill still meets the band with no grey strip between them */
.megamenu:has(.megamenu__sub) > .megamenu__inner { padding-bottom: 16px; }
.megamenu__inner--4 { grid-template-columns: repeat(4, 1fr); }
.megamenu__opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Figma option box: 16px vertical / 20px horizontal padding, so the hover
     fill and the Atlas tile get real air around the text. The padding is
     cancelled by matching negative margins (left also absorbs the 2px hover
     bar: 20+2=22) so the grid rhythm — and the text's 424px measure — never
     shifts: hovering only paints. Boxes overhang into the 20px column gap;
     harmless, the fills just meet edge-to-edge like the Figma tiles. */
  padding: 16px 20px;
  border-left: 2px solid transparent;
  margin: -16px -20px -16px -22px;
  transition: border-color .15s ease, background-color .15s ease;
}
.megamenu__opt strong {
  font-family: var(--f-alt);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--c-grey);
  transition: color .15s ease;
}
.megamenu__opt span {
  font-family: var(--f-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.25;
  color: var(--c-grey);
}
.megamenu__opt:hover { border-left-color: #1e729c; }
.megamenu__opt:hover strong { color: #4b5059; }
/* light-blue block marks Atlas Core (and its capabilities row below) as one
   group — only while hovered / while its row is open, not painted statically.
   The background-color transition on .megamenu__opt fades it in and out. */
.megamenu:has(.megamenu__opt--atlas:hover, .megamenu__sub:hover) .megamenu__opt--atlas,
.nav__item:has(:focus-visible) .megamenu__opt--atlas { background: var(--c-blue-pale); }
/* the tile's title darkens to the same grey as the other options' hover, and
   the tile has no hover bar — its fill + rounded top corners do the marking */
.megamenu:has(.megamenu__opt--atlas:hover, .megamenu__sub:hover) .megamenu__opt--atlas strong,
.nav__item:has(:focus-visible) .megamenu__opt--atlas strong { color: #4b5059; }
.megamenu__opt--atlas {
  border-radius: 8px 8px 0 0;
  /* the tile's fill is visible (unlike the other options') — pull its right
     edge back so the blue never crosses the next option's hover-bar line
     (that bar hangs 22px into the gap: 20px overhang + 2px bar width) */
  margin-right: 2px;
  /* paint the tile's fill over the band's top border so the two read as one
     continuous block (the options overhang their row by 8px) */
  position: relative;
  z-index: 1;
}
.megamenu__opt--atlas:hover { border-left-color: transparent; }
/* down arrow on Atlas Core — signals the capabilities row underneath.
   chevron_right rotated 90deg (expand_more is not in the icon subset).
   The title becomes a flex row so the arrow sits right after the text.
   Descendant selector so it beats the `.megamenu__opt span` description
   styles, which would otherwise override the icon font. */
.megamenu__opt--atlas strong {
  display: flex;
  align-items: center;
  gap: 4px;
}
.megamenu__opt .megamenu__caret {
  display: inline-block;
  font-family: "Material Symbols Outlined";
  font-size: 24px;
  line-height: 1;
  color: var(--c-blue);
  transform: rotate(90deg);
  transition: transform .25s ease;
}

/* Second level: rolling over "Atlas Core" opens its capabilities in a row
   underneath, and the panel grows to fit. It slides open (max-height) and
   fades in rather than snapping. The gap above the sub-row is PADDING, not
   margin, so the hover target is continuous with the option above it — a
   margin would leave a dead strip that flickers the row shut on the way down
   (the options already overhang their row by 8px via their negative margins).
   The band bleeds through the panel's 64px side and 40px bottom padding
   (cancelled by its own padding) so the light blue runs the full panel
   width and down to the panel's bottom edge — no grey gaps around it.
   The bleed also gives the options' negative-margin hover bars room
   inside overflow:hidden.
   NOTE: the vertical paddings live in the OPEN state — max-height can't
   compress padding, so any padding left on the closed state would keep
   holding layout space and make this panel taller than the others. */
.megamenu__sub {
  margin: 0 -64px 0;            /* bottom bleed only applies once open */
  padding: 0 64px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background: var(--c-blue-pale);  /* same light blue as the Atlas Core tile */
  /* Figma: a hairline separates the band from the tier-1 row — width lives
     in the OPEN state so the closed (0-height) strip shows no 1px line */
  border-top: 0 solid #d9d9da;
  transition: max-height .3s ease, padding .3s ease, margin .3s ease,
              border-top-width .3s ease, opacity .25s ease;
}
/* open on Atlas Core hover, stay open while the pointer is in the sub-row,
   and stay open for KEYBOARD users the whole time focus is inside the menu.
   :has(:focus-visible), not :focus-within — a mouse click on any option
   (Fatal Risk, Production…) also focuses it, and must NOT pop the band open.
   The band sits DIRECTLY under the tier-1 row (no grey gap) so the Atlas
   Core tile's fill runs into it, per the Figma dropdown. */
.megamenu:has(.megamenu__opt--atlas:hover, .megamenu__sub:hover) .megamenu__sub,
.nav__item:has(:focus-visible) .megamenu__sub {
  max-height: 460px;
  border-top-width: 1px;
  /* 36px minus the options' 16px overhang = 20px of visible air between the
     hairline / panel edge and each row's hover zone */
  padding-top: 36px;
  padding-bottom: 36px;
  margin-bottom: -40px;         /* band reaches the panel's bottom edge */
  opacity: 1;
}
/* flip the Atlas Core arrow while its row is open */
.megamenu:has(.megamenu__opt--atlas:hover, .megamenu__sub:hover) .megamenu__caret,
.nav__item:has(:focus-visible) .megamenu__caret { transform: rotate(-90deg); }

.nav-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex: 1 1 0; }
.site-header--scrolled .btn--ghost,
.site-header--solid .btn--ghost { color: #4b5059; }
.site-header--scrolled .btn--ghost:hover,
.site-header--solid .btn--ghost:hover { background: rgba(45,162,219,.08); }
.nav-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; }
.site-header--scrolled .nav-toggle,
.site-header--solid .nav-toggle { color: #4b5059; }
.nav-toggle .icon { font-size: 30px; }

/* 7. FOOTER ------------------------------------------------------------- */
.footer { background: #fff; border-top: 1px solid var(--c-line-soft); }
.footer__inner {
  width: min(100%, calc(var(--maxw) + (var(--pad-x) * 2)));
  margin-inline: auto;
  padding: 64px var(--pad-x);
  display: flex; flex-direction: column; gap: 30px;
}
.footer__top { display: flex; gap: 80px; align-items: flex-start; }
.footer__logo { width: 138px; height: 50px; object-fit: contain; flex-shrink: 0; }
.footer__cols { display: flex; gap: 20px; flex-grow: 1; }
.footer__col { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 130px; }
.footer__col h2 { margin: 0 0 10px; font-family: var(--f-alt); font-weight: 500; font-size: 14px; line-height: 16px; color: #4e4b59; }
.footer__col a { font-family: "Open Sans", var(--f-body); font-weight: 300; font-size: 12px; line-height: 19px; color: #8c8a97; transition: color .15s; }
.footer__col a:hover { color: var(--c-blue); }
.footer__certs { width: 206px; height: 68px; object-fit: contain; object-position: left center; align-self: flex-start; }
.footer__bar { height: 50px; background: #008ac7; display: flex; align-items: center; justify-content: center; }
.footer__bar span { font-family: Arial, sans-serif; font-size: 12px; letter-spacing: .06px; color: #fff; }

/* 8. REUSABLE COMPONENTS ------------------------------------------------ */

/* Generic feature / icon card */
.card {
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--c-line);
  padding: 24px;
  transition: box-shadow .2s ease, transform .2s ease;
}
a.card:hover { box-shadow: 0 14px 28px -10px rgba(6,3,9,.16), inset 0 0 0 1px var(--c-blue); transform: translateY(-3px); }
/* Borderless white card on the pale Executive Insight band (Figma 12359:9829) */
.card--on-pale { box-shadow: none; }
.card--on-pale .role-pill { background: #fff; border: .8px solid rgba(29,162,216,.12); border-radius: 8px; }
.card__icon { font-size: 40px; color: var(--c-blue); }
.card__ic { width: 40px; height: 40px; display: block; }   /* SVG icons keep their own baked-in colours */

/* Outlined mini cards (factors) */
.minicard {
  flex: 1;
  min-height: 180px;   /* fixed height: hover reveals the button without growing the card */
  background: var(--c-white);
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--c-line);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  transition: box-shadow .15s, background .15s;
}
.minicard--active { box-shadow: inset 0 0 0 1px var(--c-blue); }
.minicard:hover   { box-shadow: inset 0 0 0 1px var(--c-blue); }
.minicard[data-slide] { cursor: pointer; }
/* Learn More: collapsed by default so the copy sits vertically centred;
   on hover/focus it expands and pushes the copy up */
.minicard .btn--block {
  justify-content: center;
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: opacity .15s, max-height .2s ease, margin-top .2s ease;
}
.minicard:hover .btn--block,
.minicard:focus-within .btn--block { opacity: 1; max-height: 44px; margin-top: 16px; }
.minicard p { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.3; color: var(--c-ink); }
/* compact checklist + always-visible watch link inside minicards */
.minicard .checklist { gap: 8px; margin-top: 12px; }
.minicard .checklist__item { font-size: 15px; }
.minicard .checklist__box { width: 22px; height: 22px; }
.minicard .checklist__box .icon { font-size: 14px; }
.minicard__watch {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px;
  font-family: var(--f-body); font-weight: 600; font-size: 15px;
  color: var(--c-blue); text-decoration: none;
}
.minicard__watch .icon { font-size: 20px; }
.minicard__watch:hover .minicard__label { text-decoration: underline; }
/* Watch Overview (button → switches the video slide, like clicking the card)
   sits beside a Learn More page link */
.minicard__links { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.minicard__links .minicard__watch { margin-top: 0; }
button.minicard__watch { background: none; border: 0; padding: 0; cursor: pointer; }
.minicard__more {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-body); font-weight: 600; font-size: 15px;
  color: var(--c-blue); text-decoration: none;
}
.minicard__more .icon { font-size: 20px; }
.minicard__more:hover .minicard__label { text-decoration: underline; }
/* Active (selected) card — solid iottag blue with white text (markup request Aug 2026) */
.minicard--active { background: var(--c-blue); }
.minicard--active .h3,
.minicard--active p,
.minicard--active .checklist__item,
.minicard--active .minicard__more { color: #fff; }
.minicard--active .checklist__box { background: #fff; border-color: #fff; }

/* "Why industry leaders choose iottag" — copy 480 left, overlapping comparison cards
   right (Figma 13357:17515: copy 480 | cards 720 = 400 + 400 overlapping 80) */
.compare { display: flex; align-items: center; gap: 80px; }
.compare__head { flex: 1 1 0; min-width: 0; justify-content: center; }
.compare__cards { display: flex; align-items: flex-end; justify-content: flex-end; flex: 1; min-width: 0; }
.compare-card { width: 400px; max-width: 100%; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.compare-card--trad { margin-right: -80px; }  /* elevated card overlaps it */
.compare-card--oi { position: relative; border-color: var(--c-blue-light); box-shadow: 0 12px 16px -4px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.03); }
.compare-card__head {
  margin: 0; display: flex; align-items: center; height: 60px; padding: 0 20px;
  background: #fdf6e5;
  font-family: var(--f-alt); font-weight: 700; font-size: 18px; line-height: 1.2; color: #4b5059;
}
.compare-card--oi .compare-card__head { height: 72px; background: var(--c-blue-pale); }
.compare-card__list { margin: 0; padding: 0; list-style: none; }
.compare-card__list li {
  display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 16px;
  font-family: var(--f-alt); font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--c-grey);
}
.compare-card__list li + li { border-top: 1px solid var(--c-line); }
.compare-card--oi .compare-card__list li { color: #4b5059; }
.compare-card__ic { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }

/* Executive Insight — text left, image right; stacks on mobile (no flex-wrap on desktop) */
.exec-row { display: flex; align-items: center; gap: 40px; width: 100%; }

/* Vector Tag field photo — source JPG is stored portrait; rotate 90° to show landscape.
   The wrapper holds the final landscape box; the img is sized swapped then rotated so it
   fills the box exactly (rotation alone doesn't reflow the layout). */

/* Bullet list (applications / outcomes) */
.bullets { display: flex; flex-direction: column; }
.bullets li { display: flex; align-items: center; gap: 8px; min-height: 22px; list-style: none; font-family: var(--f-body); font-size: 12px; line-height: 1.3; color: var(--c-ink); }
.bullets { margin: 0; padding: 0; }
.dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; background: var(--c-blue); }
.dot--orange { background: var(--c-orange); }
.info-card { flex: 1; background: #fff; border-radius: var(--r-md); padding: 24px 40px; display: flex; flex-direction: column; gap: 8px; }
.info-card__cols { display: flex; gap: 16px; }
.info-card__cols > div { flex: 1; }
/* customer quote card (Figma 12359:9652 "Testimonial") */
.testimonial { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.testimonial__quote { margin: 0; font: 600 16px/1.2 var(--f-body); color: var(--c-ink); text-align: center; }
.testimonial__by { display: flex; flex-direction: column; text-align: right; font: 600 14px/1.2 var(--f-body); color: var(--c-ink); }
.testimonial__org { font-weight: 400; }

/* Brand strip */
.brand-strip { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.brand-strip__row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; max-width: 1312px; }
.brand-card { width: 120px; height: 80px; border-radius: var(--r-md); background: #fff; box-shadow: inset 0 0 0 1px var(--c-line-soft); display: flex; align-items: center; justify-content: center; padding: 12px; }
.brand-card img { max-width: 100%; max-height: 56px; object-fit: contain; }
.brand-card span { font-family: var(--f-head); font-weight: 700; font-size: 18px; color: #555; text-align: center; }
.role-pill { background: #f2f2f2; border-radius: 6px; padding: 2px 8px; line-height: 18px; white-space: nowrap; }
.dots { display: flex; gap: 8px; align-items: center; }
.dots span { width: 8px; height: 8px; border-radius: 50%; background: #b3c5cf; }
.dots span.is-active { background: var(--c-blue); }

/* Brand logo marquee (single auto-scrolling row) */
.brand-marquee { width: 100%; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.brand-marquee__track { display: flex; gap: 20px; width: max-content; animation: brand-scroll 40s linear infinite; }
.brand-marquee .brand-card { flex: 0 0 auto; }
@keyframes brand-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 10px)); } }

/* Unified Operational Lens diagram */
.lens { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.lens--lg { gap: 30px; }
.lens__row { display: flex; gap: 8px; justify-content: center; }
.lens__row--bottom { align-items: flex-start; }
.lens-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 14px;
  /* Per-tile colours: override --tile-bg / --tile-ic inline on any tile.
     e.g. <div class="lens-tile" style="--tile-bg:#eef1f6;--tile-ic:#5b6b8c"> */
  background: var(--tile-bg, var(--c-surface));
  text-align: center;
}
.lens-tile span:last-child { font-family: var(--f-body); font-size: 11px; line-height: 1.2; color: var(--c-ink); white-space: pre-line; }
.lens-tile .icon { font-size: 22px; color: var(--tile-ic, var(--c-blue)); }
.lens-tile__ic { width: 24px; height: 24px; display: block; }   /* SVG icons keep their own baked-in colours */
.lens--lg .lens-tile { padding: 18px 12px; border-radius: var(--r-lg); gap: 8px; }
.lens--lg .lens-tile span:last-child { font-size: 13px; line-height: 1.35; }
.lens--lg .lens-tile .icon { font-size: 24px; }
/* Named presets — each just sets the two variables */
.lens-tile--src  { --tile-bg: #fdf1e3; --tile-ic: var(--c-orange); }  /* peach data source */
.lens-tile--dest { --tile-bg: #e9f3f9; --tile-ic: var(--c-blue);   }  /* blue outcome     */
.lens-center {
  width: 130px; height: 130px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 8px var(--c-blue-pale), inset 0 0 0 1.5px var(--c-blue-light);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}

/* Home "Unified Operational Lens" — everything is absolutely positioned in a
   single 540x380 coordinate system shared with the SVG (viewBox 0 0 540 380),
   so tiles arc around the hub and the connector lines land exactly on them.
   Each tile carries its own left/top inline (easy to nudge per Figma). */
.lens--diagram { position: relative; width: 540px; height: 380px; }
.lens--diagram .lens__row { display: contents; }   /* row wrappers no longer lay out — tiles position themselves */
.lens--diagram .lens-tile {
  position: absolute; z-index: 1; width: 82px; min-height: 74px;
  justify-content: center; margin: 0;
}
.lens--diagram .lens__row--bottom .lens-tile { width: 96px; }
.lens--diagram .lens-center { position: absolute; z-index: 1; left: 195px; top: 115px; margin: 0; }
.lens__links { position: absolute; top: 0; left: 0; width: 540px; height: 380px; z-index: 0; pointer-events: none; }

/* Light pulse travelling from the hub outward along every connector.
   pathLength="100" on each line normalises length, so a single dash
   pattern + one shared keyframe fires all lines simultaneously. */
.lens__pulse { filter: drop-shadow(0 0 6px rgba(45,162,219,.9)); }
.lens__pulse line {
  stroke: var(--c-blue-light);
  stroke-width: 3.5;
  stroke-linecap: round;
  /* 18u beam + 182u gap (period 200 = 2x path) → one beam, then a pause */
  stroke-dasharray: 18 182;
  stroke-dashoffset: 0;
  animation: lens-pulse 2.6s linear infinite;
}
@keyframes lens-pulse {
  from { stroke-dashoffset: 0; }      /* beam at hub centre (hidden under circle) */
  to   { stroke-dashoffset: -200; }   /* 0->100 rides out to tiles, 100->200 = pause */
}
@media (prefers-reduced-motion: reduce) {
  .lens__pulse { display: none; }   /* respect users who opt out of motion */
}
.lens-center span { font-family: var(--f-body); font-weight: 700; font-size: 13px; line-height: 1.2; text-align: center; color: var(--c-ink); white-space: pre-line; }
.lens--lg .lens-center { width: 160px; height: 160px; gap: 8px; }
.lens--lg .lens-center span { font-size: 16px; line-height: 1.3; }

/* World map — fills the flex column beside the text inside the capped, centred
   content row; pin coords are relative to the img box */
.worldmap { position: relative; flex: 1 1 0; min-width: 320px; max-width: 880px; align-self: center; }
.worldmap img { display: block; width: 100%; height: auto; }
.worldmap .pin { position: absolute; color: var(--c-orange); }
/* white pill pins over the dotted-world svg (same look as company.css .ct2-pin);
   margin-top -7px because the ::after tail hangs 7px below `top` — the coord IS the tail tip */
.worldmap .map-pin {
  position: absolute; transform: translate(-50%, -100%); margin-top: -7px;
  background: #fff; border: 1px solid #1e729c; border-radius: var(--r-md);
  padding: 4px 8px; white-space: nowrap;
  font: 400 12px/1.2 var(--f-body); color: var(--c-ink);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,.2);
}
.worldmap .map-pin::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 6px solid transparent; border-top: 7px solid #1e729c; border-bottom: 0; }

/* Checklist (leadership outcomes) */
.checklist { display: flex; flex-direction: column; gap: 12px; }
.checklist__item { display: flex; align-items: center; gap: 8px; font-family: var(--f-body); font-size: 18px; color: var(--c-ink); }
.checklist__box { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r-sm); border: .8px solid var(--c-blue-tint); display: flex; align-items: center; justify-content: center; }
.checklist__box .icon { font-size: 16px; color: var(--c-blue); }
.checklist__box .checklist__ic { width: 16px; height: 16px; object-fit: contain; }

/* Capability list */
.cap-list { display: flex; flex-direction: column; gap: 16px; }
.cap-list__item { display: flex; align-items: center; gap: 12px; font-family: var(--f-body); font-size: 16px; color: var(--c-ink); }
.cap-list__item .icon { font-size: 22px; color: var(--c-grey-2); }
.cap-list__item--on .icon { color: var(--c-blue); }
.cap-list__ic {                       /* SVG icons keep their own baked-in colours */
  width: 22px; height: 22px;          /* icon glyph size */
  box-sizing: content-box;
  padding: 9px;                       /* -> 40x40 tile */
  flex-shrink: 0;
  background: #E9F3F9;     /* #E9F3F9 */
  border-radius: var(--r-md);         /* 8px */
}

/* Environmental tiles grid */
.env-grid { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; border-radius: var(--r-md); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--c-line); }
.env-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 28px 16px; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); font-family: var(--f-body); font-size: 15px; color: var(--c-ink); }
.env-tile .icon { font-size: 30px; color: var(--c-blue); }
.env-tile--note { color: var(--c-grey); font-size: 13px; }
@media (max-width: 900px) { .env-grid { grid-template-columns: repeat(2, 1fr); } }

/* Placeholder media block */
.placeholder {
  border-radius: 12px;
  background: repeating-linear-gradient(135deg, #f4f4f4, #f4f4f4 14px, #efefef 14px, #efefef 28px);
  border: 1px solid #e4e4e4;
  display: flex; align-items: center; justify-content: center;
}
.placeholder span { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; color: #9a9a9a; letter-spacing: .04em; }

/* Content slider (factors — dark framed dashboard) */
.slider {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: #0b2a3a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
}
.slider__shot {
  width: 100%;
  max-width: 760px;
  border-radius: 8px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6);
  object-fit: cover;
}
.slider__dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  margin-bottom: 15px;
}
.slider__dots span,
.slider__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.55); }
.slider__dots button { cursor: pointer; }
.slider__dots span.is-active,
.slider__dots button.is-active { background: var(--c-blue); }

/* Video carousel banner (click-to-play slides) */
.video-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* matches the 1920x1080 videos — no pillar-boxing */
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  background: #0b2a3a;
}
.video-carousel__track { display: flex; height: 100%; transition: transform .5s ease; }
.video-carousel__slide {
  position: relative; flex: 0 0 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.video-carousel__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-carousel__slide iframe,
.video-carousel__slide video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
/* while playing, show the whole frame instead of cropping */
.video-carousel__slide.is-playing video { object-fit: contain; background: #0b2a3a; }
.video-carousel__slide .video-thumb__play { position: relative; z-index: 2; }
.video-carousel__slide.is-playing .video-thumb__play { display: none; }

/* 9. PAGE SECTIONS ------------------------------------------------------ */

/* Hero */
.hero {
  position: relative;
  min-height: 800px;
  display: flex;
  align-items: center;
  padding: var(--nav-h) var(--pad-x) 0;
  justify-content: center;
  overflow: hidden;
  background: var(--grad-hero);
}
.hero--short { min-height: 560px; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; }
.hero__content { position: relative; z-index: 10; width: min(100%, var(--maxw)); max-width: 100%; display: flex; flex-direction: column; gap: 32px; }
.hero__content--wide { width: 820px; }
.hero .h1 { color: #fff; white-space: pre-line; }
.hero__kicker { font-family: var(--f-body); font-weight: 400; font-size: 20px; line-height: 1.5; color: var(--c-blue-light); margin: 0; }
/* bold white hero subtitle line under the h1 (Figma Text/Large/Bold, Ubuntu 700 20px) */
.hero__sub { font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.5; color: #fff; margin: 0; }
.hero__text { font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 1.5; color: #fff; margin: 0; max-width: 687px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-family: var(--f-body); font-size: 13px; color: rgba(255,255,255,.8); margin-bottom: 4px; }
.breadcrumb a { color: rgba(255,255,255,.8); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current] { color: var(--c-blue-light); }

/* Split media block (image + copy, dark overlay) */
.media-block {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  padding: 64px 80px;
  display: flex;
  gap: 60px;
  align-items: center;
  border: 1px solid rgba(6,3,9,.15);
  /* fallback background (pages that still pass --bg); the home page layers a real <img> + overlay below */
  background: var(--grad-dark), var(--bg, #0c477d) center/cover no-repeat;
  color: #fff;
}
/* Real image behind the block — object-position moves the framing */
.media-block__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
/* #053750 fill so the white text stays legible */
.media-block__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #053750 0%, rgba(5,55,80,.72) 45%, rgba(5,55,80,.62) 100%); }
/* keep the copy + video above the image + overlay */
.media-block__copy, .media-block .video-thumb { position: relative; z-index: 2; }
.media-block .h2 { color: #fff; font-size: 44px; }
.media-block .body { color: #fff; font-size: 20px; }
.media-block__copy { flex-grow: 1; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
/* stacked variant (Figma 12359:9731): centred heading on top, copy + large video below */
.media-block--stack { flex-direction: column; gap: 40px; padding: 65px 60px; }
.media-block--stack > .h2 { position: relative; z-index: 2; font-size: 32px; text-align: center; width: 100%; }
.media-block--stack .media-block__overlay { background: rgba(5,55,80,.6); }
.media-block__row { position: relative; z-index: 2; display: flex; gap: 48px; align-items: center; width: 100%; }
.media-block__row .media-block__copy { flex: 1 1 0; min-width: 0; gap: 40px; }
.video-thumb {
  position: relative; width: 480px; height: 271px; flex-shrink: 0;
  border-radius: var(--r-md); overflow: hidden; background: center/cover no-repeat;
  box-shadow: 0 1.7px 8.5px rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
}
.video-thumb__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-thumb.is-playing .video-thumb__play { opacity: 0; pointer-events: none; }
.video-thumb__play {
  position: relative; z-index: 2;
  width: 80px; height: 80px; border: 0; border-radius: 99px; background: var(--c-blue-light);
  box-shadow: 0 32px 64px -12px rgba(0,0,0,.14);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform .15s, filter .15s, opacity .25s;
}
.video-thumb__play:hover { transform: scale(1.06); }
.video-thumb__play .icon { font-size: 40px; color: #fff; }
.video-thumb__tri { display: block; width: 30px; height: 30px; margin-left: 4px; }   /* solid white play triangle, optically centred */
/* enlarged thumb for the stacked media block (defined after the base so it wins) */
.video-thumb--lg { width: 66%; max-width: 780px; height: auto; aspect-ratio: 16 / 9; }
/* asset-management video (Figma 12947:9575) — 580px wide (markup request Jul 2026), click-to-play embed */
.video-thumb--asset { width: 580px; max-width: 100%; height: auto; aspect-ratio: 16 / 9; }
.video-thumb__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 1100px) {
  .media-block__row { flex-wrap: wrap; }
  .video-thumb--lg { width: 100%; }
}

/* ---- custom video controls (injected by initCustomVideoControls) ------- */
/* shared bar: play/pause · time · seek · volume · fullscreen — brand palette */
.vctl {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: none; align-items: center; gap: 12px;
  padding: 26px 16px 10px;
  background: linear-gradient(rgba(7,52,89,0) 0%, rgba(7,52,89,.82) 100%);
  color: #fff; font-family: var(--f-ui); font-size: 13px; line-height: 1;
  transition: opacity .25s ease;
}
.video-thumb.is-playing .vctl,
.video-carousel__slide.is-playing .vctl { display: flex; }
.vctl--hide { opacity: 0; pointer-events: none; }
.vctl__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.vctl__btn:hover { background: rgba(255,255,255,.18); }
.vctl__btn svg { display: block; }
.vctl__time { white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .95; }
.vctl__track {
  position: relative; flex: 1; height: 22px;
  display: flex; align-items: center; cursor: pointer; touch-action: none;
}
.vctl__track::before {
  content: ""; position: absolute; left: 0; right: 0; height: 5px; border-radius: 999px;
  background: rgba(233,243,249,.35);   /* --c-blue-pale @ 35% */
}
.vctl__track:focus-visible { outline: 2px solid var(--c-blue-light); outline-offset: 4px; border-radius: 999px; }
.vctl__fill { position: absolute; left: 0; height: 5px; border-radius: 999px; background: var(--c-blue); pointer-events: none; }
.vctl__dot {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--c-blue);
  transform: translateX(-50%); pointer-events: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.vctl__vol { width: 68px; flex-shrink: 0; accent-color: var(--c-blue); cursor: pointer; }
/* fullscreen goes on the wrapper so the custom bar stays on top of the video */
.video-thumb:fullscreen, .video-carousel__slide:fullscreen { width: 100%; height: 100%; border-radius: 0; }
.video-thumb:fullscreen video, .video-carousel__slide:fullscreen video { object-fit: contain; background: #0b2a3a; }
@media (max-width: 640px) {
  .vctl { gap: 8px; padding: 20px 10px 8px; }
  .vctl__vol { display: none; }
}

/* Highlight bar (end-to-end accountability) */
.highlight {
  background: var(--c-blue-pale);
  border-left: 1px solid var(--c-blue);
  border-left-width: 2px;
  /* border-radius: var(--r-sm); */
  padding: 40px;
  display: flex;
  gap: 120px;
  align-items: center;
}
.highlight__title { font-family: var(--f-alt); font-weight: 500; font-size: 24px; color: var(--c-blue); }
.highlight--tech360 { gap: 40px; }

/* Vector Tag cradle 360 viewer (homepage highlight). The 258x345 panel is a
   cropped window onto the 640x840 frames shown at 60% (384x504) — the frames
   carry big transparent margins around the cradle, so the img is offset
   (inline left/top in the HTML) to show just the device. .d81-fit scales the
   card down further if the layout gets narrow (JS sets the height).
   flex-shrink:0 stops the highlight flex row from crushing it. */
.d81-fit  { position: relative; width: 258px; max-width: 100%; flex-shrink: 0; aspect-ratio: 258 / 345; }
.d81-card {
  position: absolute;
  top: 0; left: 0;
  transform-origin: top left;
  display: flex;
  width: 258px;
}
.d81-panel {
  position: relative;
  width: 258px; height: 345px;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none; -webkit-user-select: none;
}
.d81-img   { position: absolute; max-width: none; pointer-events: none; }

/* Custom Architecture — Best-in-Class Technology (Figma 13217:13156).
   Same markup as the "Technology Agnostic Eco-System" block on
   /technology/engineering-hardware; the rules are mirrored here because the
   home page only loads main.css. Keep the two copies in sync (technology.css §1–2).
   Logo boxes are 60px tall; each <img> carries its exact Figma dimensions
   inline because the source logos crop differently. */
.vt-tagline {
  margin: 0;
  font-family: var(--f-alt); font-weight: 700; font-size: 16px; line-height: 1.5;
  color: var(--c-blue);
}
.vt-agnostic {
  width: 540px; flex-shrink: 0;
  padding: 40px 0;
  display: flex; flex-wrap: wrap; gap: 40px 20px;
}
.vt-agnostic__item {
  width: 120px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--f-body); font-size: 14px; line-height: 1.2;
  color: var(--c-ink); text-align: center;
}
.vt-agnostic__ic {
  height: 60px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: .7; /* Figma: icon wrappers sit at 70% opacity for the grey look */
}
/* QR logo carries heavy padding — scale up and clip back to the 60px box */
.vt-agnostic__ic--clip { width: 60px; overflow: hidden; }
.vt-agnostic__ic img { display: block; object-fit: contain; }
.vt-agnostic__note {
  width: 100%; margin: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-body); font-size: 14px; line-height: 1.2;
  color: var(--c-ink); text-align: center;
}
.vt-agnostic__note .icon { font-size: 20px; color: var(--c-orange); }
@media (max-width: 1100px) {
  .vt-agnostic { width: 100%; justify-content: center; padding-top: 0; }
  .vt-agnostic__note { text-align: center; }
}

/* "End-to-End Expertise" bar — pale blue panel with a blue left rule.
   technology.css re-declares .approach-bar with its own gutter/rule colour and
   loads after main.css, so the /technology pages keep their existing look. */
.approach-bar {
  width: 100%;
  background: var(--c-blue-pale);
  border-left: 2px solid var(--c-blue);
  padding: 40px 40px 40px 42px;
  display: flex; align-items: center; gap: 40px;
}
.approach-bar__copy { flex: 1 1 0; min-width: 280px; display: flex; flex-direction: column; gap: 20px; }
.approach-bar__title {
  margin: 0;
  font-family: var(--f-alt); font-weight: 700; font-size: 20px; line-height: 1.4;
  letter-spacing: -.01em; color: var(--c-blue);
}
.approach-bar__text { margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); }
/* OEM systems ring diagram on the right of the bar (markup request Aug 2026,
   replaced the .d81-fit 360 product shot) */
/* home-only variant: wider inner margins around the copy (markup request Aug 2026) */
.approach-bar--oem { padding: 40px 80px 40px 120px; justify-content: space-between; }
.approach-bar--oem .approach-bar__copy { max-width: 560px; }
/* 25% smaller than the original 560px (markup request Aug 2026) */
.oem-ring { position: relative; flex: 0 0 auto; width: min(420px, 100%); align-self: center; }
.oem-ring svg { display: block; width: 100%; height: auto; }
.oem-ring svg.oem-ring__logo {   /* beats `.oem-ring svg` above */
  position: absolute; top: 50%; left: 50%;
  width: 4.5%; height: auto;                /* shrunk 30% from 6.4% (markup request Sep 2026) */
  transform: translate(-50%, calc(-100% - 4px));  /* sits just above the centre label */
}
/* "Intelligence Layer" label under the centre logo (markup request Aug 2026) */
.oem-ring__label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, 4px);
  font-family: var(--f-alt); font-weight: 400; font-size: 15px; line-height: 1.2;
  color: var(--c-blue);
  text-align: center;
}
.oem-ring circle { fill: var(--c-white); stroke: var(--c-blue-tint); stroke-width: 1.5; }
/* connector lines centre-hub → system circles (markup request Aug 2026) */
.oem-ring__spokes line { stroke: #4CC4FE; stroke-opacity: .6; stroke-width: 3; }  /* .9 − 35% */
.oem-ring text {
  /* viewBox units — the wheel renders at 420/800, so 28u ≈ 14.7px on screen
     (was 19u at 560/800 ≈ 13.3px): smaller ring, slightly larger labels */
  font-family: var(--f-alt); font-weight: 700; font-size: 28px;
  fill: var(--c-blue); text-anchor: middle;
}
/* slow spin (markup request Aug 2026); labels counter-rotate to stay upright.
   The WHOLE wheel svg rotates (never an inner group — Chromium mis-renders the
   clip-path patch under an animated ancestor group). */
.oem-ring__wheel {
  animation: oem-spin 60s linear infinite;
}
.oem-ring__wheel text {
  animation: oem-spin-reverse 60s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes oem-spin { to { transform: rotate(360deg); } }
@keyframes oem-spin-reverse { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .oem-ring__wheel, .oem-ring__wheel text { animation: none; }
}
@media (max-width: 960px) {
  .approach-bar { flex-wrap: wrap; gap: 24px; }
  .approach-bar .oem-ring { margin-inline: auto; }
}

/* Final CTA band */
.cta-band {
  position: relative;
  overflow: hidden;
  padding: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  border: 1px solid rgba(6,3,9,.15);
  /* fallback background (used by pages that still pass --bg); the home page layers a real <img> + overlay below */
  background: linear-gradient(180deg, #053750 0%, rgba(5,55,80,.72) 45%, rgba(5,55,80,.62) 100%), var(--bg) center/cover no-repeat;
}
/* Real image behind the CTA — object-position is the knob to move the framing (see below) */
.cta-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; z-index: 0; }
/* #053750 fill, strongest at the top, easing to a steady tint so white text stays legible */
.cta-band__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #053750 0%, rgba(5,55,80,.72) 45%, rgba(5,55,80,.62) 100%); }
/* keep the text/buttons above the image + overlay */
.cta-band > .stack, .cta-band > .row { position: relative; z-index: 2; }
.cta-band .h2 { color: #f2f2f2; font-family: var(--f-alt); font-weight: 700; font-size: 52px; text-align: center; white-space: pre-line; }
.cta-band p { max-width: 1200px; font-family: var(--f-body); font-weight: 400; font-size: 18px; text-align: center; line-height: 1.5; color: #f2f2f2; margin: 0; }

/* 10. RESPONSIVE -------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --pad-x: 40px; }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header { gap: 16px; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    background: #2d3357; padding: 24px 40px;
    border-bottom: 1px solid #4e5566;
  }
  .site-header--scrolled .nav.is-open,
  .site-header--solid .nav.is-open {
    background: #fff;
    border-bottom-color: var(--c-line);
  }
  .nav.is-open .nav__item { height: auto; width: 100%; flex-direction: column; align-items: stretch; }
  /* accordion: the section hubs are gone, so tapping a top-level button
     expands its options in place — the only route to detail pages on mobile */
  .megamenu { display: none; }
  .nav.is-open .nav__item.is-expanded .megamenu {
    display: block;
    position: static;
    opacity: 1; visibility: visible; transform: none;
    background: none; backdrop-filter: none; box-shadow: none;
    padding: 4px 0 8px 16px;
  }
  .nav.is-open .megamenu__inner,
  .nav.is-open .megamenu__inner--4 { display: flex; flex-direction: column; gap: 0; }
  /* the sheet stacks the options, so drop the desktop bleed margins entirely */
  .nav.is-open .megamenu__opt { padding: 10px 0 10px 12px; margin: 0; background: none; }
  .nav.is-open .megamenu__opt span { display: none; }  /* descriptions are noise on a narrow sheet */
  /* no hover on a touch sheet — the Atlas Core sub-links are always listed,
     indented under the solutions, as the only route to the /platform/ pages
     (undo the desktop slide-open collapse: full height, visible, no clip pads) */
  .nav.is-open .megamenu__sub {
    display: block; max-height: none;
    margin: 0; padding: 0; opacity: 1; overflow: visible; transition: none;
    background: none; border-radius: 0; border: 0;
  }
  .nav.is-open .megamenu__caret { display: none; }  /* sub is always open here */
  /* long selector out-specifies the desktop hover/focus tint rules */
  .nav.is-open .nav__item .megamenu .megamenu__opt--atlas { background: none; }
  .nav.is-open .megamenu__sub .megamenu__opt { padding-left: 28px; }
  .nav.is-open .megamenu__sub .megamenu__opt strong { font-size: 15px; opacity: .85; }
  /* the desktop options sit on a light panel; on mobile they sit on the nav
     sheet, so they take the sheet's foreground colour instead of --c-grey */
  .nav.is-open .megamenu__opt strong {
    font-family: var(--f-ui); font-weight: 500; font-size: 16px;
    letter-spacing: normal; color: #fff;
  }
  .site-header--scrolled .nav.is-open .megamenu__opt strong,
  .site-header--solid .nav.is-open .megamenu__opt strong { color: #4b5059; }
  .nav.is-open .nav__link { width: 100%; justify-content: space-between; padding: 8px 0; }
  .nav__caret { display: inline-flex; }
  .nav__item.is-expanded > .nav__link .nav__caret { transform: rotate(270deg); }
  .hero__content, .hero__content--wide { width: 100%; }
  .row { flex-wrap: wrap; }
  .footer__cols { flex-wrap: wrap; }
  .media-block, .highlight { flex-direction: column; gap: 40px; align-items: flex-start; }
  .video-thumb { width: 100%; }
  .lens { transform: scale(.8); transform-origin: top center; }
  .compare { flex-direction: column; align-items: flex-start; gap: 40px; }
  .compare__head { width: 100%; }
  .compare__cards { justify-content: flex-start; width: 100%; }
  .exec-row { flex-direction: column; align-items: flex-start; gap: 32px; }
  .exec-row img { width: 100%; height: auto; }
}
@media (max-width: 640px) {
  :root { --pad-x: 20px; }
  .h1, .hero .h1 { font-size: 40px; }
  .h2, .media-block .h2, .cta-band .h2 { font-size: 32px; }
  .compare__cards { flex-direction: column; align-items: stretch; gap: 16px; }
  .compare-card { width: 100%; }
  .compare-card--trad { margin-right: 0; }
  .nav-actions .btn span { display: none; }
  .info-card { padding: 24px; min-width: 100%; }
  .info-card__cols { flex-direction: column; gap: 0; }
}

/* ======================================================================
   Home redesign (Figma "Home UPdated" 12359:8279, Jul 2026)
   intelligence-engines diagram · asset chevron strip
   ====================================================================== */

/* ---- "Monitor. Compare. Predict. Optimise." circular diagram (12359:8324) */
.ie-diagram { position: relative; width: 420px; height: 420px; flex-shrink: 0; zoom: 1.2; } /* zoom scales the fixed-px svg + chip positions uniformly */
.ie-diagram__ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: visible; }
/* bright segment travelling around the circular ring */
.ie-glow-ring {
  fill: none;
  stroke: #4CC4FE;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 12 88;              /* one short bright arc, long gap */
  filter: drop-shadow(0 0 4px #4CC4FE);
  animation: ie-ring-travel 4.5s linear infinite;
}
@keyframes ie-ring-travel { to { stroke-dashoffset: -100; } }
/* pulse that lights each diagonal from its chip inward toward the centre */
.ie-ray {
  stroke: #7fdcff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 16 84;              /* single travelling dash per line */
  filter: drop-shadow(0 0 3px #4CC4FE);
  animation: ie-ray-in 2.8s ease-out infinite;
}
@keyframes ie-ray-in {
  0%   { stroke-dashoffset: 0;    opacity: 0; }   /* born at the chip */
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: 0; }   /* fades as it reaches the centre */
}
/* all eight rays pulse in unison (same phase) */
@media (prefers-reduced-motion: reduce) {
  .ie-glow-ring, .ie-ray { animation: none; }
  .ie-ray { opacity: 0; }
}
.ie-chip {
  position: absolute;
  /* 102px (up from 88px) so the longest label (Communication) clears the curve
     at the standard 12px size; negative margin keeps the original 88px-grid
     centres, so the chips stay on the ring without repositioning them all */
  width: 102px;
  height: 102px;
  margin: -7px 0 0 -7px;
  background: #fff;
  border: 2px solid var(--c-blue-tint);
  border-radius: 50%;
  box-shadow: 0 12px 16px -4px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.03);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.ie-chip span { font: 600 12px/1.2 var(--f-body); color: #4B5059; }.ie-core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 190px;
  height: 190px;
  background: #fff;
  border: 4px solid var(--c-blue-pale);
  border-radius: 50%;
  box-shadow: 0 4px 8px -2px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ie-core__name { font: 600 15px/1.2 var(--f-body); color: #4B5059; }  /* 18→15px: keeps "Understands Factors" inside the circle */
.ie-core__sub  { font: 400 12px/1.2 var(--f-body); color: var(--c-grey); }
/* revolving factor label under the core title — fast fade in/out, text swapped by JS */
.ie-core__cycle {
  min-height: 34px;               /* reserve two lines so the core doesn't jiggle */
  max-width: 150px;               /* long factors wrap inside the 190px circle */
  font: 600 14px/1.2 var(--f-body);
  color: var(--c-blue);
  opacity: 0;
  transition: opacity .18s ease;
}
.ie-core__cycle.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ie-core__cycle { transition: none; }
}
/* copy column: sizes per Figma (Text/Medium 18px), colours follow the site's body-text palette */
.ie-copy { font: 400 18px/1.2 var(--f-body); color: var(--c-ink); margin: 0; }
.ie-copy--lead { font-weight: 600; color: var(--c-ink); }
.ie-list { display: flex; flex-direction: column; gap: 4px; }
.ie-list__item { display: flex; align-items: center; gap: 4px; font: 400 18px/1.2 var(--f-body); color: var(--c-ink); }
.ie-list__item .icon { font-size: 16px; color: var(--c-blue); }
@media (max-width: 1100px) { .ie-diagram { margin-inline: auto; } }
@media (max-width: 600px) { .ie-diagram { zoom: 1; } } /* small screens: back to the 420px footprint */

/* ---- asset chevron strip ("Built to Manage Every Operational Asset") - */
.asset-strip__label { margin: 0; font: 600 18px/1.2 var(--f-body); color: #4B5059; }
.asset-strip { display: flex; opacity: .8; }
.asset-stage {
  flex: 1;
  min-width: 0;
  height: 120px;
  background: #fff;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  /* top-heavy padding so the icon sits clear of the chevron edge (Figma 12545:25076) */
  padding: 32px 28px 16px 32px;
  text-align: center;
}
.asset-stage + .asset-stage { margin-left: -16px; }
.asset-stage span { font: 600 16px/1.2 var(--f-body); color: #4B5059; }
/* on a white section the chevrons fill pale blue instead (Figma 10584:15443) */
.asset-strip--on-white .asset-stage { background: var(--c-blue-pale); }

/* ---- "Delivering Value" pale band (Figma 12781:9687) ------------------ */
/* header row: 500px title + copy column */
.dv-head { display: flex; gap: 80px; align-items: center; width: 100%; }
.dv-head .h2 { flex: 0 1 500px; text-align: left; }
.dv-head__copy { flex: 1 1 0; min-width: 300px; display: flex; flex-direction: column; gap: 8px; }
.dv-head__copy p { margin: 0; font: 400 18px/1.2 var(--f-body); color: var(--c-ink); }
/* 4-card outcome strip — borders, not grid gaps (1px gaps vanish under html{zoom:.8}) */
.dv-cards { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.dv-card { min-height: 240px; background: #fff; padding: 40px 24px; display: flex; flex-direction: column; gap: 16px; }
.dv-card + .dv-card { border-left: 1px solid var(--c-line); }
.dv-card img { width: 24px; height: 24px; }
.dv-card h3 { margin: 0 0 8px; font: 400 20px/1.4 var(--f-alt); letter-spacing: -.01em; color: #4b5059; }
.dv-card ul { margin: 0; padding: 0; list-style: none; }
.dv-card li { display: flex; align-items: center; gap: 4px; font: 400 16px/1.2 var(--f-body); color: var(--c-grey); }
.dv-card li .icon { font-size: 20px; color: var(--c-blue); }
@media (max-width: 1100px) {
  .dv-head { flex-wrap: wrap; gap: 24px; }
  .dv-cards { grid-template-columns: repeat(2, 1fr); }
  .dv-card { min-height: 0; }
  .dv-card + .dv-card { border-left: 0; }
  .dv-card:nth-child(even) { border-left: 1px solid var(--c-line); }
  .dv-card:nth-child(n+3) { border-top: 1px solid var(--c-line); }
}
@media (max-width: 640px) {
  .dv-cards { grid-template-columns: 1fr; }
  .dv-card:nth-child(even) { border-left: 0; }
  .dv-card + .dv-card { border-top: 1px solid var(--c-line); }
}

/* ===== FAQ accordion (home, Figma 13362:18058) — white rounded card on the pale band */
.faq { width: 100%; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.faq__item { background: var(--c-white); }
.faq__item + .faq__item { border-top: 1px solid var(--c-line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 24px; margin: 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--f-alt); font-weight: 400; font-size: 20px; line-height: 1.4;
  letter-spacing: -0.2px; color: #4b5059;
}
.faq__chev { flex-shrink: 0; color: var(--c-blue); transition: transform .3s ease; }
.faq__item.is-open .faq__chev { transform: rotate(180deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.faq__a-inner { display: grid; gap: 12px; padding: 0 24px 24px; }
.faq__a-inner p, .faq__a-inner li {
  font-family: var(--f-body); font-weight: 400; font-size: 16px; line-height: 1.6;
  color: var(--c-ink); margin: 0; text-align: left;
}
.faq__a-inner ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
@media (max-width: 640px) {
  .faq__q { font-size: 16px; padding: 20px 16px; gap: 16px; }
  .faq__a-inner { padding: 0 16px 20px; }
}

/* ===== LinkedIn feed + video strip (home).
   Left column is the Elfsight LinkedIn feed widget (sizes itself); the video
   takes whatever width is left, so narrowing the strip shrinks only the video. */
.li-embeds { display: flex; gap: 20px; align-items: flex-start; }
.li-feed { flex: 0 1 546px; min-width: 0; border-radius: var(--r-md); }
.li-embed { flex: 0 1 546px; min-width: 0; overflow: hidden; border-radius: var(--r-md); }
.yt-embed { flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: var(--r-md); }
.yt-embed iframe { display: block; border: 0; width: 100%; aspect-ratio: 16 / 9; background: var(--c-white); }
.li-embed iframe {
  display: block; border: 0; transform-origin: 0 0;
  background: var(--c-white);
}

/* right column: video on top, book-a-meeting card below (Figma 13374:24792) */
.li-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.li-col .yt-embed { flex: 0 0 auto; width: 100%; }
.li-col__group { display: flex; flex-direction: column; gap: 12px; }
.li-col__title {
  margin: 0; font-family: var(--f-alt); font-weight: 700;
  font-size: 18px; line-height: 1.2; color: #4b5059;
}
.li-book {
  background: var(--c-white); border-radius: var(--r-md); padding: 28px 32px;
  display: flex; flex-direction: column; gap: 24px;
}
.li-book__title {
  margin: 0; font-family: var(--f-alt); font-weight: 700;
  font-size: 18px; line-height: 1.2; color: #4b5059;
}
.li-book__form { display: flex; flex-direction: column; gap: 20px; }
.li-book__field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.li-book__field label { font-family: var(--f-alt); font-size: 16px; line-height: 1.2; color: var(--c-ink); }
.li-book__field input {
  width: 100%; height: 40px; padding: 9px 8px 9px 20px;
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md);
  font-family: var(--f-alt); font-size: 16px; color: var(--c-ink);
}
.li-book__field input:focus {
  outline: none; border-color: var(--c-blue);
  box-shadow: 0 0 0 1px var(--c-blue);
}
.li-book__foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
/* typeform-style stepper (markup request Sep 2026): main.js adds the --steps
   class and reveals one field at a time; no-JS renders all fields stacked */
.li-book__form--steps .li-book__field { display: none; }
.li-book__form--steps .li-book__field.is-active { display: flex; }
.li-book__progress { margin-right: auto; font-family: var(--f-alt); font-size: 14px; color: #7a8089; }
.li-book__back {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--f-alt); font-size: 16px; color: var(--c-blue);
}
.li-book__back:hover { text-decoration: underline; }