/* ==========================================================================
   Header, mega menu, hero, footer.
   Behaviour (click to open, hover enhancement, Escape to close, aria state,
   mobile drawer) preserved from the approved navigation reference file.
   ========================================================================== */

/* ------------------------------------------------------------ announce */

/* Measured against the two sites Piyush benchmarked, 18 August 2026:
     zip.com      16px / weight 500 / 40px bar / indigo on pale blue
     orolabs.ai   16px / weight 500 / 60px bar / white on bright blue
     us, before   13px / weight 500 / 40px bar / white on near-black navy

   Two problems, not one. The type was 19% smaller than both. And the bar was
   --navy-night, which is within a few percent of the dark hero directly below
   it — so on the homepage it did not read as a bar at all, just as more hero.
   Internal pages have a white header so it read fine there, which is why this
   only ever looked wrong on the front page.

   Now 16px to match, a taller bar so the type has air, and a hairline under it
   that separates it from the hero without adding a second colour. */
.announce {
  background: var(--navy-night);
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  min-height: var(--bar-h);
  padding-block: 12px;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  position: relative;
  z-index: 120;
}

.announce a {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.announce a:hover {
  color: var(--green);
}

.announce .ar {
  color: var(--green);
  transition: transform var(--t) var(--ease);
}

.announce a:hover .ar {
  transform: translateX(4px);
}

@media (max-width: 700px) {
  /* The line is 55 characters. At 16px it needs two lines on a phone, which is
     fine — the bar grows rather than the type shrinking to fit. */
  .announce {
    padding-inline: 16px;
    padding-block: 10px;
    font-size: 0.9375rem;
    text-wrap: balance;
  }
}

/* -------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 110;
  transition:
    background-color var(--t-slow) var(--ease),
    border-color var(--t-slow) var(--ease),
    box-shadow var(--t-slow) var(--ease);
  background: transparent;
  border-bottom: 1px solid transparent;
}

/* Solid state: used on every non-hero page, and on hero pages after scroll. */
.site-header.solid,
body:not(.has-hero) .site-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 34px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  position: relative;
}

/* The logo was 28px — 38% of the header, where the normal band for a wordmark
   is 45-55%. Two independent readers called it too small.
   
   It cannot simply be set larger. The mark is a 5.4:1 wordmark, so every 1px
   of height costs 5.4px of WIDTH, and the header already carries five mega-menu
   items, Log in and the CTA. A flat 40px would add 65px and crowd the nav at
   the narrow end.
   
   So it scales with the viewport instead. At the breakpoint where the full nav
   still shows it holds at 30px — barely more than before, and safe. On a normal
   desktop it reaches 40px, which is the size the brand should have been all
   along. The header grew 4px to keep the ratio at roughly half. */
.brand img {
  height: clamp(30px, 2.4vw, 40px);
  width: auto;
  transition: opacity var(--t-slow) var(--ease);
}

@media (max-width: 700px) {
  .brand img {
    height: 32px;
  }
}

.brand .logo-dark {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.site-header.solid .brand .logo-dark,
body:not(.has-hero) .brand .logo-dark {
  opacity: 1;
}

.site-header.solid .brand .logo-light,
body:not(.has-hero) .brand .logo-light {
  opacity: 0;
}

@media (max-width: 960px) {
  .brand img {
    height: 25px;
  }
}

/* nav */

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: -6px;
}

.nav-item {
  position: static;
}

.nav-trigger,
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: rgba(255, 255, 255, 0.9);
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color var(--t) var(--ease),
    background-color var(--t) var(--ease);
}

.site-header.solid .nav-trigger,
.site-header.solid .nav-link,
body:not(.has-hero) .nav-trigger,
body:not(.has-hero) .nav-link {
  color: var(--ink-2);
}

.nav-trigger:hover,
.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.site-header.solid .nav-trigger:hover,
.site-header.solid .nav-link:hover,
body:not(.has-hero) .nav-trigger:hover,
body:not(.has-hero) .nav-link:hover {
  color: var(--navy-deep);
  background: var(--bg-alt);
}

.nav-item.open .nav-trigger {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.site-header.solid .nav-item.open .nav-trigger,
body:not(.has-hero) .nav-item.open .nav-trigger {
  background: var(--bg-alt);
  color: var(--navy-deep);
}

.nav-link.current::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
}

.caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  opacity: 0.65;
  transition: transform var(--t) var(--ease-io);
}

