/* ===================== TOKENS ===================== */
:root {
  /* Brand palette: true black + metallic gold (matches the Nuvanta crest).
     Names kept as --navy-* to avoid churn; values are now black tones. */
  --navy-900: #070708;   /* page base */
  --navy-800: #0c0c0e;   /* alternating sections */
  --navy-700: #111114;   /* elevated */
  --navy-600: #17171b;   /* cards / surfaces */
  --ink: #f1f1f5;
  --muted: #c2c2cc;
  --muted-dim: #8e8e98;
  --gold: #d4af37;
  --gold-soft: #f4e6ab;
  --gold-deep: #a87d28;
  /* Metallic gold-foil gradients for fills (buttons, mark) and display text */
  --gold-grad: linear-gradient(180deg, #f7ecb8 0%, #e2c25e 32%, #d4af37 56%, #a87d28 100%);
  --gold-grad-diag: linear-gradient(135deg, #f7ecb8 0%, #d4af37 46%, #9c7322 100%);
  --line: rgba(212, 175, 55, 0.24);
  --line-soft: rgba(255, 255, 255, 0.06);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --maxw: 1180px;
  --r: 14px;
}

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

html { scroll-behavior: smooth; overflow-x: clip; }

/* Keep anchored sections clear of the fixed header when jumped to */
:target, [id] { scroll-margin-top: 96px; }

body {
  background: var(--navy-900);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

img { max-width: 100%; display: block; }

/* ===================== TYPE ===================== */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

.body { color: var(--muted); font-size: 1.05rem; margin-bottom: 18px; max-width: 52ch; }

/* Metallic gold-foil text (clipped gradient). Used on display accents. */
.goldtext, em {
  background: var(--gold-grad-diag);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
em { font-style: italic; }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 15px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn--gold { background: var(--gold-grad); color: #1c1402; font-weight: 600; box-shadow: 0 8px 26px rgba(212,175,55,0.16); }
.btn--gold:hover { filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(212,175,55,0.26); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-soft); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

/* ===================== NAV ===================== */
/* Absolute (not fixed): the header overlays the hero at the top of each page for
   the immersive look, but scrolls away with the page — so it can NEVER overlap the
   contact form or any pre-footer CTA on shorter viewports. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* Over the hero: faint scrim so the logo + links stay legible, fading to clear. */
  background: linear-gradient(180deg, rgba(4, 4, 5, 0.6), rgba(4, 4, 5, 0) 100%);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* Once scrolled, the bar frosts (see-through + blur). A soft shadow — not a
   1px border — separates it from the content, so there's no white hairline. */
.nav.is-scrolled {
  background: rgba(8, 8, 10, 0.42);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand__mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--gold-deep);
  background: var(--gold-grad);
  color: #14100a;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(212,175,55,0.2);
}
.brand__name { font-size: 1rem; font-weight: 600; letter-spacing: 0.16em; }
.brand__thin { font-weight: 300; color: var(--muted); }
.brand__crest { height: 42px; width: auto; display: block; }
.footer__logo { height: 66px; width: auto; display: block; }

.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__links a { color: var(--muted); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.nav__links a:hover { color: var(--ink); }
.nav__cta {
  color: var(--gold) !important;
  border: 1px solid var(--line);
  padding: 9px 20px;
  border-radius: 100px;
  transition: background 0.25s, color 0.25s !important;
}
.nav__cta:hover { background: var(--gold); color: var(--navy-900) !important; }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav__toggle span { width: 24px; height: 2px; background: var(--ink); transition: 0.3s; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===================== IMAGE BACKDROPS ===================== */
/* Reusable dimmed full-bleed photo. Pass the image via --img inline style.
   A navy gradient always sits on top so text stays legible and it degrades
   gracefully to solid navy if the photo ever fails to load. */
.imgbg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #050506;
  /* Standardised, subdued black overlay so every photo reads premium and
     keeps text legible regardless of how bright the source image is. */
  background-image:
    linear-gradient(180deg, rgba(4,4,5,0.80), rgba(4,4,5,0.90) 58%, rgba(4,4,5,0.97)),
    var(--img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.imgbg::after { /* subtle vignette for depth + edge falloff */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 32%, transparent 30%, rgba(4,4,5,0.66) 100%);
  pointer-events: none;
}

/* ===================== HERO ===================== */
.hero { position: relative; padding-top: 76px; }
.hero__inner, .credbar { position: relative; z-index: 2; }

/* Looping video hero. The poster image is also set as the media background, so it
   shows instantly and remains a graceful fallback if the video can't load. */
.hero__media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-color: #050506;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__video.is-active { opacity: 1; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,4,5,0.74), rgba(4,4,5,0.86) 58%, rgba(4,4,5,0.96)),
    radial-gradient(ellipse at 50% 32%, transparent 28%, rgba(4,4,5,0.62) 100%);
}
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__glow {
  position: absolute;
  top: -10%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  max-width: 100%;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.18), transparent 62%);
  pointer-events: none;
  filter: blur(8px);
  z-index: 1;
}
.hero__inner { position: relative; padding: 120px 28px 84px; text-align: center; }
.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 30px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}
.hero__lead { color: #cfcfd6; font-size: 1.24rem; line-height: 1.6; max-width: 58ch; margin: 0 auto 46px; text-shadow: 0 1px 18px rgba(0,0,0,0.75); }
.hero__actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.hero__actions .btn { padding: 17px 36px; font-size: 0.95rem; }

.credbar { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,0.012); }
.credbar__inner {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; flex-wrap: wrap;
  padding: 22px 28px;
  font-size: 0.82rem; letter-spacing: 0.04em;
  color: var(--muted-dim);
  text-transform: uppercase;
}
.credbar .dot { color: var(--gold); }

.nav__links a.active { color: var(--gold); }

/* ===================== PAGE-HERO VIDEO (about, contact) =====================
   Same treatment as the homepage hero, applied to the subpage heroes so each page
   carries exactly one clip. The poster is set both on the <video> and as the
   media background, so on phones and for reduced-motion users the still shows and
   script.js never attaches a source — the file is not downloaded at all. */
.subhero__media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-color: #050506;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
}
.subhero__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg, rgba(4,4,5,0.80), rgba(4,4,5,0.90) 58%, rgba(4,4,5,0.97)),
    radial-gradient(ellipse at 50% 32%, transparent 30%, rgba(4,4,5,0.66) 100%);
  pointer-events: none;
}
.bgvideo {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.bgvideo.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bgvideo { display: none; } }

