/* Self-hosted fonts (Fontsource latin subsets) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }
/* Metric-matched fallbacks — kill the font-swap layout shift (cold-load CLS 0.07 -> ~0.0004).
   size-adjust values were MEASURED by rendering a reference string in-browser (canvas width
   comparison vs Arial), NOT read from font tables — OS/2 xAvgCharWidth is not comparable
   across fonts and gave a wrong 121% for Inter. If recomputing: measure, do not read tables. */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 106.97%; }
@font-face { font-family: 'PJS Fallback'; src: local('Arial'); size-adjust: 101.21%; }

/* ============================================================
   Harsiddhi Services — Design System v1.0 (Phase 1)
   "Civic premium": institutional trust, human warmth.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Ink blue — trust, authority, permanence */
  --ink-950: #0B1830;
  --ink-900: #122443;
  --ink-800: #1A3563;
  --ink-700: #24467E;
  --ink-600: #31578F;
  --ink-100: #DCE4F2;
  --ink-50:  #EEF2F9;

  /* Saffron — action, warmth. CTAs only. */
  --saffron-500: #E9A13B;
  --saffron-400: #F0B25C;
  --saffron-700: #8A5A06;
  --saffron-50:  #FBF3E4;
  --saffron-200: #F2DFBE;

  /* WhatsApp / success green */
  --green-700: #0E7C3F;
  --green-800: #0B6633;
  --green-wa:  #25D366;
  --green-50:  #E9F6EE;

  /* Neutrals — warm paper */
  --paper:        #FAF7F2;
  --surface:      #FFFFFF;
  --border:       #E6DFD3;
  --border-strong:#D5CCBB;
  --text:         #232E42;
  --text-muted:   #56617A;
  --text-on-dark: #F4F1EA;
  --text-on-dark-muted: #B8C2D8;

  /* Type */
  --font-display: "Plus Jakarta Sans", "PJS Fallback", "Segoe UI", Roboto, -apple-system, sans-serif;
  --font-text: "Inter", "Inter Fallback", -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-sm:   0.875rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.1875rem);
  --fs-h4:   clamp(1.25rem, 1.15rem + 0.5vw, 1.4375rem);
  --fs-h3:   clamp(1.5rem, 1.35rem + 0.7vw, 1.75rem);
  --fs-h2:   clamp(1.75rem, 1.5rem + 1.2vw, 2.125rem);
  --fs-h1:   clamp(2.375rem, 1.9rem + 2.4vw, 3.25rem);

  /* Space & shape */
  --space-section: clamp(4rem, 9vw, 7rem);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(18, 36, 67, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(18, 36, 67, 0.18);

  --container: 72rem;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
iframe { border: 0; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.18;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 600; color: var(--ink-900); line-height: 1.3; }

p { max-width: 65ch; }

a { color: var(--ink-800); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink-600); }

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

::selection { background: var(--ink-100); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink-900); color: #fff;
  padding: 0.75rem 1.25rem; z-index: 200; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 3. Layout helpers ---------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.section { padding-block: var(--space-section); }
.section--tint { background: var(--ink-50); }
.section--dark { background: var(--ink-900); }
.section--dark h2, .section--dark h3 { color: var(--text-on-dark); }
.section--dark p { color: var(--text-on-dark-muted); }
/* Light cards inside dark sections keep light-surface text colors */
.section--dark .card h2, .section--dark .card h3 { color: var(--ink-900); }
.section--dark .card p { color: var(--text-muted); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center p { margin-inline: auto; }
.section-head .kicker { margin-bottom: 0.75rem; }
.section-head p { margin-top: 1rem; font-size: var(--fs-lead); color: var(--text-muted); }

.kicker {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--saffron-700);
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.9375rem 1.5rem;
  min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--saffron-500); color: var(--ink-950); }
.btn--primary:hover { background: var(--saffron-400); color: var(--ink-950); }

