/* ==========================================================================
   LANDSCAPERS INC. — LUXURY REBUILD
   Design tokens: deep forest / emerald / gold on near-black, warm white ink.
   Display: Fraunces (organic serif) — Body: Manrope — Label: Manrope (tracked)
   ========================================================================== */

:root{
  /* --- Palette --- */
  --bg:            #070B08;
  --bg-soft:       #0B120D;
  --surface:       #101A13;
  --surface-2:     #16221A;
  --line:          rgba(244,241,234,.09);
  --line-strong:   rgba(244,241,234,.16);

  --forest:        #10331F;
  --forest-2:      #1B4B2E;
  --emerald:       #2E7D52;
  --emerald-2:     #4FA980;
  --emerald-bright:#7FD8AE;

  --gold:          #C7A15A;
  --gold-soft:     #E3CB93;

  --stone:         #B8B2A4;
  --ink:           #F4F1E8;
  --ink-dim:       #CFCABE;

  /* --- Type --- */
  --f-display: 'Fraunces', serif;
  --f-body:    'Manrope', sans-serif;

  --ease-out:   cubic-bezier(.16,1,.3,1);
  --ease-soft:  cubic-bezier(.65,0,.35,1);

  --container: 1320px;
  --nav-h: 92px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
html.has-lenis{ scroll-behavior:auto; }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: default;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
svg{ display:block; }

.container{ max-width:var(--container); margin:0 auto; padding:0 40px; }

::selection{ background: var(--emerald-2); color:#06110b; }

/* Texture: subtle film grain overlay across whole page */
.grain{
  position:fixed; inset:0; z-index:9997; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.08;
}
h2{ font-size: clamp(2.4rem, 4.4vw, 4.2rem); font-weight:500; }
h3{ font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight:500; }
p{ color: var(--ink-dim); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--f-body); font-size:.72rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold-soft);
  margin-bottom: 22px;
}
.eyebrow::before{
  content:''; width:26px; height:1px; background: var(--gold);
}
.eyebrow i{ font-size:.85em; }

.section-head{ max-width:720px; margin-bottom: 64px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head p{ margin-top:20px; font-size:1.05rem; max-width:560px; }
.section-head.center p{ margin-left:auto; margin-right:auto; }

.italic{ font-style:italic; font-weight:400; color: var(--emerald-bright); }

section{ position:relative; }
.pad{ padding: 160px 0; }
@media(max-width:900px){ .pad{ padding:110px 0; } }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  padding: 19px 34px; border-radius: 100px;
  font-family: var(--f-body); font-weight:700; font-size:.86rem;
  letter-spacing:.03em; text-transform:uppercase;
  overflow:hidden; isolation:isolate; white-space:nowrap;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .4s;
}
.btn i, .btn svg{ position:relative; z-index:2; transition:transform .45s var(--ease-out); }
.btn span{ position:relative; z-index:2; }
.btn:active{ transform: scale(.96); }

.btn-primary{
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color:#12200C;
  box-shadow: 0 10px 30px -8px rgba(199,161,90,.55);
}
.btn-primary:hover{ box-shadow: 0 16px 40px -8px rgba(199,161,90,.7); transform: translateY(-2px); }
.btn-primary:hover i{ transform: translateX(5px); }

