/* ---------- home: the building stage ---------- */
.stage { position: relative; background: var(--midnight); color: #fff; }
.stage-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage-gl { position: absolute; inset: 0; }
.stage-gl canvas { width: 100% !important; height: 100% !important; }
/* phones: a pre-rendered still of the same model until the live 3D starts on first touch/scroll */
.stage.has-poster .stage-gl { background: #11151c url(/assets/img/hero-poster.webp) 50% 0 / cover no-repeat; }
@media (min-width: 961px) {
  .stage.has-poster .stage-gl { background-image: url(/assets/img/hero-poster-d.webp); background-position: 50% 50%; }
  html[dir="rtl"] .stage.has-poster .stage-gl { background-image: url(/assets/img/hero-poster-d-ar.webp); }
}
.stage.has-poster .stage-gl canvas { animation: gl-in .5s ease-out both; }
@keyframes gl-in { from { opacity: 0; } }
/* capture helper for regenerating the still (?poster): only the canvas is visible */
.poster-shot * { visibility: hidden !important; }
.poster-shot .stage-gl, .poster-shot .stage-gl canvas { visibility: visible !important; }
.stage-fallback { position: absolute; inset: 15% 4% 15% 44%; display: none; }
.stage-fallback svg { width: 100%; height: 100%; }
html[dir="rtl"] .stage-fallback { inset: 15% 44% 15% 4%; }
.stage.no-gl .stage-fallback, .stage-gl.gl-lost + .stage-fallback { display: block; }
/* scrim behind the hero copy (C14 as amended) plus the moving key light */
.stage-shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 600px at var(--lx, 70%) var(--ly, 20%), rgba(201, 146, 86, .08), rgba(127, 208, 234, .03) 40%, transparent 70%),
    linear-gradient(90deg, rgba(17, 21, 28, .90) 0%, rgba(17, 21, 28, .82) 34%, rgba(17, 21, 28, .55) 50%, rgba(17, 21, 28, 0) 70%); }
html[dir="rtl"] .stage-shade { background: radial-gradient(900px 600px at var(--lx, 30%) var(--ly, 20%), rgba(201, 146, 86, .08), rgba(127, 208, 234, .03) 40%, transparent 70%),
    linear-gradient(270deg, rgba(17, 21, 28, .90) 0%, rgba(17, 21, 28, .82) 34%, rgba(17, 21, 28, .55) 50%, rgba(17, 21, 28, 0) 70%); }
.stage-shade::before { content: ""; position: absolute; inset: 0 0 auto; height: 160px; background: linear-gradient(180deg, rgba(17, 21, 28, .72), rgba(17, 21, 28, 0)); }
.stage-shade::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(0deg, var(--midnight), rgba(17, 21, 28, 0)); }
.stage-sticky::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); z-index: 1; }

