/* ═══════════════════════════════════════════════════════════════
   v8 — headline, three distinct Before/After concepts,
        section-boundary continuity, CTA lead-in
   Loads last: main → v2 → v3 → v4 → v5 → v6 → v7 → v8
   ═══════════════════════════════════════════════════════════════ */

/* ────────── 1. HERO HEADLINE ──────────
   "Make Your CA Practice a Digital Authority." is ~7ch longer than the
   line it replaces. Same size and treatment as before — it just needs a
   wider measure so it breaks into balanced lines instead of a ragged column. */
.hero .hero-h1,.hero-cine .hero-h1,.hero-h1{
  max-width:18ch;
  line-height:1.07;
  letter-spacing:-.022em;
  text-wrap:balance;
}
/* the rotating category slot in the hook — restored from the original
   [data-cycle] component; `data-cycle-lock` holds the slot at the widest
   term so the phrase never reflows and the hero height never changes */
.hero-cine .eyebrow.hero-hook .tcycle{
  color:var(--gold-2);
  vertical-align:bottom;
  text-align:left;
}
.hero-cine .eyebrow.hero-hook .tcycle .tc-w{
  transition:opacity .5s var(--ease),transform .55s var(--ease);
}
/* off-screen measuring pass for the locked slot — never visible */
.tcycle .tc-w.is-measuring{
  position:absolute;opacity:0;transform:none;transition:none;
}
@media (max-width:900px){ .hero .hero-h1,.hero-cine .hero-h1,.hero-h1{max-width:16ch} }
@media (max-width:560px){ .hero .hero-h1,.hero-cine .hero-h1,.hero-h1{max-width:14ch;line-height:1.09} }


/* ═══════════════════════════════════════════════════════════════
   2. BEFORE — one dated identity per concept
   The three concepts previously shared one template with a hue filter.
   Each now reads as a different kind of tired site.
   ═══════════════════════════════════════════════════════════════ */
.mk-old{filter:none}                    /* drop the muddy global desaturation */

