/* ============================================================
   GREEN NEST — Eco-Luxury Website
   Forest-green identity · Clay-brown earth accent · Warm ivory
   ============================================================ */

:root{
  /* palette (owner-specified website system) */
  --forest:#173A2C;        /* primary identity */
  --forest-deep:#0F2A1F;   /* deeper forest for gradients */
  --forest-soft:#22503C;   /* lifted forest for cards/hover */
  --clay:#8B5A3C;          /* key secondary — earth accent */
  --clay-deep:#714531;     /* clay hover */
  --clay-soft:#A06b48;
  --ivory:#F7F1E6;         /* main background */
  --cream:#F4EBDD;         /* soft section bg */
  --taupe:#B9AC99;         /* support / cards / borders */
  --taupe-soft:#CEC3B1;
  --gold:#C6A44D;          /* fine luxury accent only */
  --ink:#2B2419;           /* warm near-black body text on light */
  --ink-soft:#5A5142;      /* muted body text */
  --ivory-dim:rgba(247,241,230,.82);
  --line-light:rgba(43,36,25,.12);
  --line-gold:rgba(198,164,77,.5);

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --maxw:1200px;
  --pad:clamp(20px,5vw,64px);
  --radius:22px;
  --radius-sm:14px;
  --shadow-soft:0 18px 40px -22px rgba(23,58,44,.45), 0 6px 16px -10px rgba(43,36,25,.25);
  --shadow-card:0 22px 48px -26px rgba(23,58,44,.5), 0 8px 20px -14px rgba(113,69,49,.3);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; color:var(--forest);
  line-height:1.08; margin:0 0 .5em; letter-spacing:.002em}
h1{font-size:clamp(2.5rem,5.6vw,4.4rem); font-weight:600}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:clamp(1.3rem,2.1vw,1.7rem)}
p{margin:0 0 1.1rem}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.measure{max-width:64ch}
.center{text-align:center; margin-left:auto; margin-right:auto}
.eyebrow{font-family:var(--sans); font-size:.74rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--clay); margin:0 0 1rem}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem); color:var(--ink-soft); line-height:1.75}
.section{padding:clamp(64px,9vw,128px) 0}
.rule{border:0; height:1px; width:72px; background:var(--gold); margin:1.4rem 0}
.center .rule{margin-left:auto; margin-right:auto}
.muted{color:var(--ink-soft)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.95em 1.7em; border-radius:999px;
  background:var(--forest); color:var(--ivory); border:1.5px solid var(--forest);
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  box-shadow:0 10px 24px -16px rgba(23,58,44,.7)}
.btn:hover{background:var(--forest-deep); border-color:var(--forest-deep); transform:translateY(-2px)}
.btn--clay{background:var(--clay); border-color:var(--clay); color:var(--ivory)}
.btn--clay:hover{background:var(--clay-deep); border-color:var(--clay-deep)}
.btn--ghost{background:transparent; color:var(--forest); border-color:rgba(23,58,44,.35)}
.btn--ghost:hover{background:var(--forest); color:var(--ivory); border-color:var(--forest)}
.btn--light{background:var(--ivory); color:var(--forest); border-color:var(--ivory)}
.btn--light:hover{background:var(--gold); border-color:var(--gold); color:var(--forest-deep)}
.btn--ghost-light{background:transparent; color:var(--ivory); border-color:rgba(247,241,230,.5)}
.btn--ghost-light:hover{background:var(--ivory); color:var(--forest); border-color:var(--ivory)}
.btn-row{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.6rem}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky; top:0; z-index:60; background:#173A2C;
  border-bottom:1px solid rgba(247,241,230,.1)}
.nav{display:flex; align-items:center; gap:1.5rem; max-width:var(--maxw); margin:0 auto;
  padding:.85rem var(--pad)}
.brandmark{display:inline-flex; align-items:center; flex-shrink:0}
.brandmark, .brandmark img{background:transparent}
.brandmark img{height:38px; width:auto}
.nav-links{display:flex; gap:1.45rem; list-style:none; margin:0; padding:0; margin-left:auto;
  flex-wrap:wrap}
.nav-links a{font-family:var(--sans); font-size:.82rem; font-weight:500; letter-spacing:.04em;
  color:var(--ivory-dim); padding:.35rem 0; position:relative; transition:color .2s var(--ease)}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px;
  background:var(--gold); transition:right .3s var(--ease)}
.nav-links a:hover{color:var(--ivory)} .nav-links a:hover::after{right:0}
.nav-links a[aria-current="page"]{color:var(--ivory)} .nav-links a[aria-current="page"]::after{right:0}
.nav-cta{flex-shrink:0}
.nav-cta .btn{padding:.7em 1.3em; font-size:.74rem}
.hamburger{display:none; background:transparent; border:0; color:var(--ivory); cursor:pointer; padding:.3rem}
.hamburger svg{width:26px; height:26px}

