/* ==========================================================================
   Adovvy V4 — reset, type, buttons, header, menus, footer
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* fallback first */
  overflow-x: clip;   /* clip never creates a scroll container, so sticky survives */
}

/* Smooth scrolling is applied per jump in JS, never globally: a global
   scroll-behavior fights ScrollTrigger's measurements. */

/* A link from another page lands its section under the fixed header, the
   same distance the in-page links scroll to (see wireAnchors). */
[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

body {
  background: var(--white);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(72, 87, 194, .18); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.icon { width: 1em; height: 1em; display: block; flex: none; fill: currentColor; }

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 300;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-sm);
  padding: 12px 18px;
  font: 600 14px/1 var(--font);
  transition: top var(--t-fast) var(--ease-out);
}
.skip:focus-visible { top: 12px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.page { position: relative; z-index: 1; }

/* --- Shell and sections -------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.section { position: relative; }
.section--pad { padding-block: var(--section); }
.section--sand { background: var(--sand); }
.section--deep { background: var(--deep); color: var(--on-deep); }

/* --- Type ------------------------------------------------------------------
   Headlines are the serif, at its one weight, set large with tight leading.
   Italic is the emphasis device: one or two words per headline, never more. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  font: 600 var(--fs-kicker)/1 var(--font);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  opacity: .6;
}
.section--deep .kicker { color: var(--accent-lift); }

.display,
.h1,
.h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--w-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
  color: var(--ink);
}
.h1 { font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -.04em; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; }
.section--deep .h1,
.section--deep .h2 { color: var(--on-deep); }
/* Titles are one colour: the emphasised words keep the title's own colour
   (black on light sections, white on dark ones). */
.h1 em,
.h2 em { font-style: normal; color: inherit; }

.h3 {
  margin: 0;
  font: 600 var(--fs-h3)/1.25 var(--font);
  letter-spacing: -.015em;
  color: var(--ink);
}
.lede {
  margin: 22px 0 0;
  font: 400 var(--fs-lede)/1.62 var(--font);
  color: var(--body);
  text-wrap: pretty;
}
.section--deep .lede { color: var(--on-deep-2); }
.sub {
  margin: 14px 0 0;
  font: 500 clamp(18px, 1.6vw, 22px)/1.4 var(--font);
  color: var(--ink-2);
}
.measure-40 { max-width: 40ch; }
.measure-48 { max-width: 48ch; }
.measure-52 { max-width: 52ch; }
.measure-58 { max-width: 58ch; }
.center { text-align: center; margin-inline: auto; }
.center .lede { margin-inline: auto; }

/* Split text: headlines assemble word by word as their section arrives. */
.split { display: inline; }
.split .w {
  display: inline-block;
  white-space: pre;
  padding: .12em .03em .2em;
  margin: -.12em -.03em -.2em;
}
.split .c { display: inline-block; }
.split .w.em { font-style: normal; color: inherit; }
.split--rise .w {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * .42em));
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: 600 14.5px/1 var(--font);
  white-space: nowrap;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out);
}
.btn .icon { font-size: 17px; transition: transform var(--t-med) var(--ease-soft); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

/* The sheen that crosses a button on hover. */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -14px rgba(72, 87, 194, .9); }
.btn--primary:hover { background: var(--accent-ink); box-shadow: 0 16px 30px -14px rgba(72, 87, 194, .95); }
.btn--secondary { background: var(--card); color: var(--ink); border-color: var(--line-2); }
.btn--secondary:hover { border-color: var(--line-strong); background: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--green { background: var(--green); color: #07301A; }
.btn--green:hover { background: #3ed872; }
.btn--ghost-deep { color: var(--on-deep); border-color: rgba(244, 242, 238, .26); }
.btn--ghost-deep:hover { border-color: rgba(244, 242, 238, .6); }
.btn--lg { min-height: 54px; padding: 16px 28px; font-size: 15.5px; }
.btn--text { padding-inline: 4px; min-height: 0; border-radius: 6px; background: none; color: var(--ink); font-weight: 600; }
.btn--text::after { display: none; }
.btn--text:hover { color: var(--accent); }

/* --- Header ---------------------------------------------------------------
   Outside .page on purpose: a sticky element only sticks within its parent,
   and the footer lives outside .page. */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.4) blur(18px);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out);
}
.is-scrolled .header,
.mega-open .header,
.menu-open .header { border-bottom-color: var(--line); background: rgba(255, 255, 255, .97); }

