/* ==========================================================================
   Archtech Builders - additions
   New components for the longer pages, written in the existing theme's idiom:
   8px radii, indigo-tinted hairline borders, weight-500 display headings,
   and the same shadow ramp. No existing selector is redefined here.
   Append to style.css, or enqueue after it.
   ========================================================================== */

/* ------------------------------------------------------------ section rhythm
   The theme gives `main > section` no padding: every section takes its vertical
   rhythm from its own class (.service-explorer, .portfolio-standards and so on).
   New sections carry .v3-section so they sit on the same rhythm, and drop to the
   same compact spacing at the theme's 780px breakpoint. */
.v3-section {
  padding: 104px 0;
}

/* Adjacent sections in this theme each keep their own padding rather than
   collapsing, so a tinted .section-band always frames its content evenly.
   The FAQ groups are a list rather than separate topics, so they run tighter. */
.v3-section.faq-section {
  padding: 72px 0;
}

@media (max-width: 780px) {
  .v3-section { padding: 72px 0; }
  .v3-section.faq-section { padding: 52px 0; }
}

/* ---------------------------------------------------------------- checklist
   Used on the process page and inside standard-item / mini-card blocks. */
.check-list {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 30px;
  color: var(--text);
  font-size: 0.97rem;
  line-height: 1.6;
}

.check-list li::before {
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 18px;
  height: 18px;
  content: "";
  background-color: rgba(210, 27, 70, 0.09);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d21b46' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
  border-radius: 50%;
}

.check-list strong {
  color: var(--ink);
  font-weight: 650;
}

/* ------------------------------------------------------------- stat band
   Mirrors home-proof-strip, but carries figures rather than sentences. */
.stat-band {
  width: min(calc(100% - 40px), var(--max));
  display: grid;
  margin: 0 auto;
  gap: 1px;
  background: rgba(45, 42, 114, 0.1);
  border: 1px solid rgba(45, 42, 114, 0.1);
  border-radius: 8px;
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 860px) {
  .stat-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat-item {
  padding: 26px 24px;
  background: var(--surface);
}

.stat-value {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.stat-value small {
  margin-left: 4px;
  color: var(--brass);
  font-size: 0.42em;
  font-weight: 650;
}

.stat-label {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* -------------------------------------------------------------------- FAQ
   Native <details> so the answers stay readable with JavaScript disabled. */
.faq-list {
  width: min(calc(100% - 40px), 860px);
  margin: 0 auto;
  border-top: 1px solid rgba(45, 42, 114, 0.12);
}

.faq-item {
  border-bottom: 1px solid rgba(45, 42, 114, 0.12);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 2px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color 160ms ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--brass); }

.faq-item summary:focus-visible {
  outline: 3px solid var(--brick);
  outline-offset: 3px;
  border-radius: 4px;
}

.faq-sign {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  border: 1px solid rgba(45, 42, 114, 0.18);
  border-radius: 50%;
  transition:
    background-color 200ms ease,
    border-color 200ms ease,
    transform 260ms ease;
}

.faq-sign::before,
.faq-sign::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: var(--ink);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: background-color 200ms ease, opacity 200ms ease;
}

.faq-sign::before { width: 10px; height: 1.6px; }
.faq-sign::after { width: 1.6px; height: 10px; }

.faq-item[open] .faq-sign {
  background: var(--brick);
  border-color: var(--brick);
  transform: rotate(180deg);
}

.faq-item[open] .faq-sign::before { background: var(--surface); }
.faq-item[open] .faq-sign::after { opacity: 0; }

.faq-answer {
  padding: 0 46px 22px 2px;
  color: var(--muted);
  font-size: 0.99rem;
  line-height: 1.68;
}

.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-answer { animation: faqReveal 320ms ease both; }
}

@keyframes faqReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- faq group head */
.faq-group {
  width: min(calc(100% - 40px), 860px);
  margin: 0 auto 18px;
}

.faq-group .section-kicker { margin-bottom: 8px; }

.faq-group h2 {
  margin: 0 0 6px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1.1;
}

/* ------------------------------------------------------------ note panel
   The quiet caveat that closes the documents and process sections. */
.note-panel {
  width: min(calc(100% - 40px), 860px);
  margin: 26px auto 0;
  padding: 20px 22px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
  background: #f8f9fd;
  border: 1px solid rgba(45, 42, 114, 0.08);
  border-left: 3px solid var(--brick);
  border-radius: 8px;
}

.note-panel strong { color: var(--ink); }

/* ------------------------------------------------- two-column prose block */
.prose-duo {
  width: min(calc(100% - 40px), var(--max));
  display: grid;
  margin: 0 auto;
  gap: 34px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .prose-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.prose-duo h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.2;
}

.prose-duo p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.68;
}

/* ------------------------------------------------------------ step cards
   Replaces the sticky scroll panel on the home page. Three plain cards, each
   one a link, laid out on the theme's own card language: 8px radius, indigo
   hairline, the same shadow ramp and hover lift. No scroll hijacking. */
.step-grid {
  width: min(calc(100% - 40px), var(--max));
  display: grid;
  margin: 0 auto;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1020px) {
  .step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.step-card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid rgba(45, 42, 114, 0.1);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(23, 23, 51, 0.07);
  color: inherit;
  text-decoration: none;
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

.step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 31, 67, 0.22);
  box-shadow: 0 24px 60px rgba(21, 19, 43, 0.14);
}

.step-card:focus-visible {
  outline: 3px solid var(--brick);
  outline-offset: 3px;
}

