/* VIRA Construction Limited — site layout & motion layer.
   Sits on top of the kit: tokens.css → vira.css → site.css.
   Brand rules kept: square corners, no shadows, no gradients, terracotta text only for large type and short labels. */

/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: clip; }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--terracotta); color: var(--char); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--space-page); }
@media (max-width: 720px) { :root { --space-page: 16px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--char); color: var(--sand); padding: 10px 14px; font-family: var(--font-mono); font-size: 13px; }
.skip:focus { top: 12px; }

.section { padding: clamp(48px, 5.5vw, 80px) 0; }
.section--tight { padding: clamp(48px, 6vw, 80px) 0; }
.section--char { background: var(--char); color: var(--sand); }
.section--raised { background: var(--sand-dim); }

/* Bigger display sizes for the web (the kit sizes are print-scale) */
.display-hero { font-size: clamp(32px, 5vw, 68px); line-height: .96; }
.display-xl { font-size: clamp(26px, 3.3vw, 48px); line-height: 1; }
.display-lg { font-size: clamp(22px, 2.5vw, 36px); line-height: 1.04; }
.vira-display { overflow-wrap: break-word; }
@media (max-width: 420px) { .display-hero { font-size: clamp(30px, 8.6vw, 36px); } .display-xl { font-size: clamp(23px, 6.6vw, 28px); } .display-lg { font-size: clamp(21px, 6vw, 26px); } }
.lead { font-family: var(--font-serif); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.45; max-width: 46ch; margin: 0; }
.body { font-family: var(--font-serif); font-size: 17px; line-height: 1.55; margin: 0; }
.muted { color: var(--ink-muted); }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 18px 48px; flex-wrap: wrap; margin-bottom: clamp(24px, 2.8vw, 40px); }
.head-row .vira-section-head { flex-direction: column; align-items: flex-start; gap: 18px; }
.vira-section-head__lead::before { content: ""; width: 28px; height: 2px; background: var(--accent); flex: none; }
.section--char .vira-chip { background: var(--sand); color: var(--char); }
.section--char .vira-eyebrow { color: var(--clay-light); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 22px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: color .35s ease; }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--char); transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.7,0,.2,1); z-index: -1; }
.btn:hover { color: var(--sand); }
.btn:hover::before { transform: scaleY(1); }
.btn--accent { background: var(--terracotta); border-color: var(--terracotta); color: var(--char); }
.btn--on-char { color: var(--sand); }
.btn--on-char::before { background: var(--sand); }
.btn--on-char:hover { color: var(--char); }
.btn .arrow { display: inline-block; transition: transform .35s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.link-arrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 4px; }
.link-arrow:hover { color: var(--accent); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 90; background: var(--sand); border-bottom: 1px solid var(--hairline); transition: transform .5s cubic-bezier(.7,0,.2,1); }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.site-header .brand img { height: 26px; display: block; }
.site-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
/* Nav hover: the label slides right */
.site-nav a { position: relative; display: inline-flex; align-items: center; text-decoration: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; padding: 6px 0; transition: color .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); transform: translateX(6px); }
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.7,0,.2,1); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-nav a[aria-current="page"] { color: inherit; }
@media (max-width: 1180px) and (min-width: 961px) { .site-nav ul { gap: 20px; } .site-nav a { letter-spacing: .16em; } }
.header-cta { padding: 12px 16px; font-size: 12px; }
/* Menu button: three lines, no box; the outer lines cross into an X and the middle one fades when open */
.menu-btn { display: none; width: 44px; height: 44px; border: 0; padding: 0; background: none; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--char); transition: transform .4s cubic-bezier(.7,0,.2,1), top .4s cubic-bezier(.7,0,.2,1), opacity .25s ease, background .3s ease; }
.menu-btn span:nth-child(1) { top: 14px; } .menu-btn span:nth-child(2) { top: 21px; } .menu-btn span:nth-child(3) { top: 28px; }
.menu-open .menu-btn span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-open .menu-btn span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
@media (max-width: 960px) { .site-nav, .header-cta { display: none; } .menu-btn { display: block; } }

/* Mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 85; background: var(--char); color: var(--sand); padding: 100px var(--space-page) 32px; display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s .7s; }
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s cubic-bezier(.7,0,.2,1); }
.menu-open .site-header { background: var(--char); border-color: transparent; }
.menu-open .menu-btn span { background: var(--sand); }
.mobile-menu ol { list-style: none; margin: 0; padding: 0; counter-reset: m; }
.mobile-menu li { overflow: hidden; border-bottom: 1px solid rgba(245,236,229,.12); }
.mobile-menu li a { display: flex; align-items: center; padding: 14px 0; transition: transform .7s cubic-bezier(.2,.8,.2,1), padding .45s cubic-bezier(.2,.8,.2,1), color .3s ease; text-decoration: none; font-family: var(--font-display); font-stretch: 112.5%; font-weight: 700; text-transform: uppercase; font-size: clamp(30px, 8vw, 44px); line-height: 1; transform: translateY(105%); }
.mobile-menu li a:hover, .mobile-menu li a:focus-visible { color: var(--terracotta); padding-left: .35em; }
.menu-open .mobile-menu li a { transform: none; }
.menu-open .mobile-menu li:nth-child(2) a { transition-delay: .05s; } .menu-open .mobile-menu li:nth-child(3) a { transition-delay: .1s; }
.menu-open .mobile-menu li:nth-child(4) a { transition-delay: .15s; } .menu-open .mobile-menu li:nth-child(5) a { transition-delay: .2s; }
.menu-open .mobile-menu li:nth-child(6) a { transition-delay: .25s; }
.mobile-menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--terracotta); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.mobile-menu .vira-eyebrow { color: var(--clay-light); }

/* ---------- Page curtain (transitions) & loader ---------- */
.curtain { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.curtain i { position: absolute; inset: 0; background: var(--terracotta); transform: scaleY(0); transform-origin: bottom; }
.curtain i + i { background: var(--char); }
.curtain .curtain__mark { position: absolute; left: 50%; top: 50%; width: min(220px, 50vw); transform: translate(-50%, -50%); opacity: 0; }
html.is-leaving .curtain i { transform: scaleY(1); transition: transform .55s cubic-bezier(.7,0,.2,1); }
html.is-leaving .curtain i + i { transition-delay: .08s; }
html.is-entering .curtain i { transform: scaleY(1); transform-origin: top; }

.loader { position: fixed; inset: 0; z-index: 160; background: var(--char); display: grid; place-items: center; }
.loader svg { width: min(420px, 70vw); overflow: visible; }
.loader__meta { position: absolute; left: 0; right: 0; bottom: 40px; display: flex; justify-content: space-between; padding: 0 var(--space-page); color: var(--clay-light); }
.loader__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--terracotta); transform: scaleX(0); transform-origin: left; }
html:not(.js) .loader { display: none; }

