/* GENERATED by tools/build.mjs from design-system.css + style.css. Do not edit. */
/* =========================================================
   BANIK Advisory — Design system
   ---------------------------------------------------------
   Tokens (CSS custom properties), base typography and shared
   components. Loaded on every page BEFORE style.css.
   Review everything at /styleguide.html.
   Rules: see CLAUDE.md (Brand + UX rules).
   ========================================================= */

/* ---------- 1. Tokens ---------- */
/* Self-hosted fonts (only the weights and alphabets we use). font-display: swap = text shows at once in a fallback font.
   Inter (Latin) for every English heading and body text; Noto Sans Bengali (Bangla letters only) for the Bangla pages —
   Latin characters on Bangla pages fall back to Inter. */
@font-face { font-family: 'Noto Sans Bengali'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/noto-sans-bengali.woff2) format('woff2'); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1, U+11DF0-11DF1; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Fallback with Inter's measurements: text keeps its size while Inter loads, so nothing shifts (CLS) */
@font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica'), local('Roboto'); ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; size-adjust: 107.06%; }

:root {
  /* Colour — brand palette (CLAUDE.md) */
  --color-brand: #c8102e;          /* brand red: primary buttons, accents, icons — used sparingly (AA with white: 5.9:1) */
  --color-brand-dark: #b00e28;     /* small red text and links (AA on white and on #f7f8fa) */
  --color-brand-darker: #960c22;   /* hover / pressed */
  --color-ink: #17212b;            /* headings + body text */
  --color-text-2: #4b5563;         /* secondary text (AA on white: 7.6:1) */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f8fa;
  --color-tint: #fdf2f2;           /* soft red tint */
  --color-whatsapp: #25d366;       /* WhatsApp buttons only */
  --color-whatsapp-ink: #0b3d24;   /* text/icon on WhatsApp green (AA: 7.9:1) */

  /* Colour — supporting (derived) */
  --color-surface: #ffffff;
  --color-surface-2: #f3f4f6;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-on-brand: #ffffff;
  --color-on-brand-dark: #ffffff; /* text on --color-brand-dark backgrounds */
  --color-focus: #c8102e;
  --color-error: #b91c1c;          /* AA on white: 6.5:1 */
  --color-error-bg: #fef2f2;
  --color-success: #15803d;        /* AA on white: 5.0:1 */
  --color-success-bg: #f0fdf4;
  --color-info-bg: #f3f4f6;

  /* Typography */
  --font-heading: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-bangla: "Noto Sans Bengali", "Inter", "Inter Fallback", system-ui, sans-serif;
  --fs-body: 1.0625rem;           /* 17px; 18px from 768px. rem so the visitor's text-size setting scales it */
  --fs-small: 0.9375rem;           /* 15px — meta text only */
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);   /* 32 → 52px */
  --fs-h2: clamp(1.625rem, 1.45rem + .9vw, 2.125rem); /* 26 → 34px */
  --fs-h3: clamp(1.1875rem, 1.12rem + .3vw, 1.375rem); /* 19 → 22px */
  --lh-body: 1.65;
  --lh-heading: 1.2;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Layout */
  --content-max: 1200px;
  --gutter: 20px;                  /* 20px on phones, 32px from 768px */
  --section-y: 44px;               /* 44px on phones, 80px from 1024px */

  /* Shape & depth */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 33, 43, .05);
  --shadow-md: 0 4px 16px rgba(23, 33, 43, .07);
  --shadow-lg: 0 16px 40px rgba(17, 24, 39, .12);

  /* Controls */
  --control-h: 48px;               /* buttons, inputs, tap targets */
  --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 6px var(--color-focus);

  /* Motion (gentle; disabled under prefers-reduced-motion) */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .15s;
  --dur: .3s;
  --dur-slow: .6s;

  color-scheme: light;
}

@media (min-width: 768px) {
  :root { --fs-body: 1.125rem; --gutter: 32px; }
}
@media (min-width: 1024px) {
  :root { --section-y: 80px; }
}

/* Dark theme (optional toggle) — same roles, dark values */
:root[data-theme="dark"] {
  /* Dark palette: deep neutral background, lifted red for accents. Buttons keep #c8102e (white text, AA). */
  --color-brand: #ff4b52;
  --color-brand-dark: #ff7a7f;      /* red text/links on dark (AA on #0f1115 and #171a21) */
  --color-brand-darker: #ff9a9e;
  --color-ink: #e5e7eb;
  --color-text-2: #9ca3af;
  --color-bg: #0f1115;
  --color-bg-alt: #13161c;
  --color-tint: rgba(255, 75, 82, .12);
  --color-surface: #171a21;
  --color-surface-2: #1e222b;
  --color-border: #2a2f3a;
  --color-border-strong: #3a404d;
  --color-focus: #ff7a7f;
  --color-on-brand-dark: #0f1115;
  --color-error: #fca5a5;
  --color-error-bg: rgba(248, 113, 113, .12);
  --color-success: #86efac;
  --color-success-bg: rgba(74, 222, 128, .12);
  --color-info-bg: #1e222b;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
/* Smooth 200ms colour change when the visitor switches theme (off under reduced motion, see below) */
html.theme-switching, html.theme-switching * { transition: background-color .2s ease, color .2s ease, border-color .2s ease, fill .2s ease, stroke .2s ease !important; }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-bg);
}
:lang(bn) { font-family: var(--font-bangla); }

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
  letter-spacing: -.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
:lang(bn) h1, :lang(bn) h2, :lang(bn) h3,
h1 :lang(bn), h2 :lang(bn), h3 :lang(bn) { font-family: var(--font-bangla); letter-spacing: 0; }

p { margin: 0 0 var(--space-4); }
small, .text-small { font-size: var(--fs-small); }
.text-muted { color: var(--color-text-2); }

:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

.container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- 3. Components ---------- */

/* Buttons — min 48px tall, visible focus ring */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: var(--space-3) var(--space-5);
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:lang(bn), .btn :lang(bn) { font-family: var(--font-bangla); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-primary { background: #c8102e; color: #fff; box-shadow: var(--shadow-sm); } /* brand CTA red in both themes (AA with white: 5.9:1) */
.btn-primary:hover { background: var(--color-brand-darker); box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .btn-primary:hover { background: #e01f3a; }

.btn-secondary, .btn-outline { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-border-strong); }
.btn-secondary:hover, .btn-outline:hover { border-color: var(--color-brand-dark); color: var(--color-brand-dark); }

.btn-whatsapp { background: var(--color-whatsapp); color: var(--color-whatsapp-ink); }
.btn-whatsapp:hover { background: #1ebe5b; }

.btn-ghost { background: none; color: var(--color-brand-dark); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { gap: var(--space-3); }
.btn-white { background: #fff; color: var(--color-brand-darker); }
.btn-white:hover { background: var(--color-tint); }
.btn-sm { padding: var(--space-2) var(--space-4); font-size: .9375rem; } /* still 48px tall */
.btn-block { width: 100%; }

/* Text link */
.link {
  color: var(--color-brand-dark); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.link:hover { color: var(--color-brand-darker); text-decoration-thickness: 2px; }

/* Card */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-5); box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.card, .card.is-interactive { display: block; color: inherit; text-decoration: none; }
a.card:hover, .card.is-interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.card > :last-child { margin-bottom: 0; }
@media (min-width: 768px) { .card { padding: 28px; } }

/* Badge / chip */
.badge, .tag {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-tint); color: var(--color-brand-dark);
  font-size: .8125rem; font-weight: 600; line-height: 1.6;
}
.badge-neutral { background: var(--color-surface-2); color: var(--color-text-2); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }

/* Callout box */
.callout {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--color-info-bg); border-left: 4px solid var(--color-text-2); color: var(--color-ink);
}
.callout svg { width: 22px; height: 22px; flex: none; margin-top: 3px; }
.callout > div > :last-child { margin-bottom: 0; }
.callout-title { display: block; font-weight: 700; margin-bottom: var(--space-1); }
.callout-tip { background: var(--color-tint); border-left-color: var(--color-brand); }
.callout-success { background: var(--color-success-bg); border-left-color: var(--color-success); }
.callout-warning { background: #fffbeb; border-left-color: #b45309; }
:root[data-theme="dark"] .callout-warning { background: rgba(245, 158, 11, .12); }

/* Accordion — native <details>, works without JavaScript */
.accordion { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; }
.accordion details + details { border-top: 1px solid var(--color-border); }
.accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--control-h); padding: var(--space-4) var(--space-5);
  font-weight: 600; cursor: pointer; list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform var(--dur) var(--ease);
}
.accordion details[open] summary::after { transform: rotate(-135deg); }
.accordion summary:hover { color: var(--color-brand-dark); }
.accordion .accordion-body { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-2); }
.accordion details[open] .accordion-body { animation: ds-fade-in var(--dur) var(--ease); }

/* Tabs */
.tab-list { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--color-border); }
.tab-list [role="tab"] { min-height: var(--control-h); padding: 0 var(--space-4); border: 0; background: none; font: inherit; font-weight: 600; color: var(--color-text-2); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab-list [role="tab"][aria-selected="true"] { color: var(--color-brand-dark); border-bottom-color: var(--color-brand); }
.tab-panel { padding: var(--space-4) 0; }

/* Form field: label + help text + error state */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.field-label { font-weight: 600; color: var(--color-ink); }
.field-label .req { color: var(--color-brand-dark); }
.field-help { font-size: var(--fs-small); color: var(--color-text-2); margin: 0; }
.field-input {
  width: 100%; min-height: var(--control-h); padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-ink);
  font: inherit; font-size: 1rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea.field-input { min-height: 120px; resize: vertical; }
.field-input:focus-visible, .field-input:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px var(--color-tint); }
.field-error { display: none; align-items: center; gap: var(--space-2); font-size: var(--fs-small); font-weight: 600; color: var(--color-error); margin: 0; }
.field.is-invalid .field-input { border-color: var(--color-error); background: var(--color-error-bg); }
.field.is-invalid .field-error { display: flex; }

/* ---------- 4. Motion (gentle) ---------- */
@keyframes ds-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   BANIK Advisory — Page styles
   Tokens, base typography and shared components live in
   design-system.css (loaded first). This file holds page/section
   styles. Older variable names below are aliases of the tokens.
   ========================================================= */

:root {
  --brand: var(--color-brand);              /* backgrounds, borders, icons */
  --brand-text: var(--color-brand-dark);    /* red TEXT (AA contrast) */
  --brand-600: var(--color-brand-dark);
  --brand-700: var(--color-brand-darker);
  --brand-soft: var(--color-tint);
  --brand-gray: #6b7280;

  --bg: var(--color-bg);
  --bg-alt: var(--color-bg-alt);
  --surface: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --border: var(--color-border);
  --text: var(--color-ink);
  --text-2: var(--color-text-2);
  --muted: var(--color-text-2);
  --on-brand: var(--color-on-brand);

  --shadow: var(--shadow-md);

  --radius: var(--radius-md);
  --radius-lg: var(--radius-md);
  --container: var(--content-max);
  --header-h: 72px;

  --font-en: var(--font-body);
  --font-bn: var(--font-bangla);
  --font-brand: var(--font-body);
}
:root[data-theme="dark"] {
  --brand-gray: #a3a3a8;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { transition: background-color .25s ease, color .25s ease; overflow-x: hidden; }

/* Each page is built in one language (tools/build.mjs) — no hiding needed */

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h4 { line-height: 1.3; margin: 0 0 .5em; color: var(--text); font-weight: 700; }
p { color: var(--text-2); }

.section { padding: var(--section-y) 0; }
.section-alt { background: var(--bg-alt); }

.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { font-size: 1.05rem; }
.section-foot { margin-top: 40px; text-align: center; }

/* ---------- Header (shared; built by headerHTML() in app.js) ---------- */
.site-header {
  /* The box keeps one height (the page never moves); only the bar drawn by ::before and the contents shrink.
     A sticky header that changed its own height moved the page and made the bar shake. */
  --hh: 76px; --hh-compact: 62px;
  position: sticky; top: 0; z-index: 50;
  height: var(--hh);
  pointer-events: none;
}
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: var(--hh);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: height .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease, border-color .28s ease;
}
.site-header.lifted::before { border-bottom-color: var(--border); box-shadow: var(--shadow-md); }
.site-header.compact::before { height: var(--hh-compact); }
.site-header .mobile-menu { pointer-events: auto; }
.site-header .header-inner { pointer-events: auto; transition: height .28s cubic-bezier(.2, .7, .2, 1); }
.site-header.compact .header-inner { height: var(--hh-compact); }
.header-inner { height: var(--hh, 100%); display: flex; align-items: center; gap: var(--space-4); }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: var(--control-h); min-width: var(--control-h); }
.brand img { width: 42px; height: 42px; transition: width .28s cubic-bezier(.2, .7, .2, 1), height .28s cubic-bezier(.2, .7, .2, 1); }
.site-header.compact .brand img { width: 36px; height: 36px; }
.brand-text { display: flex; flex-direction: column; font-family: var(--font-brand); color: var(--brand-gray); line-height: 1; }
.brand-text .b1 { font-size: 1.42rem; font-weight: 400; letter-spacing: .04em; }
.brand-text .b2 { font-size: .74rem; letter-spacing: .3em; margin-top: 4px; }

/* Desktop menu with dropdowns ("mega-menu lite") */
.main-nav { margin-left: auto; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: var(--control-h); padding: 0 var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: none; white-space: nowrap; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 1rem; color: var(--text-2);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-link:hover, .has-dd.is-open > .nav-link { color: var(--brand-text); background: var(--brand-soft); }
.nav-link[aria-current="page"], .has-dd.is-current > .nav-link { color: var(--brand-text); box-shadow: inset 0 -2px 0 var(--brand); }
.dd-chev { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.has-dd.is-open .dd-chev { transform: rotate(180deg); }
.dd-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); z-index: 60;
  width: 360px; padding: var(--space-3); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* hover bridge */
.dd-panel.dd-wide { width: 640px; }
.has-dd.is-open .dd-panel { display: block; animation: ds-fade-in var(--dur) var(--ease); }
html:not(.js) .has-dd:hover .dd-panel, html:not(.js) .has-dd:focus-within .dd-panel { display: block; }
.dd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dd-wide .dd-list { grid-template-columns: 1fr 1fr; }
.dd-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-sm); color: var(--text); }
.dd-item:hover, .dd-item:focus-visible { background: var(--surface-2); }
.dd-item .ico-box { width: 36px; height: 36px; flex: none; border-radius: 10px; }
.dd-item .ico-box svg { width: 18px; height: 18px; }
.dd-text { display: grid; gap: 2px; }
.dd-text strong { font-size: .9375rem; line-height: 1.35; color: var(--text); }
.dd-text span { font-size: .8125rem; line-height: 1.45; color: var(--text-2); font-weight: 400; }
.dd-all { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-h); margin-top: var(--space-2); padding: 0 var(--space-3);
  border-top: 1px solid var(--border); font-weight: 600; color: var(--brand-text); }
.dd-all svg { width: 18px; height: 18px; }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }
.header-cta { white-space: nowrap; }
.header-cta .cta-short { display: none; }

/* Theme toggle (sun/moon) */
.theme-toggle.header-theme {
  display: inline-grid; place-items: center; width: var(--control-h); height: var(--control-h); padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-2);
}
.theme-toggle.header-theme:hover { color: var(--brand-text); }
.theme-toggle.header-theme svg { width: 20px; height: 20px; }
.theme-toggle.header-theme .sun { display: none; }
:root[data-theme="dark"] .theme-toggle.header-theme .sun { display: block; }
:root[data-theme="dark"] .theme-toggle.header-theme .moon { display: none; }

