/* Self-hosted fonts (assets/fonts/README.md says where they come from). Served from
   our own origin, so no visitor contacts Google and the CSP stays font-src 'self'.
   One variable file per subset covers weights 400-700; unicode-range means a page
   only downloads the subsets its text actually uses. */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('fonts/roboto-slab-latin-wght-5.3.0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('fonts/roboto-slab-latin-ext-wght-5.3.0.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans Bengali';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url('fonts/noto-sans-bengali-bengali-wght-5.3.0.woff2') format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1;
}


/* Brick red and gold, sampled from the logo artwork: the brickwork sits around
   #8e2311 and the gold around #d89d3e. The darker --gold-deep is the one that
   is safe to put white text on; --gold-light is for gold on dark surfaces. */
:root {
  --bg: #f7f3eb;
  --surface: #ffffff;
  --sand: #f0e7db;
  --ink: #2b1d18;
  --muted: #6b5a51;
  --accent: #9c2e1a;
  --accent-dark: #5e1409;
  --accent-light: #c05a3e;
  --accent-soft: #e3c38e;
  --border: #e6dac8;
  --gold: #b6863a;
  --gold-deep: #8a6220;
  --gold-light: #e5ac4f;
  /* Kept as a token for full-width gold bands. Since the 2026-10-16 premium pass
     the dark surfaces (hero, stats, CTA band, footer) are one ink surface instead. */
  --gold-band: #5f4310;
  --brick: #a8482c;

  /* Every Bengali run on the page resolves through this one property, so the
     typeface is a single-line swap. To move to Shurjo: add its @font-face below
     and put 'Shurjo' at the front of this stack — Noto Sans Bengali stays as the
     fallback for anyone the file fails to reach. */
  --font-bengali: 'Noto Sans Bengali', sans-serif;

  /* ---- Derived system tokens: built only from the colours above. ---- */
  /* The one dark surface: ink, warmed toward --accent-dark at one corner. */
  --dark-surface: radial-gradient(120% 90% at 100% 0%, rgba(94, 20, 9, 0.85) 0%, rgba(94, 20, 9, 0) 62%), var(--ink);
  --on-dark: var(--bg);
  --on-dark-muted: rgba(247, 243, 235, 0.78);
  --hairline-dark: rgba(247, 243, 235, 0.16);
  /* One hairline: 1px var(--border) on light grounds, 1px --hairline-dark on dark. */
  --hairline: 1px solid var(--border);
  --shadow-soft: 0 1px 2px rgba(43, 29, 24, 0.04), 0 10px 24px -14px rgba(43, 29, 24, 0.18);
  --shadow-lift: 0 2px 4px rgba(43, 29, 24, 0.05), 0 18px 32px -18px rgba(43, 29, 24, 0.26);
  --radius-card: 1rem;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --section-y: clamp(3.75rem, 7vw, 5.75rem);
  /* Sticky header height plus breathing room, for anchored headings. */
  --anchor-offset: 132px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Roboto Slab', serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
a, button, summary, input, select, textarea { touch-action: manipulation; }

/* One focus ring for the whole site; dark surfaces swap it to gold-light. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero :focus-visible,
.cta-box :focus-visible,
.site-footer :focus-visible { outline-color: var(--gold-light); }

.bengali-tagline {
  font-family: var(--font-bengali);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.6;
  color: var(--accent);
  margin: 0.8rem 0;
  letter-spacing: 0; /* never track Bangla: it breaks the matra joins (bangla-i18n §3) */
}
.wrap { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; }
/* Off-screen until it takes focus, so the first Tab on the page offers a way
   past the header instead of walking the whole nav. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 0.6rem 0.6rem;
  text-decoration: none;
  font-weight: 600;
  transition: top 180ms ease;
}
.skip-link:focus { top: 0; }
main:focus { outline: none; }
/* Reveal-on-scroll is opt-in from JS: if the script fails to run, `.js` is never
   set and every revealed section stays visible instead of being hidden forever. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Header ---------- */
/* Compact on purpose: a ~36px utility strip and a ~78px bar, so the sticky
   header takes about a seventh of a laptop screen instead of a quarter. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--surface);
  border-bottom: var(--hairline);
  transition: box-shadow 250ms var(--ease);
}
/* script.js sets .is-scrolled once the page moves: the header lifts off the page
   instead of carrying a shadow over the hero at rest. */
.site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(43, 29, 24, 0.35); }

.strip {
  position: relative; /* anchors .install-hint */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  min-height: 36px;
  padding: 4px clamp(16px, 2.5vw, 34px);
  background: var(--bg);
  border-bottom: var(--hairline);
  color: var(--ink);
}

/* The building mark already leads the lockup a few pixels below; a second copy
   in the strip only competed with it. */
.strip .bn { display: none; }

.strip .meta {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 500;
}

.strip .meta a {
  position: relative;
  color: inherit;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color 200ms var(--ease);
}
.strip .meta a:hover { color: var(--accent); }

/* The strip is thinner than a 44px finger, so its two controls carry an
   invisible hit area that reaches past their drawn edge. */
.strip .meta a::before,
.install-btn::before {
  content: '';
  position: absolute;
  inset: -16px -8px;
}

/* ---------- Install (PWA) ---------- */
.install-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid rgba(156, 46, 26, 0.55);
  color: var(--accent);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}

.install-btn:hover,
.install-btn:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Downward arrow into a tray — drawn rather than an icon font, so it inherits
   the button's colour on hover without a second asset. */
.install-icon {
  width: 9px;
  height: 10px;
  flex: none;
  background: currentColor;
  clip-path: polygon(
    40% 0,
    60% 0,
    60% 45%,
    85% 45%,
    50% 82%,
    15% 45%,
    40% 45%,
    40% 0,
    0 88%,
    100% 88%,
    100% 100%,
    0 100%
  );
}

.install-hint {
  position: absolute;
  right: clamp(16px, 2.5vw, 34px);
  top: calc(100% + 6px);
  z-index: 60;
  margin: 0;
  max-width: 260px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 24px rgba(43, 29, 24, 0.25);
}

.install-hint strong { color: var(--gold-light); }

.bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 10px clamp(16px, 2.5vw, 34px);
  background: var(--surface);
}

.lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex: none;
}

/* bhabon-mark.png is the building mark cut out of the stacked logo artwork —
   the wordmark beside it is set as live text in .brand-name instead. */
.lockup .mark {
  display: block;
  width: 62px;
  height: 56px;
  flex: none;
}

.lockup .mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lockup .rule {
  width: 1px;
  height: 44px;
  background: var(--border);
}

/* Always stacked, the way the logo artwork is: BHABON over HOLDINGS LIMITED
   over the Bangla tagline. */
.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 0;
}

.brand-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  white-space: nowrap;
}

.brand-title,
.brand-subtitle {
  font-family: 'Roboto Slab', serif;
  margin: 0;
}