/* ---------- Reveal helpers (hidden only when JS is running) ---------- */
html.js [data-reveal] { opacity: 0; }
html.js .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
html.js .split .w > span { display: inline-block; transform: translateY(110%); }
.line-mask { display: block; overflow: hidden; padding-bottom: .04em; }
.line-mask > span { display: block; }
html.js .line-mask > span { transform: translateY(105%); }
html.reduce-motion [data-reveal] { opacity: 1 !important; }
html.reduce-motion .split .w > span, html.reduce-motion .line-mask > span { transform: none !important; }

.img-reveal { position: relative; overflow: hidden; }
.img-reveal img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.js .img-reveal[data-reveal] { opacity: 1; clip-path: inset(0 0 100% 0); }
html.reduce-motion .img-reveal[data-reveal] { clip-path: none !important; }

/* ============ HOME — scroll-driven hero: 2D sketch → 3D sketch → render ============ */
.build { position: relative; height: 320vh; background: var(--sand); }
.build__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(340px, 0.82fr) 1.5fr; align-items: center; gap: 0 clamp(24px, 3vw, 48px); padding: 72px var(--space-page) 0; max-width: 1640px; margin: 0 auto; }
.build__paper { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size: 32px 32px; opacity: .35; }
.build__copy { position: relative; z-index: 2; align-self: center; }
.build__meta { display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
.build__meta .vira-eyebrow:first-child { color: var(--accent); }
.build__title { margin: 0; font-size: clamp(36px, 4.2vw, 64px); white-space: nowrap; }
.build__title .line-mask + .line-mask { margin-top: .02em; }
.build__standfirst { margin-top: clamp(24px, 3vw, 36px); }
.build__phases { position: relative; margin-top: clamp(28px, 4vw, 44px); height: 112px; }
.phase { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; gap: 8px; align-content: start; opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.phase.is-active { opacity: 1; transform: none; }
.phase__num { grid-row: span 2; font-family: var(--font-display); font-stretch: 112.5%; font-weight: 700; font-size: 44px; line-height: 1; color: var(--accent); }
.phase__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; font-stretch: 112.5%; }
.phase p { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.45; max-width: 34ch; }
.build__progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 18px; max-width: 360px; }
.build__progress span { display: block; height: 2px; background: var(--hairline); position: relative; overflow: hidden; }
.build__progress span i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.build__progress-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 360px; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }

/* fits whichever runs out first: the column's width, or the screen height left under the header (room for the readout) */
.build__visual { position: relative; z-index: 1; width: min(100%, calc((100svh - 72px - 64px) * 1.3333)); aspect-ratio: 1448 / 1086; align-self: center; justify-self: center; margin-bottom: 26px; }
.build__visual canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.build__tiles { position: absolute; inset: 0; display: grid; }
.build__tiles div { background-image: var(--photo); background-repeat: no-repeat; opacity: 0; }
.build__readout { position: absolute; left: 0; right: 0; bottom: -4px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.build__readout b { font-weight: 400; color: var(--accent); }
.build__tag { position: absolute; right: 2%; bottom: 9%; background: var(--sand); padding: 8px 12px; opacity: 0; }
.build__viz { opacity: 0; }
.build__scroll { position: absolute; left: var(--space-page); bottom: 26px; display: flex; align-items: center; gap: 14px; color: var(--ink-muted); }
.build__scroll i { order: -1; width: 1px; height: 44px; background: var(--hairline); position: relative; overflow: hidden; }
.build__scroll i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--accent); animation: scrollcue 1.8s cubic-bezier(.7,0,.2,1) infinite; }
@keyframes scrollcue { to { top: 100%; } }

.build.is-static { height: auto; }
.build.is-static .build__stage { position: relative; height: auto; min-height: 100vh; padding-bottom: 48px; }
.build.is-static .build__scroll { display: none; }
@media (max-width: 900px) {
  .build { height: 400vh; }
  .build__stage { grid-template-columns: 1fr; align-content: start; padding-top: 92px; gap: 18px; }
  .build__meta { margin-bottom: 14px; }
  .build__title.display-hero { font-size: clamp(36px, 11vw, 60px); }
  .build__standfirst { display: none; }
  .build__phases { height: 92px; margin-top: 16px; }
  .phase__num { font-size: 32px; }
  .phase p { font-size: 15px; }
  .build__progress, .build__progress-labels { max-width: none; }
  .build__scroll { display: none; }
  .build__visual { width: min(100%, calc((100svh - 440px) * 1.333)); justify-self: center; margin-bottom: 22px; }
  .build__readout { bottom: -20px; font-size: 10px; letter-spacing: .12em; }
  .build__tag { font-size: 10px; letter-spacing: .16em; padding: 5px 8px; right: 0; bottom: 4%; }
  .build__viz { font-size: 9px; }
}
@media (max-width: 900px) and (max-height: 700px) {
  .build__meta { display: none; }
  .build__phases { height: 72px; }
  .phase p { font-size: 14px; }
}
@media (max-height: 760px) and (min-width: 901px) { .build__standfirst { display: none; } }

