/* Urban Road — static recreation of urbanroad.co.nz (staging copy) */
:root{
  --navy:#1F2D4B;
  --dark:#101726;
  --cream:#ECE5E0;
  --cream-text:#ECE5E0;
  --bg:#F7F5F3;
  --ink:#1E1E1E;
  --nav-ink:#142E4A;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Poppins',sans-serif;
  font-weight:200;
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:600}

.wrap{max-width:980px;margin:0 auto;padding:0 24px}

/* ---------- Header ---------- */
header{
  background:var(--bg);
  position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(31,45,75,.08);
}
.header-inner{
  max-width:1100px;margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;gap:14px;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img.symbol{width:54px;height:auto}
.brand img.wordmark{width:170px;height:auto}
nav.main{margin-left:auto}
nav.main ul{list-style:none;display:flex;align-items:center;gap:34px}
nav.main a,nav.main .navlink{
  font-family:'Poppins',sans-serif;font-weight:300;
  font-size:14px;color:var(--nav-ink);letter-spacing:.06em;
  cursor:pointer;
}
nav.main a:hover{opacity:.6}
.has-dropdown{position:relative}
.has-dropdown .dropdown{
  display:none;position:absolute;top:100%;left:-12px;padding-top:12px;min-width:210px;
}
.has-dropdown:hover .dropdown{display:block}
.dropdown ul{
  background:#fff;box-shadow:0 6px 24px rgba(16,23,38,.12);
  display:block;padding:10px 0;
}
.dropdown li{padding:0}
.dropdown a{display:block;padding:10px 18px;font-size:13px}
.dropdown a:hover{background:var(--cream);opacity:1}
.cta-register{
  background:var(--navy);color:var(--cream-text) !important;
  padding:12px 20px;letter-spacing:.08em;font-size:13px;
}
.cta-register:hover{background:var(--dark);opacity:1 !important}
.hamburger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;font-size:26px;color:var(--nav-ink)}

/* ---------- Hero ---------- */
.hero{width:100%}
.hero img{width:100%;height:72vh;min-height:420px;object-fit:cover}
.hero.short img{height:56vh}

/* ---------- Sections ---------- */
section{padding:72px 0}
.intro-lead{
  font-size:23px;line-height:1.5;font-weight:200;max-width:760px;
}
.intro-sub{margin-top:26px;max-width:640px}

.collage{
  display:grid;grid-template-columns:1.15fr .9fr;gap:28px;align-items:end;
  padding:56px 0 0;
}
.statement{
  background:var(--cream);
}
.statement h2{
  font-size:60px;line-height:1.0;max-width:640px;
}
@media(max-width:760px){.statement h2{font-size:38px}}

/* ---------- Projects ---------- */
.projects-head h3{font-size:42px;margin-bottom:18px}
.projects-head p{max-width:720px}
.project-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px;
}
.project-card img{width:100%;height:520px;object-fit:cover}
.badge{
  font-weight:600;font-size:15px;text-align:center;letter-spacing:.1em;
  margin:26px 0 8px;
}
.project-card h4{font-weight:600;font-size:23px;margin-bottom:4px}
.project-card .units{font-weight:300;margin-bottom:14px}
.btn{
  display:inline-block;margin-top:20px;
  background:var(--navy);color:var(--cream-text);
  padding:14px 26px;font-weight:300;font-size:13px;letter-spacing:.12em;
}
.btn:hover{background:var(--dark)}
.btn.outline{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.btn.outline:hover{background:var(--navy);color:var(--cream-text)}

/* ---------- Project pages ---------- */
.page-title{padding:64px 0 24px}
.page-title h1{font-size:46px;line-height:1.1}
.page-title .locale{display:block;font-size:19px;font-weight:300;letter-spacing:.28em;margin-top:10px}
.status-line{font-weight:600;font-size:26px;letter-spacing:.06em;margin:36px 0 6px}
.price-line{font-size:19px;font-weight:300;margin-bottom:22px}
.split{
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;
}
.split.rev{grid-template-columns:.9fr 1.1fr}
.split h2{font-size:34px;margin-bottom:18px;line-height:1.15}
.split p+p{margin-top:14px}
.split img{width:100%;object-fit:cover}
.dl-band{padding:34px 0;text-align:center}

/* ---------- About ---------- */
.about-title h2{font-size:52px;letter-spacing:.14em;margin-bottom:22px}
.about-quote{
  font-size:23px;font-weight:200;line-height:1.5;
}

/* ---------- Footer / Contact ---------- */
footer{
  background:var(--navy);color:var(--cream-text);
  padding:72px 0 48px;
}
footer h3{font-size:42px;margin-bottom:16px}
footer .foot-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:8px;
}
footer p{font-weight:200}
.socials{display:flex;gap:14px;margin:26px 0}
.socials img{width:26px;height:26px}
form .field{margin-bottom:18px}
form label{display:block;font-size:13px;font-weight:300;letter-spacing:.04em;margin-bottom:6px;color:var(--cream-text)}
form input,form select{
  width:100%;padding:12px 12px;background:transparent;
  border:0;border-bottom:1px solid var(--cream);
  color:var(--cream-text);font-family:'Poppins',sans-serif;font-weight:200;font-size:15px;
}
form select option{color:var(--ink)}
form input:focus,form select:focus{outline:none;border-bottom-color:#fff}
.submit-btn{
  background:var(--cream);color:var(--navy);border:0;cursor:pointer;
  padding:13px 34px;font-family:'Poppins',sans-serif;font-weight:400;
  font-size:13px;letter-spacing:.12em;margin-top:8px;
}
.submit-btn:hover{background:#fff}
.foot-contact{font-size:19px;font-weight:200;line-height:2}
.foot-contact a:hover{opacity:.7}
.foot-logo{width:179px;margin-top:36px}
.foot-note{margin-top:40px;font-size:12px;opacity:.55}

/* ---------- Info pack pages ---------- */
.infopack{max-width:560px;margin:0 auto;padding:80px 24px}
.infopack h1{font-size:40px;margin-bottom:10px}
.infopack .sub{margin-bottom:36px}
.infopack form label{color:var(--ink)}
.infopack form input{border-bottom:1px solid var(--navy);color:var(--ink)}
.infopack .submit-btn{background:var(--navy);color:var(--cream-text)}
.infopack .dl-direct{display:block;margin-top:26px;font-weight:300;text-decoration:underline;color:var(--navy)}

/* ---------- Thank you ---------- */
.thanks{max-width:640px;margin:0 auto;text-align:center;padding:120px 24px}
.thanks h1{font-size:44px;margin-bottom:16px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--bg);padding:18px 24px 26px;box-shadow:0 10px 24px rgba(16,23,38,.12);
  }
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;align-items:flex-start;gap:18px}
  .hamburger{display:block}
  .has-dropdown .dropdown{display:block;position:static;padding-top:8px;min-width:0}
  .dropdown ul{box-shadow:none;background:transparent;padding:0 0 0 14px}
  .collage,.project-grid,.split,.split.rev,footer .foot-grid{grid-template-columns:1fr}
  .project-card img{height:auto}
  .page-title h1{font-size:34px}
}