/* ════════════════════════════════════════════════════════════
   V6 — ERROR FIX + POLISH PASS
   One-line hero hook · readable greys · no red · firmer grid ·
   compact Idea · richer AFTER mockups · premium opening
   (Palette, families and layout system unchanged.)
   ════════════════════════════════════════════════════════════ */

/* ---------- 1. HERO HOOK: one element, one line, never clipped ---------- */
.hero-copy{width:min(720px,56vw)}
.hero-cine .eyebrow.hero-hook{
  display:block;                       /* no flex items to redistribute */
  font-size:clamp(.78rem,.44rem + .6vw,1.12rem);
  letter-spacing:.15em;
  font-weight:600;
  line-height:1.35;
  color:#FCFAF4;
  margin-bottom:clamp(1rem,1.9vh,1.5rem);
  text-shadow:0 0 30px rgba(201,165,92,.5),0 0 10px rgba(201,165,92,.3),0 2px 12px rgba(11,20,32,.72);
  max-width:none;
}
.hero-cine .eyebrow.hero-hook::before{
  content:"";display:block;
  width:58px;height:2px;background:var(--gold-2);
  box-shadow:0 0 14px rgba(201,165,92,.8);
  margin-bottom:.85em;
}
/* single clean line from 1025px up; controlled wrap below */
@media (min-width:1025px){
  .hero-cine .eyebrow.hero-hook{white-space:nowrap}
}
@media (max-width:1024px){
  .hero-copy{width:min(660px,72vw)}
  .hero-cine .eyebrow.hero-hook{white-space:normal;font-size:clamp(.76rem,.6rem + .6vw,.95rem)}
}
@media (max-width:640px){
  .hero-copy{width:100%;max-width:560px}
  .hero-cine .eyebrow.hero-hook{font-size:.8rem;letter-spacing:.13em}
  .hero-cine .eyebrow.hero-hook::before{width:40px;margin-bottom:.7em}
}

/* ---------- 2. hierarchy: hook leads, headline follows ---------- */
.hero-cine h1{font-size:clamp(1.8rem,1.15rem + 2.35vw,3.05rem);margin-top:0}
.hero-cine .hero-sub{
  font-size:clamp(.94rem,.9rem + .18vw,1.02rem);
  max-width:520px;line-height:1.75;
  color:rgba(245,242,234,.82);
}

/* ---------- 3. grid texture: present, still quiet ---------- */
.statement-v2,#why-us,.path-v2,.plans-zone,.inwriting,.page-hero{
  background-image:
    repeating-linear-gradient(to right,rgba(150,116,52,.07) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(to bottom,rgba(150,116,52,.055) 0 1px,transparent 1px 96px);
}

