/* AnnexSys — design system
   Brand colors sampled directly from the logo (see project notes):
   red #D82820, gold #F8C800, navy #281870. Light mode only, per brief. */

/* Fonts (Space Grotesk, Inter) are SELF-HOSTED, not loaded from Google (security review 2026-09, WEB-33):
   loading them from Google's font servers sends every visitor's IP address and browser details to Google
   before the cookie banner has been answered. The files below are the exact woff2 files Google Fonts served
   for the same families (Inter v20, Space Grotesk), one variable-weight file per script subset, so nothing
   looks different; unicode-range keeps the browser from downloading a subset the page does not use. Both
   families are licensed under the SIL Open Font License 1.1 (OFL-Inter.txt and OFL-SpaceGrotesk.txt sit next
   to the files in assets/fonts/). Space Grotesk is declared for 500-700 only, as before: a 400 request on a
   display-font element has always been drawn with the 500 face. The ?v=1 on each url() lets .htaccess cache
   the file for a year (immutable); bump it if a font file is ever replaced. The stylesheet is still a normal
   <link> (never an @import), and the fonts are found relative to this file: ../fonts/. */

/* Space Grotesk vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-vietnamese.woff2?v=1') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Space Grotesk latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2?v=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-ext.woff2?v=1') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Inter cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-cyrillic.woff2?v=1') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-greek-ext.woff2?v=1') format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* Inter greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-greek.woff2?v=1') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Inter vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-vietnamese.woff2?v=1') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Inter latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2?v=1') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2?v=1') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --navy: #281870;
  --navy-700: #1e1257;
  --navy-900: #140b3a;
  --red: #d82820;
  --red-600: #c02019;
  --gold: #f8c800;
  --gold-600: #d9ae00;

  /* Neutrals — cool-tinted toward navy, not a flat gray */
  --bg: #ffffff;
  --bg-alt: #f6f5fb;
  --bg-navy: var(--navy);
  --surface: #ffffff;
  --border: #e6e4f0;
  --text: #201a3a;
  --text-muted: #5c5877;
  --text-on-navy: #f2f0fb;
  --text-on-navy-muted: #b8b3d9;

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 7rem;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(20, 11, 58, 0.06);
  --shadow-md: 0 8px 24px rgba(20, 11, 58, 0.08);
  --shadow-lg: 0 24px 60px rgba(20, 11, 58, 0.14);

  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto keeps the aspect ratio when an image has width/height attributes (or a
   percentage width) and max-width shrinks it: without it the height stays at the attribute
   value and the picture is stretched tall. Classes that set their own height still win. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  text-wrap: balance;
  color: var(--navy);
}
h1 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 var(--space-2); color: var(--text-muted); }
p:last-child { margin-bottom: 0; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section { padding: var(--space-6) 0; overflow-x: hidden; }
.section--alt { background: var(--bg-alt); }
.section--navy { background: var(--navy); color: var(--text-on-navy); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy p { color: var(--text-on-navy-muted); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-1);
}
.section--navy .eyebrow { color: var(--gold); }

.section-head { max-width: 640px; margin: 0 auto var(--space-5); text-align: center; }
.section-head.align-left { margin-left: 0; text-align: left; }

/* Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--red); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--red-600); box-shadow: var(--shadow-md); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-700); box-shadow: var(--shadow-md); }
.btn-outline { border-color: rgba(40, 24, 112, 0.25); color: var(--navy); }
.btn-outline:hover { border-color: var(--navy); background: rgba(40, 24, 112, 0.05); }
.section--navy .btn-outline, .hero .btn-outline { border-color: rgba(255,255,255,0.35); color: #fff; }
.section--navy .btn-outline:hover, .hero .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.85rem; }

/* Header / nav ---------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand img { height: 44px; width: auto; }
.nav-desktop { display: none; }
.nav-desktop ul { display: flex; align-items: center; gap: var(--space-4); }
.nav-desktop a {
  font-weight: 600; font-size: 0.95rem; color: var(--navy); position: relative; padding: 0.4rem 0;
  border-bottom: 2px solid transparent; /* reserved even when inactive, so .active doesn't shift layout */
}
.nav-desktop a:hover { color: var(--red); }
/* Current section — a persistent underline (not just the hover color
   change above) in the logo's amber/gold, so it stays visible without
   the visitor having to hover. */
.nav-desktop a.active { color: var(--navy); border-bottom-color: var(--gold); }

/* Trust Center — the live product, not another marketing page, pulled out
   as a solid gold pill button rather than a plain nav link. */
.nav-desktop a.nav-highlight {
  color: var(--navy); background: var(--gold); border-bottom-color: transparent;
  padding: 0.5rem 1.1rem; border-radius: 999px; font-weight: 700;
}
.nav-desktop a.nav-highlight:hover { background: var(--gold-600); color: var(--navy); }

.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-toggle { display: inline-flex; background: none; border: none; padding: 0.4rem; }
.nav-toggle svg { width: 26px; height: 26px; color: var(--navy); }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: var(--space-2);
  /* min(), not a separate max-width — a min-width always beats a max-width,
     so the clamp has to live here or a 620px menu still overflows a ~1000px window. */
  min-width: min(620px, calc(100vw - 2rem)); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity 0.15s ease, translate 0.15s ease;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; translate: 0 0; }
.dropdown-col h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--red); margin-bottom: 0.6rem; }
.dropdown-col a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.88rem; font-weight: 500; color: var(--text); }
.dropdown-col a:hover { color: var(--red); }
.dropdown-col-arrow { width: 14px; height: 14px; flex-shrink: 0; color: var(--gold); opacity: 0; translate: -4px 0; transition: opacity 0.15s ease, translate 0.15s ease; }
.dropdown-col a:hover .dropdown-col-arrow { opacity: 1; translate: 0 0; }

/* Insights and Company dropdowns: same icon-tile rows as the Services and
   Products menus (an icon tile, the label, a chevron on hover). */
.dropdown.dropdown-icons { min-width: 260px; grid-template-columns: 1fr; padding: 0.5rem; }
.dropdown-icons .dropdown-col { display: flex; flex-direction: column; gap: 0.2rem; }
.dropdown-icons .dropdown-col a.dropdown-icon-link {
  justify-content: flex-start; gap: 0.75rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-sm);
  font-size: 0.95rem; font-weight: 600; color: var(--navy);
}
.dropdown-icons .dropdown-icon-label { flex: 1; min-width: 0; }
.dropdown-icons .dropdown-col a.dropdown-icon-link:hover { background: color-mix(in srgb, var(--navy) 6%, white); color: var(--red); }
.dropdown-icons .dropdown-icon-link:hover .dropdown-col-arrow { opacity: 1; translate: 0 0; }

/* Services dropdown — a two-panel switcher (category names on the left,
   that category's services on the right) rather than every category's
   full list shown at once, so the panel stays a manageable height no
   matter how many services a category ends up with. */
.dropdown.dropdown-split {
  display: flex; grid-template-columns: none; padding: 0; width: 700px; max-width: calc(100vw - 2rem); overflow: hidden;
  left: 0; transform: none; translate: 0 8px;
}
/* Services has up to 11 items per category — the wider panel is split into
   2 columns (each ~1.5x a 3-column cell), so titles and descriptions wrap
   less while the dropdown stays the same overall width on screen. Products
   (5 solutions) is a single column instead, slightly wider than the 700px
   base so each solution's title and description sit on one line apiece.

   These widths are CEILINGS, not free choices. Each panel is anchored at its
   own nav link (left: 0 below) and so can only be as wide as the gap from
   that link to the right edge of the container — about 825px for Services
   and 730px for Products. That gap is set by the nav + header buttons, so
   it's the same at every window size. Go wider and the panel overflows the
   page: because a closed dropdown is `visibility: hidden` (which still takes
   up layout, unlike display: none) it widened the document and put a
   horizontal scrollbar on every page of the site. */
.dropdown.dropdown-split.dropdown-split--wide { width: 810px; }
.dropdown.dropdown-split.dropdown-split--products { width: 715px; }
.has-dropdown:hover .dropdown.dropdown-split, .has-dropdown:focus-within .dropdown.dropdown-split { translate: 0 0; }
.dropdown-split-left {
  flex: 0 0 260px; background: var(--bg-alt); padding: var(--space-2);
  display: flex; flex-direction: column; gap: 0.15rem; border-right: 1px solid var(--border);
}
.dropdown-split-item {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 700; color: var(--navy);
}
/* Re-asserts the padding above inside the header: `.nav-desktop a { padding: 0.4rem 0 }`
   is more specific than a bare class and otherwise zeroes the side padding, leaving the
   icon tile and chevron flush against the hover/active card's edges. */
