/* ==========================================================================
   APEX PROGRESSIVE SOLUTIONS
   Light, card-based design system
   Palette : #916027 / #000000 / #FFFFFF only
   Type    : Poppins throughout
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* The three brand colours */
  --gold:  #916027;
  --black: #000000;
  --white: #FFFFFF;

  /* #916027 at reduced opacity — same hue, never a new colour */
  --gold-04: rgba(145, 96, 39, 0.04);
  --gold-08: rgba(145, 96, 39, 0.08);
  --gold-12: rgba(145, 96, 39, 0.12);
  --gold-20: rgba(145, 96, 39, 0.20);
  --gold-35: rgba(145, 96, 39, 0.35);

  /* Neutrals — pure black/white mixes only */
  --bg:       #FFFFFF;
  --bg-soft:  #F9F9F9;
  --bg-soft2: #F2F2F2;
  --ink-900:  #0A0A0A;
  --ink-800:  #111111;

  --text:       #000000;
  --text-mute:  rgba(0, 0, 0, 0.60);
  --text-faint: rgba(0, 0, 0, 0.42);
  --line:       rgba(0, 0, 0, 0.09);
  --line-soft:  rgba(0, 0, 0, 0.06);

  --on-ink:       #FFFFFF;
  --on-ink-mute:  rgba(255, 255, 255, 0.62);
  --on-ink-faint: rgba(255, 255, 255, 0.40);
  --line-ink:     rgba(255, 255, 255, 0.12);

  /* Type */
  --font: "Poppins", "Century Gothic", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.05rem, 3.7vw, 3.2rem);
  --fs-h1:   clamp(2.1rem, 4.2vw, 3.4rem);
  --fs-h2:   clamp(1.8rem, 3.1vw, 2.7rem);
  --fs-h3:   clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-lead: clamp(0.99rem, 1.15vw, 1.08rem);
  --fs-micro: 0.72rem;

  --track-wide: 0.16em;
  --track-tight: -0.022em;

  /* Space */
  --shell: 1200px;
  --shell-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 7.5vw, 7rem);

  /* Shape */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 100px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px -6px rgba(0,0,0,.08);
  --shadow-md: 0 2px 4px rgba(0,0,0,.03), 0 16px 34px -18px rgba(0,0,0,.16);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.03), 0 30px 60px -28px rgba(0,0,0,.22);
  --shadow-gold: 0 14px 30px -14px rgba(145,96,39,.45);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.4s;

  --header-h: 84px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--track-tight);
}
p, blockquote, figure { margin: 0; }

::selection { background: var(--gold); color: var(--white); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 100px; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: var(--shell-narrow); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 5.5vw, 4.5rem); }

.section--light,
.section--dark  { background: var(--bg); color: var(--text); }
.section--soft,
.section--cream,
.section--dark2 { background: var(--bg-soft); color: var(--text); }
.section--ink   { background: var(--ink-900); color: var(--on-ink); }

.section--ink p, .section--ink .lead { color: var(--on-ink-mute); }

.grid { display: grid; gap: clamp(1.15rem, 2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 660px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   4. TYPE
   -------------------------------------------------------------------------- */
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.012em; line-height: 1.45; }

/* Two-tone heading emphasis — the accent half of a section title */
.gold-text { color: var(--gold); }

.lead {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-mute);
  max-width: 62ch;
}
.section--ink .lead { color: var(--on-ink-mute); }

/* Pill label above a section title */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.42rem 1rem;
  border-radius: var(--r-pill);
  background: var(--gold-08);
  border: 1px solid var(--gold-20);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.section--ink .eyebrow {
  background: rgba(255,255,255,.06);
  border-color: var(--line-ink);
  color: var(--white);
}

.section-head { max-width: 720px; margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: 1.15rem; }
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }

.rule { width: 100%; height: 1px; background: var(--line); border: 0; margin: 0; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-py: 0.95rem;
  --btn-px: 1.85rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--btn-py) var(--btn-px);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }

.btn--gold {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover { background: var(--black); border-color: var(--black); box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); }

.btn--dark { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--dark:hover { background: var(--gold); border-color: var(--gold); }

.btn--ghost { background: var(--white); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.section--ink .btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--line-ink);
  box-shadow: none;
}
.section--ink .btn--ghost:hover { background: var(--white); color: var(--black); border-color: var(--white); }

.btn--sm { --btn-py: 0.72rem; --btn-px: 1.35rem; font-size: 0.8rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.center .btn-row, .btn-row.center { justify-content: center; }

.link-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold);
  transition: gap var(--dur) var(--ease);
}
.link-gold svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.link-gold:hover { gap: 0.75rem; }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink-900);
  color: var(--on-ink-mute);
  font-size: 0.76rem;
  font-weight: 400;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 40px;
}
.topbar__list { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 0.45rem; transition: color 0.3s ease; }
.topbar__item svg { width: 13px; height: 13px; color: var(--gold); flex: none; }
a.topbar__item:hover { color: var(--white); }
.topbar__tag {
  color: var(--white);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-size: 0.68rem;
  font-weight: 600;
}
@media (max-width: 900px) { .topbar { display: none; } }

.header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid transparent;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.header.is-stuck {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -18px rgba(0,0,0,.3);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: var(--header-h);
  transition: min-height 0.35s var(--ease);
}
.header.is-stuck .header__inner { min-height: 70px; }

.brand { display: flex; align-items: center; flex: none; }
/* Horizontal lockup, gold-on-black — keeps its own dark chip on light UI. */
.brand img {
  height: 50px; width: auto;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  background: var(--black);
  transition: height 0.35s var(--ease);
}
.header.is-stuck .brand img { height: 41px; }
@media (max-width: 560px) { .brand img { height: 38px; padding: 6px 9px; } }

.nav { display: flex; align-items: center; gap: 2.15rem; }
.nav__link {
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  padding-block: 0.4rem;
  transition: color 0.3s ease;
}
.nav__link::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.nav__link:hover { color: var(--gold); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--gold); }
.nav__link.is-active::after { transform: scaleX(1); }

.header__cta { display: flex; align-items: center; gap: 0.85rem; flex: none; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  position: relative; flex: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.burger span {
  position: absolute; left: 50%;
  width: 17px; height: 2px;
  border-radius: 2px;
  background: var(--black);
  transform: translateX(-50%);
  transition: transform 0.4s var(--ease), opacity 0.25s ease, width 0.4s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; width: 12px; }
.burger span:nth-child(3) { top: 27px; }
.burger:hover { border-color: var(--gold); }
body.nav-open .burger span:nth-child(1) { transform: translateX(-50%) translateY(6px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
  .nav, .header__cta .btn { display: none; }
  .burger { display: block; }
}

.drawer {
  position: fixed; inset: 0; z-index: 890;
  background: var(--white);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  transform: translateY(-100%);
  transition: transform 0.55s var(--ease);
  overflow-y: auto;
  visibility: hidden;
}
body.nav-open .drawer { transform: translateY(0); visibility: visible; }

.drawer__nav { display: flex; flex-direction: column; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: var(--track-tight);
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), color 0.3s ease;
}
.drawer__link::after {
  content: attr(data-n);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold);
}
body.nav-open .drawer__link { opacity: 1; transform: none; }
.drawer__link:hover, .drawer__link.is-active { color: var(--gold); }
.drawer__meta { display: flex; flex-direction: column; gap: 0.8rem; color: var(--text-mute); font-size: 0.9rem; }
.drawer__meta a { display: inline-flex; align-items: center; gap: 0.6rem; overflow-wrap: anywhere; }
.drawer__meta svg { width: 15px; height: 15px; color: var(--gold); flex: none; }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(1100px 460px at 78% -8%, var(--gold-12), transparent 62%),
    linear-gradient(180deg, var(--gold-04), transparent 46%),
    var(--bg);
}
.hero__grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.25rem, 4.5vw, 4rem);
  align-items: center;
}
@media (max-width: 940px) {
  /* Headline leads on small screens; the illustration follows it. */
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
}

.hero h1 { font-size: var(--fs-hero); margin-bottom: 1.4rem; }
.hero .lead { max-width: 50ch; }

/* Hand-drawn style underline on the accent word, as on the reference */
.underline-mark { position: relative; display: inline-block; color: var(--gold); }
.underline-mark svg {
  position: absolute;
  left: 0; right: 0; bottom: -0.16em;
  width: 100%; height: 0.28em;
  overflow: visible;
}
.underline-mark path { stroke: var(--gold); stroke-width: 5; fill: none; stroke-linecap: round; opacity: .75; }

