/* ==========================================================================
   Paragon Income Tax Consultancy — stylesheet
   Palette comes from the firm's logo: deep forest green, elegant white,
   crimson ribbon. The recurring motif is the progressive tax slab — a
   stepped ladder — which appears in the hero calculator and as the rule
   between sections.
   ========================================================================== */

:root {
  /* Brand, sampled from the logo itself: the wordmark green is #28AA46
     and the seal's red is #E6141E. The deep tones below sit on the same
     hue as that green, so the logo reads as part of the page rather than
     pasted onto it. */
  --leaf:        #28AA46;   /* the logo green, for accents */
  --forest:      #0C3D1F;   /* dark ground, same hue family */
  --forest-deep: #072A14;
  --forest-lift: #175C31;
  --crimson:     #D01824;   /* close to the seal's red, still legible */
  --crimson-soft:#FCECEC;

  /* Paper and ink */
  --white: #FFFFFF;
  --paper: #FBFAF7;
  --tint:  #EDF4EE;
  --ink:      #16201A;
  --ink-soft: #3D4B43;
  --muted:    #5C6B62;
  --line:   #DFE8E1;
  --line-2: #EFF4F0;

  --brass: #9A7B3C;
  --ok: #1F7A4D;

  /* Type */
  --f-display: 'Fraunces', Georgia, serif;
  --f-body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;
  --f-bn:         'Hind Siliguri', 'Noto Sans Bengali', sans-serif;
  --f-bn-display: 'Anek Bangla', 'Hind Siliguri', sans-serif;

  --r: 3px;
  --r-lg: 6px;
  --wrap: 1180px;
  --shadow: 0 1px 2px rgba(11,56,32,.05), 0 8px 24px -12px rgba(11,56,32,.16);
}

/* The Latin faces carry no Bengali glyphs, so the Bangla site switches
   families wholesale. Latin runs inside Bangla text (TIN, NBR, SRO) still
   render, because these Bengali faces ship Latin too. */
.lang-bn { font-family: var(--f-bn); line-height: 1.8; font-size: 17px; }
.lang-bn h1, .lang-bn h2, .lang-bn h3, .lang-bn h4,
.lang-bn .display { font-family: var(--f-bn-display); letter-spacing: -.005em; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: .95rem; text-transform: uppercase; letter-spacing: .1em; font-family: var(--f-mono); font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--forest); text-decoration-color: rgba(11,56,32,.28); text-underline-offset: 3px; }
a:hover { color: var(--crimson); }
img { max-width: 100%; height: auto; display: block; }

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

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 760px; }
.mono { font-family: var(--f-mono); font-size: .82em; letter-spacing: .01em; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--white); padding: 10px 16px; z-index: 999; }

/* ---------------------------------------------------------- eyebrow */
.eyebrow {
  display: inline-block; font-family: var(--f-mono); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 14px; font-weight: 500;
}
.eyebrow.on-dark { color: rgba(255,255,255,.6); }
.eyebrow.crimson { color: var(--crimson); }

/* ----------------------------------------------------------- header */
.topbar {
  background: var(--forest-deep); color: rgba(255,255,255,.82);
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em;
}
.topbar .wrap { display: flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 38px; flex-wrap: wrap; }
.topbar a { color: rgba(255,255,255,.82); text-decoration: none; }
.topbar a:hover { color: var(--white); }
.topbar .bits { display: flex; gap: 20px; flex-wrap: wrap; }

/* The logo carries its own greens, which vanish against a dark bar. A
   white header lets it read at full strength and is the conventional
   arrangement for a chamber of this kind. */
.site-head {
  background: var(--white); color: var(--ink); position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(11,56,32,.05);
}
.site-head .wrap { display: flex; align-items: center; gap: 28px; min-height: 84px; }

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--forest); margin-right: auto; }
.logo img { height: 54px; width: auto; }
.logo .lockup { display: flex; flex-direction: column; line-height: 1.1; }
.logo .mark { font-family: var(--f-display); font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; color: var(--forest); }
.lang-bn .logo .mark { font-family: var(--f-bn-display); }
.logo .sub { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

.mainnav { display: flex; align-items: center; gap: 2px; }
.mainnav a {
  color: var(--ink-soft); text-decoration: none; font-size: .93rem; font-weight: 500;
  padding: 10px 14px; border-radius: var(--r); position: relative;
}
.mainnav a:hover { color: var(--forest); background: var(--tint); }
.mainnav a.on { color: var(--forest); font-weight: 600; }
.mainnav a.on::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 1px;
  height: 2px; background: var(--crimson); border-radius: 1px;
}

.langswitch {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em;
  padding: 8px 13px; border: 1px solid var(--line);
  border-radius: var(--r); color: var(--forest) !important; text-decoration: none;
  white-space: nowrap; margin-left: 10px; font-weight: 600;
}
.langswitch:hover { border-color: var(--forest); background: var(--tint); }

.navtoggle { display: none; background: none; border: 0; color: var(--forest); font-size: 1.5rem; cursor: pointer; padding: 6px 10px; }

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-body); font-size: .93rem; font-weight: 600;
  padding: 13px 24px; border-radius: var(--r); border: 1px solid var(--forest);
  background: var(--forest); color: var(--white); text-decoration: none;
  cursor: pointer; transition: background .16s, border-color .16s, transform .16s;
}
.lang-bn .btn { font-family: var(--f-bn); font-weight: 600; }
.btn:hover { background: var(--forest-lift); border-color: var(--forest-lift); color: var(--white); }
.btn:active { transform: translateY(1px); }
.btn.crimson { background: var(--crimson); border-color: var(--crimson); }
.btn.crimson:hover { background: #A81B32; border-color: #A81B32; }
.btn.ghost { background: transparent; color: var(--forest); border-color: var(--line); }
.btn.ghost:hover { background: var(--tint); border-color: var(--forest); color: var(--forest); }
.btn.on-dark { background: var(--white); color: var(--forest); border-color: var(--white); }
.btn.on-dark:hover { background: rgba(255,255,255,.88); color: var(--forest); }
.btn.outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.4); }
.btn.outline-light:hover { background: rgba(255,255,255,.1); color: var(--white); border-color: var(--white); }
.btn.sm { padding: 8px 15px; font-size: .82rem; }
.btn.block { display: flex; width: 100%; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 0; }

