:root{
  --bg-top:#08140d;
  --bg-mid:#0f2a1b;
  --bg-bot:#1c140e;
  --card:#0b2016cc;
  --card-solid:#0b2016;
  --text:#eef7f0;
  --muted:#b9d4c2;
  --brand:#62c97b;
  --brand2:#2ea964;
  --bark:#5b3a2a;
  --soil:#2a1b12;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --round:18px;
  --max:1500px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--text);
  overflow-x:hidden;

  /* let the pseudo-element handle the background */
  background: none;

  /* parallax var (set by JS) */
  --bg-parallax-y: 0px;
}

/* Parallax background layer */
body::before{
  content:"";
  position: fixed;
  inset: -12vh 0 -12vh 0; /* extra height so it can move without exposing edges */
  z-index: -1;
  pointer-events: none;

  background:url("/img/background.jpg"); 

  transform: translate3d(0, var(--bg-parallax-y), 0);
  will-change: transform;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.95}

/* Topbar */

/* HEADER WRAPPER */
.header {
  position: relative;
  z-index: 9999;
  overflow: visible;
}

.topbar,
.topbar-inner,
.nav,
.mobilemenu,
.mobilemenu__actions {
  position: relative;
  overflow: visible;
}

/* UTILITY BAR (TOP) */
.utilitybar{
  background: rgb(0, 0, 0);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.utilitybar__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 8px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}
.util-link{
  font-size: 13px;
  color: rgba(238,247,240,.92);
  display:inline-flex;
  gap: 8px;
  align-items:center;
  text-decoration:none;
}
.util-link:hover{ opacity:.95; text-decoration: none; text-underline-offset: 3px; }
.util-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(98,201,123,.9);
  box-shadow: 0 0 0 4px rgba(98,201,123,.14);
}
.util-strong{ font-weight: 900; }

.utilitybar__right{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* Main Topbar (your existing style, slightly refined) */
.topbar{
  padding: 12px 18px;
  background:  rgba(15, 37, 25, 0.336);
  backdrop-filter: blur(10px);

}

.topbar-inner{
  max-width: var(--max);
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;

}
/* Brand stays similar */
.brand{display:flex;align-items:center;gap:12px;min-width:240px}
.brand__logo{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.35))}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{font-weight:800;letter-spacing:.3px}
.brand__tagline{font-size:12px;color:var(--muted)}

