/* ==========================================================================
   Trusted Union — homepage
   Light WIP / Ferry-Arch foundation (~72%) with dark corporate authority
   sections (~28%), per the Clarified Developer / Designer Handoff.
   ========================================================================== */

:root {
  /* Light foundation — warm off-white + stone (Action Brief #05:
     move the cool white-grey towards a restrained warm off-white / stone). */
  --paper:      #F2EEE7;   /* hero, intro, advisory, body */
  --paper-lift: #F7F3EC;
  --white:      #FBF8F3;   /* warm white — proof card */
  --panel-warm: #EFE7DA;   /* Why section — warm cream band */
  --stone:      #E9E0CF;   /* proof, glance */
  --stone-deep: #DED0B8;

  /* Navy family — deepened towards midnight navy so the large dark sections
     relate to the Business Protection pillar (Action Brief, p.2). Not pure
     black: the brief forbids pure-black sections. */
  --navy-900:   #0E1526;   /* footer / CTA base */
  --navy-800:   #131C31;
  --navy-700:   #17213A;   /* process */
  --navy:       #1D2949;   /* pillars, skyline — midnight, near BP #1C2745 */
  --navy-400:   #4A587E;

  /* Pillar tones */
  --pillar-eb:  #DBE2EA;   /* muted blue-grey */
  --pillar-bp:  #1C2745;   /* deep navy — most authoritative */
  --pillar-pc:  #EAE3D7;   /* warm stone / champagne-grey */

  /* Accent — used only in fine details.
     --bronze is the decorative tone (rules, bullets, borders, buttons on dark).
     --bronze-deep is the text-safe tone: the decorative bronze only reaches
     3.3:1 on the light page, which fails at the 11px label sizes we use it at. */
  --bronze:      #A87B4C;
  --bronze-deep: #7E5530;
  --bronze-lit:  #C2925F;
  --champagne:   #DCC6A6;
  --camel:       #E7D8BE;   /* light warm sand accent (dark text) */

  /* Ink on light */
  --ink:        #16203A;
  --ink-2:      #3E4964;
  --ink-3:      #6C7590;

  /* Ink on dark */
  --cream:      #F1EEE8;
  --cream-2:    rgba(241, 238, 232, 0.72);
  --cream-3:    rgba(241, 238, 232, 0.62);

  --rule:       rgba(22, 32, 58, 0.13);
  --rule-strong:rgba(22, 32, 58, 0.24);
  --rule-dark:  rgba(220, 198, 166, 0.20);

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gutter: 32px;
  --maxw:   1312px;
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 1200px) { :root { --gutter: 64px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
svg { display: block; flex-shrink: 0; }

::selection { background: var(--navy); color: var(--cream); }

:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--cream);
  padding: 0.75rem 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 88px; }
@media (min-width: 900px) { .section { padding-block: 128px; } }

.section--tight { padding-block: 72px; }
@media (min-width: 900px) { .section--tight { padding-block: 96px; } }

/* Section label: small caps text sitting on a hairline rule */
.label {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 0.75rem;   /* was 0.6875 — Action Brief p.2: lift small copy legibility */
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin-bottom: 56px;
}
.label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.label--dark { color: var(--champagne); }
.label--dark::after { background: var(--rule-dark); }

/* Centred label: hairlines flank the text on both sides */
.label--center { justify-content: center; }
.label--center::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.label--dark.label--center::before,
.block--navy .label--center::before { background: var(--rule-dark); }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

/* Font-family lives on the heading CLASSES too, not just the element tags — so
   .h1/.h2 render the serif on any element (e.g. a <span> specimen), not only on
   real <h1>–<h4> tags. */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.h1 {
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  line-height: 1.08;
}
.h2 {
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  line-height: 1.14;
}
.h3 {
  font-size: clamp(1.375rem, 1.7vw, 1.625rem);
  line-height: 1.25;
}
.h4 {
  font-size: 1.25rem;
  line-height: 1.3;
}

/* Italic serif — used sparingly, for the closing clause of a major statement.
   Action Brief #03 + voice note: thin italics detract from the emphasised
   words. Emphasis now carries full heading weight, never a lighter one. */
/* Emphasis = heavier italic serif, per the final design: italic is kept as the
   emphasis device but given real weight and contrast so it reads as important,
   not as a soft secondary thought (Action Brief #03). */
.em {
  font-style: italic;
  font-weight: 600;
}
.hero h1 .em { color: var(--ink); }

.lede {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink-2);
}
.body { color: var(--ink-2); }
.body + .body { margin-top: 1.375rem; }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  background: var(--navy);
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--navy);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { background: var(--navy-800); border-color: var(--navy-800); }
.btn svg { transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--sm { padding: 0.6875rem 1.125rem; font-size: 0.6875rem; letter-spacing: 0.12em; }

.btn--bronze {
  background: var(--bronze);
  border-color: var(--bronze);
  color: #14192B;
}
.btn--bronze:hover { background: var(--bronze-lit); border-color: var(--bronze-lit); }

/* Underlined text link with arrow — the WIP's primary hero CTA treatment */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule-strong);
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.link:hover { color: var(--bronze-deep); border-color: var(--bronze); }
.link svg { transition: transform 0.25s var(--ease); }
.link:hover svg { transform: translateX(4px); }

.link--dark { color: var(--cream); border-bottom-color: var(--rule-dark); }
.link--dark:hover { color: var(--champagne); border-bottom-color: var(--champagne); }

.link--sm { font-size: 0.6875rem; letter-spacing: 0.1em; }

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(242, 238, 231, 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.is-stuck {
  border-bottom-color: var(--rule);
  background: rgba(242, 238, 231, 0.95);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 72px;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.nav__mark { height: 34px; width: auto; }
.nav__word {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav__word-u { color: var(--bronze); }

.nav__links { display: none; gap: 8px; align-items: center; }
@media (min-width: 1100px) { .nav__links { display: flex; } }

/* Links and the dropdown trigger share one restrained state model:
   idle -> hover/focus (bronze) -> active/current (ink + bronze underline). */
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--ink-2);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  border-radius: 3px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--bronze-deep); }
.nav__link[aria-current="true"] { color: var(--ink); }
.nav__link[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: 0.15rem;
  height: 1px;
  background: var(--bronze);
}
.nav__link[aria-current="true"] { position: relative; }

.nav__chev { transition: transform 0.25s var(--ease); }

/* Dropdown */
.nav__group { position: relative; }
.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 20px 44px -26px rgba(22, 32, 58, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav__group:hover .nav__menu,
.nav__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav__group:hover .nav__chev,
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__menu a {
  padding: 0.55rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav__menu a:hover,
.nav__menu a:focus-visible { color: var(--ink); background: rgba(22, 32, 58, 0.05); }

.nav__cta { display: none; }
@media (min-width: 720px) { .nav__cta { display: inline-flex; } }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.5rem 0;
}
@media (min-width: 1100px) { .nav__toggle { display: none; } }

/* Mobile menu — full-screen overlay */
html.menu-open { overflow: hidden; }
.mobmenu {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  padding: 18px var(--gutter) max(28px, env(safe-area-inset-bottom));
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .34s var(--ease), transform .34s var(--ease), visibility .34s;
}
.mobmenu.is-open { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 1100px) { .mobmenu, .mobmenu.is-open { display: none; } }

.mobmenu__top { display: flex; align-items: center; justify-content: space-between; padding-block: 6px 20px; }
.mobmenu__brand { font-family: var(--serif); font-size: 1.25rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.mobmenu__brand span { color: var(--bronze-deep); }
.mobmenu__close {
  display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  padding: 8px 0;
}

.mobmenu__list { display: flex; flex-direction: column; flex: 1 0 auto; padding-top: 18px; }
.mobmenu__cat { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 10px; }
.mobmenu__list a {
  display: block; padding: 9px 0; text-decoration: none;
  font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink);
  transition: color .2s var(--ease);
}
.mobmenu__list a:active, .mobmenu__list a:focus-visible { color: var(--bronze-deep); }
.mobmenu__div { display: block; height: 1px; background: var(--rule); margin: 20px 0; }

.mobmenu__foot { padding-top: 26px; margin-top: 20px; border-top: 1px solid var(--rule); }
.mobmenu__foot .btn { width: 100%; justify-content: center; }
.mobmenu__meta { margin-top: 18px; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--ink-3); text-align: center; }
.mobmenu__meta a { color: var(--bronze-deep); text-decoration: none; }