/* Language toggle: বাংলা | EN */
.lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.lang-toggle a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 46px; padding: 0 12px; border-radius: var(--radius-sm);
  font-size: .9375rem; font-weight: 600; color: var(--text-2);
}
.lang-toggle a:first-child { font-family: var(--font-bangla); }
.lang-toggle a:hover { color: var(--brand-text); }
.lang-toggle a[aria-current="true"] { color: var(--brand-text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.lang-sep { color: var(--border); font-weight: 400; }

/* Menu button (< 1024px) */
.menu-btn {
  display: none; align-items: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  font-weight: 600; color: var(--text);
}
.menu-btn svg { width: 22px; height: 22px; }

/* Full-screen menu with accordion sub-menus (< 1024px) */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 200; flex-direction: column;
  background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu:target, .mobile-menu.is-open { display: flex; animation: ds-fade-in var(--dur) var(--ease); }
html.menu-open, html.menu-open body { overflow: hidden; }
.mm-top { display: flex; align-items: center; justify-content: space-between; min-height: 76px; border-bottom: 1px solid var(--border); }
.mm-close {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-4);
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-weight: 600; color: var(--text);
}
.mm-close svg { width: 22px; height: 22px; }
.mm-links { list-style: none; margin: 0; padding: var(--space-3) 0; }
.mm-link {
  display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 0 var(--space-2);
  border-bottom: 1px solid var(--border); font-size: 1.25rem; font-weight: 600; color: var(--text); cursor: pointer; list-style: none;
}
.mm-link::-webkit-details-marker { display: none; }
.mm-link svg { width: 20px; height: 20px; color: var(--muted); }
.mm-acc[open] > .mm-link .dd-chev { transform: rotate(180deg); }
.mm-link[aria-current="page"] { color: var(--brand-text); box-shadow: inset 4px 0 0 var(--brand); padding-left: var(--space-4); }
.mm-sub { list-style: none; margin: 0; padding: var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--border); }
.mm-sub a { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 0 var(--space-3); font-size: 1.0625rem; font-weight: 600; color: var(--text); border-radius: var(--radius-sm); }
.mm-sub a:hover { background: var(--surface-2); }
.mm-sub a svg { width: 20px; height: 20px; color: var(--brand-text); flex: none; }
.mm-sub .mm-all { justify-content: space-between; color: var(--brand-text); }
.mm-label { margin: 0 0 var(--space-2); font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.mm-lang { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.lang-toggle-lg a { min-height: 56px; min-width: 88px; font-size: 1.0625rem; }
.mm-bottom { margin-top: auto; display: grid; gap: var(--space-3); padding-top: var(--space-5); padding-bottom: var(--space-6); border-top: 1px solid var(--border); }
.mm-bottom .btn { min-height: 56px; font-size: 1.0625rem; }

@media (max-width: 1279.98px) and (min-width: 1024px) {
  .brand-text .b1 { font-size: 1.2rem; }
  .brand-text .b2 { font-size: .64rem; letter-spacing: .26em; }
  .nav-link { padding: 0 var(--space-2); font-size: .9375rem; }
  .header-cta .cta-long { display: none; }
  .header-cta .cta-short { display: inline; }
}
@media (max-width: 1023.98px) {
  .main-nav, .header-lang { display: none; }
  .menu-btn { display: inline-flex; }
  .header-actions { margin-left: auto; }
  .header-cta .cta-long { display: none; }
  .header-cta .cta-short { display: inline; }
  .site-header { --hh: 68px; --hh-compact: 58px; }
}
@media (min-width: 1024px) {
  .mobile-menu, .mobile-menu:target { display: none !important; }
}
@media (max-width: 420px) {
  /* Keep the full logo (mark + BANIK ADVISORY) on phones, just smaller */
  .brand { gap: 7px; }
  .brand img, .site-header.compact .brand img { width: 34px; height: 34px; }
  .brand-text .b1 { font-size: 1.08rem; }
  .brand-text .b2 { font-size: .56rem; letter-spacing: .24em; margin-top: 3px; }
  .header-actions { gap: 6px; }
  .theme-toggle.header-theme { width: 44px; height: 44px; }
  .header-cta, .menu-btn { padding: 0 var(--space-3); }
  .menu-btn span { display: none; }
}
/* Very narrow phones (320px): the Bangla "বুক করুন" label is wider than "Book" — keep the header inside the screen */
@media (max-width: 359.98px) {
  .header-actions { gap: 4px; }
  .header-cta, .menu-btn { padding: 0 8px; }
}

/* ---------- Home hero ---------- */
.hero { position: relative; padding: var(--space-7) 0 var(--space-8); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(800px 380px at 90% -10%, var(--brand-soft), transparent 70%);
}
.hero-grid { display: grid; grid-template-columns: 55fr 45fr; gap: var(--space-7); align-items: center; }
.hero-grid > * { min-width: 0; }
.hero h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-4); max-width: 16ch; }
.hero-lead { font-size: 1.125rem; color: var(--text-2); max-width: 34rem; margin: 0 0 var(--space-6); }
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-5); }
.hero-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); color: var(--text-2); font-size: .9375rem; font-weight: 600; }
.hero-trust li { display: inline-flex; align-items: center; gap: var(--space-2); }
.hero-trust svg { width: 18px; height: 18px; color: var(--color-success); flex: none; }

.hero-media { position: relative; }
.hero-photo { margin: 0 auto; max-width: 380px; position: relative; }
.hero-photo img {
  width: 100%; height: auto; aspect-ratio: 449 / 567; object-fit: cover; object-position: center top;
  border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.hero-photo figcaption {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-md);
}
.hero-photo figcaption strong { display: block; color: var(--text); }
.hero-photo figcaption span { font-size: var(--fs-small); color: var(--muted); }

/* "Choose what you need" — static grid: 1 / 2 / 3 columns */
.needs-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .needs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .needs-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.need-card { display: flex; flex-direction: column; gap: var(--space-2); }
.need-card .ico-box { margin-bottom: var(--space-2); }
.need-card h3 { margin: 0; }
.need-card p { margin: 0; color: var(--text-2); }
.need-foot { margin-top: auto; padding-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; border-top: 1px dashed var(--border); }
.need-price { font-weight: 700; color: var(--text); }
.need-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h); }
.need-link svg { width: 18px; height: 18px; }
.needs-more { text-align: center; margin: var(--space-6) 0 0; }
.needs-more .link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); }
.needs-more svg { width: 18px; height: 18px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding: 64px 0 56px; background: var(--bg-alt); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.page-hero h1 { font-size: var(--fs-h1); margin-bottom: 10px; }
.page-hero p { max-width: 640px; font-size: 1.06rem; margin: 0; }
.page-hero .bg-mark { position: absolute; right: 5%; top: 50%; width: clamp(180px, 20vw, 260px); height: auto; aspect-ratio: 1 / 1; object-fit: contain; transform: translateY(-50%); opacity: .06; pointer-events: none; user-select: none; }
@media (max-width: 767.98px) { .page-hero .bg-mark { right: -40px; width: 170px; opacity: .045; } }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--control-h); min-width: var(--control-h); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--brand-text); }

/* ---------- Icon box ---------- */
.ico-box {
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-text);
}
.ico-box svg { width: 24px; height: 24px; }

/* ---------- Services ---------- */
/* Services page — chips, cards, finder callout */
.page-hero-short { padding: var(--space-7) 0 var(--space-6); }
.svc-section { padding-top: var(--space-6); }
.svc-filters { display: none; margin-bottom: var(--space-4); }
.filter-label { display: none; margin: 0 0 var(--space-2); font-size: var(--fs-small); font-weight: 700; color: var(--text-2); }
.js .filter-label { display: block; }
.svc-plans-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); background: var(--color-tint); border-radius: var(--radius-sm); }
.svc-plans-line svg { width: 20px; height: 20px; color: var(--brand-text); }
.js .svc-filters { display: flex; }
.svc-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.svc-card { display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
.svc-card:target { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-tint); }
.svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.svc-name { font-size: var(--fs-h3); margin: 0; }
.svc-summary { margin: 0; color: var(--text-2); }
.svc-facts { list-style: none; margin: auto 0 0; padding: var(--space-3) 0 0; border-top: 1px dashed var(--border); display: grid; gap: var(--space-1); }
.svc-facts li { display: flex; align-items: center; gap: var(--space-2); color: var(--text-2); }
.svc-facts strong { color: var(--text); }
.svc-facts svg { width: 18px; height: 18px; color: var(--brand-text); flex: none; }
.svc-btn { align-self: stretch; justify-content: center; }
.svc-finder { grid-column: 1 / -1; align-items: center; }
.svc-finder p { margin: 0; font-weight: 600; }
.svc-finder .link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); }
.svc-finder .link svg { width: 18px; height: 18px; }
/* Finder callout sits after the first row: cards after row 1 move behind it (1 / 2 / 3 columns) */
.svc-card:nth-child(n+2) { order: 2; }
.svc-finder { order: 1; }
@media (min-width: 640px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card:nth-child(n+2) { order: 0; }
  .svc-card:nth-child(n+3) { order: 2; }
}
@media (min-width: 1024px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
  .svc-card:nth-child(n+3) { order: 0; }
  .svc-card:nth-child(n+4) { order: 2; }
}
.svc-grid.is-filtered .svc-card { order: 0; }
.svc-grid.is-filtered .svc-finder { order: 3; }

/* ---------- Videos ---------- */
.video-toolbar { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-btn {
  min-height: var(--control-h); padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); font-size: .9rem; font-weight: 500; color: var(--text-2);
  transition: all .2s;
}
.filter-btn:hover { border-color: var(--brand-text); color: var(--brand-text); }
.filter-btn[aria-pressed="true"] { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: var(--color-on-brand-dark); }
.search-box { position: relative; min-width: 260px; flex: 0 1 320px; }
.search-box svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); }
.search-box input {
  width: 100%; padding: 11px 16px 11px 42px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: .93rem;
}
.search-box input:focus { outline: none; border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--brand-soft); }

.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.video-card {
  display: flex; flex-direction: column; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; padding: 0;
  transition: transform .2s ease, box-shadow .2s ease;
}
.video-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.video-thumb {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, #2a0d0f, #ed1c24);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.video-card:hover .video-thumb img { transform: scale(1.04); }
.video-thumb .play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(237, 28, 36, .95); color: #fff;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .35); transition: transform .2s ease;
}
.video-thumb .play svg { width: 26px; height: 26px; margin-left: 3px; }
.video-card:hover .play { transform: scale(1.08); }
.video-thumb.placeholder { display: grid; place-items: center; }
.video-thumb.placeholder .ph {
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff;
  font-size: .85rem; font-weight: 600; letter-spacing: .04em;
}
.video-thumb.placeholder .ph img { width: 56px; height: 56px; filter: brightness(0) invert(1); opacity: .9; transition: none; }
.video-thumb.placeholder .play { display: none; }
.video-body { padding: 16px 18px 20px; }
.video-body h3, .video-body h2 { font-size: 1rem; margin: 8px 0 6px; line-height: 1.45; }
.video-body .date { font-size: .82rem; color: var(--muted); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); grid-column: 1 / -1; }

/* Video modal */
.modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(8, 8, 10, .82); backdrop-filter: blur(4px);
}
.modal.open { display: flex; }
.modal-inner { width: min(1000px, 100%); position: relative; }
.modal-frame { aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); }
.modal-frame iframe { width: 100%; height: 100%; border: 0; }
.modal-close {
  position: absolute; top: -50px; right: 0;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center;
}
.modal-close:hover { background: var(--brand); }
.modal-close svg { width: 20px; height: 20px; }
.modal-title { color: #fff; margin-top: 14px; font-weight: 600; }

/* ---------- Founder ---------- */
.founder { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; }
.founder-photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--surface-2), var(--brand-soft));
  border: 1px solid var(--border); display: grid; place-items: center;
}
.founder-photo img.photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.founder-photo img.mark { width: 42%; opacity: .9; }
.founder-photo .name-plate {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 16px; box-shadow: var(--shadow);
}
.name-plate strong { display: block; font-size: 1.05rem; color: var(--text); }
.name-plate span { font-size: .85rem; color: var(--muted); }
.checks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.checks li { display: flex; gap: 10px; font-size: .95rem; color: var(--text-2); }
.checks svg { width: 20px; height: 20px; color: var(--brand-text); flex: none; margin-top: 3px; }

/* Profile page */
.profile-grid { display: grid; grid-template-columns: 360px 1fr; gap: 48px; align-items: start; }
.profile-side { position: sticky; top: calc(var(--header-h) + 24px); }
.profile-side .founder-photo { aspect-ratio: 4 / 5; margin-bottom: 18px; }
.info-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.info-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .93rem; color: var(--text-2); word-break: break-word; }
.info-list svg { width: 18px; height: 18px; color: var(--brand-text); flex: none; margin-top: 4px; }
.info-list a { display: inline-flex; align-items: center; min-height: var(--control-h); }
.info-list a:hover { color: var(--brand-text); }
.profile-block { margin-bottom: 44px; }
.profile-block h2 { font-size: 1.45rem; display: flex; align-items: center; gap: 10px; }
.profile-block h2::before { content: ""; width: 6px; height: 24px; border-radius: 4px; background: var(--brand); }
.skill-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.skill-tags span { padding: 8px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: .9rem; font-weight: 500; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border); }
.timeline li { position: relative; padding: 0 0 26px 26px; }
.timeline li::before {
  content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--brand);
}
.timeline .when { font-size: .82rem; font-weight: 600; color: var(--brand-text); }
.timeline h3 { font-size: 1.05rem; margin: 2px 0 4px; }
.timeline p { margin: 0; font-size: .93rem; }
.note {
  font-size: .85rem; color: var(--muted); background: var(--surface-2);
  border: 1px dashed var(--border); padding: 10px 14px; border-radius: 10px;
}

/* Profile hero */
.profile-hero .role { font-size: 1.12rem; font-weight: 600; color: var(--text); margin: 0 0 4px; }
.profile-hero .subtitle { margin: 0 0 14px; }
.profile-hero .tagline {
  display: inline-block; margin: 0; padding: 8px 16px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-text); font-weight: 600; font-size: .95rem;
}

/* Highlights */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.stat {
  padding: 20px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
}
.stat strong { display: block; font-family: var(--font-en); font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--brand-text); margin-bottom: 6px; }
.stat strong.word { font-size: 1.15rem; line-height: 1.3; }
.stat span { font-size: .9rem; color: var(--text-2); line-height: 1.45; display: block; }
.stats-note { font-size: .82rem; color: var(--muted); margin: 12px 0 0; }

.profile-block h3.sub { font-size: 1.02rem; margin: 26px 0 12px; color: var(--text-2); font-weight: 600; }
.profile-block h3.sub:first-of-type { margin-top: 6px; }

