/* =========================================================
   Green Vista — Pools & Landscaping
   Design system + homepage styles
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* Brand greens (from logo) */
  --forest:        #1d4a33;
  --forest-deep:   #143526;
  --forest-darker: #0e2a1d;
  --pine:          #2f6a49;
  --teal:          #2c6b5e;
  /* Gold */
  --gold:          #bf9b53;
  --gold-soft:     #d8c08a;
  --gold-deep:     #a8853f;
  /* Warm neutrals */
  --paper:         #faf8f2;
  --cream:         #f3eee3;
  --cream-2:       #ebe4d5;
  --ink:           #1a241d;
  --muted:         #5f6a60;
  --line:          #ddd6c6;
  --white:         #ffffff;

  /* Surface / accent driven by Tweaks (defaults) */
  --accent:        var(--gold);
  --accent-deep:   var(--gold-deep);
  --band:          var(--forest);
  --band-deep:     var(--forest-deep);

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
  --radius: 2px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }

/* ---------- Type utilities ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent-deep);
  display:inline-flex;
  align-items:center;
  gap:.85em;
}
.eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--accent);
  display:inline-block;
}
.eyebrow.center::after{
  content:"";
  width:34px; height:1px;
  background:var(--accent);
  display:inline-block;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.no-rule::before{ display:none; }

.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.01em;
  font-size:clamp(40px, 6.2vw, 88px);
}
.h2{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.01em;
  font-size:clamp(32px, 4.4vw, 60px);
}
.h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(22px, 2.4vw, 30px);
  line-height:1.15;
}
.lede{
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.7;
  color:var(--muted);
}
.serif-accent{ font-style:italic; color:var(--accent-deep); }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
section{ position:relative; }
.section-pad{ padding-block:clamp(72px,9vw,140px); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:15px 28px;
  font-size:13px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-2px); }
.btn-solid{ background:var(--forest); color:var(--paper); }
.btn-solid:hover{ background:var(--forest-deep); }
.btn-gold{ background:var(--accent); color:#241c08; }
.btn-gold:hover{ background:var(--gold-soft); }
.btn-ghost{ border-color:currentColor; color:inherit; background:transparent; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }
.btn-outline-dark{ border-color:var(--line); color:var(--ink); }
.btn-outline-dark:hover{ border-color:var(--forest); color:var(--forest); }
.btn .arrow{ transition:transform .35s; }
.btn:hover .arrow{ transform:translateX(4px); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--forest);
}
.link-arrow .arrow{ transition:transform .3s; }
.link-arrow:hover .arrow{ transform:translateX(5px); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(250,248,242,.9);
  backdrop-filter:blur(14px) saturate(120%);
  padding-block:14px;
  border-bottom:1px solid var(--line);
}
.nav__brand{ display:flex; flex-direction:column; justify-content:center; line-height:1; gap:5px; flex:none; }
.brand-name{ font-family:var(--serif); font-size:28px; font-weight:600; letter-spacing:.005em; color:var(--paper); transition:color .3s; white-space:nowrap; }
.brand-sub{ font-size:9px; font-weight:600; letter-spacing:.36em; text-transform:uppercase; color:var(--gold-soft); transition:color .3s; padding-left:2px; white-space:nowrap; }
.nav:not(.scrolled) .brand-name{ text-shadow:0 2px 18px rgba(0,0,0,.4); }
.nav.scrolled .brand-name{ color:var(--forest); }
.nav.scrolled .brand-sub{ color:var(--gold-deep); }

.nav__links{ display:flex; align-items:center; gap:38px; list-style:none; margin:0; padding:0; }
.nav__links a{
  font-size:13px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper); position:relative; padding-block:4px;
  transition:color .3s;
}
.nav.scrolled .nav__links a{ color:var(--ink); }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--accent); transition:width .3s ease;
}
.nav__links a:hover::after{ width:100%; }
.nav__links a:hover{ color:var(--accent); }
.nav.scrolled .nav__links a:hover{ color:var(--accent-deep); }

.nav__cta{ display:flex; align-items:center; gap:16px; }
.nav .btn-nav{
  background:var(--accent); color:#241c08;
  padding:12px 22px; font-size:12px;
}
.nav .btn-nav:hover{ background:var(--gold-soft); transform:translateY(-2px); }

.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; }
.nav__burger span{ width:24px; height:2px; background:var(--paper); transition:background .3s,transform .3s,opacity .3s; }
.nav.scrolled .nav__burger span{ background:var(--ink); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:70;
  background:var(--forest-deep);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px;
  transform:translateY(-100%); transition:transform .5s cubic-bezier(.6,0,.2,1);
}
.drawer.open{ transform:translateY(0); }
.drawer a{ font-family:var(--serif); font-size:34px; color:var(--paper); padding:10px; }
.drawer a:hover{ color:var(--gold-soft); }
.drawer__close{ position:absolute; top:24px; right:24px; background:none; border:0; color:var(--paper); font-size:30px; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover;
  animation:kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1.04); } to{ transform:scale(1.16) translate(-1%, -1.5%); } }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,42,29,.42) 0%, rgba(14,42,29,0) 28%, rgba(14,42,29,.12) 55%, rgba(8,24,16,.82) 100%),
    linear-gradient(90deg, rgba(8,24,16,.55) 0%, rgba(8,24,16,0) 55%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(54px,8vh,104px); }
.hero__eyebrow{ color:var(--gold-soft); }
.hero__eyebrow::before{ background:var(--gold-soft); }
.hero h1{ color:var(--paper); max-width:16ch; margin-top:24px; text-shadow:0 2px 40px rgba(0,0,0,.25); }
.hero__sub{ color:rgba(255,255,255,.86); max-width:48ch; margin-top:26px; font-size:clamp(17px,1.4vw,20px); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero__scroll{
  position:absolute; left:var(--gutter); bottom:26px; z-index:2;
  display:flex; align-items:center; gap:12px;
  color:rgba(255,255,255,.7); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
}
.hero__meta{
  position:absolute; right:var(--gutter); bottom:30px; z-index:2; text-align:right;
  color:rgba(255,255,255,.78);
}
.hero__meta b{ font-family:var(--serif); font-size:30px; font-weight:500; color:var(--paper); display:block; line-height:1; }
.hero__meta span{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; }
@media (max-width:860px){ .hero__meta{ display:none; } }

/* =========================================================
   INTRO / POSITIONING
   ========================================================= */
