/* ==========================================================================
   WEALTHINO VENTURES PRIVATE LIMITED — site stylesheet
   One file controls the look of every page. Colours are set once, below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BRAND TOKENS  — change a colour here and it changes across the whole site
   -------------------------------------------------------------------------- */
:root {
  --navy:        #0B2B4B;
  --navy-deep:   #071D33;
  --navy-soft:   #1B3E63;
  --teal:        #12A2B8;
  --teal-dark:   #0E86A0;
  --green:       #7CC142;
  --green-dark:  #63A833;

  --brand-gradient: linear-gradient(135deg, #12A2B8 0%, #4FB58A 55%, #7CC142 100%);

  --ink:         #16202B;
  --body:        #46586B;
  --muted:       #71869A;

  --bg:          #FFFFFF;
  --bg-soft:     #F5F8FA;
  --bg-tint:     #EFF6F8;
  --line:        #E3EAF1;
  --line-soft:   #EEF3F7;

  --radius-sm:   10px;
  --radius:      16px;
  --radius-lg:   24px;

  --shadow-sm:   0 1px 2px rgba(11,43,75,.06), 0 2px 6px rgba(11,43,75,.05);
  --shadow:      0 2px 4px rgba(11,43,75,.05), 0 12px 28px rgba(11,43,75,.08);
  --shadow-lg:   0 4px 8px rgba(11,43,75,.05), 0 24px 60px rgba(11,43,75,.13);

  /* Latin faces come first; the Bengali faces at the end are only reached for
     Bengali glyphs, so the বাংলা articles render properly without changing
     how English pages look. */
  --font-display: "Plus Jakarta Sans", "Segoe UI Variable Display", "Segoe UI",
                  -apple-system, BlinkMacSystemFont, system-ui,
                  "Noto Sans Bengali", "Nirmala UI", "Vrinda", sans-serif;
  --font-body:    "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont,
                  system-ui, "Helvetica Neue", Arial,
                  "Noto Sans Bengali", "Nirmala UI", "Vrinda", sans-serif;

  --container:   1180px;
  --header-h:    76px;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--teal-dark); text-decoration: none; }
a:hover { color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.15rem, 1.35rem + 3.4vw, 3.75rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .5vw, 1.35rem); letter-spacing: -0.01em; }
h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: 0; }
p  { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: rgba(18,162,184,.18); color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}
.container-narrow { max-width: 820px; }

.section { padding: clamp(64px, 8vw, 116px) 0; }
.section--soft  { background: var(--bg-soft); }
.section--tint  { background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-tint) 100%); }
.section--tight { padding-block: clamp(48px, 5vw, 72px); }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { font-size: 1.075rem; color: var(--body); margin-bottom: 0; }

.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: .775rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-dark);
  margin-bottom: 16px;
}
.kicker::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: var(--brand-gradient);
}
.section-head--center .kicker::before { display: none; }

.lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--body); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Grid/flex children may never force a track wider than the viewport */
.hero-grid > *, .feature > *, .grid > *, .tool-grid > *,
.quote-grid > *, .post-grid > *, .steps > * { min-width: 0; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display);
  font-size: .95rem; font-weight: 700; letter-spacing: -.005em;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease,
              background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 6px 18px rgba(18,162,184,.28);
}
.btn-primary:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(18,162,184,.36);
}

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); color: #fff; transform: translateY(-2px); }

