/*
Theme Name: Athene Tax
Author: Don Branco
Version: 1.17.1
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.2
Text Domain: athene
Tags: full-site-editing
*/
/* Front-end + editor CSS appended below in later tasks. */

/* =============================================================
   CANONICAL BREAKPOINTS — use ONLY these in @media queries:
     900px  — primary handoff breakpoint: columns stack, hamburger nav
     600px  — mobile: single column, tight gutter, 64px section rhythm
     768px  — tablet gutter step only (container-gutter 96 -> 40)
     1024px — hero bullets 5 -> 3 columns only
     1200px — office cards 4-up -> 2x2 only (below this the four
              content-width cards no longer fit on one row)
   Do not introduce new widths (the old 560/599 queries were drift and
   have been merged into 600). */

/* =============================================================
   HEADER  (Phase 5)
   ============================================================= */

/* Sticky header with subtle shadow */
/* In-page anchor links (e.g. the Tax page jump links #tax-compliance,
   #tax-advisory, #vat-refund): scroll smoothly and land BELOW the sticky
   header so the target section's title stays visible (the header is ~143px;
   the extra gives a little breathing room). */
html {
  scroll-padding-top: 160px;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.athene-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--wp--custom--shadow--sm);
  /* Solid full-bleed bar: the inner row carries its own (content-width) base
     background, which left transparent strips down each side. Paint the
     full-width template-part wrapper too so the navbar is solid edge-to-edge.
     The .scrolled rule below overrides this with the translucent blur. */
  background: var(--wp--preset--color--base);
}

/* The header template-part wrapper AND its inner group both carry the
   .athene-header class. Only the full-width wrapper should paint the bar
   chrome — neutralise the inner copy so it doesn't cast a second, inset
   box-shadow (or create a nested sticky context). */
.athene-header .athene-header {
  box-shadow: none;
  position: static;
  background: transparent;
}

/* Nav link colour + hover */
.wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  font-weight: 500;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent);
}

/* Fix 1: keep every TOP-LEVEL header nav item on a single line (the demo
   never wraps "Knowledge Hub" / "About us"). Scoped to the header's direct
   top-level items via :not(...__submenu-container ...) so the Services
   submenu panel (min-width:280px) may still wrap its longer labels. */
.athene-header
  .wp-block-navigation
  > .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content,
.athene-header
  .wp-block-navigation
  > .wp-block-navigation__container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content
  .wp-block-navigation-item__label {
  white-space: nowrap;
}

/* Services submenu panel */
.wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--md);
  box-shadow: var(--wp--custom--shadow--md);
  padding: var(--wp--preset--spacing--20) 0;
  min-width: 280px;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 6%, transparent);
}
/* WCAG 2.2: submenu toggle (chevron button) ≥24×24px tap target */
.wp-block-navigation .wp-block-navigation__submenu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
}
.wp-block-navigation .wp-block-navigation__submenu-icon button {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Fix 1: Tax sub-links shown INLINE inside the Services dropdown card.
   The "Tax" item is a nested core submenu (.athene-tax-submenu). By default
   core renders a nested submenu as a side flyout (absolutely positioned,
   single-row parent). Instead we flatten it so "Tax" reads as a heading and
   its 3 children (Tax Compliance / Indirect & Direct Tax Advisory / VAT
   refund services) sit indented within the SAME Services card — matching the
   designer demo. Scoped to the header. */

/* Don't clip the (grown) Services panel, and let it size to its content. */
.athene-header
  .wp-block-navigation
  > .wp-block-navigation__container
  .wp-block-navigation-submenu
  > .wp-block-navigation__submenu-container {
  overflow: visible;
  height: auto;
}

/* The "Tax" item becomes a full-width, vertically-stacking block so its
   nested rows flow beneath it (inside the same card) and grow the card. */
.athene-header
  .wp-block-navigation
  .athene-tax-submenu.wp-block-navigation-submenu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* Render the nested panel in-flow (not an absolutely-positioned flyout). */
.athene-header
  .wp-block-navigation
  .athene-tax-submenu
  > .wp-block-navigation__submenu-container {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  background: transparent;
  pointer-events: auto;
  inset: auto;
}
.athene-header
  .wp-block-navigation
  .athene-tax-submenu
  > .wp-block-navigation__submenu-container::before {
  content: none;
}
/* "Tax" parent row reads as a (still-clickable) heading: hide its caret. */
.athene-header
  .wp-block-navigation
  .athene-tax-submenu
  > .wp-block-navigation__submenu-icon,
.athene-header
  .wp-block-navigation
  .athene-tax-submenu
  > .wp-block-navigation-submenu__toggle
  .wp-block-navigation__submenu-icon {
  display: none;
}
/* Indent the 3 Tax sub-links beneath the "Tax" heading. */
.athene-header
  .wp-block-navigation
  .athene-tax-submenu
  > .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  padding-left: var(--wp--preset--spacing--60, 2rem);
  font-size: var(--wp--preset--font-size--small);
}

/* Polylang language switcher in header */
.wp-block-polylang-language-switcher,
.wp-block-polylang-navigation-language-switcher {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
}
.wp-block-polylang-language-switcher a,
.wp-block-polylang-navigation-language-switcher a {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  /* WCAG 2.2 target size: ensure ≥24px tap height */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.wp-block-polylang-language-switcher a:hover,
.wp-block-polylang-navigation-language-switcher a:hover {
  color: var(--wp--preset--color--accent);
}
.wp-block-polylang-language-switcher .current-lang a,
.wp-block-polylang-navigation-language-switcher .current-lang a {
  color: var(--wp--preset--color--accent);
}

/* =============================================================
   LANGUAGE SWITCHER DROPDOWN  (Fix 2)
   JS (athene-interactions.js #6) wraps the inline Polylang <ul> in
   .athene-lang-dd > [.athene-lang-dd__trigger + ul.athene-lang-dd__menu].
   The card mirrors the Services submenu panel: same background, border,
   radius, shadow + a hover "bridge", and opens on hover / click / focus.
   ============================================================= */
.athene-lang-dd {
  position: relative;
  display: flex;
  align-items: center;
}

/* Trigger: compact, shows current language + caret (matches nav links). */
.athene-lang-dd__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 2px;
  margin: 0;
  font-family: inherit;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  cursor: pointer;
  min-height: 24px;
}
.athene-lang-dd:hover .athene-lang-dd__trigger,
.athene-lang-dd.is-open .athene-lang-dd__trigger,
.athene-lang-dd__trigger:hover,
.athene-lang-dd__trigger:focus-visible {
  color: var(--wp--preset--color--accent);
}
.athene-lang-dd__caret {
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
.athene-lang-dd:hover .athene-lang-dd__caret,
.athene-lang-dd.is-open .athene-lang-dd__caret {
  transform: rotate(180deg);
}

/* Card: reuse the Services submenu panel look (base bg, divider border,
   md radius, md shadow). Closed by default; opens on hover / focus-within
   / .is-open (JS click toggle). Right-aligned so it stays in the band. */
.athene-lang-dd__menu.wp-block-polylang-language-switcher {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  left: auto;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 160px;
  padding: var(--wp--preset--spacing--20) 0;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--md);
  box-shadow: var(--wp--custom--shadow--md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
/* Hover "bridge" so the cursor can travel from trigger to card. */
.athene-lang-dd__menu.wp-block-polylang-language-switcher::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.athene-lang-dd:hover .athene-lang-dd__menu.wp-block-polylang-language-switcher,
.athene-lang-dd:focus-within .athene-lang-dd__menu.wp-block-polylang-language-switcher,
.athene-lang-dd.is-open .athene-lang-dd__menu.wp-block-polylang-language-switcher {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* The OPEN card lists ALL languages by full name (English / Suomi / Svenska),
   including the active one — the trigger shows only the short CODE (EN/FI/SV),
   so the current language must remain visible inside the card. */
.athene-lang-dd__menu.wp-block-polylang-language-switcher .current-lang {
  display: block;
}

/* Card rows: full-width tappable links, like the Services submenu items. */
.athene-lang-dd__menu.wp-block-polylang-language-switcher li {
  display: block;
  margin: 0;
}
.athene-lang-dd__menu.wp-block-polylang-language-switcher a {
  display: block;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  min-height: 0;
  color: var(--wp--preset--color--ink);
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
  white-space: nowrap;
}
.athene-lang-dd__menu.wp-block-polylang-language-switcher a:hover {
  color: var(--wp--preset--color--accent);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 6%, transparent);
}

/* =============================================================
   FOOTER  (Phase 5)
   ============================================================= */

/* Footer nav links: muted, no underline */
.athene-footer .wp-block-navigation .wp-block-navigation-item__content {
  color: var(--wp--preset--color--muted);
  text-decoration: none;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 400;
}
.athene-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--accent);
}
/* The vertical Menu column inherited the site blockGap (24px), which spaced
   its links further apart than the rest of the footer. */
.athene-footer .wp-block-navigation__container.is-vertical {
  gap: var(--wp--preset--spacing--30);
}

/* Footer bottom bar: flush paragraph margins */
.athene-footer-bar p {
  margin: 0;
}

/* Responsive: footer rows stack below 600px */
@media (max-width: 600px) {
  .athene-footer > .wp-block-group:first-child {
    flex-direction: column;
    /* Core's flex layout centres items by default; once the row stacks that
       indents the logo and the menu column away from the left edge the
       copyright row below already sits on. */
    align-items: flex-start;
    gap: var(--wp--preset--spacing--50);
  }
  .athene-footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--30);
  }
}

/* Logo: source SVG has a viewBox but no intrinsic width/height, so the custom-logo img collapses to 0x0 unless constrained. */
.custom-logo{display:block;max-width:100%;height:auto}
.athene-header .custom-logo{width:104px;height:auto}
.athene-footer .custom-logo{width:140px;height:auto}

/* =============================================================
   LAYOUT WIDTH BAND  (design .wrap: 1248px band, ~1056 content)
   The header + footer backgrounds stay full-bleed (alignfull), but
   their ROW CONTENT must be capped to the 1248 band and centred so
   the logo isn't jammed to the far-left and the switcher/links to the
   far-right at wide viewports. Each inner row keeps its own 96px side
   padding, giving an effective ~1056 content column to match design.
   ============================================================= */
.athene-header > .wp-block-group {
  max-width: var(--wp--custom--max-band, 1248px);
  margin-inline: auto;
  width: 100%;
}
.athene-footer {
  --wp--custom--max-band: 1248px;
}
.athene-footer > .wp-block-group {
  max-width: var(--wp--custom--max-band, 1248px);
  margin-inline: auto;
  width: 100%;
}
:root { --wp--custom--max-band: 1248px; --fog: #F5F6F4; }

/* ---- Adjacent coloured bands: no white stripe between them ----------
   `athene-has-bg` is added at render time (inc/blocks.php) to every
   full-bleed section that paints a NON-white background — from a palette
   preset, a custom colour, or one of our stylesheet overrides.

   Top-level sections are separated by the root block-gap (24px) and some
   carry their own inline margin-bottom. Between two white sections that
   gap is invisible, but between two coloured bands the page background
   shows through as a random white stripe. Collapse it so the bands meet.

   !important is required on the margin-bottom side: some sections set it
   as an INLINE style, which no selector specificity can beat. */
.athene-has-bg + .athene-has-bg {
  margin-top: 0 !important;
}
.athene-has-bg:has(+ .athene-has-bg) {
  margin-bottom: 0 !important;
}

/* ---- Constrained SECTION content -> design 1056 column --------------
   Every full-bleed section group (alignfull + has-global-padding +
   is-layout-constrained) hard-codes contentSize:1248px in block markup, so
   WP bakes `> :where(:not(.alignfull)…){max-width:1248px}` (specificity 0,1,0)
   into per-container inline styles. Lowering theme.json contentSize cannot
   override that per-block value. We re-cap the DIRECT children of those
   top-level bands to the global content-size (1056px) here — specificity
   (0,3,0) beats the baked rule — without touching nested groups (which lack
   has-global-padding) or full-bleed backgrounds (excluded + their own 100vw).
   Children that opt into a narrower column (hero stage 880, etc.) keep it via
   their own lower max-width. */
.alignfull.has-global-padding.is-layout-constrained
  > :not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide) {
  max-width: var(--wp--style--global--content-size, 1056px);
}
/* Sections that intentionally declare a narrower band keep it (the generic
   rule above would otherwise widen their direct children to 1056). The dark
   plum contact band caps content at 900px (block contentSize:900 / design
   .contact h2{max-width:900px}). Re-assert after the generic rule. */
