/* -------------------------------------------------------------------------- *
 * Suisse Theme — production stylesheet (v1 hand-written, Figma-approximating)
 *
 * Phase 3 will replace this with a Tailwind v4 build, exact Figma token
 * sampling, self-hosted WOFF2 fonts, and SDC-scoped styles. For now this is
 * a single stylesheet with design tokens + component rules styled to
 * approximate the Figma designs.
 * -------------------------------------------------------------------------- */

/* Fonts — the exact families used in the Figma file. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Manrope:wght@400;500;600;700;800&family=Poppins:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* ============== Design tokens — exact Figma values ====================== */
:root {
  /* Figma brand primitives. */
  --color-brand-navy-900: #002D45;   /* dark text on cards, primary navy */
  --color-brand-navy-800: #00314B;   /* hero gradient mid */
  --color-brand-navy-950: #011019;   /* hero gradient top */
  --color-brand-navy-600: #0565B1;   /* hero gradient end (light blue) */
  --color-brand-steel-500: #344F5A;  /* body text, secondary navy */
  --color-brand-gold-500: #D3AB5C;   /* Figma gold (primary CTA + accent) */
  --color-brand-gold-600: #B08F48;
  --color-brand-gold-100: #F4ECD9;
  --color-brand-neutral-0: #FFFFFF;
  --color-brand-neutral-50: #F6F7FA;
  --color-brand-neutral-100: #EEF0F4;
  --color-brand-neutral-300: #D0D5DD;
  --color-brand-neutral-500: #6B7280;
  --color-brand-neutral-700: #333A49;
  --color-brand-neutral-900: #0F172A;

  /* Semantic aliases. */
  --color-surface-hero:    var(--color-brand-navy-950);
  --color-surface-hero-2:  var(--color-brand-navy-800);
  --color-surface-page:    var(--color-brand-neutral-0);
  --color-surface-muted:   var(--color-brand-neutral-50);
  --color-text-on-hero:    var(--color-brand-neutral-0);
  --color-text-primary:    var(--color-brand-navy-900);
  --color-text-secondary:  var(--color-brand-steel-500);
  --color-text-muted:      var(--color-brand-neutral-500);
  --color-accent-primary:  var(--color-brand-gold-500);
  --color-accent-primary-hover: var(--color-brand-gold-600);
  --color-accent-soft:     var(--color-brand-gold-100);
  --color-border:          var(--color-brand-neutral-100);

  /* Figma uses DM Sans for hero/body, Manrope for blog titles, Poppins for
   * display headings, Inter for small UI text. No serif. */
  /* Brand typography — Zilla Slab for display/headings (slab serif,
   * gravitas) + Raleway for body (geometric sans, elegance). Adopted from
   * the legacy suissebank.com identity. Aliases route through display/body
   * so any future swap is a one-line change. */
  --font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-body:    "Raleway", system-ui, sans-serif;
  --font-article: var(--font-body);
  --font-ui:      var(--font-body);

  --radius-card:  12px;
  --radius-pill:  999px;
  --shadow-card:  0 1px 2px rgba(10,37,64,0.04), 0 8px 24px -12px rgba(10,37,64,0.12);
  --shadow-elev:  0 2px 6px rgba(10,37,64,0.06), 0 24px 48px -20px rgba(10,37,64,0.18);
  --space-section: clamp(3rem, 6vw, 6rem);
  --container-max: 1240px;
}

/* ============== Reset + base ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 0.75em; }
ul { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; margin: 0 0 0.5em; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4.375rem); font-weight: 500; } /* matches Figma hero 70px */
h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 500; }
h3 { font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 700; }
h4 { font-size: 1rem; }

/* Drupal field label cleanup. */
.field__label { display: none !important; }
.field__items { list-style: none; padding: 0; margin: 0; }

/* ============== Layout primitives ======================================= */
.container { max-width: var(--container-max); margin-inline: auto; padding-inline: 1.5rem; }
.section   { padding-block: var(--space-section); }
.site      { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

/* ============== Buttons ================================================= */
/* Naming: supports both BEM-style (.btn / .btn--ghost) used in custom Twig
 * templates AND Bootstrap-style (.btn-primary / .btn-secondary) used by
 * editors pasting from legacy markup or Drupal contrib markup. Both render
 * identically — pick the convention that fits the surrounding code. */
.btn,
.btn-primary,
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
  white-space: nowrap;
  text-decoration: none;
}

/* Primary — gold-filled, white text. Default appearance for plain `.btn`. */
.btn,
.btn-primary {
  background: var(--color-accent-primary);
  color: #FFFFFF;
  border: 1px solid var(--color-accent-primary);
}
.btn:hover,
.btn-primary:hover {
  background: var(--color-accent-primary-hover);
  border-color: var(--color-accent-primary-hover);
  color: #FFFFFF;
}

/* Secondary — white background, gold text, gold border. Same as legacy `.btn--ghost`. */
.btn--ghost,
.btn-secondary {
  background: #FFFFFF;
  color: var(--color-accent-primary);
  border: 1px solid var(--color-accent-primary);
}
.btn--ghost:hover,
.btn-secondary:hover {
  background: var(--color-accent-primary);
  color: #FFFFFF;
  border-color: var(--color-accent-primary);
}

/* ============== Header ================================================= */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.875rem;
}
.site-header__brand   { flex: 0 0 auto; }
.site-header__primary { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.site-header__utility { flex: 0 0 auto; display: flex; align-items: center; }
.search-trigger       { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.nav-toggle           { flex: 0 0 auto; }
.site-header__brand { display: flex; align-items: center; gap: 0.75rem; }
.site-header__brand .site-branding__logo img,
.site-header__brand a img { height: 38px; width: auto; max-width: 180px; }
@media (min-width: 1024px) {
  .site-header__brand .site-branding__logo img,
  .site-header__brand a img { height: 44px; max-width: 220px; }
}
.site-header__brand a { display: flex; flex-direction: column; gap: 0.15rem; }

.site-header__primary nav > ul { display: flex; gap: 2rem; align-items: center; }
.site-header__primary a {
  font-size: 0.9375rem;
  font-weight: 500;
  padding-block: 0.5rem;
  color: var(--color-text-primary);
}
.site-header__primary a:hover { color: var(--color-accent-primary); }

/* Dropdown — nested <ul> under any top-level <li> opens on hover/focus.
 * Drupal emits the nested <ul> when the menu block depth >= 2; this CSS
 * gives it the visual dropdown panel. */
@media (min-width: 961px) {
  /* On desktop, unwrap the JS-injected <div class="nav-row"> so the
   * existing nav > ul > li > a selectors still match, and hide the
   * mobile-only chevron toggle button entirely. */
  .site-header__primary .nav-row { display: contents; }
  .site-header__primary .nav-toggle-sub { display: none; }
  .site-header__primary nav > ul > li { position: relative; }
  .site-header__primary nav > ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0.5rem 0;
    list-style: none;
    background: var(--color-surface-page);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: 0 24px 48px -24px rgba(0,45,69,0.25);
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
    z-index: 50;
  }
  .site-header__primary nav > ul > li:hover > ul,
  .site-header__primary nav > ul > li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 0s;
  }
  .site-header__primary nav > ul ul li { display: block; }
  .site-header__primary nav > ul ul a {
    display: block;
    padding: 0.55rem 1.1rem;
    color: var(--color-text-primary);
    font-size: 0.9375rem;
    line-height: 1.3;
    white-space: nowrap;
    border-left: 2px solid transparent;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  }
  .site-header__primary nav > ul ul a:hover,
  .site-header__primary nav > ul ul a:focus-visible {
    background: rgba(211,171,92,0.08);
    color: var(--color-brand-navy-900);
    border-left-color: var(--color-accent-primary);
    outline: none;
  }
  /* Caret indicator on parent links that have children. JS wraps the <a>
   * inside .nav-row so we walk through it. The `:has(> ul)` checks the
   * <li> for a direct child <ul>, which still works since .nav-row is a
   * sibling of <ul> at the <li> level. */
  .site-header__primary nav > ul > li:has(> ul) .nav-row > a::after,
  .site-header__primary nav > ul > li:has(> ul) > a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.4rem;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
    transition: transform 180ms ease;
  }
  .site-header__primary nav > ul > li:hover:has(> ul) .nav-row > a::after,
  .site-header__primary nav > ul > li:hover:has(> ul) > a::after { transform: rotate(180deg); }
  /* Top-level parent links with no destination (route:<none>) shouldn't
   * look clickable on desktop. */
  .site-header__primary nav > ul > li .nav-row > a[href=""],
  .site-header__primary nav > ul > li > a[href=""] { cursor: default; }
}

/* Mobile drawer: tap-to-expand nested submenus. Each parent <li> that has a
 * child <ul> gets a chevron and toggles `.is-expanded` via theme.js. Parents
 * with no destination (empty href) become pure accordion triggers; parents
 * with real URLs still navigate normally on tap (the chevron is its own
 * separate hit target — see .nav-toggle-sub button below). */
@media (max-width: 960px) {
  /* Top-level items reset — slightly smaller, left-aligned for nested context. */
  .site-header__primary nav > ul {
    align-items: stretch;
    text-align: left;
    padding-inline: 1rem;
    gap: 0.25rem;
  }
  .site-header__primary nav > ul > li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .site-header__primary nav > ul > li:last-child { border-bottom: 0; }
  .site-header__primary nav > ul > li > a,
  .site-header__primary nav > ul > li > .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-block: 1rem;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: left;
  }
  /* Center underline animation conflicts with left-aligned layout — disable. */
  .site-header__primary a::after { display: none; }

  /* Nested submenu — collapsed by default; revealed when parent <li>
   * receives `.is-expanded` (set by theme.js on chevron / parent tap). */
  .site-header__primary nav > ul ul {
    list-style: none;
    padding: 0 0 0.75rem 1rem;
    margin: 0;
    border-left: 1px solid rgba(211,171,92,0.30);
    display: grid;
    gap: 0.1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 280ms ease, opacity 220ms ease, padding-bottom 220ms ease;
  }
  .site-header__primary nav > ul > li.is-expanded > ul {
    max-height: 1200px; /* enough for any submenu we have */
    opacity: 1;
  }
  .site-header__primary nav > ul ul a {
    font-size: 1.0625rem;
    font-weight: 400;
    color: rgba(255,255,255,0.82);
    padding-block: 0.5rem;
    opacity: 1;       /* override the staggered fade-in from above */
    transform: none;  /* override the translate-up */
    display: block;
  }
  .site-header__primary nav > ul ul a:hover,
  .site-header__primary nav > ul ul a:focus-visible {
    color: var(--color-accent-primary);
  }

  /* Chevron toggle — rendered as a button by theme.js next to each parent
   * <a>, so parents that DO have URLs can still be tapped to navigate
   * while the chevron alone toggles the submenu. */
  .nav-toggle-sub {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: rgba(255,255,255,0.06);
    color: #FFFFFF;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 180ms ease, color 180ms ease, transform 320ms ease;
  }
  .nav-toggle-sub:hover { background: var(--color-accent-primary); color: var(--color-brand-navy-900); }
  .nav-toggle-sub svg { width: 14px; height: 14px; }
  li.is-expanded > .nav-row > .nav-toggle-sub { transform: rotate(180deg); }
}

.site-header__utility nav > ul { display: flex; gap: 0.75rem; }
.site-header__utility a { text-decoration: none; }

/* Hidden checkbox drives mobile nav state without JS. */
.nav-toggle-state { position: absolute; opacity: 0; pointer-events: none; }

/* ================ Mobile menu: fullscreen overlay ====================== */
/* Below the desktop breakpoint we collapse the primary + utility menus
 * into a single fullscreen overlay that animates open when the hamburger
 * checkbox is toggled. */
