@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lora:ital,wght@0,400;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --green:#52755D; --green-dark:#3D5A47; --green-light:#7A9E87;
  --gold:#C8A84B; --gold-light:#E0C068; --gold-dark:#A88930;
  --green-pale:#E8F0EA; --green-wash:#F2F6F3;
  --cream:#FAF8F3; --warm-white:#FDFCF9;
  --ink:#1C1C18; --ink-mid:#3A3A35; --mid:#6B6B62; --muted:#9A9A90;
  --border:rgba(82,117,93,0.18); --border-cream:rgba(82,117,93,0.12);
  --shadow:0 4px 32px rgba(28,28,24,0.08);
  --nav-h:62px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; background:var(--warm-white); color:var(--ink); overflow-x:hidden; -webkit-font-smoothing:antialiased; }

/* ── LOGO ── */
.gs-logo { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.gs-logo-icon { height:52px; width:auto; display:block; flex-shrink:0; }
/* Nav wordmark text */
.gs-logo-text { font-family:'Bebas Neue',sans-serif; font-size:1.15rem; letter-spacing:.06em; color:var(--ink); line-height:1.1; }
.gs-logo-text span { display:block; font-size:.65rem; letter-spacing:.2em; color:var(--green); font-family:'DM Sans',sans-serif; font-weight:600; text-transform:uppercase; margin-top:2px; }
/* Footer variant — white */
.gs-logo-footer .gs-logo-icon-footer { filter:invert(1) brightness(10); }
.gs-logo-text-footer { color:#fff; }
.gs-logo-text-footer span { color:var(--green-light); }

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
#main-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5vw; height:var(--nav-h);
  background:rgba(253,252,249,.98);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-cream);
  transition:box-shadow .3s;
}
#main-nav.scrolled { box-shadow:0 2px 20px rgba(28,28,24,.1); }

/* Desktop nav links — hidden on mobile */
#nav-links { display:none; list-style:none; align-items:center; gap:1.6rem; }
#nav-links li { position:relative; }
#nav-links a {
  font-size:1.05rem; font-weight:500; letter-spacing:.07em;
  text-transform:uppercase; text-decoration:none;
  color:var(--mid); transition:color .2s; white-space:nowrap;
  padding:.3rem 0;
}
#nav-links a:hover, #nav-links a.active { color:var(--green); }


/* ── CLIENT LOGIN DROPDOWN ── */
#login-dropdown a {
  display: flex;
  align-items: center;
  gap: .5rem;
}
#login-dropdown a::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* Desktop dropdown — click-toggled */
.dropdown-toggle { cursor:pointer; }
.dd-arrow { font-size:1.05rem; margin-left:4px; }

.dropdown {
  display: none;
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%);
  background: #1C1C18;
  border: 1px solid rgba(255,255,255,.1);
  border-top: 2px solid var(--green);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  min-width: 260px;
  z-index: 2000;
  padding: 8px;
  border-radius: 0 0 10px 10px;
}
.dropdown.open { display: block; }

/* dropdown label header */
.dropdown-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-light);
  padding: .5rem .8rem .4rem;
  opacity: .7;
}

.dropdown a {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  border-radius: 7px;
  border-bottom: none;
  transition: background .15s, color .15s;
}
.dropdown a::before {
  content: '';
  display: block;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: rgba(82,117,93,.3);
  flex-shrink: 0;
  transition: background .15s;
}
.dropdown a:hover {
  background: rgba(82,117,93,.2);
  color: #fff;
  padding-left: 1rem;
}
.dropdown a:hover::before {
  background: rgba(82,117,93,.5);
}
.dropdown a:last-child { border-bottom: none; }

/* Desktop CTA */
.desktop-only {
  display:none;
  background:var(--green); color:#fff; border:none;
  padding:.52rem 1.3rem;
  font-family:'DM Sans',sans-serif; font-size:.90rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; transition:background .2s;
  white-space:nowrap;
}
.desktop-only:hover { background:var(--green-dark); }

/* ── HAMBURGER ── */
.nav-hamburger {
  display:flex; flex-direction:column; justify-content:center;
  gap:5px; width:40px; height:40px;
  background:none; border:none; cursor:pointer; padding:6px; flex-shrink:0;
}
.nav-hamburger span {
  display:block; width:100%; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform .3s, opacity .3s; transform-origin:center;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════
   MOBILE MENU — flat list, always in DOM,
   slides in from top, never blocks page
══════════════════════════════════════════ */
#mobile-menu {
  position:fixed; top:var(--nav-h); left:0; right:0;
  background:var(--warm-white);
  z-index:999;
  /* hidden: zero height + no pointer events */
  max-height:0; overflow:hidden; pointer-events:none;
  transition:max-height .35s ease;
  border-top:1px solid var(--border-cream);
  box-shadow:0 8px 32px rgba(28,28,24,.1);
}
#mobile-menu.open {
  max-height:100vh; pointer-events:all; overflow-y:auto;
}