.athene-contact.has-global-padding.is-layout-constrained
  > :not(.alignfull):not(.alignleft):not(.alignright):not(.alignwide) {
  max-width: 900px;
}





/* =============================================================
   HOMEPAGE PATTERNS  (Phase 7)
   ============================================================= */

/* ---- Shared bits ---------------------------------------------------- */
.athene-eyebrow { margin: 0; }
.athene-eyebrow--on-dark { color: rgba(255,255,255,0.6); }

/* Buttons: primary accent pill + outline ghost variants, token-driven.
   Two selector families per variant:
   - .athene-btn--* (+ core is-style-outline): hand-typed classes in existing
     (frozen) pattern markup — keep working forever.
   - .is-style-athene-*: the editor-pickable block styles registered in
     functions.php — the canonical way to get these variants on NEW buttons.
     They must be self-sufficient (no athene-btn base, no is-style-outline). */
.athene-btn .wp-block-button__link,
.is-style-athene-primary .wp-block-button__link,
.is-style-athene-ghost .wp-block-button__link,
.is-style-athene-ghost-dark .wp-block-button__link {
  border-radius: var(--wp--custom--border-radius--pill);
  font-weight: 500;
  line-height: 1.25;
}
.athene-btn--primary .wp-block-button__link:hover,
.is-style-athene-primary .wp-block-button__link:hover {
  background-color: color-mix(in srgb, var(--wp--preset--color--accent) 86%, #000);
}
/* Outline ghost (light surfaces): hairline border, ink text, transparent fill */
.athene-btn--ghost.is-style-outline .wp-block-button__link,
.is-style-athene-ghost .wp-block-button__link {
  border: 1px solid var(--wp--preset--color--hairline);
  background: transparent;
  color: var(--wp--preset--color--ink);
}
.athene-btn--ghost.is-style-outline .wp-block-button__link:hover,
.is-style-athene-ghost .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}
/* Hero "Contact Us" ghost button gets a solid white fill so it reads as a
   real button against the mist hero background (scoped to the hero CTAs so
   ghost buttons on other surfaces keep their transparent fill). */
.athene-hero__ctas .athene-btn--ghost.is-style-outline .wp-block-button__link,
.athene-hero__ctas .is-style-athene-ghost .wp-block-button__link {
  background: var(--wp--preset--color--base);
}
/* Careers "Send application" ghost button gets a solid white fill so it reads
   as a real button alongside the accent "Open positions" CTA (scoped to the
   careers CTAs so ghost buttons on other surfaces keep their transparent fill). */
.athene-career__ctas .athene-btn--ghost.is-style-outline .wp-block-button__link,
.athene-career__ctas .is-style-athene-ghost .wp-block-button__link {
  background: var(--wp--preset--color--base);
}
/* Outline ghost (dark surfaces): translucent white border, white text */
.athene-btn--ghost-dark.is-style-outline .wp-block-button__link,
.is-style-athene-ghost-dark .wp-block-button__link {
  border: 1px solid rgba(255,255,255,0.28);
  background: transparent;
  color: var(--wp--preset--color--base);
}
.athene-btn--ghost-dark.is-style-outline .wp-block-button__link:hover,
.is-style-athene-ghost-dark .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--base);
  background: rgba(255,255,255,0.06);
}
/* Vertically + horizontally center the label inside every button. The brand
   font has top-heavy vertical metrics, so with the default inline-block + line
   leading the text sat low (extra space on top). Flex centering + a tight
   line-height pins the label to the optical centre regardless of padding. */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---- Hero ----------------------------------------------------------- */
/* Close the gap between the sticky header and the first content section:
   WordPress applies a root-level block-gap as margin-block-start on the
   top-level <main>, leaving a visible strip below the navbar (most obvious
   where the hero's mist background meets the white header). */
.wp-site-blocks > main { margin-block-start: 0; }
.athene-hero { position: relative; overflow: clip; }
/* Interactive chevron world map (injected inline by assets/js/hero-map.js on
   the front page). The map and veil are decorative chrome behind the copy;
   the masked #heroGlow circle follows the cursor. Ported from the designer
   demo. */
.athene-hero .hero-bg {
  position: absolute;
  /* Break out of the section's global (96px) horizontal padding AND the
     constrained-layout 1248px content cap so the dotted map spans the FULL
     hero width edge-to-edge (full-bleed). The is-layout-constrained parent
     otherwise gives direct children max-width:1248px + margin-inline:auto. */
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  width: 100vw;
  max-width: 100vw !important;
  margin-inline: 0 !important;
  transform: translateX(-50%);
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.athene-hero .hero-bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.athene-hero .hero-veil {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  width: 100vw;
  max-width: 100vw !important;
  margin-inline: 0 !important;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(76% 66% at 50% 42%,
    rgba(245, 246, 247, 0.98) 0%,
    rgba(245, 246, 247, 0.95) 36%,
    rgba(245, 246, 247, 0.62) 58%,
    rgba(245, 246, 247, 0) 82%);
}
/* chevron map ripple — faint grey base chevrons */
.athene-hero .rchev { opacity: 0.30; }
/* cursor colour shows ONLY through the chevron shapes (vector mask) */
.athene-hero #heroGlow { transition: opacity 0.4s ease; }
@media (prefers-reduced-motion: reduce) {
  .athene-hero #heroGlow { display: none; }
}
.athene-hero > * { position: relative; z-index: 1; }
.athene-hero__headline {
  letter-spacing: var(--wp--custom--tracking--tight);
  line-height: 1.05;
  margin: 0;
}
.athene-hero__body { max-width: 640px; margin-inline: auto; line-height: 1.55; }
/* Hero copy column: cap at the design's 880px (.hero-copy), centered, even
   though the homepage post_content stage inherits the global contentSize. */
.athene-hero__stage { max-width: 880px !important; margin-inline: auto !important; }
/* Hero bullets grid is is-layout-grid (not constrained) so it does NOT pick up
   the content-size cap and would otherwise fill the section minus gutters
   (~1713px @1920). Cap it to the content band and centre it. */
.athene-hero__bullets { max-width: var(--wp--style--global--content-size, 1056px); margin-inline: auto; }
.athene-hero__num { margin: 0; }
.athene-hero__bullet p:last-child { margin: 0; line-height: 1.5; }

@media (max-width: 1024px) {
  .athene-hero__bullets { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .athene-hero__bullets { grid-template-columns: 1fr 1fr !important; }
}

/* ---- Services grid -------------------------------------------------- */
.athene-services__head { gap: var(--wp--preset--spacing--40); }
.athene-services__title { margin: 0; max-width: 720px; }

/* 6-col grid: row 1 = three 2-col tiles, row 2 = two 3-col tiles.
   The grid items are the <li class="wp-block-post"> wrappers, not .athene-tile. */
.athene-tiles {
  grid-template-columns: repeat(6, 1fr) !important;
  grid-auto-rows: minmax(300px, auto);
  gap: var(--wp--preset--spacing--40) !important;
  margin: 0;
  padding: 0;
  list-style: none;
}
.athene-tiles > li { grid-column: span 2; margin: 0; }
.athene-tiles > li:nth-child(4),
.athene-tiles > li:nth-child(5) { grid-column: span 3; }
/* Every tile starts identical (light grey card, ink text, white icon/arrow
   chips). Hover swaps in the dark-plum "feature" treatment — same on all
   five tiles, not just one — as the interactive/selected state. */
.athene-tile {
  position: relative;
  height: 100%;
  text-decoration: none;
  background: var(--wp--preset--color--band);
  border: 1px solid var(--wp--preset--color--divider);
  color: var(--wp--preset--color--ink);
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: var(--wp--preset--spacing--30);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease,
    color 0.18s ease;
}
.athene-tile:hover {
  box-shadow: var(--wp--custom--shadow--md);
  border-color: transparent;
  background: var(--wp--preset--color--plum);
  color: var(--wp--preset--color--base);
}
.athene-tile:hover .athene-tile__title a { color: var(--wp--preset--color--base); }
.athene-tile:hover .athene-tile__excerpt { color: rgba(255,255,255,0.62); }
.athene-tile:hover .athene-tile__icon {
  background: color-mix(in srgb, var(--wp--preset--color--mauve) 20%, transparent);
  border-color: transparent;
  color: var(--wp--preset--color--mauve);
}

.athene-tile__top {
  width: 100%;
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}
.athene-tile__icon {
  width: 52px; height: 52px; flex: 0 0 auto;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: 10px;
  color: var(--wp--preset--color--ink);
  display: flex; align-items: center; justify-content: center;
}
.athene-tile__bottom {
  margin-top: auto;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: var(--wp--preset--spacing--30);
}
.athene-tile__title {
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
  font-size: 26px !important;
  line-height: 1.12 !important;
}
.athene-tile__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
/* Stretched-link: make the whole tile clickable via the post-title anchor
   (replaces the former invalid Group tagName:"a" wrapper). */
.athene-tile__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.athene-tile__excerpt {
  margin: 0;
  color: var(--wp--preset--color--muted);
  line-height: 1.45;
}
/* Wider row-2 tiles can carry the larger display title */
.athene-tiles > li:nth-child(4) .athene-tile__title,
.athene-tiles > li:nth-child(5) .athene-tile__title { font-size: 30px !important; }
.athene-tile__excerpt p { margin: 0; }
.athene-tile__arrow {
  width: 44px; height: 44px; flex: 0 0 auto;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--hairline);
  color: var(--wp--preset--color--ink);
  border-radius: 50%;
  margin-top: var(--wp--preset--spacing--20);
  display: flex; align-items: center; justify-content: center;
}
.athene-tile:hover .athene-tile__arrow {
  background: var(--wp--preset--color--mauve);
  border-color: transparent;
  color: var(--wp--preset--color--plum);
}

@media (max-width: 900px) {
  .athene-tiles { grid-template-columns: 1fr 1fr !important; grid-auto-rows: minmax(280px, auto); }
  .athene-tiles > li,
  .athene-tiles > li:nth-child(4),
  .athene-tiles > li:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 600px) {
  .athene-tiles { grid-template-columns: 1fr !important; grid-auto-rows: auto; }
}

/* ---- Proof points --------------------------------------------------- */
/* Base flex/grid: previously generated by WP's block-supports layout
   system (wp:group layout attrs); athene/proof-points is now a dynamic
   block rendering static HTML, so these must be explicit. */
.athene-proof__head {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  max-width: 640px;
}
.athene-proof__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}
.athene-proof-card {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50);
}
.athene-proof-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
.athene-proof-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.athene-proof__title { margin: 0; }
.athene-proof-card { height: 100%; }
.athene-proof-card__title { margin: 0; }
.athene-proof-card__body { margin: 0; }
.athene-proof-card__icon {
  width: 64px; height: 64px; flex: 0 0 auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--wp--preset--color--mauve) 20%, transparent);
}
.athene-proof-card__icon--light {
  background: var(--wp--preset--color--band);
  border: 1px solid #E8EBEF;
}
.athene-proof-card--dark .athene-proof-card__body { color: rgba(255,255,255,0.82); }

@media (max-width: 900px) {
  .athene-proof__row { grid-template-columns: 1fr !important; }
}