@media (max-width: 960px) {
  .site-header__inner { gap: 0.75rem; }
  .site-header__brand { flex: 0 0 auto; margin-right: auto; }
  .search-trigger     { display: none; }
  .nav-toggle         { flex: 0 0 auto; z-index: 110; }

  /* Shared overlay styling for both regions inside the drawer. */
  .site-header__primary,
  .site-header__utility {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: clamp(1.5rem, 6vw, 3rem);
    padding-inline: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms ease, visibility 0s linear 260ms;
  }
  /* #10: an expanded submenu can push the menu past the viewport height.
     Make the primary drawer scrollable; auto block-margins keep it centered
     when it fits but let it scroll from the top when it overflows (avoids the
     flex `align-items:center` top-clipping trap where the top is unreachable). */
  .site-header__primary {
    align-items: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .site-header__primary > * { margin-block: auto; width: 100%; }
  /* Primary gets the dark backdrop + radial accent glow. */
  .site-header__primary {
    background:
      radial-gradient(1200px 600px at 85% 15%, rgba(211,171,92,0.22), transparent 60%),
      radial-gradient(900px 500px at 10% 90%, rgba(5,101,177,0.30), transparent 65%),
      #050B14;
  }
  /* Utility sits on top of primary so both share the backdrop. */
  .site-header__utility { background: transparent; }

  /* Open state: reveal + instant visibility. */
  body:has(#nav-toggle:checked) .site-header__primary,
  body:has(#nav-toggle:checked) .site-header__utility,
  #nav-toggle:checked ~ .site-header .site-header__primary,
  #nav-toggle:checked ~ .site-header .site-header__utility {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 300ms ease, visibility 0s linear 0s;
  }

  /* Utility stacks above primary as a full-screen overlay. Without this, the
   * transparent empty area of utility would intercept every click and the
   * primary menu links behind it would be unreachable. Make the overlay
   * pointer-transparent and re-enable events on the actual nav children. */
  body:has(#nav-toggle:checked) .site-header__utility,
  #nav-toggle:checked ~ .site-header .site-header__utility { pointer-events: none; }
  body:has(#nav-toggle:checked) .site-header__utility > *,
  #nav-toggle:checked ~ .site-header .site-header__utility > * { pointer-events: auto; }

  /* Primary menu: large, centered links with staggered fade-up. */
  .site-header__primary nav { width: 100%; }
  .site-header__primary nav > ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding-block: 4rem 8rem;
    display: flex;
  }
  .site-header__primary a {
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5.6vw, 2.75rem);
    font-weight: 500;
    letter-spacing: -0.01em;
    padding-block: 0.35rem;
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    transition: color 180ms ease, opacity 420ms ease, transform 420ms ease;
  }
  .site-header__primary a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent-primary);
    transform: translateX(-50%);
    transition: width 240ms ease;
  }
  .site-header__primary a:hover { color: var(--color-accent-primary); }
  .site-header__primary a:hover::after,
  .site-header__primary a:focus-visible::after { width: 2rem; }
  /* Staggered entrance for each nav link. */
  body:has(#nav-toggle:checked) .site-header__primary li:nth-child(1) a { transition-delay: 80ms; opacity: 1; transform: none; }
  body:has(#nav-toggle:checked) .site-header__primary li:nth-child(2) a { transition-delay: 150ms; opacity: 1; transform: none; }
  body:has(#nav-toggle:checked) .site-header__primary li:nth-child(3) a { transition-delay: 220ms; opacity: 1; transform: none; }
  body:has(#nav-toggle:checked) .site-header__primary li:nth-child(4) a { transition-delay: 290ms; opacity: 1; transform: none; }
  body:has(#nav-toggle:checked) .site-header__primary li:nth-child(5) a { transition-delay: 360ms; opacity: 1; transform: none; }

  /* Utility region: pinned to the bottom of the overlay, centered. */
  .site-header__utility {
    align-items: flex-end;
    justify-content: center;
    padding-block: 0 clamp(2rem, 6vw, 3rem);
  }
  .site-header__utility nav { width: 100%; max-width: 360px; }
  .site-header__utility nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    display: flex;
  }
  .site-header__utility .btn {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1.25rem;
    font-size: 0.9375rem;
    opacity: 0;
    transform: translateY(10px);
    transition: background 150ms ease, color 150ms ease, opacity 420ms ease 420ms, transform 420ms ease 420ms;
  }
  .site-header__utility .btn--ghost { color: #FFFFFF; border-color: rgba(255,255,255,0.6); }
  .site-header__utility .btn--ghost:hover {
    background: var(--color-accent-primary);
    color: #FFFFFF;
    border-color: var(--color-accent-primary);
  }
  body:has(#nav-toggle:checked) .site-header__utility .btn { opacity: 1; transform: none; }

  /* Prevent body scroll while overlay is open. */
  body:has(#nav-toggle:checked) { overflow: hidden; }

  /* Hamburger -> X transformation + color to white when open. */
  body:has(#nav-toggle:checked) .nav-toggle { color: #FFFFFF; }
  body:has(#nav-toggle:checked) .nav-toggle span,
  #nav-toggle:checked ~ .site-header .nav-toggle span { background: transparent; }
  body:has(#nav-toggle:checked) .nav-toggle span::before,
  #nav-toggle:checked ~ .site-header .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
  body:has(#nav-toggle:checked) .nav-toggle span::after,
  #nav-toggle:checked ~ .site-header .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }
}

/* Hamburger toggle (appears in header at mobile widths only). */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 0; background: transparent; color: inherit;
  cursor: pointer; align-items: center; justify-content: center;
  border-radius: 8px;
}
.nav-toggle:hover { background: rgba(255,255,255,0.08); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 22px; height: 2px; background: currentColor; position: relative;
  transition: transform 200ms ease;
}
.nav-toggle span::before { position: absolute; top: -7px; left: 0; }
.nav-toggle span::after  { position: absolute; top:  7px; left: 0; }
@media (max-width: 860px) { .nav-toggle { display: inline-flex; } }

/* Global: ensure images/media always respect container. */
.site-main img, .site-main picture { max-width: 100%; height: auto; display: block; }
.site-main video, .site-main iframe { max-width: 100%; }

/* Touch-friendly tap targets across navigation. */
a, button { min-height: 1.5rem; }

/* ============== Hero =================================================== */
.hero {
  position: relative;
  /* Exact Figma gradient: dark top-left → navy → light blue. */
  background: linear-gradient(231.75deg,
    var(--color-brand-navy-950) 45%,
    var(--color-brand-navy-800) 82%,
    var(--color-brand-navy-600) 102%);
  color: var(--color-text-on-hero);
  padding-block: 2.5rem;
  overflow: hidden;
}
/* Marketing landing pages (image-right hero with media artwork) get the
 * dramatic full-bleed treatment ON DESKTOP — the image fills the hero
 * edge-to-edge so the section gets its visual weight from the artwork, not
 * padding. The actual padding-zero is scoped further down in a
 * @media (min-width: 900px) block; mobile keeps its default padding. */

/* Hero: optional art-directed mobile image (field_mobile_image). When an editor
   sets a mobile image, swap the desktop image for it at <=899px; otherwise the
   main image is used everywhere. */
.hero__media-img--mobile { display: none; }
@media (max-width: 899px) {
  .hero__media-img--desktop { display: none; }
  .hero__media-img--mobile { display: block; }
}
/* Hero bottom is flat — no SVG-masked wave decoration. (The previous
 * curved-bottom flourish was removed per design feedback; if you ever want
 * it back, restore the .hero::after rule from git history.) */
/* Subtle dot-grid background on hero — approximates the world-map decoration. */
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(200,163,90,0.06) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}
.hero .container {
  position: relative;
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: 1fr;
  z-index: 1;
}
.hero--image-right .container { grid-template-columns: 1fr; text-align: left; }
@media (min-width: 900px) { .hero--image-right .container { grid-template-columns: 3fr 2fr; } }
@media (max-width: 899px) {
  /* Mobile: show the image (desktop right column) on top, text below. */
  .hero--image-right .hero__media { order: -1; }
  .hero--image-right .hero__text { order: 0; }
  /* Constrain .hero__media to the card image width on mobile so the orbiting
     ring (.hero__media::after, scoped to .is-front) sits AROUND the card,
     not the full viewport — without this, the ring is sized to the
     full-width column and gets clipped at the screen edges. */
  .is-front .hero--image-right .hero__media {
    max-width: 320px;
    margin-inline: auto;
  }
}

/* image-right variant: both columns sit inside the standard site container,
 * so the text left edge aligns with the header logo. Image is constrained
 * to its 50% grid cell with a soft radius + shadow so it reads as a product
 * showcase rather than a background tile. */
/* Desktop only: zero out top/bottom padding on the image-right hero so the
   media fills edge-to-edge. Wrapped in min-width: 900px so mobile keeps the
   default padding (incl. the .is-front .hero { padding-bottom: 3.25rem }
   ticker spacing). Compound rendered selector + PHYSICAL longhands beat any
   later physical `padding-bottom` declarations regardless of specificity
   (per CSS Logical Properties Level 1). */
@media (min-width: 900px) {
  section.paragraph.hero.hero--image-right {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.hero--image-right::after { display: none; }
.hero--image-right .container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
  gap: 2.5rem;
  align-items: center;
}
.hero--image-right .hero__text { align-self: center; }
.hero--image-right .hero__media { display: flex; }
.hero--image-right .hero__media .field,
.hero--image-right .hero__media .field__item { width: 100%; display: flex; }
.hero--image-right .hero__media img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 40px 60px -30px rgba(0,0,0,0.6);
}
/* Mobile: cap the hero card image so it doesn't dominate the small screen. */
@media (max-width: 899px) {
  .hero--image-right .hero__media img {
    max-width: 320px;
    margin-inline: auto;
  }
}
/* Centre the image's inner wrappers within the media column so the card
 * art sits in the middle of its 40% cell rather than hugging the left. */
.hero--image-right .hero__media > div { margin-inline: auto; }

.hero--text-centered { text-align: center; }
.hero--text-centered .hero__text { max-width: 820px; margin-inline: auto; }
.hero__heading { color: inherit; margin-bottom: 0.75rem; font-weight: 600; }
.hero__eyebrow { color: var(--color-accent-primary); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }
.hero__subtitle {
  color: rgba(255,255,255,0.94);
  font-size: 1.0625rem;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.005em;
  max-width: 44rem;
}
.hero--text-centered .hero__subtitle { margin-inline: auto; }
.hero__media img { border-radius: 16px; box-shadow: 0 40px 60px -30px rgba(0,0,0,0.6); }
.hero__ctas { margin-top: 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero--text-centered .hero__ctas { justify-content: center; }

/* ============== Card grid (Products & Services) ======================== */
.card-grid { background: var(--color-surface-muted); text-align: center; padding-block: var(--space-section); }
/* When card-grid follows the feature-spotlight (same muted background),
 * the two sections read as a single continuous band — collapse the seam
 * so the "Products & Services" heading doesn't float in a 12rem grey void. */
.feature-spotlight + .card-grid { padding-top: 0; }
.card-grid__heading { font-family: var(--font-display); }
.card-grid__intro { max-width: 48rem; margin: 0 auto 3rem; color: var(--color-text-muted); font-size: 1rem; }
.card-grid__cards {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 2rem;
  max-width: 960px;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .card-grid__cards,
  .card-grid__cards[data-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .card-grid__cards[data-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1140px; }
  .card-grid__cards[data-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1240px; }
}

/* Drupal's entity-reference formatter wraps a <div> around all items plus an
 * inner <div> per item. Collapse both layers so the children become direct
 * grid cells. display: contents removes the wrapper from layout but keeps
 * accessibility. */
.card-grid__cards > div,
.rich-card-row__grid > div,
.bullets-and-cards__cards > div,
.news-teaser__grid > div {
  display: contents;
}
/* The news grid is populated by a Drupal View, which nests rows inside
 * .views-element-container > [js-view-dom-id] > div wrappers. Flatten those
 * extra layers so the grid lays cards out horizontally instead of stacking. */
.news-teaser__grid > div > div,
.news-teaser__grid > div > div > div {
  display: contents;
}

/* Constrain field-rendered icon images (Drupal outputs width="960" by default
 * when no image style is set; we use them as 24px glyphs.). */
.card__icon img,
.card__icon svg,
.feature-spotlight__icon img,
.feature-spotlight__icon svg,
.cta-band__icon img,
.cta-band__icon svg,
.list-item__icon img,
.list-item__icon svg {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
}
.feature-spotlight__icon img,
.feature-spotlight__icon svg,
.cta-band__icon img,
.cta-band__icon svg {
  width: 28px !important;
  height: 28px !important;
}

/* Split-media image sizing (was rendering gigantic). */
.split-media__media img {
  width: 100%;
  max-width: 520px;
  height: auto;
}

/* Hero image sizing on desktop. */
.hero__media img {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

.card {
  background: var(--color-surface-page);
  border-radius: var(--radius-card);
  padding: 2.25rem 1.75rem 1.75rem;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 0.85rem;
  text-align: center;
  transition: transform 220ms ease, box-shadow 220ms ease;
  position: relative;
  /* Stretch to fill the grid row so siblings of different body lengths line
   * up to the same height. The `.card__body` is allowed to grow so the
   * "Learn More" CTA sticks to the bottom edge in every card. */
  height: 100%;
}
.card__body { flex: 1 1 auto; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-elev); }
.card__icon {
  width: 48px; height: 48px;
  margin: 0 auto 0.5rem;
  background: var(--color-accent-soft);
  color: var(--color-accent-primary);
  border-radius: 999px;
  display: grid; place-items: center;
}
.card__icon img, .card__icon svg { width: 24px; height: 24px; }
.card__heading { font-family: var(--font-display); font-size: 1.25rem; color: var(--color-text-primary); margin: 0; }
.card__body { color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.55; margin: 0; }
.card__cta {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--color-accent-primary);
  font-weight: 600;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  justify-content: center;
  font-family: var(--font-ui);
}
.card__cta svg { flex-shrink: 0; }
.card__cta:hover { color: var(--color-accent-primary-hover); }
.card__cta:hover svg { transform: translateX(2px); transition: transform 180ms ease; }

/* ============== Feature spotlight ====================================== */
.feature-spotlight { background: var(--color-surface-muted); text-align: center; }
.feature-spotlight--world-map { position: relative; overflow: hidden; }
.feature-spotlight--world-map::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 10% 50%, rgba(10,37,64,0.04) 0.5px, transparent 1px),
                    radial-gradient(circle at 30% 50%, rgba(10,37,64,0.04) 0.5px, transparent 1px),
                    radial-gradient(circle at 50% 50%, rgba(10,37,64,0.04) 0.5px, transparent 1px),
                    radial-gradient(circle at 70% 50%, rgba(10,37,64,0.04) 0.5px, transparent 1px),
                    radial-gradient(circle at 90% 50%, rgba(10,37,64,0.04) 0.5px, transparent 1px);
  background-size: 8px 8px; opacity: 0.6; pointer-events: none;
}
.feature-spotlight .container { position: relative; }
.feature-spotlight__card {
  max-width: 720px;
  margin-inline: auto;
  padding: 3rem 2rem;
  background: var(--color-surface-page);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elev);
}
.feature-spotlight__icon {
  width: 56px; height: 56px;
  margin: 0 auto 1.25rem;
  background: var(--color-accent-soft);
  color: var(--color-accent-primary);
  border-radius: 999px;
  display: grid; place-items: center;
}
.feature-spotlight__icon img, .feature-spotlight__icon svg { width: 28px; height: 28px; }
.feature-spotlight__heading { font-family: var(--font-display); }
.feature-spotlight__body { color: var(--color-text-muted); max-width: 48rem; margin: 0 auto 1.25rem; font-size: 0.9375rem; }

/* ============== Split media =========================================== */
.split-media { background: var(--color-surface-page); }
.split-media .container { display: grid; gap: 3rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .split-media .container { grid-template-columns: 1fr 1fr; } }
.split-media--image-left .split-media__media { order: 1; }
.split-media--image-left .split-media__text  { order: 2; }
.split-media--image-right .split-media__media { order: 2; }
.split-media--image-right .split-media__text  { order: 1; }
.split-media__media { display: flex; justify-content: center; }
.split-media__media img {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.split-media__heading {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.split-media__body {
  color: #3A3A3A;
  font-size: 1.125rem;
  line-height: 1.45;
  margin-bottom: 1.5rem;
}
.split-media__bullets { display: grid; gap: 1.0625rem; margin-top: 0; }
.split-media__bullets li {
  padding-left: 2.25rem;
  position: relative;
  color: #3A3A3A;
  font-size: 1.125rem;
  line-height: 1.35;
}
.split-media__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--color-accent-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px 14px no-repeat;
}

/* ============== Bullets + cards ======================================== */
.bullets-and-cards {
  background: var(--color-surface-muted);
  position: relative;
}
.bullets-and-cards--world-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' fill='none' stroke='%23D0D5DD' stroke-width='0.35'><circle cx='30' cy='30' r='1'/><circle cx='35' cy='28' r='0.8'/><circle cx='40' cy='32' r='0.8'/><circle cx='50' cy='38' r='0.9'/><circle cx='55' cy='35' r='0.8'/><circle cx='65' cy='45' r='0.9'/><circle cx='75' cy='50' r='0.9'/><circle cx='85' cy='48' r='0.8'/><circle cx='120' cy='40' r='0.9'/><circle cx='125' cy='35' r='0.8'/><circle cx='130' cy='38' r='0.8'/><circle cx='145' cy='42' r='0.9'/><circle cx='150' cy='45' r='0.8'/><circle cx='160' cy='50' r='0.9'/><circle cx='170' cy='55' r='0.8'/><circle cx='180' cy='60' r='0.8'/></svg>") right center / contain no-repeat;
  opacity: 0.35;
  pointer-events: none;
}
.bullets-and-cards > * { position: relative; z-index: 1; }
.bullets-and-cards__grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .bullets-and-cards__grid { grid-template-columns: 1.2fr 1fr; gap: 5rem; } }
.bullets-and-cards__heading {
  text-align: left;
  font-family: var(--font-display);
  color: var(--color-text-primary);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 0.75rem;
}
.bullets-and-cards__intro {
  color: var(--color-brand-steel-500);
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
  max-width: 34rem;
}
.bullets-and-cards__text { min-width: 0; }
.bullets-and-cards__bullets {
  display: grid;
  gap: 1rem;
  font-size: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.bullets-and-cards__bullets li {
  padding-left: 2.25rem;
  position: relative;
  color: var(--color-brand-steel-500);
  line-height: 1.4;
}
.bullets-and-cards__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--color-accent-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/14px 14px no-repeat;
}
.bullets-and-cards__cards { display: grid; gap: 0.875rem; align-self: center; }
.bullets-and-cards__cards .card {
  background: var(--color-surface-page);
  border: 1px solid #DCDFE5;
  border-radius: 14px;
  box-shadow: 0 4px 10px -6px rgba(10,37,64,0.08);
  flex-direction: row;
  text-align: left;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  display: flex;
}
.bullets-and-cards__cards .card__icon {
  margin: 0;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--color-accent-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}
.bullets-and-cards__cards .card__icon img,
.bullets-and-cards__cards .card__icon svg {
  width: 18px !important;
  height: 18px !important;
  filter: brightness(0) invert(1);
}
.bullets-and-cards__cards .card__heading {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

/* ============== Rich card row ========================================= */
.rich-card-row {
  background: linear-gradient(180deg, #FFFFFF 0%, #EFF1F4 34%, #EDEFF3 84%, #FFFFFF 100%);
}
.rich-card-row__heading {
  text-align: center;
  color: var(--color-brand-steel-500);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin-bottom: 0.75rem;
}
.rich-card-row__intro {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto 2.75rem;
  color: var(--color-brand-steel-500);
  font-size: 1.125rem;
  line-height: 1.5;
}
.rich-card-row__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .rich-card-row__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rich-card-row__grid { grid-template-columns: repeat(3, 1fr); } }
.rich-card {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 2rem 1.625rem;
  border-radius: 27px;
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 4px 14px -6px rgba(10,37,64,0.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 318px;
}
.rich-card__heading {
  font-family: var(--font-display);
  color: #3A3A3A;
  font-size: 1.375rem;
  font-weight: 600;
  text-transform: capitalize;
  margin: 0;
  line-height: 1.15;
}
.rich-card__body {
  color: #3A3A3A;
  font-size: 1rem;
  line-height: 1.45;
}
.rich-card__body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.875rem;
}
.rich-card__body li {
  position: relative;
  padding-left: 1.25rem;
  color: #3A3A3A;
  font-size: 1rem;
  line-height: 1.4;
}
.rich-card__body li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.55rem;
  width: 5px;
  height: 5px;
  background: var(--color-accent-primary);
  border-radius: 9999px;
}
.rich-card__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.rich-card__chips .chip {
  background: #EDEFF3;
  border: 1px solid #DCDFE5;
  border-radius: 10px;
  padding: 5px 6px;
  font-size: 0;
  line-height: 0;
  flex: 1 1 0;
  min-width: 0;
}
.rich-card__chips .chip__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 26px;
  background: var(--color-accent-primary);
  color: #FFFFFF;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

/* Rich card inline swap preset (USD <-> BTC). */
.rich-card__swap {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #EDEFF3;
  border: 1px solid #DCDFE5;
  border-radius: 10px;
  padding: 0.625rem 1rem;
}
.rich-card__swap-side { display: flex; flex-direction: column; text-align: center; line-height: 1; gap: 0.25rem; }
.rich-card__swap-symbol { color: var(--color-brand-steel-500); font-weight: 700; font-size: 1rem; }
.rich-card__swap-label  { color: var(--color-brand-steel-500); font-size: 0.8125rem; font-weight: 400; }
.rich-card__swap-arrow  { color: var(--color-accent-primary); display: inline-flex; align-items: center; }
.chip {
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
}
.chip--accent {
  background: var(--color-accent-primary);
  color: #FFFFFF;
  border-color: var(--color-accent-primary);
}

/* ============== Pill list feature (Trade Finance) ===================== */
.pill-list-feature { background: linear-gradient(180deg, #F6F7FA 0%, #EEF0F4 100%); }
.pill-list-feature__grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .pill-list-feature__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4.5rem; }
}
.pill-list-feature__heading {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 2.625rem);
  font-weight: 600;
  margin-bottom: 1rem;
}
.pill-list-feature__body {
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 36rem;
}
.pill-list-feature__body p:last-child { margin-bottom: 0; }
.pill-list-feature__pills { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.25rem; }
.pill-list-feature__pills .chip { padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; }

.pill-list-feature__items { display: grid; gap: 0.75rem; list-style: none; padding: 0; margin: 0; }
.pill-list-feature__card {
  background: var(--color-surface-page);
  border: 1px solid #DCDFE5;
  border-radius: 12px;
  box-shadow: 0 3px 4.5px -0.75px rgba(0,0,0,0.08), 0 1.5px 3px -1.5px rgba(0,0,0,0.08);
  padding: 1.125rem 1.25rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}
.pill-list-feature__icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--color-accent-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-navy-900);
}
.pill-list-feature__icon img,
.pill-list-feature__icon svg {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain;
}
.pill-list-feature__card-body { min-width: 0; flex: 1; }
.pill-list-feature__card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-brand-steel-500);
  margin: 0 0 0.125rem;
  line-height: 1.3;
}
.pill-list-feature__card-badge {
  font-weight: 600;
  color: var(--color-brand-steel-500);
}
.pill-list-feature__card-subtitle {
  font-family: var(--font-display);
  color: var(--color-brand-steel-500);
  font-size: 0.9375rem;
  line-height: 1.3;
  margin: 0;
}

/* Safety net: keep contextual module links hidden even if a region sets display on ul. */
.contextual-region .contextual-links { display: none; }
.contextual-region .contextual.open .contextual-links { display: block; }

.news-card h3 { font-family: var(--font-article); font-weight: 800; letter-spacing: -0.02em; }

/* ============== News teaser =========================================== */
.news-teaser { background: var(--color-surface-page); }

/* News archive (paginated view): centered heading + same vertical padding
 * as inner editorial pages (About, Profile, etc.). Triggered when the
 * teaser contains a pager — i.e. only on /news, not on the homepage. */
.news-teaser:has(.pager) {
  padding-block: clamp(3rem, 6vw, 5rem);
}
.news-teaser:has(.pager) .news-teaser__header {
  justify-content: center;
  text-align: center;
}
/* Archive listing: 2 cards per row at desktop (override the 3-col homepage grid). */
@media (min-width: 1024px) {
  .news-teaser:has(.pager) .news-teaser__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Pager spans the full grid width and centers its items. */
.news-teaser__grid .pager,
.news-teaser .pager {
  grid-column: 1 / -1 !important;
  width: 100%;
  margin-top: 2.5rem;
  text-align: center;
}
.news-teaser__grid .pager__items,
.news-teaser .pager__items {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-teaser__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; gap: 1rem; flex-wrap: wrap; }
.news-teaser__heading { font-family: var(--font-display); font-weight: 500; margin: 0; color: var(--color-text-primary); font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
.news-teaser__accent { color: var(--color-accent-primary); }
.news-teaser__link { color: var(--color-accent-primary); font-weight: 600; font-size: 0.9375rem; }
.news-teaser__all { font-size: 0.875rem; color: var(--color-brand-neutral-0); padding: 0.6rem 1.25rem; }
.news-teaser__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .news-teaser__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .news-teaser__grid { grid-template-columns: repeat(3, 1fr); } }

/* When a Views exposed filter form is inside the news grid (e.g. the
 * /news listing block_archive display), span it the full width as its
 * own row above the cards, and arrange its fields horizontally. */
.news-teaser__grid .views-exposed-form,
.news-teaser__grid .pager,
.news-teaser__grid > .views-element-container { grid-column: 1 / -1; }
.news-teaser__grid .views-exposed-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
  padding: 1.25rem;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  margin-bottom: 0.5rem;
}
.news-teaser__grid .views-exposed-form .form-item {
  margin: 0;
  flex: 1 1 220px;
  min-width: 180px;
}
.news-teaser__grid .views-exposed-form .form-item label { display: block; font-size: 0.8125rem; }
.news-teaser__grid .views-exposed-form .form-actions {
  margin: 0;
  display: flex;
  gap: 0.5rem;
  align-self: end;
}
/* Also handle the case where Drupal puts the form OUTSIDE the grid wrapper. */
.views-exposed-form[data-drupal-selector*="news-latest"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: end;
}
.news-card {
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow 220ms ease, transform 220ms ease;
  display: grid; grid-template-rows: auto 1fr;
}
.news-card:hover { box-shadow: var(--shadow-elev); transform: translateY(-2px); }
/* Show the full thumbnail — no crop. Matching the Figma blog card ratio
 * (~16/8) with a navy backdrop so letterboxing from `contain` looks intentional
 * when an image's native ratio differs. */
.news-card__media { display: block; aspect-ratio: 16 / 8; background: var(--color-brand-navy-950); overflow: hidden; }
.news-card img { width: 100%; height: 100%; object-fit: contain; display: block; }
.news-card__body { padding: 1.25rem; display: grid; gap: 0.5rem; }
.news-card__meta { color: var(--color-text-muted); font-size: 0.8125rem; display: flex; gap: 0.75rem; }
.news-card__body h3 { font-family: var(--font-display); font-size: 1.125rem; margin: 0; }
.news-card__body p { font-size: 0.875rem; margin: 0; }

/* ============== CTA band ============================================== */
/* CTA band — full-bleed dramatic section CTA, same "smashing" register as
 * the in-body callout. Big slab-serif title, big body, big gold pill
 * button, multi-layer gradient + dot grid + soft halo behind title. */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 400px at 0% 100%, rgba(5,101,177,0.30), transparent 60%),
    linear-gradient(231.75deg, var(--color-brand-navy-950) 35%, var(--color-brand-navy-800) 75%, var(--color-brand-navy-600) 105%);
  color: #FFFFFF;
  text-align: center;
  padding-block: clamp(4rem, 8vw, 6.5rem);
}
/* Dark-navy variant — same base gradient (no gold glow in top-right). */
.cta-band--dark-navy {
  background:
    radial-gradient(700px 400px at 0% 100%, rgba(5,101,177,0.30), transparent 60%),
    linear-gradient(231.75deg, var(--color-brand-navy-950) 35%, var(--color-brand-navy-800) 75%, var(--color-brand-navy-600) 105%);
}
/* Dot-grid texture. */
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}
/* Halo behind title removed — keep the band fully navy with no gold tint. */
.cta-band .container > * { position: relative; z-index: 1; }

