/* ============================================================
   TWINKLE DHOOT — rectangles.fm structure × creatorscut.co soul
   Warm cream, pastel stickers, italic serif, desk-collage props.
   ============================================================ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:         #f9f1e8;   /* warm cream (creatorscut) */
  --ink:        #171310;
  --paper:      #fffdf7;
  --pink:       #ffebfa;
  --pink-deep:  #ffd9ee;
  --pink-dusty: #f2c4cd;
  --butter:     #fff985;
  --butter-soft:#fffcd0;
  --blue:       #cef0ff;
  --txt-dim:    #6f665c;
  --stamp-red:  #c2452d;
  --stamp-blue: #3d5a80;
  --wine:       #8a3d5e;   /* blueprint ink on pink */

  --font-display: 'Fraunces', 'Instrument Serif', Georgia, serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-type:    'Courier Prime', 'Courier New', monospace;
  --font-type-x:  'Special Elite', 'Courier New', monospace;
  --font-hand:    'Caveat', cursive;
  --font-marker:  'Permanent Marker', cursive;

  --shadow-soft: 0 18px 50px rgba(70, 40, 30, .16);
  --shadow-hard: 5px 5px 0 var(--ink);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

html { scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--butter); color:var(--ink); }
em { font-family:var(--font-display); font-style:italic; font-weight:400; }

.grain {
  position:fixed; inset:-50%; width:200%; height:200%;
  background-image:var(--noise);
  opacity:.045; pointer-events:none; z-index:9999;
  animation:grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-5%,-5%)}
  30%{transform:translate(3%,-2%)} 50%{transform:translate(-2%,4%)}
  70%{transform:translate(4%,2%)} 90%{transform:translate(-4%,3%)}
}

/* ============ pill buttons (creatorscut) ============ */
.btn-pill {
  display:inline-block; padding:13px 30px; cursor:pointer;
  background:var(--pink-deep); color:var(--ink);
  border:2px solid var(--ink); border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:16px;
  box-shadow:var(--shadow-hard);
  transition:transform .18s, box-shadow .18s;
}
.btn-pill em { font-size:1.12em; }
.btn-pill:hover { transform:translate(2px, 2px); box-shadow:2px 2px 0 var(--ink); }
.btn-pill--full { width:100%; text-align:center; background:var(--butter); }

/* ============ TOP BAR ============ */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:910;
  display:block; text-align:center;
  background:var(--ink); padding:5px 16px;
}
.topbar__text {
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px; letter-spacing:.08em;
  color:var(--butter);
}
.topbar__text em { font-family:inherit; font-style:italic; text-transform:none; }
.topbar__text sup { font-size:10px; }
.topbar:hover .topbar__text em { text-decoration:underline; text-decoration-thickness:2px; }

/* ============ NAV ============ */
.nav {
  position:fixed; top:36px; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px, 4vw, 60px);
  padding:16px 28px;
  background:linear-gradient(to bottom, rgba(249,241,232,.95) 40%, rgba(249,241,232,0));
}
.nav__links { flex:1; display:flex; justify-content:space-between; }
.nav__logo {
  font-family:var(--font-display); font-style:italic; font-size:22px;
}
.nav__logo sup { font-size:10px; font-style:normal; }
.nav__links { display:flex; gap:clamp(14px, 3vw, 44px); }
.nav__links a {
  font-family:var(--font-mono); font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt-dim);
  transition:color .2s;
}
.nav__links a:hover { color:var(--ink); }

/* ============ SECTION HEADS ============ */
.section-head { text-align:center; margin:0 auto 40px; max-width:680px; padding:0 24px; }
.section-head__kicker {
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--txt-dim); margin-bottom:12px;
}
.section-head--left { text-align:left; margin:0 0 56px; padding:0; }
.section-head h2 {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.4rem, 5.5vw, 4rem);
  line-height:1.02; letter-spacing:-.01em;
  margin-bottom:14px;
}
.section-head h2 em { color:var(--wine); }
.section-head p { color:var(--txt-dim); font-size:15.5px; }

section { padding:64px clamp(20px, 5vw, 72px); }
@media (min-width: 1500px) {
  section { padding-inline:calc((100vw - 1320px) / 2); }
  .nav { padding-inline:calc((100vw - 1400px) / 2); }
  .topbar { padding-inline:calc((100vw - 1400px) / 2); }
}

