/* Division pages share one responsive system; theme.js supplies the accent. */
html[data-division] {
  --division-line: rgb(var(--pearl-rgb) / 0.12);
  --division-muted: color-mix(in srgb, var(--pearl) 66%, var(--ink));
  --division-surface: color-mix(in srgb, var(--panel) 94%, var(--cyan));
  scroll-padding-top: 0;
}
html[data-division] ::selection { background: rgb(var(--cyan-rgb) / 0.3); color: var(--pearl); }
.division-wrap { width: min(100%, 1400px); margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); }
.division-section { position: relative; padding-block: 96px; scroll-margin-top: 0; }
.division-section:focus { outline: none; }
.division-section *, .division-nav *, .division-mobile-menu * { box-sizing: border-box; }
.division-eyebrow { display: inline-flex; gap: 10px; align-items: center; color: var(--cyan); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.6; }
.division-eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; flex: 0 0 auto; }
.division-section-header { max-width: 760px; }
.division-section-header h2 { margin-top: 18px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px, 3.8vw, 52px); font-weight: 400; letter-spacing: -0.04em; line-height: 1.15; text-wrap: balance; }
.division-section-header p { margin-top: 22px; color: var(--division-muted); font-size: 17px; line-height: 1.75; max-width: 670px; }
.division-divider { display: flex; align-items: center; gap: 14px; color: var(--division-muted); font-size: 11px; letter-spacing: 0.04em; }
.division-divider > span:first-child { color: var(--cyan); font-variant-numeric: tabular-nums; }
.division-divider i { height: 1px; flex: 1; background: var(--division-line); }
.division-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 14px 23px; border: 1px solid transparent; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none; cursor: pointer; transition: background 180ms, border-color 180ms, transform 180ms; }
.division-button-primary { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.division-button-secondary { background: rgb(var(--pearl-rgb) / 0.035); border-color: var(--division-line); color: var(--pearl); }
.division-button:hover { transform: translateY(-2px); }
.division-button-primary:hover { background: color-mix(in srgb, var(--cyan) 84%, white); }
.division-button-secondary:hover { background: rgb(var(--pearl-rgb) / 0.08); border-color: rgb(var(--pearl-rgb) / 0.3); }
.division-button:disabled { opacity: 0.6; cursor: wait; transform: none; }
.division-button:focus-visible, .division-nav a:focus-visible, .division-nav button:focus-visible, .division-mobile-menu a:focus-visible, .division-mobile-menu button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* A compact persistent header and a native modal menu on phones/tablets. */
/* Three columns rather than space-between, so the centre nav is centred on the
   HEADER and not on whatever is left over beside the brand. The brand carries
   the division's name, and those are different lengths — Infrastructure against
   AI — so under space-between the same nav sat at x=506 on one division page
   and x=475 on another. Same header, visibly different on each. The outer
   columns are equal fractions and the middle is its own width, which pins it
   to the true centre whatever the name beside it happens to be. */
.division-nav { position: fixed; z-index: 60; inset: 0 0 auto; height: 76px; padding-inline: clamp(20px, 5vw, 64px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; border-bottom: 1px solid transparent; transition: background 200ms, border-color 200ms; }
.division-brand { justify-self: start; }
.division-desktop-nav { justify-self: center; }
.division-nav-actions { justify-self: end; }
.division-nav.is-solid { background: rgb(var(--ink-rgb) / 0.92); border-color: var(--division-line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.division-brand { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 44px; flex-shrink: 0; }
.division-brand img { width: 82px; height: 41px; object-fit: contain; }
.division-brand > span { padding-inline-start: 16px; border-inline-start: 1px solid var(--division-line); font-size: 12px; font-weight: 500; color: var(--division-muted); max-width: 180px; }
.division-desktop-nav, .division-nav-actions { display: flex; align-items: center; gap: 8px; }
.division-desktop-nav { color: var(--division-muted); font-size: 13px; }
.division-desktop-nav > a, .division-nav-dropdown summary { min-height: 44px; display: flex; align-items: center; padding: 10px 13px; border-radius: 8px; cursor: pointer; }
.division-desktop-nav > a:hover, .division-nav-dropdown summary:hover { color: var(--pearl); background: rgb(var(--pearl-rgb) / 0.04); }
.division-nav-dropdown { position: relative; }
.division-nav-dropdown summary { gap: 8px; list-style: none; }
.division-nav-dropdown summary::-webkit-details-marker { display: none; }
.division-nav-dropdown > div { position: absolute; inset-inline-start: 0; top: calc(100% + 12px); width: 290px; padding: 10px; border: 1px solid var(--division-line); border-radius: 14px; background: var(--panel); box-shadow: 0 24px 60px rgb(0 0 0 / 0.35); }
.division-nav-dropdown > div > a, .division-menu-divisions > a { display: flex; align-items: center; gap: 13px; min-height: 48px; padding: 10px; border-radius: 7px; }
.division-nav-dropdown a:hover, .division-menu-divisions > a:hover { background: rgb(var(--cyan-rgb) / 0.06); }
.division-nav-dropdown a[aria-current], .division-menu-divisions a[aria-current] { color: var(--cyan); background: rgb(var(--cyan-rgb) / 0.07); }
.division-nav-code { color: var(--cyan); font-size: 10px; font-variant-numeric: tabular-nums; }
.division-nav-arrow { margin-inline-start: auto; color: var(--division-muted); }
.division-nav-profile { display: none; font-size: 12px; color: var(--division-muted); margin-inline-end: 10px; }
.division-language, .division-menu-toggle, .division-menu-close { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--division-line); border-radius: 9px; color: var(--pearl); font-size: 12px; background: rgb(var(--pearl-rgb) / 0.025); cursor: pointer; }
/* The language control shared the hamburger's chrome — a 12%-opacity border
   on a dark nav, which read as empty space and was reported missing twice.
   It keeps the 44px target but carries a visible edge and a globe. */
.division-language { gap: 7px; font-weight: 500; letter-spacing: 0.02em; text-decoration: none;
  border-color: rgb(var(--pearl-rgb) / 0.32); background: rgb(var(--pearl-rgb) / 0.07); }
.division-language svg { flex: none; opacity: 0.75; }
.division-language:hover, .division-language:focus-visible {
  color: var(--ink); background: var(--cyan); border-color: var(--cyan); }
.division-language:hover svg { opacity: 1; }
.division-nav-contact { display: inline-flex; gap: 16px; min-height: 44px; align-items: center; padding: 11px 16px; margin-inline-start: 6px; background: var(--cyan); color: var(--ink); border-radius: 9px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.division-menu-toggle { display: none; }
.division-mobile-menu { position: fixed; inset-block: 12px; inset-inline: auto 12px; width: min(420px, calc(100% - 24px)); max-width: none; height: calc(100% - 24px); height: calc(100dvh - 24px); max-height: none; margin: 0; padding: 24px; color: var(--pearl); background: var(--panel); border: 1px solid var(--division-line); border-radius: 20px; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 30px 90px rgb(0 0 0 / 0.4); }
.division-mobile-menu:not([open]) { display: none; }
.division-mobile-menu::backdrop { background: rgb(2 5 10 / 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.division-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--division-line); }
.division-menu-head > span { font-size: 19px; font-weight: 500; }
.division-menu-label { margin: 25px 0 10px; color: var(--division-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.division-menu-sections > a { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding-block: 10px; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; }
.division-menu-sections > a > span { font-size: 17px; color: var(--division-muted); }
.division-menu-sections > a:hover { color: var(--cyan); }
.division-menu-divisions { padding-top: 3px; margin-top: 20px; border-top: 1px solid var(--division-line); }
.division-menu-divisions > a { font-size: 14px; }
.division-menu-footer { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-top: 20px; margin-top: 22px; border-top: 1px solid var(--division-line); color: var(--division-muted); font-size: 12px; }
.division-menu-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.division-eco-dock { position: fixed; z-index: 50; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; padding: 6px; border: 1px solid var(--division-line); border-radius: 14px; background: rgb(var(--ink-rgb) / 0.93); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.division-eco-dock a { display: inline-flex; align-items: center; min-height: 40px; padding-inline: 15px; border-radius: 9px; white-space: nowrap; color: var(--division-muted); font-size: 11px; }
.division-eco-dock a:hover, .division-eco-dock a[aria-current] { color: var(--cyan); background: rgb(var(--cyan-rgb) / 0.08); }

/* Hero: clear hierarchy, useful service facts, and a calm service overview. */
.division-hero { padding-top: 150px; padding-bottom: 92px; }
.division-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.division-hero-copy { min-width: 0; }
.division-hero-title { margin-top: 26px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(56px, 6.5vw, 92px); font-weight: 400; line-height: 1.05; letter-spacing: -0.055em; }
.division-hero-title.is-long { font-size: clamp(44px, 4.5vw, 68px); }
.division-hero-tagline { margin-top: 18px; max-width: 700px; color: var(--pearl); font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.4; text-wrap: balance; }
.division-hero-description { margin-top: 24px; max-width: 600px; color: var(--division-muted); font-size: 17px; line-height: 1.8; }
.division-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.division-profile-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 3px; color: var(--division-muted); font-size: 14px; }
.division-profile-link:hover { color: var(--cyan); }
.division-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--division-line); }
.division-hero-facts > div { padding-inline: 18px; border-inline-start: 1px solid var(--division-line); min-width: 0; }
.division-hero-facts > div:first-child { padding-inline-start: 0; border: 0; }
.division-hero-facts > div:last-child { padding-inline-end: 0; }
/* Secondary copy carries real content — sectors served, deliverables, the
   labels on the hero figures and on the contact form — and sat at 11-12px in
   the muted colour, small and faint at once. It reads at 13-14px. The index
   numerals, the uppercase eyebrows and the dividers keep their size: those are
   marks, not sentences. */
.division-hero-facts dt { font-size: calc(13px * var(--read)); color: var(--division-muted); line-height: 1.55; }
.division-hero-facts dd { margin: 9px 0 0; font-size: calc(18px * var(--read)); font-weight: 500; line-height: 1.5; text-wrap: balance; }
.division-glance { position: relative; padding: 30px; border: 1px solid rgb(var(--cyan-rgb) / 0.19); border-radius: 22px; background: linear-gradient(150deg, rgb(var(--cyan-rgb) / 0.11), rgb(var(--ink-rgb) / 0.82) 70%); box-shadow: 0 30px 80px -38px rgb(0 0 0 / 0.5); }
.division-glance-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.division-code { font-size: 10px; color: var(--division-muted); font-variant-numeric: tabular-nums; }
.division-glance h2 { margin-top: 27px; max-width: 280px; font-size: 26px; font-weight: 400; line-height: 1.35; letter-spacing: -0.025em; }
.division-glance-list { list-style: none; padding: 0; margin: 26px 0 0; }
.division-glance-list li { display: flex; align-items: baseline; gap: 16px; padding-block: 18px; border-top: 1px solid var(--division-line); font-size: calc(14px * var(--read)); line-height: 1.6; }
.division-glance-list li > span:first-child { color: var(--cyan); font-size: 10px; }
.division-glance-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--division-line); padding-top: 22px; }
.division-glance-footer > span { color: var(--division-muted); font-size: calc(13px * var(--read)); line-height: 1.6; }
.division-glance-footer a { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px; border-radius: 50%; border: 1px solid var(--division-line); color: var(--cyan); font-size: 21px; }

/* Content cards share one scale, with a vertical delivery timeline on phones. */
.division-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.division-overview-points { padding-top: 15px; }
.division-point { display: flex; gap: 20px; padding-block: 24px; border-bottom: 1px solid var(--division-line); }
.division-point p { margin: 0; color: var(--division-muted); font-size: calc(15px * var(--read)); line-height: 1.75; }
.division-card-number { color: var(--cyan); font-size: 11px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.division-point > .division-card-number { padding-top: 4px; }
.division-sectors { margin-top: 23px; color: var(--division-muted); font-size: calc(14px * var(--read)); line-height: 1.8; }
.division-sectors > span { color: var(--pearl); }
.division-card-grid { display: grid; gap: 18px; margin-top: 40px; }
.division-capabilities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.division-card { height: 100%; padding: 27px; border: 1px solid var(--division-line); border-radius: 16px; background: linear-gradient(155deg, rgb(var(--pearl-rgb) / 0.045), rgb(var(--ink-rgb) / 0.72)); }
.division-card h3 { font-size: 19px; font-weight: 500; line-height: 1.5; letter-spacing: -0.015em; }
.division-card p { margin-top: 12px; color: var(--division-muted); font-size: calc(14px * var(--read)); line-height: 1.8; }
.division-capability-card h3 { margin-top: 24px; }
.division-capability-card { transition: border-color 180ms, background 180ms; }
.division-capability-card:hover { border-color: rgb(var(--cyan-rgb) / 0.4); background: rgb(var(--cyan-rgb) / 0.065); }
.division-lifecycle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 42px 0 0; padding: 0; }
.division-lifecycle li { position: relative; padding-top: 24px; border-top: 1px solid rgb(var(--cyan-rgb) / 0.35); }
.division-step-number { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgb(var(--cyan-rgb) / 0.3); border-radius: 50%; background: rgb(var(--cyan-rgb) / 0.07); color: var(--cyan); font-size: 12px; }
.division-lifecycle h3 { margin-top: 24px; font-size: 19px; font-weight: 500; line-height: 1.45; }
.division-lifecycle p { margin-top: 12px; font-size: calc(14px * var(--read)); color: var(--division-muted); line-height: 1.8; }
.division-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.division-outcome { padding-block: 33px; }
.division-outcome h3 { font-size: clamp(24px, 2vw, 30px); color: var(--cyan); font-weight: 400; line-height: 1.35; }
/* ── VENDOR ECOSYSTEM RAILS ───────────────────────────────────────────────
   The same moving rails the home page's ecosystem section uses — two of them,
   the second running back the other way — rather than the static grid of boxes
   this section used to be. The geometry and timings below are the home page's,
   value for value; what differs is the palette, because each division carries
   its own.

   Deliberately the same CLASS names too. ui.css, where the home page's copies
   live, is not loaded here, so these do not collide — and reusing the names
   means rtl.css already knows about them: it swaps .eco-track onto a positive
   keyframe under RTL, because translating a max-content flex track to -50%
   there throws it off-screen. One rule, both pages.

   @keyframes marquee has to be declared here for the same reason: it lives in
   ui.css and a division page never sees it. */
.eco-rail {
  margin-top: 36px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.eco-track { display: flex; width: max-content; padding: 8px 0; animation: marquee 144s linear infinite; }
.eco-rail--rev .eco-track { animation-direction: reverse; animation-duration: 168s; }
.eco-rail:hover .eco-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.eco-logo-wrap { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin: 0 39px; }
.eco-logo {
  height: 42px; width: auto; max-width: 180px; object-fit: contain; display: block;
  filter: brightness(0) invert(1); opacity: 0.4; transition: opacity 0.4s var(--ease, ease);
}
.eco-logo-wrap:hover .eco-logo { opacity: 1; }

/* Two of these divisions list technologies rather than logo'd partners, so the
   text chip is not a fallback nobody sees — it is what AI and Software show. */
.eco-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px;
  margin: 0 7px; padding: 13px 22px; border-radius: 10px;
  border: 1px solid var(--division-line); background: rgb(var(--pearl-rgb) / 0.025);
  color: var(--division-muted); font-size: 14px; letter-spacing: 0.04em; white-space: nowrap;
  transition: color 0.4s var(--ease, ease), border-color 0.4s var(--ease, ease);
}
.eco-chip > i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }
.eco-chip:hover { color: var(--pearl); border-color: var(--cyan); }

/* The rails repeat their contents, so they are decoration; this carries the
   real list for anyone reading the page with assistive technology. */
.eco-reader { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .eco-track { animation: none; }
  .eco-rail { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
}
.division-governance-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; margin-top: 40px; align-items: start; }
.division-governance-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.division-engagement { padding: 30px; background: rgb(var(--cyan-rgb) / 0.055); }
.division-engagement > h3 { margin-top: 14px; font-size: 24px; }
.division-engagement-list { list-style: none; margin: 22px 0 28px; padding: 0; }
.division-engagement-list li { display: flex; align-items: center; gap: 12px; padding-block: 15px; border-bottom: 1px solid var(--division-line); font-size: calc(14px * var(--read)); }
.division-engagement-list li > span { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--cyan); }
.division-engagement h4 { font-size: calc(14px * var(--read)); color: var(--division-muted); font-weight: 500; }
.division-deliverables { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 13px 0 0; }
.division-deliverables li { padding: 8px 11px; border: 1px solid var(--division-line); border-radius: 7px; font-size: calc(13px * var(--read)); color: var(--division-muted); line-height: 1.55; }

