@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Unbounded:wght@500;600;700&display=swap');

:root { --navy:#07172a; --ink:#0b1d31; --gold:#d7a846; --cream:#f2eee6; --line:rgba(255,255,255,.18); }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--navy); font-family:Manrope,Arial,sans-serif; color:white; }
body { overflow-x:hidden; }
.site-shell { min-height:100svh; }
.hero { position:relative; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; padding:34px clamp(24px,5vw,84px) 72px; isolation:isolate; }
.hero__media { position:absolute; inset:0; z-index:-4; overflow:hidden; background:#07172a url('assets/construction-site-v2.png') center/cover no-repeat; }
.hero__media video { width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.025); animation:arrive 1.8s ease-out both; }
.hero::before { content:""; position:absolute; inset:0; z-index:-3; background:linear-gradient(90deg,rgba(3,13,26,.96) 0%,rgba(4,17,32,.82) 42%,rgba(3,13,25,.18) 77%),linear-gradient(0deg,rgba(3,12,24,.84) 0%,transparent 42%); }
.hero::after { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(circle at 69% 49%,rgba(221,161,49,.13),transparent 33%); }
.hero__grid { position:absolute; inset:0; z-index:-1; opacity:.12; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(90deg,#000 0%,transparent 67%); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { width:clamp(180px,20vw,300px); height:58px; display:block; overflow:hidden; }
.brand img { width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(0) invert(1); transform:scale(1.55); }
.status-pill { display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.13em; text-transform:uppercase; padding:12px 17px; border:1px solid rgba(255,255,255,.28); background:rgba(7,23,42,.42); backdrop-filter:blur(12px); }
.status-pill span { width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 7px rgba(215,168,70,.12); animation:pulse 1.8s infinite; }
.hero__content { width:min(770px,72vw); margin:auto 0; padding:7vh 0 5vh; }
.eyebrow { display:flex; align-items:center; gap:14px; color:#ded7ca; font-size:12px; letter-spacing:.15em; text-transform:uppercase; margin-bottom:26px; }
.eyebrow span { color:var(--gold); border-right:1px solid rgba(255,255,255,.35); padding-right:14px; }
h1 { font-family:Unbounded,Arial,sans-serif; font-size:clamp(45px,6.7vw,104px); line-height:.98; letter-spacing:-.055em; text-transform:uppercase; margin:0; max-width:1000px; }
h1 em { color:transparent; -webkit-text-stroke:1.5px var(--gold); font-style:normal; white-space:nowrap; }
.lead { max-width:620px; font-size:clamp(16px,1.45vw,21px); line-height:1.6; color:rgba(255,255,255,.76); margin:32px 0 34px; }
.workline { width:min(510px,100%); }
.workline__head { display:flex; justify-content:space-between; margin-bottom:10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.66); }
.workline__head strong { color:var(--gold); }
.workline__track { height:2px; background:rgba(255,255,255,.2); overflow:hidden; }
.workline__track span { display:block; width:72%; height:100%; background:linear-gradient(90deg,#a9781f,#efc86e); transform-origin:left; animation:load 1.4s .45s cubic-bezier(.16,1,.3,1) both; }
.side-note { position:absolute; right:clamp(20px,3vw,48px); top:50%; transform:rotate(90deg) translateX(50%); transform-origin:right center; text-transform:uppercase; font-size:9px; letter-spacing:.27em; color:rgba(255,255,255,.52); }
.bottom-row { display:flex; align-items:end; justify-content:space-between; gap:30px; border-top:1px solid rgba(255,255,255,.18); padding-top:24px; }
.promise { display:flex; align-items:center; gap:16px; }
.promise__icon { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.25); color:var(--gold); font-size:24px; }
.promise p { margin:0; font-size:12px; line-height:1.6; color:rgba(255,255,255,.58); }
.promise strong { color:#fff; font-size:13px; }
.construction-mark { width:285px; border-left:2px solid var(--gold); padding:8px 0 8px 18px; text-align:left; }
.construction-mark span { display:block; font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,.52); margin-bottom:5px; }
.construction-mark b { font-family:Unbounded,Arial,sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.ticker { position:absolute; bottom:0; left:0; right:0; height:31px; background:var(--gold); color:#172132; overflow:hidden; display:flex; align-items:center; font-family:Unbounded,Arial,sans-serif; font-size:9px; letter-spacing:.19em; white-space:nowrap; }
.ticker div { display:inline-block; min-width:max-content; animation:ticker 22s linear infinite; }
.ticker span { margin:0 20px; }
@keyframes load { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes arrive { from { opacity:.5; transform:scale(1.08); } to { opacity:1; transform:scale(1.025); } }
@keyframes pulse { 50% { box-shadow:0 0 0 10px transparent; } }
@keyframes ticker { to { transform:translateX(-50%); } }
@media (max-width:760px) {
  .hero { padding:24px 22px 70px; }
  .status-pill { font-size:9px; padding:10px 12px; }
  .brand { width:160px; height:43px; }
  .hero__content { width:100%; padding:10vh 0 6vh; }
  .eyebrow { font-size:9px; }
  h1 { font-size:clamp(37px,11vw,60px); line-height:1.04; }
  h1 em { white-space:normal; }
  .lead { font-size:15px; margin:25px 0 30px; max-width:92%; }
  .side-note { display:none; }
  .bottom-row { align-items:stretch; flex-direction:column; }
  .construction-mark { width:100%; }
  .promise p { font-size:10px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; scroll-behavior:auto!important; } }