/* ============ 1. HERO ============ */
.hero {
  min-height:100vh; position:relative; overflow:visible;
  padding-top:150px; display:flex; align-items:flex-start;
  background:radial-gradient(120% 90% at 78% 30%, rgba(242,196,205,.55) 0%, rgba(242,196,205,0) 60%);
}
.hero__kicker {
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--txt-dim); margin-bottom:18px;
}
.hero__left { position:relative; z-index:5; max-width:600px; }
.hero__prob {
  font-family:var(--font-mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--wine); font-weight:700;
  margin-top:14px;
}
.hero__note {
  position:relative; display:inline-block;
  background:
    repeating-linear-gradient(to bottom, transparent 0 34px, rgba(61,90,128,.14) 34px 35px),
    var(--blue);
  border:2px solid var(--ink); box-shadow:var(--shadow-hard);
  padding:18px 30px 24px; margin:10px 0 6px; transform:rotate(-1.4deg);
}
.hero__note .hero__prob { margin-top:0; }
.hero__note-clip {
  position:absolute; top:-16px; right:34px; width:20px; height:52px;
  border:4px solid #b9b2a4; border-radius:10px; border-bottom-color:transparent;
  transform:rotate(6deg);
}
.hero__title {
  font-family:var(--font-display); font-weight:550;
  font-size:clamp(2.6rem, 5.2vw, 4.4rem);
  line-height:1.02; letter-spacing:-.015em; margin-top:2px;
}
.hero__title em { color:var(--wine); font-weight:500; }
.hero__fix {
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.4rem, 2.4vw, 2rem);
  line-height:1.2; margin-top:4px;
}
.hero__fix em { color:var(--wine); }
.hero__bio { margin-top:30px; font-size:16.5px; max-width:470px; color:#3d362e; }
.hero__bio mark {
  background:linear-gradient(100deg, transparent 2%, var(--butter) 4%, var(--butter) 96%, transparent 98%);
  padding:1px 2px; font-weight:600; color:var(--ink);
}
.hero__cta { margin-top:36px; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.hero__seework {
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:2px solid var(--ink); padding-bottom:3px;
}

/* --- collage --- */
.collage {
  position:absolute; right:-40px; top:60px; width:min(56vw, 840px); height:900px;
  z-index:1;
}
.collage__folder {
  position:absolute; right:0; top:30px; width:88%; height:640px;
  background:linear-gradient(160deg, var(--pink-dusty), #e3a7b3 70%);
  border-radius:6px; transform:rotate(-2deg);
  box-shadow:var(--shadow-soft);
}
.collage__folder::before {
  content:""; position:absolute; top:-26px; right:60px; width:200px; height:30px;
  background:var(--pink-dusty); border-radius:8px 8px 0 0;
}
.collage__folder::after {
  content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.18; border-radius:6px;
}

.collage__sleeve {
  position:absolute; right:34px; top:64px; width:82%; height:620px;
  background:var(--paper);
  background-image:var(--noise); background-blend-mode:multiply;
  border-radius:3px; transform:rotate(1.4deg);
  box-shadow:0 18px 60px rgba(70,40,30,.25);
  padding:34px 30px 30px 64px;
}
.collage__sleeve::before {
  content:""; position:absolute; left:16px; top:24px; bottom:24px; width:22px;
  background-image:radial-gradient(circle 8px at 11px 11px, var(--bg) 8px, transparent 9px);
  background-size:22px 84px; background-repeat:repeat-y;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));
}

.print-card { color:var(--ink); font-family:var(--font-body); }
.print-card__row {
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
  font-weight:700; font-size:clamp(13px, 1.4vw, 19px); line-height:1.15;
  letter-spacing:.01em;
}
.print-card__r { font-size:22px; border:2px solid var(--ink); border-radius:50%; width:34px; height:34px; display:grid; place-items:center; flex:none; }
.print-card__right { text-align:right; }
.print-card__fine { margin-top:10px; font-size:9px; max-width:210px; margin-left:auto; text-align:right; color:#6b6156; line-height:1.5; }

.cover {
  position:relative; margin-top:26px; width:86%; aspect-ratio:1/1.05;
  background:#20201e; transform:rotate(-3deg);
  box-shadow:0 24px 60px rgba(70,40,30,.3);
  overflow:hidden;
}
.cover__photo { width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.04); }
.cover__meta {
  position:absolute; top:14px; left:16px; color:#fffdf7;
  font-family:var(--font-body); font-weight:700; font-size:11px; line-height:1.3;
  letter-spacing:.04em; text-shadow:0 1px 4px rgba(0,0,0,.6);
}
.cover__meta span { border:1.5px solid #fffdf7; border-radius:50%; padding:0 3px; font-size:9px; }
.cover__advisory {
  position:absolute; bottom:14px; left:16px; background:var(--butter); color:var(--ink);
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; line-height:1.35;
  padding:5px 8px; text-align:center; text-transform:uppercase;
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}
.cover__advisory strong { font-size:12px; letter-spacing:.14em; }

/* vinyl record */
.vinyl {
  border-radius:50%;
  background:
    radial-gradient(circle, var(--butter) 0 16.5%, #171512 17% 100%),
    #171512;
  position:absolute;
}
.vinyl::before {
  content:""; position:absolute; inset:0; border-radius:50%;
  background:repeating-radial-gradient(circle, transparent 0 6px, rgba(255,255,255,.05) 6px 7px);
}
.vinyl::after {
  content:""; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(circle at center, var(--bg) 0 1.2%, transparent 1.6%),
    conic-gradient(from 210deg, transparent 0 40%, rgba(255,255,255,.08) 46%, transparent 55%, transparent 78%, rgba(255,255,255,.06) 85%, transparent 92%);
}
.vinyl--hero { width:78%; aspect-ratio:1; right:-24%; bottom:-4%; }

/* torn notebook notes */
.note {
  position:relative;
  background:
    repeating-linear-gradient(to bottom, transparent 0 30px, rgba(60,80,120,.22) 30px 31px),
    var(--paper);
  color:var(--ink);
  padding:22px 24px 20px 40px;
  box-shadow:var(--shadow-soft);
  clip-path:polygon(2% 0, 100% 1%, 99% 100%, 3% 99%, 1% 84%, 3% 68%, 1% 50%, 3% 34%, 1% 16%);
}
.note--pink { background:
    repeating-linear-gradient(to bottom, transparent 0 30px, rgba(138,61,94,.18) 30px 31px),
    var(--pink); }
.note--butter { background:
    repeating-linear-gradient(to bottom, transparent 0 30px, rgba(120,110,20,.16) 30px 31px),
    var(--butter-soft); }
.note--blue { background:
    repeating-linear-gradient(to bottom, transparent 0 30px, rgba(40,90,120,.16) 30px 31px),
    var(--blue); }
.note::before {
  content:""; position:absolute; left:10px; top:16px; bottom:16px; width:16px;
  background-image:radial-gradient(circle 6px at 8px 8px, var(--bg) 6px, transparent 7px);
  background-size:16px 46px; background-repeat:repeat-y;
}
.note__name { font-family:var(--font-body); font-weight:700; font-size:15px; }
.note__name span { display:block; font-weight:400; font-size:11px; color:var(--txt-dim); }
.note__body { font-family:var(--font-type); font-size:15px; margin-top:14px; line-height:2; }
.note__body mark { background:linear-gradient(100deg, transparent 2%, var(--butter) 4%, var(--butter) 96%, transparent 98%); padding:1px 2px; }
.note__shot {
  margin-top:14px; border-radius:8px; border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink); transform:rotate(-1deg);
}
.note__logo { font-size:11px; color:var(--txt-dim); position:absolute; left:40px; bottom:8px; }
.note--hero { position:absolute; right:-3%; bottom:24%; width:300px; transform:rotate(4deg); z-index:6; }

.scribble {
  position:absolute; top:13%; right:28%; z-index:7;
  font-family:var(--font-marker); font-size:clamp(48px, 6vw, 96px);
  color:#fff; transform:rotate(-12deg); opacity:.95;
  text-shadow:0 4px 24px rgba(0,0,0,.3);
  pointer-events:none;
}
.sticker { pointer-events:none; line-height:1; }
.sticker--star {
  position:absolute; top:12%; left:4%; z-index:8; font-size:54px; color:var(--butter);
  -webkit-text-stroke:2px var(--ink); transform:rotate(-14deg);
}
.sticker--heart {
  position:absolute; bottom:14%; right:4%; z-index:8; font-size:46px; color:var(--pink-deep);
  -webkit-text-stroke:2px var(--ink); transform:rotate(10deg);
}
.paperclip {
  position:absolute; top:6px; right:8%; width:26px; height:70px; z-index:8;
  border:4px solid #b9b2a4; border-radius:13px;
  border-bottom-color:transparent; transform:rotate(8deg);
}

/* ============ stats sticky notes ============ */
.stats {
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 2.5vw, 34px);
  padding:0 clamp(20px, 5vw, 72px) 40px;
  position:relative; z-index:5;
}
.stat-note {
  position:relative; background:var(--paper); border:2px solid var(--ink);
  box-shadow:var(--shadow-hard); padding:26px 20px 20px; text-align:center;
}
.stat-note:nth-child(1){ transform:rotate(-2deg); }
.stat-note:nth-child(2){ transform:rotate(1.4deg); }
.stat-note:nth-child(3){ transform:rotate(-1deg); }
.stat-note:nth-child(4){ transform:rotate(2deg); }
.stat-note--pink { background:var(--pink); }
.stat-note--butter { background:var(--butter-soft); }
.stat-note--blue { background:var(--blue); }
.stat-note strong {
  font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem, 4vw, 3.4rem);
  line-height:1; display:block;
}
.stat-note p { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--txt-dim); margin-top:8px; }
.stat-note .tape { top:-11px; }