/* ------------------------------------------------------------- hero */
.hero { background: var(--forest); color: var(--white); position: relative; overflow: hidden; }
/* Faint stepped bands in the background — the slab motif, whispered. */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px) 0 0/72px 100%,
    linear-gradient(to top, rgba(255,255,255,.028) 0 20%, transparent 20% 100%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; padding-top: 76px; padding-bottom: 76px; }
.hero h1 { color: var(--white); margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: #F2A0AE; }
.hero .lede { font-size: 1.06rem; color: rgba(255,255,255,.8); max-width: 52ch; }

.trustrow { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.trustrow span {
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .07em;
  color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.2);
  padding: 6px 11px; border-radius: 100px;
}
.lang-bn .trustrow span { font-family: var(--f-bn); letter-spacing: 0; font-size: .78rem; }

/* --------------------------------------- signature: the slab ladder */
.slabcard {
  background: var(--white); color: var(--ink); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.45); overflow: hidden;
}
.slabcard .head { padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.slabcard .head h3 { margin: 0 0 4px; font-size: 1.15rem; }
.slabcard .head p { margin: 0; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.lang-bn .slabcard .head p { font-family: var(--f-bn); letter-spacing: 0; text-transform: none; font-size: .8rem; }
.slabcard .body { padding: 20px 24px 24px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--f-body); font-size: .95rem; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--white); transition: border-color .15s, box-shadow .15s;
}
.lang-bn .field input, .lang-bn .field select, .lang-bn .field textarea { font-family: var(--f-bn); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(11,56,32,.09);
}
.field input[type="number"] { font-family: var(--f-mono); font-size: 1.05rem; }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field .hint { font-size: .78rem; color: var(--muted); margin: 6px 0 0; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.check { display: flex; align-items: center; gap: 9px; font-size: .88rem; cursor: pointer; font-weight: 500; }
.check input { width: auto; margin: 0; }

/* The ladder itself: one rung per slab, filling as income climbs. */
.ladder { margin: 18px 0 0; display: flex; flex-direction: column-reverse; gap: 3px; }
.rung { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 7px 11px; border-radius: 2px; background: var(--line-2); overflow: hidden;
        font-size: .78rem; transition: background .25s; }
.rung .fill { position: absolute; inset: 0 100% 0 0; background: var(--tint); transition: inset .5s cubic-bezier(.22,.61,.36,1); }
.rung.active .fill { background: rgba(11,56,32,.13); }
.rung.top .fill { background: var(--crimson-soft); }
.rung .band, .rung .amt { position: relative; }
.rung .band { font-family: var(--f-mono); font-size: .7rem; color: var(--ink-soft); letter-spacing: .02em; }
.lang-bn .rung .band { font-family: var(--f-bn); font-size: .8rem; }
.rung .amt { font-family: var(--f-mono); font-weight: 600; color: var(--ink); }
.rung .rate { position: relative; font-family: var(--f-mono); font-size: .68rem; font-weight: 700;
              padding: 2px 6px; border-radius: 2px; background: var(--white); color: var(--forest); }
.rung.top .rate { color: var(--crimson); }

.result { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
          margin-top: 20px; padding-top: 16px; border-top: 2px solid var(--forest); }
.result .lbl { font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.result .val { font-family: var(--f-mono); font-size: 1.75rem; font-weight: 700; color: var(--forest); letter-spacing: -.02em; }
.result .eff { font-family: var(--f-mono); font-size: .74rem; color: var(--muted); }
.note { font-size: .76rem; color: var(--muted); line-height: 1.6; margin: 14px 0 0; }

/* ----------------------------------------------------------- bands */
.band-sec { padding: 76px 0; }
.band-sec.tint { background: var(--tint); }
.band-sec.white { background: var(--white); }
.band-sec.dark { background: var(--forest); color: var(--white); }
.band-sec.dark h2, .band-sec.dark h3 { color: var(--white); }
.band-sec.dark p { color: rgba(255,255,255,.78); }

.band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 40px; flex-wrap: wrap; }
.band-head p { color: var(--ink-soft); max-width: 58ch; margin: 0; }
.band-head h2 { margin-bottom: .25em; }

/* The stepped rule: a row of ascending ticks, echoing the slab ladder. */
.steprule { display: flex; align-items: flex-end; gap: 3px; height: 16px; margin-bottom: 18px; }
.steprule i { display: block; width: 5px; background: var(--forest); opacity: .16; border-radius: 1px; }
.steprule i:nth-child(1) { height: 25%; }
.steprule i:nth-child(2) { height: 45%; }
.steprule i:nth-child(3) { height: 65%; }
.steprule i:nth-child(4) { height: 85%; }
.steprule i:nth-child(5) { height: 100%; background: var(--crimson); opacity: .85; }

/* ------------------------------------------------------ service grid */
.svc-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.svc-col { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.svc-col > header { padding: 24px 26px 20px; border-bottom: 2px solid var(--forest); }
.svc-col:nth-child(2) > header { border-bottom-color: var(--crimson); }
.svc-col:nth-child(3) > header { border-bottom-color: var(--brass); }
.svc-col > header h3 { margin: 0 0 4px; font-size: 1.15rem; }
.svc-col > header p { margin: 0; font-size: .82rem; color: var(--muted); }
.svc-col ul { list-style: none; margin: 0; padding: 8px 0; flex: 1; }
.svc-col li { padding: 0; border-bottom: 1px solid var(--line-2); }
.svc-col li:last-child { border-bottom: 0; }
.svc-col li .t { display: block; padding: 13px 26px; text-decoration: none; color: var(--ink); }
.svc-col li .t:hover { background: var(--tint); }
.svc-col li strong { display: block; font-size: .93rem; font-weight: 600; }
.svc-col li span { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; line-height: 1.5; }

/* ------------------------------------------- upgraded services page */
.svc-sections-wrap { display: flex; flex-direction: column; gap: 48px; }
.svc-category-block {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 36px 32px; box-shadow: 0 4px 20px rgba(0,0,0,.03);
}
.svc-cat-header { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; border-bottom: 2px solid var(--line); padding-bottom: 18px; }
.svc-cat-badge {
  width: 48px; height: 48px; border-radius: 12px; background: var(--tint);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  border: 1px solid rgba(11,56,32,.12); flex-shrink: 0;
}
.svc-cat-header h2 { margin: 0 0 4px; font-size: 1.45rem; color: var(--forest); }
.svc-cat-header p { margin: 0; font-size: .92rem; color: var(--muted); }

/* min() lets the track fall below 360px on a narrow phone. Without it the
   column keeps its 360px floor and pushes the page into sideways scroll. */
.svc-accordion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 16px; align-items: start; }
.svc-accordion-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.svc-accordion-card:hover {
  border-color: rgba(11,56,32,.25);
  box-shadow: 0 8px 24px -8px rgba(11,56,32,.12);
  background: var(--white);
}
.svc-accordion-card.is-open {
  border-color: var(--forest);
  background: var(--white);
  box-shadow: 0 10px 30px -10px rgba(11,56,32,.16);
}
.svc-acc-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: transparent; border: 0; cursor: pointer;
  text-align: left; color: var(--ink); font-size: 1rem;
}
/* min-width:0 so a long service title wraps inside the button instead of
   shouldering the chevron off the card. */
