/* ==========================================================================
   VELKI AGENT LIST DIRECTORY — STYLESHEET (velki9xagentlist.com)
   Yellow page, white cards, dark readable type. Mobile-first.
   No external fonts, no frameworks, no runtime dependencies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Yellow brand scale */
  --y-50:  #FFFBEA;
  --y-100: #FFF3C4;
  --y-200: #FCE588;
  --y-300: #FADB5F;
  --y-400: #F7C948;
  --y-500: #F0B429;   /* primary brand yellow */
  --y-600: #DE911D;
  --y-700: #CB6E17;
  --y-800: #8D4B0F;

  /* Page + surfaces */
  --bg:        #FFD83D;   /* dominant yellow page */
  --bg-2:      #FFCE1F;   /* deeper yellow band */
  --surface:   #FFFFFF;   /* content cards */
  --surface-2: #FFFDF5;   /* subtle card */

  /* Ink */
  --ink:    #1A1A1A;
  --ink-2:  #3D3D3D;
  --ink-3:  #5F5F5F;
  --ink-on-yellow-2: #4A3A00;

  /* Lines */
  --line:     #E8E2D0;
  --line-2:   #D9CFA8;
  --line-y:   #C99A09;

  /* Functional */
  --ok:        #0E7A3D;
  --ok-bg:     #E4F5EA;
  --wait:      #8A5A00;
  --wait-bg:   #FFF3C4;
  --off:       #6B6B6B;
  --off-bg:    #EFEFEF;
  --danger:    #B3261E;
  --danger-bg: #FDECEA;
  --wa:        #25D366;
  --wa-dark:   #0B7C45;

  /* Effects */
  --sh-1: 0 1px 2px rgba(26,26,26,.06);
  --sh-2: 0 4px 14px rgba(26,26,26,.09);
  --sh-3: 0 12px 34px rgba(26,26,26,.13);

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --container: 1150px;
  --header-h: 66px;

  --font: "Segoe UI", system-ui, -apple-system, "Noto Sans Bengali",
          "Nirmala UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 14px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

a { color: #8A4B00; text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 {
  margin: 0 0 .55em;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  font-weight: 800;
}
h1 { font-size: clamp(1.75rem, 4.2vw, 2.7rem); }
h2 { font-size: clamp(1.35rem, 2.8vw, 1.9rem); }
h3 { font-size: clamp(1.05rem, 1.9vw, 1.22rem); font-weight: 750; }
h4 { font-size: 1rem; font-weight: 750; }
p  { margin: 0 0 1.05em; }

ul, ol { padding-left: 1.3rem; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }

:lang(bn) { line-height: 1.85; }

::selection { background: var(--ink); color: var(--y-300); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff;
  padding: .7rem 1.1rem; border-radius: 0 0 var(--r-sm) 0;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 18px;
}

.section { padding: clamp(38px, 5.5vw, 66px) 0; }
.section--tight { padding: clamp(26px, 3.5vw, 40px) 0; }
.section--band { background: transparent; border-block: 1px solid var(--line-y); }

.section-head { max-width: 760px; margin-bottom: 1.8rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { color: var(--ink-on-yellow-2); font-size: 1.03rem; margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-size: .7rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-y);
  padding: .34rem .8rem;
  border-radius: var(--r-pill);
  margin-bottom: .8rem;
}

.grid { display: grid; gap: 1.1rem; }
@media (min-width: 680px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 680px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 680px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font: inherit; font-weight: 700; line-height: 1.25;
  padding: .72rem 1.3rem;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease,
              background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }

.btn--primary {
  background: var(--ink); color: #fff; border-color: var(--ink);
  box-shadow: var(--sh-2);
}
.btn--primary:hover { background: #000; color: var(--y-300); box-shadow: var(--sh-3); }

.btn--gold {
  background: var(--y-500); color: var(--ink); border-color: var(--y-700);
  box-shadow: var(--sh-2);
}
.btn--gold:hover { background: var(--y-400); color: var(--ink); }

.btn--outline {
  background: var(--surface); color: var(--ink); border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: #fff; }

.btn--wa { background: var(--wa-dark); color: #fff; border-color: var(--wa-dark); }
.btn--wa:hover { background: #096636; color: #fff; }

.btn--sm { padding: .45rem .9rem; font-size: .86rem; border-width: 1px; }
.btn--lg { padding: .88rem 1.7rem; font-size: 1.04rem; }
.btn--block { width: 100%; }

.btn[aria-disabled="true"],
.btn:disabled {
  background: var(--off-bg); color: var(--off); border-color: var(--line);
  cursor: not-allowed; box-shadow: none; pointer-events: none;
}

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-row.center { justify-content: center; }

/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--y-500);
  border-bottom: 2px solid var(--y-700);
}
.header-inner {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: .9rem; justify-content: space-between;
}

.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; flex: 0 1 auto; min-width: 0;
}
.brand__mark {
  width: 36px; height: 36px; flex: none;
  border-radius: 9px;
  background: var(--ink);
  display: grid; place-items: center;
}
.brand__mark svg { width: 24px; height: 24px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; }
.brand__name {
  font-weight: 850; font-size: 1rem; color: var(--ink);
  letter-spacing: -.02em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.brand__sub {
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: #5A3000; font-weight: 750; white-space: nowrap;
}

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; }
.nav a {
  display: block; padding: .42rem .56rem;
  border-radius: var(--r-sm);
  color: var(--ink); font-weight: 650; font-size: .845rem;
  text-decoration: none; white-space: nowrap;
}
.nav a:hover { background: var(--y-300); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--y-300); }

.burger {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-sm);
  background: var(--surface); border: 2px solid var(--ink);
  cursor: pointer;
}
.burger span { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, top .2s ease;
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

.mobile-menu {
  display: none;
  background: var(--y-400);
  border-top: 1px solid var(--y-700);
  padding: .5rem 0 1rem;
}
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li { margin: 0; }
.mobile-menu a {
  display: block; padding: .68rem .2rem;
  font-weight: 650; color: var(--ink);
  border-bottom: 1px solid rgba(0,0,0,.12);
  text-decoration: none;
}
.mobile-menu a[aria-current="page"] { color: var(--y-800); font-weight: 800; }

@media (min-width: 1200px) {
  .nav { display: block; }
  .burger { display: none; }
  .mobile-menu { display: none !important; }
}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero { padding: clamp(30px, 4.5vw, 54px) 0 clamp(26px, 3.5vw, 40px); }
.hero-inner { max-width: 860px; }
.hero h1 { margin-bottom: .4em; }
.hero h1 .bn { display: block; font-size: .72em; color: var(--ink-on-yellow-2); margin-top: .15em; }
.hero__lead {
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  color: var(--ink-on-yellow-2);
  max-width: 62ch; margin-bottom: 1.2rem; font-weight: 500;
}
.hero__meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  margin-top: 1.1rem; font-size: .84rem; color: var(--ink-on-yellow-2); font-weight: 650;
}
.hero__meta span {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface); border: 1px solid var(--line-y);
  padding: .3rem .7rem; border-radius: var(--r-pill);
}

.updated-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--surface); border: 1px solid var(--line-y);
  padding: .3rem .8rem; border-radius: var(--r-pill);
  font-size: .8rem; font-weight: 700; color: var(--ink-2);
}
.updated-chip b { color: var(--ink); }

/* --------------------------------------------------------------------------
   7. CARDS & PANELS
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.35rem;
  box-shadow: var(--sh-1);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); border-color: var(--line-2); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--ink-2); font-size: .95rem; margin-bottom: 0; }
.card p + p { margin-top: .6rem; }

.card__icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--y-200); border: 1px solid var(--y-400);
  display: grid; place-items: center; margin-bottom: .9rem;
}
.card__icon svg { width: 20px; height: 20px; color: var(--y-800); }

.card--link { display: block; text-decoration: none; color: inherit; }
.card--link:hover { color: inherit; text-decoration: none; }
.card--link .more {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .8rem; font-weight: 750; font-size: .9rem; color: var(--y-800);
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(1.2rem, 3vw, 2.2rem);
  box-shadow: var(--sh-2);
}

.notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--y-500);
  border-radius: var(--r-md);
  padding: 1rem 1.2rem;
  font-size: .94rem;
  color: var(--ink-2);
}
.notice strong { color: var(--ink); }
.notice p:last-child, .notice ul:last-child, .notice ol:last-child { margin-bottom: 0; }
.notice--warn { border-left-color: var(--danger); background: var(--danger-bg); }
.notice--info { border-left-color: var(--ink); }

/* Steps */
.step__num {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--y-500); color: var(--ink);
  display: grid; place-items: center;
  font-weight: 850; margin-bottom: .8rem;
  border: 2px solid var(--y-700);
}