/* Trust row under the hero CTA */
.trust-row {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.avatars { display: flex; }
.avatars span {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid var(--white);
  background: var(--gold);
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 600;
  margin-left: -10px;
  box-shadow: var(--shadow-sm);
}
.avatars span:first-child { margin-left: 0; }
.trust-row__stars { display: flex; gap: 0.15rem; }
.trust-row__stars svg { width: 15px; height: 15px; color: var(--gold); }
.trust-row__text { font-size: 0.84rem; color: var(--text-mute); line-height: 1.5; }
.trust-row__text b { color: var(--text); font-weight: 600; }

/* Hero illustration card */
.hero__art { position: relative; }
.artcard {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.35rem, 2.4vw, 2rem);
}
.artcard__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 1.35rem;
}
.artcard__title { font-size: 0.95rem; font-weight: 600; }
.artcard__badge {
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-08);
  border-radius: var(--r-pill);
  padding: 0.32rem 0.7rem;
}
.artcard__rows { display: grid; gap: 0.7rem; }
.artrow {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.artrow:hover { border-color: var(--gold-35); background: var(--white); }
.artrow i {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
}
.artrow i svg { width: 14px; height: 14px; }
.artrow__label { font-size: 0.86rem; font-weight: 500; }
.artrow__bar {
  margin-left: auto;
  width: 74px; height: 6px;
  border-radius: 100px;
  background: var(--gold-12);
  overflow: hidden;
  flex: none;
}
.artrow__bar b { display: block; height: 100%; border-radius: 100px; background: var(--gold); }

.artcard__foot {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 1.35rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem;
  color: var(--text-mute);
}
.artcard__foot svg { width: 16px; height: 16px; color: var(--gold); flex: none; }

/* Floating mini card */
.artfloat {
  position: absolute;
  right: -14px; bottom: -22px;
  background: var(--black);
  color: var(--white);
  border-radius: var(--r-md);
  padding: 0.95rem 1.15rem;
  box-shadow: var(--shadow-lg);
  max-width: 210px;
}
.artfloat span {
  display: block;
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.25rem;
}
.artfloat b { font-size: 0.86rem; font-weight: 500; line-height: 1.45; }
@media (max-width: 560px) { .artfloat { right: 6px; bottom: -16px; max-width: 175px; padding: 0.8rem 0.95rem; } }

/* --------------------------------------------------------------------------
   8. CREDENTIAL BAND
   -------------------------------------------------------------------------- */
.band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.band__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
}
.band__item {
  background: var(--bg-soft);
  padding: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1rem, 2vw, 1.75rem);
  text-align: center;
  transition: background var(--dur) var(--ease);
}
.band__item:hover { background: var(--white); }
.band__item svg { width: 24px; height: 24px; color: var(--gold); margin: 0 auto 0.85rem; }
.band__k { font-size: 0.92rem; font-weight: 600; margin-bottom: 0.3rem; }
.band__v { font-size: 0.82rem; color: var(--text-mute); line-height: 1.6; }
@media (max-width: 860px) { .band__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .band__inner { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card, .card--light {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card:hover, .card--light:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-35);
}
.card__num { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); margin-bottom: 1rem; }
.card__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--gold-08);
  color: var(--gold);
  margin-bottom: 1.35rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card__icon svg { width: 23px; height: 23px; }
.card:hover .card__icon, .card--light:hover .card__icon { background: var(--gold); color: var(--white); }
.card h3 { margin-bottom: 0.7rem; }
.card p, .card--light p { color: var(--text-mute); font-size: 0.92rem; line-height: 1.85; }
.card .link-gold { margin-top: auto; padding-top: 1.5rem; align-self: flex-start; }

/* Feature row */
.feature { display: flex; gap: 1.1rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.feature:last-child { border-bottom: 0; }
.feature__icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--gold-08);
  color: var(--gold);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.feature__icon svg { width: 18px; height: 18px; }
.feature:hover .feature__icon { background: var(--gold); color: var(--white); }
.feature h4 { font-size: 1rem; font-weight: 600; margin-bottom: 0.35rem; }
.feature p { font-size: 0.9rem; color: var(--text-mute); line-height: 1.8; }

/* --------------------------------------------------------------------------
   10. TABS  (mirrors the reference's month-filter pills)
   -------------------------------------------------------------------------- */
.tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.tab {
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-mute);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tab:hover { border-color: var(--gold-35); color: var(--gold); }
.tab.is-active { background: var(--gold); border-color: var(--gold); color: var(--white); }

.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: fadeUp 0.5s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.panelcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
  align-items: center;
  padding: clamp(1.6rem, 3vw, 2.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
@media (max-width: 860px) { .panelcard { grid-template-columns: minmax(0, 1fr); } }
.panelcard h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 700; margin-bottom: 0.9rem; }
.panelcard p { color: var(--text-mute); font-size: 0.95rem; line-height: 1.9; }
.panelcard__visual {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.4vw, 1.85rem);
  display: grid;
  gap: 0.65rem;
}

/* --------------------------------------------------------------------------
   11. CHECKS
   -------------------------------------------------------------------------- */
.checks { display: grid; gap: 0.8rem; margin-top: 1.75rem; }
.checks li { display: flex; align-items: flex-start; gap: 0.7rem; font-size: 0.93rem; line-height: 1.7; }
.checks svg {
  width: 20px; height: 20px; flex: none; margin-top: 3px;
  color: var(--white);
  background: var(--gold);
  border-radius: 50%;
  padding: 4px;
}
.section--ink .checks li { color: var(--on-ink-mute); }

/* --------------------------------------------------------------------------
   12. STEPS
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.15rem, 2vw, 1.75rem);
  position: relative;
}
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .steps, .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .steps, .steps--4 { grid-template-columns: minmax(0, 1fr); } }

.step {
  position: relative;
  padding: clamp(1.6rem, 2.6vw, 2.15rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--gold-35); }
.step__dot {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--gold-08);
  color: var(--gold);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 1.3rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.step:hover .step__dot { background: var(--gold); color: var(--white); }
.step h4 { font-size: 1.08rem; font-weight: 600; margin-bottom: 0.55rem; }
.step p { font-size: 0.9rem; color: var(--text-mute); line-height: 1.8; }

/* --------------------------------------------------------------------------
   13. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quotes { position: relative; }
.quotes__viewport { overflow: hidden; }
.quotes__track { display: flex; width: 100%; transition: transform 0.7s var(--ease); will-change: transform; }
.quotes__slide { flex: 0 0 100%; min-width: 0; max-width: 100%; }

.quote {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  padding: clamp(1.85rem, 3.5vw, 3rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.quote__mark {
  display: block;
  width: 44px; height: 44px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--gold-08);
  color: transparent;
  font-size: 0;
  position: relative;
}
.quote__mark::after {
  content: "\201C";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 2.6rem;
  line-height: 1;
  padding-top: 0.34em;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
}
.quote__text {
  font-size: clamp(1.05rem, 1.9vw, 1.42rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -0.012em;
  color: var(--text);
  margin-bottom: 1.85rem;
}
.quote__stars { display: flex; justify-content: center; gap: 0.2rem; margin-bottom: 1rem; }
.quote__stars svg { width: 15px; height: 15px; color: var(--gold); }
.quote__name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.quote__role { font-size: 0.82rem; color: var(--text-mute); margin-top: 0.15rem; }

.quotes__ctrl { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.25rem; }
.qbtn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.qbtn svg { width: 15px; height: 15px; }
.qbtn:hover { background: var(--gold); border-color: var(--gold); color: var(--white); }
.qdots { display: flex; gap: 0.4rem; }
.qdot {
  width: 8px; height: 8px; border: 0; padding: 0;
  border-radius: 50%;
  background: var(--gold-20);
  transition: width 0.4s var(--ease), background 0.3s ease;
}
.qdot.is-active { width: 26px; border-radius: 100px; background: var(--gold); }

/* Masonry-style columns so uneven quote lengths sit naturally */
.tgrid {
  columns: 2;
  column-gap: clamp(1.15rem, 2vw, 1.75rem);
}
@media (max-width: 760px) { .tgrid { columns: 1; } }

.tcard {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(1.15rem, 2vw, 1.75rem);
  padding: clamp(1.6rem, 2.6vw, 2.15rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-35); }