/* --------------------------------------------------------------------------
   Hero — light, approachable, arched harbour image
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 64px 96px;
}
@media (min-width: 900px) { .hero { padding-block: 64px 112px; } }

/* Faint warm daytime wash in the upper right — Hong Kong morning light */
.hero::before {
  content: "";
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 90%;
  background: radial-gradient(ellipse at 70% 30%, rgba(216, 186, 148, 0.28), transparent 62%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  gap: 56px;
  align-items: end;
}
@media (min-width: 960px) {
  .hero__grid {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }
}

/* The arch device: a true semicircular head on the image */
.hero__figure {
  position: relative;
  aspect-ratio: 577 / 770;
  overflow: hidden;
  border-radius: 50% 50% 6px 6px / 37.5% 37.5% 0 0;
  background: var(--stone-deep);
  /* Definition so a bright, clear-sky image does not bleed into the warm
     off-white page (voice note: "white into white"). A soft drop shadow +
     warm ring hold the arch's edge. */
  box-shadow: 0 30px 60px -32px rgba(22, 32, 58, 0.42);
}
.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(22, 32, 58, 0.14);
  background: linear-gradient(to top, rgba(22, 32, 58, 0.24), transparent 46%);
}

.hero__eyebrow { margin-bottom: 28px; }
.hero h1 { margin-bottom: 32px; }
.hero__body { max-width: 34em; margin-bottom: 40px; }

/* --------------------------------------------------------------------------
   Intro — wider context
   -------------------------------------------------------------------------- */

.intro { border-top: 1px solid var(--rule); }
.intro__grid { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .intro__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: 128px; }
}
.intro h2 { max-width: 12em; }

/* --------------------------------------------------------------------------
   Full-bleed photo strip
   -------------------------------------------------------------------------- */

.photostrip {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--navy-800);
}
@media (min-width: 900px) { .photostrip { height: 560px; } }
.photostrip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photostrip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(22, 32, 58, 0.30), rgba(22, 32, 58, 0.02) 55%);
}

/* Full-bleed image band. --dark sits between two navy sections, so its top
   and bottom edges fade into them (--navy above, --navy-700 below) and it
   reads as one continuous dark passage rather than a hard-edged photo. */
.band {
  position: relative;
  height: 360px;
  overflow: hidden;
  background: var(--navy);
}
@media (min-width: 900px) { .band { height: 440px; } }
.band img { width: 100%; height: 100%; object-fit: cover; }
.band--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      var(--navy) 0%,
      rgba(29, 41, 73, 0) 22%,
      rgba(23, 33, 58, 0) 74%,
      var(--navy-700) 100%),
    linear-gradient(105deg, rgba(14, 21, 38, 0.42), rgba(14, 21, 38, 0.04) 60%);
}

/* --------------------------------------------------------------------------
   Advisory areas — three pillar cards
   -------------------------------------------------------------------------- */

.advisory__grid { display: grid; gap: 56px; }
@media (min-width: 1060px) {
  .advisory__grid { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 64px; align-items: start; }
}
.advisory__intro p { margin-top: 24px; max-width: 30em; }

.cards {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--pillar-eb);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(22, 32, 58, 0.45); }

.card__img { position: relative; aspect-ratio: 265 / 220; overflow: hidden; background: var(--navy-800); }
.card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.card:hover .card__img img { transform: scale(1.04); }

.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 36px 32px 32px;
}
.card__num {
  font-family: var(--serif);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--bronze-deep);
  margin-bottom: 18px;
}
.card__body h3 { margin-bottom: 18px; }
.card__body p { font-size: 1rem; line-height: 1.68; color: var(--ink-2); }
.card__foot {
  margin-top: auto;
  padding-top: 32px;
}
.card__foot .link { width: 100%; justify-content: space-between; }

/* Per-pillar tonal treatment, per section 8 of the brief */
.card--eb { background: var(--pillar-eb); }

.card--bp { background: var(--pillar-bp); color: var(--cream); }
.card--bp h3 { color: var(--cream); }
.card--bp p { color: var(--cream-2); }
.card--bp .card__num { color: var(--champagne); }
.card--bp .link { color: var(--cream); border-bottom-color: var(--rule-dark); }
.card--bp .link:hover { color: var(--champagne); border-bottom-color: var(--champagne); }

.card--pc { background: var(--pillar-pc); }
.card--pc .card__num { color: var(--bronze-deep); }

/* --------------------------------------------------------------------------
   Dark centre — the intellectual core of the page
   -------------------------------------------------------------------------- */

.dark {
  background: var(--navy);
  color: var(--cream);
}
.dark h2, .dark h3, .dark h4 { color: var(--cream); }
.dark .body, .dark .lede { color: var(--cream-2); }

.pillars__grid { display: grid; gap: 56px; }
@media (min-width: 1000px) {
  .pillars__grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: 96px; }
}
.pillars__lead p { margin-top: 32px; max-width: 32em; }

.reasons { display: flex; flex-direction: column; }
.reason {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 24px;
  padding-block: 32px;
  border-top: 1px solid var(--rule-dark);
}
.reason:first-child { border-top: 0; padding-top: 0; }
.reason:last-child { padding-bottom: 0; }
@media (min-width: 700px) { .reason { grid-template-columns: 72px minmax(0, 1fr); gap: 32px; } }
.reason__num {
  font-family: var(--serif);
  font-size: 1.0625rem;   /* Action Brief p.2: numbers more legible on laptop/mobile */
  letter-spacing: 0.1em;
  color: var(--champagne);
  padding-top: 0.35em;
}
.reason h3 { margin-bottom: 14px; }
.reason p { color: var(--cream-2); max-width: 46em; }

/* --------------------------------------------------------------------------
   Skyline strip — the day-to-night hinge.
   Emerges from the light page above and resolves into the navy authority
   section below, so the dark passage is entered rather than cut to.
   -------------------------------------------------------------------------- */

.skyline {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 460px;
  padding-bottom: 56px;
  overflow: hidden;
  background: var(--navy);
}
@media (min-width: 900px) { .skyline { min-height: 560px; padding-bottom: 72px; } }
.skyline img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.skyline::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Vertical day-to-night blend sits above the horizontal readability scrim.
     Action Brief p.2: keep the transition but restore building detail — the
     top paper-fade is shorter now (14% vs 24%) so more skyline shows through
     instead of washing out. */
  background:
    linear-gradient(to bottom,
      var(--paper) 0%,
      rgba(242, 238, 231, 0) 14%,
      rgba(29, 41, 73, 0) 50%,
      rgba(29, 41, 73, 0.88) 82%,
      var(--navy) 100%),
    linear-gradient(to right, rgba(14, 21, 38, 0.48) 0%, rgba(14, 21, 38, 0.14) 60%, transparent 100%);
}
.skyline__inner { position: relative; z-index: 2; width: 100%; }
.skyline blockquote {
  max-width: 20em;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  line-height: 1.35;
  color: var(--cream);
}
.skyline cite {
  display: block;
  margin-top: 24px;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-style: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
}

/* --------------------------------------------------------------------------
   Process — dark, elegant numerals, readable body
   -------------------------------------------------------------------------- */

.process { background: var(--navy-700); }
.process__grid { display: grid; gap: 56px; }
@media (min-width: 1000px) {
  .process__grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 96px; }
}
.process__lead h2 { max-width: 11em; }

.steps { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-block: 32px;
  border-top: 1px solid var(--rule-dark);
}
.step:first-child { border-top: 0; padding-top: 0; }
.step:last-child { padding-bottom: 0; }
@media (min-width: 640px) {
  .step { grid-template-columns: 128px minmax(0, 1fr); gap: 40px; align-items: baseline; }
}
.step__num {
  font-family: var(--serif);
  font-size: 3.25rem;
  font-weight: 300;
  line-height: 1;
  color: var(--champagne);
  opacity: 0.55;
}
.step h4 { margin-bottom: 10px; }
/* Readability is explicitly called out in the brief — keep body text legible */
.step p { color: var(--cream-2); max-width: 42em; }

/* --------------------------------------------------------------------------
   Why Trusted Union — warm cream band (Action Brief p.2)
   -------------------------------------------------------------------------- */

.why {
  position: relative;
  overflow: hidden;
  background: var(--panel-warm);
  padding-block: 120px 300px;
}
@media (min-width: 900px) { .why { padding-block: 128px 440px; } }

/* Adviser-client photo fills the section; the people read in the lower band. */
.why__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
/* Warm cream wash: near-solid where the copy sits (upper area), releasing to
   reveal the conversation below. Text therefore sits on effectively solid
   cream, so contrast does not depend on the photo behind it. */
.why__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      var(--panel-warm) 0%,
      var(--panel-warm) 50%,
      rgba(239, 231, 218, 0.82) 60%,
      rgba(239, 231, 218, 0.35) 70%,
      rgba(239, 231, 218, 0.08) 82%,
      rgba(239, 231, 218, 0) 100%);
}
.why__inner { position: relative; z-index: 2; }

.why__grid { display: grid; gap: 56px; }
@media (min-width: 1000px) {
  .why__grid { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 96px; align-items: start; }
}
.why__lead p { margin-top: 24px; max-width: 32em; }