.btn--whatsapp { background: var(--green-700); color: #fff; }
.btn--whatsapp:hover { background: var(--green-800); color: #fff; }

.btn--outline { background: transparent; color: var(--ink-800); border-color: var(--ink-800); }
.btn--outline:hover { background: var(--ink-50); color: var(--ink-800); }

.btn--outline-light { background: transparent; color: var(--text-on-dark); border-color: rgba(244, 241, 234, 0.45); }
.btn--outline-light:hover { background: rgba(244, 241, 234, 0.1); color: #fff; }

.btn--sm { padding: 0.625rem 1rem; font-size: 0.9375rem; }
.btn--lg { padding: 1.0625rem 1.875rem; font-size: 1.0625rem; }

/* ---------- 5. Chips & badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--radius-pill);
  background: rgba(244, 241, 234, 0.08);
  border: 1px solid rgba(244, 241, 234, 0.22);
  color: var(--text-on-dark);
}
.chip svg { width: 15px; height: 15px; color: var(--saffron-400); flex: none; }

.chip--light {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
.chip--light svg { color: var(--green-700); }

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--saffron-500);
  color: var(--ink-950);
}
.badge--soft { background: var(--saffron-50); color: var(--saffron-700); }
.badge--ink { background: var(--ink-50); color: var(--ink-800); }

/* ---------- 6. Top bar ---------- */
.topbar {
  background: var(--ink-950);
  color: var(--text-on-dark-muted);
  font-size: 0.8125rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 38px;
  padding-block: 0.375rem;
}
.topbar a { color: var(--text-on-dark); text-decoration: none; font-weight: 500; }
.topbar a:hover { color: var(--saffron-400); }
.topbar__group { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: 0.375rem; }
.topbar__item svg { width: 13px; height: 13px; color: var(--saffron-400); }
@media (max-width: 640px) { .topbar__hide-sm { display: none; } }

/* ---------- 7. Header / nav ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.brand { display: inline-flex; align-items: center; gap: 0.6875rem; text-decoration: none; flex: none; }
.brand__name { white-space: nowrap; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.1;
}
.brand__tag {
  display: block;
  font-family: var(--font-text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--saffron-700);
}

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  padding: 0.5rem 0.8125rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav a:hover { background: var(--ink-50); color: var(--ink-800); }

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

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  cursor: pointer;
  color: var(--ink-900);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Header CTA: WhatsApp only in header (Call is in topbar + sticky + float) — frees room for the 8-item nav */
.header__cta .btn--outline { display: none; }
/* Small mobile: header WhatsApp is redundant (sticky bar + float cover it) — hide to prevent overflow */
@media (max-width: 560px) {
  .header__cta .btn--whatsapp { display: none; }
}
@media (min-width: 1161px) {
  .nav a { padding: 0.5rem 0.625rem; font-size: 0.9219rem; }
}


@media (max-width: 1160px) {
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1.25rem 1.25rem;
    box-shadow: var(--shadow-md);
    gap: 0.125rem;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 0.8125rem 0.875rem; font-size: 1rem; }
  .nav-toggle { display: inline-flex; }
  .header__cta .btn--outline { display: none; }
}

/* ---------- 8. Hero ---------- */
.hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (max-width: 900px) {
}

/* ---------- 9. Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

/* Service card */
.svc {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  position: relative;
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.svc:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-strong); }
.svc__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--ink-50);
  color: var(--ink-800);
  display: grid;
  place-items: center;
  margin-bottom: 1.125rem;
}
.svc__icon svg { width: 24px; height: 24px; }
.svc__flag { position: absolute; top: 1.375rem; right: 1.375rem; }
.svc h3 { font-size: var(--fs-h4); margin-bottom: 0.5rem; }
.svc p { font-size: 0.9688rem; color: var(--text-muted); }
.svc__price {
  margin-top: 1.125rem;
  padding-top: 1.125rem;
  border-top: 1px dashed var(--border-strong);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.svc__price strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink-900);
}
.svc__price span { font-size: 0.8438rem; color: var(--text-muted); }
.svc__link {
  margin-top: 1.125rem;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.svc__link::after { content: "→"; transition: transform 160ms ease; }
.svc:hover .svc__link::after { transform: translateX(3px); }

/* Mini service pills */
.minis { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.minis a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9063rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.5625rem 1.0625rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.minis a:hover { border-color: var(--ink-600); box-shadow: var(--shadow-sm); color: var(--ink-800); }

/* ---------- 10. Gazette flagship ---------- */
.flagship { border-top: 1px solid var(--border); }
.flagship__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 960px) { .flagship__grid { grid-template-columns: 1fr; } }

.flagship__points { list-style: none; padding: 0; display: grid; gap: 0.875rem; margin-top: 1.5rem; }
.flagship__points li { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--text); }
.flagship__points svg { width: 20px; height: 20px; color: var(--green-700); flex: none; margin-top: 3px; }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .plans { grid-template-columns: 1fr; } }

.plan { padding: 1.875rem; display: flex; flex-direction: column; position: relative; }
.plan--featured { border: 2px solid var(--saffron-500); box-shadow: var(--shadow-md); }
.plan__flag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
}
.plan h3 { font-size: 1.1875rem; font-family: var(--font-text); font-weight: 700; }
.plan__price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-top: 0.375rem;
  line-height: 1;
}
.plan__price sub {
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-muted);
  vertical-align: baseline;
}
.plan__list { list-style: none; padding: 0; margin: 1.375rem 0 1.625rem; display: grid; gap: 0.6875rem; flex: 1; }
.plan__list li { display: flex; gap: 0.625rem; font-size: 0.9375rem; align-items: flex-start; }
.plan__list svg { width: 18px; height: 18px; color: var(--green-700); flex: none; margin-top: 2px; }
.plan__list .is-muted { color: var(--text-muted); }
.plan__list .is-muted svg { color: var(--border-strong); }

/* ---------- 11. Steps ---------- */
.steps { counter-reset: step; }
.step { padding: 1.75rem; position: relative; }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--ink-100);
  line-height: 1;
  display: block;
  margin-bottom: 0.875rem;
}
.step h3 { font-size: 1.125rem; font-family: var(--font-text); font-weight: 700; margin-bottom: 0.375rem; }
.step p { font-size: 0.9375rem; color: var(--text-muted); }

/* ---------- 12. Trust grid / stats ---------- */
.trust { padding: 1.625rem; display: flex; gap: 1rem; align-items: flex-start; }
.trust svg { width: 26px; height: 26px; color: var(--saffron-700); flex: none; margin-top: 2px; }
.trust h3 { font-size: 1.0625rem; font-family: var(--font-text); font-weight: 700; margin-bottom: 0.25rem; }
.trust p { font-size: 0.9063rem; color: var(--text-muted); }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  color: var(--saffron-400);
  line-height: 1.1;
}
.stat__label { font-size: 0.9063rem; color: var(--text-on-dark-muted); margin-top: 0.25rem; }

/* ---------- 13. Brand ecosystem ---------- */
.brandcard { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.625rem; }
.brandcard__domain {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--ink-800);
  text-decoration: none;
}
.brandcard__domain:hover { color: var(--ink-600); text-decoration: underline; }
.brandcard p { font-size: 0.9375rem; color: var(--text-muted); flex: 1; }
.brandcard__tag { font-size: 0.8125rem; font-weight: 600; color: var(--saffron-700); }

/* ---------- 14. Testimonials ---------- */

/* ---------- 15. FAQ ---------- */
.faq { max-width: 46rem; margin-inline: auto; display: grid; gap: 0.75rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq details[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  font-weight: 600;
  color: var(--ink-900);
  font-size: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--saffron-700);
  transition: transform 180ms ease;
  flex: none;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { padding: 0 1.375rem 1.25rem; color: var(--text-muted); font-size: 0.9688rem; }

/* ---------- 16. Office / visit ---------- */
.office__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}
@media (max-width: 900px) { .office__grid { grid-template-columns: 1fr; } }

.office__list { list-style: none; padding: 0; display: grid; gap: 1.25rem; margin-top: 1.625rem; }
.office__list li { display: flex; gap: 0.875rem; align-items: flex-start; }
.office__list svg { width: 21px; height: 21px; color: var(--saffron-700); flex: none; margin-top: 3px; }
.office__list strong { display: block; font-size: 0.9375rem; color: var(--ink-900); }
.office__list span { font-size: 0.9375rem; color: var(--text-muted); }

