:root{
  --ink:#1F2733;
  --ink-soft:#4B5563;
  --surface:rgba(255,253,248,0.82);
  --surface-solid:#FFFDF9;
  --line:rgba(31,39,51,0.10);
  --gold:#C99A4E;
  --gold-deep:#A9782F;
  --leaf:#6E8F6A;
  --leaf-deep:#4C6B49;
  --slate:#3A4658;
  --radius:16px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', sans-serif;
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{ font-family:'Fraunces', serif; font-weight:600; line-height:1.18; letter-spacing:-0.01em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1140px; margin:0 auto; padding:0 24px; }
.mono{ font-family:'JetBrains Mono', monospace; }

/* ---------- Fixed sky backdrop (scroll-driven, muted & subtle) ---------- */
#sky{
  position:fixed; inset:0; z-index:-6;
  background:linear-gradient(180deg, var(--sky-top, #7EA6D6) 0%, var(--sky-bottom, #E9EFDF) 100%);
}
#scrim{
  position:fixed; inset:0; z-index:-5;
  background:rgba(255,253,248,0.18);
  pointer-events:none;
}
#sun{
  position:fixed; top:0; left:0; z-index:-4;
  width:130px; height:130px; border-radius:50%;
  transform:translate3d(var(--sun-x,8vw), var(--sun-y,14vh), 0) scale(var(--sun-scale,1));
  background:radial-gradient(circle at 42% 40%, var(--sun-core,#FFF7E6) 0%, var(--sun-core,#FFF7E6) 22%, var(--sun-mid,#F3D9A6) 55%, transparent 80%);
  filter:blur(4px);
  opacity:var(--sun-opacity, 0.95);
  box-shadow:0 0 150px 55px var(--sun-glow, rgba(243,217,166,0.55));
  will-change:transform, opacity;
}
.clouds{ position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden; }
.cloud{ position:absolute; background:rgba(255,255,255,0.55); border-radius:100px; filter:blur(2px); }
.cloud::before, .cloud::after{ content:""; position:absolute; background:inherit; border-radius:100px; }
.c1{ width:160px; height:50px; top:16%; left:-20%; animation:drift 52s linear infinite; }
.c1::before{ width:90px; height:70px; top:-35px; left:20px; }
.c1::after{ width:70px; height:55px; top:-25px; left:80px; }
.c2{ width:110px; height:38px; top:30%; left:-15%; animation:drift 68s linear infinite; animation-delay:-20s; opacity:.7;}
.c2::before{ width:60px; height:48px; top:-24px; left:15px; }
.c3{ width:200px; height:60px; top:9%; left:-25%; animation:drift 86s linear infinite; animation-delay:-40s; opacity:.5; }
.c3::before{ width:110px; height:80px; top:-40px; left:30px; }
@keyframes drift{ from{ transform:translateX(0); } to{ transform:translateX(160vw); } }

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,248,0.75); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; position:relative; }
.brand{ display:flex; align-items:center; gap:8px; font-family:'Fraunces', serif; font-weight:600; font-size:26px; letter-spacing:-0.01em; }
.nav-links{ display:flex; gap:24px; font-size:14px; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--ink); }
.mobile-toggle{ display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink); padding:4px 8px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:100px; font-size:14.5px; font-weight:700;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease;
  font-family:'Manrope', sans-serif;
}
.btn:hover{ transform:translateY(-1px); }
.btn-gold{ background:linear-gradient(160deg, var(--gold), var(--gold-deep)); color:#fff; }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }

/* ---------- hero ---------- */
.hero{ padding:110px 24px 80px; text-align:center; position:relative; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono', monospace;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep);
  background:rgba(255,255,255,0.55); border:1px solid var(--line);
  padding:7px 14px; border-radius:100px; margin-bottom:24px;
}
.hero h1{ font-size:50px; max-width:820px; margin:0 auto 20px; }
.hero h1 em{ font-style:italic; color:var(--gold-deep); }
.hero p.lead{ color:var(--ink-soft); font-size:17.5px; max-width:52ch; margin:0 auto 32px; }
.hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }




/* ---------- generic sections ---------- */
section{ padding:86px 24px; position:relative; }
.glass{ background:var(--surface); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:20px; }
.section-head{ max-width:640px; margin:0 auto 46px; text-align:center; }
.kicker{
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--leaf-deep);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; display:block;
}
.section-head h2{ font-size:32px; margin-bottom:12px; }
.section-head p{ color:var(--ink-soft); font-size:15.5px; }

