/* ═══════════════════════════════════════════════════════════════════════════
   CA RESHMA JADHAV & COMPANY — PREMIUM DESIGN SYSTEM LAYER
   v1.0 · Load LAST in <head>, after each page's inline <style> block.
   ───────────────────────────────────────────────────────────────────────────
   HOW THIS WORKS
   Every page inlines the same ~500 lines of CSS with the same class names.
   Rather than editing 18 copies, this file loads after them and wins on the
   cascade at equal specificity. Change craft site-wide by editing one file.

   DESIGN POSITION
   Not a neobank. A private bank.
   The navy/gold/serif identity is real brand equity — it is in the logo and
   in every client's memory. Recolouring it to fintech-blue would buy
   genericness at the price of recognition. So: keep the identity, raise the
   craft to fintech standard. Precision, restraint, layered light, honest
   motion, and numbers that behave like numbers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. TOKENS
   Redefining --sh-* upgrades ~300 existing shadow usages site-wide at once.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Elevation ──────────────────────────────────────────────────────────
     Real objects cast two shadows: a tight contact shadow and a wide ambient
     one. Single-layer shadows are the most common tell of an amateur UI.
     Low opacity, many layers, tinted with the brand navy rather than black. */
  --sh-xs : 0 1px 1px rgba(13,27,42,.04), 0 1px 2px rgba(13,27,42,.05);
  --sh-sm : 0 1px 2px rgba(13,27,42,.04), 0 2px 6px rgba(13,27,42,.05),
            0 6px 14px rgba(13,27,42,.045);
  --sh-md : 0 1px 2px rgba(13,27,42,.05), 0 4px 10px rgba(13,27,42,.055),
            0 12px 26px rgba(13,27,42,.06), 0 24px 44px rgba(13,27,42,.05);
  --sh-lg : 0 2px 4px rgba(13,27,42,.05), 0 8px 18px rgba(13,27,42,.06),
            0 20px 44px rgba(13,27,42,.07), 0 40px 80px rgba(13,27,42,.07);
  --sh-gold: 0 1px 2px rgba(120,92,10,.20), 0 4px 12px rgba(201,162,39,.24),
             0 12px 28px rgba(201,162,39,.20);

  /* Inset hairline — gives a surface a lit top edge, like brushed metal */
  --edge-lt : inset 0 1px 0 rgba(255,255,255,.70);
  --edge-dk : inset 0 1px 0 rgba(255,255,255,.08);

  /* ── Motion ─────────────────────────────────────────────────────────────
     `ease` is the browser default and reads as unconsidered. These are the
     curves premium product UI actually uses. */
  --ease-out   : cubic-bezier(.22, 1, .36, 1);      /* decisive deceleration */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);      /* symmetric, for morphs */
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);    /* restrained overshoot  */
  --t-fast : 130ms;
  --t-base : 210ms;
  --t-slow : 340ms;
  --t-lang : 620ms;   /* languid — reveals, hero entrances */

  /* ── Gold ───────────────────────────────────────────────────────────────
     Flat #C9A227 reads dull because real gold is never one value. A gradient
     plus a sheen highlight gives it the depth of a struck surface. */
  --gold-grad  : linear-gradient(160deg, #E4BC4E 0%, #C9A227 42%, #A9861C 100%);
  --gold-sheen : linear-gradient(105deg,
                   transparent 34%, rgba(255,255,255,.42) 48%,
                   rgba(255,255,255,.10) 56%, transparent 68%);
  --gold-ring  : rgba(201,162,39,.42);

  /* ── Surfaces ──────────────────────────────────────────────────────────
     A single flat --white everywhere flattens hierarchy. These give a page
     three legible depths without touching the palette. */
  --surface-0 : #FFFFFF;
  --surface-1 : #FCFAF6;
  --surface-2 : #F5F1E8;
  --hairline  : rgba(13,27,42,.07);
  --hairline-warm: rgba(169,134,28,.16);

  /* ── Focus ──────────────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--champagne, #F8F4EC), 0 0 0 4.5px rgba(201,162,39,.85);

  /* ── Rhythm ─────────────────────────────────────────────────────────── */
  --measure: 68ch;   /* comfortable reading width */
}

/* ───────────────────────────────────────────────────────────────────────────
   2. GLOBAL RENDERING REFINEMENTS
   ─────────────────────────────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 84px;          /* anchors clear the fixed nav */
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;       /* never fake-bold a missing weight */
  text-rendering: optimizeLegibility;
}