/* --- The header over the hero film (opt-in: .header--overlay) ---------------
   While the hero card is beneath it the header is transparent (core.js keeps
   html.header-over in step), and it turns back into the normal header as
   soon as the card has scrolled past it, and whenever a menu is open, so a
   panel never opens under see-through type. Its type follows the picture:
   white over the night shots, the site's own ink once the journey reaches
   the light ones (the hero sets html.hero-light at that moment). */
@media (min-width: 901px) {
  .header--overlay .nav__trigger,
  .header--overlay .nav__link,
  .header--overlay .nav__login,
  .header--overlay .nav__toggle,
  .header--overlay .btn--secondary { transition: color var(--t-med) var(--ease-out), background-color var(--t-med) var(--ease-out), border-color var(--t-med) var(--ease-out); }
  .header--overlay .nav__logo img { transition: filter var(--t-med) var(--ease-out); }
  html.header-over:not(.menu-open):not(.mega-open) .header--overlay {
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html.header-over:not(.menu-open):not(.mega-open) .header--overlay .header__progress { opacity: 0; }

  html.header-over:not(.hero-light):not(.menu-open):not(.mega-open) .header--overlay .nav__logo img { filter: brightness(0) invert(1); }
  html.header-over:not(.hero-light):not(.menu-open):not(.mega-open) .header--overlay .nav__trigger,
  html.header-over:not(.hero-light):not(.menu-open):not(.mega-open) .header--overlay .nav__link,
  html.header-over:not(.hero-light):not(.menu-open):not(.mega-open) .header--overlay .nav__login,
  html.header-over:not(.hero-light):not(.menu-open):not(.mega-open) .header--overlay .nav__toggle { color: #fff; }
  html.header-over:not(.hero-light):not(.menu-open):not(.mega-open) .header--overlay .nav__trigger:hover,
  html.header-over:not(.hero-light):not(.menu-open):not(.mega-open) .header--overlay .nav__link:hover,
  html.header-over:not(.hero-light):not(.menu-open):not(.mega-open) .header--overlay .nav__toggle:hover { background: rgba(255, 255, 255, .14); color: #fff; }
  html.header-over:not(.hero-light):not(.menu-open):not(.mega-open) .header--overlay .btn--secondary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .34); color: #fff; }
}

.header__progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--page-progress, 0));
  transform-origin: 0 50%;
  background: var(--accent);
  will-change: transform;
}

.nav {
  max-width: var(--shell);
  height: var(--header-h);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 2.6vw, 40px);
}
/* The header widens with a full-width hero, so the logo lines up with the
   headline and the buttons with the conversation. */
.header--wide .nav { max-width: none; padding-inline: var(--wide-gutter, var(--gutter)); }
.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { height: 26px; width: auto; }