/* ---- Trust ---------------------------------------------------------- */
.athene-logos { gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.athene-logo {
  margin: 0;
  /* WCAG AA: muted token (#5A6675) on white = ~5.9:1, up from #B7BEC8 (1.87:1). */
  color: var(--wp--preset--color--muted);
  font-size: 23px;
  line-height: 1.2;
}
.athene-testimonial__quote { margin: 0; max-width: 980px; margin-inline: auto; }
.athene-testimonial__attr p { margin: 0; }
.athene-pager { margin-top: var(--wp--preset--spacing--30); }
.athene-pager__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--wp--preset--color--hairline);
}
.athene-pager__btn--accent { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
.athene-pager__dots { display: inline-flex; align-items: center; gap: 9px; }
.athene-pager__dots i {
  display: block; width: 6px; height: 6px; border-radius: 100px;
  background: var(--wp--preset--color--hairline);
}
.athene-pager__dots i.is-active { width: 28px; background: var(--wp--preset--color--accent); }

@media (max-width: 600px) {
  .athene-logos { justify-content: center; gap: var(--wp--preset--spacing--40); }
  .athene-logo { font-size: 18px; }
}

/* ---- Contact strip -------------------------------------------------- */
.athene-contact__headline { margin: 0; }

/* =============================================================
   SERVICE DETAIL  (Phase 7)
   ============================================================= */

/* Card surface derived from tokens (faint cool gray) */
.athene-service {
  --athene-card: color-mix(in srgb, var(--wp--preset--color--divider) 45%, var(--wp--preset--color--base));
}

.athene-service .athene-eyebrow { margin: 0; }

/* ---- Service hero --------------------------------------------------- */
.athene-service-hero__row > .athene-service-hero__text {
  flex: 1 1 460px;
  max-width: 540px;
  min-width: 0;
}
.athene-service-hero__headline { margin: 0; }
.athene-service-hero__intro { margin-block: 0; max-width: 540px; }
.athene-service-hero__media {
  flex: 1 1 480px;
  max-width: 644px;
  margin: 0;
}
.athene-service-hero__media img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* ---- For / Outcome -------------------------------------------------- */
.athene-foroutcome__row > .athene-foroutcome__col { flex: 1 1 360px; min-width: 0; }
.athene-foroutcome__row > .athene-foroutcome__col:first-child { max-width: 540px; }
.athene-foroutcome__row > .athene-foroutcome__col:last-child { max-width: 628px; }
.athene-foroutcome__lead { margin: 0; color: var(--wp--preset--color--ink); }

/* ---- What's included (jump band) ------------------------------------ */
/* Paper artboard 128-0: the "Jump to a service area" label on the plum band
   is mauve (#C9A9C6), unlike the white-60% eyebrow on the contact strip. */
.athene-included .athene-eyebrow--on-dark { color: var(--wp--preset--color--mauve); }
.athene-included__grid { align-items: stretch; }
.athene-jump {
  position: relative;
  height: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--mauve) 28%, transparent);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.athene-jump:hover { background: rgba(255,255,255,0.09); border-color: color-mix(in srgb, var(--wp--preset--color--mauve) 50%, transparent); }
.athene-jump__anchor {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
}
.athene-jump__num { margin: 0; color: var(--wp--preset--color--mauve); }
.athene-jump__title { margin: 0; }
.athene-jump__icon { flex: 0 0 auto; color: var(--wp--preset--color--mauve); }

/* ---- Generic content section ---------------------------------------- */
.athene-section__head { max-width: 820px; }
.athene-section__title { margin: 0; }
.athene-section__body { margin: 0; }
.athene-section__lead { margin: 0; color: var(--wp--preset--color--ink); }
.athene-section__note { margin: 0; max-width: 820px; }

.athene-directives {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.athene-directives li {
  position: relative;
  padding-left: 22px;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.5;
}
.athene-directives li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--accent);
  font-weight: 700;
}

/* Point cards */
.athene-section__grid { align-items: stretch; }
.athene-point {
  height: 100%;
  background: var(--athene-card);
  border: 1px solid var(--wp--preset--color--divider);
}
.athene-point__title { margin: 0; color: var(--wp--preset--color--ink); }
.athene-point__body { margin: 0; }

/* Alt (tinted) section: tint the band, flip cards to white */
.athene-section--alt .athene-point {
  background: var(--wp--preset--color--base);
}

.athene-section__ctas { margin-top: var(--wp--preset--spacing--50); }

/* Pills (Designed for tags) */
.athene-pills { gap: 10px; }
.athene-pill {
  margin: 0;
  padding: 8px 16px;
  background: var(--athene-card);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--pill);
  color: var(--wp--preset--color--ink);
}

/* Checklist (two-column scope list) */
.athene-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.athene-checklist li {
  position: relative;
  padding-left: 30px;
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.5;
  color: var(--wp--preset--color--ink);
}
.athene-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 16px;
  height: 16px;
  background-color: var(--wp--preset--color--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M20 6L9 17l-5-5%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M20 6L9 17l-5-5%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 900px) {
  .athene-service-hero__media { order: -1; }
}

/* =============================================================
   SERVICES INDEX  (Phase 7)
   ============================================================= */

/* ---- Intro header (split text + image) ------------------------------ */
.athene-services-intro__row > .athene-services-intro__text {
  flex: 1 1 420px;
  max-width: 540px;
  min-width: 0;
}
.athene-services-intro__headline { margin: 0; }
.athene-services-intro__lead { max-width: 480px; }
.athene-services-intro__media {
  flex: 1 1 480px;
  max-width: 644px;
  margin: 0;
}
.athene-services-intro__media img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* ---- Index tiles: 6-col grid, row1 = three 2-col, row2 = two 3-col --- */
.athene-index__tiles {
  grid-template-columns: repeat(6, 1fr) !important;
  grid-auto-rows: minmax(300px, auto);
  gap: var(--wp--preset--spacing--40) !important;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: athene-tile;
}
.athene-index__tiles > li { grid-column: span 2; margin: 0; counter-increment: athene-tile; }
.athene-index__tiles > li:nth-child(4),
.athene-index__tiles > li:nth-child(5) { grid-column: span 3; }

/* The tile shell — light grey card by default */
.athene-index-tile {
  position: relative;
  height: 100%;
  text-decoration: none;
  background: var(--wp--preset--color--band);
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  overflow: hidden;
  color: var(--wp--preset--color--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease,
    color 0.18s ease;
}
/* Every tile starts identical (light grey card). Hover swaps in the dark-plum
   "feature" treatment on all tiles alike, matching the homepage's .athene-tile. */
.athene-index-tile:hover {
  box-shadow: var(--wp--custom--shadow--md);
  border-color: transparent !important;
  background: var(--wp--preset--color--plum);
  color: var(--wp--preset--color--base);
}
.athene-index-tile:hover .athene-index-tile__icon {
  background: color-mix(in srgb, var(--wp--preset--color--mauve) 20%, transparent);
  border-color: transparent;
  color: var(--wp--preset--color--mauve);
}
.athene-index-tile:hover .athene-index-tile__num { color: rgba(255,255,255,0.45); }
.athene-index-tile:hover .athene-index-tile__title a { color: var(--wp--preset--color--base); }
.athene-index-tile:hover .athene-index-tile__excerpt { color: rgba(255,255,255,0.82); }
.athene-index-tile:hover .athene-index-tile__more,
.athene-index-tile:hover .athene-index-tile__more p { color: var(--wp--preset--color--mauve); }

.athene-index-tile__body {
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}
.athene-index-tile__top {
  width: 100%;
  flex: 0 0 auto;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}
.athene-index-tile__icon {
  width: 52px; height: 52px; flex: 0 0 auto;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: 10px;
  color: var(--wp--preset--color--ink);
}
.athene-index-tile__num {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  line-height: 1;
  color: #A6AEBA;
}
.athene-index-tile__num::before { content: "0" counter(athene-tile); }
.athene-index-tile__title {
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
}
.athene-index-tile__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
/* Stretched-link: whole index tile clickable via the post-title anchor
   (replaces the former invalid Group tagName:"a" wrapper). */
.athene-index-tile__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.athene-index-tile__excerpt {
  margin: 0;
  color: var(--wp--preset--color--muted);
  line-height: 1.5;
}
.athene-index-tile__excerpt p { margin: 0; }
.athene-index-tile__more {
  flex: 0 0 auto;
  color: var(--wp--preset--color--accent);
}
.athene-index-tile__more p { margin: 0; color: var(--wp--preset--color--accent); }

@media (max-width: 900px) {
  .athene-index__tiles { grid-template-columns: 1fr 1fr !important; grid-auto-rows: minmax(280px, auto); }
  .athene-index__tiles > li,
  .athene-index__tiles > li:nth-child(4),
  .athene-index__tiles > li:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 600px) {
  .athene-index__tiles { grid-template-columns: 1fr !important; grid-auto-rows: auto; }
}
@media (max-width: 900px) {
  .athene-services-intro__media { order: -1; }
}

/* =============================================================
   ABOUT US  (Phase 7)
   ============================================================= */

/* ---- About head (split text + image) -------------------------------- */
.athene-about-head__row > .athene-about-head__text {
  flex: 1 1 420px;
  max-width: 540px;
  min-width: 0;
}
.athene-about-head__headline { margin: 0; }
.athene-about-head__lead { max-width: 460px; }
.athene-about-head__media {
  flex: 1 1 480px;
  max-width: 644px;
  margin: 0;
}
.athene-about-head__media img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
@media (max-width: 900px) {
  .athene-about-head__media { order: -1; }
}

/* ---- Delivery: heading + five-step process -------------------------- */
/* Grey band background; overrides the block's inline has-base-background-color. */
.athene-delivery {
  background-color: var(--wp--preset--color--band) !important;
}
/* Base flex: previously generated by WP's block-supports layout system;
   athene/delivery is now a dynamic block rendering static HTML. */
.athene-delivery__head {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  max-width: 760px;
}
.athene-process {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
}
.athene-step {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
.athene-delivery__title { margin: 0; }
.athene-delivery__intro { margin: 0; }
.athene-process__label { margin: 0; }
.athene-process__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--40);
  align-items: stretch;
}
.athene-process__row > .athene-step {
  flex: 1 1 0;
  min-width: 180px;
}
.athene-step__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 36px;
}
.athene-step__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--wp--custom--border-radius--pill);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  font-style: normal;
  line-height: 1;
}
.athene-step__line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--wp--preset--color--divider);
}
.athene-step__title { margin: 0; }
.athene-step__label { margin: 0; }
.athene-step__body { margin: 0; }

@media (max-width: 900px) {
  .athene-process__row > .athene-step { flex: 1 1 40%; min-width: 220px; }
}
@media (max-width: 600px) {
  .athene-process__row > .athene-step { flex: 1 1 100%; }
}

/* ---- Our View (View Group band) ------------------------------------- */
.athene-vg__inner > .athene-vg__text {
  flex: 1 1 440px;
  max-width: 676px;
  min-width: 0;
}
.athene-vg__title { margin: 0; }
.athene-vg__body { margin: 0; color: rgba(255,255,255,0.82); }
.athene-vg__link { margin: 0; }
.athene-vg__link a { color: var(--wp--preset--color--mauve); text-decoration: none; }
.athene-vg__link a:hover { text-decoration: underline; }
.athene-vg__card {
  flex: 0 0 auto;
  min-width: 320px;
  min-height: 200px;
}
.athene-vg__logo {
  width: 200px;
  max-width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .athene-vg__card { width: 100%; min-width: 0; }
}

/* ---- Team: discipline cards ----------------------------------------- */
/* Base flex/grid: previously generated by WP's block-supports layout
   system; athene/team is now a dynamic block rendering static HTML. */
.athene-team__head {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  max-width: 760px;
}
.athene-team__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}
.athene-disc {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  height: 100%;
  background: var(--wp--preset--color--band);
}
.athene-disc__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px; flex: 0 0 auto;
  background: var(--wp--preset--color--base);
  border-radius: var(--wp--custom--border-radius--md);
}
.athene-team__title { margin: 0; }
.athene-team__body { margin: 0; }
.athene-team__row { align-items: stretch; }
.athene-disc__title { margin: 0; }
.athene-disc__body { margin: 0; }
@media (max-width: 900px) {
  .athene-team__row { grid-template-columns: 1fr !important; }
}

/* ---- Career callout ------------------------------------------------- */
.athene-career__inner > .athene-career__text {
  flex: 1 1 420px;
  max-width: 620px;
  min-width: 0;
}
.athene-career__title { margin: 0; }
.athene-career__body { margin: 0; }
.athene-career__ctas { flex: 0 0 auto; }

/* =============================================================
   CLIENTS  (Phase 7)
   ============================================================= */