.nav-desktop .dropdown-split-item { padding: 0.55rem 0.7rem; }
.dropdown-split-item:hover, .dropdown-split-item.is-active { background: #fff; box-shadow: var(--shadow-sm); }
.dropdown-split-item:hover .dropdown-split-item-title, .dropdown-split-item.is-active .dropdown-split-item-title,
.dropdown-split-item:hover .dropdown-split-panel-title, .dropdown-split-panel-item:hover .dropdown-split-panel-title { color: var(--red); }
.dropdown-split-arrow { width: 15px; height: 15px; flex-shrink: 0; color: var(--gold); opacity: 0; translate: -4px 0; transition: opacity 0.15s ease, translate 0.15s ease; margin-left: auto; }
.dropdown-split-item:hover .dropdown-split-arrow, .dropdown-split-item.is-active .dropdown-split-arrow { opacity: 1; translate: 0 0; }
/* .nav-desktop prefix is load-bearing: the header's own `.nav-desktop a { padding: 0.4rem 0 }`
   is more specific than a bare class and would otherwise zero this item's side padding,
   pushing its content flush against the white card's edge. */
.nav-desktop .dropdown-split-item--product { align-items: flex-start; padding: 0.8rem 0.9rem; }
/* Full AnnexIQ wordmark (margin-trimmed PNG) on its own line above the
   product name — no tinted tile behind it, and the item's own padding
   keeps it clear of the card edge. */
/* align-self: flex-start is load-bearing — .dropdown-split-item-text is a
   flex column, whose default stretch would widen the image to the full
   column width (distorting it and pushing it into the chevron). */
.dropdown-product-logo { display: block; align-self: flex-start; height: 22px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 0.2rem; }
.dropdown-split-item--product .dropdown-split-arrow { margin-top: 0.15rem; }
.dropdown-split-item-text { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 0.3rem; }
.dropdown-split-item-title { color: var(--navy); }
.dropdown-split-item-desc { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); line-height: 1.35; }
.dropdown-split-right { flex: 1; min-width: 0; padding: var(--space-3); }
.dropdown-split-panel { display: none; grid-template-columns: repeat(2, 1fr); gap: 0.3rem 1.5rem; }
.dropdown-split-panel.is-active { display: grid; align-content: start; }
.dropdown-split-panel--services { grid-template-columns: repeat(2, 1fr); gap: 0.3rem 1.5rem; }
.dropdown-split-panel.dropdown-split-panel--products.is-active { grid-template-columns: 1fr; gap: 0.35rem; }
.dropdown-split-panel a.dropdown-split-panel-item { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.5rem 0.4rem; border-radius: var(--radius-sm); }
.dropdown-split-panel a.dropdown-split-panel-item:hover { background: var(--bg-alt); }
.dropdown-split-panel-text { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.dropdown-split-panel-title { font-size: 0.92rem; font-weight: 700; color: var(--navy); }
.dropdown-split-panel-desc { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); line-height: 1.35; }
.dropdown-icon-tile {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
  background: color-mix(in srgb, var(--navy) 8%, white);
  display: flex; align-items: center; justify-content: center;
}
.dropdown-icon-tile svg { width: 20px; height: 20px; color: var(--navy); }
.dropdown-icon-tile img { width: 24px; height: 24px; object-fit: contain; }

/* The mobile menu (.mobile-nav, its rows, scrim and scroll lock) is styled in the
   "mobile-compat 2026-09" block at the end of this file. */
.mobile-nav { display: none; }

@media (min-width: 960px) {
  .nav-desktop { display: block; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* Hero -------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  padding: var(--space-7) 0 var(--space-6);
}
.hero::before {
  /* Faint oversized X-mark watermark, echoing the logo's geometry without a colored stripe */
  content: '';
  position: absolute; right: -8%; top: -18%;
  width: 62%; aspect-ratio: 1.17;
  background: url('../img/logo/x-mark.png') center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); position: relative; z-index: 1; }
.hero h1 { color: #fff; }
.hero .lede { font-size: 1.15rem; color: var(--text-on-navy-muted); max-width: 46ch; }
.hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.hero-stat .num { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; color: var(--navy); }
.hero-stat .label { font-size: 0.85rem; color: var(--text-muted); }

/* Icon tile ------------------------------------------------------------ */
.icon-tile {
  width: 52px; height: 52px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(216, 40, 32, 0.1); color: var(--red);
  flex-shrink: 0;
}
.icon-tile svg { width: 26px; height: 26px; }
.icon-tile.gold { background: rgba(248, 200, 0, 0.16); color: var(--gold-600); }
.icon-tile.navy { background: rgba(40, 24, 112, 0.08); color: var(--navy); }
.section--navy .icon-tile { background: rgba(255,255,255,0.12); color: var(--gold); }

/* Cards ------------------------------------------------------------- */
.card-grid { display: grid; gap: var(--space-3); }
/* minmax(0, 1fr), not 1fr: a bare 1fr track can never be narrower than its widest
   unbreakable content (a long word, a select, a code line), which is how a single-column
   layout ends up wider than a phone screen. */
.grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 640px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-3); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  display: flex; flex-direction: column;
}
.card > .chip:last-child { margin-top: auto; align-self: flex-start; }
.card-link { display: block; height: 100%; }
a.card:hover, .card-link:hover .card { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(40,24,112,0.15); }
.card h3, .card h4 { margin-bottom: 0.4rem; }
.card p { font-size: 0.92rem; margin-bottom: 0; }
.card .icon-tile { margin-bottom: var(--space-2); }

/* Icon above the title, everything centred. The direction came from .card (column) and the text
   alignment from the browser default (left), so a title that fitted on one line looked centred
   while one that wrapped, or one with a tagline under it, looked left-aligned. Rows that want the
   icon beside the text (.contact-card, focus areas) and the search hits set that themselves. */
.card-compact { padding: var(--space-2); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
.card-link > .card-compact { height: 100%; }
.card-compact h4 { margin: 0; font-size: 0.98rem; }

/* Card with a top image (Industries grid) -------------------------------- */
.card-media { padding: 0; }
.card-media .card-media-img { position: relative; aspect-ratio: 16/10; background: var(--bg-alt); }
.card-media .card-media-img-inner { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.card-media .card-media-img-inner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.card-link:hover .card-media .card-media-img-inner img { transform: scale(1.06); }
.card-media .card-media-icon {
  position: absolute; left: var(--space-2); bottom: -18px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; color: var(--navy); flex-shrink: 0;
}
.card-media .card-media-icon svg { width: 20px; height: 20px; }
.card-media .card-body { padding: calc(var(--space-3) + 16px) var(--space-3) var(--space-3); }

/* Pillar / category block ------------------------------------------- */
.pillar {
  background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border);
  padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.pillar-head { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
.pillar-tagline { font-size: 0.82rem; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: 0.06em; }
.pillar-list { display: grid; grid-template-columns: repeat(1, 1fr); gap: 0.5rem; }
@media (min-width: 560px) { .pillar-list { grid-template-columns: repeat(2, 1fr); } }
.pillar-list a {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500;
  background: var(--bg-alt);
}
.pillar-list a:hover { background: rgba(216,40,32,0.08); color: var(--red); }
.pillar-list a::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--gold); flex-shrink: 0; }

/* Value grid (Careers page) — icon-in-circle + label, reusing .icon-tile
   at its normal 52px size rather than an oversized raw SVG. --------------- */
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 700px) { .value-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) { .value-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.value-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem; }
.value-item .icon-tile { margin: 0; }
.value-item span { font-size: 0.88rem; font-weight: 600; color: var(--navy); }

/* Stat strip ---------------------------------------------------------- */
.stat-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); text-align: center; }
@media (min-width: 760px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-strip .num { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; color: var(--navy); }
.stat-strip .label { font-size: 0.85rem; color: var(--text-muted); }

/* Ticker — a horizontally scrolling strip with prev/next arrows, used for
   any admin-managed list (stats, badges, benefits) that can grow past a
   fixed grid's column count. Item width is set per section below so it
   still reads as an evenly spaced row when there's little content; once
   the row actually overflows its container, main.js reveals the arrows
   and the row becomes swipeable/scrollable — no separate "grid mode" vs
   "ticker mode" markup, the same track just does both. ------------------ */
.ticker-wrap { position: relative; }
.ticker-track {
  display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
}
.ticker-track::-webkit-scrollbar { display: none; }
.ticker-track > * {
  flex: 1 0 calc(50% - var(--space-3) / 2); min-width: 160px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.4rem;
  height: 148px; padding: var(--space-2); box-sizing: border-box;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
/* .ticker-track doubles up with .stat-strip / .value-grid on the same
   element so their descendant text styles (.num, .label, .value-item span)
   still apply — this two-class override just wins the display-mode fight
   deterministically instead of depending on stylesheet order. */
.ticker-track.stat-strip, .ticker-track.value-grid { display: flex; grid-template-columns: none; }
@media (min-width: 760px) { .ticker-track.cols-3 > * { flex-basis: calc((100% - 2 * var(--space-3)) / 3); } }
@media (min-width: 760px) { .ticker-track.cols-4 > * { flex-basis: calc((100% - 3 * var(--space-3)) / 4); } }
.ticker-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border);
  background: #fff; box-shadow: var(--shadow-md); color: var(--navy); cursor: pointer;
}
.ticker-arrow:hover { background: var(--bg-alt); }
.ticker-arrow svg { width: 18px; height: 18px; }
.ticker-arrow.prev { left: -19px; }
.ticker-arrow.next { right: -19px; }
.ticker-arrow[hidden] { display: none; }
.ticker-wrap.has-ticker { padding-inline: var(--space-3); }
/* .value-grid/.stat-strip switch to their tightest column count at
   min-width:700/760px (above) — at that point a card's own text can end
   flush against the wrap's edge, leaving only ~5px before the 38px-wide
   arrow (positioned at right:-19px, i.e. 19px inside the wrap boundary)
   starts overlapping it. Bump clearance right when that happens, not just
   at 960px, so e.g. "Diversity & Belonging" on the Careers value grid
   doesn't sit under the next-arrow at tablet width. */
