:root{
  --mint:#a8e6cf;--mint-light:#dff7ed;--mint-dark:#5bc4a4;--mint-mid:#82d5ba;--mint-pale:#eaf8f1;
  --garnet:#c71585;--garnet-dark:#7d0d53;--garnet-whisper:#f7e3ef;
  --cream:#fff9ed;--ink:#241b22;--white:#fffdf7;--muted:#6b5f70;--mint-whisper:#f0faf5;
  --serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--display:'Space Grotesk',Arial,sans-serif;
  --flow-display:'Barlow Condensed',sans-serif;--flow-body:'Cormorant Garamond',serif;--flow-hand:'Caveat',cursive;
  --pad:clamp(1.25rem,4vw,4rem);--ease:cubic-bezier(.2,.8,.2,1)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font:400 1rem/1.55 var(--sans);overflow-x:hidden;position:relative}
a{color:inherit}button,a{touch-action:manipulation}
.skip{position:fixed;top:.5rem;left:.5rem;z-index:1000;background:var(--ink);color:white;padding:.75rem 1rem;transform:translateY(-150%)}.skip:focus{transform:none}
.hand{font-family:var(--flow-hand);font-weight:600;color:var(--garnet)}

/* The thread — Flow mode only. Present always, height set by script.js to match
   real rendered content, hidden entirely outside Flow so it costs the other three
   modes nothing. */
#matriarch-thread-wrap{display:none;position:absolute;top:0;left:0;width:100%;height:2600px;z-index:0;pointer-events:none}
#matriarch-thread-wrap svg{display:block}
[data-design=flow] #matriarch-thread-wrap{display:block}

.site-header{height:5.5rem;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;position:relative;z-index:20}
.brand{text-decoration:none;font-weight:700;font-size:1.05rem}.brand span{letter-spacing:-.03em}.brand em{font:400 1.45rem var(--serif);color:var(--garnet)}
nav{display:flex;gap:1.75rem;align-items:center}nav a{text-decoration:none;font-weight:600;font-size:.9rem}
.nav-cta{background:var(--garnet);color:white;padding:.7rem 1rem;border-radius:999px}
.design-lab{position:sticky;top:.75rem;z-index:50;width:min(55rem,calc(100% - 2rem));margin:.5rem auto 1.5rem;background:rgba(255,249,237,.93);backdrop-filter:blur(14px);border:1px solid rgba(36,27,34,.2);box-shadow:0 8px 30px rgba(36,27,34,.12);border-radius:1.2rem;padding:.65rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.lab-copy{padding-left:.5rem;display:grid}.lab-copy strong{font-size:.85rem}
.design-tabs{display:flex;gap:.35rem}.design-tabs button{border:0;background:transparent;border-radius:.8rem;padding:.65rem .8rem;font:700 .76rem var(--sans);color:var(--ink);cursor:pointer}
.design-tabs button span{opacity:.45;margin-right:.2rem}.design-tabs button[aria-checked=true]{background:var(--garnet);color:white}
.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-weight:700;font-size:.75rem;color:var(--garnet)}
h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--serif);font-weight:400;line-height:.95;letter-spacing:-.035em}
h1{font-size:clamp(3.8rem,8.2vw,8.4rem)}h2{font-size:clamp(3rem,6vw,6.3rem)}h1 em,h2 em{color:var(--garnet)}
.button{display:inline-flex;justify-content:center;align-items:center;min-height:3.35rem;padding:0 1.25rem;text-decoration:none;font-weight:700;border-radius:999px}
.button.primary{background:var(--garnet);color:white}.text-link{font-weight:700;text-underline-offset:.35rem}

/* Hero — kicker removed entirely; price badge and note keep their own grid areas
   so nothing has to guess where the heading ends. */
.hero{min-height:44rem;padding:calc(6vw - 40px) max(var(--pad),7vw) 8vw;position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(11rem,.28fr);grid-template-areas:'title price' 'copy note' 'actions note';gap:1.5rem;isolation:isolate;z-index:1}
.hero h1{grid-area:title;max-width:14ch;margin-bottom:0}
.hero-copy{grid-area:copy;font-size:clamp(1.1rem,1.6vw,1.4rem);max-width:45rem}
.hero-actions{grid-area:actions;display:flex;align-items:center;gap:1.5rem}
.hero-price{grid-area:price;align-self:start;width:12rem;height:12rem;border-radius:50%;background:var(--garnet);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(6deg)}
.hero-price span,.hero-price small{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.hero-price strong{font:400 3rem var(--serif)}
.hero-note{color:var(--garnet);font:400 1.2rem var(--serif)}
.swoop{position:absolute;z-index:-1;width:65vw;height:43rem;background:var(--mint);border-radius:48% 52% 17% 83% / 50% 32% 68% 50%;right:-12vw;top:-6rem;transform:rotate(-8deg)}

/* Toggle explainer — universal across all four modes, deliberately plain so it
   reads as the same voice regardless of which design is active. */
.toggle-explainer{max-width:48rem;margin:0 auto;padding:0 var(--pad) 6rem;text-align:center;position:relative;z-index:1}
.toggle-quote{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:1rem;display:inline-block;transform:rotate(-1deg)}
.toggle-body{font-size:1.15rem;line-height:1.6;max-width:38rem;margin:0 auto}

.constants{background:var(--mint);padding:7rem var(--pad);position:relative;z-index:1}
.constants h2{max-width:12ch}
.constant-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:4rem}
.constant-grid article{background:var(--cream);padding:1.5rem;min-height:15rem;border-radius:2rem 2rem .5rem 2rem;display:flex;flex-direction:column}
.constant-grid article:nth-child(even){transform:translateY(2rem);background:var(--garnet);color:white}
.constant-grid article>span{font-size:.75rem;font-weight:700;opacity:.55}
.constant-grid h3{font:400 2.2rem var(--serif);margin:auto 0 .5rem}.constant-grid p{margin-bottom:0}

.problem{padding:9rem var(--pad);display:grid;grid-template-columns:1.15fr .7fr;gap:6vw;position:relative;z-index:1}
.problem-lead h2{font-size:clamp(3rem,5.4vw,6rem)}
.problem-body{align-self:end;font-size:1.2rem;max-width:30rem}
.problem-body strong{display:block;color:var(--garnet);font:400 clamp(3rem,5vw,5rem) var(--serif)}
.problem-support{display:none}
.services{grid-column:1/-1;list-style:none;padding:0;margin:5rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.services li{padding:1.5rem 1rem 2.5rem 0;border-bottom:1px solid var(--ink);display:grid;gap:.5rem}
.services li:nth-child(3n+2),.services li:nth-child(3n){padding-left:1rem}
.services b{font:400 1.8rem var(--serif);color:var(--garnet)}

.proof{background:var(--garnet-dark);color:var(--cream);padding:8rem var(--pad);position:relative;z-index:1}
.proof .eyebrow{color:var(--mint)}.proof header{margin-bottom:5rem}
.case{border-top:1px solid rgba(255,255,255,.45);padding:2rem 0 5rem;display:grid;grid-template-columns:1fr .35fr .7fr;gap:3vw}
.case+.case{padding-top:4rem}
.case-title span{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem}
.case-title h3{font:400 clamp(2.3rem,4vw,4.5rem)/.98 var(--serif);margin-top:1.5rem}
.case-stat{background:var(--mint);color:var(--ink);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:1rem;align-self:center}
.case-stat strong{font:400 4rem var(--serif);line-height:1}.case-stat span{font-size:.75rem}
.case-copy{font-size:1.1rem}.case ul{grid-column:3;list-style:none;padding:0;margin:0}
.case li{padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.25)}

.assessment{padding:9rem var(--pad);display:grid;grid-template-columns:.8fr 1fr;gap:8vw;background:var(--mint-light);position:relative;z-index:1}
.assessment-intro h2{font-size:clamp(3rem,5vw,5rem)}.assessment-intro>p:not(.eyebrow){max-width:34rem;font-size:1.1rem}
.steps{list-style:none;margin:0;padding:0}.steps li{display:flex;gap:1.5rem;padding:1.5rem 0;border-top:1px solid var(--ink)}
.steps li>span{font-weight:700;color:var(--garnet)}.steps b{font:400 1.6rem var(--serif)}.steps p{margin:.35rem 0 0}

footer{padding:3rem var(--pad);display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:var(--cream);position:relative;z-index:1}
footer p{margin:0}footer .brand em{color:var(--mint)}