.nav-item.open .caret {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.header-utils {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.util-link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 4px;
}

.site-header.solid .util-link,
body:not(.has-hero) .util-link {
  color: var(--ink-2);
}

.util-link:hover {
  color: #fff;
}

.site-header.solid .util-link:hover,
body:not(.has-hero) .util-link:hover {
  color: var(--navy-deep);
}

.header-cta {
  background: #fff;
  color: var(--navy-deep);
  border-color: #fff;
}

.header-cta:hover {
  background: #fff;
  color: var(--navy-deep);
}

.site-header.solid .header-cta,
body:not(.has-hero) .header-cta {
  background: var(--navy-deep);
  color: #fff;
  border-color: var(--navy-deep);
}

.site-header.solid .header-cta:hover,
body:not(.has-hero) .header-cta:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* --------------------------------------------------------- mega menu */

/* Positioned against the header (a sticky, therefore positioned, ancestor)
   rather than the narrow nav item, so wide panels stay inside the viewport. */
.mega {
  position: absolute;
  top: calc(var(--header-h) + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 90;
  width: min(1120px, calc(100vw - 48px));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 34px 34px 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t) var(--ease),
    transform var(--t) var(--ease),
    visibility var(--t) linear;
}

.mega.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 40px;
  padding-bottom: 30px;
}

.mega-cols.c2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
}

.mega-group-title {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.mega-list li + li {
  margin-top: 2px;
}

.mega-list a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  padding: 10px 12px;
  margin-left: -12px;
  border-radius: var(--radius);
  color: var(--ink-2);
  transition: background-color var(--t-fast) var(--ease);
}

.mega-list a:hover {
  background: var(--bg-alt);
  color: var(--ink-2);
}

.mega-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--info-bg);
  color: var(--navy);
  display: grid;
  place-items: center;
  transition:
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.mega-ico svg {
  width: 18px;
  height: 18px;
}

.mega-list a:hover .mega-ico {
  background: var(--green-tint);
  color: var(--green-deeper);
}

.mega-label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-deep);
  display: block;
  line-height: 1.35;
}

.mega-note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}

.mega-foot {
  border-top: 1px solid var(--line);
  margin-inline: -34px;
  padding: 20px 34px;
  background: var(--bg-alt);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.mega-foot-text {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-deep);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.mega-foot-text:hover {
  color: var(--green-deeper);
}

.mega-foot-text .ar {
  transition: transform var(--t) var(--ease);
}

.mega-foot-text:hover .ar {
  transform: translateX(4px);
}

/* --------------------------------------------------------- mobile nav */

.nav-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: transparent;
  padding: 9px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.site-header.solid .nav-toggle,
body:not(.has-hero) .nav-toggle {
  border-color: #d5dbe3;
  color: var(--navy-deep);
}

.bars {
  width: 15px;
  height: 10px;
  position: relative;
}

.bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t) var(--ease-io);
}

.bars span:nth-child(1) {
  top: 0;
}
.bars span:nth-child(2) {
  top: 4.2px;
}
.bars span:nth-child(3) {
  top: 8.4px;
}

.site-header.navopen .bars span:nth-child(1) {
  transform: translateY(4.2px) rotate(45deg);
}
.site-header.navopen .bars span:nth-child(2) {
  transform: scaleX(0);
}
.site-header.navopen .bars span:nth-child(3) {
  transform: translateY(-4.2px) rotate(-45deg);
}

@media (max-width: 1080px) {
  .nav-toggle {
    display: inline-flex;
  }

  .header-inner {
    gap: 14px;
  }

  .nav-panel {
    position: fixed;
    inset: calc(var(--bar-h) + var(--header-h)) 0 0;
    background: #fff;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 22px 60px;
    display: none;
  }

  .site-header.navopen .nav-panel {
    display: block;
  }

  .nav {
    display: block;
    margin: 0;
  }

  .nav-item {
    border-bottom: 1px solid var(--line);
  }

  .nav-trigger,
  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 19px 2px;
    font-size: 1.0625rem;
    color: var(--navy-deep) !important;
    background: none !important;
    border-radius: 0;
  }

  .nav-link.current::after {
    display: none;
  }

  .nav-item {
    position: relative;
  }

  .mega {
    position: static;
    transform: none;
    top: auto;
    width: auto;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 10px;
    opacity: 1;
    visibility: visible;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: none;
  }

  .mega.open {
    display: block;
    transform: none;
  }

  .mega-cols,
  .mega-cols.c2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-bottom: 18px;
    max-width: none;
  }

  .mega-foot {
    margin-inline: 0;
    padding: 18px;
    border-radius: var(--radius);
    flex-direction: column;
    align-items: flex-start;
    border-top: 0;
  }

  .header-utils {
    display: none;
  }

  .nav-panel .mob-utils {
    display: grid;
    gap: 12px;
    padding-top: 28px;
  }
}