.step-card__media {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 16 / 10;
  background: var(--sky);
}

.step-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease;
}

.step-card:hover .step-card__media img {
  transform: scale(1.04);
}

.step-card__num {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: var(--surface);
  background: rgba(23, 23, 51, 0.78);
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(8px);
}

.step-card__body {
  flex: 1;
  padding: 24px 24px 6px;
}

.step-card__body h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.2;
}

.step-card__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.97rem;
  line-height: 1.6;
}

.step-card__cta {
  display: block;
  margin: 0 24px 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(45, 42, 114, 0.1);
}

.step-card__cta strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brass);
  font-size: 0.95rem;
  font-weight: 650;
}

.step-card__cta strong::after {
  width: 16px;
  height: 1.5px;
  background: currentColor;
  content: "";
  transition: width 200ms ease;
}

.step-card:hover .step-card__cta strong::after {
  width: 26px;
}

.step-card__cta small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* ------------------------------------------------------------- our story
   The "growing with a nation" block: a photograph beside the narrative, then
   the two pillars underneath on the theme's existing two-column prose grid. */
.story-layout {
  width: min(calc(100% - 40px), var(--max));
  display: grid;
  margin: 0 auto 40px;
  gap: 34px;
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .story-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.story-media {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(45, 42, 114, 0.1);
  border-radius: 8px;
  box-shadow: 0 20px 52px rgba(23, 23, 51, 0.12);
}

.story-media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.story-copy p {
  margin: 0 0 16px;
  color: var(--text);
  font-size: 1.03rem;
  line-height: 1.72;
}

.story-copy p:last-child { margin-bottom: 0; }

.story-pillars h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 500;
}

/* ------------------------------------------------------------- heritage
   The era label above each landmark. Tabular figures so the centuries line
   up down the grid. */
.heritage-item {
  min-height: 0;
}

.heritage-era {
  margin: 0 0 8px;
  color: var(--brass);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.heritage-item h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1.25;
}

.heritage-item p:not(.heritage-era) {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.62;
}

/* ------------------------------------------------------- comparison table
   Scrolls inside its own container so the page never scrolls sideways. */
.compare-wrap {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto;
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid rgba(45, 42, 114, 0.1);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(23, 23, 51, 0.07);
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.compare-table th,
.compare-table td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(45, 42, 114, 0.09);
}

.compare-table thead th {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #f8f9fd;
  white-space: nowrap;
}

.compare-table tbody th {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.compare-table tbody tr:hover th,
.compare-table tbody tr:hover td {
  background: rgba(45, 42, 114, 0.03);
}

.compare-table td {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.compare-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  white-space: normal;
}

.compare-links .text-link {
  font-size: 0.88rem;
}

/* ============================================================ three moves
   A bento grid replacing the old sticky scroll panel. One large typographic
   tile and two smaller ones, each a link. Entrance is staggered; the marquee
   loops. Nothing here pins the page or takes over the scroll. */
.bento {
  width: min(calc(100% - 40px), var(--max));
  display: grid;
  margin: 0 auto;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bento-tile--lead { grid-column: span 2; grid-row: span 2; }
}

.bento-tile {
  position: relative;
  display: flex;
  overflow: hidden;
  min-height: 208px;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid rgba(45, 42, 114, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 42px rgba(23, 23, 51, 0.07);
  text-decoration: none;
  isolation: isolate;
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 110ms),
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i, 0) * 110ms),
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.bento-tile.is-in {
  opacity: 1;
  transform: none;
}

.bento-tile:hover {
  border-color: rgba(201, 31, 67, 0.28);
  box-shadow: 0 26px 64px rgba(21, 19, 43, 0.16);
}

.bento-tile:focus-visible {
  outline: 3px solid var(--brick);
  outline-offset: 3px;
}