/* --------------------------------------------------------------------------
   8. SEARCH + DIRECTORY TABLE
   -------------------------------------------------------------------------- */
.directory-toolbar {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  justify-content: space-between; margin-bottom: .9rem;
}
.search-field { position: relative; flex: 1 1 320px; min-width: 0; }
.search-field > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--ink-3); pointer-events: none;
}
.search-field input {
  width: 100%; font: inherit; font-size: .96rem;
  padding: .78rem 2.5rem .78rem 2.6rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
}
.search-field input::placeholder { color: var(--ink-3); }
.search-field input:focus {
  outline: none; border-color: var(--y-700);
  box-shadow: 0 0 0 4px rgba(240,180,41,.45);
}
.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 29px; height: 29px; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-3);
  cursor: pointer; display: none; place-items: center; font-size: 1.2rem; line-height: 1;
}
.search-clear.show { display: grid; }
.search-clear:hover { background: var(--y-200); color: var(--ink); }

.filter-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.filter-btn {
  font: inherit; font-size: .84rem; font-weight: 700;
  padding: .36rem .85rem; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-y); cursor: pointer;
}
.filter-btn:hover { background: var(--y-200); }
.filter-btn[aria-pressed="true"] { background: var(--ink); color: var(--y-300); border-color: var(--ink); }

.result-count { font-size: .86rem; color: var(--ink-on-yellow-2); font-weight: 700; white-space: nowrap; }
.result-count b { color: var(--ink); }

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.directory { width: 100%; border-collapse: collapse; min-width: 760px; }
table.directory caption {
  text-align: left; padding: .9rem 1.1rem;
  font-size: .83rem; color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
table.directory thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--y-300); color: var(--ink);
  text-align: left; font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .78rem 1.1rem;
  border-bottom: 2px solid var(--y-600);
  white-space: nowrap;
}
table.directory tbody td {
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle; font-size: .93rem; color: var(--ink-2);
}
table.directory tbody tr:last-child td { border-bottom: 0; }
table.directory tbody tr:hover { background: var(--y-50); }

.col-no { width: 68px; color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 700; }
.agent-name { font-weight: 750; color: var(--ink); }
.agent-type {
  display: inline-block; margin-top: .1rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--y-800); background: var(--y-100);
  border: 1px solid var(--y-300);
  padding: .05rem .45rem; border-radius: var(--r-sm);
}
.agent-num { font-family: var(--mono); font-size: .88rem; color: var(--ink-2); white-space: nowrap; }
.cell-action { width: 1%; white-space: nowrap; }