.brand-title {
  font-size: clamp(18px, 1.55vw, 22px);
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: 0.18em;
  line-height: 1.05;
}

.brand-subtitle {
  font-size: clamp(9.5px, 0.78vw, 11px);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.3em;
  line-height: 1.2;
}

.brand-bn {
  font-family: var(--font-bengali);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--accent);
  margin: 1px 0 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 0 0 auto; /* pushes the links right, next to the CTA */
  list-style: none;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 0;
  position: relative;
  white-space: nowrap;
  transition: color 200ms var(--ease);
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: right 320ms var(--ease);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.active::after,
.site-nav a[aria-current="page"]::after {
  right: 0;
}
.site-nav a.active,
.site-nav a[aria-current="page"] { color: var(--accent); }

/* Header CTA: the compact form of the ghost button. */
.cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 0 22px;
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: 0 6px 16px -10px rgba(156, 46, 26, 0.7);
  transition: background 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}

.cta:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  box-shadow: 0 10px 22px -12px rgba(94, 20, 9, 0.8);
}

/* Tighten the link spacing before anything has to drop out of the header. */
@media (max-width: 1340px) {
  .bar { gap: 20px; }
  .site-nav { gap: 18px; }
  .cta { padding: 0 18px; }
}
/* Below this width the button no longer fits beside six links, so it is the
   button that goes rather than the navigation — Contact reaches the same place. */
@media (max-width: 1120px) {
  .cta { display: none; }
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin: 0 -10px 0 auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); border-radius: 1px; }

/* Six links stop fitting beside the lockup well before phone width, so the
   hamburger takes over here. */
@media (max-width: 1060px) {
  .menu-toggle { display: inline-flex; }
  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex;
    position: absolute;
    top: calc(100% + 1px);
    right: clamp(16px, 2.5vw, 34px);
    min-width: 15rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    padding: 0.4rem 1.25rem;
    border: var(--hairline);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lift);
  }
  .site-nav.is-open a { padding: 0.85rem 0; text-align: left; }
  .site-nav.is-open a + a { border-top: var(--hairline); }
  .site-nav.is-open a::after { display: none; }
}

@media (min-width: 1300px) {
  .site-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 28px;
    min-height: 76px;
    padding: 0 clamp(24px, 2.5vw, 40px);
  }
  .strip, .bar { display: contents; }
  .lockup { grid-column: 1; grid-row: 1; }
  .site-nav { grid-column: 2; grid-row: 1; justify-content: center; margin: 0; gap: 32px; }
  .strip .meta { grid-column: 3; grid-row: 1; gap: 18px; }
  .cta { grid-column: 4; grid-row: 1; }
  .strip .meta a { color: var(--muted); }
  .strip .meta a:hover { color: var(--accent); }
  .install-hint { right: clamp(24px, 2.5vw, 40px); }
  .lockup .mark { width: 56px; height: 50px; }
  .lockup .rule { height: 40px; }
}

/* ---------- Eyebrow: the one section label ---------- */
.eyebrow {
  position: relative;
  padding-left: 2.5rem; /* room for the rule; wrapped lines hang under the text */
  font-family: 'Roboto Slab', serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8125rem;
  line-height: 1.6;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 1rem;
}
.eyebrow::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em; /* the middle of the first line, so a wrapped label stays tidy */
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
/* On dark surfaces the label goes gold-light (gold is only ever on dark). */
.eyebrow.eyebrow-on-dark,
.hero .eyebrow,
.cta-box .eyebrow { color: var(--gold-light); }

/* ---------- Buttons: three styles only ---------- */
/* 1. .btn-primary — filled. Brick on light grounds, cream on dark ones.
   2. .btn-secondary / .btn-ghost — one ghost outline, coloured by its ground.
   3. Text links (accent, underlined on hover). The header .cta is the compact ghost. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  text-decoration: none;
  border: 1px solid transparent;
  font-weight: 600;
  /* justify-content only centres the text block inside the button; without this
     a label that wraps to two lines stays ragged-left within that block. */
  text-align: center;
  line-height: 1.35;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-primary:active { background: var(--accent-dark); box-shadow: inset 0 1px 2px rgba(43, 29, 24, 0.3); }

.btn-secondary,
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(43, 29, 24, 0.28); }
.btn-secondary:hover,
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(156, 46, 26, 0.04); }

/* On the dark surfaces: cream fill with ink text, and a cream ghost. */
.hero .btn-primary,
.cta-box .btn-primary,
.site-footer .btn-primary { background: var(--on-dark); color: var(--ink); }
.hero .btn-primary:hover,
.cta-box .btn-primary:hover,
.site-footer .btn-primary:hover { background: var(--surface); color: var(--accent-dark); }
.hero .btn-secondary,
.cta-box .btn-secondary,
.site-footer .btn-secondary { color: var(--on-dark); border-color: rgba(247, 243, 235, 0.4); }
.hero .btn-secondary:hover,
.cta-box .btn-secondary:hover,
.site-footer .btn-secondary:hover { border-color: var(--on-dark); color: var(--on-dark); background: rgba(247, 243, 235, 0.08); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Hero: type-led, on the one dark surface ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Buildings behind the type, held down by the ink so the copy stays the anchor.
     Swap the url() for a real BHL render or site photo the day one exists: the
     overlay is tuned for any image. */
  background:
    linear-gradient(90deg, rgba(43, 29, 24, 0.94) 0%, rgba(43, 29, 24, 0.82) 45%, rgba(94, 20, 9, 0.55) 100%),
    url('img/hero-photo-1511818966892-w1600.webp') center / cover no-repeat,
    var(--ink);
  color: var(--on-dark);
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}
/* A drafting grid in gold-light hairlines, faded out toward the copy. Pure CSS:
   no image, nothing to load. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(229, 172, 79, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(229, 172, 79, 0.09) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(70% 90% at 82% 30%, black 0%, transparent 78%);
  mask-image: radial-gradient(70% 90% at 82% 30%, black 0%, transparent 78%);
  opacity: 0.35; /* over the photo the grid is a hint, not a second texture */
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: end;
}
.hero h1, .section h2, .site-footer h2 {
  font-family: 'Roboto Slab', serif;
  line-height: 1.1;
  margin: 0 0 1rem;
  font-weight: 700;
}
.hero h1 {
  font-size: clamp(2.3rem, 5.4vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--on-dark);
  max-width: 15ch;
  margin-bottom: 1.25rem;
}
.hero-copy > p:not(.eyebrow):not(.bengali-tagline) { color: var(--on-dark-muted); max-width: 54ch; font-size: 1.05rem; }
.hero-copy .bengali-tagline { color: var(--gold-light); font-size: 1.2rem; margin: 0 0 1.25rem; }
.hero-actions { display: flex; gap: 0.75rem; margin-top: 2rem; flex-wrap: wrap; }