.scrim{position:fixed; inset:0; background:rgba(15,42,31,.55); z-index:70; opacity:0;
  transition:opacity .3s var(--ease)}
.scrim.show{opacity:1}
.mobile-nav{position:fixed; top:0; right:0; height:100%; width:min(82vw,340px); z-index:80;
  background:var(--forest); padding:5rem 2rem 2rem; display:flex; flex-direction:column; gap:.3rem;
  transform:translateX(100%); transition:transform .35s var(--ease); box-shadow:-30px 0 60px -30px rgba(0,0,0,.6)}
.mobile-nav.open{transform:none}
.mobile-nav a{color:var(--ivory); font-family:var(--serif); font-size:1.4rem; padding:.5rem 0;
  border-bottom:1px solid rgba(247,241,230,.12)}
.mobile-nav .btn{margin-top:1.2rem; justify-content:center}
.mobile-close{position:absolute; top:1.2rem; right:1.2rem; background:transparent; border:0;
  color:var(--ivory); cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative; overflow:hidden; isolation:isolate; color:var(--ivory);
  background:radial-gradient(120% 130% at 78% 8%, #245540 0%, var(--forest) 42%, var(--forest-deep) 100%)}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero-layer{position:absolute; inset:-14% -8%; background-repeat:no-repeat; background-size:cover;
  transform:translate3d(var(--px,0),calc(var(--sy,0px) + var(--py,0)),0);
  transition:transform .25s var(--ease); will-change:transform}
.hero-layer.botanical{background-image:url("../img/bg/hero-botanical.svg"); background-position:center}
.hero-clay{position:absolute; right:-12%; top:-18%; width:60%; height:80%; z-index:0;
  background:radial-gradient(circle at 50% 50%, rgba(139,90,60,.5), transparent 62%); filter:blur(8px)}
.hero-grain{position:absolute; inset:0; z-index:0; opacity:.06; mix-blend-mode:overlay;
  background-image:url("../img/bg/stone-grain.svg"); background-size:480px}
.hero-inner{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  padding:clamp(92px,15vw,184px) var(--pad) clamp(84px,13vw,156px); max-width:min(920px,100%)}
.hero .eyebrow{color:var(--gold)}
.hero h1{color:var(--ivory); max-width:16ch; margin-bottom:.45em}
.hero .lede{color:var(--ivory-dim); max-width:54ch}
.hero .rule{background:var(--line-gold); width:90px}

/* hero feature strip (echoes reference icon row) */
.hero-strip{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  padding:0 var(--pad) clamp(56px,8vw,96px)}
.hero-strip-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:rgba(247,241,230,.14); border:1px solid rgba(247,241,230,.16);
  border-radius:var(--radius); overflow:hidden; backdrop-filter:blur(4px)}
.hero-strip .cell{background:rgba(23,58,44,.42); padding:1.5rem 1.2rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; transition:background .3s var(--ease)}
.hero-strip .cell:hover{background:rgba(139,90,60,.4)}
.hero-strip .cell svg{width:30px; height:30px; stroke:var(--gold); fill:none; stroke-width:1.4}
.hero-strip .cell span{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivory-dim)}

/* ---------- Section intros ---------- */
.sec-head{max-width:60ch}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center}

/* ---------- Collection cards (rounded, reference-inspired) ---------- */
.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.6rem}
.ccard{position:relative; border-radius:var(--radius); padding:1.7rem 1.5rem; min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  box-shadow:var(--shadow-card); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  border:1px solid rgba(43,36,25,.06)}
.ccard:hover{transform:translateY(-6px)}
.ccard .badge{width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:rgba(247,241,230,.16); border:1px solid rgba(247,241,230,.28)}
.ccard .badge svg{width:26px; height:26px; fill:none; stroke-width:1.5}
.ccard h3{margin:0; font-size:1.45rem}
.ccard .tag{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 .9rem; opacity:.8}
.ccard .more{font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; margin-top:.7rem;
  display:inline-flex; align-items:center; gap:.4em}
