/* =========================================================================
   pages.css — inner-page components for Loan Experts India
   Built on the tokens in base.css. Nothing here redefines a token; every
   colour, radius, shadow and rhythm value comes from :root so the inner
   pages stay locked to the same theme as the home page.

   Depends on: base.css (tokens, .btn, .icon-chip, .eyebrow, .container-*)
               sections.css (.acc accordion, .pill)
   Behaviour:  main.js supplies [data-reveal], [data-tilt], [data-count]
               and the .acc accordion. No extra JS is required.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Page hero
   -----------------------------------------------------------------------
   A light banner that is sized to sit inside the first viewport alongside
   the nav — `min-height: calc(100svh - var(--nav-h))` fills exactly the space
   the nav leaves, and every internal size is capped so the content never
   grows past it. svh is used rather than vh so mobile browser chrome does not
   push the bottom of the banner out of reach.

   Type scale is driven off clamp() so the same rules serve phone and desktop
   without a pile of breakpoint overrides.
   ---------------------------------------------------------------------- */
.phero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
  /* Fill a comfortable band, but never stretch to the full viewport — on a
     tall screen that left the content marooned in the middle with 280px of
     dead space above it. The cap keeps the rhythm; the svh term keeps the
     promise that banner + nav still clear the fold on short screens. */
  min-height: min(calc(100svh - var(--nav-h)), 560px);
  display: grid;
  align-items: center;
  /* asymmetric on purpose: a small top so the banner starts close under the
     nav, and a deep bottom so the stats strip can lift over the seam without
     landing on the buttons. */
  padding-block: clamp(20px, 2.4vw, 34px) clamp(64px, 6vw, 92px);
  /* Soft brand-tinted paper. Light, but not flat white, so the white cards
     and the image still read as raised off it. */
  background:
    radial-gradient(1100px 620px at 88% -12%, rgba(143, 136, 214, 0.22), transparent 62%),
    radial-gradient(760px 480px at 4% 104%, rgba(227, 31, 37, 0.06), transparent 60%),
    linear-gradient(168deg, #ffffff 0%, var(--blue-50) 52%, #edeefb 100%);
}
/* faint dot mesh — dark on light, so it reads as texture rather than noise */
.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(57, 49, 134, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, #000 8%, transparent 78%);
  z-index: -1;
  pointer-events: none;
}

.phero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}

/* ---------- headline ---------- */
/* Identical metrics to .hslide__title on the home banner, so every banner on
   the site shares one type scale. Only the colour differs, because this ground
   is light and the home banner sits on a photograph. */
.phero__title {
  font-family: var(--f-display);
  font-size: clamp(1.85rem, 3.1vw, 2.85rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.028em;
  word-spacing: 0.2em;
  color: var(--ink);
  margin-top: 14px;
  text-wrap: balance;
  max-width: 20ch;
}
/* Emphasis is carried by colour alone — no rule under the words. */
.phero__title em {
  font-style: normal;
  color: var(--blue);
}

.phero__lead {
  margin-top: clamp(12px, 1.4vw, 18px);
  max-width: 56ch;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.7;
  color: var(--body);
}

.phero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 2.2vw, 28px);
}
/* On the light ground the glass button from the dark banner is invisible, so
   it is restyled here rather than editing the class on twenty-five pages. */
.phero .btn-light {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  backdrop-filter: none;
}
.phero .btn-light:hover { border-color: var(--blue-soft); box-shadow: var(--sh-sm); background: #fff; }
.phero .btn-light svg { color: var(--blue); }

/* ---------- breadcrumb ---------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--f-display);
  letter-spacing: -0.005em;
  color: var(--muted);
}
.crumb a { color: var(--body); transition: color 0.3s ease; }
.crumb a:hover { color: var(--blue); }
.crumb svg { width: 13px; height: 13px; opacity: 0.55; flex: none; }
.crumb [aria-current] { color: var(--blue); }

/* the eyebrow ships as --light for the old dark banner; re-tint it here */
.phero .eyebrow--light { color: var(--blue); }
.phero .eyebrow { margin-top: 16px; margin-bottom: 12px; }

/* ---------- spec chips ---------- */
.phero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: clamp(16px, 2vw, 24px);
}
.pspec {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px 9px 11px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: border-color 0.3s ease, transform 0.45s var(--ease), box-shadow 0.4s var(--ease);
}
.pspec:hover { border-color: var(--blue-soft); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.pspec svg { width: 16px; height: 16px; color: var(--blue); flex: none; }
.pspec b {
  font-family: var(--f-display);
  font-size: 0.8438rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.pspec span { font-size: 0.7813rem; color: var(--muted); }

/* ---------- image ---------- */
.phero__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 30px 64px -30px rgba(20, 18, 63, 0.42), 0 2px 8px rgba(20, 18, 63, 0.05);
  /* height is bounded by the viewport, not just by the aspect ratio, so a tall
     photo can never be what pushes the banner past the fold */
  aspect-ratio: 4 / 3;
  max-height: calc(100svh - var(--nav-h) - 132px);
  background: var(--blue-50);
}
.phero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 1.1s var(--ease);
}
.phero__media:hover img { transform: scale(1.06); }
/* A light scrim only at the foot, so the floating badge keeps its contrast
   whatever the photograph is doing behind it. */
.phero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(20, 18, 63, 0) 55%, rgba(20, 18, 63, 0.34) 100%);
  pointer-events: none;
}

.phero__badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-md);
  animation: pheroFloat 5.5s ease-in-out infinite;
}
.phero__badge svg { width: 21px; height: 21px; color: var(--red); flex: none; }
.phero__badge b {
  display: block;
  font-family: var(--f-display);
  font-size: 0.9063rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.phero__badge span { font-size: 0.7188rem; color: var(--body); }
@keyframes pheroFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}


/* -------------------------------------------------------------------------
   2. Key-facts strip — lifts over the hero seam
   -----------------------------------------------------------------------
   Compact by design: the icon sits beside the figure rather than above it, so
   the strip is about a third shorter than a stacked card row. Dividers are
   hairlines that fade at both ends rather than hard rules, and each cell
   carries a brand accent that wipes in on hover.
   ---------------------------------------------------------------------- */
.kfacts {
  position: relative;
  z-index: 3;
  margin-top: clamp(-52px, -3.6vw, -38px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 54px -26px rgba(20, 18, 63, 0.3), 0 2px 6px rgba(20, 18, 63, 0.04);
}

.kfact {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico val" "ico lbl";
  column-gap: 13px;
  align-content: center;
  padding: 18px 20px;
  text-align: left;
  transition: background-color 0.4s ease;
}

/* hairline divider that fades out at the ends */
.kfact + .kfact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
}