/* ============ marquee ============ */
.marquee {
  overflow:hidden; background:var(--ink); color:var(--butter);
  padding:12px 0; transform:rotate(-.6deg) scale(1.01); margin:20px 0 0;
}
.marquee__track { display:flex; width:max-content; animation:marq 36s linear infinite; }
.marquee__track span {
  font-family:var(--font-body); font-weight:600;
  font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
}
@keyframes marq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ============ 2. WAITLIST (sticky card) ============ */
.waitlist {
  position:fixed; z-index:950; width:330px;
  left:0; top:0; /* moved by JS via transform */
  background:
    repeating-linear-gradient(to bottom, transparent 0 26px, rgba(138,61,94,.14) 26px 27px),
    var(--pink);
  color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-hard), var(--shadow-soft);
  transition:opacity .4s ease, scale .4s ease;
}
.waitlist::after { content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.1; pointer-events:none; }
.waitlist__clip {
  position:absolute; top:-16px; left:22px; width:20px; height:52px; z-index:3;
  border:4px solid #b9b2a4; border-radius:10px; border-bottom-color:transparent;
  transform:rotate(6deg);
}
.waitlist__star {
  position:absolute; top:-16px; right:34px; font-size:34px; color:var(--butter);
  -webkit-text-stroke:2px var(--ink); transform:rotate(14deg); z-index:3;
}
.waitlist__head {
  display:flex; justify-content:space-between; align-items:stretch; gap:8px;
  padding:18px 18px 12px; border-bottom:2px solid rgba(23,19,16,.5);
}
.waitlist__head h3 {
  font-family:var(--font-body); font-weight:800; font-size:21px; line-height:.98;
  text-transform:uppercase; letter-spacing:-.01em;
}
.waitlist__head h3 em { font-size:26px; color:var(--wine); text-transform:none; }
.waitlist__head h3 small { font-size:10px; vertical-align:super; }
.waitlist__blueprint { width:140px; flex:none; opacity:.9; }
.waitlist__form { padding:12px 16px 16px; position:relative; z-index:2; }
.waitlist__form input {
  width:100%; padding:11px 12px; font-family:var(--font-body); font-size:14px;
  background:rgba(255,255,255,.55); border:2px solid var(--ink); border-radius:8px;
  color:var(--ink); outline:none;
}
.waitlist__form input::placeholder { color:#a08894; }
.waitlist__form .btn-pill { margin-top:10px; padding:11px 20px; font-size:14.5px; }
.waitlist__close {
  position:absolute; top:-14px; right:-14px; z-index:4; width:30px; height:30px;
  border-radius:50%; border:2px solid var(--ink); cursor:pointer;
  background:var(--butter); color:var(--ink); font-size:17px; line-height:1; font-weight:700;
  opacity:0; pointer-events:none; transition:opacity .3s;
  box-shadow:2px 2px 0 var(--ink);
}
.waitlist.docked .waitlist__close { opacity:1; pointer-events:auto; }
.waitlist.hidden { opacity:0; pointer-events:none; scale:.9; }
.waitlist.success .waitlist__form { text-align:center; font-family:var(--font-type); font-weight:700; padding:22px 16px; }

/* ============ 3. CASE STUDIES — postcard stack ============ */
.cases { padding-bottom:0; padding-top:140px; }
.stack-wrap { position:relative; }
.stack-pin {
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:grid; place-items:center;
}
.postcard {
  position:absolute; width:min(780px, 92vw); min-height:520px;
  background:var(--paper);
  color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:0 -18px 60px rgba(70,40,30,.22);
  display:grid; grid-template-columns:1.15fr 1px .85fr;
  padding:clamp(18px, 3vw, 40px);
  will-change:transform;
}
.postcard::after { content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.1; pointer-events:none; }
.postcard__left { display:flex; flex-direction:column; padding-right:clamp(12px, 2vw, 28px); min-width:0; }
.postcard__left h3 {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(1.8rem, 4.4vw, 3.2rem); line-height:1;
  letter-spacing:-.01em;
}
.postcard__left h3 em { color:var(--wine); }
.postcard__meta {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px; margin-top:14px;
  font-family:var(--font-mono); font-size:clamp(8.5px, 1vw, 11px);
  letter-spacing:.05em; color:#54493d; text-transform:uppercase; line-height:1.4;
}
.postcard__meta span { min-width:0; }
.postcard__meta span + span { text-align:right; flex:none; }
.ba { display:flex; gap:clamp(10px, 1.6vw, 22px); margin-top:auto; padding-top:20px; }
.ba__shot {
  position:relative; background:#fff; padding:7px 7px 24px;
  box-shadow:0 8px 26px rgba(70,40,30,.22); transform:rotate(-2.5deg);
  width:47%; border:1.5px solid rgba(23,19,16,.5);
}
.ba__shot + .ba__shot { transform:rotate(2deg); }
.ba__shot img { aspect-ratio:4/5; object-fit:cover; object-position:top; width:100%; }
.ba__shot--tall img { aspect-ratio:9/16; object-position:center; }
.ba__shot--auto img { aspect-ratio:auto; }
.ba__shot figcaption {
  position:absolute; bottom:5px; left:0; right:0; text-align:center;
  font-family:var(--font-type); font-weight:700; font-size:10.5px; letter-spacing:.18em; color:#222;
}
.tape {
  position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:64px; height:20px; background:rgba(255,249,133,.75);
  border:1px solid rgba(23,19,16,.15);
  box-shadow:0 2px 6px rgba(0,0,0,.12);
}
.postcard__divider { background:repeating-linear-gradient(to bottom, #9c9284 0 6px, transparent 6px 12px); }
.postcard__right { position:relative; padding-left:clamp(12px, 2vw, 28px); display:flex; flex-direction:column; min-width:0; }
.postage {
  align-self:flex-end;
  background:#fff; padding:6px;
  box-shadow:0 4px 14px rgba(70,40,30,.22);
  outline:6px solid #fff;
  mask:radial-gradient(circle 5px at 5px 5px, transparent 4.5px, #000 5px) -5px -5px / 14px 14px;
  width:clamp(64px, 8vw, 96px); flex:none;
}
.postage img { aspect-ratio:3/4; object-fit:cover; width:100%; filter:contrast(1.08) saturate(1.15); }
.postcard__note {
  margin-top:18px; font-family:var(--font-type); font-size:12.5px; line-height:1.75; color:#3b342c;
}
.postcard__note--quote { margin-top:12px; font-style:italic; color:#6b5661; }
.cases__cta { text-align:center; padding:44px 0 10px; }
.cases__cta p {
  font-family:var(--font-display); font-size:clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom:22px;
}
.cases__cta em { color:var(--wine); }
.postcard__written {
  margin-top:auto; padding-top:14px; font-size:14px; color:#54493d;
  display:flex; align-items:baseline; gap:10px;
}
.signature { font-family:var(--font-hand); font-size:30px; line-height:1; color:var(--ink); }
.postcard__lines { margin-top:8px; display:grid; gap:16px; }
.postcard__lines i { display:block; border-bottom:1.5px solid #9c9284; }

/* ============ 5. PROCESS — takeaway sheets ============ */
.process { position:relative; }
.sheets {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2.5vw, 36px);
  align-items:start;
}
.sheet--major {
  grid-column:1 / -1; min-height:auto;
  display:block; padding-bottom:54px;
  width:min(100%, 780px); justify-self:center;
}
.sheet--major .sheet__info { display:block; min-height:0; text-align:center; }
.sheet--major .sheet__info .sheet__body { margin-top:14px; max-width:560px; margin-inline:auto; text-align:left; }
.sheet--major .duo { max-width:520px; width:100%; margin:24px auto 0; }
.sheet--major .stamp--label { position:absolute; top:22px; right:22px; }
.sheet--major .sheet__name { position:absolute; bottom:16px; right:22px; margin:0; }

/* side-by-side media frames */
.duo { display:flex; gap:clamp(12px, 1.8vw, 24px); margin-top:20px; }
.duo--mini { margin-top:auto; padding-top:20px; }
.shotcard {
  position:relative; width:50%; background:#fff;
  border:1.5px solid rgba(23,19,16,.45);
  padding:6px 6px 26px;
  box-shadow:0 10px 28px rgba(70,40,30,.22);
  transform:rotate(-1.5deg);
}
.shotcard + .shotcard { transform:rotate(1.5deg); }
.shotcard video, .shotcard img {
  width:100%; display:block; aspect-ratio:9/14; object-fit:cover; background:#111;
}
.shotcard figcaption {
  position:absolute; bottom:5px; left:0; right:0; text-align:center;
  font-family:var(--font-mono); font-weight:700; font-size:9.5px;
  letter-spacing:.12em; color:#333;
}
.shotcard figcaption a { color:var(--wine); }
.shotcard figcaption a:hover { text-decoration:underline; }
.shotcard .tape { z-index:2; }
.sheet {
  position:relative; background:var(--paper); color:var(--ink);
  padding:56px 26px 26px 56px; min-height:560px;
  border:2px solid var(--ink);
  box-shadow:var(--shadow-hard), var(--shadow-soft);
  will-change:transform;
  display:flex; flex-direction:column;
}
.sheet--pink { background:var(--pink); }
.sheet--butter { background:var(--butter-soft); }
.sheet--blue { background:var(--blue); }
.sheet::after { content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.12; pointer-events:none; }
.sheet__holes {
  position:absolute; left:14px; top:20px; bottom:20px; width:20px;
  background-image:radial-gradient(circle 7px at 10px 10px, var(--bg) 7px, transparent 8px);
  background-size:20px 64px; background-repeat:repeat-y;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.sheet__title {
  font-family:var(--font-type-x); font-weight:400;
  font-size:clamp(1.6rem, 2.4vw, 2.4rem); line-height:1.05;
  text-transform:uppercase; letter-spacing:.02em;
}
.sheet__note {
  font-family:var(--font-type); font-size:10.5px; line-height:1.5; color:#54493d;
  max-width:150px;
}
.sheet__note--tr { align-self:flex-end; text-align:right; margin-top:14px; }
.sheet__body { font-family:var(--font-type); font-size:13px; margin-top:18px; line-height:1.7; }
.sheet__name {
  margin-top:auto; padding-top:26px;
  font-family:var(--font-mono); font-weight:700; font-size:15px;
  letter-spacing:.06em; text-transform:uppercase; text-align:right;
}
.stamp { font-family:var(--font-type-x); text-transform:uppercase; pointer-events:none; }
.stamp--round {
  position:absolute; left:56px; bottom:120px;
  width:74px; height:74px; border:2.5px solid var(--stamp-blue); border-radius:50%;
  display:grid; place-items:center; font-size:22px; color:var(--stamp-blue);
  transform:rotate(-14deg); opacity:.6;
}
.stamp--label {
  display:inline-block; border:2px solid var(--stamp-red); color:var(--stamp-red);
  padding:3px 10px; font-size:13px; letter-spacing:.1em;
  transform:rotate(-4deg); opacity:.85; border-radius:3px; background:rgba(255,255,255,.4);
}
.sheet .stamp--label { position:absolute; top:22px; right:20px; transform:rotate(6deg); }
.stamp--round-wide {
  border:2.5px solid var(--stamp-blue); color:var(--stamp-blue); border-radius:50px;
  padding:8px 18px; font-size:13px; transform:rotate(-3deg); opacity:.85;
}
.polaroid {
  background:#fff; padding:6px 6px 18px; width:110px;
  box-shadow:0 10px 26px rgba(70,40,30,.25);
  border:1.5px solid rgba(23,19,16,.4);
  position:relative; transform:rotate(5deg); align-self:flex-start; margin-top:20px;
}
.polaroid img { aspect-ratio:1; object-fit:cover; object-position:top; }
.polaroid--taped .tape { top:-10px; }
.polaroid--video {
  width:100%; padding:6px 6px 10px; transform:rotate(-1.5deg);
  align-self:stretch; margin-top:18px;
}
.polaroid--video video {
  width:100%; display:block; aspect-ratio:9/14; object-fit:cover; background:#111;
}
.polaroid--video .tape { top:-10px; }
.sheet__watch {
  display:inline-block; margin-top:12px; align-self:flex-start;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--wine); font-weight:700;
  border-bottom:2px solid var(--wine); padding-bottom:2px;
}
.sheet__watch:hover { color:var(--ink); border-color:var(--ink); }

/* ============ 6. REVIEWS ============ */
.reviews__grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2.6vw, 40px);
  align-items:start;
}
.reviews__grid .note { padding-bottom:36px; }
.reviews__grid .note:nth-child(2n) { transform:rotate(1.2deg); }
.reviews__grid .note:nth-child(3n) { transform:rotate(-1.4deg); }

/* ============ SERVICE FOLDERS ============ */
.folders { max-width:860px; margin:0 auto; display:grid; gap:44px; }
.folder {
  position:relative;
  background:linear-gradient(165deg, var(--pink-dusty), #e8aeb9);
  border:2px solid var(--ink); border-radius:0 10px 10px 10px;
  box-shadow:var(--shadow-hard);
}
.folder__tab {
  position:absolute; top:-30px; left:-2px;
  background:var(--pink-dusty); border:2px solid var(--ink); border-bottom:none;
  border-radius:10px 10px 0 0; padding:4px 20px;
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:.14em;
}
.folder__head {
  display:flex; align-items:center; gap:clamp(14px, 2.5vw, 28px); width:100%;
  background:none; border:none; cursor:pointer; text-align:left;
  padding:clamp(16px, 2.4vw, 24px) clamp(18px, 3vw, 30px);
  color:var(--ink);
}
.folder__head h4 {
  font-family:var(--font-display); font-weight:500; font-size:clamp(20px, 2.4vw, 28px);
}
.folder__head .stamp--label { margin-left:auto; flex:none; }
.folder__plus {
  font-family:var(--font-mono); font-size:24px; font-weight:700; flex:none;
  width:36px; height:36px; display:grid; place-items:center;
  border:2px solid var(--ink); border-radius:50%; background:var(--butter);
  box-shadow:2px 2px 0 var(--ink);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.folder.open .folder__plus { transform:rotate(45deg); }
.folder__body {
  max-height:0; overflow:hidden;
  transition:max-height .5s cubic-bezier(.16,1,.3,1);
}
.folder.open .folder__body { max-height:420px; }
.folder__paper {
  margin:0 clamp(18px, 3vw, 30px) clamp(18px, 3vw, 26px);
  background:var(--paper); border:1.5px solid rgba(23,19,16,.4);
  padding:18px 22px; transform:rotate(-.4deg);
  box-shadow:0 8px 22px rgba(70,40,30,.18);
}
.folder__paper p { font-family:var(--font-type); font-size:13px; line-height:1.7; color:#3b342c; }
.folder__paper ul { list-style:none; margin-top:8px; }
.folder__paper li {
  position:relative; padding-left:20px; margin-top:5px;
  font-family:var(--font-type); font-size:13px; line-height:1.6; color:#3b342c;
}
.folder__paper li::before {
  content:"✦"; position:absolute; left:2px; top:1px;
  font-size:10px; color:var(--wine);
}
.folder__paper .hire__best { margin-top:10px; margin-bottom:4px; }
.folder__paper .li-why { color:var(--wine); font-weight:700; }
.folder__paper .li-why::before { content:"→"; font-size:12px; top:0; }
.folder.open .folder__body { max-height:560px; }
.hire__cta { max-width:860px; margin:34px auto 0; display:flex; align-items:center; gap:26px; flex-wrap:wrap; }

/* ============ 7. HIRE ============ */
.hire__folder {
  position:relative; max-width:860px; margin:0 auto;
  background:linear-gradient(165deg, var(--pink-dusty), #e3a7b3);
  border-radius:8px; padding:clamp(22px, 4vw, 48px);
  border:2px solid var(--ink);
  box-shadow:var(--shadow-hard), var(--shadow-soft);
}
.hire__folder::after { content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.14; pointer-events:none; border-radius:8px; }
.hire__tab {
  position:absolute; top:-32px; left:40px; background:var(--pink-dusty);
  border:2px solid var(--ink); border-bottom:none;
  border-radius:8px 8px 0 0; padding:5px 22px;
  font-family:var(--font-mono); font-weight:700; font-size:12px; letter-spacing:.12em;
}
.hire__list { list-style:none; background:var(--paper); border:2px solid var(--ink); box-shadow:4px 4px 0 rgba(23,19,16,.35); }
.hire__list li {
  display:flex; align-items:center; gap:clamp(14px, 2.5vw, 30px);
  padding:clamp(16px, 2.4vw, 26px) clamp(16px, 3vw, 34px);
  border-bottom:1.5px dashed #b5a898;
}
.hire__list li:last-child { border-bottom:none; }
.hire__num { font-family:var(--font-type-x); font-size:20px; color:#8a7f71; }
.hire__list h4 {
  font-family:var(--font-display); font-weight:400; font-size:clamp(19px, 2.2vw, 26px);
  letter-spacing:.01em;
}
.hire__list p { font-family:var(--font-type); font-size:12.5px; color:#54493d; margin-top:2px; max-width:460px; }
.hire__best {
  font-family:var(--font-mono) !important; font-size:10px !important;
  letter-spacing:.06em; color:var(--wine) !important; margin-top:8px !important;
}
.hire__list .stamp--label { margin-left:auto; flex:none; }
.hire__cta {
  margin-top:28px; display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  position:relative; z-index:2;
}

/* ============ 8. SCRLL ============ */
.scrll {
  text-align:center;
  background:radial-gradient(90% 70% at 50% 20%, rgba(206,240,255,.5) 0%, rgba(206,240,255,0) 65%);
}
.scrll__coming { margin-bottom:18px; }
.scrll__wordmark {
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(4.5rem, 14vw, 11rem); line-height:.9;
  color:var(--blue); -webkit-text-stroke:3px var(--ink);
  letter-spacing:.01em;
}
.scrll__wordmark span { font-size:.22em; -webkit-text-stroke:1.5px var(--ink); vertical-align:super; }
.scrll__tag {
  font-family:var(--font-display); font-size:clamp(1.4rem, 3vw, 2.1rem);
  margin-top:16px;
}
.scrll__tag em { color:var(--wine); }
.scrll__intro { max-width:560px; margin:18px auto 0; color:#3d362e; font-size:15.5px; }
.scrll__features {
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(14px, 2vw, 28px); margin-top:56px; text-align:left;
}
.feature {
  position:relative; background:var(--paper); border:2px solid var(--ink);
  box-shadow:var(--shadow-hard); padding:24px 20px 22px; border-radius:14px;
}
.feature--pink { background:var(--pink); }
.feature--butter { background:var(--butter-soft); }
.feature--blue { background:var(--blue); }
.feature:nth-child(odd) { transform:rotate(-1.2deg); }
.feature:nth-child(even) { transform:rotate(1.2deg); }
.feature__num { font-family:var(--font-type-x); font-size:15px; color:#8a7f71; }
.feature h4 { font-family:var(--font-display); font-weight:400; font-size:24px; margin-top:8px; }
.feature p { font-size:13.5px; color:#3d362e; margin-top:8px; }
.sticker--corner {
  position:absolute; top:-14px; right:-8px; font-size:30px; color:var(--butter);
  -webkit-text-stroke:1.5px var(--ink); transform:rotate(12deg);
}
.feature--butter .sticker--corner, .feature:nth-child(4) .sticker--corner { color:var(--pink-deep); }

.scrll__form {
  position:relative; max-width:520px; margin:70px auto 0; text-align:left;
  background:
    repeating-linear-gradient(to bottom, transparent 0 28px, rgba(138,61,94,.12) 28px 29px),
    var(--pink);
  border:2px solid var(--ink); box-shadow:var(--shadow-hard), var(--shadow-soft);
  padding:34px 30px 30px;
}
.scrll__form-clip {
  position:absolute; top:-18px; left:40px; width:22px; height:58px;
  border:4px solid #b9b2a4; border-radius:11px; border-bottom-color:transparent;
  transform:rotate(5deg);
}
.scrll__form h3 { font-family:var(--font-display); font-weight:400; font-size:34px; }
.scrll__form h3 em { color:var(--wine); }
.scrll__form-sub { font-size:13px; color:#6b5661; margin-top:6px; }
.scrll__fields { display:grid; gap:16px; margin:22px 0; }
.scrll__fields label {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  display:grid; gap:6px; color:#54413c;
}
.scrll__fields small { font-size:8.5px; color:#a08894; }
.scrll__fields input, .scrll__fields textarea {
  padding:11px 12px; font-family:var(--font-body); font-size:14px;
  background:rgba(255,255,255,.6); border:2px solid var(--ink); border-radius:8px;
  color:var(--ink); outline:none; resize:vertical;
}
.scrll__fields input:focus, .scrll__fields textarea:focus { background:#fff; }

/* ============ 9. ABOUT — letter ============ */
.about { padding-bottom:140px; }
.letter {
  position:relative; max-width:620px; margin:0 auto;
  background:
    linear-gradient(to bottom, transparent 0 32.9%, rgba(0,0,0,.045) 33%, transparent 33.4%),
    linear-gradient(to bottom, transparent 0 65.9%, rgba(0,0,0,.045) 66%, transparent 66.4%),
    var(--paper);
  color:var(--ink);
  border:1.5px solid rgba(23,19,16,.35);
  padding:clamp(28px, 5vw, 56px) clamp(24px, 5vw, 60px);
  box-shadow:var(--shadow-soft);
  transform:rotate(-.6deg);
}
.letter::after { content:""; position:absolute; inset:0; background-image:var(--noise); opacity:.1; pointer-events:none; }
.letter__clip {
  position:absolute; top:-18px; left:56px; width:22px; height:60px;
  border:4px solid #b9b2a4; border-radius:11px; border-bottom-color:transparent;
  transform:rotate(4deg); z-index:3;
}
.letter__photo {
  position:absolute; top:-14px; left:36px; width:92px; background:#fff;
  padding:5px 5px 14px; transform:rotate(-6deg);
  border:1.5px solid rgba(23,19,16,.4);
  box-shadow:0 10px 26px rgba(70,40,30,.25);
}
.letter__photo img { aspect-ratio:1; object-fit:cover; object-position:top; }
.letter__from {
  text-align:right; font-family:var(--font-type); font-size:12px; color:#54493d;
  margin-bottom:40px;
}
.letter__from a { text-decoration:underline; }
.letter__body { font-family:var(--font-type); font-size:14.5px; line-height:1.9; }
.letter__body p + p { margin-top:18px; }
.letter__sign .signature { font-size:40px; }

/* ============ FOOTER ============ */
.footer { padding:110px clamp(20px, 5vw, 72px) 0; overflow:hidden; }
.footer__cols {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
}
.footer__cols h5 {
  font-family:var(--font-mono); font-weight:700; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px;
}
.footer__cols a {
  display:block; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--txt-dim);
  padding:4px 0; transition:color .2s;
}
.footer__cols a:hover { color:var(--ink); }
.footer__bar {
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:2px solid rgba(23,19,16,.25); margin-top:60px; padding:18px 0;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-dim);
}
.footer__giant {
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(6rem, 21vw, 26rem);
  line-height:.78; text-align:center;
  color:var(--pink-deep); -webkit-text-stroke:4px var(--ink);
  letter-spacing:.01em; margin-top:30px; margin-bottom:-.16em;
  user-select:none;
}
.footer__giant span { font-size:.3em; -webkit-text-stroke:2px var(--ink); vertical-align:super; }

/* ============ REVEAL ANIMATIONS ============ */
[data-reveal] {
  opacity:0; transform:translateY(48px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
[data-reveal].in { opacity:1; transform:none; }
.reviews__grid .note.in:nth-child(2n) { transform:rotate(1.2deg); }
.reviews__grid .note.in:nth-child(3n) { transform:rotate(-1.4deg); }
.feature.in:nth-child(odd) { transform:rotate(-1.2deg); }
.feature.in:nth-child(even) { transform:rotate(1.2deg); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .sheets { grid-template-columns:repeat(2, 1fr); }
  .scrll__features { grid-template-columns:repeat(2, 1fr); }
  .stats { grid-template-columns:repeat(2, 1fr); }
  .collage { opacity:.4; }
}

/* tablets & down: hero stacks, collage scales below the text at full opacity */
@media (max-width: 880px) {
  .hero { display:block; padding-top:130px; min-height:auto; }
  .hero__left { max-width:100%; }
  .collage--fit {
    position:relative; right:auto; top:auto; width:920px;
    opacity:1; transform-origin:top left; margin-top:34px;
  }
}

@media (max-width: 760px) {
  section { padding:80px 18px; }

  .topbar { padding:4px 10px; }
  .topbar__text { font-size:13px; }

  /* nav: logo on top, scrollable link row below */
  .nav { top:33px; flex-wrap:wrap; padding:10px 16px 6px; gap:4px;
         background:rgba(249,241,232,.97); }
  .nav__links {
    order:3; flex:0 0 100%; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    justify-content:flex-start; gap:20px; padding:4px 0 6px; scrollbar-width:none;
  }
  .nav__links::-webkit-scrollbar { display:none; }
  .nav__links a { white-space:nowrap; }
  .hero { padding-top:128px; }

  /* case studies: same pinned stack as desktop, narrow layout */
  .postcard { grid-template-columns:1fr; min-height:auto; }
  .postcard__divider { display:none; }
  .postcard__right { padding:16px 0 0; }
  .cases__cta { padding:30px 0 10px; }

  .sheets, .reviews__grid, .scrll__features, .stats { grid-template-columns:1fr; }
  .sheet { min-height:auto; }
  .sheet--major { grid-template-columns:1fr; padding-bottom:60px; }
  .sheet--major .duo { max-width:100%; }
  .shotcard figcaption { font-size:8.5px; letter-spacing:.08em; }

  .folders { gap:40px; }
  .folder__head { flex-wrap:wrap; row-gap:10px; }
  .folder__head .stamp--label { margin-left:0; order:3; }
  .folder__plus { margin-left:auto; }
  .hire__cta { flex-direction:column; align-items:flex-start; }

  .marquee__track span { font-size:14px; }

  .letter { padding:26px 20px 30px; }
  .letter__photo { position:static; width:110px; margin:0 0 14px; }
  .letter__from { position:static; text-align:left; margin-bottom:16px; }

  .footer__cols { grid-template-columns:repeat(2, 1fr); row-gap:34px; }
  .footer__bar { flex-direction:column; gap:6px; align-items:flex-start; }

  .waitlist { width:min(320px, calc(100vw - 20px)); }
  .waitlist__head { padding:12px 14px 8px; }
  .waitlist__head h3 { font-size:15px; }
  .waitlist__head h3 br { display:none; }
  .waitlist__blueprint { width:84px; }
  .waitlist__form { padding:10px 12px 12px; }
  .waitlist .waitlist__close { opacity:1; pointer-events:auto; }
}

@media (max-width: 480px) {
  .hero__title { font-size:2.3rem; }
  .hero__note { padding:14px 18px 18px; }
  .ba { gap:12px; }
  .footer__giant { font-size:26vw; }
}


/* ============ WAND CURSOR ============ */
html, body, a, button, .btn-pill, .folder__head, .waitlist__close, video {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><line x1='19' y1='19' x2='39' y2='39' stroke='%23171310' stroke-width='8' stroke-linecap='round'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23c89b6a' stroke-width='4.6' stroke-linecap='round'/><polygon points='14.0,1.6 17.4,10.5 26.4,10.5 19.2,16.3 22.0,25.4 14.0,20.0 5.9,25.4 8.7,16.3 1.6,10.5 10.5,10.5' fill='%23f2a8c0' stroke='%23171310' stroke-width='2.2' stroke-linejoin='round'/></svg>") 14 13, auto;
}
/* per-section illumination */
#cases, #cases a, #cases button {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><circle cx='14' cy='13.5' r='13.5' fill='%23ff9ad5' opacity='.38'/><circle cx='14' cy='13.5' r='8.5' fill='%23ff9ad5' opacity='.5'/><line x1='30' y1='6' x2='34' y2='6' stroke='%23ff9ad5' stroke-width='2.4'/><line x1='32' y1='4' x2='32' y2='8' stroke='%23ff9ad5' stroke-width='2.4'/><line x1='4' y1='30' x2='8' y2='30' stroke='%23ff9ad5' stroke-width='2.4'/><line x1='6' y1='28' x2='6' y2='32' stroke='%23ff9ad5' stroke-width='2.4'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23171310' stroke-width='8' stroke-linecap='round'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23c89b6a' stroke-width='4.6' stroke-linecap='round'/><polygon points='14.0,1.6 17.4,10.5 26.4,10.5 19.2,16.3 22.0,25.4 14.0,20.0 5.9,25.4 8.7,16.3 1.6,10.5 10.5,10.5' fill='%23ffd9ee' stroke='%23171310' stroke-width='2.2' stroke-linejoin='round'/></svg>") 14 13, auto;
}
#process, #process a, #process video {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><circle cx='14' cy='13.5' r='13.5' fill='%23fff985' opacity='.38'/><circle cx='14' cy='13.5' r='8.5' fill='%23fff985' opacity='.5'/><line x1='30' y1='6' x2='34' y2='6' stroke='%23fff985' stroke-width='2.4'/><line x1='32' y1='4' x2='32' y2='8' stroke='%23fff985' stroke-width='2.4'/><line x1='4' y1='30' x2='8' y2='30' stroke='%23fff985' stroke-width='2.4'/><line x1='6' y1='28' x2='6' y2='32' stroke='%23fff985' stroke-width='2.4'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23171310' stroke-width='8' stroke-linecap='round'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23c89b6a' stroke-width='4.6' stroke-linecap='round'/><polygon points='14.0,1.6 17.4,10.5 26.4,10.5 19.2,16.3 22.0,25.4 14.0,20.0 5.9,25.4 8.7,16.3 1.6,10.5 10.5,10.5' fill='%23fff985' stroke='%23171310' stroke-width='2.2' stroke-linejoin='round'/></svg>") 14 13, auto;
}
#hire, #hire a, #hire button, #hire .folder__head {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><circle cx='14' cy='13.5' r='13.5' fill='%238fd4ff' opacity='.38'/><circle cx='14' cy='13.5' r='8.5' fill='%238fd4ff' opacity='.5'/><line x1='30' y1='6' x2='34' y2='6' stroke='%238fd4ff' stroke-width='2.4'/><line x1='32' y1='4' x2='32' y2='8' stroke='%238fd4ff' stroke-width='2.4'/><line x1='4' y1='30' x2='8' y2='30' stroke='%238fd4ff' stroke-width='2.4'/><line x1='6' y1='28' x2='6' y2='32' stroke='%238fd4ff' stroke-width='2.4'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23171310' stroke-width='8' stroke-linecap='round'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23c89b6a' stroke-width='4.6' stroke-linecap='round'/><polygon points='14.0,1.6 17.4,10.5 26.4,10.5 19.2,16.3 22.0,25.4 14.0,20.0 5.9,25.4 8.7,16.3 1.6,10.5 10.5,10.5' fill='%23cef0ff' stroke='%23171310' stroke-width='2.2' stroke-linejoin='round'/></svg>") 14 13, auto;
}
#reviews, #reviews a {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><circle cx='14' cy='13.5' r='13.5' fill='%23ff8d73' opacity='.38'/><circle cx='14' cy='13.5' r='8.5' fill='%23ff8d73' opacity='.5'/><line x1='30' y1='6' x2='34' y2='6' stroke='%23ff8d73' stroke-width='2.4'/><line x1='32' y1='4' x2='32' y2='8' stroke='%23ff8d73' stroke-width='2.4'/><line x1='4' y1='30' x2='8' y2='30' stroke='%23ff8d73' stroke-width='2.4'/><line x1='6' y1='28' x2='6' y2='32' stroke='%23ff8d73' stroke-width='2.4'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23171310' stroke-width='8' stroke-linecap='round'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23c89b6a' stroke-width='4.6' stroke-linecap='round'/><polygon points='14.0,1.6 17.4,10.5 26.4,10.5 19.2,16.3 22.0,25.4 14.0,20.0 5.9,25.4 8.7,16.3 1.6,10.5 10.5,10.5' fill='%23ffb39a' stroke='%23171310' stroke-width='2.2' stroke-linejoin='round'/></svg>") 14 13, auto;
}
#scrll, #scrll a, #scrll button, #scrll .btn-pill, #scrll label {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><circle cx='14' cy='13.5' r='13.5' fill='%23ffe14d' opacity='.38'/><circle cx='14' cy='13.5' r='8.5' fill='%23ffe14d' opacity='.5'/><line x1='30' y1='6' x2='34' y2='6' stroke='%23ffe14d' stroke-width='2.4'/><line x1='32' y1='4' x2='32' y2='8' stroke='%23ffe14d' stroke-width='2.4'/><line x1='4' y1='30' x2='8' y2='30' stroke='%23ffe14d' stroke-width='2.4'/><line x1='6' y1='28' x2='6' y2='32' stroke='%23ffe14d' stroke-width='2.4'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23171310' stroke-width='8' stroke-linecap='round'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23c89b6a' stroke-width='4.6' stroke-linecap='round'/><polygon points='14.0,1.6 17.4,10.5 26.4,10.5 19.2,16.3 22.0,25.4 14.0,20.0 5.9,25.4 8.7,16.3 1.6,10.5 10.5,10.5' fill='%23fff985' stroke='%23171310' stroke-width='2.2' stroke-linejoin='round'/></svg>") 14 13, auto;
}
#about, #about a, .footer, .footer a {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><circle cx='14' cy='13.5' r='13.5' fill='%239cc4e4' opacity='.38'/><circle cx='14' cy='13.5' r='8.5' fill='%239cc4e4' opacity='.5'/><line x1='30' y1='6' x2='34' y2='6' stroke='%239cc4e4' stroke-width='2.4'/><line x1='32' y1='4' x2='32' y2='8' stroke='%239cc4e4' stroke-width='2.4'/><line x1='4' y1='30' x2='8' y2='30' stroke='%239cc4e4' stroke-width='2.4'/><line x1='6' y1='28' x2='6' y2='32' stroke='%239cc4e4' stroke-width='2.4'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23171310' stroke-width='8' stroke-linecap='round'/><line x1='19' y1='19' x2='39' y2='39' stroke='%23c89b6a' stroke-width='4.6' stroke-linecap='round'/><polygon points='14.0,1.6 17.4,10.5 26.4,10.5 19.2,16.3 22.0,25.4 14.0,20.0 5.9,25.4 8.7,16.3 1.6,10.5 10.5,10.5' fill='%23cfe3f5' stroke='%23171310' stroke-width='2.2' stroke-linejoin='round'/></svg>") 14 13, auto;
}
input, textarea { cursor:text; }

/* ============ CUTOUTS ============ */
.cutout {
  position:absolute; z-index:8; pointer-events:none;
  transform:rotate(var(--r, 0deg));
  filter:drop-shadow(2px 4px 6px rgba(70,40,30,.22));
  animation:cutout-bob 6s ease-in-out infinite;
}
.cutout:nth-of-type(even) { animation-duration:7.5s; animation-delay:.9s; }
@keyframes cutout-bob {
  0%, 100% { transform:rotate(var(--r, 0deg)) translateY(0); }
  50%      { transform:rotate(calc(var(--r, 0deg) + 4deg)) translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .cutout { animation:none; } }
.cutout--hero-1 { top:5%; left:-3%; width:96px; --r:-12deg; }
.cutout--hero-2 { bottom:8%; right:6%; width:88px; --r:10deg; }
.stats { position:relative; }
.cutout--stats { top:-32px; right:6%; width:60px; --r:14deg; }
.cutout--wait { top:-22px; right:-16px; width:44px; --r:18deg; }
.footer { position:relative; }
.cutout--footer { top:5%; right:5%; width:96px; --r:8deg; }
@media (max-width: 760px) {
  .cutout--stats { display:none; }
  .cutout--hero-1 { width:64px; }
  .cutout--hero-2 { width:58px; }
  .cutout--footer { width:64px; }
}

/* ============ REVIEWS: cluster -> fan out (scroll-linked) ============ */
.reviews__grid { position:relative; }
.reviews__grid .note { will-change:transform; }
.reviews__grid .note:nth-child(1) { z-index:6; }
.reviews__grid .note:nth-child(2) { z-index:5; }
.reviews__grid .note:nth-child(3) { z-index:4; }
.reviews__grid .note:nth-child(4) { z-index:3; }
.reviews__grid .note:nth-child(5) { z-index:2; }
.reviews__grid .note:nth-child(6) { z-index:1; }

/* ============ BTS SHEETS: wand hover pop ============ */
.sheet { transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease; }
.sheet:hover {
  --lift:-10px; --pop:1.02;
  box-shadow:9px 12px 0 var(--ink), 0 26px 60px rgba(70,40,30,.24);
  z-index:5;
}

/* ---------------------------------------------------------------------------
   Form states (waitlist backend)
--------------------------------------------------------------------------- */

/* Honeypot. Off-screen rather than display:none, so bots still fill it in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  margin: 10px 0 0;
  font-family: 'Courier Prime', monospace;
  font-size: 0.72rem;
  line-height: 1.45;
  text-align: center;
  min-height: 1em;
}

.form-status:empty {
  margin: 0;
  min-height: 0;
}

.form-status[data-tone='error'] {
  color: #c2452d;
}

.form-done {
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  text-align: center;
  padding: 14px 0;
  margin: 0;
}

.js-waitlist-form button[type='submit']:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   DISCOVERY QUESTIONNAIRE (start.html)
   A sheet of taped-down paper, four steps, chunky controls to match the site.
--------------------------------------------------------------------------- */

.discovery { padding-top:120px; padding-bottom:120px; }

/* --- progress tabs --- */
.disc-steps {
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  max-width:760px; margin:0 auto 22px; padding:0; list-style:none;
}
.disc-steps__item {
  display:flex; align-items:center; gap:7px;
  padding:7px 15px; border:2px solid var(--ink); border-radius:999px;
  background:var(--paper); color:var(--txt-dim);
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background .2s, color .2s, transform .2s;
}
.disc-steps__item span { font-weight:700; opacity:.55; }
.disc-steps__item.is-done { background:var(--blue); color:var(--ink); }
.disc-steps__item.is-current {
  background:var(--butter); color:var(--ink);
  box-shadow:var(--shadow-hard); transform:translate(-1px,-1px);
}
.disc-steps__item.is-current span { opacity:1; }

/* --- the sheet --- */
.disc, .disc-out {
  position:relative; max-width:760px; margin:0 auto;
  background:var(--paper); border:2px solid var(--ink); border-radius:6px;
  padding:44px clamp(20px, 4vw, 46px);
  box-shadow:var(--shadow-soft);
}
.disc__tape {
  position:absolute; top:-13px; width:104px; height:26px;
  background:rgba(255,249,133,.72);
  border:1px solid rgba(23,19,16,.14);
  box-shadow:0 1px 3px rgba(70,40,30,.16);
}
.disc__tape--l { left:34px; transform:rotate(-4deg); }
.disc__tape--r { right:34px; transform:rotate(3.5deg); }

.disc__step { border:0; padding:0; margin:0; }
.disc__legend {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2rem, 4.5vw, 2.9rem); line-height:1.05; padding:0;
}
.disc__legend em { color:var(--wine); }
.disc__blurb { color:var(--txt-dim); font-size:15px; margin-top:8px; }

.disc__fields { display:grid; gap:22px; margin-top:28px; }
/* Block, not grid: the label text, its asterisk and the OPTIONAL hint should
   sit on one line, with the control underneath. */
.disc__fields > label {
  display:block;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:#54413c;
}
.disc__fields small { font-size:9px; color:#a08894; letter-spacing:.08em; margin-left:6px; }
.disc__fields > label > input,
.disc__fields > label > textarea { margin-top:7px; }
.disc__group > legend small { margin-left:6px; }
.req { color:var(--stamp-red); }

.disc input[type="text"], .disc input[type="email"],
.disc input[type="tel"], .disc input[type="date"], .disc textarea {
  width:100%; padding:12px 13px;
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:rgba(255,255,255,.7);
  border:2px solid var(--ink); border-radius:8px;
  outline:none; resize:vertical;
}
.disc input:focus, .disc textarea:focus {
  background:#fff; box-shadow:3px 3px 0 var(--pink-dusty);
}
.disc .is-invalid { border-color:var(--stamp-red); }

/* --- grouped controls --- */
.disc__group { border:0; padding:0; margin:0; }
.disc__group > legend {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:#54413c;
  padding:0; margin-bottom:11px;
}
.disc__chips { display:flex; flex-wrap:wrap; gap:8px; }
.disc__chips.is-invalid, .disc__radios.is-invalid {
  outline:2px solid var(--stamp-red); outline-offset:6px; border-radius:8px;
}

.chip {
  padding:9px 16px; cursor:pointer;
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  background:var(--paper); border:2px solid var(--ink); border-radius:999px;
  transition:background .16s, transform .16s, box-shadow .16s;
}
.chip:hover { transform:translate(-1px,-1px); box-shadow:2px 2px 0 var(--ink); }
.chip.is-on { background:var(--blue); box-shadow:var(--shadow-hard); }

.disc__radios { display:grid; gap:9px; }
.radio {
  display:flex; align-items:center; gap:11px; cursor:pointer;
  padding:13px 15px;
  font-family:var(--font-body); font-size:15px;
  background:var(--paper); border:2px solid var(--ink); border-radius:10px;
  transition:background .16s, box-shadow .16s;
}
.radio input { position:absolute; opacity:0; pointer-events:none; }
.radio__dot {
  width:16px; height:16px; flex:0 0 16px; border-radius:50%;
  border:2px solid var(--ink); background:transparent;
}
.radio.is-on { background:var(--butter-soft); box-shadow:var(--shadow-hard); }
.radio.is-on .radio__dot { background:var(--stamp-red); }

/* --- nav buttons --- */
.disc__nav { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.disc__back { background:var(--paper); }
.disc__next { background:var(--butter); }
.disc__nav button:disabled { opacity:.55; cursor:not-allowed; }

/* --- outcome panels --- */
.disc-out { text-align:left; }
.disc-out__kicker {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--txt-dim);
}
.disc-out__title {
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.2rem, 5vw, 3.2rem); line-height:1.04; margin:10px 0 18px;
}
.disc-out__title em { color:var(--wine); }
.disc-out p { color:var(--txt-dim); font-size:15.5px; line-height:1.65; margin-bottom:14px; }
.disc-out__duo { display:grid; gap:14px; margin:26px 0 6px; }
@media (min-width:640px) { .disc-out__duo { grid-template-columns:1fr 1fr; } }
.disc-out__card {
  padding:20px; background:var(--pink); border:2px solid var(--ink); border-radius:10px;
}
.disc-out__num {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; color:var(--wine);
}
.disc-out__card h4 { font-family:var(--font-display); font-size:1.45rem; margin:6px 0 8px; }
.disc-out__card p { font-size:14px; margin:0; }
.disc-out__links {
  display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:26px;
}
.disc-out__links a:not(.btn-pill) {
  font-family:var(--font-mono); font-size:12px;
  letter-spacing:.06em; color:var(--txt-dim); text-decoration:underline;
}
.disc-out__ps { font-size:13.5px; margin-top:20px; }

/* Dropdown, styled to match the inputs rather than the OS default. */
.disc__select {
  width:100%; padding:12px 40px 12px 13px; margin-top:7px;
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background-color:rgba(255,255,255,.7);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23171310' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  border:2px solid var(--ink); border-radius:8px;
  outline:none; cursor:pointer; appearance:none;
}
.disc__select:focus { background-color:#fff; box-shadow:3px 3px 0 var(--pink-dusty); }
.disc__select:invalid, .disc__select option[value=""] { color:var(--txt-dim); }
.disc__select.is-invalid { border-color:var(--stamp-red); }

/* Duration next to a service name on the outcome cards. */
.disc-out__card h4 small {
  font-family:var(--font-mono); font-size:10px; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt-dim);
  margin-left:8px; vertical-align:middle;
}

/* ============ MORE PROJECTS (collapsed) ============ */
.moreproj { max-width:860px; margin:36px auto 0; text-align:center; }
.moreproj__toggle {
  background:none; border:none; cursor:inherit; color:var(--txt-dim);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:2px solid rgba(23,19,16,.35); padding-bottom:3px;
  transition:color .2s, border-color .2s;
}
.moreproj__toggle:hover { color:var(--ink); border-color:var(--ink); }
.moreproj__plus { display:inline-block; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.moreproj.open .moreproj__plus { transform:rotate(45deg); }
.moreproj__body { max-height:0; overflow:hidden; transition:max-height .6s cubic-bezier(.16,1,.3,1); }
.moreproj.open .moreproj__body { max-height:900px; }
.moreproj__paper {
  margin-top:22px; background:var(--paper); border:2px solid var(--ink);
  box-shadow:var(--shadow-hard); padding:26px 30px; text-align:left;
  transform:rotate(-.4deg);
}
.moreproj__list { list-style:none; }
.moreproj__list li {
  display:flex; align-items:baseline; gap:14px; padding:9px 2px;
}
.moreproj__list li + li { border-top:1.5px dashed rgba(23,19,16,.25); }
.moreproj__list span { font-family:var(--font-type); font-weight:700; font-size:13.5px; color:#3b342c; }
.moreproj__list i { flex:1; border-bottom:1.5px dotted rgba(23,19,16,.2); }
.moreproj__list a {
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--wine);
}
.moreproj__list a:hover { text-decoration:underline; }
@media (max-width: 760px) {
  .moreproj__list li { flex-wrap:wrap; gap:8px; }
  .moreproj__list i { display:none; }
}

/* ============ HIRE: metric bundle (right side) ============ */
.hire { position:relative; }
.metric-bundle {
  position:absolute; left:clamp(4px, 2vw, 44px); top:70px;
  width:clamp(190px, 15vw, 240px); z-index:4;
  pointer-events:none;
}
.metric-bundle__card {
  display:block; width:100%; background:#fff;
  border:2.5px solid var(--pink-deep); border-radius:16px;
  padding:12px 14px; box-shadow:0 14px 34px rgba(70,40,30,.16);
}
.metric-bundle__card--1 { transform:rotate(5deg); }
.metric-bundle__card--2 { transform:rotate(-3.5deg) translateX(-12px); margin-top:-6px; }
.metric-bundle__card--3 { transform:rotate(2.5deg) translateX(10px); margin-top:-4px; width:92%; }
.metric-bundle__spark { position:absolute; width:38px; height:38px; }
.metric-bundle__spark--tl { top:-24px; left:-16px; }
.metric-bundle__spark--br { right:-10px; bottom:-26px; }
@media (max-width: 1360px) {
  .metric-bundle {
    position:static; width:min(300px, 82vw); margin:0 auto 34px;
  }
}

/* ============ CASES: clipboard bundle ============ */
.board-bundle {
  position:absolute; left:clamp(4px, 2vw, 48px); top:240px;
  transform:rotate(-3.5deg);
  width:clamp(250px, 20vw, 320px); z-index:5; pointer-events:none;
}
.bb-clip {
  width:62px; height:30px; margin:0 auto -12px; position:relative; z-index:3;
  background:linear-gradient(180deg, #ecedef, #9fa2a8);
  border:2px solid #6f7278; border-radius:8px 8px 2px 2px;
}
.bb-clip::before {
  content:""; position:absolute; left:50%; top:-18px; transform:translateX(-50%);
  width:24px; height:24px; border:6px solid #b9bcc2; border-radius:50%;
}
.bb-board {
  position:relative; background:linear-gradient(160deg, #cfa871, #b98e59);
  border-radius:16px; padding:18px 14px;
  box-shadow:0 18px 44px rgba(70,40,30,.26);
}
.bb-board::after {
  content:""; position:absolute; inset:0; border-radius:16px;
  background-image:var(--noise); opacity:.22; pointer-events:none;
}
.bb-card {
  position:relative; z-index:2; background:#ffe3f2; border-radius:10px;
  padding:16px 10px 14px; display:flex; gap:10px; align-items:center;
  transform:rotate(-1.6deg); box-shadow:0 8px 18px rgba(70,40,30,.2);
}
.bb-card::before, .bb-card::after {
  content:"★ ★ ★ ★ ★ ★"; position:absolute; left:0; right:0;
  text-align:center; font-size:8px; letter-spacing:6px; color:var(--ink);
}
.bb-card::before { top:3px; }
.bb-card::after { bottom:3px; }
.bb-card img {
  width:76px; height:90px; object-fit:cover; flex:none;
  border:4px solid #fff; box-shadow:0 4px 10px rgba(70,40,30,.25);
}
.bb-card h5 { font-family:var(--font-hand); font-size:22px; line-height:1; }
.bb-card p {
  font-family:var(--font-display); font-style:italic;
  font-size:12.5px; line-height:1.3; color:#b07f1d; margin-top:4px;
  padding-right:4px;
}
.bb-yellow {
  position:absolute; left:8%; right:8%; top:12px; height:52%;
  background:#fdf7c9; transform:rotate(-1.2deg);
  box-shadow:0 6px 16px rgba(70,40,30,.14);
}
.bb-shotwrap {
  position:relative; width:72%; margin:16px 0 0 2px;
  transform:rotate(2deg);
}
.bb-shot {
  display:block; width:100%; background:#fff; border-radius:10px;
  padding:6px; box-shadow:0 8px 18px rgba(70,40,30,.2);
}
.bb-oval {
  position:absolute; left:47%; top:16%; width:31%; height:48%;
  border:3px solid #e5679a; border-radius:50%;
  transform:rotate(-4deg);
}
.bb-yearchip {
  position:absolute; right:2px; bottom:-20px;
  font-family:var(--font-hand); font-size:15px; color:#3b2f22;
}
.bb-year {
  font-family:var(--font-hand); font-size:17px; text-align:right;
  margin-top:4px; color:#3b2f22; position:relative; z-index:1;
}
.bb-hand {
  font-family:var(--font-hand); font-size:20px; margin-top:26px !important; line-height:1.3;
  transform:rotate(-1.5deg); margin-top:6px; color:#2b2118; position:relative; z-index:1;
}
.bb-hand mark { background:var(--pink-deep); padding:0 4px; }
@media (max-width: 1360px) {
  .board-bundle {
    left:50%; top:auto; bottom:auto; transform:translateX(-50%) rotate(-2deg);
    width:min(280px, 76vw);
    position:relative; margin:0 auto 30px;
  }
}

/* cases: see more link */
.moreproj-link {
  display:inline-block; margin-bottom:16px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-dim);
  border-bottom:2px solid rgba(23,19,16,.35); padding-bottom:3px;
  transition:color .2s, border-color .2s;
}
.moreproj-link:hover { color:var(--ink); border-color:var(--ink); }

/* ============ SCRLL: mood collage bundle ============ */
.scrll { position:relative; }
.mood-bundle {
  position:absolute; left:calc(100% + 30px); top:0;
  width:clamp(260px, 22vw, 330px); z-index:5; pointer-events:none;
}
.mood-bundle__panel {
  position:relative; transform:rotate(2deg);
}
.mb-shot {
  position:absolute; width:47%; border-radius:8px;
  box-shadow:0 10px 24px rgba(20,25,35,.3);
}
.mb-shot--a { top:0; left:0; width:58%; transform:rotate(-5deg); }
.mb-shot--b { top:10px; right:0; width:58%; transform:rotate(4deg); }
.mb-face {
  position:relative; display:block; width:48%; margin:96px auto 0;
  filter:drop-shadow(0 12px 24px rgba(20,25,35,.35));
  z-index:2;
}
.mb-caption {
  position:relative; z-index:2; margin-top:94%; transform:rotate(-1deg);
  background:#ffe3f2; border-radius:6px; padding:14px 12px 16px;
  text-align:center; transform:rotate(-.8deg);
  box-shadow:0 10px 22px rgba(20,25,35,.22);
}
.mb-caption h5 {
  font-family:var(--font-display); font-weight:600;
  font-size:25px; letter-spacing:-.01em; color:#171310;
}
.mb-caption h5 em { color:var(--wine); }
.mb-caption p {
  font-family:var(--font-body); font-weight:600; font-size:13.5px;
  color:#3b342c; margin-top:4px;
}
/* below 1361px the collage moves above the form, centered */
@media (max-width: 1360px) {
  .mood-bundle {
    position:absolute; left:50%; top:auto; bottom:calc(100% + 16px);
    transform:translateX(-50%);
    width:min(280px, 72vw);
  }
  .scrll__form { margin-top:430px; }
}
@media (max-width: 480px) {
  .mood-bundle { width:min(250px, 78vw); }
  .scrll__form { margin-top:400px; }
}

/* mood collage props */
.mb-prop { position:absolute; filter:drop-shadow(3px 5px 6px rgba(20,25,35,.3)); }
.mb-laptop { width:30%; top:110px; left:-10px; transform:rotate(-9deg); z-index:1; }
.mb-mic { width:12%; top:70px; right:-2px; transform:rotate(11deg); z-index:3; }
.mb-cam { width:27%; bottom:70px; left:-2px; transform:rotate(-7deg); z-index:4; }
.mb-note {
  position:absolute; bottom:64px; right:-2px; width:33%; z-index:4;
  background:#fdfdfb; border-radius:4px; padding:8px 10px 10px;
  transform:rotate(7deg);
  background-image:repeating-linear-gradient(to bottom, transparent 0 13px, rgba(61,90,128,.25) 13px 14px);
  box-shadow:0 10px 22px rgba(20,25,35,.28);
}
.mb-note span {
  display:block; font-family:var(--font-body); font-weight:700; font-size:8.5px;
  color:#3d5a80; font-style:italic; letter-spacing:.02em;
}
.mb-note p {
  font-family:var(--font-marker); font-size:12px; line-height:1.25;
  color:#e5679a; margin-top:4px; transform:rotate(-2deg);
}

/* Outcome cards are links now, so they need affordance. */
a.disc-out__card { display:block; text-decoration:none; color:inherit; transition:transform .16s, box-shadow .16s; }
a.disc-out__card:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-hard); }
.disc-out__go {
  display:inline-block; margin-top:12px;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--wine);
}

/* Direct booking link inside a service folder. */
.folder__book {
  display:inline-block; margin-top:14px; padding:9px 18px;
  font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink);
  background:var(--butter); border:2px solid var(--ink); border-radius:999px;
  box-shadow:2px 2px 0 var(--ink); transition:transform .16s, box-shadow .16s;
}
.folder__book:hover { transform:translate(2px,2px); box-shadow:none; }