@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root{
  --forest:#0b2f20;
  --forest-2:#123f2b;
  --green:#2f6848;
  --leaf:#67945f;
  --gold:#c9a66b;
  --cream:#f4f1e7;
  --paper:#fbfaf6;
  --white:#fff;
  --ink:#18221d;
  --muted:#68736d;
  --line:rgba(11,47,32,.12);
  --shadow:0 20px 60px rgba(11,47,32,.12);
  --radius:24px;
  --container:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",sans-serif;color:var(--ink);background:var(--paper);line-height:1.7}
body.nav-open{overflow:hidden}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.container{width:min(var(--container),calc(100% - 40px));margin:auto}
.skip-link{position:fixed;left:15px;top:-60px;background:var(--forest);color:#fff;padding:12px 18px;z-index:9999;border-radius:8px}
.skip-link:focus{top:15px}
.section{padding:110px 0}
.section-sm{padding:75px 0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--green);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
h1,h2,h3,h4{font-family:"Playfair Display",serif;line-height:1.12;color:var(--forest)}
h1{font-size:clamp(3.2rem,7vw,6.5rem)}
h2{font-size:clamp(2.35rem,4.5vw,4.2rem)}
h3{font-size:1.55rem}
p{color:var(--muted)}
.lead{font-size:1.13rem;max-width:680px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;border:1px solid transparent;font-weight:700;transition:.3s ease}
.btn-primary{background:var(--forest);color:#fff}
.btn-primary:hover{background:var(--green);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--forest)}
.btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.btn-outline:hover{background:#fff;color:var(--forest)}
.btn-gold{background:var(--gold);color:var(--forest)}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

.site-header{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:18px 0;transition:.3s}
.site-header.scrolled{background:rgba(11,47,32,.96);backdrop-filter:blur(16px);padding:11px 0;box-shadow:0 10px 30px rgba(0,0,0,.1)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:25px}
.logo{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700;letter-spacing:.05em}
.logo-mark{width:43px;height:43px;border:1px solid rgba(255,255,255,.45);border-radius:50%;display:grid;place-items:center;font-size:1.2rem}
.logo span{font-family:"Playfair Display",serif;font-size:1.2rem}
.nav-links{display:flex;align-items:center;gap:25px;list-style:none}
.nav-links a{color:rgba(255,255,255,.88);font-size:.9rem;font-weight:600;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-7px;width:0;height:2px;background:var(--gold);transition:.25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:#fff}
.nav-cta{padding:10px 17px!important;background:var(--gold);color:var(--forest)!important;border-radius:999px}
.nav-cta::after{display:none}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:1.6rem}

.hero{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;background:
linear-gradient(90deg,rgba(5,28,19,.86),rgba(5,28,19,.45)),
url("https://images.unsplash.com/photo-1511497584788-876760111969?auto=format&fit=crop&w=2200&q=85") center/cover}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(transparent,var(--paper))}
.hero-content{position:relative;z-index:2;color:#fff;padding-top:80px}
.hero h1{color:#fff;max-width:850px}
.hero h1 em{color:#d8c28d;font-style:normal}
.hero p{color:rgba(255,255,255,.84);max-width:680px;font-size:1.15rem;margin-top:22px}
.hero-tag{display:inline-flex;border:1px solid rgba(255,255,255,.35);padding:8px 14px;border-radius:999px;color:#fff;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:22px}
.hero-scroll{position:absolute;right:40px;bottom:55px;z-index:3;color:#fff;writing-mode:vertical-rl;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8}

.page-hero{padding:170px 0 100px;background:linear-gradient(120deg,var(--forest),#1d5439);color:#fff;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:500px;height:500px;border-radius:50%;right:-180px;top:-250px;background:rgba(201,166,107,.12)}
.page-hero h1{color:#fff;max-width:800px}
.page-hero p{color:rgba(255,255,255,.76);max-width:700px;margin-top:20px}
.page-hero .eyebrow{color:#d9c38f}

.intro-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;align-items:center}
.intro-copy h2{margin-bottom:24px}
.intro-image{border-radius:30px;overflow:hidden;box-shadow:var(--shadow);position:relative}
.intro-image img{aspect-ratio:4/3;object-fit:cover}
.image-caption{position:absolute;bottom:18px;left:18px;background:rgba(11,47,32,.88);color:#fff;padding:9px 14px;border-radius:999px;font-size:.75rem}

.stats{background:var(--forest);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.14)}
.stat{padding:35px 25px;background:var(--forest)}
.stat strong{font-family:"Playfair Display",serif;font-size:3.1rem;display:block;color:#fff}
.stat span{font-size:.85rem;color:rgba(255,255,255,.68)}

.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:45px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:.35s;box-shadow:0 5px 25px rgba(11,47,32,.04)}
.card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.card-icon{width:55px;height:55px;border-radius:17px;background:var(--cream);display:grid;place-items:center;color:var(--green);font-size:1.35rem;margin-bottom:22px}
.card p{font-size:.92rem;margin-top:12px}
.card-link{display:inline-flex;margin-top:20px;color:var(--green);font-weight:700;font-size:.88rem}

.split{display:grid;grid-template-columns:1fr 1fr;min-height:600px}
.split-image{background:url("https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=1400&q=85") center/cover}
.split-content{padding:90px clamp(35px,7vw,110px);display:flex;flex-direction:column;justify-content:center;background:var(--cream)}
.split-content h2{margin-bottom:22px}
.check-list{list-style:none;margin-top:25px}
.check-list li{display:flex;gap:12px;margin:12px 0;color:var(--ink)}
.check-list li::before{content:"✓";color:var(--green);font-weight:800}

.project-feature{background:var(--forest);border-radius:35px;overflow:hidden;color:#fff;display:grid;grid-template-columns:1.1fr 1fr}
.project-feature-image{min-height:500px;background:url("https://images.unsplash.com/photo-1497250681960-ef046c08a56e?auto=format&fit=crop&w=1400&q=85") center/cover}
.project-feature-content{padding:65px}
.project-feature h2,.project-feature h3{color:#fff}
.project-feature p{color:rgba(255,255,255,.72)}
.project-feature .eyebrow{color:#d8c28d}

.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:45px}
.story-card{background:#fff;border-radius:22px;overflow:hidden;border:1px solid var(--line);transition:.3s}
.story-card:hover{transform:translateY(-5px)}
.story-card img{aspect-ratio:16/10;object-fit:cover}
.story-body{padding:25px}
.story-meta{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--green);font-weight:700}
.story-body h3{margin-top:10px}
.story-body p{margin-top:10px;font-size:.9rem}

.quote{padding:100px 20px;text-align:center;background:var(--cream)}
.quote blockquote{font-family:"Playfair Display",serif;font-size:clamp(2rem,4vw,3.8rem);line-height:1.25;color:var(--forest);max-width:900px;margin:auto}
.quote cite{display:block;margin-top:25px;font-style:normal;color:var(--green);font-weight:700}

.cta{background:linear-gradient(120deg,var(--green),var(--forest));border-radius:35px;padding:70px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:30px}
.cta h2{color:#fff;max-width:700px}
.cta p{color:rgba(255,255,255,.75);margin-top:12px;max-width:650px}

.detail-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:60px}
.content h2,.content h3{margin:45px 0 18px}
.content h2:first-child{margin-top:0}
.content p{margin-bottom:18px}
.content ul{padding-left:20px;color:var(--muted);margin-bottom:20px}
.sidebar{position:sticky;top:100px;height:max-content}
.side-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:25px;margin-bottom:18px}
.side-card h3{font-size:1.25rem;margin-bottom:14px}
.side-list{list-style:none}
.side-list li{padding:9px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.9rem}
.side-list li:last-child{border:0}

.timeline{position:relative;margin-top:45px}
.timeline::before{content:"";position:absolute;left:24px;top:0;bottom:0;width:1px;background:var(--line)}
.timeline-item{display:grid;grid-template-columns:50px 1fr;gap:20px;margin-bottom:35px}
.timeline-dot{width:49px;height:49px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;position:relative;z-index:1}
.timeline-item h3{font-size:1.3rem;margin-bottom:6px}

.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:25px}
.contact-info{background:var(--forest);border-radius:28px;padding:45px;color:#fff}
.contact-info h2{color:#fff;margin-bottom:18px}
.contact-info p{color:rgba(255,255,255,.72)}
.contact-item{padding:20px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.contact-item strong{display:block;color:#fff;margin-bottom:4px}
.form-card{background:#fff;border:1px solid var(--line);border-radius:28px;padding:45px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field.full{grid-column:1/-1}
label{display:block;font-size:.82rem;font-weight:700;margin-bottom:7px;color:var(--forest)}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:13px;padding:13px 15px;outline:none;background:#fff;color:var(--ink)}
input:focus,textarea:focus,select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(47,104,72,.1)}
textarea{min-height:150px;resize:vertical}
.form-note{font-size:.78rem;margin-top:12px}

.footer{background:#071f15;color:#fff;padding:75px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:45px}
.footer h3{color:#fff;font-size:1.2rem;margin-bottom:18px}
.footer p,.footer a{color:rgba(255,255,255,.62);font-size:.88rem}
.footer a:hover{color:#fff}
.footer-links{list-style:none}
.footer-links li{margin:8px 0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:50px;padding-top:20px;display:flex;justify-content:space-between;gap:20px;font-size:.78rem;color:rgba(255,255,255,.5)}
.socials{display:flex;gap:9px;margin-top:20px}
.socials a{width:37px;height:37px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center}

.reveal{opacity:0;transform:translateY(25px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:1000px){
  .nav-links{gap:15px}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .intro-grid,.detail-grid{gap:40px}
}
@media(max-width:800px){
  .site-header{padding:13px 0}
  .menu-toggle{display:block}
  .nav-links{position:fixed;inset:0;background:var(--forest);flex-direction:column;justify-content:center;gap:25px;transform:translateX(100%);transition:.35s}
  .nav-links.open{transform:none}
  .nav-links a{font-size:1.05rem}
  .nav-cta{padding:12px 22px!important}
  .hero-scroll{display:none}
  .section{padding:80px 0}
  .intro-grid,.split,.project-feature,.detail-grid,.contact-grid{grid-template-columns:1fr}
  .split-image{min-height:400px}
  .project-feature-image{min-height:360px}
  .project-feature-content{padding:45px 30px}
  .sidebar{position:static}
  .story-grid{grid-template-columns:1fr}
  .cta{padding:45px 30px;flex-direction:column;align-items:flex-start}
}
@media(max-width:550px){
  .container{width:min(var(--container),calc(100% - 28px))}
  h1{font-size:3.1rem}
  .cards-grid,.stats-grid,.footer-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .form-card,.contact-info{padding:30px 22px}
  .page-hero{padding:145px 0 75px}
  .footer-bottom{flex-direction:column}
}

WHATSAPP CSS
/* =========================================================
   SCROLL TO TOP
========================================================= */

.scroll-top {
    position: fixed;
    right: 25px;
    bottom: 95px;

    width: 46px;
    height: 46px;

    border: none;
    border-radius: 50%;

    background: #c49a4a;
    color: #fff;

    font-size: 22px;
    font-weight: 600;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;

    z-index: 999;
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    transform: translateY(-3px);
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-wrapper {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 1000;
}


/* WhatsApp button */

.whatsapp-button {
    position: relative;

    width: 58px;
    height: 58px;

    border: none;
    border-radius: 50%;

    background: #25D366;
    color: #fff;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.whatsapp-button:hover {
    transform: scale(1.08);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.28);
}


.whatsapp-symbol {
    font-size: 30px;
    line-height: 1;
}


/* Notification badge */

.whatsapp-badge {
    position: absolute;

    top: -3px;
    right: -3px;

    width: 20px;
    height: 20px;

    border-radius: 50%;

    background: #e53935;
    color: #fff;

    font-size: 11px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #fff;
}


/* =========================================================
   WHATSAPP POPUP
========================================================= */

.whatsapp-popup {
    position: absolute;

    right: 0;
    bottom: 72px;

    width: 320px;

    padding: 20px;

    background: #fff;

    border-radius: 16px;

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.18);

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(15px)
        scale(0.96);

    transform-origin: bottom right;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.whatsapp-popup.show {
    opacity: 1;
    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}


/* Popup header */

.whatsapp-popup-header {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 15px;
}

.whatsapp-icon {
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: #25D366;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 21px;
}

.whatsapp-popup-header strong {
    display: block;

    font-size: 16px;

    color: #222;
}

.whatsapp-popup-header small {
    display: block;

    margin-top: 3px;

    color: #777;

    font-size: 12px;
}


/* Close button */

.whatsapp-close {
    position: absolute;

    top: 10px;
    right: 12px;

    border: none;
    background: transparent;

    font-size: 23px;

    color: #777;

    cursor: pointer;
}


/* Message */

.whatsapp-popup p {
    margin: 0 0 16px;

    color: #555;

    font-size: 14px;

    line-height: 1.6;
}


/* Start conversation */

.whatsapp-start {
    display: block;

    width: 100%;

    padding: 12px 16px;

    border-radius: 8px;

    background: #25D366;
    color: #fff;

    text-align: center;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition: background 0.2s ease;
}

.whatsapp-start:hover {
    background: #1ebe5d;
    color: #fff;
}

/* =========================================================
   DREAMNATURE LOGO
========================================================= */

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    text-decoration: none;
}

.logo-image {
    width: 52px;
    height: 52px;

    object-fit: contain;

    display: block;
}

.logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;

    color: inherit;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .whatsapp-wrapper {
        right: 18px;
        bottom: 18px;
    }

    .whatsapp-popup {
        width: calc(100vw - 36px);

        right: 0;
    }

    .scroll-top {
        right: 18px;
        bottom: 88px;

        width: 42px;
        height: 42px;
    }

}