:root{
  --paper:#F2F2EF;
  --paper-2:#E8E8E3;
  --paper-3:#DEDED7;
  --ink:#171A21;
  --ink-soft:#5F646F;
  --rule:#C9C9C2;
  --blue:#2B4CF2;
  --magenta:#D6296B;
  --measure:62ch;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14161B; --paper-2:#1C1F26; --paper-3:#22252D;
    --ink:#EDEDE8; --ink-soft:#9BA1AE; --rule:#33373F;
    --blue:#7D92FF; --magenta:#FF77A6;
  }
}
:root[data-theme="dark"]{
  --paper:#14161B; --paper-2:#1C1F26; --paper-3:#22252D;
  --ink:#EDEDE8; --ink-soft:#9BA1AE; --rule:#33373F;
  --blue:#7D92FF; --magenta:#FF77A6;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 5rem);scroll-behavior:smooth;height:100%}
body{
  margin:0;min-height:100%;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:clamp(1rem,.94rem + .3vw,1.125rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}
@media (max-width:40rem){.wrap{width:min(100% - 2rem,72rem)}}
.narrow{width:min(100% - 2.5rem,50rem);margin-inline:auto}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:.9rem 0}
.mark{font-weight:600;font-size:1.2rem;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.masthead nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0;font-size:.95rem}
.masthead nav a{text-decoration:none;color:var(--ink-soft);padding-bottom:2px;border-bottom:1px solid transparent}
.masthead nav a:hover,.masthead nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--magenta)}
.nav-toggle{
  display:none;font:inherit;font-size:.95rem;font-weight:500;color:var(--ink);
  background:none;border:1px solid var(--rule);border-radius:999px;padding:.4rem 1rem;cursor:pointer;
}
.nav-toggle:hover{border-color:var(--ink)}
@media (max-width:44rem){
  .masthead .wrap{flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem}
  .masthead nav{flex-basis:100%}
  .masthead nav ul{flex-direction:column;gap:0;font-size:1.05rem}
  .masthead nav a{display:block;padding:.8rem 0;border-bottom:none;border-top:1px solid var(--rule)}
  .js .nav-toggle{display:inline-block}
  .js .masthead nav{display:none}
  .js .masthead nav.open{display:block}
}

/* ---------- page header (non-home) ---------- */
.pagehead{padding:clamp(2.75rem,7vw,5rem) 0 clamp(2rem,4vw,3rem);border-bottom:1px solid var(--rule)}
.eyebrow-mark{
  font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:.95rem;
  font-variation-settings:"opsz" 24,"SOFT" 20,"WONK" 1;color:var(--magenta);
  margin:0 0 .9rem;letter-spacing:-.01em;
}
.pagehead h1{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 96,"SOFT" 18,"WONK" 1;
  font-weight:500;font-size:clamp(2.1rem,6vw,3.6rem);
  line-height:1.06;letter-spacing:-.026em;margin:0 0 1rem;max-width:18ch;
}
.pagehead .dek{color:var(--ink-soft);max-width:var(--measure);margin:0;font-size:1.05em}