/* brand accent that wipes across the top on hover */
.kfact::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease);
}
.kfact:hover { background: linear-gradient(180deg, var(--blue-50), #fff); }
.kfact:hover::after { transform: scaleX(1); }

.kfact svg {
  grid-area: ico;
  align-self: center;
  width: 38px;
  height: 38px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 11px;
  background: linear-gradient(150deg, var(--blue-100), var(--blue-50));
  color: var(--blue);
  transition: background 0.4s ease, color 0.35s ease, transform 0.5s var(--ease);
}
.kfact:hover svg {
  background: linear-gradient(150deg, var(--blue), var(--blue-mid));
  color: #fff;
  transform: rotate(-5deg) scale(1.06);
}

.kfact strong {
  grid-area: val;
  align-self: end;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.35rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.035em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.kfact span {
  grid-area: lbl;
  align-self: start;
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
}

/* Staggered entrance. The strip already carries [data-reveal], so main.js adds
   .is-in — the cells then deal themselves in one after another. */
.kfacts.is-in .kfact { animation: kfDeal 0.55s var(--ease) backwards; }
.kfacts.is-in .kfact:nth-child(1) { animation-delay: 0.05s; }
.kfacts.is-in .kfact:nth-child(2) { animation-delay: 0.13s; }
.kfacts.is-in .kfact:nth-child(3) { animation-delay: 0.21s; }
.kfacts.is-in .kfact:nth-child(4) { animation-delay: 0.29s; }
@keyframes kfDeal {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kfacts.is-in .kfact { animation: none; }
}


/* -------------------------------------------------------------------------
   3. Page layout — article + sticky rail
   ---------------------------------------------------------------------- */
/* The "on this page" rail is gone, so the article is a single centred column
   at a comfortable reading measure rather than an off-centre block with a
   sidebar beside it. */
.plyt {
  /* NOTE: this element also carries .container-wide, and pages.css loads after
     base.css — so the gutter has to be repeated here or it is overridden away
     and the content goes full-bleed on a phone. */
  width: min(100% - var(--gutter) * 2, 880px);
  margin-inline: auto;
}
.plyt__aside {
  margin-top: clamp(36px, 4vw, 56px);
  display: grid;
  /* one card fills the column (the enquiry band wants that); two or more sit
     side by side rather than stacking into a tall stripe */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: start;
}


/* -------------------------------------------------------------------------
   4. Prose — the typographic spine of every inner page
   ---------------------------------------------------------------------- */
.prose { color: var(--body); font-size: 1.0313rem; line-height: 1.78; }
.prose > * + * { margin-top: 20px; }

.prose h2 {
  font-family: var(--f-display);
  font-size: clamp(1.45rem, 1.2rem + 1.05vw, 2.05rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.038em;
  line-height: 1.18;
  margin-top: clamp(48px, 4.5vw, 72px);
  text-wrap: balance;
}
.prose h3 {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.028em;
  line-height: 1.32;
  margin-top: 36px;
}
.prose h4 {
  font-family: var(--f-display);
  font-size: 1.0313rem;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.02em;
  margin-top: 28px;
}
.prose p { max-width: none; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a:not(.btn):not(.link-arrow) {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(57, 49, 134, 0.32);
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.prose a:not(.btn):not(.link-arrow):hover { color: var(--red); text-decoration-color: var(--red); }

/* plain bulleted list */
.prose ul:not([class]) { display: grid; gap: 11px; padding-left: 2px; }
.prose ul:not([class]) li {
  position: relative;
  padding-left: 26px;
}
.prose ul:not([class]) li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.66em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px var(--red-50);
}
.prose ol:not([class]) { display: grid; gap: 11px; counter-reset: pol; padding-left: 2px; }
.prose ol:not([class]) li {
  position: relative;
  padding-left: 38px;
  counter-increment: pol;
}
.prose ol:not([class]) li::before {
  content: counter(pol);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--blue-100);
  color: var(--blue);
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: 800;
}

/* section anchor offset is handled globally by scroll-padding-top in base.css */
.prose [id] { scroll-margin-top: calc(var(--nav-h) + 24px); }


/* -------------------------------------------------------------------------
   5. Checklist — the light-ground counterpart to .checks
   ---------------------------------------------------------------------- */
.chk { display: grid; gap: 10px; }
.chk li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 18px;
  border-radius: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 0.9688rem;
  line-height: 1.6;
  color: var(--body);
  transition: border-color 0.35s ease, transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.chk li:hover {
  border-color: rgba(143, 136, 214, 0.6);
  transform: translateX(4px);
  box-shadow: var(--sh-sm);
}
.chk li svg {
  width: 20px;
  height: 20px;
  color: var(--blue);
  flex: none;
  margin-top: 1px;
}
.chk li b { color: var(--ink); font-weight: 700; }
/* two-up on wide screens for short items */
.chk--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }


/* -------------------------------------------------------------------------
   6. Spec list — key/value pairs (scheme highlight tables)
   ---------------------------------------------------------------------- */
.spec {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh-xs);
  background: #fff;
}
.spec__row {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--line-soft);
}
.spec__row:last-child { border-bottom: 0; }
.spec__row:nth-child(odd) { background: var(--blue-50); }
.spec__row dt {
  padding: 16px 20px;
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  border-right: 1px solid var(--line-soft);
}
.spec__row dd {
  padding: 16px 20px;
  font-size: 0.9375rem;
  color: var(--body);
  line-height: 1.62;
}
.spec__row dd ul { display: grid; gap: 6px; margin: 0; }


/* -------------------------------------------------------------------------
   7. Data tables — rate cards etc.
   Wrapped in .dtable so wide tables scroll inside their own box instead of
   forcing the page to scroll sideways on a phone.
   ---------------------------------------------------------------------- */
.dtable {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  background: #fff;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.dtable table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 0.9063rem;
}
.dtable caption {
  caption-side: top;
  text-align: left;
  padding: 16px 20px 0;
  font-size: 0.8125rem;
  color: var(--muted);
}
.dtable th,
.dtable td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.55;
}
.dtable thead th {
  position: sticky;
  top: 0;
  background: var(--blue-ink);
  color: #fff;
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 0;
}
.dtable tbody tr { transition: background-color 0.3s ease; }
.dtable tbody tr:nth-child(even) { background: var(--blue-50); }
.dtable tbody tr:hover { background: var(--blue-100); }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable td:first-child { font-weight: 600; color: var(--ink); }
/* numeric emphasis */
.dtable .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--blue); font-weight: 700; }
/* hint that a table scrolls */
.dtable__hint {
  display: none;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--muted);
}


/* -------------------------------------------------------------------------
   8. Numbered process steps
   ---------------------------------------------------------------------- */
.steps { display: grid; gap: 0; counter-reset: stp; }
.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 30px;
  counter-increment: stp;
}
.steps__item:last-child { padding-bottom: 0; }
/* connector rail */
.steps__item::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 54px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue-100), transparent);
}
.steps__item:last-child::before { display: none; }
.steps__n {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(150deg, var(--blue), var(--blue-mid));
  color: #fff;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 800;
  box-shadow: var(--sh-blue);
  position: relative;
  z-index: 1;
  transition: transform 0.5s var(--ease);
}
.steps__item:hover .steps__n { transform: scale(1.08) rotate(-4deg); }
.steps__n::after { content: counter(stp, decimal-leading-zero); }
.steps__body { padding-top: 5px; }
.steps__body h3 { margin-top: 0; }
.steps__body p { margin-top: 8px; }


/* -------------------------------------------------------------------------
   9. Document cards
   ---------------------------------------------------------------------- */
.docgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px;
}
.docgrid__card {
  padding: 24px 22px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s ease;
}
.docgrid__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
  border-color: rgba(143, 136, 214, 0.55);
}
.docgrid__card h4 { margin-top: 14px; color: var(--ink); }
.docgrid__card ul { display: grid; gap: 8px; margin-top: 12px; }
.docgrid__card li {
  position: relative;
  padding-left: 22px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--body);
}
.docgrid__card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue-soft);
}


/* -------------------------------------------------------------------------
   10. Callout / note
   ---------------------------------------------------------------------- */
.note {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--r-md);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-left: 3px solid var(--blue);
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--body);
}
.note svg { width: 22px; height: 22px; color: var(--blue); flex: none; margin-top: 2px; }
.note b { color: var(--ink); }
.note--warn { background: var(--red-50); border-color: rgba(227, 31, 37, 0.2); border-left-color: var(--red); }
.note--warn svg { color: var(--red); }


/* -------------------------------------------------------------------------
   11. Sticky rail cards
   ---------------------------------------------------------------------- */
/* on-this-page nav */
.ptoc {
  padding: 22px 20px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
}
.ptoc__title {
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.ptoc ul { display: grid; gap: 2px; margin-top: 14px; }
.ptoc a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--body);
  border-left: 2px solid transparent;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, padding-left 0.35s var(--ease);
}
.ptoc a:hover {
  background: var(--blue-50);
  color: var(--blue);
  border-left-color: var(--blue);
  padding-left: 16px;
}