.btn-outline {
  background: #fff; color: var(--navy); border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-outline:hover { border-color: var(--teal); color: var(--teal-dark); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--navy); border-color: rgba(11,43,75,.18); }
.btn-ghost:hover { background: rgba(11,43,75,.04); color: var(--navy); }

.btn-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.32); }
.btn-light:hover { background: rgba(255,255,255,.24); color: #fff; }

.btn-sm { padding: 10px 18px; font-size: .875rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: .93rem;
  color: var(--teal-dark);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform .18s ease; }
.link-arrow:hover { color: var(--navy); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(11,43,75,.06);
}
.nav {
  display: flex; align-items: center; gap: 20px;
  height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.06rem; letter-spacing: -.015em; color: var(--navy);
  white-space: nowrap;
}
.brand__sub {
  font-size: .67rem; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: #5A6B7C; margin-top: 3px;
  white-space: nowrap;
}

/* The masthead line is the tagline, not the legal suffix. It runs a third
   longer than "Private Limited", so it gives back some letter-spacing to keep
   the header from crowding the nav on narrow screens. The footer keeps the
   plain .brand__sub with the registered name. */
.brand__tag { letter-spacing: .085em; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-family: var(--font-display); font-weight: 600; font-size: .9rem;
  color: var(--navy); padding: 9px 11px; border-radius: 8px;
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.nav-links a:hover { background: var(--bg-soft); color: var(--teal-dark); }
.nav-links a.is-active { color: var(--teal-dark); }
.nav-links a.is-active::after {
  content: ""; display: block; height: 2px; border-radius: 2px;
  background: var(--brand-gradient); margin-top: 5px;
}

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: .93rem;
  color: var(--navy); padding: 9px 12px; border-radius: 8px;
  white-space: nowrap;
}
.nav-phone:hover { background: var(--bg-soft); color: var(--navy); }
.nav-phone svg { width: 16px; height: 16px; color: var(--teal); }

/* The header button carries no icon, so it must not inherit .btn's icon gap —
   that would put a 9px space in the middle of "Client Login". */
.nav-cta .btn { gap: 0; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px; padding: 0;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: 11px; cursor: pointer; color: var(--navy);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open  { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 7vw, 104px) 0 clamp(64px, 7vw, 104px);
  background:
    radial-gradient(900px 520px at 88% -8%,  rgba(124,193,66,.16), transparent 62%),
    radial-gradient(760px 460px at 6% 6%,    rgba(18,162,184,.16), transparent 60%),
    linear-gradient(180deg, #FBFDFE 0%, #FFFFFF 68%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(11,43,75,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,43,75,.028) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(760px 460px at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(760px 460px at 50% 30%, #000 0%, transparent 78%);
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.hero h1 .accent {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-lede { font-size: clamp(1.06rem, 1rem + .38vw, 1.24rem); max-width: 42ch; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 15px;
  font-size: .82rem; font-weight: 600; color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.badge svg { width: 15px; height: 15px; color: var(--green-dark); flex: none; }

/* hero visual card */
.hero-panel {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px;
}
.hero-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.hero-panel__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1rem; color: var(--navy);
}
.pill {
  font-size: .7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--green-dark);
  background: rgba(124,193,66,.13); border-radius: 999px; padding: 5px 11px;
}
.hero-chart { width: 100%; height: auto; border-radius: var(--radius-sm); }

/* Illustration inside the hero card */
.hero-illustration {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

/* Illustration as its own full-width band across the page */
.illus-band { padding: clamp(36px, 5vw, 64px) 0; background: #fff; }
.illus-band img {
  width: 100%; max-width: 1000px; height: auto;
  margin-inline: auto; border-radius: var(--radius);
}
.illus-band figcaption {
  text-align: center; font-size: .85rem; color: var(--muted);
  margin-top: 16px;
}

/* "One Plan" diagram — growth on one side, protection on the other, joined in
   the middle. Real HTML text, so it is readable, searchable and scales. */
.synergy {
  display: grid;
  grid-template-columns: 1fr 22px auto 22px 1fr;
  align-items: center; gap: 10px;
  padding: 6px 0 2px;
}
.synergy__col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.synergy__label {
  font-family: var(--font-display); font-size: .66rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 2px;
}
.synergy__chip {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px;
  font-size: .79rem; font-weight: 600; color: var(--navy);
  line-height: 1.25;
}
.synergy__wire { height: 2px; border-radius: 2px; background: var(--brand-gradient); opacity: .55; }
.synergy__hub {
  position: relative; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--brand-gradient); color: #fff;
  font-family: var(--font-display); font-weight: 800;
  font-size: .92rem; line-height: 1.15; letter-spacing: -.01em;
  box-shadow: 0 8px 22px rgba(18,162,184,.32);
}
.synergy__hub::before,
.synergy__hub::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.synergy__hub::before { inset: -9px;  border: 1px solid rgba(18,162,184,.28); }
.synergy__hub::after  { inset: -19px; border: 1px solid rgba(18,162,184,.13); }

@media (max-width: 620px) {
  /* stack vertically: grow → hub → protect */
  .synergy { grid-template-columns: 1fr; justify-items: center; gap: 9px; }
  .synergy__col { align-items: stretch; width: 100%; }
  .synergy__label { text-align: center; }
  .synergy__chip { text-align: center; }
  .synergy__wire { width: 2px; height: 16px; }
  .synergy__hub { width: 84px; height: 84px; font-size: .88rem; }
}
.hero-panel__foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: .78rem; color: var(--muted);
}
.hero-panel__foot svg { width: 14px; height: 14px; flex: none; }

.hero-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 18px;
}
.hero-metric {
  background: var(--bg-soft); border-radius: var(--radius-sm); padding: 14px 12px; text-align: center;
}
.hero-metric b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: 1.25rem; color: var(--navy); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hero-metric span { font-size: .715rem; color: var(--muted); font-weight: 600; }

/* --------------------------------------------------------------------------
   6b. GOAL CHOOSER — the homepage hero
   The visitor picks the situation that is theirs; the headline, the sentence
   and the card all follow. Written by assets/js/goals.js.
   -------------------------------------------------------------------------- */
.hero-grid--choose { grid-template-columns: 1.15fr .85fr; }

.goal-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.goal-chip {
  position: relative; overflow: hidden;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  color: var(--navy); background: #fff;
  border: 1.5px solid var(--line); border-radius: 999px;
  padding: 10px 17px; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease,
              color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.goal-chip:hover { border-color: var(--teal); color: var(--teal-dark); transform: translateY(-1px); }
.goal-chip.is-on {
  background: var(--navy); border-color: var(--navy); color: #fff;
  box-shadow: 0 5px 14px rgba(11,43,75,.2);
}
/* the chip label must sit above the sweep below */
.goal-chip > * { position: relative; z-index: 1; }

/* While the chips are advancing on their own, the active one fills quietly
   from left to right over the five seconds. It tells the visitor the movement
   is deliberate rather than a glitch — and it disappears the moment they take
   over, because from then on nothing moves without them. */
.goal-chips.is-auto .goal-chip.is-on::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255,255,255,.17);
  transform-origin: left center; transform: scaleX(0);
  animation: goal-sweep 5s linear forwards;
}
@keyframes goal-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the sentence under the chips — a fixed minimum height so swapping between
   goals never makes the buttons below jump about */
.goal-say { min-height: 84px; margin-bottom: 30px; }
.goal-say p {
  font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem);
  color: var(--body); max-width: 44ch; margin: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.goal-say.is-swapping p { opacity: 0; transform: translateY(6px); }

.goal-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px;
  box-shadow: var(--shadow-lg);
}
.goal-card__head {
  font-family: var(--font-display); font-weight: 800;
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px;
}
.goal-step {
  display: flex; gap: 13px; padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: opacity .3s ease, transform .3s ease;
}
.goal-step:last-child { border-bottom: 0; }
.goal-card.is-swapping .goal-step { opacity: 0; transform: translateY(6px); }
.goal-step__n {
  width: 25px; height: 25px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: .7rem;
  color: var(--teal-dark); background: rgba(18,162,184,.11);
}
.goal-step b {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .93rem; color: var(--navy); line-height: 1.35;
}
.goal-step span { font-size: .85rem; color: var(--muted); line-height: 1.5; }
.goal-card__foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: .78rem; color: var(--muted);
}
.goal-card__foot svg { width: 14px; height: 14px; flex: none; }