/* ---------- Sector strip & marquee ---------- */
.sectors .vira-categories > * { padding: 30px 8px; font-size: 19px; }
.marquee { overflow: hidden; border-block: 1px solid var(--hairline); padding: 22px 0; white-space: nowrap; }
.marquee__track { display: inline-flex; gap: 48px; }
.marquee__track span { font-family: var(--font-display); font-stretch: 112.5%; font-weight: 700; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 36px); line-height: 1; display: inline-flex; align-items: center; gap: 40px; }
.marquee__track span::after { content: ""; width: 14px; height: 14px; background: var(--terracotta); }
.marquee__track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px var(--char); }

/* ---------- Stats ---------- */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--terracotta); color: var(--char); }
.stats-band > div { padding: clamp(28px, 4vw, 48px) clamp(18px, 2.4vw, 36px); }
.stats-band > div + div { border-left: 1px solid var(--hairline-on-accent); }
.stats-band b { display: block; font-family: var(--font-display); font-stretch: 112.5%; font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1; white-space: nowrap; }
.stats-band span { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.stats-band--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .stats-band { grid-template-columns: 1fr 1fr; } .stats-band > div:nth-child(3) { border-left: 0; } .stats-band > div:nth-child(n+3) { border-top: 1px solid var(--hairline-on-accent); } }
@media (max-width: 860px) { .stats-band--3 { grid-template-columns: 1fr 1fr 1fr; } .stats-band--3 > div:nth-child(3) { border-left: 1px solid var(--hairline-on-accent); border-top: 0; } }
@media (max-width: 520px) {
  .stats-band, .stats-band--3 { grid-template-columns: 1fr; }
  .stats-band > div + div, .stats-band--3 > div + div { border-left: 0 !important; border-top: 1px solid var(--hairline-on-accent) !important; }
  .stats-band > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 16px; }
  .stats-band b { font-size: 32px; }
  .stats-band span { margin-top: 0; text-align: right; max-width: 16ch; }
}

/* ---------- Services teaser ---------- */
.services-lg { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hairline); }
.svc { position: relative; padding: 32px 28px 36px 0; border-bottom: 1px solid var(--hairline); display: grid; gap: 18px; align-content: start; }
.svc + .svc { padding-left: 28px; }
.services-lg .svc:nth-child(3n+1) { padding-left: 0; }
.services-lg .svc:not(:nth-child(3n+1)) { border-left: 1px solid var(--hairline); }
.svc h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.15; }
.svc p { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.5; }
.svc__num { position: absolute; top: 34px; right: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.svc .vira-icon-badge { width: 56px; height: 56px; transition: background .4s ease; }
.svc .vira-icon-badge img { width: 32px; height: 32px; }
.svc:hover .vira-icon-badge { background: var(--accent-tint); }
@media (max-width: 860px) { .services-lg { grid-template-columns: 1fr; } .svc, .svc + .svc { padding-left: 0 !important; border-left: 0 !important; } }

/* ---------- Horizontal project rail ---------- */
.rail { position: relative; background: var(--char); color: var(--sand); overflow: hidden; }
.rail__inner { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 72px 0 40px; }
.rail__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.rail__track { display: flex; gap: 20px; padding: 0 var(--space-page); }
.rail__card { flex: none; width: clamp(240px, 23vw, 360px); }
.rail__card--wide { width: clamp(300px, 34vw, 520px); }
.rail__card .img-reveal { height: clamp(240px, 40vh, 400px); }
.rail__card .vira-caption { padding: 14px 16px 16px; }
.rail__card .vira-caption__title { font-size: 18px; }
.rail__count { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--clay-light); }
.rail__progress { height: 1px; background: rgba(245,236,229,.16); margin: 0 var(--space-page); position: relative; }
.rail__progress i { position: absolute; inset: 0; background: var(--terracotta); transform: scaleX(0); transform-origin: left; }
@media (max-width: 760px), (max-height: 560px) {
  .rail__inner { height: auto; padding: 72px 0; }
  .rail__track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .rail__card { scroll-snap-align: start; width: 82vw; }
  .rail__progress { display: none; }
}

/* ---------- Proof rows ---------- */
.proof-list .vira-proof { grid-template-columns: 200px 1fr 1.6fr; padding: 28px 0; }
.proof-list .vira-proof__fig b { font-size: clamp(32px, 3vw, 44px); }
.proof-list .vira-proof h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.proof-list .vira-proof p { font-size: 17px; line-height: 1.5; }
@media (max-width: 720px) { .proof-list .vira-proof { grid-template-columns: 1fr; } }

/* ---------- Workshop teaser ---------- */
.workshop-teaser { position: relative; overflow: hidden; background: var(--char); color: var(--sand); min-height: 68vh; display: grid; align-items: end; }
.workshop-teaser__bg { position: absolute; inset: -12% 0; }
.workshop-teaser__bg img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .55; }
.workshop-teaser .wrap { position: relative; padding-top: 120px; padding-bottom: clamp(48px, 7vw, 96px); width: 100%; }
.workshop-teaser__panel { background: var(--char); padding: clamp(20px, 3vw, 44px); max-width: 760px; box-sizing: border-box; }
.workshop-teaser__panel .display-xl { font-size: clamp(26px, 3.3vw, 48px); }
.workshop-teaser__panel .lead { max-width: 52ch; }
.workshop-teaser__panel .lead { margin-top: 18px; }
.workshop-teaser__panel .btn { margin-top: 28px; }