.svc-acc-title-group { display: flex; align-items: center; gap: 12px; font-size: 1.02rem; min-width: 0; }
.svc-acc-title-group strong { min-width: 0; overflow-wrap: break-word; }
.svc-num {
  font-family: var(--f-mono); font-size: .74rem; font-weight: 700; color: var(--crimson);
  background: var(--crimson-soft); padding: 3px 7px; border-radius: 4px; flex-shrink: 0;
}
.svc-chevron {
  color: var(--muted); transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), color .2s;
  display: flex; align-items: center; justify-content: center;
}
.svc-accordion-card.is-open .svc-chevron {
  transform: rotate(180deg);
  color: var(--crimson);
}
.svc-acc-content {
  border-top: 1px dashed var(--line);
  background: rgba(11,56,32,.02);
}
.svc-acc-inner { padding: 18px 20px 22px; }
.svc-summary-text { font-size: .94rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 16px; }
.svc-action-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------- ledger */
.ledger { border-top: 1px solid var(--line); }
.ledger .row {
  display: grid; grid-template-columns: 130px 1fr auto; gap: 22px; align-items: baseline;
  padding: 18px 4px; border-bottom: 1px solid var(--line); text-decoration: none;
  color: var(--ink); transition: background .14s, padding-left .14s;
}
.ledger .row:hover { background: var(--white); padding-left: 12px; }
.ledger .row.pinned { border-left: 2px solid var(--crimson); padding-left: 12px; }
.ledger .row.pinned:hover { padding-left: 18px; }
.ledger .date { font-family: var(--f-mono); font-size: .74rem; color: var(--muted); letter-spacing: .02em; }
.lang-bn .ledger .date { font-family: var(--f-bn); font-size: .82rem; }
.ledger .subject { font-weight: 600; font-size: 1rem; line-height: 1.45; }
.ledger .subject span { display: block; font-weight: 400; font-size: .87rem; color: var(--ink-soft); margin-top: 4px; line-height: 1.55; }
.ledger .meta { font-family: var(--f-mono); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }

/* --------------------------------------------------------- deadlines */
.deadlines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dl {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg); padding: 20px; position: relative;
}
.dl.soon { border-color: rgba(240,160,174,.5); background: rgba(192,34,59,.14); }
.dl .when { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; color: rgba(255,255,255,.6); text-transform: uppercase; }
.lang-bn .dl .when { font-family: var(--f-bn); letter-spacing: 0; text-transform: none; font-size: .82rem; }
.dl .what { font-weight: 600; font-size: .98rem; margin: 8px 0 10px; line-height: 1.4; color: var(--white); }
.dl .left { font-family: var(--f-mono); font-size: .8rem; font-weight: 700; color: #F2A0AE; }
.lang-bn .dl .left { font-family: var(--f-bn); }
.dl .form { font-family: var(--f-mono); font-size: .66rem; color: rgba(255,255,255,.45); margin-top: 6px; letter-spacing: .06em; }

/* ------------------------------------------------------------ cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; transition: border-color .16s, transform .16s, box-shadow .16s; }
.card:hover { border-color: var(--forest); transform: translateY(-2px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.08rem; margin-bottom: .4em; }
.card p { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------------ staff */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 26px; }
.person {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px 24px 28px; text-align: center;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s, border-color .22s, background .22s;
}
.person:hover {
  transform: translateY(-5px);
  border-color: rgba(11,56,32,.22);
  background: linear-gradient(180deg, var(--tint) 0%, var(--white) 55%);
  box-shadow: 0 18px 38px -16px rgba(11,56,32,.28);
}
/* Round portrait, held to a circle whatever shape the photo arrives in. */
.person .por {
  width: 136px; height: 136px; margin: 0 auto 18px;
  border-radius: 50%; overflow: hidden; position: relative;
  background: var(--tint); border: 3px solid var(--white);
  box-shadow: 0 0 0 1px var(--line), 0 6px 16px -8px rgba(11,56,32,.3);
  transition: box-shadow .22s, transform .22s;
}
.person:hover .por {
  box-shadow: 0 0 0 1px rgba(11,56,32,.2), 0 10px 22px -8px rgba(11,56,32,.4);
  transform: scale(1.04);
}
.person .por img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.person .por .initials {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 2.6rem; color: rgba(11,56,32,.24); font-weight: 700;
}
.lang-bn .person .por .initials { font-family: var(--f-bn-display); }
.person .info { padding: 0; }
.person .info h3 { margin: 0 0 5px; font-size: 1.08rem; line-height: 1.3; }
.person .role { font-size: .87rem; color: var(--crimson); font-weight: 600; margin: 0 0 10px; }
/* A hairline between the name block and the credentials, drawn short and
   centred so the card keeps its symmetry. */