/* ---- Clients head (split text + image) ------------------------------ */
.athene-clients-head__row > .athene-clients-head__text {
  flex: 1 1 420px;
  max-width: 540px;
  min-width: 0;
}
.athene-clients-head__headline { margin: 0; }
.athene-clients-head__lead { max-width: 500px; }
.athene-clients-head__media {
  flex: 1 1 480px;
  max-width: 644px;
  margin: 0;
}
.athene-clients-head__media img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
@media (max-width: 900px) {
  .athene-clients-head__media { order: -1; }
}

/* ---- Industries: six-card grid -------------------------------------- */
/* Base flex/grid: previously generated by WP's block-supports layout
   system; athene/industries is now a dynamic block rendering static HTML. */
.athene-industries__head {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  max-width: 720px;
}
.athene-industries__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--wp--preset--spacing--40);
}
.athene-industry {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  height: 100%;
  background: var(--wp--preset--color--band);
}
.athene-industry__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px; flex: 0 0 auto;
  background: var(--wp--preset--color--base);
  border-radius: var(--wp--custom--border-radius--md);
}
.athene-industries__title { margin: 0; }
.athene-industries__intro { margin: 0; }
.athene-industries__grid { align-items: stretch; }
.athene-industry__title { margin: 0; }
.athene-industry__body { margin: 0; }
@media (max-width: 900px) {
  .athene-industries__grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .athene-industries__grid { grid-template-columns: 1fr !important; }
}

/* ---- Clients value: four numbered columns --------------------------- */
.athene-value__title { margin: 0; }
.athene-value__row { align-items: start; }
.athene-value-item__num { margin: 0; }
.athene-value-item__title { margin: 0; }
.athene-value-item__body { margin: 0; }
@media (max-width: 900px) {
  .athene-value__row { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .athene-value__row { grid-template-columns: 1fr !important; }
}

/* ---- Mini cases: dark plum stat panel ------------------------------- */
/* Base flex/grid: previously generated by WP's block-supports layout
   system; athene/mini-cases is now a dynamic block rendering static HTML. */
.athene-mini__panel {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--50);
}
.athene-mini__head {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
.athene-mini__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--40);
}
.athene-stat {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
.athene-mini__title { margin: 0; }
.athene-mini__row { align-items: start; }
.athene-stat__num { margin: 0; }
.athene-stat__body { margin: 0; color: var(--wp--preset--color--mauve); }
@media (max-width: 900px) {
  .athene-mini__row { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .athene-mini__row { grid-template-columns: 1fr !important; }
}

/* ---- Clients trust heading (above reused trust pattern) ------------- */
.athene-trust-head__title { margin: 0; }
/* Tighten the reused trust section's top padding when it follows the heading */
.athene-trust-head + .athene-trust { padding-top: var(--wp--preset--spacing--50) !important; }

/* =============================================================
   KNOWLEDGE HUB  (Phase 7 — Task 7)
   ============================================================= */

/* ---- Shared: topic tag pills + placeholder thumb -------------------- */
.athene-tag,
.athene-tag a {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--wp--custom--border-radius--pill);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.athene-tag a { padding: 0; background: transparent; }
.athene-tag--solid,
.athene-tag--solid a {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}
.athene-card__date { margin: 0; white-space: nowrap; }

/* Empty featured-image placeholder so cards keep their proportions */
.athene-feature__media .wp-block-post-featured-image,
.athene-card__thumb,
.athene-card .wp-block-post-featured-image {
  background: var(--wp--preset--color--band);
}

/* ---- KH head -------------------------------------------------------- */

/* ---- Split page headers: Knowledge Hub + Locations ------------------
   Both headers now carry a supporting image beside the copy, matching
   About us / Clients, and so drop the flat band grey for a white
   background. Same geometry as those two: text column capped, media
   column up to 644px at a fixed 400px crop, media first on narrow
   screens. (Consolidating these four near-identical split-head rule
   sets into one shared class is the follow-up in the audit.) */
.athene-kh-head__row > .athene-kh-head__text,
.athene-locations-head__row > .athene-locations-head__text {
  flex: 1 1 420px;
  max-width: 540px;
  min-width: 0;
}
.athene-kh-head__headline,
.athene-locations-head__headline { margin: 0; }
.athene-kh-head__lead,
.athene-locations-head__lead { margin: 0; max-width: 500px; }
.athene-kh-head__media,
.athene-locations-head__media {
  flex: 1 1 480px;
  max-width: 644px;
  margin: 0;
}
.athene-kh-head__media img,
.athene-locations-head__media img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
@media (max-width: 900px) {
  .athene-kh-head__media,
  .athene-locations-head__media { order: -1; }
}
@media (max-width: 600px) {
  .athene-kh-head__row,
  .athene-locations-head__row { flex-direction: column !important; }
  .athene-kh-head__media,
  .athene-locations-head__media {
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100%;
  }
}

/* ---- Featured (large split card) ------------------------------------ */
.athene-kh-featured .athene-eyebrow { margin: 0; }
.athene-feature {
  background: var(--wp--preset--color--band);
  border-radius: var(--wp--custom--border-radius--lg);
  overflow: hidden;
  align-items: stretch !important;
  column-gap: 0;
}
.athene-feature__media {
  flex: 0 0 45%;
  max-width: 45%;
  background: var(--wp--preset--color--divider);
}
.athene-feature__media .wp-block-post-featured-image,
.athene-feature__img {
  height: 100%;
  margin: 0;
}
.athene-feature__media img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}
/* Placeholder fill when no featured image is set */
.athene-feature__media:has(.wp-block-post-featured-image:empty),
.athene-feature__media .wp-block-post-featured-image:empty {
  min-height: 360px;
}
/* Child combinator raises specificity above WP's generated flex-layout
   container rule (.wp-container-*{align-items:center} from justifyContent:center),
   so the body content stays flush-left on BOTH the front-end and the editor
   canvas — not just whichever stylesheet loads last. */
.athene-feature > .athene-feature__body { flex: 1 1 0; min-width: 0; align-items: flex-start; background: var(--wp--preset--color--band); }
.athene-feature__meta { gap: var(--wp--preset--spacing--30); }
.athene-feature__title { margin: 0; }
.athene-feature__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.athene-feature__title a:hover { color: var(--wp--preset--color--accent); }
.athene-feature__excerpt { margin: 0; color: var(--wp--preset--color--muted); line-height: 1.5; max-width: 560px; }
.athene-feature__excerpt p { margin: 0; }
.athene-feature__more {
  margin: 0;
  color: var(--wp--preset--color--accent);
  font-weight: 600;
  text-decoration: none;
}
.athene-feature__more:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .athene-feature { flex-direction: column !important; row-gap: var(--wp--preset--spacing--40); }
  .athene-feature__media { flex: 1 1 auto; max-width: 100%; }
  .athene-feature__media img { min-height: 220px; }
}

/* ---- Articles bar: filters + search --------------------------------- */
.athene-kh-bar { gap: var(--wp--preset--spacing--40); }
.athene-kh-filters { gap: var(--wp--preset--spacing--20); }
.athene-filter { margin: 0; }
.athene-filter a {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: var(--wp--custom--border-radius--pill);
  color: var(--wp--preset--color--ink);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  text-decoration: none;
  line-height: 1.1;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.athene-filter a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.athene-filter--active a {
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}
.athene-filter--active a:hover { color: var(--wp--preset--color--base); }

.athene-kh-search { margin: 0; }
.athene-kh-search .wp-block-search__inside-wrapper {
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: var(--wp--custom--border-radius--pill);
  padding: 4px 6px 4px 18px;
  min-width: 260px;
  background: var(--wp--preset--color--base);
}
.athene-kh-search .wp-block-search__input {
  border: 0;
  background: transparent;
  font-size: var(--wp--preset--font-size--small);
  padding: 8px 0;
}
.athene-kh-search .wp-block-search__input:focus { outline: none; }

/* ---- Article grid (3-col cards) ------------------------------------- */
.athene-kh-grid__tpl {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--wp--preset--spacing--40) !important;
  margin: 0;
  padding: 0;
  list-style: none;
}
.athene-kh-grid__tpl > li { margin: 0; }
.athene-card {
  height: 100%;
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--md);
  overflow: hidden;
  flex-wrap: nowrap !important;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.athene-card:hover { box-shadow: var(--wp--custom--shadow--md); border-color: var(--wp--preset--color--hairline); }
/* .athene-card is a vertical flex column with WP's default align-items:
   flex-start (shrink-to-fit), so the featured-image figure otherwise renders
   at its own intrinsic width instead of the card's full width. */
.athene-card .wp-block-post-featured-image {
  align-self: stretch;
  width: 100%;
}
.athene-card__thumb { margin: 0; }
.athene-card__thumb img,
.athene-card .wp-block-post-featured-image img {
  width: 100%;
  height: 176px;
  object-fit: cover;
  display: block;
}
.athene-card .wp-block-post-featured-image:empty,
.athene-card__thumb:empty { display: block; height: 176px; background: var(--wp--preset--color--band); }
.athene-card__body { flex: 1 1 auto; }
.athene-card__meta { gap: var(--wp--preset--spacing--30); }
.athene-card__title { margin: 0; }
.athene-card__title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.athene-card__title a:hover { color: var(--wp--preset--color--accent); }
.athene-card__excerpt { margin: 0; color: var(--wp--preset--color--muted); line-height: 1.5; }
.athene-card__excerpt p { margin: 0; }

.athene-kh-pagination { margin-top: var(--wp--preset--spacing--50); gap: var(--wp--preset--spacing--30); }
.athene-kh-pagination a, .athene-kh-pagination .page-numbers { color: var(--wp--preset--color--muted); text-decoration: none; }
.athene-kh-pagination .current { color: var(--wp--preset--color--accent); font-weight: 700; }

@media (max-width: 900px) {
  .athene-kh-grid__tpl { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .athene-kh-grid__tpl { grid-template-columns: 1fr !important; }
  .athene-kh-search .wp-block-search__inside-wrapper { width: 100%; }
}

/* ---- Guides & downloads (4-col cards) ------------------------------- */
.athene-kh-guides__head { gap: var(--wp--preset--spacing--30); max-width: 720px; }
/* Base flex/grid: previously generated by WP's block-supports layout
   system; athene/kh-guides is now a dynamic block rendering static HTML. */
.athene-kh-guides__head {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
.athene-guide {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
.athene-guide__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.athene-guide__text {
  display: flex;
  flex-direction: column;
}
.athene-guide__dl {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
}
.athene-kh-guides__title { margin: 0; }
.athene-kh-guides__intro { margin: 0; }
.athene-kh-guides__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--wp--preset--spacing--40) !important;
  align-items: stretch;
}
.athene-guide {
  height: 100%;
  background: var(--wp--preset--color--band);
  border-radius: var(--wp--custom--border-radius--md);
  flex-wrap: nowrap !important;
}
.athene-guide__icon {
  width: 48px; height: 48px; flex: 0 0 auto;
  background: var(--wp--preset--color--base);
  border-radius: var(--wp--custom--border-radius--sm);
  color: var(--wp--preset--color--accent);
}
.athene-guide__text { gap: var(--wp--preset--spacing--10); }
.athene-guide__title { margin: 0; color: var(--wp--preset--color--ink); }
.athene-guide__type { margin: 0; }
.athene-guide__dl { margin-top: auto; }
.athene-guide__link {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 500;
  text-decoration: none;
}
.athene-guide__link:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .athene-kh-guides__grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .athene-kh-guides__grid { grid-template-columns: 1fr !important; }
}

/* ---- Subpage header -> first content section spacing ----------------
   WP's global :root fallback block-gap (theme.json spacing|40, 24px) and
   the page template's own blockGap:0 override have equal CSS specificity,
   so which one wins is decided by injection order, and that order differs
   between page templates (page-no-title) and archive templates
   (archive-insight) — Locations lost the tie, Knowledge Hub won it,
   producing two different gaps under the identical header margin-bottom.
   Pin margin-top: 0 explicitly so the gap is always sourced from the
   header's own margin-bottom, never from this cascade coin-flip. */
.athene-kh-featured,
.athene-offices { margin-top: 0 !important; }

/* ---- Newsletter band ------------------------------------------------ */
.athene-nl__band { background: var(--wp--preset--color--band); }
.athene-nl__text { gap: var(--wp--preset--spacing--40); max-width: 520px; }
.athene-nl__title { margin: 0; }
.athene-nl__sub { margin: 0; }
.athene-nl__form { flex: 0 0 auto; min-width: 420px; }
/* Fluent Forms: this form has no column/container layout configured, so each
   field is its own stacked .ff-el-group block by default (email, consent,
   submit). Flex the fieldset itself so email + submit sit on one row like
   the design, and let the (legally required, not present in the design)
   consent checkbox wrap to its own compact row underneath. */