.tcard__q {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold-08);
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  line-height: 1;
  padding-top: 0.3em;
  margin-bottom: 1.25rem;
}
.tcard p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text);
}
.tcard__foot {
  display: flex; align-items: center; gap: 0.85rem;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
.tcard__avatar {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  font-weight: 600; font-size: 0.82rem;
}
.tcard__name { font-size: 0.93rem; font-weight: 600; line-height: 1.35; }
.tcard__role { font-size: 0.82rem; color: var(--text-mute); line-height: 1.4; }

/* --------------------------------------------------------------------------
   14. AUDIENCE TIERS  (reference's pricing-tier layout, without prices)
   -------------------------------------------------------------------------- */
.tier {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.75rem, 2.8vw, 2.35rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--gold-35); }
.tier--featured { background: var(--ink-900); border-color: var(--ink-900); color: var(--on-ink); }
.tier--featured p, .tier--featured .tier__d { color: var(--on-ink-mute); }
.tier--featured .checks li { color: var(--on-ink-mute); }

.tier__flag {
  position: absolute; top: 1.4rem; right: 1.4rem;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--white);
  background: var(--gold);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
}
.tier__k {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.tier h3 { font-size: 1.32rem; font-weight: 700; margin-bottom: 0.7rem; }
.tier__d { font-size: 0.92rem; color: var(--text-mute); line-height: 1.85; }
.tier .checks { margin-top: 1.5rem; margin-bottom: 1.85rem; }
.tier .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   15. ACCORDION
   -------------------------------------------------------------------------- */
.acc { display: grid; gap: 0.85rem; }
.acc__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.acc__item.is-open { border-color: var(--gold-35); box-shadow: var(--shadow-sm); }
.acc__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.3rem 1.5rem;
  background: none; border: 0; text-align: left;
  font-family: var(--font);
  font-size: 0.99rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.3s ease;
}
.acc__btn:hover, .acc__item.is-open .acc__btn { color: var(--gold); }
.acc__sign {
  width: 30px; height: 30px; flex: none; position: relative;
  border-radius: 50%;
  background: var(--gold-08);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease), background 0.3s ease;
}
.acc__sign::before { width: 11px; height: 2px; border-radius: 2px; }
.acc__sign::after { width: 2px; height: 11px; border-radius: 2px; }
.acc__item.is-open .acc__sign { background: var(--gold); transform: rotate(180deg); }
.acc__item.is-open .acc__sign::before, .acc__item.is-open .acc__sign::after { background: var(--white); }
.acc__item.is-open .acc__sign::after { transform: translate(-50%, -50%) scaleY(0); }

.acc__panel { overflow: hidden; max-height: 0; transition: max-height 0.5s var(--ease); }
.acc__panel > div { padding: 0 1.5rem 1.45rem; }
.acc__panel p { font-size: 0.93rem; line-height: 1.9; color: var(--text-mute); }
.acc__panel a { color: var(--gold); font-weight: 500; }

/* --------------------------------------------------------------------------
   16. CTA BAND
   -------------------------------------------------------------------------- */
.cta { position: relative; overflow: hidden; background: var(--ink-900); color: var(--on-ink); }
.cta::before {
  content: "";
  position: absolute; left: 50%; top: -40%;
  transform: translateX(-50%);
  width: min(900px, 120vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(145,96,39,.30), transparent 62%);
}
.cta__inner { position: relative; z-index: 2; text-align: center; }
.cta h2 { margin-bottom: 1.15rem; }
.cta .lead { margin-inline: auto; color: var(--on-ink-mute); }

/* --------------------------------------------------------------------------
   17. PAGE HERO
   -------------------------------------------------------------------------- */
.pagehero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem);
  background:
    radial-gradient(900px 380px at 78% -20%, var(--gold-12), transparent 62%),
    var(--bg-soft);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.pagehero__bg { display: none; }
.pagehero__inner { position: relative; z-index: 2; }
.pagehero h1 { font-size: var(--fs-h1); margin-bottom: 1.15rem; }
.pagehero .lead { margin-inline: auto; }
.pagehero .eyebrow { margin-inline: auto; }

.crumbs {
  display: flex; justify-content: center; align-items: center; gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-faint);
  margin-top: 1.5rem;
}
.crumbs a:hover { color: var(--gold); }
.crumbs .is-current { color: var(--gold); }

/* --------------------------------------------------------------------------
   18. SPLIT / MEDIA
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
.split--top { align-items: start; }
.split--reverse .split__media { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media { order: 0; }
}

.frame {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3.2;
  display: grid; place-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
}
.frame::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, var(--gold-12), transparent 62%);
}
.frame__mark {
  position: relative;
  width: min(280px, 72%);
  border-radius: var(--r-sm);
  background: var(--black);
  padding: 10px 14px;
}
.frame__corner { display: none; }

.float-badge {
  position: absolute; left: 20px; bottom: 20px; z-index: 3;
  padding: 0.9rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  max-width: 230px;
}
.float-badge__label {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.3rem;
}
.float-badge__value { font-size: 0.88rem; font-weight: 500; color: var(--text); line-height: 1.5; }

/* --------------------------------------------------------------------------
   19. CONTACT
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 940px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.info-list { display: grid; gap: 0.85rem; margin-top: 2rem; }
.info-item {
  display: flex; gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.info-item:hover { border-color: var(--gold-35); transform: translateY(-3px); }
.info-item__icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--gold-08);
  color: var(--gold);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.info-item__icon svg { width: 18px; height: 18px; }
.info-item:hover .info-item__icon { background: var(--gold); color: var(--white); }
.info-item__label {
  font-size: 0.64rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.25rem;
}
.info-item__value { font-size: 0.93rem; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.info-item__value a:hover { color: var(--gold); }

.form-panel {
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.8rem; font-weight: 600; color: var(--text); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.93rem;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.field select {
  appearance: none; cursor: pointer; padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23916027' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  background: var(--white);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-12);
}
.field.has-error input, .field.has-error textarea { border-color: var(--gold); background: var(--gold-04); }
.field__err { font-size: 0.75rem; color: var(--gold); font-weight: 500; display: none; }
.field.has-error .field__err { display: block; }

.form-note { font-size: 0.78rem; color: var(--text-mute); line-height: 1.75; margin-top: 1.25rem; }
.form-note a { color: var(--gold); font-weight: 500; }
.form-status {
  display: none;
  margin-top: 1.25rem;
  padding: 0.95rem 1.15rem;
  border: 1px solid var(--gold-35);
  border-radius: var(--r-sm);
  background: var(--gold-04);
  font-size: 0.88rem;
  color: var(--text);
}
.form-status.is-visible { display: block; }

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  filter: grayscale(1);
  transition: filter 0.5s var(--ease);
  line-height: 0;
}
.map-frame:hover { filter: grayscale(0); }
.map-frame iframe { width: 100%; height: 420px; border: 0; display: block; }

/* --------------------------------------------------------------------------
   20. PROSE / LEGAL
   -------------------------------------------------------------------------- */
.prose { max-width: 74ch; margin-inline: auto; }
.prose h2 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); margin: 2.75rem 0 0.9rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.05rem; margin: 1.85rem 0 0.7rem; }
.prose p { margin-bottom: 1.1rem; line-height: 1.95; color: var(--text-mute); }
.prose ul { display: grid; gap: 0.65rem; margin-bottom: 1.35rem; }
.prose ul li { position: relative; padding-left: 1.55rem; color: var(--text-mute); line-height: 1.85; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.prose a { color: var(--gold); font-weight: 500; }
.prose strong { color: var(--text); font-weight: 600; }

.notice {
  padding: 1.4rem 1.65rem;
  border: 1px solid var(--gold-20);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-md);
  background: var(--gold-04);
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--text-mute);
}
.notice strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.footer { background: var(--ink-900); color: var(--on-ink); border-top: 1px solid var(--line-ink); }
.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 3.5vw, 3.25rem);
  padding-block: clamp(3rem, 6vw, 4.75rem) 3rem;
}
@media (max-width: 980px) { .footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer__inner { grid-template-columns: minmax(0, 1fr); } }

.footer__brand img { height: 104px; width: auto; margin-bottom: 1.35rem; border-radius: var(--r-sm); }
.footer__about { font-size: 0.87rem; line-height: 1.9; color: var(--on-ink-mute); max-width: 38ch; }

.footer__title { font-size: 0.9rem; font-weight: 600; color: var(--white); margin-bottom: 1.35rem; }
.footer__list { display: grid; gap: 0.8rem; }
.footer__list a, .footer__list li {
  font-size: 0.88rem;
  color: var(--on-ink-mute);
  display: inline-flex; align-items: center; gap: 0.6rem;
  overflow-wrap: anywhere;
  transition: color 0.3s ease, transform 0.35s var(--ease);
}
.footer__list a:hover { color: var(--white); transform: translateX(4px); }
.footer__list svg { width: 15px; height: 15px; color: var(--gold); flex: none; }

/* Default is the light context (contact page); the footer overrides for dark. */
.social { display: flex; gap: 0.6rem; margin-top: 1.75rem; }
.social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--text);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social svg { width: 16px; height: 16px; }
.social a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); transform: translateY(-3px); }

.footer .social a, .section--ink .social a {
  background: transparent;
  border-color: var(--line-ink);
  color: var(--white);
}
.footer .social a:hover, .section--ink .social a:hover { background: var(--gold); border-color: var(--gold); }

.footer__mark { display: none; }

.footer__legal { border-top: 1px solid var(--line-ink); padding-block: 1.85rem; }
.footer__disclaimer { font-size: 0.76rem; line-height: 1.9; color: var(--on-ink-faint); margin-bottom: 1.25rem; }
.footer__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.15rem; flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--on-ink-mute);
}
.footer__bar nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__bar a:hover { color: var(--white); }

.totop {
  position: fixed; right: 24px; bottom: 24px; z-index: 800;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--white);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.35s var(--ease), visibility 0.4s;
}
.totop svg { width: 15px; height: 15px; }
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--black); border-color: var(--black); }
@media (max-width: 560px) { .totop { right: 16px; bottom: 16px; width: 42px; height: 42px; } }

/* --------------------------------------------------------------------------
   22. REVEALS  (gated on .js so no-JS visitors still see everything)
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-24px); }
.js [data-reveal="right"] { transform: translateX(24px); }
.js [data-reveal="scale"] { transform: scale(0.98); }
.js [data-reveal="none"]  { transform: none; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* On narrow screens reveal vertically only — a sideways offset can cause a
   rubber-band scroll on iOS even with overflow-x hidden. */
@media (max-width: 640px) {
  .js [data-reveal="left"],
  .js [data-reveal="right"] { transform: translateY(22px); }
}

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

/* --------------------------------------------------------------------------
   23. SMALL SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  :root { --header-h: 70px; }
  .btn { --btn-px: 1.45rem; }
  .btn-row .btn { flex: 1 1 100%; }
  .footer__brand img { height: 88px; }
  .frame { aspect-ratio: auto; min-height: 250px; }
  .float-badge { left: 12px; bottom: 12px; max-width: 190px; padding: 0.75rem 0.9rem; }
}

/* --------------------------------------------------------------------------
   24. HELPERS
   -------------------------------------------------------------------------- */
.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;
}
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-0 { margin-bottom: 0; }

/* Retired from the previous design — kept neutral so older markup can't break. */
.grain, .cursor, .progress, .marquee, .hero__side, .hero__lines, .hero__glow { display: none !important; }
.sec-head { margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
.sec-head__label { display: none; }
.offset-body > * { grid-column: auto; }
.index-row__num { color: var(--gold); font-weight: 700; }

/* --------------------------------------------------------------------------
   25. PROGRAM CARD — detailed loan-program terms
   -------------------------------------------------------------------------- */
.program {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow-md);
  /* Explicit — the card sits inside a dark band, so it must not inherit white text. */
  color: var(--text);
}

.program__head {
  background: var(--ink-900);
  color: var(--on-ink);
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem);
  text-align: center;
}
.program__head h3 {
  display: flex; align-items: center; justify-content: center; gap: 0.7rem;
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: var(--white);
}
.program__head h3 svg { width: 1.1em; height: 1.1em; color: var(--gold); flex: none; }
.program__head p {
  margin-top: 1rem;
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line-ink);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--white);
}

.program__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1.25rem, 2.4vw, 2rem);
  padding: clamp(1.25rem, 2.6vw, 2.25rem);
}
@media (max-width: 860px) { .program__grid { grid-template-columns: minmax(0, 1fr); } }

.pgroup {
  display: flex; flex-direction: column;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--white);
}
/* Tinted variant — the highlighted column in the reference */
.pgroup--tint { background: var(--gold-04); border-color: var(--gold-20); }

.pgroup__head {
  background: var(--gold);
  color: var(--white);
  border-radius: var(--r-md);
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2vw, 1.5rem);
  margin-bottom: 1rem;
}
.pgroup__head h4 {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: clamp(1.02rem, 1.7vw, 1.25rem);
  font-weight: 700;
  color: var(--white);
}
.pgroup__head h4 svg { width: 1.05em; height: 1.05em; flex: none; }
.pgroup__head p { margin-top: 0.5rem; font-size: 0.87rem; line-height: 1.65; color: rgba(255,255,255,.85); }

.plist { display: grid; gap: 0.6rem; }
.pitem {
  display: flex; align-items: flex-start; gap: 0.8rem;
  padding: 0.9rem 1.05rem;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.pgroup--tint .pitem { background: var(--white); }
.pitem:hover { border-color: var(--gold-35); }
.pitem > svg {
  width: 20px; height: 20px; flex: none; margin-top: 2px;
  color: var(--gold);
}
.pitem__k { font-size: 0.95rem; font-weight: 600; line-height: 1.45; }
.pitem__v { font-size: 0.83rem; color: var(--text-mute); line-height: 1.55; margin-top: 0.1rem; }

/* Headline loan amounts */
.pamount {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
}
.pamount + .pamount { margin-top: 0.6rem; }
.pamount__i {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--gold);
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 700;
}
.pamount__n {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: 1.15;
}
.pamount__d {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.25rem;
}

.program__foot {
  padding: 0 clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.25rem);
}

/* --------------------------------------------------------------------------
   26. CATEGORY HEADER — groups a set of service cards
   -------------------------------------------------------------------------- */
.cat {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}
.cat__n {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--gold);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
}
.cat h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; }
.cat p { font-size: 0.9rem; color: var(--text-mute); margin-top: 0.15rem; }
.cat__line { flex: 1; height: 1px; background: var(--line); }
@media (max-width: 620px) { .cat__line { display: none; } }

/* --------------------------------------------------------------------------
   27. SERVICES PAGE — sticky category rail + offering cards
   -------------------------------------------------------------------------- */

/* Quick-jump chips in the page hero */
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.85rem; }
.jump a {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.jump a::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.jump a:hover { background: var(--gold); border-color: var(--gold); color: var(--white); transform: translateY(-2px); }
.jump a:hover::before { background: var(--white); }

/* Category layout */
.svc-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 940px) { .svc-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

.svc-aside { position: sticky; top: calc(var(--header-h) + 2.25rem); }
@media (max-width: 940px) { .svc-aside { position: static; } }

.svc-aside__n {
  display: block;
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(145, 96, 39, 0.45);
  margin-bottom: 0.75rem;
}
@supports not (-webkit-text-stroke: 1px #000) { .svc-aside__n { color: var(--gold-20); } }
.svc-aside h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 0.85rem; }
.svc-aside p { font-size: 0.95rem; line-height: 1.85; color: var(--text-mute); }
.svc-aside .link-gold { margin-top: 1.5rem; }

/* Offering card — horizontal, icon rail on the left */
.svc-list { display: grid; gap: clamp(0.9rem, 1.6vw, 1.25rem); }
.svc {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.svc::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-35); }
.svc:hover::before { transform: scaleY(1); }
@media (max-width: 520px) { .svc { grid-template-columns: minmax(0, 1fr); } }

.svc__i {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--gold-08);
  color: var(--gold);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.svc__i svg { width: 24px; height: 24px; }
.svc:hover .svc__i { background: var(--gold); color: var(--white); }

.svc h3 { font-size: clamp(1.05rem, 1.6vw, 1.22rem); font-weight: 600; margin-bottom: 0.5rem; }
.svc p { font-size: 0.93rem; line-height: 1.85; color: var(--text-mute); }

/* Tags pulled from the service description */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.1rem; }
.tag {
  padding: 0.34rem 0.8rem;
  border-radius: var(--r-pill);
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-mute);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.svc:hover .tag { background: var(--gold-08); border-color: var(--gold-20); color: var(--gold); }

/* --------------------------------------------------------------------------
   28. SERVICES PAGE — premium hero, glance index, flow, showcase band
   -------------------------------------------------------------------------- */

/* Split page hero */
.pagehero--split { text-align: left; padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem); }
.pagehero--split .lead { margin-inline: 0; }
.pagehero--split .eyebrow { margin-inline: 0; }
.pagehero__split {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
@media (max-width: 940px) { .pagehero__split { grid-template-columns: minmax(0, 1fr); } }

/* Dot-grid backdrop */
.dotgrid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--gold-20) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 70% at 30% 40%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 30% 40%, #000, transparent 72%);
  opacity: 0.7;
}

/* At-a-glance index card */
.glance {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.glance__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.5rem;
  background: var(--ink-900);
  color: var(--white);
}
.glance__head span {
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--gold);
}
.glance__head b { font-size: 0.88rem; font-weight: 600; }

.glance__row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--line-soft);
  transition: background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.glance__row:first-of-type { border-top: 0; }