/* Credentials */
.cred-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cred-list li {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.cred-list li > svg { width: 20px; height: 20px; color: var(--brand-text); flex: none; margin-top: 3px; }
.cred-list strong { display: block; font-size: .95rem; line-height: 1.4; color: var(--text); }
.cred-list small { display: block; font-size: .84rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }

.timeline .org { font-weight: 500; color: var(--text-2); margin-bottom: 6px; }
.timeline .prev { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.timeline .prev .when { display: block; margin-bottom: 2px; }
.timeline .prev strong { font-size: .95rem; color: var(--text); }

/* Commitments */
.commit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.commit {
  display: flex; gap: 14px; align-items: flex-start; padding: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.commit .ico-box { width: 44px; height: 44px; flex: none; }
.commit .ico-box svg { width: 22px; height: 22px; }
.commit h3 { font-size: 1rem; margin: 0 0 4px; }
.commit p { font-size: .92rem; margin: 0; }

/* ---------- Useful links ---------- */
.links-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.links-grid > li { display: flex; }
.links-grid .link-card { flex: 1; align-items: flex-start; }
.link-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .2s, transform .2s;
}
.link-card:hover { border-color: var(--brand-text); transform: translateY(-2px); }
.link-card .ico-box { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.link-card .ico-box svg { width: 20px; height: 20px; }
.link-card strong { display: block; font-size: .95rem; line-height: 1.3; color: var(--text); }
.link-card small { font-size: .78rem; color: var(--muted); font-family: var(--font-en); }
.link-desc { display: block; margin: var(--space-1) 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-2); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #c4121a 0%, #ed1c24 60%, #ff4a50 100%);
  border-radius: var(--radius-lg); padding: 48px 52px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; font-size: var(--fs-h2); margin-bottom: 6px; }
.cta-band p { color: rgba(255, 255, 255, .88); margin: 0; max-width: 560px; }
.cta-band .bg-mark { position: absolute; right: -30px; bottom: -60px; width: 220px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; opacity: .14; filter: brightness(0) invert(1); pointer-events: none; }
.cta-band .actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }
.btn-outline-white { border-color: rgba(255, 255, 255, .6); color: #fff; }
.btn-outline-white:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* ---------- Contact ---------- */

/* ---------- Order page ---------- */

/* ---------- Footer (shared; built by footerHTML() in app.js) ---------- */
.site-footer { background: #121317; color: #c4c6cc; padding: var(--space-8) 0 0; font-size: 1rem; }
:root[data-theme="dark"] .site-footer { background: #08090b; border-top: 1px solid var(--border); }
.site-footer p { color: #b0b3ba; }
.site-footer a { color: #e5e7eb; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .brand { margin-bottom: var(--space-4); }
.site-footer .brand-text { color: #d0d0d4; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1.1fr 1fr 1fr 1.2fr; gap: var(--space-6); padding-bottom: var(--space-7); }
@media (max-width: 1199.98px) and (min-width: 641px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-about { grid-column: 1 / -1; } }
.footer-h {
  font-family: var(--font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; margin: 0 0 var(--space-3);
}
:lang(bn) .footer-h { font-family: var(--font-bangla); letter-spacing: 0; font-size: 1rem; text-transform: none; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-col a, .footer-contact a, .footer-social a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); min-width: var(--control-h); }
.footer-more { font-weight: 600; }
.footer-promise { display: flex; gap: var(--space-2); align-items: center; font-weight: 600; color: #e5e7eb !important; }
.footer-promise svg { width: 18px; height: 18px; color: var(--color-brand); flex: none; }
.footer-social { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: var(--space-2) !important; }   /* Facebook, LinkedIn, YouTube — one under another */
.footer-social svg { width: 18px; height: 18px; }
.footer-contact li { display: flex; gap: var(--space-3); align-items: flex-start; }
.footer-contact li > svg { width: 18px; height: 18px; color: var(--color-brand); flex: none; margin-top: 13px; }
.footer-contact li > span { padding: 10px 0; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1); padding: var(--space-4) 0;
  display: flex; align-items: center; gap: var(--space-3) var(--space-5); flex-wrap: wrap; font-size: .9375rem; color: #a3a6ad;
}
.footer-privacy { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 640px) {
  /* Stack, Contact first */
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-contact-col { order: -1; }
}

/* Floating WhatsApp (every page; built in footerHTML) — no repeating motion */
.fab-wa {
  position: fixed; z-index: 40;
  right: max(20px, env(safe-area-inset-right));
  bottom: calc(20px + var(--fab-lift, 0px) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none !important;
  transition: bottom var(--dur) var(--ease);
}
.fab-circle {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--color-whatsapp); color: var(--color-whatsapp-ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.fab-circle svg { width: 30px; height: 30px; }
.fab-label {
  display: none; padding: 8px 14px; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  font-size: .9375rem; font-weight: 600; box-shadow: var(--shadow-md); white-space: nowrap;
}
.fab-wa:hover .fab-circle { background: #1ebe5b; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); }
.fab-wa:hover .fab-label { border-color: var(--color-whatsapp); }
.fab-wa:focus-visible { box-shadow: none; }
.fab-wa:focus-visible .fab-circle { box-shadow: var(--focus-ring); }
@media (min-width: 900px) { .fab-label { display: inline-block; } }

/* Reveal on scroll */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0s !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .links-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-grid { grid-template-columns: 300px 1fr; gap: 36px; }
}

@media (max-width: 960px) {
  .founder { grid-template-columns: 1fr; gap: 40px; }
  .video-grid { grid-template-columns: repeat(2, 1fr); }
  .founder-photo { max-width: 420px; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-side { position: static; max-width: 420px; }
}

@media (max-width: 760px) {
  .cred-list, .commit-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .video-grid, .links-grid, .checks { grid-template-columns: 1fr; }
  .cta-band { padding: 36px 24px; }
  .search-box { min-width: 0; flex: 1 1 100%; }
  .hero-cta .btn { flex: 1 1 auto; }
}


/* ---------- Blog ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.blog-cover { aspect-ratio: 1200 / 630; overflow: hidden; background: var(--surface-2); }
.blog-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-cover img { transform: scale(1.04); }
.blog-cover.placeholder { display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
.blog-cover.placeholder img { width: 64px; height: 64px; object-fit: contain; opacity: .85; }
.blog-card:hover .blog-cover.placeholder img { transform: none; }
.blog-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.blog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.blog-meta .date { font-size: .82rem; color: var(--muted); }
.blog-body h3 { font-size: 1.12rem; line-height: 1.45; margin-bottom: 8px; }
.blog-body p { font-size: .93rem; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.read-more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--brand-text); }
.read-more svg { width: 16px; height: 16px; transition: transform .2s; }
.blog-card:hover .read-more svg { transform: translateX(3px); }

/* Single post */
.post-section { padding-top: 48px; }
.post { max-width: 820px; }
.post-head h1 { font-size: var(--fs-h1); margin: 6px 0 24px; }
.post-cover { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--border); margin-bottom: 32px; }
.lang-note { font-size: .88rem; color: var(--muted); background: var(--surface-2); border-left: 3px solid var(--brand); padding: 10px 14px; border-radius: 8px; }
.prose { font-size: 1.06rem; line-height: 1.85; color: var(--text-2); overflow-wrap: break-word; }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1em; }
.prose h2 { font-size: 1.5rem; margin: 1.6em 0 .6em; }
.prose h3 { font-size: 1.2rem; margin: 1.4em 0 .5em; }
.prose a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .4em; }
.prose li[data-list="bullet"] { list-style-type: disc; }
.prose li[data-list="ordered"] { list-style-type: decimal; }
.prose blockquote { margin: 1.4em 0; padding: 14px 20px; border-left: 4px solid var(--brand); background: var(--surface-2); border-radius: 0 10px 10px 0; color: var(--text); }
.prose img { max-width: 100%; height: auto; border-radius: 12px; margin: 1em 0; }
.prose .ql-align-center { text-align: center; }
.prose .ql-align-right { text-align: right; }
.prose .ql-align-justify { text-align: justify; }
.prose .ql-ui { display: none; }
.post-foot { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.flip { transform: rotate(180deg); }

@media (max-width: 960px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } .post-foot .btn { flex: 1 1 auto; } }

/* ---------- Consultants ---------- */
.consultant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: start; }
.consultant {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease;
}
.consultant:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }
.c-photo { aspect-ratio: 4 / 5; background: linear-gradient(160deg, var(--surface-2), var(--brand-soft)); overflow: hidden; }
.c-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.avatar-ph { width: 100%; height: 100%; display: grid; place-items: center; }
.avatar-ph svg { width: 46%; fill: var(--brand-gray); opacity: .35; }
.c-body { padding: 18px 20px 20px; border-top: 3px solid var(--brand); }
.c-body h2, .c-body h3 { font-size: 1.1rem; margin: 0 0 2px; }
.c-body h2 a { display: inline-flex; align-items: center; min-height: var(--control-h); }
.c-role { font-size: .88rem; font-weight: 600; color: var(--brand-text); margin: 0 0 10px; }
.c-short { font-size: .9rem; margin: 0 0 14px; line-height: 1.55; }
.c-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.c-tags span { font-size: .78rem; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.c-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.c-list li { display: flex; gap: 8px; font-size: .86rem; color: var(--text-2); line-height: 1.5; }
.c-list svg { width: 15px; height: 15px; color: var(--brand-text); flex: none; margin-top: 4px; }
@keyframes c-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 1080px) { .consultant-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .consultant-grid { grid-template-columns: 1fr; } .c-photo { aspect-ratio: 1 / 1; } }

/* Next step link at the end of a section */
.section-next { text-align: center; margin: var(--space-6) 0 0; }
.section-next .link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); }
.section-next svg { width: 18px; height: 18px; }

/* "How it works" — numbered cards, joined by a line on desktop */
.how-steps { --how-gap: var(--space-5); list-style: none; margin: 0; padding: 0; display: grid; gap: var(--how-gap); position: relative; }
.how-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.how-num {
  position: relative; z-index: 1; width: var(--control-h); height: var(--control-h); border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 1.25rem;
  background: var(--color-brand-dark); color: var(--color-on-brand-dark);
}
.how-card { align-self: stretch; flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.how-card h3 { margin: var(--space-2) 0 0; }
.how-card p { margin: 0; color: var(--text-2); }
@media (min-width: 900px) {
  .how-steps { grid-template-columns: repeat(3, 1fr); }
  .how-card { align-items: center; text-align: center; }
  .how-steps::before {
    content: ""; position: absolute; top: calc(var(--control-h) / 2 - 1px);
    left: calc((100% - 2 * var(--how-gap)) / 6); right: calc((100% - 2 * var(--how-gap)) / 6);
    border-top: 2px dashed var(--color-border-strong);
  }
}
.how-note { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-6) 0 0; font-weight: 600; color: var(--text); text-align: center; }
.how-note svg { width: 20px; height: 20px; color: var(--brand-text); flex: none; }

/* "Who we help" — 5 icon + label items */
.who-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.who-list li {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); font-weight: 600; color: var(--text);
}
.who-list .ico-box { flex: none; }
@media (min-width: 640px) { .who-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .who-list { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
  .who-list li { flex-direction: column; justify-content: flex-start; text-align: center; padding: var(--space-5) var(--space-3); }
}

/* "Why BANIK Advisory" — 4 points */
.why-list { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: var(--space-4); max-width: 960px; }
.why-list li { display: flex; align-items: center; gap: var(--space-4); font-weight: 600; font-size: 1.0625rem; color: var(--text); }
.why-list .ico-box { flex: none; }
@media (min-width: 768px) { .why-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-7); } }

/* "Upcoming deadlines" — small box */
.deadlines-box {
  max-width: 680px; margin: 0 auto; padding: var(--space-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.deadlines-box h2 { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-h3); margin: 0 0 var(--space-4); }
.deadlines-box h2 svg { width: 24px; height: 24px; color: var(--brand-text); flex: none; }
.deadline-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.deadline { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.deadline-date {
  flex: none; width: 64px; padding: var(--space-2) 0; text-align: center; line-height: 1.2;
  background: var(--color-tint); color: var(--brand-text); border-radius: var(--radius-sm);
}
.deadline-date strong { display: block; font-size: 1.5rem; }
.deadline-date span { font-size: var(--fs-small); font-weight: 600; }
.deadline h3 { font-size: 1.0625rem; margin: 0 0 var(--space-1); }
.deadline p { margin: 0; color: var(--text-2); font-size: var(--fs-small); }
@media (max-width: 639.98px) { .deadlines-box .btn { width: 100%; } }

/* Government portals note */
.portals-note { margin: var(--space-6) auto 0; max-width: 760px; }
.portals-note p { margin: 0 0 var(--space-3); color: var(--text); font-weight: 600; }

/* "Latest insights" — server-written cards */
.insights-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 768px) { .insights-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.insight-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.insight-card:focus-within { box-shadow: var(--focus-ring); }
.insight-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.insight-card h3 { margin: 0; font-size: var(--fs-h3); }
.insight-card h3 a { color: var(--text); text-decoration: none; }
.insight-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is the tap target */
.insight-card h3 a:hover { color: var(--brand-text); text-decoration: underline; }
.insight-card h3 a:focus-visible { outline: none; }
.insight-summary { margin: 0; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Final call to action — soft red band */
.cta-band.cta-soft { background: var(--color-tint); color: var(--text); border: 1px solid var(--border); }
.cta-band.cta-soft h2 { color: var(--text); }
.cta-band.cta-soft p { color: var(--text-2); }
@media (max-width: 639.98px) { .cta-soft .actions, .cta-soft .actions .btn, .portals-note .btn { width: 100%; } }

/* ---------- Service detail pages (services/*.html) ---------- */
.js-only { display: none !important; }
.js .js-only { display: inline-flex !important; }
.print-only { display: none; }
.sd-container { max-width: 820px; }
.sd-crumbs { padding-top: var(--space-4); }
.sd-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--fs-small); color: var(--text-2); }
.sd-crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--muted); }
.sd-crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); min-width: var(--control-h); color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.sd-crumbs a:hover { color: var(--brand-text); }
.sd-crumbs [aria-current] { display: inline-flex; align-items: center; color: var(--text); font-weight: 600; }
.sd-hero { padding: var(--space-5) 0 var(--space-7); }
.sd-hero .ico-box { margin-bottom: var(--space-4); }
.sd-hero h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-3); }
.sd-part { margin: 0 0 var(--space-3); }
.sd-part .tag { min-height: var(--control-h); display: inline-flex; align-items: center; }
.sd-sticky-wa { width: var(--control-h); padding: 0; justify-content: center; flex: none; }
.sd-sticky-wa svg { width: 22px; height: 22px; }
.sd-sticky .btn-primary { margin-left: var(--space-2); }
.sd-who { font-size: 1.125rem; color: var(--text-2); margin: 0 0 var(--space-4); }
.sd-facts { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.sd-facts li, .sd-price-main { display: flex; align-items: center; gap: var(--space-2); }
.sd-facts svg, .sd-price-main svg { width: 20px; height: 20px; color: var(--brand-text); flex: none; }
.sd-facts strong { font-size: 1.125rem; }
.sd-cta, .sd-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 639.98px) { .sd-cta .btn, .sd-actions .btn { width: 100%; } }
.sd-section h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-5); }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.check-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.check-list svg { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--color-success); stroke-width: 2.5; }
.sd-not { margin: var(--space-5) 0 0; padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); }
.sd-not strong { color: var(--text); }
.doc-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.doc-list li { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.doc-list strong { color: var(--text); }
.doc-list .badge { margin-left: var(--space-1); font-size: .8125rem; vertical-align: middle; }
.doc-list p { margin: var(--space-1) 0 0; color: var(--text-2); }
.doc-box { flex: none; width: 22px; height: 22px; margin-top: 3px; border: 2px solid var(--color-border-strong); border-radius: 6px; }
.sd-price { display: grid; gap: var(--space-3); }
.sd-price-main { margin: 0; font-size: 1.25rem; flex-wrap: wrap; }
.sd-price-main span { color: var(--text-2); font-size: 1rem; }
.sd-price h3 { margin: var(--space-2) 0 0; }
.sd-price-note { margin: 0; font-weight: 600; color: var(--text); }
.sd-price .btn { justify-self: start; }
.sd-related { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .sd-related { grid-template-columns: repeat(3, 1fr); } }
.sd-related-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.sd-related-card h3 { margin: var(--space-2) 0 0; font-size: 1.125rem; }
.sd-related-card h3 a { color: var(--text); text-decoration: none; }
.sd-related-card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card is the tap target */
.sd-related-card:hover h3 a { color: var(--brand-text); text-decoration: underline; }
.sd-related-card:focus-within { box-shadow: var(--focus-ring); }
.sd-related-card p { margin: 0; color: var(--text-2); }
.sd-related-price { margin-top: auto; font-weight: 600; color: var(--text); }

/* Phones: sticky bottom bar with the price and "Order" (the WhatsApp button lifts above it) */
.sd-sticky { display: none; }
@media (max-width: 899.98px) {
  .sd-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 20px rgba(17, 24, 39, .08);
  }
  .sd-sticky-price { display: grid; line-height: 1.3; min-width: 0; }
  .sd-sticky-price span { font-size: var(--fs-small); color: var(--text-2); }
  .sd-sticky .btn { flex: none; }
  .has-sticky-bar { padding-bottom: 80px; }
  :root:has(.sd-sticky) { --fab-lift: 76px; } /* no-JS fallback; placeFab() measures the real height */
}