.cta-band__icon {
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 1.25rem;
  background: rgba(211,171,92,0.18);
  color: var(--color-accent-primary);
  border-radius: 999px;
  display: grid; place-items: center;
}
.cta-band__icon img, .cta-band__icon svg { width: 32px; height: 32px; }

.cta-band__heading {
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem); /* ~32 → 56px */
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.05;
  margin: 0 auto 0.85rem;
  /* max-width: 22ch; */
}
.cta-band__body,
.cta-band__body p {
  color: #FFFFFF;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); /* 17 → 20px */
  font-weight: 400;
  line-height: 1.55;
  opacity: 0.92;
  max-width: 56ch;
  margin: 0 auto 1.5rem;
}
/* Override the generic .btn-primary sizing for the cta-band button —
 * same dramatic register as the callout's button. */
.cta-band .btn,
.cta-band .btn-primary {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1rem 2.25rem;
  border-radius: 999px;
  background: var(--color-accent-primary);
  color: #FFFFFF;
  border: 1px solid var(--color-accent-primary);
  box-shadow: 0 12px 28px -10px rgba(211,171,92,0.55);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, background 200ms ease, color 200ms ease;
}
.cta-band .btn:hover,
.cta-band .btn-primary:hover {
  background: #FFFFFF;
  color: var(--color-brand-navy-900);
  border-color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(255,255,255,0.45);
}
.cta-band .btn:focus-visible,
.cta-band .btn-primary:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* ============== Error pages (404 / 403) =============================== */
body.is-error-page .site-main {
  background:
    radial-gradient(900px 500px at 90% 10%, rgba(211,171,92,0.15), transparent 60%),
    radial-gradient(700px 400px at 5% 90%, rgba(5,101,177,0.18), transparent 65%),
    linear-gradient(180deg, #051327 0%, #0A2540 60%, #012036 100%);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  display: grid;
  place-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  text-align: center;
}
body.is-error-page .site-main > * { position: relative; z-index: 1; }
body.is-error-page .site-main::before {
  content: "";
  position: absolute;
  inset: -5% -10%;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(211,171,92,0.05) 0 1px, transparent 1px 30px);
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 45%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 45%, transparent 70%);
}
body.is-error-page .site-main > a[id="main-content"] { position: absolute; }
body.is-error-page #block-suisse-theme-page-title { max-width: 780px; margin: 0 auto; padding-inline: 1.5rem; }
body.is-error-page #block-suisse-theme-page-title h1 {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 14vw, 9.5rem);
  font-weight: 600;
  line-height: 1;
  margin: 0 0 1rem;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--color-accent-primary) 60%, #F4ECD9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.03em;
}
body.is-error-page #block-suisse-theme-content {
  max-width: 620px;
  margin: 0 auto;
  padding-inline: 1.5rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.82);
}
body.is-error-page #block-suisse-theme-content::before {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--color-accent-primary);
  margin: 0 auto 1.5rem;
}
body.is-error-page #block-suisse-theme-content::after {
  content: "Go back home";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding: 0.875rem 1.75rem;
  background: var(--color-accent-primary);
  color: var(--color-brand-navy-900);
  font-weight: 600;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  cursor: pointer;
  box-shadow: 0 12px 24px -10px rgba(211,171,92,0.4);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