.intro{ background:var(--paper); }
.intro__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,96px); align-items:start; }
.intro__statement{ font-family:var(--serif); font-size:clamp(28px,3vw,42px); line-height:1.18; font-weight:500; letter-spacing:-.01em; }
.intro__statement em{ color:var(--accent-deep); }
.intro__body p + p{ margin-top:20px; }
.intro__sign{ margin-top:30px; font-family:var(--serif); font-style:italic; font-size:24px; color:var(--forest); }
.intro__sign small{ display:block; font-family:var(--sans); font-style:normal; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:6px; }

.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; border-top:1px solid var(--line); padding-top:36px; }
.stat .num{ font-family:var(--serif); font-size:clamp(40px,4.5vw,62px); font-weight:500; color:var(--forest); line-height:1; }
.stat .num .plus{ color:var(--accent-deep); }
.stat .label{ font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:10px; }
@media (max-width:820px){ .intro__grid{ grid-template-columns:1fr; } }

/* =========================================================
   SERVICES
   ========================================================= */
.services{ background:var(--cream); }
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:54px; }
.sec-head .h2{ max-width:18ch; margin-top:18px; }
@media (max-width:760px){ .sec-head{ flex-direction:column; align-items:flex-start; } }

.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.svc{
  position:relative; background:var(--paper); padding:30px 26px 26px;
  min-height:300px; display:flex; flex-direction:column;
  overflow:hidden; transition:color .4s;
}
.svc__img{ position:absolute; inset:0; z-index:0; opacity:.2; transition:opacity .5s ease; }
.svc__img img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05); transition:transform 1.2s ease; }
.svc__img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,42,29,.25),rgba(14,42,29,.86)); }
.svc__n{ position:relative; z-index:2; font-size:12px; letter-spacing:.2em; color:var(--accent-deep); transition:color .4s; }
.svc__t{ position:relative; z-index:2; font-family:var(--serif); font-size:25px; font-weight:500; line-height:1.12; margin-top:auto; transition:color .4s; }
.svc__d{ position:relative; z-index:2; font-size:14px; color:var(--muted); margin-top:12px; max-height:0; opacity:0; overflow:hidden; transition:max-height .5s ease, opacity .4s ease, color .4s; }
.svc__plus{ position:relative; z-index:2; margin-top:18px; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--forest); transition:all .4s; }
.svc:hover{ color:var(--paper); }
.svc:hover .svc__img{ opacity:1; }
.svc:hover .svc__img img{ transform:scale(1); }
.svc:hover .svc__t{ color:var(--paper); }
.svc:hover .svc__n{ color:var(--gold-soft); }
.svc:hover .svc__d{ max-height:80px; opacity:1; color:rgba(255,255,255,.85); }
.svc:hover .svc__plus{ background:var(--accent); border-color:var(--accent); color:#241c08; }
@media (max-width:1040px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .svc-grid{ grid-template-columns:1fr; } }

/* =========================================================
   PORTFOLIO
   ========================================================= */
.portfolio{ background:var(--paper); }
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; }
.filters button{
  padding:9px 18px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line); background:transparent; border-radius:40px; color:var(--muted);
  transition:all .3s;
}
.filters button:hover{ border-color:var(--forest); color:var(--forest); }
.filters button.active{ background:var(--forest); border-color:var(--forest); color:var(--paper); }