.ccard .more::after{content:"\2192"; transition:transform .3s var(--ease)}
.ccard:hover .more::after{transform:translateX(4px)}
/* tones */
.ccard--forest{background:linear-gradient(160deg,var(--forest-soft),var(--forest)); color:var(--ivory)}
.ccard--forest h3{color:var(--ivory)} .ccard--forest .badge svg{stroke:var(--gold)}
.ccard--clay{background:linear-gradient(160deg,var(--clay-soft),var(--clay)); color:var(--ivory)}
.ccard--clay h3{color:var(--ivory)} .ccard--clay .badge svg{stroke:var(--ivory)}
.ccard--claydeep{background:linear-gradient(160deg,var(--clay),var(--clay-deep)); color:var(--ivory)}
.ccard--claydeep h3{color:var(--ivory)} .ccard--claydeep .badge svg{stroke:var(--gold)}
.ccard--taupe{background:linear-gradient(160deg,var(--taupe-soft),var(--taupe)); color:var(--forest-deep)}
.ccard--taupe h3{color:var(--forest-deep)} .ccard--taupe .badge{background:rgba(23,58,44,.1); border-color:rgba(23,58,44,.18)}
.ccard--taupe .badge svg{stroke:var(--forest)} .ccard--taupe .more{color:var(--forest)}
.ccard--ivory{background:linear-gradient(160deg,#fff9ef,var(--cream)); color:var(--forest-deep); border-color:var(--line-light)}
.ccard--ivory h3{color:var(--forest)} .ccard--ivory .badge{background:rgba(23,58,44,.08); border-color:rgba(23,58,44,.16)}
.ccard--ivory .badge svg{stroke:var(--clay)} .ccard--ivory .more{color:var(--clay)}

/* ---------- Split / feature blocks ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.split.rev .media{order:2}
.feature-media{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card);
  aspect-ratio:4/3; position:relative}
.feature-media .ph{position:absolute; inset:0}
.panel{background:var(--cream); border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.6rem)}

/* placeholder media blocks (premium, no stock imagery) */
.ph{display:flex; align-items:center; justify-content:center; text-align:center;
  background:
    radial-gradient(120% 120% at 25% 20%, rgba(247,241,230,.5), transparent 55%),
    repeating-linear-gradient(135deg, rgba(43,36,25,.04) 0 2px, transparent 2px 16px),
    linear-gradient(150deg, var(--taupe-soft), var(--taupe));
  color:var(--forest-deep)}
.ph span{font-family:var(--sans); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  opacity:.7; padding:.6rem 1rem; border:1px solid rgba(23,58,44,.18); border-radius:999px}
.ph.on-forest{background:
    radial-gradient(120% 120% at 70% 10%, rgba(139,90,60,.45), transparent 55%),
    repeating-linear-gradient(135deg, rgba(247,241,230,.05) 0 2px, transparent 2px 16px),
    linear-gradient(150deg, var(--forest-soft), var(--forest-deep)); color:var(--ivory)}
.ph.on-forest span{color:var(--ivory-dim); border-color:rgba(247,241,230,.3)}

/* ---------- Dark luxury sections ---------- */
.section.forest{background:var(--forest); color:var(--ivory); position:relative; overflow:hidden}
.section.forest h2,.section.forest h3{color:var(--ivory)}
.section.forest .eyebrow{color:var(--gold)}
.section.forest .lede{color:var(--ivory-dim)}
.section.forest .leafmark{position:absolute; inset:0; background-image:url("../img/bg/leaf-spray.svg");
  background-repeat:no-repeat; background-position:right -40px top -30px; background-size:380px; opacity:.5; pointer-events:none}
.section.clay{background:linear-gradient(165deg,var(--clay),var(--clay-deep)); color:var(--ivory); position:relative; overflow:hidden}
.section.clay h2,.section.clay h3{color:var(--ivory)} .section.clay .eyebrow{color:var(--gold)}
.section.clay .lede{color:rgba(247,241,230,.85)}
.section.cream{background:var(--cream)}
.section.taupe{background:linear-gradient(165deg,#c8bda9,var(--taupe))}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:.78rem; letter-spacing:.06em; color:var(--ink-soft); padding:1.4rem 0 0}
.crumb a{color:var(--clay)} .crumb a:hover{text-decoration:underline}
.section.forest .crumb{color:var(--ivory-dim)} .section.forest .crumb a{color:var(--gold)}

/* ---------- Materials chips / feature lists ---------- */
.chips{display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0}
.chip{font-size:.74rem; letter-spacing:.08em; padding:.5em 1em; border-radius:999px;
  background:var(--cream); border:1px solid var(--line-light); color:var(--ink-soft)}
.section.forest .chip{background:rgba(247,241,230,.08); border-color:rgba(247,241,230,.18); color:var(--ivory-dim)}
.flist{list-style:none; padding:0; margin:1.4rem 0; display:grid; gap:1.1rem}
.flist li{padding-left:1.6rem; position:relative}
.flist li::before{content:""; position:absolute; left:0; top:.62em; width:8px; height:8px;
  border-radius:50%; background:var(--gold)}
.flist strong{display:block; color:var(--forest); font-weight:600; font-family:var(--sans); font-size:.95rem; letter-spacing:.02em}
.section.forest .flist strong,.section.clay .flist strong{color:var(--ivory)}
.flist span{color:var(--ink-soft); font-size:.95rem}
.section.forest .flist span,.section.clay .flist span{color:var(--ivory-dim)}
.note{font-size:.85rem; color:var(--ink-soft); border-left:2px solid var(--gold);
  padding:.2rem 0 .2rem 1rem; margin:1.4rem 0; max-width:60ch}
.section.forest .note{color:var(--ivory-dim)}

/* ---------- 3-up feature ---------- */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; margin-top:2.4rem}
.trio .item{background:var(--ivory); border:1px solid var(--line-light); border-radius:var(--radius-sm);
  padding:1.8rem; box-shadow:var(--shadow-soft)}
.section.forest .trio .item{background:rgba(247,241,230,.06); border-color:rgba(247,241,230,.14)}
.trio .item h3{font-size:1.25rem}
.icon-badge{width:46px; height:46px; border-radius:12px; background:rgba(139,90,60,.12);
  display:grid; place-items:center; margin-bottom:1rem}
.icon-badge svg{width:24px; height:24px; stroke:var(--clay); fill:none; stroke-width:1.5}
.section.forest .icon-badge{background:rgba(198,164,77,.14)} .section.forest .icon-badge svg{stroke:var(--gold)}

/* ---------- Contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem)}
.info-line{display:flex; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line-light)}
.info-line .k{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--clay);
  min-width:96px; padding-top:.2rem}
.field{margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.4rem}
.field label{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.field input,.field select,.field textarea{font-family:var(--sans); font-size:.95rem; padding:.8rem 1rem;
  border:1px solid var(--line-light); border-radius:12px; background:var(--ivory); color:var(--ink)}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)}

/* ---------- Footer ---------- */
.site-footer{background:var(--forest-deep); color:var(--ivory-dim); padding:clamp(56px,7vw,90px) 0 2rem;
  position:relative; overflow:hidden}
.site-footer .leafmark{position:absolute; inset:0; background-image:url("../img/bg/leaf-spray.svg");
  background-repeat:no-repeat; background-position:left -60px bottom -40px; background-size:340px; opacity:.35; pointer-events:none}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.2rem; position:relative}
.site-footer img{height:42px; margin-bottom:1rem}
.footer-tag{max-width:34ch; font-size:.92rem}
.site-footer h4{font-family:var(--sans); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold); margin:0 0 1rem}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.site-footer a{color:var(--ivory-dim); font-size:.92rem; transition:color .2s var(--ease)}
.site-footer a:hover{color:var(--gold)}
.footer-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-top:2.6rem;
  padding-top:1.4rem; border-top:1px solid rgba(247,241,230,.12); font-size:.8rem; position:relative}