/* Desktop nav */
.nav{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.nav__link{font-size:14px;color:var(--muted);padding:8px 10px;border-radius:999px}
.nav__link:hover{background:rgba(255,255,255,.06);color:var(--text)}
.nav__link.is-active{background:rgba(98,201,123,.14);border:1px solid rgba(98,201,123,.25);color:var(--text)}

/* Buttons (add small + full) */
.btn--small{ padding: 8px 12px; font-size: 13px; }
.btn--full{ width:100%; justify-content:center; }

/* Icon buttons for mobile */
.topbar__right{ display:none; align-items:center; gap:10px; }
.icon-btn{
  width: 60px; height: 60px;
  background: none;
  border: none;
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.icon-btn:active{ transform: translateY(1px); }

/* Language switcher */
.lang{
  display:inline-flex;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 3px;
  gap: 3px;
}
.lang__opt{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(238,247,240,.9);
  text-decoration:none;
}
.lang__opt:hover{ background: rgba(255,255,255,.06); }
.lang__opt.is-active{
  background: rgba(98,201,123,.18);
  border: 1px solid rgba(98,201,123,.28);
  color: var(--text);
}

/* MOBILE MENU PANEL */
.mobilemenu{
  background: rgba(8, 20, 13, 0.342);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.mobilemenu__nav{
  display:flex;
  flex-direction:column;
  padding: 10px 18px;
  gap: 6px;
}
.mobilemenu__link{
  padding: 12px 12px;
  border-radius: 14px;
  color: rgba(238,247,240,.92);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.mobilemenu__link:hover{
  border-color: rgba(98,201,123,.22);
  background: rgba(98,201,123,.06);
}
.mobilemenu__actions{
  padding: 10px 18px 18px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.mobilemenu__lang{ display:flex; justify-content:center; padding-top: 6px; }

/* Responsive behavior */
@media (max-width: 980px){
  .nav--desktop{ display:none; }
  .topbar__right{ display:flex; }
  .brand{ min-width: auto; }
  .util-link{
  font-size: 10px;
  }
}


/* Language dropdown (details/summary) */
.langdd{
  position: relative;
}

.langdd > summary{
  list-style: none;
}
.langdd > summary::-webkit-details-marker{ display:none; }

.langdd__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(238,247,240,.92);
  cursor: pointer;
  user-select:none;
}
.langdd__btn:hover{ background: rgba(255,255,255,.08); }

.langdd__code{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.langdd__chev{
  opacity: .85;
  transform: translateY(-1px);
}

.langdd[open] .langdd__chev{
  transform: rotate(180deg);
}

.langdd__menu{
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  width: 170px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(8,20,13,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  padding: 6px;
  z-index: 80;
}

.langdd__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(238,247,240,.92);
  text-decoration:none;
  border: 1px solid transparent;
}

.langdd__item:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(98,201,123,.22);
}

.langdd__item.is-active{
  background: rgba(98,201,123,.14);
  border-color: rgba(98,201,123,.28);
  color: var(--text);
}

.langdd__meta{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(185,212,194,.95);
}

/* Optional: close dropdown look on mobile */
@media (max-width: 980px){
  .langdd__menu{ right:auto; left:50%; transform: translateX(-50%); }
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
  color:#052112;
  font-weight:800;
  box-shadow:0 10px 30px rgba(98,201,123,.22);
  border:1px solid rgba(255,255,255,.12);
  margin-top: 2vh;
}
.btn--ghost{
  background:rgba(255,255,255,.06);
  color:var(--text);
  box-shadow:none;
  border:1px solid rgba(255,255,255,.12);
}
.btn:active{transform:translateY(1px)}

/* Layout helpers */
.page{max-width:var(--max);margin:0 auto;padding:26px 18px 80px}
.page--home{max-width:none;padding:0}
.stack{display:flex;flex-direction:column;gap:10px}
.stack--row{flex-direction:row;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.small{font-size:12px}

.h1{font-size:42px;line-height:1.02;margin:0 0 10px}
.h2{font-size:26px;margin:0 0 10px}
.h3{font-size:16px;margin:18px 0 8px}
.lead{
  font-size:18px;
  color:rgba(238,247,240,.9);
  max-width:60ch;
  margin: 0 auto;        /* ✅ centers the block */
  text-align: center;    /* ✅ centers the text */
}
.kicker{color:rgba(185,212,194,.95);letter-spacing:.18em;text-transform:uppercase;font-size:12px;margin:0 0 10px}

.card{
  background:rgba(11,32,22,.70);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--round);
  padding:18px;
  box-shadow:var(--shadow);
}
.card__h{margin:0 0 8px;font-size:18px}

.list{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:8px}
.list a{color:var(--text)}

.grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(12, 1fr);
}
.grid > *{grid-column:span 12}

/* Photo placeholders */
.photo-slot{
  margin-top:14px;
  border-radius:16px;
  min-height:160px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
}
.photo-slot--tall{min-height:320px}
.photo-slot::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45));
}
.photo-slot__label{
  position:absolute;
  bottom:10px;
  left:12px;
  z-index:1;
  font-size:12px;
  color:rgba(238,247,240,.95);
  background:rgba(0,0,0,.28);
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
}

/* HERO */
.hero{padding:42px 18px 26px; position:relative; overflow:hidden}
.hero::before{
  content:"";
  position:absolute;
  inset:-120px -40px auto -40px;
  height:420px;
  background:radial-gradient(600px 240px at 50% 50%, rgba(98,201,123,.22), transparent 60%);
  pointer-events:none;
}
.hero__inner{
  max-width: var(--max);
  margin: 0 auto;              /* centers the grid container */
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;       /* centers items horizontally */
  align-items: center;         /* centers items vertically (within row height) */
  text-align: center;
  gap: 18px;
}

