:root{
    --ink:#1C2331;
    --parchment:#EFE7D6;
    --parchment-light:#FAF6EC;
    --redline:#A6323F;
    --redline-soft:#c15a66;
    --gold:#B08D45;
    --charcoal:#262420;
    --charcoal-70: rgba(38,36,32,0.7);
    --line: rgba(38,36,32,0.14);
    --radius: 3px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--parchment-light);
    color:var(--charcoal);
    font-family:'Literata', serif;
    font-size:17px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin:0;
  }
  .mono{
    font-family:'JetBrains Mono', monospace;
    text-transform:uppercase;
    letter-spacing:0.14em;
    font-size:0.72rem;
    font-weight:600;
  }
  .redink{
    font-family:'Caveat', cursive;
    color:var(--redline);
  }
  a{color:inherit;}
  img{max-width:100%;}
  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 32px;
  }
  @media (max-width:640px){ .wrap{padding:0 20px;} }

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(250,246,236,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  nav.wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:76px;
  }
  .logo{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:1.3rem;
    letter-spacing:-0.01em;
    display:flex; align-items:baseline; gap:6px;
  }
  .logo span{
    font-family:'Caveat', cursive;
    color:var(--redline);
    font-size:1.5rem;
    font-weight:700;
  }
  .navlinks{
    display:flex; gap:34px; align-items:center;
    font-family:'JetBrains Mono', monospace;
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }
  .navlinks a{
    text-decoration:none;
    color:var(--charcoal-70);
    position:relative;
    padding-bottom:3px;
    transition:color .2s ease;
  }
  .navlinks a:hover{color:var(--redline);}
  .navlinks a::after{
    content:"";
    position:absolute; left:0; bottom:-2px;
    width:0; height:1px; background:var(--redline);
    transition:width .25s ease;
  }
  .navlinks a:hover::after{width:100%;}
  .navcta{
    background:var(--ink); color:var(--parchment-light) !important;
    padding:10px 18px; border-radius:var(--radius);
    text-transform:none; font-family:'Literata',serif; font-size:0.88rem;
  }
  .navcta::after{display:none;}
  .navcta:hover{background:var(--gold); color:var(--ink) !important; border-color:var(--gold);}
  .menu-btn{display:none; background:none; border:none; cursor:pointer; padding:8px;}
  .menu-btn span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0;}
  @media (max-width: 860px){
    .navlinks{
      position:fixed; top:76px; left:0; right:0;
      background:var(--parchment-light);
      flex-direction:column; align-items:flex-start;
      padding:24px 20px; gap:20px;
      border-bottom:1px solid var(--line);
      transform:translateY(-130%);
      transition:transform .3s ease;
    }
    .navlinks.open{transform:translateY(0);}
    .menu-btn{display:block;}
  }

  /* ---------- WELCOME / LOGO MARK ---------- */
  .welcome-mark{
    text-align:left;
    padding-bottom:24px;
    margin-bottom:36px;
  }
  .welcome-logo{
    font-family:'Fraunces', serif;
    font-weight:700;
    font-size:clamp(1.5rem,3.4vw,2rem);
    letter-spacing:-0.01em;
    display:inline-block;
    padding-bottom:14px;
    border-bottom:2px solid var(--redline);
  }
  .welcome-tag{
    color:var(--redline);
    display:block;
    margin-bottom:14px;
  }
  .welcome-logo span{
    font-family:'Caveat', cursive;
    color:var(--redline);
    font-size:1.15em;
    font-weight:700;
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:96px 0 80px;
    position:relative;
    overflow:hidden;
  }
  .hero-eyebrow{color:var(--redline); margin-bottom:18px; display:flex; align-items:center; gap:10px;}
  .hero-eyebrow::before{content:""; width:26px; height:1px; background:var(--redline); display:inline-block;}
  .hero h1{
    font-size:clamp(2.4rem, 5.4vw, 4.4rem);
    line-height:1.06;
    max-width:920px;
  }
  .strike{
    position:relative;
    color:var(--charcoal-70);
  }
  .strike::after{
    content:"";
    position:absolute; left:-2%; right:-2%; top:52%;
    height:2px; background:var(--redline);
    transform:rotate(-1.2deg);
  }
  .insert{
    font-family:'Caveat', cursive;
    color:var(--redline);
    font-size:1.15em;
    font-weight:700;
    margin-left:10px;
    position:relative;
    top:-0.05em;
  }
  .hero p.lede{
    font-size:1.15rem;
    max-width:600px;
    color:var(--charcoal-70);
    margin:28px 0 36px;
  }
  .hero-actions{display:flex; gap:18px; flex-wrap:wrap; align-items:center;}
  .email-note{
    margin-top:18px; color:var(--charcoal-70) !important;
    text-transform:none !important; letter-spacing:0 !important;
    font-family:'Literata', serif !important; font-size:0.92rem !important;
    font-weight:400 !important;
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 26px;
    border-radius:var(--radius);
    font-family:'Literata', serif; font-size:1rem; font-weight:500;
    text-decoration:none;
    border:1px solid var(--ink);
    transition:all .22s ease;
  }
  .btn-primary{background:var(--ink); color:var(--parchment-light);}
  .btn-primary:hover{background:var(--redline); border-color:var(--redline);}
  .btn-ghost{background:transparent; color:var(--ink);}
  .btn-ghost:hover{border-color:var(--redline); color:var(--redline);}

  .margin-note{
    font-family:'Caveat', cursive;
    color:var(--redline);
    font-size:1.1rem;
    transform:rotate(-2deg);
    display:inline-block;
  }

  /* manuscript card in hero */
  .manuscript{
    margin-top:64px;
    background:var(--parchment);
    border:1px solid var(--line);
    border-radius:6px;
    padding:36px 40px;
    max-width:760px;
    position:relative;
    box-shadow: 0 24px 60px -30px rgba(28,35,49,0.35);
  }
  .manuscript::before{
    content:"MS. 01 — DRAFT";
    position:absolute; top:-11px; left:36px;
    background:var(--ink); color:var(--parchment-light);
    font-family:'JetBrains Mono', monospace; font-size:0.62rem;
    letter-spacing:0.12em; padding:4px 10px; border-radius:2px;
  }
  .manuscript p{margin:0 0 14px; color:var(--charcoal-70);}
  .manuscript p:last-child{margin-bottom:0;}
  .circle-word{
    position:relative;
    padding:0 4px;
  }
  .circle-word::after{
    content:"";
    position:absolute; inset:-4px -6px;
    border:1.5px solid var(--redline);
    border-radius:50% / 60%;
    transform:rotate(-2deg);
  }

  /* ---------- CAPABILITY BAR ---------- */
  .capbar{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--parchment);
  }
  .capbar .wrap{
    display:grid; grid-template-columns:repeat(4,1fr);
    padding:34px 32px;
  }
  .capbar .item{
    text-align:center; padding:0 16px;
    border-left:1px solid var(--line);
  }
  .capbar .item:first-child{border-left:none;}
  .capbar .item .mono{color:var(--redline); display:block; margin-bottom:8px;}
  .capbar .item .label{font-family:'Fraunces',serif; font-weight:500; color:var(--ink); font-size:1.05rem;}
  @media (max-width:760px){
    .capbar .wrap{grid-template-columns:repeat(2,1fr); gap:24px 0;}
    .capbar .item{border-left:none; border-top:1px solid var(--line); padding-top:20px;}
    .capbar .item:nth-child(1),.capbar .item:nth-child(2){border-top:none; padding-top:0;}
  }

  /* ---------- SECTION SHARED ---------- */
  section{padding:100px 0;}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head .mono{color:var(--redline); display:block; margin-bottom:14px;}
  .section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.15;}
  .section-head p{color:var(--charcoal-70); margin-top:18px; font-size:1.05rem;}

  /* ---------- SERVICES ---------- */
  .services{background:var(--ink);}
  .services .section-head h2, .services .section-head p{color:var(--parchment-light);}
  .services .section-head p{color:rgba(250,246,236,0.65);}
  .services .section-head .mono{color:var(--gold);}
  .svc-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:rgba(250,246,236,0.14);
    border:1px solid rgba(250,246,236,0.14);
  }
  @media (max-width:760px){ .svc-grid{grid-template-columns:1fr;} }
  .svc-card{
    background:var(--ink);
    padding:38px 36px;
    position:relative;
    transition:background .25s ease;
  }
  .svc-card:hover{background:#232c40;}
  .svc-tag{
    font-family:'Caveat', cursive;
    color:var(--gold);
    font-size:1.3rem;
    margin-bottom:10px;
    display:block;
  }
  .svc-card h3{color:var(--parchment-light); font-size:1.3rem; margin-bottom:12px;}
  .svc-card p{color:rgba(250,246,236,0.62); font-size:0.98rem; margin:0;}
  .svc-humor{
    font-family:'Caveat', cursive;
    color:var(--gold) !important;
    font-size:1.15rem !important;
    margin-top:12px !important;
    line-height:1.4;
  }

  /* ---------- HOMEPAGE PORTFOLIO / WHAT WE DO ---------- */
  .portfolio{background:var(--parchment-light);}
  .portfolio-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:22px;
    margin-top:12px;
  }
  @media (max-width:760px){ .portfolio-grid{grid-template-columns:1fr;} }
  .portfolio-card{
    background:var(--parchment);
    border:1px solid var(--line);
    border-radius:8px;
    padding:34px 32px;
    display:flex; flex-direction:column;
  }
  .portfolio-card h3{font-size:1.28rem; margin-bottom:12px;}
  .portfolio-card p{color:var(--charcoal-70); margin:0 0 12px; font-size:0.98rem;}
  .portfolio-card .svc-humor{color:var(--redline) !important; margin-top:0 !important; margin-bottom:18px !important;}
  .portfolio-card .btn{align-self:flex-start; margin-top:auto;}
  .btn-sm{padding:10px 20px; font-size:0.9rem;}

  /* ghost button meant for dark/ink backgrounds */
  .btn-ghost-dark{background:transparent; color:var(--parchment-light); border:1px solid rgba(250,246,236,0.4);}
  .btn-ghost-dark:hover{border-color:var(--gold); color:var(--gold);}

  /* ---------- ABOUT / CULTURE ---------- */
  .about-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
  }
  @media (max-width:820px){ .about-grid{grid-template-columns:1fr;} }
  .about-copy h2{font-size:clamp(1.7rem,3.2vw,2.3rem); margin-bottom:22px;}
  .about-copy p{color:var(--charcoal-70); margin-bottom:18px;}
  .promise{
    border-left:3px solid var(--redline);
    padding-left:20px;
    margin-top:28px;
  }
  .promise .redink{font-size:1.6rem;}
  .team-list{border-top:1px solid var(--line);}
  .team-row{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:20px 0; border-bottom:1px solid var(--line);
    gap:20px;
  }
  .team-row .role{font-family:'Fraunces',serif; font-weight:600; color:var(--ink);}
  .team-row .desc{color:var(--charcoal-70); font-size:0.95rem; text-align:right; max-width:300px;}
  @media (max-width:500px){
    .team-row{flex-direction:column; gap:6px;}
    .team-row .desc{text-align:left;}
  }

  /* ---------- MEET THE TEAM ---------- */
  .founder-feature{
    display:flex; align-items:center; gap:26px;
    justify-content:center; text-align:left;
    background:var(--parchment);
    border:1px solid var(--line);
    border-radius:8px;
    padding:32px 40px;
    max-width:640px;
    margin:56px auto 0;
  }
  .founder-label{color:var(--redline); display:block; margin-bottom:8px;}
  @media (max-width:520px){
    .founder-feature{flex-direction:column; text-align:center; padding:30px 24px;}
  }
  .team-sub-label{
    text-align:center; margin:52px 0 0;
    color:var(--charcoal-70);
  }
  .team-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:22px;
    margin-top:26px;
  }
  @media (max-width:900px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .team-grid{grid-template-columns:1fr;} }
  .team-card{
    background:var(--parchment);
    border:1px solid var(--line);
    border-radius:6px;
    padding:26px 20px;
    text-align:center;
  }
  .avatar{
    width:56px; height:56px; border-radius:50%;
    background:var(--ink); color:var(--parchment-light);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces',serif; font-weight:600; font-size:1.1rem;
    margin:0 auto 16px;
    overflow:hidden;
  }
  .avatar img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .avatar-lg{width:84px; height:84px; font-size:1.5rem;}
  .team-card .name-link, .founder-info .name-link{
    font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem;
    color:var(--ink); text-decoration:none;
    display:inline-flex; align-items:center; gap:6px;
    border-bottom:1.5px solid transparent;
    transition:color .2s ease, border-color .2s ease;
  }
  .team-card .name-link:hover, .founder-info .name-link:hover{color:var(--redline); border-color:var(--redline);}
  .team-card .name-plain{
    font-family:'Fraunces', serif; font-weight:600; font-size:1.05rem;
    color:var(--ink);
  }
  .team-card .name-link .li-icon, .founder-info .name-link .li-icon{width:13px; height:13px; opacity:0.55; flex-shrink:0;}
  .team-card .name-link:hover .li-icon, .founder-info .name-link:hover .li-icon{opacity:1;}
  .team-card .role-tag, .founder-info .role-tag{
    display:block; font-family:'JetBrains Mono',monospace; font-size:0.66rem;
    letter-spacing:0.08em; text-transform:uppercase; color:var(--redline);
    margin-top:8px;
  }

  /* team bios */
  .bio-list{
    margin-top:70px;
    display:flex; flex-direction:column; gap:1px;
    background:var(--line); border:1px solid var(--line);
    max-width:820px; margin-left:auto; margin-right:auto;
  }
  .bio-item{background:var(--parchment-light); padding:28px 32px;}
  .bio-head{display:flex; align-items:center; gap:16px; margin-bottom:14px;}
  .bio-head .avatar{flex-shrink:0;}
  .bio-name{display:block; font-family:'Fraunces',serif; font-weight:600; font-size:1.1rem; color:var(--ink);}
  .bio-item p{color:var(--charcoal-70); margin:0; font-size:0.98rem;}
  @media (max-width:560px){ .bio-item{padding:22px 20px;} }

  /* ---------- RED PEN ROULETTE ---------- */
  .roulette{
    background:var(--parchment);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    text-align:center;
  }
  .roulette-card{
    max-width:640px; margin:0 auto;
    background:var(--parchment-light);
    border:1px solid var(--line);
    border-radius:8px;
    padding:44px 40px;
    position:relative;
  }
  .roulette-card::before{
    content:"MS. R-01 — MARGIN NOTE";
    position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    background:var(--ink); color:var(--parchment-light);
    font-family:'JetBrains Mono', monospace; font-size:0.62rem;
    letter-spacing:0.12em; padding:4px 10px; border-radius:2px;
    white-space:nowrap;
  }
  #rouletteText{
    font-family:'Caveat', cursive;
    font-size:1.7rem; color:var(--redline);
    line-height:1.4; min-height:90px;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .2s ease;
  }
  .roulette-btn{
    margin-top:20px; background:var(--ink); color:var(--parchment-light);
    border:1px solid var(--ink); padding:13px 24px; border-radius:var(--radius);
    font-family:'Literata',serif; font-size:0.96rem; cursor:pointer;
    transition:all .2s ease;
  }
  .roulette-btn:hover{background:var(--gold); border-color:var(--gold); color:var(--ink);}

  /* ---------- FAQ ---------- */
  .faq{background:var(--parchment);}
  .faq-item{
    border-bottom:1px solid var(--line);
  }
  .faq-item:first-child{border-top:1px solid var(--line);}
  .faq-q{
    display:flex; justify-content:space-between; align-items:center;
    padding:26px 0; cursor:pointer;
    gap:20px;
  }
  .faq-q .qmark{
    font-family:'Caveat', cursive; color:var(--redline); font-size:1.5rem;
    min-width:28px;
  }
  .faq-q h3{font-size:1.08rem; font-weight:500; flex:1;}
  .faq-toggle{
    font-family:'JetBrains Mono', monospace; font-size:1.1rem; color:var(--redline);
    transition:transform .25s ease;
  }
  .faq-item.open .faq-toggle{transform:rotate(45deg);}
  .faq-a{
    max-height:0; overflow:hidden;
    transition:max-height .3s ease, padding .3s ease;
    color:var(--charcoal-70);
    padding-left:48px;
  }
  .faq-item.open .faq-a{max-height:240px; padding-bottom:24px;}

  /* ---------- PHILOSOPHY ---------- */
  .philosophy{
    background:var(--parchment-light);
    text-align:center;
  }
  .phil-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:40px;
    margin-top:20px;
  }
  @media (max-width:820px){ .phil-grid{grid-template-columns:1fr; gap:44px;} }
  .phil-item .mark{
    font-family:'Fraunces', serif; font-size:3rem; color:var(--redline);
    line-height:1; margin-bottom:16px; display:block;
  }
  .phil-item p{
    font-family:'Fraunces', serif; font-size:1.2rem; color:var(--ink);
    font-style:italic; line-height:1.5;
  }
  .phil-item .who{
    margin-top:14px; font-family:'JetBrains Mono',monospace; font-size:0.7rem;
    letter-spacing:0.1em; text-transform:uppercase; color:var(--charcoal-70);
  }

  /* ---------- CTA ---------- */
  .cta{
    background:var(--ink);
    text-align:center;
  }
  .cta h2{color:var(--parchment-light); font-size:clamp(1.9rem,4vw,2.8rem); max-width:700px; margin:0 auto 20px;}
  .cta p{color:rgba(250,246,236,0.65); max-width:520px; margin:0 auto 36px;}
  .cta .btn-primary{background:var(--gold); border-color:var(--gold); color:var(--ink);}
  .cta .btn-primary:hover{background:#dccb00; border-color:#dccb00;}
  .cta .btn-primary:hover{background:#8a2a36;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--ink); border-top:1px solid rgba(250,246,236,0.14); padding:50px 0 34px;}
  .foot-grid{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;
    padding-bottom:34px; border-bottom:1px solid rgba(250,246,236,0.14);
  }
  .foot-logo{font-family:'Fraunces',serif; font-weight:700; color:var(--parchment-light); font-size:1.2rem;}
  .foot-logo span{font-family:'Caveat',cursive; color:var(--redline); font-size:1.4rem;}
  .foot-links{display:flex; gap:44px; flex-wrap:wrap;}
  .foot-col .mono{color:var(--gold); display:block; margin-bottom:14px;}
  .foot-col a{
    display:block; color:rgba(250,246,236,0.62); text-decoration:none;
    font-size:0.92rem; margin-bottom:10px; transition:color .2s ease;
  }
  .foot-col a:hover{color:var(--parchment-light);}
  .foot-bottom{
    display:flex; justify-content:space-between; padding-top:26px;
    color:rgba(250,246,236,0.45); font-size:0.82rem; flex-wrap:wrap; gap:10px;
  }

  ::selection{background:var(--redline); color:#fff;}
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important;}
  }