.glance__row:hover { background: var(--gold-04); padding-left: 1.85rem; }
.glance__n {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--gold-08);
  color: var(--gold);
  font-size: 0.78rem; font-weight: 700;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.glance__row:hover .glance__n { background: var(--gold); color: var(--white); }
.glance__t { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.glance__c { font-size: 0.8rem; color: var(--text-mute); }
.glance__row svg { width: 18px; height: 18px; color: var(--gold); transition: transform var(--dur) var(--ease); }
.glance__row:hover svg { transform: translateX(4px); }
.glance__row--hl { background: var(--gold-04); }
.glance__row--hl .glance__n { background: var(--gold); color: var(--white); }

/* Category rail additions */
.svc-aside__count {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--gold-08);
  border: 1px solid var(--gold-20);
  font-size: 0.7rem; font-weight: 600;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.svc-aside__rule {
  display: block;
  width: 48px; height: 3px; border-radius: 3px;
  background: var(--gold);
  margin: 1.35rem 0 0;
}

/* Offering card — corner wash + chevron affordance */
.svc::after {
  content: "";
  position: absolute; right: 0; top: 0;
  width: 160px; height: 160px;
  background: radial-gradient(circle at 100% 0%, var(--gold-08), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.svc:hover::after { opacity: 1; }

/* Dark showcase band for the program card */
.showcase { background: var(--ink-900); color: var(--on-ink); position: relative; overflow: hidden; }
.showcase::before {
  content: "";
  position: absolute; left: 50%; top: -35%;
  transform: translateX(-50%);
  width: min(1000px, 130vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(145,96,39,.32), transparent 62%);
  pointer-events: none;
}
.showcase > * { position: relative; z-index: 2; }
.showcase .section-head h2 { color: var(--white); }
.showcase .section-head .lead { color: var(--on-ink-mute); }
.showcase .eyebrow { background: rgba(255,255,255,.06); border-color: var(--line-ink); color: var(--white); }
.showcase .program { box-shadow: 0 40px 80px -40px rgba(0,0,0,.9); }

/* Three-step flow with connector */
.flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  position: relative;
}
.flow::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 27px;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold-20) 0 8px, transparent 8px 16px);
}
@media (max-width: 820px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .flow::before { display: none; }
}
.flow__i {
  position: relative; z-index: 2;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: 0.86rem; font-weight: 700;
  margin: 0 auto 1.35rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.flow__step { text-align: center; }
.flow__step:hover .flow__i { background: var(--gold); color: var(--white); }
.flow__step h4 { font-size: 1.08rem; font-weight: 600; margin-bottom: 0.5rem; }
.flow__step p { font-size: 0.92rem; line-height: 1.85; color: var(--text-mute); max-width: 34ch; margin-inline: auto; }

/* --------------------------------------------------------------------------
   29. PREMIUM POLISH
   -------------------------------------------------------------------------- */

/* Gold hairline frame on the glance card */
.glance {
  position: relative;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(150deg, var(--gold-35), rgba(145,96,39,.06) 55%, var(--gold-20)) border-box;
  border: 1px solid transparent;
}

/* Offering cards: quiet index numeral in the corner */
.svc { counter-increment: svcnum; }
.svc-list { counter-reset: svcnum; }
.svc::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s var(--ease);
}
.svc__no {
  position: absolute;
  right: clamp(1.2rem, 2vw, 1.7rem);
  top: clamp(1rem, 1.8vw, 1.4rem);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold-35);
  transition: color var(--dur) var(--ease);
}
.svc:hover .svc__no { color: var(--gold); }

/* Category rail: refined numeral treatment */
.svc-aside__n { line-height: 0.92; }

/* Program group headers get a soft inner sheen */
.pgroup__head { position: relative; overflow: hidden; }
.pgroup__head::after {
  content: "";
  position: absolute; right: -30%; top: -120%;
  width: 70%; height: 260%;
  background: radial-gradient(closest-side, rgba(255,255,255,.16), transparent);
  pointer-events: none;
}

/* Amount block: subtle lift */
.pamount { transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pamount:hover { border-color: var(--gold-35); transform: translateX(3px); }

/* Section transitions: hairline above light sections that follow light ones */
.section--light + .section--light { border-top: 1px solid var(--line-soft); }

/* Flow circles get a soft ring on hover */
.flow__i { box-shadow: 0 0 0 0 var(--gold-12); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.flow__step:hover .flow__i { box-shadow: 0 0 0 8px var(--gold-08); }

/* Buttons: crisper focus + press feedback */
.btn:active { transform: translateY(0); }

/* --------------------------------------------------------------------------
   30. SERVICES HERO — dark full-bleed with overlapping category cards
   (deliberately a different shape from the home hero's split layout)
   -------------------------------------------------------------------------- */
.hero-svc {
  position: relative;
  background: var(--ink-900);
  color: var(--on-ink);
  padding-block: clamp(3.5rem, 7vw, 6rem) 0;
}
.hero-svc__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-svc__bg::before {
  content: "";
  position: absolute; left: 50%; top: -55%;
  transform: translateX(-50%);
  width: min(1100px, 135vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(145,96,39,.42), transparent 62%);
}
.hero-svc__bg::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(145,96,39,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145,96,39,.10) 1px, transparent 1px);
  background-size: 66px 66px;
  mask-image: radial-gradient(ellipse 75% 70% at 50% 30%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 30%, #000, transparent 76%);
}

.hero-svc__inner { position: relative; z-index: 2; text-align: center; max-width: 900px; }
.hero-svc .eyebrow {
  background: rgba(255,255,255,.06);
  border-color: var(--line-ink);
  color: var(--white);
  margin-inline: auto;
}
.hero-svc h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  color: var(--white);
  margin-bottom: 1.25rem;
}
.hero-svc .lead { color: var(--on-ink-mute); margin-inline: auto; }
.hero-svc .btn-row { justify-content: center; }
.hero-svc .crumbs { color: var(--on-ink-faint); margin-top: 1.75rem; }
.hero-svc .crumbs a:hover { color: var(--white); }

/* Card row straddling the boundary into the next section */
.hero-svc__cards {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.5vw, 1.25rem);
  margin-top: clamp(2.75rem, 5vw, 4.25rem);
  margin-bottom: calc(-1 * clamp(2.5rem, 5vw, 4rem));
}
@media (max-width: 900px) { .hero-svc__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hero-svc__cards { grid-template-columns: minmax(0, 1fr); } }