/* The three service paths as a calm index, not a floating card. */
.hero-paths { border-top: 1px solid var(--hairline-dark); }
.hero-path-list { list-style: none; margin: 0; padding: 0; counter-reset: path; }
.hero-path-list li {
  counter-increment: path;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: baseline;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--hairline-dark);
  color: var(--on-dark);
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.45;
}
.hero-path-list li::before {
  content: counter(path, decimal-leading-zero);
  color: var(--gold-light);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.hero-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 1.1rem 0 0;
  padding: 0;
  font-size: 0.85rem;
  color: var(--on-dark-muted);
}
.hero-tags li + li { padding-left: 1.1rem; border-left: 1px solid var(--hairline-dark); }

/* The stats continue the hero's surface, divided from it by one hairline. */
.stats-bar { background: var(--ink); color: var(--on-dark); padding: 1.6rem 0; border-top: 1px solid var(--hairline-dark); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.stat-grid div { border-left: 1px solid var(--hairline-dark); padding-left: 1.25rem; }
.stat-grid div:first-child { border-left: 0; padding-left: 0; }
.stat-grid strong { display: block; font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.stat-grid span { display: block; color: var(--on-dark-muted); font-size: 0.9rem; line-height: 1.5; }

/* ---------- Sections: one rhythm ---------- */
.section { padding: var(--section-y) 0; scroll-margin-top: var(--anchor-offset); }
.section h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); }
.section p { color: var(--muted); }
/* .section p would otherwise outrank the label's own colour. */
.section .eyebrow { color: var(--accent); }
.hero h1, .section h2, .cta-box h2 { text-wrap: balance; }
/* A plain page title (the 404 page); the tool pages refine it below. */
.section h1 { font-family: 'Roboto Slab', serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 1rem; text-wrap: balance; }
/* Buttons set in a run of text keep their distance when they wrap. */
.section p > .btn { margin-bottom: 0.6rem; }
.section p > .btn + .btn { margin-left: 0.5rem; }
.section-head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.section-head h2 { max-width: 28ch; margin-bottom: 0; }
.section-head .bengali-tagline { margin: 0.9rem 0 0; }

.two-col { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.about h2 { max-width: 18ch; }
.about .two-col > div:last-child p:first-child { margin-top: 0; }
/* Emphasis in running copy is weight, not colour. */
.about p strong { color: var(--ink); font-weight: 600; }

/* About and Services share the cream ground; a hairline on the rail divides them. */
.services { padding-top: 0; }
.services > .wrap { border-top: var(--hairline); padding-top: var(--section-y); }

/* ---------- The one card ---------- */
.card,
.project-card,
.roi-form,
.roi-results {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.card, .project-card { transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.card:hover, .project-card:hover { border-color: rgba(156, 46, 26, 0.32); box-shadow: var(--shadow-lift); }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.card { padding: 1.6rem 1.5rem 1.7rem; }
/* A short brick rule is the card's only accent. */
.card::before { content: ''; display: block; width: 2rem; height: 2px; background: var(--accent); margin-bottom: 1.25rem; }
.card h3, .step h3, .project-body h3 { font-size: 1.15rem; line-height: 1.35; margin: 0 0 0.5rem; }
.card p, .step p, .project-body p { margin: 0; }

/* ---------- Why us: a hairline list, not more cards ---------- */
.trust-section { background: var(--sand); }
.trust-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.trust-grid h2 { max-width: 18ch; }
.trust-list { display: grid; border-bottom: 1px solid rgba(43, 29, 24, 0.12); }
.trust-item { padding: 1.3rem 0; border-top: 1px solid rgba(43, 29, 24, 0.12); }
.trust-item strong { display: block; margin-bottom: 0.25rem; color: var(--ink); font-size: 1.08rem; font-weight: 600; }
.trust-item span { color: var(--muted); font-size: 0.95rem; }

/* ---------- Process: numbered columns on one rule ---------- */
.step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.step { padding-top: 1.25rem; border-top: 1px solid rgba(43, 29, 24, 0.18); }
.step > span {
  display: block;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.9rem;
}

/* ---------- Build film ---------- */
/* Held at three-quarters width and centred. The step list below stays full
   width, so the clip reads as one item in the section rather than its banner. */
.film { margin: 0 auto; width: 75%; }
.film-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  border: var(--hairline);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-lift);
}
.film-video { width: 100%; height: 100%; object-fit: cover; }

/* Large and centred while idle, so the poster always reads as playable. Visitors
   who have asked for reduced motion never get an autoplay, and a small pill in
   the corner was far too easy to miss. It shrinks away once the film runs. */
.film-toggle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: rgba(247, 243, 235, 0.96);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(43, 29, 24, 0.3);
  /* Position is not transitioned — only the idle/playing skin. */
  transition: background 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
}
.film-toggle:hover { background: #fff; }
.film-toggle:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

.film-toggle.is-playing {
  left: 1rem;
  top: auto;
  bottom: 1rem;
  transform: none;
  gap: 0.55rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  opacity: 0.9;
  box-shadow: 0 4px 14px rgba(43, 29, 24, 0.22);
}
.film-toggle.is-playing:hover { opacity: 1; }

.film-toggle-icon {
  width: 14px;
  height: 16px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
/* Two bars instead of the triangle once it is running. */
.film-toggle.is-playing .film-toggle-icon {
  width: 12px;
  height: 14px;
  background: none;
  clip-path: none;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

/* Dim the poster while idle so the button is clearly the primary action. */
.film-stage:not(.film-failed):has(.film-toggle:not(.is-playing))::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(43, 29, 24, 0.24);
  pointer-events: none;
}

/* Shown only when the clip genuinely cannot play — see fail() in script.js. */
.film-message {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 0.5rem;
  background: rgba(43, 29, 24, 0.92);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.5;
}
.film-failed .film-video { height: auto; object-fit: contain; }

.film figcaption {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.film-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem clamp(1.25rem, 3vw, 2.5rem);
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
}
.film-steps li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.8rem 0;
  border-top: 1px solid rgba(43, 29, 24, 0.18);
  color: var(--ink);
  font-size: 0.95rem;
}
/* Same numeral as the process steps. (Gold numerals on cream failed contrast.) */
.film-steps span { color: var(--accent); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

/* ---------- Projects ---------- */
.projects { background: var(--sand); }
/* The two real projects lead at half width each; the three illustrative cards
   follow at a third. Five cards no longer leave one orphan on its own row. */
.project-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.project-card { grid-column: span 2; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.project-card:nth-child(-n + 2) { grid-column: span 3; }
.project-visual { height: 220px; background-size: cover; background-position: center; position: relative; margin-bottom: 0; }
.project-card:nth-child(-n + 2) .project-visual { height: 300px; }
.project-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 29, 24, 0.02), rgba(43, 29, 24, 0.22)); }
/* Own photography — falls back to a solid brick plate if the file is missing. */
.visual-mymensingh {
  background-color: var(--accent-dark);
  background-image: url('projects/mymensingh-residential.jpg');
  background-position: 50% 38%;
}