/* Contact remains a working form; controls stay at 16px to avoid iOS zoom. */
.division-contact-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; margin-top: 42px; align-items: start; }
.division-contact-info h3, .division-form-heading h3 { font-size: 21px; font-weight: 500; }
.division-contact-channels > a { display: flex; justify-content: space-between; gap: 16px; padding-block: 22px; border-bottom: 1px solid var(--division-line); font-size: calc(14px * var(--read)); line-height: 1.6; }
.division-contact-channels > a > span:first-child { min-width: 0; }
.division-channel-label { display: block; margin-bottom: 5px; color: var(--division-muted); font-size: calc(13px * var(--read)); }
.division-contact-channels bdi { overflow-wrap: anywhere; }
.division-contact-channels > a > span:last-child { color: var(--cyan); }
.division-contact-channels > a:hover bdi { color: var(--cyan); }
.division-offices { margin-top: 34px; }
.division-offices p { margin-top: 16px; font-size: calc(14px * var(--read)); line-height: 1.9; }
.division-offices p > span { color: var(--division-muted); }
.division-contact-form { padding: 32px; border: 1px solid var(--division-line); border-radius: 20px; background: rgb(var(--panel-rgb, var(--ink-rgb)) / 0.65); }
.division-form-heading { margin-bottom: 24px; }
.division-form-heading p { margin-top: 7px; color: var(--division-muted); font-size: calc(13px * var(--read)); }
.division-form-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.division-form-fields label { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.division-form-fields label > span { font-size: calc(14px * var(--read)); color: var(--division-muted); line-height: 1.6; }
.division-form-fields label > span > span { color: var(--cyan); }
.division-form-fields input, .division-form-fields select, .division-form-fields textarea { width: 100%; min-width: 0; min-height: 50px; border: 1px solid var(--division-line); border-radius: 9px; padding: 13px 14px; background: rgb(var(--pearl-rgb) / 0.035); color: var(--pearl); font: inherit; font-size: 16px; line-height: 1.6; outline: none; transition: border-color 160ms, box-shadow 160ms; }
.division-form-fields :is(input, select, textarea):focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(var(--cyan-rgb) / 0.09); }
.division-form-fields :is(input, textarea)::placeholder { color: var(--division-muted); opacity: 0.65; }
.division-form-fields select { padding-inline-end: 32px; cursor: pointer; color-scheme: dark; }
.division-form-fields option { color: var(--pearl); background: var(--panel); }
.division-form-fields textarea { resize: vertical; min-height: 130px; }
.division-form-message { grid-column: 1 / -1; }
.division-form-submit { margin-top: 26px; }
.division-form-error { margin-top: 20px; color: var(--gold); font-size: 13px; line-height: 1.7; }
.division-form-error a { display: inline-block; padding-block: 8px; text-decoration: underline; text-underline-offset: 3px; }
.division-form-success { padding-block: 42px; text-align: center; }
.division-form-success > span { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border: 1px solid rgb(var(--cyan-rgb) / 0.35); border-radius: 50%; color: var(--cyan); font-size: 23px; }
.division-form-success h3 { font-size: 25px; margin-top: 22px; }
.division-form-success p { margin-top: 12px; color: var(--division-muted); font-size: 14px; }
.division-form-success button { margin-top: 25px; }
.division-footer { border-top: 1px solid var(--division-line); padding-block: 34px 100px; color: var(--division-muted); font-size: 11px; line-height: 1.8; }
.division-footer > .division-wrap { display: flex; justify-content: space-between; gap: 24px; }
.division-footer > .division-wrap > div { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.division-footer a { flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: flex-start; gap: 10px; color: var(--pearl); }

@media (min-width: 1360px) { .division-nav-profile { display: inline-flex; align-items: center; min-height: 44px; } }
@media (max-width: 1099px) {
  /* Only the decorative root canvas; assistant and call canvases live outside it. */
  html[data-division] #root > div > canvas { opacity: 0.28; }
  .division-nav { gap: 16px; background: rgb(var(--ink-rgb) / 0.9); border-color: var(--division-line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .division-desktop-nav { display: none; }
  .division-eco-dock { display: none; }
  .division-menu-toggle { display: inline-flex; }
  .division-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 32px; }
  .division-hero-title { font-size: 66px; }
  .division-hero-title.is-long { font-size: 42px; }
  .division-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .division-card { padding: 24px; }
  .division-two-column, .division-contact-grid { gap: 36px; }
  .division-lifecycle { gap: 18px; }
}
@media (max-width: 759px) {
  .division-wrap { padding-inline: 24px; }
  .division-nav { height: 72px; padding-inline: 20px; gap: 12px; }
  .division-brand { gap: 12px; }
  .division-brand img { width: 72px; height: 36px; }
  .division-brand > span { font-size: 11px; max-width: 124px; padding-inline-start: 12px; line-height: 1.55; }
  .division-nav-actions { gap: 8px; }
  .division-nav-contact { display: none; }
  .division-section { padding-block: 64px !important; scroll-margin-top: 32px; }
  .division-hero { padding-top: 112px !important; padding-bottom: 56px !important; }
  .division-hero-grid, .division-two-column, .division-governance-layout, .division-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .division-eyebrow { font-size: 10px; letter-spacing: 0.09em; }
  .division-hero-title { font-size: 58px; margin-top: 24px; }
  .division-hero-title.is-long { font-size: clamp(32px, 9.4vw, 50px); }
  .division-hero-tagline { font-size: 26px; line-height: 1.4; margin-top: 15px; text-wrap: pretty; }
  .division-hero-description { font-size: 16px; line-height: 1.8; margin-top: 22px; }
  .division-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
  .division-hero-actions .division-button { padding-inline: 13px; min-height: 52px; gap: 9px; font-size: 12px; }
  .division-profile-link { grid-column: 1 / -1; justify-content: center; }
  .division-hero-facts { margin-top: 21px; padding-top: 20px; }
  .division-hero-facts > div { padding-inline: 12px; }
  .division-hero-facts dt { font-size: calc(12px * var(--read)); }
  .division-hero-facts dd { font-size: calc(16px * var(--read)); line-height: 1.65; }
  .division-glance { padding: 24px; border-radius: 18px; }
  .division-glance h2 { font-size: 23px; max-width: 270px; margin-top: 20px; }
  .division-glance-list { margin-top: 20px; }
  .division-glance-list li { padding-block: 15px; font-size: calc(13px * var(--read)); }
  .division-glance-footer { padding-top: 18px; }
  .division-section-header h2 { font-size: 31px; line-height: 1.2; margin-top: 16px; }
  .division-section-header p { margin-top: 19px; font-size: 16px; line-height: 1.8; }
  .division-divider { font-size: 10px; gap: 12px; }
  .division-overview-points { padding-top: 0; }
  .division-point { padding-block: 20px; gap: 17px; }
  .division-point p { font-size: calc(15px * var(--read)); }
  .division-card-grid { gap: 14px; margin-top: 30px; }
  .division-capabilities, .division-outcomes, .division-governance-cards { grid-template-columns: minmax(0, 1fr); }
  .division-card { padding: 24px; border-radius: 14px; }
  .division-card h3 { font-size: 19px; }
  .division-card p { font-size: calc(15px * var(--read)); margin-top: 10px; }
  .division-capability-card h3 { margin-top: 15px; }
  .division-lifecycle { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 32px; }
  .division-lifecycle li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 20px; padding: 0 0 30px; border: 0; }
  .division-lifecycle li:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 20px; top: 49px; bottom: 7px; width: 1px; background: var(--division-line); }
  .division-lifecycle li:last-child { padding-bottom: 0; }
  .division-lifecycle h3 { font-size: 20px; margin-top: 6px; }
  .division-lifecycle p { margin-top: 9px; font-size: calc(15px * var(--read)); }
  .division-outcome h3 { font-size: 26px; }
  /* Narrower rails: the logos and chips come down with the rest of the page. */
  .eco-rail { margin-top: 26px; }
  .eco-logo-wrap { margin: 0 24px; }
  .eco-logo { height: 32px; max-width: 132px; }
  .eco-chip { padding: 11px 17px; font-size: calc(13px * var(--read)); }
  .division-governance-layout { margin-top: 30px; gap: 22px; }
  .division-governance-cards { margin-top: 0; }
  .division-engagement > h3 { font-size: 24px; }
  .division-contact-grid { margin-top: 32px; gap: 35px; }
  .division-contact-form { padding: 24px 20px; border-radius: 16px; }
  .division-form-fields { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .division-form-submit { width: 100%; }
  .division-contact-channels > a { min-height: 77px; padding-block: 18px; }
  .division-footer { padding-block: 28px 110px; }
  .division-footer > .division-wrap { flex-direction: column; gap: 20px; }
  .division-footer > .division-wrap > div { flex-direction: column; gap: 8px; }
}
@media (max-width: 359px) {
  .division-wrap, .division-nav { padding-inline: 18px; }
  .division-brand > span { max-width: 96px; font-size: 10px; }
  .division-nav-actions { gap: 6px; }
  .division-language, .division-menu-toggle { padding-inline: 9px; }
  .division-hero-actions { grid-template-columns: minmax(0, 1fr); }
  .division-hero-actions .division-button { font-size: 13px; }
  .division-section-header h2 { font-size: 29px; }
  .division-mobile-menu { padding: 20px; }
}
html[data-division][dir="rtl"] :is(.division-hero-title, .division-hero-tagline, .division-section-header h2, .division-glance h2) { font-family: var(--font-ar-display); line-height: 1.4; }
html[data-division][dir="rtl"] .division-hero-title { line-height: 1.25; }
html[data-division][dir="rtl"] .division-hero-title.is-long { font-size: clamp(32px, 4vw, 58px); }
@media (max-width: 759px) {
  html[data-division][dir="rtl"] .division-hero-title.is-long { font-size: clamp(32px, 8.8vw, 43px); }
  html[data-division][dir="rtl"] .division-hero-tagline { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .division-button, .division-nav, .division-capability-card { transition: none; }
  .division-button:hover { transform: none; }
}

/* ── No-JavaScript fallback ─────────────────────────────────────────────────
   Real content inside #root, replaced by React on mount. It is what a crawler
   reads and what a visitor sees if the scripts cannot run. Deliberately styled
   from this stylesheet and not from Tailwind utilities: Tailwind arrives as a
   script too, so a fallback built on it would be unstyled exactly when needed. */
.division-fallback { max-width: 78ch; margin: 0 auto; padding: 96px 24px 64px; color: var(--pearl); }
.division-fallback .df-eyebrow { margin: 0 0 12px; color: var(--cyan); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.division-fallback .df-title { margin: 0 0 12px; font-size: clamp(32px, 6vw, 52px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.division-fallback .df-tagline { margin: 0 0 24px; font-size: clamp(19px, 3vw, 25px); font-weight: 400; line-height: 1.45; }
.division-fallback .df-lead { margin: 0 0 16px; color: var(--division-muted); font-size: 16px; line-height: 1.7; }
.division-fallback .df-h2 { margin: 44px 0 18px; font-size: 21px; font-weight: 500; }
.division-fallback .df-caps { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.division-fallback .df-caps li { padding: 16px 18px; border: 1px solid var(--division-line); border-radius: 12px; background: rgb(var(--pearl-rgb) / 0.03); }
.division-fallback .df-caps strong { display: block; margin-bottom: 6px; font-weight: 500; }
.division-fallback .df-caps span { color: var(--division-muted); font-size: 15px; line-height: 1.65; }
.division-fallback .df-sectors { margin: 28px 0 0; color: var(--division-muted); font-size: 14px; line-height: 1.7; }
.division-fallback .df-contact { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--division-line); }
.division-fallback .df-contact p { margin: 0 0 10px; font-size: 15px; }
.division-fallback .df-contact span { display: inline-block; min-width: 9.5em; color: var(--division-muted); }
.division-fallback .df-contact a { color: var(--cyan); text-decoration: none; }
.division-fallback .df-contact a:hover { text-decoration: underline; }
.division-fallback .df-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 32px 0 0; }
.division-fallback .df-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--division-line); border-radius: 9px; color: var(--pearl); font-size: 13px; text-decoration: none; }
.division-fallback .df-links a:hover { border-color: var(--cyan); color: var(--cyan); }
.division-fallback .df-foot { margin: 36px 0 0; color: var(--division-muted); font-size: 12px; }


/* Stands in for the hidden reCAPTCHA badge — see the note in consent.css.
   Quiet, but it has to stay visible: it is the reason hiding the badge is
   allowed at all. */
.division-form-recaptcha {
  margin: 10px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--division-muted, #8aa);
  opacity: 0.75;
}


/* ── FIRST PAINT ──────────────────────────────────────────────────────────
   These pages are rendered entirely in the browser, and #root ships with the
   no-JS fallback inside it — bare text, no header, no layout. That fallback is
   the page's resilience and its crawlable copy, so it stays; what it must not
   be is the first thing a visitor sees for the second or so the app takes to
   mount. Opening a division looked like arriving at a broken page.

   So the fallback is covered while the app boots. Only while: the overlay is
   hidden by default, which means a browser that never runs the inline script
   in the head — no JS, a crawler — is left with exactly the page it had
   before, uncovered.

   It needs nothing of its own to be correct: palette-default.css keys the
   division's --ink and --cyan off html[data-division], server-rendered, so the
   right colour is on screen in the first frame rather than after theme.js.

   #root fades rather than being made visible, so assistive technology can
   still reach the fallback's real content underneath while this is up. */
.division-boot {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; gap: 22px;
  background: var(--ink, #04070f);
  opacity: 0; visibility: hidden;
}
html.division-booting .division-boot { opacity: 1; visibility: visible; }
html.division-booting #root { opacity: 0; }

.division-boot-inner { display: grid; justify-items: center; gap: 20px; }
.division-boot img { width: 96px; height: 48px; object-fit: contain; opacity: 0.92; }
.division-boot-bar {
  position: relative; width: 132px; height: 2px; border-radius: 2px;
  background: rgb(var(--cyan-rgb, 94 234 212) / 0.16); overflow: hidden;
}
.division-boot-bar::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 42%;
  border-radius: 2px; background: var(--cyan, #5EEAD4);
  box-shadow: 0 0 12px var(--cyan, #5EEAD4);
  animation: division-boot-slide 1.15s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes division-boot-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(345%); }
}

/* Revealed. The overlay's visibility is delayed by the fade so it cannot keep
   taking pointer events after it has gone. */
html.division-ready .division-boot {
  opacity: 0; visibility: hidden;
  transition: opacity 420ms var(--ease, ease), visibility 0s 420ms;
}
html.division-ready #root { opacity: 1; transition: opacity 420ms var(--ease, ease); }

@media (prefers-reduced-motion: reduce) {
  .division-boot-bar::after { animation: none; width: 100%; }
  html.division-ready .division-boot,
  html.division-ready #root { transition: none; }
}