.checks { list-style: none; display: flex; flex-direction: column; }
.checks li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 20px;
  padding-block: 24px;
  border-top: 1px solid var(--rule-strong);
  color: var(--ink);
}
.checks li:first-child { border-top: 0; padding-top: 0; }
.checks li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--bronze);
}

/* --------------------------------------------------------------------------
   Proof — Hong Kong advice with international reach
   -------------------------------------------------------------------------- */

.proof { background: var(--stone); }
.proof__grid { display: grid; gap: 48px; }
@media (min-width: 1000px) {
  .proof__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 96px; align-items: center; }
}
.proof__case {
  position: relative;
  padding: 40px 40px 40px 44px;
  background: var(--white);
  border-left: 2px solid var(--bronze);
}
.proof__case p {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink);
}
/* The role line: sans body, sitting under the serif case statement, above a
   hairline that separates it from the caption (Action Brief #08). */
.proof__role {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.proof__case span {
  display: block;
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.proof__note { margin-top: 28px; max-width: 34em; }

/* --------------------------------------------------------------------------
   At a glance
   -------------------------------------------------------------------------- */

.glance { background: var(--stone); border-top: 1px solid rgba(22, 32, 58, 0.10); }
.glance__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .glance__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; } }
@media (min-width: 1000px) { .glance__grid { grid-template-columns: repeat(4, 1fr); } }
.glance__item strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 10px;
}
.glance__item span { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 1000px) {
  .glance__item + .glance__item { padding-left: 40px; border-left: 1px solid var(--rule); }
}

/* --------------------------------------------------------------------------
   Final CTA — Hong Kong at night
   -------------------------------------------------------------------------- */

.cta {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 720px;
  padding-block: 176px 196px;
  overflow: hidden;
  background: var(--navy-900);
  text-align: center;
}
.cta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Even navy wash so the city stays recognisable, resolving to solid navy at
     the very bottom so the CTA melts seamlessly into the footer below. */
  background:
    linear-gradient(to bottom, rgba(14, 21, 38, 0.60) 0%, rgba(14, 21, 38, 0.32) 38%, rgba(14, 21, 38, 0.74) 78%, var(--navy-900) 100%),
    radial-gradient(ellipse at 50% 58%, rgba(194, 146, 95, 0.16), transparent 62%);
}
.cta__inner { position: relative; z-index: 2; width: 100%; }
.cta__box { max-width: 42rem; margin-inline: auto; }
.cta .cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 34px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--champagne);
}
.cta__eyebrow::before, .cta__eyebrow::after {
  content: "";
  width: 48px; height: 1px;
  background: var(--rule-dark);
}
.cta h2 { color: var(--cream); max-width: 13em; margin-inline: auto; font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.1; }
.cta p { color: var(--cream-2); max-width: 36em; margin: 28px auto 46px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--navy-900); color: var(--cream-2); padding-block: 112px 44px; overflow: hidden; }

.footer__top { display: grid; gap: 64px; }
@media (min-width: 940px) {
  .footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 100px; align-items: start; }
}

.footer__mark { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.footer__mark img { height: 46px; width: auto; }
.footer__wordmark {
  font-family: var(--serif);
  font-size: 1.375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream);
}
.footer__wordmark span { color: var(--champagne); }
.footer__statement {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.32;
  color: var(--cream);
  max-width: 15em;
}
.footer__brand .link { margin-top: 30px; }

.footer__social { display: flex; gap: 12px; margin-top: 32px; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rule-dark);
  color: var(--cream-2);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer__social a:hover { color: var(--champagne); border-color: var(--champagne); }
.footer__social svg { width: 17px; height: 17px; display: block; }

.footer__nav { display: grid; gap: 40px 32px; grid-template-columns: 1fr 1fr; }
.footer__nav > div:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 560px) {
  .footer__nav { grid-template-columns: repeat(3, 1fr); }
  .footer__nav > div:nth-child(3) { grid-column: auto; }
}

.footer h5 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 22px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.footer ul a {
  display: inline-block;
  padding-block: 5px;          /* keeps the tap target at 24px+ */
  font-size: 0.9375rem;
  color: var(--cream-2);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer ul a:hover { color: var(--champagne); }

.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  justify-content: space-between;
  align-items: center;
  margin-top: 100px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-dark);
}
.footer__base p, .footer__base a {
  font-size: 0.75rem;
  color: var(--cream-3);
  text-decoration: none;
}
.footer__base a { display: inline-block; padding-block: 4px; }
.footer__base a:hover { color: var(--champagne); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 28px; }

.footer__disclaimer {
  margin-top: 28px;
  font-size: 0.75rem;   /* legal copy — lifted per Action Brief final checks */
  line-height: 1.7;
  color: rgba(241, 238, 232, 0.58);
  max-width: 78ch;
}

/* Oversized brand wordmark closing the footer — an SVG whose letters track out
   to fill the full footer width (no distortion; glyph height stays fixed). */
.footer__brandmark { margin-top: clamp(48px, 6vw, 96px); }
.footer__brandmark svg { display: block; width: 100%; height: auto; }
.footer__brandmark text {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 112px;
  fill: rgba(220, 198, 166, 0.16);
}
.footer__brandmark .fbm-1 { fill: rgba(220, 198, 166, 0.14); }
.footer__brandmark .fbm-2 { fill: rgba(220, 198, 166, 0.22); }

/* --------------------------------------------------------------------------
   Scroll reveal — progressive enhancement only.

   Content is visible by default. The hidden state is scoped to .js-reveal,
   which the inline head script adds only when IntersectionObserver exists and
   motion is welcome. If scripting fails, the page still renders in full
   rather than staying blank.
   -------------------------------------------------------------------------- */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

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

/* ==========================================================================
   INTERIOR PAGES
   Shared patterns for the advisory, service, about, insights, partners and
   contact pages. Built on the same tokens as the homepage so the interior
   reads as one continuous system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section background utilities + generic constrained heading blocks
   -------------------------------------------------------------------------- */
.bg-lift  { background: var(--paper-lift); }
.bg-stone { background: var(--stone); border-top: 1px solid rgba(22, 32, 58, 0.08); }
.bg-white { background: var(--white); }

/* A lead block: section eyebrow/label, heading and intro sitting together */
.lead { max-width: 46rem; }
.lead .label { margin-bottom: 32px; }
.lead h2 { margin-bottom: 24px; }
.lead .body { max-width: 40em; }
.lead--wide { max-width: 60rem; }

/* Two-column "lead + supporting text" layout (heading left, prose right) */
.split { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: 96px; align-items: start; }
}
.split--center { align-items: center; }

/* --------------------------------------------------------------------------
   Interior page hero — lighter than the homepage arch hero
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: 64px 72px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
@media (min-width: 900px) { .page-hero { padding-block: 76px 92px; } }
.page-hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -8%;
  width: 55%; height: 100%;
  background: radial-gradient(ellipse at 72% 32%, rgba(216, 186, 148, 0.24), transparent 62%);
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { max-width: 16em; margin-block: 22px 26px; }
.page-hero .lede { max-width: 42em; }
.page-hero .lede + .lede { margin-top: 1.125rem; }
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: 40px;
}

/* Hero with a media column on wide screens */
.page-hero--media .page-hero__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) {
  .page-hero--media .page-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: 72px;
  }
}
.page-hero__figure {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border-radius: 6px;
  background: var(--stone-deep);
  box-shadow: 0 30px 60px -34px rgba(22, 32, 58, 0.42);
}
.page-hero__figure img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__figure::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(22, 32, 58, 0.12);
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); text-decoration: none; transition: color 0.2s var(--ease); }
.crumbs a:hover { color: var(--bronze-deep); }
.crumbs__sep { color: var(--rule-strong); }
.crumbs [aria-current="page"] { color: var(--ink); }

/* --------------------------------------------------------------------------
   Numbered grid — "Key Areas We Support", "Who We Work With", etc.
   -------------------------------------------------------------------------- */
.numbered {
  display: grid;
  gap: 8px 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .numbered { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .numbered--3 { grid-template-columns: repeat(3, 1fr); } }
.numbered__item {
  padding-block: 30px;
  border-top: 1px solid var(--rule);
}
.numbered__num {
  font-family: var(--serif);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--bronze-deep);
  margin-bottom: 16px;
}
.numbered__item h3 { font-size: 1.1875rem; line-height: 1.3; margin-bottom: 12px; }
.numbered__item p { font-size: 0.9375rem; line-height: 1.66; color: var(--ink-2); }

.numbered.on-dark .numbered__item { border-top-color: var(--rule-dark); }
.numbered.on-dark .numbered__num { color: var(--champagne); }
.numbered.on-dark .numbered__item h3 { color: var(--cream); }
.numbered.on-dark .numbered__item p { color: var(--cream-2); }

