/* ============================================================
   VAN NOORD REAL ESTATE — v6 "Masterpiece" structure
   Brand board: cream #F4EEDF · navy #12263F · gold #C2A15A
   Light theme with dark photo heroes
   ============================================================ */
:root{
  --cream:#f6f1e4;
  --cream-2:#efe8d5;
  --navy:#12263f;
  --navy-2:#0b1626;
  --card:#ffffff;
  --gold:#c2a15a;
  --gold-2:#a98c47;
  --gold-soft:#d8bc7e;
  --gold-dim:rgba(194,161,90,.4);
  --text:#1d2c3d;
  --muted:#5d6878;
  --line:rgba(18,38,63,.12);
  --line-gold:rgba(194,161,90,.35);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Jost','Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:17px}
body{background:var(--cream);color:var(--text);font-family:var(--sans);font-weight:400;line-height:1.75;letter-spacing:.015em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .25s}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.18;color:var(--navy)}
.container{max-width:1240px;margin:0 auto;padding:0 24px}

/* ---------- Top bar (dark) ---------- */
.topbar{background:var(--navy-2);border-bottom:1px solid var(--line-gold);font-size:.85rem;color:#c9d2df}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:9px;padding-bottom:9px}
.topbar a{color:#c9d2df}
.topbar a:hover{color:var(--gold-soft)}
.topbar .lic{color:#8d99ab;letter-spacing:.07em}

/* ---------- Header (light) ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(246,241,228,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .container{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:14px;padding-bottom:14px}
.logo{display:flex;align-items:center;gap:14px}
.logo .star{width:46px;height:46px;flex:none}
.logo .word{line-height:1.15}
.logo .word b{display:block;font-family:var(--serif);font-weight:700;font-size:1.3rem;letter-spacing:.22em;color:var(--navy)}
.logo .word span{display:block;font-size:.68rem;letter-spacing:.44em;color:var(--gold-2);text-transform:uppercase;font-weight:500}
nav.main{display:flex;gap:30px;font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;align-items:center}
nav.main a{color:var(--navy);padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a.active{color:var(--gold-2);border-bottom-color:var(--gold)}
nav.main a.cta{background:var(--navy);color:var(--cream);padding:12px 24px;border:none;letter-spacing:.14em}
nav.main a.cta:hover{background:var(--gold);color:var(--navy)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--navy);font-size:1.3rem;padding:6px 14px;cursor:pointer}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:16px 40px;border:1px solid var(--navy);color:var(--navy);font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;transition:all .3s;cursor:pointer;background:transparent;font-family:var(--sans);font-weight:500}
.btn:hover{background:var(--navy);color:var(--cream)}
.btn.solid{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.solid:hover{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn.gold:hover{background:var(--gold-soft);border-color:var(--gold-soft)}
.btn.light{border-color:rgba(244,238,223,.7);color:#f4eedf;background:rgba(11,22,38,.25)}
.btn.light:hover{background:#f4eedf;color:var(--navy)}
.btn-row{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- Hero (dark, photo) ---------- */
.hero{position:relative;min-height:88vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background-size:cover;background-position:center}
.hero-inner{position:relative;z-index:2;max-width:880px;margin:0 auto;text-align:center;padding:110px 24px 40px}
.kicker{font-size:.85rem;letter-spacing:.38em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:22px;font-weight:500}
.kicker::before{content:"✦";margin-right:12px;color:var(--gold)}
.hero .kicker{color:var(--gold-soft)}
.hero h1{font-size:clamp(2.8rem,6vw,5rem);font-weight:700;color:#f7f3e8;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero p.lead{margin:24px auto 36px;font-size:1.18rem;color:#e3e7ee;max-width:640px;text-shadow:0 1px 12px rgba(0,0,0,.6)}

/* ---------- Finder bar ---------- */
.finder{position:relative;z-index:3;margin:26px auto 60px;max-width:980px;padding:0 24px;width:100%}
.finder .box{background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.35);padding:18px;display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:12px;align-items:center}
.finder label{display:none}
.finder select{width:100%;background:var(--cream);border:1px solid var(--line);color:var(--navy);padding:15px 16px;font-family:var(--sans);font-size:.98rem;outline:none}
.finder .btn{padding:15px 34px}

/* ---------- Sections ---------- */
section{padding:96px 0}
section.alt{background:var(--cream-2)}
section.dark{background:var(--navy-2)}
section.dark h2,section.dark h3{color:#f4eedf}
section.dark p{color:#aab4c3}
.sec-head{max-width:720px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(2.1rem,3.8vw,3.1rem);margin-top:12px}
.sec-head p{color:var(--muted);margin-top:16px;font-size:1.1rem}
.rule{width:70px;height:2px;background:var(--gold);margin-top:26px}
.sec-head.center .rule{margin-left:auto;margin-right:auto}

/* ---------- Intro + stats ---------- */
.intro-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:50px;align-items:start}
.intro-grid h2{font-size:clamp(2rem,3.6vw,2.9rem);margin-bottom:22px}
.intro-grid p{color:var(--muted);margin-bottom:16px;font-size:1.05rem}
.stat-card{background:var(--navy-2);border:1px solid var(--line-gold);padding:10px 34px;box-shadow:0 18px 50px rgba(18,38,63,.25)}
.stat-card .stat{padding:24px 0;border-bottom:1px solid rgba(194,161,90,.25)}
.stat-card .stat:last-child{border-bottom:none}
.stat-card b{display:block;font-family:var(--serif);font-size:2.3rem;font-weight:700;color:var(--gold-soft)}
.stat-card span{color:#aab4c3;font-size:.95rem}

/* ---------- Grids & cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.svc{border:1px solid var(--line);padding:40px 34px;background:var(--card);box-shadow:0 6px 24px rgba(18,38,63,.06);transition:transform .3s,box-shadow .3s}
.svc:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(18,38,63,.12)}
.svc .num{font-family:var(--serif);font-size:1rem;color:var(--gold-2);letter-spacing:.2em}
.svc h3{font-size:1.45rem;margin:14px 0 10px}
.svc p{color:var(--muted);font-size:.98rem}

/* ---------- Area tabs ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.tabs button{background:transparent;border:none;border-bottom:2px solid transparent;color:var(--muted);font-family:var(--sans);font-size:.95rem;letter-spacing:.06em;padding:10px 16px;cursor:pointer;transition:all .25s;font-weight:500}
.tabs button:hover{color:var(--navy)}
.tabs button.on{color:var(--gold-2);border-bottom-color:var(--gold)}

/* ---------- Project photo cards ---------- */
.pcard{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;box-shadow:0 6px 24px rgba(18,38,63,.07);transition:transform .3s,box-shadow .3s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(18,38,63,.16)}
.pcard .visual{height:230px;position:relative;overflow:hidden;background-size:cover;background-position:center}
.pcard .visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,22,38,0),rgba(11,22,38,.45) 92%)}
.pcard .visual .tag{position:absolute;top:16px;left:16px;z-index:2;background:rgba(11,22,38,.85);border:1px solid var(--gold-dim);color:var(--gold-soft);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:6px 13px;font-weight:500}
.pcard .body{padding:26px 28px;flex:1;display:flex;flex-direction:column}
.pcard h3{font-size:1.6rem}
.pcard .loc{color:var(--gold-2);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;margin:8px 0 14px;font-weight:500}
.pcard .meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:.92rem;border-top:1px solid var(--line);padding-top:16px;margin-top:auto}
.pcard .meta b{color:var(--navy);font-weight:600}
.pcard .go{margin-top:20px;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2);font-weight:500}
.pcard .go span{display:inline-block;transition:transform .3s}
.pcard:hover .go span{transform:translateX(6px)}