.person .creds {
  font-family: var(--f-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0; padding-top: 12px; position: relative;
}
.person .creds::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 1px; background: var(--line);
}
.lang-bn .person .creds { font-family: var(--f-bn); letter-spacing: .02em; text-transform: none; font-size: .78rem; }
.person .bio { font-size: .86rem; color: var(--ink-soft); margin: 12px 0 0; line-height: 1.65; }

/* ------------------------------------------------------- MD's message */
/* One card, in the same language as the team-member cards below it —
   white ground, hairline border, a ringed circular portrait — just laid
   out sideways: photo on the left, the quote given the room to breathe
   on the right. */
.md-message {
  display: flex; align-items: center; gap: 26px;
  background: var(--white); border: 1px solid var(--line); border-radius: 22px;
  padding: 24px 28px; margin: 0 0 40px;
  transition: border-color .22s, box-shadow .22s;
}
.md-message:hover { border-color: rgba(11,56,32,.22); box-shadow: 0 18px 38px -16px rgba(11,56,32,.22); }
.md-message .por {
  flex: 0 0 auto; width: 180px; height: 180px; border-radius: 50%;
  overflow: hidden; position: relative; background: var(--tint);
  border: 4px solid var(--white); box-shadow: 0 0 0 1px var(--line), 0 8px 20px -8px rgba(11,56,32,.32);
}
.md-message .por img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-message blockquote {
  margin: 0; padding: 0; border: 0; font-size: .92rem; line-height: 1.65; color: var(--ink-soft);
}
.md-message blockquote p { margin: 0 0 .7em; }
.md-message .who { margin-top: 2px; }
.md-message .who .name { font-family: var(--f-display); font-size: 1.05rem; color: var(--forest); font-weight: 600; }
.lang-bn .md-message .who .name { font-family: var(--f-bn-display); }
.md-message .who .role { display: block; font-size: .8rem; color: var(--crimson); font-weight: 600; margin-top: 2px; }
@media (max-width: 640px) {
  .md-message { flex-direction: column; text-align: center; padding: 24px 20px; gap: 18px; }
  .md-message .por { width: 150px; height: 150px; }
}

