/*
Theme Name: Pan Nation Energy
Theme URI: https://pannationenergy.com
Author: Pan Nation Energy
Description: Block theme for Pan Nation Energy — a Dubai-based physical energy trading company. Ported 1:1 from the approved static HTML mockups (design/approved/*.html) and design/design-patterns.html.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pan-nation-energy
*/

/* ==========================================================================
   TOKENS — ported verbatim from design/design-tokens.json + approved mockups
   ========================================================================== */
:root {
  --color-bg: #ffffff;
  --color-surface: #f2f7fc;
  --color-ink: #24344d;
  --color-heading: #0a2150;
  --color-muted: #5a6b82;
  --color-border: #dfe8f1;

  --color-navy: #0a2150;
  --color-navy-700: #0c3a8c;
  --color-navy-900: #071834;
  --color-accent: #0079e1;
  --color-blue-mid: #18a8f8;
  --color-sky: #68d0f8;

  --font-sans: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Montserrat", "Archivo", ui-sans-serif, system-ui, Helvetica, Arial, sans-serif;
  --tracking-eyebrow: 0.18em;

  --container-max: 1200px;
  --container-gutter: 1.5rem;
  --section-y: 6rem;

  --radius-card: 6px;
  --radius-control: 3px;
}

/* ==========================================================================
   BASE RESET
   ========================================================================== */
.wp-site-blocks * { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
address { font-style: normal; }
.wp-site-blocks > footer { margin-block-start: 0; }
.wp-site-blocks > * { margin-block-start: 0 !important; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* Neutralize default figure margins wherever a wp:image is used as a plain
   fill/background photo rather than a captioned figure. */
.photo figure.wp-block-image,
.region-media figure.wp-block-image {
  margin: 0;
  height: 100%;
}
/* The header/footer logos are content-sized marks, not fill photos. They need
   the margin reset but NOT height:100% — that stretched the <figure> to the full
   80px bar height and pinned the logo to its top edge instead of centering it. */
.site-header__logo figure.wp-block-image,
.site-footer__brand figure.wp-block-image {
  margin: 0;
  display: flex;
  align-items: center;
}

/* Eyebrows are a design-system primitive: their look must not depend on where
   they happen to sit. Ten section rules in this file restyle EVERY descendant
   paragraph (`.regions-intro p`, `.region-text p`, `.dd-head p`, `.pillar p`,
   …) to set body copy at 1.125rem/--color-muted. Those are (0,1,1) and a bare
   `.eyebrow` is (0,1,0), so an eyebrow inside any of them silently rendered as
   body text — 18px grey instead of 12px accent, on the markets page.

   Upstream this could not happen: the React source renders these as <span>.
   The port uses <p> because paragraph is the natural block, which is what
   exposed them. Rather than add :not() to ten container rules and remember it
   for the eleventh, the primitive is defended once at (0,2,0).

   .region-index is the same primitive — the reference gives it
   `text-xs font-medium tracking-eyebrow text-accent`, i.e. an eyebrow that
   happens to contain digits — so it shares the rule instead of restating it. */
:root .eyebrow,
:root .region-index {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--color-accent);
  margin: 0;
}
:root .eyebrow { text-transform: uppercase; }

/* Raised to (0,2,0) as well, or the tone override would lose to the base rule
   above now that it outranks a bare class. */
:root .eyebrow--dark,
:root .eyebrow.tone-dark,
:root .eyebrow-dark { color: var(--color-sky); }

/* Eyebrow -> the element under it: one step, everywhere.
   This spacing was never expressed as a rule. Sections that happened to have
   their own heading margin (.about-preview-grid .copy h2, etc.) got 16px;
   the three that did not — Global Presence and Explore on home, How We
   Operate on about — fell through to the global `margin-block-start: 0`
   reset and rendered flush against their eyebrow.

   1rem matches the reference, where all twelve <Eyebrow> uses are followed by
   `mt-4`. The hero is deliberately excluded: it uses .hero__eyebrow and a
   bespoke 1.5rem step, which this selector cannot match.

   `:root` prefix so (0,2,0) outranks the (0,1,1) layout reset. */
:root .eyebrow + *,
:root .eyebrow-dark + * {
  margin-top: 1rem;
}

.section-heading { max-width: 42rem; }
.section-heading h2 {
  margin-top: 1rem;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-heading);
}
@media (min-width: 768px) { .section-heading h2 { font-size: 2.25rem; } }

.section-lg { padding: 6rem 0; }
@media (min-width: 768px) { .section-lg { padding: 8rem 0; } }
.bg-white { background: #fff; }
.bg-surface { background: var(--color-surface); }

/* ==========================================================================
   BUTTONS — ported from src/components/ui/ButtonLink.tsx. Implemented on
   core wp:buttons/wp:button with className; the icon-chip is a CSS ::after
   pseudo-element (core Button blocks cannot hold nested markup).
   ========================================================================== */
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-ghost-dark .wp-block-button__link,
:is(a, button).btn-primary,
:is(a, button).btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--radius-control);
  padding: 0.625rem 0.625rem 0.625rem 1.5rem !important;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.wp-block-button.btn-primary .wp-block-button__link,
:is(a, button).btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.wp-block-button.btn-primary .wp-block-button__link:hover,
:is(a, button).btn-primary:hover {
  background: var(--color-navy-700);
  color: #fff;
}
.wp-block-button.btn-ghost-dark .wp-block-button__link,
:is(a, button).btn-ghost-dark {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.wp-block-button.btn-ghost-dark .wp-block-button__link:hover,
:is(a, button).btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.wp-block-button.btn-primary .wp-block-button__link::after,
.wp-block-button.btn-ghost-dark .wp-block-button__link::after,
:is(a, button).btn-primary::after,
:is(a, button).btn-ghost-dark::after {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-control);
  transition: transform 0.3s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wp-block-button.btn-primary .wp-block-button__link::after,
:is(a, button).btn-primary::after { background-color: rgba(255, 255, 255, 0.2); }
.wp-block-button.btn-ghost-dark .wp-block-button__link::after,
:is(a, button).btn-ghost-dark::after { background-color: rgba(255, 255, 255, 0.15); }
.wp-block-button.btn-primary .wp-block-button__link:hover::after,
.wp-block-button.btn-ghost-dark .wp-block-button__link:hover::after,
:is(a, button).btn-primary:hover::after,
:is(a, button).btn-ghost-dark:hover::after { transform: translateX(2px); }
/* CTA ROWS — one spacing standard for every call-to-action row.
   Previously each row type set its own: .cta-band__actions had 2rem scoped to
   its parent, while .btn-row had only `gap` and no top margin at all — so the
   hero CTAs and the About-preview "Learn more" sat flush against the paragraph
   above them with a 0px gap. .btn-row also missed the flex treatment, because
   its selector required .wp-block-buttons and the hero's row is a plain div.

   `:root` prefix, per the convention documented above: core's layout emits its
   own flow margins later in the cascade, so a bare class loses and the margin
   silently renders as core's value instead of ours. */
:root .btn-row,
:root .cta-actions,
:root .cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* ==========================================================================
   HEADER / NAV — canonical BEM port of src/components/Layout.tsx
   (design/design-patterns.html), shared by parts/header.html on every page.
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-border);
  background: #fff;
}
.site-header__bar {
  display: flex;
  min-height: 72px;
  align-items: stretch;
  justify-content: space-between;
}
@media (min-width: 1024px) { .site-header__bar { min-height: 80px; } }