/* ---------- Journey (process) ---------- */
.journey { background: var(--char); color: var(--sand); }
.journey__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.journey__line { position: absolute; top: 36px; left: 8.33%; right: 8.33%; height: 1px; background: rgba(213,80,43,.25); }
.journey__line i { position: absolute; inset: 0; background: var(--terracotta); transform: scaleX(0); transform-origin: left; }
.journey__steps li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.journey__steps .vira-step__circle { width: 72px; height: 72px; transition: background .5s ease; }
.journey__steps .vira-step__circle img { width: 38px; height: 38px; }
.journey__steps li.is-lit .vira-step__circle { background: var(--terracotta); }
.journey__steps li > div { display: flex; flex-direction: column; align-items: center; }
.journey__steps .vira-step__num { margin-top: 16px; font-size: 13px; }
.journey__steps .vira-step__name { font-size: 20px; margin-top: 4px; }
.journey__steps p { margin: 10px 0 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.45; color: var(--clay-light); max-width: 20ch; }
@media (max-width: 860px) {
  .journey__steps { grid-template-columns: 1fr; gap: 28px; padding-left: 4px; }
  .journey__line { top: 0; bottom: 0; left: 40px; right: auto; width: 1px; height: auto; }
  .journey__line i { transform: scaleY(0); transform-origin: top; }
  .journey__steps li { flex-direction: row; align-items: center; text-align: left; gap: 18px; padding: 0; }
  .journey__steps li > div { align-items: flex-start; }
  .journey__steps .vira-step__num { margin-top: 0; }
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--terracotta); color: var(--char); }
.cta-band .wrap { display: grid; grid-template-columns: 1.15fr 1fr auto; gap: 24px 40px; align-items: center; padding-top: clamp(32px, 3.6vw, 48px); padding-bottom: clamp(32px, 3.6vw, 48px); }
.cta-band .vira-eyebrow { color: var(--char); font-size: 11px; }
.cta-band h2 { margin: 8px 0 0; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.02; }
.cta-band ul { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 1px solid var(--hairline-on-accent); display: grid; gap: 10px; font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .05em; }
.cta-band li { display: flex; align-items: center; gap: 10px; }
.cta-band li img { width: 17px; height: 17px; flex: none; }
.cta-band a { text-decoration: none; }
.cta-band a:hover { text-decoration: underline; text-underline-offset: 4px; }
.qr { display: flex; align-items: center; gap: 14px; text-align: left; }
.qr img { display: block; width: 84px; height: 84px; background: var(--sand); padding: 6px; image-rendering: pixelated; }
.qr .vira-label { order: 2; font-size: 10.5px; letter-spacing: .26em; line-height: 1.6; max-width: 8ch; }
@media (max-width: 860px) { .cta-band .wrap { grid-template-columns: 1fr; gap: 20px; } .cta-band ul { border-left: 0; padding-left: 0; } }

/* ---------- Footer (compact) ---------- */
.site-footer { background: var(--char); color: var(--sand); padding: 30px 0 16px; }
.site-footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: 20px 32px; padding-bottom: 20px; border-bottom: 1px solid rgba(245,236,229,.14); align-items: start; }
.site-footer__top img { width: 116px; height: auto; display: block; }
.site-footer .vira-eyebrow { color: var(--clay-light); margin-bottom: 8px; font-size: 10px; letter-spacing: .26em; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-family: var(--font-serif); font-size: 14px; line-height: 1.4; }
.site-footer ul a { text-decoration: none; }
.site-footer ul a:hover { color: var(--terracotta); }
.site-footer__tagline { margin-top: 10px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--terracotta); }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-top: 12px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--clay-light); }
@media (max-width: 860px) { .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__top > :first-child { grid-column: 1 / -1; } }

/* ============ INNER PAGES ============ */
.page-hero { padding: calc(72px + clamp(40px, 5vw, 72px)) 0 clamp(36px, 4vw, 56px); position: relative; }
.page-hero__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px 64px; align-items: end; }
.page-hero .vira-section-head { margin-bottom: 28px; }
.page-hero--char { background: var(--char); color: var(--sand); }
.page-hero--char .vira-chip { background: var(--sand); color: var(--char); }
.page-hero--char .vira-eyebrow { color: var(--clay-light); }
@media (max-width: 860px) { .page-hero__grid { grid-template-columns: 1fr; } }

.banner { height: clamp(260px, 46vh, 500px); }

/* Values */
.values { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hairline); }
.value { padding: 32px 24px 36px 0; display: grid; gap: 16px; align-content: start; }
.value + .value { padding-left: 24px; border-left: 1px solid var(--hairline); }
.value h3 { margin: 0; font-family: var(--font-display); font-stretch: 112.5%; text-transform: uppercase; font-size: 20px; }
.value p { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.5; }
@media (max-width: 860px) { .values { grid-template-columns: 1fr 1fr; } .value:nth-child(3) { padding-left: 0; border-left: 0; } .value:nth-child(n+3) { border-top: 1px solid var(--hairline); } }
@media (max-width: 560px) { .values { grid-template-columns: 1fr; } .value, .value + .value { padding: 24px 0; border-left: 0; } .value + .value { border-top: 1px solid var(--hairline); } }

/* Numbered reasons */
.reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.reason { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 28px 0; border-top: 1px solid var(--hairline); }
.reason b { font-family: var(--font-display); font-stretch: 112.5%; font-size: 34px; line-height: 1; color: var(--accent); grid-row: span 2; }
.reason h3 { margin: 0; font-family: var(--font-display); font-size: 20px; }
.reason p { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.5; }
@media (max-width: 760px) { .reasons { grid-template-columns: 1fr; } }

/* Team */
.founder { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center; padding: 36px; background: var(--char-soft); }
.founder__mono { width: 180px; height: 180px; border-radius: 50%; border: 1px solid var(--terracotta); display: grid; place-items: center; font-family: var(--font-display); font-stretch: 112.5%; font-weight: 700; font-size: 56px; color: var(--terracotta); }
.founder h3 { margin: 6px 0 10px; font-family: var(--font-display); font-stretch: 112.5%; text-transform: uppercase; font-size: clamp(26px, 3vw, 36px); }
.founder p { margin: 12px 0 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; max-width: 60ch; color: var(--clay-light); }
@media (max-width: 720px) { .founder { grid-template-columns: 1fr; padding: 24px; } .founder__mono { width: 120px; height: 120px; font-size: 40px; } }
.org { margin-top: 48px; }
.org svg { width: 100%; height: auto; display: block; overflow: visible; }
.org-mobile { display: none; }
@media (max-width: 760px) { .org svg { display: none; } .org-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(245,236,229,.14); } .org-mobile > div { background: var(--char); padding: 20px; } .org-mobile b { display: block; font-family: var(--font-display); font-stretch: 112.5%; font-size: 40px; color: var(--terracotta); } .org-mobile span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } }

/* Timeline */
.timeline { position: relative; max-width: 900px; }
.timeline__line { position: absolute; left: 120px; top: 8px; bottom: 8px; width: 1px; background: var(--hairline); }
.timeline__line i { position: absolute; inset: 0; background: var(--terracotta); transform: scaleY(0); transform-origin: top; }
.timeline { overflow-x: clip; } /* items slide in from the right; don't let the offset widen the page */
.tl-item { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 40px; padding: 26px 0; }
.tl-item::before { content: ""; position: absolute; left: 114px; top: 34px; width: 13px; height: 13px; border-radius: 50%; background: var(--sand); border: 1px solid var(--terracotta); transition: background .4s ease; }
.tl-item.is-lit::before { background: var(--terracotta); }
.tl-item b { font-family: var(--font-display); font-stretch: 112.5%; font-size: 30px; line-height: 1; }
.tl-item p { margin: 0; padding-left: 8px; font-family: var(--font-serif); font-size: 18px; line-height: 1.5; }
.tl-item--next b, .tl-item--next p { color: var(--accent); }
@media (max-width: 600px) { .timeline__line { left: 6px; } .tl-item { grid-template-columns: 1fr; gap: 6px; padding-left: 32px; } .tl-item::before { left: 0; top: 30px; } .tl-item p { padding-left: 0; } }

