/* 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;
  /* Flat counterpart to the hero's gold wash, for the full-width dark bands.
     Deliberately its own token, not --accent-dark: that one still has to stay
     brick for the badges, the brand wordmark and the primary-button hover. */
  --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;
}

* { 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;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
.bengali-tagline {
  font-family: var(--font-bengali);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0.8rem 0;
  letter-spacing: 0.5px;
}
.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: 600ms ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Header Ribbon Styles ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(43, 29, 24, 0.06);
}

.strip {
  position: relative; /* anchors .install-hint */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 7px 34px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}

/* ---------- Install (PWA) ---------- */
.install-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 250ms, color 250ms;
}

.install-btn:hover,
.install-btn:focus-visible {
  background: 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: 34px;
  top: calc(100% + 6px);
  z-index: 60;
  margin: 0;
  max-width: 260px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  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); }

.strip .bn {
  height: 19px;
  width: auto;
  opacity: 0.9;
}

.strip .meta {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 300;
}

.strip .meta a {
  color: inherit;
  text-decoration: none;
  transition: color 250ms ease;
}

.strip .meta a:hover {
  color: var(--accent);
}

.dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brick);
  display: inline-block;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 14px 34px;
  background: var(--surface);
}

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

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

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

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

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  gap: 0;
}

/* BHABON and BUILDERS LTD. share one line, aligned on their baseline. */
.brand-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  white-space: nowrap;
}

/* Both halves of the wordmark share one size. It is fluid because at the full
   30px the lockup + nav + CTA need ~1280px of bar to sit on one line. */
.brand-title,
.brand-subtitle {
  font-family: 'Roboto Slab', serif;
  font-size: clamp(21px, 2.1vw, 30px);
  margin: 0;
}

.brand-title {
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: 0.14em;
}

.brand-subtitle {
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.16em;
}

.brand-bn {
  font-family: var(--font-bengali);
  font-size: clamp(14px, 1.5vw, 21px);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin: 3px 0 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  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: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 6px 0;
  position: relative;
}

.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--brick);
  transition: right 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  right: 0;
}

.cta {
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 11px 20px;
  white-space: nowrap;
  transition: background 250ms, border-color 250ms, color 250ms;
  border-radius: 3px;
}

.cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* A fifth nav item (FAQ) pushes the Book consultation button off the bar at
   laptop widths. Tighten the lockup and the link spacing before anything has to
   drop out of the header. */
@media (max-width: 1340px) {
  .bar { gap: 18px; padding: 12px 20px; }
  .site-nav { gap: 18px; }
  .site-nav a { font-size: 11.5px; letter-spacing: 0.1em; }
  .lockup { gap: 12px; }
  .lockup .mark { width: 96px; height: 88px; }
  .lockup .rule { height: 72px; }
  .cta { padding: 10px 14px; letter-spacing: 0.12em; }
}
/* Below this width the button no longer fits beside five links, so it is the
   button that goes rather than the navigation — Contact reaches the same place.
   (Under 760px the existing rules already hide it and collapse the nav into the
   hamburger menu.) */
@media (max-width: 1120px) {
  .cta { display: none; }
}

.menu-toggle { display: none; background: none; border: 0; padding: 0.4rem; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 4px 0; }

.hero {
  /* Antique gold rather than the flat brand gold: the overlay has to stay dark
     enough to hold white headline copy over a busy glass-tower photo. */
  background: linear-gradient(120deg, rgba(146, 100, 24, 0.78), rgba(72, 46, 8, 0.7)), url('https://images.unsplash.com/photo-1511818966892-d7d671e672a2?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 5.5rem 0 4rem;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr;
  gap: 2rem;
  align-items: center;
}
.eyebrow {
  font-family: 'Roboto Slab', serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.8rem;
}
/* On the gold hero both the brick eyebrow and the sand tint would sink into the
   overlay, so hero copy goes pale instead. */
.hero-copy .eyebrow { color: var(--bg); }
.hero h1, .section h2, .site-footer h2 {
  font-family: 'Roboto Slab', serif;
  line-height: 1.1;
  margin: 0 0 1rem;
  font-weight: 700;
}
.site-footer h2, .site-footer .bengali-tagline { color: #fff; }
.hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.5rem); }
/* The overlay is light enough to show the building photo, so the copy carries
   its own shadow to stay readable over the busier areas of the image. */