.athene-nl__form .fluentform .ff-el-group { margin-bottom: 0; }
.athene-nl__form .fluentform .ff-el-form-control {
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: var(--wp--custom--border-radius--pill);
  padding: 13px 20px;
  background: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
}
.athene-nl__form .ff-t-container { display: flex; gap: var(--wp--preset--spacing--20); align-items: flex-start; flex-wrap: wrap; }
.athene-nl__form .fluentform fieldset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
}
.athene-nl__form .fluentform fieldset > .ff-el-group { order: 1; flex: 1 1 240px; }
.athene-nl__form .fluentform fieldset > .ff_submit_btn_wrapper { order: 2; flex: 0 0 auto; }
.athene-nl__form .fluentform fieldset > .ff-el-group:has(.ff-el-form-check) { order: 3; flex: 1 1 100%; }
.athene-nl__form .ff-el-input--content input[type="email"] { min-width: 240px; width: 100%; }
/* Shared primary-button treatment for ALL Fluent Forms submits (newsletter +
   contact card). Context rules below only add layout (width/padding/margin). */
.athene-nl__form .fluentform .ff-btn-submit,
.athene-cf__form-wrap .fluentform .ff-btn-submit {
  background: var(--wp--preset--color--accent) !important;
  border-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
  border-radius: var(--wp--custom--border-radius--pill) !important;
  font-size: var(--wp--preset--font-size--small) !important;
  font-weight: 500;
  transition: background-color 0.18s ease;
}
.athene-nl__form .fluentform .ff-btn-submit:hover,
.athene-cf__form-wrap .fluentform .ff-btn-submit:hover {
  background-color: color-mix(in srgb, var(--wp--preset--color--accent) 86%, #000) !important;
}
.athene-nl__form .fluentform .ff-btn-submit {
  padding: 13px 26px !important;
  min-width: auto !important;
}
.athene-nl__form .fluentform .ff-el-group:has(.ff-el-form-check) { font-size: var(--wp--preset--font-size--x-small); }
.athene-nl__form .fluentform .ff-el-form-check-label { display: flex; align-items: center; gap: 6px; }
.athene-nl__form .fluentform .ff-el-form-check-input { margin: 0; }
.athene-nl__form .fluentform .ff-message-success { color: var(--wp--preset--color--accent); font-weight: 500; }

@media (max-width: 900px) {
  .athene-nl__form { min-width: 0; width: 100%; }
}

/* =============================================================
   SINGLE INSIGHT
   ============================================================= */
/* Same core-default-vs-parent-constraint specificity fight as
   .athene-insight__content below — pin explicitly rather than trust
   inheritance from the parent <article>'s layout. */
.athene-insight__head {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: var(--wp--preset--spacing--30);
}
.athene-insight__meta { gap: var(--wp--preset--spacing--30); }
.athene-insight__title { margin: 0; }
/* core/post-featured-image's own default margin (~24px) wins over the
   article's intended blockGap here too — same specificity issue as the
   width fixes above. Pin explicit, more generous breathing room since
   this is the dominant visual element on the page. */
.athene-insight__hero {
  margin-top: var(--wp--preset--spacing--60) !important;
  margin-bottom: var(--wp--preset--spacing--60) !important;
}
.athene-insight__hero img {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: var(--wp--custom--border-radius--lg);
  box-shadow: var(--wp--custom--shadow--md);
  display: block;
}
/* core/post-content ships its own `.wp-block-post-content.is-layout-constrained`
   default (2-class specificity) that overrides the local contentSize the
   parent <article> assigns to its children (1-class specificity), so the
   container itself renders at the theme's global 1056px width even though
   its own children correctly get max-width:760px — that mismatch is what
   produced the huge left/right gutters around every paragraph. Pin the
   container's own box to match. */
.athene-insight__content {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  line-height: 1.65;
}

/* Arbitrary editor-authored post_content doesn't get the hand-tuned margin
   resets patterns rely on, so pin every direct child to the theme's spacing
   scale instead of letting core block defaults + blockGap stack up. */
.athene-insight__content > * {
  margin-top: var(--wp--preset--spacing--40) !important;
  margin-bottom: 0 !important;
}
.athene-insight__content > *:first-child { margin-top: 0 !important; }

/* Heading scale for in-article subheads. theme.json's global h1-h6 sizes are
   tuned for hero/section titles (h2 = 64px "display"), which made body
   subheads render larger than the post title itself. Scale them down to an
   article-reading hierarchy that stays under the 34-52px post title. */
.athene-insight__content h2 {
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.athene-insight__content h3 {
  font-size: clamp(21px, 2vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.athene-insight__content h4 {
  font-size: clamp(19px, 1.6vw, 20px);
  line-height: 1.35;
}
.athene-insight__content h5 { font-size: var(--wp--preset--font-size--lead); line-height: 1.4; }
.athene-insight__content h6 { font-size: var(--wp--preset--font-size--base); line-height: 1.4; }

.athene-insight__content > h2,
.athene-insight__content > h3,
.athene-insight__content > h4,
.athene-insight__content > h5,
.athene-insight__content > h6 {
  margin-top: var(--wp--preset--spacing--60) !important;
}
.athene-insight__content > h2:first-child,
.athene-insight__content > h3:first-child,
.athene-insight__content > h4:first-child,
.athene-insight__content > h5:first-child,
.athene-insight__content > h6:first-child {
  margin-top: 0 !important;
}

.athene-insight__content ul,
.athene-insight__content ol { padding-left: var(--wp--preset--spacing--40); }
.athene-insight__content li + li { margin-top: var(--wp--preset--spacing--20); }

.athene-insight__content blockquote {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--wp--preset--spacing--40);
  border-left: 3px solid var(--wp--preset--color--accent);
  font-style: italic;
  color: var(--wp--preset--color--muted);
}
.athene-insight__content blockquote > p { margin-top: var(--wp--preset--spacing--20) !important; }
.athene-insight__content blockquote > p:first-child { margin-top: 0 !important; }

.athene-insight__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--wp--custom--border-radius--lg);
  display: block;
}
.athene-insight__content figcaption {
  margin-top: var(--wp--preset--spacing--20) !important;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--small);
}

.athene-insight__content hr {
  border: none;
  border-top: 1px solid var(--wp--preset--color--divider);
}

.athene-insight__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--small);
}
.athene-insight__content table th,
.athene-insight__content table td {
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
  border-bottom: 1px solid var(--wp--preset--color--divider);
  text-align: left;
}

/* =============================================================
   LOCATIONS PAGE  (Phase 7)
   ============================================================= */

/* ---- Locations head ------------------------------------------------- */

/* ---- Offices -------------------------------------------------------- */
/* Grey band: the office cards are white with a soft shadow, so they read as
   raised cards against the band rather than floating on white. Overrides the
   stored has-base-background-color, and is mirrored in
   athene_css_painted_sections() so the has-bg adjacency rule knows about it. */
.athene-offices {
  background-color: var(--wp--preset--color--band) !important;
}
.athene-offices { position: relative; overflow: clip; }
/* Faint static watermark (assets/img/worldmap.svg) behind the mist
   background — unlike the hero's animated hero-map.js, this is a plain
   image so it stays quiet behind the office cards. */
.athene-offices .athene-offices__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-inline: 0;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
}
.athene-offices .athene-offices__bg img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1400px;
}
.athene-offices > * { position: relative; z-index: 1; }
/* Base flex: previously generated by WP's block-supports layout system;
   athene/offices is now a dynamic block rendering static HTML. */
.athene-offices__head {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
  max-width: 720px;
}
.athene-offices__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--40);
}
.athene-office {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--30);
}
.athene-office__city {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
}
.athene-office__tag-wrap {
  display: flex;
}
.athene-offices__title { margin: 0; }
.athene-offices__intro { margin: 0; }
.athene-offices__grid { align-items: stretch; }
/* Cards size to their content (Paper artboard 1X4-0 draws them at unequal
   widths) rather than to an equal 1/4 share, then grow to fill the row.
   min-width:fit-content stops a card ever shrinking narrower than its own
   focus pill, so the pill never has to wrap or overflow — at viewports too
   narrow for four content-width cards the last one wraps to a second row
   instead. */
.athene-office {
  flex: 1 1 auto;
  min-width: fit-content;
  background: var(--wp--preset--color--base);
  box-shadow: var(--wp--custom--shadow--sm);
}
.athene-office__country { margin: 0; }
.athene-office__city { color: var(--wp--preset--color--accent); }
.athene-office__pin { display: block; flex-shrink: 0; color: var(--wp--preset--color--accent); }
.athene-office__email a { color: var(--wp--preset--color--accent); text-decoration: none; word-break: break-word; }
.athene-office__email a:hover { text-decoration: underline; }
.athene-office__tag-wrap { margin-top: auto; }
/* Focus pill — Paper artboard 1X4-0 "Focus": 12px/16px, 0.03em, 7px 13px,
   fully rounded, band grey on accent text, always a single line. The wrap
   is a flex row, so align-self keeps the pill shrink-to-fit instead of
   stretching to the card width. */
.athene-office__tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--wp--preset--color--band);
  color: var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--border-radius--pill);
  padding: 7px 13px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

/* 4-up tier only: cap card growth. The Finnish and Swedish focus labels are
   markedly longer than the English ones ("Yhtiöt & yhtiösihteeripalvelut"),
   so on those pages four content-width cards overflow the row and the last
   one wraps — this keeps it card-sized rather than stretching it into a
   full-width banner. Below 1200px the cards fill their 50%/100% column, so
   the cap must not apply there. */
@media (min-width: 1201px) {
  .athene-office { max-width: 320px; }
}
/* Four content-width office cards need ~985px of content box; below that the
   fourth would wrap alone onto a second row and stretch across it, so switch
   to a 2x2 grid while there is still room for it. */
@media (max-width: 1200px) {
  /* min-width:fit-content from the base rule still applies: if two
     content-width cards no longer fit a row they drop to one per row rather
     than squeezing the pill. */
  .athene-office { flex: 1 1 calc(50% - var(--wp--preset--spacing--40)); }
}
@media (max-width: 600px) {
  /* Full-width cards. Below ~350px even a full-width card is narrower than
     the longest Swedish label, so release the pill to wrap here — a two-line
     pill on a phone beats horizontal overflow. */
  .athene-office { flex: 1 1 100%; min-width: 0; }
  .athene-office__tag { white-space: normal; }
}

/* ---- Coverage ------------------------------------------------------- */
/* White band: the grey moved up to .athene-offices, so the map sits on white
   and the page alternates marble -> grey -> white. Overrides the stored
   band background; mirrored in athene_css_whitened_sections() so the has-bg
   adjacency rule does not treat this as a coloured band. */
.athene-coverage {
  background-color: var(--wp--preset--color--base) !important;
}
.athene-coverage__text { flex: 1 1 380px; max-width: 460px; }
.athene-coverage__title { margin: 0; }
.athene-coverage__body { margin: 0; }
.athene-coverage__legend-item p { color: var(--wp--preset--color--ink); }
.athene-coverage__dot {
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 999px;
}
.athene-coverage__dot--filled { background: var(--wp--preset--color--accent); }
.athene-coverage__dot--ring { background: var(--wp--preset--color--base); border: 2px solid var(--wp--preset--color--mauve); }
/* The "VAT coverage across the EU/EEA" legend row was dropped from
   coverage.php, but the FI/SV pages hold frozen copies of it, so hide the
   ring-dot row here to retire it on every language at once. */
.athene-coverage__legend-item:has(.athene-coverage__dot--ring) { display: none; }

.athene-coverage__map { flex: 1 1 460px; min-width: 0; }
#athene-map {
  width: 100%;
  height: 440px;
  border-radius: var(--wp--custom--border-radius--md);
  overflow: hidden;
  border: 1px solid var(--wp--preset--color--divider);
  background: #e8e6f0;
}

