/* ==========================================================================
   KKOMAL VASISHT — Design System v3
   LIGHT PAGE / DARK CHROME.  Premium Vedic: sindoor maroon, kesari saffron,
   haldi gold, sandalwood cream.

   RETHEME THE WHOLE SITE by editing :root below. Nothing hardcodes a colour.
   ========================================================================== */

:root {
  --maroon:        #7B2E28;
  --maroon-deep:   #5E211C;
  --maroon-dark:   #4A1A16;   /* header / footer chrome */
  --maroon-darker: #35110E;
  --maroon-soft:   #F5E7E4;

  --saffron:       #E2711D;
  --saffron-deep:  #B85512;
  --saffron-soft:  #FDEEDD;
  --saffron-light: #F59A45;

  --gold:          #C9A227;
  --gold-light:    #E3C766;
  --gold-soft:     #FAF1D8;

  --canvas:        #FDF8F1;
  --surface:       #FFFFFF;
  --surface-alt:   #FAF3E9;
  --border:        #EADFCD;
  --border-strong: #DDCBB0;

  --ink:           #2A1810;
  --ink-secondary: #5C4436;
  --ink-muted:     #8B7461;
  --on-dark:       #FFF8EF;
  --on-dark-muted: #E4C9BD;

  --primary:       var(--maroon);
  --accent:        var(--saffron-deep);
  --success:       #1F6B45;
  --danger:        #A32C21;

  --font-display: ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px;

  --sh-1: 0 1px 3px rgba(90,52,32,.07);
  --sh-2: 0 4px 18px rgba(90,52,32,.10);
  --sh-3: 0 14px 44px rgba(90,52,32,.16);
}

*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.18; font-weight:600;
  letter-spacing:-.012em; color:var(--ink); margin:0 0 var(--s4); }
h1{font-size:clamp(32px,5vw,48px);} h2{font-size:clamp(25px,3.5vw,34px);} h3{font-size:20px;}
p { margin:0 0 var(--s4); color:var(--ink-secondary); }
a { color:var(--maroon); text-underline-offset:3px; }
img { max-width:100%; height:auto; display:block; }

.container { max-width:1200px; margin:0 auto; padding:0 var(--s5); }
.narrow { max-width:1000px; }
.section { padding:var(--s8) 0; }
.section-alt { background:var(--surface-alt); border-block:1px solid var(--border); }
.section-head { text-align:center; max-width:680px; margin:0 auto var(--s6); }
.section-head p { font-size:17px; }
.kicker { display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--saffron-deep); margin-bottom:var(--s2); }
.gold-rule { width:64px; height:3px; margin:var(--s3) auto var(--s4);
  background:linear-gradient(90deg,transparent,var(--gold),transparent); border-radius:2px; }

/* ============================ DARK HEADER ============================ */
.topbar { background:var(--maroon-darker); color:var(--on-dark-muted); font-size:13px; }
.topbar .inner { display:flex; justify-content:space-between; align-items:center;
  height:38px; gap:var(--s4); }
.topbar a { color:var(--on-dark-muted); text-decoration:none; }
.topbar a:hover { color:var(--gold-light); }
.topbar .tb-right { display:flex; gap:var(--s5); }

.site-header { background:var(--maroon-dark); position:sticky; top:0; z-index:100;
  box-shadow:0 2px 0 var(--gold), 0 6px 20px rgba(53,17,14,.25); }
.site-header .inner { display:flex; align-items:center; justify-content:space-between; height:76px; gap:var(--s5); }
.logo { font-family:var(--font-display); font-size:23px; font-weight:600;
  color:var(--on-dark); text-decoration:none; white-space:nowrap; }
.logo span { color:var(--gold-light); }

.nav { display:flex; align-items:center; gap:var(--s2); }
.nav > li { list-style:none; position:relative; }
.nav-list { display:flex; align-items:center; gap:var(--s1); margin:0; padding:0; }
.nav-link { display:inline-flex; align-items:center; gap:5px;
  color:#FFFFFF; text-decoration:none; font-size:15px; font-weight:500;
  padding:var(--s3) var(--s4); border-radius:var(--r-sm); white-space:nowrap; }
.nav-link:hover, .nav-item:hover .nav-link { background:rgba(255,255,255,.12); color:var(--gold-light); }
.nav-link .caret { font-size:10px; opacity:.8; }

/* Mega menu — CSS-driven, works without JS */
.mega { position:absolute; left:50%; transform:translateX(-50%) translateY(8px);
  top:100%; min-width:640px; background:var(--surface); border:1px solid var(--border);
  border-top:3px solid var(--gold); border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--sh-3); padding:var(--s5); opacity:0; visibility:hidden;
  transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:120; }
.nav-item:hover > .mega, .nav-item:focus-within > .mega {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.mega h5 { font-family:var(--font-body); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--saffron-deep); font-weight:700; margin:0 0 var(--s3); }
.mega a { display:block; padding:5px 0; color:var(--ink-secondary);
  text-decoration:none; font-size:14.5px; }
.mega a:hover { color:var(--maroon); }
.mega-promo { grid-column:span 1; background:var(--gold-soft); border:1px solid var(--gold);
  border-radius:var(--r-md); padding:var(--s4); }
.mega-promo strong { display:block; font-family:var(--font-display); color:var(--maroon);
  font-size:16px; margin-bottom:var(--s2); }
.mega-promo span { font-size:13px; color:var(--ink-secondary); display:block; margin-bottom:var(--s3); }

.hamburger { display:none; background:none; border:1px solid rgba(255,255,255,.3);
  color:#fff; width:44px; height:44px; border-radius:var(--r-sm); font-size:20px; cursor:pointer; }

/* ============================ BUTTONS ============================ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:50px; padding:0 var(--s5); border-radius:var(--r-sm); border:1px solid transparent;
  font-family:var(--font-body); font-size:16px; font-weight:600; cursor:pointer;
  text-decoration:none; transition:all .16s cubic-bezier(.4,0,.2,1); }
.btn-sm { min-height:40px; font-size:14px; padding:0 var(--s4); }
.btn-primary { background:var(--maroon); color:var(--on-dark); box-shadow:var(--sh-1); }
.btn-primary:hover { background:var(--maroon-deep); box-shadow:var(--sh-2); }
.btn-accent { background:var(--saffron-deep); color:var(--on-dark); box-shadow:var(--sh-1); }
.btn-accent:hover { background:#9C460D; box-shadow:var(--sh-2); }
.btn-gold { background:var(--gold); color:#3A2A00; }
.btn-gold:hover { background:var(--gold-light); }
.btn-ghost { background:var(--surface); color:var(--maroon); border-color:var(--border-strong); }
.btn-ghost:hover { background:var(--surface-alt); border-color:var(--gold); }
.btn-onDark { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.35); }
.btn-onDark:hover { background:rgba(255,255,255,.24); }
.btn-outline-accent { background:transparent; color:var(--saffron-deep); border-color:var(--saffron); }
.btn-outline-accent:hover { background:var(--saffron-soft); }

/* ============================ HERO ============================ */
.hero-main { position:relative; background:
    radial-gradient(1000px 420px at 15% -10%, rgba(226,113,29,.10), transparent 60%),
    radial-gradient(900px 400px at 90% 0%, rgba(201,162,39,.14), transparent 60%),
    var(--canvas);
  padding:var(--s9) 0 var(--s8); overflow:hidden; }
.hero-main::after { content:""; position:absolute; inset:auto 0 0 0; height:1px; background:var(--border); }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s7); align-items:center; }
.hero-eyebrow { display:inline-flex; align-items:center; gap:var(--s2); font-size:12.5px;
  letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--saffron-deep);
  background:var(--saffron-soft); border:1px solid #F3D9BC; padding:6px var(--s4);
  border-radius:var(--r-full); margin-bottom:var(--s4); }
.hero-main h1 { font-size:clamp(34px,4.6vw,54px); margin-bottom:var(--s4); }
.hero-main h1 em { font-style:normal; color:var(--maroon); }
.hero-lede { font-size:19px; color:var(--ink-secondary); max-width:560px; margin-bottom:var(--s5); }
.hero-cta { display:flex; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s5); }
.hero-points { display:flex; gap:var(--s5); flex-wrap:wrap; font-size:14px; color:var(--ink-secondary); }
.hero-points span::before { content:"✓"; color:var(--success); font-weight:700; margin-right:6px; }
.hero-card { background:var(--surface); border:1px solid var(--border); border-top:4px solid var(--gold);
  border-radius:var(--r-lg); padding:var(--s6); box-shadow:var(--sh-2); }

/* ============================ SHARED CARDS ============================ */
.card { background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:var(--s6); }
.card + .card { margin-top:var(--s5); }
.card-title { font-family:var(--font-display); font-size:21px; font-weight:600; color:var(--maroon);
  margin:0 0 var(--s5); padding-bottom:var(--s3); border-bottom:1px solid var(--border); }

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);}
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s5);}
.grid-4{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s4);}

/* ============================ FORMS ============================ */
.field { margin-bottom:var(--s4); }
.field label { display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:var(--s2); }
.field .hint { font-size:13px; color:var(--ink-muted); margin-top:var(--s1); }
input[type=text],input[type=date],input[type=time],input[type=number],input[type=email],select,textarea {
  width:100%; min-height:50px; padding:0 var(--s4); border:1px solid var(--border-strong);
  border-radius:var(--r-sm); background:var(--surface); color:var(--ink);
  font-family:var(--font-body); font-size:16px; }
textarea { padding:var(--s3) var(--s4); min-height:110px; line-height:1.6; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--saffron);
  box-shadow:0 0 0 3px rgba(226,113,29,.16); }
.alert { padding:var(--s4) var(--s5); border-radius:var(--r-sm); margin-bottom:var(--s5);
  border:1px solid; font-size:15px; }
.alert-error { background:#FCF0EE; border-color:#EFCDC8; color:var(--danger); }
.alert ul { margin:0; padding-left:var(--s5); }

/* ============================ FILTER PILLS ============================ */
.filters { display:flex; gap:var(--s2); flex-wrap:wrap; justify-content:center; margin-bottom:var(--s6); }
.filter-pill { border:1px solid var(--border-strong); background:var(--surface);
  color:var(--ink-secondary); padding:9px var(--s4); border-radius:var(--r-full);
  font-size:14px; font-weight:500; cursor:pointer; transition:all .15s; font-family:var(--font-body); }
.filter-pill:hover { border-color:var(--gold); }
.filter-pill.is-active { background:var(--maroon); color:#fff; border-color:var(--maroon); }

/* ============================ SERVICE / TOOL / GENERIC CARDS ============ */
.svc, .tool-card, .intent, .prod, .course, .blogcard, .astro-card, .video-card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .16s cubic-bezier(.4,0,.2,1), box-shadow .16s, border-color .16s; }
a.svc:hover, a.tool-card:hover, a.intent:hover, a.prod:hover, a.course:hover,
a.blogcard:hover, .astro-card:hover, a.video-card:hover {
  transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--gold); }
.svc { padding:var(--s5); gap:var(--s2); }
.svc-icon { width:44px; height:44px; border-radius:var(--r-sm); background:var(--saffron-soft);
  color:var(--saffron-deep); display:grid; place-items:center; font-size:20px; margin-bottom:var(--s2); }
.svc strong, .tool-name, .intent strong { font-family:var(--font-display); font-size:18px;
  font-weight:600; color:var(--maroon); }
.svc span, .tool-summary, .intent span { font-size:14px; color:var(--ink-secondary); line-height:1.55; }
.tool-card, .intent { padding:var(--s5); gap:var(--s2); }
.tool-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:var(--s4); }
.badge { display:inline-block; font-size:11px; font-weight:700; padding:2px 9px;
  border-radius:var(--r-full); background:var(--saffron-soft); color:var(--saffron-deep);
  border:1px solid #F3D9BC; }
.badge-gold { background:var(--gold-soft); color:#8A6A00; border-color:var(--gold); }
.badge-soon { background:var(--surface-alt); color:var(--ink-muted); border-color:var(--border); }
.tool-card .badge, .svc .badge { align-self:flex-start; margin-top:var(--s2); }
.is-soon { opacity:.6; }

/* ============================ PANCHANG WIDGET ============================ */
.panchang { background:linear-gradient(135deg,var(--maroon-dark),var(--maroon));
  color:var(--on-dark); border-radius:var(--r-lg); padding:var(--s6);
  border:1px solid var(--maroon-deep); box-shadow:var(--sh-2); }
.panchang h3 { color:var(--gold-light); margin-bottom:var(--s2); }
.panchang .p-date { color:var(--on-dark-muted); font-size:14px; margin-bottom:var(--s5); }
.p-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:var(--s4); }
.p-item { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-sm); padding:var(--s3) var(--s4); }
.p-item span { display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--gold-light); font-weight:700; margin-bottom:2px; }
.p-item strong { font-size:15px; color:#fff; font-weight:600; }
.p-warn { margin-top:var(--s4); background:rgba(226,113,29,.18);
  border:1px solid rgba(245,154,69,.4); border-radius:var(--r-sm); padding:var(--s3) var(--s4); font-size:14px; }

/* ============================ STATS COUNTER ============================ */
.stats { background:linear-gradient(135deg,var(--maroon),var(--maroon-deep)); color:var(--on-dark);
  padding:var(--s8) 0; border-block:3px solid var(--gold); }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--s5); text-align:center; }
.stat-num { font-family:var(--font-display); font-size:clamp(32px,4vw,46px); font-weight:600; color:var(--gold-light); }
.stat-lbl { font-size:14px; color:var(--on-dark-muted); }

/* ============================ CTA BANNER ============================ */
.cta-banner { background:linear-gradient(135deg,var(--maroon-dark),var(--maroon));
  color:var(--on-dark); border-radius:var(--r-lg); padding:var(--s8) var(--s6);
  text-align:center; border:1px solid var(--maroon-deep); box-shadow:var(--sh-2); }
.cta-banner h2 { color:#fff; }
.cta-banner p { color:var(--on-dark-muted); max-width:620px; margin:0 auto var(--s5); }

/* ============================ COURSES / PRODUCTS ============================ */
.carousel { display:flex; gap:var(--s4); overflow-x:auto; padding-bottom:var(--s4);
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.carousel > * { flex:0 0 300px; scroll-snap-align:start; }
.carousel::-webkit-scrollbar { height:8px; }
.carousel::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:var(--r-full); }
.course, .prod { overflow:hidden; }
.thumb { aspect-ratio:16/10; background:linear-gradient(135deg,var(--gold-soft),var(--saffron-soft));
  display:grid; place-items:center; font-size:38px; color:var(--saffron-deep); }
.prod .thumb { aspect-ratio:1/1; }
.card-body { padding:var(--s4) var(--s5) var(--s5); display:flex; flex-direction:column; gap:var(--s2); flex:1; }
.card-body strong { font-family:var(--font-display); font-size:17px; color:var(--maroon); }
.card-body p { font-size:14px; margin:0; flex:1; }
.price { font-family:var(--font-display); font-size:20px; color:var(--maroon); font-weight:600; }
.price s { color:var(--ink-muted); font-size:15px; font-weight:400; margin-left:6px; }

/* ============================ ASTROLOGER CARDS ============================ */
.astro-card { padding:var(--s5); align-items:center; text-align:center; gap:var(--s2); }
.avatar { width:88px; height:88px; border-radius:50%; background:linear-gradient(135deg,var(--gold-soft),var(--saffron-soft));
  display:grid; place-items:center; font-family:var(--font-display); font-size:30px;
  color:var(--maroon); border:3px solid var(--gold); margin-bottom:var(--s2); }
.astro-card strong { font-family:var(--font-display); font-size:18px; color:var(--maroon); }
.astro-meta { font-size:13px; color:var(--ink-muted); }
.astro-actions { display:flex; gap:var(--s2); margin-top:var(--s3); width:100%; }
.astro-actions .btn { flex:1; }

/* ============================ VIDEO GALLERY ============================ */
.video-card { overflow:hidden; }
.video-thumb { position:relative; aspect-ratio:16/9;
  background:linear-gradient(135deg,var(--maroon-dark),var(--maroon)); display:grid; place-items:center; }
.play { width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.92);
  color:var(--maroon); display:grid; place-items:center; font-size:20px; padding-left:4px; }

/* ============================ TESTIMONIALS ============================ */
.quote { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--gold);
  border-radius:var(--r-md); padding:var(--s5); }
.quote p { font-size:15.5px; font-style:italic; color:var(--ink-secondary); }
.quote footer { display:flex; align-items:center; gap:var(--s3); margin-top:var(--s4); }
.q-avatar { width:40px; height:40px; border-radius:50%; background:var(--saffron-soft);
  color:var(--saffron-deep); display:grid; place-items:center; font-weight:700; font-size:15px; }
.q-name { font-weight:600; font-size:14px; color:var(--ink); }
.q-loc { font-size:12.5px; color:var(--ink-muted); }
.stars { color:var(--gold); font-size:14px; letter-spacing:1px; }

/* ============================ BLOG ============================ */
.blogcard { overflow:hidden; }
.blog-thumb { aspect-ratio:16/9; background:linear-gradient(135deg,var(--surface-alt),var(--gold-soft));
  display:grid; place-items:center; font-size:32px; color:var(--gold); }
.blog-cat { font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--saffron-deep); font-weight:700; }

/* ============================ SEO CONTENT ============================ */
.seo-block { columns:2; column-gap:var(--s7); }
.seo-block p { break-inside:avoid; }
.faq details { border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface); margin-bottom:var(--s3); }
.faq summary { padding:var(--s4) var(--s5); cursor:pointer; font-weight:600;
  color:var(--maroon); font-family:var(--font-display); font-size:17px; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; float:right; color:var(--saffron-deep); font-size:20px; line-height:1; }
.faq details[open] summary::after { content:"–"; }
.faq .faq-body { padding:0 var(--s5) var(--s4); color:var(--ink-secondary); font-size:15px; }

/* ============================ RESULT BITS ============================ */
.meta-bar { display:flex; flex-wrap:wrap; gap:var(--s5); background:var(--surface-alt);
  border:1px solid var(--border); border-left:3px solid var(--gold); border-radius:var(--r-md);
  padding:var(--s4) var(--s5); margin-bottom:var(--s5); font-size:14px; }
.meta-bar div span { display:block; color:var(--ink-muted); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.07em; font-weight:600; }
.meta-bar div strong { font-weight:600; color:var(--maroon); font-size:16px; }
.chart-wrap { display:grid; grid-template-columns:420px 1fr; gap:var(--s6); align-items:start; }
.chart-box { background:var(--surface-alt); border:1px solid var(--border-strong);
  border-radius:var(--r-md); padding:var(--s4); }
table.data { width:100%; border-collapse:collapse; font-size:15px; }
table.data th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-muted); font-weight:700; padding:var(--s2) var(--s3);
  border-bottom:2px solid var(--border-strong); background:var(--surface-alt); }