.hero-copy h1, .hero-copy p, .hero-copy .eyebrow, .hero-copy .bengali-tagline {
  text-shadow: 0 2px 10px rgba(38, 24, 4, 0.65);
}
.hero-copy p { color: #fff; max-width: 60ch; }
.hero-copy .bengali-tagline { color: #fffdf6; font-size: 1.15rem; margin: 0.9rem 0 1.2rem; }
.hero-actions { display: flex; gap: 0.9rem; margin-top: 1.5rem; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.8rem 1.2rem;
  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;
}
.btn-primary { background: var(--accent); color: white; transition: 250ms ease; }
.btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(156, 46, 26,0.25); }
.btn-secondary { background: transparent; color: white; border-color: rgba(255,255,255,0.3); }
.btn-secondary:hover { background: rgba(255,255,255,0.12); }
.hero-card {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border: 2px solid var(--accent-light);
  border-radius: 1.2rem;
  padding: 1.3rem;
  box-shadow: 0 8px 32px rgba(156, 46, 26,0.15);
}
.hero-card-top { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.pill {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--accent-light);
  color: white;
  font-weight: 600;
}
.hero-card ul { padding-left: 1rem; color: var(--ink); line-height: 1.8; }
.hero-card li + li { margin-top: 0.4rem; }
.hero-card li::marker { color: var(--accent); font-weight: 700; }

.stats-bar { background: var(--gold-band); color: white; padding: 1.2rem 0; border-top: 3px solid var(--gold-light); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat-grid div { border-left: 1px solid rgba(255,255,255,0.16); padding-left: 1rem; }
.stat-grid div:first-child { border-left: 0; padding-left: 0; }
.stat-grid strong { display: block; font-size: 1.1rem; }
.stat-grid span { color: #fff; font-size: 0.9rem; }

.section { padding: 5rem 0; scroll-margin-top: 185px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.section h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--ink); }
.section p { color: var(--muted); }
.about p strong { color: var(--accent); font-weight: 700; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.card, .step, .project-card { background: var(--surface); border: 2px solid var(--accent-light); border-radius: 1rem; padding: 1.3rem; box-shadow: 0 4px 12px rgba(156, 46, 26,0.08); transition: 250ms ease; }
.card:hover, .step:hover, .project-card:hover { border-color: var(--accent); box-shadow: 0 8px 20px rgba(156, 46, 26,0.15); transform: translateY(-2px); }
.card h3, .step h3, .project-body h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.card p, .step p, .project-body p { margin: 0; }

.step-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.step span { display: inline-block; color: var(--accent); font-weight: 700; margin-bottom: 0.6rem; }

/* ---------- Build film ---------- */
/* Blends the warm page background into the cooler projects section below. */
.build-film { background: linear-gradient(180deg, var(--bg) 0%, var(--sand) 100%); }

/* 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: 1.5rem auto 0; width: 75%; }
.film-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--accent-light);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 10px 28px rgba(43, 29, 24, 0.16);
}
.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;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 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.35);
  /* 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(--accent); 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; }

/* No max-width: the 70ch cap was set when the figure ran the full width of the
   wrap. Now that the figure is 75%, the figure itself is the measure, and a cap
   only left the caption ragged and short of the video's right edge. */
.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.6rem 1.4rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}
.film-steps li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-top: 0.7rem;
  border-top: 2px solid var(--border);
  color: var(--ink);
  font-size: 0.95rem;
}
.film-steps span { color: var(--gold); font-weight: 700; }

.projects { background: var(--sand); }
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.project-card { padding: 0; overflow: hidden; }
.project-visual { height: 210px; background-size: cover; background-position: center; position: relative; margin-bottom: 0; }
.project-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43, 29, 24, 0.05), rgba(43, 29, 24, 0.32)); }
/* 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%; }
.project-status {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--accent-dark);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
}
/* Both badges are warm now that the palette is brick, so they are separated by
   value rather than hue: settled deep brick for done, ochre for still running. */
