:root{
    --bg:#FBFAF8;
    --surface:#FFFFFF;
    --surface-soft:#F6F4EF;
    --ink:#15171C;
    --ink-soft:#3B414C;
    --slate:#5B6675;
    --faint:#97A0AD;
    --line:#E7E6E1;
    --line-soft:#F0EEE9;
    --accent:#2C5FBE;
    --accent-deep:#1F4CA0;
    --dot:#BC5B33;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);color:var(--ink);
    font-family:'Plus Jakarta Sans',system-ui,sans-serif;
    font-weight:400;line-height:1.65;font-size:17px;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1140px;margin:0 auto;padding:0 6%;}
  .eyebrow{
    font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--slate);font-weight:600;display:inline-flex;align-items:center;gap:9px;
  }
  .eyebrow .ed{width:6px;height:6px;border-radius:50%;background:var(--dot);}
  em{font-style:italic;}
  a{color:inherit;text-decoration:none;}

  /* ---------- NAV ---------- */
  nav{
    position:sticky;top:0;z-index:60;
    background:rgba(251,250,248,.85);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px;}
  .wm{font-size:18px;font-weight:600;letter-spacing:.01em;color:var(--ink);white-space:nowrap;}
  .wm em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;}
  .wm .wm-studio{color:var(--slate);font-weight:500;}
  .nav-links{display:flex;align-items:center;gap:30px;list-style:none;}
  .nav-links a{font-size:14.5px;color:var(--ink-soft);font-weight:500;transition:color .2s;}
  .nav-links a:hover{color:var(--ink);}
  .nav-cta{
    font-size:14px;font-weight:600;color:#fff;background:var(--ink);
    padding:10px 18px;border-radius:9px;transition:background .2s;white-space:nowrap;
  }
  .nav-cta:hover{background:#000;}
  .nav-actions{display:flex;align-items:center;gap:10px;}
  .nav-cta-2{font-size:14px;font-weight:600;color:var(--ink-soft);padding:10px 14px;border-radius:9px;white-space:nowrap;transition:color .2s;}
  .nav-cta-2:hover{color:var(--ink);}
  .mobile-menu-btn{display:none;appearance:none;border:1px solid var(--line);background:var(--surface);border-radius:10px;width:42px;height:42px;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:var(--ink);cursor:pointer;}
  .mobile-menu-btn span{width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s;}
  .mobile-panel{display:none;border-top:1px solid var(--line);background:rgba(251,250,248,.96);backdrop-filter:blur(10px);padding:16px 6% 20px;}
  .mobile-panel a{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:15px;font-weight:600;color:var(--ink-soft);}
  .mobile-panel a:hover{color:var(--ink);}
  .mobile-panel .mobile-primary{margin-top:14px;justify-content:center;border:0;border-radius:10px;background:var(--ink);color:#fff;padding:13px 16px;}
  .mobile-panel .mobile-secondary{justify-content:center;border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-top:10px;background:var(--surface);}
  nav.is-open .mobile-panel{display:block;}
  nav.is-open .mobile-menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  nav.is-open .mobile-menu-btn span:nth-child(2){opacity:0;}
  nav.is-open .mobile-menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  @media(max-width:860px){
    nav .wrap{height:68px;gap:14px;}
    .wm{font-size:17px;}
    .nav-links,.nav-actions{display:none;}
    .mobile-menu-btn{display:flex;}
  }
  @media(max-width:380px){
    .wm .wm-studio{display:none;}
  }

  /* ---------- HERO ---------- */
  .hero{padding:84px 0 70px;}
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;}
  .hero h1{
    font-family:'Fraunces',serif;font-weight:400;
    font-size:clamp(2.5rem,5.2vw,4.05rem);line-height:1.05;letter-spacing:-.018em;
    margin:26px 0 26px;color:var(--ink);
  }
  .hero h1 em{color:var(--accent);}
  .hero .sub{
    font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--ink-soft);font-weight:300;
    line-height:1.58;max-width:540px;
  }
  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;}
  .btn{
    font-size:15px;font-weight:600;padding:14px 24px;border-radius:10px;
    display:inline-flex;align-items:center;gap:8px;transition:all .2s;cursor:pointer;
  }
  .btn-dark{background:var(--ink);color:#fff;}
  .btn-dark:hover{background:#000;transform:translateY(-1px);}
  .btn-outline{background:transparent;color:var(--ink);border:1px solid var(--line);}
  .btn-outline:hover{border-color:var(--ink);}
  .hero-foot{
    margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
    font-size:13.5px;color:var(--slate);
  }
  .hero-foot b{color:var(--ink-soft);font-weight:600;}

  /* hero route tiles */
  .route-stack{display:flex;flex-direction:column;gap:14px;}
  .route{
    display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:16px;padding:22px 24px;transition:all .22s;position:relative;overflow:hidden;
  }
  .route:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 14px 34px -22px rgba(20,23,30,.4);}
  .route .r-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
  .route .r-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--faint);letter-spacing:.08em;}
  .route .r-tag{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);font-weight:600;}
  .route .r-name{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:500;letter-spacing:-.01em;margin-bottom:6px;}
  .route .r-line{font-size:14px;color:var(--slate);line-height:1.5;}
  .route .r-go{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;}
  .route .r-go .ar{transition:transform .22s;}
  .route:hover .r-go .ar{transform:translateX(4px);}
  @media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:44px;}.hero{padding:56px 0 56px;}}

  /* ---------- SECTION SHELL ---------- */
  section.band{padding:78px 0;border-top:1px solid var(--line);}
  .sec-head{max-width:680px;margin-bottom:14px;}
  h2.sec{
    font-family:'Fraunces',serif;font-weight:400;
    font-size:clamp(1.9rem,3.6vw,2.75rem);line-height:1.12;letter-spacing:-.015em;
    margin:18px 0 18px;color:var(--ink);
  }
  h2.sec em{color:var(--accent);}
  p.lede{font-size:1.12rem;color:var(--ink-soft);font-weight:300;line-height:1.6;}

  /* ---------- STUDIO / PRINCIPLES ---------- */
  .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px;}
  .principle{border-top:2px solid var(--ink);padding-top:18px;}
  .principle h4{font-size:1.05rem;font-weight:600;margin-bottom:8px;color:var(--ink);}
  .principle p{font-size:.95rem;color:var(--slate);line-height:1.55;}
  @media(max-width:760px){.principles{grid-template-columns:1fr;gap:14px;}.principle{border-top-width:1px;}}

  /* ---------- PRODUCTS ---------- */
  .product{
    display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:start;
    padding:42px 0;border-top:1px solid var(--line);
  }
  .product:first-of-type{border-top:none;}
  .product .p-num{font-family:'Fraunces',serif;font-size:2.4rem;font-weight:300;color:var(--accent);line-height:1;}
  .product .p-tag{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);font-weight:600;margin-bottom:14px;}
  .product .p-tag .endorse{color:var(--accent);}
  .product h3{font-family:'Fraunces',serif;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:500;letter-spacing:-.01em;line-height:1.15;margin-bottom:14px;color:var(--ink);}
  .product p.p-body{font-size:1.02rem;color:var(--ink-soft);line-height:1.6;max-width:560px;margin-bottom:16px;font-weight:300;}
  .product .p-who{font-size:13.5px;color:var(--slate);}
  .product .p-who b{color:var(--ink-soft);font-weight:600;}
  .product .p-cta{
    white-space:nowrap;font-size:14.5px;font-weight:600;color:var(--ink);
    display:inline-flex;align-items:center;gap:8px;padding-top:6px;
  }
  .product .p-cta .ar{transition:transform .22s;}
  .product .p-cta:hover .ar{transform:translateX(4px);}
  @media(max-width:820px){
    .product{grid-template-columns:auto 1fr;gap:18px 22px;}
    .product .p-cta{grid-column:2;justify-self:start;}
  }
  @media(max-width:520px){.product{grid-template-columns:1fr;gap:12px;}.product .p-cta{grid-column:1;}}

  /* ---------- THROUGHLINE ---------- */
  .through{background:var(--ink);color:#EDEAE3;}
  .through.band{border-top:none;}
  .through h2.sec{color:#FBF9F4;}
  .through h2.sec em{color:var(--dot);}
  .through p.lede{color:#C3BFB6;}
  .spine{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
    margin:50px 0 8px;
  }
  .spine .end{
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:14px;
    padding:22px 24px;
  }
  .spine .end .el{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dot);font-weight:600;margin-bottom:8px;}
  .spine .end .en{font-family:'Fraunces',serif;font-size:1.35rem;font-weight:500;color:#fff;margin-bottom:6px;}
  .spine .end .ed2{font-size:13.5px;color:#B7B2A8;line-height:1.5;}
  .spine .hub{
    text-align:center;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.06em;
    color:#9A9488;border:1px dashed rgba(255,255,255,.22);border-radius:30px;padding:10px 16px;white-space:nowrap;
  }
  .through-points{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px;}
  .tp h4{font-size:1.02rem;font-weight:600;color:#fff;margin-bottom:8px;display:flex;align-items:center;gap:9px;}
  .tp h4::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot);}
  .tp p{font-size:.93rem;color:#B7B2A8;line-height:1.55;}
  @media(max-width:820px){.spine{grid-template-columns:1fr;}.spine .hub{justify-self:center;}.through-points{grid-template-columns:1fr;gap:16px;}}

  /* ---------- PROOF ---------- */
  .proof{text-align:center;}
  .proof .pl{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:26px;}
  .proof .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px;}
  .proof .logos span{font-family:'Fraunces',serif;font-size:1.32rem;color:var(--slate);font-weight:500;letter-spacing:.01em;}

  /* ---------- CLOSING CTA ---------- */
  .closing{text-align:center;}
  .closing h2{
    font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2rem,4.4vw,3.1rem);
    line-height:1.1;letter-spacing:-.015em;margin-bottom:20px;
  }
  .closing h2 em{color:var(--accent);}
  .closing p{font-size:1.1rem;color:var(--ink-soft);font-weight:300;max-width:520px;margin:0 auto 32px;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--surface-soft);border-top:1px solid var(--line);padding:62px 0 36px;}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;margin-bottom:46px;}
  .foot-brand .wm{font-size:20px;margin-bottom:14px;display:inline-block;}
  .foot-brand p{font-family:'Fraunces',serif;font-style:italic;font-size:1.08rem;color:var(--slate);max-width:340px;line-height:1.45;}
  .foot-col h5{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600;margin-bottom:16px;}
  .foot-col a{display:block;font-size:14.5px;color:var(--ink-soft);margin-bottom:11px;transition:color .2s;}
  .foot-col a:hover{color:var(--ink);}
  .foot-base{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--faint);}
  .foot-privacy{color:var(--faint);text-decoration:none;transition:color .2s;}
  .foot-privacy:hover{color:var(--ink);}
  .foot-social{display:flex;align-items:center;gap:14px;}
  .foot-social a{color:var(--faint);transition:color .2s;display:flex;}
  .foot-social a:hover{color:var(--ink);}
  @media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px;}.foot-brand{grid-column:1 / -1;}}