:root{
    --loam:#3E4432;
    --loam-2:#4A5140;
    --parchment:#F8F6F0;
    --parchment-dim:#EDE8DC;
    --ink:#3E3B33;
    --oak:#C7A87C;
    --moss:#8FA080;
    --clay:#A98B5E;
    --rule: rgba(248,246,240,0.18);
    --rule-dark: rgba(62,59,51,0.13);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--parchment);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:500;
    margin:0;
    letter-spacing:-0.01em;
  }
  .eyebrow{
    font-size:0.72rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--moss);
  }
  a{color:inherit;}
  button{font-family:inherit;}

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:var(--parchment);
    border-bottom:1px solid var(--rule-dark);
  }
  .nav-inner{
    max-width:1120px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px;
  }
  .brand{display:flex; align-items:center;}
  .logo-full{height:56px; width:auto; display:block;}

  .tabs{
    display:flex; gap:2px;
    background:var(--parchment-dim);
    border-radius:999px;
    padding:3px;
  }
  .tab-btn{
    border:none; background:transparent; cursor:pointer;
    padding:9px 18px;
    font-size:0.82rem; font-weight:600;
    letter-spacing:0.02em;
    color:var(--ink); opacity:0.55;
    border-radius:999px;
    transition:opacity .2s ease, background .2s ease, color .2s ease;
  }
  .tab-btn[aria-selected="true"]{
    background:var(--loam); color:var(--parchment); opacity:1;
  }
  .tab-btn:focus-visible{outline:2px solid var(--oak); outline-offset:2px;}

  @media (max-width:640px){
    .nav-inner{flex-direction:column; gap:12px; padding:14px 20px;}
    .logo-full{height:46px;}
  }

  /* ---------- PANELS ---------- */
  .panel{display:none;}
  .panel.active{display:block; animation:fade .5s ease both;}
  @keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}
  @media (prefers-reduced-motion: reduce){
    .panel.active{animation:none;}
  }

  /* ---------- HERO ---------- */
  .hero{
    background:var(--loam); color:var(--parchment);
    position:relative; overflow:hidden;
  }
  .hero-inner{
    max-width:1120px; margin:0 auto;
    padding:88px 28px 96px;
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px;
    align-items:center; position:relative; z-index:2;
  }
  .hero .eyebrow{color:var(--oak);}
  .hero h1{
    font-size:clamp(2.1rem, 4.4vw, 3.4rem);
    color:var(--parchment);
    margin-top:14px;
    max-width:11ch;
  }
  .hero p.lede{
    margin-top:20px; max-width:46ch;
    color:var(--parchment-dim);
    font-size:1.05rem;
  }
  .ring-wrap{position:relative; display:flex; align-items:center; justify-content:center; min-height:280px;}
  .ring-wrap svg{width:100%; max-width:340px; height:auto;}
  .ring-wrap circle{
    fill:none; stroke:var(--oak); stroke-width:1;
    stroke-dasharray:1000; stroke-dashoffset:1000;
    animation:draw 1.8s ease forwards;
  }
  .ring-wrap circle:nth-child(2){stroke:var(--moss); animation-delay:.15s;}
  .ring-wrap circle:nth-child(3){stroke:var(--parchment-dim); opacity:0.5; animation-delay:.3s;}
  .ring-wrap circle:nth-child(4){stroke:var(--oak); opacity:0.35; animation-delay:.45s;}
  .ring-wrap .core{fill:var(--oak); stroke:none; animation:none; opacity:1;}
  @keyframes draw{to{stroke-dashoffset:0;}}
  @media (prefers-reduced-motion: reduce){
    .ring-wrap circle{animation:none; stroke-dashoffset:0;}
  }
  @media (max-width:820px){
    .hero-inner{grid-template-columns:1fr; padding:56px 22px 64px;}
    .ring-wrap{order:-1; min-height:180px;}
    .ring-wrap svg{max-width:200px;}
  }

  /* ---------- SECTIONS ---------- */
  section{max-width:1120px; margin:0 auto; padding:64px 28px;}
  .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:20px; border-bottom:1px solid var(--rule-dark); padding-bottom:18px; margin-bottom:36px;}
  .section-head h2{font-size:1.5rem;}

  /* empty state */
  .empty-state{
    border:1px dashed rgba(28,33,23,0.28);
    border-radius:4px;
    padding:48px 32px;
    text-align:center;
    background:rgba(107,127,93,0.06);
  }
  .empty-state .mark-small{width:auto; height:40px; margin:0 auto 16px; opacity:0.85; display:block;}
  .empty-state p{max-width:46ch; margin:8px auto 0; color:var(--ink); opacity:0.8;}
  .empty-state .note{font-size:0.85rem; margin-top:14px; opacity:0.6;}

  /* principle cards */
  .grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark);}
  .grid-3 .card{background:var(--parchment); padding:28px 26px;}
  .card .num{font-family:'Fraunces', serif; font-size:0.78rem; color:var(--oak); font-weight:600;}
  .card h3{font-size:1.08rem; margin-top:10px;}
  .card p{margin-top:10px; font-size:0.92rem; opacity:0.78;}
  @media (max-width:760px){.grid-3{grid-template-columns:1fr;}}

  /* criteria list (owners) */
  .criteria{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dark);}
  .criteria li{
    display:grid; grid-template-columns:120px 1fr; gap:24px;
    padding:20px 0; border-bottom:1px solid var(--rule-dark);
    font-size:0.95rem;
  }
  .criteria .tag{
    font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--moss); font-weight:600; padding-top:2px;
  }
  @media (max-width:600px){
    .criteria li{grid-template-columns:1fr; gap:6px;}
  }

  /* process rings */
  .rings-process{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .ring-step{position:relative; padding-top:8px;}
  .ring-step .ringnum{
    width:38px; height:38px; border-radius:50%;
    border:1px solid var(--oak);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-size:0.85rem; color:var(--oak);
    margin-bottom:14px;
  }
  .ring-step h3{font-size:1rem;}
  .ring-step p{margin-top:8px; font-size:0.88rem; opacity:0.75;}
  @media (max-width:820px){.rings-process{grid-template-columns:1fr 1fr; row-gap:32px;}}
  @media (max-width:520px){.rings-process{grid-template-columns:1fr;}}

  /* CTA */
  .cta-band{
    background:var(--loam); color:var(--parchment);
  }
  .cta-inner{
    max-width:1120px; margin:0 auto; padding:64px 28px;
    display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
  .cta-inner h2{color:var(--parchment); font-size:1.7rem; max-width:16ch;}
  .cta-inner p{color:var(--parchment-dim); margin-top:10px; max-width:38ch;}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--oak); color:var(--loam);
    padding:14px 26px; border-radius:999px;
    font-weight:600; font-size:0.92rem; text-decoration:none;
    transition:transform .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn:focus-visible{outline:2px solid var(--parchment); outline-offset:3px;}
  .placeholder-note{font-size:0.72rem; color:var(--parchment-dim); opacity:0.6; margin-top:10px;}

  footer{
    padding:32px 28px; text-align:center;
    font-size:0.8rem; color:var(--ink); opacity:0.55;
  }