:root{
    /* dark is the default theme */
    --bone:#16130E;
    --bone-2:#1F1A12;
    --card:#211C15;
    --ink:#ECE5D8;
    --ink-soft:#B4AB9B;
    --ink-faint:#968D7F;
    --accent:#2FC251;
    --accent-deep:#42CE66;
    --line:#332E25;
    --panel-bg:#221E17;
    --panel-fg:#ECE5D8;
    --panel-accent:#42CE66;
    --serif:"Fraunces",Georgia,serif;
    --sans:"Hanken Grotesk",system-ui,sans-serif;
    --mono:"Spline Sans Mono",ui-monospace,monospace;
    --maxw:1180px;
  }
  [data-theme="light"]{
    --bone:#F2ECE1;
    --bone-2:#E8DFCF;
    --card:#EFE7D8;
    --ink:#1A1712;
    --ink-soft:#4A453B;
    --ink-faint:#7C7567;
    --accent:#01952a;
    --accent-deep:#037924;
    --line:#D6CCB8;
    --panel-bg:#1A1712;
    --panel-fg:#F2ECE1;
    --panel-accent:#00c237;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bone);
    color:var(--ink);
    font-family:var(--sans);
    font-size:18px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    position:relative;
    transition:background-color .3s ease,color .3s ease;
  }
  /* grain overlay */
  body::before{
    content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
  a{color:inherit;text-decoration:none}

  /* ---------- top bar ---------- */
  header.bar{
    position:sticky;top:0;z-index:50;
    backdrop-filter:blur(8px);
    background:color-mix(in srgb, var(--bone) 82%, transparent);
    border-bottom:1px solid var(--line);
  }
  .bar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:18px;padding-bottom:18px}
  .bar .name{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em}
  .bar nav{display:flex;gap:26px;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
  .bar nav a{color:var(--ink-faint);transition:color .25s}
  .bar nav a:hover{color:var(--accent-deep)}
  .bar-right{display:flex;align-items:center;gap:24px}
  @media(max-width:680px){.bar nav{display:none}}

  /* ---------- hero ---------- */
  .hero{padding:96px 0 64px;position:relative}
  .eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);display:inline-flex;align-items:center;gap:12px}
  .eyebrow::before{content:"";width:34px;height:1px;background:var(--accent-deep);display:inline-block}
  .hero h1{
    font-family:var(--serif);
    font-weight:340;
    font-size:clamp(44px,8vw,108px);
    line-height:.98;
    letter-spacing:-.025em;
    margin:26px 0 0;
    font-optical-sizing:auto;
  }
  .hero h1 em{font-style:italic;color:var(--accent)}
  .hero .lede{
    max-width:640px;margin-top:34px;font-size:clamp(19px,2.4vw,23px);
    line-height:1.5;color:var(--ink-soft);
  }
  .hero .contact{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px 28px;font-family:var(--mono);font-size:13.5px;letter-spacing:.02em}
  .hero .contact a{display:inline-flex;align-items:center;gap:7px;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .25s,color .25s}
  .hero .contact a:hover{color:var(--accent-deep);border-color:var(--accent-deep)}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:60px}
  .stat{padding:28px 22px 30px;border-right:1px solid var(--line)}
  .stat:last-child{border-right:none}
  .stat .n{font-family:var(--serif);font-weight:420;font-size:clamp(34px,4.4vw,52px);line-height:1;letter-spacing:-.02em}
  .stat .l{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-top:12px;line-height:1.4}
  @media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:none}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}}

  /* ---------- section heads ---------- */
  .section{padding:84px 0}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:8px}
  .sec-head h2{font-family:var(--serif);font-weight:360;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}
  .sec-head .count{font-family:var(--mono);font-size:13px;color:var(--ink-faint);letter-spacing:.06em}

  /* ---------- case studies ---------- */
  .case{
    border-top:1px solid var(--line);
    padding:54px 0;
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:48px;
  }
  .case:last-of-type{border-bottom:1px solid var(--line)}
  .case .idx{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
  .case h3{font-family:var(--serif);font-weight:380;font-size:clamp(28px,3.4vw,40px);line-height:1.04;letter-spacing:-.02em;margin:14px 0 18px}
  .case .meta{font-family:var(--mono);font-size:12.5px;line-height:1.9;color:var(--ink-faint);letter-spacing:.01em}
  .case .meta b{color:var(--ink-soft);font-weight:500}
  .tags{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
  .tag{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-deep);border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--card)}
  .case .body p{margin-bottom:16px;color:var(--ink-soft)}
  .case .body p .lead-word{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:2px}
  .metrics{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
  .metric{flex:1 1 132px;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:18px 18px 16px}
  .metric .mn{font-family:var(--serif);font-weight:440;font-size:clamp(26px,3.2vw,34px);line-height:1;letter-spacing:-.02em;color:var(--accent-deep)}
  .metric .ml{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-top:9px;line-height:1.4}
  @media(max-width:820px){.case{grid-template-columns:1fr;gap:24px}}

  /* ---------- more strip ---------- */
  .more{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);margin-top:6px}
  .more .item{padding:30px 26px;border-bottom:1px solid var(--line);border-left:1px solid var(--line)}
  .more .item:first-child{padding-left:0;border-left:none}
  .more .item h4{font-family:var(--serif);font-weight:440;font-size:21px;letter-spacing:-.01em;margin-bottom:7px}
  .more .item p{font-size:15.5px;color:var(--ink-soft);line-height:1.5}
  @media(max-width:820px){.more{grid-template-columns:1fr}.more .item{padding:26px 0;border-left:none}}

  /* ---------- approach ---------- */
  .approach{background:var(--panel-bg);color:var(--panel-fg);border-radius:8px;padding:clamp(40px,6vw,76px);margin-top:6px}
  .approach .eyebrow{color:var(--panel-accent)}
  .approach .eyebrow::before{background:var(--panel-accent)}
  .approach blockquote{font-family:var(--serif);font-weight:330;font-size:clamp(24px,3.6vw,40px);line-height:1.22;letter-spacing:-.02em;margin-top:26px;max-width:900px}
  .approach blockquote em{color:var(--panel-accent);font-style:italic}

  /* ---------- footer ---------- */
  footer{padding:80px 0 70px}
  footer h2{font-family:var(--serif);font-weight:360;font-size:clamp(30px,5vw,58px);letter-spacing:-.025em;line-height:1.02}
  footer h2 em{font-style:italic;color:var(--accent)}
  footer .links{margin-top:30px;display:flex;flex-wrap:wrap;gap:16px 28px;font-family:var(--mono);font-size:14px}
  footer .links a{border-bottom:1px solid var(--line);padding-bottom:4px;transition:color .25s,border-color .25s}
  footer .links a:hover{color:var(--accent-deep);border-color:var(--accent-deep)}
  footer .colophon{margin-top:54px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--ink-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:20px}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

  /* ---------- about ---------- */
  .about{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:start}
  .about .statement{font-family:var(--serif);font-weight:340;font-size:clamp(27px,3.6vw,44px);line-height:1.1;letter-spacing:-.02em;margin-top:22px}
  .about-body p{margin-bottom:18px;color:var(--ink-soft)}
  .about-body p:first-of-type{font-size:20px;line-height:1.5;color:var(--ink);margin-bottom:22px}
  .about-body .interests{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px}
  .about-body .interests-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);flex-basis:100%;margin-bottom:4px}
  @media(max-width:820px){.about{grid-template-columns:1fr;gap:22px}}

  /* ---------- case media ---------- */
  /* One frame for every image: change aspect-ratio in ONE place to restyle all. */
  .case-media{grid-column:1 / -1;aspect-ratio:16 / 9;margin-bottom:32px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card)}
  .case-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

  /* ---------- theme transition ---------- */
  header.bar,.approach,.metric,.tag,.case-media,.stat,.more .item{transition:background-color .3s ease,border-color .3s ease,color .3s ease}

  /* ---------- theme toggle ---------- */
  .theme-toggle{background:none;border:0;cursor:pointer;padding:4px;display:inline-flex;align-items:center;line-height:0}
  .theme-toggle .t-track{position:relative;width:46px;height:24px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
  .theme-toggle .t-knob{position:absolute;top:2px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;transition:left .25s ease,background .25s}
  [data-theme="light"] .theme-toggle .t-knob{left:25px}
  .theme-toggle .t-knob svg{width:11px;height:11px;color:#FBF8F1;display:block}
  .theme-toggle .ic-sun{display:none}
  [data-theme="light"] .theme-toggle .ic-moon{display:none}
  [data-theme="light"] .theme-toggle .ic-sun{display:block}
  .theme-toggle:hover .t-track{border-color:var(--accent)}

  /* ---------- scroll to top ---------- */
  .to-top{position:fixed;right:24px;bottom:24px;z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s,background-color .25s,border-color .25s,color .25s}
  .to-top.show{opacity:1;transform:none;pointer-events:auto}
  .to-top:hover{border-color:var(--accent);color:var(--accent)}
  .to-top svg{width:18px;height:18px}
  @media(prefers-reduced-motion:reduce){.to-top{transition:opacity .3s}}