:root{ --ink:#252118; --paper:#f6f1e6; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; }
body{ background:var(--paper); color:var(--ink); font-family:'Architects Daughter','Comic Sans MS',cursive,sans-serif; -webkit-font-smoothing:antialiased; position:relative; }
body::before{ content:""; position:fixed; inset:0; pointer-events:none; opacity:0.05; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
a{ color:inherit; text-decoration:none; }
.wrap{ position:relative; z-index:1; max-width:1060px; margin:0 auto; padding:0 26px; }

/* header */
.bar{ position:sticky; top:0; z-index:50; background:rgba(246,241,230,.86); backdrop-filter:blur(6px); border-bottom:2px dashed rgba(37,33,24,.32); }
.bar .wrap{ display:flex; align-items:center; gap:14px; padding:14px 26px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Caveat',cursive; font-size:28px; font-weight:700; }
nav{ margin-left:auto; display:flex; gap:24px; font-size:18px; }
nav a{ border-bottom:2px solid transparent; padding-bottom:2px; }
nav a:hover{ border-bottom:2px solid var(--ink); }

section{ scroll-margin-top:78px; }
.eyebrow{ font-family:'Architects Daughter',cursive; font-size:15px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.h2{ font-family:'Caveat',cursive; font-size:clamp(34px,4.6vw,52px); line-height:1.02; margin:6px 0 14px; }
.tag{ display:inline-block; transform:rotate(-2deg); border:2.4px solid var(--ink); border-radius:14px 12px 16px 12px; padding:4px 12px; font-size:15px; margin-bottom:18px; background:#fff8; }

/* hero */
.hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; padding:54px 0 30px; }
h1{ font-family:'Caveat',cursive; font-size:clamp(40px,6.2vw,70px); line-height:.98; margin:6px 0 16px; font-weight:700; }
.lead{ font-size:20px; line-height:1.5; max-width:40ch; opacity:.92; }
.btns{ display:flex; gap:14px; margin-top:24px; flex-wrap:wrap; }
.btn{ font-family:'Architects Daughter',cursive; font-size:19px; padding:11px 20px; border:2.6px solid var(--ink); background:transparent; border-radius:16px 13px 17px 12px; cursor:pointer; display:inline-block; }
.btn.fill{ background:var(--ink); color:var(--paper); transform:rotate(-1deg); }
.btn.ghost{ transform:rotate(1deg); }
.art{ display:flex; justify-content:center; }
.art svg{ max-width:340px; }

.rule{ border:0; border-top:2.6px dashed rgba(37,33,24,.3); margin:8px 0; }

/* what we make */
.block{ padding:54px 0; }
.lab{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px; }
.card{ position:relative; border:2.4px solid var(--ink); border-radius:20px 15px 22px 14px; padding:26px 22px 22px; background:#fff6; }
.card:nth-child(2){ transform:rotate(-.5deg); } .card:nth-child(3){ transform:rotate(.5deg); }
.card-ico{ margin:6px 0 6px; }
.card h3{ font-family:'Caveat',cursive; font-size:30px; margin:6px 0 8px; }
.card p{ font-size:16px; line-height:1.5; margin:0; opacity:.86; }
.pill{ position:absolute; top:-14px; right:16px; background:var(--paper); border:2.2px solid var(--ink); border-radius:12px 10px 13px 9px; padding:3px 11px; font-size:14px; transform:rotate(2deg); }

/* studio */
.studio-lead{ font-size:19px; line-height:1.55; max-width:60ch; opacity:.9; }
.feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
.feat{ border:2.4px solid var(--ink); border-radius:18px 14px 20px 13px; padding:24px 20px; text-align:center; background:#fff5; }
.feat:nth-child(2){ transform:rotate(-.6deg); } .feat:nth-child(3){ transform:rotate(.5deg); }
.feat h3{ font-family:'Caveat',cursive; font-size:27px; margin:10px 0 6px; }
.feat p{ font-size:16px; line-height:1.45; margin:0; opacity:.85; }

/* process */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; position:relative; margin-top:30px; }
.steps::before{ content:""; position:absolute; top:38px; left:8%; right:8%; border-top:2.4px dashed rgba(37,33,24,.3); z-index:0; }
.step{ position:relative; z-index:1; text-align:center; }
.disc{ width:78px; height:78px; margin:0 auto; border:2.6px solid var(--ink); border-radius:50% 48% 52% 50%; background:var(--paper); display:flex; align-items:center; justify-content:center; }
.step:nth-child(2) .disc{ transform:rotate(-3deg); } .step:nth-child(4) .disc{ transform:rotate(3deg); }
.num{ font-family:'Caveat',cursive; font-size:23px; font-weight:700; margin:12px 0 2px; }
.step h4{ font-family:'Caveat',cursive; font-size:24px; margin:0 0 6px; }
.step p{ font-size:14.5px; line-height:1.4; margin:0; opacity:.82; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1.4fr .8fr; gap:30px; margin-top:30px; align-items:start; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:'Caveat',cursive; font-size:22px; margin-bottom:4px; }
.field input,.field textarea{ width:100%; font-family:'Architects Daughter',cursive; font-size:17px; color:var(--ink); background:#fff7; border:2.4px solid var(--ink); border-radius:12px 10px 13px 9px; padding:10px 13px; }
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field textarea:focus{ outline:none; box-shadow:2px 2px 0 rgba(37,33,24,.5); }
#send{ font-family:'Architects Daughter',cursive; font-size:19px; padding:11px 22px; border:2.6px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:16px 13px 17px 12px; cursor:pointer; transform:rotate(-1deg); }
#send.sent{ background:#3a9188; }
.privacy{ font-size:14px; opacity:.65; margin-top:12px; }
.info-card{ border:2.4px solid var(--ink); border-radius:18px 14px 20px 13px; padding:22px 20px; background:#fff6; transform:rotate(.5deg); }
.info-card h4{ font-family:'Caveat',cursive; font-size:24px; margin:0 0 2px; }
.info-card p{ margin:0 0 16px; font-size:16px; opacity:.85; }

/* footer */
.foot{ border-top:2.6px dashed rgba(37,33,24,.3); margin-top:30px; }
.foot .wrap{ padding:34px 26px 44px; }
.foot-top{ display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.foot .brand{ font-size:26px; }
.foot-tag{ font-size:16px; opacity:.85; max-width:34ch; margin:6px 0 0; }
.foot nav{ margin-left:auto; }
.foot-legal{ margin-top:24px; font-size:14.5px; opacity:.7; display:flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.foot-legal .links{ display:flex; gap:10px; }

@media(max-width:820px){
  .hero{ grid-template-columns:1fr; text-align:left; } .art{ order:-1; }
  .lab,.feats{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:26px; } .steps::before{ display:none; }
  .contact-grid{ grid-template-columns:1fr; }
  nav{ gap:14px; font-size:16px; }
}

/* newsletter signup */
.signup{ padding:22px 0 40px; }
.signup-card{ position:relative; max-width:660px; margin:0 auto; background:#fffaf0; border:2.6px solid var(--ink); border-radius:26px 20px 28px 18px; padding:clamp(28px,5vw,50px); text-align:center; overflow:hidden; }
.signup-pix{ position:absolute; inset:0; pointer-events:none; }
.signup-pix i{ position:absolute; display:block; border:2px solid var(--ink); border-radius:3px; animation:bob 13s cubic-bezier(.4,.1,.3,1) infinite alternate; animation-delay:var(--d,0s); opacity:.7; }
.signup-pix i:nth-child(1){ width:18px;height:18px;background:#3a9188; top:14%;left:8%; --d:0s; }
.signup-pix i:nth-child(2){ width:12px;height:12px;background:#8a76c9; top:62%;left:12%; --d:1.4s; }
.signup-pix i:nth-child(3){ width:22px;height:22px;background:#e3a84b; top:20%;right:9%; --d:.8s; }
.signup-pix i:nth-child(4){ width:11px;height:11px;background:#e07a5f; bottom:16%;right:16%; --d:2.1s; }
.signup-pix i:nth-child(5){ width:14px;height:14px;background:#7aa95c; bottom:12%;left:40%; --d:1.1s; }
@keyframes bob{ from{ transform:translateY(0) rotate(0); } to{ transform:translateY(-20px) rotate(9deg); } }
.signup-mark{ position:relative; width:70px; height:74px; margin:0 auto 8px; display:block; overflow:visible; }
.signup h2{ position:relative; font-family:'Caveat',cursive; font-weight:700; font-size:clamp(32px,5vw,48px); line-height:1; margin:0 0 12px; }
.signup-lead{ position:relative; font-size:17px; line-height:1.55; max-width:46ch; margin:0 auto 24px; opacity:.9; }
.signup-form{ position:relative; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; max-width:470px; margin:0 auto; }
.signup-form input{ flex:1; min-width:220px; font-family:'Architects Daughter',cursive; font-size:17px; color:var(--ink); background:#fff; border:2.6px solid var(--ink); border-radius:14px 11px 15px 10px; padding:12px 16px; }
.signup-form input:focus{ outline:none; box-shadow:2px 2px 0 rgba(37,33,24,.5); }
#signupBtn{ white-space:nowrap; }
#signupBtn.done{ background:#3a9188; border-color:#3a9188; }
.signup-msg{ position:relative; min-height:20px; margin-top:16px; font-size:16px; color:#3a9188; opacity:0; transform:translateY(6px); transition:opacity .35s,transform .35s; }
.signup-msg.show{ opacity:1; transform:none; }
.signup-fine{ position:relative; margin-top:12px; font-size:14px; opacity:.6; }
.vh{ position:absolute!important; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px; }
@media (prefers-reduced-motion:reduce){ .signup-pix i{ animation:none; } }

/* animated bubbling pixels — plays in the hero, header logo stays calm */
@keyframes hd-rise{
  0%{ transform:translate(0,0) rotate(0deg); opacity:0; }
  12%{ opacity:.95; } 78%{ opacity:.92; }
  100%{ transform:translate(var(--dx,0px), var(--rise,-340px)) rotate(var(--rot,8deg)); opacity:0; }
}
.art .hd-flask .bub{ transform-box:fill-box; transform-origin:center;
  animation:hd-rise var(--dur,6s) linear var(--delay,0s) infinite; will-change:transform,opacity; }
@media (prefers-reduced-motion:reduce){ .art .hd-flask .bub{ animation:none; } }
.brand .hd-flask{ width:42px; height:45px; display:block; flex:none; overflow:visible; }

/* external image assets (SVGs referenced via <img>) */
.art img.art-flask{ width:100%; max-width:340px; height:auto; display:block; }
.brand-flask{ width:42px; height:45px; flex:none; }
.brand-logo{ width:34px; height:34px; flex:none; }
.card-ico img.labimg{ width:70px; height:70px; display:block; }
.feat > img.featimg{ width:64px; height:64px; display:block; margin:0 auto; }
.disc img.stepimg{ width:56px; height:56px; display:block; }
img.contact-envelope{ display:block; width:96px; height:72px; margin:8px 0 14px; }

/* ============================================================
   Additions for the live site: a11y helpers, forms, cookie
   banner, legal + status pages. (Merged from the previous site.)
   ============================================================ */

/* skip link */
.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:0 0 12px 8px; font-size:16px; }
.skip:focus{ left:0; }

/* honeypot — hidden from humans, bots tend to fill it */
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }

/* form validation */
.req{ opacity:.6; }
.form-error{ display:block; min-height:18px; margin-top:4px; font-size:14.5px; color:#c0603f; }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:#c0603f; box-shadow:2px 2px 0 rgba(192,96,63,.4); }
.form-status{ min-height:20px; font-size:15px; margin-top:10px; }
.signup-msg.err{ color:#c0603f; }
.btn:disabled,#send:disabled{ opacity:.6; cursor:wait; }
.cf-turnstile{ margin:6px 0 16px; }

/* cookie banner (built by consent.js) */
.cookie-banner{ position:fixed; left:0; right:0; bottom:0; z-index:90; padding:0 16px 16px; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s,transform .3s; }
.cookie-banner.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.cookie-banner__in{ max-width:720px; margin:0 auto; background:#fffaf0; border:2.6px solid var(--ink); border-radius:20px 15px 22px 14px; padding:16px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; box-shadow:3px 4px 0 rgba(37,33,24,.25); }
.cookie-banner__txt{ margin:0; flex:1; min-width:220px; font-size:15.5px; line-height:1.45; }
.cookie-banner__txt a{ text-decoration:underline; }
.cookie-banner__btns{ display:flex; gap:10px; }
.cookie-banner .btn{ font-size:16px; padding:8px 16px; }
/* consent.js uses .btn--primary/.btn--ghost — map them to the sketch buttons */
.btn--primary{ background:var(--ink); color:var(--paper); transform:rotate(-1deg); }
.btn--ghost{ transform:rotate(1deg); }
@media (prefers-reduced-motion:reduce){ .cookie-banner{ transition:none; } }

/* legal pages (privacy, terms) */
.legal{ max-width:70ch; }
.legal h1{ font-size:clamp(36px,5.4vw,58px); }
.legal h2{ font-family:'Caveat',cursive; font-size:29px; margin:34px 0 8px; }
.legal p,.legal li{ font-size:16.5px; line-height:1.6; opacity:.9; }
.legal a{ text-decoration:underline; }
.legal__updated{ font-size:15px; opacity:.6; margin-top:-6px; }
.legal__note{ border:2.4px solid var(--ink); border-radius:16px 12px 18px 11px; background:#fff6; padding:14px 18px; font-size:15.5px; line-height:1.5; transform:rotate(-.3deg); margin:20px 0 6px; }

/* status pages (thanks / confirmed / unsubscribed) */
.status-block{ text-align:center; max-width:620px; margin:0 auto; padding:64px 0 44px; }
.status-block .lead{ margin-left:auto; margin-right:auto; }
.status-check{ width:86px; height:86px; margin:0 auto 10px; display:block; }
.status-block .btns{ justify-content:center; }

/* contact error banner + 404 page */
.form-status.err{ color:#c0603f; }
.status-flask{ width:90px; height:90px; margin:0 auto 4px; display:block; }
.status-block .num{ margin:0 0 2px; }