.hcard {
  display: flex; flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.hcard:hover { transform: translateY(-6px); border-color: var(--gold-35); }
.hcard__n {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em;
  color: var(--gold);
}
.hcard h3 { font-size: clamp(0.98rem, 1.5vw, 1.1rem); font-weight: 600; line-height: 1.35; }
.hcard p { font-size: 0.82rem; color: var(--text-mute); }
.hcard__go {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  margin-top: 0.85rem;
  border-radius: 50%;
  background: var(--gold-08);
  color: var(--gold);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hcard__go svg { width: 15px; height: 15px; }
.hcard:hover .hcard__go { background: var(--gold); color: var(--white); transform: translateX(3px); }

/* Featured card — the hard money program */
.hcard--hl { background: var(--gold); border-color: var(--gold); color: var(--white); }
.hcard--hl .hcard__n { color: rgba(255,255,255,.75); }
.hcard--hl p { color: rgba(255,255,255,.8); }
.hcard--hl .hcard__go { background: rgba(255,255,255,.18); color: var(--white); }
.hcard--hl:hover .hcard__go { background: var(--white); color: var(--gold); }

/* The section after the hero makes room for the overlap */
.section--offset { padding-top: calc(var(--section-y) + clamp(2.5rem, 5vw, 4rem)); }

/* --------------------------------------------------------------------------
   31. SERVICE CARDS — bento grid, each offering its own treatment
   -------------------------------------------------------------------------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.35rem);
}
@media (max-width: 860px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }

.scard {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.scard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

/* Wide variant — text left, artwork right */
.scard--span { grid-column: 1 / -1; }
.scard--span .scard__body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
@media (max-width: 700px) { .scard--span .scard__body { grid-template-columns: minmax(0, 1fr); } }

.scard__n {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.scard__i {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--gold-08);
  color: var(--gold);
  margin-bottom: 1.15rem;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.scard__i svg { width: 22px; height: 22px; }
.scard:hover .scard__i { background: var(--gold); color: var(--white); }
.scard h3 { font-size: clamp(1.02rem, 1.5vw, 1.2rem); font-weight: 600; margin-bottom: 0.6rem; }
.scard p { font-size: 0.92rem; line-height: 1.85; color: var(--text-mute); }

/* Artwork panel */
.scard__art {
  color: var(--gold);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  padding: clamp(0.9rem, 1.8vw, 1.4rem);
  display: grid; place-items: center;
}
.scard__art svg { width: 100%; height: auto; max-width: 220px; }

/* Dark treatment */
.scard--dark { background: var(--ink-900); border-color: var(--ink-900); color: var(--on-ink); }
.scard--dark h3 { color: var(--white); }
.scard--dark p { color: var(--on-ink-mute); }
.scard--dark .scard__i { background: rgba(255,255,255,.08); color: var(--gold); }
.scard--dark:hover .scard__i { background: var(--gold); color: var(--white); }
.scard--dark .scard__art { background: rgba(255,255,255,.04); border-color: var(--line-ink); }
.scard--dark .tag { background: rgba(255,255,255,.07); border-color: var(--line-ink); color: rgba(255,255,255,.72); }
.scard--dark:hover .tag { background: rgba(145,96,39,.28); border-color: var(--gold); color: var(--white); }

/* Gold treatment */
.scard--gold { background: var(--gold); border-color: var(--gold); color: var(--white); }
.scard--gold .scard__n { color: rgba(255,255,255,.72); }
.scard--gold h3 { color: var(--white); }
.scard--gold p { color: rgba(255,255,255,.86); }
.scard--gold .scard__i { background: rgba(255,255,255,.2); color: var(--white); }
.scard--gold:hover .scard__i { background: var(--white); color: var(--gold); }
.scard--gold .scard__art { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: var(--white); }
.scard--gold .tag { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: var(--white); }
.scard--gold:hover .tag { background: var(--white); color: var(--gold); border-color: var(--white); }

/* Outline treatment — quiet card, gold hairline */
.scard--outline { background: var(--white); border: 1px dashed var(--gold-35); box-shadow: none; }
.scard--outline:hover { border-style: solid; border-color: var(--gold); box-shadow: var(--shadow-sm); }

/* Soft treatment — tinted */
.scard--soft { background: var(--gold-04); border-color: var(--gold-20); }

/* Corner ribbon for the flagship offering */
.scard__flag {
  position: absolute; top: 1.1rem; right: 1.1rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--white);
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.scard--gold .scard__flag, .scard--dark .scard__flag { background: var(--white); color: var(--gold); }

/* --------------------------------------------------------------------------
   32. MODAL — consultation popup (single column, sheet on mobile)
   -------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 2rem);
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__dialog {
  position: relative;
  display: flex; flex-direction: column;
  width: min(600px, 100%);
  max-height: min(92vh, 880px);
  background: var(--white);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 46px 100px -32px rgba(0,0,0,.72);
  transform: translateY(20px) scale(0.975);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.modal.is-open .modal__dialog { transform: none; opacity: 1; }

/* -- Dark header band -- */
.modal__top {
  position: relative;
  overflow: hidden;
  flex: none;
  background: var(--ink-900);
  color: var(--on-ink);
  padding: clamp(1.35rem, 3vw, 1.7rem) clamp(1.35rem, 3.5vw, 2.1rem) clamp(1.15rem, 2.4vw, 1.4rem);
  text-align: center;
}
.modal__top::before {
  content: "";
  position: absolute; left: 50%; top: -110%;
  transform: translateX(-50%);
  width: 130%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(145,96,39,.5), transparent 60%);
  pointer-events: none;
}
.modal__top > * { position: relative; z-index: 2; }
.modal__mark {
  width: 40px; height: 40px;
  margin: 0 auto 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--line-ink);
}
.modal__top .eyebrow {
  background: rgba(255,255,255,.08);
  border-color: var(--line-ink);
  color: var(--white);
  margin: 0 auto 0.7rem;
  padding: 0.32rem 0.85rem;
}
.modal__top h2 {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  color: var(--white);
  margin-bottom: 0.5rem;
}
.modal__top p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--on-ink-mute);
  max-width: 42ch;
  margin-inline: auto;
}

/* Drag handle, mobile only */
.modal__handle { display: none; }

/* -- Scrollable form area -- */
.modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: clamp(1.2rem, 2.6vw, 1.5rem) clamp(1.35rem, 3.5vw, 2.1rem) 0;
}
.modal__body .form-grid { gap: 0.8rem; }
.modal__body .field label { font-size: 0.76rem; }
.modal__body .field input,
.modal__body .field select { padding: 0.72rem 0.9rem; }
.modal__body textarea { min-height: 74px; }

/* On desktop the button simply follows the fields */
.modal__actions { padding: 1rem 0 0.3rem; }
.modal__body .form-status { margin-top: 0.8rem; }
.modal__body .form-note { font-size: 0.72rem; line-height: 1.6; margin-top: 0.7rem; padding-bottom: 1.1rem; }

/* -- Trust strip -- */
.modal__strip {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.modal__strip div {
  background: var(--bg-soft);
  padding: 0.65rem 0.6rem;
  text-align: center;
}
.modal__strip b {
  display: block;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.15rem;
}
.modal__strip span { font-size: 0.76rem; color: var(--text-mute); line-height: 1.4; }
.modal__strip a:hover { color: var(--gold); }

.modal__close {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 5;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: var(--white);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.modal__close svg { width: 15px; height: 15px; }
.modal__close:hover {
  background: var(--gold); border-color: var(--gold); color: var(--white);
  transform: rotate(90deg);
}

/* ---- Mobile: bottom sheet ---- */
@media (max-width: 640px) {
  .modal { padding: 0; place-items: end center; }
  .modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
  }
  .modal.is-open .modal__dialog { transform: none; }

  .modal__handle {
    display: block;
    width: 40px; height: 4px;
    margin: 0 auto 1rem;
    border-radius: 100px;
    background: rgba(255,255,255,.28);
  }
  .modal__top { padding-top: 0.85rem; text-align: left; }
  .modal__mark { margin: 0 0 0.75rem; width: 40px; height: 40px; }
  .modal__top .eyebrow { margin-inline: 0; }
  .modal__top p { margin-inline: 0; font-size: 0.84rem; }
  .modal__close { top: 0.6rem; right: 0.7rem; }

  .modal__body { padding-inline: 1.15rem; }
  .modal__body .form-grid { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }

  /* Keep the submit reachable without scrolling past every field */
  .modal__actions {
    position: sticky; bottom: 0; z-index: 3;
    padding: 0.9rem 0 0.75rem;
    background: linear-gradient(180deg, rgba(255,255,255,0), var(--white) 26%);
  }
  .modal__body .form-note { font-size: 0.72rem; padding-bottom: 1rem; }

  .modal__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal__strip div:last-child { display: none; }
  .modal__strip div { padding: 0.65rem 0.6rem; }
}

/* Very short screens: let the sheet use the height it has */
@media (max-height: 620px) {
  .modal__dialog { max-height: 96vh; }
  .modal__top { padding-block: 1rem 0.9rem; }
  .modal__mark { display: none; }
}

/* --------------------------------------------------------------------------
   33. INLINE ENQUIRY BLOCK
   -------------------------------------------------------------------------- */
.enquire {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 900px) { .enquire { grid-template-columns: minmax(0, 1fr); } }

.enquire__points { display: grid; gap: 0.85rem; margin-top: 1.85rem; }
.enquire__point {
  display: flex; align-items: flex-start; gap: 0.8rem;
  font-size: 0.93rem; line-height: 1.7;
}
.enquire__point svg {
  width: 20px; height: 20px; flex: none; margin-top: 3px;
  padding: 4px; border-radius: 50%;
  background: var(--gold); color: var(--white);
}
.section--ink .enquire__point { color: var(--on-ink-mute); }

/* Compact form card used inline and in the modal */
.form-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.form-card__t { font-size: 1.12rem; font-weight: 700; margin-bottom: 0.4rem; }
.form-card__s { font-size: 0.86rem; color: var(--text-mute); margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   34. TESTIMONIAL CARD — rating + headline
   -------------------------------------------------------------------------- */
.tcard__stars { display: flex; gap: 0.18rem; margin-bottom: 0.9rem; }
.tcard__stars svg { width: 16px; height: 16px; color: var(--gold); }
.tcard__title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.4;
  margin-bottom: 0.7rem;
}
/* Quote glyph becomes a corner watermark so it stops interrupting the copy */
.tcard { position: relative; }
.tcard__q {
  position: absolute;
  top: 0.9rem; right: 1.25rem;
  width: auto; height: auto;
  margin: 0; padding: 0;
  background: none;
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--gold-20);
  pointer-events: none;
}
.tcard__stars { position: relative; z-index: 1; }
.tcard__title { padding-right: 2.5rem; }