@media (min-width: 1081px) {
  .nav-panel {
    display: contents;
  }

  .nav-panel .mob-utils {
    display: none;
  }
}

/* -------------------------------------------------------------- hero */

/* Asymmetric split: the argument on the left, a governed run playing on the
   right. The gradient stops short of white because the hero no longer hands
   off to a full-width stage below it. */

.hero {
  position: relative;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + 76px);
  padding-bottom: 0;
  background:
    radial-gradient(90% 70% at 76% 8%, rgba(88, 185, 71, 0.2), transparent 58%),
    linear-gradient(
      180deg,
      #08182a 0%,
      #0f2740 26%,
      #1b3a5c 56%,
      #35597f 78%,
      #7d97b3 92%,
      #ffffff 100%
    );
  color: #fff;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 66%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 66%);
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 2;
}

.hero h1,
.hero h2 {
  color: #fff;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 56px;
  align-items: center;
  padding-bottom: 112px;
}

.hero-copy .mega-type {
  max-width: 13ch;
  margin-top: 4px;
}

.hero-sub {
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.5;
  max-width: 46ch;
  margin-top: 26px;
}

.hero-cta {
  margin-top: 32px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 7px 16px 7px 10px;
  margin-bottom: 26px;
  backdrop-filter: blur(8px);
}

.hero-eyebrow .pip {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(88, 185, 71, 0.24);
}

.hero-reassure {
  margin-top: 24px;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-reassure::before {
  content: '';
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
}

/* Proof line. Present only because two customer deployments exist. */
.hero-proof {
  display: block;
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  max-width: 46ch;
}

.hero-proof-k {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 6px;
}

.hero-proof-v {
  display: block;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
  transition: color var(--t-fast) var(--ease);
}

.hero-proof:hover .hero-proof-v {
  color: #fff;
}

/* ------------------------------------------------------ hero animation */

.hero-visual {
  position: relative;
}

.hero-live {
  position: relative;
  perspective: 1400px;
}

.hl-orb {
  position: absolute;
  inset: -18% -12% -22% -12%;
  background: radial-gradient(50% 50% at 50% 45%, rgba(88, 185, 71, 0.26), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
  animation: hlOrb 9s var(--ease) infinite alternate;
}

@keyframes hlOrb {
  from { opacity: 0.55; transform: scale(0.94); }
  to   { opacity: 1;    transform: scale(1.06); }
}

.hl-frame {
  position: relative;
  z-index: 2;
  animation: hlRise 0.9s var(--ease) both;
}

@keyframes hlRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hl-req {
  display: flex;
  align-items: center;
  gap: 11px;
}

.hl-req .stamp {
  margin-left: auto;
  font-size: var(--fs-xxs);
  color: var(--faint);
}

.hl-ask {
  margin: 12px 0 18px;
  padding: 13px 16px;
  border-radius: 4px 14px 14px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--navy);
  line-height: 1.5;
}

/* The rail: a vertical line the sequence fills as it plays. */
.hl-rail {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 4px;
  display: grid;
  gap: 15px;
}

.hl-rail::before,
.hl-rail::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
}

.hl-rail::before {
  background: var(--line);
}

.hl-rail::after {
  background: linear-gradient(180deg, var(--green), var(--navy-deep));
  transform-origin: top;
  animation: hlFill 11s linear infinite;
}