.nav__items {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__item { display: flex; align-items: center; }
.nav__trigger,
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font: 500 14.5px/1 var(--font);
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.nav__trigger:hover,
.nav__link:hover,
.nav__trigger[aria-expanded="true"] { background: rgba(23, 23, 43, .055); color: var(--ink); }
.nav__chev { font-size: 14px; transition: transform var(--t-med) var(--ease-out); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.nav__spacer { flex: 1; }
.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__login {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  height: 40px;
  font: 500 14.5px/1 var(--font);
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease-out);
}
.nav__login .icon { font-size: 18px; }
.nav__login:hover { color: var(--accent); }
.nav__actions .btn { min-height: 40px; padding: 10px 17px; font-size: 14px; }

/* --- The mega panels (desktop) -------------------------------------------
   Two columns, in the pattern the references share: large items with an
   icon tile and a line of description on the left, a grouped list on the
   right, and one featured link across the foot. Opens on hover with a
   little intent, and on click for touch and keyboard. */
.mega {
  position: absolute;
  top: 100%;
  left: -18px;
  width: min(880px, calc(100vw - 2 * var(--gutter)));
  padding-top: 10px; /* a bridge the pointer can cross without closing */
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
  pointer-events: none;
}
.nav__item.is-open > .mega {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity .22s var(--ease-out), transform .3s var(--ease-out), visibility 0s;
}
.mega__panel {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  box-shadow: var(--e-4);
  overflow: hidden;
}
.mega__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
.mega__main { padding: 14px; display: grid; gap: 4px; }
.mega__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px;
  border-radius: var(--r-lg);
  transition: background-color var(--t-fast) var(--ease-out);
}
.mega__card:hover,
.mega__card:focus-visible { background: var(--paper); }
.mega__tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--sand);
  color: var(--ink);
  font-size: 22px;
  transition: background-color var(--t-med) var(--ease-out), color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-soft);
}
.mega__card:hover .mega__tile { background: var(--accent); color: #fff; transform: rotate(-4deg); }
.mega__text b {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 15.5px/1.3 var(--font);
  color: var(--ink);
}
.mega__text b .icon { font-size: 15px; opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast), transform var(--t-med) var(--ease-soft); }
.mega__card:hover .mega__text b .icon { opacity: 1; transform: none; color: var(--accent); }
.mega__text span {
  display: block;
  margin-top: 4px;
  font: 400 13.5px/1.5 var(--font);
  color: var(--muted);
}
.mega__subs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
/* .mega__text span makes every span in a card a block; the row of tags
   keeps its own layout, so its tags space out and wrap as whole tags. */
.mega__text .mega__subs { display: flex; margin-top: 10px; }
.mega__subs a {
  padding: 5px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap; /* a longer name moves to the next line whole */
  border: 1px solid var(--line-2);
  font: 500 12.5px/1 var(--font);
  color: var(--ink-2);
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.mega__subs a:hover { border-color: var(--accent-soft); color: var(--accent-ink); background: var(--accent-tint); }

.mega__side {
  padding: 26px 26px 22px;
  background: var(--paper);
  border-left: 1px solid var(--line);
}
.mega__heading {
  margin: 0 0 14px;
  font: 600 11.5px/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.mega__hlink, .mnav__hlink { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; transition: color .2s; }
.mega__hlink .icon, .mnav__hlink .icon { font-size: 13px; transition: transform .2s; }
.mega__hlink:hover, .mnav__hlink:hover { color: var(--accent); }
.mega__hlink:hover .icon { transform: translateX(2px); }
.footer__h a { color: inherit; text-decoration: none; }
.footer__h a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* A heading that is also a link keeps the heading's look (the footer's link style is bigger and white). */
.footer__col .footer__h a { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.footer__col .footer__h a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
.mega__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px;
  margin-inline: -8px;
  border-radius: 12px;
  font: 500 14.5px/1.2 var(--font);
  color: var(--ink);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.mega__list a:hover { background: var(--card); color: var(--accent-ink); }
.mega__mini {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 17px;
  flex: none;
}
.mega__mini img { width: 17px; height: 17px; }
.mega__list small { display: block; margin-top: 2px; font: 400 12.5px/1.3 var(--font); color: var(--muted); }

.mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 26px;
  border-top: 1px solid var(--line);
  font: 500 14px/1.4 var(--font);
  color: var(--ink-2);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.mega__foot b { color: var(--ink); font-weight: 600; }
.mega__foot .icon { font-size: 18px; transition: transform var(--t-med) var(--ease-soft); }
.mega__foot:hover { background: var(--paper); color: var(--ink); }
.mega__foot:hover .icon { transform: translateX(4px); color: var(--accent); }

/* A quiet dim over the page while a panel is open, below the header. */
.mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(23, 23, 43, .16);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease-out), visibility 0s linear .25s;
  pointer-events: none;
}
.mega-open .mega-scrim { opacity: 1; visibility: visible; transition: opacity .25s var(--ease-out), visibility 0s; }

/* --- Mobile menu ------------------------------------------------------------
   Below 1024px the bar keeps the logo, one button and the menu button. The
   sheet under the header holds the same sitemap, with Platform and Solutions
   as accordions, and every call to action at the foot. */
.nav__toggle,
.nav__menu { display: none; }