/* "Download checklist": print only the document list */
@media print {
  .print-checklist * { visibility: hidden; }
  .print-checklist #documents, .print-checklist #documents * { visibility: visible; }
  .print-checklist .cal-row[hidden] { display: none; }
  .print-checklist #documents { position: absolute; left: 0; top: 0; width: 100%; padding: 0; background: #fff; color: #000; }
  .print-checklist .print-only { display: block; }
  .print-checklist .no-print, .print-checklist .sd-sticky, .print-checklist .fab-wa { display: none !important; }
  .print-checklist .doc-list li { border: 1px solid #999; break-inside: avoid; }
  .print-checklist .doc-box { border-color: #000; }
  .sd-print-head { font-weight: 700; margin: 0 0 12px; }
}

/* ---------- Order page: 3-step form ---------- */
.js-only-block { display: none !important; }
.js .js-only-block { display: block !important; }
.js-only-flex { display: none !important; }
.js .js-only-flex { display: flex !important; }
.order-section { padding-top: var(--space-6); }
.order-container { max-width: 760px; }
.order-wa-note { margin-bottom: var(--space-6); }
.order-wa-note p { margin: 0 0 var(--space-3); }
.order-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.order-step + .order-step { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.order-form.is-stepped .order-step + .order-step { margin-top: 0; padding-top: 0; border-top: 0; }
.order-step legend { padding: 0; margin-bottom: var(--space-4); }
.order-step h2 { font-size: var(--fs-h2); margin: 0; }
.order-step h2:focus { outline: none; }
.order-form.is-stepped .order-step-no { display: none; }
.order-progress { display: none; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.js .order-progress { display: grid; }
.order-progress span { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--color-border-strong); }
.order-progress span.on { background: var(--color-brand-dark); }
.order-step-count { margin: 0 0 var(--space-5); font-weight: 600; color: var(--text-2); }
/* Two-step booking: stepper, booking card, review cards */
.order-form fieldset.field { margin-bottom: var(--space-5); }
.need-card[hidden] { display: none; }
.order-steps { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: none; gap: var(--space-3); counter-reset: none; }
.js .order-steps { display: flex; }
.order-steps li { flex: 1; display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 3px solid var(--color-border-strong); color: var(--text-2); font-weight: 600; font-size: .9375rem; }
.order-steps li > span:first-child { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--color-border-strong); font-size: .875rem; }
.order-steps li.on { border-bottom-color: var(--color-brand); color: var(--text); }
.order-steps li.on > span:first-child { border-color: var(--color-brand); background: var(--color-brand); color: #fff; }
.order-steps li.done > span:first-child { background: var(--color-success); border-color: var(--color-success); }
.order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-4); }
.order-grid > .field[hidden] { display: none; }
.order-grid > .field:only-child, .order-grid > .field:first-child:nth-last-child(2):has(+ .field[hidden]) { grid-column: 1 / -1; }
@media (max-width: 639.98px) { .order-grid { grid-template-columns: minmax(0, 1fr); } }
.need-card { display: flex; flex-direction: row; text-align: left; align-items: center; gap: var(--space-3); padding: 14px 16px; border: 1px solid var(--color-brand); border-left-width: 4px; border-radius: var(--radius-md); background: var(--color-tint); }
.need-card > div, .review-need > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.need-label { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-text); }
.need-card strong, .review-need strong { font-size: 1.0625rem; color: var(--text); overflow-wrap: anywhere; }
.need-ico { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--surface); color: var(--color-brand); box-shadow: var(--shadow-sm); }
.need-ico svg { width: 22px; height: 22px; }
.order-review { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.review-card { padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.review-card header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.review-card h3 { margin: 0; font-size: 1.0625rem; }
.review-card header .btn svg { transform: rotate(180deg); display: none; }
.review-need { display: flex; align-items: center; gap: var(--space-3); border-color: var(--color-brand); border-left-width: 4px; background: var(--color-tint); }
.review-list { margin: 0; display: grid; }
.review-list > div { display: grid; grid-template-columns: minmax(96px, 32%) 1fr; gap: var(--space-3); padding: 8px 0; border-top: 1px dashed var(--border); }
.review-list > div:first-child { border-top: 0; }
.review-list dt { color: var(--text-2); font-size: .9375rem; }
.review-list dd { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
@media (max-width: 479.98px) { .review-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .review-card { padding: var(--space-4); } }
.review-note { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.done-flow { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: var(--space-2); }
.done-flow li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.done-flow li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--text-2); }
.done-flow li.done { border-color: var(--color-success); background: var(--color-success-bg); }
.done-flow li.done svg { color: var(--color-success); }
@media (max-width: 479.98px) { .btn-block-sm { width: 100%; justify-content: center; } }
.order-errors { margin-bottom: var(--space-5); }
.order-errors:focus { outline: none; }
.order-errors ul { margin: var(--space-1) 0 0; padding-left: 1.2em; }
.order-errors p { margin: 0; }
.order-req-note { margin: 0 0 var(--space-4); font-size: var(--fs-small); color: var(--text-2); }
.field-opt { font-weight: 400; color: var(--text-2); }

.order-tiles { display: grid; gap: var(--space-3); }
.order-group-h { font-size: 1.0625rem; margin: var(--space-5) 0 var(--space-3); }
.order-group-h:first-child { margin-top: 0; }
@media (min-width: 640px) { .choice-row-seg { grid-template-columns: 1fr 1fr; } }
@media (min-width: 640px) { .order-tiles { grid-template-columns: repeat(2, 1fr); } }
.order-tile {
  position: relative; display: flex; align-items: flex-start; gap: var(--space-3);
  min-height: 72px; padding: var(--space-4); padding-right: var(--space-7); cursor: pointer;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.order-tile:hover { border-color: var(--color-border-strong); }
.order-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.order-tile .ico-box { flex: none; width: 44px; height: 44px; }
.order-tile-text { display: grid; gap: 2px; }
.order-tile-text strong { color: var(--text); line-height: 1.35; }
.order-tile-text span { font-size: var(--fs-small); color: var(--text-2); line-height: 1.5; }
.order-tile-text .order-tile-price { margin-top: var(--space-1); font-weight: 600; color: var(--text); }
.order-tile-check {
  position: absolute; top: var(--space-3); right: var(--space-3); width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--color-border-strong); color: transparent;
}
.order-tile-check svg { width: 15px; height: 15px; stroke-width: 3; }
.order-tile:has(input:checked), .order-tile.is-selected { border-color: var(--color-brand-dark); background: var(--color-tint); }
.order-tile:has(input:checked) .order-tile-check, .order-tile.is-selected .order-tile-check { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: var(--color-on-brand-dark); }
.order-tile:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.field.is-invalid .order-tiles .order-tile { border-color: var(--color-error); }

.field-choice { border: 0; padding: 0; margin: 0 0 var(--space-5); min-width: 0; }
.field-choice legend { margin-bottom: var(--space-2); padding: 0; }
.choice-row { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .choice-row { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-h); padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-weight: 600; color: var(--text);
}
.choice input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--color-brand-dark); }
.choice:has(input:checked) { border-color: var(--color-brand-dark); background: var(--color-tint); }
.choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.field.is-invalid .choice, .field-choice.is-invalid .choice { border-color: var(--color-error); }
.field-choice.is-invalid .field-error { display: flex; }
.choice-consent { align-items: flex-start; font-weight: 400; line-height: 1.6; }
.choice-consent input { margin-top: 3px; }

.order-summary { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.order-summary div { display: grid; grid-template-columns: minmax(110px, 35%) 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px dashed var(--border); }
.order-summary div:last-child { border-bottom: 0; }
.order-summary dt { color: var(--text-2); }
.order-summary dd { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.order-next { margin-bottom: var(--space-5); }
.order-next p { margin: 0; }
.order-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
.order-nav [data-order-next], .order-nav [data-order-submit] { margin-left: auto; }
@media (max-width: 639.98px) { .order-nav .btn { flex: 1 1 100%; } .order-nav [data-order-next], .order-nav [data-order-submit] { order: -1; } .order-wa-note .btn { width: 100%; } }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.order-done { display: grid; gap: var(--space-4); }
.order-done:focus { outline: none; }
.order-done-head { display: flex; align-items: center; gap: var(--space-3); }
.order-done-head svg { width: 40px; height: 40px; color: var(--color-success); flex: none; }
.order-done-head h1, .order-done-head h2 { margin: 0; font-size: var(--fs-h2); }
.order-done p { margin: 0; }
.order-done-id { font-size: 1.125rem; }
.order-done .btn { justify-self: start; }
.order-done h3 { margin: var(--space-3) 0 0; }

/* ---------- Contact page ---------- */
.contact-section { padding-top: var(--space-6); }
.contact-cards { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contact-cards { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.contact-card { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-card h2 { font-size: var(--fs-h3); margin: var(--space-2) 0 0; }
.contact-detail { margin: 0 0 var(--space-3); font-size: 1.125rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.contact-card .btn { margin-top: auto; justify-content: center; }
.contact-hours { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.contact-hours .ico-box { flex: none; }
.contact-hours h2 { font-size: 1.125rem; margin: 0; }
.contact-hours p { margin: 0; color: var(--text-2); }
.contact-layout { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.contact-layout h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-2); }
.contact-form-intro { margin: 0 0 var(--space-5); color: var(--text-2); }
.contact-form { padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.contact-privacy { margin: 0 0 var(--space-4); font-size: var(--fs-small); color: var(--text-2); }
@media (max-width: 639.98px) { .contact-form [data-form-submit] { width: 100%; } }
@media (min-width: 640px) { .choice-row-3 { grid-template-columns: repeat(3, 1fr); } }
.form-sent { display: none; margin-bottom: var(--space-5); scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
.form-sent:target { display: flex; }
.form-sent:focus { outline: none; }
.form-sent p { margin: 0; }
.form-sent svg { color: var(--color-success); }
.contact-done { display: grid; gap: var(--space-3); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.contact-done:focus { outline: none; }
.contact-done h3 { margin: 0; }
.contact-done p { margin: 0; }
.contact-done .btn { justify-self: start; }
.contact-map-frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); }
.contact-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.contact-map-frame { display: grid; place-items: center; }
.contact-map-open { position: relative; z-index: 0; }
.contact-map-frame.is-loaded .contact-map-open { visibility: hidden; }
.contact-map-address { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-3) 0 0; font-weight: 600; color: var(--text); }
.contact-map-address svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--brand-text); }

/* ---------- About page ---------- */
.about-hero { padding: var(--space-6) 0 var(--space-8); }
.about-hero-grid { display: grid; gap: var(--space-6); align-items: start; }
.about-hero-grid > * { min-width: 0; }
.about-hero h1 { font-size: var(--fs-h1); margin: var(--space-2) 0 var(--space-2); }
.about-role { margin: 0 0 var(--space-5); font-size: 1.125rem; font-weight: 600; color: var(--brand-text); }
.about-intro p { margin: 0 0 var(--space-4); max-width: 62ch; }
.about-hero-photo { margin: 0; order: -1; }
.about-photo { display: block; width: 100%; max-width: 220px; height: auto; border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--surface-2); }
@media (min-width: 900px) {
  .about-hero-grid { grid-template-columns: 1.4fr .6fr; gap: var(--space-8); }
  .about-hero-photo { order: 0; position: sticky; top: calc(var(--header-h) + var(--space-5)); }
  .about-photo { max-width: 360px; margin-left: auto; }
}
.about-how { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .about-how { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .about-how { grid-template-columns: repeat(3, 1fr); } }
.about-how-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.about-how-item .ico-box { flex: none; }
.about-how-item h3 { margin: 0 0 var(--space-1); font-size: 1.125rem; }
.about-how-item p { margin: 0; color: var(--text-2); }
@media (min-width: 1024px) { .about-who { grid-template-columns: repeat(3, 1fr); } .about-who li { flex-direction: row; text-align: left; padding: var(--space-4); } }
.about-narrow { max-width: 820px; }
.about-narrow h2 { margin: var(--space-6) 0 var(--space-3); }
.about-narrow h2:first-child { margin-top: 0; }
.about-mission { font-family: var(--font-heading); font-size: 1.375rem; line-height: 1.5; color: var(--text); padding-left: var(--space-4); border-left: 4px solid var(--color-brand); }
.about-mission :lang(bn) { font-family: var(--font-bangla); }
@media (min-width: 1024px) { .values-grid { grid-template-columns: repeat(4, 1fr); } .values-grid .why-card { flex-direction: column; } }
.about-narrow h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-5); }
.about-quals { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.about-quals li { display: flex; gap: var(--space-4); align-items: center; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.about-quals .ico-box { flex: none; }
.about-quals strong { display: block; color: var(--text); }
.about-quals span:not(.ico-box) { color: var(--text-2); font-size: var(--fs-small); }
.about-left { text-align: left; }

/* ---------- FAQ page + glossary ---------- */
.faq-section { padding-top: var(--space-6); }
.faq-container { max-width: 820px; }
.faq-search { margin-bottom: var(--space-5); }
.faq-search .field-label { display: block; margin-bottom: var(--space-2); }
.faq-search-box { max-width: none; min-width: 0; }
.faq-search-box input { min-height: var(--control-h); font-size: 1rem; }
.faq-search-box input:focus-visible { box-shadow: var(--focus-ring); }
.faq-status { min-height: 1.5em; margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--text-2); }
.faq-jump { margin-bottom: var(--space-6); }
.faq-jump ul { list-style: none; margin: 0; padding: 0; }
.faq-jump .filter-btn { display: inline-flex; align-items: center; }
.faq-group { margin-bottom: var(--space-7); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.faq-group h2 { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-h3); margin: 0 0 var(--space-4); }
.faq-group h2 .ico-box { width: 40px; height: 40px; flex: none; }
.faq-group h2 .ico-box svg { width: 20px; height: 20px; }
.faq-group details { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.faq-group .accordion-body p { margin: 0; }
.faq-none { margin-bottom: var(--space-7); }
.faq-none p { margin: 0 0 var(--space-3); }
.glossary { margin: 0; display: grid; gap: var(--space-3); }
.glossary-item { padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.glossary-item:target { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-tint); }
.glossary dt { font-weight: 700; color: var(--text); }
.glossary dd { margin: var(--space-1) 0 0; color: var(--text-2); }
a.term:hover { color: var(--brand-text); }

/* ---------- Find my service (3 questions) ---------- */
.no-js-only { display: flex; }
.js .no-js-only { display: none; }
.finder-section { padding-top: var(--space-6); }
.finder-container { max-width: 760px; }
.finder-step h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-2); }
.finder-step h2:focus, .finder-step h2:focus-visible, .order-step h2:focus-visible { outline: none; box-shadow: none; } /* focus moved here by script, not by the visitor */
.finder-help { margin: 0 0 var(--space-5); color: var(--text-2); }
.finder-answers { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .finder-answers { grid-template-columns: repeat(2, 1fr); } }
.finder-answer {
  display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 72px; padding: var(--space-4);
  font: inherit; font-weight: 600; font-size: 1.0625rem; text-align: left; color: var(--text); cursor: pointer;
  background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.finder-answer:hover { border-color: var(--color-border-strong); }
.finder-answer:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.finder-answer[aria-pressed="true"] { border-color: var(--color-brand-dark); background: var(--color-tint); }
.finder-answer .ico-box { flex: none; }
.finder-answer-text { flex: 1; }
.finder-answer-go svg { width: 20px; height: 20px; color: var(--text-2); }
.finder-back { margin-top: var(--space-5); }
.finder-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); }
.finder-nav .finder-back { margin-top: 0; }
.finder-card { display: flex; flex-direction: column; gap: var(--space-3); border-color: var(--color-brand-dark); border-width: 2px; }
.finder-card h3 { margin: 0; font-size: var(--fs-h3); }
.finder-card p { margin: 0; color: var(--text-2); }
.finder-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.finder-notright { margin-top: var(--space-5); }
.finder-notright p { margin: 0 0 var(--space-3); }
.finder-talk { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.finder-nojs-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3) !important; }
@media (max-width: 639.98px) { .finder-card-actions .btn, .finder-talk .btn, .finder-notright .btn { width: 100%; } }

/* ---------- Insights list + article pages ---------- */
.insights-section { padding-top: var(--space-6); }
.insights-section .svc-filters { margin-bottom: var(--space-5); }
.insight-meta { align-items: center; }
.insight-meta .tag, .insight-meta .badge { font-size: .8125rem; }
.insight-card h2 { margin: 0; font-size: var(--fs-h3); }
.insight-card h2 a { color: var(--text); text-decoration: none; }
.insight-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.insight-card h2 a:hover { color: var(--brand-text); text-decoration: underline; }
.insights-empty { align-items: flex-start; max-width: 720px; }
.insights-empty .ico-box { flex: none; }
.insights-empty h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.insights-empty p { margin: 0 0 var(--space-4); }