/* Feature grid — title + body pairs with no number (e.g. "Why Trusted Union") */
.feats { display: grid; gap: 8px 48px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .feats { grid-template-columns: repeat(2, 1fr); } }
.feats__item { padding-block: 28px; border-top: 1px solid var(--rule); }
.feats__item h3 {
  font-size: 1.0625rem;
  line-height: 1.3;
  margin-bottom: 10px;
  color: var(--ink);
}
.feats__item p { font-size: 0.9375rem; line-height: 1.66; color: var(--ink-2); }
.feats.on-dark .feats__item { border-top-color: var(--rule-dark); }
.feats.on-dark .feats__item h3 { color: var(--cream); }
.feats.on-dark .feats__item p { color: var(--cream-2); }

/* --------------------------------------------------------------------------
   Review list — long "What Trusted Union Reviews" checklist, multi-column
   -------------------------------------------------------------------------- */
.review-list {
  list-style: none;
  columns: 1;
  column-gap: 56px;
}
@media (min-width: 640px)  { .review-list { columns: 2; } }
@media (min-width: 1060px) { .review-list--3 { columns: 3; } }
.review-list li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 14px;
  padding-block: 11px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.review-list li::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: 0.6em;
  border-radius: 50%;
  background: var(--bronze);
}
.dark .review-list li,
.block--navy .review-list li { color: var(--cream-2); }

/* --------------------------------------------------------------------------
   Prose — a constrained rich-text block for "Why It Matters" style copy
   -------------------------------------------------------------------------- */
.prose { max-width: 44em; }
.prose > * + * { margin-top: 1.375rem; }
.prose p { color: var(--ink-2); }
.prose h3 { font-size: 1.375rem; margin-top: 2.5rem; }
.dark .prose p { color: var(--cream-2); }

/* --------------------------------------------------------------------------
   FAQ — native <details> accordion
   -------------------------------------------------------------------------- */
.faq { max-width: 60rem; border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-block: 26px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.35;
  color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--bronze-deep); }
.faq__icon {
  flex-shrink: 0;
  position: relative;
  width: 16px; height: 16px;
  margin-top: 0.35em;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 1.5px;
  background: var(--bronze-deep);
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(0); }
.faq__item[open] summary { color: var(--bronze-deep); }
.faq__answer { padding-bottom: 28px; max-width: 62em; }
.faq__answer p { color: var(--ink-2); }
.faq__answer p + p { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Pillar rows — Advisory Services overview (three pillars, alternating)
   -------------------------------------------------------------------------- */
.pillar-row { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .pillar-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
  .pillar-row--flip .pillar-row__media { order: 2; }
}
.pillar-row + .pillar-row { margin-top: 72px; }
@media (min-width: 900px) { .pillar-row + .pillar-row { margin-top: 96px; } }
.pillar-row__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--navy-800);
}
.pillar-row__media img { width: 100%; height: 100%; object-fit: cover; }
.pillar-row__media::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(22, 32, 58, 0.12);
  border-radius: inherit;
}
.pillar-row__num {
  font-family: var(--serif);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--bronze-deep);
  margin-bottom: 14px;
}
.pillar-row h3 { margin-bottom: 18px; }
.pillar-row p { color: var(--ink-2); margin-bottom: 28px; max-width: 34em; }

/* --------------------------------------------------------------------------
   Simple content cards — insights index, resource lists
   -------------------------------------------------------------------------- */
.tiles { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles--3 { grid-template-columns: repeat(3, 1fr); } }
.tile {
  display: flex;
  flex-direction: column;
  padding: 34px 32px;
  background: var(--paper-lift);
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
a.tile:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(22, 32, 58, 0.42); border-color: var(--rule-strong); }
.tile__tag {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-deep);
  margin-bottom: 18px;
}
.tile h3 { font-size: 1.25rem; line-height: 1.3; margin-bottom: 14px; }
.tile p { font-size: 0.9375rem; line-height: 1.66; color: var(--ink-2); }
.tile__foot { margin-top: auto; padding-top: 24px; }

/* --------------------------------------------------------------------------
   Form — Request a Confidential Review
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 22px 28px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .form { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 9px; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.field label .req { color: var(--bronze-deep); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237E5530' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
  padding-right: 2.6rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(168, 123, 76, 0.16);
}
.form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 6px; }
.form-note {
  padding: 22px 24px;
  background: var(--paper-lift);
  border-left: 2px solid var(--bronze);
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.form-note strong { color: var(--ink); font-weight: 600; }

/* Contact split — form beside a supporting panel */
.contact__grid { display: grid; gap: 48px; }
@media (min-width: 1000px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: 72px; align-items: start; }
}
.contact__aside {
  position: relative;
  overflow: hidden;
  padding: 40px;
  border-radius: 6px;
  background: var(--navy);
  color: var(--cream);
}
.contact__aside h3 { color: var(--cream); margin-bottom: 18px; }
.contact__aside p { color: var(--cream-2); font-size: 0.9375rem; }
.contact__aside .aside-list { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 16px; }
.contact__aside .aside-list li {
  padding-top: 16px;
  border-top: 1px solid var(--rule-dark);
  font-size: 0.9375rem;
  color: var(--cream-2);
}
.contact__aside .aside-list strong { display: block; color: var(--champagne); font-family: var(--serif); font-weight: 400; font-size: 1.0625rem; margin-bottom: 4px; }

/* Aside with a photographic backdrop behind the navy wash */
.contact__aside-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.contact__aside::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(155deg, rgba(20, 25, 43, 0.82), rgba(14, 21, 38, 0.95));
}
.contact__aside-in { position: relative; z-index: 2; }

/* Success confirmation, hidden until submit */
.form-confirm {
  display: none;
  padding: 32px 36px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--bronze);
  border-radius: 6px;
}
.form-confirm.is-shown { display: block; }
.form-confirm h3 { margin-bottom: 12px; }
.form-confirm p { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Section CTA band — reusable navy call-to-action (lighter than the homepage
   image CTA; used to close interior pages)
   -------------------------------------------------------------------------- */
.cta-band { background: var(--navy-900); color: var(--cream); }
.cta-band__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) {
  .cta-band__grid { grid-template-columns: minmax(0, 1fr) auto; gap: 64px; }
}
.cta-band h2 { color: var(--cream); max-width: 14em; }
.cta-band p { color: var(--cream-2); max-width: 40em; margin-top: 18px; }

/* ==========================================================================
   RICH FULL-BLEED DEVICES — borrowed from the homepage so interior pages
   share its cinematic rhythm (arch hero, full-bleed bands, alternating
   image/text showcases, image-backed section intros).
   ========================================================================== */

/* Breadcrumb sitting above a reused homepage .hero — small top offset */
.hero .crumbs { margin-bottom: 22px; }
.hero__copy .eyebrow { display: block; }

/* --------------------------------------------------------------------------
   Showcase — full-bleed alternating image / text feature band. Used for the
   three advisory pillars so each gets a large, cinematic image rather than a
   small card. The image bleeds to the screen edge; the copy keeps a padded
   column that stays readable.
   -------------------------------------------------------------------------- */