@media (min-width: 700px) { .ticker-wrap.has-ticker { padding-inline: calc(var(--space-3) + 20px); } }
@media (min-width: 960px) { .ticker-wrap.has-ticker { padding-inline: var(--space-4); } }

/* Process / steps (infographic-style) ---------------------------------- */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 3.5rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700;
}

/* Same steps content, stacked vertically with an icon per row instead of
   the 3-across numbered grid above — for when "Why one platform" sits in a
   narrower column (e.g. one side of a .split) rather than full width. */
.icon-row-list { display: flex; flex-direction: column; gap: var(--space-3); }
.icon-row { display: flex; gap: var(--space-2); align-items: flex-start; }
.icon-row h4 { margin-bottom: 0.3rem; }
.icon-row p { margin-bottom: 0; }

/* Small inline icon before a line of text (e.g. a location pin next to a
   job listing's city) — Icons::svg()'s second argument is a CSS class, not
   a style string, so this has to be a real class rather than an inline
   width/height. */
.icon-inline { width: 14px; height: 14px; display: inline; vertical-align: -2px; flex-shrink: 0; }

/* Badges / chips ------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap;
  padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600;
  background: rgba(40, 24, 112, 0.07); color: var(--navy);
}
.chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Media frame (screenshots) --------------------------------------------- */
.media-frame {
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); background: var(--bg-alt);
}
.media-frame img { width: 100%; }

/* Solution-page product screenshots only (not Industries/Services images,
   which also use .media-frame) — a deterrent against casual right-click
   "Save image as" / drag-to-desktop, not a hard technical guarantee (view
   source, devtools, or a screenshot of the screen still work regardless).
   pointer-events:none routes the right-click/drag to the .media-frame div
   behind the image instead of the <img> itself, so the browser's native
   image context menu never appears — oncontextmenu/draggable on the
   element are the fallback for browsers that still resolve the event to
   the image despite pointer-events. */
.protected-shot { pointer-events: none; -webkit-user-drag: none; user-drag: none; user-select: none; }

/* Two-column layout ----------------------------------------------------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.reverse > :first-child { order: 2; } }

/* CTA band ------------------------------------------------------------- */
.cta-band {
  background: var(--navy); color: #fff; border-radius: var(--radius);
  padding: var(--space-5); text-align: center; position: relative; overflow: hidden;
}
.cta-band::after {
  content: ''; position: absolute; left: -10%; bottom: -30%; width: 45%; aspect-ratio: 1.17;
  background: url('../img/logo/x-mark.png') center / contain no-repeat; opacity: 0.08;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--text-on-navy-muted); max-width: 52ch; margin-inline: auto; }
.cta-band .hero-actions { justify-content: center; }
.cta-band .btn-outline { border-color: rgba(255,255,255,0.35); color: #fff; }
.cta-band .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* Forms ------------------------------------------------------------- */
.field { margin-bottom: var(--space-2); }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--navy); margin-bottom: 0.35rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 0.75rem 0.9rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); font: inherit; color: var(--text); background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--navy); }
.field textarea { resize: vertical; min-height: 120px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }

.alert { padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); font-size: 0.92rem; margin-bottom: var(--space-3); }
.alert-success { background: rgba(34,150,90,0.1); color: #1a6b42; border: 1px solid rgba(34,150,90,0.25); }
.alert-error { background: rgba(216,40,32,0.08); color: var(--red-600); border: 1px solid rgba(216,40,32,0.25); }

/* Contact form — "interested in" Services/Solutions picker. Pure CSS, no
   JS: the real checkbox is visually hidden but stays in the tab order and
   keyboard-toggleable; its :checked state drives both the custom box
   (via the sibling label) and the picker panel (via the sibling div)
   through the general sibling combinator — so this works even if main.js
   never loads. --------------------------------------------------------- */
.interest-block { position: relative; margin-bottom: var(--space-2); }
.interest-block:last-child { margin-bottom: 0; }
/* `.interest-block >` matters: inside .field the more specific `.field input` (width:100%,
   padding, border) used to beat this rule, so the "hidden" checkbox was as wide as the
   viewport and pushed the page's scroll width out to 2208px on a 1440px desktop (and
   48px wider than the screen in a narrow window). */
.interest-block > .interest-toggle-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.interest-toggle-label {
  display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
  font-weight: 600; font-size: 0.92rem; color: var(--navy); padding: 0.3rem 0;
}
.interest-toggle-box {
  width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: #fff; transition: background 0.15s ease, border-color 0.15s ease;
}
.interest-toggle-box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transition: opacity 0.1s ease; }
.interest-toggle-input:checked + .interest-toggle-label .interest-toggle-box { background: var(--red); border-color: var(--red); }
.interest-toggle-input:checked + .interest-toggle-label .interest-toggle-box svg { opacity: 1; }
.interest-toggle-input:focus-visible + .interest-toggle-label .interest-toggle-box { outline: 2px solid var(--navy); outline-offset: 2px; }

.interest-panel {
  display: none; margin: 0.5rem 0 0 1.75rem; padding: 0.7rem 0.9rem;
  max-height: 200px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-alt);
}
.interest-toggle-input:checked ~ .interest-panel { display: block; }
.interest-panel-static { display: block; margin-left: 0; max-height: 240px; }
.interest-panel-group {
  display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin: 0.6rem 0 0.3rem;
}
.interest-panel-group:first-child { margin-top: 0; }
.interest-option {
  display: flex; align-items: center; gap: 0.5rem; font-weight: 400;
  font-size: 0.86rem; color: var(--text); padding: 0.2rem 0; cursor: pointer;
}
.interest-option input { width: auto; accent-color: var(--red); }

/* Footer ------------------------------------------------------------ */
.site-footer { background: var(--navy-900); color: var(--text-on-navy-muted); padding: var(--space-6) 0 var(--space-3); }
.footer-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-5); }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.site-footer h4 { color: #fff; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-2); }
.site-footer a { display: block; padding: 0.25rem 0; font-size: 0.9rem; }
.site-footer a:hover { color: var(--gold); }
/* The full logo lockup is a flattened JPG with an opaque white background,
   so it can't be recolored via CSS filter for a dark footer (brightness(0)
   + invert(1) just turns the whole rectangle white — no transparency to
   preserve). x-mark.png is a real transparent PNG, so it's used alone here
   with a plain CSS wordmark next to it instead. */
.footer-brand-mark { display: flex; align-items: center; gap: 0.55rem; margin-bottom: var(--space-2); }
.footer-brand-mark img { height: 28px; width: auto; }
.footer-brand-mark span { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: #fff; letter-spacing: 0.01em; }
.footer-social { display: flex; gap: 0.6rem; margin-top: var(--space-2); }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; font-size: 0.82rem; }

/* Breadcrumb ----------------------------------------------------------- */
.breadcrumb { font-size: 0.85rem; color: var(--text-on-navy-muted); margin-bottom: var(--space-2); }
.breadcrumb a:hover { color: var(--gold); }

/* Scroll reveal — content is visible by default (real progressive
   enhancement: a broken/blocked/slow script must never hide real content).
   main.js is the only thing that adds .js-reveal to <html>, so the hide-
   then-reveal treatment only ever applies once JS has actually confirmed
   it's running and about to manage the reveal itself. */
.js-reveal [data-reveal] { opacity: 0; translate: 0 16px; transition: opacity 0.5s ease, translate 0.5s ease; }
.js-reveal [data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* Utilities -------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Bullet marker colors (Industries — Challenges / How AnnexSys can help)
   — only the marker glyph, not the list text color. Red for the "How
   AnnexSys can help" list specifically, since its card background is
   already a light gold wash and gold-on-gold bullets barely show up. */
.list-gold li::marker { color: var(--gold); }
.list-red li::marker { color: var(--red); }

/* WhatsApp floating button — WhatsApp's own brand green rather than the
   site palette on purpose, so it reads instantly as the WhatsApp action
   it is, same convention every site using it follows. */
.whatsapp-float {
  position: fixed; right: var(--space-3); bottom: var(--space-3); z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 12px 28px rgba(0,0,0,0.22); }
.whatsapp-float svg { width: 28px; height: 28px; }

/* Watch Intro popup — a single modal reused for the whole site, its video
   src set only while open (see main.js) so the file never loads until a
   visitor actually asks for it. ------------------------------------------ */
body.modal-open { overflow: hidden; }
.intro-modal {
  display: none; position: fixed; inset: 0; z-index: 100;
  align-items: center; justify-content: center; padding: var(--space-3);
  background: rgba(20, 11, 58, 0.72);
}
.intro-modal.is-open { display: flex; }
.intro-modal-dialog { position: relative; width: 100%; max-width: 960px; }
.intro-modal-dialog video { width: 100%; max-height: 80vh; border-radius: var(--radius); display: block; background: #000; }
.intro-modal-close {
  position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.3); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.intro-modal-close:hover { background: rgba(255,255,255,0.22); }
.intro-modal-close svg { width: 18px; height: 18px; }

/* Search — a top-aligned overlay bar (not a centered dialog, to feel like a
   command palette / omnibox rather than a popup you have to "close" a
   content card to reach) that hands off to a real results page on submit. */
.search-trigger { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--navy); padding: 0.5rem; cursor: pointer; }
.search-trigger:hover { color: var(--red); }
.search-trigger svg { width: 20px; height: 20px; }
.search-modal {
  display: none; position: fixed; inset: 0; z-index: 100; background: rgba(20, 11, 58, 0.5);
  align-items: flex-start; justify-content: center; padding: 12vh var(--space-3) var(--space-3);
}
.search-modal.is-open { display: flex; }
.search-modal-dialog {
  width: 90%; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-2) var(--space-3);
}
@media (min-width: 700px) { .search-modal-dialog { width: 50%; min-width: 420px; } }
.search-modal-form { display: flex; align-items: center; gap: 0.75rem; }
.search-modal-form > svg { width: 22px; height: 22px; color: var(--text-muted); flex-shrink: 0; }
.search-modal-form input { flex: 1; border: none; font-size: 1.3rem; font-family: var(--font-display); outline: none; padding: 0.5rem 0; color: var(--navy); }
.search-modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; flex-shrink: 0; display: flex; }
.search-modal-close:hover { color: var(--red); }
.search-modal-close svg { width: 20px; height: 20px; }