/* Core's flex-layout support emits `align-items: center` on both the header bar
   and the nav (.wp-container-core-group-is-layout-* /
   .wp-container-core-navigation-is-layout-*). Those land later in the cascade
   than the plain class selectors above, so the stretch declared on
   .site-header__bar loses and the nav collapses to text height (24px instead of
   the bar's 80px). The React header stretches nav items to the full bar height
   so the navy hover state fills it edge to edge — restore that. */
.site-header .site-header__bar,
.site-header .main-nav,
.site-header .main-nav .wp-block-navigation__container,
.site-header .main-nav ul.wp-block-navigation__container {
  align-items: stretch !important;
}
.site-header .main-nav .wp-block-navigation-item { align-items: stretch; }

/* Core wraps the <ul> in three divs (__responsive-container > __responsive-close
   > __responsive-dialog > __responsive-container-content), so the bar's stretch
   never reaches the list and each link collapsed to text height (24px). Chain an
   explicit full height through the wrappers so the links fill the 80px bar and
   the navy hover covers it, matching src/components/Layout.tsx. Desktop only —
   below 1024px these wrappers form the overlay panel. */
@media (min-width: 1024px) {
  .site-header .main-nav > .wp-block-navigation__responsive-container,
  .site-header .main-nav .wp-block-navigation__responsive-close,
  .site-header .main-nav .wp-block-navigation__responsive-dialog,
  .site-header .main-nav .wp-block-navigation__responsive-container-content,
  .site-header .main-nav ul.wp-block-navigation__container,
  .site-header .main-nav .wp-block-navigation-item,
  .site-header .main-nav .wp-block-navigation-item__content {
    height: 100%;
  }
}

.site-header__logo { display: flex; flex-shrink: 0; align-items: center; }
.site-header__logo img { height: 40px; width: auto; }
@media (min-width: 1024px) { .site-header__logo img { height: 44px; } }

/* Core's Navigation block nests the hamburger button INSIDE the <nav> element,
   so .main-nav must stay visible at every width — hiding it below 1024px (as
   the hand-rolled React markup could, where nav and button were siblings)
   would hide the button too. The breakpoint is enforced on the responsive
   container and the open button instead — see the media queries below. */
.main-nav { display: flex; align-items: stretch; }

