/* ============================== HOME ============================== */

/* ---------- Hero ----------
   The photograph carries the HCD mark at its centre (brand-book cover image),
   so the text sits in a bottom band, split into two columns, clear of the mark. */
.hero { flex-direction: column; justify-content: flex-end; align-items: stretch; }
.hero__shade {
  background:
    linear-gradient(180deg, rgba(28,30,31,.6) 0%, rgba(28,30,31,0) 20%),
    linear-gradient(0deg, rgba(28,30,31,.95) 0%, rgba(28,30,31,.82) 26%, rgba(28,30,31,.1) 58%);
}
.hero__content { padding-block: calc(var(--header-h) + 24px) clamp(20px, 2.4vw, 32px); display: grid; gap: clamp(24px, 3vw, 40px); }
.hero__row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 24px clamp(32px, 5vw, 96px); align-items: end; }
.hero__eyebrow { color: rgba(246, 243, 236, .78); margin-bottom: 18px; }
.hero__title { font-size: clamp(2.2rem, 3.9vw, 3.9rem); line-height: 1.12; }
html[lang="ar"] .hero__title { font-size: clamp(2.1rem, 3.6vw, 3.5rem); line-height: 1.4; }
.hero__pitch { display: grid; gap: 22px; }
.hero__pitch .t-lead { color: rgba(246, 243, 236, .84); font-size: 1.02rem; }
.hero .btn--outline { --btn-fg: var(--limewash); --line: rgba(246,243,236,.4); --btn-hover-bg: var(--limewash); --btn-hover-fg: var(--basalt); }

/* ---------- Overview ---------- */
.overview { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px clamp(32px, 6vw, 112px); align-items: start; }
.overview__head { display: grid; gap: 16px; }
.overview__body .t-lead { color: var(--fg); }
.overview__body p:not(.t-lead) { color: var(--muted); }

/* ---------- Featured projects ---------- */
.featured { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(20px, 2vw, 28px); align-items: stretch; }
.flagship {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr);
  padding: clamp(28px, 3.4vw, 52px); padding-inline-end: 42%;
  min-height: clamp(420px, 40vw, 580px);
}
.flagship__body { position: relative; z-index: 2; display: grid; gap: 18px; align-content: center; }
.flagship__tower { position: absolute; bottom: 0; inset-inline-end: 3%; width: 36%; height: 104%; display: flex; align-items: flex-end; justify-content: center; z-index: 1; }
.flagship__tower img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.flagship__facts { display: grid; gap: 0; border-top: 1px solid var(--line); }
.flagship__facts > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.flagship__facts dt { color: var(--muted); }
.flagship__facts dd { font-weight: 600; text-align: end; }
.featured .project-card__media { height: 100%; }
.featured .project-card { grid-template-rows: 1fr auto; }

/* ---------- Standards ---------- */
.commits--single { grid-template-columns: 1fr; }

/* ---------- The builder: construction lifecycle ---------- */
.builder { position: relative; overflow: clip; }
.builder__head { padding-top: var(--section); display: grid; gap: 14px; max-width: 900px; }
.builder__head .t-lead { color: var(--muted); max-width: 60ch; }
.js .builder__scroll { height: 420vh; }
.builder__stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: var(--header-h); }
.builder__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 72px); align-items: center; width: 100%; }
.builder-svg { width: min(100%, 620px); max-height: calc(100svh - var(--header-h) - 80px); height: auto; margin-inline: auto; display: block; overflow: visible; }