/* Request a Demo — a full-bleed two-panel layout (dark copy panel, white
   form panel) rather than the usual centered .container page, so it reads
   as its own distinct landing page rather than another content section. */
.demo-split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .demo-split { grid-template-columns: 1fr 1fr; min-height: calc(100vh - 79px); } }
.demo-close {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff;
  box-shadow: var(--shadow-md);
}
.demo-close:hover { background: var(--red-600); }
.demo-close svg { width: 17px; height: 17px; }
.demo-split-left { background: var(--navy); color: var(--text-on-navy); display: flex; align-items: center; padding: var(--space-6) var(--space-3); }
.demo-split-left-inner { max-width: 460px; margin-left: auto; }
.demo-split-left-inner .eyebrow { color: var(--red); }
.demo-split-left-inner h1 { color: #fff; margin-bottom: var(--space-2); }
.demo-split-left-inner p { color: var(--text-on-navy-muted); }
.demo-split-right { background: #fff; display: flex; align-items: center; padding: var(--space-6) var(--space-3); }
.demo-split-right-inner { max-width: 460px; width: 100%; margin-right: auto; }

/* The video state drops the two-panel form layout entirely: the sell copy
   on the left has done its job once someone has actually converted, and a
   video squeezed into half a screen (sharing space with a now-redundant
   panel) is the wrong shape for the thing the visitor is actually here to
   watch. .demo-split--video makes the whole section one full-width stage. */
.demo-split.demo-split--video { grid-template-columns: minmax(0, 1fr); }
.demo-split--video .demo-split-left { display: none; }
.demo-split--video .demo-split-right { padding: var(--space-5) var(--space-3); justify-content: center; }
.demo-split--video .demo-split-right-inner { max-width: 1160px; margin-inline: auto; }

.demo-video-wrap { width: 100%; }
.demo-video-wrap video {
  width: 100%; display: block; border-radius: var(--radius); box-shadow: var(--shadow-lg); background: #000;
  aspect-ratio: 16 / 9;
}
.demo-video-fallback { margin-top: var(--space-3); text-align: center; }

/* Careers — department filter + open-role list (main.js toggles each
   row's visibility on checkbox change; no filters checked = show all). */
.careers-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 860px) { .careers-layout { grid-template-columns: 360px 1fr; align-items: start; } }

.dept-filter {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius);
}
/* Sticky only when it is a sidebar. In the single-column mobile layout a sticky
   filter card stays pinned and slides over the list below it once scrolled. */
@media (min-width: 860px) { .dept-filter { position: sticky; top: calc(78px + var(--space-2)); } }
.dept-filter h4 { margin-bottom: -0.4rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.dept-filter label { display: flex; align-items: center; gap: 0.85rem; font-size: 0.96rem; font-weight: 500; color: var(--navy); cursor: pointer; }
.dept-filter label span:not(.count) { white-space: nowrap; }
.dept-filter input[type="checkbox"] {
  width: 19px; height: 19px; margin: 0; flex-shrink: 0;
  accent-color: var(--red); cursor: pointer;
}
.dept-filter .count {
  margin-left: auto; min-width: 1.6em; flex-shrink: 0; text-align: center;
  padding: 0.1rem 0.5rem; border-radius: 999px;
  background: var(--bg-alt); color: var(--text-muted); font-size: 0.8rem; font-weight: 600;
}

/* Open-role list — horizontal rows rather than cards, each a full-width
   link with title/tags on the left and a "view role" arrow on the right. */
.role-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.role-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}
.role-row:hover { background: var(--bg-alt); }
.role-row-main h3 { font-size: 1.08rem; margin-bottom: 0.4rem; }
.role-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.role-row-location { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); }
.role-row-arrow { flex-shrink: 0; width: 18px; height: 18px; color: var(--text-muted); transition: transform 0.15s ease, color 0.15s ease; }
.role-row-arrow svg { width: 100%; height: 100%; }
.role-row:hover .role-row-arrow { color: var(--red); transform: translateX(4px); }

/* Search results — same left-filter-card language as the Careers department
   filter, but a single-select (radio) "type" facet with an "All" option. */
.search-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 860px) { .search-layout { grid-template-columns: 280px 1fr; align-items: start; } }

.result-filter {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius);
}
/* Sticky only as a desktop sidebar (see .dept-filter): pinned in a single column it overlaps the results. */
@media (min-width: 860px) { .result-filter { position: sticky; top: calc(78px + var(--space-2)); } }
.result-filter h4 { margin-bottom: -0.4rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.result-filter label { display: flex; align-items: center; gap: 0.85rem; font-size: 0.96rem; font-weight: 500; color: var(--navy); cursor: pointer; }
.result-filter label span:not(.count) { white-space: nowrap; }
.result-filter input[type="radio"] {
  width: 19px; height: 19px; margin: 0; flex-shrink: 0;
  accent-color: var(--red); cursor: pointer;
}
.result-filter .count {
  margin-left: auto; min-width: 1.6em; flex-shrink: 0; text-align: center;
  padding: 0.1rem 0.5rem; border-radius: 999px;
  background: var(--bg-alt); color: var(--text-muted); font-size: 0.8rem; font-weight: 600;
}

/* AnnexIQ product theme ------------------------------------------------
   Products -> AnnexIQ Platform (/solutions) and every solution page under
   it (/solutions/:slug) set body.theme-annexiq (public/index.php). These
   pages take the AnnexIQ logo's own palette: red and yellow lead, and the
   logo's blue ring is the only indigo/blue on the page. The shared
   AnnexSys header and footer sit outside <main> and keep the site's
   normal colours. */
.theme-annexiq main {
  color: var(--text);         /* re-resolve inherited text colour against the warm --text below, not body's indigo-tinted one */
  --navy: #2a2320;            /* headings/strong text: warm charcoal, not indigo */
  --navy-700: #1a1614;
  --text: #2a2320;
  --text-muted: #6b605a;
  --bg-alt: #ffffff;          /* plain white alternate sections — no tint */
  --border: #e8e8e8;
  --text-on-navy: #ffffff;
  --text-on-navy-muted: rgba(255, 255, 255, 0.88);
  --shadow-sm: 0 1px 2px rgba(42, 35, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(42, 35, 32, 0.08);
  --shadow-lg: 0 24px 60px rgba(42, 35, 32, 0.12);
}

.annexiq-logo { height: 44px; width: auto; margin-bottom: var(--space-3); }
.annexiq-logo--hero { height: clamp(64px, 9vw, 96px); margin: 0 auto var(--space-4); }
/* Block-level and only as wide as the logo: the logo always gets its own
   line, so the eyebrow (an inline-block) can never sit beside it. */
.annexiq-logo-link { display: block; width: fit-content; }

/* Hero: plain white, with a red->yellow accent rule instead of the indigo block */
.theme-annexiq .hero {
  background: #ffffff;
  color: var(--text);
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--red), var(--gold)) 1;
}
.theme-annexiq .hero::before { display: none; } /* AnnexSys X-mark watermark doesn't belong on AnnexIQ pages */
.theme-annexiq .hero h1 { color: var(--navy); }
.theme-annexiq .hero .lede { color: var(--text-muted); }
.theme-annexiq .hero .btn-outline { border-color: rgba(42, 35, 32, 0.25); color: var(--navy); }
.theme-annexiq .hero .btn-outline:hover { border-color: var(--red); background: rgba(216, 40, 32, 0.05); }

