/* ============================================
   Dennis Ooi Homes — Global Stylesheet
   css/style.css
   ============================================ */

:root{
  --blue:#2f5bff;
  --blue-dark:#2347d6;
  --ink:#10182b;
  --grey:#5b6478;
  --line:#e7e9f0;
  --bg-soft:#f6f7fb;
  --white:#ffffff;
  --radius:14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:9px;font-weight:600;font-size:14.5px;
  border:1px solid transparent;white-space:nowrap;transition:.15s ease;
}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line);}
.btn-secondary:hover{border-color:var(--blue);color:var(--blue);}
.btn-light{background:#fff;color:var(--ink);}
.btn-light:hover{background:var(--bg-soft);}
.btn-lg{padding:14px 26px;font-size:15px;}

/* ---- Header / Nav ---- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;max-width:1180px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand-mark{
  width:42px;height:42px;border-radius:10px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:18px;
}
.brand-text{line-height:1.1;}
.brand-text .name{font-weight:700;font-size:17px;color:var(--ink);}
.brand-text .tag{font-size:11px;letter-spacing:.14em;color:var(--grey);}
.menu{display:flex;align-items:center;gap:30px;}
.menu a{font-size:14.5px;font-weight:500;color:var(--ink);padding:6px 0;}
.menu a.active,.menu a:hover{color:var(--blue);}
.dropdown{position:relative;}
.dropdown>span{display:flex;align-items:center;gap:5px;font-size:14.5px;font-weight:500;cursor:pointer;color:var(--ink);}
.dropdown:hover>span{color:var(--blue);}
.caret{width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);margin-top:-4px;display:inline-block;}
.dropdown-panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 18px 40px rgba(16,24,43,.12);
  padding:10px;min-width:220px;
  opacity:0;visibility:hidden;transition:.18s ease;
}
.dropdown:hover .dropdown-panel{opacity:1;visibility:visible;}
.dropdown-panel a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;}
.dropdown-panel a:hover{background:var(--bg-soft);color:var(--blue);}
.nav-right{display:flex;align-items:center;gap:18px;}
.burger{display:none;background:none;border:none;padding:6px;cursor:pointer;}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;}

/* ---- Section helpers ---- */
.section{padding:70px 0;}
.section-bg{background:var(--bg-soft);}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:38px;flex-wrap:wrap;}
.section-head h2{font-size:32px;letter-spacing:-.01em;margin:8px 0 0;font-weight:700;}
.section-head p{color:var(--grey);font-size:15.5px;margin:8px 0 0;max-width:520px;}
.kicker{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.1em;color:var(--blue);text-transform:uppercase;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--blue);background:#eef1ff;padding:6px 14px;border-radius:100px;margin-bottom:18px;}
.center-head{text-align:center;}
.center-head h2{margin:8px auto 0;}
.center-head p{margin:10px auto 0;}
.center-cta{text-align:center;margin-top:38px;}