.article-container { max-width: 760px; }
.article-head { padding-top: var(--space-3); padding-bottom: var(--space-6); }
.article-head h1 { font-size: var(--fs-h1); margin: var(--space-3) 0; }
.article-lead { font-size: 1.25rem; color: var(--text-2); margin: 0 0 var(--space-4); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--fs-small); color: var(--text-2); }
.article-meta a { color: var(--text); font-weight: 600; }
.article-toc { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-md); }
.article-toc h2 { font-size: 1rem; margin: 0 0 var(--space-2); }
.article-toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: var(--space-1); }
.article-toc a { display: inline-block; padding: 4px 0; color: var(--brand-text); }
/* Article text: ~70 characters a line, large and airy */
.prose { max-width: 70ch; font-size: 1.125rem; line-height: 1.8; color: var(--text); }
@media (min-width: 768px) { .prose { font-size: 1.1875rem; } }
.prose > * { margin: 0 0 1.1em; }
.prose h2 { font-size: var(--fs-h2); margin: 1.8em 0 .6em; scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.prose h3 { font-size: var(--fs-h3); margin: 1.5em 0 .5em; scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.prose h4 { font-size: 1.0625rem; margin: 1.3em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.prose a.term { color: inherit; }
.prose blockquote { margin-left: 0; padding: var(--space-3) var(--space-5); border-left: 4px solid var(--color-brand); background: var(--color-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose blockquote p { margin: 0; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.prose figure { margin: 1.5em 0; }
.prose figcaption { font-size: var(--fs-small); color: var(--text-2); margin-top: var(--space-2); }
.prose code { font-size: .9em; padding: 1px 6px; background: var(--surface-2); border-radius: 6px; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.prose .table-wrap { position: relative; overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prose th, .prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose th { background: var(--bg-alt); }
.article-author { display: flex; gap: var(--space-4); align-items: flex-start; margin: var(--space-7) 0 var(--space-5); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.article-author img { flex: none; width: 72px; height: auto; border-radius: var(--radius-sm); }
.article-author p { margin: 0; color: var(--text-2); }
.article-author .article-author-name { font-weight: 700; font-size: 1.125rem; }
.article-author .article-author-name a { color: var(--text); }
.article-author .article-author-role { margin-bottom: var(--space-2); font-size: var(--fs-small); }
.article-help { margin: 0 0 var(--space-8); align-items: flex-start; }
.article-help .ico-box { flex: none; }
.article-help h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); }
.article-help p { margin: 0 0 var(--space-3); }
.article-help-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 !important; }
@media (max-width: 639.98px) { .article-help-actions .btn { width: 100%; } }
.article-related-h { font-size: var(--fs-h2); margin: 0 0 var(--space-5); }

/* ---------- 404 + privacy ---------- */
.notfound-container { max-width: 760px; text-align: center; }
.notfound-ico { width: 64px; height: 64px; margin: 0 auto var(--space-5); }
.notfound-ico svg { width: 30px; height: 30px; }
.notfound h1 { font-size: var(--fs-h1); margin: 0 0 var(--space-3); }
.notfound-lead { font-size: 1.125rem; color: var(--text-2); margin: 0 auto var(--space-6); max-width: 52ch; }
.notfound-actions { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .notfound-actions { grid-template-columns: repeat(2, 1fr); } }
.notfound-actions .btn { min-height: 64px; font-size: 1.0625rem; justify-content: center; }
.privacy-container { max-width: 760px; }
.privacy-draft { margin-bottom: var(--space-3); }
.privacy-draft p { margin: 0; }
.privacy-updated { margin: 0 0 var(--space-6); font-size: var(--fs-small); color: var(--text-2); }
.privacy-section { margin-bottom: var(--space-6); }
.privacy-section h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.privacy-section p, .privacy-section ul { margin: 0 0 var(--space-3); }
.privacy-section ul { padding-left: 1.3em; }
.privacy-section li + li { margin-top: var(--space-2); }
.privacy-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Plans, solutions ---------- */
.eyebrow-line { margin: 0 0 var(--space-2); font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-text); }
.pain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .pain-list { grid-template-columns: 1fr 1fr; } }
.pain-list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.pain-list svg { width: 22px; height: 22px; flex: none; margin-top: 3px; color: var(--brand-text); }
.sol-plan { max-width: 440px; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.plan-card.is-popular { border: 2px solid var(--color-brand); box-shadow: var(--shadow-md); }
.plan-card.is-entry { border: 2px solid var(--color-border-strong); }
.plan-badge { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-5); background: var(--color-brand-dark); color: var(--color-on-brand-dark); }
.plan-top { display: flex; align-items: center; gap: var(--space-3); }
.plan-top .ico-box { flex: none; }
.plan-name { margin: 0; font-size: var(--fs-h3); }
.plan-for { margin: 0; color: var(--text-2); }
/* Regular Support frequencies */
.freq-chips { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.freq-chip { display: grid; align-content: start; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-top: 3px solid var(--color-brand); border-radius: var(--radius-sm); background: var(--surface); text-align: left; }
.freq-chip strong { font-size: 1rem; color: var(--text); }
.freq-chip span { font-size: var(--fs-small); color: var(--text-2); line-height: 1.45; }
.freq-chips + .sd-cta { margin-top: var(--space-5); }
@media (max-width: 767.98px) { .freq-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-freq { margin: 0; display: flex; gap: 8px; align-items: center; font-size: var(--fs-small); font-weight: 600; color: var(--brand-text); }
.plan-freq svg { width: 16px; height: 16px; flex: none; }
.freq-line { margin: 0 0 var(--space-2); font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; color: var(--brand-text); }
.plan-price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.plan-price strong { font-size: 1.25rem; color: var(--text); }
.plan-price span { font-size: var(--fs-small); color: var(--text-2); }
.plan-card .check-list { gap: var(--space-2); }
.plan-card .check-list li { font-size: .9375rem; }
.plan-cta { margin-top: auto; justify-content: center; }

.plans-hc { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .plans-hc { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.plans-hc h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-3); }
.plans-grid { display: grid; gap: var(--space-6) var(--space-5); margin-top: var(--space-5); }
@media (min-width: 768px) and (max-width: 1023.98px) { .plans-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .plans-grid { grid-template-columns: repeat(3, 1fr); } }
.plans-custom { display: flex; gap: var(--space-3); align-items: center; justify-content: center; margin: var(--space-6) 0 0; text-align: center; color: var(--text-2); }
.plans-custom svg { width: 22px; height: 22px; color: var(--brand-text); flex: none; }
.plans-h { font-size: var(--fs-h2); margin: 0 0 var(--space-5); }
.plans-narrow { max-width: 900px; }
.compare-wrap { position: relative; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.compare-wrap:focus-visible { box-shadow: var(--focus-ring); }
.compare-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; font-size: .9375rem; }
.compare-table thead th { font-family: var(--font-heading); font-size: 1.0625rem; color: var(--text); background: var(--bg-alt); }
.compare-table tbody th { text-align: left; font-weight: 600; color: var(--text); position: sticky; left: 0; background: var(--surface); min-width: 180px; }
.compare-table td { color: var(--text-2); }
.compare-table .tick { width: 20px; height: 20px; color: var(--color-success); vertical-align: middle; margin-right: 4px; }
.compare-table .price-row td strong { color: var(--text); }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.plan-badge-inline { display: block; width: fit-content; margin: 4px auto 0; font-family: var(--font-body); font-size: .75rem; }
.proj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.proj-list li { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.proj-list .ico-box { flex: none; }
.proj-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.proj-text a { font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 32px; align-items: center; }
.proj-text span { font-size: var(--fs-small); color: var(--text-2); }
.proj-price { flex: none; text-align: right; font-size: .9375rem; }
@media (max-width: 639.98px) { .proj-list li { flex-wrap: wrap; } .proj-price { width: 100%; text-align: left; padding-left: 64px; } }

/* ---------- Compliance calendar ---------- */
.cal-container { max-width: 960px; }
.cal-h { font-size: var(--fs-h3); margin: var(--space-6) 0 var(--space-3); }
.cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.cal-row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: start; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cal-what { display: grid; gap: 2px; }
.cal-what strong { color: var(--text); }
.cal-what span { font-size: var(--fs-small); color: var(--text-2); }
.cal-who { color: var(--brand-text) !important; font-weight: 600; }
.cal-when, .cal-link { grid-column: 2; }
.cal-when { font-weight: 600; color: var(--text); }
.cal-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.cal-link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h); width: fit-content; }
.cal-link svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .cal-row { grid-template-columns: auto 1fr 220px auto; align-items: center; } .cal-when, .cal-link { grid-column: auto; } }
.cal-note { margin: var(--space-6) 0 var(--space-4); }
.cal-note p { margin: 0; }

/* ---------- Home v2 ---------- */
.hero-v2 .hero-text h1 { max-width: 18ch; }
.hero-v2 .hero-lead { max-width: 40rem; }
.hero-wa { margin: 0 0 var(--space-5); }
.hero-wa .link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); }
.hero-wa svg { width: 18px; height: 18px; color: var(--color-success); }
.hero-v2 .hero-trust { gap: var(--space-2) var(--space-5); }
.hero-v2 .hero-trust svg { color: var(--brand-text); }
/* Illustrative dashboard (HTML/CSS, both themes) */
.dash-mock { margin: 0; }
.dash-card { max-width: 420px; margin: 0 auto; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.dash-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); font-family: var(--font-heading); font-size: 1.125rem; color: var(--text); }
.dash-head :lang(bn) { font-family: var(--font-bangla); }
.dash-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-brand); box-shadow: 0 0 0 4px var(--color-tint); }
.dash-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.dash-rows li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--bg-alt); font-weight: 600; color: var(--text); font-size: .9375rem; }
.dash-ico svg { width: 20px; height: 20px; display: block; }
.dash-ico.ok, .dash-status.ok { color: var(--color-success); }
.dash-ico.due, .dash-status.due { color: #b45309; }
:root[data-theme="dark"] .dash-ico.due, :root[data-theme="dark"] .dash-status.due { color: #fbbf24; }
.dash-ico.ready, .dash-status.ready { color: var(--brand-text); }
.dash-status { font-size: .8125rem; white-space: nowrap; }
.dash-bar { height: 8px; margin: var(--space-4) 0 var(--space-2); border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
.dash-bar span { display: block; height: 100%; background: var(--color-success); border-radius: inherit; }
.dash-foot { margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.dash-cap { margin-top: var(--space-3); text-align: center; font-size: .8125rem; color: var(--text-2); }
@media (max-width: 899.98px) { .hero-v2 .hero-media { display: block; } .dash-card { margin-top: var(--space-4); } }
/* Who we work with */
.seg-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .seg-tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .seg-tiles { grid-template-columns: repeat(5, 1fr); } }
.seg-tile { display: flex; align-items: center; gap: var(--space-3); height: 100%; min-height: 72px; padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.seg-tile:hover { border-color: var(--color-brand); transform: translateY(-2px); }
.seg-tile .ico-box { flex: none; }
.seg-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.seg-text strong { line-height: 1.35; }
.seg-text span { font-size: .8125rem; color: var(--text-2); line-height: 1.45; }
.seg-go { width: 18px; height: 18px; flex: none; color: var(--brand-text); }
@media (min-width: 1024px) { .seg-tile { flex-direction: column; align-items: flex-start; } .seg-go { display: none; } }
/* What we do */
.practice-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .practice-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .practice-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.practice-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.practice-card h3 { margin: var(--space-2) 0 0; font-size: 1.125rem; }
.practice-card h3 a { color: var(--text); }
.practice-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.practice-card:hover { border-color: var(--color-brand); }
.practice-card:focus-within { box-shadow: var(--focus-ring); }
.practice-card p { margin: 0; color: var(--text-2); font-size: .9375rem; }
.practice-more { margin-top: auto; padding-top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; color: var(--brand-text); font-size: .9375rem; }
.practice-more svg { width: 16px; height: 16px; }
/* Health check band */
.hc-band { display: grid; gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-tint); border: 1px solid var(--border); }
@media (min-width: 900px) { .hc-band { grid-template-columns: 1.4fr .6fr; align-items: center; padding: var(--space-7); } }
.hc-band h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-4); }
.hc-actions { display: grid; gap: var(--space-3); justify-items: start; }
.hc-actions .link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h); }
.hc-actions .link svg { width: 16px; height: 16px; }
/* 4 steps */
@media (min-width: 900px) {
  .how-steps-4 { grid-template-columns: repeat(4, 1fr); }
  .how-steps-4::before { left: calc((100% - 3 * var(--how-gap)) / 8); right: calc((100% - 3 * var(--how-gap)) / 8); }
}
/* Why */
.why-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .why-grid { grid-template-columns: 1fr 1fr; } }
.why-card { display: flex; gap: var(--space-4); align-items: flex-start; }
.why-card .ico-box { flex: none; }
.why-card h3 { margin: 0 0 var(--space-1); font-size: 1.125rem; }
.why-card p { margin: 0; color: var(--text-2); }
.facts-strip { list-style: none; margin: var(--space-6) 0 0; padding: var(--space-5); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-5) var(--space-8); border-top: 1px solid var(--border); }
.facts-strip li { display: grid; text-align: center; }
.facts-strip strong { font-family: var(--font-heading); font-size: 2rem; color: var(--brand-text); }
.facts-strip span { color: var(--text-2); font-size: var(--fs-small); }
.portals-note-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin: var(--space-5) 0 0; text-align: center; color: var(--text-2); }
.portals-note-line svg { width: 18px; height: 18px; color: var(--brand-text); }
.portals-note-line .link, .svc-plans-line .link { display: inline-flex; align-items: center; min-height: var(--control-h); }
#portals .links-grid { gap: var(--space-3); }

/* ---------- Team cards (Home teaser + team.html) ---------- */
.team-teaser, .team-grid { display: grid; gap: var(--space-5); }
@media (min-width: 640px) { .team-teaser, .team-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .team-teaser, .team-grid { grid-template-columns: repeat(3, 1fr); } }
/* Four people on Home: one row of four (no single card left alone) */
@media (min-width: 1024px) { .team-teaser:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } }
.team-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.team-photo { aspect-ratio: 4 / 5; background: var(--surface-2); overflow: hidden; }
.team-photo picture, .team-photo .team-img { display: block; width: 100%; height: 100%; }
.team-photo .team-img { object-fit: cover; object-position: center top; }
@media (hover: hover) {
  .team-card .team-img { filter: grayscale(60%); transition: filter var(--dur-slow) var(--ease); }
  .team-card:hover .team-img, .team-card:focus-within .team-img { filter: none; }
}
@media (prefers-reduced-motion: reduce) { .team-card .team-img { transition: none; } }
.team-avatar { display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--color-tint), var(--surface-2)); color: var(--brand-text); }
.team-avatar span { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 700; }
.team-avatar.is-silhouette svg { width: 45%; fill: var(--color-border-strong); }
.team-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.team-body h3 { margin: 0; font-size: 1.125rem; }
.team-role { margin: 0; color: var(--text-2); font-size: .9375rem; }
.team-chips { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.team-chips .tag { font-size: .8125rem; }
.team-short { margin: 0; font-size: .9375rem; color: var(--text-2); }
.team-more summary { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h); font-weight: 600; color: var(--brand-text); cursor: pointer; list-style: none; }
.team-more summary::-webkit-details-marker { display: none; }
.team-more[open] .dd-chev { transform: rotate(180deg); }
.team-more-body p { margin: 0 0 var(--space-3); font-size: .9375rem; color: var(--text-2); }
.team-quals { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); font-size: .875rem; color: var(--text-2); }
.team-quals li { display: flex; gap: var(--space-2); align-items: flex-start; }
.team-quals svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--brand-text); }
.team-quals strong { color: var(--text); }
.team-linkedin { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); margin-top: auto; font-weight: 600; color: var(--text); }
.team-linkedin svg { width: 18px; height: 18px; color: #0a66c2; }
:root[data-theme="dark"] .team-linkedin svg { color: #70b5f9; }
.team-card.is-placeholder { border-style: dashed; }
.team-founder { display: grid; gap: var(--space-6); padding: var(--space-5); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
@media (min-width: 900px) { .team-founder { grid-template-columns: 380px 1fr; padding: var(--space-6); align-items: start; } }
.team-founder-photo { aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2); }
.team-founder-photo picture, .team-founder-photo .team-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.team-founder-text h2 { font-size: var(--fs-h2); margin: 0; }
.team-founder-text > p { margin: var(--space-3) 0 0; }
.team-founder-text .team-role { margin-top: var(--space-1); font-size: 1.0625rem; }
.team-founder-text .team-quals { margin-top: var(--space-4); }
.team-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; }
.team-links .link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h); }
.team-links .link svg { width: 16px; height: 16px; }

/* ---------- Large text (phone text size set to large) ---------- */
body { overflow-wrap: break-word; }
.footer-grid > *, .links-grid > li, .link-card > span, .contact-cards > *, .needs-grid > *, .svc-grid > * { min-width: 0; }
.link-card small, .footer-contact a, .privacy-section a, .contact-detail { overflow-wrap: anywhere; }
.sd-sticky .btn { flex-shrink: 1; min-width: 0; }

/* ---------- Accessibility helpers ---------- */
/* "Skip to main content": first thing a keyboard user reaches; visible only when focused */
.skip-link { position: absolute; left: var(--space-3); top: -100px; z-index: 1000; padding: var(--space-3) var(--space-4); min-height: var(--control-h); display: inline-flex; align-items: center;
  background: var(--color-ink); color: #fff; font-weight: 700; border-radius: var(--radius-sm); }
.skip-link:focus { top: var(--space-3); }
main:focus { outline: none; }

/* Home hero on tablets/phones: one column; photo hidden on phones (saves data) */
@media (max-width: 899.98px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .hero-photo { max-width: 300px; margin: 0; }
}
@media (max-width: 639.98px) {
  .hero { padding: var(--space-6) 0 var(--space-7); }
  .hero-media { display: none; }
  .hero-cta .btn { flex: 1 1 100%; }
}

/* Consultant cards: link to full profile page */
.consultant .c-photo { display: block; }
.consultant h3 a:hover { color: var(--brand-text); }
.consultant .c-tags { margin-bottom: 16px; }
.c-action { padding-top: 14px; border-top: 1px dashed var(--border); }
.c-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h); font-size: .9rem; font-weight: 600; color: var(--brand-text); }
.c-link svg { width: 16px; height: 16px; transition: transform .2s ease; }
.c-link:hover svg { transform: translateX(4px); }
.c-soon { font-size: .85rem; color: var(--muted); }
.consultant:not(.is-placeholder) .c-photo img { transition: transform .5s ease; }
.consultant:not(.is-placeholder):hover .c-photo img { transform: scale(1.04); }

/* Consultant profile page */
.exp-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.exp-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.exp-group h3 { font-size: 1rem; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--brand-soft); }
.exp-group .c-list li { font-size: .9rem; }
.highlight-list { margin-top: 18px; }
.highlight-list li { font-size: .95rem; }
.timeline .exp-items { margin-top: 8px; }
.profile-block > p[lang] { margin-bottom: 1em; }
@media (max-width: 760px) { .exp-groups { grid-template-columns: 1fr; } }
.timeline .c-list li { padding: 0; }
.timeline .c-list li::before { content: none; }