.main-nav .wp-block-navigation__container,
.main-nav ul.wp-block-navigation__container {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.main-nav .wp-block-navigation-item {
  display: flex;
  align-items: stretch;
}
.main-nav .wp-block-navigation-item__content,
.main-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-heading) !important;
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
  text-decoration: none;
}
.main-nav .wp-block-navigation-item__content::after,
.main-nav__link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 15px;
  height: 1px;
  background: transparent;
  transition: background-color 0.1s ease-in-out;
}
.main-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.main-nav__link:hover {
  background: var(--color-navy);
  color: #fff !important;
}
.main-nav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.main-nav__link:hover::after { background: #fff; }
.main-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.main-nav__link.is-active { font-weight: 600; }
.main-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after,
.main-nav__link.is-active::after { background: var(--color-accent); }
.main-nav .wp-block-navigation-item.current-menu-item:hover .wp-block-navigation-item__content::after,
.main-nav__link.is-active:hover::after { background: #fff; }

/* Inside the mobile overlay the current page is marked with accent TEXT, not
   the underline — matching the React header, which uses a different active
   treatment per breakpoint (`font-semibold text-accent` on mobile vs the
   inset bar on desktop). The bar is suppressed here because the overlay's
   links are stacked rows, where a rule sitting 15px off the bottom reads as a
   divider between items rather than as a marker on one of them. */
@media (max-width: 1023.98px) {
  .main-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.current-menu-item
    .wp-block-navigation-item__content {
    font-weight: 600;
    color: var(--color-accent) !important;
  }
  .main-nav .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.current-menu-item
    .wp-block-navigation-item__content::after {
    background: transparent;
  }
}

.hamburger,
.wp-block-navigation__responsive-container-open {
  display: flex;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
  align-self: center;
  border-radius: var(--radius-control);
  color: var(--color-heading);
  background: none;
  border: none;
  cursor: pointer;
}
/* Header breakpoint — match src/components/Layout.tsx, which collapses to the
   overlay menu below lg (1024px). Core's Navigation block switches at 600px
   instead, and both core's `:not(.always-shown)` rule and its generated
   .wp-container-core-navigation-is-layout-* CSS outrank plain class selectors,
   so !important is required to hold the 1024px breakpoint. Without this the
   600–1023px range shows all six links inline where the React source shows a
   hamburger. */
@media (max-width: 1023.98px) {
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  .hamburger,
  .site-header .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
}
@media (min-width: 1024px) {
  .hamburger,
  .site-header .wp-block-navigation__responsive-container-open {
    display: none !important;
  }
}

.mobile-menu {
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  background: #fff;
  transition: max-height 0.3s ease-out;
  max-height: 0;
}
@media (min-width: 1024px) { .mobile-menu { display: none; } }
.mobile-menu.is-open { max-height: 24rem; }
.mobile-menu nav { display: flex; flex-direction: column; padding: 0.75rem 0; }
.mobile-menu__link {
  display: block;
  padding: 0.875rem 0;
  font-size: 15px;
  font-weight: 400;
  color: rgba(10, 33, 80, 0.85);
  border-bottom: 1px solid rgba(223, 232, 241, 0.6);
  text-decoration: none;
}
.mobile-menu__link:last-child { border-bottom: 0; }
.mobile-menu__link.is-active { font-weight: 600; color: var(--color-accent); }

/* Native WordPress Navigation block responsive (mobile) overlay.
   Core renders this as a fixed FULL-SCREEN modal with right-aligned links at
   1.1rem. The React source instead uses an inline slide-down panel beneath the
   header bar with full-width 15px navy rows (see the .mobile-menu rules above,
   which are a faithful port of it but are dead code while the header uses the
   core Navigation block).
   Palette and type are ported here so the overlay reads as the brand and stays
   legible — an earlier navy treatment left white links on core's white modal
   background, i.e. invisible text.
   The modal GEOMETRY is deliberately left as core's. Re-anchoring it into an
   inline panel means overriding core's internal modal wrappers
   (__responsive-close / __responsive-dialog), which do not yield to CSS
   overrides and would be fragile across WordPress updates. The clean route to
   exact parity is a hand-rolled wp:html nav reusing .mobile-menu, as was done
   for the hero carousel and the animated map — see HANDOFF.md. */
@media (max-width: 1023.98px) {
  .site-header .wp-block-navigation__responsive-container.is-menu-open {
    background: #fff;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content {
    width: 100%;
    padding: 0.75rem var(--container-gutter);
  }

  /* Full-width stacked rows, not core's right-aligned modal list. */
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__container {
    width: 100%;
    gap: 0;
    align-items: stretch;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item { width: 100%; }
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: 0.875rem 0;
    font-size: 15px;
    font-weight: 400;
    color: rgba(10, 33, 80, 0.85) !important;
    border-bottom: 1px solid rgba(223, 232, 241, 0.6);
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
    border-bottom: 0;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
    color: var(--color-accent) !important;
    font-weight: 600;
  }
  /* No hover inversion on touch widths — the React panel has none. */
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item:hover .wp-block-navigation-item__content {
    background: none;
  }

  /* Core's close button is the ONLY control that dismisses the menu — clicking
     the open button again does not — so it must stay visible and on-brand
     against the white overlay. */
  .site-header .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close {
    color: var(--color-heading);
  }
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
  color: var(--color-heading);
}

/* ==========================================================================
   FOOTER — canonical BEM port of src/components/Layout.tsx
   ========================================================================== */
/* ==========================================================================
   CSS-GRID CONTAINERS vs CORE FLOW MARGINS
   Core adds `margin-block-start: var(--wp--style--block-gap)` (24px) to every
   child after the first inside any group with flow layout — which is every
   wp:group the theme then lays out as a CSS grid. Those containers space
   themselves with `gap`, so the inherited margin is always wrong there: it
   pushes every item after the first downwards (visibly misaligning grid
   columns — the footer's 2nd and 3rd columns sat 24px below the first) and
   inflates the row track, since an item's margin counts toward its outer size.
   Neutralised for all grid containers in one place.

   The offending rule is `:root :where(.is-layout-flow) > *` from
   global-styles-inline-css — specificity (0,1,0), and that stylesheet is printed
   AFTER the theme's, so an equal-specificity selector here loses on source
   order. The `:root` prefix below lifts these to (0,2,0) so they win.
   ========================================================================== */
:root .site-footer__grid > *,
:root .credentials-grid > *,
:root .about-preview-grid > *,
:root .explore-grid > *,
:root .story-grid > *,
:root .hq-grid > *,
:root .principles-grid > *,
:root .region-row > *,
:root .lines-grid > *,
:root .commitment .grid > *,
:root .framework-grid > *,
:root .dd-list > *,
:root .contact-split .grid > *,
:root .form-row > *,
/* Same core margin on the footer's own flow children: it pushed the bottom bar
   24px below the grid, where the mockup has it flush against it (the grid's own
   5rem padding and the bar's border-top + 1.75rem padding do the spacing). */
:root .site-footer > .container > *,
/* Top-level page sections butt directly against each other in the mockups;
   core's flow layout inserted 24px between every one of them, accumulating
   ~120px of drift per page. The credentials strip's deliberate negative overlap
   is restored at matching specificity where it is defined below. */
:root .wp-block-post-content > * {
  margin-block-start: 0;
  margin-top: 0;
}

/* The same injected margin applies at EVERY nesting depth, not just the two
   cases above — core adds `margin-block-start: 1.5rem` between all flow/
   constrained siblings. This theme is a complete port of the React source and
   states every gap explicitly (own margins, flex/grid `gap`, or section
   padding), so that margin is pure additive drift: it stacked on top of the
   flex gaps in the compliance narratives and made most sections 20–96px taller
   than the mockup.

   Specificity is deliberately pitched at (0,1,1) — one pseudo-class (:root) plus
   one element — which is the narrow band that beats core's (0,1,0) rule while
   still losing to the theme's own spacing rules below (`.cta-band__inner p`,
   `.narrative .lead`, …). A blunter (0,2,0) reset also overrode those and made
   every section 16–100px too SHORT. Enumerating element types is what keeps each
   selector at (0,1,1); `:where()` contributes nothing.

   The one class of theme rule this DOES still outrank is a bare single-class
   margin (`.explore-grid { margin-top: 3rem }` = (0,1,0)). Those are prefixed
   with `:root` at their own definitions — search this file for ":root ." to see
   them (.explore-grid, .principles-grid, .regions-list, .lines-grid,
   .framework-grid, .dd-list, .office-list, .credentials-wrap, .pne-chart-card).

   When adding a rule of that shape, check it: a bare single-class top margin on
   a div/p/h*/ul/figure that sits in a flow container silently computes to 0. */
:root :where(.is-layout-flow, .is-layout-constrained) > p,
:root :where(.is-layout-flow, .is-layout-constrained) > h1,
:root :where(.is-layout-flow, .is-layout-constrained) > h2,
:root :where(.is-layout-flow, .is-layout-constrained) > h3,
:root :where(.is-layout-flow, .is-layout-constrained) > h4,
:root :where(.is-layout-flow, .is-layout-constrained) > div,
:root :where(.is-layout-flow, .is-layout-constrained) > ul,
:root :where(.is-layout-flow, .is-layout-constrained) > ol,
:root :where(.is-layout-flow, .is-layout-constrained) > li,
:root :where(.is-layout-flow, .is-layout-constrained) > nav,
:root :where(.is-layout-flow, .is-layout-constrained) > form,
:root :where(.is-layout-flow, .is-layout-constrained) > figure,
:root :where(.is-layout-flow, .is-layout-constrained) > address,
:root :where(.is-layout-flow, .is-layout-constrained) > blockquote {
  margin-block-start: 0;
}

.site-footer { margin-top: auto; background: var(--color-navy-900); color: #fff; }
.site-footer__grid {
  display: grid;
  gap: 3rem;
  padding: 4rem 0;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(12, 1fr); gap: 2rem; padding: 5rem 0; }
}
/* The 12-column spans below are scoped to their breakpoints on purpose.
   They used to be unconditional, which broke the footer on phones: the grid is
   a single column under 768px, so a child asking for `span 12` made the browser
   invent 12 implicit tracks. With `gap: 3rem` that is 11 gutters x 48px = 528px
   of gap inside a 342px container, so every 1fr track collapsed to 0 and each
   child rendered 528px wide — overflowing the navy background and clipping the
   address mid-word. Spans must never outrun the columns actually defined. */
.site-footer__brand { grid-column: auto; }
@media (min-width: 768px) { .site-footer__brand { grid-column: span 5; } }
.site-footer__brand img { height: 36px; width: auto; filter: brightness(0) invert(1); }
.site-footer__brand p { margin-top: 1.25rem; max-width: 24rem; font-size: 0.875rem; line-height: 1.625; color: rgba(255, 255, 255, 0.6); }

.site-footer__nav { grid-column: auto; }
@media (min-width: 768px) { .site-footer__nav { grid-column: span 3; } }
.site-footer__addresses { grid-column: auto; }
@media (min-width: 768px) { .site-footer__addresses { grid-column: span 4; } }

/* Between 640px and the 12-column layout, nav and addresses sit side by side —
   they are short enough to pair, and stacking them wastes a lot of height on
   larger phones and small tablets. */
@media (min-width: 640px) and (max-width: 767.98px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  .site-footer__brand { grid-column: 1 / -1; }
}

.site-footer__label {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--color-sky); margin: 0;
  line-height: 1.3333; /* 16px at 12px — the body's 1.6 gave 19.2px here */
}
.site-footer__nav nav { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
/* In the React source these links are bare <a> flex items. Core blocks can only
   emit them wrapped in <p>, and the default paragraph margin stacks on top of
   the 0.75rem flex gap — which stretched this column and, via the equal-height
   grid row, the whole footer (557px tall vs the mockup's 376px). */
.site-footer__nav nav p { margin: 0; }
.site-footer__nav a { display: block; font-size: 0.875rem; line-height: 1.42857; color: rgba(255, 255, 255, 0.7); transition: color 0.2s ease; text-decoration: none; }
.site-footer__nav a:hover { color: #fff; }

.site-footer__addresses .content { margin-top: 1.25rem; font-size: 0.875rem; line-height: 1.625; color: rgba(255, 255, 255, 0.7); }
.site-footer__addresses .content p.city { font-weight: 500; color: #fff; margin: 0; }
/* The mockup uses an <address> element here, which core blocks cannot emit — the
   street lines are a plain <p>, so the 0.375rem offset has to sit on that
   instead. The <address> selector below never matched any markup. */
.site-footer__addresses .content p { margin: 0; }
.site-footer__addresses .content p.city + p,
.site-footer__addresses address { margin-top: 0.375rem; }

.site-footer__bottom {
  display: flex; flex-direction: column; gap: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 1.75rem 0;
  font-size: 0.875rem; line-height: 1.42857; color: rgba(255, 255, 255, 0.55);
}
.site-footer__bottom p { margin: 0; }
@media (min-width: 768px) { .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.site-footer__bottom a { transition: color 0.2s ease; color: inherit; text-decoration: none; }
.site-footer__bottom a:hover { color: #fff; }

/* ==========================================================================
   PHOTO OVERLAY — shared by home hero, page hero, cta band
   ========================================================================== */
.pne-hero-overlay,
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(7, 24, 52, 0.88) 0%, rgba(10, 33, 80, 0.6) 55%, rgba(10, 33, 80, 0.38) 100%),
    linear-gradient(to top, rgba(7, 24, 52, 0.8) 0%, transparent 45%);
  pointer-events: none;
}

/* ==========================================================================
   ANIMATIONS — ported verbatim from src/styles/animations.css
   ========================================================================== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
.animate-fade-up { animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Map choreography keyframes — ported verbatim from src/styles/animations.css */
@keyframes pin-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  70% { transform: scale(3); opacity: 0; }
  100% { transform: scale(3); opacity: 0; }
}
@keyframes route-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes pin-pop {
  to { transform: scale(1); }
}

.reveal-group .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-group.is-visible .reveal { opacity: 1; transform: none; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.12s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-group .reveal, .animate-fade-up { opacity: 1 !important; transform: none !important; }
}

/* Keep animated content visible while editing in the block editor. */
.editor-styles-wrapper .reveal-group .reveal,
.editor-styles-wrapper .animate-fade-up,
.editor-styles-wrapper .explore-tile img,
.editor-styles-wrapper .region-media img {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* The trade-route chart draws itself once `.is-live` is set, which only the
   front-end footer script does — it never runs in the editor. Without this the
   map is an empty gradient card while editing: land, routes, pins and labels
   are all still in their pre-animation state. That reads as broken, and the
   chart is a hand-authored HTML block nobody should be deleting by mistake.
   Show its finished state instead. Editor canvas only — the front-end
   choreography above is untouched.

   `.route-path` needs the dash offset, not opacity: the paths carry
   pathLength="1", so `stroke-dashoffset: 0` is the drawn state.

   `.pin-pulse-ring` is deliberately left hidden — it is a looping expand-and-
   fade with no meaningful resting frame, so freezing it would just park a
   large static ring over each pin. */
.editor-styles-wrapper .pne-chart .map-land,
.editor-styles-wrapper .pne-chart .map-fade {
  opacity: 1 !important;
  transition: none !important;
}
.editor-styles-wrapper .pne-chart .route-path {
  stroke-dashoffset: 0 !important;
  animation: none !important;
}
.editor-styles-wrapper .pne-chart .map-pin {
  transform: none !important;
  animation: none !important;
}

/* ==========================================================================
   PAGE HERO / CTA BAND / HOME HERO overlay — implemented on the core Cover
   block (dimRatio:0, className added) so the exact multi-stop navy gradient
   from the mockups renders as a ::before pseudo-layer above the photo and
   below the text, instead of a separate overlay div.
   ========================================================================== */
.wp-block-cover.page-hero::before,
.wp-block-cover.cta-band::before,
.wp-block-cover.pne-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(7, 24, 52, 0.88) 0%, rgba(10, 33, 80, 0.6) 55%, rgba(10, 33, 80, 0.38) 100%),
    linear-gradient(to top, rgba(7, 24, 52, 0.8) 0%, transparent 45%);
  pointer-events: none;
}
.wp-block-cover.page-hero .wp-block-cover__inner-container,
.wp-block-cover.cta-band .wp-block-cover__inner-container,
.wp-block-cover.pne-hero .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
}
/* Core's Cover block ships a default `padding: 1em`, which the mockup sections
   do not have — it was adding 32px to the height of every page hero and CTA
   band sitewide. The vertical rhythm belongs to .page-hero__inner /
   .cta-band__inner; horizontal insets come from .container. */
.wp-block-cover.page-hero,
.wp-block-cover.cta-band,
.wp-block-cover.pne-hero {
  padding-top: 0;
  padding-bottom: 0;
  /* Core's Cover also defaults to min-height:430px, which floored every page
     hero at 430px even though its content is 394px — the mockup sections size
     purely to content. */
  min-height: 0;
}

/* ==========================================================================
   PAGE HERO — unified photo-banner pattern (About / Markets / Products /
   Compliance / Contact). Consolidated from near-identical per-page variants
   authored in each approved mockup (same padding/type values throughout).
   ========================================================================== */
.page-hero { background: var(--color-navy); }
.page-hero__inner { padding: 5rem 0; }
@media (min-width: 768px) { .page-hero__inner { padding: 7rem 0; } }
.page-hero__eyebrow {
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); color: var(--color-sky); margin: 0;
  line-height: 1.3333; /* 16px at 12px — the body's 1.6 gave 19.2px */
}
/* The margin-top values below are contested by core's
   `:root :where(.is-layout-flow) > * { margin-block-start: 1.5rem }` — also
   (0,1,0), but printed after the theme stylesheet, so a bare class loses on
   source order and every hero got 24px where the mockup has 16/20px. Scoping to
   .page-hero__inner lifts these to (0,2,0) so the mockup's spacing wins. */