.office__map {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  min-height: 320px;
  background: var(--ink-50);
}
.office__map iframe { width: 100%; height: 100%; min-height: 320px; }

/* Hours table */
.hours { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin-top: 0.375rem; }
.hours td { padding: 0.3125rem 0; color: var(--text-muted); }
.hours td:first-child { padding-right: 1.25rem; }
.hours td:last-child { text-align: right; color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- 17. CTA band ---------- */
.ctaband {
  background:
    radial-gradient(40rem 20rem at 110% 120%, rgba(233, 161, 59, 0.18), transparent 60%),
    var(--ink-900);
  border-radius: var(--radius-md);
  padding: clamp(2.5rem, 6vw, 4rem);
  text-align: center;
  color: var(--text-on-dark);
}
.ctaband h2 { color: #fff; }
.ctaband p { color: var(--text-on-dark-muted); margin: 0.875rem auto 1.75rem; max-width: 46rem; }
.ctaband__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* ---------- 18. Footer ---------- */
.footer { background: var(--ink-950); color: var(--text-on-dark-muted); font-size: 0.9063rem; }
.footer a { color: var(--text-on-dark-muted); text-decoration: none; }
.footer a:hover { color: var(--saffron-400); }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-block: 3.5rem 2.5rem;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3 {
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-on-dark);
  margin-bottom: 1rem;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.5625rem; }
.footer__brandline { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; }
.footer__brandline svg { width: 34px; height: 34px; }
.footer__brandline span {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--text-on-dark);
}
.footer__about { max-width: 34ch; }
.footer__social { display: inline-flex; align-items: center; gap: 0.4375rem; }
.footer__social svg { width: 17px; height: 17px; color: var(--saffron-400); flex: none; }
.footer__disclaimer {
  border-top: 1px solid rgba(244, 241, 234, 0.12);
  padding-block: 1.5rem;
  font-size: 0.8125rem;
  color: #8B96AF;
}
.footer__disclaimer p { max-width: none; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(244, 241, 234, 0.12);
  padding-block: 1.375rem;
  font-size: 0.8438rem;
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; padding: 0; }

/* ---------- 19. Mobile sticky CTA ---------- */
.stickybar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-strong);
  border-top: 1px solid var(--border-strong);
  padding-bottom: env(safe-area-inset-bottom);
}
.stickybar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9375rem;
  font-weight: 700;
  font-size: 0.9688rem;
  text-decoration: none;
}
.stickybar a svg { width: 19px; height: 19px; }
.stickybar__call { background: var(--ink-900); color: #fff; }
.stickybar__wa { background: var(--green-700); color: #fff; }
@media (max-width: 760px) {
  .stickybar { display: grid; }
  body { padding-bottom: 58px; }
}

/* ---------- 20. Utilities ---------- */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.center { text-align: center; }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }

/* v18 — utilities that replace the repeated inline styles.
   Keeping these in the stylesheet (rather than on 1,800 elements) is what
   makes a Content-Security-Policy without 'unsafe-inline' possible. */
.fs-h3        { font-size: var(--fs-h3); }
.fs-h2        { font-size: var(--fs-h2); }
.pad-y-0      { padding-block: 0; }
.pad-t-0      { padding-top: 0; }
.pad-b-0      { padding-bottom: 0; }
.mar-y-6      { margin-block: 1.5rem; }
.mt-6         { margin-top: 1.25rem; }
.mb-2         { margin-bottom: 1rem; }
.mb-6         { margin-bottom: 1.25rem; }
.text-saffron { color: var(--saffron-400); }
.text-ondark  { color: var(--text-on-dark-muted); }
.link-plain   { color: inherit; text-decoration: none; }
.inline-block { display: inline-block; }
.anchor-off   { scroll-margin-top: 90px; }
.eyebrow      { font-family: var(--font-text); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 2.5rem 0 0; }
.mapframe     { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); aspect-ratio: 16 / 9; margin-top: 1rem; }
.mapframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.searchbox    { width: 100%; max-width: 46rem; font-family: var(--font-text); font-size: 1.0625rem; padding: .9375rem 1.125rem; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); }
.narrow-56    { max-width: 56rem; margin-inline: auto; }


/* ============================================================
   Inner-page components (v1.1 — full-site build)
   ============================================================ */

/* Breadcrumbs */
.crumbs { background: var(--surface); border-bottom: 1px solid var(--border); font-size: 0.8438rem; }
.crumbs .container { display: flex; flex-wrap: wrap; gap: 0.4375rem; align-items: center; padding-block: 0.625rem; }
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink-800); text-decoration: underline; }
.crumbs .sep { color: var(--border-strong); }
.crumbs .cur { color: var(--ink-900); font-weight: 600; }

/* Page hero (inner pages) */
.phero { background: radial-gradient(46rem 26rem at 88% -12%, rgba(49,87,143,.5), transparent 60%), var(--ink-900); color: var(--text-on-dark); }
.phero .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; padding-block: clamp(3rem, 6vw, 4.5rem); }
.phero h1 { color: #fff; margin: 0.875rem 0 1rem; font-size: clamp(2rem, 1.6rem + 2vw, 2.875rem); }
.phero h1 em { font-style: normal; color: var(--saffron-400); }
.phero__lead { color: var(--text-on-dark-muted); font-size: var(--fs-lead); max-width: 56ch; }
.phero__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.phero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.phero__note { margin-top: 0.875rem; font-size: 0.875rem; color: var(--text-on-dark-muted); }
@media (max-width: 900px) { .phero .container { grid-template-columns: 1fr; } }

/* At-a-glance card */
.glance { background: var(--surface); color: var(--text); border-radius: var(--radius-md); padding: 1.625rem; box-shadow: var(--shadow-md); }
.glance h2, .glance h3 { font-family: var(--font-text); font-size: 1.0625rem; font-weight: 700; color: var(--ink-900); margin-bottom: 0.875rem; }
.glance__line { display: flex; gap: 0.625rem; align-items: flex-start; padding-block: 0.4375rem; font-size: 0.9375rem; }
.glance__line + .glance__line { border-top: 1px dashed var(--border); }
.glance__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--saffron-500); flex: none; margin-top: 8px; }
.glance .btn { width: 100%; margin-top: 1rem; }