.footer-contact a:hover { color: #fff; }

/* Video without a link yet: not clickable */
.video-card.is-soon { cursor: default; }
.video-card.is-soon:hover { transform: none; box-shadow: none; }

/* ---------- Style guide page (styleguide.html only) ---------- */
.sg-body { padding-top: var(--space-7); padding-bottom: var(--space-8); }
.sg-section { margin-bottom: var(--space-8); }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); }
.sg-grid-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.sg-swatch { display: grid; gap: 2px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.sg-swatch span { height: 64px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); margin-bottom: var(--space-2); }
.sg-swatch code, .sg-swatch small { font-size: .8125rem; color: var(--color-text-2); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.sg-dark { padding: var(--space-5); border-radius: var(--radius-md); background: var(--color-brand-dark); }
.sg-stack { display: grid; gap: var(--space-4); }
.sg-spacing { display: grid; gap: var(--space-2); }
.sg-spacing div { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-small); color: var(--color-text-2); }
.sg-spacing span { display: inline-block; height: 16px; background: var(--color-brand); border-radius: 3px; }
.sg-form { max-width: 520px; }
.sg-both [lang] { display: block; }
.callout [data-icon] svg, .field-error [data-icon] svg { width: 20px; height: 20px; }
code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em; background: var(--color-surface-2); padding: 1px 6px; border-radius: 6px; }

/* keep the floating WhatsApp button from covering the last footer controls */
.footer-bottom { padding-right: 80px; }
@media (min-width: 900px) { .footer-bottom { padding-right: 330px; } }
@media (max-width: 640px) { .footer-bottom { padding-right: 0; padding-bottom: 96px; } }

/* =========================================================
   Revamp v3 (Oct 2026) — directory, request form, finder, team, resources
   ========================================================= */
/* Hero illustration rows: title + one line */
.dash-rows li { grid-template-columns: auto 1fr; font-weight: 400; }
.dash-rows li > span:last-child { display: grid; gap: 2px; }
.dash-rows strong { font-weight: 600; color: var(--text); }
.dash-rows small { font-size: .8125rem; color: var(--text-2); line-height: 1.4; }
/* Home service cards: one button per card */
.practice-btn { margin-top: auto; align-self: flex-start; }
.practice-card p { margin-bottom: var(--space-3); }
.section-next a + a { margin-left: var(--space-2); }

/* Services directory: search + 3 filters + result count */
.dir-bar { display: grid; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-6); padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
@media (min-width: 768px) { .dir-bar { grid-template-columns: 1fr 1fr; } .dir-search { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .dir-bar { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .dir-search { grid-column: auto; } }
.dir-field { margin: 0; }
.dir-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.dir-status p { margin: 0; font-weight: 600; color: var(--text); }
.dir-empty { margin-top: var(--space-5); }
.svc-quote-line { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 600; color: var(--text); }
.svc-quote-line svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--brand-text); }
.svc-name a { color: var(--text); }
.svc-name a:hover { color: var(--brand-text); text-decoration: underline; }
select.field-input { appearance: auto; padding-right: var(--space-3); }

/* Service + category pages */
.sd-service-name { font-weight: 600; color: var(--brand-text); margin: 0 0 var(--space-2); }
.sd-facts a.link { font-weight: 600; }
.sd-related-meta { margin-top: auto; font-size: .875rem; font-weight: 600; color: var(--text-2); }
.sd-safe, .sd-fee-note, .plans-note { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-5); color: var(--text-2); }
.sd-safe svg, .sd-fee-note svg, .plans-note svg { width: 20px; height: 20px; flex: none; margin-top: 4px; color: var(--brand-text); }
.sd-price h3 { font-size: 1.0625rem; margin: var(--space-4) 0 var(--space-2); }
.sd-price h3:first-child { margin-top: 0; }
.sd-note { margin-top: var(--space-4); }
.doc-list li div strong { font-weight: 600; }

/* Plans */
.plan-for strong, .plan-builds { color: var(--text); }
.plan-builds { font-size: .9375rem; }
.quote-factors { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2) var(--space-5); }
@media (min-width: 640px) { .quote-factors { grid-template-columns: 1fr 1fr; } }
.quote-factors li { display: flex; gap: var(--space-2); align-items: flex-start; }
.quote-factors svg { width: 18px; height: 18px; flex: none; margin-top: 5px; color: var(--color-success); }
.plans-sub { margin: var(--space-7) 0 var(--space-4); text-align: center; }
.plan-sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .plan-sessions { grid-template-columns: 1fr 1fr; } }
.plan-session .link { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h); }
.hc-note { font-size: .9375rem; }

/* Request form */
.choice-stack { display: grid; gap: var(--space-2); }
.choice-stack .choice { align-items: flex-start; }
.choice-stack .choice small { display: block; font-weight: 400; color: var(--text-2); font-size: .875rem; line-height: 1.5; margin-top: 2px; }
.order-summary .order-edit { margin: 0; }
.order-summary > div { position: relative; }
.order-alt { margin-top: var(--space-6); color: var(--text-2); }

/* Finder results: several cards */
.finder-result { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); }

/* Team */
.team-sub { font-size: 1.0625rem; margin: var(--space-5) 0 var(--space-2); }
.team-more-body h4 { font-size: 1rem; margin: var(--space-4) 0 var(--space-2); }
.team-note { margin-top: var(--space-5); text-align: center; font-size: .9375rem; }

/* Founder profile */
.founder-grid { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 768px) { .founder-grid { grid-template-columns: 300px 1fr; gap: var(--space-8); } }
.founder-photo-col img { width: 100%; height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.founder-role { font-size: 1.125rem; font-weight: 600; color: var(--text); margin: 0; }
.founder-desc { color: var(--brand-text); font-weight: 600; margin: 0 0 var(--space-5); }
.founder-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.founder-cols { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .founder-cols { grid-template-columns: 1fr 1fr; } }

/* Our Firm */
.about-pillars { display: grid; gap: var(--space-5); }
@media (min-width: 900px) { .about-pillars { grid-template-columns: repeat(3, 1fr); } }
.about-pillars h2 { font-size: var(--fs-h3); margin-top: var(--space-3); }
.about-scope-note { margin-top: var(--space-6); }

/* Resources + legal pages */
.res-h2 { margin-top: var(--space-7); }
.res-note { margin-top: var(--space-6); }
.legal { max-width: 760px; }
.legal h2 { font-size: var(--fs-h3); margin-top: var(--space-6); }
.legal ul { padding-left: 1.2em; }
.legal li { margin-bottom: var(--space-2); }

/* Calendar timing text and source */
.cal-src { display: block; font-size: .8125rem; color: var(--text-2); margin-top: 2px; }

/* Contact map: click to load */
.contact-map-text { font-size: .9375rem; color: var(--text-2); margin: 0 0 var(--space-3); }
.contact-map-cta { padding: var(--space-5); text-align: center; display: grid; gap: var(--space-2); justify-items: center; }
.contact-map-frame .contact-map-open { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-h); }
.contact-map-open svg { width: 16px; height: 16px; }
.contact-map-frame.is-loaded > :not(iframe) { display: none; }
/* Inline links with an arrow/icon: keep the icon small everywhere */
.link { display: inline-flex; align-items: center; gap: var(--space-1); }
p .link, li .link { display: inline; }
.link svg { width: 16px; height: 16px; flex: none; vertical-align: -2px; margin-left: 2px; }
/* The directory bar is a grid once JavaScript is on (js-only-block forces block otherwise) */
.js .dir-bar.js-only-block { display: grid !important; }
/* Team grid: centre the cards when there are fewer than three */
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 360px)); justify-content: center; } }
/* Request form: with JavaScript, show only step 1 from the first paint (no layout jump when the steps start) */
.js #request-form:not(.is-stepped) .order-step:not([data-step="1"]),
.js #request-form:not(.is-stepped) [data-intent-part] { display: none; }

/* Home hero: each H1 statement on its own line (no full stops); trust points on one line on wide screens */
.hero-h1-lines [lang] > span { display: block; }
@media (min-width: 1200px) { .hero-v2 .hero-trust { flex-wrap: nowrap; gap: var(--space-2) var(--space-4); white-space: nowrap; } }

/* Home hero motion (owner request, 19 Oct 2026) — both stop under prefers-reduced-motion */
/* Typing eyebrow: the hidden copy keeps the space, the typed text sits on top, a blinking caret follows it */
.tw-on { position: relative; }
.tw-on .tw-ghost { visibility: hidden; }
.tw-on .tw-live { position: absolute; inset: 0; }
.tw-on .tw-live::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: currentColor; animation: tw-caret .8s steps(1) infinite; }
@keyframes tw-caret { 50% { opacity: 0; } }
.tw-on.tw-done .tw-live::after { display: none; }
/* "A clear view of your next steps": the red dot pulses softly */
.dash-dot { position: relative; flex: none; animation: dash-pulse 1.6s ease-in-out infinite; }
@keyframes dash-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, .45); transform: scale(1); }
  50% { box-shadow: 0 0 0 7px rgba(200, 16, 46, 0); transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .dash-dot { animation: none; box-shadow: 0 0 0 4px var(--color-tint); } .tw-on .tw-live::after { display: none; } }

/* Wide section heads (Home Services + How We Work, About How We Work): one line each on wide screens (owner request, 19 Oct 2026); wraps normally on phones */
.section-head-wide { max-width: none; }
@media (min-width: 1024px) { .section-head-wide h2, .section-head-wide p { white-space: nowrap; } }