/* -------------------------------------------------------- prose/article */
.prose { font-size: 1.02rem; line-height: 1.8; }
.prose p { margin: 0 0 1.2em; color: var(--ink-soft); }
.prose h3 { font-size: 1.25rem; color: var(--ink); margin: 2em 0 .6em; }
.prose ul, .prose ol { margin: 0 0 1.3em; padding-left: 1.3em; color: var(--ink-soft); }
.prose li { margin-bottom: .5em; }
.prose strong { color: var(--ink); font-weight: 600; }
.pagehead { background: var(--white); border-bottom: 1px solid var(--line); padding: 60px 0 52px; }
.pagehead h1 { margin-bottom: .3em; }
.pagehead p { color: var(--ink-soft); max-width: 62ch; margin: 0; font-size: 1.02rem; }
.crumbs { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.lang-bn .crumbs { font-family: var(--f-bn); letter-spacing: 0; text-transform: none; font-size: .82rem; }

.split { display: grid; grid-template-columns: 1fr 320px; gap: 50px; align-items: start; }
.aside-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,.03);
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s, border-color .35s;
}
.aside-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -12px rgba(12,61,31,.12);
  border-color: rgba(40,170,70,.25);
}
.aside-card h4 { margin: 0 0 14px; color: var(--forest); }
.aside-card ul { list-style: none; margin: 0; padding: 0; }
.aside-card li { padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: .89rem; transition: padding-left .2s; }
.aside-card li:hover { padding-left: 4px; }
.aside-card li:last-child { border-bottom: 0; }
.kv { margin: 0; }
.kv dt { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
.kv dt:first-child { margin-top: 0; }
.kv dd { margin: 3px 0 0; font-size: .92rem; color: var(--ink); }
.lang-bn .kv dt { font-family: var(--f-bn); letter-spacing: .02em; text-transform: none; font-size: .76rem; }

/* ------------------------------------------------------------- tags */
.tag {
  display: inline-block; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 2px;
  background: var(--tint); color: var(--forest); border: 1px solid var(--line);
  transition: transform .2s;
}
.tag:hover { transform: scale(1.05); }
.lang-bn .tag { font-family: var(--f-bn); letter-spacing: .02em; text-transform: none; font-size: .74rem; }
.tag.sro { background: var(--crimson-soft); color: var(--crimson); border-color: #F2D4D9; }
.tag.circular { background: #E8F0EA; color: var(--ok); border-color: #CFE2D5; }
.tag.finance-act { background: #F3EEE2; color: #8A6D2F; border-color: #E6DCC5; }
.tag.deadline { background: #EDEEF5; color: #4A5490; border-color: #DADCEC; }

/* ------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); transition: background .25s ease; }
.faq details:hover { background: rgba(12,61,31,.02); }
.faq summary {
  padding: 20px 40px 20px 4px; cursor: pointer; font-weight: 600; font-size: 1rem;
  list-style: none; position: relative; color: var(--ink);
  transition: color .2s ease, padding-left .2s ease;
}
.faq summary:hover { color: var(--forest); padding-left: 6px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); font-size: 1.3rem; color: var(--crimson); font-weight: 400;
  transition: transform .25s ease, color .2s;
}
.faq details[open] summary::after { content: '−'; color: var(--forest); }
.faq .ans { padding: 0 40px 22px 4px; color: var(--ink-soft); font-size: .95rem; line-height: 1.75; }

/* ---------------------------------------------------------- filters */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 34px; }
.filters .field { margin: 0; }
.filters .grow { flex: 1; min-width: 200px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.chip {
  font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 100px;
  text-decoration: none; color: var(--ink-soft); background: var(--white);
}
.lang-bn .chip { font-family: var(--f-bn); letter-spacing: 0; text-transform: none; font-size: .82rem; }
.chip:hover { border-color: var(--forest); color: var(--forest); }
.chip.on { background: var(--forest); border-color: var(--forest); color: var(--white); }

/* -------------------------------------------------------- utilities */
.empty { text-align: center; padding: 70px 20px; border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--white); }
.empty h3 { margin-bottom: .3em; }
.empty p { color: var(--muted); margin-bottom: 20px; }

.flash { padding: 14px 18px; border-radius: var(--r); margin-bottom: 22px; font-size: .92rem; border: 1px solid; }
.flash.ok { background: #E9F3EC; border-color: #C6E0CE; color: #17603A; }
.flash.error { background: var(--crimson-soft); border-color: #F0CDD3; color: #94182C; }

.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px; }
fieldset { border: 0; padding: 0; margin: 0 0 26px; }
legend { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 0 14px; }
.lang-bn legend { font-family: var(--f-bn); letter-spacing: .03em; text-transform: none; font-size: .8rem; }

table.data { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
table.data th {
  text-align: left; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--tint); font-weight: 600;
}
.lang-bn table.data th { font-family: var(--f-bn); letter-spacing: .02em; text-transform: none; font-size: .78rem; }
table.data td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); font-size: .9rem; vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num { font-family: var(--f-mono); font-size: .82rem; }

/* ---------------------------------------------------------- footer */
.site-foot { background: var(--forest-deep); color: rgba(255,255,255,.7); padding: 66px 0 0; margin-top: 0; }
.site-foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; padding-bottom: 46px; }
.site-foot h4 { color: var(--white); margin-bottom: 16px; font-size: .7rem; }
.lang-bn .site-foot h4 { font-family: var(--f-bn); letter-spacing: .04em; }
.site-foot a { color: rgba(255,255,255,.7); text-decoration: none; display: block; padding: 5px 0; font-size: .89rem; }
.site-foot a:hover { color: var(--white); }
.site-foot p { font-size: .89rem; line-height: 1.7; }
.site-foot .contactline { font-family: var(--f-mono); font-size: .78rem; line-height: 2; color: rgba(255,255,255,.62); }
.foot-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.foot-logo .mark { font-family: var(--f-display); font-size: 1.35rem; font-weight: 700; color: var(--white); }
.lang-bn .foot-logo .mark { font-family: var(--f-bn-display); }
.fine {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 0; border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--f-mono); font-size: .72rem; color: rgba(255,255,255,.45);
}
.lang-bn .fine { font-family: var(--f-bn); font-size: .8rem; }
.disclaimer { padding: 0 0 30px; font-size: .78rem; color: rgba(255,255,255,.38); line-height: 1.7; max-width: 80ch; }

/* --------------------------------------------------- floating social */
.floating-social {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  display: flex; flex-direction: column-reverse; gap: 12px;
}
.fab {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.24); text-decoration: none;
  transition: transform .18s;
}
.fab:hover { transform: scale(1.07); }
.fab svg { width: 28px; height: 28px; fill: #fff; }
.fab.wa { background: #25D366; }
.fab.fb { background: #1877F2; }

/* Footer social icon row */
.social-row { display: flex; gap: 10px; }
.social-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform .15s, opacity .15s; opacity: .7; }
.social-icon:hover { transform: scale(1.12); opacity: 1; }
.social-icon svg { width: 20px; height: 20px; fill: rgba(255,255,255,.85); }

/* ------------------------------------------------- video section */
.video-highlight-sec { position: relative; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 28px; }
.video-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.04);
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s;
}
.video-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px -14px rgba(12,61,31,.2), 0 0 0 1px rgba(40,170,70,.25);
  border-color: rgba(40,170,70,.35);
}
.video-wrap { position: relative; width: 100%; padding-top: 56.25%; background: #0c1a11; overflow: hidden; }
.video-wrap iframe, .video-wrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-wrap .yt-placeholder { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.video-wrap .yt-placeholder img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1); }
.video-card:hover .yt-placeholder img { transform: scale(1.06); }
.play-btn {
  position: absolute; width: 66px; height: 66px; border-radius: 50%;
  background: rgba(12,61,31,.85); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), background .3s, box-shadow .3s;
}
.play-btn svg { width: 26px; height: 26px; fill: #fff; margin-left: 2px; }
.video-card:hover .play-btn {
  background: var(--crimson);
  transform: scale(1.14);
  box-shadow: 0 10px 30px rgba(208,24,36,.55);
}
.video-info { padding: 16px 20px; }
.video-title { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--ink); }

/* ------------------------------------------- article featured image */
.article-hero { margin: 0 0 28px; }
.article-hero img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); display: block; }

/* ------------------------------------------- news list thumbnails */
.ledger .row.has-thumb { grid-template-columns: 80px 1fr auto auto; }
.ledger .thumb { width: 80px; height: 56px; overflow: hidden; border-radius: var(--r); flex-shrink: 0; }
.ledger .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------- client reviews */
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.review-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px;
  box-shadow: 0 4px 16px rgba(0,0,0,.03); display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .35s, border-color .35s;
}
.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px -14px rgba(12,61,31,.16);
  border-color: rgba(40,170,70,.28);
}
.review-card .stars { font-size: 1.15rem; color: #f59e0b; margin-bottom: 12px; letter-spacing: 2px; }
.review-card .comment { font-size: .95rem; line-height: 1.7; color: var(--ink-soft); font-style: italic; margin: 0 0 20px; flex-grow: 1; }
.review-card .author { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line-2); padding-top: 16px; }
.avatar-circle {
  width: 42px; height: 42px; border-radius: 50%; background: var(--tint); color: var(--forest);
  font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(40,170,70,.3); flex-shrink: 0;
}
.review-card .author strong { display: block; font-size: .94rem; color: var(--ink); }
.review-card .author span { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; }