.page-hero__inner .page-hero__title {
  margin-top: 1rem; max-width: 48rem; font-size: 1.875rem; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.01em; color: #fff;
}
@media (min-width: 768px) { .page-hero__inner .page-hero__title { font-size: 3rem; } }
.page-hero__inner .page-hero__sub { margin-top: 1.25rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.625; color: rgba(255, 255, 255, 0.75); }

/* ==========================================================================
   CTA BAND — unified photo-CTA pattern (Home / About / Markets / Products /
   Compliance). Consolidated from near-identical per-page variants.
   ========================================================================== */
.cta-band { background: var(--color-navy); }
.cta-band__inner { padding: 6rem 0; }
@media (min-width: 768px) { .cta-band__inner { padding: 8rem 0; } }
.cta-band__inner h2 { margin: 0; max-width: 42rem; font-size: 1.5rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: #fff; }
@media (min-width: 768px) { .cta-band__inner h2 { font-size: 1.875rem; } }
.cta-band__inner p { margin-top: 1rem; max-width: 36rem; font-size: 1rem; line-height: 1.625; color: rgba(255, 255, 255, 0.7); }

/* ==========================================================================
   HOME HERO — ported verbatim from src/sections/home/Hero.tsx + home.css:
   a JS-driven 3-slide crossfade carousel (6.5s auto-rotate, prev/next
   arrows, dot navigation). Implemented as a plain section (not Cover)
   since the crossfade/controls need real markup + JS.
   ========================================================================== */
.pne-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #071834 0%, #0a2150 58%, #0b2a63 100%); color: #fff; }
.pne-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
}
.pne-hero .hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 1400ms ease-in-out;
}
.pne-hero .hero-slide.is-active { opacity: 1; }

/* Crop anchoring is data, not stylesheet: every block that cover-crops an image
   carries a focalPoint attribute (core/cover, core/image and pne/hero all do),
   which renders as an inline object-position and is set by dragging a marker in
   the editor. There is deliberately no rule here keyed to a filename — that
   version broke the moment the picture was replaced, and was invisible to
   whoever replaced it. */