/* who we help */
.who-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.who-card{ background:var(--surface-solid); border:1px solid var(--line); border-radius:var(--radius); padding:28px; text-align:center; }
.who-card h4{ font-size:18px; margin:10px 0 8px; }
.who-card p{ color:var(--ink-soft); font-size:13.5px; }

/* gallery placeholder */
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.gallery-item{
  aspect-ratio:4/3; border-radius:12px; border:1px dashed var(--line);
  background:repeating-linear-gradient(135deg, var(--surface-solid), var(--surface-solid) 10px, #F0ECE0 10px, #F0ECE0 20px);
  display:flex; align-items:center; justify-content:center;
}
.gallery-item span{ font-size:13px; color:var(--ink-soft); font-family:'JetBrains Mono', monospace; }

textarea{
  width:100%; background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:12px 14px; border-radius:10px; font-family:'Manrope'; font-size:14.5px; resize:vertical;
}
textarea:focus{ outline:none; border-color:var(--gold); }

.offer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.offer-card{
  background:var(--surface-solid); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; transition:transform .2s ease, box-shadow .2s ease;
}
.offer-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(31,39,51,0.07); }
.offer-icon{ font-size:24px; margin-bottom:16px; }
.offer-card h3{ font-size:19px; margin-bottom:10px; }
.offer-card p{ color:var(--ink-soft); font-size:14px; margin-bottom:16px; }
.card-link{ font-size:13.5px; font-weight:700; color:var(--gold-deep); }

/* why us / benefit grid */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.why-card .rule{ height:2px; width:32px; background:var(--gold); margin-bottom:18px; }
.why-grid .why-card:nth-child(even) .rule{ background:var(--leaf); }
.why-card h4{ font-size:16.5px; margin-bottom:8px; }
.why-card p{ color:var(--ink-soft); font-size:13.5px; }

/* stats */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center; }
.stat .num{ font-family:'Fraunces', serif; font-size:30px; color:var(--gold-deep); font-weight:700; }
.stat .lbl{ font-size:13px; color:var(--ink-soft); margin-top:6px; }

/* calculator */
.calc-panel{ padding:42px; display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center; }
.calc-info h2{ font-size:27px; margin-bottom:14px; }
.calc-info p{ color:var(--ink-soft); font-size:14.5px; max-width:40ch; }
.calc-form{ display:flex; flex-direction:column; gap:16px; }
label{ font-size:12.5px; color:var(--ink-soft); margin-bottom:6px; display:block; }
input, select{
  width:100%; background:#fff; border:1px solid var(--line); color:var(--ink);
  padding:12px 14px; border-radius:10px; font-family:'Manrope'; font-size:14.5px;
}
input:focus, select:focus{ outline:none; border-color:var(--gold); }
.calc-result{ margin-top:6px; background:rgba(201,154,78,0.1); border:1px solid rgba(201,154,78,0.28); border-radius:10px; padding:16px 18px; display:none; }
.calc-result.show{ display:block; }
.calc-result .row{ display:flex; justify-content:space-between; font-size:14px; padding:6px 0; }
.calc-result .row b{ color:var(--gold-deep); font-family:'JetBrains Mono', monospace; }

/* process */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.process-num{ font-family:'Fraunces', serif; font-size:36px; color:var(--gold); opacity:.5; margin-bottom:12px; }
.process-card h4{ font-size:16.5px; margin-bottom:8px; }
.process-card p{ font-size:13.5px; color:var(--ink-soft); }

/* testimonials */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi-card{ background:var(--surface-solid); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.testi-card .stars{ color:var(--gold); margin-bottom:14px; letter-spacing:2px; }
.testi-card p{ font-size:14.5px; margin-bottom:18px; font-style:italic; }
.testi-name{ font-size:13.5px; color:var(--ink-soft); font-weight:700; }

/* faq */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--surface-solid); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.faq-q{ padding:18px 22px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:700; }
.faq-q .plus{ color:var(--gold-deep); font-size:20px; transition:transform .2s ease; }
.faq-item.open .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 22px; color:var(--ink-soft); font-size:14px; }
.faq-item.open .faq-a{ max-height:300px; padding-bottom:20px; }