.btn-ghost{
  background: rgba(244,241,232,.04);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover{ background: rgba(244,241,232,.09); border-color: rgba(244,241,232,.35); transform: translateY(-2px); }

.btn-ripple{ position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; }
.ripple-dot{
  position:absolute; border-radius:50%; background: rgba(255,255,255,.5);
  transform: scale(0); animation: rippleOut .7s ease-out forwards;
}
@keyframes rippleOut{ to{ transform: scale(1); opacity:0; } }

/* magnetic wrapper just needs no extra CSS — handled via transform in JS */
.magnetic{ will-change: transform; }

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform: translate(-50%,-50%);
}
.cursor-dot{
  width:8px; height:8px; background: var(--gold-soft);
  transition: opacity .3s, transform .15s;
}
.cursor-ring{
  width:42px; height:42px; border:1px solid rgba(244,241,232,.55);
  transition: width .4s var(--ease-out), height .4s var(--ease-out),
              border-color .4s, background .4s, opacity .3s;
}
.cursor-ring.hover{
  width:84px; height:84px;
  background: rgba(199,161,90,.1);
  border-color: var(--gold-soft);
}
.cursor-ring.text{ background: rgba(244,241,232,.08); }
body.cursor-hide .cursor-dot, body.cursor-hide .cursor-ring{ opacity:0; }
@media(hover:none), (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ==========================================================================
   GROWTH LINE — signature scroll-progress vine on the left edge
   ========================================================================== */
.growth-line{
  position:fixed; left:26px; top:50%; transform:translateY(-50%);
  height:46vh; width:20px; z-index:60; pointer-events:none;
}
.growth-line svg{ width:100%; height:100%; overflow:visible; }
.growth-line .track{ stroke: rgba(244,241,232,.1); stroke-width:1.5; fill:none; }
.growth-line .fill{
  stroke: var(--emerald-bright); stroke-width:1.5; fill:none;
  stroke-dasharray: 1000; stroke-dashoffset:1000;
  filter: drop-shadow(0 0 6px rgba(127,216,174,.6));
}
.growth-line .bud{
  fill: var(--gold-soft); opacity:0;
  filter: drop-shadow(0 0 4px rgba(227,203,147,.8));
}
@media(max-width:1100px){ .growth-line{ display:none; } }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader{
  position:fixed; inset:0; z-index:10000;
  background: radial-gradient(120% 120% at 50% 20%, #0d1a11 0%, #050906 70%);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition: opacity 1s var(--ease-soft), visibility 1s;
}
.preloader.fade-out{ opacity:0; visibility:hidden; }
.pre-tree{ width:120px; height:150px; margin-bottom:26px; }
.pre-tree path{ fill:none; stroke: var(--emerald-bright); stroke-width:2; stroke-linecap:round; }
.pre-word{
  font-family: var(--f-display); font-style:italic; font-size:1.05rem;
  letter-spacing:.08em; color: var(--stone); margin-bottom:22px;
}
.pre-bar{ width:220px; height:1px; background: rgba(244,241,232,.14); position:relative; }
.pre-bar-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: var(--gold-soft); transition: width .2s linear; }
.pre-pct{ margin-top:14px; font-size:.72rem; letter-spacing:.2em; color: var(--gold-soft); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height: var(--nav-h);
  display:flex; align-items:center;
  transform: translateY(0); transition: transform .6s var(--ease-out), background .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled{
  background: rgba(7,11,8,.68); backdrop-filter: blur(18px) saturate(140%);
  border-color: var(--line);
}
.navbar.nav-hidden{ transform: translateY(-100%); }

.nav-inner{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.logo{
  display:flex; align-items:center; gap:12px;
  font-family: var(--f-display); font-size:1.28rem; letter-spacing:.01em; color:var(--ink);
}
.logo .logo-mark{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--line-strong); border-radius:50%;
  color: var(--emerald-bright); font-size:.9rem;
}
.logo .logo-sub{ font-family:var(--f-body); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--stone); display:block; margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:44px; }
.nav-link{
  position:relative; font-size:.82rem; letter-spacing:.03em; text-transform:uppercase;
  font-weight:600; color: var(--ink-dim); padding:6px 0;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background: var(--gold-soft); transition: width .45s var(--ease-out);
}
.nav-link:hover, .nav-link.active{ color: var(--ink); }
.nav-link:hover::after, .nav-link.active::after{ width:100%; }

.nav-cta{ display:flex; align-items:center; gap:22px; }
.nav-cta .btn{ padding:14px 26px; font-size:.72rem; }

.hamburger{
  display:none; flex-direction:column; gap:6px; width:34px; z-index:600; cursor:pointer;
}
.hamburger span{ width:100%; height:1px; background:var(--ink); transition: all .4s var(--ease-out); }
.hamburger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:400;
  background: linear-gradient(160deg, #0c1810 0%, #060907 100%);
  display:flex; flex-direction:column; justify-content:center; padding: 0 10vw;
  clip-path: circle(0% at 92% 5%);
  transition: clip-path .8s var(--ease-soft);
}
.mobile-menu.active{ clip-path: circle(150% at 92% 5%); }
.mobile-menu ul{ display:flex; flex-direction:column; gap:8px; }
.mobile-menu a{
  font-family: var(--f-display); font-size: 12vw; line-height:1.1; color: var(--ink);
  transition: color .3s;
}
.mobile-menu a:hover{ color: var(--emerald-bright); }
.mobile-menu .mm-foot{ margin-top:50px; display:flex; gap:20px; }
@media(min-width:601px){ .mobile-menu a{ font-size:4.4rem; } }

@media(max-width:1080px){
  .nav-links, .nav-cta .btn-ghost{ display:none; }
  .hamburger{ display:flex; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  overflow:hidden; padding-bottom: 90px;
}
.hero-media{ position:absolute; inset:-6%; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(6,9,7,.45) 0%, rgba(6,9,7,.35) 40%, rgba(6,9,7,.92) 100%),
    linear-gradient(90deg, rgba(6,9,7,.75) 0%, rgba(6,9,7,.1) 45%);
}
.hero-particles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-particles i{
  position:absolute; color: rgba(127,216,174,.55); font-size: 14px;
  animation: drift 14s linear infinite;
}
@keyframes drift{
  0%{ transform: translate(0,0) rotate(0deg); opacity:0; }
  8%{ opacity:.7; }
  92%{ opacity:.5; }
  100%{ transform: translate(-60px, 115vh) rotate(220deg); opacity:0; }
}

.hero-inner{ position:relative; z-index:3; width:100%; }
.hero-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color: var(--gold-soft); margin-bottom:26px;
}
.hero-tag::before{ content:''; width:34px; height:1px; background:var(--gold); }