/* --------------------------------------------------------------------------
   6c. THE WHOLE PICTURE — the illustration band
   Capped at 880px on purpose: the source file is 1448px wide, and stretching
   it further softens the small handwritten labels inside the drawing.
   -------------------------------------------------------------------------- */
.picture__frame {
  max-width: 880px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 20px;
  box-shadow: var(--shadow);
}
.picture__img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.picture__frame figcaption {
  font-size: .82rem; color: var(--muted);
  text-align: center; margin: 16px auto 0; max-width: 56ch;
}
@media (max-width: 560px) {
  .picture__frame { padding: 12px; }
}

/* --------------------------------------------------------------------------
   7. TRUST STRIP
   -------------------------------------------------------------------------- */
.trust-strip { border-block: 1px solid var(--line); background: #fff; }
.trust-strip__inner {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.trust-item {
  padding: 26px 22px; text-align: center;
  border-left: 1px solid var(--line-soft);
}
.trust-item:first-child { border-left: 0; }
.trust-item b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
  color: var(--navy); letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
/* the ">" matters: the label only, never the counter span inside the <b> */
.trust-item > span { font-size: .82rem; color: var(--muted); font-weight: 500; }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #D6E2EC; }
.card h3 { margin-bottom: .5em; }
.card p { font-size: .965rem; }

.card-icon {
  width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(18,162,184,.12), rgba(124,193,66,.14));
  color: var(--teal-dark);
}
.card-icon svg { width: 24px; height: 24px; }

.card-list { list-style: none; margin: 18px 0 0; padding: 0; }
.card-list li {
  position: relative; padding-left: 26px; margin-bottom: 9px;
  font-size: .93rem; color: var(--body);
}
.card-list li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 15px; height: 15px; border-radius: 50%;
  background: rgba(124,193,66,.16);
  box-shadow: inset 0 0 0 1.5px rgba(124,193,66,.45);
}
.card-list li::after {
  content: ""; position: absolute; left: 5px; top: .78em;
  width: 5px; height: 2.5px; border-left: 2px solid var(--green-dark);
  border-bottom: 2px solid var(--green-dark);
  transform: rotate(-45deg); transform-origin: center;
}