.pne-hero .pne-hero-overlay { z-index: 1; }
.pne-hero > .container { position: relative; z-index: 3; }
.hero__content { padding: 7rem 0 9rem; }
.hero__eyebrow { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-sky); margin: 0; }
@media (min-width: 768px) { .hero__content { padding: 9rem 0; } }
.hero__title {
  margin: 1.5rem 0 0; max-width: 48rem; font-size: 2.25rem; font-weight: 600;
  line-height: 1.15; letter-spacing: -0.01em; color: #fff;
}
@media (min-width: 768px) { .hero__title { font-size: 3rem; } }
.hero__title .accent { color: var(--color-sky); }
.hero__body { margin: 1.75rem 0 0; max-width: 36rem; font-size: 1.125rem; line-height: 1.625; color: rgba(255, 255, 255, 0.75); }

.hero-carousel__controls { margin-top: 4rem; display: flex; align-items: center; gap: 1.5rem; }
.hero-carousel__arrows { display: flex; gap: 0.5rem; }
.hero-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-control, 3px);
  border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: #fff;
  cursor: pointer; padding: 0; transition: background-color 0.3s ease;
}
.hero-arrow:hover { background: rgba(255, 255, 255, 0.1); }
.hero-carousel__dots { display: flex; align-items: center; gap: 0.5rem; }
.hero-dot {
  height: 0.375rem; width: 0.375rem; border-radius: 9999px; border: none; padding: 0;
  background: rgba(255, 255, 255, 0.4); cursor: pointer; transition: all 0.5s ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.7); }
.hero-dot.is-active { width: 1.75rem; background: #fff; }

/* ==========================================================================
   CREDENTIALS BAND (home) — stepped-color floating cards over hero bottom
   ========================================================================== */
/* :root prefix so this negative overlap outranks the section-margin reset above
   (equal specificity, and this rule comes later) — as a bare class it lost to
   core's flow margin and the strip sat 88px too low instead of overlapping the
   hero. */
:root .credentials-wrap { position: relative; z-index: 10; margin-top: -3.5rem; }
@media (min-width: 768px) { :root .credentials-wrap { margin-top: -4rem; } }

/* The band behind the cards, BELOW the hero overlap only.
   The negative margin lifts this strip over the hero photo, but the wrapper
   itself paints nothing — so the part hanging below the hero sat on the page's
   white while the section under it is --color-surface, leaving a white sliver
   across the cards' lower half.
   Inset from the top by exactly the overlap distance, so the upper portion
   stays transparent and the hero still shows through behind the cards.
   Ported from the band div in src/sections/home/CredentialsBand.tsx, whose own
   comment flags this same sliver. .credentials-grid is already
   position: relative, so it paints above this pseudo-element. */
:root .credentials-wrap::before {
  content: "";
  position: absolute;
  inset: 3.5rem 0 0;
  background: var(--color-surface);
}
@media (min-width: 768px) {
  :root .credentials-wrap::before { inset: 4rem 0 0; }
}
.credentials-grid { position: relative; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .credentials-grid { grid-template-columns: repeat(3, 1fr); } }
.credential-card {
  border-radius: var(--radius-card);
  padding: 2.25rem 2rem;
  box-shadow: 0 18px 44px rgba(10, 33, 80, 0.16);
  color: #fff;
}
.credential-card .label { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); margin: 0; }
.credential-card .value { margin-top: 0.75rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 768px) { .credential-card .value { font-size: 1.5rem; } }
.credential-card--0 { background: var(--color-navy-900); }
.credential-card--0 .label { color: var(--color-sky); }
.credential-card--1 { background: var(--color-navy); }
.credential-card--1 .label { color: var(--color-sky); }
.credential-card--2 { background: var(--color-accent); }
.credential-card--2 .label { color: rgba(255, 255, 255, 0.8); }

/* ==========================================================================
   AT A GLANCE — semantic definition list (Home + About)
   ========================================================================== */
.at-a-glance { padding: 5rem 0; }
@media (min-width: 768px) { .at-a-glance { padding: 6rem 0; } }
.at-a-glance h2 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-heading); }
@media (min-width: 768px) { .at-a-glance h2 { font-size: 1.875rem; } }
.at-a-glance .facts { margin: 2rem 0 0; border-top: 1px solid var(--color-border); }
.at-a-glance .row {
  /* margin:0 — the rows are separated by their own padding and border-bottom.
     Core's flow layout was adding 24px between each, which made this section
     96px taller than the mockup on both Home and About. */
  margin: 0;
  display: grid; gap: 0.375rem; padding: 1.25rem 0; border-bottom: 1px solid var(--color-border);
}
@media (min-width: 768px) { .at-a-glance .row { grid-template-columns: repeat(12, 1fr); gap: 1.5rem; align-items: baseline; } }
.at-a-glance .term { font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-accent); margin: 0; }
@media (min-width: 768px) { .at-a-glance .term { grid-column: span 3; } }
.at-a-glance .desc { font-size: 1rem; line-height: 1.625; color: var(--color-ink); margin: 0; }
@media (min-width: 768px) { .at-a-glance .desc { grid-column: span 9; } }

/* ==========================================================================
   ABOUT PREVIEW (home) — photo + copy 2-col
   ========================================================================== */
.about-preview-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .about-preview-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.about-preview-grid .photo { overflow: hidden; border-radius: var(--radius-card); }
.about-preview-grid .photo img { aspect-ratio: 4/3; height: 100%; width: 100%; object-fit: cover; display: block; }
.about-preview-grid .copy h2 { margin-top: 1rem; font-size: 1.875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
@media (min-width: 768px) { .about-preview-grid .copy h2 { font-size: 2.25rem; } }
.about-preview-grid .copy p.body { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.625; color: var(--color-muted); }

/* ==========================================================================
   GLOBAL PRESENCE (home) — the real animated nautical-chart SVG, ported
   verbatim from src/sections/home/GlobalPresence.tsx + home.css: real
   Natural Earth coastlines, graticule, two drawn trade-route curves, and
   three pins that pop in sequence with a pulse ring, gated by an
   IntersectionObserver at 60% visibility (see functions.php).
   ========================================================================== */
/* `:root` prefix per the convention documented at the layout-margin reset above:
   this card is a <div> child of a flow container, so a bare (0,1,0) class loses
   its top margin to that reset and the map butts against the paragraph. */
:root .pne-chart-card {
  margin-top: 3.5rem;
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(10, 33, 80, 0.05);
  background: linear-gradient(180deg, #eaf5fe 0%, #ddeefa 100%);
}
.pne-chart svg { display: block; width: 100%; height: auto; }

.pne-chart .map-land { opacity: 0; transition: opacity 1s ease 0.1s; }
.pne-chart.is-live .map-land { opacity: 1; }

.pne-chart .route-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pne-chart.is-live .route-path {
  animation: route-draw var(--dur, 1.3s) cubic-bezier(0.45, 0.05, 0.35, 1) var(--d, 0s) forwards;
}

.pne-chart .map-pin { transform: scale(0); transform-origin: center; transform-box: fill-box; }
.pne-chart.is-live .map-pin {
  animation: pin-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) var(--d, 0s) forwards;
}

.pne-chart .pin-pulse-ring { opacity: 0; transform-origin: center; transform-box: fill-box; }
.pne-chart.is-live .pin-pulse-ring {
  animation: pin-pulse 3.2s cubic-bezier(0.25, 0.6, 0.4, 1) var(--d, 0s) infinite;
}

.pne-chart .map-fade { opacity: 0; transition: opacity 0.8s ease var(--d, 0s); }
.pne-chart.is-live .map-fade { opacity: 1; }

/* ==========================================================================
   EXPLORE GRID (home) — full-photo poster tiles, implemented on the core
   Cover block (dimRatio:0) with a custom wash + gradient via pseudo-elements.
   ========================================================================== */
:root .explore-grid { margin-top: 3rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { :root .explore-grid { grid-template-columns: repeat(3, 1fr); } }
.wp-block-cover.explore-tile { height: 20rem; border-radius: var(--radius-card); }
@media (min-width: 768px) { .wp-block-cover.explore-tile { height: 26.25rem; } }
.wp-block-cover.explore-tile img.wp-block-cover__image-background { transition: transform 0.7s ease-out; }
.wp-block-cover.explore-tile:hover img.wp-block-cover__image-background { transform: scale(1.05); }
.wp-block-cover.explore-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10, 33, 80, 0.25);
  transition: background-color 0.5s ease;
}
.wp-block-cover.explore-tile:hover::before { background: rgba(10, 33, 80, 0.1); }
.wp-block-cover.explore-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(7, 24, 52, 0.9), rgba(7, 24, 52, 0.3) 55%, rgba(7, 24, 52, 0.1));
}
/* The reference tile is a single <a> wrapping the whole card. A Cover block
   cannot be an anchor, so the tile's link is stretched over the card with a
   pseudo-element (see .tile-copy h3 a::after below). Two things must hold for
   that to work:
     - the Cover's own 1em padding is removed, so the inner container IS the
       tile box and the hit area reaches the edges. This also restores the
       reference insets — the padding was stacking under .tile-copy's 1.75rem
       and .chip's 1.5rem, pushing both ~16px further in than the design.
     - .tile-copy is placed at the bottom by the flow, not by position:absolute.
       An absolutely positioned .tile-copy becomes the pseudo's containing
       block, which would collapse the hit area back to the caption. */