/* ══════════════════════ WORDS — editorial, flat, type does the work ══════════════════════ */
[data-design=words] body,[data-design=words] .site-header,[data-design=words] .hero,[data-design=words] .constants,[data-design=words] .problem,[data-design=words] .proof,[data-design=words] .assessment{background:var(--cream);color:var(--ink)}
[data-design=words] .site-header{max-width:90rem;margin:auto}
[data-design=words] .hero{display:block;max-width:96rem;margin:auto;padding:7rem var(--pad) 10rem;min-height:calc(100vh - 5.5rem)}
[data-design=words] .hero h1{font-size:clamp(4.7rem,10.5vw,12rem);max-width:10ch}
[data-design=words] .hero h1 em{display:block;margin-left:10%;font-size:1.08em}
/* Price badge now sits in normal flow after the copy, so it can never collide
   with a heading of unknown height — the earlier absolute-positioned version could. */
[data-design=words] .hero-copy{margin:3rem 0 2rem 38%;max-width:39rem;border-left:.6rem solid var(--mint);padding-left:1.5rem}
[data-design=words] .hero-actions{margin-left:38%}
/* Anchored from the hero's bottom edge, not a fixed distance from the heading —
   the hero has a generous min-height, so this stays clear regardless of how
   long the heading runs, without giving up the rotated, floating drama the
   original top-anchored version had. */
[data-design=words] .hero-price{position:absolute;right:8%;bottom:11rem;top:auto;width:auto;height:auto;background:none;color:var(--garnet);transform:rotate(90deg);transform-origin:right bottom;border-radius:0;display:block}
[data-design=words] .hero-price strong{font-size:2rem}
[data-design=words] .hero-note{position:absolute;left:38%;right:auto;top:auto;margin-top:-2rem}
[data-design=words] .swoop{width:10rem;height:70%;border-radius:0;background:var(--mint);right:0;top:15%}
[data-design=words] .toggle-explainer{text-align:left;margin:0 0 0 38%;max-width:39rem;padding:0 var(--pad) 6rem 0}
[data-design=words] .constants{padding:9rem var(--pad);border-top:1px solid var(--ink);border-top-width:.9rem;border-top-color:var(--garnet)}
[data-design=words] .constants h2{font-size:clamp(4rem,9vw,10rem);max-width:10ch}
[data-design=words] .constant-grid{display:block;margin:6rem 0 0 25%}
[data-design=words] .constant-grid article,[data-design=words] .constant-grid article:nth-child(even){background:none;color:var(--ink);transform:none;border-radius:0;border-top:1px solid;padding:1.5rem 0;min-height:0;display:grid;grid-template-columns:3rem .6fr 1fr;align-items:baseline}
[data-design=words] .constant-grid h3{font-size:3rem;margin:0;color:var(--garnet)}
[data-design=words] .problem{display:block;padding:10rem var(--pad);border-top:1px solid var(--ink)}
[data-design=words] .problem-lead h2{font-size:clamp(4rem,9vw,10rem);max-width:12ch}
[data-design=words] .problem-body{margin:5rem 10% 5rem auto}
[data-design=words] .problem-body strong{color:var(--garnet);font-size:clamp(5rem,11vw,12rem);line-height:.8}
[data-design=words] .services{display:block;margin-left:22%}
[data-design=words] .services li{grid-template-columns:.5fr 1fr;align-items:baseline;padding:1.2rem 0!important}
[data-design=words] .services b{font-size:2.7rem;color:var(--ink)}
[data-design=words] .proof{padding:10rem var(--pad);border-top:1px solid var(--ink)}
[data-design=words] .proof .eyebrow{color:var(--garnet)}
[data-design=words] .proof header h2 em{background:var(--mint);color:var(--ink);padding:0 .1em}
[data-design=words] .case{grid-template-columns:1.2fr .3fr .7fr}
[data-design=words] .case-stat{background:none;color:var(--garnet);border-radius:0;aspect-ratio:auto}
[data-design=words] .case-stat strong{font-size:8rem;text-shadow:5px 5px 0 var(--mint)}
[data-design=words] .case li{border-color:var(--ink)}
[data-design=words] .assessment{display:block;border-top:.9rem solid var(--mint);padding-left:15vw}
[data-design=words] .assessment-intro{max-width:62rem}
[data-design=words] .assessment-intro h2{font-size:clamp(4.2rem,8vw,9rem)}
[data-design=words] .assessment .steps{margin:6rem 0 0 20%;max-width:55rem}
[data-design=words] .assessment .steps li{display:grid;grid-template-columns:5rem 1fr;padding:2rem 0}
[data-design=words] .button.primary{border-radius:0;box-shadow:inset 0 -4px 0 var(--garnet-dark)}
[data-design=words] .text-link{background-image:linear-gradient(var(--mint),var(--mint));background-repeat:no-repeat;background-position:0 100%;background-size:100% .28em;text-decoration:none}
[data-design=words] .constant-grid h3{transition:transform .28s var(--ease)}
[data-design=words] .case-stat strong{text-shadow:5px 5px 0 var(--mint)}
[data-design=words] .steps li{position:relative}
[data-design=words] .steps li:after{content:'';position:absolute;inset:auto 0 0;height:2px;background:var(--garnet);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
@media(hover:hover){
  [data-design=words] .button.primary:hover{background:var(--ink);transform:translateX(.5rem)}
  [data-design=words] .text-link:hover{background-size:100% 100%}
  [data-design=words] .constant-grid article:hover h3{transform:translateX(.5rem);font-style:italic}
  [data-design=words] .case:hover .case-title h3{color:var(--garnet)}
  [data-design=words] .steps li:hover:after{transform:scaleX(1)}
}

/* ══════════════════════ PSYCHEDELIC — original vintage candy shop treatment, restored from the earlier build ══════════════════════ */
[data-design=psychedelic] body{background-color:var(--garnet-dark);background-image:radial-gradient(ellipse at 10% 20%,var(--garnet) 0 11%,transparent 11.5%),radial-gradient(ellipse at 85% 6%,var(--mint) 0 9%,transparent 9.5%),radial-gradient(ellipse at 75% 75%,var(--cream) 0 10%,transparent 10.5%);background-size:38rem 46rem,42rem 39rem,48rem 45rem}[data-design=psychedelic] .site-header{background:var(--mint);margin:1.3rem 3vw;border:0;box-shadow:none;border-radius:999px;padding-left:2.2rem;padding-right:1.2rem}[data-design=psychedelic] .nav-cta{background:var(--cream);color:var(--garnet-dark)}[data-design=psychedelic] .hero{margin:2rem 3vw 8rem;background:var(--cream);border:0;box-shadow:none;border-radius:48% 52% 42% 58% / 12% 14% 86% 88%;padding:8vw 8vw 11vw;overflow:visible}[data-design=psychedelic] .hero h1{font-family:var(--serif);font-weight:400;text-transform:none;transform:none;letter-spacing:-.05em}[data-design=psychedelic] .hero h1 em{font-family:var(--serif);color:var(--garnet)}[data-design=psychedelic] .hero-price{background:var(--garnet);border:0;box-shadow:none}[data-design=psychedelic] .swoop{width:32vw;height:32vw;right:-3vw;top:-4vw;border:0;border-radius:42% 58% 57% 43% / 36% 44% 56% 64%;background:repeating-radial-gradient(ellipse at 30% 20%,var(--mint) 0 1.4rem,var(--cream) 1.45rem 2.8rem,var(--garnet) 2.85rem 4.2rem);transform:rotate(13deg)}[data-design=psychedelic] .constants{margin:0 3vw 8rem;background:var(--mint);color:var(--ink);border:0;box-shadow:none;border-radius:10rem 2rem 10rem 2rem}[data-design=psychedelic] .constants .eyebrow{color:var(--garnet-dark)}[data-design=psychedelic] .constant-grid article,[data-design=psychedelic] .constant-grid article:nth-child(even){border:0;box-shadow:none;background:var(--cream);border-radius:50% 50% 46% 54% / 58% 45% 55% 42%;min-height:19rem;transform:rotate(-2deg)}[data-design=psychedelic] .constant-grid article:nth-child(even){background:var(--garnet);color:white;border-radius:54% 46% 50% 50% / 44% 58% 42% 56%;transform:rotate(2deg)}[data-design=psychedelic] .problem{margin:0 3vw 8rem;background:var(--cream);border:0;box-shadow:none;border-radius:3rem;padding:8rem var(--pad);overflow:hidden;position:relative}[data-design=psychedelic] .problem:before{content:'';position:absolute;inset:0 auto 0 0;width:3rem;background:repeating-linear-gradient(0deg,var(--garnet) 0 2rem,var(--mint) 2rem 4rem,var(--cream) 4rem 6rem)}[data-design=psychedelic] .problem-lead h2{font-family:var(--serif);font-weight:400;text-transform:none}[data-design=psychedelic] .services li,[data-design=psychedelic] .services li:nth-child(even){border:0;box-shadow:none;transform:none;border-radius:4rem;background:var(--mint);color:var(--ink);padding:1.5rem!important}[data-design=psychedelic] .services li:nth-child(3n+2){background:var(--garnet);color:white}[data-design=psychedelic] .services li:nth-child(3n+2) b{color:var(--cream)}[data-design=psychedelic] .proof{margin:0 3vw 8rem;background:var(--garnet);border:0;box-shadow:none;border-radius:10rem 2rem;color:var(--cream)}[data-design=psychedelic] .proof .eyebrow{color:var(--mint)}[data-design=psychedelic] .case{background:var(--cream);color:var(--ink);border:0;box-shadow:none;border-radius:3rem;padding:3rem;position:relative}[data-design=psychedelic] .case:nth-of-type(2){background:var(--mint);transform:rotate(-1deg)}[data-design=psychedelic] .case:nth-of-type(3){transform:rotate(1deg)}[data-design=psychedelic] .assessment{margin:0 3vw 8rem;background:repeating-radial-gradient(ellipse at 0 50%,var(--mint) 0 2.5rem,var(--cream) 2.55rem 5rem,var(--garnet) 5.05rem 7.5rem);border:0;box-shadow:none;border-radius:14rem;padding:6rem}[data-design=psychedelic] .assessment-intro{background:var(--cream);border-radius:8rem;padding:4rem;color:var(--ink)}[data-design=psychedelic] .steps{background:var(--garnet-dark);color:var(--cream);border-radius:7rem;padding:3rem}[data-design=psychedelic] .steps li{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);margin:0}[data-design=psychedelic] .steps li>span{color:var(--mint)}[data-design=psychedelic] footer{background:var(--mint);color:var(--ink)}[data-design=psychedelic] footer .brand em{color:var(--garnet)}