/* ---- CTA Band ---- */
.cta-band{background:linear-gradient(120deg,var(--blue),var(--blue-dark));color:#fff;padding:80px 0;text-align:center;}
.cta-band h2{font-size:34px;margin:0 0 16px;font-weight:700;}
.cta-band p{font-size:16px;color:#dde4ff;max-width:560px;margin:0 auto 32px;line-height:1.6;}

/* ---- Footer ---- */
footer{background:var(--ink);color:#c7cbdb;padding:64px 0 0;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.1);}
.foot-brand p{font-size:14px;line-height:1.7;color:#9aa0b6;margin:18px 0 22px;max-width:280px;}
.social{display:flex;gap:10px;}
.social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;}
.social a:hover{background:var(--blue);border-color:var(--blue);}
footer h4{font-size:12.5px;letter-spacing:.1em;color:#fff;margin:0 0 18px;text-transform:uppercase;}
footer .foot-links li{margin-bottom:12px;}
footer .foot-links a{font-size:14.5px;color:#c7cbdb;}
footer .foot-links a:hover{color:#fff;}
.contact-list li{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;font-size:14.5px;color:#c7cbdb;}
.contact-list span.ico{color:var(--blue);font-size:15px;margin-top:1px;}
.news-form{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.news-form input{padding:12px 14px;border-radius:9px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:14px;outline:none;font-family:inherit;}
.news-form input::placeholder{color:#8a90a6;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;font-size:13px;color:#878da3;flex-wrap:wrap;gap:10px;}
.foot-bottom a{color:#878da3;margin-left:18px;}
.foot-bottom a:hover{color:#fff;}

/* ---- Form styles ---- */
.valuation-card{max-width:880px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:44px;box-shadow:0 20px 50px -30px rgba(16,24,43,.2);}
.form-block+.form-block{margin-top:30px;}
.form-block-title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:20px;}
.form-block-title .ico{width:28px;height:28px;border-radius:8px;background:#eef1ff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:14px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px;}
.input-wrap{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fcfcfd;}
.input-wrap:focus-within{border-color:var(--blue);}
.input-wrap span{color:var(--grey);font-size:14px;}
.input-wrap input{border:none;outline:none;background:transparent;width:100%;font-size:14.5px;color:var(--ink);font-family:inherit;}
.input-wrap input::placeholder{color:#a7adbb;}
.valuation-submit{margin-top:30px;}
.form-note{font-size:12.5px;color:var(--grey);margin-top:14px;}

/* ---- Cards ---- */
.launch-row{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.launch-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;transition:.2s ease;}
.launch-card:hover{box-shadow:0 24px 50px -28px rgba(16,24,43,.28);transform:translateY(-2px);}
.launch-media{position:relative;aspect-ratio:16/10;overflow:hidden;}
.launch-media img{width:100%;height:100%;object-fit:cover;}
.badge{position:absolute;top:14px;left:14px;background:rgba(16,24,43,.78);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em;padding:6px 12px;border-radius:100px;}
.badge.available{background:rgba(47,91,255,.92);}
.launch-body{padding:22px;}
.place{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--blue);font-weight:600;margin-bottom:8px;}
.launch-body h3{font-size:21px;margin:0 0 10px;font-weight:700;}
.launch-body p{font-size:14px;color:var(--grey);line-height:1.6;margin:0 0 16px;}
.chip{display:inline-block;background:#eef1ff;color:var(--blue);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:100px;}

.insight-row{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.insight-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;}
.insight-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0d1424;}
.insight-media img{width:100%;height:100%;object-fit:cover;opacity:.92;}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.play span{width:60px;height:60px;border-radius:50%;border:2px solid #fff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(16,24,43,.25);}
.insight-tag{position:absolute;top:14px;left:14px;background:#fff;color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.05em;padding:6px 12px;border-radius:100px;}
.insight-body{padding:22px;}
.insight-date{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--grey);margin-bottom:10px;}
.insight-body h3{font-size:19px;margin:0 0 10px;font-weight:700;line-height:1.35;}
.insight-body p{font-size:14px;color:var(--grey);line-height:1.6;margin:0 0 16px;}
.read-link{font-size:14px;font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px;}

/* ---- Responsive ---- */
@media(max-width:980px){
  .menu{display:none;}.menu.mobile-open .dropdown{display:block!important;}
  .burger{display:block;}
  .launch-row,.insight-row,.form-row{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .valuation-card{padding:26px;}
}
@media(max-width:600px){
  .foot-grid{grid-template-columns:1fr;}
}

/* ---- Mobile dropdown fix ---- */
@media(max-width:980px){
  .menu.mobile-open .dropdown{display:block!important;}
  .menu.mobile-open .dropdown>span{display:flex!important;padding:10px 0;font-weight:600;color:#0F2747;cursor:pointer;}
  .menu.mobile-open .dropdown-panel{display:none;position:static!important;opacity:1!important;visibility:visible!important;box-shadow:none!important;border:none!important;padding:4px 0 4px 14px!important;background:#f0f2ff!important;border-radius:8px!important;margin-top:4px!important;transform:none!important;}
  .menu.mobile-open .dropdown-panel.mob-open{display:block!important;}
}

/* ---- Fix dropdown overlap on mobile ---- */
@media(max-width:980px){
  .menu.mobile-open .dropdown-panel{position:static!important;box-shadow:none!important;}
  .menu.mobile-open .dropdown-panel:not(.mob-open){display:none!important;} .menu.mobile-open .dropdown-panel{position:static!important;transform:none!important;}
}

/* ── Dropdown divider & All Guides link ── */
.dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 6px 0;
}
.dropdown-all {
  font-weight: 700 !important;
  color: #C9A86A !important;
  letter-spacing: 0.02em;
}
.dropdown-all:hover {
  color: #fff !important;
}
.dropdown-section-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);padding:8px 16px 4px;pointer-events:none;cursor:default;display:block;}