.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .78rem; font-weight: 750;
  padding: .22rem .62rem; border-radius: var(--r-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.pill--ok   { background: var(--ok-bg);   color: var(--ok);   border-color: #BCE3CB; }
.pill--wait { background: var(--wait-bg); color: var(--wait); border-color: var(--y-400); }
.pill--off  { background: var(--off-bg);  color: var(--off);  border-color: #DCDCDC; }

.no-number { font-size: .85rem; color: var(--ink-3); font-style: italic; }

.empty-state { padding: 2.6rem 1.4rem; text-align: center; color: var(--ink-2); background: var(--surface); }
.empty-state__icon {
  width: 52px; height: 52px; margin: 0 auto .9rem;
  border-radius: 50%; background: var(--y-200); border: 1px solid var(--y-400);
  display: grid; place-items: center;
}
.empty-state__icon svg { width: 24px; height: 24px; color: var(--y-800); }
.empty-state h3 { margin-bottom: .3rem; font-size: 1.05rem; }
.empty-state p { margin-bottom: 1rem; font-size: .93rem; }

/* Mobile cards replace the table */
.agent-cards { display: none; }
.agent-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 5px solid var(--y-500);
  border-radius: var(--r-md);
  padding: .9rem 1rem;
  box-shadow: var(--sh-1);
  margin-bottom: .7rem;
}
.agent-card__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .7rem; margin-bottom: .6rem; padding-bottom: .6rem;
  border-bottom: 1px dashed var(--line);
}
.agent-card__no { font-size: .76rem; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.agent-card__num { font-family: var(--mono); font-size: .9rem; color: var(--ink-2); margin-bottom: .7rem; }
.agent-card__actions { display: grid; grid-template-columns: 1fr auto; gap: .5rem; }

@media (max-width: 720px) {
  .table-scroll { display: none; }
  .agent-cards { display: block; }
  .table-wrap { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .table-wrap > .empty-state { border: 1px solid var(--line); border-radius: var(--r-lg); }
}

/* --------------------------------------------------------------------------
   9. PROSE (article pages)
   -------------------------------------------------------------------------- */
.prose { max-width: 820px; }
.prose > h2 { margin-top: 2.1rem; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 1.5rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose li::marker { color: var(--y-700); }
.prose strong { color: var(--ink); }
.prose code {
  background: var(--y-50); border: 1px solid var(--line);
  padding: .1em .4em; border-radius: 5px;
  font-family: var(--mono); font-size: .88em; color: var(--ink);
}
.prose table {
  width: 100%; border-collapse: collapse; margin: 1.1rem 0;
  font-size: .92rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; table-layout: fixed;
}
.prose th, .prose td {
  padding: .68rem .85rem; border-bottom: 1px solid var(--line);
  text-align: left; overflow-wrap: anywhere;
}
.prose th {
  background: var(--y-200); color: var(--ink);
  font-size: .77rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
}
.prose tr:last-child td { border-bottom: 0; }

.toc {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--y-500);
  border-radius: var(--r-md); padding: 1rem 1.2rem; margin-bottom: 1.8rem;
}
.toc h2 {
  margin: 0 0 .5rem; font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.toc ol { margin: 0; padding-left: 1.1rem; columns: 2; column-gap: 1.4rem; }
.toc li { font-size: .89rem; margin-bottom: .25rem; break-inside: avoid; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

/* --------------------------------------------------------------------------
   10. FAQ
   -------------------------------------------------------------------------- */
.faq { max-width: 860px; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); margin-bottom: .6rem; overflow: hidden;
}
.faq details[open] { border-color: var(--y-500); box-shadow: var(--sh-1); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: .95rem 2.8rem .95rem 1.1rem;
  font-weight: 750; color: var(--ink); position: relative; font-size: .99rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.15rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--y-800); border-bottom: 2px solid var(--y-800);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { background: var(--y-50); }
.faq .faq__body { padding: 0 1.1rem 1.05rem; color: var(--ink-2); font-size: .95rem; }
.faq .faq__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   11. BREADCRUMB + PAGE HEAD
   -------------------------------------------------------------------------- */
.page-head {
  background: transparent;
  border-bottom: 1px solid var(--line-y);
  padding: clamp(22px, 3.5vw, 40px) 0 clamp(20px, 3vw, 34px);
}
.page-head h1 { margin-bottom: .3em; }
.page-head h1 .bn { display: block; font-size: .64em; color: var(--ink-on-yellow-2); margin-top: .1em; }
.page-head p { color: var(--ink-on-yellow-2); max-width: 70ch; margin-bottom: 0; font-weight: 500; }

.breadcrumb { margin-bottom: .8rem; font-size: .82rem; }
.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  list-style: none; margin: 0; padding: 0;
}
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-on-yellow-2); }
.breadcrumb li + li::before { content: "/"; color: var(--y-800); }
.breadcrumb a { color: var(--ink-on-yellow-2); font-weight: 650; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 750; }

/* --------------------------------------------------------------------------
   12. FORMS (report / contact)
   -------------------------------------------------------------------------- */
.form { max-width: 620px; }
.field { margin-bottom: 1.05rem; }
.field label {
  display: block; font-weight: 750; font-size: .9rem;
  color: var(--ink); margin-bottom: .32rem;
}
.field .hint { display: block; font-weight: 500; font-size: .82rem; color: var(--ink-3); margin-top: .15rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: .96rem;
  padding: .66rem .85rem;
  border: 2px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(240,180,41,.4);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: var(--danger);
}
.field-error {
  display: none; margin-top: .3rem;
  font-size: .84rem; font-weight: 650; color: var(--danger);
}
.field-error.show { display: block; }

.form-status {
  display: none; margin-top: 1rem;
  padding: .85rem 1.1rem; border-radius: var(--r-sm);
  font-size: .93rem; font-weight: 650;
}
.form-status.show { display: block; }
.form-status--ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #BCE3CB; }
.form-status--err { background: var(--danger-bg); color: var(--danger); border: 1px solid #F0C4C0; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   13. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink); color: #C9C9C9;
  padding: clamp(36px, 5vw, 56px) 0 0;
  border-top: 4px solid var(--y-500);
}
.footer-grid { display: grid; gap: 1.8rem; }
@media (min-width: 720px)  { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr; } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.9fr 1fr 1fr 1fr; } }