.wp-block-cover.explore-tile { padding: 0; }
.wp-block-cover.explore-tile .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* The arrow badge.
   It used to be an empty `<div class="chip">` in the page content, carrying no
   content of its own because the arrow was drawn by CSS. In the editor an empty
   core/group is not neutral: Gutenberg fills it with the group variation picker
   ("Group blocks together. Select a layout:" plus four buttons), crammed into a
   40x40 box — three stacks of stray controls sitting on top of the cards.

   A decoration the editor cannot render is a decoration that should not be a
   block. It is now drawn entirely here, on .tile-copy's own ::after, so the
   content holds no empty wrapper. .tile-copy is position: static, so this
   resolves against .wp-block-cover__inner-container — the full tile box —
   exactly as the old absolutely positioned .chip did. */
.explore-tile .tile-copy::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: var(--radius-control);
  background-color: rgba(255, 255, 255, 0.15);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  backdrop-filter: blur(4px);
  transition: transform 0.3s ease, background-color 0.3s ease;
  z-index: 3;
  /* Sits under the stretched link (z-index 4) and must never eat its clicks. */
  pointer-events: none;
}
.wp-block-cover.explore-tile:hover .tile-copy::after { transform: translateX(2px); background-color: var(--color-accent); }
.explore-tile .tile-copy { position: static; padding: 1.75rem; }
.explore-tile .tile-copy h3 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.explore-tile .tile-copy h3 a { color: #fff; text-decoration: none; }
.explore-tile .tile-copy h3 a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.explore-tile .tile-copy p { margin-top: 0.5rem; max-width: 20rem; font-size: 0.875rem; line-height: 1.625; color: rgba(255, 255, 255, 0.7); }

/* ==========================================================================
   STORY GRID (about)
   ========================================================================== */
.story-grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .story-grid { grid-template-columns: repeat(5, 1fr); gap: 4rem; } }
.story-grid .story-head { }
@media (min-width: 768px) { .story-grid .story-head { grid-column: span 2; } }
.story-grid .story-head h2 { margin-top: 1rem; font-size: 1.875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
@media (min-width: 768px) { .story-grid .story-head h2 { font-size: 2.25rem; } }
.story-grid .story-body { display: flex; flex-direction: column; gap: 1.5rem; font-size: 1.125rem; line-height: 1.625; color: var(--color-muted); }
@media (min-width: 768px) { .story-grid .story-body { grid-column: span 3; } }

/* ==========================================================================
   HEADQUARTERS (about)
   ========================================================================== */
.hq-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 768px) { .hq-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.hq-grid h2 { margin-top: 1rem; font-size: 1.875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
@media (min-width: 768px) { .hq-grid h2 { font-size: 2.25rem; } }
.hq-grid .copy p.body { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.625; color: var(--color-muted); }
.hq-grid .addr-block { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); font-size: 0.875rem; line-height: 1.625; color: var(--color-muted); }
.hq-grid .addr-block .city { font-weight: 500; color: var(--color-heading); margin: 0; }
.hq-grid .addr-block address { margin-top: 0.375rem; }
.hq-grid .photo { overflow: hidden; border-radius: var(--radius-card); }
.hq-grid .photo img { aspect-ratio: 4/3; height: 100%; width: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   PRINCIPLES (about) — stepped cards, no shadow
   ========================================================================== */
:root .principles-grid { margin-top: 3rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { :root .principles-grid { grid-template-columns: repeat(3, 1fr); } }
.principle-card { border-radius: var(--radius-card); padding: 2.25rem 2rem; color: #fff; }
.principle-card h3 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.principle-card p { margin-top: 0.75rem; font-size: 1rem; line-height: 1.625; color: rgba(255, 255, 255, 0.75); }
.principle-card--0 { background: var(--color-navy-900); }
.principle-card--1 { background: var(--color-navy); }
.principle-card--2 { background: var(--color-accent); }

/* ==========================================================================
   REGIONS / REGION-ROW (markets)
   ========================================================================== */
.regions-section { background: #fff; padding: 96px 0; }
@media (min-width: 768px) { .regions-section { padding: 128px 0; } }
.regions-intro { max-width: 42rem; }
.regions-intro h2 { margin-top: 1rem; font-size: 1.875rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-heading); }
@media (min-width: 768px) { .regions-intro h2 { font-size: 2.25rem; } }
.regions-intro p { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.6; color: var(--color-muted); }

:root .regions-list { margin-top: 4rem; display: flex; flex-direction: column; gap: 4rem; }
@media (min-width: 768px) { :root .regions-list { gap: 6rem; } }

.region-row { display: grid; align-items: center; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .region-row { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.region-media { overflow: hidden; border-radius: var(--radius-card); position: relative; }
.region-media img { aspect-ratio: 16/10; width: 100%; object-fit: cover; display: block; }
.region-media::after { content: ""; position: absolute; inset: 0; background: rgba(10, 33, 80, 0.2); }
.region-row.flipped .region-media { order: 2; }
.region-row.flipped .region-text { order: 1; }
@media (max-width: 767px) {
  .region-row.flipped .region-media, .region-row.flipped .region-text { order: initial; }
}
.region-text h3 { margin-top: 0.75rem; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-heading); }
@media (min-width: 768px) { .region-text h3 { font-size: 1.875rem; } }
.region-text p { margin-top: 1rem; max-width: 28rem; font-size: 1.125rem; line-height: 1.6; color: var(--color-muted); }

/* ==========================================================================
   PRODUCT LINES (products)
   ========================================================================== */
.lines-section { background: #fff; padding: 96px 0; }
@media (min-width: 768px) { .lines-section { padding: 128px 0; } }
.lines-intro { max-width: 42rem; }
.lines-intro h2 { margin-top: 1rem; font-size: 1.875rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--color-heading); }
@media (min-width: 768px) { .lines-intro h2 { font-size: 2.25rem; } }
:root .lines-grid { margin-top: 3rem; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { :root .lines-grid { grid-template-columns: 1fr 1fr; } }
.line-card { border-radius: var(--radius-card); padding: 2.75rem 2.25rem; color: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.line-card:hover { box-shadow: 0 24px 56px rgba(10, 33, 80, 0.22); transform: translateY(-2px); }
.line-card.tone-navy-900 { background: var(--color-navy-900); }
.line-card.tone-accent { background: var(--color-accent); }
.line-card h3 { margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.line-card p { margin-top: 1rem; max-width: 28rem; font-size: 1.125rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }

/* ==========================================================================
   COMPLIANCE — commitment / narrative / framework / due-diligence
   ========================================================================== */
/* Section padding was missing entirely — the mockup's wrapper is
   `bg-white py-24 md:py-32`, so this section rendered 236px short. */
.commitment { padding: 6rem 0; background: #fff; }
@media (min-width: 768px) { .commitment { padding: 8rem 0; } }
.commitment .grid { display: grid; gap: 3rem; }
@media (min-width: 768px) { .commitment .grid { grid-template-columns: repeat(5, 1fr); gap: 4rem; } }
.commitment .col-left { }
@media (min-width: 768px) { .commitment .col-left { grid-column: span 2; } }
.commitment h2 { margin-top: 1rem; font-size: 1.875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-heading); }
@media (min-width: 768px) { .commitment h2 { font-size: 2.25rem; } }
.commitment .col-right { display: flex; flex-direction: column; gap: 1.5rem; font-size: 1.125rem; line-height: 1.625; color: var(--color-muted); }
@media (min-width: 768px) { .commitment .col-right { grid-column: span 3; } }

.narrative { padding: 5rem 0; background: #fff; }
@media (min-width: 768px) { .narrative { padding: 6rem 0; } }
.narrative.surface { background: var(--color-surface); }
.narrative .inner { max-width: 48rem; }
.narrative h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-heading); }
@media (min-width: 768px) { .narrative h2 { font-size: 1.875rem; } }
.narrative .lead { margin-top: 1.5rem; border-left: 2px solid var(--color-accent); padding-left: 1.25rem; font-size: 1.125rem; font-weight: 500; line-height: 1.6; color: var(--color-heading); }
.narrative .body-text { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; font-size: 1rem; line-height: 1.6; color: var(--color-muted); }

.framework { background: var(--color-surface); padding: 6rem 0; }
@media (min-width: 768px) { .framework { padding: 8rem 0; } }
.framework-head { max-width: 42rem; }
.framework-head h2 { margin-top: 1rem; font-size: 1.875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-heading); }
@media (min-width: 768px) { .framework-head h2 { font-size: 2.25rem; } }
:root .framework-grid { margin-top: 3.5rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { :root .framework-grid { grid-template-columns: repeat(2, 1fr); } }
.pillar { border-radius: var(--radius-card); padding: 2rem; color: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; }
.pillar:hover { transform: translateY(-4px); box-shadow: 0 24px 56px rgba(10, 33, 80, 0.22); }
.pillar::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.15);
  margin-bottom: 1.25rem;
}
.pillar h3 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.pillar p { margin-top: 0.75rem; font-size: 1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); }
.pillar-1 { background: var(--color-navy-900); }
.pillar-2 { background: var(--color-navy); }
.pillar-3 { background: var(--color-navy-700); }
.pillar-4 { background: var(--color-accent); }

/* Pillar icons — the four marks from src/sections/compliance/Framework.tsx,
   inlined as data URIs. The ::before slot already existed but rendered a bare
   translucent square: the box was reserved, the artwork never added, so the
   section read as four blank chips. Delivered through CSS rather than the
   block markup because the live page content lives in the database, not in
   pages/compliance.html — an icon added to the template would never reach it.
   Colours are literal (currentColor has no meaning inside a data URI). */
.pillar::before { background: none; border-radius: 0; background-repeat: no-repeat; background-position: center; background-size: 26px 26px; }
.pillar-1::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M13 2.5 4.5 6v6c0 5.2 3.6 9.4 8.5 11 4.9-1.6 8.5-5.8 8.5-11V6L13 2.5Z' stroke='%2368d0f8' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='m9.5 12.8 2.4 2.4 4.6-4.9' stroke='%2368d0f8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pillar-2::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Ccircle cx='13' cy='13' r='10' stroke='%2368d0f8' stroke-width='1.5'/%3E%3Cpath d='M3.5 13h19M13 3.5c2.6 2.4 4 5.8 4 9.5s-1.4 7.1-4 9.5c-2.6-2.4-4-5.8-4-9.5s1.4-7.1 4-9.5Z' stroke='%2368d0f8' stroke-width='1.5'/%3E%3C/svg%3E"); }
.pillar-3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M7 3.5h9.5L21 8v14.5H7V3.5Z' stroke='%2368d0f8' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M16 3.5V8h4.5M10.5 13h7M10.5 17h7' stroke='%2368d0f8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.pillar-4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M4 22.5V10l9-6 9 6v12.5' stroke='%2368d0f8' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M9.5 22.5v-6h7v6M4 22.5h18' stroke='%2368d0f8' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.due-diligence { background: #fff; padding: 6rem 0; }
@media (min-width: 768px) { .due-diligence { padding: 8rem 0; } }
.dd-head { max-width: 48rem; }
.dd-head h2 { margin-top: 1rem; font-size: 1.875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-heading); }
@media (min-width: 768px) { .dd-head h2 { font-size: 2.25rem; } }
.dd-head p { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.6; color: var(--color-muted); }
:root .dd-list { margin-top: 2.5rem; display: grid; gap: 1rem; grid-template-columns: 1fr; max-width: 56rem; list-style: none; padding: 0; }
@media (min-width: 640px) { :root .dd-list { grid-template-columns: repeat(2, 1fr); } }
.dd-item {
  display: flex; align-items: flex-start; gap: 0.75rem; border-radius: var(--radius-card);
  border: 1px solid var(--color-border); background: var(--color-surface); padding: 1rem 1.25rem;
  font-size: 1rem; color: var(--color-ink); transition: border-color 0.2s, background-color 0.2s;
}
.dd-item::before {
  content: "";
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m3.5 9.5 3.5 3.5 7.5-8' stroke='%230079e1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--color-accent);
  font-weight: 600;
}
.dd-item:hover { border-color: var(--color-accent); background: #fff; }

/* ==========================================================================
   CONTACT — split layout + native enquiry form
   ========================================================================== */
/* Section padding was missing here too — same `bg-white py-24 md:py-32` wrapper
   as .commitment; this section rendered 281px short. */
.contact-split { padding: 6rem 0; background: #fff; }
@media (min-width: 768px) { .contact-split { padding: 8rem 0; } }
.contact-split .grid { display: grid; gap: 3.5rem; }
@media (min-width: 768px) { .contact-split .grid { grid-template-columns: repeat(2, 1fr); gap: 4rem; } }
.contact-split h2 { margin-top: 1rem; font-size: 1.875rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-heading); }
@media (min-width: 768px) { .contact-split h2 { font-size: 2.25rem; } }
.contact-split .lead-p { margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.6; color: var(--color-muted); }
:root .office-list { margin-top: 2.5rem; }
.office-item { border-top: 1px solid var(--color-border); padding: 1.5rem 0; }
.office-item:last-child { border-bottom: 1px solid var(--color-border); }
.office-item h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-heading); margin: 0; }
.office-item p { margin-top: 0.375rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-muted); }