/* enquiry / call card */
.pcard {
  position: relative;
  overflow: hidden;
  padding: 26px 24px;
  border-radius: var(--r-md);
  background: linear-gradient(155deg, var(--blue-ink), var(--blue-deep));
  color: #fff;
  box-shadow: var(--sh-lg);
}
.pcard::before {
  content: "";
  position: absolute;
  inset: -60% -40% auto auto;
  width: 300px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(143, 136, 214, 0.4), transparent 65%);
}
.pcard > * { position: relative; }
.pcard h4 {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-top: 16px;
}
.pcard p {
  margin-top: 10px;
  font-size: 0.875rem;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.72);
}
.pcard .btn { width: 100%; justify-content: center; margin-top: 18px; }
.pcard__meta {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 10px;
}
.pcard__meta a,
.pcard__meta span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8438rem;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}
.pcard__meta a:hover { color: #fff; }
.pcard__meta svg { width: 15px; height: 15px; color: var(--blue-soft); flex: none; }


/* -------------------------------------------------------------------------
   12. Related services
   ---------------------------------------------------------------------- */
.rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.rel-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s ease;
}
.rel-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
  border-color: rgba(143, 136, 214, 0.55);
}
.rel-card__txt { min-width: 0; }
.rel-card b {
  display: block;
  font-family: var(--f-display);
  font-size: 0.9688rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
}
.rel-card span {
  display: block;
  margin-top: 3px;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.5;
}
.rel-card svg.go { width: 18px; height: 18px; color: var(--blue); margin-left: auto; flex: none; transition: transform 0.4s var(--ease); }
.rel-card:hover svg.go { transform: translateX(4px); }


/* -------------------------------------------------------------------------
   13. Closing CTA band
   ---------------------------------------------------------------------- */
.pcta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(34px, 4.5vw, 60px);
  background: linear-gradient(140deg, var(--blue-ink), var(--blue-deep) 60%, var(--blue) 100%);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  box-shadow: var(--sh-lg);
}
.pcta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(120deg, #000, transparent 70%);
}
.pcta > * { position: relative; }
.pcta h3 {
  font-family: var(--f-display);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.18;
  text-wrap: balance;
}
.pcta p {
  margin-top: 12px;
  max-width: 56ch;
  font-size: 0.9688rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.74);
}
.pcta__btns { display: flex; flex-wrap: wrap; gap: 13px; }


/* -------------------------------------------------------------------------
   14. Services hub (our-services page)
   ---------------------------------------------------------------------- */
.hub-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.hub-cat {
  position: relative;
  overflow: hidden;
  padding: 30px 26px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.hub-cat:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.hub-cat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.hub-cat:hover::before { transform: scaleX(1); }
.hub-cat h3 { font-family: var(--f-display); font-size: 1.25rem; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; margin-top: 16px; }
.hub-cat p { margin-top: 10px; font-size: 0.9063rem; line-height: 1.66; color: var(--body); }
.hub-cat ul { display: grid; gap: 7px; margin-top: 16px; }
.hub-cat li a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--body);
  transition: color 0.3s ease, gap 0.35s var(--ease);
}
.hub-cat li a svg { width: 14px; height: 14px; color: var(--blue-soft); flex: none; }
.hub-cat li a:hover { color: var(--blue); gap: 13px; }


/* -------------------------------------------------------------------------
   15. Responsive
   Breakpoints mirror base.css so the inner pages fold at the same widths
   as the home page.
   ---------------------------------------------------------------------- */
@media (max-width: 1180px) {
  /* Stacked banner. The image belongs between the headline and the description,
     but it is a sibling of the whole text block — so the text wrapper is
     dissolved with display:contents and its children ordered directly. */
  .phero__in {
    display: flex;
    flex-direction: column;
    /* stretch, not centre — the base rule centres the two desktop columns, which
       would otherwise shrink the stacked image to its own content width */
    align-items: stretch;
    gap: clamp(13px, 2.2vw, 18px);
  }
  .phero__in > div:not(.phero__media) { display: contents; }

  .crumb          { order: 1; }
  .phero .eyebrow { order: 2; margin: 0; }
  .phero__title   { order: 3; margin: 0; max-width: 24ch; }
  .phero__media   { order: 4; aspect-ratio: 16 / 9; max-height: 300px; }
  .phero__lead    { order: 5; margin: 0; }
  .phero__specs   { order: 6; margin: 0; }
  .phero__cta     { order: 7; margin: 0; }
  .hub-band { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .kfacts { grid-template-columns: repeat(2, 1fr); }
  /* the divider must follow the wrap: rows 3-4 get a top hairline instead */
  .kfact:nth-child(odd)::before { display: none; }
  .kfact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pcta { grid-template-columns: 1fr; }
  .chk--2 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .phero { padding-block: clamp(16px, 3.4vw, 24px) clamp(52px, 11vw, 66px); min-height: min(calc(100svh - var(--nav-h)), 560px); }
  .phero__media { aspect-ratio: 16 / 9; max-height: 190px; }
  .phero__title { max-width: none; }
  .phero__cta { gap: 10px; }
  .phero__cta .btn { flex: 1 1 auto; justify-content: center; }
  .kfacts { margin-top: -36px; }
  .kfact { padding: 15px 16px; column-gap: 11px; }
  .kfact svg { width: 35px; height: 35px; padding: 8px; }
  .kfact span { font-size: 0.7188rem; }
  .kfact { padding: 20px 18px; }
  .plyt__aside { grid-template-columns: 1fr; }
  .prose { font-size: 1rem; }
  .dtable__hint { display: block; }
  .dtable table { min-width: 440px; }
  /* stack key/value rows so nothing is squeezed to two words a line */
  .spec__row { grid-template-columns: 1fr; }
  .spec__row dt { border-right: 0; border-bottom: 1px solid var(--line-soft); padding-bottom: 10px; }
  .spec__row dd { padding-top: 12px; }
  .steps__item { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .steps__n { width: 44px; height: 44px; font-size: 0.9375rem; border-radius: 13px; }
  .steps__item::before { left: 21px; top: 44px; }
  .phero__badge { left: 14px; bottom: 14px; padding: 10px 14px 10px 12px; }
}

@media (max-width: 460px) {
  .kfacts { grid-template-columns: 1fr; }
  .kfact::before { display: none; }
  .kfact + .kfact { border-top: 1px solid var(--line); }
  .kfact { padding: 14px 16px; }
  .kfact svg { width: 34px; height: 34px; padding: 8px; }
  .phero__specs { gap: 8px; }
  .pspec { padding: 8px 13px 8px 10px; }
}


/* =========================================================================
   PART 2 — institutional pages
   Components for about, team, contact, apply, FAQ, membership and partner
   pages. Same rule as above: no new tokens, everything reads from :root.
   ========================================================================= */


/* -------------------------------------------------------------------------
   16. Pricing / plan tiers
   Used by the membership plans and the partner levels.
   ---------------------------------------------------------------------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 22px;
  align-items: start;
}
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.4s ease;
}
.tier:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(143, 136, 214, 0.55); }

/* the highlighted plan sits slightly proud of the row */
.tier--featured {
  background: linear-gradient(160deg, var(--blue-ink), var(--blue-deep));
  border-color: transparent;
  box-shadow: var(--sh-lg);
  color: #fff;
}
.tier--featured::before {
  content: "";
  position: absolute;
  inset: -55% -45% auto auto;
  width: 320px;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(143, 136, 214, 0.42), transparent 66%);
  pointer-events: none;
}
.tier--featured > * { position: relative; }
.tier--featured .tier__name,
.tier--featured .tier__price { color: #fff; }
.tier--featured .tier__for,
.tier--featured .tier__price span { color: rgba(255, 255, 255, 0.66); }
.tier--featured .tier__list li { color: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.1); }
.tier--featured .tier__list svg { color: var(--blue-soft); }

.tier__badge {
  position: absolute;
  top: -13px;
  left: 26px;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--red-bright), var(--red-dark));
  color: #fff;
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  box-shadow: var(--sh-red);
}
.tier__name {
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  margin-top: 14px;
}
.tier__for { margin-top: 6px; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }
.tier__price {
  margin-top: 18px;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.3rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.05em;
  line-height: 1;
}
.tier__price span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -0.01em;
}
.tier__list { display: grid; gap: 0; margin-top: 20px; flex: 1; }
.tier__list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--body);
}
.tier__list li:last-child { border-bottom: 0; }
.tier__list svg { width: 17px; height: 17px; color: var(--blue); flex: none; margin-top: 2px; }
.tier .btn { margin-top: 22px; width: 100%; justify-content: center; }