/* ══════════════════════ PATTERN — graphic, layered, gleeful ══════════════════════ */
[data-design=pattern] body{background-color:var(--mint);background-image:radial-gradient(var(--garnet) 1.4px,transparent 1.4px);background-size:22px 22px}
[data-design=pattern] .site-header{background:var(--cream);margin:1rem;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--garnet)}
[data-design=pattern] .design-lab{background:var(--cream);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--garnet);border-radius:999px}
[data-design=pattern] .hero{margin:3rem var(--pad) 7rem;background:var(--cream);border:3px solid var(--ink);box-shadow:18px 18px 0 var(--garnet),0 2rem 0 rgba(125,13,83,.55),0 3rem 4rem rgba(36,27,34,.25);overflow:hidden}
[data-design=pattern] .hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(4rem,8vw,8.5rem);transform:rotate(-2deg)}
[data-design=pattern] .hero h1 em{font-family:var(--serif);text-transform:none;font-weight:400}
[data-design=pattern] .hero-price{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--mint);z-index:2}
[data-design=pattern] .swoop{background:repeating-linear-gradient(135deg,var(--mint) 0 24px,var(--cream) 24px 48px);border:3px solid var(--ink);border-radius:50%;width:45vw}
[data-design=pattern] .hero-note{position:absolute;left:.85rem;top:auto;margin-top:1rem;background:var(--cream);border:3px solid var(--ink);border-radius:999px;padding:.5rem 1.1rem;font:700 .85rem var(--sans);color:var(--garnet);box-shadow:4px 4px 0 var(--mint);transform:rotate(-4deg);z-index:10}
[data-design=pattern] .toggle-explainer{background:var(--cream);border:3px solid var(--ink);border-radius:3rem;box-shadow:12px 12px 0 var(--garnet-dark);padding:2.5rem;margin:0 var(--pad) 7rem;max-width:none}
[data-design=pattern] .constants{margin:0 var(--pad) 7rem;background:var(--garnet);color:white;border:3px solid var(--ink);box-shadow:18px 18px 0 var(--cream)}
[data-design=pattern] .constants .eyebrow{color:var(--mint)}
[data-design=pattern] .constant-grid{gap:1.5rem}
[data-design=pattern] .constant-grid article,[data-design=pattern] .constant-grid article:nth-child(even){transform:none;border:3px solid var(--ink);border-radius:50% 50% 1rem 1rem;min-height:20rem;color:var(--ink);background:var(--cream);box-shadow:0 1rem 0 var(--garnet-dark),0 1.6rem 2.4rem rgba(36,27,34,.22)}
[data-design=pattern] .constant-grid article:nth-child(even){border-radius:1rem 1rem 50% 50%;background:var(--mint);box-shadow:0 1rem 0 var(--cream),0 1.6rem 2.4rem rgba(36,27,34,.22)}
[data-design=pattern] .problem{margin:0 var(--pad) 7rem;background:var(--cream);border:3px solid var(--ink);box-shadow:18px 18px 0 var(--garnet)}
[data-design=pattern] .problem-lead h2{font-family:var(--display);font-weight:700;text-transform:uppercase}
[data-design=pattern] .services{gap:1rem;border:0}
[data-design=pattern] .services li{padding:1rem!important;border:3px solid var(--ink);background:var(--mint);box-shadow:0 .65rem 0 var(--garnet-dark);transform:rotate(-1deg)}
[data-design=pattern] .services li:nth-child(even){background:var(--garnet);color:white;transform:rotate(1deg)}
[data-design=pattern] .services li:nth-child(even) b{color:var(--mint)}
[data-design=pattern] .proof{margin:0 var(--pad) 7rem;border:3px solid var(--ink);box-shadow:18px 18px 0 var(--cream);background:var(--garnet)}
[data-design=pattern] .case{background:var(--cream);color:var(--ink);padding:2rem;border:3px solid var(--ink);box-shadow:0 1rem 0 var(--mint),0 1.8rem 2.6rem rgba(36,27,34,.24);margin-bottom:2rem}
[data-design=pattern] .case:nth-of-type(2){box-shadow:0 1rem 0 var(--cream),0 1.8rem 2.6rem rgba(36,27,34,.24)}
[data-design=pattern] .case-stat{border:3px solid var(--ink)}[data-design=pattern] .case li{border-color:var(--ink)}
[data-design=pattern] .assessment{margin:0 var(--pad) 7rem;border:3px solid var(--ink);box-shadow:18px 18px 0 var(--garnet);background:var(--cream)}
[data-design=pattern] .steps li{background:var(--mint);margin-bottom:.75rem;border:2px solid;padding:1rem}
@media(hover:hover){
  [data-design=pattern] .constant-grid article:hover{transform:translateY(-7px) rotate(2deg) scale(1.025);box-shadow:0 1.35rem 0 var(--garnet-dark),0 2rem 3rem rgba(36,27,34,.28)}
  [data-design=pattern] .constant-grid article:nth-child(even):hover{transform:translateY(-7px) rotate(-2deg) scale(1.025);box-shadow:0 1.35rem 0 var(--cream),0 2rem 3rem rgba(36,27,34,.28)}
  [data-design=pattern] .services li:hover{transform:translateY(-5px) rotate(-1deg);border-radius:2rem 5rem 2rem 5rem}
  [data-design=pattern] .services li:nth-child(even):hover{transform:translateY(-5px) rotate(1deg)}
  [data-design=pattern] .case:hover{transform:translateY(-6px) rotate(-.5deg)}
  [data-design=pattern] .case:nth-of-type(2):hover{transform:translateY(-6px) rotate(1deg)}
  [data-design=pattern] .button.primary:hover{transform:translateY(-4px) scale(1.03);box-shadow:0 .85rem 0 var(--garnet-dark)}
}

/* ══════════════════════ FLOW — the real one. Mint as the thread, not a flat fill.
   Typography switches to the family used on every other page of the site, so this
   mode is genuinely continuous with Why Me, the assessment page and the case
   studies — not just "the soft one" among four equally-arbitrary options. ══════════════════════ */