/* ── 2a. DARK & DATA-LED · before: a heavy 2016 "corporate portal" ── */
.mk-old-dark{background:#141A21;color:#9EA8B4}
.mk-old-dark .o-top{background:#0C1116;border-bottom:3px solid #2A6496}
.mk-old-dark .o-brand{color:#E4E9EF;text-shadow:0 1px 0 #000}
.mk-old-dark .o-brand small{color:#6E8298}
.mk-old-dark .o-contact{color:#79848F}
.mk-old-dark .o-nav{background:#1B222A;border-bottom:1px solid #2A323C}
.mk-old-dark .o-nav span{color:#6D9CC6}
.mk-old-dark .o-nav span.on{color:#DDE4EB;border-bottom-color:#2A6496}
.mk-old-dark .o-hero{
  background:linear-gradient(#1E2831,#131A21);
  color:#D2D8DF;border-bottom:1px solid #262E38;
}
.mk-old-dark .o-hero h2{color:#E7ECF1;text-shadow:0 1px 1px rgba(0,0,0,.6)}
.mk-old-dark .o-hero p{color:#8A94A0}
.mk-old-dark .o-btn{background:#2A6496;border:1px solid #3C7CB4;color:#fff}
.mk-old-dark .o-cards{background:#141A21}
.mk-old-dark .o-card{background:#1A212A;border-color:#2A323C;box-shadow:none;text-align:left}
.mk-old-dark .o-ico{background:#232C36;color:#5588B8;margin-left:0}
.mk-old-dark .o-card h4{color:#C7D0D9}
.mk-old-dark .o-card p{color:#6E7883}
/* the "data" it used to show: three flat, unlabelled progress bars */
.mk-old-dark .o-card::after{
  content:"";display:block;height:6px;border-radius:2px;margin-top:1em;
  background:linear-gradient(90deg,#2A6496 0 var(--p,58%),#242C35 var(--p,58%) 100%);
}
.mk-old-dark .o-card:nth-child(2)::after{--p:34%}
.mk-old-dark .o-card:nth-child(3)::after{--p:71%}
.mk-old-dark .o-foot{background:#090D11;color:#4E565F}

/* ── 2b. BRIGHT & CORPORATE · before: a bright maroon-and-grey template ── */
.mk-old-bright{background:#fff;color:#4A4A4A}
.mk-old-bright .o-top{background:#7E1F2E;padding:1.25em 1.8em}
.mk-old-bright .o-brand small{color:#E5BFC5}
.mk-old-bright .o-contact{color:#EBD3D7}
.mk-old-bright .o-nav{background:#F7F4F2;border-bottom:1px solid #E4DAD9}
.mk-old-bright .o-nav span{color:#7E1F2E}
.mk-old-bright .o-nav span.on{border-bottom-color:#B08D3F;font-weight:700}
.mk-old-bright .o-hero{background:linear-gradient(#F3EDE7,#E9E0D8);color:#3B3B3B}
.mk-old-bright .o-hero h2{color:#7E1F2E}
.mk-old-bright .o-hero p{color:#6C6C6C}
.mk-old-bright .o-btn{background:#B08D3F;color:#fff}
.mk-old-bright .o-card{border-color:#E8E1DC}
.mk-old-bright .o-ico{background:#F6EFEA;color:#7E1F2E}
.mk-old-bright .o-card h4{color:#7E1F2E}
.mk-old-bright .o-foot{background:#3A2E30;color:#B9AAAC}

/* ── 2c. BOLD & MINIMAL · before: sparse, serif, and empty ── */
.mk-old-bold{background:#FAF8F4;color:#6E6E6E;font-family:Georgia,'Times New Roman',serif}
.mk-old-bold .o-top{
  background:#fff;color:#1A1A1A;border-bottom:1px solid #E7E2D9;
  padding:1.5em 2.4em;
}
.mk-old-bold .o-brand{font-weight:400;letter-spacing:.01em;color:#1A1A1A}
.mk-old-bold .o-brand small{color:#A2A2A2;letter-spacing:.16em}
.mk-old-bold .o-contact{color:#9C9C9C}
.mk-old-bold .o-nav{background:transparent;border-bottom:1px solid #EAE5DC;justify-content:center;padding:0}
.mk-old-bold .o-nav span{
  color:#676767;font-size:.7em;letter-spacing:.16em;text-transform:uppercase;
  padding:1.1em 1.3em;
}
.mk-old-bold .o-nav span.on{color:#1A1A1A;border-bottom:2px solid #1A1A1A;font-weight:400}
.mk-old-bold .o-hero{
  background:#FAF8F4;color:#1A1A1A;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:3.4em 2.4em;border-bottom:0;
}
.mk-old-bold .o-hero h2{
  font-size:2.35em;font-weight:400;color:#1A1A1A;max-width:15ch;
  line-height:1.22;margin-bottom:.7em;
}
.mk-old-bold .o-hero p{color:#8E8E8E;max-width:38ch;font-size:.95em;margin-bottom:1.6em}
.mk-old-bold .o-btn{
  background:transparent;color:#1A1A1A;border:1px solid #1A1A1A;border-radius:0;
  font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:.68em;
  letter-spacing:.18em;text-transform:uppercase;padding:.9em 2.2em;
}
.mk-old-bold .o-cards{display:none}     /* it never had more than this */
.mk-old-bold .o-foot{
  background:transparent;border-top:1px solid #EAE5DC;color:#AFAFAF;
  padding:1.3em 2.4em;font-family:Arial,Helvetica,sans-serif;
}


/* ═══════════════════════════════════════════════════════════════
   3. AFTER · DARK & DATA-LED — a practice dashboard, not a SaaS one
   ═══════════════════════════════════════════════════════════════ */
/* four panels on a 2×2 grid that spans the stage — no hollow middle band */
.mk-a1 .a-panel-trend,
.mk-a1 .a-panel-mix{
  position:absolute;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:1em;backdrop-filter:blur(12px);
  box-shadow:0 2em 4em -1.8em rgba(0,0,0,.5);
}
.mk-a1 .a-panel-serp,
.mk-a1 .a-panel-trend,
.mk-a1 .a-panel-mix,
.mk-a1 .a-panel-gbp{
  padding:1.15em 1.3em;
  display:flex;flex-direction:column;
  height:auto;overflow:hidden;
}
.mk-a1 .a-panel-serp {top:5.2em; bottom:51.5%; right:2.2em;  width:31%}
.mk-a1 .a-panel-trend{top:5.2em; bottom:51.5%; right:35.5%;  width:30%}
.mk-a1 .a-panel-mix  {top:50.5%; bottom:7.4em; right:35.5%;  width:30%}
.mk-a1 .a-panel-gbp  {top:50.5%; bottom:7.4em; right:2.2em;  width:31%}

/* let the charts take the slack rather than leaving it at the bottom */
.mk-a1 .a-panel-serp .a-bars{flex:1;height:auto;min-height:2.6em;margin-top:1em}
.mk-a1 .a-panel-serp .a-ph2{margin-top:.6em}
.mk-a1 .a-panel-gbp .a-gbp-rows{flex:1;align-items:center;max-height:3.4em}
.mk-a1 .a-panel-gbp .a-gbp-score{margin-bottom:.2em}
.mk-a1 .a-trendline{width:100%;flex:1;min-height:3.4em;display:block;margin-top:.2em}
.mk-a1 .a-trend-foot{
  display:flex;justify-content:space-between;margin-top:.55em;
  font-family:var(--mono);font-size:.6em;letter-spacing:.14em;
  text-transform:uppercase;opacity:.42;
}
.mk-a1 .a-mix-row{
  display:flex;align-items:center;gap:.7em;
  flex:1;max-height:5.6em;font-size:.84em;
}
.mk-a1 .a-mix-row + .a-mix-row{border-top:1px solid rgba(255,255,255,.07)}
.mk-a1 .a-mix-k{flex:0 0 42%;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-a1 .a-mix-bar{
  flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);
  overflow:hidden;display:block;
}
.mk-a1 .a-mix-bar i{
  display:block;height:100%;width:var(--w);border-radius:2px;
  background:linear-gradient(90deg,rgba(216,194,154,.5),#D8C29A);
  transform-origin:left;animation:aMix 1.1s var(--ease) .55s backwards;
}
@keyframes aMix{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mk-a1 .a-mix-row b{
  font-family:var(--mono);font-size:.85em;color:#D8C29A;
  flex:0 0 3.2em;text-align:right;
}
/* the AFTER headline lives under the BEFORE layer — keep it out of the way */
.mk-a1 .a-hero{max-width:38%}
@media (max-width:1100px){
  .mk-a1 .a-panel-trend,.mk-a1 .a-panel-mix{display:none}
  .mk-a1 .a-hero{max-width:none}
}


/* ═══════════════════════════════════════════════════════════════
   4. AFTER · BRIGHT & CORPORATE — a testimonial with real hierarchy
   ═══════════════════════════════════════════════════════════════ */
.mk-a2 .a-hero{padding-bottom:1.1em;align-items:stretch}
/* the dashboard card lines up with the quote below it and fills the field */
.mk-a2 .a-dash{
  flex:1.92;align-self:center;
  display:flex;flex-direction:column;justify-content:center;
}
.mk-a2 .a-line{height:7.6em;flex:0 0 auto}
.mk-a2 .a-col{align-self:center}
/* the left third of the stage sits under the BEFORE layer at every handle
   position a visitor is likely to leave it at — the quote lives on the right */
.mk-a2 .a-testi{
  position:relative;margin:0 2.2em 1.2em 38%;
  background:#fff;border:1px solid rgba(16,24,32,.09);
  border-left:3px solid #B48A3F;border-radius:.2em .9em .9em .2em;
  padding:1.25em 1.6em 1.15em 2.1em;
  box-shadow:0 1.4em 2.8em -1.6em rgba(16,24,32,.28);
}
.mk-a2 .a-quote{
  position:absolute;left:.62em;top:.02em;
  font-family:var(--serif);font-size:3.1em;line-height:1;
  color:rgba(180,138,63,.26);pointer-events:none;
}
.mk-a2 .a-testi blockquote{
  font-family:var(--serif);font-weight:450;font-size:1.32em;line-height:1.34;
  letter-spacing:-.008em;color:#101820;max-width:32ch;margin:0;
}
.mk-a2 .a-testi-by{
  display:flex;align-items:center;gap:.8em;
  margin-top:1em;padding-top:.85em;border-top:1px solid rgba(16,24,32,.08);
}
.mk-a2 .a-avatar{
  flex:0 0 auto;width:2.5em;height:2.5em;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(140deg,#2F3D34,#17251E);color:#D8C29A;
  font-family:var(--mono);font-size:.78em;letter-spacing:.06em;
  box-shadow:0 0 0 1px rgba(180,138,63,.35), 0 0 0 4px rgba(180,138,63,.09);
}
.mk-a2 .a-who{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.mk-a2 .a-who b{font-size:.94em;font-weight:600;color:#101820;letter-spacing:-.004em}
.mk-a2 .a-who i{
  font-style:normal;font-family:var(--mono);font-size:.62em;
  letter-spacing:.14em;text-transform:uppercase;color:#7A828C;margin-top:.3em;
}
.mk-a2 .a-testi-rate{flex:0 0 auto;color:#B48A3F;font-size:.78em;letter-spacing:.12em}
/* the cards below stay quiet so the quote leads */
.mk-a2 .a-cards{padding-bottom:1.7em}
.mk-a2 .a-card p{font-size:.82em}
@media (max-width:900px){
  .mk-a2 .a-testi{margin:0 1.6em 1.4em}
  .mk-a2 .a-testi blockquote{font-size:1.16em}
}


/* ═══════════════════════════════════════════════════════════════
   5b. AFTER · BOLD & MINIMAL — an editorial index, generously ruled
   ═══════════════════════════════════════════════════════════════ */
.mk-a3 .a-hero{max-width:40%}
/* one rail down the visible half: proof on top, a ruled index below it */
.mk-a3 .a-rail{
  position:absolute;left:41%;right:2.6em;top:5.4em;bottom:9.2em;
  display:flex;flex-direction:column;gap:1.8em;
}
.mk-a3 .a-vis{
  flex:0 0 auto;margin:0;padding:0;border-top:0;gap:2.6em;align-items:stretch;
}
.mk-a3 .a-vis-col{display:flex;flex-direction:column}
.mk-a3 .a-chip{padding-block:.72em}
.mk-a3 .a-spark2{height:auto;flex:1;min-height:3.4em}
.mk-a3 .a-index{flex:1;display:flex;flex-direction:column}
.mk-a3 .a-idx-row{
  display:flex;align-items:center;gap:1.4em;
  flex:1;
  padding-block:.9em;border-top:1px solid rgba(233,237,242,.12);
}
.mk-a3 .a-idx-row:last-child{border-bottom:1px solid rgba(233,237,242,.12)}
.mk-a3 .a-idx-row .n{
  flex:0 0 auto;font-family:var(--mono);font-size:.64em;letter-spacing:.18em;
  color:rgba(143,179,217,.8);
}
.mk-a3 .a-idx-row .k{
  flex:1;font-family:var(--serif);font-weight:450;font-size:1.5em;
  line-height:1.1;letter-spacing:-.012em;color:#E9EDF2;
}
.mk-a3 .a-idx-row .v{
  flex:0 0 auto;font-family:var(--mono);font-size:.6em;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(233,237,242,.4);text-align:right;
}
@media (max-width:1100px){
  .mk-a3 .a-hero{max-width:none}
  .mk-a3 .a-rail{position:static;margin:1.6em 2.2em 0;gap:1.2em}
  .mk-a3 .a-vis{padding-top:1.4em;border-top:1px solid rgba(233,237,242,.13)}
  .mk-a3 .a-index{display:none}
}


/* ═══════════════════════════════════════════════════════════════
   5. AFTER · BOLD & MINIMAL — three marks, nothing more
   ═══════════════════════════════════════════════════════════════ */
.mk-a3 .a-minstats{
  display:flex;margin:0 2.2em 1.4em;padding-top:1.2em;
  border-top:1px solid rgba(233,237,242,.13);
}
.mk-a3 .a-minstat{
  flex:1;padding-right:1.4em;
  border-right:1px solid rgba(233,237,242,.09);
}
.mk-a3 .a-minstat:last-child{border-right:0}
.mk-a3 .a-minstat b{
  display:block;font-family:var(--serif);font-weight:450;
  font-size:2.1em;line-height:1;letter-spacing:-.015em;color:#E9EDF2;
}
.mk-a3 .a-minstat span{
  display:block;margin-top:.5em;font-family:var(--mono);
  font-size:.6em;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(233,237,242,.42);
}
@media (max-width:900px){
  .mk-a3 .a-minstats{margin:0 1.6em 1.1em}
  .mk-a3 .a-minstat:nth-child(3){display:none}
}


/* ═══════════════════════════════════════════════════════════════
   6. BEFORE & AFTER → PACKAGES — one continuous surface
   .ba2 is dark and .plans-zone is ivory; the ivory sheet was the only
   light section without the rounded overlap, so the join read as a break.
   ═══════════════════════════════════════════════════════════════ */
.ba2{padding-bottom:clamp(3.4rem,6vw,5.4rem)}
.plans-zone{
  position:relative;z-index:7;background-color:var(--paper);
  border-radius:clamp(18px,3vw,34px) clamp(18px,3vw,34px) 0 0;
  margin-top:calc(clamp(18px,3vw,34px) * -1);
  box-shadow:0 -30px 60px -40px rgba(11,20,32,.45);
  padding-top:clamp(3.4rem,6.2vw,5.6rem);
}
.plans-zone::before{                    /* ivory rises out of the dark, no hard line */
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(70px,9vw,120px);
  background:linear-gradient(rgba(11,20,32,.065),rgba(11,20,32,0));
  border-radius:inherit;pointer-events:none;z-index:-1;
}
/* NB: the seam sits at z-index:-1 — behind the content, above the section's own
   background — so this section must NOT lift its children with `> *`. A rule like
   `.plans-zone > *{position:relative}` outranks `.rib-canvas{position:absolute}`
   and drops a 2,874px canvas into normal flow. See the guard below. */


/* ═══════════════════════════════════════════════════════════════
   6b. GUARD — decorative layers must never fall into normal flow
   `.on-dark > *,.ba2 > *,.cta > *{position:relative}` (v7) has the same
   specificity as a bare `.orb`/`.rib-canvas`/`.cta-curve` rule but wins on
   order, which silently converts absolute overlays into flow content and
   inflates the section by their full height. These compound selectors
   outrank any such `> *` rule, so the class of bug cannot recur.
   ═══════════════════════════════════════════════════════════════ */
.section > .rib-canvas,.has-ribbons > .rib-canvas,
.section > .orb,.on-dark > .orb,.ba2 > .orb,.cta > .orb,
.section > .cta-curve,.cta > .cta-curve,
.section > .rupee-ghost,.plans-zone > .rupee-ghost{position:absolute}


/* ═══════════════════════════════════════════════════════════════
   7. WHY FIRMS TRUST US → FREE 15-MINUTE CONSULTATION
   Close the dead band, and start the line beneath the buttons so it
   reads as something the CTA sends upward rather than a stray stroke.
   ═══════════════════════════════════════════════════════════════ */
.inwriting{padding-bottom:clamp(2.6rem,4.6vw,4.2rem)}
.cta{padding-top:clamp(3rem,5.4vw,4.8rem)}
.cta .cta-inner{gap:clamp(1.4rem,2.6vw,2rem)}

/* v7's `.on-dark > *,.ba2 > *,.cta > *{position:relative}` was beating the
   `position:absolute` on every decorative layer in those sections. The two
   blurred orbs (454px + 372px) and the 305px curve were all sitting in normal
   flow above the copy — 1,131px of dead air, which is the whole of that gap. */
.cta > .cta-curve{
  position:absolute;
  inset:auto 0 0 0;                     /* bottom band only */
  height:clamp(180px,30%,320px);
  opacity:.62;z-index:1;
}
.cta > .cta-curve svg{display:block;width:100%;height:100%}
.cta-curve .cv-origin{
  transform-box:fill-box;transform-origin:center;
  animation:ctaOrigin 3.4s ease-in-out 1.1s infinite;
}
@keyframes ctaOrigin{0%,100%{opacity:.55;r:3.4px}50%{opacity:1;r:4.6px}}
@media (prefers-reduced-motion:reduce){ .cta-curve .cv-origin{animation:none} }
@media (max-width:760px){
  .cta-curve{height:clamp(150px,40%,240px);opacity:.5}
}


/* ═══════════════════════════════════════════════════════════════
   8. Responsive guards for the new pieces
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .mk-a1 .a-panel-serp,.mk-a1 .a-panel-gbp{width:38%}
}
@media (max-width:900px){
  .mk-a1 .a-panel-serp{position:static;width:auto;margin:0 1.6em}
}
.mk-old,.mk-a{overflow:hidden}          /* nothing escapes the device frame */

/* the BEFORE / AFTER — REDESIGNED chips sit over the mock footers: clear them */
.mk-old .o-foot{padding-left:12em}
.mk-old-bold .o-foot{padding-left:12em}
.mk-a .a-foot,.mk-a1 .a-strip{padding-right:0}
.mk-a3 .a-foot{padding-right:18em;padding-left:2.2em}
.mk-a1 .a-strip .a-stat:last-child{padding-right:17em}

/* Georgia has to be restated — the sheet sets a sans face on every h2 */
.mk-old-bold .o-brand,
.mk-old-bold .o-hero h2,
.mk-old-bold .o-card h4{font-family:Georgia,'Times New Roman',serif;font-weight:400}