.proj-grid{ display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(155px,18.5vw,248px); gap:16px; grid-auto-flow:dense; }
.proj{ position:relative; overflow:hidden; cursor:pointer; background:var(--cream-2); border-radius:var(--radius); }
.proj--feature{ grid-column:span 8; grid-row:span 2; }
.proj--half{ grid-column:span 4; grid-row:span 1; }
.proj--quarter{ grid-column:span 3; grid-row:span 1; }
.proj img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }
.proj::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,42,29,0) 40%,rgba(11,33,22,.85)); opacity:.75; transition:opacity .4s; }
.proj:hover img{ transform:scale(1.07); }
.proj:hover::after{ opacity:.92; }
.proj__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px; color:var(--paper); transform:translateY(8px); opacity:.95; transition:transform .4s; }
.proj:hover .proj__cap{ transform:translateY(0); }
.proj__cap .loc{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); }
.proj__cap .name{ font-family:var(--serif); font-size:clamp(22px,2vw,30px); font-weight:500; margin-top:4px; }
.proj__view{ position:absolute; top:18px; right:18px; z-index:2; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.4); color:#fff; display:grid; place-items:center; opacity:0; transform:scale(.85); transition:all .4s; }
.proj:hover .proj__view{ opacity:1; transform:scale(1); }
.proj.hide{ display:none; }
@media (max-width:900px){
  .proj-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(160px,30vw,220px); }
  .proj--feature{ grid-column:span 2; grid-row:span 1; }
  .proj--half,.proj--quarter{ grid-column:span 1; grid-row:span 1; }
}
@media (max-width:560px){
  .proj-grid{ grid-template-columns:1fr; }
  .proj--feature,.proj--half,.proj--quarter{ grid-column:span 1; }
}