/* -------------------------------------------------------------------------
   17. Team
   ---------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}
.tmember {
  padding: 26px 22px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  text-align: center;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s ease;
}
.tmember:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(143, 136, 214, 0.55); }
/* monogram stands in where there is no photograph yet */
.tmember__ini {
  width: 66px;
  height: 66px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--blue), var(--blue-mid));
  color: #fff;
  font-family: var(--f-display);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  box-shadow: var(--sh-blue);
}
.tmember__img {
  width: 66px;
  height: 66px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--blue-100);
}
.tmember b {
  display: block;
  margin-top: 14px;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.tmember em { display: block; margin-top: 8px; font-size: 0.8125rem; color: var(--muted); font-style: normal; line-height: 1.55; }


/* -------------------------------------------------------------------------
   18. Founder message
   ---------------------------------------------------------------------- */
.fnote {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 52px);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--blue-ink), var(--blue-deep));
  color: #fff;
  box-shadow: var(--sh-lg);
}
.fnote::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  mask-image: linear-gradient(130deg, #000, transparent 72%);
}
.fnote > * { position: relative; }
.fnote__mark { width: 44px; height: 44px; color: var(--blue-soft); opacity: 0.55; }
.fnote p {
  margin-top: 18px;
  font-family: var(--f-serif);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.66;
  color: rgba(255, 255, 255, 0.9);
  max-width: 68ch;
}
.fnote p + p { margin-top: 14px; }
.fnote__by {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  gap: 15px;
}
.fnote__by img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: top; flex: none; }
.fnote__by b {
  display: block;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.fnote__by span { display: block; margin-top: 2px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.62); }


/* -------------------------------------------------------------------------
   19. Benefit timeline — "what unlocks when"
   ---------------------------------------------------------------------- */
.tline { display: grid; gap: 0; }
.tline__item {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 26px;
  padding-bottom: 30px;
}
.tline__item:last-child { padding-bottom: 0; }
.tline__item::before {
  content: "";
  position: absolute;
  left: 131px;
  top: 12px;
  bottom: -8px;
  width: 2px;
  background: linear-gradient(180deg, var(--blue-100), transparent);
}
.tline__item:last-child::before { display: none; }
.tline__when {
  text-align: right;
  padding-top: 4px;
  font-family: var(--f-display);
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.015em;
  line-height: 1.4;
  position: relative;
}
.tline__when::after {
  content: "";
  position: absolute;
  right: -32px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue);
  box-shadow: 0 0 0 4px var(--blue-50);
}
.tline__body h4 {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
}
.tline__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tline__chips span {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--blue);
}


/* -------------------------------------------------------------------------
   20. Offices
   ---------------------------------------------------------------------- */
.offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.office {
  overflow: hidden;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.office:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.office__media { aspect-ratio: 16 / 7; overflow: hidden; background: var(--blue-50); }
.office__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--ease); }
.office:hover .office__media img { transform: scale(1.06); }
.office__body { padding: 22px; }
.office__tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}
.office__body h4 {
  margin-top: 10px;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
}
.office__body address {
  margin-top: 8px;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--body);
}
.office__links { display: grid; gap: 8px; margin-top: 16px; }
.office__links a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue);
  transition: gap 0.35s var(--ease), color 0.3s ease;
}
.office__links a svg { width: 15px; height: 15px; flex: none; }
.office__links a:hover { gap: 13px; color: var(--red); }


/* -------------------------------------------------------------------------
   21. Coverage / stats band — pan-India page
   ---------------------------------------------------------------------- */
.cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}
.cover-card {
  padding: 24px 22px;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
  transition: border-color 0.4s ease, transform 0.5s var(--ease);
}
.cover-card:hover { border-color: rgba(143, 136, 214, 0.55); transform: translateY(-4px); }
.cover-card b {
  display: block;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
}
.cover-card ul { display: grid; gap: 6px; margin-top: 12px; }
.cover-card li {
  position: relative;
  padding-left: 18px;
  font-size: 0.8438rem;
  color: var(--body);
  line-height: 1.55;
}
.cover-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-soft);
}


/* -------------------------------------------------------------------------
   22. Responsive — part 2
   ---------------------------------------------------------------------- */
@media (max-width: 720px) {
  .tline__item { grid-template-columns: 1fr; gap: 12px; padding-left: 24px; }
  .tline__when { text-align: left; }
  .tline__when::after { right: auto; left: -24px; top: 5px; }
  .tline__item::before { left: -19px; top: 18px; }
  .tier { padding: 26px 22px; }
  .fnote__by { flex-wrap: wrap; }
}


/* -------------------------------------------------------------------------
   23. Form feedback — AJAX submission states
   Used by public/assets/js/forms.js. The status line is aria-live, so the
   text here is announced to screen readers as well as shown.
   ---------------------------------------------------------------------- */

/* per-field validation error */
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--red);
  background: var(--red-50);
}
.field__error {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--red-dark);
  line-height: 1.45;
}
.form-consent.has-error > span { color: var(--red-dark); }

/* status line under the submit button */
.form-status.is-success {
  color: #1d7a4c;
  background: rgba(47, 191, 113, 0.1);
  border: 1px solid rgba(47, 191, 113, 0.32);
  border-radius: 12px;
  padding: 12px 16px;
}
.form-status.is-error {
  color: var(--red-dark);
  background: var(--red-50);
  border: 1px solid rgba(227, 31, 37, 0.26);
  border-radius: 12px;
  padding: 12px 16px;
}

/* submit button while the request is in flight */
.btn.is-busy { opacity: 0.72; cursor: progress; }
.btn__spin {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: btnSpin 0.7s linear infinite;
  flex: none;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn__spin { animation-duration: 2s; }
}


/* -------------------------------------------------------------------------
   24. Page hero — phone budget
   -----------------------------------------------------------------------
   On a 390x844 handset the banner has roughly 730px to work with once the
   nav and its own padding are removed. The spec chips were the biggest
   offender, stacking three rows deep; shrinking them to two-per-row plus a
   shorter image buys back the ~90px that was pushing the photo below the
   fold.
   ---------------------------------------------------------------------- */
@media (max-width: 560px) {
  .phero__specs { gap: 7px; margin-top: 14px; }

  .pspec { padding: 7px 12px 7px 9px; gap: 7px; }
  .pspec svg { width: 14px; height: 14px; }
  .pspec b { font-size: 0.7813rem; }
  .pspec span { font-size: 0.6875rem; }

  .phero__cta { margin-top: 16px; }
  .phero__cta .btn { padding: 13px 20px; font-size: 0.875rem; }

  /* tie the photo to viewport height, not just width, so a short handset
     (iPhone SE at 667) gets a shorter image rather than an overflow */
  .phero__media { max-height: min(168px, 20svh); border-radius: var(--r-md); }
  .phero__badge { left: 12px; bottom: 12px; padding: 8px 13px 8px 10px; gap: 9px; }
  .phero__badge svg { width: 18px; height: 18px; }
  .phero__badge b { font-size: 0.8125rem; }
  .phero__badge span { font-size: 0.6875rem; }
}