/* Two site photos of one project, side by side — the tall halves suit the
   portrait source images better than cropping either to a landscape band.
   The ::after overlay is absolutely positioned, so it is not a grid item. */
.project-visual-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.project-visual-split .shot {
  background-color: var(--accent-dark);
  background-size: cover;
  background-repeat: no-repeat;
}
.shot-current-one { background-image: url('projects/mymensingh-current-1.jpg'); background-position: 50% 32%; }
.shot-current-two { background-image: url('projects/mymensingh-current-2.jpg'); background-position: 50% 35%; }
/* The label on the photo: quiet ink glass, not a red pill. */
.project-status {
  position: absolute;
  z-index: 1;
  top: 0.85rem;
  left: 0.85rem;
  background: rgba(43, 29, 24, 0.78);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}
/* Running work is told apart by value, and by its word. */
.project-status.ongoing { background: var(--gold-deep); }
.visual-one { background-image: url('img/project-one-photo-1512918728675-w1200.webp'); }
.visual-two { background-image: url('img/project-two-photo-1460317442991-w1200.webp'); }
.visual-three { background-image: url('img/project-three-photo-1502672260266-w1200.webp'); }
.project-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
/* The category reads as a label, not a badge. */
.project-badge { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.5; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
.project-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: auto; padding-top: 1rem; }
.project-meta span { background: transparent; border: var(--hairline); color: var(--muted); font-size: 0.78rem; line-height: 1.4; padding: 0.3rem 0.65rem; border-radius: 999px; }

/* ---------- Closing CTA band ---------- */
.cta-section { padding: 0 0 var(--section-y); background: var(--sand); }
.cta-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dark-surface);
  border-radius: 1.25rem;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem 2.5rem;
  color: var(--on-dark);
  box-shadow: var(--shadow-lift);
}
.cta-box h2 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.25; letter-spacing: -0.01em; color: var(--on-dark); max-width: 30ch; }
.cta-box .btn { flex: none; }

/* ---------- Footer: the same dark surface ---------- */
.site-footer {
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(2.25rem, 4vw, 3rem) 0 1.25rem;
  border-top: 1px solid rgba(229, 172, 79, 0.45);
  scroll-margin-top: var(--anchor-offset);
}
.site-footer h2 { color: var(--on-dark); font-size: 1.25rem; letter-spacing: -0.01em; margin: 0; }
.site-footer .footer-brand .bengali-tagline { margin: 0.25rem 0 0.5rem; font-size: 0.95rem; }
.footer-brand p:last-child { margin: 0; font-size: 0.92rem; line-height: 1.6; }
.site-footer .bengali-tagline { color: var(--gold-light); }
.site-footer p { color: var(--on-dark-muted); }
/* The logo is brick red and gold, so it needs a light plaque to carry it over
   the dark footer rather than sitting directly on the band. */
.footer-logo {
  display: inline-block;
  background: var(--bg);
  border-radius: 0.7rem;
  padding: 0.45rem 0.6rem;
  line-height: 0;
  flex: none;
}
.footer-logo img { display: block; height: 56px; width: auto; }
/* Compact footer: brand · contact · enquiry button, one row on desktop. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.footer-brand { display: flex; gap: 1rem; align-items: flex-start; }
.footer-grid-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
/* The enquiry lives in a modal; the footer only carries the button that opens it. */
.footer-enquiry { justify-self: end; display: grid; gap: 0.75rem; justify-items: end; max-width: 22rem; }
.enquiry-status { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--gold-light); text-align: right; }
.enquiry-status:empty { display: none; }
.contact-list { list-style: none; padding: 0; margin: 0; max-width: 40rem; font-size: 0.95rem; }
.contact-list li { padding: 0.15rem 0; line-height: 1.6; }
.contact-list strong { font-weight: 600; color: var(--on-dark); }
.contact-list a { text-underline-offset: 3px; text-decoration-color: rgba(247, 243, 235, 0.4); }
.contact-list a:hover { text-decoration-color: var(--gold-light); }
/* The address opens Google Maps, so it carries the same outbound mark the rest
   of the site uses rather than looking like an in-page link. */
.map-pin::before { content: '↗'; margin-left: 0.35rem; font-size: 0.85em; opacity: 0.85; }
/* Points at RAJUK's own map rather than restating the rules ourselves — the
   authority's site is the only version that stays current. */
.footer-note { margin: 0.6rem 0 0; font-size: 0.85rem; line-height: 1.6; }
.footer-note a { font-weight: 600; color: var(--on-dark); }
.contact-form { display: grid; gap: 0.9rem; align-content: start; }
.contact-form label { display: grid; gap: 0.35rem; font-size: 0.92rem; font-weight: 500; }
.contact-form input, .contact-form select, .contact-form textarea {
  border: 1px solid rgba(247, 243, 235, 0.42);
  background: rgba(247, 243, 235, 0.06);
  color: var(--on-dark);
  border-radius: 0.7rem;
  padding: 0.75rem 0.9rem;
  min-height: 44px;
  font-size: 1rem;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: rgba(247, 243, 235, 0.6); }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline-offset: 1px; background: rgba(247, 243, 235, 0.1); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(247, 243, 235, 0.6); }
/* The select inherits light text for the dark footer, but the native dropdown
   list opens on a white background — options need their own dark colour. */