[data-design=flow] body{background:var(--cream)}
[data-design=flow] h1,[data-design=flow] h2,[data-design=flow] h3,[data-design=flow] .constant-grid h3,[data-design=flow] .problem-body strong,[data-design=flow] .case-title h3,[data-design=flow] .case-stat strong,[data-design=flow] .steps b{font-family:var(--flow-display);font-weight:900;letter-spacing:-.01em;line-height:.92}
[data-design=flow] p,[data-design=flow] .hero-copy,[data-design=flow] .services span,[data-design=flow] .case-copy,[data-design=flow] .assessment-intro p{font-family:var(--flow-body)}
[data-design=flow] .site-header,[data-design=flow] .hero,[data-design=flow] .toggle-explainer,[data-design=flow] .constants,[data-design=flow] .problem,[data-design=flow] .proof,[data-design=flow] .assessment{background:transparent}
[data-design=flow] .swoop{display:none}
[data-design=flow] .hero-price{background:var(--garnet)}
[data-design=flow] .constant-grid article{background:rgba(255,249,237,.85);backdrop-filter:blur(6px)}
[data-design=flow] .constant-grid article:nth-child(even){background:var(--garnet);color:var(--cream)}
[data-design=flow] .proof{color:var(--ink)}[data-design=flow] .proof .eyebrow{color:var(--garnet)}[data-design=flow] .proof .case{border-color:var(--muted)}[data-design=flow] .proof .case li{border-color:rgba(36,27,34,.2)}
[data-design=flow] .assessment{background:rgba(91,196,164,.35)}
[data-design=flow] .assessment .button{background:var(--garnet);color:var(--cream)}

/* Interactive system demos — the mechanism stays identical in every mode;
   each design supplies its own visual treatment. */
.flow-visual{display:block}
[data-design=flow] .demo-block{margin-top:2rem}
[data-design=flow] .case .demo-block{grid-column:1/-1}
[data-design=flow] .demo-label{font-family:var(--flow-display);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mint-dark);text-align:center;margin:0 0 .75rem}
.demo-copy{max-width:38rem;margin:0 auto 1.5rem;text-align:center}
.demo-copy h3{font-size:clamp(2rem,4vw,3.6rem);margin-bottom:.75rem}
.demo-copy>p:last-child{margin-bottom:0}

/* Checkout demo — real interactive logic, not decoration. Mixed-cart rule:
   the fulfilment options that don't work for every item in the cart drop out
   entirely in "My checkout" mode; "Generic checkout" always shows everything,
   working or not, as the contrast. */