/* Credentials / metrics bar */
.creds { background: var(--surface); border-block: 1px solid var(--border); }
.creds .container { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: center; padding-block: 1.125rem; }
.cred { text-align: center; }
.cred b { display: block; font-family: var(--font-display); font-size: 1.125rem; color: var(--ink-800); letter-spacing: 0.01em; }
.cred span { font-size: 0.7813rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

/* Table of contents */
.toc { background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: var(--radius-md); padding: 1.375rem 1.625rem; max-width: 46rem; }
.toc h2 { font-family: var(--font-text); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-800); margin-bottom: 0.75rem; }
.toc ol { margin: 0; padding-left: 1.25rem; columns: 2; column-gap: 2rem; font-size: 0.9375rem; }
.toc li { margin-bottom: 0.4375rem; break-inside: avoid; }
.toc a { text-decoration: none; color: var(--text); }
.toc a:hover { color: var(--ink-800); text-decoration: underline; }
@media (max-width: 640px) { .toc ol { columns: 1; } }

/* Prose (long-form content) */
.prose { max-width: 46rem; }
.prose h2 { margin: 2.75rem 0 1rem; scroll-margin-top: 96px; }
.prose h3 { margin: 2rem 0 0.75rem; font-size: var(--fs-h4); scroll-margin-top: 96px; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.375rem; display: grid; gap: 0.5rem; }
.prose li::marker { color: var(--saffron-700); font-weight: 600; }
.section .prose:first-child > h2:first-child, .prose > h2:first-of-type { margin-top: 0; }