.contact-form { border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-surface); padding: 2rem; }
.contact-form h3 { font-size: 1.125rem; line-height: 1.5556; font-weight: 600; letter-spacing: -0.01em; color: var(--color-heading); margin: 0; }
.form-fields { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, 1fr); } }
.form-fields input, .form-fields textarea {
  width: 100%; border-radius: var(--radius-control); border: 1px solid var(--color-border);
  background: #fff; padding: 0.75rem 1rem; font-size: 1rem; color: var(--color-ink);
  font-family: var(--font-sans); outline: none; transition: border-color 0.2s;
}
.form-fields input::placeholder, .form-fields textarea::placeholder { color: rgba(90, 107, 130, 0.6); }
.form-fields input:focus, .form-fields textarea:focus { border-color: var(--color-accent); }
.form-fields textarea { min-height: 8rem; resize: vertical; }
.contact-form .submit-btn { margin-top: 1.5rem; border: none; cursor: pointer; }
/* `.draft-notice` and its "your message was not sent" panel are gone with the
   draft form — Forminator's own response message replaces them. */

/* ==========================================================================
   FORMINATOR — the enquiry form's real backend.

   The form is created with `form-style => none`, which stops Forminator's own
   design stylesheet loading, so everything below is additive rather than a
   fight with the plugin's specificity. It restates the .form-fields/.form-row
   rules above against Forminator's markup — same values, so the form is
   indistinguishable from the design draft it replaced.
   ========================================================================== */