/* ---------- hero (home only) ---------- */
.hero{padding:clamp(3.5rem,9vw,8rem) 0 clamp(3rem,6vw,5rem)}
.headline{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 144,"SOFT" 10,"WONK" 0;
  font-weight:500;font-size:clamp(2.1rem,7.5vw,5.25rem);
  line-height:1.04;letter-spacing:-.03em;margin:0 0 clamp(1.5rem,3vw,2.25rem);
}
.headline em{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1}
.lede{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 72,"SOFT" 10,"WONK" 0;
  font-weight:400;font-size:clamp(1.5rem,4.2vw,2.75rem);
  line-height:1.22;letter-spacing:-.018em;max-width:20ch;margin:0 0 1.5rem;
}
.lede em{font-style:italic;font-variation-settings:"opsz" 72,"SOFT" 40,"WONK" 1}
.sub{max-width:50ch;color:var(--ink-soft);font-size:1.1em;margin:0 0 2.25rem}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
.btn{
  display:inline-block;text-decoration:none;background:var(--ink);color:var(--paper);
  padding:.7rem 1.5rem;border-radius:999px;font-weight:500;font-size:.98rem;
  transition:background .18s ease,transform .18s ease;border:none;cursor:pointer;font-family:inherit;
}
.btn:hover{background:var(--blue);color:var(--paper)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn.ghost:hover{border-color:var(--ink);background:transparent;color:var(--ink)}
.quiet-link{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule);font-size:.95rem}
.quiet-link:hover{color:var(--ink);border-bottom-color:var(--ink)}
.notice{margin:2.25rem 0 0;padding-left:.9rem;border-left:3px solid var(--magenta);font-size:.98rem;max-width:50ch}
.notice a{text-decoration:none;border-bottom:1px solid var(--rule)}
.notice a:hover{border-bottom-color:var(--ink)}

/* ---------- generic section ---------- */
.band{border-top:1px solid var(--rule);padding:clamp(3rem,7vw,5.5rem) 0}
.band.tight{padding-top:clamp(2rem,4vw,3rem)}
.band.alt{background:var(--paper-2)}
.band-head{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 60,"SOFT" 12,"WONK" 0;
  font-weight:500;font-size:clamp(1.65rem,3.6vw,2.4rem);
  line-height:1.15;letter-spacing:-.02em;margin:0 0 .6rem;max-width:22ch;
}
.band-note{color:var(--ink-soft);max-width:var(--measure);margin:0 0 2.5rem}
.kicker{
  font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:.92rem;
  font-variation-settings:"opsz" 20,"SOFT" 10,"WONK" 0;color:var(--magenta);
  margin:0 0 .6rem;
}

/* ---------- services list ---------- */
.svc{display:grid;grid-template-columns:minmax(9rem,15rem) 1fr;gap:1rem 3rem;padding:1.6rem 0;border-top:1px solid var(--rule);align-items:start}
.svc:first-of-type{border-top:none;padding-top:.25rem}
.svc h3{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 40,"SOFT" 16,"WONK" 1;font-weight:600;font-size:1.3rem;letter-spacing:-.015em;margin:0}
.svc p{margin:0;max-width:56ch;color:var(--ink-soft)}
.svc:first-of-type p{color:var(--ink);font-size:1.08em}
@media (max-width:46rem){.svc{grid-template-columns:1fr;gap:.4rem}}

/* ---------- founders ---------- */
.pair{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,4.5rem)}
@media (max-width:52rem){.pair{grid-template-columns:1fr;gap:2.75rem}}
.person h3{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 60,"SOFT" 24,"WONK" 1;font-weight:600;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em;margin:0 0 .15rem}
.person .who{color:var(--ink-soft);margin:0 0 1.1rem;font-size:.95rem}
.person p{max-width:52ch}
.person .rule{width:2.5rem;height:3px;background:var(--magenta);margin:0 0 1.25rem}
.person:nth-child(2) .rule{background:var(--blue)}
.clients{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--rule)}
.clients p{color:var(--ink-soft);font-size:.9rem;margin:0 0 .6rem;max-width:none}
.clients ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.4rem}
.clients li{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 30,"SOFT" 0,"WONK" 0;font-weight:500;font-size:1.15rem;letter-spacing:-.01em}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3rem);counter-reset:s}
@media (max-width:48rem){.steps{grid-template-columns:1fr;gap:1.75rem}}
.step{border-top:2px solid var(--ink);padding-top:.9rem;counter-increment:s}
.step h3{font-size:1.05rem;font-weight:600;margin:0 0 .35rem}
.step h3::before{content:counter(s) ". ";color:var(--magenta)}
.step:nth-child(2) h3::before{color:var(--blue)}
.step:nth-child(3) h3::before{color:var(--ink-soft)}
.step:nth-child(4) h3::before{color:var(--ink-soft)}
.step:nth-child(5) h3::before{color:var(--magenta)}
.step p{margin:0;color:var(--ink-soft);font-size:.97rem}