/* ---------- Page hero (dark, photo) ---------- */
.p-hero{position:relative;min-height:44vh;display:flex;align-items:flex-end;overflow:hidden;width:100%;background-size:cover;background-position:center}
.p-hero .container{width:100%;padding-top:120px;padding-bottom:100px;position:relative;z-index:2}
.p-hero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:700;color:#f7f3e8;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.p-hero .crumbs{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:#c8cfdc;margin-bottom:14px;font-weight:500}
.p-hero .crumbs::before{content:"✦";margin-right:10px;color:var(--gold)}
.p-hero .crumbs a:hover{color:var(--gold-soft)}
.p-hero .kicker{color:var(--gold-soft)}

.p-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;margin-top:-70px;position:relative;z-index:5}
.spec-card,.lead-card{background:var(--card);border:1px solid var(--line);padding:42px;box-shadow:0 20px 60px rgba(18,38,63,.18)}
.spec-card h2,.lead-card h2{font-size:1.8rem;margin-bottom:8px}
.spec-card .from{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.spec-card .from b{color:var(--gold-2);font-family:var(--serif);font-size:1.45rem;font-weight:700}
table.specs{width:100%;border-collapse:collapse;font-size:1rem}
table.specs tr{border-bottom:1px solid var(--line)}
table.specs tr:nth-child(odd){background:rgba(18,38,63,.03)}
table.specs td{padding:14px 12px}
table.specs td:first-child{color:var(--muted);width:44%}
table.specs td:last-child{text-align:right;color:var(--navy);font-weight:600}

.lead-card p.note{color:var(--muted);font-size:.96rem;margin:8px 0 22px}
.lead-card label{display:block;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px;font-weight:500}
.lead-card input,.lead-card select{width:100%;background:var(--cream);border:1px solid var(--line);color:var(--navy);padding:15px 17px;font-family:var(--sans);font-size:1rem;outline:none;transition:border-color .25s}
.lead-card input:focus,.lead-card select:focus{border-color:var(--gold)}
.lead-card .btn{width:100%;margin-top:26px}
.doc-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.doc-chip{border:1px solid var(--gold-dim);color:var(--gold-2);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding:8px 15px;font-weight:500}

.p-section{padding:76px 0 0}
.p-section h2{font-size:2.1rem;margin-bottom:20px}
.p-section p{color:var(--muted);max-width:860px;font-size:1.08rem}
.amen{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:28px}
.amen div{border:1px solid var(--line);background:#fff;padding:17px 21px;font-size:.98rem;color:var(--muted)}
.amen div::before{content:"— ";color:var(--gold-2)}
.pay-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.pay-steps .step{border:1px solid var(--line);background:#fff;padding:32px;box-shadow:0 6px 20px rgba(18,38,63,.06)}
.pay-steps .step b{display:block;font-family:var(--serif);font-size:2.4rem;color:var(--gold-2);font-weight:700}
.pay-steps .step span{color:var(--muted);font-size:.95rem}

/* ---------- Why grid ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-grid .w{background:#fff;border:1px solid var(--line);padding:34px 30px;box-shadow:0 6px 24px rgba(18,38,63,.06)}
.why-grid .w h3{font-size:1.3rem;margin-bottom:10px}
.why-grid .w h3::before{content:"✦ ";color:var(--gold)}
.why-grid .w p{color:var(--muted);font-size:.95rem}

/* ---------- Developers cards ---------- */
.dcard{position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;padding:40px 42px;display:flex;flex-direction:column;box-shadow:0 6px 24px rgba(18,38,63,.07);transition:transform .3s,box-shadow .3s}
.dcard:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(18,38,63,.14)}
.dcard .dmark{position:absolute;right:-14px;top:-44px;font-family:var(--serif);font-weight:700;font-size:12rem;line-height:1;color:rgba(194,161,90,.1);pointer-events:none}
.dcard h3{font-size:1.85rem;margin-bottom:10px}
.dcard>p{color:var(--muted);font-size:.98rem;margin-bottom:18px;max-width:92%}
.area-proj{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line);padding:12px 0;font-size:.96rem;color:var(--text)}
.area-proj b{color:var(--gold-2);font-weight:600;white-space:nowrap}
a.area-proj:hover span{color:var(--gold-2)}
.area-proj.new span{color:var(--gold-2)}

/* ---------- Callback strip ---------- */
.callback{background:var(--navy-2);border-top:1px solid var(--line-gold);border-bottom:1px solid var(--line-gold)}
.callback .container{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding-top:80px;padding-bottom:80px}
.callback h2{color:#f4eedf;font-size:clamp(1.9rem,3.4vw,2.7rem)}
.callback p{color:#aab4c3;margin-top:12px;font-size:1.05rem}
.callback form{display:flex;gap:12px;flex-wrap:wrap}
.callback input{flex:1;min-width:220px;background:#0f1e33;border:1px solid var(--line-gold);color:#f4eedf;padding:17px 18px;font-family:var(--sans);font-size:1rem;outline:none}
.callback input:focus{border-color:var(--gold)}
.callback .small{font-size:.85rem;color:#7d879a;margin-top:12px}

/* ---------- News ---------- */
.news-item{border:1px solid var(--line);background:#fff;padding:36px 40px;margin-bottom:22px;box-shadow:0 6px 24px rgba(18,38,63,.06);transition:box-shadow .3s}
.news-item:hover{box-shadow:0 16px 40px rgba(18,38,63,.12)}
.news-date{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);margin-bottom:12px;font-weight:500}
.news-item h3{font-size:1.65rem;margin-bottom:10px}
.news-item p{color:var(--muted);font-size:1.02rem}
.news-cta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.92rem;color:var(--muted)}
.news-cta a{color:var(--gold-2);font-weight:600}
.news-cta a:hover{color:var(--navy)}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(90deg,rgba(194,161,90,.16),transparent 60%),var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cta-band .container{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding-top:72px;padding-bottom:72px}
.cta-band h2{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.cta-band p{color:var(--muted);margin-top:10px;font-size:1.05rem}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.c-item{border-bottom:1px solid var(--line);padding:22px 0;font-size:1.05rem}
.c-item .k{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-2);margin-bottom:6px;font-weight:500}
.c-item a:hover{color:var(--gold-2)}

/* ---------- Footer (dark) ---------- */
footer.site{background:var(--navy-2);border-top:1px solid var(--line-gold);padding:72px 0 0;font-size:.96rem;color:#aab4c3}
footer.site h4{color:var(--gold-soft)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:50px}
.f-grid h4{font-size:.82rem;letter-spacing:.26em;text-transform:uppercase;margin-bottom:20px;font-family:var(--sans);font-weight:500}
.f-grid p,.f-grid a{color:#aab4c3}
.f-grid a{display:block;padding:6px 0}
.f-grid a:hover{color:var(--gold-soft)}
.f-grid .word b{color:#f4eedf}
.f-bottom{border-top:1px solid rgba(194,161,90,.25);padding:22px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#7d879a;font-size:.83rem;letter-spacing:.05em}

/* ---------- Thank you ---------- */
.thanks{min-height:70vh;display:flex;align-items:center;text-align:center}
.thanks .inner{max-width:600px;margin:0 auto}
.thanks h1{font-size:2.8rem;margin:18px 0}
.thanks p{color:var(--muted);font-size:1.1rem}

/* ---------- Brand star animations ---------- */
@keyframes glowPulse{
  0%,100%{filter:drop-shadow(0 0 5px rgba(194,161,90,.4));transform:scale(1)}
  50%{filter:drop-shadow(0 0 18px rgba(194,161,90,.9));transform:scale(1.05)}
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}50%{opacity:.95;transform:scale(1) rotate(20deg)}}
@keyframes sheen{0%{left:-80%}55%{left:130%}100%{left:130%}}
@keyframes waRing{0%{transform:scale(.75);opacity:.85}100%{transform:scale(1.6);opacity:0}}
.logo .star{animation:glowPulse 3.6s ease-in-out infinite}
.hero-star{position:absolute;right:5%;top:14%;width:300px;height:320px;z-index:1;animation:floaty 7s ease-in-out infinite;pointer-events:none;opacity:.9}
.hero-star svg.star-big{width:100%;height:100%;animation:glowPulse 4.2s ease-in-out infinite}
.hero-star .ring{position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;border:1px dashed rgba(216,188,126,.5);border-radius:50%;animation:spin 70s linear infinite}
.hero-star .ring2{position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border:1px solid rgba(216,188,126,.3);border-radius:50%}
.tw{position:absolute;z-index:1;color:var(--gold-soft);opacity:0;animation:twinkle 3.4s ease-in-out infinite;pointer-events:none}
.tw svg{width:100%;height:100%;display:block}
.btn.gold,.btn.solid{position:relative;overflow:hidden}
.btn.gold::after,.btn.solid::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sheen 4.6s ease-in-out infinite}
.wa-float{position:fixed;bottom:30px;right:30px;z-index:80;width:60px;height:60px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .25s,background .25s}
.wa-float:hover{transform:scale(1.08);background:var(--gold-soft)}
.wa-float::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--gold);animation:waRing 2.4s ease-out infinite}
@media(prefers-reduced-motion:reduce){
  .logo .star,.hero-star,.hero-star svg.star-big,.hero-star .ring,.tw,.btn.gold::after,.btn.solid::after,.wa-float::before{animation:none}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .grid-3,.amen,.pay-steps,.why-grid{grid-template-columns:repeat(2,1fr)}
  .p-layout{grid-template-columns:1fr;margin-top:-40px}
  .contact-grid,.grid-2,.f-grid,.intro-grid,.callback .container{grid-template-columns:1fr}
  .finder .box{grid-template-columns:1fr 1fr}
  .hero-star{right:-50px;top:auto;bottom:-30px;width:220px;height:240px;opacity:.45}
}
@media(max-width:680px){
  html{font-size:16px}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--cream);flex-direction:column;gap:0;padding:12px 24px;border-bottom:1px solid var(--line);align-items:stretch}
  nav.main.open{display:flex}
  nav.main a{padding:14px 0;border-bottom:1px solid var(--line)}
  nav.main a.cta{text-align:center;margin-top:8px}
  .nav-toggle{display:block}
  .grid-3,.amen,.pay-steps,.why-grid{grid-template-columns:1fr}
  .finder .box{grid-template-columns:1fr}
  .topbar .lic{display:none}
  section{padding:64px 0}
  .news-item{padding:26px 22px}
}