/* ---------- Invoice + bKash / Rocket payment page (pay.html, initPay in app.js) ---------- */
.inv-section { padding-top: var(--space-6); }
.inv-loading { padding: 48px 0; color: var(--text-2); text-align: center; }
.inv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-5); align-items: start; }
@media (max-width: 1023.98px) { .inv-layout { grid-template-columns: minmax(0, 1fr); } .inv-aside { position: static; } }
.inv-notice { margin-bottom: var(--space-5); }
.inv-doc { position: relative; display: grid; gap: var(--space-4); min-width: 0; }
.inv-doc > * { min-width: 0; }
.inv-doc-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 3px solid var(--color-brand); }
.inv-brand { display: flex; align-items: center; gap: var(--space-3); }
.inv-brand strong { display: block; font-size: 1.125rem; }
.inv-brand small { display: block; color: var(--text-2); }
.inv-doc-title { text-align: right; min-width: 0; }
.inv-doc-title p { overflow-wrap: anywhere; }
.inv-doc-title h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-text); }
.inv-doc-title p { margin: 2px 0 8px; font-weight: 700; }
@media (max-width: 560px) { .inv-doc-title { text-align: left; } }
.num { font-variant-numeric: tabular-nums; }
.inv-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .8125rem; font-weight: 700; }
.inv-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.inv-s-sent { background: #eff6ff; color: #1d4ed8; }
.inv-s-sub { background: #fff7ed; color: #9a4a06; }
.inv-s-part { background: #ecfeff; color: #0e7490; }
.inv-s-paid { background: #ecfdf3; color: #157a3a; }
.inv-s-cancel, .inv-s-over { background: var(--color-tint); color: var(--brand-text); }
:root[data-theme="dark"] .inv-s-sent { background: #10203a; color: #93c5fd; }
:root[data-theme="dark"] .inv-s-sub { background: #2b210c; color: #fbbf24; }
:root[data-theme="dark"] .inv-s-part { background: #082f35; color: #67e8f9; }
:root[data-theme="dark"] .inv-s-paid { background: #0f2a1b; color: #4ade80; }
.inv-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
.inv-parties h2, .inv-sub { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); margin: 0 0 4px; }
.inv-parties p { margin: 0; font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.inv-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.inv-lines li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.inv-lines .ico-box { width: 44px; height: 44px; }
.inv-line-desc small { display: block; color: var(--text-2); font-size: .875rem; }
.inv-line-amt { font-weight: 600; white-space: nowrap; }
.inv-totals { margin: 0; display: grid; gap: 6px; justify-self: end; width: min(100%, 380px); }
.inv-totals div { display: flex; justify-content: space-between; gap: var(--space-4); }
.inv-totals dt { color: var(--text-2); }
.inv-totals dd { margin: 0; white-space: nowrap; }
.inv-grand { font-size: 1.125rem; font-weight: 800; }
.inv-grand dt { color: var(--text); }
.inv-left { border-top: 2px solid var(--text); padding-top: 8px; margin-top: 4px; font-weight: 800; font-size: 1.125rem; }
.inv-left dt { color: var(--text); }
.inv-small { font-size: .875rem; color: var(--text-2); margin: 0; }
.inv-doc .table-wrap { overflow-x: auto; }
.inv-pay-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.inv-pay-table th, .inv-pay-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.inv-pay-table .r { text-align: right; white-space: nowrap; }
.inv-pay-table td:first-child { white-space: nowrap; }
.inv-pay-table small { color: var(--text-2); }
.inv-pp { font-weight: 700; }
.inv-pp-verified { color: #157a3a; } .inv-pp-pending { color: #9a4a06; } .inv-pp-rejected { color: var(--brand-text); }
:root[data-theme="dark"] .inv-pp-verified { color: #4ade80; } :root[data-theme="dark"] .inv-pp-pending { color: #fbbf24; }
.inv-foot { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.inv-print-row { margin: 0; }
.inv-aside { position: sticky; top: calc(var(--header-h, 76px) + 16px); }
.inv-side-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (max-width: 380px) { .inv-methods { grid-template-columns: 1fr; } }
.inv-side-card h2 { font-size: 1.375rem; margin: 0; }
.inv-done { text-align: center; justify-items: center; }
.inv-done-ico svg { width: 48px; height: 48px; color: #157a3a; }
.inv-due { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--bg-alt); }
.inv-due strong { font-size: 1.75rem; }
.inv-methods { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.inv-methods legend { font-weight: 600; margin-bottom: var(--space-2); padding: 0; }
.inv-method { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: 10px 12px; border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.inv-method input { position: absolute; opacity: 0; pointer-events: none; }
.inv-method:has(input:checked) { border-color: var(--color-brand); background: var(--color-tint); }
.inv-method:has(input:focus-visible) { outline: 3px solid var(--color-focus, var(--color-brand)); outline-offset: 2px; }
.inv-method strong { display: block; line-height: 1.2; }
.inv-method small { color: var(--text-2); font-size: .8125rem; }
.inv-mbadge { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; font-weight: 800; font-size: .9rem; flex: none; }
.inv-mb-bkash { background: #d6246e; } .inv-mb-rocket { background: #8c3494; }
.inv-steps { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-alt); border: 1px solid var(--border); font-size: .9375rem; }
.inv-steps ol { margin: 0; padding-left: 1.25em; display: grid; gap: 4px; }
.inv-payto { margin: 0; display: grid; gap: var(--space-2); }
.inv-payto div { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface); border: 1px dashed var(--border); }
.inv-payto dt { font-size: .8125rem; color: var(--text-2); }
.inv-payto dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 1.1875rem; font-weight: 800; }
.inv-payto .inv-amt { color: #157a3a; }
:root[data-theme="dark"] .inv-payto .inv-amt { color: #4ade80; }
.inv-warn { display: flex; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); background: #fff7ed; color: #8a4105; font-size: .875rem; font-weight: 500; }
.inv-warn svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
:root[data-theme="dark"] .inv-warn { background: #2b210c; color: #fcd34d; }
.inv-pay-form .field { margin-bottom: 0; }
.inv-err { color: var(--color-error); font-size: var(--fs-small); font-weight: 600; margin: 0; }
.inv-err:empty { display: none; }
.inv-pay-form [aria-invalid] { border-color: var(--color-error); }
@media print {
  .site-header, .site-footer, .fab-wrap, .no-print, .skip-link, .mobile-menu { display: none !important; }
  .inv-section { padding: 0; }
  .inv-layout { display: block; }
  .inv-doc { border: 0; box-shadow: none; padding: 0; background: #fff; color: #000; }
  body { background: #fff; }
}
/* Pay an Invoice: find by number (pay.html without a link) */
.inv-find { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--space-6); align-items: start; padding-block: var(--space-4); }
@media (max-width: 860px) { .inv-find { grid-template-columns: minmax(0, 1fr); } }
.inv-find-intro { display: grid; gap: var(--space-3); align-content: start; }
.inv-find-intro h1 { font-size: var(--fs-h1); margin: 0; }
.inv-find-intro p { color: var(--text-2); margin: 0; }
.inv-find-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-weight: 600; }
.inv-find-form { display: grid; gap: var(--space-4); }
.inv-find-form h2 { font-size: 1.25rem; margin: 0; }
.inv-find-form .field { margin-bottom: 0; }
.sd-pay { display: flex; gap: var(--space-2); align-items: flex-start; font-size: .9375rem; }
.sd-pay svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--brand-text); }

/* ---------- Service Terms (terms.html): sticky contents + numbered sections ---------- */
.terms-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-7, 48px); align-items: start; }
@media (max-width: 1023.98px) { .terms-layout { grid-template-columns: minmax(0, 1fr); } }
.terms-toc { position: sticky; top: calc(var(--header-h, 76px) + 16px); max-height: calc(100vh - 120px); overflow-y: auto; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
@media (max-width: 1023.98px) { .terms-toc { position: static; max-height: none; } }
.terms-toc h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); margin: 0 0 var(--space-2); }
.terms-toc ol { margin: 0; padding-left: 1.6em; display: grid; gap: 2px; font-size: .9375rem; }
:lang(bn) .terms-toc ol { list-style-type: bengali; }
.terms-toc a { display: block; padding: 5px 0; color: var(--text-2); }
.terms-toc a:hover, .terms-toc a:focus-visible { color: var(--brand-text); }
.terms-body { max-width: 760px; }
.terms-body h2 { display: flex; align-items: baseline; gap: 12px; scroll-margin-top: calc(var(--header-h, 76px) + 16px); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.terms-n { flex: none; display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 8px; background: var(--color-tint); color: var(--brand-text); font-size: .95rem; font-weight: 800; }
.terms-summary { padding: var(--space-5); border-radius: var(--radius-md); background: var(--bg-alt); border: 1px solid var(--border); border-left: 4px solid var(--color-brand); margin-bottom: var(--space-5); }
.terms-summary h2 { margin-top: 0; border-top: 0; padding-top: 0; }
.terms-note { font-size: .875rem; margin: 0; }
.terms-date { font-size: .9375rem; color: var(--text-2); }

/* "Book a Consultation": a silver light reflection moves through the LETTERS only, left to right
   (owner request, 21 Oct 2026). The red button itself does not change. The sheen position is a registered
   custom property (@property) so browsers repaint it every frame. Off under prefers-reduced-motion and in
   forced-colors mode; plain white text where background-clip:text or @property is unsupported. */
@property --shine { syntax: "<percentage>"; inherits: false; initial-value: -40%; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .shine, .header-cta > span, a.btn-primary[href$="request.html"] > span[lang] {
    display: inline-block;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(100deg,
      #fff calc(var(--shine) - 14%),
      #e3e7ec calc(var(--shine) - 8%),
      #9aa5b4 calc(var(--shine) - 3%),
      #ffffff var(--shine),
      #9aa5b4 calc(var(--shine) + 3%),
      #e3e7ec calc(var(--shine) + 8%),
      #fff calc(var(--shine) + 14%));
    -webkit-background-clip: text; background-clip: text;
    animation: cta-text-shine 4s cubic-bezier(.45,.05,.35,1) infinite;
  }
  @media (max-width: 1279.98px) { .header-cta > .cta-long { display: none; } }
  @media (min-width: 1280px) { .header-cta > .cta-short { display: none; } }
}
@keyframes cta-text-shine {
  0%, 12% { --shine: -40%; }
  60%, 100% { --shine: 140%; }
}
@media (prefers-reduced-motion: reduce) {
  .shine, .header-cta > span, a.btn-primary[href$="request.html"] > span[lang] { animation: none; background: none; color: #fff; -webkit-text-fill-color: #fff; }
}
@media (forced-colors: active) {
  .shine, .header-cta > span, a.btn-primary[href$="request.html"] > span[lang] { animation: none; background: none; color: ButtonText; -webkit-text-fill-color: ButtonText; }
}

/* Video Guides (video-guides.html) */
.vg-empty { max-width: 640px; margin: 0 auto; text-align: center; display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--bg-alt); }
.vg-empty h2 { margin: 0; font-size: 1.375rem; }
.vg-empty p { margin: 0; color: var(--text-2); }
.vg-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-2) !important; }
.vg-note { margin: var(--space-5) 0 0; font-size: .875rem; color: var(--text-2); text-align: center; }
.post-disclaimer { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: .875rem; color: var(--text-2); }

/* Articles ↔ Video Guides switch (insights.html, video-guides.html) */
.learn-switch { display: inline-flex; gap: 4px; margin-top: var(--space-5); padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); }
.learn-switch a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; color: var(--text-2); }
.learn-switch a svg { width: 18px; height: 18px; }
.learn-switch a:hover { color: var(--brand-text); }
.learn-switch a[aria-current="page"] { background: var(--color-brand); color: #fff; }
.learn-switch [data-icon] { display: inline-flex; align-items: center; }
.video-sum { margin: 4px 0 0; font-size: .9rem; color: var(--text-2); }

/* Articles pasted from Word: keep their formatting readable on every screen */
.post .prose table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; border: 0; margin: 1.2em 0; }
.post .prose table td, .post .prose table th { border: 1px solid var(--border); padding: 8px 10px; min-width: 80px; }
.post .prose img { max-width: 100% !important; height: auto !important; }
.post .prose p:empty { min-height: 1em; }
/* Pasted colours (tidyPastedColors in app.js) */
:root[data-theme="dark"] .post .prose [data-pc] { color: var(--pc-dark) !important; }
.post .prose [data-pbg], .post .prose [data-pbg] * { color: #17212B; }
:root[data-theme="dark"] .post .prose [data-pbg] a { color: #9b0c22; }
/* Bold/italic inside a coloured span keep that colour (site CSS gives strong the theme colour) */
.post .prose [style*="color"] strong, .post .prose [style*="color"] b, .post .prose [style*="color"] em, .post .prose [style*="color"] i, .post .prose [style*="color"] u { color: inherit; }
:root[data-theme="dark"] .post .prose { color: #e9ebef; }

/* Official Links (resources.html) */
.res-search { max-width: 640px; display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.res-search-box { position: relative; }
.res-search-box svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-2); pointer-events: none; }
.res-search-box input { width: 100%; min-height: 52px; padding: 0 16px 0 44px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; }
.res-search-box input:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-tint); }
.res-count { margin: 0; font-size: .875rem; color: var(--text-2); min-height: 1.2em; }
.res-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.res-tips { margin-bottom: var(--space-6); }
.res-group { scroll-margin-top: calc(var(--header-h, 76px) + 16px); margin-bottom: var(--space-7, 48px); }
.res-group > h2 { display: flex; align-items: center; gap: var(--space-3); font-size: 1.5rem; margin: 0 0 var(--space-2); }
.res-intro { margin: 0 0 var(--space-4); color: var(--text-2); }
.res-empty { padding: var(--space-5); text-align: center; color: var(--text-2); border: 1px dashed var(--border); border-radius: var(--radius-md); }
.res-checked { margin-top: var(--space-5); font-size: .875rem; color: var(--text-2); }

/* ---------- Invoice / receipt as an A4 sheet (pay.html) ---------- */
.inv-layout { grid-template-columns: minmax(0, 820px) minmax(0, 380px); justify-content: center; }
@media (max-width: 1199.98px) { .inv-layout { grid-template-columns: minmax(0, 1fr); } }
.inv-doc-col { min-width: 0; display: grid; gap: var(--space-3); justify-items: center; }
.inv-doc.a4 {
  /* paper stays white in dark mode too; reads as BANIK Advisory letterhead */
  --text: #17212B; --text-2: #4B5563; --border: #E5E7EB; --bg-alt: #F7F8FA; --brand-text: #B00E28;
  position: relative; width: 100%; max-width: 210mm; min-height: 297mm; margin: 0 auto; padding: 14mm 15mm 0;
  display: flex; flex-direction: column; gap: 18px; background: #fff; color: var(--text); font-size: 13.5px; line-height: 1.5;
  border-radius: 3px; box-shadow: 0 1px 2px rgba(23,33,43,.08), 0 18px 48px rgba(23,33,43,.14); overflow: hidden;
}
/* red edge on the left like a printed letterhead */
.inv-doc.a4::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: linear-gradient(#C8102E, #8E0B21); }
.lh-mark { position: absolute; z-index: 0; left: 50%; top: 54%; width: 58%; max-width: 380px; transform: translate(-50%, -50%); opacity: .035; pointer-events: none; }
.lh-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.inv-logo { height: 58px; width: auto; display: block; }
.lh-contact { font-style: normal; display: grid; gap: 1px; text-align: right; font-size: 11.5px; line-height: 1.5; color: var(--text-2); }
.lh-contact strong { color: var(--text); font-size: 12.5px; letter-spacing: .02em; }
.lh-web { color: #B00E28; font-weight: 600; }
.lh-rule { position: relative; height: 1px; background: #D1D5DB; margin-top: -4px; }
.lh-rule span { position: absolute; left: 0; top: -1px; width: 72px; height: 3px; background: #C8102E; }
.inv-titlebar { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.inv-doc.a4 .inv-doc-title { text-align: left; }
.inv-doc.a4 .inv-doc-title h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #17212B; line-height: 1; }
.inv-no { margin: 6px 0 8px; font-size: 14px; font-weight: 700; color: #B00E28; letter-spacing: 0; }
.inv-doc.a4 .inv-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0; }
.inv-doc.a4 .inv-meta div { padding: 2px 0 2px 16px; margin-left: 16px; border-left: 1px solid var(--border); background: none; border-radius: 0; }
.inv-doc.a4 .inv-meta div:first-child { margin-left: 0; border-left: 0; padding-left: 0; }
.inv-meta dt { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); }
.inv-meta dd { margin: 2px 0 0; font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.inv-doc.a4 .inv-parties { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; align-items: stretch; }
.inv-doc.a4 .inv-parties h2 { margin: 0 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #B00E28; }
.inv-doc.a4 .inv-parties p { margin: 0; font-size: 13px; color: var(--text-2); }
.inv-doc.a4 .inv-parties p strong { color: var(--text); font-size: 14px; }
.inv-due-box { display: grid; align-content: center; gap: 2px; padding: 14px 16px; border-radius: 8px; background: #17212B; color: #fff; }
.inv-due-box span { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: #CBD5E1; }
.inv-due-box strong { font-size: 24px; line-height: 1.15; }
.inv-due-box small { font-size: 11.5px; color: #CBD5E1; }
.inv-due-box small b { color: #fff; }
.inv-due-box.is-paid { background: #F0FAF3; color: #0F5D2C; border: 1px solid #BFE3CB; }
.inv-due-box.is-paid span { color: #157a3a; }
.inv-items { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-items th { background: none; color: #17212B; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; padding: 9px 10px; text-align: left; border-top: 2px solid #17212B; border-bottom: 1px solid #17212B; }
.inv-items td { padding: 11px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.inv-items tbody tr:nth-child(even) td { background: rgba(247,248,250,.8); }
.inv-items .r { text-align: right; white-space: nowrap; }
.inv-items .c { text-align: center; width: 36px; color: var(--text-2); }
.inv-item-ico { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: #C8102E; }
.inv-item-ico svg { width: 15px; height: 15px; }
.inv-sum-row { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.inv-doc.a4 .inv-totals { width: 100%; justify-self: stretch; font-size: 13.5px; }
.inv-doc.a4 .inv-grand { font-size: 15px; }
.inv-doc.a4 .inv-left { font-size: 15px; background: #FDF2F2; margin-top: 6px; padding: 9px 12px; border-top: 0; border-radius: 6px; }
.inv-disc dt, .inv-disc dd { color: #157a3a !important; }
.inv-notes { display: grid; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.inv-notes p { margin: 0; }
.inv-howpay { padding: 10px 12px; border-left: 3px solid #C8102E; background: #FDF2F2; border-radius: 0 6px 6px 0; color: var(--text); }
.inv-howpay ul { margin: 6px 0; padding-left: 1.1em; }
.inv-howpay p { color: var(--text-2); }
/* PAID seal: sits in the free space beside the totals */
.inv-seal-wrap { display: flex; justify-content: center; padding: 4px 0; }
.inv-seal { display: block; width: 150px; height: 150px; transform: rotate(-11deg); opacity: .92; }
.inv-doc.a4 .inv-sub { margin: 4px 0 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: #B00E28; }
.inv-doc.a4 .inv-pay-table { font-size: 12px; }
.inv-doc.a4 .inv-foot { margin: auto -15mm 0; padding: 12px 0 0; border-top: 0; display: grid; gap: 3px; font-size: 11px; color: var(--text-2); text-align: center; }
.inv-doc.a4 .inv-foot p { margin: 0; padding: 0 15mm; }
.inv-terms-link { color: #1D4ED8; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.inv-terms-link:hover { color: #1E40AF; }
.inv-thanks { font-weight: 700; color: var(--text); font-size: 13px; }
.lh-foot { margin-top: 10px; padding: 9px 15mm; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; background: #17212B; color: #E5E7EB; font-size: 10.5px; letter-spacing: .02em; border-top: 3px solid #C8102E; }
.lh-foot span + span::before { content: "•"; margin: 0 10px; color: #C8102E; }
.inv-print-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.inv-coupon { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 8px 12px; }
.inv-coupon summary { cursor: pointer; font-weight: 600; color: var(--brand-text); }
.inv-coupon-row { display: flex; gap: 8px; margin-top: 8px; }
.inv-coupon-row input { text-transform: uppercase; letter-spacing: .08em; }
.inv-coupon-ok { display: flex; gap: 6px; align-items: center; color: #157a3a; font-weight: 600; }
.inv-coupon-ok svg { width: 16px; height: 16px; }
/* PDF capture: exact A4 width */
.inv-doc.a4.pdf-export { width: 210mm; max-width: none; min-height: 296mm; box-shadow: none; border-radius: 0; }
@media (max-width: 860px) {
  .inv-doc.a4 { min-height: 0; padding: 22px 16px 0 20px; font-size: 13px; }
  .inv-doc.a4 .inv-parties, .inv-sum-row { grid-template-columns: minmax(0, 1fr); }
  .inv-items .c { display: none; }
  .lh-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lh-contact { text-align: left; }
  .inv-logo { height: 44px; }
  .inv-doc.a4 .inv-doc-title h1 { font-size: 26px; }
  .inv-doc.a4 .inv-foot { margin: auto -16px 0 -20px; }
  .inv-doc.a4 .inv-foot p { padding: 0 16px; }
  .lh-foot { padding: 9px 16px; }
  .inv-doc.a4 .inv-pay-table { display: block; overflow-x: auto; }
}
@media (max-width: 480px) { .inv-items th:nth-child(4), .inv-items td:nth-child(4) { display: none; } }
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; }
  .inv-layout { display: block; }
  .inv-doc.a4 { width: 210mm; max-width: none; min-height: 297mm; margin: 0; box-shadow: none; border-radius: 0; padding: 14mm 15mm 0; }
  .inv-doc.a4 .inv-parties { grid-template-columns: minmax(0, 1fr) 250px; }
  .inv-sum-row { grid-template-columns: minmax(0, 1fr) 280px; }
  .lh-head { flex-direction: row; align-items: center; }
  .lh-contact { text-align: right; }
  .inv-doc.a4 .inv-foot { margin: auto -15mm 0; }
  .inv-doc.a4 .inv-foot p { padding: 0 15mm; }
  .lh-foot { padding: 9px 15mm; }
  .inv-items .c, .inv-items th:nth-child(4), .inv-items td:nth-child(4) { display: table-cell; }
  .inv-print-row { display: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Invoice viewer: page 1 (invoice) + page 2 (guide), scrollable on desktop ---------- */
.inv-viewer { width: 100%; display: grid; gap: var(--space-3); }
.inv-viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.inv-viewer-pages { font-size: .875rem; font-weight: 700; color: var(--text-2); letter-spacing: .04em; }
.inv-pages { display: grid; gap: 18px; justify-items: center; }
@media (min-width: 1200px) {
  .inv-pages { max-height: calc(100vh - 170px); overflow-y: auto; padding: 18px; border-radius: 12px; background: #DDE1E7; overscroll-behavior: contain; }
  [data-theme="dark"] .inv-pages { background: #0f151c; }
}
.inv-pages.pdf-export-wrap { max-height: none; overflow: visible; padding: 0; gap: 0; background: #fff; border-radius: 0; }
.inv-page + .inv-page { break-before: page; }
/* Page 2 — guide */
.inv-guide .g-head { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 20px; align-items: center; }
.g-kicker { margin: 0 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #B00E28; }
.inv-guide h2 { margin: 0 0 6px; font-size: 22px; line-height: 1.2; color: #17212B; }
.inv-guide .g-head p { margin: 0; color: var(--text-2); font-size: 13px; }
.g-qr { margin: 0; text-align: center; }
.g-qr-img { width: 120px; height: 120px; margin: 0 auto; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.g-qr-img img, .g-qr-img canvas { width: 100% !important; height: 100% !important; display: block; }
.g-qr figcaption { margin-top: 4px; font-size: 10.5px; color: var(--text-2); }
.g-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.g-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.g-no { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #C8102E; color: #fff; font-weight: 800; font-size: 14px; }
.g-step h3 { margin: 4px 0 6px; font-size: 14.5px; display: flex; gap: 8px; align-items: center; color: #17212B; }
.g-step h3 svg { width: 16px; height: 16px; color: #C8102E; }
.g-step p { margin: 0 0 6px; font-size: 12.5px; color: var(--text-2); }
.g-box { margin: 6px 0 0; display: grid; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--bg-alt); font-size: 12.5px; }
.g-box div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
.g-box dt { color: var(--text-2); }
.g-box dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.g-list { margin: 0 0 6px; padding-left: 1.1em; font-size: 12.5px; }
.g-safe { display: flex; gap: 10px; padding: 10px 12px; border-left: 3px solid #C8102E; background: #FDF2F2; border-radius: 0 8px 8px 0; font-size: 12.5px; }
.g-safe svg { flex: none; width: 16px; height: 16px; color: #C8102E; margin-top: 2px; }
.g-safe p { margin: 2px 0 0; color: var(--text-2); }
.g-help { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--text-2); }
.g-help strong { color: var(--text); }
@media (max-width: 640px) { .inv-guide .g-head { grid-template-columns: minmax(0, 1fr); } .g-qr { justify-self: start; } .g-box div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---------- Agreement status card (pay.html aside) ---------- */
.inv-agr-card { margin-bottom: var(--space-4); }
.inv-agr-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.inv-agr-head h2 { margin: 0; font-size: 1.125rem; }
.inv-agr-head .num { font-size: .875rem; color: var(--text-2); }
.inv-agr-steps { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.inv-agr-steps li { display: flex; gap: 8px; align-items: flex-start; font-size: .9375rem; color: var(--text-2); }
.inv-agr-steps li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.inv-agr-steps li.done { color: var(--text); }
.inv-agr-steps li.done svg { color: var(--color-success); }
.inv-agr-steps li.now { color: var(--text); font-weight: 600; }
.inv-agr-steps li.now svg { color: var(--color-brand); }
.inv-agr-card.is-confirmed { border-color: var(--color-success); }
.inv-agr-hint { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; }
.inv-agr-hint svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--color-brand); }

/* ---------- Agreement pop-up ---------- */
html.agr-open { overflow: hidden; }
.agr-modal { width: min(980px, 100vw); max-width: 100vw; height: min(94vh, 100%); max-height: 100vh; padding: 0; border: 0; border-radius: 14px; background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.agr-modal::backdrop { background: rgba(15, 21, 28, .62); backdrop-filter: blur(2px); }
.agr-modal[open] { display: block; }
.agr-modal-in { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.agr-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
.agr-modal-head h2 { margin: 2px 0 0; font-size: 1.25rem; }
.agr-modal-kicker { margin: 0; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-text); }
.agr-x { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; }
.agr-x svg { width: 20px; height: 20px; }
.agr-modal-body { overflow-y: auto; padding: 18px 20px 24px; background: var(--bg-alt, #F7F8FA); display: grid; gap: 18px; }
@media (max-width: 640px) { .agr-modal { width: 100vw; height: 100%; border-radius: 0; } .agr-modal-body { padding: 12px; } }
.agr-loading { padding: 40px; text-align: center; color: #4B5563; }
.agr-signform { padding: 18px 20px; border: 2px solid var(--color-brand); border-radius: 12px; background: var(--surface); display: grid; gap: 4px; }
.agr-signform h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 2px; font-size: 1.125rem; }
.agr-signform h3 svg { width: 20px; height: 20px; color: var(--color-brand); }
.agr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 560px) { .agr-grid { grid-template-columns: minmax(0, 1fr); } }
.agr-geo { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.agr-geo svg { width: 16px; height: 16px; }
.agr-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.agr-record { display: flex; gap: 8px; margin: 8px 0 0; font-size: .8125rem; color: var(--text-2); }
.agr-record svg { flex: none; width: 15px; height: 15px; margin-top: 3px; }

/* ---------- Signature pad (assets/js/esign.js) ---------- */
.es { display: grid; gap: 8px; }
.es-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--bg-alt, #F1F3F5); width: max-content; }
.es-tabs button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; }
.es-tabs button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.es-canvas-wrap { position: relative; height: 190px; border: 1.5px dashed var(--color-border-strong); border-radius: 10px; background: #fff; }
.es-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; border-radius: 10px; }
.es-line { position: absolute; left: 16px; right: 16px; bottom: 44px; border-bottom: 1px solid #C3C8D0; color: #9AA1AC; font-size: 14px; line-height: 0; padding-bottom: 6px; pointer-events: none; }
.es.has-ink .es-line { color: transparent; }
.es-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .875rem; color: var(--text-2); }
.es-clear { min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.es-typed { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--color-border-strong); border-radius: 8px; font: inherit; background: var(--surface); color: var(--text); }
.es-preview { min-height: 110px; display: flex; align-items: center; padding: 8px 18px; border: 1.5px dashed var(--color-border-strong); border-radius: 10px; background: #fff; color: #0d2a6b; font-family: "BA Sig Great Vibes", cursive; font-size: 54px; line-height: 1.2; overflow: hidden; white-space: nowrap; }

/* ---------- Agreement document (pop-up, agreement.html, PDF) ---------- */
.agr-doc, .agr-paper { --text: #17212B; --text-2: #4B5563; --border: #E5E7EB; --bg-alt: #F7F8FA; position: relative; background: #fff; color: #17212B; border-radius: 6px; box-shadow: 0 1px 2px rgba(23,33,43,.08), 0 12px 32px rgba(23,33,43,.12); }
.agr-doc { padding: 26px 30px; }
.agr-paper { width: 100%; max-width: 210mm; margin: 0 auto; padding: 14mm 15mm 0; overflow: hidden; display: flex; flex-direction: column; gap: 14px; }
.agr-paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: linear-gradient(#C8102E, #8E0B21); }
.agr-paper .inv-foot { margin: 24px -15mm 0; padding: 0; }
.agr-paper .lh-foot { margin-top: 0; }
@media (max-width: 860px) { .agr-paper { padding: 20px 16px 0 20px; } .agr-paper .lh-head { flex-direction: column; align-items: flex-start; gap: 10px; } .agr-paper .lh-contact { text-align: left; } .agr-paper .inv-foot { margin: 20px -16px 0 -20px; } }
.agr-body { font-size: 11pt; line-height: 1.6; color: #17212B; }
.agr-body p { margin: 0 0 7px; text-align: justify; text-justify: inter-word; }
.agr-body h2 { margin: 18px 0 8px; font-size: 11.5pt; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #17212B; }
.agr-body section:first-of-type h2 { margin-top: 6px; }
.agr-n { display: inline-block; min-width: 2.2em; font-weight: 700; color: #B00E28; }
.agr-title { text-align: center; padding: 6px 0 12px; border-bottom: 1px solid #E5E7EB; margin-bottom: 8px; }
.agr-kicker { margin: 0 !important; font-size: 9pt; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #B00E28; text-align: center !important; }
.agr-title h1 { margin: 4px 0 6px; font-size: 18pt; line-height: 1.2; color: #17212B; }
.agr-ref { margin: 0 !important; font-size: 9.5pt; color: #4B5563; text-align: center !important; }
.agr-table { width: 100%; border-collapse: collapse; font-size: 10pt; margin: 4px 0 8px; }
.agr-table th { text-align: left; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .08em; padding: 7px 8px; border-top: 2px solid #17212B; border-bottom: 1px solid #17212B; }
.agr-table td { padding: 7px 8px; border-bottom: 1px solid #E5E7EB; vertical-align: top; }
.agr-table .r { text-align: right; white-space: nowrap; }
.agr-table tfoot td { border-bottom: 0; }
.agr-sign { margin-top: 18px; break-inside: avoid; }
.agr-sigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
@media (max-width: 560px) { .agr-sigs { grid-template-columns: minmax(0, 1fr); } }
.agr-sig { break-inside: avoid; }
.agr-sig-for { margin: 0 0 4px !important; font-size: 9pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #4B5563; text-align: left !important; }
.agr-sig-box { height: 74px; display: flex; align-items: flex-end; border-bottom: 1.5px solid #17212B; padding-bottom: 4px; }
.agr-sig-img { max-height: 70px; max-width: 100%; }
.agr-sig-empty { font-size: 9.5pt; color: #9AA1AC; font-style: italic; }
.agr-sig-name { margin: 6px 0 0 !important; font-weight: 700; text-align: left !important; }
.agr-sig-meta { margin: 0 !important; font-size: 9pt; color: #4B5563; text-align: left !important; }
.agr-cert { margin-top: 26px; break-before: page; }
.agr-cert > h2 { padding-bottom: 8px; border-bottom: 2px solid #17212B; }
.agr-cert > p { font-size: 9.5pt; color: #4B5563; }
.agr-hash { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 8pt; word-break: break-all; }
.agr-cert h3 { margin: 12px 0 6px; font-size: 10.5pt; }
.agr-cert-t { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 9pt; break-inside: avoid; }
.agr-cert-t caption { text-align: left; font-weight: 800; font-size: 10pt; padding: 4px 0; color: #B00E28; }
.agr-cert-t th { width: 34%; text-align: left; font-weight: 600; color: #4B5563; padding: 5px 8px; background: #F7F8FA; border: 1px solid #E5E7EB; vertical-align: top; }
.agr-cert-t td { padding: 5px 8px; border: 1px solid #E5E7EB; overflow-wrap: anywhere; word-break: break-word; }
.agr-events { margin: 0; padding-left: 1.2em; font-size: 9pt; color: #4B5563; }
.agr-events span { color: #17212B; font-weight: 600; }
.agr-cert-note { font-size: 8.5pt !important; color: #6B7280; }
/* PDF capture of the agreement text (letterhead is drawn by the PDF on every page) */
.agr-body.pdf-export { width: 210mm; padding: 0 18mm; background: #fff; }
/* Agreement page */
.agr-section .container { max-width: 900px; }
.agr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.agr-top h1 { margin: 2px 0 8px; font-size: 1.6rem; }
.agr-status { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.agr-status li { display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 999px; background: var(--bg-alt, #F1F3F5); font-size: .875rem; color: var(--text-2); }
.agr-status li svg { width: 16px; height: 16px; }
.agr-status li.done { background: var(--color-success-bg); color: var(--color-success); font-weight: 600; }
.agr-top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media print { .agr-top, .agr-lang-note { display: none !important; } .agr-paper { box-shadow: none; max-width: none; } }

/* ---------- Payment methods with official logos + the "how to send" box (pay.html) ---------- */
.inv-methods { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.inv-method { flex-direction: column; justify-content: center; gap: 4px; min-height: 78px; padding: 10px 8px; text-align: center; }
.inv-mlogo { display: block; width: auto; max-width: 100%; height: 34px; object-fit: contain; }
.inv-method small { font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.inv-method:has(input:checked)::after { content: "✓"; position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--color-brand); color: #fff; font-size: 11px; font-weight: 800; }
:root[data-theme="dark"] .inv-method { background: #fff; }
:root[data-theme="dark"] .inv-method small { color: #4B5563; }
:root[data-theme="dark"] .inv-method:has(input:checked) { background: #FDF2F2; }
.pay-guide { --pg: #C8102E; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); }
.pay-guide.pg-bkash { --pg: #E2136E; } .pay-guide.pg-nagad { --pg: #EC1C24; } .pay-guide.pg-rocket { --pg: #8C3494; }
.pg-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border-top: 4px solid var(--pg); border-bottom: 1px solid #EEF0F3; }
.pg-head img { height: 34px; width: auto; max-width: 96px; object-fit: contain; flex: none; }
.pg-head strong { display: block; color: #17212B; font-size: 1rem; }
.pg-head span { font-size: .8125rem; color: #4B5563; }
.pg-fields { margin: 0; padding: 12px 14px 4px; display: grid; gap: 8px; }
.pg-fields > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--bg-alt); }
.pg-fields dt { font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.pg-fields dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 1.125rem; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.pg-fields .pg-to { background: color-mix(in srgb, var(--pg) 9%, var(--surface)); box-shadow: inset 3px 0 0 var(--pg); }
.pg-fields .pg-to dd { font-size: 1.375rem; letter-spacing: .02em; }
.pg-amt { color: #157a3a; }
:root[data-theme="dark"] .pg-amt { color: #4ade80; }
.pg-copy { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; }
.pg-copy:hover { border-color: var(--pg); color: var(--pg); }
.pg-steps { list-style: none; margin: 0; padding: 8px 14px 14px; display: grid; gap: 0; counter-reset: none; }
.pg-steps li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 6px 0; font-size: .9375rem; line-height: 1.5; }
.pg-steps li + li::before { content: ""; position: absolute; left: 12px; top: -6px; height: 12px; border-left: 2px solid color-mix(in srgb, var(--pg) 30%, transparent); }
.pg-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pg); color: #fff; font-size: .8125rem; font-weight: 800; }
.pm-ico { height: 16px; width: auto; max-width: 44px; object-fit: contain; vertical-align: -3px; margin-right: 6px; }
.inv-howpay ul, .g-list { list-style: none; padding-left: 0; }
.inv-howpay li, .g-list li { margin: 3px 0; }

/* ---------- About: at a glance (key facts) ---------- */
.glance { margin: 0 auto; max-width: 920px; display: grid; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.glance > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-4); padding: 14px 20px; }
.glance > div + div { border-top: 1px solid var(--border); }
.glance > div:nth-child(even) { background: var(--bg-alt); }
.glance dt { font-weight: 700; color: var(--brand-text); }
.glance dd { margin: 0; color: var(--text); }
@media (max-width: 640px) { .glance > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 16px; } }
@media (prefers-reduced-motion: reduce) { .site-header::before, .site-header .header-inner, .brand img { transition: none; } }

/* Signature styles (typed) and ink colours */
.es-colors { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.es-colors-label { font-size: .875rem; font-weight: 600; color: var(--text-2); margin-right: 4px; }
.es-color { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; background: var(--ink); box-shadow: 0 0 0 1px var(--color-border-strong); cursor: pointer; }
.es-color.on { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px rgba(0,0,0,.08); }
.es-color:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.es-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 4px; }
.es-font { min-height: 60px; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; color: var(--es-ink, #0d2a6b); cursor: pointer; overflow: hidden; white-space: nowrap; font-size: 22px; line-height: 1.3; text-align: center; }
.es-font span { display: inline-block; transform-origin: center; }
.es-font.on { border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); background: #FDF2F2; }
.es-font:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 420px) { .es-fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Very large screens: scale the whole site up (like browser zoom) so it never looks tiny or lost on 2K / 4K / ultrawide ----------
   Layout stays the same; everything grows in proportion. Not on the admin panel, nor on the invoice/agreement pages
   (their PDF builder and the signature pad need exact pixels: body.no-zoom). */
@media (min-width: 1680px) { body:not(.admin):not(.no-zoom) { zoom: 1.1; } }
@media (min-width: 1880px) { body:not(.admin):not(.no-zoom) { zoom: 1.25; } }
@media (min-width: 2300px) { body:not(.admin):not(.no-zoom) { zoom: 1.4; } }
@media (min-width: 2500px) { body:not(.admin):not(.no-zoom) { zoom: 1.5; } }
@media (min-width: 2900px) { body:not(.admin):not(.no-zoom) { zoom: 1.75; } }
@media (min-width: 3400px) { body:not(.admin):not(.no-zoom) { zoom: 2; } }
@media (min-width: 4600px) { body:not(.admin):not(.no-zoom) { zoom: 2.5; } }
@media (min-width: 5600px) { body:not(.admin):not(.no-zoom) { zoom: 3; } }
.sd-guide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 0; }
.sd-guide span { color: var(--text-2); font-size: var(--fs-small); }
/* e-sign: draw tools (pen / eraser / undo) and upload */
.es-tools { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.es-tool-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--bg-alt, #F1F3F5); }
.es-tool { min-height: 38px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-weight: 600; color: var(--text-2); cursor: pointer; }
.es-tool.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.es-clear:disabled { opacity: .45; cursor: default; }
.es-canvas.is-eraser { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='8.5' fill='white' fill-opacity='.6' stroke='%2317212B' stroke-width='1.5'/%3E%3C/svg%3E") 10 10, cell; }
.es-row { flex-wrap: wrap; }
.es-drop { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 22px 16px; border: 1.5px dashed var(--color-border-strong); border-radius: 10px; background: var(--surface); cursor: pointer; }
.es-drop:hover, .es-drop:focus-within { border-color: var(--color-brand); background: var(--color-tint, #FDF2F2); }
.es-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.es-drop-t { font-weight: 700; color: var(--brand-text, #B00E28); }
.es-up { display: grid; gap: 8px; margin-top: 8px; }
.es-up-preview { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 12px; border: 1px solid var(--border); border-radius: 10px;
  background-color: #fff; background-image: linear-gradient(45deg, #F1F3F5 25%, transparent 25%, transparent 75%, #F1F3F5 75%), linear-gradient(45deg, #F1F3F5 25%, transparent 25%, transparent 75%, #F1F3F5 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.es-up-preview img { max-width: 100%; max-height: 150px; }
.es-up-range { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--text-2); margin: 0; }
.es-up-range input { flex: 1; min-height: 32px; accent-color: var(--color-brand); }
.es-err { margin: 4px 0 0; font-size: .875rem; color: var(--brand-text, #B00E28); }
.es-err:empty { display: none; }