/* final cta */
.final-cta{ padding:48px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.final-cta h2{ font-size:27px; margin-bottom:14px; }
.final-cta p{ color:var(--ink-soft); font-size:14.5px; }
.final-form{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px; display:flex; flex-direction:column; gap:14px; }
.final-form .btn{ width:100%; justify-content:center; padding:13px; font-size:15px; }
#ctaStatus{
  font-family:'Fraunces', serif; font-size:17px; color:var(--leaf-deep);
  display:none; text-align:center; padding:20px 10px; line-height:1.5;
}
#ctaStatus.show{ display:block; }
#ctaStatus::before{ content:"✓"; display:block; font-size:28px; margin-bottom:10px; color:var(--leaf); }



.landscape{ position:relative; margin-top:24px; line-height:0; }
.landscape svg{ width:100%; height:auto; display:block; }
.landscape-caption{
  display:flex; align-items:center; justify-content:center; gap:16px;
  padding:34px 24px;
  background:#2F6B34;
  font-family:'Fraunces', serif; font-style:italic; font-weight:500;
  font-size:clamp(15px, 1.8vw, 19px); color:#EDEFEF;
  letter-spacing:0.02em; text-align:center;
}
.landscape-caption::before, .landscape-caption::after{
  content:""; width:30px; height:1px; background:#EDEFEF; opacity:0.4;
}
.blades{ animation-name:spin; animation-timing-function:linear; animation-iteration-count:infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- footer ---------- */
footer{ padding:44px 24px 28px; background:linear-gradient(180deg, #2F6B34, #1E4526); color:#EDEFEF; }
footer a{ color:#EDEFEF; }
footer .kicker{ color:#BFD4BE; }
.footer-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:32px; margin-bottom:28px; }
.footer-brand p{ color:#BFD4BE; font-size:13.5px; max-width:34ch; margin-top:12px; }
.footer-links{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-col h5{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:#BFD4BE; margin-bottom:14px; }
.footer-col a{ display:block; font-size:13.5px; margin-bottom:10px; }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.14); padding-top:20px; display:flex; justify-content:space-between; font-size:12.5px; color:#BFD4BE; flex-wrap:wrap; gap:10px; }

/* ---------- simple sub-page hero variant ---------- */
.page-hero{ padding:90px 24px 60px; text-align:center; }
.page-hero .eyebrow{ margin-bottom:22px; }
.page-hero h1{ font-size:42px; max-width:760px; margin:0 auto 18px; }
.page-hero p.lead{ color:var(--ink-soft); font-size:16.5px; max-width:56ch; margin:0 auto; }

.benefit-list{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.benefit-item{ display:flex; gap:14px; align-items:flex-start; background:var(--surface-solid); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.benefit-item .ic{ font-size:20px; }
.benefit-item h4{ font-size:15.5px; margin-bottom:4px; }
.benefit-item p{ font-size:13.5px; color:var(--ink-soft); }

.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.compare-card{ background:var(--surface-solid); border:1px solid var(--line); border-radius:var(--radius); padding:28px; }
.compare-card h3{ font-size:19px; margin-bottom:12px; }
.compare-card ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.compare-card li{ font-size:13.5px; color:var(--ink-soft); display:flex; gap:8px; }
.compare-card li::before{ content:"—"; color:var(--gold-deep); flex-shrink:0; }

@media (max-width: 900px){
  .mobile-toggle{ display:block; order:-1; flex:0 0 auto; }
  nav.wrap{ display:flex; align-items:center; }
  nav.wrap .brand{
    flex:1 1 auto; min-width:0; text-align:center;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  nav.wrap .btn-gold{ flex:0 0 auto; white-space:nowrap; padding:9px 14px; font-size:13.5px; }
  .nav-links{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--surface-solid);
    border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(31,36,48,0.08);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .nav-links.open{ max-height:400px; }
  .nav-links a{ padding:14px 24px; border-top:1px solid var(--line); }
  .offer-grid, .testi-grid, .who-grid{ grid-template-columns:1fr; }
  .why-grid, .stats-grid, .process-grid, .compare-grid, .gallery-grid{ grid-template-columns:1fr 1fr; }
  .calc-panel, .final-cta{ grid-template-columns:1fr; padding:26px; }
  .hero h1, .page-hero h1{ font-size:32px; }
  input, select, textarea{ font-size:16px; }
  nav.wrap{ gap:12px; }
  .brand{ font-size:18px; }
}
@media (max-width: 520px){
  .why-grid, .stats-grid, .process-grid, .gallery-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .cloud, .blades{ animation:none !important; }
}