:root{
    --bg:#10130f;
    --bg2:#181c14;
    --paper:#f3f0e6;
    --sub:#a7ab9b;
    --moss:#7e9b5a;
    --moss2:#9cbb6f;
    --clay:#c98a55;
    --line:#2c3127;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:"Zen Kaku Gothic New",sans-serif;background:var(--bg);color:var(--paper);font-weight:300;line-height:2;-webkit-font-smoothing:antialiased;letter-spacing:.02em;overflow-x:hidden}
  .serif{font-family:"Fraunces",serif}
  .mincho{font-family:"Shippori Mincho",serif}
  .wrap{max-width:1140px;margin:0 auto;padding:0 32px}
  @media(max-width:640px){.wrap{padding:0 22px}}

  header{position:fixed;inset:0 0 auto 0;z-index:60;transition:.4s}
  header.scrolled{background:rgba(16,19,15,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  nav{display:flex;align-items:center;justify-content:space-between;height:82px}
  .logo{font-family:"Fraunces",serif;font-weight:500;font-size:24px;letter-spacing:.04em;color:var(--paper)}
  .logo b{color:var(--moss2);font-style:italic;font-weight:400}
  .navlinks{display:flex;gap:36px;align-items:center;list-style:none}
  .navlinks a{text-decoration:none;color:var(--paper);font-size:13px;letter-spacing:.08em;opacity:.85;transition:.25s}
  .navlinks a:hover{opacity:1;color:var(--moss2)}
  .navcta{border:1px solid var(--moss);color:var(--moss2)!important;padding:10px 22px;border-radius:40px;opacity:1!important;transition:.35s}
  .navcta:hover{background:var(--moss);color:var(--bg)!important;border-color:var(--moss)}
  .burger{display:none;background:none;border:none;color:var(--paper);font-size:22px;cursor:pointer}
  @media(max-width:860px){.navlinks{display:none}.burger{display:block}}

  /* organic background */
  .leaf{position:absolute;border-radius:0 100% 0 100%;background:radial-gradient(circle at 30% 30%,var(--moss),transparent 70%);opacity:.13;filter:blur(8px);pointer-events:none}

  /* hero */
  .hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding:120px 0 80px}
  .hero .l1{width:520px;height:520px;top:-120px;right:-140px;animation:drift 18s ease-in-out infinite}
  .hero .l2{width:300px;height:300px;bottom:-60px;left:-100px;animation:drift 22s ease-in-out infinite reverse}
  @keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(30px,-40px) rotate(12deg)}}
  .hero-inner{position:relative;z-index:2}
  .hero .eye{font-family:"Fraunces",serif;font-style:italic;font-size:20px;color:var(--clay);letter-spacing:.03em;opacity:0;animation:fade 1s .2s forwards}
  .hero h1{font-family:"Shippori Mincho",serif;font-weight:500;font-size:clamp(36px,6.6vw,82px);line-height:1.42;margin:24px 0;letter-spacing:.03em;max-width:14em}
  .hero h1 .l{display:block;overflow:hidden}
  .hero h1 .l i{display:inline-block;font-style:normal;transform:translateY(120%);animation:up 1.1s cubic-bezier(.16,1,.3,1) forwards}
  .hero h1 .l:nth-child(1) i{animation-delay:.4s}
  .hero h1 .l:nth-child(2) i{animation-delay:.55s}
  .hero h1 .l:nth-child(3) i{animation-delay:.7s}
  .hero h1 em{font-style:normal;color:var(--moss2);font-family:"Fraunces",serif}
  .hero p{max-width:460px;color:var(--sub);font-size:15.5px;opacity:0;animation:fade 1s 1.1s forwards}
  @keyframes up{to{transform:translateY(0)}}
  @keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  /* sprout svg signature */
  .sprout{position:absolute;right:6%;bottom:8%;width:160px;z-index:2;opacity:0;animation:fade 1.4s 1.4s forwards}
  .sprout path,.sprout line{stroke:var(--moss2);stroke-width:1.4;fill:none;stroke-linecap:round}
  .sprout .grow{stroke-dasharray:300;stroke-dashoffset:300;animation:draw 2.4s 1.5s forwards}
  .sprout .leafp{fill:var(--moss);stroke:none;opacity:0;animation:fade 1s 3s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}
  @media(max-width:900px){.sprout{display:none}}

  section{padding:130px 0;position:relative}
  .eyebrow{font-family:"Fraunces",serif;font-style:italic;color:var(--clay);font-size:18px;margin-bottom:14px}
  .h2{font-family:"Shippori Mincho",serif;font-weight:500;font-size:clamp(28px,4.4vw,46px);line-height:1.5;letter-spacing:.03em}

  /* philosophy */
  .philo{background:var(--bg2);border-radius:0}
  .philo .grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
  .philo .lead{font-family:"Shippori Mincho",serif;font-size:clamp(20px,2.6vw,28px);line-height:2.2;font-weight:500}
  .philo .lead em{color:var(--moss2);font-style:normal}
  .philo .body{color:var(--sub);font-size:15px;margin-top:26px}
  .ring{aspect-ratio:1;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;position:relative}
  .ring::before{content:"";position:absolute;inset:14%;border:1px solid var(--line);border-radius:50%}
  .ring::after{content:"";position:absolute;inset:30%;border:1px dashed #3a4030;border-radius:50%;animation:spin 30s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .ring .c{font-family:"Fraunces",serif;font-style:italic;font-size:clamp(20px,3vw,30px);color:var(--moss2);text-align:center;line-height:1.3;z-index:2}
  @media(max-width:820px){.philo .grid{grid-template-columns:1fr;gap:46px}.ring{max-width:320px;margin:0 auto}}

  /* services accordion */
  .svc{border-top:1px solid var(--line)}
  .srow{border-bottom:1px solid var(--line);padding:42px 0;display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:start;cursor:pointer;transition:.4s}
  .srow:hover{padding-left:20px}
  .srow .idx{font-family:"Fraunces",serif;font-style:italic;color:var(--clay);font-size:18px;padding-top:6px}
  .srow h3{font-family:"Shippori Mincho",serif;font-weight:500;font-size:clamp(20px,2.6vw,28px);margin-bottom:6px}
  .srow .en{font-family:"Fraunces",serif;font-style:italic;color:var(--sub);font-size:14px}
  .srow .desc{color:var(--sub);font-size:14.5px;max-height:0;overflow:hidden;transition:.5s;opacity:0}
  .srow.open .desc{max-height:120px;opacity:1;margin-top:16px}
  .srow .plus{font-size:26px;color:var(--moss2);transition:.4s;font-weight:300}
  .srow.open .plus{transform:rotate(45deg)}
  @media(max-width:680px){.srow{grid-template-columns:auto 1fr;gap:16px}.srow .plus{grid-column:2;justify-self:end}}

  /* approach cards */
  .appr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px}
  .acard{border:1px solid var(--line);border-radius:18px;padding:38px 30px;transition:.4s;background:rgba(255,255,255,.012)}
  .acard:hover{border-color:var(--moss);transform:translateY(-6px)}
  .acard .ic{width:50px;height:50px;border-radius:14px;background:rgba(126,155,90,.14);display:grid;place-items:center;margin-bottom:22px;color:var(--moss2)}
  .acard h4{font-family:"Shippori Mincho",serif;font-weight:500;font-size:20px;margin-bottom:12px}
  .acard p{color:var(--sub);font-size:14px}
  @media(max-width:780px){.appr-grid{grid-template-columns:1fr}}

  /* quote band */
  .band{text-align:center;background:var(--bg2)}
  .band blockquote{font-family:"Shippori Mincho",serif;font-weight:500;font-size:clamp(24px,4vw,42px);line-height:1.9;max-width:18em;margin:0 auto}
  .band blockquote em{color:var(--moss2);font-style:normal}
  .band .src{font-family:"Fraunces",serif;font-style:italic;color:var(--sub);margin-top:30px;font-size:15px}

  /* cta */
  .cta{text-align:center;position:relative;overflow:hidden}
  .cta .l3{width:400px;height:400px;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.1}
  .cta .serif-big{font-family:"Fraunces",serif;font-style:italic;font-size:clamp(40px,7vw,84px);line-height:1.1;position:relative}
  .cta p{color:var(--sub);max-width:460px;margin:26px auto 42px;position:relative}
  .btn{display:inline-flex;align-items:center;gap:14px;background:var(--moss);color:var(--bg);text-decoration:none;padding:19px 42px;border-radius:50px;font-size:14px;letter-spacing:.08em;font-weight:500;transition:.4s;position:relative}
  .btn:hover{gap:24px;background:var(--moss2)}

  footer{border-top:1px solid var(--line);padding:64px 0 40px}
  .fwrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:36px}
  footer .logo{margin-bottom:14px}
  footer p{color:var(--sub);font-size:13.5px;max-width:250px}
  footer .cols{display:flex;gap:60px}
  footer ul{list-style:none}
  footer li{margin-bottom:13px}
  footer .ttl{font-family:"Fraunces",serif;font-style:italic;color:var(--moss2);font-size:13px;margin-bottom:8px}
  footer a{color:var(--sub);text-decoration:none;font-size:13px}
  footer a:hover{color:var(--moss2)}
  .cp{margin-top:50px;font-family:"Fraunces",serif;font-style:italic;color:var(--sub);font-size:13px}
  .reveal{opacity:0;transform:translateY(36px);transition:1s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.sprout .grow{stroke-dashoffset:0}}