/* ---------- process timeline ---------- */
.timeline{counter-reset:s}
.timeline .row{display:grid;grid-template-columns:3.5rem minmax(9rem,14rem) 1fr;gap:.4rem 2rem;padding:1.6rem 0;border-top:1px solid var(--rule);align-items:baseline;counter-increment:s}
.timeline .row:first-child{border-top:none;padding-top:.25rem}
.timeline .row::before{content:counter(s,decimal-leading-zero);font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:1.05rem;color:var(--magenta)}
.timeline h3{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 40,"SOFT" 16,"WONK" 1;font-weight:600;font-size:1.3rem;letter-spacing:-.015em;margin:0}
.timeline p{margin:0;max-width:56ch;color:var(--ink-soft)}
@media (max-width:46rem){
  .timeline .row{grid-template-columns:2.5rem 1fr}
  .timeline p{grid-column:2}
}

/* ---------- pricing / packages ---------- */
.packages{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media (max-width:56rem){.packages{grid-template-columns:1fr;max-width:32rem}}
.pkg{border:1px solid var(--rule);background:var(--paper);padding:1.75rem;display:flex;flex-direction:column;gap:1rem}
.pkg .btn{margin-top:auto;align-self:flex-start}
.pkg.feat{border-color:var(--ink);position:relative}
.pkg-name{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 40,"SOFT" 14,"WONK" 1;font-weight:600;font-size:1.35rem;margin:0;letter-spacing:-.015em}
.pkg-for{color:var(--ink-soft);font-size:.9rem;margin:0}
.pkg-price{font-family:"Fraunces",Georgia,serif;font-size:1.6rem;font-weight:500;margin:.2rem 0 0}
.pkg-price span{font-family:"Archivo",sans-serif;font-size:.85rem;color:var(--ink-soft);font-weight:400}
.pkg ul{list-style:none;margin:0;padding:.9rem 0 0;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:.55rem;font-size:.92rem}
.pkg li{padding-left:1.1rem;position:relative;color:var(--ink-soft)}
.pkg li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:2px;background:var(--magenta)}
.pkg.feat li::before{background:var(--blue)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{
  cursor:pointer;padding:1.1rem 0;font-weight:500;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:"Fraunces",Georgia,serif;font-size:1.3rem;color:var(--magenta);flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:0 0 1.2rem;color:var(--ink-soft);max-width:var(--measure)}

/* ---------- work / case tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (max-width:44rem){.tiles{grid-template-columns:1fr}}
.tile{background:var(--paper);padding:2rem}
.tile .tag{color:var(--magenta);font-size:.85rem;font-weight:500;margin:0 0 .5rem}
.tile h3{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 40,"SOFT" 14,"WONK" 1;font-size:1.4rem;font-weight:600;margin:0 0 .5rem;letter-spacing:-.015em}
.tile p{color:var(--ink-soft);margin:0 0 1rem;font-size:.95rem}
.tile p:last-child{margin-bottom:0}
.tile .stat{display:flex;gap:1.5rem;border-top:1px solid var(--rule);padding-top:.9rem}
.tile .stat div{display:flex;flex-direction:column}
.tile .stat b{font-family:"Fraunces",Georgia,serif;font-size:1.3rem;font-weight:600}
.tile .stat span{color:var(--ink-soft);font-size:.78rem}

/* ---------- contact form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:36rem){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field.full{grid-column:1/-1}
.field label{font-size:.85rem;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:2px;padding:.65rem .8rem;
}
.field textarea{resize:vertical;min-height:7rem}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink)}
.form-note{font-size:.85rem;color:var(--ink-soft);margin-top:.25rem}
.field.check label{display:flex;align-items:flex-start;gap:.6rem;font-size:.95rem;color:var(--ink)}
.field.check input{width:1.1rem;height:1.1rem;margin:.2rem 0 0;flex:none;accent-color:var(--ink)}
[hidden]{display:none!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.field .btn{align-self:flex-start}
.btn:disabled{opacity:.6;cursor:default}
.form-error{margin:.25rem 0 0;font-size:.92rem;color:var(--magenta)}
.form-done{border-top:2px solid var(--ink);padding-top:1.25rem}
.form-done:focus{outline:none}
.form-done h2{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 60,"SOFT" 16,"WONK" 1;font-weight:500;font-size:clamp(1.5rem,3.6vw,2.2rem);letter-spacing:-.02em;margin:0 0 .5rem}
.form-done p{margin:0;color:var(--ink-soft);max-width:var(--measure)}

/* ---------- contact band on other pages ---------- */
.contact-cta{background:var(--ink);color:var(--paper)}
.contact-cta .wrap{padding:clamp(3.5rem,8vw,6.5rem) 0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem}
.contact-cta h2{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 144,"SOFT" 16,"WONK" 0;font-weight:500;font-size:clamp(2rem,5.5vw,3.75rem);line-height:1.05;margin:0;letter-spacing:-.028em;max-width:12ch}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem}
.contact-cta .btn{background:var(--paper);color:var(--ink)}
.contact-cta .btn:hover{background:var(--blue);color:var(--paper)}
.cta-mail{color:inherit;text-decoration:none;padding-bottom:1px;border-bottom:1px solid color-mix(in srgb,currentColor 35%,transparent)}
.cta-mail:hover{border-bottom-color:currentColor}
.contact-cta :focus-visible{outline-color:var(--paper)}