.site-footer h2, .site-footer h3 {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--y-400); margin-bottom: .85rem; font-weight: 800;
}
.site-footer p { font-size: .9rem; color: #9E9E9E; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: #D6D6D6; font-size: .9rem; text-decoration: none; }
.site-footer a:hover { color: var(--y-400); text-decoration: underline; }

.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__sub { color: var(--y-400); }
.footer-brand .brand__mark { background: #000; box-shadow: 0 0 0 1px var(--y-600); }
.footer-brand .brand__mark svg { color: var(--ink); }
.footer-brand p { margin-top: .85rem; max-width: 44ch; }

.footer-note {
  border-top: 1px solid #2E2E2E; margin-top: 2.2rem; padding: 1.1rem 0;
  font-size: .82rem; color: #8F8F8F; line-height: 1.65; max-width: 95ch;
}
.footer-bottom {
  border-top: 1px solid #2E2E2E; padding: 1.1rem 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  align-items: center; justify-content: space-between;
  font-size: .82rem; color: #8F8F8F;
}

/* --------------------------------------------------------------------------
   14. ERROR PAGES
   -------------------------------------------------------------------------- */
.error-page { min-height: 54vh; display: grid; place-items: center; text-align: center; padding: clamp(42px, 7vw, 80px) 0; }
.error-code { font-size: clamp(4rem, 14vw, 8rem); font-weight: 850; line-height: .92; color: var(--ink); margin-bottom: .2rem; }

/* --------------------------------------------------------------------------
   15. MOTION / PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .btn:hover, .card:hover { transform: none; }
}

@media print {
  .site-header, .site-footer, .btn, .filter-row, .search-field { display: none !important; }
  body { background: #fff; }
  .table-scroll { display: block !important; overflow: visible; }
  .agent-cards { display: none !important; }
}

/* --------------------------------------------------------------------------
   16. SMALL SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .btn--lg { padding-inline: 1.1rem; font-size: 1rem; }
}
@media (max-width: 400px) {
  .container { padding-inline: 14px; }
  .brand__name { font-size: .92rem; }
  .brand__sub { font-size: .56rem; }
}

/* FAQ section headings sit between accordion groups */
.faq > h2 { margin: 1.8rem 0 .7rem; font-size: 1.1rem; }
.faq > h2:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   17. FLOATING WHATSAPP BUTTON
   Small, fixed to the bottom corner of every page, opens the complaint /
   report chat. Sized to stay out of the way on a phone but remain an easy
   tap target (48px, above the 44px minimum).
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  bottom: 18px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 48px;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: #06301F;
  border: 2px solid #0B7C45;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  text-decoration: none;
  overflow: hidden;
  transition: box-shadow .16s ease, transform .16s ease, padding .18s ease, background-color .16s ease;
}
.wa-float--left  { left: 16px; }
.wa-float--right { right: 16px; }

.wa-float__icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  color: #FFFFFF;
}
.wa-float__icon svg { width: 25px; height: 25px; }

/* The label is collapsed by default and slides open on hover / focus, so the
   button stays small as asked but still explains itself. */
.wa-float__tip {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  font-size: .86rem;
  font-weight: 750;
  color: #06301F;
  transition: max-width .22s ease, opacity .18s ease, padding .22s ease;
  padding-right: 0;
}
.wa-float:hover, .wa-float:focus-visible {
  background: #2EE57A;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
  text-decoration: none;
}
.wa-float:hover .wa-float__tip,
.wa-float:focus-visible .wa-float__tip {
  max-width: 160px;
  opacity: 1;
  padding-right: 16px;
}

