/* ── Fonts & extras ─────────────────────────────────────────── */
.hand{font-family:"Caveat",cursive;font-weight:600}

/* ── Buttons (index extras) ─────────────────────────────────── */
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.btn-arrow{transition:transform .18s}
.btn:hover .btn-arrow{transform:translateX(3px)}

/* ── Nav ────────────────────────────────────────────────────── */
header.nav{backdrop-filter:saturate(120%) blur(6px);background:color-mix(in srgb,var(--paper) 86%,transparent);border-bottom:1px solid transparent;transition:border-color .3s}
header.nav.stuck{border-color:var(--line)}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a:not(.btn){text-decoration:none;font-size:.97rem;font-weight:500;color:var(--ink-soft);transition:color .15s}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav-toggle{display:none}

/* ── Section layout ─────────────────────────────────────────── */
section{position:relative;z-index:1}
.pad{padding:96px 0}

/* ── Scroll reveal & draw-on animations ─────────────────────── */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.08s}[data-delay="2"]{transition-delay:.16s}[data-delay="3"]{transition-delay:.24s}
.paintable{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.6,0,.2,1)}
.paintable.in{clip-path:inset(0 0 0 0)}
.dl{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s cubic-bezier(.6,.05,.2,1)}
.in .dl,.draw.in .dl{stroke-dashoffset:0}
.in .dl.d1{transition-delay:.05s}.in .dl.d2{transition-delay:.25s}.in .dl.d3{transition-delay:.45s}.in .dl.d4{transition-delay:.6s}.in .dl.d5{transition-delay:.75s}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{padding:60px 0 48px}
.hero-in{position:relative}
.h-el{opacity:0;transform:translateY(20px)}
body.loaded .h-el{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
body.loaded .h-el.e1{transition-delay:.05s}
body.loaded .h-el.e2{transition-delay:.18s}
body.loaded .h-el.e3{transition-delay:.42s}
body.loaded .h-el.e4{transition-delay:.54s}
body.loaded .h-el.e5{transition-delay:.64s}
.hero .eyebrow{margin-bottom:26px}
.hero h1{font-size:clamp(2.4rem,6.1vw,5.05rem)}
.hero h1 .l{display:block}
.hero h1 .l2{margin-left:min(5vw,68px)}
.hero h1 .l3{margin-left:min(11.5vw,150px)}
.mark .spray{left:-6px;right:-6px;bottom:-.16em;width:calc(100% + 12px);height:.5em}
.lead{font-size:1.22rem;max-width:42ch;margin:30px 0 0 min(11.5vw,150px);color:var(--ink-soft)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin:38px 0 0 min(17.5vw,228px)}
.cred{margin:26px 0 0 min(17.5vw,228px)}
.cred .mono{font-size:.74rem}
.hero-art{position:absolute;top:4px;right:0;width:clamp(280px,30vw,420px)}
.float{animation:bob 5.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.margin-note{position:absolute;left:2px;bottom:-30px;width:200px;pointer-events:none}
.margin-note .hand{font-size:1.42rem;line-height:1.05;color:var(--violet);display:block;transform:rotate(-4deg)}
.margin-note svg{position:absolute;right:-34px;top:-6px;width:96px;height:84px;overflow:visible}

/* ── Marquee ────────────────────────────────────────────────── */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2);overflow:hidden;padding:15px 0}
.mq-track{display:flex;gap:34px;width:max-content;animation:mq 34s linear infinite;align-items:center}
.mq-track span{font-family:"Space Mono",monospace;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--ink)}
.mq-track .sep{color:var(--lilac-deep);font-size:1rem}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── Services / cards ───────────────────────────────────────── */
.svc-head{margin-bottom:54px}
.svc-head>div{margin-bottom:16px}
.svc-head h2{font-size:clamp(2rem,4.2vw,3.1rem)}
.svc-head p{max-width:34ch;color:var(--ink-soft);margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px 34px;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 20px 44px -26px rgba(27,26,35,.45)}
.card .doodle{width:66px;height:66px;margin-bottom:22px;color:var(--ink);transition:color .25s,transform .35s}
.card:hover .doodle{color:var(--violet);transform:rotate(3deg)}
.card .doodle path,.card .doodle line,.card .doodle rect,.card .doodle polyline{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.card .mono{display:block;margin-bottom:10px}
.card h3{font-size:1.42rem;margin-bottom:12px}
.card p{margin:0;color:var(--ink-soft);font-size:1rem}
.card .blot{position:absolute;right:-30px;top:-30px;width:120px;height:120px;opacity:.5}

/* ── CTA band ───────────────────────────────────────────────── */
.band{background:var(--ink);color:var(--paper);border-radius:34px;padding:64px 56px;position:relative;overflow:hidden}
.band h2{font-size:clamp(1.8rem,3.8vw,2.7rem);max-width:20ch}
.band .lilac{color:var(--lilac)}
.band p{color:#cfcad8;max-width:48ch;margin:18px 0 32px}
.band .spray path{stroke:var(--lilac-deep)}
.band-spray{right:-40px;bottom:-50px;width:340px;height:300px;opacity:.5}

/* ── Comparison table ───────────────────────────────────────── */
.cmp-head{text-align:center;max-width:30ch;margin:0 auto 16px}
.cmp-head h2{font-size:clamp(2rem,4.4vw,3.2rem)}
.cmp-sub{text-align:center;color:var(--ink-soft);max-width:50ch;margin:0 auto 54px}
.cmp{display:grid;grid-template-columns:1.1fr 1fr 1fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.cmp .ch{padding:24px 24px 20px;border-bottom:1px solid var(--line)}
.cmp .rowlabel{font-family:"Space Mono",monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);background:color-mix(in srgb,var(--paper) 60%,transparent)}
.cmp .col-h{font-family:"Bricolage Grotesque";font-weight:800;font-size:1.25rem}
.cmp .col-h.head-head{background:var(--lilac-wash)}
.cmp .col-h small{display:block;font-family:"Space Mono",monospace;font-weight:400;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--violet);margin-top:6px}
.cmp .cell{padding:20px 24px;border-bottom:1px solid var(--line);font-size:.98rem}
.cmp .cell.head{background:color-mix(in srgb,var(--lilac-wash) 45%,transparent)}
.cmp .r{display:contents}
.cmp .r:last-child .cell,.cmp .r:last-child .rowlabel{border-bottom:none}
.cmp .best{font-weight:600}

/* ── About ──────────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:0.85fr 1.15fr;gap:60px;align-items:center}
.portrait{position:relative;justify-self:start}
.portrait .ph{width:300px;height:340px;border-radius:26px;background:linear-gradient(160deg,var(--lilac-wash),#dcd3f4);display:flex;align-items:center;justify-content:center;font-family:"Bricolage Grotesque";font-weight:800;font-size:5rem;color:var(--violet);border:1px solid var(--line)}
.portrait .spray{left:-26px;top:-26px;width:360px;height:400px;opacity:.85}
.portrait .cap{position:absolute;bottom:-16px;right:-10px;background:var(--ink);color:var(--paper);font-family:"Space Mono",monospace;font-size:.7rem;padding:7px 12px;border-radius:10px;transform:rotate(-3deg)}
.about h2{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:22px}
.about p{color:var(--ink-soft);margin:0 0 18px}
.about p strong{color:var(--ink);font-weight:600}
.sig{font-family:"Caveat",cursive;font-weight:600;font-size:2.1rem;margin-top:10px;color:var(--ink);transform:rotate(-3deg);display:inline-block}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq{max-width:780px;margin:0 auto}
.faq h2{font-size:clamp(2rem,4.2vw,3rem);text-align:center;margin-bottom:48px}
.q{border-top:1px solid var(--line)}
.q:last-child{border-bottom:1px solid var(--line)}
.q button{all:unset;display:flex;width:100%;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;padding:26px 4px;font-family:"Bricolage Grotesque";font-weight:700;font-size:1.18rem;line-height:1.25}
.q button:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:6px}
.q .pm{flex:0 0 auto;width:26px;height:26px;position:relative}
.q .pm::before,.q .pm::after{content:"";position:absolute;background:var(--violet);border-radius:2px;transition:transform .25s}
.q .pm::before{left:0;right:0;top:12px;height:2.5px}
.q .pm::after{top:0;bottom:0;left:12px;width:2.5px}
.q[aria-expanded="true"] .pm::after{transform:scaleY(0)}
.q .ans{max-height:0;overflow:hidden;transition:max-height .35s ease}
.q .ans p{margin:0 0 26px;color:var(--ink-soft);font-size:1.02rem;padding-right:40px}

/* ── Footer ─────────────────────────────────────────────────── */
footer{background:var(--ink);color:var(--paper);padding:80px 0 40px;position:relative;z-index:1;overflow:hidden}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-end}
footer h2{font-size:clamp(2rem,5vw,3.4rem);max-width:16ch}
footer h2 em{font-style:normal;color:var(--lilac)}
.foot-links{display:flex;gap:40px;flex-wrap:wrap;margin-top:54px;padding-top:30px;border-top:1px solid #34323e}
.foot-links a{color:#cfcad8;text-decoration:none;font-size:.95rem}
.foot-links a:hover{color:var(--lilac)}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col .mono{color:#7c7890}
.foot-bottom{margin-top:50px;color:#6f6c7e;font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.foot-spray{right:-30px;top:30px;width:300px;height:260px;opacity:.35}
footer .spray path{stroke:var(--lilac-deep)}

/* ── Sticky CTA bar ─────────────────────────────────────────── */
.stickybar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:50;display:flex;align-items:center;gap:18px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 14px;box-shadow:0 18px 50px -20px rgba(27,26,35,.45);transition:transform .4s cubic-bezier(.2,.8,.2,1);max-width:calc(100vw - 32px)}
.stickybar.show{transform:translate(-50%,0)}
.stickybar .av{width:40px;height:40px;border-radius:50%;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Bricolage Grotesque";font-weight:800;flex:0 0 auto}
.stickybar .txt{font-weight:600;font-size:.98rem;white-space:nowrap}
.stickybar .txt span{display:block;font-family:"Space Mono",monospace;font-weight:400;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.stickybar .btn{padding:11px 20px}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:920px){
  .hero h1 .l2,.hero h1 .l3{margin-left:0}
  .lead,.cta-row,.cred{margin-left:0}
  .hero-art{position:static;width:280px;margin:36px auto 0;display:block}
  .margin-note{display:none}
}
@media(max-width:860px){
  .nav-links{position:fixed;inset:72px 0 auto 0;background:var(--paper);flex-direction:column;align-items:flex-start;gap:18px;padding:24px 28px 30px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .3s}
  .nav-links.open{transform:none}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
  .nav-toggle span{width:24px;height:2px;background:var(--ink);display:block}
  .cards{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:48px}
  .portrait .ph{width:240px;height:280px;font-size:4rem}
  .portrait .spray{width:290px;height:330px}
  .cmp{display:block;border:none;background:none}
  .cmp .ch{display:none}
  .cmp .r{display:block;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:4px 18px 10px;margin-bottom:14px}
  .cmp .rowlabel{display:block;font-family:"Bricolage Grotesque";font-weight:800;font-size:1.05rem;color:var(--ink);background:none;text-transform:none;letter-spacing:-.01em;padding:14px 0 6px;border:none}
  .cmp .cell{display:flex;justify-content:space-between;gap:16px;align-items:baseline;border:none;border-top:1px solid var(--line);padding:11px 0;background:none!important;text-align:right}
  .cmp .cell::before{content:attr(data-c);font-family:"Space Mono",monospace;font-size:.64rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);flex:0 0 auto}
  .cmp .cell.head::before{color:var(--violet)}
  .band{padding:44px 28px}
  .stickybar .txt{display:none}
  .pad{padding:70px 0}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  [data-reveal],.paintable,.h-el{transition:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .dl{stroke-dashoffset:0!important}
  .float,.mq-track{animation:none!important}
}