@media (max-width: 1024px) {
  .nav { gap: 12px; }
  .nav__items,
  .nav__login,
  .nav__actions .btn--secondary { display: none; }

  .nav__toggle {
    display: grid;
    place-items: center;
    align-self: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__toggle:hover { background: rgba(23, 23, 43, .055); }
  .nav__bars { position: relative; display: block; width: 20px; height: 14px; }
  .nav__bars i {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: top .3s var(--ease-out), transform .3s var(--ease-out), opacity .2s var(--ease-out);
  }
  .nav__bars i:nth-child(1) { top: 0; }
  .nav__bars i:nth-child(2) { top: 6px; }
  .nav__bars i:nth-child(3) { top: 12px; }
  .menu-open .nav__bars i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .menu-open .nav__bars i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .menu-open .nav__bars i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  /* Absolute against the sticky header, because the header's backdrop-filter
     makes it the containing block for fixed descendants anyway. Its own
     near-opaque ground, because a nested backdrop-filter only sees what is
     inside the header, not the page behind it. */
  .nav__menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    padding: 8px var(--gutter) max(22px, env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .24s var(--ease-out), transform .32s var(--ease-out), visibility 0s linear .32s;
  }
  .menu-open .nav__menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .24s var(--ease-out), transform .32s var(--ease-out), visibility 0s;
  }

  .mnav { display: grid; }
  .mnav__group,
  .mnav__link { border-bottom: 1px solid var(--line); }
  .mnav__head,
  .mnav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 2px;
    border: 0;
    background: none;
    font: 600 clamp(21px, 5.6vw, 26px)/1.15 var(--display);
    letter-spacing: -.02em;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }
  .mnav__head .icon,
  .mnav__link .icon { font-size: 20px; color: var(--muted); transition: transform var(--t-med) var(--ease-out); }
  .mnav__head[aria-expanded="true"] .icon { transform: rotate(180deg); color: var(--accent); }

  /* Height by grid rows, 0fr to 1fr: smooth, and nothing to measure. */
  .mnav__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .34s var(--ease-out);
  }
  .mnav__group.is-open .mnav__panel { grid-template-rows: 1fr; }
  .mnav__panel > div { overflow: hidden; }
  .mnav__panel ul { list-style: none; margin: 0; padding: 0 0 16px; display: grid; gap: 2px; }
  .mnav__panel a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 2px;
    font: 500 16px/1.25 var(--font);
    color: var(--ink);
  }
  .mnav__panel a small { display: block; font: 400 13px/1.35 var(--font); color: var(--muted); }
  .mnav__panel .mega__mini { width: 36px; height: 36px; }
  /* The desktop menu's industry tags, under Industries, lined up with the
     row's words and big enough for a finger. */
  .mnav__panel .mega__subs { margin: -4px 0 8px 49px; }
  .mnav__panel .mega__subs a { display: inline-flex; padding: 9px 13px; font: 500 14px/1 var(--font); color: var(--ink-2); }
  .mnav__label {
    margin: 10px 0 4px;
    font: 600 11px/1 var(--font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .nav__menuActions {
    margin-top: auto;
    padding-top: 26px;
    display: grid;
    gap: 10px;
  }
  .nav__menuActions .btn { width: 100%; }
  .nav__menuActions .mnav__login { justify-self: center; margin-top: 4px; font: 600 15px/1 var(--font); color: var(--ink-2); padding: 12px; }

  .mnav > *,
  .nav__menuActions {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .28s var(--ease-out), transform .38s var(--ease-out);
  }
  .menu-open .mnav > *,
  .menu-open .nav__menuActions {
    opacity: 1;
    transform: none;
    transition-delay: calc(.05s + var(--i, 0) * .045s);
  }
}

@media (max-width: 420px) {
  .nav__actions .btn { padding-inline: 14px; }
}

/* No scrolling the page underneath an open menu -- on the ROOT only.
   `overflow: hidden` on body makes body a scroll container, and the sticky
   header then sticks to body instead of the screen: open the menu anywhere
   below the top and the header, the sheet and the close button all jump to
   the top of the document. That froze the V3 site. */
html.menu-open { overflow: hidden; }

/* --- Footer -------------------------------------------------------------
   After Ada's: a near-black ground, the sitemap in six plain columns, a
   middle row that makes the two asks (talk to us, hear from us), and a foot
   with who we are on one side and the social and legal links on the other. */
.footer {
  position: relative;
  z-index: 1;
  background: var(--night);
  color: var(--on-deep-2);
  padding-top: clamp(64px, 9vh, 104px);
}
.footer__h {
  margin: 0 0 18px;
  font: 600 11px/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-deep-3);
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 36px 24px;
  padding-bottom: clamp(48px, 7vh, 72px);
}
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__col a {
  width: fit-content;
  font: 500 14.5px/1.35 var(--font);
  color: rgba(255, 255, 255, .86);
  transition: color var(--t-fast) var(--ease-out);
}
.footer__col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .35); }