/* person card — photo beside biography, stacking on phones */
.person { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: start; }

/* Circular crop. object-position pulls the frame up so the face sits centred
   rather than the middle of a head-and-shoulders portrait. */
.person__photo {
  width: 152px; height: 152px; flex: none;
  border-radius: 50%; object-fit: cover; object-position: center 22%;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(18,162,184,.32);
}

/* keep the biography to a comfortable reading measure, not the full card */
.person p { max-width: 64ch; }

@media (max-width: 640px) {
  .person { grid-template-columns: 1fr; gap: 22px; justify-items: start; }
  .person__photo { width: 128px; height: 128px; }
}

/* feature card — two-column service block */
.feature {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px); align-items: center;
}
.feature--flip .feature__media { order: -1; }
.feature__media {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px;
}

/* --------------------------------------------------------------------------
   9. TOOLS GRID
   -------------------------------------------------------------------------- */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tool-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  color: inherit;
}
.tool-card:hover {
  transform: translateY(-4px); box-shadow: var(--shadow);
  border-color: rgba(18,162,184,.4); color: inherit;
}
.tool-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tool-card__num {
  font-family: var(--font-display); font-weight: 800; font-size: .8rem;
  color: var(--teal-dark); background: rgba(18,162,184,.1);
  border-radius: 8px; padding: 4px 9px;
}
.tool-card h3 { font-size: 1.08rem; margin: 16px 0 .45em; }
.tool-card p { font-size: .92rem; margin-bottom: 18px; }
.tool-card .link-arrow { margin-top: auto; }
.tool-tag {
  display: inline-block; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px;
}