.showcase { display: grid; }
.showcase__media { position: relative; min-height: 300px; overflow: hidden; background: var(--navy-800); }
.showcase__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.showcase:hover .showcase__media img { transform: scale(1.03); }
.showcase__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px var(--gutter) 60px;
  background: var(--paper);
}
@media (min-width: 900px) {
  .showcase { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .showcase__media { min-height: 460px; }
  .showcase--flip .showcase__media { order: 2; }
  .showcase__body { padding-block: 72px; }
}
@media (min-width: 1200px) {
  .showcase__body { padding-inline: clamp(48px, 6vw, 108px); }
}
.showcase__num {
  font-family: var(--serif);
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  color: var(--bronze-deep);
  margin-bottom: 18px;
}
.showcase__body h3 {
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
}
.showcase__body p { color: var(--ink-2); max-width: 34em; margin-bottom: 30px; }

/* Per-pillar tonal treatment, echoing the homepage cards */
.showcase--lift  .showcase__body { background: var(--pillar-eb); }
.showcase--stone .showcase__body { background: var(--pillar-pc); }
.showcase--dark  .showcase__body { background: var(--pillar-bp); color: var(--cream); }
.showcase--dark h3 { color: var(--cream); }
.showcase--dark p { color: var(--cream-2); }
.showcase--dark .showcase__num { color: var(--champagne); }
.showcase--dark .link { color: var(--cream); border-bottom-color: var(--rule-dark); }
.showcase--dark .link:hover { color: var(--champagne); border-bottom-color: var(--champagne); }

/* Warm bronze/tan body (per the Figma "At a Glance" design) */
.showcase--camel .showcase__body { background: var(--camel); color: var(--ink); }
.showcase--camel .showcase__media { background: var(--camel); }
.showcase--camel h2, .showcase--camel h3 { color: var(--ink); }
.showcase--camel .showcase__num { color: var(--bronze-deep); }
.showcase--camel p { color: var(--ink-2); }
.showcase--camel .label { color: var(--bronze-deep); }
.showcase--camel .label::after { background: rgba(22, 32, 58, 0.16); }
.showcase--camel .stat { border-top-color: rgba(22, 32, 58, 0.14); }
.showcase--camel .stat__i { color: var(--bronze-deep); }
.showcase--camel .stat__n { color: var(--ink); }
.showcase--camel .stat__k { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Scrim feature — a generalisation of the homepage "Why" section: a full-bleed
   background image with a warm cream (or navy) wash near the copy, releasing to
   reveal the photograph below. Cinematic section intro for stories / statements.
   -------------------------------------------------------------------------- */
.scrim {
  position: relative;
  overflow: hidden;
  background: var(--panel-warm);
  padding-block: 112px 300px;
}
/* Reveal band scales with viewport width: wider screens make the section
   shorter (copy wraps less), so more bottom padding is needed to keep the
   people fully in frame instead of cropping their faces at the lower edge. */
@media (min-width: 900px) { .scrim { padding-block: 128px clamp(440px, calc(76vw - 460px), 1560px); } }
.scrim__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.scrim__wash {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    var(--panel-warm) 0%,
    var(--panel-warm) 46%,
    rgba(239, 231, 218, 0.82) 58%,
    rgba(239, 231, 218, 0.30) 70%,
    rgba(239, 231, 218, 0) 100%);
}
.scrim__inner { position: relative; z-index: 2; }
.scrim--navy { background: var(--navy); }
.scrim--navy .scrim__wash {
  background: linear-gradient(to bottom,
    var(--navy) 0%,
    var(--navy) 46%,
    rgba(29, 41, 73, 0.82) 58%,
    rgba(29, 41, 73, 0.30) 70%,
    rgba(29, 41, 73, 0) 100%);
}
.scrim--navy h2, .scrim--navy h3 { color: var(--cream); }
.scrim--navy .body, .scrim--navy .prose p { color: var(--cream-2); }
.scrim--navy .label { color: var(--champagne); }
.scrim--navy .label::after { background: var(--rule-dark); }

/* --------------------------------------------------------------------------
   Full-bleed light photo band with an overlaid caption (a lighter cousin of
   the homepage skyline hinge, without the day-to-night resolve).
   -------------------------------------------------------------------------- */
.imgband {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 360px;
  overflow: hidden;
  background: var(--navy-800);
}
@media (min-width: 900px) { .imgband { min-height: 480px; } }
.imgband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imgband::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(14, 21, 38, 0.72), rgba(14, 21, 38, 0.12) 55%, rgba(14, 21, 38, 0.04));
}
.imgband__inner { position: relative; z-index: 2; width: 100%; padding-block: 48px; }
.imgband__inner .eyebrow { color: var(--champagne); }
.imgband blockquote {
  max-width: 22em;
  margin-top: 16px;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  line-height: 1.3;
  color: var(--cream);
}

/* --------------------------------------------------------------------------
   Tile with media — richer Insights cards
   -------------------------------------------------------------------------- */
.tile--media { padding: 0; overflow: hidden; }
.tile--media .tile__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-800); }
.tile--media .tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
a.tile--media:hover .tile__img img { transform: scale(1.05); }
.tile--media .tile__in { display: flex; flex-direction: column; flex: 1; padding: 30px 30px 32px; }
.tile--media .tile__foot { margin-top: auto; padding-top: 22px; }

/* ==========================================================================
   EDITORIAL DEVICES — bolder, more expressive interior layouts
   (colour-block sections, notched media, hand-drawn accents, floating pill
   labels around circular media, oversized statements and big stat counters).
   Built on the Trusted Union palette — never the reference brand's colours.
   ========================================================================== */

/* --- Colour-block section, full-bleed, generous ------------------------- */
.block { padding-block: 96px; }
@media (min-width: 900px) { .block { padding-block: 128px; } }
.block--navy  { background: var(--navy); color: var(--cream); }
.block--navy h1, .block--navy h2, .block--navy h3 { color: var(--cream); }
.block--navy .body, .block--navy .prose p, .block--navy .lede { color: var(--cream-2); }
.block--navy .label { color: var(--champagne); }
.block--navy .label::after { background: var(--rule-dark); }
.block--navy .eyebrow { color: var(--champagne); }
.block--navy .crumbs, .block--navy .crumbs a { color: var(--cream-3); }
.block--navy .crumbs a:hover { color: var(--champagne); }
.block--navy .crumbs [aria-current="page"] { color: var(--cream); }
.block--navy .crumbs__sep { color: var(--rule-dark); }
.block--navy .link { color: var(--cream); border-bottom-color: var(--rule-dark); }
.block--navy .link:hover { color: var(--champagne); border-bottom-color: var(--champagne); }
.block--stone { background: var(--stone); }
.block--lift  { background: var(--paper-lift); }
.block--cream { background: var(--panel-warm); }

/* Warm bronze/tan block — light text, per the Figma "At a Glance" design */
.block--camel { background: var(--camel); color: var(--ink); }
.block--camel h2, .block--camel h3 { color: var(--ink); }
.block--camel .label { color: var(--bronze-deep); }
.block--camel .label::after,
.block--camel .label--center::before { background: rgba(22, 32, 58, 0.16); }
.block--camel .stat { border-top-color: rgba(22, 32, 58, 0.14); }
.block--camel .stat__i { color: var(--bronze-deep); }
.block--camel .stat__n { color: var(--ink); }
.block--camel .stat__k { color: var(--ink-2); }
.block--camel .body, .block--camel .lede, .block--camel .prose p { color: var(--ink-2); }
.block--camel .em { color: var(--ink); }

/* --- Notched corner (a cut corner on media / panels) -------------------- */
.notch-tr { clip-path: polygon(0 0, calc(100% - 46px) 0, 100% 46px, 100% 100%, 0 100%); }
.notch-tl { clip-path: polygon(46px 0, 100% 0, 100% 100%, 0 100%, 0 46px); }
.notch-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 46px) 100%, 0 100%); }
@media (min-width: 900px) {
  .notch-tr { clip-path: polygon(0 0, calc(100% - 72px) 0, 100% 72px, 100% 100%, 0 100%); }
  .notch-tl { clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 72px); }
  .notch-br { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 72px), calc(100% - 72px) 100%, 0 100%); }
}

/* --- Hand-drawn circle / underline around an emphasis word -------------- */
.circled { position: relative; white-space: nowrap; display: inline-block; }
.circled > svg {
  position: absolute;
  left: -8%; top: -18%;
  width: 116%; height: 140%;
  overflow: visible;
  color: var(--bronze);
  pointer-events: none;
}
.circled > svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}
/* Draw-on-reveal only when the reveal system is active; otherwise the circle
   is simply present, so it never goes missing without JS. */
.js-reveal .circled > svg path { stroke-dasharray: 720; stroke-dashoffset: 720; }
.js-reveal .reveal.is-in .circled > svg path { animation: circleDraw 1.1s var(--ease) 0.35s forwards; }
@keyframes circleDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .circled > svg path { stroke-dashoffset: 0; animation: none; }
}
.underlined { position: relative; white-space: nowrap; }
.underlined > svg {
  position: absolute; left: 0; bottom: -0.28em;
  width: 100%; height: 0.4em; overflow: visible; color: var(--bronze);
  pointer-events: none;
}
.underlined > svg path { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; }

/* --- Big display statement (oversized serif, own section) --------------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-size: clamp(2.25rem, 5.4vw, 4.5rem);
  text-wrap: balance;
}
.display--center { text-align: center; margin-inline: auto; max-width: 16em; }
.display--muted { color: var(--ink-3); }
.block--navy .display--muted { color: var(--cream-3); }

/* --- Orbit: circular media with floating pill labels ------------------- */
.orbit-wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 960px) { .orbit-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 72px; } }
.orbit {
  position: relative;
  width: min(560px, 86vw);
  aspect-ratio: 1;
  margin: 24px auto;
}
.orbit__media {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy-800);
  box-shadow: 0 40px 80px -40px rgba(22, 32, 58, 0.5);
}
.orbit__media img { width: 100%; height: 100%; object-fit: cover; }
.orbit__media::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(22,32,58,0.12); }
.pill {
  position: absolute;
  padding: 0.5rem 1.05rem;
  background: var(--paper-lift);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 12px 28px -16px rgba(22, 32, 58, 0.45);
}
.pill--tl { top: 4%;  left: -6%; }
.pill--tr { top: 16%; right: -10%; }
.pill--r  { top: 50%; right: -14%; transform: translateY(-50%); }
.pill--br { bottom: 12%; right: -4%; }
.pill--bl { bottom: 4%; left: -8%; }
.pill--l  { top: 46%; left: -14%; transform: translateY(-50%); }
@media (max-width: 520px) {
  .pill { font-size: 0.8125rem; padding: 0.4rem 0.8rem; }
  .pill--tr, .pill--r, .pill--br { right: -2%; }
  .pill--tl, .pill--bl, .pill--l { left: -2%; }
}