.mail{
  font-family:"Fraunces",Georgia,serif;
  font-variation-settings:"opsz" 48,"SOFT" 14,"WONK" 0;
  font-size:clamp(1.3rem,3.4vw,2rem);font-weight:500;
  text-decoration:none;border-bottom:2px solid var(--magenta);letter-spacing:-.015em;
}
.mail:hover{border-bottom-color:var(--blue)}

/* ---------- long-form text (privacy) ---------- */
.prose{max-width:var(--measure)}
.prose h2{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 40,"SOFT" 14,"WONK" 0;font-weight:600;font-size:1.35rem;letter-spacing:-.015em;margin:2.25rem 0 .5rem}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-soft)}
.prose p{margin:0 0 1rem}
.prose ul{margin:0 0 1rem;padding-left:1.2rem}
.prose a{color:var(--ink)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:clamp(2.5rem,5vw,3.5rem) 0 1.75rem;font-size:.9rem;color:var(--ink-soft)}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem}
@media (max-width:44rem){.foot{grid-template-columns:1fr}}
.foot p{margin:.4rem 0 0}
.foot .mark{color:var(--ink)}
.foot-head{color:var(--ink);font-weight:600;font-size:.82rem;margin:0 0 .7rem!important}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.foot a,.foot-legal a{text-decoration:none}
.foot a:hover,.foot-legal a:hover{color:var(--ink)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;margin-top:2.5rem;padding-top:1.25rem;border-top:1px solid var(--rule);font-size:.82rem}

@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .reveal{opacity:0;transform:translateY(1rem);transition:opacity .7s cubic-bezier(.2,.75,.25,1),transform .7s cubic-bezier(.2,.75,.25,1)}
  .reveal.in{opacity:1;transform:none}
  .hero .headline,.hero .sub,.hero .cta-row,.hero .notice{animation:rise .7s cubic-bezier(.2,.75,.25,1) both}
  .hero .sub{animation-delay:.14s}.hero .cta-row{animation-delay:.26s}.hero .notice{animation-delay:.38s}
}
@keyframes rise{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}