/* ===================== SUBPAGE HERO ===================== */
.subhero {
  position: relative;
  min-height: 62vh;
  display: grid;
  align-items: center;
  padding: 150px 0 90px;
  overflow: hidden;
}
.subhero__inner { position: relative; z-index: 2; max-width: 760px; }
.subhero .eyebrow { margin-bottom: 20px; }
.subhero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}
.subhero p { color: #c7c7cf; font-size: 1.12rem; max-width: 58ch; text-shadow: 0 1px 18px rgba(0,0,0,0.75); }
.subhero__crumb { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--muted-dim); margin-bottom: 26px; }
.subhero__crumb a { color: var(--muted-dim); text-decoration: none; }
.subhero__crumb a:hover { color: var(--gold); }

/* ===================== QUOTE BAND (photo) ===================== */
.band { position: relative; padding: 130px 0; text-align: center; overflow: hidden; }
.band .imgbg {
  background-image:
    linear-gradient(180deg, rgba(4,4,5,0.84), rgba(4,4,5,0.90)),
    var(--img);
}
.band__inner { position: relative; z-index: 2; max-width: 880px; margin: 0 auto; }
.band blockquote {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.band blockquote em { color: var(--gold-soft); }
.band cite { display: block; margin-top: 26px; font-style: normal; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

/* ===================== SECTIONS ===================== */
.section { padding: 110px 0; }
.section--alt { background: linear-gradient(180deg, var(--navy-800), var(--navy-900)); }
.section__head { text-align: center; max-width: 640px; margin: 0 auto 64px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 72px; }
.pillar {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 38px 32px;
  background: rgba(255,255,255,0.014);
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.pillar:hover { border-color: var(--line); transform: translateY(-4px); background: rgba(212,175,55,0.05); }
.pillar__num { font-family: var(--serif); font-size: 1.4rem; display: inline-block; background: var(--gold-grad-diag); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pillar h3 { font-family: var(--serif); font-weight: 500; font-size: 1.5rem; margin: 14px 0 12px; }
.pillar p { color: var(--muted); font-size: 0.98rem; }

/* Dual-named activity cards: client-facing title, regulated activity name beneath.
   The regulated name is what the DFSA licence covers, so it stays on the page. */
.pillar--dual h3 { margin-bottom: 5px; }
.pillar__reg {
  display: block;
  color: var(--gold);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.5;
  margin-bottom: 14px;
}

/* cards */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.card {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 44px 40px;
  background: linear-gradient(160deg, rgba(212,175,55,0.06), rgba(255,255,255,0.012));
  transition: border-color 0.3s, transform 0.3s;
}
.card:hover { border-color: var(--line); transform: translateY(-4px); }
.card__top { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.card__index {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1px solid var(--gold-deep);
  background: var(--gold-grad);
  color: #14100a;
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(212,175,55,0.18);
}
.card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.8rem; }
.card > p { color: var(--muted); margin-bottom: 24px; }
.card__list { list-style: none; margin-bottom: 28px; }
.card__list li { color: var(--ink); padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 0.95rem; }
.card__list li::before { content: "— "; color: var(--gold); }
.card__link { color: var(--gold); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: gap 0.2s; }
.card__link:hover { color: var(--gold-soft); }

/* stats */
.stats { padding: 70px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--navy-800); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat__num { display: block; font-family: var(--serif); font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 8px; background: var(--gold-grad-diag); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.stat__label { color: var(--muted-dim); font-size: 0.85rem; letter-spacing: 0.03em; }

/* checklist */
.checklist { list-style: none; }
.checklist li { padding: 20px 0; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 1.02rem; }
.checklist li strong { color: var(--ink); font-weight: 500; display: block; margin-bottom: 2px; }
.checklist li::before { content: ""; }

/* posts */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 34px 30px;
  background: rgba(255,255,255,0.014);
  transition: border-color 0.3s, transform 0.3s;
  cursor: pointer;
}
.post:hover { border-color: var(--line); transform: translateY(-4px); }
.post__tag { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.post h3 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 16px 0 12px; line-height: 1.2; }
.post p { color: var(--muted); font-size: 0.95rem; margin-bottom: 20px; }
.post__meta { color: var(--muted-dim); font-size: 0.82rem; }

/* ===================== CTA ===================== */
/* No overflow:hidden + no fixed height => the heading can never be clipped.
   The glow is fully contained within the section bounds and sits behind. */
.cta { position: relative; padding: 140px 0 130px; text-align: center; scroll-margin-top: 96px; }
.cta__glow {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 760px; height: 380px; max-width: 100%; z-index: 0;
  background: radial-gradient(ellipse at center bottom, rgba(212,175,55,0.16), transparent 66%);
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 1; max-width: 760px; }
.cta__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; margin-bottom: 18px; }
.cta__lead { color: var(--muted); font-size: 1.1rem; margin-bottom: 38px; }
.cta__form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.cta__form input {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  padding: 15px 24px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
  min-width: 240px;
}
.cta__form input::placeholder { color: var(--muted-dim); }
.cta__form input:focus { outline: none; border-color: var(--gold); }
.cta__note { color: var(--muted-dim); font-size: 0.85rem; }

/* ===================== FOOTER ===================== */
.footer { background: var(--navy-900); border-top: 1px solid var(--line-soft); padding: 70px 0 36px; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 2fr; gap: 56px; }
.footer__brand p { color: var(--muted-dim); font-size: 0.95rem; margin-top: 16px; max-width: 36ch; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.footer__cols h4 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.footer__cols a, .footer__cols span { display: block; color: var(--muted); text-decoration: none; font-size: 0.92rem; padding: 5px 0; }
.footer__cols a:hover { color: var(--ink); }
/* Icon plus a visible label — an unlabelled glyph reads as a bare URL to anyone
   whose SVG doesn't render, and gives screen readers nothing to announce. */
.footer__social {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 20px; padding: 10px 18px;
  border: 1px solid var(--line-soft); border-radius: 100px;
  color: var(--muted); text-decoration: none;
  font-size: 0.86rem;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.footer__social:hover { color: var(--gold); border-color: var(--line); background: rgba(212,175,55,0.05); }
.footer__social svg { width: 18px; height: 18px; flex: none; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px 24px;
  margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--line-soft);
  color: var(--muted-dim); font-size: 0.82rem;
}
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal-links a { color: var(--muted-dim); text-decoration: none; transition: color 0.25s ease; }
.footer__legal-links a:hover { color: var(--gold); }
/* Scripted by the content guide but with no page behind them yet. Marked so they
   cannot ship as silent dead links — remove .is-pending once each page exists. */
.footer__legal-links a.is-pending { border-bottom: 1px dashed rgba(212,175,55,0.45); cursor: help; }
.footer__legal-links a.is-pending::after { content: " ⚑"; color: var(--gold); }

/* ===================== SUBPAGE CONTENT ===================== */
.prose { max-width: 720px; }
.prose p { color: var(--muted); font-size: 1.08rem; margin-bottom: 22px; }
.prose p strong { color: var(--ink); font-weight: 500; }

/* alternating feature rows with index art */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 70px 0; border-top: 1px solid var(--line-soft); }
.feature:first-of-type { border-top: none; }
.feature__art {
  position: relative;
  min-height: 320px;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.feature__art .imgbg { z-index: 0; }
.feature__art .imgbg { background-image: linear-gradient(160deg, rgba(4,4,5,0.50), rgba(4,4,5,0.84)), var(--img); transition: transform 0.7s ease; }
.feature__art:hover .imgbg { transform: scale(1.04); }
.feature__tag { position: absolute; z-index: 2; bottom: 22px; left: 24px; font-family: var(--serif); font-size: 2.4rem; background: var(--gold-grad-diag); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.feature h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 16px; }
.feature p { color: var(--muted); margin-bottom: 16px; }
.feature ul { list-style: none; margin-top: 18px; }
.feature li { color: var(--ink); padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 0.96rem; }
.feature li::before { content: "— "; color: var(--gold); }
.feature--rev .feature__art { order: 2; }

/* insights list */
.articles { display: grid; gap: 0; }
.article { display: grid; grid-template-columns: 160px 1fr; gap: 30px; align-items: center; padding: 32px 20px; margin: 0 -20px; border-top: 1px solid var(--line-soft); border-radius: 12px; text-decoration: none; color: inherit; transition: background 0.35s ease, transform 0.35s ease; }
.article:hover { background: rgba(212,175,55,0.06); transform: translateX(6px); }
.article:last-child { border-bottom: 1px solid var(--line-soft); }
.article__tag { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.article h3 { font-family: var(--serif); font-weight: 500; font-size: 1.55rem; line-height: 1.15; transition: color 0.3s ease; }
.article:hover h3 { color: var(--gold-soft); }
.article p { color: var(--muted); font-size: 0.95rem; margin-top: 6px; }
.article__meta { color: var(--muted-dim); font-size: 0.85rem; white-space: nowrap; }

/* contact layout */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.contact__form { display: grid; gap: 16px; }
.contact__form label { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 6px; display: block; }
.contact__form input, .contact__form textarea, .contact__form select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.98rem;
}
.contact__form textarea { min-height: 130px; resize: vertical; }
.contact__form input:focus, .contact__form textarea:focus, .contact__form select:focus { outline: none; border-color: var(--gold); }
/* Render the native dropdown list dark (otherwise it's white text on a white popup) */
.contact__form select { color-scheme: dark; }
.contact__form select option { background-color: #111114; color: var(--ink); }
.contact__info { border: 1px solid var(--line-soft); border-radius: var(--r); padding: 38px 36px; background: rgba(255,255,255,0.014); }
.contact__info h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin-bottom: 20px; }
.contact__row { padding: 18px 0; border-top: 1px solid var(--line-soft); }
.contact__row span { display: block; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.contact__row p { color: var(--muted); font-size: 1rem; }
.contact__row a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact__row a:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* LinkedIn link beneath the contact section */
.contact__connect { text-align: center; margin-top: 50px; }
.linkedin-link {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--muted); text-decoration: none; font-size: 0.98rem; letter-spacing: 0.01em;
  padding: 13px 28px; border: 1px solid var(--line-soft); border-radius: 100px;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.linkedin-link:hover { color: var(--gold); border-color: var(--line); background: rgba(212,175,55,0.05); }
.linkedin-link__icon { width: 20px; height: 20px; flex: none; }

/* ===================== REVEAL ANIM ===================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 920px) {
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .pillars { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .posts { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .footer__inner { grid-template-columns: 1fr; gap: 36px; }
  .feature { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .feature--rev .feature__art { order: 0; }
  .contact { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 720px) {
  .container { padding: 0 20px; }

  /* mobile nav */
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed;
    inset: 76px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--navy-800);
    border-bottom: 1px solid var(--line-soft);
    padding: 12px 20px 24px;
    transform: translateY(-130%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 24px 40px rgba(0,0,0,0.4);
  }
  .nav.is-open .nav__links { transform: translateY(0); }
  .nav__links a { width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line-soft); font-size: 1.05rem; }
  .nav__cta { border: none !important; padding: 16px 0 !important; border-radius: 0; }
  .nav__cta:hover { background: none; color: var(--gold-soft) !important; }

  .section { padding: 76px 0; }
  .hero__inner { padding: 80px 20px 60px; }
  .cta { padding: 90px 0; }
  .cta__form input { min-width: 100%; }
  .cta__form .btn { width: 100%; justify-content: center; }
  .footer__bottom { flex-direction: column; }
  .credbar__inner { gap: 10px; font-size: 0.74rem; }
  .subhero { min-height: 52vh; padding: 120px 0 64px; }
  .article { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
  .article__meta { margin-top: 4px; }

  /* Roomier typography on phones — looser leading + more spacing so copy
     doesn't read cramped on a narrow screen. */
  .hero__title { line-height: 1.14; }
  .hero__lead { font-size: 1.1rem; line-height: 1.8; margin-bottom: 36px; }
  .h2 { line-height: 1.18; }
  .subhero h1 { line-height: 1.14; }
  .subhero p { line-height: 1.8; }
  .body, .prose p { line-height: 1.85; margin-bottom: 22px; }
  .card > p, .card__list li, .pillar p, .post p,
  .feature p, .feature li, .article p, .cta__lead { line-height: 1.8; }
  .checklist li { line-height: 1.75; padding: 18px 0; }
  .card__list li, .feature li { padding-top: 13px; padding-bottom: 13px; }
  .section__head { margin-bottom: 48px; }
  .cta__lead { font-size: 1.04rem; }
}

/* ===================== HOMEPAGE SECTION PREVIEWS =====================
   The homepage carries one real section from each inner page — About Us,
   Services & Solutions, Markets & Clients, Contact — each numbered and
   closing with a button through to the full page. */
/* Section number + page name. Same type scale as .eyebrow so it reads as part
   of the existing system rather than a second, competing label style. */
.preview__label {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 44px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.preview__label span {
  font-family: var(--serif); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.06em;
  background: var(--gold-grad-diag); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.preview__label--center { justify-content: center; border-bottom: none; padding-bottom: 0; margin-bottom: 20px; }

/* One shared header for every preview block — left-aligned, same rhythm each
   time, so the four sections read as one series instead of four templates. */
.preview__head { max-width: 760px; margin-bottom: 48px; }
.preview__head .h2 { margin-bottom: 0; }
.preview__head .body { margin: 20px 0 0; }

/* Secondary label inside a block (e.g. "Who we serve" above the client cards) */
.preview__sub { margin-top: 60px; }
.preview__sub .eyebrow { margin-bottom: 26px; }

/* Pillars sitting directly under their own label don't need the standalone
   top gap the class carries on the inner pages. */
.pillars--flush { margin-top: 0; }

.section__cta { margin-top: 48px; text-align: center; }
.cta .section__cta { margin-top: 32px; }

/* The homepage closes on the contact block; a hairline keeps it from bleeding
   into the section above it, which shares the same background. */
.cta--divided { border-top: 1px solid var(--line-soft); }

/* ===================== TODO PLACEHOLDERS =====================
   Visible, deliberately unmissable stubs for copy that needs client sign-off.
   Every one of these must be resolved or removed before the site goes live —
   they are styled to be impossible to miss in review for exactly that reason. */
.todo {
  border: 1px dashed rgba(212, 175, 55, 0.5);
  border-radius: 10px;
  padding: 14px 16px;
  background: rgba(212, 175, 55, 0.05);
  color: var(--muted-dim);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.6;
}
.todo::before {
  content: "⚑ ";
  font-style: normal;
  color: var(--gold);
}
.product .todo, .partner-card .todo { font-size: 0.8rem; padding: 10px 12px; }
.todo a { color: var(--gold); }
/* Placeholder standing in for a removed pull-quote: centred in the photo band. */
.todo--band { max-width: 70ch; margin: 0 auto; text-align: left; font-size: 0.92rem; }
/* Small flag beside content that is live but still needs confirming. */
.todo--inline { margin-top: 10px; font-size: 0.78rem; padding: 9px 12px; }

/* ===================== ONBOARDING STEPS ===================== */
/* Five across on desktop, straight to stacked on smaller screens — same rule as
   the activities grid, so a step can never be orphaned on a row of its own. */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; counter-reset: step; }
.step {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 32px 24px;
  background: rgba(255,255,255,0.014);
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
}
.step:hover { border-color: var(--line); transform: translateY(-4px); background: rgba(212,175,55,0.05); }
.step__num {
  font-family: var(--serif); font-size: 1.4rem; display: inline-block;
  background: var(--gold-grad-diag); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.step h3 { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; margin: 14px 0 12px; }
.step p { color: var(--muted); font-size: 0.95rem; }

/* ===================== PRODUCT TILES ===================== */
/* Replaces the bare pill grid: each product now carries a line of description. */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.product {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 26px 24px;
  background: rgba(255,255,255,0.014);
  transition: border-color 0.3s, transform 0.3s;
}
.product:hover { border-color: var(--line); transform: translateY(-3px); }
.product h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin-bottom: 12px; }
.product p { color: var(--muted); font-size: 0.9rem; }
.product--accent { border-color: var(--gold-deep); background: rgba(212,175,55,0.07); }
.product--accent h3 { color: var(--gold-soft); }

/* ===================== DIAGRAM TEXT EQUIVALENT ===================== */
.model__legend { list-style: none; margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.model__legend li {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}
.model__legend strong {
  display: block;
  color: var(--gold-soft);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Highlighted aside (Services preview → business model).
   Body copy at .pillar p size; link at .card__link size. */
.note-strip {
  margin-top: 44px; padding: 34px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(212,175,55,0.04);
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; text-align: center;
}
.note-strip p {
  color: var(--muted); font-family: var(--sans);
  font-size: 1.05rem; line-height: 1.65;
  max-width: 76ch;
}
.note-strip p strong { color: var(--gold-soft); font-weight: 500; }
.note-strip__link {
  color: var(--gold); text-decoration: none;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 500;
  white-space: nowrap;
}
.note-strip__link:hover { color: var(--gold-soft); }

/* Partner logo band (Markets preview) — grayscale, colouring on hover */
.logo-strip { margin-top: 66px; padding-top: 42px; border-top: 1px solid var(--line-soft); }
.logo-strip__caption {
  text-align: center; color: var(--muted-dim);
  font-family: var(--sans); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 32px;
}
.logo-strip__row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 34px; }
.logo-strip__item {
  width: 76px; height: 76px;
  border-radius: 50%; overflow: hidden;
  background: #0e0e10; border: 1px solid var(--line-soft);
}
.logo-strip__item img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1); opacity: 0.66;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.logo-strip__item:hover img { filter: none; opacity: 1; }

/* ===================== PEOPLE — founders (alternating, photo) ===================== */
.feature__art--photo { min-height: 0; }
.feature__art--photo img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; display: block; transition: transform 0.7s ease; }
.feature__art--photo:hover img { transform: scale(1.04); }
.feature__role { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 14px; display: block; }

/* ===================== PEOPLE — shareholders (compact grid) ===================== */
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.person-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  overflow: hidden;
  background: rgba(255,255,255,0.014);
  transition: border-color 0.3s, transform 0.3s;
}
.person-card:hover { border-color: var(--line); transform: translateY(-4px); }
.person-card__photo { aspect-ratio: 4 / 5; overflow: hidden; }
.person-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-card__body { padding: 22px 22px 26px; }
.person-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; margin-bottom: 4px; }
.person-card__role { color: var(--gold); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 12px; }
.person-card p { color: var(--muted); font-size: 0.88rem; }

/* ===================== ACTIVITIES grid (the five business activities) =====================
   Fixed five columns, then straight to a single column — never an in-between
   count, so a card can never end up stranded alone on a second row. */
.activities-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.activities-grid .pillar { padding: 32px 24px; }
.activities-grid .pillar h3 { font-size: 1.25rem; }
@media (max-width: 1080px) {
  .activities-grid { grid-template-columns: 1fr; }
  .activities-grid .pillar { padding: 32px 28px; }
}

/* ===================== REGION MAP (content guide §5) =====================
   Stylised, not cartographic: abstract landmasses in near-black with gold markers.
   Labels reveal on hover AND on keyboard focus, so the map is operable without a
   pointer. The pill list beneath it carries the same five markets as plain text. */
.regionmap {
  position: relative;
  max-width: 900px;
  margin: 0 auto 44px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background:
    radial-gradient(ellipse at 58% 42%, rgba(212,175,55,0.07), transparent 62%),
    rgba(255,255,255,0.014);
  padding: 18px;
}
.regionmap svg { width: 100%; height: auto; display: block; overflow: visible; }
.regionmap__land path {
  fill: rgba(255,255,255,0.05);
  stroke: rgba(255,255,255,0.09);
  stroke-width: 1;
}

.marker { cursor: pointer; outline: none; }
.marker__dot {
  fill: var(--gold);
  stroke: rgba(4,4,5,0.85);
  stroke-width: 2;
  transition: r 0.25s ease, fill 0.25s ease;
}
.marker--accent .marker__dot { fill: var(--gold-soft); }
.marker__pulse {
  fill: rgba(212,175,55,0.16);
  stroke: rgba(212,175,55,0.4);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0.7;
}
.marker:hover .marker__pulse,
.marker:focus-visible .marker__pulse { opacity: 1; transform: scale(1.25); }
.marker:hover .marker__dot,
.marker:focus-visible .marker__dot { fill: var(--gold-soft); }

/* Label bubble, hidden until the marker is hovered or focused. */
.marker__tip { opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; transform: translateY(4px); }
.marker:hover .marker__tip,
.marker:focus-visible .marker__tip { opacity: 1; transform: translateY(0); }
.marker__tip rect { fill: rgba(10,10,12,0.95); stroke: var(--line); stroke-width: 1; }
.marker__tip text {
  fill: var(--gold-soft);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-anchor: middle;
  text-transform: uppercase;
}
/* Keyboard users get a visible ring on the whole marker group. */
.marker:focus-visible .marker__pulse { stroke: var(--gold); stroke-width: 2; }

@media (prefers-reduced-motion: reduce) {
  .marker__pulse, .marker__dot, .marker__tip { transition: none; }
}

/* Below ~720px the markers sit too close to tap apart and the labels overlap.
   The pill list beneath carries the same information, so the map steps aside. */
@media (max-width: 720px) {
  .regionmap { display: none; }
}

/* ===================== PRODUCTS / MARKETS tag grid ===================== */
.tag-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.tag-pill {
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 14px 26px;
  font-size: 0.92rem;
  color: var(--ink);
  background: rgba(212,175,55,0.03);
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.tag-pill:hover { border-color: var(--gold); background: rgba(212,175,55,0.08); transform: translateY(-2px); }
.tag-pill--accent { border-color: var(--gold-deep); background: rgba(212,175,55,0.1); color: var(--gold-soft); font-weight: 500; }

/* ===================== BUSINESS MODEL diagram ===================== */
.model { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.model__diagram { width: 100%; height: auto; }
.model__diagram .node-fill { fill: var(--gold-grad, #d4af37); }
.model__diagram ellipse.node { fill: #0e0e10; stroke: var(--gold-deep); stroke-width: 2; }
.model__diagram .node-label { fill: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 20px; text-anchor: middle; }
.model__diagram .edge-label { fill: var(--gold-soft); font-family: var(--sans); font-size: 15px; text-anchor: middle; letter-spacing: 0.01em; }
.model__diagram .edge-line { stroke: var(--gold-deep); stroke-width: 1.6; fill: none; }

/* ===================== STRATEGIC PARTNERS ===================== */
.partners-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; text-align: center; }
.partner-card { padding: 10px; }
.partner-card__logo {
  width: 104px; height: 104px; margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  background: #0e0e10;
  border: 1px solid var(--line-soft);
}
.partner-card__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; margin-bottom: 4px; }
.partner-card p { color: var(--muted-dim); font-size: 0.82rem; }

/* Partner cards carrying a description sit as bordered cards on a four-up grid
   (four partners, not five — Swissquote and Swissquote eForex are one institution). */
.partners-grid--described { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.partners-grid--described .partner-card {
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  padding: 30px 24px;
  background: rgba(255,255,255,0.014);
  display: flex; flex-direction: column; align-items: center;
  transition: border-color 0.3s, transform 0.3s;
}
.partners-grid--described .partner-card:hover { border-color: var(--line); transform: translateY(-4px); }
.partner-card__where {
  color: var(--gold); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 14px;
}

/* Jurisdiction grouping (content guide §8) */
.partners-jurisdiction {
  font-family: var(--sans);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted-dim);
  margin-bottom: 22px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.partners-jurisdiction + .partners-grid { margin-bottom: 52px; }
.partners-grid--uae, .partners-grid--ch { grid-template-columns: repeat(2, 1fr); max-width: 780px; }

/* Grayscale until hover, per the guide's logo treatment. */
.partner-card__logo img {
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
.partner-card:hover .partner-card__logo img { filter: none; opacity: 1; }

@media (max-width: 720px) {
  .partners-grid--uae, .partners-grid--ch { grid-template-columns: 1fr; }
}

/* ===================== FOOTER — sitemap redesign ===================== */
.footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer__brand p { color: var(--muted-dim); font-size: 0.95rem; margin-top: 16px; max-width: 34ch; }
.footer__nav h4 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.footer__nav a { display: block; color: var(--muted); text-decoration: none; font-size: 0.9rem; padding: 5px 0; }
.footer__nav a:hover { color: var(--ink); }

.footer__contact {
  margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.footer__contact h5 { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 10px; }
.footer__contact p { color: var(--muted); font-size: 0.92rem; line-height: 1.7; }
.footer__contact a { color: var(--muted); text-decoration: none; }
.footer__contact a:hover { color: var(--gold); }

.footer__legal { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.footer__legal p { color: var(--muted-dim); font-size: 0.76rem; line-height: 1.8; max-width: 100ch; }

/* ===================== CONTACT — form + office details ===================== */
.contact__form { gap: 20px; align-content: start; }
.label-opt { color: var(--muted-dim); text-transform: none; letter-spacing: 0; }
.contact__disclaimer { color: var(--muted-dim); font-size: 0.82rem; line-height: 1.7; }

/* Static map image, served locally, wrapped in a link out to Google Maps — the
   visual without a third-party script on a page that collects personal data. */
.contact__map { display: block; margin-top: 26px; text-decoration: none; }
.contact__map img { width: 100%; border-radius: 12px; display: block; }
.contact__map-cap {
  display: block; margin-top: 12px; text-align: center;
  color: var(--gold); font-size: 0.88rem; font-weight: 500;
  transition: color 0.25s ease;
}
.contact__map:hover .contact__map-cap { color: var(--gold-soft); }
.contact__map-stub {
  border: 1px dashed rgba(212, 175, 55, 0.45);
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg, rgba(212,175,55,0.035) 0 12px, transparent 12px 24px),
    rgba(255,255,255,0.02);
  padding: 34px 24px;
  text-align: center;
}
.contact__map-stub span {
  display: block; color: var(--gold);
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 10px;
}
.contact__map-stub p { color: var(--muted); font-size: 0.95rem; margin-bottom: 14px; }
.contact__map-stub a { color: var(--gold); text-decoration: none; font-size: 0.88rem; font-weight: 500; }
.contact__map-stub a:hover { color: var(--gold-soft); }

/* Logo strip used inside its own section (homepage) — the section header already
   provides the separation, so the strip drops its own rule and top gap. */
.logo-strip--flush { margin-top: 0; padding-top: 0; border-top: none; }

@media (max-width: 420px) {
  .stats__grid { grid-template-columns: 1fr; }
  .brand__thin { display: none; }
}

/* ===================== RESPONSIVE — new sections ===================== */
@media (max-width: 1080px) {
  .steps { grid-template-columns: 1fr; }
  .step { padding: 30px 28px; }
  .partners-grid--described { grid-template-columns: 1fr 1fr; gap: 20px; }
  .model__legend { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .model__legend li { border-top: 1px solid var(--line-soft); padding: 16px 0; }
  .model__legend li:first-child { border-top-color: var(--line); }
}
@media (max-width: 920px) {
  .logo-strip__row { gap: 22px; }
  .people-grid { grid-template-columns: 1fr 1fr; }
  .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
  .model { grid-template-columns: 1fr; gap: 32px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .footer__contact { grid-template-columns: 1fr; gap: 24px; }

}
@media (max-width: 720px) {
  .people-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .partners-grid { grid-template-columns: 1fr 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: 30px; }

  /* Homepage previews */
  .preview__label { margin-bottom: 34px; letter-spacing: 0.18em; }
  .note-strip { padding: 26px 24px; }
  .logo-strip { margin-top: 50px; }
  .logo-strip__item { width: 62px; height: 62px; }
  .section__cta { margin-top: 42px; }
  .section__cta .btn { width: 100%; justify-content: center; }
  .partners-grid--described { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }

  /* The business-model triangle is unreadable below roughly 700px — the labels
     scale with the viewBox and fall under about 7px. The legend beneath it
     carries exactly the same three relationships as text, so on phones we show
     that alone rather than an illegible diagram. */
  .model__diagram { display: none; }
  .model__legend { margin-top: 0; }
}
@media (max-width: 480px) {
  .people-grid { grid-template-columns: 1fr; }
  .partners-grid { grid-template-columns: 1fr 1fr; }
}