body.is-error-page #block-suisse-theme-content {
  position: relative;
}
/* Real home link wrapping the CTA pseudo-element. */
body.is-error-page #block-suisse-theme-content {
  padding-bottom: 4.5rem;
}
body.is-error-page .site-main .error-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding: 0.875rem 1.75rem;
  background: var(--color-accent-primary);
  color: var(--color-brand-navy-900);
  font-weight: 600;
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  box-shadow: 0 12px 24px -10px rgba(211,171,92,0.4);
  transition: transform 200ms ease, box-shadow 200ms ease, background 150ms ease;
}
body.is-error-page .site-main .error-home-link:hover {
  transform: translateY(-2px);
  background: #E3BC78;
  box-shadow: 0 16px 28px -10px rgba(211,171,92,0.55);
}
/* Hide the pseudo-CTA (we add a real link via template below). */
body.is-error-page #block-suisse-theme-content::after { display: none; }

/* Large decorative number behind 404 for depth. */
body.is-error-404 .site-main::after {
  content: "404";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16rem, 40vw, 34rem);
  color: rgba(255,255,255,0.03);
  letter-spacing: -0.05em;
  z-index: 0;
  pointer-events: none;
  line-height: 1;
}

/* ============== Footer ================================================ */
/* Site footer — futuristic dark register: navy gradient + gold horizontal
 * accent line + dot grid backdrop + ambient corner glows. Menus get a gold
 * underline animation on hover. Bottom row separates legal links from
 * copyright. */
.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(211,171,92,0.18), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(5,101,177,0.22), transparent 65%),
    linear-gradient(180deg, #0C1B29 0%, #1F384F 60%, #112233 100%);
  color: rgba(255,255,255,0.75);
  padding-block: clamp(3.5rem, 7vw, 6rem) 1.75rem;
  font-size: 0.9375rem;
}
/* Top gold accent line. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent-primary), transparent);
  opacity: 0.7;
}
/* Subtle dot-grid texture. */
.site-footer::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: -1;
}

.site-footer__top {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
}
@media (min-width: 960px) {
  .site-footer__top { grid-template-columns: 1.1fr 3fr; }
}

.site-footer__about { display: grid; gap: 1.25rem; align-content: start; }
.site-footer__brand { display: grid; gap: 0.5rem; color: #fff; }
.site-footer__brand strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.site-footer__brand span {
  color: var(--color-accent-primary);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
}

.footer-social { display: flex; gap: 0.5rem; margin-top: 0.25rem; }
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9375rem; font-weight: 600;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: #FFFFFF;
  transform: translateY(-2px);
  outline: none;
}

.site-footer__menus {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 640px) { .site-footer__menus { grid-template-columns: repeat(4, 1fr); } }

.site-footer__menu h2,
.site-footer__menu h3 {
  position: relative;
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin: 0 0 1.25rem;
  font-weight: 700;
  padding-bottom: 0.65rem;
}
.site-footer__menu h2::after,
.site-footer__menu h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  background: var(--color-accent-primary);
  border-radius: 2px;
}

.site-footer__menu ul { display: grid; gap: 0.55rem; padding: 0; margin: 0; list-style: none; }
.site-footer__menu li { list-style: none; }
.site-footer__menu a {
  position: relative;
  color: rgba(255,255,255,0.75);
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  display: inline-block;
  padding-block: 0.1rem;
  transition: color 160ms ease, transform 160ms ease;
}
/* Hover: subtle 4px slide right + gold underline animation. */
.site-footer__menu a::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--color-accent-primary);
  transition: width 220ms ease;
}
.site-footer__menu a:hover,
.site-footer__menu a:focus-visible {
  color: var(--color-accent-primary);
  transform: translateX(3px);
}
.site-footer__menu a:hover::before,
.site-footer__menu a:focus-visible::before { width: 100%; }

/* Footer credits — premium three-row centered stack.
 *
 *   Disclaimer · Cookie Disclaimer · Privacy Policy        (policy links)
 *           [F] [I] [T] [L] [Y] [X]                        (social anchor)
 *           Copyright © 2026 Suisse Bank …                 (identity)
 *
 * Social sits in the middle as the visual anchor; legal above (clickable,
 * editorial), copyright below (fine print). A thin gold-tinted divider
 * above separates this strip from the column nav. Stacks identically on
 * mobile — no media queries needed. */
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* gap: 1.25rem; */
  padding-top: 2.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}
.site-footer__bottom > * { width: auto; max-width: 100%; }
.site-footer__bottom ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Legal links: inline horizontal row, centered. The legal-links row is then
 * one of three equally-spaced rows in .site-footer__bottom (legal, social,
 * copyright) — vertical rhythm governed by the parent flex `gap`. */
.site-footer__bottom > div > nav ul,
.site-footer__bottom > nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2rem;
  align-items: center;
  justify-content: center;
}
.site-footer__bottom > div > nav ul li,
.site-footer__bottom > nav ul li { list-style: none; }
.site-footer__bottom a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 160ms ease;
}
.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible { color: var(--color-accent-primary); }
.footer-copyright { margin: 0; letter-spacing: 0.02em; }

/* Extra breathing room below the legal-links row before the social/copyright cluster. */
#block-suisse-theme-footer-legal-menu { margin-bottom: 20px; }

/* .copyright-inner: social on top, copyright below. Vertical rhythm is
 * governed by the parent `.site-footer__bottom` flex gap — no gap here. */
.site-footer__bottom .copyright-inner {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 1.25rem;
}
.cpspan {
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.55;
  max-width: 60ch;
  font-size: 0.8125rem;
}
.socialbuttons ul.social-networks {
  display: inline-flex;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}
.social-networks li { margin: 0; list-style: none; }
.social-networks li::before { content: none !important; }
.social-networks li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.02);
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.social-networks li a svg { width: 16px; height: 16px; }
.social-networks li a:hover,
.social-networks li a:focus-visible {
  color: var(--color-brand-navy-900);
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(212, 175, 90, 0.55);
}

/* ============== News article detail =================================== */
.news-article { background: var(--color-surface-page); }
.news-article__hero {
  background: linear-gradient(231.75deg,
    var(--color-brand-navy-950) 45%,
    var(--color-brand-navy-800) 82%,
    var(--color-brand-navy-600) 102%);
  color: var(--color-text-on-hero);
  padding-block: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.news-article__hero .container { max-width: 52rem; }
.news-article__eyebrow {
  color: var(--color-accent-primary);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.news-article__title {
  font-family: var(--font-article);
  font-weight: 800;
  color: inherit;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-inline: auto;
}
.news-article__meta { color: rgba(255,255,255,0.7); font-family: var(--font-ui); font-size: 0.875rem; margin-top: 1rem; }
.news-article__cover { padding-block: 2rem; }
.news-article__cover img {
  width: 100%; max-width: 960px; margin-inline: auto;
  aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elev);
}
.news-article__body {
  font-family: var(--font-article);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  padding-block: 1rem 3rem;
}
.news-article__body p { margin-bottom: 1em; }
.news-article__back { padding-block: 0 3rem; }

/* ============== Footer brand image sizing ============================= */
.site-footer__brand img.site-footer__logo {
  max-width: 260px;
  height: auto;
  display: block;
}

/* ============== Paragraph wrapper nits ================================ */
.paragraph { margin: 0; }

/* ============== Search ================================================ */
/* Header trigger — small icon button, styled like nav-toggle. */
.search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  color: currentColor;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.search-trigger:hover { background: rgba(0,45,69,0.06); color: var(--color-accent-primary); }
@media (max-width: 960px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "brand . search toggle";
  }
  /* z-index 90 keeps the search icon below the menu overlay (z-index 100) so
     it doesn't show on top of the open mobile menu; the hamburger stays at
     110 so it remains tappable to close. */
  .search-trigger { grid-area: search; z-index: 90; color: inherit; }
  body:has(#nav-toggle:checked) .search-trigger { color: #FFFFFF; }
  .search-trigger:hover { background: rgba(255,255,255,0.08); }
}

/* Full-screen overlay popup — mirrors the nav drawer's pattern so the
 * interaction model is consistent (and JS-free). */
.search-popup {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 6vw, 3rem);
  background:
    radial-gradient(1200px 600px at 85% 15%, rgba(211,171,92,0.22), transparent 60%),
    radial-gradient(900px 500px at 10% 90%, rgba(5,101,177,0.30), transparent 65%),
    #050B14;
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
body:has(#search-toggle:checked) .search-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 300ms ease, visibility 0s linear 0s;
}
body:has(#search-toggle:checked) { overflow: hidden; }

/* Close button — top-right corner, gold-ringed so it reads as a close
 * affordance against the dark overlay. Rotates on hover for a subtle cue. */
.search-popup__close {
  position: absolute;
  top: clamp(1.25rem, 2.5vw, 2rem);
  right: clamp(1.25rem, 2.5vw, 2rem);
  width: 52px; height: 52px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer;
  z-index: 2;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 200ms ease;
}
.search-popup__close:hover {
  background: var(--color-accent-primary);
  color: var(--color-brand-navy-900);
  border-color: var(--color-accent-primary);
  transform: rotate(90deg);
}
.search-popup__close:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 3px;
}

.search-popup__form {
  width: 100%;
  max-width: 720px;
  display: grid;
  gap: 1rem;
}
.search-popup__label {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
}
.search-popup__field {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  transition: border-color 150ms ease, background 150ms ease;
}
.search-popup__field:focus-within {
  border-color: var(--color-accent-primary);
  background: rgba(255,255,255,0.10);
}
.search-popup__field svg { color: rgba(255,255,255,0.6); }
.search-popup__field input {
  background: transparent;
  border: 0;
  color: #FFFFFF;
  font-size: 1.0625rem;
  padding: 0.75rem 0;
  width: 100%;
  outline: none;
}
.search-popup__field input::placeholder { color: rgba(255,255,255,0.45); }
.search-popup__submit { padding: 0.65rem 1.25rem; font-size: 0.9375rem; }

/* Autofocus the input when the overlay opens — CSS-only approach via
 * :focus-within is not possible from outside, so we rely on label+input
 * order. Users can tab straight into the field. */

/* ============== Shell pages (non-node routes with page-title block) ===== */
/* Body class `.is-shell-page` is added by suisse_theme_preprocess_html for
 * search, webform.canonical, user.login/register/pass, contact.site_page —
 * any route that renders via the page-title + content blocks instead of a
 * node template. These rules give those routes the same branded hero +
 * centered container treatment as `node--page--content` pages. */

body.is-shell-page .site-main { padding-block: 0 clamp(3rem, 6vw, 5rem); }
body.is-shell-page #block-suisse-theme-page-title {
  background: linear-gradient(231.75deg,
    var(--color-brand-navy-950) 45%,
    var(--color-brand-navy-800) 82%,
    var(--color-brand-navy-600) 102%);
  color: #FFFFFF;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
body.is-shell-page #block-suisse-theme-page-title::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(211,171,92,0.07) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}
body.is-shell-page #block-suisse-theme-page-title h1 {
  color: #FFFFFF;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  margin: 0 auto;
  max-width: 900px;
  position: relative;
  font-weight: 500;
  letter-spacing: -0.015em;
}
body.is-shell-page #block-suisse-theme-page-title h1::before {
  content: "SUISSE BANK";
  display: block;
  color: var(--color-accent-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
/* Search route gets a more specific eyebrow. */
body.is-search-page #block-suisse-theme-page-title h1::before { content: "SEARCH"; }

/* Page content — centered inside the container. */
body.is-shell-page #block-suisse-theme-content {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
  padding-top: clamp(2rem, 5vw, 3.5rem);
}

