/* Deepak Bothra — scrapbook notebook theme.
   Grid desk, ruled paper sheet, tape, polaroids, stickers, tab cards. */
:root{
  --paper:#F7F6F1; --paper-2:#EFEDE4; --ink:#14130F; --ink-2:#2D2B26;
  --muted:#6B675D; --rule:#D9D5C8;
  --yellow:#F2C23E; --mint:#A9DDCB; --pink:#FF4D97; --green:#17B26A; --blue:#2745D6; --orange:#F0562C;
  --cobalt:var(--blue);
  --display:'Pixelify Sans','Courier New',monospace;
  --serif:var(--display);
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Gaegu','Comic Sans MS',cursive;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--yellow);color:var(--ink)}

/* desk (grid) + sheet (ruled paper) */
body.scrap{background-color:#8B8B88;background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);background-size:44px 44px;padding:28px 0 40px}
.sheet{width:min(1200px,calc(100% - 28px));margin:0 auto;background-color:var(--paper);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,rgba(20,19,15,.075) 31px,rgba(20,19,15,.075) 32px);box-shadow:0 0 0 1px rgba(0,0,0,.18),0 30px 60px -30px rgba(0,0,0,.5);overflow:clip}
.container{width:calc(100% - 56px);max-width:1100px;margin:0 auto}
.narrow{width:min(760px,calc(100% - 56px));margin:0 auto}
@media(max-width:600px){.container,.narrow{width:calc(100% - 36px)}body.scrap{padding-top:12px}.sheet{width:calc(100% - 16px)}}
section{padding:clamp(56px,8vw,104px) 0;position:relative}

/* type */
h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.025em;line-height:1.08}
h1{font-size:clamp(34px,5.6vw,68px)}
h2{font-size:clamp(30px,4.2vw,54px);margin-bottom:18px}
h3{font-size:clamp(22px,2.2vw,30px);line-height:1.15}
em{font-style:normal;background:linear-gradient(transparent 60%,var(--yellow) 60%,var(--yellow) 92%,transparent 92%);padding:0 .08em}
.label{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:10px;margin-bottom:18px}
.label::before{content:"";width:9px;height:9px;background:var(--pink);transform:rotate(45deg);flex:none}
.lede{font-size:clamp(18px,1.7vw,21px);line-height:1.55;color:var(--ink-2);max-width:620px}
.hand{font-family:var(--hand);font-weight:700}
.muted{color:var(--muted)}
.boxed{display:inline-block;border:1.5px solid var(--ink);padding:6px 16px;background:#fff;font-size:clamp(18px,2vw,24px);font-weight:500;margin-bottom:22px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;font:700 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:14px 22px 14px 14px;border:2px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 0 0 0 var(--yellow)}
.btn::before{content:"↗";display:grid;place-items:center;width:24px;height:24px;background:var(--blue);color:#fff;font-size:14px;flex:none}
.btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--yellow)}
.btn .arr{display:none}
.btn.line{background:#fff;color:var(--ink)}
.btn.sm{padding:10px 16px 10px 10px;font-size:12px}
.btn.sm::before{width:20px;height:20px;font-size:12px}
.btn.block{width:100%}
.link{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.link:hover{color:var(--blue)}

/* header */
.site-header{position:sticky;top:10px;z-index:50;padding:14px 14px 0}
.nav-bar{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--ink);padding:5px;position:relative}
.brand{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;font:700 18px/1 var(--display);text-decoration:none;flex:none;margin-right:4px}
.nav-links{display:flex;gap:2px;align-items:center;flex:1}
.nav-links a{display:flex;align-items:center;gap:8px;padding:9px 14px;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.nav-links a svg{width:13px;height:13px;flex:none}
.nav-links a:hover{background:var(--paper-2)}
.nav-links a.on,.nav-links a[aria-current]{background:var(--yellow)}
.nav-right{display:flex;gap:8px;align-items:center;margin-left:auto}
.dots{display:flex;gap:6px}
.dots a{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;text-decoration:none}
.dots a svg{width:13px;height:13px}
.dots a:nth-child(1){background:var(--yellow)}.dots a:nth-child(2){background:var(--pink);color:#fff}.dots a:nth-child(3){background:var(--green);color:#fff}
.dots a:hover{transform:translateY(-2px)}
.nav-cta{font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--ink);padding:10px 14px;display:flex;gap:8px;align-items:center;background:#fff}
.nav-cta:hover{background:var(--ink);color:#fff}
.menu-btn{display:none;margin-left:auto;background:#fff;border:1.5px solid var(--ink);font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;cursor:pointer;color:var(--ink)}
@media(max-width:980px){
  .menu-btn{display:block}
  .nav-links,.nav-right{display:none}
  .nav-bar.open{flex-wrap:wrap}
  .nav-bar.open .nav-links{display:flex;flex-direction:column;align-items:stretch;order:3;flex-basis:100%;padding:8px 0}
  .nav-bar.open .nav-right{display:flex;order:4;flex-basis:100%;justify-content:space-between;padding:4px 4px 8px}
}

/* hero */
.hero{padding:clamp(40px,6vw,72px) 0 clamp(48px,6vw,80px);text-align:center}
.mark-wrap{position:relative;width:min(700px,100%);margin:46px auto 36px}
.hi{position:absolute;left:50%;top:-40px;transform:translateX(-50%) rotate(-3deg);font-size:24px;white-space:nowrap}
.wordmark{position:relative;display:inline-block;padding:clamp(14px,2.4vw,26px) clamp(24px,5vw,60px) clamp(10px,2vw,20px);font-family:var(--display);font-weight:700;font-size:clamp(56px,13vw,150px);line-height:.92;letter-spacing:.02em;text-transform:uppercase}
.wordmark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wordmark svg path{fill:none;stroke:var(--orange);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.stk{position:absolute;font:700 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 13px;box-shadow:2px 3px 0 rgba(20,19,15,.18);border-radius:3px;white-space:nowrap}
.stk.mint{background:var(--mint)}.stk.yellow{background:var(--yellow)}.stk.pink{background:var(--pink);color:#fff}
.note-tag{position:absolute;font-family:var(--hand);font-weight:700;font-size:18px;padding:6px 14px;box-shadow:2px 3px 0 rgba(20,19,15,.18);white-space:nowrap}
.note-tag.yellow{background:var(--yellow)}.note-tag.mint{background:var(--mint)}
.s1{left:-6%;top:-6%;transform:rotate(-4deg)}.s2{right:-6%;top:-6%;transform:rotate(3deg)}
.s3{left:-9%;bottom:-18%;transform:rotate(-3deg)}.s4{right:-10%;bottom:-18%;transform:rotate(2deg)}
.status{font:700 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;display:flex;gap:10px;justify-content:center;align-items:center;margin-top:30px}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.hero h1{max-width:20ch;margin:30px auto 26px;position:relative}
.hero h1 .sticker-ico{display:inline-block;width:.78em;height:.78em;vertical-align:-.06em;margin-left:.15em}
.avatar{position:absolute;width:46px;height:46px;border-radius:50%;border:3px solid var(--orange);overflow:hidden;background:var(--paper-2)}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 15%;transform:scale(1.7);transform-origin:50% 22%}
.av1{left:calc(50% - 470px);top:34%}.av2{left:calc(50% + 420px);top:44%}.av1{transform:rotate(-6deg)}
.hero-cta{display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap}
.hero-sub{max-width:560px;margin:0 auto 30px;color:var(--ink-2)}
@media(max-width:1000px){.av1,.av2{display:none}}
@media(max-width:760px){
  .mark-wrap{margin:40px auto 24px}
  .stk,.note-tag{position:static;display:inline-block;margin:6px 4px;transform:none!important}
  .mark-tags{display:flex;flex-wrap:wrap;justify-content:center;margin-top:22px}
  .hi{top:-34px}
}

/* wavy divider */
.wave{display:block;width:100%;height:36px;margin:0;color:rgba(20,19,15,.45)}
.sec-note{font-family:var(--hand);font-weight:700;font-size:26px;display:inline-block;transform:rotate(-2deg);margin-bottom:10px}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr) minmax(0,230px);gap:clamp(20px,4vw,56px);align-items:center}
.about-mid{text-align:center}
.about-mid p.big{font-family:var(--hand);font-weight:400;font-size:clamp(23px,2.5vw,31px);line-height:1.25;color:var(--ink);margin-bottom:28px}
.polaroid,.portrait{position:relative;background:#fff;padding:10px 10px 36px;box-shadow:0 14px 26px -14px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06);transform:rotate(-3deg)}
.polaroid.r{transform:rotate(3deg)}
.polaroid img,.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.polaroid figcaption,.portrait::after{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--hand);font-weight:700;font-size:17px;color:var(--ink-2)}
.portrait::after{content:attr(data-cap)}
.polaroid::before,.portrait::before{content:"";position:absolute;top:-14px;left:50%;width:84px;height:26px;background:rgba(169,221,203,.85);transform:translateX(-50%) rotate(-5deg);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.polaroid.blue::before{background:rgba(110,140,255,.7)}
.polaroid.yel::before,.portrait::before{background:rgba(242,194,62,.8)}
.press-pol{display:grid;gap:12px;padding:6px 0 4px}
.press-pol img{width:100%;aspect-ratio:auto;height:auto;border:1px solid var(--rule)}
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 0 24px}
.chip{display:inline-flex;align-items:stretch;font:600 18px/1 var(--sans)}
.chip span{padding:14px 20px;clip-path:polygon(5% 0,100% 0,96% 14%,100% 28%,96% 42%,100% 56%,96% 70%,100% 84%,96% 100%,5% 100%,0 86%,4% 72%,0 58%,4% 44%,0 30%,4% 16%)}
.chip i{width:46px;display:grid;place-items:center;margin-left:4px;clip-path:polygon(8% 0,100% 0,92% 12%,100% 26%,92% 40%,100% 54%,92% 68%,100% 82%,92% 100%,8% 100%,0 86%,8% 72%,0 58%,8% 44%,0 30%,8% 16%)}
.chip i svg{width:22px;height:22px}
.chip.y span,.chip.y i{background:var(--yellow)}.chip.g span,.chip.g i{background:var(--green);color:#fff}
.chip.p span,.chip.p i{background:var(--pink);color:#fff}.chip.b span,.chip.b i{background:var(--blue);color:#fff}
@media(max-width:860px){.about-grid{grid-template-columns:1fr 1fr}.about-mid{grid-column:1/-1;order:3}.polaroid,.portrait{max-width:230px;margin:0 auto}}

/* logo stickers */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 18px;padding:10px 0}
.logo-cell{height:96px;display:flex;align-items:center;justify-content:center;padding:14px 18px;background:#fff;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(var(--r,0deg));transition:transform .15s}
.logo-cell:nth-child(5n+1){--r:-1.6deg}.logo-cell:nth-child(5n+2){--r:1.2deg}.logo-cell:nth-child(5n+3){--r:-.6deg}.logo-cell:nth-child(5n+4){--r:1.8deg}.logo-cell:nth-child(5n){--r:-1.2deg}
.logo-cell:hover{transform:rotate(0) translateY(-3px)}
.logo-cell.dark{background:var(--ink);box-shadow:4px 4px 0 var(--pink)}
.logo-cell img{max-height:58px;max-width:100%;width:auto;object-fit:contain}
.logo-cell span{font-size:14px;font-weight:700;text-align:center}.logo-cell.dark span{color:#fff}

/* tab cards */
.sec-head{margin-bottom:clamp(30px,4vw,52px)}
.sec-head .lede{margin-top:6px}
.tabcard{margin-bottom:38px}
.tabcard .tab{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:15px 40px 15px 22px;color:#fff;background:var(--blue);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 100%,0 100%)}
.tabcard .body{background:var(--ink);color:#fff;padding:clamp(26px,4vw,52px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,60px);align-items:center;position:relative}
.tabcard.yel .tab{background:var(--ink)}.tabcard.yel .body{background:var(--yellow);color:var(--ink)}
.tabcard .dot-tag{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;display:flex;gap:8px;align-items:center;margin-bottom:14px;opacity:.85}
.tabcard .dot-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.tabcard h3{font-size:clamp(30px,3.6vw,46px);margin-bottom:12px}
.tabcard p{opacity:.85;margin-bottom:18px}
.tabcard ul{list-style:none;margin-bottom:24px}
.tabcard li{padding:9px 0;border-top:1px dashed rgba(255,255,255,.3);display:flex;gap:12px;font-size:16.5px}
.tabcard.yel li{border-color:rgba(20,19,15,.35)}
.tabcard li::before{content:"→";font-weight:700}
.tabcard .link{color:inherit}
.tabcard .link:hover{opacity:.75;color:inherit}
@media(max-width:860px){.tabcard .body{grid-template-columns:1fr}}

/* mock windows inside tab cards */
.vis{position:relative;padding:18px 10px}
.win{position:relative;background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:7px 7px 0 rgba(0,0,0,.35);transform:rotate(1.4deg)}
.tabcard.yel .win{transform:rotate(-1.4deg);box-shadow:7px 7px 0 rgba(20,19,15,.3)}
.win-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:2px solid var(--ink);background:var(--paper-2);font:500 11px var(--mono);color:var(--muted)}
.win-bar i{width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:.8}
.win-bar b{font-weight:500;margin-left:8px}
.win-body{padding:20px}
.tape{position:absolute;width:92px;height:28px;background:rgba(225,225,220,.85);box-shadow:0 1px 3px rgba(0,0,0,.2);z-index:2}
.tape.tl{top:6px;left:-10px;transform:rotate(-38deg)}.tape.tr{top:6px;right:-10px;transform:rotate(38deg)}
.funnel{display:grid;gap:12px}
.funnel div{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:center;font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.04em}
.funnel span{height:26px;border:2px solid var(--ink)}
.funnel .f1 span{width:100%;background:var(--yellow)}.funnel .f2 span{width:74%;background:var(--mint)}.funnel .f3 span{width:48%;background:var(--pink)}.funnel .f4 span{width:28%;background:var(--blue)}
.win-foot{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.win-foot b{font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border:1.5px solid var(--ink)}
.win-foot b:first-child{background:var(--green);color:#fff}
.flow{list-style:none;display:grid;gap:0}
.flow li{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);padding:10px 14px;font-size:15px;font-weight:600;background:#fff;position:relative}
.flow li+li{margin-top:16px}
.flow li+li::before{content:"↓";position:absolute;left:24px;top:-18px;font:700 16px var(--mono)}
.flow li i{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--ink)}
.flow li:nth-child(1) i{background:var(--yellow)}.flow li:nth-child(2) i{background:var(--green)}.flow li:nth-child(3) i{background:var(--pink)}.flow li:nth-child(4) i{background:var(--blue)}.flow li:nth-child(5) i{background:var(--mint)}
.flow li small{margin-left:auto;font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* problems */
.problems{background:rgba(242,194,62,.14);border-block:2px dashed rgba(20,19,15,.4)}
.two-col{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px)}
@media(max-width:820px){.two-col{grid-template-columns:1fr}}
.problem-list{list-style:none;counter-reset:p}
.problem-list li{counter-increment:p;display:grid;grid-template-columns:62px 1fr;gap:14px;padding:20px 0;border-top:2px dashed rgba(20,19,15,.3)}
.problem-list li:last-child{border-bottom:2px dashed rgba(20,19,15,.3)}
.problem-list li::before{content:counter(p);font:700 40px/1 var(--display);color:var(--pink)}
.problem-list b{display:block;font-size:clamp(20px,2.2vw,26px);line-height:1.2;margin-bottom:4px;letter-spacing:-.01em}
.problem-list span{color:var(--muted)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.step{position:relative;background:#fff;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:34px 26px 28px}
.step:nth-child(1){transform:rotate(-1deg)}.step:nth-child(2){transform:rotate(.8deg)}.step:nth-child(3){transform:rotate(-.6deg)}
.step::before{content:"";position:absolute;top:-13px;left:50%;width:78px;height:24px;background:rgba(242,194,62,.85);transform:translateX(-50%) rotate(-3deg)}
.step:nth-child(2)::before{background:rgba(169,221,203,.9)}.step:nth-child(3)::before{background:rgba(255,77,151,.55)}
.step .n{font:700 64px/1 var(--display);color:var(--blue);display:block;margin-bottom:10px}
.step h3{margin-bottom:8px}.step p{color:var(--ink-2);font-size:17px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

/* numbers */
.band{background:var(--ink);color:#fff;margin:0 clamp(14px,3vw,36px);padding:clamp(34px,5vw,56px) clamp(20px,4vw,48px);position:relative}
.band .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.band strong{display:block;font:700 clamp(46px,6.4vw,84px)/1 var(--display)}
.band div:nth-child(1) strong{color:var(--yellow)}.band div:nth-child(2) strong{color:var(--mint)}.band div:nth-child(3) strong{color:var(--pink)}
.band span{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#C9C5B8}
@media(max-width:760px){.band .grid{grid-template-columns:repeat(2,1fr);row-gap:30px}}

/* sticky notes */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.note{position:relative;padding:36px 26px 24px;font-family:var(--hand);font-weight:400;font-size:clamp(24px,2.3vw,29px);line-height:1.2;box-shadow:0 16px 20px -14px rgba(0,0,0,.45);display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:260px}
.note.y{background:#FFE48A;transform:rotate(-1.8deg)}.note.m{background:#BDE8D6;transform:rotate(1.2deg)}.note.p{background:#FFC3DC;transform:rotate(-.8deg)}
.note::before{content:"";position:absolute;top:-12px;left:50%;width:74px;height:24px;background:rgba(255,255,255,.7);transform:translateX(-50%) rotate(2deg);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.note cite{font:700 11.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;display:block}
.note cite small{display:block;font-weight:500;opacity:.7;margin-top:3px;font-size:11px}
@media(max-width:900px){.notes{grid-template-columns:1fr;gap:42px}.note{min-height:0}}

/* faq */
.faq details{background:#fff;border:2px solid var(--ink);margin-bottom:12px;transition:box-shadow .15s}
.faq details[open]{box-shadow:5px 5px 0 var(--ink)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:18px 22px;font-weight:700;font-size:clamp(17px,1.8vw,20px);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 22px/1 var(--mono);color:var(--pink)}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 22px 22px;color:var(--ink-2);font-size:17px}

/* contact (dark tab card) */
.contact{background:var(--ink);color:#fff;margin:0 clamp(14px,3vw,36px);padding:clamp(44px,6vw,84px) 0}
.contact .container{width:calc(100% - clamp(36px,8vw,100px))}
.contact .label{color:#E7E3D6}
.contact h2{color:#fff}
.contact em{background:var(--yellow);color:var(--ink);padding:0 .14em}
.contact .lede{color:#DAD6C8;margin-bottom:30px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,80px);align-items:start}
.contact-list{list-style:none;border-top:2px dashed rgba(255,255,255,.3)}
.contact-list li{border-bottom:2px dashed rgba(255,255,255,.3)}
.contact-list a{display:flex;justify-content:space-between;gap:16px;padding:16px 0;text-decoration:none;font-size:18px}
.contact-list a span:first-child{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);padding-top:6px}
.contact-list a:hover{color:var(--yellow)}
.contact .btn{background:var(--ink)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.tab-top{margin:0 clamp(14px,3vw,36px);margin-bottom:-1px;position:relative;z-index:1;display:block}
.tab-top .tab{display:inline-flex;font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:15px 42px 15px 22px;color:#fff;background:var(--pink);clip-path:polygon(0 0,calc(100% - 26px) 0,100% 100%,0 100%)}

/* forms */
.form{display:grid;gap:22px}
.form label{display:block;font:700 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:7px;padding:11px 12px;background:var(--paper);border:2px solid var(--ink);border-radius:0;font:500 17px var(--sans);color:var(--ink);outline:none;transition:box-shadow .15s,background .15s}
.form textarea{resize:vertical;min-height:110px}
.form select{appearance:none;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2314130F' stroke-width='2'/%3E%3C/svg%3E") right 12px center no-repeat;padding-right:36px}
.form input:focus,.form select:focus,.form textarea:focus{background:#fff;box-shadow:4px 4px 0 var(--yellow)}
.form input::placeholder,.form textarea::placeholder{color:#A39F92;font-weight:400}
.form .opt{text-transform:none;letter-spacing:0;font:400 13px var(--sans);color:var(--muted)}
.form .hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:560px){.form .row2{grid-template-columns:1fr}}
.form .fine{font-size:14px;color:var(--muted)}
.form .msg{padding:14px 16px;border:2px solid var(--ink);background:var(--mint);font-size:16px;font-weight:600;color:var(--ink)}
.form .msg.err{background:#FFC3C0}
.form .msg a{color:inherit;font-weight:800}
.contact .form,.form-card{background:#fff;color:var(--ink);border:2px solid var(--ink);padding:clamp(22px,3.4vw,38px);box-shadow:7px 7px 0 var(--yellow);position:relative}
.contact .form{transform:rotate(.6deg)}
.contact .form label{color:var(--ink-2)}.contact .form .fine{color:var(--muted)}
.contact .form::before,.form-card::before{content:"";position:absolute;top:-13px;left:50%;width:90px;height:26px;background:rgba(169,221,203,.9);transform:translateX(-50%) rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.contact .form .btn{background:var(--ink);color:#fff}
.contact .form .btn:hover{box-shadow:5px 5px 0 var(--pink)}

/* inner pages */
.page-head{padding:clamp(44px,6vw,84px) 0 clamp(26px,4vw,48px)}
.page-head h1{font-size:clamp(38px,6.2vw,80px);max-width:16ch;margin-bottom:22px}
.prose p{color:var(--ink-2);margin-bottom:18px;max-width:640px}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,84px);align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr}.split .portrait{max-width:320px}}
.kv{list-style:none;border-top:2px dashed rgba(20,19,15,.35)}
.kv li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:2px dashed rgba(20,19,15,.35)}
.kv li b{font:700 11px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding-top:6px}
.kv a{text-decoration:none;border-bottom:2px solid var(--yellow)}
.kv a:hover{background:var(--yellow)}
.kv li a,.kv li span{overflow-wrap:anywhere}
@media(max-width:560px){.kv li{grid-template-columns:96px minmax(0,1fr);gap:12px}}
.svc-row{display:grid;grid-template-columns:100px minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,4vw,50px);padding:clamp(26px,3.4vw,40px) 0;border-top:2px dashed rgba(20,19,15,.35)}
.svc-row:last-of-type{border-bottom:2px dashed rgba(20,19,15,.35)}
.svc-row .no{font:700 13px var(--mono);color:var(--pink);padding-top:8px;letter-spacing:.05em}
.svc-row h3{margin-bottom:12px}.svc-row p{color:var(--ink-2)}
@media(max-width:860px){.svc-row{grid-template-columns:1fr}}
.price{font:700 clamp(60px,9vw,112px)/.95 var(--display)}
.price small{font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:10px}
.center-page{min-height:60vh;display:grid;place-items:center;padding:80px 0}
.big-num{font:700 clamp(110px,22vw,280px)/.85 var(--display);color:var(--blue)}

/* footer */
.site-footer{padding:clamp(52px,6vw,84px) 0 28px;border-top:2px dashed rgba(20,19,15,.4);margin-top:clamp(40px,6vw,80px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.75fr));gap:36px;padding-bottom:44px}
.foot-big{font-family:var(--hand);font-weight:700;font-size:clamp(34px,4.4vw,54px);line-height:1;transform:rotate(-1.5deg)}
.foot-big small{display:block;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-top:14px;color:var(--muted);transform:none}
.foot-col h4{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.foot-col ul{list-style:none}.foot-col li{margin-bottom:9px}
.foot-col a{text-decoration:none;font-size:16.5px;overflow-wrap:anywhere}.foot-col a:hover{background:var(--yellow)}
.foot-bottom{border-top:2px solid var(--ink);padding-top:18px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:500 12px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr}.foot-big{grid-column:1/-1}}

/* whatsapp sticker */
.wa{position:fixed;right:20px;bottom:20px;z-index:60;display:flex;align-items:center;gap:10px;background:var(--green);color:#fff;text-decoration:none;font:700 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:12px 16px 12px 12px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.wa:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.wa svg{width:22px;height:22px;fill:currentColor}
@media(max-width:520px){.wa span{display:none}.wa{padding:12px}}

.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s,transform .55s}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.status::before{animation:none}}

@media(min-width:1000px){.logo-wall{grid-template-columns:repeat(7,1fr)}}