/* ==========================================================================
   v2 shared — header/footer chrome fixes common to every "-2"/rebuilt page
   (index.html, solutions-2.html, company-2.html, insights-2.html,
   contact-2.html), found by comparing against the Figma Dev Mode source
   (file CR70V8ZRQR9Qg7LWefymrS). Loaded by all of them, after their own
   page CSS, so the shared style.css — and every page NOT in that list —
   stays untouched.

   Deltas measured against Figma (Company frame 1820:6001, whose Header
   1820:6010 and Footer 1820:6254 instances are shared by every page):
   1. Header/footer chrome uses navy ("blue") muted tokens throughout,
      not the forest ("green") ones style.css's shared .site-header /
      .dropdown default to (those were tuned for the older forest-branded
      pages this rebuild doesn't touch).
   2. The footer is a tighter, denser block than the shared component:
      32px vertical padding (not 60/28), a 437px brand column against
      4x203px link columns on a 32px gutter (not 5 near-equal columns on
      40px), 13px/16px type throughout (not 14/15px), and a 6-column
      legal row (not a two-group space-between row).
   3. The brand tagline is bottom-aligned against the tallest link column,
      which the shared component renders directly under the wordmark.
   ========================================================================== */

.site-header--v2 { border-bottom-color: var(--color-blue-10); }
.site-header--v2 .site-nav__list > li > a,
.site-header--v2 .site-nav__toggle,
.site-header--v2 .header-login,
.site-header--v2 .header-cta { color: var(--color-blue-50); }
.site-header--v2 .site-nav__list > li > a:hover,
.site-header--v2 .site-nav__toggle:hover,
.site-header--v2 .header-login:hover,
.site-header--v2 .header-cta:hover { color: var(--color-night); }
.site-header--v2 .header-login { border-right-color: var(--color-blue-50); }
.site-header--v2 .dropdown__label { color: var(--color-blue-50); border-top-color: var(--color-blue-10); }
.site-header--v2 .dropdown__item:hover { background: var(--color-blue-5); }
.site-header--v2 .dropdown__item-title,
.site-header--v2 .dropdown__more { color: var(--color-night); }
.site-header--v2 .dropdown__item-desc { color: var(--color-blue-50); }
.site-header--v2 .dropdown__more { border-top-color: var(--color-blue-10); border-bottom-color: var(--color-blue-10); }
.site-header--v2 .dropdown__more::after { background: var(--color-night); }

/* ---------- The 12-column grid ----------
   Figma lays every page on 12 columns with 32px gutters, so a 4-column
   label block is 437px and the content track beside it starts at 469px
   (measured identically on Our Story, Principles, Leadership, Governance,
   Investor Relations and the footer). The shared .split is a plain 4fr/8fr
   with no gutter, which starts the content track at 459px — about 11px
   left of the design everywhere it is used.

   Scoped through the v2 header rather than applied to .split directly:
   .split is shared with ten-odd pages that are not part of this rebuild
   and are not being measured against Figma, and shifting all of them by
   11px is not a change this pass is entitled to make. header/main are
   siblings, so this needs no extra markup. */
.site-header--v2 ~ main .split,
.site-header--v2 ~ main .ir-contact__inner {
  grid-template-columns: calc((100% - 352px) / 3 + 96px) 1fr;
  column-gap: 32px;
}
@media (max-width: 992px) {
  .site-header--v2 ~ main .split,
  .site-header--v2 ~ main .ir-contact__inner { grid-template-columns: 1fr; column-gap: 0; }
}

/* ---------- Footer ----------
   The border-top lives here rather than on a colour modifier: main.js
   rewrites the footer's colour class at runtime to follow the section
   above it, so a rule hung on .site-footer--deep-blue silently stops
   applying the moment that section resolves to another colour. */
.site-footer--v2 { padding: 32px 0; border-top: 1px solid var(--color-gray-10); }
/* gray/10 is an almost-white hairline — invisible on the light-green
   footer, which style.css rules in green. main.js picks the colour variant
   at runtime, so restore the green rule whenever it lands on that one. */
.site-footer--v2.site-footer--light-green { border-top-color: var(--color-green-10); }
.site-footer--v2 .site-footer__grid { grid-template-columns: 437px repeat(4, 1fr); gap: 32px; }
/* the tagline is justified to the foot of the tallest column, not stacked
   under the wordmark */
.site-footer--v2 .footer-brand { display: flex; flex-direction: column; justify-content: space-between; }
.site-footer--v2 .footer-brand__tagline { margin-top: 0; font-size: 12px; line-height: 16px; opacity: 0.7; max-width: 320px; }
.site-footer--v2 .footer-col__title { margin-bottom: 16px; font-size: 13px; line-height: 16px; opacity: 0.6; }
/* the <li> must carry the 16px line-height too — inheriting the body's
   leading stretches the 28px row pitch Figma specifies to 34px. The anchor
   also has to leave the inline flow: as an inline box it builds a line box
   from its own font metrics rather than the 16px line-height, rounding each
   row up to 17px and the pitch to 29px. */
.site-footer--v2 .footer-col__list li { line-height: 16px; }
.site-footer--v2 .footer-col__list a { display: block; font-size: 13px; line-height: 16px; }
.site-footer--v2 .footer-col__contact-lead { margin-bottom: 0; line-height: 16px; }
.site-footer--v2 .footer-social { margin-top: 12px; }
.site-footer--v2 .site-footer__bottom { margin-top: 32px; padding-top: 16px; }
/* six evenly-spaced legal columns; `display: contents` promotes the two
   grouping wrappers' children to grid items so the markup stays as-is */
/* line-height on the row itself, not just the links: two of the six legal
   items wrap to a second line, and the bare <span>s would otherwise fall
   back to the 13px body leading (17.875px) and stretch the row past 48px */
.site-footer--v2 .site-footer__bottom--wide { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; line-height: 16px; }
.site-footer--v2 .site-footer__bottom--wide .footer-legal,
.site-footer--v2 .site-footer__bottom--wide .footer-policies { display: contents; }

@media (max-width: 1024px) {
  .site-footer--v2 .site-footer__grid { grid-template-columns: 1fr 1fr; }
  /* Narrow order: wordmark, then the link columns paired down the page
     (Solutions/Company, then Insights/Contact), then the legal paragraph,
     then the policy row. The brand block dissolves so its wordmark and its
     paragraph can sit on either side of the columns. */
  .site-footer--v2 .footer-brand { display: contents; }
  .site-footer--v2 .footer-brand .logo { grid-column: 1 / -1; grid-row: 1; }
  .site-footer--v2 .footer-col:nth-child(2) { grid-column: 1; grid-row: 2; }
  .site-footer--v2 .footer-col:nth-child(4) { grid-column: 2; grid-row: 2; }
  .site-footer--v2 .footer-col:nth-child(3) { grid-column: 1; grid-row: 3; }
  .site-footer--v2 .footer-col:nth-child(5) { grid-column: 2; grid-row: 3; }
  .site-footer--v2 .footer-brand__tagline { grid-column: 1 / -1; grid-row: 4; margin-top: 20px; }
  .site-footer--v2 .site-footer__bottom--wide { grid-template-columns: repeat(3, 1fr); row-gap: 12px; }
}
@media (max-width: 768px) {
  /* two columns rather than one long stack — six items read as a block
     under the brand text instead of a sixth of the footer's height */
  .site-footer--v2 .site-footer__bottom--wide { grid-template-columns: 1fr 1fr; row-gap: 12px; }
}