/* Inline search form — pill input + gold submit, matching the popup. The
 * pill styling lives on the inner .container-inline so siblings (help link,
 * advanced search details) sit cleanly below instead of inside the pill. */
body.is-search-page .search-form {
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
body.is-search-page .search-form .container-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  box-shadow: 0 20px 40px -20px rgba(0,45,69,0.15);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
body.is-search-page .search-form .container-inline:focus-within {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 4px rgba(200, 163, 74, 0.15);
}
body.is-search-page .search-form .form-item-keys { flex: 1 1 auto; margin: 0; min-width: 0; }
body.is-search-page .search-form label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
body.is-search-page .search-form input[type="search"],
body.is-search-page .search-form input[type="search"]:focus {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-size: 1rem;
  padding: 0.75rem 0;
  width: 100%;
  outline: none;
  color: var(--color-text-primary);
}
body.is-search-page .search-form input[type="search"]::placeholder { color: var(--color-text-muted); }
body.is-search-page .search-form .form-submit {
  border: 0;
  border-radius: 999px;
  background: var(--color-accent-primary);
  color: var(--color-brand-navy-900);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 150ms ease, color 150ms ease;
}
body.is-search-page .search-form .form-submit:hover {
  background: var(--color-brand-navy-900);
  color: #FFFFFF;
}
body.is-search-page .search-help-link {
  align-self: center;
  color: var(--color-accent-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}
body.is-search-page .search-help-link:hover { text-decoration: underline; }

/* Advanced search disclosure (rendered by core for some configurations). */
body.is-search-page .search-form details,
body.is-search-page .search-form .search-advanced {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
}
body.is-search-page .search-form details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-brand-navy-900);
  font-size: 0.9375rem;
  list-style: none;
}
body.is-search-page .search-form details summary::-webkit-details-marker { display: none; }
body.is-search-page .search-form details summary::before {
  content: "+";
  display: inline-block;
  width: 1.25rem;
  color: var(--color-accent-primary);
  font-weight: 700;
  transition: transform 200ms ease;
}
body.is-search-page .search-form details[open] summary::before { content: "−"; }
body.is-search-page .search-form details > *:not(summary) { margin-top: 0.75rem; }

/* "Search results" heading — subdued section label. */
body.is-search-page #block-suisse-theme-content > h2 {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 600;
  margin: 0 0 1.5rem;
}

/* Results grid — responsive 1/2/3 columns. */
body.is-search-page #block-suisse-theme-content > ol {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { body.is-search-page #block-suisse-theme-content > ol { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { body.is-search-page #block-suisse-theme-content > ol { grid-template-columns: repeat(3, 1fr); } }
body.is-search-page #block-suisse-theme-content > ol > li { list-style: none; }

/* Pager + empty state. */
/* ============== Pager (site-wide) ===================================== */
/* Generic styling for Drupal's standard pager — applies to search results,
 * Views pagers (news listing, future content), and any paginated route.
 * HTML shape: <nav.pager> > <ul.pager__items> > <li.pager__item> with
 * modifiers `.is-active`, `.pager__item--first/previous/next/last`. */
.pager {
  margin-block: clamp(2rem, 4vw, 3rem) 0;
  display: flex;
  justify-content: center;
}
.pager__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.pager__item {
  list-style: none;
  margin: 0;
}
.pager__item a,
.pager__item.is-active > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.pager__item a:hover,
.pager__item a:focus-visible {
  background: var(--color-accent-primary);
  color: #FFFFFF;
  border-color: var(--color-accent-primary);
  outline: none;
  transform: translateY(-1px);
}
.pager__item.is-active > a,
.pager__item.is-active > span {
  background: var(--color-brand-navy-900);
  color: #FFFFFF;
  border-color: var(--color-brand-navy-900);
  cursor: default;
  pointer-events: none;
}
/* Arrow controls — keep them slightly distinct (text-style, no number). */
.pager__item--first a,
.pager__item--previous a,
.pager__item--next a,
.pager__item--last a {
  font-weight: 600;
  letter-spacing: 0.01em;
}
@media (max-width: 480px) {
  /* Hide first/last on tiny screens; previous/next + numbers is enough. */
  .pager__item--first,
  .pager__item--last { display: none; }
  .pager__item a,
  .pager__item.is-active > * { min-width: 36px; height: 36px; padding: 0 0.65rem; font-size: 0.875rem; }
}

/* Mini pager (core's pager.mini.html.twig template — used by Views "Mini"
 * pager plugin and some core listings). Same `.pager` shell but only
 * emits prev/current/next items. Drupal applies the same class names
 * so all our base rules carry over; the current-page <span> uses
 * `.pager__item--current` instead of `.is-active`. */
.pager-mini,
.pager.pager--mini {
  /* Slightly tighter on listings where the mini pager is meant to be
   * unobtrusive (e.g. news index, category pages). */
  margin-block: 1.5rem 0;
}
.pager__item--current > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-brand-navy-900);
  background: var(--color-brand-navy-900);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 480px) {
  .pager__item--current > * { min-width: 36px; height: 36px; padding: 0 0.85rem; font-size: 0.875rem; }
}
body.is-search-page #block-suisse-theme-content > p {
  text-align: center;
  color: var(--color-text-muted);
  padding-block: 2rem;
  max-width: 540px;
  margin-inline: auto;
}

/* Card rendered by search-result.html.twig. */
.search-result-card {
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.search-result-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-elev); }
.search-result-card__type {
  color: var(--color-accent-primary);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.search-result-card__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin: 0;
  color: var(--color-brand-navy-900);
  line-height: 1.3;
}
.search-result-card__title a { color: inherit; text-decoration: none; }
.search-result-card__title a:hover { color: var(--color-accent-primary); }
.search-result-card__snippet {
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-result-card__snippet strong {
  color: var(--color-text-primary);
  background: rgba(211,171,92,0.18);
  padding: 0 2px;
  border-radius: 2px;
}
.search-result-card__link {
  color: var(--color-accent-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  margin-top: auto;
}

/* ============== FAQ section ========================================== */
/* Native <details>/<summary> accordion. No JS, smoothly animated via the
 * grid-template-rows 0fr → 1fr trick for the answer wrapper. */

.faq-section {
  background: var(--color-surface-page);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
}
.faq-section::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(5,11,20,0.04) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}
.faq-section__header {
  position: relative;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.faq-section__heading {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-brand-navy-900);
  margin: 0 0 0.5rem;
}
.faq-section__accent { color: var(--color-accent-primary); }
.faq-section__intro {
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0.75rem auto 0;
  font-size: 1rem;
}
.faq-section__results {
  position: relative;
  max-width: 920px;
  margin-inline: auto;
}
.faq-section__list {
  display: grid;
  gap: 0.875rem;
}

/* Filter input — pill-shape, gold focus, clear button. */
.faq-section__filter {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: 0.5rem 0.75rem 0.5rem 1.25rem;
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 20px 40px -20px rgba(0,45,69,0.15);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.faq-section__filter:focus-within {
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 4px rgba(211,171,92,0.18);
}
.faq-section__filter-icon { color: var(--color-text-muted); }
.faq-section__filter-input {
  border: 0;
  background: transparent;
  font-size: 1rem;
  padding: 0.65rem 0;
  width: 100%;
  outline: none;
  color: var(--color-text-primary);
}
.faq-section__filter-input::placeholder { color: var(--color-text-muted); }
.faq-section__filter-clear {
  border: 0;
  background: rgba(0,45,69,0.08);
  color: var(--color-text-primary);
  width: 32px; height: 32px;
  border-radius: 999px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease;
}
.faq-section__filter-clear:hover { background: var(--color-accent-primary); color: var(--color-brand-navy-900); }

/* Category pills — sit between the search bar and the FAQ groups. Clicking
 * a pill scopes results to that category; the search filter still applies. */
.faq-section__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(0, 45, 69, 0.08);
}
.faq-section__pill {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(0, 45, 69, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--color-brand-navy-900);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.faq-section__pill:hover {
  background: rgba(212, 175, 90, 0.08);
  border-color: var(--color-accent-primary);
}
/* JS sets `pill.hidden = true` for zero-match categories. The UA
 * `[hidden] { display: none }` is overridden by `.faq-section__pill
 * { display: inline-flex }` above (same specificity, but the class
 * comes later in source order), so we need a higher-specificity rule
 * that forces the hide. */
.faq-section__pill[hidden] { display: none !important; }
.faq-section__pill.is-active {
  background: var(--color-brand-navy-900);
  border-color: var(--color-brand-navy-900);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(0, 45, 69, 0.45);
}
.faq-section__pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(0, 45, 69, 0.08);
  color: var(--color-brand-navy-900);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.faq-section__pill.is-active .faq-section__pill-count {
  background: var(--color-accent-primary);
  color: var(--color-brand-navy-900);
}

/* Category groups. */
.faq-section__group + .faq-section__group { margin-top: clamp(2rem, 4vw, 3rem); }
.faq-section__group-heading {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-brand-navy-900);
  margin: 0 0 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.faq-section__group-count {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-accent-primary);
  background: rgba(211,171,92,0.10);
  border: 1px solid rgba(211,171,92,0.30);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  line-height: 1;
  text-transform: none;
}
.faq-section__empty {
  text-align: center;
  color: var(--color-text-muted);
  padding-block: 2rem;
}

/* Individual <details> row — card-like, with a gold gradient accent that
 * slides in on hover/open. */
.faq-item {
  position: relative;
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 200ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.faq-item::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--color-accent-primary), #b78a3f);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 280ms ease;
  pointer-events: none;
}
.faq-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-elev); border-color: rgba(211,171,92,0.45); }
.faq-item:hover::before, .faq-item[open]::before { transform: scaleY(1); }
.faq-item[open] { border-color: rgba(211,171,92,0.55); box-shadow: var(--shadow-elev); }

.faq-item__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-family: var(--font-display);
  color: var(--color-brand-navy-900);
}
.faq-item__summary::-webkit-details-marker { display: none; }
.faq-item__summary:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-card);
}

.faq-item__question {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

/* +/× icon — two pseudo-bars that swap rotation on [open]. */
.faq-item__icon {
  position: relative;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(0,45,69,0.06);
  flex-shrink: 0;
  transition: background 200ms ease, color 200ms ease, transform 280ms ease;
  color: var(--color-brand-navy-900);
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute; inset: 0;
  margin: auto;
  background: currentColor;
  border-radius: 1px;
  transition: transform 280ms cubic-bezier(.6,.05,.3,1.1);
}
.faq-item__icon::before { width: 12px; height: 2px; }
.faq-item__icon::after  { width: 2px; height: 12px; }
.faq-item:hover .faq-item__icon { background: var(--color-accent-primary); color: var(--color-brand-navy-900); }
.faq-item[open] .faq-item__icon { background: var(--color-accent-primary); color: var(--color-brand-navy-900); transform: rotate(180deg); }
.faq-item[open] .faq-item__icon::after { transform: scaleY(0); }

/* Smooth open/close — wrap the answer in a grid-rows container that
 * animates from 0fr → 1fr. The inner div needs min-height: 0 + overflow
 * hidden so it doesn't reserve space when collapsed. */
.faq-item__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms ease;
}
.faq-item[open] .faq-item__answer-wrap { grid-template-rows: 1fr; }
.faq-item__answer {
  min-height: 0;
  overflow: hidden;
  padding: 0 1.25rem 1.25rem 1.25rem;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.faq-item__answer p { margin: 0 0 0.75rem; }
.faq-item__answer p:last-child { margin-bottom: 0; }
.faq-item__answer a { color: var(--color-accent-primary); font-weight: 600; }
.faq-item__answer a:hover { text-decoration: underline; }
.faq-item__answer ul, .faq-item__answer ol { margin: 0.5rem 0 0.75rem 1.25rem; padding: 0; }
.faq-item__answer li { margin-bottom: 0.25rem; }

@media (max-width: 640px) {
  .faq-item__summary { grid-template-columns: 1fr auto; gap: 0.75rem; padding: 0.95rem 1rem; }
  .faq-item__answer { padding: 0 1rem 1rem 1rem; }
  .faq-item__question { font-size: 1rem; }
}

/* Respect users who don't want motion. */
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item::before, .faq-item__icon, .faq-item__icon::before, .faq-item__icon::after, .faq-item__answer-wrap {
    transition: none;
  }
}

/* ============== Content pages (node--page--content) =================== */
/* Used for "regular" pages with only a body field — about, legal, policy.
 * Branded hero header + readable typography container for the rich-text body. */