/* Very small phones: the photograph is decorative here — the headline, the
   figures and the two calls to action are what the page is for. */
@media (max-width: 380px) {
  .phero__media { max-height: 142px; }
}

/* Short viewports — an SE-class handset is only 667px tall, so the same width
   rules that fit a 14 Pro still overflow. Everything compresses one more step. */
@media (max-width: 560px) and (max-height: 720px) {
  .phero { padding-block: 14px 40px; min-height: 0; }
  .phero__in { gap: 10px; }
  .phero__specs { gap: 6px; }
  .pspec { padding: 6px 10px 6px 8px; gap: 6px; }
  .pspec b { font-size: 0.75rem; }
  .pspec span { font-size: 0.6563rem; }
  .phero__cta { gap: 8px; }
  .phero__cta .btn { padding: 11px 17px; font-size: 0.8438rem; }
  .phero__media { max-height: min(104px, 15svh); }
}

/* Short handsets (667px and below). Now that every banner shares the home
   type scale, the headline and lead need more room than a short screen can
   give them alongside the photo. The photo is the decorative element, so it
   is the one that goes — everything that does a job stays above the fold. */
@media (max-width: 560px) and (max-height: 700px) {
  .phero__media { display: none; }
  .phero__in { gap: 0; }
  /* With the photo gone the banner ends on the buttons, so the stats strip
     must stop overlapping or it sits on top of the phone CTA. */
  .kfacts { margin-top: 18px; }
}

/* -------------------------------------------------------------------------
   25. Page hero — phone refinements
   ---------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* The breadcrumb costs a line and a half of vertical space on a phone and
     duplicates what the nav and the headline already say. */
  .crumb { display: none; }
}

@media (max-width: 560px) {
  /* Badge trimmed right down — it is a caption on the photo, not a card. */
  .phero__badge {
    left: 10px;
    bottom: 10px;
    padding: 6px 11px 6px 8px;
    gap: 7px;
    border-radius: 11px;
  }
  .phero__badge svg { width: 15px; height: 15px; }
  .phero__badge b { font-size: 0.7188rem; letter-spacing: -0.015em; }
  .phero__badge span { font-size: 0.625rem; }
}

/* -------------------------------------------------------------------------
   26. Banner headline — phone cap
   -----------------------------------------------------------------------
   The shared scale resolves to ~29px on a phone, which is too heavy at that
   width. Both banner headlines are capped at 25px here rather than only the
   inner one, so the home banner and every page banner stay identical.
   ---------------------------------------------------------------------- */
@media (max-width: 560px) {
  .phero__title,
  .hslide__title {
    font-size: clamp(1.375rem, 5.6vw, 1.5625rem);   /* 22px → 25px max */
    line-height: 1.2;
    word-spacing: normal;
  }
  .phero__lead,
  .hslide__lead {
    font-size: 0.9375rem;
    line-height: 1.62;
  }
}

/* -------------------------------------------------------------------------
   27. Mobile type ceiling
   -----------------------------------------------------------------------
   A hard cap for phones: no heading above 25px, no body copy above 14px.
   Declared last so it wins over every clamp() further up, and kept in one
   block so the rule is auditable in a single place rather than scattered
   through a dozen components.
   ---------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* ---- headings: 25px ceiling ---- */
  .phero__title,
  .hslide__title,
  .h-display                    { font-size: clamp(1.375rem, 5.6vw, 1.5625rem); line-height: 1.2; }
  .h-section,
  .prose h2,
  .ad-title                     { font-size: clamp(1.25rem, 5vw, 1.5rem); line-height: 1.24; }
  .prose h3,
  .hub-cat h3,
  .steps__body h3,
  .tier__name,
  .pcta h3,
  .fnote__by b                  { font-size: clamp(1rem, 4vw, 1.125rem); line-height: 1.3; }
  .prose h4,
  .docgrid__card h4,
  .ad-card__head,
  .office__body h4,
  .tmember b                    { font-size: 0.9375rem; }
  .sec-head .eyebrow,
  .eyebrow                      { font-size: 0.6875rem; }

  /* ---- body copy: 14px ceiling ---- */
  .prose,
  .prose p,
  .prose li,
  .lead,
  .phero__lead,
  .hslide__lead,
  .sec-head p,
  .hub-cat p,
  .steps__body p,
  .note p,
  .docgrid__card li,
  .chk li,
  .spec__row dd,
  .tier__for,
  .tier__list li,
  .pcta p,
  .rel-card span,
  .acc__panel p,
  .office__body address,
  .cover-card li,
  .tmember em                   { font-size: 0.875rem; line-height: 1.62; }

  .spec__row dt,
  .dtable th,
  .dtable td                    { font-size: 0.8125rem; }

  /* nothing may push the page sideways */
  .prose table,
  .prose pre                    { max-width: 100%; }
}


/* =========================================================================
   PART 3 — section blocks used by the restructured company pages
   ========================================================================= */

/* -------------------------------------------------------------------------
   28. Split — text beside an image
   ---------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.split__media {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 11;
  box-shadow: 0 30px 64px -30px rgba(20, 18, 63, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.9);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.split__media:hover img { transform: scale(1.05); }
.split__tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 16px 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: var(--sh-md);
}
.split__tag svg { width: 20px; height: 20px; color: var(--red); flex: none; }
.split__tag b { display: block; font-family: var(--f-display); font-size: 0.875rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.split__tag span span { display: block; font-size: 0.7188rem; color: var(--body); }

/* pull-quote style callout */
.quote-mark {
  position: relative;
  margin-top: 26px;
  padding: 20px 22px 20px 26px;
  border-radius: var(--r-md);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
}
.quote-mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), var(--red));
}
.quote-mark p { font-size: 0.9375rem; line-height: 1.7; color: var(--body); }
.quote-mark strong { color: var(--ink); }

/* -------------------------------------------------------------------------
   29. Dark-band variants + note
   ---------------------------------------------------------------------- */
.rel-card--dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.rel-card--dark:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
.rel-card--dark b { color: #fff; }
.rel-card--dark span span,
.rel-card--dark .rel-card__txt span { color: rgba(255, 255, 255, 0.66); }
.rel-card--dark svg.go { color: var(--blue-soft); }

.band-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 780px;
  margin: 36px auto 0;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}
.band-note svg { width: 21px; height: 21px; color: var(--blue-soft); flex: none; margin-top: 3px; }
.band-note b { color: #fff; }

/* -------------------------------------------------------------------------
   30. Flow row — the four-step process, side by side on desktop
   ---------------------------------------------------------------------- */
.flowrow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: fr;
}
.flowrow__item {
  position: relative;
  padding: 26px 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease), border-color 0.4s ease;
}
.flowrow__item:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(143, 136, 214, 0.5); }
/* connector between the cards */
.flowrow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 46px;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-100), transparent);
}
.flowrow__n {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--blue), var(--blue-mid));
  color: #fff;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 800;
  box-shadow: var(--sh-blue);
  transition: transform 0.5s var(--ease);
}
.flowrow__item:hover .flowrow__n { transform: rotate(-6deg) scale(1.07); }
.flowrow__item h3 {
  margin-top: 16px;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1.3;
}
.flowrow__item p { margin-top: 9px; font-size: 0.875rem; line-height: 1.62; color: var(--body); }

/* -------------------------------------------------------------------------
   31. Duo cards + tick lists
   ---------------------------------------------------------------------- */