/* ---------------------------------------------------- review modal */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(7,42,20,.65); backdrop-filter: blur(6px);
  z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  background: var(--white); border-radius: var(--r-lg); padding: 36px; max-width: 480px; width: 100%;
  position: relative; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2);
  animation: modal-pop .35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-pop {
  from { opacity: 0; transform: scale(.92) translateY(20px); }
  to { opacity: 1; transform: none; }
}
.modal-close {
  position: absolute; top: 16px; right: 18px; background: transparent; border: 0; font-size: 1.25rem;
  color: var(--muted); cursor: pointer; padding: 6px; line-height: 1; transition: color .2s;
}
.modal-close:hover { color: var(--crimson); }
.star-picker { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: .92rem; }
.star-picker label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ------------------------------------------------------------ admin */
.admin-shell { background: var(--paper); }
.admin-wrap { display: grid; grid-template-columns: 232px 1fr; gap: 34px; align-items: start; padding: 34px 0 70px; }
.side { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; position: sticky; top: 96px; }
.side .who { padding: 18px 20px; background: var(--forest); color: var(--white); }
.side .who .n { font-weight: 600; font-size: .95rem; }
.side .who .r { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 3px; }
.side nav { padding: 8px; }
.side nav a { display: block; padding: 10px 13px; border-radius: var(--r); text-decoration: none; color: var(--ink-soft); font-size: .9rem; }
.side nav a:hover { background: var(--tint); color: var(--forest); }
.side nav a.on { background: var(--forest); color: var(--white); font-weight: 600; }
.side .foot { padding: 10px; border-top: 1px solid var(--line); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 30px; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.stat .n { font-family: var(--f-mono); font-size: 1.9rem; font-weight: 700; color: var(--forest); line-height: 1; }
.stat .n.alert { color: var(--crimson); }
.stat .l { font-size: .78rem; color: var(--muted); margin-top: 8px; }
.actions-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--forest); padding: 30px; }
.auth-card { background: var(--white); border-radius: var(--r-lg); padding: 40px; width: 100%; max-width: 420px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.5); }

/* ------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; padding-top: 52px; padding-bottom: 56px; }
  .svc-groups { grid-template-columns: 1fr; }
  .deadlines { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 34px; }
  .site-foot .cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .admin-wrap { grid-template-columns: 1fr; }
  .side { position: static; }
}
@media (max-width: 720px) {
  .navtoggle { display: block; }
  .mainnav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); flex-direction: column; align-items: stretch;
    padding: 10px 16px 20px; gap: 2px; border-top: 1px solid var(--line);
    box-shadow: 0 12px 24px -12px rgba(11,56,32,.3);
  }
  .mainnav.open { display: flex; }
  .mainnav a { padding: 12px 14px; }
  .mainnav a.on::after { display: none; }
  .langswitch { margin: 8px 0 0; text-align: center; }
  .site-head .wrap { position: relative; min-height: 66px; }
  .band-sec { padding: 52px 0; }
  .ledger .row { grid-template-columns: 1fr; gap: 6px; }
  .ledger .meta { order: -1; }
  .deadlines { grid-template-columns: 1fr; }
  .row2, .row3 { grid-template-columns: 1fr; }
  .site-foot .cols { grid-template-columns: 1fr; }
  .topbar .bits { gap: 12px; font-size: .68rem; }
  .pagehead { padding: 40px 0 34px; }
  .panel { padding: 22px; }
  /* The services catalogue gives most of its width back to the cards. */
  .svc-category-block { padding: 24px 16px; }
  .svc-cat-header { gap: 12px; margin-bottom: 20px; }
  .svc-cat-header h2 { font-size: 1.2rem; }
  .svc-acc-trigger { padding: 14px; }
  .svc-acc-inner { padding: 16px 14px 20px; }
}

/* ==========================================================================
   Motion and depth
   Everything here is decorative. It degrades to a plain, fully readable
   page if scripts are off, and switches itself off entirely for anyone
   who has asked their system to reduce motion.
   ========================================================================== */

/* ---------------------------------------------------- richer hero ground */
/* Three layers: a deep diagonal wash, two slow-drifting pools of light,
   and the stepped slab grid from before. The drift is 20+ seconds, so it
   reads as depth rather than as something moving. */
.hero {
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(22,84,58,.55) 0%, transparent 55%),
    radial-gradient(90% 80% at 10% 85%, rgba(192,34,59,.16) 0%, transparent 60%),
    linear-gradient(160deg, #0E4526 0%, var(--forest) 45%, var(--forest-deep) 100%);
}
.hero::before {
  background:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/78px 100%,
    linear-gradient(to top, rgba(255,255,255,.03) 0 20%, transparent 20% 100%);
  opacity: .9;
}
/* A second, slowly breathing veil of light over the top. */
.hero::after {
  content: ''; position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(38% 44% at 70% 30%, rgba(120,220,170,.13) 0%, transparent 70%),
    radial-gradient(34% 40% at 25% 70%, rgba(242,160,174,.10) 0%, transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.02); }
}

/* The dark call-to-action band gets the same treatment, quieter. */
.band-sec.dark {
  background:
    radial-gradient(90% 120% at 80% 0%, rgba(22,84,58,.5) 0%, transparent 60%),
    linear-gradient(165deg, var(--forest) 0%, var(--forest-deep) 100%);
  position: relative; overflow: hidden;
}

/* The tinted band picks up a whisper of colour so it is not flat grey. */
.band-sec.tint {
  background:
    radial-gradient(70% 90% at 90% 10%, rgba(11,56,32,.045) 0%, transparent 60%),
    radial-gradient(60% 80% at 5% 95%, rgba(192,34,59,.03) 0%, transparent 60%),
    var(--tint);
}

/* ------------------------------------------------------- scroll reveals */
/* Elements start low and transparent with a slight focus bloom, then smoothly glide up into place. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.98);
  filter: blur(4px);
  transition: opacity .95s cubic-bezier(0.16, 1, 0.3, 1), transform .95s cubic-bezier(0.16, 1, 0.3, 1), filter .95s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
[data-reveal].shown {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0px);
}

/* Children of a staggered group cascade in with noticeable cadence. */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 32px, 0) scale(0.98);
  filter: blur(3px);
  transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1), transform .9s cubic-bezier(0.16, 1, 0.3, 1), filter .9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}
[data-stagger].shown > * {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0px);
}
[data-stagger].shown > *:nth-child(1) { transition-delay: .06s; }
[data-stagger].shown > *:nth-child(2) { transition-delay: .14s; }
[data-stagger].shown > *:nth-child(3) { transition-delay: .22s; }
[data-stagger].shown > *:nth-child(4) { transition-delay: .30s; }
[data-stagger].shown > *:nth-child(5) { transition-delay: .38s; }
[data-stagger].shown > *:nth-child(6) { transition-delay: .46s; }
[data-stagger].shown > *:nth-child(n+7) { transition-delay: .54s; }

/* The hero animates on load rather than on scroll — it is already in view. */
.hero [data-intro] {
  opacity: 0; transform: translate3d(0, 32px, 0);
  animation: rise 1.05s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero [data-intro="1"] { animation-delay: .08s; }
.hero [data-intro="2"] { animation-delay: .20s; }
.hero [data-intro="3"] { animation-delay: .32s; }
.hero [data-intro="4"] { animation-delay: .44s; }
.hero [data-intro="5"] { animation-delay: .25s; }
@keyframes rise { to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* ------------------------------------------------- the stepped rule ticks */
/* Each tick grows from the floor when the section arrives. */
.steprule i { transform: scaleY(0); transform-origin: bottom; transition: transform .65s cubic-bezier(0.16, 1, 0.3, 1); }
.shown .steprule i, [data-reveal].shown.steprule i { transform: scaleY(1); }
.shown .steprule i:nth-child(1) { transition-delay: .08s; }
.shown .steprule i:nth-child(2) { transition-delay: .18s; }
.shown .steprule i:nth-child(3) { transition-delay: .28s; }
.shown .steprule i:nth-child(4) { transition-delay: .38s; }
.shown .steprule i:nth-child(5) { transition-delay: .48s; }

/* --------------------------------------------------------- richer cards */
.svc-col {
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .4s;
}
.svc-col:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px -18px rgba(12,61,31,.25), 0 0 0 1px rgba(40,170,70,.25);
  border-color: rgba(40,170,70,.3);
}
.svc-col li .t { position: relative; transition: background .25s cubic-bezier(0.16, 1, 0.3, 1), padding-left .25s cubic-bezier(0.16, 1, 0.3, 1); }
.svc-col li .t::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--crimson); transform: scaleY(0); transform-origin: center;
  transition: transform .28s cubic-bezier(0.16, 1, 0.3, 1);
}
.svc-col li .t:hover::before { transform: scaleY(1); }
.svc-col li .t:hover { padding-left: 32px; background: rgba(12,61,31,.04); }

/* Deadline tiles lift a little and warm up. */
.dl {
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), background .35s, border-color .35s, box-shadow .35s;
}
.dl:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 16px 36px -10px rgba(0,0,0,.35);
}

/* Ledger rows get a crimson edge that wipes in from the left. */
.ledger .row {
  position: relative;
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), background .3s, box-shadow .3s;
}
.ledger .row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--crimson); transform: scaleY(0); transform-origin: top;
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ledger .row:hover {
  transform: translateX(8px);
  background: #ffffff;
  box-shadow: 0 12px 30px -10px rgba(12,61,31,.12);
}
.ledger .row:hover::before { transform: scaleY(1); }

/* --------------------------------------------------- calculator polish */
/* The card floats in with a touch of perspective and keeps a soft glow. */
.slabcard {
  position: relative;
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .4s;
}
.slabcard:hover {
  box-shadow: 0 35px 80px -25px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.15);
}
.slabcard::after {
  content: ''; position: absolute; inset: -1px; border-radius: var(--r-lg);
  pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
/* When a figure changes, it ticks over rather than jumping. */
.result .val { transition: color .2s; }
.result .val.pulse { animation: pop .42s cubic-bezier(.16,.84,.44,1); }
@keyframes pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.055); }
  100% { transform: scale(1); }
}
/* The filled part of each rung slides; the whole rung tints as it lights up. */
.rung { transition: background .3s ease; }
.rung.active { background: #EAF0EC; }

/* -------------------------------------------------------- button sheen */
.btn {
  position: relative; overflow: hidden;
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s cubic-bezier(0.16, 1, 0.3, 1), background-color .2s, color .2s;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -6px rgba(12,61,31,.3);
}
.btn.crimson:hover {
  box-shadow: 0 12px 28px -6px rgba(208,24,36,.4);
}
.btn.outline-light:hover {
  box-shadow: 0 12px 28px -6px rgba(0,0,0,.35);
  background: rgba(255,255,255,.15);
}
.btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .65s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:hover::after { left: 120%; }
.btn.ghost::after { background: linear-gradient(100deg, transparent, rgba(11,56,32,.12), transparent); }

/* Floating action buttons hover lift */
.fab {
  transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s;
}
.fab:hover {
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* WhatsApp button gets a slow halo so the eye finds it without it shouting. */
.fab.wa::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37,211,102,.5);
  animation: halo 3s ease-out infinite;
}
.fab.fb::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(24,119,242,.5);
  animation: fb-halo 3s ease-out infinite 1.5s;
}
@keyframes halo {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
@keyframes fb-halo {
  0%   { box-shadow: 0 0 0 0 rgba(24,119,242,.4); }
  70%  { box-shadow: 0 0 0 16px rgba(24,119,242,0); }
  100% { box-shadow: 0 0 0 0 rgba(24,119,242,0); }
}

/* Nav underline sweeps rather than blinks. */
.mainnav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 1px; height: 2px;
  background: var(--crimson); border-radius: 1px;
  transform: scaleX(0); transform-origin: left; transition: transform .26s cubic-bezier(.16,.84,.44,1);
}
.mainnav a:hover::after { transform: scaleX(1); }
.mainnav a.on::after { transform: scaleX(1); }

/* ------------------------------------------------------ reduced motion */
/* If the reader has asked for less movement, everything above stops and
   every hidden element is simply shown. */