/* --------------------------------------------------------------------------
   10. PROCESS STEPS
   -------------------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { position: relative; padding-top: 26px; }
.step::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; border-radius: 2px; background: var(--line);
}
.step.is-lit::before { background: var(--brand-gradient); }
.step__n {
  counter-increment: step;
  font-family: var(--font-display); font-weight: 800; font-size: .78rem;
  letter-spacing: .1em; color: var(--teal-dark); text-transform: uppercase;
  display: block; margin-bottom: 10px;
}
.step__n::before { content: "0" counter(step) " — "; }
.step h3 { font-size: 1.06rem; }
.step p { font-size: .93rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm);
}
.quote__mark {
  font-family: var(--font-display); font-size: 2.6rem; line-height: .8;
  color: rgba(18,162,184,.28); margin-bottom: 12px;
}
.quote p { font-size: .98rem; color: var(--ink); margin-bottom: 20px; }
.quote__by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: #fff;
  background: var(--brand-gradient);
}
.quote__name { font-family: var(--font-display); font-weight: 700; font-size: .93rem; color: var(--navy); }
.quote__meta { font-size: .8rem; color: var(--muted); }

/* Single featured testimonial — used while there is only one quote to show.
   Once three are in hand, switch back to the .quote-grid of .quote cards. */
.quote-feature {
  max-width: 830px; margin: 0 auto; text-align: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(32px, 4vw, 56px);
  box-shadow: var(--shadow);
}
.quote-feature__mark {
  font-family: var(--font-display); font-size: 3.4rem; line-height: .7;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 20px;
}
.quote-feature blockquote { margin: 0; }
.quote-feature blockquote p {
  font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem);
  line-height: 1.62; color: var(--ink); margin-bottom: 1em;
}
.quote-feature blockquote p:last-child { margin-bottom: 0; }
.quote-feature figcaption {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--line-soft);
}
.quote-feature__name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.05rem; color: var(--navy); letter-spacing: -.01em;
}
.quote-feature__meta { font-size: .89rem; color: var(--muted); margin-top: 4px; }

/* Two testimonials side by side. Left-aligned here — centred text reads well
   for a single quote, but looks unsettled in columns. */