.hero__copy {
    text-align: center;
  justify-content: center;
  text-align: center;
}
.stack--row {
    text-align: center;
  justify-content: center;
  text-align: center;
}
.stats{
  text-align: center;
  justify-content: center;
  text-align: center;
}
.center {
    text-align: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding-bottom: 2vh;
}
/* Video hero background */
.hero--video{
  padding:74px 18px 30px;
  min-height:clamp(560px, 92vh, 860px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero--video::before{display:none}
.hero__bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background-image:url('/img/hero-poster.svg');
  background-size:cover;
  background-position:center;
}
.hero__bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  filter:saturate(1.1) contrast(1.05) brightness(.82);
}

@media (prefers-reduced-motion: reduce){
  .hero__bg-video{display:none}
}
.hero__bg-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 25% 35%, rgba(98,201,123,.18), transparent 60%),
    linear-gradient(180deg, rgba(8,20,13,.88), rgba(8,20,13,.35) 42%, rgba(28,20,14,.88));
}

.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:baseline}
.stat__big{font-weight:900;font-size:18px;color:rgba(98,201,123,.95)}
.stat__small{font-size:12px;color:var(--muted)}

.tree-hero{
  width:min(420px, 90vw);
  aspect-ratio: 6/5;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.tree-hero__svg{width:100%;height:100%}
.tree-hero__badge{
  position:absolute;
  top:14px;
  left:14px;
  font-weight:900;
  background:rgba(0,0,0,.26);
  border:1px solid rgba(255,255,255,.12);
  padding:8px 12px;
  border-radius:999px;
}

.tree-line{
  fill:none;
  stroke:url(#bark);
  stroke-width:16;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation: draw 1.8s ease forwards;
}
.tree-line:nth-child(2){animation-delay:.05s}
.tree-line:nth-child(3){animation-delay:.12s}
.tree-line:nth-child(4){animation-delay:.18s}
.tree-line:nth-child(5){animation-delay:.24s}
.tree-line:nth-child(6){animation-delay:.30s}

.leaf{fill:rgba(98,201,123,.92);filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));opacity:0;transform-origin:center;animation: leafIn 1s ease forwards}
.leaf-cluster .leaf:nth-child(1){animation-delay:1.25s}
.leaf-cluster .leaf:nth-child(2){animation-delay:1.28s}
.leaf-cluster .leaf:nth-child(3){animation-delay:1.32s}
.leaf-cluster .leaf:nth-child(4){animation-delay:1.35s}
.leaf-cluster .leaf:nth-child(5){animation-delay:1.38s}
.leaf-cluster .leaf:nth-child(6){animation-delay:1.42s}
.leaf-cluster .leaf:nth-child(7){animation-delay:1.46s}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes leafIn{to{opacity:1;transform:scale(1)}}
.leaf{transform:scale(.85)}

.hero__scroll{max-width:var(--max);margin:18px auto 0;display:flex;gap:10px;align-items:center;justify-content:center;color:rgba(185,212,194,.92)}
.mouse{width:18px;height:28px;border:2px solid rgba(185,212,194,.85);border-radius:999px;position:relative}
.mouse::after{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:3px;height:6px;border-radius:999px;background:rgba(185,212,194,.85);animation: wheel 1.3s infinite}
@keyframes wheel{0%{opacity:.2;transform:translate(-50%,0)} 60%{opacity:1} 100%{opacity:.2;transform:translate(-50%,9px)}}
.hero__scrolltext{font-size:12px;letter-spacing:.06em}

/* Scroll tree */
/* Scroll tree */
.tree-page{
  position:relative;
  padding:0 0 80px;
  z-index:1;
  overflow: clip;
}

.tree-content{max-width:var(--max);margin:0 auto; padding:0 18px;
position: relative; z-index: 2;}
.branch{position:relative; padding:64px 0;}
.branch__card{
  width:min(520px, 100%);
  background:rgba(11,32,22,.76);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:18px;
  box-shadow:var(--shadow);
}
.branch--left .branch__card{margin-right:auto}
.branch--right .branch__card{margin-left:auto}

/* Branch connector line */
.branch{position:relative; padding:64px 0;}
.branch__card{position:relative; z-index:3;} /* ensure card stays on top */

/* Branch PNG connector under the card */
.branch::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:min(720px, 78vw);
  height:240px;                 /* tweak for your PNG height */
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  transform:translateY(-50%);
  pointer-events:none;
  z-index:2;                    /* above trunk, below card */
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.40));
  opacity:1;
}



.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.chip{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:var(--muted)}

