/* Fern Systems AI — Natural x Modern Tech Aesthetic */
:root{
  --bg:#E7EADF;           /* light sage */
  --surface:#F5F6F2;      /* light surface */
  --card:#EEF1E7;
  --ink:#1C2320;          /* deep neutral */
  --muted:#5F6D63;        /* muted text */
  --primary:#1A422B;      /* deep green (updated) */
  --accent:#6B8F71;       /* sage */
  --ring:#b9c7b8;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.55 'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
}
img{max-width:100%; display:block}

/* Utilities */
.container{width:min(1120px,92%); margin-inline:auto}
.container.narrow{width:min(860px,92%)}
.muted{color:var(--muted)}
.link-inline{color:#e8efe7; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(12px); background:color-mix(in oklab,var(--bg) 85%,white 15%); border-bottom:1px solid #e0e6dd; overflow:visible}
.nav{display:flex; align-items:center; gap:28px; padding:14px 0}
.logo{font-weight:800; letter-spacing:.2px; color:var(--ink); text-decoration:none; display:flex; align-items:center; height:34px}
.logo span{color:var(--primary)}
.logo-img{height:150px; width:auto; display:block}
.nav-links{margin-left:auto; display:flex; align-items:center; gap:22px}
.nav-links a{color:var(--ink); text-decoration:none; font-weight:500}
.nav-links .pill{padding:.45rem .9rem; border:1px solid var(--primary); border-radius:999px}
.hamburger{display:none; margin-left:auto; background:none; border:0; padding:8px; cursor:pointer}
.hamburger span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0}
.mobile-menu{display:none; flex-direction:column; gap:8px; padding:12px 4%; background:var(--surface); border-bottom:1px solid #e0e6dd}
.mobile-menu a{text-decoration:none; color:var(--ink); padding:8px 0}

/* Hero */
.hero{padding:48px 0 24px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center}
.hero-copy h1{font-size: clamp(36px, 4.6vw, 64px); line-height:1.05; margin:0 0 14px}
.hero-copy h1 em{font-family:'Playfair Display',serif; font-style:italic; font-weight:600; color:var(--accent); display:inline-block; padding:0 .2ch}
.lede{font-size:1.1rem; color:var(--muted); margin:0 0 18px}
.cta-row{display:flex; gap:12px}
.hero-media img{border-radius:20px; aspect-ratio:4/3; object-fit:cover; box-shadow:0 20px 40px rgba(25,40,32,.18)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:.8rem 1.1rem; border-radius:999px; text-decoration:none; font-weight:600; cursor:pointer}
.btn-primary{background:var(--primary); color:#E7EADF; border:1px solid color-mix(in oklab,var(--primary) 92%,black 8%)}
.btn-outline{background:transparent; color:var(--primary); border:1px solid var(--primary)}
.btn-ghost{background:transparent; color:var(--primary); border:1px solid #d7e1d6}
.btn.block{width:100%}

/* Stats strip */
.stats{background:var(--primary); color:#e8efe7; padding:18px 0; margin-top:24px}
.stats-row{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:center}
.stat{display:flex; flex-direction:column; gap:2px}
.stat .num{font-size:1.9rem; font-weight:800}
.stat .label{opacity:.8}
.stat.cta{align-items:flex-end}
.stat.cta p{margin:0 0 6px 0; opacity:.95}

/* Sections */
.section{padding:64px 0}
.section-head{display:flex; align-items:end; justify-content:space-between; gap:20px}
.section h2{font-size: clamp(28px, 3.4vw, 42px); margin:0 0 8px}
.subhead{color:var(--muted); margin-top:-6px}

/* Cards */
.cards{display:grid; gap:16px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card); border:1px solid #dfe6db; border-radius:var(--radius); padding:22px; box-shadow:0 10px 24px rgba(25,40,32,.06)}
.card .icon{font-size:24px; margin-bottom:8px}
.card h3{margin:0 0 6px}
.card p{margin:0 0 10px; color:var(--muted)}

/* Work */
.light-grid{background:
  radial-gradient(1200px 400px at 100% -200px, rgba(111,141,119,.18), transparent 60%),
  radial-gradient(800px 300px at -100px 600px, rgba(31,51,41,.08), transparent 60%)}
.work-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.work-card{background:var(--surface); border:1px solid #e0e6dd; border-radius:var(--radius); padding:22px}
.work-card h3{margin:0 0 6px}
.work-card p{margin:0 0 12px; color:var(--muted)}

/* Steps */
/* Timeline-style How It Works */
.process{position:relative}
.process-panel{background:color-mix(in oklab, var(--primary) 96%, black 4%); color:#e9efe8; border-radius:20px; padding:28px; box-shadow:0 24px 46px rgba(25,40,32,.22)}
.process-panel h2{text-align:center; color:#e9efe8; margin:0 0 4px}
.process .subhead.light{text-align:center; color:rgba(233,239,232,.85); margin:0 0 18px}
.timeline{display:grid; gap:16px; margin-top:8px}
.node{display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:center; position:relative}
.node:not(:last-child)::after{content:""; position:absolute; left:24px; top:44px; bottom:-16px; width:2px; background:rgba(233,239,232,.35)}
.dot{width:36px; height:36px; border-radius:999px; background:#fff; color:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:800; border:2px solid rgba(255,255,255,.9); box-shadow:0 10px 22px rgba(0,0,0,.18); margin-left:6px}
.step-card{background:color-mix(in oklab, var(--primary) 85%, black 15%); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px 16px}
.step-card h3{margin:0 0 6px; color:#ecf2ea; font-size:1.05rem}
.step-card p{margin:0; color:rgba(233,239,232,.85)}

/* CTA block */
.cta-block{padding:72px 0}
.cta-box{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; background:var(--card); border:1px solid #dfe6db; border-radius:20px; padding:22px}
.cta-box.embed{align-items:stretch}
.cta-copy h2{margin:0 0 8px}
.cta-copy .details{color:var(--muted)}
.cta-form{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cta-form label{display:grid; gap:6px; font-size:.9rem; color:var(--muted)}
.cta-form input{padding:.8rem .9rem; border-radius:10px; border:1px solid #d4ddcf; background:#fbfcf9; outline-color:var(--ring)}
.cta-form .btn{grid-column:1 / -1}
.form-note{margin:4px 0 0; color:var(--muted)}

/* Calendly embed */
.calendly-wrap{height:clamp(660px, 72vh, 860px)}
.calendly-inline-widget{min-width:320px; width:100%; height:100%; background:#fff; border:1px solid #e0e6dd; border-radius:12px; overflow:hidden}

/* Footer */
.site-footer{padding:36px 0 28px; background:color-mix(in oklab,var(--bg) 70%, white 30%); border-top:1px solid #e0e6dd}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:16px}
.footer-grid .logo{font-weight:800}
.ftr span{color:var(--primary)}
.foot-col{display:flex; flex-direction:column; gap:6px}
.foot-col a{text-decoration:none; color:var(--ink); opacity:.9}
.legal{margin-top:16px; color:var(--muted); font-size:.9rem}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .cta-box{grid-template-columns:1fr}
  .calendly-wrap{height:760px}
  .stats-row{grid-template-columns:1fr 1fr; row-gap:12px}
  .cards.three{grid-template-columns:1fr 1fr}
  .work-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 680px){
  .nav-links{display:none}
  .hamburger{display:block}
  .mobile-menu{display:none}
  .mobile-menu:not([hidden]){display:flex}
  .cards.three{grid-template-columns:1fr}
  .cta-form{grid-template-columns:1fr}
  .calendly-wrap{height:820px}
  .stats-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}