table.data td { padding:var(--s3); border-bottom:1px solid var(--border); }
table.data tr:last-child td { border-bottom:none; }
table.data tbody tr:hover { background:#FDFAF4; }
.deg { font-variant-numeric:tabular-nums; color:var(--ink-secondary); }
.big-result { text-align:center; background:linear-gradient(180deg,var(--gold-soft),var(--surface-alt));
  border:1px solid var(--border-strong); border-radius:var(--r-md); padding:var(--s7) var(--s5); }
.big-value { font-family:var(--font-display); font-size:clamp(36px,6vw,52px); font-weight:600;
  color:var(--maroon); line-height:1.08; }
.big-sub { font-size:15px; color:var(--ink-secondary); margin-top:var(--s2); }
.note { margin-top:var(--s5); padding:var(--s4) var(--s5); background:var(--surface-alt);
  border:1px solid var(--border); border-left:3px solid var(--saffron);
  border-radius:var(--r-sm); font-size:15px; line-height:1.66; color:var(--ink-secondary); }
.note strong { color:var(--maroon); }
.note-gold { border-left-color:var(--gold); background:var(--gold-soft); }
.compare { display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.compare-box { text-align:center; padding:var(--s5); background:var(--surface-alt);
  border:1px solid var(--border); border-radius:var(--r-md); }
.compare-box.is-primary { background:var(--gold-soft); border-color:var(--gold); }
.compare-box span { display:block; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ink-muted); font-weight:600; }
.compare-box strong { display:block; font-family:var(--font-display); font-size:29px;
  color:var(--maroon); margin:var(--s2) 0; }
.compare-box em { font-size:13px; color:var(--ink-muted); font-style:normal; }
.progress { height:9px; background:var(--surface-alt); border:1px solid var(--border);
  border-radius:var(--r-full); overflow:hidden; margin-top:var(--s5); }
.progress-fill { height:100%; border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--gold),var(--saffron)); }
.trust-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s4);
  background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--gold);
  border-radius:var(--r-md); padding:var(--s5); text-align:center; box-shadow:var(--sh-1); }
.trust-row strong { display:block; font-family:var(--font-display); font-size:23px; color:var(--maroon); }
.trust-row span { font-size:13px; color:var(--ink-muted); }
.disclosure { font-size:13px; color:var(--ink-muted); text-align:center;
  padding:var(--s5) 0; border-top:1px solid var(--border); margin-top:var(--s6); }
.hero { padding:var(--s8) 0 var(--s6); text-align:center; }
.eyebrow { display:inline-block; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; color:var(--saffron-deep); background:var(--saffron-soft);
  border:1px solid #F3D9BC; padding:var(--s1) var(--s4); border-radius:var(--r-full); margin-bottom:var(--s4); }
.lede { font-size:19px; color:var(--ink-secondary); max-width:640px; margin:0 auto var(--s5); }

/* ============================ DARK FOOTER ============================ */
.site-footer { background:var(--maroon-dark); color:var(--on-dark-muted);
  border-top:3px solid var(--gold); padding:var(--s8) 0 var(--s5); margin-top:var(--s9); font-size:14.5px; }
.site-footer .cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s6); }
.site-footer h4 { font-family:var(--font-body); font-size:12px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--gold-light); margin:0 0 var(--s4); font-weight:700; }
.site-footer a { display:block; color:var(--on-dark-muted); text-decoration:none; padding:4px 0; }
.site-footer a:hover { color:#fff; }
.site-footer p { color:var(--on-dark-muted); font-size:14px; }
.f-contact { line-height:1.7; }
.f-social { display:flex; gap:var(--s2); margin-top:var(--s4); }
.f-social a { width:38px; height:38px; border-radius:var(--r-sm); background:rgba(255,255,255,.1);
  display:grid; place-items:center; color:#fff; font-size:15px; padding:0; }
.f-social a:hover { background:var(--gold); color:var(--maroon-darker); }
.site-footer .base { border-top:1px solid rgba(255,255,255,.14); margin-top:var(--s6);
  padding-top:var(--s4); display:flex; justify-content:space-between; gap:var(--s4);
  flex-wrap:wrap; color:var(--on-dark-muted); font-size:13px; }
.site-footer .base a { display:inline; padding:0; }
.f-legal { display:flex; gap:var(--s4); flex-wrap:wrap; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1024px) {
  .hero-grid { grid-template-columns:1fr; }
  .site-footer .cols { grid-template-columns:1fr 1fr; }
  .seo-block { columns:1; }
}
@media (max-width:880px) {
  .hamburger { display:block; }
  .nav-list { display:none; position:absolute; top:76px; left:0; right:0;
    flex-direction:column; align-items:stretch; background:var(--maroon-dark);
    border-top:1px solid rgba(255,255,255,.15); padding:var(--s3); gap:0;
    max-height:70vh; overflow-y:auto; }
  .nav-list.is-open { display:flex; }
  .nav-item { position:static; }
  .mega { position:static; transform:none; min-width:0; opacity:1; visibility:visible;
    display:none; box-shadow:none; border-radius:var(--r-sm); margin:var(--s2) 0; padding:var(--s4); }
  .nav-item.is-open .mega { display:block; }
  .mega-cols { grid-template-columns:1fr; gap:var(--s4); }
  .chart-wrap,.grid-2,.compare { grid-template-columns:1fr; }
  .card { padding:var(--s5); }
  .topbar .tb-left { display:none; }
  .site-footer .cols { grid-template-columns:1fr; }
  .section { padding:var(--s7) 0; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* ---- Degree strip under the kundli chart ---- */
.deg-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
}
.deg-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 4px;
  text-align: center;
}
.deg-chip-p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--maroon);
}
.deg-chip-p em { font-style: normal; color: var(--saffron-deep); font-size: 10px; vertical-align: super; }
.deg-chip-d {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.deg-chip-s { font-size: 10.5px; color: var(--ink-muted); }

@media (max-width: 420px) {
  .deg-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ============ Premium kundli result layout ============ */
.kundli-chart { max-width: 480px; margin: 0 auto var(--s6); }
.asc-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
  margin-top: var(--s5);
  background: linear-gradient(135deg, var(--gold-soft), var(--surface-alt));
  border: 1px solid var(--gold); border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
}
.asc-item span {
  display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700; margin-bottom: 3px;
}
.asc-item strong { font-family: var(--font-display); font-size: 17px; color: var(--maroon); }

.ptable-title {
  font-family: var(--font-display); font-size: 21px; color: var(--maroon);
  text-align: center; margin: 0 0 var(--s4);
}
.ptable-wrap {
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--sh-1);
}
.ptable { width: 100%; border-collapse: collapse; font-size: 15px; }
.ptable thead th {
  background: linear-gradient(180deg, var(--maroon), var(--maroon-deep));
  color: var(--on-dark); font-family: var(--font-body);
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  padding: var(--s3) var(--s4); text-align: left;
}
.ptable tbody td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.ptable tbody tr:last-child td { border-bottom: none; }
.ptable tbody tr:nth-child(even) { background: var(--surface-alt); }
.ptable tbody tr:hover { background: var(--gold-soft); }
.ta-c { text-align: center !important; }

.ptable-planet { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pdot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle; background: var(--gold);
}
.pdot-sun{background:#E2711D}.pdot-moon{background:#8B95A5}.pdot-mars{background:#C0392B}
.pdot-mercury{background:#27AE60}.pdot-jupiter{background:#D4A017}.pdot-venus{background:#E8759B}
.pdot-saturn{background:#34495E}.pdot-rahu{background:#7B4FA0}.pdot-ketu{background:#95712B}

.rbadge {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
  color: var(--saffron-deep); background: var(--saffron-soft);
  border: 1px solid #F3D9BC; border-radius: var(--r-full); padding: 1px 6px;
}
.hbadge {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--maroon-soft); color: var(--maroon);
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .asc-card { grid-template-columns: 1fr; gap: var(--s3); }
  .ptable { font-size: 13.5px; }
  .ptable thead th, .ptable tbody td { padding: var(--s2) var(--s3); }
}

/* ============ Premium kundli result layout ============ */
.kundli-chart { max-width: 480px; margin: 0 auto var(--s6); }
.asc-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
  margin-top: var(--s5);
  background: linear-gradient(135deg, var(--gold-soft), var(--surface-alt));
  border: 1px solid var(--gold); border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
}
.asc-item span {
  display: block; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-muted); font-weight: 700; margin-bottom: 3px;
}
.asc-item strong { font-family: var(--font-display); font-size: 17px; color: var(--maroon); }

.ptable-title {
  font-family: var(--font-display); font-size: 21px; color: var(--maroon);
  text-align: center; margin: 0 0 var(--s4);
}
.ptable-wrap {
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--sh-1);
}
.ptable { width: 100%; border-collapse: collapse; font-size: 15px; }
.ptable thead th {
  background: linear-gradient(180deg, var(--maroon), var(--maroon-deep));
  color: var(--on-dark); font-family: var(--font-body);
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
  padding: var(--s3) var(--s4); text-align: left;
}
.ptable tbody td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.ptable tbody tr:last-child td { border-bottom: none; }
.ptable tbody tr:nth-child(even) { background: var(--surface-alt); }
.ptable tbody tr:hover { background: var(--gold-soft); }
.ta-c { text-align: center !important; }

.ptable-planet { font-weight: 600; color: var(--ink); white-space: nowrap; }
.pdot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle; background: var(--gold);
}
.pdot-sun{background:#E2711D}.pdot-moon{background:#8B95A5}.pdot-mars{background:#C0392B}
.pdot-mercury{background:#27AE60}.pdot-jupiter{background:#D4A017}.pdot-venus{background:#E8759B}
.pdot-saturn{background:#34495E}.pdot-rahu{background:#7B4FA0}.pdot-ketu{background:#95712B}

.rbadge {
  display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
  color: var(--saffron-deep); background: var(--saffron-soft);
  border: 1px solid #F3D9BC; border-radius: var(--r-full); padding: 1px 6px;
}
.hbadge {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--maroon-soft); color: var(--maroon);
  font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .asc-card { grid-template-columns: 1fr; gap: var(--s3); }
  .ptable { font-size: 13.5px; }
  .ptable thead th, .ptable tbody td { padding: var(--s2) var(--s3); }
}
/* life-report-css */

/* ================= LIFE REPORT ================= */
.report-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4);
  flex-wrap: wrap; margin: var(--s7) 0 var(--s4); padding-bottom: var(--s4);
  border-bottom: 2px solid var(--gold);
}
.report-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.view-toggle { display: inline-flex; background: var(--surface-alt); border: 1px solid var(--border-strong);
  border-radius: var(--r-full); padding: 3px; }
.vt-btn { border: none; background: transparent; padding: 7px 16px; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink-muted); cursor: pointer;
  transition: all .15s; }
.vt-btn.is-active { background: var(--maroon); color: var(--on-dark); box-shadow: var(--sh-1); }

.report-snapshot {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3);
  background: linear-gradient(135deg, var(--maroon-dark), var(--maroon));
  border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s6);
}
.snap-item { text-align: center; }
.snap-item span { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 700; margin-bottom: 3px; }
.snap-item strong { font-family: var(--font-display); font-size: 17px; color: #fff; }

.report-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s6); margin-bottom: var(--s5); position: relative;
  box-shadow: var(--sh-1);
}
.rc-icon {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: var(--gold-soft); color: var(--saffron-deep); border: 1px solid #F0E2C4;
  margin-bottom: var(--s3);
}
.rc-icon svg { width: 25px; height: 25px; }
.report-card h3 { font-family: var(--font-display); font-size: 21px; color: var(--maroon); margin: 0 0 var(--s2); }
.rc-intro { font-size: 14px; color: var(--ink-muted); font-style: italic; margin-bottom: var(--s4); }
.report-card .simple-text, .report-card .technical-text { font-size: 15.5px; line-height: 1.7; margin-bottom: var(--s3); }
.report-card .technical-text { color: var(--ink-secondary); background: var(--surface-alt);
  border-left: 3px solid var(--gold); padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-size: 14.5px; }

.rc-tags { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.tag-good, .tag-watch { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-full); }
.tag-good { background: #EAF6EF; color: var(--success); border: 1px solid #C5E6D3; }
.tag-watch { background: var(--saffron-soft); color: var(--saffron-deep); border: 1px solid #F3D9BC; }

.point-line { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0;
  border-top: 1px solid var(--border); }
.point-line:first-of-type { border-top: none; }
.point-planet { flex: none; min-width: 64px; font-family: var(--font-display); font-weight: 600;
  font-size: 14px; color: var(--maroon); padding-top: 1px; }
.point-planet em { font-style: normal; color: var(--saffron-deep); font-size: 10px; vertical-align: super; }

@media (max-width: 620px) {
  .report-snapshot { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  .report-head { flex-direction: column; }
  .point-line { flex-direction: column; gap: 4px; }
  .point-planet { min-width: 0; }
}

/* ================= LIFE REPORT ================= */
.report-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4);
  flex-wrap: wrap; margin: var(--s7) 0 var(--s4); padding-bottom: var(--s4);
  border-bottom: 2px solid var(--gold);
}
.report-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.view-toggle { display: inline-flex; background: var(--surface-alt); border: 1px solid var(--border-strong);
  border-radius: var(--r-full); padding: 3px; }
.vt-btn { border: none; background: transparent; padding: 7px 16px; border-radius: var(--r-full);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--ink-muted); cursor: pointer;
  transition: all .15s; }
.vt-btn.is-active { background: var(--maroon); color: var(--on-dark); box-shadow: var(--sh-1); }

.report-snapshot {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3);
  background: linear-gradient(135deg, var(--maroon-dark), var(--maroon));
  border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s6);
}
.snap-item { text-align: center; }
.snap-item span { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 700; margin-bottom: 3px; }
.snap-item strong { font-family: var(--font-display); font-size: 17px; color: #fff; }

.report-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s6); margin-bottom: var(--s5); position: relative;
  box-shadow: var(--sh-1);
}
.rc-icon {
  width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center;
  background: var(--gold-soft); color: var(--saffron-deep); border: 1px solid #F0E2C4;
  margin-bottom: var(--s3);
}
.rc-icon svg { width: 25px; height: 25px; }
.report-card h3 { font-family: var(--font-display); font-size: 21px; color: var(--maroon); margin: 0 0 var(--s2); }
.rc-intro { font-size: 14px; color: var(--ink-muted); font-style: italic; margin-bottom: var(--s4); }
.report-card .simple-text, .report-card .technical-text { font-size: 15.5px; line-height: 1.7; margin-bottom: var(--s3); }
.report-card .technical-text { color: var(--ink-secondary); background: var(--surface-alt);
  border-left: 3px solid var(--gold); padding: var(--s3) var(--s4); border-radius: var(--r-sm); font-size: 14.5px; }