/* the large tile carries the weight */
.bento-tile--lead {
  min-height: 340px;
  padding: 34px;
  color: var(--surface);
  background:
    radial-gradient(120% 130% at 8% 100%, rgba(210, 27, 70, 0.5) 0%, transparent 58%),
    linear-gradient(150deg, #2d2a72 0%, #1e1b58 46%, #171733 100%);
  border-color: transparent;
}

.bento-tile--lead:hover { border-color: transparent; }

/* a slow diagonal sweep across the lead tile */
.bento-sheen {
  position: absolute;
  z-index: -1;
  inset: 0 auto 0 -40%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
  transform: skewX(-14deg);
  pointer-events: none;
}

.bento-tile--lead .bento-sheen {
  animation: bentoSheen 9s ease-in-out infinite;
}

@keyframes bentoSheen {
  0%, 100% { transform: translateX(0) skewX(-14deg); }
  55% { transform: translateX(420%) skewX(-14deg); }
}

.bento-num {
  color: var(--brass);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

.bento-tile--lead .bento-num { color: rgba(255, 255, 255, 0.72); }

.bento-body { display: block; margin: 22px 0 0; }

.bento-title {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.bento-tile--lead .bento-title {
  font-size: clamp(1.9rem, 2.6vw + 1rem, 2.7rem);
  line-height: 1.04;
}

.bento-copy {
  display: block;
  max-width: 42ch;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.62;
}

.bento-tile--lead .bento-copy {
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.02rem;
}

.bento-go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 24px;
  color: var(--brass);
  font-size: 0.92rem;
  font-weight: 650;
}

.bento-tile--lead .bento-go { color: #fff; }

.bento-go svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bento-tile:hover .bento-go svg { transform: translateX(6px); }

/* ---- looping marquee ---- */
.marquee {
  width: 100%;
  margin-top: 34px;
  overflow: hidden;
  border-block: 1px solid rgba(45, 42, 114, 0.12);
  padding-block: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 20px;
  animation: marqueeSlide 34s linear infinite;
}

/* It keeps rolling under the cursor too: the owner wants steady motion. */

@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee-item {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  white-space: nowrap;
}

.marquee-dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--brick);
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .bento-tile { opacity: 1; transform: none; transition: none; }
  .bento-tile--lead .bento-sheen { animation: none; }
  .marquee-track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { flex-wrap: wrap; width: auto; justify-content: center; }
}

/* ========================================================= on-site assistant
   A retrieval assistant, so it is styled as a quiet utility rather than a
   personality: the same navy, the same 8px radii, no bouncing avatar. */
.chat {
  position: fixed;
  z-index: 60;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.chat-launch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  color: #fff;
  background: var(--ink);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 18px 44px rgba(23, 23, 51, 0.28);
  font: 650 0.92rem/1 var(--font-body);
  cursor: pointer;
  transition: transform 200ms ease, background-color 200ms ease;
}

.chat-launch:hover { transform: translateY(-2px); background: var(--green-dark); }
.chat-launch:focus-visible { outline: 3px solid var(--brick); outline-offset: 3px; }

.chat-launch svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chat.is-open .chat-launch { background: var(--brick); }

.chat-panel {
  display: flex;
  width: min(calc(100vw - 28px), 384px);
  max-height: min(72vh, 560px);
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid rgba(45, 42, 114, 0.14);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(23, 23, 51, 0.26);
}

.chat-panel[hidden] { display: none; }

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 14px 18px;
  color: #fff;
  background: var(--ink);
}

.chat-head > div { flex: 1; min-width: 0; }
.chat-head strong { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 500; }
.chat-head span { display: block; color: rgba(255, 255, 255, 0.62); font-size: 0.74rem; }

.chat-reset {
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  border-radius: 999px;
  font: 600 0.72rem/1 var(--font-body);
  cursor: pointer;
}
.chat-reset:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }

.chat-close {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.chat-close:hover { background: rgba(255, 255, 255, 0.14); }
.chat-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg { max-width: 90%; }
.chat-msg p { margin: 0; padding: 11px 14px; font-size: 0.92rem; line-height: 1.55; border-radius: 12px; }

.chat-msg--bot { align-self: flex-start; }
.chat-msg--bot p { color: var(--text); background: #f2f4fa; border-bottom-left-radius: 4px; }

.chat-msg--you { align-self: flex-end; }
.chat-msg--you p { color: #fff; background: var(--brick); border-bottom-right-radius: 4px; }

.chat-link {
  display: inline-block;
  margin: 7px 6px 0 0;
  color: var(--brass);
  font-size: 0.84rem;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px 0;
}

.chat-chips__label {
  width: 100%;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.chat-chip {
  padding: 7px 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid rgba(45, 42, 114, 0.16);
  border-radius: 999px;
  font: 500 0.8rem/1.3 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.chat-chip:hover { border-color: var(--brick); background: rgba(210, 27, 70, 0.05); }

.chat-form { display: flex; gap: 8px; padding: 12px 16px 8px; }

.chat-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid rgba(45, 42, 114, 0.18);
  border-radius: 999px;
  font: 400 0.92rem/1.4 var(--font-body);
}
.chat-input:focus { outline: none; border-color: var(--brick); box-shadow: 0 0 0 3px rgba(210, 27, 70, 0.12); }

.chat-send {
  display: grid;
  width: 42px;
  height: 42px;
  flex: none;
  place-items: center;
  color: #fff;
  background: var(--brick);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.chat-send:hover { background: var(--brick-dark); }
.chat-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.chat-note {
  margin: 0;
  padding: 0 16px 14px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .chat-launch span { display: none; }
  .chat-launch { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-launch { transition: none; }
}

/* heritage photographs -------------------------------------------------- */
.heritage-figure {
  margin: -24px -24px 18px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--sky);
  border-radius: 8px 8px 0 0;
}

.heritage-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.heritage-item:hover .heritage-figure img { transform: scale(1.05); }

/* the card with no verifiable photograph keeps the grid consistent */

/* ------------------------------------------------------ working close to home
   Four short points. As a full-width stack they sprawled; two columns keeps
   each one on two or three lines and halves the height of the section. */
.where-grid {
  width: min(calc(100% - 40px), var(--max));
  display: grid;
  margin: 0 auto;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .where-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.where-grid .process-step {
  display: grid;
  align-items: start;
  gap: 16px;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 22px;
  background: var(--surface);
  border: 1px solid rgba(45, 42, 114, 0.1);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(23, 23, 51, 0.06);
}

.where-grid .process-step > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--brass);
  background: rgba(210, 27, 70, 0.08);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.where-grid .process-step h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.25;
}

.where-grid .process-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------ project status
   Status colour now follows availability rather than activity:

     Ongoing  blue   - under construction, talk to us
     Ready    green  - complete, you can walk it today
     Sold     red    - off the market

   Red reads as "stop", so it belongs on Sold rather than on Ongoing. The chips
   on the cards and the filter buttons above them are set together here, so the
   filter row works as a legend for the cards below it. */
.project-meta .status-ongoing {
  color: var(--surface);
  background: var(--green);
  border-color: var(--green);
}

.project-meta .status-ready {
  color: var(--surface);
  background: #167a55;
  border-color: #167a55;
}

.project-meta .status-sold {
  color: var(--surface);
  background: var(--brick);
  border-color: var(--brick);
}

.filter-button[data-status-filter="ongoing"]:hover,
.filter-button[data-status-filter="ongoing"]:focus-visible,
.filter-button[data-status-filter="ongoing"].is-active {
  color: var(--surface);
  background: var(--green);
  border-color: var(--green);
}

.filter-button[data-status-filter="ready"]:hover,
.filter-button[data-status-filter="ready"]:focus-visible,
.filter-button[data-status-filter="ready"].is-active {
  color: var(--surface);
  background: #167a55;
  border-color: #167a55;
}

.filter-button[data-status-filter="sold"]:hover,
.filter-button[data-status-filter="sold"]:focus-visible,
.filter-button[data-status-filter="sold"].is-active {
  color: var(--surface);
  background: var(--brick);
  border-color: var(--brick);
}

/* the same three colours on the comparison table's chips */
.compare-table .status-ongoing { color: var(--surface); background: var(--green); }
.compare-table .status-ready { color: var(--surface); background: #167a55; }
.compare-table .status-sold { color: var(--surface); background: var(--brick); }

/* ---------------------------------------------------------- small conveniences */

/* live office-hours pill, filled from the visitor's clock against Dhaka time */
.office-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.7rem;
  font-weight: 600;
}

.office-status::before {
  width: 6px;
  height: 6px;
  background: #ff8f6b;
  border-radius: 50%;
  content: "";
}

.office-status.is-open::before {
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.24);
}

/* how many projects sit behind each filter */
.filter-count {
  margin-left: 7px;
  opacity: 0.62;
  font-size: 0.78em;
  font-variant-numeric: tabular-nums;
}

/* file weight on brochure links, so a 9 MB tap is never a surprise */
.file-size {
  margin-left: 7px;
  padding: 2px 7px;
  color: var(--muted);
  background: rgba(45, 42, 114, 0.07);
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* sold projects are off the market, so they recede until you look at them */
.project-card[data-status="sold"] .project-image img {
  filter: saturate(0.68) contrast(0.96);
  opacity: 0.88;
  transition: filter 320ms ease, opacity 320ms ease;
}

.project-card[data-status="sold"]:hover .project-image img,
.project-card[data-status="sold"]:focus-within .project-image img {
  filter: none;
  opacity: 1;
}

/* ================================================================= footer
   The footer was a flat three-column grid with 700-weight links, which read
   as heavy once the display face became a serif. This gives it a lead block
   with a real headline and a call to action, then three balanced columns of
   quieter type, separated by hairlines. */
.site-footer {
  position: relative;
  overflow: hidden;
}

/* a thin brand rule across the top edge */
.site-footer::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brick) 0%, var(--green) 46%, transparent 100%);
  content: "";
}

/* the same faint grid the hero uses, so the page closes as it opened */
.site-footer::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 62px 62px;
  content: "";
  pointer-events: none;
}