.node--page--content .node-page__hero {
  background: linear-gradient(231.75deg,
    var(--color-brand-navy-950) 45%,
    var(--color-brand-navy-800) 82%,
    var(--color-brand-navy-600) 102%);
  color: #FFFFFF;
  padding-block: 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.node--page--content .node-page__hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(211,171,92,0.07) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}
.node--page--content .node-page__eyebrow {
  position: relative;
  color: var(--color-accent-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.node--page--content .node-page__title {
  position: relative;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.75rem); /* ~32-44px — editorial register, near legacy 36px */
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 auto;
  max-width: 900px;
  line-height: 1.1;
}
.node--page--content .node-page__lede {
  position: relative;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.55;
  margin: 1rem auto 0;
  max-width: 56ch;
}

/* Body typography — based on the legacy suissebank.com editorial register
 * (Raleway 300 @ 18px, Zilla Slab 700 uppercase H2 in #1F384F) with the
 * line-height + reading column tuned for readability on older eyes:
 * 1.65 line-height (legacy used 1.4 which is too tight for 18px body),
 * 70ch max reading column, slightly looser paragraph spacing. */
.node--page--content .node-page__body {
  padding-block: clamp(3rem, 6vw, 5rem);
  color: #000000;
  font-family: var(--font-body);
  font-size: 1.125rem; /* 18px */
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.node--page--content .node-page__body > p,
.node--page--content .node-page__body > ul,
.node--page--content .node-page__body > ol,
.node--page--content .node-page__body > blockquote,
.node--page--content .node-page__body > h2,
.node--page--content .node-page__body > h3,
.node--page--content .node-page__body > h4 {
  max-width: 70ch;
}
.node--page--content .node-page__body h2 {
  font-family: var(--font-display);
  font-size: 2.0625rem; /* 33px — exact legacy match */
  font-weight: 700;
  letter-spacing: 0.005em;
  color: #1F384F;
  margin: 2.75rem 0 1.25rem;
  line-height: 1.1;
  position: relative;
  padding-bottom: 0.75rem;
}
.node--page--content .node-page__body h2::after {
  content: "";
  display: block;
  position: absolute;
  left: 0; bottom: 0;
  width: 64px;
  height: 3px;
  background: var(--color-accent-primary);
  border-radius: 2px;
}
.node--page--content .node-page__body h2:first-child { margin-top: 0; }
.node--page--content .node-page__body h3 {
  font-family: var(--font-display);
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-accent-primary);
  margin: 2.5rem 0 0.75rem;
  line-height: 1.2;
}
.node--page--content .node-page__body h3:first-child { margin-top: 0; }
.node--page--content .node-page__body h3 + table { margin-top: 0; }
.node--page--content .node-page__body h4 {
  font-family: var(--font-display);
  font-size: 1.25rem; /* 20px — sits between body 18px and h3 22px */
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1F384F;
  margin: 1.5rem 0 0.5rem;
}
.node--page--content .node-page__body p {
  margin: 0 0 1.4rem;
  font-weight: 400;
}
.node--page--content .node-page__body strong { font-weight: 700; color: #1F384F; }
.node--page--content .node-page__body p:last-child { margin-bottom: 0; }
.node--page--content .node-page__body ul,
.node--page--content .node-page__body ol {
  margin: 0 0 1.25rem 0;
  padding-left: 1.5rem;
}
.node--page--content .node-page__body ul { list-style: disc outside; }
.node--page--content .node-page__body ol { list-style: decimal outside; }
.node--page--content .node-page__body li { margin-bottom: 0.5rem; }
.node--page--content .node-page__body li::marker { color: var(--color-accent-primary); }
.node--page--content .node-page__body blockquote {
  border-left: 3px solid var(--color-accent-primary);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: var(--color-text-primary);
}
.node--page--content .node-page__body hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 2.5rem 0;
}
.node--page--content .node-page__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  margin: 1.5rem 0;
}

/* Site-wide link styling for rich-text fields and mailto/tel/external.
 * Targets links inside common rich-text containers so the brand color
 * applies wherever editors paste content (body, paragraph rich-text,
 * footer copy, etc.) without forcing a global a:not(.btn) rule. */
.node-page__body a,
.faq-item__answer a,
.feature-spotlight__body a,
.cta-band__body a,
.split-media__text a,
.field--type-text-long a,
.field--type-text-with-summary a,
a[href^="mailto:"],
a[href^="tel:"] {
  color: var(--color-accent-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}
.node-page__body a:hover,
.faq-item__answer a:hover,
.feature-spotlight__body a:hover,
.cta-band__body a:hover,
.split-media__text a:hover,
.field--type-text-long a:hover,
.field--type-text-with-summary a:hover,
a[href^="mailto:"]:hover,
a[href^="tel:"]:hover {
  border-bottom-color: var(--color-accent-primary);
  color: var(--color-brand-navy-900);
}

/* Don't let the link rule override styled buttons / CTAs / nav links. */
.btn[href^="mailto:"], .btn[href^="tel:"],
.site-header a[href^="mailto:"], .site-header a[href^="tel:"],
.site-footer a[href^="mailto:"], .site-footer a[href^="tel:"] {
  border-bottom: 0;
}

/* #18: verbiage / download links rendered as prominent buttons.
   A = href pattern (existing SB_Draft PDFs, no markup change needed);
   B = editor-applied `.button` class (CKEditor "Button link" style) so any
   future link can get the same treatment. Both resolve to this one style. */
.node-page__body a.button,
.node-page__body a[href*="SB_Draft"],
.field--type-text-long a.button,
.field--type-text-with-summary a.button,
.feature-spotlight__body a.button,
.split-media__text a.button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0;
  padding: 0.75rem 1.6rem;
  background: var(--color-accent-primary);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.9375rem;
  border: 1px solid var(--color-accent-primary);
  border-radius: var(--radius-pill);
  text-decoration: none;
  text-transform: none;
  box-shadow: 0 10px 24px -12px rgba(211,171,92,0.55);
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.node-page__body a.button:hover,
.node-page__body a[href*="SB_Draft"]:hover,
.node-page__body a[href*="onboarding.suissebank.com"]:hover,
.field--type-text-long a.button:hover,
.field--type-text-with-summary a.button:hover,
.feature-spotlight__body a.button:hover,
.split-media__text a.button:hover {
  background: var(--color-accent-primary-hover);
  border-color: var(--color-accent-primary-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .node--page--content .node-page__body { padding-inline: 1.25rem; }
}

/* ============== Global form inputs ==================================== */
/* Theme-wide baseline so every form (webform, contact, comment, user account,
 * etc.) inherits the brand. Specific contexts (search popup, FAQ filter)
 * override these where needed. Excludes admin (gin handles its own UI). */

/* Reset native button/input chrome. */
.form-text,
.form-email,
.form-tel,
.form-url,
.form-password,
.form-search,
.form-number,
.form-date,
.form-time,
.form-datetime,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  appearance: none;
  -webkit-appearance: none;
}

textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.6;
}

/* Native chevron for selects. */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23344F5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Focus state — gold ring + brand border. */
.form-text:focus,
.form-email:focus,
.form-tel:focus,
.form-url:focus,
.form-password:focus,
.form-search:focus,
.form-number:focus,
.form-textarea:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(211, 171, 92, 0.20);
  background: var(--color-surface-page);
}

/* Disabled state. */
input:disabled, textarea:disabled, select:disabled {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Validation error state (Drupal adds .error). */
input.error, textarea.error, select.error,
.form-item--error-message ~ input,
.form-item--error-message ~ textarea,
.form-item--error-message ~ select {
  border-color: #c53030;
}
.form-item--error-message,
.form-item-error-message {
  color: #c53030;
  font-size: 0.8125rem;
  margin-top: 0.4rem;
}

/* Labels. */
.form-item label,
fieldset > legend .fieldset-legend {
  display: inline-block;
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  margin-bottom: 0.4rem;
}
.form-item label.option {
  font-weight: 500;
  margin-bottom: 0;
  margin-left: 0.4rem;
  cursor: pointer;
}
label.form-required::after,
label.js-form-required::after {
  content: " *";
  color: var(--color-accent-primary);
  font-weight: 700;
}

/* Form item spacing. */
.form-item,
.form-wrapper,
fieldset.form-composite,
fieldset.fieldgroup {
  margin: 0 0 1.25rem;
}
.form-item .description,
.form-item .form-item__description {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  margin-top: 0.4rem;
}

/* Fieldset (used by radios/checkboxes groups). */
fieldset.form-composite,
fieldset.fieldgroup {
  border: 0;
  padding: 0;
}
fieldset.form-composite > legend,
fieldset.fieldgroup > legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
}

/* Radios + checkboxes — custom-styled, brand color. */
input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0 0.4rem 0 0;
  vertical-align: -3px;
  background: var(--color-surface-page);
  border: 1.5px solid var(--color-border);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"] { border-radius: 4px; }
input[type="radio"]:hover,
input[type="checkbox"]:hover { border-color: var(--color-accent-primary); }
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(211,171,92,0.25);
}
input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}
input[type="radio"]:checked {
  background-image: radial-gradient(circle, var(--color-brand-navy-900) 35%, transparent 40%);
}
input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002D45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

/* Side-by-side radios (webform options-display=side_by_side). */
.webform-options-display-side-by-side .form-item {
  display: inline-flex;
  align-items: center;
  margin-right: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Submit / action buttons — inherit the .btn brand styling. */
.form-actions { margin-top: 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.form-actions .button,
.form-actions .form-submit,
.form-submit,
button.form-submit,
input.form-submit,
input[type="submit"]:not(.search-popup__submit),
button[type="submit"]:not(.search-popup__submit) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--color-accent-primary);
  border-radius: 999px;
  background: var(--color-accent-primary);
  color: var(--color-brand-navy-900);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}
.form-submit:hover,
button.form-submit:hover,
input.form-submit:hover,
input[type="submit"]:not(.search-popup__submit):hover,
button[type="submit"]:not(.search-popup__submit):hover {
  background: var(--color-brand-navy-900);
  color: #FFFFFF;
  border-color: var(--color-brand-navy-900);
}
.form-submit:active,
button.form-submit:active,
input.form-submit:active { transform: translateY(1px); }

/* Secondary / button--danger conventions if they show up. */
.button--danger, .form-submit.button--danger {
  background: transparent;
  color: #c53030;
  border-color: rgba(197, 48, 48, 0.4);
}
.button--danger:hover { background: #c53030; color: #fff; border-color: #c53030; }

/* ============== Webform layout when on a shell page =================== */
/* Center the webform under a max-width and give it breathing room.
 * Also applies on node-page bodies (e.g. /become-agent) where the form is
 * embedded below editorial content via field_webform. */
body.is-shell-page .webform-submission-form,
.node-page__body .webform-submission-form {
  max-width: 720px;
  margin: 0 auto;
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 30px 60px -40px rgba(0,45,69,0.20);
}
/* Node-page variant needs top spacing — the form sits directly under
 * paragraph body copy with no other gutter. */
.node-page__body .webform-submission-form {
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
body.is-shell-page .webform-submission-form .form-actions,
.node-page__body .webform-submission-form .form-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

/* Captcha wrapper — small visual reset so it sits with the rest of the
 * fields rather than as a giant blue admin-style fieldset. */
body.is-shell-page .captcha,
.node-page__body .captcha {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
}
body.is-shell-page .captcha legend,
.node-page__body .captcha legend { display: none; }
body.is-shell-page .captcha .form-item-captcha-response,
.node-page__body .captcha .form-item-captcha-response {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  margin: 0;
}
body.is-shell-page .captcha label,
.node-page__body .captcha label { margin-bottom: 0; }

/* ============== Back-to-top button =================================== */
.back-to-top {
  position: fixed;
  /* Stack directly above the LiveChat launcher on the right edge. LiveChat
   * sits at right:20px / bottom:20px with a ~60px button, so we anchor to
   * the same right edge and lift the back-to-top button just above it. */
  bottom: 90px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 0;
  background: var(--color-brand-navy-900);
  color: var(--color-accent-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease, background 200ms ease, color 200ms ease;
  box-shadow: 0 18px 40px -16px rgba(0,45,69,0.45), 0 0 0 1px rgba(211,171,92,0.25);
}
.back-to-top--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--color-accent-primary);
  color: var(--color-brand-navy-900);
  transform: translateY(-2px);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--color-accent-primary);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top, .back-to-top--visible { transition: none; transform: none; }
}

/* ============== Info list (definition pairs) ========================= */
/* Used on /profile and similar fact-table pages. Two-column grid on desktop,
 * stacked on mobile, with subtle dividers. */
.info-list {
  display: grid;
  gap: 0;
  margin: 0 0 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  max-width: 920px;
  background: var(--color-surface-page);
}
.info-list__row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--color-border);
}
.info-list__row:first-child { border-top: 0; }
.info-list__row:nth-child(odd) { background: rgba(0,45,69,0.02); }
.info-list dt {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.info-list dd {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  line-height: 1.55;
}
@media (max-width: 640px) {
  .info-list__row { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.875rem 1rem; }
}

/* ============== Entity grid (group companies) ======================== */
/* Used on /suisse-bank-group: 2x2 grid of company cards. */
.entity-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin: 0 0 2rem;
}
@media (min-width: 760px) { .entity-grid { grid-template-columns: repeat(2, 1fr); } }