.quote-pair {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 22px; max-width: 1000px; margin-inline: auto;
}
.quote-pair .quote-feature {
  max-width: none; text-align: left;
  padding: clamp(26px, 3vw, 36px);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.quote-pair .quote-feature__mark { font-size: 2.6rem; margin-bottom: 14px; }
.quote-pair .quote-feature blockquote p { font-size: 1rem; line-height: 1.6; }
.quote-pair .quote-feature figcaption { margin-top: auto; padding-top: 22px; }

@media (max-width: 780px) {
  .quote-pair { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   12. INSIGHTS / BLOG
   -------------------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  color: inherit;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: inherit; }
.post__band { height: 6px; background: var(--brand-gradient); }
.post__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.post__meta {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; color: var(--muted); font-weight: 600; margin-bottom: 12px;
}
.post__cat { color: var(--teal-dark); }
.post h3 { font-size: 1.1rem; margin-bottom: .5em; }
.post p { font-size: .93rem; margin-bottom: 18px; }
.post .link-arrow { margin-top: auto; }

/* --- Insights controls: category filters, search, show-more -------------
   These appear on their own as the library grows. The chips are built from
   whatever categories the articles actually use, so a new subject area
   creates its own filter the day you publish under it. */
.post-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.post-filters { display: flex; flex-wrap: wrap; gap: 9px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  color: var(--navy); background: #fff;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease,
              color .16s ease, box-shadow .16s ease;
}
.chip:hover { border-color: var(--teal); color: var(--teal-dark); }
.chip__n {
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--muted); background: var(--bg-soft);
  border-radius: 999px; padding: 1px 7px; min-width: 21px; text-align: center;
}
.chip.is-on {
  background: var(--navy); color: #fff; border-color: var(--navy);
  box-shadow: 0 4px 12px rgba(11,43,75,.18);
}
.chip.is-on .chip__n { background: rgba(255,255,255,.18); color: #fff; }

.post-search { position: relative; flex: none; min-width: 240px; }
.post-search input {
  width: 100%; font-family: var(--font-body); font-size: .93rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 16px 10px 40px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.post-search input:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(18,162,184,.14);
}
.post-search svg {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}

.post-count {
  font-size: .85rem; color: var(--muted); font-weight: 500;
  margin: 0 0 20px; font-variant-numeric: tabular-nums;
}
.post-more { margin-top: 32px; }
.post-empty {
  grid-column: 1 / -1; text-align: center;
  padding: 46px 20px; color: var(--muted);
  background: var(--bg-soft); border: 1px dashed var(--line);
  border-radius: var(--radius); margin: 0;
}
.post-reset {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: inherit;
  color: var(--teal-dark); text-decoration: underline;
}
.post-reset:hover { color: var(--navy); }

@media (max-width: 620px) {
  .post-controls { flex-direction: column; align-items: stretch; gap: 14px; }
  .post-search { min-width: 0; }
  .post-filters { gap: 7px; }
  .chip { font-size: .8rem; padding: 7px 13px; }
}

/* --------------------------------------------------------------------------
   13. CTA BAND
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 48%, #0F3B62 100%);
  color: rgba(255,255,255,.82);
  border-radius: var(--radius-lg);
  padding: clamp(38px, 5vw, 62px);
}
.cta-band::before {
  content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%;
  right: -140px; top: -190px;
  background: radial-gradient(circle, rgba(124,193,66,.28), transparent 68%);
}
.cta-band::after {
  content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%;
  left: -150px; bottom: -220px;
  background: radial-gradient(circle, rgba(18,162,184,.3), transparent 68%);
}
.cta-band__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: .4em; }
.cta-band p { max-width: 54ch; margin-bottom: 0; }
.cta-band .btn-primary { box-shadow: 0 8px 24px rgba(0,0,0,.28); }

/* --------------------------------------------------------------------------
   14. PAGE HEADER (inner pages)
   -------------------------------------------------------------------------- */
.page-head {
  position: relative; overflow: hidden;
  padding: clamp(48px, 6vw, 84px) 0 clamp(40px, 5vw, 64px);
  background:
    radial-gradient(700px 400px at 82% -20%, rgba(124,193,66,.15), transparent 62%),
    radial-gradient(600px 380px at 4% 0%,   rgba(18,162,184,.14), transparent 60%),
    var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.page-head .container { position: relative; z-index: 1; }
.page-head h1 { margin-bottom: 18px; }
.page-head p { font-size: clamp(1.02rem, .98rem + .3vw, 1.15rem); max-width: 62ch; margin-bottom: 0; }

.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--muted); margin-bottom: 18px;
}
.breadcrumb a { color: var(--muted); font-weight: 500; }
.breadcrumb a:hover { color: var(--teal-dark); }

/* --------------------------------------------------------------------------
   15. PROSE (article / long text)
   -------------------------------------------------------------------------- */
.prose { font-size: 1.03rem; }
.prose h2 { margin-top: 1.8em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .5em; }
.prose > :first-child { margin-top: 0; }

.callout {
  background: var(--bg-tint);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px; margin: 28px 0;
  font-size: .96rem;
}
.callout strong { color: var(--navy); }

/* --------------------------------------------------------------------------
   15b. RATE TABLE — the commission disclosure
   Wide tables must scroll inside their own box rather than pushing the page
   sideways, so the wrapper carries the overflow.
   -------------------------------------------------------------------------- */
.rate-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 26px 0 14px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.rate-table table {
  width: 100%; border-collapse: collapse;
  min-width: 520px;            /* below this the columns start to crush */
  font-size: .93rem;
}
.rate-table thead th {
  text-align: left; vertical-align: bottom;
  font-family: var(--font-display); font-weight: 700;
  font-size: .76rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy); background: var(--bg-soft);
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.rate-table tbody th {
  text-align: left; font-weight: 500; color: var(--body);
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
}
.rate-table tbody td {
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
  color: var(--navy); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rate-table tbody tr:last-child th,
.rate-table tbody tr:last-child td { border-bottom: 0; }
.rate-table tbody tr:hover { background: var(--bg-soft); }
.rate-table__note { font-size: .87rem; color: var(--muted); }

/* for screen readers only — a caption that need not be seen */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   16. FAQ (accordion)
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.03rem;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px; margin-top: 7px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 11px; }
.faq details > div { padding-bottom: 24px; font-size: .97rem; }
.faq details > div p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   17. FORMS
   -------------------------------------------------------------------------- */
.form-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 18px; }
.field label {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: .86rem; color: var(--navy); margin-bottom: 7px;
}
.field .req { color: #D64545; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: .97rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(18,162,184,.14);
}
.field input::placeholder, .field textarea::placeholder { color: #A6B4C2; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: .82rem; color: var(--muted); margin-top: 14px; }
.consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .86rem; color: var(--body); margin-bottom: 20px;
}
.consent input { width: 17px; height: 17px; margin-top: 3px; flex: none; accent-color: var(--teal); }