/* Notes / callouts */
.note { border-radius: var(--radius-sm); padding: 1.125rem 1.375rem; margin: 1.375rem 0; font-size: 0.9531rem; border: 1px solid; }
.note h3, .note h4 { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.375rem; }
.note--info { background: var(--ink-50); border-color: var(--ink-100); }
.note--info h3, .note--info h4 { color: var(--ink-800); }
.note--honest { background: var(--green-50); border-color: #BFE3CC; }
.note--honest h3, .note--honest h4 { color: var(--green-800); }
.note--warn { background: var(--saffron-50); border-color: #EDD3A1; }
.note--warn h3, .note--warn h4 { color: var(--saffron-700); }

/* Data tables */
.dtable { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 1.25rem 0 1.75rem; background: var(--surface); border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
.dtable th { background: var(--ink-900); color: var(--text-on-dark); text-align: left; padding: 0.75rem 1rem; font-weight: 600; font-size: 0.875rem; }
.dtable td { padding: 0.75rem 1rem; border-top: 1px solid var(--border); vertical-align: top; }
.dtable tr:nth-child(even) td { background: var(--paper); }
.dtable--wrap { display: block; overflow-x: auto; }
.dtable .yes { color: var(--green-800); font-weight: 600; }
.dtable .no { color: #A03A2E; font-weight: 600; }

/* Process steps (vertical) */
.vsteps { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; gap: 0; counter-reset: vstep; max-width: 46rem; }
.vsteps li { position: relative; padding: 0 0 1.75rem 3.25rem; counter-increment: vstep; }
.vsteps li::before { content: counter(vstep); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--ink-800); color: #fff; font-weight: 700; font-size: 0.9375rem; display: grid; place-items: center; }
.vsteps li::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: var(--ink-100); }
.vsteps li:last-child::after { display: none; }
.vsteps b { display: block; color: var(--ink-900); margin-bottom: 0.25rem; }
.vsteps span { color: var(--text-muted); font-size: 0.9375rem; }

/* Checklist */
.check { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: 0.625rem; max-width: 46rem; }
.check li { display: flex; gap: 0.75rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.8125rem 1rem; font-size: 0.9375rem; }
.check li::before { content: "✓"; color: var(--green-700); font-weight: 800; flex: none; }

/* Lead capture band (page-level) */
.leadband { background: var(--ink-900); border-radius: var(--radius-md); padding: clamp(2rem, 5vw, 3rem); color: var(--text-on-dark); }
.leadband h2 { color: #fff; margin-bottom: 0.5rem; }
.leadband p { color: var(--text-on-dark-muted); max-width: 52ch; }
.leadband__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.375rem; }

/* Related pages */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .related { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .related { grid-template-columns: 1fr; } }
.related a { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.125rem; text-decoration: none; font-weight: 600; font-size: 0.9375rem; color: var(--ink-900); transition: border-color 150ms ease, box-shadow 150ms ease; }
.related a:hover { border-color: var(--ink-600); box-shadow: var(--shadow-sm); }
.related a small { display: block; font-weight: 400; color: var(--text-muted); margin-top: 0.25rem; }

/* Byline / updated */
.byline { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.8438rem; color: var(--text-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-block: 0.75rem; margin: 1.5rem 0; }
.byline b { color: var(--ink-900); font-weight: 600; }

/* Plan cards row reused on pricing pages */
.pricenote { font-size: 0.875rem; color: var(--text-muted); max-width: 46rem; }

/* Sources */
.sources { font-size: 0.8438rem; color: var(--text-muted); border-top: 1px dashed var(--border-strong); padding-top: 1rem; margin-top: 2.5rem; max-width: 46rem; }
.sources a { color: var(--ink-700); }

/* ---------- 21. WhatsApp enquiry builder (no backend) ---------- */
.leadform { padding: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1.25rem; }
.leadform h2 { font-size: var(--fs-h3); margin-bottom: 0.375rem; }
.leadform > p { color: var(--text-muted); font-size: 0.9531rem; margin-bottom: 1.375rem; }
.leadform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .leadform__grid { grid-template-columns: 1fr; } }
.leadform label { display: block; font-size: 0.8438rem; font-weight: 600; color: var(--ink-900); margin-bottom: 0.375rem; }
.leadform select, .leadform input {
  width: 100%; font-family: var(--font-text); font-size: 0.9688rem; color: var(--text);
  background: var(--paper); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 0.75rem 0.875rem; min-height: 46px;
}
.leadform select:focus, .leadform input:focus { outline: 2px solid var(--saffron-500); outline-offset: 1px; border-color: var(--saffron-500); }
.leadform__full { grid-column: 1 / -1; }
.leadform__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; margin-top: 1.25rem; }
.leadform__note { font-size: 0.8125rem; color: var(--text-muted); }

/* Desktop floating WhatsApp (mobile uses stickybar) */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 95;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green-700); color: #fff;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(11, 102, 51, 0.55);
  transition: transform 150ms ease, background-color 150ms ease;
}
.wa-float:hover { background: var(--green-800); transform: translateY(-2px); color: #fff; }
.wa-float svg { width: 28px; height: 28px; }
@media (min-width: 761px) { .wa-float { display: inline-flex; } }

/* ============================================================
   Homepage v2 — high-impact layer
   ============================================================ */
.hero2 {
  position: relative;
  background:
    radial-gradient(58rem 34rem at 82% -12%, rgba(49,87,143,.65), transparent 60%),
    radial-gradient(40rem 30rem at -8% 30%, rgba(233,161,59,.16), transparent 55%),
    radial-gradient(30rem 24rem at 55% 118%, rgba(14,124,63,.18), transparent 60%),
    linear-gradient(160deg, #0B1830 0%, #122443 55%, #16305A 100%);
  color: var(--text-on-dark);
  overflow: hidden;
}
.hero2::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(rgba(244,241,234,.14) 1px, transparent 1.4px);
  background-size: 34px 34px;
  mask-image: radial-gradient(46rem 30rem at 78% 10%, #000 0%, transparent 70%);
}
.hero2 .container { display:grid; grid-template-columns: minmax(0,6.4fr) minmax(0,5.6fr); gap: clamp(2.5rem,5vw,4.5rem); align-items:center; padding-block: clamp(4.5rem,10vw,7.5rem) clamp(5rem,11vw,8rem); position:relative; }
.hero2 h1 { color:#fff; font-size: clamp(2.625rem, 2rem + 3.2vw, 4rem); line-height:1.06; margin:1.25rem 0 1.375rem; letter-spacing:-0.025em; }
.grad { background: linear-gradient(92deg, #F6C87E 0%, #E9A13B 55%, #F0B25C 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero2__lead { font-size: clamp(1.125rem, 1.05rem + .4vw, 1.25rem); color: var(--text-on-dark-muted); max-width:54ch; }
.hero2__actions { display:flex; flex-wrap:wrap; gap:.875rem; margin-top:2rem; }
.hero2__proof { display:flex; align-items:center; gap:.625rem; margin-top:1.375rem; font-size:.9063rem; color:var(--text-on-dark-muted); }
.hero2__proof b { color:#fff; }
.hero2__stars { color:#F0B25C; letter-spacing:2px; font-size:1rem; }

/* floating offer chips around the art */
.hero2__art { position:relative; min-height: 420px; }
.hero2__art > svg { width: 86%; margin-inline:auto; filter: drop-shadow(0 24px 48px rgba(4,10,24,.5)); }
.ochip {
  position:absolute; display:flex; flex-direction:column; gap:.125rem;
  background: rgba(250,247,242,.97); color:var(--ink-900);
  border-radius: 14px; padding:.75rem 1.0625rem; box-shadow: 0 16px 40px -12px rgba(4,10,24,.55);
  border:1px solid rgba(233,161,59,.35);
  animation: bob 5.2s ease-in-out infinite;
}
.ochip b { font-family:var(--font-display); font-size:1.1875rem; line-height:1.1; }
.ochip span { font-size:.7188rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); }
.ochip--1 { top:2%;  left:-2%;  animation-delay:0s; }
.ochip--2 { top:24%; right:-3%; animation-delay:1.3s; }
.ochip--3 { bottom:20%; left:-5%; animation-delay:2.1s; }
.ochip--4 { bottom:-2%; right:6%; animation-delay:3s; }
@keyframes bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@media (prefers-reduced-motion: reduce){ .ochip{ animation:none; } }
@media (max-width: 900px){
  .hero2 .container{ grid-template-columns:1fr; }
  .hero2__art{ max-width:24rem; margin-inline:auto; min-height:340px; }
  .ochip--1{ left:-4%; } .ochip--2{ right:-4%; }
}

/* trust ticker */
.ticker { background: var(--ink-950); border-block:1px solid rgba(244,241,234,.1); overflow:hidden; }
.ticker__track { display:flex; gap:3.5rem; width:max-content; padding-block:.8125rem; animation: slide 36s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display:inline-flex; align-items:center; gap:.5625rem; color:var(--text-on-dark-muted); font-size:.875rem; font-weight:500; white-space:nowrap; }
.ticker__item b { color:#F0B25C; font-weight:700; }
@keyframes slide { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .ticker__track{ animation:none; flex-wrap:wrap; width:auto; } }

/* service cards v2: color-coded tiles + accent bar */
.grid--4 .svc { overflow:hidden; }
.grid--4 .svc::before { content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--saffron-500),var(--saffron-400)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.grid--4 .svc:hover::before { transform:scaleX(1); }
.grid--4 .svc:nth-child(1) .svc__icon { background:var(--saffron-50); color:var(--saffron-700); }
.grid--4 .svc:nth-child(2) .svc__icon { background:var(--ink-50); color:var(--ink-800); }
.grid--4 .svc:nth-child(3) .svc__icon { background:#EFE9FA; color:#5B3FA8; }
.grid--4 .svc:nth-child(4) .svc__icon { background:var(--green-50); color:var(--green-800); }
.grid--4 .svc .svc__price strong { font-size:1.75rem; color:var(--saffron-700); }

/* big counters */
.stats2 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; text-align:center; }
@media (max-width:800px){ .stats2{ grid-template-columns:repeat(2,1fr);} }
.stats2 .stat__num { font-size: clamp(2.5rem, 5vw, 3.5rem); }

/* featured plan ribbon + glow */
.plan--featured { position:relative; box-shadow: 0 0 0 2px var(--saffron-500), 0 24px 48px -18px rgba(233,161,59,.45); }

/* google band */
.gband { display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; }
.gband__stars { font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing:.25rem; color:var(--saffron-500); line-height:1; }

/* ---------- v9.1 alignment fix: center the reading column site-wide ---------- */
.prose { margin-inline: auto; }
.toc { margin-inline: auto; }
.sources { margin-inline: auto; }
/* keep intentional two-column layouts unaffected: grid cells simply center within themselves */

/* ---------- v9.2/v9.3: justified body text on EVERY page (flush both edges) ---------- */
@media (min-width: 641px) {
  p, .prose li, .faq__a, .note,
  .flagship__points span, .plan__list li, .svc p, .trust p,
  .brandcard p, .step p, .glance__line span, .office__list span {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  /* deliberately centered blocks stay centered */
  .section-head--center p, .ctaband p, .center p, .gband p,
  .stickybar a, .leadform__note, .phero__note, .hero__note,
  .cred span, .stat__label, .ticker__item, .footer__legal p {
    text-align: center;
  }
  .footer__legal p { text-align: left; }
  .leadform__note { text-align: left; }
  .phero__note, .hero__note { text-align: left; }
}
/* narrow screens keep left alignment — justification creates ugly gaps in short lines */

/* ---------- v11.1: sticky "our promise" trust strip (desktop; part of sticky header) ---------- */
.promisebar { background: var(--ink-800); color: var(--text-on-dark); border-top: 1px solid rgba(244,241,234,.12); }
.promisebar .container { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; justify-content: center; align-items: center; min-height: 38px; padding-block: 0.4375rem; }
.promisebar span { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; color: var(--text-on-dark); }
.promisebar svg { width: 14px; height: 14px; color: var(--saffron-400); flex: none; }
.promisebar a { color: var(--saffron-400); text-decoration: none; font-weight: 600; }
.promisebar a:hover { text-decoration: underline; }
@media (max-width: 900px) { .promisebar { display: none; } }

/* v11.2: highlight the since-2017 experience lead in the promise bar */
.promisebar .promise-lead { color: #fff; }
.promisebar .promise-lead b { font-weight: 700; }
.promisebar .promise-lead svg { color: var(--saffron-400); }
.promisebar .promise-lead::after { content: ""; width: 1px; height: 14px; background: rgba(244,241,234,.25); margin-left: 0.5rem; }
@media (max-width: 900px) { .promisebar .promise-lead::after { display: none; } }

/* ---------- v11.3: balance promo/CTA blocks — center their content (fixes left-stuck look) ---------- */
.leadband { text-align: center; }
.leadband h2 { margin-inline: auto; }
.leadband p { margin-inline: auto; }
.leadband__actions { justify-content: center; }
.closer-center { text-align: center; margin-inline: auto; }
.closer-center p { margin-inline: auto; }
/* justified text should not apply inside these centered promo blocks */
.leadband p, .closer-center p { text-align: center; }

/* ============================================================
   v12: hero search + quick chips + life-event cards + top-right nav
   ============================================================ */

/* Nav pushed to the top-right corner (logo left, nav+CTA right) */
@media (min-width: 1161px) {
  .brand { margin-right: auto; }
  .header .nav { margin-right: 0.5rem; }
}

/* Hero search bar (on dark hero) */
.herosearch {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--surface); border-radius: var(--radius-pill);
  padding: 0.375rem 0.375rem 0.375rem 1rem;
  max-width: 34rem; margin-top: 1.75rem;
  box-shadow: 0 14px 34px -14px rgba(4,10,24,.55);
}
.herosearch__icon { width: 20px; height: 20px; color: var(--text-muted); flex: none; }
.herosearch input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: var(--font-text); font-size: 1rem; color: var(--text); min-width: 0;
  padding: 0.625rem 0.25rem;
}
.herosearch input::placeholder { color: var(--text-muted); }
.herosearch .btn { padding-inline: 1.375rem; }
@media (max-width: 520px) {
  .herosearch .btn { padding-inline: 1rem; }
  .herosearch input { font-size: 0.9375rem; }
}

/* Quick-action chips under search */
.qchips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; }
.qchips__label { font-size: 0.8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-on-dark-muted); }
.qchips a {
  font-size: 0.875rem; font-weight: 600; color: var(--text-on-dark); text-decoration: none;
  background: rgba(244,241,234,.1); border: 1px solid rgba(244,241,234,.24);
  border-radius: var(--radius-pill); padding: 0.4375rem 0.875rem; transition: background-color 150ms ease, border-color 150ms ease;
}
.qchips a:hover { background: rgba(233,161,59,.2); border-color: var(--saffron-400); color: #fff; }

/* Life-event cards */
.lifegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }
@media (max-width: 900px) { .lifegrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lifegrid { grid-template-columns: 1fr; } }
.lifecard {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 1.5rem; text-decoration: none; position: relative; overflow: hidden;
  transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.lifecard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--saffron-500), var(--saffron-400)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.lifecard:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-strong); }
.lifecard:hover::before { transform: scaleX(1); }
.lifecard__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--ink-50); color: var(--ink-800); display: grid; place-items: center; }
.lifecard__ic svg { width: 24px; height: 24px; }
.lifecard__t { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; color: var(--ink-900); }
.lifecard__d { font-size: 0.9375rem; color: var(--text-muted); flex: 1; text-align: left; }
.lifecard__go { font-size: 0.9063rem; font-weight: 600; color: var(--ink-800); margin-top: 0.25rem; }
.lifecard:hover .lifecard__go { color: var(--saffron-700); }

/* v15: service-specific icon badge in inner-page hero */
.phero__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: 16px;
  background: rgba(244,241,234,.1); border: 1px solid rgba(244,241,234,.22);
  color: var(--saffron-400); margin-bottom: 1.125rem;
}
.phero__badge svg { width: 32px; height: 32px; }

