:root{
    --dark:#1E1E1E;
    --charcoal:#343333;
    --forest:#1E5B15;
    --green:#3C8057;
    --sage:#5E8D71;
    --slate:#4A6052;
    --mist:#EFF3EE;
    --cream:#F7F8F5;
    --line:#DCE3DD;
    --white:#FFFFFF;
    --serif:'Cormorant Garamond', serif;
    --sans:'Inter', sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    background:var(--cream);
    color:var(--dark);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block;max-width:100%;height:auto;}
  a{color:inherit;}

  /* ---------- NAV ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px 6vw;
    background:rgba(247,248,245,0.72);
    backdrop-filter:blur(10px);
    border-bottom:1px solid transparent;
    transition:border-color .3s ease, background .3s ease;
  }
  nav.scrolled{border-color:var(--line);}
  .nav-mark{
    font-family:var(--serif);
    font-size:20px;letter-spacing:.06em;
    font-weight:500;color:var(--forest);
  }
  .nav-links{display:flex;gap:36px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);}
  .nav-links a{text-decoration:none;position:relative;padding-bottom:4px;}
  .nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--forest);transition:width .25s ease;}
  .nav-links a:hover::after{width:100%;}
  .nav-links a:hover{color:var(--forest);}
  @media (max-width:720px){ .nav-links{display:none;} }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    background:linear-gradient(155deg,#2b6b47 0%, #4d8f6a 55%, #6ba384 100%);
    overflow:hidden;
    display:flex;align-items:center;
    padding:120px 6vw 80px;
  }
  .hero::before{
    content:'';position:absolute;
    width:900px;height:900px;border-radius:50%;
    background:rgba(255,255,255,0.08);
    top:-320px;right:-260px;
  }
  .hero::after{
    content:'';position:absolute;
    width:520px;height:520px;border-radius:50%;
    background:rgba(30,91,21,0.18);
    bottom:-260px;left:-180px;
  }
  .hero-inner{
    position:relative;z-index:2;
    display:grid;grid-template-columns:1fr 1fr;gap:60px;
    max-width:1320px;margin:0 auto;width:100%;align-items:center;
  }
  .hero-mark{
    font-family:var(--serif);
    color:rgba(255,255,255,0.92);
    font-size:15px;letter-spacing:.5em;
    text-transform:uppercase;margin-bottom:36px;
    display:flex;align-items:center;gap:14px;
  }
  .hero-mark::before{content:'';width:34px;height:1px;background:rgba(255,255,255,0.6);}
  .hero-eyebrow{
    color:rgba(255,255,255,0.85);
    font-size:14px;letter-spacing:.08em;text-transform:uppercase;
    margin-bottom:18px;font-weight:500;
  }
  .hero h1{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(42px,5.4vw,74px);
    line-height:1.02;
    color:#fff;
    margin-bottom:26px;
    letter-spacing:-.01em;
  }
  .hero h1 em{font-style:italic;color:#EAF3E8;}
  .hero p.lede{
    color:rgba(255,255,255,0.88);
    font-size:17px;line-height:1.7;
    max-width:460px;margin-bottom:44px;
  }
  .hero-meta{display:flex;gap:44px;flex-wrap:wrap;}
  .hero-meta div{color:rgba(255,255,255,0.95);}
  .hero-meta span{
    display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:rgba(255,255,255,0.6);margin-bottom:8px;
  }
  .hero-meta strong{font-size:14px;font-weight:500;line-height:1.6;}
  .hero-visual{
    position:relative;
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 40px 80px -20px rgba(0,0,0,0.45);
    transform:rotate(1.2deg);
  }
  .hero-visual img{display:block;}
  .scroll-cue{
    position:absolute;bottom:36px;left:6vw;z-index:2;
    display:flex;align-items:center;gap:12px;
    color:rgba(255,255,255,0.75);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  }
  .scroll-cue .line{width:1px;height:38px;background:rgba(255,255,255,0.5);position:relative;overflow:hidden;}
  .scroll-cue .line::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:#fff;animation:scrollLine 1.8s ease-in-out infinite;}
  @keyframes scrollLine{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr;}
    .hero-visual{order:-1;transform:none;}
  }

  /* ---------- SECTION SCAFFOLDING ---------- */
  section{position:relative;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 6vw;}
  .section-pad{padding:130px 0;}
  .eyebrow{
    display:flex;align-items:center;gap:14px;
    font-size:12px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--forest);font-weight:600;margin-bottom:22px;
  }
  .eyebrow::before{content:'';width:28px;height:1px;background:var(--forest);}
  h2.section-title{
    font-family:var(--serif);
    font-weight:500;
    font-size:clamp(32px,3.6vw,50px);
    line-height:1.08;
    color:var(--dark);
    max-width:760px;
    margin-bottom:20px;
  }
  p.section-intro{
    font-size:16.5px;line-height:1.75;color:var(--charcoal);
    max-width:640px;
  }
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1;transform:translateY(0);}

  .frame{
    border-radius:18px;overflow:hidden;
    border:1px solid var(--line);
    box-shadow:0 30px 60px -30px rgba(30,60,40,0.25);
    background:#fff;
  }
  .frame img{width:100%;}

  .caption-row{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-top:18px;padding-top:0;
    font-size:12.5px;color:var(--slate);letter-spacing:.02em;
  }
  .caption-row .tag{
    font-weight:600;color:var(--forest);letter-spacing:.08em;text-transform:uppercase;font-size:11px;
  }

  /* ---------- OVERVIEW / PROBLEM / SOLUTION ---------- */
  .brief{background:var(--white);}
  .brief-grid{
    display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
    background:var(--line);
    border:1px solid var(--line);
    border-radius:18px;overflow:hidden;
    margin-top:50px;
  }
  .brief-cell{background:#fff;padding:44px 40px;}
  .brief-cell.wide{grid-column:1/-1;background:var(--mist);}
  .brief-cell h3{
    font-family:var(--serif);font-size:26px;font-weight:500;color:var(--forest);margin-bottom:16px;
  }
  .brief-cell p{font-size:15.5px;line-height:1.75;color:var(--charcoal);}
  .brief-cell ul{margin-top:14px;padding-left:18px;color:var(--charcoal);font-size:15px;line-height:1.9;}
  @media (max-width:760px){ .brief-grid{grid-template-columns:1fr;} }

  /* ---------- PROCESS ---------- */
  .process-section{background:var(--forest);color:#fff;}
  .process-section .eyebrow{color:#B9D9AE;}
  .process-section .eyebrow::before{background:#B9D9AE;}
  .process-section h2.section-title{color:#fff;}
  .process-section p.section-intro{color:rgba(255,255,255,0.78);}
  .process-frame{margin-top:56px;border:1px solid rgba(255,255,255,0.18);box-shadow:none;}

  /* ---------- PERSONAS ---------- */
  .personas-frame{margin-top:56px;}

  /* ---------- STYLE GUIDE ---------- */
  .style-section{background:var(--white);}
  .style-flex{
    display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;margin-top:56px;
  }
  .style-flex .frame{margin:0;}
  .style-copy p{font-size:15.5px;line-height:1.85;color:var(--charcoal);margin-bottom:22px;}
  .swatches{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;}
  .swatch{width:44px;height:44px;border-radius:10px;border:1px solid rgba(0,0,0,0.06);}
  @media (max-width:900px){ .style-flex{grid-template-columns:1fr;} }

  /* ---------- VISUAL DESIGN SCREENS ---------- */
  .screens-section{background:var(--mist);}
  .screen-block{margin-top:80px;}
  .screen-block:first-of-type{margin-top:56px;}
  .screen-block-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:26px;flex-wrap:wrap;gap:14px;
  }
  .screen-block-head h3{
    font-family:var(--serif);font-size:28px;font-weight:500;color:var(--dark);
  }
  .screen-num{font-size:12px;letter-spacing:.14em;color:var(--sage);text-transform:uppercase;font-weight:600;}

  /* ---------- CLOSING ---------- */
  .closing{
    background:linear-gradient(160deg,#1E5B15 0%, #234f2c 100%);
    color:#fff;text-align:center;padding:140px 6vw 100px;position:relative;overflow:hidden;
  }
  .closing::before{
    content:'';position:absolute;width:600px;height:600px;border-radius:50%;
    background:rgba(255,255,255,0.05);top:-260px;left:50%;transform:translateX(-50%);
  }
  .closing-mark{
    font-family:var(--serif);font-size:15px;letter-spacing:.5em;text-transform:uppercase;
    color:rgba(255,255,255,0.7);margin-bottom:26px;
  }
  .closing h2{
    font-family:var(--serif);font-weight:500;
    font-size:clamp(30px,4vw,48px);line-height:1.15;
    max-width:680px;margin:0 auto 30px;position:relative;z-index:2;
  }
  .closing p{
    color:rgba(255,255,255,0.75);font-size:16px;max-width:520px;margin:0 auto 44px;line-height:1.7;
    position:relative;z-index:2;
  }
  .closing-meta{
    display:flex;justify-content:center;gap:60px;flex-wrap:wrap;
    position:relative;z-index:2;
  }
  .closing-meta div span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-bottom:10px;}
  .closing-meta div strong{font-size:14.5px;font-weight:500;line-height:2;}

  footer{
    background:var(--dark);color:rgba(255,255,255,0.5);
    padding:30px 6vw;display:flex;justify-content:space-between;align-items:center;
    font-size:12.5px;letter-spacing:.03em;flex-wrap:wrap;gap:12px;
  }
  footer strong{color:rgba(255,255,255,0.85);font-weight:500;}