/* map embed — keeps its shape on every screen size */
.map-embed {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-soft);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* "How we work" — text on the left, the written plan on the right */
.process-head {
  display: grid; grid-template-columns: 1fr clamp(320px, 38%, 460px);
  gap: clamp(28px, 4vw, 56px); align-items: center;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.process-art { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
  .process-head { grid-template-columns: 1fr; gap: 28px; }
  .process-art { max-width: 360px; margin-inline: auto; }
}

/* "Our story" — three generations, on the About page */
.story-art { width: 100%; max-width: 330px; height: auto; margin-inline: auto; }

/* Client login block — the portal is linked to, never re-created here. */
.portal {
  display: grid; grid-template-columns: 1.35fr .95fr;
  gap: clamp(28px, 4vw, 52px); align-items: start;
}
.portal > * { min-width: 0; }
.portal__note { font-size: .86rem; color: var(--muted); margin-top: 14px; }
.portal__safety {
  background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius); padding: 26px 28px;
  box-shadow: var(--shadow-sm);
}
.portal__safety h3 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.02rem; margin-bottom: 14px;
}
.portal__safety h3 svg { width: 20px; height: 20px; flex: none; color: var(--green-dark); }
.portal__safety p { font-size: .91rem; }
.portal__safety p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .portal { grid-template-columns: 1fr; }
}