.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Quote */
.quote{margin:12px 0 14px;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.22)}
.quote p{margin:0 0 8px;font-size:16px}
.quote footer{
  color: var(--muted);
  font-size: 12px;

  display: block;
  text-align: right;   /* ✅ end-justified */
  margin-top: 6px;     /* optional spacing */
}

/* Roots */
.roots{padding:70px 18px 0;max-width:var(--max);margin:0 auto;position:relative}
.roots__card{max-width:660px;margin:0 auto;background:rgba(11,32,22,.78);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:18px;box-shadow:var(--shadow)}


/* Before/After slider */
.ba{position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.10);aspect-ratio: 16/10;background:rgba(255,255,255,.04)}
.ba__img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.08)}
.ba__after{position:absolute;inset:0;background-size:cover;background-position:center;clip-path:inset(0 0 0 50%)}
.ba__range{position:absolute;inset:auto 10px 10px 10px;width:calc(100% - 20px)}
.ba__labels{position:absolute;inset:10px 12px auto 12px;display:flex;justify-content:space-between;font-size:12px;color:rgba(238,247,240,.9);text-shadow:0 6px 18px rgba(0,0,0,.55)}

/* Page hero */
.page-hero{padding:20px 0 10px}

/* CTA */
.cta{margin-top:26px}
.cta__inner{max-width:720px;margin:0 auto;text-align:center;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:22px;box-shadow:var(--shadow)}

/* Split layout */
.split{display:grid;gap:16px;grid-template-columns:1fr 1fr}

/* Form */
.form{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.field input,.field textarea{
  background:rgba(0,0,0,.25);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
}
.field input:focus,.field textarea:focus{border-color:rgba(98,201,123,.6);box-shadow:0 0 0 4px rgba(98,201,123,.15)}

.alert{margin:10px 0 0;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12)}
.alert--ok{background:rgba(98,201,123,.16)}
.alert--bad{background:rgba(255,120,120,.12)}

/* Footer */
.footer{
  position:relative;
  z-index:10;
  isolation:isolate;
  overflow: visible; /* important */
  padding-top: clamp(200px, 18vw, 260px);
  margin-top: 10vh;
}

.footer::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  top: calc(-1 * clamp(140px, 18vw, 260px));
  bottom:0;
  background: url("/img/bottom_roots.png") no-repeat center bottom / cover;
  pointer-events:none;
  z-index:0;
  filter: brightness(.85); /* tweak brightness 0.5–0.85 */
  opacity: .95; /* optional */
}



/* Dark glass overlay for readability */
.footer__overlay{
  position:absolute;
  left:0; right:0;
  top: 200px;
  bottom:0;
  background:rgba(8, 20, 13, 0.514);
  pointer-events:none;
  z-index:1;
}

.footer__inner,
.site-footer__bottom{
  position:relative; /* ✅ required for z-index to apply */
  z-index:2;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 18px;
  padding-right: 18px;
}

.footer__brandRow{
  display:flex;
  gap: 12px;
  align-items:center;
}

.footer__logo{
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

.footer__name{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
}

.footer__meta{
  font-size: 13px;
  line-height: 1.35;
  margin-top: 4px;
}

.footer__contact{
  list-style:none;
  padding:0;
  margin: 14px 0 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.footer__contact li{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  color: rgba(238,247,240,.92);
}

.footer__icon{
  width: 18px;
  margin-top: 2px;
  color: rgba(98,201,123,.95);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.footer a{
  color: rgba(238,247,240,.96);
  text-decoration: none;
}
.footer a:hover{
  color: #fff;
}


.footer__h{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 900;
}

.footer__links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
  color: rgba(185,212,194,.95);
}

/* Bottom bar */
.site-footer__bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  text-align:center;
  font-size: 0.85rem;
}

.footer__fineprint{
  margin: 0 0 10px;
  color: rgba(238,247,240,.88);
}


/* 3 equal columns on desktop */
.footer__inner{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items:start;
  padding-top: 18px;
  padding-bottom: 18px;
}
/* give columns consistent card-like spacing (optional but nice) */
.footer__col{
  min-width: 0;
}

.site-footer__bottom{
  padding-top: 14px;
  padding-bottom: 22px;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,.10);
  text-align:center;
  font-size: 0.85rem;
}