/* hero toolbar: Realistic | Engineering and the system buttons, as glass segmented controls */
.stage-ui { position: absolute; z-index: 5; bottom: 72px; inset-inline-end: var(--gutter); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transition: opacity .3s, transform .3s var(--ease); }
.stage-ui.is-hidden { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; }
.sys-toggle > button i { display: inline-block; width: 9px; height: 9px; }
.g-hvac { border-radius: 50%; background: var(--hvac); }
.g-elec { background: var(--elec); transform: rotate(45deg) scale(.85); }
.g-fls { background: var(--fls); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.g-plmb { background: var(--plmb); }
.sys-toggle > button[aria-pressed="true"] .g-hvac { background: var(--hvac-ink); }
.sys-toggle > button[aria-pressed="true"] .g-elec { background: var(--elec-ink); }
.sys-toggle > button[aria-pressed="true"] .g-fls { background: var(--fls-ink); }
.sys-toggle > button[aria-pressed="true"] .g-plmb { background: var(--plmb-ink); }

.chapter-index { position: absolute; z-index: 4; inset-inline-end: var(--gutter); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; font: 600 var(--fs-cap)/1.4 var(--f-body); opacity: 0; transition: opacity .3s; }
.stage.in-tour .chapter-index { opacity: 1; }
.chapter-index li { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--on-dark-3); transition: color .2s; }
.chapter-index li::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: width .25s var(--ease); }
.chapter-index li.on { color: #fff; }
.chapter-index li.on::after { width: 32px; background: var(--copper-lite); }
.model-note { position: absolute; z-index: 4; bottom: 24px; inset-inline-start: var(--gutter); font: 500 var(--fs-2xs)/1.4 var(--f-body); color: var(--on-dark-3); max-width: none; }
.model-link { position: absolute; z-index: 5; bottom: 18px; inset-inline-end: var(--gutter); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, .45); }
.model-link:hover { text-decoration-color: #fff; }
.model-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
html[dir="rtl"] .model-link svg { transform: scaleX(-1); }

.chapters { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.chapter { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--header-h) + 24px) 112px; }
.chapter > .wrap { width: 100%; }
.chapter a, .chapter button, .chapter .ch-card { pointer-events: auto; }
.chapter--hero { position: relative; }
.hero-copy { max-width: 520px; pointer-events: auto; }
@media (min-width: 1100px) { .hero-copy h1 { max-width: min(520px, 34vw); } }
.hero-copy h1 { margin: 18px 0 24px; font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); }
.hero-copy h1 em { color: var(--copper-lite); }
.hero-copy .lede { color: var(--on-dark-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* chapter cards fade in as their chapter reaches the middle of the screen. Opacity only (never visibility),
   so screen readers and Tab always reach them; a focused link shows its own card; no JS, a failed home.js,
   reduced motion and touch screens (fast flicks) all get the cards fully shown */
.ch-card { max-width: 440px; padding: 28px 30px; border-radius: var(--r-lg); display: grid; gap: 14px; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.chapter.is-active .ch-card, .chapter:focus-within .ch-card, html:not(.js) .ch-card, .stage:not(.ch-live) .ch-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) { .ch-card { opacity: 1; transform: none; transition: none; } }
.stage-gl canvas:focus-visible { outline: 2px solid var(--copper-lite); outline-offset: -4px; }
.ch-card:not(.glass) { background: var(--midnight-2); border: 1px solid var(--midnight-3); box-shadow: var(--lip); }
.ch-card p { color: var(--on-dark-2); }
.ch-card .ch-n { font: 600 var(--fs-cap)/1.4 var(--f-body); color: var(--copper-lite); }
.ch-card .arrow-link { justify-self: start; color: #fff; font-size: var(--fs-sm); border-bottom: 0; text-decoration: underline; text-underline-offset: 6px; padding-block: 12px; }

@media (max-width: 960px) {
  .stage-shade, html[dir="rtl"] .stage-shade { background: linear-gradient(0deg, rgba(17, 21, 28, .94) 0%, rgba(17, 21, 28, .84) 42%, rgba(17, 21, 28, .5) 54%, rgba(17, 21, 28, 0) 66%); }
  .chapter { align-items: flex-end; padding-bottom: 32px; }
  .chapter--hero { align-items: flex-end; padding-bottom: 40px; }
  .hero-copy { max-width: 560px; }
  .hero-copy h1 { margin: 12px 0 14px; }
  .hero-actions { margin-top: 22px; }
  .chapter-index, .model-note, .model-link { display: none; }
  /* one compact row under the header: look switch, then a swipeable systems strip */
  .stage-ui { top: calc(var(--header-h) + 6px); bottom: auto; inset-inline: var(--gutter); flex-direction: column; align-items: flex-start; gap: 6px; }
  .stage-ui .seg { flex-wrap: nowrap; max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .stage-ui .seg::-webkit-scrollbar { display: none; }
  .look-toggle { flex: none; }
  .stage-ui .seg:not(.look-toggle) { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent); }
  html[dir="rtl"] .stage-ui .seg:not(.look-toggle) { -webkit-mask: linear-gradient(270deg, #000 calc(100% - 24px), transparent); mask: linear-gradient(270deg, #000 calc(100% - 24px), transparent); }
  .stage-ui .seg > button { flex: none; min-height: 40px; padding: 0 10px; white-space: nowrap; }
  .stage-ui .seg:not(.look-toggle) > button:last-child { margin-inline-end: 24px; }
  .ch-card { padding: 22px; max-width: none; }
}
/* short portrait screens (small phones, browser chrome open): keep only the look switch so the toolbar never meets the headline */
@media (max-width: 960px) and (max-height: 720px) and (orientation: portrait) {
  .stage-ui .sys-toggle { display: none; }
  .hero-copy .lede { font-size: .95rem; line-height: 1.5; }
}
@media (max-width: 960px) and (max-height: 600px) and (orientation: portrait) {
  .stage-ui { display: none; }
}
/* phones in landscape and other short screens: copy beside the building */
@media (orientation: landscape) and (max-height: 540px) {
  .stage-ui, .chapter-index, .model-note, .model-link { display: none !important; }
  .stage-shade { background: linear-gradient(90deg, rgba(17, 21, 28, .92) 0%, rgba(17, 21, 28, .6) 40%, rgba(17, 21, 28, 0) 62%) !important; }
  html[dir="rtl"] .stage-shade { background: linear-gradient(270deg, rgba(17, 21, 28, .92) 0%, rgba(17, 21, 28, .6) 40%, rgba(17, 21, 28, 0) 62%) !important; }
  .chapter, .chapter--hero { align-items: center; padding-block: calc(var(--header-h) + 8px) 16px; }
  .hero-copy { max-width: 52%; }
  .hero-copy .label { display: none; }
  .hero-copy h1 { font-size: clamp(1.7rem, 4.6vw, 2.4rem); margin: 0 0 10px; }
  .hero-copy .lede { font-size: .95rem; line-height: 1.45; }
  .hero-actions { margin-top: 14px; gap: 8px; }
  .hero-actions .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .ch-card { max-width: 46%; padding: 18px 20px; gap: 8px; }
  .ch-card h2 { font-size: 1.15rem; }
  .ch-card p { font-size: 14px; line-height: 1.45; }
}

/* v7: the neutral visit/assessment explainer under the hero buttons, and the phone-only link to /explore/ */
.hero-explain { margin-top: 18px; max-width: 46ch; font-size: var(--fs-sm); line-height: 1.5; color: var(--on-dark-3); }
.hero-explain b { color: var(--on-dark-2); font-weight: 600; }
.hero-explore { display: none; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: var(--fs-sm); font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, .45); }
.hero-explore svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
html[dir="rtl"] .hero-explore svg { transform: scaleX(-1); }

/* v7 phones (portrait, below 768px): the message comes before the model. Order: label, H1, lede, buttons, then the model
   as a band of about 45svh that stays pinned under the header while the four chapter cards scroll beneath it.
   .chapters is flattened (display: contents) so the hero copy can sit above the band; data-ch 0..4 are unchanged for home.js. */
@media (max-width: 767px) and (orientation: portrait) {
  .stage { display: flex; flex-direction: column; }
  .chapters { display: contents; }
  .chapter { position: relative; z-index: 2; pointer-events: none; order: 1; min-height: 0; align-items: flex-start; padding-block: 28px 8px; }
  .chapter:last-child { padding-bottom: 48px; }
  .chapter--hero { order: -1; z-index: 2; align-items: flex-start; padding-block: calc(var(--header-h) + 20px) 20px; }
  .hero-copy { max-width: none; }
  .hero-copy h1 { margin: 10px 0 14px; font-size: clamp(2.1rem, 1.2rem + 4.6vw, 2.75rem); }
  .hero-actions { margin-top: 20px; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-explain { margin-top: 14px; font-size: var(--fs-2xs, .8125rem); }
  .hero-explore { display: inline-flex; }
  .stage-ui { display: none !important; }
  .stage-sticky { order: 0; z-index: 3; top: var(--header-h); height: 45vh; height: 45svh; min-height: 260px; }
  .stage.has-poster .stage-gl { background-image: url(/assets/img/hero-poster-band.webp); background-position: 50% 50%; }
  .stage-shade, html[dir="rtl"] .stage-shade { background: linear-gradient(0deg, rgba(17, 21, 28, .55) 0%, rgba(17, 21, 28, 0) 30%); }
  .stage-shade::before { height: 56px; }
  .stage-shade::after { height: 14%; }
  .stage-fallback, html[dir="rtl"] .stage-fallback { inset: 8% 18%; }
  .ch-card { padding: 22px; max-width: none; }
  /* v8: the building comes straight after the headline, so it is in the first screen and can be turned at once.
     The hero chapter, its wrap and the copy are flattened so label + H1 sit above the band and the rest below it. */
  .chapter--hero, .chapter--hero > .wrap, .chapter--hero .hero-copy { display: contents; }
  .hero-copy > * { position: relative; z-index: 2; padding-inline: var(--gutter); pointer-events: auto; }
  .hero-copy > .label { order: -3; margin: 0; padding-top: calc(var(--header-h) + 16px); }
  .hero-copy > h1 { order: -2; margin: 8px 0 16px; font-size: clamp(2rem, 1.1rem + 4.6vw, 2.6rem); }
  .stage-sticky { order: -1; height: 42vh; height: 42svh; min-height: 250px; }
  .hero-copy > .lede { order: 0; margin-top: 18px; }
  .hero-copy > .hero-actions, .hero-copy > .hero-explain, .hero-copy > .hero-explore { order: 0; }
  .hero-copy > .hero-explore { display: flex; width: fit-content; padding-inline: 0; margin-inline: var(--gutter); margin-bottom: 8px; }
  .hero-copy > .stage-ui, .hero-copy > .model-link { display: none !important; }
  .chapter[data-ch="1"] { padding-top: 40px; }
  /* touch hint on the band: fades once the visitor has turned the model */
  .turn-hint { position: absolute; z-index: 4; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(17, 21, 28, .72); border: 1px solid rgba(255, 255, 255, .14); font: 600 var(--fs-2xs, .8125rem)/1.2 var(--f-body); color: #fff; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
  .turn-hint svg { width: 22px; height: 12px; fill: none; stroke: var(--copper-lite); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .stage.turned .turn-hint, .stage.in-tour .turn-hint, .stage.no-gl .turn-hint { opacity: 0; }
}
@media not all and (max-width: 767px) and (orientation: portrait) { .turn-hint { display: none; } }
@media (pointer: fine) { .turn-hint { display: none; } }

/* ---------- intro ---------- */
.intro .statement { font-family: var(--f-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); line-height: 1.25; letter-spacing: -0.014em; font-weight: 500; max-width: 24ch; }
html[lang="ar"] .intro .statement { max-width: 30ch; }
.intro .muted { max-width: 60ch; }

/* ---------- phasing programme chart (on sand) ---------- */
.phasing { --pc-trading: #d4cdbf; --pc-done: #3a3f49; --pc-label: 3.25rem; --pc-status: 7.5rem; }
.phase { display: grid; gap: 28px; }
.phase-control { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 28px; align-items: center; padding: 18px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair-strong); }
.phase-week { display: flex; align-items: baseline; gap: 10px; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }
.phase-week output { font-size: 2.25rem; font-weight: 500; line-height: 1; min-width: 2ch; text-align: end; }
.phase-of { color: var(--slate); font-weight: 500; }
.phase-control input { width: 100%; height: 44px; accent-color: var(--ink); cursor: pointer; }

.phase-chart { position: relative; display: grid; gap: 4px; --w: 9; }
.pc-row { display: grid; grid-template-columns: var(--pc-label) minmax(0, 1fr) var(--pc-status); gap: 12px; align-items: center; }
.pc-lv { font-size: var(--fs-sm); color: var(--slate); text-align: end; }
.pc-head .pc-lv { font: 600 var(--fs-2xs)/1.2 var(--f-body); }
.pc-axis, .pc-cells { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); }
.pc-axis span { font-size: var(--fs-2xs); color: var(--slate); text-align: center; }
.pc-cells { gap: 2px; height: 26px; }
.pc-cells i { display: block; background: var(--pc-trading); }
.pc-cells i[data-s="works"] { background: repeating-linear-gradient(-45deg, #9c5f2a 0 6px, #8a5222 6px 12px); }
.pc-cells i[data-s="testing"] { background: #fff; box-shadow: inset 0 0 0 1.5px #9c5f2a; }
.pc-cells i[data-s="done"] { background: var(--pc-done); }
.pc-st { font: 600 var(--fs-cap)/1.2 var(--f-body); color: var(--slate); }
.pc-head .pc-st { font-size: var(--fs-2xs); }
.pc-row[data-now="works"] .pc-st { color: var(--copper-ink); }
.pc-row[data-now="testing"] .pc-st, .pc-row[data-now="done"] .pc-st { color: var(--ink); }
.pc-row[data-now="works"] .pc-lv, .pc-row[data-now="testing"] .pc-lv { color: var(--ink); font-weight: 600; }
/* week cursor: centre of column --w inside the cells track (mirrors in RTL) */
.pc-cursor { position: absolute; top: 0; bottom: -4px; width: 2px; background: #12161f; pointer-events: none;
  inset-inline-start: calc(var(--pc-label) + 12px + (100% - var(--pc-label) - var(--pc-status) - 24px) * (var(--w) - .5) / 24 - 1px); }

.phase-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair-strong); }
.phase-stats div { padding: 16px 16px 0 0; }
.phase-stats div + div { padding-inline-start: 16px; border-inline-start: 1px solid var(--hair-strong); }
.phase-stats dt { font-size: var(--fs-cap); font-weight: 600; color: var(--slate); }
.phase-stats dd { margin-top: 4px; }
.phase-stats dd b { font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 500; }
.phase-stats .of { color: var(--slate); font-size: var(--fs-sm); }
.phase-key { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--fs-sm); color: var(--ink); }
.phase-key li { display: flex; align-items: center; gap: 8px; }
.phase-key i { width: 16px; height: 12px; background: var(--pc-trading); }
.phase-key [data-k="works"] i { background: repeating-linear-gradient(-45deg, #9c5f2a 0 3px, #8a5222 3px 6px); }
.phase-key [data-k="testing"] i { background: #fff; box-shadow: inset 0 0 0 1.5px #9c5f2a; }
.phase-key [data-k="done"] i { background: var(--pc-done); }
.phase-key [data-k="now"] i { width: 2px; height: 16px; background: #12161f; }
.phase-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; }
.phase-foot .note { max-width: 60ch; }
@media (max-width: 720px) {
  .phasing { --pc-label: 1.75rem; --pc-status: 0px; }
  .pc-row { gap: 8px; }
  .pc-st { display: none; }
  .pc-cells { gap: 1px; height: 22px; }
  .pc-cursor { inset-inline-start: calc(var(--pc-label) + 8px + (100% - var(--pc-label) - 16px) * (var(--w) - .5) / 24 - 1px); }
  .pc-axis span:nth-child(7) { visibility: hidden; }
  .phase-control { grid-template-columns: 1fr; }
  .phase-stats { grid-template-columns: 1fr; }
  .phase-stats div + div { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--hair-strong); padding-top: 12px; margin-top: 12px; }
  .phase-stats div { padding: 12px 0 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
}