/* ==========================================================================
   BHL — Bepary Holdings Ltd. website
   Logo navy (#2E3192), midnight, pearl ivory and a champagne-gold accent.
   ========================================================================== */

:root {
  --navy: #2e3192;          /* logo navy */
  --navy-deep: #10123d;     /* midnight */
  --navy-ink: #090b24;
  --red: #ec2227;           /* logo red — used only in the logo */
  --gold: #b8955c;          /* champagne gold */
  --gold-soft: #e4cf9f;
  --gold-deep: #9a7840;
  --gold-grad: linear-gradient(115deg, #9a7840 0%, #c9a86c 28%, #f1e2bd 50%, #c9a86c 72%, #9a7840 100%);
  --ivory: #f7f4ed;         /* pearl */
  --paper: #fffdf9;
  --sand: #efe8da;          /* champagne sand */
  --ink: #17192f;
  --heading: #0c0e2b;
  --header-bg: rgba(255, 253, 249, 0.9);
  --chip: #fffdf9;
  --muted: #676779;
  --line: rgba(23, 25, 47, 0.11);
  --line-light: rgba(255, 255, 255, 0.16);

  --serif: "Cormorant Garamond", "Tiro Bangla", Georgia, serif;
  --sans: "Manrope", "Anek Bangla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(11, 13, 46, 0.04), 0 12px 32px -12px rgba(11, 13, 46, 0.18);
  --shadow-lg: 0 30px 60px -24px rgba(11, 13, 46, 0.35);

  --header-h: 72px;
  --tabbar-h: 0px;
  --wrap: 1200px;
  --gutter: 20px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html[lang="bn"] {
  /* English letters (project names, numbers) keep the luxurious Cormorant / Manrope even on Bangla pages;
     Bangla letters fall through to Tiro Bangla (headings) and Anek Bangla (text) */
  --serif: "Cormorant Garamond", "Tiro Bangla", Georgia, serif;
  --sans: "Manrope", "Anek Bangla", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: var(--tabbar-h);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3 { line-height: 1.35; letter-spacing: 0; }

p { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

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

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

/* ---------- Icons ---------- */
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ico-fill { fill: currentColor; stroke: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; letter-spacing: 0.01em;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.25s var(--ease), background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.btn:active { transform: scale(0.98); }
.btn .ico { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn:hover .ico-arrow { transform: translateX(3px); }

.btn-gold { background: var(--gold); color: #fff; box-shadow: 0 10px 24px -10px rgba(176, 144, 90, 0.8); }
.btn-gold:hover { background: #a2824d; }
.btn-navy { background: var(--navy); color: #fff; box-shadow: 0 10px 24px -12px rgba(46, 49, 146, 0.7); }
.btn-navy:hover { background: var(--navy-deep); }
.btn-ghost-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.site-header.scrolled { border-bottom-color: var(--line); box-shadow: 0 8px 30px -20px rgba(11, 13, 46, 0.3); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 46px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 19px; color: var(--navy); letter-spacing: 0.02em; }
.brand-sub { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-top: 3px; font-family: "Manrope", sans-serif; }

.main-nav { display: none; margin-left: auto; }
.main-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.main-nav a {
  display: block; padding: 8px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--ink); position: relative;
  transition: color 0.2s, background 0.2s;
}
.main-nav a:hover { color: var(--navy); background: rgba(46, 49, 146, 0.06); }
.main-nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 16px; height: 2px;
  background: var(--gold); transform: translateX(-50%); border-radius: 2px;
}

.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.lang-toggle {
  display: inline-flex; align-items: center; height: 38px; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer;
}
.lang-toggle span {
  display: grid; place-items: center; min-width: 36px; height: 30px; padding: 0 8px;
  border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted);
  transition: background 0.25s, color 0.25s;
}
.lang-toggle span.on { background: var(--navy); color: #fff; }

.login-btn { display: none; }

.menu-btn {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--paper); cursor: pointer;
}

/* ---------- Mobile drawer ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 80; pointer-events: none;
}
.drawer-backdrop {
  position: absolute; inset: 0; background: rgba(11, 13, 46, 0.5);
  opacity: 0; transition: opacity 0.3s;
}
.drawer-panel {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(88vw, 380px);
  background: var(--navy-ink); color: #fff;
  transform: translateX(100%); transition: transform 0.4s var(--ease);
  display: flex; flex-direction: column; padding: 22px 24px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.drawer.open { pointer-events: auto; }
.drawer.open .drawer-backdrop { opacity: 1; }
.drawer.open .drawer-panel { transform: none; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.drawer-close { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-light); background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.drawer nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--line-light);
  font-family: var(--serif); font-size: 24px;
}
.drawer nav a[aria-current="page"] { color: var(--gold-soft); }
.drawer nav a .ico { width: 18px; height: 18px; opacity: 0.5; }
.drawer-foot { margin-top: auto; padding-top: 28px; display: grid; gap: 10px; }
.drawer-foot small { color: rgba(255, 255, 255, 0.55); font-size: 13px; }

/* ---------- Bottom tab bar (phones) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 30px -20px rgba(11, 13, 46, 0.35);
}
.tabbar a, .tabbar button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; border-radius: 12px; background: none; border: 0;
  font-size: 11.5px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.tabbar .ico { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--navy); }
.tabbar a[aria-current="page"] .ico { stroke-width: 2; }
.tabbar .tab-call {
  margin-top: -22px;
}
.tabbar .tab-call .bubble {
  width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center;
  background: linear-gradient(145deg, var(--navy), var(--navy-deep)); color: #fff;
  box-shadow: 0 10px 22px -8px rgba(46, 49, 146, 0.8); border: 3px solid #fff;
}
.tabbar .tab-call { color: var(--navy); }

/* Floating WhatsApp */
.fab-wa {
  position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + 16px); z-index: 55;
  width: 54px; height: 54px; border-radius: 999px; display: grid; place-items: center;
  background: #25d366; color: #fff; box-shadow: 0 12px 28px -10px rgba(37, 211, 102, 0.9);
  transition: transform 0.25s var(--ease);
}
.fab-wa:hover { transform: translateY(-2px) scale(1.04); }
.fab-wa .ico { width: 28px; height: 28px; }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section-tight { padding: 48px 0; }
.section-paper { background: var(--paper); }
.section-sand { background: var(--sand); }
.section-dark { background: var(--navy-ink); color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); font-family: "Manrope", var(--sans);
}
html[lang="bn"] .eyebrow { letter-spacing: 0.04em; font-size: 14px; text-transform: none; font-family: var(--sans); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }

.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.section-head h2 { font-size: clamp(32px, 6vw, 52px); margin-top: 14px; color: var(--heading); }
.section-dark .section-head h2 { color: #fff; }
.section-head p { margin-top: 16px; color: var(--muted); font-size: 17px; }
.section-dark .section-head p { color: rgba(255, 255, 255, 0.7); }

.head-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 36px; }
.head-row .section-head { margin-bottom: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 85% 10%, #2a2f8f 0%, var(--navy-deep) 45%, var(--navy-ink) 100%);
  color: #fff;
  min-height: calc(100svh - var(--header-h) - var(--tabbar-h));
  display: flex; align-items: center;
  padding: 56px 0 64px;
}
.hero.has-image { background-size: cover; background-position: center; }
.hero.has-image::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 13, 46, 0.35), rgba(11, 13, 46, 0.85));
}
/* fine architectural lines */
.hero-lines { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-lines i {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(216, 195, 155, 0.22) 30%, rgba(216, 195, 155, 0.05) 85%, transparent);
}
.hero-lines i:nth-child(1) { left: 12%; }
.hero-lines i:nth-child(2) { left: 38%; }
.hero-lines i:nth-child(3) { left: 64%; }
.hero-lines i:nth-child(4) { left: 88%; }
.hero-mark {
  position: absolute; right: -6%; bottom: -4%; z-index: -1;
  width: min(70vw, 620px); opacity: 0.06;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 820px; }
.hero .eyebrow { color: var(--gold-soft); }
.hero h1 {
  font-size: clamp(44px, 10vw, 92px);
  margin: 20px 0 22px; font-weight: 500; color: #fff;
}
.hero h1 em { font-style: italic; color: var(--gold-soft); font-weight: 400; }
html[lang="bn"] .hero h1 em { font-style: normal; }
.hero-lead { font-size: clamp(17px, 2.4vw, 20px); color: rgba(255, 255, 255, 0.78); max-width: 560px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px;
  display: none;
}
.hero-scroll::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px;
  background: var(--gold-soft); border-radius: 3px; animation: scrollcue 1.8s infinite;
}
@keyframes scrollcue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------- Quick actions ---------- */
.quick {
  position: relative; z-index: 2; margin-top: -40px;
}
.quick-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.quick-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px; background: var(--paper); border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1px solid rgba(255, 255, 255, 0.6);
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.quick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.quick-ico {
  width: 52px; height: 52px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(46, 49, 146, 0.1), rgba(46, 49, 146, 0.03)); color: var(--navy);
}
.quick-ico .ico { width: 24px; height: 24px; }
.quick-card h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--heading); }
.quick-card p { font-size: 14px; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.quick-card .go { margin-left: auto; color: var(--gold); }

/* ---------- Intro / about teaser ---------- */
.intro-grid { display: grid; gap: 40px; align-items: center; }
.intro-quote {
  font-family: var(--serif); font-size: clamp(26px, 4.6vw, 40px); line-height: 1.3; color: var(--heading);
}
.intro-quote span { color: var(--gold); }
.intro-body p + p { margin-top: 14px; }
.intro-body { color: var(--muted); font-size: 17px; }
.intro-sign { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.intro-sign img { height: 64px; width: auto; }
.intro-sign strong { display: block; color: var(--heading); font-size: 16px; }
.intro-sign small { color: var(--muted); font-size: 13px; }

/* ---------- Placeholder notice ---------- */
.ph {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #fff4dc; color: #8a6420; border: 1px dashed #d9b46a;
}
.ph-block {
  border: 1.5px dashed #d9b46a; background: #fffaf0; color: #7c5a1d;
  border-radius: var(--radius); padding: 18px 20px; font-size: 15px;
}

/* ---------- Project cards ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; margin-bottom: 28px; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--paper); font-weight: 600; font-size: 14px; cursor: pointer; color: var(--muted);
  transition: all 0.2s;
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.project-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.p-card {
  display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.p-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.p-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-deep); }
.p-media img.cover { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.p-card:hover .p-media img.cover { transform: scale(1.05); }
.p-badges { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.badge {
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.92); color: var(--navy-ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.badge.ongoing { background: var(--gold); color: #fff; }
.badge.upcoming { background: var(--navy); color: #fff; }
.badge.completed { background: #1f7a4d; color: #fff; }
.badge.sample { background: #fff4dc; color: #8a6420; }
.p-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.p-body h3 { font-size: 26px; color: var(--heading); }
.p-loc { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.p-loc .ico { width: 16px; height: 16px; color: var(--gold); }
.p-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.p-facts div { text-align: center; }
.p-facts div + div { border-left: 1px solid var(--line); }
.p-facts b { display: block; font-size: 15px; color: var(--heading); }
.p-facts small { font-size: 12px; color: var(--muted); }

/* placeholder art for projects without photos */
.noimg {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px;
  background:
    linear-gradient(90deg, rgba(216, 195, 155, 0.08) 1px, transparent 1px) 0 0 / 48px 100%,
    radial-gradient(120% 120% at 80% 0%, #2a2f8f, var(--navy-deep) 55%, var(--navy-ink));
  color: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
}
.noimg img { width: 30%; max-width: 110px; filter: brightness(0) invert(1); opacity: 0.22; }

/* ---------- Why BHL ---------- */
.why-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; }
.why-item { background: var(--navy-ink); padding: 30px 26px; transition: background 0.3s; }
.why-item:hover { background: #121545; }
.why-item .num { font-family: "Cormorant Garamond", serif; font-size: 15px; color: var(--gold-soft); letter-spacing: 0.1em; }
.why-item h3 { font-size: 24px; margin: 12px 0 8px; color: #fff; }
.why-item p { color: rgba(255, 255, 255, 0.66); font-size: 15px; }

/* ---------- Audience split (buyer / landowner) ---------- */
.split-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.split-card {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 34px 28px; min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; color: #fff;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 70%);
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease);
}
.split-card:hover { transform: translateY(-4px); }
.split-card.alt { background: linear-gradient(160deg, #3a3122 0%, #1b1610 80%); }
.split-card .big-ico { position: absolute; top: 26px; right: 26px; width: 56px; height: 56px; color: var(--gold-soft); opacity: 0.9; }
.split-card .eyebrow { color: var(--gold-soft); }
.split-card h3 { font-size: clamp(30px, 5vw, 40px); color: #fff; }
.split-card p { color: rgba(255, 255, 255, 0.75); max-width: 440px; }
.split-card .btn { align-self: flex-start; margin-top: 8px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: 14px; counter-reset: step; }
.step {
  position: relative; padding: 24px 22px 24px 76px; background: var(--paper);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 22px; top: 22px; font-family: "Cormorant Garamond", serif;
  font-size: 30px; line-height: 1; color: var(--gold); font-weight: 600;
}
.step h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--heading); }
.step p { color: var(--muted); font-size: 15px; margin-top: 4px; }

/* ---------- Portal / app band ---------- */
.portal {
  border-radius: calc(var(--radius) + 6px); overflow: hidden; position: relative;
  background: radial-gradient(120% 140% at 0% 0%, #2a2f8f, var(--navy-deep) 55%, var(--navy-ink));
  color: #fff; padding: 40px 26px; display: grid; gap: 28px;
}
.portal h2 { font-size: clamp(30px, 5vw, 44px); color: #fff; margin-top: 14px; }
.portal p { color: rgba(255, 255, 255, 0.75); margin-top: 12px; }
.portal .eyebrow { color: var(--gold-soft); }
.portal-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.portal-list li { display: flex; gap: 10px; align-items: flex-start; color: rgba(255, 255, 255, 0.85); }
.portal-list .ico { color: var(--gold-soft); margin-top: 3px; }
.portal-actions { display: flex; flex-wrap: wrap; gap: 12px; align-self: end; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(32px, 6vw, 54px); color: var(--heading); max-width: 760px; margin: 14px auto 0; }
.cta-band p { color: var(--muted); max-width: 560px; margin: 16px auto 0; }
.cta-band .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 120% at 90% 0%, #2a2f8f, var(--navy-deep) 50%, var(--navy-ink));
  color: #fff; padding: 64px 0 56px;
}
.page-hero .hero-mark { width: min(60vw, 420px); right: -4%; bottom: -20%; }
.page-hero .eyebrow { color: var(--gold-soft); }
.page-hero h1 { font-size: clamp(40px, 8vw, 72px); margin-top: 16px; color: #fff; }
.page-hero p { margin-top: 14px; color: rgba(255, 255, 255, 0.75); max-width: 620px; font-size: 18px; }
.crumbs { display: flex; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-bottom: 18px; }
.crumbs a:hover { color: #fff; }

/* ---------- Two-column content ---------- */
.cols { display: grid; gap: 40px; }
.prose { color: var(--muted); font-size: 17px; }
.prose p + p { margin-top: 16px; }
.prose h3 { font-size: 28px; color: var(--heading); margin: 32px 0 12px; }

.mv-grid { display: grid; gap: 16px; }
.mv-card { background: var(--paper); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow); border-top: 3px solid var(--gold); }
.mv-card h3 { font-size: 28px; color: var(--heading); margin-bottom: 10px; }
.mv-card p { color: var(--muted); }

.team-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.member { text-align: center; }
.member .photo {
  aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; position: relative; margin-bottom: 14px;
  background: linear-gradient(160deg, var(--sand), #e2ddd0);
  display: grid; place-items: center; color: #a39c8b;
}
.member .photo .ico { width: 44px; height: 44px; }
.member h3 { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--heading); }
.member small { color: var(--muted); font-size: 13px; }

/* ---------- Message from chairman ---------- */
.message {
  display: grid; gap: 28px; background: var(--paper); border-radius: calc(var(--radius) + 4px);
  padding: 30px 24px; box-shadow: var(--shadow);
}
.message .photo { aspect-ratio: 4 / 5; border-radius: var(--radius); background: linear-gradient(160deg, var(--sand), #e2ddd0); display: grid; place-items: center; color: #a39c8b; max-width: 320px; }
.message .photo .ico { width: 56px; height: 56px; }
.message blockquote { margin: 0; font-family: var(--serif); font-size: clamp(22px, 3.6vw, 30px); line-height: 1.45; color: var(--heading); }
.message cite { display: block; margin-top: 20px; font-style: normal; color: var(--muted); font-size: 15px; }
.message cite b { color: var(--heading); display: block; font-size: 17px; }

/* ---------- Benefits list ---------- */
.benefits { display: grid; grid-template-columns: 1fr; gap: 12px; }
.benefit {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: var(--paper);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.benefit .quick-ico { width: 46px; height: 46px; border-radius: 12px; }
.benefit h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; color: var(--heading); }
.benefit p { color: var(--muted); font-size: 15px; margin-top: 4px; }

/* ---------- Forms ---------- */
.form-card { background: var(--paper); border-radius: calc(var(--radius) + 4px); padding: 28px 22px; box-shadow: var(--shadow-lg); }
.form-card h2 { font-size: clamp(28px, 4.6vw, 38px); color: var(--heading); }
.form-card > p { color: var(--muted); margin-top: 8px; }
.form-grid { display: grid; gap: 14px; margin-top: 24px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--heading); margin-bottom: 6px; }
.field label .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--ivory); font: inherit; font-size: 16px; color: var(--ink);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 4px rgba(46, 49, 146, 0.1);
}
.form-note { font-size: 13px; color: var(--muted); margin-top: 12px; }
.form-ok { display: none; margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm); background: #ecf7f0; color: #1f6b44; font-weight: 600; font-size: 15px; }
.form-ok.show { display: block; }
details.more { border-top: 1px dashed var(--line); padding-top: 12px; }
details.more summary { cursor: pointer; font-weight: 600; color: var(--navy); font-size: 15px; list-style: none; display: flex; align-items: center; gap: 8px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; border: 1px solid currentColor; font-size: 15px; line-height: 1; }
details.more[open] summary::before { content: "–"; }
details.more .form-grid { margin-top: 14px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; position: relative;
  font-weight: 700; color: var(--heading); font-size: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); transform: rotate(45deg);
  transition: transform 0.25s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 22px 20px; color: var(--muted); }

/* ---------- Contact ---------- */
.contact-list { display: grid; gap: 12px; }
.contact-item {
  display: flex; gap: 16px; align-items: center; padding: 20px; background: var(--paper);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.contact-item small { display: block; color: var(--muted); font-size: 13px; }
.contact-item b { color: var(--heading); font-size: 16px; }
.map-box { border-radius: var(--radius); overflow: hidden; min-height: 280px; background: var(--sand); display: grid; place-items: center; box-shadow: var(--shadow); }
.map-box iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }

/* ---------- Project detail ---------- */
.pd-hero { position: relative; background: var(--navy-ink); color: #fff; }
.pd-media { position: relative; aspect-ratio: 4 / 3; max-height: 72vh; width: 100%; overflow: hidden; }
.pd-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11, 13, 46, 0.9)); }
.pd-media .noimg { align-content: start; padding-top: 10%; }
.pd-media .noimg span { display: none; }
.pd-title { position: relative; margin-top: -120px; z-index: 2; padding-bottom: 32px; }
.pd-title h1 { font-size: clamp(40px, 8vw, 76px); color: #fff; margin-top: 10px; }
.pd-title .p-loc { color: rgba(255, 255, 255, 0.75); font-size: 16px; margin-top: 6px; }
.pd-tabs {
  position: sticky; top: var(--header-h); z-index: 20; background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.pd-tabs .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pd-tabs .wrap::-webkit-scrollbar { display: none; }
.pd-tabs a { flex: none; padding: 16px 14px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; }
.pd-tabs a.on, .pd-tabs a:hover { color: var(--navy); border-bottom-color: var(--gold); }
.facts-table { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.facts-table div { background: var(--paper); padding: 18px; }
.facts-table small { display: block; color: var(--muted); font-size: 13px; }
.facts-table b { color: var(--heading); font-size: 17px; }
.amenities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.amenities li { list-style: none; display: flex; gap: 10px; align-items: center; padding: 14px; background: var(--paper); border-radius: var(--radius-sm); font-weight: 500; font-size: 15px; box-shadow: var(--shadow); }
.amenities .ico { color: var(--gold); }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gallery a { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery a:hover img { transform: scale(1.05); }
.progress { height: 10px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius: 999px; }
.pd-block + .pd-block { margin-top: 56px; }
.pd-block h2 { font-size: clamp(28px, 5vw, 40px); color: var(--heading); margin-bottom: 20px; }
.pd-layout { display: grid; gap: 40px; }
.pd-aside .form-card { position: sticky; top: calc(var(--header-h) + 76px); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-ink); color: rgba(255, 255, 255, 0.72); padding: 64px 0 28px; }
.footer-grid { display: grid; gap: 36px; }
.footer-brand .card { display: inline-flex; padding: 14px 18px; background: #fff; border-radius: var(--radius); }
.footer-brand .card img { height: 76px; width: auto; }
.footer-brand p { margin-top: 18px; max-width: 340px; font-size: 15px; }
.footer-hotline { font-family: "Cormorant Garamond", serif; font-size: 44px; color: #fff; line-height: 1; margin-top: 4px; }
.site-footer h4 { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 16px; }
html[lang="bn"] .site-footer h4 { letter-spacing: 0.02em; font-size: 15px; text-transform: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.site-footer a:hover { color: #fff; }
.footer-bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-light);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: 13px; color: rgba(255, 255, 255, 0.5);
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
/* hero text animates on load, not on scroll */
.rise { animation: rise 1s var(--ease) both; }
.rise.d1 { animation-delay: 0.1s; }
.rise.d2 { animation-delay: 0.22s; }
.rise.d3 { animation-delay: 0.34s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-scroll::after { animation: none; }
}

/* ==========================================================================
   Phones first; these widen the layout.
   ========================================================================== */
@media (max-width: 899px) {
  :root { --tabbar-h: 64px; --header-h: 64px; }
  .brand img { height: 40px; }
  .brand-name { font-size: 17px; }
  .brand-sub { font-size: 9.5px; }
}
@media (max-width: 339px) {
  .brand-text { display: none; }
}

@media (min-width: 600px) {
  :root { --gutter: 28px; }
  .quick-grid { grid-template-columns: repeat(3, 1fr); }
  .quick-card { flex-direction: column; align-items: flex-start; padding: 24px; }
  .quick-card .go { margin-left: 0; margin-top: auto; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .benefits { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .mv-grid { grid-template-columns: repeat(2, 1fr); }
  .facts-table { grid-template-columns: repeat(3, 1fr); }
  .amenities { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .form-card { padding: 36px 32px; }
  .form-grid.two { grid-template-columns: 1fr 1fr; }
  .form-grid.two .full { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .tabbar { display: none; }
  .section { padding: 112px 0; }
  .hero { padding: 80px 0 120px; }
  .hero-scroll { display: block; }
  .quick { margin-top: -64px; }
  .intro-grid { grid-template-columns: 1.1fr 1fr; gap: 80px; }
  .project-grid { grid-template-columns: repeat(3, 1fr); gap: 26px; }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .split-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .split-card { min-height: 420px; padding: 44px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .step { padding: 70px 24px 28px; }
  .step::before { top: 24px; left: 24px; }
  .portal { grid-template-columns: 1.3fr 1fr; padding: 64px; align-items: end; }
  .portal-actions { justify-content: flex-end; }
  .page-hero { padding: 100px 0 90px; }
  .cols { grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
  .cols.wide-left { grid-template-columns: 1.4fr 1fr; }
  .message { grid-template-columns: 300px 1fr; padding: 48px; gap: 48px; align-items: center; }
  .team-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .benefits { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; }
  .pd-layout { grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }
  .pd-media { aspect-ratio: 21 / 9; }
  .fab-wa { right: 24px; bottom: 24px; }
}

@media (min-width: 1200px) {
  .main-nav a { padding: 8px 16px; }
}

/* ==========================================================================
   v2 — photography, hero slider, marquee, search, showcase, mosaic
   ========================================================================== */

/* ---------- Hero slider ---------- */
.hero-slider {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  height: calc(100svh - var(--header-h) - var(--tabbar-h)); min-height: 560px; max-height: 980px;
  background: var(--navy-ink);
}
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; z-index: 0; }
.slide.on { opacity: 1; z-index: 1; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.slide.on img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.slide::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 13, 46, 0.45) 0%, rgba(11, 13, 46, 0.1) 35%, rgba(11, 13, 46, 0.85) 100%),
    linear-gradient(90deg, rgba(11, 13, 46, 0.55), transparent 70%);
}
.slide-copy {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 150px;
}
.slide-copy .eyebrow { color: var(--gold-soft); }
.slide-title {
  font-family: var(--serif); font-weight: 400; color: #fff;
  font-size: clamp(38px, min(9vw, 10.5vh), 96px); line-height: 1.1; margin: 16px 0 14px; max-width: 900px;
}
html[lang="en"] .slide-title { text-transform: uppercase; font-weight: 300; letter-spacing: 0.02em; }
.slide-title em { font-style: normal; color: var(--gold-soft); }
.slide-sub { font-size: clamp(16px, 2.2vw, 19px); color: rgba(255, 255, 255, 0.82); max-width: 560px; }
.slide.on .slide-copy > * { animation: rise 1.1s var(--ease) both; }
.slide.on .slide-copy > *:nth-child(2) { animation-delay: 0.12s; }
.slide.on .slide-copy > *:nth-child(3) { animation-delay: 0.24s; }

.hero-bar {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 64px;
}
.hero-bar .wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.hero-bar .hero-cta { margin: 0; }
.slider-ctrl { display: flex; align-items: center; gap: 14px; }
.slider-count { font-family: "Cormorant Garamond", serif; font-size: 18px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.85); min-width: 70px; }
.slider-count b { color: #fff; font-weight: 600; font-size: 22px; }
.slider-btn {
  width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.35); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background 0.25s, border-color 0.25s;
}
.slider-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: #fff; }
.slider-btn.prev .ico { transform: rotate(180deg); }
.slider-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 40px; }
.slider-dots .wrap { display: flex; gap: 8px; }
.slider-dots button {
  position: relative; flex: 1; max-width: 80px; height: 3px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.25); border-radius: 3px; overflow: hidden;
}
.slider-dots button::before { content: ""; position: absolute; inset: -10px 0; }
.slider-dots button i { position: absolute; inset: 0; width: 0; background: var(--gold-soft); }
.slider-dots button.on i { animation: fillbar var(--slide-ms, 6500ms) linear forwards; }
.slider-dots button.done i { width: 100%; }
@keyframes fillbar { to { width: 100%; } }

/* hero CTA on phones: compact */
@media (max-width: 599px) {
  .slide-copy { bottom: 190px; }
  .hero-bar { bottom: 78px; }
  .hero-bar .hero-cta { width: 100%; }
  .hero-bar .hero-cta .btn { flex: 1; padding: 0 16px; }
  .slider-ctrl { display: none; }
  .slider-dots { bottom: 54px; }
}

/* ---------- Marquee ---------- */
.marquee { background: var(--navy-ink); color: var(--gold-soft); overflow: hidden; border-top: 1px solid var(--line-light); }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee span {
  display: inline-flex; align-items: center; gap: 28px; padding: 18px 14px; white-space: nowrap;
  font-family: var(--serif); font-size: clamp(18px, 2.4vw, 24px); letter-spacing: 0.04em;
}
html[lang="en"] .marquee span { text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(15px, 1.8vw, 19px); }
.marquee span::after { content: "✦"; font-size: 12px; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Image collage (intro) ---------- */
.collage { position: relative; padding: 0 18% 22% 0; }
.collage .c1 { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow-lg); }
.collage .c2 {
  position: absolute; right: 0; bottom: 0; width: 56%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  border: 6px solid var(--ivory); box-shadow: var(--shadow-lg);
}
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage .tag {
  position: absolute; left: -10px; top: 26px; background: var(--navy); color: #fff; padding: 14px 18px;
  border-radius: 12px; box-shadow: var(--shadow-lg); font-family: var(--serif); font-size: 20px; line-height: 1.2;
}
.collage .tag small { display: block; font-family: var(--sans); font-size: 12px; color: var(--gold-soft); letter-spacing: 0.1em; margin-bottom: 4px; }
.photo-note { font-size: 12px; color: var(--muted); margin-top: 10px; opacity: 0.8; }
.photo-note.light { color: rgba(255, 255, 255, 0.55); }

/* ---------- Find a project ---------- */
.finder {
  display: grid; gap: 10px; padding: 14px; border-radius: calc(var(--radius) + 6px);
  background: var(--paper); box-shadow: var(--shadow-lg);
}
.finder label { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 0 0 4px 4px; letter-spacing: 0.04em; }
.finder select {
  width: 100%; min-height: 50px; border-radius: 999px; border: 1px solid var(--line); background: var(--ivory);
  padding: 0 40px 0 18px; font: inherit; font-size: 15px; color: var(--ink); appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 22px) 22px, calc(100% - 17px) 22px; background-size: 5px 5px; background-repeat: no-repeat;
}
.finder .btn { min-height: 50px; align-self: end; }
.section-dark .finder { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line-light); box-shadow: none; }
.section-dark .finder label { color: rgba(255, 255, 255, 0.6); }
.section-dark .finder select { background-color: rgba(255, 255, 255, 0.95); }

/* dark project cards (home showcase) */
.section-dark .p-card { background: #14174a; box-shadow: none; border: 1px solid var(--line-light); }
.section-dark .p-card h3 { color: #fff; }
.section-dark .p-loc, .section-dark .p-facts small { color: rgba(255, 255, 255, 0.6); }
.section-dark .p-facts { border-top-color: var(--line-light); }
.section-dark .p-facts div + div { border-left-color: var(--line-light); }
.section-dark .p-facts b { color: #fff; }
.section-dark .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.section-dark .btn-ghost:hover { border-color: #fff; color: #fff; }
.p-media .img-note {
  position: absolute; right: 10px; bottom: 10px; font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(11, 13, 46, 0.55); padding: 3px 9px; border-radius: 999px;
}

/* ---------- Showcase: promises over a full-bleed photo ---------- */
.showcase { position: relative; overflow: hidden; isolation: isolate; padding: 90px 0; }
.showcase > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.showcase::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 13, 46, 0.25), rgba(11, 13, 46, 0.55)); }
.show-card {
  max-width: 560px; margin: 0 auto; background: var(--paper); border-radius: calc(var(--radius) + 4px);
  padding: 36px 28px 28px; text-align: center; box-shadow: var(--shadow-lg);
}
.show-count { font-family: "Cormorant Garamond", serif; font-size: 20px; letter-spacing: 0.1em; color: var(--muted); }
.show-count b { color: var(--heading); font-weight: 600; }
.show-items { position: relative; min-height: 170px; margin-top: 10px; }
.show-item { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity 0.6s, transform 0.6s var(--ease); }
.show-item.on { opacity: 1; transform: none; position: relative; }
.show-item h3 { font-size: clamp(28px, 4.6vw, 38px); color: var(--heading); margin-bottom: 12px; }
html[lang="en"] .show-item h3 { text-transform: uppercase; font-weight: 400; letter-spacing: 0.04em; }
.show-item p { color: var(--muted); }
.show-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; }
.show-nav .slider-btn { background: var(--ivory); border-color: var(--line); color: var(--navy); }
.show-nav .slider-btn:hover { background: var(--navy); color: #fff; }
.show-title {
  text-align: center; color: #fff; margin-top: 40px; font-size: clamp(34px, 6vw, 64px); font-weight: 400;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
}

/* ---------- Lifestyle mosaic ---------- */
.mosaic { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.mosaic figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; }
.mosaic figure.big { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mosaic figure:hover img { transform: scale(1.06); }
.mosaic figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(11, 13, 46, 0.8));
  font-family: var(--serif); font-size: 20px;
}

/* ---------- Photo split cards / page heroes / CTA ---------- */
.split-card.photo { background: var(--navy-deep); min-height: 400px; }
.split-card.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform 1.2s var(--ease); }
.split-card.photo:hover > img { transform: scale(1.05); }
.split-card.photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 13, 46, 0.35) 0%, rgba(11, 13, 46, 0.6) 40%, rgba(11, 13, 46, 0.92) 85%);
}
.split-card.photo > *:not(img) { position: relative; z-index: 2; }
.split-card.photo .big-ico { position: absolute; z-index: 2; }

.page-hero.photo { background: var(--navy-ink); padding: 120px 0 80px; }
.page-hero.photo > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero.photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 13, 46, 0.55), rgba(11, 13, 46, 0.88));
}
html[lang="en"] .page-hero h1 { text-transform: uppercase; font-weight: 300; letter-spacing: 0.02em; }