/* Accent band (tagline strip on solution pages): red, yellow text accents */
.theme-annexiq .section--navy { background: linear-gradient(90deg, var(--red-600), var(--red) 60%, #e5462a); }
.theme-annexiq .section--navy .eyebrow { color: var(--gold); }

.theme-annexiq .eyebrow { color: var(--red); }
.theme-annexiq .breadcrumb a { color: var(--red); }
.theme-annexiq .breadcrumb a:hover { color: var(--red-600); text-decoration: underline; }

.theme-annexiq .btn-outline { border-color: rgba(42, 35, 32, 0.25); }
.theme-annexiq .btn-outline:hover { border-color: var(--red); background: rgba(216, 40, 32, 0.05); }

.theme-annexiq .icon-tile.gold { background: rgba(248, 200, 0, 0.2); color: #b88f00; }
.theme-annexiq .chip { background: rgba(216, 40, 32, 0.08); color: var(--red); }
.theme-annexiq a.card:hover,
.theme-annexiq .card-link:hover .card { border-color: rgba(216, 40, 32, 0.35); }
.theme-annexiq .card-link:hover h3 { color: var(--red); }
.theme-annexiq .media-frame { border-color: var(--border); }

/* Cookie consent ------------------------------------------------------
   Bar pinned to the bottom until a choice is made, plus a centred
   preferences panel the footer's "Cookie consent" link reopens at any
   time. Both live inside [data-consent] (templates/partials/consent-banner.php). */
.consent-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -8px 30px rgba(20, 11, 58, 0.12);
}
.consent-bar-inner {
  max-width: var(--container); margin: 0 auto; padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.consent-bar h2 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.consent-bar p { font-size: 0.88rem; margin: 0; max-width: 90ch; }
.consent-bar a { color: var(--red); text-decoration: underline; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (min-width: 900px) {
  .consent-bar-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .consent-actions { flex-shrink: 0; }
}

.consent-panel {
  position: fixed; inset: 0; z-index: 95; background: rgba(20, 11, 58, 0.55);
  display: flex; align-items: center; justify-content: center; padding: var(--space-2);
}
.consent-panel[hidden] { display: none; }
.consent-panel-card {
  background: #fff; border-radius: var(--radius); max-width: 620px; width: 100%;
  max-height: 85vh; overflow-y: auto; padding: var(--space-3); box-shadow: var(--shadow-lg);
}
.consent-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.consent-panel-head h2 { margin: 0; font-size: 1.25rem; }
.consent-close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--text-muted); cursor: pointer; }
.consent-close:hover { color: var(--navy); }
.consent-category { border-top: 1px solid var(--border); padding: var(--space-2) 0; }
.consent-category p { font-size: 0.86rem; margin: 0.35rem 0 0; }
.consent-category-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.consent-toggle { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.consent-toggle input { width: 18px; height: 18px; accent-color: var(--red); }
.consent-always { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.consent-panel-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; border-top: 1px solid var(--border); padding-top: var(--space-2); }
.consent-panel-foot { font-size: 0.82rem; margin: var(--space-2) 0 0; }
.consent-panel-foot a, .consent-category a { color: var(--red); text-decoration: underline; }

/* Legal pages (Privacy Notice, Cookie Policy) */
.legal-page { max-width: 820px; }
.legal-page h2 { font-size: 1.25rem; margin-top: var(--space-4); }
.legal-page p, .legal-page li { font-size: 0.95rem; }
.legal-page ul { list-style: disc; padding-left: 1.2rem; margin-bottom: var(--space-2); }
.legal-page a { color: var(--red); text-decoration: underline; }
.legal-table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0 var(--space-3); font-size: 0.9rem; }
.legal-table th, .legal-table td { border: 1px solid var(--border); padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
.legal-table th { background: var(--bg-alt); color: var(--navy); font-weight: 600; }
.legal-table code { font-size: 0.85em; }

/* Footer legal row */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }

/* Platform Overview call-to-action inside the Products dropdown item.
   A span, not a link: the dropdown item is itself an <a>, and nesting
   links is invalid HTML — main.js navigates it on click instead. */
.dropdown-product-cta {
  display: inline-flex; align-items: center; align-self: flex-start;
  margin-top: 0.5rem; padding: 0.3rem 0.7rem;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; color: var(--red); background: #fff;
}
.dropdown-product-cta:hover { border-color: var(--red); background: rgba(216, 40, 32, 0.06); }

/* Video ----------------------------------------------------------------
   One in-page player, used by the solution-page hero (overview video) and by
   /videos. A fixed 16:9 frame so the page never jumps while the file loads,
   with the <video> filling it (object-fit: contain letterboxes any other
   aspect ratio rather than cropping it). No autoplay anywhere: the visitor
   presses play, and it plays inside the frame until they choose full screen. */
.video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  background: #0e0b1c; border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.video-frame video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; background: #000; object-fit: contain;
}
.video-frame video:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.solution-hero-video { min-width: 0; }

/* "Overview video coming soon" — the same 16:9 frame, deliberately inert: a
   plain div (not a link, button or focus stop) so it can't be mistaken for
   a player that isn't working. */
.video-frame--placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.55rem; padding: var(--space-3); text-align: center; color: #fff;
  cursor: default; user-select: none; -webkit-user-select: none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(216, 40, 32, 0.42), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgba(248, 200, 0, 0.22), transparent 55%),
    linear-gradient(160deg, #211a17, #120f0e);
}
.video-placeholder-play {
  width: clamp(52px, 9vw, 76px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.video-placeholder-play svg { width: 42%; height: 42%; margin-left: 6%; fill: currentColor; }
.video-placeholder-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 2.4vw, 1.25rem); color: #fff; }
.video-placeholder-sub { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }

/* Dashboard screenshot + caption, below the product description on a solution page. */
.dashboard-figure { margin: 0; }
.dashboard-figure figcaption {
  max-width: 760px; margin: var(--space-2) auto 0; text-align: center;
  font-size: 0.92rem; line-height: 1.6; color: var(--text-muted);
}

/* /videos listing cards — the Resources card with a 16:9 thumbnail and a play badge. */
.card-media .card-media-img.video-thumb { aspect-ratio: 16 / 9; }
.video-thumb .card-media-img-inner { background: linear-gradient(160deg, #2a1f1b, #120f0e); }
.video-thumb-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(216, 40, 32, 0.92); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md); transition: transform 0.2s ease;
}
.video-thumb-play svg { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.card-link:hover .video-thumb-play { transform: scale(1.08); }
.video-thumb-duration {
  position: absolute; right: 0.6rem; bottom: 0.6rem; padding: 0.15rem 0.5rem; border-radius: 6px;
  background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.78rem; font-weight: 600;
}

/* /videos/:slug */
.video-detail-player { margin-top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .video-thumb-play, .card-media .card-media-img-inner img { transition: none; }
  .card-link:hover .video-thumb-play, .card-link:hover .card-media .card-media-img-inner img { transform: none; }
}

/* Solutions index: centred rows (3 + 2 for the five solutions) instead of a
   4-column grid that would strand a single card on a second row. */
.card-grid.solution-cards { display: flex; flex-wrap: wrap; justify-content: center; }
.solution-cards > * { flex: 0 0 100%; min-width: 0; }
.solution-cards > .card-link { display: flex; height: auto; } /* height:auto lets align-items: stretch equalise a row (a % height would opt out) */
.solution-cards > .card-link > .card { flex: 1 1 auto; min-width: 0; }
@media (min-width: 640px) { .solution-cards > * { flex-basis: calc((100% - var(--space-3)) / 2); } }
@media (min-width: 900px) { .solution-cards > * { flex-basis: calc((100% - 2 * var(--space-3)) / 3); } }

/* === mobile-compat 2026-09 (start) ===========================================
   Mobile compatibility pass: the mobile menu, header fit, logo sizing, cookie bar,
   floating WhatsApp button, horizontal strips, search overlay, overflow guards and
   iOS 14-15 fallbacks. Layout changes are scoped to max-width queries so the desktop
   layout (1280px and up) is unchanged; the few all-width rules are defect fixes and are
   listed in docs/DEPLOY-*.md. Regression tests: docs/qa/mobile-audit.mjs
   (docs/qa/README-mobile.md). Keep everything for this pass inside this block. */

:root { --header-h: 79px; }

/* -- Base safety nets -------------------------------------------------------- */
/* iOS Safari inflates text in landscape unless told not to. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* A word that cannot fit its box wraps instead of widening the page. */
body { overflow-wrap: break-word; }
/* The `hidden` attribute must always win over a component's own display value. */
[hidden] { display: none !important; }
/* Removes the double-tap-to-zoom delay on controls. */
a, button, summary, label, input, select, textarea { touch-action: manipulation; }
/* Rich article bodies: long lines scroll inside the block instead of widening the page. */
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body img, .article-body video, .article-body iframe { max-width: 100%; height: auto; }
.article-body pre code { overflow-wrap: normal; }

/* Fixed and absolute overlays: explicit sides for iOS 14.0-14.4 (no `inset`). */
.intro-modal, .search-modal, .consent-panel { top: 0; right: 0; bottom: 0; left: 0; }
.card-media .card-media-img-inner, .video-frame video { top: 0; right: 0; bottom: 0; left: 0; }
/* color-mix() fallback (iOS < 16.2): the same solid colour it resolves to. */
.dropdown-icon-tile { background: #eeedf4; }

/* Individual transform properties (iOS < 14.5): the two places where a missing `translate` changes the layout. */
@supports not (translate: 0) {
  .ticker-arrow { transform: translateY(-50%); }
  .video-thumb-play { transform: translate(-50%, -50%); }
}
/* Aspect-ratio fallback (iOS < 15): reserve the box with padding instead. */
@supports not (aspect-ratio: 1 / 1) {
  .card-media .card-media-img { height: 0; padding-top: 62.5%; }
  .card-media .card-media-img.video-thumb { padding-top: 56.25%; }
  .video-frame { height: 0; padding-top: 56.25%; }
  .demo-video-wrap video { height: auto; min-height: 200px; }
}

.mobile-nav-scrim { display: none; }

/* -- Header: logo, actions ----------------------------------------------------- */
/* The logo is height-driven (auto width). The global `img { max-width: 100% }` made it a
   shrinkable flex item whose width flexbox squeezed while its height stayed put, so it was
   drawn narrow and distorted on every phone. It never shrinks now. */
.site-header { -webkit-backdrop-filter: blur(10px); }
.brand { flex: 0 0 auto; }
.brand img { flex: none; width: auto; max-width: none; object-fit: contain; }
.nav-actions { flex: 0 0 auto; }
.footer-brand-mark img { flex: none; max-width: none; } /* same flex-item squeeze as the header logo */
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Focus: a clear ring for keyboard users, none for touch taps. Where :focus-visible is not
   supported the browser default stays. */
@supports selector(:focus-visible) {
  .nav-toggle:focus:not(:focus-visible), .search-trigger:focus:not(:focus-visible), .brand:focus:not(:focus-visible),
  .mobile-nav a:focus:not(:focus-visible), .mobile-nav summary:focus:not(:focus-visible), .mobile-nav button:focus:not(:focus-visible),
  .ticker-arrow:focus:not(:focus-visible), .search-modal-close:focus:not(:focus-visible),
  .consent-bar .btn:focus:not(:focus-visible), .whatsapp-float:focus:not(:focus-visible) { outline: none; }
}
.nav-toggle:focus-visible, .search-trigger:focus-visible, .brand:focus-visible,
.mobile-nav a:focus-visible, .mobile-nav summary:focus-visible, .mobile-nav button:focus-visible,
.ticker-arrow:focus-visible, .search-modal-close:focus-visible, .whatsapp-float:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 10px; }
.mobile-nav .mobile-nav-row:focus-visible { outline-offset: -4px; border-radius: 0; }
.nav-toggle, .search-trigger, .brand, .whatsapp-float, .ticker-arrow, .search-modal-close { -webkit-tap-highlight-color: transparent; }

/* Desktop mega-menus: a closed panel is display:none instead of visibility:hidden. A
   hidden-but-laid-out 810px panel widened the whole document (a sideways scrollbar and a
   zoomed-out page from 960px to about 1180px). The open state is unchanged and still fades
   in. main.js pulls an open panel back on screen when the window is too narrow for it. */
@keyframes dd-in { from { opacity: 0; translate: 0 8px; } }
.nav-desktop .dropdown { display: none; }
.nav-desktop .has-dropdown:hover > .dropdown, .nav-desktop .has-dropdown:focus-within > .dropdown { display: grid; animation: dd-in 0.15s ease; }
.nav-desktop .has-dropdown:hover > .dropdown.dropdown-split, .nav-desktop .has-dropdown:focus-within > .dropdown.dropdown-split { display: flex; }
.dropdown.dropdown-split { left: var(--dd-shift, 0px); }
@media (prefers-reduced-motion: reduce) { .nav-desktop .has-dropdown:hover > .dropdown, .nav-desktop .has-dropdown:focus-within > .dropdown { animation: none; } }

/* Between the phone layout and full desktop: keep the closed/open mega-menu inside the window. */
@media (min-width: 960px) and (max-width: 1279px) {
  .dropdown.dropdown-split.dropdown-split--wide { width: min(810px, calc(100vw - 2rem)); }
  .dropdown.dropdown-split.dropdown-split--products { width: min(715px, calc(100vw - 2rem)); }
  .site-footer { padding-bottom: calc(var(--space-3) + 64px); } /* the last footer line clears the floating WhatsApp button */
}

/* -- Phones and tablets in the mobile-menu layout (below 960px) --------------- */
@media (max-width: 959px) {
  :root { --header-h: 69px; }

  .container { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }

  /* Solid header: the translucent one showed a blurred ghost of the page (and, on iOS
     before 18, crisp text) through it. */
  .site-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header .container {
    height: 68px; gap: 8px;
    padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
  }
  .brand img { height: 40px; }
  .nav-actions { gap: 4px; }
  .search-trigger, .nav-toggle {
    width: 44px; height: 44px; padding: 0; border-radius: 12px;
    align-items: center; justify-content: center;
  }
  .search-trigger:active, .nav-toggle:active { background: rgba(40, 24, 112, 0.08); }
  /* px, not rem: the header must not grow with Android's large-text setting. */
  .nav-actions .btn { font-size: 14px; line-height: 1; padding: 0 16px; min-height: 44px; }
  .brand { min-height: 44px; align-items: center; }
  .nav-intro-btn { display: none; }

  /* Mobile menu: a scrollable panel directly under the header, with a scrim over the page. */
  .mobile-nav-scrim {
    display: none; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; height: 100dvh;
    background: rgba(20, 11, 58, 0.5); cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-scrim.is-open { display: block; }
  .mobile-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 1px solid var(--border); box-shadow: 0 20px 32px rgba(20, 11, 58, 0.18);
    /* 56px short of the full height: a strip of scrim stays visible under the panel, so there
       is always somewhere outside the menu to tap. */
    max-height: calc(100vh - var(--header-h) - 56px); max-height: calc(100dvh - var(--header-h) - 56px);
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-nav.is-open { display: block; animation: mnav-in 0.16s ease-out; }
  /* verify 2026-09: while the cookie bar is up it sits over the bottom of the screen, so the panel
     stops above it (on a 320x568 phone the bar hid the lower half of "Request Demo" and the panel
     could not be scrolled clear of it). --consent-h is published by consent.js. */
  html.has-consent-bar .mobile-nav {
    max-height: calc(100vh - var(--header-h) - max(56px, var(--consent-h, 0px)));
    max-height: calc(100dvh - var(--header-h) - max(56px, var(--consent-h, 0px)));
  }
  @keyframes mnav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .mobile-nav > ul > li { border-bottom: 1px solid var(--border); }

  /* Every top-level row - accordion summary or plain link - is the same 52px box. */
  .mobile-nav-row {
    display: block; position: relative; box-sizing: border-box; width: 100%; min-height: 52px; margin: 0;
    padding: 14px 44px 14px max(16px, env(safe-area-inset-left));
    font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--navy);
    background: transparent; border: 0; box-shadow: inset 3px 0 0 transparent;
    cursor: pointer; list-style: none; text-align: left;
    -webkit-tap-highlight-color: rgba(40, 24, 112, 0.1); -webkit-user-select: none; user-select: none;
  }
  /* No native disclosure triangle in any engine: WebKit draws its marker unless it is
     removed explicitly (display:block alone does not hide it). */
  summary.mobile-nav-row { list-style: none; }
  summary.mobile-nav-row::-webkit-details-marker { display: none; }
  summary.mobile-nav-row::marker { content: ''; }
  summary.mobile-nav-row::after {
    content: ''; position: absolute; right: max(20px, env(safe-area-inset-right)); top: 50%;
    width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 0.2s ease; opacity: 0.75;
  }
  details[open] > summary.mobile-nav-row::after { transform: rotate(225deg); margin-top: -2px; }
  @media (hover: hover) { .mobile-nav-row:hover { background: var(--bg-alt); } }
  /* Current section: a gold bar and a faint gold wash, as the desktop underline does. */
  .mobile-nav-row.active { box-shadow: inset 3px 0 0 var(--gold); background: rgba(248, 200, 0, 0.12); }
  .mobile-nav-row.nav-highlight { background: var(--gold); color: var(--navy); font-weight: 700; box-shadow: none; }
  .mobile-nav-row:active { background: var(--bg-alt); }
  .mobile-nav-row.nav-highlight:active { background: var(--gold-600); }

  .mobile-nav-group details > ul { padding: 4px 0 10px; background: var(--bg-alt); border-top: 1px solid var(--border); }
  .mobile-nav-group details > ul a {
    display: flex; align-items: center; min-height: 44px; box-sizing: border-box;
    padding: 8px max(16px, env(safe-area-inset-right)) 8px calc(max(16px, env(safe-area-inset-left)) + 16px);
    font-size: 0.95rem; font-weight: 500; line-height: 1.35; color: var(--text);
    -webkit-tap-highlight-color: rgba(40, 24, 112, 0.1);
  }
  .mobile-nav-group details > ul a:active { background: rgba(40, 24, 112, 0.07); }
  .mobile-nav-subhead {
    padding: 12px max(16px, env(safe-area-inset-right)) 2px calc(max(16px, env(safe-area-inset-left)) + 16px);
    font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .mobile-nav > ul > li.mobile-nav-actions {
    display: grid; gap: 10px; border-bottom: 0;
    padding: 16px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left));
  }
  .mobile-nav-btn { width: 100%; justify-content: center; min-height: 48px; font-size: 1rem; }
  .mobile-nav-btn.btn-outline { background: #fff; } /* a <button> otherwise keeps the browser's grey */
  .btn:hover { transform: none; } /* no sticky hover lift after a tap */
  button.btn-outline { background: transparent; } /* a <button> otherwise keeps the browser's grey fill */
  /* A long button label wraps inside its pill instead of running past the screen edge (nowrap made
     "Download the Platform Overview" 338px wide at 150% text on a 320px phone). The header buttons stay one line. */
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .nav-actions .btn { white-space: nowrap; }

  /* Headings and buttons never wider than the screen; long words wrap. */
  h1, h2, h3, h4, p, li, .card, .chip, .lede { overflow-wrap: anywhere; }
  .chip { white-space: normal; max-width: 100%; }
  .hero { padding-top: var(--space-5); }
  /* 2rem to 2.4rem instead of a fixed 2.4rem: five-line headlines pushed the hero buttons under the cookie bar. */
  h1 { font-size: clamp(2rem, 8.2vw, 2.4rem); }
  .interest-panel-static { max-height: none; } /* no scrolling box inside the scrolling page */
  .article-body table { display: block; max-width: 100%; overflow-x: auto; }

  /* Form controls: 16px so iOS does not zoom the page on focus; roomy tap targets. */
  input, select, textarea { font-size: 16px; }
  .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select { min-height: 48px; }
  .field select {
    min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; padding-right: 2.4rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23281870' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.9rem center / 12px 8px;
  }
  .field input[type="file"] { padding: 0.5rem; }
  /* Two rules, not one selector list: a browser that does not know one of the two
     pseudo-elements would drop the whole rule. */
  .field input[type="file"]::file-selector-button {
    font: inherit; font-weight: 600; font-size: 0.9rem; color: #fff; background: var(--navy);
    border: 0; border-radius: 999px; padding: 0.55rem 1rem; margin-right: 0.75rem;
  }
  .field input[type="file"]::-webkit-file-upload-button {
    font: inherit; font-weight: 600; font-size: 0.9rem; color: #fff; background: var(--navy);
    border: 0; border-radius: 999px; padding: 0.55rem 1rem; margin-right: 0.75rem;
  }
  .search-page-form { display: flex; gap: 0.6rem; margin-bottom: var(--space-2); }
  .search-page-form input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0.6rem 0.9rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-family: inherit; color: var(--text); } /* verify 2026-09: the typed text used the browser default face, not the site font */

  /* Two-column pages that stack: both halves start on the same left edge. */
  .demo-split-left-inner, .demo-split-right-inner { margin-left: auto; margin-right: auto; width: 100%; }
  .demo-split--video .demo-split-right { padding-top: calc(var(--space-5) + 14px); }
  .demo-close { top: 12px; right: 12px; width: 44px; height: 44px; }
  .demo-close svg { width: 18px; height: 18px; }

  /* Filter cards: labels may wrap, rows are tap-sized. */
  .dept-filter label span:not(.count), .result-filter label span:not(.count) { white-space: normal; min-width: 0; }
  .dept-filter label, .result-filter label { min-height: 44px; }
  .dept-filter input[type="checkbox"], .result-filter input[type="radio"] { width: 22px; height: 22px; }
  .role-row { min-height: 64px; }
  .interest-option, .interest-toggle-label { min-height: 44px; }
  .pillar-list a { min-height: 44px; }
  h3.mt-0 > a { display: inline-block; padding: 9px 0; } /* title links in the service category blocks */
  .consent-actions .btn, .consent-panel-actions .btn { min-height: 44px; }

  /* Footer: tap-sized links, and room under the last line for the floating WhatsApp button. */
  .site-footer a { padding: 0.6rem 0; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
  .site-footer .footer-social { flex-wrap: wrap; }
  .site-footer .footer-social a { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .site-footer .footer-legal a { min-height: 44px; }
  .site-footer { padding-bottom: calc(var(--space-3) + 76px + env(safe-area-inset-bottom)); }

  /* Floating WhatsApp button: smaller, inside the safe area, above the cookie bar (below). */
  .whatsapp-float { width: 52px; height: 52px; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .whatsapp-float svg { width: 26px; height: 26px; }

  /* Search overlay: the dialog and its input fit any phone; the close button is a real target. */
  .search-modal { padding: 76px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
  .search-modal-dialog { width: 100%; min-width: 0; padding: 4px 4px 4px 16px; box-sizing: border-box; }
  .search-modal-form input { font-size: 1.15rem; }
  .search-modal-close { width: 44px; height: 44px; align-items: center; justify-content: center; }
}
@media (max-width: 479px) {
  .nav-demo-btn { display: none; } /* Request Demo lives in the menu on phones */
}
@media (max-width: 359px) {
  .brand img { height: 34px; }
}
@media (max-width: 959px) and (max-height: 500px) {
  :root { --header-h: 57px; }
  .site-header .container { height: 56px; }
  .brand img { height: 34px; }
  .hero { padding-top: var(--space-5); }
  .search-modal { padding-top: 16px; }
  /* The demo video state: a 16:9 frame at full width is taller than a landscape phone. */
  .demo-video-wrap video { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); }
  .demo-split--video .demo-split-right { padding-top: 56px; padding-bottom: var(--space-3); }
}

/* Overlays: the backdrop is a click target (iOS needs cursor:pointer to deliver the tap). */
.intro-modal, .search-modal { cursor: pointer; }
.intro-modal-dialog, .search-modal-dialog { cursor: auto; }
/* While the menu or an overlay is open the floating button would sit on top of it. */
body.scroll-locked .whatsapp-float { visibility: hidden; }
/* Independent verification 2026-09: the cookie bar (z-index 90) sat ABOVE the open menu (header, 50)
   and covered its last rows ("Request Demo") on a 320x568 phone and most of the panel in landscape.
   While the menu or an overlay holds the page it drops below the header layer, so the panel and its
   scrim (both inside the header) are the top layer and the whole screen outside the panel closes it. */
body.scroll-locked .consent-bar { z-index: 40; }
.search-modal-form input { min-width: 0; }
body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; }

/* -- Strips that scroll sideways (stats, values, benefits) ---------------------- */
/* On a phone the strip runs edge to edge, snaps card by card and shows a slice of the next
   card so it is obviously swipeable; the arrows sit under it instead of over the text. */
@media (max-width: 699px) {
  .ticker-wrap { margin-left: -24px; margin-right: -24px; }
  .ticker-track {
    padding: 4px 24px; scroll-padding-left: 24px; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .ticker-track > * { flex: 0 0 min(220px, 64%); min-width: 0; height: auto; min-height: 148px; scroll-snap-align: start; }
  .ticker-wrap.has-ticker { padding-inline: 0; padding-bottom: 56px; }
  .ticker-arrow { top: auto; bottom: 0; translate: none; transform: none; width: 44px; height: 44px; }
  .ticker-arrow.prev { left: calc(50% - 50px); right: auto; }
  .ticker-arrow.next { left: calc(50% + 6px); right: auto; }
}

/* -- Cookie consent: a slim strip on phones ------------------------------------- */
.consent-bar { padding-bottom: env(safe-area-inset-bottom); }
.consent-short { display: none; }
html.has-consent-bar body { padding-bottom: var(--consent-h, 0px); }
html.has-consent-bar .whatsapp-float { bottom: calc(var(--consent-h, 0px) + 12px); }
/* Independent verification 2026-09: from 900px the bar is a row (copy left, three buttons right) with
   buttons that never shrink. With larger system text the buttons alone took ~550px, the copy was squeezed to
   ~200px and the bar grew to 50-100% of the screen (788px tall on a 900x780 window at 150% text). The
   buttons now wrap under the copy when it would get less than 20rem. Below 1280px only: wider windows are unchanged. */
@media (min-width: 900px) and (max-width: 1279px) {
  .consent-bar-inner { flex-wrap: wrap; }
  .consent-bar-inner > div:first-child { flex: 1 1 20rem; min-width: 0; }
}
@media (max-width: 599px), (max-width: 959px) and (max-height: 500px) {
  .consent-bar-inner { padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); gap: 8px; }
  .consent-bar h2, .consent-long, .consent-btn-long { display: none; }
  .consent-short { display: inline; }
  /* px, not rem: the strip must not grow with Android's large-text setting. */
  .consent-bar p { font-size: 12.5px; line-height: 1.35; }
  .consent-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .consent-actions .btn { justify-content: center; min-height: 44px; padding: 0 4px; font-size: 12.5px; line-height: 1.15; text-align: center; white-space: normal; }
}
@media (min-width: 600px) and (max-width: 959px) and (max-height: 500px) {
  .consent-bar-inner { flex-direction: row; align-items: center; gap: var(--space-3); }
  .consent-actions { flex: 0 0 min(380px, 46%); }
}
/* Preferences panel on phones: heading, a scrolling body, then the buttons, stacked in a card
   that fits the screen. The body scrolls; the buttons never sit on top of its text. */
.consent-panel { overscroll-behavior: contain; }
@media (max-width: 959px) {
  .consent-panel { padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left)); }
  .consent-panel-card {
    display: flex; flex-direction: column; overflow: hidden;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
  }
  .consent-panel-head, .consent-panel-actions, .consent-panel-foot { flex: 0 0 auto; }
  .consent-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .consent-panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .consent-panel-actions .btn { justify-content: center; min-height: 44px; }
  .consent-panel-actions [data-consent-save] { grid-column: 1 / -1; order: 3; }
  .consent-close { min-width: 44px; min-height: 44px; }
}
@media (max-width: 959px) and (max-height: 500px) {
  .consent-panel-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .consent-panel-actions [data-consent-save] { grid-column: auto; order: 0; }
  .consent-panel-foot { display: none; }
}

/* -- All-width defect fixes -------------------------------------------------------- */
/* Red on navy is about 2.9:1; the eyebrow already turns gold inside .section--navy. */
body:not(.theme-annexiq) .hero .eyebrow, .demo-split-left-inner .eyebrow { color: var(--gold); }
/* The contact cards were meant to be icon-beside-text rows (see .card-compact); .card's column
   direction won, so each block was centred on its own text and no two shared a left edge. */
.contact-card { flex-direction: row; text-align: left; }
/* Article bodies (Insights): rich HTML from the editor. */
.article-body { overflow-wrap: break-word; }
/* The job page's apply card is a sticky sidebar only where it IS a sidebar (two columns, 900px
   and up); pinned in the single-column layout it slides over the text below it. */
@media (min-width: 900px) { .careers-apply-card { position: sticky; top: 100px; } }
/* verify-solutions 2026-09: the search page's box was 13.3px above the 959px phone query, so an iPad
   (1024px landscape) zoomed the page when it was focused. Touch devices get 16px at every width; a
   mouse desktop keeps the browser default. */
@media (pointer: coarse) { .search-page-form input { font-size: 16px; font-family: inherit; min-height: 48px; } }

/* === mobile-compat 2026-09 (end) ============================================ */

/* === verify-insights 2026-09 (start) ==========================================
   "This video is temporarily unavailable": a fixed 16:9 box with overflow:hidden could not hold
   its badge + two text blocks on a 320px phone (272x153 box, about 200px of content), so the
   badge was cut at the top and "SHORTLY" at the bottom. With overflow visible the aspect-ratio
   box may grow to its content (a ratio box's automatic minimum height only applies then), and
   on phones the badge and padding are smaller. Nothing here needs clipping: the background is
   on the box itself. */
.video-frame--placeholder { overflow: visible; }
@media (max-width: 480px) {
  .video-frame--placeholder { padding: var(--space-2); gap: 0.4rem; }
  .video-placeholder-play { width: 44px; }
  .video-placeholder-sub { font-size: 0.75rem; letter-spacing: 0.05em; }
}
/* An article table wider than the 760px column scrolls inside it up to 959px (the phone rule above);
   from 960px to 1279px (iPad landscape, small laptops) it ran past the screen edge and .section's
   overflow-x:hidden cut off its last columns. Wide desktops are left as they were. */
@media (min-width: 960px) and (max-width: 1279px) { .article-body table { display: block; max-width: 100%; overflow-x: auto; } }
/* === verify-insights 2026-09 (end) ============================================ */

/* === verify-services 2026-09 (start) ==========================================
   Independent verification of the services / industries pages, small phones.
   (1) .cta-band: 3rem card padding plus the 24px page gutter left a 176px text column at 320px,
       so the CTA heading on every service page broke mid-word ("cybersecuri-ty strategy").
   (2) Services index category cards: the icon tile beside the text left a 138px column at 320px
       ("Transformati-on"); the icon now stacks above the text on narrow phones.
   (3) The category title link is a 44px tap target (it measured 41.9px). */
@media (max-width: 400px) {
  .cta-band { padding: var(--space-4) var(--space-3); }
  .cta-band h2 { font-size: clamp(1.45rem, 7.4vw, 1.9rem); }
}
@media (max-width: 430px) {
  .pillar { padding: var(--space-3); }
  .pillar-head-main { flex-direction: column; }
}
@media (max-width: 959px) {
  h3.mt-0 > a { padding: 11px 0; }
}
/* (4) Firefox: while the page is locked (menu / search / intro video open) the body is position:fixed
       at a negative top offset, and Firefox leaves a position:sticky header at that offset, i.e. above
       the screen, with the open menu inside it. Pin the header to the viewport for as long as the lock
       lasts; main.js sets --lock-header-h (its height) and the body is padded by it so nothing moves. */
body.scroll-locked { padding-top: var(--lock-header-h, 0px); }
body.scroll-locked .site-header { position: fixed; top: 0; left: 0; right: var(--lock-sb, 0px); } /* --lock-sb: the classic scrollbar's width, which the locked body pads for */
/* === verify-services 2026-09 (end) ============================================ */

/* === backlog-fixes 2026-09 (start) ==============================================
   Gated download pages (/resources/{slug}, /platform-overview) and the /resources index.
   Reported 2026-09-18: the page scrolled too much and the form sat under a lot of empty
   space. Cause: .demo-split forces min-height:100vh with both panels vertically centred and
   72px of padding, the long description made the navy panel ~925px tall, and on phones the
   whole navy panel (title + summary + description) came BEFORE the form (form at y=988 of
   3424). Only pages that opt in with .demo-split--compact change; /request-demo is untouched. */
.demo-split--compact .demo-split-meta { font-size: 0.85rem; opacity: 0.75; }
.demo-split--compact .demo-split-more p { color: var(--text-on-navy-muted); }
/* Each .field already carries its own bottom margin; the grid's row gap on top of it
   doubled the space between stacked fields (first name -> last name on a phone). */
.demo-split--compact .form-grid { gap: 0 0.9rem; }
@media (min-width: 960px) {
  /* Height follows the content (no forced viewport height), and both panels start at the
     same line instead of being centred on it. 3rem keeps the first row clear of the
     round close button (top:1rem, 38px). */
  .demo-split--compact { min-height: 0; }
  .demo-split--compact .demo-split-left,
  .demo-split--compact .demo-split-right { align-items: flex-start; padding-top: var(--space-5); padding-bottom: var(--space-5); }
  .demo-split--compact .demo-split-left { flex-direction: column; }
  .demo-split--compact .demo-split-left-inner,
  .demo-split--compact .demo-split-more { max-width: 460px; width: 100%; margin-left: auto; }
  .demo-split--compact .demo-split-left-inner h1 { font-size: clamp(1.9rem, 2.7vw, 2.6rem); margin-bottom: var(--space-1); }
  .demo-split--compact .demo-split-more { margin-top: var(--space-2); }
  /* Tighter form rhythm: the same fields, less air between them. */
  .demo-split--compact .field { margin-bottom: 0.8rem; }
  .demo-split--compact .field input:not([type="checkbox"]), .demo-split--compact .field select { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .demo-split--compact .field label { margin-bottom: 0.25rem; }
}
@media (max-width: 959px) {
  /* Stacked: intro band, then the form, then the long description. The left wrapper stops
     being a box so its two children can be ordered around the form; each keeps the navy band. */
  .demo-split--compact .demo-split-left { display: contents; }
  .demo-split--compact .demo-split-left-inner,
  .demo-split--compact .demo-split-more { background: var(--navy); color: var(--text-on-navy); max-width: none; margin: 0; padding: 0 max(var(--space-3), calc((100% - 460px) / 2)); } /* text column = the form's 460px column, centred on tablets */
  .demo-split--compact .demo-split-left-inner { order: 1; padding-top: 3.75rem; padding-bottom: var(--space-3); }
  .demo-split--compact .demo-split-right { order: 2; padding-top: var(--space-3); padding-bottom: var(--space-4); }
  .demo-split--compact .demo-split-more { order: 3; padding-top: var(--space-3); padding-bottom: var(--space-4); }
  .demo-split--compact .demo-split-more p { margin: 0; }
  .demo-split--compact .demo-split-left-inner h1 { font-size: clamp(1.6rem, 6.4vw, 2rem); margin-bottom: var(--space-1); }
  .demo-split--compact .demo-split-left-inner p:last-child { margin-bottom: 0; }
  .demo-split--compact .field { margin-bottom: 0.9rem; }
}
/* /resources index: the hero was forced to 340px of content plus 7rem top padding for one
   headline, one line and a button. */
.hero--compact { padding-top: var(--space-6); }
@media (max-width: 959px) { .hero--compact { padding-top: var(--space-5); } }
/* === backlog-fixes 2026-09 (end) ================================================ */

/* === video-categories 2026-10 (start) ============================================
   /videos is listed category by category (the five solutions, then General) and each category is a row of
   video cards that scrolls sideways. The row is plain CSS: overflow-x with scroll-snap, so touch swipe,
   trackpad and shift + wheel work natively and, with JavaScript off, the row still scrolls by its scrollbar.
   assets/js/video-slider.js only adds the previous / next buttons (hidden until the row overflows) and
   hides the scrollbar they replace. Three cards fit per row from 900px, two from 640px, and on a phone
   one card plus a slice of the next so the row looks swipeable. The row never widens the page: the
   overflow is inside it. Back out: delete this block, templates/pages/videos-index.php's markup and
   video-slider.js. */
.video-category + .video-category { margin-top: var(--space-5); }
.video-category-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.video-category-head h2 { margin: 0; min-width: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.video-slider-buttons { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.video-slider-btn {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--navy);
  box-shadow: var(--shadow-md); cursor: pointer;
}
.video-slider-btn:hover:not(:disabled) { background: var(--bg-alt); }
.video-slider-btn:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.video-slider-btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.video-slider-btn svg { width: 20px; height: 20px; }

/* The room around the cards (padding, cancelled by the negative margin so nothing moves) is what the hover lift and
   shadow of a card need: a scrolling box clips everything outside it, and overflow-y cannot stay visible next to overflow-x. */
.video-slider-track {
  display: flex; gap: var(--space-3); list-style: none; margin: -8px -4px -28px; padding: 8px 4px 28px;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.video-category.is-enhanced .video-slider-track { scrollbar-width: none; -ms-overflow-style: none; }
.video-category.is-enhanced .video-slider-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .video-slider-track { scroll-behavior: smooth; } }

.video-slide { flex: 0 0 82%; max-width: 340px; min-width: 0; scroll-snap-align: start; display: flex; }
@media (min-width: 640px) { .video-slide { flex-basis: calc((100% - var(--space-3)) / 2); max-width: none; } }
@media (min-width: 900px) { .video-slide { flex-basis: calc((100% - 2 * var(--space-3)) / 3); } }
/* Same pattern as .solution-cards: the link fills the slide and the card fills the link, so every card in a row is as tall as the tallest. */
.video-slide > .card-link { display: flex; flex: 1 1 auto; min-width: 0; height: auto; }
.video-slide > .card-link > .card { flex: 1 1 auto; min-width: 0; }

/* Phone: the row runs to both screen edges (like the other strips) while the first card still lines up with the page text. */
@media (max-width: 639px) {
  .video-slider-track { margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
}
/* === video-categories 2026-10 (end) ================================================ */