.project-status.ongoing { background: var(--gold-deep); }
.visual-one { background-image: url('https://images.unsplash.com/photo-1512918728675-ed5a9ecdebfd?auto=format&fit=crop&w=1200&q=80'); }
.visual-two { background-image: url('https://images.unsplash.com/photo-1460317442991-0ec209397118?auto=format&fit=crop&w=1200&q=80'); }
.visual-three { background-image: url('https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?auto=format&fit=crop&w=1200&q=80'); }
.project-body { padding: 1.15rem 1.1rem 1.25rem; }
.project-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: white; background: var(--accent); padding: 0.4rem 0.8rem; border-radius: 999px; margin-bottom: 0.55rem; }
.project-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.8rem; }
.project-meta span { background: var(--bg); color: var(--muted); font-size: 0.78rem; padding: 0.3rem 0.6rem; border-radius: 999px; }
.trust-section { background: linear-gradient(135deg, #f6f0e5, #f0e2d2); border-top: 3px solid var(--accent); border-bottom: 3px solid var(--accent); }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.trust-list { display: grid; gap: 0.9rem; }
.trust-item { background: white; border: 2px solid var(--accent-light); border-radius: 1rem; padding: 1rem 1.1rem; transition: 250ms ease; }
.trust-item:hover { border-color: var(--accent); background: rgba(156, 46, 26,0.03); }
.trust-item strong { display: block; margin-bottom: 0.3rem; color: var(--accent); }
.trust-item span { color: var(--muted); font-size: 0.95rem; }

.cta-section { padding: 0 0 5rem; }
.cta-box {
  background: linear-gradient(100deg, var(--accent), #6d1c13);
  border: none;
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: white;
  box-shadow: 0 12px 32px rgba(156, 46, 26,0.25);
}
/* This button was brick on the brick panel — 1.5:1 against its own background,
   so the pill shape was invisible. Green is the one hue left on the page that is
   neither brick nor gold, and it matches the WhatsApp button visitors already
   recognise. The label is dark on purpose: white on #25d366 is 2:1, which is why
   WhatsApp's own buttons are so hard to read. Dark ink on it is 8.2:1. */
.cta-box .btn-primary { background: #25d366; color: var(--ink); }
.cta-box .btn-primary:hover { background: #1cc25e; color: var(--ink); }
.cta-box h2 { margin: 0; font-size: clamp(1.3rem, 2.3vw, 1.8rem); color: white; }
.cta-box .eyebrow { color: rgba(255, 255, 255, 0.85); }

.site-footer { background: var(--gold-band); color: #fff; padding: 4rem 0 2rem; border-top: 4px solid var(--gold-light); }
/* 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.9rem;
  padding: 0.9rem 1.3rem;
  margin-bottom: 1.5rem;
  line-height: 0;
}
.footer-logo img { display: block; height: 104px; width: auto; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.contact-list li + li { margin-top: 0.6rem; }
/* 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: 1.3rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.88); line-height: 1.6; }
.footer-note a { font-weight: 600; }
.contact-form { display: grid; gap: 0.8rem; }
.contact-form label { display: grid; gap: 0.35rem; font-size: 0.92rem; }
.contact-form input, .contact-form select, .contact-form textarea {
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  color: white;
  border-radius: 0.7rem;
  padding: 0.75rem 0.9rem;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255,255,255,0.65); }
/* The select inherits white 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; }
/* A brick button on the gold band sits at 1.2:1 against it — the label stays
   readable but the button shape disappears. The footer's primary action inverts
   instead: light plate, brick label. */
.site-footer .btn-primary { background: var(--bg); color: var(--accent); }
.site-footer .btn-primary:hover { background: #fff; color: var(--accent-dark); }
.form-status { min-height: 1.2rem; margin: 0; font-size: 0.95rem; color: #f5d8a6; }
.form-status.error { color: #ffb3b3; }
.whatsapp-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.45);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.whatsapp-float svg { width: 30px; height: 30px; display: block; }
.whatsapp-float:hover,
.whatsapp-float:focus-visible { transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 28px rgba(37, 211, 102, 0.55); }

.back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 5.4rem;
  z-index: 80;
  border: 0;
  background: var(--accent);
  color: white;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(43, 29, 24, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: 250ms ease;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav a.active { color: var(--accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2rem; padding-top: 1rem; color: #fff; }

@media (max-width: 900px) {
  .hero-grid, .two-col, .footer-grid, .project-grid, .card-grid, .step-grid, .trust-grid { grid-template-columns: 1fr; }
  /* 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 { height: 320px; }
  .film-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .cta-box { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 760px) {
  .menu-toggle { display: inline-block; }
  .site-nav { display: none; }
  .site-nav.is-open { display: flex; position: absolute; top: 100%; right: 1rem; flex-direction: column; background: var(--surface); padding: 1rem; border: 1px solid var(--border); border-radius: 0.8rem; box-shadow: 0 12px 24px rgba(43,29,24,0.12); }
  .hero { padding-top: 3.5rem; }
  .section { padding: 4rem 0; scroll-margin-top: 120px; }
  .cta-section { padding-bottom: 4rem; }
  /* Three-quarter width is a desktop framing device; on a phone it just makes
     the clip too small to read. */
  .film { width: 100%; }

  /* The full-size lockup plus the CTA overflow a phone-width bar, so the header
     tightens up and drops the CTA — the nav and the WhatsApp button cover it. */
  .strip { padding: 6px 16px; gap: 12px; }
  .strip .meta { gap: 14px; }
  .bar { padding: 10px 16px; gap: 12px; }
  .cta { display: none; }
  .lockup { gap: 12px; }
  .lockup .mark { width: 67px; height: 61px; }
  .lockup .rule { height: 46px; }
  .brand-title, .brand-subtitle { font-size: 16px; letter-spacing: 0.1em; }
  .brand-bn { font-size: 12px; }
}

@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; }
  .film-steps { grid-template-columns: 1fr; }
  /* One line no longer fits beside the mark at phone widths — stack it back,
     and restore the size hierarchy now that width is no longer the constraint. */
  .brand-line { flex-direction: column; align-items: flex-start; gap: 0; white-space: normal; }
  .brand-title { font-size: 19px; }
  .brand-subtitle { font-size: 10px; letter-spacing: 0.22em; }
  .brand-bn { font-size: 10px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
}

/* ---------- 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;
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-help { font-weight: 400; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }
.btn-ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent-light); }
.btn-ghost:hover { background: var(--sand); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------- floor plan viewer ---------- */
.plans-page h1 { font-family: 'Roboto Slab', serif; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; 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: 4px 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: 2px solid var(--accent-light);
  border-radius: 1rem;
  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: 2px solid var(--gold); border-radius: 1rem; 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 ---------- */
.roi-page h1 { font-family: 'Roboto Slab', serif; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; margin: 0 0 1rem; }
.roi-lede { color: var(--muted); max-width: 62ch; margin-bottom: 2rem; }
.roi-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem; align-items: start; }
.roi-layout:has(.roi-panel[hidden]) { grid-template-columns: minmax(0, 540px); }
.roi-form { display: grid; gap: 1.1rem; background: var(--surface); border: 2px solid var(--accent-light); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 4px 12px rgba(156, 46, 26, 0.08); }
.roi-optional { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--muted); margin-left: 0.4rem; }
.roi-status { min-height: 1.2rem; margin: 0; font-size: 0.9rem; color: var(--muted); }
.roi-status.error { color: var(--accent); font-weight: 600; }

.roi-panel { display: grid; gap: 1rem; }
.roi-results { background: var(--surface); border: 2px solid var(--gold); border-radius: 1rem; padding: 1.5rem; }
.roi-results h2 { margin: 0 0 1.2rem; font-family: 'Roboto Slab', serif; font-size: 1.15rem; }
.roi-grid { margin: 0; display: grid; gap: 0.9rem; }
.roi-row { display: grid; gap: 0.15rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
.roi-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.roi-row dt { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.roi-row dd { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--accent-dark); font-family: 'Roboto Slab', serif; }
.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: 1px solid var(--border); font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

.roi-caveat { border-left: 4px solid var(--gold-deep); background: var(--sand); border-radius: 0 0.8rem 0.8rem 0; padding: 1.2rem 1.4rem; }
.roi-caveat h2 { margin: 0 0 0.6rem; font-size: 1rem; font-family: 'Roboto Slab', serif; }
.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 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem; background: var(--sand); border-radius: 0.9rem; padding: 1.1rem 1.3rem; }
.roi-lead p { margin: 0; font-weight: 600; }

.roi-how { margin-top: 2.5rem; 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; }
.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; }

@media (max-width: 900px) {
  .plans-layout, .roi-layout { grid-template-columns: 1fr; }
  .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(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; 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;
  padding: 0.5rem 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(--accent); border-color: var(--accent); 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: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: 0.8rem;
  padding: 0 1.3rem;
}
.faq-item[open] { border-left-color: var(--accent); }
.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: 0.9rem;
  padding: 1.4rem 1.6rem;
  margin-top: 2.4rem;
  max-width: 74ch;
}
.faq-callout h2 { margin: 0 0 0.25rem; font-family: 'Roboto Slab', serif; font-size: 1.15rem; }
.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; }
}