/* --- Big stat counters (01–04) ----------------------------------------- */
.stats { display: grid; gap: 4px 40px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats.stats--stack { grid-template-columns: 1fr; gap: 0; }

/* --- Belief cards with line icons ------------------------------------- */
.beliefs { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .beliefs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .beliefs { grid-template-columns: repeat(3, 1fr); } }
.belief {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 32px;
  border: 1px solid var(--rule-dark);
  border-radius: 6px;
  background: rgba(241, 238, 232, 0.03);
}
.belief__icon {
  width: 34px; height: 34px;
  margin-bottom: 22px;
  color: var(--champagne);
}
.belief__icon svg { width: 100%; height: 100%; display: block; }
.belief h3 { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.25; margin-bottom: 10px; }
.belief p { color: var(--cream-2); font-size: 0.9375rem; line-height: 1.62; }
.beliefs.on-light .belief h3 { color: var(--ink); }
/* Light-surface variant, if reused outside a dark block */
.beliefs.on-light .belief { border-color: var(--rule); background: var(--paper-lift); }
.beliefs.on-light .belief__icon { color: var(--bronze-deep); }
.beliefs.on-light .belief p { color: var(--ink-2); }
.stat { padding-block: 30px; border-top: 1px solid var(--rule); }
.stat__i {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bronze-deep); margin-bottom: 18px;
}
.stat__n {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: 1; letter-spacing: -0.02em;
  color: var(--ink); margin-bottom: 14px;
}
.stat__k { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.block--navy .stat { border-top-color: var(--rule-dark); }
.block--navy .stat__i { color: var(--champagne); }
.block--navy .stat__n { color: var(--cream); }
.block--navy .stat__k { color: var(--cream-2); }

/* --- Image-overlay hero (full-bleed photo with light text over it) ----- */
.hero-overlay {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  overflow: hidden;
  background: var(--navy-900);
}
@media (min-width: 900px) { .hero-overlay { min-height: 640px; } }
.hero-overlay > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(14, 21, 38, 0.92) 6%, rgba(14, 21, 38, 0.5) 52%, rgba(14, 21, 38, 0.34) 100%),
    linear-gradient(102deg, rgba(14, 21, 38, 0.5), rgba(14, 21, 38, 0.05) 62%);
}
.hero-overlay__inner { position: relative; z-index: 2; width: 100%; padding-block: 48px 60px; }
.hero-overlay .crumbs, .hero-overlay .crumbs a { color: var(--cream-3); }
.hero-overlay .crumbs a:hover { color: var(--champagne); }
.hero-overlay .crumbs [aria-current="page"] { color: var(--cream); }
.hero-overlay .crumbs__sep { color: var(--rule-dark); }
.hero-overlay .eyebrow { color: var(--champagne); }
.hero-overlay h1 { color: var(--cream); max-width: 16em; margin-block: 22px 26px; }
.hero-overlay .lede { color: var(--cream-2); max-width: 40em; }
.hero-overlay .link { color: var(--cream); border-bottom-color: var(--rule-dark); }
.hero-overlay .link:hover { color: var(--champagne); border-bottom-color: var(--champagne); }

/* --- Framed media + Trusted Union arch shapes -------------------------- */
.framed { position: relative; overflow: hidden; }
.framed img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Single signature arch (rounded top, flat bottom) — the TU device */
.arch {
  border-radius: 50% 50% 6px 6px / 42% 42% 0 0;
}
/* Capsule arch — domed top AND bottom (wide masthead) */
.arch-cap {
  border-radius: 50% / 36%;
}
/* Stadium — wide masthead with fully-rounded (semicircle) left/right ends.
   Desktop matches the Figma about hero (1312 x 361 ≈ 40/11); a taller aspect
   on small screens keeps the image from collapsing into a thin sliver. */
.arch-stadium {
  aspect-ratio: 16 / 9;
  border-radius: 999px;
}
@media (min-width: 760px) {
  .arch-stadium { aspect-ratio: 40 / 11; }
}
/* Double arch — two adjacent arches, for a wide masthead image. An SVG mask
   keeps both arcs true circles; the figure aspect must match the viewBox. */
.arch2 {
  aspect-ratio: 20 / 11;
  border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220L0 100A100 100 0 0 1 200 100A100 100 0 0 1 400 100L400 220Z' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220L0 100A100 100 0 0 1 200 100A100 100 0 0 1 400 100L400 220Z' fill='black'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ==========================================================================
   PILLAR & SERVICE PAGE COMPONENTS
   Two templates (pillar overview + service detail) sharing one editorial
   component set: colour-block service hero, key-area cards, review checklist,
   why-TU cards, FAQ accordion, sub-service navigator and related strip.
   ========================================================================== */

/* --- Service hero — typographic colour block (no photo) ------------------- */
.svchero {
  position: relative; overflow: hidden;
  min-height: 60vh; display: flex; align-items: center;
  padding-block: 100px 60px;
}
@media (min-width: 900px) { .svchero { padding-block: 108px 68px; } }
.svchero__grid { width: 100%; max-width: none; }
@media (min-width: 900px) { .svchero__grid { max-width: 78%; } }
.svchero .crumbs { margin-bottom: 30px; }
.svchero__eyebrow { margin-bottom: 22px; }
.svchero .h1 { max-width: none; }
.svchero__body { margin-top: 28px; max-width: 62ch; font-size: 1.125rem; }
.svchero__actions {
  margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px;
}
.svchero__back { white-space: nowrap; }
.svchero--eb { background: var(--pillar-eb); }
.svchero--bp { background: var(--navy); color: var(--cream); }
.svchero--bp .h1 { color: var(--cream); }
.svchero--bp .svchero__body { color: var(--cream-2); }
.svchero--bp .svchero__eyebrow { color: var(--champagne); }
.svchero--bp .crumbs { color: var(--cream-3); }
.svchero--bp .crumbs a { color: var(--cream-2); }
.svchero--bp .crumbs__sep { color: var(--rule-dark); }
.svchero--bp .svchero__back { color: var(--champagne); }
.svchero--pc { background: var(--pillar-pc); }
.svchero::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--bronze) 0%, transparent 62%);
}

/* --- Section head (label + h2 stacked) ------------------------------------ */
.keyareas__head, .reviews-sec__head, .whytu-sec__head,
.subnav-sec__head, .related-sec__head {
  max-width: 46ch; margin-bottom: 56px;
}
.keyareas__head .label, .whytu-sec__head .label,
.subnav-sec__head .label, .related-sec__head .label,
.reviews-sec__head .label { margin-bottom: 22px; }
.reviews-sec__head .body { margin-top: 20px; color: var(--cream-2); max-width: 52ch; }

/* --- Key areas / cards grid ----------------------------------------------- */
.kgrid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .kgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .kgrid { grid-template-columns: repeat(3, 1fr); } }
.kcard {
  padding: 34px 30px 38px; background: var(--white);
  border: 1px solid var(--rule); border-radius: 8px;
  display: flex; flex-direction: column;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.kcard:hover { border-color: var(--rule-strong); transform: translateY(-3px); }
.kcard__num {
  font-family: var(--serif); font-size: 0.875rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--bronze-deep); margin-bottom: 22px;
}
.kcard__title { font-size: 1.25rem; line-height: 1.25; margin-bottom: 14px; }
.kcard__body { font-size: 0.9375rem; line-height: 1.7; color: var(--ink-2); }

/* --- Reviews checklist (navy) --------------------------------------------- */
.reviews {
  list-style: none; display: grid; gap: 14px 40px; grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .reviews { grid-template-columns: repeat(3, 1fr); } }
.reviews li {
  display: flex; align-items: flex-start; gap: 13px; color: var(--cream-2);
  font-size: 0.9375rem; line-height: 1.5;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule-dark);
}
.reviews li .ico { flex: 0 0 auto; width: 19px; height: 19px; color: var(--bronze-lit); margin-top: 1px; }
.reviews--light li { color: var(--ink-2); border-bottom-color: var(--rule); }
.reviews--light li .ico { color: var(--bronze-deep); }

/* --- Why it matters body spacing ------------------------------------------ */
.whymatters__body p + p { margin-top: 18px; }