/* SVG palette (Hauran tones on basalt) */
.builder-svg .g-plot { fill: #212425; stroke: #34383a; }
.builder-svg .g-grid { stroke: #292d2f; fill: none; }
.builder-svg .g-peg { fill: var(--hauran); }
.builder-svg .g-pit { fill: #161819; stroke: #33373a; }
.builder-svg .g-pitedge { stroke: #4a4f52; fill: none; }
.builder-svg .f-t { stroke: rgba(246,243,236,.15); }
.builder-svg .f-r, .builder-svg .f-l { stroke: rgba(246,243,236,.09); }
.builder-svg .c-conc.f-t { fill: #3B3F41; } .builder-svg .c-conc.f-r { fill: #2E3133; } .builder-svg .c-conc.f-l { fill: #242728; }
.builder-svg .hl.f-t { fill: #4C5052; } .builder-svg .hl.f-r { fill: #383C3E; } .builder-svg .hl.f-l { fill: #2B2E30; }
.builder-svg .c-wall.f-r { fill: #37393B; } .builder-svg .c-wall.f-l { fill: #2A2D2E; }
.builder-svg .c-win { fill: #191B1C; }
.builder-svg .c-door { fill: var(--oxide); }
.builder-svg .c-glass.f-r { fill: #2E3438; } .builder-svg .c-glass.f-l { fill: #242A2E; }
.builder-svg .c-mull { stroke: #5a6165; fill: none; }
.builder-svg .c-fin.f-t { fill: #4A4744; } .builder-svg .c-fin.f-r { fill: #3C3A38; } .builder-svg .c-fin.f-l { fill: #302E2C; }
.builder-svg .c-fin.hl.f-t { fill: var(--hauran); } .builder-svg .c-fin.hl.f-r { fill: #6b6862; } .builder-svg .c-fin.hl.f-l { fill: #514e49; }
.builder-svg .c-oxide.f-t { fill: #B65C36; } .builder-svg .c-oxide.f-r { fill: var(--oxide); } .builder-svg .c-oxide.f-l { fill: var(--oxide-deep); }
.builder-svg .c-line { stroke: var(--oxide); stroke-width: 1.5; fill: none; }
.builder-svg .c-lit.f-r { fill: #F6F3EC; } .builder-svg .c-lit.f-l { fill: #E4DFD4; }
.builder-svg .c-doorlit { fill: #F6F3EC; }
.builder-svg .c-pole { stroke: #F6F3EC; stroke-width: 2; fill: none; }
.builder-svg .c-flag { fill: var(--oxide); }

.js .builder-svg .bl {
  opacity: clamp(0, calc(var(--p, 0) * 1.6), 1);
  transform: translateY(calc((1 - var(--p, 0)) * -110px));
  will-change: transform, opacity;
}
.builder-svg .bl .f-t, .builder-svg .bl .f-r, .builder-svg .bl .f-l, .builder-svg .bl .c-mull { transition: fill .5s var(--ease), stroke .5s var(--ease); }
.builder-svg .bl.is-building .f-t:not(.c-lit):not(.c-doorlit) { fill: #B65C36; }
.builder-svg .bl.is-building .f-r:not(.c-lit):not(.c-doorlit):not(.c-door) { fill: #9E4A2A; }
.builder-svg .bl.is-building .f-l:not(.c-lit):not(.c-doorlit) { fill: #83391D; }
.builder-svg .bl.is-building .c-mull { stroke: #C9724B; }

.builder__side { display: grid; gap: 22px; align-content: center; min-width: 0; }
.builder__meta { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.builder__counter { font-family: var(--font-latin); font-size: .85rem; color: var(--muted); letter-spacing: .1em; direction: ltr; }
.builder__counter b { font-weight: 700; color: var(--fg); }
.builder__rail { display: flex; gap: 6px; }
.builder__rail span { width: 28px; height: 3px; background: var(--basalt-3); transition: background .4s var(--ease); }
.builder__rail span.is-on { background: var(--oxide-light); }
.builder__panels { position: relative; min-height: 290px; }
.builder__panel { display: grid; gap: 12px; align-content: start; }
.js .builder__panel { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .45s var(--ease), transform .55s var(--ease-out); }
.js .builder__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.builder__panel > .t-small { max-width: 46ch; }
.builder__why { margin-top: 6px; padding: 14px 16px; border-inline-start: 2px solid var(--accent); background: var(--basalt-2); font-size: var(--fs-small); line-height: 1.8; color: var(--muted); max-width: 48ch; }
.builder__why strong { color: var(--fg); display: block; margin-bottom: 2px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
html[lang="ar"] .builder__why strong { font-size: .9rem; letter-spacing: 0; text-transform: none; }

/* static fallback (no JS or reduced motion) */
html:not(.js) .builder__scroll, .builder.is-static .builder__scroll { height: auto; }
html:not(.js) .builder__stage, .builder.is-static .builder__stage { position: static; height: auto; padding-block: 32px var(--section); align-items: start; }
html:not(.js) .builder__panels, .builder.is-static .builder__panels { min-height: 0; display: grid; gap: 24px; }
.builder.is-static .builder__panel { position: static; opacity: 1; transform: none; pointer-events: auto; }
.builder.is-static .builder-svg .bl { opacity: 1 !important; transform: none !important; }
html:not(.js) .builder__meta, .builder.is-static .builder__meta { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero__row { grid-template-columns: 1fr; }
  .hero__pitch { max-width: 640px; }
  .overview { grid-template-columns: 1fr; }
  .featured { grid-template-columns: 1fr; }
  .featured .project-card__media { height: auto; }
}
@media (max-width: 960px) {
  .builder__grid { grid-template-columns: 1fr; gap: 10px; align-content: center; }
  .builder__stage { padding-top: calc(var(--header-h) + 8px); }
  .builder-svg { width: min(100%, 400px); max-height: 38svh; }
  .builder__panels { min-height: 250px; }
  .builder__why { max-width: none; }
  .flagship { padding-inline-end: clamp(28px, 3.4vw, 52px); padding-bottom: 0; min-height: 0; grid-template-columns: 1fr; }
  .flagship__tower { position: relative; inset: auto; width: 56%; max-width: 280px; height: auto; margin: 20px auto 0; }
  .flagship__tower img { height: auto; }
}
@media (max-width: 720px) {
  /* Mobile hero: the photograph as a block (mark fully visible), text below on basalt */
  .hero { min-height: 0; background: var(--basalt); }
  .hero__media { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5; }
  .hero__media img { transform: none; object-position: 50% 50%; }
  .hero__shade { position: absolute; inset: 0 0 auto 0; height: auto; aspect-ratio: 4 / 5;
    background: linear-gradient(180deg, rgba(28,30,31,.7) 0%, rgba(28,30,31,0) 22%, rgba(28,30,31,0) 78%, var(--basalt) 100%); }
  .hero__content { padding-top: 8px; gap: 28px; }
  .hero__title, html[lang="ar"] .hero__title { font-size: clamp(1.9rem, 8.2vw, 2.4rem); }
  .hero__facts { grid-template-columns: 1fr 1fr; }
  .hero__fact { padding-block: 14px 0; }
  .hero .cluster .btn { flex: 1 1 auto; }
  .builder__head { padding-top: calc(var(--section) * .8); }
  .builder-svg { max-height: 34svh; }
  .builder__panels { min-height: 270px; }
  .builder__panel .t-h3 { font-size: 1.15rem; }
  .builder__why { padding: 12px 14px; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .builder-svg { max-height: 28svh; }
  .builder__why { display: none; }
  .builder__panels { min-height: 170px; }
}