/* ============================================================
   v16 — service photography
   Square source images framed per context with aspect-ratio +
   object-fit, so one asset serves every placement.
   ============================================================ */
.imgfit { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Photo at the head of the "at a glance" card in an inner-page hero */
.glance__media {
  margin: -1.625rem -1.625rem 1.25rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-50);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.glance__media .imgfit { object-position: center 2%; }

/* Full-bleed photo at the head of a service card */
.svc__media {
  margin: -1.75rem -1.75rem 1.25rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink-50);
}
.svc__media .imgfit { object-position: center 18%; }
.svc--media .svc__icon { display: none; }

/* ============================================================
   v17 — narrow-screen safety
   Grid and flex children default to min-width:auto, so one long
   word, URL, phone number or reference code can widen a whole
   track and push the page sideways on a phone. These rules stop
   that without changing how normal prose wraps.
   ============================================================ */
.check, .check li, .check li > * { min-width: 0; }
.check li { overflow-wrap: break-word; }
.prose p, .prose li, .prose td, .prose th, .prose dd,
.glance__line span, .related a, .related a small,
.faq__a, .note p { overflow-wrap: break-word; }
.prose a, .faq__a a, .note a, .sources a { overflow-wrap: anywhere; }

/* v18 — the last of the one-off inline styles, moved into the sheet */
.plan__price sub, .price-sub { font-size: .8rem; font-weight: 400; color: var(--text-muted); }
.mapframe iframe, .frame-fill { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v-mid        { vertical-align: middle; }
.mb-1         { margin-bottom: .375rem; }
.note-under   { color: var(--text-muted); margin-top: .5rem; }
.text-left    { text-align: left; }
.screen-70    { min-height: 70vh; display: grid; place-items: center; }
.screen-60    { min-height: 60vh; }
.narrow-52    { max-width: 52rem; margin-inline: auto; }
.narrow-38    { max-width: 38rem; }
.stack-top    { margin: 2.5rem auto 0; }
.stack-mid    { margin: 0 auto 1.25rem; }
.ml-half      { margin-left: .5rem; }
.mar-x-auto   { margin-inline: auto; }
.mb-half      { margin-bottom: .5rem; }
.mb-0         { margin-bottom: 0; }
.row-center   { justify-content: center; margin-bottom: 2.5rem; }
.block-sm     { display: block; margin-bottom: .25rem; }

/* ================================================================
   v19 — "GAZETTE" IDENTITY LAYER
   The problem this solves: navy + amber + Plus Jakarta Sans is the
   default look of every SaaS template on the internet. None of it
   says "this firm handles official documents in Gujarat".
   Everything below is drawn from the objects the business actually
   handles — gazette mastheads, ledger paper, rubber stamps,
   perforated notices, clause numbering. Pure CSS, no new assets,
   no new requests, degrades to plain layout if unsupported.
   ================================================================ */

/* ---- 1. Masthead rule under prose headings ------------------
   A gazette notification is topped by a thick rule over a hairline.
   This is the single most recognisable detail on the site. */
.prose h2 {
  position: relative;
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
}
.prose h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 3.25rem; height: 5px;
  background: var(--ink-900);
  border-radius: 1px;
  box-shadow: 0 9px 0 -1.5px var(--saffron-500);
}
.section-head--center h2::after,
.prose.closer-center h2::after { left: 50%; transform: translateX(-50%); }