/* Kill the grey flash on tap — the fastest way a site feels "web page"
   rather than "product" on mobile. */
* { -webkit-tap-highlight-color: transparent; }

::selection { background: rgba(201,162,39,.26); color: var(--navy, #0D1B2A); }

/* Scrollbar — desktop only, and only where the platform draws one. */
@supports selector(::-webkit-scrollbar) {
  @media (min-width: 768px) and (pointer: fine) {
    ::-webkit-scrollbar { width: 11px; height: 11px; }
    ::-webkit-scrollbar-track { background: var(--surface-2); }
    ::-webkit-scrollbar-thumb {
      background: rgba(13,27,42,.22);
      border: 3px solid var(--surface-2);
      border-radius: 99px;
    }
    ::-webkit-scrollbar-thumb:hover { background: rgba(13,27,42,.38); }
  }
}

/* Anchored sections shouldn't hide behind the fixed nav. */
[id] { scroll-margin-top: 88px; }

/* ── Focus visibility ──────────────────────────────────────────────────────
   The site had zero :focus-visible rules across 28 pages, so keyboard users
   navigated blind. This is both an accessibility failure and a craft failure
   — visible, well-designed focus is a hallmark of considered product UI. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 6px;
}
a:focus-visible, button:focus-visible,
[role="button"]:focus-visible, summary:focus-visible {
  box-shadow: var(--focus-ring);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--gold, #C9A227);
  box-shadow: 0 0 0 3.5px rgba(201,162,39,.18);
}
/* Dark sections need a light-side ring to stay visible. */
.svc-hero :focus-visible, .hero :focus-visible, .nav-container :focus-visible,
.svc-cta :focus-visible, .benefit-panel :focus-visible,
.rc-shell :focus-visible, .upload-banner :focus-visible,
.deadline-band :focus-visible, .copyright-bar :focus-visible {
  box-shadow: 0 0 0 2px rgba(9,16,26,.9), 0 0 0 4.5px var(--gold-lt, #E8C050);
}
/* Mouse users never see it; keyboard users always do. */
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ── Reduced motion ────────────────────────────────────────────────────────
   18 keyframe animations ran unconditionally — spinning rings, pulsing
   buttons, scroll reveals. For anyone with a vestibular disorder that is not
   a preference, it is a barrier. Honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Reveal-on-scroll must not leave content permanently invisible. */
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero-geo, .float-wa-btn::before, .cfab-dot { animation: none !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   3. TYPOGRAPHY
   ─────────────────────────────────────────────────────────────────────────── */

/* text-wrap:balance stops a heading dropping one lonely word to its own line.
   Single highest perceived-quality-per-byte property in modern CSS. */
h1, h2, h3, h4, .section-h2, .svc-hero h1, .hero h1,
.rc-head h2, .benefit-title, .rc-q, .rc-verdict h3 {
  text-wrap: balance;
}
p, .svc-section p, .acard p, .seo-inner p, .faq-a p, .rc-hint {
  text-wrap: pretty;                 /* prevents orphans without ragging badly */
}

/* Optical sizing: large serif display wants tighter tracking; small
   uppercase labels want it opened up. Uniform tracking is what makes
   type look "default". */
.svc-hero h1, .hero h1, .section-h2 {
  letter-spacing: -.021em;
  font-optical-sizing: auto;
}
.rc-head h2, .benefit-title, .rc-verdict h3, .upload-banner-text h3 {
  letter-spacing: -.014em;
}
.eyebrow-text, .hero-badge, .stat-label, .trust-card h4,
.rc-eyebrow, .rc-qnum, .dl-label, .dl-cap, .cfab-label,
.svc-btn, .nav-brand-sub, .rc-fact .k, .rc-next h4 {
  letter-spacing: .085em;
  font-feature-settings: "case" 1;   /* correct punctuation height in caps */
}

/* Serif display faces carry a real italic — use it instead of a synthesised
   slant. `font-synthesis: none` above already blocks fakes; this ensures the
   accent text asks for the genuine cut. */
.svc-hero h1 em, .hero h1 em, .section-h2 em, .rc-head h2 em,
.benefit-title em, .upload-banner-text h3 em {
  font-style: italic;
  font-synthesis: none;
}

/* Comfortable measure. Long lines are the most common readability failure
   on wide screens, and this site's prose sections are full-width. */
.seo-inner p, .svc-section > p, .acard > p { max-width: var(--measure); }

/* ───────────────────────────────────────────────────────────────────────────
   4. NUMERALS — the fintech signal
   Proportional digits shift width as they change, so the countdown jitters
   every minute and stat columns fail to align. Financial UI uses tabular
   figures everywhere. Nothing else on this list changes perception of
   "is this a serious money product" as cheaply.
   ─────────────────────────────────────────────────────────────────────────── */
.stat-num, .trust-num, .track-n, .dl-num, .rc-fact .v,
table.geo-tbl td, table.geo-tbl th,
.sc-score, .score-value, .price, .amount, .fig,
input[type="number"], input[type="tel"], time, [data-fig] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Countdown digits get a fixed advance so the row never reflows. */
.dl-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Financial figure utilities — for the pricing and scorecard work to come. */
.fig       { font-variant-numeric: tabular-nums; font-weight: 600; }
.fig-lg    { font-family: 'Cormorant Garamond', serif; font-size: 2rem;
             font-weight: 700; line-height: 1;
             font-variant-numeric: tabular-nums; color: var(--navy, #0D1B2A); }
.fig-unit  { font-size: .58em; font-weight: 600; opacity: .55;
             margin-left: .18em; letter-spacing: .04em; }
.delta-up, .delta-down {
  display: inline-flex; align-items: center; gap: .28em;
  font-size: .82em; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: .16em .5em; border-radius: 99px;
}
.delta-up   { color: #1E8449; background: rgba(30,132,73,.10); }
.delta-down { color: #C0392B; background: rgba(192,57,43,.09); }

/* ───────────────────────────────────────────────────────────────────────────
   5. NAVIGATION — scroll-aware
   A fixed bar that never changes is a header. One that responds to position
   is a product chrome. premium.js adds .is-scrolled past 24px.
   ─────────────────────────────────────────────────────────────────────────── */
.nav-container {
  background: rgba(13,27,42,.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(201,162,39,.16);
  box-shadow: none;
  transition: background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
/* Browsers without backdrop-filter must not get a translucent, unreadable bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-container { background: #0D1B2A; }
}
.nav-container.is-scrolled {
  background: rgba(10,21,33,.93);
  border-bottom-color: rgba(201,162,39,.30);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 30px rgba(6,13,22,.42);
}
.nav-header { transition: padding var(--t-base) var(--ease-out); }
.nav-container.is-scrolled .nav-header { padding-top: 8px; padding-bottom: 8px; }
.nav-brand img { transition: height var(--t-base) var(--ease-out); }
.nav-container.is-scrolled .nav-brand img { height: 30px; }

.nav-item {
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.nav-item:hover { transform: translateY(-1px); }
.nav-item.active {
  background: var(--gold-grad);
  box-shadow: 0 1px 3px rgba(120,92,10,.28), var(--edge-lt);
}

/* ───────────────────────────────────────────────────────────────────────────
   6. BUTTONS
   Three things separate a premium button: a light edge, a sheen that only
   moves on hover, and an active state that actually depresses.
   ─────────────────────────────────────────────────────────────────────────── */
.btn-gold, .upload-banner-btn, .rc-btn-wa, .cfab-submit,
.btn-call, .btn-wa, .btn-enquire, .svc-btn, .cta-box {
  transition: transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              filter var(--t-fast) var(--ease-out);
  will-change: transform;
}

.btn-gold, .btn-call {
  background: var(--gold-grad);
  box-shadow: var(--sh-gold), var(--edge-lt);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Sheen sweep — parked off-canvas, crosses once on hover. Not a loop:
   a light that never rests reads as a banner ad, not a control. */
.btn-gold::after, .btn-call::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--gold-sheen);
  transform: translateX(-120%);
  transition: transform var(--t-slow) var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.btn-gold:hover::after, .btn-call:hover::after { transform: translateX(120%); }
.btn-gold:hover, .btn-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(120,92,10,.22), 0 8px 22px rgba(201,162,39,.34),
              0 18px 40px rgba(201,162,39,.24), var(--edge-lt);
}
.btn-gold:active, .btn-call:active {
  transform: translateY(0) scale(.985);
  box-shadow: 0 1px 3px rgba(120,92,10,.3), var(--edge-lt);
  transition-duration: 60ms;
}

.btn-wa, .rc-btn-wa, .upload-banner-btn, .cfab-submit {
  background: linear-gradient(165deg, #2EE070 0%, #25D366 46%, #1CB854 100%);
  box-shadow: 0 1px 2px rgba(12,90,44,.22), 0 5px 16px rgba(37,211,102,.28),
              var(--edge-lt);
}
.btn-wa:hover, .rc-btn-wa:hover, .upload-banner-btn:hover, .cfab-submit:hover {
  transform: translateY(-2px);
  filter: none;
  box-shadow: 0 2px 6px rgba(12,90,44,.22), 0 10px 26px rgba(37,211,102,.38),
              0 20px 44px rgba(37,211,102,.22), var(--edge-lt);
}
.btn-wa:active, .rc-btn-wa:active,
.upload-banner-btn:active, .cfab-submit:active {
  transform: translateY(0) scale(.985); transition-duration: 60ms;
}

.btn-ghost, .rc-btn-2 {
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-ghost:hover, .rc-btn-2:hover { transform: translateY(-2px); }
.btn-ghost:active, .rc-btn-2:active { transform: translateY(0) scale(.985); }

.btn-enquire {
  box-shadow: var(--sh-xs);
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out);
}
.btn-enquire:hover { box-shadow: var(--sh-gold); transform: translateY(-2px); }
.btn-enquire:active { transform: translateY(0) scale(.985); }

/* Disabled states existed nowhere. A control that looks live but isn't is a
   trust problem on a form that handles money. */
button[disabled], .btn-gold[disabled], .btn-wa[disabled], [aria-disabled="true"] {
  opacity: .48;
  cursor: not-allowed;
  filter: grayscale(.35);
  transform: none !important;
  box-shadow: none !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   7. SURFACES & CARDS
   Lift less, but light better. A 6px jump with a heavy shadow reads as a
   template; 3px with layered light reads as a physical object.
   ─────────────────────────────────────────────────────────────────────────── */
.svc-section, .acard, .trust-card, .tcard, .faq-item, .related-card,
.author-card, .seo-inner, .cfab-card, .geo-col, .address-card, .tbl-wrap {
  border-color: var(--hairline);
  box-shadow: var(--sh-xs), var(--edge-lt);
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.svc-card, .acard, .trust-card, .tcard, .related-card {
  background: linear-gradient(180deg, var(--surface-0) 0%, var(--surface-1) 100%);
}
.acard:hover, .trust-card:hover, .tcard:hover,
.related-card:hover, .svc-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md), var(--edge-lt);
  border-color: var(--hairline-warm);
}
.svc-card:hover .svc-img { transform: scale(1.055); }   /* was 1.10 — calmer */
.svc-img { transition: transform var(--t-lang) var(--ease-out); }

/* Hairline dividers should be gradients, not solid rules — a solid 1px line
   at full opacity is heavier than the content it separates. */
.svc-section h2 {
  border-bottom: none;
  position: relative;
  padding-bottom: 12px;
}
.svc-section h2::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg,
    rgba(201,162,39,.55) 0%, rgba(201,162,39,.22) 22%,
    var(--hairline) 55%, transparent 100%);
}

/* The answer-first block on the Business ITR page — give it a lit edge so it
   reads as a raised callout rather than a highlighted paragraph. */
.answer-first, .svc-tip {
  box-shadow: var(--edge-lt), 0 1px 2px rgba(13,27,42,.04);
}

/* ───────────────────────────────────────────────────────────────────────────
   8. DATA TABLES
   ─────────────────────────────────────────────────────────────────────────── */
.tbl-wrap {
  border-radius: 14px;
  /* Fade the right edge while the table can still scroll — tells the user
     there is more without adding a scrollbar. */
  background:
    linear-gradient(to right, var(--surface-0) 30%, transparent) left / 40px 100% no-repeat,
    linear-gradient(to left,  var(--surface-0) 30%, transparent) right / 40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(13,27,42,.09), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(13,27,42,.09), transparent) right / 14px 100% no-repeat,
    var(--surface-0);
  background-attachment: local, local, scroll, scroll, local;
}
table.geo-tbl th {
  background: linear-gradient(180deg, #16283C 0%, #0D1B2A 100%);
  box-shadow: var(--edge-dk);
  font-variant-numeric: tabular-nums;
  position: sticky; top: 0; z-index: 1;
}
table.geo-tbl tbody tr { transition: background var(--t-fast) var(--ease-out); }
table.geo-tbl tbody tr:hover { background: rgba(201,162,39,.09); }
table.geo-tbl td { border-color: var(--hairline); }

/* Status pills — flat fills read as tags; a hairline border reads as a badge. */
.pill-yes, .pill-no, .pill-warn {
  border: 1px solid currentColor;
  box-shadow: var(--edge-lt);
  letter-spacing: .04em;
}
.pill-yes  { border-color: rgba(30,132,73,.28); }
.pill-no   { border-color: rgba(107,122,141,.28); }
.pill-warn { border-color: rgba(192,57,43,.26); }

/* ───────────────────────────────────────────────────────────────────────────
   9. FORMS
   ─────────────────────────────────────────────────────────────────────────── */
.cfab-input, .cfab-textarea, input[type="text"], input[type="tel"],
input[type="email"], input[type="number"], textarea, select {
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out);
  box-shadow: inset 0 1px 2px rgba(13,27,42,.045);
}
.cfab-input:hover, .cfab-textarea:hover { border-color: rgba(13,27,42,.18); }
.cfab-input:focus, .cfab-textarea:focus {
  box-shadow: inset 0 1px 2px rgba(13,27,42,.03), 0 0 0 3.5px rgba(201,162,39,.16);
}
/* An error field should be reachable, not just red. */
.cfab-input.err, .cfab-textarea.err, [aria-invalid="true"] {
  box-shadow: inset 0 1px 2px rgba(13,27,42,.03), 0 0 0 3.5px rgba(229,57,53,.14);
}

/* ───────────────────────────────────────────────────────────────────────────
   10. DISCLOSURE / FAQ
   ─────────────────────────────────────────────────────────────────────────── */
.faq-item {
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.faq-item.open {
  border-color: var(--gold-line, #D4B86A);
  box-shadow: var(--sh-sm), var(--edge-lt);
}
.faq-q { transition: background var(--t-fast) var(--ease-out); }
.faq-arrow { transition: transform var(--t-base) var(--ease-spring); }
.faq-a { transition: max-height var(--t-slow) var(--ease-out),
                     padding var(--t-base) var(--ease-out); }

/* ───────────────────────────────────────────────────────────────────────────
   11. MOTION — reveals
   Slightly shorter travel, better curve. Big translateY on scroll reveal
   feels like a slideshow; small travel with a decisive curve feels like
   content settling into place.
   ─────────────────────────────────────────────────────────────────────────── */
.reveal {
  transform: translateY(14px);
  transition: opacity var(--t-lang) var(--ease-out),
              transform var(--t-lang) var(--ease-out);
}
.d1 { transition-delay: 60ms; }
.d2 { transition-delay: 120ms; }
.d3 { transition-delay: 180ms; }
.d4 { transition-delay: 240ms; }

/* Ambient hero rings — slower and fainter. Motion the eye can track is
   distraction; motion it cannot quite track is atmosphere. */
.hero-geo { opacity: .045; animation-duration: 54s !important; }

/* ───────────────────────────────────────────────────────────────────────────
   12. FLOATING CHROME
   ─────────────────────────────────────────────────────────────────────────── */
.cfab-btn {
  box-shadow: 0 1px 2px rgba(13,27,42,.16), 0 6px 18px rgba(13,27,42,.22),
              0 16px 38px rgba(13,27,42,.20), var(--edge-dk);
  transition: transform var(--t-base) var(--ease-spring),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
}
.cfab-btn:hover { transform: translateY(-2px); }
.cfab-btn:active { transform: translateY(0) scale(.97); transition-duration: 60ms; }
.cfab-panel {
  box-shadow: 0 2px 8px rgba(13,27,42,.10), 0 12px 32px rgba(13,27,42,.16),
              0 32px 72px rgba(13,27,42,.22);
  transition: opacity var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-spring),
              visibility var(--t-base);
}
.fixed-footer {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--hairline-warm);
  box-shadow: 0 -1px 0 rgba(255,255,255,.6), 0 -8px 28px rgba(13,27,42,.08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fixed-footer { background: #fff; }
}
.fixed-footer a img { transition: transform var(--t-base) var(--ease-spring); }
.fixed-footer a:hover img { transform: scale(1.14) translateY(-1px); }

/* ───────────────────────────────────────────────────────────────────────────
   13. ICON SYSTEM
   Emoji were doing the work of icons in ~250 places. They render differently
   on every OS, ignore the brand palette, and are the loudest "template" tell
   on the site. .ico is a currentColor SVG — inherits text colour, scales with
   font-size, aligns on the baseline.
   ─────────────────────────────────────────────────────────────────────────── */
.ico {
  width: 1.05em; height: 1.05em;
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -.16em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico-solid { fill: currentColor; stroke: none; }
.ico-lg { width: 1.35em; height: 1.35em; vertical-align: -.26em; }

/* ───────────────────────────────────────────────────────────────────────────
   14. TRUST STRIP  (new component — drop into any page)
   Credential signals are the highest-leverage missing element on a CA site.
   ─────────────────────────────────────────────────────────────────────────── */
.trust-strip {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 10px 26px;
  padding: 16px 20px;
  background: var(--surface-1);
  border-block: 1px solid var(--hairline);
}
.trust-strip-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .03em;
  color: var(--muted, #6B7A8D);
  white-space: nowrap;
}
.trust-strip-item .ico { color: var(--gold, #C9A227); }

/* ───────────────────────────────────────────────────────────────────────────
   15. SKELETON — for async states
   ─────────────────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(100deg,
    var(--surface-2) 30%, rgba(255,255,255,.75) 50%, var(--surface-2) 70%)
    0 0 / 240% 100%;
  animation: skelShimmer 1.5s var(--ease-in-out) infinite;
  border-radius: 8px; color: transparent !important; user-select: none;
}
@keyframes skelShimmer { to { background-position: -240% 0; } }

/* ───────────────────────────────────────────────────────────────────────────
   16. DESKTOP REFINEMENT
   The site is mobile-first and stays narrow on large screens. These give it
   presence on a laptop without a rebuild.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .svc-hero { padding-block: 124px 68px; }
  .svc-hero h1 { font-size: clamp(38px, 4.4vw, 56px); }
  .svc-hero p  { font-size: 15.5px; max-width: 520px; }
  .nav-item { transition-duration: var(--t-fast); }
  /* Cards get their hover lift only where a real pointer exists. */
  @media (hover: hover) and (pointer: fine) {
    .related-card:hover { transform: translateY(-4px); }
  }
}
@media (min-width: 1280px) {
  .svc-body { max-width: 1020px; }
  .geo-cols { gap: 16px; }
}

/* Touch devices must never keep a hover state stuck after a tap. */
@media (hover: none) {
  .acard:hover, .trust-card:hover, .tcard:hover,
  .related-card:hover, .svc-card:hover, .btn-gold:hover,
  .btn-wa:hover, .nav-item:hover { transform: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   17. PRINT
   CA clients print pages — checklists, document lists, due dates — and hand
   them to staff. Nobody builds for this, which is exactly why it lands.
   ─────────────────────────────────────────────────────────────────────────── */
@media print {
  .nav-container, .fixed-footer, .cfab, .float-wa, .copyright-bar,
  .upload-banner, .deadline-band, .rc-shell, .hero-ctas, .svc-cta-btns,
  .related-grid, .related-h { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  body { padding: 0 !important; font-size: 11pt; }

  .svc-hero {
    background: none !important; color: #000 !important;
    padding: 0 0 12pt !important; text-align: left !important;
    border-bottom: 1.5pt solid #000;
  }
  .svc-hero h1, .svc-hero h1 em, .svc-hero p, .breadcrumb, .breadcrumb strong {
    color: #000 !important;
  }
  .svc-body { max-width: none !important; padding: 0 !important; }
  .svc-section, .acard, .faq-item {
    box-shadow: none !important; border: .5pt solid #999 !important;
    break-inside: avoid; margin: 0 0 8pt !important;
  }
  /* Printed FAQs must show their answers. */
  .faq-a { max-height: none !important; padding: 0 12pt 10pt !important; }
  .faq-arrow { display: none !important; }
  table.geo-tbl th { background: #eee !important; color: #000 !important; }
  table.geo-tbl, .tbl-wrap { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  /* Print the destination of every link — a printed page with invisible
     hrefs is a dead end. */
  .svc-section a[href^="http"]::after { content: " (" attr(href) ")";
    font-size: 8.5pt; color: #555; word-break: break-all; }

  /* Firm identity on every printed sheet. */
  .svc-body::before {
    content: "CA Reshma Jadhav & Company · Chartered Accountant · Satara · +91 81779 22977";
    display: block; font-size: 8.5pt; color: #444;
    border-bottom: .5pt solid #bbb; padding-bottom: 5pt; margin-bottom: 10pt;
  }
}