@media (max-width: 900px) {
  .athene-coverage__text { max-width: none; }
  #athene-map { height: 320px; }
}
@media (max-width: 600px) {
  #athene-map { height: 260px; }
}

/* ---- Map popup (mirrors .athene-office card fields) ------------------ */
/* Google's InfoWindow chrome reserves a full header row for a title we
   never set, plus generous default padding — the cause of the dead space
   above the content and the oversized close button. Float the close
   button instead of letting it push a header row, and take over padding
   so our content owns the box edge-to-edge. */
.gm-style-iw-ch { display: none !important; }
.gm-style-iw-chr { position: absolute !important; inset: 4px 4px auto auto !important; height: auto !important; }
.gm-style .gm-style-iw-c { padding: 16px !important; }
.gm-style .gm-style-iw-d { overflow: visible !important; max-height: none !important; }
button.gm-ui-hover-effect { width: 24px !important; height: 24px !important; opacity: 0.6; }
button.gm-ui-hover-effect > span { width: 16px !important; height: 16px !important; margin: 4px !important; }

.athene-map-popup { display: flex; flex-direction: column; gap: 4px; min-width: 180px; }
.athene-map-popup__country { margin: 0; font-size: 15px; line-height: 1.3; color: var(--wp--preset--color--ink); }
.athene-map-popup__city { margin: 0; font-size: 13px; font-weight: 500; color: var(--wp--preset--color--accent); }
.athene-map-popup__addr,
.athene-map-popup__phone { margin: 0; font-size: 12px; line-height: 1.5; color: var(--wp--preset--color--muted); }
.athene-map-popup__email { margin: 0; font-size: 12px; font-weight: 500; }
.athene-map-popup__email a { color: var(--wp--preset--color--accent); text-decoration: none; }
.athene-map-popup__email a:hover { text-decoration: underline; }
.athene-map-popup__tag {
  align-self: flex-start;
  margin: 4px 0 0;
  display: inline-flex;
  align-items: center;
  background: var(--wp--preset--color--band);
  color: var(--wp--preset--color--accent);
  border-radius: var(--wp--custom--border-radius--pill);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* ---- Contact form --------------------------------------------------- */
/* The #contact anchor needs no scroll offset of its own: :root already sets
   scroll-padding-top: 160px for the sticky header, which every anchor on the
   site shares. Adding scroll-margin-top here would stack on top of it. */
.athene-cf__card { gap: var(--wp--preset--spacing--40); }
.athene-cf__text { flex: 0 1 420px; max-width: 420px; }
.athene-cf__title { margin: 0; }
.athene-cf__sub { margin: 0; }
.athene-cf__eyebrow { color: var(--wp--preset--color--mauve); }
.athene-cf__sub { color: var(--wp--preset--color--mauve); }
.athene-cf__form-wrap {
  flex: 0 1 420px;
  max-width: 420px;
  width: 100%;
}

/* Fluent Forms styling inside the contact card */
.athene-cf__form-wrap .fluentform .ff-el-group { margin-bottom: var(--wp--preset--spacing--40); }
.athene-cf__form-wrap .fluentform .ff-el-group:last-of-type { margin-bottom: 0; }
/* Each Name/Company cell holds a single group, which :last-of-type above
   zeroes, so the row touched Email (and, stacked on phones, each other). */
.athene-cf__form-wrap .fluentform .ff-t-cell > .ff-el-group:last-of-type { margin-bottom: var(--wp--preset--spacing--40); }
.athene-cf__form-wrap .fluentform .ff-el-input--label label {
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 500;
  color: var(--wp--preset--color--ink);
  margin-bottom: var(--wp--preset--spacing--20);
}
.athene-cf__form-wrap .fluentform .ff-el-form-control {
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: var(--wp--custom--border-radius--md);
  padding: 13px 16px;
  background: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--ink);
}
.athene-cf__form-wrap .fluentform .ff-el-form-control:focus {
  border-color: var(--wp--preset--color--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(93, 2, 90, 0.10);
}
.athene-cf__form-wrap .fluentform textarea.ff-el-form-control { min-height: 120px; resize: vertical; }
.athene-cf__form-wrap .fluentform .ff-el-form-control::placeholder { color: #9AA3B0; }
.athene-cf__form-wrap .fluentform .ff-el-input--content select.ff-el-form-control { appearance: auto; }

/* Name + Company two-column row */
.athene-cf__form-wrap .fluentform .ff-t-container { gap: var(--wp--preset--spacing--30); }
.athene-cf__form-wrap .fluentform .ff-t-cell { padding: 0; }

.athene-cf__form-wrap .fluentform .ff-btn-submit {
  width: 100%;
  padding: 15px 26px !important;
  margin-top: var(--wp--preset--spacing--20);
}
.athene-cf__form-wrap .fluentform .ff-message-success {
  color: var(--wp--preset--color--accent);
  font-weight: 500;
}

@media (max-width: 900px) {
  .athene-cf__text,
  .athene-cf__form-wrap { flex: 1 1 100%; max-width: none; }
}

/* The plum card and its white form box carry block-supports inline padding
   (spacing|70 = 80px, spacing|50 = 40px, every side) stored in the page
   content, so it never stepped down: at 390px the form inputs were ~100px
   wide. Inline longhands need an !important shorthand; the compound selector
   outranks core's .is-layout-flex (align-items:center). */
@media (max-width: 900px) {
  .wp-block-group.athene-cf__card {
    padding: var(--wp--preset--spacing--50) !important;
    align-items: stretch;
  }
  .athene-cf__card > .athene-cf__text,
  .athene-cf__card > .athene-cf__form-wrap { width: 100%; }
  .wp-block-group.athene-cf__form-wrap { padding: var(--wp--preset--spacing--40) !important; }
}
@media (max-width: 600px) {
  .wp-block-group.athene-cf__card { padding: var(--wp--preset--spacing--40) !important; }
  .wp-block-group.athene-cf__form-wrap { padding: var(--wp--preset--spacing--30) !important; }
}

/* =============================================================
   RESPONSIVE / MOBILE PASS  (Task 11)
   Pattern language derived from the homepage mobile frame 7S-0:
   - Header collapses to logo + hamburger; header CTA + lang switch hidden
   - Container gutter shrinks 96px -> 24px (token spacing|40) so content
     fills ~342px of a 390px frame (spec content width is 350px)
   - Every multi-column grid collapses to a single column
   - Vertical section rhythm tightens; hero CTAs go full-width
   ============================================================= */

/* ---- Tablet (<=768px): shrink the global container gutter ----------- */
/* body carries --wp--style--root--padding-* = container-gutter, which
   .has-global-padding sections consume. Overriding the token here cascades
   to every section + any direct var(--wp--custom--container-gutter) use. */
@media (max-width: 768px) {
  body {
    --wp--custom--container-gutter: var(--wp--preset--spacing--50); /* 40px */
  }
  /* Header and footer padding use spacing|80 (96px) directly rather than the
     gutter token, so they need their own step-down — otherwise 192px of
     horizontal padding survives down to the narrowest phones and the footer's
     legal links overflow the viewport. Inline block styles, hence !important. */
  .athene-header .is-content-justification-space-between,
  .athene-footer {
    padding-left: var(--wp--preset--spacing--50) !important;  /* 40px */
    padding-right: var(--wp--preset--spacing--50) !important;
  }
}

/* ---- Mobile (<=600px): full single-column, tightest gutter --------- */
@media (max-width: 600px) {
  body {
    --wp--custom--container-gutter: var(--wp--preset--spacing--40); /* 24px */
  }
  .athene-header .is-content-justification-space-between,
  .athene-footer {
    padding-left: var(--wp--preset--spacing--40) !important;  /* 24px */
    padding-right: var(--wp--preset--spacing--40) !important;
  }
  /* Legal links (Privacy / Terms / Cookies) are authored as a nowrap row.
     The Swedish labels are longer, so on the narrowest phones let the row
     wrap instead of pushing past the viewport edge. */
  .athene-footer-bar > .wp-block-group,
  .athene-footer-bar nav,
  .athene-footer-bar .wp-block-navigation__container {
    flex-wrap: wrap !important;
  }
}

/* ---- Header: logo + hamburger only (faithful to 7S-0) -------------- */
/* The header CTA button and language switcher are hidden on mobile; the
   nav overlay (hamburger) carries primary navigation. This stops the
   "Contact Us" pill from being crushed into vertical text and frees the
   logo to render at full width instead of collapsing to 0px. */
@media (max-width: 900px) {
  /* The right-hand group = Contact button + language switcher. It is the
     last child of the inner space-between flex row (logo, nav, this group). */
  .athene-header .is-content-justification-space-between > .wp-block-group:last-child {
    display: none !important;
  }
  /* Keep the logo from shrinking inside the nowrap flex row */
  .athene-header .wp-block-site-logo {
    flex: 0 0 auto;
  }
  .athene-header .custom-logo {
    width: 96px !important;
    height: auto !important;
  }
  /* Hamburger sits hard right */
  .athene-header .wp-block-navigation {
    margin-left: auto;
  }
  /* Core pads every group with a background by 1.25em 2.375em
     (:where(.wp-block-group.has-background)); on phones the vertical part
     made the bar taller than the logo row needs. */
  .wp-block-group.athene-header.has-background {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  /* Force the header nav into its overlay (hamburger) mode up to 900px.
     Core's overlayMenu:"mobile" only collapses below 600px (it shows the
     open button at <600 and renders the menu inline at >=600 via
     `@media(min-width:600px)`). The handoff's primary breakpoint is 900px,
     so between 601–900px we re-assert the collapsed behaviour: show the
     "open" (hamburger) button and hide the inline menu until it is opened.
     Scoped to .athene-header so the footer navs (overlayMenu:never) are
     untouched. */
  .athene-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  .athene-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }
}

/* ============================================================
   MOBILE NAVIGATION OVERLAY — full-screen sheet
   Modern, left-aligned menu matching the brand: hairline-divided
   top-level rows, nested submenus shown inline with an accent rule,
   accent-coloured tap states, and the Contact CTA + language switcher
   pulled into the sheet (they're hidden in the bar on mobile). Scoped
   to the OPEN overlay so the desktop navbar is untouched, and it also
   kills the desktop floating dropdown-card styling that would
   otherwise leak into the overlay.
   ============================================================ */
.athene-header .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--base);
}
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
  padding: 84px 28px 48px;
  text-align: left;
}

/* Close (X): comfortable tap target, accent on press. */
.athene-header .wp-block-navigation__responsive-container-close {
  width: 44px;
  height: 44px;
  color: var(--wp--preset--color--ink);
}
.athene-header .wp-block-navigation__responsive-container-close:hover,
.athene-header .wp-block-navigation__responsive-container-close:focus {
  color: var(--wp--preset--color--accent);
}

/* Menu list: left-aligned vertical stack. */
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.is-responsive {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

/* Top-level rows, divided by hairlines. */
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.is-responsive > .wp-block-navigation-item {
  display: block;
  width: 100%;
  border-top: 1px solid var(--wp--preset--color--divider);
}
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.is-responsive > .wp-block-navigation-item:first-child {
  border-top: 0;
}
/* Top-level link label. */
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.is-responsive > .wp-block-navigation-item > .wp-block-navigation-item__content {
  display: block;
  padding: 17px 2px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
}
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
  color: var(--wp--preset--color--accent);
}

/* Submenus: inline + nested under the parent with an accent rule. */
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  margin: 0 0 14px 2px;
  padding: 2px 0 0 16px;
  border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
}
/* Submenu child links: smaller, muted. */
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 9px 2px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--wp--preset--color--muted);
}
/* Nested "Tax" group label reads a touch stronger above its children. */
.athene-header .wp-block-navigation__responsive-container.is-menu-open .athene-tax-submenu > .wp-block-navigation-item__content {
  font-weight: 500;
  color: var(--wp--preset--color--ink);
}
/* Submenus are shown inline, so the expand carets are redundant. */
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
  display: none;
}