.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.duo__card {
  padding: clamp(24px, 3vw, 34px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform 0.55s var(--ease), box-shadow 0.55s var(--ease);
}
.duo__card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.duo__card h3 {
  margin-top: 16px;
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
}
.ticks { display: grid; gap: 11px; margin-top: 18px; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 0.9375rem; line-height: 1.6; color: var(--body); }
.ticks svg { width: 18px; height: 18px; color: var(--blue); flex: none; margin-top: 2px; }

/* -------------------------------------------------------------------------
   32. Discipline / value grid
   ---------------------------------------------------------------------- */
.disc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.disc-grid--4 { grid-template-columns: repeat(4, 1fr); }
.disc {
  position: relative;
  overflow: hidden;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s ease;
}
.disc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.disc:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(143, 136, 214, 0.5); }
.disc:hover::before { transform: scaleX(1); }
.disc b {
  display: block;
  margin-top: 14px;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
}
.disc > span:last-child { display: block; margin-top: 6px; font-size: 0.875rem; line-height: 1.6; color: var(--body); }
.disc__i {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--blue-100), var(--blue-50));
  color: var(--blue);
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.disc--num:hover .disc__i { background: linear-gradient(150deg, var(--blue), var(--blue-mid)); color: #fff; }

/* -------------------------------------------------------------------------
   33. Responsive — section blocks
   ---------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .flowrow { grid-template-columns: repeat(2, 1fr); }
  .flowrow__item:nth-child(2)::after { display: none; }
  .disc-grid, .disc-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split__media { aspect-ratio: 16 / 9; order: -1; }
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .flowrow { grid-template-columns: 1fr; gap: 14px; }
  .flowrow__item::after { display: none !important; }
  .flowrow__item { padding: 20px 18px; }
  .disc-grid, .disc-grid--4 { grid-template-columns: 1fr; gap: 12px; }
  .disc { padding: 18px 16px; }
  .quote-mark { padding: 16px 16px 16px 20px; }
  .band-note { padding: 15px 16px; gap: 11px; }
  .split__tag { left: 10px; bottom: 10px; padding: 8px 13px 8px 10px; }
  .split__tag b { font-size: 0.8125rem; }
  .duo__card { padding: 20px 18px; }
}


/* =========================================================================
   PART 4 — content rhythm
   -------------------------------------------------------------------------
   The article body was one long white column, which read flat however good
   the copy was. These rules give it a tinted ground, number the sections so
   the structure is legible at a glance, and tint each component differently
   so the eye can tell a checklist from a spec table from a callout without
   reading a word. No markup changes — every service page picks this up.
   ========================================================================= */

/* ---- 34. tinted ground under the article ---------------------------------
   :has() targets the main content section without needing a new class. Where
   it is unsupported the section simply stays white, which is the old look. */
.section:has(> .plyt) {
  background:
    radial-gradient(900px 420px at 92% 2%, rgba(143, 136, 214, 0.11), transparent 60%),
    radial-gradient(700px 380px at 4% 98%, rgba(227, 31, 37, 0.045), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, var(--blue-50) 42%, var(--paper) 100%);
}

/* ---- 35. numbered section headings --------------------------------------
   A counter chip replaces the small red tick. It anchors each section, makes
   the page structure scannable, and alternates blue/red so consecutive
   sections never read as one block. */
.prose { counter-reset: psec; }

.prose h2 {
  counter-increment: psec;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 15px;
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
/* the first heading needs no divider above it */
.prose > h2:first-of-type { padding-top: 0; border-top: 0; }

.prose h2::before {
  content: counter(psec, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--blue), var(--blue-mid));
  color: #fff;
  font-family: var(--f-display);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0;
  box-shadow: var(--sh-blue);
}
/* every other section takes the red accent so the page has a pulse */
.prose h2:nth-of-type(even)::before {
  background: linear-gradient(150deg, var(--red-bright), var(--red-dark));
  box-shadow: var(--sh-red);
}

/* h3 keeps a quieter marker */
.prose h3 {
  position: relative;
  padding-left: 15px;
}
.prose h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.36em;
  width: 4px;
  height: 1.05em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--blue), var(--blue-soft));
}

/* ---- 36. component tints -------------------------------------------------
   Each block type gets its own ground so they are distinguishable at a
   glance, and all of them sit on white so they lift off the tinted section. */

