/* ============================================
   DESIGN TOKENS — Off the Top Lawn Services
   ============================================ */
:root {
  --primary:        #5B8C5A;
  --primary-dark:   #2D4A2C;
  --primary-light:  #7FC17E;
  --primary-glow:   rgba(91, 140, 90, 0.28);
  --accent:         #E8C547;
  --accent-dark:    #C4A020;
  --accent-soft:    #F5DFA0;

  --text-dark:  #1E2C1E;
  --text-mid:   #4A5C4A;
  --text-light: #8A9E8A;

  --bg-white: #ffffff;
  --bg-light: #FAF8F2;
  --border:   #DAE8D4;

  --shadow-xs: 0 1px 4px rgba(45,74,44,0.06);
  --shadow-sm: 0 2px 12px rgba(45,74,44,0.08);
  --shadow:    0 8px 32px rgba(45,74,44,0.10);
  --shadow-lg: 0 20px 60px rgba(45,74,44,0.16);

  --radius-sm: 6px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 40px;
  --nav-height: 72px;
  --max-width:  1200px;

  --transition:      all 0.35s cubic-bezier(0.4,0,0.2,1);
  --transition-fast: all 0.2s cubic-bezier(0.4,0,0.2,1);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================
   BASE RESET + TYPOGRAPHY
   ============================================ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
html, body { overflow-x:hidden; }
body {
  font-family:var(--font-body); font-size:16px; line-height:1.7;
  color:var(--text-dark); background:var(--bg-light);
  -webkit-font-smoothing:antialiased;
}
body.page-exit { animation:pageExit 0.34s ease forwards; }
@keyframes pageExit { to { opacity:0; transform:translateY(-10px); } }

h1,h2,h3,h4,h5 { font-family:var(--font-display); line-height:1.2; }
h1 { font-size:clamp(2.4rem,5.5vw,4rem); font-weight:900; }
h2 { font-size:clamp(1.8rem,3.5vw,2.7rem); font-weight:700; }
h3 { font-size:clamp(1.2rem,2.5vw,1.7rem); font-weight:700; }
h4 { font-size:1.15rem; font-weight:700; }
p  { color:var(--text-mid); margin-bottom:1rem; }
a  { color:var(--primary); text-decoration:none; transition:var(--transition-fast); }
img { max-width:100%; display:block; }

.section     { padding:96px 0; }
.section.bg-white { background:var(--bg-white); }
.container   { max-width:var(--max-width); margin:0 auto; padding:0 24px; }
.eyebrow     { font-size:0.75rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--primary); display:block; margin-bottom:12px; }
.eyebrow-light { color:rgba(255,255,255,0.7); }
.divider     { width:56px; height:3px; background:linear-gradient(90deg,var(--primary-dark),var(--primary-light)); border-radius:2px; margin:16px auto 28px; }
.divider-left { width:56px; height:3px; background:linear-gradient(90deg,var(--primary-dark),var(--primary-light)); border-radius:2px; margin:16px 0 28px; }
.divider-accent { background:linear-gradient(90deg,var(--accent-dark),var(--accent)); }
.section-header { text-align:center; max-width:680px; margin:0 auto 64px; }
.section-header p { font-size:1.05rem; }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

.split { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center; }
.split.reverse { direction:rtl; }
.split.reverse > * { direction:ltr; }
.split-text { display:flex; flex-direction:column; }
.split-text h2 { margin-bottom:8px; }
.split-text p { font-size:1.05rem; }
.split-img { position:relative; }
.split-img img { width:100%; height:480px; object-fit:cover; border-radius:var(--radius-xl); display:block; }
.split-img-badge {
  position:absolute; bottom:24px; left:24px;
  background:var(--accent); color:var(--primary-dark);
  font-size:0.8rem; font-weight:800; letter-spacing:0.06em;
  padding:10px 18px; border-radius:var(--radius-xl);
}

/* ============================================
   SCROLL PROGRESS BAR
   ============================================ */
.scroll-progress {
  position:fixed; top:0; left:0; height:3px; z-index:10001;
  background:linear-gradient(90deg,var(--primary-dark),var(--primary-light),var(--accent));
  width:0%; transition:width 0.1s linear; pointer-events:none;
}