.footer__mid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px clamp(40px, 6vw, 96px);
  padding-block: clamp(36px, 5vh, 52px);
  border-top: 1px solid var(--line-deep);
  border-bottom: 1px solid var(--line-deep);
}
.footer__talk p { margin: 0; max-width: 44ch; font: 400 15px/1.6 var(--font); color: var(--on-deep-2); }
.footer__phones { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.footer__phones a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font: 600 14px/1 var(--font);
  color: #fff;
  transition: background-color var(--t-med) var(--ease-out), border-color var(--t-med);
}
.footer__phones a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); }
.footer__phones small { font: 600 10.5px/1 var(--font); letter-spacing: .12em; color: var(--on-deep-3); }
.footer__newsRow { display: flex; gap: 10px; }
.footer__newsRow input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  font: 400 15px/1 var(--font);
  color: #fff;
  transition: border-color var(--t-med), background-color var(--t-med);
}
.footer__newsRow input::placeholder { color: var(--on-deep-3); }
.footer__newsRow input:focus { outline: none; border-color: var(--accent-lift); background: rgba(255, 255, 255, .09); }
.footer__news.is-invalid input { border-color: #FF8E8E; }
.footer__newsRow .btn { flex: none; height: 50px; }
.footer__newsMsg { min-height: 1.5em; margin: 10px 0 0; font: 500 13px/1.5 var(--font); color: var(--on-deep-3); }
.footer__news.is-invalid .footer__newsMsg { color: #FFB4B4; }
.footer__news.is-done .footer__newsMsg { color: var(--green); }

.footer__base {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px clamp(40px, 6vw, 96px);
  align-items: end;
  padding-block: clamp(36px, 5vh, 52px) clamp(28px, 4vh, 40px);
}
.footer__who p { margin: 0; max-width: 52ch; font: 400 15px/1.6 var(--font); color: var(--on-deep-2); }
.footer__end { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.footer__social a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med);
}
.footer__social a:hover { transform: translateY(-3px); box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6); }
.footer__social svg,
.footer__social img { width: 20px; height: 20px; display: block; }
.ico-in { color: #0A66C2; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 22px;
  font: 400 13px/1.5 var(--font);
  color: var(--on-deep-3);
}
.footer__legal a { transition: color var(--t-fast); }
.footer__legal a:hover { color: #fff; }

@media (max-width: 1100px) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  .footer__mid,
  .footer__base { grid-template-columns: minmax(0, 1fr); }
  .footer__end { align-items: flex-start; }
  .footer__legal { justify-content: flex-start; }
}
@media (max-width: 420px) {
  .footer__newsRow { flex-direction: column; }
  .footer__newsRow .btn { width: 100%; }
}

/* --- Reduced motion --------------------------------------------------------
   Every transition and animation collapses to nothing, and anything a scene
   would have hidden until it arrived is simply there. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .split .w,
  .split .c { opacity: 1 !important; transform: none !important; }
}

/* Inner pages (19 Oct): the logo strip sits in equal space above and below.
   A plain hero before it drops its bottom padding so the strip's own
   padding sets both gaps. */
.page-home.page-sub .logos { padding-block: clamp(56px, 6vw, 80px); border-bottom: 0; }
.page-sub main > .section:not(.section--deep):not(.section--sand):not(.dm-hero):has(+ .logos) { padding-bottom: 0; }