.hero h1{
  font-size: clamp(3rem, 8vw, 6.6rem); font-weight:500; color:var(--ink);
  max-width: 16ch;
}
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero h1 .line span{ display:inline-block; transform: translateY(115%); }
.hero h1 em{ font-style:italic; color: var(--emerald-bright); font-weight:400; }

.hero-sub{
  margin-top: 30px; max-width: 460px; font-size:1.08rem; color: var(--ink-dim);
  opacity:0; transform: translateY(16px);
}
.hero-btns{ margin-top:44px; display:flex; gap:20px; flex-wrap:wrap; opacity:0; transform: translateY(16px); }

.hero-meta{
  position:absolute; right:40px; bottom:90px; z-index:3;
  display:flex; flex-direction:column; align-items:flex-end; gap:18px;
}
.hero-rating{ display:flex; align-items:center; gap:10px; color:var(--stone); font-size:.82rem; }
.hero-rating .stars{ color: var(--gold-soft); letter-spacing:2px; }

.scroll-cue{
  position:absolute; left:40px; bottom:36px; z-index:3;
  display:flex; align-items:center; gap:14px; color: var(--stone); font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase;
}
.scroll-cue .cue-line{ width:1px; height:46px; background: rgba(244,241,232,.2); position:relative; overflow:hidden; }
.scroll-cue .cue-line::after{
  content:''; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--gold-soft); animation: cueFall 2.4s ease-in-out infinite;
}
@keyframes cueFall{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

@media(max-width:640px){
  .hero-meta{ display:none; }
  .hero{ padding-bottom:60px; }
}

/* ==========================================================================
   MARQUEE STRIP
   ========================================================================== */
.marquee-strip{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background: var(--bg-soft); padding: 26px 0; overflow:hidden; position:relative; z-index:2;
}
.marquee-track{ display:flex; gap:56px; width:max-content; animation: marquee 34s linear infinite; }
.marquee-track span{
  font-family: var(--f-display); font-style:italic; font-size:1.3rem; color: var(--ink-dim);
  display:flex; align-items:center; gap:56px; white-space:nowrap;
}
.marquee-track span i{ color: var(--gold-soft); font-size:.7rem; font-style:normal; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ padding: 170px 0; position:relative; }
.about-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items:center; }

.about-visual{ position:relative; }
.about-frame{
  position:relative; border-radius: 26px; overflow:hidden;
  aspect-ratio: 4/5; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7);
}
.about-frame img{ width:100%; height:100%; object-fit:cover; }
.about-frame::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, transparent 60%, rgba(6,9,7,.7)); }

.about-badge{
  position:absolute; left:-30px; bottom:-34px;
  width:170px; padding:26px 22px; text-align:center;
  background: rgba(16,26,19,.75); backdrop-filter: blur(16px);
  border:1px solid var(--line-strong); border-radius:20px;
  box-shadow: 0 26px 60px -20px rgba(0,0,0,.65);
}
.about-badge .num{ font-family:var(--f-display); font-size:2.4rem; color:var(--gold-soft); }
.about-badge p{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); margin-top:4px; }