/* --- Why Trusted Union cards ---------------------------------------------- */
.wgrid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .wgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .wgrid { grid-template-columns: repeat(3, 1fr); } }
.wcard {
  padding: 32px 30px 34px; background: var(--white);
  border: 1px solid var(--rule); border-radius: 8px;
  border-top: 2px solid var(--bronze); display: flex; flex-direction: column;
}
.wcard__title { font-size: 1.1875rem; line-height: 1.25; margin-bottom: 12px; }
.wcard__body { font-size: 0.9375rem; line-height: 1.7; color: var(--ink-2); }
.wgrid--tight { gap: 12px; margin-top: 8px; }

/* --- Generic extra section ------------------------------------------------ */
.generic__grid { display: grid; gap: 40px; }
@media (min-width: 960px) {
  .generic__grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: 96px; align-items: start; }
}
.generic__body p + p { margin-top: 18px; }
.generic__body .reviews { margin-top: 8px; }
.generic__body .wgrid { margin-top: 8px; }

/* --- FAQ accordion -------------------------------------------------------- */
.faq-sec__grid { display: grid; gap: 44px; }
@media (min-width: 960px) {
  .faq-sec__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); gap: 88px; align-items: stretch; }
  .faq-sec__head { display: flex; flex-direction: column; }
}
.faq-sec__head .label { margin-bottom: 22px; }
.faq { border-top: 1px solid var(--rule); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 24px; padding: 26px 0;
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.35; color: var(--ink);
  transition: color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--bronze-deep); }
.faq__icon { position: relative; flex: 0 0 16px; width: 16px; height: 16px; margin-top: 6px; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--bronze-deep);
  transform: translate(-50%, -50%); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.faq__icon::before { width: 14px; height: 1.5px; }
.faq__icon::after  { width: 1.5px; height: 14px; }
.faq__item[open] .faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.faq__a { padding: 0 40px 28px 0; }
.faq__a p { color: var(--ink-2); font-size: 0.9688rem; line-height: 1.75; }

/* --- Sub-service navigator (pillar only) ---------------------------------- */
.subnav { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .subnav { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .subnav { grid-template-columns: repeat(3, 1fr); } }
.subnav__item {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: 10px; overflow: hidden; color: var(--ink);
  transition: border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.subnav__item:hover {
  border-color: var(--bronze); transform: translateY(-4px);
  box-shadow: 0 24px 44px -30px rgba(22, 32, 58, 0.4);
}
.subnav__media { display: block; aspect-ratio: 5 / 2; overflow: hidden; background: var(--stone-deep); }
.subnav__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.subnav__item:hover .subnav__media img { transform: scale(1.045); }
.subnav__row { display: flex; align-items: center; gap: 16px; padding: 22px 24px 24px; }
.subnav__i {
  font-family: var(--serif); font-size: 0.875rem; font-weight: 600;
  color: var(--bronze-deep); flex: 0 0 auto;
}
.subnav__t { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.25; flex: 1 1 auto; }
.subnav__arrow { flex: 0 0 auto; color: var(--bronze-deep); transition: transform .4s var(--ease); }
.subnav__item:hover .subnav__arrow { transform: translateX(4px); }

/* --- Related strip (service only) ----------------------------------------- */
.related { display: flex; flex-wrap: wrap; gap: 12px; }
.related__item {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  padding: 14px 22px; background: var(--white); border: 1px solid var(--rule);
  border-radius: 100px; color: var(--ink); font-size: 0.9375rem;
  transition: border-color .4s var(--ease), transform .4s var(--ease);
}
.related__item:hover { border-color: var(--bronze); transform: translateY(-2px); }
.related__item svg { color: var(--bronze-deep); }

.whytu-sec__prose { max-width: 68ch; }
.whytu-sec__prose p + p { margin-top: 18px; }

.showcase__prose p + p { margin-top: 14px; }
.showcase__prose { margin-top: 14px; }

/* Why It Matters — text + circular image (contained, not full-bleed) */
.whyfig__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) { .whyfig__grid { grid-template-columns: 1fr 0.85fr; gap: 80px; } }
.whyfig__body .label { margin-bottom: 22px; }
.whyfig__prose { margin-top: 22px; }
.whyfig__prose p + p { margin-top: 16px; }
.whyfig__media {
  aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
  background: var(--stone-deep); width: 100%; max-width: 460px; margin-inline: auto;
  box-shadow: 0 30px 60px -34px rgba(22, 32, 58, 0.4);
}
.whyfig__media img { width: 100%; height: 100%; object-fit: cover; }
.ico { display: inline-block; }

/* Full-bleed statement band (mid-page image with a short serif line) */
.statband { position: relative; min-height: 420px; display: flex; align-items: center; overflow: hidden; background: var(--navy-800); }
@media (min-width: 900px) { .statband { min-height: 500px; } }
.statband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.statband::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(14,21,38,0.86) 0%, rgba(14,21,38,0.6) 42%, rgba(14,21,38,0.22) 78%, rgba(14,21,38,0.12) 100%);
}
.statband__inner { position: relative; z-index: 2; width: 100%; }
.statband__eyebrow { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); margin-bottom: 22px; }
.statband__quote { max-width: 20ch; font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.375rem); line-height: 1.24; color: var(--cream); text-wrap: balance; }

/* Featured distinct capability card (spans the key-areas grid) */
.kcard--feature { grid-column: 1 / -1; background: var(--paper-lift); border: 1px solid var(--bronze); border-left: 3px solid var(--bronze); }
.kcard__tag { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 14px; }
.kcard--feature .kcard__title { font-size: 1.375rem; }
.kcard__link { margin-top: 18px; }

/* Merged Explore cards — short description under each */
.subnav__desc { padding: 0 24px 24px; margin-top: -8px; font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
/* Highlighted capability card (in Explore / Related) */
.subnav__item--feature { border-color: var(--bronze); background: var(--paper-lift); box-shadow: 0 22px 40px -30px rgba(168,123,76,0.55); }
.subnav__item--feature .subnav__t { color: var(--bronze-deep); }
.subnav__media { position: relative; }
.subnav__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 12px; border-radius: 100px; background: var(--bronze); color: var(--white);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
/* Multinational dedicated section (navy showcase) */
.mn-sec .showcase__tag { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); margin-bottom: 18px; }
.mn-sec .showcase__body p { color: var(--cream-2); margin-top: 4px; }
.mn-sec .showcase__link { color: var(--champagne); margin-top: 22px; }

/* Multinational — contained feature card (not full-bleed) */
.mn-card { display: grid; gap: 0; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--white); box-shadow: 0 30px 60px -40px rgba(22,32,58,0.4); }
@media (min-width: 820px) { .mn-card { grid-template-columns: 0.82fr 1.18fr; } }
.mn-card__media { position: relative; min-height: 260px; overflow: hidden; background: var(--stone-deep); }
.mn-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mn-card__body { padding: 44px 40px 46px; display: flex; flex-direction: column; justify-content: center; }
.mn-card__tag { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 16px; }
.mn-card__body .h3 { margin-bottom: 16px; }
.mn-card__body .body { color: var(--ink-2); }
.mn-card__body .link { margin-top: 22px; }

/* Non-linked Explore card (cross-cutting areas) */
.subnav__item--static { cursor: default; }
.subnav__item--static:hover { transform: none; border-color: var(--rule); box-shadow: none; }
.subnav__item--static:hover .subnav__media img { transform: none; }

/* ===== Multinational — bespoke page sections ===== */
.mnx-reviews .reviews { grid-template-columns: repeat(2, 1fr); }
.mnx-reviews__intro { margin-top: 20px; color: var(--cream-2); max-width: 40ch; }
@media (max-width: 640px) { .mnx-reviews .reviews { grid-template-columns: 1fr; } }

.mnx-whytu__head { max-width: 42ch; margin-bottom: 48px; }
.mnx-whytu__head .label { margin-bottom: 22px; }
.mnx-cols { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .mnx-cols { grid-template-columns: repeat(3, 1fr); gap: 44px; } }
.mnx-col__rule { display: block; width: 40px; height: 2px; background: var(--bronze); margin-bottom: 20px; }
.mnx-col .body { color: var(--ink-2); }

.mnx-client__grid { display: grid; gap: 40px; }
@media (min-width: 820px) { .mnx-client__grid { grid-template-columns: 0.72fr 1.28fr; gap: 72px; align-items: center; } }
.mnx-client__aside { border-left: 2px solid var(--rule-dark); padding-left: 28px; }
.mnx-client__num { font-family: var(--serif); font-weight: 300; font-size: clamp(3.25rem, 6vw, 5rem); line-height: 1; color: var(--champagne); }
.mnx-client__lbl { margin-top: 12px; color: var(--cream-2); font-size: 1.0625rem; line-height: 1.4; max-width: 18ch; }
.mnx-client__tag { margin-top: 28px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-3); }
.mnx-client__body .h3 { color: var(--cream); margin-bottom: 18px; }
.mnx-client__body .body { color: var(--cream-2); }