@media (max-width: 480px) {
  .wa-float { bottom: 14px; height: 46px; }
  .wa-float--left { left: 12px; }
  .wa-float__icon { width: 42px; height: 42px; }
  /* Never let the label expand over content on a small screen. */
  .wa-float:hover .wa-float__tip,
  .wa-float:focus-visible .wa-float__tip { max-width: 0; opacity: 0; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float, .wa-float__tip { transition: none; }
  .wa-float:hover { transform: none; }
}

@media print { .wa-float { display: none !important; } }

/* Compact hero: the directory table is the first thing people need, so the
   heading block above it stays short. */
.hero--compact { padding: clamp(22px, 3vw, 34px) 0 clamp(14px, 2vw, 20px); }
.hero__lead--tight { margin-bottom: .9rem; max-width: 60ch; }

/* Keep the floating button from sitting on top of the last footer line. */
@media (max-width: 560px) {
  .footer-bottom { padding-bottom: 4.6rem; }
}

/* --------------------------------------------------------------------------
   18. WHATSAPP POPUP CARD
   Sits beside the floating button. Small, dismissible, never covers the page
   and never blocks scrolling — a full-screen interstitial would hurt both the
   visitor and mobile search performance.
   -------------------------------------------------------------------------- */
.wa-pop {
  position: fixed;
  bottom: 78px;
  z-index: 119;
  width: min(290px, calc(100vw - 32px));
  background: var(--surface);
  border: 2px solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 38px rgba(0,0,0,.26);
  padding: 1rem 1.05rem .95rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.wa-pop--left  { left: 16px; }
.wa-pop--right { right: 16px; }
.wa-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.wa-pop__close {
  position: absolute; top: 6px; right: 8px;
  width: 30px; height: 30px;
  border: 0; background: transparent;
  font-size: 1.3rem; line-height: 1; color: var(--ink-3);
  cursor: pointer; border-radius: 50%;
}
.wa-pop__close:hover { background: var(--y-100); color: var(--ink); }

.wa-pop__title { margin: 0 0 .2rem; font-weight: 800; font-size: 1rem; color: var(--ink); }
.wa-pop__body  { margin: 0 0 .55rem; font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.wa-pop__num {
  margin: 0 0 .75rem;
  font-family: var(--mono); font-size: .86rem; font-weight: 700; color: var(--ink);
}
.wa-pop__cta {
  display: block; text-align: center;
  background: var(--wa-dark); color: #fff;
  font-weight: 750; font-size: .9rem;
  padding: .6rem 1rem; border-radius: var(--r-pill);
  text-decoration: none;
}
.wa-pop__cta:hover { background: #096636; color: #fff; text-decoration: none; }

@media (max-width: 480px) { .wa-pop { bottom: 72px; } .wa-pop--left { left: 12px; } }
@media (prefers-reduced-motion: reduce) { .wa-pop { transition: opacity .01ms; transform: none; } }
@media print { .wa-pop { display: none !important; } }

/* --------------------------------------------------------------------------
   19. ARTICLES — cards (homepage + hub) and the long-form article page
   -------------------------------------------------------------------------- */
.article-grid { display: grid; gap: 1.1rem; }
@media (min-width: 680px)  { .article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .article-grid { grid-template-columns: repeat(3, 1fr); } }

.article-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--y-500);
  border-radius: var(--r-lg);
  padding: 1.2rem 1.25rem 1.1rem;
  box-shadow: var(--sh-1);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.article-card:hover {
  box-shadow: var(--sh-3);
  transform: translateY(-3px);
  border-top-color: var(--ink);
  color: inherit;
  text-decoration: none;
}
.article-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  margin-bottom: .6rem;
  font-size: .74rem; font-weight: 700; color: var(--ink-3);
}
.article-card__lang {
  display: inline-block;
  background: var(--y-100); color: var(--y-800);
  border: 1px solid var(--y-300);
  padding: .08rem .5rem; border-radius: var(--r-pill);
  font-size: .7rem; letter-spacing: .04em;
}
.article-card h3 {
  font-size: 1.08rem; line-height: 1.35; margin: 0 0 .5rem;
}
/* Exactly three lines of excerpt, as requested — the rest is on the page. */
.article-card__excerpt {
  margin: 0 0 .9rem;
  font-size: .93rem; color: var(--ink-2); line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card__more {
  margin-top: auto;
  font-weight: 750; font-size: .9rem; color: var(--y-800);
}
.article-card:hover .article-card__more { color: var(--ink); }

/* Article page */
.article-meta {
  display: flex; flex-wrap: wrap; gap: .45rem .9rem;
  margin-top: .9rem; font-size: .84rem; font-weight: 650; color: var(--ink-on-yellow-2);
}
.article-meta span {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--surface); border: 1px solid var(--line-y);
  padding: .26rem .7rem; border-radius: var(--r-pill);
}
.article-body { max-width: 780px; }
.article-body > p:first-of-type { font-size: 1.06rem; color: var(--ink); }
.article-body h2 { scroll-margin-top: calc(var(--header-h) + 18px); }
.article-body blockquote {
  margin: 1.4rem 0; padding: .9rem 1.1rem;
  background: var(--y-50); border-left: 4px solid var(--y-500);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink); font-weight: 600;
}
.article-cta {
  margin: 2rem 0 0;
  background: var(--ink); color: #fff;
  border-radius: var(--r-lg);
  padding: 1.3rem 1.4rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem;
}
.article-cta p { margin: 0; color: #E8E8E8; font-weight: 600; max-width: 52ch; }
.article-cta .btn--gold { border-color: var(--y-500); }

.related { margin-top: 2.2rem; }
.related h2 { font-size: 1.2rem; margin-bottom: .9rem; }

/* Directory summary chips — shown directly under the agent table.
   ">" keeps the nested "বাংলা" span from becoming a pill inside a pill. */
.list-meta {
  display: flex; flex-wrap: wrap; gap: .5rem .7rem;
  margin-top: 1rem;
  font-size: .84rem; font-weight: 650; color: var(--ink-on-yellow-2);
}
.list-meta > span {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface); border: 1px solid var(--line-y);
  padding: .3rem .75rem; border-radius: var(--r-pill);
}
.list-meta b { color: var(--ink); }

/* With the chips gone from the hero, its last line needs no gap beneath it. */
.hero--compact .hero__lead--tight { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   20. UTILITIES
   They replace the old inline style="" attributes, which the site's
   Content-Security-Policy (style-src 'self') blocks in production. Like the
   inline styles they replace, they win over component rules.
   -------------------------------------------------------------------------- */
.u-mt-0  { margin-top: 0 !important; }
.u-mt-6  { margin-top: .6rem !important; }
.u-mt-8  { margin-top: .8rem !important; }
.u-mt-9  { margin-top: .9rem !important; }
.u-mt-12 { margin-top: 1.2rem !important; }
.u-mt-13 { margin-top: 1.3rem !important; }
.u-mt-14 { margin-top: 1.4rem !important; }
.u-mt-15 { margin-top: 1.5rem !important; }
.u-mt-16 { margin-top: 1.6rem !important; }
.u-mt-18 { margin-top: 1.8rem !important; }
.u-mb-0  { margin-bottom: 0 !important; }
.u-mb-5  { margin-bottom: .5rem !important; }
.u-mb-6  { margin-bottom: .6rem !important; }
.u-mb-8  { margin-bottom: .8rem !important; }
.u-mb-10 { margin-bottom: 1rem !important; }
.u-mb-14 { margin-bottom: 1.4rem !important; }
.maxw-none { max-width: none !important; }
.maxw-860  { max-width: 860px !important; }
.maxw-900  { max-width: 900px !important; }
.items-start { align-items: start !important; }
.text-2 { color: var(--ink-2) !important; }
.text-3 { color: var(--ink-3) !important; }
.fs-94  { font-size: .94rem !important; }
.fw-500 { font-weight: 500 !important; }
.lead-y    { color: var(--ink-on-yellow-2) !important; max-width: 70ch; }
.note-y    { margin-top: 1rem !important; font-size: .9rem; color: var(--ink-on-yellow-2) !important; }
.empty-row { padding: 1.6rem 1.1rem !important; text-align: center; color: var(--ink-3) !important; }
.error-lead { max-width: 54ch; margin-inline: auto; color: var(--ink-on-yellow-2) !important; }
.error-more { margin-top: 1.8rem !important; font-size: .92rem; color: var(--ink-on-yellow-2) !important; }

/* --------------------------------------------------------------------------
   21. BRAND — Velki9x AgentList.com wordmark
   -------------------------------------------------------------------------- */
.brand__name-2 { font-weight: 750; color: #5A3000; }
.footer-brand .brand__name-2 { color: var(--y-300); }

/* --------------------------------------------------------------------------
   22. BANNERS — the site's own artwork, framed in black and gold.
   width/height on every <img> reserve the space before it loads (no CLS).
   -------------------------------------------------------------------------- */
.banner-figure { margin: 0; }
.banner-figure img {
  width: 100%; height: auto;
  border-radius: var(--r-lg);
  border: 2px solid var(--ink);
  background: #2A2000;
  box-shadow: 0 12px 30px rgba(60, 40, 0, .25);
}
.banner-figure figcaption {
  margin-top: .5rem;
  font-size: .8rem; line-height: 1.45; font-weight: 600;
  color: var(--ink-on-yellow-2);
}

/* Homepage hero: text + banner side by side on wide screens, banner first on
   phones. Kept compact so the agent table still starts high on the page. */
.hero--home { padding: clamp(14px, 2.4vw, 30px) 0 clamp(10px, 1.8vw, 20px); }
.hero-home { display: grid; gap: 1rem 2.2rem; align-items: center; }
.hero-home__media { order: -1; }
.hero-home h1 { margin-bottom: .35em; font-size: clamp(1.7rem, 3.6vw, 2.55rem); }
.hero-home h1 .bn { display: inline; font-size: 1em; margin: 0; color: #5A3000; white-space: nowrap; }
.hero-home .hero__lead { margin-bottom: .55rem; }
.hero__sub { font-size: .95rem; color: var(--ink-2); max-width: 60ch; margin-bottom: .9rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .55rem; }
@media (min-width: 900px) {
  .hero-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .hero-home__media { order: 0; }
}

/* Inner pages that carry a banner */
.page-head__grid { display: grid; gap: 1.1rem 2.2rem; align-items: center; }
@media (min-width: 900px) {
  .page-head--media .page-head__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   23. ARTICLE CARDS WITH FEATURED IMAGES (homepage, hub, 404, CMS posts)
   -------------------------------------------------------------------------- */
.article-card { padding: 0; overflow: hidden; }
.article-card__media { aspect-ratio: 2 / 1; overflow: hidden; background: #2A2000; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.article-card:hover .article-card__media img { transform: scale(1.035); }
.article-card__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.15rem 1.05rem; }
.article-card__meta time { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .article-card__media img { transition: none; } }

/* Featured image at the top of an article */
.article-figure { margin: 0 0 1.5rem; }
.article-figure img {
  width: 100%; height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #2A2000;
}

/* Images placed inside post content from the admin */
.prose figure { margin: 1.4rem 0; }
.prose figure img { width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--line); }
.prose figcaption { margin-top: .45rem; font-size: .84rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   24. 404 PAGE — search, popular pages and latest articles
   -------------------------------------------------------------------------- */
.error-search { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 560px; margin: 1.4rem auto 0; }
.error-search .search-field { flex: 1 1 260px; }
.link-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .link-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .link-list { grid-template-columns: repeat(3, 1fr); } }
.link-list li { margin: 0; }
.link-list a {
  display: block; height: 100%;
  padding: .75rem .95rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  color: var(--ink); font-weight: 750; text-decoration: none;
}
.link-list a span { display: block; font-weight: 500; font-size: .86rem; color: var(--ink-3); }
.link-list a:hover { border-color: var(--y-600); box-shadow: var(--sh-1); }

/* Dated change log on /corrections/ */
.log-date { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Headings that keep their Bengali half on the same line ("Velki Agent List 2026 – ভেলকি …") */
.page-head h1.h1-inline .bn { display: inline; font-size: 1em; margin: 0; color: #5A3000; white-space: nowrap; }
.error-page--compact { min-height: 0; padding-bottom: clamp(18px, 3vw, 30px); }

/* CMS posts */
.post-tags { font-size: .88rem; color: var(--ink-3); }
.preview-bar { background: var(--danger); color: #fff; text-align: center; font-weight: 750; padding: .65rem 1rem; }

/* Phones: the type filters sit on one swipeable row, so the list starts higher. */
@media (max-width: 560px) {
  .filter-row { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-btn { flex: none; }
  .hero-home .eyebrow { margin-bottom: .55rem; }
}