/* --------------------------------------------------------------------------
   35. TESTIMONIALS — rating bar, featured quote, card variants
   -------------------------------------------------------------------------- */
.ratebar {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: clamp(1.25rem, 2.4vw, 1.85rem) clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.ratebar__score {
  font-size: clamp(2.1rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
}
.ratebar__div { width: 1px; height: 52px; background: var(--line); }
.ratebar__stars { display: flex; gap: 0.2rem; margin-bottom: 0.35rem; }
.ratebar__stars svg { width: 19px; height: 19px; color: var(--gold); }
.ratebar__meta { font-size: 0.88rem; color: var(--text-mute); }
.ratebar__meta b { color: var(--text); font-weight: 600; }
.ratebar__note {
  text-align: right;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 24ch;
}
@media (max-width: 860px) {
  .ratebar { grid-template-columns: auto minmax(0, 1fr); row-gap: 1rem; }
  .ratebar__div { display: none; }
  .ratebar__note { grid-column: 1 / -1; text-align: left; max-width: none; }
}

/* Featured pull quote */
.tfeature {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--on-ink);
  border-radius: var(--r-xl);
  padding: clamp(1.85rem, 4vw, 3.25rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.tfeature::before {
  content: "";
  position: absolute; right: -10%; top: -60%;
  width: 70%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(145,96,39,.45), transparent 62%);
  pointer-events: none;
}
.tfeature > * { position: relative; z-index: 2; }
.tfeature__mark {
  position: absolute; z-index: 1;
  right: clamp(1.5rem, 4vw, 3rem); top: clamp(0.5rem, 2vw, 1rem);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(6rem, 14vw, 11rem);
  line-height: 1;
  color: rgba(145, 96, 39, 0.32);
  pointer-events: none;
}
.tfeature__stars { display: flex; gap: 0.22rem; margin-bottom: 1.1rem; }
.tfeature__stars svg { width: 18px; height: 18px; color: var(--gold); }
.tfeature__title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.tfeature blockquote p {
  font-size: clamp(1.12rem, 2.3vw, 1.72rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: -0.015em;
  color: var(--white);
  max-width: 46ch;
}
.tfeature__foot {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: clamp(1.5rem, 3vw, 2.15rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line-ink);
}
.tfeature__foot .tcard__avatar { width: 48px; height: 48px; font-size: 0.86rem; }
.tfeature__name { font-size: 0.98rem; font-weight: 600; color: var(--white); }
.tfeature__role { font-size: 0.83rem; color: var(--on-ink-mute); }

/* Gold card variant — breaks the rhythm in the grid */
.tcard--gold { background: var(--gold); border-color: var(--gold); }
.tcard--gold .tcard__title { color: var(--white); }
.tcard--gold p { color: rgba(255, 255, 255, 0.9); }
.tcard--gold .tcard__stars svg { color: var(--white); }
.tcard--gold .tcard__q { color: rgba(255, 255, 255, 0.28); }
.tcard--gold .tcard__foot { border-top-color: rgba(255, 255, 255, 0.25); }
.tcard--gold .tcard__avatar { background: var(--white); color: var(--gold); }
.tcard--gold .tcard__name { color: var(--white); }
.tcard--gold .tcard__role { color: rgba(255, 255, 255, 0.75); }
.tcard--gold:hover { border-color: var(--gold); }

/* --------------------------------------------------------------------------
   36. ABOUT PAGE
   -------------------------------------------------------------------------- */
.abouthero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem) 0;
  background:
    radial-gradient(900px 380px at 50% -12%, var(--gold-12), transparent 62%),
    var(--bg-soft);
  text-align: center;
}
.abouthero__inner { position: relative; z-index: 2; max-width: 820px; }
.abouthero .eyebrow { margin-inline: auto; }
.abouthero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin-bottom: 1.2rem; }
.abouthero .lead { margin-inline: auto; }
.abouthero__crumbs { margin-top: 1.5rem; }

/* Three facts on hairlines, straddling the hero base */
.factstrip {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
}
.factstrip__i {
  background: var(--white);
  padding: clamp(1.35rem, 2.6vw, 2rem) clamp(1rem, 2vw, 1.6rem);
  text-align: center;
  transition: background var(--dur) var(--ease);
}
.factstrip__i:hover { background: var(--gold-04); }
.factstrip__k {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.5rem;
}
.factstrip__v { font-size: 0.95rem; font-weight: 500; line-height: 1.6; }
@media (max-width: 700px) { .factstrip { grid-template-columns: minmax(0, 1fr); } }

/* Story: copy beside a dark vision panel */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .story { grid-template-columns: minmax(0, 1fr); } }

.visionpanel {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--on-ink);
  border-radius: var(--r-xl);
  padding: clamp(1.85rem, 3.5vw, 2.75rem);
}
.visionpanel::before {
  content: "";
  position: absolute; right: -20%; top: -50%;
  width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(145,96,39,.45), transparent 62%);
  pointer-events: none;
}
.visionpanel > * { position: relative; z-index: 2; }
.visionpanel img { width: 46px; height: 46px; border-radius: var(--r-sm); margin-bottom: 1.35rem; }
.visionpanel__k {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.85rem;
}
.visionpanel p {
  font-size: clamp(1.02rem, 1.8vw, 1.28rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--white);
}

/* Four principles as numbered rows */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
}
@media (max-width: 800px) { .pillars { grid-template-columns: minmax(0, 1fr); } }
.pillar {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 1.15rem;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-35); }
.pillar__n {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--gold-08);
  color: var(--gold);
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.06em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pillar:hover .pillar__n { background: var(--gold); color: var(--white); }
.pillar h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.45rem; }
.pillar p { font-size: 0.92rem; line-height: 1.85; color: var(--text-mute); }

/* Vertical process timeline */
.vtl { position: relative; padding-left: clamp(52px, 6vw, 78px); }
.vtl::before {
  content: "";
  position: absolute; left: clamp(21px, 2.4vw, 31px);
  top: 10px; bottom: 10px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--gold-20) 0 7px, transparent 7px 14px);
}
.vtl__i { position: relative; padding-bottom: clamp(1.85rem, 3.5vw, 2.75rem); }
.vtl__i:last-child { padding-bottom: 0; }
.vtl__n {
  position: absolute;
  left: calc(-1 * clamp(52px, 6vw, 78px));
  top: 0;
  width: clamp(44px, 5vw, 62px); height: clamp(44px, 5vw, 62px);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  color: var(--gold);
  font-size: 0.82rem; font-weight: 700;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.vtl__i:hover .vtl__n { background: var(--gold); color: var(--white); }
.vtl__i h4 { font-size: 1.08rem; font-weight: 600; margin-bottom: 0.5rem; }
.vtl__i p { font-size: 0.93rem; line-height: 1.85; color: var(--text-mute); max-width: 52ch; }

/* --------------------------------------------------------------------------
   37. MOBILE — centred layout + touch refinements
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* ---- Centre the primary copy blocks ---- */
  .hero__copy,
  .split__body,
  .story > div,
  .svc-aside,
  .sec-head__body,
  .enquire > div:first-child,
  .contact-grid > div:first-child,
  .visionpanel,
  .panelcard > div:first-child { text-align: center; }

  .hero__copy .eyebrow,
  .split__body .eyebrow,
  .story .eyebrow,
  .svc-aside .svc-aside__count,
  .enquire .eyebrow,
  .contact-grid .eyebrow,
  .visionpanel .visionpanel__k { margin-inline: auto; }

  .hero .lead,
  .split__body .lead,
  .story .lead,
  .svc-aside p,
  .enquire .lead,
  .contact-grid .lead,
  .panelcard p { margin-inline: auto; }

  .svc-aside__n { text-align: center; }
  .svc-aside__rule { margin-inline: auto; }
  .svc-aside .link-gold,
  .story .link-gold { display: inline-flex; }

  .btn-row { justify-content: center; }
  .trust-row { justify-content: center; text-align: center; }
  .trust-row__text { text-align: center; }
  .crumbs { justify-content: center; }
  .pagehero--split .eyebrow,
  .pagehero--split .lead { margin-inline: auto; }
  .pagehero--split { text-align: center; }

  /* Lists stay left-read but sit as a centred block */
  .checks,
  .enquire__points,
  .modal__list {
    display: inline-grid;
    text-align: left;
    justify-self: center;
  }

  /* Cards keep their own left alignment — centring body copy hurts reading */
  .card, .scard, .tcard, .step, .pillar, .info-item, .tier { text-align: left; }
  .scard__i, .card__icon, .step__dot, .pillar__n { margin-inline: 0; }

  /* ---- Footer ---- */
  .footer__inner { text-align: center; }
  .footer__brand img { margin-inline: auto; }
  .footer__about { margin-inline: auto; }
  .social { justify-content: center; }
  .footer__list a,
  .footer__list li { justify-content: center; }
  .footer__list svg { flex: none; }
  .footer__bar { justify-content: center; text-align: center; }
  .footer__bar nav { justify-content: center; }
  .footer__disclaimer { text-align: center; }

  /* ---- Touch targets ---- */
  .nav__link,
  .footer__list a,
  .topbar__item,
  .crumbs a { min-height: 40px; display: inline-flex; align-items: center; }
  .drawer__link { min-height: 52px; }
  .btn { min-height: 48px; }
  .qbtn, .social a, .burger, .totop { min-width: 44px; min-height: 44px; }
}