/* checklists read as the "positive" block — soft blue wash */
.chk li {
  background: linear-gradient(140deg, #fff 55%, var(--blue-50));
  border-color: var(--blue-100);
}
.chk li:hover { border-color: var(--blue-soft); background: linear-gradient(140deg, #fff 30%, var(--blue-50)); }

/* spec lists read as "reference data" — solid tinted key column */
.spec { box-shadow: var(--sh-sm); }
.spec__row:nth-child(odd) { background: #fff; }
.spec__row dt {
  background: linear-gradient(150deg, var(--blue-50), #fff);
  border-right-color: var(--blue-100);
}

/* document cards get a coloured top edge that fills on hover */
.docgrid__card { position: relative; overflow: hidden; }
.docgrid__card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--red));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.docgrid__card:hover::before { transform: scaleX(1); }

/* the callout is the focus block on most pages — give it real presence */
.note {
  background: linear-gradient(135deg, var(--blue-50), #fff 70%);
  border-color: var(--blue-100);
  border-left-width: 4px;
  box-shadow: var(--sh-xs);
}
.note--warn {
  background: linear-gradient(135deg, var(--red-50), #fff 70%);
  border-color: rgba(227, 31, 37, 0.2);
  border-left-color: var(--red);
}

/* tables sit on white with a touch more lift, since they carry the numbers */
.dtable { box-shadow: var(--sh-sm); }

/* the numbered process rail picks up the alternating accent too */
.steps__item:nth-child(even) .steps__n {
  background: linear-gradient(150deg, var(--red-bright), var(--red-dark));
  box-shadow: var(--sh-red);
}

/* ---- 37. mobile ---------------------------------------------------------- */
@media (max-width: 560px) {
  .prose h2 { column-gap: 11px; padding-top: 22px; }
  .prose h2::before { width: 36px; height: 36px; border-radius: 11px; font-size: 0.8125rem; }
  .prose h3 { padding-left: 12px; }
  .chk li { padding: 13px 15px; }
}


/* =========================================================================
   PART 5 — enquiry band
   -------------------------------------------------------------------------
   .pcard was drawn for a 336px sidebar. With the rail gone it stretched to the
   full column and read as a large empty navy rectangle. .pcard--band relays it
   horizontally: copy left, actions right, contact row beneath a divider — and
   lifts the contrast so the text is actually readable on the dark ground.

   The plain .pcard rules above still stand for the six pages that use their
   own markup, so nothing there changes.
   ========================================================================= */

.pcard--band {
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-xl);
  /* deeper, warmer navy than the flat original, with a brand glow top-right
     and a red kicker bottom-left so it is not a single dead colour */
  background:
    radial-gradient(720px 340px at 88% -20%, rgba(143, 136, 214, 0.42), transparent 62%),
    radial-gradient(520px 300px at 0% 118%, rgba(227, 31, 37, 0.26), transparent 60%),
    linear-gradient(140deg, #16133c 0%, #211b5e 52%, #2b2374 100%);
  box-shadow: 0 30px 70px -32px rgba(20, 18, 63, 0.62), 0 2px 8px rgba(20, 18, 63, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
/* fine dot mesh for texture — the flat gradient alone looked plasticky */
.pcard--band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(125deg, #000, transparent 62%);
  pointer-events: none;
}
.pcard--band > * { position: relative; }

/* ---------- top row ---------- */
.pcard__top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2vw, 26px);
}

.pcard__ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  flex: none;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  color: #fff;
  transition: transform 0.5s var(--ease), background-color 0.4s ease;
}
.pcard__ico svg { width: 25px; height: 25px; }
.pcard--band:hover .pcard__ico { transform: rotate(-6deg) scale(1.06); background: rgba(255, 255, 255, 0.16); }

.pcard__copy h4 {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.032em;
  line-height: 1.22;
  margin-top: 0;
}
.pcard__copy p {
  margin-top: 8px;
  max-width: 56ch;
  /* was 0.72 alpha, which is where the "content not visible" came from */
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.pcard__act { display: grid; gap: 10px; justify-items: stretch; }
.pcard__act .btn { width: 100%; justify-content: center; white-space: nowrap; }

.pcard__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--f-display);
  font-size: 0.9063rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.35s var(--ease);
}
.pcard__call svg { width: 16px; height: 16px; color: var(--blue-soft); }
.pcard__call:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.42); transform: translateY(-1px); }

/* ---------- contact row ---------- */
.pcard--band .pcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: clamp(18px, 2.2vw, 24px);
  padding-top: clamp(16px, 2vw, 20px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pcard--band .pcard__meta a,
.pcard--band .pcard__meta span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8438rem;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}
.pcard--band .pcard__meta a:hover { color: #fff; }
.pcard--band .pcard__meta svg { width: 15px; height: 15px; color: var(--blue-soft); flex: none; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .pcard__top { grid-template-columns: auto minmax(0, 1fr); }
  .pcard__act { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-top: 4px; }
}
@media (max-width: 560px) {
  .pcard--band { padding: 20px 18px; border-radius: var(--r-lg); }
  .pcard__top { grid-template-columns: auto minmax(0, 1fr); gap: 13px; }
  .pcard__ico { width: 44px; height: 44px; border-radius: 13px; }
  .pcard__ico svg { width: 20px; height: 20px; }
  .pcard__copy h4 { font-size: 1.0625rem; }
  .pcard__copy p { font-size: 0.875rem; margin-top: 6px; }
  .pcard__act { grid-template-columns: 1fr; gap: 8px; }
  .pcard__act .btn { padding: 12px 18px; font-size: 0.875rem; }
  .pcard__call { padding: 11px 18px; font-size: 0.875rem; }
  .pcard--band .pcard__meta { gap: 9px 18px; font-size: 0.8125rem; }
}

/* -------------------------------------------------------------------------
   38. Dark-ground corrections
   -----------------------------------------------------------------------
   base.css carries `h1, h2, h3, h4, h5 { color: var(--ink) }`. A declared
   value on the element beats the white `color` inherited from a dark card,
   whatever the specificity — so every heading sitting on a navy ground was
   rendering dark-on-dark. These set it back explicitly.
   ---------------------------------------------------------------------- */
.pcard h4,
.pcta h3,
.fnote h3,
.svc2-group--dark h3,
.svc2-group--dark h4 { color: #fff; }

/* The role label under a team member is an unclassed <span>, but `.tmember
   span` also matched the initials monogram — which is a span too — and
   repainted it brand blue on a brand blue circle, making the letters vanish.
   Scoped to unclassed spans only. */
.tmember > span:not([class]) {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--blue);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   39. FAQ — pairing the two columns
   -----------------------------------------------------------------------
   The section read as two unrelated halves: a washed-out help card floating
   on near-identical paper at the left, and a row of flat white bars at the
   right. Both columns now carry weight — a solid navy anchor on the left
   against airy, clearly-separated rows on the right — so the eye reads them
   as one composition instead of two lists.
   ---------------------------------------------------------------------- */
.faq__grid { align-items: start; }

/* The help card was blue-50 → #fff sitting on --paper: a 2% difference, so it
   effectively disappeared. Navy gives the left column something to stand on. */
.faq__help {
  position: relative;
  overflow: hidden;
  margin-top: 28px;
  padding: 26px 24px 24px;
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 6% 0%, rgba(122, 108, 255, 0.34), transparent 62%),
    linear-gradient(155deg, var(--blue-ink), var(--blue-deep) 72%, #2a2472);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 44px -22px rgba(20, 18, 63, 0.72);
  color: #fff;
}
/* red kicker so the card ties back to the eyebrow above it */
.faq__help::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 0;
  width: 46px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--red), var(--red-bright));
}
.faq__help .icon-chip {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  box-shadow: none;
}
.faq__help b {
  display: block;
  margin-top: 16px;
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.024em;
  color: #fff;
}
.faq__help p {
  margin-top: 7px;
  font-size: 0.9063rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
}
/* .btn-navy on navy is invisible — white pill instead */
.faq__help .btn {
  margin-top: 18px;
  width: 100%;
  justify-content: center;
  background: #fff;
  color: var(--blue-ink);
  border: 0;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.65);
}
.faq__help .btn:hover { background: var(--red); color: #fff; }

/* --- the rows -------------------------------------------------------- */
.acc { gap: 14px; }

/* the bare number was a loose glyph; a chip gives each row a fixed anchor
   so the questions all start on the same x whatever the number's width */
.acc__btn i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 0.7188rem;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: var(--blue);
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.3s ease;
}
.acc__item:hover { transform: translateY(-2px); border-color: var(--blue-100); box-shadow: var(--sh-sm); }
.acc__item:hover .acc__btn i { background: var(--blue); border-color: var(--blue); color: #fff; }

.acc__item.is-open {
  background: linear-gradient(180deg, #fff, var(--blue-50));
  transform: none;
}
.acc__item.is-open::before { width: 4px; }
.acc__item.is-open .acc__btn i { background: var(--red); border-color: var(--red); color: #fff; }
.acc__ico { width: 32px; height: 32px; }
.acc__item.is-open .acc__ico { background: var(--red-50); border-color: #f6cdcf; }
.acc__item.is-open .acc__ico::before,
.acc__item.is-open .acc__ico::after { background: var(--red); }

@media (max-width: 900px) {
  .faq__help { margin-top: 22px; padding: 22px 20px; }
  .faq__help .btn { width: auto; }
}

/* -------------------------------------------------------------------------
   40. Related services — alignment and accent
   -----------------------------------------------------------------------
   Two faults. `align-items: center` centred each card on its own content, so
   a one-line subtitle pushed that card's icon and title several pixels off
   the line its neighbours sat on — the row never looked level. And the chip
   was blue-50 → #fff behind a --line border, which on white is a ghost, so
   the glyph inside read as a smudge rather than as the thing it depicts.

   Now a three-column grid top-aligns every card, and each card carries one
   of three rotating accents that colours the chip, the rail and the hover.
   ---------------------------------------------------------------------- */
.rel-grid { gap: 16px; }

.rel-card {
  --acc: var(--blue);
  --acc-2: var(--blue-mid);
  --acc-tint: var(--blue-50);
  --acc-line: var(--blue-100);

  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;        /* <- the fix: chips and titles line up card to card */
  gap: 15px;
  position: relative;
  overflow: hidden;
  padding: 20px 20px 21px;
  background:
    radial-gradient(90% 120% at 0% 0%, var(--acc-tint), transparent 58%),
    #fff;
}
.rel-grid > .rel-card:nth-child(3n + 2) {
  --acc: var(--red);
  --acc-2: var(--red-bright);
  --acc-tint: var(--red-50);
  --acc-line: #f7d6d7;
}
.rel-grid > .rel-card:nth-child(3n + 3) {
  --acc: #0e7c6c;
  --acc-2: #14a189;
  --acc-tint: #e8f6f3;
  --acc-line: #c6e9e1;
}

/* accent rail across the top, drawn in on hover */
.rel-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--acc), var(--acc-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.rel-card:hover::before { transform: scaleX(1); }
.rel-card:hover { border-color: var(--acc-line); }

.rel-card .icon-chip {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--acc-tint);
  border: 1px solid var(--acc-line);
  color: var(--acc);
  box-shadow: none;
}
.rel-card:hover .icon-chip {
  background: linear-gradient(150deg, var(--acc), var(--acc-2));
  border-color: transparent;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--acc) 70%, transparent);
}
.rel-card:hover b { color: var(--acc); }
.rel-card b { transition: color 0.3s ease; }

.rel-card svg.go {
  align-self: start;
  margin-top: 13px;          /* sits on the title line, not the card's centre */
  color: var(--acc);
  opacity: 0.5;
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}
.rel-card:hover svg.go { opacity: 1; }

@media (max-width: 560px) {
  .rel-card { padding: 16px; gap: 13px; }
  .rel-card .icon-chip { width: 42px; height: 42px; border-radius: 12px; }
  .rel-card svg.go { margin-top: 10px; }
}

/* The dark variant is declared earlier in this file, so the white background
   added above would now win on source order. Re-stated here to keep it. */
.rel-grid > .rel-card--dark,
.rel-card--dark {
  --acc: var(--blue-soft);
  --acc-2: #b7b1ea;
  --acc-tint: rgba(255, 255, 255, 0.07);
  --acc-line: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.rel-card--dark:hover { background: rgba(255, 255, 255, 0.1); }
.rel-card--dark .icon-chip { color: #fff; }
.rel-card--dark:hover b { color: #fff; }

/* -------------------------------------------------------------------------
   41. Featured tier glow — horizontal overflow fix
   -----------------------------------------------------------------------
   The glow was an absolutely-positioned ::before at `right: -45%`, so on a
   390px phone it reached 157px past the card and gave the whole document a
   526px scrollWidth — the page scrolled sideways. Painting the same glow as
   a background layer keeps it identical to look at but clips it to the
   border-box, which is exactly what a decorative wash should do.
   ---------------------------------------------------------------------- */
.tier--featured {
  background:
    radial-gradient(320px 320px at 112% -16%, rgba(143, 136, 214, 0.42), transparent 66%),
    linear-gradient(160deg, var(--blue-ink), var(--blue-deep));
}
.tier--featured::before { content: none; }

/* -------------------------------------------------------------------------
   42. Footer
   -----------------------------------------------------------------------
   Overrides live here rather than in sections.css so the original block
   stays readable as the base definition.

   Four things were wrong. The logo sat in a fixed 300x150 white box while
   the artwork is 540x219 — a 2.46:1 image in a 2:1 plate, so a third of the
   slab was bare white glare against navy. Body copy and links ran at 0.60 /
   0.62 alpha, which is below comfortable reading on a dark ground. Hovers
   only changed colour. And the three offices were stacked in a quarter-width
   column, wrapping each address to four lines.
   ---------------------------------------------------------------------- */

/* a warm lift at the top edge and a cool one bottom-right, so the navy has
   some depth instead of reading as one flat fill */
.footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(122, 108, 255, 0.2), transparent 60%),
    radial-gradient(70% 50% at 100% 100%, rgba(227, 31, 37, 0.12), transparent 62%);
}
/* hairline of brand colour across the very top */
.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, var(--blue-soft), var(--red) 45%, var(--blue-soft) 90%);
  opacity: 0.75;
}