.entity-card {
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.entity-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--color-accent-primary), #b78a3f);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 280ms ease;
}
.entity-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev);
  border-color: rgba(211,171,92,0.45);
}
.entity-card:hover::before { transform: scaleY(1); }
.entity-card__name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-brand-navy-900);
  margin: 0;
  letter-spacing: -0.005em;
}
.entity-card__role {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-primary);
  font-weight: 700;
  margin: 0;
}
.entity-card__address {
  font-style: normal;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin-top: 0.25rem;
}
.entity-card__contact {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.4rem;
  font-size: 0.875rem;
  border-top: 1px solid var(--color-border);
  padding-top: 0.875rem;
}
.entity-card__contact li {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.entity-card__contact li > span {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}
.entity-card__contact a { font-weight: 600; }

/* ============== Callout (in-body CTA banner) ========================= */
/* Centered, cinematic, full-width-ish CTA. Ambient gradient + glow halo +
 * dot grid backdrop. Big slab-serif title (uppercase), generous body, gold
 * pill button with hover shimmer. Smashing register for the "Become a
 * client" library item used across content pages. */
.callout {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  /* border-radius: var(--radius-card); */
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  /* margin: clamp(2.5rem, 5vw, 4rem) 0; */
  display: grid;
  gap: 1.25rem;
  text-align: center;
  justify-items: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.callout--gradient {
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(211,171,92,0.30), transparent 60%),
    radial-gradient(700px 400px at 0% 100%, rgba(5,101,177,0.30), transparent 60%),
    linear-gradient(231.75deg, var(--color-brand-navy-950) 35%, var(--color-brand-navy-800) 75%, var(--color-brand-navy-600) 105%);
  color: #FFFFFF;
  border: 0;
}
/* Dot-grid texture. */
.callout--gradient::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
}
/* Soft gold halo behind the title, drawing the eye to the CTA. */
.callout--gradient::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 60%; height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(211,171,92,0.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
/* Make sure direct children sit above both pseudo-elements. */
.callout > * { position: relative; z-index: 1; }

.callout h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem); /* desktop — original size */
  font-weight: 700;
  text-transform: none; /* natural case, not ALL-CAPS (doc #2) */
  letter-spacing: 0.005em;
  line-height: 1.1;
  margin: 0;
  color: inherit;
}
@media (max-width: 640px) {
  /* doc #2: smaller on mobile so it sits on one line */
  .callout h3 { font-size: clamp(2rem, 5vw, 3.5rem); }
  
}
.callout--gradient h3 { color: #FFFFFF; }
.callout__body,
.callout p {
  margin: 0;
  color: inherit;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem); /* 17px → 20px */
  font-weight: 400;
  line-height: 1.55;
  opacity: 0.92;
  max-width: 56ch;
}
.callout p {
  margin: 0 auto 1.5rem;
}
.callout p:last-child { margin: 0; }
.callout .btn {
  margin-top: 0.75rem;
  width: fit-content;
}
/* Override the generic .btn-primary sizing to make the callout button big. */
.callout .btn,
.callout .btn-primary {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1rem 2.25rem;
  border-radius: 999px;
  background: var(--color-accent-primary);
  color: #FFFFFF;
  border: 1px solid var(--color-accent-primary);
  box-shadow: 0 12px 28px -10px rgba(211,171,92,0.55);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms ease, background 200ms ease, color 200ms ease;
}
.callout .btn:hover,
.callout .btn-primary:hover {
  background: #FFFFFF;
  color: var(--color-brand-navy-900);
  border-color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -12px rgba(255,255,255,0.45);
}
.callout--gradient .btn:focus-visible,
.callout--gradient .btn-primary:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 3px;
}

/* Body tables — futuristic editorial register. Used for CKEditor tables
 * (e.g. Profile facts). Each row gets a gold accent rule on hover, label
 * column is uppercase muted gold-ish, value column is readable navy text.
 * Container reads as a single elevated card. */
.node-page__body table,
.info-table {
  width: 100%;
  margin: 0 0 2rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-page);
  box-shadow: 0 20px 50px -30px rgba(0,45,69,0.20);
  position: relative;
}
/* Subtle gold rule along the very top of the table — feels editorial. */
.node-page__body table::before,
.info-table::before {
  display: none; /* applied via the first row instead — keeps rounded corners. */
}
/* Row dividers — hairline navy, slightly stronger than before. */
.node-page__body table tbody tr + tr th,
.node-page__body table tbody tr + tr td,
.info-table tbody tr + tr th,
.info-table tbody tr + tr td { border-top: 1px solid rgba(0,45,69,0.08); }

.node-page__body table td, .node-page__body table th,
.info-table td, .info-table th {
  padding: 1.15rem 1.5rem;
  font-size: 1rem; /* 16px — bigger for readability */
  vertical-align: top;
  text-align: start;
  line-height: 1.6;
  color: var(--color-brand-navy-900);
  transition: background 180ms ease;
}
/* Row hover — gentle navy tint that draws the eye. */
.node-page__body table tbody tr:hover th,
.node-page__body table tbody tr:hover td,
.info-table tbody tr:hover th,
.info-table tbody tr:hover td {
  background: rgba(0,45,69,0.04);
}
/* Subtle zebra — alternate rows tinted a hair so the eye tracks. */
.node-page__body table tbody tr:nth-child(odd),
.info-table tbody tr:nth-child(odd) { background: rgba(0,45,69,0.018); }

/* Trade Finance Fees page (node 50): row labels are long tier descriptions,
 * so balance the column split 50/50 at desktop. */
@media (min-width: 641px) {
  .node--page--50 .node-page__body table tbody td:first-child,
  .node--page--50 .node-page__body table th[scope="row"] { width: 50%; }
}

/* Label column — natural case, body register, dark navy regular weight. */
.node-page__body table th[scope="row"],
.node-page__body table thead th,
.info-table th[scope="row"],
.info-table thead th {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-brand-navy-900);
  width: 32%;
  padding-top: 1.4rem;
  position: relative;
}
/* (Removed: gold left-edge bar on the label column.) */

/* Legacy fallback for editor tables without <th scope="row">: style the
 * first-column <td> as the label. */
.node-page__body table tbody td:first-child,
.info-table tbody td:first-child {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-brand-navy-900);
  width: 32%;
  padding-top: 1.15rem;
  position: relative;
}
/* If a row already has <th scope="row">, the first <td> is a VALUE cell —
 * reset it to body register. */
.node-page__body table tbody tr th[scope="row"] ~ td:first-child,
.info-table tbody tr th[scope="row"] ~ td:first-child {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-brand-navy-900);
  width: auto;
  padding-top: 1.15rem;
}
.node-page__body table tbody tr th[scope="row"] ~ td:first-child::before,
.info-table tbody tr th[scope="row"] ~ td:first-child::before { display: none; }

/* Value cells — bigger, more readable, slightly stronger weight than body p. */
.node-page__body table tbody td:not(:first-child),
.info-table tbody td:not(:first-child) {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-brand-navy-900);
  line-height: 1.6;
}
.node-page__body table tbody td br + br,
.info-table tbody td br + br { display: none; }
.node-page__body table tbody td strong,
.info-table tbody td strong { color: var(--color-brand-navy-900); font-weight: 700; }

@media (max-width: 640px) {
  /* Mobile: each row is a stacked label/value card-section. Selectors mirror
   * the desktop ones so the cascade resolves cleanly by source order — no
   * !important needed. Card chrome (border/radius/shadow) on the wrapper is
   * inherited from the base rules. Hover is explicitly disabled on small
   * screens (it looked harsh on touch). */

  .node-page__body table, .info-table {
    display: block;
    width: 100%;
  }
  .node-page__body table thead, .info-table thead { display: none; }
  .node-page__body table tbody, .info-table tbody,
  .node-page__body table tr, .info-table tr { display: block; width: 100%; }

  /* Row = card-section. */
  .node-page__body table tbody tr, .info-table tbody tr {
    padding: 1rem 1.15rem;
    border-top: 1px solid rgba(0,45,69,0.08);
    background: transparent;
  }
  .node-page__body table tbody tr:first-child, .info-table tbody tr:first-child { border-top: 0; }

  /* Disable desktop hover — ugly on touch. */
  .node-page__body table tbody tr:hover th,
  .node-page__body table tbody tr:hover td,
  .info-table tbody tr:hover th,
  .info-table tbody tr:hover td { background: transparent; }

  /* Cells: block-stack, no individual padding (row supplies the breathing room). */
  .node-page__body table td, .node-page__body table th,
  .info-table td, .info-table th {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: start;
  }

  /* LABEL (modern <th scope="row">) — gold uppercase mini-caps, brand polish.
   * Selector matches the desktop label rule (.node-page__body table th[scope="row"],
   * .node-page__body table thead th) so cascade order resolves mobile last -> wins. */
  .node-page__body table th[scope="row"],
  .node-page__body table thead th,
  .info-table th[scope="row"],
  .info-table thead th {
    width: 100%;
    padding: 0 0 0.4rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-primary, rgba(212,175,90,0.95));
  }

  /* LABEL (legacy first-td-as-label). Mirrors desktop selector for cascade. */
  .node-page__body table tbody td:first-child,
  .info-table tbody td:first-child {
    width: 100%;
    padding: 0 0 0.4rem;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-primary, rgba(212,175,90,0.95));
  }

  /* When a real <th scope="row"> exists, the first <td> is actually a VALUE
   * cell — reset it back to value styling (mirrors desktop selector). */
  .node-page__body table tbody tr th[scope="row"] ~ td:first-child,
  .info-table tbody tr th[scope="row"] ~ td:first-child {
    width: 100%;
    padding: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-brand-navy-900);
    line-height: 1.55;
  }

  /* VALUE (when first-td-as-label not used). */
  .node-page__body table tbody td:not(:first-child),
  .info-table tbody td:not(:first-child) {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-brand-navy-900);
    line-height: 1.55;
    padding: 0;
  }

  /* Long-content value cells (paragraphs + lists, e.g. Profile "Objects"). */
  .node-page__body table tbody td p,
  .info-table tbody td p { margin: 0.55rem 0; }
  .node-page__body table tbody td p:first-child,
  .info-table tbody td p:first-child { margin-top: 0; }
  .node-page__body table tbody td p:last-child,
  .info-table tbody td p:last-child { margin-bottom: 0; }
  .node-page__body table tbody td ul,
  .info-table tbody td ul { margin: 0.55rem 0; padding-inline-start: 1.1rem; }
  .node-page__body table tbody td ul li,
  .info-table tbody td ul li { margin: 0.3rem 0; }

  /* Suppress any residual ::before accents from desktop label rules. */
  .node-page__body table th[scope="row"]::before,
  .info-table th[scope="row"]::before,
  .node-page__body table tbody td:first-child::before,
  .info-table tbody td:first-child::before { display: none; }
}

/* Post-CTA wrapper — centers the library callout under the body container,
 * matches landing layout when on a paragraph-stack page. */
/* .node-page__post-cta {
  margin-block: 1.5rem clamp(2rem, 5vw, 3.5rem);
} */
/* .node--page--landing .node-page__post-cta {
  margin-block: 0 clamp(2rem, 5vw, 3.5rem);
} */

/* ============== Group grid + entity (Suisse Bank Group) =============== */
/* Two-column grid of group entities. Each card: logo + name + address +
 * phone + email/website pill buttons. Futuristic touches — glass surface,
 * animated gold rule, subtle dot grid backdrop on the section. */
.group-grid {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--color-surface-page);
  overflow: hidden;
}
.group-grid::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,45,69,0.04) 1px, transparent 0);
  background-size: 26px 26px;
  pointer-events: none;
}
.group-grid__header {
  position: relative;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.group-grid__heading {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.005em;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  color: var(--color-brand-navy-900);
  margin: 0;
  line-height: 1.1;
}
.group-grid__items {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .group-grid__items { grid-template-columns: repeat(2, 1fr); } }

.group-entity {
  position: relative;
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
/* Animated gold gradient rule on the left edge, drawn in on hover. */
.group-entity::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--color-accent-primary), #b78a3f);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 320ms ease;
}
.group-entity:hover::before { transform: scaleY(1); }
.group-entity:hover {
  transform: translateY(-3px);
  border-color: rgba(211,171,92,0.45);
  box-shadow: 0 30px 60px -30px rgba(0,45,69,0.25);
}
.group-entity__inner {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 0.85rem;
  align-content: start;
}

.group-entity__logo {
  margin-bottom: 0.5rem;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
}
.group-entity__logo img {
  max-height: 60px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.group-entity__name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--color-brand-navy-900);
  margin: 0;
  line-height: 1.15;
}

.group-entity__address,
.group-entity__address p {
  color: var(--color-text-secondary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  margin: 0;
  white-space: pre-line; /* preserve newlines from textarea */
}

.group-entity__phone {
  color: var(--color-text-primary);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.group-entity__phone-icon {
  color: var(--color-accent-primary);
  flex-shrink: 0;
}
.group-entity__phone a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.group-entity__phone a:hover {
  color: var(--color-accent-primary);
  border-bottom-color: var(--color-accent-primary);
}

/* Email + website buttons — navy-filled pills, uppercase, inline. Sit
 * side-by-side and wrap to next line if needed; each button hugs its own
 * content (not stretched across the card). */
.group-entity__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
/* Higher-specificity selector so the global a[href^="mailto:"] / [tel:]
 * gold-link rule (used for inline rich-text email/phone links) doesn't
 * override the white-on-navy button styling here. */
a.group-entity__btn,
a.group-entity__btn[href^="mailto:"],
a.group-entity__btn[href^="tel:"],
.group-entity__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-navy-900);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid var(--color-brand-navy-900);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  width: auto;
}
a.group-entity__btn:hover,
a.group-entity__btn:focus-visible,
.group-entity__btn:hover,
.group-entity__btn:focus-visible {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
  color: #FFFFFF;
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(211,171,92,0.55);
}