/* ---------- 4. greys: readable, still hierarchical ---------- */
:root{--steel:#4E5866}
.eyebrow{color:rgba(11,20,32,.82)}
.lede{color:#4E5866}
.on-dark .lede,.ba2 .lede{color:rgba(245,242,234,.78)}
.plan .for,.path-card p,.iw-item p,.trust-card p,.promise p,.faq-a p{color:#4E5866}
.plan-inc .t{color:rgba(11,20,32,.72)}
.plans-note{color:#4E5866}
.crumb{color:rgba(11,20,32,.62)}
.coord,.band-cap{color:rgba(11,20,32,.5)}
.on-dark .band-cap{color:rgba(245,242,234,.7)}
.photo-card .cap{color:rgba(11,20,32,.62)}
.gstin{color:#4E5866}
.contact-side-meta .hours{color:#4E5866}
.hero-proof{color:rgba(245,242,234,.8)}
.svc-panel p{color:rgba(245,242,234,.76)}
.svc-panel .svc-tagline,.svc-count{color:rgba(245,242,234,.72)}
.audit-panel .ap-ref,.form-head .ref{color:rgba(245,242,234,.7)}
.form-note,.form-foot .priv{color:rgba(245,242,234,.66)}
.f-field label{color:rgba(245,242,234,.66)}
.footer-col a{color:rgba(245,242,234,.84)}
.footer-brand p{color:rgba(245,242,234,.7)}
.footer h5{color:rgba(245,242,234,.62)}
.footer-meta{color:rgba(245,242,234,.6)}
.marquee-item{color:rgba(11,20,32,.62)}
.mmenu-meta{color:rgba(245,242,234,.62)}
.ctable thead th{color:#4E5866}
.ctable .no{color:rgba(11,20,32,.4)}

/* ---------- 5. Why us: no red, neutral comparison ---------- */
.cmp-them li .sline,.strike-item .sline{display:none !important}
.cmp-them li{
  color:#5A6472;
  padding-left:1.6rem;position:relative;
}
.cmp-them li::before{
  content:"";position:absolute;left:0;top:1.55rem;
  width:9px;height:1.5px;background:rgba(11,20,32,.3);
}
.cmp-them .cmp-head .mk{background:rgba(11,20,32,.07);color:rgba(11,20,32,.55)}
.cmp-them{background:rgba(11,20,32,.028)}

/* ---------- 6. The Idea: tighter, image behaves ---------- */
.statement-v2{padding-block:clamp(3.6rem,6.5vw,6rem)}
.photo-card img{aspect-ratio:4/3.5}
.statement-v2 .bignum-row{margin-top:clamp(2.4rem,4.5vw,3.6rem)}
.rv-img.is-in .ph{transition-duration:.9s}

/* ---------- 7. general vertical efficiency ---------- */
.section{padding-block:clamp(4.4rem,8vw,7.6rem)}
.sec-head{margin-bottom:clamp(2.2rem,4.2vw,3.6rem)}

/* ════════ 8. AFTER mockups — real depth ════════ */
.mk-a .a-nav{padding:1.5em 2.2em}
.mk-a .a-hero{padding:2.4em 2.2em 1.6em}
.mk-a h2{font-size:2.9em;max-width:15ch}
.mk-a .a-sub{margin-top:.9em;font-size:1em;max-width:38ch;line-height:1.5}
.mk-a .a-btnrow{display:flex;gap:.8em;margin-top:1.5em}
.mk-a .a-btn-solid,.mk-a .a-btn-ghost{border-radius:100px;padding:.7em 1.4em;font-size:.9em;font-weight:500}
.mk-a .a-ph{font-family:var(--mono);font-size:.68em;letter-spacing:.2em;text-transform:uppercase;opacity:.62;display:block;margin-bottom:.9em}
.mk-a .a-ph2{font-family:var(--mono);font-size:.64em;letter-spacing:.16em;text-transform:uppercase;opacity:.5;margin-top:.7em}
/* chart draw + counter shimmer */
.a-draw{stroke-dasharray:400;stroke-dashoffset:400;animation:aDraw 2.6s var(--ease) .4s forwards}
@keyframes aDraw{to{stroke-dashoffset:0}}
.a-dot{opacity:0;animation:aFade .6s ease 2.7s forwards}
@keyframes aFade{to{opacity:1}}
.a-bars{display:flex;align-items:flex-end;gap:.45em;height:3.6em;margin-top:1.2em}
.a-bars i{flex:1;height:var(--h);border-radius:2px 2px 0 0;transform-origin:bottom;animation:aGrow 1.1s var(--ease) backwards}
.a-bars i:nth-child(1){animation-delay:.5s}.a-bars i:nth-child(2){animation-delay:.65s}
.a-bars i:nth-child(3){animation-delay:.8s}.a-bars i:nth-child(4){animation-delay:.95s}
.a-bars i:nth-child(5){animation-delay:1.1s}.a-bars i:nth-child(6){animation-delay:1.25s}
@keyframes aGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* A — dark, data-led */
.mk-a1 .a-btn-solid{background:#D8C29A;color:#17251E}
.mk-a1 .a-btn-ghost{border:1px solid rgba(241,237,227,.3);color:#F1EDE3}
.mk-a1 .a-panel-serp{
  position:absolute;right:2.2em;top:6.4em;width:33%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:1em;padding:1.3em 1.4em;backdrop-filter:blur(12px);
  box-shadow:0 2em 4em -1.6em rgba(0,0,0,.55);
}
.mk-a1 .a-serp-row{display:flex;justify-content:space-between;align-items:center;padding:.5em 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:.92em}
.mk-a1 .a-serp-row:last-of-type{border-bottom:0}
.mk-a1 .a-kw{opacity:.85}
.mk-a1 .a-rank{font-family:var(--mono);font-size:.85em;color:#D8C29A;background:rgba(216,194,154,.14);border-radius:100px;padding:.15em .7em}
.mk-a1 .a-bars i{background:linear-gradient(#D8C29A,rgba(216,194,154,.35))}
.mk-a1 .a-strip{display:flex;gap:0;border-top:1px solid rgba(241,237,227,.12);margin:0 2.2em;padding:1.2em 0}
.mk-a1 .a-stat{flex:1;border-right:1px solid rgba(241,237,227,.1);padding-right:1em}
.mk-a1 .a-stat:last-child{border-right:0}
.mk-a1 .a-stat b{font-family:var(--serif);font-size:1.9em;font-weight:450;display:block;letter-spacing:-.01em}
.mk-a1 .a-stat b i{font-style:normal;font-size:.55em;color:#D8C29A}
.mk-a1 .a-stat span{font-family:var(--mono);font-size:.64em;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.mk-a1 .a-trend b{color:#D8C29A}

/* B — bright, corporate */
.mk-a2 .a-hero{display:flex;gap:2em;align-items:flex-start;padding-top:2em}
.mk-a2 .a-col{flex:1.15}
.mk-a2 h2{font-size:2.4em;max-width:13ch}
.mk-a2 .a-btn-solid{background:#7E3B36;color:#F6F1E8}
.mk-a2 .a-btn-ghost{border:1px solid rgba(16,24,32,.24);color:#101820}
.mk-a2 .a-dash{flex:1;background:#fff;border:1px solid rgba(16,24,32,.1);border-radius:.9em;padding:1.2em 1.3em;box-shadow:0 1.6em 3em -1.4em rgba(16,24,32,.22)}
.mk-a2 .a-line{width:100%;height:5.4em;display:block}
.mk-a2 .a-rows{margin-top:1em;border-top:1px solid rgba(16,24,32,.09);padding-top:.6em}
.mk-a2 .a-rows .r{display:flex;justify-content:space-between;padding:.42em 0;font-size:.92em;color:#4E5866}
.mk-a2 .a-rows .ok{color:#B48A3F}
.mk-a2 .a-cards{display:flex;gap:1em;padding:0 2.2em 2em}
.mk-a2 .a-card{flex:1;border:1px solid rgba(16,24,32,.1);border-radius:.7em;padding:1.1em 1.2em;background:#fff}
.mk-a2 .a-card .n{font-family:var(--mono);font-size:.68em;letter-spacing:.18em;color:#B48A3F}
.mk-a2 .a-card h4{font-size:1.05em;margin:.4em 0 .3em;font-weight:600}
.mk-a2 .a-card p{font-size:.86em;color:#666F7B;line-height:1.45}

/* C — bold, minimal */
.mk-a3 .a-sub{color:rgba(233,237,242,.66);max-width:34ch}
.mk-a3 .a-vis{display:flex;gap:2.4em;margin-top:1.8em;padding-top:1.4em;border-top:1px solid rgba(233,237,242,.13)}
.mk-a3 .a-vis-col{flex:1}
.mk-a3 .a-chip{
  display:flex;justify-content:space-between;align-items:center;
  border:1px solid rgba(233,237,242,.16);border-radius:100px;
  padding:.45em 1em;margin-bottom:.5em;font-size:.88em;color:rgba(233,237,242,.8);
}
.mk-a3 .a-chip b{color:#8FB3D9;font-family:var(--mono);font-size:.9em}
.mk-a3 .a-spark2{width:100%;height:3em;display:block}
.mk-a3 .a-mini{font-family:var(--mono);font-size:.62em;letter-spacing:.14em;text-transform:uppercase;opacity:.45;margin-top:.5em;display:block}

@media (max-width:900px){
  .mk-a1 .a-panel-serp{position:static;width:auto;margin:0 2.2em}
  .mk-a2 .a-hero{flex-direction:column}
  .mk-a2 .a-cards{display:none}
  .mk-a1 .a-strip .a-stat:nth-child(n+3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .a-draw{animation:none;stroke-dashoffset:0}
  .a-dot{animation:none;opacity:1}
  .a-bars i{animation:none}
}

/* ---------- 9. slider: smoother reveal ---------- */
.ba-clip{transition:clip-path .12s linear}
.ba-stage.is-dragging .ba-clip{transition:none}
.ba-handle{transition:left .12s linear}
.ba-stage.is-dragging .ba-handle{transition:none}

/* the mockups must FILL the stage — natural height left the lower half empty */
.mk-a{position:absolute;inset:0;display:flex;flex-direction:column}
.mk-a .a-hero{flex:1 1 auto}
.mk-a1 .a-strip,.mk-a2 .a-cards,.mk-a3 .a-foot{margin-top:auto}
.mk-a2 .a-hero{align-items:center}

/* second right-hand card — the visible half of the AFTER must carry weight */
.mk-a1 .a-panel-gbp{
  position:absolute;right:2.2em;top:auto;bottom:7.2em;width:33%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:1em;padding:1.2em 1.4em;backdrop-filter:blur(12px);
  box-shadow:0 2em 4em -1.8em rgba(0,0,0,.5);
}
.mk-a1 .a-gbp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7em}
.mk-a1 .a-verified{font-family:var(--mono);font-size:.6em;letter-spacing:.14em;text-transform:uppercase;color:#D8C29A;border:1px solid rgba(216,194,154,.4);border-radius:100px;padding:.2em .7em}
.mk-a1 .a-gbp-score{display:flex;align-items:baseline;gap:.55em}
.mk-a1 .a-gbp-score b{font-family:var(--serif);font-size:2.1em;font-weight:450}
.mk-a1 .a-stars{color:#D8C29A;font-size:.9em;letter-spacing:.1em}
.mk-a1 .a-gbp-sub{font-size:.82em;opacity:.6;margin-top:.15em}
.mk-a1 .a-gbp-rows{display:flex;justify-content:space-between;font-size:.85em;padding:.45em 0;border-top:1px solid rgba(255,255,255,.09);margin-top:.5em}
.mk-a1 .a-gbp-rows b{color:#D8C29A;font-weight:500}
@media (max-width:900px){.mk-a1 .a-panel-gbp{display:none}}

/* ════════ 10. OPENING SHOT — a ~3s brand introduction ════════ */
.loader{
  background:#0B1420;
  gap:0;
  transition:clip-path 1s cubic-bezier(.76,0,.24,1) .05s, visibility 0s 1.05s;
}
.loader .brand,.loader .rule,.loader .pct{position:relative;z-index:2}
/* 0.0–0.9s · the mark breathes in */
.loader::before{
  content:"";display:block;width:76px;height:76px;margin-bottom:26px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 52 C 26 50 39 41 53 15' stroke='%23C9A55C' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='53' cy='15' r='4.5' fill='%23C9A55C'/%3E%3Ccircle cx='32' cy='32' r='29' stroke='%23C9A55C' stroke-opacity='.34' stroke-width='1'/%3E%3C/svg%3E");
  opacity:0;transform:scale(.82);
  filter:drop-shadow(0 0 22px rgba(201,165,92,.4));
  animation:loMark 1.1s cubic-bezier(.22,1,.36,1) .1s forwards;
}
@keyframes loMark{to{opacity:1;transform:scale(1)}}
/* 0.55–1.55s · the wordmark rises behind a mask */
.loader .brand{
  font-size:clamp(1.9rem,5vw,2.7rem);
  opacity:1;animation:none;
  overflow:hidden;line-height:1.25;
}
.loader .brand::after{
  content:"";position:absolute;inset:0;background:#0B1420;
  transform:translateY(0);
  animation:loWipe 1s cubic-bezier(.76,0,.24,1) .55s forwards;
}
@keyframes loWipe{to{transform:translateY(-101%)}}
/* 1.0–2.0s · the gold rule draws out from the centre */
.loader .rule{
  width:min(240px,52vw);height:1px;background:rgba(201,165,92,.28);
  margin-top:20px;overflow:visible;
}
.loader .rule::after{
  content:"";position:absolute;inset:0;background:var(--gold-2);
  transform:scaleX(0);transform-origin:center;
  animation:loRule 1s cubic-bezier(.22,1,.36,1) 1s forwards;
  box-shadow:0 0 16px rgba(201,165,92,.7);
}
@keyframes loRule{to{transform:scaleX(1)}}
/* 1.6–2.4s · the positioning line settles in */
.loader .pct{
  margin-top:20px;font-size:.66rem;letter-spacing:.34em;
  color:rgba(245,242,234,.6);opacity:0;
  animation:loMeta .85s cubic-bezier(.22,1,.36,1) 1.6s forwards;
}
@keyframes loMeta{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 3.0s · the curtain lifts into the hero, everything easing together */
.loader.is-done{
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
}
.loader.is-done .brand,.loader.is-done .rule,.loader.is-done .pct,.loader.is-done::before{
  transition:opacity .5s ease, transform .8s cubic-bezier(.22,1,.36,1);
  opacity:0;transform:translateY(-14px) scale(1.02);
}
@media (prefers-reduced-motion:reduce){
  .loader::before,.loader .brand::after,.loader .rule::after,.loader .pct{animation:none}
  .loader::before{opacity:1;transform:none}
  .loader .brand::after{transform:translateY(-101%)}
  .loader .rule::after{transform:scaleX(1)}
  .loader .pct{opacity:1}
}

/* ════════ 11. THE IDEA — an original PracticeReach composition ════════
   The photograph is the client's own approved artwork (Indian CA statute
   volumes above a golden-hour skyline). The plate over it is drawn here,
   so the visual is composed for this brand rather than picked off a shelf. */
.photo-card{position:relative}
.photo-card .ph{position:relative}
.photo-card .ph::after{background:linear-gradient(155deg,rgba(11,20,32,.04) 0%,rgba(11,20,32,.5) 78%)}
.idea-plate{
  position:absolute;left:clamp(-2.2rem,-2vw,-1rem);bottom:clamp(2.4rem,5vw,3.4rem);
  width:min(268px,72%);z-index:3;
  background:rgba(16,28,46,.62);
  border:1px solid rgba(201,165,92,.34);
  border-radius:14px;padding:1.05rem 1.2rem 1rem;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 34px 70px -34px rgba(11,20,32,.72);
  color:var(--paper);
}
.idea-plate .ip-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.55rem}
.idea-plate .ip-k{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,242,234,.72)}
.idea-plate .ip-tag{font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);border:1px solid rgba(201,165,92,.42);border-radius:100px;padding:.15em .6em}
.idea-plate .ip-val{font-family:var(--serif);font-size:1.85rem;font-weight:440;line-height:1.1;letter-spacing:-.01em}
.idea-plate .ip-val i{font-style:normal;color:var(--gold-2);margin:0 .12em}
.idea-plate .ip-sub{font-size:.74rem;color:rgba(245,242,234,.68);margin-top:.15rem}
.idea-plate .ip-spark{width:100%;height:44px;display:block;margin-top:.7rem}
.idea-plate .ip-quarters{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;color:rgba(245,242,234,.45);margin-top:.25rem}
.ip-draw{stroke-dasharray:230;stroke-dashoffset:230}
.rv-img.is-in .ip-draw{animation:ipDraw 1.8s cubic-bezier(.22,1,.36,1) .5s forwards}
@keyframes ipDraw{to{stroke-dashoffset:0}}
.ip-dot{opacity:0}
.rv-img.is-in .ip-dot{animation:ipDot .5s ease 2.1s forwards}
@keyframes ipDot{to{opacity:1}}
@media (max-width:1100px){.idea-plate{left:auto;right:1rem;bottom:1rem;width:min(240px,62%)}}
@media (max-width:560px){.idea-plate{width:min(215px,74%);padding:.85rem 1rem}.idea-plate .ip-val{font-size:1.5rem}}
@media (prefers-reduced-motion:reduce){.ip-draw{stroke-dashoffset:0;animation:none}.ip-dot{opacity:1;animation:none}}