/* ---- CTA + language switcher pulled into the sheet (JS-cloned) ---- */
.athene-mobile-extras {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--wp--preset--color--divider);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* Contact CTA → full-width pill. */
.athene-mobile-extras .wp-block-buttons,
.athene-mobile-extras .wp-block-button {
  width: 100%;
}
.athene-mobile-extras .wp-block-button__link {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 15px 24px;
  font-size: 16px;
}
/* Language switcher → pill row, current language highlighted. */
.athene-mobile-lang {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.athene-mobile-lang li {
  margin: 0;
}
.athene-mobile-lang a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 9px 18px;
  border: 1px solid var(--wp--preset--color--divider);
  border-radius: var(--wp--custom--border-radius--pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--muted);
  text-decoration: none;
}
.athene-mobile-lang a:hover,
.athene-mobile-lang a:focus {
  color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}
.athene-mobile-lang .current-lang a {
  color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
  background: color-mix(in srgb, var(--wp--preset--color--accent) 8%, transparent);
}

/* ---- Hero: single-column bullet stack (7S-0 shows 5 stacked) ------- */
@media (max-width: 600px) {
  .athene-hero__bullets {
    grid-template-columns: 1fr !important;
    gap: var(--wp--preset--spacing--40) !important;
  }
}

/* ---- CTAs: stack full-width on mobile (7S-0 stacks hero + contact) -- */
@media (max-width: 600px) {
  .athene-hero__ctas,
  .athene-contact__ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .athene-hero__ctas .wp-block-button,
  .athene-contact__ctas .wp-block-button {
    width: 100%;
  }
  .athene-hero__ctas .wp-block-button__link,
  .athene-contact__ctas .wp-block-button__link {
    display: block;
    text-align: center;
    width: 100%;
  }
}

/* ---- Service / split rows: stack everything below 900 (handoff bp) - */
@media (max-width: 900px) {
  .athene-foroutcome__row,
  .athene-service-hero__row {
    flex-direction: column !important;
  }
  .athene-foroutcome__row > .athene-foroutcome__col,
  .athene-foroutcome__row > .athene-foroutcome__col:first-child,
  .athene-foroutcome__row > .athene-foroutcome__col:last-child,
  .athene-service-hero__row > .athene-service-hero__text,
  .athene-service-hero__media {
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100%;
  }
  /* What's-included jump band -> single column */
  .athene-included__grid,
  .athene-section__grid {
    grid-template-columns: 1fr !important;
  }
  .athene-service-hero__media img { height: 240px; }
}

/* ---- Generic safety net: any leftover 2/3/4-col token grids -------- */
@media (max-width: 600px) {
  .athene-services-intro__row,
  .athene-about-head__row,
  .athene-clients-head__row,
  .athene-vg__inner,
  .athene-career__inner,
  .athene-cf__card,
  .athene-nl__band > .wp-block-group,
  .athene-coverage__row {
    flex-direction: column !important;
  }
  /* Coverage map / contact / split media full-width on mobile */
  .athene-coverage__text,
  .athene-coverage__map,
  .athene-services-intro__media,
  .athene-about-head__media,
  .athene-clients-head__media {
    flex: 1 1 100% !important;
    max-width: none !important;
    width: 100%;
  }
}

/* ---- Long words / emails should never force overflow -------------- */
@media (max-width: 900px) {
  .athene-hero__headline,
  .athene-service-hero__headline,
  .athene-section__title,
  h1, h2, h3 {
    overflow-wrap: break-word;
    word-break: normal;
  }
}

/* ---- Tighten vertical rhythm a touch on mobile -------------------- */
@media (max-width: 600px) {
  .athene-feature__media img { min-height: 200px; }
  /* Logos: center + wrap (already handled), keep readable size */
  .athene-logos { row-gap: var(--wp--preset--spacing--40); }
}

/* =============================================================
   FIDELITY FIX PASS 1 — homepage + global (non-image)
   Matches designer references (demo.html / Paper "Athene Tax").
   ============================================================= */

/* Hero-points: white band that sits below the grey hero and carries the
   five numbered bullets (demo .hero-points{background:#fff;padding:40px 0 8px}). */
.athene-hero-points { position: relative; z-index: 1; }
/* Bullets grid is is-layout-grid (not constrained) so it does NOT inherit the
   content-size cap and would fill the full padded section (~1713px @1920).
   Cap it to the content band and centre it to match the design. */