.rc-tags { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.tag-good, .tag-watch { font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: var(--r-full); }
.tag-good { background: #EAF6EF; color: var(--success); border: 1px solid #C5E6D3; }
.tag-watch { background: var(--saffron-soft); color: var(--saffron-deep); border: 1px solid #F3D9BC; }

.point-line { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0;
  border-top: 1px solid var(--border); }
.point-line:first-of-type { border-top: none; }
.point-planet { flex: none; min-width: 64px; font-family: var(--font-display); font-weight: 600;
  font-size: 14px; color: var(--maroon); padding-top: 1px; }
.point-planet em { font-style: normal; color: var(--saffron-deep); font-size: 10px; vertical-align: super; }

@media (max-width: 620px) {
  .report-snapshot { grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
  .report-head { flex-direction: column; }
  .point-line { flex-direction: column; gap: 4px; }
  .point-planet { min-width: 0; }
}


/* === STEP-II: Insight Cards + SEO Blocks === */
/* ─── INSIGHT BLOCK ─────────────────────────────────────────── */
.insight-block {
    margin: 2.5rem 0 0;
    padding: 2rem 0 0;
    border-top: 2px solid var(--gold, #b8973a);
}
.insight-block-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--maroon, #6b1f2b);
    margin: 0 0 1.25rem;
    letter-spacing: .01em;
}
.insight-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
    .insight-grid { grid-template-columns: 1fr; }
}
.insight-card {
    background: linear-gradient(135deg, #fdf8ee 0%, #fffcf4 100%);
    border: 1px solid #e8d89a;
    border-radius: 10px;
    padding: 1.25rem 1.1rem 1rem;
    transition: box-shadow .2s, transform .2s;
}
.insight-card:hover {
    box-shadow: 0 4px 18px rgba(184,151,58,.18);
    transform: translateY(-2px);
}
.insight-card-icon {
    font-size: 1.6rem;
    margin-bottom: .4rem;
    line-height: 1;
}
.insight-card-title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--maroon, #6b1f2b);
    margin: 0 0 .5rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.insight-card-text {
    font-size: .88rem;
    color: #444;
    line-height: 1.65;
    margin: 0;
}
.insight-note {
    font-size: .82rem;
    color: #777;
    font-style: italic;
    margin: 0;
    border-left: 3px solid var(--gold, #b8973a);
    padding-left: .85rem;
}
.insight-note a {
    color: var(--maroon, #6b1f2b);
    font-weight: 600;
    text-decoration: underline;
}

/* ─── SEO CONTENT BLOCK ─────────────────────────────────────── */
.seo-block {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px solid #e0d9c8;
    color: #333;
    font-size: .95rem;
    line-height: 1.75;
}
.seo-block h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--maroon, #6b1f2b);
    margin: 0 0 1rem;
    letter-spacing: -.01em;
}
.seo-block h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #3a2a00;
    margin: 1.75rem 0 .6rem;
    padding-left: .75rem;
    border-left: 3px solid var(--gold, #b8973a);
}
.seo-block p { margin: 0 0 .9rem; }
.seo-block strong { color: #2a1500; }
.seo-block pre.lo-shu-demo {
    background: #f5f0e6;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: .75rem 1.25rem;
    font-size: 1.05rem;
    font-family: monospace;
    letter-spacing: .15em;
    display: inline-block;
    margin: .5rem 0 1rem;
    color: var(--maroon, #6b1f2b);
    font-weight: 700;
}

/* ─── FAQ LIST ───────────────────────────────────────────────── */
.faq-list {
    margin-top: 1rem;
}
.faq-item {
    border-bottom: 1px solid #e8e0cc;
    padding: 1rem 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--maroon, #6b1f2b);
    margin: 0 0 .5rem;
    cursor: default;
}
.faq-item p {
    font-size: .9rem;
    color: #444;
    margin: 0;
    line-height: 1.7;
}


/* === STEP-IV: AI Reading Block === */
/* ─── AI PERSONALIZED READING BLOCK ────────────────────────── */
.ai-reading-block {
    margin: 2rem 0 0;
    background: linear-gradient(135deg, #1B1008 0%, #2B1A0E 100%);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    border: 1px solid rgba(201,162,39,.25);
}
.ai-reading-intro {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    color: #e8d0a0;
}
.ai-reading-intro-icon { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.ai-reading-intro strong { display: block; color: #EBC96B; font-size: 1rem; margin-bottom: .2rem; }
.ai-reading-intro p { margin: 0; font-size: .84rem; color: #b09060; line-height: 1.5; }

.btn-ai-reading {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: linear-gradient(135deg, #C9A227 0%, #EBC96B 100%);
    color: #1B1008;
    border: none;
    border-radius: 8px;
    padding: .85rem 2rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: transform .15s, box-shadow .15s;
    letter-spacing: .01em;
}
.btn-ai-reading:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(201,162,39,.45);
}
.btn-ai-reading:disabled { opacity: .7; cursor: wait; }
.btn-ai-icon { font-size: 1.2rem; }
.btn-ai-reading.loading .btn-ai-icon {
    display: inline-block;
    animation: ai-spin 1.2s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-reading-hint { color: #806040; font-size: .75rem; margin: .5rem 0 0; }

/* Output */
.ai-reading-output { }
.ai-reading-badge-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.1rem;
}
.ai-reading-badge {
    background: linear-gradient(135deg, #C9A227, #EBC96B);
    color: #1B1008;
    padding: .3rem 1rem;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700;
}
.ai-reading-powered { color: #806040; font-size: .76rem; }
.ai-reading-text {
    color: #FFE8A3;
    line-height: 1.85;
    font-size: .93rem;
}
.ai-reading-text p { margin: 0 0 .95rem; color: #FFE8A3; line-height: 1.9; }
.ai-reading-text p:last-child { margin-bottom: 0; }
.ai-reading-cta {
    margin: 1.25rem 0 0;
    font-size: .78rem;
    color: #907050;
    border-top: 1px solid rgba(201,162,39,.18);
    padding-top: .9rem;
}
.ai-reading-cta a { color: #C9A227; font-weight: 600; }
.ai-reading-error {
    color: #e08080;
    font-size: .85rem;
    margin-top: .6rem;
    padding: .5rem .75rem;
    background: rgba(200,80,80,.1);
    border-radius: 6px;
    border-left: 3px solid #e08080;
}

/* === AI Reading text fix === */
.ai-reading-block { color: #FFFFFF; }
.ai-reading-badge-row { margin-bottom: 1.2rem; }
.topbar { display:none !important; }

/* === STEP-V: Lead Capture Fields === */
.lead-capture-block {
    background: linear-gradient(135deg, #fdf8ee, #fffcf5);
    border: 1px solid #e8d89a;
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.lead-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 600px) {
    .lead-row { grid-template-columns: 1fr; }
}
.lead-capture-block .field { margin-bottom: 0; }
.lead-capture-block label { font-size: .85rem; font-weight: 600; color: var(--maroon, #6b1f2b); margin-bottom: .35rem; display: block; }
.lead-capture-block input {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid #d4c07a;
    border-radius: 7px;
    font-size: .9rem;
    background: #fff;
    outline: none;
    transition: border-color .15s;
}
.lead-capture-block input:focus { border-color: var(--gold, #b8973a); box-shadow: 0 0 0 3px rgba(184,151,58,.12); }
.lead-privacy-note {
    margin-top: .85rem;
    font-size: .76rem;
    color: #888;
    line-height: 1.5;
}


/* === STEP-VIII: Service Pages === */
/* ─── SERVICE PAGES ─────────────────────────────────────────── */
.svc-breadcrumb {
    font-size: .82rem;
    color: #888;
    margin: var(--s4) 0 var(--s3);
}
.svc-breadcrumb a { color: var(--maroon, #6b1f2b); text-decoration: none; }
.svc-breadcrumb a:hover { text-decoration: underline; }
.svc-breadcrumb span { margin: 0 .4rem; color: #ccc; }
.svc-breadcrumb-current { color: #666; }

.svc-content { margin-top: var(--s6); }
.svc-section { margin-bottom: var(--s6); }
.svc-section:last-child { margin-bottom: 0; }
.svc-section h2 {
    font-size: 1.25rem;
    color: var(--maroon, #6b1f2b);
    margin-bottom: var(--s3);
    padding-left: .75rem;
    border-left: 3px solid var(--gold, #b8973a);
}
.svc-section p { line-height: 1.75; color: #333; }

.svc-related-card { margin-top: var(--s5); }
.svc-calc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
    margin-top: var(--s3);
}
.svc-calc-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #fdf8ee, #fffcf5);
    border: 1px solid #e8d89a;
    border-radius: 8px;
    padding: .85rem 1.1rem;
    text-decoration: none;
    color: var(--maroon, #6b1f2b);
    font-weight: 600;
    font-size: .9rem;
    transition: .15s;
}
.svc-calc-link:hover { box-shadow: 0 4px 14px rgba(184,151,58,.18); transform: translateY(-1px); }
.svc-calc-arrow { color: var(--gold, #b8973a); }

.svc-siblings { margin-top: var(--s7); }
.svc-sibling-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.svc-sibling-card {
    display: block;
    background: #fff;
    border: 1px solid var(--border, #e0ddd5);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    text-decoration: none;
    transition: .15s;
}
.svc-sibling-card:hover { border-color: var(--gold, #b8973a); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.svc-sibling-eyebrow { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #999; margin-bottom: .3rem; }
.svc-sibling-title { display: block; font-weight: 700; color: var(--maroon, #6b1f2b); font-size: .95rem; }

/* Services index page */
.svc-category-block { margin-bottom: var(--s8); }
.svc-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.svc-index-card {
    display: block;
    background: #fff;
    border: 1px solid var(--border, #e0ddd5);
    border-radius: 12px;
    padding: 1.5rem;
    text-decoration: none;
    transition: .2s;
}
.svc-index-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.08); border-color: var(--gold, #b8973a); }
.svc-index-eyebrow { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gold, #b8973a); font-weight: 700; margin-bottom: .5rem; }
.svc-index-card h3 { font-size: 1.1rem; color: var(--maroon, #6b1f2b); margin-bottom: .5rem; }
.svc-index-card p { font-size: .87rem; color: #666; line-height: 1.6; margin-bottom: .75rem; }
.svc-index-arrow { font-size: .85rem; font-weight: 600; color: var(--maroon, #6b1f2b); }


/* ─── STEP-XXII: SEO checklist additions ─────────────────────── */

/* H3 subsections within a section */
.svc-subsection {
    margin: var(--s4) 0 0 var(--s4);
    padding-left: var(--s3);
    border-left: 2px solid #f0e6c8;
}
.svc-subsection h3 {
    font-size: 1.02rem;
    color: #8a5a1f;
    margin-bottom: .4rem;
}
.svc-subsection p { line-height: 1.7; color: #444; font-size: .93rem; }

/* Original Vastu direction wheel diagram */
.svc-diagram-card { text-align: center; margin-top: var(--s5); }
.svc-vastu-wheel { max-width: 380px; margin: 0 auto var(--s3); }
.svc-vastu-wheel svg { width: 100%; height: auto; }
.svc-diagram-caption { font-size: .85rem; color: #777; max-width: 480px; margin: 0 auto; line-height: 1.6; }

/* E-E-A-T author box */
.svc-author-box {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: var(--s5);
    background: linear-gradient(135deg, #fdf8ee, #fffcf5);
    border: 1px solid #e8d89a;
}
.svc-author-photo-placeholder {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B2E28, #B85512);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: .02em;
}
.svc-author-info h3 { font-size: 1.05rem; color: var(--maroon, #7B2E28); margin-bottom: .4rem; }
.svc-author-info p { font-size: .89rem; color: #444; line-height: 1.65; margin-bottom: .5rem; }
.svc-author-link { font-size: .87rem; font-weight: 700; color: var(--maroon, #7B2E28); text-decoration: none; }
.svc-author-link:hover { text-decoration: underline; }

/* External references */
.svc-refs-card { margin-top: var(--s5); }
.svc-refs-list { list-style: none; padding: 0; margin: var(--s3) 0 0; }
.svc-refs-list li {
    padding: .6rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .88rem;
}
.svc-refs-list li:last-child { border-bottom: none; }
.svc-refs-list a { color: var(--maroon, #7B2E28); font-weight: 600; text-decoration: none; }
.svc-refs-list a:hover { text-decoration: underline; }
.svc-refs-list span { color: #999; font-size: .82rem; }

@media (max-width: 600px) {
    .svc-author-box { flex-direction: column; align-items: center; text-align: center; }
}


/* ─── STEP-XXIII: font-size reduction + priority chart ────────── */

/* Scoped H1 size reduction for service pages ONLY (does not affect other pages) */
.svc-h1 {
    font-size: clamp(24px, 3.2vw, 34px) !important;
    line-height: 1.25 !important;
}

/* H2 size reduction, scoped to service page content */
.svc-content h2,
.svc-diagram-card .card-title {
    font-size: 1.15rem !important;
}
.svc-subsection h3 { font-size: .98rem; }

/* Priority ranking chart */
.svc-priority-chart { max-width: 560px; margin: 0 auto var(--s3); }
.svc-priority-row {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .85rem 1.1rem;
    border-radius: 8px;
    margin-bottom: .6rem;
    text-align: left;
}
.svc-priority-label { font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.svc-priority-items { font-size: .85rem; color: #444; }
.svc-priority-high   { background: #fdeceb; border-left: 4px solid #B85512; }
.svc-priority-high .svc-priority-label { color: #B85512; }
.svc-priority-medium { background: #fdf8ee; border-left: 4px solid #C9A227; }
.svc-priority-medium .svc-priority-label { color: #8a6d1f; }
.svc-priority-low    { background: #f4f7f4; border-left: 4px solid #6a9c6a; }
.svc-priority-low .svc-priority-label { color: #4a7c4a; }

@media (max-width: 600px) {
    .svc-priority-items { font-size: .8rem; }
}


/* ─── STEP-XXV: Full checklist elements + smaller headings ────── */

/* Heading sizes — reduced FURTHER per user request */
.svc-h1 {
    font-size: clamp(20px, 2.6vw, 28px) !important;
    line-height: 1.3 !important;
}
.svc-content h2,
.svc-diagram-card .card-title,
.svc-box-title {
    font-size: 1.02rem !important;
    line-height: 1.4;
}
.svc-subsection h3 { font-size: .92rem; }
.svc-content h4, .svc-table-title { font-size: .88rem; }

/* Quick Answer box */
.svc-quick-answer {
    background: linear-gradient(135deg, #fdf8ee, #fffcf5);
    border: 1px solid #e8d89a;
    margin-top: var(--s5);
}
.svc-box-title { color: var(--maroon, #7B2E28); margin-bottom: var(--s3); font-weight: 800; }
.svc-quick-list { margin: 0; padding-left: 1.2rem; }
.svc-quick-list li { font-size: .89rem; color: #333; line-height: 1.7; margin-bottom: .4rem; }

/* User Problems box */
.svc-user-problems {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    margin-top: var(--s4);
}
.svc-problems-list { margin: 0; padding-left: 1.2rem; }
.svc-problems-list li { font-size: .89rem; color: #444; line-height: 1.75; margin-bottom: .5rem; }

/* Data tables */
.svc-table-wrap { margin: var(--s4) 0; overflow-x: auto; }
.svc-table-title { color: #8a5a1f; margin-bottom: .5rem; font-weight: 700; }
.svc-table { width: 100%; border-collapse: collapse; font-size: .83rem; min-width: 480px; }
.svc-table th {
    background: #7B2E28;
    color: #EBC96B;
    padding: .55rem .75rem;
    text-align: left;
    font-weight: 700;
    font-size: .78rem;
}
.svc-table td {
    padding: .55rem .75rem;
    border-bottom: 1px solid #eee;
    color: #333;
    vertical-align: top;
}
.svc-table tr:nth-child(even) td { background: #fafaf5; }
.svc-myths-table td:first-child { font-style: italic; color: #8a5a1f; width: 40%; }

/* Priority tags */
.svc-priority-tag { padding: .15rem .55rem; border-radius: 10px; font-size: .72rem; font-weight: 700; }
.svc-priority-tag-high { background: #fdeceb; color: #B85512; }
.svc-priority-tag-medium { background: #fdf8ee; color: #8a6d1f; }
.svc-priority-tag-low { background: #f4f7f4; color: #4a7c4a; }

/* Steps list */
.svc-steps-list { list-style: none; padding: 0; margin: var(--s3) 0 0; counter-reset: none; }
.svc-steps-list li { display: flex; gap: .85rem; margin-bottom: .9rem; align-items: flex-start; }
.svc-step-num {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--maroon, #7B2E28);
    color: #EBC96B;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .82rem;
}
.svc-steps-list strong { font-size: .9rem; color: var(--maroon, #7B2E28); display: block; margin-bottom: .15rem; }
.svc-steps-list p { font-size: .85rem; color: #555; margin: 0; line-height: 1.6; }

/* Common mistakes */
.svc-mistakes-list { display: grid; gap: .9rem; margin-top: var(--s3); }
.svc-mistake-item {
    background: #fafafa;
    border-left: 3px solid #c0504d;
    padding: .75rem 1rem;
    border-radius: 6px;
}
.svc-mistake-item h4 { color: #c0504d; margin-bottom: .35rem; font-size: .87rem; }
.svc-mistake-item p { font-size: .82rem; color: #444; margin: .2rem 0; line-height: 1.55; }

@media (max-width: 640px) {
    .svc-table { font-size: .78rem; }
}


/* ─── STEP-XXVI: Premium Article Layout (exact visual match) ───────── */
.kv-guide * { box-sizing: border-box; }
.kv-guide { font-family: 'Lora', Georgia, serif; color: #2C2C2C; line-height: 1.7; background: #FEF9F2; }
.kv-guide .kv-container { max-width: 1200px; margin: auto; padding: 0 24px; }
.kv-guide h1, .kv-guide h2, .kv-guide h3, .kv-guide h4 { font-family: 'Playfair Display', Georgia, serif; color: #2C2C2C; line-height: 1.3; }
.kv-guide h2 { font-size: 26px; border-left: 4px solid #9E5A3A; padding-left: 16px; margin: 40px 0 20px; }
.kv-guide h3 { font-size: 20px; border-left: 3px solid #D4A373; padding-left: 12px; margin: 24px 0 12px; }
.kv-guide p { margin-bottom: 16px; font-size: 16px; }
.kv-guide a { color: #9E5A3A; text-decoration: none; }
.kv-guide a:hover { text-decoration: underline; }

/* Hero */
.kv-guide .kv-hero {
    position: relative;
    background: linear-gradient(135deg, #7B2E28 0%, #9E5A3A 55%, #B85512 100%);
    min-height: 380px;
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
}
.kv-guide .kv-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0%, transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.06) 0%, transparent 45%);
}
.kv-guide .kv-hero > .kv-container { position: relative; z-index: 1; }
.kv-guide .kv-breadcrumb { font-family: 'DM Sans', sans-serif; font-size: 13px; margin-bottom: 16px; color: #f0e0c8; }
.kv-guide .kv-breadcrumb a { color: #f0e0c8; }
.kv-guide .kv-hero h1 { color: #fff; font-size: clamp(24px, 3vw, 34px); margin-bottom: 18px; font-weight: 700; }
.kv-guide .kv-hero p.kv-lede {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    max-width: 800px;
    background: rgba(0,0,0,.28);
    color: #fff;
    padding: 12px 22px;
    border-radius: 30px;
    margin-bottom: 22px;
}
.kv-guide .kv-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 22px 0; }
.kv-guide .kv-btn { display: inline-block; padding: 12px 28px; border-radius: 40px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14px; transition: .3s; border: none; }
.kv-guide .kv-btn-primary { background: #EBC96B; color: #1B1008; }
.kv-guide .kv-btn-primary:hover { background: #fff; text-decoration: none; }
.kv-guide .kv-btn-wa { background: #25D366; color: #fff; }
.kv-guide .kv-btn-wa:hover { background: #1da851; text-decoration: none; }
.kv-guide .kv-badges { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-family: 'DM Sans', sans-serif; font-size: 13px; margin-top: 14px; }
.kv-guide .kv-badges span { background: rgba(255,255,255,.15); padding: 6px 14px; border-radius: 20px; }

/* TOC */
.kv-guide .kv-toc { background: #fff; border: 1px solid #e8dccb; border-radius: 8px; padding: 22px 26px; margin: 28px 0; }
.kv-guide .kv-toc h3 { margin-top: 0; border: none; padding: 0; font-size: 18px; }
.kv-guide .kv-toc ol { padding-left: 20px; columns: 2; column-gap: 30px; margin: 0; }
.kv-guide .kv-toc li { margin-bottom: 8px; font-family: 'DM Sans', sans-serif; font-size: 14px; break-inside: avoid; }

/* Quick answer / At-a-glance (styled like info box) */
.kv-guide .kv-quick { background: #fff; border-left: 4px solid #4a8b4a; padding: 18px 22px; margin: 20px 0; border-radius: 4px; }
.kv-guide .kv-quick h2 { border: none; padding: 0; margin: 0 0 10px; font-size: 19px; }
.kv-guide .kv-quick ul { margin: 0; padding-left: 20px; }
.kv-guide .kv-quick li { font-family: 'DM Sans', sans-serif; font-size: 14px; margin-bottom: 6px; }

.kv-guide .kv-problems { background: #fff8e6; border-left: 4px solid #d49d00; padding: 18px 22px; margin: 20px 0; border-radius: 4px; }
.kv-guide .kv-problems h2 { border: none; padding: 0; margin: 0 0 10px; font-size: 19px; }
.kv-guide .kv-problems ul { margin: 0; padding-left: 20px; }
.kv-guide .kv-problems li { font-family: 'DM Sans', sans-serif; font-size: 14px; margin-bottom: 6px; }

section.kv-section { padding: 14px 0; }

/* Tables */
.kv-guide table { width: 100%; border-collapse: collapse; margin: 20px 0; background: #fff; font-family: 'DM Sans', sans-serif; font-size: 14px; }
.kv-guide table th, .kv-guide table td { padding: 11px 13px; border: 1px solid #e8dccb; text-align: left; }
.kv-guide table th { background: #9E5A3A; color: #fff; font-weight: 700; font-size: 13px; }
.kv-guide table tr:nth-child(even) { background: #fbf5ec; }
.kv-guide .kv-table-title { font-family: 'DM Sans', sans-serif; font-weight: 700; color: #9E5A3A; font-size: 14px; margin: 16px 0 4px; }

/* Checklist */
.kv-guide .kv-checklist { background: #fff; border-radius: 8px; padding: 22px 26px; margin: 20px 0; border: 1px solid #e8dccb; }
.kv-guide .kv-checklist ul { list-style: none; padding: 0; margin: 0; }
.kv-guide .kv-checklist li { padding: 10px 0 10px 30px; position: relative; border-bottom: 1px dashed #f0e6d8; font-family: 'DM Sans', sans-serif; font-size: 14px; display: flex; justify-content: space-between; }
.kv-guide .kv-checklist li:last-child { border-bottom: none; }
.kv-guide .kv-checklist li::before { content: '\2714'; position: absolute; left: 0; color: #4a8b4a; font-weight: bold; }
.kv-guide .kv-checklist .kv-prio { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 10px; white-space: nowrap; }
.kv-guide .kv-prio-high { background: #fdeceb; color: #B85512; }
.kv-guide .kv-prio-medium { background: #fdf8ee; color: #8a6d1f; }

/* Mistakes grid */
.kv-guide .kv-mistakes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0; }
.kv-guide .kv-mistake { background: #fff; padding: 15px 16px 15px 42px; position: relative; border-radius: 6px; border: 1px solid #f0d8d0; }
.kv-guide .kv-mistake::before { content: '\2717'; position: absolute; left: 15px; top: 15px; color: #c0392b; font-weight: bold; font-size: 17px; }
.kv-guide .kv-mistake strong { display: block; margin-bottom: 4px; color: #2C2C2C; font-family: 'DM Sans', sans-serif; font-size: 14px; }
.kv-guide .kv-mistake span { font-size: 13px; color: #555; display: block; font-family: 'DM Sans', sans-serif; }

/* Myths vs reality */
.kv-guide .kv-myths td:first-child { font-style: italic; color: #9E5A3A; width: 40%; }

/* Info / remedy boxes */
.kv-guide .kv-info-box { background: #fff; border-left: 4px solid #D4A373; padding: 16px 20px; margin: 18px 0; border-radius: 4px; }
.kv-guide .kv-info-box h4 { margin-bottom: 8px; color: #9E5A3A; border: none; padding: 0; font-size: 15px; }

/* Steps */
.kv-guide .kv-steps { list-style: none; padding: 0; margin: 18px 0; counter-reset: kvstep; }
.kv-guide .kv-steps li { display: flex; gap: 14px; margin-bottom: 14px; align-items: flex-start; counter-increment: kvstep; }
.kv-guide .kv-steps li::before {
    content: counter(kvstep);
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: #9E5A3A; color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-family: 'DM Sans', sans-serif; font-size: 14px;
}
.kv-guide .kv-steps strong { font-family: 'DM Sans', sans-serif; font-size: 15px; color: #9E5A3A; display: block; margin-bottom: 2px; }
.kv-guide .kv-steps p { font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: #555; margin: 0; }

/* FAQ accordion */
.kv-guide .kv-faq { margin: 20px 0; }
.kv-guide .kv-faq-item { background: #fff; border: 1px solid #e8dccb; border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.kv-guide .kv-faq-q { padding: 15px 18px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px; display: flex; justify-content: space-between; align-items: center; transition: .3s; }
.kv-guide .kv-faq-q:hover { background: #fbf5ec; }
.kv-guide .kv-faq-q .kv-faq-icon { color: #9E5A3A; font-size: 19px; transition: .3s; flex-shrink: 0; margin-left: 12px; }
.kv-guide .kv-faq-item.active .kv-faq-icon { transform: rotate(45deg); }
.kv-guide .kv-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; padding: 0 18px; }
.kv-guide .kv-faq-item.active .kv-faq-a { max-height: 600px; padding: 0 18px 16px; }
.kv-guide .kv-faq-a p { font-size: 14px; margin: 0; }

/* Final CTA + author */
.kv-guide .kv-final { background: #fff; border-radius: 8px; padding: 30px; margin: 30px 0; border: 1px solid #e8dccb; }
.kv-guide .kv-final h2 { margin-top: 0; }
.kv-guide .kv-author { background: #fbf5ec; padding: 18px; border-radius: 6px; margin: 16px 0; display: flex; gap: 1rem; align-items: flex-start; }
.kv-guide .kv-author-avatar {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, #7B2E28, #B85512); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem;
}
.kv-guide .kv-author h3 { border: none; padding: 0; margin: 0 0 6px; font-size: 16px; }
.kv-guide .kv-author p { margin: 0; font-size: 14px; font-family: 'DM Sans', sans-serif; color: #444; }
.kv-guide .kv-nap { font-family: 'DM Sans', sans-serif; padding: 14px; background: #fbf5ec; border-radius: 6px; margin: 16px 0; font-size: 14px; }
.kv-guide .kv-internal-links { margin: 20px 0; font-family: 'DM Sans', sans-serif; }
.kv-guide .kv-internal-links a { display: inline-block; margin: 4px 8px 4px 0; padding: 6px 14px; background: #fbf5ec; border: 1px solid #e8dccb; border-radius: 20px; font-size: 13px; }
.kv-guide .kv-updated { font-family: 'DM Sans', sans-serif; font-size: 12px; color: #888; margin-top: 14px; text-align: center; }
.kv-guide .kv-refs { font-family: 'DM Sans', sans-serif; font-size: 13px; color: #666; margin: 16px 0; }
.kv-guide .kv-refs a { color: #9E5A3A; font-weight: 600; }

/* Back to top */
.kv-guide .kv-back-top { position: fixed; bottom: 26px; right: 26px; width: 44px; height: 44px; background: #9E5A3A; color: #fff; border: none; border-radius: 50%; cursor: pointer; font-size: 18px; display: none; z-index: 999; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.kv-guide .kv-back-top:hover { background: #834629; }

@media (max-width: 768px) {
    .kv-guide .kv-hero { padding: 40px 0; min-height: unset; }
    .kv-guide h2 { font-size: 21px; }
    .kv-guide h3 { font-size: 17px; }
    .kv-guide .kv-toc ol { columns: 1; }
    .kv-guide .kv-mistakes { grid-template-columns: 1fr; }
    .kv-guide table { font-size: 13px; }
    .kv-guide table th, .kv-guide table td { padding: 8px; }
    .kv-guide .kv-final { padding: 20px; }
}


/* ─── STEP-XXVII: Images, Video, larger text, full mobile polish ──── */

/* Bigger body text (user requested) */
.kv-guide p { font-size: 17.5px; }
.kv-guide .kv-quick li,
.kv-guide .kv-problems li { font-size: 15px; }
.kv-guide table { font-size: 15px; }
.kv-guide .kv-checklist li { font-size: 15px; }
.kv-guide .kv-mistake span { font-size: 14px; }
.kv-guide .kv-faq-q { font-size: 16px; }
.kv-guide .kv-faq-a p { font-size: 15px; }
.kv-guide .kv-steps p { font-size: 14.5px; }
.kv-guide .kv-author p { font-size: 15px; }

/* Image rows / grids */
.kv-guide .kv-img-row { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin: 24px 0; }
.kv-guide .kv-img-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 20px 0; }
.kv-guide .kv-figure { margin: 0; text-align: center; background: #fff; border: 1px solid #e8dccb; border-radius: 10px; padding: 16px; flex: 1 1 260px; max-width: 300px; }
.kv-guide .kv-figure-wide { max-width: 100%; flex: 1 1 100%; }
.kv-guide .kv-figure svg { width: 100%; height: auto; max-width: 260px; }
.kv-guide .kv-figure-wide svg { max-width: 600px; }
.kv-guide .kv-figure figcaption { font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: #777; margin-top: 10px; line-height: 1.5; }

/* Video */
.kv-guide .kv-video-section { text-align: center; }
.kv-guide .kv-video-wrap { max-width: 640px; margin: 20px auto 0; }
.kv-guide .kv-video-thumb { position: relative; display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,.15); }
.kv-guide .kv-video-thumb img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.kv-guide .kv-video-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 68px; height: 68px; background: rgba(0,0,0,.65); border-radius: 50%;
    color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center;
    transition: .25s;
}
.kv-guide .kv-video-thumb:hover .kv-video-play { background: #B85512; transform: translate(-50%,-50%) scale(1.08); }

/* ─── Full mobile responsiveness (multiple breakpoints) ─── */
@media (max-width: 1024px) {
    .kv-guide .kv-img-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .kv-guide { line-height: 1.65; }
    .kv-guide p { font-size: 16.5px; }
    .kv-guide .kv-hero { padding: 36px 0; min-height: unset; }
    .kv-guide .kv-hero h1 { font-size: 22px; }
    .kv-guide .kv-lede { font-size: 14px; padding: 10px 16px; }
    .kv-guide h2 { font-size: 20px; margin: 32px 0 16px; }
    .kv-guide h3 { font-size: 16.5px; }
    .kv-guide .kv-toc { padding: 18px; }
    .kv-guide .kv-toc ol { columns: 1; }
    .kv-guide .kv-mistakes { grid-template-columns: 1fr; }
    .kv-guide .kv-img-grid { grid-template-columns: 1fr; }
    .kv-guide .kv-img-row { flex-direction: column; align-items: center; }
    .kv-guide .kv-figure { max-width: 100%; width: 100%; }
    .kv-guide table { font-size: 13.5px; }
    .kv-guide table th, .kv-guide table td { padding: 8px; }
    .kv-guide .kv-final { padding: 20px; }
    .kv-guide .kv-btns { flex-direction: column; align-items: stretch; }
    .kv-guide .kv-btn { text-align: center; }
    .kv-guide .kv-badges { gap: 8px; }
    .kv-guide .kv-badges span { font-size: 11.5px; padding: 5px 10px; }
    .kv-guide .kv-video-play { width: 54px; height: 54px; font-size: 20px; }
}
@media (max-width: 420px) {
    .kv-guide .kv-hero h1 { font-size: 19px; }
    .kv-guide h2 { font-size: 18px; padding-left: 12px; }
    .kv-guide h3 { font-size: 15.5px; }
    .kv-guide .kv-checklist li { flex-direction: column; align-items: flex-start; gap: 4px; }
    .kv-guide .kv-quick, .kv-guide .kv-problems, .kv-guide .kv-info-box { padding: 14px 16px; }
}


/* ─── STEP-XXIX: Inline topic images within sections ────────────── */
.kv-guide .kv-figure-inline {
    max-width: 420px;
    margin: 20px auto;
    display: block;
}
.kv-guide .kv-figure-inline.kv-figure-wide { max-width: 100%; }
.kv-guide .kv-figure-inline svg,
.kv-guide .kv-figure-inline img { width: 100%; height: auto; max-width: 380px; margin: 0 auto; display: block; }
.kv-guide .kv-figure-inline.kv-figure-wide svg,
.kv-guide .kv-figure-inline.kv-figure-wide img { max-width: 100%; }

@media (max-width: 640px) {
    .kv-guide .kv-figure-inline { max-width: 100%; }
    .kv-guide .kv-figure-inline svg,
    .kv-guide .kv-figure-inline img { max-width: 100%; }
}


/* ─── STEP-XXX: Bigger inline images (override STEP-XXIX small sizing) ── */
.kv-guide .kv-figure-inline {
    max-width: 720px !important;
    width: 100%;
    margin: 24px auto !important;
    display: block;
}
.kv-guide .kv-figure-inline.kv-figure-wide {
    max-width: 100% !important;
}
.kv-guide .kv-figure-inline svg,
.kv-guide .kv-figure-inline img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 10px;
}
.kv-guide .kv-figure-inline figcaption {
    font-size: 13.5px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .kv-guide .kv-figure-inline { max-width: 100% !important; }
}


/* ─── STEP-XXXI: Full-width images (1600x800 wide format) ──────── */
.kv-guide .kv-figure-inline {
    max-width: 100% !important;
    width: 100%;
    margin: 28px 0 !important;
    display: block;
}
.kv-guide .kv-figure-inline svg,
.kv-guide .kv-figure-inline img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    margin: 0 auto;
    display: block;
    border-radius: 12px;
}
.kv-guide .kv-figure-inline figcaption {
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
}

@media (max-width: 768px) {
    .kv-guide .kv-figure-inline svg,
    .kv-guide .kv-figure-inline img { aspect-ratio: 16/10; }
}


/* ─── STEP-XXXIII: Unique About Page Design (distinct from kv-guide) ── */
.ab-page * { box-sizing: border-box; }
.ab-page { font-family: 'Georgia', 'Lora', serif; color: #2A1810; line-height: 1.7; }
.ab-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.ab-page h1, .ab-page h2, .ab-page h3 { font-family: 'Georgia', serif; color: #2A1810; line-height: 1.25; }

/* Split Hero */
.ab-hero { display: grid; grid-template-columns: 380px 1fr; gap: 0; background: linear-gradient(135deg, #1B1008, #2B1A0E); min-height: 480px; }
.ab-hero-photo { position: relative; overflow: hidden; background: linear-gradient(160deg, #7B2E28, #B85512); }
.ab-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 480px; }
.ab-photo-placeholder {
    width: 100%; height: 100%; min-height: 480px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    color: #EBC96B; font-family: 'DM Sans', sans-serif;
}
.ab-photo-placeholder span { font-size: 2.4rem; font-weight: 800; letter-spacing: .05em; border: 2px solid #EBC96B; border-radius: 50%; width: 110px; height: 110px; display: flex; align-items: center; justify-content: center; }
.ab-photo-placeholder small { opacity: .6; font-size: .78rem; }
.ab-hero-text { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; color: #fff; }
.ab-eyebrow { font-family: 'DM Sans', sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: #C9A227; margin-bottom: 12px; }
.ab-hero-text h1 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 10px; }
.ab-credential-line { font-family: 'DM Sans', sans-serif; color: #EBC96B; font-size: .95rem; margin-bottom: 18px; line-height: 1.7; }
.ab-intro { font-size: 1.05rem; color: #e8dcc8; max-width: 560px; margin-bottom: 24px; }
.ab-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.ab-btn { font-family: 'DM Sans', sans-serif; font-weight: 700; padding: 12px 26px; border-radius: 30px; font-size: .88rem; text-decoration: none; display: inline-block; transition: .25s; }
.ab-btn-gold { background: linear-gradient(135deg, #C9A227, #EBC96B); color: #1B1008; }
.ab-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(201,162,39,.4); text-decoration: none; }
.ab-btn-outline { border: 1.5px solid #EBC96B; color: #EBC96B; }
.ab-btn-outline:hover { background: rgba(235,201,107,.1); text-decoration: none; }
.ab-btn-outline-light { border: 1.5px solid #fff; color: #fff; }
.ab-btn-outline-light:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.ab-stat-strip { display: flex; gap: 32px; flex-wrap: wrap; }
.ab-stat-strip div { font-family: 'DM Sans', sans-serif; }
.ab-stat-strip strong { display: block; font-size: 1.5rem; font-weight: 800; color: #EBC96B; }
.ab-stat-strip span { font-size: .75rem; color: #cbb896; text-transform: uppercase; letter-spacing: .06em; }

/* Pull quote */
.ab-pullquote {
    font-family: 'Georgia', serif; font-style: italic; font-size: 1.4rem; line-height: 1.55;
    color: #7B2E28; text-align: center; max-width: 780px; margin: 56px auto; padding: 0 20px;
    border: none; position: relative;
}
.ab-pullquote::before { content: '\201C'; font-size: 4rem; color: #D4A373; display: block; line-height: .5; margin-bottom: 10px; opacity: .6; }

/* Sections */
.ab-section { margin: 56px 0; }
.ab-section h2 { font-size: 1.8rem; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 3px solid #C9A227; display: inline-block; }
.ab-section p { font-size: 1.02rem; margin-bottom: 16px; }

/* Timeline */
.ab-timeline { margin: 32px 0; position: relative; padding-left: 30px; border-left: 2px solid #e8d89a; }
.ab-tl-item { position: relative; margin-bottom: 28px; }
.ab-tl-dot { position: absolute; left: -37px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #9E5A3A; border: 3px solid #fff; box-shadow: 0 0 0 2px #9E5A3A; }
.ab-tl-content strong { font-family: 'DM Sans', sans-serif; font-size: 1.05rem; color: #7B2E28; display: block; margin-bottom: 4px; }
.ab-tl-content p { font-size: .93rem; color: #444; margin: 0; }

/* Figure */
.ab-figure { margin: 32px 0; text-align: center; }
.ab-figure img { width: 100%; max-width: 700px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.ab-figure figcaption { font-family: 'DM Sans', sans-serif; font-size: .85rem; color: #888; margin-top: 12px; }
.ab-photo-slot-empty {
    max-width: 700px; margin: 32px auto; height: 260px; border-radius: 12px;
    background: #f5f0e6; border: 2px dashed #d4c8a8; display: flex; align-items: center; justify-content: center;
    color: #999; font-family: 'DM Sans', sans-serif; font-size: .9rem;
}

/* Split section */
.ab-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.ab-split-photo img { width: 100%; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.ab-photo-placeholder-sm { min-height: 320px; background: #f5f0e6; border-radius: 12px; color: #999; font-family: 'DM Sans', sans-serif; }
.ab-photo-placeholder-sm span { font-size: .9rem; border: none; width: auto; height: auto; }

/* Principles */
.ab-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 24px; }
.ab-principle { background: #fdf8ee; border-radius: 12px; padding: 28px 24px; }
.ab-principle-num { font-family: 'DM Sans', sans-serif; font-size: 2.2rem; font-weight: 800; color: #e8d89a; display: block; margin-bottom: 8px; }
.ab-principle h3 { font-size: 1.15rem; margin-bottom: 10px; color: #7B2E28; }
.ab-principle p { font-size: .9rem; color: #444; margin: 0; }

/* Reach grid */
.ab-reach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.ab-reach-item { background: #fff; border: 1px solid #e8d89a; border-radius: 10px; padding: 20px; text-align: center; }
.ab-reach-item strong { font-family: 'DM Sans', sans-serif; display: block; color: #7B2E28; margin-bottom: 6px; font-size: .95rem; }
.ab-reach-item span { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: #777; }

/* Final CTA */
.ab-final { background: linear-gradient(135deg, #1B1008, #2B1A0E); margin-top: 60px; padding: 60px 0; color: #fff; }
.ab-final-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.ab-final-text h2 { color: #fff; border-bottom-color: #C9A227; }
.ab-final-text p { color: #e8dcc8; }
.ab-links-row { font-family: 'DM Sans', sans-serif; font-size: .85rem; margin-top: 20px; }
.ab-links-row a { color: #EBC96B; text-decoration: none; }
.ab-links-row a:hover { text-decoration: underline; }
.ab-final-photo img { width: 100%; border-radius: 12px; }
.ab-photo-placeholder-dark { min-height: 280px; background: rgba(255,255,255,.05); border: 1px dashed rgba(235,201,107,.3); border-radius: 12px; color: #EBC96B; font-family: 'DM Sans', sans-serif; font-size: .85rem; }
.ab-photo-placeholder-dark span { font-size: .85rem; border: none; width: auto; height: auto; }

@media (max-width: 860px) {
    .ab-hero { grid-template-columns: 1fr; }
    .ab-hero-photo img, .ab-photo-placeholder { min-height: 320px; }
    .ab-hero-text { padding: 36px 24px; }
    .ab-split, .ab-final-inner { grid-template-columns: 1fr; }
    .ab-principles, .ab-reach-grid { grid-template-columns: 1fr; }
    .ab-pullquote { font-size: 1.15rem; margin: 40px auto; }
    .ab-section h2 { font-size: 1.4rem; }
    .ab-stat-strip { gap: 20px; }
}


/* ─── STEP-XXXIV: Expertise grid, testimonials, FAQ accordion ──── */
.ab-expertise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; }
.ab-expertise-card {
    display: block; background: #fff; border: 1px solid #e8d89a; border-radius: 10px;
    padding: 20px; text-decoration: none; transition: .2s;
}
.ab-expertise-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: #C9A227; text-decoration: none; }
.ab-expertise-card strong { font-family: 'DM Sans', sans-serif; display: block; color: #7B2E28; font-size: 1rem; margin-bottom: 6px; }
.ab-expertise-card span { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: #666; }

.ab-testimonial-note {
    font-family: 'DM Sans', sans-serif; font-size: .92rem; color: #888; font-style: italic;
    background: #faf7f0; border-left: 3px solid #d4c8a8; padding: 16px 20px; border-radius: 6px;
}

.ab-faq { margin-top: 20px; }
.ab-faq-item { background: #fff; border: 1px solid #e8d89a; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.ab-faq-q { padding: 16px 20px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .98rem; color: #2A1810; display: flex; justify-content: space-between; align-items: center; transition: .2s; }
.ab-faq-q:hover { background: #fdf8ee; }
.ab-faq-icon { color: #9E5A3A; font-size: 1.2rem; transition: .3s; flex-shrink: 0; margin-left: 12px; }
.ab-faq-item.active .ab-faq-icon { transform: rotate(45deg); }
.ab-faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; padding: 0 20px; }
.ab-faq-item.active .ab-faq-a { max-height: 400px; padding: 0 20px 16px; }
.ab-faq-a p { font-family: 'DM Sans', sans-serif; font-size: .9rem; color: #555; margin: 0; }

@media (max-width: 860px) {
    .ab-expertise-grid { grid-template-columns: 1fr; }
}


/* ─── STEP-XXXV: Premium color rework — hero + final CTA ────────── */

/* HERO — deep charcoal-plum, richer than the old maroon-brown */
.ab-hero {
    background: linear-gradient(145deg, #120A0E 0%, #2B1220 55%, #3D1A2E 100%) !important;
    position: relative;
    overflow: hidden;
}
.ab-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(212,175,55,.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(212,175,55,.06) 0%, transparent 45%);
    pointer-events: none;
}
.ab-hero-photo { background: linear-gradient(160deg, #3D1A2E, #5A2440) !important; }
.ab-eyebrow { color: #D4AF37 !important; }
.ab-credential-line { color: #F0D78C !important; }
.ab-stat-strip strong { color: #F0D78C !important; }
.ab-btn-gold {
    background: linear-gradient(135deg, #D4AF37, #F0D78C) !important;
    color: #1A0E12 !important;
}
.ab-btn-gold:hover { box-shadow: 0 6px 20px rgba(212,175,55,.45) !important; }
.ab-btn-outline { border-color: #F0D78C !important; color: #F0D78C !important; }
.ab-photo-placeholder { color: #F0D78C !important; }
.ab-photo-placeholder span { border-color: #F0D78C !important; }

/* FINAL CTA — distinct deep charcoal-navy, complements but doesn't repeat hero */
.ab-final {
    background: linear-gradient(145deg, #0E1116 0%, #1A1F2B 55%, #232B3D 100%) !important;
    position: relative;
    overflow: hidden;
}
.ab-final::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 30%, rgba(212,175,55,.07) 0%, transparent 45%);
    pointer-events: none;
}
.ab-final-text h2 { border-bottom-color: #D4AF37 !important; }
.ab-links-row a { color: #F0D78C !important; }
.ab-btn-outline-light { border-color: #F0D78C !important; color: #F0D78C !important; }
.ab-photo-placeholder-dark { color: #F0D78C !important; border-color: rgba(240,215,140,.3) !important; }

/* Pull quote accent updated to match new palette */
.ab-pullquote { color: #5A2440 !important; }
.ab-pullquote::before { color: #D4AF37 !important; }

/* Section heading underline updated */
.ab-section h2 { border-bottom-color: #D4AF37 !important; }

/* Timeline dot updated */
.ab-tl-dot { background: #5A2440 !important; box-shadow: 0 0 0 2px #5A2440 !important; }
.ab-tl-content strong { color: #5A2440 !important; }

/* Mission/Vision block */
.ab-mv-block { display: flex; gap: 20px; align-items: flex-start; background: #fdf8ee; border-radius: 14px; padding: 28px 30px; }
.ab-mv-icon { font-size: 2.4rem; flex-shrink: 0; }
.ab-mv-block h2 { border: none; padding: 0; margin-bottom: 10px; font-size: 1.5rem; }
.ab-mv-block p { margin: 0; font-size: 1rem; }

/* Compare block (What Makes This Different) */
.ab-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.ab-compare-col { border-radius: 12px; padding: 24px; }
.ab-compare-bad { background: #fdf0ef; border: 1px solid #f0d0cc; }
.ab-compare-good { background: #f0f7f0; border: 1px solid #cce8cc; }
.ab-compare-col h4 { font-family: 'DM Sans', sans-serif; font-size: .95rem; margin-bottom: 14px; }
.ab-compare-bad h4 { color: #b5453f; }
.ab-compare-good h4 { color: #3d7a3d; }
.ab-compare-col ul { margin: 0; padding-left: 18px; }
.ab-compare-col li { font-family: 'DM Sans', sans-serif; font-size: .88rem; margin-bottom: 8px; line-height: 1.5; }
.ab-compare-bad li { color: #8a4a45; }
.ab-compare-good li { color: #2e5e2e; }

/* Awards section */
.ab-awards { background: #fdf8ee; border-radius: 14px; padding: 32px; }
.ab-award-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.ab-award-item { text-align: center; }
.ab-award-item strong { display: block; font-family: 'DM Sans', sans-serif; font-size: 1.8rem; font-weight: 800; color: #5A2440; }
.ab-award-item span { font-family: 'DM Sans', sans-serif; font-size: .78rem; color: #777; text-transform: uppercase; letter-spacing: .04em; }

/* Certifications list */
.ab-cert-list { list-style: none; padding: 0; margin-top: 16px; }
.ab-cert-list li {
    font-family: 'DM Sans', sans-serif; font-size: .95rem; padding: 12px 0 12px 32px; position: relative;
    border-bottom: 1px solid #f0e6d8;
}
.ab-cert-list li::before { content: '\2713'; position: absolute; left: 0; color: #5A2440; font-weight: 800; font-size: 1.1rem; }
.ab-cert-list li:last-child { border-bottom: none; }

/* Promise section */
.ab-promise { background: linear-gradient(135deg, #fdf8ee, #f5ede0); border-radius: 14px; padding: 36px; text-align: center; }
.ab-promise p { font-size: 1.1rem; font-style: italic; max-width: 700px; margin: 0 auto 14px; }
.ab-promise-sign { font-family: 'DM Sans', sans-serif; font-weight: 700; color: #5A2440; font-style: normal !important; font-size: .95rem !important; }

@media (max-width: 860px) {
    .ab-mv-block { flex-direction: column; text-align: center; }
    .ab-compare { grid-template-columns: 1fr; }
    .ab-award-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ─── STEP-XXXVI: Hero V2 — dark space bg, rotating zodiac ring ─── */

.ab-hero2 {
    position: relative;
    background: radial-gradient(ellipse at 30% 20%, #1a1025 0%, #0a0612 55%, #050308 100%);
    overflow: hidden;
    padding: 70px 0 50px;
    min-height: 640px;
}
.ab-hero2-stars {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 90px 80px, #fff, transparent),
        radial-gradient(1px 1px at 150px 20px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 210px 100px, #fff, transparent),
        radial-gradient(1px 1px at 280px 60px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 340px 130px, #fff, transparent),
        radial-gradient(1px 1px at 60px 160px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 400px 40px, #fff, transparent);
    background-repeat: repeat;
    background-size: 420px 200px;
    opacity: .55;
    pointer-events: none;
}
.ab-hero2-glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.ab-hero2-glow-1 { width: 380px; height: 380px; background: rgba(212,175,55,.12); top: -80px; right: 10%; }
.ab-hero2-glow-2 { width: 300px; height: 300px; background: rgba(90,36,64,.35); bottom: -60px; left: 5%; }

.ab-hero2-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }

.ab-hero2-badge {
    display: inline-block; font-family: 'DM Sans', sans-serif; font-size: .78rem; font-weight: 700;
    letter-spacing: .08em; color: #F0A94E; border: 1px solid rgba(240,169,78,.5);
    padding: 8px 18px; border-radius: 30px; margin-bottom: 24px; background: rgba(240,169,78,.06);
}
.ab-hero2-h1 { font-family: 'Georgia', serif; font-size: clamp(30px, 4vw, 48px); font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 22px; }
.ab-hero2-h1 .ab-gold { background: linear-gradient(135deg, #D4AF37, #F0D78C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-hero2-lede { font-family: 'DM Sans', sans-serif; font-size: 1.02rem; color: #c9c0d4; max-width: 540px; margin-bottom: 30px; line-height: 1.7; }

.ab-hero2-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.ab-btn2 { font-family: 'DM Sans', sans-serif; font-weight: 700; padding: 14px 28px; border-radius: 10px; font-size: .9rem; text-decoration: none; display: inline-block; transition: .25s; }
.ab-btn2-gold { background: linear-gradient(135deg, #E8892E, #F0A94E); color: #1A0E12; }
.ab-btn2-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(232,137,46,.4); text-decoration: none; }
.ab-btn2-outline { border: 1.5px solid rgba(255,255,255,.35); color: #fff; }
.ab-btn2-outline:hover { background: rgba(255,255,255,.08); text-decoration: none; }

.ab-hero2-stats { display: flex; gap: 36px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.ab-hero2-stats div { font-family: 'DM Sans', sans-serif; }
.ab-hero2-stats strong { display: block; font-size: 1.7rem; font-weight: 800; background: linear-gradient(135deg, #D4AF37, #F0D78C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-hero2-stats span { font-size: .72rem; color: #9d94ab; text-transform: uppercase; letter-spacing: .05em; }

/* Zodiac ring + photo */
.ab-hero2-right { display: flex; justify-content: center; align-items: center; position: relative; }
.ab-zodiac-wrap { position: relative; width: 380px; height: 380px; }
.ab-zodiac-ring { position: absolute; inset: 0; animation: ab-spin 50s linear infinite; }
.ab-zodiac-sym { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.ab-zodiac-sym-inner {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.4);
    border-radius: 50%; color: #F0D78C; font-size: 16px;
    animation: ab-spin-rev 50s linear infinite;
}
@keyframes ab-spin { to { transform: rotate(360deg); } }
@keyframes ab-spin-rev { to { transform: rotate(-360deg); } }

.ab-hero2-photo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 240px; height: 240px; border-radius: 50%; overflow: hidden;
    border: 4px solid rgba(212,175,55,.5); box-shadow: 0 0 50px rgba(212,175,55,.25);
    z-index: 3;
}
.ab-hero2-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-photo-placeholder-round {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(160deg, #3D1A2E, #5A2440); color: #F0D78C;
    font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 1.6rem;
}

.ab-float-badge {
    position: absolute; display: flex; align-items: center; gap: 10px;
    background: rgba(20,12,24,.9); backdrop-filter: blur(6px);
    border: 1px solid rgba(212,175,55,.3); border-radius: 12px; padding: 10px 14px;
    box-shadow: 0 8px 20px rgba(0,0,0,.4); z-index: 4; white-space: nowrap;
}
.ab-float-icon { font-size: 1.2rem; }
.ab-float-badge strong { display: block; font-family: 'DM Sans', sans-serif; font-size: .82rem; color: #F0D78C; }
.ab-float-badge small { font-family: 'DM Sans', sans-serif; font-size: .68rem; color: #9d94ab; }
.ab-float-badge-1 { top: 10px; right: -10px; }
.ab-float-badge-2 { top: 50%; right: -50px; transform: translateY(-50%); }
.ab-float-badge-3 { bottom: 10px; left: -20px; }

@media (max-width: 960px) {
    .ab-hero2-grid { grid-template-columns: 1fr; text-align: center; }
    .ab-hero2-lede { margin-left: auto; margin-right: auto; }
    .ab-hero2-cta, .ab-hero2-stats { justify-content: center; }
    .ab-hero2-right { margin-top: 40px; }
    .ab-float-badge-2 { right: 10px; }
    .ab-float-badge-1 { right: 10px; }
}
@media (max-width: 480px) {
    .ab-zodiac-wrap { width: 300px; height: 300px; transform: scale(.85); }
    .ab-hero2-h1 { font-size: 26px; }
    .ab-float-badge { padding: 8px 10px; }
    .ab-float-badge strong { font-size: .74rem; }
}


/* ─── STEP-XXXVII: Fix text visibility, size, height, badges ────── */

/* FIX: text was invisible — old .ab-page h1 rule (class+element = higher
   specificity) was beating .ab-hero2-h1 (class only). Force override. */
.ab-page .ab-hero2-h1,
.ab-page section.ab-hero2 .ab-hero2-h1 {
    color: #ffffff !important;
    font-family: 'Georgia', serif !important;
}
.ab-page .ab-hero2-h1 .ab-gold {
    background: linear-gradient(135deg, #D4AF37, #F0D78C) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.ab-page .ab-hero2-badge { color: #F0A94E !important; }
.ab-page .ab-hero2-lede { color: #c9c0d4 !important; }
.ab-page .ab-hero2-stats strong {
    background: linear-gradient(135deg, #D4AF37, #F0D78C) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
.ab-page .ab-hero2-stats span { color: #9d94ab !important; }

/* FIX: heading too large — reduce clamp range */
.ab-hero2-h1 {
    font-size: clamp(22px, 2.6vw, 34px) !important;
    line-height: 1.3 !important;
    margin-bottom: 18px !important;
}

/* FIX: hero section too tall — reduce min-height and padding */
.ab-hero2 {
    min-height: unset !important;
    padding: 44px 0 36px !important;
}

/* FIX: floating badges too thick / overlapping the circle — slim down + push further out */
.ab-float-badge {
    padding: 7px 11px !important;
    border-radius: 9px !important;
    gap: 7px !important;
}
.ab-float-icon { font-size: .95rem !important; }
.ab-float-badge strong { font-size: .72rem !important; }
.ab-float-badge small { font-size: .6rem !important; }

.ab-float-badge-1 { top: -14px !important; right: -70px !important; }
.ab-float-badge-2 { top: 50% !important; right: -120px !important; transform: translateY(-50%) !important; }
.ab-float-badge-3 { bottom: -14px !important; left: -70px !important; }

/* Give the wrap room on the sides so badges don't clip off-screen */
.ab-hero2-right { padding: 0 90px !important; }

/* ─── Responsive: scale the WHOLE ring+photo+badges cluster proportionally ───
   (children use fixed-pixel radius via inline transform, so we scale the
   parent wrapper itself rather than resizing width/height, which would not
   reposition the absolutely-positioned children correctly) ─── */
@media (max-width: 960px) {
    .ab-hero2-grid { grid-template-columns: 1fr !important; }
    .ab-hero2-right { padding: 0 !important; margin-top: 30px; }
    .ab-zodiac-wrap { transform: scale(.8); }
    .ab-float-badge-2 { right: -60px !important; }
}
@media (max-width: 560px) {
    .ab-hero2 { padding: 30px 0 26px !important; }
    .ab-hero2-h1 { font-size: 21px !important; }
    .ab-zodiac-wrap { transform: scale(.62); }
}
@media (max-width: 380px) {
    .ab-zodiac-wrap { transform: scale(.52); }
}


/* ─── STEP-XXXVIII: Premium polish — bigger circle, repositioned, refined ── */

/* Circle bigger + moved up within the ring */
.ab-hero2-photo {
    width: 230px !important;
    height: 230px !important;
    top: 44% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border-width: 5px !important;
    box-shadow: 0 0 60px rgba(212,175,55,.32), 0 10px 40px rgba(0,0,0,.5) !important;
}

/* Slightly larger ring to comfortably frame the bigger photo */
.ab-zodiac-wrap { width: 360px !important; height: 360px !important; }

/* Premium refinements: tighter hero padding now that stats row is shorter,
   subtle letter-spacing on badge text, richer glow, smoother stat gaps */
.ab-hero2 { padding: 50px 0 40px !important; }
.ab-hero2-badge { letter-spacing: .1em !important; box-shadow: 0 2px 12px rgba(240,169,78,.08); }
.ab-hero2-stats { gap: 44px !important; }
.ab-hero2-stats strong { font-size: 1.85rem !important; }
.ab-float-badge { box-shadow: 0 10px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(212,175,55,.15) inset !important; }
.ab-btn2-gold { box-shadow: 0 4px 16px rgba(232,137,46,.25); }
.ab-hero2-glow-1 { width: 440px !important; height: 440px !important; }
.ab-hero2-glow-2 { width: 340px !important; height: 340px !important; }

@media (max-width: 960px) {
    .ab-zodiac-wrap { width: 320px !important; height: 320px !important; transform: scale(.85) !important; }
    .ab-hero2-photo { width: 200px !important; height: 200px !important; }
}
@media (max-width: 560px) {
    .ab-zodiac-wrap { transform: scale(.62) !important; }
}
@media (max-width: 380px) {
    .ab-zodiac-wrap { transform: scale(.52) !important; }
}


/* ─── STEP-XXXIX: Fix zodiac symbols touching the bigger photo circle ── */
.ab-zodiac-wrap { width: 400px !important; height: 400px !important; }

@media (max-width: 960px) {
    .ab-zodiac-wrap { width: 400px !important; height: 400px !important; transform: scale(.78) !important; }
}
@media (max-width: 560px) {
    .ab-zodiac-wrap { transform: scale(.56) !important; }
}
@media (max-width: 380px) {
    .ab-zodiac-wrap { transform: scale(.46) !important; }
}


/* ─── STEP-XL: Premium Contact page — distinct indigo/midnight theme ── */

/* HERO — deep indigo/midnight, different from About's plum-maroon */
.ct-hero {
    position: relative;
    background: radial-gradient(ellipse at 75% 15%, #1a2547 0%, #0d1226 50%, #060814 100%);
    overflow: hidden;
    padding: 70px 0 60px;
}
.ct-hero-dots {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(1.5px 1.5px at 15% 25%, rgba(120,170,255,.5), transparent),
                       radial-gradient(1.5px 1.5px at 85% 15%, rgba(120,170,255,.4), transparent),
                       radial-gradient(1px 1px at 50% 60%, rgba(212,175,55,.4), transparent),
                       radial-gradient(1.5px 1.5px at 30% 80%, rgba(120,170,255,.4), transparent),
                       radial-gradient(1px 1px at 70% 45%, rgba(212,175,55,.35), transparent);
    background-size: 300px 300px;
}
.ct-hero-glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.ct-hero-glow-1 { width: 420px; height: 420px; background: rgba(70,110,220,.22); top: -100px; right: -60px; }
.ct-hero-glow-2 { width: 320px; height: 320px; background: rgba(212,175,55,.14); bottom: -80px; left: 5%; }

.ct-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 50px; align-items: center; }

.ct-badge {
    display: inline-flex; align-items: center; gap: 8px; font-family: 'Inter', sans-serif;
    font-size: .78rem; font-weight: 600; color: #8fd4a0; background: rgba(90,200,120,.08);
    border: 1px solid rgba(90,200,120,.3); padding: 8px 16px; border-radius: 30px; margin-bottom: 22px;
}
.ct-badge::before { content: ''; }
.ct-h1 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 3.2vw, 40px); color: #fff; line-height: 1.25; margin-bottom: 16px; font-weight: 700; }
.ct-lede { font-family: 'Inter', sans-serif; font-size: 1rem; color: #a8b0cc; max-width: 500px; margin-bottom: 32px; line-height: 1.7; }

.ct-quick-methods { display: flex; flex-direction: column; gap: 12px; max-width: 380px; }
.ct-method {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    text-decoration: none; transition: .25s;
}
.ct-method:hover { background: rgba(255,255,255,.08); transform: translateX(4px); text-decoration: none; }
.ct-method-wa { border-color: rgba(37,211,102,.4); }
.ct-method-icon { font-size: 1.4rem; }
.ct-method strong { display: block; font-family: 'Inter', sans-serif; color: #fff; font-size: .92rem; }
.ct-method span { font-family: 'Inter', sans-serif; color: #8f97b8; font-size: .78rem; }

/* Glassmorphic quick-facts card */
.ct-hero-right { display: flex; justify-content: center; }
.ct-glass-card {
    background: rgba(255,255,255,.06); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 30px 28px;
    width: 100%; max-width: 340px; box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.ct-glass-eyebrow {
    display: block; font-family: 'Inter', sans-serif; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .1em; color: #D4AF37; margin-bottom: 18px; font-weight: 700;
}
.ct-glass-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.ct-glass-row:last-child { border-bottom: none; }
.ct-glass-row span { font-family: 'Inter', sans-serif; font-size: .82rem; color: #9aa2c0; }
.ct-glass-row strong { font-family: 'Inter', sans-serif; font-size: .85rem; color: #fff; text-align: right; }

/* Contact form section */
.ct-form-section { margin-top: 50px; }
.ct-form-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; }
.ct-form-col h2 { margin-bottom: 8px; }
.ct-form-col > p { font-family: 'DM Sans', sans-serif; color: #666; margin-bottom: 24px; }

.ct-success-msg {
    background: #eef7ee; border: 1px solid #b8ddb8; color: #2e6e2e; border-radius: 8px;
    padding: 14px 18px; margin-bottom: 20px; font-family: 'DM Sans', sans-serif; font-size: .9rem;
}
.ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.ct-field { margin-bottom: 16px; }
.ct-form-row .ct-field { margin-bottom: 0; }
.ct-field label { display: block; font-family: 'DM Sans', sans-serif; font-size: .82rem; font-weight: 700; color: #444; margin-bottom: 6px; }
.ct-field input, .ct-field select, .ct-field textarea {
    width: 100%; padding: 12px 14px; border: 1.5px solid #e0d8c8; border-radius: 8px;
    font-family: 'DM Sans', sans-serif; font-size: .92rem; color: #2A1810; background: #fff;
}
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-color: #9E5A3A; }
.ct-privacy-note { font-family: 'DM Sans', sans-serif; font-size: .8rem; color: #888; margin: 4px 0 18px; }
.ct-submit-btn { border: none; cursor: pointer; font-size: .95rem; }

.ct-info-col { display: flex; flex-direction: column; gap: 16px; }
.ct-info-card { background: #fdf8ee; border: 1px solid #e8d89a; border-radius: 12px; padding: 20px 22px; }
.ct-info-card h3 { font-family: 'DM Sans', sans-serif; font-size: .95rem; color: #9E5A3A; margin-bottom: 8px; }
.ct-info-card p { font-family: 'DM Sans', sans-serif; font-size: .87rem; color: #444; margin: 0 0 6px; line-height: 1.55; }
.ct-info-note { color: #888 !important; font-size: .8rem !important; font-style: italic; }

.ct-map-placeholder {
    height: 280px; border-radius: 12px; background: #f0ece0; border: 2px dashed #d4c8a8;
    display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px;
    font-family: 'DM Sans', sans-serif; color: #999; font-size: .9rem;
}

@media (max-width: 900px) {
    .ct-hero-grid { grid-template-columns: 1fr; }
    .ct-hero-right { margin-top: 30px; }
    .ct-form-grid { grid-template-columns: 1fr; }
    .ct-form-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ct-hero { padding: 50px 0 40px; }
    .ct-h1 { font-size: 24px; }
    .ct-glass-card { padding: 22px 20px; }
}


/* ─── STEP-XLI: Contact page — full build, text-visibility fix, premium polish ── */

/* FIX: text invisible — same root cause as About page. .ab-page h1/h2/h3 rule
   (class+element specificity) was beating single-class .ct-h1 / .ab-final-text h2.
   Force override with scoped, higher-specificity rules. */
.ct-page .ct-h1 { color: #ffffff !important; }
.ct-page .ct-badge { color: #8fd4a0 !important; }
.ct-page .ct-lede { color: #a8b0cc !important; }
.ct-page .ab-final .ab-final-text h2,
.ct-page section.ab-final h2 { color: #ffffff !important; border-bottom-color: #D4AF37 !important; }
.ct-page .ab-final p { color: #e8dcc8 !important; }

/* Premium hero polish — subtle depth, refined badge, animated glow pulse */
.ct-hero { padding: 76px 0 64px !important; }
.ct-badge { box-shadow: 0 2px 14px rgba(143,212,160,.1); }
.ct-h1 { text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.ct-hero-glow-1, .ct-hero-glow-2 { animation: ct-pulse 8s ease-in-out infinite; }
@keyframes ct-pulse { 0%,100% { opacity: 1; } 50% { opacity: .6; } }
.ct-glass-card { transition: transform .3s ease; }
.ct-glass-card:hover { transform: translateY(-4px); }
.ct-method { position: relative; overflow: hidden; }
.ct-method::after { content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.06),transparent); transform:translateX(-100%); transition:.6s; }
.ct-method:hover::after { transform:translateX(100%); }

/* Mode cards (In-Person / Pan-India / Worldwide) */
.ct-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.ct-mode-card { background: #fff; border: 1px solid #e8d89a; border-radius: 14px; padding: 26px 22px; text-align: center; transition: .25s; }
.ct-mode-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.08); }
.ct-mode-card-highlight { background: linear-gradient(135deg, #fdf8ee, #fff); border-color: #D4AF37; box-shadow: 0 4px 20px rgba(212,175,55,.15); }
.ct-mode-icon { font-size: 2.2rem; display: block; margin-bottom: 12px; }
.ct-mode-card h3 { font-family: 'DM Sans', sans-serif; font-size: 1.02rem; color: #9E5A3A; margin-bottom: 8px; }
.ct-mode-card p { font-family: 'DM Sans', sans-serif; font-size: .87rem; color: #555; margin: 0; line-height: 1.55; }

/* Image pairs / figures */
.ct-img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; }
.ct-img-pair .ab-figure { margin: 0; }
.ct-page .ab-figure img { border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.1); width: 100%; }

/* Real map */
.ct-map-wrap { height: 380px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 26px rgba(0,0,0,.12); border: 1px solid #e8d89a; }
.ct-map-wrap iframe { display: block; }

/* WhatsApp follow-up button in success message */
.ct-wa-followup {
    display: inline-block; background: #25D366; color: #fff !important; padding: 10px 20px;
    border-radius: 8px; text-decoration: none; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .87rem;
}
.ct-wa-followup:hover { background: #1da851; text-decoration: none; }

@media (max-width: 860px) {
    .ct-mode-grid { grid-template-columns: 1fr; }
    .ct-img-pair { grid-template-columns: 1fr; }
    .ct-map-wrap { height: 280px; }
}


/* ─── STEP-XLII: In-person-anywhere messaging fix + breadcrumb ──── */
.ct-breadcrumb { background: #060814; padding: 14px 0; }
.ct-breadcrumb a { color: #8f97b8; text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: .82rem; }
.ct-breadcrumb a:hover { color: #F0D78C; }
.ct-breadcrumb span { color: #D4AF37; font-family: 'DM Sans', sans-serif; font-size: .82rem; }

.ct-mode-note {
    text-align: center; font-family: 'DM Sans', sans-serif; font-size: .85rem; color: #9E5A3A;
    margin-top: 18px; background: #fdf8ee; padding: 12px 20px; border-radius: 8px; display: inline-block;
}


/* ─── STEP-XLIII: Service page hero — leaner, premium, glass card ── */

.kv-hero { position: relative; overflow: hidden; padding: 56px 0 44px; }
.kv-hero-glow {
    position: absolute; top: -80px; right: -60px; width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(212,175,55,.16) 0%, transparent 70%);
    filter: blur(10px); pointer-events: none;
}
.kv-hero-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
}
.kv-hero-left .kv-breadcrumb { margin-bottom: 14px; }
.kv-hero-left h1 { margin-bottom: 12px; }
.kv-tagline {
    font-family: 'Lora', serif; font-size: 17px; font-style: italic;
    color: rgba(255,255,255,.88); max-width: 480px; margin-bottom: 22px; line-height: 1.6;
}
.kv-guide .kv-hero .kv-btns { margin: 0; }

/* Glass quick-facts card — matches Contact page's premium glassmorphism */
.kv-hero-right { display: flex; justify-content: center; }
.kv-glass-card {
    background: rgba(255,255,255,.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 26px 24px;
    width: 100%; max-width: 300px; box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.kv-glass-eyebrow {
    display: block; font-family: 'DM Sans', sans-serif; font-size: .7rem; text-transform: uppercase;
    letter-spacing: .1em; color: #EBC96B; margin-bottom: 14px; font-weight: 700;
}
.kv-glass-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.kv-glass-row:last-child { border-bottom: none; }
.kv-glass-row span { font-family: 'DM Sans', sans-serif; font-size: .78rem; color: rgba(255,255,255,.6); }
.kv-glass-row strong { font-family: 'DM Sans', sans-serif; font-size: .82rem; color: #fff; text-align: right; }

/* Full intro paragraph, now the first thing after the hero */
.kv-guide .kv-body-intro {
    font-size: 17.5px; line-height: 1.75; color: #333; margin: 28px 0 8px;
    padding-left: 16px; border-left: 3px solid #D4A373;
}

@media (max-width: 860px) {
    .kv-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .kv-tagline { margin-left: auto; margin-right: auto; }
    .kv-hero-right { margin-top: 24px; }
    .kv-guide .kv-btns { justify-content: center; }
}
@media (max-width: 480px) {
    .kv-hero { padding: 40px 0 32px; }
    .kv-tagline { font-size: 15px; }
}


/* ─── STEP-XLIV: Client photo stack + smooth lightbox ────────────── */

/* Hero stat strip (replaces the glass card content when no photos, now also
   sits in the left column so info is never lost) */
.kv-hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.kv-hero-stats div { font-family: 'DM Sans', sans-serif; }
.kv-hero-stats strong { display: block; font-size: 1.3rem; font-weight: 800; color: #EBC96B; }
.kv-hero-stats span { font-size: .68rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .05em; }

/* Photo stack — 3 fanned photos, visibly stacked, white borders */
.kv-photo-stack {
    position: relative; width: 100%; max-width: 300px; height: 260px; margin: 0 auto;
    cursor: pointer; outline: none;
}
.kv-stack-img {
    position: absolute; width: 220px; height: 220px; object-fit: cover; border-radius: 10px;
    border: 6px solid #fff; box-shadow: 0 12px 30px rgba(0,0,0,.4);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.kv-stack-img-1 { top: 30px; left: 10px; transform: rotate(-9deg); z-index: 1; }
.kv-stack-img-2 { top: 15px; left: 40px; transform: rotate(4deg); z-index: 2; }
.kv-stack-img-3 { top: 0; left: 70px; transform: rotate(-2deg); z-index: 3; }
.kv-photo-stack:hover .kv-stack-img-1 { transform: rotate(-14deg) translateY(-6px); }
.kv-photo-stack:hover .kv-stack-img-2 { transform: rotate(7deg) translateY(-10px); }
.kv-photo-stack:hover .kv-stack-img-3 { transform: rotate(0deg) translateY(-14px); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.kv-stack-badge {
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    background: #EBC96B; color: #1B1008; font-family: 'DM Sans', sans-serif; font-weight: 700;
    font-size: .72rem; padding: 6px 16px; border-radius: 20px; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0,0,0,.3); z-index: 4;
}

/* Lightbox — smooth fade + scale open, slide transitions between photos */
.kv-lightbox {
    position: fixed; inset: 0; background: rgba(5,3,8,.94); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
}
.kv-lightbox.active { opacity: 1; visibility: visible; }
.kv-lightbox-track {
    display: flex; width: 100%; height: 70vh; max-width: 900px;
    transition: transform .5s cubic-bezier(.2,.8,.2,1); overflow: hidden;
}
.kv-lightbox-img { width: 100%; height: 100%; object-fit: contain; flex-shrink: 0; border-radius: 8px; }
.kv-lightbox.active .kv-lightbox-track { transform: scale(1); }
.kv-lightbox-track { transform: scale(.92); }
.kv-lightbox.active .kv-lightbox-img { animation: kv-lb-in .4s ease; }
@keyframes kv-lb-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.kv-lightbox-close {
    position: absolute; top: 24px; right: 30px; background: none; border: none; color: #fff;
    font-size: 2.2rem; cursor: pointer; line-height: 1; z-index: 2;
}
.kv-lightbox-nav button {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.25); color: #fff; width: 44px; height: 44px; border-radius: 50%;
    font-size: 1.1rem; cursor: pointer; transition: .2s;
}
.kv-lightbox-nav button:hover { background: rgba(212,175,55,.3); }
#kvLbPrev { left: 20px; }
#kvLbNext { right: 20px; }

@media (max-width: 860px) {
    .kv-hero-stats { justify-content: center; }
    .kv-photo-stack { margin-top: 20px; }
}
@media (max-width: 480px) {
    .kv-photo-stack { max-width: 240px; height: 220px; }
    .kv-stack-img { width: 170px; height: 170px; }
    .kv-lightbox-track { height: 55vh; }
    .kv-lightbox-nav button { width: 38px; height: 38px; }
}


/* ─── STEP-XLV: Bigger client photos in hero stack ───────────────── */
.kv-photo-stack {
    max-width: 340px !important;
    height: 300px !important;
}
.kv-stack-img {
    width: 260px !important;
    height: 260px !important;
}
.kv-stack-img-1 { top: 32px !important; left: 5px !important; }
.kv-stack-img-2 { top: 15px !important; left: 40px !important; }
.kv-stack-img-3 { top: 0 !important; left: 75px !important; }

@media (max-width: 480px) {
    .kv-photo-stack { max-width: 260px !important; height: 240px !important; }
    .kv-stack-img { width: 190px !important; height: 190px !important; }
    .kv-stack-img-1 { left: 5px !important; }
    .kv-stack-img-2 { left: 30px !important; }
    .kv-stack-img-3 { left: 60px !important; }
}


/* ─── STEP-XLVI: Fix lightbox slide bug — separate clip-viewport from
   the transform-track. Previously both jobs were on one element, which
   meant translateX moved the whole clipped window on screen without
   ever revealing a different part of its own content (classic slider bug). ── */

.kv-lightbox-viewport {
    width: 100%; max-width: 900px; height: 70vh;
    overflow: hidden; border-radius: 8px;
    background: transparent;
}
.kv-lightbox-track {
    display: flex;
    width: 100%; height: 100%;
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
    /* no overflow/clip here, and no transform set here by default —
       JS sets transform:translateX(...) inline to move between slides */
}
.kv-lightbox-img {
    width: 100%; height: 100%;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 8px;
}
.kv-lightbox.active .kv-lightbox-img { animation: kv-lb-in .4s ease; }


/* ─── STEP-XLVII: Final fix — an old overflow:hidden on .kv-lightbox-track
   from an earlier CSS block was never overridden, so the track was still
   clipping its own oversized content locally regardless of its position
   on screen. Explicitly overriding it here (this loads LAST in the
   stylesheet, so it wins the cascade for this specific property). ── */
.kv-lightbox-track {
    overflow: visible !important;
    max-width: none !important;
}


/* ─── STEP-XLVIII: Testimonial note + last-updated freshness signal ── */
.kv-testimonial-note-card { margin-top: var(--s5); }
.kv-testimonial-note {
    font-family: 'DM Sans', sans-serif; font-size: .9rem; color: #888; font-style: italic;
    background: #faf7f0; border-left: 3px solid #d4c8a8; padding: 14px 18px; border-radius: 6px; margin: 0;
}
.kv-last-updated {
    font-family: 'DM Sans', sans-serif; font-size: .78rem; color: #999;
    text-align: center; margin: var(--s4) 0;
}


/* ─── STEP-LI: Category-specific themes — same structure, distinct feel ── */

/* ═══ ASTROLOGY — deep plum/celestial (matches About page zodiac hero) ═══ */
.kv-hero-astrology {
    background: radial-gradient(ellipse at 25% 20%, #2B1220 0%, #120A0E 55%, #060408 100%) !important;
}
.kv-hero-astrology .kv-hero-glow {
    background: radial-gradient(circle, rgba(212,175,55,.18) 0%, transparent 70%) !important;
}
.kv-hero-astrology .kv-tagline { color: rgba(255,220,180,.85) !important; }
.kv-guide.kv-cat-astrology h2 { border-left-color: #7B2E28 !important; }
.kv-guide.kv-cat-astrology h3 { border-left-color: #D4AF37 !important; }
.kv-guide.kv-cat-astrology table th { background: #4A1F35 !important; }
.kv-guide.kv-cat-astrology .kv-checklist li::before { color: #D4AF37 !important; }

/* ═══ NUMEROLOGY — deep indigo/midnight (matches Contact page) ═══ */
.kv-hero-numerology {
    background: radial-gradient(ellipse at 75% 15%, #1a2547 0%, #0d1226 50%, #060814 100%) !important;
}
.kv-hero-numerology .kv-hero-glow {
    background: radial-gradient(circle, rgba(90,150,255,.16) 0%, transparent 70%) !important;
}
.kv-hero-numerology .kv-tagline { color: rgba(190,210,255,.85) !important; }
.kv-guide.kv-cat-numerology h2 { border-left-color: #2E4694 !important; }
.kv-guide.kv-cat-numerology h3 { border-left-color: #6B8CD4 !important; }
.kv-guide.kv-cat-numerology table th { background: #2E3E6E !important; }
.kv-guide.kv-cat-numerology .kv-checklist li::before { color: #6B8CD4 !important; }
.kv-guide.kv-cat-numerology .kv-glass-eyebrow { color: #8fb0ff !important; }

/* ═══ VASTU — brown/gold earthy (unchanged, original kv-guide default) ═══ */
/* Uses the existing default .kv-hero gradient — no override needed */

/* ═══ GEMSTONES — deep emerald/jewel-tone ═══ */
.kv-hero-gemstones {
    background: radial-gradient(ellipse at 30% 20%, #0f2e24 0%, #0a1a15 55%, #050d0a 100%) !important;
}
.kv-hero-gemstones .kv-hero-glow {
    background: radial-gradient(circle, rgba(80,200,150,.18) 0%, transparent 70%) !important;
}
.kv-hero-gemstones .kv-tagline { color: rgba(180,240,210,.85) !important; }
.kv-guide.kv-cat-gemstones h2 { border-left-color: #1E5C45 !important; }
.kv-guide.kv-cat-gemstones h3 { border-left-color: #4CAF8A !important; }
.kv-guide.kv-cat-gemstones table th { background: #1A4A38 !important; }
.kv-guide.kv-cat-gemstones .kv-checklist li::before { color: #4CAF8A !important; }
.kv-guide.kv-cat-gemstones .kv-glass-eyebrow { color: #7ee0b8 !important; }

/* Shared: category badge accent on the eyebrow pill in each hero (optional subtle touch) */
.kv-hero-astrology .kv-breadcrumb a:hover,
.kv-hero-numerology .kv-breadcrumb a:hover,
.kv-hero-gemstones .kv-breadcrumb a:hover { color: #EBC96B; }


/* ─── STEP-LII: Category-specific structural decorative motifs ──── */
.kv-motif { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }

/* ASTROLOGY — large slow-rotating zodiac ring, subtle, behind content */
.kv-motif-astrology .kv-motif-ring {
    position: absolute; top: 50%; right: -80px; width: 440px; height: 440px;
    transform: translateY(-50%); animation: kv-motif-spin 90s linear infinite;
    opacity: .18;
}
.kv-motif-astrology .kv-motif-sym {
    position: absolute; top: 50%; left: 50%; width: 0; height: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #F0D78C; margin: -13px 0 0 -13px;
}
@keyframes kv-motif-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* NUMEROLOGY — large floating translucent numbers with slow pulse */
.kv-motif-numerology .kv-motif-num {
    position: absolute; font-family: 'Playfair Display', serif; font-weight: 800;
    color: rgba(107,140,212,.14); line-height: 1; animation: kv-motif-pulse 6s ease-in-out infinite;
}
.kv-motif-numerology .kv-motif-num:nth-child(2) { animation-delay: 1.2s; }
.kv-motif-numerology .kv-motif-num:nth-child(3) { animation-delay: 2.4s; }
.kv-motif-numerology .kv-motif-num:nth-child(4) { animation-delay: .6s; }
.kv-motif-numerology .kv-motif-num:nth-child(5) { animation-delay: 3s; }
@keyframes kv-motif-pulse { 0%,100% { opacity: .6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

/* GEMSTONES — faceted polygon shapes with soft shimmer */
.kv-motif-gemstones .kv-motif-facets { position: absolute; inset: 0; width: 100%; height: 100%; }
.kv-motif-gemstones .kv-motif-facets polygon {
    fill: rgba(76,175,138,.12); stroke: rgba(76,175,138,.3); stroke-width: 1;
    animation: kv-motif-shimmer 4s ease-in-out infinite;
}
.kv-motif-gemstones .kv-motif-facets polygon:nth-child(2) { animation-delay: .8s; }
.kv-motif-gemstones .kv-motif-facets polygon:nth-child(3) { animation-delay: 1.6s; }
.kv-motif-gemstones .kv-motif-facets polygon:nth-child(4) { animation-delay: 2.4s; }
.kv-motif-gemstones .kv-motif-facets polygon:nth-child(5) { animation-delay: 3.2s; }
@keyframes kv-motif-shimmer { 0%,100% { opacity: .5; } 50% { opacity: 1; } }

/* Ensure hero content stays above the decorative motif layer */
.kv-hero-grid { position: relative; z-index: 2; }

@media (max-width: 860px) {
    .kv-motif-astrology .kv-motif-ring { width: 300px; height: 300px; right: -100px; opacity: .12; }
    .kv-motif-numerology .kv-motif-num { display: none; }
    .kv-motif-numerology .kv-motif-num:nth-child(1),
    .kv-motif-numerology .kv-motif-num:nth-child(3) { display: block; font-size: 70px !important; }
    .kv-motif-gemstones .kv-motif-facets { opacity: .5; }
}


/* ─── STEP-LIII: Category theming extended across the whole page ──── */

/* ═══ ASTROLOGY (plum/gold) ═══ */
.kv-cat-astrology .kv-step-num { background: #7B2E28 !important; }
.kv-cat-astrology .kv-steps strong { color: #7B2E28 !important; }
.kv-cat-astrology .kv-faq-icon { color: #7B2E28 !important; font-size: 1.05rem; }
.kv-cat-astrology .kv-mistake { border-left-color: #7B2E28 !important; }
.kv-cat-astrology .kv-video-play { background: rgba(123,46,40,.75) !important; }
.kv-cat-astrology .kv-video-thumb:hover .kv-video-play { background: #7B2E28 !important; }
.kv-cat-astrology .kv-toc { border-color: #D4AF37 !important; }
.kv-cat-astrology .kv-quick { border-left-color: #7B2E28 !important; }
.kv-cat-astrology .kv-refs-list a,
.kv-cat-astrology .kv-author-link { color: #7B2E28 !important; }
.kv-cat-astrology .kv-btn-primary { background: linear-gradient(135deg,#7B2E28,#B85512) !important; }

/* ═══ NUMEROLOGY (indigo/blue) ═══ */
.kv-cat-numerology .kv-step-num { background: #2E4694 !important; }
.kv-cat-numerology .kv-steps strong { color: #2E4694 !important; }
.kv-cat-numerology .kv-faq-icon { color: #2E4694 !important; font-weight: 800; }
.kv-cat-numerology .kv-mistake { border-left-color: #2E4694 !important; }
.kv-cat-numerology .kv-video-play { background: rgba(46,70,148,.75) !important; }
.kv-cat-numerology .kv-video-thumb:hover .kv-video-play { background: #2E4694 !important; }
.kv-cat-numerology .kv-toc { border-color: #6B8CD4 !important; }
.kv-cat-numerology .kv-quick { border-left-color: #2E4694 !important; }
.kv-cat-numerology .kv-refs-list a,
.kv-cat-numerology .kv-author-link { color: #2E4694 !important; }
.kv-cat-numerology .kv-btn-primary { background: linear-gradient(135deg,#2E4694,#4A6FD4) !important; }

/* ═══ GEMSTONES (emerald/green) ═══ */
.kv-cat-gemstones .kv-step-num { background: #1E5C45 !important; }
.kv-cat-gemstones .kv-steps strong { color: #1E5C45 !important; }
.kv-cat-gemstones .kv-faq-icon { color: #1E5C45 !important; font-size: .95rem; }
.kv-cat-gemstones .kv-mistake { border-left-color: #1E5C45 !important; }
.kv-cat-gemstones .kv-video-play { background: rgba(30,92,69,.75) !important; }
.kv-cat-gemstones .kv-video-thumb:hover .kv-video-play { background: #1E5C45 !important; }
.kv-cat-gemstones .kv-toc { border-color: #4CAF8A !important; }
.kv-cat-gemstones .kv-quick { border-left-color: #1E5C45 !important; }
.kv-cat-gemstones .kv-refs-list a,
.kv-cat-gemstones .kv-author-link { color: #1E5C45 !important; }
.kv-cat-gemstones .kv-btn-primary { background: linear-gradient(135deg,#1E5C45,#3D8A6A) !important; }

/* Vastu keeps the original default brown/gold (#9E5A3A) — no override needed */

/* FAQ icon rotation still works well for all 4 symbols (+, #, ✦, ◆) */
.kv-faq-item.active .kv-faq-icon { transform: rotate(45deg); transition: transform .3s; }


/* ─── STEP-LIV: Photo ring — category-specific icons rotating around
   the client photo, replacing the fanned card stack. Same proven
   counter-rotation technique as the About page's zodiac ring. ── */

.kv-photo-ring-wrap {
    position: relative; width: 340px; height: 340px; margin: 0 auto;
    cursor: pointer; outline: none;
}
.kv-photo-ring {
    position: absolute; inset: 0;
    animation: kv-ring-spin 45s linear infinite;
}
.kv-ring-sym {
    position: absolute; top: 50%; left: 50%; width: 0; height: 0;
}
.kv-ring-sym-inner {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin: -18px 0 0 -18px;
    background: rgba(212,175,55,.12); border: 1.5px solid rgba(212,175,55,.45);
    border-radius: 50%; color: #F0D78C; font-size: 15px; font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    animation: kv-ring-spin-rev 45s linear infinite;
}
@keyframes kv-ring-spin { to { transform: rotate(360deg); } }
@keyframes kv-ring-spin-rev { to { transform: rotate(-360deg); } }

.kv-ring-photo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 210px; height: 210px; border-radius: 50%; overflow: hidden;
    border: 5px solid #fff; box-shadow: 0 14px 36px rgba(0,0,0,.45);
    z-index: 3; transition: transform .3s ease, box-shadow .3s ease;
}
.kv-photo-ring-wrap:hover .kv-ring-photo { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.kv-ring-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kv-photo-ring-wrap .kv-stack-badge {
    position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
    background: #EBC96B; color: #1B1008; font-family: 'DM Sans', sans-serif; font-weight: 700;
    font-size: .72rem; padding: 6px 16px; border-radius: 20px; white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0,0,0,.3); z-index: 4;
}

@media (max-width: 860px) {
    .kv-photo-ring-wrap { margin: 24px auto 0; }
}
@media (max-width: 560px) {
    .kv-photo-ring-wrap { transform: scale(.8); }
}
@media (max-width: 400px) {
    .kv-photo-ring-wrap { transform: scale(.62); }
}


/* ─── STEP-LV: Bigger photo, 10px ring gap, auto-fade slideshow ───── */

/* Bigger centre photo — 210px → 240px */
.kv-ring-photo {
    width: 240px !important;
    height: 240px !important;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border-radius: 50%; overflow: hidden;
    border: 5px solid #fff; box-shadow: 0 16px 42px rgba(0,0,0,.48);
    z-index: 3; transition: transform .3s ease, box-shadow .3s ease;
}
.kv-photo-ring-wrap:hover .kv-ring-photo { transform: translate(-50%, -50%) scale(1.03); box-shadow: 0 20px 50px rgba(0,0,0,.58); }

/* Fade-slideshow slides — stacked, crossfading */
.kv-ring-photo-slide {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0;
    transition: opacity 1.1s cubic-bezier(.4,0,.2,1);
}
.kv-ring-photo-slide.active { opacity: 1; }

/* Bigger overall wrap to match bigger photo + 10px-gap ring */
.kv-photo-ring-wrap { width: 380px !important; height: 380px !important; }

@media (max-width: 860px) {
    .kv-photo-ring-wrap { margin: 24px auto 0; }
}
@media (max-width: 560px) {
    .kv-photo-ring-wrap { transform: scale(.78); }
}
@media (max-width: 400px) {
    .kv-photo-ring-wrap { transform: scale(.6); }
}


/* ─── STEP-LVI: Rectangle photo + rectangular orbit + premium transition ── */

/* Container — bigger to accommodate the rectangle photo + orbit path */
.kv-photo-ring-wrap {
    width: 440px !important; height: 340px !important;
    position: relative; margin: 0 auto; cursor: pointer; outline: none;
}

/* RECTANGLE centre photo (was circle) — bigger, soft rounded corners */
.kv-ring-photo-rect {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 280px !important; height: 220px !important;
    border-radius: 14px; overflow: hidden;
    border: 5px solid #fff; box-shadow: 0 18px 44px rgba(0,0,0,.5);
    z-index: 3; transition: transform .3s ease, box-shadow .3s ease;
}
.kv-photo-ring-wrap:hover .kv-ring-photo-rect { transform: translate(-50%, -50%) scale(1.02); box-shadow: 0 22px 52px rgba(0,0,0,.6); }

/* Rectangular orbit path for the ring icons — 10px out from the photo edge.
   Photo is 280x220 centred in a 440x340 box, so path corners sit at
   (60,50) to (380,290) approx — exactly 10px + icon-half-width clear. */
.kv-photo-ring-rect {
    position: absolute; inset: 0;
}
.kv-ring-sym-rect {
    position: absolute; top: 0; left: 0; width: 0; height: 0;
    offset-path: path('M 58,48 L 382,48 L 382,292 L 58,292 Z');
    offset-rotate: 0deg;
    animation: kv-rect-orbit 28s linear infinite;
}
@keyframes kv-rect-orbit {
    to { offset-distance: 100%; }
}
.kv-ring-sym-rect .kv-ring-sym-inner {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    background: rgba(212,175,55,.15); border: 1.5px solid rgba(212,175,55,.5);
    border-radius: 8px; color: #F0D78C; font-size: 14px; font-weight: 700;
    font-family: 'DM Sans', sans-serif;
}

/* Fallback for browsers without offset-path support: icons sit statically
   spaced along the top edge rather than breaking/overlapping */
@supports not (offset-path: path('M0,0')) {
    .kv-ring-sym-rect { position: absolute; top: 10px; left: 50%; }
}

/* Photo count badge — kept prominent, sits just below the rectangle photo */
.kv-photo-ring-wrap .kv-stack-badge {
    position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    background: #EBC96B; color: #1B1008; font-family: 'DM Sans', sans-serif; font-weight: 700;
    font-size: .74rem; padding: 7px 18px; border-radius: 20px; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.35); z-index: 4;
}

/* ═══ Premium slide+scale photo transition (replacing plain fade) ═══ */
.kv-ring-photo-slide {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0;
    transform: scale(1.12) translateX(24px);
    transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1.15s cubic-bezier(.22,.61,.36,1);
}
.kv-ring-photo-slide.active {
    opacity: 1;
    transform: scale(1) translateX(0);
    z-index: 2;
}
.kv-ring-photo-slide.leaving {
    opacity: 0;
    transform: scale(.92) translateX(-24px);
    z-index: 1;
}

@media (max-width: 860px) {
    .kv-photo-ring-wrap { margin: 24px auto 0; }
}
@media (max-width: 560px) {
    .kv-photo-ring-wrap { transform: scale(.75); }
}
@media (max-width: 400px) {
    .kv-photo-ring-wrap { transform: scale(.58); }
}


/* ─── STEP-LVII: Bigger photo (less crop), smaller icons, recalculated path ── */

/* Bigger container to fit the bigger photo + path comfortably */
.kv-photo-ring-wrap {
    width: 480px !important; height: 360px !important;
}

/* Bigger, more standard 4:3-ish photo ratio — reduces awkward cropping
   from object-fit:cover since most photos are closer to this ratio */
.kv-ring-photo-rect {
    width: 320px !important; height: 240px !important;
}

/* Rectangular orbit path recalculated for the new photo size + smaller
   icons: photo half-width(160) + gap(10) + icon-half(13) = 183 from centre
   horizontally; photo half-height(120) + gap(10) + icon-half(13) = 143
   vertically. Container centre is (240,180) in the 480x360 box. */
.kv-ring-sym-rect {
    offset-path: path('M 57,37 L 423,37 L 423,323 L 57,323 Z') !important;
}

/* Smaller icons — 34px -> 26px */
.kv-ring-sym-rect .kv-ring-sym-inner {
    width: 26px !important; height: 26px !important;
    margin: -13px 0 0 -13px !important;
    font-size: 11px !important;
}

@media (max-width: 860px) {
    .kv-photo-ring-wrap { margin: 24px auto 0; }
}
@media (max-width: 560px) {
    .kv-photo-ring-wrap { transform: scale(.7) !important; }
}
@media (max-width: 400px) {
    .kv-photo-ring-wrap { transform: scale(.54) !important; }
}


/* ─── STEP-LVIII: Full-hero perimeter frame + proper peek-carousel ── */

.kv-hero { position: relative; overflow: visible !important; }

/* ═══ PERIMETER ICON FRAME — spans the whole hero, fixed positions ═══ */
.kv-perimeter-frame {
    position: absolute; inset: 30px 20px; z-index: 1; pointer-events: none;
}
.kv-perimeter-border {
    position: absolute; inset: 0;
    border: 2px dashed rgba(212,175,55,.35);
    border-radius: 4px;
}
/* Directional flow arrows at each edge midpoint */
.kv-perimeter-border::before,
.kv-perimeter-border::after {
    content: '\25B6'; position: absolute; color: rgba(212,175,55,.6); font-size: 12px;
}
.kv-perimeter-border::before { top: -7px; left: 48%; }
.kv-perimeter-border::after { bottom: -7px; right: 48%; transform: rotate(180deg); }

.kv-perimeter-icon {
    position: absolute; transform: translate(-50%, -50%); z-index: 2;
}
.kv-perimeter-icon-inner {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    background: rgba(10,8,6,.55); backdrop-filter: blur(3px);
    border: 1.5px solid rgba(212,175,55,.55); border-radius: 10px;
    color: #F0D78C; font-size: 17px; font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    box-shadow: 0 0 14px rgba(212,175,55,.15);
    transition: transform .25s ease, box-shadow .25s ease;
}
.kv-perimeter-icon:hover .kv-perimeter-icon-inner {
    transform: scale(1.12);
    box-shadow: 0 0 22px rgba(212,175,55,.35);
}

/* ═══ PEEK-CAROUSEL — centre slide large, sides peek ═══ */
.kv-carousel-wrap {
    position: relative; width: 100%; max-width: 380px; height: 260px;
    margin: 0 auto; cursor: pointer; outline: none;
}
.kv-carousel-track { position: relative; width: 100%; height: 100%; overflow: visible; }
.kv-carousel-slide {
    position: absolute; top: 50%; left: 50%;
    width: 240px; height: 240px; border-radius: 12px; overflow: hidden;
    border: 4px solid #fff; box-shadow: 0 16px 40px rgba(0,0,0,.5);
    transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease, z-index 0s;
}
.kv-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kv-carousel-slide.is-active { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 3; }
.kv-carousel-slide.is-prev   { transform: translate(-135%, -50%) scale(.72); opacity: .55; z-index: 2; }
.kv-carousel-slide.is-next   { transform: translate(35%, -50%) scale(.72); opacity: .55; z-index: 2; }
.kv-carousel-slide.is-hidden { transform: translate(-50%, -50%) scale(.4); opacity: 0; z-index: 1; }

.kv-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3); color: #fff;
    font-size: .85rem; cursor: pointer; z-index: 5; transition: .2s;
}
.kv-carousel-arrow:hover { background: rgba(212,175,55,.6); }
.kv-carousel-prev { left: -6px; }
.kv-carousel-next { right: -6px; }

.kv-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.kv-carousel-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.3); cursor: pointer; transition: .2s;
}
.kv-carousel-dot.is-active { background: #EBC96B; transform: scale(1.3); }

.kv-hero-right .kv-stack-badge {
    display: block; margin: 14px auto 0; position: static;
    width: fit-content; background: #EBC96B; color: #1B1008;
    font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .74rem;
    padding: 7px 18px; border-radius: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

@media (max-width: 960px) {
    .kv-perimeter-frame { display: none; } /* frame doesn't fit well on stacked mobile layout */
    .kv-hero-right { margin-top: 20px; }
}
@media (max-width: 480px) {
    .kv-carousel-wrap { max-width: 300px; height: 220px; }
    .kv-carousel-slide { width: 190px; height: 190px; }
}


/* ─── STEP-LIX: Full-hero perimeter marquee frame + peek-carousel ── */
/* Built + verified incrementally with a stack-based Blade nesting
   checker after every single edit (not just total-count matching)
   after the earlier STEP-LVIII attempt broke the whole site. */

.kv-hero { position: relative; overflow: visible !important; }

/* ═══ PERIMETER FRAME — rectangular border, icons continuously travel it ═══ */
.kv-perimeter-frame {
    /* Fixed size, always centred — border and travelling icons share this
       exact same coordinate space so they can never mismatch/misalign.
       Only shown on wide (960px+) viewports where this comfortably fits
       with margin on both sides. */
    position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    width: 1100px; height: 460px;
    z-index: 1; pointer-events: none;
}

.kv-perimeter-border {
    position: absolute; inset: 0;
    border: 2px dashed rgba(212,175,55,.4);
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(212,175,55,.08) inset;
}
.kv-perimeter-border::before,
.kv-perimeter-border::after {
    content: '\25B6'; position: absolute; color: rgba(212,175,55,.65); font-size: 11px;
}
.kv-perimeter-border::before { top: -7px; left: 48%; }
.kv-perimeter-border::after { bottom: -7px; right: 48%; transform: rotate(180deg); }

/* Icons travel the SAME rectangle path continuously via offset-path.
   Path corners match the .kv-perimeter-frame inset (approximated as a
   percentage-safe fixed-size path scaled by the browser to the element). */
.kv-perimeter-icon {
    position: absolute; top: 0; left: 0; width: 0; height: 0;
    /* Path matches the frame's own fixed 1360x580 coordinate space exactly
       (frame is centred + capped at max-width:1360px), so border and
       travelling icons always align regardless of viewport width */
    offset-path: path('M 0,0 L 1100,0 L 1100,460 L 0,460 Z');
    offset-rotate: 0deg;
    animation: kv-perimeter-travel 36s linear infinite;
}
@keyframes kv-perimeter-travel { to { offset-distance: 100%; } }

.kv-perimeter-icon-inner {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    background: rgba(10,8,6,.6); backdrop-filter: blur(3px);
    border: 1.5px solid rgba(212,175,55,.55); border-radius: 9px;
    color: #F0D78C; font-size: 16px; font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    box-shadow: 0 0 16px rgba(212,175,55,.2);
}

/* Fallback for browsers without offset-path: icons sit at the top edge
   rather than overlapping/breaking */
@supports not (offset-path: path('M0,0')) {
    .kv-perimeter-icon { position: absolute; top: 10px; left: 50%; animation: none; }
}

/* ═══ PEEK-CAROUSEL ═══ */
.kv-carousel-wrap {
    position: relative; width: 100%; max-width: 380px; height: 260px;
    margin: 0 auto; cursor: pointer; outline: none;
}
.kv-carousel-track { position: relative; width: 100%; height: 100%; overflow: visible; }
.kv-carousel-slide {
    position: absolute; top: 50%; left: 50%;
    width: 240px; height: 240px; border-radius: 12px; overflow: hidden;
    border: 4px solid #fff; box-shadow: 0 16px 40px rgba(0,0,0,.5);
    transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease;
}
.kv-carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kv-carousel-slide.is-active { transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 3; }
.kv-carousel-slide.is-prev   { transform: translate(-135%, -50%) scale(.72); opacity: .55; z-index: 2; }
.kv-carousel-slide.is-next   { transform: translate(35%, -50%) scale(.72); opacity: .55; z-index: 2; }
.kv-carousel-slide.is-hidden { transform: translate(-50%, -50%) scale(.4); opacity: 0; z-index: 1; }

.kv-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.3); color: #fff;
    font-size: .85rem; cursor: pointer; z-index: 5; transition: .2s;
}
.kv-carousel-arrow:hover { background: rgba(212,175,55,.6); }
.kv-carousel-prev { left: -6px; }
.kv-carousel-next { right: -6px; }

.kv-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.kv-carousel-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.3); cursor: pointer; transition: .2s; border: none;
}
.kv-carousel-dot.is-active { background: #EBC96B; transform: scale(1.3); }

.kv-hero-right .kv-stack-badge {
    display: block; margin: 14px auto 0; position: static;
    width: fit-content; background: #EBC96B; color: #1B1008;
    font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .74rem;
    padding: 7px 18px; border-radius: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

@media (max-width: 1180px) {
    .kv-perimeter-frame { display: none; }
    .kv-hero-right { margin-top: 20px; }
}
@media (max-width: 480px) {
    .kv-carousel-wrap { max-width: 300px; height: 220px; }
    .kv-carousel-slide { width: 190px; height: 190px; }
}


/* ─── STEP-LX: Badge fix, smaller icons, frame touches hero edges ── */

/* FIX 1: "Tap to View" badge was rendering as a big box (likely inheriting
   size from an older .kv-stack-badge rule elsewhere in the stylesheet) —
   force it back to a slim pill button below the carousel */
.kv-hero-right .kv-stack-badge {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: max-content !important;
    margin: 14px auto 0 !important;
    padding: 7px 18px !important;
    background: #EBC96B !important;
    color: #1B1008 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 700 !important;
    font-size: .74rem !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.3) !important;
    line-height: 1.4 !important;
    text-align: center !important;
}
/* Make sure the badge sits centred below the carousel, not inline with it */
.kv-hero-right { display: flex; flex-direction: column; align-items: center; }

/* FIX 2: smaller perimeter icons — 40px -> 30px */
.kv-perimeter-icon-inner {
    width: 30px !important;
    height: 30px !important;
    margin: -15px 0 0 -15px !important;
    font-size: 12px !important;
}

/* FIX 3+4: frame was noticeably narrower than the hero, leaving a visible
   gap on both sides — widen it to align with the page's own 1200px content
   container so it visually "touches" the same edges as the rest of the
   page content, instead of floating with extra margin */
.kv-perimeter-frame {
    width: 1160px !important;
    height: 460px !important;
}
.kv-perimeter-icon {
    offset-path: path('M 0,0 L 1160,0 L 1160,460 L 0,460 Z') !important;
}


/* ─── STEP-LXI: True 5px edge gap (responsive) + slower movement ──── */

.kv-perimeter-frame {
    position: absolute !important;
    inset: 5px !important;
    width: auto !important;
    height: auto !important;
    top: 5px !important; left: 5px !important; right: 5px !important; bottom: 5px !important;
    transform: none !important;
}

/* JS now sets offset-path inline per-icon to match the real frame size —
   this CSS just handles the animation itself, no longer a fixed path */
.kv-perimeter-icon {
    animation-duration: 55s !important; /* was 36s — noticeably slower */
}


/* ─── STEP-LXII: Fix icon overflow — 5px was too tight for 30px icons,
   causing them to spill outside the hero bounds. 20px gives proper
   clearance (20px - 15px icon half-width = 5px safe margin). ── */
.kv-perimeter-frame {
    inset: 20px !important;
    top: 20px !important; left: 20px !important; right: 20px !important; bottom: 20px !important;
}


/* ─── STEP-LXV: Global horizontal-overflow safety net ─────────────
   White gap + scrollbar on the right means SOMETHING is rendering
   wider than the viewport. Rather than hunt down every possible
   contributor (carousel peek-slides extending via translateX, motif
   decorations with negative offsets, etc.), lock horizontal overflow
   at the page root — this is a standard, safe, low-risk fix that
   guarantees no element can ever create a horizontal scrollbar. ── */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}


/* ─── STEP-LXVI: Root-cause fix for horizontal overflow ─────────────
   IDENTIFIED CAUSE: .kv-carousel-slide.is-prev used translateX(-135%)
   and .is-next used translateX(35%) — relative to each slide's OWN
   240px width, this pushes the peek-slides roughly 130-150px beyond
   their own container's edges. On narrower desktop viewports where
   the hero has little margin beyond its content, this genuinely
   pushed past the hero's own boundary, widening the page's actual
   scrollable area beyond 100vw (not just a visual clipping issue —
   an actual layout-width issue, which is why overflow-x:hidden alone
   was masking it rather than fixing the underlying cause). ── */

/* FIX 1: proper containment specifically around the carousel column —
   tighter and more reliable than relying on the much larger .kv-hero
   to catch it. Peek-slides can still bleed generously within this
   box; anything beyond it is now safely clipped here instead of
   silently widening the page. */
.kv-hero-right {
    overflow: hidden;
    max-width: 100%;
}

/* FIX 2: reduce the peek-slide bleed distance moderately (was pushing
   ~324px beyond centre; now ~230px) — the peek effect is still clearly
   visible and unmistakable, just contained enough to reliably stay
   inside .kv-hero-right's own box at typical desktop widths, rather
   than needing to be hard-clipped (which would cut the peek images
   off abruptly and look broken). */
.kv-carousel-slide.is-prev { transform: translate(-90%, -50%) scale(.72) !important; }
.kv-carousel-slide.is-next { transform: translate(-10%, -50%) scale(.72) !important; }

/* FIX 3: belt-and-braces page-wide safeguard, now genuinely a LAST
   resort backstop rather than the primary fix (per the requirement) */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}


/* ─── STEP-LXVII: Maximum-force overflow fix — white strip persisted
   full page height, meaning previous overflow-x:hidden (without
   !important) was likely being overridden by something else in the
   cascade. Forcing this with maximum specificity + !important this
   time, applied consistently across html, body AND the page's main
   wrapper elements. ── */

html {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
}
body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
}
* {
    max-width: 100vw;
}


/* ─── STEP-LXVIII: Fix mega-menu dropdown broken by earlier overflow fix ──
   ROOT CAUSE: setting overflow-x:hidden WITHOUT also setting overflow-y
   causes browsers to implicitly compute overflow-y as 'auto' (a well-
   known CSS spec behaviour), which turned <body> into a clipping
   container — hiding the mega-menu dropdown's content (which relies on
   overflow:visible up the DOM tree to display below its trigger). ── */
html, body {
    overflow-y: visible !important;
}
/* Explicitly guarantee the mega-menu itself is never clipped by any
   ancestor, regardless of what else changes in future overflow fixes */
.nav, .nav-list, .nav-item {
    overflow: visible !important;
}


/* ─── STEP-LXIX: Fix mega-menu positioning — .nav-item needs
   position:relative for .mega's left:50%/translateX(-50%) centering
   trick to work relative to the CORRECT item, not some wider ancestor.
   This was a pre-existing latent bug, only now visible since the
   dropdown content itself is no longer being clipped (STEP-LXVIII). ── */
.nav-item {
    position: relative !important;
}


/* ─── STEP-LXX: Fix mega-menu overflowing off-screen left ──────────
   ROOT CAUSE: .mega centers itself (left:50%; translateX(-50%)) under
   its trigger nav-item. The mega-menu is 720px wide (kv-chrome.css),
   and "Services" sits near the header's left edge — centering a 720px
   box under a left-edge trigger pushes roughly half of it (~260px)
   off-screen to the left. That off-screen portion was then being
   clipped by the earlier overflow-x:hidden fix (which is otherwise
   correct/needed), leaving only a thin visible sliver.
   FIX: left-align the dropdown to its trigger instead of centering —
   it now opens extending RIGHTWARD from wherever the trigger sits,
   which keeps it safely on-screen for left/middle nav items. ── */
.mega {
    left: 0 !important;
    transform: translateY(8px) !important;
}


/* ─── STEP-LXXI: Professional mega-menu overhaul ────────────────────
   - Guarantee only ONE mega-menu is ever visible at a time (defensive
     fix, in case two nav-items' hover states were overlapping)
   - Cap max-height with scroll so it never gets cut off vertically
   - Cleaner shadow/animation for a more premium feel ── */

/* Hide ALL mega-menus by default with a hard opacity/visibility reset,
   only show the one whose OWN trigger is actively hovered/focused —
   this is more explicit/bulletproof than relying purely on :hover
   cascade specificity */
.mega {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
    border-radius: 10px;
    z-index: 200;
}
.nav-item:hover > .mega,
.nav-item:focus-within > .mega {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
/* When one nav-item is hovered, explicitly force every OTHER nav-item's
   mega-menu closed — belt-and-suspenders against any overlap bug */
.nav-list:hover .nav-item:not(:hover) > .mega {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ─── STEP-LXXII: Fix dropdown fading + being covered by page content ──
   TWO ROOT CAUSES:
   1. My previous defensive rule ".nav-list:hover .nav-item:not(:hover)
      > .mega" was interfering with the natural :hover chain — as the
      mouse moved from the trigger down INTO the dropdown itself, some
      browsers/timing caused a brief mismatch, making the dropdown fade.
      REMOVED — the simple ".nav-item:hover > .mega" rule is sufficient
      on its own since .mega is a genuine DOM child of .nav-item.
   2. The dropdown's z-index (200) wasn't high enough relative to the
      HEADER's own stacking context — if .site-header itself doesn't
      have a high z-index, its children (including a z-index:200 .mega)
      are still constrained within the header's own (lower) stacking
      layer, letting page content underneath visually win. Forcing the
      header itself to the top of the stack fixes this at the source. ── */

.site-header { z-index: 999 !important; }
.mega {
    z-index: 999 !important;
}

/* Remove the previous defensive rule's effect by resetting it back to
   simple, reliable hover-chain behaviour only */
.nav-list:hover .nav-item:not(:hover) > .mega {
    opacity: revert !important;
    visibility: revert !important;
    pointer-events: revert !important;
}
.nav-item:hover > .mega,
.nav-item:focus-within > .mega {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* ═══════════════════════════════════════════════════════════════════
   COMPLETE HEADER REDESIGN (18 Aug 2026) — self-contained, khdr-*
   namespace only. Does not depend on / is not affected by ANY of the
   old .nav/.mega/.nav-item/.site-header rules or their patches.
   ═══════════════════════════════════════════════════════════════════ */

.khdr * { box-sizing: border-box; }

.khdr {
    position: sticky;
    top: 0;
    z-index: 500;
    background: linear-gradient(135deg, #1B1008 0%, #2B1A0E 100%);
    border-bottom: 1px solid rgba(212,175,55,.25);
    box-shadow: 0 2px 16px rgba(0,0,0,.25);
}

.khdr-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
}

.khdr-logo {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.khdr-logo span { color: #EBC96B; }
.khdr-logo:hover { text-decoration: none; }

/* ═══ DESKTOP NAV ═══ */
.khdr-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}
.khdr-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}
.khdr-item { position: relative; }
.khdr-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 16px;
    color: #f0e0c8;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 8px;
    transition: background .2s, color .2s;
    white-space: nowrap;
}
.khdr-link:hover { background: rgba(212,175,55,.12); color: #EBC96B; text-decoration: none; }
.khdr-caret { font-size: 10px; opacity: .7; transition: transform .2s; }
.khdr-item:hover .khdr-caret { transform: rotate(180deg); }

.khdr-cta { margin-left: 12px; flex-shrink: 0; }
.khdr-cta-btn {
    display: inline-block;
    background: linear-gradient(135deg, #C9A227, #EBC96B);
    color: #1B1008;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 24px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s, box-shadow .2s;
}
.khdr-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(201,162,39,.35); text-decoration: none; }

/* ═══ DROPDOWN — capped max-width, never exceeds viewport, JS flips
   alignment if it would overflow the right edge ═══ */
.khdr-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    min-width: 320px;
    max-width: min(1280px, calc(100vw - 32px)); /* mega-wide */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.22);
    padding: 26px 28px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    z-index: 10;
}
.khdr-dropdown.khdr-align-right { left: auto; right: 0; }
.khdr-item:hover .khdr-dropdown,
.khdr-item:focus-within .khdr-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.khdr-dropdown-cols {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* mega-6col */
    align-items: start;
    row-gap: 26px;
    gap: 24px;
}
.khdr-col-heading {
    display: flex; align-items: center; gap: 8px;
    font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: #9E5A3A;
    margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid #f0e6d8;
}
.khdr-col-icon svg { width: 14px; height: 14px; }
.khdr-col-links { list-style: none; margin: 0; padding: 0; }
.khdr-col-links li { margin-bottom: 4px; }
.khdr-col-links a {
    display: block; padding: 6px 0; color: #444; text-decoration: none;
    font-family: 'DM Sans', sans-serif; font-size: 13.5px; transition: color .15s, padding-left .15s;
}
.khdr-col-links a:hover { color: #9E5A3A; padding-left: 4px; text-decoration: none; }
.khdr-promo {
    background: #fdf8ee; border: 1px solid #e8d89a; border-radius: 10px;
    padding: 16px; grid-column: span 1;
}
.khdr-promo strong { display: block; font-family: 'DM Sans', sans-serif; color: #9E5A3A; font-size: 13.5px; margin-bottom: 4px; }
.khdr-promo span { display: block; font-family: 'DM Sans', sans-serif; font-size: 12px; color: #777; margin-bottom: 10px; }
.khdr-promo-btn {
    display: inline-block; background: #9E5A3A; color: #fff; font-size: 12px; font-weight: 700;
    padding: 7px 14px; border-radius: 16px; text-decoration: none;
}

/* ═══ MOBILE TOGGLE (hamburger) ═══ */
.khdr-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; background: none; border: none; cursor: pointer;
    padding: 8px; flex-shrink: 0;
}
.khdr-toggle-bar { width: 100%; height: 2px; background: #EBC96B; border-radius: 2px; transition: transform .25s, opacity .25s; }
.khdr-toggle.is-active .khdr-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.khdr-toggle.is-active .khdr-toggle-bar:nth-child(2) { opacity: 0; }
.khdr-toggle.is-active .khdr-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══ MOBILE MENU PANEL ═══ */
.khdr-mobile {
    position: fixed; top: 0; right: -100%; width: min(360px, 88vw); height: 100vh;
    background: #1B1008; z-index: 600; overflow-y: auto;
    transition: right .3s ease; padding: 90px 0 30px;
    box-shadow: -10px 0 40px rgba(0,0,0,.4);
}
.khdr-mobile.is-open { right: 0; }
.khdr-mobile-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 550;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
}
.khdr-mobile-overlay.is-open { opacity: 1; visibility: visible; }

.khdr-mobile-list { list-style: none; margin: 0; padding: 0 20px; }
.khdr-mobile-item { border-bottom: 1px solid rgba(255,255,255,.08); }
.khdr-mobile-link {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 16px 4px; color: #f0e0c8; text-decoration: none;
    font-family: 'DM Sans', sans-serif; font-size: 15.5px; font-weight: 600;
}
.khdr-mobile-chevron { transition: transform .25s; font-size: 12px; opacity: .7; }
.khdr-mobile-parent.is-active .khdr-mobile-chevron { transform: rotate(180deg); }
.khdr-mobile-submenu { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.khdr-mobile-submenu.is-open { max-height: 2000px; }
.khdr-mobile-group { padding: 4px 4px 14px; }
.khdr-mobile-group-heading {
    display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: #EBC96B; margin-bottom: 6px;
}
.khdr-mobile-sublink {
    display: block; padding: 8px 0 8px 10px; color: #c9bda8; text-decoration: none;
    font-family: 'DM Sans', sans-serif; font-size: 14px;
}
.khdr-mobile-sublink:hover { color: #EBC96B; text-decoration: none; }
.khdr-mobile-cta {
    display: block; text-align: center; margin: 20px 4px 0;
    background: linear-gradient(135deg, #C9A227, #EBC96B); color: #1B1008;
    font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 15px;
    padding: 14px; border-radius: 24px; text-decoration: none;
}

/* ═══ RESPONSIVE BREAKPOINTS ═══ */
@media (max-width: 1024px) {
    .khdr-nav > .khdr-list,
    .khdr-nav > .khdr-cta { display: none; }
    .khdr-toggle { display: flex; }
    .khdr-inner { height: 68px; }
}
@media (max-width: 480px) {
    .khdr-inner { padding: 0 16px; }
    .khdr-logo { font-size: 19px; }
    .khdr-mobile { width: 100vw; }
}


/* ─── STEP-LXXV: Mobile menu close (X) button ─────────────────────
   Always-visible close button pinned top-right inside the mobile
   panel, so the user can dismiss from anywhere. ── */
.khdr-mobile-close {
    position: absolute; top: 22px; right: 20px;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.3);
    border-radius: 50%; color: #EBC96B; font-size: 28px; line-height: 1;
    cursor: pointer; transition: background .2s, transform .2s; z-index: 2;
}
.khdr-mobile-close:hover { background: rgba(212,175,55,.25); transform: rotate(90deg); }


/* ═══ KHDR WIDE MEGA PANEL ═══ */
/* Applies only to dropdowns with 5 or more columns (the Services menu). */
/* Other dropdowns keep their existing compact width untouched. */
.khdr-item .khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) {
    left: 50%;
    right: auto;
    width: min(1180px, calc(100vw - 40px));
    max-width: none;
    padding: 30px 34px 24px;
    border-radius: 14px;
    transform: translateX(-50%) translateY(6px);
}
.khdr-item:hover .khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)),
.khdr-item:focus-within .khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) {
    transform: translateX(-50%) translateY(0);
}
.khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) .khdr-dropdown-cols {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 24px 26px;
}
.khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) .khdr-col-heading {
    font-size: 11.5px;
    letter-spacing: .08em;
    margin-bottom: 10px;
}
.khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) .khdr-col-links a {
    font-size: 13px;
    padding: 5px 0;
    line-height: 1.35;
}
@media (max-width: 1240px) {
    .khdr-item .khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) {
        width: calc(100vw - 32px);
        padding: 26px 24px 20px;
    }
}


/* mega-6col: fall back to fewer columns on smaller screens */
@media (max-width: 1100px) {
    .khdr-dropdown-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
    .khdr-dropdown-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}




/* ═══ MEGA MENU — full-width panel, seven columns ═══ */
/* mega-full */
.khdr { position: relative; }
.khdr-item { position: static; }

.khdr-dropdown,
.khdr-dropdown.khdr-align-right {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: 0;
    transform: translateY(6px);
    border-radius: 0 0 14px 14px;
    padding: 26px 0 30px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.khdr-item:hover .khdr-dropdown,
.khdr-item:focus-within .khdr-dropdown {
    transform: translateY(0);
}

.khdr-dropdown-cols {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: start;
    column-gap: 20px;
    row-gap: 26px;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 32px;
}

.khdr-col-heading {
    font-size: 11px;
    letter-spacing: .05em;
    margin: 0 0 10px;
    padding-bottom: 7px;
    line-height: 1.35;
}
.khdr-col-links a { font-size: 13px; padding: 5px 0; line-height: 1.3; }
.khdr-col-links li { margin-bottom: 2px; }

@media (max-width: 1400px) { .khdr-dropdown-cols { grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 1050px) { .khdr-dropdown-cols { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 820px)  { .khdr-dropdown-cols { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 0 20px; } }

/* ═══ MEGA MENU — override the older :has() block at equal specificity ═══ */
/* mega-has-override */
.khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)),
.khdr-dropdown.khdr-align-right:has(.khdr-dropdown-cols > *:nth-child(5)) {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin-top: 0;
    transform: translateY(6px);
    border-radius: 0 0 14px 14px;
    padding: 26px 0 30px;
}
.khdr-item:hover .khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)),
.khdr-item:focus-within .khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) {
    transform: translateY(0);
}
.khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) .khdr-dropdown-cols {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: start;
    column-gap: 20px;
    row-gap: 26px;
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 32px;
}
.khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) .khdr-col-heading {
    font-size: 11px; letter-spacing: .05em; margin: 0 0 10px;
    padding-bottom: 7px; line-height: 1.35;
}
.khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) .khdr-col-links a {
    font-size: 13px; padding: 5px 0; line-height: 1.3;
}

@media (max-width: 1400px) {
    .khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) .khdr-dropdown-cols {
        grid-template-columns: repeat(5, minmax(0,1fr));
    }
}
@media (max-width: 1050px) {
    .khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) .khdr-dropdown-cols {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }
}
@media (max-width: 820px) {
    .khdr-dropdown:has(.khdr-dropdown-cols > *:nth-child(5)) .khdr-dropdown-cols {
        grid-template-columns: repeat(2, minmax(0,1fr)); padding: 0 20px;
    }
}