.about-chip{
  position:absolute; right:-24px; top:34px; padding:14px 20px;
  background: rgba(16,26,19,.75); backdrop-filter: blur(16px);
  border:1px solid var(--line-strong); border-radius:16px;
  display:flex; align-items:center; gap:10px; font-size:.8rem; color:var(--ink);
}
.about-chip i{ color: var(--emerald-bright); }

.about-body p.lead{ font-size:1.15rem; color:var(--ink-dim); margin-bottom:36px; max-width:52ch; }

.about-points{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-bottom:44px; }
.about-point{ display:flex; gap:16px; align-items:flex-start; }
.about-point i{
  width:42px; height:42px; flex:none; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line-strong); color: var(--emerald-bright);
}
.about-point h4{ font-family:var(--f-body); font-size:.94rem; font-weight:700; margin-bottom:4px; }
.about-point span{ font-size:.86rem; color:var(--stone); }

@media(max-width:980px){
  .about-grid{ grid-template-columns:1fr; gap:70px; }
  .about-points{ grid-template-columns:1fr; }
  .about-badge, .about-chip{ position:static; margin-top:18px; width:fit-content; }
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{ padding:160px 0 60px; }
.services-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
.service-card{
  position:relative; border-radius:22px; overflow:hidden; aspect-ratio:3/4.1;
  isolation:isolate; grid-column: span 1;
}
.service-card:nth-child(1){ grid-row: span 2; aspect-ratio:auto; }
.service-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform: scale(1.12); transition: transform 1.1s var(--ease-out);
}
.service-card::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,9,7,.05) 30%, rgba(6,9,7,.92) 100%);
  transition: background .5s;
}
.service-card:hover img{ transform: scale(1.02); }
.service-num{
  position:absolute; top:22px; right:24px; z-index:2;
  font-family:var(--f-display); font-style:italic; font-size:.85rem; color: rgba(244,241,232,.55);
}
.service-content{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 28px; }
.service-icon{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background: rgba(244,241,232,.08); border:1px solid var(--line-strong);
  color: var(--emerald-bright); margin-bottom:16px; backdrop-filter:blur(6px);
  transition: transform .5s var(--ease-out), background .4s;
}
.service-card:hover .service-icon{ transform: rotate(-8deg) scale(1.08); background: var(--emerald-bright); color:#0a170f; }
.service-content h3{ font-size:1.32rem; margin-bottom:8px; }
.service-content p{
  font-size:.88rem; max-width:30ch; max-height:0; opacity:0; overflow:hidden;
  transition: max-height .5s var(--ease-out), opacity .4s;
}
.service-card:hover .service-content p{ max-height:80px; opacity:1; margin-top:6px; }
.service-link{
  margin-top:14px; display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-soft);
}
.service-link i{ transition: transform .4s var(--ease-out); }
.service-card:hover .service-link i{ transform: translateX(5px); }

@media(max-width:1080px){ .services-grid{ grid-template-columns:repeat(2,1fr); } .service-card:nth-child(1){ grid-row:span 1; } }
@media(max-width:640px){ .services-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process{ padding:170px 0; }
.process-list{ position:relative; max-width:900px; margin: 0 auto; }
.process-vine{ position:absolute; left:29px; top:14px; bottom:14px; width:2px; z-index:0; }
.process-vine svg{ width:100%; height:100%; }
.process-vine .pv-track{ stroke: rgba(244,241,232,.12); stroke-width:2; fill:none; }
.process-vine .pv-fill{ stroke: var(--emerald-bright); stroke-width:2; fill:none; stroke-dasharray:1; stroke-dashoffset:1; }

.process-step{ position:relative; z-index:1; display:flex; gap:34px; padding: 34px 0; }
.process-step + .process-step{ border-top:1px solid var(--line); }
.process-node{
  flex:none; width:60px; height:60px; border-radius:50%;
  background: var(--surface); border:1px solid var(--line-strong);
  display:grid; place-items:center; font-family:var(--f-display); font-size:1.2rem; color: var(--gold-soft);
  transition: border-color .5s, background .5s, transform .5s var(--ease-out);
}
.process-step:hover .process-node{ background: var(--forest-2); border-color: var(--emerald-bright); transform: scale(1.06); }
.process-text h3{ margin-bottom:8px; }
.process-text p{ max-width:56ch; }
.process-tag{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); margin-left:auto; align-self:center; white-space:nowrap; padding-left:20px; }
@media(max-width:700px){ .process-vine{ left:23px; } .process-node{ width:46px; height:46px; font-size:1rem; } .process-tag{ display:none; } }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery{ padding:160px 0; }
.gallery-filters{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:46px; }
.filter-btn{
  padding:11px 22px; border-radius:100px; border:1px solid var(--line-strong);
  font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-dim);
  transition: all .35s var(--ease-out);
}
.filter-btn:hover{ border-color: var(--emerald-bright); color:var(--ink); }
.filter-btn.active{ background: var(--emerald-bright); color:#0a170f; border-color: var(--emerald-bright); font-weight:700; }

.gallery-grid{
  columns: 3 260px; column-gap: 22px;
}
.gallery-item{
  break-inside: avoid; margin-bottom:22px; border-radius:18px; overflow:hidden;
  position:relative; cursor: pointer; opacity:1;
}
.gallery-item.hidden{ display:none; }
.gallery-item img{ width:100%; display:block; transition: transform .9s var(--ease-out); }
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0; padding:22px;
  background: linear-gradient(180deg, transparent, rgba(6,9,7,.9));
  opacity:0; transform: translateY(10px); transition: all .45s var(--ease-out);
}
.gallery-item:hover .gallery-caption{ opacity:1; transform:translateY(0); }
.gallery-caption span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--gold-soft); }
.gallery-caption h4{ font-family:var(--f-body); font-weight:700; font-size:.98rem; margin-top:4px; }
.gallery-expand{
  position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:50%;
  background:rgba(6,9,7,.5); backdrop-filter:blur(6px); display:grid; place-items:center;
  color:var(--ink); opacity:0; transition: opacity .4s;
}
.gallery-item:hover .gallery-expand{ opacity:1; }