.footer__links a{
  display:inline-block;
}
/* brand column shouldn’t look “wider” than others */
.footer__brand .footer__contact{
  margin-top: 14px;
}

/* MOBILE: single centered column */
@media (max-width: 980px){

  .footer__inner{
    grid-template-columns: 1fr;
    text-align:center;
    justify-items:center;
    padding: 18px 18px 0;
    margin-top: 50px;
  }

  .footer__col{
    width: min(520px, 100%);
  }

  .footer__brandRow{
    justify-content:center;
  }

  .footer__contact{
    align-items:center;
  }

  .footer__contact li{
    justify-content:center;
    text-align:left; /* keeps icon + text readable */
  }

  .footer__links{
    align-items:center;
  }
  .footer__col.links {
    display: none !important;
  }
}


.footer__fineprint{margin:16px 0 0;color:rgba(185,212,194,.85);font-size:12px}



/* Falling leaves layer */
.leaf-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:40;
  overflow:hidden;
}
.leaf-fall{
  position:absolute;
  top:-60px;
  width:18px;
  height:18px;
  background:radial-gradient(circle at 30% 30%, rgba(98,201,123,.95), rgba(46,169,100,.75));
  border-radius: 100% 0 100% 0;
  transform:rotate(30deg);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
  opacity:.85;
  will-change:transform, top, left, opacity;
}

/* Responsive */
@media (min-width: 760px){
  .grid > *{grid-column:span 6}
}
@media (min-width: 1020px){
  .grid > *{grid-column:span 4}
}
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr;}
  .topbar{flex-wrap:wrap;justify-content:center}
  .brand{min-width:auto}
  .topbar__cta{width:100%;justify-content:center}
}

@media (max-width: 980px){
  .tree-backbone{display:block; opacity:.35;}
  .trunk{width:clamp(140px, 34vw, 220px);}
  .branch::before{opacity:.75;}
}

@media (max-width: 760px){
  .h1{font-size:34px}
  .split{grid-template-columns:1fr}
  .photo-grid{grid-template-columns:1fr}
}


main.page, main{
  position: relative;
  z-index: 2;
}



/* ----------------------------
   FULL-WIDTH LANDING SECTIONS
----------------------------- */
.section{
  position:relative;
  width:100%;
  padding: clamp(64px, 8vw, 110px) 0;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: 2vh;
  isolation: isolate;
}
.section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: var(--section-bg);
  opacity: var(--section-bg-opacity, 1);
}

.section__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}
.jobs-inner {
  max-width: 800px;
}
.section__head{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom: 22px;
}
.section--services{
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(98,201,123,.10), transparent 55%),
    linear-gradient(180deg, rgba(11,32,22,.20), rgba(11,32,22,.04));
}
.section--projects{
  background: var(--bg-top);
}
.section--jobs{
  background: linear-gradient(180deg, rgba(11,32,22,.14), rgba(11,32,22,.03));
}
.section--about{
  background: var(--bg-top);

}


/* Reusable panel */
.panel{
  padding:10px;
}

/* ----------------------------
   SERVICES: PHOTO CARD GRID
----------------------------- */
.services-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
.services-grid > *{ grid-column: span 12; }

@media (min-width: 760px){
  .services-grid > *{ grid-column: span 6; }
}
@media (min-width: 1020px){
  .services-grid > *{ grid-column: span 4; }
}