@keyframes hlFill {
  0%   { transform: scaleY(0); }
  46%  { transform: scaleY(1); }
  92%  { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

.hl-step {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  opacity: 0.26;
  animation: hlStep 11s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.85s);
}

@keyframes hlStep {
  0%, 3%    { opacity: 0.26; transform: translateY(5px); }
  8%, 84%   { opacity: 1;    transform: none; }
  92%, 100% { opacity: 0.26; transform: translateY(5px); }
}

.hl-dot {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #c9d3de;
  justify-self: center;
  animation: hlDot 11s var(--ease) infinite;
  animation-delay: calc(var(--i) * 0.85s);
}

@keyframes hlDot {
  0%, 4%   { box-shadow: none; }
  8%       { box-shadow: 0 0 0 6px rgba(88, 185, 71, 0.22); }
  16%, 84% { box-shadow: 0 0 0 3px rgba(88, 185, 71, 0.14); }
  92%, 100% { box-shadow: none; }
}

.hl-dot-agent  { border-color: var(--navy-deep); }
.hl-dot-rule   { border-color: var(--green); }
.hl-dot-human  { border-color: #d99a2b; }
.hl-dot-system { border-color: var(--navy-deep); }

.hl-body b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.hl-body span {
  display: block;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.45;
  margin-top: 3px;
}

.hl-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
  margin-top: 2px;
  background: var(--bg-alt);
  color: var(--muted);
  border: 1px solid var(--line);
}

.hl-tag-rule   { background: var(--green-tint); color: var(--green-deeper); border-color: var(--green-line); }
.hl-tag-human  { background: var(--warning-bg); color: var(--warning-text); border-color: rgba(217, 154, 43, 0.35); }

/* Floating cards. Decorative framing for facts stated in the panel itself,
   so they are hidden from assistive technology rather than repeated. */
.hl-float {
  position: absolute;
  z-index: 3;
  width: 232px;
  padding: 13px 15px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

.hl-float-k {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-deeper);
  margin-bottom: 5px;
}

.hl-float-v {
  display: block;
  font-size: var(--fs-xs);
  color: var(--navy);
  line-height: 1.45;
}

.hl-float-a {
  top: 12%;
  right: -34px;
  animation: hlFloat 7s var(--ease) infinite alternate;
}

.hl-float-b {
  bottom: 9%;
  left: -42px;
  animation: hlFloat 8.5s var(--ease) 0.6s infinite alternate-reverse;
}

@keyframes hlFloat {
  from { transform: translateY(-7px); }
  to   { transform: translateY(7px); }
}

@media (max-width: 1240px) {
  .hl-float-a { right: -12px; }
  .hl-float-b { left: -12px; }
}

@media (max-width: 1080px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
    align-items: start;
    padding-bottom: 84px;
  }
  .hero-copy .mega-type {
    max-width: 18ch;
  }
  .hero-visual {
    max-width: 560px;
  }
  .hl-float {
    display: none;
  }
}

@media (max-width: 620px) {
  .hero-grid { padding-bottom: 64px; }
  .hl-step { grid-template-columns: 22px minmax(0, 1fr); }
  .hl-tag { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* Motion is never load-bearing: every step is pinned to its finished state. */
@media (prefers-reduced-motion: reduce) {
  .hl-orb,
  .hl-frame,
  .hl-rail::after,
  .hl-step,
  .hl-dot,
  .hl-float {
    animation: none !important;
  }
  .hl-step {
    opacity: 1;
    transform: none;
  }
  .hl-rail::after {
    transform: scaleY(1);
  }
}

/* Page hero (inner pages) — lighter, no full gradient */

.phero {
  background: linear-gradient(180deg, #f7f9fb 0%, #ffffff 100%);
  padding-top: 56px;
  padding-bottom: 76px;
  border-bottom: 1px solid var(--line);
}

/* -------------------------------------------------------------- footer */

/* Structure follows the approved reference: brand column + four link columns,
   then a newsletter row, then a centred legal bar. Fixed columns rather than
   auto-fit, because the pairing of groups within a column is deliberate. */

.site-footer {
  background: var(--navy-night);
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-sm);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 8% 0%, rgba(27, 58, 92, 0.55), transparent 62%);
  pointer-events: none;
}

.site-footer > * {
  position: relative;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px 28px;
  padding-block: 64px 26px;
  align-items: start;
}

@media (max-width: 1080px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
  }
}

@media (max-width: 560px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-block: 48px 20px;
  }
}

/* The footer logo has no horizontal competition — it sits alone at the head of
   its column — so it takes the size the header cannot. */
.footer-brand img {
  height: 44px;
  width: auto;
  margin-bottom: 20px;
}

.footer-statement {
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--fs-sm);
  line-height: 1.55;
  max-width: 30ch;
  margin-bottom: 8px;
}

.footer-social {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.footer-social a {
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-sm);
  transition: color var(--t-fast) var(--ease);
}

.footer-social a:hover {
  color: #fff;
}

.site-footer .footer-col h2 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.44);
  margin-bottom: 12px;
}

.site-footer .footer-col h2 + ul {
  margin-bottom: 0;
}

.site-footer .footer-col ul + h2 {
  margin-top: 26px;
}

.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-sm);
  line-height: 1.45;
  padding-block: 5px;
  transition: color var(--t-fast) var(--ease);
}

.footer-col a:hover {
  color: #fff;
}

/* Newsletter row */