/* ---- 2. Ledger paper for tinted sections --------------------
   The faint horizontal ruling of an accounts ledger, at 2% opacity.
   You do not consciously see it; you feel that the page is a document. */
.section--tint {
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2.4rem,
      rgba(18, 36, 67, 0.035) 2.4rem,
      rgba(18, 36, 67, 0.035) calc(2.4rem + 1px)
    );
  background-position: 0 1.2rem;
}

/* ---- 3. Featured plan reads as the stamped copy -------------
   (A perforated tear-edge was tried here and cut: overflow:hidden clipped it
   and cream circles on a white card had no contrast. A visible detail beats a
   clever one.) The featured card instead carries a solid saffron cap rule. */
.plan--featured { position: relative; overflow: hidden; }
.plan--featured::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    var(--saffron-500) 0, var(--saffron-500) 10px,
    var(--saffron-200) 10px, var(--saffron-200) 16px
  );
  pointer-events: none;
}

/* ---- 4. Notched "sealed corner" on honest callouts ----------
   The clipped corner of a stamped, countersigned page. */
.note--honest {
  position: relative;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.note--honest::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  border-width: 0 0 18px 18px;
  border-style: solid;
  border-color: transparent transparent rgba(31,107,59,.22) transparent;
}

/* ---- 5. Clause numbering on process steps -------------------
   Legal drafting numbers its steps 1. 2. 3. in the margin, not in
   coloured circles. This reads as a procedure, not a marketing funnel. */
.steps-num { counter-reset: clause; list-style: none; padding-left: 0; }
.steps-num > li {
  counter-increment: clause;
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: 1.05rem;
}
.steps-num > li::before {
  content: counter(clause) ".";
  position: absolute;
  left: 0; top: -0.1rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--saffron-700);
  font-variant-numeric: tabular-nums;
  width: 2.5rem;
  text-align: right;
  border-right: 2px solid var(--saffron-200);
  padding-right: 0.55rem;
  line-height: 1.5;
}

/* ---- 6. Link underline that behaves like a pen stroke -------
   Offset, saffron, thickens on hover. Replaces the browser default. */
.prose a:not(.btn) {
  text-decoration: underline;
  text-decoration-color: var(--saffron-500);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 120ms ease, text-underline-offset 120ms ease;
}
.prose a:not(.btn):hover {
  text-decoration-thickness: 3px;
  text-underline-offset: 2px;
}

.related a { text-decoration: none; }

/* ---- 7. Tabular figures everywhere a number matters ---------
   Fees, IDs and dates line up in columns like a printed schedule. */
.dtable td, .dtable th,
.plan__price, .cred b, .glance__line,
.svc__price strong { font-variant-numeric: tabular-nums; }