.site-footer > * { position: relative; z-index: 1; }

/* ---- lead block ---- */
.footer-lead {
  width: min(calc(100% - 40px), var(--max));
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 34px 0 28px;
  gap: 18px 32px;
  align-items: center;
  justify-content: space-between;
}

/* the footer signs off with the mark rather than a small caption */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.footer-brand-mark {
  display: grid;
  overflow: hidden;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  place-items: center;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

/* the source logo carries its own padding, so it is scaled up and pulled
   left to sit optically centred in the tile, exactly as the header does */
.footer-brand-logo {
  width: 84px;
  max-width: none;
  height: auto;
  transform: translateX(-14px);
}

.footer-brand-name {
  color: var(--surface);
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.footer-brand-name small {
  display: block;
  margin-top: 6px;
  color: var(--brick);
  font-family: var(--font-body);
  font-size: 0.4em;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.footer-brand:hover .footer-brand-name small { color: #ff7d9c; }

.footer-lead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.footer-call {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  color: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.footer-call:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.44); }

.footer-call svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- three columns ---- */
.footer-main {
  width: min(calc(100% - 40px), var(--max));
  display: grid;
  margin: 0 auto;
  padding: 34px 0 38px;
  gap: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 760px) {
  .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.footer-column { display: grid; align-content: start; gap: 9px; }

.footer-column h3 {
  margin: 0 0 2px;
  color: rgba(255, 255, 255, 0.52);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-subhead { margin-top: 16px !important; }

.footer-column a,
.footer-nav a {
  color: rgba(255, 255, 255, 0.88);
  font-weight: 550;
  font-size: 0.96rem;
  width: fit-content;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 260ms cubic-bezier(0.22, 1, 0.36, 1), color 180ms ease;
}

.footer-column a:hover,
.footer-nav a:hover { color: #fff; background-size: 100% 1px; }

.footer-column address,
.footer-column span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  font-style: normal;
  line-height: 1.6;
}

.footer-nav { display: grid; gap: 9px; }

.footer-action { color: var(--brick) !important; font-weight: 650 !important; }
.footer-action:hover { color: #ff6d90 !important; }

/* ---- bottom rule ---- */
.footer-bottom {
  width: min(calc(100% - 40px), var(--max));
  display: flex;
  flex-wrap: wrap;
  min-height: 0;
  margin: 0 auto;
  padding: 20px 0 26px;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.84rem;
}

.footer-visit-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.9rem;
  font-weight: 600;
}

.footer-visit-link:hover { color: #fff; }

/* the office pill sits on the dark ground here */
.site-footer .office-status { margin-top: 2px; font-size: 0.82rem; }

/* the story section now carries its heading inside the text column */
.story-heading {
  margin: 0 0 14px;
  font-size: clamp(1.7rem, 1.8vw + 1.1rem, 2.3rem);
  line-height: 1.08;
}

.story-copy .section-kicker { margin-bottom: 10px; }

/* ---------------------------------------------- WhatsApp
   In Bangladesh WhatsApp is how most of this audience actually starts a
   business conversation, and the site had no link to it anywhere. Styled as
   one more contact line rather than a floating badge, so it sits with the
   phone numbers where people look for it. */
.contact-whatsapp,
.footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
}

.contact-whatsapp svg,
.footer-whatsapp svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: #25d366;
  stroke: none;
}

.footer-whatsapp svg {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.contact-whatsapp:hover svg,
.contact-whatsapp:focus-visible svg,
.footer-whatsapp:hover svg,
.footer-whatsapp:focus-visible svg {
  fill: #1faa52;
}

/* The status line after the form is submitted. It was the same muted grey
   whatever happened, so a failure read like a confirmation. */
.form-status:not(:empty) {
  padding: 11px 13px;
  border-radius: 6px;
  font-weight: 500;
}

.form-status.is-success:not(:empty) {
  background: rgba(47, 93, 72, 0.09);
  border: 1px solid rgba(47, 93, 72, 0.22);
}

.form-status.is-error:not(:empty) {
  background: rgba(201, 31, 67, 0.07);
  border: 1px solid rgba(201, 31, 67, 0.24);
}

/* ---------------------------------------------- lead tile photograph
   The lead tile used to be a flat navy gradient. It now carries a warm
   interior photograph, with the brand navy laid over it as a wash: heavy
   at the bottom left where the words sit, thin at the top so the light
   through the curtains still reads. */
.bento-photo {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 62% 40%;
  transform: scale(1.03);
  transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bento-tile--lead:hover .bento-photo,
.bento-tile--lead:focus-visible .bento-photo {
  transform: scale(1.08);
}

.bento-tile--lead::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(21, 19, 43, 0.94) 0%, rgba(21, 19, 43, 0.62) 42%, rgba(21, 19, 43, 0.28) 78%, rgba(21, 19, 43, 0.4) 100%),
    radial-gradient(120% 130% at 6% 100%, rgba(201, 31, 67, 0.34) 0%, transparent 56%);
}

.bento-tile--lead .bento-num,
.bento-tile--lead .bento-title,
.bento-tile--lead .bento-copy {
  text-shadow: 0 1px 18px rgba(21, 19, 43, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .bento-photo { transition: none; }
}

/* ---------------------------------------------- home hero photograph
   Rounded on all four corners. The theme rounded only the top two, so the
   photograph ended in a hard straight edge. */
.home-flight-visual {
  border-radius: 24px;
}

@media (max-width: 780px) {
  .home-flight-visual { border-radius: 18px; }
}

/* ============================================================ type system
   Benchmarked against the developers this site is compared with. The luxury
   tier (Lodha, Emaar, Related) set headings in a classical high-contrast
   serif and everything else in a clean geometric sans. The Bangladeshi
   leaders (Shanta on Avenir, bti on Outfit, Navana on Creato) are geometric
   sans throughout. Headings use Playfair Display, the serif Related uses and
   one of Emaar's; everything else is Jost, the geometric sans Lodha and Emaar
   use. Playfair replaced Cormorant Garamond, which was too light to hold a
   page at these sizes.

   Before this, headings were split across two faces case by case: page
   titles in Fraunces, the nineteen section titles in Inter (a later theme
   rule overrode the display token), some card titles in one and some in the
   other. Now there is one rule. Bengali glyphs fall through to the Noto
   faces in both stacks, so mixed text never drops to a system font. */
:root {
  --font-english: "Jost", "Noto Sans Bengali", "Helvetica Neue", Arial, sans-serif;
  --font-body: var(--font-english);
  --font-display: "Playfair Display", "Noto Serif Bengali", Georgia, "Times New Roman", serif;
  --font-bengali: "Noto Sans Bengali", "Jost", sans-serif;
  --font-bengali-display: "Noto Serif Bengali", "Playfair Display", Georgia, serif;
}

body {
  font-family: var(--font-body);
  font-kerning: normal;
  line-height: 1.7;
}

p, li, dd, address, .section-copy { text-wrap: pretty; }

/* --- one face for every heading ---------------------------------------- */
h1, h2, h3, h4,
.section-title,
.bento-title,
.faq-item summary,
.footer-brand-name,
.finder-result h3,
.service-panel-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}

/* Playfair has a generous x-height and strong contrast, so it holds a page
   at more modest sizes than the lighter serif it replaced. */
.home-flight-intro h1 {
  font-size: clamp(2.6rem, 4.4vw + 0.85rem, 4.7rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.page-hero h1,
.page-hero-inner h1 {
  font-size: clamp(2.45rem, 3.5vw + 0.95rem, 4.3rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
}

.section-title {
  font-size: clamp(2rem, 2.2vw + 1.2rem, 3.05rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.016em;
}

.cta-band .section-title { font-size: clamp(1.9rem, 2vw + 1.15rem, 2.8rem); }
.chairman-card .section-title { font-size: clamp(1.85rem, 1.5vw + 1.25rem, 2.5rem); }
.faq-group h2 { font-size: 1.85rem; line-height: 1.14; }

main h3 { font-size: 1.22rem; line-height: 1.25; letter-spacing: -0.006em; }
.mini-card h3,
.standard-item h3,
.path-step h3,
.heritage-item h3,
.where-grid .process-step h3,
.process-step h3 { font-size: 1.24rem; line-height: 1.25; }
.project-card h3 { font-size: 1.32rem; line-height: 1.2; }
.portfolio-standard-item h3,
.story-pillars h3,
.step-card__body h3 { font-size: 1.34rem; line-height: 1.22; }
.prose-duo h3 { font-size: 1.42rem; line-height: 1.2; }
.project-category-heading h3 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.12; }
.finder-result h3 { font-size: 1.6rem; line-height: 1.18; }
.service-panel-content h3 { font-size: clamp(1.95rem, 2.9vw + 0.35rem, 2.95rem); line-height: 1.1; }

.bento-title { font-size: 1.36rem; line-height: 1.2; letter-spacing: -0.008em; }
.bento-tile--lead .bento-title { font-size: clamp(1.95rem, 2.2vw + 1.1rem, 2.8rem); line-height: 1.08; }
.faq-item summary { font-size: 1.16rem; font-weight: 500; line-height: 1.35; }
.footer-brand-name { font-size: 1.65rem; letter-spacing: -0.012em; }

/* --- labels: the tracked capitals every premium site uses --------------- */
.section-kicker,
.eyebrow,
.bento-num,
.heritage-era,
.path-step span,
.mini-card span,
.service-panel-count,
.service-tab span,
.finder-result span,
.home-flight-update span,
.home-proof-inner span,
.location-tile span,
.hero-facts span,
.footer-column h3 {
  font-family: var(--font-english);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-kicker,
.eyebrow { font-size: 0.74rem; }

.project-meta span {
  font-family: var(--font-english);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* The footer's column labels were 10.9px. */
.footer-column h3 {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-wrap: nowrap;
}

/* --- body and interface -------------------------------------------------- */
.button,
.site-nav a,
.filter-button,
.project-actions a,
.chat-launch {
  font-family: var(--font-english);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.brand-name {
  font-family: var(--font-english);
  font-weight: 600;
  letter-spacing: 0.1em;
}

.section-copy,
.home-flight-lede { font-size: 1.08rem; line-height: 1.7; }

dd, dt, .stat-value, .file-size, .bento-num, .status-chip {
  font-variant-numeric: lining-nums tabular-nums;
}

/* --- Bengali ---------------------------------------------------------------
   Bengali has no capitals, and letter-spacing pulls its conjuncts apart, so
   labels drop both. Headings move to Noto Serif Bengali, set smaller because
   its glyphs are larger than Playfair's at the same size. */
html[lang="bn"] body,
html[lang="bn"] .button,
html[lang="bn"] .site-nav a,
html[lang="bn"] .project-actions a { font-family: var(--font-bengali); letter-spacing: 0; }

html[lang="bn"] h1,
html[lang="bn"] h2,
html[lang="bn"] main h3,
html[lang="bn"] .section-title,
html[lang="bn"] .bento-title,
html[lang="bn"] .faq-item summary,
html[lang="bn"] .finder-result h3,
html[lang="bn"] .service-panel-content h3 {
  font-family: var(--font-bengali-display);
  letter-spacing: 0;
  line-height: 1.32;
}

html[lang="bn"] .home-flight-intro h1 { font-size: clamp(2.3rem, 3.8vw + 0.8rem, 4.1rem); }
html[lang="bn"] .page-hero h1,
html[lang="bn"] .page-hero-inner h1 { font-size: clamp(2.2rem, 3vw + 0.9rem, 3.7rem); }
html[lang="bn"] .section-title { font-size: clamp(1.85rem, 1.9vw + 1.15rem, 2.7rem); }
html[lang="bn"] .bento-tile--lead .bento-title { font-size: clamp(1.8rem, 2vw + 1rem, 2.5rem); }
html[lang="bn"] main h3,
html[lang="bn"] .project-card h3,
html[lang="bn"] .bento-title,
html[lang="bn"] .faq-item summary { font-size: 1.18rem; }

html[lang="bn"] .section-kicker,
html[lang="bn"] .eyebrow,
html[lang="bn"] .bento-num,
html[lang="bn"] .heritage-era,
html[lang="bn"] .path-step span,
html[lang="bn"] .mini-card span,
html[lang="bn"] .service-panel-count,
html[lang="bn"] .service-tab span,
html[lang="bn"] .finder-result span,
html[lang="bn"] .home-flight-update span,
html[lang="bn"] .home-proof-inner span,
html[lang="bn"] .location-tile span,
html[lang="bn"] .hero-facts span,
html[lang="bn"] .footer-column h3,
html[lang="bn"] .project-meta span {
  font-family: var(--font-bengali);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ============================================================ design fixes */

/* A heading's intro paragraph sat directly under it with no gap. */
.section-heading .section-title + .section-copy {
  margin-top: 16px;
  max-width: 62ch;
}

/* The project finder card reuses the theme's availability panel, whose rule
   turns every paragraph inside into a small bold capitalised label. The
   description inherited that by accident. */
.home-finder-band .finder-result p {
  margin: 12px 0 0;
  color: #565d72;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}

/* The finder intro read at 4.4:1 on the warm paper ground. */
.home-finder-intro > p:not(.section-kicker) { color: #565d72; }

/* The file size inside a catalogue button was grey on navy at 2.5:1 and
   9.9px. It now takes the button's own text colour. */
.file-size {
  color: inherit;
  opacity: 0.82;
  background: rgba(127, 127, 127, 0.18);
  background: color-mix(in srgb, currentColor 16%, transparent);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* The home page questions were centred at 860px while the heading above
   them sat on the page grid, so their left edges were 60 to 160px apart. */
.faq-list--grid,
.faq-more {
  width: min(calc(100% - 40px), var(--max));
  margin-left: auto;
  margin-right: auto;
}

.faq-list--grid { border-top: 0; }
.faq-list--grid .faq-item { max-width: 880px; }
.faq-list--grid .faq-item:first-child { border-top: 1px solid rgba(45, 42, 114, 0.12); }
.faq-more { max-width: none; margin-top: 22px; margin-bottom: 0; }

@media (max-width: 780px) {
  .faq-list--grid,
  .faq-more { width: min(calc(100% - 28px), var(--max)); }
}

/* Footer contact links were 25px tall on a phone: phone numbers, WhatsApp
   and email are the ones people tap most, so they get a full finger's room.
   The gap shrinks to match, so the column barely grows. */
@media (max-width: 780px) {
  .footer-column { gap: 0; }
  .footer-column a,
  .footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    background-position: 0 calc(100% - 9px);
  }
  .footer-column h3 { margin-top: 14px; margin-bottom: 4px; }
  .footer-column h3:first-child { margin-top: 0; }
}

/* The closing call-to-action band kept two columns on a phone, so its
   heading got 128px beside the button and long words ran out of the box. */
@media (max-width: 780px) {
  .cta-band {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .cta-band .button { justify-self: start; }

  /* The contact page's own phone, email and WhatsApp lines, and the footer's
     visit link, get the same finger-sized targets as the footer columns. */
  .contact-lines { gap: 2px; }
  .contact-lines a,
  .footer-visit-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Three tiles on a two-column board left an empty cell bottom right. The
   large lead tile now takes the full first row; the other two share the
   second. Phones stay single column. */
@media (min-width: 781px) {
  .location-board > .location-tile.is-large { grid-column: 1 / -1; min-height: 150px; }
}

/* The theme forced page titles to 700; every other heading is 600. */
.home-flight-intro h1,
.page-hero h1,
.page-hero-inner h1 { font-weight: 600; }

/* ============================================================== backdrop
   The site used to sit on drawing-board graph paper: faint lines every 56px
   behind every page, plus separate grids in the home hero, the footer, the
   services hero and the projects standards band, and in the home hero a
   diagonal band and a red drafting line. All of it is gone.

   In its place: the brand's own cool white, lit softly from the top, with a
   faint wash of the brand indigo and red, and a very fine grain so the page
   reads as good printed stock rather than a blueprint. Only colours already
   in the palette are used: ink #17143d, indigo #2d2a72, red #c82449, and the
   cool whites #f5f6fb, #eef0f8 and #ffffff.

   The light and the grain sit on fixed layers behind the content, so a long
   page never repeats or repaints them while scrolling. */
body {
  background: var(--paper);
}

body::before,
body::after {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(1200px 620px at 80% -12%, rgba(255, 255, 255, 0.95), transparent 62%),
    radial-gradient(1000px 700px at 104% 4%, rgba(45, 42, 114, 0.06), transparent 62%),
    radial-gradient(900px 640px at -4% 106%, rgba(200, 36, 73, 0.045), transparent 60%),
    var(--paper);
}

body::after {
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0 0.24 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Home hero: its own cool gradient, kept, with light falling from the top
   right in place of the grid, the diagonal band and the drafting line. */
.home-flight-hero {
  background:
    radial-gradient(900px 520px at 82% -8%, rgba(45, 42, 114, 0.08), transparent 64%),
    radial-gradient(700px 460px at 6% -4%, rgba(200, 36, 73, 0.045), transparent 60%),
    linear-gradient(180deg, #fbfbfe 0%, #f5f6fb 60%, #eef0f8 100%);
  border-bottom-color: rgba(45, 42, 114, 0.08);
}

.home-flight-hero::before,
.home-flight-hero::after {
  display: none;
}

/* Services hero: the photograph carries itself without a grid laid on top. */
.page-hero-service .page-hero-media::before {
  display: none;
}

/* Footer and the projects standards band: soft brand light instead of grids. */
.site-footer::after {
  background-image:
    radial-gradient(760px 440px at 94% 112%, rgba(200, 36, 73, 0.24), transparent 62%),
    radial-gradient(640px 420px at 0% -10%, rgba(98, 91, 166, 0.18), transparent 60%);
  background-size: auto;
}

.portfolio-standards {
  background-image:
    radial-gradient(900px 520px at 88% -8%, rgba(98, 91, 166, 0.22), transparent 62%),
    radial-gradient(820px 520px at -4% 108%, rgba(200, 36, 73, 0.16), transparent 60%);
  background-size: auto;
}

@media (prefers-reduced-transparency: reduce) {
  body::after { display: none; }
}

/* One tint for every light band. The theme mixed four near-whites
   (#f0f1f7, #f5f6fb with a violet wash, white fading to #eef2f5, and an
   indigo stripe). Light sections are now plain white, tinted bands the
   brand's own #eef0f8, so the page alternates in a single, steady rhythm. */
.buyer-path,
.chairman-section,
.home-projects,
.home-proof-strip,
.standard {
  background: var(--surface);
}

.section-band,
.home-finder-band,
.service-explorer {
  background: var(--sky);
}

/* Five FAQ groups sit back to back on the guide; letting the page backdrop
   run through them avoids a stack of identical bands with seams between. */
.faq-section {
  background: transparent;
}

/* ---------------------------------------------- the builder who answers
   The launcher was a wide pill reading "Ask a question". It is now a small
   round button showing an illustrated Bangladeshi site engineer in the
   brand's white hard hat, and a red question mark so it still reads as "ask me". The words
   appear as a label on hover or keyboard focus and stay announced to screen
   readers through the button's own label. The same face heads the panel. */
.chat-launch {
  position: relative;
  display: grid;
  width: 56px;
  height: 56px;
  padding: 0;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

.chat-launch:hover { background: none; transform: translateY(-2px); }
.chat.is-open .chat-launch { background: none; }

.chat-avatar {
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #3a368a 0%, var(--ink) 72%);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(23, 20, 61, 0.32);
  transition: box-shadow 200ms ease;
}

.chat-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: initial;
  stroke: none;
}

.chat-launch:hover .chat-avatar { box-shadow: 0 18px 40px rgba(23, 20, 61, 0.4); }
.chat.is-open .chat-launch .chat-avatar { border-color: var(--brick); }

.chat-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  color: #fff;
  background: var(--brick);
  border: 2px solid #fff;
  border-radius: 50%;
  font: 700 0.72rem/1 var(--font-body);
}

.chat.is-open .chat-badge { display: none; }

.chat-launch-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  padding: 7px 11px;
  color: #fff;
  background: var(--ink);
  border-radius: 8px;
  font: 500 0.82rem/1 var(--font-body);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 160ms ease, transform 160ms ease;
}

.chat-launch:hover .chat-launch-label,
.chat-launch:focus-visible .chat-launch-label {
  opacity: 1;
  transform: translate(0, -50%);
}

.chat.is-open .chat-launch-label { display: none; }

.chat-avatar--head {
  width: 38px;
  height: 38px;
  flex: none;
  border-width: 1.5px;
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
}

@media (max-width: 760px) {
  .chat-launch,
  .chat-launch .chat-avatar { width: 52px; height: 52px; }
  .chat-launch span.chat-launch-label { display: none; }
  .chat-launch { padding: 0; }
}

/* ---------------------------------------------- credentials
   Three facts a buyer in Dhaka checks first, set directly under the hero's
   buttons: RAJUK approval, the founding year, and the material brands.
   Written as "Since 2017" rather than a count of years, so it never dates. */
.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font: 500 0.9rem/1.3 var(--font-body);
}

.trust-row svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: var(--brick);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-brand-wrap { display: grid; gap: 10px; }

.footer-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font: 500 0.72rem/1.2 var(--font-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html[lang="bn"] .footer-credentials {
  font-size: 0.82rem;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 600px) {
  .trust-row { gap: 8px 14px; }
  .trust-row li { font-size: 0.84rem; }
}

/* ---- the real Archtech logo ------------------------------------------------
   Header and footer use the company's own mark and its own ARCHTECH /
   BUILDERS lettering, cut from the official logo file, set side by side so
   the logo reads at header height. No retyped wordmark in a website font. */
.site-header .brand { gap: 12px; align-items: center; }
.brand-logo-mark {
  display: block;
  width: auto;
  height: 42px;
  flex: none;
}
.brand-wordmark {
  display: block;
  width: auto;
  height: 31px;
  flex: none;
}

.footer-brand { gap: 16px; }
.footer-brand-logo {
  width: 40px;
  height: auto;
  transform: none;
}
.footer-wordmark {
  display: block;
  width: auto;
  height: 44px;
}

@media (max-width: 460px) {
  .site-header .brand { gap: 9px; }
  .brand-logo-mark { height: 36px; }
  .brand-wordmark { height: 26px; }
  .footer-wordmark { height: 36px; }
}

/* The assistant is drawn, not photographed: a Bangladeshi site engineer
   who blinks now and then, a small sign of life without any distraction. */
.chat-avatar { background: #dfe3f3; }
.bot-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: botBlink 5.5s infinite;
}
@keyframes botBlink {
  0%, 93%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}
@media (prefers-reduced-motion: reduce) {
  .bot-eyes { animation: none; }
}

/* Homepage photo: frame low enough to keep the trees in front of the
   building, so the picture reads green and natural, not just facade. */
.home-flight-visual img { object-position: 50% 72%; }

/* ---- privacy notice ------------------------------------------------------ */
.privacy-body {
  box-sizing: content-box;
  max-width: 720px;
  margin: 0 auto;
  padding-inline: 20px;
}
.privacy-heading {
  margin: 2.2rem 0 0.6rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.7rem);
  font-weight: 600;
}
.privacy-heading:first-child { margin-top: 0; }
.privacy-body p { margin: 0 0 0.9rem; line-height: 1.7; }
.privacy-contact a { color: var(--brick); font-weight: 500; }
.form-privacy { margin: 0.4rem 0 0; font-size: 0.86rem; }
.form-privacy a { color: var(--muted, #5a5f78); text-decoration: underline; text-underline-offset: 3px; }
.footer-privacy {
  margin-left: 12px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The type switch is left out while every listed project is residential. */
.project-type-controls[hidden] { display: none; }