/* Credentials */
.creds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.cred { background: var(--surface-raised); padding: 26px 22px 22px; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-height: 190px; transition: background .4s ease; }
.cred:hover { background: var(--sand); }
.cred h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2; }
.cred p { margin: 0; font-family: var(--font-serif); font-size: 15px; line-height: 1.4; color: var(--ink-muted); }
.cred__status { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.cred__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (max-width: 960px) { .creds { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .creds { grid-template-columns: 1fr; } .cred { min-height: 0; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; } .cred__status { grid-column: 2; } }.hse { margin-top: 32px; padding: 28px; border-left: 2px solid var(--accent); background: var(--sand-dim); }
.hse h3 { margin: 0 0 8px; font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.hse p { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.55; }

/* Lifecycle wheel — pinned; ring fills with scroll, centre plays the active stage */
.lifecycle-pin { position: relative; height: 260vh; }
.lifecycle-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding-top: 72px; overflow: hidden; }
.lifecycle { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 72px; align-items: center; width: 100%; }
.wheel { position: relative; width: 100%; max-width: min(560px, calc(100svh - 150px)); aspect-ratio: 1; margin: 0 auto; }
.wheel svg { width: 100%; height: 100%; overflow: visible; display: block; }
.wheel__node circle { fill: var(--sand); stroke: var(--terracotta); stroke-width: 1.2; transition: fill .5s ease, stroke-width .5s ease; }
.wheel__node text { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; fill: var(--char); text-anchor: middle; transition: fill .5s ease; }
.wheel__node.is-done circle { fill: #f3dcd2; }
.wheel__node.is-active circle { fill: var(--terracotta); }
.wheel__node.is-active text { fill: var(--char); }
.wheel__keys button { position: absolute; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 0; background: transparent; color: transparent; cursor: pointer; font-size: 0; }
.wheel__keys button:focus-visible { outline: 2px solid var(--char); outline-offset: 2px; }

/* centre scenes */
.scene { opacity: 0; transform: scale(.82); transform-origin: 300px 300px; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.scene.is-active { opacity: 1; transform: none; transition-delay: .12s; }
.scene .draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
.scene.is-active .draw { animation: wDraw 2.8s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes wDraw { 0% { stroke-dashoffset: 100; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.scene--design .pencil { transform: translate(245px, 350px); }
.scene--design.is-active .pencil { animation: wPencil 2.8s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes wPencil { 0% { transform: translate(245px, 350px); } 18% { transform: translate(245px, 290px); } 32% { transform: translate(300px, 248px); } 46% { transform: translate(355px, 290px); } 58% { transform: translate(355px, 350px); } 85% { transform: translate(330px, 330px); } 100% { transform: translate(245px, 350px); } }
/* Procure — truck drives in, each load ticked off, truck leaves (4.6s) */
.scene--procure .truck { transform: translateX(-200px); }
.scene--procure.is-active .truck { animation: pTruck 4.6s cubic-bezier(.45,0,.2,1) infinite; }
.scene--procure .wheel-t { transform-box: fill-box; transform-origin: center; }
.scene--procure.is-active .wheel-t { animation: pWheel 4.6s cubic-bezier(.45,0,.2,1) infinite; }
.scene--procure .tick { opacity: 0; transform-box: fill-box; transform-origin: center; }
.scene--procure.is-active .tick { animation: pTick 4.6s ease infinite; }
.scene--procure.is-active .t2 { animation-delay: .22s; } .scene--procure.is-active .t3 { animation-delay: .44s; }
@keyframes pTruck { 0% { transform: translateX(-200px); } 26%, 78% { transform: none; } 100% { transform: translateX(220px); } }
@keyframes pWheel { 0% { transform: rotate(-540deg); } 26%, 78% { transform: rotate(0); } 100% { transform: rotate(540deg); } }
@keyframes pTick { 0%, 30% { opacity: 0; transform: scale(.3); } 38%, 74% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: none; } }

/* Engineer — tasks scheduled in order, links drawn, "today" tracks progress (5s) */
.scene--engineer .bar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.scene--engineer.is-active .bar { animation: eBar 5s cubic-bezier(.2,.8,.2,1) infinite; }
.scene--engineer.is-active .b2 { animation-delay: .25s; } .scene--engineer.is-active .b3 { animation-delay: .5s; }
.scene--engineer.is-active .b4 { animation-delay: .75s; } .scene--engineer.is-active .b5 { animation-delay: 1s; }
.scene--engineer .links { opacity: 0; }
.scene--engineer.is-active .links { animation: eLinks 5s ease infinite; }
.scene--engineer .today { transform: translateX(214px); opacity: 0; }
.scene--engineer.is-active .today { animation: eToday 5s linear infinite; }
@keyframes eBar { 0% { transform: scaleX(0); } 14%, 88% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes eLinks { 0%, 30% { opacity: 0; } 40%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes eToday { 0%, 34% { transform: translateX(214px); opacity: 0; } 38% { opacity: 1; } 86% { transform: translateX(386px); opacity: 1; } 100% { transform: translateX(386px); opacity: 0; } }

/* Build — foundation, columns, slab, columns, slab, roof (5.4s) */
.scene--build .part { opacity: 0; }
.scene--build.is-active .part { animation: bPart 5.4s cubic-bezier(.2,.8,.2,1) infinite both; }
.scene--build .p2, .scene--build .p4 { transform-box: fill-box; transform-origin: bottom; }
.scene--build.is-active .p2, .scene--build.is-active .p4 { animation-name: bGrow; }
.scene--build.is-active .p1 { animation-delay: 0s; } .scene--build.is-active .p2 { animation-delay: .5s; }
.scene--build.is-active .p3 { animation-delay: 1.1s; } .scene--build.is-active .p4 { animation-delay: 1.6s; }
.scene--build.is-active .p5 { animation-delay: 2.2s; } .scene--build.is-active .p6 { animation-delay: 2.8s; }
.scene--build.is-active .hook { animation: bHook 5.4s ease-in-out infinite; }
@keyframes bPart { 0% { opacity: 0; transform: translateY(-46px); } 10%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes bGrow { 0% { opacity: 1; transform: scaleY(0); } 10%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: none; } }
@keyframes bHook { 0%, 100% { transform: translate(-22px, 22px); } 25% { transform: translate(0, 0); } 50% { transform: translate(-12px, 16px); } 75% { transform: translate(4px, 4px); } }

/* Install — wire runs, power flows, light on, water runs, commissioned (5s) */
.scene--install .wire { stroke-dasharray: 100; stroke-dashoffset: 100; }
.scene--install.is-active .wire { animation: iWire 5s ease infinite; }
.scene--install .current { opacity: 0; }
.scene--install.is-active .current { animation: iCurrent 5s linear infinite; }
.scene--install.is-active .lamp { animation: iLamp 5s ease infinite; }
.scene--install.is-active .glow { animation: iGlow 5s ease infinite; }
.scene--install .sunrays { opacity: 0; }
.scene--install.is-active .sunrays { animation: iRays 5s ease infinite; }
.scene--install .drop { opacity: 0; }
.scene--install.is-active .drop { animation: iDrop .8s ease-in infinite; }
.scene--install.is-active .d2 { animation-delay: .4s; }
.scene--install .badge { opacity: 0; transform-box: fill-box; transform-origin: center; }
.scene--install.is-active .badge { animation: iBadge 5s cubic-bezier(.3,1.5,.5,1) infinite; }
@keyframes iWire { 0% { stroke-dashoffset: 100; } 28%, 100% { stroke-dashoffset: 0; } }
@keyframes iCurrent { 0%, 26% { opacity: 0; stroke-dashoffset: 0; } 30% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; stroke-dashoffset: -64; } }
@keyframes iLamp { 0%, 34% { fill: #f5ece5; } 40%, 92% { fill: #d5502b; } 100% { fill: #f5ece5; } }
@keyframes iGlow { 0%, 34% { opacity: 0; } 42%, 90% { opacity: .22; } 100% { opacity: 0; } }
@keyframes iRays { 0% { opacity: 0; } 10%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes iDrop { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@keyframes iBadge { 0%, 58% { opacity: 0; transform: scale(.3); } 66%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Maintain — the service cycle turns, the wrench keeps things tight (3.6s) */
.scene--maintain .cycle { transform-origin: 300px 300px; }
.scene--maintain.is-active .cycle { animation: wSpin 7s linear infinite; }
.scene--maintain .wrench { transform-origin: 300px 300px; }
.scene--maintain.is-active .wrench { animation: mWrench 1.8s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes wSpin { to { transform: rotate(360deg); } }
@keyframes mWrench { 0% { transform: rotate(28deg); } 55% { transform: rotate(-22deg); } 70% { transform: rotate(-22deg); } 100% { transform: rotate(28deg); } }

.lifecycle__detail { display: grid; gap: 18px; align-content: center; }
.lifecycle__text h3 { margin: 0 0 14px; font-family: var(--font-display); font-stretch: 112.5%; font-weight: 700; text-transform: uppercase; color: var(--accent); font-size: clamp(28px, 3vw, 44px); line-height: 1; }
.lifecycle__text p { margin: 0; font-family: var(--font-serif); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; max-width: 40ch; min-height: 3em; }
.lifecycle__ticks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-width: 360px; }
.lifecycle__ticks i { height: 3px; background: var(--hairline); position: relative; overflow: hidden; }
.lifecycle__ticks i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--f, 0)); transform-origin: left; }
.lifecycle__note { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--ink-muted); text-transform: uppercase; line-height: 1.6; }
.lifecycle-pin.is-static { height: auto; }
.lifecycle-pin.is-static .lifecycle-stage { position: relative; height: auto; padding: 48px 0; }
@media (max-width: 860px) {
  .lifecycle-pin { height: 380vh; }
  .lifecycle-stage { padding-top: 80px; align-items: start; }
  .lifecycle { grid-template-columns: 1fr; gap: 12px; }
  .wheel { max-width: min(480px, calc(100svh - 330px), 100%); }
  .wheel__node text { font-size: 11.5px; letter-spacing: .04em; }
  .lifecycle__detail { gap: 10px; }
  .lifecycle__text h3 { margin-bottom: 8px; }
  .lifecycle__note { display: none; }
}
@media (prefers-reduced-motion: reduce) { .scene, .scene * { animation: none !important; transition: none !important; } .scene .draw, .scene--install .wire { stroke-dashoffset: 0; } .scene--procure .truck { transform: none; } .scene--procure .tick, .scene--engineer .links, .scene--build .part, .scene--install .sunrays, .scene--install .badge { opacity: 1; transform: none; } .scene--engineer .bar { transform: none; } .scene--install .lamp { fill: #d5502b; } }

/* Trades grid */
.trades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.trade { background: var(--surface); padding: 26px 22px; display: grid; gap: 18px; align-content: space-between; min-height: 170px; transition: background .4s ease, color .4s ease; }
.trade img { width: 40px; height: 40px; }
.trade h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2; }
.trade:hover { background: var(--char); color: var(--sand); }
@media (max-width: 960px) { .trades { grid-template-columns: repeat(2, 1fr); } }

/* Gallery grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 .img-reveal { aspect-ratio: 3 / 2; }
.grid-3 .img-reveal { aspect-ratio: 4 / 3; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.grid-4 .img-reveal { aspect-ratio: 4 / 3; }
@media (max-width: 960px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }
.tall .img-reveal { aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.fig { margin: 0; position: relative; }
.fig .vira-caption { padding: 12px 16px 14px; }
.fig .vira-caption__title { font-size: 17px; margin-top: 6px; }
.fig .vira-badge-viz { z-index: 2; }

/* Before / after */
.compare { position: relative; aspect-ratio: 1300 / 1160; max-width: 620px; margin: 0 auto; overflow: hidden; background: var(--char); user-select: none; touch-action: pan-y; cursor: ew-resize; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.compare__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; margin-left: -1px; background: var(--terracotta); }
.compare__handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: var(--terracotta); color: var(--char); display: grid; place-items: center; font-size: 20px; }
.compare__label { position: absolute; top: 14px; padding: 5px 9px; background: var(--char); color: var(--sand); font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; z-index: 2; }
.compare__label--l { left: 14px; } .compare__label--r { right: 14px; background: var(--terracotta); color: var(--char); }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }

/* Audiences */
.audiences { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.audience { background: var(--surface); padding: clamp(24px, 3vw, 40px); }
.audience h3 { margin: 0 0 12px; font-family: var(--font-mono); font-weight: 400; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.audience p { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.5; }
@media (max-width: 760px) { .audiences { grid-template-columns: 1fr; } }

/* Projects page */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filters button { font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 10px 14px; border: 1px solid var(--hairline); background: transparent; color: var(--ink); cursor: pointer; transition: background .3s ease, color .3s ease; }
.filters button:hover { border-color: var(--char); }
.filters button[aria-pressed="true"] { background: var(--char); color: var(--sand); border-color: var(--char); }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1200px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }
.work-grid .fig .img-reveal { aspect-ratio: 4 / 3; }
.work-grid .fig.is-hidden { display: none; }
@media (max-width: 960px) { .work-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .work-grid { grid-template-columns: 1fr; } }
.ledger { border-top: 1px solid var(--hairline); }
.ledger__row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 190px; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--hairline); font-family: var(--font-serif); font-size: 17px; transition: padding .35s ease, background .35s ease; }
.ledger__row:hover { padding-left: 10px; background: var(--sand-dim); }
.ledger__row span:nth-child(2) { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.ledger__row b { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); white-space: nowrap; text-align: right; }
.section--char .ledger, .section--char .ledger__row { border-color: rgba(245,236,229,.14); }
.section--char .ledger__row:hover { background: var(--char-soft); }
.section--char .ledger__row span:nth-child(2) { color: var(--clay-light); }
@media (max-width: 600px) { .ledger__row { grid-template-columns: 1fr auto; } .ledger__row span:nth-child(2) { grid-column: 1; grid-row: 2; } .ledger__row b { grid-row: 1 / span 2; grid-column: 2; } }
.flagship { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; background: var(--char); color: var(--sand); }
.flagship .img-reveal { min-height: 520px; height: 100%; }
.flagship__body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.flagship__value { font-family: var(--font-display); font-stretch: 112.5%; font-weight: 700; font-size: clamp(40px, 4vw, 60px); line-height: .9; color: var(--terracotta); }
.flagship h2 { margin: 14px 0; font-family: var(--font-display); font-stretch: 112.5%; text-transform: uppercase; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.05; }
.flagship p { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: var(--clay-light); }
.phasebar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.phasebar div { border-top: 2px solid var(--terracotta); padding-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.phasebar div + div { border-top-style: dashed; color: var(--clay-light); }
@media (max-width: 860px) { .flagship { grid-template-columns: 1fr; } .flagship .img-reveal { min-height: 320px; } }

/* Workshop page */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.versus__col { padding: clamp(24px, 3vw, 40px); background: var(--char); color: var(--sand); }
.versus__col--vira { background: var(--char); border-left: 4px solid var(--terracotta); }
.versus__col h3 { margin: 0 0 18px; font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--clay-light); }
.versus__col--vira h3 { color: var(--terracotta); }
.versus ul { list-style: none; margin: 0; padding: 0; }
.versus li { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-top: 1px solid rgba(245,236,229,.12); font-family: var(--font-serif); font-size: 18px; }
.versus__col:not(.versus__col--vira) li { color: var(--clay-light); }
.versus li::before { flex: none; width: 22px; text-align: center; font-family: var(--font-mono); color: var(--terracotta); }
.versus__col:not(.versus__col--vira) li::before { content: "✕"; }
.versus__col--vira li::before { content: "✓"; }
.versus__col--vira li { font-family: var(--font-display); font-weight: 600; }
@media (max-width: 760px) { .versus { grid-template-columns: 1fr; } }
.floorplan { position: relative; }
.floorplan svg { width: 100%; height: auto; display: block; overflow: visible; }
.floorplan .zone rect { fill: var(--sand-dim); stroke: var(--char); stroke-width: 1.2; }
.floorplan .zone:hover rect { fill: var(--accent-tint); }
.floorplan .zone .num-box { fill: var(--terracotta); stroke: none; }
.floorplan .zone text { font-family: var(--font-display); font-weight: 600; font-size: 15px; fill: var(--char); text-anchor: middle; }
.floorplan .zone .num { font-family: var(--font-mono); font-size: 12px; text-anchor: middle; fill: var(--char); font-weight: 400; }
.floorplan .zone .area { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; fill: var(--clay); font-weight: 400; }
.floorplan-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.floorplan-scroll { overflow-x: auto; }
.floorplan-scroll svg { min-width: 760px; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px 80px; }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.contact-card { background: var(--surface); padding: 26px; }
.contact-card h3 { margin: 0 0 12px; font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .3em; color: var(--accent); }
.contact-card p, .contact-card a { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.5; text-decoration: none; }
.contact-card a:hover { color: var(--accent); }
.qrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.qrs figure { margin: 0; text-align: center; }
.qrs img { width: 100%; max-width: 150px; aspect-ratio: 1; image-rendering: pixelated; background: #fff; padding: 8px; border: 1px solid var(--hairline); }
.qrs figcaption { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; text-align: center; padding-left: .24em; }   /* padding balances the trailing letter-space so the label sits dead centre */
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-muted); }
.field input, .field select, .field textarea { font: 17px/1.4 var(--font-serif); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 10px 0; outline: none; transition: border-color .3s ease; -webkit-appearance: none; appearance: none; }
.field select { background-image: none; cursor: pointer; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--accent); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.form__note { font-family: var(--font-serif); font-size: 15px; color: var(--ink-muted); margin: 0; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .form__row { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .contact-cards { grid-template-columns: 1fr; } }

/* Feature (log-slice) */
.feature { position: relative; min-height: 68vh; display: grid; align-items: end; color: var(--sand); overflow: hidden; background: var(--char); }
.feature__bg { position: absolute; inset: -10% 0; }
.feature__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature .wrap { position: relative; width: 100%; padding-bottom: 56px; }
.feature__panel { background: var(--char); padding: clamp(22px, 3vw, 40px); max-width: 620px; }
.feature__panel p { margin: 14px 0 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.5; color: var(--clay-light); }


/* Mobile menu footer */
.mobile-menu__foot { display: grid; gap: 22px; }
.mobile-menu__foot .btn { justify-content: center; }

/* Clickable QR codes */
.qrs a, .qr a { display: block; text-decoration: none; color: inherit; }
.qrs img, .qr img { transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease; }
.qrs a:hover img, .qr a:hover img { transform: translateY(-4px); }
.qrs a:hover img { border-color: var(--accent); }

.qrs a:hover figcaption { color: var(--accent); }

/* Free site survey drawer */
.survey { position: fixed; inset: 0; z-index: 140; }
.survey[hidden] { display: none; }
.survey__scrim { position: absolute; inset: 0; background: rgba(31,18,16,.62); opacity: 0; transition: opacity .5s ease; cursor: pointer; }
.survey__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(580px, 100%); background: var(--sand); color: var(--ink); padding: 76px clamp(20px, 4vw, 52px) 40px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: grid; gap: 18px; align-content: start; transform: translateX(100%); transition: transform .65s cubic-bezier(.7,0,.2,1); }
.survey.is-open .survey__scrim { opacity: 1; }
.survey.is-open .survey__panel { transform: none; }
.survey__panel > * { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.survey.is-open .survey__panel > * { opacity: 1; transform: none; transition-delay: .3s; }
.survey.is-open .survey__panel > *:nth-child(3) { transition-delay: .36s; } .survey.is-open .survey__panel > *:nth-child(4) { transition-delay: .42s; } .survey.is-open .survey__panel > *:nth-child(5) { transition-delay: .48s; }
.survey__panel h2 { margin: 0; }
.survey__lead { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.5; color: var(--ink-muted); }
.survey__close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border: 1px solid var(--hairline); background: none; cursor: pointer; opacity: 1 !important; transform: none !important; }
.survey__close span { position: absolute; left: 11px; right: 11px; top: 21px; height: 1.5px; background: var(--char); transform: rotate(45deg); }
.survey__close span + span { transform: rotate(-45deg); }
.survey__close:hover { border-color: var(--char); }
.survey__direct { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 18px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; }
.survey__direct a { text-decoration: none; }
.survey__direct a:hover { color: var(--accent); }
.survey .form__row { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .survey .form__row { grid-template-columns: 1fr; } .survey__panel { padding-top: 70px; } }
@media (prefers-reduced-motion: reduce) { .survey__panel, .survey__scrim, .survey__panel > * { transition: none !important; } }

/* Photo hover descriptions: the photo fades under a char wash and the description slides up */
.fig--reveal { cursor: default; outline: none; }
.fig--reveal .img-reveal img { transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .5s ease; }
.fig__desc { position: absolute; inset: 0; margin: 0; display: flex; align-items: flex-end; padding: 22px 20px; background: rgba(31, 18, 16, .62); color: var(--sand); font-family: var(--font-serif); font-size: 16px; line-height: 1.45; opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.fig--reveal:hover .fig__desc, .fig--reveal:focus-visible .fig__desc, .fig--reveal:focus-within .fig__desc { opacity: 1; transform: none; }
.fig--reveal:hover .img-reveal img, .fig--reveal:focus-visible .img-reveal img { opacity: .75; transform: scale(1.03); }
.fig--reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* touch: tapping the photo focuses it, which shows the description */

/* Hero on small landscape screens (phones held sideways, small tablets): side by side, compact copy */
@media (max-width: 900px) and (orientation: landscape), (max-height: 560px) and (orientation: landscape) {
  .build__stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-content: center; align-items: center; padding-top: 64px; gap: 0 20px; }
  .build__title.display-hero { font-size: clamp(22px, 4.4vw, 38px); }
  .build__meta, .build__standfirst { display: none; }
  .build__phases { height: 66px; margin-top: 10px; }
  .phase__name { font-size: 15px; }
  .phase p { font-size: 13px; line-height: 1.35; }
  .build__progress { margin-top: 6px; }
  .build__progress-labels { font-size: 9.5px; }
  .build__visual { width: min(100%, calc((100svh - 64px - 58px) * 1.3333)); margin-bottom: 20px; }
  .build__readout { font-size: 9px; bottom: -15px; }
  .build__tag { font-size: 9px; letter-spacing: .14em; padding: 4px 6px; }
  .build__viz { font-size: 8.5px; }
}

/* Form fields shrink to their column (inputs otherwise keep a ~170px minimum and can push narrow layouts sideways) */
.contact-grid > *, .form, .form__row > *, .field { min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; box-sizing: border-box; }