/* ============================================
   PRELOADER
   ============================================ */
.preloader {
  position:fixed; inset:0; z-index:10000;
  background:var(--primary-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.done { opacity:0; visibility:hidden; pointer-events:none; }
.preloader-logo { display:flex; align-items:center; gap:14px; }
.preloader-mark {
  width:54px; height:54px; border-radius:50%;
  background:linear-gradient(135deg,var(--primary-light),var(--accent));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.1rem; font-weight:900; color:var(--primary-dark);
  animation:preloaderPulse 1.2s ease-in-out infinite alternate;
}
@keyframes preloaderPulse { from{transform:scale(1);}to{transform:scale(1.08);box-shadow:0 0 28px rgba(240,192,64,0.4);} }
.preloader-text strong { display:block; font-family:var(--font-display); font-size:1.2rem; color:#fff; font-weight:700; }
.preloader-text span   { font-size:0.7rem; color:rgba(255,255,255,0.45); letter-spacing:0.14em; text-transform:uppercase; }
.preloader-track { width:200px; height:2px; background:rgba(255,255,255,0.1); border-radius:2px; overflow:hidden; }
.preloader-fill  { height:100%; background:linear-gradient(90deg,var(--primary-light),var(--accent)); animation:preloaderFill 1.6s ease-in-out forwards; }
@keyframes preloaderFill { from{width:0%;}to{width:100%;} }

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  position:fixed; top:0; left:0; right:0; height:var(--nav-height);
  background:rgba(26,58,40,0.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  z-index:1000; transition:var(--transition);
}
.navbar.scrolled { background:rgba(26,58,40,0.98); box-shadow:0 4px 24px rgba(0,0,0,0.2); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:100%; }
.nav-logo  { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo-mark {
  width:38px; height:38px;
  border-radius:60% 40% 70% 30% / 30% 60% 40% 70%;
  background:linear-gradient(135deg,var(--primary-light),var(--accent));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family:var(--font-display); font-weight:900; color:var(--primary-dark); font-size:0.9rem;
  animation:logoMorph 5s ease-in-out infinite alternate;
}
@keyframes logoMorph {
  from { border-radius:60% 40% 70% 30% / 30% 60% 40% 70%; }
  to   { border-radius:40% 60% 30% 70% / 60% 30% 70% 40%; }
}
.nav-logo-text strong { display:block; font-family:var(--font-display); font-size:0.95rem; color:#fff; font-weight:700; line-height:1.2; }
.nav-logo-text span   { font-size:0.6rem; color:rgba(255,255,255,0.45); letter-spacing:0.14em; text-transform:uppercase; }
.nav-menu { display:flex; align-items:center; gap:2px; list-style:none; }
.nav-menu a {
  padding:8px 14px; border-radius:var(--radius-sm);
  font-size:0.9rem; font-weight:500; color:rgba(255,255,255,0.78);
  text-decoration:none; transition:var(--transition-fast); position:relative;
}
.nav-menu a::after { content:''; position:absolute; bottom:4px; left:14px; right:14px; height:2px; background:var(--accent); border-radius:1px; transform:scaleX(0); transition:transform 0.25s ease; }
.nav-menu a:hover, .nav-menu a.active { color:#fff; }
.nav-menu a:hover::after, .nav-menu a.active::after { transform:scaleX(1); }
.nav-cta { background:var(--accent) !important; color:var(--primary-dark) !important; font-weight:800 !important; border-radius:var(--radius-xl) !important; padding:8px 20px !important; }
.nav-cta::after { display:none !important; }
.nav-cta:hover { background:var(--accent-dark) !important; color:#fff !important; }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; color:#fff; width:44px; height:44px; align-items:center; justify-content:center; border-radius:var(--radius-sm); }
.nav-toggle:hover { background:rgba(255,255,255,0.08); }

@media(max-width:900px) {
  .nav-menu {
    display:flex; position:fixed; top:0; left:0; right:0; bottom:0;
    width:100vw; height:100vh; min-height:100vh;
    background:var(--primary-dark); backdrop-filter:none; -webkit-backdrop-filter:none;
    flex-direction:column; align-items:center; justify-content:flex-start;
    gap:4px; padding:96px 28px 40px; overflow-y:auto; z-index:9999;
    opacity:0; transform:translateX(100%); pointer-events:none;
    transition:opacity 0.35s ease, transform 0.35s cubic-bezier(.4,0,.2,1);
  }
  .nav-menu.open { opacity:1; transform:translateX(0); pointer-events:all; }
  .nav-menu li { width:100%; }
  .nav-menu a { font-size:1.1rem; padding:13px 28px; font-weight:700; color:rgba(255,255,255,0.85); width:100%; text-align:center; display:block; border-radius:8px; }
  .nav-menu a::after { display:none; }
  .nav-menu a:hover, .nav-menu a.active { color:#fff; background:rgba(255,255,255,0.07); }
  .nav-cta { margin-top:12px !important; }
  .nav-toggle { display:flex; z-index:10000; position:relative; }
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position:relative; min-height:100vh; display:flex; align-items:center;
  overflow:hidden; background:var(--primary-dark);
  padding:calc(var(--nav-height) + 80px) 0 80px;
}
.hero-photo {
  position:absolute; inset:0; z-index:0;
  background-image:url('https://images.unsplash.com/photo-1458245201577-fc8a130b8829?w=1800&q=80&fit=crop&auto=format');
  background-size:cover; background-position:center 40%;
  animation:kenBurns 24s ease-in-out infinite alternate;
}
@keyframes kenBurns { 0%{transform:scale(1) translateX(0);}100%{transform:scale(1.1) translateX(-16px);} }
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(135deg,rgba(26,58,40,0.92) 0%,rgba(26,58,40,0.65) 55%,rgba(42,92,63,0.45) 100%);
}
.hero-aurora {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(74,155,106,0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 25%, rgba(240,192,64,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at 55% 85%, rgba(224,122,58,0.14) 0%, transparent 40%);
  animation:auroraMove 14s ease-in-out infinite alternate;
}
@keyframes auroraMove {
  0%   { transform:scale(1) translate(0,0); opacity:0.8; }
  50%  { transform:scale(1.04) translate(2%,-2%); opacity:1; }
  100% { transform:scale(0.98) translate(-1.5%,1.5%); opacity:0.9; }
}
.hero-blobs { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.hero-blob {
  position:absolute; border-radius:50%; filter:blur(80px); opacity:0.2;
  animation:blobFloat 9s ease-in-out infinite alternate;
}
.hero-blob-1 { width:600px; height:600px; top:-150px; right:-100px; background:radial-gradient(circle,var(--primary-light),transparent 70%); animation-duration:10s; }
.hero-blob-2 { width:450px; height:450px; bottom:-80px; left:-80px; background:radial-gradient(circle,var(--accent),transparent 70%); animation-duration:12s; animation-delay:-4s; opacity:0.15; }
@keyframes blobFloat { from{transform:translateY(0) scale(1);}to{transform:translateY(-28px) scale(1.05);} }
.hero-noise {
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}
.hero-content { position:relative; z-index:5; max-width:760px; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2);
  padding:8px 18px; border-radius:100px;
  font-size:0.75rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.85);
  margin-bottom:24px;
}
.hero h1 { color:#fff; margin-bottom:20px; }
.hero h1 em { font-style:italic; color:var(--accent); }
.hero p  { color:rgba(255,255,255,0.78); font-size:1.15rem; line-height:1.75; margin-bottom:36px; max-width:560px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }
.hero-trust { display:flex; align-items:center; gap:8px; }
.hero-trust-stars { color:var(--accent); font-size:1.1rem; letter-spacing:2px; }
.hero-trust-text { font-size:0.82rem; color:rgba(255,255,255,0.55); }
.hero-scroll { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:6; display:flex; flex-direction:column; align-items:center; gap:8px; }
.hero-scroll-line { width:1px; height:48px; background:linear-gradient(to bottom,rgba(255,255,255,0.5),transparent); animation:scrollBounce 2s ease-in-out infinite; }
@keyframes scrollBounce { 0%,100%{transform:scaleY(1);opacity:1;}50%{transform:scaleY(0.6);opacity:0.4;} }

/* ============================================
   MARQUEE TICKER
   ============================================ */
.marquee-section { background:var(--primary-dark); padding:14px 0; overflow:hidden; }
.marquee-track { display:flex; white-space:nowrap; animation:marquee 35s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-item { display:inline-flex; align-items:center; gap:20px; padding:0 24px; font-size:0.78rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.65); flex-shrink:0; }
.marquee-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:0.8; flex-shrink:0; }
@keyframes marquee { from{transform:translateX(0);}to{transform:translateX(-50%);} }

/* ============================================
   STATS BAR
   ============================================ */
.stats-bar { background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%); padding:64px 0; position:relative; overflow:hidden; }
.stats-bar::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 200px; opacity:0.03; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; position:relative; }
.stat-item { text-align:center; }
.stat-number { display:block; font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.6rem); font-weight:900; background:linear-gradient(135deg,#fff,var(--accent)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:8px; }
.stat-label  { font-size:0.8rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
@media(max-width:1024px){ .stats-grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .stats-grid { gap:28px; } }

/* ============================================
   ABOUT SPLIT
   ============================================ */
.leaf-accent {
  display:inline-block; width:32px; height:32px; margin-bottom:16px;
  background:linear-gradient(135deg,var(--primary-light),var(--accent));
  border-radius:0 60% 0 60%; transform:rotate(45deg);
  opacity:0.6;
}

/* ============================================
   SERVICE CARDS
   ============================================ */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.service-card {
  background:var(--bg-white); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden;
  transition:var(--transition); cursor:default;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(40px) rotate(-0.8deg);
}
.service-card.revealed { opacity:1; transform:none; }
.service-card:nth-child(2) { transition-delay:0.12s; }
.service-card:nth-child(3) { transition-delay:0.24s; }
.service-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--primary-light); }
.service-card-top { height:6px; }
.service-card-top.green  { background:linear-gradient(90deg,var(--primary-dark),var(--primary-light)); }
.service-card-top.yellow { background:linear-gradient(90deg,var(--accent-dark),var(--accent)); }
.service-card-top.orange { background:linear-gradient(90deg,var(--accent-dark),var(--accent)); }
.service-card-body { padding:28px 28px 24px; flex:1; display:flex; flex-direction:column; }
.service-card-icon { width:52px; height:52px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.service-card-icon.green  { background:linear-gradient(135deg,var(--primary-dark),var(--primary-light)); }
.service-card-icon.yellow { background:linear-gradient(135deg,var(--accent-dark),var(--accent)); }
.service-card-icon.orange { background:linear-gradient(135deg,var(--accent-dark),var(--accent)); }
.service-card-icon .icon { width:24px; height:24px; color:#fff; }
.service-card-body h3 { margin-bottom:10px; font-size:1.3rem; }
.service-card-body p  { font-size:0.92rem; flex:1; }
.service-card-includes { list-style:none; margin:16px 0 20px; display:flex; flex-direction:column; gap:8px; }
.service-card-includes li { display:flex; align-items:center; gap:10px; font-size:0.88rem; color:var(--text-mid); }
.service-card-includes li::before { content:''; width:18px; height:18px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.service-card-price { font-family:var(--font-display); font-size:1.6rem; font-weight:900; color:var(--primary); margin-bottom:18px; }
.service-card-price span { font-size:0.85rem; font-weight:400; color:var(--text-light); font-family:var(--font-body); }
.service-card-badge { display:inline-block; background:linear-gradient(135deg,var(--accent-dark),var(--accent)); color:var(--primary-dark); font-size:0.7rem; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; padding:4px 12px; border-radius:100px; margin-left:10px; vertical-align:middle; }

/* ============================================
   CINEMATIC / QUOTE
   ============================================ */
.cinematic-section {
  position:relative; min-height:65vh; display:flex; align-items:center;
  overflow:hidden; background:var(--primary-dark);
}
.cinematic-bg {
  position:absolute; inset:0; z-index:0;
  background-image:url('https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=1800&q=80&fit=crop');
  background-size:cover; background-position:center 30%;
}
.cinematic-overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(135deg,rgba(26,58,40,0.93),rgba(26,58,40,0.78)); }
.cinematic-content { position:relative; z-index:2; text-align:center; max-width:800px; margin:0 auto; padding:80px 24px; }
.cinematic-content blockquote { font-family:var(--font-display); font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:400; font-style:italic; color:#fff; line-height:1.4; margin-bottom:20px; }
.cinematic-content blockquote em { color:var(--accent); font-style:normal; }
.cinematic-content cite { font-size:0.82rem; color:rgba(255,255,255,0.45); letter-spacing:0.1em; text-transform:uppercase; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-section { background:var(--bg-white); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.testimonial-card {
  background:var(--bg-light); border:1.5px solid var(--border);
  border-radius:var(--radius-lg); padding:28px;
  transition:var(--transition);
}
.testimonial-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--primary-light); }
.testimonial-stars { color:var(--accent); font-size:1rem; letter-spacing:3px; margin-bottom:14px; }
.testimonial-card blockquote { font-size:0.95rem; color:var(--text-mid); line-height:1.7; font-style:italic; margin-bottom:18px; }
.testimonial-card blockquote::before { content:'\201C'; }
.testimonial-card blockquote::after  { content:'\201D'; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-light)); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:0.9rem; flex-shrink:0; }
.testimonial-name strong { display:block; font-size:0.88rem; font-weight:700; color:var(--text-dark); }
.testimonial-name span  { font-size:0.78rem; color:var(--text-light); }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px;
  border-radius:var(--radius-xl); font-weight:700; font-size:0.95rem;
  cursor:pointer; transition:var(--transition); text-decoration:none;
  border:2px solid transparent; white-space:nowrap; letter-spacing:0.02em;
}
.btn-primary { background:var(--accent); color:var(--primary-dark); border-color:var(--accent); font-weight:800; }
.btn-primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,197,71,0.4); }
.btn-green { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-green:hover { background:var(--primary-dark); border-color:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow); color:#fff; }
.btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,0.4); }
.btn-ghost:hover { background:rgba(255,255,255,0.1); border-color:#fff; transform:translateY(-2px); color:#fff; }
.btn .icon { width:18px; height:18px; }

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section {
  position:relative; padding:96px 0; overflow:hidden;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);
  text-align:center;
}
.cta-section::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 30%,rgba(240,192,64,0.12),transparent 55%); }
.cta-section h2 { color:#fff; margin-bottom:14px; position:relative; }
.cta-section p  { color:rgba(255,255,255,0.72); font-size:1.08rem; max-width:520px; margin:0 auto 36px; position:relative; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ============================================
   CONTACT FORM
   ============================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.contact-card { background:var(--bg-white); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:40px; box-shadow:var(--shadow-sm); }
.contact-info-item { display:flex; align-items:flex-start; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
.contact-info-item:last-child { border-bottom:none; }
.contact-info-icon { width:40px; height:40px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-icon .icon { width:18px; height:18px; color:#fff; }
.contact-info-text strong { display:block; font-size:0.85rem; font-weight:700; margin-bottom:2px; }
.contact-info-text span, .contact-info-text a { font-size:0.9rem; color:var(--text-mid); }
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color:var(--text-dark); }
.form-control {
  width:100%; padding:11px 16px; border:1.5px solid var(--border); border-radius:var(--radius);
  font-family:var(--font-body); font-size:0.9rem; color:var(--text-dark); background:var(--bg-white);
  transition:border-color 0.2s ease, box-shadow 0.2s ease; outline:none;
}
.form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
textarea.form-control { min-height:130px; resize:vertical; }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A6052' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; cursor:pointer; }
.form-success { display:none; text-align:center; padding:40px 20px; }
.form-success h3 { color:var(--primary); margin-bottom:12px; }
.form-success p { color:var(--text-mid); }

/* ============================================
   PAGE HERO (subpages)
   ============================================ */
.page-hero {
  position:relative; padding:calc(var(--nav-height) + 72px) 0 72px;
  background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%); overflow:hidden;
}
.page-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 80% 20%,rgba(240,192,64,0.15),transparent 50%); }
.page-hero h1 { color:#fff; margin-bottom:12px; position:relative; }
.page-hero p  { color:rgba(255,255,255,0.72); font-size:1.08rem; max-width:600px; position:relative; }

/* ============================================
   GALLERY
   ============================================ */
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.photo-grid img { width:100%; height:280px; object-fit:cover; border-radius:var(--radius); cursor:pointer; display:block; transition:transform 0.35s ease, box-shadow 0.35s ease; }
.photo-grid img:hover { transform:scale(1.03); box-shadow:var(--shadow-lg); }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:9990; background:rgba(10,24,14,0.97); backdrop-filter:blur(12px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.lightbox.open { opacity:1; pointer-events:all; }
.lightbox-img { max-width:88vw; max-height:88vh; object-fit:contain; border-radius:var(--radius); box-shadow:0 40px 100px rgba(0,0,0,0.7); transform:scale(0.92); transition:transform 0.35s cubic-bezier(.4,0,.2,1); display:block; }
.lightbox.open .lightbox-img { transform:scale(1); }
.lightbox-close { position:absolute; top:24px; right:24px; background:rgba(255,255,255,0.1); border:none; color:#fff; width:44px; height:44px; border-radius:50%; font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; }
.lightbox-close:hover { background:rgba(255,255,255,0.2); }
.lightbox-prev, .lightbox-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.1); border:none; color:#fff; width:48px; height:48px; border-radius:50%; font-size:1.3rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; }
.lightbox-prev:hover, .lightbox-next:hover { background:rgba(255,255,255,0.2); }
.lightbox-prev { left:24px; }
.lightbox-next { right:24px; }
.lightbox-caption { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); font-size:0.82rem; color:rgba(255,255,255,0.4); }

/* ============================================
   FOOTER
   ============================================ */
.footer { background:#0C1F12; color:rgba(255,255,255,0.6); }
.footer-brand-bar { padding:18px 0; text-align:center; overflow:hidden; border-bottom:1px solid rgba(255,255,255,0.06); }
.footer-brand-statement { font-family:var(--font-display); font-size:clamp(1.2rem,3vw,2rem); font-weight:900; background:linear-gradient(90deg,rgba(255,255,255,0.15),rgba(255,255,255,0.8),rgba(255,255,255,0.15)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap; }
.footer-main { padding:64px 0 40px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; }
.footer-brand p  { font-size:0.88rem; line-height:1.7; margin-bottom:20px; }
.footer-tagline  { font-family:var(--font-display); font-style:italic; font-size:0.92rem; color:rgba(255,255,255,0.3); }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-links a { font-size:0.88rem; color:rgba(255,255,255,0.5); transition:var(--transition-fast); }
.footer-links a:hover { color:var(--accent); }
.footer h5 { font-family:var(--font-body); font-size:0.72rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-bottom:18px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.06); padding:18px 0; font-size:0.8rem; }
.footer-bottom-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
@media(max-width:1024px){ .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:640px){ .footer-grid { grid-template-columns:1fr; } .footer-bottom-inner { flex-direction:column; text-align:center; } }

/* ============================================
   BACK TO TOP + DOT NAV
   ============================================ */
.back-to-top {
  position:fixed; bottom:32px; right:32px; width:46px; height:46px;
  background:var(--primary); color:#fff; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:200; box-shadow:var(--shadow);
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:var(--transition);
}
.back-to-top.visible { opacity:1; transform:translateY(0); pointer-events:all; }
.back-to-top:hover { background:var(--primary-dark); transform:translateY(-3px); }
.dot-nav { position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:100; display:flex; flex-direction:column; gap:10px; }
.dot-nav-dot { width:8px; height:8px; border-radius:50%; background:rgba(42,92,63,0.25); border:none; cursor:pointer; padding:0; transition:var(--transition-fast); }
.dot-nav-dot.active { background:var(--primary); transform:scale(1.5); box-shadow:0 0 8px var(--primary-glow); }
@media(max-width:900px){ .dot-nav { display:none; } }

/* ============================================
   SCROLL REVEAL
   ============================================ */
[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.4,0,0.2,1); }
[data-reveal="left"]  { transform:translateX(-40px); }
[data-reveal="right"] { transform:translateX(40px); }
[data-reveal].revealed { opacity:1; transform:none; }
[data-delay="1"] { transition-delay:0.1s; }
[data-delay="2"] { transition-delay:0.2s; }
[data-delay="3"] { transition-delay:0.3s; }
[data-delay="4"] { transition-delay:0.4s; }

/* ============================================
   ICON SIZING IN BUTTONS
   ============================================ */
.nav-toggle .icon  { width:22px; height:22px; display:block; }
.back-to-top .icon { width:20px; height:20px; display:block; }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media(max-width:1024px) {
  .section { padding:72px 0; }
  .split { gap:48px; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .testimonials-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:900px) {
  .section { padding:56px 0; }
  .split, .split.reverse { grid-template-columns:1fr; gap:40px; direction:ltr; }
  .services-grid { grid-template-columns:1fr; }
  .testimonials-grid { grid-template-columns:1fr; }
  .photo-grid { grid-template-columns:repeat(2,1fr); }
  .contact-grid { grid-template-columns:1fr; gap:40px; }
  .hero { min-height:auto; padding-top:calc(var(--nav-height) + 20px); padding-bottom:40px; }
  .hero-scroll { display:none; }
  .hero-blob-1 { width:320px; height:320px; }
  .hero-blob-2 { width:260px; height:260px; }
}
@media(max-width:640px) {
  .section { padding:40px 0; }
  .split-img img { height:280px; }
  .hero-actions, .cta-actions { flex-direction:column; }
  .btn { text-align:center; justify-content:center; }
  .photo-grid { grid-template-columns:1fr; }
  .back-to-top { bottom:20px; right:20px; }
}

/* ============================================
   HOW IT WORKS
   ============================================ */
.how-it-works-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; position:relative; }
.how-it-works-grid::before {
  content:''; position:absolute; top:36px; left:15%; right:15%; height:1.5px;
  background:linear-gradient(90deg,transparent,var(--border),var(--border),transparent);
  z-index:0;
}
.how-it-step { text-align:center; position:relative; z-index:1; }
.how-it-num {
  width:72px; height:72px; border-radius:60% 40% 70% 30% / 30% 60% 40% 70%;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:1.6rem; font-weight:900; color:#fff;
  margin:0 auto 20px; animation:logoMorph 5s ease-in-out infinite alternate;
}
.how-it-num:nth-child(1) { animation-delay:0s; }
.how-it-step:nth-child(2) .how-it-num { background:linear-gradient(135deg,var(--accent-dark),var(--accent)); color:var(--primary-dark); animation-delay:-2s; }
.how-it-step:nth-child(3) .how-it-num { animation-delay:-4s; }
.how-it-step h4 { margin-bottom:8px; font-size:1.1rem; }
.how-it-step p  { font-size:0.9rem; max-width:220px; margin:0 auto; }
@media(max-width:900px){ .how-it-works-grid { grid-template-columns:1fr; gap:32px; } .how-it-works-grid::before { display:none; } .how-it-step p { max-width:100%; } }

/* ============================================
   INSTAGRAM PLACEHOLDER
   ============================================ */
.instagram-section { background:var(--bg-white); }
.instagram-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  max-width:640px; margin:0 auto 36px; border-radius:var(--radius); overflow:hidden;
}
.instagram-tile {
  aspect-ratio:1; background:var(--bg-light); border:1.5px solid var(--border);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; cursor:pointer; transition:var(--transition); position:relative; overflow:hidden;
}
.instagram-tile::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(91,140,90,0.08),rgba(232,197,71,0.08));
  opacity:0; transition:opacity 0.3s;
}
.instagram-tile:hover::before { opacity:1; }
.instagram-tile:hover { border-color:var(--primary-light); }
.instagram-tile-icon { font-size:1.6rem; opacity:0.35; }
.instagram-tile-label { font-size:0.7rem; font-weight:600; color:var(--text-light); letter-spacing:0.08em; text-transform:uppercase; }

/* ============================================
   CRITICAL MOBILE OVERRIDE (inline fallback)
   ============================================ */
@media(max-width:900px){
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr !important; }
}