/* ---- 8. Credential row reads as a stamped strip -------------- */
.creds { position: relative; }
.creds::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--saffron-500) 0, var(--saffron-500) 14px,
    transparent 14px, transparent 22px
  );
}

/* ---- 9. Quiet index numbering in the on-page contents ------- */
.toc ol { counter-reset: toc; list-style: none; padding-left: 0; }
.toc ol li { counter-increment: toc; }
.toc ol li::before {
  content: counter(toc, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  color: var(--saffron-700);
  font-weight: 700;
  font-size: 0.78rem;
  margin-right: 0.6rem;
}

/* ---- 10. Respect reduced motion + print --------------------- */
@media (prefers-reduced-motion: reduce) {
  .prose a:not(.btn) { transition: none; }
}
@media print {
  .section--tint { background-image: none; }
  .plan--featured::after, .creds::before { display: none; }
  .prose h2::after { box-shadow: none; }
}

/* v19.1 — every data table scrolls on a phone, with or without the --wrap modifier.
   Relying on an author remembering to add a class is how 22 pages ended up
   pushing sideways on mobile. This makes it structural instead. */
@media (max-width: 700px) {
  .dtable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dtable thead, .dtable tbody, .dtable tr { width: max-content; min-width: 100%; }
}

/* v19.2 — the same grid trap as .check, one level up.
   "1fr" is shorthand for minmax(auto, 1fr), and an "auto" minimum resolves to
   min-content — so one wide child widens the whole track past the viewport.
   Every single-column layout grid gets an explicit zero minimum. */
@media (max-width: 900px) {
  .phero .container { grid-template-columns: minmax(0, 1fr); }
  .phero .container > * { min-width: 0; }
}
.grid--2, .grid--3, .grid--4, .plans, .related, .lifegrid { grid-auto-columns: minmax(0, 1fr); }
.grid--2 > *, .grid--3 > *, .grid--4 > *, .plans > *, .related > *, .lifegrid > * { min-width: 0; }


/* ============================================================
   v21 — motion layer (rebuild of v20; same five rules)
   1 nothing above the fold animates  2 transform/opacity only
   3 degrades to visible (states exist only under .js-anim)
   4 reduced-motion never enters      5 durations 200-420ms
   ============================================================ */

/* Smooth in-page jumps, clearing the sticky header */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 96px; }

/* Scroll reveal — JS adds .rv only to elements below the first viewport */
.js-anim .rv { opacity: 0; transform: translateY(14px); transition: opacity .38s ease, transform .38s ease; }
.js-anim .rv.rv-in { opacity: 1; transform: none; }
/* Stagger for grid children — pure CSS, no inline styles (CSP) */
.js-anim .grid > .rv:nth-child(2), .js-anim .related > .rv:nth-child(2) { transition-delay: .06s; }
.js-anim .grid > .rv:nth-child(3), .js-anim .related > .rv:nth-child(3) { transition-delay: .12s; }
.js-anim .grid > .rv:nth-child(4), .js-anim .related > .rv:nth-child(4) { transition-delay: .18s; }
.js-anim .grid > .rv:nth-child(5), .js-anim .related > .rv:nth-child(5) { transition-delay: .24s; }
.js-anim .grid > .rv:nth-child(6), .js-anim .related > .rv:nth-child(6) { transition-delay: .30s; }

/* Header condenses past 24px of scroll — internal changes only, header height
   (min-height 72px) is untouched, so nothing below it ever shifts */
.brand__mark { transition: width .25s ease, height .25s ease; }
.hdr-c .header { box-shadow: var(--shadow-sm); }
.hdr-c .header .brand__mark { width: 34px; height: 34px; }
.hdr-c .header .brand__tag { display: none; }
.scroll-probe { position: absolute; top: 0; left: 0; width: 1px; height: 24px; visibility: hidden; pointer-events: none; }

/* Reading progress — driven by the scroll timeline, zero scroll listeners.
   Browsers without support keep it at scaleX(0): invisible, harmless. */
.readbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, var(--saffron-500), var(--saffron-400));
  transform-origin: 0 50%; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  .readbar { animation: hs-read linear both; animation-timeline: scroll(root); }
}
@keyframes hs-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* FAQ answers ease in when opened */
.js-anim .faq details[open] .faq__a { animation: hs-fade .28s ease; }
@keyframes hs-fade { from { opacity: 0; transform: translateY(-4px); } }

/* Button press feedback + visible keyboard focus */
.btn:active { transform: translateY(1px); }
:focus-visible { outline: 2px solid var(--ink-800); outline-offset: 2px; }

/* WhatsApp float entrance */
.js-anim .wa-float { animation: hs-wf .42s ease both; }
@keyframes hs-wf { from { opacity: 0; transform: translateY(10px); } }

/* Service-card polish for 3-column grids (homepage identity row) — mirrors grid--4 */
.grid--3 .svc { overflow: hidden; }
.grid--3 .svc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--saffron-500), var(--saffron-400));
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.grid--3 .svc:hover::before { transform: scaleX(1); }
.grid--3 .svc:nth-child(6n+1) .svc__icon { background: var(--saffron-50); color: var(--saffron-700); }
.grid--3 .svc:nth-child(6n+2) .svc__icon { background: var(--ink-50); color: var(--ink-800); }
.grid--3 .svc:nth-child(6n+3) .svc__icon { background: #EFE9FA; color: #5B3FA8; }
.grid--3 .svc:nth-child(6n+4) .svc__icon { background: var(--green-50); color: var(--green-800); }
.grid--3 .svc:nth-child(6n+5) .svc__icon { background: var(--ink-50); color: var(--ink-800); }
.grid--3 .svc:nth-child(6n+6) .svc__icon { background: var(--saffron-50); color: var(--saffron-700); }

/* ============================================================
   v24 — office photography (real photos, about/office + location)
   ============================================================ */
.photogrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 2rem; }
.photogrid figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--ink-50); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); }
.photogrid__media { aspect-ratio: 16 / 10; overflow: hidden; }
.photogrid figcaption { padding: .75rem 1rem; font-size: .875rem; line-height: 1.5; color: var(--text-muted); }