/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:90; background:rgba(8,22,15,.92); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:5vh 5vw; }
.lightbox.open{ display:flex; }
.lb__frame{ max-width:1100px; width:100%; display:grid; grid-template-columns:1.5fr 1fr; background:var(--paper); border-radius:4px; overflow:hidden; max-height:90vh; animation:lbin .5s cubic-bezier(.2,.7,.3,1); }
@keyframes lbin{ from{ opacity:0; transform:translateY(20px) scale(.98); } to{ opacity:1; transform:none; } }
.lb__img{ position:relative; background:#000; }
.lb__img img{ width:100%; height:100%; object-fit:cover; min-height:340px; max-height:90vh; }
.lb__info{ padding:clamp(28px,3vw,48px); display:flex; flex-direction:column; }
.lb__loc{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-deep); }
.lb__name{ font-family:var(--serif); font-size:clamp(28px,3vw,42px); font-weight:500; margin-top:8px; line-height:1.05; }
.lb__desc{ color:var(--muted); margin-top:18px; font-size:15.5px; }
.lb__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:26px; }
.lb__tags span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--forest); border:1px solid var(--line); padding:6px 12px; border-radius:30px; }
.lb__close{ position:absolute; top:18px; right:18px; z-index:3; width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.35); color:#fff; font-size:22px; }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.35); color:#fff; font-size:22px; display:grid; place-items:center; z-index:3; }
.lb__nav.prev{ left:14px; } .lb__nav.next{ right:14px; }
@media (max-width:760px){ .lb__frame{ grid-template-columns:1fr; } .lb__img img{ max-height:42vh; } }

/* =========================================================
   PROCESS
   ========================================================= */
.process{ background:var(--band); color:var(--paper); transition:background .5s; }
.process .eyebrow{ color:var(--gold-soft); }
.process .eyebrow::before, .process .eyebrow.center::after{ background:var(--gold-soft); }
.process .h2{ color:var(--paper); }
.process__lede{ color:rgba(255,255,255,.72); max-width:52ch; margin-top:18px; }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:60px; }
.step{ }
.step__img{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:3px; }
.step__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s; }
.step:hover .step__img img{ transform:scale(1.06); }
.step__num{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--serif); font-size:20px; width:42px; height:42px; border-radius:50%; background:rgba(11,33,22,.6); border:1px solid var(--gold-soft); color:var(--gold-soft); display:grid; place-items:center; }
.step__t{ font-family:var(--serif); font-size:24px; font-weight:500; margin-top:20px; }
.step__d{ color:rgba(255,255,255,.66); font-size:14.5px; margin-top:8px; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* =========================================================
   AWARDS
   ========================================================= */
.awards{ background:var(--cream); }
.award-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.award{ background:var(--paper); border:1px solid var(--line); padding:38px 32px; border-radius:3px; transition:transform .4s, box-shadow .4s, border-color .4s; }
.award:hover{ transform:translateY(-4px); box-shadow:0 22px 50px -28px rgba(20,53,38,.4); border-color:var(--gold-soft); }
.award__mark{ width:46px; height:46px; color:var(--accent-deep); }
.award__yr{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:22px; }
.award__t{ font-family:var(--serif); font-size:24px; font-weight:500; margin-top:8px; line-height:1.15; }
.award__s{ font-size:14px; color:var(--muted); margin-top:10px; }
.award__tag{ display:inline-block; margin-top:18px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--forest); background:var(--cream-2); padding:5px 12px; border-radius:30px; }
@media (max-width:820px){ .award-grid{ grid-template-columns:1fr; } }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testi{ background:var(--paper); }
.testi__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px; }
.quote{ border-top:2px solid var(--accent); padding-top:26px; }
.quote__mark{ font-family:var(--serif); font-size:64px; line-height:.6; color:var(--accent); height:34px; }
.quote__txt{ font-family:var(--serif); font-size:21px; line-height:1.4; color:var(--ink); font-weight:500; }
.quote__by{ margin-top:22px; font-size:13px; letter-spacing:.06em; }
.quote__by b{ color:var(--forest); font-weight:600; }
.quote__by span{ color:var(--muted); display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-top:3px; }
.note{ font-size:12.5px; color:var(--muted); margin-top:30px; font-style:italic; }
@media (max-width:820px){ .testi__grid{ grid-template-columns:1fr; } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact{ background:var(--band-deep); color:var(--paper); transition:background .5s; }
.contact .eyebrow{ color:var(--gold-soft); }
.contact .eyebrow::before{ background:var(--gold-soft); }
.contact__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px); margin-top:46px; }
.contact .h2{ color:var(--paper); }
.contact__lede{ color:rgba(255,255,255,.74); margin-top:18px; max-width:42ch; }