.mob-section-label {
  padding:.6rem 5vw .4rem;
  font-size:.75rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--green);
  background:var(--green-pale);
  border-bottom:1px solid var(--border-cream);
}
.mob-item {
  display:block; padding:1rem 5vw;
  font-size:1rem; font-weight:500; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--border-cream);
  background:none;
}
.mob-item:hover, .mob-item:active { color:var(--green); background:var(--green-wash); }
.mob-item.mob-service {
  padding-left:calc(5vw + 1rem);
  font-size:1.05rem; color:var(--ink-mid);
  background:var(--cream);
}
.mob-item.mob-service:hover { color:var(--green); background:var(--green-pale); }
.mob-cta-btn {
  display:block; margin:1.2rem 5vw 1.5rem;
  background:var(--green); color:#fff;
  text-align:center; padding:1rem;
  font-family:'DM Sans',sans-serif; font-size:1rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border-radius:0;
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn { display:inline-block; padding:.85rem 1.7rem; font-family:'DM Sans',sans-serif; font-size:1.05rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; border:none; cursor:pointer; transition:all .2s; text-align:center; line-height:1; }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { background:var(--green-dark); }
.btn-outline-green { background:transparent; color:var(--green); border:1.5px solid var(--green); }
.btn-outline-green:hover { background:var(--green); color:#fff; }
.btn-outline-cream { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); }
.btn-outline-cream:hover { background:rgba(255,255,255,.12); }
.btn-white { background:#fff; color:var(--green); }
.btn-white:hover { background:var(--cream); }

/* ══════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════ */
.section-inner { max-width:1160px; margin:0 auto; padding:60px 5vw; }
.section-tag { font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--green); margin-bottom:.8rem; display:flex; align-items:center; gap:.5rem; }
.section-tag::before { content:''; display:block; width:16px; height:1px; background:var(--green); }
.section-tag.light { color:rgba(255,255,255,.8); }
.section-tag.light::before { background:rgba(255,255,255,.4); }
.section-h2 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.2rem,7vw,4rem); letter-spacing:.02em; line-height:1; color:var(--ink); margin-bottom:1rem; }
.section-h2.light { color:#fff; }
.section-sub { font-size:1.05rem; line-height:1.8; color:var(--mid); }
.section-sub.light { color:rgba(255,255,255,.82); }
.section-sub.wide { max-width:720px; }

/* ── PAGE HERO ── */
.page-hero { padding-top:var(--nav-h); background:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 60%,var(--green-light) 100%); position:relative; overflow:hidden; }
.page-hero::before { content:''; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,transparent,transparent 28px,rgba(255,255,255,.03) 29px),repeating-linear-gradient(-45deg,transparent,transparent 28px,rgba(255,255,255,.03) 29px); }
.page-hero-inner { position:relative; z-index:2; padding:45px 5vw 55px; max-width:1160px; margin:0 auto; }
.page-hero-tag { font-size:.77rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:.8rem; display:flex; align-items:center; gap:.5rem; }
.page-hero-tag::before { content:''; display:block; width:14px; height:1px; background:rgba(255,255,255,.4); }
.page-hero h1 { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.8rem,10vw,6.5rem); letter-spacing:.02em; line-height:.95; color:#fff; margin-bottom:1rem; }
.page-hero h1 .dim { color:rgba(255,255,255,.35); }
.page-hero-sub { font-size:1.1rem; line-height:1.8; color:rgba(255,255,255,.88); margin-bottom:1.6rem; }
.page-hero-price { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:.42rem .9rem; font-size:1.05rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.9); margin-bottom:1.6rem; }
.page-hero-actions { display:flex; gap:.8rem; flex-wrap:wrap; }

/* ── FEATURE LIST ── */
.feature-list { list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.feature-list li { font-size:1rem; color:var(--mid); display:flex; align-items:flex-start; gap:.65rem; line-height:1.6; }
.feature-list li::before { content:''; display:block; width:18px; height:18px; border-radius:50%; background:var(--green-pale); border:1.5px solid var(--green); flex-shrink:0; margin-top:2px; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9l3 3 5-5' stroke='%2352755D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; }
.feature-list.light li { color:rgba(255,255,255,.88); }
.feature-list.light li::before { background-color:rgba(255,255,255,.15); border-color:rgba(255,255,255,.4); background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 9l3 3 5-5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ── ANIMATIONS ── */
.fade-up { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-in { opacity:0; transition:opacity .6s ease; }
.fade-in.visible { opacity:1; }

/* ── FOOTER ── */
footer { background:var(--ink); padding:50px 5vw 24px; }
.footer-grid { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:1.5rem; }
.footer-brand { grid-column:1/-1; }
.footer-brand p { font-size:.98rem; line-height:1.7; color:rgba(255,255,255,.6); margin-top:.8rem; }
.footer-col h4 { font-family:'Bebas Neue',sans-serif; font-size:1rem; letter-spacing:.1em; color:rgba(255,255,255,.75); margin-bottom:.8rem; }
.footer-col a { display:block; font-size:.98rem; color:rgba(255,255,255,.62); text-decoration:none; margin-bottom:.45rem; transition:color .2s; }
.footer-col a:hover { color:var(--green-light); }
.footer-bottom { max-width:1160px; margin:0 auto; display:flex; flex-direction:column; gap:.3rem; }
.footer-bottom p { font-size:.75rem; color:rgba(255,255,255,.45); letter-spacing:.04em; }

/* ══════════════════════════════════════════
   TABLET 640px+
══════════════════════════════════════════ */
@media(min-width:640px) {
  .section-inner { padding:80px 6vw; }
  .page-hero-inner { padding:60px 6vw 70px; }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; }
  .footer-brand { grid-column:auto; }
  .footer-bottom { flex-direction:row; justify-content:space-between; }
}

/* ══════════════════════════════════════════
   DESKTOP 960px+
══════════════════════════════════════════ */
@media(min-width:960px) {
  :root { --nav-h:70px; }
  #main-nav { padding:0 6vw; }
  #nav-links { display:flex; }
  .desktop-only { display:inline-block; }
  .nav-hamburger { display:none; }
  /* Mobile menu must NEVER show on desktop */
  #mobile-menu { display:none !important; }
  .section-inner { padding:100px 6vw; }
  .page-hero-inner { padding:80px 6vw; }
}