.media-card{
  position:relative;
  min-height: 330px;
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgb(179, 179, 179);
  box-shadow: var(--shadow);
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  outline:none;
  display:block;
}
.media-card::before{
  content:"";
  position:absolute;
  inset:0;
  /* subtle interactive spotlight (JS updates --mx/--my) */
  background: radial-gradient(280px 220px at var(--mx, 50%) var(--my, 40%),
    rgba(255,255,255,.14),
    rgba(255,255,255,0) 60%);
  opacity:.0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.media-card__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.62));
}
.media-card__content{
  position:absolute;
  inset:auto 0 0 0;
  padding: 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.media-card__title{
  margin:0;
  font-size:16px;
  font-weight:900;
  letter-spacing:.2px;
}
.media-card__desc{
  margin:0;
  color: rgba(238,247,240,.88);
  font-size: 13px;
  max-width: 52ch;
  transform: translateY(6px);
  opacity: .0;
  transition: transform .18s ease, opacity .18s ease;
}
.media-card__cta{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(238,247,240,.90);
  opacity: .85;
}
.media-card:hover,
.media-card:focus-visible{
  transform: translateY(-2px);
  border-color: rgb(12, 117, 38);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}
.media-card:hover::before,
.media-card:focus-visible::before{ opacity: .9; }
.media-card:hover .media-card__desc,
.media-card:focus-visible .media-card__desc{
  transform: translateY(0);
  opacity: 1;
}

/* Mobile: show title/description at the top and always visible */
@media (max-width: 759px) {
  .media-card {
    min-height: 260px; /* a bit shorter is usually nicer on phones */
  }

  /* Make the overlay darker at the top so text is readable */
  .media-card__overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.25));
  }

  /* Put content at the top instead of bottom */
  .media-card__content {
    inset: 0 0 auto 0;   /* top, left, right; not pinned to bottom */
    padding: 16px 16px 40px;
    justify-content: flex-start;
  }

  /* Description always visible on mobile */
  .media-card__desc {
    transform: none;
    opacity: 1;
  }

  /* Disable hover-only reveal on small screens */
  .media-card:hover .media-card__desc,
  .media-card:focus-visible .media-card__desc {
    transform: none;
    opacity: 1;
  }

  /* Optional: tone down the spotlight effect on mobile */
  .media-card::before {
    opacity: 0;          /* or display: none; if you want it gone */
  }
}


/* ----------------------------
   PROJECTS
----------------------------- */
.project{
  margin-top: 22px;
  padding: 18px;
}
.project__head{
  margin-bottom: 12px;
}
.project__title{
  margin:0 0 6px;
}

.project__grid{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px){
  .project__grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Clickable project shots */
.shot{
  appearance:none;
  border:none;
  padding:0;
  text-align:left;
  cursor:pointer;

  border-radius: 18px;
  overflow:hidden;
  min-height: 220px;

  border:1px solid rgb(179, 179, 179);
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  position:relative;
  box-shadow: 0 14px 40px rgba(0,0,0,.40);
  transition: transform .18s ease, border-color .18s ease;
}
.shot::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.55));
}
.shot__label{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:1;
  font-size:12px;
  color: rgba(238,247,240,.92);
  background: rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius: 999px;
}
.shot:hover,
.shot:focus-visible{
  transform: translateY(-2px);
  border-color: rgb(12, 117, 38);
  outline:none;
}

/* ----------------------------
   ABOUT LAYOUT
----------------------------- */
.about-grid{
  display:grid;
  gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  .about-grid{
    grid-template-columns: 1.2fr .8fr;
    align-items: stretch;
  }
}
.about-photo{
  border-radius: 22px;
  border:1px solid rgb(179, 179, 179);
  box-shadow: var(--shadow);
  background-size: cover;
  background-position: center;
  min-height: 320px;
}
.about-bio{
  margin: 12px 0 0;
  padding-left: 18px;
  color: rgba(238,247,240,.90);
}
.about-bio li{ margin: 8px 0; }

/* ----------------------------
   CTA SLAB
----------------------------- */
.cta-slab{
  border-radius: 26px;
  border:1px solid rgba(98,201,123,.28);
  background:
    radial-gradient(700px 380px at 30% 20%, rgba(98,201,123,.22), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
  padding: clamp(18px, 3.2vw, 28px);
  text-align:center;
}

/* ----------------------------
   LIGHTBOX
----------------------------- */
.lightbox{
  border:none;
  padding:0;
  width: min(1000px, 92vw);
  border-radius: 22px;
  background: rgba(0,0,0,.75);
  overflow:hidden;
}
.lightbox::backdrop{
  background: rgba(0,0,0,.65);
}
.lightbox__img{
  display:block;
  width:100%;
  height:auto;
  max-height: 86vh;
  object-fit: contain;
}
.lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:40px;
  height:40px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35);
  color: var(--text);
  cursor:pointer;
}


@media (max-width: 980px){ 

.kicker, h2 , p,  h3, .media-card__cta{
  text-align: center;
  justify-content: center;
  align-items: center;
}

}