.footer-news {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px 40px;
  flex-wrap: wrap;
  padding-block: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.footer-news .t {
  font-size: 1.0625rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
}

.footer-news .s {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
  margin-top: 5px;
  max-width: 56ch;
  line-height: 1.55;
}

/* The email field flexes, the button never does. Previously both were
   `flex-wrap: wrap` with a 280px basis on the input, so the button dropped
   to a second line as soon as the column narrowed. */

.footer-news-copy {
  flex: 1 1 340px;
  min-width: 0;
}

.news-form {
  flex: 0 1 480px;
  min-width: 0;
}

.news-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: stretch;
}

.news-row input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-sm);
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.news-row .btn {
  flex: 0 0 auto;
  border-radius: var(--radius);
}

.news-row input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.news-row input:hover,
.news-row input:focus {
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}

.news-status {
  font-size: var(--fs-xs);
  font-weight: 500;
  margin-top: 9px;
}

.news-status.err {
  color: #ffb9ae;
}
.news-status.ok {
  color: var(--green);
}

@media (max-width: 700px) {
  .footer-news {
    flex-direction: column;
  }
  .news-form {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .news-row {
    flex-wrap: wrap;
  }
  .news-row input,
  .news-row .btn {
    flex: 1 1 100%;
  }
}

/* Legal bar */

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.footer-bottom-in {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 20px 28px;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.45);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}

.footer-legal a {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-xs);
  transition: color var(--t-fast) var(--ease);
}

.footer-legal a:hover {
  color: #fff;
}

/* ------------------------------------------------------------ cta band */

.cta-band {
  background: var(--navy-night);
  color: #fff;
  padding-block: 108px;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 100% at 85% 30%, rgba(88, 185, 71, 0.2), transparent 60%),
    radial-gradient(70% 100% at 0% 100%, rgba(27, 58, 92, 0.8), transparent 60%);
  pointer-events: none;
}

.cta-band > * {
  position: relative;
}

.cta-band h2 {
  color: #fff;
  max-width: 18ch;
}

.cta-band p {
  color: rgba(255, 255, 255, 0.74);
  max-width: 58ch;
  margin-top: 20px;
  font-size: var(--fs-lead);
}

.cta-band .cta-row {
  margin-top: 34px;
}

/* ------------------------------------------------- conversion surfaces */

.cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 56px;
  align-items: start;
}

@media (max-width: 1040px) {
  .cta-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

.cta-reassure {
  margin-top: 22px;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.58);
  max-width: 52ch;
  display: flex;
  gap: 9px;
}

.cta-reassure::before {
  content: '';
  flex: none;
  width: 3px;
  border-radius: 3px;
  background: var(--green);
}

/* The smaller step, for the buyer who is not ready to speak to anyone. */
.cta-soft {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  padding: 26px;
  backdrop-filter: blur(8px);
}

.cta-soft .kicker {
  color: var(--green);
  margin-bottom: 8px;
}

.cta-soft > p.sm {
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 18px;
}

.cta-soft-list li + li {
  margin-top: 10px;
}

.cta-soft-list a {
  display: block;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  transition:
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.cta-soft-list a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateX(3px);
  color: #fff;
}

.cta-soft-list strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: 3px;
}

.cta-soft-list span {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.58);
}

/* sticky bottom bar */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  background: rgba(10, 26, 44, 0.96);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease);
}

.sticky-cta.show {
  transform: none;
}

.sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
  flex-wrap: wrap;
}

.sticky-text {
  color: #fff;
  font-size: var(--fs-sm);
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}

.sticky-text strong {
  font-weight: 500;
}

.sticky-text span {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-xs);
}

.sticky-close {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.sticky-close:hover {
  color: #fff;
}

@media (max-width: 700px) {
  .sticky-text span {
    display: none;
  }
  .sticky-inner {
    gap: 12px;
  }
}

/* --------------------------------------------- narrow desktop, full nav */
/* Between the burger breakpoint and about 1200px the header runs out of room:
   logo, five mega-menu triggers, Log in and a 221px CTA. Measured in the
   browser at a 1081px viewport, the CTA pushed 19px past the container edge —
   and it did so before the logo was enlarged too, at roughly 8px. It was a
   latent defect, not a new one, but it is a defect either way.

   Rather than shrink the logo further or send this whole band to the burger
   menu, the padding around the nav triggers tightens. Five triggers at 15px
   each side gives 150px of horizontal padding to reclaim from; taking 5px per
   side returns 50px, which clears the overflow with room to spare. */
@media (min-width: 1081px) and (max-width: 1200px) {
  .header-inner {
    gap: 22px;
  }

  .nav-trigger {
    padding-inline: 10px;
  }
}