@media(max-width:900px){ .gallery-grid{ columns: 2 200px; } }
@media(max-width:560px){ .gallery-grid{ columns: 1; } }

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:9000; background: rgba(4,6,5,.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity .5s var(--ease-out), visibility .5s;
}
.lightbox.active{ opacity:1; visibility:visible; }
.lightbox img{ max-width:86vw; max-height:80vh; border-radius:10px; box-shadow:0 40px 100px rgba(0,0,0,.6); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line-strong); display:grid; place-items:center; color:var(--ink);
  transition: all .3s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: var(--emerald-bright); color:#0a170f; border-color:var(--emerald-bright); }
.lightbox-close{ top:30px; right:30px; }
.lightbox-prev{ left:30px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:30px; top:50%; transform:translateY(-50%); }
.lightbox-caption{ position:absolute; bottom:34px; left:50%; transform:translateX(-50%); text-align:center; color:var(--stone); font-size:.82rem; letter-spacing:.05em; }
@media(max-width:700px){ .lightbox-prev,.lightbox-next{ width:40px; height:40px; } .lightbox-close{ top:16px; right:16px; } }

/* ==========================================================================
   STATS
   ========================================================================== */
.stats{ padding: 110px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--bg-soft); }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:40px; }
.stat{ text-align:center; }
.stat .num{ font-family:var(--f-display); font-size: clamp(2.6rem,4.4vw,4rem); color:var(--ink); }
.stat .num .suffix{ color: var(--gold-soft); }
.stat p{ margin-top:10px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: var(--stone); }
@media(max-width:800px){ .stats-grid{ grid-template-columns:repeat(2,1fr); row-gap:50px; } }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials{ padding:170px 0; overflow:hidden; }
.t-track-wrap{ overflow:hidden; margin: 0 -40px; }
.t-track{ display:flex; gap:26px; width:max-content; animation: tScroll 46s linear infinite; padding: 0 40px; }
.t-track-wrap:hover .t-track{ animation-play-state: paused; }
.t-card{
  width: 400px; flex:none; padding: 34px; border-radius: 22px;
  background: rgba(244,241,232,.03); border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.t-stars{ color: var(--gold-soft); letter-spacing:3px; font-size:.85rem; margin-bottom:20px; }
.t-quote{ font-size:1.02rem; color: var(--ink); font-family:var(--f-display); font-weight:400; line-height:1.5; margin-bottom:26px; }
.t-person{ display:flex; align-items:center; gap:14px; }
.t-avatar{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background: var(--forest-2); color: var(--gold-soft); font-family:var(--f-display); font-size:1rem;
}
.t-person h5{ font-size:.9rem; font-weight:700; }
.t-person span{ font-size:.76rem; color: var(--stone); }
@keyframes tScroll{ to{ transform: translateX(calc(-400px * 5 - 26px * 5)); } }

/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */
.why{ padding:60px 0 170px; }
.why-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
.why-card{
  padding: 40px 32px; border-radius: 22px; border:1px solid var(--line);
  background: linear-gradient(160deg, rgba(244,241,232,.035), rgba(244,241,232,0));
  transition: transform .5s var(--ease-out), border-color .5s;
}
.why-card:hover{ transform: translateY(-8px); border-color: var(--line-strong); }
.why-icon{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
  background: var(--surface-2); color: var(--emerald-bright); font-size:1.3rem; margin-bottom:26px;
}
.why-card h3{ font-size:1.2rem; margin-bottom:12px; }
.why-card p{ font-size:.92rem; }
@media(max-width:900px){ .why-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   PRICING (message card)
   ========================================================================== */
.pricing{ padding:170px 0; position:relative; }
.pricing-card{
  position:relative; max-width:920px; margin:0 auto; padding: 70px 60px;
  border-radius: 32px; text-align:center; overflow:hidden;
  background: radial-gradient(120% 140% at 50% 0%, rgba(79,169,128,.16), transparent 60%), var(--surface);
  border:1px solid var(--line-strong);
}
.pricing-card .p-icon{
  width:74px; height:74px; margin:0 auto 30px; border-radius:50%;
  display:grid; place-items:center; background: var(--forest-2); color: var(--emerald-bright); font-size:1.7rem;
  box-shadow: 0 0 0 1px var(--line-strong), 0 0 40px rgba(79,169,128,.25);
}
.pricing-card h2{ margin-bottom:22px; }
.pricing-card .lead{ font-size:1.1rem; max-width:56ch; margin:0 auto 14px; color:var(--ink-dim); }
.pricing-card .sub{ font-size:.98rem; max-width:56ch; margin:0 auto 40px; color:var(--stone); }
.pricing-range{
  display:inline-flex; gap:10px; align-items:baseline; margin-bottom:40px;
  font-family:var(--f-display); color:var(--gold-soft);
}
.pricing-range .r-num{ font-size:1.5rem; }
.pricing-range .r-label{ font-family:var(--f-body); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); }
.pricing-cta-row{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.pricing-note{ margin-top:22px; font-size:.78rem; color: var(--stone); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ padding: 0 0 170px; }
.faq-list{ max-width:820px; margin:0 auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding: 30px 4px; text-align:left; font-family:var(--f-display); font-size:1.15rem; color:var(--ink);
}
.faq-q i{ transition: transform .4s var(--ease-out); color: var(--gold-soft); flex:none; margin-left:20px; }
.faq-item.open .faq-q i{ transform: rotate(135deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .5s var(--ease-out); }
.faq-a p{ padding: 0 4px 30px; max-width:70ch; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{ padding:170px 0; position:relative; }
.contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap:40px; }
.contact-panel{
  padding:48px 40px; border-radius:26px; border:1px solid var(--line-strong);
  background: linear-gradient(165deg, rgba(27,75,46,.35), rgba(16,26,19,.6));
  backdrop-filter: blur(10px);
}
.contact-panel h3{ margin-bottom:8px; }
.contact-panel > p{ margin-bottom:34px; font-size:.92rem; }
.info-row{ display:flex; gap:16px; padding: 18px 0; border-top:1px solid var(--line); }
.info-row:first-of-type{ border-top:none; }
.info-row i{
  flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background: rgba(244,241,232,.06); color: var(--emerald-bright);
}
.info-row .lbl{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); display:block; margin-bottom:3px; }
.info-row .val{ font-size:.95rem; color:var(--ink); }
.contact-socials{ display:flex; gap:12px; margin-top:30px; }
.social-dot{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line-strong);
  display:grid; place-items:center; transition: all .35s;
}
.social-dot:hover{ background: var(--emerald-bright); color:#0a170f; border-color: var(--emerald-bright); transform: translateY(-3px); }

.form-panel{ padding: 48px 44px; border-radius:26px; border:1px solid var(--line); background: rgba(244,241,232,.02); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field{ position:relative; margin-bottom:26px; }
.field.full{ grid-column: 1 / -1; }
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  padding: 14px 2px 12px 2px; color:var(--ink); font-size:.98rem;
}
.field select option{ background: var(--bg-soft); color:var(--ink); }
.field textarea{ resize:vertical; min-height:70px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--emerald-bright); }
.field label{
  position:absolute; left:2px; top:14px; color: var(--stone); font-size:.98rem; pointer-events:none;
  transition: all .3s var(--ease-out);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field.select-filled label{
  top:-14px; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color: var(--emerald-bright);
}
.field .under{
  position:absolute; left:0; bottom:0; height:1px; width:0; background: var(--emerald-bright);
  transition: width .45s var(--ease-out);
}
.field input:focus ~ .under, .field select:focus ~ .under, .field textarea:focus ~ .under{ width:100%; }

.submit-row{ display:flex; align-items:center; gap:20px; margin-top:6px; flex-wrap:wrap; }
.submit-row .btn{ width:100%; justify-content:center; }
.submit-row .privacy{ font-size:.76rem; color: var(--stone); }

.form-success{
  display:none; text-align:center; padding: 30px 0 10px;
}
.form-success.show{ display:block; }
.form-success .fs-icon{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background: var(--forest-2); color: var(--emerald-bright); display:grid; place-items:center; font-size:1.5rem;
}
.form-success h4{ margin-bottom:8px; }
.form-success p{ font-size:.9rem; }
.contact-form.hide{ display:none; }

@media(max-width:980px){ .contact-grid{ grid-template-columns:1fr; } }
@media(max-width:560px){ .form-row{ grid-template-columns:1fr; } .form-panel, .contact-panel{ padding:34px 24px; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ padding: 100px 0 0; border-top:1px solid var(--line); background: var(--bg-soft); }
.footer-top{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap:50px; padding-bottom:80px; }
.footer-brand .logo{ margin-bottom:20px; }
.footer-brand p{ max-width:34ch; font-size:.92rem; margin-bottom:24px; }
.footer-badges{ display:flex; gap:10px; flex-wrap:wrap; }
.footer-badges span{
  display:flex; align-items:center; gap:7px; font-size:.72rem; padding:8px 14px;
  border:1px solid var(--line); border-radius:100px; color: var(--stone);
}
.footer-badges i{ color: var(--emerald-bright); }
.footer-col h4{ font-family:var(--f-body); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); margin-bottom:22px; }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a, .footer-col li{ font-size:.9rem; color: var(--ink-dim); transition: color .3s, padding-left .3s; }
.footer-col a:hover{ color: var(--emerald-bright); padding-left:4px; }
.footer-newsletter form{ display:flex; border-bottom:1px solid var(--line-strong); padding-bottom:10px; margin-top:8px; }
.footer-newsletter input{ flex:1; background:transparent; border:none; color:var(--ink); font-size:.88rem; padding:6px 0; }
.footer-newsletter button{ color: var(--gold-soft); font-size:1.1rem; }
.footer-bottom{
  border-top:1px solid var(--line); padding: 26px 0; display:flex; justify-content:space-between;
  align-items:center; font-size:.78rem; color: var(--stone); flex-wrap:wrap; gap:14px;
}
.footer-bottom .fb-links{ display:flex; gap:22px; }
@media(max-width:980px){ .footer-top{ grid-template-columns:1fr 1fr; row-gap:50px; } }
@media(max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* ==========================================================================
   FLOATING DOCK / BACK TO TOP / WHATSAPP
   ========================================================================== */
.float-dock{
  position:fixed; right:28px; bottom:28px; z-index:400;
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.dock-btn{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,.6); font-size:1.2rem;
  transition: transform .4s var(--ease-out), opacity .4s;
}
.dock-whatsapp{ background:#25D366; color:#06110b; animation: pulseDock 2.6s ease-in-out infinite; }
.dock-top{
  background: var(--surface); border:1px solid var(--line-strong); color:var(--ink);
  opacity:0; pointer-events:none; transform: translateY(10px);
}
.dock-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.dock-btn:hover{ transform: translateY(-4px) scale(1.05); }
@keyframes pulseDock{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,211,102,.5), 0 14px 34px -10px rgba(0,0,0,.6);} 50%{ box-shadow:0 0 0 12px rgba(37,211,102,0), 0 14px 34px -10px rgba(0,0,0,.6);} }

/* ==========================================================================
   SCROLL REVEAL (generic utility, driven by JS IntersectionObserver)
   ========================================================================== */
[data-reveal]{ opacity:0; transition: opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); }
[data-reveal="up"]{ transform: translateY(48px); }
[data-reveal="left"]{ transform: translateX(-48px); }
[data-reveal="right"]{ transform: translateX(48px); }
[data-reveal="scale"]{ transform: scale(.92); }
[data-reveal="blur"]{ filter: blur(10px); transform: translateY(20px); }
[data-reveal].in-view{ opacity:1; transform:none; filter:blur(0); }

[data-stagger] > *{ transition-delay: calc(var(--i, 0) * 90ms); }

body.lock-scroll{ overflow:hidden; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   RESPONSIVE TYPE / SPACING WRAP-UP
   ========================================================================== */
@media(max-width:640px){
  .container{ padding:0 22px; }
  .nav-inner{ padding: 0; }
}

/* ==========================================================
   EXTRA LARGE DESKTOPS (1600px+)
   ========================================================== */
@media (min-width:1600px){

    :root{
        --container:1500px;
    }

    .container{
        max-width:1500px;
    }

    .hero h1{
        font-size:7.2rem;
    }

    h2{
        font-size:4.8rem;
    }

    .services-grid{
        gap:32px;
    }

    .hero-meta{
        right:70px;
    }

}


/* ==========================================================
   LARGE LAPTOPS (1400px)
   ========================================================== */
@media (max-width:1400px){

    .container{
        padding:0 32px;
    }

    .services-grid{
        gap:20px;
    }

    .about-grid{
        gap:70px;
    }

}


/* ==========================================================
   LAPTOPS (1200px)
   ========================================================== */
@media (max-width:1200px){

    .hero h1{
        max-width:14ch;
    }

    .about-grid{
        gap:60px;
    }

    .footer-top{
        gap:40px;
    }

    .contact-grid{
        gap:30px;
    }

}


/* ==========================================================
   TABLETS (992px)
   ========================================================== */
@media (max-width:992px){

    .container{
        padding:0 26px;
    }

    .hero{
        min-height:auto;
        padding-top:140px;
        padding-bottom:90px;
    }

    .hero-inner{
        text-align:center;
    }

    .hero-sub{
        margin-inline:auto;
    }

    .hero-btns{
        justify-content:center;
    }

    .scroll-cue{
        display:none;
    }

    .about-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .stats-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .why-grid{
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   LARGE PHONES / SMALL TABLETS (768px)
   ========================================================== */
@media (max-width:768px){

    :root{
        --nav-h:80px;
    }

    .container{
        padding:0 22px;
    }

    h2{
        font-size:2.3rem;
    }

    .hero h1{
        font-size:3.5rem;
    }

    .hero-btns{
        flex-direction:column;
        width:100%;
    }

    .hero-btns .btn{
        width:100%;
        justify-content:center;
    }

    .section-head{
        margin-bottom:45px;
    }

    .pricing-card{
        padding:50px 30px;
    }

    .contact-panel,
    .form-panel{
        padding:32px 24px;
    }

    .gallery-grid{
        columns:2;
    }

}


/* ==========================================================
   MOBILE DEVICES (576px)
   ========================================================== */
@media (max-width:576px){

    .container{
        padding:0 18px;
    }

    section{
        overflow:hidden;
    }

    .hero{
        padding-top:120px;
    }

    .hero h1{
        font-size:2.7rem;
        line-height:1.1;
    }

    .hero-sub{
        font-size:1rem;
    }

    .services-grid{
        grid-template-columns:1fr;
    }

    .gallery-grid{
        columns:1;
    }

    .stats-grid{
        grid-template-columns:1fr;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .pricing-card{
        padding:40px 22px;
        border-radius:24px;
    }

    .btn{
        width:100%;
        justify-content:center;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

}


/* ==========================================================
   SMALL PHONES (400px)
   ========================================================== */
@media (max-width:400px){

    html{
        font-size:15px;
    }

    .hero h1{
        font-size:2.2rem;
    }

    h2{
        font-size:2rem;
    }

    .eyebrow{
        font-size:.62rem;
        letter-spacing:.18em;
    }

    .btn{
        padding:16px 22px;
        font-size:.75rem;
    }

    .service-content{
        padding:22px;
    }

    .pricing-card{
        padding:30px 18px;
    }

    .contact-panel,
    .form-panel{
        padding:24px 18px;
    }

    .float-dock{
        right:14px;
        bottom:14px;
    }

    .dock-btn{
        width:48px;
        height:48px;
    }

}


/* ==========================================================
   LANDSCAPE PHONES
   ========================================================== */
@media (max-height:500px) and (orientation:landscape){

    .hero{
        min-height:700px;
    }

    .mobile-menu a{
        font-size:3rem;
    }

}