/* home.css — the interactive home page. Scene-specific styles live in css/scenes/*.css */
@import url(scenes/build.css);
@import url(scenes/services.css);
@import url(scenes/tin.css);
@import url(scenes/speed.css);
@import url(scenes/review.css);
@import url(scenes/stats.css);
@import url(scenes/projects.css);
@import url(scenes/process.css);
@import url(scenes/closer.css);

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 200; background: var(--charcoal); color: #fff; display: grid; place-items: center; }
.loader-logo { position: relative; inline-size: clamp(190px, 26vw, 320px); filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.loader .fh-badge:not(.is-live) .b-layer { opacity: 0; }
.loader-bar { position: absolute; inset-block-end: 14vh; inset-inline: 50%; transform: translateX(-50%); inline-size: min(280px, 60vw); block-size: 2px; background: rgba(255,255,255,.14); overflow: hidden; }
html[dir="rtl"] .loader-bar { transform: translateX(50%); }
.loader-bar span { display: block; block-size: 100%; inline-size: 100%; background: var(--red); transform: scaleX(0); transform-origin: var(--origin, left); }
html[dir="rtl"] .loader-bar span { transform-origin: right; }
.loader-txt { position: absolute; inset-block-end: calc(14vh - 30px); inset-inline: 0; text-align: center; color: var(--steel); }
body.is-loading { overflow: hidden; }

/* ---------- section head variants ---------- */
.section-head.split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }
.section-head.split > div { max-width: 60ch; display: grid; gap: 1rem; }
@media (max-width: 720px) { .section-head.split { flex-direction: column; align-items: flex-start; } }

/* ---------- blog teaser ---------- */
.post-card { display: grid; gap: 12px; align-content: start; }
.post-cover { aspect-ratio: 16 / 9; border-radius: 4px; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.post-cover { padding: 6% 8%; } .post-cover svg { inline-size: 100%; block-size: 100%; overflow: visible; } .post-meta { font-size: .84rem; }

/* ---------- the scroll rail (red beam with knees) ---------- */
.rail-progress { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: 26px; z-index: 40; pointer-events: none; }
.rail-progress svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.rail-progress path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linejoin: miter; stroke-linecap: butt; }
@media (max-width: 720px) { .rail-progress { inline-size: 10px; } .rail-progress path { stroke-width: 3; } }

/* ---------- misc ---------- */
.placeholder-note { margin-block-start: 24px; font-size: .82rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 10px; }

/* ---------- the eight services strip ---------- */
.svc-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: clamp(28px, 4vw, 56px); border-block-start: 1px solid var(--line); border-inline-start: 1px solid var(--line); }
.svc-strip a { position: relative; isolation: isolate; overflow: hidden; display: flex; gap: 12px; align-items: baseline; padding: 18px 16px; border-block-end: 1px solid var(--line); border-inline-end: 1px solid var(--line); font-weight: 600; font-size: .96rem; line-height: 1.5; transition: color .3s; }
.svc-strip a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #2A2A2A, #1A1A1A); transform: translateY(101%); transition: transform .45s var(--ease-out); }
.svc-strip a:hover { color: #fff; }
.svc-strip a:hover::before { transform: none; }
.svc-strip .num { font-size: .78rem; font-weight: 700; }
@media (max-width: 980px) { .svc-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .svc-strip { grid-template-columns: 1fr; } }
.post-cover:has(img) { padding: 0; }
.post-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.plate-art.has-photo { padding: 0 !important; overflow: hidden; }
.plate-art.has-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }