// home-mix.jsx — Direction D: the user's curated mix.
// Foundation: A (Studio) — cream + sage + Instrument Serif italic.
// Pulls in: B's hover-row index + verbatim testimonial cells, C's "designer + developer" about + winding-path process.

const MIX_PALETTES = {
  "Bauhaus":           ["#f5f1e8","#ffffff","#1a1a1a","#e63329","#1d4ed8","#fbbf24"],
  "Mondrian":          ["#ffffff","#f5f5f0","#000000","#d40000","#0036b6","#ffd500"],
  "Pop Primary":       ["#fff8e0","#ffffff","#0a0a0a","#ff2c2c","#1e40ff","#ffd60a"],
  "Citrus & Sky":      ["#fff4d6","#fffaea","#1a3a5c","#ff6b3d","#4a90c2","#ffb8a8"],
  "Marigold & Pine":   ["#ffe9b8","#fff3d4","#1f4d3a","#f57c2a","#2d7a52","#ff9a9a"],
  "Sunset Pop":        ["#ffd9c4","#ffe8d8","#2b1f4a","#ff5e3a","#d63384","#ffc4a8"],
  "Lemon & Lavender":  ["#fff5cc","#fffae0","#3d2a6e","#c850c8","#5a4ec4","#ffb0d4"],
  "Coral Garden":      ["#ffd6cc","#ffe6dc","#1a4d4d","#ff5a5a","#2da89a","#ffd166"],
  "Tropical Cream":    ["#fff4e0","#fff9ec","#2a1a3a","#ff3b8a","#6ac76a","#4a8eff"],
};
const MIX_BANNERS = {
  "Sketch":   "sketch",
  "Plants":   "img/plants.jpg",
  "Desk":     "img/desk.jpg",
  "Portrait": "img/maia.jpg",
};
const MIX_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#f5f1e8","#ffffff","#1a1a1a","#e63329","#1d4ed8","#fbbf24"],
  "banner": "sketch",
  "bannerHeight": 380
}/*EDITMODE-END*/;

const MixCSS = `
.dirD{ --bg:#ecead8; --paper:#f3efe1; --ink:#2b3a2a; --ink-soft:rgba(43,58,42,.65);
  --rule:rgba(43,58,42,.18); --terra:#c98455; --olive:#7a8a55; --rose:#d8a89a;
  background:var(--bg); color:var(--ink); font-family:'Manrope',system-ui,sans-serif; font-size:17px; line-height:1.5;
  width:1280px; min-height:9000px; position:relative; overflow:hidden;
}
.dirD .banner{ margin:0 56px; position:relative; border-radius:6px; overflow:hidden; }
.dirD .banner img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.92) contrast(1.02); }
.dirD .banner .b-tag{ position:absolute; left:24px; bottom:20px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff; mix-blend-mode:difference; }
.dirD .banner .b-corners{ position:absolute; inset:14px; border:1px solid rgba(255,255,255,.55); border-radius:3px; pointer-events:none; }
.dirD .banner .b-stamp{ position:absolute; top:18px; right:22px; font-family:'Caveat',cursive; font-size:24px; color:#fff; transform:rotate(3deg); text-shadow:0 1px 2px rgba(0,0,0,.4); }
.dirD .serif{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }
.dirD .grot{ font-family:'Bricolage Grotesque',sans-serif; font-weight:300; letter-spacing:-.02em; }
.dirD .mono{ font-family:'JetBrains Mono',monospace; }
.dirD .hand{ font-family:'Caveat',cursive; }

/* NAV — IDX-style */
.dirD .nav{ position:absolute; top:0; left:0; right:0; padding:24px 56px; display:flex; align-items:center; justify-content:space-between; z-index:5; }
.dirD .nav .logo{ font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
.dirD .nav .logo .idx{ color:var(--terra); }
.dirD .nav .links{ display:flex; gap:32px; align-items:center; font-size:14px; }
.dirD .nav a{ color:var(--ink); text-decoration:none; padding:6px 0; }
.dirD .nav a.on{ color:var(--terra); font-family:'Instrument Serif',serif; font-style:italic; font-size:18px; }
.dirD .nav .group{ display:flex; align-items:center; gap:14px; }
.dirD .nav .booking{ display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border:1px solid var(--rule); border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; }
.dirD .nav .booking .dot{ width:8px; height:8px; border-radius:50%; background:var(--olive); box-shadow:0 0 0 3px color-mix(in srgb, var(--olive) 25%, transparent); }
.dirD .nav .cta{ background:var(--ink); color:var(--bg); padding:11px 18px; border-radius:999px; border:0; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }

/* FILE TAG — left margin */
.dirD .filetag{ position:absolute; left:56px; top:280px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; color:var(--ink-soft); line-height:1.7; max-width:160px; }
.dirD .filetag .open, .dirD .filetag .close{ color:var(--ink-soft); }
.dirD .filetag .row{ display:flex; gap:8px; }
.dirD .filetag .row::before{ content:'·'; }

/* HERO — IDX-style */
.dirD .hero{ padding:160px 56px 64px; position:relative; }
.dirD .hero h1{ font-family:'Instrument Serif',serif; font-style:italic; font-weight:400; font-size:148px; line-height:.92; letter-spacing:-.02em; margin:0; max-width:1100px; text-wrap:balance; }
.dirD .hero h1 .non-italic{ font-style:normal; font-family:'Bricolage Grotesque',sans-serif; font-weight:300; }
.dirD .hero .sub{ display:flex; gap:64px; margin-top:64px; align-items:flex-end; justify-content:space-between; }
.dirD .hero .sub p{ max-width:420px; font-size:18px; margin:0; }
.dirD .hero .meta{ display:flex; gap:32px; font-size:13px; color:var(--ink-soft); }
.dirD .hero .meta .dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--olive); margin-right:8px; vertical-align:1px; }
.dirD .hero-mark{ position:absolute; top:140px; right:80px; }
.dirD .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:14px; }
.dirD .eyebrow::before{ content:''; width:24px; height:1px; background:var(--ink-soft); }
.dirD .sec-title{ font-family:'Instrument Serif',serif; font-style:italic; font-size:80px; line-height:1; margin:14px 0 0; letter-spacing:-.01em; }

/* MARQUEE — from A */
.dirD .marq{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:22px 0; overflow:hidden; }
.dirD .marq-track{ display:flex; gap:64px; white-space:nowrap; animation:dirD-scroll 38s linear infinite; }
.dirD .marq-track > span{ font-family:'Instrument Serif',serif; font-style:italic; font-size:48px; line-height:1; display:inline-flex; align-items:center; gap:64px; }
.dirD .marq-track .star{ font-family:'Bricolage Grotesque',sans-serif; font-style:normal; font-weight:300; color:var(--terra); }
@keyframes dirD-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* WORK — tabular hover-preview from B, re-skinned to A's cream palette */
.dirD .work{ padding:120px 56px 60px; }
.dirD .work .head{ display:flex; justify-content:space-between; align-items:end; margin-bottom:64px; }
.dirD .filters{ display:flex; align-items:center; gap:8px; padding:24px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-bottom:0; }
.dirD .filters .label{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-right:12px; }
.dirD .filters .chip{ padding:7px 14px; border:1px solid var(--rule); border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.dirD .filters .chip.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.dirD .ihead{ display:grid; grid-template-columns: 60px 2.4fr 1fr 1.4fr .8fr 90px; padding:14px 0; border-bottom:1px solid var(--rule); font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.dirD .irow{ display:grid; grid-template-columns: 60px 2.4fr 1fr 1.4fr .8fr 90px; padding:24px 0; border-bottom:1px solid var(--rule); align-items:center; transition:background .15s, padding .15s; cursor:pointer; position:relative; }
.dirD .irow:hover{ background:var(--paper); padding-left:12px; padding-right:12px; }
.dirD .irow .num{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft); }
.dirD .irow .name{ font-family:'Instrument Serif',serif; font-style:italic; font-size:42px; line-height:1; letter-spacing:-.01em; }
.dirD .irow .name em{ font-family:'Caveat',cursive; font-style:normal; font-size:22px; color:var(--terra); margin-left:14px; opacity:0; transform:translateX(-6px); transition:.18s; display:inline-block; }
.dirD .irow:hover .name em{ opacity:1; transform:translateX(0); }
.dirD .irow .platform{ font-family:'JetBrains Mono',monospace; font-size:12px; }
.dirD .irow .platform .pdot{ display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:8px; vertical-align:1px; }
.dirD .irow .kind{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft); letter-spacing:.06em; }
.dirD .irow .yr{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-soft); }
.dirD .irow .arrow{ justify-self:end; font-family:'Instrument Serif',serif; font-style:italic; font-size:28px; }
.dirD .irow .preview{ position:absolute; right:120px; top:50%; transform:translate(20px,-50%) rotate(-3deg) scale(.92); width:300px; aspect-ratio:4/3; pointer-events:none; opacity:0; transition:.22s; box-shadow:0 30px 60px -25px rgba(43,58,42,.4); border-radius:6px; overflow:hidden; z-index:2; }
.dirD .irow .preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.dirD .irow:hover .preview{ opacity:1; transform:translate(0,-50%) rotate(-2deg) scale(1); }
.dirD .all-work{ margin-top:60px; display:flex; justify-content:center; }
.dirD .all-work a{ font-family:'Instrument Serif',serif; font-style:italic; font-size:34px; color:var(--ink); border-bottom:1px solid var(--ink); padding-bottom:6px; text-decoration:none; }

/* SERVICES — from A */
.dirD .services{ background:var(--ink); color:var(--bg); padding:120px 56px; }
.dirD .services .eyebrow{ color:rgba(236,234,216,.6); }
.dirD .services .eyebrow::before{ background:rgba(236,234,216,.6); }
.dirD .services .sec-title{ color:var(--bg); }
.dirD .services-list{ margin-top:80px; }
.dirD .srow{ display:grid; grid-template-columns: 90px 1fr 1.4fr; gap:48px; padding:32px 0; border-top:1px solid rgba(236,234,216,.18); align-items:baseline; }
.dirD .srow:last-child{ border-bottom:1px solid rgba(236,234,216,.18); }
.dirD .srow .num{ font-family:'JetBrains Mono',monospace; font-size:14px; color:rgba(236,234,216,.6); }
.dirD .srow .name{ font-family:'Instrument Serif',serif; font-style:italic; font-size:42px; line-height:1; }
.dirD .srow .desc{ font-size:16px; color:rgba(236,234,216,.85); }

/* PACKAGES — three pricing cards (most-picked sticker on the middle one) */
.dirD .pkgs{ padding:140px 56px 80px; }
.dirD .pkgs .head{ display:grid; grid-template-columns: 1.4fr 1fr; gap:64px; margin-bottom:64px; align-items:end; }
.dirD .pkgs h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:96px; line-height:.95; margin:14px 0 0; letter-spacing:-.02em; }
.dirD .pkgs h2 .non{ font-family:'Bricolage Grotesque',sans-serif; font-style:normal; font-weight:300; }
.dirD .pkgs h2 .terra{ color:var(--terra); }
.dirD .pkgs .lede{ font-size:16px; color:var(--ink-soft); max-width:380px; }
.dirD .pkgs-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; align-items:start; }
.dirD .pkg{ background:var(--paper); border-radius:8px; padding:32px 28px 28px; position:relative; }
.dirD .pkg.dark{ background:var(--ink); color:var(--bg); transform:translateY(-22px); padding:40px 28px 32px; box-shadow:0 30px 60px -25px rgba(0,0,0,.45); }
.dirD .pkg .ribbon{ position:absolute; top:-18px; right:24px; background:var(--terra); color:#fff7ec; font-family:'Caveat',cursive; font-size:22px; padding:6px 18px; border-radius:999px; transform:rotate(4deg); }
.dirD .pkg .for{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.6; }
.dirD .pkg.dark .for{ opacity:.55; }
.dirD .pkg h3{ font-family:'Instrument Serif',serif; font-style:italic; font-size:46px; line-height:1; margin:14px 0 22px; letter-spacing:-.01em; }
.dirD .pkg .price{ display:flex; align-items:baseline; gap:6px; margin-bottom:8px; }
.dirD .pkg .price .from{ font-family:'Instrument Serif',serif; font-style:italic; font-size:18px; color:var(--terra); }
.dirD .pkg .price .num{ font-family:'Bricolage Grotesque',sans-serif; font-weight:300; font-size:48px; letter-spacing:-.03em; }
.dirD .pkg .price .ccy{ font-family:'Instrument Serif',serif; font-style:italic; font-size:18px; color:var(--terra); }
.dirD .pkg .when{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; opacity:.7; margin-bottom:24px; }
.dirD .pkg ul{ list-style:none; padding:0; margin:0 0 28px; display:grid; gap:12px; }
.dirD .pkg li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; line-height:1.45; }
.dirD .pkg li::before{ content:'✻'; color:var(--terra); font-size:14px; flex-shrink:0; line-height:1.45; }
.dirD .pkg .btn{ display:flex; align-items:center; justify-content:center; padding:14px 18px; border-radius:999px; border:1px solid currentColor; font-size:13.5px; cursor:pointer; background:transparent; color:inherit; width:100%; }
.dirD .pkg.dark .btn{ background:var(--rose); color:var(--ink); border-color:var(--rose); }
.dirD .pkgs .also{ margin-top:60px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.dirD .pkgs .also a{ color:var(--ink); text-decoration:underline; text-underline-offset:4px; margin-left:8px; }

/* PROCESS — C's winding path, re-skinned cream */
.dirD .process{ padding:140px 56px; position:relative; background:var(--paper); }
.dirD .process h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:88px; line-height:.95; margin:14px 0 64px; letter-spacing:-.02em; max-width:900px; }
.dirD .process h2 .non{ font-family:'Bricolage Grotesque',sans-serif; font-style:normal; font-weight:300; color:var(--terra); }
.dirD .ppath{ display:grid; grid-template-columns: repeat(5, 1fr); gap:18px; position:relative; }
.dirD .ppath::before{ content:''; position:absolute; left:5%; right:5%; top:24px; height:2px; background:repeating-linear-gradient(90deg, var(--terra) 0 6px, transparent 6px 12px); }
.dirD .pstep{ position:relative; }
.dirD .pstep .dot{ width:48px; height:48px; border-radius:50%; background:var(--terra); color:#fff7ec; font-family:'Instrument Serif',serif; font-style:italic; font-size:22px; display:flex; align-items:center; justify-content:center; margin:0 auto 28px; position:relative; z-index:2; box-shadow:0 8px 18px -6px rgba(201,132,85,.5); }
.dirD .pstep:nth-child(2) .dot{ background:var(--olive); }
.dirD .pstep:nth-child(3) .dot{ background:var(--ink); }
.dirD .pstep:nth-child(4) .dot{ background:var(--rose); color:var(--ink); }
.dirD .pstep:nth-child(5) .dot{ background:var(--terra); }
.dirD .pstep h4{ font-family:'Instrument Serif',serif; font-style:italic; font-size:32px; line-height:1; margin:0 0 10px; text-align:center; }
.dirD .pstep p{ font-size:14.5px; text-align:center; max-width:200px; margin:0 auto; color:var(--ink-soft); }

/* ABOUT — C's "designer AND developer in one tab", re-skinned cream */
.dirD .about{ padding:140px 56px; }
.dirD .about-row{ display:grid; grid-template-columns: 1fr 1.1fr; gap:80px; align-items:center; }
.dirD .about-portrait{ position:relative; }
.dirD .about-portrait .frame{ aspect-ratio:4/5; background:var(--paper); border-radius:8px; overflow:hidden; transform:rotate(-2deg); box-shadow:0 30px 80px -30px rgba(43,58,42,.35); }
.dirD .about-portrait .frame img{ width:100%; height:100%; object-fit:cover; }
.dirD .about-portrait .stamp{ position:absolute; bottom:-44px; right:-44px; transform:rotate(8deg); z-index:4; }
.dirD .about-portrait .corner{ position:absolute; top:-22px; left:-22px; width:80px; height:80px; background:var(--rose); border-radius:50% 0 50% 50%; transform:rotate(-30deg); z-index:-1; }
.dirD .about-portrait .annot{ font-family:'Caveat',cursive; font-size:24px; color:var(--terra); position:absolute; top:-20px; left:30px; transform:rotate(-8deg); z-index:5; background:var(--bg); padding:2px 8px; }
.dirD .about-portrait .tape{ position:absolute; width:120px; height:28px; background:color-mix(in srgb, var(--rose) 70%, transparent); border:1px dashed color-mix(in srgb, var(--ink) 25%, transparent); z-index:3; pointer-events:none; }
.dirD .about-portrait .tape.t1{ top:-10px; left:30px; transform:rotate(-6deg); }
.dirD .about-portrait .tape.t2{ bottom:-10px; left:50px; transform:rotate(4deg); width:90px; background:color-mix(in srgb, var(--olive) 60%, transparent); }
.dirD .about h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:84px; line-height:.95; margin:14px 0 28px; letter-spacing:-.02em; }
.dirD .about h2 .non{ font-family:'Bricolage Grotesque',sans-serif; font-style:normal; font-weight:300; }
.dirD .about h2 em{ color:var(--terra); }
.dirD .about p{ font-size:17px; max-width:520px; margin:0 0 16px; }
.dirD .about .pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.dirD .about .pills > span{ padding:9px 16px; border:1.5px solid var(--ink); border-radius:999px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.06em; background:var(--paper); cursor:default; transform-origin:center; transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, color .25s, border-color .25s; animation:dirD-pill-float 6s ease-in-out infinite; }
.dirD .about .pills > span:nth-child(1){ animation-delay:0s; }
.dirD .about .pills > span:nth-child(2){ animation-delay:.6s; }
.dirD .about .pills > span:nth-child(3){ animation-delay:1.2s; }
.dirD .about .pills > span:nth-child(4){ animation-delay:1.8s; }
.dirD .about .pills > span:nth-child(5){ animation-delay:2.4s; }
.dirD .about .pills > span:hover{ transform:translateY(-3px) rotate(-3deg) scale(1.06); background:var(--terra); color:var(--bg); border-color:var(--terra); }
.dirD .about .pills > span:nth-child(2):hover{ background:var(--olive); border-color:var(--olive); transform:translateY(-3px) rotate(3deg) scale(1.06); }
.dirD .about .pills > span:nth-child(3):hover{ background:var(--rose); color:var(--ink); border-color:var(--rose); transform:translateY(-3px) rotate(-2deg) scale(1.06); }
.dirD .about .pills > span:nth-child(4):hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); transform:translateY(-3px) rotate(2deg) scale(1.06); }
@keyframes dirD-pill-float{ 0%,100%{ transform:translateY(0) rotate(0deg) } 50%{ transform:translateY(-2px) rotate(.5deg) } }
.dirD .about .more{ display:inline-block; margin-top:32px; padding:14px 24px; border-radius:999px; background:var(--ink); color:var(--bg); font-size:13.5px; text-decoration:none; }

/* TESTIMONIALS — B's verbatim mono-dark cells */
.dirD .testi{ padding:120px 56px; background:var(--ink); color:var(--bg); }
.dirD .testi .eyebrow{ color:rgba(236,234,216,.55); }
.dirD .testi .eyebrow::before{ background:rgba(236,234,216,.55); }
.dirD .testi h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:80px; line-height:.95; margin:14px 0 64px; letter-spacing:-.02em; max-width:1000px; color:var(--bg); }
.dirD .testi h2 .non{ font-family:'Bricolage Grotesque',sans-serif; font-style:normal; font-weight:300; color:var(--rose); }
.dirD .testi-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:0; border-top:1px solid rgba(236,234,216,.18); border-left:1px solid rgba(236,234,216,.18); }
.dirD .testi-cell{ border-right:1px solid rgba(236,234,216,.18); border-bottom:1px solid rgba(236,234,216,.18); padding:40px 36px; }
.dirD .testi-cell q{ font-family:'Bricolage Grotesque',sans-serif; font-weight:300; font-size:24px; line-height:1.35; quotes:none; letter-spacing:-.01em; }
.dirD .testi-cell .who{ margin-top:24px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(236,234,216,.6); }

/* CTA — from A */
.dirD .cta{ padding:160px 56px; text-align:center; position:relative; }
.dirD .cta h2{ font-family:'Instrument Serif',serif; font-style:italic; font-size:140px; line-height:.95; margin:0; letter-spacing:-.02em; }
.dirD .cta .terra{ color:var(--terra); }
.dirD .cta p{ max-width:540px; margin:32px auto 40px; font-size:18px; }
.dirD .cta .btn{ background:var(--ink); color:var(--bg); border:0; padding:20px 36px; border-radius:999px; font-size:16px; cursor:pointer; }

/* INTERACTIONS — funky additions */
.dirD .pkg{ transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.dirD .pkg:not(.dark):hover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:0 30px 60px -30px color-mix(in srgb, var(--ink) 40%, transparent); }
.dirD .pkg.dark:hover{ transform:translateY(-30px) rotate(.6deg); }
.dirD .pkg .ribbon{ animation:dirD-wobble 4.2s ease-in-out infinite; transform-origin:center; }
@keyframes dirD-wobble{ 0%,100%{transform:rotate(4deg)} 25%{transform:rotate(-3deg) translateY(-2px)} 50%{transform:rotate(6deg)} 75%{transform:rotate(-1deg) translateY(-1px)} }
.dirD .hero h1 span[style*="--terra"], .dirD .hero h1 > span:nth-child(7){ display:inline-block; transition:transform .25s, color .25s; }
.dirD .hero h1:hover span[style*="--terra"]{ transform:rotate(-2deg) scale(1.02); }
.dirD .booking .dot{ animation:dirD-pulse 2.4s ease-in-out infinite; }
@keyframes dirD-pulse{ 0%,100%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--olive) 25%, transparent) } 50%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--olive) 18%, transparent) } }
/* PROCESS — lively animated steps */
.dirD .ppath::before{ background-size:12px 2px; animation:dirD-dash 3.6s linear infinite; }
@keyframes dirD-dash{ from{ background-position:0 0 } to{ background-position:24px 0 } }
.dirD .pstep{ animation:dirD-pstep-bob 4.6s ease-in-out infinite; }
.dirD .pstep:nth-child(1){ animation-delay:.0s; }
.dirD .pstep:nth-child(2){ animation-delay:.35s; }
.dirD .pstep:nth-child(3){ animation-delay:.7s; }
.dirD .pstep:nth-child(4){ animation-delay:1.05s; }
.dirD .pstep:nth-child(5){ animation-delay:1.4s; }
@keyframes dirD-pstep-bob{ 0%,100%{ transform:translateY(0) rotate(0) } 50%{ transform:translateY(-6px) rotate(.6deg) } }
.dirD .pstep .dot{ transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; animation:dirD-dot-spin 8s ease-in-out infinite; }
.dirD .pstep:nth-child(odd) .dot{ animation-direction:reverse; }
@keyframes dirD-dot-spin{ 0%,100%{ transform:rotate(-6deg) } 50%{ transform:rotate(6deg) } }
.dirD .pstep:hover{ animation-play-state:paused; }
.dirD .pstep:hover .dot{ animation:none; transform:rotate(-14deg) scale(1.22); box-shadow:0 8px 24px -6px rgba(43,58,42,.35); }
.dirD .pstep::after{ content:''; position:absolute; left:50%; top:18px; width:14px; height:14px; border-top:2px solid var(--terra); border-right:2px solid var(--terra); transform:translate(40%,-2px) rotate(45deg); opacity:0; transition:opacity .3s, transform .3s; }
.dirD .pstep:nth-child(5)::after{ display:none; }
.dirD .pstep:hover::after{ opacity:1; transform:translate(60%,-2px) rotate(45deg); }
.dirD .pstep h4{ transition:transform .3s, color .3s; }
.dirD .pstep:hover h4{ transform:translateY(-2px); color:var(--terra); }
.dirD .srow{ transition:padding-left .25s, background .25s; }
.dirD .srow:hover{ padding-left:18px; background:rgba(255,255,255,.04); }
.dirD .srow .num{ transition:color .25s; }
.dirD .srow:hover .num{ color:var(--terra); }
.dirD .all-work a{ position:relative; transition:letter-spacing .25s, color .25s; }
.dirD .all-work a:hover{ letter-spacing:.04em; color:var(--terra); border-color:var(--terra); }
.dirD .testi-cell{ transition:background .25s; cursor:default; }
.dirD .testi-cell:hover{ background:rgba(255,255,255,.04); }
.dirD .nav .cta{ transition:transform .25s, box-shadow .25s; }
.dirD .nav .cta:hover{ transform:translateY(-2px) rotate(-1deg); box-shadow:0 10px 24px -10px var(--ink); }
.dirD .pkg .btn{ transition:transform .2s; }
.dirD .pkg .btn:hover{ transform:scale(1.03); }
.dirD .about-portrait .frame{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.dirD .about-portrait:hover .frame{ transform:rotate(2deg) scale(1.02); }
.dirD .about-portrait .stamp{ transition:transform .5s; animation:dirD-spin 22s linear infinite; }
@keyframes dirD-spin{ to{ transform:rotate(360deg) } }
.dirD .about-portrait .annot{ animation:dirD-bobble 5s ease-in-out infinite; }
@keyframes dirD-bobble{ 0%,100%{ transform:rotate(-12deg) translateY(0) } 50%{ transform:rotate(-8deg) translateY(-4px) } }
.dirD .hero{ cursor:default; }
.dirD .blob{ position:fixed; pointer-events:none; transform:translate(-50%,-50%) rotate(-6deg); z-index:9999; font-family:'Caveat',cursive; font-size:22px; color:var(--terra); white-space:nowrap; padding:6px 14px; background:var(--paper); border:1px solid var(--ink); border-radius:999px; box-shadow:3px 3px 0 var(--ink); transition:transform .12s ease-out, opacity .2s; opacity:0; }
.dirD .blob.show{ opacity:1; }
.dirD .marq:hover .marq-track{ animation-duration:8s; }
.dirD .marq-track{ transition:none; }
.dirD .hero h1 .ltr{ display:inline-block; transition:transform .25s, color .25s; }
.dirD .hero h1:hover .ltr{ animation:dirD-wave .8s ease-in-out; animation-delay:calc(var(--i,0) * 30ms); }
@keyframes dirD-wave{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px) rotate(-4deg)} }
.dirD .doodle{ position:absolute; pointer-events:none; font-family:'Caveat',cursive; color:var(--terra); }
.dirD .doodle.d1{ top:18%; right:9%; transform:rotate(8deg); font-size:28px; animation:dirD-bobble 6s ease-in-out infinite; }
.dirD .doodle.d2{ top:42%; left:4%; transform:rotate(-12deg); font-size:24px; animation:dirD-bobble 7s ease-in-out infinite reverse; }
.dirD .sticker{ position:absolute; width:90px; height:90px; border-radius:50%; background:var(--rose); color:var(--ink); font-family:'Caveat',cursive; font-size:20px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.1; transform:rotate(-8deg); cursor:grab; user-select:none; box-shadow:0 8px 18px -8px rgba(0,0,0,.3); animation:dirD-spin 30s linear infinite; }
.dirD .sticker:active{ cursor:grabbing; animation-play-state:paused; }
.dirD .sk1{ top:760px; right:80px; background:var(--paper); color:var(--terra); border:2px dashed var(--terra); width:104px; height:104px; box-shadow:4px 4px 0 var(--ink); }
.dirD .sk2{ top:5400px; left:80px; background:var(--paper); color:var(--ink); border:2px dashed var(--ink); }
.dirD .testi-cell q{ transition:transform .35s; display:inline-block; }
.dirD .testi-cell:hover q{ transform:translateY(-3px); }
.dirD .pkg h3{ transition:transform .3s; }
.dirD .pkg:hover h3{ transform:translateX(4px); }
.dirD .ihead, .dirD .filters{ transition:background .3s; }
.dirD .work:hover .ihead{ background:color-mix(in srgb, var(--terra) 8%, transparent); }
.dirD .nav .booking{ transition:transform .3s; }
.dirD .nav .booking:hover{ transform:scale(1.04) rotate(-1.5deg); }
.dirD .hero h1{ transition:letter-spacing .4s; }
.dirD .hero h1:hover{ letter-spacing:-.025em; }
.dirD .marq{ position:relative; }
.dirD .marq::before{ content:'→ hover me'; position:absolute; top:50%; left:14px; transform:translateY(-50%); font-family:'Caveat',cursive; font-size:18px; color:var(--terra); pointer-events:none; opacity:.7; z-index:2; background:var(--bg); padding:4px 10px; }

/* HANDWRITTEN NOTES — sprinkled throughout */
.dirD .note{ font-family:'Caveat',cursive; color:var(--terra); font-size:22px; line-height:1.1; pointer-events:none; }
.dirD .note.abs{ position:absolute; }
.dirD .note.n-hero{ top:230px; right:160px; transform:rotate(11deg); font-size:26px; }
.dirD .note.n-marq{ position:relative; display:inline-block; transform:rotate(-7deg); margin-left:8px; }
.dirD .note.n-work{ top:60px; right:140px; transform:rotate(-13deg); font-size:24px; }
.dirD .note.n-srvc{ top:80px; right:240px; transform:rotate(8deg); color:var(--ink); font-size:24px; }
.dirD .note.n-pkg{ top:120px; left:48%; transform:rotate(-14deg); font-size:24px; }
.dirD .note.n-proc{ top:96px; right:120px; transform:rotate(9deg); font-size:24px; }
.dirD .note.n-about{ top:90px; right:80px; transform:rotate(-12deg); font-size:26px; }
.dirD .note.n-test{ top:90px; right:80px; transform:rotate(13deg); color:var(--ink); font-size:26px; }
.dirD .note.n-cta{ top:80px; right:160px; transform:rotate(-9deg); font-size:26px; }
.dirD .work, .dirD .services, .dirD .pkgs, .dirD .process, .dirD .about, .dirD .testi, .dirD .cta{ position:relative; }
.dirD .note.bobble{ animation:none; }
.dirD .note.n-hero.bobble{ animation:dirD-note-a 6.4s ease-in-out infinite; }
.dirD .note.n-work.bobble{ animation:dirD-note-b 7.1s ease-in-out infinite; }
.dirD .note.n-srvc.bobble{ animation:dirD-note-c 5.9s ease-in-out infinite; }
.dirD .note.n-pkg.bobble{ animation:dirD-note-d 6.7s ease-in-out infinite; }
.dirD .note.n-proc.bobble{ animation:dirD-note-e 5.6s ease-in-out infinite; }
.dirD .note.n-about.bobble{ animation:dirD-note-f 7.3s ease-in-out infinite; }
.dirD .note.n-test.bobble{ animation:dirD-note-g 6.1s ease-in-out infinite; }
.dirD .note.n-cta.bobble{ animation:dirD-note-h 6.8s ease-in-out infinite; }
@keyframes dirD-note-a{ 0%,100%{transform:rotate(11deg) translateY(0)} 50%{transform:rotate(14deg) translateY(-3px)} }
@keyframes dirD-note-b{ 0%,100%{transform:rotate(-13deg) translateY(0)} 50%{transform:rotate(-10deg) translateY(-4px)} }
@keyframes dirD-note-c{ 0%,100%{transform:rotate(8deg) translateY(0)} 50%{transform:rotate(5deg) translateY(-3px)} }
@keyframes dirD-note-d{ 0%,100%{transform:rotate(-14deg) translateY(0)} 50%{transform:rotate(-11deg) translateY(-4px)} }
@keyframes dirD-note-e{ 0%,100%{transform:rotate(9deg) translateY(0)} 50%{transform:rotate(12deg) translateY(-3px)} }
@keyframes dirD-note-f{ 0%,100%{transform:rotate(-12deg) translateY(0)} 50%{transform:rotate(-9deg) translateY(-4px)} }
@keyframes dirD-note-g{ 0%,100%{transform:rotate(13deg) translateY(0)} 50%{transform:rotate(16deg) translateY(-3px)} }
@keyframes dirD-note-h{ 0%,100%{transform:rotate(-9deg) translateY(0)} 50%{transform:rotate(-6deg) translateY(-4px)} }

/* FOOTER — from A */
.dirD footer{ background:var(--ink); color:var(--bg); padding:80px 56px 40px; }
.dirD footer .top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:48px; padding-bottom:64px; border-bottom:1px solid rgba(236,234,216,.18); }
.dirD footer h5{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:rgba(236,234,216,.55); margin:0 0 18px; font-weight:500; }
.dirD footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.dirD footer a{ color:var(--bg); text-decoration:none; font-size:15px; }
.dirD footer .word{ font-family:'Instrument Serif',serif; font-style:italic; font-size:160px; line-height:1; margin:48px 0 24px; letter-spacing:-.02em; opacity:.92; }
.dirD footer .word .terra{ color:var(--terra); }
.dirD footer .legal{ display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; color:rgba(236,234,216,.5); }
`;

function SketchBanner(){
  // Hand-drawn studio scene — chaotic and joyful: laptop with site preview, plants, mug, post-its,
  // calendar, pencil, scissors, paperclip, paper plane, stars, coffee rings, scribbles, smiley sun.
  return (
    <svg viewBox="0 0 1280 380" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" style={{display:'block',background:'var(--paper)'}}>
      <defs>
        <filter id="sk-rough"><feTurbulence type="fractalNoise" baseFrequency="0.025" numOctaves="2" seed="7"/><feDisplacementMap in="SourceGraphic" scale="2.2"/></filter>
        <filter id="sk-rough2"><feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="2" seed="11"/><feDisplacementMap in="SourceGraphic" scale="1.6"/></filter>
        <pattern id="sk-grid" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--ink)" strokeWidth="0.4" opacity=".18"/>
        </pattern>
      </defs>
      {/* faint grid paper */}
      <rect width="1280" height="380" fill="url(#sk-grid)"/>
      {/* coffee ring stains */}
      <g fill="none" stroke="var(--terra)" strokeWidth="1.5" opacity=".35" filter="url(#sk-rough2)">
        <ellipse cx="780" cy="60" rx="36" ry="34"/>
        <ellipse cx="780" cy="60" rx="30" ry="28"/>
        <ellipse cx="160" cy="320" rx="28" ry="26"/>
      </g>
      <g fill="none" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" filter="url(#sk-rough)">
        {/* desk surface line */}
        <path d="M 30 290 Q 320 282 640 286 T 1250 290" />
        {/* dashed second line under desk */}
        <path d="M 30 304 L 1250 308" strokeDasharray="3 5" opacity=".45"/>
        {/* smiley sun top-left */}
        <g transform="translate(80 70)">
          <circle cx="0" cy="0" r="34" fill="var(--rose)" stroke="var(--ink)"/>
          <g stroke="var(--terra)" strokeWidth="2.5">
            <path d="M 0 -50 L 0 -42"/><path d="M 0 50 L 0 42"/>
            <path d="M -50 0 L -42 0"/><path d="M 50 0 L 42 0"/>
            <path d="M -36 -36 L -30 -30"/><path d="M 36 36 L 30 30"/>
            <path d="M -36 36 L -30 30"/><path d="M 36 -36 L 30 -30"/>
          </g>
          <circle cx="-10" cy="-6" r="2.5" fill="var(--ink)" stroke="none"/>
          <circle cx="10" cy="-6" r="2.5" fill="var(--ink)" stroke="none"/>
          <path d="M -10 6 Q 0 16 10 6"/>
        </g>
        {/* squiggly cloud */}
        <g transform="translate(220 50)" stroke="var(--ink)" fill="var(--bg)">
          <path d="M 0 12 Q -6 0 6 -2 Q 6 -14 22 -10 Q 30 -22 46 -14 Q 62 -18 64 -2 Q 76 0 70 14 Q 60 22 40 18 Q 24 24 10 18 Q -2 22 0 12 Z"/>
        </g>
        {/* laptop center */}
        <g transform="translate(420 130)">
          <path d="M 0 130 L 40 0 L 320 0 L 360 130 Z" fill="var(--bg)"/>
          <path d="M 0 130 L 360 130 L 350 150 L 10 150 Z" fill="var(--bg)"/>
          <path d="M 50 12 L 310 12 L 340 122 L 20 122 Z" fill="var(--paper)"/>
          {/* squiggly site mockup inside laptop */}
          <path d="M 70 32 L 290 36" stroke="var(--terra)" strokeWidth="3"/>
          <path d="M 70 56 L 200 58" />
          <path d="M 70 72 L 240 74" />
          <path d="M 70 88 L 180 90" />
          <rect x="70" y="100" width="60" height="14" rx="4" fill="var(--rose)" stroke="var(--ink)"/>
          {/* heart on laptop lid */}
          <path d="M 175 -12 Q 165 -22 155 -16 Q 148 -10 162 0 Q 175 8 188 0 Q 202 -10 195 -16 Q 185 -22 175 -12 Z" fill="var(--terra)" stroke="var(--ink)"/>
        </g>
        {/* plant left */}
        <g transform="translate(140 100)">
          <path d="M 30 180 L 50 180 L 60 110 L 20 110 Z" fill="var(--terra)" stroke="var(--ink)"/>
          <path d="M 26 130 L 54 130" />
          <path d="M 40 110 Q 10 60 0 20" stroke="var(--olive)" strokeWidth="3"/>
          <path d="M 40 110 Q 70 70 80 30" stroke="var(--olive)" strokeWidth="3"/>
          <path d="M 40 110 Q 40 50 30 10" stroke="var(--olive)" strokeWidth="3"/>
          <ellipse cx="2" cy="22" rx="14" ry="8" fill="var(--olive)" transform="rotate(-30 2 22)"/>
          <ellipse cx="80" cy="32" rx="14" ry="8" fill="var(--olive)" transform="rotate(40 80 32)"/>
          <ellipse cx="30" cy="12" rx="14" ry="8" fill="var(--olive)" transform="rotate(-5 30 12)"/>
          <ellipse cx="-12" cy="0" rx="10" ry="6" fill="var(--olive)" transform="rotate(-50 -12 0)"/>
        </g>
        {/* tea mug right */}
        <g transform="translate(900 200)">
          <path d="M 0 0 L 0 70 Q 0 80 10 80 L 90 80 Q 100 80 100 70 L 100 0 Z" fill="var(--rose)" stroke="var(--ink)"/>
          <path d="M 100 16 Q 130 16 130 38 Q 130 60 100 60" stroke="var(--ink)" strokeWidth="2"/>
          <path d="M 12 -10 Q 18 -22 14 -32" stroke="var(--ink)" strokeWidth="1.5"/>
          <path d="M 40 -14 Q 46 -28 40 -40" stroke="var(--ink)" strokeWidth="1.5"/>
          <path d="M 70 -10 Q 76 -24 72 -34" stroke="var(--ink)" strokeWidth="1.5"/>
          <text x="50" y="48" textAnchor="middle" fontFamily="'Caveat',cursive" fontSize="22" fill="var(--ink)" stroke="none">tea ♥</text>
        </g>
        {/* post-it stack right */}
        <g transform="translate(1080 80) rotate(-8)">
          <rect x="6" y="6" width="120" height="120" fill="var(--olive)" opacity=".55" stroke="var(--ink)"/>
          <rect x="0" y="0" width="120" height="120" fill="var(--rose)" stroke="var(--ink)"/>
          <text x="60" y="36" textAnchor="middle" fontFamily="'Caveat',cursive" fontSize="22" fill="var(--ink)" stroke="none">to do:</text>
          <path d="M 14 56 L 100 60" />
          <path d="M 14 76 L 92 80" />
          <path d="M 14 96 L 106 100" />
          <path d="M 18 54 L 26 50 L 30 60" stroke="var(--terra)" strokeWidth="2"/>
        </g>
        {/* calendar */}
        <g transform="translate(280 80) rotate(4)">
          <rect x="0" y="0" width="110" height="92" fill="var(--bg)" stroke="var(--ink)"/>
          <path d="M 0 22 L 110 22"/>
          <text x="55" y="18" textAnchor="middle" fontFamily="'JetBrains Mono',monospace" fontSize="10" fill="var(--ink)" stroke="none">SEPTEMBER</text>
          <g fontFamily="'JetBrains Mono',monospace" fontSize="9" fill="var(--ink)" stroke="none">
            <text x="14" y="38">M</text><text x="32" y="38">T</text><text x="50" y="38">W</text><text x="68" y="38">T</text><text x="86" y="38">F</text>
            <text x="14" y="54">2</text><text x="32" y="54">3</text><text x="50" y="54">4</text><text x="68" y="54">5</text><text x="86" y="54">6</text>
            <text x="14" y="70">9</text><text x="32" y="70">10</text><text x="50" y="70">11</text><text x="68" y="70">12</text><text x="86" y="70">13</text>
          </g>
          <circle cx="36" cy="66" r="9" fill="none" stroke="var(--terra)" strokeWidth="2.5"/>
          <path d="M 50 84 Q 60 96 70 84" stroke="var(--terra)" strokeWidth="2"/>
        </g>
        {/* paperclip */}
        <g transform="translate(1180 220) rotate(20)" stroke="var(--ink)" strokeWidth="2.5" fill="none">
          <path d="M 0 0 L 0 50 Q 0 60 10 60 Q 20 60 20 50 L 20 10 Q 20 4 14 4 Q 8 4 8 10 L 8 46"/>
        </g>
        {/* scissors */}
        <g transform="translate(60 200) rotate(-15)" stroke="var(--ink)" strokeWidth="2" fill="none">
          <circle cx="0" cy="0" r="10"/>
          <circle cx="0" cy="22" r="10"/>
          <path d="M 8 -6 L 60 14"/>
          <path d="M 8 28 L 60 8"/>
        </g>
        {/* pencil */}
        <g transform="translate(680 300) rotate(-10)">
          <path d="M 0 0 L 160 0 L 170 6 L 160 12 L 0 12 Z" fill="var(--rose)" stroke="var(--ink)"/>
          <path d="M 170 6 L 184 6" stroke="var(--ink)" strokeWidth="3"/>
          <path d="M 0 0 L 0 12" stroke="var(--terra)" strokeWidth="3"/>
          <path d="M 150 0 L 150 12"/>
        </g>
        {/* paper plane top-right */}
        <g transform="translate(1140 50) rotate(-12)" stroke="var(--ink)" strokeWidth="2" fill="var(--bg)">
          <path d="M 0 0 L 60 -10 L 30 14 Z"/>
          <path d="M 30 14 L 36 28 L 44 18"/>
          <path d="M 0 0 L 30 14"/>
        </g>
        <g stroke="var(--ink)" strokeWidth="1.5" fill="none" opacity=".5">
          <path d="M 1100 76 Q 1120 60 1140 70" strokeDasharray="3 4"/>
          <path d="M 1080 96 Q 1110 80 1130 90" strokeDasharray="3 4"/>
        </g>
        {/* arrow scribble pointing at laptop */}
        <g stroke="var(--terra)" strokeWidth="2.5" fill="none">
          <path d="M 730 80 Q 700 110 640 130"/>
          <path d="M 640 130 L 654 124"/>
          <path d="M 640 130 L 650 142"/>
        </g>
        {/* small notebook bottom-left */}
        <g transform="translate(140 320) rotate(-4)">
          <rect x="0" y="0" width="120" height="50" fill="var(--bg)" stroke="var(--ink)"/>
          <path d="M 0 12 L 120 12"/>
          <g stroke="var(--ink)" strokeWidth="1" opacity=".5">
            <path d="M 8 22 L 110 22"/>
            <path d="M 8 32 L 110 32"/>
            <path d="M 8 42 L 80 42"/>
          </g>
          <g transform="translate(-8 -2) rotate(-15)" stroke="var(--ink)" strokeWidth="2"><circle cx="0" cy="0" r="4"/><circle cx="0" cy="14" r="4"/><circle cx="0" cy="28" r="4"/></g>
        </g>
        {/* stars/sparkles scattered */}
        <g stroke="var(--terra)" strokeWidth="2.5">
          <path d="M 740 70 L 740 100 M 725 85 L 755 85"/>
          <path d="M 60 340 L 60 360 M 50 350 L 70 350"/>
          <path d="M 1180 280 L 1180 305 M 1167 292 L 1193 292"/>
          <path d="M 510 90 L 510 108 M 501 99 L 519 99"/>
          <path d="M 970 130 L 970 148 M 961 139 L 979 139"/>
        </g>
        {/* squiggly underline scribbles */}
        <g stroke="var(--olive)" strokeWidth="2" fill="none" opacity=".7">
          <path d="M 250 250 Q 270 244 290 252 Q 310 260 330 252 Q 350 244 370 250"/>
          <path d="M 820 332 Q 840 326 860 334 Q 880 342 900 334"/>
        </g>
      </g>
      {/* handwritten label */}
      <text x="640" y="50" textAnchor="middle" fontFamily="'Caveat',cursive" fontSize="38" fill="var(--terra)" transform="rotate(-2 640 50)">~ the studio, roughly ~</text>
      <text x="930" y="180" fontFamily="'Caveat',cursive" fontSize="22" fill="var(--ink)" transform="rotate(8 930 180)">→ keeps me going</text>
      <text x="180" y="40" fontFamily="'Caveat',cursive" fontSize="22" fill="var(--ink)" transform="rotate(-6 180 40)">good morning ☀</text>
    </svg>
  );
}

function HomeMix(){
  const [t, setTweak] = useTweaks(MIX_DEFAULTS);
  const [filter, setFilter] = React.useState('All');
  const blobRef = React.useRef(null);
  const [blobText, setBlobText] = React.useState('hi ✎');
  React.useEffect(()=>{
    const move = (e)=>{ if(!blobRef.current) return; blobRef.current.style.left = (e.clientX+18)+'px'; blobRef.current.style.top = (e.clientY+18)+'px'; blobRef.current.classList.add('show'); };
    const over = (e)=>{
      const tg = e.target;
      if (!tg || !tg.closest) return;
      if (tg.closest('a,button')) setBlobText('click ↗');
      else if (tg.closest('.irow')) setBlobText('peek →');
      else if (tg.closest('.pkg')) setBlobText('pick this!');
      else if (tg.closest('.sticker')) setBlobText('drag me ✋');
      else if (tg.closest('.testi-cell')) setBlobText('xo');
      else if (tg.closest('.pstep')) setBlobText('step →');
      else if (tg.closest('h1, h2')) setBlobText('hello ✨');
      else setBlobText('hi ✎');
    };
    const leave = ()=>{ if(blobRef.current) blobRef.current.classList.remove('show'); };
    window.addEventListener('mousemove', move); window.addEventListener('mouseover', over);
    document.addEventListener('mouseleave', leave);
    return ()=>{ window.removeEventListener('mousemove', move); window.removeEventListener('mouseover', over); document.removeEventListener('mouseleave', leave); };
  },[]);
  const filters = ['All','Squarespace','Shopify','WordPress'];
  const filtered = filter==='All' ? PROJECTS : PROJECTS.filter(p=>p.platform===filter);
  const p = Array.isArray(t.palette) ? t.palette : MIX_DEFAULTS.palette;
  const platDot = (pl) => ({ Squarespace:p[4], Shopify:p[3], WordPress:p[2], Webflow:'#5b6cff' }[pl] || p[2]);
  const inkR = parseInt(p[2].slice(1,3),16), inkG = parseInt(p[2].slice(3,5),16), inkB = parseInt(p[2].slice(5,7),16);
  const paletteVars = {
    '--bg': p[0], '--paper': p[1], '--ink': p[2],
    '--ink-soft': `rgba(${inkR},${inkG},${inkB},.65)`,
    '--rule': `rgba(${inkR},${inkG},${inkB},.18)`,
    '--terra': p[3], '--olive': p[4], '--rose': p[5],
  };

  return (
    <div className="dirD" style={paletteVars}>
      <style>{MixCSS}</style>
      <div className="blob" ref={blobRef}>{blobText}</div>
      <div className="doodle d1">looks ~ nice ~ ↘</div>
      <div className="sticker sk2">say hi!<br/>↙</div>

      <nav className="nav">
        <div className="logo">Maia·Hariton <span className="idx">/ studio</span></div>
        <div className="links">
          <a href="#" className="on">Home</a>
          <a href="#work">Work</a>
          <a href="#about">About</a>
          <a href="#services">Services</a>
          <a href="#journal">Journal</a>
          <a href="#contact">Contact</a>
        </div>
        <div className="group">
          <div className="booking"><span className="dot"/>Booking · June 2026</div>
          <button className="cta">Get in touch ↗</button>
        </div>
      </nav>

      <div className="filetag" style={{display:'none'}}>
        <div>(file 001</div>
        <div>· /home</div>
        <div>· last updated 10 May 2026)</div>
      </div>

      {/* HERO */}
      <header className="hero">
        <div className="eyebrow">Independent web designer &amp; developer · Los Angeles · 2015→</div>
        <h1>
          <span className="non-italic">Custom</span> websites<br/>
          <span className="non-italic">that make</span><br/>
          <span className="non-italic">small businesses</span><br/>
          <span style={{color:'var(--terra)'}}>unmissable.</span>
        </h1>
        <div className="sub">
          <p>Independent web design &amp; development for small businesses, studios, and the people behind them. <em>Squarespace</em>, <em>Shopify</em>, <em>WordPress</em>, <em>Webflow</em>.</p>
          <div className="meta">
            <span><span className="dot"/>Two slots open, June–July 2026</span>
          </div>
        </div>
        <div className="hero-mark" style={{display:'none'}}><Signet size={120} color="var(--ink)" textColor="var(--bg)" text="Maia Hariton · nice websites · " /></div>
        <div className="note abs n-hero bobble">unique by design ↗</div>
      </header>

      {/* MARQUEE */}
      <div className="marq">
        <div className="marq-track">
          {Array.from({length:2}).map((_,k)=> (
            <span key={k}>
              Squarespace <span className="star">/</span> Shopify <span className="star">/</span> WordPress <span className="star">/</span> Webflow <span className="star">/</span> Brand identity <span className="star">/</span> SEO <span className="star">/</span> Migrations <span className="star">/</span>
            </span>
          ))}
        </div>
      </div>

      {/* BANNER above the work index */}
      <div className="banner" style={{height: t.bannerHeight, marginTop: 80, background:'var(--paper)'}}>
        {t.banner === 'sketch' ? <SketchBanner /> : <img src={t.banner} alt=""/>}
        <div className="b-corners" style={t.banner==='sketch'?{borderColor:'color-mix(in srgb, var(--ink) 35%, transparent)'}:null}/>
        <div className="b-tag" style={t.banner==='sketch'?{color:'var(--ink)', mixBlendMode:'normal'}:null}>Selected work · 2015 — 2026</div>
        <div className="b-stamp" style={t.banner==='sketch'?{color:'var(--terra)', textShadow:'none'}:null}>~ a quiet archive ~</div>
      </div>

      {/* WORK — tabular hover-preview index */}
      <section className="work" id="work">
        <div className="note abs n-work bobble">my favourite part ✨</div>
        <div className="head">
          <div>
            <div className="eyebrow">Selected work · 2023–2026</div>
            <h2 className="sec-title">A full index of recent sites.</h2>
          </div>
          <p style={{maxWidth:340,fontSize:15,margin:0,color:'var(--ink-soft)'}}>Hover any row to peek at the site. Click to read the full case study.</p>
        </div>
        <div className="filters" style={{marginTop:48}}>
          <span className="label">Filter ↓</span>
          {filters.map(f => (
            <span key={f} className={'chip' + (f===filter ? ' on' : '')} onClick={()=>setFilter(f)}>{f}</span>
          ))}
          <span className="label" style={{marginLeft:'auto'}}>Showing {filtered.length} of {PROJECTS.length}</span>
        </div>
        <div className="ihead">
          <div>No.</div><div>Project</div><div>Platform</div><div>Type</div><div>Year</div><div style={{textAlign:'right'}}>↗</div>
        </div>
        {filtered.map((p,i) => (
          <div key={p.id} className="irow">
            <div className="num">{String(i+1).padStart(3,'0')}</div>
            <div className="name">{p.name}<em>open case →</em></div>
            <div className="platform"><span className="pdot" style={{background:platDot(p.platform)}}/>{p.platform}</div>
            <div className="kind">{p.kind}</div>
            <div className="yr">{p.year}</div>
            <div className="arrow">↗</div>
            <div className="preview"><img src={p.img} alt=""/></div>
          </div>
        ))}
        <div className="all-work"><a href="#all-work">See the full archive →</a></div>
      </section>

      {/* SERVICES */}
      <section className="services" id="services">
        <div className="note abs n-srvc bobble">pick yours ⤵</div>
        <div className="eyebrow">Services · {SERVICES.length} ways I can help</div>
        <h2 className="sec-title">Pick the one that sounds like you.</h2>
        <div className="services-list">
          {SERVICES.map(s => (
            <div key={s.n} className="srow">
              <div className="num">— {s.n}</div>
              <div className="name">{s.t}</div>
              <div className="desc">{s.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* PACKAGES */}
      <section className="pkgs" id="packages">
        <div className="note abs n-pkg bobble">no surprises! ↓</div>
        <div className="head">
          <div>
            <div className="eyebrow">Packages · Pricing · Timelines</div>
            <h2>Three ways to <span className="non terra">work together.</span></h2>
          </div>
          <p className="lede">Fixed-price packages so you know exactly what you're getting before we start. No surprise invoices, no scope creep, no late-night emails about “one more thing.”</p>
        </div>
        <div className="pkgs-grid">
          <div className="pkg">
            <div className="for">— For the speedy</div>
            <h3>One-Week Site</h3>
            <div className="price"><span className="from">from</span><span className="num">$1,800</span></div>
            <div className="when">Live in 5 business days · Squarespace only</div>
            <ul>
              <li><span></span><span>Up to 5 pages, designed in-platform</span></li>
              <li><span></span><span>Brand styling using your existing identity</span></li>
              <li><span></span><span>Mobile-responsive, basic SEO setup</span></li>
              <li><span></span><span>1 round of revisions</span></li>
              <li><span></span><span>30 days of post-launch support</span></li>
            </ul>
            <button className="btn">Book a week →</button>
          </div>
          <div className="pkg dark">
            <div className="ribbon">most picked</div>
            <div className="for">— For the considered</div>
            <h3>Custom Build</h3>
            <div className="price"><span className="from">from</span><span className="num">$5,400</span></div>
            <div className="when">5–7 weeks · any platform you like</div>
            <ul>
              <li><span></span><span>Sitemap, content plan, and proposal</span></li>
              <li><span></span><span>Custom design, no template feel</span></li>
              <li><span></span><span>Squarespace, Shopify, WordPress, or Webflow</span></li>
              <li><span></span><span>Full SEO setup &amp; analytics</span></li>
              <li><span></span><span>2 rounds of revisions, Loom walkthrough</span></li>
              <li><span></span><span>60 days of post-launch care</span></li>
            </ul>
            <button className="btn">Start a project →</button>
          </div>
          <div className="pkg">
            <div className="for">— For the soup-to-nuts</div>
            <h3>Brand &amp; Site</h3>
            <div className="price"><span className="from">from</span><span className="num">$9,500</span></div>
            <div className="when">8–10 weeks · brand + custom build</div>
            <ul>
              <li><span></span><span>Logo, type system, and color palette</span></li>
              <li><span></span><span>Brand guidelines you can hand to anyone</span></li>
              <li><span></span><span>Custom-built site on the platform of your choice</span></li>
              <li><span></span><span>Brand photography art-direction support</span></li>
              <li><span></span><span>3 rounds of revisions, 90 days of care</span></li>
            </ul>
            <button className="btn">Get the works →</button>
          </div>
        </div>
        <div className="also">Also available · Care plans from $240/mo · SEO audits from $900 · Migrations from $2,400 ·<a href="#">See full menu →</a></div>
      </section>

      {/* PROCESS — winding path */}
      <section className="process">
        <div className="note abs n-proc bobble">it's actually fun →</div>
        <div className="eyebrow">How we'll work</div>
        <h2>A small, uncomplicated <span className="non">process</span> — five steps from hello to launch.</h2>
        <div className="ppath">
          {PROCESS.map(s => (
            <div key={s.n} className="pstep">
              <div className="dot">{s.n}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ABOUT — designer AND developer in one tab */}
      <section className="about" id="about">
        <div className="note abs n-about bobble">that's me ⤵</div>
        <div className="about-row">
          <div className="about-portrait">
            <div className="corner"/>
            <div className="tape t1"/>
            <div className="tape t2"/>
            <div className="frame"><img src="img/maia.jpg" alt="Maia" onError={(e)=>{e.currentTarget.style.display='none'}}/></div>
            <div className="stamp"><Signet size={150} color="var(--terra)" textColor="var(--bg)" text="100% HUMAN MADE · NO AI HERE · " center="✿" /></div>
            <div className="annot">that's me, hi 👋</div>
          </div>
          <div>
            <div className="eyebrow">A little about me</div>
            <h2>Your designer, <em>and</em> your developer, <span className="non">in one tab.</span></h2>
            <p>I'm Maia, a one-person web studio in Los Angeles. I've spent the last 11 years quietly building beautiful, considered websites for small businesses and creative brands.</p>
            <p>Because I do both the design <em>and</em> the build, you get a site that's pixel-tight on every breakpoint, and you only have one inbox to email when something needs fixing. (You'll like my inbox. I reply.)</p>
            <p>I'm also <em>somehow</em> very organized — colour-coded Notion, named layers, tidy version history, briefs that come back when I said they would. Your project won't fall through the cracks.</p>
            <div className="pills">
              <span>Squarespace Circle since 2019</span>
              <span>Shopify Partner</span>
              <span>Speaks 🇫🇷 / 🇬🇧 / 🇷🇺</span>
            </div>
            <a href="#" className="more">More about me →</a>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS — verbatim cells */}
      <section className="testi">
        <div className="note abs n-test bobble">real humans, real words ✨</div>
        <div className="eyebrow">Reviews</div>
        <h2>What past clients have <span className="non">said</span>, verbatim.</h2>
        <div className="testi-grid">
          {TESTIMONIALS.map((t,i) => (
            <div key={i} className="testi-cell">
              <q>“{t.q}”</q>
              <div className="who">{t.who} · {t.role}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="cta" id="contact">
        <div className="note abs n-cta bobble">don't be shy ⤵</div>
        <div className="eyebrow" style={{justifyContent:'center'}}>Ready when you are</div>
        <h2>Let's<br/>get to <span className="terra">work.</span></h2>
        <p>Free 30-minute intro call, no pitch deck required. We'll figure out whether we're a fit and what your project might actually look like.</p>
        <button className="btn">Book an intro call →</button>
      </section>

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakColor label="Color palette" value={t.palette}
          options={Object.values(MIX_PALETTES)}
          onChange={(v)=>setTweak('palette', v)} />
        <TweakSection label="Banner" />
        <TweakSelect label="Image" value={t.banner}
          options={Object.entries(MIX_BANNERS).map(([k,v])=>({label:k, value:v}))}
          onChange={(v)=>setTweak('banner', v)} />
        <TweakSlider label="Height" value={t.bannerHeight} min={200} max={560} step={10} unit="px"
          onChange={(v)=>setTweak('bannerHeight', v)} />
      </TweaksPanel>

      {/* FOOTER */}
      <footer>
        <div className="top">
          <div>
            <h5>Maia Hariton</h5>
            <p style={{margin:0,fontSize:15,maxWidth:280,opacity:.85}}>Independent web designer & developer. Squarespace, Shopify, WordPress, Webflow.</p>
            <p style={{margin:'24px 0 0',fontSize:14,opacity:.6,fontFamily:"'JetBrains Mono', monospace"}}>hello@maiahariton.com<br/>Los Angeles, CA</p>
          </div>
          <div><h5>Sitemap</h5><ul><li><a href="#">Home</a></li><li><a href="#">Work</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Journal</a></li><li><a href="#">Contact</a></li></ul></div>
          <div><h5>Services</h5><ul><li><a href="#">Squarespace</a></li><li><a href="#">Shopify</a></li><li><a href="#">WordPress</a></li><li><a href="#">Webflow</a></li><li><a href="#">Brand & identity</a></li><li><a href="#">SEO</a></li></ul></div>
        </div>
        <div className="word">Maia <span className="terra">Hariton</span></div>
        <div className="legal">
          <span>© 2015–2026 Maia Hariton</span>
          <span>Made with too much tea in LA · v.24</span>
        </div>
      </footer>
    </div>
  );
}

window.HomeMix = HomeMix;