@media (prefers-reduced-motion: reduce) {
  .hero::after, .fab::before { animation: none; }
  [data-reveal], [data-stagger] > *, .hero [data-intro] {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .steprule i { transform: scaleY(1) !important; }
  .btn::after { display: none; }
}

/* ==========================================================================
   Legibility pass
   The small mono labels were set too small and too widely spaced to read
   comfortably, and worse in Bangla, where the mono face has no Bengali
   glyphs at all. Everything below is bigger, tighter-spaced and darker.
   ========================================================================== */

/* --- small labels, across the board --- */
.topbar { font-size: .8rem; letter-spacing: .02em; }
.lang-bn .topbar { font-family: var(--f-bn); font-size: .88rem; letter-spacing: 0; }
.topbar .wrap { min-height: 42px; }
.topbar, .topbar a { color: rgba(255,255,255,.9); }

.logo .sub { font-size: .66rem; letter-spacing: .12em; }
.lang-bn .logo .sub { font-family: var(--f-bn); font-size: .78rem; letter-spacing: .02em; text-transform: none; }

.mainnav a { font-size: .96rem; }
.lang-bn .mainnav a { font-size: 1.02rem; }
.langswitch { font-size: .76rem; letter-spacing: .06em; }

h4 { font-size: 1rem; letter-spacing: .06em; }
.lang-bn h4 { letter-spacing: .02em; }

.tag { font-size: .72rem; letter-spacing: .06em; padding: 5px 10px; }
.lang-bn .tag { font-size: .82rem; letter-spacing: 0; }

.kv dt { font-size: .74rem; letter-spacing: .06em; }
.lang-bn .kv dt { font-size: .84rem; letter-spacing: 0; }
.kv dd { font-size: .96rem; }

table.data th { font-size: .74rem; letter-spacing: .05em; color: var(--ink-soft); }
.lang-bn table.data th { font-size: .86rem; letter-spacing: 0; }
table.data td { font-size: .94rem; }
table.data td.num { font-size: .88rem; }

.ledger .date { font-size: .82rem; }
.lang-bn .ledger .date { font-size: .9rem; }
.ledger .meta { font-size: .74rem; letter-spacing: .05em; }
.lang-bn .ledger .meta { font-size: .84rem; letter-spacing: 0; }
.ledger .subject span { font-size: .92rem; }

.crumbs { font-size: .8rem; letter-spacing: .04em; }
.lang-bn .crumbs { font-size: .9rem; }

.dl .when { font-size: .8rem; letter-spacing: .05em; }
.lang-bn .dl .when { font-size: .88rem; }
.dl .what { font-size: 1.02rem; }
.dl .left { font-size: .88rem; }
.dl .form { font-size: .74rem; color: rgba(255,255,255,.6); }

.trustrow span { font-size: .78rem; letter-spacing: .03em; color: rgba(255,255,255,.85); }
.lang-bn .trustrow span { font-size: .88rem; }

.person .creds { font-size: .76rem; letter-spacing: .06em; }
.lang-bn .person .creds { font-size: .86rem; letter-spacing: 0; }
.person .role { font-size: .92rem; }
.person .bio { font-size: .92rem; }

.chip { font-size: .78rem; letter-spacing: .04em; }
.lang-bn .chip { font-size: .88rem; letter-spacing: 0; }

.field label { font-size: .88rem; color: var(--ink); }
.field .hint { font-size: .84rem; }
.note { font-size: .84rem; line-height: 1.7; }
legend { font-size: .78rem; letter-spacing: .08em; }
.lang-bn legend { font-size: .88rem; letter-spacing: .02em; }

.slabcard .head p { font-size: .78rem; letter-spacing: .04em; }
.lang-bn .slabcard .head p { font-size: .88rem; }
.rung .band { font-size: .78rem; }
.lang-bn .rung .band { font-size: .86rem; }
.rung .rate { font-size: .74rem; }
.result .eff { font-size: .82rem; }
.result .lbl { font-size: .92rem; }

.svc-col > header p { font-size: .88rem; }
.svc-col li span { font-size: .88rem; }
.card p { font-size: .94rem; }
.aside-card li { font-size: .94rem; }

.site-foot a { font-size: .94rem; }
.site-foot p { font-size: .94rem; }
.site-foot .contactline { font-size: .86rem; line-height: 2.1; color: rgba(255,255,255,.72); }
.site-foot h4 { font-size: .8rem; letter-spacing: .08em; }
.lang-bn .site-foot h4 { font-size: .9rem; letter-spacing: .02em; }
.fine { font-size: .82rem; color: rgba(255,255,255,.6); }
.lang-bn .fine { font-size: .88rem; }
.disclaimer { font-size: .86rem; color: rgba(255,255,255,.55); line-height: 1.8; }

.side nav a { font-size: .95rem; }
.side .who .r { font-size: .74rem; letter-spacing: .06em; }
.lang-bn .side .who .r { font-size: .84rem; letter-spacing: 0; }
.stat .l { font-size: .86rem; }

/* --- the logo's green, used where a lift is wanted --- */
.hero h1 em { color: #6FE39A; }          /* readable on the dark ground */
.person .por { border-color: #fff; }
.svc-col:nth-child(1) > header { border-bottom-color: var(--leaf); }
.eyebrow.crimson { color: var(--crimson); font-weight: 600; }
.steprule i { background: var(--leaf); opacity: .3; }
.steprule i:nth-child(5) { background: var(--crimson); opacity: .9; }

/* --- header sits a little taller now the logo is real --- */
.site-head .wrap { min-height: 92px; }
.logo img { height: 58px; }
@media (max-width: 720px) {
  .logo img { height: 44px; }
  .site-head .wrap { min-height: 72px; }
  .topbar { font-size: .74rem; }
  .lang-bn .topbar { font-size: .8rem; }
}

/* The mono face carries no Bengali, so on the Bangla site these small
   caps labels fell back to a thin system font with English letter
   spacing still applied — which is what made them hard to read. */
.lang-bn .eyebrow {
  font-family: var(--f-bn); font-size: .92rem; letter-spacing: 0;
  text-transform: none; font-weight: 600; color: var(--ink-soft);
}
.lang-bn .eyebrow.on-dark { color: rgba(255,255,255,.82); }
.lang-bn .eyebrow.crimson { color: var(--crimson); }
.lang-bn .mono { font-family: var(--f-bn); font-size: .92em; letter-spacing: 0; }