/* Stop iOS zooming the page when a field is focused — it does that whenever
   the input font-size is under 16px. Applies to phones only. */
@media (max-width: 820px) {
  .field input,
  .field select,
  .field textarea,
  .filters input[type="search"] { font-size: 16px; }
}

/* Respect notched devices */
@supports (padding: max(0px)) {
  @media (max-width: 640px) {
    .modal__strip div:first-child { padding-left: max(0.6rem, env(safe-area-inset-left)); }
    .modal__body { padding-bottom: env(safe-area-inset-bottom); }
    .totop { bottom: max(16px, env(safe-area-inset-bottom)); }
    .footer__legal { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
  }
}

/* Kill the grey flash on tap */
a, button, .navbtn, .tab, .chip, .acc__btn { -webkit-tap-highlight-color: rgba(145, 96, 39, 0.15); }

/* --------------------------------------------------------------------------
   38. PRE-QUALIFICATION QUESTIONNAIRE
   -------------------------------------------------------------------------- */
.pq { background: var(--bg-soft); min-height: 60vh; }
.pq__shell { max-width: 760px; margin-inline: auto; padding-inline: var(--gutter); }

.pq__progress {
  position: sticky; top: var(--header-h); z-index: 30;
  background: var(--bg-soft);
  padding: 1rem 0 0.85rem;
  border-bottom: 1px solid var(--line);
}
.pq__track { height: 4px; border-radius: 100px; background: var(--gold-12); overflow: hidden; }
.pq__track i { display: block; height: 100%; border-radius: 100px; background: var(--gold); width: 0; transition: width 0.45s var(--ease); }
.pq__meta { display: flex; align-items: center; gap: 1rem; margin-top: 0.7rem; }
.pq__step { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.pips { display: flex; gap: 0.3rem; margin-left: auto; }
.pip { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-20); transition: background 0.3s var(--ease), width 0.3s var(--ease); }
.pip.is-done { background: var(--gold); }
.pip.is-now { width: 20px; border-radius: 100px; background: var(--gold); }
@media (max-width: 560px) { .pips { display: none; } }

.pq__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: clamp(1.4rem, 3.5vw, 2.5rem);
  margin: clamp(1.5rem, 3vw, 2.25rem) 0;
}
.pq__card h2 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-bottom: 0.45rem; }
.pq__card > p { font-size: 0.9rem; color: var(--text-mute); margin-bottom: 1.75rem; }

.q { margin-bottom: 1.6rem; }
.q:last-child { margin-bottom: 0; }
.q__label { font-size: 0.95rem; font-weight: 600; line-height: 1.5; margin-bottom: 0.3rem; }
.q__label i { color: var(--gold); font-style: normal; }
.q__hint { font-size: 0.8rem; color: var(--text-mute); margin-bottom: 0.6rem; }
.q__err { display: none; font-size: 0.78rem; color: var(--gold); font-weight: 500; margin-top: 0.45rem; }
.q.has-err .q__err { display: block; }
.q.has-err .opts { outline: 1px solid var(--gold-35); outline-offset: 6px; border-radius: var(--r-sm); }
.q.has-err .q__input { border-color: var(--gold); }

.opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.55rem; }
.opt {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.05rem;
  min-height: 46px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.opt__box {
  width: 16px; height: 16px; flex: none;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  position: relative;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.opts--multi .opt__box { border-radius: 4px; }
.opt:hover { border-color: var(--gold-35); }
.opt.is-on { background: var(--gold); border-color: var(--gold); color: var(--white); }
.opt.is-on .opt__box { border-color: var(--white); background: var(--white); }
.opt.is-on .opt__box::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%; background: var(--gold);
}
.opts--multi .opt.is-on .opt__box::after { border-radius: 1px; }

.q__input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 0.94rem;
  color: var(--text);
  margin-top: 0.5rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.q__input:focus { outline: none; border-color: var(--gold); background: var(--white); }
textarea.q__input { resize: vertical; min-height: 88px; line-height: 1.7; }

.pq__nav { display: flex; align-items: center; gap: 0.75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.pq__nav .btn--gold { margin-left: auto; }
.pq__note {
  display: none;
  margin-top: 1.25rem;
  font-size: 0.82rem; color: var(--text-mute);
  padding: 0.8rem 1rem;
  background: var(--gold-04);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
}
.pq__err {
  display: none;
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--gold-35);
  border-radius: var(--r-sm);
  background: var(--gold-04);
  font-size: 0.86rem; line-height: 1.7;
}

.pq__done { display: none; text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 0; }
.pq__done .tick {
  width: 68px; height: 68px; margin: 0 auto 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold); color: var(--white);
}
.pq__done .tick svg { width: 30px; height: 30px; }
.pq__done h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.75rem; }
.pq__done p { font-size: 0.95rem; line-height: 1.85; color: var(--text-mute); max-width: 46ch; margin: 0 auto 1.75rem; }

@media (max-width: 560px) {
  .opt { width: 100%; }
  .pq__nav { flex-direction: column-reverse; }
  .pq__nav .btn { width: 100%; margin-left: 0; }
}

/* Answers rendered inside the Enquiries dashboard */
.ansgrid { display: grid; gap: 0.5rem; margin-bottom: 0.9rem; }
.ansrow {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  font-size: 0.8rem;
}
.ansrow b { color: var(--tx-mute); font-weight: 400; }
.ansrow span { color: var(--tx); font-weight: 500; }
@media (max-width: 640px) { .ansrow { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } }

/* --------------------------------------------------------------------------
   39. FEE BAND — performance-based pricing statement
   -------------------------------------------------------------------------- */
.feeband {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--on-ink);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.feeband::before {
  content: "";
  position: absolute; left: 50%; top: -70%;
  transform: translateX(-50%);
  width: min(1000px, 130vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(145,96,39,.38), transparent 62%);
  pointer-events: none;
}
.feeband__inner { position: relative; z-index: 2; }

.feeband__head { text-align: center; max-width: 660px; margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem); }
.feeband__head .eyebrow {
  background: rgba(255,255,255,.07);
  border-color: var(--line-ink);
  color: var(--white);
  margin-inline: auto;
}
.feeband h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); color: var(--white); margin-bottom: 0.85rem; }
.feeband__head p { font-size: 0.95rem; line-height: 1.8; color: var(--on-ink-mute); }

.feegrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-ink);
  border: 1px solid var(--line-ink);
  border-radius: var(--r-xl);
  overflow: hidden;
}
@media (max-width: 780px) { .feegrid { grid-template-columns: minmax(0, 1fr); } }

.feeitem {
  background: var(--ink-900);
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: center;
  transition: background var(--dur) var(--ease);
}
.feeitem:hover { background: rgba(145, 96, 39, 0.10); }
.feeitem__i {
  width: 46px; height: 46px;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
}
.feeitem__i svg { width: 20px; height: 20px; }
.feeitem__n {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.feeitem__k {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
}
.feeitem p { font-size: 0.87rem; line-height: 1.75; color: var(--on-ink-mute); max-width: 32ch; margin-inline: auto; }

.feeband__foot {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  text-align: center;
}
.feeband__note {
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--on-ink-faint);
  max-width: 62ch;
  margin: 1.25rem auto 0;
}

/* Pre-qualify prompt under the hero buttons */
.hero__prompt {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 1.35rem;
  padding: 0.7rem 1.15rem;
  background: var(--gold-06);
  border: 1px dashed var(--gold-35);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  color: var(--text-mute);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__prompt:hover { background: var(--gold-12); border-color: var(--gold); border-style: solid; }
.hero__prompt b { color: var(--gold); font-weight: 600; }
.hero__prompt svg { width: 15px; height: 15px; color: var(--gold); flex: none; transition: transform var(--dur) var(--ease); }
.hero__prompt:hover svg { transform: translateX(3px); }
@media (max-width: 640px) { .hero__prompt { width: 100%; justify-content: center; text-align: center; } }