/* Contained pill-shaped image band (stadium corners) */
.pillband-sec { padding-block: 0; }
.pillband { width: 100%; aspect-ratio: 3.4 / 1; overflow: hidden; border-radius: 999px; background: var(--stone-deep); box-shadow: 0 30px 60px -42px rgba(22,32,58,0.4); }
.pillband img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.pillband:hover img { transform: scale(1.03); }
@media (max-width: 700px) { .pillband { aspect-ratio: 1.9 / 1; border-radius: 100px; } }

/* FAQ — supporting vertical image in the (otherwise empty) left column */
.faq-sec__media { margin-top: clamp(44px, 4.4vw, 56px); width: 100%; flex: 1 1 0; min-height: 0; overflow: hidden; border-radius: 18px; background: var(--stone-deep); }
.faq-sec__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 960px) { .faq-sec__media { display: none; } }

.pillband--rect { aspect-ratio: 2.6 / 1; border-radius: 24px; }
@media (max-width: 700px) { .pillband--rect { aspect-ratio: 1.8 / 1; border-radius: 18px; } }

/* Multinational — Why TU as 2-col (title + image left, reason items right) */
.mnx-whytu2 { display: grid; gap: 44px; }
@media (min-width: 900px) { .mnx-whytu2 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; } }
.mnx-whytu2__aside .label { margin-bottom: 22px; }
.mnx-whytu2__media { margin-top: 32px; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--stone-deep); }
.mnx-whytu2__media img { width: 100%; height: 100%; object-fit: cover; }
.mnx-whytu2__items { display: flex; flex-direction: column; }
.mnx-item { display: grid; grid-template-columns: auto 1fr; gap: 22px; padding: 28px 0; border-top: 1px solid var(--rule); }
.mnx-item:first-child { border-top: none; padding-top: 4px; }
.mnx-item__n { font-family: var(--serif); font-size: 0.9375rem; font-weight: 600; color: var(--bronze-deep); padding-top: 3px; }
.mnx-item .body { margin: 0; }

/* Generic body lists: 2-col in the narrower right column */
.generic__body .reviews { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .generic__body .reviews { grid-template-columns: 1fr; } }

/* ===== Legal & compliance pages ===== */
.legal-hero { padding-block: 128px 8px; }
@media (min-width: 900px) { .legal-hero { padding-block: 148px 8px; } }
.legal-hero__eyebrow { margin-top: 26px; }
.legal-hero__h1 { margin-top: 16px; max-width: 20ch; }
.legal { padding-block: 32px 96px; }
.legal__body { max-width: 760px; }
.legal__body .h2 { margin-top: 52px; font-size: clamp(1.375rem, 2vw, 1.75rem); }
.legal__body > .body:first-child, .legal__body > .h2:first-of-type { margin-top: 0; }
.legal__body .body { margin-top: 16px; }
.legal__lead { margin-top: 14px; color: var(--ink); }
.legal__list { margin-top: 16px; padding-left: 22px; }
.legal__list li { color: var(--ink-2); line-height: 1.65; margin-top: 8px; list-style: disc; }

/* Contact — consent checkbox, PICS notice, company details */
.consent { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; cursor: pointer; font-size: 0.875rem; line-height: 1.55; color: var(--ink-2); }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--bronze); flex: 0 0 auto; }
.form-pics { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-3); }
.form-pics a { color: var(--bronze-deep); text-decoration: underline; }
.contact__co { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--rule-dark); font-size: 0.9375rem; line-height: 1.65; }
.contact__co p { margin-top: 10px; }
.contact__co-name { font-weight: 600; }
.contact__co a { color: inherit; text-decoration: none; }
.contact__co a:hover { text-decoration: underline; }
.contact__co-lic { margin-top: 16px; font-size: 0.8125rem; color: var(--cream-3); letter-spacing: 0.02em; }

/* Cookie banner (site-wide) */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; max-width: 760px; margin-inline: auto; background: var(--navy); color: var(--cream); border-radius: 14px; padding: 22px 24px; box-shadow: 0 24px 60px -22px rgba(14,21,38,0.6); display: grid; gap: 16px; }
@media (min-width: 760px) { .cookie-banner { grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: 20px 28px; } }
.cookie-banner__text { font-size: 0.875rem; line-height: 1.6; color: var(--cream-2); margin: 0; }
.cookie-banner__text a { color: var(--champagne); text-decoration: underline; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.cookie-banner__btn { background: transparent; border: 1px solid var(--rule-dark); color: var(--cream); border-radius: 100px; padding: 10px 18px; font-family: inherit; font-size: 0.8125rem; cursor: pointer; transition: border-color .3s var(--ease); white-space: nowrap; }
.cookie-banner__btn:hover { border-color: var(--champagne); }
.cookie-banner__link { color: var(--champagne); font-size: 0.8125rem; text-decoration: underline; white-space: nowrap; }
.cookie-banner .btn--sm { white-space: nowrap; }

/* Legible current-page breadcrumb on the navy service hero */
.svchero--bp .crumbs [aria-current] { color: var(--champagne); }

/* Sources & References (cyber page) */
.sources-sec { padding-block: 8px 64px; }
.sources { list-style: none; margin-top: 22px; display: grid; gap: 12px; max-width: 760px; }
.sources a { color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; display: inline-flex; align-items: baseline; gap: 8px; }
.sources a:hover { color: var(--bronze-deep); text-decoration: underline; }
.sources a svg { color: var(--bronze-deep); }

/* ===== Blog / article detail ===== */
.article-hero { padding-block: 128px 8px; }
@media (min-width: 900px) { .article-hero { padding-block: 150px 8px; } }
.article-hero__in { max-width: 780px; }
.article-hero__tag { margin-top: 26px; }
.article-hero__h1 { margin-top: 16px; max-width: 18ch; }
.article-hero__lede { margin-top: 26px; max-width: 60ch; }
.article-meta { margin-top: 26px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.article-lead { margin-top: 44px; }
.article { padding-block: 8px 88px; }
.article__body { max-width: 680px; }
.article__body p { margin-top: 20px; font-size: 1.0625rem; line-height: 1.78; color: var(--ink-2); }
.article__body .h2 { margin-top: 52px; font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.article__list { margin-top: 18px; padding-left: 22px; }
.article__list li { margin-top: 10px; line-height: 1.7; color: var(--ink-2); list-style: disc; }
.article__list li strong { color: var(--ink); }
.article__quote {
  margin: 44px 0; padding: 8px 0 8px 28px; border-left: 3px solid var(--bronze);
  font-family: var(--serif); font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.35; color: var(--ink);
}
.article__cta { margin-top: 40px; }

/* Insights tile links (clickable card) */
.tile__in h3 a { color: inherit; text-decoration: none; }
.tile__in h3 a:hover { color: var(--bronze-deep); }
a.tile__img { display: block; }

/* Article layout — body + sticky right rail (share + subscribe) */
.article__layout { max-width: 1040px; margin-inline: auto; }
@media (min-width: 1000px) {
  .article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
  .article__body { grid-column: 1; grid-row: 1; }
  .article__side { grid-column: 2; grid-row: 1; position: sticky; top: 112px; }
}
.article__side { display: flex; flex-direction: column; gap: 26px; margin-top: 46px; }
@media (min-width: 1000px) { .article__side { margin-top: 0; } }

/* Share — horizontal row */
.share--row { display: flex; align-items: center; gap: 16px; }
.share__label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.share__btns { display: flex; gap: 10px; }
.share__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--rule); border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer;
  text-decoration: none; transition: border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.share__btn:hover { border-color: var(--bronze); color: var(--bronze-deep); transform: translateY(-2px); }
.share__btn svg { width: 17px; height: 17px; }
.share__btn.is-copied { border-color: var(--bronze); color: var(--bronze-deep); }

/* Subscribe — compact sidebar box */
.subscribe--side { padding: 26px 24px 28px; background: var(--paper-lift); border: 1px solid var(--rule); border-radius: 14px; }
.subscribe--side .label { margin-bottom: 14px; }
.subscribe__title { font-size: 1.25rem; line-height: 1.25; }
.subscribe__text { margin-top: 12px; font-size: 0.875rem; line-height: 1.6; color: var(--ink-2); }
.subscribe__form { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.subscribe__form input { width: 100%; padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--white); font-family: inherit; font-size: 0.9375rem; color: var(--ink); }
.subscribe__form input:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.subscribe__form .btn { width: 100%; justify-content: center; }
.subscribe__note { margin-top: 14px; font-size: 0.6875rem; line-height: 1.5; color: var(--ink-3); }
.subscribe__note a { color: var(--bronze-deep); }
.subscribe__done { margin-top: 16px; font-family: var(--serif); font-size: 1.0625rem; color: var(--bronze-deep); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }