: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;--muted:#6b5f70;
  --display:'Barlow Condensed',sans-serif;--body:'Cormorant Garamond',serif;--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 1.05rem/1.6 var(--body);overflow-x:hidden;position:relative}
a{color:var(--garnet)}
.skip{position:fixed;top:.5rem;left:.5rem;z-index:1000;background:var(--ink);color:white;padding:.75rem 1rem;transform:translateY(-150%);text-decoration:none}.skip:focus{transform:none}
h1,h2,h3{font-family:var(--display);font-weight:900;line-height:.94;letter-spacing:-.01em;margin:0 0 .6em}

/* Thread — same continuous shape as the rest of the site, dynamically matched
   to real content height via script.js's fitThread(). */
#matriarch-thread-wrap{position:absolute;top:0;left:0;width:100%;height:2200px;z-index:0;pointer-events:none}
#matriarch-thread-wrap svg{display:block}
#matriarch-content{position:relative;z-index:1}

nav.site-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem var(--pad);position:relative;z-index:5}
.brand{text-decoration:none;font-weight:700;color:var(--ink)}.brand em{font-style:italic;color:var(--garnet)}
nav.site-header .links a{text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:600;font-size:.95rem;margin-left:1.75rem}
nav.site-header .links a.cta{background:var(--garnet);color:var(--cream);padding:.6rem 1.1rem;border-radius:999px}

.wrap{max-width:52rem;margin:0 auto;padding:0 var(--pad)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-weight:700;font-size:.75rem;color:var(--mint-dark);font-family:var(--display)}

/* ===== Article page ===== */
.back-link{display:inline-block;text-decoration:none;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--muted);margin:2.5rem 0 2rem}
.article-hero{max-width:52rem;margin:0 auto;padding:0 var(--pad) 3rem}
.article-tag{display:inline-block;font-family:var(--display);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--garnet);margin-bottom:.75rem}
.article-hero h1{font-size:clamp(2.4rem,5vw,3.6rem)}
.article-hero>p{font-size:1.3rem;color:var(--muted);max-width:38rem;margin:1rem 0 2rem}
.article-fact{display:inline-block;background:var(--garnet);color:var(--cream);font-family:var(--display);font-weight:700;padding:1rem 1.5rem;border-radius:1rem 1rem 1rem .25rem;font-size:1.05rem;max-width:32rem}

.article-body{max-width:52rem;margin:0 auto;padding:0 var(--pad)}
.article-section{padding:3rem 0;border-top:1px solid rgba(36,27,34,.12)}
.article-section:first-child{border-top:0}
.article-copy{position:relative}
.section-number{position:absolute;left:-3.2rem;top:.15rem;font-family:var(--display);font-weight:900;font-size:1rem;color:var(--mint-dark);display:none}
@media(min-width:56rem){.article-body{max-width:58rem}.article-copy{padding-left:3.2rem}.section-number{display:block}}
.article-copy h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.article-copy p{font-size:1.15rem;margin:0 0 1rem}
.article-widget{margin:1rem 0 4.5rem;padding:1rem 0 1.5rem;border-bottom:1px solid rgba(36,27,34,.12)}
.article-widget iframe{display:block;width:100%;border:0;background:transparent;transition:height .25s var(--ease)}

.related{max-width:52rem;margin:2rem auto 6rem;padding:0 var(--pad)}
.related>.eyebrow{display:block;margin-bottom:1rem}
.related a{display:flex;justify-content:space-between;align-items:baseline;text-decoration:none;color:var(--ink);padding:1.1rem 0;border-top:1px solid rgba(36,27,34,.12);font-family:var(--display);font-weight:600;font-size:1.1rem}
.related a span{font-family:var(--body);font-weight:400;font-style:italic;font-size:.9rem;color:var(--muted)}

footer.site-footer{padding:3rem var(--pad);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;background:var(--ink);color:var(--cream);position:relative;z-index:1}
footer.site-footer a{color:var(--mint)}

/* ===== Story visuals — the actual diagram grammar =====
   One shared card language (soft rounded chips, mint/cream/garnet only, no
   photography) with twelve type-specific arrangements so each communicates its
   own kind of relationship rather than being a generic label list. */
.story-visual{margin:2rem 0 0;padding:1.75rem 1.5rem;background:var(--mint-pale);border:1px solid var(--mint-dark);border-radius:1.25rem}
.story-visual>span{display:block;font-family:var(--display);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mint-dark);margin-bottom:1rem}
.story-visual b{display:inline-block;font:600 .95rem var(--display);font-weight:600;background:var(--cream);border:1px solid var(--mint-dark);color:var(--ink);padding:.55rem 1rem;border-radius:999px;margin:.25rem .35rem .25rem 0}

/* flow / timeline / manytoone / seasonal-state style progressions: a row of
   chips with a connecting thread drawn behind them */
.story-visual.flow,.story-visual.timeline{position:relative}
.story-visual.flow>div,.story-visual.timeline>div{display:flex;flex-wrap:wrap;gap:.5rem;position:relative}
.story-visual.flow{background:var(--mint-pale)}
.story-visual.flow b,.story-visual.timeline b{position:relative}
.story-visual.flow b:not(:last-child)::after,.story-visual.timeline b:not(:last-child)::after{content:'\2192';position:absolute;right:-1.15rem;top:50%;transform:translateY(-50%);color:var(--garnet);font-size:.85rem}
.story-visual.timeline b{background:var(--mint-dark);color:var(--cream);border-color:var(--mint-dark)}
.story-visual.timeline b:nth-child(odd){background:var(--cream);color:var(--ink)}

/* many-to-one: several inputs converging on a highlighted final chip */
.story-visual.manytoone b:last-child{background:var(--garnet);color:var(--cream);border-color:var(--garnet);display:block;margin-top:.75rem}
.story-visual.manytoone b:not(:last-child){opacity:.85}

/* split: two positions either side of a divider */
.story-visual.split{display:flex;flex-direction:column;gap:.5rem}
.story-visual.split b{display:block;width:100%;text-align:center;border-radius:.75rem}
.story-visual.split b:first-of-type{position:relative}
.story-visual.split b:first-of-type::after{content:'vs';position:absolute;left:50%;bottom:-1.35rem;transform:translateX(-50%);font:italic 400 .85rem var(--body);color:var(--garnet);background:var(--mint-pale);padding:0 .5rem}
.story-visual.split b:not(:first-of-type){margin-top:1rem}

/* funnel: each successive chip narrower, centred */
.story-visual.funnel>span+*{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.story-visual.funnel b{width:100%}
.story-visual.funnel b:nth-of-type(1){max-width:100%}
.story-visual.funnel b:nth-of-type(2){max-width:78%}
.story-visual.funnel b:nth-of-type(3){max-width:58%}
.story-visual.funnel b:nth-of-type(4){max-width:40%}

/* decision: full-width branch rows, alternating tint, arrow already in the text */
.story-visual.decision{display:flex;flex-direction:column;gap:.5rem}
.story-visual.decision b{display:block;width:100%;text-align:left;border-radius:.6rem}
.story-visual.decision b:nth-child(odd){background:var(--mint-light)}

/* hub: the label acts as the centre; items sit around it as satellites */
.story-visual.hub{text-align:center}
.story-visual.hub b{border-radius:999px}
.story-visual.hub b:first-of-type{display:block;margin:0 auto 1rem;background:var(--garnet);color:var(--cream);border-color:var(--garnet);font-weight:700;width:fit-content}

/* matrix: small grid of bordered cells */
.story-visual.matrix>span+*{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.story-visual.matrix b{margin:0;text-align:center;border-radius:.5rem}

/* stack: overlapping offset cards */
.story-visual.stack>span+*{display:flex;flex-direction:column}
.story-visual.stack b{margin:0 0 -.6rem 0;box-shadow:0 6px 14px rgba(36,27,34,.12)}
.story-visual.stack b:nth-child(2){margin-left:1rem}
.story-visual.stack b:nth-child(3){margin-left:2rem}
.story-visual.stack b:nth-child(4){margin-left:3rem}

/* deadends: the chain visibly stops — last chip fades and dashes out */
.story-visual.deadends{position:relative}
.story-visual.deadends>div{display:flex;flex-wrap:wrap;gap:.5rem}
.story-visual.deadends b:not(:last-child)::after{content:'\2192';margin-left:.35rem;color:var(--muted)}
.story-visual.deadends b:last-child{border-style:dashed;opacity:.55;background:transparent}

/* islands: no connectors at all, slight independent rotation — deliberately
   fragmented, the opposite of every other type here */
.story-visual.islands>div{display:flex;flex-wrap:wrap;gap:1rem}
.story-visual.islands b:nth-child(odd){transform:rotate(-2deg)}
.story-visual.islands b:nth-child(even){transform:rotate(2deg)}

/* loop: a returning-arrow icon signals the cycle */
.story-visual.loop>span::before{content:'\21bb  ';color:var(--garnet)}
.story-visual.loop>div{display:flex;flex-wrap:wrap;gap:.5rem}
.story-visual.loop b:not(:last-child)::after{content:'\2192';margin-left:.35rem;color:var(--garnet)}

/* wrap items needing the flex/grid row that isn't span itself */
.story-visual.flow>span,.story-visual.timeline>span,.story-visual.manytoone>span,.story-visual.deadends>span,.story-visual.islands>span,.story-visual.loop>span{margin-bottom:1rem}

/* ===== work.html listing page ===== */
.work-hero{max-width:38rem;margin:2rem auto 4rem;padding:0 var(--pad);text-align:center}
.work-hero h1{font-size:clamp(2.6rem,6vw,4rem)}
.business{max-width:52rem;margin:0 auto 5rem;padding:0 var(--pad)}
.business-intro{background:var(--mint);border-radius:1.5rem;padding:2.5rem;margin-bottom:1.5rem}
.business-intro .eyebrow{color:var(--garnet-dark)}
.business-intro h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:.5rem 0 1rem}
.business-intro p{font-size:1.15rem;max-width:34rem}
.business-stat{display:inline-block;background:var(--cream);border-radius:999px;padding:.6rem 1.2rem;font-family:var(--display);font-weight:700;margin-top:.75rem}
.article-list{list-style:none;margin:0;padding:0}
.article-list li{border-top:1px solid rgba(36,27,34,.12)}
.article-list a{display:flex;justify-content:space-between;align-items:center;gap:1rem;text-decoration:none;color:var(--ink);padding:1.4rem .5rem;font-family:var(--display);font-weight:600;font-size:1.2rem}
.article-list a span{font-size:1rem;color:var(--garnet)}

@media(max-width:640px){
  nav.site-header .links a:not(.cta){display:none}
  .article-fact{display:block}
}

/* Case-study hierarchy + Why Me */
.case-main-link{display:inline-block;margin-top:1.5rem;background:var(--garnet);color:var(--cream);padding:.85rem 1.15rem;text-decoration:none;font:700 1rem var(--display);box-shadow:.4rem .4rem 0 var(--ink);transition:transform .2s ease,box-shadow .2s ease}.case-main-link:hover{transform:translate(-3px,-3px);box-shadow:.65rem .65rem 0 var(--ink)}
.article-list>li>span{display:block;padding:1.05rem .5rem;border-bottom:1px solid rgba(36,27,34,.25);font-family:var(--body);font-size:1.05rem}.main-case-intro{max-width:60rem;margin:0 auto;padding:5rem var(--pad) 1rem}.main-case-intro p{font:600 clamp(1.6rem,3.1vw,2.6rem)/1.25 var(--body);border-left:.55rem solid var(--garnet);padding-left:1.5rem}.main-case-body .article-section{grid-template-columns:1fr}.main-case-body .article-copy{max-width:62rem}.case-chapters a{display:grid;grid-template-columns:minmax(14rem,.65fr) 1fr;gap:2rem;align-items:baseline}.case-chapters a span{font-family:var(--body);font-size:1rem;text-transform:none;letter-spacing:0}
.why-page{position:relative;z-index:2}.why-hero,.why-story,.why-difference,.why-work{padding:clamp(4rem,9vw,9rem) var(--pad);max-width:82rem;margin:auto}.why-hero{text-align:right;max-width:72rem;margin-right:5vw}.why-hero h1{font:900 clamp(3.6rem,7.5vw,7.8rem)/.88 var(--display);letter-spacing:-.025em;margin:.35em 0}.why-hero p{font:400 1.3rem/1.6 var(--body);max-width:48rem;margin:0 0 1rem auto}.why-story{max-width:60rem;margin-left:3vw}.why-story h2,.why-difference h2,.why-work h2{font:900 clamp(3rem,6vw,6rem)/.92 var(--display);margin:0 0 2rem}.why-story p,.why-work li{font:400 1.2rem/1.65 var(--body)}.hand-line{display:inline-block!important;color:var(--garnet);font:700 clamp(2.4rem,5vw,4.5rem) var(--hand)!important;transform:rotate(-2deg);border-bottom:.25rem solid var(--garnet)}.why-difference{max-width:90rem}.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.why-grid article{background:rgba(255,249,237,.9);padding:2rem;border:1px solid var(--ink);box-shadow:.55rem .55rem 0 var(--mint-dark)}.why-grid article:nth-child(even){transform:translateY(2rem);background:var(--garnet);color:var(--cream);box-shadow:.55rem .55rem 0 var(--ink)}.why-grid h3{font:900 2rem/1 var(--display);margin:0 0 1rem}.why-grid p{font:400 1.08rem/1.55 var(--body);margin:0}.why-work{max-width:68rem;margin-right:3vw}.why-work ul{list-style:none;padding:0;margin:0 0 2.5rem}.why-work li{padding:1.15rem 0;border-top:1px solid}.why-cta{display:inline-block;background:var(--garnet);color:var(--cream);padding:1rem 1.35rem;text-decoration:none;font:700 1.05rem var(--display);box-shadow:.5rem .5rem 0 var(--ink)}
@media(max-width:760px){.case-chapters a{grid-template-columns:1fr;gap:.35rem}.why-hero{text-align:left;margin-right:auto}.why-hero p{margin-left:0}.why-grid{grid-template-columns:1fr}.why-grid article:nth-child(even){transform:none}.why-story,.why-work{margin-left:auto;margin-right:auto}}