/* Jai Jagannath Consultancy and Financial Services
   Palette taken from the client logo: temple black, gold, Jagannath red. */

:root {
  --gold: #F2B233;          /* fills, with dark text */
  --gold-deep: #E3A21E;
  --brand-ink: #120C00;     /* text on --gold fills */
  --brand-hover: #FFC54F;
  --red: #E0263A;
  --red-ink: #FFFFFF;
  --wa: #25D366;
  --wa-ink: #05361A;
  --radius: 18px;
  --radius-sm: 12px;
  --font-head: 'Marcellus', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --maxw: 1180px;
}

:root[data-theme="dark"] {
  --bg: #0B0A08;
  --bg-2: #120F0A;
  --surface: #17130D;
  --surface-2: #211B12;
  --line: #352C1D;
  --text: #F8F2E4;
  --muted: #C2B8A3;
  --accent: #F5BC45;        /* gold for text on dark */
  --accent-red: #FF5A68;
  --band: #000000;
  --shadow: 0 20px 50px rgba(0, 0, 0, .55);
  --chip-bg: rgba(23, 19, 13, .92);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #FFFDF8;
  --bg-2: #FFF6E3;
  --surface: #FFFFFF;
  --surface-2: #FBF2DE;
  --line: #EDE2C8;
  --text: #15110A;
  --muted: #5C523F;
  --accent: #8A5800;        /* gold for text on cream, 5.6:1 */
  --accent-red: #B8101F;
  --band: linear-gradient(135deg, #FFF3D6 0%, #FFE9BC 100%);
  --band-line: #EBD9AE;
  --band-muted: #574B33;
  --tint: #FFF1D2;
  --tint-line: #F0D79C;
  --tint-2: #FDE3E6;
  --tint-2-line: #F6BEC5;
  --logo-shadow: rgba(120, 80, 0, .18);
  --shadow: 0 16px 36px rgba(120, 80, 0, .10);
  --chip-bg: rgba(255, 255, 255, .95);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.6 var(--font-body); overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; line-height: 1.12; margin: 0 0 .5em; letter-spacing: .005em; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
h3, .h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 820px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: var(--brand-ink); padding: 8px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.gold { color: var(--accent); }

/* Tags */
.tag {
  display: inline-block; vertical-align: middle; font: 700 .68rem/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 7px; border-radius: 6px; border: 1px dashed var(--accent-red); color: var(--accent-red); white-space: nowrap;
}
.tag-draft { border-color: var(--muted); color: var(--muted); }
.tag[hidden] { display: none; }

/* Preview bar */
.preview-bar { background: #B8101F; color: #fff; text-align: center; font-size: .86rem; padding: 7px 16px; }
.preview-bar p { margin: 0; }
.preview-bar .tag { border-color: #fff; color: #fff; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
  font: 700 .98rem/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, border-color .15s;
}
.btn svg { width: 20px; height: 20px; fill: currentColor; }
.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--brand-ink); }
.btn-gold:hover { background: var(--brand-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-wa { background: var(--wa); color: var(--wa-ink); }
.btn-wa:hover { background: #3BE07A; }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 18px; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.brand img { border-radius: 11px; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--font-head); font-size: 1.28rem; line-height: 1.05; color: var(--text); }
.brand-sub { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 600; font-size: .93rem; padding: 8px 11px; border-radius: 8px; color: var(--muted); }
.nav a:hover { color: var(--text); background: var(--surface-2); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: transparent; border: 1px solid var(--line); color: var(--text); cursor: pointer;
}
.icon-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.theme-toggle .i-moon { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-moon { display: block; }
.menu-toggle { display: none; }

@media (max-width: 1240px) {
  .menu-toggle { display: grid; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px 16px 16px; box-shadow: var(--shadow);
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 10px; font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .header-actions { margin-left: auto; }
}
@media (max-width: 560px) {
  .header-cta { display: none; }
  .brand img { width: 42px; height: 42px; }
  .brand-name { font-size: 1.12rem; }
  .brand-sub { font-size: .6rem; letter-spacing: .05em; }
}

/* Hero */
.hero { position: relative; overflow: hidden; padding: 64px 0 72px; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 400px at 85% 30%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%),
    radial-gradient(500px 300px at 0% 100%, color-mix(in srgb, var(--red) 10%, transparent), transparent 70%);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .9em; }
.lede { font-size: 1.25rem; font-weight: 600; margin-bottom: .7em; }
.hero-intro { color: var(--muted); max-width: 56ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--muted); font-weight: 600; font-size: .93rem; }
.hero-points li { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 25%, transparent); flex: none; }

.hero-art { position: relative; justify-self: center; width: min(420px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
.halo { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: 0 0 80px color-mix(in srgb, var(--gold) 25%, transparent); }
.halo::after { content: ''; position: absolute; inset: -6%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--gold) 30%, transparent); animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-logo { position: relative; width: 74%; height: auto; border-radius: 22%; box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent); }
.chip {
  position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 999px;
  background: var(--chip-bg); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 700; font-size: .86rem; white-space: nowrap;
  animation: float 6s ease-in-out infinite;
}
.chip-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--brand-ink); font-size: .9rem; }
.chip-a { top: 8%; left: -6%; }
.chip-b { top: 30%; right: -8%; animation-delay: -1.5s; }
.chip-c { bottom: 18%; left: -10%; animation-delay: -3s; }
.chip-d { bottom: 2%; right: 0; animation-delay: -4.5s; }
.chip-b .chip-ico, .chip-d .chip-ico { background: var(--red); color: var(--red-ink); }
@keyframes float { 50% { transform: translateY(-8px); } }

@media (max-width: 900px) {
  .hero { padding: 40px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { width: min(340px, 82%); order: -1; }
  .chip-a { left: -14%; } .chip-c { left: -16%; } .chip-b { right: -14%; }
}
@media (max-width: 480px) {
  .chip { font-size: .76rem; padding: 6px 11px 6px 6px; }
  .chip-ico { width: 23px; height: 23px; }
  .chip-a { left: -8%; } .chip-c { left: -10%; } .chip-b { right: -10%; } .chip-d { right: -4%; }
  .hero-ctas .btn { width: 100%; }
}

/* Sections */
.section { padding: 84px 0; }
.section-tight { padding: 24px 0 72px; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.section-head.left { text-align: left; margin: 0; }
.section-sub { color: var(--muted); font-size: 1.05rem; }
.band { background: var(--band); }
:root[data-theme="light"] .band { --line: var(--band-line); --muted: var(--band-muted); }
.band-soft { background: var(--bg-2); }
.fine { font-size: .82rem; color: var(--muted); margin-top: 14px; }
@media (max-width: 700px) { .section { padding: 60px 0; } }

/* Services */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; }
.filter {
  min-height: 42px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: 700 .9rem var(--font-body); cursor: pointer;
}
.filter[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.services { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.service {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--gold) 60%, var(--line)); }
.service[hidden] { display: none; }
.service-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #0B0A08; color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent); }
.service-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service.is-cibil .service-ico { color: var(--red-ink); background: var(--red); box-shadow: none; }
.service h3 { margin: 4px 0 0; font-size: 1.25rem; }
.service p { color: var(--muted); font-size: .95rem; margin: 0; flex: 1; }
.service-ask {
  align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0;
  background: none; border: 0; color: var(--accent); font: 800 .92rem var(--font-body); cursor: pointer;
}
.service-ask::after { content: '→'; transition: transform .15s; }
.service-ask:hover::after { transform: translateX(4px); }
.service-group { position: absolute; top: 22px; right: 22px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* CIBIL */
.cibil-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: center; }
.ticks { list-style: none; counter-reset: t; padding: 0; margin: 28px 0 32px; display: grid; gap: 18px; }
.ticks li { counter-increment: t; position: relative; padding-left: 52px; color: var(--muted); }
.ticks li strong { color: var(--text); display: block; }
.ticks li::before {
  content: counter(t); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--gold); color: var(--gold); font-family: var(--font-head); font-size: 1.1rem;
}
.gauge-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 32px; text-align: center; }
.gauge { width: 100%; max-width: 280px; margin: 0 auto; }
.needle { stroke: var(--text); transform-origin: 120px 130px; animation: sweep 5s ease-in-out infinite alternate; }
.hub { fill: var(--text); }
@keyframes sweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(95deg); } }
.gauge-labels { display: flex; justify-content: space-between; max-width: 280px; margin: 4px auto 18px; font-size: .8rem; color: var(--muted); font-weight: 700; }
.gauge-note { color: var(--muted); font-size: .95rem; margin: 0; }
@media (max-width: 860px) { .cibil-grid { grid-template-columns: 1fr; gap: 36px; } }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: s; }
.step { counter-increment: s; position: relative; padding: 26px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.step::before { content: '0' counter(s); display: block; font-family: var(--font-head); font-size: 2.4rem; line-height: 1; color: var(--accent); margin-bottom: 14px; }
.step h3 { font-size: 1.15rem; }
.step p { color: var(--muted); font-size: .94rem; margin: 0; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Partners */
.partners-box { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: center; padding: 32px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); }
.partners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.partner { min-height: 64px; display: grid; place-items: center; text-align: center; padding: 10px; border-radius: 12px; background: var(--surface-2); font-weight: 700; color: var(--muted); font-size: .85rem; }
.partner.placeholder { border: 1px dashed var(--line); background: transparent; }
.partners-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 860px) { .partners-box { grid-template-columns: 1fr; padding: 24px; } }
@media (max-width: 420px) { .partners { grid-template-columns: 1fr 1fr; } }

/* EMI */
.emi-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center; }
.emi-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 30px; box-shadow: var(--shadow); }
.range { margin-bottom: 22px; }
.range label { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; margin-bottom: 10px; font-size: .95rem; }
.range output { color: var(--accent); font-weight: 800; white-space: nowrap; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: var(--surface-2); outline-offset: 6px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--gold-deep), 0 2px 8px rgba(0,0,0,.3); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--gold-deep); cursor: pointer; }
.emi-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0 16px; }
.emi-result div { background: var(--surface-2); border-radius: 14px; padding: 14px; }
.emi-result span { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.emi-result strong { display: block; font-family: var(--font-head); font-size: 1.45rem; font-weight: 400; margin-top: 2px; overflow-wrap: anywhere; }
.emi-result div:first-child strong { color: var(--accent); }
.emi-bar { height: 12px; border-radius: 99px; background: var(--red); overflow: hidden; }
.emi-bar span { display: block; height: 100%; background: var(--gold); transition: width .25s; }
.emi-legend { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); margin: 10px 0 22px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sw-p { background: var(--gold); } .sw-i { background: var(--red); margin-left: 12px; }
@media (max-width: 900px) { .emi-grid { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 520px) { .emi-card { padding: 22px 18px; } .emi-result { grid-template-columns: 1fr; } .emi-result strong { font-size: 1.3rem; } }

/* Documents */
.docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.doc { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.doc h3 { font-size: 1.12rem; padding-bottom: 12px; border-bottom: 2px solid var(--gold); display: inline-block; }
.doc ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 9px; }
.doc li { position: relative; padding-left: 26px; color: var(--muted); font-size: .95rem; }
.doc li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(-45deg); }
@media (max-width: 960px) { .docs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .docs { grid-template-columns: 1fr; } }

/* Enquiry */
.enquire-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.mini-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; color: var(--muted); font-weight: 600; }
.mini-list li::before { content: '✓'; color: var(--gold); font-weight: 800; margin-right: 10px; }
.enquiry { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { font-weight: 700; font-size: .9rem; }
.req { color: var(--accent-red); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--bg-2, #120F0A); background: color-mix(in srgb, var(--surface-2) 70%, #000 10%); color: var(--text);
  font: 500 1rem var(--font-body);
}
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
.field [aria-invalid="true"] { border-color: var(--accent-red); }
.form-error { margin: 0; color: var(--accent-red); font-weight: 700; font-size: .92rem; }
.wa-preview { border-top: 1px dashed var(--line); padding-top: 18px; }
.wa-preview-title { font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.wa-preview pre { margin: 0 0 14px; white-space: pre-wrap; word-break: break-word; font: 500 .92rem/1.55 var(--font-body); background: #0A2A18; color: #E6FFEF; padding: 16px; border-radius: 14px 14px 14px 4px; }
.wa-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 900px) { .enquire-grid { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } .enquiry { padding: 20px 16px; } }

/* FAQ */
.faqs { display: grid; gap: 12px; }
.faq { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 700; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); font-size: 1.2rem; transition: transform .2s; }
.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq p { padding: 0 22px 20px; margin: 0; color: var(--muted); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.contact-list { margin: 24px 0; display: grid; gap: 14px; }
.contact-list div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.contact-list dt { font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.contact-list dd { margin: 0; font-weight: 600; }
.contact-list div[hidden] { display: none; }
.link { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.contact-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { font-weight: 700; color: var(--accent); }
.contact-card { text-align: center; padding: 40px 28px; border-radius: 28px; background: #0B0A08; color: #F8F2E4; border: 1px solid #352C1D; box-shadow: var(--shadow); }
.contact-card img { margin: 0 auto 18px; border-radius: 26px; }
.contact-card-name { font-family: var(--font-head); font-size: 1.4rem; line-height: 1.25; }
.contact-card-text { color: #C2B8A3; font-size: .92rem; margin: 0; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .contact-list div { grid-template-columns: 1fr; gap: 4px; } }

/* Footer */
.site-footer { background: #000; color: #C2B8A3; padding: 48px 0 100px; font-size: .9rem; }
:root[data-theme="dark"] .site-footer { --text: #F8F2E4; --muted: #C2B8A3; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid #2A2317; margin-bottom: 24px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-nav a { text-decoration: none; font-weight: 600; color: #F8F2E4; }
.footer-nav a:hover { color: var(--accent); }
.disclaimer { max-width: 900px; }
.site-footer .tag-draft { color: #A99F8A; border-color: #A99F8A; }
.copy, .privacy { margin-bottom: .5em; }
.preview-note { color: #FF8A94; margin-top: 12px; }

/* Floating WhatsApp */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); display: grid; place-items: center; box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.wa-float svg { width: 32px; height: 32px; fill: #fff; }
.wa-float:hover { transform: scale(1.06); }
@media (max-width: 420px) {
  .brand-sub { white-space: normal; line-height: 1.25; font-size: .58rem; }
}

/* Light theme: keep everything bright (client asked for a light look) */
:root[data-theme="light"] .service-ico { background: var(--tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--tint-line); }
:root[data-theme="light"] .service.is-cibil .service-ico { background: var(--tint-2); color: var(--accent-red); box-shadow: inset 0 0 0 1px var(--tint-2-line); }
:root[data-theme="light"] .ticks li::before { border-color: var(--gold-deep); color: var(--accent); }
:root[data-theme="light"] .mini-list li::before { color: var(--accent); }
:root[data-theme="light"] .field input, :root[data-theme="light"] .field select, :root[data-theme="light"] .field textarea { background: var(--bg); }
:root[data-theme="light"] .wa-preview pre { background: #E8FBEF; color: #0B3D20; border: 1px solid #BDEBCD; }
:root[data-theme="light"] .contact-card { background: #FFFFFF; color: var(--text); border: 1px solid var(--tint-line); }
:root[data-theme="light"] .contact-card-text { color: var(--muted); }
:root[data-theme="light"] .site-footer { background: var(--bg-2); color: var(--muted); border-top: 1px solid var(--line); --text: #15110A; }
:root[data-theme="light"] .footer-top { border-bottom-color: var(--line); }
:root[data-theme="light"] .footer-nav a { color: #15110A; }
:root[data-theme="light"] .footer-nav a:hover { color: var(--accent); }
:root[data-theme="light"] .site-footer .tag-draft { color: var(--muted); border-color: var(--muted); }
:root[data-theme="light"] .preview-note { color: var(--accent-red); }
:root[data-theme="light"] .hero-logo { box-shadow: 0 24px 50px rgba(120, 80, 0, .22), 0 0 0 1px #F0D79C; }
:root[data-theme="light"] .filter[aria-pressed="true"] { background: var(--gold); color: var(--brand-ink); border-color: var(--gold); }

/* Secondary tagline lines */
.subhead { font-family: var(--font-head); font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--accent-red); margin: -.2em 0 .8em; }
.footer-tagline { font-family: var(--font-head); font-size: 1.35rem; color: var(--accent); margin-bottom: .8em; }

/* New logo (2026-10-19): transparent cut-out, no black tile */
.brand img, .contact-card img { border-radius: 0; }
.hero-logo { width: 82%; border-radius: 0; box-shadow: none !important; filter: drop-shadow(0 18px 30px var(--logo-shadow, rgba(120, 80, 0, .18))); }
/* In dark mode the black temple needs a light disc behind it */
:root[data-theme="dark"] .brand img, :root[data-theme="dark"] .hero-logo, .site-footer .brand img {
  background: radial-gradient(circle, #FFF6E3 62%, transparent 63%);
}
:root[data-theme="dark"] .hero-logo { padding: 6%; }
:root[data-theme="dark"] .contact-card { background: #17130D; }
:root[data-theme="dark"] .contact-card img { background: radial-gradient(circle, #FFF6E3 62%, transparent 63%); }
picture { display: contents; }
address { font-style: normal; display: inline; }

/* ---------- Colour themes ----------
   The palette button in the header sets data-palette on <html>.
   "gold" is the original temple-gold look; the rest are alternatives.
   --gold / --red are kept as names but mean "main colour" / "second colour". */
:root[data-palette="blue"]    { --gold: #0B4FC7; --gold-deep: #083E9E; --brand-ink: #FFFFFF; --brand-hover: #1F62DA; --red: #E8A317; --red-ink: #1A1000; }
:root[data-palette="saffron"] { --gold: #F2711C; --gold-deep: #C9560E; --brand-ink: #1A0A00; --brand-hover: #FF8838; --red: #9B1C31; --red-ink: #FFFFFF; }
:root[data-palette="emerald"] { --gold: #0E7C55; --gold-deep: #0A6043; --brand-ink: #FFFFFF; --brand-hover: #139267; --red: #E8A317; --red-ink: #1A1000; }
:root[data-palette="maroon"]  { --gold: #8E1B2E; --gold-deep: #6F1423; --brand-ink: #FFFFFF; --brand-hover: #A32338; --red: #E8A317; --red-ink: #1A1000; }

:root[data-theme="light"][data-palette="blue"] {
  --bg: #FAFCFF; --bg-2: #EEF4FF; --surface-2: #E8F0FC; --line: #D5E1F4; --muted: #46526A;
  --accent: #0A45AD; --accent-red: #8A5800;
  --band: linear-gradient(135deg, #EAF1FF 0%, #D9E6FF 100%); --band-line: #C3D5F3; --band-muted: #3E4A61;
  --tint: #E3EDFF; --tint-line: #B9CEF2; --tint-2: #FFF1D2; --tint-2-line: #F0D79C;
  --shadow: 0 16px 36px rgba(10, 50, 120, .10); --logo-shadow: rgba(10, 50, 120, .20);
}
:root[data-theme="light"][data-palette="saffron"] {
  --bg: #FFFBF7; --bg-2: #FFF1E6; --surface-2: #FDEBDD; --line: #F2DBC9; --muted: #5E4A3B;
  --accent: #A83C07; --accent-red: #9B1C31;
  --band: linear-gradient(135deg, #FFEEDD 0%, #FFDDC2 100%); --band-line: #F1C9A8; --band-muted: #554233;
  --tint: #FFE8D6; --tint-line: #F6C49E; --tint-2: #FBE3E7; --tint-2-line: #EDB8C1;
  --shadow: 0 16px 36px rgba(130, 50, 0, .10); --logo-shadow: rgba(130, 50, 0, .20);
}
:root[data-theme="light"][data-palette="emerald"] {
  --bg: #FAFDFB; --bg-2: #EAF6EF; --surface-2: #E4F2EA; --line: #D0E7DA; --muted: #43564B;
  --accent: #0A6043; --accent-red: #8A5800;
  --band: linear-gradient(135deg, #E6F6EE 0%, #D2EEDF 100%); --band-line: #B5DCC6; --band-muted: #3C4E44;
  --tint: #DDF2E7; --tint-line: #A9DABF; --tint-2: #FFF1D2; --tint-2-line: #F0D79C;
  --shadow: 0 16px 36px rgba(0, 80, 50, .10); --logo-shadow: rgba(0, 80, 50, .20);
}
:root[data-theme="light"][data-palette="maroon"] {
  --bg: #FFFCF9; --bg-2: #FBF0EB; --surface-2: #F7E8E2; --line: #EBD5CC; --muted: #5A4743;
  --accent: #8E1B2E; --accent-red: #8A5800;
  --band: linear-gradient(135deg, #FBEDE6 0%, #F4DAD0 100%); --band-line: #E6C2B5; --band-muted: #52403B;
  --tint: #F9E3E4; --tint-line: #E6B5BC; --tint-2: #FFF1D2; --tint-2-line: #F0D79C;
  --shadow: 0 16px 36px rgba(100, 20, 30, .10); --logo-shadow: rgba(100, 20, 30, .20);
}
/* Dark mode keeps the dark surfaces; only the accent text changes. */
:root[data-theme="dark"][data-palette="blue"]    { --accent: #8DB2FF; }
:root[data-theme="dark"][data-palette="saffron"] { --accent: #FF9C5E; }
:root[data-theme="dark"][data-palette="emerald"] { --accent: #4FD1A0; }
:root[data-theme="dark"][data-palette="maroon"]  { --accent: #F28C9C; }

/* Palette picker */
.palette { position: relative; }
.palette-toggle svg { fill: none; }
.palette-toggle .pal-dot { fill: var(--gold); stroke: none; }
.palette-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: 236px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 10px;
}
.palette-menu[hidden] { display: none; }
.palette-menu p { margin: 4px 8px 8px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.palette-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 8px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: 600 .95rem var(--font-body); cursor: pointer; text-align: left;
}
.palette-opt:hover { background: var(--surface-2); }
.palette-opt[aria-checked="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--gold); }
.palette-opt[aria-checked="true"]::after { content: '✓'; margin-left: auto; color: var(--accent); font-weight: 800; }
.swatch { width: 30px; height: 30px; border-radius: 50%; flex: none; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line);
  background: linear-gradient(135deg, var(--a) 0 55%, var(--b) 55% 100%); }
@media (max-width: 420px) { .header-actions { gap: 6px; } .icon-btn { width: 40px; height: 40px; } }

/* Header fits the palette button too */
.nav a, .header-cta, .brand-sub { white-space: nowrap; }
.header-inner { gap: 14px; }
@media (min-width: 1241px) { .nav a { padding: 8px 9px; } }

/* ---------- High Contrast (default) ----------
   White page, near-black text, deep royal blue with white text, bright gold
   with black text. Bold blue bands for the key sections. All text pairs meet
   WCAG AA; most meet AAA. */
:root[data-palette="contrast"] { --gold: #0033A0; --gold-deep: #002273; --brand-ink: #FFFFFF; --brand-hover: #0041C9; --red: #FFC20E; --red-ink: #000000; }
:root[data-theme="light"][data-palette="contrast"] {
  --bg: #FFFFFF; --bg-2: #F1F4FA; --surface: #FFFFFF; --surface-2: #EEF2FA; --line: #9AA6BF;
  --text: #0A0A0A; --muted: #262B36;
  --accent: #0033A0; --accent-red: #B00020;
  --band: #0033A0; --band-line: rgba(255, 255, 255, .35); --band-muted: #E4EAF8;
  --tint: #0033A0; --tint-line: #0033A0; --tint-2: #FFC20E; --tint-2-line: #000000;
  --shadow: 0 10px 24px rgba(0, 20, 70, .16); --logo-shadow: rgba(0, 20, 70, .25);
}
:root[data-theme="dark"][data-palette="contrast"] { --accent: #FFC20E; --line: #4A4A4A; --muted: #E0E0E0; --text: #FFFFFF; --bg: #000000; }

/* Light + contrast: stronger outlines and solid icon tiles */
:root[data-theme="light"][data-palette="contrast"] .service,
:root[data-theme="light"][data-palette="contrast"] .step,
:root[data-theme="light"][data-palette="contrast"] .doc,
:root[data-theme="light"][data-palette="contrast"] .faq,
:root[data-theme="light"][data-palette="contrast"] .emi-card,
:root[data-theme="light"][data-palette="contrast"] .partners-box,
:root[data-theme="light"][data-palette="contrast"] .contact-card { border: 2px solid #0A0A0A; box-shadow: none; }
:root[data-theme="light"][data-palette="contrast"] .service:hover { border-color: #0033A0; box-shadow: 6px 6px 0 #0033A0; }
:root[data-theme="light"][data-palette="contrast"] .service-ico { background: #0033A0; color: #FFFFFF; box-shadow: none; }
:root[data-theme="light"][data-palette="contrast"] .service.is-cibil .service-ico { background: #FFC20E; color: #000000; box-shadow: none; }
:root[data-theme="light"][data-palette="contrast"] .doc h3 { border-bottom-color: #FFC20E; border-bottom-width: 4px; }
:root[data-theme="light"][data-palette="contrast"] .filter { border: 2px solid #0A0A0A; }
:root[data-theme="light"][data-palette="contrast"] .btn-ghost { border-color: #0A0A0A; }
:root[data-theme="light"][data-palette="contrast"] .field input,
:root[data-theme="light"][data-palette="contrast"] .field select,
:root[data-theme="light"][data-palette="contrast"] .field textarea { border: 2px solid #4A5468; }
:root[data-theme="light"][data-palette="contrast"] .hero::before {
  background: radial-gradient(600px 400px at 85% 30%, rgba(0, 51, 160, .10), transparent 70%), radial-gradient(500px 300px at 0% 100%, rgba(255, 194, 14, .18), transparent 70%);
}
:root[data-theme="light"][data-palette="contrast"] .band-soft { background: #F1F4FA; border-top: 2px solid #0A0A0A; border-bottom: 2px solid #0A0A0A; }
:root[data-theme="light"][data-palette="contrast"] .emi-bar { background: #FFC20E; box-shadow: inset 0 0 0 1px #0A0A0A; }
:root[data-theme="light"][data-palette="contrast"] .sw-i { box-shadow: inset 0 0 0 1px #0A0A0A; }

/* Blue bands: white text, gold accents; the cards inside stay white */
:root[data-theme="light"][data-palette="contrast"] .band {
  color: #FFFFFF; --text: #FFFFFF; --accent: #FFC20E; --gold-deep: #FFC20E;
}
:root[data-theme="light"][data-palette="contrast"] .band .btn-gold { background: #FFC20E; color: #000000; }
:root[data-theme="light"][data-palette="contrast"] .band .btn-gold:hover { background: #FFD24D; }
:root[data-theme="light"][data-palette="contrast"] .band .ticks li::before { border-color: #FFC20E; color: #FFC20E; }
:root[data-theme="light"][data-palette="contrast"] .band .mini-list li::before { color: #FFC20E; }
:root[data-theme="light"][data-palette="contrast"] .band .subhead { color: #FFC20E; }
:root[data-theme="light"][data-palette="contrast"] .band .gauge-card,
:root[data-theme="light"][data-palette="contrast"] .band .enquiry {
  --text: #0A0A0A; --muted: #262B36; --line: #9AA6BF; --accent: #0033A0; --gold-deep: #002273;
  color: #0A0A0A; background: #FFFFFF; border: 2px solid #0A0A0A;
}
:root[data-theme="light"][data-palette="contrast"] .band .enquiry .tag-draft,
:root[data-theme="light"][data-palette="contrast"] .band .fine { color: var(--muted); }

/* Footer: deep navy */
:root[data-theme="light"][data-palette="contrast"] .site-footer {
  background: #001A57; color: #E4EAF8; border-top: 0; --text: #FFFFFF; --muted: #E4EAF8; --accent: #FFC20E;
}
:root[data-theme="light"][data-palette="contrast"] .footer-top { border-bottom-color: rgba(255, 255, 255, .25); }
:root[data-theme="light"][data-palette="contrast"] .footer-nav a { color: #FFFFFF; }
:root[data-theme="light"][data-palette="contrast"] .footer-nav a:hover { color: #FFC20E; }
:root[data-theme="light"][data-palette="contrast"] .site-footer .tag-draft { color: #E4EAF8; border-color: #E4EAF8; }
:root[data-theme="light"][data-palette="contrast"] .preview-note { color: #FFC20E; }
:root[data-theme="light"][data-palette="contrast"] .site-footer .brand img { background: radial-gradient(circle, #FFFFFF 62%, transparent 63%); }

/* New logo (option 8, 2026-10-27): wide navy + gold mark, drawn as SVG */
.brand img { width: auto; height: 44px; background: none; }
.site-footer .brand img { height: 38px; }
.contact-card img { width: auto; height: 120px; }
.hero-logo { width: 78%; height: auto; }
.hero-badge {
  position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); margin: 0; white-space: nowrap;
  font-family: var(--font-head); font-size: 1.05rem; letter-spacing: .02em; color: var(--brand-ink);
  background: var(--gold); padding: 7px 18px; border-radius: 999px; box-shadow: var(--shadow);
}
.chip { font-size: .82rem; }
@media (max-width: 480px) { .hero-badge { font-size: .9rem; padding: 6px 14px; bottom: 6%; } .chip { font-size: .72rem; } }
/* Navy parts of the logo need a light backing on dark backgrounds */
:root[data-theme="dark"] .brand img, :root[data-theme="dark"] .contact-card img, .site-footer .brand img {
  background: #FFFFFF; border-radius: 10px; padding: 3px 5px; box-sizing: content-box;
}
:root[data-theme="light"]:not([data-palette="contrast"]) .site-footer .brand img { background: none; padding: 0; }
:root[data-theme="dark"] .hero-logo { background: #FFFFFF; border-radius: 28px; padding: 8%; width: 70%; }
:root[data-theme="light"][data-palette="contrast"] .site-footer .brand img { background: #FFFFFF; }
/* Hero art layout for the wide logo: chips in the corners, badge below */
.hero-art { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 36px 0 0; }
.hero-art .halo { inset: 0 6% auto; aspect-ratio: 1; top: 0; }
.hero-logo { width: 60%; margin: 13% 0 9%; }
.hero-badge { position: static; transform: none; }
.chip-a { top: 2%; left: -4%; }
.chip-b { top: 14%; right: -6%; }
.chip-c { top: auto; bottom: 30%; left: -8%; }
.chip-d { bottom: 20%; right: -4%; }
@media (max-width: 900px) { .hero-art { width: min(360px, 92%); } }
@media (max-width: 480px) {
  .chip-a { left: -6%; } .chip-b { right: -8%; } .chip-c { left: -8%; } .chip-d { right: -6%; }
  .hero-logo { width: 56%; }
}
@media (max-width: 480px) { .brand-sub { white-space: normal; line-height: 1.25; font-size: .58rem; } }
:root[data-theme="dark"] .hero-logo { width: 52%; }
/* Chips sit in a tidy row under the logo instead of floating over it */
.hero-art { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
.hero-logo, .hero-badge { flex-basis: auto; }
.hero-art > .hero-logo { margin: 9% 20% 7%; }
.hero-art > .hero-badge { margin: 0 20px 6px; }
.chip, .chip-a, .chip-b, .chip-c, .chip-d { position: static; animation: none; }
@media (max-width: 480px) { .hero-art > .hero-logo { margin: 9% 22% 7%; } .chip { font-size: .76rem; } }
.hero-art > .hero-logo { width: 60%; } .hero-art::after { content: none; }
.hero-art > .hero-badge { flex: 0 0 auto; }
.hero-art > .hero-logo + .hero-badge { order: 0; }
.hero-art .break { flex-basis: 100%; height: 0; }
@media (max-width: 480px) {
  .hero-art { gap: 8px; }
  .hero-art > .chip { flex: 0 0 calc(50% - 4px); white-space: normal; line-height: 1.2; font-size: .74rem; padding: 6px 10px 6px 6px; }
  .hero-art > .hero-logo { margin: 7% 22% 5%; }
}

/* ---------- "Your colours" (default, 2026-10-27) ----------
   White page. --c1-* (main) and --c2-* (second) are set on <html> by the script in
   <head> from the two colour sliders; lightness is picked there so text always passes AA. */
:root[data-palette="custom"] { --gold: var(--c1-main); --gold-deep: var(--c1-deep); --brand-ink: #FFFFFF; --brand-hover: var(--c1-hover); --red: var(--c2-main); --red-ink: #FFFFFF; }
:root[data-theme="light"][data-palette="custom"] {
  --bg: #FFFFFF; --bg-2: var(--c1-tint); --surface: #FFFFFF; --surface-2: var(--c1-tint); --line: var(--c1-line);
  --text: #101418; --muted: #343B45;
  --accent: var(--c1-main); --accent-red: var(--c2-main);
  --band: var(--c1-main); --band-line: rgba(255, 255, 255, .35); --band-muted: rgba(255, 255, 255, .9);
  --tint: var(--c1-tint); --tint-line: var(--c1-line); --tint-2: var(--c2-tint); --tint-2-line: var(--c2-line);
  --shadow: 0 12px 30px rgba(10, 20, 40, .12); --logo-shadow: rgba(10, 20, 40, .2);
}
:root[data-theme="dark"][data-palette="custom"] { --accent: var(--c1-light); --gold: var(--c1-main); }
:root[data-theme="light"][data-palette="custom"] .service-ico { background: var(--c1-main); color: #FFFFFF; box-shadow: none; }
:root[data-theme="light"][data-palette="custom"] .service.is-cibil .service-ico { background: var(--c2-main); color: #FFFFFF; }
:root[data-theme="light"][data-palette="custom"] .service:hover { border-color: var(--c1-main); box-shadow: 6px 6px 0 var(--c2-main); }
:root[data-theme="light"][data-palette="custom"] .doc h3 { border-bottom: 4px solid var(--c2-main); }
:root[data-theme="light"][data-palette="custom"] .band-soft { background: var(--c1-tint); }
:root[data-theme="light"][data-palette="custom"] .hero::before {
  background: radial-gradient(600px 400px at 85% 30%, color-mix(in srgb, var(--c1-main) 12%, transparent), transparent 70%), radial-gradient(500px 300px at 0% 100%, color-mix(in srgb, var(--c2-main) 14%, transparent), transparent 70%);
}
:root[data-theme="light"][data-palette="custom"] .emi-bar { background: var(--c2-main); }
:root[data-theme="light"][data-palette="custom"] .hero-logo { box-shadow: 0 24px 50px var(--logo-shadow), 0 0 0 1px var(--c1-line); }
:root[data-theme="light"][data-palette="custom"] .filter[aria-pressed="true"] { background: var(--c1-main); color: #FFFFFF; border-color: var(--c1-main); }
:root[data-theme="light"][data-palette="custom"] .ticks li::before { border-color: var(--c2-main); color: var(--c2-main); }
/* Main-colour bands: white text, light second colour for accents; cards inside stay white */
:root[data-theme="light"][data-palette="custom"] .band { color: #FFFFFF; --text: #FFFFFF; --accent: var(--c2-light); --gold-deep: var(--c2-light); }
:root[data-theme="light"][data-palette="custom"] .band .btn-gold { background: var(--c2-light); color: var(--c2-ink); }
:root[data-theme="light"][data-palette="custom"] .band .ticks li::before { border-color: var(--c2-light); color: var(--c2-light); }
:root[data-theme="light"][data-palette="custom"] .band .mini-list li::before, :root[data-theme="light"][data-palette="custom"] .band .subhead { color: var(--c2-light); }
:root[data-theme="light"][data-palette="custom"] .band .gauge-card,
:root[data-theme="light"][data-palette="custom"] .band .enquiry {
  --text: #101418; --muted: #343B45; --line: var(--c1-line); --accent: var(--c1-main); --gold-deep: var(--c1-deep);
  color: #101418; background: #FFFFFF;
}
:root[data-theme="light"][data-palette="custom"] .band .fine { color: rgba(255, 255, 255, .9); }
:root[data-theme="light"][data-palette="custom"] .band .enquiry .fine { color: var(--muted); }
:root[data-theme="light"][data-palette="custom"] .site-footer { background: var(--c1-dark); color: rgba(255, 255, 255, .85); border-top: 0; --text: #FFFFFF; --muted: rgba(255, 255, 255, .85); --accent: var(--c2-light); }
:root[data-theme="light"][data-palette="custom"] .footer-top { border-bottom-color: rgba(255, 255, 255, .25); }
:root[data-theme="light"][data-palette="custom"] .footer-nav a { color: #FFFFFF; }
:root[data-theme="light"][data-palette="custom"] .site-footer .tag-draft { color: #FFFFFF; border-color: #FFFFFF; }
:root[data-theme="light"][data-palette="custom"] .preview-note { color: var(--c2-light); }
:root[data-theme="light"][data-palette="custom"] .site-footer .brand img { background: #FFFFFF; border-radius: 10px; padding: 3px 5px; box-sizing: content-box; }

/* Colour sliders inside the palette menu */
.palette-menu { width: 300px; max-height: calc(100vh - 110px); overflow: auto; }
.swatch-custom { --a: var(--c1-main); --b: var(--c2-main); }
.mixer { display: none; margin: 4px 4px 10px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
:root[data-palette="custom"] .mixer { display: block; }
.mix-group + .mix-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.palette-menu .mix-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .78rem; letter-spacing: .06em; color: var(--text); }
.mix-title code { margin-left: auto; font: 700 .78rem ui-monospace, monospace; color: var(--muted); }
.mix-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px var(--line); }
.mixer label { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); margin: 6px 0 2px; }
.mixer input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; border-radius: 999px; outline-offset: 3px; cursor: pointer; }
.mixer .hue { background: linear-gradient(90deg, hsl(0 70% 40%), hsl(60 70% 35%), hsl(120 70% 32%), hsl(180 70% 32%), hsl(240 70% 45%), hsl(300 70% 40%), hsl(359 70% 40%)); }
.mixer .sat-1 { background: linear-gradient(90deg, #8A8F96, var(--c1-main)); }
.mixer .sat-2 { background: linear-gradient(90deg, #8A8F96, var(--c2-main)); }
.mixer input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; border: 3px solid #101418; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.mixer input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; border: 3px solid #101418; }
.mix-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.mix-presets button { padding: 7px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 700 .76rem var(--font-body); cursor: pointer; }
.mix-presets button:hover { border-color: var(--gold); }

/* ---------- Our services strip (from the client's card), first thing under the header ---------- */
.pillars { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 16px 0 18px; }
.pillars .wrap { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.pillars-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; font: 800 .85rem/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; text-align: center; margin: 0 0 14px; color: var(--text); }
.pillars-title span { background: var(--gold); color: var(--brand-ink); padding: 5px 14px; border-radius: 999px; letter-spacing: .12em; font-size: .72rem; }
.pillars-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.pillars-list li + li { border-left: 2px solid var(--red); }
.pillars-list a { display: flex; align-items: center; gap: 12px; padding: 2px 14px; text-decoration: none; color: var(--text); height: 100%; }
.pl-ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--brand-ink); box-shadow: 0 0 0 2px var(--bg-2), 0 0 0 4px var(--red); transition: transform .15s; }
.pillars-list a:hover .pl-ico { transform: translateY(-2px); }
.pl-ico svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pl-text b { display: block; font: 800 .9rem/1.2 var(--font-head); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 3px; }
.pl-text span { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; }
@media (max-width: 1180px) {
  .pillars-list a { flex-direction: column; text-align: center; gap: 8px; padding: 2px 8px; }
  .pl-text b { font-size: .82rem; }
}
@media (max-width: 720px) {
  .pillars { padding: 12px 0 14px; }
  .pillars-title { justify-content: flex-start; text-align: left; font-size: .7rem; margin-bottom: 10px; }
  .pillars-title span { font-size: .64rem; padding: 4px 10px; }
  .pillars-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; margin-right: -20px; padding-right: 20px; }
  .pillars-list li { flex: 0 0 150px; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line) !important; border-radius: 16px; }
  .pillars-list a { padding: 12px 10px; }
  .pl-ico { width: 44px; height: 44px; }
  .pl-ico svg { width: 23px; height: 23px; }
  .pl-text b { font-size: .78rem; }
  .pl-text span { font-size: .74rem; }
}
.footer-contact { margin: 18px 0 0; line-height: 1.7; }
.footer-contact a { font-weight: 800; }

/* Credit: AgenTech builds and maintains this site */
.made-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: .9rem; }
.agentech { display: inline-flex; align-items: center; gap: 8px; }
.agentech img { width: 26px; height: 26px; border-radius: 7px; background: none !important; padding: 0 !important; }
.agentech b { font: 800 1.05rem/1 Arial, Helvetica, sans-serif; letter-spacing: -.01em; color: #FFFFFF; }
.agentech b span { color: #7DD3FC; }
:root[data-theme="light"]:not([data-palette="custom"]):not([data-palette="contrast"]) .made-by { border-top-color: var(--line); }
:root[data-theme="light"]:not([data-palette="custom"]):not([data-palette="contrast"]) .agentech b { color: #111827; }
:root[data-theme="light"]:not([data-palette="custom"]):not([data-palette="contrast"]) .agentech b span { color: #4F46E5; }

/* EMI: interest gets its own amber so it never blends with the brand colours */
:root { --emi-int: #E8890C; --emi-int-text: #A44A04; }
:root[data-theme="dark"] { --emi-int-text: #FBBF24; }
.emi-result div { border-top: 4px solid var(--gold); }
.emi-result div:nth-child(2) { border-top-color: var(--emi-int); }
.emi-result div:nth-child(2) strong { color: var(--emi-int-text); }
.emi-result div:nth-child(3) { border-top-color: var(--text); }
.emi-result div:nth-child(3) strong { color: var(--text); font-weight: 700; }
.emi-bar, :root[data-theme="light"][data-palette="custom"] .emi-bar, :root[data-theme="light"][data-palette="contrast"] .emi-bar { background: var(--emi-int); }
.sw-i { background: var(--emi-int); }

/* WhatsApp buttons in the enquiry form and contact card use the second colour */
#enquiryForm .btn-wa, #contact .btn-wa { background: var(--red); color: var(--red-ink, #FFFFFF); }
#enquiryForm .btn-wa:hover, #contact .btn-wa:hover { filter: brightness(1.12); background: var(--red); }
#enquiryForm .btn-wa .wa-fill, #contact .btn-wa .wa-fill { fill: currentColor; }
:root[data-palette="custom"] #enquiryForm .btn-wa, :root[data-palette="custom"] #contact .btn-wa { background: var(--c2-main); color: #FFFFFF; }
:root[data-palette="custom"] #enquiryForm .btn-wa:hover, :root[data-palette="custom"] #contact .btn-wa:hover { background: var(--c2-deep); filter: none; }

/* Hero headline: smaller, two lines (client 2026-10-27) */
.hero h1 { font-size: clamp(1.8rem, 3.4vw, 2.75rem); line-height: 1.15; }
.hero h1 .h1-line { display: block; }
@media (min-width: 420px) { .hero h1 .h1-line { white-space: nowrap; } }

/* Hero points on one line where there is room (client 2026-10-27) */
@media (min-width: 900px) {
  .hero-points { flex-wrap: nowrap; gap: 16px; font-size: .84rem; white-space: nowrap; }
  .hero-points li { gap: 6px; }
}

/* Hero orbit: 5 services circling the logo (client 2026-10-27) */
.hero-art .orbit { position: absolute; inset: 0; pointer-events: none; animation: orbit-spin 48s linear infinite; z-index: 2; }
.orbit-item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r, 170px)) rotate(calc(var(--a) * -1)); }
.orbit-card { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; animation: orbit-counter 48s linear infinite; }
.orbit-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #FFFFFF; box-shadow: 0 8px 18px rgba(0, 0, 0, .18), 0 0 0 4px var(--bg, #FFFFFF); }
.orbit-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.orbit-label { font: 700 .72rem/1.15 var(--font-body, inherit); color: var(--text); background: var(--bg, #FFFFFF); padding: 3px 8px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.orbit-item:nth-child(even) .orbit-ico { background: var(--red); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-counter { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
@media (max-width: 480px) { .orbit-ico { width: 36px; height: 36px; } .orbit-ico svg { width: 19px; height: 19px; } .orbit-label { font-size: .62rem; padding: 2px 6px; } }
@media (prefers-reduced-motion: reduce) { .hero-art .orbit, .orbit-card { animation: none; } }

.hero-art .orbit-stage { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; flex: 0 0 auto; }
.hero-art .orbit-stage .halo { position: absolute; inset: 14%; top: 14%; aspect-ratio: auto; }
.hero-art .orbit-stage .hero-logo { width: 50% !important; margin: 0 !important; position: relative; z-index: 1; }
:root[data-theme="dark"] .hero-art .orbit-stage .hero-logo { width: 44% !important; }
.hero-art .orbit-stage + .break { display: none; }
.hero-art { padding-top: 0; gap: 4px; }

/* Services strip: each title and description on one line (client 2026-10-27) */
.pillars .wrap { width: min(100% - 32px, 1340px); }
.pillars-list a { flex-direction: column; text-align: center; gap: 8px; padding: 2px 10px; }
.pl-text b { font: 700 .95rem/1.2 var(--font-head); text-transform: none; letter-spacing: 0; white-space: nowrap; margin-bottom: 2px; }
.pl-text span { font-size: .78rem; white-space: nowrap; }
@media (max-width: 1180px) { .pl-text b { font-size: .95rem; } }
@media (max-width: 1279px) {
  .pillars-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; }
  .pillars-list li { flex: 0 0 auto; scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line) !important; border-radius: 16px; }
  .pillars-list a { padding: 12px 16px; }
}
@media (max-width: 720px) { .pillars-list li { flex: 0 0 auto; } }

/* Services heading and intro each on one line on wider screens (client 2026-10-27) */
#services .section-head { max-width: none; }
@media (min-width: 1000px) {
  #services .section-head h2 { white-space: nowrap; font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
  #services .section-sub { white-space: nowrap; font-size: 1rem; }
}

/* Tighter gap between hero and services (client 2026-10-27) */
.hero { padding-bottom: 32px; }
#services { padding-top: 36px; }
#services .section-head { margin-bottom: 28px; }
@media (max-width: 700px) { .hero { padding-bottom: 24px; } #services { padding-top: 28px; } }
.hero-art .orbit-stage { cursor: pointer; }
.hero-art .orbit-stage:hover .hero-logo { transform: scale(1.03); transition: transform .2s; }
/* Flash fields filled from the EMI calculator */
.just-filled { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 45%, transparent) !important; transition: box-shadow .3s; }
#fNotes { min-height: 150px; }

/* Offers banner (occasion-wise offers from config.offers) */
.offers { background: linear-gradient(100deg, var(--c1-main, var(--gold)), var(--c2-deep, var(--red))); color: #FFFFFF; }
.offers-wrap { position: relative; padding-top: 14px; padding-bottom: 22px; }
.offers-track { display: grid; }
.offer { grid-area: 1 / 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.offer.is-on { opacity: 1; visibility: visible; }
.offer-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.offer-tag { font: 800 .7rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; background: #FFFFFF; color: var(--c1-deep, #0B3D4A); padding: 5px 10px; border-radius: 999px; }
.offer-title { font: 400 1.35rem/1.25 var(--font-head); }
.offer-desc { flex-basis: 100%; font-size: .9rem; opacity: .92; }
.offer-cta { flex: none; background: #FFFFFF; color: var(--c1-deep, #0B3D4A); font-weight: 800; }
.offer-cta:hover { background: #F1F5F9; }
.offer-img img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; }
.offer-img { flex-direction: column; align-items: stretch; }
.offer-img .offer-cta { align-self: flex-end; margin-top: -54px; margin-right: 12px; }
.offers-dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 6px; }
.offer-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255, 255, 255, .5); cursor: pointer; transition: width .2s; }
.offer-dot.is-on { width: 22px; background: #FFFFFF; }
@media (max-width: 720px) {
  .offer { flex-direction: column; align-items: flex-start; gap: 10px; }
  .offer-title { font-size: 1.1rem; }
  .offer-desc { font-size: .82rem; }
  .offer-cta { padding: 8px 16px; font-size: .85rem; }
}
/* Gallery feel: slides glide in, arrows on the sides */
.offer { transform: translateX(24px); transition: opacity .5s, visibility .5s, transform .5s; }
.offer.is-on { transform: none; }
.offers-wrap { padding-left: 44px; padding-right: 44px; }
.offer-nav { position: absolute; top: 50%; transform: translateY(-60%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.15); color: #FFFFFF; font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.offer-nav:hover { background: rgba(255,255,255,.3); }
.offer-prev { left: 0; } .offer-next { right: 0; }
@media (max-width: 720px) { .offers-wrap { padding-left: 20px; padding-right: 20px; } .offer-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .offer { transform: none; } }
/* Image banners */
.offers:has(.offer-img) { background: var(--bg-2, #F1F7F8); }
.offers:has(.offer-img) .offer-nav { background: rgba(0,0,0,.35); border-color: transparent; }
.offers:has(.offer-img) .offer-dot { background: rgba(0,0,0,.25); }
.offers:has(.offer-img) .offer-dot.is-on { background: var(--c1-main, #0F738A); }
.offer-img picture, .offer-img img { display: block; width: 100%; height: auto; max-height: none; border-radius: 16px; }
.offer-img { position: relative; }
.offer-img .offer-cta { position: absolute; right: 24px; bottom: 22px; margin: 0; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
@media (max-width: 720px) { .offer-img .offer-cta { position: static; align-self: flex-start; margin-top: 10px; } }
.offers { overflow: hidden; }
/* No arrows: auto slides + drag/swipe (client 2026-10-27) */
.offer-nav { display: none !important; }
.offers-wrap { padding-left: 20px; padding-right: 20px; }
.offers-track { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.offers-track:active { cursor: grabbing; }
/* Dots removed (client 2026-10-27) */
.offers-dots { display: none !important; }
.offers-wrap { padding-bottom: 14px; }
/* No gap above/below the banner (client 2026-10-27) */
.offers-wrap { padding-top: 0; padding-bottom: 0; }
.offer-img picture, .offer-img img { border-radius: 0; }
@media (max-width: 720px) { .offers-wrap { padding-left: 0; padding-right: 0; padding-bottom: 12px; } .offer-img .offer-cta { margin-left: 20px; } }
@media (max-width: 720px) {
  .offers-wrap { padding-bottom: 0; }
  .offer-img .offer-cta { position: absolute; left: 20px; right: auto; bottom: 14px; margin: 0; padding: 8px 16px; font-size: .82rem; }
}
@media (max-width: 720px) { .offers .offer-img .btn.offer-cta { padding: 6px 14px; min-height: 0; font-size: .78rem; bottom: 10px; } }
/* Faster slide change (1.5s per banner) */
.offer { transition: opacity .35s, visibility .35s, transform .35s; }
/* Slide style: banners sit side by side and the row slides (user picked "Slide", 2026-10-27) */
.offers-view { overflow: hidden; }
.offers-track { display: flex; transition: transform .45s cubic-bezier(.3,.7,.2,1); will-change: transform; }
.offers-track > .offer { grid-area: auto; flex: 0 0 100%; min-width: 0; opacity: 1; visibility: visible; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .offers-track { transition: none; } }
/* Side banners beside the main offers slider */
.offers-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.side-offer { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 18px 16px; border-radius: 16px; min-width: 0; }
.side-gold { background: #F2B233; color: #120C00; }
.side-teal { background: linear-gradient(150deg, var(--c1-main, #0F738A), var(--c1-deep, #0B3D4A)); color: #FFFFFF; }
.side-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--c1-deep, #0B3D4A); }
.side-teal .side-icon { background: rgba(255,255,255,.16); color: #FFFFFF; }
.side-icon svg { width: 22px; height: 22px; }
.side-tag { font: 800 .66rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-top: 4px; }
.side-title { font: 400 1.22rem/1.15 var(--font-head); }
.side-text { font-size: .84rem; line-height: 1.4; opacity: .92; }
.side-cta { margin-top: auto; border: 0; border-radius: 999px; padding: 8px 14px; font: 800 .8rem/1 var(--font-body); cursor: pointer; background: #120C00; color: #FFFFFF; }
.side-teal .side-cta { background: #FFFFFF; color: var(--c1-deep, #0B3D4A); }
.side-cta:hover { filter: brightness(1.1); }
.side-gold::after { content: "%"; position: absolute; right: -6px; bottom: -28px; font: 900 7rem/1 var(--font-head); opacity: .12; pointer-events: none; }
.side-img { padding: 0; }
.side-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.side-img .side-cta { position: absolute; left: 14px; bottom: 14px; }
/* Side banners beside the main banner on laptops and desktops (1280px+); phones and tablets get the popup.
   On laptops the main banner gives up some width so the side banners (at least 200px) fit. */
.offers-row > .side-offer { display: none; }
@media (min-width: 1280px) {
  .offers-wrap:has(.offers-row) { max-width: none; padding: 14px 16px; }
  .offers-row { grid-template-columns: minmax(200px, 1fr) minmax(0, 1140px) minmax(200px, 1fr); gap: 16px; align-items: stretch; }
  .offers-row > .side-offer { display: flex; max-width: 360px; width: 100%; }
  .offers-row > .side-left { justify-self: end; }
  .offers-row > .side-right { justify-self: start; }
  .offers-row .offers-view { border-radius: 16px; }
}
/* Popup version of the side banners (screens under 1280px), once per visit */
.offer-popup { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(8, 20, 26, .62); animation: pop-fade .25s ease-out; }
.offer-popup-card { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 44px 14px 14px; border-radius: 20px; background: var(--bg, #FFFFFF); box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: pop-up .3s ease-out; }
.offer-popup .side-offer { display: flex; min-height: 220px; }
.offer-popup-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0,0,0,.08); color: var(--text, #101418); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.offer-popup-close:hover { background: rgba(0,0,0,.16); }
@media (max-width: 520px) { .offer-popup .side-offer { min-height: 0; } .offer-popup .side-cta { margin-top: 8px; } }
@keyframes pop-fade { from { opacity: 0; } }
@keyframes pop-up { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .offer-popup, .offer-popup-card { animation: none; } }
/* Enquiry details: fields change with the enquiry type */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-grid[hidden], .field-grid .field[hidden] { display: none; }
@media (max-width: 520px) { .field-grid { grid-template-columns: 1fr; } }
/* Tighter gap between the offers banner and the hero (client comment 2026-10-27) */
.hero { padding-top: 28px; }
@media (max-width: 700px) { .hero { padding-top: 18px; } }
/* Shorter banner row: compact side cards so they never make the row taller than the main banner */
@media (min-width: 1280px) {
  .offers-row > .side-offer { padding: 14px 16px; gap: 4px; }
  .offers-row .side-icon { width: 32px; height: 32px; border-radius: 10px; }
  .offers-row .side-icon svg { width: 18px; height: 18px; }
  .offers-row .side-title { font-size: 1.1rem; }
  .offers-row .side-text { font-size: .8rem; line-height: 1.35; }
}
@media (min-width: 721px) { .offers .offer-img .btn.offer-cta { padding: 10px 20px; min-height: 0; font-size: .92rem; bottom: 18px; right: 22px; } }
/* Hero sized to the remaining first screen (set from app.js on wide screens) */
.hero.hero-fit { display: flex; flex-direction: column; justify-content: center; }
.hero.hero-fit > .wrap { width: 100%; }
/* Laptop screens: slightly larger hero text (client comment 2026-10-27) */
@media (min-width: 900px) and (max-width: 1500px) {
  .hero .lede { font-size: 1.22rem; }
  .hero-intro { font-size: 1.04rem; line-height: 1.6; }
  .hero-points { font-size: .9rem; gap: 14px; }
  .hero .btn { font-size: 1rem; }
}
/* Short screens: tighter spacing so everything fits without shrinking the text */
.hero.hero-tight { padding-top: 16px; padding-bottom: 16px; }
.hero.hero-tight .eyebrow { margin-bottom: 8px; }
.hero.hero-tight h1 { margin-bottom: 12px; }
.hero.hero-tight .lede { margin-bottom: 8px; }
.hero.hero-tight .hero-ctas { margin: 18px 0; }
.hero.hero-tight .hero-grid { gap: 32px; }
.hero-grid > .hero-copy { min-width: 0; }
@media (min-width: 900px) and (max-width: 1199px) { .hero-points { flex-wrap: wrap; white-space: normal; gap: 6px 16px; } }
.hero.hero-tight .hero-badge { font-size: .92rem; padding: 8px 16px; }
@media (min-width: 900px) and (max-width: 1439px) { .hero-points { flex-wrap: wrap; white-space: normal; gap: 6px 16px; } }
@media (max-height: 760px) { .hero.hero-tight h1 { font-size: 2.6rem; } .hero.hero-tight .hero-ctas { margin: 14px 0; } }
/* Logo circle sits at the top of its column on laptop/desktop (client comment 2026-10-27) */
.hero.hero-fit .hero-art { align-self: start; }
.hero.hero-fit .hero-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
.hero.hero-fit .hero-badge { margin-top: -22px; position: relative; left: auto; bottom: auto; transform: none; z-index: 3; }
/* Punch line as the hero's opening line, in sentence case (client 2026-10-27) */
.hero .eyebrow.hero-punch { text-transform: none; letter-spacing: .01em; font-size: 1.05rem; font-weight: 700; }
.hero .eyebrow.hero-punch { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .98rem; }
/* Hero buttons a little smaller (client comment 2026-10-27) */
.hero .hero-ctas .btn { font-size: .92rem; padding: 10px 20px; min-height: 0; }
.hero .hero-ctas .btn svg { width: 16px; height: 16px; }
/* Narrow side banners (laptops): keep tag, title and button; the longer text shows from 1500px */
@media (min-width: 1280px) and (max-width: 1699px) {
  .offers-row .offer-img .btn.offer-cta { padding: 8px 16px; font-size: .84rem; bottom: 14px; right: 16px; }
  .offers-row .side-text { display: none; }
  .offers-row > .side-offer { padding: 12px 14px; }
  .offers-row .side-icon { width: 28px; height: 28px; }
  .offers-row .side-title { font-size: 1.02rem; }
  .offers-row .side-cta { padding: 7px 12px; font-size: .74rem; }
  .offers-row .side-gold::after { font-size: 5rem; bottom: -20px; }
}
/* The main banner sets the row height; side banners never stretch it (so the banner shows whole, corners rounded) */
@media (min-width: 1280px) {
  .offers-row { align-items: stretch; }
  .offers-row > .side-offer { contain: size; overflow: hidden; }
  .offers-row .offers-view { align-self: start; }
}
/* Header name bolder and larger (client 2026-10-30). Marcellus has one weight, so a thin stroke adds the boldness. */
.site-header .brand-name { font-size: 1.6rem; -webkit-text-stroke: .6px currentColor; letter-spacing: .01em; }
@media (max-width: 720px) { .site-header .brand-name { font-size: 1.32rem; -webkit-text-stroke: .45px currentColor; } }

/* AgentTech logo credit (standing rule 2026-10-31). This footer is dark in both themes
   (teal in light, black in dark), so it always uses the dark-background logo. */
.agentech img { width: auto; height: 22px; border-radius: 0; vertical-align: middle; }
/* A+T icon + wordmark, whole credit links to agenttech.in (standing rule 2026-10-31, kit in agenttech-brand/footer-credit). */
.at-credit { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; color: inherit; text-decoration: none; }
.at-credit:hover .agentech { opacity: .85; }
.at-credit .agentech { gap: 6px; }
.agentech img:first-child { width: 22px; height: 22px; border-radius: 6px; }

/* Ask Disha chat (replaces the floating WhatsApp button). Always a white panel with dark text, in both themes. */
.disha-fab, .disha, .disha-tip { --dz: var(--c1-main, #0F738A); --dz2: var(--c2-main, #227687); --dz-ink: #15110A; --dz-muted: #5C6670; --dz-line: #E3E8EC; --dz-bg: #F3F7F8; font-family: var(--font-body); }
.disha-fab { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 990; display: grid; justify-items: center; gap: 4px; background: none; border: 0; padding: 0; cursor: pointer; }
.disha-pic { position: relative; width: 64px; height: 64px; border-radius: 50%; background: #fff; padding: 3px; box-shadow: 0 12px 26px -8px rgba(0, 0, 0, .55); transition: transform .2s; animation: disha-in .6s ease both; }
.disha-pic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--dz); opacity: 0; animation: disha-ring 2.8s ease-out infinite; }
.disha-pic img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.disha-dot { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; border-radius: 50%; background: #22A45D; border: 2.5px solid #fff; }
.disha-fab:hover .disha-pic { transform: translateY(-2px) scale(1.04); }
.disha-name { background: var(--dz); color: #fff; font-weight: 700; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); white-space: nowrap; }
.disha-fab[aria-expanded="true"] { display: none; }
@keyframes disha-ring { 0% { transform: scale(.95); opacity: .55; } 70%, 100% { transform: scale(1.25); opacity: 0; } }
@keyframes disha-in { from { transform: translateY(20px); opacity: 0; } }
.disha-tip { position: fixed; right: calc(92px + env(safe-area-inset-right, 0px)); bottom: calc(40px + env(safe-area-inset-bottom, 0px)); z-index: 989; max-width: 230px; background: #fff; color: var(--dz-ink); border-radius: 14px 14px 4px 14px; padding: 10px 30px 10px 13px; font-size: 13.5px; line-height: 1.4; box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .45); animation: dm-in .3s ease both; }
.disha-tip[hidden] { display: none; }
.disha-tip button { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--dz-muted); cursor: pointer; padding: 2px 4px; }
.disha { position: fixed; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 1000; width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 32px)); height: min(600px, calc(100dvh - 32px)); background: #fff; color: var(--dz-ink); border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .08); display: flex; flex-direction: column; overflow: hidden; animation: disha-pop .25s ease both; }
.disha[hidden] { display: none; }
@keyframes disha-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } }
.disha-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: linear-gradient(135deg, var(--dz), var(--dz2)); color: #fff; }
.disha-head img { width: 40px; height: 40px; border-radius: 50%; background: #fff; padding: 2px; flex: none; }
.disha-head div { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.disha-head b { font-family: var(--font-head); font-size: 16px; }
.disha-head small { font-size: 12px; color: rgba(255, 255, 255, .88); display: flex; align-items: center; gap: 6px; }
.disha-head small i { width: 7px; height: 7px; border-radius: 50%; background: #5BE08F; display: inline-block; }
.disha-x { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .16); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.disha-x:hover { background: rgba(255, 255, 255, .28); }
.disha-x svg { width: 18px; height: 18px; }
.disha-log { flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--dz-bg); overscroll-behavior: contain; }
.dm { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.5; animation: dm-in .25s ease both; overflow-wrap: anywhere; }
@keyframes dm-in { from { opacity: 0; transform: translateY(6px); } }
.dm.bot { background: #fff; border: 1px solid var(--dz-line); border-bottom-left-radius: 5px; align-self: flex-start; color: var(--dz-ink); }
.dm.me { background: var(--dz); color: #fff; border-bottom-right-radius: 5px; align-self: flex-end; }
.dm.typing { display: flex; gap: 4px; padding: 13px 14px; }
.dm.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--dz-muted); opacity: .5; animation: dz-blink 1s infinite; }
.dm.typing i:nth-child(2) { animation-delay: .15s; } .dm.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dz-blink { 50% { opacity: 1; transform: translateY(-2px); } }
.dsum { background: #fff; border: 1px solid var(--dz-line); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; display: grid; gap: 6px; align-self: stretch; }
.dsum div { display: grid; grid-template-columns: 105px 1fr; gap: 8px; }
.dsum span { color: var(--dz-muted); }
.dsum b { font-weight: 600; overflow-wrap: anywhere; }
.disha-foot { border-top: 1px solid var(--dz-line); padding: 10px 12px; background: #fff; display: grid; gap: 8px; max-height: 46%; overflow-y: auto; }
.dopts { display: flex; flex-wrap: wrap; gap: 7px; }
.dopt { border: 1.5px solid var(--dz); background: #fff; color: var(--dz); border-radius: 999px; padding: 7px 13px; font: 600 13.5px/1.2 var(--font-body); cursor: pointer; transition: background .15s, color .15s; }
.dopt:hover { background: var(--dz); color: #fff; }
.dopt.ghost { border-color: var(--dz-line); color: var(--dz-muted); }
.dform { display: flex; gap: 8px; }
.dform input { flex: 1; min-width: 0; border: 1.5px solid var(--dz-line); border-radius: 12px; padding: 10px 12px; font: 16px var(--font-body); color: var(--dz-ink); background: #fff; }
.dform input:focus { outline: none; border-color: var(--dz); }
.dform button { border: 0; background: var(--dz); color: #fff; border-radius: 12px; width: 44px; cursor: pointer; display: grid; place-items: center; flex: none; }
.dform button svg { width: 18px; height: 18px; }
.derr { color: #B42318; font-size: 12.5px; margin: 0; }
.dsend { display: grid; gap: 8px; }
.dbtn { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 12px; background: var(--wa, #25D366); color: #05361A; font: 800 15px var(--font-body); cursor: pointer; }
.dbtn svg { width: 20px; height: 20px; }
.dnote { margin: 0; font-size: 12px; color: var(--dz-muted); text-align: center; }
.dlink { border: 0; background: none; color: var(--dz); font: 600 13px var(--font-body); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .disha-pic, .disha-pic::after, .disha, .dm, .disha-tip { animation: none; } }