.cinfo{ margin-top:40px; display:grid; gap:26px; }
.cinfo__row{ display:flex; gap:18px; align-items:flex-start; }
.cinfo__ic{ flex:none; width:40px; height:40px; border-radius:50%; border:1px solid rgba(216,192,138,.5); color:var(--gold-soft); display:grid; place-items:center; }
.cinfo__k{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); }
.cinfo__v{ font-size:16px; color:var(--paper); margin-top:3px; }
.cinfo__v a:hover{ color:var(--gold-soft); }

.form{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:4px; padding:clamp(26px,3vw,40px); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:18px; }
.field label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.6); display:block; margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.18); border-radius:2px;
  padding:13px 14px; color:var(--paper); font-family:var(--sans); font-size:15px; transition:border-color .3s, background .3s;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.35); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold-soft); background:rgba(255,255,255,.07); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23d8c08a' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.field select option{ color:#1a241d; }
.field.err input, .field.err select, .field.err textarea{ border-color:#e08a7a; }
.field .msg{ color:#f0a99a; font-size:12px; margin-top:6px; display:none; }
.field.err .msg{ display:block; }
.form__submit{ width:100%; justify-content:center; margin-top:6px; }
.form__success{ display:none; text-align:center; padding:30px 10px; }
.form__success.show{ display:block; }
.form__success .tick{ width:58px; height:58px; border-radius:50%; background:var(--accent); color:#241c08; display:grid; place-items:center; margin:0 auto 18px; }
.form__success h3{ font-family:var(--serif); font-size:28px; color:var(--paper); }
.form__success p{ color:rgba(255,255,255,.72); margin-top:10px; }
@media (max-width:880px){ .contact__grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .form__row{ grid-template-columns:1fr; } }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--forest-darker); color:rgba(255,255,255,.7); padding-top:clamp(60px,7vw,90px); }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:54px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer__brand .footer__logo{ display:flex; flex-direction:column; gap:7px; }
.footer__brand .fl-name{ font-family:var(--serif); font-size:36px; font-weight:600; color:var(--paper); line-height:1; }
.footer__brand .fl-sub{ font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold-soft); }
.footer__brand p{ margin-top:20px; max-width:32ch; font-size:14.5px; line-height:1.7; }
.footer__col h4{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:18px; }
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer__col a{ font-size:14.5px; transition:color .3s; }
.footer__col a:hover{ color:var(--gold-soft); }
.footer__bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-block:26px; font-size:12.5px; color:rgba(255,255,255,.5); }
.footer__social{ display:flex; gap:12px; }
.footer__social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color:rgba(255,255,255,.7); transition:all .3s; }
.footer__social a:hover{ border-color:var(--gold-soft); color:var(--gold-soft); transform:translateY(-2px); }
@media (max-width:900px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__top{ grid-template-columns:1fr; } }

/* =========================================================
   Floating WhatsApp
   ========================================================= */
.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:55;
  width:58px; height:58px; border-radius:50%;
  background:#25d366; color:#fff; display:grid; place-items:center;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.7);
  transition:transform .35s; animation:wapop .5s .8s both;
}
.wa-fab:hover{ transform:scale(1.08); }
@keyframes wapop{ from{ transform:scale(0); } to{ transform:scale(1); } }

/* =========================================================
   Reveal animations
   ========================================================= */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__media img{ animation:none; }
}

/* burger visibility */
@media (max-width:980px){
  .nav__links{ display:none; }
  .nav__cta .btn-nav{ display:none; }
  .nav__burger{ display:flex; }
}