/* contact info list */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li { display: flex; gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.contact-list li:last-child { border-bottom: 0; }
.contact-list .ci {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(18,162,184,.12), rgba(124,193,66,.14));
  color: var(--teal-dark);
}
.contact-list .ci svg { width: 19px; height: 19px; }
.contact-list li > div { min-width: 0; }
.contact-list h4 { margin-bottom: 3px; color: var(--navy); }
.contact-list p { font-size: .95rem; margin-bottom: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,.62);
  padding: clamp(52px, 6vw, 76px) 0 32px;
  font-size: .92rem;
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 40px; padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,.11);
}
.site-footer .brand__name { color: #fff; }
.site-footer .brand__sub  { color: rgba(255,255,255,.5); }
.site-footer h4 {
  color: #fff; font-family: var(--font-display); font-size: .82rem;
  font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { color: rgba(255,255,255,.62); }
.footer-links a:hover { color: #fff; }
.footer-about p { margin: 18px 0 0; line-height: 1.7; }

.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li { display: flex; gap: 11px; margin-bottom: 14px; line-height: 1.6; min-width: 0; }
.footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--green); }
/* the email address is long — let it wrap rather than widen the page */
.footer-contact a, .footer-contact span { overflow-wrap: anywhere; min-width: 0; }
.footer-contact a { color: rgba(255,255,255,.78); }
.footer-contact a:hover { color: #fff; }

.footer-legal { padding-top: 28px; }
.footer-legal p { font-size: .8rem; line-height: 1.75; color: rgba(255,255,255,.46); }
.footer-legal strong { color: rgba(255,255,255,.72); font-weight: 600; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .82rem; color: rgba(255,255,255,.46);
}
.footer-bottom nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { color: rgba(255,255,255,.46); }
.footer-bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   19. FLOATING WHATSAPP
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 8px 24px rgba(37,211,102,.42);
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.07); color: #fff; }
.wa-float svg { width: 29px; height: 29px; }

/* --------------------------------------------------------------------------
   20. SCROLL REVEAL
   -------------------------------------------------------------------------- */
/* Content is visible by default. It is only hidden-then-revealed when JavaScript
   is running (the <html> element gets a "js" class), so a visitor with scripts
   blocked still sees the whole page. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.22,.61,.36,1),
              transform .6s cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   21. RESPONSIVE
   -------------------------------------------------------------------------- */
/* The phone number text wraps before the nav collapses — show icon only */
@media (max-width: 1280px) {
  .nav-phone span { display: none; }
}

@media (max-width: 1024px) {
  .hero-grid, .hero-grid--choose { grid-template-columns: 1fr; }
  .hero-panel { max-width: 520px; }
  .goal-card { max-width: 520px; }
  .grid-4, .steps { grid-template-columns: repeat(2, 1fr); }
  .tool-grid, .quote-grid, .post-grid, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 1024px) {
  :root { --header-h: 68px; }

  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(11,43,75,.12);
    padding: 12px 18px 20px;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav-links.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-links a { padding: 14px 8px; border-bottom: 1px solid var(--line-soft); border-radius: 0; }
  .nav-links a.is-active::after { display: none; }
  .nav-cta .btn { padding: 10px 16px; font-size: .85rem; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .trust-strip__inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item { border-left: 0; border-top: 1px solid var(--line-soft); }
  .trust-item:nth-child(-n+2) { border-top: 0; }
  .feature, .grid-2, .field-row { grid-template-columns: 1fr; }
  .feature--flip .feature__media { order: 0; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .grid-3, .grid-4, .steps, .tool-grid, .quote-grid, .post-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .card, .tool-card, .quote { padding: 24px; }

  /* Header on small phones: the brand is the most important thing here, so it
     keeps its size and the login button gives up room instead. */
  .nav { gap: 10px; }
  .nav-phone { display: none; }
  .brand { gap: 10px; }
  .brand__mark { width: 36px; height: 36px; }
  .brand__name { font-size: 1.02rem; }
  .brand__sub { font-size: .7rem; letter-spacing: .12em; }
  .brand__tag { font-size: .655rem; letter-spacing: .06em; }
  .nav-cta { gap: 7px; }
  .nav-cta .btn { padding: 9px 14px; font-size: .82rem; }

  /* Three columns is too tight for a phone — every label wrapped onto two
     lines. Stacked rows instead: value on the left, caption on the right. */
  .hero-metrics { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
  .hero-metric {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; text-align: left; padding: 11px 15px;
  }
  .hero-metric b { font-size: 1rem; letter-spacing: -.01em; }
  .hero-metric span { font-size: .78rem; }

  /* the chooser on a phone: chips stay comfortably tappable, and the sentence
     is allowed to grow since it now wraps over more lines */
  .goal-chips { gap: 7px; }
  .goal-chip { font-size: .8rem; padding: 9px 14px; }
  .goal-say { min-height: 0; margin-bottom: 24px; }
  .goal-card { padding: 22px; }
}

/* Very narrow phones: shorten "Client Login" to "Login" so the company name
   never has to shrink to make room for a button. */
@media (max-width: 430px) {
  .nav-login__full { display: none; }
  .nav-cta .btn { padding: 9px 15px; }
}

/* Smallest phones still in use (320px). Everything has to give a little here
   or the header pushes the page sideways. Kept below 360 so that ordinary
   360px phones still get the larger, more readable company name. */
@media (max-width: 340px) {
  .container { padding-inline: 14px; }
  .nav { gap: 8px; }
  .brand { gap: 8px; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: .9rem; }
  .brand__sub { font-size: .6rem; letter-spacing: .1em; }
  .brand__tag { font-size: .555rem; letter-spacing: .03em; }
  .nav-cta { gap: 6px; }
  .nav-cta .btn { padding: 8px 11px; font-size: .75rem; }
  .nav-toggle { width: 38px; height: 38px; }
  .hero-metric { padding: 10px 12px; }
  .hero-metric b { font-size: .94rem; }
  .hero-metric span { font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  /* the chooser does not advance by itself here — hide the sweep entirely
     rather than let it snap to full width */
  .goal-chips.is-auto .goal-chip.is-on::after { display: none; }
}

/* --------------------------------------------------------------------------
   22. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .wa-float, .cta-band, .nav-toggle { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .js .reveal { opacity: 1; transform: none; }
}