.cta-photo { position: relative; overflow: hidden; isolation: isolate; color: #fff; text-align: center; padding: 110px 0; }
.cta-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 13, 46, 0.72); }
.cta-photo h2 { color: #fff; font-size: clamp(34px, 6vw, 60px); max-width: 820px; margin: 14px auto 0; }
html[lang="en"] .cta-photo h2 { text-transform: uppercase; font-weight: 300; }
.cta-photo p { color: rgba(255, 255, 255, 0.78); max-width: 560px; margin: 16px auto 0; }
.cta-photo .eyebrow { color: var(--gold-soft); }
.cta-photo .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

.figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }

/* footer photo */
.site-footer { position: relative; isolation: isolate; overflow: hidden; }
.site-footer > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.18; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--navy-ink) 0%, rgba(11, 13, 46, 0.86) 100%); }

/* headings in English get the luxury caps treatment */
html[lang="en"] .section-head h2 { text-transform: uppercase; font-weight: 400; letter-spacing: 0.02em; }

@media (min-width: 600px) {
  .finder { grid-template-columns: repeat(3, 1fr) auto; align-items: end; padding: 18px; }
  .mosaic { grid-template-columns: repeat(3, 1fr); }
  .mosaic figure.big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}
@media (min-width: 900px) {
  .showcase { padding: 150px 0 120px; }
  .show-card { padding: 48px 48px 36px; }
  .mosaic { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .mosaic figure.big { grid-column: span 2; grid-row: span 2; }
  .collage { padding: 0 22% 18% 0; }
  .page-hero.photo { padding: 170px 0 110px; }
  .cta-photo { padding: 160px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .slide.on img, .marquee-track, .slider-dots button.on i { animation: none; }
  .slide { transition: none; }
}


/* ==========================================================================
   v3 — night mode, transparent header over the hero, dropdown menu,
   full-screen menu, new pages
   ========================================================================== */

/* ---------- Night mode ---------- */
html[data-theme="dark"] {
  --ivory: #0c0f2c;
  --paper: #141840;
  --sand: #11143a;
  --ink: #e9e9f4;
  --heading: #ffffff;
  --muted: #a5a8c8;
  --line: rgba(255, 255, 255, 0.1);
  --navy-ink: #070920;
  --header-bg: rgba(12, 15, 44, 0.88);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 34px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.75);
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--ivory); }
html[data-theme="dark"] .quick-ico { background: rgba(216, 195, 155, 0.1); color: var(--gold-soft); }
html[data-theme="dark"] .main-nav a:hover { color: var(--gold-soft); background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .main-nav a[aria-current="page"] { color: var(--gold-soft); }
html[data-theme="dark"] .tabbar a[aria-current="page"], html[data-theme="dark"] .tabbar .tab-call { color: var(--gold-soft); }
html[data-theme="dark"] .tabbar .tab-call .bubble { border-color: var(--ivory); }
html[data-theme="dark"] .btn-ghost:hover { border-color: var(--gold-soft); color: var(--gold-soft); }
html[data-theme="dark"] .chip:hover { border-color: var(--gold-soft); color: var(--gold-soft); }
html[data-theme="dark"] .chip.on { background: var(--gold); border-color: var(--gold); }
html[data-theme="dark"] .lang-toggle span.on { background: var(--gold); }
html[data-theme="dark"] .member .photo, html[data-theme="dark"] .message .photo { background: linear-gradient(160deg, #1b1f52, #12153f); color: #4d5290; }
html[data-theme="dark"] .ph { background: rgba(217, 180, 106, 0.12); color: #e8c98a; border-color: rgba(217, 180, 106, 0.5); }
html[data-theme="dark"] .ph-block { background: rgba(217, 180, 106, 0.08); color: #e8c98a; border-color: rgba(217, 180, 106, 0.45); }
html[data-theme="dark"] .form-ok { background: rgba(31, 122, 77, 0.2); color: #8fe0b4; }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: #0f1235; }
html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .field textarea:focus { background: #0f1235; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(176, 144, 90, 0.18); }
html[data-theme="dark"] .finder select { background-color: #0f1235; color: var(--ink); }
html[data-theme="dark"] .section-dark .finder select { background-color: rgba(255, 255, 255, 0.95); color: #16183a; }
html[data-theme="dark"] .show-nav .slider-btn { background: rgba(255, 255, 255, 0.06); color: var(--gold-soft); }
html[data-theme="dark"] .pd-tabs a.on, html[data-theme="dark"] .pd-tabs a:hover { color: var(--gold-soft); }
html[data-theme="dark"] details.more summary { color: var(--gold-soft); }
html[data-theme="dark"] .collage .tag { background: var(--gold); }
html[data-theme="dark"] .section-paper { background: #10133a; }
html[data-theme="dark"] .section-sand { background: #0e1133; }
html[data-theme="dark"] .section-dark { background: #070920; }
html[data-theme="dark"] .marquee { background: #070920; }
html[data-theme="dark"] .p-card { border: 1px solid var(--line); }
html[data-theme="dark"] .brand-name { color: #fff; }

/* theme toggle */
.theme-toggle {
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); background: var(--chip); color: var(--ink); transition: transform 0.4s var(--ease), background 0.25s;
}
.theme-toggle:hover { transform: rotate(-20deg); }
.theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, 0.06); color: var(--gold-soft); }
html[data-theme="dark"] .theme-toggle .sun { display: block; }
html[data-theme="dark"] .theme-toggle .moon { display: none; }
html[data-theme="dark"] .lang-toggle, html[data-theme="dark"] .menu-btn { background: rgba(255, 255, 255, 0.06); }

/* logo sits on a small white tile so it reads on any background */
.brand .logo-tile { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line); flex: none; }
.brand .logo-tile img { height: 40px; width: auto; }

/* ---------- Header over the home hero ---------- */
body[data-page="home"] .site-header { position: fixed; left: 0; right: 0; top: 0; }
body[data-page="home"] .site-header:not(.scrolled) {
  background: linear-gradient(180deg, rgba(7, 9, 32, 0.55), transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent;
}
body[data-page="home"] .site-header:not(.scrolled) .brand-name,
body[data-page="home"] .site-header:not(.scrolled) .main-nav > ul > li > a { color: #fff; }
body[data-page="home"] .site-header:not(.scrolled) .main-nav > ul > li > a:hover { background: rgba(255, 255, 255, 0.12); }
body[data-page="home"] .site-header:not(.scrolled) .brand-sub { color: var(--gold-soft); }
body[data-page="home"] .site-header:not(.scrolled) .lang-toggle,
body[data-page="home"] .site-header:not(.scrolled) .menu-btn,
body[data-page="home"] .site-header:not(.scrolled) .theme-toggle { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
body[data-page="home"] .site-header:not(.scrolled) .lang-toggle span { color: rgba(255, 255, 255, 0.8); }
body[data-page="home"] .site-header:not(.scrolled) .lang-toggle span.on { background: #fff; color: var(--navy); }
body[data-page="home"] .hero-slider { height: calc(100svh - var(--tabbar-h)); max-height: none; }
body[data-page="home"] .slide-copy { padding-top: var(--header-h); }

/* ---------- Desktop menu with dropdowns ---------- */
.main-nav > ul > li { position: relative; }
.main-nav .caret { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: 0.6; }
.main-nav .sub {
  position: absolute; top: calc(100% + 10px); left: -8px; min-width: 240px; padding: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s var(--ease), visibility 0.25s;
}
.main-nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.main-nav li:hover > .sub, .main-nav li:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 14.5px; color: var(--ink); }
.main-nav .sub a::after { display: none; }
.main-nav .sub a:hover { background: var(--ivory); color: var(--navy); }
html[data-theme="dark"] .main-nav .sub a:hover { color: var(--gold-soft); }

/* ---------- Full-screen menu ---------- */
.drawer-panel { width: 100%; max-width: 100%; padding: 0; background: var(--navy-ink); display: grid; grid-template-columns: 1fr; }
.menu-main { padding: 20px 24px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow-y: auto; }
.menu-aside { display: none; position: relative; overflow: hidden; }
.menu-aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.menu-aside::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 9, 32, 0.2), rgba(7, 9, 32, 0.9)); }
.menu-aside .aside-copy { position: absolute; z-index: 2; left: 40px; right: 40px; bottom: 40px; color: #fff; }
.menu-aside .aside-copy p { font-family: var(--serif); font-size: 34px; line-height: 1.25; }
.menu-aside .aside-copy small { display: block; margin-top: 14px; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.menu-search { position: relative; margin-bottom: 14px; }
.menu-search input {
  width: 100%; height: 50px; border-radius: 999px; border: 1px solid var(--line-light); background: rgba(255, 255, 255, 0.06);
  color: #fff; padding: 0 20px 0 48px; font: inherit; font-size: 15px;
}
.menu-search input::placeholder { color: rgba(255, 255, 255, 0.5); }
.menu-search .ico { position: absolute; left: 18px; top: 15px; color: var(--gold-soft); }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list > li { border-bottom: 1px solid var(--line-light); }
.menu-row { display: flex; align-items: center; justify-content: space-between; }
.menu-row a { flex: 1; padding: 15px 0; font-family: var(--serif); font-size: 25px; color: #fff; }
html[lang="en"] .menu-row a { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 300; font-size: 23px; }
.menu-row a[aria-current="page"] { color: var(--gold-soft); }
.menu-row button {
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-light); background: none; color: #fff;
  display: grid; place-items: center; cursor: pointer; transition: transform 0.3s var(--ease);
}
.menu-row button[aria-expanded="true"] { transform: rotate(45deg); background: var(--gold); border-color: var(--gold); }
.menu-sub { list-style: none; margin: 0; padding: 0 0 0 4px; display: grid; gap: 2px; max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease), padding 0.3s; }
.menu-sub.open { max-height: 420px; padding-bottom: 14px; }
.menu-sub a { display: block; padding: 8px 0; color: rgba(255, 255, 255, 0.72); font-size: 15.5px; }
.menu-sub a:hover { color: var(--gold-soft); }
.menu-social { display: flex; gap: 10px; margin-top: 4px; }
.menu-social a { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-light); display: grid; place-items: center; color: #fff; }
.menu-social a:hover { background: var(--gold); border-color: var(--gold); }
.menu-tools { display: flex; gap: 8px; align-items: center; }

/* ---------- Footer social ---------- */
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-light); display: grid; place-items: center; color: #fff; transition: all 0.25s; }
.footer-social a:hover { background: var(--gold); border-color: var(--gold); }

/* ---------- Stats (shown only when real numbers exist in config.js) ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.stats div { background: var(--paper); padding: 28px 20px; text-align: center; }
.stats b { display: block; font-family: "Cormorant Garamond", serif; font-size: 48px; font-weight: 500; color: var(--gold); line-height: 1; }
.stats small { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; }

/* ---------- News / career ---------- */
.news-grid { display: grid; gap: 20px; }
.news-card { background: var(--paper); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.news-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.news-card .body { padding: 20px; }
.news-card small { color: var(--gold); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; }
.news-card h3 { font-size: 22px; color: var(--heading); margin-top: 8px; }
.empty-state { text-align: center; padding: 48px 24px; background: var(--paper); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); }
.empty-state .quick-ico { margin: 0 auto 16px; width: 64px; height: 64px; border-radius: 18px; }
.empty-state h3 { font-size: clamp(26px, 4vw, 34px); color: var(--heading); }
.empty-state p { color: var(--muted); max-width: 520px; margin: 10px auto 0; }
.empty-state .btn { margin-top: 22px; }
.legal { max-width: 820px; }
.legal h2 { font-size: 26px; color: var(--heading); margin: 36px 0 10px; }
.legal p, .legal li { color: var(--muted); font-size: 16.5px; }
.legal ul { padding-left: 20px; display: grid; gap: 6px; }

[id] { scroll-margin-top: calc(var(--header-h) + 64px); }

@media (min-width: 600px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .news-grid { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(6, 1fr); }
  .drawer-panel { grid-template-columns: minmax(420px, 1fr) 1.2fr; }
  .menu-main { padding: 34px 56px 40px; }
  .menu-aside { display: block; }
  .menu-row a { font-size: 30px; padding: 14px 0; }
  html[lang="en"] .menu-row a { font-size: 26px; }
}
@media (min-width: 1200px) {
  .menu-btn { display: none; }
  .main-nav { display: block; }
  .main-nav + .header-actions { margin-left: 6px; }
  .login-btn { display: inline-flex; }
}
@media (max-width: 1199px) {
  .main-nav { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1360px) {
  .main-nav a { padding: 8px 10px; font-size: 14.5px; }
  .brand-text { display: none; }
}
@media (max-width: 899px) {
  .brand .logo-tile { width: 44px; height: 44px; border-radius: 11px; }
  .brand .logo-tile img { height: 35px; }
}
.main-nav > ul > li > a { display: inline-flex; align-items: center; white-space: nowrap; }
.main-nav .caret { transform: translateY(-2px) rotate(45deg); margin-left: 8px; }
.main-nav .sub { display: block; }
.main-nav .sub li { display: block; }
@media (max-width: 479px) {
  .site-header .wrap { gap: 10px; }
  .header-actions { gap: 6px; }
  .header-actions .theme-toggle { display: none; }
  .brand { gap: 9px; }
  .brand-name { font-size: 16px; }
}

/* ==========================================================================
   v4 — spotlight, shortlist, lightbox, filter bar, calculators, philosophy,
   scroll progress and image reveals
   ========================================================================== */

/* gentle page entrance */
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }
main { animation: pagein 0.6s ease both; }

/* scroll progress + back to top */
.scroll-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 70; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.to-top {
  position: fixed; left: 16px; bottom: calc(var(--tabbar-h) + 16px); z-index: 55; width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; border: 1px solid var(--line); background: var(--paper); color: var(--heading);
  box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); pointer-events: none; transition: all 0.3s var(--ease);
}
.to-top .ico { transform: rotate(-90deg); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 900px) { .to-top { right: auto; left: 28px; bottom: 28px; } }

/* image wipe reveal */
.wipe.reveal { opacity: 1; transform: none; }
.wipe img { clip-path: inset(0 0 100% 0); transform: scale(1.12); transition: clip-path 1.3s cubic-bezier(0.7, 0, 0.2, 1), transform 1.8s var(--ease); }
.wipe.in img { clip-path: inset(0 0 0 0); transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .wipe img { clip-path: none; transform: none; transition: none; } }

/* shortlist */
.fav-btn {
  position: absolute; right: 12px; top: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: var(--navy); transition: transform 0.25s var(--ease), background 0.25s;
}
.fav-btn:hover { transform: scale(1.08); }
.fav-btn .ico { width: 19px; height: 19px; }
.fav-btn.on { background: #e0405a; color: #fff; }
.fav-btn.on .ico, .fav-pill.on .ico, .pd-chip.on .ico { fill: currentColor; }
.p-badges { right: 64px; }
.fav-link { position: relative; width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--chip); color: var(--ink); }
.fav-link .ico { width: 18px; height: 18px; }
.fav-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e0405a; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.fav-count[hidden] { display: none; }
html[data-theme="dark"] .fav-link { background: rgba(255, 255, 255, 0.06); }
body[data-page="home"] .site-header:not(.scrolled) .fav-link { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.fav-pill.on { border-color: #e0405a; color: #e0405a; }
@media (max-width: 479px) { .header-actions .fav-link { display: none; } }

/* featured project spotlight */
.spotlight { display: grid; gap: 32px; align-items: center; }
.spot-title { font-size: clamp(40px, 7vw, 76px); color: var(--heading); margin: 14px 0 10px; font-weight: 400; }
html[lang="en"] .spot-title { text-transform: uppercase; font-weight: 300; letter-spacing: 0.02em; }
.spot-text { color: var(--muted); font-size: 17px; margin-top: 16px; max-width: 520px; }
.spot-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 26px; }
.spot-facts div { background: var(--paper); padding: 16px 18px; }
.spot-facts small { display: block; color: var(--muted); font-size: 12.5px; }
.spot-facts b { color: var(--heading); font-size: 16px; }
.spot-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.spot-ctrl { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.spot-ctrl .slider-btn { background: var(--paper); border-color: var(--line); color: var(--heading); }
.spot-ctrl .slider-btn:hover { background: var(--navy); color: #fff; }
.spot-count { font-family: "Cormorant Garamond", serif; font-size: 18px; letter-spacing: 0.08em; color: var(--muted); }
.spot-count b { color: var(--heading); font-size: 22px; font-weight: 600; }
.spot-stage { position: relative; aspect-ratio: 4 / 5; border-radius: calc(var(--radius) + 6px); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--navy-deep); }
.spot-img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; cursor: zoom-in; }
.spot-img.on { opacity: 1; z-index: 1; }
.spot-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s ease-out; }
.spot-img.on img { transform: scale(1); }
.spot-stage .img-note { z-index: 2; }
.spot-zoom { position: absolute; z-index: 2; left: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: rgba(11, 13, 46, 0.55); color: #fff; pointer-events: none; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(5, 6, 22, 0.94); display: none; align-items: center; justify-content: center; }
.lightbox.open { display: flex; }
.lb-stage { margin: 0; max-width: min(1400px, 92vw); max-height: 84vh; display: grid; place-items: center; width: 100%; height: 100%; }
.lb-stage img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: 8px; opacity: 0; transform: scale(0.98); transition: opacity 0.4s, transform 0.5s var(--ease); }
.lb-stage img.in { opacity: 1; transform: none; }
.lb-close { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-prev .ico { transform: rotate(180deg); }
.lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.8); font-family: "Cormorant Garamond", serif; font-size: 20px; letter-spacing: 0.1em; }
@media (max-width: 599px) { .lb-prev, .lb-next { top: auto; bottom: 14px; transform: none; } }

/* project detail action chips */
.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pd-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 14px; font-weight: 600;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background 0.25s;
}
.pd-chip:hover { background: rgba(255, 255, 255, 0.18); }
.pd-chip .ico { width: 17px; height: 17px; }
.pd-chip.on { background: #e0405a; border-color: #e0405a; }
.pd-media a { display: block; width: 100%; height: 100%; cursor: zoom-in; }

/* projects page: filter bar over the hero, staggered cards */
.filter-wrap { position: relative; z-index: 5; margin-top: -42px; }
.filter-bar {
  display: grid; gap: 10px; padding: 14px; border-radius: calc(var(--radius) + 4px);
  background: rgba(20, 23, 70, 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-light); box-shadow: var(--shadow-lg); color: #fff;
}
.filter-bar select, .filter-bar input[type="search"] {
  width: 100%; height: 48px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07);
  color: #fff; font: inherit; font-size: 15px; padding: 0 18px; appearance: none; -webkit-appearance: none;
}
.filter-bar select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--gold-soft) 50%), linear-gradient(135deg, var(--gold-soft) 50%, transparent 50%); background-position: calc(100% - 22px) 21px, calc(100% - 17px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.filter-bar select option { color: #16183a; }
.filter-bar input::placeholder { color: rgba(255, 255, 255, 0.55); }
.filter-bar .fav-toggle { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); cursor: pointer; font-weight: 600; font-size: 14px; white-space: nowrap; }
.filter-bar .fav-toggle input { accent-color: #e0405a; width: 16px; height: 16px; }
.filter-bar .fav-toggle .ico { width: 17px; height: 17px; color: #ff7b90; }
.result-row { display: flex; justify-content: space-between; align-items: baseline; margin: 34px 0 20px; gap: 12px; flex-wrap: wrap; }
.result-row #result-count { font-family: "Cormorant Garamond", var(--serif); font-size: 26px; color: var(--heading); }
.result-row small { color: var(--muted); }
.project-grid.big .p-media { aspect-ratio: 4 / 5; }
@media (min-width: 600px) {
  .filter-bar { grid-template-columns: repeat(3, 1fr); }
  .filter-bar .search { grid-column: span 2; }
}
@media (min-width: 900px) {
  .filter-wrap { margin-top: -48px; }
  .filter-bar { grid-template-columns: 1fr 1fr 1fr 1.4fr auto; padding: 16px; }
  .filter-bar .search { grid-column: auto; }
  .project-grid.big { grid-template-columns: repeat(2, 1fr); gap: 40px 48px; max-width: 1040px; margin: 0 auto; }
  .project-grid.big .p-card:nth-child(even) { margin-top: 90px; }
  .project-grid.big .p-body h3 { font-size: 32px; }
}

/* philosophy: alternating image + text */
.philo { display: grid; gap: 56px; }
.philo-row { display: grid; gap: 24px; align-items: center; }
.philo-img { border-radius: calc(var(--radius) + 4px); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.philo-img img { width: 100%; height: 100%; object-fit: cover; }
.philo-num { font-family: "Cormorant Garamond", serif; font-size: 72px; line-height: 1; color: var(--gold); opacity: 0.55; font-weight: 300; }
.philo-copy h3 { font-size: clamp(30px, 5vw, 46px); color: var(--heading); margin: 6px 0 12px; font-weight: 400; }
html[lang="en"] .philo-copy h3 { text-transform: uppercase; font-weight: 300; letter-spacing: 0.06em; }
.philo-copy p { color: var(--muted); font-size: 17px; max-width: 480px; }
@media (min-width: 900px) {
  .spotlight { grid-template-columns: 1fr 1.1fr; gap: 72px; }
  .spot-facts { grid-template-columns: repeat(4, 1fr); }
  .philo { gap: 100px; }
  .philo-row { grid-template-columns: 1.25fr 1fr; gap: 72px; }
  .philo-row.flip .philo-img { order: 2; }
  .philo-row.flip { grid-template-columns: 1fr 1.25fr; }
}

/* calculators */
.calc-card { background: var(--paper); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-lg); padding: 26px 22px; display: grid; gap: 24px; }
.calc-card h3 { font-size: clamp(26px, 4vw, 34px); color: var(--heading); }
.calc-card .sub { color: var(--muted); margin-top: 6px; }
.calc-fields { display: grid; gap: 14px; }
.range-row { display: flex; justify-content: space-between; align-items: center; }
.range-row b { color: var(--gold); font-size: 15px; }
input[type="range"] { width: 100%; accent-color: var(--gold); }
.calc-result { background: var(--navy-ink); color: #fff; border-radius: var(--radius); padding: 22px; display: grid; gap: 4px; align-content: start; }
.calc-big small { display: block; color: rgba(255, 255, 255, 0.65); font-size: 13px; }
.calc-big b { display: block; font-family: "Cormorant Garamond", var(--serif); font-size: clamp(36px, 6vw, 48px); color: var(--gold-soft); line-height: 1.1; margin: 4px 0 12px; font-weight: 500; }
.calc-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-light); font-size: 15px; }
.calc-row span { color: rgba(255, 255, 255, 0.7); }
.calc-note { font-size: 12.5px; color: var(--muted); }
@media (min-width: 900px) { .calc-card { grid-template-columns: 1.1fr 1fr; padding: 40px; gap: 40px; } .calc-card .calc-head { grid-column: 1 / -1; } }
@media (max-width: 899px) { .spot-stage { order: -1; aspect-ratio: 4 / 4.4; } }

/* ==========================================================================
   v5 — luxury buttons, arch motif, grid lines, refined panels (Tropical study)
   ========================================================================== */
:root { --gridline: rgba(22, 24, 58, 0.055); }
html[data-theme="dark"] { --gridline: rgba(255, 255, 255, 0.045); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 52px; padding: 0 28px; gap: 12px;
  font-size: 15.5px; font-weight: 600; letter-spacing: 0.01em;
  transition: color 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s, transform 0.25s var(--ease);
  --sweep: rgba(0, 0, 0, 0.18);
}
html[lang="en"] .btn { text-transform: uppercase; letter-spacing: 0.13em; font-size: 12.5px; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--sweep); transform: translateX(-101%); transition: transform 0.55s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn .ico-arrow {
  box-sizing: content-box; width: 15px; height: 15px; padding: 8px; margin-right: -16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.2); transform: rotate(-45deg);
  transition: transform 0.45s var(--ease), background 0.3s, color 0.3s;
}
.btn:hover .ico-arrow { transform: rotate(0deg); }
.btn-sm .ico-arrow { width: 13px; height: 13px; padding: 6px; margin-right: -10px; }
.btn-sm { min-height: 42px; padding: 0 20px; }

.btn-gold { background: linear-gradient(135deg, #c3a26a 0%, #a8874f 100%); color: #fff; --sweep: #0b0d2e; box-shadow: 0 14px 30px -14px rgba(168, 135, 79, 0.9); }
.btn-gold:hover { background: linear-gradient(135deg, #c3a26a 0%, #a8874f 100%); box-shadow: 0 18px 36px -16px rgba(11, 13, 46, 0.7); }
.btn-gold:hover .ico-arrow { background: var(--gold); }
.btn-navy { background: var(--navy); --sweep: var(--gold); }
.btn-navy:hover { background: var(--navy); }
.btn-ghost { background: transparent; border-color: var(--heading); color: var(--heading); --sweep: var(--heading); }
.btn-ghost:hover { color: var(--ivory); border-color: var(--heading); }
.btn-ghost .ico-arrow { background: var(--heading); color: var(--ivory); }
.btn-ghost:hover .ico-arrow { background: var(--gold); color: #fff; }
html[data-theme="dark"] .btn-ghost:hover { color: #0c0f2c; border-color: #fff; }
html[data-theme="dark"] .btn-ghost .ico-arrow { background: #fff; color: #0c0f2c; }
.btn-ghost-light {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.55); color: #fff; --sweep: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.08); color: var(--navy-ink); border-color: #fff; }
.btn-ghost-light:hover .ico-arrow { background: var(--navy-ink); color: #fff; }
.section-dark .btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: #fff; --sweep: #fff; }
.section-dark .btn-ghost:hover { color: var(--navy-ink); }
.section-dark .btn-ghost .ico-arrow { background: #fff; color: var(--navy-ink); }
.btn:active { transform: scale(0.97); }

/* glass orb button (Tropical "Explore interior") */
.btn-orb {
  position: absolute; z-index: 3; right: 22px; bottom: 22px; width: 118px; height: 118px; border-radius: 999px;
  display: grid; place-items: center; text-align: center; padding: 14px; color: #fff; font-weight: 600; font-size: 14px; line-height: 1.3;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 0.5s var(--ease), background 0.3s;
}
html[lang="en"] .btn-orb { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px; }
.btn-orb:hover { transform: scale(1.08) rotate(-4deg); background: rgba(176, 144, 90, 0.75); }
.btn-orb .ico { width: 18px; height: 18px; transform: rotate(-45deg); margin: 4px auto 0; }

/* slider controls, chips */
.slider-btn { width: 52px; height: 52px; transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s var(--ease); }
.slider-btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.slider-btn:active { transform: scale(0.94); }
.show-nav .slider-btn:hover, .spot-ctrl .slider-btn:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.chip { transition: all 0.3s var(--ease); }

/* ---------- Grid lines on light sections (Tropical) ---------- */
.section:not(.section-dark):not(.section-paper):not(.showcase),
.section-paper {
  background-image:
    linear-gradient(90deg, transparent calc(20% - 0.5px), var(--gridline) calc(20% - 0.5px), var(--gridline) calc(20% + 0.5px), transparent calc(20% + 0.5px)),
    linear-gradient(90deg, transparent calc(40% - 0.5px), var(--gridline) calc(40% - 0.5px), var(--gridline) calc(40% + 0.5px), transparent calc(40% + 0.5px)),
    linear-gradient(90deg, transparent calc(60% - 0.5px), var(--gridline) calc(60% - 0.5px), var(--gridline) calc(60% + 0.5px), transparent calc(60% + 0.5px)),
    linear-gradient(90deg, transparent calc(80% - 0.5px), var(--gridline) calc(80% - 0.5px), var(--gridline) calc(80% + 0.5px), transparent calc(80% + 0.5px));
}
/* fine diagonal lines on dark sections */
.section-dark, .calc-result, .facts-dark {
  background-image: repeating-linear-gradient(118deg, rgba(216, 195, 155, 0.045) 0 1px, transparent 1px 26px);
}

/* ---------- Arch motif ---------- */
.arch { border-radius: 999px 999px 18px 18px !important; }
/* arch frames removed — the arch is Tropical Homes' logo shape */
.hero-arch {
  display: none; position: absolute; z-index: 2; right: 7%; top: 18%; bottom: 0; width: min(30vw, 420px);
  border: 1px solid rgba(255, 255, 255, 0.35); border-bottom: 0; border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02));
  -webkit-backdrop-filter: blur(3px) saturate(120%); backdrop-filter: blur(3px) saturate(120%);
  pointer-events: none;
}
.hero-arch::after { content: ""; position: absolute; inset: 14px 14px 0; border: 1px solid rgba(216, 195, 155, 0.35); border-bottom: 0; border-radius: inherit; }
@media (min-width: 1100px) { .hero-arch { display: block; } }

/* ---------- Project card hover badge ---------- */
.p-go {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 46px; height: 46px; border-radius: 999px;
  display: grid; place-items: center; background: var(--gold); color: #fff;
  opacity: 0; transform: scale(0.6) rotate(-45deg); transition: all 0.45s var(--ease);
}
.p-go .ico { width: 18px; height: 18px; }
.p-card:hover .p-go { opacity: 1; transform: scale(1) rotate(-45deg); }
.p-card:hover .p-media .img-note { opacity: 0; }
.ribbon {
  position: absolute; z-index: 2; left: -44px; top: 22px; width: 170px; padding: 6px 0; text-align: center; transform: rotate(-45deg);
  background: #c0392b; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5);
}

/* split cards: circular arrow badge instead of a big icon */
.split-card .big-ico { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; background: var(--gold); color: #fff; opacity: 1; transition: transform 0.45s var(--ease); }
.split-card .big-ico .ico { width: 22px; height: 22px; }
.split-card:hover .big-ico { transform: rotate(-45deg) scale(1.06); }

/* ---------- Project page: "At a glance" dark panel (Tropical) ---------- */
.facts-table {
  background: var(--navy-ink); gap: 0; border-radius: calc(var(--radius) + 4px); padding: 12px 8px;
  background-image: repeating-linear-gradient(118deg, rgba(216, 195, 155, 0.05) 0 1px, transparent 1px 26px);
}
.facts-table div { background: transparent; padding: 18px 20px; border-bottom: 1px solid var(--line-light); }
.facts-table small { color: rgba(255, 255, 255, 0.55); font-size: 12.5px; letter-spacing: 0.04em; }
.facts-table b { display: block; margin-top: 4px; font-family: "Cormorant Garamond", var(--serif); font-weight: 500; font-size: 24px; color: #fff; line-height: 1.25; }
html[lang="bn"] .facts-table b { font-family: var(--serif); font-size: 20px; }
.pd-dir { margin-top: 14px; }

/* ---------- Footer: big phone lines ---------- */
.foot-line small { display: block; color: rgba(255, 255, 255, 0.5); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 14px; }
html[lang="bn"] .foot-line small { letter-spacing: 0.02em; font-size: 13px; text-transform: none; }
.foot-line a { display: block; font-family: "Cormorant Garamond", serif; font-size: clamp(26px, 3vw, 34px); color: #fff; line-height: 1.15; }
.foot-line a:hover { color: var(--gold-soft); }

/* ---------- News card date (Tropical) ---------- */
.news-date { display: flex; align-items: end; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.news-date b { font-family: "Cormorant Garamond", serif; font-size: 52px; line-height: 0.9; color: var(--gold); font-weight: 400; }
.news-date small { text-align: right; color: var(--gold); font-size: 12px; line-height: 1.4; }

/* partners strip (shown when config.partners has logos) */
.partners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.partners a, .partners span { display: grid; place-items: center; height: 96px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.partners img { max-height: 56px; width: auto; filter: grayscale(1); opacity: 0.8; transition: all 0.3s; }
.partners a:hover img { filter: none; opacity: 1; }
@media (min-width: 900px) { .partners { grid-template-columns: repeat(5, 1fr); } }
.split-card .big-ico { transform: rotate(-45deg); }
.split-card:hover .big-ico { transform: rotate(0deg) scale(1.06); }
.foot-line a { white-space: nowrap; font-size: clamp(22px, 2.3vw, 32px); }


/* ==========================================================================
   v6 — champagne palette, gold-gradient type, refined typography
   ========================================================================== */
html[data-theme="dark"] {
  --ivory: #0a0c26;
  --paper: #12153b;
  --sand: #0f1234;
  --heading: #fbf6ea;
  --ink: #ebe8f2;
  --muted: #a8a7c2;
  --navy-ink: #06071c;
}

/* gold-gradient words */
.gold-text, .portal h2 em, .slide-title em, .intro-quote span, .section-head h2 em, .page-hero h1 em, .spot-title em, .cta-photo h2 em, .show-title em, .philo-copy h3 em {
  font-style: normal; background: var(--gold-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.slide.on .slide-title em { animation: goldshine 6s ease-in-out infinite; }
@keyframes goldshine { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* headings: lighter, airier */
.slide-title { font-weight: 300; letter-spacing: -0.005em; }
html[lang="bn"] .slide-title { font-weight: 400; }
.section-head h2 { font-weight: 400; letter-spacing: -0.01em; }
html[lang="en"] .section-head h2, html[lang="en"] .page-hero h1, html[lang="en"] .cta-photo h2, html[lang="en"] .show-title { font-weight: 300; letter-spacing: 0.03em; }
.intro-quote { font-weight: 300; }
html[lang="bn"] .intro-quote { font-weight: 400; }

/* eyebrows: champagne with a fine rule */
.eyebrow { color: var(--gold); }
.eyebrow::before, .section-head.center .eyebrow::after { height: 1px; background: linear-gradient(90deg, transparent, currentColor); width: 34px; }
.section-head.center .eyebrow::after { background: linear-gradient(90deg, currentColor, transparent); }
.hero .eyebrow, .slide-copy .eyebrow, .page-hero .eyebrow, .split-card .eyebrow, .portal .eyebrow, .cta-photo .eyebrow { color: var(--gold-soft); }

/* gold buttons in champagne */
.btn-gold { background: linear-gradient(120deg, #a8834a 0%, #c9a86c 45%, #dcc28e 60%, #b18c52 100%); background-size: 160% 100%; transition: background-position 0.8s var(--ease), color 0.4s, box-shadow 0.4s, transform 0.25s var(--ease); }
.btn-gold:hover { background: linear-gradient(120deg, #a8834a 0%, #c9a86c 45%, #dcc28e 60%, #b18c52 100%); background-size: 160% 100%; background-position: 100% 0; }

/* lead paragraphs a touch larger and softer */
.section-head p, .intro-body, .prose, .spot-text, .philo-copy p { line-height: 1.8; }
.hero-lead, .slide-sub { line-height: 1.75; }

/* quote mark accent on the intro */
.intro-quote { position: relative; }
.intro-quote::before {
  content: "“"; position: absolute; left: -6px; top: -58px; font-family: "Cormorant Garamond", serif; font-size: 120px; line-height: 1;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.6;
}

/* selection colour */
::selection { background: rgba(201, 168, 108, 0.35); color: inherit; }
.intro-quote { isolation: isolate; }
.intro-quote::before { top: -18px; left: -18px; font-size: 104px; opacity: 0.3; z-index: -1; }

/* ==========================================================================
   v7 — Dubai study (Emaar, OMNIYAT, Sobha, Ellington): sharp buttons,
   hero search, stacked project bands, concierge
   ========================================================================== */
:root { --radius: 6px; --radius-sm: 4px; }

/* ---------- Sharp, tailored buttons ---------- */
.btn { border-radius: 2px; min-height: 54px; padding: 0 30px; letter-spacing: 0.02em; }
html[lang="en"] .btn { letter-spacing: 0.18em; font-size: 11.5px; font-weight: 600; }
.btn-sm { min-height: 44px; padding: 0 22px; }
.btn .ico-arrow { background: transparent !important; padding: 0; margin-right: 0; width: 22px; height: 16px; transform: none; }
.btn:hover .ico-arrow { transform: translateX(5px); }
.btn-gold { box-shadow: 0 18px 34px -20px rgba(154, 120, 64, 0.95); }
.btn-ghost-light { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.6); }

/* hairline text link: —— DISCOVER MORE */
.line-link { display: inline-flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: inherit; }
html[lang="en"] .line-link { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11.5px; }
.line-link::before { content: ""; width: 44px; height: 1px; background: currentColor; transition: width 0.5s var(--ease); }
a:hover .line-link::before, .line-link:hover::before { width: 72px; }

/* round icon controls become thin long arrows in the hero (OMNIYAT) */
.hero-slider .slider-btn { border: 0; background: none; width: 58px; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-slider .slider-btn:hover { background: none; color: var(--gold-soft); }
.hero-slider .slider-btn .ico { width: 34px; height: 20px; stroke-width: 1.2; }

/* ---------- Hero glass search (Emaar) ---------- */
.hero-search { display: none; }
@media (min-width: 900px) {
  .hero-search {
    display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)) auto; align-items: stretch;
    background: rgba(9, 11, 36, 0.38); border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
    min-width: min(760px, 62vw);
  }
  .hero-search label { display: grid; padding: 12px 22px; border-right: 1px solid rgba(255, 255, 255, 0.14); cursor: pointer; }
  .hero-search small { font-size: 11px; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.06em; }
  html[lang="en"] .hero-search small { text-transform: uppercase; letter-spacing: 0.2em; font-size: 10px; }
  .hero-search select {
    appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: #fff; font: inherit; font-size: 15px; padding: 2px 22px 0 0; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold-soft) 50%), linear-gradient(135deg, var(--gold-soft) 50%, transparent 50%);
    background-position: calc(100% - 9px) 11px, calc(100% - 4px) 11px; background-size: 5px 5px; background-repeat: no-repeat;
  }
  .hero-search select option { color: #16183a; }
  .hero-search button {
    display: inline-flex; align-items: center; gap: 10px; padding: 0 30px; border: 0; cursor: pointer; color: #fff; font-weight: 600;
    background: linear-gradient(120deg, #a8834a 0%, #c9a86c 50%, #b18c52 100%); transition: filter 0.3s;
  }
  html[lang="en"] .hero-search button { text-transform: uppercase; letter-spacing: 0.2em; font-size: 11.5px; }
  .hero-search button:hover { filter: brightness(1.08); }
  .hero-bar .hero-cta { display: none; }
}

/* scroll cue */
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 14px; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.6); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (min-width: 900px) { .scroll-cue { display: flex; } .slider-dots { bottom: 26px; } }

/* ---------- Stacked project bands (Emaar "new launches") ---------- */
.launches-head { padding: 96px 0 56px; }
.launches-head .section-head { margin-bottom: 0; }
.launches { position: relative; background: var(--navy-ink); }
.launch {
  position: sticky; top: var(--header-h); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  height: calc(100svh - var(--header-h) - var(--tabbar-h)); min-height: 520px; max-height: 900px; color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.launch > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); transition: transform 1.6s var(--ease); }
.launch:hover > img { transform: scale(1); }
.launch::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 7, 28, 0.15) 0%, rgba(6, 7, 28, 0.15) 40%, rgba(6, 7, 28, 0.88) 100%), linear-gradient(90deg, rgba(6, 7, 28, 0.55), transparent 65%); }
.launch-copy { padding-bottom: 64px; display: grid; justify-items: start; gap: 6px; }
.launch-index { font-family: "Cormorant Garamond", serif; font-size: 18px; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.6); margin-bottom: 10px; }
.launch .eyebrow { color: var(--gold-soft); }
.launch h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 9vw, 112px); line-height: 1; color: #fff; margin: 8px 0 6px; }
html[lang="bn"] .launch h3 { font-weight: 400; line-height: 1.2; font-size: clamp(42px, 8vw, 96px); }
.launch-loc { font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
html[lang="bn"] .launch-loc { letter-spacing: 0.04em; font-size: 16px; text-transform: none; }
.launch-meta { font-size: 16px; color: rgba(255, 255, 255, 0.75); }
.launch-meta i { font-style: normal; margin: 0 8px; color: rgba(255, 255, 255, 0.4); }
.launch .line-link { margin-top: 22px; color: #fff; }
.launch .fav-btn { top: 22px; right: 22px; }
.launch .img-note { position: absolute; right: 22px; bottom: 22px; }
.launches-foot { padding: 56px 0 80px; }
@media (max-width: 899px) {
  .launch { height: 76svh; min-height: 460px; }
  .launch-copy { padding-bottom: 44px; }
}

/* ---------- Concierge ---------- */
.concierge {
  position: fixed; z-index: 85; right: 16px; bottom: calc(var(--tabbar-h) + 84px); width: min(360px, calc(100vw - 32px));
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(6, 7, 28, 0.6); opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none;
  transition: opacity 0.35s, transform 0.45s var(--ease);
}
.concierge.open { opacity: 1; transform: none; pointer-events: auto; }
.cg-head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; background: var(--navy-ink); color: #fff;
  background-image: repeating-linear-gradient(118deg, rgba(216, 195, 155, 0.05) 0 1px, transparent 1px 26px); }
.cg-logo { width: 42px; height: 42px; border-radius: 10px; background: #fff; display: grid; place-items: center; flex: none; }
.cg-logo img { height: 32px; }
.cg-head b { display: block; font-family: var(--serif); font-weight: 500; font-size: 18px; }
.cg-head small { color: var(--gold-soft); font-size: 12.5px; }
.cg-close { margin-left: auto; width: 36px; height: 36px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: none; color: #fff; display: grid; place-items: center; cursor: pointer; }
.cg-body { padding: 18px 16px 8px; }
.cg-bubble { background: var(--ivory); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 12px 14px; font-size: 15px; }
.cg-opts { display: grid; gap: 8px; margin-top: 14px; }
.cg-opts button, .cg-opts a {
  text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: transparent; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--heading); transition: all 0.25s;
}
.cg-opts button:hover, .cg-opts a:hover { border-color: var(--gold); background: rgba(201, 168, 108, 0.1); transform: translateX(3px); }
.cg-opts a { color: var(--gold); border-style: dashed; }
.cg-foot { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); margin-top: 10px; }
.cg-foot a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; font-size: 14px; font-weight: 600; color: var(--heading); }
.cg-foot a + a { border-left: 1px solid var(--line); }
.cg-foot a:hover { color: var(--gold); }
.cg-foot .ico { width: 17px; height: 17px; }
.fab-wa.on { background: var(--navy-ink); box-shadow: 0 12px 28px -10px rgba(6, 7, 28, 0.8); }
@media (min-width: 900px) { .concierge { right: 28px; bottom: 96px; } }

/* mixed type for English headings: The art <i>of</i> living (Sobha) */
html[lang="en"] .section-head h2 i, html[lang="en"] .show-title i { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 400; text-transform: lowercase; letter-spacing: 0; }
.concierge { display: flex; flex-direction: column; max-height: calc(100svh - var(--header-h) - var(--tabbar-h) - 104px); }
.cg-body { overflow-y: auto; }
@media (min-width: 900px) { .concierge { max-height: calc(100svh - var(--header-h) - 120px); } }
.launch .img-note { top: 30px; bottom: auto; right: 74px; }

.menu-account { display: block; text-align: center; font-size: 14px; color: var(--gold-soft); padding: 6px 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(216, 195, 155, 0.4); }

/* ERP-driven project details */
.unit-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.ut-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 15px; }
.ut-row:first-child { border-top: 0; }
.ut-head { background: var(--navy-ink); color: rgba(255, 255, 255, 0.75); font-size: 12.5px; letter-spacing: 0.06em; }
html[lang="en"] .ut-head { text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; }
.ut-yes { color: #1f7a4d; }
.ut-no { color: var(--muted); font-weight: 600; }
html[data-theme="dark"] .ut-yes { color: #7fd6a6; }
.milestones { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.milestones li { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); isolation: isolate; }
.milestones li i { position: absolute; left: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
.milestones li b { display: block; color: var(--heading); font-size: 15px; }
.milestones li small { color: var(--muted); font-size: 12.5px; }
.milestones .ms-pct { font-family: "Cormorant Garamond", serif; font-size: 22px; color: var(--gold); }
.milestones li.done .ms-pct { color: #1f7a4d; }
.pd-specs { color: var(--muted); font-size: 16.5px; line-height: 1.8; white-space: normal; }
.erp-about { color: var(--muted); }

/* ---------- Floating buttons: login and call above WhatsApp, names slide out ---------- */
.fab-stack {
  position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + 16px); z-index: 55;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.fab-stack .fab-wa { position: relative; right: auto; bottom: auto; }
.fab-mini {
  position: relative; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: var(--navy-ink, #0b0d2e); color: var(--gold, #c9a86c); border: 1px solid rgba(201, 168, 108, 0.55);
  box-shadow: 0 10px 24px -10px rgba(6, 7, 28, 0.7); transition: transform 0.25s var(--ease), opacity 0.25s, background 0.25s;
}
.fab-mini:hover { transform: translateY(-2px) scale(1.05); background: var(--gold, #c9a86c); color: #0b0d2e; }
.fab-mini .ico { width: 20px; height: 20px; }
.fab-call { display: none; }                 /* phones already have "কল" in the bottom bar */
.fab-tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(8px, -50%); white-space: nowrap;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  background: var(--navy-ink, #0b0d2e); color: #fff; border: 1px solid rgba(201, 168, 108, 0.45);
  box-shadow: 0 10px 24px -12px rgba(6, 7, 28, 0.7); opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.fab-stack a:hover .fab-tip, .fab-stack a:focus-visible .fab-tip,
.fab-stack.hint .fab-tip { opacity: 1; transform: translate(0, -50%); }
.fab-stack.hint a:nth-child(2) .fab-tip { transition-delay: 0.15s; }
.fab-stack.hint a:nth-child(3) .fab-tip { transition-delay: 0.3s; }
.fab-stack:has(.fab-wa.on) .fab-mini, .fab-stack:has(.fab-wa.on) .fab-tip { opacity: 0; pointer-events: none; }
html[data-theme="dark"] .fab-mini, html[data-theme="dark"] .fab-tip { background: #14173d; }
@media (min-width: 900px) {
  .fab-stack { right: 24px; bottom: 24px; }
  .fab-call { display: grid; }
}

/* back arrow, every page but home (same rule as the ERP: back if you came from this site, else the parent page) */
.back-btn { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; flex: none; margin-right: 10px;
  border: 1px solid var(--line); background: var(--chip); color: var(--ink); cursor: pointer; transition: border-color 0.25s, color 0.25s; }
.back-btn:hover { border-color: var(--gold); color: var(--gold); }
.back-btn .ico { width: 18px; height: 18px; }
html[data-theme="dark"] .back-btn { background: rgba(255, 255, 255, 0.06); }
@media (max-width: 560px) { .back-btn ~ .brand .brand-text { display: none; } }   /* phones: arrow + logo, no overflow */

/* ---------- Footer v2: call-to-action band, icon links, contact cards ---------- */
.footer-cta {
  display: grid; gap: 22px; align-items: center; padding: 30px 28px; margin-bottom: 56px; border-radius: var(--radius);
  border: 1px solid rgba(201, 168, 108, 0.35); background: linear-gradient(120deg, rgba(201, 168, 108, 0.14), rgba(255, 255, 255, 0.03) 60%);
  position: relative; overflow: hidden;
}
.footer-cta::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--gold-soft), var(--gold)); }
.fc-kicker { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); font-weight: 700; }
html[lang="bn"] .fc-kicker { letter-spacing: 0.04em; font-size: 14px; text-transform: none; }
.footer-cta h3 { color: #fff; font-size: clamp(24px, 3vw, 34px); font-weight: 500; margin-top: 8px; line-height: 1.25; }
.fc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fc-actions .btn { gap: 8px; }
.fc-actions .ico { width: 17px; height: 17px; }
.footer-badges { margin-top: 20px !important; gap: 10px !important; }
.footer-badges li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.8); }
.footer-badges .ico { width: 18px; height: 18px; color: var(--gold-soft); flex: none; }
.footer-links a { display: inline-flex; align-items: center; gap: 10px; transition: color 0.25s, transform 0.25s var(--ease); }
.footer-links a .ico { width: 15px; height: 15px; color: var(--gold-soft); opacity: 0.85; flex: none; }
.footer-links a:hover { transform: translateX(4px); color: #fff; }
.footer-links a:hover .ico { opacity: 1; }
.footer-contact { gap: 16px !important; }
.footer-contact li { display: flex; gap: 14px; align-items: flex-start; line-height: 1.5; }
.footer-contact .fi { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; flex: none;
  border: 1px solid rgba(201, 168, 108, 0.45); background: rgba(201, 168, 108, 0.08); color: var(--gold-soft); }
.footer-contact .fi .ico { width: 17px; height: 17px; }
.footer-contact small { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-bottom: 2px; }
.footer-contact a { color: #fff; word-break: break-word; }
.footer-contact .fc-phone { font-family: "Cormorant Garamond", serif; font-size: 28px; line-height: 1.1; }
.footer-contact .fc-big a { font-family: "Cormorant Garamond", serif; font-size: 40px; }
.footer-contact a:hover { color: var(--gold-soft); }
.fb-links { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.fb-links a:hover { color: #fff; }
.fb-links em { font-style: normal; color: var(--gold-soft); }
@media (min-width: 900px) {
  .footer-cta { grid-template-columns: 1fr auto; padding: 34px 40px; }
  .footer-bottom { padding-right: 90px; }      /* clear of the floating buttons */
}
.footer-contact a[href^="mailto"] { font-size: 14px; word-break: normal; overflow-wrap: anywhere; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.25fr 0.8fr 1.1fr 1.45fr; gap: 40px; } }

/* ---------- Bangla typography (Tiro Bangla headings, Anek Bangla text) ---------- */
html[lang="bn"] body { line-height: 1.75; }
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3 { font-weight: 400; }
html[lang="bn"] .section-head h2, html[lang="bn"] .page-hero h1, html[lang="bn"] .slide-title { line-height: 1.3; letter-spacing: -0.005em; }
html[lang="bn"] .btn, html[lang="bn"] .main-nav a { font-weight: 500; letter-spacing: 0.01em; }
html[lang="bn"] p { font-weight: 400; }

/* ---------- Scroll animations (features.js adds the classes; nothing hides if JS is off) ---------- */
.sa-rise { clip-path: inset(0 0 100% 0); transform: translateY(28px); transition: clip-path 1.1s var(--ease), transform 1.1s var(--ease); }
.sa-rise.sa-in { clip-path: inset(-10% -5% -20% -5%); transform: none; }
.sa-line::before { width: 0 !important; transition: width 0.9s 0.2s var(--ease); }
.sa-line.sa-in::before { width: 28px !important; }
.sa-card { opacity: 0; transform: translateY(34px) scale(0.985); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); transition-delay: var(--sa-d, 0s); }
.sa-card.sa-in { opacity: 1; transform: none; }
.page-hero.photo > img.bg, .cta-photo > img, .site-footer > img.bg { will-change: transform; transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) { .sa-rise, .sa-card { clip-path: none; opacity: 1; transform: none; transition: none; } }
.img-missing { background: linear-gradient(135deg, #0b0d2e, #1b1f55) !important; position: relative; }
.img-missing::after { content: "BHL"; position: absolute; inset: 0; display: grid; place-items: center; font-family: "Cormorant Garamond", serif;
  font-size: 28px; letter-spacing: 0.3em; color: rgba(201, 168, 108, 0.45); pointer-events: none; }
.map-box { position: relative; } .map-go { position: absolute; left: 14px; bottom: 14px; box-shadow: var(--shadow-lg); }
.nf-hero { min-height: 72svh; display: grid; align-items: center; } .nf-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- A walk through the building (sticky scroll story, idea from Dubai tower sites) ---------- */
.journey { position: relative; height: 500vh; background: #05061a; }
.jr-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; color: #fff; isolation: isolate; }
.jr-media, .jr-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.jr-img { object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.1s var(--ease); will-change: transform, opacity; }
.jr-img.on { opacity: 1; }
.jr-shade { position: absolute; inset: 0; background: linear-gradient(270deg, rgba(6, 7, 28, 0.6), transparent 26%), linear-gradient(90deg, rgba(6, 7, 28, 0.85), rgba(6, 7, 28, 0.3) 62%, rgba(6, 7, 28, 0.1)), linear-gradient(0deg, rgba(6, 7, 28, 0.65), transparent 45%); }
.jr-copy { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: calc(var(--tabbar-h) + 10vh); }
.jr-copy .eyebrow { color: var(--gold-soft); }
.jr-steps { position: relative; min-height: 230px; margin-top: 18px; }
.jr-step { position: absolute; left: 0; right: 0; bottom: 0; max-width: 640px; opacity: 0; transform: translateY(36px); transition: opacity 0.6s var(--ease), transform 0.9s var(--ease); }
.jr-step.on { opacity: 1; transform: none; transition-delay: 0.15s; }
.jr-step h2 { font-size: clamp(34px, 6.4vw, 76px); color: #fff; font-weight: 400; }
.jr-step p { margin-top: 14px; font-size: 18px; color: rgba(255, 255, 255, 0.8); max-width: 520px; }
.jr-rail { position: absolute; right: max(16px, 4vw); top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: auto auto; gap: 14px 18px; }
.jr-count { grid-column: 1 / -1; font-family: "Cormorant Garamond", serif; font-weight: 500; font-size: 22px; color: var(--gold-soft); letter-spacing: 0.08em; }
.jr-track { width: 1px; height: 260px; background: rgba(255, 255, 255, 0.22); position: relative; }
.jr-fill { position: absolute; inset: 0; background: var(--gold-soft); transform-origin: top; transform: scaleY(0); }
.jr-rail ol { list-style: none; margin: 0; padding: 0; height: 260px; display: flex; flex-direction: column; justify-content: space-between; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
html[lang="bn"] .jr-rail ol { letter-spacing: 0.02em; font-size: 14px; text-transform: none; }
.jr-rail li { display: flex; align-items: center; gap: 10px; transition: color 0.4s; }
.jr-rail li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; border: 1px solid currentColor; transition: all 0.4s; }
.jr-rail li.on { color: #fff; }
.jr-rail li.on::before { background: var(--gold-soft); border-color: var(--gold-soft); transform: scale(1.4); }
.jr-note { position: absolute; left: 16px; top: calc(var(--header-h) + 14px); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 699px) {
  .journey { height: 420vh; }
  .jr-rail { top: calc(var(--header-h) + 14px); bottom: auto; transform: none; grid-template-columns: auto; justify-items: end; }
  .jr-rail ol { display: none; }
  .jr-track { height: 120px; }
  .jr-count { font-size: 18px; }
  .jr-step { max-width: calc(100% - 60px); }
  .jr-step p { font-size: 16px; }
}
@media (min-width: 900px) { .jr-copy { padding-bottom: 14vh; } .jr-note { left: auto; right: 24px; top: auto; bottom: 24px; } }

/* ---------- Photos drifting sideways, gold corner brackets ---------- */
.drift { padding: 90px 0 120px; overflow: hidden; }
.drift .section-head h2 { color: #fff; }
.ds-row { display: flex; gap: 22px; margin-top: 46px; padding-left: max(16px, calc((100vw - 1200px) / 2)); will-change: transform; }
.ds-card { flex: none; width: clamp(210px, 24vw, 330px); aspect-ratio: 3 / 4.2; margin: 0; position: relative; overflow: hidden; border-radius: 4px; background: #11143a; }
.ds-card:nth-child(even) { margin-top: 64px; }
.ds-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter 0.6s; filter: saturate(0.92); }
.ds-card:hover img { transform: scale(1.07); filter: none; }
.br { position: absolute; width: 28px; height: 28px; border: 0 solid var(--gold-soft); opacity: 0; transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); pointer-events: none; }
.br-a { top: 14px; left: 14px; border-width: 1px 0 0 1px; transform: translate(10px, 10px); }
.br-b { bottom: 14px; right: 14px; border-width: 0 1px 1px 0; transform: translate(-10px, -10px); }
.ds-card:hover .br, .ds-card.sa-in .br { opacity: 1; transform: none; }

/* ---------- Titles rise word by word ---------- */
.sa-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.6em 0.06em 0.3em; margin: -0.6em -0.06em -0.3em; }   /* room for Bangla i-kar hooks and u-kar tails */
.sa-words .w > span { display: inline-block; transform: translateY(110%); transition: transform 0.95s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.sa-words.sa-in .w > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .sa-words .w > span { transform: none; transition: none; } .jr-img, .jr-step { transition: none; } }
/* gold words: widen the painted area so Bangla i-kar hooks and u-kar tails above/below the line stay gold, not cut off */
.gold-text, .portal h2 em, .slide-title em, .intro-quote span, .section-head h2 em, .page-hero h1 em, .spot-title em, .cta-photo h2 em, .show-title em, .philo-copy h3 em {
  padding: 0.45em 0.08em 0.25em; margin: -0.45em -0.08em -0.25em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sa-words em .w > span, .sa-words .gold-text .w > span { background: var(--gold-grad); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  padding: 0.45em 0.06em 0.25em; margin: -0.45em -0.06em -0.25em; }

/* public website: notes for the owner and unfilled placeholders are not shown (they show on this computer for the admin) */
.is-live .ph, .is-live .ph-block:not(#no-results) { display: none !important; }
.is-live .map-box:not(:has(iframe)) { display: none; }

/* anything marked hidden stays hidden, whatever its own display rule */
[hidden] { display: none !important; }


/* ---------- Project bands: never see-through, long names fit ---------- */
.launch { background: radial-gradient(120% 90% at 85% 10%, #1b2066 0%, #0b0d2e 55%, #06071c 100%); }
.launch.no-img::before { content: ""; position: absolute; right: -3%; top: 10%; width: min(44vw, 520px); aspect-ratio: 1; z-index: -1;
  background: url(../brand/logo-mark.png) center / contain no-repeat; opacity: 0.07; filter: grayscale(1) brightness(4); }
.launch h3.long { font-size: clamp(36px, 5.6vw, 82px); line-height: 1.05; max-width: 16ch; }
html[lang="bn"] .launch h3.long { font-size: clamp(34px, 5.2vw, 76px); line-height: 1.15; }
.launch h3 { text-wrap: balance; }

/* ---------- English: lighter, finer, gold words in italic ---------- */
html[lang="en"] .section-head h2, html[lang="en"] .slide-title, html[lang="en"] .show-title, html[lang="en"] .spot-title,
html[lang="en"] .cta-photo h2, html[lang="en"] .jr-step h2, html[lang="en"] .launch h3, html[lang="en"] .mf-text, html[lang="en"] .portal h2 {
  font-weight: 400; letter-spacing: -0.012em; }
html[lang="en"] .section-head h2 em, html[lang="en"] .slide-title em, html[lang="en"] .cta-photo h2 em, html[lang="en"] .show-title em,
html[lang="en"] .spot-title em, html[lang="en"] .portal h2 em, html[lang="en"] .page-hero h1 em { font-style: italic; font-weight: 400; }
html[lang="en"] .eyebrow { letter-spacing: 0.26em; }
html[lang="bn"] .launch h3, html[lang="bn"] .spot-title, html[lang="bn"] .jr-step h2 { word-spacing: 0.04em; }

/* ---------- Menu: a panel over half the page, the website stays visible behind ---------- */
.drawer-panel { width: min(90vw, 560px); max-width: none; box-shadow: -40px 0 90px -30px rgba(0, 0, 0, 0.7); border-left: 1px solid rgba(201, 168, 108, 0.22); }
.drawer-backdrop { background: rgba(6, 7, 28, 0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer; }
@media (min-width: 900px) {
  .drawer-panel { width: 50vw; min-width: 520px; max-width: 780px; grid-template-columns: 1fr; }
  .menu-aside { display: none; }
  .menu-main { padding: 30px 48px 36px; }
}

/* ---------- Scroll-stop: the promise lights up word by word ---------- */
.manifesto { position: relative; height: 240vh; background: var(--paper, #fbf9f4); }
html[data-theme="dark"] .manifesto { background: #0a0c26; }
.mf-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: var(--header-h); }
.mf-text { font-family: var(--serif); font-size: clamp(30px, 5.2vw, 72px); line-height: 1.22; color: var(--heading); max-width: 1120px; margin: 22px 0 0; }
html[lang="bn"] .mf-text { line-height: 1.38; font-size: clamp(28px, 4.8vw, 64px); }
.mf-w { opacity: 0.13; transition: opacity 0.45s var(--ease), color 0.45s; }
.mf-w.on { opacity: 1; }
.mf-w.on:nth-child(4n + 3) { color: var(--gold); }

/* ---------- Scroll-stop: photos slide sideways while the screen holds ---------- */
.drift { padding: 0; overflow: clip; }   /* clip, not hidden: hidden would stop the pinned part from sticking */
.ds-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  padding-top: var(--header-h); padding-bottom: var(--tabbar-h); }
.ds-row { margin-top: 36px; }
.ds-card { width: clamp(190px, min(24vw, 32svh), 320px); }
.ds-card:nth-child(even) { margin-top: 44px; }
.drift.calm { height: auto !important; }
.drift.calm .ds-sticky { position: static; height: auto; padding: 90px 0; }
.drift.calm .ds-row { overflow-x: auto; transform: none !important; }
html[lang="bn"] .mf-text { word-spacing: 0.06em; }

/* ---------- Marquee: a slim, fine band ---------- */
.marquee { border-top: 1px solid rgba(201, 168, 108, 0.3); border-bottom: 1px solid rgba(201, 168, 108, 0.16); }
.marquee-track { animation-duration: 52s; }
.marquee span { padding: 11px 20px; gap: 40px; font-family: var(--sans); font-weight: 400; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(214, 189, 142, 0.92); }
html[lang="bn"] .marquee span { font-size: clamp(14px, 1.25vw, 16px); letter-spacing: 0.06em; text-transform: none; }
html[lang="en"] .marquee span { font-size: 12px; letter-spacing: 0.32em; }
.marquee span::after { content: "◆"; font-size: 6px; color: var(--gold); opacity: 0.8; }

/* ---------- 3D: the hero tilts back as the page moves on ---------- */
.hero-slider { transform-origin: 50% 100%; will-change: transform; }
main { perspective: none; }

/* ---------- 3D: cards rise from a tilt ---------- */
.sa-card { transform: perspective(1200px) rotateX(14deg) translateY(44px) scale(0.98); transform-origin: 50% 0; }
.sa-card.sa-in { transform: none; }

/* ---------- 3D, scroll-stop: ring of photos ---------- */
.ring3d { position: relative; height: 300vh; }
.rg-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--header-h); padding-bottom: var(--tabbar-h); }
.rg-head { margin-bottom: 0; text-align: center; }
.rg-head h2 { color: #fff; }
.rg-stage { position: relative; flex: 1; min-height: 300px; perspective: 1500px; perspective-origin: 50% 40%; }
.rg-ring { --w: clamp(150px, 17vw, 240px); --r: calc(var(--w) * 1.75); position: absolute; left: 50%; top: 50%; width: var(--w); aspect-ratio: 3 / 4;
  margin: calc(var(--w) * -0.666) 0 0 calc(var(--w) * -0.5); transform-style: preserve-3d; will-change: transform; }
.rg-card { position: absolute; inset: 0; margin: 0; border-radius: 6px; overflow: hidden; backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  outline: 1px solid rgba(201, 168, 108, 0.25); outline-offset: -1px; }
.rg-card img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 699px) { .ring3d { height: 260vh; } .rg-ring { --w: 132px; --r: calc(var(--w) * 1.65); } }
@media (prefers-reduced-motion: reduce) { .ring3d { height: auto; } .rg-sticky { position: static; height: 560px; } }

/* ---------- Giant faint numbers behind section titles (home) ---------- */
.big-num { position: absolute; z-index: -1; top: -0.42em; left: 50%; transform: translate(-50%, var(--py, 0px)); pointer-events: none; user-select: none;
  font: 300 clamp(130px, 19vw, 260px) / 1 "Cormorant Garamond", serif; color: transparent; -webkit-text-stroke: 1px rgba(184, 149, 92, 0.32); will-change: transform; }
.section-head.has-num { position: relative; isolation: isolate; }
.section-head.has-num.left .big-num { left: -0.04em; transform: translate(0, var(--py, 0px)); }
.section-dark .big-num, .showcase .big-num { -webkit-text-stroke-color: rgba(214, 189, 142, 0.22); }
.big-num { -webkit-text-stroke: 1.2px rgba(184, 149, 92, 0.48); }
.section-dark .big-num, .showcase .big-num, html[data-theme="dark"] .big-num { -webkit-text-stroke-color: rgba(214, 189, 142, 0.38); }

/* ---------- 3D on every page ---------- */
.page-hero { transform-origin: 50% 100%; will-change: transform; }
.figure.reveal { transform: perspective(1400px) rotateY(-16deg); transform-origin: 0 50%; transition: opacity 1s var(--ease), transform 1.3s var(--ease); }
.figure.reveal.in { transform: none; }
.p-card, .news-card, .quick-card, .mv-card, .calc-card, .split-card { transform-style: preserve-3d; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .figure.reveal { transform: none; } }

/* ---------- Hover fixes: text must stay readable on every button ---------- */
/* footer links turn white on hover — but not the light glass buttons, whose hover background is white */
.site-footer .btn-ghost-light:hover, .site-footer .btn-ghost-light:focus-visible, .drawer .btn-ghost-light:hover { color: var(--navy-ink); }
.site-footer .btn-gold:hover { color: #fff; }
/* navy buttons sweep to gold: dark text on gold reads better than white */
.btn-navy:hover, .btn-navy:focus-visible { color: #0b0d2e; }
/* round login / call buttons in night mode */
html[data-theme="dark"] .fab-mini:hover { background: var(--gold); color: #0b0d2e; border-color: var(--gold); }
/* concierge links: a deeper gold on light backgrounds */
.cg-opts a { color: #8a6a34; }
.cg-foot a:hover { color: #8a6a34; }
html[data-theme="dark"] .cg-opts a, html[data-theme="dark"] .cg-foot a:hover { color: var(--gold-soft); }
/* containers with oversized photos (parallax, zoom) must not be scrollable sideways by Tab / find-in-page:
   "clip" cuts like "hidden" but cannot be scrolled (browsers without it keep "hidden") */
body { overflow-x: clip; }
.site-footer, .page-hero, .cta-photo, .showcase, .launch, .hero-slider, .split-card, .figure, .menu-aside,
.jr-sticky, .rg-sticky, .ds-sticky, .p-media, .philo-img, .mosaic figure { overflow: clip; }
/* the closed menu is truly hidden (Tab / screen readers skip it), and still slides out smoothly */
.drawer:not(.open) .drawer-panel { visibility: hidden; transition: transform 0.4s var(--ease), visibility 0s linear 0.4s; }
.drawer.open .drawer-panel { visibility: visible; transition: transform 0.4s var(--ease), visibility 0s; }

/* ==========================================================================
   Motion graphics (2026-10-23): calm and premium — for trust, never a show.
   Everything here stops for people who ask for less motion, and in light mode (weak phone / slow net).
   ========================================================================== */
/* BHL logo while a page gets ready — only appears if that takes longer than a moment; hides itself after 4.5 s anyway */
html:not(.bhl-ready) body::after {
  content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: 0;
  background: var(--ivory, #f7f4ed) url(../brand/logo-mark.png) center / 58px auto no-repeat;
  animation: bhlload 4.5s linear forwards;
}
html[data-theme="dark"]:not(.bhl-ready) body::after { background-color: #070920; }
@keyframes bhlload { 0%, 8% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* pages hand over softly */
main, .site-footer { transition: opacity 0.22s ease, transform 0.22s ease; }
html.leaving main, html.leaving .site-footer { opacity: 0; transform: translateY(-6px); }

/* the main action and WhatsApp: a soft shine / pulse every few seconds */
.cta-shine::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.5) 50%, transparent 65%);
  transform: translateX(-130%); animation: ctashine 7s ease-in-out 2.5s infinite; }
@keyframes ctashine { 0%, 80% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.fab-wa { animation: wapulse 6s ease-out 3s infinite; }
@keyframes wapulse { 0%, 82% { box-shadow: 0 12px 28px -10px rgba(37, 211, 102, 0.9), 0 0 0 0 rgba(37, 211, 102, 0.45); }
  100% { box-shadow: 0 12px 28px -10px rgba(37, 211, 102, 0.9), 0 0 0 18px rgba(37, 211, 102, 0); } }

/* hero: the eyebrow line draws in with each slide */
.slide.on .eyebrow::before { animation: drawline 1.1s var(--ease) 0.25s both; }
@keyframes drawline { from { width: 0; } }

/* construction progress fills (features.js sets the width when seen) */
.progress i, .milestones li i { transition: width 1.6s var(--ease); }

/* free checklist: each step gets its tick */
.cl-list li::before { transition: background 0.4s, color 0.3s, border-color 0.4s; }
.cl-list li::after { content: ""; position: absolute; left: 13px; top: 25px; width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0); transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) 0.1s; }
.cl-list li.tick::before { background: var(--gold); border-color: var(--gold); color: transparent; }
.cl-list li.tick::after { transform: rotate(-45deg) scale(1); }
@media print { .cl-list li.tick::before { background: none; color: inherit; } .cl-list li::after { display: none; } }

/* places that still wait for the owner's facts are marked clearly (hidden on the public site) */
.ph::before, .ph-block:not(#no-results)::before { content: "[তথ্য দিন] "; font-weight: 700; color: #a86d13; }
html[lang="en"] .ph::before, html[lang="en"] .ph-block:not(#no-results)::before { content: "[Info needed] "; }

/* less motion: everything still */
@media (prefers-reduced-motion: reduce) {
  .cta-shine::after, .fab-wa, .slide.on .eyebrow::before, html:not(.bhl-ready) body::after { animation: none; }
  html.leaving main, html.leaving .site-footer { opacity: 1; transform: none; }
  .manifesto { height: auto; } .mf-sticky { position: static; height: auto; padding: 100px 0; }
}
/* light mode (weak phone, slow internet, data saver): no 3D or long pinned scenes */
.lite .cta-shine::after, .lite .fab-wa { animation: none; }
.lite .ring3d { height: auto; } .lite .rg-sticky { position: static; height: 560px; }
.lite .manifesto { height: auto; } .lite .mf-sticky { position: static; height: auto; padding: 100px 0; }
.lite .sa-card { transform: none; }
/* long words (the company email) wrap on phones instead of pushing the page wider */
.contact-item, .contact-item > span { min-width: 0; }
.contact-item b, .contact-item a, .footer-contact a, .contact-list a { overflow-wrap: anywhere; }

/* ==========================================================================
   ERP family motion (2026-10-23): the same moves as BHL ERP, so the website and the software feel like one brand —
   splash with the rising logo, a shine passing over the logo, the blueprint drifting behind dark bands, a soft light
   drifting across, a ripple where a button is pressed, icons popping when pointed at.
   ========================================================================== */
.splash-bhl { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; align-content: center; gap: 22px; pointer-events: none;
  background: #0b0d2e url(../brand/blueprint-gold.svg) center / cover; animation: splashOut 0.45s ease 1.05s forwards; }
.splash-bhl img { width: min(150px, 36vw); height: auto; background: #fff; border-radius: 20px; padding: 14px 18px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7);
  animation: logoIn 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.splash-line { display: block; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, #d6bd8e, transparent); transform-origin: center;
  animation: lineIn 0.9s var(--ease) 0.2s both; }
@keyframes logoIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes splashOut { to { opacity: 0; visibility: hidden; } }
@keyframes lineIn { from { transform: scaleX(0); opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  /* the logo: rises in, a slow shine passes over it now and then, lifts a little when pointed at (as in the ERP) */
  .brand .logo-tile, .footer-brand .card { position: relative; overflow: hidden; }
  .brand .logo-tile { animation: logoRise 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.2) backwards; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }   /* backwards: lets hover move it after the rise */
  .brand:hover .logo-tile { transform: translateY(-3px) scale(1.04); }
  .brand .logo-tile::after, .footer-brand .card::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(201, 168, 108, 0.45), transparent); transform: skewX(-18deg); animation: logoShine 7s ease-in-out 1.2s infinite; }
  @keyframes logoRise { from { opacity: 0; transform: translateY(10px) scale(0.85); } to { opacity: 1; transform: none; } }
  @keyframes logoShine { 0% { left: -60%; } 18% { left: 130%; } 100% { left: 130%; } }

  /* the blueprint drifts slowly behind the dark bands (the ERP sign-in page) */
  .launches-head, .page-hero:not(.photo), .ring3d, .drift { background-image: url(../brand/blueprint-gold.svg) !important; background-size: cover !important; animation: bpDrift 30s linear infinite alternate; }
  @keyframes bpDrift { from { background-position: 0 0; } to { background-position: 60px 30px; } }

  /* a soft light drifts across the call-to-action bands */
  .footer-cta, .portal, .launches-head { position: relative; isolation: isolate; overflow: clip; }
  .footer-cta::before, .portal::before, .launches-head::before { content: ""; position: absolute; inset: -60%; z-index: -1; pointer-events: none;
    background: radial-gradient(circle at 30% 30%, rgba(214, 189, 142, 0.14), transparent 38%); animation: drift 16s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: translate(-6%, -4%); } to { transform: translate(18%, 12%); } }

  /* a ripple where a button is pressed (features.js adds it) */
  .ripple { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: currentColor; opacity: 0.25; pointer-events: none;
    transform: scale(0); animation: ripple 0.6s var(--ease) forwards; z-index: 0; }
  @keyframes ripple { to { transform: scale(30); opacity: 0; } }
  .hero-search button { position: relative; overflow: hidden; }

  /* icons pop when pointed at; round buttons press in */
  .quick-card:hover .quick-ico, .benefit:hover .quick-ico, .contact-item:hover .quick-ico, .footer-contact li:hover .fi, .split-card:hover .p-go { animation: icoPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes icoPop { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1); } }
  .fab-mini:active, .fab-wa:active, .lang-toggle:active, .theme-toggle:active, .fav-link:active, .menu-btn:active, .back-btn:active, .slider-btn:active, .to-top:active {
    transform: scale(0.92); transition-duration: 0.08s; }
}
.lite .launches-head, .lite .page-hero, .lite .ring3d, .lite .drift, .lite .footer-cta::before, .lite .portal::before, .lite .launches-head::before,
.lite .brand .logo-tile::after, .lite .footer-brand .card::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .splash-bhl { display: none; } }

/* ---------- Logo comes alive when pointed at (same as the ERP, 2026-10-24; idea from Learning Bangladesh's logo):
   it lifts, turns a little in 3D with a soft shadow, and a line of light passes over it. On phones a tap does it once. */
@media (prefers-reduced-motion: no-preference) {
  .brand .logo-tile, .footer-brand .card { transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.5s, filter 0.5s; transform-style: preserve-3d; }
  .brand:hover .logo-tile, .brand.tap .logo-tile, .footer-brand .card:hover, .footer-brand .card.tap {
    transform: perspective(700px) rotateY(-12deg) rotateX(4deg) translateY(-3px) scale(1.05);
    box-shadow: 0 14px 26px -10px rgba(18, 21, 74, 0.45); filter: brightness(1.04); }
  .brand:hover .logo-tile::after, .brand.tap .logo-tile::after, .footer-brand .card:hover::after, .footer-brand .card.tap::after {
    animation: logo-shine 0.9s ease-out; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.85), rgba(201, 168, 108, 0.5), transparent); }
  @keyframes logo-shine { 0% { left: -60%; opacity: 0; } 15% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
}
.lite .brand:hover .logo-tile, .lite .footer-brand .card:hover { transform: translateY(-2px); }