.footer-bottom a{color:var(--ivory-dim)} .footer-bottom a:hover{color:var(--gold)}

/* ---------- 404 ---------- */
.err-num{font-family:var(--serif); font-size:clamp(5rem,16vw,11rem); color:var(--gold); line-height:1; margin:0}

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

/* skip link */
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:200; background:var(--ivory); color:var(--forest);
  padding:.6rem 1rem; border-radius:8px}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1080px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:inline-flex; margin-left:auto}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .hero-strip-inner{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .split{grid-template-columns:1fr} .split.rev .media{order:0}
  .trio{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .card-grid{grid-template-columns:1fr}
  .hero-strip-inner{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .btn-row .btn{flex:1 1 100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .hero-layer{transition:none}
}

/* ---- real photo drop-in (v2.0.1): covers the placeholder when present, ---- */
/* ---- falls back to the styled .ph block if the image is missing.        ---- */
.ph{position:relative; overflow:hidden}
.ph .ph-photo{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; z-index:2; display:block}

/* ---- language switch (EN <-> AR) ---- */
.lang-switch{font-family:var(--sans); font-size:.78rem; font-weight:600; letter-spacing:.06em;
  color:var(--forest); border:1px solid var(--line,#d8cdb8); border-radius:999px;
  padding:.5em 1em; margin-inline-end:.6rem; text-decoration:none; white-space:nowrap;
  transition:background .2s,color .2s}
.lang-switch:hover{background:var(--forest); color:var(--ivory)}
.mobile-nav .lang-switch-m{color:var(--gold); font-family:var(--sans); font-size:.95rem;
  letter-spacing:.04em; margin-top:1.2rem; border-top:1px solid rgba(247,241,230,.15); padding-top:1.2rem}
header .nav-cta{display:flex; align-items:center}