/* --- logo ------------------------------------------------------------- */
/* The plate now hugs the artwork instead of boxing it, and is a soft warm
   white rather than pure #fff so it sits on the navy instead of punching
   a hole in it. */
.footer__logo {
  width: auto;
  height: auto;
  display: inline-block;
  padding: 13px 17px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: linear-gradient(168deg, #fff, #eceaf7);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.75), inset 0 1px 0 #fff;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.footer__logo:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.85), inset 0 1px 0 #fff; }
/* 540x219 is already 2.46:1, so the old aspect-ratio + object-fit crop was
   a no-op that only ever fought the fixed plate height */
.footer__logo img {
  display: block;
  width: 212px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* --- legibility ------------------------------------------------------- */
.footer p { color: rgba(255, 255, 255, 0.72); }
.footer__links a { color: rgba(255, 255, 255, 0.74); }
.footer__contact span { color: rgba(255, 255, 255, 0.5); }
.footer__contact a,
.footer__contact address { color: rgba(255, 255, 255, 0.88); }
.footer__trust-item { color: rgba(255, 255, 255, 0.78); }
.footer__bottom { color: rgba(255, 255, 255, 0.62); }
.footer__bottom nav a { transition: color 0.25s ease; }

/* --- hover ------------------------------------------------------------ */
/* the dot grows into a short rule as the link slides — reads as motion
   rather than just a colour swap */
.footer__links a::before { width: 5px; transition: width 0.32s var(--ease), background-color 0.25s ease; }
.footer__links a:hover::before { width: 14px; background: var(--red); }

.footer__contact li { transition: transform 0.4s var(--ease); }
.footer__contact li:hover { transform: translateX(3px); }
.footer__contact i { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.3s ease; }
.footer__contact li:hover i {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
}

.footer__trust-item { transition: color 0.3s ease; }
.footer__trust-item svg { transition: color 0.3s ease, transform 0.4s var(--ease); }
.footer__trust-item:hover { color: #fff; }
.footer__trust-item:hover svg { color: var(--red-bright); transform: translateY(-2px); }

.footer__bottom nav a { position: relative; }
.footer__bottom nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.footer__bottom nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* --- offices ---------------------------------------------------------- */
.footer__offices { padding: 4px 0 40px; }
.foffs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.foff {
  --acc: var(--blue-soft);
  --acc-2: #b9b2f0;
  position: relative;
  overflow: hidden;
  padding: 22px 22px 20px;
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 255, 255, 0.09), transparent 60%),
    rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.11);
  transition: transform 0.5s var(--ease), background-color 0.4s ease, border-color 0.4s ease,
    box-shadow 0.5s var(--ease);
}
.foffs > .foff:nth-child(2) { --acc: var(--red-bright); --acc-2: #ff7377; }
.foffs > .foff:nth-child(3) { --acc: #2fc3a8; --acc-2: #7ee0cd; }

/* accent rail down the left, drawn in on hover */
.foff::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--acc), var(--acc-2));
  transform: scaleY(0.28);
  transform-origin: top;
  transition: transform 0.55s var(--ease);
}
.foff:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.075);
  border-color: color-mix(in srgb, var(--acc) 42%, transparent);
  box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.9);
}
.foff:hover::before { transform: scaleY(1); }

.foff__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--acc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 34%, transparent);
  color: var(--acc);
  transition: background-color 0.4s ease, color 0.3s ease, transform 0.45s var(--ease);
}
.foff__ico svg { width: 17px; height: 17px; }
.foff:hover .foff__ico {
  background: color-mix(in srgb, var(--acc) 30%, transparent);
  color: #fff;
  transform: scale(1.06);
}

.foff__tag {
  display: block;
  margin-top: 15px;
  font-size: 0.6563rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acc);
}
.foff__city {
  display: block;
  margin-top: 5px;
  font-family: var(--f-display);
  font-size: 1.1875rem;
  font-weight: 800;
  letter-spacing: -0.028em;
  color: #fff;
}
.foff__city em {
  font-style: normal;
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.5);
}
.foff__city em::before { content: ", "; }
.foff address {
  margin-top: 9px;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 900px) {
  .footer__offices { padding-bottom: 30px; }
  .foff { padding: 18px 18px 17px; }
}
@media (max-width: 560px) {
  .footer__logo img { width: 182px; }
  .foff__city { font-size: 1.0625rem; }
  .foff address { font-size: 0.8125rem; }
}

/* The ::after wash is the footer's last positioned child, so with both at
   z-index auto it painted over .container-wide and greyed the copy. Put the
   wash on layer 0 and lift the content above it. */
.footer::after { z-index: 0; }
.footer > .container-wide { position: relative; z-index: 1; }

/* A rail scaled to 0.28 read as a clipped fragment rather than a deliberate
   mark. Full height, dimmed, brightening on hover. */
.foff::before { transform: none; opacity: 0.45; transition: opacity 0.45s ease; }
.foff:hover::before { transform: none; opacity: 1; }