/*
Theme Name: Noleph Group — Final V1
Author: Noleph Group / Kliitch
Description: Reproduction of the approved Noleph Group V1 visual direction.
Version: 1.0.0
*/
:root{
 --navy:#071321;--navy2:#0d1d2d;--cream:#f5f1e9;--white:#fffdf9;
 --gold:#c9a96b;--ink:#151515;--muted:#77736d;
 --serif:Georgia,"Times New Roman",serif;--sans:Arial,Helvetica,sans-serif
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.5}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.container{width:min(1210px,92%);margin:auto}

/* HEADER */
.site-header{position:fixed;z-index:100;top:0;left:0;right:0;height:68px;background:rgba(6,18,31,.96);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{height:68px;display:flex;align-items:center;justify-content:space-between}
.logo{width:155px}
.menu{display:flex;align-items:center;gap:34px;color:#fff;font-size:11px;text-transform:uppercase}
.menu a{padding:25px 0 21px;position:relative;letter-spacing:.3px}
.menu a:hover,.menu a.active{color:#fff}
.menu a.active:after{content:"";position:absolute;left:0;right:0;bottom:13px;height:1px;background:#fff}
.lang{color:#fff;font-size:10px;letter-spacing:1px}
.lang span:first-child{color:#fff}.lang span:last-child{color:#999}
.nav-toggle{display:none;background:none;border:0;color:#fff;font-size:24px}

/* HERO */
.hero{height:500px;margin-top:68px;position:relative;overflow:hidden;background:url("assets/images/hero.jpg") center/cover no-repeat;color:#fff}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,15,25,.20),rgba(4,15,25,.10) 55%,rgba(4,10,17,.30))}
.hero-content{position:relative;z-index:1;text-align:center;padding-top:48px}
.hero-logo{font:500 clamp(45px,5vw,74px)/1 var(--serif);letter-spacing:13px;margin:0;color:#fff}
.hero-tag{font-size:14px;letter-spacing:6px;color:#d9bd89;margin-top:10px;text-transform:uppercase}
.hero-sub{font-size:17px;margin-top:14px}
.hero-links{display:flex;justify-content:center;gap:30px;margin-top:22px}
.hero-link{width:292px;min-height:76px;display:flex;align-items:center;gap:16px;padding:13px 22px;border:1px solid rgba(255,255,255,.35);background:rgba(4,16,29,.68);color:#fff;text-align:left}
.hero-link.home{background:rgba(248,245,238,.95);color:#151515}
.hero-link .mark{width:45px;height:45px;border-radius:50%;background:#bd202d;display:grid;place-items:center;font:bold 24px Georgia,serif;color:#fff}
.hero-link.home .mark{background:transparent;color:#18283a;font-size:32px}
.hero-link b{font:500 18px var(--serif);display:block;letter-spacing:1px}
.hero-link small{font-size:11px;display:block;margin-top:2px}
.hero-link .arrow{margin-left:auto;font-size:24px;font-weight:200}
.scroll-dot{position:absolute;left:50%;bottom:11px;transform:translateX(-50%);width:18px;height:32px;border:1px solid #fff;border-radius:10px}
.scroll-dot:after{content:"";position:absolute;width:2px;height:7px;background:#fff;left:7px;top:7px;border-radius:2px}

/* INTRO */
.intro{background:var(--white);min-height:255px}
.intro-grid{display:grid;grid-template-columns:1fr 1.25fr;align-items:center;min-height:255px}
.intro-copy{padding:35px 25px 35px 0}
.kicker{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#b08e56}
.intro h2{font:500 34px/1.15 var(--serif);margin:10px 0 13px}
.intro p{font-size:12px;color:#555;max-width:440px;margin:0}
.story-btn{display:inline-block;margin-top:18px;padding:9px 27px;background:#0b0c0e;color:#fff;font-size:9px;letter-spacing:1.5px;text-transform:uppercase}
.team-wrap{height:255px;overflow:hidden;display:flex;align-items:end;justify-content:center;background:var(--white)}
.team-wrap img{width:100%;height:100%;object-fit:cover;object-position:center}

/* UNIVERS */
.universes{background:#090d13;padding:10px 0 13px}
.universe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.u-card{height:185px;position:relative;overflow:hidden;color:#fff;background:#111}
.u-card:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.05))}
.u-card img{width:100%;height:100%;object-fit:cover;opacity:.82}
.u-card-content{position:absolute;inset:auto 18px 16px 18px}
.u-icon{position:absolute;left:15px;top:12px;width:38px;height:38px;border:1px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:17px}
.u-card h3{font:500 24px var(--serif);margin:0 0 2px}
.u-card p{font-size:11px;line-height:1.45;margin:0 0 9px;color:#eee}
.u-card a{font-size:9px;text-transform:uppercase;letter-spacing:1px}

/* VALUES */
.values{background:var(--white);padding:14px 0}
.value-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.value{display:flex;align-items:center;gap:14px;justify-content:center;padding:8px 18px;border-right:1px solid #ddd}
.value:last-child{border:0}
.value-icon{font-size:32px;font-family:var(--serif)}
.value b{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;margin-bottom:2px}
.value span{display:block;font-size:9px;color:#555;max-width:170px}

/* PROJECTS / HOMES */
.section{padding:80px 0}.section.dark{background:#090d13;color:#fff}.section.white{background:var(--white)}
.section-head{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:35px}
.section h2{font:500 50px/1 var(--serif);margin:7px 0}.section .lead{max-width:560px;color:#666;font-size:14px}.dark .lead{color:#aaa}
.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.project{min-height:260px;padding:25px;background:#fff;border:1px solid #e2dfd8;display:flex;flex-direction:column}
.project .tag{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:#999}.project h3{font:500 26px var(--serif);margin-top:auto}.project p{font-size:12px;color:#777}
.darkbtn{display:inline-block;background:#0a0b0d;color:#fff;padding:11px 16px;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;width:max-content}
.homes-feature{display:grid;grid-template-columns:1fr 1fr}.homes-image{min-height:470px;background:url("assets/images/homes-card.jpg") center/cover}.homes-copy{padding:55px;background:#fff}.homes-copy h2{font:500 55px var(--serif);margin:8px 0 14px}.amenities{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;color:#555;margin:22px 0}.amenities div:before{content:"•";color:#2e6f95;margin-right:7px}.price{font:500 36px var(--serif);margin:10px 0 20px}

/* CTA / FOOTER */
.cta{background:#080c12;color:#fff;padding:50px 0}.cta-inner{display:flex;align-items:center;justify-content:center;gap:50px}.cta h2{font:500 35px var(--serif);margin:0;color:#e9d9b9}.outline{border:1px solid #b99b66;color:#fff;padding:13px 30px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase}
.footer{background:#060707;color:#aaa;padding:35px 0;font-size:11px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}.footer h3{font:500 20px var(--serif);color:#fff}.footer a:hover{color:#fff}.footer-bottom{border-top:1px solid #252525;margin-top:25px;padding-top:14px;display:flex;justify-content:space-between;font-size:10px;color:#777}

/* PAGES */
.page-hero{margin-top:68px;background:#0b1420;color:#fff;padding:110px 0 65px}.page-hero h1{font:500 68px var(--serif);margin:15px 0}.content{padding:75px 0;background:#fff}.content-inner{max-width:850px}.content h2{font:500 42px var(--serif)}.content p{color:#555}

/* RESPONSIVE */
@media(max-width:950px){
 .menu{gap:15px}.lang{display:none}.hero-link{width:260px}.intro-grid{grid-template-columns:1fr}.team-wrap{height:260px}.intro-copy{padding:35px 0 15px}.universe-grid,.project-grid{grid-template-columns:1fr 1fr}.value-grid{grid-template-columns:1fr 1fr}.value:nth-child(2){border-right:0}.homes-feature{grid-template-columns:1fr}
}
@media(max-width:650px){
 .site-header,.nav{height:62px}.site-header{height:62px}.nav{height:62px}.logo{width:130px}.menu{display:none}.nav-toggle{display:block}
 .hero{margin-top:62px;height:570px}.hero-content{padding-top:70px}.hero-logo{font-size:43px;letter-spacing:7px}.hero-tag{font-size:10px;letter-spacing:4px}.hero-sub{font-size:14px}.hero-links{display:grid;gap:10px;width:min(350px,90%);margin:22px auto}.hero-link{width:100%;min-height:68px}
 .section{padding:55px 0}.section-head{display:block}.section h2{font-size:42px}.universe-grid,.project-grid{grid-template-columns:1fr}.u-card{height:240px}.value-grid{grid-template-columns:1fr}.value{justify-content:flex-start;border-right:0;border-bottom:1px solid #ddd}.value:last-child{border-bottom:0}.homes-copy{padding:40px 25px}.homes-copy h2{font-size:44px}.amenities{grid-template-columns:1fr}.cta-inner{display:block;text-align:center}.cta h2{font-size:30px;margin-bottom:20px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom div+div{margin-top:8px}
}


/* EXACT APPROVED V1 HOME
   The homepage is built from the approved reference slices.
   This prevents duplicate text, duplicated buttons and image overlays. */
.exact-home{background:#fff}
.reference-strip{position:relative;width:100%;line-height:0;overflow:hidden}
.reference-strip>img{width:100%;height:auto;display:block}
.hotspot{position:absolute;z-index:3}
.hotspot>a{display:block;width:100%;height:100%;cursor:pointer}
.hotspot:hover{background:rgba(255,255,255,.045)}
.header-strip{background:#071321}
.hs-home{left:28.7%;top:0;width:4.2%;height:100%}
.hs-group{left:34.2%;top:0;width:7%;height:100%}
.hs-kliitch{left:41.2%;top:0;width:5.2%;height:100%}
.hs-homes{left:47.1%;top:0;width:8.2%;height:100%}
.hs-projects{left:55.2%;top:0;width:8%;height:100%}
.hs-contact{left:62.4%;top:0;width:6.2%;height:100%}
.hero-kliitch{left:30.4%;top:56.5%;width:19%;height:22%}
.hero-homes{left:51.5%;top:56.5%;width:19%;height:22%}
.story-hotspot{left:17.9%;top:79.8%;width:13%;height:13%}
.card-kliitch{left:9.5%;top:5%;width:26%;height:90%}
.card-homes{left:37%;top:5%;width:26%;height:90%}
.card-projects{left:64.1%;top:5%;width:26%;height:90%}
.cta-hotspot{left:56.3%;top:12%;width:13.5%;height:73%}
@media(max-width:700px){
 .hs-home{left:5%;width:12%}.hs-group{left:18%;width:16%}.hs-kliitch{left:35%;width:12%}.hs-homes{left:48%;width:17%}.hs-projects{left:67%;width:15%}.hs-contact{left:84%;width:14%}
 .hero-kliitch{left:10%;width:38%}.hero-homes{left:52%;width:38%}
 .story-hotspot{left:10%;width:30%}
 .card-kliitch,.card-homes,.card-projects{width:31%;height:90%}
 .card-kliitch{left:2%}.card-homes{left:34.5%}.card-projects{left:67%}
}