.checkout-demo{background:#fff;border:1.5px solid var(--mint-dark);border-radius:1rem;padding:1.25rem;width:min(50vw,52rem);max-width:100%;margin-inline:auto;font-family:var(--flow-body)}
.cd-toggle-row{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1.1rem}
.cd-toggle-label{font-family:var(--flow-display);font-weight:600;font-size:.85rem;color:var(--muted)}
.cd-toggle-label.on{color:var(--garnet);font-weight:900}
.cd-switch{width:52px;height:28px;border-radius:999px;background:var(--muted);position:relative;border:none;cursor:pointer;padding:0;flex-shrink:0}
.cd-switch .cd-thumb{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .2s ease}
.cd-switch.on{background:var(--garnet)}
.cd-switch.on .cd-thumb{left:26px}
.cd-product{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--muted);border-radius:.6rem;padding:.65rem .85rem;margin-bottom:.5rem;background:#fff}
.cd-product.added{border-color:var(--mint-dark);background:var(--mint-pale)}
.cd-product-name{font-family:var(--flow-display);font-weight:700;font-size:.9rem}
.cd-product-name small{display:block;font-family:var(--flow-body);font-weight:400;font-size:.78rem;color:var(--muted);margin-top:.1rem}
.cd-add{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--garnet);background:#fff;color:var(--garnet);font-family:var(--flow-display);font-weight:900;font-size:1.1rem;cursor:pointer;flex-shrink:0}
.cd-add.added{background:var(--garnet);color:var(--cream)}
.cd-empty{font-size:.9rem;color:var(--muted);font-style:italic;margin:0}
.cd-fulfil-row{display:flex;gap:.5rem;margin:1rem 0 .75rem}
.cd-fulfil-row button{flex:1;font-family:var(--flow-display);font-weight:600;font-size:.8rem;padding:.55rem;border-radius:.6rem;border:1.5px solid var(--muted);background:#fff;color:var(--ink);cursor:pointer}
.cd-fulfil-row button.active{background:var(--garnet);border-color:var(--garnet);color:var(--cream)}
.cd-why{margin:.4rem 0 0;font-size:.85rem;color:var(--muted);font-style:italic;min-height:2.2em}
.cd-panelwrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.cd-panelwrap.open{grid-template-rows:1fr;margin-bottom:.6rem}
.cd-panelwrap>div{overflow:hidden}
.cd-panel{border:1.5px solid var(--mint-dark);border-radius:.6rem;background:#fff}
.cd-panel-head{font-family:var(--flow-display);font-weight:700;font-size:.85rem;margin:0;padding:.7rem .9rem 0}
.cd-panel-body{margin:0;padding:.2rem .9rem .7rem;font-size:.85rem;color:var(--muted)}

/* Quote demo — the escalation rules stack independently: same-day+ironing,
   3+ add-ons, or windows above a single storey. More than one active shows
   more than one reason, rather than collapsing to a single excuse. */
.quote-demo{background:#fff;border:1.5px solid var(--mint-dark);border-radius:1rem;padding:1.25rem;width:min(50vw,52rem);max-width:100%;margin-inline:auto;font-family:var(--flow-body)}
.qd-label{font-family:var(--flow-display);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 .5rem}
.qd-row{display:flex;gap:.4rem;margin-bottom:1rem}
.qd-row button{flex:1;font-family:var(--flow-display);font-weight:600;font-size:.78rem;padding:.55rem .3rem;border-radius:.6rem;border:1.5px solid var(--muted);background:#fff;color:var(--ink);cursor:pointer}
.qd-row button[aria-pressed=true]{background:var(--mint-dark);border-color:var(--mint-dark);color:var(--ink)}
.qd-services{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1.1rem}
.qd-svc{display:flex;align-items:center;border:1.5px solid var(--muted);border-radius:.6rem;padding:.55rem .7rem;font-family:var(--flow-display);font-weight:600;font-size:.8rem;background:#fff;color:var(--ink);cursor:pointer;text-align:left}
.qd-svc[aria-pressed=true]{border-color:var(--garnet);background:var(--garnet-whisper)}
.qd-result{border-radius:.85rem;padding:1.1rem;min-height:70px}
.qd-result.ok{background:var(--mint-pale);border:1.5px solid var(--mint-dark)}
.qd-result.escalate{background:var(--garnet-whisper);border:1.5px solid var(--garnet)}
.qd-price{font-family:var(--flow-display);font-weight:900;font-size:1.9rem;color:var(--ink)}
.qd-escalate-title{font-family:var(--flow-display);font-weight:900;font-size:1.05rem;color:var(--garnet);margin:0 0 .3rem}
.qd-result p{margin:.3rem 0 0;font-size:.88rem;color:var(--muted)}
.qd-result ul{margin:.35rem 0 0;padding-left:1.1rem;font-size:.85rem;color:var(--muted)}

/* The original psychedelic build predates these interactive demos. These
   additions use its borderless pebble shapes and existing colour balance. */
[data-design=psychedelic] .toggle-explainer{max-width:52rem;margin:0 auto 8rem;padding:3rem;background:var(--cream);border-radius:50% 46% 52% 44% / 55% 48% 52% 45%}
[data-design=psychedelic] .demo-block,[data-design=psychedelic] .case .demo-block{grid-column:1/-1;margin:3rem 0}
[data-design=psychedelic] .demo-copy{max-width:46rem;padding:1.5rem 2rem;background:var(--mint);border-radius:54% 46% 50% 50% / 44% 58% 42% 56%}
[data-design=psychedelic] .checkout-demo,[data-design=psychedelic] .quote-demo{width:min(52rem,76%);max-width:100%;background:var(--mint);border:0;border-radius:4rem;padding:2rem;font-family:var(--sans)}
[data-design=psychedelic] .quote-demo{background:var(--cream)}
[data-design=psychedelic] .cd-product,[data-design=psychedelic] .cd-panel,[data-design=psychedelic] .qd-row button,[data-design=psychedelic] .qd-svc,[data-design=psychedelic] .qd-result{border:0;border-radius:3rem}
[data-design=psychedelic] .cd-product.added,[data-design=psychedelic] .qd-svc[aria-pressed=true]{background:var(--garnet-whisper);outline:2px solid var(--garnet)}
[data-design=psychedelic] .cd-toggle-label,[data-design=psychedelic] .cd-product-name,[data-design=psychedelic] .qd-label,[data-design=psychedelic] .qd-price,[data-design=psychedelic] .qd-escalate-title{font-family:var(--serif)}

/* Words keeps the demos as editorial diagrams: flat, ruled and typographic. */
[data-design=words] .demo-block,[data-design=words] .case .demo-block{grid-column:1/-1;margin:4rem 0}
[data-design=words] .demo-copy{text-align:left;margin:0 0 2rem 22%;max-width:48rem;border-left:.6rem solid var(--mint);padding-left:1.5rem}
[data-design=words] .demo-label{text-align:left;color:var(--garnet)}
[data-design=words] .checkout-demo,[data-design=words] .quote-demo{width:min(62rem,78%);max-width:100%;border:0;border-top:.7rem solid var(--garnet);border-bottom:1px solid var(--ink);border-radius:0;box-shadow:none;padding:2rem 0;background:transparent;font-family:var(--sans)}
[data-design=words] .cd-product,[data-design=words] .cd-panel,[data-design=words] .qd-row button,[data-design=words] .qd-svc,[data-design=words] .qd-result{border-radius:0}
[data-design=words] .cd-product-name,[data-design=words] .cd-toggle-label,[data-design=words] .qd-label,[data-design=words] .qd-price,[data-design=words] .qd-escalate-title{font-family:var(--display)}

/* Pattern turns the same demos into graphic objects with hard offset shadows. */
[data-design=pattern] .demo-block,[data-design=pattern] .case .demo-block{grid-column:1/-1;margin:3rem 0}
[data-design=pattern] .demo-copy{background:var(--mint);border:3px solid var(--ink);padding:1.5rem;box-shadow:.65rem .65rem 0 var(--garnet);transform:rotate(-1deg)}
[data-design=pattern] .checkout-demo,[data-design=pattern] .quote-demo{width:min(56rem,76%);max-width:100%;background:var(--cream);border:3px solid var(--ink);border-radius:1rem;box-shadow:1rem 1rem 0 var(--mint),1.5rem 1.5rem 0 var(--garnet);font-family:var(--sans)}
[data-design=pattern] .cd-product,[data-design=pattern] .cd-panel,[data-design=pattern] .qd-row button,[data-design=pattern] .qd-svc,[data-design=pattern] .qd-result{border-radius:0;border-width:2px}
[data-design=pattern] .cd-toggle-label,[data-design=pattern] .qd-label,[data-design=pattern] .qd-price,[data-design=pattern] .qd-escalate-title{font-family:var(--display)}

/* Movement — roughly 30% less vertical padding than the other three modes, so
   scrolling feels continuous rather than stopping at each section. */
[data-design=flow] .hero{padding-bottom:5.6vw}
[data-design=flow] .toggle-explainer{padding-bottom:4.2rem}
[data-design=flow] .constants{padding:4.9rem var(--pad)}
[data-design=flow] .problem{padding:6.3rem var(--pad)}
[data-design=flow] .proof{padding:5.6rem var(--pad)}
[data-design=flow] .assessment{padding:6.3rem var(--pad)}

/* Hover — soft lift and glow rather than the other modes' harder mechanics */
[data-design=flow] .button,[data-design=flow] .constant-grid article{transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .25s var(--ease)}
@media(hover:hover){
  [data-design=flow] .button.primary:hover{background:var(--garnet-dark);transform:translateY(-3px);box-shadow:0 14px 28px rgba(199,21,133,.32)}
  [data-design=flow] .nav-cta:hover{background:var(--garnet-dark)}
  [data-design=flow] .text-link:hover{color:var(--garnet-dark)}
  [data-design=flow] .constant-grid article:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(36,27,34,.16)}
}

/* The toggle-explainer's arrow note points down-left toward the starburst, which
   now lives further down the hero, closer to where the burst actually sits. */
[data-design=flow] .hero-note{position:absolute;left:6.5rem;right:auto;top:auto;margin-top:5rem;transform:rotate(-8deg);z-index:15;background:var(--cream);padding:.4rem .9rem;border-radius:999px;box-shadow:0 6px 16px rgba(36,27,34,.18)}

/* Starburst — deliberately NOT fixed. It sits in normal document flow at the top
   of the toggle-explainer section, so it scrolls with the page while the rail
   stays fixed at viewport centre. The two only coincide for a moment — right as
   this section scrolls through the middle of the screen, which is the point. */
#matriarch-starburst{display:none;position:absolute;left:.85rem;top:auto;margin-top:-2rem;width:15rem;height:15rem;z-index:10;pointer-events:none;background:repeating-conic-gradient(var(--garnet) 0deg 8deg,transparent 8deg 20deg);border-radius:50%;opacity:.8}
[data-design=flow] #matriarch-starburst{display:block}
@media(max-width:800px){#matriarch-starburst{display:none!important}.hero-note{position:static!important;margin:1.5rem 0 0!important;transform:none!important;left:auto!important}}

@media(max-width:800px){
  .site-header nav a:not(.nav-cta){display:none}
  .design-lab{position:relative;top:auto;display:block;border-radius:1rem}
  .lab-copy{margin-bottom:.5rem}.design-tabs{display:grid;grid-template-columns:repeat(5,1fr)}
  .design-tabs button{padding:.65rem .2rem}.design-tabs button span{display:none}
  .hero,.problem,.assessment{grid-template-columns:1fr;grid-template-areas:'title' 'copy' 'price' 'actions' 'note';padding:4rem 1.25rem}
  .hero-price{width:9rem;height:9rem;justify-self:end}
  .constant-grid,.services{grid-template-columns:1fr 1fr}.constant-grid article:nth-child(even){transform:none}
  .case{grid-template-columns:1fr}.case-stat{width:10rem}.case ul{grid-column:auto}.assessment{gap:4rem}
  footer{display:grid;gap:1rem}
  [data-design=order] .hero{grid-template-columns:1fr;grid-template-areas:'title' 'copy' 'price' 'actions' 'note'}
  [data-design=order] .constant-grid{grid-template-columns:1fr}[data-design=order] .case{grid-template-columns:1fr}
  [data-design=words] .hero-copy,[data-design=words] .hero-actions,[data-design=words] .toggle-explainer{margin-left:0}
  [data-design=words] .hero-price{position:relative;right:auto;bottom:auto;top:auto;transform:none;margin:2rem 0 0}
  [data-design=words] .swoop{display:none}
  [data-design=words] .constant-grid,[data-design=words] .services{margin-left:0}
  [data-design=words] .constant-grid article,[data-design=words] .constant-grid article:nth-child(even){grid-template-columns:2rem 1fr;gap:.5rem}
  [data-design=words] .constant-grid p{grid-column:2}
  [data-design=words] .services li,[data-design=words] .case{grid-template-columns:1fr}
  [data-design=pattern] .site-header,[data-design=pattern] .hero,[data-design=pattern] .toggle-explainer,[data-design=pattern] .constants,[data-design=pattern] .problem,[data-design=pattern] .proof,[data-design=pattern] .assessment{margin-left:1rem;margin-right:1rem}
  [data-design=pattern] .design-lab{border-radius:1rem}
  [data-design=psychedelic] .hero,[data-design=psychedelic] .constants,[data-design=psychedelic] .problem,[data-design=psychedelic] .proof,[data-design=psychedelic] .assessment{margin-left:1rem;margin-right:1rem;border-radius:3rem;padding:4rem 1.25rem}
  [data-design=psychedelic] .assessment-intro,[data-design=psychedelic] .steps{border-radius:2rem;padding:2rem 1.25rem}
  [data-design=psychedelic] .toggle-explainer{margin-left:1rem;margin-right:1rem;border-radius:3rem}
  [data-design=psychedelic] .checkout-demo,[data-design=psychedelic] .quote-demo{width:100%;padding:1.25rem}
  [data-design=words] .demo-copy{margin-left:0}
  [data-design=words] .checkout-demo,[data-design=words] .quote-demo,[data-design=pattern] .checkout-demo,[data-design=pattern] .quote-demo{width:100%}
}
@media(max-width:520px){h1{font-size:3.4rem}h2{font-size:3rem}.site-header{height:4.5rem}.nav-cta{padding:.55rem .7rem}.constant-grid,.services{grid-template-columns:1fr}.hero-actions{align-items:flex-start;flex-direction:column}.constants,.proof{padding:5rem 1.25rem}.case-title h3{font-size:2.7rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Design-lab rail — persistent tool, not part of any single mode's composition */
@media(min-width:801px){body{padding-left:8.5rem}.design-lab{position:fixed;left:.85rem;top:50%;transform:translateY(-50%);width:6.8rem;margin:0;padding:.65rem;display:grid;z-index:80;border-radius:1.2rem;background:rgba(255,249,237,.94);box-shadow:0 10px 35px rgba(36,27,34,.16)}.lab-copy{padding:.2rem .25rem .55rem}.lab-copy strong{line-height:1.05}.design-tabs{display:grid;gap:.3rem}.design-tabs button{width:100%;text-align:left;padding:.65rem .55rem}.design-tabs button span{display:block;font-size:.62rem;margin-bottom:.08rem}.rail-quiz{margin-top:.45rem;padding:.75rem .6rem;background:var(--mint);color:var(--ink);border-radius:.8rem;text-decoration:none;display:grid;line-height:1.03;border:0;font:inherit;text-align:left;cursor:pointer}.rail-quiz .quiz-spark{color:var(--garnet);font-size:1.15rem}.rail-quiz strong{font-size:.82rem;margin:.2rem 0}.rail-quiz small{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em}.site-header{padding-left:var(--pad)}footer.site-footer,footer{margin-left:-8.5rem;padding-left:calc(8.5rem + var(--pad))}}
@media(min-width:801px){[data-design=order] body{padding-left:0}[data-design=order] footer.site-footer,[data-design=order] footer{margin-left:0;padding-left:var(--pad)}}
@media(max-width:800px){.design-lab{position:sticky;top:auto;bottom:.5rem;margin:0 auto .5rem;width:calc(100% - 1rem);z-index:80;padding:.45rem;display:flex;align-items:center;background:rgba(255,249,237,.96);box-shadow:0 4px 24px rgba(36,27,34,.2)}.lab-copy{display:none}.design-tabs{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:.15rem}.design-tabs button{font-size:.65rem}.design-tabs button[data-mode=psychedelic]{font-size:.58rem}.rail-quiz{display:flex;align-items:center;gap:.35rem;background:var(--mint);border-radius:.65rem;padding:.5rem;text-decoration:none;line-height:1;border:0;font:inherit;cursor:pointer}.rail-quiz strong{font-size:.72rem}.rail-quiz small{display:none}.quiz-spark{color:var(--garnet)}}
@media(max-width:800px){.checkout-demo,.quote-demo{width:100%}}

/* Quiz modal */
.quiz-modal[hidden]{display:none}.quiz-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:1rem}
.quiz-scrim{position:absolute;inset:0;background:rgba(36,27,34,.65);backdrop-filter:blur(5px)}
.quiz-card{position:relative;width:min(36rem,100%);min-height:30rem;background:var(--cream);padding:3rem;border-radius:2rem;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.quiz-card h2{font-size:clamp(3rem,8vw,5rem)}
.quiz-close{position:absolute;right:1rem;top:1rem;border:0;background:var(--mint);width:2.5rem;height:2.5rem;border-radius:50%;font-size:1.6rem;cursor:pointer}
.quiz-progress{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:2rem}
.quiz-stage h3{font:400 2rem var(--serif)}
.quiz-options{display:grid;gap:.7rem}
.quiz-options button{padding:1rem;text-align:left;background:white;border:2px solid var(--ink);font:600 1rem var(--sans);cursor:pointer}
.quiz-options button:hover{background:var(--mint);transform:translateX(.3rem)}

/* ══════════════════════ ORDER — Japandi cabinetry meets a system diagram (formerly "Order 2.0" — this now IS the Order mode) ══════════════════════
   Built from Nelle's own draft. Two changes from that draft: solid ink-block
   backgrounds translated to the double-line border treatment used elsewhere
   on the site, and the drawer mechanism rebuilt so the header is a real
   <button> (clickable + aria-expanded) instead of a ::before pseudo-element
   (which can never receive a click, however button-like it looks). Sections
   still auto-expand on scroll via the same IntersectionObserver as before —
   click and scroll now both just call the one toggle function. */
[data-design=order] body{background-color:#fbf7ed;background-image:linear-gradient(rgba(36,27,34,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(36,27,34,.045) 1px,transparent 1px);background-size:2.4rem 2.4rem;color:var(--ink)}
[data-design=order] .site-header{background:rgba(251,247,237,.93);border-bottom:1px solid rgba(36,27,34,.32);backdrop-filter:blur(12px);position:sticky;top:0;z-index:30}
[data-design=order] h1,[data-design=order] h2,[data-design=order] h3{font-family:var(--display);letter-spacing:-.03em}
[data-design=order] .nav-cta{border-radius:.2rem;box-shadow:.25rem .25rem 0 var(--ink)}
[data-design=order] .eyebrow{color:var(--garnet);font-size:.68rem;letter-spacing:.2em}
[data-design=order] .button.primary{border-radius:.2rem;box-shadow:.4rem .4rem 0 var(--ink)}

/* Hero */
[data-design=order] .hero{min-height:auto;display:grid;grid-template-columns:repeat(12,1fr);gap:.7rem;margin:var(--pad) var(--pad) 0;padding:0;border:0;isolation:isolate}
[data-design=order] .hero>*:not(.swoop):not(.hero-deco){border:1px solid var(--ink);padding:clamp(1rem,2.4vw,2.2rem);background:var(--cream);margin:0;position:relative}
[data-design=order] .hero h1{grid-column:1/13;grid-row:1;font-size:clamp(3rem,6.5vw,6.5rem);font-weight:500;line-height:.92;max-width:none;background:var(--mint)}
[data-design=order] .hero h1:after{content:'SYSTEM / 02';position:absolute;right:1rem;top:1rem;font:600 .63rem var(--display);letter-spacing:.18em}
[data-design=order] .hero-price{grid-column:1/5;grid-row:2;border:3px double var(--garnet)!important;background:var(--cream)!important;color:var(--ink);width:auto;height:auto;border-radius:0;transform:none;align-items:flex-start;text-align:left;justify-content:flex-end}
[data-design=order] .hero-price:before{content:'02';font:500 clamp(4rem,8vw,7rem)/.7 var(--display);color:var(--mint);position:absolute;right:.5rem;top:1rem;z-index:-1}
[data-design=order] .hero-copy{grid-column:5/13;grid-row:2;background:#f4f0e6!important;display:flex;align-items:center;font-size:clamp(1rem,1.4vw,1.25rem)}
[data-design=order] .hero-actions{grid-column:1/13;grid-row:3;background:var(--mint)!important;align-items:center;justify-content:flex-start}
[data-design=order] .hero-actions .text-link{margin-left:auto}
[data-design=order] .hero-note{display:none}
[data-design=order] .swoop{display:none}
[data-design=order] .hero-deco{position:absolute;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:width .7s cubic-bezier(.2,.78,.2,1),height .7s cubic-bezier(.2,.78,.2,1);z-index:2}
[data-design=order] .hero-deco.a{right:1rem;top:1rem;width:0;height:2.4rem;background:var(--garnet)}
[data-design=order] .hero-deco.a.open{width:8rem}
[data-design=order] .hero-deco.b{left:1rem;bottom:1rem;width:2.4rem;height:0;background:var(--cream)}
[data-design=order] .hero-deco.b.open{height:4.5rem}
[data-design=order] .hero-deco span{color:var(--cream);font:600 .65rem var(--display);white-space:nowrap;opacity:0;transition:opacity .3s ease .4s}
[data-design=order] .hero-deco.b span{color:var(--ink)}
[data-design=order] .hero-deco.open span{opacity:1}

/* Drawer mechanism — real button, grid-rows collapse (no JS height
   measurement needed; the browser sizes the open row to content itself). */
.drawer-head{display:none}
.drawer-inner{display:contents}
[data-design=order] .drawer-head{all:unset;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.3rem;background:#fffcf5;border:1px solid var(--ink);font:700 .72rem var(--display);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;width:calc(100% - var(--pad) - var(--pad));margin:var(--pad) var(--pad) 0;box-sizing:border-box}
[data-design=order] .drawer-head:focus-visible{outline:3px solid var(--garnet);outline-offset:2px}
[data-design=order] .drawer-head .plus{width:2rem;height:2rem;border:1px solid var(--ink);display:grid;place-items:center;background:var(--mint);font-size:1.1rem;transition:transform .5s cubic-bezier(.2,.78,.2,1),background .3s ease,color .3s ease;flex-shrink:0}
[data-design=order] .drawer-head[aria-expanded=true] .plus{transform:rotate(135deg);background:var(--garnet);color:var(--cream)}
[data-design=order] main>section:not(.toggle-explainer){display:grid;grid-template-columns:1fr;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.78,.2,1);border:1px solid var(--ink);border-top:0;margin:0 var(--pad) var(--pad);padding:0;background:none;box-shadow:none;overflow:hidden}
[data-design=order] .toggle-explainer{border:1px solid var(--ink);width:min(50vw,48rem);max-width:calc(100% - var(--pad) - var(--pad));margin:var(--pad) auto 0;padding:clamp(1.5rem,3vw,2.75rem);background:#fff}
[data-design=order] main>section.is-expanded{grid-template-rows:1fr}
[data-design=order] .drawer-inner{overflow:hidden;min-height:0;padding:clamp(1rem,2vw,2rem);background:rgba(255,252,245,.96)}
[data-design=order] main>section.is-expanded{box-shadow:0 1.2rem 3rem rgba(36,27,34,.08)}

/* Nested reveal — staggered fade/scale-in for cards inside an opened drawer.
   Not independently clickable in this pass; opens as a cascade when its
   parent drawer opens. */
[data-design=order] .constant-grid article,[data-design=order] .services li,[data-design=order] .case{opacity:0;transform:translateY(.6rem) scale(.97);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.78,.2,1);transition-delay:calc(var(--cascade-index,0) * 70ms)}
[data-design=order] .is-expanded .constant-grid article,[data-design=order] .is-expanded .services li,[data-design=order] .is-expanded .case{opacity:1;transform:none}

/* Section content — double-line borders replace every ink block */
[data-design=order] .drawer-inner .card,[data-design=order] .constant-grid article,[data-design=order] .services li,[data-design=order] .case,[data-design=order] .steps li{border:3px double var(--garnet);border-radius:0;background:#fff;box-shadow:none}
[data-design=order] .drawer-inner .card.mint,[data-design=order] .constant-grid article:nth-child(even),[data-design=order] .services li:nth-child(even),[data-design=order] .steps li:nth-child(even){border-color:var(--mint-dark);background:var(--mint-pale);color:var(--ink)}

[data-design=order] .constants .drawer-inner{display:grid;grid-template-columns:minmax(16rem,.65fr) 1.35fr;grid-template-rows:auto 1fr;gap:.9rem}
[data-design=order] .constants .eyebrow{grid-column:1;grid-row:1;margin-bottom:0}
[data-design=order] .constants h2{grid-column:1;grid-row:2;align-self:center;margin-bottom:0}
[data-design=order] .constant-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
[data-design=order] .constants .constant-grid{grid-column:2;grid-row:1/3;margin-top:0;align-self:stretch}
[data-design=order] .constant-grid article{min-height:11rem;padding:1.2rem}

[data-design=order] .problem .drawer-inner{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:auto 1fr auto auto;gap:.9rem}
[data-design=order] .problem-lead{grid-column:1;grid-row:1/3;border:1px solid var(--ink);padding:1.2rem;background:#fff}
[data-design=order] .problem-support{display:block;grid-column:2;grid-row:1;border:1px solid var(--ink);padding:1.2rem;background:var(--mint-pale)}
[data-design=order] .problem-support span{display:block;font:700 .65rem var(--display);letter-spacing:.16em;color:var(--garnet);margin-bottom:.65rem}
[data-design=order] .problem-support p{margin:0}
[data-design=order] .problem-body{grid-column:2;grid-row:2;align-self:stretch;max-width:none;border:3px double var(--garnet);padding:1.2rem;background:var(--garnet-whisper)}
[data-design=order] .services{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1rem}
[data-design=order] .services li{min-height:9rem;padding:1rem}
[data-design=order] .problem .demo-block{grid-column:1/-1;display:grid;grid-template-columns:minmax(15rem,.7fr) minmax(22rem,1.3fr);gap:.9rem;align-items:stretch;margin-top:0}
[data-design=order] .problem .demo-copy{margin:0;border:3px double var(--mint-dark);background:var(--mint-pale);padding:clamp(1.2rem,2.4vw,2rem);text-align:left;display:flex;flex-direction:column;justify-content:center;max-width:none}
[data-design=order] .problem .demo-label{text-align:left}
[data-design=order] .problem .checkout-demo{width:100%;max-width:none}

[data-design=order] .proof .drawer-inner{background:none}
[data-design=order] .proof header{border:1px solid var(--ink);padding:1.5rem;background:#fff;margin-bottom:.9rem}
[data-design=order] .proof{color:var(--ink)}
[data-design=order] .proof .eyebrow{color:var(--garnet)}
[data-design=order] .toggle-explainer.in-focus{border:3px double var(--garnet);transform:translateY(-7px);box-shadow:.65rem .65rem 0 var(--mint),0 1.5rem 3rem rgba(36,27,34,.18)}
.design-lab,.toggle-explainer{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
@media(min-width:801px){[data-design=order] .design-lab.in-focus{transform:translateY(-50%) translateY(-7px);border:3px double var(--garnet);box-shadow:.45rem .45rem 0 var(--mint),0 1.25rem 2.5rem rgba(36,27,34,.2)}}
@media(hover:hover){[data-design=order] .toggle-explainer:hover{transform:translateY(-7px);box-shadow:.65rem .65rem 0 var(--mint),0 1.5rem 3rem rgba(36,27,34,.18)}[data-design=order] .design-lab:hover{box-shadow:.45rem .45rem 0 var(--mint),0 1.25rem 2.5rem rgba(36,27,34,.2)}}
[data-design=order] .case{display:grid;grid-template-columns:1.2fr .45fr 1fr;gap:1.2rem;padding:1.5rem;margin-bottom:.9rem}
[data-design=order] .case li{border-color:var(--ink)}
[data-design=order] .case-cleaner .demo-block{grid-column:1/3;grid-row:2;margin-top:0;align-self:start}
[data-design=order] .case-cleaner .quote-demo{width:100%;max-width:none}
[data-design=order] .case-cleaner ul{grid-column:3;grid-row:2;align-self:start}

[data-design=order] .assessment .drawer-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:.9rem}
[data-design=order] .assessment-intro{border:1px solid var(--ink);padding:1.5rem;background:#fff}
[data-design=order] .steps{display:grid;gap:.6rem}
[data-design=order] .steps li{padding:1rem;display:grid;grid-template-columns:3rem 1fr}

@media(max-width:900px){
  [data-design=order] .hero{grid-template-columns:1fr}
  [data-design=order] .hero h1,[data-design=order] .hero-price,[data-design=order] .hero-copy,[data-design=order] .hero-actions,[data-design=order] .hero-note{grid-column:1;grid-row:auto}
  [data-design=order] .constants .drawer-inner,[data-design=order] .problem .drawer-inner,[data-design=order] .assessment .drawer-inner{grid-template-columns:1fr}
  [data-design=order] .services{grid-template-columns:1fr 1fr}
  [data-design=order] .case{grid-template-columns:1fr}
  [data-design=order] .constants .eyebrow,[data-design=order] .constants h2,[data-design=order] .constants .constant-grid,[data-design=order] .problem-lead,[data-design=order] .problem-support,[data-design=order] .problem-body,[data-design=order] .case-cleaner .demo-block,[data-design=order] .case-cleaner ul{grid-column:1;grid-row:auto}
  [data-design=order] .problem .demo-block{grid-template-columns:1fr}
}
@media(max-width:600px){[data-design=order] .constant-grid,[data-design=order] .services{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  [data-design=order] main>section,[data-design=order] .hero-deco,[data-design=order] .drawer-head .plus,[data-design=order] .constant-grid article,[data-design=order] .services li,[data-design=order] .case{transition:none}
}

/* September refinement pass -------------------------------------------------
   Order's drawer wrapper is structural only outside Order. Without this reset,
   switching themes left grid children trapped inside one ordinary block. */
html:not([data-design=order]) .drawer-inner{display:contents}

/* ORDER: make the "can she make it pretty?" moment affect the rail as well as
   the copy block, with a larger garnet signal and shadow underneath both. */
[data-design=order] .toggle-explainer.in-focus{background:var(--garnet);color:var(--cream);border-color:var(--garnet);transform:translateY(-10px) scale(1.035);box-shadow:0 1.15rem 0 var(--mint),0 2rem 3.6rem rgba(36,27,34,.25)}
[data-design=order] .toggle-explainer.in-focus .toggle-quote{color:var(--cream)}
@media(min-width:801px){[data-design=order] .design-lab.in-focus{background:var(--garnet);color:var(--cream);border-color:var(--garnet);transform:translateY(calc(-50% - 10px)) scale(1.055);box-shadow:0 .9rem 0 var(--mint),0 1.8rem 3rem rgba(36,27,34,.28)}[data-design=order] .design-lab.in-focus .design-tabs button:not([aria-checked=true]){color:var(--cream)}[data-design=order] .design-lab.in-focus .rail-quiz{box-shadow:0 .45rem 0 var(--ink)}}

/* PSYCHEDELIC: keep copy inside the cream landmass, soften the dotted bridge,
   lift the pebble copy, and let the remainder of the problem section breathe. */
[data-design=psychedelic] .hero{grid-template-columns:minmax(0,1fr) minmax(12rem,.34fr)}
[data-design=psychedelic] .hero-copy{margin-left:clamp(2rem,9vw,9rem);max-width:32rem;padding-right:2rem}
[data-design=psychedelic] .toggle-explainer{isolation:isolate}
[data-design=psychedelic] .toggle-explainer:before{content:'';position:absolute;inset:-2rem -5rem;z-index:-1;border-radius:47% 53% 39% 61% / 58% 42% 58% 42%;background-color:var(--cream);background-image:radial-gradient(var(--garnet) 0 .42rem,transparent .46rem);background-size:2.2rem 2.2rem;mask-image:radial-gradient(ellipse at center,#000 62%,transparent 73%)}
[data-design=psychedelic] .constant-grid article,[data-design=psychedelic] .constant-grid article:nth-child(even){justify-content:center;padding:1.5rem 1.7rem 4.4rem}
[data-design=psychedelic] .constant-grid h3{margin:0 0 .5rem}
[data-design=psychedelic] .problem .drawer-inner{display:contents}
[data-design=psychedelic] .problem{grid-template-columns:minmax(0,1.15fr) minmax(18rem,.7fr)}
[data-design=psychedelic] .services,[data-design=psychedelic] .problem .demo-block{grid-column:1/-1;width:100%;max-width:none}

/* WORDS: less brutalist billboard, more eccentric vintage newspaper. */
[data-design=words] body{background:#f6f0e4;background-image:linear-gradient(rgba(36,27,34,.035) 1px,transparent 1px);background-size:100% 1.55rem}
[data-design=words] .site-header{border-top:4px double var(--ink);border-bottom:4px double var(--ink);height:5rem;margin-top:1rem;font-family:var(--flow-body)}
[data-design=words] .brand span,[data-design=words] nav a{font-family:var(--flow-body);letter-spacing:.02em}
[data-design=words] .hero{max-width:84rem;padding:4.5rem var(--pad) 6rem;min-height:auto;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(17rem,.55fr);grid-template-areas:'title price' 'copy copy' 'actions note';gap:1.5rem;border-bottom:5px double var(--ink)}
[data-design=words] .hero:before{content:'BUILD WITH MATRIARCH  •  WEBSITES THAT EARN THEIR KEEP';grid-column:1/-1;border-top:1px solid;border-bottom:1px solid;padding:.45rem 0;text-align:center;font:700 .72rem var(--flow-body);letter-spacing:.16em}
[data-design=words] .hero h1{grid-area:title;font-family:var(--flow-body);font-size:clamp(3.8rem,7.2vw,7.7rem);line-height:.86;max-width:11ch;letter-spacing:-.045em}
[data-design=words] .hero h1 em{display:inline;margin-left:0;font-size:1em;color:var(--garnet)}
[data-design=words] .hero-copy{grid-area:copy;margin:1.5rem 0 0;max-width:none;border:0;border-top:1px solid;padding:1.2rem 0 0;columns:2;column-gap:3rem;font-family:var(--flow-body);font-size:1.22rem}
[data-design=words] .hero-actions{grid-area:actions;margin-left:0}
[data-design=words] .hero-price{grid-area:price;position:static;transform:none;width:auto;height:auto;border:1px solid;padding:1.4rem;background:transparent;color:var(--ink);display:flex;border-radius:0;align-items:flex-start;text-align:left}
[data-design=words] .hero-price strong{font-family:var(--flow-body);font-size:3rem;color:var(--garnet)}
[data-design=words] .hero-note{grid-area:note;position:static;margin:0;text-align:right;font-family:var(--flow-hand)}
[data-design=words] .swoop{display:none}
[data-design=words] .toggle-explainer{margin:0 auto;max-width:58rem;padding:4rem var(--pad);text-align:center;border-bottom:1px solid}
[data-design=words] .toggle-quote{font-family:var(--flow-body);font-style:italic}
[data-design=words] .constants,[data-design=words] .problem,[data-design=words] .proof,[data-design=words] .assessment{max-width:84rem;margin:auto;padding:6rem var(--pad);border-top:4px double var(--ink)}
[data-design=words] .constants h2,[data-design=words] .problem-lead h2,[data-design=words] .assessment-intro h2{font-family:var(--flow-body);font-size:clamp(3.3rem,6.2vw,6.4rem);max-width:13ch}
[data-design=words] .constant-grid{margin:3rem 0 0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid}
[data-design=words] .constant-grid article,[data-design=words] .constant-grid article:nth-child(even){display:grid;grid-template-columns:2.4rem 1fr;padding:1.2rem;border-bottom:1px solid;min-height:0;background:transparent}
[data-design=words] .constant-grid article:nth-child(odd){border-right:1px solid}
[data-design=words] .constant-grid h3{font-family:var(--flow-body);font-size:2rem;color:var(--garnet);margin:0}
[data-design=words] .constant-grid p{grid-column:2;font-family:var(--flow-body)}
[data-design=words] .problem{display:grid;grid-template-columns:1.15fr .7fr;gap:4rem}
[data-design=words] .problem-body{margin:0;align-self:end;font-family:var(--flow-body)}
[data-design=words] .problem-body strong{font-family:var(--flow-body);font-size:clamp(3.5rem,6vw,6rem);line-height:.9}
[data-design=words] .services{grid-column:1/-1;margin:3rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:3px double}
[data-design=words] .services li{display:block;padding:1.2rem!important;border-right:1px solid}
[data-design=words] .services b{display:block;font-family:var(--flow-body);font-size:1.8rem;color:var(--garnet)}
[data-design=words] .proof header h2,[data-design=words] .case-title h3{font-family:var(--flow-body)}
[data-design=words] .case-stat strong{font-family:var(--flow-body);font-size:5rem;text-shadow:none}
[data-design=words] .assessment{display:grid;grid-template-columns:.8fr 1fr;gap:5rem;padding-left:var(--pad)}
[data-design=words] .assessment .steps{margin:0;max-width:none}

/* 90s NOSTALGIA (the existing Pattern mode): shorter hero, visible note and
   the same full-width content reset as Psychedelic. */
[data-design=pattern] .hero{min-height:38rem;padding-top:clamp(2.5rem,5vw,5rem);padding-bottom:clamp(3.5rem,6vw,6rem);margin-top:1.5rem;margin-bottom:4.5rem}
[data-design=pattern] .hero h1{font-size:clamp(3.4rem,7.2vw,7.2rem)}
[data-design=pattern] .hero-note{left:auto;right:1.5rem;bottom:1.25rem;margin:0;max-width:18rem}
[data-design=pattern] .constant-grid article,[data-design=pattern] .constant-grid article:nth-child(even){justify-content:center;padding-bottom:4rem}
[data-design=pattern] .constant-grid h3{margin:0 0 .5rem}
[data-design=pattern] .problem .drawer-inner{display:contents}
[data-design=pattern] .services,[data-design=pattern] .problem .demo-block{grid-column:1/-1;width:100%;max-width:none}
[data-design=pattern] .design-tabs button[data-mode=pattern]{font-size:.68rem;line-height:1.05}

@media(max-width:800px){[data-design=words] .hero{display:block;padding-top:3rem}[data-design=words] .hero:before{display:block;margin-bottom:2rem}[data-design=words] .hero-copy{columns:1}[data-design=words] .hero-price{margin-top:2rem}[data-design=words] .problem,[data-design=words] .assessment{display:block}[data-design=words] .constant-grid,[data-design=words] .services{grid-template-columns:1fr}[data-design=words] .constant-grid article:nth-child(odd),[data-design=words] .services li{border-right:0}[data-design=psychedelic] .hero-copy{margin-left:0;padding-right:0}[data-design=psychedelic] .problem{grid-template-columns:1fr}}

/* Order's own treatment for the checkout/quote demos — same mechanism as
   Flow's, restyled: Space Grotesk instead of Cormorant Garamond, double-line
   borders instead of simple thin ones, square corners throughout. */
[data-design=order] .demo-label{font-family:var(--display)}
[data-design=order] .checkout-demo,[data-design=order] .quote-demo{font-family:var(--sans);border:1px solid var(--ink);border-radius:0}
[data-design=order] .case .demo-block{width:100%}
[data-design=order] .cd-toggle-label,[data-design=order] .qd-label{font-family:var(--display)}
[data-design=order] .cd-product,[data-design=order] .cd-fulfil-row button,[data-design=order] .qd-row button,[data-design=order] .qd-svc{border-radius:0;font-family:var(--display)}
[data-design=order] .cd-product.added,[data-design=order] .qd-svc[aria-pressed=true]{border:3px double var(--garnet)}
[data-design=order] .cd-panel,[data-design=order] .qd-result.ok{border-radius:0;border:3px double var(--mint-dark)}
[data-design=order] .qd-result.escalate{border-radius:0;border:3px double var(--garnet)}
[data-design=order] .cd-add{border-radius:0;font-family:var(--display)}
[data-design=order] .qd-price,[data-design=order] .qd-escalate-title,[data-design=order] .cd-panel-head{font-family:var(--display)}