/* ============== Site-wide body typography normalization ============== */
/* Editorial readability across every paragraph and component — base p tag
 * normalizes to 17px Raleway 400. Specific contexts (info pages, cards,
 * buttons) keep their own overrides where stated. Anything that hasn't set
 * an explicit font on <p> gets this register. */
p {
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px */
  font-weight: 400;
  line-height: 1.55;
}
.paragraph p:not(.callout p):not(.hero p):not(.cta-band p):not(.feature-spotlight p) {
  font-size: 1.0625rem;
  font-weight: 400;
}

/* ============== Management team cards (view: management_team) ========== */
/* Cards grid — 1 col on mobile, 2 col on tablet, 3 col on desktop.
 * Each card: square-ish photo on top, name + designation + bio below.
 * Gold accent rule + lift on hover. The cards live inside a Drupal Views
 * output (.views-element-container > .js-view-dom-id-X > .views-row), so
 * the grid lives on .view-reference__body and the rows are direct children
 * via display: contents on the intermediate wrappers. */
/* Horizontal management cards — photo on the left, name + designation +
 * bio on the right. Single column stack down the page (one card per row);
 * cards stack vertically on mobile. */
.view-reference__body {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
  width: 100%;
}
/* Flatten Drupal Views' wrapper divs so each .management-card sits as a
 * direct grid item. (Same trick used on .news-teaser__grid.) */
.view-reference__body > div,
.view-reference__body > div > div,
.view-reference__body > div > div > div { display: contents; }

.management-card {
  position: relative;
  background: var(--color-surface-page);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
@media (min-width: 720px) {
  .management-card { grid-template-columns: 260px 1fr; }
}
.management-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--color-accent-primary), #b78a3f);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 320ms ease;
  z-index: 1;
}
.management-card:hover::before { transform: scaleY(1); }
.management-card:hover {
  transform: translateY(-2px);
  border-color: rgba(211,171,92,0.45);
  box-shadow: 0 28px 60px -28px rgba(0,45,69,0.25);
}

.management-card__photo {
  aspect-ratio: 4 / 5;
  background: var(--color-brand-navy-950);
  overflow: hidden;
}
.management-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder with first-letter monogram when no photo is uploaded. */
.management-card__photo--placeholder {
  display: grid; place-items: center;
  color: var(--color-accent-primary);
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(211,171,92,0.18), transparent 60%),
    linear-gradient(180deg, var(--color-brand-navy-950) 0%, var(--color-brand-navy-800) 100%);
}

.management-card__body {
  padding: 1.5rem 1.75rem;
  display: grid;
  gap: 0;
  align-content: start;
}
.management-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.005em;
  color: var(--color-brand-navy-900);
  margin: 0 0 0.5rem;
  line-height: 1.1;
}
.management-card__designation {
  color: var(--color-accent-primary);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  margin: 0 0 0.85rem;
}
.management-card__bio,
.management-card__bio p {
  margin: 0.5rem 0 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
}

/* view-reference header (heading + intro above the embedded view) */
.view-reference__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.view-reference__heading {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  color: var(--color-brand-navy-900);
  margin: 0 0 0.5rem;
  line-height: 1.1;
}
.view-reference__intro {
  max-width: 56ch;
  margin: 0 auto;
  color: var(--color-text-muted);
}

/* Management card "View profile" link + the full-page profile layout. */
.management-card__name a {
  color: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}
.management-card__name a:hover { color: var(--color-accent-primary); }
.management-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1.25rem;
  justify-self: start;
  width: fit-content;
  color: var(--color-accent-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
  align-self: start;
}
.management-card__link:hover,
.management-card__link:focus-visible {
  color: var(--color-brand-navy-900);
  border-bottom-color: var(--color-accent-primary);
  outline: none;
  transform: translateX(2px);
}

/* Full-page management profile (node--management). Navy hero + content
 * column with floated/inline photo on desktop. */
.management-profile__hero {
  background: linear-gradient(231.75deg,
    var(--color-brand-navy-950) 35%,
    var(--color-brand-navy-800) 75%,
    var(--color-brand-navy-600) 105%);
  color: #FFFFFF;
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.management-profile__hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(211,171,92,0.07) 1px, transparent 0);
  background-size: 24px 24px;
  pointer-events: none;
}
.management-profile__eyebrow {
  position: relative;
  color: var(--color-accent-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.management-profile__name {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: #FFFFFF;
  margin: 0;
  max-width: 900px;
  margin-inline: auto;
}
.management-profile__designation {
  position: relative;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0.85rem 0 0;
}

.management-profile__main {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 880px) {
  .management-profile__main { grid-template-columns: minmax(0, 320px) 1fr; }
  /* Sticky photo only in the 2-column desktop layout. On mobile the photo
     stacks above the bio and must scroll normally (was overlapping). */
  .management-profile__photo { position: sticky; top: 100px; }
}
.management-profile__photo {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,45,69,0.30);
  aspect-ratio: 4 / 5;
  background: var(--color-brand-navy-950);
  align-self: start;
}
.management-profile__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.management-profile__body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-brand-navy-900);
}
.management-profile__body p { margin: 0 0 1.25rem; font-size: 1.0625rem; }
.management-profile__body p:last-child { margin-bottom: 0; }
.management-profile__back { margin-top: 2.5rem; }
.management-profile__back a {
  color: var(--color-accent-primary);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.management-profile__back a:hover {
  border-bottom-color: var(--color-accent-primary);
}

/* ============== Body text weight normalization ====================== */
/* No light weight (300) anywhere — defensive baseline at 400 (normal) for
 * body / prose containers so nothing inherits a lighter weight. The user's
 * style guide: body text is "normal" weight everywhere. Uppercase
 * treatment on display headings is preserved (was a misread on my side). */
.management-card__bio,
.management-card__bio p,
.management-card__designation,
.management-profile__body,
.management-profile__body p,
.management-profile__designation,
.news-article__body,
.news-article__body p,
.node-page__body,
.node-page__body p {
  font-weight: 400;
}

/* ============================================================
 * Homepage hero — futuristic banking-infrastructure overlay
 * Scoped to body.is-front (set by suisse_theme_preprocess_html)
 * so other landing heroes (image_right variant) stay calm.
 * ============================================================ */

/* C. Stat tiles — the subtitle's first <ul> renders as a glassmorphic
 * row of 3 stat chips with a glowing gold rim, "+" highlighted in gold. */
.is-front .hero__subtitle ul {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.is-front .hero__subtitle ul li {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.1;
  color: #fff;
  padding: 0.85rem 1.25rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(212,175,90,0.30);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.6),
              inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.is-front .hero__subtitle ul li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    var(--color-accent-primary) 30%,
    var(--color-accent-primary) 70%,
    transparent);
  filter: drop-shadow(0 0 4px rgba(212,175,90,0.55));
}
.is-front .hero__subtitle ul li::after {
  /* Soft inner gold glow that hugs the bottom — depth + product-card feel. */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 70%;
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(212,175,90,0.20), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
/* Compact margin between stats and the body sentence below. */
.is-front .hero__subtitle ul + p:empty { display: none; }
.is-front .hero__subtitle > p {
  margin-top: 1rem;
}

/* D. Heading impact. Floor raised so longer-text languages (DE, RU, etc.)
   don't drop the headline well below the EN size at typical desktop widths.
   At >=900px viewport the heading sits between 3.5rem and 4.5rem; mobile
   block below keeps the smaller cap. */
.is-front .hero__heading {
  font-size: clamp(3.5rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.04;
  margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
  /* #8: hero heading was sitting at the 2.5rem floor (~40px) on phones —
     a touch big. Bring it down 1-2 steps. */
  .is-front .hero__heading { font-size: clamp(1.75rem, 7vw, 2.125rem); }
}
.is-front .hero__heading::after {
  content: "";
  display: block;
  width: 90px;
  height: 3px;
  margin-top: 1.1rem;
  background: linear-gradient(90deg, var(--color-accent-primary), transparent);
  border-radius: 3px;
  filter: drop-shadow(0 0 8px rgba(212,175,90,0.45));
}

/* E. World-map dot constellation — two offset radial grids. */
.is-front .hero::before {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(212,175,90,0.12) 1px, transparent 0),
    radial-gradient(circle at 1px 1px, rgba(120,180,255,0.06) 1px, transparent 0);
  background-size: 22px 22px, 38px 38px;
  background-position: 0 0, 11px 19px;
}

/* G. Card halo + rotating orbit ring around the right-side image. */
.is-front .hero__media {
  position: relative;
  isolation: isolate;
}
.is-front .hero__media::before {
  content: "";
  position: absolute;
  inset: -8% -4%;
  background: radial-gradient(45% 55% at 50% 55%,
    rgba(212,175,90,0.28),
    rgba(212,175,90,0.10) 45%,
    transparent 70%);
  z-index: -1;
  filter: blur(20px);
  animation: hero-halo 7s ease-in-out infinite alternate;
}
@keyframes hero-halo {
  to { transform: scale(1.04); opacity: 0.85; }
}
.is-front .hero__media::after {
  content: "";
  position: absolute;
  inset: 10%;
  background: conic-gradient(from 0deg,
    transparent 0deg, transparent 200deg,
    rgba(212,175,90,0.55) 235deg,
    rgba(212,175,90,0) 260deg);
  border-radius: 50%;
  mask: radial-gradient(circle, transparent 64%, #000 65%, #000 67%, transparent 68%);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 67%, transparent 68%);
  pointer-events: none;
  animation: hero-orbit 18s linear infinite;
}
@keyframes hero-orbit {
  to { transform: rotate(360deg); }
}

/* H. Currency / coin ticker — full-width strip flush to hero's bottom edge.
 * Replaces the earlier diagonal light-sweep on .hero::after (removed —
 * halo + orbit + dot grid carry enough motion on their own). */
.is-front .hero { padding-bottom: 3.25rem; }
.is-front .hero::after {
  content: "USD  ·  EUR  ·  GBP  ·  CHF  ·  AED  ·  JPY  ·  CAD  ·  AUD  ·  SGD  ·  BTC  ·  ETH  ·  USDC  ·  USDT  ·  ADA  ·  SOL  ·  MATIC  ·  XRP  ·  USD  ·  EUR  ·  GBP  ·  CHF  ·  AED  ·  JPY  ·  CAD  ·  AUD  ·  SGD  ·  BTC  ·  ETH  ·  USDC  ·  USDT  ·  ADA  ·  SOL  ·  MATIC  ·  XRP";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
  padding: 0.75rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
  animation: hero-ticker 45s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes hero-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Image-right inside the standard container: left column aligns with the
 * logo, right column aligns with the header CTAs (same .container max-width
 * + gutter math as the rest of the site). The standard .hero--image-right
 * .container rule from above already sets max-width / margin-inline auto /
 * padding-inline / 50-50 grid — no override needed here. */
.is-front .hero--image-right .hero__media img { border-radius: 18px; }

/* J. Reduced-motion respect. */
@media (prefers-reduced-motion: reduce) {
  .is-front .hero::after,
  .is-front .hero__media::before,
  .is-front .hero__media::after { animation: none; }
}

/* ===== Header language switcher =====================================
 * <details>-based dropdown placed in the utility region next to the
 * Become Client / Become Agent CTAs. Flag emoji + ISO code as the
 * trigger; native names listed in the menu.
 * ================================================================== */
/* Switcher sits in its own header slot between the search icon and the
 * utility CTAs. */
.site-header__lang {
  display: flex;
  align-items: center;
}

.lang-switcher {
  position: relative;
}
.lang-switcher[open] > summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
}
.lang-switcher__current {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(0, 45, 69, 0.18);
  border-radius: 999px;
  color: var(--color-brand-navy-900);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: #fff;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.lang-switcher__current::-webkit-details-marker { display: none; }
.lang-switcher__current:hover,
.lang-switcher[open] .lang-switcher__current {
  background: rgba(212, 175, 90, 0.08);
  border-color: var(--color-accent-primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 90, 0.12);
}
.lang-switcher__flag {
  font-size: 1.05rem;
  line-height: 1;
  /* Emoji flags render via the OS color font; keep them crisp. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.lang-switcher__code { font-variant-numeric: lining-nums; }
.lang-switcher__chevron {
  transition: transform 180ms ease;
  opacity: 0.75;
}
.lang-switcher[open] .lang-switcher__chevron { transform: rotate(180deg); }

.lang-switcher__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 2;
  min-width: 200px;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: #0e1a2c;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(212, 175, 90, 0.18);
  animation: lang-pop 160ms ease-out;
}
@keyframes lang-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lang-switcher__menu li { margin: 0; }
.lang-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 140ms ease, color 140ms ease;
}
.lang-switcher__option:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.lang-switcher__option.is-active {
  color: var(--color-accent-primary);
  background: rgba(212, 175, 90, 0.08);
}
.lang-switcher__option .lang-switcher__name { flex: 1; }
.lang-switcher__code--small {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  opacity: 0.55;
  font-weight: 700;
}

/* Header layout: keep the switcher and utility CTAs aligned vertically. */
.site-header__utility { gap: 0.5rem; }
.site-header .lang-switcher { align-self: center; }

@media (max-width: 768px) {
  /* Right-anchor on mobile so the dropdown opens leftward and its right
     column isn't clipped off the viewport edge (trigger sits near the right). */
  .lang-switcher__menu { right: 0; left: auto; max-width: calc(100vw - 1.5rem); }
}