.athene-hero-points .athene-hero__bullets {
  max-width: var(--wp--style--global--content-size, 1056px);
  margin-inline: auto;
}
.athene-hero-points .athene-hero__num { margin: 0; }
.athene-hero-points .athene-hero__bullet p:last-child { margin: 0; line-height: 1.5; }
@media (max-width: 1024px) {
  .athene-hero-points .athene-hero__bullets { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  .athene-hero-points .athene-hero__bullets {
    grid-template-columns: 1fr !important;
    gap: var(--wp--preset--spacing--40) !important;
  }
}

/* Fix 4 — Service detail H1 ~56px (was clamp(34px,4vw,48px)). Overrides the
   per-page inline font-size so every service page (EN/FI/SV) reads ~56px. */
.athene-service-hero__headline {
  font-size: clamp(40px, 4.5vw, 56px) !important;
}

/* Fix 5 — Tax/service "alt" band uses the band grey (#ECEEF1) token, not the
   bluer divider grey. Cards inside stay white (handled above). */
.athene-section--alt {
  background-color: var(--wp--preset--color--band) !important;
}

/* Fix 6 — Knowledge Hub article cards always show the 176px top thumbnail
   slot. core/post-featured-image emits nothing for posts without an image, so
   an empty placeholder div fills the slot; it is hidden when a real featured
   image is rendered in the same card. Each placeholder gets three soft,
   well-separated brand-color blobs (see athene_placeholder_gradient_vars() /
   --ph-* custom props set inline per element) — the standard stacked-
   radial-gradient technique behind Stripe/Linear-style mesh backgrounds —
   rendered through a dot-grid mask (the same dot motif used for the
   Locations watermark) instead of a blur, so colors stay crisp per-dot
   rather than blending into a muddy patch. Same post always renders the
   same mesh. */
.athene-card .athene-card__thumb--placeholder,
.athene-feature__media {
  position: relative;
  overflow: hidden;
  background-color: var(--ph-base, #F5F6F7);
}
.athene-card .athene-card__thumb--placeholder::after,
.athene-feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at var(--ph-x1, 15%) var(--ph-y1, 20%), var(--ph-c1, #BB95BA) 0%, transparent 50%),
    radial-gradient(circle at var(--ph-x2, 85%) var(--ph-y2, 15%), var(--ph-c2, #C9A9C6) 0%, transparent 50%),
    radial-gradient(circle at var(--ph-x3, 50%) var(--ph-y3, 85%), var(--ph-c3, #AEA4AE) 0%, transparent 50%);
  -webkit-mask-image: radial-gradient(circle, #000 1.6px, transparent 1.6px);
  mask-image: radial-gradient(circle, #000 1.6px, transparent 1.6px);
  -webkit-mask-size: 9px 9px;
  mask-size: 9px 9px;
  opacity: 0.55;
}
.athene-card__thumb--placeholder {
  display: block;
  width: 100%;
  height: 176px;
}
.athene-card:has(.wp-block-post-featured-image img) .athene-card__thumb--placeholder {
  display: none;
}

/* Fix 7 — Testimonial quote. The design set 38px for one-line mock quotes;
   the real client testimonials run to two or three paragraphs, which at 38px
   no longer fit a laptop screen, so they are set smaller. !important because
   theme fluid typography otherwise rescales the size. */
.athene-testimonial__quote {
  font-size: 26px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}
@media (max-width: 600px) {
  .athene-testimonial__quote {
    font-size: 19px !important;
    line-height: 1.45 !important;
  }
}

/* Fix 8 — Lift cramped interior section vertical rhythm toward ~120px
   (design section.block{padding:120px 0}; 64px at mobile per the demo's
   560px rule). Contact bands keep their ~140px (spacing|90) and are
   untouched. --athene-section-pad is the SINGLE source of truth for this
   rhythm — the mobile value comes from the var redefinition below, so new
   sections only need adding to the selector list once. */
:root {
  --athene-section-pad: clamp(80px, 9vw, 120px);
}
@media (max-width: 600px) {
  :root {
    --athene-section-pad: 64px;
  }
}
.athene-delivery,
.athene-team,
.athene-vg,
.athene-industries,
.athene-coverage,
.athene-offices {
  padding-top: var(--athene-section-pad) !important;
  padding-bottom: var(--athene-section-pad) !important;
}
/* Sections that intentionally continue under a preceding band keep their
   (frozen inline) top spacing on desktop; only their cramped bottom is
   lifted toward the 120px rhythm. On mobile they join the full rhythm. */
.athene-value,
.athene-career { padding-bottom: var(--athene-section-pad) !important; }
@media (max-width: 600px) {
  .athene-value,
  .athene-career { padding-top: var(--athene-section-pad) !important; }
}

/* =============================================================
   PORTED INTERACTIONS  (v1.11.0)
   Sticky nav scrolled state, scroll reveals, testimonial carousel
   fade, Services dropdown polish, button hover lift.
   Ported from the designer handoff (share/index.html).
   ============================================================= */

/* ---- 1. Sticky nav: blurred translucent bg + bottom hairline ------- */
/* Base header already position:sticky (see top of file). Make it fixed-like
   translucent on scroll, matching the demo `nav.scrolled`. */
.athene-header {
  transition: background 0.3s ease, box-shadow 0.3s ease,
    border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.athene-header.scrolled {
  /* Solid (opaque) on scroll too — a translucent bg let the page show through
     the full-width wrapper's side strips (outside the inner content row),
     which looked like the navbar was partly transparent. */
  background: var(--wp--preset--color--base) !important;
  border-bottom: 1px solid var(--wp--preset--color--divider);
  /* Drop the resting shadow in favour of the hairline (no new shadows). */
  box-shadow: none;
}

/* ---- 2. Scroll reveals -------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- 3. Testimonial carousel ------------------------------------- */
/* Base flex/centering: previously generated by WP's block-supports layout
   system (wp:group layout attrs); athene/testimonial-carousel is now a
   dynamic block rendering static HTML, so this must be explicit. */
.athene-testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--50);
}
.athene-testimonial__slide {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--50);
}
.athene-testimonial__slide.is-active {
  display: flex;
}
.athene-testimonial__attr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--10);
}
.athene-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
}
/* The .athene-testimonial root fades during a quote swap (JS sets opacity +
   inline transition). Make the controls feel interactive. */
.athene-pager__btn {
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease,
    background 0.2s ease, transform 0.18s ease;
}
.athene-pager__btn:hover {
  border-color: var(--wp--preset--color--accent);
  transform: translateY(-2px);
}
.athene-pager__btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}
.athene-pager__dots i {
  transition: width 0.3s ease, background 0.3s ease;
}

/* ---- 4. Services dropdown polish (core/navigation submenu) -------- */
/* Invisible hover "bridge" spanning the gap between the Services label and the
   submenu panel, so moving the cursor down doesn't drop the hover and close
   the menu (mirrors .nav-dd-menu::before in the demo). */
.athene-header .wp-block-navigation .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
/* Keep the panel visible while open via the JS-synced class, in addition to
   core's hover/focus-within rules. */
.athene-header .wp-block-navigation .has-child.athene-dd-open
  > .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  overflow: visible;
}

/* ---- 5. Button hover: 2px lift (no new shadows) ------------------ */
/* Apply the lift to every themed button link + the header CTA, matching the
   demo `.btn-*:hover{transform:translateY(-2px)}`. Existing hover colour
   rules elsewhere are unaffected. */
.wp-block-button__link {
  transition: transform 0.18s ease, background-color 0.18s ease,
    border-color 0.18s ease, color 0.18s ease;
}
.wp-block-button__link:hover {
  transform: translateY(-2px);
}

/* =============================================================
   SERVICE TILE ICONS  (Slack bug #6)
   The Service CPT query loop renders one static icon slot per tile,
   so every service showed the same placeholder. Paint a distinct
   line-icon per tile position via a masked ::before (currentColor so
   it inherits the dark/light tile text colour). Applies to both the
   homepage grid (.athene-tiles) and the services index (.athene-index__tiles).
   ============================================================= */
.athene-tile__icon::before,
.athene-index-tile__icon::before {
  content: "";
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--svc-icon) center / contain no-repeat;
  mask: var(--svc-icon) center / contain no-repeat;
}
.athene-tile__icon,
.athene-index-tile__icon { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2021V5l9-2v18'/%3E%3Cpath%20d='M13%209h6a1%201%200%200%201%201%201v11'/%3E%3Cpath%20d='M3%2021h18'/%3E%3Cpath%20d='M7%208h2.4M7%2012h2.4M7%2016h2.4M16%2013h1M16%2017h1'/%3E%3C/svg%3E"); }
.athene-tiles > li:nth-child(1) .athene-tile__icon,
.athene-index__tiles > li:nth-child(1) .athene-index-tile__icon { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2021V5l9-2v18'/%3E%3Cpath%20d='M13%209h6a1%201%200%200%201%201%201v11'/%3E%3Cpath%20d='M3%2021h18'/%3E%3Cpath%20d='M7%208h2.4M7%2012h2.4M7%2016h2.4M16%2013h1M16%2017h1'/%3E%3C/svg%3E"); }
.athene-tiles > li:nth-child(2) .athene-tile__icon,
.athene-index__tiles > li:nth-child(2) .athene-index-tile__icon { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5.5%2018.5%2018.5%205.5'/%3E%3Ccircle%20cx='8'%20cy='8'%20r='2.2'/%3E%3Ccircle%20cx='16'%20cy='16'%20r='2.2'/%3E%3C/svg%3E"); }
.athene-tiles > li:nth-child(3) .athene-tile__icon,
.athene-index__tiles > li:nth-child(3) .athene-index-tile__icon { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='8'%20r='3'/%3E%3Cpath%20d='M3.5%2019a5.5%205.5%200%200%201%2011%200'/%3E%3Cpath%20d='M16%205.6a3%203%200%200%201%200%205.8'/%3E%3Cpath%20d='M18%2013.2a5.5%205.5%200%200%201%203%204.8'/%3E%3C/svg%3E"); }
.athene-tiles > li:nth-child(4) .athene-tile__icon,
.athene-index__tiles > li:nth-child(4) .athene-index-tile__icon { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203h8l4%204v14H6z'/%3E%3Cpath%20d='M14%203v4h4'/%3E%3Cpath%20d='M9%2017v-3M12%2017v-5M15%2017v-2'/%3E%3C/svg%3E"); }
.athene-tiles > li:nth-child(5) .athene-tile__icon,
.athene-index__tiles > li:nth-child(5) .athene-index-tile__icon { --svc-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203%2019%206v5c0%204.4-3%207.6-7%209-4-1.4-7-4.6-7-9V6z'/%3E%3Cpath%20d='M9%2011.6l2.2%202.2L15%2010'/%3E%3C/svg%3E"); }

/* Force the mobile submenu rows hard-left (core's overlay rules center the
   anchor inside its flex <li> and reset our indent/border, so we win with
   scoped !important — mobile overlay only). */
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  padding-left: 18px !important;
  border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent) !important;
}
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
  justify-content: flex-start !important;
}
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* ---- Fixed mobile-sheet layout ----------------------------------------
   The whole sheet used to scroll as one block (big empty top gap, CTA +
   language buried at the very bottom). Lock the sheet to the viewport and
   make it a flex column: close button pinned top, the link list takes the
   remaining height with its OWN scrollbar, and the CTA + language switcher
   stay pinned and always visible at the bottom. */
.athene-header .wp-block-navigation__responsive-container.is-menu-open {
  overflow: hidden;
}
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 60px 28px 26px;
}
/* The link list fills the leftover height and scrolls on its own. */
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.is-responsive {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* CTA + language: never scroll away. */
.athene-mobile-extras {
  flex: 0 0 auto;
  margin-top: 16px;
}

/* Lift the pinned footer (CTA + language) onto its own plane: a full-width
   bar flush to the sheet's bottom edge, with a hairline and a soft upward
   shadow so it reads as separate from the scrolling link list above. */
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-bottom: 0;
}
.athene-mobile-extras {
  position: relative;
  z-index: 1;
  margin: 0 -28px;
  padding: 20px 28px 26px;
  background: var(--wp--preset--color--base);
  border-top: 1px solid var(--wp--preset--color--divider);
  box-shadow: 0 -12px 26px -16px rgba(20, 12, 28, 0.22);
}

/* Footer refinements:
   1) Span the FULL sheet width (16px container padding + 28px content padding
      = 44px) so the upward shadow's side bleed clips off-screen instead of
      showing as grey bands in the container's side padding. Internal padding
      stays at 44px so the CTA/lang align with the link list above.
   2) Fade the bottom of the scrolling list so link text dissolves before it
      reaches the footer's shadow (no dark tint over moving text). */
.athene-mobile-extras {
  margin-left: -44px;
  margin-right: -44px;
  padding-left: 44px;
  padding-right: 44px;
}
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.is-responsive {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}

/* The cloned CTA + language extras must ONLY appear inside the OPEN mobile
   overlay. On desktop (and tablet >900px) the nav renders inline and its
   responsive-container-content is visible, so without this gate the clone
   leaked into the desktop bar. */
.athene-mobile-extras {
  display: none;
}
.athene-header .wp-block-navigation__responsive-container.is-menu-open .athene-mobile-extras {
  display: flex;
}

/* ---- Consistent full-screen overlay at EVERY hamburger width -----------
   The hamburger shows up to 900px, but core's min-width:600px styles stop
   treating the overlay as a full-screen modal — they constrain the content
   and push the menu right (margin-left). Force a true full-screen, full-width,
   left-aligned modal across the whole hamburger range so it looks identical
   from 320px to 900px. (.is-menu-open only exists while the hamburger overlay
   is open, i.e. <=900px, so this never touches the desktop inline nav.) */
.athene-header .wp-block-navigation__responsive-container.is-menu-open {
  padding: 0 !important;
}
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.is-responsive {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  justify-content: flex-start !important;
}
/* Side inset is now just the content's 28px padding, so the footer breaks out
   exactly 28px to sit flush to both edges at all widths. */
.athene-mobile-extras {
  margin-left: -28px !important;
  margin-right: -28px !important;
  padding-left: 28px !important;
  padding-right: 28px !important;
}

/* Make the overlay content stretch its children full-width (core centers them
   at >=600px, which left the footer bar narrow/centered on tablets). With
   stretch, the footer's negative side margins reach both edges (full-bleed). */
.athene-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: stretch !important;
}

/* Keep top-level nav labels on a single line. The theme's original nowrap rule
   targeted `.wp-block-navigation > .wp-block-navigation__container`, but the
   menu actually sits inside the responsive-container wrapper, so it never
   matched and long labels (Knowledge Hub / About us) wrapped on narrower
   desktops. Match the real structure. */
.athene-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.athene-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation-item__label {
  white-space: nowrap;
}
/* Button labels never wrap. */
.wp-block-button__link {
  white-space: nowrap;
}

/* Career block: "Send application" is a plain mailto link, not a button. */
.athene-career__link { margin: 0; font-weight: 600; }
.athene-career__link a { color: var(--wp--preset--color--accent); text-decoration: none; }
.athene-career__link a:hover { text-decoration: underline; }

/* ============================================================
   Page-head heroes on phones/tablets (About, Clients, Locations,
   Knowledge Hub, Services, service pages): the text sits ON the
   image instead of under it. Stacked, the 480px flex-basis of the
   text column turned into a 480px height and left a large gap.
   One grid cell holds both; the text is a rounded panel that fills
   the image inset by 16px, with a light blur and no tint, so the
   marble stays visible behind it. The prefixed backdrop-filter is
   for iOS Safari before 18. Child selectors (row > text) are needed
   to outrank core's `.is-layout-flex > * { margin: 0 }`.
   ============================================================ */
@media (max-width: 900px) {
  .athene-kh-head,
  .athene-locations-head,
  .athene-about-head,
  .athene-clients-head,
  .athene-service-hero,
  .athene-services-intro {
    padding-top: var(--wp--preset--spacing--50) !important;
    padding-bottom: var(--wp--preset--spacing--60) !important;
  }
  .athene-kh-head__row,
  .athene-locations-head__row,
  .athene-about-head__row,
  .athene-clients-head__row,
  .athene-service-hero__row,
  .athene-services-intro__row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 !important;
  }
  .athene-kh-head__row > *,
  .athene-locations-head__row > *,
  .athene-about-head__row > *,
  .athene-clients-head__row > *,
  .athene-service-hero__row > *,
  .athene-services-intro__row > * {
    grid-area: 1 / 1;
    min-width: 0;
  }
  .athene-kh-head__row > .athene-kh-head__media,
  .athene-locations-head__row > .athene-locations-head__media,
  .athene-about-head__row > .athene-about-head__media,
  .athene-clients-head__row > .athene-clients-head__media,
  .athene-service-hero__row > .athene-service-hero__media,
  .athene-services-intro__row > .athene-services-intro__media {
    max-width: none !important;
    width: 100%;
    margin: 0;
    align-self: stretch;
  }
  .athene-kh-head__media img,
  .athene-locations-head__media img,
  .athene-about-head__media img,
  .athene-clients-head__media img,
  .athene-service-hero__media img,
  .athene-services-intro__media img {
    height: 100% !important;
    min-height: 440px;
    object-fit: cover;
  }
  .athene-kh-head__row > .athene-kh-head__text,
  .athene-locations-head__row > .athene-locations-head__text,
  .athene-about-head__row > .athene-about-head__text,
  .athene-clients-head__row > .athene-clients-head__text,
  .athene-service-hero__row > .athene-service-hero__text,
  .athene-services-intro__row > .athene-services-intro__text {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: none !important;
    margin: 16px;
    padding: 20px 18px;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: var(--wp--custom--border-radius--md);
  }
}

/* Mobile menu: when the WordPress admin bar is showing (signed-in users),
   it paints above the header's stacking context and covered the top edge
   of the open menu, including the Close (X) button. Start the sheet below
   the admin bar so the button is always reachable. */
.admin-bar .athene-header .wp-block-navigation__responsive-container.is-menu-open {
  top: var(--wp-admin--admin-bar--height, 46px);
}

/* Testimonial attribution with the client's company logo, as on the old
   site: LOGO | Name / Title. Stacks and centres on phones. */
.athene-testimonial__attr.has-logo {
  flex-direction: row;
  justify-content: center;
  gap: 20px;
}
.athene-testimonial__logo {
  display: block;
  width: auto;
  height: 44px;
  max-width: 150px;
  object-fit: contain;
}
.athene-testimonial__attr.has-logo .athene-testimonial__who {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--10);
  padding-left: 20px;
  border-left: 1px solid var(--wp--preset--color--divider);
}
.athene-testimonial__attr.has-logo .athene-testimonial__who p {
  text-align: left;
}
.athene-testimonial__logo-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
}
@media (max-width: 600px) {
  .athene-testimonial__attr.has-logo {
    flex-direction: column;
    gap: 12px;
  }
  .athene-testimonial__attr.has-logo .athene-testimonial__who {
    padding-left: 0;
    border-left: 0;
  }
  .athene-testimonial__attr.has-logo .athene-testimonial__who p {
    text-align: center;
  }
}

/* VAT refund table: "Open the table" button in the form's thank-you message. */
.athene-cf__form-wrap .ff-message-success .athene-refund__open {
  display: inline-block;
  margin-top: var(--wp--preset--spacing--20);
  padding: 12px 22px;
  border-radius: var(--wp--custom--border-radius--pill);
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-weight: 600;
  text-decoration: none;
}
.athene-cf__form-wrap .ff-message-success .athene-refund__open:hover,
.athene-cf__form-wrap .ff-message-success .athene-refund__open:focus-visible {
  opacity: 0.9;
}

/* ---- VAT refund table landing (patterns/refund-table.php) ----------
   The request card reuses the contact card (.athene-cf__*, including its
   phone padding step-down). New here: the "what's inside" items with a
   check mark, and the privacy note under them. */
.athene-refund__item {
  position: relative;
  margin: 0;
  padding-left: 26px;
  color: var(--wp--preset--color--base);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.5;
}
.athene-refund__item::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--wp--preset--color--mauve);
  font-weight: 700;
}
.athene-refund__note {
  margin: 0;
  color: var(--wp--preset--color--mauve);
  font-size: var(--wp--preset--font-size--x-small);
  line-height: 1.5;
}
.athene-refund__note a {
  color: var(--wp--preset--color--base);
}