.contact-form .forminator-ui { margin-top: 1.5rem; }
.contact-form .forminator-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.contact-form .forminator-row + .forminator-row { margin-top: 1rem; }
.contact-form .forminator-col { flex: 1 1 100%; min-width: 0; }
@media (min-width: 640px) {
  .contact-form .forminator-col-6 { flex: 1 1 calc(50% - 0.5rem); }
}

.contact-form .forminator-input,
.contact-form .forminator-textarea {
  width: 100%; border-radius: var(--radius-control); border: 1px solid var(--color-border);
  background: #fff; padding: 0.75rem 1rem; font-size: 1rem; color: var(--color-ink);
  font-family: var(--font-sans); outline: none; transition: border-color 0.2s;
}
.contact-form .forminator-input::placeholder,
.contact-form .forminator-textarea::placeholder { color: rgba(90, 107, 130, 0.6); }
.contact-form .forminator-input:focus,
.contact-form .forminator-textarea:focus { border-color: var(--color-accent); }
.contact-form .forminator-textarea { min-height: 8rem; resize: vertical; }

/* The design is placeholder-only, but a placeholder is not a label: it vanishes
   on focus and screen readers do not reliably announce it. Keep the real labels
   and hide them visually — the look matches the mockup, the form is usable
   without sight. Never `display: none` here. */
.contact-form .forminator-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.contact-form .forminator-error-message {
  margin-top: 0.375rem; font-size: 0.8125rem; line-height: 1.5; color: #b32d2e;
}
.contact-form .forminator-input[aria-invalid="true"],
.contact-form .forminator-textarea[aria-invalid="true"] { border-color: #b32d2e; }

/* The response box: what the visitor sees after submitting.
   Forminator renders it as the FIRST child of the form, above every field, so
   the confirmation appeared above the fields rather than under the button the
   visitor just pressed. The form becomes a flex column purely so the box can be
   ordered last.

   Visibility is deliberately left to Forminator: its JS sets the inline display
   itself, shows the message, and hides it again after roughly eight seconds.
   Nothing here overrides that — an !important to pin it open would be fighting
   the plugin's own UX for no reason. */
.contact-form form.forminator-ui { display: flex; flex-direction: column; }
.contact-form .forminator-response-message { order: 99; }

/* Forminator prints every error twice: once here and again beside each field.
   This box is the form's aria-live region, so it is hidden VISUALLY only —
   removing it from the accessibility tree would leave screen-reader users with
   no feedback at all on a failed submit. */
.contact-form .forminator-response-message.forminator-error {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The success message stays visible — it is the only confirmation the visitor
   gets that the enquiry actually went. */
.contact-form .forminator-response-message.forminator-success {
  position: static; width: auto; height: auto; margin-top: 1rem; padding: 0.75rem 1rem;
  clip-path: none; white-space: normal; overflow: visible;
  border-radius: var(--radius-control);
  border: 1px solid rgba(0, 121, 225, 0.3); background: rgba(0, 121, 225, 0.05);
  font-size: 0.875rem; line-height: 1.6; color: var(--color-heading);
}

/* ==========================================================================
   TERMS — page stub
   ========================================================================== */
.page-stub { padding: var(--section-y) 0; }
.page-stub .eyebrow-muted { font-size: 0.75rem; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--color-muted); }
.page-stub h1 { margin-top: 0.75rem; font-size: 2.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-heading); }
.page-stub .body { margin-top: 1.5rem; max-width: 42rem; }
.page-stub .body p { color: var(--color-muted); }

/* ==========================================================================
   DUE DILIGENCE — document cards
   ========================================================================== */
/* Every card is a link to a published document. The padding moves from the <li>
   to the <a> so the whole card is the target, not just the words — the card
   already carries a hover state, which would otherwise promise more than it
   delivers. */
.dd-list .dd-item:has(a) { padding: 0; }
.dd-item > a {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem 1.25rem; width: 100%;
  color: inherit; text-decoration: none; font-weight: 500;
}
/* The tick is on the <li>, so a linked item moves it inside the <a> to keep the
   whole card clickable rather than just the words. */
.dd-list .dd-item:has(a)::before { display: none; }
.dd-item > a::before {
  content: ""; width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.125rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='m3.5 9.5 3.5 3.5 7.5-8' stroke='%230079e1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
}
.dd-item:focus-within { border-color: var(--color-accent); background: #fff; }

/* ==========================================================================
   LEGAL DOC — long-form policy and contract pages
   ========================================================================== */
/* These pages carry a 7,000-word contract and four policies, so they need real
   long-form typography rather than the single-paragraph stub the Terms page
   was built as. Measure is held near 38rem; clause numbering comes from the
   markup, not counters, because the documents cite their own clause numbers. */
.legal-doc .doc-meta { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--color-muted); }
.legal-doc .legal-body { margin-top: 2.5rem; max-width: 44rem; }
.legal-doc .legal-body > * + * { margin-top: 1.25rem; }
.legal-doc .legal-body h2 {
  margin-top: 3rem; font-size: 1.125rem; font-weight: 600; line-height: 1.4;
  letter-spacing: 0.01em; color: var(--color-heading);
}
.legal-doc .legal-body h3 {
  margin-top: 2.25rem; font-size: 1rem; font-weight: 600; color: var(--color-heading);
}
.legal-doc .legal-body h4 {
  margin-top: 2rem; font-size: 0.9375rem; font-weight: 600; color: var(--color-heading);
}
.legal-doc .legal-body p { font-size: 1rem; line-height: 1.7; color: var(--color-muted); }
.legal-doc .legal-body ol,
.legal-doc .legal-body ul { margin-top: 1.25rem; padding-left: 1.75rem; }
.legal-doc .legal-body li { font-size: 1rem; line-height: 1.7; color: var(--color-muted); }
.legal-doc .legal-body li + li { margin-top: 0.75rem; }
.legal-doc .legal-body li > ol,
.legal-doc .legal-body li > ul { margin-top: 0.75rem; }
.legal-doc .legal-body li::marker { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.legal-doc .legal-body strong { color: var(--color-heading); font-weight: 600; }
@media (min-width: 768px) {
  .legal-doc .legal-body h2 { font-size: 1.25rem; }
}