.contact-form select option { color: var(--ink); background: #fff; }
.contact-form .btn { justify-self: start; }
.form-status { min-height: 1.2rem; margin: 0; font-size: 0.95rem; color: #f5d8a6; }
.form-status.error { color: #ffb3b3; }

/* WhatsApp keeps its own green for recognition, at a quieter size and shadow. */
.whatsapp-float {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(43, 29, 24, 0.12), 0 8px 18px -8px rgba(43, 29, 24, 0.35);
  transition: box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.whatsapp-float svg { width: 26px; height: 26px; display: block; }
.whatsapp-float:hover,
.whatsapp-float:focus-visible { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(43, 29, 24, 0.14), 0 12px 24px -10px rgba(43, 29, 24, 0.4); }

/* Back to top is a quiet neutral disc, not a second loud button. */
.back-to-top {
  position: fixed;
  right: calc(max(1rem, env(safe-area-inset-right, 0px)) + 3px);
  bottom: calc(max(1rem, env(safe-area-inset-bottom, 0px)) + 62px);
  z-index: 80;
  border: var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 250ms var(--ease), transform 250ms var(--ease), visibility 250ms, border-color 200ms var(--ease), color 200ms var(--ease);
}
.back-to-top:hover { border-color: var(--accent); color: var(--accent); }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
/* They float over the ink hero and footer, where the accent ring alone is ~2.2:1:
   a surface halo keeps the ring visible on any ground (WCAG 1.4.11). */
.whatsapp-float:focus-visible, .back-to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px var(--surface); }

.footer-bottom { border-top: 1px solid var(--hairline-dark); margin-top: 1.75rem; padding-top: 1rem; color: var(--on-dark-muted); font-size: 0.88rem; }
.footer-bottom p { margin: 0.25rem 0; color: inherit; }
.footer-bottom a { color: var(--on-dark); text-underline-offset: 3px; }
.footer-bottom a[aria-current="page"] { color: var(--gold-light); }
/* Copyright on the left, the Privacy and Disclaimer links on the right; they
   stack on narrow screens. */
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 1.5rem; }
/* The 404 page carries only the bottom row, without the contact block above it. */
.site-footer-min { padding: 1rem 0; }
.site-footer-min .footer-bottom { border-top: 0; margin-top: 0; padding-top: 0; }

/* The consent line under every WhatsApp hand-off. Quiet on purpose: it informs,
   it does not compete with the button above it. */
.form-note { margin: 0; font-size: 0.85rem; font-weight: 400; line-height: 1.5; color: var(--muted); }
.form-note a { color: var(--accent); font-weight: 600; }
.site-footer .form-note { color: var(--on-dark-muted); }
.site-footer .form-note a { color: inherit; text-decoration: underline; }
/* Inside the flex rows of the ROI lead and the FAQ callout, the note takes a line of its own. */
.roi-lead .form-note, .faq-callout .form-note { flex-basis: 100%; }
.roi-lead p.form-note { font-weight: 400; }
.faq-callout p.form-note { font-size: 0.85rem; }

@media (max-width: 900px) {
  .hero-grid, .two-col, .footer-grid, .card-grid, .step-grid, .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { align-items: start; }
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .project-card, .project-card:nth-child(-n + 2) { grid-column: auto; }
  .project-card:nth-child(-n + 2) .project-visual { height: 240px; }
  /* Single-column cards make each half wide, which would crop the portrait
     shots to a thin band — give the split visual more height to compensate. */
  .project-visual-split, .project-card:nth-child(-n + 2) .project-visual-split { height: 320px; }
  .film-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two stat tiles per row on tablets and phones (house mobile pattern). */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.25rem; }
  .stat-grid div:nth-child(3) { border-left: 0; padding-left: 0; }
  .cta-box { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) {
  :root { --anchor-offset: 118px; }
  /* Three-quarter width is a desktop framing device; on a phone it just makes
     the clip too small to read. */
  .film { width: 100%; }

  /* A lean phone header: ~36px strip, ~68px bar. */
  .strip { gap: 12px; }
  .strip .meta { gap: 16px; }
  .bar { padding: 8px 16px; gap: 12px; }
  .cta { display: none; }
  .lockup { gap: 10px; }
  .lockup .mark { width: 48px; height: 44px; }
  .lockup .rule { height: 38px; }
  .brand-title { font-size: 17px; }
  .brand-subtitle { font-size: 9.5px; letter-spacing: 0.24em; }
  .brand-bn { font-size: 13px; } /* 13px floor for Bangla text (bangla-i18n §3) */
}

@media (max-width: 560px) {
  .film-steps { grid-template-columns: minmax(0, 1fr); }
  .stat-grid strong { font-size: 1rem; }
  .stat-grid span { font-size: 0.85rem; }
  .stat-grid div { padding-left: 0.9rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .contact-form .btn { justify-self: stretch; }
  .section p > .btn + .btn { margin-left: 0; }
  .hero-path-list li { font-size: 1rem; }
}

/* Excellent with animation off: no reveal fades, no hover drift. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .whatsapp-float, .back-to-top, .btn, .card, .project-card { transition: none; }
  .whatsapp-float:hover, .whatsapp-float:focus-visible { transform: none; }
}

/* ---------- shared tool-page furniture ---------- */
.breadcrumb { font-size: 0.82rem; color: var(--muted); margin-bottom: 1.4rem; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.field { display: grid; gap: 0.4rem; font-size: 0.92rem; font-weight: 600; }
.field input, .field select {
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.7rem 0.85rem;
  min-height: 44px;
  font-size: 1rem;
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.field input:hover, .field select:hover { border-color: rgba(43, 29, 24, 0.3); }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
.field-help { font-weight: 400; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }

/* ---------- floor plan viewer ---------- */
.plans-page h1 { font-family: 'Roboto Slab', serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 1rem; }
.plans-lede { color: var(--muted); max-width: 62ch; margin-bottom: 1.8rem; }
/* Loud on purpose. Invented availability that reads as real is the one failure
   this page cannot recover from. */
.sample-banner {
  border-left: 3px solid var(--gold-deep);
  background: var(--sand);
  border-radius: 0 0.8rem 0.8rem 0;
  padding: 1rem 1.3rem;
  margin: 0 0 2rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.filter-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 0.9rem;
  align-items: end;
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 1.2rem;
}
.filter-count { margin: 0.9rem 0 1.4rem; font-size: 0.88rem; color: var(--muted); }

.plans-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.8rem; align-items: start; }
.plate-frame { position: relative; background: var(--surface); border: var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 1.2rem; }
.plate-svg { width: 100%; height: auto; display: block; }
.plate-slab { fill: var(--bg); stroke: var(--border); stroke-width: 2; }
.plate-corridor, .plate-core { fill: var(--sand); stroke: var(--border); stroke-width: 1.5; }
.plate-core-label { fill: var(--muted); font-size: 13px; font-weight: 700; text-anchor: middle; letter-spacing: 0.1em; }
.plate-north line, .plate-north polygon { stroke: var(--muted); fill: var(--muted); stroke-width: 2; }
.plate-north text { fill: var(--muted); font-size: 16px; font-weight: 700; text-anchor: middle; }

.unit-hotspot { cursor: pointer; }
.unit-hotspot rect, .unit-hotspot polygon { stroke-width: 2.5; transition: fill 160ms ease, stroke 160ms ease; }
.unit-hotspot .unit-id { font-family: 'Roboto Slab', serif; font-size: 26px; font-weight: 700; text-anchor: middle; fill: var(--ink); }
.unit-hotspot .unit-sub { font-size: 17px; text-anchor: middle; fill: var(--muted); }
/* Status is carried by the fill AND by the word in the key, the card and the
   dialog badge, so it is never colour alone. */
.status-available rect, .status-available polygon { fill: #dff0e2; stroke: #2e7d4f; }
.status-booked rect, .status-booked polygon { fill: #fdefd6; stroke: #b07a17; }
.status-sold rect, .status-sold polygon { fill: #f0e3e0; stroke: #9c2e1a; }
.unit-hotspot:hover rect, .unit-hotspot:hover polygon { fill: #e8c98a; }
.unit-hotspot:focus-visible { outline: none; }
.unit-hotspot:focus-visible rect, .unit-hotspot:focus-visible polygon { stroke: var(--accent); stroke-width: 5; }
.unit-hotspot.is-filtered-out { cursor: default; opacity: 0.28; }

.plate-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.45;
  padding: 0.5rem 0.7rem;
  border-radius: 0.5rem;
  max-width: 15rem;
}
.plate-key { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 0; padding: 0; font-size: 0.82rem; color: var(--muted); }
.plate-key li { display: flex; align-items: center; gap: 0.4rem; }
.key-swatch { width: 0.9rem; height: 0.9rem; border-radius: 0.2rem; border: 2px solid; display: inline-block; }
.key-swatch.status-available { background: #dff0e2; border-color: #2e7d4f; }
.key-swatch.status-booked { background: #fdefd6; border-color: #b07a17; }
.key-swatch.status-sold { background: #f0e3e0; border-color: #9c2e1a; }

.unit-list-panel h2 { font-family: 'Roboto Slab', serif; font-size: 1.1rem; margin: 0 0 0.9rem; }
.unit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; max-height: 34rem; overflow-y: auto; }
.unit-card {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.8rem;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 5px solid var(--border);
  border-radius: 0.7rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
}
.unit-card:hover { border-color: var(--accent-light); }
.unit-card.status-available { border-left-color: #2e7d4f; }
.unit-card.status-booked { border-left-color: #b07a17; }
.unit-card.status-sold { border-left-color: #9c2e1a; }
.unit-card-id { font-family: 'Roboto Slab', serif; font-weight: 700; font-size: 1.05rem; }
.unit-card-status { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); align-self: center; justify-self: start; }
.unit-card-spec, .unit-card-size { grid-column: 1 / -1; font-size: 0.83rem; color: var(--muted); }
.unit-empty { color: var(--muted); font-size: 0.9rem; padding: 1rem; }

.unit-dialog { border: 0; border-radius: 1rem; padding: 0; max-width: 32rem; width: calc(100% - 2rem); background: var(--surface); color: var(--ink); }
.unit-dialog::backdrop { background: rgba(43, 29, 24, 0.55); }
.unit-dialog-close { position: absolute; top: 0.6rem; right: 0.8rem; background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); }
.unit-dialog-body { padding: 1.6rem; }
.unit-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.unit-dialog-head h2 { margin: 0; font-family: 'Roboto Slab', serif; font-size: 1.6rem; }
.unit-dialog-eyebrow { margin: 0 0 0.2rem; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.unit-badge { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 0.3rem 0.6rem; border-radius: 999px; border: 2px solid; white-space: nowrap; }
.unit-badge.status-available { background: #dff0e2; border-color: #2e7d4f; color: #1f5c39; }
.unit-badge.status-booked { background: #fdefd6; border-color: #b07a17; color: #7d5610; }
.unit-badge.status-sold { background: #f0e3e0; border-color: #9c2e1a; color: #7d2415; }
.unit-plan { border: 1px dashed var(--border); border-radius: 0.7rem; padding: 1rem; margin-bottom: 1.1rem; background: var(--bg); }
.unit-plan img { width: 100%; height: auto; }
.unit-plan-missing { margin: 0; font-size: 0.87rem; color: var(--muted); line-height: 1.55; }
.unit-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1rem; margin: 0 0 1.3rem; }
.unit-specs div { display: grid; gap: 0.1rem; }
.unit-specs dt { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.unit-specs dd { margin: 0; font-weight: 600; }
.unit-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.unit-actions .btn { flex: 1 1 12rem; text-align: center; }
.unit-foot { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--muted); }

.plans-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem; background: var(--sand); border-radius: 0.9rem; padding: 1.2rem 1.4rem; margin-top: 2rem; }
.plans-cta p { margin: 0; font-weight: 600; }

/* ---------- landowner ROI calculator ---------- */
/* Before an estimate: the explanation on the left, the form on the right, so
   neither half of the section stands empty. The estimate opens below them,
   results beside the caveats and the next step. */
.roi-page h1 { font-family: 'Roboto Slab', serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 1rem; }
.roi-lede { color: var(--muted); max-width: 62ch; margin: 0; }
.roi-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.roi-intro .section-head { margin-bottom: 1.25rem; }
.roi-form { display: grid; gap: 1.15rem; padding: clamp(1.4rem, 3vw, 2rem); }
.roi-form .btn { margin-top: 0.25rem; }
.roi-optional { justify-self: start; font-size: 0.8125rem; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin: -0.3rem 0 0.1rem; }
.roi-status { min-height: 1.2rem; margin: 0; font-size: 0.9rem; color: var(--muted); }
.roi-status.error { color: var(--accent); font-weight: 600; }

/* The panel carries the hidden attribute until there is an estimate; its own
   display rule would otherwise outrank the browser's and show an empty frame. */
.roi-panel[hidden] { display: none; }
.roi-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-areas: 'results caveat' 'results lead';
  grid-template-rows: auto 1fr;
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
.roi-results { grid-area: results; padding: clamp(1.4rem, 3vw, 2rem); }
.roi-results h2 { margin: 0 0 1.2rem; font-family: 'Roboto Slab', serif; font-size: 1.2rem; max-width: none; }
.roi-grid { margin: 0; display: grid; gap: 0.9rem; }
.roi-row { display: grid; gap: 0.15rem; padding-bottom: 0.9rem; border-bottom: var(--hairline); }
.roi-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.roi-row dt { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.roi-row dd { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--accent-dark); font-family: 'Roboto Slab', serif; font-variant-numeric: tabular-nums; }
.roi-note { display: block; font-size: 0.85rem; font-weight: 400; color: var(--muted); font-family: inherit; margin-top: 0.2rem; line-height: 1.5; }
.roi-ignored { margin: 1.2rem 0 0; padding-top: 1rem; border-top: var(--hairline); font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

/* The note style: a gold-deep rule on sand. Shared by the ROI caveat, the
   floor-plan sample banner and the checklist notice. */
.roi-caveat { grid-area: caveat; border-left: 3px solid var(--gold-deep); background: var(--sand); border-radius: 0 0.8rem 0.8rem 0; padding: 1.2rem 1.4rem; }
.roi-caveat h2, .roi-caveat h3 { margin: 0 0 0.6rem; font-size: 1rem; font-family: 'Roboto Slab', serif; color: var(--ink); max-width: none; }
.roi-caveat ul { margin: 0; padding-left: 1.1rem; }
.roi-caveat li { font-size: 0.88rem; color: var(--ink); line-height: 1.6; margin-bottom: 0.6rem; }
.roi-caveat li:last-child { margin-bottom: 0; }
.roi-caveat a { color: var(--accent); font-weight: 600; }
.roi-lead { grid-area: lead; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem; background: var(--surface); border: var(--hairline); border-radius: var(--radius-card); padding: 1.2rem 1.4rem; }
.roi-lead p { margin: 0; font-weight: 600; color: var(--ink); }
/* On the sand band the caveat takes the cream page colour to stay a distinct panel. */
.roi-home .roi-caveat { background: var(--bg); }

.roi-how { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: var(--hairline); max-width: 62ch; }
.roi-how h2 { font-family: 'Roboto Slab', serif; font-size: 1.1rem; margin: 0 0 0.7rem; }
.roi-how p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; }
.roi-table { border-collapse: collapse; width: 100%; margin: 1.2rem 0 0.8rem; font-size: 0.9rem; font-variant-numeric: tabular-nums; background: var(--surface); }
.roi-table caption { text-align: left; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding-bottom: 0.5rem; }
.roi-table th, .roi-table td { border: 1px solid var(--border); padding: 0.55rem 0.8rem; text-align: left; }
.roi-table thead th { background: var(--sand); }
.roi-table-note { font-size: 0.83rem; }

/* The same calculator embedded as a homepage section, on the sand band. The
   standalone page keeps the methodology and the FAR table; the homepage only
   links to them. */
.roi-home { background: var(--sand); }
.roi-home-more { margin: 1.25rem 0 0; font-size: 0.92rem; font-weight: 600; }
.roi-home-more a { color: var(--accent); text-underline-offset: 3px; display: inline-block; padding: 0.6rem 0; }

@media (max-width: 900px) {
  .plans-layout, .roi-layout { grid-template-columns: minmax(0, 1fr); }
  .roi-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'results' 'caveat' 'lead'; grid-template-rows: none; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .unit-list { max-height: none; }
}
@media (max-width: 560px) {
  .filter-bar { grid-template-columns: 1fr; }
  .unit-specs { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .unit-hotspot rect, .unit-hotspot polygon { transition: none; }
}

/* ---------- FAQ ---------- */
.faq-page h1 { font-family: 'Roboto Slab', serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 1rem; }
.faq-lede { color: var(--muted); max-width: 62ch; margin-bottom: 2rem; }

/* Controls that cannot work without script are not shown without script — the
   answers below stay readable and expandable either way. */
.faq-controls { display: none; }
.js .faq-controls { display: grid; gap: 1rem; margin-bottom: 1.4rem; }
.faq-search-field { max-width: 26rem; }
.faq-search-label { font-size: 0.92rem; font-weight: 600; }
.faq-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.faq-tab {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.faq-tab:hover { border-color: var(--accent-light); color: var(--accent); }
.faq-tab[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.faq-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-count { margin: 0 0 1.2rem; font-size: 0.85rem; color: var(--muted); }

.faq-list { display: grid; gap: 0.7rem; max-width: 74ch; }
.faq-item {
  background: var(--surface);
  border: var(--hairline);
  border-radius: var(--radius-card);
  padding: 0 1.4rem;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.faq-item:hover { border-color: rgba(156, 46, 26, 0.32); }
.faq-item[open] { border-color: rgba(156, 46, 26, 0.32); box-shadow: var(--shadow-soft); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  font-family: 'Roboto Slab', serif;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.5;
  padding: 1.1rem 2rem 1.1rem 0;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0.4rem; }
/* Chevron drawn from a rotated square, so it inherits colour and needs no asset. */
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 0.35rem;
  top: 1.5rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 200ms ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); top: 1.7rem; }
.faq-answer { padding-bottom: 1.1rem; }
.faq-answer p { margin: 0 0 0.8rem; color: var(--muted); line-height: 1.75; font-size: 0.95rem; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-related a { color: var(--accent); font-weight: 600; }
.faq-empty { color: var(--muted); font-size: 0.92rem; padding: 1.2rem 0; }

/* Opening animates everywhere; the closing height transition only where the
   browser can interpolate to a keyword height. Neither is load-bearing. */
.faq-item[open] .faq-answer { animation: faq-open 220ms ease; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    height: 0;
    overflow: hidden;
    transition: height 260ms ease, content-visibility 260ms allow-discrete;
  }
  .faq-item[open]::details-content { height: auto; }
}

.faq-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--sand);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.75rem;
  margin-top: 2.5rem;
  max-width: 74ch;
}
.faq-callout h2 { margin: 0 0 0.25rem; font-family: 'Roboto Slab', serif; font-size: 1.2rem; letter-spacing: 0; }
.faq-callout p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.faq-callout-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-answer { animation: none; }
  .faq-item summary::after { transition: none; }
  .faq-item::details-content { transition: none; }
}

/* ---------- Privacy notice and disclaimer ---------- */
.legal-page h1 { font-family: 'Roboto Slab', serif; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 1rem; }
.legal-body { max-width: 74ch; }
.legal-meta { font-size: 0.85rem; color: var(--muted); margin: 0 0 2rem; }
.legal-page h2 { font-family: 'Roboto Slab', serif; font-size: 1.35rem; line-height: 1.3; letter-spacing: -0.005em; margin: 2.4rem 0 0.6rem; }
.legal-page h3 { font-size: 1.05rem; margin: 1.4rem 0 0.4rem; }
.legal-body li { color: var(--muted); margin-bottom: 0.35rem; }
.legal-body a { color: var(--accent); }
.legal-table-wrap { overflow-x: auto; }
.legal-table { border-collapse: collapse; width: 100%; font-size: 0.88rem; margin: 0.6rem 0 1rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--border); color: var(--muted); }
.legal-table th { color: var(--ink); font-weight: 600; background: var(--sand); }

/* ---------- Glossary (English + Bangla) ---------- */
.glossary-page [lang="bn"] { font-family: var(--font-bengali); }
.glossary-h1-bn { display: block; font-size: 0.62em; font-weight: 600; color: var(--accent); line-height: 1.5; margin-top: 0.4rem; }
.glossary-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.glossary-toc a {
  display: inline-flex; gap: 0.45rem; align-items: baseline;
  min-height: 44px; padding: 0.6rem 1rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--ink); text-decoration: none; font-size: 0.88rem;
}
.glossary-toc a:hover, .glossary-toc a:focus-visible { border-color: var(--accent); color: var(--accent); }
.glossary-toc a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.glossary-toc [lang="bn"] { color: var(--muted); }
.glossary-group, .glossary-term { scroll-margin-top: var(--anchor-offset); }
.glossary-group h2 { display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }
.glossary-group h2 [lang="bn"] { color: var(--muted); font-weight: 500; line-height: 1.5; }
.glossary-list { margin: 0 0 1rem; }
.glossary-term {
  display: grid; gap: 0.35rem 2rem; padding: 1.1rem 0; border-top: 1px solid var(--border);
}
.glossary-term:target { background: var(--sand); box-shadow: -0.75rem 0 0 var(--sand), 0.75rem 0 0 var(--sand); }
.glossary-term dt { font-weight: 600; color: var(--ink); line-height: 1.5; }
.glossary-bn { color: var(--accent); font-weight: 500; margin-left: 0.35rem; }
.glossary-term dd { margin: 0; color: var(--muted); }
.glossary-term dd[lang="bn"] { line-height: 1.8; }
/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.glossary-source { font-size: 0.82rem; }
.glossary-source a { color: var(--accent); }
.glossary-page .faq-callout { margin-top: 2.5rem; }
.glossary-page .faq-callout p[lang="bn"] { margin-top: 0.5rem; }
@media (min-width: 900px) {
  .glossary-term { grid-template-columns: 1fr 1fr; }
  .glossary-term dt, .glossary-source { grid-column: 1 / -1; }
}


/* ---------- Checklists (Bangla first) — reuses the glossary groups ---------- */
.checklist-h1-en { display: block; font-size: 0.55em; font-weight: 600; color: var(--muted); line-height: 1.4; margin-top: 0.5rem; }
.checklist-page h1 [lang="bn"] { line-height: 1.5; }
.checklist-notice {
  border-left: 3px solid var(--gold-deep); background: var(--sand); border-radius: 0 0.8rem 0.8rem 0;
  padding: 1rem 1.2rem; margin: 0 0 1.5rem;
}
.checklist-notice p { margin: 0 0 0.5rem; color: var(--ink); }
.checklist-notice p[lang="bn"] { line-height: 1.8; }
.checklist-notice .legal-meta { margin: 0.6rem 0 0; }
.checklist-intro p { color: var(--muted); margin: 0 0 0.4rem; }
.checklist-intro p[lang="bn"] { line-height: 1.8; }
.checklist-intro { margin-bottom: 1rem; }
.checklist { list-style: none; counter-reset: check; margin: 0 0 1rem; padding: 0; }
.checklist-item {
  counter-increment: check; position: relative; padding: 1rem 0 1rem 2.6rem;
  border-top: 1px solid var(--border); scroll-margin-top: var(--anchor-offset);
}
.checklist-item::before {
  content: counter(check); position: absolute; left: 0; top: 1.05rem;
  width: 1.8rem; height: 1.8rem; border: 1px solid rgba(156, 46, 26, 0.55); border-radius: 0.4rem;
  display: grid; place-items: center; font-size: 0.85rem; font-weight: 600; color: var(--accent);
}
.checklist-item p { margin: 0 0 0.35rem; }
.checklist-item p[lang="bn"] { color: var(--ink); line-height: 1.8; }
.checklist-item p:not([lang]) { color: var(--muted); }
.checklist-note { font-size: 0.9rem; }
.checklist-item:target { background: var(--sand); box-shadow: -0.75rem 0 0 var(--sand), 0.75rem 0 0 var(--sand); }
@media print {
  .checklist-item::before { content: ''; }
  .checklist-item { break-inside: avoid; }
}

/* ---------- Site-wide, keep LAST ---------- */
/* Smooth anchor scrolling only for visitors who have not asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .footer-enquiry { justify-self: start; justify-items: start; }
  .enquiry-status { text-align: left; }
}

/* ---------- Modal (global skill ui-modal, mapped to BHL tokens) ---------- */
.modal {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: var(--hairline);
  border-radius: 1.25rem;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(43, 29, 24, 0.55);
}
.modal::backdrop { background: rgba(43, 29, 24, 0.62); backdrop-filter: blur(2px); }
.modal[open] { animation: modal-in 260ms var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal__box {
  max-height: calc(100dvh - 26px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.modal__head .eyebrow { margin-bottom: 0.4rem; }
.modal__head h2 { margin: 0; font-family: 'Roboto Slab', serif; font-size: clamp(1.25rem, 2.6vw, 1.5rem); line-height: 1.25; letter-spacing: -0.01em; }
.modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -0.4rem -0.5rem 0 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.modal__close:hover { background: var(--sand); }
.modal__close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* The modal locks the page behind it. */
html.modal-open { overflow: hidden; }

/* The form on the light modal surface (the footer styles were for the dark band). */
.modal .contact-form { gap: 1rem; }
.modal .contact-form label,
.modal .contact-form .field { display: grid; gap: 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.modal .contact-form input,
.modal .contact-form textarea {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
}
.modal .contact-form input:hover,
.modal .contact-form textarea:hover { border-color: rgba(43, 29, 24, 0.35); }
.modal .contact-form input:focus-visible,
.modal .contact-form textarea:focus-visible { background: var(--surface); outline: 2px solid var(--accent); outline-offset: 1px; }
.modal .contact-form input::placeholder,
.modal .contact-form textarea::placeholder { color: rgba(107, 90, 81, 0.75); }
.modal .contact-form .btn { justify-self: stretch; }
.modal .form-note { color: var(--muted); }
.modal .form-note a { color: var(--accent); }
.modal .form-status { color: var(--accent); }
.modal .form-status.error { color: var(--accent-dark); font-weight: 600; }

/* ---------- House dropdown (global skill ui-search-select, mapped to BHL tokens) ---------- */
.ss { position: relative; }
.ss__native { position: absolute; width: 1px; min-height: 0; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.ss__trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-width: 0; min-height: 48px; padding: 0 0.9rem;
  border: 1px solid var(--border); border-radius: 0.7rem; background: var(--bg); color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 400; text-align: left; cursor: pointer;
}
.ss__trigger:hover { border-color: rgba(43, 29, 24, 0.35); }
.ss__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--surface); }
.ss__value { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss__chev { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 150ms var(--ease); }
.ss__trigger[aria-expanded="true"] .ss__chev { transform: rotate(180deg); }
.ss__panel {
  position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; border-radius: 0.8rem;
  border: var(--hairline); background: var(--surface); box-shadow: var(--shadow-lift);
}
.ss__search { width: 100%; min-height: 44px; margin-bottom: 6px; padding: 0 12px; border-radius: 0.5rem; border: 1px solid var(--border); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; }
.ss__search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ss__list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.ss__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 0.5rem; color: var(--ink); font-size: 0.98rem; font-weight: 400; cursor: pointer; }
.ss__opt.is-active { background: var(--sand); }
.ss__opt[aria-selected="true"] { font-weight: 600; }
.ss__tick { color: var(--accent); }
.ss__empty { padding: 12px; color: var(--muted); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) {
  .ss__chev { transition: none; }
  .modal[open] { animation: none; }
}

/* Bangla is never tracked or upper-cased, whatever class it sits in: tracking breaks the
   matra joins (bangla-i18n §3). Last in the file so it outranks .eyebrow, .site-nav a, ... */
/* `hidden` always hides, whatever display a component sets (script.js relies on it). */
[hidden] { display: none !important; }
:lang(bn) { letter-spacing: 0 !important; text-transform: none !important; }